/*
 * PANEL DE ADMINISTRACION — mi-admin.musurit.com
 *
 * Los tokens salen tal cual de MARCA.md §9. Las reglas que manda DISENO.md y que ordenan
 * todo lo de abajo:
 *
 *  - El rojo #AD2D2E es ACENTO: pills, bordes, el numero que importa. Nunca un fondo grande.
 *  - Poco texto. El NUMERO es el mensaje: Space Grotesk grande, la unidad chica al lado.
 *  - Badges en MAYUSCULA, Space Mono, con tracking.
 *  - Ambar = aviso, verde = confirmacion, rojo = falla, gris = sin dato.
 *
 * OSCURO: TRES ESTADOS —SISTEMA, CLARO, OSCURO— y los elige una persona en el selector del
 * header (ver `.modo`). Se invierten los NEUTROS y nada mas; el acento pasa de #AD2D2E a
 * #C73A3B, que es el "rojo bright" del mismo manual, porque el primario sobre fondo oscuro no
 * llega al contraste AA. Como conviven la eleccion y el sistema esta escrito abajo, arriba de
 * los dos bloques oscuros.
 */

:root {
  /* neutros */
  --paper: #ffffff;
  --paper-2: #f6f6f8;
  --paper-3: #fbfbfc;
  --line: #e6e6ea;
  --line-soft: #eeeef1;
  --head: #1a1a1c;
  --text: #3a3a3f;
  --muted: #6a6b70;
  --faint: #6e6e75;
  /* marca */
  --brand-gray: #565757;
  --red: #ad2d2e;
  --red-deep: #8e2526;
  --red-bright: #c73a3b;
  --red-tint: rgba(173, 45, 46, 0.08);
  --red-tint-2: rgba(173, 45, 46, 0.14);
  /*
   * LA FILA DEL CORPO (Sergio, 03/10/2026: *"si se contacta algun corpo, quiero que la fila
   * este resaltada con algun tono de rojo"*). Un tinte MAS SUAVE que `--falla-bg` (8%) a
   * proposito: un badge de falla adentro de una fila corpo tiene que seguir leyendose como
   * falla. Lo que dice "corpo" es la barra roja de 3px a la izquierda y el badge CORPO; el
   * tinte acompaña. Se apila sobre `--paper` (ver `#filas tr.corpo`). Medido, claro:
   * reposo #FAF2F2 —texto 10.3:1, nombre 15.8:1, gris 4.8:1, rojo 6.0:1, barra 6.0:1—;
   * hover #F7EAEA —texto 9.6:1, gris 4.5:1—.
   */
  --corpo-tint: rgba(173, 45, 46, 0.06);
  --corpo-tint-hover: rgba(173, 45, 46, 0.1);
  /*
   * EL ROJO CUANDO ES TEXTO, QUE NO ES EL MISMO QUE CUANDO ES FONDO.
   *
   * En claro son el mismo color: #AD2D2E sobre blanco da 6.6:1 y pasa AA de sobra. En OSCURO
   * se separan, y por eso este token existe: `--red` (#C73A3B) esta elegido para llevar texto
   * BLANCO encima (5.1:1, el boton primario), y como texto sobre el fondo del panel se queda
   * en 3.3:1 — abajo del 4.5 que pide AA para una etiqueta en Space Mono de 11px, que es de
   * lo que esta hecha media barra de pestanas. `--red-txt` es el mismo acento un tono mas
   * claro (#E05E5F, 5.3:1 sobre #121214) y va en todo lo que es LETRA roja; `--red` se queda
   * para fondos, barras, rellenos y anillos de foco.
   */
  --red-txt: #ad2d2e;
  --red-txt-hover: #8e2526;
  /* estados */
  --ok-bg: #e8f5ec;
  --ok-borde: #bfe3cc;
  --ok-txt: #0f6b36;
  --aviso-bg: #fef3c7;
  --aviso-borde: #fde68a;
  --aviso-txt: #92400e;
  /*
   * EL AMBAR CUANDO ES BARRA, que no es el mismo que cuando es letra. `--aviso-txt` (#92400E)
   * esta elegido para LEERSE sobre `--aviso-bg`, y a 6px de alto sin texto encima se ve marron
   * —de lejos, el rojo de marca—, justo la confusion que DISENO.md §2 evita. Este es el ambar
   * de verdad, y solo va en rellenos (hoy, el riel del chat por widget).
   */
  --aviso-barra: #d97706;
  --falla-bg: rgba(173, 45, 46, 0.08);
  --falla-borde: rgba(173, 45, 46, 0.24);
  --falla-txt: #8e2526;
  --nada-bg: #f1f1f4;
  --nada-borde: #e2e2e7;
  --nada-txt: #6a6b70;
  /*
   * LA LINEA QUE SEPARA DE VERDAD.
   *
   * `--line` (#E6E6EA) y `--line-soft` (#EEEEF1) son divisores de UN pixel entre cosas del
   * mismo tema: las filas de una tabla, los eventos de la ficha. `--line-fuerte` es el corte
   * entre DOS temas —el bloque CHATS y la linea de tiempo, un dia y el siguiente— y va a 2px:
   * a un pixel de #E6E6EA sobre blanco no se lo ve como un corte, se lo ve como el borde de
   * abajo de la ultima fila (que es exactamente lo que era). Medido: 1.53:1 contra el papel en
   * claro y 1.73:1 en oscuro, contra 1.24 y 1.33 de `--line`. No es texto ni un control, asi
   * que no le aplica el 3:1 de WCAG 1.4.11 —una raya mas oscura que eso, de 2px y cruzando el
   * cajon entero, seria un renglon negro—: lo que tiene que hacer es leerse como un corte.
   */
  --line-fuerte: #d0d0d8;
  /* La franja de sección (DISEÑO.md §2): gris clarito con letras rojas, 5,29:1. */
  --franja-bg: #e6e6ea;
  --franja-txt: #ad2d2e;
  --franja-sub: #565757;
  /*
   * LA PIZARRA (DISEÑO.md §2, 29/09/2026): el color del AVISO que no es una falla. En el panel la
   * usa el chat propio desde el 09/10/2026 para lo que ve SOLO EL EQUIPO —las marcas del tramo de
   * la IA ("ATENDIÓ LA IA", "PASÓ AL OPERADOR") y las notas internas—: avisa "esto no lo leyó el
   * cliente" sin el ambar de los estados (que acá dice "alguien espera") ni el rojo (falla). Son
   * los valores medidos de la app: texto #34506E sobre el tinte, 7,42:1; iconos #4A6A8C, 5,01:1.
   */
  --pz-bg: #eef2f7;
  --pz-borde: #d3dde8;
  --pz-txt: #34506e;
  --pz-icono: #4a6a8c;
  /*
   * LOS DOS CANALES QUE TIENEN MARCA: WHATSAPP Y EL WEBCHAT DE BOTMAKER.
   *
   * Son los unicos colores de este panel que NO salen de MARCA.md, y estan a proposito: un
   * badge de canal no dice un estado (para eso estan verde/ambar/rojo), dice POR DONDE entro
   * la conversacion, y eso lo contesta antes el color de la plataforma que cualquier palabra.
   * El resto de los canales (Instagram, mail, Telegram) sigue en el badge neutro: pintar seis
   * marcas distintas en una columna seria una feria, y las dos que se miran todos los dias
   * —"¿me escribio por la app o por WhatsApp?"— son estas.
   *
   * DE DONDE SALEN LOS DOS HEX:
   *  - `#25D366` es el verde de WhatsApp de siempre. Botmaker, que es quien nos manda las
   *    conversaciones, lo tiene en su propio CSS como `--wsp: #25d066` (un digito de
   *    diferencia); se usa el oficial.
   *  - `#304FFE` es el azul de Botmaker, leido de su hoja de estilos publica
   *    (`es-botmaker.webflow.shared…css`, variable `--blue-em`, 493 usos: es EL color de la
   *    marca, no un acento suelto). Por eso no se usa el `#1E5EFF` de reserva.
   *
   * EL TINTE ES 15% Y EL TEXTO NO ES EL MISMO EN LOS DOS TEMAS, por lo mismo que `--red-txt`
   * mas arriba: un badge es Space Mono de ~10px y AA le pide 4.5:1.
   *  - claro, WhatsApp: el `#128C7E` de la marca sobre el tinte al 15% mide **3.7:1** y no
   *    pasa. Va `#075E54` —el verde oscuro del header clasico de WhatsApp, o sea la MISMA
   *    marca— que mide **6.8:1**.
   *  - claro, webchat: `#304FFE` sobre su tinte mide **4.6:1** y pasa: queda el azul crudo.
   *  - oscuro, WhatsApp: `#5FE39A` sobre el tinte apoyado en `--paper`, **8.9:1**.
   *  - oscuro, webchat: el `#304FFE` crudo se cae a **2.9:1** (es un azul profundo sobre un
   *    fondo casi negro). Va `#A7B6FF`, el mismo azul aclarado, **8.6:1**.
   * El tinte se apila SIEMPRE sobre `--paper` con el doble fondo de `.modo-op` (ver abajo):
   * si no, el mismo badge da un contraste en la tabla (`--paper`) y otro adentro de una
   * tarjeta de la ficha (`--paper-2`), y una de las dos medidas seria mentira.
   *
   * EL TERCERO, CENTRAL CHAT (`--ce-*`, 30/09/2026): *"quiero que se diferencie tambien los
   * que usan Central (color violeta)"* (Sergio). Central no tiene un color de marca que
   * copiar, asi que es el violeta que pidio: `#A855F7` para el tinte (al 18%) y el borde. El
   * primer intento, `#8B5CF6` al 15%, daba un relleno casi igual al lavanda de WEBCHAT (el azul
   * de Botmaker, `#304FFE`, ya es casi indigo): este tira a purpura y se separa a simple vista.
   * Mediciones, texto sobre el tinte apoyado en --paper:
   *  - claro: `#7E22CE`, **5.6:1** sobre `--paper` y **5.2:1** sobre `--paper-2`.
   *  - oscuro: `#D8B4FE`, **8.7:1** sobre `--paper`.
   */
  --wa-bg: rgba(37, 211, 102, 0.15);
  --wa-borde: rgba(37, 211, 102, 0.38);
  --wa-txt: #075e54;
  --bm-bg: rgba(48, 79, 254, 0.15);
  --bm-borde: rgba(48, 79, 254, 0.38);
  --bm-txt: #304ffe;
  --ce-bg: rgba(168, 85, 247, 0.18);
  --ce-borde: rgba(168, 85, 247, 0.5);
  --ce-txt: #7e22ce;
  /*
   * LA APP (02/10/2026): grafito, con el telefono en rojo Musurit. No va en tinte rojo porque
   * en este panel el tinte rojo es FALLA (`.badge.falla`): "estuvo en la app" no es un problema.
   * El rojo queda de acento, en el icono (MARCA §2). Texto `--head` sobre el tinte: 16:1.
   */
  --ap-bg: rgba(26, 26, 28, 0.06);
  --ap-borde: rgba(26, 26, 28, 0.32);
  --ap-txt: #1a1a1c;
  --ap-icono: #ad2d2e;
  /* forma */
  --maxw: 1180px;
  --r: 18px;
  --r-sm: 12px;
  /* tipografia */
  --f-display: "Space Grotesk", system-ui, sans-serif;
  --f-body: "Hanken Grotesk", system-ui, sans-serif;
  --f-mono: "Space Mono", ui-monospace, monospace;
  --sombra: 0 24px 44px -30px rgba(20, 20, 30, 0.35);
  /*
   * EL HEADER, CON FONDO PROPIO (Sergio, 16/10/2026: "el header de arriba no se distingue de la
   * parte principal, le podemos agregar algún fondo o sombra o algo que diferencie fuertemente de
   * la ventana principal"). Es TINTA con letra clara —MARCA.md §2 pasa a tinta/grafito lo que no se
   * gana el rojo— y una sombra hacia abajo, sin rojo. Cambian con el tema SOLO el fondo, el filo y
   * la sombra (`--barra-bg`, `--barra-borde`, `--barra-sombra`); el resto es el mismo en los dos:
   * un header oscuro con letra clara. En claro el fondo es tinta (#1E1F24) contra una pagina blanca;
   * en oscuro la pagina ya es casi negra (#121214), asi que el header sube a grafito (#2C2D37),
   * con filo claro, y se separa por ser MAS CLARO. Medido con la formula WCAG (letra sobre el fondo, claro/oscuro):
   * nombre #F3F3F6 14.9/12.3:1, texto #CFD0D6 10.7/8.9:1, gris #B4B5BC 8.0/6.7:1, tenue #A3A4AC
   * 6.6/5.5:1, rojo de letra #F08A8B 6.8/5.7:1 (sobre el tinte de la seccion elegida: 5.5/4.6:1; el
   * tenue sobre las capsulas de 7 %: 5.4/4.4:1, solo en el rol y los rotulos, que van sobre el fondo).
   * Adentro, `.barra-in` redefine los tokens neutros con estos valores (ver `.barra-in`): todo lo
   * que ya estaba escrito con `var(--paper)`, `var(--muted)`... se lee bien sin tocarlo.
   */
  --barra-bg: #1e1f24;
  --barra-borde: #0e0e11;
  --barra-sombra: 0 10px 26px -10px rgba(10, 10, 20, 0.55), 0 2px 5px rgba(10, 10, 20, 0.2);
  --barra-menu-sombra: 0 22px 40px -16px rgba(10, 10, 20, 0.6), 0 2px 8px rgba(10, 10, 20, 0.3);
  --barra-head: #f3f3f6;
  --barra-text: #cfd0d6;
  --barra-muted: #b4b5bc;
  --barra-faint: #a3a4ac;
  --barra-chip: rgba(255, 255, 255, 0.07);
  --barra-line: rgba(255, 255, 255, 0.18);
  --barra-line-soft: rgba(255, 255, 255, 0.1);
  --barra-rojo: #c73a3b;
  --barra-rojo-txt: #f08a8b;
  --barra-rojo-txt-hover: #f6a9aa;
  --barra-tint: rgba(224, 94, 95, 0.18);
  --barra-tint-2: rgba(224, 94, 95, 0.45);
}

/*
 * EL OSCURO VIVE EN DOS SELECTORES, Y LA COPIA NO SOBRA.
 *
 * `[data-theme="dark"]` es la ELECCION EXPLICITA del selector del header (SISTEMA · CLARO ·
 * OSCURO, ver `.modo`). El atributo lo escribe un script inline de `index.html` ANTES de que
 * la pagina pinte: puesto desde `app.js` —al final del body— la pantalla ya se dibujo blanca y
 * el que eligio oscuro se come un fogonazo en cada F5.
 *
 * El `@media` es el estado SISTEMA, y no es un resto de antes: es lo que anda si el JS no
 * corre, y es lo unico que se entera cuando el sistema operativo cambia de tema solo a la
 * tarde. Va con `:not([data-theme="light"])` para que CLARO gane tambien adentro de una
 * maquina configurada en oscuro; sin ese `:not`, la eleccion explicita solo podria empujar
 * para el lado oscuro y "CLARO" no haria nada, que es la mitad de un selector.
 *
 * Las dos listas son LA MISMA y se tocan JUNTAS. CSS sin build no tiene forma de escribir el
 * bloque una sola vez y aplicarlo desde dos selectores cuando uno de ellos esta adentro de un
 * `@media` (y `light-dark()` no alcanza: `--sombra` no es un color, es un `box-shadow`).
 *
 * `color-scheme` va con la eleccion para que los controles del navegador —los `select`, la
 * barra de scroll, el cursor de los campos— acompanen. En el estado SISTEMA lo declara el
 * `<meta name="color-scheme" content="light dark">` del HTML.
 */
:root[data-theme='light'] {
  color-scheme: light;
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --paper: #121214;
  --paper-2: #17181b;
  --paper-3: #1c1d21;
  --line: #2a2b31;
  --line-soft: #232429;
  --head: #f3f3f6;
  --text: #cfd0d6;
  --muted: #9b9ca4;
  --faint: #8d8e96;
  --red: #c73a3b;
  --red-deep: #ad2d2e;
  --red-bright: #e05e5f;
  --red-tint: rgba(199, 58, 59, 0.14);
  --red-tint-2: rgba(199, 58, 59, 0.3);
  /* Corpo, oscuro: reposo #241618 (texto 11.3:1, gris 6.4:1, rojo 4.9:1, barra 3.4:1); hover #33191B (texto 10.5:1, rojo 4.6:1). */
  --corpo-tint: rgba(199, 58, 59, 0.1);
  --corpo-tint-hover: rgba(199, 58, 59, 0.18);
  --red-txt: #e05e5f;
  --red-txt-hover: #f08a8b;
  --ok-bg: rgba(64, 176, 112, 0.14);
  --ok-borde: rgba(64, 176, 112, 0.32);
  --ok-txt: #6fd39c;
  --aviso-bg: rgba(253, 230, 138, 0.12);
  --aviso-borde: rgba(253, 230, 138, 0.3);
  --aviso-txt: #f5d485;
  --aviso-barra: #f5d485;
  --falla-bg: rgba(224, 94, 95, 0.14);
  --falla-borde: rgba(224, 94, 95, 0.32);
  --falla-txt: #f08a8b;
  --nada-bg: rgba(255, 255, 255, 0.05);
  --nada-borde: rgba(255, 255, 255, 0.1);
  --nada-txt: #9b9ca4;
  --line-fuerte: #3c3d45;
  /* En oscuro el rojo de letra (#e05e5f) sobre gris da 3,99:1: va el claro, 6,34:1. */
  --franja-bg: #24252b;
  --franja-txt: #f08a8b;
  --franja-sub: #9b9ca4;
  /* La pizarra en oscuro: el mismo azul gris aclarado (sobre el tinte: texto 9,8:1, icono 6,6:1). */
  --pz-bg: rgba(120, 160, 205, 0.12);
  --pz-borde: rgba(120, 160, 205, 0.32);
  --pz-txt: #c3d4e8;
  --pz-icono: #93b0cf;
  --wa-bg: rgba(37, 211, 102, 0.15);
  --wa-borde: rgba(37, 211, 102, 0.34);
  --wa-txt: #5fe39a;
  --bm-bg: rgba(48, 79, 254, 0.15);
  --bm-borde: rgba(48, 79, 254, 0.45);
  --bm-txt: #a7b6ff;
  --ce-bg: rgba(168, 85, 247, 0.18);
  --ce-borde: rgba(168, 85, 247, 0.5);
  --ce-txt: #d8b4fe;
  --ap-bg: rgba(243, 243, 246, 0.08);
  --ap-borde: rgba(243, 243, 246, 0.32);
  --ap-txt: #f3f3f6;
  --ap-icono: #f08a8b;
  --sombra: 0 24px 44px -30px rgba(0, 0, 0, 0.7);
  --barra-bg: #2c2d37;
  --barra-borde: #54555f;
  --barra-sombra: 0 12px 28px -8px rgba(0, 0, 0, 0.85), 0 2px 6px rgba(0, 0, 0, 0.5);
  --barra-menu-sombra: 0 22px 40px -14px rgba(0, 0, 0, 0.9), 0 2px 8px rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #121214;
    --paper-2: #17181b;
    --paper-3: #1c1d21;
    --line: #2a2b31;
    --line-soft: #232429;
    --head: #f3f3f6;
    --text: #cfd0d6;
    --muted: #9b9ca4;
    --faint: #8d8e96;
    --red: #c73a3b;
    --red-deep: #ad2d2e;
    --red-bright: #e05e5f;
    --red-tint: rgba(199, 58, 59, 0.14);
    --red-tint-2: rgba(199, 58, 59, 0.3);
    --corpo-tint: rgba(199, 58, 59, 0.1);
    --corpo-tint-hover: rgba(199, 58, 59, 0.18);
    --red-txt: #e05e5f;
    --red-txt-hover: #f08a8b;
    --ok-bg: rgba(64, 176, 112, 0.14);
    --ok-borde: rgba(64, 176, 112, 0.32);
    --ok-txt: #6fd39c;
    --aviso-bg: rgba(253, 230, 138, 0.12);
    --aviso-borde: rgba(253, 230, 138, 0.3);
    --aviso-txt: #f5d485;
    --aviso-barra: #f5d485;
    --falla-bg: rgba(224, 94, 95, 0.14);
    --falla-borde: rgba(224, 94, 95, 0.32);
    --falla-txt: #f08a8b;
    --nada-bg: rgba(255, 255, 255, 0.05);
    --nada-borde: rgba(255, 255, 255, 0.1);
    --nada-txt: #9b9ca4;
    --line-fuerte: #3c3d45;
  /* En oscuro el rojo de letra (#e05e5f) sobre gris da 3,99:1: va el claro, 6,34:1. */
  --franja-bg: #24252b;
  --franja-txt: #f08a8b;
  --franja-sub: #9b9ca4;
  /* La pizarra en oscuro: el mismo azul gris aclarado (sobre el tinte: texto 9,8:1, icono 6,6:1). */
  --pz-bg: rgba(120, 160, 205, 0.12);
  --pz-borde: rgba(120, 160, 205, 0.32);
  --pz-txt: #c3d4e8;
  --pz-icono: #93b0cf;
    --wa-bg: rgba(37, 211, 102, 0.15);
    --wa-borde: rgba(37, 211, 102, 0.34);
    --wa-txt: #5fe39a;
    --bm-bg: rgba(48, 79, 254, 0.15);
    --bm-borde: rgba(48, 79, 254, 0.45);
    --bm-txt: #a7b6ff;
    --ce-bg: rgba(168, 85, 247, 0.18);
    --ce-borde: rgba(168, 85, 247, 0.5);
    --ce-txt: #d8b4fe;
    --ap-bg: rgba(243, 243, 246, 0.08);
    --ap-borde: rgba(243, 243, 246, 0.32);
    --ap-txt: #f3f3f6;
    --ap-icono: #f08a8b;
    --sombra: 0 24px 44px -30px rgba(0, 0, 0, 0.7);
    --barra-bg: #2c2d37;
    --barra-borde: #54555f;
    --barra-sombra: 0 12px 28px -8px rgba(0, 0, 0, 0.85), 0 2px 6px rgba(0, 0, 0, 0.5);
    --barra-menu-sombra: 0 22px 40px -14px rgba(0, 0, 0, 0.9), 0 2px 8px rgba(0, 0, 0, 0.5);
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--f-body);
  /*
   * 1rem Y NO 16px (10/10/2026): el TAMAÑO DEL TEXTO del header cambia el `font-size` del `<html>`
   * (80 a 120 %) y todo lo que esta en rem lo sigue. Con 16px el cuerpo quedaba fijo.
   */
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--head);
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

[hidden] {
  display: none !important;
}

/* --- Barra superior ------------------------------------------------------ */

/*
 * `--alto-menu` vale CERO desde el 09/10/2026: el menu ya no es una franja aparte, vive adentro
 * del header y su alto esta en `--alto-barra` (lo mide app.js). Queda la variable porque la usan
 * los `calc` de lo que se pega debajo (la foto de Comprobantes, el alto del Chat), y asi sus
 * valores de respaldo (`100px`) no se aplican nunca.
 */
:root {
  --alto-menu: 0px;
}

.barra {
  border-bottom: 1px solid var(--barra-borde);
  background: var(--barra-bg);
  box-shadow: var(--barra-sombra);
  position: sticky;
  top: 0;
  z-index: 20;
}

/*
 * EL CARTEL GIGANTE DE ANTHROPIC (sin credito / clave que no anda). Ver el comentario en
 * index.html: va adentro del header sticky, ocupa todo el ancho y no se cierra. Es el unico
 * fondo rojo grande del panel, y es a proposito: rojo = falla, y esta es la que paro la
 * lectura de comprobantes durante dos dias sin que nadie se enterara.
 *
 * El rojo es `--red` en los dos temas (#AD2D2E claro, #C73A3B oscuro): los dos estan elegidos
 * para llevar texto BLANCO encima con contraste AA.
 */
.ia-alerta {
  background: var(--red);
  color: #ffffff;
  border-top: 1px solid var(--red-deep);
}

.ia-alerta-in {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding-top: 18px;
  padding-bottom: 20px;
}

.ia-alerta-icono {
  flex: none;
  width: 52px;
  height: 52px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ia-alerta-texto {
  min-width: 0;
}

.ia-alerta-titulo {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.ia-alerta-detalle {
  margin: 8px 0 14px;
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  line-height: 1.4;
}

/* La accion: pill blanca sobre el rojo, como los botones del manual. */
.ia-alerta-accion {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--red-deep);
  font-weight: 600;
  text-decoration: none;
}

.ia-alerta-accion:hover {
  text-decoration: underline;
}

.ia-alerta-accion:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}

.ia-resuelto {
  background: var(--ok-bg);
  color: var(--ok-txt);
  border-top: 1px solid var(--ok-borde);
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}

.ia-resuelto > .wrap {
  padding-top: 7px;
  padding-bottom: 7px;
}

/* El 429 seguido (11/10/2026): el mismo renglon, en ambar. Avisa, no alarma. */
.ia-resuelto.ia-limite {
  background: var(--aviso-bg);
  color: var(--aviso-txt);
  border-top-color: var(--aviso-borde);
}

@media (max-width: 640px) {
  .ia-alerta-in {
    gap: 12px;
    padding-top: 14px;
    padding-bottom: 16px;
  }

  .ia-alerta-icono {
    width: 36px;
    height: 36px;
  }

  .wrap.ia-alerta-in,
  .ia-resuelto > .wrap {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/*
 * UN SOLO HEADER (Sergio, 09/10/2026: "integrar el menú y submenú al header dejando solo un
 * header, para maximizar tamaño de ventanas").
 *
 * Tres columnas: la marca, el MENU (grupos y, a su derecha o debajo, las secciones del grupo
 * abierto) y lo de la cuenta (tema, nombre, Salir). Una grilla y no un flex con `wrap`: si las
 * secciones no entran al lado de los grupos bajan a un segundo renglon ADENTRO de la columna del
 * medio, y la marca y la cuenta se quedan arriba, alineadas con los grupos. Con un flex, al
 * partirse, la cuenta quedaba centrada entre los dos renglones o se iba abajo de todo.
 *
 * A TODO EL ANCHO (sin el tope de 1180 de `.wrap`): el menu de Ajustes son siete secciones y no
 * entraban en 1180 al lado de los grupos. El contenido sigue centrado en 1180 abajo (el Chat ya
 * iba a todo el ancho).
 *
 * `--alto-barra` lo mide app.js (`medirMenu`) y lo usa lo que va pegado abajo del header y el
 * alto de las tres columnas del Chat. El renglon de arriba mide 56 px; con las secciones abajo,
 * ~86. Antes eran 62 + ~100 del menu.
 */
/*
 * LOS TOKENS NEUTROS, REDEFINIDOS ADENTRO DEL HEADER (16/10/2026). La marca, los grupos, las
 * secciones, el ☰, el nombre y el desplegable de la cuenta estan escritos con `--paper`, `--head`,
 * `--muted`, `--line`...: aca valen lo del header oscuro (`--barra-*`) y no hace falta tocar una sola
 * de esas reglas. `--red` tambien: el anillo de foco y el borde de la seccion elegida sobre tinta
 * piden el rojo claro de la marca (#C73A3B). `.ia-alerta` queda AFUERA de `.barra-in`: su rojo y
 * su fondo no cambian. `color-scheme: dark` es para que el `select` y su lista sean oscuros.
 */
.barra-in {
  --paper: var(--barra-bg);
  --paper-2: var(--barra-chip);
  --paper-3: var(--barra-chip);
  --line: var(--barra-line);
  --line-soft: var(--barra-line-soft);
  --head: var(--barra-head);
  --text: var(--barra-text);
  --muted: var(--barra-muted);
  --faint: var(--barra-faint);
  --red: var(--barra-rojo);
  --red-txt: var(--barra-rojo-txt);
  --red-txt-hover: var(--barra-rojo-txt-hover);
  --red-tint: var(--barra-tint);
  --red-tint-2: var(--barra-tint-2);
  color-scheme: dark;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 18px;
  max-width: none;
  min-height: 56px;
}

.barra-in > .marca {
  grid-column: 1;
  align-self: start;
  display: flex;
  align-items: center;
  height: 56px;
}

.barra-in > .barra-derecha {
  grid-column: 3;
  align-self: start;
  height: 56px;
}

.marca {
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--head);
}

.marca b {
  color: var(--red-txt);
}

.barra-derecha {
  display: flex;
  align-items: center;
  gap: 12px;
}

.usuario {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/*
 * EL NOMBRE Y EL ROL, Y LA PUERTA A "TU CUENTA" (roles, 06/10/2026).
 *
 * Era el `.usuario` de arriba, texto suelto. Ahora es un boton y tiene que parecerlo sin
 * competir con el selector de tema ni con SALIR: la misma letra mono gris de siempre, adentro
 * de una capsula que se dibuja recien al pasar el mouse (borde y `--paper-3`, como `.volver`).
 * Abierta TU CUENTA se marca como la pestaña elegida del menu —tinte rojo, letra roja—, que es
 * lo que es: la "pestaña" de esa pagina.
 *
 * El ROL va al lado y mas tenue (`--faint`): es un dato del nombre, no otro boton.
 */
.quien {
  position: relative;
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 6px 12px;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

/* Desde el 16/10/2026 abre un desplegable: la capsula se dibuja siempre (sin mouse no hay hover). */
.quien:hover,
.quien[aria-expanded="true"] {
  color: var(--head);
  border-color: var(--red-tint-2);
}

.quien[aria-current="page"] {
  color: var(--red-txt);
  border-color: var(--red-tint-2);
  background: linear-gradient(var(--red-tint), var(--red-tint)), var(--paper);
}

.quien svg {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/*
 * EL NOMBRE SE ACHICA ANTES QUE EMPUJAR. `nombre.apellido` en mayusculas y con tracking no
 * entra al lado del tema y de SALIR en un telefono: el boton cede ancho (`min-width: 0` en la
 * cadena de flex, de `.barra-derecha` para abajo) y el nombre termina en "…" — el entero esta
 * en TU CUENTA. El tema, SALIR y la marca no ceden (`flex: none`).
 */
.barra-derecha {
  min-width: 0;
}

.marca {
  flex: none;
}

.quien-nombre {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 26ch;
}

.quien-rol {
  color: var(--faint);
  font-size: 0.62rem;
  white-space: nowrap;
}

.quien-rol::before {
  content: "· ";
}

.quien[aria-current="page"] .quien-rol {
  color: inherit;
}

.quien .quien-chevron {
  width: 13px;
  height: 13px;
  margin-left: -1px;
  transition: transform 0.18s ease;
}

.quien[aria-expanded="true"] .quien-chevron {
  transform: rotate(180deg);
}

/* Sin sesion el boton dice APARIENCIA y lleva la luna; con sesion, la persona. */
.quien .quien-icono-tema,
body.con-sesion .quien .quien-icono-cuenta {
  display: inline;
}

.quien .quien-icono-cuenta,
body.con-sesion .quien .quien-icono-tema {
  display: none;
}

/*
 * EL DESPLEGABLE DE LA CUENTA (16/10/2026, ver index.html). Cuelga del borde de abajo del header
 * —el ancla es `.barra-in`, que es `relative`— y alineado a la derecha, con el mismo fondo oscuro
 * y los mismos tokens del header: es una extension de la barra, no otra tarjeta. Una columna:
 * titulo (nombre y rol), TU CUENTA, tema, tamaño del texto y Salir.
 */
.cuenta {
  display: flex;
  align-items: center;
  min-width: 0;
}

.cuenta-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 24px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 320px;
  max-width: calc(100vw - 32px);
  padding: 16px;
  background: var(--paper);
  color: var(--text);
  border: 1px solid var(--barra-borde);
  border-radius: var(--r-sm);
  box-shadow: var(--barra-menu-sombra);
}

/* Un filo claro arriba: en el oscuro, donde el borde casi no se ve, es lo que dibuja el borde. */
.cuenta-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--line-soft);
  pointer-events: none;
}

/* Lo que es de la sesion no existe sin ella: queda solo el tema. */
body:not(.con-sesion) [data-solo-sesion] {
  display: none;
}

.cuenta-cab {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}

.cuenta-cab-nombre {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--head);
  overflow-wrap: anywhere;
}

.cuenta-cab-rol {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

.cuenta-ir {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 14px;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--head);
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.cuenta-ir:hover {
  border-color: var(--red-tint-2);
}

.cuenta-ir[aria-current="page"] {
  color: var(--red-txt);
  border-color: var(--red-tint-2);
  background: linear-gradient(var(--red-tint), var(--red-tint)), var(--paper);
}

.cuenta-ir svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cuenta-fila {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
}

.cuenta-rotulo {
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Adentro del desplegable las tres capsulas del tema se reparten el ancho, con sus palabras. */
.cuenta-menu .modo {
  width: 100%;
}

.cuenta-menu .modo-op {
  flex: 1 1 0;
  justify-content: center;
  padding: 7px 8px;
}

.cuenta-menu .texto-tam {
  width: 100%;
  height: 36px;
  padding: 0 6px 0 12px;
}

.cuenta-menu .texto-tam select {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  font-size: 0.72rem;
  color: var(--head);
}

.cuenta-salir {
  width: 100%;
}

.cuenta-salir:hover {
  border-color: var(--red-tint-2);
}

@media (max-width: 640px) {
  .cuenta-menu {
    right: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .quien .quien-chevron {
    transition: none;
  }
}

/*
 * LO QUE EL ROL NO DEJA HACER NO SE DIBUJA (roles, 06/10/2026). Lo pone `aplicarRol` en
 * app.js sobre los controles marcados con `data-permiso` / `data-permiso-falta`. Es un
 * atributo propio con `!important` y no el `hidden` de siempre porque el `hidden` de esos
 * controles ya lo maneja cada pantalla (ENTRAR COMO EL PROSPECTO se esconde sin lead): asi el
 * rol gana siempre, lo pinte quien lo pinte.
 */
[data-sin-permiso] {
  display: none !important;
}

/* --- El selector de tema: SISTEMA · CLARO · OSCURO ------------------------ */

/*
 * TRES ESTADOS, NO UN INTERRUPTOR DE DOS.
 *
 * "Sistema" no es lo mismo que "claro": es "seguime el tema de la maquina", que es lo que
 * hace la mayoria de la gente que nunca tocó esto y lo que tiene que poder RECUPERAR el que
 * probó los otros dos. Un toggle de dos posiciones no tiene forma de volver ahi.
 *
 * Son tres capsulas y no un boton que cicla porque el que cicla obliga a apretar hasta ver
 * que pasa: el estado no se lee, se descubre. Acá los tres estados estan a la vista y el
 * elegido es el que tiene el acento, igual que la pestana activa de la barra de abajo.
 *
 * Es el mismo patron que las capsulas de tema de Push (`.tema`): un `radio` de verdad
 * escondido adentro de un `<label>`. Sale gratis lo que importa —las flechas mueven entre
 * opciones, el lector de pantalla anuncia "opcion 2 de 3", el foco es nativo— sin una linea
 * de JS de teclado.
 */
.modo {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-3);
}

.modo-op {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

/* El radio existe y no se ve; lo que se ve es la capsula (igual que en `.tema`). */
.modo-op input {
  position: absolute;
  inset: 0 auto auto 0;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
}

/* Iconos line-art de MARCA.md §6: contorno, `currentColor`, nada de emoji. */
.modo-op svg {
  width: 15px;
  height: 15px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.modo-op span {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.modo-op:hover {
  color: var(--head);
}

/*
 * EL TINTE SE APILA SOBRE `--paper`, NO SOBRE EL `--paper-3` DEL GRUPO, Y ESO NO ES COSMETICO.
 *
 * `--red-tint` es translucido, asi que su color final depende de lo que tenga abajo. Adentro
 * de `.modo` lo que tiene abajo es el `--paper-3` del grupo, que en oscuro es mas CLARO que la
 * pagina: el tinte queda mas claro, y la letra `--red-txt` encima se cae a 4.27:1 —abajo del
 * 4.5 que pide AA, y en Space Mono de 10px—. Sobre `--paper` da 4.76, que es exactamente la
 * pestana activa, y las dos capsulas elegidas del panel tienen que ser el mismo color igual.
 *
 * El doble fondo (un `linear-gradient` de un solo color arriba, `--paper` abajo) es la forma
 * de decir "este tinte va sobre el fondo de la PAGINA" adentro de un contenedor que tiene
 * otro, sin repetir el calculo a mano por tema.
 */
.modo-op:has(input:checked) {
  background: linear-gradient(var(--red-tint), var(--red-tint)), var(--paper);
  color: var(--red-txt);
}

/* El foco lo tiene el radio escondido, asi que el anillo lo dibuja la capsula. */
.modo-op:has(input:focus-visible) {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/*
 * EL TAMAÑO DEL TEXTO (Sergio, 10/10/2026; desde el 16/10/2026 adentro del desplegable de la
 * cuenta, ver `.cuenta-menu`): con la forma del tema (la capsula de
 * `--paper-3` con borde), pero un `select` y no cinco capsulas: 80 · 90 · 100 · 110 · 120 no
 * entran al lado del tema, el nombre y SALIR en un telefono. El icono (una A grande y una chica)
 * dice que es; el porcentaje, en Space Mono como las etiquetas del header, cuanto. Las medidas van
 * en px a proposito: el selector no puede crecer con lo que el mismo agranda y salirse del header.
 */
.texto-tam {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 33px;
  padding: 0 4px 0 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-3);
  color: var(--muted);
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.texto-tam:hover {
  color: var(--head);
}

.texto-tam svg {
  width: 17px;
  height: 17px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.texto-tam select {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 4px 6px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--head);
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.texto-tam select:focus {
  outline: none;
}

/* El foco lo tiene el select, y el anillo lo dibuja la capsula (como el tema). */
.texto-tam:has(select:focus-visible) {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* Las opciones las dibuja el sistema: con el fondo del panel, para que en oscuro no salgan blancas. */
.texto-tam option {
  background: var(--paper);
  color: var(--head);
}

/* --- El menu: grupos y secciones, adentro del header -------------------- */

/*
 * EL MENU (Sergio, 02/10/2026: "El menu de mi admin esta abarrotado de links. Fijate si no se
 * pueden agrupar"; y 09/10/2026: "integrar el menú y submenú al header dejando solo un header").
 *
 *  - LOS GRUPOS (`.grupo`): capsulas en Space Mono MAYUSCULA, el abierto con el tinte rojo de
 *    siempre —lo unico relleno de rojo de la barra (MARCA.md §2)—.
 *  - LAS SECCIONES DEL GRUPO ABIERTO (`.tab`): capsulas mas chicas y sin relleno, la elegida con
 *    borde rojo. Relleno en el nivel y contorno en el sub-nivel, para que se lea de un vistazo
 *    cual es cual sin dos rojos iguales compitiendo.
 *
 * Las secciones van A LA DERECHA de los grupos si entran (una raya fina las separa) y si no
 * DEBAJO, en el mismo header. Cual de las dos lo dice `.partido`, que pone app.js (`medirMenu`)
 * mirando si el renglon de las secciones bajo: con las secciones abajo la raya de costado no
 * separa nada y se va.
 *
 * El header es sticky, asi que el menu tambien: las tablas son largas y cambiar de seccion no
 * obliga a volver arriba. Antes era una franja aparte pegada abajo del header.
 *
 * ANGOSTO (menos de 1024 px): un DESPLEGABLE, ver mas abajo (`.menu-boton`).
 */
.barra-in > .menu {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 14px;
  row-gap: 2px;
  min-width: 0;
  padding: 8px 0 6px;
}

.grupos,
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  /* Lugar para el anillo de foco (2px + 3px de offset). */
  padding: 4px 5px;
  margin: 0 -5px;
}

.grupo-secciones {
  min-width: 0;
}

/* Al lado de los grupos, una raya fina separa el nivel del sub-nivel. Abajo no hace falta. */
.barra-in > .menu:not(.partido) > .grupo-secciones {
  border-left: 1px solid var(--line);
  padding-left: 12px;
}

.tabs {
  gap: 3px;
}

.grupo,
.tab {
  /*
   * `relative` para que el texto del lector de pantalla del contador (`.solo-lector`, que es
   * `absolute`) quede adentro del boton: sin esto su caja de referencia era el `.menu` sticky, se
   * escapaba del renglon que scrollea a 390 px y la PAGINA entera scrolleaba de costado ~20-30 px
   * (medido el 06/10/2026 en Clientes, con el contador de Comprobantes).
   */
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-mono);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.grupo {
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  background: var(--paper-3);
  border: 1px solid var(--line);
  padding: 7px 14px;
}

.tab {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  background: transparent;
  border: 1px solid transparent;
  padding: 6px 12px;
}

.grupo:hover,
.tab:hover {
  color: var(--head);
  border-color: var(--red-tint-2);
}

/* El grupo abierto: relleno con el tinte rojo, lo unico relleno de rojo de la barra. */
.grupo[aria-selected="true"] {
  color: var(--red-txt);
  background: var(--red-tint);
  border-color: var(--red-tint-2);
}

/* La seccion elegida: contorno rojo, sin relleno. */
.tab[aria-selected="true"] {
  color: var(--red-txt);
  background: var(--paper);
  border-color: var(--red);
}

/*
 * EL NUMERO DE PENDIENTES (hoy, los comprobantes sin revisar). En la seccion siempre y en el
 * grupo cuando esta cerrado: un pendiente no se pierde por estar en otro renglon. Es el mismo
 * circulo rojo del favicon, en chico.
 */
.menu-pendiente {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 0.6rem;
  letter-spacing: 0;
  line-height: 1;
}

/* Texto solo para el lector de pantalla: 1px y recortado, no `display:none`. */
.solo-lector {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

/*
 * EL BOTON DEL MENU, para cuando no entra en el header (menos de 1024 px). Dice donde se esta
 * ("CLIENTES · CHAT") y abre el mismo `<nav>` como un DESPLEGABLE debajo del header, encima de
 * la pagina (sin telon: se cierra tocando afuera, con Escape o eligiendo una seccion). Adentro
 * los dos renglones ENVUELVEN: ya no hace falta el scroll de costado de cada renglon que habia a
 * 390 px (el desplegable tiene el ancho entero y crece para abajo).
 */
.menu-boton {
  grid-column: 2;
  justify-self: start;
  align-self: center;
  position: relative;
  display: none;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
  padding: 7px 12px;
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--head);
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.menu-boton:hover,
.menu-boton[aria-expanded="true"] {
  border-color: var(--red-tint-2);
}

.menu-boton svg {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.menu-boton .menu-boton-chevron {
  width: 14px;
  height: 14px;
  color: var(--muted);
  transition: transform 0.18s ease;
}

.menu-boton[aria-expanded="true"] .menu-boton-chevron {
  transform: rotate(180deg);
}

.menu-boton-texto {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * DE 1024 A 1199 PX los seis grupos entran al lado de la marca y de la cuenta solo si la marca se
 * queda en "MUSURIT" y el nombre sin el rol (los dos estan a la vista en otro lado: el dominio y
 * TU CUENTA). Medido el 09/10/2026: marca 138 + grupos 562 + cuenta 347 + aire = 1131 px; sin
 * " · PANEL" ni " · ADMIN", 1010.
 */
@media (max-width: 1199px) {
  body.con-sesion .marca-cola,
  body.con-sesion .quien-rol {
    display: none;
  }
}

@media (max-width: 1023px) {
  .barra-in {
    align-items: center;
  }

  .menu-boton:not([hidden]) {
    display: inline-flex;
  }

  .barra-in > .menu {
    /*
     * `auto` y no una columna: un hijo `absolute` de una grilla CON lugar asignado toma esa area (sin
     * el padding) como caja; con `auto` toma la grilla entera, borde a borde.
     */
    grid-column: auto;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 2;
    display: none;
    flex-direction: column;
    align-items: stretch;
    row-gap: 8px;
    padding: 12px 24px 16px;
    background: var(--paper);
    border-bottom: 1px solid var(--barra-borde);
    box-shadow: var(--barra-menu-sombra);
  }

  .barra.menu-abierto .barra-in > .menu:not([hidden]) {
    display: flex;
  }

  /*
   * Con `:not(.partido)` tambien (10/10/2026): `medirMenu` mide con el desplegable CERRADO, ahi
   * nunca esta "partido", y la regla de la raya de costado (mas especifica) le ganaba a esta: a 390
   * px las secciones salian con una raya a la izquierda y 12 px de sangria.
   */
  .barra-in > .menu > .grupo-secciones,
  .barra-in > .menu:not(.partido) > .grupo-secciones {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--line-soft);
    padding-top: 6px;
  }

  .tab {
    padding: 7px 12px;
  }
}

@media (max-width: 560px) {
  .barra-in > .menu {
    padding: 10px 16px 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-boton,
  .menu-boton .menu-boton-chevron {
    transition: none;
  }
}

/*
 * (Hasta el 16/10/2026 el tema iba en el header con solo sus tres iconos y aca estaban las reglas
 * que escondian las palabras en una tablet y achicaban las capsulas en un telefono. Ya no esta en
 * el header: vive en el desplegable de la cuenta, con las palabras a la vista a cualquier ancho.)
 */

/* Y en un telefono la marca se queda en "Musurit": el panel ya se sabe que es el panel. */
@media (max-width: 560px) {
  .marca-cola {
    display: none;
  }

  /*
   * CON SESION, A 390 PX LA MARCA SE VA ENTERA (09/10/2026): su lugar es del boton del menu, que
   * dice donde se esta. "Musurit", el menu, los tres iconos del tema, el nombre y SALIR no
   * entraban. El boton dice solo la seccion ("CHAT"); el grupo queda para el lector de pantalla.
   */
  /*
   * EL ☰ NO CEDE, CEDE LA DERECHA (10/10/2026): con el tamaño del texto al lado del tema y la letra
   * al 120 %, la derecha pedia mas de lo que habia y la columna del ☰ se achicaba hasta quedar
   * montada sobre el tema. Ahora el ☰ mide lo que mide y la derecha toma el resto: lo que se achica
   * es el nombre (con "…", ver `.quien-nombre`).
   */
  body.con-sesion .barra-in {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 10px;
  }

  body.con-sesion .barra-in > .barra-derecha {
    justify-content: flex-end;
  }

  body.con-sesion .barra-in > .marca {
    display: none;
  }

  body.con-sesion .menu-boton {
    grid-column: 1;
  }

  body.con-sesion .barra-in > .barra-derecha {
    grid-column: 2;
  }

  /*
   * A 390 PX EL BOTON ES EL ICONO (y el numero de pendientes, si hay). "CLIENTES · CHAT" no entra
   * al lado del tema, el nombre y SALIR (quedaba "CH…"), y donde se esta ya lo dice el titulo de la
   * seccion, justo abajo. El texto queda para el lector de pantalla.
   */
  .menu-boton {
    gap: 6px;
    padding: 7px 10px;
  }

  .menu-boton .menu-boton-chevron {
    display: none;
  }

  .menu-boton-texto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
  }

  /*
   * EL NOMBRE A 390 PX: el header es el ☰ y el nombre, y hay lugar de sobra. El rol se va igual
   * (lo dice el titulo del desplegable) y el nombre pierde la mitad del tracking.
   */
  .barra-derecha {
    gap: 6px;
  }

  .quien {
    padding: 6px 10px;
    gap: 6px;
  }

  .quien-rol {
    display: none;
  }

  .quien-nombre {
    letter-spacing: 0.06em;
  }
}

/*
 * EN EL CHAT, EL HEADER EN UNA FRANJA MINIMA (Sergio, 10/10/2026: "cuando esta en chat, dejar
 * todo el menu del header en 3 barritas al costado asi no ocupa espacio"). Con la seccion Chat a
 * la vista (`.compacta`, la pone `mostrarRuta` via `headerCompacto`) los grupos y las pestañas se
 * van detras del ☰ —el mismo `#menu-boton` y el mismo desplegable del angosto, a cualquier
 * ancho—: queda ☰, la marca entera y a la derecha el tema, la cuenta y Salir. 46 px en vez de 58
 * (o ~92 con las secciones en dos renglones); lo ganado es alto de las tres columnas, que se miden
 * con `--alto-barra`. Al salir del Chat vuelve el header completo.
 *
 * A 390 px no cambia nada mas que el alto: ahi el menu ya era el ☰ (ver el bloque de 560 px).
 */
.barra.compacta .barra-in {
  align-items: center;
  min-height: 46px;
}

.barra.compacta .barra-in > .marca,
.barra.compacta .barra-in > .barra-derecha {
  height: 46px;
}

@media (min-width: 561px) {
  .barra.compacta .barra-in {
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 14px;
  }

  /*
   * `grid-row: 1` en los tres: con solo la columna, la colocacion automatica no vuelve atras —la
   * marca va primero en el HTML y queda en la columna 2, y el ☰ (columna 1) bajaba a un segundo
   * renglon—.
   */
  .barra.compacta .menu-boton:not([hidden]),
  .barra.compacta .barra-in > .marca,
  .barra.compacta .barra-in > .barra-derecha {
    grid-row: 1;
  }

  /* El ☰ a la izquierda, solo el icono (y el numero de pendientes, si hay). */
  .barra.compacta .menu-boton:not([hidden]) {
    display: inline-flex;
    grid-column: 1;
    gap: 6px;
    padding: 6px 10px;
  }

  .barra.compacta .menu-boton .menu-boton-chevron {
    display: none;
  }

  .barra.compacta .menu-boton-texto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
  }

  .barra.compacta .barra-in > .marca {
    grid-column: 2;
    justify-self: start;
  }

  .barra.compacta .barra-in > .barra-derecha {
    grid-column: 3;
  }

  /* Hay lugar de sobra: la marca vuelve a decir "MUSURIT · PANEL". */
  .barra.compacta .marca-cola {
    display: inline;
  }

  /*
   * EL DESPLEGABLE: una tarjeta pegada al borde izquierdo, debajo del ☰, del ancho de su renglon
   * mas largo (no una franja de lado a lado: en una pantalla ancha seria una banda casi vacia
   * encima de la charla). Los dos renglones de siempre, grupos arriba y secciones abajo.
   */
  .barra.compacta .barra-in > .menu {
    grid-column: auto;
    position: absolute;
    top: 100%;
    left: 0;
    right: auto;
    z-index: 2;
    display: none;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    row-gap: 8px;
    width: max-content;
    max-width: 100%;
    padding: 12px 24px 16px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-top: 0;
    border-left: 0;
    border-radius: 0 0 14px 0;
    box-shadow: var(--barra-menu-sombra);
  }

  .barra.compacta.menu-abierto .barra-in > .menu:not([hidden]) {
    display: flex;
  }

  .barra.compacta .barra-in > .menu > .grupo-secciones {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--line-soft);
    padding-top: 6px;
  }
}

/* Y de 1024 px para arriba tambien entra el rol al lado del nombre. */
@media (min-width: 1024px) {
  .barra.compacta .quien-rol {
    display: inline;
  }
}

/* --- Botones ------------------------------------------------------------- */

.btn {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 11px 22px;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.btn-primario {
  background: var(--red);
  color: #fff;
  box-shadow: 0 10px 26px -12px rgba(173, 45, 46, 0.6);
}

.btn-primario:hover:not(:disabled) {
  background: var(--red-deep);
}

.btn-fantasma {
  background: var(--paper);
  border-color: var(--line);
  color: var(--head);
}

/*
 * ABRIR EL LEAD EN EL COTIZADOR. Píldora blanca con borde rojo: sale del panel, y el rojo
 * es el borde, no el fondo (MARCA: el rojo es acento). Al pasar se llena, para que se lea
 * como botón y no como el enlace punteado que era. En la tabla va más chico: una fila de
 * solicitudes no es una botonera.
 */
a.btn-cotizador {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  white-space: nowrap;
  background: var(--paper);
  color: var(--head);
  border-color: var(--red);
}

a.btn-cotizador::after {
  content: '↗';
  font-size: 0.85em;
  line-height: 1;
}

a.btn-cotizador:hover {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}

.tabla-solicitudes a.btn-cotizador {
  padding: 5px 12px;
  font-size: 0.78rem;
  box-shadow: none;
}

.tabla-solicitudes a.btn-cotizador:hover {
  transform: none;
}

.btn-chico {
  padding: 7px 15px;
  font-size: 0.85rem;
}

/*
 * EL COPIAR CHICO: la cápsula que va pegada a un dato (el DNI de la tabla de Clientes, el
 * número y el DNI de la cabecera de su ficha).
 *
 * No es un `.btn`: un `.btn-chico` adentro de una celda pesa más que el número que copia, y
 * en una tabla de cuarenta filas serían cuarenta botones gritando. Es Space Mono en
 * MAYÚSCULAS como un badge —lo mismo que hace el resto del panel con las etiquetas— y se
 * pinta en gris hasta que el mouse le pasa por encima: **el dato es el mensaje, el botón es
 * la herramienta**. En rojo se lee acá arriba (`--red-txt`), que es el token del acento
 * cuando es LETRA y no fondo.
 *
 * `flex: none` y `white-space: nowrap` porque vive adentro de un flex al lado de un número:
 * sin eso "COPIAR" se parte en dos renglones en la columna angosta.
 */
.btn-copiar {
  flex: none;
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--faint);
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.btn-copiar:hover {
  color: var(--red-txt);
  border-color: var(--red);
  background: var(--red-tint);
}

/*
 * COPIADO: verde, porque confirma (DISENO.md §2). Dura 1,5 s y vuelve solo.
 *
 * Es el ÚNICO estado del botón que cambia de color: un COPIAR que se pintara de rojo diría
 * "falla" sobre el gesto más chico de la pantalla.
 */
.btn-copiar.copiado,
.btn-copiar.copiado:hover {
  color: var(--ok-txt);
  border-color: var(--ok-borde);
  background: var(--ok-bg);
}

/* El dato y su COPIAR en la misma línea, sin que el botón estire la fila. */
.celda-copiable {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Un dato que no está. Gris y sin botón: no hay nada que copiar (ver `celdaDni`). */
.sin-dato {
  color: var(--faint);
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

/* --- Login --------------------------------------------------------------- */

.login {
  min-height: calc(100vh - 62px);
  display: grid;
  place-items: center;
}

.login-caja {
  width: min(420px, 100%);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 34px 30px 30px;
  box-shadow: var(--sombra);
}

.login-caja h1 {
  font-size: 1.8rem;
  margin-bottom: 4px;
}

.eyebrow {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 8px;
}

.campo {
  display: block;
  margin-top: 18px;
}

.campo span {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.campo input {
  width: 100%;
  margin-top: 7px;
  padding: 12px 14px;
  font-family: var(--f-body);
  font-size: 1rem;
  color: var(--head);
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.campo input:focus {
  border-color: var(--red-tint-2);
}

#totp {
  font-family: var(--f-mono);
  font-size: 1.4rem;
  letter-spacing: 0.4em;
  text-align: center;
}

.login .btn {
  width: 100%;
  margin-top: 24px;
}

/* --- Avisos -------------------------------------------------------------- */

.aviso {
  margin-top: 18px;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  font-family: var(--f-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  background: var(--falla-bg);
  border: 1px solid var(--falla-borde);
  color: var(--falla-txt);
}

.aviso.ambar {
  background: var(--aviso-bg);
  border-color: var(--aviso-borde);
  color: var(--aviso-txt);
}

/* Verde = confirmacion (DISENO.md §2). Lo usa el resultado de un envio que salio. */
.aviso.verde {
  background: var(--ok-bg);
  border-color: var(--ok-borde);
  color: var(--ok-txt);
}

/*
 * ESTA RED NO ENTRA, Y CON QUE IP (IPs por cuenta, 07/10/2026). El mismo `.aviso` rojo de "la
 * red" del login, en tres renglones: que pasa, la IP con su COPIAR, y que hacer. La IP es EL
 * dato —es lo que la persona le va a mandar a un admin por WhatsApp—, asi que va mas grande, en
 * mono y SIN mayusculas: una IPv6 en mayusculas sigue siendo valida pero ya no se parece a la
 * que el admin va a ver en su pantalla.
 */
.aviso-red {
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 14px 14px 13px;
}

.aviso-red p {
  margin: 0;
}

.aviso-red-ip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

/*
 * La IP y su COPIAR van juntos: si no entran al lado de "Tu IP es", baja el par entero. Y si el
 * par tampoco entra en un renglon (una IPv6 en un telefono), baja el COPIAR y no se parte la IP.
 */
.aviso-red-par {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.aviso-red-numero {
  font-family: var(--f-mono);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--head);
  background: var(--paper);
  border: 1px solid var(--falla-borde);
  border-radius: 8px;
  padding: 3px 9px;
  word-break: break-all;
}

.aviso-red-pie {
  color: var(--muted);
}

/* --- Secciones ----------------------------------------------------------- */

/*
 * Cada seccion es un `tabpanel` y solo hay UNA visible, asi que ya no lleva la linea de
 * arriba que la separaba de la anterior: no hay anterior. La separacion la da la barra de
 * pestanas, que tiene su propio borde.
 */
.seccion {
  padding: 28px 0 40px;
}

.cab-acciones {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.seccion-cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.seccion-cab h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
}

/* --- Tarjetas de salud --------------------------------------------------- */

.grilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}

.tarjeta {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px 20px 20px;
  position: relative;
  overflow: hidden;
}

.tarjeta::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--red);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.tarjeta:hover::before {
  opacity: 1;
}

.tarjeta-rotulo {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}

/*
 * LA TARJETA "IA" DE SALUD (11/10/2026): la de siempre mas los ultimos 5 errores de la API. Va al
 * final de la grilla y ocupa el renglon entero: en el medio, con la lista adentro, estiraba a las
 * demas tarjetas de su renglon.
 */
.tarjeta-ia {
  grid-column: 1 / -1;
}

.tarjeta-ia .tarjeta-ia-rotulo {
  margin-top: 16px;
}

.tarjeta-ia-errores {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  font-size: 0.86rem;
}

.tarjeta-ia-errores li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 5px 0;
  border-top: 1px solid var(--line);
}

.tarjeta-ia-errores li:first-child {
  border-top: 0;
}

.tarjeta-ia-hora {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  color: var(--faint);
  min-width: 6.5em;
}

.tarjeta-ia-origen {
  font-weight: 600;
  color: var(--head);
  min-width: 5.5em;
}

.tarjeta-ia-avisos {
  margin-top: 12px;
}

.cifra {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 2.3rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--head);
  margin-top: 8px;
}

.cifra .unidad {
  font-family: var(--f-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--muted);
  margin-left: 5px;
  letter-spacing: 0;
}

.cifra.acento {
  color: var(--red-txt);
}

.pie {
  margin-top: 6px;
  font-size: 0.86rem;
  color: var(--muted);
}

/* --- Badges -------------------------------------------------------------- */

.badge {
  display: inline-block;
  /*
   * Un badge ambar se escribe `badge aviso`, y ese `aviso` matchea tambien el BLOQUE
   * `.aviso` de mas arriba (el cartel full-width), que trae `margin-top: 18px`. El resto de
   * lo que aporta lo pisa este bloque por orden de archivo, pero el margen sobrevive: en un
   * `.seccion-cab` agranda la fila del titulo 18 px y en una celda de la tabla de enviados
   * baja el badge respecto del resto. Se apaga acá, una vez, para todos los badges.
   */
  margin-top: 0;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--nada-borde);
  background: var(--nada-bg);
  color: var(--nada-txt);
  white-space: nowrap;
}

.badge.ok {
  background: var(--ok-bg);
  border-color: var(--ok-borde);
  color: var(--ok-txt);
}

.badge.aviso {
  background: var(--aviso-bg);
  border-color: var(--aviso-borde);
  color: var(--aviso-txt);
}

.badge.falla {
  background: var(--falla-bg);
  border-color: var(--falla-borde);
  color: var(--falla-txt);
}

/* Quien escribio lo ultimo en el chat: Mia, en el azul de siempre. */
.badge.cp-quien-mia {
  background: var(--bm-bg);
  border-color: var(--bm-borde);
  color: var(--bm-txt);
}

/*
 * EL BADGE DE UN CANAL CON MARCA (WhatsApp y el webchat de Botmaker).
 *
 * Es el mismo badge de siempre con dos cosas encima: el color de la plataforma (ver los
 * tokens `--wa-*` / `--bm-*` arriba de todo) y un icono de 12px adelante. El icono va
 * ADENTRO del badge y no al lado: son un solo dato —"por acá entro"— y separarlos daria dos
 * cosas para mirar donde hay una. Nada de emoji: un 💬 o un 🟢 traen el color y la forma del
 * sistema operativo, que es lo unico que este panel no controla.
 *
 * SE LLAMA `plataforma` Y NO `canal`, y esa palabra es a proposito: `.canal` ya es la CAPSULA
 * del filtro de Chats, que hereda de `.tema` un padding de 11px, `overflow: hidden` y un fondo
 * propio. Un badge con esa clase se comia esas tres cosas y quedaba del alto de un filtro. El
 * dato es el mismo en las dos pantallas; la forma no.
 *
 * Lo mismo con `glifo` y `trazo`, que podrian llamarse `marca` y `linea`: `.marca` YA EXISTE
 * —es el "MUSURIT" del header— y trae `color: var(--head)`, que es exactamente lo que un SVG
 * pintado con `currentColor` lee. El logo de WhatsApp habria salido gris oscuro en vez de
 * verde, y en ningun lado habria dicho por que.
 */
.badge.plataforma {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-left: 9px;
}

.badge.plataforma svg {
  width: 12px;
  height: 12px;
  flex: none;
}

/*
 * LAS DOS FORMAS DE DIBUJAR UN ICONO DE CANAL, y valen en los DOS lugares donde aparecen: el
 * badge y la capsula del filtro. Por eso no van colgadas de `.badge` — el mismo SVG se pinta
 * en las dos pantallas y una copia de estas cinco lineas es la que se queda distinta despues.
 *
 * `glifo` es una silueta RELLENA, y ahi hay una excepcion a MARCA.md §6 (todos los iconos del
 * panel son line-art). Un logotipo no es un icono: el globo de WhatsApp dibujado en contorno
 * es OTRA marca, y la gracia de esto es que se reconozca sin leer. `trazo` si es line-art
 * —eso si es un icono—, con las puntas redondeadas de MARCA.md §6 y 1.8 de grosor en vez de
 * 1.7: estos van a 12px (los del selector de tema, a 15) y ahi el trazo del manual se
 * renderiza en 0.85px y se desdibuja.
 *
 * Los dos toman el color del contexto (`currentColor`): el que decide de que color es el
 * icono es el badge o la capsula que lo contiene, no el SVG.
 */
svg.glifo {
  fill: currentColor;
  stroke: none;
}

svg.trazo {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/*
 * El doble fondo (un `linear-gradient` de un solo color sobre `--paper`) es el mismo truco
 * de `.modo-op`, y acá hace mas falta todavia: el mismo badge se dibuja sobre la celda de una
 * tabla (`--paper`) y adentro de una tarjeta de la ficha (`--paper-2`), y un tinte
 * translucido cambiaria de color —y de contraste— segun donde caiga.
 */
.badge.plataforma-whatsapp {
  background: linear-gradient(var(--wa-bg), var(--wa-bg)), var(--paper);
  border-color: var(--wa-borde);
  color: var(--wa-txt);
}

.badge.plataforma-webchat {
  background: linear-gradient(var(--bm-bg), var(--bm-bg)), var(--paper);
  border-color: var(--bm-borde);
  color: var(--bm-txt);
}

.badge.plataforma-central {
  background: linear-gradient(var(--ce-bg), var(--ce-bg)), var(--paper);
  border-color: var(--ce-borde);
  color: var(--ce-txt);
}

.badge.plataforma-app {
  background: linear-gradient(var(--ap-bg), var(--ap-bg)), var(--paper);
  border-color: var(--ap-borde);
  color: var(--ap-txt);
}

.badge.plataforma-app svg {
  color: var(--ap-icono);
}

/*
 * LA RUTA DE UNA PANTALLA (`/mi-cuenta`), al lado de "Abrió Mi cuenta".
 *
 * Es el UNICO badge del panel que no va en mayusculas, y no es un descuido: una ruta es un
 * identificador y `/MI-CUENTA` no es esa ruta. Se pone al lado del nombre lindo justamente
 * para el caso en que el nombre lindo no exista todavia (una pantalla nueva de la app contra
 * un panel viejo): ahi el badge es lo unico que dice de que pantalla se esta hablando.
 */
.badge.ruta {
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  text-transform: none;
  padding: 3px 9px;
}

/* --- Uso: barras --------------------------------------------------------- */

.uso {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 22px;
}

@media (max-width: 860px) {
  .uso {
    grid-template-columns: 1fr;
  }
}

.serie {
  width: 100%;
  height: auto;
  display: block;
}

.serie .barra-dia {
  fill: var(--red);
}

.serie .barra-dia:hover {
  fill: var(--red-deep);
}

.serie .eje {
  fill: var(--faint);
  font-family: var(--f-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.06em;
}

.serie .guia {
  stroke: var(--line);
  stroke-width: 1;
}

.top {
  list-style: none;
  margin: 0;
  padding: 0;
}

.top li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
}

.top li:last-child {
  border-bottom: 0;
}

.top-nombre {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--head);
}

.top-valor {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--head);
}

.top-riel {
  grid-column: 1 / -1;
  height: 6px;
  border-radius: 999px;
  background: var(--nada-bg);
  overflow: hidden;
}

.top-riel i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--red);
}

/*
  EL RIEL CON TONO: verde lo que cargó, ámbar lo que no (DISEÑO.md §2).

  Lo usa la tarjeta del chat por widget, y es la única lista `.top` que colorea: en "Lo que
  más se usa" el rojo de marca es un acento y todas las barras dicen lo mismo (cuánto), pero
  acá cada fila es un DESENLACE —el widget cargó o el cliente se quedó sin poder escribir— y
  el color es la mitad del dato. No hay `.falla`: un widget bloqueado avisa, no es una caída
  del sistema.

  Los modificadores se llaman `tono-ok` / `tono-aviso` y NO `ok` / `aviso` a proposito: `.aviso`
  ya es el cartel de bloque de este panel (padding, borde y fondo de falla, mas arriba en este
  archivo) y ponerselo al riel lo convertia en una capsula vacia con borde en vez de una barra
  de 6px. El prefijo es lo que mantiene las dos cosas separadas.
*/
.top-riel.tono-ok i {
  background: var(--ok-txt);
}

.top-riel.tono-aviso i {
  background: var(--aviso-barra);
}

/* La tarjeta que ocupa las dos columnas de la grilla de Uso (y la única en 1 columna). */
.uso-ancho {
  grid-column: 1 / -1;
}

/* --- Clientes ------------------------------------------------------------ */

.buscador {
  width: min(320px, 100%);
  padding: 10px 14px;
  font-family: var(--f-body);
  font-size: 0.95rem;
  color: var(--head);
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.tabla-marco {
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow-x: auto;
  background: var(--paper);
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px;
}

/*
 * Clientes tiene tres columnas más que la original: el DNI (con su COPIAR al lado) y, desde el
 * 08/09/2026, TEMA y CANAL. El `.tabla-marco` ya scrollea en horizontal, así que lo que esto
 * compra es que en una pantalla normal la tabla NO scrollee — 960 es lo que miden las siete
 * columnas con los dos badges de canal en la misma celda.
 */
#seccion-clientes table {
  min-width: 960px;
}

/* Los dos badges de canal, cuando el cliente habló por los dos, en la misma celda. */
#filas td .badge + .badge {
  margin-left: 6px;
}

thead th {
  text-align: left;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
  white-space: nowrap;
}

tbody td {
  padding: 12px 18px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.95rem;
  color: var(--text);
}

tbody tr:last-child td {
  border-bottom: 0;
}

/*
 * La manito y el resaltado son de las TRES tablas cuyas filas abren algo: Clientes,
 * Incidencias y Chats. Sin acotarlas, la tabla de enviados —que no tiene ningun listener—
 * heredaba las dos y prometia un click que no pasa nada.
 */
#filas tr,
#incidencias-filas tr,
#chats-filas tr,
#comprobantes-filas tr {
  cursor: pointer;
}

#filas tr:hover td,
#incidencias-filas tr:hover td,
#chats-filas tr:hover td,
#comprobantes-filas tr:hover td {
  background: var(--paper-2);
}

/*
 * EL CORPO (03/10/2026): la fila entera con el tinte rojo suave y una barra roja de 3px a la
 * izquierda. La barra es un `box-shadow` inset en la primera celda y no un `border-left`, que
 * correria 3px el contenido de esas filas respecto de las otras. El texto NO cambia de color:
 * no es una falla, es un cliente distinto. Va DESPUES del hover general (misma especificidad
 * que `#filas tr:hover td`, gana el ultimo) y con su propio hover, un tono mas fuerte.
 */
#filas tr.corpo td {
  background: linear-gradient(var(--corpo-tint), var(--corpo-tint)), var(--paper);
}

#filas tr.corpo:hover td {
  background: linear-gradient(var(--corpo-tint-hover), var(--corpo-tint-hover)), var(--paper);
}

#filas tr.corpo td:first-child {
  box-shadow: inset 3px 0 0 var(--red);
}

/* El foco de teclado sobre una fila (tenida o no): el anillo rojo, por dentro de la tabla. */
#filas tr:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: -2px;
}

/*
 * EL BADGE CORPO / CORPORATIVO. Contorneado y sobre `--paper` —no con el tinte de
 * `.badge.falla`—: la letra roja y el borde rojo son acento, el relleno es papel. Asi se
 * despega de la fila tenida y no se confunde con un badge de falla. Medido: `--red-txt` sobre
 * `--paper` 6.6:1 en claro y 5.3:1 en oscuro.
 */
.badge.corpo {
  background: var(--paper);
  border-color: var(--red);
  color: var(--red-txt);
  padding: 2px 8px;
  font-size: 0.6rem;
}

.nombre + .badge.corpo,
.con-app + .badge.corpo {
  margin-left: 8px;
  vertical-align: 1px;
}

.ficha-ids .badge.corpo {
  padding: 4px 11px;
  font-size: 0.66rem;
}

.num {
  font-family: var(--f-mono);
  font-size: 0.85rem;
  color: var(--head);
}

.nombre {
  font-weight: 600;
  color: var(--head);
}

.vacio {
  padding: 34px 18px;
  text-align: center;
  color: var(--muted);
}

/* --- Vistas: las cinco páginas que antes eran cajones --------------------- */

/*
 * LAS FICHAS SON PÁGINAS Y NO CAJONES (decisión de Sergio, 08/09/2026: *"no me gusta que las
 * ventanas del cliente se abren de costado, me gustaría que sea una página aparte, es más fácil
 * de controlar desde todos los dispositivos"*).
 *
 * Había CINCO cajones —la ficha del cliente, la conversación, la plantilla, la incidencia y la
 * cuenta del panel— y un telón compartido: 460 px anclados al borde derecho, encima de todo, sin
 * URL propia y sin back del navegador. En un teléfono el cajón medía la pantalla entera igual,
 * pero con el telón atrás y una × de 1.5rem como única salida.
 *
 * Ahora cada una es una `.vista` adentro de la `<section>` de SU pestaña, y una sola cosa se ve
 * por vez: o la lista (`#clientes-panel`) o la vista (`#vista-cliente`). Eso compra cuatro cosas
 * y ninguna es estética:
 *
 *  1. **URL propia** (`#cliente/89213520`, `#chat/<id>`): se pega en un chat y abre ahí.
 *  2. **El back del navegador vuelve a la lista**, con el scroll y los filtros que tenía —lo
 *     guarda `app.js`—, que es el gesto que en un teléfono se hace con el dedo y sin apuntarle a
 *     una × de 24 px.
 *  3. **El ancho de la columna del panel** en vez de 460 px fijos: la ficha del cliente pasa a
 *     dos columnas (ver `.ficha-cuerpo`) y la conversación deja de partir cada mensaje en cuatro
 *     renglones.
 *  4. **Cero telón, cero `z-index`, cero "cerrar el que esté abierto"**: la pantalla tapada por
 *     un telón invisible que se come todos los clicks dejó de ser un estado posible.
 *
 * La pestaña de la sección **sigue marcada** mientras la vista está abierta, y por eso las
 * vistas viven adentro del `<section role="tabpanel">` y no sueltas: mirar la ficha de un
 * cliente es estar en Clientes. Un `tablist` con `aria-selected="true"` sobre un panel escondido
 * sería una mentira de las que un lector de pantalla lee en voz alta.
 */
.vista {
  padding-bottom: 10px;
}

/*
 * LA BARRA DE LA VISTA: sólo el "Volver". La barra de pestañas sigue arriba —es `sticky`, así
 * que no se fue a ningún lado— y esto es la salida de ESTA pantalla, que es otra cosa: dice a
 * qué lista se vuelve, con su nombre.
 */
.vista-cab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 0 4px;
}

/*
 * EL "VOLVER" ES UN BOTÓN Y NO UN LINK (DISEÑO.md §3), con la flecha ← en rojo adelante.
 *
 * Es la misma píldora blanca con borde de `.btn-fantasma.btn-chico` —no se inventa un tamaño
 * nuevo— y lo único propio es la flecha: en el renglón donde alguien busca la salida, la salida
 * tiene que tener la forma que en este producto significa "esto se toca". Un chevron gris con la
 * palabra al lado se lee como texto.
 */
.volver {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 7px 15px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--head);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.volver:hover {
  border-color: var(--red-tint-2);
  background: var(--paper-3);
}

.volver-flecha {
  color: var(--red-txt);
  font-size: 1rem;
  line-height: 1;
}

/*
 * El encabezado de la vista: el rótulo mono, el nombre grande y —en la ficha del cliente— la
 * fila de acciones. Es lo que era `.drawer-cab` sin la × ni el borde de un cajón.
 */
/*
 * ANTERIOR / SIGUIENTE de una conversación del asistente (Sergio, 14/10/2026): las dos píldoras
 * chicas de siempre (`.btn-fantasma.btn-chico`) a la derecha del "Volver", con la posición en
 * Space Mono en el medio. Las flechas van en rojo como la del "Volver": el rojo es acento.
 */
.vista-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.vista-nav-pos {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  white-space: nowrap;
  min-width: 3ch;
  text-align: center;
}

.vista-nav-flecha {
  color: var(--red-txt);
}

.vista-nav .btn:disabled .vista-nav-flecha {
  color: inherit;
}

/* En un teléfono el "Volver" y las dos píldoras no entran en un renglón: la barra baja. */
@media (max-width: 560px) {
  .vista-cab:has(.vista-nav) {
    flex-wrap: wrap;
  }

  .vista-nav {
    margin-left: 0;
    width: 100%;
    justify-content: space-between;
  }
}

/* La fila de la charla que se acaba de leer, en la lista de fondo (ver `marcarActualAsistente`). */
#asistente-conv-filas tr[aria-current='true'] td {
  background: var(--red-tint);
}

.asistente-dia-item[aria-current='true'] {
  background: var(--red-tint);
}

.vista-titulo {
  padding: 10px 0 16px;
  border-bottom: 1px solid var(--line);
}

.vista-titulo h3 {
  font-size: 1.35rem;
}

.vista-cuerpo {
  padding-top: 14px;
}

/*
 * LO QUE SE LEE Y LO QUE SE ESCRIBE TIENEN TOPE DE ANCHO, y la ficha del cliente no.
 *
 * A 1.180 px, un campo de texto de una plantilla y una burbuja de chat medirían 1.130: un
 * formulario más ancho no se escribe mejor y una línea de 200 caracteres no se lee. La ficha
 * del cliente sí usa todo el ancho, porque lo que tiene son dos columnas de datos (ver
 * `.ficha-cuerpo`) y no una columna de texto.
 */
.vista-forma {
  max-width: 560px;
}

.vista-lectura {
  max-width: 780px;
}

/*
 * LOS CUATRO BOTONES CON LOS QUE SE ENTRA A LA APP COMO EL CLIENTE: copiar el número, copiar el
 * DNI, abrirla y entrar. Van juntos y debajo del nombre porque son una sola maniobra.
 */
.ficha-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

/* Los dos COPIAR los dibuja `app.js` acá adentro; el span existe para no pisar el enlace. */
#cliente-copiar {
  display: contents;
}

/*
 * ABRIR LA APP: la misma cápsula, pero con el acento puesto — es lo único de la cabecera que
 * sale del panel, y va en rojo desde el principio para que se distinga de los dos COPIAR sin
 * necesitar un segundo tamaño ni un ícono.
 */
.btn-abrir {
  color: var(--red-txt);
  border-color: var(--red);
}

.btn-abrir:hover {
  background: var(--red-tint-2);
}

/*
 * ENTRAR COMO EL CLIENTE: el PRIMARIO de esa fila, y por eso es el único relleno.
 *
 * Es la misma cápsula que los otros tres —mismo alto, mismo Space Mono, misma píldora— con el
 * rojo puesto de fondo en vez de en la letra. Ahí está la jerarquía completa de la cabecera sin
 * inventar un segundo tamaño: dos botones grises (copiar), uno con el acento en la letra (abrir
 * a mano) y uno lleno (entrar). Un `.btn-primario` de verdad mide 44 px de alto y le rompería
 * la línea a los otros tres, que viven pegados a un dato.
 *
 * Es el único rojo sólido del panel además de la marca, y es a propósito: DISEÑO.md §2 dice que
 * el rojo es acento y no fondo de tarjetas ni de avisos — un botón primario no es ninguna de las
 * dos, y en MARCA.md el primario es justamente la píldora llena.
 */
.btn-entrar {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.btn-entrar:hover:not(:disabled) {
  background: var(--red-deep);
  border-color: var(--red-deep);
  color: #fff;
}

/*
 * Deshabilitado = hay un pedido en vuelo. Se apaga con opacidad y no con otro color: es el
 * mismo botón esperando, no un botón distinto.
 */
.btn-entrar:disabled {
  opacity: 0.55;
  cursor: progress;
}

/*
 * El badge del acceso y —cuando el navegador bloqueó la pestaña— el enlace para abrirlo a mano.
 * `display: contents` por lo mismo que `#cliente-copiar`: lo que entra acá adentro tiene que
 * separarse con el `gap` de la fila, no con el de una caja intermedia.
 */
#cliente-acceso {
  display: contents;
}

/*
 * El número y el DNI adentro del rótulo de la cabecera.
 *
 * `user-select: all` hace que un solo click seleccione el valor entero, que es la última red
 * del COPIAR cuando el navegador no tiene portapapeles (mismo criterio que `.entrega-valor`).
 * El `letter-spacing` del `.eyebrow` se afloja acá: un número de ocho cifras con 0.22em de
 * tracking se lee como una matrícula y se compara peor contra lo que se tipea en la app.
 */
.dato-cab {
  color: var(--head);
  letter-spacing: 0.08em;
  user-select: all;
}

.evento {
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
}

.evento:last-child {
  border-bottom: 0;
}

/*
 * LA LINEA DE TIEMPO VA PARTIDA POR DIA, Y EL TITULO DEL DIA SE TIENE QUE LEER.
 *
 * Era una lista corrida de cincuenta eventos con la hora completa ("05/09/26 14:20") en cada
 * fila, en Space Mono de 11px y en gris: para saber si dos cosas pasaron el mismo dia habia
 * que leer y comparar dos fechas. El titulo del grupo contesta eso de un vistazo y libera a
 * la hora de cada fila de tener que decirlo.
 *
 * Space Grotesk 700 a 14px y en `--head` (decision de Sergio, 08/09/2026): es el mismo peso y
 * la misma familia de los titulos del panel, un escalon abajo del rotulo del bloque CHATS
 * (17px). En mono chiquito y en `--faint` —como el resto de los rotulos de esta ficha— se leia
 * como una etiqueta mas y no como el corte que es.
 */
.evento-dia {
  margin: 4px 0 2px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--head);
}

/* Entre un dia y el siguiente, el corte de 2px: es un tema nuevo, no una fila mas. */
.evento-grupo + .evento-grupo {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 2px solid var(--line-fuerte);
}

.evento-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.evento-hora {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  color: var(--faint);
  white-space: nowrap;
}

.evento-datos {
  margin: 7px 0 0;
  font-family: var(--f-mono);
  font-size: 0.74rem;
  color: var(--muted);
  white-space: pre-wrap;
  word-break: break-word;
}

/*
 * El motivo del rechazo de un comprobante: texto normal, no mono.
 *
 * Es lo unico de la ficha que esta escrito para leerse como una frase —son las palabras que
 * el backend le mostro al cliente, o sea las que el operador le puede repetir—, asi que no
 * va en el volcado de datos.
 */
.evento-motivo {
  margin: 7px 0 0;
  font-size: 0.86rem;
  color: var(--text);
}

/* --- Aviso de pago: "LO QUE LEYO LA IA" ---------------------------------- */

/*
 * El unico evento que se pinta a mano (ver `pintarAvisoPago`). Va en una caja propia porque
 * son datos de OTRA fuente: no los midio el backend, los leyo un modelo de una foto. El
 * marco es lo que dice "esto es lo que decia el comprobante", y no "esto es asi".
 */
.lectura {
  margin-top: 9px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper-2);
}

.lectura-titulo {
  margin: 0 0 8px;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

/* LAS ONUS DE GESTION REAL (09/10/2026): con dos contratos, cada ONU con su contrato arriba. */
.lectura-subtitulo {
  margin: 4px 0 6px;
  color: var(--head);
}

.lectura-separada {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.lectura-fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 3px 0;
}

/* La etiqueta en Space Mono y el valor en la tipografia de cuerpo: MARCA.md §3. */
.lectura-label {
  font-family: var(--f-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--faint);
  white-space: nowrap;
}

.lectura-valor {
  font-size: 0.87rem;
  color: var(--head);
  text-align: right;
  word-break: break-word;
}

/* El destino que NO era el suyo, en ambar: es una advertencia, no una falla (DISENO.md §2). */
.lectura-valor.mal {
  color: var(--aviso-txt);
  font-weight: 700;
}

/*
 * El badge que acompaña a un valor de la lectura (hoy: "CBU DE OTRO CLIENTE" al lado del
 * numero del cliente dueño de esa cuenta). Va ADENTRO del valor y no en una fila propia:
 * el numero sin la etiqueta no dice nada, y la etiqueta sin el numero tampoco.
 */
.lectura-valor .badge {
  margin-left: 8px;
  vertical-align: middle;
}

/*
 * EL PERFIL DE LA ONU (07/10/2026): el nombre del perfil y su marca, que es larga ("DIFIERE DEL
 * CONTRATO (200 MBPS)"). En la tarjeta angosta (390 px) no entra al lado de la etiqueta: la fila
 * se parte, el valor baja entero y la marca queda abajo del nombre, a la derecha como todos los
 * valores. Sin esto el badge se salia de la tarjeta y se leia "DIFIERE DEL CONTRATO (200 MB".
 * A lo ancho se ve igual que las otras filas.
 */
.lectura-fila.lectura-fila-perfil {
  flex-wrap: wrap;
  row-gap: 4px;
}

.lectura-fila-perfil .lectura-valor {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 4px 8px;
  margin-left: auto;
}

.lectura-fila-perfil .lectura-valor .badge {
  margin-left: 0;
  max-width: 100%;
  white-space: normal;
}

/* Un valor que son SOLO badges (el ESTADO de una cuenta de Roela): el primero pega a la
   izquierda y el margen queda entre uno y el siguiente. */
.lectura-valor.lectura-badges .badge {
  margin-left: 0;
}

.lectura-valor.lectura-badges .badge + .badge {
  margin-left: 8px;
}

/* --- Comprobante: DESTINO (17/10/2026, clases `destcomp-*`) ------------------------------------ */

/*
 * A QUE ALIAS/CBU TRANSFIRIO EL CLIENTE Y CUAL ERA EL SUYO. Es lo primero que se lee en la
 * pantalla, asi que lleva una barra de 4px a la izquierda del color del veredicto (verde =
 * correcto, ambar = fuera del padron o sin destino, rojo = cuenta de otro cliente). El rojo es
 * ACENTO —barra y badge—, el fondo sigue siendo papel (MARCA.md). El CBU va en Space Mono y
 * ENTERO, con su COPIAR: es el dato que se pega en el extracto del banco.
 */
.lectura.destcomp {
  padding: 14px 16px;
  border-left-width: 4px;
  border-left-color: var(--nada-borde);
}

.lectura.destcomp.ok {
  border-left-color: var(--ok-txt);
}

.lectura.destcomp.aviso {
  border-left-color: var(--aviso-barra);
}

.lectura.destcomp.falla {
  border-left-color: var(--red);
}

.destcomp-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 14px;
  margin-bottom: 10px;
}

.destcomp-cabecera .lectura-titulo {
  margin: 0;
}

.destcomp-veredicto {
  margin-top: 0;
  align-items: center;
}

.destcomp-veredicto .badge {
  white-space: normal;
  font-size: 0.72rem;
  padding: 6px 13px;
}

.destcomp-fila {
  padding: 11px 0 3px;
  border-top: 1px solid var(--line);
}

.destcomp-rotulo {
  margin: 0 0 6px;
  font-family: var(--f-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--faint);
}

.destcomp-dato {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0 0 6px;
}

.destcomp-alias {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--head);
  word-break: break-all;
}

.destcomp-dato .destcomp-alias {
  margin: 0;
}

.destcomp-cbu {
  margin: 0 0 6px;
  font-family: var(--f-mono);
  font-size: 0.98rem;
  letter-spacing: 0.04em;
  color: var(--head);
  word-break: break-all;
}

.destcomp-dato .destcomp-cbu {
  margin: 0;
}

.destcomp-vacio {
  font-weight: 400;
  color: var(--muted);
}

.destcomp-nota,
.destcomp-quien {
  margin: 0 0 6px;
  font-size: 0.82rem;
  color: var(--muted);
}

.destcomp-quien {
  color: var(--text);
}

/* --- Incidencias (fallas de zona, solo lectura) --------------------------- */

/* Siete columnas: la tabla scrollea adentro de su marco antes que apretarlas. */
.tabla-incidencias {
  min-width: 820px;
}

/*
 * Una celda puede llevar DOS badges (el estado y, al lado, MANTENIMIENTO: son ortogonales,
 * principio 8 del contrato con fallas). Sin este respiro se leen como una sola pastilla.
 */
.tabla-incidencias td .badge + .badge,
.tabla-roela td .badge + .badge,
.tabla-comprobantes td .badge + .badge,
.tabla-solicitudes td .badge + .badge,
.incidencia-badges .badge + .badge {
  margin-left: 6px;
}

.incidencia-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 14px;
}

/* Los badges de un evento: por que puerta entro, si aviso y si se aplico. */
.evento-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}

/* Lo que ve el cliente (descripcion y texto de cierre): texto normal, no mono. */
.incidencia-texto {
  margin: 0 0 10px;
  color: var(--text);
}

/*
 * Los rotulos que parten la ficha en bloques. Son los mismos de las tarjetas (mono, en
 * mayuscula) y acá viven sueltos, asi que se separan del bloque anterior a mano.
 *
 * `>` a proposito: los rotulos de las tres tarjetitas de numeros son los mismos nodos y no
 * pueden llevar 22 px de aire adentro de una tarjeta de 12.
 */
#incidencia-cuerpo > .tarjeta-rotulo {
  margin: 22px 0 8px;
}

/*
 * Los tres numeros de la ficha entran en UNA fila: en 460 px, `auto-fit minmax(190px)`
 * dejaba dos arriba y uno solo abajo, que se lee como si el tercero fuera otra cosa.
 */
#incidencia-cuerpo .grilla {
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 4px;
}

#incidencia-cuerpo .tarjeta {
  padding: 12px 12px 14px;
}

#incidencia-cuerpo .cifra {
  font-size: 1.5rem;
  margin-top: 4px;
}

#incidencia-cuerpo .pie {
  font-size: 0.8rem;
}

/* --- Push (fase 4) ------------------------------------------------------- */

/*
 * La seccion se marca apagada SOLO cuando el backend dice que no hay ningun transporte
 * configurado (lo pone `app.js`, no el HTML). Es la misma idea del `SIN DATO` gris de la
 * tabla de clientes: apagado no es lo mismo que roto, y no se pinta de rojo.
 *
 * Lo que se atenua es el FORMULARIO, que es lo unico que no se puede usar. Las cifras de
 * dispositivos y la tabla de enviados quedan a opacidad plena: son datos reales, y son
 * justamente los que hay que leer cuando el push esta apagado ("12 navegadores registrados
 * que no reciben nada" es lo que pide la accion). Ademas el gris de los rotulos al 55 %
 * queda muy por debajo del contraste minimo. Que esta apagado ya lo dicen el badge ambar
 * del encabezado y el borde punteado de las tarjetas.
 */
.apagado #push-form {
  opacity: 0.55;
}

.apagado #push-cifras .tarjeta,
.apagado #push-form {
  border-style: dashed;
}

/* El formulario a la izquierda, lo enviado a la derecha. Mismo ritmo que `.uso`. */
.push {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 22px;
  align-items: start;
}

/* Sin MANDAR AVISOS (Permisos, 10/10/2026) el formulario no esta, y ENVIADOS toma el ancho. */
.push:has(> #push-form[data-sin-permiso]) {
  grid-template-columns: 1fr;
}

@media (max-width: 960px) {
  .push {
    grid-template-columns: 1fr;
  }
}

.push .campo:first-of-type {
  margin-top: 14px;
}

.campo textarea,
.campo select {
  width: 100%;
  margin-top: 7px;
  padding: 12px 14px;
  font-family: var(--f-body);
  font-size: 1rem;
  color: var(--head);
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.campo textarea {
  resize: vertical;
  line-height: 1.5;
}

.campo select {
  cursor: pointer;
}

.campo textarea:focus,
.campo select:focus {
  border-color: var(--red-tint-2);
}

/* El contador de caracteres: chico, mono y a la derecha. Es un dato, no una frase. */
.contador {
  display: block;
  margin-top: 5px;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  text-align: right;
}

.contador.tope {
  color: var(--aviso-txt);
}

/*
 * EL TEMA, en capsulas. Es lo primero del formulario y no viene preelegido: ordena las
 * plantillas, pinta el badge de la tabla de enviados y despues permite contar. Capsulas y
 * no un `<select>` porque son siete opciones cortas que conviene ver juntas (DISENO.md §4).
 */
.temas,
.destino {
  border: 0;
  padding: 0;
  margin-top: 18px;
}

.temas-opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 9px;
}

/*
 * `.canal` (el filtro de plataforma de Chats) ES LA MISMA CAPSULA, y por eso comparte el
 * selector en vez de tener su propia copia. Este panel ya lleva dos versiones del patrón
 * —`.tema` y el `.modo-op` del selector de tema claro/oscuro, que tiene íconos y grupo pegado—,
 * y una tercera copia es la que se queda distinta el día que a una le cambian el radio.
 */
.tema,
.canal {
  position: relative;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-3);
  padding: 6px 14px;
  cursor: pointer;
  overflow: hidden;
}

/*
 * `.canal` ES LA FORMA DE UNA CÁPSULA DE LA FILA `.filtros`, no el nombre de un dato: la usan
 * el filtro de plataforma de Chats y los DOS de Clientes (TEMA y CANAL, 08/09/2026). `.tema` es
 * la del formulario de Push.
 *
 * LA ÚNICA DIFERENCIA ENTRE LAS DOS es de vecindario: la cápsula de un filtro convive en la
 * misma línea con dos `<input type=date>` y un `<select>`, que con su cuerpo de 0.9rem miden
 * ~37 px. Los filtros se alinean por ABAJO, así que con los 6 px de `.tema` la cápsula queda
 * 10 px más baja y su rótulo cae 10 px por debajo de DESDE, HASTA y SEÑAL. Estos 11 px son
 * los que igualan las dos alturas y ponen los cuatro rótulos en la misma línea. En el
 * formulario de Push no hace falta: ahí las cápsulas de tema tienen su renglón para ellas.
 */
.canal {
  padding: 11px 14px;
}

/*
 * El radio se esconde pero sigue existiendo: es lo que hace que las flechas muevan entre
 * temas, que el lector de pantalla lea "grupo de opciones" y que `reset()` las limpie. Lo
 * que se ve es la capsula.
 *
 * Se desarma `.campo input` a mano (igual que en `.opcion`): sin esto el radio heredaria
 * ancho 100%, padding y borde de un campo de texto y estiraria la capsula aunque no se vea.
 */
.tema input,
.canal input {
  position: absolute;
  inset: 0 auto auto 0;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  pointer-events: none;
}

.tema span,
.canal span {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.tema:has(input:checked),
.canal:has(input:checked) {
  border-color: var(--red-tint-2);
  background: var(--red-tint);
}

.tema:has(input:checked) span,
.canal:has(input:checked) span {
  color: var(--red-txt);
}

/* El foco lo tiene el radio escondido, asi que el anillo lo dibuja la capsula. */
.tema:has(input:focus-visible),
.canal:has(input:focus-visible) {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

/*
 * Apagada = el backend todavía no manda ese dato (los dos filtros de Clientes contra un server
 * sin desplegar). Se atenúa además de bloquearse: un filtro que se ve igual que los otros y no
 * hace nada es peor que uno que se ve apagado, y el por qué lo dice el badge NO DISPONIBLE que
 * está en el `<legend>` de al lado — no un `title`, que sobre un control deshabilitado los
 * navegadores no muestran (misma lección que el selector apagado de Push).
 */
.tema:has(input:disabled),
.canal:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.45;
}

/*
 * LAS CAPSULAS DEL FILTRO QUE TIENEN MARCA (WEBCHAT, WHATSAPP y, desde el 30/09, CENTRAL).
 *
 * El resto del panel marca lo elegido con el tinte rojo (la pestana activa, el tema, el
 * destino de un push): es "esto es lo que esta puesto". Acá, WEBCHAT y WHATSAPP llevan el
 * color de su plataforma —el mismo del badge de la columna Canal— porque el filtro y la
 * columna son el mismo dato: se elige arriba y se lee abajo, y con el rojo en el medio habia
 * que traducir. TODAS y OTROS se quedan en rojo, que es lo correcto: no son plataformas.
 *
 * El icono se ve SIEMPRE, elegida o no (es lo que hace reconocible la capsula de un vistazo);
 * lo que cambia al elegirla es el fondo, el borde y el color de la palabra.
 */
.canal svg {
  width: 13px;
  height: 13px;
  flex: none;
  margin-right: 7px;
}

.canal.canal-webchat {
  color: var(--bm-txt);
}

.canal.canal-whatsapp {
  color: var(--wa-txt);
}

.canal.canal-central {
  color: var(--ce-txt);
}

.canal.canal-webchat:has(input:checked) {
  background: linear-gradient(var(--bm-bg), var(--bm-bg)), var(--paper);
  border-color: var(--bm-borde);
}

.canal.canal-whatsapp:has(input:checked) {
  background: linear-gradient(var(--wa-bg), var(--wa-bg)), var(--paper);
  border-color: var(--wa-borde);
}

.canal.canal-central:has(input:checked) {
  background: linear-gradient(var(--ce-bg), var(--ce-bg)), var(--paper);
  border-color: var(--ce-borde);
}

.canal.canal-webchat:has(input:checked) span {
  color: var(--bm-txt);
}

.canal.canal-whatsapp:has(input:checked) span {
  color: var(--wa-txt);
}

.canal.canal-central:has(input:checked) span {
  color: var(--ce-txt);
}

/* APP: la palabra en grafito y el telefono en rojo, elegida o no (ver `--ap-*`). */
.canal.canal-app svg {
  color: var(--ap-icono);
}

.canal.canal-app:has(input:checked) {
  background: linear-gradient(var(--ap-bg), var(--ap-bg)), var(--paper);
  border-color: var(--ap-borde);
}

.canal.canal-app:has(input:checked) span {
  color: var(--ap-txt);
}

.destino legend,
.temas legend {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0;
}

.opcion {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-3);
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--head);
}

.opcion:has(input:checked) {
  border-color: var(--red-tint-2);
  background: var(--red-tint);
}

/*
 * Las dos opciones viven adentro de un `.campo`, asi que heredarian `.campo input` (ancho
 * 100%, padding, borde, fondo) y `.campo span` (mono, chico, MAYUSCULAS). Con eso el radio
 * se estiraba a todo el ancho como si fuera un input de texto y la opcion se leia como un
 * rotulo. Las dos reglas se desarman acá a mano: es texto para leer y elegir, no un campo.
 */
.opcion input {
  width: auto;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  flex: none;
  accent-color: var(--red);
}

.opcion span {
  font-family: var(--f-body);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--head);
}

/*
 * Los campos apagados: el formulario entero queda deshabilitado cuando el server no puede
 * mandar (lo hace `pintarPush`), y el cursor lo tiene que decir antes de que alguien
 * intente escribir, igual que en el boton.
 */
#push-form input:disabled,
#push-form textarea:disabled,
#push-form select:disabled {
  cursor: not-allowed;
}

.push .btn {
  width: 100%;
  margin-top: 22px;
}

/*
 * EL SEGUNDO CLICK. Ambar y no rojo: no es una falla, es una advertencia ("esto le llega a
 * N personas"). Ver DISENO.md §2. El texto lo escribe `app.js` con el numero adentro,
 * porque el numero ES el mensaje.
 */
.btn.confirmar {
  background: var(--aviso-bg);
  border-color: var(--aviso-borde);
  color: var(--aviso-txt);
  box-shadow: none;
  /*
   * En MAYUSCULAS los dos, acá y no en cada texto: el envio escribe "CONFIRMAR ENVÍO A 12
   * CLIENTES" y el borrado "Confirmar borrado", y son la MISMA decision ("esto no tiene
   * vuelta atras, mirá antes de apretar"). Dos registros distintos para la misma pieza la
   * hacen leer como dos cosas (DISENO.md §1).
   */
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.btn.confirmar:hover:not(:disabled) {
  background: var(--aviso-borde);
}

/* La tabla de enviados: seis columnas, y la del TEMA se suma a las cinco de antes. */
.tabla-envios {
  min-width: 560px;
}

.tabla-envios td {
  font-size: 0.9rem;
  vertical-align: top;
}

.envio-titulo {
  color: var(--head);
  font-weight: 600;
}

.envio-cuando {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--faint);
  white-space: nowrap;
}

/*
 * El badge de ORIGEN. Tres colores distintos porque son tres cosas distintas: lo que
 * escribio una persona (rojo de marca, es el acento), lo que disparo el sistema de fallas
 * (ambar: hubo una incidencia) y lo que entro por la API o el CLI (gris neutro).
 */
.badge.origen-admin {
  background: var(--red-tint);
  border-color: var(--red-tint-2);
  color: var(--red-txt);
}

.badge.origen-fallas {
  background: var(--aviso-bg);
  border-color: var(--aviso-borde);
  color: var(--aviso-txt);
}

/* --- Plantillas ---------------------------------------------------------- */

/*
 * Los mensajes predefinidos, agrupados por tema. El grupo se encabeza con el MISMO badge
 * que despues se ve en la tabla de enviados: el tema tiene un solo color en todo el panel.
 */
.plantillas-grupo {
  margin-bottom: 26px;
}

.plantillas-grupo-cab {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}

.plantillas-grupo-cab .pie {
  margin-top: 0;
  font-size: 0.78rem;
}

.plantillas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.plantilla {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.plantilla-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.plantilla-nombre {
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 700;
}

.plantilla-titulo {
  margin: 0;
  font-weight: 600;
  color: var(--head);
}

/* El cuerpo va recortado por `app.js`; el entero vive en el tooltip. */
.plantilla-cuerpo {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.plantilla .envio-cuando {
  white-space: normal;
}

.plantilla-acciones {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

/* El cajon de alta/edicion: mismo formulario a lo alto, boton full width como en Push. */
#plantilla-form .btn {
  width: 100%;
  margin-top: 22px;
}

/* --- Login: recordar el dispositivo -------------------------------------- */

/*
 * La capsula del "recordar" reusa `.opcion` (la misma de los radios de Push) y solo le
 * cambia el aire: en el login no viene abajo de una `legend`, viene abajo de un campo.
 */
.login .opcion {
  margin-top: 18px;
}

/* --- Sesion: los dispositivos recordados (al pie de Salud) ---------------- */

/*
 * Un bloque, no una seccion: son tres lineas y un boton. Se separa de las tarjetas con la
 * misma linea fina que el pie de pagina, sin caja propia: una tarjeta mas ahi arriba
 * competiria con los cinco semaforos, que son lo que se viene a mirar a esta pantalla.
 *
 * `.bloque` es LA MISMA PIEZA con nombre generico, y la usa la AUDITORIA al pie de Usuarios.
 * Comparten la regla en vez de tener dos copias porque son la misma decision de layout —"un
 * segundo tema, abajo, separado por una linea fina"—; lo propio de SESION (la lista y el
 * boton) sigue colgando de `.sesion` y nada mas.
 */
.sesion,
.bloque {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
}

.sesion-cab,
.bloque-cab {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.sesion-cab .tarjeta-rotulo,
.bloque-cab .tarjeta-rotulo {
  margin: 0;
}

.sesion-lista {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sesion-lista li {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper-2);
  font-size: 0.87rem;
  color: var(--head);
}

.sesion .pie {
  margin-top: 10px;
}

.sesion .btn {
  margin-top: 14px;
}

/* El aviso del bloque no es full width: acompaña al boton, que tampoco lo es. */
.sesion .aviso {
  margin-top: 12px;
  display: inline-block;
}

/* --- Roela: el padron de alias y CBU -------------------------------------- */

/* Importar a la izquierda, buscar a la derecha. Mismo ritmo que `.push` y `.uso`. */
.roela {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 22px;
  align-items: start;
}

@media (max-width: 960px) {
  .roela {
    grid-template-columns: 1fr;
  }
}

.roela .campo:first-of-type {
  margin-top: 14px;
}

.roela .btn {
  width: 100%;
  margin-top: 22px;
}

/* El selector de archivo es un boton disfrazado de campo: el cursor lo tiene que decir. */
.campo input[type="file"] {
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: 0.8rem;
}

/* Los badges del resultado de una importacion, debajo del boton. */
#roela-badges:not(:empty) {
  margin-top: 14px;
}

/*
 * LOS ERRORES DE UNA IMPORTACION SE LISTAN, no se cuentan y se tiran. Un "3 errores" sin
 * las tres lineas obliga a abrir el CSV a mano para saber cuales; el badge dice cuantos y
 * esta lista dice cuales.
 */
.roela-errores {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.roela-errores li {
  padding: 7px 11px;
  border: 1px solid var(--aviso-borde);
  border-radius: var(--r-sm);
  background: var(--aviso-bg);
  color: var(--aviso-txt);
  font-family: var(--f-mono);
  font-size: 0.7rem;
  line-height: 1.5;
  word-break: break-word;
}

/* La ficha del buscador: las mismas filas etiqueta/valor de la lectura del comprobante. */
#roela-ficha .lectura {
  margin-top: 14px;
}

/* Cuatro columnas con un CBU de 22 digitos adentro: scrollea antes que apretarse. */
.tabla-roela {
  min-width: 640px;
}

/* El alias y el CBU son numeros de cuenta: van en mono, como todo lo que se compara. */
.tabla-roela td:nth-child(2),
.tabla-roela td:nth-child(3) {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  color: var(--head);
}

/* --- Usuarios: las cuentas del panel -------------------------------------- */

/* Siete columnas (el ROL desde el 06/10/2026 y las IPs desde el 07/10), la ultima con dos
   botones adentro: scrollea antes que apretarse. 1.060 y no menos: con el ROL, a 860 RESETEAR y
   BORRAR ya se apilaban y cada fila salia del doble de alto en un telefono, y las IPs suman
   su capsula. */
.tabla-usuarios {
  min-width: 1060px;
}

/*
 * LA CELDA DE LAS IPs (07/10/2026): una capsula de las chicas (`.btn-copiar`, la de "Ficha
 * completa →") que dice cuantas tiene la cuenta y lleva a su pagina. Con cero dice AGREGAR, que
 * es lo que se va a hacer ahi.
 */
.tabla-usuarios .btn-ips {
  white-space: nowrap;
}

/* --- Usuarios > Permisos: que puede cada rol (10/10/2026) ------------------- */

/*
 * UNA FILA POR CAPACIDAD Y TRES COLUMNAS DE CASILLAS. El nombre se lleva el ancho (con la
 * descripcion chica abajo, en gris) y las casillas van en columnas angostas y centradas: se lee
 * de un vistazo "que roles tienen esto" bajando por la columna. 640 px de minimo: en un telefono
 * scrollea el `.tabla-marco` como todas las tablas del panel, y el nombre no se parte en cuatro.
 */
.permisos-bajada {
  margin-top: 6px;
  margin-bottom: 14px;
}

.tabla-permisos {
  min-width: 640px;
}

.tabla-permisos .permisos-col {
  width: 108px;
  text-align: center;
}

.tabla-permisos .permisos-col-fabrica {
  width: 150px;
}

/*
 * EL ENCABEZADO DE CADA GRUPO (Comprobantes, Avisos...). El kicker del panel —Space Mono en
 * MAYUSCULA— sobre el gris de las franjas, para que la tabla se recorra por bloques y no como
 * treinta y pico de renglones iguales. No es grafito: diez bandas oscuras en una pantalla serian
 * diez bloques gritando, y esto es un indice, no un aviso.
 */
.permisos-seccion th {
  padding: 16px 18px 8px;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: left;
  color: var(--head);
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
}

.permisos-seccion:first-child th {
  border-top: 0;
}

.permisos-nombre {
  text-align: left;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--head);
  padding: 12px 18px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}

.permisos-nombre-linea {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* La descripcion: chica y en gris, debajo del nombre. */
.permisos-desc {
  display: block;
  margin-top: 2px;
  font-size: 0.84rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--muted);
}

.permisos-solo-admin {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 4px;
}

/*
 * EL PUNTO ROJO: la fila es distinta de fabrica (como esta TILDADA). Es el acento de la pantalla
 * —"esto lo toco alguien"— y va solo, chico, al lado del nombre (MARCA.md: el rojo se raciona).
 */
.permisos-punto {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
}

.permisos-celda {
  text-align: center;
  vertical-align: middle;
}

.permisos-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 44px;
  min-height: 32px;
  cursor: pointer;
}

.permisos-check input {
  width: 18px;
  height: 18px;
  margin: 0;
  /* En TINTA y no en rojo: son cuarenta casillas tildadas, y el rojo de esta pantalla es el punto
     de "distinto de fábrica" (MARCA.md: el acento se raciona). */
  accent-color: var(--head);
  cursor: pointer;
}

/* El admin (siempre si) y lo bloqueado (siempre no): con el candado, y sin manito. */
.permisos-check.fija,
.permisos-check.fija input {
  cursor: not-allowed;
}

.permisos-check.fija input {
  opacity: 0.6;
}

.permisos-candado {
  flex: none;
  width: 13px;
  height: 13px;
  fill: none;
  stroke: var(--faint);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* La celda tocada y SIN GUARDAR: el ambar del badge "Cambios sin guardar", donde esta el cambio. */
.tabla-permisos td.sin-guardar {
  background: var(--aviso-bg);
  box-shadow: inset 0 0 0 1px var(--aviso-borde);
}

.permisos-celda-fabrica {
  text-align: right;
  white-space: nowrap;
  font-size: 0.86rem;
}

/*
 * EL ROL DE UNA CUENTA: un `<select>` con forma de badge (Space Mono MAYUSCULA, capsula), como
 * la VENTANA de Uso. Al elegir otro rol aparece abajo el boton ambar de la confirmacion
 * (`.confirmar`, "CONFIRMAR · PASA A SUPERVISOR").
 *
 * LA COLUMNA YA TIENE EL ANCHO DE ESE BOTON, aunque no este. Sin esto, armar la confirmacion
 * ensanchaba la columna ~120 px y la tabla entera se reacomodaba en el momento de leer: las
 * fechas pasaban a dos renglones y RESETEAR / BORRAR se apilaban, justo debajo del puntero.
 */
@media (min-width: 721px) {
  #usuarios-th-rol {
    width: 290px;
  }
}

.rol-celda {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/*
 * El boton ambar de la celda, a la escala del select que lo arma: un `.btn-chico` entero
 * partia "CONFIRMAR · PASA A SUPERVISOR" en dos renglones adentro de la columna. En un renglon,
 * siempre: una pildora de dos pisos se lee como dos botones.
 */
.rol-celda .btn.confirmar {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  padding: 6px 12px;
  white-space: nowrap;
}

.rol-select {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--head);
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 10px;
  cursor: pointer;
}

.rol-select:hover:not(:disabled) {
  border-color: var(--red-tint-2);
}

.rol-select:disabled {
  cursor: not-allowed;
  color: var(--faint);
}

/* El renglon de que ve cada rol, debajo de las capsulas del alta. */
#usuario-rol-detalle {
  margin-top: 8px;
}

/* --- Tu cuenta (roles, 06/10/2026) ---------------------------------------- */

/* El titulo despega del "Volver": en las fichas lo separa el `.vista-titulo`, acá no hay. */
#seccion-cuenta .seccion-cab {
  margin-top: 14px;
}

/*
 * La pagina de la cuenta: USUARIO · VE · NO PUEDE en las mismas filas etiqueta/valor de la
 * lectura de un comprobante, y abajo el bloque SESION de siempre. Con tope de ancho: son tres
 * renglones de badges, y a 1.180 px la etiqueta y su valor quedarian a un metro.
 */
.cuenta {
  max-width: 640px;
}

.cuenta .lectura {
  padding: 12px 14px;
}

.cuenta .lectura-fila {
  padding: 6px 0;
  align-items: center;
}

/* Los badges de VE y NO PUEDE envuelven alineados a la derecha, con aire entre renglones. */
.cuenta .lectura-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.cuenta .lectura-valor.lectura-badges .badge + .badge {
  margin-left: 0;
}

.cuenta .lectura-valor .nombre {
  font-family: var(--f-mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--head);
}

/* El badge VOS va pegado al nombre, no en una columna propia: es del nombre. */
.tabla-usuarios .nombre + .badge {
  margin-left: 8px;
}

.usuarios-acciones {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Cinco columnas, y la IP adentro. Misma regla que las otras tablas. */
.tabla-auditoria {
  min-width: 680px;
}

/* La IP es un numero que se compara: mono, como el alias y el CBU de Roela. */
.tabla-auditoria td:nth-child(5) {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  color: var(--head);
}

/* --- Usuarios: las IPs de una cuenta (`#ips/<usuario>`, 07/10/2026) -------- */

/* El nombre de la cuenta y su rol en el mismo renglon, como en la fila de la tabla. */
.ips-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/*
 * EL ULTIMO ACCESO: cuando, desde que IP y por cual lista entraria hoy desde ahi. La IP en mono
 * (es un numero que se compara con lo que dice la persona por telefono) y, si hoy no entraria
 * por ninguna, el boton USAR ESTA IP, que la pone en el formulario.
 */
.ips-ultima {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.ips-ultima .ips-cuando {
  color: var(--muted);
  font-size: 0.9rem;
}

.ips-numero {
  font-family: var(--f-mono);
  font-size: 0.86rem;
  color: var(--head);
  word-break: break-all;
}

/*
 * LA LISTA: una fila por lugar, como los dispositivos de TU CUENTA. A la izquierda lo que lee una
 * persona (la etiqueta, grande) y debajo la IP en mono; a la derecha quien la cargo y el QUITAR.
 */
.ips-lista {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ips-lista li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper-2);
}

.ips-quien {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ips-etiqueta {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--head);
  overflow-wrap: anywhere;
}

.ips-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-left: auto;
}

.ips-meta .pie {
  margin: 0;
  font-size: 0.8rem;
}

/*
 * El QUITAR armado ("CONFIRMAR · DEJA DE ENTRAR DESDE AHÍ"), a la escala del boton que reemplaza
 * y en UN renglon, como el del rol de la tabla: una pildora de dos pisos se lee como dos botones.
 */
.ips-meta .btn.confirmar {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  padding: 6px 12px;
  white-space: nowrap;
}

.ips-vacio {
  padding: 18px 0 4px;
  text-align: left;
}

/*
 * EL FORMULARIO: los dos campos y el boton en un renglon en una pantalla ancha, apilados en un
 * telefono. El boton baja a la linea de los inputs (no a la de los rotulos) con `align-items:
 * end`, y en el telefono ocupa todo el ancho, como el del login.
 */
.ips-campos {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 0 12px;
  align-items: end;
}

.ips-campos .campo {
  margin-top: 12px;
}

.ips-campos .btn {
  margin-top: 12px;
  white-space: nowrap;
}

#ips-ip {
  font-family: var(--f-mono);
  font-size: 0.92rem;
}

.ips-form .pie,
.ips-nota {
  font-size: 0.82rem;
}

.ips .aviso {
  text-align: left;
}

@media (max-width: 640px) {
  .ips-campos {
    grid-template-columns: 1fr;
  }

  .ips-campos .btn {
    width: 100%;
  }

  .ips-meta {
    margin-left: 0;
    width: 100%;
    justify-content: space-between;
  }
}

/* --- Usuarios: la entrega de las credenciales ----------------------------- */

/*
 * El QR VA SIEMPRE SOBRE BLANCO, tambien en modo oscuro, y no es un detalle estetico: lo
 * lee una camara. Con el fondo del panel en oscuro, un QR de modulos negros queda negro
 * sobre negro y no lo levanta ningun telefono. La caja es blanca fija (`#fff`), no
 * `var(--paper)`.
 */
.qr {
  margin-top: 16px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.qr svg {
  display: block;
  width: 100%;
  max-width: 240px;
  height: auto;
  margin: 0 auto;
  /* Un QR son cuadrados: sin esto el antialiasing le come el borde a los modulos chicos. */
  shape-rendering: crispEdges;
}

/* Cada dato entregado: el rotulo arriba, el valor y su boton COPIAR en la misma linea. */
.entrega-fila {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}

.entrega-dato {
  min-width: 0;
}

/*
 * El secreto y la clave en mono y ENTEROS: son para comparar caracter por caracter contra
 * lo que se tipea en el Authenticator, asi que no se recortan ni se tapan.
 *
 * `user-select: all` hace que un solo click seleccione todo el valor: es la ultima red del
 * COPIAR, para el navegador sin portapapeles (ver `copiar` en `app.js`).
 */
.entrega-valor {
  margin-top: 4px;
  font-family: var(--f-mono);
  font-size: 0.92rem;
  color: var(--head);
  word-break: break-all;
  user-select: all;
}

.entrega-fila .btn {
  flex: none;
}

/* El aviso ámbar de la entrega es full width y centrado, como manda DISENO.md §2. */
#usuario-entrega .aviso {
  margin-top: 20px;
}

/* Los dos botones que cierran algo: full width, como el de Push y el de Plantillas. */
#usuario-form .btn,
#usuario-listo {
  width: 100%;
  margin-top: 22px;
}

/* --- Chats: las conversaciones de Botmaker -------------------------------- */

/*
 * LOS FILTROS son cuatro controles en una fila que envuelve. No son un formulario: no hay
 * boton de "Buscar" ni de "Aplicar", cada cambio relee la tabla (las fechas y la señal al
 * soltar, el numero de cliente con la misma pausa de 250 ms que el buscador de Clientes).
 * Un boton de aplicar agrega un click a la unica pantalla que se usa con el cliente
 * hablando por telefono.
 */
.filtros {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.filtro {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/*
 * UN FILTRO QUE SON CAPSULAS (hoy: el canal, en Chats).
 *
 * Es un `<fieldset>` y no un `<label>` porque adentro hay cuatro controles y no uno: el
 * `<legend>` es lo que hace que el lector de pantalla anuncie "Canal, opción 2 de 4" en vez de
 * leer cuatro radios sueltos. Y NO usa la clase `.filtro`: ahí `span` es el rótulo, y acá los
 * `span` son las cápsulas, así que compartir la clase le pintaría el texto del filtro a las
 * cuatro opciones.
 */
.filtro-capsulas {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

/*
 * El rótulo del grupo y —cuando el backend no manda ese dato— el badge NO DISPONIBLE al lado.
 * `display: flex` en un `<legend>`: es lo que mantiene el badge en la línea del rótulo sin
 * heredar su `letter-spacing` de 0.14em, que en Space Mono de 10px lo estiraría media cápsula.
 */
.filtro-capsulas legend {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  font-family: var(--f-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

.filtro-capsulas legend .badge {
  letter-spacing: 0.12em;
}

.canal-opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
}

/* El rotulo del filtro es el mismo Space Mono chico de los `thead` y los badges. */
.filtro span {
  font-family: var(--f-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

.filtro input,
.filtro select {
  padding: 9px 13px;
  font-family: var(--f-body);
  font-size: 0.9rem;
  color: var(--head);
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}

/* El badge que acompaña a la linea de canales y pendientes (hoy: SIN RESUMIDOR). */
#chats-fuente .badge {
  margin-right: 9px;
}

/*
 * Diez columnas con un motivo adentro: scrollea antes que apretarse. Eran ocho hasta que la
 * fila pasó a ser una CONVERSACIÓN y no una sesión (08/09/2026): entraron "Conversación"
 * —sesiones, duración y el badge ABIERTA/CERRADA— y "Resumir".
 */
.tabla-chats {
  min-width: 1180px;
}

.tabla-chats td .badge + .badge {
  margin-left: 6px;
}

/*
 * "3 SESIONES · 2 H 15 MIN · CIERRA EN 18 H": el renglón de abajo de la celda Conversación.
 *
 * Va en Space Mono y en `--faint` porque son números que se comparan (con la fila de al lado y
 * con lo que dice el cliente por teléfono), y va DEBAJO del badge y no al lado porque
 * "ABIERTA · CIERRA EN 18 H · 3 SESIONES · 2 H 15 MIN" en una sola línea es una oración, no un
 * dato de tabla (DISEÑO.md §1).
 */
.conv-detalle {
  display: block;
  margin-top: 4px;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--faint);
  white-space: nowrap;
}

/*
 * El MOTIVO en una linea. Es lo que hace legible la tabla —una conversacion se reconoce por
 * el motivo, no por la hora— y por eso ocupa lo que sobra y se corta con puntos suspensivos
 * en vez de envolver: ocho columnas con un parrafo adentro dejan filas de tres renglones.
 * El texto entero vive en el `title` de la celda.
 */
.chat-motivo {
  display: block;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}

/*
 * UN BOTON QUE PARECE UN LINK. Lo usan el numero de cliente de la tabla (abre la ficha, no
 * la conversacion) y el "ver conversación" de la ficha.
 *
 * Es un `<button>` y no un `<a>` porque no navega a ningun lado: abre un cajon. Y no es un
 * `.btn` pill porque va ADENTRO de una fila que ya es clickeable y de una lista de eventos:
 * doscientos pills en una tabla convierten la tabla en una botonera. El subrayado punteado
 * es lo que dice que esto hace algo distinto que la fila que lo contiene.
 */
.ligado {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: inherit;
  color: var(--red-txt);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}

.ligado:hover:not(:disabled) {
  color: var(--red-txt-hover);
}

/*
 * Apagado = hay un resumen en vuelo (o este server no tiene resumidor). Pierde el acento y el
 * subrayado: lo que dice "esto se toca" es justamente eso, y un botón que sigue rojo y
 * subrayado mientras no hace nada es el que se aprieta tres veces.
 */
.ligado:disabled {
  color: var(--faint);
  cursor: default;
  text-decoration: none;
}

/* En la tabla el numero de cliente sigue siendo un numero: mono, como en Clientes. */
.tabla-chats .ligado {
  font-family: var(--f-mono);
  font-size: 0.85rem;
}

/* El nombre va al lado del numero, y el aire lo pone el CSS y no un espacio en el texto. */
.tabla-chats .ligado + .nombre {
  margin-left: 8px;
}

/* --- Chats: la pagina de una conversacion --------------------------------- */

/* Los tres textos del resumen (motivo, resolucion, pendientes) se leen como frases. */
.chat-texto {
  margin: 4px 0 0;
  font-size: 0.95rem;
  color: var(--text);
}

#chat-cuerpo > .tarjeta-rotulo {
  margin: 16px 0 0;
}

#chat-cuerpo .evento-badges {
  margin-top: 14px;
}

#chat-cuerpo .btn {
  margin-top: 18px;
}

/*
 * EL HILO. Columna con las burbujas alineadas segun quien habla, que es lo que hace que la
 * conversacion se lea de un vistazo sin leer un solo nombre:
 *
 *  - CLIENTE a la izquierda, sobre `--paper-2`.
 *  - OPERADOR a la derecha, sobre el tinte rojo de la marca (`--red-tint`): es el lado
 *    fuerte de "nosotros", el que atendio una persona.
 *  - BOT tambien a la derecha —del lado de "nosotros"—, pero mas suave: borde `--line-soft`
 *    y sin el tinte rojo. **Se lee igual de grande que los otros dos**, y esa es la
 *    correccion: el bot es la contraparte HABITUAL de este producto (el panel tiene "Solo
 *    el bot" como caso de primera clase), asi que la conversacion mas comun estaba escrita
 *    entera en el estilo menos legible del cajon — chico, gris y CENTRADO, que con
 *    `pre-wrap` deja las listas de pasos alineadas al medio.
 *  - RUIDO DE SISTEMA (`.sistema`: un boton apretado, una llamada, un mensaje sin texto) al
 *    medio, chico y en gris, sin fondo. Ese es el que no dice nada y no tiene que ocupar el
 *    lugar de una frase.
 */
.chat-hilo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

.burbuja {
  max-width: 82%;
  padding: 9px 13px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--paper-2);
  align-self: flex-start;
}

.burbuja.agente {
  align-self: flex-end;
  background: var(--red-tint);
  border-color: var(--red-tint-2);
}

.burbuja.bot {
  align-self: flex-end;
  border-color: var(--line-soft);
}

.burbuja.sistema {
  align-self: center;
  max-width: 92%;
  padding: 2px 0;
  border: 0;
  background: none;
  text-align: center;
}

.burbuja-texto {
  margin: 0;
  font-size: 0.92rem;
  color: var(--head);
  white-space: pre-wrap;
  word-break: break-word;
}

/*
 * EL FORMATO DE MIA (11/10/2026, `textoRico` en app.js): la negrita es la Hanken 600 que carga el
 * panel (con `bold` el navegador inventaria una 700 que no esta), la cursiva la inclina el navegador.
 */
.burbuja-texto strong {
  font-weight: 600;
}

.burbuja-texto em {
  font-style: italic;
}

.burbuja.sistema .burbuja-texto {
  font-size: 0.82rem;
  color: var(--muted);
}

/* La hora en Space Mono, como todo lo que se compara con otro reloj. */
.burbuja-pie {
  margin: 4px 0 0;
  font-family: var(--f-mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

.burbuja.agente .burbuja-pie,
.burbuja.bot .burbuja-pie {
  text-align: right;
}

/* El pie de una linea de sistema va al medio, como su texto. */
.burbuja.sistema .burbuja-pie {
  text-align: center;
}

/*
 * EL RESUMEN QUE MANDA LA APP SOLA (`quien: "app"`, etiqueta APP al pie).
 *
 * Es ruido de sistema —no lo escribio el cliente— pero **no es una linea corta**: son cinco
 * o seis renglones con lo que el cliente hizo en la autogestion antes de abrir el chat.
 * Centrado y sin caja, como el resto de `.sistema`, esa lista quedaba alineada al medio y no
 * se podia leer. Va en una cajita gris, al medio del hilo, con el texto a la izquierda: se
 * ve de una que no es una burbuja de nadie, y se lee.
 *
 * Va DESPUES de `.sistema` a proposito: misma especificidad, gana la ultima.
 */
.burbuja.app {
  max-width: 92%;
  padding: 8px 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: var(--paper-2);
  text-align: left;
}

.burbuja.app .burbuja-pie {
  text-align: left;
}

/*
 * EL SEPARADOR ENTRE SESIONES DE LA MISMA CONVERSACIÓN ("— nueva sesión 14:02 —").
 *
 * Desde el 08/09/2026 el cajón muestra la conversación ENTERA y no una sesión suelta, así que
 * adentro del hilo hay cortes: el cliente escribió, se fue tres horas y volvió. Ese corte se
 * dice con una raya fina y la hora al medio, y **no** con un título ni un bloque: es información
 * de segundo orden —lo que importa es la charla— y un encabezado por sesión partiría en tres una
 * conversación que Sergio pidió leer como una sola.
 *
 * `--line-soft` y no `--line-fuerte`: el corte fuerte de este panel separa DOS LECTURAS (los
 * chats de la línea de tiempo, un día del siguiente); acá es la misma lectura con una pausa.
 */
.chat-sesion {
  display: flex;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  margin: 4px 0;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

.chat-sesion::before,
.chat-sesion::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-soft);
}

.burbuja-adjunto {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red-txt);
}

/* --- Chats en la ficha de un cliente -------------------------------------- */

/*
 * El bloque va PRIMERO en la ficha, arriba de los eventos, y no al pie: "de que hablo" se
 * lee antes que "que toco en la app". Sin `.bloque` (que trae borde arriba) porque no es un
 * segundo tema abajo: es lo primero del cajon.
 *
 * EL CORTE DE ABAJO ES DE 2px (decision de Sergio, 08/09/2026: *"la seccion de chats se tiene
 * que destacar mas"*). Con un pixel de `--line` la raya que separaba el bloque de la linea de
 * tiempo era identica a la que separa dos eventos entre si, asi que las conversaciones se
 * leian como los primeros renglones del log en vez de como otra cosa. Son DOS lecturas
 * distintas —lo que el cliente DIJO y lo que TOCO— y el corte tiene que decirlo antes de que
 * alguien empiece a leer.
 */

/*
 * DE 900 px PARA ARRIBA LA FICHA SON DOS COLUMNAS, y eso es lo que la página compró.
 *
 * En el cajón de 460 px las dos lecturas iban una arriba de la otra por falta de lugar, y la
 * línea de tiempo —que con el registro detallado prendido son cincuenta filas— empujaba las
 * conversaciones fuera de la pantalla en cuanto alguien scrolleaba. Con el ancho de la columna
 * del panel entran las dos a la vez, que es como se usan: se lee "de qué habló" a la izquierda
 * mientras se busca "qué tocó" a la derecha, con el cliente al teléfono.
 *
 * **El corte ya no es una raya de 2px**: desde la corrida de diseño del 02/10/2026 cada bloque
 * es una sección con su franja (`.ficha-seccion`), y lo que separa las dos columnas es el aire
 * entre dos secciones. Abajo de 900 px vuelve todo a una columna, en el mismo orden.
 */
@media (min-width: 900px) {
  .ficha-cuerpo {
    display: grid;
    grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
  }
}

/*
 * EL TITULO DE UN BLOQUE DE LA FICHA. Space Grotesk 700 a 17px, en `--head`.
 *
 * No es el `.tarjeta-rotulo` de siempre (Space Mono 11px en `--faint`, MAYUSCULAS): ese es un
 * rotulo de tarjeta, y arriba de una lista de conversaciones se leia como el pie de lo de
 * arriba. El bloque CHATS es el titulo de una SECCION adentro del cajon, y los titulos de
 * seccion de este panel son display 700 (MARCA.md §3).
 */
.bloque-titulo {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--head);
}


/*
 * LOS COMPROBANTES DE LA FICHA (Sergio, 10/09/2026: ver la foto de lo que mandó el cliente,
 * aceptado o rechazado).
 *
 * Vive en la columna de los chats porque es un LEGAJO —una lista corta de cosas que el
 * cliente mandó—, no un log que crece como la línea de tiempo.
 */
.comprobantes {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.comprobante {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}

.comprobante:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

/*
 * La fecha, el monto y los badges en un renglón que se pliega. `wrap` y no `nowrap`: en la
 * columna angosta de la ficha, un comprobante con resultado + revisión + caso son tres
 * badges, y forzarlos en una línea los saca de la tarjeta.
 */
.comprobante-linea {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.comprobante-fecha {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  /* "2026-09-30" en un renglon: partida en dos no se lee como fecha. */
  white-space: nowrap;
}

/* La nota de "sigue debiendo" en la celda de revisión. No es un badge: no decidió nada. */
.comprobante-nota {
  display: block;
  margin-top: 4px;
  max-width: 16rem;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--muted);
}

/* El numerito de Sin revisar y de Aceptados por confianza, al lado del nombre de la cápsula. */
.filtro-cuenta {
  margin-left: 0.35rem;
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.comprobante-monto {
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--head);
  white-space: nowrap;
}

/*
 * CUANDO SE ANOTO, en la tabla de Solicitudes: "hace 2 h" en Space Mono y apagado, como la
 * fecha de un comprobante. La fecha exacta esta en el `title` de la celda.
 *
 * Es el mismo estilo que `.comprobante-fecha` y no la misma clase: las dos columnas dicen
 * "cuando", pero una es la fecha que leyo la IA en una foto y esta es la hora en que entro la
 * solicitud. El dia que una de las dos cambie de forma, la otra no tiene por que seguirla.
 */
.solicitud-fecha {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/*
 * "verificado hace 20 min" DEBAJO del badge de estado (24/09/2026, barrido horario contra el
 * cotizador). Mismo tono apagado que la fecha del alta; en su propio renglón para que el
 * badge no cambie de ancho según lo que diga.
 */
.solicitud-verificado {
  display: block;
  margin-top: 4px;
  white-space: nowrap;
}

/*
 * EL HORARIO DE CONTACTO debajo del teléfono (24/09/2026). Mismo tono apagado que la fecha, en
 * su renglón y con tope de ancho: un "Otro: ..." largo no puede ensanchar la columna del número.
 * El texto entero está en el `title`.
 */
.solicitud-horario {
  display: block;
  margin-top: 4px;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * LA FOTO. `max-width: 100%` y alto topeado: un comprobante es una captura de teléfono
 * —alta y angosta— y a tamaño natural empuja la línea de tiempo dos pantallas para abajo.
 * Con el tope se ve entera y legible, y el que necesita el detalle la abre con el zoom del
 * navegador.
 */
.comprobante-foto img {
  display: block;
  max-width: 100%;
  max-height: 420px;
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper-2);
}

/* El "revisar" de cada comprobante de la ficha: el puente a `#comprobante/<id>`. */
.comprobante-linea .ligado {
  margin-left: auto;
}

/*
 * EL GRÁFICO DEL PUERTO DE LA ONU (Sergio, 13/09/2026: *"cuando un cliente se queja de
 * lentitud, el operador quiere ver cómo venía el puerto de su ONU"*).
 *
 * Tercera tarjeta de la misma columna, abajo de los comprobantes: las tres son el legajo del
 * cliente —lo que dijo, lo que mandó, cómo venía su puerto— y la línea de tiempo se queda
 * sola en la otra columna. El "cuándo se pide" y los cinco finales posibles están en
 * `pintarGraficoDeFicha`, en `app.js`.
 */
.ficha-grafico {
  margin-top: 0;
}

/*
 * LA FILA QUE OCUPA LAS DOS COLUMNAS DE LA FICHA. La usa el grafico de la ONU, que es una
 * imagen de 484 px de ancho fijo: en la columna del legajo (~260 px) entraba con scroll y
 * se veia la mitad. Abajo de las dos columnas entra entero y sin achicar su texto.
 *
 * Fuera de la grilla (menos de 900 px) no hace nada: ahi la ficha ya es una sola columna.
 */
@media (min-width: 900px) {
  .ficha-cuerpo .ficha-ancho {
    grid-column: 1 / -1;
  }
}

/*
 * LA SITUACIÓN DEL CLIENTE: LOS BLOQUES EN UNA FILA (Sergio, 16/09/2026).
 *
 * Desde el 02/10/2026 son DOS —BALANCE y ONU—: el compromiso de pago pasó a ser un badge del
 * balance. `auto-fit` (y no columnas declaradas) colapsa las pistas vacías, así que los dos
 * reparten el ancho entero sin dejar el hueco de una tercera columna.
 *
 * Los mismos bloques se pintan en la revisión de un comprobante APILADOS, dentro de una columna
 * angosta, y ahí `minmax` los deja en una sola columna sin una regla aparte (también a 390 px).
 *
 * `.lectura` trae `margin-top: 9px` de su uso original (uno abajo del otro); en la grilla eso
 * desalinearía la primera fila contra el título, así que se anula: quien separa acá es el `gap`.
 */
.situacion-fila {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px 20px;
  align-items: start;
}

.situacion-fila > .lectura {
  margin-top: 0;
}

/*
 * EL FILTRO DE LA LÍNEA DE TIEMPO, arriba de la primera fila y separado de ella.
 *
 * El `padding-bottom` + el borde son lo que evita que las cápsulas se lean como parte del
 * primer día: sin la línea, "Hechos / Todo" quedaba flotando arriba de "Hoy" como si fuera su
 * encabezado.
 */
.ficha-filtro {
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}

.ficha-filtro .pie {
  margin: 8px 0 0;
}

.grafico-rangos,
.grafico-onus .filtro-capsulas {
  margin-top: 12px;
}

.grafico-acciones {
  margin-top: 12px;
}

.grafico-onu {
  /* `figure` trae 1em de margen a los cuatro lados del navegador. */
  margin: 12px 0 0;
}

/*
 * EL RENGLÓN EN CASTELLANO, ARRIBA DE LA IMAGEN.
 *
 * El PNG viene con su propio título y dice `gpon-onu_1/7/16:15`, que no le dice nada a nadie:
 * esto dice de QUÉ ONU es y DESDE CUÁNDO. Se pliega porque un serial de SmartOLT mide 16
 * caracteres y la columna de la ficha son 380 px.
 */
.grafico-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-bottom: 8px;
}

.grafico-quien {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--head);
}

.grafico-cuando {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/*
 * EL MARCO SCROLLEA EN HORIZONTAL Y LA IMAGEN NO LLEVA NINGUNA MEDIDA. A propósito, y es la
 * única decisión de diseño de este bloque:
 *
 * el gráfico es un RRD de 484x190 con las etiquetas dibujadas adentro a 8 px (Upload,
 * Download, Current, Maximum y el eje en bits por segundo). La columna izquierda de la ficha
 * mide entre 280 y 380, así que un `max-width: 100%` lo bajaría a ~78% y esas etiquetas —que
 * son la mitad de la información— quedarían ilegibles. Se muestra a tamaño natural y el marco
 * scrollea, igual que `.tabla-marco` con las tablas anchas. De 900 px para abajo la ficha es
 * de una sola columna y entra entero sin scrollear.
 */
.grafico-marco {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper-2);
}

.grafico-marco img {
  display: block;
}

.grafico-salida .pie,
.grafico-salida .aviso {
  margin-top: 8px;
}

/* --- La cola de comprobantes y su revisión -------------------------------- */

/*
 * Siete columnas con dos badges en la última (la de CUENTA, 30/09/2026, suma "CON DEUDA
 * $ 45.000"). Es un piso pedido, no una garantía: con `width: 100%` el navegador igual reparte
 * el ancho del marco, y lo que no entra lo resuelve el scroll horizontal de `.tabla-marco`.
 */
.tabla-comprobantes {
  min-width: 1000px;
  /*
   * `separate` y no el `collapse` de las otras tablas (13/10/2026): con `collapse` el navegador no
   * sostiene `sticky` en la celda de los botones. Es el mismo arreglo de `.tabla-solicitudes`; con
   * `border-spacing: 0` y las rayas en cada celda se ve igual.
   */
  border-collapse: separate;
  border-spacing: 0;
}

/*
 * CELDAS MÁS ANGOSTAS (13/10/2026): con la columna de los tres íconos la tabla pasó de ~1150 a
 * ~1280 px y a 1280 de pantalla (marco de 1130) la columna pegada a la derecha tapaba REVISIÓN,
 * justo donde se lee si el comprobante ya se decidió. Con 8 px por lado (y no los 18 de las demás
 * tablas) entra entera en el marco sin scroll; lo que no entre se sigue resolviendo con el scroll
 * de `.tabla-marco`.
 */
.tabla-comprobantes thead th,
.tabla-comprobantes tbody td {
  padding-left: 8px;
  padding-right: 8px;
}

/*
 * APÓCRIFOS: la misma tabla que la cola, con menos columnas. El piso evita que VECES y
 * MONTO se aplasten; lo que no entra lo scrollea `.tabla-marco`, igual que la cola.
 */
.tabla-apocrifos {
  min-width: 880px;
}

#comprobantes-apocrifos-filas tr {
  cursor: pointer;
}

#comprobantes-apocrifos-filas tr:hover td {
  background: var(--paper-2);
}

#comprobantes-apocrifos-filas tr:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: -2px;
}

/* La hora del original y, debajo, el Nº. El Nº no abre la fila. */
.tabla-apocrifos th:last-child,
.tabla-apocrifos td:last-child {
  min-width: 12rem;
}

.apocrifo-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin-top: 4px;
}

.apocrifo-meta .ligado {
  font-family: var(--f-mono);
  font-size: 0.85rem;
}

/* El nombre va abajo del número, en el cuerpo: el número es la clave, el nombre se lee. */
.comprobante-nombre {
  display: block;
  margin-top: 2px;
  font-size: 0.85rem;
  color: var(--head);
  white-space: nowrap;
}

/* Un intento pisado (solo con "Mostrar intentos pisados"): se ve, pero en segundo plano. */
#comprobantes-filas tr.comprobante-pisado td {
  opacity: 0.6;
}

/*
 * LOS TRES BOTONES DE LA FILA (Sergio, 13/10/2026): ver comprobante, aprobar, rechazar.
 *
 * La columna va PEGADA AL BORDE DERECHO del marco, como el lead de Solicitudes: la tabla mide mil
 * píxeles y a 390 el scroll horizontal se llevaría los botones justo donde se decide. Pegada, los
 * tres siguen a la vista mientras se recorre el resto de la fila. Opaca (`--paper`, y la cabecera
 * `--paper-2`): lo que pasa por debajo no se tiene que leer a través.
 */
.tabla-comprobantes th.col-acciones,
.tabla-comprobantes td.col-acciones {
  position: sticky;
  right: 0;
  z-index: 1;
  width: 1%;
  white-space: nowrap;
  padding-left: 6px;
  padding-right: 8px;
  /* El resto de la fila pasa por debajo: la línea dice dónde empiezan los botones. */
  box-shadow: inset 1px 0 0 var(--line);
}

.tabla-comprobantes td.col-acciones {
  background: var(--paper);
}

/* Un pisado va atenuado, pero sus botones no: la celda es opaca y no se deja ver a través. */
#comprobantes-filas tr.comprobante-pisado td.col-acciones {
  opacity: 1;
}

.fila-acciones {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

/*
 * EL ÍCONO-BOTÓN: píldora (círculo) de 32 px —el mínimo táctil de la fila es 32— con el trazo
 * del manual (line-art, `currentColor`). El color dice qué hace, y el verde y el rojo son los
 * del resto del panel: verde confirma (`--ok-*`), el rojo es el acento de marca y NO un fondo
 * lleno (MARCA.md: el rojo es acento), así que va en tinte con letra roja.
 */
.btn-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper-3);
  color: var(--head);
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.btn-icono svg {
  width: 18px;
  height: 18px;
}

.btn-icono:hover:not(:disabled) {
  background: var(--paper-2);
  border-color: var(--faint);
}

.btn-icono:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.btn-icono:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-icono.aprobar {
  background: var(--ok-bg);
  border-color: var(--ok-borde);
  color: var(--ok-txt);
}

.btn-icono.aprobar:hover:not(:disabled) {
  background: var(--ok-borde);
  border-color: var(--ok-txt);
}

.btn-icono.rechazar {
  background: var(--red-tint);
  border-color: var(--red-tint-2);
  color: var(--red-txt);
}

.btn-icono.rechazar:hover:not(:disabled) {
  background: var(--red-tint-2);
  border-color: var(--red-txt);
}

/* El que tiene su fila de abajo abierta: un anillo del mismo color, adentro. */
.btn-icono.abierto {
  box-shadow: inset 0 0 0 1.5px currentColor;
}

/* Con una acción en vuelo, las decisiones de todas las filas esperan (el ojo sigue). */
.fila-trabajando .btn-icono.aprobar,
.fila-trabajando .btn-icono.rechazar {
  opacity: 0.45;
  pointer-events: none;
}

/*
 * LA FILA DE ABAJO (el segundo click y la foto): una sola celda que cruza toda la tabla, y su
 * contenido PEGADO A LA IZQUIERDA del marco (`sticky`), con un ancho que sigue a la ventana:
 * a 390 px la tabla scrollea, y un formulario de 1000 px de ancho quedaría fuera de la vista.
 * No es un link: no abre la revisión ni tiene la manito de las filas.
 */
#comprobantes-filas tr.comprobante-extra {
  cursor: default;
}

#comprobantes-filas tr.comprobante-extra td,
#comprobantes-filas tr.comprobante-extra:hover td {
  padding: 0;
  background: var(--paper-3);
  border-bottom: 1px solid var(--line);
}

.fila-extra {
  position: sticky;
  left: 0;
  box-sizing: border-box;
  width: min(640px, calc(100vw - 66px));
  padding: 14px 18px 16px;
}

.fila-extra-accion:not([hidden]) + .fila-extra-foto:not([hidden]) {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.fila-extra-cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.fila-extra-titulo {
  margin: 0 0 6px;
  font-family: var(--f-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--head);
}

.fila-extra-cabeza .fila-extra-titulo {
  margin: 0;
}

.fila-extra-linea {
  margin: 0 0 4px;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--text);
}

.fila-extra-ojo {
  font-weight: 600;
  color: var(--aviso-txt);
}

.fila-extra .campo {
  margin-top: 12px;
}

.fila-extra-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.fila-foto {
  display: block;
  max-width: 100%;
  max-height: 70vh;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
}

@media (max-width: 560px) {
  .tabla-comprobantes td.col-acciones {
    padding-left: 6px;
    padding-right: 8px;
  }

  .fila-acciones {
    gap: 4px;
  }

  /* 32 px: el mínimo táctil de la fila, para que los tres ocupen lo menos posible a 390 px. */
  .tabla-comprobantes .btn-icono {
    width: 32px;
    height: 32px;
  }

  /* Los botones de la confirmación, uno abajo del otro a todo el ancho, como los de la barra. */
  .fila-extra-botones .btn {
    flex: 1 1 100%;
  }
}

/* --- La edición masiva (Sergio, 02/10/2026) --------------------------------- */

/*
 * LA COLUMNA DE LA CASILLA: angosta, y la casilla con un blanco de 44 px de alto para el
 * dedo. El `label` llena la celda: un click en el borde de la celda tilda, no abre la fila.
 */
.tabla-comprobantes .col-marca {
  width: 44px;
  padding: 0 0 0 10px;
}

.tabla-comprobantes .col-marca input,
.tabla-comprobantes .marca input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--red);
  cursor: pointer;
}

.tabla-comprobantes .col-marca input:disabled {
  cursor: default;
}

.tabla-comprobantes .marca {
  display: flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
}

/* La barra: la misma tarjeta que la tabla, pegada arriba de ella. */
.masivo {
  margin-bottom: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper-2);
}

.masivo-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}

/* "12 MARCADOS": el número es el mensaje, en mono como un badge. */
.masivo-cuenta,
.masivo-progreso,
.masivo-titulo {
  margin: 0;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--head);
  overflow-wrap: anywhere;
}

.masivo-titulo:focus {
  outline: none;
}

.masivo-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.masivo > .pie {
  margin: 8px 0 0;
}

.masivo-confirma,
.masivo-corre,
.masivo-resumen {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.masivo-confirma .campo {
  max-width: 420px;
  margin-top: 12px;
}

.masivo-confirma .masivo-acciones {
  margin-top: 14px;
}

/* Lo que hace, en renglones cortos: no un párrafo (DISEÑO §1). */
.masivo-dice {
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--text);
  font-size: 0.92rem;
}

.masivo-lista {
  margin: 10px 0 0;
  padding-left: 22px;
  max-height: 260px;
  overflow-y: auto;
  font-size: 0.9rem;
  color: var(--text);
  overflow-wrap: anywhere;
}

.masivo-lista li + li {
  margin-top: 4px;
}

.masivo-monto {
  color: var(--muted);
}

.masivo-corre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}

/* Solo el resumen (ya no queda nada marcado): sin la raya de arriba. */
.masivo.solo-resumen .masivo-resumen {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* El resumen no se corta: se lee entero, sin scroll propio. */
.masivo-resumen .masivo-lista {
  max-height: none;
}

.masivo-renglon-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.masivo-renglon-texto {
  margin: 2px 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.masivo-resumen > .ligado {
  margin-top: 12px;
}

/* A 390 px los botones van uno abajo del otro, a todo el ancho. */
@media (max-width: 560px) {
  .masivo-acciones .btn {
    flex: 1 1 100%;
  }
  .masivo-corre .btn {
    width: 100%;
  }
}

/*
 * SIETE COLUMNAS —cuando, quien, telefono, servicio, cobertura, estado y el lead—: abajo de
 * este ancho el nombre y el servicio se parten en tres renglones cada uno y la tabla deja de
 * poder leerse de un vistazo, que es lo unico para lo que existe. `.tabla-marco` ya scrollea
 * en horizontal.
 *
 * 1120 y no 960 (09/10/2026): la píldora del lead ("Nº 4120") no entra en la última columna
 * cuando el estado trae CONVERTIDA · PROGRAMADA. Con el mínimo viejo la tabla seguía al
 * ancho del panel y el botón se cortaba en el borde, sin barra para llegar a verlo.
 */
.tabla-solicitudes {
  min-width: 1120px;
  /*
   * `separate` y no el `collapse` de las otras tablas: si no, el navegador no sostiene
   * `sticky` en la celda del lead y el botón vuelve a irse con el scroll.
   */
  border-collapse: separate;
  border-spacing: 0;
}

/*
 * La píldora no se parte ni se aplasta: la columna mide lo que mide el botón.
 *
 * Y queda pegada al borde derecho del marco (09/10/2026). En una ventana donde las siete
 * columnas no entran, el scroll se lleva el lead y el botón al cotizador no se ve: ni el
 * encabezado LEAD. Pegada, sigue a la vista mientras se recorre el resto.
 */

.tabla-solicitudes th:last-child,
.tabla-solicitudes td:last-child {
  position: sticky;
  right: 0;
  z-index: 1;
  width: 1%;
  white-space: nowrap;
  /* El resto de la fila pasa por debajo: la línea dice dónde empieza el lead. */
  box-shadow: inset 1px 0 0 var(--line);
}

.tabla-solicitudes th:last-child {
  background: var(--paper-2);
}

.tabla-solicitudes td:last-child {
  background: var(--paper);
}

/*
 * LA LISTA SALE DEL TOPE DE 1180. Siete columnas con badges y la píldora no entran ahí: el
 * lead quedaba cortado en el borde derecho. Acá la lista usa el ancho de la ventana, hasta
 * 1520, y queda centrada. La ficha de una solicitud no: sigue en la columna de lectura.
 */
#solicitudes-panel {
  --solicitudes-ancho: min(1520px, max(100%, calc(100vw - 64px)));
  width: var(--solicitudes-ancho);
  margin-left: calc((100% - var(--solicitudes-ancho)) / 2);
}

/*
 * LA REVISIÓN ES DE DOS COLUMNAS Y LA FOTO VA A LA IZQUIERDA.
 *
 * Comparar es el trabajo de esta pantalla: el CBU que leyó la IA contra el que se ve en la
 * captura. Una arriba de la otra obliga a scrollear entre los dos datos que hay que mirar
 * juntos, que es lo mismo que cambiar de pantalla pero más lento.
 *
 * Abajo de 900 px vuelve a una sola columna —con la foto primero, que es lo que se mira—,
 * igual que la ficha del cliente.
 */
.revision {
  display: grid;
  gap: 22px;
}

@media (min-width: 900px) {
  .revision {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }

  /*
   * La foto ACOMPAÑA el scroll de la columna de datos. Un comprobante es una captura alta y
   * angosta y la lectura de al lado puede ser larga: sin esto, mirar la última fila deja la
   * foto arriba, fuera de la pantalla, que es justo lo que estas dos columnas evitan.
   *
   * Se pega DEBAJO DEL MENU, que tambien es sticky: header + menu (dos renglones, ~100 px;
   * `--alto-menu` lo mide app.js) + 12 px de aire. Con el `+ 34px` de la barra vieja de un
   * renglon, el menu nuevo le tapaba el encabezado a la foto.
   */
  .revision-foto {
    position: sticky;
    top: calc(var(--alto-barra, 62px) + var(--alto-menu, 100px) + 12px);
  }
}

.revision-foto img {
  display: block;
  max-width: 100%;
  max-height: 72vh;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper-2);
}

.revision-datos .lectura + .lectura {
  margin-top: 16px;
}

/*
 * El renglón que firma CUÁNDO se consultó el estado del cliente ("Consultado recién · es una
 * lectura: no se guardó nada"). Va pegado abajo del último de los bloques —balance (con el
 * compromiso como badge) y ONU— y habla de todos, así que respira un poco más que un pie
 * cualquiera: con los 6 px de `.pie` se leía como parte del bloque de la ONU.
 */
.revision-datos .lectura + .pie {
  margin-top: 10px;
}

/* Los cuatro botones y el enlace al cliente, en un renglón que se pliega. */
.revision-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

/* El motivo del rechazo: ancho de campo de texto, no de pantalla. */
.campo-motivo {
  max-width: 420px;
  margin-top: 12px;
}

/*
 * CADA SESION ES UNA TARJETA DE DOS RENGLONES y no una fila apretada.
 *
 * Arriba, lo que la identifica: cuando, por donde entro (badge de canal con su marca), que
 * señal dejo y si quedo resuelta; a la derecha del mismo renglon, los mensajes. Abajo, el
 * motivo del resumen, que es la frase que contesta "¿de que hablo?" y por la que se abre esta
 * ficha con el cliente al telefono. Todo en un renglon —como estaba— dejaba el motivo
 * peleandole el ancho a cuatro badges y cortado a la mitad.
 */
.chats-lista {
  gap: 8px;
}

.chats-lista li {
  display: block;
  padding: 11px 13px;
  cursor: pointer;
}

.chats-lista li:hover {
  border-color: var(--red-tint-2);
  background: var(--paper-3);
}

.chat-cab {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/*
 * En la tarjeta de la ficha el mismo renglon SÍ envuelve, al reves que en la tabla. Es la
 * misma diferencia que tiene `.chat-motivo` entre las dos pantallas: en una celda de tabla un
 * renglon de tres lineas rompe la fila, y en una tarjeta de 342 px (un teléfono a 390) "3
 * SESIONES · 2 H 15 MIN · CIERRA EN 18 H" en una sola linea se sale de la caja.
 */
.chats-lista .conv-detalle {
  white-space: normal;
}

/* "3 · 2 · 5 mensajes" al final del renglon: es el volumen, no el contenido. */
.chat-mensajes {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--faint);
  white-space: nowrap;
}

/*
 * El motivo de la sesion: renglon propio, tipografia de cuerpo y SIN cortar.
 *
 * Los tres `white-space` / `overflow` / `text-overflow` desarman a mano el recorte con puntos
 * suspensivos que trae `.chat-motivo`, y ahi esta la diferencia entre las dos pantallas: en la
 * TABLA el motivo es una de ocho columnas y tiene que medir un renglon o las filas pasan a
 * tres; en la FICHA es la frase por la que se abrio el cajon, tiene el ancho entero de la
 * tarjeta para ella y envuelve. `.chat-motivo` sigue siendo el mismo nodo en los dos lados
 * porque es el mismo dato — lo que cambia es cuanto lugar tiene.
 */
.chats-lista .chat-motivo {
  display: block;
  flex: none;
  max-width: none;
  margin-top: 7px;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--head);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* --- Configuracion: el interruptor ---------------------------------------- */

/*
 * UN INTERRUPTOR DE VERDAD: un `<input type="checkbox">` adentro de un `<label>`.
 *
 * Es el mismo reparto que las capsulas de tema y de canal —el control nativo escondido, la
 * forma dibujada por CSS—: el estado lo dice `checked`, la barra espaciadora lo cambia, el
 * lector de pantalla anuncia "casilla de verificacion, marcada" sin una linea de JS de
 * teclado y `:has(input:focus-visible)` le devuelve el anillo de foco que el control
 * escondido se lleva. Un `<div role="switch">` habria que ensenarle las cuatro cosas a mano.
 */
.config {
  max-width: 560px;
}

.interruptor {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper-3);
  cursor: pointer;
}

.interruptor input {
  position: absolute;
  inset: 0 auto auto 0;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  pointer-events: none;
}

.interruptor .pista {
  flex: none;
  position: relative;
  width: 44px;
  height: 26px;
  margin-top: 1px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--nada-bg);
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}

.interruptor .perilla {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  transition: transform 0.2s ease;
}

/* Encendido: el acento de la marca, el mismo de la pestana activa y del boton primario. */
.interruptor:has(input:checked) .pista {
  background: var(--red);
  border-color: var(--red);
}

.interruptor:has(input:checked) .perilla {
  transform: translateX(18px);
  border-color: var(--red-deep);
}

.interruptor:has(input:focus-visible) {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

.interruptor:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.55;
}

.interruptor-texto {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--head);
  line-height: 1.35;
}

.interruptor-detalle {
  display: block;
  margin-top: 3px;
  font-size: 0.86rem;
  font-weight: 400;
  font-style: normal;
  color: var(--muted);
}

/*
 * CADA BLOQUE SE SEPARA DEL ANTERIOR CON UNA LÍNEA. Son perillas de cosas distintas —una es
 * privacidad de los clientes, otra es cuánto le creemos al lector, otra es la política de
 * aceptación de esta etapa— y pegadas se leerían como una sola tarjeta con varios controles.
 * Con los dos números (sensibilidad y política) la línea deja de ser cosmética: es lo que
 * impide leerlos como dos campos del mismo ajuste.
 */
.config + .config {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
}

/* El número y su Guardar, en un renglón: el botón es el acto, y va al lado de lo que guarda. */
.config-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin-top: 10px;
}

/*
 * 0-100 son tres dígitos: un campo del ancho de la pantalla mentiría sobre lo que se espera
 * que entre. Las flechas del `number` se dejan —subir de a uno es el gesto de ajustar esto—.
 */
.campo-numero {
  width: 120px;
}

.config-nota {
  margin-top: 12px;
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.45;
}

/* El aviso ambar del bloque: full width y centrado, como manda DISENO.md §2. */
.config .aviso {
  margin-top: 14px;
}

.config .pie {
  margin-top: 12px;
}

/* --- Pie ----------------------------------------------------------------- */

.pie-pagina {
  padding: 26px 0 40px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/*
 * EL PIE QUE AVISA ALGO, no el que solo cuenta quien toco la perilla. Lo usa la politica de
 * esta etapa cuando queda por debajo de la sensibilidad (ver `pintarRelaja`): es un renglon
 * que hay que leer, no uno que acompaña.
 */
.pie-ojo {
  color: var(--aviso-txt);
  font-weight: 600;
}

/* --- Configuracion: el modelo de puntaje (06/10/2026) --------------------- */

/*
 * LA TARJETA ANCHA DE CONFIGURACION. Adentro hay una tabla de dos columnas y la lista de la
 * simulacion: a los 560 px de las otras perillas, el nombre de cada evento se partiria en tres
 * renglones. 820 es lo que miden la tabla y una fila de la simulacion sin partirse.
 */
.config-puntaje {
  max-width: 820px;
}

/*
 * EL BADGE AMBAR ADENTRO DE UNA `.config`. `.config .aviso` (el cartel de resultado, 14px de
 * margen arriba) tambien matchea `badge aviso` y le gana a `.badge` por especificidad: en esta
 * tarjeta hay badges ambar en la tabla, en la barra y en la simulacion, y cada uno quedaba 14px
 * mas abajo que lo de al lado.
 */
.config-puntaje .badge,
#config-umbrales .badge {
  margin-top: 0;
}

/*
 * LA TABLA. Dos columnas y sin el `min-width` de 620 de las tablas del panel: en un telefono
 * el nombre del evento se parte y el campo queda a la derecha, sin scroll de costado.
 */
.puntaje-marco {
  margin-top: 16px;
}

#tabla-puntaje {
  min-width: 0;
}

#tabla-puntaje thead th:last-child,
#tabla-puntaje td.puntaje-valor {
  text-align: right;
}

#tabla-puntaje td {
  padding: 10px 16px;
  vertical-align: middle;
}

/*
 * LOS ROTULOS DE CADA TRAMO ("RECHAZAN SIEMPRE", "NO SE PUNTUAN", "RESTAN PUNTOS"): el mismo
 * Space Mono de la cabecera, sobre el papel 2, para que se lean como partes de la tabla y no
 * como filas.
 */
#tabla-puntaje tr.puntaje-grupo th {
  padding: 9px 16px 8px;
  text-align: left;
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line-soft);
  text-transform: none;
  letter-spacing: 0;
}

/* El primer tramo no lleva la raya de arriba: ya la pone la cabecera de la tabla. */
#tabla-puntaje tbody:first-of-type tr.puntaje-grupo th {
  border-top: 0;
}

.puntaje-grupo-texto {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--head);
}

.puntaje-grupo-detalle {
  margin-left: 10px;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

.puntaje-nombre {
  display: block;
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--head);
  line-height: 1.35;
}

.puntaje-desc {
  display: block;
  margin-top: 2px;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.4;
}

/* Lo que no se edita se ve quieto: el nombre en el gris del cuerpo, no en tinta. */
#tabla-puntaje tr.puntaje-fija .puntaje-nombre {
  font-weight: 500;
  color: var(--text);
}

/* La fila fija: el nombre a la izquierda y el badge a la derecha, en una sola celda. */
.puntaje-fija-caja {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.puntaje-fija-textos {
  min-width: 0;
}

.puntaje-fija-caja .badge {
  flex: none;
}

.puntaje-nada {
  font-size: 0.88rem;
  color: var(--muted);
}

#tabla-puntaje td.puntaje-valor {
  white-space: nowrap;
}

/* El "−" y el campo, pegados: el numero que se escribe es lo que se RESTA. */
.puntaje-campo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.puntaje-menos {
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--muted);
}

/*
 * EL CAMPO, del ancho de tres digitos y en Space Mono como los precios. El fondo y el borde son
 * los de `.campo input` (tokens: anda en los dos temas); el foco es el anillo rojo de siempre y
 * el ERROR es el fondo en el rojo tenue de la falla —el foco y el error no se dicen con el
 * mismo dibujo (DISEÑO.md §2)—.
 */
#tabla-puntaje input[type='number'] {
  width: 74px;
  padding: 8px 10px;
  font-family: var(--f-mono);
  font-size: 0.92rem;
  text-align: right;
  color: var(--head);
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

#tabla-puntaje input[type='number']:focus {
  border-color: var(--red-tint-2);
}

#tabla-puntaje input[type='number']:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

#tabla-puntaje input.mal {
  background: var(--falla-bg);
  border-color: var(--falla-borde);
}

#tabla-puntaje input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* "era 30": lo guardado, abajo del campo que se cambio. Ambar: hay algo sin guardar. */
.puntaje-era {
  display: block;
  margin-top: 4px;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--aviso-txt);
}

/* "inicial 30": lo de fabrica, cuando lo guardado es otro. Gris: es un dato, no un aviso. */
.puntaje-era.inicial {
  color: var(--faint);
}

/*
 * LA CUENTA ("90 − 30 sin fecha − 10 pantalla de la app = 50 ≥ 10 → ACEPTADO"). Los numeros
 * en la tipografia de las cifras y en tinta, los nombres en gris, los signos en gris claro: se
 * lee como una cuenta y no como una frase. Se usa en el ejemplo de la tabla, en la revision
 * de un comprobante y en lo que contesta Revalidar.
 */
.desglose {
  margin-top: 8px;
}

.desglose-cuenta {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.9;
  color: var(--muted);
}

.desglose-num {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--head);
  letter-spacing: -0.01em;
}

.desglose-total {
  font-size: 1.22rem;
}

/* Los signos en la letra del cuerpo: la de Space Grotesk dibuja una flecha chica y baja. */
.desglose-op {
  font-family: var(--f-body);
  font-weight: 600;
  color: var(--faint);
}

/* Y la flecha, un poco más grande: es la que separa la cuenta del veredicto. */
.desglose-flecha {
  font-size: 1.2em;
  line-height: 1;
}

.desglose-ev {
  color: var(--text);
}

.desglose-cuenta .badge {
  vertical-align: 2px;
}

.desglose-cero {
  margin: 2px 0 0;
  font-size: 0.82rem;
  color: var(--muted);
}

/* El ejemplo, debajo de la tabla: el mismo marco de "lo que leyo la IA", sin titulo grande. */
.puntaje-ejemplo:not(:empty) {
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px dashed var(--line-fuerte);
  border-radius: var(--r-sm);
  background: var(--paper-3);
}

.puntaje-ejemplo-rotulo {
  margin: 0;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

/* Simular, Guardar, Descartar y el porque, en un renglon que se parte en el telefono. */
.puntaje-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-top: 14px;
}

.puntaje-barra .badge {
  margin-left: auto;
}

.puntaje-motivo {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--falla-txt);
}

/*
 * LA SIMULACION. Un bloque propio debajo de la barra, separado por una linea: es otra clase de
 * dato (lo que PASARIA, no lo que hay). Vieja —se toco un numero despues de simular— se
 * atenua entera, y el renglon ambar de arriba dice por que.
 */
.puntaje-simulacion:not(:empty) {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}

.puntaje-simulacion .tarjeta-rotulo {
  margin: 0;
}

.puntaje-simulacion .config-nota {
  margin-top: 6px;
}

.puntaje-simulacion .cifra {
  margin-top: 6px;
}

.puntaje-simulacion.vieja .cifra,
.puntaje-simulacion.vieja .evento-badges,
.puntaje-simulacion.vieja .sim-lista {
  opacity: 0.5;
}

.sim-lista {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
}

.sim-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 16px;
  align-items: center;
  padding: 10px 14px;
  border-top: 1px solid var(--line-soft);
}

.sim-fila:first-child {
  border-top: 0;
}

.sim-quien {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  min-width: 0;
}

.sim-quien .ligado {
  font-family: var(--f-mono);
  font-size: 0.85rem;
  font-weight: 700;
}

.sim-cliente {
  font-size: 0.88rem;
  color: var(--head);
}

.sim-fecha {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--faint);
}

.sim-cambio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.sim-flecha {
  font-family: var(--f-display);
  color: var(--faint);
}

.sim-puntaje {
  margin-left: 4px;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--head);
}

.sim-eventos {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

/* "Aquella vez: NO SE PUDO LEER": lo que quedó escrito el día del aviso, en chico. */
.sim-guardado {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

/* En el telefono, el cambio de veredicto baja abajo del numero y del cliente. */
@media (max-width: 640px) {
  .sim-fila {
    grid-template-columns: minmax(0, 1fr);
  }

  .sim-cambio {
    justify-content: flex-start;
  }

  #tabla-puntaje td {
    padding: 10px 12px;
  }

  .puntaje-grupo-detalle {
    display: block;
    margin: 3px 0 0;
  }

  /* El badge de las filas fijas baja abajo del nombre: el nombre se queda con el ancho. */
  .puntaje-fija-caja {
    flex-direction: column;
    align-items: flex-start;
  }
}

/*
 * LOS DOS UMBRALES DEL SERVIDOR: el numero es el mensaje (Space Grotesk grande) y el nombre
 * arriba en Space Mono, como las tarjetas de Salud. Solo lectura: no hay borde de campo, porque
 * lo que no se puede tocar no se dibuja como algo que se toca.
 */
.umbrales {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0 0;
}

.umbral {
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper-3);
}

.umbral dt {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  line-height: 1.5;
}

.umbral dd {
  margin: 4px 0 0;
  font-family: var(--f-display);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--head);
}

.umbral dd.umbral-desc {
  margin-top: 4px;
  font-family: var(--f-body);
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--muted);
}

@media (max-width: 480px) {
  .umbrales {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Precios de contratación --------------------------------------------- */

/*
 * LA PANTALLA DE PRECIOS es la unica `.config` que NO entra en 560px: adentro hay una tabla de
 * ocho columnas (velocidad, se ofrece, tres precios y tres codigos de Gestion Real). El tope de
 * 560 existe para que un interruptor con su frase no quede de punta a punta de una pantalla
 * ancha; una grilla de precios necesita lo contrario, y comprimida a 560 scrollearia en
 * horizontal para leer la columna que decide la venta.
 */
.config-ancho {
  max-width: 980px;
}

/*
 * OCHO COLUMNAS CON CAMPOS ADENTRO EN EL ANCHO DEL PANEL (~925px).
 *
 * El `min-width` general de las tablas (620px) no alcanza y 860 sobra: con 860 la grilla
 * scrolleaba en horizontal en una notebook y la ultima columna —el codigo del Pack Fútbol—
 * quedaba afuera del borde. Se gana el lugar donde no cuesta nada: el padding de las celdas
 * (esta tabla son campos, no renglones de texto) y el ancho de los tres codigos, que hoy son
 * numeros de dos cifras.
 */
#tabla-precios {
  min-width: 760px;
}

/*
 * LA TABLA DE ROUTERS (Sergio, 20/09/2026) COMPARTE TODO CON LA DE PRECIOS, y por eso entra en
 * los mismos selectores en vez de traer reglas propias: son la misma pantalla y la misma clase
 * de dato —una fila por producto, una casilla de "se ofrece" y un precio en Space Mono—. Dos
 * bloques de CSS para dos tablas que tienen que verse iguales es la forma de que en un mes se
 * vean distintas.
 *
 * Lo unico suyo es el ancho: cuatro columnas, no ocho.
 */
#tabla-routers {
  min-width: 520px;
}

#tabla-precios thead th,
#tabla-precios tbody td,
#tabla-routers thead th,
#tabla-routers tbody td {
  padding: 10px 12px;
}

#tabla-precios thead th:not(:first-child),
#tabla-routers thead th:not(:first-child) {
  text-align: right;
}

#tabla-precios tbody td:not(:first-child),
#tabla-routers tbody td:not(:first-child) {
  text-align: right;
}

/*
 * LOS CAMPOS DE ADENTRO DE LA TABLA. Angostos y alineados a la derecha, como los numeros que
 * llevan: un input de ancho completo adentro de una celda haria que la grilla se lea como un
 * formulario de ocho renglones en vez de como una tabla de precios.
 */
#tabla-precios input[type='number'],
#tabla-routers input[type='number'] {
  width: 96px;
  margin-top: 0;
  padding: 8px 10px;
  font-family: var(--f-mono);
  font-size: 0.9rem;
  text-align: right;
}

/*
 * PRECIOS DE SOLO LECTURA (roles, 06/10/2026): apagado se ve apagado. `.campo input` pinta su
 * texto con `--head`, que le gana al gris que el navegador le da a un campo deshabilitado, y los
 * opcionales (TV, Fútbol, Profesional, la promo, la vigencia) se veian editables al lado de la
 * grilla gris para quien no los puede tocar. El cursor lo dice antes del click. Vale tambien
 * para el instante en que se esta guardando, que apaga los mismos campos.
 */
#seccion-precios .campo input:disabled,
#seccion-precios .campo textarea:disabled,
#seccion-precios .campo select:disabled {
  color: var(--muted);
}

#seccion-precios input:disabled,
#seccion-precios textarea:disabled,
#seccion-precios select:disabled {
  cursor: not-allowed;
}

/* Los codigos de Gestion Real son de dos cifras hoy: no necesitan el ancho de un precio. */
#tabla-precios input.codigo {
  width: 66px;
}

/*
 * LAS DOS COLUMNAS CALCULADAS. Space Mono como los otros numeros, en gris y sin caja: **lo que
 * no se puede tocar no se dibuja como algo que se toca**. Es la misma distincion que el panel ya
 * hace entre un badge y un boton.
 */
.precio-calculado {
  font-family: var(--f-mono);
  font-size: 0.9rem;
  color: var(--muted);
  /* "$ 32.000" en DOS renglones ("$" arriba, la cifra abajo) es lo que pasa sin esto, y una
     columna de precios partida al medio no se puede comparar de un vistazo. */
  white-space: nowrap;
}

/* La velocidad manda la fila: es lo unico que no se edita y lo que la nombra. */
#tabla-precios td.velocidad {
  font-family: var(--f-mono);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--head);
  white-space: nowrap;
}

/*
 * "Se ofrece" es una casilla de verdad —no el interruptor grande de las unidades—: son tres en
 * una columna, y tres interruptores apilados adentro de una tabla se comerian la grilla.
 */
#tabla-precios input[type='checkbox'],
#tabla-routers input[type='checkbox'] {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--red);
  cursor: pointer;
}

/* La fila apagada se ve apagada: lo que no se ofrece no puede leerse igual que lo que si. */
#tabla-precios tr.apagada td.velocidad,
#tabla-precios tr.apagada .precio-calculado {
  color: var(--faint);
  opacity: 0.6;
}

/*
 * Lo mismo en la tabla de routers, y APAGA LAS MISMAS DOS CELDAS: la que nombra la fila y la
 * calculada. Las dos de los campos quedan enteras porque el precio hay que poder leerlo para
 * volver a prenderlo — y un `opacity` en el `<td>` no se puede deshacer adentro: compone toda
 * la celda, asi que el `opacity: 1` del input no lo devolveria.
 *
 * El modelo va por `td:first-child` y no por una clase propia: es texto normal, y la unica
 * clase que necesitaria seria justo para esta regla.
 */
#tabla-routers tr.apagada td:first-child,
#tabla-routers tr.apagada .precio-calculado {
  color: var(--faint);
  opacity: 0.6;
}

/* Un detalle ("95 canales") y un texto de promo no son un numero: necesitan renglon. */
.campo-detalle {
  width: 220px;
}

.campo-promo {
  width: 260px;
}

.campo-fecha {
  width: 190px;
}

.campo-detalle input,
.campo-promo input,
.campo-fecha input {
  margin-top: 7px;
  padding: 10px 12px;
  font-size: 0.95rem;
}

/*
 * LA VISTA PREVIA: las combinaciones como tarjetas, igual que en la app.
 *
 * No es decoracion. Lo que se guarda no es una tabla de numeros, es una tarjeta con un precio, y
 * el error tipico de esta pantalla —un cero de mas— se ve acá y no en la grilla. El segundo
 * click de GUARDAR se aprieta mirando esto.
 */
.vista-precios {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.vista-precio {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper-3);
}

.vista-precio .titulo {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/*
 * EL NUMERO ES EL MENSAJE (DISENO.md §1): la cifra grande en Space Grotesk, como la dibuja la
 * app. El acento rojo es el de la marca y acá es LETRA, asi que va por `--red-txt` (en oscuro no
 * es el mismo tono que el de los fondos).
 */
.vista-precio .precio {
  margin-top: 6px;
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--red-txt);
}

/*
 * VERDE, COMO EN LA APP. La capsula de la promo la dibuja alla un `StatusPill tono="ok"`
 * (ver `(publico)/contratar/index.tsx`), y esta vista dice "COMO LO VE EL CLIENTE": si el
 * color no es el mismo, la vista previa deja de servir para lo unico que existe. El ambar
 * ademas significa otra cosa en el manual —aviso— y una promo no avisa nada.
 */
.vista-precio .promo {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--ok-bg);
  border: 1px solid var(--ok-borde);
  font-family: var(--f-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ok-txt);
}

/*
 * EL PRECIO DIFERENCIADO, debajo del badge (Sergio, 19/09/2026): "Primeros 3 meses $ 44.500 ·
 * despues $ 54.500/mes".
 *
 * Chico y apagado A PROPOSITO: la cifra grande sigue siendo el precio de siempre —que es el que
 * se paga a partir del cuarto mes y el que compara el que esta eligiendo plan—, y esta linea es
 * la aclaracion que la promo obliga a hacer. Al reves, dos numeros grandes en la misma tarjeta
 * dejan de decir cual es el precio.
 */
.vista-precio .precio-promo {
  margin-top: 8px;
  font-size: 0.74rem;
  line-height: 1.4;
  color: var(--muted);
}

/* Sin una sola combinacion (todo apagado) la caja lo dice, en vez de quedar vacia. */
.vista-precios .vacio {
  grid-column: 1 / -1;
}

/* --- Bajas: los pedidos de baja desde la app (27/09/2026) ------------------ */

/*
 * La aclaracion de que son INTENCIONES va pegada al titulo y antes de cualquier numero: es lo
 * primero que tiene que leer quien mira esta pantalla, no una nota al pie.
 */
.bajas-aclaracion {
  margin: -6px 0 16px;
  max-width: 72ch;
}

/* Las marcas OPERADOR / PRUEBA al lado del nº de cliente, en la misma celda. */
.tabla-bajas td .badge {
  margin: 2px 0 2px 6px;
}

/* Si la marca no entra al lado del numero, baja alineada a la izquierda y no con sangria. */
.tabla-bajas td:nth-child(2) {
  min-width: 190px;
}

.tabla-bajas td:nth-child(4) .badge {
  margin-left: 0;
}

/* El detalle es texto del cliente: una linea larga se parte, no ensancha la tabla. */
.tabla-bajas .baja-detalle {
  max-width: 34ch;
  overflow-wrap: anywhere;
}

#bajas-mas {
  margin-top: 12px;
}

/* "hace 12 días" en un renglón: la fecha es lo que se escanea de arriba a abajo. */
.tabla-bajas td:first-child {
  white-space: nowrap;
}

/*
 * LA APP INSTALADA (01/10/2026). El teléfono chico al lado del nombre en Clientes: line-art
 * de 14 px en el gris de los datos secundarios —es un dato, no una alerta—, con el detalle en
 * el `title`. Y en la cabecera de la ficha, el badge verde "App instalada · desde 12/09"
 * (verde confirma, DISEÑO.md) con la última vez al lado en el tono apagado del rótulo.
 */
.con-app {
  display: inline-flex;
  vertical-align: -2px;
  margin-left: 6px;
  color: var(--muted);
}

.con-app svg {
  width: 14px;
  height: 14px;
}

.ficha-app {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 6px 0 0;
  font-size: 0.86rem;
}

.ficha-app[hidden] {
  display: none;
}

.ficha-app-ultima {
  color: var(--muted);
}

/* --- La ficha del cliente en secciones (corrida de diseño, 02/10/2026) ---------------- */

/*
 * EL PEDIDO: *"está un poco desordenado y con falta de divisiones"* (Sergio, 02/10/2026).
 *
 * Tres cosas, y ninguna saca un dato:
 *  1. LA CABECERA ES UNA TARJETA con dos lados: QUIÉN (nombre grande, Nº y DNI con su COPIAR
 *     al lado, la app) y QUÉ SE HACE (ENTRAR COMO EL CLIENTE, el primario, más grande que
 *     el resto; ABRIR LA APP; el estado del acceso abajo).
 *  2. CADA BLOQUE ES UNA SECCIÓN CON FRANJA: gris clarito, rótulo rojo en mayúsculas con su
 *     ícono (DISEÑO.md §2, "las franjas de sección son gris clarito con letras rojas"; §3,
 *     "toda sección del panel lleva la cabecera del afiche"). 44px: es una franja suelta
 *     con una lista abajo, no la cabecera de una tarjeta con cifra.
 *  3. LA LÍNEA DE TIEMPO TIENE RIEL: un ícono por tipo de evento en una columna fija y la
 *     línea vertical que los une, para barrerla buscando "¿pagó?, ¿abrió un caso?".
 */

.ficha-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 28px;
  margin-top: 16px;
  padding: 20px 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.ficha-quien {
  min-width: 0;
  flex: 1 1 320px;
}

.ficha-cabecera h3 {
  margin: 0;
  font-size: 1.75rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.ficha-ids {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-top: 10px;
}

.ficha-ids .eyebrow {
  margin: 0;
}

.ficha-copiar {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ficha-cabecera .ficha-app {
  margin-top: 12px;
}

.ficha-cabecera .ficha-acciones {
  flex: 0 1 auto;
  flex-direction: column;
  align-items: stretch;
  margin-top: 0;
  min-width: 220px;
}

/* El primario de la ficha, del alto de un botón de verdad: es lo que se viene a hacer. */
.ficha-cabecera .btn-entrar {
  font-size: 0.72rem;
  padding: 12px 20px;
  text-align: center;
}

.ficha-cabecera .btn-abrir {
  font-size: 0.66rem;
  padding: 8px 16px;
  text-align: center;
}

.ficha-acceso:empty {
  display: none;
}

/* --- La sección y su franja --- */

.ficha-seccion {
  min-width: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}

.ficha-seccion[hidden] {
  display: none;
}

.ficha-cuerpo {
  display: grid;
  gap: 16px;
}

.ficha-legajo {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.franja {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px 0 0;
  background: var(--franja-bg);
}

.franja-titulo {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.franja-boton {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0 8px 0 16px;
  border: 0;
  background: transparent;
  color: var(--franja-txt);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}

.franja-boton:focus-visible {
  outline: 2px solid var(--franja-txt);
  outline-offset: -3px;
  border-radius: 10px;
}

.franja-icono,
.franja-chevron {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.franja-chevron {
  width: 16px;
  height: 16px;
  margin-left: 2px;
  opacity: 0.7;
  transition: transform 0.18s ease;
}

.ficha-seccion.plegada .franja-chevron {
  transform: rotate(-90deg);
}

.franja-texto {
  min-width: 0;
}

.franja-extra {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
}

.franja-extra:empty {
  display: none;
}

.franja-cuenta {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--franja-sub);
  min-width: 26px;
  padding: 2px 8px;
  text-align: center;
  border-radius: 999px;
  background: var(--paper);
  /* "Sin resumen" (RESUMEN IA, 10/10/2026) no se parte en dos renglones con las flechas de ordenar. */
  white-space: nowrap;
}

.franja-cuerpo {
  padding: 16px 18px 18px;
}

.franja-cuerpo > .pie:only-child,
.franja-cuerpo > .aviso:only-child {
  margin: 0;
}

/* Los chats de la ficha ya no son una caja gris adentro de otra caja. */
.ficha-seccion .chats-lista {
  margin: 0;
  gap: 0;
}

/* --- Situación: balance y ONU, sin tarjeta propia --- */

.ficha-situacion > .pie {
  margin: 12px 0 0;
}

/* --- Comprobantes: separados por raya, la sección ya es la tarjeta --- */

.ficha-seccion .comprobantes {
  margin: 0;
}

/* --- La línea de tiempo con riel --- */

.ficha-actividad .ficha-filtro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 0 0 6px;
  padding: 0 0 12px;
}

.ficha-actividad .ficha-filtro legend {
  float: left;
  margin-right: 4px;
}

.ficha-actividad .ficha-filtro .pie {
  margin: 0;
}

.ficha-actividad .evento-grupo {
  position: relative;
}

.ficha-actividad .evento-grupo + .evento-grupo {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.ficha-actividad .evento-dia {
  display: inline-block;
  margin: 6px 0 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--head);
}

.ficha-actividad .evento {
  position: relative;
  padding: 12px 0 12px 44px;
}

/* El riel: une los íconos del mismo día, de la mitad de uno a la mitad del siguiente. */
.ficha-actividad .evento::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
}

.ficha-actividad .evento-dia + .evento::before {
  top: 24px;
}

.ficha-actividad .evento:last-child::before {
  bottom: calc(100% - 24px);
}

.ficha-actividad .evento-dia + .evento:last-child::before {
  display: none;
}

.evento-marca {
  position: absolute;
  left: 0;
  top: 10px;
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: var(--paper-2);
  border: 1px solid var(--line);
  color: var(--muted);
}

.evento-marca.falla {
  background: var(--falla-bg);
  border-color: var(--falla-borde);
  color: var(--falla-txt);
}

.evento-marca .ficha-icono {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ficha-actividad .evento-fila .nombre {
  font-family: var(--f-display);
  font-weight: 600;
  color: var(--head);
}

/* Los datos del evento en dos columnas, clave | valor, como una tabla chica. */
.evento-pares {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 3px 14px;
  margin: 8px 0 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--paper-2);
  white-space: normal;
}

.evento-pares dt {
  color: var(--faint);
}

.evento-pares dd {
  margin: 0;
  color: var(--text);
  overflow-wrap: anywhere;
}

@media (max-width: 560px) {
  .ficha-cabecera {
    padding: 16px;
  }

  .ficha-cabecera h3 {
    font-size: 1.45rem;
  }

  .ficha-cabecera .ficha-acciones {
    width: 100%;
    min-width: 0;
  }

  .franja-cuerpo {
    padding: 14px;
  }

  .evento-pares {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .evento-pares dd + dt {
    margin-top: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .franja-chevron {
    transition: none;
  }
}

/* Las conversaciones de la ficha: filas separadas por raya, no una caja gris adentro de la sección. */
.ficha-seccion .chats-lista > li {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  padding: 0 0 12px;
}

.ficha-seccion .chats-lista > li + li {
  padding-top: 12px;
}

.ficha-seccion .chats-lista > li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.ficha-seccion .chats-lista > li:hover {
  background: transparent;
}

.ficha-seccion .chats-lista > li:hover .chat-motivo {
  color: var(--red-txt);
}

@media (max-width: 560px) {
  /* A 390 la hora a la derecha le comía medio renglón al título: va abajo, en su línea. */
  .ficha-actividad .evento-fila {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
}

/*
 * LOS CASOS DE LA FICHA (Sergio, 03/10/2026). La pieza de "Mis casos" de la app, en el panel:
 * el CHIP del tipo (pizarra/ámbar si el caso está abierto, gris si no: sin rojo, DISEÑO §2),
 * tipo y número, el renglón de fechas y vía en Space Mono, el badge del estado y el chevron.
 * Toda la fila es el botón que despliega el historial.
 */
.casos {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.caso {
  border-bottom: 1px solid var(--line-soft);
}

.caso:last-child {
  border-bottom: 0;
}

.caso-fila {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 10px 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.caso-fila:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.caso-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--nada-borde);
  background: var(--nada-bg);
  color: var(--muted);
}

.caso.abierto .caso-chip {
  border-color: var(--aviso-borde);
  background: var(--aviso-bg);
  color: var(--aviso-txt);
}

.caso-chip-icono,
.caso-chevron {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.caso-chevron {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 10px;
  color: var(--muted);
  transform: rotate(-90deg);
  transition: transform 0.18s ease;
}

.caso.desplegado .caso-chevron {
  transform: none;
}

.caso-datos {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.caso-titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.caso-tipo {
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--head);
}

.caso-numero,
.caso-fechas,
.caso-evento-fecha {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.caso-numero {
  white-space: nowrap;
}

.caso-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.caso-historial {
  padding: 0 0 12px 48px;
}

.caso-tiempo {
  list-style: none;
  margin: 0;
  padding: 0 0 0 14px;
  border-left: 2px solid var(--line);
  display: grid;
  gap: 10px;
}

.caso-evento-linea {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.caso-evento-fecha {
  white-space: nowrap;
}

.caso-evento-texto {
  color: var(--text);
}

.caso-evento-detalle {
  margin: 4px 0 0;
  white-space: pre-line;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* La nota INTERNA, en gris: el cliente no la ve en su app. */
.caso-evento.interna .caso-evento-texto,
.caso-evento.interna .caso-evento-detalle {
  color: var(--muted);
}

@media (max-width: 520px) {
  .caso-historial {
    padding-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .caso-chevron {
    transition: none;
  }
}

/* ===========================================================================
 * HORARIO DE ATENCIÓN (Sergio, 06/10/2026)
 * ===========================================================================
 *
 * Dos columnas de 1180px para arriba: a la izquierda el FORMULARIO (el interruptor, los
 * intervalos, los días sin atención y el Guardar) y a la derecha, pegada, la VISTA PREVIA de lo
 * guardado. Abajo de 1180 la vista previa va después del formulario.
 *
 * El rojo se raciona (DISEÑO.md §2): el interruptor "Aplicar el horario" es el único rojo lleno;
 * los siete días de cada intervalo encendidos son un TINTE con la perilla roja (una fila de piezas
 * iguales cuenta como UN acento, pero tres filas de siete pistas rojas llenas gritan), y en el
 * calendario el rojo es la selección: el día marcado sin atención.
 */

.horario {
  display: grid;
  gap: 32px;
}

@media (min-width: 1180px) {
  .horario {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 36px;
    align-items: start;
  }

  /* La vista previa se queda a la vista mientras se baja por el formulario. */
  .horario-vista {
    position: sticky;
    top: calc(var(--alto-barra, 62px) + var(--alto-menu, 100px) + 16px);
  }
}

.horario-editor {
  min-width: 0;
}

/* Cada bloque se separa del anterior con una línea fina, como las tarjetas de Configuración. */
.horario-bloque + .horario-bloque {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
}

.horario-bloque > .interruptor {
  margin-top: 0;
}

.horario-bloque > .tarjeta-rotulo {
  margin: 0;
}

/* Lo que está mal en TODO el horario (aplicado sin intervalos) y el renglón de cada fila. */
.horario-error {
  margin: 10px 0 0;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--falla-txt);
}

.horario-agregar {
  margin-top: 12px;
}

/* --- Los intervalos: la tabla de Botmaker ----------------------------------- */

/*
 * UNA FILA POR INTERVALO, con las columnas de la pantalla de Botmaker: ABRE A LAS · CIERRA A LAS
 * · los siete días · el tacho. De 800px para arriba las columnas se alinean con la cabecera (que
 * es solo visual: cada control lleva su nombre accesible); abajo cada fila es una tarjeta con sus
 * rótulos y los días pasan a pastillas L M X J V S D.
 */
.intervalos {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.intervalo {
  display: grid;
  grid-template-columns: 128px 128px auto 40px;
  align-items: center;
  column-gap: 14px;
  row-gap: 6px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper-3);
}

.intervalo-cab {
  padding-top: 0;
  padding-bottom: 0;
  border-color: transparent;
  background: none;
}

.intervalo-titulo,
.dia-nombre {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

.intervalos-vacio {
  margin: 0;
}

.intervalo-hora {
  display: block;
  min-width: 0;
}

/* En escritorio el rótulo lo dice la cabecera: el del campo queda para el lector de pantalla. */
.intervalo-rotulo {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

.intervalo-hora input {
  width: 100%;
  padding: 8px 8px 8px 10px;
  font-family: var(--f-mono);
  font-size: 0.86rem;
  color: var(--head);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.intervalo-hora input:focus {
  border-color: var(--red-tint-2);
}

.intervalo-hora input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/*
 * EL CAMPO DE HORA EN 24 H (07/10/2026): texto y no `type=time`, que el navegador dibuja en SU
 * idioma ("08:30 AM" en un Chrome en inglés). Hereda el campo de arriba; el "HH:MM" de un campo
 * vacío va tenue, como cualquier pista.
 */
.hora-24::placeholder {
  color: var(--faint);
  opacity: 1;
}

.intervalo-dias {
  display: grid;
  grid-template-columns: repeat(7, 48px);
  column-gap: 6px;
  justify-items: center;
}

/* El día: un `checkbox` de verdad adentro del `<label>`, como el interruptor grande. */
.dia {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 34px;
  border-radius: 10px;
  cursor: pointer;
}

.dia input {
  position: absolute;
  inset: 0 auto auto 0;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
}

.dia-pista {
  position: relative;
  width: 34px;
  height: 20px;
  border: 1px solid var(--line-fuerte);
  border-radius: 999px;
  background: var(--nada-bg);
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}

.dia-perilla {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border: 1px solid var(--line-fuerte);
  border-radius: 999px;
  background: var(--paper);
  transition:
    transform 0.2s ease,
    background 0.2s ease;
}

/*
 * Encendido: el tinte con su borde y la perilla roja corrida. El rojo lleno queda para "Aplicar
 * el horario"; una pista roja llena por día eran quince manchas rojas en una tabla de tres filas.
 */
.dia:has(input:checked) .dia-pista {
  background: linear-gradient(var(--red-tint), var(--red-tint)), var(--paper);
  border-color: var(--red-tint-2);
}

.dia:has(input:checked) .dia-perilla {
  transform: translateX(14px);
  background: var(--red);
  border-color: var(--red);
}

.dia:hover:not(:has(input:disabled)) .dia-pista {
  border-color: var(--red-tint-2);
}

.dia:has(input:checked):hover .dia-pista {
  border-color: var(--red);
}

.dia:has(input:focus-visible) {
  outline: 2px solid var(--red);
  outline-offset: 1px;
}

.dia:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.55;
}

.dia-letra {
  display: none;
}

/* El tacho: un círculo sin borde, rojo recién al pasar el mouse (borrar no es el acento). */
.intervalo-borrar,
.cerrado-quitar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition:
    color 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease;
}

.intervalo-borrar:hover:not(:disabled),
.cerrado-quitar:hover:not(:disabled) {
  color: var(--red-txt);
  background: var(--red-tint);
  border-color: var(--red-tint-2);
}

.intervalo-borrar:disabled,
.cerrado-quitar:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Los íconos de trazo de esta pantalla (tacho, ×, flechas del mes). */
.trazo-icono {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/*
 * LA FILA CON UN PROBLEMA: el borde y los campos en el rojo tenue de la falla, y el renglón de
 * abajo. El FONDO es lo que separa el error del foco (DISEÑO.md §2: foco y error no se dicen con
 * el mismo dibujo), que es un anillo rojo y nada más.
 */
.intervalo-error {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--falla-txt);
}

.intervalo-error:empty {
  display: none;
}

.intervalo.mal {
  border-color: var(--falla-borde);
}

/* Solo el campo con el problema (`aria-invalid`, ver `pintarErroresHorario`): "Falta la hora"
   marca el vacío, "Cierra antes de abrir" marca los dos. */
.intervalo-hora input[aria-invalid='true'] {
  border-color: var(--falla-borde);
  background: linear-gradient(var(--falla-bg), var(--falla-bg)), var(--paper);
}

.intervalo.mal-dias .dia-pista {
  border-color: var(--falla-borde);
}

@media (max-width: 799px) {
  .intervalo-cab {
    display: none;
  }

  .intervalo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px;
    row-gap: 10px;
    padding: 12px;
  }

  .intervalo-rotulo {
    position: static;
    display: block;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    margin-bottom: 5px;
    font-family: var(--f-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
  }

  /* Las horas y el tacho en el primer renglón; los días y el error, abajo, a lo ancho. */
  .intervalo-hora:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }

  .intervalo-hora:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }

  .intervalo-borrar {
    grid-column: 3;
    grid-row: 1;
    align-self: end;
  }

  .intervalo-error {
    grid-row: 3;
  }

  /* Los siete días, en pastillas a lo ancho: L M X J V S D. */
  .intervalo-dias {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    justify-items: stretch;
  }

  .dia {
    width: auto;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
  }

  .dia-pista {
    display: none;
  }

  .dia-letra {
    display: block;
    font-family: var(--f-mono);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--muted);
  }

  .dia:has(input:checked) {
    background: linear-gradient(var(--red-tint), var(--red-tint)), var(--paper);
    border-color: var(--red);
  }

  .dia:has(input:checked) .dia-letra {
    color: var(--red-txt);
  }

  .intervalo.mal-dias .dia {
    border-color: var(--falla-borde);
  }
}

/* --- Los días sin atención: el calendario y la lista ------------------------ */

.horario-dias {
  display: grid;
  gap: 22px;
  margin-top: 12px;
}

@media (min-width: 800px) {
  .horario-dias {
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
  }
}

.calendario {
  width: 100%;
  max-width: 340px;
}

.cal-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.cal-mes {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  color: var(--head);
}

.cal-nav {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--head);
  cursor: pointer;
  transition:
    color 0.18s ease,
    border-color 0.18s ease;
}

.cal-nav:hover {
  color: var(--red-txt);
  border-color: var(--red-tint-2);
}

.cal-nav .trazo-icono {
  width: 16px;
  height: 16px;
}

.cal-semana,
.cal-dias {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.cal-semana span {
  padding: 4px 0;
  text-align: center;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--faint);
}

.cal-dia {
  position: relative;
  height: 40px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 10px;
  background: none;
  font-family: var(--f-body);
  font-size: 0.92rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--head);
  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease;
}

.cal-dia:hover:not(:disabled) {
  background: var(--paper-2);
  border-color: var(--line);
}

/* HOY: un punto debajo del número, no un anillo (el anillo se confundiría con lo marcado). */
.cal-dia.hoy::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: currentColor;
}

/* SIN ATENCIÓN: la selección de esta pantalla, en el rojo de la selección. */
.cal-dia.cerrado,
.cal-dia.cerrado:hover:not(:disabled) {
  background: linear-gradient(var(--red-tint), var(--red-tint)), var(--paper);
  border-color: var(--red);
  color: var(--red-txt);
}

/* Lo que ya pasó no se toca, y lo que se cerró y ya pasó se ve atenuado. */
.cal-dia.pasado {
  color: var(--faint);
  font-weight: 400;
  cursor: default;
}

.cal-dia.pasado.cerrado {
  opacity: 0.5;
}

.cal-dia:disabled:not(.pasado) {
  cursor: not-allowed;
  opacity: 0.55;
}

.cal-leyenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 10px 0 0;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

.cal-muestra {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 4px;
}

.cal-muestra.cerrado {
  background: linear-gradient(var(--red-tint), var(--red-tint)), var(--paper);
  border: 1px solid var(--red);
}

.cal-muestra.hoy {
  width: 5px;
  height: 5px;
  margin-left: 10px;
  border-radius: 50%;
  background: var(--head);
}

.cerrados-rotulo {
  margin: 4px 0 10px;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.cerrados-lista {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cerrado-fila {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 8px;
  padding: 5px 5px 5px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper-3);
}

.cerrado-fecha {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--head);
  white-space: nowrap;
}

.cerrado-nota {
  width: 100%;
  min-width: 0;
  padding: 7px 10px;
  font-family: var(--f-body);
  font-size: 0.9rem;
  color: var(--head);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.cerrado-nota:focus {
  border-color: var(--red-tint-2);
}

.cerrado-nota::placeholder {
  color: var(--faint);
}

.cerrados .pie:empty {
  display: none;
}

/* --- El Guardar --------------------------------------------------------------- */

/*
 * LA BARRA DEL GUARDAR. En su lugar al pie del formulario mientras no haya nada que guardar; con
 * cambios (`.sucia`) se PEGA abajo de la pantalla, así el botón y el "Cambios sin guardar" se
 * ven desde cualquier punto del formulario.
 */
.horario-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-top: 26px;
  padding: 16px 0 6px;
  border-top: 1px solid var(--line-soft);
  background: var(--paper);
}

.horario-barra.sucia {
  position: sticky;
  bottom: 0;
  z-index: 5;
  padding: 12px 0 14px;
  box-shadow: 0 -16px 22px -20px rgba(0, 0, 0, 0.45);
}

.horario-barra .badge {
  margin-left: auto;
}

.horario-motivo {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--falla-txt);
}

/*
 * EL GUARDAR APAGADO NO ES EL PRIMARIO CON OPACIDAD (DISEÑO.md §2, 22/09/2026): `opacity: .45`
 * sobre el rojo da un salmón que se lee como "otro rojo" y no como "todavía no". Apagado es el
 * gris de las franjas con la letra en gris de marca, sin sombra; al prenderse pasa a rojo. Acá
 * pesa más que en otras pantallas porque el botón está apagado casi siempre (sin cambios).
 */
.horario-barra .btn-primario:disabled {
  opacity: 1;
  background: var(--franja-bg);
  color: var(--franja-sub);
  box-shadow: none;
}

.horario-editor > .pie {
  margin-top: 8px;
}

/* --- La vista previa: la leyenda como la ve el cliente ------------------------- */

.horario-vista > .tarjeta-rotulo {
  margin: 0 0 10px;
}

.horario-vista-nada {
  margin: 0;
  padding: 40px 18px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
  border: 1px dashed var(--line-fuerte);
  border-radius: var(--r);
}

/*
 * LA PANTALLA DE LA APP, EN CLARO SIEMPRE (como el QR de Usuarios): la app no tiene modo oscuro y
 * esto es una foto de su pantalla. Por eso los colores son propios de este bloque —los de la app:
 * `theme.ts`, la pizarra de DISEÑO.md §2— y no los tokens del panel, que se invierten.
 */
.pantalla-cliente {
  --app-paper: #ffffff;
  --app-paper-2: #f6f6f8;
  --app-line: #e6e6ea;
  --app-line-soft: #eeeef1;
  --app-head: #1a1a1c;
  --app-muted: #6a6b70;
  --app-faint: #6e6e75;
  --pizarra-tinte: #eef2f7;
  --pizarra-borde: #d3dde8;
  --pizarra-honda: #34506e;
  --pizarra: #4a6a8c;
  color-scheme: light;
  padding: 22px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--app-paper-2);
}

.leyenda {
  display: grid;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--app-line);
  border-radius: 16px;
  background: var(--app-paper);
}

.leyenda-cab {
  display: flex;
  align-items: center;
  gap: 12px;
}

.leyenda-chip {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--pizarra-tinte);
}

.leyenda-textos {
  min-width: 0;
}

.leyenda-frase {
  margin: 0;
  font-family: var(--f-display);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--app-head);
}

.leyenda-bajada {
  margin: 2px 0 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--app-muted);
}

/* El horario: renglones con una raya fina entre uno y otro, como la tabla de la app. */
.leyenda-horario {
  margin: 0;
  border-top: 1px solid var(--app-line-soft);
}

.leyenda-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--app-line-soft);
}

.leyenda-fila dt {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--app-faint);
}

.leyenda-fila dd {
  margin: 0 0 0 auto;
  text-align: right;
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.375rem;
  color: var(--app-head);
}

.leyenda-fila dd.cerrado {
  color: var(--app-muted);
}

/* Cada badge en su renglón, centrado y del ancho de su texto: no es un botón. */
.leyenda-badges {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* El pill de aviso SUELTO de la app: tinte pizarra con borde y el tracking cerrado (DISEÑO.md §2). */
.leyenda-badge {
  display: inline-block;
  max-width: 100%;
  padding: 6px 12px;
  border: 1px solid var(--pizarra-borde);
  border-radius: 999px;
  background: var(--pizarra-tinte);
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1rem;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  color: var(--pizarra-honda);
}

/*
 * EL RELOJ VIVO (`IconoReloj` de la app): la aguja larga da una vuelta y la corta avanza 40° hasta
 * su lugar, en 600 ms, UNA vez al aparecer. Con "reducir movimiento" quedan quietas en su lugar
 * (la regla general de este archivo apaga las animaciones y queda la rotación final).
 */
.reloj-vivo {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--pizarra);
  stroke-width: 2;
  stroke-linecap: round;
}

.reloj-vivo .aguja-larga,
.reloj-vivo .aguja-corta {
  transform-box: view-box;
  transform-origin: 12px 13px;
}

.reloj-vivo .aguja-larga {
  animation: reloj-larga 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.reloj-vivo .aguja-corta {
  transform: rotate(126deg);
  animation: reloj-corta 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes reloj-larga {
  from {
    transform: rotate(-360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

@keyframes reloj-corta {
  from {
    transform: rotate(86deg);
  }
  to {
    transform: rotate(126deg);
  }
}

/* ===========================================================================
 * ASISTENTE IA (Sergio, 06/10/2026)
 * ===========================================================================
 *
 * Arriba, dos columnas de 980px para arriba: las PERILLAS (interruptor, modelo, presupuesto con
 * el gasto del día) y el USO DE HOY en cifras. Abajo, a lo ancho: la base de conocimiento, los
 * últimos siete días y las conversaciones.
 */

.asistente-arriba {
  display: grid;
  gap: 28px;
}

@media (min-width: 980px) {
  .asistente-arriba {
    grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
    gap: 44px;
    align-items: start;
  }
}

.asistente-perillas .config {
  max-width: none;
}

.asistente-perillas .config > .interruptor {
  margin-top: 0;
}

/* Cada bloque arranca con el rótulo de su campo, sin el aire de arriba de un formulario. */
.asistente-perillas .campo-modelo,
.asistente-perillas .config-fila,
.asistente-perillas .config-fila .campo {
  margin-top: 0;
}

/*
 * "PRESUPUESTO · US$ POR DÍA" es más largo que los 120 px de un campo de tres cifras: el rótulo
 * se sale del campo hacia la derecha (arriba del Guardar, que va alineado abajo) en vez de
 * ensancharlo y dejar el botón lejos del número que guarda.
 */
.asistente-perillas .campo-presupuesto span {
  display: block;
  white-space: nowrap;
}

/*
 * DOS PERILLAS EN UNA FILA (11/10/2026): las interacciones de siempre y las de los días sin
 * atención, cada una con su Guardar pegado. Cada par es una grilla: el rótulo arriba, a lo ancho
 * (sin cortarse: "INTERACCIONES EN DÍAS SIN ATENCIÓN" es más largo que el número y el botón
 * juntos), y abajo el número de 120 y su Guardar. El `label` va con `display: contents` para que
 * su rótulo y su campo sean celdas de la grilla sin perder el `for`. Entre pares, más aire que
 * adentro de uno; a 320 el segundo baja (flex-wrap de `.config-fila`).
 */
.config-fila-pares {
  column-gap: 32px;
  row-gap: 14px;
}

.config-par {
  display: grid;
  grid-template-columns: 120px auto;
  column-gap: 10px;
  align-items: end;
}

.config-par .campo {
  display: contents;
}

/*
 * Sin `nowrap` (11/10/2026, visto a 320): el rótulo largo forzaba el ancho de toda la columna y la
 * página scrolleaba de costado. En escritorio igual va en un renglón (el par mide su contenido);
 * solo a lo angosto se parte en dos.
 */
.config-par .campo span {
  grid-column: 1 / -1;
}

.config-par .campo input {
  grid-column: 1;
}

.config-par .btn {
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
}

.asistente-perillas .pie:empty {
  display: none;
}

/*
 * MODELO Y ESFUERZO POR MODO (Sergio, 11/10/2026): una tablita de dos filas (En horario / Fuera de
 * horario y días sin atención) por dos columnas (Modelo, Esfuerzo). Los rótulos de columna van en
 * mono, como el de cualquier campo; el de cada fila en el cuerpo, que es lo que se lee. Los selects
 * son los de `.campo`. A lo angosto (560) cada fila es una tarjeta: el modo arriba y los dos selects
 * abajo con su rótulo (el `data-rotulo` de la celda), sin scroll de costado.
 *
 * Es un formulario, no una tabla de datos: se le sacan el `min-width: 620px` (con eso desbordaba la
 * columna de 560 y a 390 la página scrolleaba de costado), el fondo de la cabecera y las rayas de
 * `tbody td` que pone `table` para las listas del panel.
 */
.asistente-modos {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  table-layout: fixed;
}

.asistente-modos thead th:first-child {
  width: 32%;
}

.asistente-modos thead th:last-child {
  width: 112px;
}

.asistente-modos-titulo {
  text-align: left;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 4px;
}

.asistente-modos thead th {
  text-align: left;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 6px 10px 6px 0;
  border-bottom: 1px solid var(--line);
  background: none;
  white-space: normal;
}

.asistente-modos tbody th {
  text-align: left;
  font-family: var(--f-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--head);
  padding: 10px 14px 10px 0;
  vertical-align: middle;
}

.asistente-modos td {
  padding: 10px 10px 10px 0;
  vertical-align: middle;
  border-bottom: 0;
}

.asistente-modos tbody tr + tr > * {
  border-top: 1px solid var(--line);
}

/* La columna del esfuerzo mide lo que dice "Medio" (112, en la cabecera): el modelo se lleva el resto. */
.asistente-modos td:last-child {
  padding-right: 0;
}

.asistente-modos select {
  width: 100%;
  padding: 10px 12px;
  font-family: var(--f-body);
  font-size: 0.95rem;
  color: var(--head);
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
}

.asistente-modos select:focus {
  border-color: var(--red-tint-2);
}

.asistente-modos select:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

@media (max-width: 560px) {
  .asistente-modos,
  .asistente-modos tbody,
  .asistente-modos tr,
  .asistente-modos th,
  .asistente-modos td {
    display: block;
    width: 100%;
  }

  .asistente-modos thead {
    display: none;
  }

  .asistente-modos caption {
    display: block;
  }

  .asistente-modos tbody tr {
    padding: 10px 0;
  }

  .asistente-modos tbody tr + tr {
    border-top: 1px solid var(--line);
  }

  .asistente-modos tbody tr + tr > * {
    border-top: 0;
  }

  .asistente-modos tbody th {
    width: 100%;
    padding: 0 0 6px;
  }

  .asistente-modos td {
    padding: 4px 0;
  }

  .asistente-modos td::before {
    content: attr(data-rotulo);
    display: block;
    margin-bottom: 4px;
    font-family: var(--f-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--faint);
  }
}

.asistente-gasto {
  margin: 0 0 9px 4px;
  font-size: 0.92rem;
  color: var(--text);
}

.asistente-gasto:empty {
  display: none;
}

/* El gasto contra el tope: un riel rojo de marca, ámbar cuando llegó (o el tope es 0). */
.asistente-riel {
  height: 6px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--nada-bg);
}

.asistente-riel i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--red);
  transition: width 0.3s ease;
}

.asistente-riel.lleno i {
  background: var(--aviso-barra);
}

.asistente-hoy > .tarjeta-rotulo {
  margin: 0 0 10px;
}

.asistente-cifras {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.asistente-cifra {
  padding: 14px 16px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
}

.asistente-cifra .tarjeta-rotulo {
  margin: 0;
}

.asistente-cifra .cifra {
  margin: 4px 0 0;
  font-size: 1.9rem;
}

/* El costo es lo que se paga: el único número en rojo de la pantalla. */
.asistente-cifra.acento .cifra {
  color: var(--red-txt);
}

.asistente-cifra.chica .cifra {
  font-size: 1.15rem;
  line-height: 1.5;
}

.asistente-cifra.chica .cifra .unidad {
  display: block;
  margin: 0;
  font-size: 0.78rem;
  font-weight: 500;
}

.asistente-conocimiento {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  /* "Editar la base de conocimiento" (desde un día) lo trae acá: que no quede bajo el menú. */
  scroll-margin-top: calc(var(--alto-barra, 62px) + var(--alto-menu, 100px) + 12px);
}

.asistente-conocimiento .campo {
  margin-top: 0;
}

.asistente-conocimiento textarea {
  min-height: 300px;
  font-size: 0.92rem;
  line-height: 1.55;
}

.asistente-conocimiento .pie-ojo {
  margin-top: 10px;
}

.tabla-asistente-uso {
  min-width: 0;
}

/* La cabecera corta ("CONV.", "MSJ.", "DERIV.") es solo del teléfono (ver abajo). */
.tabla-asistente-uso .th-corto {
  display: none;
}

/*
 * En el telefono las CINCO columnas (con Derivadas, 07/10/2026) entran sin scrollear: menos aire,
 * la cabecera más chica y CORTA. Con las palabras enteras la tabla medía 392 px contra 340 de lugar
 * a 390 (medido); cortas, ~300. La palabra entera sigue ahí para el lector de pantalla (recortada
 * a 1 px, como `.solo-lector`, adentro de su `th`, que es `relative`: no se escapa de la tabla).
 */
@media (max-width: 560px) {
  .tabla-asistente-uso thead th {
    position: relative;
  }

  .tabla-asistente-uso .th-largo {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
  }

  .tabla-asistente-uso .th-corto {
    display: inline;
  }

  .tabla-asistente-uso thead th,
  .tabla-asistente-uso tbody td {
    padding: 10px 7px;
  }

  .tabla-asistente-uso thead th:first-child,
  .tabla-asistente-uso tbody td:first-child {
    padding-left: 12px;
  }

  .tabla-asistente-uso thead th {
    font-size: 0.56rem;
    letter-spacing: 0.05em;
  }

  .tabla-asistente-uso tbody td {
    font-size: 0.84rem;
    white-space: nowrap;
  }

  /*
   * La "›" no entra (son 17 px de más y la tabla scrollearía de costado): en el teléfono lo que
   * dice "se toca" es el día subrayado en punteado, como los demás links del panel.
   */
  .tabla-asistente-uso .col-ir {
    display: none;
  }

  .tabla-asistente-uso tr.dia-tocable td:first-child {
    color: var(--red-txt);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
  }
}

/*
 * CADA DÍA ES UN BOTÓN (Sergio, 07/10/2026): la fila entera abre ese día. Lo dicen la manito, el
 * resaltado al pasar, el anillo de foco de todo el panel y el "›" del final, que se enciende en
 * rojo con la fila: siete flechas iguales son UN acento (DISEÑO.md §2).
 */
.tabla-asistente-uso .col-ir {
  width: 28px;
  padding-left: 0;
  text-align: right;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--faint);
}

.tabla-asistente-uso tr.dia-tocable {
  cursor: pointer;
}

.tabla-asistente-uso tr.dia-tocable:hover td {
  background: var(--paper-2);
}

.tabla-asistente-uso tr.dia-tocable:hover .col-ir,
.tabla-asistente-uso tr.dia-tocable:focus-visible .col-ir {
  color: var(--red-txt);
}

.tabla-asistente-uso tr.dia-tocable:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: -2px;
}

.tabla-asistente-conv {
  min-width: 760px;
}

.tabla-asistente-conv .ligado {
  font-family: var(--f-mono);
  font-size: 0.85rem;
}

.tabla-asistente-conv .ligado + .nombre {
  margin-left: 8px;
}

/*
 * Las cifras no se parten, y el número y el nombre del cliente van juntos (`.conv-quien`). Las marcas
 * de esa celda (TESTER, y desde el 07/10/2026 DERIVÓ · motivo y NO LE SIRVIÓ) siguen al lado y,
 * si no entran, bajan a otro renglón: con las de en horario la celda entera en un renglón medía
 * 490 px y a 1280 el costo quedaba "US$" arriba y "0,007" abajo.
 */
.tabla-asistente-conv td:nth-child(1),
.tabla-asistente-conv td:nth-child(3),
.tabla-asistente-conv td:nth-child(4),
.tabla-asistente-conv .conv-quien {
  white-space: nowrap;
}

/* El aire va a la DERECHA: una marca que baja de renglón arranca alineada con el número. */
.tabla-asistente-conv .conv-quien {
  margin-right: 8px;
}

.tabla-asistente-conv td .badge {
  margin: 2px 8px 2px 0;
}

.tabla-asistente-conv .chat-motivo {
  max-width: 360px;
}

#asistente-conv-filas tr {
  cursor: pointer;
}

#asistente-conv-filas tr:hover td {
  background: var(--paper-2);
}

#asistente-conv-filas tr:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: -2px;
}

#asistente-conv-cuerpo .ligado {
  margin-top: 6px;
  font-size: 0.9rem;
}

/* "Ir al chat" (16/10/2026): el pill y "ver la ficha" en un renglon. */
.asistente-conv-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-top: 8px;
}

.asistente-conv-acciones .ligado {
  margin-top: 0;
}

.asistente-conv-ir {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.asistente-conv-ir .aviso {
  margin-top: 0;
  text-align: left;
}

/*
 * LOS BOTONES QUE VIO EL CLIENTE debajo de una respuesta: la forma del de la app (pill blanco con
 * borde rojo, DISEÑO.md §2), en chico. No se tocan: son el registro de lo que se le ofreció.
 */
.burbuja-acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 8px;
}

.burbuja-accion {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid var(--red);
  border-radius: 999px;
  background: var(--paper);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--head);
}

/*
 * LOS BOTONES DE UN MENSAJE DEL CHAT (14/10/2026, "los links son botones"): lo del operador y de Mia que
 * manda a una seccion de la app. Son los mismos pills de arriba, NO CLICKEABLES (cursor normal, sin hover):
 * el registro de lo que el cliente ve como boton en la app y el widget, con la ruta en el `title`.
 */
.cp-botones .burbuja-accion {
  cursor: default;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * LO QUE HIZO LA IA EN ESE TURNO (07/10/2026): chips chicos al pie de la respuesta, separados por
 * una raya punteada — son de la revisión, no de lo que vio el cliente (eso son los pills de
 * arriba). Un turno que FALLÓ es una burbuja punteada, sin fondo: no hubo respuesta.
 */
.burbuja-revision {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px dashed var(--line);
}

.burbuja.fallida {
  border-style: dashed;
  border-color: var(--falla-borde);
  background: none;
}

.burbuja.fallida .burbuja-texto {
  color: var(--muted);
  font-style: italic;
}

/* Las marcas para revisar: el badge de siempre, un punto más chico (van varias por fila). */
.badge.marca-asistente {
  padding: 3px 9px;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
}

/* "→ PAGOS": un botón que le ofreció. Blanco con borde, como un botón y no como un estado. */
.badge.marca-boton {
  background: var(--paper);
  border-color: var(--line-fuerte);
  color: var(--head);
}

/*
 * LO QUE LEYÓ EL OPERADOR (en horario, 07/10/2026): el resumen que escribió la IA al derivar, al
 * pie de esa respuesta. Es una frase para leer y no un rótulo: la letra del cuerpo, en el gris de
 * lo secundario; sólo "PARA EL OPERADOR" va en Space Mono, como los rótulos del panel.
 */
.burbuja-derivo {
  margin: 8px 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--muted);
  text-align: right;
  overflow-wrap: anywhere;
}

.burbuja-derivo-rotulo {
  display: block;
  margin-bottom: 2px;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ===========================================================================
 * UN DÍA PARA REVISAR (`#asistente/dia/<fecha>`, Sergio 07/10/2026)
 * ===========================================================================
 *
 * Arriba la fecha —con las flechas y el calendario— y el acceso a la base de conocimiento; abajo
 * las cifras del día (las mismas de la tabla), las tres cápsulas y la lista. La lista es de
 * TARJETAS y no una tabla: a 390 px una tabla de siete columnas scrollea de costado, y lo que se
 * viene a leer —lo primero que escribió el cliente y las marcas— no entraría.
 */
.asistente-dia-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
}

.asistente-dia-quien {
  flex: 1 1 260px;
  min-width: 0;
}

.asistente-dia-quien .badge {
  margin-top: 8px;
}

.asistente-dia-mover {
  display: flex;
  align-items: center;
  gap: 6px;
}

.asistente-dia-flecha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--head);
  font-family: var(--f-body);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.asistente-dia-flecha:hover:not(:disabled) {
  border-color: var(--red-tint-2);
  background: var(--paper-3);
  color: var(--red-txt);
}

.asistente-dia-flecha:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.asistente-dia-fecha {
  height: 38px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-3);
  color: var(--head);
  font-family: var(--f-body);
  font-size: 0.9rem;
}

.asistente-dia-cifras {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 660px;
  margin-bottom: 20px;
}

.asistente-dia-filtros {
  margin-bottom: 12px;
}

.asistente-dia-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
  overflow: hidden;
}

/*
 * UNA CONVERSACIÓN: hora | cliente | lo que escribió (+ las marcas abajo) | números. La tarjeta
 * entera abre la conversación (app.js le pasa el clic al link), y el anillo de foco del link se
 * dibuja alrededor de la tarjeta.
 */
.asistente-dia-item {
  display: grid;
  grid-template-columns: 52px minmax(140px, 230px) minmax(0, 1fr) max-content;
  grid-template-areas:
    "hora cliente mensaje numeros"
    "hora cliente marcas numeros";
  grid-template-rows: auto 1fr;
  column-gap: 18px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
}

.asistente-dia-item:last-child {
  border-bottom: 0;
}

.asistente-dia-item:hover {
  background: var(--paper-2);
}

.asistente-dia-item:has(.asistente-dia-abrir:focus-visible) {
  outline: 2px solid var(--red);
  outline-offset: -2px;
}

.asistente-dia-hora {
  grid-area: hora;
  margin: 1px 0 0;
  font-family: var(--f-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--head);
}

.asistente-dia-cliente {
  grid-area: cliente;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  min-width: 0;
}

.asistente-dia-cliente .ligado {
  font-family: var(--f-mono);
  font-size: 0.85rem;
}

.asistente-dia-cliente .nombre {
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

.asistente-dia-mensaje {
  grid-area: mensaje;
  margin: 0;
  min-width: 0;
}

/* Lo que escribió, en dos renglones como mucho: el texto entero está en la conversación. */
.asistente-dia-abrir {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: var(--head);
  font-size: 0.95rem;
  line-height: 1.45;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.asistente-dia-abrir:focus-visible {
  outline: none;
}

.asistente-dia-item:hover .asistente-dia-abrir {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}

.asistente-dia-numeros {
  grid-area: numeros;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  margin: 2px 0 0;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}

.asistente-dia-numeros .costo {
  font-size: 0.78rem;
  color: var(--head);
}

.asistente-dia-marcas {
  grid-area: marcas;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 9px;
}

.vacio.aviso-vacio {
  color: var(--aviso-txt);
}

/*
 * EN EL TELÉFONO: la hora y el cliente arriba, lo que escribió a todo lo ancho, las marcas y,
 * al pie, los números en un renglón. Las cifras del día van de a dos y el costo abajo, a lo
 * ancho: en un tercio de 390 px no entra "CONVERSACIONES" ni "US$ 0,0294".
 */
@media (max-width: 640px) {
  .asistente-dia-item {
    grid-template-columns: max-content minmax(0, 1fr);
    grid-template-areas:
      "hora cliente"
      "mensaje mensaje"
      "marcas marcas"
      "numeros numeros";
    grid-template-rows: auto;
    column-gap: 10px;
    padding: 13px 14px;
  }

  .asistente-dia-mensaje {
    margin-top: 8px;
  }

  .asistente-dia-numeros {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 0;
    margin-top: 9px;
  }

  .asistente-dia-numeros span + span::before {
    content: "·";
    margin: 0 8px;
    color: var(--faint);
  }

  .asistente-dia-cifras {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .asistente-dia-cifras .asistente-cifra.acento {
    grid-column: 1 / -1;
  }

  .asistente-dia-mejorar {
    width: 100%;
  }
}

/* --- Chat propio (Sergio, 06/10/2026) -------------------------------------- */

/*
 * TRES COLUMNAS A TODO EL ANCHO: la lista, la conversacion y el cliente. Es la UNICA seccion que
 * rompe el ancho maximo del panel (1180 px): con el panel a 1180, la charla quedaba en ~420 px
 * entre la lista y la ficha. Lo que se ensancha es el tablero (`.modo-chat` lo pone `mostrarRuta`)
 * y no la pagina: el header (con el menu adentro desde el 09/10/2026) va siempre a todo el ancho,
 * asi que cambiar de pestaña no corre nada de lugar. Sin `100vw` (que con una barra de scroll
 * clasica de Windows desborda 17 px): el tablero pierde el tope y nada mas.
 *
 * El alto es el de la ventana menos el header, el menu y la cabecera de la seccion: cada columna
 * scrollea adentro de si misma y la pagina no. Con poca altura (una notebook con la barra de
 * favoritos) hay un piso de 520 px y ahi si scrollea la pagina, que es mejor que una charla de
 * tres renglones.
 */
#pantalla-tablero.modo-chat {
  max-width: none;
  padding: 0 16px;
}

/* El pie de pagina no entra en una pantalla de alto fijo: lo que dice, aca lo dice el badge EN VIVO. */
#pantalla-tablero.modo-chat > .pie-pagina {
  display: none;
}

.seccion-chat {
  padding: 12px 0 14px;
}

.cp-cab {
  align-items: center;
  margin-bottom: 10px;
}

.cp-cab-titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.cp-cab h2 {
  font-size: clamp(1.25rem, 2vw, 1.55rem);
}

/*
 * LAS CHARLAS DE HOY (10/10/2026): tres pills neutras (el `.badge` de siempre, sin color: es un dato,
 * no trabajo pendiente) con el rotulo en `--faint` y el numero en `--head`.
 */
.cp-hoy {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.cp-hoy-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 4px 10px;
}

.cp-hoy-rotulo {
  color: var(--faint);
}

.cp-hoy-num {
  color: var(--head);
  font-variant-numeric: tabular-nums;
}

/*
 * CORPO EN CONTACTO (13/10/2026), donde estaba el badge PILOTO. En cero es un `.badge` neutro y quieto
 * (sin link). Con alguno en contacto: el rojo es ACENTO (letra y borde; el relleno es papel con un
 * tinte), como el badge CORPO de las filas, y titila ~1 s entre el tinte flojo y el firme. Es link a
 * la bandeja con CORPO puesto. Sin `prefers-reduced-motion` no se mueve: queda el color fijo.
 */
.cp-corpo-badge {
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cp-corpo-badge[hidden] {
  display: none;
}

.cp-corpo-vivo {
  background: var(--paper);
  border-color: var(--red);
  color: var(--red-txt);
  box-shadow: inset 0 0 0 100px var(--red-tint);
  animation: cp-corpo-titila 1s ease-in-out infinite alternate;
}

.cp-corpo-vivo:hover,
.cp-corpo-vivo:focus-visible {
  box-shadow: inset 0 0 0 100px var(--red-tint-2);
}

@keyframes cp-corpo-titila {
  from {
    box-shadow: inset 0 0 0 100px transparent;
    border-color: var(--red-tint-2);
  }
  to {
    box-shadow: inset 0 0 0 100px var(--red-tint-2);
    border-color: var(--red);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cp-corpo-vivo {
    animation: none;
  }
}

.cp-cab-acciones {
  gap: 8px;
}

/*
 * EL SONIDO: un interruptor chico con forma de capsula (un `checkbox` de verdad adentro del
 * `<label>`, como las capsulas de filtro). Prendido lleva el tinte rojo: es "esto esta puesto".
 */
.cp-sonido {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--faint);
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.cp-sonido input {
  position: absolute;
  inset: 0 auto auto 0;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.cp-sonido svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cp-sonido span {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cp-sonido:hover {
  color: var(--head);
}

.cp-sonido:has(input:checked) {
  color: var(--red-txt);
  border-color: var(--red-tint-2);
  background: linear-gradient(var(--red-tint), var(--red-tint)), var(--paper);
}

.cp-sonido:has(input:focus-visible) {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.cp-avisos:disabled {
  cursor: default;
}

/* --- La grilla de tres columnas --- */

.cp-app {
  position: relative;
  display: grid;
  grid-template-columns: minmax(300px, 356px) minmax(0, 1fr) minmax(330px, 390px);
  height: calc(100vh - var(--alto-barra, 62px) - var(--alto-menu, 104px) - 76px);
  height: calc(100dvh - var(--alto-barra, 62px) - var(--alto-menu, 104px) - 76px);
  min-height: 520px;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--paper);
}

.cp-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.cp-col-lista {
  border-right: 1px solid var(--line);
}

/*
 * LA TERCERA COLUMNA VA SOBRE `--paper-2`: adentro van las secciones de la ficha, que son
 * tarjetas blancas con su franja, y sobre blanco se pegaban entre si.
 */
.cp-col-cliente {
  border-left: 1px solid var(--line);
  background: var(--paper-2);
  overflow-y: auto;
}

/* --- 1. La lista --- */

.cp-lista-cab {
  display: grid;
  gap: 10px;
  padding: 12px 12px 10px;
  border-bottom: 1px solid var(--line);
}

/*
 * LA BANDEJA PLEGADA (Sergio, 10/10/2026). Plegada, de la cabecera queda el renglon
 * `.cp-bandeja-fila` (TODAS y MÍOS con sus contadores, la vista elegida si es otra, la lupa y
 * "Filtros"); el resto se esconde aca y no
 * con `hidden`, que ya lo usa app.js para la bandeja y el historial (`chatPintarModoLista`). Se
 * quedan a la vista lo que filtra la lista aunque este plegada: el buscador con algo buscado o
 * abierto con la lupa (`.buscando`) y las capsulas de una falla en curso.
 */
.cp-lista-cab.plegada {
  gap: 8px;
  padding: 8px 12px;
}

.cp-lista-cab.plegada > :not(.cp-bandeja-fila):not(.cp-buscar):not(.cp-falla-filtro),
.cp-lista-cab.plegada:not(.buscando) > .cp-buscar {
  display: none;
}

.cp-bandeja-fila {
  display: flex;
  align-items: center;
  /* 4 px y no 6 (10/10/2026): con TODAS, MÍOS y ABIERTAS (la de entrada), la lupa y "Filtros",
     a 390 px con barra de scroll clasica faltaban 3 px para que entraran en un renglon. */
  gap: 4px;
  min-height: 28px;
}

/*
 * TODAS y MÍOS (y, plegada, la vista elegida si es otra) en capsulas, 10/10/2026. Si en 390 px no
 * entran las tres con la lupa y "Filtros", la tercera baja a un segundo renglon en vez de cortarse
 * o empujar los botones fuera de la columna.
 */
.cp-bandeja-vista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

/*
 * Con la tercera capsula en un segundo renglon (pasa tambien a 1400 px: la columna de la lista
 * mide lo mismo, ~356 px, y SIN ASIGNAR, SLA POR VENCER, SLA VENCIDO o CERRADAS HOY no entran al
 * lado de TODAS y MÍOS), la lupa y "Filtros" quedan arriba, en el renglon de TODAS y MÍOS, y no
 * flotando entre los dos. Revision del 10/10/2026.
 */
.cp-bandeja-fila > .cp-bandeja-lupa,
.cp-bandeja-fila > .cp-bandeja-boton {
  align-self: flex-start;
}

.cp-bandeja-nombre {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--head);
}

/* La lupa: un circulo del alto del boton de al lado, gris, que se marca (contorno) abierto. */
.cp-bandeja-lupa {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--faint);
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.cp-bandeja-lupa:hover,
.cp-bandeja-lupa[aria-expanded='true'] {
  color: var(--red-txt);
  border-color: var(--red-tint-2);
  background: linear-gradient(var(--red-tint), var(--red-tint)), var(--paper);
}

.cp-bandeja-lupa svg,
.cp-bandeja-boton svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cp-bandeja-boton {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  padding: 4px 8px 4px 7px;
}

.cp-bandeja-boton svg {
  width: 12px;
  height: 12px;
  transition: transform 0.18s ease;
}

.cp-bandeja-boton[aria-expanded='true'] svg {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .cp-bandeja-lupa,
  .cp-bandeja-boton svg {
    transition: none;
  }
}

.cp-vistas .canal-opciones {
  gap: 4px;
  margin-top: 0;
}

/* Las capsulas de la vista son mas chicas que las de un filtro de tabla: van siete en 340 px. */
.canal.cp-vista {
  gap: 5px;
  padding: 4px 7px;
  white-space: nowrap;
}

.canal.cp-vista span {
  font-size: 0.55rem;
  letter-spacing: 0.05em;
}

/* El contador de la capsula: gris; ambar o rojo tenue SOLO si hay algo que hacer ya. */
.cp-vista-cuenta {
  flex: none;
  min-width: 18px;
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-family: var(--f-mono);
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  color: var(--muted);
}

.cp-vista-cuenta.tono-aviso {
  border-color: var(--aviso-borde);
  background: var(--aviso-bg);
  color: var(--aviso-txt);
}

.cp-vista-cuenta.tono-falla {
  border-color: var(--falla-borde);
  background: var(--falla-bg);
  color: var(--falla-txt);
}

/* CON MIA (11/10/2026): pizarra. Avisa que hay clientes con la IA; no es trabajo que espera. */
.cp-vista-cuenta.tono-pizarra {
  border-color: var(--pz-borde);
  background: var(--pz-bg);
  color: var(--pz-txt);
}

.cp-buscar {
  width: 100%;
  padding: 9px 14px;
  font-size: 0.9rem;
}

.cp-filtros-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cp-filtros-boton[aria-expanded='true'] {
  color: var(--red-txt);
  border-color: var(--red-tint-2);
  background: linear-gradient(var(--red-tint), var(--red-tint)), var(--paper);
}

.cp-filtros-cuenta {
  color: var(--red-txt);
}

.cp-orden {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cp-orden span {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

.cp-orden select,
.cp-filtros select {
  padding: 6px 10px;
  font-family: var(--f-body);
  font-size: 0.84rem;
  color: var(--head);
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}

.cp-filtros {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.cp-filtros .filtro {
  gap: 4px;
  min-width: 0;
}

.cp-filtros .filtro select {
  width: 100%;
}

.cp-filtros-limpiar {
  justify-self: start;
  align-self: center;
  font-size: 0.82rem;
}

.cp-lista {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.cp-filas {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cp-fila-item + .cp-fila-item {
  border-top: 1px solid var(--line-soft);
}

/*
 * UNA FILA: cuatro renglones apretados (quien y cuanto espera; numero y marcas; el ultimo
 * mensaje; area, quien la tiene y el SLA). La elegida: el fondo gris y la barra roja de 3 px a la
 * izquierda, la misma barra del corpo en Clientes y de la tarjeta en hover (MARCA §6).
 */
.cp-fila {
  display: grid;
  gap: 3px;
  padding: 11px 14px;
  color: inherit;
  text-decoration: none;
  transition: background 0.15s ease;
}

.cp-fila:hover {
  background: var(--paper-3);
}

.cp-fila[aria-current='true'] {
  background: var(--paper-2);
  box-shadow: inset 3px 0 0 var(--red);
}

.cp-fila:focus-visible {
  outline-offset: -3px;
}

.cp-fila-arriba,
.cp-fila-medio {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.cp-fila-nombre-linea {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.cp-fila-nombre {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--head);
}

.cp-ojo {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
}

.cp-ojo svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cp-ojo.prendido,
.cp-ojo[aria-pressed='true'] {
  color: var(--aviso-txt);
  animation: cp-ojo-titila 0.9s ease-in-out infinite;
}

.cp-ojo:hover:not(.prendido):not([aria-pressed='true']) {
  color: var(--head);
  background: var(--paper-3);
}

.cp-ojo.prendido:hover,
.cp-ojo[aria-pressed='true']:hover {
  color: var(--aviso-txt);
  background: transparent;
}

@keyframes cp-ojo-titila {
  0%, 40% { opacity: 1; }
  60%, 100% { opacity: 0.15; }
}

@media (prefers-reduced-motion: reduce) {
  .cp-ojo.prendido,
  .cp-ojo[aria-pressed='true'],
  .cp-seguir-boton[aria-pressed='true'] svg {
    animation: none;
  }
}

.cp-fila.sin-leer .cp-fila-nombre {
  font-weight: 700;
}

/* Cuanto espera: ambar, porque alguien esta esperando (DISEÑO §2: avisa). */
.cp-fila-espera,
.cp-fila-hora {
  flex: none;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.cp-fila-espera {
  color: var(--aviso-txt);
}

.cp-fila-hora {
  color: var(--faint);
  font-weight: 400;
}

.cp-fila-ids,
.cp-fila-abajo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 5px;
  min-width: 0;
}

.cp-fila-num {
  font-family: var(--f-mono);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  color: var(--faint);
}

.cp-fila-ids .badge,
.cp-fila-abajo .badge {
  padding: 1px 7px;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
}

.cp-fila-texto {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.86rem;
  color: var(--muted);
}

.cp-fila.sin-leer .cp-fila-texto {
  font-weight: 600;
  color: var(--head);
}

.cp-fila-texto.sistema {
  font-style: italic;
}

.cp-fila-prefijo {
  color: var(--faint);
}

/* Los no leidos: el circulo rojo del favicon y del menu, en chico. */
.cp-noleidos {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  font-weight: 700;
}

.cp-fila-abajo {
  margin-top: 2px;
}

/*
 * LOS CONTADORES EN VIVO (09/10/2026): "CLIENTE HACE 3 MIN · OPERADOR HACE 12 MIN", en Space Mono
 * chico y tenue. Los recalcula app.js cada 30 s con su reloj (`chatRelojes`), sin pedir nada. El
 * del operador pasa al rojo de falla cuando vencio el SLA de primera respuesta: es lo unico de
 * este renglon que pide hacer algo.
 */
.cp-fila-reloj {
  font-family: var(--f-mono);
  font-size: 0.58rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cp-fila-reloj .vencido {
  color: var(--falla-txt);
  font-weight: 700;
}

.cp-asignado {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.cp-asignado:empty {
  display: none;
}

/*
 * EL SEMAFORO DEL SLA: un punto y la frase en mono. El color del punto es el estado (verde en
 * tiempo, ambar por vencer, rojo vencido, gris cumplido) y la frase dice cuanto falta o cuanto
 * paso: el color solo se pierde en una lectura rapida (DISEÑO §2).
 */
.cp-sla {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--f-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
}

.cp-sla-punto {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--line-fuerte);
}

.cp-sla.tono-ok .cp-sla-punto {
  background: var(--ok-txt);
}

.cp-sla.tono-aviso {
  color: var(--aviso-txt);
}

.cp-sla.tono-aviso .cp-sla-punto {
  background: var(--aviso-barra);
}

.cp-sla.tono-falla {
  color: var(--falla-txt);
}

.cp-sla.tono-falla .cp-sla-punto {
  background: var(--red);
}

.cp-vacio {
  padding: 40px 18px;
  font-size: 0.9rem;
}

.cp-mas {
  display: block;
  margin: 10px auto 14px;
}

.cp-lista-pie {
  margin: 0;
  padding: 8px 14px;
  border-top: 1px solid var(--line-soft);
  font-size: 0.78rem;
}

.cp-lista-pie:empty {
  display: none;
}

/* --- 2. La conversacion --- */

.cp-nada {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 24px;
  text-align: center;
}

.cp-nada svg {
  width: 42px;
  height: 42px;
  margin-bottom: 6px;
  fill: none;
  stroke: var(--faint);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cp-nada-titulo {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--head);
}

.cp-nada .pie {
  margin: 0;
}

.cp-conv {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/*
 * LA BARRA FINA DEL MEDIO (09/10/2026, reemplaza a la cabecera de la charla): solo de 1279 px para
 * abajo, donde la columna del cliente no se ve. Lleva el Volver (abajo de 900), Tomar / Transferir
 * / Cerrar (`#cp-gestion`, que app.js muda acá) y "Cliente". De 1280 para arriba no se dibuja.
 */
.cp-conv-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--line);
}

.cp-conv-barra-gestion {
  flex: 1 1 auto;
  min-width: 0;
}

.cp-conv-barra-gestion:empty {
  display: none;
}

@media (min-width: 1280px) {
  .cp-conv-barra {
    display: none;
  }
}

/*
 * TOMAR / TRANSFERIR / CERRAR. Arriba de todo de la columna del cliente (1280 px o mas), encima
 * del nombre; en la barra fina del medio, abajo de eso. Es el mismo nodo en los dos lugares.
 */
/*
 * EN LA TARJETA DEL CLIENTE (Sergio, 10/10/2026), arriba de su nombre y separados por una raya fina:
 * los botones son de la charla, lo de abajo es de quien escribe. Ya no se pegan arriba al scrollear
 * (adentro de una tarjeta se irian con ella igual); para eso esta la tarjeta, que es lo primero.
 */
.cp-cliente-cab > .cp-gestion {
  display: grid;
  gap: 8px;
  margin: -2px 0 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}

/* Sin tarjeta (ninguna charla elegida todavia), arriba de la columna y pegado, como antes. */
.cp-col-cliente > .cp-gestion {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.cp-conv-barra-gestion > .cp-gestion {
  display: grid;
  gap: 8px;
}

.cp-conv-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.cp-accion-linea {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
}

#cp-transferir[aria-expanded='true'] {
  border-color: var(--red-tint-2);
  background: linear-gradient(var(--red-tint), var(--red-tint)), var(--paper);
  color: var(--red-txt);
}

.cp-transferir {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper-3);
}

.cp-transferir-a {
  flex: 1 1 240px;
}

.cp-transferir-a select {
  width: 100%;
  padding: 8px 12px;
}

.cp-resultado {
  margin: 0;
}

/*
 * EL CONTEXTO: la franja de la ficha (gris clarito, letras rojas, DISEÑO §2) y abajo el resumen,
 * con tope de alto: es lo primero que se lee y no puede empujar la charla fuera de la pantalla.
 */
.cp-contexto {
  flex: none;
  margin: 10px 16px 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--paper);
}

.cp-contexto-boton {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  border: 0;
  background: var(--franja-bg);
  color: var(--franja-txt);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}

.cp-contexto-boton:focus-visible {
  outline: 2px solid var(--franja-txt);
  outline-offset: -3px;
}

.cp-contexto-origen {
  margin-left: auto;
}

.cp-contexto-origen .badge {
  padding: 2px 8px;
  font-size: 0.56rem;
}

.cp-contexto.plegado .franja-chevron {
  transform: rotate(-90deg);
}

/*
 * El tope es por la charla: el resumen tiene seis o siete renglones y en una notebook de 768 de
 * alto se comia la mitad de la columna. Mas largo, scrollea adentro (y se puede plegar).
 */
.cp-contexto-cuerpo {
  max-height: clamp(72px, 16vh, 150px);
  overflow-y: auto;
  padding: 8px 14px 10px;
}

/*
 * QUE SE NOTE QUE HAY MAS ABAJO. Con el tope, un resumen largo quedaba cortado a mitad de un
 * renglon contra el borde de la tarjeta y se leia como un renglon roto. Mientras queda algo por
 * leer abajo (`mas-abajo`, lo pone `chatContextoDesborde`), el ultimo renglon a la vista se
 * desvanece —la misma pista del borde de arriba del hilo— y al llegar al final se ve entero. Es
 * una mascara de transparencia: anda igual en los dos temas.
 */
.cp-contexto-cuerpo.mas-abajo {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 34px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 34px), transparent);
}

.cp-contexto-texto {
  margin: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
  font-size: 0.84rem;
  line-height: 1.42;
  color: var(--head);
}

.cp-contexto-cuerpo .pie {
  margin: 0;
}

.cp-contexto-previa {
  margin-top: 8px !important;
}

.cp-contexto-nota {
  margin: 8px 0 0;
  font-family: var(--f-mono);
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

.cp-hilo-marco {
  position: relative;
  flex: 1;
  min-height: 0;
}

/*
 * El borde de arriba del hilo se desvanece: una burbuja cortada a la mitad por el scroll se lee
 * como "hay mas arriba" y no como una burbuja rota pegada al contexto.
 */
.cp-hilo {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding: 14px 16px 12px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 16px);
}

.cp-hilo:focus-visible {
  outline-offset: -3px;
}

.cp-hilo-aviso {
  margin: auto !important;
  text-align: center;
}

.cp-viejos {
  align-self: center;
  margin-bottom: 4px;
  font-size: 0.82rem;
}

.cp-dia {
  margin: 6px 0;
}

.cp-burbuja {
  max-width: 76%;
}

/* El nombre de quien escribio (el que ve el cliente), arriba de la burbuja del operador. */
.burbuja-autor {
  margin: 0 0 3px;
  font-family: var(--f-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.burbuja.agente .burbuja-autor {
  text-align: right;
}

/* El chip BOTMAKER de una respuesta de agente pasada al hilo (15/10/2026): chico, a la izquierda del nombre. */
.burbuja-autor .cp-chip-botmaker {
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 0.54rem;
  vertical-align: 1px;
}

.cp-burbuja.enviando {
  opacity: 0.65;
}

/* La que no salio: el rojo tenue de la falla, y su Reintentar debajo. */
.cp-burbuja.fallida {
  border-color: var(--falla-borde);
  background: linear-gradient(var(--falla-bg), var(--falla-bg)), var(--paper);
}

.cp-burbuja-error {
  margin: 4px 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--falla-txt);
  text-align: right;
}

.cp-reintentar {
  display: block;
  margin: 2px 0 0 auto;
  font-size: 0.82rem;
}

.cp-via {
  margin: 4px 0 0;
  font-family: var(--f-mono);
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

/*
 * "MENSAJES NUEVOS ↓": llego algo y se estaba leyendo mas arriba. Una capsula en tinta abajo del
 * hilo, en vez de arrastrar el scroll de quien esta leyendo.
 */
.cp-nuevos {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--head);
  color: var(--paper);
  font-family: var(--f-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: var(--sombra);
  cursor: pointer;
}

.cp-escribiendo {
  min-height: 20px;
  margin: 0;
  padding: 0 18px 2px;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--muted);
}

.cp-cerrada {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--muted);
}

/*
 * CON MIA (11/10/2026): en el lugar de la caja, que pasa (badge pizarra + una frase corta) y los dos
 * botones, pill como todos. Tomar la charla es el primario: es lo que se vino a hacer.
 */
.cp-con-mia {
  display: grid;
  gap: 10px;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--line);
}

.cp-con-mia[hidden] {
  display: none;
}

.cp-con-mia-texto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted);
}

.cp-con-mia-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cp-con-mia-acciones[hidden] {
  display: none;
}

.cp-con-mia .cp-resultado {
  margin: 0;
}

.cp-caja {
  display: grid;
  gap: 8px;
  padding: 10px 16px 4px;
  border-top: 1px solid var(--line);
}

/* El campo y el boton, en un renglon: el boton abajo, pegado al ultimo renglon del texto. */
.cp-caja-fila {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

/* El ancla del menu de las rapidas: se abre ARRIBA del campo, del mismo ancho. */
.cp-caja-campo {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
}

.cp-caja textarea {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  max-height: 152px;
  padding: 11px 14px;
  resize: none;
  font-family: var(--f-body);
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--head);
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: 12px;
}

/*
 * EL FOCO DE LA CAJA ES EL BORDE, NO EL ANILLO. El operador tiene el cursor ahi toda la tarde: el
 * anillo rojo de 2 px del resto del panel, permanente, es el elemento mas fuerte de la pantalla.
 * Borde rojo y un halo tenue dicen lo mismo sin gritar (y se siguen viendo: el borde es solido).
 */
.cp-caja textarea:focus,
.cp-buscar:focus {
  border-color: var(--red);
  outline: none;
  box-shadow: 0 0 0 3px var(--red-tint);
}

.cp-enviar-grupo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: none;
}

.cp-enviar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
}

.cp-enviar-seguir {
  padding: 8px 12px;
  font-size: 0.78rem;
}

.cp-enviar svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}

/*
 * APAGADO ES GRIS, NO SALMON (DISEÑO.md §2): el primario con opacidad da un rosado que se lee como
 * "otro rojo de marca" y no como "todavia no". Sin texto en la caja, el gris de las franjas. Vale
 * para los dos primarios de la seccion (Enviar y el Transferir del panel).
 */
.seccion-chat .btn-primario:disabled,
.cp-enviar:disabled {
  opacity: 1;
  background: var(--franja-bg);
  color: var(--franja-sub);
  box-shadow: none;
}

/* El avion sale un poco hacia adelante: el icono acompaña el gesto (DISEÑO §6.1). */
.cp-enviar:hover:not(:disabled) svg {
  transform: translate(2px, -2px);
}

.cp-caja-nota {
  margin: 0;
  padding: 2px 16px 10px;
  font-family: var(--f-mono);
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: right;
  color: var(--faint);
}

.cp-caja-nota.tope {
  color: var(--falla-txt);
}

/*
 * EL CAMBIO DE MODO, DICHO (09/10/2026): "NOTA GUARDADA · AHORA LE ESCRIBÍS AL CLIENTE" o "SALISTE
 * DE LA NOTA", 4 s adelante del renglón de abajo. En la tinta de los títulos y no en el gris de
 * siempre: es lo que hay que leer antes de escribir lo próximo. Entra con un fundido corto (una
 * vez, .2 s) para que el ojo lo encuentre; con "reducir movimiento", aparece y listo.
 */
.cp-caja-cambio {
  color: var(--head);
  font-weight: 700;
  animation: cp-caja-cambio 0.2s ease-out both;
}

@keyframes cp-caja-cambio {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cp-caja-cambio {
    animation: none;
  }
}

/* --- El hilo: las charlas del cliente y la IA, en una columna (09/10/2026) --- */

/*
 * "PRINCIPIO DEL HISTORIAL": arriba de todo cuando ya no hay nada mas atras. Es el separador de
 * siempre (`.chat-sesion`) con otra palabra: dice que la historia empieza ahi, no que se corto.
 */
.cp-principio {
  margin: 2px 0 6px;
}

/*
 * "CERRADA EL 8/10 POR SERGIO · NUEVA CHARLA EL 9/10": donde empieza otra charla del mismo
 * cliente. La RAYA FUERTE (2 px de `--line-fuerte`) y no la fina del dia: es un corte de otra
 * clase —la anterior se cerro—, pero sigue siendo un corte y no un titulo. El `#id` lleva a esa
 * charla (su cabecera, quien la atendio) sin salir del hilo.
 */
.cp-charla {
  display: flex;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  margin: 14px 0 8px;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.cp-charla::before,
.cp-charla::after {
  content: "";
  flex: 1;
  min-width: 18px;
  height: 2px;
  background: var(--line-fuerte);
}

.cp-charla-texto {
  text-align: center;
  overflow-wrap: anywhere;
}

.cp-charla-id {
  flex: none;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--head);
  text-decoration: none;
  transition: border-color 0.18s ease, color 0.18s ease;
}

.cp-charla-id:hover,
.cp-charla-id[aria-current="true"] {
  border-color: var(--red);
  color: var(--red-txt);
}

/*
 * LAS MARCAS DEL TRAMO DE LA IA: pastillas PIZARRA del ancho de su texto, al medio (DISEÑO.md §2:
 * los pills de aviso sueltos nunca van llenos a lo ancho, para que no se lean como un boton). El
 * icono cuenta que paso —la IA que atiende, el pase a una persona, el tilde del final—.
 */
.cp-marca-ia {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 10px;
  align-self: center;
  max-width: 92%;
  margin: 6px 0 2px;
}

.cp-marca-ia-pastilla {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px 4px 9px;
  border: 1px solid var(--pz-borde);
  border-radius: 999px;
  background: var(--pz-bg);
  font-family: var(--f-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pz-txt);
  text-align: center;
}

.cp-marca-ia-icono {
  flex: none;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--pz-icono);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cp-marca-ia-ver {
  font-size: 0.78rem;
}

/*
 * UNA RESPUESTA DE LA IA: del lado de "nosotros" (derecha), pero NO con el tinte rojo del
 * operador —el rojo es la persona del equipo—: papel, borde pizarra y su icono arriba. Se lee de
 * un vistazo quien contesto: la IA o alguien.
 */
.cp-burbuja.cp-ia {
  align-self: flex-end;
  background: var(--paper);
  border-color: var(--pz-borde);
}

.cp-ia-autor {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  color: var(--pz-txt);
}

.cp-ia-icono,
.cp-nota-icono {
  flex: none;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--pz-icono);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cp-burbuja.cp-ia .burbuja-pie {
  text-align: right;
}

/*
 * LA NOTA INTERNA: del lado del operador, en PIZARRA clarita con el borde punteado —no salio a
 * ningun lado— y el candado con "NOTA · SOLO EL EQUIPO". Sin el rojo de lo que si le llego al
 * cliente: una nota que se confunde con una respuesta es una respuesta que el cliente nunca leyo.
 */
.cp-burbuja.cp-nota {
  background: var(--pz-bg);
  border-color: var(--pz-borde);
  border-style: dashed;
}

.cp-nota-rotulo {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  color: var(--pz-txt);
}

.cp-burbuja.cp-nota .burbuja-pie {
  color: var(--pz-txt);
}

/* Un registro de sistema que el cliente no lee (el cambio de area, el contexto nuevo). */
.burbuja.sistema.cp-interno .burbuja-texto {
  font-style: italic;
}

/*
 * LO QUE LLEGA ENTRA: un fundido con 6 px de subida, una vez (MARCA §7: discreto, corto). Solo lo
 * NUEVO —lo que no estaba pintado—; la primera pintada del hilo y las paginas de arriba no, porque
 * eso no llego: se fue a buscar.
 */
@keyframes cp-entra {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.cp-hilo .entra {
  animation: cp-entra 0.24s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

/* --- La caja: nota interna y respuestas rapidas --- */

.cp-caja-herramientas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/*
 * LAS DOS HERRAMIENTAS: pills chicas en Space Mono, como las capsulas de filtro. La NOTA prendida
 * se llena de pizarra (es un interruptor: `aria-pressed`); RÁPIDAS es un boton que abre un menu.
 */
.cp-herramienta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 5px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-family: var(--f-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.cp-herramienta svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}

.cp-herramienta:hover:not(:disabled) {
  border-color: var(--line-fuerte);
  color: var(--head);
}

/* El rayo hace un gesto chico al pasar (DISEÑO §6.1: el icono acompaña). */
.cp-herramienta:hover:not(:disabled) svg {
  transform: translateY(-1px) rotate(-8deg);
}

.cp-herramienta[aria-expanded="true"] {
  border-color: var(--red);
  color: var(--head);
}

.cp-nota-boton[aria-pressed="true"] {
  border-color: var(--pz-borde);
  background: var(--pz-bg);
  color: var(--pz-txt);
}

.cp-nota-boton[aria-pressed="true"] svg {
  stroke: var(--pz-icono);
}

.cp-seguir-boton[aria-pressed="true"] {
  border-color: var(--aviso-borde);
  background: var(--aviso-bg);
  color: var(--aviso-txt);
}

.cp-seguir-boton[aria-pressed="true"] svg {
  animation: cp-ojo-titila 0.9s ease-in-out infinite;
}

/* Fija en prendida (cerrada, o de otro): se ve prendida, sin parecer apagada. */
.cp-nota-boton:disabled {
  cursor: default;
  opacity: 1;
}

/*
 * LA CAJA CON LA NOTA PRENDIDA: el campo en pizarra y el boton "Guardar nota" en tinta —no el
 * primario rojo, que es "esto le llega al cliente"—. El cambio se ve pasar (.2 s), asi el
 * operador nota que cambio a que le esta escribiendo.
 */
.cp-caja textarea {
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.cp-caja.nota textarea {
  background: var(--pz-bg);
  border-color: var(--pz-borde);
  border-style: dashed;
}

.cp-caja.nota textarea:focus {
  border-color: var(--pz-icono);
  box-shadow: 0 0 0 3px var(--pz-bg);
}

.cp-enviar-nota {
  background: var(--head);
  color: var(--paper);
  border: 1px solid var(--head);
}

.cp-enviar-nota:hover:not(:disabled) {
  background: var(--text);
  border-color: var(--text);
}

.cp-caja.nota + .cp-caja-nota {
  color: var(--pz-txt);
}

/*
 * EL MENU DE LAS RAPIDAS: arriba del campo, de su mismo ancho, con tope de alto y scroll. Entra
 * con un fundido y 4 px de subida (.16 s), una vez al abrirse.
 */
.cp-rapidas {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 5;
  max-height: min(300px, 46vh);
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  box-shadow: 0 18px 40px -22px rgba(20, 20, 30, 0.45);
}

.cp-rapidas.abierto {
  animation: cp-rapidas-entra 0.16s ease-out both;
}

@keyframes cp-rapidas-entra {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.cp-rapidas-cab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 6px;
  font-family: var(--f-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

.cp-rapidas-icono {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: var(--red);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cp-rapidas-vacio {
  padding: 8px 10px 10px;
  font-size: 0.85rem;
  color: var(--muted);
}

.cp-rapida {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}

/* La elegida: el tinte rojo y una barra de 3 px (el acento de la tarjeta, MARCA §6). */
.cp-rapida.activa {
  background: var(--red-tint);
  box-shadow: inset 3px 0 0 var(--red);
}

.cp-rapida-arriba {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.cp-rapida-atajo {
  flex: none;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--red-txt);
}

.cp-rapida-nombre {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--head);
}

.cp-rapida-texto {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.82rem;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .cp-hilo .entra,
  .cp-rapidas.abierto {
    animation: none;
  }

  .cp-herramienta,
  .cp-herramienta svg,
  .cp-caja textarea,
  .cp-charla-id {
    transition: none;
  }
}

/* --- 3. El cliente --- */

.cp-cliente-barra {
  display: none;
  padding: 12px 14px 0;
}

.cp-cliente {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px;
}

.cp-cliente-nada {
  margin: 40px 8px !important;
  text-align: center;
}

.cp-cliente-sin {
  margin: 0;
}

.cp-cliente-cab {
  display: grid;
  gap: 8px;
  padding: 14px 14px 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.cp-cliente-nombre {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.15;
  color: var(--head);
  overflow-wrap: anywhere;
}

.cp-cliente-cab .eyebrow {
  margin: 0;
}

.cp-cliente-ids {
  margin-top: 0;
  gap: 6px 12px;
}

/* Un dato y su COPIAR: juntos siempre (la fila se parte entre pares). */
.cp-par {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.cp-cliente-app {
  margin: 0;
}

.cp-cliente-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cp-cliente-acciones .btn-entrar {
  font-size: 0.64rem;
  padding: 7px 12px;
}

.cp-cliente-acceso:empty {
  display: none;
}

.cp-cliente-badges {
  margin: 0;
}

.cp-cliente .ficha-seccion {
  border-radius: 12px;
}

.cp-cliente .franja,
.cp-cliente .franja-boton {
  min-height: 40px;
}

.cp-cliente .franja-cuerpo {
  padding: 12px 12px 14px;
}

/* En una columna de 360 px los bloques de SITUACIÓN van uno abajo del otro. */
.cp-cliente .situacion-fila {
  grid-template-columns: minmax(0, 1fr);
}

.cp-cliente .ficha-actividad .ficha-filtro legend {
  float: none;
}

/*
 * LA TARJETA NOTAS (09/10/2026): lo que el equipo anotó de este cliente, de la más nueva a la más
 * vieja, con "Agregar nota" arriba. Es la nota de la caja del medio en chico: PIZARRA punteada (lo
 * que el cliente no lee; DISEÑO §2), el candado y "Guardar nota" en tinta, no el rojo de "esto le
 * llega al cliente". Cada nota es un renglón de quién y cuándo en Space Mono, y el texto en
 * Hanken, sin burbuja: en 360 px una columna de burbujas es una columna de bordes.
 */
.cp-notas-form {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
}

.cp-notas-texto {
  width: 100%;
  min-height: 60px;
  max-height: 180px;
  padding: 9px 12px;
  font-family: var(--f-body);
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--head);
  background: var(--pz-bg);
  border: 1px dashed var(--pz-borde);
  border-radius: var(--r-sm);
  resize: vertical;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cp-notas-texto::placeholder {
  color: var(--pz-txt);
  opacity: 0.8;
}

.cp-notas-texto:focus {
  outline: none;
  border-color: var(--pz-icono);
  box-shadow: 0 0 0 3px var(--pz-bg);
}

.cp-notas-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.cp-notas-ayuda {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--f-mono);
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pz-txt);
}

.cp-notas-guardar:disabled {
  cursor: default;
  opacity: 0.45;
}

#cp-notas-resultado {
  margin: 0;
}

.cp-notas-lista {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cp-notas-item {
  padding: 10px 0;
  border-top: 1px solid var(--line-soft);
}

.cp-notas-item:first-child {
  border-top: 0;
  padding-top: 2px;
}

.cp-notas-cab {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 4px;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pz-txt);
}

.cp-notas-quien {
  font-weight: 700;
}

.cp-notas-cuando {
  color: var(--faint);
}

/* La charla donde quedó: una pill chica, como el `#id` del separador del hilo, al final del renglón. */
.cp-notas-charla {
  margin-left: auto;
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
}

.cp-notas-charla:hover {
  border-color: var(--line-fuerte);
  color: var(--head);
}

.cp-notas-texto-nota {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.cp-notas-estado {
  margin: 0;
}

.cp-notas-estado.falla {
  color: var(--falla-txt);
}

.cp-notas-mas {
  margin-top: 6px;
}

/* La que acaba de entrar (guardada acá, desde la caja o por el stream): el fundido del hilo. */
.cp-notas-item.entra {
  animation: cp-entra 0.24s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .cp-notas-item.entra {
    animation: none;
  }
}

/* --- De 1280 px para abajo: la ficha es un panel al costado --- */

@media (min-width: 1280px) {
  .cp-ver-cliente {
    display: none;
  }
}

@media (min-width: 900px) {
  #cp-volver-lista {
    display: none;
  }
}

/*
 * DE 900 A 1279 PX: dos columnas y el cliente como PANEL AL COSTADO, que abre el boton "Cliente"
 * de la cabecera de la charla (pedido de la especificacion). Encima de la charla y sin telon: la
 * charla sigue a la vista y tocable al lado, y el panel se cierra con su "← Chat" o con Escape.
 */
@media (max-width: 1279px) {
  .cp-app {
    grid-template-columns: minmax(280px, 330px) minmax(0, 1fr);
  }

  .cp-col-cliente {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    width: min(400px, 92%);
    box-shadow: -26px 0 44px -32px rgba(20, 20, 30, 0.55);
    transform: translateX(102%);
    visibility: hidden;
    transition: transform 0.22s ease, visibility 0s linear 0.22s;
  }

  .cp-app.cliente-abierto .cp-col-cliente {
    transform: none;
    visibility: visible;
    transition: transform 0.22s ease;
  }

  .cp-cliente-barra {
    display: block;
  }
}

/* ABAJO DE 900 PX: una columna por vez (`data-columna`), cada una con su Volver. */
@media (max-width: 899px) {
  #pantalla-tablero.modo-chat {
    padding: 0 12px;
  }

  .cp-app {
    grid-template-columns: minmax(0, 1fr);
    min-height: 460px;
  }

  .cp-col {
    display: none;
  }

  .cp-app[data-columna='lista'] .cp-col-lista,
  .cp-app[data-columna='conv'] .cp-col-conv,
  .cp-app[data-columna='cliente'] .cp-col-cliente {
    display: flex;
  }

  .cp-col-lista {
    border-right: 0;
  }

  .cp-col-cliente {
    position: static;
    width: auto;
    border-left: 0;
    box-shadow: none;
    transform: none;
    visibility: visible;
    transition: none;
  }

  /*
   * En un telefono no entran Volver, los tres botones y "Cliente" en un renglon: arriba van los
   * dos que NAVEGAN (← Chats a la izquierda, Cliente a la derecha) y abajo los tres que ACTUAN.
   */
  .cp-conv-barra {
    gap: 6px 8px;
    padding: 8px 12px;
  }

  .cp-conv-barra .cp-ver-cliente {
    order: 1;
    margin-left: auto;
  }

  .cp-conv-barra-gestion {
    order: 2;
    flex-basis: 100%;
  }

  .cp-cab {
    flex-wrap: nowrap;
    gap: 8px;
  }

  .cp-cab-titulo {
    flex-wrap: nowrap;
    min-width: 0;
  }

  .cp-contexto {
    margin: 8px 12px 6px;
  }

  .cp-hilo {
    padding: 12px 12px 10px;
  }

  .cp-burbuja {
    max-width: 88%;
  }

  .cp-caja {
    padding: 8px 12px 4px;
  }

  .cp-enviar span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
  }

  .cp-enviar {
    padding: 11px 14px;
  }

  .cp-cab-acciones .cp-sonido span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cp-col-cliente,
  .cp-enviar svg {
    transition: none !important;
  }
}

/* --- Ajustes > Chat: el chat propio (09/10/2026; hasta ese día, al pie de Configuración) --- */

/*
 * EL BLOQUE "CHAT PROPIO" (la perilla, las áreas, los operadores) es lo primero de su pestaña: ya
 * no hace falta la raya fuerte que lo separaba de las perillas de Configuración. La raya pasó a las
 * RESPUESTAS RÁPIDAS de abajo, que son textos y no quién atiende (`.ajustes-rapidas`).
 */
.cp-config {
  margin-top: 0;
}

.ajustes-chat-lead {
  max-width: 640px;
  margin: -6px 0 20px;
}

/*
 * LAS RESPUESTAS RÁPIDAS, al pie de Ajustes > Chat: la raya fuerte (2 px de `--line-fuerte`) dice
 * "esto es otra cosa", y el título es display 700 como el de un bloque de la ficha (MARCA §3), con
 * "Nueva respuesta" a la derecha como lo tenía la cabecera de su pestaña vieja.
 */
.ajustes-rapidas {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 2px solid var(--line-fuerte);
}

.ajustes-sub-cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.ajustes-sub-titulo {
  font-size: clamp(1.15rem, 2vw, 1.35rem);
}

.cp-cfg-rotulo {
  display: flex;
  align-items: center;
  gap: 10px;
}

/*
 * LA PERILLA DE TRES POSICIONES. El apretado lleva el tinte rojo sobre papel (el de la capsula
 * elegida del tema, con el mismo contraste medido); TODOS armado, el ambar del segundo click.
 */
.cp-piloto {
  display: inline-flex;
  gap: 3px;
  margin-top: 10px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-3);
}

.cp-piloto-op {
  padding: 8px 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.cp-piloto-op:hover:not(:disabled) {
  color: var(--head);
}

.cp-piloto-op[aria-pressed='true'] {
  border-color: var(--red-tint-2);
  background: linear-gradient(var(--red-tint), var(--red-tint)), var(--paper);
  color: var(--red-txt);
}

.cp-piloto-op.confirmar {
  border-color: var(--aviso-borde);
  background: var(--aviso-bg);
  color: var(--aviso-txt);
}

.cp-piloto-op:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.cp-cfg-leads input {
  width: 240px;
  font-family: var(--f-mono);
  font-size: 0.92rem;
}

.cp-cfg-defecto select {
  width: 240px;
}

/* El "Guardar" de la cabecera es para el lector: que no se escape de la tabla que scrollea. */
.cp-config .tabla-marco {
  position: relative;
}

.cp-tabla {
  min-width: 640px;
}

.cp-tabla thead th {
  padding: 11px 12px;
}

.cp-tabla tbody td {
  padding: 10px 12px;
  vertical-align: middle;
}

.cp-tabla tbody tr.apagada td {
  color: var(--faint);
}

.cp-tabla .badge {
  margin-left: 6px;
}

.cp-cfg-nombre,
.cp-cfg-min {
  padding: 8px 11px;
  font-size: 0.9rem;
  color: var(--head);
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.cp-cfg-nombre {
  width: 100%;
  min-width: 140px;
  font-family: var(--f-body);
}

.cp-cfg-min {
  width: 86px;
  font-family: var(--f-mono);
}

.cp-cfg-nombre:focus,
.cp-cfg-min:focus {
  border-color: var(--red-tint-2);
}

/*
 * SIN NOMBRE VISIBLE (07/10/2026): el cliente ve "el equipo de Musurit". Ambar y debajo del campo
 * (que ocupa la celda entera): es lo que falta cargar antes de prender el piloto.
 */
.cp-cfg-sin-nombre {
  margin-top: 6px;
}

.cp-cfg-nombre:disabled,
.cp-cfg-min:disabled {
  opacity: 0.6;
}

.cp-cfg-unidad {
  margin-left: 6px;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}

.cp-cfg-centro {
  text-align: center;
}

.cp-cfg-centro input {
  width: 18px;
  height: 18px;
  accent-color: var(--red);
}

.cp-cfg-accion {
  text-align: right;
  white-space: nowrap;
}

.cp-cfg-cupo {
  white-space: nowrap;
}

.cp-cfg-sin {
  display: block;
  margin-top: 3px;
  font-family: var(--f-mono);
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

.cp-cfg-areas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cp-cfg-area {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-size: 0.82rem;
  color: var(--text);
  cursor: pointer;
}

.cp-cfg-area input {
  margin: 0;
  accent-color: var(--red);
}

.cp-cfg-area:has(input:checked) {
  border-color: var(--red-tint-2);
  background: linear-gradient(var(--red-tint), var(--red-tint)), var(--paper);
  color: var(--head);
}

.cp-cfg-area.inactiva span {
  text-decoration: line-through;
  color: var(--faint);
}

/* Un campo con un valor que no sirve: el FONDO en el rojo tenue de la falla (el foco es el anillo). */
.campo-mal {
  border-color: var(--falla-borde) !important;
  background: linear-gradient(var(--falla-bg), var(--falla-bg)), var(--paper) !important;
}

@media (max-width: 560px) {
  .cp-piloto {
    display: flex;
  }

  .cp-piloto-op {
    flex: 1;
    padding: 8px 10px;
  }

  .cp-cfg-leads input,
  .cp-cfg-defecto select {
    width: 100%;
  }

  .cp-cfg-leads,
  .cp-cfg-defecto {
    flex: 1 1 100%;
  }
}

/*
 * DE 720 PX PARA ABAJO, LAS DOS TABLAS SE APILAN: una tarjeta por area y por operador, con el
 * rotulo de cada campo arriba (`data-rotulo`, lo pone app.js). La tabla que scrollea de costado
 * —la regla del resto del panel— aca dejaba el cupo y el Guardar fuera de la pantalla, y una
 * fila de configuracion que no se puede guardar sin buscar el boton no es una fila que se use.
 * La cabecera queda para el lector de pantalla (cada campo ademas tiene su `aria-label`).
 */
@media (max-width: 720px) {
  .cp-config .tabla-marco {
    overflow-x: visible;
  }

  .cp-tabla {
    min-width: 0;
  }

  .cp-tabla thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
  }

  .cp-tabla,
  .cp-tabla tbody {
    display: block;
  }

  .cp-tabla tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px 14px;
    padding: 14px;
    border-bottom: 1px solid var(--line-soft);
  }

  .cp-tabla tbody tr:last-child {
    border-bottom: 0;
  }

  .cp-tabla tbody td {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
  }

  .cp-tabla tbody td[data-rotulo]::before {
    content: attr(data-rotulo);
    display: block;
    margin-bottom: 5px;
    font-family: var(--f-mono);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--faint);
  }

  /* El vacio ("Buscando…", "Todavía no hay áreas.") ocupa la tarjeta entera. */
  .cp-tabla tbody td[colspan] {
    grid-column: 1 / -1;
  }

  /* Areas: el nombre a lo ancho con "Activa" al lado; los dos SLA abajo; el Guardar al pie. */
  #cp-cfg-areas-filas td:first-child {
    grid-column: 1 / -1;
  }

  #cp-cfg-areas-filas .cp-cfg-centro {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
  }

  #cp-cfg-areas-filas .cp-cfg-centro::before {
    margin-bottom: 0;
  }

  /* Operadores: la cuenta y el nombre en un renglon, las areas a lo ancho, el cupo y el Guardar. */
  #cp-cfg-operadores-filas td:nth-child(3) {
    grid-column: 1 / -1;
  }

  .cp-tabla .cp-cfg-accion {
    grid-column: 1 / -1;
    text-align: right;
  }

  /* En los operadores el Guardar entra al lado del cupo: un renglon menos por tarjeta. */
  #cp-cfg-operadores-filas .cp-cfg-accion {
    grid-column: auto;
    align-self: end;
  }

  .cp-cfg-cuenta .num {
    font-size: 0.95rem;
  }

  .cp-cfg-nombre {
    min-width: 0;
  }

  .cp-cfg-min {
    width: 74px;
  }
}

/* ===========================================================================
 * RESPUESTAS RÁPIDAS (Ajustes, solo admin; 09/10/2026)
 * ===========================================================================
 *
 * La lista es la tabla del chat propio en Configuración (`.cp-tabla`: de 720 px para abajo, una
 * tarjeta por fila con el rótulo arriba de cada dato). La página de una respuesta es el
 * formulario de siempre (`.vista-forma`, 560 px) con la VISTA PREVIA al lado de 900 px para arriba
 * y abajo de 900, debajo: es lo que se mira mientras se escribe.
 */

.rapidas-lead {
  max-width: 640px;
  margin: -4px 0 16px;
}

.rapidas-atajo-ej {
  font-family: var(--f-mono);
  font-weight: 700;
  color: var(--red-txt);
}

.rapidas-fila {
  cursor: pointer;
  transition: background 0.18s ease;
}

.rapidas-fila:hover td {
  background: var(--paper-3);
}

.rapidas-link {
  font-family: var(--f-mono);
  font-weight: 700;
  color: var(--red-txt);
  text-decoration: none;
}

.rapidas-link:hover {
  text-decoration: underline;
}

.rapidas-fila.apagada .rapidas-link {
  color: var(--faint);
}

.rapidas-nombre {
  font-weight: 600;
  color: var(--head);
}

.rapidas-texto {
  max-width: 420px;
  color: var(--muted);
}

.rapida-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 380px);
  gap: 28px;
  align-items: start;
}

@media (max-width: 899px) {
  .rapida-cuerpo {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
}

.vista-titulo #rapida-estado-badge {
  margin-top: 8px;
}

/* El atajo con su barra adelante: se escribe "saludo" y se lee "/saludo", como en el chat. */
.campo .rapida-atajo-marco {
  display: flex;
  align-items: stretch;
  margin-top: 7px;
  font-family: var(--f-body);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--head);
}

.rapida-barra {
  display: grid;
  place-items: center;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-right: 0;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  background: var(--paper-2);
  font-family: var(--f-mono);
  color: var(--red-txt);
}

.campo .rapida-atajo-marco input {
  margin-top: 0;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-family: var(--f-mono);
}

.campo-ayuda {
  display: block;
  margin-top: 6px;
  font-size: 0.82rem;
  font-style: normal;
  line-height: 1.45;
  color: var(--muted);
}

.campo input[aria-invalid="true"],
.campo textarea[aria-invalid="true"] {
  border-color: var(--falla-borde);
  background: linear-gradient(var(--falla-bg), var(--falla-bg)), var(--paper);
}

.rapida-variables {
  margin-top: 6px;
}

.rapida-variables-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

/* Las variables van en minúscula, como se escriben: `{nombre}` no es un rótulo. */
.rapida-variable {
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 0.72rem;
  padding: 5px 11px;
}

.rapida-campo-orden input {
  display: block;
  max-width: 140px;
}

.rapida-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.rapida-previa {
  position: sticky;
  top: calc(var(--alto-barra, 64px) + var(--alto-menu, 100px) + 12px);
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper-2);
}

@media (max-width: 899px) {
  .rapida-previa {
    position: static;
  }
}

.rapida-previa .tarjeta-rotulo {
  margin: 0 0 10px;
}

.rapida-previa-caso {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

.rapida-previa-caso .eyebrow {
  margin: 0;
}

/* La burbuja del operador, como la del chat (a la derecha, el tinte rojo y su nombre arriba). */
.rapida-previa-burbuja {
  max-width: 100%;
  justify-self: end;
}

.rapida-previa-burbuja .burbuja-autor {
  text-align: right;
}

.rapida-previa-nota {
  margin: 14px 0 0;
}

.rapida-previa-nota.mal {
  color: var(--falla-txt);
  font-weight: 600;
}

/* ===========================================================================
 * MENSAJES PREDEFINIDOS (Ajustes > Chat, solo admin; 10/10/2026)
 * ===========================================================================
 *
 * La tabla de Permisos con otra columna derecha: el nombre (con dónde se usa, chico y en gris, y
 * la clave en mono para cruzarla con la auditoría) a la izquierda y el texto a la derecha. Cada
 * grupo con su encabezado en Space Mono y una bajada que dice a quién le llega. El punto rojo es
 * "distinto de fábrica" (como está ESCRITO) y el ámbar del campo, "sin guardar": los dos de
 * Permisos. De 720 px para abajo la fila se apila: el nombre arriba y el texto a lo ancho.
 */

.tabla-mensajes {
  min-width: 0;
  table-layout: fixed;
}

.tabla-mensajes thead th:first-child {
  width: 34%;
}

.mensajes-grupo th {
  padding: 16px 18px 10px;
  text-align: left;
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.mensajes-grupo:first-child th {
  border-top: 0;
}

.mensajes-grupo-nombre {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--head);
}

.mensajes-grupo-bajada {
  display: block;
  margin-top: 4px;
  font-size: 0.84rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--muted);
}

.mensajes-nombre {
  text-align: left;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--head);
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}

.mensajes-clave {
  display: block;
  margin-top: 6px;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--faint);
  overflow-wrap: anywhere;
}

.mensajes-a-fabrica {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.84rem;
  font-weight: 400;
}

.mensajes-celda {
  padding: 14px 18px;
  vertical-align: top;
  border-bottom: 1px solid var(--line-soft);
}

/* EL CAMPO: un renglón que crece con el texto (lo mide app.js; `field-sizing` donde exista). */
.mensajes-texto {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  resize: none;
  overflow: hidden;
  field-sizing: content;
  font-family: var(--f-body);
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--head);
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.mensajes-texto:focus {
  border-color: var(--red-tint-2);
}

.mensajes-texto.sin-guardar {
  border-color: var(--aviso-borde);
  background: linear-gradient(var(--aviso-bg), var(--aviso-bg)), var(--paper-3);
}

.mensajes-texto[aria-invalid="true"] {
  border-color: var(--falla-borde);
  background: linear-gradient(var(--falla-bg), var(--falla-bg)), var(--paper-3);
}

.mensajes-texto:disabled {
  opacity: 0.6;
}

.mensajes-error {
  margin: 6px 0 0;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--falla-txt);
}

.mensajes-pie {
  display: flex;
  align-items: center;
  gap: 8px 12px;
  margin-top: 6px;
}

.mensajes-variables {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.mensajes-variables:empty {
  display: none;
}

.mensajes-contador {
  flex: none;
  margin: 0 0 0 auto;
}

/* LA VISTA PREVIA: el texto con los valores de ejemplo, como lo lee el cliente. */
.mensajes-previa {
  margin: 6px 0 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--text);
}

.mensajes-previa-rotulo {
  margin-right: 8px;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

.mensajes-fabrica {
  margin: 4px 0 0;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--faint);
}

/* EL INGLÉS, PLEGADO: un renglón con EN y el texto recortado; abierto, el mismo campo. */
.mensajes-en {
  margin-top: 10px;
  padding-top: 6px;
  border-top: 1px dashed var(--line);
}

.mensajes-en summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  cursor: pointer;
  list-style: none;
  font-size: 0.86rem;
  color: var(--muted);
}

.mensajes-en summary::-webkit-details-marker {
  display: none;
}

.mensajes-en summary::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.16s ease;
}

.mensajes-en[open] summary::after {
  transform: rotate(-135deg) translateY(-2px);
}

.mensajes-en-rotulo {
  flex: none;
  padding: 2px 9px;
  font-family: var(--f-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--head);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.mensajes-en-resumen {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mensajes-en[open] .mensajes-en-resumen {
  visibility: hidden;
}

.mensajes-en .mensajes-campo {
  margin-top: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .mensajes-en summary::after {
    transition: none;
  }
}

@media (max-width: 720px) {
  .tabla-mensajes thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
  }

  .tabla-mensajes,
  .tabla-mensajes tbody,
  .tabla-mensajes tr,
  .tabla-mensajes th,
  .tabla-mensajes td {
    display: block;
    width: auto;
  }

  .mensajes-grupo th {
    padding: 14px 14px 10px;
  }

  .mensajes-nombre {
    padding: 14px 14px 8px;
    border-bottom: 0;
  }

  .mensajes-celda {
    padding: 0 14px 16px;
  }
}

/* =========================================================================
 * 09/10/2026: el badge pizarra, la fecha impresa, las tarjetas del chat que
 * cada cuenta ordena, los adjuntos del chat y las metricas del chat (Estado).
 * ========================================================================= */

/*
 * EL BADGE PIZARRA (DISEÑO.md §2: pizarra = aviso, no falla). Hoy: "FECHA CORREGIDA · LA IA DIJO
 * 10/07/2026" en la lectura de un comprobante. Ni ambar (aca ambar es "mirá esto que puede estar
 * mal") ni rojo: la fecha de arriba ya es la buena, el badge cuenta que no es la que dio la IA.
 */
.badge.pizarra {
  background: var(--pz-bg);
  border-color: var(--pz-borde);
  color: var(--pz-txt);
}

/* La segunda lectura de la fecha, adentro de la lectura: un corte fino y su propio rotulo. */
.lectura-sub {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}

/* --- Chat: las tarjetas de la columna del cliente, en el orden de cada cuenta --- */

/*
 * LA BARRA DE "ORDENAR TARJETAS": un boton chico, a la derecha, arriba de las tarjetas. No es un
 * primario ni un acento: es una herramienta de la columna, y fuera del modo no hay nada mas a la vista.
 */
.cp-tarjetas-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px 10px;
  margin: -4px 0 -6px;
}

.cp-tarjetas-barra[hidden] {
  display: none;
}

.cp-tarjetas-ordenar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  font-family: var(--f-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.cp-tarjetas-ordenar:hover {
  border-color: var(--line);
  color: var(--head);
}

/* En el modo, el boton es "Listo": con borde, para que se encuentre la salida. */
.cp-tarjetas-ordenar[aria-pressed="true"] {
  border-color: var(--line-fuerte);
  background: var(--paper);
  color: var(--head);
}

.cp-tarjetas-icono {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cp-tarjetas-error {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--falla-txt);
}

.cp-tarjetas-error:empty {
  display: none;
}

/*
 * EN EL MODO las tarjetas se achican a su franja (lo que se ordena es el titulo, no el contenido),
 * y cada franja lleva sus dos flechas. El plegado se sigue tocando en la franja: el chevron lo dice.
 */
.cp-cliente.cp-ordenando .ficha-seccion > .franja-cuerpo {
  display: none;
}

.cp-cliente.cp-ordenando .ficha-seccion {
  border-style: dashed;
  border-color: var(--line-fuerte);
}

.cp-orden {
  display: flex;
  flex: none;
  gap: 4px;
}

.cp-orden-boton {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--head);
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease;
}

.cp-orden-boton:hover:not(:disabled) {
  border-color: var(--red);
  color: var(--red-txt);
}

.cp-orden-boton:disabled {
  opacity: 0.35;
  cursor: default;
}

.cp-orden-icono {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* La que se acaba de mover hace un destello corto de borde: el cambio de lugar se ve pasar. */
.cp-cliente .ficha-seccion.cp-movida {
  animation: cp-movida 0.6s ease-out;
}

@keyframes cp-movida {
  from {
    border-color: var(--red);
    box-shadow: 0 0 0 3px var(--red-tint);
  }
  to {
    box-shadow: 0 0 0 0 transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cp-cliente .ficha-seccion.cp-movida {
    animation: none;
  }
}

/* --- Chat: los adjuntos ------------------------------------------------- */

.cp-herramienta:disabled {
  opacity: 0.45;
  cursor: default;
}

/* El clip se inclina un poco al pasar, como el rayo de Rápidas (DISEÑO §6.1). */
#cp-adjuntar:hover:not(:disabled) svg {
  transform: rotate(-12deg);
}

/* Soltando un archivo sobre la caja: el borde de la caja lo dice. */
.cp-caja.soltando {
  outline: 2px dashed var(--red);
  outline-offset: -4px;
  border-radius: 12px;
}

/* LA VISTA PREVIA: lo elegido, antes de mandarlo. Papel, borde fino, del ancho de la caja. */
.cp-adjunto-previa {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper-3);
}

.cp-adjunto-previa[hidden] {
  display: none;
}

.cp-adjunto-previa .cp-adjunto-foto,
.cp-adjunto-previa .cp-adjunto-pdf {
  width: 44px;
  height: 44px;
}

.cp-adjunto-quitar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  margin-left: auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--muted);
  cursor: pointer;
}

.cp-adjunto-quitar:hover {
  border-color: var(--line-fuerte);
  color: var(--head);
}

.cp-adjunto-quitar-icono {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* EN LA BURBUJA: la miniatura (o la ficha del PDF) y el nombre, todo es un link. */
.cp-adjunto {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0;
  color: inherit;
  text-decoration: none;
  border-radius: 10px;
}

.cp-adjunto.es-foto {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.cp-adjunto:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

.cp-adjunto-foto {
  display: block;
  flex: none;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--paper-2);
}

.cp-adjunto.es-foto .cp-adjunto-foto {
  width: 220px;
  max-width: 100%;
  min-height: 90px;
}

.cp-adjunto-foto img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 260px;
  object-fit: cover;
}

.cp-adjunto-previa .cp-adjunto-foto img {
  max-height: none;
}

/* Bajando la foto: el gris de la tarjeta con un brillo que pasa (nada con "reducir movimiento"). */
.cp-adjunto-foto.cargando {
  background: linear-gradient(90deg, var(--paper-2) 0%, var(--line-soft) 50%, var(--paper-2) 100%);
  background-size: 200% 100%;
  animation: cp-adjunto-cargando 1.2s linear infinite;
}

@keyframes cp-adjunto-cargando {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -100% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cp-adjunto-foto.cargando {
    animation: none;
  }
}

.cp-adjunto-pdf {
  display: inline-grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  flex: none;
  width: 46px;
  height: 52px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--red-txt);
}

.cp-adjunto-pdf-icono {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cp-adjunto-pdf-texto {
  font-family: var(--f-mono);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.cp-adjunto-datos {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.cp-adjunto-nombre {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--head);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

a.cp-adjunto[href]:hover .cp-adjunto-nombre {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cp-adjunto-peso {
  font-family: var(--f-mono);
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

.cp-adjunto-error {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--falla-txt);
}

.cp-adjunto-error[hidden] {
  display: none;
}

/* --- Estado > Chat: las metricas ------------------------------------------- */

.mc-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

.mc-estado {
  margin: 0 0 16px;
}

#mc-cuerpo[hidden] {
  display: none;
}

.mc-sla .cifra {
  margin-top: 6px;
}

.mc-reloj {
  margin: 2px 0 12px;
}

.mc-sla-nada {
  margin: 0;
}

/* El riel de "dentro del SLA", con las dos cifras que lo respaldan abajo ("23 de 25"). */
.mc-sla-fila {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  align-items: center;
}

.mc-sla-de {
  grid-column: 1 / -1;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

/* Debajo del riel de cada area: la mediana y el % de cada SLA, chico. */
.mc-area-sub {
  grid-column: 1 / -1;
  font-family: var(--f-mono);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: pre-wrap;
}

.tabla-mc-operadores {
  min-width: 620px;
}

.tabla-mc-operadores th.mc-der,
.tabla-mc-operadores td.num {
  text-align: right;
  white-space: nowrap;
}

.mc-tabla-marco {
  margin-top: 10px;
}

/* --- Estado > Operadores: el tablero en vivo (10/10/2026) ------------------- */

/*
 * EL TABLERO DE OPERADORES. Los numeros y los rotulos en Space Mono (son para comparar de un
 * vistazo, y el mono los alinea), las cápsulas de la cola en pill y el rojo SOLO para "vencido"
 * (DISEÑO §2): el borde y la cifra de la cápsula, y la fila del operador con vencidas. Lo que
 * avisa sin ser una falla (frenadas por falla, "Nadie atendiendo") va en pizarra.
 */

/* Lo que se lee y no se ve: el encabezado de la columna del punto, el "Conectado" de cada fila. */
.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;
}

.op-estado {
  margin: 0 0 16px;
}

#op-cuerpo[hidden],
.op-alerta[hidden] {
  display: none;
}

/*
 * LA FRANJA PIZARRA: "NADIE ATENDIENDO · 3 ESPERANDO". Pizarra y no rojo: no se rompio nada, falta
 * alguien del otro lado (DISEÑO §2: pizarra = aviso, con su icono vivo). Ancho entero, arriba de
 * todo, porque es lo unico de la pantalla que pide que alguien haga algo ya.
 */
.op-alerta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding: 11px 16px;
  border: 1px solid var(--pz-borde);
  border-radius: var(--r-sm);
  background: var(--pz-bg);
  color: var(--pz-txt);
  font-family: var(--f-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.op-alerta-icono {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--pz-icono);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Las cápsulas de la cola --- */

.op-cola {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.op-capsula {
  flex: 1 1 150px;
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 11px 22px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
}

.op-cap-rotulo {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  line-height: 1.4;
}

.op-cap-cifra {
  font-family: var(--f-mono);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--head);
  white-space: nowrap;
}

.op-cap-sub {
  font-size: 0.78rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* La de la espera mas larga lleva el nombre del cliente y con quien esta: mas lugar. */
.op-capsula-ancha {
  flex: 2 1 240px;
}

/* Vencido: el borde y la cifra en rojo, el fondo papel (el rojo es acento, no fondo). */
.op-capsula.falla {
  border-color: var(--falla-borde);
  box-shadow: inset 0 0 0 1px var(--falla-borde);
}

.op-capsula.falla .op-cap-cifra {
  color: var(--red-txt);
}

.op-capsula.pizarra {
  border-color: var(--pz-borde);
  background: var(--pz-bg);
}

.op-capsula.pizarra .op-cap-cifra,
.op-capsula.pizarra .op-cap-sub {
  color: var(--pz-txt);
}

/* --- Las dos tablas --- */

.op-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}

.op-areas-tarjeta {
  max-width: 560px;
}

.op-tabla-marco {
  margin-top: 10px;
}

/*
 * Nueve columnas que tienen que entrar sin scroll en un escritorio normal (la tarjeta mide ~1030 px
 * de 1180 para arriba): celdas mas angostas que las del resto del panel y encabezados que pueden ir
 * en dos renglones. Abajo de eso, el scroll horizontal de `.tabla-marco`, como todas las tablas.
 */
.tabla-op {
  min-width: 840px;
}

.tabla-op thead th {
  padding: 11px 12px;
  white-space: normal;
  line-height: 1.35;
  vertical-align: bottom;
}

.tabla-op tbody td {
  padding: 11px 12px;
}

.tabla-op-areas {
  min-width: 0;
}

.tabla-op th.op-der,
.tabla-op td.num,
.tabla-op-areas th.op-der,
.tabla-op-areas td.num {
  text-align: right;
}

.tabla-op td.num,
.tabla-op-areas td.num {
  white-space: nowrap;
}

.tabla-op td {
  vertical-align: middle;
}

.tabla-op th:first-child,
.tabla-op td.op-vivo {
  width: 1%;
  padding-right: 4px;
}

/* El punto: verde conectado, gris no. Con el globo al lado si tiene el chat abierto. */
.op-vivo {
  white-space: nowrap;
}

.op-punto {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line-fuerte);
  vertical-align: middle;
}

.op-punto.on {
  background: var(--ok-txt);
  box-shadow: 0 0 0 3px var(--ok-bg);
}

.op-charla {
  width: 16px;
  height: 16px;
  margin-left: 7px;
  vertical-align: middle;
  fill: none;
  stroke: var(--ok-txt);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.op-quien .nombre {
  display: inline;
}

.op-rol {
  display: block;
  margin-top: 2px;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

.op-vos {
  margin-left: 6px;
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  vertical-align: 2px;
}

.op-areas-celda {
  font-size: 0.86rem;
  color: var(--muted);
}

/* Asignadas / cupo con la barra chica: tinta lo usado, ambar cuando no le entra otra. */
.op-cupo {
  white-space: nowrap;
}

.op-cupo-cifra {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.85rem;
  color: var(--head);
}

.op-cupo-riel {
  display: block;
  width: 64px;
  height: 5px;
  margin-top: 5px;
  border-radius: 999px;
  background: var(--nada-bg);
  box-shadow: inset 0 0 0 1px var(--nada-borde);
  overflow: hidden;
}

.op-cupo-riel i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--head);
}

.op-cupo-riel.lleno i {
  background: var(--aviso-barra);
}

.op-cupo-sin {
  display: block;
  margin-top: 2px;
  font-family: var(--f-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

.op-ultima {
  color: var(--muted);
}

.tabla-op td.op-rojo {
  color: var(--red-txt);
  font-weight: 700;
}

/* La fila del que no esta conectado, atenuada: sigue ahi (sus numeros de hoy valen), pero detras. */
.tabla-op tr.apagado td {
  opacity: 0.55;
}

/*
 * La fila con SLA vencidos: el tinte rojo suave y la barra de 3 px a la izquierda, como el corpo de
 * Clientes (un `box-shadow` inset y no un borde, que correria el contenido). Atenuada o no: una
 * vencida a nombre de alguien que se fue es justo la que hay que ver.
 */
.tabla-op tr.vencido td {
  background: linear-gradient(var(--falla-bg), var(--falla-bg)), var(--paper);
}

.tabla-op tr.vencido td:first-child {
  box-shadow: inset 3px 0 0 var(--red);
}

.tabla-op tr.vencido.apagado td {
  opacity: 0.85;
}

@media (max-width: 560px) {
  .op-capsula {
    flex-basis: calc(50% - 5px);
    padding: 10px 16px 11px;
  }

  .op-cap-cifra {
    font-size: 1.15rem;
  }

  /* Por área entra entera en el telefono: tres columnas cortas no merecen un scroll de costado. */
  .tabla-op-areas thead th,
  .tabla-op-areas tbody td {
    padding: 10px 12px;
  }

  .tabla-op-areas thead th {
    white-space: normal;
  }

  /* La de la espera, sola en su renglon: el nombre del cliente no entra en media pantalla. */
  .op-capsula-ancha {
    flex-basis: 100%;
  }

  .op-areas-tarjeta {
    max-width: none;
  }
}

/* --- Estado > Operadores: el histórico (11/10/2026) ------------------------- */

/*
 * EL HISTÓRICO, debajo del tablero en vivo y separado por una línea: es OTRA pregunta ("¿cómo le fue
 * a cada uno la semana pasada?") con su propio período. Mismo idioma que el tablero: rótulos y
 * números en Space Mono, el período en cápsulas pill (`.canal`, el tinte rojo marca la elegida),
 * las flechas y el calendario de Asistente IA. El rojo, acento: la cápsula elegida, las barras de
 * charlas y lo VENCIDO (como arriba). La mediana va en tinta.
 */
.op-hist {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.op-hist-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  margin-bottom: 14px;
}

.op-hist-titulo {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
}

.op-hist-rango {
  margin: 0;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.op-hist-controles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-bottom: 18px;
}

.op-hist-modos .canal-opciones {
  margin-top: 0;
}

/* Con el rango libre, las cápsulas quedan a la altura de los dos calendarios (sin rótulo arriba). */
.op-hist-modos .canal {
  padding: 8px 14px;
}

.op-hist-libre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.op-hist-libre[hidden],
.op-hist-cuerpo[hidden],
.op-hist-series[hidden],
.asistente-dia-mover[hidden] {
  display: none;
}

.op-hist-libre .filtro {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.op-hist-libre .filtro input {
  padding: 7px 12px;
}

/* El botón va al final del renglón: es una salida, no un filtro. */
.op-hist-csv {
  margin-left: auto;
}

.op-hist-estado {
  margin: 0 0 16px;
}

.op-hist-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}

.op-hist-cola {
  margin: 0;
}

/* Las cápsulas de la cola del período, más bajas que las del tablero: son un resumen, no un aviso. */
.op-hist-cola .op-capsula {
  padding: 9px 20px 10px;
}

.op-hist-cola .op-cap-cifra {
  font-size: 1.1rem;
}

/*
 * Trece columnas: con los encabezados en dos renglones entran en un escritorio de 1440 (la tarjeta
 * mide ~1030 px); más angosto, la tabla scrollea adentro de su marco (`.tabla-marco`) y la columna
 * del operador queda pegada a la izquierda para no perder de quién es cada número.
 */
.tabla-op-hist {
  min-width: 1010px;
}

.tabla-op-hist .op-quien .nombre {
  white-space: nowrap;
}

/* Encabezados más apretados que los del resto del panel (letra y aire): son trece palabras largas. */
.tabla-op-hist thead th {
  padding: 0;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  white-space: normal;
  vertical-align: bottom;
}

.tabla-op-hist tbody td,
.tabla-op-hist tfoot td,
.tabla-op-hist tfoot th {
  padding: 10px 9px;
  vertical-align: middle;
}

.tabla-op-hist tbody td:first-child,
.tabla-op-hist tfoot th {
  padding-left: 14px;
}

.tabla-op-hist th.op-der,
.tabla-op-hist td.num {
  text-align: right;
}

.tabla-op-hist td.num {
  white-space: nowrap;
}

.tabla-op-hist th:first-child,
.tabla-op-hist td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--paper);
  box-shadow: inset -1px 0 0 var(--line-soft);
}

.tabla-op-hist thead th:first-child {
  background: var(--paper-2);
}

/*
 * EL ENCABEZADO ES UN BOTÓN (ordenar): el mismo Space Mono del `thead`, sin caja, con la flechita
 * gris; la columna que ordena va en tinta y con la flecha roja (acento).
 */
.op-hist-orden {
  display: inline-flex;
  align-items: flex-end;
  gap: 5px;
  width: 100%;
  padding: 11px 9px;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  text-align: inherit;
  line-height: 1.35;
  cursor: pointer;
}

.tabla-op-hist th:first-child .op-hist-orden {
  padding-left: 14px;
}

th.op-der .op-hist-orden {
  justify-content: flex-end;
  text-align: right;
}

.op-hist-orden:hover,
.op-hist-orden.activa {
  color: var(--head);
}

.op-hist-orden:focus-visible {
  outline-offset: -3px;
}

/* La flecha va solo en la columna que ordena, en rojo (acento). Las otras se reconocen por la manito
 * y porque al pasar se ponen en tinta. */
.op-hist-flecha {
  flex: none;
  font-size: 0.72rem;
  letter-spacing: 0;
  color: var(--red-txt);
}

.op-hist-orden:hover {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

/* La fila de totales: separada por una línea firme y en negrita, sin color. */
.tabla-op-hist tfoot th,
.tabla-op-hist tfoot td {
  border-top: 1px solid var(--line-fuerte);
  background: var(--paper-2);
  font-weight: 700;
}

.tabla-op-hist tfoot th {
  text-align: left;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--head);
}

.tabla-op-hist tfoot td.num {
  color: var(--head);
}

.tabla-op-hist td.op-rojo {
  color: var(--red-txt);
  font-weight: 700;
}

/* La fila con charlas vencidas a su nombre: la barra de 3 px roja del tablero (sin teñir la fila). */
.tabla-op-hist tr.vencido td:first-child {
  box-shadow: inset 3px 0 0 var(--red), inset -1px 0 0 var(--line-soft);
}

.op-hist-series-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  margin-bottom: 12px;
}

.op-hist-series-cab .tarjeta-rotulo {
  margin: 0;
}

.op-hist-series-cab .filtro select {
  padding: 7px 13px;
}

.op-hist-graficos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

/* Chicas: son una tendencia al lado de la tabla, no el centro de la pantalla. */
.op-hist-serie {
  max-height: 170px;
}

.serie .barra-dia.barra-tinta {
  fill: var(--head);
  opacity: 0.78;
}

.serie .barra-dia.barra-tinta:hover {
  fill: var(--head);
  opacity: 1;
}

@media (max-width: 860px) {
  .op-hist-graficos {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .op-hist-controles {
    align-items: stretch;
  }

  .op-hist-csv {
    margin-left: 0;
  }

  .op-hist-cola .op-capsula {
    flex-basis: calc(50% - 5px);
    padding: 9px 14px 10px;
  }
}

/* --- Entrar como el cliente, en una pestaña propia (09/10/2026) ------------- */

/*
 * LA PESTAÑA QUE ABRE EL LINK "ENTRAR COMO EL CLIENTE" del chat: pide el acceso y se va a la app.
 * Se ve medio segundo (o lo que tarde el backend) y, si algo falla, dice que paso. Centrada como
 * el login, que es la otra pantalla "de paso" del panel.
 */
.acceso-pestana {
  display: flex;
  justify-content: center;
  padding-top: 12vh;
  padding-bottom: 12vh;
}

.acceso-pestana-caja {
  width: min(460px, 100%);
  display: grid;
  gap: 10px;
  justify-items: start;
}

.acceso-pestana-caja h1 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.1;
}

.acceso-pestana-caja .pie {
  margin: 0;
}

/* --- Chat: sonido, historial, buscador, falla, IA y resumen (09/10/2026) ------------- */

/*
 * QUE SONIDO: el select y "Probar", al lado del interruptor. Chicos y en la misma linea de capsulas
 * de la cabecera: es una preferencia, no una accion de la charla.
 */
.cp-sonido-tipo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cp-sonido-tipo select {
  padding: 5px 10px;
  font-family: var(--f-body);
  font-size: 0.82rem;
  color: var(--head);
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}

/* BANDEJA / HISTORIAL: el mismo selector de tres botones de la perilla, mas chico y sin margen. */
.cp-piloto.cp-modo {
  margin-top: 0;
  justify-self: start;
}

.cp-modo .cp-piloto-op {
  padding: 5px 14px;
  font-size: 0.6rem;
}

.cp-falla-filtro .canal-opciones {
  gap: 4px;
  margin-top: 0;
}

/*
 * CORPO (13/10/2026): la capsula que filtra por cartera corporativa. Sigue el estilo de las otras
 * (`.canal.cp-vista`); el rojo del manual es solo acento: la letra y, prendida, el borde. El relleno
 * sigue siendo el tinte de siempre, no un rojo lleno.
 */
.canal.cp-corpo span {
  color: var(--red-txt);
}

.canal.cp-corpo:has(input:checked) {
  border-color: var(--red);
}

/* EL DIA DEL HISTORIAL: las flechas y el calendario de Asistente IA, y los dos filtros abajo. */
.cp-hist-cab {
  display: grid;
  gap: 8px;
}

.cp-hist-dia {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cp-hist-dia .asistente-dia-fecha {
  flex: 1 1 auto;
  min-width: 0;
}

.cp-hist-filtros {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.cp-hist-filtros .filtro {
  min-width: 0;
}

.cp-hist-filtros select {
  width: 100%;
  padding: 6px 10px;
  font-family: var(--f-body);
  font-size: 0.84rem;
  color: var(--head);
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}

/*
 * EL BUSCADOR DEL HISTORIAL: un bloque debajo de la bandeja, separado por la raya fuerte (es otra
 * fuente: todas las charlas, no las de la vista). Lo que matcheo va en <mark> con el tinte ambar
 * claro: resalta sin el rojo, que en la lista es la seleccion y los no leidos.
 */
.cp-busqueda {
  border-top: 2px solid var(--line-fuerte);
  padding: 10px 0 6px;
}

.cp-busca-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px 8px;
}

.cp-busca-cab .tarjeta-rotulo {
  margin: 0;
}

.cp-busca-filtros {
  padding: 0 12px 10px;
}

.cp-busca-filtros .filtro span:not(.solo-lector) {
  font-family: var(--f-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

.cp-busca-filtros input[type='date'] {
  width: 100%;
  padding: 5px 10px;
  font-family: var(--f-body);
  font-size: 0.84rem;
  color: var(--head);
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.cp-busca-ofrecer {
  display: block;
  margin: 2px 12px 6px;
  font-size: 0.86rem;
  text-align: left;
}

.cp-busca-pie,
.cp-busca-error {
  margin: 6px 12px;
}

.cp-busca-item {
  border-bottom: 1px solid var(--line-soft);
}

.cp-busca-item .cp-fila {
  border-bottom: 0;
  padding-bottom: 4px;
}

.cp-busca-total {
  font-family: var(--f-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

.cp-busca-frags {
  list-style: none;
  margin: 0;
  padding: 0 12px 10px;
  display: grid;
  gap: 4px;
}

.cp-busca-frag {
  display: grid;
  gap: 2px;
  padding: 6px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--paper-3);
  color: var(--text);
  text-decoration: none;
  font-size: 0.84rem;
  line-height: 1.4;
}

.cp-busca-frag:hover {
  border-color: var(--line);
  background: var(--paper-2);
}

.cp-busca-frag:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* Una nota interna que matcheo: pizarra punteada, como su burbuja en el hilo. */
.cp-busca-frag.nota {
  border-style: dashed;
  border-color: var(--pz-borde);
  background: var(--pz-bg);
}

.cp-busca-donde {
  font-family: var(--f-mono);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

.cp-busca-texto {
  overflow-wrap: anywhere;
}

mark.cp-busca-marca {
  padding: 0 1px;
  border-radius: 3px;
  background: var(--aviso-bg);
  color: var(--aviso-txt);
  font-weight: 600;
}

/* El mensaje al que llevo un resultado: un anillo que se apaga solo (2,4 s). */
.cp-encontrado {
  animation: cp-encontrado 2.4s ease-out;
}

@keyframes cp-encontrado {
  0%,
  45% {
    box-shadow: 0 0 0 3px var(--aviso-borde);
  }
  100% {
    box-shadow: 0 0 0 3px transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cp-encontrado {
    animation: none;
    box-shadow: 0 0 0 3px var(--aviso-borde);
  }
}

/* LA PIZARRA EN UN BADGE: avisos para el equipo (EN FALLA, IA APAGADA), no fallas ni esperas. */
.badge.pizarra {
  background: var(--pz-bg);
  border-color: var(--pz-borde);
  color: var(--pz-txt);
}

.cp-ia-badge {
  align-self: center;
}

/*
 * EL CHAT EN FALLA, ARRIBA DE LA CAJA: el aviso pizarra con su icono (DISEÑO §2: pizarra = aviso
 * con icono vivo). Frenado lleva el boton "Habilitar charla"; habilitado o corporativo, es una
 * linea mas baja y sin boton.
 */
.cp-falla {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 16px 8px;
  padding: 8px 12px;
  border: 1px solid var(--pz-borde);
  border-radius: 12px;
  background: var(--pz-bg);
  color: var(--pz-txt);
}

.cp-falla.frenado {
  padding: 10px 14px;
}

.cp-falla-icono {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--pz-icono);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cp-falla-texto {
  flex: 1 1 200px;
  min-width: 0;
}

.cp-falla-rotulo {
  margin: 0;
  font-family: var(--f-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cp-falla-detalle {
  margin: 2px 0 0;
  font-size: 0.82rem;
}

/* Las marcas del chat en falla que destraban ("Ya podés escribirnos"): verde de confirmacion. */
.cp-marca-sistema.ok .cp-marca-ia-pastilla {
  border-color: var(--ok-borde);
  background: var(--ok-bg);
  color: var(--ok-txt);
}

.cp-marca-sistema.ok .cp-marca-ia-icono {
  stroke: var(--ok-txt);
}

/*
 * EL RESUMEN IA, una tarjeta mas de la columna del cliente desde el 10/10/2026 (la franja, el
 * plegado y el orden son los de `seccionFicha`): adentro, la señal, el tono y si quedo resuelto, y
 * el motivo / la resolucion / lo pendiente en tres renglones, la firma y "Resumir".
 */
.cp-cliente .franja-cuerpo.cp-resumen {
  display: grid;
  gap: 8px;
}

.cp-resumen-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.cp-resumen-bloque {
  display: grid;
  gap: 1px;
}

.cp-resumen-sub {
  margin: 0;
  font-family: var(--f-mono);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

.cp-resumen-texto {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--text);
}

.cp-resumen-texto.vacio {
  color: var(--muted);
}

.cp-resumen-pie {
  margin: 0;
}

.cp-resumen-boton {
  justify-self: start;
}

.cp-resumen-error {
  margin: 0;
}

/* --- Asistente > Cómo responde (09/10/2026) --------------------------------------- */

.asistente-prompt {
  margin-top: 28px;
}

.asistente-prompt-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.asistente-prompt-cab .tarjeta-rotulo {
  margin: 0;
}

/*
 * EL NUCLEO FIJO: gris y con el candado, plegado de fabrica. Se lee, no se edita: el texto va en
 * un <pre> (respeta los renglones del prompt) sobre el gris de "nada", sin el borde de un campo.
 */
.asistente-nucleo {
  margin-top: 14px;
  border: 1px solid var(--nada-borde);
  border-radius: var(--r-sm);
  background: var(--nada-bg);
}

.asistente-nucleo summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  color: var(--nada-txt);
  list-style: none;
}

.asistente-nucleo summary::-webkit-details-marker {
  display: none;
}

.asistente-nucleo summary svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.asistente-nucleo-titulo {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.asistente-nucleo-sub {
  margin-left: auto;
  font-size: 0.78rem;
}

.asistente-nucleo[open] summary {
  border-bottom: 1px solid var(--nada-borde);
}

.asistente-nucleo .asistente-nucleo-modo {
  margin: 12px 14px 0;
}

.asistente-nucleo-rotulo {
  margin: 12px 14px 4px;
  font-family: var(--f-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

.asistente-nucleo-texto,
.asistente-version-texto {
  margin: 0 14px 12px;
  max-height: 260px;
  overflow: auto;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--paper-3);
  font-family: var(--f-mono);
  font-size: 0.74rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--muted);
}

/* Los dos guardrails, lado a lado en una pantalla ancha y uno abajo del otro en un telefono. */
.asistente-guardrails {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.asistente-guardrail {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper-3);
}

.asistente-guardrail-cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.asistente-guardrail-rotulo {
  margin: 0;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.asistente-guardrail-cuenta {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  color: var(--faint);
}

.asistente-guardrail .config-nota {
  margin-top: 4px;
}

.asistente-guardrail-lista {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.asistente-guardrail-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 6px 6px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--head);
}

.asistente-guardrail-item span {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.asistente-guardrail-quitar {
  flex: none;
  width: 26px;
  height: 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}

.asistente-guardrail-quitar:hover:not(:disabled) {
  border-color: var(--falla-borde);
  background: var(--falla-bg);
  color: var(--falla-txt);
}

.asistente-guardrail-vacio {
  font-size: 0.84rem;
  color: var(--muted);
}

.asistente-guardrail-agregar {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.asistente-guardrail-agregar input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 12px;
  font-family: var(--f-body);
  font-size: 0.9rem;
  color: var(--head);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.asistente-prompt-guardar {
  margin-top: 18px;
}

.asistente-prompt-nota {
  flex: 1 1 260px;
  margin-top: 0;
}

/* LAS VERSIONES: una lista de tarjetas chicas; la vigente con el borde verde de lo que esta puesto. */
.asistente-versiones,
.asistente-consola {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}

.asistente-versiones .tarjeta-rotulo,
.asistente-consola .tarjeta-rotulo {
  margin: 0;
}

.asistente-versiones-lista {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  max-height: 420px;
  overflow-y: auto;
}

.asistente-version {
  display: grid;
  gap: 6px;
  justify-items: start;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
}

.asistente-version.vigente {
  border-color: var(--ok-borde);
}

.asistente-version-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.asistente-version-num {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--head);
}

.asistente-version-quien {
  font-size: 0.8rem;
  color: var(--muted);
}

.asistente-version-nota {
  margin: 0;
  font-size: 0.86rem;
  color: var(--text);
}

.asistente-version-detalle summary {
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

.asistente-version-detalle .asistente-nucleo-rotulo {
  margin-left: 0;
}

.asistente-version-detalle .asistente-version-texto {
  margin: 0 0 8px;
}

.asistente-version-items {
  margin: 0 0 6px;
  padding-left: 18px;
  font-size: 0.84rem;
  color: var(--text);
}

/* LA CONSOLA: el mensaje, con que y en que modo, y el resultado como una respuesta de la IA. */
.asistente-consola .campo {
  margin-top: 10px;
}

.asistente-probar-fila .campo {
  margin-top: 0;
  flex: 1 1 200px;
}

.asistente-probar-resultado {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper-2);
}

.asistente-probar-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.asistente-probar-cab .tarjeta-rotulo {
  margin: 0 4px 0 0;
}

.asistente-probar-burbuja {
  max-width: 100%;
  justify-self: end;
}

.asistente-probar-datos {
  margin: 0;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-align: right;
}

@media (max-width: 560px) {
  .cp-sonido-tipo select {
    max-width: 112px;
  }
  .asistente-nucleo-sub {
    display: none;
  }
}

/*
 * "Cerrar sola a las N horas" y "El cliente ve N días" (13/10/2026): el rotulo al lado del campo,
 * como los leads de prueba.
 */
.campo-numero.cp-cfg-cierre,
.campo-numero.cp-cfg-historial {
  width: auto;
}

.cp-cfg-cierre input,
.cp-cfg-historial input {
  width: 120px;
  font-family: var(--f-mono);
}

/*
 * A 390 PX LA CABECERA DEL CHAT PARTE EN DOS (09/10/2026): con el selector de sonido, "Chat · EN
 * VIVO" y las acciones no entran en un renglon, y el `nowrap` de abajo de 900 las encimaba. Las
 * acciones bajan enteras, alineadas a la izquierda.
 */
@media (max-width: 560px) {
  .cp-cab {
    flex-wrap: wrap;
  }

  /* Y si con el texto al 110 o 120 % (10/10/2026) tampoco entran en su renglon, envuelven. */
  .cp-cab-acciones {
    flex-wrap: wrap;
    gap: 6px;
  }
}

/* =========================================================================
 * 10/10/2026: el VISITANTE DEL SITIO (el chat de musurit.com, sin sesion).
 * ========================================================================= */

/*
 * Su `visitante-<id>` en Asistente IA: gris y SIN link (no hay ficha de un visitante). Es largo
 * (16 a 64 caracteres al azar): se corta con "…" y el entero queda en el `title`.
 */
.asistente-visitante-id {
  display: inline-block;
  max-width: 16ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  font-family: var(--f-mono);
  font-size: 0.85rem;
  color: var(--faint);
}

/* "Todavía no es cliente": adentro de su cabecera, entre el contacto y "Actualizar". */
.cp-visitante-nota {
  margin: 4px 0 0;
}

/* =========================================================================
 * 10/10/2026: HAY UNA VERSION NUEVA DEL PANEL (ver `versionConsultar` en app.js).
 * ========================================================================= */

/*
 * La tarjeta de la version nueva: PIZARRA (DISEÑO.md §2, aviso que no es falla), abajo a la
 * derecha, sin telon. No es un dialogo: no tapa la pantalla ni se lleva el foco, porque aparece
 * mientras alguien le esta escribiendo a un cliente. El tinte se apila sobre `--paper` (como los
 * badges de canal): en oscuro `--pz-bg` es transparente y sin el papel abajo se leeria el chat a
 * traves. ACTUALIZAR es el `.btn-primario` de siempre: el rojo es la accion, no el fondo (MARCA).
 *
 * Abajo a la derecha cae sobre la tercera columna del chat (la ficha), no sobre la caja de
 * escribir. Por debajo de 1280 px el chat tiene dos columnas (o una) y la caja llega al borde: ahi
 * la tarjeta sube por encima de la caja y su barra (Nota interna, Rápidas, Adjuntar), medido en
 * Chrome a 1100 px: la barra empieza ~176 px arriba del borde. Tapa el final de los mensajes, que
 * se pueden scrollear; no tapa ni el campo ni Enviar.
 */
.version-aviso {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 40;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: min(360px, calc(100vw - 32px));
  padding: 16px 18px 16px 16px;
  border: 1px solid var(--pz-borde);
  border-radius: var(--r);
  background: linear-gradient(var(--pz-bg), var(--pz-bg)), var(--paper);
  box-shadow: var(--sombra), 0 2px 8px -4px rgba(20, 20, 30, 0.18);
  color: var(--text);
  animation: version-aviso-entra 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.version-aviso[hidden] {
  display: none;
}

@keyframes version-aviso-entra {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.version-aviso-icono {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  fill: none;
  stroke: var(--pz-icono);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.version-aviso-cuerpo {
  min-width: 0;
  flex: 1;
}

.version-aviso-rotulo {
  margin: 0 0 4px;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pz-txt);
}

.version-aviso-titulo {
  margin: 0;
  font-family: var(--f-display);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--head);
}

.version-aviso-texto,
.version-aviso-estado {
  margin: 4px 0 0;
  font-size: 0.88rem;
  line-height: 1.4;
}

.version-aviso-estado {
  color: var(--pz-txt);
  font-weight: 600;
}

.version-aviso-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

@media (max-width: 1279px) {
  /* El chat en dos columnas: la caja de escribir llega al borde derecho (ver arriba). */
  body:has(#seccion-chat:not([hidden])) .version-aviso {
    bottom: 196px;
  }
}

@media (max-width: 600px) {
  .version-aviso {
    right: 16px;
    left: 16px;
    bottom: 16px;
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .version-aviso {
    animation: none;
  }
}

/* =========================================================================
 * 10/10/2026: OCUPADO / DISPONIBLE, "NADIE DISPONIBLE" Y RESPONDER CITANDO.
 * ========================================================================= */

/*
 * EL INTERRUPTOR DE LA CABECERA DEL CHAT: una pill como Sonido, con un punto adelante. VERDE =
 * Disponible (confirma: te pueden pasar charlas), AMBAR = Ocupado (lo que entre no te llega). El
 * ambar es el de "alguien espera" del panel, y el punto usa `--aviso-barra`: el `--aviso-txt` a
 * 8 px sin texto se ve marron (ver ese token). Armado ("Confirmá: ocupado") es el borde ambar sobre
 * papel, sin relleno: todavia no cambio nada.
 */
.cp-estado-marco {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cp-estado-marco[hidden] {
  display: none;
}

.cp-estado {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--muted);
  font-family: var(--f-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.cp-estado-punto {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  transition: background 0.18s ease, box-shadow 0.18s ease;
}

.cp-estado.disponible {
  border-color: var(--ok-borde);
  background: var(--ok-bg);
  color: var(--ok-txt);
}

.cp-estado.ocupado {
  border-color: var(--aviso-borde);
  background: var(--aviso-bg);
  color: var(--aviso-txt);
}

.cp-estado.ocupado .cp-estado-punto,
.cp-estado.confirmando .cp-estado-punto {
  background: var(--aviso-barra);
}

.cp-estado.confirmando {
  border-color: var(--aviso-barra);
  background: var(--paper);
  color: var(--aviso-txt);
  box-shadow: inset 0 0 0 1px var(--aviso-borde);
}

.cp-estado.disponible:hover:not(:disabled) {
  border-color: var(--ok-txt);
}

.cp-estado.ocupado:hover:not(:disabled) {
  border-color: var(--aviso-barra);
}

.cp-estado:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.cp-estado:disabled {
  cursor: progress;
  opacity: 0.7;
}

.cp-estado-error {
  font-family: var(--f-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--falla-txt);
  white-space: nowrap;
}

/* "NADIE DISPONIBLE": la pastilla pizarra (aviso, no falla) con el triangulo, al lado de EN VIVO. */
.cp-nadie {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.cp-nadie[hidden] {
  display: none;
}

.cp-nadie-icono {
  flex: none;
  width: 13px;
  height: 13px;
  fill: none;
  stroke: var(--pz-icono);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Estado > Operadores: el punto de un conectado en Ocupado y su "OCUPADO DESDE 14:20". */
.op-punto.ocupado {
  background: var(--aviso-barra);
  box-shadow: 0 0 0 3px var(--aviso-bg);
}

.op-ocupado {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 8px;
  border: 1px solid var(--aviso-borde);
  border-radius: 999px;
  background: var(--aviso-bg);
  font-family: var(--f-mono);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--aviso-txt);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .cp-estado,
  .cp-estado-punto {
    transition: none;
  }
}

/*
 * RESPONDER: la flecha curva al costado de la burbuja (afuera, del lado de la charla: a la derecha
 * de lo del cliente, a la izquierda de lo nuestro). Aparece al pasar el mouse, con el foco del
 * teclado o con un toque largo (`.con-responder`). El `::before` tapa el hueco entre la burbuja y el
 * boton: ir del uno al otro no lo hace desaparecer en el camino.
 */
.cp-burbuja.cp-citable {
  position: relative;
}

.cp-responder {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--muted);
  box-shadow: 0 2px 8px -3px rgba(20, 20, 30, 0.3);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(0.92);
  transition: opacity 0.15s ease, transform 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.cp-responder::before {
  content: '';
  position: absolute;
  inset: -4px -10px;
}

.cp-burbuja.cliente > .cp-responder {
  left: calc(100% + 6px);
}

.cp-burbuja.agente > .cp-responder {
  right: calc(100% + 6px);
}

.cp-responder-icono {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (hover: hover) {
  .cp-citable:hover > .cp-responder {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%);
  }
}

.cp-responder:focus-visible,
.cp-citable.con-responder > .cp-responder {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%);
}

.cp-responder:hover {
  color: var(--head);
  border-color: var(--line-fuerte);
}

.cp-responder:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* El toque largo deja la burbuja marcada, como en WhatsApp. */
.cp-citable.con-responder {
  box-shadow: 0 0 0 2px var(--line-fuerte);
}

/*
 * LA CITA: gris, con el borde izquierdo en rojo tenue (estilo WhatsApp). El gris es la tinta de los
 * titulos al 6 %, asi se despega del fondo de la burbuja en los dos temas (sobre el tinte rojo de lo
 * nuestro y sobre el gris de lo del cliente). Una nota citada lleva el borde pizarra.
 */
.cp-cita {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  margin: 0 0 6px;
  padding: 6px 8px 6px 10px;
  border: 0;
  border-left: 3px solid rgba(173, 45, 46, 0.45);
  border-left-color: color-mix(in srgb, var(--red) 50%, transparent);
  border-radius: 8px;
  background: rgba(26, 26, 28, 0.06);
  background: color-mix(in srgb, var(--head) 6%, transparent);
  font: inherit;
  text-align: left;
  color: inherit;
}

button.cp-cita {
  cursor: pointer;
  transition: background 0.15s ease;
}

button.cp-cita:hover {
  background: color-mix(in srgb, var(--head) 10%, transparent);
}

button.cp-cita:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.cp-cita.es-nota {
  border-left-color: var(--pz-icono);
}

.cp-cita-cuerpo {
  display: grid;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

.cp-cita-autor {
  font-family: var(--f-mono);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-cita-texto {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--muted);
  word-break: break-word;
}

.cp-cita-mini {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--paper-2);
  color: var(--faint);
}

.cp-cita-mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cp-cita-mini-icono {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Una burbuja corta ("ok") con cita no deja la cita en dos palabras. */
.cp-burbuja:has(> .cp-cita) {
  min-width: min(240px, 76%);
}

/* ARRIBA DEL CAMPO: la cita con la ✕, como la vista previa de un adjunto. */
.cp-cita-previa {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper-3);
}

.cp-cita-previa[hidden] {
  display: none;
}

.cp-cita-previa .cp-cita {
  flex: 1;
  margin: 0;
}

.cp-cita-previa .cp-cita-autor {
  color: var(--head);
}

/* El original al que llevo un click en la cita: un anillo rojo tenue que se apaga en 1 s. */
.cp-resaltado {
  animation: cp-resaltado 1.1s ease-out;
}

@keyframes cp-resaltado {
  0%,
  55% {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 60%, transparent);
  }
  100% {
    box-shadow: 0 0 0 3px transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cp-responder,
  button.cp-cita {
    transition: none;
  }

  .cp-resaltado {
    animation: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 60%, transparent);
  }
}

/*
 * SIETE CÁPSULAS EN LA COLA (10/10/2026, con DISPONIBLES): con la base de 150 px la ultima bajaba
 * sola a un segundo renglon de 1180 px. A 120 (y la linea de abajo en dos renglones si hace falta) entran las siete; en el telefono sigue la
 * regla de a dos.
 */
@media (min-width: 561px) {
  .op-capsula {
    flex-basis: 120px;
    padding-right: 16px;
    padding-left: 18px;
  }

  .op-capsula-ancha {
    flex-basis: 230px;
  }

  /* La linea de abajo baja de renglon antes que cortarse ("Ninguna por vencer"). */
  .op-capsula:not(.op-capsula-ancha) .op-cap-sub {
    white-space: normal;
    line-height: 1.3;
  }
}

/*
 * A 390 PX, CON "NADIE DISPONIBLE" (10/10/2026): el titulo no entra en un renglon (Chat, EN VIVO, la
 * pastilla y las charlas de hoy) y abajo de 900 va `nowrap`: las charlas de hoy bajan, no se salen.
 */
@media (max-width: 560px) {
  .cp-cab-titulo {
    flex-wrap: wrap;
  }
}

/*
 * EDITAR Y BORRAR MENSAJES (Sergio, 11/10/2026; ver "Editar y borrar" en app.js). Solo lo ve quien
 * tiene `chat_editar_mensajes` (de fabrica, el admin), en lo del operador y lo de Mia con la charla
 * abierta.
 *
 *  - EL MENU: dos pastillas chicas ("Editar", "Borrar") colgadas del borde de arriba de la burbuja,
 *    del lado de adentro. Con mouse aparecen al pasar (o con el foco del teclado) y NO mueven nada:
 *    van encima. En una pantalla tactil no hay "pasar": van siempre, en su renglon debajo del pie.
 *    "Borrar" lleva el rojo como texto (acento), nunca de fondo.
 *  - EL EDITOR: el textarea en la burbuja, con Cancelar / Guardar (el primario de siempre).
 *  - LA CONFIRMACION: la pregunta en linea y el boton ambar de "segundo click" (`.btn.confirmar`),
 *    el mismo de Cerrar: nada de dialogos del navegador.
 *  - LO BORRADO: atenuado, en una linea con el circulo tachado, y el texto al desplegar.
 *  - "EDITADO": una palabra mas del pie, que despliega las versiones.
 */
.cp-burbuja.cp-tocable {
  position: relative;
}

.cp-tocar {
  position: absolute;
  top: -12px;
  right: 10px;
  display: flex;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(2px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 2;
}

/* Lo de Mia y lo del operador van a la derecha del hilo: el menu, de su lado de adentro. */
.cp-burbuja.agente > .cp-tocar,
.cp-burbuja.cp-ia > .cp-tocar {
  right: auto;
  left: 10px;
}

@media (hover: hover) {
  .cp-tocable:hover > .cp-tocar {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
}

.cp-tocable:focus-within > .cp-tocar {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

/* TACTIL: siempre a la vista, en su renglon (no tapa la burbuja de arriba ni aparece de golpe). */
@media (hover: none) {
  .cp-tocar {
    position: static;
    justify-content: flex-end;
    margin-top: 6px;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
}

.cp-tocar-boton {
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-family: var(--f-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  box-shadow: 0 2px 8px -4px rgba(20, 20, 30, 0.3);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.cp-tocar-boton:hover {
  color: var(--head);
  border-color: var(--line-fuerte);
}

.cp-tocar-boton.peligro {
  color: var(--red-txt);
}

.cp-tocar-boton.peligro:hover {
  border-color: var(--red-tint-2);
  color: var(--red-txt-hover);
}

.cp-tocar-boton:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* Editando o confirmando: la burbuja se marca, como el toque largo de "Responder". */
.cp-burbuja.cp-tocando {
  min-width: min(320px, 76%);
  box-shadow: 0 0 0 2px var(--line-fuerte);
}

.cp-editor-campo {
  display: block;
  width: 100%;
  min-height: 56px;
  max-height: 240px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  font-family: var(--f-body);
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--head);
  resize: vertical;
}

.cp-editor-campo:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 1px;
}

.cp-editor-botones {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.cp-editor-error {
  margin: 6px 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--falla-txt);
}

.cp-borrar-confirmar {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
}

.cp-borrar-pregunta {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--head);
}

/* "EDITADO" en el pie: una palabra mas del renglon de la hora, que despliega las versiones. */
.cp-editado {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}

.cp-editado:hover,
.cp-editado[aria-expanded='true'] {
  color: var(--head);
}

.cp-editado:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.cp-versiones {
  margin: 8px 0 0;
  padding: 8px 0 0;
  list-style: none;
  border-top: 1px dashed var(--line);
  text-align: left;
}

.cp-version + .cp-version {
  margin-top: 6px;
}

.cp-version-rotulo {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

.cp-version-texto {
  margin: 2px 0 0;
  font-size: 0.85rem;
  color: var(--muted);
  white-space: pre-wrap;
  word-break: break-word;
}

/* LO BORRADO: papel, borde punteado y atenuado; del lado de quien lo escribio. */
.cp-burbuja.cp-borrada {
  background: var(--paper);
  border-style: dashed;
  border-color: var(--line);
  opacity: 0.72;
}

.cp-burbuja.cp-borrada.agente,
.cp-burbuja.cp-borrada.cp-ia {
  align-self: flex-end;
}

.cp-burbuja.cp-borrada:hover,
.cp-burbuja.cp-borrada:focus-within {
  opacity: 1;
}

.cp-borrada-linea {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--muted);
}

.cp-borrada-icono {
  flex: none;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--faint);
  stroke-width: 1.7;
  stroke-linecap: round;
}

.cp-borrada-ver {
  margin-top: 4px;
  font-size: 0.78rem;
}

.cp-borrada-original {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}

@media (prefers-reduced-motion: reduce) {
  .cp-tocar,
  .cp-tocar-boton {
    transition: none;
  }
}


/* ===========================================================================
 * ATAJOS DEL SUPERVISOR Y FORMATO DE LOS MENSAJES DEL OPERADOR (13/10/2026)
 * ===========================================================================
 *
 * Tres cosas:
 *  - LA BARRA DE FORMATO (`.fmt-*`, `formatoBarra` en app.js): B, I, lista y un selector de emojis
 *    arriba de un textarea (la caja del chat y el texto de un atajo). Pills chicas en Space Mono, como
 *    las herramientas de la caja (`.cp-herramienta`); el rojo es solo el acento del que esta abierto
 *    y del foco. La grilla de emojis es un menu flotante de seis columnas.
 *  - LA MARQUITA DE PRIVADO (candado en pizarra, como la nota interna): en la tabla de Ajustes (el
 *    badge PRIVADA) y en el menu de las rapidas de la caja.
 *  - LA TABLA con dos columnas mas (Quién la ve, Autor) y el selector Pública / Privada del formulario.
 */

.fmt-host {
  display: block;
  margin-top: 7px;
}

/* En la caja del chat va al final de la fila de herramientas, pegada a la derecha. */
.fmt-host.cp-formato {
  margin-top: 0;
  margin-left: auto;
}

.fmt-barra {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.fmt-boton {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 28px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-family: var(--f-mono);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

/* `.campo span` (los rotulos de los formularios) no se mete con las letras de los botones. */
.fmt-boton span {
  font-size: 0.8rem;
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
}

.fmt-negrita span {
  font-weight: 800;
}

.fmt-cursiva span {
  font-style: italic;
}

.fmt-boton:hover:not(:disabled) {
  border-color: var(--line-fuerte);
  color: var(--head);
}

.fmt-boton:active:not(:disabled) {
  background: var(--red-tint);
}

.fmt-boton[aria-expanded='true'] {
  border-color: var(--red);
  color: var(--head);
}

.fmt-icono {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fmt-emojis {
  position: relative;
  display: inline-flex;
  margin: 0;
}

.fmt-grilla {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(6, 34px);
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  box-shadow: 0 18px 40px -22px rgba(20, 20, 30, 0.45);
  animation: cp-rapidas-entra 0.16s ease-out both;
}

.fmt-grilla[hidden] {
  display: none;
}

/* En un formulario (a la izquierda) se abre hacia abajo y hacia la derecha. */
.fmt-grilla.abajo {
  top: calc(100% + 8px);
  right: auto;
  bottom: auto;
  left: 0;
}

.fmt-emoji {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}

.fmt-emoji:hover,
.fmt-emoji:focus-visible {
  border-color: var(--red-tint-2);
  background: var(--red-tint);
}

.fmt-host + textarea,
.fmt-host + #rapida-texto {
  margin-top: 8px;
}

/* --- El privado: candado en pizarra --- */

.rapida-privada-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-color: var(--pz-borde);
  background: var(--pz-bg);
  color: var(--pz-txt);
}

.rapida-candado,
.cp-rapida-candado {
  flex: none;
  width: 12px;
  height: 12px;
  fill: none;
  stroke: var(--pz-icono);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* En el menu de la caja: la marquita al final del renglon del atajo. */
.cp-rapida-privada {
  display: inline-flex;
  flex: none;
  align-items: center;
  margin-left: auto;
}

.rapidas-autor {
  color: var(--muted);
}

/* El selector Pública / Privada del formulario es el segmentado de la perilla: a su ancho. */
.rapida-visibilidad .cp-piloto {
  margin-top: 8px;
}

.rapida-visibilidad .campo-ayuda {
  margin-top: 8px;
}

/*
 * REVENDEDORES (16/10/2026, crítica de diseño). Todo con los tokens y las piezas del panel:
 * `.campo`, `.badge`, `.btn`, `.aviso`, `.tabla-marco`, `.interruptor`. Acá solo lo que la
 * sección necesita y no existe: los campos de adentro de las tablas, la fila como tarjeta en
 * pantalla angosta y el orden de lectura (lo que se toca todos los días, primero).
 */

/* Cada bloque se separa del anterior con una línea. `.config + .config` no alcanza: entre los
   bloques hay avisos, y el selector hermano se corta. El primero va sin línea. */
#seccion-revendedores .config {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
}

#seccion-revendedores .config.rev-primero {
  margin-top: 20px;
  padding-top: 0;
  border-top: 0;
  /*
   * LA LISTA SALE DEL TOPE, como la de Solicitudes: ocho columnas con badges y la acción no
   * entran en la columna de lectura. Usa el ancho de la ventana, hasta 1520, centrada.
   */
  --rev-ancho: min(1520px, max(100%, calc(100vw - 64px)));
  max-width: none;
  width: var(--rev-ancho);
  margin-left: calc((100% - var(--rev-ancho)) / 2);
}

.tabla-rev-leads th,
.tabla-rev-leads td {
  padding-left: 14px;
  padding-right: 14px;
}

/* El título del bloque: un h3 de verdad, en Space Grotesk. El rótulo mono queda para los subrótulos. */
#seccion-revendedores h3.tarjeta-rotulo {
  font-family: var(--f-display);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--head);
  margin: 0 0 4px;
}

.rev-titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
}

.rev-titulo h3.tarjeta-rotulo {
  margin-bottom: 0;
}

.rev-subrotulo {
  margin: 26px 0 0;
}

.rev-nota {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.rev-editando {
  margin: 0 0 2px;
}

.rev-falla {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
}

/* Las tres cifras de arriba. */
.rev-resumen {
  margin-top: 4px;
}

.rev-resumen .cifra {
  font-size: 2rem;
}

/* Los porcentajes de la ficha: una grilla chica, alineada por abajo. */
.rev-numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  align-items: end;
  gap: 0 14px;
}

.rev-numeros .campo-numero {
  width: auto;
}

/* Un solo campo (los días): del ancho de los demás, no de la fila entera. */
.rev-numeros.rev-una {
  grid-template-columns: minmax(160px, 220px);
}

.rev-numeros .campo span {
  white-space: nowrap;
}

/* El % (o "días") adentro del input, a la derecha: el rótulo queda corto. */
.rev-entrada {
  position: relative;
  margin-top: 7px;
}

.rev-entrada input {
  margin-top: 0;
  padding-right: 44px;
}

.rev-sufijo {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  font-family: var(--f-mono);
  font-size: 0.74rem;
  font-style: normal;
  color: var(--faint);
  pointer-events: none;
}

.rev-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0 18px;
  margin-top: 4px;
}

.rev-checks label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 0.95rem;
  cursor: pointer;
}

#seccion-revendedores .rev-checks input,
#seccion-revendedores .rev-marca input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--red);
  cursor: pointer;
}

/* La casilla ocupa 44 px de área táctil aunque se dibuje de 20. */
.rev-marca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: -10px;
  cursor: pointer;
}

/* --- Tablas -------------------------------------------------------------- */

.tabla-revendedores {
  min-width: 0;
  border-collapse: separate;
  border-spacing: 0;
}

.tabla-rev-leads {
  min-width: 880px;
}

.tabla-rev-cuentas {
  min-width: 620px;
}

.tabla-rev-equipos {
  min-width: 460px;
}

.tabla-rev-balance {
  min-width: 480px;
}

.tabla-rev-zonas {
  min-width: 460px;
}

#seccion-revendedores tbody tr:last-child td {
  border-bottom: 0;
}

/* Las cifras, a la derecha y en mono: se comparan de un vistazo. */
.tabla-revendedores th.rev-num,
.tabla-revendedores td.rev-num {
  text-align: right;
  white-space: nowrap;
}

.tabla-revendedores td.rev-num {
  font-family: var(--f-mono);
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}

.tabla-revendedores tbody td,
.tabla-revendedores tfoot td {
  vertical-align: middle;
}

.tabla-revendedores tfoot td {
  padding: 12px 18px;
  font-weight: 700;
  color: var(--head);
  background: var(--paper-2);
  border-top: 1px solid var(--line);
}

/* Los campos de adentro de las tablas, con la misma cara que los de Precios. */
#seccion-revendedores td input[type='number'],
#seccion-revendedores td input[type='text'] {
  margin-top: 0;
  padding: 9px 10px;
  min-height: 44px;
  font-family: var(--f-body);
  font-size: 0.95rem;
  color: var(--head);
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

#seccion-revendedores td input[type='number'] {
  width: 96px;
  font-family: var(--f-mono);
  text-align: right;
}

#seccion-revendedores td input[type='text'] {
  width: 100%;
  min-width: 180px;
}

#seccion-revendedores td input[type='number']:focus,
#seccion-revendedores td input[type='text']:focus {
  border-color: var(--red-tint-2);
}

#seccion-revendedores .btn-chico {
  min-height: 44px;
  padding: 11px 18px;
}

/* La acción de la fila queda pegada al borde: en una ventana angosta el scroll no la esconde. */
.tabla-revendedores th.rev-accion,
.tabla-revendedores td.rev-accion {
  position: sticky;
  right: 0;
  z-index: 1;
  white-space: nowrap;
  text-align: right;
  background: var(--paper);
  box-shadow: inset 1px 0 0 var(--line);
}

.tabla-revendedores th.rev-accion {
  background: var(--paper-2);
}

.rev-autorizar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

#seccion-revendedores td input.rev-autorizar-pct {
  width: 76px;
}

.rev-cupo {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

/* El dato principal y, debajo, el secundario. */
.rev-valor {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
}

.rev-valor.rev-izq {
  align-items: flex-start;
}

.rev-saldo {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.rev-nombre {
  font-weight: 600;
  color: var(--head);
}

.rev-sub {
  display: block;
  margin-top: 2px;
  font-family: var(--f-body);
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--muted);
}

.rev-pagar {
  font-weight: 700;
  color: var(--head);
}

.rev-motivo {
  font-family: var(--f-body);
  font-size: 0.85rem;
  color: var(--muted);
}

/* La cuenta que se está editando, marcada en la tabla. */
#seccion-revendedores tr.editando td {
  background-color: var(--paper);
  background-image: linear-gradient(var(--red-tint), var(--red-tint));
}

/* El prospecto recién autorizado se ilumina un momento: ahí pasó lo que se pidió. */
@keyframes rev-ok {
  from {
    background-color: var(--ok-bg);
  }
  to {
    background-color: transparent;
  }
}

#seccion-revendedores tr.rev-fila-ok td {
  animation: rev-ok 2s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  #seccion-revendedores tr.rev-fila-ok td {
    animation: none;
    background-image: linear-gradient(var(--ok-bg), var(--ok-bg));
  }
}

/* Solicitudes: el badge REVENDEDOR separado del nombre, y el dato debajo. */
.tabla-solicitudes td:nth-child(2) > span + .badge {
  margin-left: 6px;
}

/* --- Pantalla angosta: cada fila pasa a tarjeta --------------------------- */

@media (max-width: 560px) {
  .rev-numeros {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  :is(.tabla-rev-leads, .tabla-rev-cuentas, .tabla-rev-balance, .tabla-rev-equipos) {
    min-width: 0;
  }

  :is(.tabla-rev-leads, .tabla-rev-cuentas, .tabla-rev-balance, .tabla-rev-equipos) thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  :is(.tabla-rev-leads, .tabla-rev-cuentas, .tabla-rev-balance, .tabla-rev-equipos) tr {
    position: relative;
    display: block;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
  }

  :is(.tabla-rev-leads, .tabla-rev-cuentas, .tabla-rev-balance, .tabla-rev-equipos) tbody tr:last-child {
    border-bottom: 0;
  }

  :is(.tabla-rev-leads, .tabla-rev-cuentas, .tabla-rev-balance, .tabla-rev-equipos) td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 6px 0;
    border: 0;
    text-align: right;
  }

  :is(.tabla-rev-leads, .tabla-rev-cuentas, .tabla-rev-balance, .tabla-rev-equipos) td::before {
    content: attr(data-label);
    flex: none;
    font-family: var(--f-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--faint);
    text-align: left;
  }

  :is(.tabla-rev-leads, .tabla-rev-cuentas, .tabla-rev-balance, .tabla-rev-equipos) td[data-label='']::before {
    content: none;
  }

  :is(.tabla-rev-leads, .tabla-rev-cuentas, .tabla-rev-balance, .tabla-rev-equipos) td.rev-accion {
    position: static;
    justify-content: flex-end;
    box-shadow: none;
  }

  /* La casilla del plazo, arriba a la derecha de la tarjeta. */
  .tabla-rev-leads td:has(> .rev-marca) {
    position: absolute;
    top: 6px;
    right: 8px;
    padding: 0;
  }

  .tabla-revendedores tfoot td {
    background: transparent;
  }

  #seccion-revendedores td input[type='text'] {
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fmt-grilla {
    animation: none;
  }

  .fmt-boton {
    transition: none;
  }
}

/*
 * ETIQUETAS DE LAS CHARLAS DE MIA (Sergio, 16/10/2026): BUG / BUENA RESPUESTA / DESARROLLAR
 * FUNCIONALIDAD. En la transcripcion son tres capsulas que se prenden y se apagan con un toque
 * (`aria-pressed`): la misma forma que las del filtro (`.canal`) y el mismo tinte rojo claro de la
 * seccion activa del menu; el rojo es acento, nunca relleno. En la lista son badges chicos bajo el
 * primer mensaje.
 */
.conv-etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.conv-etiquetas-caja {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 12px;
}

.conv-etiquetas-rotulo {
  font-family: var(--f-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

.conv-etiquetas-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.etiqueta-chip {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.etiqueta-chip:hover {
  color: var(--head);
  border-color: var(--red-tint-2);
}

.etiqueta-chip[aria-pressed="true"] {
  color: var(--red-txt);
  background: var(--red-tint);
  border-color: var(--red-tint-2);
}

.etiqueta-chip:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

.conv-etiquetas-aviso {
  font-size: 0.82rem;
  color: var(--aviso-txt);
}

.conv-etiquetas-aviso:empty {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .etiqueta-chip {
    transition: none;
  }
}