/* Panel de Lidia — dirección «CALMA LUJOSA» (variante 4 de las cuatro de 19-oct-2026, aplicada el 27-oct a todas las pantallas).
   Una sala de espera de hotel: neutros tibios, vidrio esmerilado, tarjetas que flotan con esquinas muy redondas y sombras largas y
   suaves, un acento de ciruela para lo que espera a una persona y detalles en champán. Una sola familia (Plus Jakarta Sans) de punta a
   punta: cifras y nombres en peso fino (200-300), rótulos en versalitas de peso 700-800 con aire. Nada grita; lo que espera se ve
   porque es la única cosa llena de color. Bot en salvia, persona del equipo en grafito, lo que el revisor frenó en miel rayada.
   Todo color, medida y tipografía sale de las variables de :root; el modo oscuro redefine sólo ese bloque (y el de los colores de
   sombra). Tipografía propia, sin pedir nada a terceros: carpeta fuentes, licencia SIL OFL (ver LICENCIAS.txt).
   Orden de la hoja: variables · ESTRUCTURA (qué se ve, dónde y cuándo) · PIEL (todo lo visual de la bandeja y las páginas chicas) ·
   las pantallas de lectura y de trabajo (Leads, Alertas, Simulador, Agente, Casos, Clientes y Usuarios; cada una con su estructura y
   su piel juntas) · tableta y celular · movimiento · ESTRUCTURA (cola: lo responsivo va AL FINAL para ganarle a toda la piel). */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/estaticos/fuentes/plus-jakarta-sans.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/estaticos/fuentes/plus-jakarta-sans-cursiva.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: light;
  /* neutros tibios */
  --papel: #e9e6e2;
  --papel-alto: #fbfaf8;
  --papel-hondo: #efece8;
  --tinta: #2a2826;
  --tinta-suave: #57534d;
  --tinta-tenue: #655f58;
  --linea: #e2ded8;
  --linea-fuerte: #9b958b;

  /* señal: lo que espera a una persona (ciruela) */
  --senal: #8a2a5b;
  --senal-texto: #7d2253;
  --senal-suave: #f4e3ea;
  --senal-sobre: #fff7fa;

  /* el bot (salvia) */
  --bot: #2f6a4c;
  --bot-suave: #e0eadf;
  --bot-linea: #bcd0bd;
  --bot-sobre: #f3fbf5;

  /* lo que el revisor frenó (miel) */
  --aviso: #6f5210;
  --aviso-suave: #f1e2bc;

  /* errores */
  --error: #9b2226;
  --error-fondo: #f6e0db;

  /* la barra de cristal y el foco */
  --barra-fondo: rgba(251, 250, 248, 0.74);
  --barra-texto: #2a2826;
  --barra-foco: #2a2826;
  --foco: #2a2826;

  /* champán, vidrio y sombras */
  --oro: #b8975a;
  --vidrio: rgba(251, 250, 248, 0.8);
  --vidrio-borde: rgba(255, 255, 255, 0.85);
  --suave: rgba(255, 255, 255, 0.62);
  --marco-aparato: color-mix(in srgb, var(--tinta) 92%, transparent);
  --sombra-borde: color-mix(in srgb, var(--tinta) 30%, transparent);
  --sombra-tarjeta: 0 1px 2px rgba(70, 50, 40, 0.06), 0 18px 40px -18px rgba(70, 50, 40, 0.3);
  --sombra-flota: 0 2px 4px rgba(70, 50, 40, 0.06), 0 22px 44px -16px rgba(70, 50, 40, 0.35);
  --sombra-boton: 0 6px 16px -8px rgba(40, 30, 25, 0.55);
  --sombra-boton-alta: 0 10px 22px -8px rgba(40, 30, 25, 0.5);
  --sombra-discreto: 0 8px 18px -10px rgba(40, 30, 25, 0.4);
  --sombra-campo: inset 0 1px 2px rgba(70, 50, 40, 0.06);
  --sombra-fila: 0 10px 22px -12px rgba(70, 50, 40, 0.4);
  --sombra-burbuja: 0 8px 20px -14px rgba(70, 50, 40, 0.5);
  --sombra-persona: 0 12px 24px -14px rgba(40, 30, 25, 0.7);
  --sombra-seccion: 0 2px 10px -6px rgba(70, 50, 40, 0.2);
  --sombra-precio: 0 6px 16px -12px rgba(70, 50, 40, 0.4);
  --sombra-aparato: 0 40px 60px -28px rgba(40, 30, 25, 0.6);
  --aurora:
    radial-gradient(52rem 38rem at 92% -8%, rgba(214, 160, 186, 0.42), transparent 62%),
    radial-gradient(46rem 38rem at -8% 108%, rgba(160, 196, 172, 0.46), transparent 62%),
    radial-gradient(34rem 26rem at 52% 42%, rgba(255, 255, 255, 0.55), transparent 70%);

  --fuente-titulo: "Plus Jakarta Sans", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --fuente-texto: "Plus Jakarta Sans", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --fuente-mono: "Plus Jakarta Sans", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;   /* rótulos y horas: la misma familia */
  --fuente-codigo: ui-monospace, "Cascadia Mono", Consolas, monospace;                                 /* sólo lo que de verdad es código: YAML, marcas y claves */

  /* escala tipográfica: cifras de peso fino contra rótulos diminutos */
  --t-rotulo: 0.6875rem;
  --t-chico: 0.8125rem;
  --t-texto: 0.9375rem;
  --t-medio: 1.1875rem;
  --t-subtitulo: 1.75rem;
  --t-titulo: 2.5rem;
  --t-ficha: 2.75rem;
  --t-portada: clamp(2.75rem, 7vw, 5rem);
  --t-gigante: clamp(5rem, 16vw, 11rem);

  --espacio-0: 0.25rem;
  --espacio-1: 0.5rem;
  --espacio-2: 1rem;
  --espacio-3: 1.5rem;
  --espacio-4: 3rem;
  --radio: 12px;
  --radio-aviso: 14px;
  --radio-chico: 16px;
  --radio-fila: 18px;
  --radio-seccion: 20px;
  --radio-burbuja: 20px;
  --radio-compositor: 24px;
  --radio-panel: 26px;
  --radio-formulario: 30px;
  --radio-barra: 2.25rem;
  --ancho-formulario: 25rem;
  --ancho-lista: 20.5rem;
  --ancho-ficha: 22rem;
  --alto-control: 2.75rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --papel: #1b1917;
    --papel-alto: #262421;
    --papel-hondo: #1f1d1b;
    --tinta: #efe9df;
    --tinta-suave: #bdb6aa;
    --tinta-tenue: #b4ada1;
    --linea: #34312d;
    --linea-fuerte: #6f6a62;
    --senal: #e39ac0;
    --senal-texto: #efb2d0;
    --senal-suave: #3b2230;
    --senal-sobre: #2a0d1d;
    --bot: #9bd3b4;
    --bot-suave: #1f3329;
    --bot-linea: #355a47;
    --bot-sobre: #0e2417;
    --aviso: #e8c277;
    --aviso-suave: #3a2f14;
    --error: #ff9d92;
    --error-fondo: #3b201d;
    --barra-fondo: rgba(38, 36, 33, 0.74);
    --barra-texto: #efe9df;
    --barra-foco: #efe9df;
    --foco: #efe9df;
    --oro: #c9a96b;
    --vidrio: rgba(38, 36, 33, 0.82);
    --vidrio-borde: rgba(255, 255, 255, 0.08);
    --suave: rgba(255, 255, 255, 0.045);
    --marco-aparato: var(--linea-fuerte);
    --sombra-tarjeta: 0 1px 2px rgba(0, 0, 0, 0.3), 0 18px 40px -18px rgba(0, 0, 0, 0.7);
    --sombra-flota: 0 2px 4px rgba(0, 0, 0, 0.3), 0 22px 44px -16px rgba(0, 0, 0, 0.8);
    --sombra-boton: 0 6px 16px -8px rgba(0, 0, 0, 0.6);
    --sombra-boton-alta: 0 10px 22px -8px rgba(0, 0, 0, 0.65);
    --sombra-discreto: 0 8px 18px -10px rgba(0, 0, 0, 0.6);
    --sombra-campo: inset 0 1px 2px rgba(0, 0, 0, 0.25);
    --sombra-fila: 0 10px 22px -12px rgba(0, 0, 0, 0.6);
    --sombra-burbuja: 0 8px 20px -14px rgba(0, 0, 0, 0.6);
    --sombra-persona: 0 12px 24px -14px rgba(0, 0, 0, 0.7);
    --sombra-seccion: 0 2px 10px -6px rgba(0, 0, 0, 0.4);
    --sombra-precio: 0 6px 16px -12px rgba(0, 0, 0, 0.6);
    --sombra-aparato: 0 40px 60px -28px rgba(0, 0, 0, 0.8);
    --aurora:
      radial-gradient(52rem 38rem at 92% -8%, rgba(190, 110, 150, 0.2), transparent 62%),
      radial-gradient(46rem 38rem at -8% 108%, rgba(90, 150, 120, 0.2), transparent 62%);
  }
}

/* ==========================================================================
   ESTRUCTURA — qué se muestra, dónde y cuándo. Sin colores, sin tipografías ni bordes: eso es la piel de abajo. Los tamaños salen de las
   variables de :root. Es lo que hace que lista, chat y ficha se comporten igual en todo ancho (tres columnas, cajón en tableta, una
   columna a la vez en el celular).
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; line-height: 1.5; scrollbar-width: thin; }
h1, h2, h3 { margin: 0; line-height: 1.1; }
p { margin: 0; }

.solo-lector { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.salto { position: absolute; left: var(--espacio-1); top: -4rem; z-index: 100; padding: var(--espacio-1) var(--espacio-2); }
.salto:focus { top: var(--espacio-1); }

/* botones, campos y avisos */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: var(--espacio-1); min-height: var(--alto-control); padding: 0.5rem var(--espacio-2); font: inherit; line-height: 1.2; text-decoration: none; cursor: pointer; }
.boton:disabled { cursor: not-allowed; }
.boton--discreto, .boton--claro { min-height: 2.25rem; padding: 0.25rem var(--espacio-2); }
.campo { display: grid; gap: var(--espacio-0); min-width: 0; }
.campo__entrada { font: inherit; width: 100%; min-width: 0; min-height: 2.5rem; padding: 0.5rem 0.625rem; }
textarea.campo__entrada { resize: vertical; }
select.campo__entrada { appearance: auto; }
.aviso { margin: 0; padding: var(--espacio-1) var(--espacio-2); }
.aviso p + p { margin-top: var(--espacio-0); }
.avisos { position: fixed; top: 4.5rem; right: var(--espacio-2); z-index: 60; display: grid; gap: var(--espacio-1); width: min(28rem, calc(100vw - 2rem)); pointer-events: none; }
.avisos > * { pointer-events: auto; }
.aviso--flotante { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--espacio-2); }
.aviso__cerrar { flex: none; font: inherit; cursor: pointer; }
.sello { display: inline-block; white-space: nowrap; }
.quien { display: inline-flex; align-items: center; gap: 0.375rem; }
.quien__punto { flex: none; }

/* barra de arriba */
.barra { position: relative; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; }
.barra form { margin: 0; }
.barra__marca { display: inline-flex; align-items: baseline; text-decoration: none; }
.barra__cliente { display: flex; align-items: center; min-width: 0; }
.barra__cliente--fijo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra__selector { max-width: 100%; }
.barra__nav { display: flex; flex-wrap: wrap; }
.barra__enlace { text-decoration: none; }
.barra__grupo { display: inline-flex; align-items: center; }
.barra__pend { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.barra__pend[hidden] { display: none; }
.barra__usuario { display: flex; align-items: center; min-width: 0; }
.barra__correo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14rem; }
.derivados { display: flex; flex-wrap: wrap; align-items: center; min-width: 0; margin-left: auto; }
.derivados__cifra { display: inline-flex; align-items: baseline; text-decoration: none; }
.derivados__detalle { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.derivados__ir { display: inline-flex; align-items: baseline; font: inherit; cursor: pointer; }

/* la bandeja: tres columnas */
body.pagina-bandeja { height: 100vh; height: 100dvh; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.bandeja { position: relative; z-index: 1; flex: 1; min-height: 0; display: grid; grid-template-columns: var(--ancho-lista) minmax(0, 1fr) var(--ancho-ficha); overflow: hidden; }
.panel { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.panel--ficha { display: block; overflow-y: auto; }
.centinela { display: none; }

/* la lista */
.filtros { flex: none; display: grid; }
.filtros__estados { display: flex; margin: 0; padding: 0; border: 0; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.filtros__estados::-webkit-scrollbar { display: none; }
.filtro { position: relative; flex: none; }
.filtro__radio { position: absolute; opacity: 0; pointer-events: none; }
.filtro__rotulo { display: inline-block; cursor: pointer; white-space: nowrap; }
.lista { flex: 1; min-height: 0; overflow-y: auto; }
.filas { list-style: none; margin: 0; padding: 0; }
.fila__enlace { display: grid; color: inherit; text-decoration: none; }
.fila__arriba { display: flex; align-items: baseline; justify-content: space-between; gap: var(--espacio-1); min-width: 0; }
.fila__nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila__hora { flex: none; }
.fila__texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila__marcas { display: flex; flex-wrap: wrap; align-items: center; min-width: 0; }
.fila__estado { margin-left: auto; }

/* el panel del medio cuando no hay ninguna abierta */
.vacio { margin: auto; max-width: 28rem; text-align: center; }

/* el chat */
.chat { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat__cabecera { flex: none; }
.chat__fila { display: flex; align-items: center; min-width: 0; }
.chat__fila--acciones { justify-content: space-between; flex-wrap: wrap; }
.chat__persona { flex: 1; min-width: 0; }
.chat__nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat__sub { display: flex; flex-wrap: wrap; }
.chat__volver, .chat__ficha { flex: none; }
.chat__espera { display: flex; flex-wrap: wrap; }
.mensajes { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; }
.mensajes > * { flex: none; }
.mensajes:empty::before { content: "Todavía no hay mensajes en esta conversación."; margin: auto; }
.dia { display: flex; align-items: center; }
.dia::before, .dia::after { content: ""; flex: 1; }
.burbuja { position: relative; transition: opacity 0.25s ease-out, transform 0.25s ease-out; }
.burbuja.htmx-added { opacity: 0; transform: translateY(0.5rem); }
.burbuja.lead { align-self: flex-start; }
.burbuja.bot, .burbuja.persona { align-self: flex-end; }
.burbuja__texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.burbuja__freno { display: flex; flex-wrap: wrap; align-items: center; }
.burbuja__hora { display: block; text-align: right; }
/* el pie de la burbuja: la entrega (sólo lo que Lidia mandó) y la hora, juntas y pegadas a la derecha */
.burbuja__pie { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; }
.entrega { white-space: nowrap; }
/* lo que llegó de WhatsApp: la nota de voz con su reproductor, la foto en miniatura y lo que el lead hizo con un mensaje */
.burbuja__audio { display: block; width: 18rem; max-width: 100%; height: 2.5rem; }
.burbuja__foto { display: block; width: fit-content; max-width: 100%; }
.burbuja__foto img { display: block; width: 16rem; max-width: 100%; height: 12rem; object-fit: cover; }   /* caja fija: la foto carga tarde (lazy) y así no corre lo de abajo ni despega al chat del último mensaje */
.burbuja__eventos:empty { display: none; }
.chat__error { flex: none; }
.compositor { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.compositor__texto { field-sizing: content; width: 100%; min-height: var(--alto-control); max-height: 9rem; font: inherit; resize: none; }
.compositor__nota { flex: none; }

/* la ficha */
.ficha__cabeza { display: flex; align-items: center; }
.ficha__volver { flex: none; }
.ficha__seccion { display: grid; }
.ficha__form { display: grid; }
.ficha__datos { display: grid; margin: 0; }
.ficha__dato { display: grid; grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); align-items: center; gap: var(--espacio-1); }
.ficha__dato dt, .ficha__dato dd { margin: 0; min-width: 0; }
.ficha__dato dt { display: grid; gap: 0.125rem; justify-items: start; }
.ficha__fijo { overflow-wrap: anywhere; }
.origen { display: inline-block; }
.ficha__lista { display: grid; margin: 0; padding: 0; list-style: none; }
.ficha__precio { display: grid; }
.ficha__precio-item { overflow-wrap: anywhere; }
.ficha__anular { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.ficha__atencion { overflow-wrap: anywhere; }
.ficha__nota-texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.ficha__par { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--espacio-1); }

/* el teléfono de prueba */
body.pagina-telefono { display: flex; flex-direction: column; }
.telefono { position: relative; z-index: 1; flex: 1; width: 100%; max-width: 70rem; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); grid-template-rows: auto 1fr; grid-template-areas: "cabeza aparato" "linea aparato"; align-content: start; }
.telefono > * { min-width: 0; }
.telefono__cabeza { grid-area: cabeza; }
.aparato { grid-area: aparato; justify-self: center; width: 100%; max-width: 25rem; height: clamp(30rem, calc(100dvh - 9rem), 46rem); display: flex; flex-direction: column; overflow: hidden; }
.aparato__altavoz { flex: none; }
.aparato__cabecera { flex: none; display: flex; align-items: center; }
.aparato__avatar { flex: none; display: grid; place-items: center; }
.aparato__persona { flex: 1; min-width: 0; }
.aparato__nombre, .aparato__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aparato__cambiar { flex: none; }
.aparato__hilo:empty::before { content: "Todavía no escribiste nada. Escribe el primer mensaje abajo."; max-width: 16rem; text-align: center; }
.globo { max-width: 82%; }
.globo--recibido { align-self: flex-start; }
.globo--enviado { align-self: flex-end; }
.globo__texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.globo__hora { display: block; text-align: right; }
.linea { grid-area: linea; align-self: start; display: grid; width: 100%; max-width: 28rem; }
.linea__bandeja { justify-self: start; }
.linea__notas { display: grid; margin: 0; }
.linea__par { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--espacio-1); }

/* elegir cliente */
.elegir { position: relative; z-index: 1; flex: 1; min-height: 0; overflow-y: auto; width: 100%; max-width: 46rem; margin: 0 auto; }
.elegir__lista { display: grid; margin: 0; padding: 0; list-style: none; }
.elegir__cliente form { margin: 0; }
.elegir__boton { display: flex; align-items: center; width: 100%; font: inherit; text-align: left; cursor: pointer; }
.elegir__nombre { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* una página de error */
body.pagina-error, body.pagina-entrar { display: flex; flex-direction: column; }
.error { position: relative; z-index: 1; flex: 1; display: grid; grid-template-columns: 1fr; align-content: center; width: 100%; max-width: 56rem; margin: 0 auto; }

/* entrar */
.entrada { position: relative; z-index: 1; min-height: 100vh; display: grid; grid-template-columns: 1fr; align-content: center; }
.entrada__nombre, .entrada__lema { margin: 0; }
.entrada__formulario { display: grid; width: 100%; max-width: var(--ancho-formulario); }


/* ================================ PIEL ================================ */

body {
  background-color: var(--papel);
  background-image: var(--aurora);
  background-attachment: fixed;
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-size: var(--t-texto);
  line-height: 1.55;
  word-spacing: 0.05em;
  scrollbar-color: var(--linea-fuerte) transparent;
}
h1, h2, h3 { font-family: var(--fuente-titulo); letter-spacing: -0.025em; }
code { font-family: var(--fuente-codigo); font-size: 0.88em; }
::selection { background: var(--senal); color: var(--senal-sobre); }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; border-radius: 6px; }
.salto { background: var(--tinta); color: var(--papel-alto); border-radius: 999px; }

.etiqueta { font-family: var(--fuente-mono); font-size: var(--t-rotulo); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-suave); }

/* ---------- botones, campos y avisos ---------- */
.boton {
  padding: 0.5rem 1.375rem;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  border: 1px solid var(--tinta);
  border-radius: 999px;
  background-color: var(--tinta);
  color: var(--papel-alto);
  box-shadow: var(--sombra-boton);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.boton:hover { transform: translateY(-1px); box-shadow: var(--sombra-boton-alta); }
.boton:active { transform: none; box-shadow: none; }
.boton:disabled { opacity: 0.55; transform: none; box-shadow: none; }
.boton--bot { background-color: var(--bot); border-color: var(--bot); color: var(--bot-sobre); }
.boton--discreto { background-color: var(--suave); color: var(--tinta); border-color: var(--linea-fuerte); box-shadow: none; }
.boton--discreto:hover { background-color: var(--papel-alto); box-shadow: var(--sombra-discreto); }
.boton--peligro { background-color: var(--suave); color: var(--senal-texto); border-color: var(--senal); box-shadow: none; }
.boton--peligro:hover { background-color: var(--senal-suave); box-shadow: var(--sombra-discreto); }
.boton--claro { background-color: transparent; color: var(--barra-texto); border-color: var(--linea-fuerte); box-shadow: none; }

.campo__nombre { font-family: var(--fuente-mono); font-size: var(--t-rotulo); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-suave); }
.campo__entrada { padding: 0.5rem 0.875rem; color: var(--tinta); background-color: var(--suave); border: 1px solid var(--linea-fuerte); border-radius: var(--radio); box-shadow: var(--sombra-campo); transition: box-shadow 0.2s ease, background-color 0.2s ease; }
.campo__entrada::placeholder { color: var(--tinta-tenue); opacity: 1; }
.campo__entrada:focus { outline: none; background-color: var(--papel-alto); border-color: var(--tinta); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tinta) 12%, transparent); }
.campo__ayuda { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--tinta-tenue); }

.aviso { border-radius: var(--radio-aviso); background-color: var(--papel-hondo); border: 1px solid var(--linea); font-size: var(--t-chico); }
.aviso--error { border-color: color-mix(in srgb, var(--error) 35%, transparent); background-color: var(--error-fondo); color: var(--error); }
.aviso--ok { border-color: var(--bot-linea); background-color: var(--bot-suave); color: var(--bot); }
.aviso--marcas { border-color: color-mix(in srgb, var(--aviso) 45%, transparent); background-color: var(--aviso-suave); color: var(--tinta); }
.aviso--flotante { font-size: var(--t-texto); box-shadow: var(--sombra-flota); }
.aviso__cerrar { padding: 0.125rem 0.75rem; font-size: var(--t-chico); font-weight: 600; border: 1px solid currentColor; border-radius: 999px; background: transparent; color: inherit; }

/* el sello: una pastilla; llena de ciruela si es la espera, de salvia si salió bien, de miel si no llegó */
.sello { padding: 0.0625rem 0.625rem; font-size: var(--t-rotulo); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.6; color: var(--tinta-suave); border: 1px solid currentColor; border-radius: 999px; background-color: transparent; }
.sello--espera { background-color: var(--senal); border-color: var(--senal); color: var(--senal-sobre); box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--senal) 70%, transparent); }
.sello--no { color: var(--aviso); background-color: var(--aviso-suave); border-color: color-mix(in srgb, var(--aviso) 50%, transparent); }
.sello--ok { color: var(--bot); background-color: var(--bot-suave); border-color: var(--bot-linea); }

/* quién tiene la conversación */
.quien { font-size: var(--t-chico); font-weight: 600; color: var(--tinta); }
.quien__punto { width: 0.5625rem; height: 0.5625rem; border-radius: 50%; background: var(--tinta); }
.quien--bot { color: var(--bot); }
.quien--bot .quien__punto { background: var(--bot); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bot) 18%, transparent); }
.quien--silencio { color: var(--senal-texto); }
.quien--silencio .quien__punto { background: transparent; border: 2px solid var(--senal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--senal) 16%, transparent); }
.quien--persona .quien__punto { background: var(--tinta); }

/* ---------- la barra: una cápsula de cristal que flota ---------- */
.barra {
  gap: var(--espacio-1) var(--espacio-3);
  margin: 12px 12px 0;
  padding: 0.5rem 0.625rem 0.5rem 1.5rem;
  background-color: var(--barra-fondo);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
  color: var(--barra-texto);
  border: 1px solid var(--vidrio-borde);
  border-radius: var(--radio-barra);
  box-shadow: var(--sombra-tarjeta);
  --foco: var(--barra-foco);
}
.barra__marca { gap: 0.25rem; font-family: var(--fuente-titulo); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.045em; line-height: 1; color: var(--barra-texto); }
.barra__punto { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--senal); }
.barra__cliente--fijo { font-size: var(--t-medio); font-weight: 300; }
.barra__selector { min-height: 2.25rem; padding: 0.25rem 0.875rem; font-family: var(--fuente-titulo); font-size: 0.9375rem; font-weight: 600; color: var(--barra-texto); background-color: var(--suave); border: 1px solid var(--linea-fuerte); border-radius: 999px; }
.barra__selector option { color: var(--tinta); background: var(--papel-alto); }
.barra__nav { gap: 0.25rem; }
.barra__enlace { padding: 0.375rem 1rem; font-size: 0.8125rem; font-weight: 600; color: var(--tinta-suave); border-radius: 999px; transition: background-color 0.25s ease, color 0.25s ease; }
.barra__enlace:hover { color: var(--barra-texto); background-color: color-mix(in srgb, var(--tinta) 6%, transparent); }
.barra__enlace[aria-current="page"] { color: var(--barra-texto); background-color: color-mix(in srgb, var(--tinta) 10%, transparent); }
/* «Alertas» y su contador de alertas sin ver van juntos: el número es una pastilla de ciruela que sólo se ve cuando hay alguna */
.barra__grupo { gap: 0.125rem; }
.barra__pend { min-width: 1.375rem; padding: 0 0.4375rem; font-size: var(--t-chico); font-weight: 700; line-height: 1.375rem; font-variant-numeric: tabular-nums; color: var(--senal-sobre); background-color: var(--senal); border-radius: 999px; box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--senal) 70%, transparent); }
.barra__usuario { gap: var(--espacio-1); }
.barra__usuario .etiqueta { color: var(--tinta-tenue); }
.barra__correo { font-size: var(--t-chico); color: var(--tinta-suave); }

/* el contador: una pastilla; llena de ciruela cuando hay quien espera */
.derivados { gap: var(--espacio-1); }
.derivados__cifra { gap: 0.625rem; padding: 0.1875rem 1.125rem 0.25rem 1rem; color: var(--tinta-tenue); background-color: color-mix(in srgb, var(--tinta) 6%, transparent); border: 0; border-radius: 999px; transition: background-color 0.3s ease; }
.derivados--hay .derivados__cifra { background-color: var(--senal); color: var(--senal-sobre); box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--senal) 75%, transparent); }
.derivados__numero { font-size: 1.875rem; font-weight: 300; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.derivados__texto { font-size: var(--t-rotulo); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.derivados__detalle { gap: var(--espacio-0) var(--espacio-1); }
.derivados__ir { gap: 0.4375rem; padding: 0.1875rem 0.75rem; font-size: var(--t-chico); font-weight: 600; color: var(--barra-texto); background: var(--suave); border: 1px solid var(--linea-fuerte); border-radius: 999px; transition: background-color 0.25s ease; }
.derivados__ir:hover { background: var(--papel-alto); }
.derivados__n { font-weight: 800; color: var(--senal-texto); }

/* ---------- la bandeja: tres tarjetas que flotan ---------- */
.bandeja { gap: 12px; padding: 12px; }
.panel { border-radius: var(--radio-panel); border: 1px solid var(--vidrio-borde); box-shadow: var(--sombra-tarjeta); }
.panel--lista { background-color: var(--vidrio); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.panel--chat { background-color: color-mix(in srgb, var(--papel-hondo) 82%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.panel--ficha { background-color: var(--vidrio); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); padding: 0 1rem 2rem; }
#ficha:empty { background-image: radial-gradient(circle, var(--linea-fuerte) 1px, transparent 1.4px); background-size: 20px 20px; }

/* --- la lista --- */
.filtros { gap: 0.75rem; padding: 1.125rem 1.125rem 0.5rem; }
.filtros__buscar { padding: 0.5rem 1.125rem; border-radius: 999px; }
.filtros__estados { flex-wrap: wrap; gap: 0.375rem; overflow-x: visible; }
.filtro__rotulo { padding: 0.25rem 0.875rem; font-size: var(--t-chico); font-weight: 600; color: var(--tinta-suave); border: 1px solid var(--linea-fuerte); border-radius: 999px; background-color: var(--suave); transition: background-color 0.2s ease, color 0.2s ease; }
.filtro__rotulo:hover { background-color: var(--papel-alto); }
.filtro__radio:checked + .filtro__rotulo { background: var(--tinta); border-color: var(--tinta); color: var(--papel-alto); }
.filtro__radio:focus-visible + .filtro__rotulo { outline: 2px solid var(--foco); outline-offset: 2px; }

.lista { padding: 0.25rem 0.625rem 0.75rem; }
.fila { margin-bottom: 0.25rem; }
.fila__enlace { gap: 0.25rem; padding: 0.875rem 1.125rem; border-radius: var(--radio-fila); border: 1px solid transparent; transition: background-color 0.2s ease, box-shadow 0.2s ease; }
.fila__enlace:hover { background-color: var(--suave); }
.fila__enlace[aria-current="true"] { background-color: var(--papel-alto); border-color: color-mix(in srgb, var(--tinta) 16%, transparent); box-shadow: var(--sombra-fila); }
.fila--espera .fila__enlace { background-color: var(--senal-suave); }
.fila--espera .fila__enlace:hover { background-color: color-mix(in srgb, var(--senal-suave) 80%, var(--papel-alto)); }
.fila--espera .fila__enlace[aria-current="true"] { background-color: var(--senal-suave); border-color: color-mix(in srgb, var(--senal) 45%, transparent); }
.fila--tomada:not(.fila--espera) .fila__nombre::before { content: ""; display: inline-block; width: 0.4375rem; height: 0.4375rem; margin-right: 0.5rem; vertical-align: 0.1em; border-radius: 50%; background: var(--tinta); }
.fila--espera .fila__nombre::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.5rem; vertical-align: 0.1em; border-radius: 50%; background: var(--senal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--senal) 18%, transparent); }
.fila__nombre { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.02em; }
.fila__hora { font-size: var(--t-rotulo); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tinta-tenue); }
.fila__texto { font-size: var(--t-chico); color: var(--tinta-suave); }
.fila__marcas { gap: 0.375rem 0.75rem; margin-top: 0.1875rem; }
.fila__quien { font-size: var(--t-rotulo); }
.fila__estado { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-tenue); }
.lista__vacia, .lista__aviso { padding: var(--espacio-3) 1.125rem; color: var(--tinta-suave); font-size: var(--t-chico); }

/* --- el panel del medio cuando no hay ninguna abierta --- */
.vacio { padding: var(--espacio-3); }
.vacio__comillas { font-size: var(--t-gigante); font-weight: 200; line-height: 0.8; letter-spacing: -0.06em; color: var(--oro); opacity: 0.8; }
.vacio__titulo { margin-top: var(--espacio-2); font-size: var(--t-subtitulo); font-weight: 300; }
.vacio__texto { margin-top: var(--espacio-1); color: var(--tinta-suave); }

/* --- el chat --- */
.chat__cabecera { background-color: transparent; border-bottom: 1px solid var(--linea); padding-bottom: 0.25rem; }
.chat__fila { gap: var(--espacio-2); padding: 1.125rem 1.5rem 0; }
.chat__fila--acciones { padding: 0.5rem 1.5rem 0.75rem; }
.chat__nombre { font-size: var(--t-titulo); font-weight: 300; letter-spacing: -0.045em; line-height: 1.05; }
.chat__sub { gap: 0 var(--espacio-2); margin-top: 0.25rem; }
.chat__telefono, .chat__estado { font-size: var(--t-rotulo); font-weight: 600; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; color: var(--tinta-suave); }
.chat__estado { text-transform: uppercase; letter-spacing: 0.12em; }
.chat__espera { gap: 0 0.5rem; align-items: baseline; margin: 0.125rem 1.25rem 0.75rem; padding: 0.625rem 1.25rem; border-radius: var(--radio-chico); background-color: var(--senal); color: var(--senal-sobre); font-weight: 500; box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--senal) 80%, transparent); }
.chat__espera-tiempo { font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.78125rem; }

.mensajes { gap: 0.5rem; padding: 1.25rem 1.5rem 1rem; }
.mensajes:empty::before { color: var(--tinta-suave); }
.dia { gap: 0.75rem; margin: 0.875rem 0 0.25rem; font-size: var(--t-rotulo); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-suave); }
.dia::before, .dia::after { border-top: 1px solid var(--linea); }
.dia__rotulo { padding: 0.1875rem 0.875rem; border-radius: 999px; background-color: color-mix(in srgb, var(--tinta) 7%, transparent); }

.burbuja { max-width: min(36rem, 84%); padding: 0.625rem 1rem 0.4375rem; border: 1px solid var(--vidrio-borde); border-radius: var(--radio-burbuja); background-color: var(--papel-alto); color: var(--tinta); box-shadow: var(--sombra-burbuja); }
.burbuja.lead { border-radius: var(--radio-burbuja) var(--radio-burbuja) var(--radio-burbuja) 6px; }
.burbuja.bot { background-color: var(--bot-suave); border-color: var(--bot-linea); border-radius: var(--radio-burbuja) var(--radio-burbuja) 6px var(--radio-burbuja); }
.burbuja.persona { background-color: var(--tinta); border-color: var(--tinta); color: var(--papel-alto); border-radius: var(--radio-burbuja) var(--radio-burbuja) 6px var(--radio-burbuja); box-shadow: var(--sombra-persona); }
.burbuja.bloqueado {
  background-color: var(--papel-alto);
  background-image: repeating-linear-gradient(135deg, var(--aviso-suave) 0 0.5rem, transparent 0.5rem 1rem);
  border: 1.5px dashed var(--aviso);
  color: var(--tinta);
}
.burbuja.destacada { animation: destello 1.6s ease-out; }
.burbuja__rotulo { margin-bottom: 0.125rem; font-size: var(--t-rotulo); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-suave); }
.burbuja.bot .burbuja__rotulo { color: var(--bot); }
.burbuja.persona .burbuja__rotulo { color: color-mix(in srgb, var(--papel-alto) 80%, transparent); }
.burbuja__texto { line-height: 1.5; }
.burbuja__texto--vacio { font-style: italic; color: var(--tinta-suave); }
.burbuja__freno { gap: 0.375rem 0.625rem; margin-top: 0.5rem; font-size: var(--t-chico); }
.burbuja__regla { color: var(--aviso); font-weight: 600; }
.burbuja__hora { margin-top: 0.125rem; font-size: var(--t-rotulo); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tinta-suave); }
.burbuja.persona .burbuja__hora { color: color-mix(in srgb, var(--papel-alto) 80%, transparent); }
.burbuja__pie { gap: 0 0.5rem; margin-top: 0.125rem; }
.burbuja__pie .burbuja__hora { margin-top: 0; }
/* la entrega: ✓ enviado, ✓✓ entregado, ✓✓ en salvia si lo leyó; en miel si no se sabe y en ciruela de error si no llegó */
.entrega { font-size: var(--t-rotulo); font-weight: 600; letter-spacing: 0.04em; color: var(--tinta-suave); }
.entrega__marca, .entrega__codigo { font-weight: 800; }
.entrega--leido { color: var(--bot); }
.entrega--fallido { color: var(--error); }
.entrega--en_duda { color: var(--aviso); }
.burbuja.persona .entrega { color: color-mix(in srgb, var(--papel-alto) 80%, transparent); }
.burbuja.persona .entrega--leido { color: var(--bot-linea); }
.burbuja.persona .entrega--fallido { color: var(--error-fondo); }
.burbuja.persona .entrega--en_duda { color: var(--aviso-suave); }
.burbuja__medio { margin-top: 0.125rem; font-size: var(--t-rotulo); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-suave); }
.burbuja__audio { margin-top: 0.375rem; border-radius: var(--radio-fila); }
.burbuja__foto { margin-top: 0.25rem; }
.burbuja__foto img { border: 1px solid var(--vidrio-borde); border-radius: var(--radio-chico); background-color: var(--papel-hondo); box-shadow: var(--sombra-burbuja); }
.evento { margin-top: 0.25rem; font-size: var(--t-chico); font-style: italic; color: var(--tinta-suave); }
.burbuja.persona .evento { color: color-mix(in srgb, var(--papel-alto) 80%, transparent); }

.chat__error .aviso { margin: 0 1.25rem; font-size: var(--t-texto); }
.compositor { gap: var(--espacio-1); margin: 0 1rem; padding: 0.4375rem 0.4375rem 0.4375rem 0.5rem; background-color: var(--papel-alto); border: 1px solid var(--vidrio-borde); border-radius: var(--radio-compositor); box-shadow: var(--sombra-flota); }
.compositor__texto { padding: 0.5625rem 0.875rem; line-height: 1.4; color: var(--tinta); background-color: transparent; border: 0; border-radius: var(--radio-chico); }
.compositor__texto::placeholder { color: var(--tinta-tenue); opacity: 1; }
.compositor__texto:focus { outline: none; box-shadow: none; }
.compositor.htmx-request .compositor__enviar { opacity: 0.55; }
.compositor__nota { padding: 0.5rem 1.75rem 1rem; font-size: var(--t-rotulo); font-weight: 500; color: var(--tinta-suave); }

/* --- la ficha: tarjetas suaves --- */
.ficha__cabeza { gap: var(--espacio-2); padding-top: 1.5rem; }
.ficha__nombre { font-size: var(--t-ficha); font-weight: 200; letter-spacing: -0.05em; line-height: 1; }
.panel--ficha > .aviso { margin-top: var(--espacio-2); }
.ficha__seccion { margin-top: 1.125rem; padding: 1rem 1rem 1.125rem; gap: 0.75rem; background-color: var(--suave); border: 1px solid var(--vidrio-borde); border-radius: var(--radio-seccion); box-shadow: var(--sombra-seccion); }
.ficha__titulo { display: flex; align-items: center; gap: 0.75rem; font-size: var(--t-rotulo); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-suave); }
.ficha__titulo::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--oro), transparent); }
.ficha__derivacion--espera { background-color: var(--senal-suave); border-color: color-mix(in srgb, var(--senal) 30%, transparent); }
.ficha__derivacion--espera .ficha__titulo { color: var(--senal-texto); }
.ficha__campo { font-size: var(--t-texto); }
.ficha__campo--chico { font-size: var(--t-chico); color: var(--tinta-suave); }
.ficha__rotulo { font-size: var(--t-chico); font-weight: 600; color: var(--tinta-suave); }
.ficha__form { gap: var(--espacio-1); }
.ficha__datos { gap: 0.5rem; }
.ficha__fijo { font-size: var(--t-chico); font-variant-numeric: tabular-nums; }
.origen { padding: 0 0.5rem; font-size: 0.59375rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 999px; }
.origen--bot { background-color: var(--bot-suave); color: var(--bot); box-shadow: inset 0 0 0 1px var(--bot-linea); }
.origen--persona { background-color: var(--tinta); color: var(--papel-alto); }

.ficha__lista { gap: 0.625rem; }
.ficha__precio { gap: 0.25rem; padding: 0.75rem 1rem; background-color: var(--papel-alto); border-radius: var(--radio-chico); box-shadow: inset 3px 0 0 var(--oro), var(--sombra-precio); }
.ficha__precio-item { font-weight: 600; }
.ficha__precio-monto { font-size: var(--t-chico); color: var(--tinta-suave); }
.monto { font-size: 1.875rem; font-weight: 300; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--tinta); }
.ficha__atencion .monto { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.enlace { color: var(--tinta); text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
.ficha__anular { gap: var(--espacio-1); margin-top: 0.375rem; }
.ficha__anular .campo__entrada { min-height: 2.25rem; font-size: var(--t-chico); }
.ficha__atencion { padding: var(--espacio-0) 0 var(--espacio-0) 0.875rem; border-left: 2px solid var(--oro); }
.ficha__fecha { font-size: var(--t-rotulo); font-weight: 700; letter-spacing: 0.04em; color: var(--tinta-suave); }
.ficha__nota { padding: var(--espacio-0) 0 var(--espacio-0) 0.875rem; border-left: 2px solid var(--bot); }
.ficha__nota-cabeza { font-size: var(--t-chico); color: var(--tinta-suave); }
.ficha__vacia { color: var(--tinta-tenue); font-size: var(--t-chico); font-style: italic; }
.ficha__form--agregar { margin-top: var(--espacio-1); padding: 0.75rem; background-color: color-mix(in srgb, var(--tinta) 4%, transparent); border: 1px dashed var(--linea-fuerte); border-radius: var(--radio-chico); }
.ficha__par { gap: var(--espacio-1); }
.ficha__par .campo__entrada { padding: 0.5rem 0.5rem; font-size: var(--t-chico); }
.ficha__dato { grid-template-columns: minmax(0, 6rem) minmax(0, 1fr); }

/* ---------- el teléfono de prueba ---------- */
.telefono { padding: var(--espacio-4) var(--espacio-3); gap: var(--espacio-3) var(--espacio-4); }
.telefono__titulo { margin-top: var(--espacio-1); font-size: var(--t-portada); font-weight: 200; letter-spacing: -0.055em; }
.telefono__texto { margin-top: var(--espacio-2); max-width: 32rem; color: var(--tinta-suave); }
.aparato { background-color: var(--vidrio); border: 1px solid var(--vidrio-borde); border-radius: 2.5rem; box-shadow: 0 0 0 7px var(--marco-aparato), var(--sombra-aparato); }
.aparato__altavoz { width: 3.5rem; height: 0.3125rem; margin: 0.75rem auto 0.25rem; border-radius: 999px; background-color: var(--linea-fuerte); }
.aparato__cabecera { gap: 0.75rem; padding: 0.5rem var(--espacio-2) 0.75rem; border-bottom: 1px solid var(--linea); }
.aparato__avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; background-color: var(--tinta); color: var(--papel-alto); font-size: var(--t-medio); font-weight: 300; }
.aparato__nombre { font-size: var(--t-medio); font-weight: 600; letter-spacing: -0.02em; }
.aparato__sub { font-size: var(--t-rotulo); font-weight: 600; color: var(--tinta-suave); }
.aparato .mensajes { background-color: transparent; }
.aparato__hilo:empty::before { color: var(--tinta-suave); }
.aparato .compositor { margin: 0 0.75rem 0.75rem; }
.globo { padding: 0.5rem 0.875rem 0.375rem; border: 1px solid var(--vidrio-borde); border-radius: var(--radio-burbuja) var(--radio-burbuja) var(--radio-burbuja) 6px; background-color: var(--papel-alto); color: var(--tinta); box-shadow: var(--sombra-burbuja); }
.globo--enviado { background-color: var(--tinta); border-color: var(--tinta); color: var(--papel-alto); border-radius: var(--radio-burbuja) var(--radio-burbuja) 6px var(--radio-burbuja); }
.globo__texto { line-height: 1.45; }
.globo__texto--vacio { font-style: italic; }
.globo__hora { margin-top: 0.125rem; font-size: var(--t-rotulo); font-weight: 600; }
.globo--recibido .globo__hora { color: var(--tinta-suave); }
.globo--enviado .globo__hora { color: color-mix(in srgb, var(--papel-alto) 80%, transparent); }
.linea { gap: var(--espacio-2); padding: var(--espacio-3); background-color: var(--vidrio); border: 1px solid var(--vidrio-borde); border-radius: var(--radio-panel); box-shadow: var(--sombra-tarjeta); }
.linea__cabeza { padding-bottom: var(--espacio-1); border-bottom: 1px solid var(--linea); }
.linea__titulo { margin-top: 0.125rem; font-size: var(--t-titulo); font-weight: 300; letter-spacing: -0.045em; }
.linea__notas { gap: var(--espacio-0); padding: var(--espacio-1) 0 0 1.1rem; border-top: 1px solid var(--linea); font-size: var(--t-chico); color: var(--tinta-suave); }

/* ---------- elegir cliente ---------- */
.elegir { padding: var(--espacio-4) var(--espacio-3); }
.elegir__titulo { margin-top: var(--espacio-1); font-size: var(--t-portada); font-weight: 200; letter-spacing: -0.055em; line-height: 1.02; }
.elegir__texto { margin-top: var(--espacio-2); max-width: 34rem; color: var(--tinta-suave); }
.elegir__lista { gap: 0.875rem; margin: var(--espacio-3) 0 0; }
.elegir__boton { gap: var(--espacio-2); padding: 1.25rem 1.75rem; color: var(--tinta); background-color: var(--vidrio); border: 1px solid var(--vidrio-borde); border-radius: var(--radio-panel); box-shadow: var(--sombra-tarjeta); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.elegir__boton:hover { transform: translateY(-3px); box-shadow: var(--sombra-flota); }
.elegir__nombre { font-size: var(--t-subtitulo); font-weight: 300; letter-spacing: -0.04em; }
.elegir__ir { font-size: var(--t-rotulo); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-suave); }
.elegir__ir::after { content: " →"; }
.elegir__vacio { color: var(--tinta-suave); }

/* ---------- una página de error ---------- */
.error { gap: var(--espacio-3); padding: var(--espacio-4) var(--espacio-3); }
.error__codigo { font-size: var(--t-gigante); font-weight: 200; line-height: 0.85; letter-spacing: -0.07em; color: var(--oro); opacity: 0.85; }
.error__titulo { font-size: var(--t-portada); font-weight: 200; letter-spacing: -0.055em; }
.error__mensaje { margin-top: var(--espacio-1); max-width: 32rem; color: var(--tinta-suave); }
.error__salida { margin-top: var(--espacio-3); }

/* ---------- entrar ---------- */
.entrada { gap: var(--espacio-4); padding: var(--espacio-4) var(--espacio-3); }
.entrada__nombre { font-size: clamp(4.5rem, 20vw, 10rem); font-weight: 200; line-height: 0.95; letter-spacing: -0.07em; padding-bottom: 0.18em; }
.entrada__nombre::after { content: ""; display: inline-block; width: 0.11em; height: 0.11em; margin-left: 0.06em; border-radius: 50%; background: var(--senal); }
.entrada__lema { margin: var(--espacio-2) 0 0; max-width: 24rem; font-size: 1.0625rem; font-weight: 300; color: var(--tinta-suave); }
.entrada__formulario { gap: var(--espacio-2); padding: 2rem; border: 1px solid var(--vidrio-borde); border-radius: var(--radio-formulario); background-color: var(--vidrio); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--sombra-flota); }
.entrada__titulo { font-size: var(--t-subtitulo); font-weight: 300; letter-spacing: -0.04em; }
@media (min-width: 56rem) { .entrada { padding: var(--espacio-4); } }


/* ==========================================================================
   LEADS Y ALERTAS — pantallas de lectura.
   Leads es un libro de registro dentro de una tarjeta que flota: una tabla con la ficha del cliente, rótulos en versalitas y renglones
   finos. Una tabla ancha se desplaza DENTRO de su caja (nunca la página); en el celular cada lead pasa a ser una tarjeta con el rótulo de
   cada celda. Una alerta es una tarjeta: la que espera a una persona va en ciruela suave con su franja; la que ya se vio queda de cristal.
   ========================================================================== */
body.pagina-leads, body.pagina-alertas { display: flex; flex-direction: column; }
.pantalla { position: relative; z-index: 1; flex: 1; width: 100%; max-width: 90rem; min-width: 0; margin: 0 auto; padding: var(--espacio-4) var(--espacio-3); display: grid; align-content: start; gap: var(--espacio-3); }
.pantalla > * { min-width: 0; }
.pantalla__titulo { margin-top: var(--espacio-1); font-size: var(--t-portada); font-weight: 200; letter-spacing: -0.055em; line-height: 1.02; }
.pantalla__texto { margin-top: var(--espacio-2); max-width: 38rem; color: var(--tinta-suave); }
.pantalla__cuenta { margin-top: var(--espacio-1); font-size: var(--t-rotulo); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-suave); }
.pantalla__cifra { margin-right: 0.375rem; font-size: var(--t-ficha); font-weight: 200; letter-spacing: -0.05em; color: var(--tinta); font-variant-numeric: tabular-nums; }
.pantalla__vacio { margin: var(--espacio-3) auto; }

.filtros-pantalla { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--espacio-2); padding: var(--espacio-2) var(--espacio-3); background-color: var(--vidrio); border: 1px solid var(--vidrio-borde); border-radius: var(--radio-seccion); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--sombra-tarjeta); }
.filtros-pantalla .campo { flex: 1 1 10rem; max-width: 16rem; }
.filtros-pantalla__acciones { display: flex; flex-wrap: wrap; gap: var(--espacio-1); }

.tabla-envoltorio {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--vidrio-borde);
  border-radius: var(--radio-seccion);
  box-shadow: var(--sombra-tarjeta);
  scrollbar-color: var(--linea-fuerte) var(--papel-hondo);
  /* sombras de borde: aparecen sólo del lado donde la tabla sigue (los dos primeros degradados tapan la sombra cuando no hay más) */
  background:
    linear-gradient(to right, var(--papel-alto) 30%, transparent) left center / 2.5rem 100% no-repeat local,
    linear-gradient(to left, var(--papel-alto) 30%, transparent) right center / 2.5rem 100% no-repeat local,
    linear-gradient(to right, var(--sombra-borde), transparent) left center / 0.875rem 100% no-repeat scroll,
    linear-gradient(to left, var(--sombra-borde), transparent) right center / 0.875rem 100% no-repeat scroll,
    var(--papel-alto);
}
.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-chico); }
.tabla th { padding: 0.75rem 0.875rem; text-align: left; white-space: nowrap; font-size: var(--t-rotulo); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-suave); background-color: var(--papel-hondo); border-bottom: 1px solid var(--linea-fuerte); }
.tabla td { min-width: 4.5rem; max-width: 20rem; padding: 0.625rem 0.875rem; vertical-align: top; overflow-wrap: break-word; border-bottom: 1px solid var(--linea); }
.tabla td.tabla__texto { min-width: 10rem; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover { background-color: var(--papel-hondo); }
.tabla tbody tr.tabla__fila--espera { background-color: var(--senal-suave); }
.tabla tbody tr.tabla__fila--espera:hover { background-color: color-mix(in srgb, var(--senal-suave) 80%, var(--papel-alto)); }
/* la primera columna (el nombre) queda fija cuando la tabla se desplaza de lado: no se pierde de quién es la fila */
.tabla th:first-child, .tabla td:first-child { position: sticky; left: 0; z-index: 1; }
.tabla th:first-child { z-index: 2; }
.tabla td:first-child { background-color: var(--papel-alto); box-shadow: 1px 0 0 var(--linea); }
.tabla tbody tr:hover td:first-child { background-color: var(--papel-hondo); }
.tabla tbody tr.tabla__fila--espera td:first-child { background-color: var(--senal-suave); box-shadow: inset 4px 0 0 var(--senal), 1px 0 0 var(--linea); }
.tabla tbody tr.tabla__fila--espera:hover td:first-child { background-color: color-mix(in srgb, var(--senal-suave) 80%, var(--papel-alto)); }
.tabla td.tabla__nombre { min-width: 9rem; font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.02em; }
.tabla td.tabla__nombre a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--linea-fuerte); text-underline-offset: 0.25em; }
.tabla td.tabla__nombre a:hover { text-decoration-color: var(--senal); text-decoration-thickness: 2px; }
.tabla td.tabla__mono { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla td.tabla__estado { white-space: nowrap; }
.tabla__estado .sello { display: block; width: fit-content; margin-top: 0.25rem; }
.tabla td.tabla__vacia { color: var(--tinta-tenue); }
/* un texto largo no convierte la fila en un bloque: se recorta a 3 líneas (el texto entero queda en el DOM y en el `title`) */
.tabla__recorte {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.alertas__pendientes { display: flex; align-items: baseline; gap: var(--espacio-1); margin: 0 0 var(--espacio-2); }
.alertas__cifra { font-size: var(--t-portada); font-weight: 200; line-height: 1; letter-spacing: -0.055em; font-variant-numeric: tabular-nums; color: var(--tinta-tenue); }
.alertas__pendientes--hay .alertas__cifra { color: var(--senal-texto); }
.alertas__rotulo { font-size: var(--t-rotulo); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-suave); }
.alertas-lista { display: grid; gap: var(--espacio-2); margin: 0; padding: 0; list-style: none; }
.alerta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--espacio-2); padding: var(--espacio-2) 1.25rem; background-color: var(--suave); border: 1px solid var(--vidrio-borde); border-radius: var(--radio-seccion); box-shadow: var(--sombra-seccion); }
.alerta--sin-ver { background-color: var(--senal-suave); border-color: color-mix(in srgb, var(--senal) 35%, transparent); box-shadow: inset 4px 0 0 var(--senal), var(--sombra-tarjeta); }
.alerta--vista { color: var(--tinta-suave); }
.alerta__cuerpo { display: grid; gap: var(--espacio-1); min-width: 0; }
.alerta__marcas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-0) 0.75rem; }
.alerta__hora { font-size: var(--t-rotulo); font-weight: 600; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; color: var(--tinta-suave); }
.alerta__cliente { font-weight: 700; }
.alerta__titulo { font-weight: 600; overflow-wrap: anywhere; }
.alerta__codigo { color: var(--tinta-suave); }
.alerta__detalle { white-space: pre-wrap; overflow-wrap: anywhere; }
.alerta__lead { font-size: var(--t-chico); color: var(--tinta-suave); }
.alerta__estado { font-size: var(--t-rotulo); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-tenue); }
.alerta__marcar { margin: 0; }


/* ==========================================================================
   EL SIMULADOR — una prueba del bot.
   A la izquierda lo que se prepara (cuándo y contra qué, las últimas pruebas, lo que el bot anotó) y a la derecha el chat, que es lo que
   se mira, en una tarjeta de cristal. El reloj de la prueba es una cápsula con la hora en peso fino y el día y la fecha en versalitas. Las
   burbujas (lo que dice el bot y lo que el revisor frenó) son las de la bandeja; «Enseñar respuesta» es un <details> bajo cada respuesta.
   ========================================================================== */
body.pagina-simulador { display: flex; flex-direction: column; }
.simulador {
  position: relative;
  z-index: 1;
  flex: 1;
  width: 100%;
  max-width: 90rem;
  margin: 0 auto;
  padding: var(--espacio-4) var(--espacio-3);
  display: grid;
  grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
  grid-template-rows: auto auto auto auto 1fr;
  grid-template-areas: "cabeza chat" "nueva chat" "recientes chat" "ficha chat" ". chat";
  gap: var(--espacio-3) var(--espacio-4);
  align-content: start;
}
.simulador > * { min-width: 0; }
.simulador__cabeza { grid-area: cabeza; }
.simulador__nueva { grid-area: nueva; max-width: none; }
.simulador__vacio { grid-area: chat; align-self: center; }

.recientes { grid-area: recientes; display: grid; gap: var(--espacio-1); }
.recientes__lista { display: grid; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.recientes__enlace { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.625rem; padding: 0.625rem 1rem; color: inherit; text-decoration: none; border: 1px solid transparent; border-radius: var(--radio-fila); transition: background-color 0.2s ease, box-shadow 0.2s ease; }
.recientes__enlace:hover { background-color: var(--suave); }
.recientes__enlace[aria-current="page"] { background-color: var(--papel-alto); border-color: color-mix(in srgb, var(--tinta) 16%, transparent); box-shadow: var(--sombra-fila); }
.recientes__version { font-weight: 700; letter-spacing: -0.01em; }
.recientes__reloj { font-size: var(--t-chico); font-weight: 600; font-variant-numeric: tabular-nums; }
.recientes__creada { margin-left: auto; font-size: var(--t-rotulo); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tinta-suave); }

.simchat {
  grid-area: chat;
  align-self: start;
  position: sticky;
  top: var(--espacio-2);
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: clamp(30rem, calc(100dvh - 9rem), 52rem);
  overflow: hidden;
  background-color: color-mix(in srgb, var(--papel-hondo) 82%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--vidrio-borde);
  border-radius: var(--radio-panel);
  box-shadow: var(--sombra-tarjeta);
}
.simchat__cabecera { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-1) var(--espacio-3); padding: 0.875rem 1.25rem; border-bottom: 1px solid var(--linea); }
.simchat__contra { flex: 1 1 10rem; min-width: 0; }
.simchat__version { font-size: var(--t-subtitulo); font-weight: 300; letter-spacing: -0.04em; line-height: 1.1; overflow-wrap: anywhere; }
.simchat__reiniciar { margin: 0; }
.simchat > .aviso { flex: none; margin: 0 1.25rem; }
.simchat__hilo:empty::before { content: "Escribe el primer mensaje, como si fueras el lead."; max-width: 16rem; text-align: center; color: var(--tinta-suave); }
.simchat__pensando { display: none; flex: none; margin: 0 1.25rem 0.5rem; padding: 0.375rem 1rem; font-size: var(--t-rotulo); font-weight: 700; letter-spacing: 0.06em; color: var(--senal-texto); background-color: var(--senal-suave); border-radius: 999px; }
.compositor.htmx-request ~ .simchat__pensando { display: block; }

.reloj { display: grid; grid-template-columns: auto auto; grid-template-areas: "hora dia" "hora fecha"; align-items: center; column-gap: 0.75rem; padding: 0.25rem 1.125rem 0.3125rem 1rem; background-color: var(--suave); border: 1px solid var(--linea-fuerte); border-radius: 999px; }
.reloj__hora { grid-area: hora; font-size: 2.25rem; font-weight: 300; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.reloj__dia, .reloj__fecha { font-size: var(--t-rotulo); font-weight: 700; letter-spacing: 0.12em; line-height: 1.3; text-transform: uppercase; color: var(--tinta-suave); }
.reloj__dia { grid-area: dia; color: var(--tinta); }
.reloj__fecha { grid-area: fecha; }

.simficha { grid-area: ficha; padding: 0 var(--espacio-2) var(--espacio-3); background-color: var(--vidrio); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--vidrio-borde); border-radius: var(--radio-panel); box-shadow: var(--sombra-tarjeta); }
.simficha__nota { margin-top: var(--espacio-0); font-size: var(--t-chico); color: var(--tinta-suave); }

.ensenar { margin-top: 0.5rem; padding-top: 0.375rem; border-top: 1px dashed var(--bot-linea); font-size: var(--t-chico); }
.ensenar__abrir { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.125rem 0; font-size: var(--t-rotulo); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bot); cursor: pointer; list-style: none; }
.ensenar__abrir::-webkit-details-marker { display: none; }
.ensenar__abrir:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.ensenar__form { display: grid; gap: var(--espacio-1); margin-top: 0.5rem; padding: 0.75rem; color: var(--tinta); background-color: var(--suave); border: 1px dashed var(--bot-linea); border-radius: var(--radio-chico); }
.ensenar__nota { color: var(--tinta-suave); }
.ensenar--hecho { display: grid; gap: var(--espacio-0); padding: 0.625rem 0.75rem; color: var(--bot); background-color: var(--bot-sobre); border: 1px solid var(--bot-linea); border-radius: var(--radio-chico); }
.ensenar__titulo { font-size: var(--t-rotulo); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }


/* AGENTE-INICIO */
/* ==========================================================================
   EL AGENTE, LAS VERSIONES Y LOS CASOS.
   El agente es un formulario en una tarjeta de cristal: las secciones son píldoras (la abierta va llena de grafito) y «Probar y publicar» es
   la tarjeta de al lado, con el bot en salvia. El veredicto de una corrida es un sello (salvia si cumple, ciruela si no: la ciruela sigue
   siendo lo que espera a una persona). Las versiones y los casos son tablas como Leads. En el celular todo cae a una columna y las tablas
   se vuelven tarjetas (reglas de `.tabla`).
   ========================================================================== */
body.pagina-agente, body.pagina-casos { display: flex; flex-direction: column; }
.agente, .casos { position: relative; z-index: 1; flex: 1; width: 100%; max-width: 90rem; margin: 0 auto; padding: var(--espacio-4) var(--espacio-3); display: grid; align-content: start; gap: var(--espacio-3); }
.agente > *, .casos > * { min-width: 0; }
.agente__estado { font-size: var(--t-chico); color: var(--tinta-suave); max-width: 52rem; }
.agente__vacio { margin: var(--espacio-3) auto; }
.agente__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); gap: var(--espacio-4); align-items: start; }
.agente__editor { display: grid; gap: var(--espacio-2); min-width: 0; }
.secciones { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.secciones__enlace { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.5rem; padding: 0.25rem 1rem; font-size: var(--t-chico); font-weight: 600; text-decoration: none; color: var(--tinta-suave); background-color: var(--suave); border: 1px solid var(--linea-fuerte); border-radius: 999px; transition: background-color 0.2s ease, color 0.2s ease; }
.secciones__enlace:hover { background-color: var(--papel-alto); color: var(--tinta); }
.secciones__enlace[aria-current="page"] { background-color: var(--tinta); border-color: var(--tinta); color: var(--papel-alto); }
.secciones__enlace--reservada::after { content: "IL"; padding: 0 0.375rem; font-size: 0.625rem; font-weight: 800; letter-spacing: 0.08em; border: 1px solid currentColor; border-radius: 999px; }
.agente__form { display: grid; gap: var(--espacio-2); padding: var(--espacio-3); background-color: var(--vidrio); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--vidrio-borde); border-radius: var(--radio-panel); box-shadow: var(--sombra-tarjeta); }
.agente__grupo { display: grid; gap: var(--espacio-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.agente__grupo:disabled { opacity: 0.7; }
.agente__ayuda { max-width: 46rem; font-size: var(--t-chico); color: var(--tinta-suave); }
.agente__corto { max-width: 10rem; }
.agente__acciones { display: flex; flex-wrap: wrap; gap: var(--espacio-1); padding-top: var(--espacio-2); border-top: 1px solid var(--linea); }
.campo__entrada--largo { min-height: 10rem; line-height: 1.45; }
.campo__entrada--mono { font-family: var(--fuente-codigo); font-size: var(--t-chico); }
.fila-editable { display: grid; gap: var(--espacio-1) var(--espacio-2); padding: var(--espacio-2) 0; border-bottom: 1px solid var(--linea); }
.fila-editable__n { font-size: var(--t-medio); font-weight: 300; color: var(--tinta-tenue); }
.fila-editable--quitar { opacity: 0.72; }
.fila-editable--quitar .campo__entrada { text-decoration: line-through; }
.fila-editable__quitar, .fila-editable__marcas label { display: inline-flex; align-items: center; gap: 0.375rem; font-size: var(--t-chico); }
.fila-editable__marcas { display: flex; flex-wrap: wrap; gap: var(--espacio-1) var(--espacio-3); align-items: center; }
.fila-campo { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
.fila-campo .fila-editable__marcas { grid-column: 1 / -1; }
.fila-contacto { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) auto; align-items: end; }

.prueba { position: sticky; top: 4.5rem; display: grid; gap: var(--espacio-2); padding: var(--espacio-3); background-color: var(--vidrio); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--bot-linea); border-radius: var(--radio-panel); box-shadow: inset 0 3px 0 var(--bot), var(--sombra-tarjeta); }
.prueba__encabezado { margin-top: 0.125rem; font-size: var(--t-subtitulo); font-weight: 300; letter-spacing: -0.04em; }
.prueba__texto, .prueba__modo, .prueba__dato { font-size: var(--t-chico); color: var(--tinta-suave); }
.prueba__modo { padding: 0.625rem var(--espacio-2); border-radius: var(--radio-aviso); background-color: var(--papel-hondo); }
.prueba__cuerpo { display: grid; gap: var(--espacio-2); min-width: 0; }
.prueba__confirmar { display: grid; gap: var(--espacio-1); padding: var(--espacio-2); border: 1px solid var(--linea-fuerte); border-radius: var(--radio-chico); background-color: var(--papel-alto); box-shadow: var(--sombra-seccion); }
.prueba__titulo, .corrida__titulo { font-size: var(--t-medio); font-weight: 600; letter-spacing: -0.02em; }
.prueba__form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-1); margin: 0; }
.corrida { display: grid; gap: var(--espacio-2); min-width: 0; padding-top: var(--espacio-2); border-top: 1px solid var(--linea); }
.corrida__cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--espacio-1); }
.corrida__sello { padding: 0.1875rem 0.875rem; font-size: var(--t-chico); letter-spacing: 0.1em; }
.corrida__sello--ok { color: var(--bot); background-color: var(--bot-suave); border-color: var(--bot-linea); }
.corrida__avance { display: grid; gap: var(--espacio-1); font-size: var(--t-chico); }
.corrida__hechos { font-size: var(--t-titulo); font-weight: 200; line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.corrida__progreso { appearance: none; width: 100%; height: 0.5rem; overflow: hidden; border: 0; border-radius: 999px; background-color: var(--papel-hondo); accent-color: var(--bot); }
.corrida__progreso::-webkit-progress-bar { border-radius: 999px; background-color: var(--papel-hondo); }
.corrida__progreso::-webkit-progress-value { border-radius: 999px; background-color: var(--bot); }
.corrida__progreso::-moz-progress-bar { border-radius: 999px; background-color: var(--bot); }
.corrida__nota, .corrida__texto { font-size: var(--t-chico); color: var(--tinta-suave); }
.corrida__cifras { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--espacio-2); margin: 0; }
.corrida__cifra { padding: var(--espacio-1) 0; border-bottom: 1px solid var(--linea); min-width: 0; }
.corrida__cifra dt { font-size: var(--t-rotulo); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-suave); }
.corrida__cifra dd { margin: 0; font-size: var(--t-chico); font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.corrida__de { font-weight: 400; color: var(--tinta-suave); }
.corrida__motivos { margin: 0; padding: 0 0 0 1.1rem; display: grid; gap: var(--espacio-0); font-size: var(--t-chico); color: var(--error); }
.corrida__publicar { display: grid; gap: var(--espacio-1); padding: var(--espacio-2); border: 1px solid var(--bot-linea); border-radius: var(--radio-chico); background-color: var(--bot-sobre); }
.fallidos { display: grid; gap: var(--espacio-1); margin: 0; padding: 0; list-style: none; }
.fallido { border: 1px solid var(--linea); border-radius: var(--radio-chico); background-color: var(--papel-alto); box-shadow: inset 3px 0 0 var(--senal), var(--sombra-seccion); }
.fallido__resumen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-1); padding: 0.625rem 1rem; cursor: pointer; }
.fallido__id { font-family: var(--fuente-codigo); font-size: var(--t-chico); font-weight: 700; overflow-wrap: anywhere; }
.fallido__cuerpo { display: grid; gap: var(--espacio-1); padding: 0 1rem 0.875rem; font-size: var(--t-chico); min-width: 0; }
.fallido__reglas { display: grid; gap: var(--espacio-0); margin: 0; padding: 0 0 0 1.1rem; }
.fallido__reglas li, .fallido__error { overflow-wrap: anywhere; }
.fallido__codigo { color: var(--aviso); font-weight: 600; overflow-wrap: anywhere; }
.fallido__error { color: var(--error); }
.fallido__mas { color: var(--tinta-suave); }
.dialogo { display: grid; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.dialogo__mensaje { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0.5rem; padding: 0.4375rem 0.75rem; border: 1px solid var(--linea); border-radius: var(--radio-aviso); background-color: var(--suave); }
.dialogo__mensaje--bot { border-color: var(--bot-linea); background-color: var(--bot-suave); }
.dialogo__mensaje--bloqueado { border-color: color-mix(in srgb, var(--aviso) 50%, transparent); background-color: var(--aviso-suave); }
.dialogo__mensaje--humano { border-color: var(--linea-fuerte); }
.dialogo__quien { padding-top: 0.1rem; font-size: var(--t-rotulo); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-suave); }
.dialogo__texto { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.4; }
.forzar { padding: var(--espacio-1) var(--espacio-2); border: 1px dashed var(--senal); border-radius: var(--radio-chico); }
.forzar__abrir { cursor: pointer; font-weight: 600; color: var(--senal-texto); }
.forzar[open] { display: grid; gap: var(--espacio-1); }
.forzar__form { display: grid; gap: var(--espacio-1); margin: 0; }
.forzar__nota { font-size: var(--t-chico); color: var(--tinta-suave); }
.tabla tbody tr.tabla__fila--publicada { background-color: var(--bot-sobre); }
.casos__ultima { font-size: var(--t-chico); color: var(--tinta-suave); }
.casos__fila--inactivo td { color: var(--tinta-tenue); }
.casos__nuevo { display: grid; gap: var(--espacio-1); }
.casos__form { max-width: 52rem; }
.caso__editor { display: grid; gap: var(--espacio-2); max-width: 60rem; }
.caso__form, .caso__activo { display: grid; gap: var(--espacio-1); margin: 0; }
.caso__activo { justify-items: start; }
.caso__ultima { display: grid; gap: var(--espacio-1); max-width: 60rem; padding: var(--espacio-2); background-color: var(--suave); border: 1px dashed var(--linea-fuerte); border-radius: var(--radio-seccion); }
.caso__id { overflow-wrap: anywhere; }
@media (prefers-reduced-motion: no-preference) {
  .agente__form, .prueba, .casos__form, .caso__ultima { animation: entrar 0.35s ease-out both; }
}
.marcas { display: grid; gap: var(--espacio-0); margin: var(--espacio-1) 0 0; padding-left: 1.1rem; }
/* AGENTE-FIN */


/* ADMIN-INICIO */
/* ==========================================================================
   CLIENTES Y USUARIOS (sólo InversaLabs).
   Dos pantallas de administración con la misma forma: a un lado la lista y al otro el formulario de alta, una tarjeta de cristal (la misma
   del Agente). Los clientes son una tabla como Leads (en el celular, una tarjeta por cliente: reglas de `.tabla`). Los usuarios son
   credenciales: una tarjeta con una franja a la izquierda (grafito; punteada y apagada si la cuenta está desactivada) y, dentro, el
   formulario para cambiarle la clave. En el celular todo cae a una columna y el alta va primero.
   ========================================================================== */
body.pagina-admin { display: flex; flex-direction: column; }
.admin { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espacio-3); align-items: start; }
.admin__lado, .admin__lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espacio-2); align-content: start; min-width: 0; }
.admin__pasos { margin: var(--espacio-1) 0 0; padding-left: 1.25rem; display: grid; gap: var(--espacio-0); }
.admin__mono { font-family: var(--fuente-codigo); font-size: 0.9em; }
.admin__elegir { margin: 0; }
.formulario-admin { display: grid; gap: var(--espacio-2); padding: var(--espacio-3); background-color: var(--vidrio); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--vidrio-borde); border-radius: var(--radio-panel); box-shadow: var(--sombra-tarjeta); }
.formulario-admin .boton { justify-self: start; }
.tabla tbody tr.tabla__fila--nueva { background-color: var(--bot-sobre); }
.tabla tbody tr.tabla__fila--nueva td:first-child { background-color: var(--bot-sobre); box-shadow: inset 4px 0 0 var(--bot), 1px 0 0 var(--linea); }
.usuarios { display: grid; gap: var(--espacio-2); margin: 0; padding: 0; list-style: none; }
.usuario { display: grid; gap: var(--espacio-2); padding: var(--espacio-2) 1.25rem; background-color: var(--vidrio); border: 1px solid var(--vidrio-borde); border-radius: var(--radio-seccion); box-shadow: inset 4px 0 0 var(--tinta), var(--sombra-tarjeta); }
.usuario--inactivo { background-color: var(--papel-hondo); border-style: dashed; border-color: var(--linea-fuerte); box-shadow: inset 4px 0 0 var(--linea-fuerte); color: var(--tinta-suave); }
.usuario__datos { display: grid; gap: var(--espacio-0); min-width: 0; }
.usuario__correo { font-size: var(--t-medio); font-weight: 600; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.usuario__marcas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-1); margin: 0; }
.usuario__cliente { font-weight: 600; overflow-wrap: anywhere; }
.usuario__creado { font-size: var(--t-rotulo); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-suave); }
.usuario__clave { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espacio-1) var(--espacio-2); align-items: end; margin: 0; padding-top: var(--espacio-2); border-top: 1px solid var(--linea); }
.usuario__clave .boton { justify-self: start; }
.usuario__nota { grid-column: 1 / -1; font-size: var(--t-chico); margin: 0; }
.usuario__desactivar { grid-column: 1 / -1; padding-top: var(--espacio-1); border-top: 1px solid var(--linea); }
.usuario__desactivar-abrir { cursor: pointer; font-weight: 600; color: var(--senal-texto); }
.usuario__desactivar[open] { display: grid; gap: var(--espacio-1); }
.usuario__desactivar-form { display: grid; gap: var(--espacio-1); margin: 0; }
.usuario__desactivar-form .boton { justify-self: start; }
@media (min-width: 56rem) {
  .admin { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); }
  .admin__lado { grid-column: 2; grid-row: 1; position: sticky; top: 5rem; }
  .admin__lista { grid-column: 1; grid-row: 1; }
  /* Clientes: la tabla tiene siete columnas, así que va a todo el ancho y el alta es una barra encima (nombre y botón en una fila) */
  .admin--ancho { grid-template-columns: minmax(0, 1fr); }
  .admin--ancho .admin__lado { grid-column: 1; grid-row: 1; position: static; }
  .admin--ancho .admin__lista { grid-column: 1; grid-row: 2; }
  .formulario-admin--fila { grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr) auto; align-items: end; column-gap: var(--espacio-3); }
  .formulario-admin--fila .aviso, .formulario-admin--fila .linea__notas { grid-column: 1 / -1; }
  .formulario-admin--fila .linea__cabeza { align-self: stretch; }
  .usuario { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); align-items: start; }
  .usuario--inactivo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 699px) {
  /* clientes y usuarios en el celular: formulario de ancho completo, una tarjeta por cliente (reglas de `.tabla`) y la clave debajo del usuario */
  .formulario-admin { padding: var(--espacio-2); }
  .formulario-admin .boton, .usuario__clave .boton { width: 100%; justify-self: stretch; }
  .usuario__clave { grid-template-columns: minmax(0, 1fr); }
  .admin__elegir .boton { width: 100%; }
  .usuario__desactivar-form .boton { width: 100%; justify-self: stretch; }
}
@media (prefers-reduced-motion: no-preference) {
  .formulario-admin, .usuario { animation: entrar 0.35s ease-out both; }
}
/* ADMIN-FIN */


/* ---------- tableta y celular: ajustes de piel (la estructura va al final de la hoja) ---------- */
@media (max-width: 1099px) {
  .panel--ficha { margin: 12px; box-shadow: var(--sombra-flota); }
}
@media (max-width: 699px) {
  :root { --t-texto: 1rem; --t-titulo: 2rem; --t-ficha: 2.25rem; --espacio-4: 2rem; --radio-panel: 22px; }
  .barra { gap: 0.25rem 0.625rem; margin: 8px 8px 0; padding: 0.5rem 0.75rem; border-radius: 24px; }
  .barra .barra__marca { order: 1; font-size: 1.375rem; }
  .barra .barra__cliente { order: 2; flex: 1 1 6rem; }
  .barra .barra__usuario { order: 3; margin-left: 0; }
  .barra .derivados { order: 4; }
  .barra .barra__nav--varias { order: 5; }
  .barra__usuario .boton--claro { min-height: 2.25rem; padding: 0.125rem 1rem; }
  .derivados__numero { font-size: 1.625rem; }
  .barra__enlace { padding: 0.25rem 0.75rem; font-size: 0.75rem; }
  .bandeja { gap: 8px; padding: 8px; }
  .panel--ficha { margin: 0; padding: 0 1rem 1.5rem; box-shadow: var(--sombra-tarjeta); }
  .filtros { padding: 0.875rem 0.875rem 0.5rem; }
  .fila__enlace { padding: 0.8125rem 1rem; }
  .chat__fila { padding: 0.875rem var(--espacio-2) 0; }
  .chat__fila--acciones { padding: 0.5rem var(--espacio-2) 0.625rem; }
  .chat__nombre { font-size: 1.75rem; }
  .chat__espera { margin: 0.125rem 0.75rem 0.625rem; padding: 0.5rem 1rem; }
  .mensajes { padding: 1rem; }
  .compositor { margin: 0 0.5rem; }
  .compositor__nota { padding: 0.375rem 1.25rem 0.75rem; }
  .elegir__boton { padding: var(--espacio-2) var(--espacio-3); flex-wrap: wrap; gap: 0.5rem var(--espacio-2); }
  .elegir__nombre { flex: 1 1 100%; font-size: 1.625rem; }
  .telefono { padding: var(--espacio-2) 0 var(--espacio-3); }
  .telefono__cabeza, .telefono .linea { margin: 0 var(--espacio-2); }
  .entrada { padding: var(--espacio-3) var(--espacio-2); }
  .entrada__formulario { padding: 1.5rem; }
}

/* ---------- movimiento: lento y suave, y sólo si la persona no pidió menos ---------- */
@media (prefers-reduced-motion: no-preference) {
  .entrada__formulario { animation: entrar 0.7s ease-out both; }
  .panel--lista { animation: entrar 0.6s ease-out both; }
  .panel--chat, .vacio, .linea { animation: entrar 0.6s 0.08s ease-out both; }
  .aparato { animation: entrar 0.6s 0.08s ease-out both; }
  .filtros-pantalla, .tabla-envoltorio, .simchat, .simficha, .recientes { animation: entrar 0.45s ease-out both; }
  .barra:has(.derivados--hay) .barra__punto { animation: halo 2.6s ease-out infinite; }
  @keyframes entrar { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: none; } }
  @keyframes halo { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--senal) 55%, transparent); } 100% { box-shadow: 0 0 0 0.75rem transparent; } }
  @keyframes destello { from { box-shadow: 0 0 0 4px color-mix(in srgb, var(--senal) 45%, transparent); } to { box-shadow: 0 0 0 0 transparent; } }
}

/* ==========================================================================
   ESTRUCTURA (cola) — lo responsivo y el movimiento reducido. Va AL FINAL de la hoja a propósito: lo que decide qué columnas se ven en
   cada ancho tiene que ganarle a cualquier regla de la piel de arriba.
   ========================================================================== */

@media (min-width: 56rem) {
  .entrada { grid-template-columns: 1.2fr 1fr; align-items: center; max-width: 72rem; margin: 0 auto; }
  .entrada__formulario { justify-self: end; }
}

/* una sola columna bajo 900 px: el teléfono de prueba, el simulador y el agente */
@media (max-width: 899px) {
  .telefono { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "cabeza" "linea" "aparato"; padding: var(--espacio-3) var(--espacio-2); gap: var(--espacio-3); }
  .telefono--abierto { grid-template-areas: "cabeza" "aparato" "linea"; }
  .telefono--abierto .telefono__texto { display: none; }
  .linea { max-width: none; }
  /* el simulador: una columna; con una prueba abierta, el chat va primero y lo que se prepara después */
  .simulador { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "cabeza" "nueva" "recientes"; gap: var(--espacio-3); padding: var(--espacio-3) var(--espacio-2); }
  .simulador--abierto { grid-template-areas: "cabeza" "chat" "ficha" "nueva" "recientes"; }
  .simulador__vacio { grid-area: auto; }
  .simulador__sin-prueba { display: none; }
  .simchat { position: static; }
  /* el agente: una columna; las pruebas debajo de la configuración y sin quedarse pegadas arriba */
  .agente, .casos { padding: var(--espacio-3) var(--espacio-2); }
  .agente__cuerpo { grid-template-columns: minmax(0, 1fr); gap: var(--espacio-3); }
  .prueba { position: static; }
  .fila-campo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fila-contacto { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* tableta: lista y chat; la ficha es un cajón que se abre desde el chat */
@media (max-width: 1099px) {
  .bandeja { grid-template-columns: minmax(16rem, 19rem) minmax(0, 1fr); }
  .panel--ficha { position: absolute; top: 0; right: 0; bottom: 0; z-index: 5; width: min(26rem, 92%); transform: translateX(105%); transition: transform 0.22s ease-out; }
  .bandeja[data-ficha="abierta"] .panel--ficha { transform: none; }
}
@media (min-width: 1100px) { .chat__ficha, .ficha__volver { display: none; } }
@media (min-width: 700px) { .chat__volver { display: none; } }

/* celular: una columna a la vez (lista, chat o ficha) */
@media (max-width: 699px) {
  .barra__nav { display: none; }
  .barra__nav--varias { display: flex; order: 5; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }      /* nueve secciones no caben en 390 px: una sola fila que se desliza (la quinta queda a medias y avisa) */
  .barra__nav--varias::-webkit-scrollbar { display: none; }
  .barra__nav--varias > .barra__enlace, .barra__nav--varias > .barra__grupo { flex: none; white-space: nowrap; }
  .barra__correo, .barra__usuario .etiqueta { display: none; }
  .barra__marca { order: 1; }
  .barra__usuario { order: 2; margin-left: auto; }
  .barra__cliente { order: 3; flex: 1 1 10rem; }
  .barra__selector { width: 100%; }
  .derivados { order: 4; flex: 1 1 100%; margin-left: 0; }
  .bandeja { grid-template-columns: minmax(0, 1fr); }
  .bandeja > .panel { grid-column: 1; grid-row: 1; }
  .bandeja[data-vista="lista"] .panel--chat,
  .bandeja[data-vista="lista"] .panel--ficha { display: none; }
  .bandeja[data-vista="chat"] .panel--lista { display: none; }
  .bandeja[data-vista="chat"][data-ficha="cerrada"] .panel--ficha { display: none; }
  .bandeja[data-vista="chat"][data-ficha="abierta"] .panel--chat { display: none; }
  .panel--ficha { position: static; width: auto; transform: none; }
  .campo__entrada, .compositor__texto, .ficha__anular .campo__entrada { font-size: 1rem; }
  .chat__fila { gap: var(--espacio-1); }
  .burbuja { max-width: 90%; }
  .ficha__dato { grid-template-columns: minmax(0, 6rem) minmax(0, 1fr); }
  .telefono__cabeza, .telefono .linea { width: auto; }
  .linea__par .campo__entrada { padding-left: 0.625rem; padding-right: 0.5rem; }      /* fecha y hora en dos columnas: sin este aire el valor se corta contra el icono */
  .telefono--abierto .telefono__cabeza { display: none; }               /* la barra ya dice dónde se está: el aparato sube y entra entero */
  .aparato { justify-self: stretch; width: auto; max-width: none; height: calc(100dvh - 11rem); min-height: 28rem; border-width: 1px 0; border-radius: 0; box-shadow: none; }
  .aparato__altavoz { display: none; }
  .globo { max-width: 90%; }
  .avisos { top: 4rem; right: var(--espacio-1); }
  /* el simulador: el chat ocupa el alto de la pantalla y el título cede el lugar a los mensajes */
  .simchat { height: calc(100dvh - 11rem); min-height: 28rem; }
  .simchat__cabecera { gap: var(--espacio-1) var(--espacio-2); padding: 0.625rem var(--espacio-2); }
  .simulador { padding: var(--espacio-2) var(--espacio-2) var(--espacio-3); }
  .simulador--abierto .pantalla__texto { display: none; }
  .simulador--abierto .pantalla__titulo { font-size: var(--t-titulo); }
  .reloj__hora { font-size: 1.75rem; }
  .aparato .compositor { margin: 0 0.5rem 0.5rem; }
  /* el agente, las versiones y los casos en el celular: sin desplazamiento horizontal, controles de ancho completo */
  .agente, .casos { padding: var(--espacio-2) var(--espacio-2) var(--espacio-3); gap: var(--espacio-2); }
  .agente__form, .prueba { padding: var(--espacio-2); }
  .fila-campo, .fila-contacto { grid-template-columns: minmax(0, 1fr); }
  .secciones__enlace { flex: 1 1 auto; justify-content: center; padding: 0.25rem 0.625rem; }
  .corrida__cifras { grid-template-columns: minmax(0, 1fr); }
  .dialogo__mensaje { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .agente__acciones .boton, .prueba__form .boton, .corrida__publicar .boton, .forzar__form .boton { width: 100%; }
  .agente__corto { max-width: none; }
  /* Leads y Alertas: el filtro en una columna, una tarjeta por lead (cada celda con su rótulo) y las alertas apiladas */
  .pantalla { padding: var(--espacio-3) var(--espacio-2); gap: var(--espacio-2); }
  .filtros-pantalla { padding: var(--espacio-2); }
  .filtros-pantalla .campo { flex: 1 1 100%; max-width: none; }
  .filtros-pantalla__acciones { width: 100%; }
  .tabla-envoltorio { overflow-x: visible; background: none; border: 0; border-radius: 0; box-shadow: none; }
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; }
  .tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabla tr { margin-bottom: var(--espacio-2); overflow: hidden; background-color: var(--papel-alto); border: 1px solid var(--vidrio-borde); border-radius: var(--radio-seccion); box-shadow: var(--sombra-tarjeta); }
  .tabla tbody tr.tabla__fila--espera { border-color: color-mix(in srgb, var(--senal) 40%, transparent); }
  .tabla th:first-child, .tabla td:first-child { position: static; }
  .tabla td:first-child, .tabla tbody tr.tabla__fila--espera td:first-child, .tabla tbody tr.tabla__fila--espera:hover td:first-child, .tabla tbody tr.tabla__fila--nueva td:first-child { box-shadow: none; }
  .tabla td { display: grid; grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr); gap: var(--espacio-1); min-width: 0; max-width: none; padding: 0.5rem 1rem; }
  .tabla td::before { content: attr(data-etiqueta); padding-top: 0.2rem; font-size: var(--t-rotulo); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-suave); }
  .tabla td.tabla__nombre { display: block; padding: 0.875rem 1rem; font-size: var(--t-medio); background-color: var(--papel-hondo); border-bottom: 1px solid var(--linea); }
  .tabla tbody tr.tabla__fila--espera td.tabla__nombre, .tabla tbody tr.tabla__fila--espera:hover td.tabla__nombre { background-color: var(--senal-suave); }
  .tabla td.tabla__nombre::before { content: none; }
  .tabla td.tabla__mono, .tabla td.tabla__estado { white-space: normal; }
  .tabla__recorte { display: block; -webkit-line-clamp: none; line-clamp: none; overflow: visible; }      /* la tarjeta lo muestra entero: no hay `title` en el teléfono */
  .tabla tbody tr:last-child td { border-bottom: 1px solid var(--linea); }
  .tabla tbody tr td:last-child { border-bottom: 0; }
  .alerta { grid-template-columns: minmax(0, 1fr); }
  .alerta__marcar .boton { width: 100%; }
}

/* movimiento: sólo si la persona no pidió menos */
@media (prefers-reduced-motion: reduce) {
  .burbuja, .boton, .elegir__boton, .panel--ficha { transition: none; }
  .burbuja.htmx-added { opacity: 1; transform: none; }
}