/* feedback.css — widget de feedback del chrome §15.1.
Spec: docs/diseño/feedback-widget-spec.md · Mockup: docs/diseño/feedback-widget.html
Se carga en los DIEZ shells, DESPUES del set de tokens de cada uno. Prefijo
`.fb-`, igual que `.wl-` (waitlist wall) y `.omni-` (omnibox): componente
compartido, hoja propia. El CSS NO se duplica en las hojas de suite — es lo
que hizo divergir el overlay ambihub en siete templates.
TRES REGLAS QUE ESTA HOJA NO PUEDE ROMPER, y por que:
1. TODO `var(--x)` LLEVA FALLBACK LITERAL. Los diez shells cargan `chrome.css`
mas UNO de tres sets de tokens, y los tres no son iguales: `--shadow-pop`
NO existe en `sma-suite.css`. Una var indefinida no degrada al valor de
reposo — invalida la DECLARACION ENTERA, asi que el popover saldria plano
sobre la tabla de /sma/ufs. El fallback es obligatorio, no cosmetico.
2. NADA CUELGA DE UNA CLASE DE ``. `sma/suite/base.html` no le pone
ninguna. Todos los selectores arrancan en `.fb-*`.
3. NO SE REUSA `.btn`. Esta scopeado a `.seia-suite .btn` (0,2,0) en un set y
suelto (0,1,0) en los otros dos: el mismo componente se veria distinto
segun el shell. Clase propia `.fb-send`.
Ademas los resets difieren: `seia-suite.css` scopea `box-sizing` a
`.seia-suite *` y NO resetea margenes, mientras que `sma-suite.css` y
`centro-documental.css` resetean `margin/padding` global. Por eso el widget
declara su propio `box-sizing` y el margen de CADA elemento de texto: sin
eso, el `` del error y el `
` del titulo traen el margen del navegador
solo en los cinco shells que cargan `seia-suite.css`.
============================================================================ */
.fb-trigger,
.fb-trigger *,
.fb-pop,
.fb-pop *,
.fb-scrim {
box-sizing: border-box;
}
/* --- Disparador en el topbar ---------------------------------------------- */
.fb-trigger {
display: inline-flex;
align-items: center;
gap: 6px;
height: 28px;
padding: 0 10px;
margin: 0;
font-family: var(--font-sans, "IBM Plex Sans", system-ui, sans-serif);
font-size: 12px;
font-weight: 500;
border-radius: var(--radius-full, 9999px);
border: 1px solid var(--hairline-strong, rgba(15, 23, 42, 0.14));
background: var(--surface, #ffffff);
color: var(--ink-3, #475569);
white-space: nowrap;
cursor: pointer;
transition: background var(--duration-fast, 120ms) var(--ease-standard, cubic-bezier(0.2, 0, 0, 1)),
border-color var(--duration-fast, 120ms) var(--ease-standard, cubic-bezier(0.2, 0, 0, 1)),
color var(--duration-fast, 120ms) var(--ease-standard, cubic-bezier(0.2, 0, 0, 1));
}
.fb-trigger svg {
flex-shrink: 0;
color: var(--teal-600, #0d9488);
}
.fb-trigger:hover {
background: var(--teal-50, #f0fdfa);
border-color: var(--teal-300, #5eead4);
color: var(--teal-700, #0f766e);
}
.fb-trigger[aria-expanded="true"] {
background: var(--teal-50, #f0fdfa);
border-color: var(--teal-600, #0d9488);
color: var(--teal-700, #0f766e);
}
.fb-trigger:focus-visible {
outline: none;
box-shadow: var(--shadow-focus, 0 0 0 2px #ffffff, 0 0 0 4px #0f766e);
}
/* --- Popover -------------------------------------------------------------- */
/* `position:fixed` + coordenadas puestas por JS. El topbar es `sticky` y con
z-index propio, y los shells cuelgan tablas con `overflow` propio: anclar con
`absolute` dentro de `.topbar-right` lo recortaba en los listados. Mismo
motivo que `.col-popup`/`.cols-panel` en chrome.css (DS §8.2). */
.fb-pop {
position: fixed;
z-index: 70;
width: 380px;
max-width: calc(100vw - 16px);
font-family: var(--font-sans, "IBM Plex Sans", system-ui, sans-serif);
font-size: 14px;
line-height: 1.5;
color: var(--ink-1, #0f172a);
background: var(--surface, #ffffff);
border: 1px solid var(--hairline-strong, rgba(15, 23, 42, 0.14));
border-radius: var(--radius-lg, 8px);
/* El fallback de `--shadow-pop` es el que se ve en /sma/ufs. */
box-shadow: var(--shadow-pop, 0 8px 28px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.08));
overflow: hidden;
display: none;
}
.fb-pop.open {
display: block;
}
.fb-strata {
height: 2px;
background: linear-gradient(
90deg,
var(--teal-700, #0f766e) 0%,
var(--teal-400, #2dd4bf) 55%,
var(--teal-200, #99f6e4) 100%
);
}
.fb-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2, 8px);
padding: var(--space-3, 12px) var(--space-4, 16px) 0;
}
.fb-title {
font-size: 13px;
font-weight: 600;
color: var(--ink-1, #0f172a);
margin: 0;
}
.fb-close {
width: 26px;
height: 26px;
margin: 0 -6px 0 0;
padding: 0;
border: 0;
background: transparent;
border-radius: var(--radius-sm, 4px);
display: flex;
align-items: center;
justify-content: center;
color: var(--ink-5, #94a3b8);
cursor: pointer;
}
.fb-close:hover {
background: var(--surface-muted, #f8fafc);
color: var(--ink-2, #1e293b);
}
.fb-close:focus-visible {
outline: none;
box-shadow: var(--shadow-focus, 0 0 0 2px #ffffff, 0 0 0 4px #0f766e);
}
.fb-body {
padding: var(--space-3, 12px) var(--space-4, 16px) var(--space-4, 16px);
}
.fb-body[hidden],
.fb-ok[hidden],
.fb-error[hidden] {
display: none;
}
/* Tipos — segmentado. Misma taxonomia que `tipo_labels` en auth/email.py. */
.fb-tipos {
display: flex;
gap: var(--space-1-5, 6px);
margin: 0 0 var(--space-3, 12px);
}
.fb-tipo {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
height: 30px;
padding: 0 6px;
margin: 0;
border: 1px solid var(--hairline, rgba(15, 23, 42, 0.08));
background: var(--surface-muted, #f8fafc);
border-radius: var(--radius-md, 6px);
font-family: inherit;
font-size: 11.5px;
font-weight: 500;
color: var(--ink-3, #475569);
cursor: pointer;
transition: all var(--duration-fast, 120ms) var(--ease-standard, cubic-bezier(0.2, 0, 0, 1));
}
.fb-tipo svg {
flex-shrink: 0;
width: 13px;
height: 13px;
}
.fb-tipo:hover:not(:disabled) {
background: var(--teal-50, #f0fdfa);
border-color: var(--teal-200, #99f6e4);
color: var(--teal-700, #0f766e);
}
.fb-tipo[aria-checked="true"] {
background: var(--chrome, #0f172a);
border-color: var(--chrome, #0f172a);
color: #fff;
}
.fb-tipo[aria-checked="true"] svg {
color: var(--teal-400, #2dd4bf);
}
.fb-tipo:focus-visible {
outline: none;
box-shadow: var(--shadow-focus, 0 0 0 2px #ffffff, 0 0 0 4px #0f766e);
}
.fb-tipo:disabled {
cursor: default;
}
/* Campos */
.fb-field {
position: relative;
margin: 0 0 var(--space-2-5, 10px);
}
.fb-field--last {
margin-bottom: 0;
}
.fb-select,
.fb-input,
.fb-textarea {
width: 100%;
margin: 0;
font-family: var(--font-sans, "IBM Plex Sans", system-ui, sans-serif);
font-size: 13px;
color: var(--ink-2, #1e293b);
background: var(--surface-muted, #f8fafc);
border: 1px solid var(--hairline-strong, rgba(15, 23, 42, 0.14));
border-radius: var(--radius-md, 6px);
transition: border-color var(--duration-fast, 120ms) var(--ease-standard, cubic-bezier(0.2, 0, 0, 1)),
background var(--duration-fast, 120ms) var(--ease-standard, cubic-bezier(0.2, 0, 0, 1));
}
.fb-select {
height: 34px;
padding: 0 30px 0 10px;
appearance: none;
-webkit-appearance: none;
color: var(--ink-3, #475569);
cursor: pointer;
}
.fb-input {
height: 34px;
padding: 0 10px;
}
.fb-textarea {
min-height: 88px;
padding: 9px 10px;
resize: vertical;
line-height: 1.45;
display: block;
}
.fb-select:focus,
.fb-input:focus,
.fb-textarea:focus {
outline: none;
background: var(--surface, #ffffff);
border-color: var(--teal-600, #0d9488);
box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.1);
}
.fb-select::placeholder,
.fb-input::placeholder,
.fb-textarea::placeholder {
color: var(--ink-5, #94a3b8);
}
.fb-caret {
position: absolute;
right: 9px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
color: var(--ink-4, #64748b);
}
.fb-prompt {
font-size: 12px;
color: var(--ink-4, #64748b);
margin: 0 0 var(--space-1-5, 6px);
line-height: 1.4;
}
/* Pie: contexto + envio */
.fb-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3, 12px);
margin-top: var(--space-3, 12px);
}
.fb-ctx {
display: inline-flex;
align-items: center;
gap: 5px;
min-width: 0;
font-family: var(--font-mono, "JetBrains Mono", Consolas, monospace);
font-size: var(--text-mono-xs-size, 10px);
color: var(--ink-5, #94a3b8);
}
.fb-ctx svg {
flex-shrink: 0;
}
.fb-ctx span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 170px;
}
.fb-send {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 32px;
/* El boton NO puede cambiar de ancho al pasar a "Enviando…": el pie saltaria
justo cuando el usuario esta mirando.
El valor NO es el 104px del mockup. Medido en Chromium sobre el shell real,
con IBM Plex Sans cargada y con el fetch EN VUELO (no simulando el estado
desde la consola), sin ningun minimo el boton pide:
"Enviar" + flecha ....... 86px
loader + "Enviando…" ... 118px
"Reintentar" + flecha .. 112px
Con 104 el boton habria CRECIDO 14px al enviar, o sea el mockup traia el
defecto que decia prevenir. 120px cubre los tres estados con holgura. */
min-width: 120px;
padding: 0 14px;
margin: 0;
border: 1px solid transparent;
border-radius: var(--radius-md, 6px);
background: var(--teal-700, #0f766e);
color: #fff;
font-family: inherit;
font-size: 13px;
font-weight: 500;
flex-shrink: 0;
cursor: pointer;
}
.fb-send:hover:not(:disabled) {
background: var(--teal-800, #115e59);
}
.fb-send:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.fb-send:focus-visible {
outline: none;
box-shadow: var(--shadow-focus, 0 0 0 2px #ffffff, 0 0 0 4px #0f766e);
}
.fb-send [hidden] {
display: none;
}
/* Espera — DS §3.16. NO es un spinner: es el loader de marca `strata-pulse`,
el mismo que corre en el buscador federado del shell antiguo. Las tres barras
del logo entran de izquierda a derecha, se quedan, y salen.
Dentro del boton teal va la variante `--on-brand`: con los rellenos en
#2dd4bf serian barras teal sobre fondo teal, o sea invisibles; asi heredan
`currentColor` (el blanco del label) con las mismas tres opacidades del
simbolo. El `viewBox` es el oficial y no se re-dibuja a otra escala. */
.ambi-loader {
flex-shrink: 0;
}
.ambi-loader .strata-1,
.ambi-loader .strata-2,
.ambi-loader .strata-3 {
animation: strata-pulse 1.4s ease-in-out infinite;
}
.ambi-loader .strata-1 {
opacity: 0;
animation-delay: 0s;
}
.ambi-loader .strata-2 {
opacity: 0;
animation-delay: 0.2s;
}
.ambi-loader .strata-3 {
opacity: 0;
animation-delay: 0.4s;
}
@keyframes strata-pulse {
0% {
opacity: 0;
transform: translateX(-4px);
}
20% {
opacity: 1;
transform: translateX(0);
}
60% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(2px);
}
}
.ambi-loader--on-brand .strata-1 {
fill: currentColor;
fill-opacity: 0.35;
}
.ambi-loader--on-brand .strata-2 {
fill: currentColor;
fill-opacity: 0.7;
}
.ambi-loader--on-brand .strata-3 {
fill: currentColor;
fill-opacity: 1;
}
/* Error — el widget viejo NO tenia este estado: un 500, un 400 o un fetch caido
se tragaban en `console.error` y la tarjeta quedaba identica, asi que el
usuario lo leia como enviado. Solo el exito confirma (spec §4.3). */
.fb-error {
display: flex;
align-items: flex-start;
gap: 6px;
margin: var(--space-2-5, 10px) 0 0;
padding: 8px 10px;
background: var(--danger-50, #fef2f2);
border: 1px solid rgba(153, 27, 27, 0.18);
border-radius: var(--radius-md, 6px);
font-size: 12px;
color: var(--danger-700, #991b1b);
line-height: 1.4;
}
.fb-error svg {
flex-shrink: 0;
margin-top: 1px;
}
.fb-error a {
color: inherit;
text-decoration: underline;
}
/* Exito */
.fb-ok {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: var(--space-8, 32px) var(--space-4, 16px);
}
.fb-ok-badge {
position: relative;
width: 46px;
height: 46px;
border-radius: var(--radius-full, 9999px);
background: var(--teal-50, #f0fdfa);
display: flex;
align-items: center;
justify-content: center;
color: var(--teal-700, #0f766e);
}
.fb-ok-badge::after {
content: "";
position: absolute;
inset: 0;
border-radius: var(--radius-full, 9999px);
background: var(--teal-400, #2dd4bf);
opacity: 0.35;
animation: fb-pulse 1.6s ease-out infinite;
}
@keyframes fb-pulse {
0% {
transform: scale(1);
opacity: 0.35;
}
70% {
transform: scale(1.5);
opacity: 0;
}
100% {
opacity: 0;
}
}
.fb-ok-title {
margin: var(--space-3, 12px) 0 0;
font-size: 13px;
font-weight: 600;
color: var(--ink-1, #0f172a);
}
.fb-ok-sub {
margin: var(--space-1, 4px) 0 0;
font-size: 12px;
color: var(--ink-4, #64748b);
}
/* Motion reducido: las barras quedan quietas y el badge deja de pulsar. */
@media (prefers-reduced-motion: reduce) {
.ambi-loader .strata-1,
.ambi-loader .strata-2,
.ambi-loader .strata-3 {
animation: none;
opacity: 0.6;
}
.fb-ok-badge::after {
animation: none;
opacity: 0.2;
}
.fb-trigger,
.fb-tipo,
.fb-select,
.fb-input,
.fb-textarea,
.fb-scrim {
transition: none;
}
}
/* Scrim: solo se ve como bottom sheet, bajo --bp-md. Sobre ese umbral queda
`visibility:hidden` aunque el JS le ponga `.open`, asi que no intercepta
clicks en escritorio. */
.fb-scrim {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.35);
z-index: 69;
opacity: 0;
visibility: hidden;
transition: opacity 160ms, visibility 160ms;
}
/* --- Movil: el popover se vuelve bottom sheet ------------------------------ */
@media (max-width: 768px) {
.fb-trigger span {
display: none;
}
.fb-trigger {
width: 34px;
height: 34px;
padding: 0;
justify-content: center;
border-radius: var(--radius-md, 6px);
}
/* El disparador sigue a sus VECINOS del topbar, no se inventa su propio
tamano: `chrome.css:199` sube la `.hamburger` a `var(--tap)` con el flag
mobile encendido y `:219` hace lo mismo con los `.btn` de `.topbar-right`.
Sin esta regla el widget habria sido el unico control de la fila en 34px,
10px mas bajo que "Iniciar sesion" justo al lado — y quedaba fuera del
objetivo tactil que el resto de la fila si cumple. Se cuelga del mismo
flag que sus vecinos para no divergir en ninguno de los dos estados. */
html[data-mobile-v1] .fb-trigger {
width: var(--tap, 44px);
height: var(--tap, 44px);
}
/* `!important` contra las coordenadas inline que pone el JS para el anclaje
de escritorio: el sheet ocupa el ancho completo pegado abajo. */
.fb-pop {
left: 0 !important;
right: 0 !important;
top: auto !important;
bottom: 0;
width: auto;
max-width: none;
max-height: 92dvh;
overflow-y: auto;
border-radius: var(--radius-lg, 8px) var(--radius-lg, 8px) 0 0;
border-bottom: 0;
padding-bottom: var(--safe-bottom, 0px);
}
.fb-scrim.open {
opacity: 1;
visibility: visible;
}
/* 16px evita el zoom automatico de iOS al enfocar — el mismo motivo por el
que `chrome.css` sube `--text-field-size` bajo este breakpoint. */
.fb-select,
.fb-input,
.fb-textarea {
font-size: 16px;
}
.fb-tipo {
font-size: 11px;
}
/* Objetivo tactil de 44px. NO se usa `flex:1` —que es lo que traia el
mockup—: dentro de un `.fb-foot` en `column-reverse` sin altura propia,
`flex:1` pone `flex-basis:0` y el boton COLAPSA. Medido en Chromium a
375px: 19px de alto, o sea menos de la mitad del minimo (2.5.5). Con
`align-items:stretch` el ancho completo ya lo da el contenedor, asi que el
`flex` no aportaba nada y se lleva puesto el alto. */
.fb-send {
height: auto;
min-height: var(--tap, 44px);
flex: 0 0 auto;
}
.fb-foot {
flex-direction: column-reverse;
align-items: stretch;
gap: var(--space-2, 8px);
}
.fb-ctx {
justify-content: center;
}
.fb-ctx span {
max-width: none;
}
}