/* Tablero de Viajes Euroamérica.
   Paleta derivada del material real de ellos: el navy #00203f es el color de
   las tarjetas de estadísticas de veuroamerica.com. Nada del palette por
   defecto de Tailwind. */

:root {
  --ea-navy-900: #00203f;
  --ea-navy-800: #062d51;
  --ea-navy-700: #12405f;
  --ea-navy-600: #25405b;
  --ea-navy-100: #e4ebf1;
  --ea-navy-200: #c9d7e2;
  --ea-navy-050: #f2f6f9;

  /* Alertas: terracota y ámbar, tomados del registro cálido de su fotografía.
     El verde marca lo resuelto. */
  --ea-alerta: #b4442a;
  --ea-aviso: #c8873c;
  --ea-ok: #2f6b4f;

  /* Fondos teñidos de las píldoras de estado. */
  --ea-alerta-bg: #fbeae5;
  --ea-aviso-bg:  #fbf2e6;
  --ea-ok-bg:     #e7f0ec;

  /* Los dos únicos colores que pintan datos. NO se puede usar --ea-navy-900:
     falla la banda de luminosidad (L .241) y el piso de croma (.07), o sea
     que se lee como gris. Esta pareja pasa las seis pruebas: ΔE 18.2 protan,
     28.2 tritan, 25.7 visión normal, contraste ≥3:1 contra blanco. */
  --ea-dato-azul: #1c6ea4;
  --ea-dato-terracota: #b4442a;

  --ea-texto: #14202b;
  --ea-tenue: #5c6b78;
  --ea-borde: #d5dfe7;

  /* Radios (2026-09-10). Antes cada pieza traía el suyo a mano —10, 8, 12,
     4, 5— y el conjunto se leía duro y desparejo. Ahora son cuatro pasos y
     nada se sale de ellos.

     El paso GRANDE es el de toda caja que contiene algo: tarjeta, tabla,
     hilo, documento. El MEDIO es el de todo lo que se toca: botón, campo,
     segmento. El CHICO es el de las marcas diminutas —etiquetas y placas de
     tipo de archivo— donde 12 px se comerían la letra. */
  --ea-r-chico:  7px;
  --ea-r-medio:  12px;
  --ea-r-grande: 16px;
  --ea-r-burbuja: 20px;

  /* Las dos curvas del movimiento. El RESORTE es para lo que responde al
     tacto: llega, se pasa un pelo y se asienta. La SUAVE es para lo que
     entra o cambia solo, que no debe rebotar. */
  --ea-resorte: cubic-bezier(.34, 1.28, .44, 1);
  --ea-suave:   cubic-bezier(.22, .75, .26, 1);

  /* Sombras tintadas en navy y en capas: nunca shadow-md plano. */
  --ea-sombra-1: 0 1px 2px rgba(0, 32, 63, .06),
                 0 2px 6px rgba(0, 32, 63, .05);
  --ea-sombra-2: 0 2px 4px rgba(0, 32, 63, .07),
                 0 8px 20px rgba(0, 32, 63, .09);
  --ea-sombra-3: 0 4px 8px rgba(0, 32, 63, .10),
                 0 20px 48px rgba(0, 32, 63, .16);
}

/* Todo el tablero un 30% más grande (2026-08-17): el texto anterior se leía
   muy chico en pantalla.

   Se sube la raíz en vez de tocar clase por clase porque las utilidades de
   Tailwind están en rem: una sola línea escala los textos, los espacios y los
   altos de forma pareja, y no deja una tipografía grande metida a la fuerza en
   cajas del tamaño viejo. Va en PORCENTAJE y no en px para no pisarle el
   tamaño de letra a quien lo tenga subido en su navegador.

   2026-09-10: sube otro escalón, de 130 a 136 %. Es el pedido de Jorge de
   «que el texto sea un poquito más grande», y se hace acá y no clase por
   clase por lo mismo de arriba. Los cuatro enlaces de la barra pasan de
   ~434 a ~454 px sobre los 359 útiles de un teléfono: ya no entraban antes,
   y siguen bajando a su propia fila por el `flex-wrap` de `base.html`. */
html { font-size: 136%; }

body {
  font-family: 'Archivo', ui-sans-serif, sans-serif;
  color: var(--ea-texto);
  background: var(--ea-navy-050);
  line-height: 1.6;
}

/* El logo va al DOBLE (32 → 64 px) y en px, no en rem: así es exactamente el
   doble y no se le suma otra vez el 30% de la raíz.
   El original mide 292x103, o sea que a 64 px de alto todavía se dibuja por
   debajo de su resolución nativa y no se pixela.
   En teléfono va a 48: a 64 el logo mide 181 px de ancho y, con el nombre y
   "Salir" en la misma fila, no cabe en 390 px. */
.ea-logo { height: 48px; width: auto; }

/* La barra crece para que el logo nuevo respire. En px por lo mismo que el
   logo: el alto de la barra lo manda el logo, no el tamaño del texto. */
.ea-cabecera { padding-top: 12px; padding-bottom: 12px; }

@media (min-width: 640px) {
  .ea-logo { height: 64px; }
  .ea-cabecera {
    min-height: 96px;          /* 64 del logo + 16 de aire arriba y abajo */
    padding-top: 0;
    padding-bottom: 0;
  }
}

h1, h2, .ea-display {
  font-family: 'Fraunces', ui-serif, Georgia, serif;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.ea-tarjeta {
  background: #fff;
  border: 1px solid var(--ea-borde);
  border-radius: var(--ea-r-grande);
  box-shadow: var(--ea-sombra-1);
}

/* Números de reloj y montos: tabulares, para que las columnas no bailen. */
.ea-num { font-variant-numeric: tabular-nums; }

/* Solo transform y opacity. Nunca transition-all. */
.ea-boton {
  background: var(--ea-navy-900);
  color: #fff;
  border-radius: var(--ea-r-medio);
  transition: transform .16s cubic-bezier(.2, .8, .3, 1), opacity .16s ease;
}
.ea-boton:hover  { opacity: .92; transform: translateY(-1px); }
.ea-boton:active { transform: translateY(0); opacity: 1; }
.ea-boton:focus-visible {
  outline: 2px solid var(--ea-navy-700);
  outline-offset: 2px;
}

/* Botón secundario: el de verificar un paquete. Contorno, no relleno — la
   acción es reversible y no compite con el botón primario. */
.ea-boton-suave {
  background: #fff;
  border: 1px solid var(--ea-borde);
  border-radius: var(--ea-r-medio);
  color: var(--ea-navy-700);
  transition: transform .16s cubic-bezier(.2, .8, .3, 1),
              border-color .16s ease;
}
.ea-boton-suave:hover  { border-color: var(--ea-navy-600); transform: translateY(-1px); }
.ea-boton-suave:active { transform: translateY(0); }
.ea-boton-suave:focus-visible {
  outline: 2px solid var(--ea-navy-700);
  outline-offset: 2px;
}

.ea-campo {
  border: 1px solid var(--ea-borde);
  border-radius: var(--ea-r-medio);
  background: #fff;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.ea-campo:hover { border-color: var(--ea-navy-600); }
.ea-campo:focus {
  outline: none;
  border-color: var(--ea-navy-700);
  box-shadow: 0 0 0 3px rgba(0, 32, 63, .10);
}

.ea-enlace {
  transition: opacity .16s ease;
}
.ea-enlace:hover { opacity: .7; text-decoration: underline; }
.ea-enlace:focus-visible {
  outline: 2px solid var(--ea-navy-700);
  outline-offset: 2px;
  border-radius: 3px;
}

.ea-nav-enlace {
  color: rgba(255, 255, 255, .78);
  transition: opacity .16s ease;
}
.ea-nav-enlace:hover { color: #fff; }
.ea-nav-enlace:focus-visible {
  color: #fff;
  outline: 2px solid rgba(255, 255, 255, .6);
  outline-offset: 3px;
  border-radius: 3px;
}
.ea-nav-activo { color: #fff; font-weight: 600; }

.ea-etiqueta {
  background: var(--ea-navy-100);
  color: var(--ea-navy-700);
  border-radius: var(--ea-r-chico);
  font-size: .6875rem;
  letter-spacing: .01em;
  padding: .125rem .375rem;
}

/* ── Piezas del sistema ─────────────────────────────────────────────── */

/* Grano sobre el navy: profundidad en el plano oscuro, sin ningún archivo. */
.ea-grano { position: relative; }
.ea-grano::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

.ea-tarjeta-alta { box-shadow: var(--ea-sombra-2); }

/* Micro-rótulo: ordena toda tarjeta de dato. */
.ea-rotulo {
  font-size: .6875rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ea-tenue);
}

/* Píldoras: fondo teñido + texto del mismo tono, para leerlas de reojo. */
.ea-pill {
  display: inline-flex; align-items: center; gap: .25rem; border-radius: 999px;
  padding: .125rem .5rem; font-size: .6875rem; font-weight: 600;
  letter-spacing: .01em; white-space: nowrap;
}
.ea-pill-neutra { background: var(--ea-navy-100); color: var(--ea-navy-700); }
.ea-pill-alerta { background: var(--ea-alerta-bg); color: var(--ea-alerta); }
.ea-pill-aviso  { background: var(--ea-aviso-bg);  color: #8a5a20; }
.ea-pill-ok     { background: var(--ea-ok-bg);     color: var(--ea-ok); }

/* La única con anillo: tiene que ganarle al resto del renglón. */
.ea-pill-nuevo {
  background: var(--ea-alerta); color: #fff;
  box-shadow: 0 0 0 3px var(--ea-alerta-bg);
}

/* Los cinco datos del cliente. Verde = lo dijo él; ámbar = se dedujo. */
.ea-punto { display: inline-block; width: 6px; height: 6px; border-radius: 999px; }
.ea-punto-falta    { background: var(--ea-navy-200); }
.ea-punto-supuesto { background: var(--ea-aviso); }
.ea-punto-dicho    { background: var(--ea-ok); }

/* Segmentos de filtro: es lo que reemplaza a la pantalla Cola. */
.ea-seg {
  border-radius: 10px; padding: .375rem .75rem; font-size: .8125rem;
  font-weight: 500; color: var(--ea-navy-700); background: transparent;
  white-space: nowrap;
  transition: transform .16s cubic-bezier(.2, .8, .3, 1), opacity .16s ease;
}
.ea-seg:hover  { opacity: .75; }
.ea-seg:active { transform: translateY(0); }
.ea-seg:focus-visible { outline: 2px solid var(--ea-navy-700); outline-offset: 2px; }
.ea-seg-activo { background: var(--ea-navy-900); color: #fff; }

.ea-fila:hover { background: var(--ea-navy-050); }
.ea-fila-nueva { background: rgba(180, 68, 42, .045); }
.ea-fila-nueva:hover { background: rgba(180, 68, 42, .075); }

/* ── Documento dentro del hilo ───────────────────────────────────────────
   La ficha se manda como URL adentro del texto. Dibujarla como documento
   —y no como el enlace crudo— es lo que deja ver de un vistazo QUÉ se le
   mandó a la agencia. Va fuera de la burbuja, del mismo lado, porque en
   WhatsApp el documento también es su propio objeto. */
.ea-doc {
  display: flex; align-items: center; gap: .75rem;
  background: #fff;
  border: 1px solid var(--ea-borde);
  border-radius: var(--ea-r-grande);
  padding: .625rem .875rem;
  box-shadow: var(--ea-sombra-1);
  text-decoration: none;
  transition: transform .16s cubic-bezier(.2, .8, .3, 1),
              border-color .16s ease, box-shadow .16s ease;
}
.ea-doc:hover {
  transform: translateY(-1px);
  border-color: var(--ea-navy-600);
  box-shadow: var(--ea-sombra-2);
}
.ea-doc:active { transform: translateY(0); box-shadow: var(--ea-sombra-1); }
.ea-doc:focus-visible { outline: 2px solid var(--ea-navy-700); outline-offset: 2px; }

/* Terracota para PDF, azul para Word: los dos colores de dato que ya pasaron
   las pruebas de contraste. Nada de rojo/azul de librería. */
.ea-doc-icono {
  flex-shrink: 0;
  width: 2.25rem; height: 2.5rem;
  border-radius: var(--ea-r-chico);
  display: flex; align-items: center; justify-content: center;
  background: var(--ea-dato-terracota); color: #fff;
  font-size: .5625rem; font-weight: 700; letter-spacing: .06em;
}
.ea-doc-word { background: var(--ea-dato-azul); }

/* La columna de texto es la que cede: sin `flex:1 1 auto` + `min-width:0` el
   nombre no se puede encoger y el ellipsis lo dejaba en una sola letra. */
.ea-doc-texto { flex: 1 1 auto; min-width: 0; }

.ea-doc-nombre {
  display: block; font-weight: 600; color: var(--ea-texto);
  line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ea-doc-meta {
  display: block; font-size: .75rem; color: var(--ea-tenue); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* En teléfono "Abrir →" se va: la tarjeta ENTERA es el enlace, así que el
   rótulo no agrega nada y se estaba comiendo el ancho del nombre —que es el
   único dato que importa— hasta dejarlo en "A…". */
.ea-doc-abrir { display: none; }

@media (min-width: 640px) {
  .ea-doc-abrir {
    display: block;
    flex-shrink: 0; margin-left: auto; padding-left: .5rem;
    font-size: .75rem; font-weight: 600; color: var(--ea-navy-700);
    white-space: nowrap;
  }
}

/* Cabecera de grupo del catálogo. */
.ea-grupo {
  position: sticky; top: 0; z-index: 5;
  background: var(--ea-navy-050); border-bottom: 1px solid var(--ea-borde);
}

/* ---------------------------------------------------------------------------
   Lo que viajó por WhatsApp que no es texto (2026-08-18).
   Antes no se guardaba nada: el hilo decía "[audio]" en una burbuja y los
   documentos que mandaba el bot no aparecían. Todo esto reusa .ea-doc y los
   tokens de arriba; no entra ningún color nuevo.
   --------------------------------------------------------------------------- */

/* La nota de voz. Misma tarjeta que un documento, pero en columna para que el
   reproductor ocupe el ancho y la transcripción quede debajo. */
.ea-audio {
  background: #fff;
  border: 1px solid var(--ea-borde);
  border-radius: var(--ea-r-grande);
  padding: .75rem .875rem;
  box-shadow: var(--ea-sombra-1);
  max-width: 100%;
}
.ea-audio audio {
  display: block; width: 100%; min-width: 15rem;
  /* El control nativo trae su propio fondo gris claro; el navy lo tiñe para que
     no se lea como un elemento pegado de otra página. */
  filter: saturate(.85);
}
.ea-audio-rotulo {
  display: flex; align-items: center; gap: .5rem;
  font-size: .75rem; color: var(--ea-tenue);
  margin-bottom: .5rem;
}

/* Placa de identidad, hermana chica de .ea-doc-icono. Va acá y no un emoji: el
   tablero identifica cada archivo con una placa de color y su tipo en letras, y
   un 🎙 suelto sería el único emoji de toda la pantalla. */
.ea-audio-icono {
  flex-shrink: 0;
  width: 1.75rem; height: 1.75rem;
  border-radius: var(--ea-r-chico);
  display: flex; align-items: center; justify-content: center;
  background: var(--ea-navy-700); color: #fff;
  font-size: .5rem; font-weight: 700; letter-spacing: .06em;
}

/* La transcripción. Va en el color de texto normal, NO en gris tenue: es
   contenido que se lee, no metadato. La barra a la izquierda dice "esto lo
   dijo la máquina, no lo escribió la agencia". */
.ea-transcripcion {
  margin-top: .625rem;
  padding: .5rem 0 .125rem .75rem;
  border-left: 2px solid var(--ea-navy-200);
  font-size: .8125rem; line-height: 1.7;
  color: var(--ea-texto);
}
.ea-transcripcion-rotulo {
  display: block;
  font-size: .6875rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ea-tenue);
  margin-bottom: .25rem;
}

/* La foto que mandó el cliente. SIN el overlay de gradiente ni el
   mix-blend-multiply que llevan las imágenes decorativas: acá la foto es
   evidencia —el comprobante de un depósito, la captura de un itinerario— y
   teñirla es alterar lo que hay que leer. El tratamiento se queda en el marco. */
.ea-foto {
  display: block;
  max-width: min(20rem, 100%); max-height: 22rem;
  width: auto; height: auto;
  border-radius: var(--ea-r-grande);
  border: 1px solid var(--ea-borde);
  box-shadow: var(--ea-sombra-1);
  /* Respaldo un tono más oscuro que la página: un PNG con transparencia
     —una captura recortada, un comprobante con fondo blanco— desaparecía
     contra el fondo y parecía una tarjeta vacía. */
  background: var(--ea-navy-100);
  transition: transform .16s cubic-bezier(.2, .8, .3, 1),
              box-shadow .16s ease;
}
a:hover > .ea-foto { transform: translateY(-1px); box-shadow: var(--ea-sombra-2); }
a:active > .ea-foto { transform: translateY(0); box-shadow: var(--ea-sombra-1); }
a:focus-visible > .ea-foto {
  outline: 2px solid var(--ea-navy-700); outline-offset: 2px;
}

/* Un archivo que todavía se está bajando, o que no se pudo recuperar. Se DICE,
   no se esconde: un audio que Meta ya borró y uno que sigue bajando se ven
   igual desde afuera y no son lo mismo para quien revisa. */
.ea-archivo-nota {
  display: flex; align-items: center; gap: .5rem;
  border-radius: var(--ea-r-grande);
  padding: .625rem .875rem;
  font-size: .8125rem;
  background: var(--ea-navy-050);
  border: 1px dashed var(--ea-borde);
  color: var(--ea-tenue);
}
.ea-archivo-nota-fallo {
  background: var(--ea-alerta-bg);
  border-color: var(--ea-alerta);
  border-style: solid;
  color: var(--ea-alerta);
}

/* Estado de entrega bajo la burbuja del bot. Diminuto a propósito: solo se
   mira cuando algo falló. */
.ea-entrega {
  display: flex; align-items: center; gap: .3125rem;
  margin-top: .1875rem; padding: 0 .25rem;
  font-size: .6875rem; color: var(--ea-tenue);
  line-height: 1.4;
}
.ea-entrega-marca { font-weight: 700; letter-spacing: -.08em; }
.ea-entrega-leido .ea-entrega-marca { color: var(--ea-dato-azul); }
.ea-entrega-fallo {
  color: var(--ea-alerta); font-weight: 600; letter-spacing: 0;
}

/* ---------------------------------------------------------------------------
   Conversar desde la pantalla (2026-08-31).

   Solo el canal de los anuncios: ahí Melina contesta ella, por el mismo número
   con el que el cliente ya venía hablando con Lorena. Ningún color nuevo — todo
   sale de los tokens de arriba.
   --------------------------------------------------------------------------- */

/* Lo que escribió una PERSONA, no el bot. Va del mismo lado que las burbujas
   del bot (a la derecha, porque para el cliente salió del mismo número) pero
   tiene que distinguirse de un vistazo: la del bot es navy sólido, esta es
   clara con un filo navy. Sin esa diferencia, auditar después quién prometió
   qué es imposible. */
.ea-burbuja-humana {
  background: #fff;
  color: var(--ea-texto);
  border: 1px solid var(--ea-navy-200);
  border-right: 3px solid var(--ea-navy-700);
  box-shadow: var(--ea-sombra-1);
}

/* El nombre de quien escribió, arriba de su burbuja. */
.ea-firma {
  text-align: right;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ea-tenue);
  margin-bottom: .25rem;
}

.ea-compositor {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ea-borde);
}

/* La franja de estado: quién contesta ahora mismo y cuánto queda de la ventana
   de Meta. Es lo primero que hay que saber antes de escribir una palabra. */
.ea-traspaso {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  justify-content: space-between;
  background: var(--ea-navy-050);
  border: 1px solid var(--ea-borde);
  border-radius: 14px;
  padding: .5rem .75rem;
  margin-bottom: .75rem;
  font-size: .8125rem;
}
.ea-traspaso-quien { display: flex; align-items: center; gap: .5rem; }
.ea-traspaso-acciones { display: flex; align-items: center; gap: .75rem; }

/* La cuenta regresiva. Tabular para que no baile al descontar los minutos. */
.ea-ventana {
  font-size: .75rem;
  color: var(--ea-tenue);
  font-variant-numeric: tabular-nums;
}
.ea-ventana-poca { color: var(--ea-aviso); font-weight: 600; }
.ea-ventana-cerrada { color: var(--ea-alerta); font-weight: 600; }

.ea-escribir { display: flex; flex-direction: column; gap: .625rem; }
.ea-texto {
  width: 100%;
  resize: none;
  line-height: 1.5;
  max-height: 12rem;
}
.ea-escribir-pie {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap;
}
.ea-escribir-herramientas { display: flex; align-items: center; gap: .5rem; }

/* Adjuntar y grabar son hermanos de .ea-boton-suave, más chicos: son acciones
   de apoyo y no pueden pesar lo mismo que Enviar. */
.ea-herramienta {
  display: inline-flex; align-items: center; gap: .4375rem;
  font-size: .8125rem;
  padding: .375rem .75rem;
  cursor: pointer;
}
.ea-herramienta:focus-within { outline: 2px solid var(--ea-navy-700); outline-offset: 2px; }

/* El punto de grabar. Late solo mientras se graba, y solo con transform y
   opacity — nunca color ni tamaño de caja. */
.ea-grabar-punto {
  width: .5rem; height: .5rem; border-radius: 999px;
  background: var(--ea-alerta);
  opacity: .35;
}
.ea-grabando .ea-grabar-punto {
  opacity: 1;
  animation: ea-latido 1.1s cubic-bezier(.4, 0, .2, 1) infinite;
}
.ea-grabando { border-color: var(--ea-alerta); color: var(--ea-alerta); }
@keyframes ea-latido {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.5); opacity: .5; }
}
@media (prefers-reduced-motion: reduce) {
  .ea-grabando .ea-grabar-punto { animation: none; }
}

/* Lo adjuntado se ve ANTES de mandarlo: un archivo que se manda sin poder
   mirarlo primero es un archivo que un día sale equivocado. */
.ea-adjunto {
  display: flex; align-items: center; gap: .5rem;
  align-self: flex-start;
  max-width: 100%;
  background: var(--ea-navy-050);
  border: 1px solid var(--ea-borde);
  border-radius: 999px;
  padding: .3125rem .3125rem .3125rem .75rem;
  font-size: .8125rem;
}
.ea-adjunto-nombre {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 20rem;
}
.ea-quitar {
  flex-shrink: 0;
  width: 1.375rem; height: 1.375rem;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ea-navy-200); color: var(--ea-navy-700);
  font-size: .6875rem; line-height: 1;
  transition: opacity .12s ease, transform .12s ease;
}
.ea-quitar:hover  { opacity: .8; transform: scale(1.08); }
.ea-quitar:active { transform: scale(1); }
.ea-quitar:focus-visible { outline: 2px solid var(--ea-navy-700); outline-offset: 2px; }

/* Por qué no salió. Se lee en la pantalla y no en un alert: «la ventana se
   cerró» no se arregla reintentando, y hay que poder leerlo mientras se decide
   qué hacer. */
.ea-error {
  font-size: .8125rem;
  color: var(--ea-alerta);
  background: var(--ea-alerta-bg);
  border-radius: var(--ea-r-medio);
  padding: .5rem .75rem;
}

/* Para etiquetas que solo leen los lectores de pantalla. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* `.ea-boton` no trae relleno propio —en el resto del tablero se lo ponen las
   utilidades de Tailwind en cada uso— así que acá hay que dárselo: sin esto el
   navy queda pegado a las letras y "Enviar" se lee cortado. Y no se encoge:
   en una fila flex con dos herramientas al lado, flex lo apretaba. */
.ea-escribir-pie .ea-boton {
  flex-shrink: 0;
  white-space: nowrap;
  padding: .5rem 1.25rem;
  font-size: .875rem;
  font-weight: 500;
}

/* Con la ventana cerrada todo el compositor queda apagado, y tiene que
   NOTARSE. Un botón que se ve activo y no hace nada es peor que uno gris: se
   aprieta tres veces antes de leer por qué. */
.ea-escribir :disabled { opacity: .5; cursor: not-allowed; }
.ea-compositor-cerrado .ea-herramienta {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;   /* el `label` no hereda el `disabled` de su input */
}
.ea-compositor-cerrado .ea-texto { background: var(--ea-navy-050); }

/* ═══════════════════════════════════════════════════════════════════════
   MOVIMIENTO (2026-09-10)

   Hasta hoy el tablero no se movía: la pantalla aparecía de golpe, cambiar de
   sección era un parpadeo blanco, y un mensaje nuevo del hilo se materializaba
   sin avisar. Todo lo de acá abajo sigue la misma regla que ya tenía el resto
   del archivo —solo `transform` y `opacity`, nunca `transition-all`— y se
   apaga entero con `prefers-reduced-motion`.

   La idea es la de iOS: el movimiento no decora, EXPLICA. Dice de dónde vino
   una pantalla, qué acaba de cambiar y qué respondió al dedo.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Entre pantallas ─────────────────────────────────────────────────
   Navegar de la lista al hilo deja de ser un salto: el navegador funde la
   pantalla vieja con la nueva. Son dos líneas y no necesita ni una de
   JavaScript porque las páginas las sirve el servidor enteras.

   La cabecera se queda QUIETA —tiene su propio nombre de transición, así que
   el navegador la trata como el mismo objeto en las dos pantallas— y el
   segmento activo VIAJA hasta su nueva posición. Cada grupo de segmentos
   lleva su propio nombre: sin eso, ir de Catálogo a Conversaciones hacía
   volar la píldora de un lado a otro de la pantalla.

   En un navegador que no lo soporte (Firefox, hoy) no pasa nada: navega como
   siempre. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: .18s; }
::view-transition-new(root) { animation-duration: .26s; }

header { view-transition-name: ea-barra; }
.ea-seg-conv.ea-seg-activo  { view-transition-name: ea-seg-conv; }
.ea-seg-vista.ea-seg-activo { view-transition-name: ea-seg-vista; }
.ea-seg-cat.ea-seg-activo   { view-transition-name: ea-seg-cat; }

/* La franja del modo demo también se queda quieta: si parpadea en cada
   navegación, el ojo la lee como un aviso nuevo cada vez. */
.ea-demo { view-transition-name: ea-demo; }

/* ── 2. La pantalla se asienta ──────────────────────────────────────────
   Los bloques de `main` entran escalonados. 42 ms entre uno y otro: lo
   suficiente para que se lea como una secuencia y no tanto como para tener
   que esperarla. Va con `both` para que arranquen ya invisibles y no haya un
   parpadeo antes del primer cuadro. */
@keyframes ea-asentar { from { opacity: 0; transform: translateY(9px); } }

@media (prefers-reduced-motion: no-preference) {
  main > * { animation: ea-asentar .44s var(--ea-suave) both; }
  main > *:nth-child(1) { animation-delay:   0ms; }
  main > *:nth-child(2) { animation-delay:  42ms; }
  main > *:nth-child(3) { animation-delay:  84ms; }
  main > *:nth-child(4) { animation-delay: 126ms; }
  main > *:nth-child(5) { animation-delay: 168ms; }
  main > *:nth-child(6) { animation-delay: 210ms; }
  main > *:nth-child(7) { animation-delay: 252ms; }
  main > *:nth-child(n+8) { animation-delay: 294ms; }
}

/* ── 3. Las gráficas se dibujan ─────────────────────────────────────────
   La sparkline se traza de izquierda a derecha y su punto final aparece
   después; las barras crecen desde la línea base, una tras otra. El
   `pathLength="1"` se lo pone `graficas.py` para que el trazo dure lo mismo
   sin importar cuántos días tenga la serie. */
@keyframes ea-trazo  { to { stroke-dashoffset: 0; } }
@keyframes ea-surgir { from { opacity: 0; transform: scale(.4); } }
@keyframes ea-crecer { from { transform: scaleY(0); } }

@media (prefers-reduced-motion: no-preference) {
  .ea-tarjeta polyline {
    stroke-dasharray: 1; stroke-dashoffset: 1;
    animation: ea-trazo .85s var(--ea-suave) .3s forwards;
  }
  .ea-tarjeta circle {
    transform-box: fill-box; transform-origin: center;
    animation: ea-surgir .3s var(--ea-resorte) 1.05s both;
  }
  /* El primer `rect` de cada grupo es el blanco de toque transparente; que
     también crezca no se ve y evita tener que distinguirlos. */
  .ea-barra rect {
    transform-box: fill-box; transform-origin: bottom;
    animation: ea-crecer .5s var(--ea-suave) both;
  }
  .ea-barra:nth-child(2)  rect { animation-delay:  60ms; }
  .ea-barra:nth-child(3)  rect { animation-delay:  85ms; }
  .ea-barra:nth-child(4)  rect { animation-delay: 110ms; }
  .ea-barra:nth-child(5)  rect { animation-delay: 135ms; }
  .ea-barra:nth-child(6)  rect { animation-delay: 160ms; }
  .ea-barra:nth-child(7)  rect { animation-delay: 185ms; }
  .ea-barra:nth-child(8)  rect { animation-delay: 210ms; }
  .ea-barra:nth-child(9)  rect { animation-delay: 235ms; }
  .ea-barra:nth-child(10) rect { animation-delay: 260ms; }
  .ea-barra:nth-child(11) rect { animation-delay: 285ms; }
  .ea-barra:nth-child(12) rect { animation-delay: 310ms; }
  .ea-barra:nth-child(13) rect { animation-delay: 335ms; }
  .ea-barra:nth-child(14) rect { animation-delay: 360ms; }
  .ea-barra:nth-child(n+15) rect { animation-delay: 385ms; }

  /* Las barritas de «Qué le preguntan» y «Agencias más activas» se llenan
     desde la izquierda. Se marcan con la clase para no barrer con toda barra
     de progreso que aparezca después. */
  .ea-medida { transform-origin: left; animation: ea-llenar .7s var(--ea-suave) .25s both; }
}
@keyframes ea-llenar { from { transform: scaleX(0); } }

/* ── 4. Lo que responde al dedo ─────────────────────────────────────────
   Una fila que lleva a algún lado tiene que decirlo antes de tocarla y
   acusar recibo al tocarla. Hasta hoy solo el nombre era enlace y la fila no
   reaccionaba a nada. */
.ea-fila {
  transition: background-color .16s var(--ea-suave);
}
.ea-fila[data-abrir] { cursor: pointer; }
.ea-fila[data-abrir]:active { background: var(--ea-navy-100); }
.ea-fila[data-abrir]:focus-visible {
  outline: 2px solid var(--ea-navy-700); outline-offset: -2px;
}

/* El renglón de navegación activo se subraya. Va en `::after` absoluto para
   no ocupar ancho: la barra de teléfono ya vive al límite y un relleno más
   la parte en otra fila. */
.ea-nav-enlace { position: relative; }
.ea-nav-activo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px;
  height: 2px; border-radius: 2px; background: #fff;
}

/* ── 5. El hilo ─────────────────────────────────────────────────────────
   Un mensaje que entra por el refresco automático sube desde abajo. Es la
   única forma de notar que llegó algo mientras se está mirando otra cosa de
   la pantalla. */
.ea-burbuja { border-radius: var(--ea-r-burbuja); }
.ea-burbuja-in  { border-bottom-left-radius:  6px; }
.ea-burbuja-out { border-bottom-right-radius: 6px; }

@keyframes ea-msg-entra { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: no-preference) {
  .ea-msg-nuevo { animation: ea-msg-entra .36s var(--ea-resorte) both; }
}

/* La marca de entrega cambia sola —de enviado a entregado a leído— y el
   cambio tiene que verse, porque es lo único que dice si el mensaje llegó. */
@keyframes ea-latir-marca { 50% { opacity: .25; } }
@media (prefers-reduced-motion: no-preference) {
  .ea-entrega-cambio { animation: ea-latir-marca .5s var(--ea-suave); }
}

/* ── 6. Lo que aparece y lo que se va ───────────────────────────────────
   El archivo adjunto y el aviso de error entran con su propio movimiento en
   vez de materializarse. Los dos se muestran quitando `hidden`, así que la
   animación va sobre `:not([hidden])`. */
@keyframes ea-aparece { from { opacity: 0; transform: translateY(-5px) scale(.97); } }
@media (prefers-reduced-motion: no-preference) {
  .ea-adjunto:not([hidden]),
  .ea-error:not([hidden]) { animation: ea-aparece .28s var(--ea-resorte) both; }
}

/* Un botón que ya está trabajando no se puede volver a apretar, y tiene que
   notarse. Lo pone el JavaScript al mandar cualquier formulario. */
.ea-boton[aria-busy="true"],
.ea-boton-suave[aria-busy="true"] { opacity: .62; pointer-events: none; }

/* Y el selector de vendedor del padrón, que se guarda solo al cambiarlo: sin
   esto la página recargaba sin decir que algo había pasado. */
.ea-campo[aria-busy="true"] { opacity: .62; pointer-events: none; }