/*
 * GENERADO por scripts/temas.mjs desde marca/temas/temas.json: no se edita a
 * mano (el build lo regenera y `pnpm verify` falla si no coincide).
 *
 * Temas de la marca Criterium (FUNDAMENTOS §5). GRAFITO es el tema por
 * defecto en todo el sistema; oscuro, claro y contraste son opciones, y
 * «sistema» sigue al equipo entre grafito y claro (su bloque claro ES el
 * claro). Cada bloque es completo: una zona con su tema no hereda nada del de
 * fuera. Los tokens comunes (fuentes, curvas, tiempos) y los derivados
 * (fórmulas sobre el tema) se declaran en cada raíz de tema para que se
 * recalculen con los valores de esa zona.
 *
 * Uso: data-crm-tema="grafito|oscuro|claro|contraste|sistema" en <html> o en
 * la raíz de cualquier zona. Sin atributo, grafito. Todo componente de marca
 * pinta SOLO con estas variables: nunca un color, tiempo o sombra literal.
 */

:root,
[data-crm-tema="grafito"],
[data-crm-tema="sistema"] {
  color-scheme: dark;
  --crm-bg: #18181a;
  --crm-panel: #1e1e1f;
  --crm-panel-2: #252526;
  --crm-panel-3: #2c2c2d;
  --crm-line: #313132;
  --crm-line-2: #3f3f40;
  --crm-control: #6c6c6e;
  --crm-linea-apagada: #505051;
  --crm-text: #f5f5f4;
  --crm-text-2: #d6d5d2;
  --crm-muted: #abaaa6;
  --crm-dim: #959491;
  --crm-acento: #2bd47d;
  --crm-acento-2: #1fb066;
  --crm-acento-suave: rgb(43 212 125 / 0.12);
  --crm-acento-linea: rgb(43 212 125 / 0.52);
  --crm-sobre-acento: #04130b;
  --crm-luz: rgb(170 255 210 / 0.95);
  --crm-error: #f0a58f;
  --crm-error-suave: rgb(240 165 143 / 0.12);
  --crm-error-linea: rgb(240 165 143 / 0.52);
  --crm-aviso: #e0a23a;
  --crm-aviso-suave: rgb(224 162 58 / 0.12);
  --crm-aviso-linea: rgb(224 162 58 / 0.55);
  --crm-boton: #fafafa;
  --crm-boton-tinta: #080808;
  --crm-velo: rgb(24 24 26 / 0.86);
  --crm-telon: rgb(10 10 11 / 0.55);
  --crm-sombra: 0 24px 80px rgb(0 0 0 / 0.45);
  --crm-sombra-capa: 0 12px 40px rgb(0 0 0 / 0.4);
  --crm-sombra-hundida: inset 0 1px 0 rgb(0 0 0 / 0.35);
  --crm-seleccion: rgb(43 212 125 / 0.26);
  --crm-esqueleto-a: #252526;
  --crm-esqueleto-b: #303031;
  --crm-acento-halo: rgb(43 212 125 / 0.3);
  --crm-serie-1: #ddd6ce;
  --crm-serie-2: #d7a86e;
  --crm-serie-3: #c47864;
  --crm-serie-4: #99b8a0;
  --crm-serie-5: #a4809f;
  --crm-serie-6: #726c67;
  --crm-serie-comparacion: var(--crm-muted);
  --crm-serie-reposo: #6c6c6e;
  --crm-serie-destacada: var(--crm-acento);
  --crm-sobre-serie-1: #18181a;
  --crm-calor-tinta-3: var(--crm-sobre-serie-1);
  --crm-foco-ancho: 1px;
  --crm-pie-fondo: rgb(8 8 8 / 0.6);
  --crm-pie-lockup: var(--crm-line-2);
  --crm-pie-apellido: rgb(43 212 125 / 0.5);
  --crm-ascii-reposo: #605b52;
  --crm-ascii-luz: var(--crm-acento);
  --crm-apagado: 0.32;
}

[data-crm-tema="oscuro"] {
  color-scheme: dark;
  --crm-bg: #080808;
  --crm-panel: #131210;
  --crm-panel-2: #1c1b18;
  --crm-panel-3: #23211e;
  --crm-line: #2a2825;
  --crm-line-2: #383532;
  --crm-control: #6a6661;
  --crm-linea-apagada: #4c4845;
  --crm-text: #fafafa;
  --crm-text-2: #d9d6d2;
  --crm-muted: #a4a09d;
  --crm-dim: #8d8a86;
  --crm-acento: #2bd47d;
  --crm-acento-2: #1fb066;
  --crm-acento-suave: rgb(43 212 125 / 0.12);
  --crm-acento-linea: rgb(43 212 125 / 0.52);
  --crm-sobre-acento: #04130b;
  --crm-luz: rgb(170 255 210 / 0.95);
  --crm-error: #f0a58f;
  --crm-error-suave: rgb(240 165 143 / 0.12);
  --crm-error-linea: rgb(240 165 143 / 0.52);
  --crm-aviso: #e0a23a;
  --crm-aviso-suave: rgb(224 162 58 / 0.12);
  --crm-aviso-linea: rgb(224 162 58 / 0.55);
  --crm-boton: #fafafa;
  --crm-boton-tinta: #080808;
  --crm-velo: rgb(8 8 8 / 0.86);
  --crm-telon: rgb(4 4 4 / 0.62);
  --crm-sombra: 0 24px 80px rgb(0 0 0 / 0.55);
  --crm-sombra-capa: 0 12px 40px rgb(0 0 0 / 0.5);
  --crm-sombra-hundida: inset 0 1px 0 rgb(0 0 0 / 0.45);
  --crm-seleccion: rgb(43 212 125 / 0.28);
  --crm-esqueleto-a: #1c1b18;
  --crm-esqueleto-b: #2c2925;
  --crm-acento-halo: rgb(43 212 125 / 0.35);
  --crm-serie-1: #ddd6ce;
  --crm-serie-2: #d7a86e;
  --crm-serie-3: #c47864;
  --crm-serie-4: #99b8a0;
  --crm-serie-5: #a4809f;
  --crm-serie-6: #726c67;
  --crm-serie-comparacion: var(--crm-muted);
  --crm-serie-reposo: #6a6661;
  --crm-serie-destacada: var(--crm-acento);
  --crm-sobre-serie-1: #080808;
  --crm-calor-tinta-3: var(--crm-sobre-serie-1);
  --crm-foco-ancho: 1px;
  --crm-pie-fondo: rgb(8 8 8 / 0.6);
  --crm-pie-lockup: var(--crm-line-2);
  --crm-pie-apellido: rgb(43 212 125 / 0.5);
  --crm-ascii-reposo: #605b52;
  --crm-ascii-luz: var(--crm-acento);
  --crm-apagado: 0.32;
}

[data-crm-tema="claro"] {
  color-scheme: light;
  --crm-bg: #f6f5f2;
  --crm-panel: #ffffff;
  --crm-panel-2: #f0eee9;
  --crm-panel-3: #e8e5df;
  --crm-line: #e3e0da;
  --crm-line-2: #cfcac2;
  --crm-control: #8d877e;
  --crm-linea-apagada: #b9b4ad;
  --crm-text: #121110;
  --crm-text-2: #33302c;
  --crm-muted: #5b5752;
  --crm-dim: #69655e;
  --crm-acento: #117343;
  --crm-acento-2: #0e6338;
  --crm-acento-suave: rgb(17 115 67 / 0.09);
  --crm-acento-linea: #4aa16e;
  --crm-sobre-acento: #ffffff;
  --crm-luz: #1b9a5c;
  --crm-error: #a8412a;
  --crm-error-suave: rgb(168 65 42 / 0.08);
  --crm-error-linea: #e07155;
  --crm-aviso: #8a580e;
  --crm-aviso-suave: rgb(138 88 14 / 0.09);
  --crm-aviso-linea: #bf853e;
  --crm-boton: #121110;
  --crm-boton-tinta: #fafafa;
  --crm-velo: rgb(246 245 242 / 0.86);
  --crm-telon: rgb(246 245 242 / 0.72);
  --crm-sombra: 0 0 0 1px rgb(40 32 24 / 0.06), 0 24px 64px rgb(40 32 24 / 0.14);
  --crm-sombra-capa: 0 0 0 1px rgb(40 32 24 / 0.06), 0 8px 24px rgb(40 32 24 / 0.1);
  --crm-sombra-hundida: inset 0 1px 2px rgb(40 32 24 / 0.06);
  --crm-seleccion: rgb(17 115 67 / 0.18);
  --crm-esqueleto-a: #efede8;
  --crm-esqueleto-b: #e4e1da;
  --crm-acento-halo: rgb(17 115 67 / 0.22);
  --crm-serie-1: #564f47;
  --crm-serie-2: #ab7a3e;
  --crm-serie-3: #a15141;
  --crm-serie-4: #699273;
  --crm-serie-5: #7c5777;
  --crm-serie-6: #928a83;
  --crm-serie-comparacion: var(--crm-muted);
  --crm-serie-reposo: #8d877e;
  --crm-serie-destacada: var(--crm-acento);
  --crm-sobre-serie-1: #ffffff;
  --crm-calor-tinta-3: var(--crm-text);
  --crm-foco-ancho: 1px;
  --crm-pie-fondo: #eeebe5;
  --crm-pie-lockup: #c3beb7;
  --crm-pie-apellido: #38905e;
  --crm-ascii-reposo: #5c554b;
  --crm-ascii-luz: var(--crm-acento);
  --crm-apagado: 0.32;
}

[data-crm-tema="contraste"] {
  color-scheme: dark;
  --crm-bg: #000000;
  --crm-panel: #0b0b0b;
  --crm-panel-2: #171717;
  --crm-panel-3: #212121;
  --crm-line: #6e6e6e;
  --crm-line-2: #8c8c8c;
  --crm-control: #a6a6a6;
  --crm-linea-apagada: #5c5c5c;
  --crm-text: #ffffff;
  --crm-text-2: #f2f2f2;
  --crm-muted: #cfcfcf;
  --crm-dim: #a8a8a8;
  --crm-acento: #3ee68f;
  --crm-acento-2: #2bd47d;
  --crm-acento-suave: rgb(62 230 143 / 0.16);
  --crm-acento-linea: var(--crm-acento);
  --crm-sobre-acento: #04130b;
  --crm-luz: rgb(170 255 210 / 0.95);
  --crm-error: #ff8f75;
  --crm-error-suave: rgb(255 143 117 / 0.16);
  --crm-error-linea: var(--crm-error);
  --crm-aviso: #ffc247;
  --crm-aviso-suave: rgb(255 194 71 / 0.16);
  --crm-aviso-linea: var(--crm-aviso);
  --crm-boton: #ffffff;
  --crm-boton-tinta: #000000;
  --crm-velo: rgb(0 0 0 / 0.92);
  --crm-telon: rgb(0 0 0 / 0.8);
  --crm-sombra: none;
  --crm-sombra-capa: none;
  --crm-sombra-hundida: none;
  --crm-seleccion: rgb(62 230 143 / 0.4);
  --crm-esqueleto-a: #171717;
  --crm-esqueleto-b: #2a2a2a;
  --crm-acento-halo: transparent;
  --crm-serie-1: #eee7df;
  --crm-serie-2: #ebb876;
  --crm-serie-3: #e08a74;
  --crm-serie-4: #abcfb3;
  --crm-serie-5: #be93b8;
  --crm-serie-6: #8c8580;
  --crm-serie-comparacion: var(--crm-muted);
  --crm-serie-reposo: #9a9a9a;
  --crm-serie-destacada: var(--crm-acento);
  --crm-sobre-serie-1: #000000;
  --crm-calor-tinta-3: var(--crm-sobre-serie-1);
  --crm-foco-ancho: 2px;
  --crm-pie-fondo: #000000;
  --crm-pie-lockup: #4a4a4a;
  --crm-pie-apellido: var(--crm-acento);
  --crm-ascii-reposo: #8c8c8c;
  --crm-ascii-luz: var(--crm-acento);
  --crm-apagado: 0.4;
}

/* «sistema» con el equipo en claro: el mismo bloque que el claro. */
@media (prefers-color-scheme: light) {
  [data-crm-tema="sistema"] {
    color-scheme: light;
    --crm-bg: #f6f5f2;
    --crm-panel: #ffffff;
    --crm-panel-2: #f0eee9;
    --crm-panel-3: #e8e5df;
    --crm-line: #e3e0da;
    --crm-line-2: #cfcac2;
    --crm-control: #8d877e;
    --crm-linea-apagada: #b9b4ad;
    --crm-text: #121110;
    --crm-text-2: #33302c;
    --crm-muted: #5b5752;
    --crm-dim: #69655e;
    --crm-acento: #117343;
    --crm-acento-2: #0e6338;
    --crm-acento-suave: rgb(17 115 67 / 0.09);
    --crm-acento-linea: #4aa16e;
    --crm-sobre-acento: #ffffff;
    --crm-luz: #1b9a5c;
    --crm-error: #a8412a;
    --crm-error-suave: rgb(168 65 42 / 0.08);
    --crm-error-linea: #e07155;
    --crm-aviso: #8a580e;
    --crm-aviso-suave: rgb(138 88 14 / 0.09);
    --crm-aviso-linea: #bf853e;
    --crm-boton: #121110;
    --crm-boton-tinta: #fafafa;
    --crm-velo: rgb(246 245 242 / 0.86);
    --crm-telon: rgb(246 245 242 / 0.72);
    --crm-sombra: 0 0 0 1px rgb(40 32 24 / 0.06), 0 24px 64px rgb(40 32 24 / 0.14);
    --crm-sombra-capa: 0 0 0 1px rgb(40 32 24 / 0.06), 0 8px 24px rgb(40 32 24 / 0.1);
    --crm-sombra-hundida: inset 0 1px 2px rgb(40 32 24 / 0.06);
    --crm-seleccion: rgb(17 115 67 / 0.18);
    --crm-esqueleto-a: #efede8;
    --crm-esqueleto-b: #e4e1da;
    --crm-acento-halo: rgb(17 115 67 / 0.22);
    --crm-serie-1: #564f47;
    --crm-serie-2: #ab7a3e;
    --crm-serie-3: #a15141;
    --crm-serie-4: #699273;
    --crm-serie-5: #7c5777;
    --crm-serie-6: #928a83;
    --crm-serie-comparacion: var(--crm-muted);
    --crm-serie-reposo: #8d877e;
    --crm-serie-destacada: var(--crm-acento);
    --crm-sobre-serie-1: #ffffff;
    --crm-calor-tinta-3: var(--crm-text);
    --crm-foco-ancho: 1px;
    --crm-pie-fondo: #eeebe5;
    --crm-pie-lockup: #c3beb7;
    --crm-pie-apellido: #38905e;
    --crm-ascii-reposo: #5c554b;
    --crm-ascii-luz: var(--crm-acento);
    --crm-apagado: 0.32;
  }
}

/* Comunes a todos los temas (FUNDAMENTOS §3 y §8) y derivados, en cada raíz de tema. */
:root,
[data-crm-tema] {
  --crm-sans: "Geist", var(--font-geist-sans, var(--font-sans, ui-sans-serif)), system-ui, -apple-system, "Segoe UI", sans-serif;
  --crm-mono: "Geist Mono", var(--font-geist-mono, ui-monospace), "SFMono-Regular", Menlo, monospace;
  --crm-lockup: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3MDI5LjU1OSAxMDAwLjAwMCIgd2lkdGg9IjcwMjkuNTU5IiBoZWlnaHQ9IjEwMDAuMDAwIiBmaWxsPSJjdXJyZW50Q29sb3IiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0iQ3JpdGVyaXVtIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDAuMDAwKSI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTUxLjU1NzUsLTQ5LjQwOTIpIHNjYWxlKDEuMDc0MTE0KSI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsMTAyMy4wMDAwMDApIHNjYWxlKDAuMTAwMDAwLC0wLjEwMDAwMCkiIGZpbGw9ImN1cnJlbnRDb2xvciIgc3Ryb2tlPSJub25lIj4gPHBhdGggZD0iTTEwMjI1IDk3NjMgYy0yMDQgLTUgLTU5MiAtMjQgLTY2NSAtMzMgLTQxIC01IC0xNTYgLTE0IC0yNTUgLTIwIC05OSAtNiAtMjI3IC0xNyAtMjg1IC0yNSAtNTggLTggLTE3MCAtMjEgLTI1MCAtMjkgLTIyOCAtMjMgLTQ4MSAtNTUgLTUyNSAtNjUgLTIyIC02IC04MyAtMTUgLTEzNSAtMjEgLTUyIC02IC0xMjkgLTE3IC0xNzAgLTI1IC00MSAtOCAtMTIyIC0yMSAtMTgwIC0yOSAtMTAyIC0xNCAtMTY0IC0yNSAtMzc1IC02NiAtNTUgLTExIC0xMTYgLTIyIC0xMzUgLTI1IC0xMTIgLTE5IC03NjMgLTE2NiAtOTMwIC0yMTAgLTMwIC04IC04MiAtMjIgLTExNSAtMzAgLTEzMSAtMzEgLTE5MiAtNDggLTI0OCAtNjYgLTMxIC0xMCAtNjQgLTE5IC03MiAtMTkgLTcgMCAtNTEgLTExIC05NyAtMjUgLTQ2IC0xNCAtMTIxIC0zNyAtMTY4IC01MSAtNDcgLTE0IC0xMjMgLTM3IC0xNzAgLTUxIC00NyAtMTQgLTE3MCAtNTQgLTI3NSAtODggLTEwNCAtMzUgLTIwNiAtNjggLTIyNSAtNzQgLTE5IC01IC03MyAtMjQgLTEyMCAtNDEgLTQ3IC0xNyAtMTA1IC0zOCAtMTMwIC00NiAtMjUgLTcgLTU0IC0xOCAtNjUgLTI0IC0xOCAtOCAtNTkgLTI0IC0yNzUgLTEwNiAtMzYgLTE0IC03MiAtMjkgLTgxIC0zMyAtOCAtNSAtNDcgLTIxIC04NSAtMzYgLTczIC0yOSAtMTQ4IC02MSAtMzY0IC0xNTcgLTEwMCAtNDQgLTY4NyAtMzM4IC03MjAgLTM2MCAtMTkgLTEzIC00OSAtMzEgLTY1IC00MCAtNDAgLTIwIC0xOTAgLTEwOCAtMzM3IC0xOTcgLTE0MCAtODUgLTM2MiAtMjMxIC01MDMgLTMzMiAtMzggLTI3IC04MSAtNTcgLTk1IC02NyAtODUgLTU4IC00MjUgLTMzMyAtNTQwIC00MzYgLTEwNyAtOTcgLTQzMiAtNDI5IC01MDAgLTUxMSAtMjIxIC0yNjUgLTMzMiAtNDMyIC00MzUgLTY1MCAtMTc4IC0zNzUgLTIwMiAtNzk5IC02OSAtMTIxNSAxNSAtNDcgMzAgLTg5IDM0IC05NSA0IC01IDEzIC0yNiAxOSAtNDYgMTEgLTM1IDg1IC0xODQgMTI3IC0yNTcgNjUgLTExNCAyMzcgLTM1NiAzMjcgLTQ2MiA4NyAtMTAxIDMxMSAtMzMwIDQwNCAtNDExIDU5IC01MiAxMTQgLTEwMSAxMjMgLTExMCA5IC05IDQ4IC00MiA4NiAtNzMgMzEwIC0yNTggNjgwIC01MDMgMTE2NCAtNzY4IDI4MSAtMTU1IDU5MiAtMzA4IDkxNSAtNDUzIDgzIC0zNiAxNjQgLTczIDE4MCAtODAgOTggLTQ1IDE0NSAtNjUgMTUwIC02NSA0IDAgMjEgLTcgMzggLTE1IDM2IC0xNiAxMTkgLTQ5IDE5MiAtNzUgMjggLTExIDg2IC0zMyAxMzAgLTUwIDQ0IC0xNyAxMDUgLTM5IDEzNSAtNTAgMzAgLTEwIDg3IC0zMCAxMjUgLTQ1IDM5IC0xNCAxMjkgLTQ1IDIwMCAtNjkgNzIgLTI0IDE0MSAtNDkgMTU1IC01NCAxNCAtNiA3MiAtMjUgMTMwIC00MiA1OCAtMTggMTIxIC0zOCAxNDAgLTQ2IDE5IC03IDYwIC0yMCA5MCAtMjggMzAgLTggMTAyIC0yOSAxNjAgLTQ2IDU4IC0xOCAxMzkgLTQxIDE4MCAtNTIgNDEgLTExIDEwNCAtMjkgMTQwIC0zOSAzNiAtMTAgOTIgLTI1IDEyNSAtMzQgMzMgLTggOTIgLTI0IDEzMCAtMzUgMTI0IC0zNSAxODMgLTQ5IDQ3MCAtMTE1IDE4MyAtNDEgMzQ2IC03NiA0MjUgLTkxIDQxIC03IDEwNyAtMjAgMTQ1IC0yOCAzOSAtOSAxMzEgLTI2IDIwNSAtNDAgNzQgLTEzIDE4NyAtMzQgMjUwIC00NiA2MyAtMTEgMTU2IC0yNSAyMDUgLTMxIDUwIC01IDExNSAtMTYgMTQ1IC0yNCAzMCAtNyA4NCAtMTYgMTIwIC0yMCAzNiAtMyAxMDYgLTEzIDE1NSAtMjEgMTE4IC0yMCAzNjIgLTUwIDU1MCAtNjkgODMgLTggMTk3IC0yMiAyNTUgLTMwIDU4IC04IDE4NCAtMTkgMjgwIC0yNSA5NiAtNiAyNTIgLTE3IDM0NSAtMjYgMTIxIC0xMSAzNTAgLTE3IDc5NSAtMjEgNjMyIC01IDk1NSAyIDEzMjAgMzIgOTYgNyAyMjIgMTcgMjgwIDIwIDU4IDMgMTUyIDEzIDIxMCAyMSA1OCA4IDE3NyAyMSAyNjUgMjkgMTk3IDE5IDQ2MSA1MCA1NDAgNjQgMzMgNiAxMTAgMTggMTcwIDI2IDYxIDggMTUxIDIxIDIwMCAyOSA1MCA4IDEyNCAyMCAxNjUgMjYgMTQ2IDIxIDMxMyA0OSAzODQgNjQgMzkgOCAxMzQgMjYgMjExIDQxIDc3IDE0IDE3OCAzNSAyMjUgNDUgNDcgMTEgMTIxIDI2IDE2NSAzNSA0NCA4IDEzMCAyNiAxOTAgNDAgNjEgMTQgMTQ4IDMzIDE5NSA0NCAxMTEgMjUgMjA5IDQ5IDI5MCA3MSAzNiA5IDk3IDI1IDEzNSAzNSAxNDcgMzcgMTgyIDQ2IDI1MCA2NiAzOSAxMSA5OSAyOCAxMzUgMzggMTk3IDU3IDczNSAyMzEgOTMwIDMwMiA0NyAxNyAxMTAgMzkgMTQwIDQ5IDMwIDExIDkxIDMzIDEzNSA1MCA0NCAxNyAxMDMgMzkgMTMwIDQ5IDI4IDEwIDEwMiA0MCAxNjUgNjYgNjMgMjYgMTM4IDU2IDE2NSA2NyAyOCAxMSA1NSAyMyA2MCAyOCA2IDQgMjggMTMgNTAgMjAgMjIgNyA1MSAxOCA2NSAyNSAxNCA3IDUwIDI0IDgwIDM4IDIwMyA5MCA3MzggMzU0IDg3NyA0MzMgNDQ5IDI1NCA4NzEgNTQ0IDExMjcgNzc0IDQxMSAzNjkgNzE4IDc1MyA4OTAgMTExNSAyMCA0NCA0MyA5MSA1MCAxMDUgOCAxNCAyMyA1NiAzNiA5MyAxNyA1MiAxOSA3MiAxMSA4MCAtMTggMTggLTYyODYgMjIgLTYzMjAgNCAtMjEgLTEwIC0yOCAtMjYgLTQyIC05NyAtNTQgLTI2MCAtMTQ5IC01OTQgLTIwNSAtNzE3IC04IC0xNyAtMTQgLTM0IC0xNCAtMzggMCAtNCAtMTQgLTM5IC0zMSAtNzggLTE3IC00MCAtMzggLTg5IC00NyAtMTExIC0zNiAtODIgLTE3MSAtMzQ1IC0yMTcgLTQyMSAtNDggLTc5IC0xODEgLTI4MyAtMjIwIC0zMzYgLTE3NCAtMjM5IC00NDAgLTUxNyAtNjcwIC03MDIgLTE3OSAtMTQ0IC0zMTQgLTIzNyAtNDk1IC0zNDMgLTgyIC00NyAtMzQ0IC0xODEgLTM5MCAtMTk5IC0xOSAtNyAtNzEgLTI3IC0xMTUgLTQ1IC0yNjUgLTEwNCAtNTY4IC0xODQgLTg2MCAtMjI2IC0xMzIgLTE5IC00OTcgLTM2IC02MTAgLTI5IC0yNDIgMTYgLTM2NCAyOSAtNTI1IDU2IC05NiAxNyAtMTc4IDMzIC0xODMgMzYgLTUgMyAtNDggMTUgLTk1IDI4IC0xMDUgMjcgLTE5MyA1NSAtMjg3IDkwIC0zOCAxNCAtOTIgMzQgLTEyMCA0NCAtMjcgMTAgLTg5IDM3IC0xMzcgNjAgLTQ4IDIyIC04OSA0MSAtOTIgNDEgLTcgMCAtMzMxIDE4MiAtMzcxIDIwOCAtMTE5IDc5IC0yNjQgMTg3IC0zNzAgMjc2IC0yMjYgMTkwIC01MjcgNTA4IC02NDUgNjgyIC03NCAxMDkgLTE3MCAyNTUgLTE4NCAyNzkgLTU3IDEwMCAtNzQgMTMwIC0xMjEgMjIwIC00NCA4NSAtOTAgMTg2IC0xNzIgMzc1IC00MyAxMDAgLTE1NSA0NjggLTE3MyA1NzAgLTYgMzYgLTE4IDg4IC0yNSAxMTUgLTggMjggLTE5IDkxIC0yNSAxNDAgLTcgNTAgLTE2IDEwNiAtMjEgMTI1IC0zNCAxMzYgLTUzIDc4MSAtMzAgMTA1MCAzMyAzODIgMTE1IDc3OCAyMjEgMTA3NSA0NiAxMjggODMgMjIzIDEwMSAyNjEgMTAgMjIgMTkgNDQgMTkgNDggMCAxOCAxNDcgMzEwIDIwMiA0MDEgMjA0IDMzOCAzNTQgNTMxIDYxOCA3OTYgODUgODYgMTk2IDE5MCAyNDUgMjMxIDQxNiAzNDMgODc4IDU4MSAxMzgwIDcxMSAyMjMgNTggMjgyIDY5IDU4MCAxMDcgOTEgMTIgNTMzIDEyIDY1NSAwIDE0NiAtMTQgMzkxIC00OCA0MzAgLTYwIDE5IC01IDYyIC0xNSA5NSAtMjEgODIgLTE0IDMxMSAtNzkgNDIwIC0xMTggMTExIC00MCAyMjEgLTg0IDI0NSAtOTYgMTQgLTggNjMgLTMyIDExMCAtNTQgMTU1IC03NCAyMzUgLTExOSA0MjAgLTIzOSAzMzQgLTIxNyA2NjkgLTU0MCA5MzkgLTkwNyAxNDMgLTE5NiAxODUgLTI2MCAyODQgLTQzOCA3MSAtMTI4IDE2NyAtMzIwIDE2NyAtMzM0IDAgLTQgOSAtMjUgMTkgLTQ3IDE4IC0zOCA1NSAtMTMyIDEwMiAtMjYxIDEwIC0yNyAzMCAtOTAgNDQgLTE0MCAxNSAtNDkgMzUgLTExNyA0NCAtMTUwIDM5IC0xMzAgOTggLTQwOCAxMTMgLTUzNSAxMiAtMTA1IDI0IC0xMzEgNjUgLTE0MiAxNyAtNCAxNDMzIC03IDMxNDcgLTYgMjc1MCAzIDMxMTggNSAzMTI2IDE4IDE0IDIyIDIgNTUgLTUzIDE1NSAtNDUgODEgLTIwMCAzMjEgLTI0OSAzODUgLTU2IDczIC0xNDMgMTg2IC0xNDggMTkwIC0zIDMgLTQxIDQ4IC04NSAxMDAgLTE0OSAxNzggLTQzOCA0NTQgLTY5NCA2NjMgLTUzIDQzIC0xMDUgODYgLTExNiA5NSAtMzYgMzAgLTIxOCAxNjYgLTI3MSAyMDIgLTIyNiAxNTUgLTQ4NiAzMjMgLTU5NCAzODUgLTM2IDIxIC03OCA0NiAtOTUgNTUgLTI0OCAxNDUgLTUzMCAyOTMgLTc3MCA0MDUgLTI3IDEyIC05MCA0MSAtMTM4IDY0IC00OSAyMyAtOTEgNDEgLTkzIDQxIC02IDAgLTEyOCA1MiAtMTc5IDc1IC0xNiA4IC02NCAyOCAtMTA1IDQ1IC0xMzMgNTUgLTE3NCA3MiAtMjEwIDg4IC0xOSA4IC01MyAyMSAtNzUgMjggLTIyIDcgLTc2IDI3IC0xMjAgNDQgLTIzMSA5MSAtNjAxIDIxOCAtODk1IDMxMCAtNTggMTggLTEzMCA0MCAtMTYwIDUwIC01MCAxNyAtMTM4IDQyIC0zMTAgOTAgLTY4IDE5IC0xNDYgMzkgLTI3MCA3MCAtOTAgMjIgLTE3OSA0NCAtMjgwIDcwIC00MSAxMCAtMTI5IDMwIC0xOTUgNDUgLTY2IDE0IC0xNTggMzUgLTIwNSA0NiAtNDcgMTAgLTEyMSAyNiAtMTY1IDM0IC00NCA4IC0xNTYgMjggLTI1MCA0NSAtOTMgMTggLTIwNiAzOCAtMjUwIDQ1IC00NCA3IC0xMjMgMjAgLTE3NSAyOCAtMjE3IDM2IC0zMTEgNTAgLTQyMCA2MyAtNjMgNyAtMTU4IDIwIC0yMTAgMjkgLTE0NSAyMiAtMzMwIDQ1IC00OTAgNjAgLTgwIDggLTE5OSAyMSAtMjY1IDMwIC02NiA4IC0yMzUgMjIgLTM3NSAzMSAtMTQwIDggLTMyMiAxOSAtNDA1IDI0IC0xOTAgMTEgLTg4MSAzMSAtMTAwMCAyOCAtNDkgLTEgLTEzNSAtMyAtMTkwIC01eiBtLTI3NTUgLTk5MSBjMCAtMTcgLTI3IC00MCAtODUgLTcyIC04NyAtNDkgLTI3NCAtMjAwIC00MTUgLTMzNSAtMTAwIC05NiAtMjY5IC0yNzMgLTMzMCAtMzQ0IC04OCAtMTAyIC0yNjIgLTMzOCAtMzI2IC00MzkgLTIxIC0zNCAtNTEgLTgyIC02NiAtMTA1IC00OCAtNzUgLTE0MiAtMjQ5IC0xOTcgLTM2MiAtMjkgLTYwIC01NyAtMTE4IC02MyAtMTI5IC01IC0xMCAtMTYgLTM1IC0yMyAtNTUgLTggLTIwIC0yOCAtNzAgLTQ1IC0xMTEgLTU1IC0xMzEgLTk1IC0yNTAgLTE3MCAtNTEwIC00NyAtMTY0IC0xMDMgLTQ1NSAtMTI2IC02NjAgLTQwIC0zNTMgLTM3IC0zMzMgLTY0IC0zNDcgLTMzIC0xNyAtMTg5MCAtMTkgLTE5MzggLTIgLTM2IDEyIC00MSAyNiAtMzAgOTQgNCAyOCAxNSAxMDkgMjMgMTgwIDkgNzIgMjAgMTQ0IDI1IDE2MCA1IDE3IDE0IDU3IDE5IDkwIDEyIDY1IDM3IDE1OCA4MyAzMDUgODkgMjkwIDIyNyA1NTYgNDc1IDkyMCA0NyA2OCAyMjAgMjY4IDMyMyAzNzEgNjMgNjMgMTcwIDE2MCAyMzcgMjE1IDE1NCAxMjUgMTU2IDEyNyAyODggMjE0IDYxIDQwIDEyMSA4MSAxMzUgOTAgOTAgNjAgMzc4IDIxMCA2NDUgMzM2IDg0IDM5IDMzMSAxMzggNDgwIDE5MSAzOSAxNCA5MyAzMyAxMjAgNDMgNTYgMjAgMjQ5IDgwIDQ1MCAxMzkgMzAwIDg5IDU3NSAxNDggNTc1IDEyM3ogbTY1ODUgLTI4IGMxNDUgLTM0IDI4NSAtNzAgMzY1IC05MyAyNjEgLTc2IDQ4NyAtMTQ4IDYxNSAtMTk2IDExOSAtNDUgMjAxIC03NyAyMzIgLTkxIDE3IC04IDM0IC0xNCAzOCAtMTQgNCAwIDM5IC0xNCA3OCAtMzEgMjYwIC0xMTIgNjY4IC0zMTkgODE3IC00MTMgMTUwIC05NiAzODIgLTI2MyA0NDYgLTMyMiAxNyAtMTYgNzkgLTcxIDEzNyAtMTIyIDIwNiAtMTg0IDM5NiAtNDE1IDU5MyAtNzIyIDc5IC0xMjQgMjMxIC00MzEgMjY0IC01MzQgMTEgLTM1IDExIC00MSAtNiAtNTMgLTE1IC0xMSAtMTk0IC0xMyAtMTAwOCAtMTEgbC05OTAgMyAtMTMgMjUgYy02IDE0IC0yMiA2MyAtMzMgMTEwIC0yOSAxMTYgLTY4IDI0MyAtOTYgMzE3IC0xMyAzNCAtMjQgNjUgLTI0IDcwIDAgNSAtMTYgNDcgLTM2IDkzIC0xOSA0NyAtMzggOTIgLTQxIDEwMCAtMzIgODcgLTIzMSA0NzkgLTI3NCA1NDIgLTExIDE0IC0xOSAyOCAtMTkgMzEgMCA0IC04OSAxMzggLTE4MCAyNzEgLTUyIDc3IC0yMjcgMjkzIC0zMTkgMzkzIC0xNzAgMTg2IC00MTkgNDE2IC01ODYgNTM5IC00NCAzMiAtODIgNjIgLTg1IDY1IC0zIDMgLTIwIDE0IC0zNyAyMyAtMTggOSAtMzMgMjMgLTMzIDMxIDAgMjMgNjkgMTkgMTk1IC0xMXogbS05ODU2IC0xMDEzIGMxMiAtOCAtMTUgLTQwIC0xMjAgLTE0OCAtMjMxIC0yMzggLTQxMSAtNDk3IC01ODcgLTg0OCAtNTIgLTEwNCAtNjIgLTEyNiAtMTE2IC0yNjAgLTQ2IC0xMTIgLTEzNiAtNDAxIC0xMzYgLTQzNCAwIC0xMCAtOCAtNDUgLTE5IC03NyAtMTAgLTMzIC0yMiAtODggLTI2IC0xMjQgLTQgLTM2IC0xMyAtOTUgLTIxIC0xMzEgLTcgLTM2IC0xOCAtMTM4IC0yNSAtMjI1IC04IC0xMTEgLTE2IC0xNjQgLTI1IC0xNzQgLTEzIC0xMyAtMTE3IC0xNSAtODE5IC0xNSAtNjI3IDAgLTgwNyAzIC04MTYgMTIgLTE1IDE1IC01IDY1IDM4IDE5MyA5NSAyODQgMjg1IDU3NCA1NzYgODc2IDE3NSAxODMgNDY3IDQzNCA2NTcgNTY2IDE0IDEwIDU3IDQxIDk1IDY4IDM3NiAyNzEgNzkwIDUwNiAxMjMwIDY5OSA3NSAzMyA5MiAzNiAxMTQgMjJ6IG0xMzE0MiAtNjEgYzE5NyAtODkgMzU1IC0xNjYgNDM5IC0yMTIgMjUgLTEzIDcyIC0zOSAxMDUgLTU4IDExNSAtNjIgMzQ2IC0yMDYgNDcxIC0yOTIgMTgzIC0xMjYgMjY1IC0xODggNDQ3IC0zMzcgMTIyIC0xMDAgMTk1IC0xNjggMzY3IC0zNDAgMTc5IC0xNzkgMjQ0IC0yNTYgMjM2IC0yNzYgLTUgLTEzIC04MSAtMTUgLTYxOSAtMTUgLTcwMiAwIC02MjYgLTEyIC02NzIgMTA1IC02NiAxNzIgLTgwIDIwNSAtMTE3IDI4NSAtODQgMTgyIC0xNTggMzE4IC0yODMgNTE5IC05NSAxNTEgLTMwMCA0MDIgLTQ4NyA1OTUgLTM4IDM4IC02OCA3MyAtNjggNzggMCAyMCA1NyAzIDE4MSAtNTJ6IG0tMTQyMTIgLTI4MjQgYzcgLTggMTcgLTc1IDIyIC0xNDggNSAtNzMgMTQgLTE0OSAxOSAtMTY4IDUgLTE5IDE2IC04NiAyNSAtMTQ5IDkgLTYzIDIxIC0xMjYgMjYgLTE0MCA2IC0xNCAxNyAtNTMgMjQgLTg2IDI1IC0xMDggOTMgLTMxMyAxNDUgLTQzNSAxNyAtNDEgMzcgLTkxIDQ1IC0xMTAgNTkgLTE1MyAyNTYgLTQ4OSAzNzQgLTY0MCAxMTYgLTE0NyAyNDEgLTI4OCAzMTcgLTM1NyAxNzMgLTE1NyAyMTcgLTIwMyAxOTYgLTIwMyAtMTEgMCAtMzMgNiAtNDkgMTQgLTE1IDggLTU1IDI0IC04OCAzNiAtMTQ0IDU0IC00NjcgMjA2IC02NTUgMzA4IC0zMCAxNyAtNzMgNDAgLTk1IDUxIC0yMiAxMiAtNTggMzEgLTgwIDQ0IC0yMiAxMyAtNTcgMzMgLTc4IDQ1IC02NiAzOCAtMTY5IDEwMyAtMjkyIDE4NSAtNTg4IDM5MSAtOTgyIDc3MSAtMTI1MiAxMjEyIC0xOSAzMCAtODcgMTczIC0xMTMgMjM1IC0xMiAzMCAtMjggNzAgLTM2IDg3IC0xNiA0MCAtNDQgMTU2IC00NCAxODcgMCAxMiA1IDI3IDEyIDM0IDkgOSAxOTggMTIgNzg5IDEyIDY2MSAwIDc3OCAtMiA3ODggLTE0eiBtMjQ0MiAtMiBjOCAtMTAgMTggLTY5IDI1IC0xNDggMzAgLTMyNyA4MiAtNjA1IDE2MCAtODU2IDQyIC0xMzMgOTIgLTI4NCAxMTIgLTMzNSAxMSAtMjcgMzAgLTc1IDQyIC0xMDUgMTIgLTMwIDI5IC03MyAzOSAtOTUgMTAgLTIyIDI5IC02NSA0MiAtOTUgMzIgLTcyIDE0OSAtMjk3IDE4NSAtMzU1IDY0IC0xMDIgMjEzIC0zMjQgMjU5IC0zODUgMjUwIC0zMzEgNjcyIC03MjIgOTg1IC05MTUgNDQgLTI3IDk3IC02MiAxMTcgLTc3IDIwIC0xNiA0NCAtMjggNTQgLTI4IDEwIDAgMjEgLTUgMjQgLTEwIDExIC0xOCAtMjcgLTI0IC02OSAtMTEgLTIzIDcgLTg0IDIxIC0xMzYgMzEgLTUyIDEwIC0xMTMgMjMgLTEzNSAyOSAtMjIgNiAtMTA1IDI3IC0xODUgNDYgLTE0NSAzNiAtMjU4IDY2IC0zODAgMTAzIC0zNiAxMSAtMTAzIDMyIC0xNTAgNDYgLTQ3IDE0IC0xMjMgMzkgLTE3MCA1NiAtNDcgMTcgLTExMCAzOSAtMTQwIDUwIC02MSAyMSAtMTU4IDU3IC0yMzUgODggLTI3IDExIC03MiAyOSAtMTAwIDQwIC0xNDcgNTkgLTMyNSAxNDUgLTU4MCAyODIgLTI5NSAxNTcgLTYzMyA0MDcgLTg1MiA2MjkgLTc0IDc1IC0yMTggMjQzIC0yNjcgMzExIC0yMjEgMzA4IC0zNTQgNTY0IC00NTggODgwIC02MSAxODMgLTg1IDI2NyAtOTMgMzIwIC0zIDI1IC0xMyA2OCAtMjAgOTUgLTggMjggLTI0IDEyNiAtMzUgMjE4IC0yMCAxNjAgLTIwIDE3MCAtNCAxODggMTcgMTggNDYgMTkgOTg0IDE5IDg3NyAwIDk2OSAtMiA5ODEgLTE2eiBtMTIwMTcgLTkxOSBjMjEgLTggMTEgLTY5IC0yMyAtMTQyIC0xMzggLTI5OSAtMjU5IC00OTMgLTQ1MSAtNzI4IC0xNDYgLTE3OSAtNDEyIC00MzIgLTU1OCAtNTMwIC0xNiAtMTEgLTQxIC0yOSAtNTYgLTQwIC0xNSAtMTEgLTY4IC00NiAtMTE2IC03OSAtNDkgLTMyIC0xMDAgLTY2IC0xMTQgLTc1IC0xNCAtMTAgLTUyIC0zMiAtODUgLTUxIC0zMyAtMTggLTY3IC0zOSAtNzYgLTQ3IC0xNyAtMTQgLTQ4MCAtMjQ5IC01MzQgLTI3MCAtMTYgLTcgLTUwIC0yMSAtNzUgLTMxIC0yNSAtMTEgLTc5IC0zNCAtMTIwIC01MSAtNDEgLTE4IC05NyAtNDEgLTEyNSAtNTEgLTI3IC0xMCAtODEgLTMwIC0xMjAgLTQ1IC0xOTMgLTcyIC0zODEgLTEzMiAtNjQ1IC0yMDQgLTYzIC0xNyAtMTQ2IC00MCAtMTg1IC01MSAtMTA0IC0yOSAtMjQxIC02MiAtMzIwIC03NSAtMzggLTcgLTEwNCAtMjEgLTE0NiAtMzAgLTcyIC0xNyAtMTI5IC0xNSAtMTI5IDQgMCA1IDI0IDIwIDUzIDM1IDIyMSAxMDkgNTkwIDM4NyA4MTUgNjE1IDI1MyAyNTYgNDA4IDQ2MCA2MjkgODI2IDcgMTEgMzMgNjEgNTkgMTEwIDI1IDUwIDUwIDk1IDU0IDEwMCAxMCAxNCAxMTIgMjQ3IDE0MCAzMjAgMTMgMzMgMzAgODAgNDAgMTA1IDIwIDUyIDYwIDE4MSA5MSAyOTMgMTIgNDMgMzAgODQgMzkgOTAgMTMgOSAyNDggMTIgOTgwIDEwIDUzMCAtMSA5NzAgLTUgOTc4IC04eiBtMTc5NyAzIGMzIC0zIC0yIC0yMiAtMTEgLTQzIC0xMCAtMjQgLTg4IC0xMTAgLTIyMiAtMjQ0IC0yNjcgLTI2NyAtNDEwIC0zODUgLTY5MSAtNTc2IC0xNzcgLTEyMCAtMjExIC0xNDEgLTQ4MSAtMjk4IC01NCAtMzEgLTM2NSAtMTg4IC00NTkgLTIzMSAtMjAxIC05MiAtMzM4IC0xNDUgLTM3OCAtMTQ2IC0yNyAwIC0xMSAzNCAzNSA3NCAyMDYgMTc4IDQxMSA0MDkgNTQ2IDYxNiA4MCAxMjIgOTIgMTQxIDEzOSAyMjUgMzkgNzAgMTQ1IDI4NCAxNjggMzQwIDI5IDcwIDY3IDE3NSA3MyAyMDAgMTAgNDAgMzMgNzUgNTYgODMgMjEgOCAxMjE4IDggMTIyNSAweiIvPiA8L2c+PC9nPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNTM5LjM3NywyMjAuMDAwKSI+PGcgZmlsbD0iY3VycmVudENvbG9yIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMzQuMTgxOCw1NDYuMTgxOCkgc2NhbGUoMC43MjcyNzMsLTAuNzI3MjczKSI+PHBhdGggZD0iTTQxOS4wIC0xOVEzMTkuNSAtMTkuMCAyNDguNzUgMTUuNzVRMTc4LjAgNTAuNSAxMzMuNSAxMDYuNzVRODkuMCAxNjMgNjguMCAyMjguNzVRNDcuMCAyOTQuNSA0Ny4wIDM1NlYzNzhRNDcuMCA0NDUuNSA2OC41IDUxMS43NVE5MC4wIDU3OCAxMzQuNzUgNjMyLjBRMTc5LjUgNjg2LjAgMjQ5LjAgNzE4LjVRMzE4LjUgNzUxLjAgNDEzLjUgNzUxLjBRNTEyLjUgNzUxLjAgNTg2LjI1IDcxNS4yNVE2NjAuMCA2NzkuNSA3MDQuMCA2MTUuMjVRNzQ4LjAgNTUxIDc1Ni41IDQ2NS4wSDYxMy41UTYwNi4wIDUxNSA1NzguNSA1NDkuMjVRNTUxLjAgNTgzLjUgNTA4Ljc1IDYwMS4yNVE0NjYuNSA2MTkuMCA0MTMuNSA2MTkuMFEzNTkuNSA2MTkuMCAzMTcuNzUgNjAwLjI1UTI3Ni4wIDU4MS41IDI0OC4wIDU0Ny41UTIyMC4wIDUxMy41IDIwNS41IDQ2Ny41UTE5MS4wIDQyMS41IDE5MS4wIDM2NlExOTEuMCAzMTIgMjA1LjUgMjY2LjBRMjIwLjAgMjIwIDI0OS4wIDE4NS41UTI3OC4wIDE1MSAzMjAuNSAxMzIuMFEzNjMuMCAxMTMgNDE5LjAgMTEzUTUwMS4wIDExMyA1NTcuMjUgMTUzLjVRNjEzLjUgMTk0LjAgNjI1LjUgMjY3LjBINzY4LjVRNzU5LjAgMTg4LjUgNzE1Ljc1IDEyMy41UTY3Mi41IDU4LjUgNTk3Ljc1IDE5Ljc1UTUyMy4wIC0xOSA0MTkuMCAtMTlaIE05NDkuMCAwVjczNUgxMDkxLjBWMFpNMTM5NC41IDAuMCAxMTcxLjAgMzE3LjVIMTMyOS41TDE1NjEuMCAwWk0xMDQ5LjAgMjQ0VjM1OUgxMjM0LjVRMTI3NC4wIDM1OSAxMzAyLjUgMzc1LjBRMTMzMS4wIDM5MSAxMzQ2Ljc1IDQxOS43NVExMzYyLjUgNDQ4LjUgMTM2Mi41IDQ4Ni4wUTEzNjIuNSA1MjQuMCAxMzQ2Ljc1IDU1Mi43NVExMzMxLjAgNTgxLjUgMTMwMi41IDU5Ny43NVExMjc0LjAgNjE0IDEyMzQuNSA2MTQuMEgxMDQ5LjBWNzM1SDEyMjAuMFExMzA3LjUgNzM1LjAgMTM3Mi4wIDcwOC43NVExNDM2LjUgNjgyLjUgMTQ3MS41IDYyOS43NVExNTA2LjUgNTc3LjAgMTUwNi41IDQ5Ni41VjQ4MC41UTE1MDYuNSA0MDAuMCAxNDcxLjAgMzQ3Ljc1UTE0MzUuNSAyOTUuNSAxMzcxLjUgMjY5Ljc1UTEzMDcuNSAyNDQuMCAxMjIwLjAgMjQ0WiBNMTczMS4wIDBWNzMwSDE4NzMuMFYwWiBNMjI1OS4wIDBWNjI1SDI0MDEuMFYwWk0yMDQ4LjAgNjA1VjczMEgyNjEyLjBWNjA1WiBNMjc4NS4wIDBWNzMwSDI5MjQuMFYwWk0yOTA0LjAgMFYxMjBIMzIzNS4wVjBaTTI5MDQuMCAzMTFWNDMxSDMyMDkuMFYzMTFaTTI5MDQuMCA2MTBWNzMwSDMyMjcuMFY2MTBaIE0zNDQxLjAgMFY3MzVIMzU4My4wVjBaTTM4ODYuNSAwLjAgMzY2My4wIDMxNy41SDM4MjEuNUw0MDUzLjAgMFpNMzU0MS4wIDI0NFYzNTlIMzcyNi41UTM3NjYuMCAzNTkgMzc5NC41IDM3NS4wUTM4MjMuMCAzOTEgMzgzOC43NSA0MTkuNzVRMzg1NC41IDQ0OC41IDM4NTQuNSA0ODYuMFEzODU0LjUgNTI0LjAgMzgzOC43NSA1NTIuNzVRMzgyMy4wIDU4MS41IDM3OTQuNSA1OTcuNzVRMzc2Ni4wIDYxNCAzNzI2LjUgNjE0LjBIMzU0MS4wVjczNUgzNzEyLjBRMzc5OS41IDczNS4wIDM4NjQuMCA3MDguNzVRMzkyOC41IDY4Mi41IDM5NjMuNSA2MjkuNzVRMzk5OC41IDU3Ny4wIDM5OTguNSA0OTYuNVY0ODAuNVEzOTk4LjUgNDAwLjAgMzk2My4wIDM0Ny43NVEzOTI3LjUgMjk1LjUgMzg2My41IDI2OS43NVEzNzk5LjUgMjQ0LjAgMzcxMi4wIDI0NFogTTQyMjMuMCAwVjczMEg0MzY1LjBWMFogTTQ5MDcuNSAtMTkuMFE0ODA1LjUgLTE5LjAgNDczNS41IDE5Ljc1UTQ2NjUuNSA1OC41IDQ2MjkuMjUgMTI5LjBRNDU5My4wIDE5OS41IDQ1OTMuMCAyOTQuNVY3MzBINDczNS4wVjI4Ni41UTQ3MzUuMCAyMzQuNSA0NzU1LjAgMTk1LjI1UTQ3NzUuMCAxNTYgNDgxMy41IDEzNC41UTQ4NTIuMCAxMTMgNDkwNy41IDExMy4wUTQ5NjMuMCAxMTMgNTAwMS4yNSAxMzQuMjVRNTAzOS41IDE1NS41IDUwNTkuMjUgMTk0LjVRNTA3OS4wIDIzMy41IDUwNzkuMCAyODYuNVY3MzBINTIyMS4wVjI5NC41UTUyMjEuMCAxOTkuNSA1MTg1LjI1IDEyOS4wUTUxNDkuNSA1OC41IDUwNzkuNzUgMTkuNzVRNTAxMC4wIC0xOSA0OTA3LjUgLTE5LjBaIE01NDQ3LjAgMFY3MzBINTY0MS4wTDU4MjQuMCAyOTRINTg0Mi4wTDYwMjQuMCA3MzBINjIyMS4wVjBINjA4MC4wVjYyM0w2MDk4LjAgNjIxTDU5MDAuNSAxNDkuMEg1NzU2LjBMNTU1Ny41IDYyMS4wTDU1NzcuMCA2MjNWMFoiLz48L2c+PC9nPjwvc3ZnPg==");
  --crm-snap: cubic-bezier(0.16, 1, 0.3, 1);
  --crm-curva: cubic-bezier(0.65, 0, 0.35, 1);
  --crm-t-pulsar: 80ms;
  --crm-t-color: 120ms;
  --crm-t-salida: 120ms;
  --crm-t-gesto: 160ms;
  --crm-t-entrada: 180ms;
  --crm-t-panel: 240ms;
  --crm-t-capa: 320ms;
  --crm-t-dibujo: 600ms;
  --crm-t-retardo: 300ms;
  --crm-t-tostada: 5000ms;
  --crm-t-latido: 2400ms;
  --crm-t-filo: 1600ms;
  --crm-t-corriente: 1200ms;
  --crm-t-barrido: 1600ms;
  --crm-t-giro: 800ms;
  --crm-t-confirmar: 3000ms;
  --crm-t-escalon: 24ms;
  --crm-placa-fondo: #ffffff;
  --crm-placa-tinta: #111111;
  --crm-placa-azul: #003399;
  --crm-placa-estrella: #ffcc00;
  --crm-placa-letra-ue: #ffffff;
  --crm-placa-apagado: #5c5c5c;
  --crm-papel-devuelto: #b42318;
  --crm-papel-cobrado: #11663c;
  --crm-fv-dgt-azul: #009ee0;
  --crm-fv-dgt-verde: #00a651;
  --crm-fv-dgt-amarillo: #ffed00;
  --crm-fv-dgt-tinta: #111111;
  --crm-rejilla: color-mix(in oklab, var(--crm-line) 50%, var(--crm-line-2));
}

/*
 * Papel: al imprimir, las piezas de lectura (el Parte del día, `.crm-papel`)
 * salen siempre con los valores del tema claro: tinta oscura sobre blanco. No
 * cambia ningún token en pantalla.
 */
@media print {
  .crm-parte,
  .crm-papel {
    color-scheme: light;
    --crm-bg: #f6f5f2;
    --crm-panel: #ffffff;
    --crm-panel-2: #f0eee9;
    --crm-panel-3: #e8e5df;
    --crm-line: #e3e0da;
    --crm-line-2: #cfcac2;
    --crm-control: #8d877e;
    --crm-linea-apagada: #b9b4ad;
    --crm-text: #121110;
    --crm-text-2: #33302c;
    --crm-muted: #5b5752;
    --crm-dim: #69655e;
    --crm-acento: #117343;
    --crm-acento-2: #0e6338;
    --crm-acento-suave: rgb(17 115 67 / 0.09);
    --crm-acento-linea: #4aa16e;
    --crm-sobre-acento: #ffffff;
    --crm-luz: #1b9a5c;
    --crm-error: #a8412a;
    --crm-error-suave: rgb(168 65 42 / 0.08);
    --crm-error-linea: #e07155;
    --crm-aviso: #8a580e;
    --crm-aviso-suave: rgb(138 88 14 / 0.09);
    --crm-aviso-linea: #bf853e;
    --crm-boton: #121110;
    --crm-boton-tinta: #fafafa;
    --crm-velo: rgb(246 245 242 / 0.86);
    --crm-telon: rgb(246 245 242 / 0.72);
    --crm-sombra: 0 0 0 1px rgb(40 32 24 / 0.06), 0 24px 64px rgb(40 32 24 / 0.14);
    --crm-sombra-capa: 0 0 0 1px rgb(40 32 24 / 0.06), 0 8px 24px rgb(40 32 24 / 0.1);
    --crm-sombra-hundida: inset 0 1px 2px rgb(40 32 24 / 0.06);
    --crm-seleccion: rgb(17 115 67 / 0.18);
    --crm-esqueleto-a: #efede8;
    --crm-esqueleto-b: #e4e1da;
    --crm-acento-halo: rgb(17 115 67 / 0.22);
    --crm-serie-1: #564f47;
    --crm-serie-2: #ab7a3e;
    --crm-serie-3: #a15141;
    --crm-serie-4: #699273;
    --crm-serie-5: #7c5777;
    --crm-serie-6: #928a83;
    --crm-serie-comparacion: var(--crm-muted);
    --crm-serie-reposo: #8d877e;
    --crm-serie-destacada: var(--crm-acento);
    --crm-sobre-serie-1: #ffffff;
    --crm-calor-tinta-3: var(--crm-text);
    --crm-foco-ancho: 1px;
    --crm-pie-fondo: #eeebe5;
    --crm-pie-lockup: #c3beb7;
    --crm-pie-apellido: #38905e;
    --crm-ascii-reposo: #5c554b;
    --crm-ascii-luz: var(--crm-acento);
    --crm-apagado: 0.32;
  }
}

/*
 * Colores forzados (Windows, alto contraste del sistema): los tokens pasan a
 * los colores del sistema y el foco a 2 px, en todos los temas.
 */
@media (forced-colors: active) {
  :root,
  [data-crm-tema] {
    --crm-bg: Canvas;
    --crm-panel: Canvas;
    --crm-panel-2: Canvas;
    --crm-panel-3: Canvas;
    --crm-line: CanvasText;
    --crm-line-2: CanvasText;
    --crm-control: CanvasText;
    --crm-linea-apagada: GrayText;
    --crm-text: CanvasText;
    --crm-text-2: CanvasText;
    --crm-muted: CanvasText;
    --crm-dim: GrayText;
    --crm-acento: Highlight;
    --crm-acento-2: Highlight;
    --crm-acento-suave: Canvas;
    --crm-acento-linea: Highlight;
    --crm-sobre-acento: HighlightText;
    --crm-luz: Highlight;
    --crm-error: CanvasText;
    --crm-error-linea: CanvasText;
    --crm-aviso: CanvasText;
    --crm-aviso-linea: CanvasText;
    --crm-boton: ButtonText;
    --crm-boton-tinta: ButtonFace;
    --crm-seleccion: Highlight;
    --crm-sombra: none;
    --crm-sombra-capa: none;
    --crm-sombra-hundida: none;
    --crm-acento-halo: transparent;
    --crm-esqueleto-a: Canvas;
    --crm-esqueleto-b: GrayText;
    --crm-foco-ancho: 2px;
    --crm-pie-fondo: Canvas;
    --crm-pie-lockup: GrayText;
    --crm-pie-apellido: Highlight;
    --crm-ascii-reposo: GrayText;
    --crm-ascii-luz: Highlight;
  }
}

/*
 * Reglas globales del sistema de marca: el ÚNICO sitio con reglas que no
 * son de una pieza (FUNDAMENTOS §7.1). Todas van con :where(), es decir, con
 * especificidad 0: cualquier pieza las sustituye en su propia hoja sin pelear
 * por el orden de los ficheros. Ninguna hoja de familia pone reglas globales.
 */

:where(.crm-raiz, .crm-capa) {
  color: var(--crm-text);
  font-family: var(--crm-sans);
  -webkit-font-smoothing: antialiased;
}

:where(.crm-raiz) {
  background: var(--crm-bg);
}

/*
 * La página que monta la marca (ScriptTema pone el tema en <html>) tiene el
 * fondo del tema desde el primer pintado, también mientras carga: sin
 * destello blanco del <body> del anfitrión.
 */
:where(html[data-crm-tema]),
:where(html[data-crm-tema]) :where(body) {
  background: var(--crm-bg);
}

/*
 * Aislamiento del anfitrión (10-oct-2026). Una web que da tipografía a los
 * elementos (`h2 { font-family: Montserrat }`, `p, span { line-height: 1.65 }`,
 * casi siempre en `@layer base`) se la daba también a las piezas que heredan
 * la suya. Dentro de la marca, los elementos heredan de su pieza: estas
 * reglas no tienen capa, así que ganan a las del anfitrión con capa, y con
 * :where() pesan 0, así que cualquier pieza las sustituye.
 */
:where(.crm-raiz, .crm-capa) :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, span, label, input, textarea, select, button, a, blockquote) {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

/* Lo que el navegador pinta solo también es de la casa: selección y barras de desplazamiento. */
/* Un pseudoelemento no vale dentro de :where() ni :is() (Selectors 4 §4.2): ahí la lista lo olvida y la regla
   no pinta nada. Va fuera; su especificidad propia (0,0,1) es la mínima posible. */
:where(.crm-raiz, .crm-capa) ::selection {
  background: var(--crm-seleccion);
  color: var(--crm-text);
}

:where(.crm-raiz, .crm-capa) :where(*) {
  scrollbar-color: var(--crm-line-2) transparent;
  scrollbar-width: thin;
}

/*
 * Unidades (FUNDAMENTOS §3, D29): «€/MWh», «kWh», «ms» o «h» nunca se
 * transforman. Dentro de un rótulo en mayúsculas (cabecera de columna,
 * eyebrow, clave de par), `<span class="crm-unidad">` las conserva tal cual.
 */
:where(.crm-unidad) {
  text-transform: none;
}

/*
 * Foco (FUNDAMENTOS §7). Por defecto, el de un CONTROL: un solo anillo de
 * --crm-foco-ancho (1 px; 2 px en contraste) separado 2 px. Los campos lo
 * sustituyen por su borde de acento; las filas y celdas de contenedores que
 * recortan, por el mismo anillo hacia dentro (offset −1). Cada pieza lo
 * declara en su hoja; esto es solo la base.
 */
:where(.crm-marca, .crm-raiz, .crm-marco, .crm-capa, .crm-pie, .crm-gr, .crm-gr-marco, .crm-gr-ampliado, .crm-tabla, .crm-kpi, .crm-ficha, .crm-linea, .crm-lista, .crm-kanban, .crm-agenda, .crm-dato-vacio) :where(:focus-visible) {
  outline: var(--crm-foco-ancho) solid var(--crm-acento);
  outline-offset: 2px;
}

/*
 * Un contenedor que recibe el foco por programa (tabIndex=-1: el <main> tras
 * navegar, una capa recién abierta, una región) no lleva anillo nunca. Los
 * ítems de colección con tabIndex=-1 (filas, opciones, celdas, pestañas)
 * siguen con el suyo: se excluyen por su rol.
 */
:where(.crm-marca, .crm-raiz, .crm-marco, .crm-capa) :where([tabindex="-1"]:not(a, button, input, select, textarea, summary, [role="button"], [role="link"], [role="option"], [role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="tab"], [role="row"], [role="gridcell"], [role="cell"], [role="treeitem"], [role="radio"], [role="checkbox"], [role="switch"], [role="slider"]):focus) {
  outline: none;
}

/*
 * Familia «controles» del sistema de marca Criterium.
 * Medidas: docs/marca/FUNDAMENTOS.md (cada número es ley). Gramática:
 * docs/marca/GRAMATICA.md. Solo variables --crm-*; radio 0; filetes de 1 px;
 * un solo anillo de foco (1 px de acento a 2 px); el deshabilitado es
 * contorno; hover solo en punteros que lo tienen; y todo lo que se mueve se
 * calla con prefers-reduced-motion.
 *
 * Escala de controles (alto · relleno · separación icono–texto · letra · icono):
 *   mini      24 ·  8 · 6 · 12 · 14
 *   compacto  28 · 10 · 6 · 13 · 14
 *   normal    32 · 12 · 8 · 13 · 16   ← por defecto en panel
 *   grande    40 · 16 · 8 · 14 · 16
 *
 * Tiempos: 80 pulsar · 120 color · 160 gesto · 180 entrada de capa · 120 salida.
 * (Van en literal hasta que 00-temas.css tenga los tokens --crm-t-*: ver informe.)
 */

:where(
    .crm-boton,
    .crm-grupo-botones,
    .crm-ctl-campo,
    .crm-entrada,
    .crm-selector-lista,
    .crm-opcion,
    .crm-conmutador,
    .crm-etiqueta,
    .crm-estado,
    .crm-contador,
    .crm-tecla,
    .crm-teclas,
    .crm-avatar,
    .crm-aviso,
    .crm-tostadas,
    .crm-vacio,
    .crm-esqueleto,
    .crm-cargando
  ),
/* Los pseudoelementos, fuera de :where() (ver 05-base.css): dentro, la lista los olvida. */
:where(.crm-boton, .crm-grupo-botones, .crm-ctl-campo, .crm-entrada, .crm-selector-lista, .crm-opcion, .crm-conmutador, .crm-etiqueta, .crm-estado, .crm-aviso, .crm-tostadas, .crm-vacio) *,
:where(.crm-boton, .crm-grupo-botones, .crm-ctl-campo, .crm-entrada, .crm-selector-lista, .crm-opcion, .crm-conmutador, .crm-etiqueta, .crm-estado, .crm-aviso, .crm-tostadas, .crm-vacio) ::before,
:where(.crm-boton, .crm-grupo-botones, .crm-ctl-campo, .crm-entrada, .crm-selector-lista, .crm-opcion, .crm-conmutador, .crm-etiqueta, .crm-estado, .crm-aviso, .crm-tostadas, .crm-vacio) ::after {
  box-sizing: border-box;
}

/* ── Anillo de foco único ───────────────────────────────────────────── */
.crm-boton:focus-visible,
.crm-casilla:focus-visible,
.crm-radio:focus-visible,
.crm-interruptor:focus-visible,
.crm-entrada-accion:focus-visible,
.crm-etiqueta-quitar:focus-visible,
.crm-aviso-cerrar:focus-visible,
.crm-tostada-accion:focus-visible,
.crm-tostada-cerrar:focus-visible,
.crm-pestana-panel:focus-visible,
.crm-zona-archivo-nombre[data-cortado]:focus-visible {
  outline: var(--crm-foco-ancho) solid var(--crm-acento);
  outline-offset: 2px;
}

/* ══ Botón ═══════════════════════════════════════════════════════════ */
.crm-boton {
  --crm-boton-alto: 32px;
  --crm-boton-relleno: 12px;
  --crm-boton-icono: 16px;
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--crm-boton-alto);
  min-height: var(--crm-boton-alto);
  margin: 0;
  padding: 0 var(--crm-boton-relleno);
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--crm-text);
  font-family: var(--crm-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.005em;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    background-color var(--crm-t-color) ease-out,
    border-color var(--crm-t-color) ease-out,
    color var(--crm-t-color) ease-out,
    transform var(--crm-t-pulsar) var(--crm-snap);
}

.crm-boton[data-tamano="mini"] {
  --crm-boton-alto: 24px;
  --crm-boton-relleno: 8px;
  --crm-boton-icono: 14px;
  gap: 6px;
  font-size: 12px;
  line-height: 16px;
}

.crm-boton[data-tamano="compacto"] {
  --crm-boton-alto: 28px;
  --crm-boton-relleno: 10px;
  --crm-boton-icono: 14px;
  gap: 6px;
}

.crm-boton[data-tamano="grande"] {
  --crm-boton-alto: 40px;
  --crm-boton-relleno: 16px;
  font-size: 14px;
}

/* Táctil (48 · 16 · 8 · 15 · 16): solo modo foco y momentos de marca (FUNDAMENTOS §2). */
.crm-boton[data-tamano="tactil"] {
  --crm-boton-alto: 48px;
  --crm-boton-relleno: 16px;
  font-size: 15px;
  line-height: 24px;
}

/* Alineación óptica: el icono de Lucide trae aire propio; el lado que lo lleva recorta 2 px (4 en grande). */
.crm-boton:not(.crm-boton-solo-icono):has(> .crm-boton-icono:first-child) {
  padding-left: calc(var(--crm-boton-relleno) - 2px);
}

.crm-boton:not(.crm-boton-solo-icono):has(> .crm-boton-icono:last-child) {
  padding-right: calc(var(--crm-boton-relleno) - 2px);
}

.crm-boton[data-tamano="grande"]:not(.crm-boton-solo-icono):has(> .crm-boton-icono:first-child) {
  padding-left: 12px;
}

.crm-boton[data-tamano="grande"]:not(.crm-boton-solo-icono):has(> .crm-boton-icono:last-child) {
  padding-right: 12px;
}

/*
 * Un icono que llega como hijo del botón (no por `icono`) obedece igual al
 * tamaño del control (14/16) y a su trazo (D15: Lucide por defecto pinta 24
 * dentro de un botón de 32). Su lado recorta los mismos 2 px.
 */
.crm-boton > svg {
  flex: none;
  width: var(--crm-boton-icono);
  height: var(--crm-boton-icono);
  stroke-width: 1.6;
}

.crm-boton:is([data-tamano="mini"], [data-tamano="compacto"]) > svg {
  stroke-width: 1.5;
}

.crm-boton:not(.crm-boton-solo-icono):has(> svg:first-child) {
  padding-left: calc(var(--crm-boton-relleno) - 2px);
}

.crm-boton[data-tamano="grande"]:not(.crm-boton-solo-icono):has(> svg:first-child) {
  padding-left: 12px;
}

.crm-boton[data-completo] {
  display: flex;
  width: 100%;
}

/* El texto no se sale nunca del botón: elipsis y, en el componente, consejo con el texto entero. */
.crm-boton {
  max-width: 100%;
}

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

/* Acento contado (OFICIO F3): el verde relleno nunca ocupa todo el ancho en escritorio; solo en móvil. */
@media (min-width: 601px) {
  .crm-boton[data-variante="acento"][data-completo] {
    display: inline-flex;
    width: auto;
    min-width: 160px;
  }
}

.crm-boton-icono {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: var(--crm-boton-icono);
  height: var(--crm-boton-icono);
}

.crm-boton-icono svg {
  width: var(--crm-boton-icono);
  height: var(--crm-boton-icono);
  stroke-width: 1.6;
}

.crm-boton[data-tamano="mini"] .crm-boton-icono svg,
.crm-boton[data-tamano="compacto"] .crm-boton-icono svg {
  stroke-width: 1.5;
}

.crm-boton-icono[data-flecha] svg {
  transition: transform var(--crm-t-gesto) var(--crm-snap);
}

/* Atajo visible dentro del botón (a la manera de Raycast). */
.crm-boton-atajo {
  margin-right: -4px;
}

.crm-boton[data-tamano="mini"] .crm-boton-atajo {
  margin-right: -2px;
}

/* Principal: la acción de la vista, una por vista. */
.crm-boton[data-variante="principal"] {
  border-color: var(--crm-boton);
  background: var(--crm-boton);
  color: var(--crm-boton-tinta);
}

/* Firma: la acción de los momentos de marca (acceso, Vista Agente). Mono en mayúsculas. */
.crm-boton[data-variante="firma"] {
  border-color: var(--crm-boton);
  background: var(--crm-boton);
  color: var(--crm-boton-tinta);
  font-family: var(--crm-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crm-boton[data-variante="firma"][data-tamano="mini"] {
  font-size: 11px;
}

/* Acento: confirmar o aprobar lo que decide una persona. */
.crm-boton[data-variante="acento"] {
  border-color: var(--crm-acento);
  background: var(--crm-acento);
  color: var(--crm-sobre-acento);
}

/* Secundario: filete de control. */
.crm-boton[data-variante="secundario"] {
  border-color: var(--crm-line-2);
  background: var(--crm-panel);
}

/* Fantasma: solo texto, para barras y filas densas. */
.crm-boton[data-variante="fantasma"] {
  color: var(--crm-text-2);
}

/* Peligro: lo irreversible. Coral y contorno; nunca un bloque rojo. */
.crm-boton[data-variante="peligro"] {
  border-color: var(--crm-error-linea);
  color: var(--crm-error);
}

/* Pulsado de conmutación (aria-pressed): un escalón arriba, texto pleno. */
.crm-boton[aria-pressed="true"]:is([data-variante="secundario"], [data-variante="fantasma"]) {
  border-color: var(--crm-line-2);
  background: var(--crm-panel-3);
  color: var(--crm-text);
}

@media (hover: hover) {
  .crm-boton:hover .crm-boton-icono[data-flecha] svg {
    transform: translateX(2px);
  }

  .crm-boton[data-variante="principal"]:hover {
    border-color: color-mix(in oklab, var(--crm-boton) 88%, var(--crm-bg));
    background: color-mix(in oklab, var(--crm-boton) 88%, var(--crm-bg));
  }

  /* La firma pasa a verde al pasar, como el acceso y la Vista Agente. */
  .crm-boton[data-variante="firma"]:hover {
    border-color: var(--crm-acento);
    background: var(--crm-acento);
    color: var(--crm-sobre-acento);
  }

  .crm-boton[data-variante="acento"]:hover {
    border-color: var(--crm-acento-2);
    background: var(--crm-acento-2);
  }

  .crm-boton[data-variante="secundario"]:hover {
    border-color: var(--crm-control);
    background: var(--crm-panel-2);
  }

  .crm-boton[data-variante="fantasma"]:hover {
    background: var(--crm-panel-2);
    color: var(--crm-text);
  }

  .crm-boton[data-variante="peligro"]:hover {
    border-color: var(--crm-error);
    background: var(--crm-error-suave);
  }
}

/* Pulsado: un escalón más y medio píxel abajo, en 80 ms. También en táctil. */
.crm-boton:active:not([data-deshabilitado], [data-cargando]) {
  transform: translateY(0.5px);
  transition-duration: var(--crm-t-pulsar);
}

.crm-boton[data-variante="secundario"]:active:not([data-deshabilitado], [data-cargando]),
.crm-boton[data-variante="fantasma"]:active:not([data-deshabilitado], [data-cargando]) {
  background: var(--crm-panel-3);
}

.crm-boton[data-variante="principal"]:active:not([data-deshabilitado], [data-cargando]) {
  border-color: color-mix(in oklab, var(--crm-boton) 78%, var(--crm-bg));
  background: color-mix(in oklab, var(--crm-boton) 78%, var(--crm-bg));
}

.crm-boton[data-variante="firma"]:active:not([data-deshabilitado], [data-cargando]),
.crm-boton[data-variante="acento"]:active:not([data-deshabilitado], [data-cargando]) {
  border-color: var(--crm-acento-2);
  background: var(--crm-acento-2);
  color: var(--crm-sobre-acento);
}

.crm-boton[data-variante="peligro"]:active:not([data-deshabilitado], [data-cargando]) {
  background: var(--crm-error-suave);
}

/* Deshabilitado: contorno, no bloque gris; ni hover ni flecha. */
.crm-boton[data-deshabilitado],
.crm-boton[data-deshabilitado]:hover,
.crm-boton[data-deshabilitado]:active {
  border-color: var(--crm-linea-apagada);
  background: transparent;
  color: var(--crm-dim);
  cursor: not-allowed;
}

.crm-boton[data-variante="fantasma"][data-deshabilitado] {
  border-color: transparent;
}

.crm-boton[data-deshabilitado] .crm-boton-icono[data-flecha] svg {
  transform: none;
}

/*
 * Enlace: una acción en línea dentro de un texto, una nota o una fila
 * («Detalle», «Ver selección»). Es un <button> de verdad (o un <a> con
 * asChild) sin caja: hereda la letra de donde va, sin alto ni relleno, y se
 * reconoce por un subrayado fino; al pasar, el texto sube a primario. El
 * foco es el anillo único; deshabilitado, apagado y sin respuesta.
 */
/* Al tacto, la zona de toque del enlace crece por fuera como la de todo botón pequeño (abajo, hasta 44): la línea no se mueve. */
.crm-boton[data-variante="enlace"] {
  --crm-boton-alto: 16px;
  --crm-boton-icono: 14px;
  gap: 6px;
  max-width: 100%;
  height: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  color: var(--crm-text-2);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--crm-line-2);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  vertical-align: baseline;
}

.crm-boton[data-variante="enlace"]:not(.crm-boton-solo-icono):has(> .crm-boton-icono) {
  padding: 0;
}

.crm-boton[data-variante="enlace"]:active:not([data-deshabilitado], [data-cargando]) {
  transform: none;
}

@media (hover: hover) {
  .crm-boton[data-variante="enlace"]:not([data-deshabilitado]):hover {
    color: var(--crm-text);
    text-decoration-color: currentColor;
  }
}

.crm-boton[data-variante="enlace"][data-deshabilitado],
.crm-boton[data-variante="enlace"][data-deshabilitado]:hover {
  border: 0;
  text-decoration-color: var(--crm-linea-apagada);
}

/* Cargando: conserva aspecto y ancho; un filo de luz recorre la base sin pausa. */
.crm-boton[data-cargando] {
  cursor: progress;
  pointer-events: auto;
}

.crm-boton[data-cargando]::before {
  content: "";
  position: absolute;
  inset: auto -1px -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--crm-acento) 50%, transparent) no-repeat;
  background-size: 40% 100%;
  background-position: -40% 0;
  animation: crm-filo-continuo var(--crm-t-filo) var(--crm-curva) infinite;
}

.crm-boton[data-variante="principal"][data-cargando],
.crm-boton[data-variante="principal"][data-cargando]:hover,
.crm-boton[data-variante="firma"][data-cargando],
.crm-boton[data-variante="firma"][data-cargando]:hover {
  border-color: var(--crm-boton);
  background: var(--crm-boton);
  color: var(--crm-boton-tinta);
}

.crm-boton[data-variante="acento"][data-cargando]::before {
  background-image: linear-gradient(90deg, transparent, var(--crm-sobre-acento) 50%, transparent);
}

.crm-boton[data-cargando] .crm-boton-icono[data-flecha] svg {
  transform: none;
}

/* El giro ocupa el hueco exacto del icono: el ancho no se mueve. */
.crm-boton-giro {
  display: block;
  width: calc(var(--crm-boton-icono) - 2px);
  height: calc(var(--crm-boton-icono) - 2px);
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  opacity: 0.8;
  animation: crm-ctl-giro var(--crm-t-giro) linear infinite;
}

/* ── Botón de icono: cuadrado 24/28/32/40, icono 14/14/16/16 ─────────── */
.crm-boton.crm-boton-solo-icono {
  width: var(--crm-boton-alto);
  padding: 0;
}

.crm-boton-solo-icono[data-variante="fantasma"] {
  color: var(--crm-muted);
}

/* Al pulsar encoge un 4 % en 80 ms (en lugar de bajar medio píxel). */
.crm-boton-solo-icono:active:not([data-deshabilitado], [data-cargando]) {
  transform: scale(0.96);
}

/* Abierto (menú, desplegable): queda marcado mientras su capa está a la vista. */
.crm-boton-solo-icono[data-variante="fantasma"]:is([data-state="open"], [aria-expanded="true"]) {
  background: var(--crm-panel-3);
  color: var(--crm-text);
}

@media (hover: hover) {
  .crm-boton-solo-icono[data-variante="fantasma"]:hover {
    color: var(--crm-text);
  }
}

/* Táctil: todo botón amplía su zona de toque hasta 44 px sin cambiar de tamaño (el grande, de 40,
   también; RFC 0009). La capa se mide desde la caja de relleno: el −1 px recupera el filete, sin él
   la zona se quedaba en 42. */
@media (pointer: coarse) {
  /*
   * La zona de toque crece hasta 44 en total. En una fila (tr, role=row, li,
   * data-crm-fila) cada lado crece lo que deja su fila: el botón mide la fila
   * y escribe los dos huecos (`--crm-boton-arriba` / `-abajo`, el menor entre
   * (44 − alto) / 2 y la distancia al borde de su fila), así que nunca pisa
   * la vecina, también pegado arriba en una fila de dos líneas. Sin medida
   * (antes del primer efecto, sin JS): la reserva simétrica, acotada por
   * `--crm-toque-max` MENOS su filete (la fila de la Tabla: su alto, con el
   * filete dentro), que centrada cabe en la fila.
   */
  .crm-boton:is([data-tamano="mini"], [data-tamano="compacto"], [data-tamano="normal"], [data-tamano="grande"]) {
    /* +1: la capa se mide desde la caja de relleno; sin recuperar el filete, la zona se quedaba 2 px corta (RFC 0009). */
    --crm-boton-reserva: max(0px, calc((min(44px, calc(var(--crm-toque-max, 45px) - 1px)) - var(--crm-boton-alto)) / 2 + 1px));
  }

  .crm-boton:is([data-tamano="mini"], [data-tamano="compacto"], [data-tamano="normal"], [data-tamano="grande"])::after {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--crm-boton-arriba, var(--crm-boton-reserva))) 0 calc(-1 * var(--crm-boton-abajo, var(--crm-boton-reserva)));
  }

  .crm-boton-solo-icono::after {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--crm-boton-arriba, var(--crm-boton-reserva, 0px))) min(0px, calc((var(--crm-boton-alto) - 44px) / 2)) calc(-1 * var(--crm-boton-abajo, var(--crm-boton-reserva, 0px)));
  }

  /*
   * La zona de toque no se pulsa. El pulsado (§7) baja el botón medio píxel o lo encoge al 96 %, y con él su `::after`:
   * la zona de 44 de un botón de icono pasaba a 42,2 durante los 80 ms de vuelta, y un segundo toque rápido en su
   * borde (abrir y cerrar el detalle) caía en la fila. El `::after` deshace la transformación con la misma
   * transición: el gesto se ve igual y la zona se queda donde está. Con movimiento reducido no hay transformación.
   */
  .crm-boton:is([data-tamano="mini"], [data-tamano="compacto"], [data-tamano="normal"], [data-tamano="grande"])::after {
    transition: transform var(--crm-t-pulsar) var(--crm-snap);
  }

  .crm-boton:is([data-tamano="mini"], [data-tamano="compacto"], [data-tamano="normal"], [data-tamano="grande"]):active:not([data-deshabilitado], [data-cargando])::after {
    transform: translateY(-0.5px);
  }

  .crm-boton.crm-boton-solo-icono:is([data-tamano="mini"], [data-tamano="compacto"], [data-tamano="normal"], [data-tamano="grande"]):active:not([data-deshabilitado], [data-cargando])::after {
    transform: scale(calc(1 / 0.96));
  }

  @media (prefers-reduced-motion: reduce) {
    .crm-boton:is([data-tamano="mini"], [data-tamano="compacto"], [data-tamano="normal"], [data-tamano="grande"])::after,
    .crm-boton:is([data-tamano="mini"], [data-tamano="compacto"], [data-tamano="normal"], [data-tamano="grande"]):active:not([data-deshabilitado], [data-cargando])::after,
    .crm-boton.crm-boton-solo-icono:is([data-tamano="mini"], [data-tamano="compacto"], [data-tamano="normal"], [data-tamano="grande"]):active:not([data-deshabilitado], [data-cargando])::after {
      transform: none;
      transition: none;
    }
  }
}

/* Confirmar en dos pasos (lo irreversible): coral, con la línea de espera que se consume en la base. */
.crm-boton[data-confirmando],
.crm-boton[data-confirmando]:hover {
  border-color: var(--crm-error);
  background: var(--crm-error-suave);
  color: var(--crm-error);
}

.crm-boton[data-confirmando]::before {
  content: "";
  position: absolute;
  inset: auto -1px -1px;
  height: 2px;
  background: var(--crm-error);
  transform-origin: left center;
  animation: crm-ctl-vida var(--crm-confirmar-espera, var(--crm-t-confirmar)) linear forwards;
}

/* Indicador del botón de icono: punto de acento de 6 px en la esquina del glifo (algo espera). */
.crm-boton-solo-icono .crm-boton-icono {
  position: relative;
}

.crm-boton-indicador {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--crm-acento);
  pointer-events: none;
}

/* ── Grupo de botones ──────────────────────────────────────────────── */
.crm-grupo-botones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.crm-grupo-botones[data-alineacion="fin"] {
  justify-content: flex-end;
}

.crm-grupo-botones[data-alineacion="extremos"] {
  justify-content: space-between;
}

.crm-grupo-botones[data-unido] {
  flex-wrap: nowrap;
  gap: 0;
}

.crm-grupo-botones[data-unido] > .crm-boton + .crm-boton {
  margin-left: -1px;
}

.crm-grupo-botones[data-unido] > .crm-boton:hover,
.crm-grupo-botones[data-unido] > .crm-boton:focus-visible,
.crm-grupo-botones[data-unido] > .crm-boton[aria-pressed="true"] {
  z-index: 1;
}

@media (max-width: 30em) {
  .crm-grupo-botones[data-apilar] {
    flex-direction: column;
    align-items: stretch;
  }

  .crm-grupo-botones[data-apilar] > .crm-boton {
    width: 100%;
  }
}

/* ══ Campo ═══════════════════════════════════════════════════════════ */
.crm-ctl-campo {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.crm-ctl-campo-cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

/* Rótulo en frase normal, 13/500: la voz de la interfaz. */
.crm-ctl-rotulo {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: var(--crm-text-2);
  font-family: var(--crm-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.005em;
  text-transform: none;
}

.crm-ctl-rotulo-nota {
  color: var(--crm-dim);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0;
  text-transform: none;
}

/* Ficha densa: el rótulo pasa a mono 11 en mayúsculas (rótulo/valor). */
.crm-ctl-campo[data-variante="ficha"] {
  gap: 4px;
}

.crm-ctl-campo[data-variante="ficha"] > .crm-ctl-campo-cabeza > .crm-ctl-rotulo,
.crm-ctl-campo[data-variante="ficha"] > .crm-ctl-rotulo {
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crm-ctl-campo-extra {
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
}

.crm-ctl-campo-extra a {
  color: var(--crm-text-2);
  text-decoration: underline;
  text-decoration-color: var(--crm-line-2);
  text-underline-offset: 3px;
}

.crm-ctl-campo[data-deshabilitado] .crm-ctl-rotulo {
  color: var(--crm-dim);
}

.crm-ctl-ayuda {
  margin: 0;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
}

.crm-ctl-error {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  align-items: start;
  gap: 4px 6px;
  color: var(--crm-error);
  font-size: 12px;
  line-height: 16px;
}

.crm-ctl-error > svg {
  width: 14px;
  height: 14px;
  margin-top: 1px;
}

.crm-ctl-error-recuperacion {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  grid-column: 2;
  margin-top: 4px;
}

.crm-grupo-radio .crm-ctl-error {
  grid-template-columns: minmax(0, 1fr);
}

/* ── Caja de entrada (Entrada, AreaTexto, Selector, Búsqueda, Número) ── */
.crm-entrada {
  --crm-entrada-alto: 32px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  height: var(--crm-entrada-alto);
  min-height: var(--crm-entrada-alto);
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--crm-control);
  border-radius: 0;
  background: var(--crm-panel);
  color: var(--crm-text);
  font-family: var(--crm-sans);
  font-size: 14px;
  line-height: 22px;
  transition:
    border-color var(--crm-t-color) ease-out,
    box-shadow var(--crm-t-color) ease-out;
}

.crm-entrada[data-tamano="mini"] {
  --crm-entrada-alto: 24px;
  gap: 6px;
  padding: 0 8px;
  font-size: 12px;
  line-height: 16px;
}

.crm-entrada[data-tamano="compacto"] {
  --crm-entrada-alto: 28px;
  gap: 6px;
  padding: 0 10px;
  font-size: 13px;
  line-height: 20px;
}

/*
 * Lo que se ESCRIBE es texto de campo (§3, 14/22) a cualquier alto: la caja de
 * 28 de una barra («una barra, una altura», §2) baja su alto, no la letra de lo
 * escrito (el 32 ya iba a 14 aunque la fila de §2 diga 13: manda el rol). 22 de
 * línea caben en los 26 de dentro con 2 arriba y 2 abajo, en píxel entero. Se
 * quedan en 13/20 los que no se escriben: selectores y fechas (`crm-selector`),
 * la variante filtro y solo lectura (§15). Al tacto, el editable va a 16 (regla
 * de abajo); mono conserva su 13 en el control.
 */
.crm-entrada[data-tamano="compacto"]:not(.crm-selector, [data-variante="filtro"], [data-solo-lectura]) {
  font-size: 14px;
  line-height: 22px;
}

.crm-entrada[data-tamano="grande"] {
  --crm-entrada-alto: 40px;
  padding: 0 16px;
}

@media (hover: hover) {
  .crm-entrada:hover:not([data-deshabilitado], [data-solo-lectura], :focus-within, [data-state="open"], [data-abierto]) {
    border-color: var(--crm-muted);
  }
}

/*
 * Foco de campo (FUNDAMENTOS §7): el borde pasa a acento y nada más (ni
 * outline ni halo): el borde ES el anillo. Si el foco está en una acción del
 * propio campo (revelar, limpiar), esa acción lleva su anillo de control y el
 * campo no se enciende: un solo indicador.
 */
.crm-entrada:focus-within:not(:has(.crm-entrada-accion:focus)),
.crm-entrada[data-state="open"],
.crm-entrada[data-abierto] {
  border-color: var(--crm-acento);
}

.crm-entrada:focus-visible,
.crm-entrada-control:focus,
.crm-entrada-control:focus-visible {
  outline: none;
}

.crm-entrada[data-invalido] {
  border-color: var(--crm-error-linea);
}

/*
 * Con foco, el error manda sobre el acento (D16): esta regla tiene que pesar
 * más que la del foco (que lleva su :not(:has(…)), 0,4,0), por eso repite la
 * misma excepción de la acción del campo.
 */
.crm-entrada[data-invalido]:is(:focus-within, [data-state="open"], [data-abierto]):not(:has(.crm-entrada-accion:focus)) {
  border-color: var(--crm-error);
}

.crm-entrada[data-solo-lectura] {
  border-color: var(--crm-line-2);
  background: transparent;
}

.crm-entrada[data-deshabilitado] {
  border-color: var(--crm-linea-apagada);
  background: transparent;
  color: var(--crm-dim);
  cursor: not-allowed;
}

.crm-entrada-control {
  flex: 1;
  width: 100%;
  min-width: 0;
  height: calc(var(--crm-entrada-alto) - 2px);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: -0.005em;
  caret-color: var(--crm-acento);
  appearance: none;
}

.crm-entrada-control[data-mono] {
  font-family: var(--crm-mono);
  font-size: 13px;
  letter-spacing: 0;
}

.crm-entrada[data-tamano="mini"] .crm-entrada-control[data-mono] {
  font-size: 12px;
}

.crm-entrada-control::placeholder {
  color: var(--crm-dim);
  opacity: 1;
}

/*
 * D33 · El placeholder que no cabe acaba en «…» en vez de cortarse a media
 * palabra. Solo mientras se ve el placeholder (campo vacío): lo escrito
 * desplaza con el cursor como siempre y nunca se recorta. El texto entero
 * sigue en el atributo, que es lo que oye el lector.
 */
:is(.crm-entrada-control, .crm-campo-entrada, .crm-selector-filtro-control, .crm-fecha-escribir-control, .crm-confirmar-campo, .crm-paleta-campo, .crm-atajos-campo, .crm-va-historial-campo, .crm-tabla-busqueda input):placeholder-shown {
  text-overflow: ellipsis;
}

.crm-entrada-control::selection {
  background: var(--crm-seleccion);
  color: var(--crm-text);
}

/*
 * Opciones de un <select> nativo con el tema de la zona. El desplegable lo pinta
 * el sistema y, si el <select> hereda el texto claro de grafito u oscuro, sus
 * opciones salían gris claro sobre blanco (Stinson, lote, 08-10-2026). Mismo
 * fondo y texto que la lista del Selector. Especificidad cero: el consumidor
 * puede pisarlo. Lo correcto sigue siendo el Selector; esto es la red.
 */
:where(select) :where(option, optgroup) {
  background-color: var(--crm-panel-2);
  color: var(--crm-text);
}

:where(select) :where(option:disabled) {
  color: var(--crm-dim);
}

.crm-entrada-control:disabled {
  color: var(--crm-dim);
  cursor: not-allowed;
  -webkit-text-fill-color: var(--crm-dim);
}

.crm-entrada-control:-webkit-autofill {
  -webkit-text-fill-color: var(--crm-text);
  transition: background-color calc(var(--crm-t-dibujo) * 100000) ease-out;
}

/*
 * La cruz nativa del campo de búsqueda se quita (la búsqueda del kit trae la suya). Va sola: junto a
 * «::-webkit-search-decoration», que Chromium ya no reconoce, la lista entera era inválida y la regla no se
 * aplicaba. La decoración no hace falta: el control ya lleva «appearance: none».
 */
.crm-entrada-control::-webkit-search-cancel-button {
  appearance: none;
}

.crm-entrada-icono {
  display: grid;
  flex: none;
  place-items: center;
  color: var(--crm-muted);
  transition: color var(--crm-t-color) ease-out;
}

.crm-entrada-icono svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.6;
}

.crm-entrada:is([data-tamano="mini"], [data-tamano="compacto"]) .crm-entrada-icono svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.5;
}

.crm-entrada:focus-within .crm-entrada-icono {
  color: var(--crm-text);
}

.crm-entrada[data-invalido] .crm-entrada-icono {
  color: var(--crm-error);
}

.crm-entrada[data-deshabilitado] .crm-entrada-icono {
  color: var(--crm-dim);
}

.crm-entrada-sufijo {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  margin-right: -6px;
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 12px;
  line-height: 16px;
}

.crm-entrada-unidad {
  margin-right: 6px;
  color: var(--crm-muted);
  font-variant-numeric: tabular-nums;
}

/* Acción pequeña dentro de la caja («Mostrar», limpiar): un control mini de 24. */
.crm-entrada-accion {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--crm-line-2);
  border-radius: 0;
  background: transparent;
  color: var(--crm-muted);
  font-family: var(--crm-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  text-transform: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    color var(--crm-t-color) ease-out,
    border-color var(--crm-t-color) ease-out,
    background-color var(--crm-t-color) ease-out;
}

.crm-entrada:is([data-tamano="mini"], [data-tamano="compacto"]) .crm-entrada-accion {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
}

.crm-entrada-accion-icono {
  padding: 0;
  border-color: transparent;
}

.crm-entrada-accion svg {
  width: 14px;
  height: 14px;
}

@media (hover: hover) {
  .crm-entrada-accion:hover {
    border-color: var(--crm-line-2);
    background: var(--crm-panel-2);
    color: var(--crm-text);
  }
}

@media (pointer: coarse) {
  .crm-entrada-accion::after {
    content: "";
    position: absolute;
    inset: -10px;
  }
}

.crm-entrada-accion:disabled {
  border-color: transparent;
  color: var(--crm-dim);
  cursor: not-allowed;
}
.crm-entrada-revelar:disabled {
  border-color: var(--crm-linea-apagada);
}
@media (hover: hover) {
  .crm-entrada-accion:disabled:hover {
    border-color: transparent;
    background: transparent;
    color: var(--crm-dim);
  }
  .crm-entrada-revelar:disabled:hover {
    border-color: var(--crm-linea-apagada);
  }
}

/* Búsqueda: el atajo se ve en reposo y se calla en táctil. */
.crm-busqueda-atajo {
  margin-right: 6px;
}

@media (pointer: coarse) {
  .crm-busqueda-atajo {
    display: none;
  }
}

/* Número: cifras tabulares a la derecha. */
.crm-numero .crm-entrada-control {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/*
 * En reposo, una cifra que no cabe se DECLARA cortada («1.234,…»), nunca con
 * un glifo partido que se lea como otra cifra (§14: la cifra no se corta sin
 * decirlo). Con el foco, el campo nativo la recorre entera (Inicio, Fin,
 * seleccionar todo); el valor y lo que oye el lector no cambian. Lo normal
 * (4,6 · 1.234,56 · 15,001) cabe en un campo con su ancho; esto es para el
 * extremo que no puede caber.
 */
.crm-numero .crm-entrada-control:not(:focus) {
  text-overflow: ellipsis;
}

/*
 * iOS no amplía la página si la letra del campo llega a 16 px: solo lo que se
 * escribe (§15). Un filtro (un selector de barra, que no abre teclado) y un
 * campo de solo lectura conservan su letra de 13/20 a 28 o 32: una barra, una
 * altura y una letra, también al tacto. El disparador de un selector o una
 * fecha (`crm-selector`, un botón: no abre teclado) a 28 o 24 tampoco crece al
 * tacto y conserva la suya (13/20 a 28); el de campo normal crece a 40 con los
 * editables de su formulario y lleva su 16. `:where` no suma especificidad.
 */
@media (pointer: coarse) {
  .crm-entrada:not(:where(.crm-selector:is([data-tamano="compacto"], [data-tamano="mini"])), [data-variante="filtro"], [data-solo-lectura]),
  .crm-entrada[data-tamano]:not(:where(.crm-selector:is([data-tamano="compacto"], [data-tamano="mini"])), [data-variante="filtro"], [data-solo-lectura]) {
    font-size: 16px;
  }

  /*
   * El 16 tiene que llegar al CONTROL que se escribe, no solo al envoltorio:
   * la variante mono (matrículas, códigos) fija su letra en el propio control
   * (13; 12 en mini) y anulaba la herencia, y iOS ampliaba al enfocarla. Al
   * tacto, el control editable va a 16 en todos los tamaños y familias; mono
   * solo cambia la familia. Filtro y solo lectura conservan la suya.
   */
  .crm-entrada:not([data-variante="filtro"], [data-solo-lectura]) .crm-entrada-control,
  .crm-entrada[data-tamano]:not([data-variante="filtro"], [data-solo-lectura]) .crm-entrada-control {
    font-size: 16px;
  }

  /*
   * Táctil (§15): los campos editables de tamaño normal pasan a 40 (16 de
   * letra, arriba). Los de filtro, solo lectura y los compactos de una barra
   * (28, «una barra, una altura») no crecen.
   */
  .crm-entrada:is([data-tamano="normal"], :not([data-tamano])):not([data-variante="filtro"], [data-solo-lectura]) {
    --crm-entrada-alto: 40px;
  }
}

/* ── Área de texto ─────────────────────────────────────────────────── */
.crm-entrada.crm-area {
  align-items: stretch;
  height: auto;
  padding: 0;
}

.crm-area .crm-entrada-control {
  display: block;
  height: auto;
  padding: 4px 12px;
  line-height: 22px;
  resize: none;
  scrollbar-color: var(--crm-line-2) transparent;
  scrollbar-width: thin;
}

.crm-area:has(.crm-area-pie) .crm-entrada-control {
  padding-bottom: 24px;
}

/* Con ⌘↵ a la vista, la tecla de 20 pide 28 de pie. */
.crm-area:has(.crm-area-enviar) .crm-entrada-control {
  padding-bottom: 28px;
}

/* Pie del área: la cuenta y la combinación de enviar, abajo a la derecha. */
.crm-area-pie {
  position: absolute;
  right: 8px;
  bottom: 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

/* En reposo, las teclas en muted (sin bajar la opacidad: tienen que leerse, ≥ 4,5:1). */
.crm-area-enviar .crm-tecla {
  transition: color var(--crm-t-color) ease-out;
}

/* Mientras escribes, la combinación se aviva: es lo siguiente que harás. */
.crm-area:focus-within .crm-area-enviar .crm-tecla {
  color: var(--crm-text-2);
}

.crm-area-cuenta {
  color: var(--crm-dim);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.crm-area-cuenta[data-cerca] {
  color: var(--crm-aviso);
}

/* ── Selector ──────────────────────────────────────────────────────── */
.crm-entrada.crm-selector {
  justify-content: space-between;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.crm-entrada.crm-selector[data-deshabilitado] {
  cursor: not-allowed;
}

.crm-selector-valor {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-selector[data-placeholder] .crm-selector-valor {
  color: var(--crm-dim);
}

.crm-selector-chevron {
  display: grid;
  flex: none;
  margin-right: -2px;
  color: var(--crm-muted);
  transition: color var(--crm-t-color) ease-out;
}

.crm-selector-chevron svg {
  width: 14px;
  height: 14px;
}

.crm-selector:is([data-state="open"], [data-abierto]) .crm-selector-chevron {
  color: var(--crm-text);
}

/*
 * Selector de filtro (barras de filtros y herramientas): a 28, del ancho de
 * lo que dice, con el rótulo en línea en muted y el valor en texto pleno
 * («Ventana 60 días ▾»). Contorno line-2 y fondo transparente, como un botón
 * secundario; al pasar sube un escalón. Sustituye al <select> nativo.
 */
.crm-entrada.crm-selector[data-variante="filtro"] {
  justify-content: flex-start;
  gap: 6px;
  width: auto;
  max-width: 100%;
  border-color: var(--crm-line-2);
  background: transparent;
  white-space: nowrap;
}

/* A 32 sigue siendo un control de barra: texto 13, como el botón. */
.crm-entrada.crm-selector[data-variante="filtro"][data-tamano="normal"] {
  gap: 8px;
  font-size: 13px;
  line-height: 20px;
}

@media (hover: hover) {
  .crm-entrada.crm-selector[data-variante="filtro"]:hover:not([data-deshabilitado], [data-state="open"], [data-abierto]) {
    border-color: var(--crm-control);
    background: var(--crm-panel-2);
  }
}

/* Se porta como un botón: anillo de control a 2 px; el borde no pasa a acento como en los campos. */
.crm-entrada.crm-selector[data-variante="filtro"]:focus-within:not([data-state="open"], [data-abierto]) {
  border-color: var(--crm-line-2);
  box-shadow: none;
}

.crm-entrada.crm-selector[data-variante="filtro"]:is([data-state="open"], [data-abierto]) {
  border-color: var(--crm-control);
  background: var(--crm-panel-2);
  box-shadow: none;
}

.crm-entrada.crm-selector[data-variante="filtro"]:focus-visible {
  outline: var(--crm-foco-ancho) solid var(--crm-acento);
  outline-offset: 2px;
}

.crm-selector-rotulo {
  flex: none;
  color: var(--crm-muted);
  white-space: nowrap;
}

.crm-selector[data-variante="filtro"] .crm-selector-valor {
  color: var(--crm-text);
  font-weight: 500;
}

.crm-selector[data-variante="filtro"] .crm-selector-chevron {
  margin-left: -2px;
}

/* La lista: capa elevada que nace de su ancla. Ítems de 28, relleno de 4, ancho mínimo 200. */
.crm-selector-lista {
  z-index: 60;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: max(200px, var(--radix-select-trigger-width, var(--radix-popover-trigger-width, 200px)));
  max-width: min(400px, calc(100vw - 32px));
  max-height: min(320px, var(--radix-select-content-available-height, var(--radix-popover-content-available-height, 320px)));
  border: 1px solid var(--crm-line-2);
  border-radius: 0;
  background: var(--crm-panel-2);
  box-shadow: var(--crm-sombra-capa);
  color: var(--crm-text-2);
  font-family: var(--crm-sans);
  transform-origin: var(--radix-select-content-transform-origin, var(--radix-popover-content-transform-origin));
}

.crm-selector-lista[data-state="open"] {
  animation: crm-ctl-capa-entra var(--crm-t-entrada) var(--crm-snap);
}

.crm-selector-lista[data-side="top"][data-state="open"] {
  animation-name: crm-ctl-capa-entra-arriba;
}

.crm-selector-lista[data-state="closed"] {
  animation: crm-ctl-capa-sale var(--crm-t-salida) ease-out forwards;
}

.crm-selector-vista {
  overflow-y: auto;
  padding: 4px;
  scrollbar-color: var(--crm-line-2) transparent;
  scrollbar-width: thin;
}

.crm-selector-opcion {
  position: relative;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 8px;
  color: var(--crm-text-2);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: -0.005em;
  cursor: pointer;
  outline: none;
  user-select: none;
  /* Hover instantáneo al entrar, 120 ms al salir. */
  transition: background-color var(--crm-t-color) ease-out;
}

.crm-selector-marca {
  display: grid;
  grid-column: 1;
  place-items: center;
  color: var(--crm-acento);
}

.crm-selector-marca svg {
  width: 14px;
  height: 14px;
}

.crm-selector-opcion-texto {
  grid-column: 2;
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * D53 · Opción con icono o avatar y con meta. El texto es una rejilla:
 * icono a la izquierda (centrado en el alto de la opción) y la etiqueta con
 * su meta debajo. Con meta, la opción mide 40: etiqueta 13/20 + meta 12/16,
 * con 2 de aire arriba y abajo. El icono es de 16; el avatar, el compacto de 24.
 */
.crm-selector-opcion[data-con-meta] {
  height: 40px;
}

.crm-selector-opcion-texto:is([data-con-icono], :has(> .crm-selector-opcion-meta)) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
}

.crm-selector-opcion-texto[data-con-icono] {
  grid-template-columns: auto minmax(0, 1fr);
}

/* El ItemText de Radix no pinta caja: sus hijos (icono y etiqueta) son celdas de la rejilla. */
.crm-selector-opcion-texto[data-con-icono] > span:not([class]) {
  display: contents;
}

.crm-selector-opcion-icono {
  display: grid;
  grid-row: 1 / span 2;
  place-items: center;
  color: var(--crm-muted);
}

.crm-selector-opcion-icono > svg {
  width: 16px;
  height: 16px;
}

.crm-selector-opcion-etiqueta,
.crm-selector-opcion-meta {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-selector-opcion-texto[data-con-icono] .crm-selector-opcion-etiqueta,
.crm-selector-opcion-texto[data-con-icono] .crm-selector-opcion-meta {
  grid-column: 2;
}

.crm-selector-opcion-meta {
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
}

.crm-selector-opcion[data-disabled] .crm-selector-opcion-meta {
  color: var(--crm-dim);
}

/* En el disparador, el icono o el avatar de la elegida delante de su nombre (con el Value de Radix en medio o sin él). */
.crm-selector-valor:has(.crm-selector-opcion-icono),
.crm-selector-valor:has(.crm-selector-opcion-icono) > span:not([class]) {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.crm-selector-valor .crm-selector-opcion-icono {
  flex: none;
  grid-row: auto;
}

.crm-selector-opcion-detalle {
  grid-column: 3;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.crm-selector-opcion[data-highlighted] {
  background: var(--crm-panel-3);
  color: var(--crm-text);
  transition-duration: 0ms;
}

.crm-selector-opcion[data-state="checked"] {
  color: var(--crm-text);
}

.crm-selector-opcion[data-disabled] {
  color: var(--crm-dim);
  cursor: not-allowed;
}

.crm-selector-opcion[data-disabled] .crm-selector-opcion-detalle {
  color: var(--crm-dim);
}

.crm-selector-grupo + .crm-selector-grupo,
.crm-selector-vista > .crm-selector-grupo-rotulo:not(:first-child) {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--crm-line);
}

.crm-selector-grupo-rotulo {
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  color: var(--crm-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.crm-selector-grupo + .crm-selector-grupo .crm-selector-grupo-rotulo {
  margin-top: 0;
}

/* Lo que coincide con lo escrito: texto pleno a 500, sin fondo (el ojo va directo al tramo). */
.crm-selector-coincide {
  padding: 0;
  background: none;
  color: var(--crm-text);
  font-weight: 500;
}

/* Filtro tecleable de la lista buscable. */
.crm-selector-filtro {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border-bottom: 1px solid var(--crm-line-2);
  color: var(--crm-muted);
}

/* Es un campo: al escribir, su filete pasa a acento (el borde es el anillo). */
.crm-selector-filtro:focus-within {
  border-bottom-color: var(--crm-acento);
}

.crm-selector-filtro svg {
  flex: none;
  width: 14px;
  height: 14px;
}

.crm-selector-filtro-control {
  flex: 1;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--crm-text);
  font-family: var(--crm-sans);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: -0.005em;
  caret-color: var(--crm-acento);
  outline: none;
}

.crm-selector-filtro-control::placeholder {
  color: var(--crm-dim);
  opacity: 1;
}

.crm-selector-vacio {
  display: flex;
  align-items: center;
  height: 28px;
  margin: 0;
  padding: 0 8px;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
}

@media (pointer: coarse) {
  .crm-selector-opcion {
    height: 40px;
  }
}

/* ══ Casilla, interruptor y radio ════════════════════════════════════ */
.crm-opcion {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0 8px;
  min-height: 20px;
  -webkit-tap-highlight-color: transparent;
}

.crm-opcion-texto {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.crm-opcion-etiqueta {
  color: var(--crm-text-2);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: -0.005em;
  cursor: pointer;
}

/* Toda la fila es pulsable: el rótulo se estira por encima de ella. */
.crm-opcion-etiqueta::after {
  content: "";
  position: absolute;
  inset: 0;
}

.crm-opcion-descripcion {
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
}

.crm-opcion[data-deshabilitado] .crm-opcion-etiqueta,
.crm-opcion[data-deshabilitado] .crm-opcion-descripcion {
  color: var(--crm-dim);
  cursor: not-allowed;
}

@media (hover: hover) {
  .crm-opcion:not([data-deshabilitado]):hover .crm-opcion-etiqueta {
    color: var(--crm-text);
  }
}

@media (pointer: coarse) {
  .crm-opcion {
    min-height: 40px;
    align-items: center;
  }
}

/* Caja de la casilla: 16 × 16, centrada en la línea de 20 del rótulo. */
.crm-casilla,
.crm-radio {
  position: relative;
  z-index: 1;
  display: grid;
  flex: none;
  place-items: center;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  padding: 0;
  border: 1px solid var(--crm-control);
  border-radius: 0;
  background: var(--crm-panel);
  color: var(--crm-sobre-acento);
  cursor: pointer;
  transition:
    background-color var(--crm-t-color) ease-out,
    border-color var(--crm-t-color) ease-out;
}

@media (hover: hover) {
  .crm-opcion:hover .crm-casilla:not(:disabled),
  .crm-opcion:hover .crm-radio:not(:disabled) {
    border-color: var(--crm-muted);
  }
}

.crm-casilla[data-state="checked"],
.crm-casilla[data-state="indeterminate"],
.crm-opcion:hover .crm-casilla[data-state="checked"]:not(:disabled),
.crm-opcion:hover .crm-casilla[data-state="indeterminate"]:not(:disabled) {
  border-color: var(--crm-acento);
  background: var(--crm-acento);
}

.crm-casilla-marca {
  display: grid;
  place-items: center;
}

.crm-casilla-marca svg {
  width: 12px;
  height: 12px;
  animation: crm-ctl-marca var(--crm-t-color) var(--crm-snap);
}

.crm-opcion[data-invalido] .crm-casilla:not([data-state="checked"]) {
  border-color: var(--crm-error);
}

.crm-casilla:disabled,
.crm-radio:disabled {
  border-color: var(--crm-linea-apagada);
  background: transparent;
  color: var(--crm-dim);
  cursor: not-allowed;
}

/* Interruptor: rótulo a la izquierda, pista a la derecha (filas de ajustes). */
.crm-opcion-interruptor {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 12px;
}

.crm-opcion-interruptor > .crm-interruptor {
  order: 2;
}

/* Pista 28 × 16; pulgar 10 a 2 px del borde; recorre 12 px en 120 ms. */
.crm-interruptor {
  position: relative;
  z-index: 1;
  flex: none;
  width: 28px;
  height: 16px;
  margin: 2px 0 0;
  padding: 0;
  border: 1px solid var(--crm-control);
  border-radius: 0;
  background: var(--crm-panel);
  cursor: pointer;
  transition:
    background-color var(--crm-t-color) ease-out,
    border-color var(--crm-t-color) ease-out;
}

.crm-interruptor-mando {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  background: var(--crm-muted);
  transition:
    transform var(--crm-t-color) var(--crm-snap),
    background-color var(--crm-t-color) ease-out;
}

@media (hover: hover) {
  .crm-opcion:hover .crm-interruptor:not(:disabled) {
    border-color: var(--crm-muted);
  }
}

.crm-interruptor[aria-checked="true"],
.crm-opcion:hover .crm-interruptor[aria-checked="true"]:not(:disabled) {
  border-color: var(--crm-acento);
  background: var(--crm-acento-suave);
}

.crm-interruptor[aria-checked="true"] .crm-interruptor-mando {
  background: var(--crm-acento);
  transform: translateX(12px);
}

.crm-interruptor:active:not(:disabled) .crm-interruptor-mando {
  width: 12px;
}

.crm-interruptor[aria-checked="true"]:active:not(:disabled) .crm-interruptor-mando {
  transform: translateX(10px);
}

.crm-interruptor:disabled {
  border-color: var(--crm-linea-apagada);
  background: transparent;
  cursor: not-allowed;
}

.crm-interruptor:disabled .crm-interruptor-mando {
  background: var(--crm-line-2);
}

/* Guardando: el pulgar se vuelve un giro de 10 que da vueltas en su sitio (el lenguaje del botón que carga). */
.crm-interruptor[data-cargando] {
  cursor: progress;
}

.crm-interruptor[data-cargando] .crm-interruptor-mando {
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--crm-muted);
  animation: crm-ctl-giro var(--crm-t-giro) linear infinite;
}

.crm-interruptor[data-cargando][aria-checked="true"] .crm-interruptor-mando {
  color: var(--crm-acento);
  translate: 12px 0;
  transform: none;
}

/* Radio: el punto es la única forma redonda; es un estado. */
.crm-radio {
  border-radius: 50%;
}

.crm-radio[data-state="checked"],
.crm-opcion:hover .crm-radio[data-state="checked"]:not(:disabled) {
  border-color: var(--crm-acento);
}

.crm-radio-punto {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--crm-acento);
  animation: crm-ctl-marca var(--crm-t-color) var(--crm-snap);
}

.crm-radio:disabled .crm-radio-punto {
  background: var(--crm-dim);
}

.crm-grupo-radio-opciones {
  display: grid;
  gap: 8px;
}

.crm-grupo-radio-opciones[data-orientacion="horizontal"] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

/*
 * Opción rica (una fila de una selección): cifras y acciones al final de la
 * fila, nota a todo el ancho debajo. Las cifras, tabulares en el color de
 * cuerpo, son parte de la fila pulsable; las acciones quedan por encima (su
 * clic no marca la opción); la nota, en 12/16 bajo el texto.
 */
.crm-opcion[data-con-extremo] {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.crm-opcion[data-con-extremo][data-con-fin] {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}

.crm-opcion-extremo {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 20px;
}

.crm-opcion-fila .crm-opcion-extremo {
  align-self: center;
}

.crm-opcion-datos {
  display: flex;
  align-items: baseline;
  gap: 16px;
  color: var(--crm-text-2);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  line-height: 20px;
  text-align: right;
  white-space: nowrap;
}

.crm-opcion-fila:has([data-state="checked"]) .crm-opcion-datos {
  color: var(--crm-text);
}

.crm-opcion-acciones {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 4px;
}

.crm-opcion-nota {
  grid-column: 2 / -1;
  margin-top: 4px;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
}

.crm-opcion[data-deshabilitado] .crm-opcion-datos,
.crm-opcion[data-deshabilitado] .crm-opcion-nota {
  color: var(--crm-dim);
}

/*
 * Opciones ricas en un grupo (vertical): las columnas se COMPARTEN entre filas
 * (subgrid), así las cifras de todas las filas acaban en el mismo borde
 * aunque sus acciones midan distinto («3 variantes» frente a «1 variante»).
 * Columnas: control · texto · cifras · acciones · tecla; la nota, bajo el texto.
 * A menos de 400 de ancho propio, el rótulo se queda con todo el ancho y las
 * cifras bajan a su línea, bajo él (a la izquierda, tabulares); las acciones
 * siguen a la derecha de la primera línea.
 */
.crm-grupo-radio-opciones:not([data-orientacion="horizontal"]):has(> .crm-opcion[data-con-extremo]) {
  container: crm-opciones / inline-size;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  column-gap: 8px;
}

.crm-grupo-radio-opciones:not([data-orientacion="horizontal"]):has(> .crm-opcion[data-con-extremo]) > .crm-opcion {
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

.crm-grupo-radio-opciones:has(> .crm-opcion[data-con-extremo]) > .crm-opcion > :first-child {
  grid-column: 1;
}

.crm-grupo-radio-opciones:has(> .crm-opcion[data-con-extremo]) > .crm-opcion > .crm-opcion-texto {
  grid-column: 2;
}

.crm-grupo-radio-opciones:has(> .crm-opcion[data-con-extremo]) > .crm-opcion > .crm-opcion-extremo {
  display: contents;
}

.crm-grupo-radio-opciones:has(> .crm-opcion[data-con-extremo]) .crm-opcion-datos {
  grid-column: 3;
  grid-row: 1;
  justify-content: flex-end;
  align-self: start;
}

.crm-grupo-radio-opciones:has(> .crm-opcion[data-con-extremo]) .crm-opcion-acciones {
  grid-column: 4;
  grid-row: 1;
  align-self: start;
}

.crm-grupo-radio-opciones:has(> .crm-opcion[data-con-extremo]) > .crm-opcion > .crm-opcion-tecla {
  grid-column: 5;
  grid-row: 1;
}

.crm-grupo-radio-opciones:has(> .crm-opcion[data-con-extremo]) > .crm-opcion > .crm-opcion-nota {
  grid-column: 2 / -1;
}

@container crm-opciones (max-width: 399.98px) {
  .crm-grupo-radio-opciones:not([data-orientacion="horizontal"]):has(> .crm-opcion[data-con-extremo]) {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .crm-grupo-radio-opciones:has(> .crm-opcion[data-con-extremo]) .crm-opcion-datos {
    grid-column: 2;
    grid-row: 2;
    justify-content: flex-start;
    margin-top: 2px;
  }

  .crm-grupo-radio-opciones:has(> .crm-opcion[data-con-extremo]) .crm-opcion-acciones {
    grid-column: 3;
  }

  .crm-grupo-radio-opciones:has(> .crm-opcion[data-con-extremo]) > .crm-opcion > .crm-opcion-tecla {
    grid-column: 3;
    grid-row: 2;
  }
}

/* La tecla de la opción (GrupoRadio con atajos): al final de la fila, en su línea de 20. */
.crm-opcion[data-con-fin] {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.crm-opcion-tecla {
  position: relative;
  z-index: 1;
  align-self: start;
  pointer-events: none;
}

.crm-opcion-fila .crm-opcion-tecla {
  align-self: center;
}

/* Filas: cada opción es una fila de 36 con filete; la elegida, marca de acento de 2 px y panel 3. */
.crm-grupo-radio-opciones[data-variante="filas"] {
  gap: 0;
  border-top: 1px solid var(--crm-line);
}

.crm-opcion-fila {
  align-items: center;
  min-height: 36px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--crm-line);
  transition: background-color var(--crm-t-color) ease-out;
}

.crm-opcion-fila :is(.crm-radio, .crm-casilla) {
  align-self: start;
}

.crm-opcion-fila::before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: 0;
  width: 2px;
  background: var(--crm-acento);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--crm-t-gesto) var(--crm-snap);
}

@media (hover: hover) {
  .crm-opcion-fila:hover:not([data-deshabilitado]) {
    background: var(--crm-panel-2);
    transition-duration: 0ms;
  }
}

.crm-opcion-fila:has([data-state="checked"]) {
  background: var(--crm-panel-3);
}

.crm-opcion-fila:has([data-state="checked"])::before {
  transform: scaleY(1);
}

.crm-opcion-fila:has([data-state="checked"]) .crm-opcion-etiqueta {
  color: var(--crm-text);
}

/* ══ Conmutador: segmentado y pestañas ═══════════════════════════════ */
.crm-conmutador {
  --crm-conm-alto: 28px;
  --crm-conm-relleno: 10px;
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
}

.crm-conmutador[data-tamano="mini"] {
  --crm-conm-alto: 24px;
  --crm-conm-relleno: 8px;
}

.crm-conmutador[data-tamano="normal"] {
  --crm-conm-alto: 32px;
  --crm-conm-relleno: 12px;
}

.crm-conmutador-opcion {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 0 var(--crm-conm-relleno);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--crm-muted);
  font-family: var(--crm-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.005em;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: color var(--crm-t-color) ease-out;
}

.crm-conmutador[data-tamano="mini"] .crm-conmutador-opcion {
  font-size: 12px;
  line-height: 16px;
}

/* Pestaña de navegación: un enlace con la misma piel. */
a.crm-conmutador-opcion {
  text-decoration: none;
}

/* El peso 500 de la elegida no mueve el ancho: el texto reserva su anchura en 500. */
.crm-conmutador-texto {
  display: inline-grid;
}

/*
 * Una etiqueta que no es solo texto (lleva un icono, una marca propia) fluye
 * en línea, nunca en filas: el truco de ancho de la negrita es solo para el
 * texto (D05: «Usuarios / · 33» en dos líneas).
 */
.crm-conmutador-texto:not([data-texto]) {
  display: inline;
  white-space: nowrap;
}

.crm-conmutador-texto[data-texto]::after {
  content: attr(data-texto);
  /* Texto alternativo vacío: la reserva de ancho no se lee dos veces (quien no lo entiende se queda con la línea de arriba). */
  content: attr(data-texto) / "";
  height: 0;
  overflow: hidden;
  font-weight: 500;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}

/* Dentro de una fila que desplaza, el anillo va por dentro para que no se recorte. */
.crm-conmutador-opcion:focus-visible {
  outline: var(--crm-foco-ancho) solid var(--crm-acento);
  outline-offset: -1px;
}

@media (hover: hover) {
  .crm-conmutador-opcion:hover:not(:disabled, [aria-disabled="true"]) {
    color: var(--crm-text);
  }
}

.crm-conmutador-opcion:is([aria-checked="true"], [aria-selected="true"], [aria-current="page"], [aria-current="location"]) {
  color: var(--crm-text);
  font-weight: 500;
  cursor: default;
}

.crm-conmutador-opcion:is(:disabled, [aria-disabled="true"]) {
  color: var(--crm-dim);
  cursor: not-allowed;
  opacity: 1;
}

.crm-conmutador-icono {
  display: grid;
}

.crm-conmutador-icono svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.5;
}

.crm-conmutador[data-tamano="normal"] .crm-conmutador-icono svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.6;
}

.crm-conmutador-indicador {
  position: absolute;
  left: 0;
  width: var(--crm-ind-w, 0px);
  transform: translateX(var(--crm-ind-x, 0px));
  pointer-events: none;
}

.crm-conmutador[data-listo] .crm-conmutador-indicador {
  transition:
    transform var(--crm-t-gesto) var(--crm-snap),
    width var(--crm-t-gesto) var(--crm-snap);
}

/* Reflujo (un contador que llega, la letra que carga): el trazo va pegado a su opción, sin gesto. */
.crm-conmutador[data-reflujo] .crm-conmutador-indicador {
  transition: none;
}

/* Segmentado: la caja mide el alto del control; el filete no ocupa (anillo interior) y las opciones van a 2 px. */
.crm-conmutador[data-variante="segmentado"] {
  display: inline-flex;
  gap: 0;
  height: var(--crm-conm-alto);
  padding: 2px;
  background: var(--crm-panel);
  box-shadow: inset 0 0 0 1px var(--crm-line-2);
}

.crm-conmutador[data-variante="segmentado"] .crm-conmutador-opcion {
  height: calc(var(--crm-conm-alto) - 4px);
  padding: 0 calc(var(--crm-conm-relleno) - 2px);
}

.crm-conmutador[data-variante="segmentado"][data-solo-icono] .crm-conmutador-opcion {
  width: calc(var(--crm-conm-alto) - 4px);
  padding: 0;
}

.crm-conmutador[data-variante="segmentado"][data-completo] {
  display: flex;
  width: 100%;
}

.crm-conmutador[data-completo] .crm-conmutador-opcion {
  flex: 1 1 0;
  min-width: 0;
}

.crm-conmutador[data-variante="segmentado"] .crm-conmutador-indicador {
  top: 2px;
  bottom: 2px;
  background: var(--crm-panel-3);
  box-shadow: inset 0 0 0 1px var(--crm-line-2);
}

/*
 * Subrayado: filete abajo y marca de acento de 2 px bajo la elegida. El filete
 * es una sombra interior: así cada pestaña mide el alto entero del control
 * (28/32), con el filete dentro, y la fila no suma un píxel.
 */
/*
 * El texto de la primera pestaña cae en la guía del contenido (la opción
 * empieza 8 antes): el hueco lo da el propio contenedor con relleno, no un
 * margen negativo que el desplazamiento recortaba (con él, el anillo de foco
 * perdía su lado izquierdo).
 */
.crm-conmutador[data-variante="subrayado"] {
  gap: 4px;
  overflow-x: auto;
  box-shadow: inset 0 -1px 0 var(--crm-line);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}


.crm-conmutador[data-variante="subrayado"]::-webkit-scrollbar {
  display: none;
}

.crm-conmutador[data-variante="subrayado"] .crm-conmutador-opcion {
  height: var(--crm-conm-alto);
  padding: 0 8px;
}

.crm-conmutador[data-variante="subrayado"] .crm-conmutador-opcion:first-of-type {
  margin-left: -8px;
}

/* El anillo, por dentro y por encima de la marca de 2 px: nunca se funde con ella en una raya de 3. */
.crm-conmutador[data-variante="subrayado"] .crm-conmutador-opcion:focus-visible {
  outline-offset: -3px;
}

/*
 * La primera pestaña empezaba 8 px antes de la guía con un margen negativo
 * que el desplazamiento recortaba (el anillo perdía su lado izquierdo). Ahora
 * la fila entera se dibuja 8 px a la izquierda (`left`, sin tocar la
 * maquetación) y la primera pestaña empieza en el borde de la fila: el texto
 * sigue en la guía y el anillo se ve entero. Las de la cabecera tienen su
 * relleno a sangre y no lo necesitan.
 */
.crm-conmutador[data-variante="subrayado"]:not(.crm-cabecera-pestanas, .crm-cabecera-pestanas *) {
  left: -8px;
}

.crm-conmutador[data-variante="subrayado"]:not(.crm-cabecera-pestanas, .crm-cabecera-pestanas *) .crm-conmutador-opcion:first-of-type {
  margin-left: 0;
}

.crm-conmutador[data-variante="subrayado"] .crm-conmutador-indicador {
  bottom: 0;
  height: 2px;
  background: var(--crm-acento);
}

/*
 * Táctil (§15): solo los editables crecen a 40/16. Las pestañas son
 * navegación: su caja sigue en 32 y lo que crece es la zona de toque, un
 * pseudo-elemento de 4 arriba y abajo (40 en total) que no se pinta ni mueve
 * nada.
 */
@media (pointer: coarse) {
  .crm-conmutador[data-variante="subrayado"] .crm-conmutador-opcion::after {
    content: "";
    position: absolute;
    inset: -4px 0;
  }
}

/*
 * Contador en línea, a 6 px del texto: mono 11 tabular, sin caja (como las
 * cifras de las pestañas de Linear). Nunca baja a otra línea ni cambia el alto.
 */
.crm-conmutador-opcion .crm-conmutador-contador {
  min-width: 0;
  height: auto;
  padding: 0;
  background: transparent;
  color: var(--crm-dim);
  line-height: 16px;
  transition: color var(--crm-t-color) ease-out;
}

.crm-conmutador-opcion:is([aria-checked="true"], [aria-selected="true"], [aria-current="page"], [aria-current="location"]) .crm-conmutador-contador {
  color: var(--crm-muted);
}

@media (hover: hover) {
  .crm-conmutador-opcion:hover:not(:disabled) .crm-conmutador-contador {
    color: var(--crm-muted);
  }
}

/*
 * Si las opciones no caben, la fila desplaza en horizontal (sin barra) y un
 * degradado de 24 px en el borde dice que hay más, como Linear.
 */
.crm-conmutador[data-variante="segmentado"] {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.crm-conmutador[data-variante="segmentado"]::-webkit-scrollbar {
  display: none;
}

.crm-conmutador[data-desborde="fin"] {
  mask-image: linear-gradient(to right, var(--crm-text) calc(100% - 24px), transparent);
}

.crm-conmutador[data-desborde="inicio"] {
  mask-image: linear-gradient(to left, var(--crm-text) calc(100% - 24px), transparent);
}

.crm-conmutador[data-desborde="ambos"] {
  mask-image: linear-gradient(to right, transparent, var(--crm-text) 24px, var(--crm-text) calc(100% - 24px), transparent);
}

/* Raíz de Pestanas (crm-ctl-: .crm-pestanas es de la cabecera de página de estructura). */
.crm-ctl-pestanas {
  display: block;
  min-width: 0;
  max-width: 100%;
}

.crm-pestana-panel {
  padding-top: 16px;
}

/* ══ Etiqueta, estado, contador, tecla, avatar ══════════════════════ */

/* Etiqueta: chip de 24 (20 en tablas), Geist 12 en frase. */
.crm-etiqueta {
  /* Alto exterior (con su filete): de él salen la acción (−2), la × (−4) y la zona de toque. */
  --crm-etiqueta-alto: 24px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  height: var(--crm-etiqueta-alto);
  padding: 0 8px;
  border: 1px solid var(--crm-line-2);
  color: var(--crm-text-2);
  font-family: var(--crm-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: middle;
  white-space: nowrap;
}

.crm-etiqueta[data-tamano="compacto"] {
  --crm-etiqueta-alto: 20px;
  padding: 0 6px;
}

.crm-etiqueta-texto {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-etiqueta-icono {
  display: grid;
  margin-left: -2px;
  color: var(--crm-muted);
}

.crm-etiqueta-icono svg {
  width: 12px;
  height: 12px;
  stroke-width: 1.5;
}

.crm-etiqueta[data-tono="acento"] {
  border-color: var(--crm-acento-linea);
  background: var(--crm-acento-suave);
  color: var(--crm-acento);
}

.crm-etiqueta[data-tono="error"] {
  border-color: var(--crm-error-linea);
  background: var(--crm-error-suave);
  color: var(--crm-error);
}

.crm-etiqueta[data-tono="aviso"] {
  border-color: var(--crm-aviso-linea);
  background: var(--crm-aviso-suave);
  color: var(--crm-aviso);
}

.crm-etiqueta[data-tono]:not([data-tono="neutro"], [data-tono="tenue"]) .crm-etiqueta-icono {
  color: inherit;
}

.crm-etiqueta[data-tono="tenue"] {
  border-color: var(--crm-line);
  color: var(--crm-muted);
}

.crm-etiqueta[data-quitable] {
  padding-right: 2px;
}

.crm-etiqueta-quitar {
  position: relative;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--crm-muted);
  cursor: pointer;
  transition:
    color var(--crm-t-color) ease-out,
    background-color var(--crm-t-color) ease-out;
}

.crm-etiqueta[data-tamano="compacto"] .crm-etiqueta-quitar {
  width: 16px;
  height: 16px;
}

.crm-etiqueta-quitar svg {
  width: 12px;
  height: 12px;
}

/*
 * Etiqueta accionable: su texto es un botón (o un enlace) que ocupa todo el
 * chip menos la ×. Al pasar, un escalón de superficie; presionada (un filtro
 * activo), el escalón de selección y el texto pleno; deshabilitada, contorno
 * apagado. El foco es el anillo único del control.
 */
.crm-etiqueta[data-accionable] {
  padding: 0;
}

.crm-etiqueta-accion {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--crm-t-color) ease-out;
}

.crm-etiqueta[data-tamano="compacto"] .crm-etiqueta-accion {
  padding: 0 6px;
}

.crm-etiqueta[data-accionable][data-quitable] .crm-etiqueta-accion {
  padding-right: 2px;
}

.crm-etiqueta[data-accionable][data-quitable] {
  padding-right: 2px;
}

.crm-etiqueta-accion:focus-visible {
  outline: var(--crm-foco-ancho) solid var(--crm-acento);
  outline-offset: 2px;
}

.crm-etiqueta[data-presionada] {
  border-color: var(--crm-control);
  background: var(--crm-panel-3);
  color: var(--crm-text);
}

.crm-etiqueta[data-deshabilitada] {
  border-color: var(--crm-linea-apagada);
  background: transparent;
  color: var(--crm-dim);
}

.crm-etiqueta[data-deshabilitada] .crm-etiqueta-accion {
  cursor: not-allowed;
}

@media (hover: hover) {
  /* Las de tono conservan su color al pasar: solo las neutras suben un escalón. */
  .crm-etiqueta[data-accionable]:is([data-tono="neutro"], [data-tono="tenue"]):not([data-deshabilitada]) .crm-etiqueta-accion:hover {
    background: var(--crm-panel-2);
    color: var(--crm-text);
  }

  .crm-etiqueta-quitar:hover {
    background: var(--crm-panel-3);
    color: var(--crm-text);
  }
}

@media (pointer: coarse) {
  /*
   * Zona de toque de la etiqueta (acción y ×): cada lado crece hasta 10 más
   * allá del BORDE EXTERIOR (20 → 40, 24 → 44), pero nunca más allá de su
   * fila. Dentro de una fila (tr, [role=row], li o [data-crm-fila]) la
   * Etiqueta mide su fila y deja los dos huecos reales en
   * `--crm-etiqueta-arriba` / `--crm-etiqueta-abajo`: vale para una etiqueta
   * centrada (con el filete de la fila dentro de su medida) y para una pegada
   * arriba (fila de dos líneas). Sin esa medida (sin JS, antes del primer
   * efecto), la reserva: simétrica, acotada por `--crm-toque-max` (la Tabla:
   * el alto de su fila) menos su filete de 1 (§1, el filete va dentro de la
   * medida). Nunca por debajo de la propia etiqueta.
   */
  .crm-etiqueta {
    --crm-etiqueta-toque: max(var(--crm-etiqueta-alto), min(calc(var(--crm-etiqueta-alto) + 20px), calc(var(--crm-toque-max, calc(var(--crm-etiqueta-alto) + 21px)) - 1px)));
    --crm-etiqueta-extra: calc((var(--crm-etiqueta-toque) - var(--crm-etiqueta-alto)) / 2);
  }

  /* La × está a 2 del borde exterior (filete 1 + 1 de aire): mide el alto − 4; 10 a cada lado. */
  .crm-etiqueta-quitar::after {
    content: "";
    position: absolute;
    inset: calc(-2px - var(--crm-etiqueta-arriba, var(--crm-etiqueta-extra))) -10px calc(-2px - var(--crm-etiqueta-abajo, var(--crm-etiqueta-extra)));
  }

  /* La acción vive dentro del filete de 1 (mide el alto − 2): 1 más por cada lado para medir desde el borde exterior. */
  .crm-etiqueta-accion::after {
    content: "";
    position: absolute;
    inset: calc(-1px - var(--crm-etiqueta-arriba, var(--crm-etiqueta-extra))) -1px calc(-1px - var(--crm-etiqueta-abajo, var(--crm-etiqueta-extra)));
  }
}

/* Estado: punto de 6 y Geist 12 en frase normal, como en Linear («En pintura», «Espera aprobación»). */
.crm-estado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  /* El mínimo permite crecer, pero una fila flex no debe estirar la etiqueta. */
  height: fit-content;
  min-height: 20px;
  color: var(--crm-text-2);
  font-family: var(--crm-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3333333333;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  vertical-align: middle;
}

.crm-estado[data-forma="chip"] {
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid var(--crm-line-2);
}

.crm-estado[data-forma="chip"][data-tamano="compacto"] {
  min-height: 20px;
  padding: 0 6px;
}

.crm-estado[data-forma="chip"]:is([data-estado="vivo"], [data-estado="hecho"], [data-estado="espera"]) {
  border-color: var(--crm-acento-linea);
}

.crm-estado[data-forma="chip"][data-estado="error"] {
  border-color: var(--crm-error-linea);
}

/* La etiqueta cede ancho; el punto conserva su tamaño y separación. */
.crm-estado-texto {
  min-width: 0;
  overflow-wrap: anywhere;
}

.crm-estado-punto {
  position: relative;
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--crm-dim);
}

.crm-estado[data-estado="vivo"] .crm-estado-punto {
  background: var(--crm-acento);
  box-shadow: 0 0 0 2px var(--crm-acento-suave);
}

.crm-estado[data-estado="vivo"] .crm-estado-punto::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--crm-acento);
  animation: crm-latido var(--crm-t-latido) ease-out infinite;
}

.crm-estado[data-estado="hecho"] .crm-estado-punto {
  background: var(--crm-acento);
}

.crm-estado[data-estado="espera"] .crm-estado-punto {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--crm-acento);
}

.crm-estado[data-estado="error"] {
  color: var(--crm-error);
}

.crm-estado[data-estado="error"] .crm-estado-punto {
  background: var(--crm-error);
}

.crm-estado[data-estado="inactivo"] {
  color: var(--crm-muted);
}

/* Aviso: ámbar, para lo que está por vencer o pide atención sin ser un fallo. */
.crm-estado[data-estado="aviso"] {
  color: var(--crm-aviso);
}

.crm-estado[data-estado="aviso"] .crm-estado-punto {
  background: var(--crm-aviso);
}

.crm-estado[data-forma="chip"][data-estado="aviso"] {
  border-color: var(--crm-aviso-linea);
}

/* El punto sigue visible cuando el sistema sustituye fondos y sombras. */
@media (forced-colors: active) {
  .crm-estado-punto {
    border: 1px solid CanvasText;
    background: CanvasText;
    box-shadow: none;
  }

  .crm-estado[data-estado="espera"] .crm-estado-punto {
    background: Canvas;
    box-shadow: none;
  }

  .crm-estado[data-estado="vivo"] .crm-estado-punto {
    background: CanvasText;
    box-shadow: none;
  }

  .crm-estado[data-estado="vivo"] .crm-estado-punto::after {
    display: none;
  }
}

/* Contador: 16 de alto, cifras tabulares. */
.crm-contador {
  display: inline-grid;
  flex: none;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--crm-panel-3);
  color: var(--crm-text-2);
  font-family: var(--crm-mono);
  font-size: 11px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  line-height: 16px;
  letter-spacing: 0;
}

.crm-contador[data-tono="acento"] {
  background: var(--crm-acento-suave);
  color: var(--crm-acento);
}

/* Cuando la cifra sube (llega algo nuevo): 2 px arriba y en acento, de vuelta en 320 ms. */
.crm-contador[data-sube="impar"] {
  animation: crm-ctl-contador-sube-a var(--crm-t-capa) var(--crm-snap);
}

.crm-contador[data-sube="par"] {
  animation: crm-ctl-contador-sube-b var(--crm-t-capa) var(--crm-snap);
}

/* Tecla: 20 × 20 mínimo, mono 11, relieve de 1 px en el borde inferior. */
.crm-tecla {
  display: inline-grid;
  flex: none;
  place-items: center;
  min-width: 20px;
  height: 20px;
  margin: 0;
  padding: 0 4px;
  border: 1px solid var(--crm-line-2);
  border-radius: 0;
  background: var(--crm-panel-2);
  box-shadow: inset 0 -1px 0 var(--crm-line-2);
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  line-height: 16px;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: middle;
  transition:
    transform var(--crm-t-pulsar) var(--crm-snap),
    background-color var(--crm-t-pulsar) ease-out,
    color var(--crm-t-pulsar) ease-out;
}

/* Pulsada de verdad: pierde el relieve y baja 1 px; el texto, pleno. */
.crm-tecla[data-pulsada] {
  background: var(--crm-panel-3);
  box-shadow: none;
  color: var(--crm-text);
  transform: translateY(1px);
}

/* Combinación: «⌘ K», con 2 px entre tecla y tecla. */
.crm-teclas {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 2px;
  vertical-align: middle;
}

/* Sobre un fondo relleno (botón principal, acento), la tecla toma el color de la tinta. */
.crm-boton:is([data-variante="principal"], [data-variante="acento"], [data-variante="firma"]) .crm-tecla {
  border-color: currentColor;
  background: transparent;
  box-shadow: inset 0 -1px 0 currentColor;
  color: inherit;
  opacity: 0.6;
}

/* Estado con consejo: enfocable, con el anillo único y el subrayado punteado de «hay más». */
.crm-estado[data-con-consejo] {
  cursor: help;
}

.crm-estado[data-con-consejo] .crm-estado-texto {
  text-decoration: underline dotted var(--crm-line-2);
  text-underline-offset: 3px;
}

.crm-estado[data-con-consejo]:focus-visible {
  outline: var(--crm-foco-ancho) solid var(--crm-acento);
  outline-offset: 2px;
}

/* Avatar */
.crm-avatar {
  --crm-avatar: 32px;
  display: inline-grid;
  flex: none;
  place-items: center;
  overflow: hidden;
  width: var(--crm-avatar);
  height: var(--crm-avatar);
  border: 1px solid var(--crm-line);
  background: var(--crm-panel-3);
  color: var(--crm-text-2);
  font-family: var(--crm-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0;
  vertical-align: middle;
  user-select: none;
}

.crm-avatar[data-tamano="compacto"] {
  --crm-avatar: 24px;
  font-size: 11px;
}

.crm-avatar[data-tamano="grande"] {
  --crm-avatar: 40px;
  font-size: 13px;
}

.crm-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ══ Aviso en línea ══════════════════════════════════════════════════ */
.crm-aviso {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  padding: 12px 12px 12px 16px;
  border: 1px solid var(--crm-line-2);
  background: var(--crm-panel);
  color: var(--crm-text-2);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: -0.005em;
}

.crm-aviso-icono {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--crm-muted);
}

.crm-aviso-cuerpo {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.crm-aviso-titulo {
  margin: 0;
  color: var(--crm-text);
  font-weight: 500;
}

/*
 * D36: un identificador, una URL o un código sin espacios parte donde haga
 * falta en vez de salirse del aviso. Solo cambia dónde se parte la línea: el
 * texto, lo que se copia y lo que se pega son los mismos. Un bloque de código
 * (pre) conserva sus líneas y desplaza dentro del aviso.
 */
.crm-aviso-titulo,
.crm-aviso-texto {
  min-width: 0;
  overflow-wrap: anywhere;
}

.crm-aviso-texto {
  color: var(--crm-text-2);
}

.crm-aviso-texto :is(code, a, kbd, samp) {
  overflow-wrap: anywhere;
}

.crm-aviso-texto pre {
  max-width: 100%;
  overflow-x: auto;
  overflow-wrap: normal;
}

/* Listas con su marcador en secundario dentro de la sangría (K5-24): se leen como lista, no como líneas sueltas. */
.crm-aviso-texto :is(ul, ol) {
  margin: 4px 0;
  padding-left: 20px;
}

.crm-aviso-texto ul {
  list-style: disc;
}

.crm-aviso-texto ol {
  list-style: decimal;
}

.crm-aviso-texto li::marker {
  color: var(--crm-muted);
}

/* Un bloque de código que no cabe desplaza dentro y lo dice: su borde derecho se funde 24 (K5-11). */
.crm-aviso-texto pre[data-desborde="fin"] {
  mask-image: linear-gradient(to right, var(--crm-text) calc(100% - 24px), transparent);
}

.crm-aviso-texto pre[data-desborde="ambos"] {
  mask-image: linear-gradient(to right, transparent, var(--crm-text) 24px, var(--crm-text) calc(100% - 24px), transparent);
}

.crm-aviso-texto pre[data-desborde="inicio"] {
  mask-image: linear-gradient(to left, var(--crm-text) calc(100% - 24px), transparent);
}

.crm-aviso-texto > :first-child {
  margin-top: 0;
}

.crm-aviso-texto > :last-child {
  margin-bottom: 0;
}

.crm-aviso-accion {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

/*
 * El tono va en un filo de 2 px a la izquierda y en el icono, sobre el marco
 * neutro: nunca un borde completo de color ni un lavado (OFICIO F10). El relleno
 * baja 1 px para que el texto no se mueva respecto al aviso neutro.
 */
.crm-aviso:is([data-tono="exito"], [data-tono="atencion"], [data-tono="error"], [data-tono="pendiente"]) {
  padding-left: 15px;
  border-left-width: 2px;
}

.crm-aviso[data-tono="exito"],
.crm-aviso[data-tono="pendiente"] {
  border-left-color: var(--crm-acento);
}

.crm-aviso[data-tono="atencion"] {
  border-left-color: var(--crm-aviso);
}

.crm-aviso[data-tono="error"] {
  border-left-color: var(--crm-error);
}

.crm-aviso:is([data-tono="exito"], [data-tono="pendiente"]) .crm-aviso-icono {
  color: var(--crm-acento);
}

.crm-aviso[data-tono="atencion"] .crm-aviso-icono {
  color: var(--crm-aviso);
}

.crm-aviso[data-tono="error"] .crm-aviso-icono,
.crm-aviso[data-tono="error"] .crm-aviso-titulo {
  color: var(--crm-error);
}

/* En línea: franja de 44 con el texto a la izquierda y la acción a la derecha. */
.crm-aviso[data-disposicion="linea"] {
  align-items: center;
  min-height: 44px;
  padding-block: 6px;
}

.crm-aviso[data-disposicion="linea"] .crm-aviso-icono {
  margin-top: 0;
}

.crm-aviso[data-disposicion="linea"] .crm-aviso-cuerpo {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 16px;
}

.crm-aviso[data-disposicion="linea"] .crm-aviso-accion {
  grid-column: 2;
  grid-row: 1;
  margin-top: 0;
}

@media (max-width: 600px) {
  .crm-aviso[data-disposicion="linea"] .crm-aviso-cuerpo {
    grid-template-columns: minmax(0, 1fr);
  }

  .crm-aviso[data-disposicion="linea"] .crm-aviso-accion {
    grid-column: 1;
    grid-row: auto;
  }
}

/*
 * Nota: la aclaración discreta de una vista. Icono de 14, texto 13 en muted,
 * sin lavado (fondo transparente) y con filete line; relleno 8/12. El tono
 * solo tiñe el icono (y el error, nunca el bloque).
 */
.crm-aviso[data-variante="nota"] {
  grid-template-columns: 14px minmax(0, 1fr) auto;
  gap: 8px;
  padding: 8px 12px;
  border-color: var(--crm-line);
  background: transparent;
  color: var(--crm-muted);
}

.crm-aviso[data-variante="nota"] .crm-aviso-icono {
  width: 14px;
  height: 14px;
  margin-top: 3px;
}

.crm-aviso[data-variante="nota"] .crm-aviso-texto {
  color: var(--crm-muted);
}

.crm-aviso[data-variante="nota"] .crm-aviso-titulo {
  color: var(--crm-text-2);
}

/* La nota con tono: el tono solo tiñe el icono; sin filo de tono (un filete line entero). */
.crm-aviso[data-variante="nota"]:is([data-tono="exito"], [data-tono="atencion"], [data-tono="error"], [data-tono="pendiente"]) {
  padding-left: 12px;
  border-left-width: 1px;
  border-left-color: var(--crm-line);
}

.crm-aviso[data-variante="nota"][data-tono="error"] .crm-aviso-titulo {
  color: var(--crm-text-2);
}

/* Cerrar: un botón de icono mini (24), con su icono de 14. */
.crm-aviso-cerrar,
.crm-tostada-cerrar {
  position: relative;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: -2px -4px -2px 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--crm-muted);
  cursor: pointer;
  transition:
    color var(--crm-t-color) ease-out,
    background-color var(--crm-t-color) ease-out,
    transform var(--crm-t-pulsar) var(--crm-snap);
}

.crm-aviso-cerrar svg,
.crm-tostada-cerrar svg {
  width: 14px;
  height: 14px;
}

.crm-aviso-cerrar:active,
.crm-tostada-cerrar:active {
  transform: scale(0.96);
}

@media (hover: hover) {
  .crm-aviso-cerrar:hover,
  .crm-tostada-cerrar:hover {
    background: var(--crm-panel-3);
    color: var(--crm-text);
  }
}

@media (pointer: coarse) {
  .crm-aviso-cerrar::after,
  .crm-tostada-cerrar::after {
    content: "";
    position: absolute;
    inset: -10px;
  }
}

/* ══ Tostadas ════════════════════════════════════════════════════════ */
/* La capa hereda de .crm-marca un fondo de lienzo: aquí debe ser transparente. */
.crm-capa.crm-tostadas-capa {
  background: transparent;
}

.crm-tostadas-capa {
  position: fixed;
  z-index: 80;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.crm-tostadas {
  outline: none;
}

.crm-tostadas-lista {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  width: min(400px, 100vw);
  margin: 0;
  padding: 0 24px max(24px, env(safe-area-inset-bottom));
  list-style: none;
}

/* Tostada: 44 como mínimo; una fila (icono · texto · acción · cerrar). */
.crm-tostada {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 8px 8px 8px 12px;
  overflow: hidden;
  border: 1px solid var(--crm-line-2);
  background: var(--crm-panel-2);
  box-shadow: var(--crm-sombra-capa);
  color: var(--crm-text-2);
  font-family: var(--crm-sans);
  pointer-events: auto;
  animation: crm-ctl-tostada-entra var(--crm-t-entrada) var(--crm-snap);
  transition: opacity var(--crm-t-salida) ease-out;
}

.crm-tostada[data-saliendo] {
  opacity: 0;
}

/* La sustituta («Guardando…» → «Guardado») ocupa el sitio de la anterior sin volver a entrar. */
.crm-tostada[data-reemplazo] {
  animation: none;
}

/* En marcha: el icono es un giro de 14 en el hueco de 16 (el del botón que carga). */
.crm-tostada-giro {
  display: block;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  margin: 3px 1px 0;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: crm-ctl-giro var(--crm-t-giro) linear infinite;
}

.crm-tostada-anuncio {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  min-width: 0;
}

.crm-tostada-icono {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--crm-muted);
}

.crm-tostada:is([data-tono="exito"], [data-tono="pendiente"]) .crm-tostada-icono {
  color: var(--crm-acento);
}

.crm-tostada[data-tono="atencion"] .crm-tostada-icono {
  color: var(--crm-aviso);
}

.crm-tostada[data-tono="error"] {
  border-left-color: var(--crm-error);
}

.crm-tostada[data-tono="error"] .crm-tostada-icono {
  color: var(--crm-error);
}

.crm-tostada-cuerpo {
  display: grid;
  gap: 0;
  min-width: 0;
}

.crm-tostada-titulo,
.crm-tostada-texto {
  margin: 0;
}

.crm-tostada-titulo {
  color: var(--crm-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.005em;
}

.crm-tostada-texto {
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
}

/* Acción: un botón de 28 en frase, con su atajo cuando lo tiene. */
.crm-tostada-accion {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--crm-line-2);
  border-radius: 0;
  background: transparent;
  color: var(--crm-text);
  font-family: var(--crm-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.005em;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--crm-t-color) ease-out,
    border-color var(--crm-t-color) ease-out,
    transform var(--crm-t-pulsar) var(--crm-snap);
}

.crm-tostada-accion:has(.crm-teclas) {
  padding-right: 4px;
}

.crm-tostada-accion:active {
  transform: translateY(0.5px);
}

@media (hover: hover) {
  .crm-tostada-accion:hover {
    border-color: var(--crm-control);
    background: var(--crm-panel-3);
  }
}

@media (pointer: coarse) {
  .crm-tostada-accion::after {
    content: "";
    position: absolute;
    inset: -8px -2px;
  }
}

.crm-tostada-cerrar {
  margin: 0;
}

/* Vida: una línea que se consume en la base; se para con el ratón o el foco. */
.crm-tostada-vida {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--crm-control);
  transform-origin: left;
  animation: crm-ctl-vida var(--crm-tostada-vida, var(--crm-t-tostada)) linear forwards;
}

.crm-tostada[data-tono="exito"] .crm-tostada-vida,
.crm-tostada:has([data-deshacer]) .crm-tostada-vida {
  background: var(--crm-acento);
}

.crm-tostada[data-pausa] .crm-tostada-vida {
  animation-play-state: paused;
}

@media (max-width: 40em) {
  .crm-tostadas-capa {
    left: 0;
  }

  .crm-tostadas-lista {
    width: 100%;
    padding: 0 16px max(16px, env(safe-area-inset-bottom));
  }
}

/* ══ Vacío, esqueleto y cargando ═════════════════════════════════════ */
.crm-vacio {
  display: grid;
  justify-items: center;
  gap: 4px;
  max-width: 68ch;
  margin-inline: auto;
  padding: 48px 16px;
  text-align: center;
}

.crm-vacio[data-tamano="grande"] {
  padding: 64px 16px;
}

.crm-vacio-icono {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 12px;
  border: 1px solid var(--crm-line-2);
  color: var(--crm-muted);
}

.crm-vacio-icono svg {
  width: 20px;
  height: 20px;
}

/*
 * La C de la casa en ASCII (opt-in con `firma`): mono 11 sobre 12, sin
 * ligaduras ni ajuste de pares (si la fuente junta «==» o «-:», las líneas se
 * desalinean), en color de filete. Bloque alineado a la izquierda dentro de
 * su caja para que las 11 líneas, todas del mismo ancho, casen columna a
 * columna. Compartida con `FragmentoC` de datos.
 */
.crm-c-ascii {
  justify-self: center;
  margin: 0;
  color: var(--crm-control);
  font-family: var(--crm-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 12px;
  letter-spacing: 0;
  font-kerning: none;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0, "dlig" 0;
  text-align: left;
  text-rendering: geometricPrecision;
  white-space: pre;
  tab-size: 1;
  user-select: none;
}

.crm-vacio-ascii {
  margin-bottom: 20px;
}

.crm-vacio-titulo {
  margin: 0;
  color: var(--crm-text);
  font-family: var(--crm-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.crm-vacio[data-tamano="grande"] .crm-vacio-titulo {
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.02em;
}

.crm-vacio-texto {
  max-width: 48ch;
  margin: 0;
  color: var(--crm-muted);
  font-size: 13px;
  line-height: 20px;
  text-wrap: pretty;
}

.crm-vacio[data-tamano="grande"] .crm-vacio-texto {
  font-size: 14px;
  line-height: 22px;
}

.crm-vacio-acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

/* Esqueleto: invisible hasta los 300 ms; después, el barrido que pasa y descansa. */
.crm-esqueleto {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  height: 12px;
  background: var(--crm-esqueleto-a);
  opacity: 0;
  animation: crm-ctl-aparece var(--crm-t-pulsar) steps(1, jump-start) var(--crm-esqueleto-retardo, var(--crm-t-retardo)) forwards;
}

.crm-esqueleto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--crm-esqueleto-b) 50%, transparent) no-repeat;
  background-size: 50% 100%;
  background-position: -50% 0;
  /* Anclado a la ventana: todos los esqueletos comparten una sola luz que cruza la página. */
  background-attachment: fixed;
  animation: crm-ctl-barrido var(--crm-t-barrido) var(--crm-curva) var(--crm-esqueleto-retardo, var(--crm-t-retardo)) infinite;
}

.crm-esqueleto-lineas {
  display: grid;
  gap: 8px;
}

/* Cargando */
.crm-cargando {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--crm-muted);
  font-family: var(--crm-sans);
  font-size: 12px;
  line-height: 16px;
  text-transform: none;
}

.crm-cargando-filo {
  position: relative;
  display: block;
  flex: none;
  width: 32px;
  height: 1px;
  background: var(--crm-line-2) linear-gradient(90deg, transparent, var(--crm-acento) 50%, transparent) no-repeat;
  background-size: 40% 100%;
  background-position: -40% 0;
  animation: crm-filo-continuo var(--crm-t-filo) var(--crm-curva) infinite;
}

.crm-cargando[data-variante="linea"] {
  display: block;
  width: 100%;
}

.crm-cargando[data-variante="linea"] .crm-cargando-filo {
  width: 100%;
  background-color: var(--crm-line);
}

.crm-cargando[data-variante="linea"] .crm-cargando-texto {
  display: block;
  margin-top: 8px;
}

/* Con avance conocido: una barra que se llena (sin luz que corre) y la cifra en mono tabular. */
.crm-cargando[data-progreso] .crm-cargando-filo {
  background: var(--crm-line-2) linear-gradient(var(--crm-acento), var(--crm-acento)) no-repeat;
  background-position: 0 0;
  background-size: var(--crm-progreso, 0%) 100%;
  animation: none;
  transition: background-size var(--crm-t-gesto) var(--crm-curva);
}

.crm-cargando[data-variante="texto"][data-progreso] .crm-cargando-filo {
  width: 48px;
}

.crm-cargando-cifra {
  color: var(--crm-text-2);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

.crm-cargando[data-variante="linea"][data-progreso] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 8px;
}

.crm-cargando[data-variante="linea"][data-progreso] .crm-cargando-filo {
  grid-column: 1 / -1;
}

/* ── Movimiento ─────────────────────────────────────────────────────── */

/* Capas: opacidad + 4 px + 0,98 desde su ancla, en 180 ms; salen solo con opacidad en 120. */
@keyframes crm-ctl-capa-entra {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes crm-ctl-capa-entra-arriba {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes crm-ctl-capa-sale {
  to {
    opacity: 0;
  }
}

@keyframes crm-ctl-tostada-entra {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes crm-ctl-marca {
  from {
    opacity: 0;
    scale: 0.6;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes crm-ctl-contador-sube-a {
  from {
    color: var(--crm-acento);
    transform: translateY(-2px);
  }
}

@keyframes crm-ctl-contador-sube-b {
  from {
    color: var(--crm-acento);
    transform: translateY(-2px);
  }
}

@keyframes crm-ctl-giro {
  to {
    transform: rotate(360deg);
  }
}

@keyframes crm-ctl-aparece {
  to {
    opacity: 1;
  }
}

@keyframes crm-ctl-vida {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

/* Barrido lento: cruza en el 55 % del ciclo y descansa. */
@keyframes crm-ctl-barrido {
  0% {
    background-position: -50% 0;
  }
  55%,
  100% {
    background-position: 150% 0;
  }
}

/* ══ Paso numérico ═══════════════════════════════════════════════════ */
/* Una sola pieza: «−  valor  +» en un contorno, al alto de su fila (24/28/32/40). */
.crm-paso {
  --crm-paso-alto: 32px;
  --crm-paso-icono: 16px;
  display: inline-grid;
  grid-template-columns: var(--crm-paso-alto) minmax(40px, auto) var(--crm-paso-alto);
  align-items: stretch;
  box-sizing: border-box;
  height: var(--crm-paso-alto);
  min-height: var(--crm-paso-alto);
  border: 1px solid var(--crm-control);
  background: var(--crm-panel);
  color: var(--crm-text);
  font-family: var(--crm-sans);
  font-size: 14px;
  line-height: 22px;
  transition:
    border-color var(--crm-t-color) ease-out;
}

.crm-paso[data-tamano="mini"] {
  --crm-paso-alto: 24px;
  --crm-paso-icono: 14px;
  font-size: 12px;
  line-height: 16px;
}

.crm-paso[data-tamano="compacto"] {
  --crm-paso-alto: 28px;
  --crm-paso-icono: 14px;
  font-size: 13px;
  line-height: 20px;
}

.crm-paso[data-tamano="grande"] {
  --crm-paso-alto: 40px;
}

/* Foco de campo (FUNDAMENTOS §7): el borde pasa a acento y es el único indicador. */
.crm-paso:focus-within {
  border-color: var(--crm-acento);
}

.crm-paso[data-invalido] {
  border-color: var(--crm-error-linea);
}

.crm-paso[data-deshabilitado] {
  border-color: var(--crm-line-2);
  background: transparent;
  color: var(--crm-dim);
  cursor: not-allowed;
}

/* Botones: cuadrados del alto del control, dentro del contorno (sin cajas propias). */
.crm-paso-boton {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--crm-muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    background-color var(--crm-t-color) ease-out,
    color var(--crm-t-color) ease-out;
}

.crm-paso-boton svg {
  width: var(--crm-paso-icono);
  height: var(--crm-paso-icono);
  stroke-width: 1.6;
  transition: transform var(--crm-t-pulsar) var(--crm-snap);
}

@media (hover: hover) {
  .crm-paso-boton:hover:not([aria-disabled]) {
    background: var(--crm-panel-2);
    color: var(--crm-text);
    transition-duration: 0ms;
  }
}

.crm-paso-boton:active:not([aria-disabled]) svg {
  transform: scale(0.96);
}

.crm-paso-boton[aria-disabled] {
  color: var(--crm-dim);
  cursor: not-allowed;
}

.crm-paso-boton:focus-visible {
  outline-offset: -1px;
}

/* La cifra: centrada, tabular, en la misma línea base que el texto de la fila. */
.crm-paso-valor {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  padding: 0 4px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  cursor: text;
}

.crm-paso-valor:focus-visible {
  outline: none;
}

.crm-paso-unidad {
  margin-left: 2px;
  color: var(--crm-muted);
  font-size: 12px;
}

.crm-paso[data-tamano="mini"] .crm-paso-unidad {
  font-size: 11px;
}

@media (pointer: coarse) {
  .crm-paso:not([data-tamano="grande"]) {
    --crm-paso-alto: 40px;
  }
}

/* ══ Valoración ══════════════════════════════════════════════════════ */
/* Estrellas en objetivos cuadrados del alto de la fila; llenas en texto, nunca en verde. */
.crm-valoracion {
  --crm-valoracion-alto: 32px;
  --crm-valoracion-icono: 16px;
  display: inline-flex;
  align-items: center;
  height: var(--crm-valoracion-alto);
}

.crm-valoracion[data-tamano="mini"] {
  --crm-valoracion-alto: 24px;
  --crm-valoracion-icono: 14px;
}

.crm-valoracion[data-tamano="compacto"] {
  --crm-valoracion-alto: 28px;
  --crm-valoracion-icono: 14px;
}

.crm-valoracion[data-tamano="grande"] {
  --crm-valoracion-alto: 40px;
}

.crm-valoracion-estrella {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  /* Objetivo del alto de la fila y 8 px más estrecho (nunca menos de 24): las estrellas se leen como un grupo. */
  width: max(24px, calc(var(--crm-valoracion-alto) - 8px));
  height: var(--crm-valoracion-alto);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--crm-dim);
  -webkit-tap-highlight-color: transparent;
  transition: color var(--crm-t-color) ease-out;
}

.crm-valoracion[data-solo-lectura] .crm-valoracion-estrella {
  width: var(--crm-valoracion-icono);
  margin-right: 2px;
}

button.crm-valoracion-estrella {
  cursor: pointer;
}

.crm-valoracion-estrella svg {
  width: var(--crm-valoracion-icono);
  height: var(--crm-valoracion-icono);
  stroke-width: 1.6;
  fill: transparent;
  transition:
    fill var(--crm-t-color) ease-out,
    transform var(--crm-t-pulsar) var(--crm-snap);
}

.crm-valoracion-estrella[data-llena] {
  color: var(--crm-text);
}

.crm-valoracion-estrella[data-llena] svg {
  fill: currentColor;
}

button.crm-valoracion-estrella:active svg {
  transform: scale(0.96);
}

button.crm-valoracion-estrella:focus-visible {
  outline-offset: -1px;
}

.crm-valoracion[data-deshabilitado] .crm-valoracion-estrella {
  color: var(--crm-line-2);
  cursor: not-allowed;
}

.crm-valoracion[data-deshabilitado] .crm-valoracion-estrella[data-llena] {
  color: var(--crm-dim);
}


/* ── Progreso lineal ────────────────────────────────────────────────── */
/*
 * Cabeza de 20 (rótulo 13 y cifra mono 12 tabular), 6 de aire y barra de 4
 * con su filete. Relleno neutro y filo de acento de 2 px en el avance (lo
 * único verde mientras avanza); completado, verde entero; error, su tono;
 * deshabilitado, apagado sin opacidad. Indeterminado: el filo de luz.
 */
.crm-progreso {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--crm-text-2);
  font-family: var(--crm-sans);
}

.crm-progreso[data-tamano="compacto"] {
  min-width: 64px;
}

.crm-progreso-cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.crm-progreso-rotulo {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-progreso-cifra {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 16px;
}

.crm-progreso-cifra svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.5;
}

.crm-progreso-barra {
  position: relative;
  height: 4px;
  overflow: hidden;
  background: var(--crm-line-2);
}

.crm-progreso-hecho {
  display: block;
  position: relative;
  width: 0;
  height: 100%;
  background: var(--crm-text-2);
  transition: width var(--crm-t-gesto) var(--crm-curva);
}

/* El filo de avance: 2 px de acento al final de lo hecho. Deshabilitado no lleva verde: ni filo. */
.crm-progreso[data-estado="en-curso"]:not([data-indeterminado], [data-deshabilitado]) .crm-progreso-hecho::after {
  position: absolute;
  inset: 0 0 0 auto;
  width: 2px;
  background: var(--crm-acento);
  content: "";
}

.crm-progreso[data-estado="completado"] .crm-progreso-hecho {
  background: var(--crm-acento);
}

.crm-progreso[data-estado="completado"] .crm-progreso-cifra {
  color: var(--crm-acento);
}

.crm-progreso[data-estado="error"] .crm-progreso-hecho {
  background: var(--crm-error);
}

.crm-progreso[data-estado="error"] .crm-progreso-cifra {
  color: var(--crm-error);
}

.crm-progreso[data-indeterminado][data-estado="en-curso"] .crm-progreso-hecho {
  width: 100%;
  background: linear-gradient(90deg, transparent, var(--crm-acento) 50%, transparent) no-repeat;
  background-size: 40% 100%;
  background-position: -40% 0;
  animation: crm-filo-continuo var(--crm-t-filo) var(--crm-curva) infinite;
}

.crm-progreso[data-indeterminado][data-estado="error"] .crm-progreso-hecho {
  width: 100%;
}

.crm-progreso[data-deshabilitado] .crm-progreso-barra {
  background: var(--crm-linea-apagada);
}

.crm-progreso[data-deshabilitado] .crm-progreso-hecho,
.crm-progreso[data-deshabilitado] .crm-progreso-hecho::after {
  background: var(--crm-dim);
  animation: none;
}

.crm-progreso[data-deshabilitado] :is(.crm-progreso-rotulo, .crm-progreso-cifra, .crm-progreso-detalle) {
  color: var(--crm-dim);
}

.crm-progreso-detalle {
  margin: 0;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
}

@media (forced-colors: active) {
  .crm-progreso-barra {
    border: 1px solid CanvasText;
  }

  .crm-progreso-hecho {
    background: Highlight;
  }
}

/* ── Compositor de conversación ─────────────────────────────────────── */
/*
 * La caja de la Vista Agente a medida de panel: filete de control, fondo de
 * superficie y, como firma, el filo de luz arriba (quieto al escribir,
 * recorriendo mientras trabaja). El foco es la caja: su filete pasa a verde
 * y el área de dentro no pinta el suyo (un solo indicador). Texto 15/24 y
 * mínimo 48 (§17); pie de 40 con la pista, la cuenta y el enviar de 32.
 */
.crm-compositor {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.crm-compositor-caja {
  position: relative;
  display: grid;
  min-width: 0;
  border: 1px solid var(--crm-control);
  background: var(--crm-panel);
  transition: border-color var(--crm-t-color) var(--crm-snap);
}

.crm-compositor-caja::before {
  position: absolute;
  z-index: 1;
  inset: -1px -1px auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--crm-acento) 50%, transparent) no-repeat;
  background-size: 40% 100%;
  background-position: -40% 0;
  opacity: 0;
  content: "";
  pointer-events: none;
}

/* El foco es la caja: filete verde y, con el ancho del tema (2 px en contraste), un anillo por dentro que lo completa. */
.crm-compositor-caja:focus-within {
  border-color: var(--crm-acento);
  box-shadow: inset 0 0 0 calc(var(--crm-foco-ancho) - 1px) var(--crm-acento);
}

.crm-compositor[data-cargando] .crm-compositor-caja::before {
  opacity: 1;
  animation: crm-filo-continuo var(--crm-t-filo) var(--crm-curva) infinite;
}

.crm-compositor[data-error] .crm-compositor-caja {
  border-color: var(--crm-error-linea);
}

.crm-compositor[data-error] .crm-compositor-caja:focus-within {
  border-color: var(--crm-error);
}

.crm-compositor[data-deshabilitado] .crm-compositor-caja {
  border-color: var(--crm-linea-apagada);
  background: transparent;
}

/* El área de dentro no lleva marco propio: la caja es el campo. */
.crm-compositor .crm-entrada.crm-area,
.crm-compositor .crm-entrada.crm-area:focus-within:not(:has(.crm-entrada-accion:focus)),
.crm-compositor .crm-entrada.crm-area[data-invalido],
.crm-compositor .crm-entrada.crm-area[data-invalido]:is(:focus-within, [data-state="open"], [data-abierto]):not(:has(.crm-entrada-accion:focus)) {
  border-color: transparent;
  background: transparent;
}

.crm-compositor .crm-area .crm-entrada-control {
  min-height: 48px;
  padding: 12px 12px 0;
  font-size: 15px;
  line-height: 24px;
}

.crm-compositor-pie {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: 40px;
  padding: 4px 4px 4px 12px;
}

.crm-compositor-acciones {
  display: flex;
  flex: none;
  align-items: center;
  gap: 4px;
  margin-left: -8px;
}

.crm-compositor-pista {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--crm-dim);
  font-size: 12px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-compositor-cuenta {
  flex: none;
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 16px;
}

.crm-compositor-cuenta[data-lleno] {
  color: var(--crm-error);
}

.crm-compositor-enviar {
  flex: none;
}

/* Capa: lo que el texto ES, pintado sobre el campo (una matrícula en su placa).
 * El campo sigue debajo, con el foco y el texto, pero sin pintarlo. */
.crm-compositor-capa {
  position: absolute;
  z-index: 1;
  top: 12px;
  right: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  min-height: 48px;
  pointer-events: none;
}

.crm-compositor[data-capa] .crm-area .crm-entrada-control {
  min-height: 72px;
  color: transparent;
  caret-color: transparent;
}

.crm-compositor[data-capa] .crm-area .crm-entrada-control::selection {
  background: transparent;
}

.crm-compositor-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  color: var(--crm-error);
  font-size: 13px;
  line-height: 20px;
}

.crm-compositor-error svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  stroke-width: 1.6;
}

/* Tacto: el texto a 16 para que iOS no amplíe; la caja ya mide 48. */
@media (pointer: coarse) {
  .crm-compositor .crm-area .crm-entrada-control {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* El autocompletar buscando: el filo bajo el campo se queda quieto (lo dice aria-busy). */
  .crm-autocompletar[data-cargando] > .crm-entrada::after {
    animation: none;
    background: var(--crm-acento-linea);
  }

  /* El compositor trabajando: el filo se queda quieto (la ocupación la dice aria-busy y el enviar). */
  .crm-compositor[data-cargando] .crm-compositor-caja::before {
    animation: none;
    background: var(--crm-acento-linea);
  }

  /* El progreso sin cifra: barra quieta; la anchura cambia sin animar. */
  .crm-progreso-hecho {
    transition: none;
  }

  .crm-progreso[data-indeterminado][data-estado="en-curso"] .crm-progreso-hecho {
    animation: none;
    background: var(--crm-acento-linea);
  }

  /* La zona ocupada sin progreso: barra quieta en lugar del filo. */
  .crm-zona-progreso[data-indeterminado] .crm-zona-progreso-hecho {
    animation: none;
    background: var(--crm-acento-linea);
  }

  .crm-boton,
  .crm-boton-icono[data-flecha] svg,
  .crm-opcion-fila::before,
  .crm-interruptor-mando,
  .crm-conmutador[data-listo] .crm-conmutador-indicador,
  .crm-aviso-cerrar,
  .crm-tostada-cerrar,
  .crm-tostada-accion {
    transition-property: background-color, border-color, color, opacity;
  }

  .crm-tecla[data-pulsada],
  .crm-boton:active,
  .crm-boton-solo-icono:active,
  .crm-tostada-accion:active,
  .crm-aviso-cerrar:active,
  .crm-tostada-cerrar:active,
  .crm-paso-boton:active svg,
  button.crm-valoracion-estrella:active svg,
  .crm-boton:hover .crm-boton-icono[data-flecha] svg {
    transform: none;
  }

  .crm-selector-lista[data-state="open"],
  .crm-casilla-marca svg,
  .crm-radio-punto,
  .crm-tostada,
  .crm-boton-giro,
  .crm-estado[data-estado="vivo"] .crm-estado-punto::after,
  .crm-esqueleto::after,
  .crm-contador[data-sube],
  .crm-tostada-giro,
  .crm-interruptor[data-cargando] .crm-interruptor-mando,
  .crm-boton[data-confirmando]::before {
    animation: none;
  }

  .crm-cargando[data-progreso] .crm-cargando-filo {
    background-position: 0 0;
    transition: none;
  }

  /* La vida de la tostada sigue contando, pero no se dibuja. */
  .crm-tostada-vida,
  .crm-esqueleto::after {
    display: none;
  }

  /* Sin luz que corre: queda un tramo quieto de acento y el texto «Cargando…». */
  .crm-boton[data-cargando]::before,
  .crm-cargando-filo {
    animation: none;
    background-position: 50% 0;
  }
}

/* ── Zona para soltar archivos ──────────────────────────────────────── */
/*
 * Una sola jerarquía: qué se suelta (14/500), cómo elegirlo (13, en enlace)
 * y qué vale (12). A su medida, sin alto mínimo inventado. Filete
 * discontinuo de 1 px en reposo; encima con un archivo, el filete se cierra
 * (continuo) y pasa a verde, con el fondo apenas teñido.
 */
.crm-zona {
  display: grid;
  gap: 8px;
  min-width: 0;
  container: crm-zona / inline-size;
}

.crm-zona-area {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 12px;
  box-sizing: border-box;
  padding: 24px;
  border: 1px dashed var(--crm-line-2);
  background: transparent;
  color: var(--crm-text-2);
  font-family: var(--crm-sans);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--crm-t-color) var(--crm-snap), background-color var(--crm-t-color) var(--crm-snap);
}

.crm-zona-area:hover,
.crm-zona[data-crm-forzar="hover"] .crm-zona-area {
  border-color: var(--crm-control);
  background: var(--crm-panel);
  transition-duration: 0ms;
}

/* El input es real (teclado, tacto, formularios) pero no se ve: el foco se pinta en la zona, un solo anillo. */
.crm-zona-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  opacity: 0;
  white-space: nowrap;
}

.crm-zona-area:has(.crm-zona-input:focus-visible),
.crm-zona[data-crm-forzar="foco"] .crm-zona-area {
  outline: var(--crm-foco-ancho) solid var(--crm-acento);
  outline-offset: 2px;
}

.crm-zona-area[data-arrastre="vale"] {
  border-style: solid;
  border-color: var(--crm-acento);
  background: var(--crm-acento-suave);
}

.crm-zona-area[data-arrastre="no-vale"] {
  border-style: solid;
  border-color: var(--crm-error-linea);
  cursor: no-drop;
}

.crm-zona-area[data-error]:not([data-arrastre]) {
  border-color: var(--crm-error-linea);
}

.crm-zona-area[data-deshabilitada] {
  border-color: var(--crm-linea-apagada);
  background: transparent;
  color: var(--crm-dim);
  cursor: not-allowed;
}

.crm-zona-area[data-ocupada] {
  border-style: solid;
  border-color: var(--crm-line-2);
  background: transparent;
  cursor: progress;
}

/* Icono de 20 en su caja de 40, como los vacíos. */
.crm-zona-icono {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  border: 1px solid var(--crm-line-2);
  color: var(--crm-muted);
  transition: color var(--crm-t-color) var(--crm-snap), border-color var(--crm-t-color) var(--crm-snap);
}

.crm-zona-icono svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.6;
}

.crm-zona-area[data-arrastre="vale"] .crm-zona-icono {
  border-color: var(--crm-acento-linea);
  color: var(--crm-acento);
}

.crm-zona-area[data-deshabilitada] .crm-zona-icono {
  border-color: var(--crm-linea-apagada);
  color: var(--crm-dim);
}

.crm-zona-textos {
  display: grid;
  justify-items: inherit;
  gap: 2px;
  min-width: 0;
  max-width: 68ch;
}

.crm-zona-titulo {
  color: var(--crm-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  text-wrap: balance;
}

.crm-zona-area[data-deshabilitada] .crm-zona-titulo {
  color: var(--crm-dim);
}

.crm-zona-elegir {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--crm-text-2);
  font-size: 13px;
  line-height: 20px;
}

.crm-zona-enlace {
  text-decoration: underline;
  text-decoration-color: var(--crm-control);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.crm-zona-area:hover .crm-zona-enlace {
  text-decoration-color: var(--crm-text-2);
}

.crm-zona-area[data-deshabilitada] :is(.crm-zona-elegir, .crm-zona-enlace) {
  color: var(--crm-dim);
  text-decoration-color: var(--crm-linea-apagada);
}

/* La tecla solo se enseña con el foco puesto (es cuando sirve). */
.crm-zona-tecla {
  display: none;
}

.crm-zona-area:has(.crm-zona-input:focus-visible) .crm-zona-tecla,
.crm-zona[data-crm-forzar="foco"] .crm-zona-tecla {
  display: inline-flex;
}

.crm-zona-descripcion {
  margin-top: 2px;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
  text-wrap: pretty;
}

.crm-zona-area[data-deshabilitada] .crm-zona-descripcion {
  color: var(--crm-dim);
}

/* Progreso: barra de 2 px al pie, dentro del filete. Sin cifra: el filo de luz. */
.crm-zona-progreso {
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  overflow: hidden;
  background: var(--crm-line);
}

.crm-zona-progreso-hecho {
  display: block;
  width: 0;
  height: 100%;
  background: var(--crm-acento);
  transition: width var(--crm-t-gesto) var(--crm-curva);
}

.crm-zona-progreso[data-indeterminado] .crm-zona-progreso-hecho {
  width: 100%;
  background: linear-gradient(90deg, transparent, var(--crm-acento) 50%, transparent) no-repeat;
  background-size: 40% 100%;
  background-position: -40% 0;
  animation: crm-filo-continuo var(--crm-t-filo) var(--crm-curva) infinite;
}

/* Fila: una línea de 56 para zonas secundarias (volver a leer, adjuntar). */
.crm-zona[data-tamano="fila"] .crm-zona-area {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  justify-items: start;
  gap: 12px;
  min-height: 56px;
  padding: 8px 12px;
  text-align: start;
}

.crm-zona[data-tamano="fila"] .crm-zona-icono {
  width: auto;
  height: auto;
  border: 0;
}

.crm-zona[data-tamano="fila"] .crm-zona-titulo {
  font-size: 13px;
  line-height: 20px;
}

/*
 * La fila mide 56 en una línea con su filete dentro (§1): 1 + 8 + 38 (título
 * 20, descripción 16 con su 2 encima, sin hueco de rejilla) + 8 + 1. A menos
 * de 400 la pista baja bajo el texto: 1 + 8 + 38 + 12 + 28 + 8 + 1 = 96. Nada
 * se oculta ni se achica; las dos en la escala de 4.
 */
.crm-zona[data-tamano="fila"] .crm-zona-textos {
  gap: 0;
}

.crm-zona[data-tamano="fila"] .crm-zona-elegir {
  display: none;
}

/* El botón de la fila es solo la pista visual (la zona entera es el control): 28 de alto, contorno. */
.crm-zona-boton {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--crm-line-2);
  color: var(--crm-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
}

.crm-zona-area:hover .crm-zona-boton {
  background: var(--crm-panel-2);
}

.crm-zona-area[data-deshabilitada] .crm-zona-boton {
  border-color: var(--crm-linea-apagada);
  background: transparent;
  color: var(--crm-dim);
}

@container crm-zona (max-width: 399.98px) {
  .crm-zona-area {
    padding: 16px;
  }

  .crm-zona[data-tamano="fila"] .crm-zona-area {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .crm-zona[data-tamano="fila"] .crm-zona-boton {
    grid-column: 2;
    justify-self: start;
  }
}

.crm-zona-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  color: var(--crm-error);
  font-size: 13px;
  line-height: 20px;
}

.crm-zona-error svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  stroke-width: 1.6;
}

/* Los archivos que entraron: filas de 40 con nombre, peso y estado. */
.crm-zona-archivos {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--crm-line);
  list-style: none;
}

.crm-zona-archivo {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: 40px;
  padding: 0 8px;
  border-bottom: 1px solid var(--crm-line);
  font-size: 13px;
  line-height: 20px;
}

/* El chip de estado no cede ancho (desde 0.6.1 el Estado puede partirse): cede el nombre, que lleva su consejo. */
.crm-zona-archivo > .crm-estado {
  flex: none;
}

.crm-zona-archivo > svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--crm-muted);
  stroke-width: 1.6;
}

/*
 * El filete de la fila va dentro de su medida (§1): 8 arriba y 7 abajo. Una
 * línea (nombre): 40, su mínimo; con detalle debajo: 8 + 20 + 16 + 7 + 1 = 52.
 */
.crm-zona-archivo-textos {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  padding-block: 8px 7px;
}

.crm-zona-archivo-nombre,
.crm-zona-archivo-detalle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-zona-archivo-nombre {
  color: var(--crm-text);
}

.crm-zona-archivo-detalle {
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
}

/*
 * El detalle de un archivo con error es el mensaje de error: reflujo, nunca «…» (§14). Cada línea más suma 16
 * (8 + 20 + 16 × líneas + 7 + 1); un detalle normal («3 páginas») sigue en una línea.
 */
.crm-zona-archivo[data-estado="error"] .crm-zona-archivo-detalle {
  overflow: visible;
  overflow-wrap: anywhere;
  white-space: normal;
}

.crm-zona-archivo-peso {
  flex: none;
  color: var(--crm-dim);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 16px;
}

@media (forced-colors: active) {
  .crm-zona-area[data-arrastre="vale"] {
    border-color: Highlight;
  }

  .crm-zona-progreso-hecho {
    background: Highlight;
  }
}

/* ══ Pasos ═══════════════════════════════════════════════════════════ */
/*
 * Un recorrido con final. Cada paso: filete de 2 arriba (neutro si está
 * hecho, acento el actual, apagado el que falta) y, 8 debajo, su número en
 * una tecla de 20 (mono 11; un visto de 14 si está hecho) y su nombre a
 * 13/20. Sin rellenos: lo único verde es el filete del actual. Forma por
 * el ancho que hace falta (lo mide la pieza con la sonda): `data-forma="fila"`
 * si todos los nombres caben enteros; `"estrecha"` si no: «Paso 1 de 5 ·
 * Datos» y solo los filetes. Antes de medir, la consulta de contenedor: < 560.
 */
.crm-pasos {
  --crm-pasos-tecla: 20px;
  --crm-pasos-aire: 8px;
  --crm-pasos-hueco: 8px;

  container: crm-pasos / inline-size;
  display: grid;
  gap: 8px;
  min-width: 0;
  color: var(--crm-text-2);
  font-family: var(--crm-sans);
}

.crm-pasos :where(*),
.crm-pasos ::before,
.crm-pasos ::after {
  box-sizing: border-box;
}

.crm-pasos-resumen {
  display: none;
  margin: 0;
  overflow: hidden;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-pasos-cifra {
  font-variant-numeric: tabular-nums;
}

.crm-pasos-resumen-nombre {
  color: var(--crm-text);
  font-weight: 500;
}

.crm-pasos-lista {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: var(--crm-pasos-hueco);
  margin: 0;
  padding: 0;
  list-style: none;
}

.crm-pasos-paso {
  min-width: 0;
  border-top: 2px solid var(--crm-line-2);
}

.crm-pasos-paso[data-estado="hecho"] {
  border-top-color: var(--crm-muted);
}

.crm-pasos-paso[data-estado="actual"] {
  border-top-color: var(--crm-acento);
}

/* Pide revisión: filete de aviso y su icono en el número (nunca solo el color). */
.crm-pasos-paso[data-estado="revisar"] {
  border-top-color: var(--crm-aviso);
}

.crm-pasos-paso[data-estado="revisar"] .crm-pasos-numero {
  border-color: var(--crm-aviso-linea);
  color: var(--crm-aviso);
}

.crm-pasos-cuerpo {
  display: flex;
  align-items: center;
  gap: var(--crm-pasos-aire);
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 8px 0 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 13px;
  line-height: 20px;
  text-align: left;
}

button.crm-pasos-cuerpo {
  cursor: pointer;
}

button.crm-pasos-cuerpo:focus-visible {
  outline: var(--crm-foco-ancho) solid var(--crm-acento);
  outline-offset: 2px;
}

.crm-pasos-numero {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: var(--crm-pasos-tecla);
  height: var(--crm-pasos-tecla);
  border: 1px solid var(--crm-line-2);
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  line-height: 16px;
}

.crm-pasos-numero svg {
  width: 14px;
  height: 14px;
}

.crm-pasos-nombre {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sonda de medida (la pone y la quita la pieza): el nombre con su letra a 500, entero; caja de 0 que no desborda nada. */
.crm-pasos-sonda {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
}

.crm-pasos-paso[data-estado="actual"] .crm-pasos-numero {
  border-color: var(--crm-control);
  color: var(--crm-text);
}

.crm-pasos-paso[data-estado="actual"] .crm-pasos-nombre {
  color: var(--crm-text);
  font-weight: 500;
}

.crm-pasos-paso[data-estado="pendiente"] .crm-pasos-nombre {
  color: var(--crm-muted);
}

button.crm-pasos-cuerpo:not([aria-disabled="true"]):hover .crm-pasos-nombre {
  color: var(--crm-text);
}

/* Un paso con acción que no está disponible: se enfoca (su consejo dice por qué), pero se lee apagado y no responde. */
button.crm-pasos-cuerpo[aria-disabled="true"] {
  cursor: not-allowed;
}

.crm-pasos-paso[data-deshabilitado] .crm-pasos-nombre,
.crm-pasos-paso[data-deshabilitado] .crm-pasos-numero {
  border-color: var(--crm-linea-apagada);
  color: var(--crm-dim);
}

@container crm-pasos (max-width: 559.98px) {
  .crm-pasos-resumen {
    display: block;
  }

  /* Solo los filetes; número y nombre siguen para el lector. Un paso pulsable conserva 24 de alto para el dedo. */
  .crm-pasos-cuerpo {
    min-height: 0;
    padding: 0;
  }

  button.crm-pasos-cuerpo {
    min-height: 24px;
  }

  .crm-pasos-numero,
  .crm-pasos-nombre {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /*
   * Con acciones por paso, cada paso es un destino: en vez de esconder los
   * nombres, los pasos van en columna (filete de 2 encima de cada uno), con
   * número y nombre a la vista y 32 de alto (40 al tacto).
   */
  .crm-pasos[data-con-acciones] .crm-pasos-resumen {
    display: none;
  }

  .crm-pasos[data-con-acciones] .crm-pasos-lista {
    grid-auto-flow: row;
    gap: 4px;
  }

  .crm-pasos[data-con-acciones] .crm-pasos-cuerpo {
    min-height: 32px;
    padding: 4px 0 0;
  }

  .crm-pasos[data-con-acciones] .crm-pasos-numero {
    position: static;
    width: 20px;
    height: 20px;
    overflow: visible;
    clip-path: none;
  }

  .crm-pasos[data-con-acciones] .crm-pasos-nombre {
    position: static;
    width: auto;
    height: auto;
    clip-path: none;
  }
}

/*
 * Medido: caben todos los nombres. Aunque la pieza mida menos de 560 (un
 * panel medio de 519 con cinco pasos cortos), la fila de siempre: tecla y
 * nombre enteros, sin la línea de resumen.
 */
@container crm-pasos (max-width: 559.98px) {
  .crm-pasos[data-forma="fila"] .crm-pasos-resumen {
    display: none;
  }

  .crm-pasos[data-forma="fila"] .crm-pasos-lista {
    grid-auto-flow: column;
    gap: var(--crm-pasos-hueco);
  }

  .crm-pasos[data-forma="fila"] .crm-pasos-cuerpo {
    min-height: 0;
    padding: 8px 0 0;
  }

  .crm-pasos[data-forma="fila"] .crm-pasos-numero,
  .crm-pasos[data-forma="fila"] .crm-pasos-nombre {
    position: static;
    height: auto;
    clip-path: none;
  }

  .crm-pasos[data-forma="fila"] .crm-pasos-numero {
    width: var(--crm-pasos-tecla);
    height: var(--crm-pasos-tecla);
    overflow: visible;
  }

  .crm-pasos[data-forma="fila"] .crm-pasos-nombre {
    width: auto;
    overflow: hidden;
  }
}

/*
 * Medido: no caben (doce pasos, nombres largos), a cualquier ancho. La misma
 * forma estrecha de < 560: nunca una fila de nombres cortados con elipsis.
 */
.crm-pasos[data-forma="estrecha"] .crm-pasos-resumen {
  display: block;
}

.crm-pasos[data-forma="estrecha"] .crm-pasos-cuerpo {
  min-height: 0;
  padding: 0;
}

.crm-pasos[data-forma="estrecha"] button.crm-pasos-cuerpo {
  min-height: 24px;
}

.crm-pasos[data-forma="estrecha"] .crm-pasos-numero,
.crm-pasos[data-forma="estrecha"] .crm-pasos-nombre {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.crm-pasos[data-forma="estrecha"][data-con-acciones] .crm-pasos-resumen {
  display: none;
}

.crm-pasos[data-forma="estrecha"][data-con-acciones] .crm-pasos-lista {
  grid-auto-flow: row;
  gap: 4px;
}

.crm-pasos[data-forma="estrecha"][data-con-acciones] .crm-pasos-cuerpo {
  min-height: 32px;
  padding: 4px 0 0;
}

.crm-pasos[data-forma="estrecha"][data-con-acciones] .crm-pasos-numero {
  position: static;
  width: var(--crm-pasos-tecla);
  height: var(--crm-pasos-tecla);
  overflow: visible;
  clip-path: none;
}

.crm-pasos[data-forma="estrecha"][data-con-acciones] .crm-pasos-nombre {
  position: static;
  width: auto;
  height: auto;
  clip-path: none;
}

@media (pointer: coarse) {
  .crm-pasos[data-con-acciones] button.crm-pasos-cuerpo {
    min-height: 40px;
  }

  .crm-pasos[data-forma="estrecha"][data-con-acciones] button.crm-pasos-cuerpo {
    min-height: 40px;
  }
}

@media (forced-colors: active) {
  .crm-pasos-paso[data-estado="actual"] {
    border-top-color: Highlight;
  }
}

/* ══ Selector de varios valores ══════════════════════════════════════ */
/*
 * El campo es el del Selector (32, o 28 en filtro): resume lo elegido y, con
 * más de dos, la cuenta en mono a la derecha. La lista suma una barra de 32
 * con la cuenta y las acciones de lote (enlaces de texto, sin rellenos), y
 * cada opción lleva su casilla de 14: filete de control y visto de acento
 * al elegir (sin relleno verde). Debajo del campo, si se pide, lo elegido en
 * etiquetas de 24 a 4 de hueco.
 */
.crm-selector-multiple {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.crm-selector-cuenta {
  flex: none;
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  line-height: 16px;
}

.crm-selector-casilla {
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  border: 1px solid var(--crm-control);
}

.crm-selector-casilla[data-marcada] {
  border-color: var(--crm-acento);
}

.crm-selector-casilla svg {
  width: 12px;
  height: 12px;
}

.crm-selector-opcion[data-disabled] .crm-selector-casilla {
  border-color: var(--crm-linea-apagada);
}

.crm-selector-multiple-barra {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  min-height: 32px;
  padding: 0 12px;
  border-bottom: 1px solid var(--crm-line);
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
}

.crm-selector-multiple-cuenta {
  flex: 1;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}

.crm-selector-multiple-fuera {
  color: var(--crm-dim);
}

.crm-selector-multiple-accion {
  flex: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--crm-text-2);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--crm-line-2);
  text-underline-offset: 2px;
}

.crm-selector-multiple-accion:hover {
  color: var(--crm-text);
  text-decoration-color: currentColor;
}

.crm-selector-multiple-accion:focus-visible {
  outline: var(--crm-foco-ancho) solid var(--crm-acento);
  outline-offset: 2px;
}

.crm-selector-elegidas {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

.crm-selector-elegidas .crm-etiqueta {
  max-width: 100%;
}

/* ══ Deslizador ══════════════════════════════════════════════════════ */
/*
 * Un valor en un rango: alto de control (32; 40 al tacto), pista de 4 en
 * panel 3, tramo recorrido en el color de cuerpo (no es un estado: nunca
 * verde) y mando cuadrado de 16 (20 al tacto) con filete de control sobre
 * el lienzo. Foco: el anillo único en el mando. Inválido: mando y tramo en
 * error. Deshabilitado: contorno apagado. Solo lectura: se lee igual, no se
 * mueve. Sin valor: el mando en el mínimo, con filete apagado.
 */
.crm-deslizador {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 80px;
  height: 32px;
  touch-action: none;
  user-select: none;
}

.crm-deslizador-pista {
  position: relative;
  flex: 1 1 auto;
  height: 4px;
  overflow: hidden;
  background: var(--crm-panel-3);
}

.crm-deslizador-tramo {
  position: absolute;
  height: 100%;
  background: var(--crm-text-2);
}

.crm-deslizador-mando {
  display: block;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border: 1px solid var(--crm-control);
  background: var(--crm-bg);
  cursor: grab;
  transition:
    border-color var(--crm-t-color) ease-out,
    background-color var(--crm-t-color) ease-out;
}

.crm-deslizador-mando:focus-visible {
  outline: var(--crm-foco-ancho) solid var(--crm-acento);
  outline-offset: 2px;
}

@media (hover: hover) {
  .crm-deslizador:not([data-disabled]) .crm-deslizador-mando:hover {
    border-color: var(--crm-text);
  }
}

.crm-deslizador-mando:active {
  cursor: grabbing;
}

.crm-deslizador[data-invalido] .crm-deslizador-mando {
  border-color: var(--crm-error);
}

.crm-deslizador[data-invalido] .crm-deslizador-tramo {
  background: var(--crm-error);
}

.crm-deslizador[data-sin-valor] .crm-deslizador-mando {
  border-color: var(--crm-line-2);
}

.crm-deslizador[data-disabled]:not([data-solo-lectura]) .crm-deslizador-pista {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--crm-linea-apagada);
}

.crm-deslizador[data-disabled]:not([data-solo-lectura]) .crm-deslizador-tramo {
  background: var(--crm-linea-apagada);
}

.crm-deslizador[data-disabled]:not([data-solo-lectura]) .crm-deslizador-mando {
  border-color: var(--crm-linea-apagada);
  cursor: not-allowed;
}

.crm-deslizador[data-solo-lectura] .crm-deslizador-mando {
  cursor: default;
}

@media (pointer: coarse) {
  .crm-deslizador {
    height: 40px;
  }

  .crm-deslizador-mando {
    width: 20px;
    height: 20px;
  }
}

/* ══ Selector de color ═══════════════════════════════════════════════ */
/*
 * Muestra cuadrada del alto del control (32; 40 al tacto) con filete de
 * control y, encima e invisible, el selector del sistema; al lado, el
 * código en mono de 12 caracteres de ancho y el nombre. El color de la
 * muestra es un dato (en línea), no un token. Sin color válido, la muestra
 * va vacía con una diagonal (no negra). Foco: el anillo único en la muestra.
 */
.crm-color {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.crm-color-muestra {
  position: relative;
  flex: none;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  border: 1px solid var(--crm-control);
  background-clip: padding-box;
}

.crm-color-muestra[data-sin-color] {
  background-image: linear-gradient(to top right, transparent calc(50% - 0.5px), var(--crm-line-2) calc(50% - 0.5px), var(--crm-line-2) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}

.crm-color-muestra:has(.crm-color-nativo:focus-visible) {
  outline: var(--crm-foco-ancho) solid var(--crm-acento);
  outline-offset: 2px;
}

.crm-color-nativo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.crm-color-hex {
  flex: none;
  width: 12ch;
}

.crm-color-nombre {
  min-width: 0;
  overflow: hidden;
  color: var(--crm-text-2);
  font-size: 13px;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-color[data-deshabilitado] .crm-color-muestra {
  border-color: var(--crm-linea-apagada);
}

.crm-color[data-deshabilitado] .crm-color-nativo {
  cursor: not-allowed;
}

.crm-color[data-deshabilitado] .crm-color-nombre {
  color: var(--crm-dim);
}

@media (pointer: coarse) {
  .crm-color-muestra {
    width: 40px;
    height: 40px;
  }
}

/* ══ Autocompletar ═══════════════════════════════════════════════════ */
/*
 * El campo es una Entrada con lupa (un solo anillo: su borde a acento). Bajo
 * él, la línea de estado (12/16 en secundario) y la lista: opciones de 40
 * (título 13/20 a 500 y detalle 12/16), activa en panel 2 al instante,
 * elegida con la marca de acento de 2 y panel 3 (§7). En capa, la lista
 * flota en el nivel 1 (panel 2, filete line-2, sombra de capa) y desplaza
 * dentro hasta 280. Buscando, un filo de luz bajo el campo.
 */
.crm-autocompletar {
  position: relative;
  display: grid;
  gap: 8px;
  min-width: 0;
}

.crm-autocompletar[data-cargando] > .crm-entrada::after {
  content: "";
  position: absolute;
  inset: auto -1px -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--crm-acento-linea), transparent);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  animation: crm-filo var(--crm-t-filo) var(--crm-curva) infinite;
}

.crm-autocompletar-resumen {
  margin: 0;
  color: var(--crm-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 16px;
}

.crm-autocompletar-lista {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crm-autocompletar[data-presentacion="capa"] .crm-autocompletar-lista {
  position: absolute;
  z-index: 60;
  top: calc(var(--crm-entrada-alto, 32px) + 4px);
  right: 0;
  left: 0;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--crm-line-2);
  background: var(--crm-panel-2);
  box-shadow: var(--crm-sombra-capa);
}

/*
 * Fila de lista de FUNDAMENTOS §2: 36 con una línea (4 + 20 + 4, centrada) y
 * la cómoda de 44 cuando la lista trae detalle (4 + 20 + 16 + 4): la frase
 * entera en su línea, sin recortar la descripción, y la misma altura en toda
 * la lista.
 */
.crm-autocompletar-opcion {
  user-select: none;
  -webkit-touch-callout: none;
  position: relative;
  display: grid;
  align-content: center;
  gap: 0;
  min-height: 36px;
  padding: 4px 8px;
  color: var(--crm-text-2);
  cursor: pointer;
  transition: background-color var(--crm-t-color) ease-out;
}

.crm-autocompletar-lista[data-con-detalle] .crm-autocompletar-opcion {
  min-height: 44px;
}

.crm-autocompletar-opcion[data-activa] {
  background: var(--crm-panel-2);
  transition-duration: 0ms;
}

.crm-autocompletar[data-presentacion="capa"] .crm-autocompletar-opcion[data-activa] {
  background: var(--crm-panel-3);
}

.crm-autocompletar-opcion[aria-selected="true"] {
  background: var(--crm-panel-3);
  box-shadow: inset 2px 0 0 var(--crm-acento);
}

.crm-autocompletar-opcion[aria-disabled="true"] {
  color: var(--crm-dim);
  cursor: not-allowed;
}

.crm-autocompletar[data-solo-lectura] .crm-autocompletar-opcion {
  cursor: default;
}

.crm-autocompletar-etiqueta {
  overflow: hidden;
  color: var(--crm-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.005em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-autocompletar-opcion[aria-disabled="true"] .crm-autocompletar-etiqueta {
  color: var(--crm-dim);
}

.crm-autocompletar-detalle {
  overflow: hidden;
  color: var(--crm-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-autocompletar-vacio {
  padding: 24px 8px;
  color: var(--crm-muted);
  font-size: 13px;
  line-height: 20px;
  text-align: center;
}

/* ══ Título editable ═════════════════════════════════════════════════ */
/*
 * Hereda la letra del encabezado que lo contiene (página, sección…). En
 * reposo, un botón sin caja: el texto y un lápiz de 16 en secundario que
 * aparece al pasar o al enfocar (al tacto, siempre). El foco es el anillo
 * único. Editando, un campo con la misma letra en el mismo sitio: borde de
 * acento de 1 (el foco del campo) y 4 de aire que se compensan hacia fuera,
 * para que el texto no se mueva. Vacío, el texto de reserva en pista.
 */
.crm-titulo-editable {
  display: inline-flex;
  max-width: 100%;
  min-width: 0;
  vertical-align: top;
}

.crm-titulo-editable-boton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: text;
}

.crm-titulo-editable-boton:focus-visible {
  outline: var(--crm-foco-ancho) solid var(--crm-acento);
  outline-offset: 2px;
}

.crm-titulo-editable-texto {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-titulo-editable-boton[data-vacio] .crm-titulo-editable-texto {
  color: var(--crm-dim);
}

.crm-titulo-editable-icono {
  --crm-boton-icono: 16px;
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 16px;
  height: 16px;
  color: var(--crm-muted);
  opacity: 0;
  transition: opacity var(--crm-t-color) ease-out;
}

.crm-titulo-editable-icono svg {
  width: 16px;
  height: 16px;
}

.crm-titulo-editable-boton:focus-visible .crm-titulo-editable-icono,
.crm-titulo-editable[data-ocupado] .crm-titulo-editable-icono {
  opacity: 1;
}

@media (hover: hover) {
  .crm-titulo-editable-boton:not([aria-disabled="true"]):hover .crm-titulo-editable-icono {
    opacity: 1;
    color: var(--crm-text);
  }
}

@media (pointer: coarse) {
  .crm-titulo-editable-icono {
    opacity: 1;
  }
}

.crm-titulo-editable-boton[aria-disabled="true"] {
  cursor: default;
}

.crm-titulo-editable-campo {
  box-sizing: border-box;
  width: min(100%, 68ch);
  margin: -5px;
  padding: 4px;
  border: 1px solid var(--crm-acento);
  border-radius: 0;
  outline: none;
  background: var(--crm-panel);
  color: var(--crm-text);
  font: inherit;
  letter-spacing: inherit;
}

.crm-titulo-editable-campo::placeholder {
  color: var(--crm-dim);
  opacity: 1;
}

/* Firma: cita local en dos controles parejos, día y minuto sin reinterpretación. */
.crm-fecha-hora { container-type: inline-size; margin: 0; padding: 0; border: 0; min-width: 0; color: var(--crm-text); font-family: var(--crm-sans); }
.crm-fecha-hora-leyenda { padding: 0; margin-bottom: 8px; font-size: 13px; line-height: 20px; font-weight: 500; overflow-wrap: anywhere; }
.crm-fecha-hora-controles { display: grid; grid-template-columns: minmax(0, 2fr) minmax(96px, 1fr) auto; gap: 8px; align-items: start; }
.crm-fecha-hora-controles > .crm-boton { margin-top: 24px; }
.crm-fecha-hora-controles > .crm-ctl-campo { min-width: 0; }
.crm-fecha-hora[data-lectura] .crm-fecha-hora-controles { grid-template-columns: minmax(0, 2fr) minmax(96px, 1fr); }
.crm-fecha-hora-zona { margin: 6px 0 0; color: var(--crm-muted); font-size: 12px; line-height: 16px; overflow-wrap: anywhere; }
/* En un slot muy estrecho el día usa su fila; la hora completa nunca se recorta. */
@container (max-width: 240px) {
  .crm-fecha-hora .crm-fecha-hora-controles,
  .crm-fecha-hora[data-lectura] .crm-fecha-hora-controles { grid-template-columns: minmax(96px, 1fr) auto; }
  .crm-fecha-hora-controles > .crm-ctl-campo:first-child { grid-column: 1 / -1; }
}

.crm-fecha-hora[data-lectura] .crm-fecha { color: var(--crm-text); cursor: default; }

/* ══ Fechas: SelectorFecha, RangoFechas, FechaAmplia y Calendario ═══ */
/*
 * Hoja propia de la familia de fechas (RFC 0011). Sale de 10-controles.css
 * entera y se concatena detrás de ella (el build ordena por nombre): usa sus
 * animaciones de capa (crm-ctl-capa-*). Solo variables --crm-*, tiempos por
 * token y radio 0. Cotas en docs/decisiones/0011-anexos/contrato-visual.md.
 */

/* El disparador es un Selector (campo o filtro) con el calendario de 14/16 delante. */
.crm-entrada.crm-fecha {
  justify-content: flex-start;
}

.crm-entrada.crm-fecha .crm-selector-valor {
  flex: 1;
  font-variant-numeric: tabular-nums;
}

.crm-entrada.crm-fecha[data-variante="filtro"] .crm-selector-valor {
  flex: none;
}

.crm-fecha-icono {
  display: grid;
  flex: none;
  color: var(--crm-muted);
}

.crm-fecha-icono svg {
  width: 16px;
  height: 16px;
}

.crm-fecha:is([data-tamano="mini"], [data-tamano="compacto"]) .crm-fecha-icono svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.5;
}

.crm-fecha:is([data-abierto]) .crm-fecha-icono {
  color: var(--crm-text);
}

/* Solo lectura: se lee y se enfoca, pero no promete una capa. */
.crm-fecha[data-solo-lectura] {
  cursor: default;
}

.crm-fecha[data-solo-lectura] .crm-selector-chevron {
  visibility: hidden;
}

/* Texto solo para lectores de pantalla («, solo lectura»). */
.crm-fecha-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* El que hace valer «requerido»: fuera de la vista y del tabulador, pero validable. */
.crm-fecha-validar {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* «Elige un día.» bajo el disparador cuando el formulario se envía sin día (y el Campo no dice nada). */
.crm-fecha-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 4px;
  color: var(--crm-error);
  font-family: var(--crm-sans);
  font-size: 12px;
  line-height: 16px;
}

.crm-fecha-error svg {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 1px;
}

/* La capa: elevada (panel-2, filete line-2, sombra de capa), relleno de 8, nace de su ancla. */
.crm-fecha-capa {
  z-index: 60;
  display: grid;
  gap: 8px;
  box-sizing: border-box;
  max-width: calc(100vw - 32px);
  padding: 8px;
  border: 1px solid var(--crm-line-2);
  border-radius: 0;
  background: var(--crm-panel-2);
  box-shadow: var(--crm-sombra-capa);
  color: var(--crm-text-2);
  font-family: var(--crm-sans);
  transform-origin: var(--radix-popover-content-transform-origin);
}

.crm-fecha-capa[data-state="open"] {
  animation: crm-ctl-capa-entra var(--crm-t-entrada) var(--crm-snap);
}

.crm-fecha-capa[data-side="top"][data-state="open"] {
  animation-name: crm-ctl-capa-entra-arriba;
}

.crm-fecha-capa[data-state="closed"] {
  animation: crm-ctl-capa-sale var(--crm-t-salida) ease-out forwards;
}

.crm-fecha-capa *,
.crm-fecha-capa *::before,
.crm-fecha-capa *::after,
.crm-fecha-amplia *,
.crm-fecha-amplia *::before,
.crm-fecha-amplia *::after {
  box-sizing: border-box;
}

/* Escribir el día: un campo de 28 en la cabecera de la capa. */
.crm-fecha-escribir {
  display: grid;
  gap: 4px;
}

.crm-fecha-escribir-control {
  width: 100%;
  height: 28px;
  margin: 0;
  padding: 0 8px;
  border: 1px solid var(--crm-line-2);
  border-radius: 0;
  background: var(--crm-panel);
  color: var(--crm-text);
  font-family: var(--crm-sans);
  font-size: 13px;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
  caret-color: var(--crm-acento);
}

.crm-fecha-escribir-control::placeholder {
  color: var(--crm-dim);
}

.crm-fecha-escribir-control:focus-visible {
  border-color: var(--crm-acento);
  outline: none;
}

.crm-fecha-escribir[data-error] .crm-fecha-escribir-control {
  border-color: var(--crm-error-linea);
}

/* El error se lee entero: reflujo en varias líneas, nunca recortado (FUNDAMENTOS §14). */
.crm-fecha-escribir-error {
  max-width: 224px;
  color: var(--crm-error);
  font-size: 12px;
  line-height: 16px;
}

/* Lo que ha entendido al escribir, antes de Intro: frase en muted con la tecla ↵. */
.crm-fecha-escribir-previa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 20px;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
}

.crm-fecha-escribir-previa[data-fuera] {
  color: var(--crm-aviso);
}

/* ── Calendario ─────────────────────────────────────────────────────── */

/* normal: 7 columnas de 32 (224); cabecera de 28 con mes y año de 24 y pasos de 24. */
.crm-calendario {
  display: grid;
  gap: 4px;
  width: 224px;
}

/* El mes a la vista, para los lectores de pantalla («Octubre de 2026», «Años 1940–1949»). */
.crm-calendario-anuncio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.crm-calendario-cabecera {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 28px;
}

.crm-calendario-hueco {
  flex: 1;
}

/* Mes y año: se tocan para saltar. Fantasmas de 24 a 13/500 con su chevron de 14. */
.crm-calendario-titulo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  margin: 0;
  padding: 0 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--crm-text);
  font-family: var(--crm-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--crm-t-salida) linear,
    color var(--crm-t-salida) linear;
}

.crm-calendario-titulo svg {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--crm-muted);
  transition: transform var(--crm-t-gesto) var(--crm-snap);
}

.crm-calendario-titulo[aria-expanded="true"] {
  background: var(--crm-panel-3);
}

.crm-calendario-titulo[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.crm-calendario-cifras {
  font-variant-numeric: tabular-nums;
}

.crm-calendario-paso {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--crm-muted);
  cursor: pointer;
  transition:
    background-color var(--crm-t-salida) linear,
    color var(--crm-t-salida) linear;
}

.crm-calendario-paso svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.5;
}

@media (hover: hover) {
  .crm-calendario-paso:hover:not(:disabled),
  .crm-calendario-titulo:hover:not(:disabled) {
    background: var(--crm-panel-3);
    color: var(--crm-text);
    transition-duration: 0ms;
  }
}

.crm-calendario-paso:active:not(:disabled) {
  transform: scale(0.96);
}

.crm-calendario-paso:disabled,
.crm-calendario-titulo:disabled {
  color: var(--crm-dim);
  cursor: not-allowed;
}

.crm-calendario-paso:focus-visible,
.crm-calendario-titulo:focus-visible,
.crm-calendario-dia:focus-visible,
.crm-calendario-celda:focus-visible {
  outline: var(--crm-foco-ancho) solid var(--crm-acento);
  outline-offset: -1px;
}

/* La caja de las tres vistas: la de meses y años mide lo mismo que la de días (nada se mueve). */
.crm-calendario-cuerpo {
  display: grid;
}

.crm-calendario-rejilla {
  width: 224px;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
}

.crm-calendario-rejilla th {
  height: 24px;
  padding: 0;
  color: var(--crm-dim);
  font-family: var(--crm-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-align: center;
}

.crm-calendario-rejilla td {
  width: 32px;
  height: 32px;
  padding: 0;
}

/* El tramo de un rango: un escalón de fondo de extremo a extremo. */
.crm-calendario-rejilla td[data-en-rango],
.crm-calendario-rejilla td[data-extremo="desde"],
.crm-calendario-rejilla td[data-extremo="hasta"] {
  background: var(--crm-panel-3);
}

.crm-calendario-dia,
.crm-calendario-celda {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--crm-text-2);
  font-family: var(--crm-sans);
  font-size: 13px;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color var(--crm-t-salida) linear;
}

@media (hover: hover) {
  .crm-calendario-dia:hover:not(:disabled),
  .crm-calendario-celda:hover:not(:disabled) {
    background: var(--crm-panel-3);
    color: var(--crm-text);
    transition-duration: 0ms;
  }
}

/* Fuera del mes (o de la década): en muted (se pueden elegir, así que cumplen el contraste de texto). */
.crm-calendario-rejilla td[data-fuera] .crm-calendario-dia,
.crm-calendario-celdas [data-fuera] .crm-calendario-celda {
  color: var(--crm-muted);
}

/* Hoy: en texto pleno a 500, con una raya de 2 px bajo la cifra (en ::before: convive con la marca del elegido). */
.crm-calendario-dia[data-hoy],
.crm-calendario-celda[data-hoy] {
  color: var(--crm-text);
  font-weight: 500;
}

.crm-calendario-dia[data-hoy]::before,
.crm-calendario-celda[data-hoy]::before {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 50%;
  width: 8px;
  height: 2px;
  margin-left: -4px;
  background: var(--crm-muted);
}

/* Elegido (§7): fondo panel-3 con filete de control, texto pleno a 500 y la marca de acento de 2 px abajo, en ::after. */
.crm-calendario-rejilla td[data-elegido] .crm-calendario-dia,
.crm-calendario-celdas [data-elegido] .crm-calendario-celda {
  background: var(--crm-panel-3);
  box-shadow: inset 0 0 0 1px var(--crm-control);
  color: var(--crm-text);
  font-weight: 500;
}

.crm-calendario-rejilla td[data-elegido] .crm-calendario-dia::after,
.crm-calendario-celdas [data-elegido] .crm-calendario-celda::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--crm-acento);
}

.crm-calendario-dia:disabled,
.crm-calendario-celda:disabled {
  color: var(--crm-dim);
  text-decoration: line-through;
  text-decoration-color: var(--crm-line-2);
  cursor: not-allowed;
}

/* Meses y años: un rótulo de 24 (la fila de las iniciales) y 3 filas de 4 que suman las 6 semanas. */
.crm-calendario-vista {
  display: grid;
  grid-template-rows: 24px auto;
}

.crm-calendario-rotulo {
  display: grid;
  place-items: center;
  margin: 0;
  color: var(--crm-dim);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

.crm-calendario-celdas {
  display: grid;
}

.crm-calendario-celdas [role="row"] {
  display: grid;
  grid-template-columns: repeat(4, 56px);
}

.crm-calendario-celdas .crm-calendario-celda,
.crm-calendario-vacia {
  width: 56px;
  height: 64px;
}

/* ── Táctil: el calendario de 48 de FechaAmplia (336 = 7 × 48) ──────── */

.crm-calendario[data-tamano="tactil"] {
  width: 336px;
}

.crm-calendario[data-tamano="tactil"] .crm-calendario-cabecera {
  height: 48px;
}

.crm-calendario[data-tamano="tactil"] .crm-calendario-titulo {
  gap: 6px;
  height: 48px;
  padding: 0 12px;
  font-size: 15px;
  line-height: 24px;
}

.crm-calendario[data-tamano="tactil"] :is(.crm-calendario-titulo, .crm-calendario-paso) svg {
  width: 16px;
  height: 16px;
}

.crm-calendario[data-tamano="tactil"] .crm-calendario-paso {
  width: 48px;
  height: 48px;
}

.crm-calendario[data-tamano="tactil"] .crm-calendario-rejilla {
  width: 336px;
}

.crm-calendario[data-tamano="tactil"] .crm-calendario-rejilla th {
  height: 32px;
}

.crm-calendario[data-tamano="tactil"] .crm-calendario-rejilla td,
.crm-calendario[data-tamano="tactil"] .crm-calendario-dia {
  width: 48px;
  height: 48px;
}

.crm-calendario[data-tamano="tactil"] :is(.crm-calendario-dia, .crm-calendario-celda) {
  font-size: 15px;
  line-height: 24px;
}

.crm-calendario[data-tamano="tactil"] :is(.crm-calendario-dia, .crm-calendario-celda)[data-hoy]::before {
  bottom: 8px;
  width: 12px;
  margin-left: -6px;
}

.crm-calendario[data-tamano="tactil"] .crm-calendario-vista {
  grid-template-rows: 32px auto;
}

.crm-calendario[data-tamano="tactil"] .crm-calendario-celdas [role="row"] {
  grid-template-columns: repeat(4, 84px);
}

.crm-calendario[data-tamano="tactil"] :is(.crm-calendario-celdas .crm-calendario-celda, .crm-calendario-vacia) {
  width: 84px;
  height: 96px;
}

/* ── Con el dedo, el calendario normal sube a 40 (280 = 7 × 40; FUNDAMENTOS §15) ── */

@media (pointer: coarse) {
  .crm-calendario[data-tamano="normal"] {
    width: 280px;
  }

  .crm-calendario[data-tamano="normal"] .crm-calendario-cabecera {
    height: 40px;
  }

  .crm-calendario[data-tamano="normal"] .crm-calendario-titulo {
    height: 40px;
  }

  .crm-calendario[data-tamano="normal"] .crm-calendario-paso {
    width: 40px;
    height: 40px;
  }

  .crm-calendario[data-tamano="normal"] .crm-calendario-rejilla {
    width: 280px;
  }

  .crm-calendario[data-tamano="normal"] .crm-calendario-rejilla td,
  .crm-calendario[data-tamano="normal"] .crm-calendario-dia {
    width: 40px;
    height: 40px;
  }

  .crm-calendario[data-tamano="normal"] .crm-calendario-celdas [role="row"] {
    grid-template-columns: repeat(4, 70px);
  }

  .crm-calendario[data-tamano="normal"] :is(.crm-calendario-celdas .crm-calendario-celda, .crm-calendario-vacia) {
    width: 70px;
    height: 80px;
  }

  .crm-fecha-escribir-error {
    max-width: 280px;
  }
}

/* ── Movimiento: el mes nuevo entra 8 px por el lado del paso; las vistas, por opacidad ── */

.crm-calendario-rejilla tbody[data-direccion="adelante"] {
  animation: crm-fecha-mes-adelante var(--crm-t-gesto) var(--crm-snap);
}

.crm-calendario-rejilla tbody[data-direccion="atras"] {
  animation: crm-fecha-mes-atras var(--crm-t-gesto) var(--crm-snap);
}

.crm-calendario-cuerpo[data-entra] {
  animation: crm-fecha-aparece var(--crm-t-color) var(--crm-snap);
}

@keyframes crm-fecha-mes-adelante {
  from {
    opacity: 0;
    transform: translateX(8px);
  }
}

@keyframes crm-fecha-mes-atras {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
}

@keyframes crm-fecha-aparece {
  from {
    opacity: 0;
  }
}

@keyframes crm-fecha-taco-entra {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

/* Pie de la capa: «Hoy» (T) y «Borrar», acciones de 24 en frase. */
.crm-fecha-pie {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  padding-top: 4px;
  border-top: 1px solid var(--crm-line);
}

.crm-fecha-pie-accion {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  margin: 0;
  padding: 0 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--crm-text-2);
  font-family: var(--crm-sans);
  font-size: 12px;
  line-height: 16px;
  cursor: pointer;
  transition:
    background-color var(--crm-t-salida) linear,
    color var(--crm-t-salida) linear;
}

.crm-fecha-pie-accion svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.5;
}

.crm-fecha-pie-accion .crm-tecla {
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  font-size: 11px;
  line-height: 14px;
}

@media (hover: hover) {
  .crm-fecha-pie-accion:hover:not(:disabled) {
    background: var(--crm-panel-3);
    color: var(--crm-text);
    transition-duration: 0ms;
  }
}

.crm-fecha-pie-accion:disabled {
  color: var(--crm-dim);
  cursor: not-allowed;
}

.crm-fecha-pie-accion:focus-visible,
.crm-rango-rapido:focus-visible {
  outline: var(--crm-foco-ancho) solid var(--crm-acento);
  outline-offset: -1px;
}

/* Rango: rangos rápidos a la izquierda (ítems de 28 con su tecla) y el calendario. */
.crm-rango-cuerpo {
  display: flex;
  gap: 8px;
}

.crm-rango-rapidos {
  display: grid;
  align-content: start;
  gap: 0;
  width: 136px;
  margin: 0;
  padding: 0 8px 0 0;
  border-right: 1px solid var(--crm-line);
  list-style: none;
}

.crm-rango-rapido {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 28px;
  margin: 0;
  padding: 0 4px 0 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--crm-text-2);
  font-family: var(--crm-sans);
  font-size: 13px;
  line-height: 20px;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--crm-t-salida) linear;
}

@media (hover: hover) {
  .crm-rango-rapido:hover:not(:disabled) {
    background: var(--crm-panel-3);
    color: var(--crm-text);
    transition-duration: 0ms;
  }
}

.crm-rango-rapido[aria-pressed="true"] {
  background: var(--crm-panel-3);
  box-shadow: inset 2px 0 0 var(--crm-acento);
  color: var(--crm-text);
  font-weight: 500;
}

/* Un rango rápido que se sale de mínimo y máximo: apagado, sin tecla que valga. */
.crm-rango-rapido:disabled {
  color: var(--crm-dim);
  cursor: not-allowed;
}

.crm-rango-resumen {
  flex: 1;
  min-width: 0;
  padding-left: 4px;
  overflow: hidden;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .crm-rango-cuerpo {
    flex-direction: column;
    align-items: center;
  }

  .crm-rango-rapidos {
    display: flex;
    align-self: stretch;
    width: auto;
    padding: 0 0 8px;
    border-right: 0;
    border-bottom: 1px solid var(--crm-line);
  }

  .crm-rango-rapido {
    width: auto;
  }
}

/* ── FechaAmplia: escribir a 48 y el calendario de 48 al lado ──────── */

.crm-fecha-amplia {
  container-type: inline-size;
  width: 100%;
  color: var(--crm-text-2);
  font-family: var(--crm-sans);
}

/* < 720 de contenedor: una columna; el calendario, centrado (a 390 de ventana caben sus 336). */
.crm-fecha-amplia-cuerpo {
  display: grid;
  gap: 16px;
  max-width: 768px;
  margin-inline: auto;
}

.crm-fecha-amplia-cuerpo > .crm-calendario {
  justify-self: center;
}

.crm-fecha-amplia-escribir {
  display: grid;
  align-content: start;
  min-width: 0;
}

/* El campo: 48, contorno de control; el foco es el borde en acento (FUNDAMENTOS §7). */
.crm-fecha-amplia-campo {
  position: relative;
  display: grid;
  height: 48px;
  border: 1px solid var(--crm-control);
  border-radius: 0;
  background: var(--crm-panel);
}

.crm-fecha-amplia-campo[data-invalido] {
  border-color: var(--crm-error-linea);
}

.crm-fecha-amplia-campo:focus-within {
  border-color: var(--crm-acento);
}

.crm-fecha-amplia-campo[data-deshabilitado] {
  border-color: var(--crm-linea-apagada);
  background: transparent;
}

.crm-fecha-amplia-control,
.crm-fecha-amplia-mascara {
  grid-area: 1 / 1;
  padding: 0 16px;
  font-family: var(--crm-sans);
  font-size: 15px;
  line-height: 24px;
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
}

.crm-fecha-amplia-control {
  width: 100%;
  height: 46px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--crm-text);
  caret-color: var(--crm-acento);
}

.crm-fecha-amplia-control:focus-visible {
  outline: none;
}

.crm-fecha-amplia-control::placeholder {
  color: var(--crm-dim);
}

.crm-fecha-amplia-control:disabled {
  color: var(--crm-dim);
  cursor: not-allowed;
}

/* Lo que falta de la máscara («m/aaaa»), en dim detrás de lo escrito (que va transparente para alinear). */
.crm-fecha-amplia-mascara {
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--crm-dim);
  white-space: pre;
  pointer-events: none;
}

.crm-fecha-amplia-mascara-escrito {
  color: transparent;
}

/* Con el dedo, 16 px para que iOS no amplíe (FUNDAMENTOS §15). */
@media (pointer: coarse) {
  .crm-fecha-amplia-control,
  .crm-fecha-amplia-mascara {
    font-size: 16px;
  }
}

/* La línea bajo el campo: lectura, pista o error. Reserva sus 20 y crece si el error no cabe (nunca se recorta). */
.crm-fecha-amplia-linea {
  min-height: 20px;
  margin: 8px 0 0;
  color: var(--crm-muted);
  font-size: 13px;
  line-height: 20px;
}

.crm-fecha-amplia-linea > span {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.crm-fecha-amplia-linea svg {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 3px;
}

.crm-fecha-amplia-error {
  color: var(--crm-error);
}

.crm-fecha-amplia-leida svg {
  color: var(--crm-acento);
}

.crm-fecha-amplia-pista {
  color: var(--crm-dim);
}

.crm-fecha-amplia-corta {
  display: none;
}

/* El taco: la hoja del día. Solo a ≥ 720 de contenedor; por debajo, la línea dice lo mismo. */
.crm-fecha-taco {
  display: none;
  gap: 6px;
  width: 160px;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--crm-line);
  border-top: 2px solid var(--crm-acento);
  background: var(--crm-panel);
}

.crm-fecha-taco[data-vacio] {
  border-top-color: var(--crm-line-2);
}

.crm-fecha-taco-rotulo {
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crm-fecha-taco-cifra {
  color: var(--crm-text);
  font-size: 40px;
  font-weight: 500;
  line-height: 44px;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

.crm-fecha-taco-cifra[data-entra] {
  animation: crm-fecha-taco-entra var(--crm-t-gesto) var(--crm-snap);
}

.crm-fecha-taco-dia {
  color: var(--crm-text-2);
  font-size: 13px;
  line-height: 20px;
}

.crm-fecha-taco[data-vacio] .crm-fecha-taco-cifra {
  color: var(--crm-dim);
}

.crm-fecha-taco[data-vacio] .crm-fecha-taco-dia {
  color: var(--crm-dim);
  font-size: 12px;
  line-height: 16px;
}

@container (min-width: 720px) {
  .crm-fecha-amplia[data-calendario] .crm-fecha-amplia-cuerpo {
    grid-template-columns: minmax(280px, 1fr) 336px;
    align-items: start;
    column-gap: 32px;
  }

  .crm-fecha-amplia[data-calendario] .crm-fecha-taco {
    display: grid;
  }

  /* La fecha larga se oculta solo a la vista (la dice el taco): sigue en el árbol accesible y en el anuncio. */
  .crm-fecha-amplia[data-calendario] .crm-fecha-amplia-larga {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .crm-fecha-amplia[data-calendario] .crm-fecha-amplia-corta {
    display: inline;
  }
}

/* ── Alto contraste del sistema: la marca del elegido y la raya de hoy no se pierden ── */

@media (forced-colors: active) {
  .crm-calendario-rejilla td[data-elegido] .crm-calendario-dia::after,
  .crm-calendario-celdas [data-elegido] .crm-calendario-celda::after {
    background: Highlight;
    forced-color-adjust: none;
  }

  .crm-calendario-dia[data-hoy]::before,
  .crm-calendario-celda[data-hoy]::before {
    background: CanvasText;
    forced-color-adjust: none;
  }

  .crm-fecha-taco {
    border-top-color: CanvasText;
  }
}

/* ── Movimiento reducido, impresión y estático: solo color ── */

@media (prefers-reduced-motion: reduce) {
  .crm-calendario-paso:active:not(:disabled) {
    transform: none;
  }

  .crm-calendario-titulo svg {
    transition: none;
  }

  .crm-fecha-capa[data-state="open"],
  .crm-calendario-rejilla tbody[data-direccion],
  .crm-calendario-cuerpo[data-entra],
  .crm-fecha-taco-cifra[data-entra] {
    animation: none;
  }
}

@media print {
  .crm-calendario-rejilla tbody[data-direccion],
  .crm-calendario-cuerpo[data-entra],
  .crm-fecha-taco-cifra[data-entra] {
    animation: none;
  }
}

[data-crm-estatico] :is(.crm-calendario-rejilla tbody[data-direccion], .crm-calendario-cuerpo[data-entra], .crm-fecha-taco-cifra[data-entra]) {
  animation: none;
}

/* ══ Etiqueta que envuelve (`envolver`) ═════════════════════════════════
 * Para lo que no se puede leer a medias en una fila densa (una alergia, una
 * restricción): el texto pasa a varias líneas en lugar de cortarse. La caja
 * conserva el chip (filete, tono, Geist 12/16) y su alto de partida, 24 (20 en
 * compacto), y suma una altura de línea por cada línea adicional. El icono
 * y la × se quedan en la primera línea. RFC docs/decisiones/0009-sala-movil.md.
 */
.crm-etiqueta[data-envolver] {
  align-items: flex-start;
  height: auto;
  min-width: 0;
  line-height: 1.3333333333;
  min-height: 24px;
  padding-block: 3px;
  white-space: normal;
}

.crm-etiqueta[data-envolver][data-tamano="compacto"] {
  min-height: 20px;
  padding-block: 1px;
}

.crm-etiqueta[data-envolver] .crm-etiqueta-texto {
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* El icono, centrado en la primera línea (16 de alto a tamaño normal), no en toda la caja. */
.crm-etiqueta[data-envolver] .crm-etiqueta-icono {
  flex: none;
  height: 1lh;
  align-items: center;
}

.crm-etiqueta[data-envolver] .crm-etiqueta-quitar {
  flex: none;
  height: calc(1lh + 4px);
  margin-block: -2px;
}

.crm-etiqueta[data-envolver][data-tamano="compacto"] .crm-etiqueta-quitar {
  height: 1lh;
  margin-block: 0;
}

/* Ventanilla de objeto: medidas de FUNDAMENTOS §2; no es un avatar. */
.crm-miniatura-objeto { display: inline-flex; position: relative; flex: none; align-items: center; justify-content: center; vertical-align: middle; box-sizing: border-box; width: 48px; height: 48px; overflow: hidden; border: 1px solid var(--crm-line); border-radius: 0; background: var(--crm-panel); color: var(--crm-muted); }
.crm-miniatura-objeto[data-tamano="mini"] { width: 24px; height: 24px; }
.crm-miniatura-objeto[data-tamano="compacto"] { width: 32px; height: 32px; }
.crm-miniatura-objeto > img { width: 100%; height: 100%; object-fit: contain; }
.crm-miniatura-objeto > svg { width: 16px; height: 16px; }
.crm-miniatura-objeto[data-tamano="mini"] > svg { width: 14px; height: 14px; }
.crm-miniatura-objeto > .crm-cargando { position: absolute; inset-inline: 0; bottom: 0; }
/* Etiqueta física de archivo: el nombre completo siempre se puede leer. */
.crm-selector-archivo { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; min-width: 0; max-width: 100%; flex: 1 1 240px; container-type: inline-size; }
.crm-selector-archivo > .crm-boton { flex: none; max-width: 100%; }
.crm-selector-archivo-seleccion { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; color: var(--crm-text-2); font-size: 13px; line-height: 20px; }
.crm-selector-archivo-nombres { display: block; color: var(--crm-muted); font-size: 12px; line-height: 16px; }
.crm-selector-archivo[data-deshabilitado] .crm-selector-archivo-seleccion { color: var(--crm-dim); }
@container (max-width: 719px) { .crm-selector-archivo:not([data-tamano-forzado]) > .crm-boton[data-tamano="normal"] { min-height: 48px; } }
@container (max-width: 400px) { .crm-selector-archivo-seleccion { flex-basis: 100%; } }
@media (forced-colors: active) {
  .crm-miniatura-objeto { border-color: CanvasText; color: CanvasText; background: Canvas; }
  .crm-aviso { border-color: CanvasText; background: Canvas; }
  .crm-aviso:is([data-tono="exito"], [data-tono="atencion"], [data-tono="error"]) { border-left-color: Highlight; }
  .crm-aviso[data-variante="nota"] { border-color: CanvasText; background: Canvas; }
}

/*
 * Familia «estructura» del sistema de marca Criterium: el armazón del panel
 * (MarcoPanel, BarraLateral, BarraSuperior, PiePanel), las capas flotantes
 * (Modal, PanelDeslizante, Menu, Desplegable, Consejo, Paleta, SelectorTema,
 * CentroAvisos) y la composición de página (CabeceraPagina, Seccion, Tarjeta,
 * Migas).
 *
 * Medidas: docs/marca/FUNDAMENTOS.md, cada número es ley. Barra superior 44
 * y todo lo de dentro a 28; navegación 28; menú 28; paleta 48/40; consejo
 * 24; cabecera de capa 52 y pie 56; pie del panel 32. Interfaz a 13 px, solo
 * pesos 400 y 500, mayúsculas mono solo en rótulos. Escala de 4.
 *
 * Solo variables --crm-* (00-temas.css): ningún color literal. Radio 0,
 * filetes de 1 px, un solo anillo de foco y el verde contado: vivo, activo,
 * hecho, espera aprobación y la firma.
 *
 * Tiempos (FUNDAMENTOS §8): los tokens --crm-t-* de 00-temas.css, los
 * mismos en todas las familias.
 */

/* ── Comunes ────────────────────────────────────────────────────────── */
.crm-raiz,
.crm-marco,
.crm-capa {
  --crm-es-pad: 24px;
}

/* El anillo de foco base vive en 05-base.css (con :where, especificidad 0). */

.crm-es-rotulo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 16px;
  text-transform: uppercase;
  white-space: nowrap;
}

.crm-es-rotulo[data-acento] {
  color: var(--crm-acento);
}

.crm-es-atajo {
  display: inline-flex;
  flex: none;
  gap: 2px;
}

.crm-es-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 16px 0 0;
  padding: 8px 12px;
  border: 1px solid var(--crm-error-linea);
  background: var(--crm-error-suave);
  color: var(--crm-error);
  font-size: 13px;
  line-height: 20px;
}

.crm-es-error svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

/* Punto vivo: solo para lo que de verdad está vivo o espera. */
.crm-punto.crm-es-vivo {
  width: 6px;
  height: 6px;
  background: var(--crm-acento);
  box-shadow: 0 0 0 3px var(--crm-acento-suave);
}

.crm-punto.crm-es-vivo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--crm-acento);
  animation: crm-latido var(--crm-t-latido) ease-out infinite;
}

/* Filo de luz por el borde superior de una capa firmada: pasa y descansa. */
.crm-modal::before,
.crm-paleta::before,
.crm-deslizante[data-lado="derecha"]::before,
.crm-tarjeta[data-variante="aprobacion"]::before,
.crm-desplegable[data-ocupado]::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -1px -1px auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--crm-acento) 50%, transparent);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  background-position: -40% 0;
  pointer-events: none;
  animation: crm-filo calc(var(--crm-t-filo) * 4) var(--crm-curva) infinite calc(var(--crm-t-filo) / 4);
}

.crm-modal-atajos::before {
  display: none;
}

.crm-paleta::before {
  animation-duration: calc(var(--crm-t-filo) * 3);
}

.crm-tarjeta[data-variante="aprobacion"]::before {
  animation-duration: calc(var(--crm-t-filo) * 2.5);
  animation-delay: 0s;
}

.crm-modal[data-ocupado]::before,
.crm-deslizante[data-ocupado]::before,
.crm-desplegable[data-ocupado]::before {
  animation: crm-filo-continuo var(--crm-t-filo) var(--crm-curva) infinite;
}

/* ── Telón y llegada de las capas ────────────────────────────────────── */
.crm-telon {
  position: fixed;
  z-index: 40;
  inset: 0;
  background: var(--crm-telon);
}

/*
 * Capas de diálogo (las que traen telón: modal, panel deslizante, paleta,
 * hoja móvil): cada una es su propio contexto de apilamiento al nivel del
 * telón. Dentro, su telón (40) queda bajo su contenido (41); entre capas
 * manda el orden de apertura, así que la que se abre después queda encima
 * con su telón, sea cual sea la capa que la precede. Las capas sin telón
 * (tostadas, menús, consejos, selectores) no cambian: siguen por encima de
 * los diálogos con su propio nivel. Antes, «.crm-capa ~ .crm-capa» subía el
 * telón de cualquier segunda capa (una paleta abierta tras las tostadas
 * quedaba debajo de su propio telón).
 */
.crm-capa:has(> .crm-telon) {
  position: relative;
  z-index: 40;
}

.crm-telon[data-state="open"] {
  animation: crm-es-funde var(--crm-t-panel) var(--crm-snap);
}

.crm-telon[data-state="closed"] {
  animation: crm-es-apaga var(--crm-t-salida) var(--crm-snap) forwards;
}

@keyframes crm-es-funde {
  from {
    opacity: 0;
  }
}

@keyframes crm-es-apaga {
  to {
    opacity: 0;
  }
}

/* Modal: sube 8 px desde abajo. */
@keyframes crm-es-sube {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.99);
  }
}

/* Menú y popover: opacidad + 4 px + scale(.98) desde su ancla (el lado lo da Radix). */
@keyframes crm-es-desde-arriba {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
}

@keyframes crm-es-desde-abajo {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.98);
  }
}

@keyframes crm-es-desde-la-izquierda {
  from {
    opacity: 0;
    transform: translateX(-4px) scale(0.98);
  }
}

@keyframes crm-es-desde-la-derecha {
  from {
    opacity: 0;
    transform: translateX(4px) scale(0.98);
  }
}

@keyframes crm-es-asoma {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
}

@keyframes crm-es-desde-derecha {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
}

@keyframes crm-es-desde-izquierda {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }
}

@keyframes crm-es-a-derecha {
  to {
    opacity: 0;
    transform: translateX(8px);
  }
}

@keyframes crm-es-a-izquierda {
  to {
    opacity: 0;
    transform: translateX(-8px);
  }
}

/* El esqueleto solo aparece si la carga pasa de 300 ms: nada de destellos. */
@keyframes crm-es-aparece {
  to {
    opacity: 1;
  }
}

/* Las capas ancladas (menú, desplegable) entran desde su ancla y salen solo con opacidad. */
:is(.crm-menu, .crm-desplegable)[data-state="open"][data-side="bottom"] {
  animation: crm-es-desde-arriba var(--crm-t-entrada) var(--crm-snap);
}

:is(.crm-menu, .crm-desplegable)[data-state="open"][data-side="top"] {
  animation: crm-es-desde-abajo var(--crm-t-entrada) var(--crm-snap);
}

:is(.crm-menu, .crm-desplegable)[data-state="open"][data-side="right"] {
  animation: crm-es-desde-la-izquierda var(--crm-t-entrada) var(--crm-snap);
}

:is(.crm-menu, .crm-desplegable)[data-state="open"][data-side="left"] {
  animation: crm-es-desde-la-derecha var(--crm-t-entrada) var(--crm-snap);
}

:is(.crm-menu, .crm-desplegable)[data-state="closed"] {
  animation: crm-es-apaga var(--crm-t-salida) var(--crm-snap) forwards;
}

/* ── Consejo ────────────────────────────────────────────────────────── */
/* 24 de alto, texto 12, relleno 8 y el atajo en Tecla a la derecha. */
.crm-consejo {
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  height: 24px;
  max-width: 320px;
  padding: 0 8px;
  border: 1px solid var(--crm-line-2);
  background: var(--crm-panel-2);
  color: var(--crm-text);
  font-family: var(--crm-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  white-space: nowrap;
  box-shadow: var(--crm-sombra-capa);
  transform-origin: var(--radix-tooltip-content-transform-origin);
  pointer-events: none;
}

/*
 * Un consejo no se usa: se lee. Ni su caja ni lo que la rodea reciben el
 * puntero, así que nunca tapa lo que hay debajo (un clic, un toque o un
 * paso del ratón llegan a la ficha, al botón o a la fila de abajo). El
 * contenido ya tenía `pointer-events: none`, pero no bastaba: Radix lo
 * envuelve en un `div[data-radix-popper-content-wrapper]` posicionado del
 * tamaño del consejo, con `pointer-events` por defecto, y ESA envoltura
 * recibía el clic (elementFromPoint la devolvía). Se acota a la capa del
 * consejo (`.crm-capa-consejo`): menús, selectores y popovers, que sí se
 * usan, conservan el puntero.
 */
.crm-capa-consejo,
.crm-capa-consejo [data-radix-popper-content-wrapper] {
  pointer-events: none;
}

/* Con atajo, la tecla de 20 queda a 1 px del filete: el consejo sigue midiendo 24. */
.crm-consejo[data-con-atajo] {
  padding-right: 1px;
}

.crm-consejo-texto {
  overflow: hidden;
  text-overflow: ellipsis;
}

/*
 * Consejo de varias líneas: una explicación de una a tres frases. Párrafo
 * de 12/16 con 6 de aire arriba y abajo (dos líneas miden 46; tres, 62), a
 * lo sumo 280 de ancho (unos 45 caracteres por línea) y nunca más que la
 * pantalla menos 8 por lado. El atajo (20) se centra en la primera línea.
 */
.crm-consejo[data-lineas="varias"] {
  align-items: flex-start;
  height: auto;
  min-height: 24px;
  max-width: min(280px, calc(100vw - 16px));
  padding-top: 6px;
  padding-bottom: 6px;
  white-space: normal;
}

.crm-consejo[data-lineas="varias"] .crm-consejo-texto {
  overflow: visible;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.crm-consejo[data-lineas="varias"] .crm-es-atajo {
  margin-top: -2px;
  margin-bottom: -2px;
}

.crm-consejo .crm-tecla {
  border-color: var(--crm-line-2);
  background: var(--crm-panel);
}

/* El primero entra con un fundido de 120 ms; los vecinos, al instante; se van al instante. */
.crm-consejo[data-state="delayed-open"] {
  animation: crm-es-funde var(--crm-t-color) var(--crm-snap);
}

/* ── Menú ───────────────────────────────────────────────────────────── */
.crm-menu {
  z-index: 60;
  min-width: 200px;
  max-width: min(320px, calc(100vw - 16px));
  max-height: var(--radix-dropdown-menu-content-available-height, 70vh);
  overflow: auto;
  padding: 4px;
  border: 1px solid var(--crm-line-2);
  background: var(--crm-panel-2);
  color: var(--crm-text-2);
  font-family: var(--crm-sans);
  box-shadow: var(--crm-sombra-capa);
  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
}

/* Ítem de 28: icono de 14 en su caja de 16, texto 13/20 y el atajo alineado a la derecha. */
.crm-menu-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  height: 28px;
  padding: 0 8px;
  color: var(--crm-text-2);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 20px;
  cursor: default;
  outline: none;
  user-select: none;
  /* La pulsación larga lee el rótulo entero (su consejo), no abre la vista previa nativa del enlace. */
  -webkit-touch-callout: none;
  transition:
    background-color var(--crm-t-color) var(--crm-snap),
    color var(--crm-t-color) var(--crm-snap);
}

/* Resaltado (puntero o teclado): instantáneo al entrar, 120 ms al salir. */
.crm-menu-item[data-highlighted],
.crm-menu-item[data-state="open"] {
  background: var(--crm-panel-3);
  color: var(--crm-text);
  transition-duration: 0ms;
}

.crm-menu-item[data-disabled] {
  color: var(--crm-dim);
}

.crm-menu-item[data-peligro] {
  color: var(--crm-error);
}

.crm-menu-item[data-peligro][data-highlighted] {
  background: var(--crm-error-suave);
  color: var(--crm-error);
}

/* Lo que destruye va aparte: si el host no puso separador, la familia lo pone. */
.crm-menu-item:not([data-peligro]) + .crm-menu-item[data-peligro] {
  margin-top: 9px;
}

.crm-menu-item:not([data-peligro]) + .crm-menu-item[data-peligro]::after {
  content: "";
  position: absolute;
  top: -5px;
  right: -4px;
  left: -4px;
  height: 1px;
  background: var(--crm-line);
}

.crm-menu-icono {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 16px;
  height: 16px;
  color: var(--crm-muted);
}

.crm-menu-item[data-highlighted] .crm-menu-icono {
  color: var(--crm-text);
}

.crm-menu-item[data-peligro] .crm-menu-icono,
.crm-menu-item[data-disabled] .crm-menu-icono {
  color: inherit;
}

.crm-menu-icono svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.5;
}

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

.crm-menu-item > .crm-es-atajo {
  margin-left: 16px;
}

.crm-menu-item .crm-tecla {
  color: var(--crm-dim);
}

.crm-menu-item[data-highlighted] .crm-tecla {
  color: var(--crm-muted);
}

/* Con detalle (selector de espacio), el ítem pasa a 40: dos líneas, 13 y 12. */
.crm-menu-item:has(.crm-menu-detalle) {
  height: 40px;
}

.crm-menu-detalle {
  display: block;
  overflow: hidden;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-menu-marca {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 16px;
  color: var(--crm-acento);
}

.crm-menu-marca svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.75;
}

.crm-menu-flecha {
  flex: none;
  width: 14px;
  height: 14px;
  margin-left: 16px;
  color: var(--crm-dim);
}

.crm-menu-separador {
  height: 1px;
  margin: 4px -4px;
  background: var(--crm-line);
}

/* Rótulo de grupo: 24 de alto, 12 px en frase normal (como Linear), sin mayúsculas. */
.crm-menu-rotulo {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 24px;
  padding: 0 8px;
  overflow: hidden;
  color: var(--crm-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-menu-persona {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
}

.crm-menu-persona-texto {
  display: grid;
  min-width: 0;
}

.crm-menu-persona-nombre {
  overflow: hidden;
  color: var(--crm-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-menu-persona-correo {
  overflow: hidden;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-menu-espacios {
  min-width: 240px;
}

.crm-menu-espacios .crm-lateral-logo {
  width: 20px;
  height: 20px;
  font-size: 11px;
}

/* ── Desplegable ────────────────────────────────────────────────────── */
.crm-desplegable {
  position: relative;
  z-index: 60;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  max-height: min(var(--radix-popover-content-available-height, 70vh), 560px);
  border: 1px solid var(--crm-line-2);
  background: var(--crm-panel-2);
  color: var(--crm-text-2);
  font-family: var(--crm-sans);
  box-shadow: var(--crm-sombra-capa);
  transform-origin: var(--radix-popover-content-transform-origin);
}

.crm-desplegable-cabecera {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  height: 44px;
  padding: 0 8px 0 12px;
  border-bottom: 1px solid var(--crm-line);
}

.crm-desplegable-titulos {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.crm-desplegable-titulo {
  margin: 0;
  overflow: hidden;
  color: var(--crm-text);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-desplegable-cuerpo {
  min-height: 0;
  overflow: auto;
}

.crm-desplegable-pie {
  display: flex;
  padding: 4px;
  border-top: 1px solid var(--crm-line);
}

/* ── Modal ──────────────────────────────────────────────────────────── */
.crm-modal {
  --crm-modal-ancho: 560px;
  --crm-modal-arriba: min(12vh, 120px);
  position: fixed;
  z-index: 41;
  top: var(--crm-modal-arriba);
  left: 50%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  width: min(var(--crm-modal-ancho), calc(100% - 32px));
  max-height: calc(100% - var(--crm-modal-arriba) - 24px);
  border: 1px solid var(--crm-line-2);
  background: var(--crm-panel);
  color: var(--crm-text);
  font-family: var(--crm-sans);
  box-shadow: var(--crm-sombra);
  translate: -50% 0;
  outline: none;
}

.crm-modal[data-tamano="sm"] {
  --crm-modal-ancho: 440px;
}

.crm-modal[data-tamano="lg"] {
  --crm-modal-ancho: 760px;
}

/* Amplio (16-oct-2026): para «Ampliar» un bloque y leerlo entero. Casi toda la pantalla con
   márgenes medidos (6vh arriba y abajo, 4vw a los lados), alto fijo para que el contenido
   reparta el espacio en zonas y no en una tira; cabecera más alta con el contexto grande. */
.crm-modal[data-tamano="amplio"] {
  --crm-modal-ancho: min(1360px, 92vw);
  --crm-modal-arriba: 6vh;
  height: 88vh;
  max-height: 88vh;
}
.crm-modal[data-tamano="amplio"] .crm-modal-cabecera { height: 64px; padding: 0 16px 0 28px; }
.crm-modal[data-tamano="amplio"] .crm-modal-titulo { font-size: 20px; line-height: 28px; }
.crm-modal[data-tamano="amplio"] .crm-modal-cuerpo { padding: 24px 28px; font-size: 15px; line-height: 24px; }

.crm-modal[data-tamano="completo"] {
  inset: 24px;
  width: auto;
  max-height: none;
  translate: none;
}

.crm-modal[data-state="open"] {
  animation: crm-es-sube var(--crm-t-capa) var(--crm-snap);
}

.crm-modal[data-state="closed"] {
  animation: crm-es-apaga var(--crm-t-salida) var(--crm-snap) forwards;
}

/* Cabecera de 52: rótulo, título de una línea y el cierre de 28. */
.crm-modal-cabecera {
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  height: 52px;
  padding: 0 12px 0 20px;
  border-bottom: 1px solid var(--crm-line);
}

.crm-modal-cabecera > .crm-es-rotulo {
  flex: none;
}

.crm-modal-cabecera > .crm-es-rotulo + .crm-modal-titulo {
  padding-left: 12px;
  border-left: 1px solid var(--crm-line-2);
}

.crm-modal-titulo {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--crm-text);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-modal-descripcion {
  max-width: 68ch;
  margin: 0 0 16px;
  color: var(--crm-muted);
  font-size: 14px;
  line-height: 22px;
}

.crm-modal-descripcion:last-child {
  margin-bottom: 0;
}

.crm-modal-cuerpo {
  min-height: 0;
  overflow: auto;
  padding: 20px;
  color: var(--crm-text-2);
  font-size: 14px;
  line-height: 22px;
}

/* Pie de 56: botones de 32, la secundaria a la izquierda de la principal. */
.crm-modal-pie {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  box-sizing: border-box;
  height: 56px;
  padding: 0 20px;
  border-top: 1px solid var(--crm-line);
}

/* Confirmación irreversible: la cabecera solo avisa; el título va en el cuerpo, entero. */
.crm-confirmar-rotulo {
  color: var(--crm-error);
}

.crm-confirmar-rotulo svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.5;
}

.crm-modal-titulo.crm-confirmar-titulo {
  display: block;
  margin: 0 0 8px;
  font-size: 20px;
  letter-spacing: -0.02em;
  line-height: 28px;
  text-overflow: clip;
  white-space: normal;
  text-wrap: balance;
}

.crm-confirmar-lista {
  margin: 0 0 16px;
  padding: 0;
  border-top: 1px solid var(--crm-line);
  list-style: none;
}

.crm-confirmar-lista li {
  display: flex;
  align-items: center;
  min-height: 36px;
  border-bottom: 1px solid var(--crm-line);
  color: var(--crm-text-2);
  font-size: 13px;
  line-height: 20px;
}

.crm-confirmar-frase {
  display: grid;
  gap: 8px;
}

.crm-confirmar-etiqueta {
  color: var(--crm-muted);
  font-size: 13px;
  line-height: 20px;
}

.crm-confirmar-etiqueta strong {
  padding: 2px 6px;
  background: var(--crm-panel-2);
  color: var(--crm-text);
  font-family: var(--crm-mono);
  font-size: 12px;
  font-weight: 400;
}

.crm-confirmar-campo {
  box-sizing: border-box;
  width: 100%;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--crm-control);
  border-radius: 0;
  background: var(--crm-bg);
  color: var(--crm-text);
  font-family: var(--crm-mono);
  font-size: 13px;
  caret-color: var(--crm-acento);
}

.crm-confirmar-campo:disabled {
  border-color: var(--crm-linea-apagada);
  color: var(--crm-dim);
}

.crm-confirmar-casilla {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  color: var(--crm-text-2);
  font-size: 13px;
  cursor: pointer;
}

.crm-confirmar-casilla input {
  display: grid;
  flex: none;
  place-content: center;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1px solid var(--crm-control);
  border-radius: 0;
  background: transparent;
  appearance: none;
  cursor: pointer;
}

.crm-confirmar-casilla input::after {
  content: "";
  width: 8px;
  height: 4px;
  border-bottom: 2px solid var(--crm-sobre-acento);
  border-left: 2px solid var(--crm-sobre-acento);
  opacity: 0;
  rotate: -45deg;
  translate: 0 -1px;
}

.crm-confirmar-casilla input:checked {
  border-color: var(--crm-acento);
  background: var(--crm-acento);
}

.crm-confirmar-casilla input:checked::after {
  opacity: 1;
}

.crm-confirmar-casilla input:disabled {
  border-color: var(--crm-linea-apagada);
  cursor: not-allowed;
}

/* ── Atajos de teclado («?») ────────────────────────────────────────── */
/*
 * Dos columnas que acaban a la par (a una fila como mucho): las reparte la
 * pieza (`repartir` en marco-panel.tsx) por el alto de verdad de cada grupo,
 * no la multicolumna del navegador; si no hay reparto a la par, una columna. Un grupo partido sigue en la otra columna con su título («· sigue»)
 * y su filete, así la segunda se lee sola. En un contenedor de menos de 592
 * (2 × 280 + 32), una columna seguida: la continuación pierde su título y su
 * filete y pega con su grupo.
 */
.crm-atajos {
  container-type: inline-size;
}

.crm-atajos-columnas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  column-gap: 32px;
}

.crm-atajos-columnas[data-una] {
  grid-template-columns: minmax(0, 1fr);
}

.crm-atajos-columna {
  display: grid;
  align-content: start;
  row-gap: 24px;
  min-width: 0;
}

.crm-atajos-grupo {
  min-width: 0;
}

/*
 * Cabeza de grupo de 24 (12/16 con 4 arriba y abajo: texto en píxel entero),
 * 4 hasta su filete. Lo que no cabe, elipsis y el texto entero en su consejo
 * (§14, rótulo); el lector la oye entera (nombra su región).
 */
.crm-atajos-titulo {
  box-sizing: border-box;
  height: 24px;
  margin: 0 0 4px;
  padding: 4px 0;
  overflow: hidden;
  color: var(--crm-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-atajos-sigue {
  color: var(--crm-dim);
  font-weight: 400;
}

.crm-atajos-lista {
  margin: 0;
  border-top: 1px solid var(--crm-line);
}

/*
 * Fila de 36 exactos con su filete (§2): 8 + 20 + 7 + 1, siempre: no crece.
 * La descripción y las teclas empiezan en y = 8 (píxel entero), arriba. Lo
 * que no cabe se corta y se lee entero en el consejo de la fila (§14): la
 * descripción con elipsis; una secuencia de teclas, por pasos enteros con
 * «+N» (nunca media tecla ni una combinación partida).
 */
.crm-atajos-fila {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  box-sizing: border-box;
  height: 36px;
  padding: 8px 0 7px;
  border-bottom: 1px solid var(--crm-line);
}

.crm-atajos-fila dt {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--crm-text-2);
  font-size: 13px;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Las teclas: todo el ancho menos 176 (160 de descripción + 16), el mismo RESERVA_DESCRIPCION de la pieza. */
.crm-atajos-fila dd {
  flex: none;
  max-width: calc(100% - 176px);
  margin: 0;
  overflow: hidden;
}

.crm-atajos-teclas,
.crm-atajos-teclas-vista {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
}

.crm-atajos-paso {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}

.crm-atajos-paso[hidden] {
  display: none;
}

/* «+N»: los pasos que no se ven (32 = 6 de aire + 26 de cifra, el ANCHO_MAS de la pieza). */
.crm-atajos-mas {
  flex: none;
  box-sizing: border-box;
  min-width: 26px;
  margin-left: 6px;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

/* En el consejo de la fila: la descripción entera y, debajo, la secuencia entera (aquí sí puede saltar de línea). */
.crm-atajos-consejo {
  display: grid;
  gap: 8px;
}

.crm-atajos-consejo .crm-atajos-teclas,
.crm-atajos-consejo .crm-atajos-teclas-vista {
  flex-wrap: wrap;
  justify-content: flex-start;
  row-gap: 4px;
}

.crm-atajos-luego {
  margin: 0 6px;
  color: var(--crm-dim);
  font-size: 12px;
  line-height: 16px;
}

/*
 * Lectura: la lista es una sola parada de Tab (§9) que se recorre con flechas.
 * Foco de ítem dentro de un contenedor (§7): un anillo hacia dentro, en la
 * fila entera (la descripción no pinta el suyo) o en la cabeza del grupo.
 */
.crm-atajos [data-crm-lectura] {
  outline: none;
  cursor: default;
}

.crm-atajos-fila:has(dt:focus-visible),
.crm-atajos-titulo:focus-visible {
  outline: var(--crm-foco-ancho) solid var(--crm-acento);
  outline-offset: -1px;
}

@container (max-width: 591px) {
  .crm-atajos-columnas {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
  }

  /* La continuación pega con su grupo: sin título repetido, sin filete doble y sin los 24 entre columnas. */
  .crm-atajos-grupo[data-sigue] {
    margin-top: -24px;
  }

  .crm-atajos-grupo[data-sigue] .crm-atajos-titulo {
    display: none;
  }

  .crm-atajos-grupo[data-sigue] .crm-atajos-lista {
    border-top: 0;
  }
}

@media (forced-colors: active) {
  .crm-atajos-fila:has(dt:focus-visible),
  .crm-atajos-titulo:focus-visible {
    outline-color: Highlight;
  }
}

/* ── Panel deslizante ───────────────────────────────────────────────── */
.crm-deslizante {
  --crm-desl-ancho: 560px;
  position: fixed;
  z-index: 41;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(var(--crm-desl-ancho), 100%);
  background: var(--crm-panel);
  color: var(--crm-text);
  font-family: var(--crm-sans);
  box-shadow: var(--crm-sombra);
  outline: none;
}

.crm-deslizante[data-ancho="estrecho"] {
  --crm-desl-ancho: 400px;
}

.crm-deslizante[data-ancho="ancho"] {
  --crm-desl-ancho: max(440px, 46%);
}

.crm-deslizante[data-lado="derecha"] {
  right: 0;
  border-left: 1px solid var(--crm-line-2);
}

.crm-deslizante[data-lado="izquierda"] {
  left: 0;
  border-right: 1px solid var(--crm-line);
}

.crm-deslizante[data-lado="derecha"][data-state="open"] {
  animation: crm-es-desde-derecha var(--crm-t-panel) var(--crm-snap);
}

.crm-deslizante[data-lado="izquierda"][data-state="open"] {
  animation: crm-es-desde-izquierda var(--crm-t-panel) var(--crm-snap);
}

.crm-deslizante[data-lado="derecha"][data-state="closed"] {
  animation: crm-es-a-derecha var(--crm-t-salida) var(--crm-snap) forwards;
}

.crm-deslizante[data-lado="izquierda"][data-state="closed"] {
  animation: crm-es-a-izquierda var(--crm-t-salida) var(--crm-snap) forwards;
}

.crm-deslizante-barra {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  min-width: 0;
  height: 52px;
  padding: 0 12px 0 20px;
  border-bottom: 1px solid var(--crm-line);
}

.crm-deslizante-barra > .crm-es-rotulo + .crm-deslizante-titulo {
  padding-left: 12px;
  border-left: 1px solid var(--crm-line-2);
}

.crm-deslizante-titulo {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  margin: 0;
  color: var(--crm-text);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-deslizante-descripcion {
  max-width: 68ch;
  margin: 0 0 16px;
  color: var(--crm-muted);
  font-size: 14px;
  line-height: 22px;
}

.crm-deslizante-cuerpo {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 20px;
  color: var(--crm-text-2);
  font-size: 14px;
  line-height: 22px;
}

.crm-deslizante-pie {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  box-sizing: border-box;
  height: 56px;
  padding: 0 20px;
  border-top: 1px solid var(--crm-line);
}

/* ── Paleta de comandos (Raycast) ───────────────────────────────────── */
.crm-paleta {
  position: fixed;
  z-index: 41;
  top: min(14vh, 140px);
  left: 50%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  width: min(640px, calc(100% - 32px));
  max-height: min(480px, calc(100% - min(14vh, 140px) - 24px));
  border: 1px solid var(--crm-line-2);
  background: var(--crm-panel);
  color: var(--crm-text);
  font-family: var(--crm-sans);
  box-shadow: var(--crm-sombra);
  translate: -50% 0;
  outline: none;
}

.crm-paleta[data-state="open"] {
  animation: crm-es-asoma var(--crm-t-entrada) var(--crm-snap);
}

.crm-paleta[data-state="closed"] {
  animation: crm-es-apaga var(--crm-t-salida) var(--crm-snap) forwards;
}

/* Campo de 48. */
.crm-paleta-busca {
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid var(--crm-line);
}

/* Búsqueda del host en curso: el filo de luz corre sobre el filete del campo. */
.crm-paleta-cargando {
  display: block;
  margin-top: -1px;
}

.crm-paleta-busca > svg {
  flex: none;
  width: 16px;
  height: 16px;
  stroke-width: 1.6;
  color: var(--crm-muted);
}

.crm-paleta-campo {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--crm-text);
  font-family: var(--crm-sans);
  font-size: 15px;
  letter-spacing: -0.005em;
  caret-color: var(--crm-acento);
  outline: none;
}

/* El campo siempre tiene el foco dentro de la paleta: el caret verde y el filo lo dicen. */
.crm-capa .crm-paleta-campo:focus-visible {
  outline: none;
}

.crm-paleta-campo::placeholder {
  color: var(--crm-dim);
}

.crm-paleta-lista {
  min-height: 0;
  overflow: auto;
  padding: 4px 8px 8px;
  scroll-padding: 8px;
}

/* Rótulo de grupo: 12 px en frase normal, atenuado. */
.crm-paleta-grupo-titulo {
  display: flex;
  align-items: flex-end;
  box-sizing: border-box;
  height: 28px;
  padding: 0 8px 4px;
  color: var(--crm-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

/* Fila de 40: icono de 16, título, subtítulo atenuado y atajo a la derecha. */
.crm-paleta-opcion {
  position: relative;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  height: 40px;
  padding: 0 8px 0 12px;
  color: var(--crm-text-2);
  cursor: default;
}

.crm-paleta-opcion::before {
  content: "";
  position: absolute;
  inset: 8px auto 8px 0;
  width: 2px;
  background: var(--crm-acento);
  opacity: 0;
}

.crm-paleta-opcion[data-activo] {
  background: var(--crm-panel-3);
  color: var(--crm-text);
}

.crm-paleta-opcion[data-activo]::before {
  opacity: 1;
}

.crm-paleta-opcion[aria-disabled="true"] {
  color: var(--crm-dim);
}

.crm-paleta-icono {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: var(--crm-muted);
}

.crm-paleta-opcion[data-activo] .crm-paleta-icono {
  color: var(--crm-text);
}

.crm-paleta-opcion[aria-disabled="true"] .crm-paleta-icono {
  color: var(--crm-dim);
}

.crm-paleta-icono svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.6;
}

.crm-paleta-texto {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.crm-paleta-etiqueta {
  flex: none;
  max-width: 100%;
  overflow: hidden;
  font-size: 13px;
  letter-spacing: -0.005em;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-paleta-detalle {
  min-width: 0;
  overflow: hidden;
  color: var(--crm-dim);
  font-size: 13px;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-paleta-opcion .crm-tecla {
  color: var(--crm-dim);
}

/* Barra de acciones (como el Action Panel de Raycast): lo elegido a la izquierda, las acciones con su tecla a la derecha. */
.crm-paleta-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-sizing: border-box;
  height: 40px;
  padding: 0 8px 0 12px;
  border-top: 1px solid var(--crm-line);
  background: var(--crm-panel-2);
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
}

.crm-paleta-pie-foco {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.crm-paleta-pie-icono {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 14px;
  height: 14px;
}

.crm-paleta-pie-icono svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.5;
}

.crm-paleta-pie-nombre {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-paleta-pie-acciones {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 12px;
}

.crm-paleta-accion {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--crm-text-2);
  white-space: nowrap;
}

/* Sin nada elegido, la pista se apaga a muted (no a dim: sigue siendo texto que se lee). */
.crm-paleta-accion[data-apagada] {
  color: var(--crm-muted);
}

.crm-paleta-pie-filete {
  width: 1px;
  height: 16px;
  background: var(--crm-line-2);
}

.crm-paleta-vacio {
  padding: 24px 8px;
}

/*
 * D31 · Resultados de fuera. Mientras busca, el filo de la paleta corre sin
 * pausa (como una capa ocupada). La espera y el error son filas de 40 bajo
 * la lista, fuera de su rol: el error con su icono, el motivo y «Reintentar».
 */
.crm-paleta[data-buscando]::before {
  animation: crm-filo-continuo var(--crm-t-filo) var(--crm-curva) infinite;
}

.crm-paleta-buscando {
  flex: none;
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
}

.crm-paleta-estado {
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  min-height: 40px;
  margin: 0;
  padding: 0 8px;
  color: var(--crm-muted);
  font-size: 13px;
  line-height: 20px;
}

.crm-paleta-estado > svg {
  flex: none;
  width: 16px;
  height: 16px;
  stroke-width: 1.6;
  color: var(--crm-error);
}

.crm-paleta-estado-texto {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.crm-paleta-estado[data-tono="error"] .crm-paleta-estado-texto {
  color: var(--crm-text-2);
}

/*
 * Con vista previa: la paleta pasa a 760 y el cuerpo es lista + vista de
 * 280 con su filete. A menos de 640 de ancho propio, la vista va debajo de
 * la lista (hasta 160, con su desplazamiento): se sigue leyendo en móvil.
 */
.crm-paleta[data-con-vista] {
  container: crm-paleta / inline-size;
  width: min(760px, calc(100% - 32px));
}

.crm-paleta-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  min-height: 0;
}

.crm-paleta-vista {
  min-height: 0;
  overflow: auto;
  padding: 16px;
  border-left: 1px solid var(--crm-line);
  color: var(--crm-text-2);
  font-size: 13px;
  line-height: 20px;
  overflow-wrap: anywhere;
}

.crm-paleta-vista-vacia {
  margin: 0;
  color: var(--crm-muted);
}

@container crm-paleta (max-width: 639.98px) {
  .crm-paleta-cuerpo {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .crm-paleta-vista {
    max-height: 160px;
    border-top: 1px solid var(--crm-line);
    border-left: 0;
  }
}

/* ── Selector de tema (Linear) ──────────────────────────────────────── */
/*
 * Rejilla: todos los temas en una fila si caben; a menos de 560 de
 * contenedor, filas completas y equilibradas (5 → 3 + 2), nunca uno solo en
 * la última. El número de columnas lo pone la pieza (--crm-temas-n).
 */
.crm-temas {
  container-type: inline-size;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.crm-temas-rejilla {
  display: grid;
  grid-template-columns: repeat(var(--crm-temas-n, 2), minmax(0, 1fr));
  gap: 16px 12px;
}

@container (max-width: 559px) {
  .crm-temas-rejilla {
    grid-template-columns: repeat(var(--crm-temas-n-estrecho, 2), minmax(0, 1fr));
  }
}

.crm-temas-compacta {
  padding: 12px;
}

.crm-temas-compacta .crm-temas-rejilla {
  gap: 12px 8px;
}

.crm-tema {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  cursor: pointer;
}

.crm-tema-marco {
  position: relative;
  display: block;
}

.crm-tema-mini {
  position: relative;
  display: flex;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--crm-line-2);
  transition: border-color var(--crm-t-color) var(--crm-snap);
}

.crm-tema:hover .crm-tema-mini {
  border-color: var(--crm-control);
  transition-duration: 0ms;
}

/* El elegido: 1 px de acento más un anillo de 1 px: la marca de 2 px. */
.crm-tema[data-elegido] .crm-tema-mini {
  border-color: var(--crm-acento);
  box-shadow: 0 0 0 1px var(--crm-acento);
}

.crm-tema:has(:focus-visible) .crm-tema-mini {
  outline: var(--crm-foco-ancho) solid var(--crm-acento);
  outline-offset: 4px;
}

/* El check va en el pie, junto al nombre: nunca encima de la miniatura. */
.crm-tema-check {
  flex: none;
  margin-top: 2px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1px solid var(--crm-acento);
  background: var(--crm-panel);
  color: var(--crm-acento);
  opacity: 0;
  transform: scale(0.8);
  transition:
    opacity var(--crm-t-color) var(--crm-snap),
    transform var(--crm-t-gesto) var(--crm-snap);
}

.crm-tema[data-elegido] .crm-tema-check {
  opacity: 1;
  transform: none;
}

.crm-tema-check svg {
  width: 12px;
  height: 12px;
  stroke-width: 2;
}

/* La miniatura se pinta con los tokens del tema que enseña (lleva su data-crm-tema). */
.crm-tema-mini-lienzo {
  display: grid;
  flex: 1;
  grid-template-columns: 28% minmax(0, 1fr);
  background: var(--crm-bg);
}

.crm-tema-mini[data-mitades] .crm-tema-mini-lienzo {
  position: absolute;
  inset: 0;
}

.crm-tema-mini[data-mitades] .crm-tema-mini-lienzo:last-child {
  clip-path: polygon(62% 0, 100% 0, 100% 100%, 38% 100%);
}

.crm-tema-mini i {
  display: block;
}

.crm-tema-mini-lateral {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 12% 10% 0;
  border-right: 1px solid var(--crm-line);
}

.crm-tema-mini-lateral i {
  height: 3px;
  background: var(--crm-line-2);
}

.crm-tema-mini-lateral i:nth-child(4) {
  width: 70%;
}

.crm-tema-mini-lateral i.crm-tema-mini-firma {
  width: 70%;
  margin-bottom: 4px;
  background: var(--crm-text);
}

.crm-tema-mini-lateral i[data-activo] {
  background: var(--crm-panel-3);
  box-shadow: inset 1px 0 0 var(--crm-acento);
}

.crm-tema-mini-cuerpo {
  display: grid;
  grid-template-rows: 16% 1fr;
  min-width: 0;
}

.crm-tema-mini-barra {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6%;
  padding: 0 8%;
  border-bottom: 1px solid var(--crm-line);
  background: var(--crm-velo);
}

.crm-tema-mini-busca {
  width: 34%;
  height: 50%;
  border: 1px solid var(--crm-line-2);
  background: var(--crm-panel);
}

.crm-tema-mini-punto {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--crm-acento);
}

.crm-tema-mini-hoja {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 8% 10% 0;
}

.crm-tema-mini-titulo {
  width: 48%;
  height: 4px;
  background: var(--crm-text);
}

.crm-tema-mini-linea {
  width: 70%;
  height: 2px;
  background: var(--crm-muted);
}

.crm-tema-mini-filas {
  display: grid;
  margin-top: 4px;
  border-top: 1px solid var(--crm-line);
}

.crm-tema-mini-filas i {
  height: 6px;
  border-bottom: 1px solid var(--crm-line);
  background: linear-gradient(90deg, var(--crm-line-2) 0 40%, transparent 40%);
  background-size: 100% 2px;
  background-position: 0 50%;
  background-repeat: no-repeat;
}

.crm-tema-mini-filas i[data-acento] {
  background-image: linear-gradient(90deg, var(--crm-acento-linea) 0 30%, transparent 30%);
}

.crm-tema-mini-boton {
  justify-self: end;
  width: 22%;
  height: 6px;
  margin-top: 2px;
  background: var(--crm-boton);
}

.crm-tema-pie {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  min-width: 0;
}

.crm-tema-textos {
  display: grid;
  min-width: 0;
}

.crm-tema-nombre {
  color: var(--crm-text-2);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}

.crm-tema[data-elegido] .crm-tema-nombre {
  color: var(--crm-text);
}

.crm-tema-detalle {
  overflow: hidden;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Marco del panel ────────────────────────────────────────────────── */
.crm-marco {
  --crm-marco-lateral: 240px;
  /*
   * La barra de 44 y el pie de 32: la referencia de todo lo pegajoso de dentro
   * («top: var(--crm-marco-arriba)»), nunca un 0 que se mete bajo la barra.
   * El pie va a todo el ancho FUERA del área que desplaza (OFICIO F12): ya no
   * la tapa; `--crm-marco-abajo` es su alto en la vista (para calcular lo que
   * cabe), no un hueco que dejar dentro.
   */
  --crm-marco-arriba: 44px;
  --crm-marco-abajo: 32px;
  position: relative;
  display: grid;
  grid-template-columns: var(--crm-marco-lateral) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  height: var(--crm-marco-alto, 100dvh);
  min-height: 0;
  overflow: hidden;
  background: var(--crm-bg);
  color: var(--crm-text);
  font-family: var(--crm-sans);
  -webkit-font-smoothing: antialiased;
  transition: grid-template-columns var(--crm-t-panel) var(--crm-snap);
}

.crm-marco[data-plegado] {
  --crm-marco-lateral: 52px;
}

.crm-marco[data-movil] {
  grid-template-columns: minmax(0, 1fr);
}

.crm-marco-saltar {
  position: absolute;
  z-index: 50;
  top: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 32px;
  padding: 0 12px;
  /* Borde neutro: el único marco verde es el anillo de foco (§7, un solo indicador). */
  border: 1px solid var(--crm-line-2);
  background: var(--crm-panel);
  color: var(--crm-text);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  translate: 0 -160%;
}

.crm-marco-saltar:focus-visible {
  translate: 0 0;
}

/* El pie del panel, a todo el ancho bajo las dos columnas: el filete de abajo es una sola línea. */
.crm-marco-pie {
  grid-column: 1 / -1;
  min-width: 0;
}

.crm-marco-pie > .crm-pp {
  position: static;
  padding-left: 16px;
  background: var(--crm-bg);
}

.crm-marco-lateral {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid var(--crm-line);
}

/* El principal desplaza: la barra superior y el pie quedan pegados, opacos, encima del contenido. */
.crm-marco-principal {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

/*
 * El contenido es su propio contexto de apilado (D06/D07): ningún pegajoso,
 * columna fija o z-index del panel puede pintar encima de la barra superior
 * ni del pie, que van por encima de todo el contenido. Las capas (menús,
 * modales) se portan fuera y no se ven afectadas.
 */
.crm-marco-contenido {
  position: relative;
  z-index: 0;
  flex: 1 0 auto;
  min-width: 0;
  padding-bottom: 32px;
  outline: none;
  isolation: isolate;
}

.crm-marco-hoja {
  position: fixed;
  z-index: 41;
  inset: 0 auto 0 0;
  width: min(280px, 86%);
  border-right: 1px solid var(--crm-line);
  background: var(--crm-bg);
  box-shadow: var(--crm-sombra);
  outline: none;
}

.crm-marco-hoja[data-state="open"] {
  animation: crm-es-desde-izquierda var(--crm-t-panel) var(--crm-snap);
}

.crm-marco-hoja[data-state="closed"] {
  animation: crm-es-a-izquierda var(--crm-t-salida) var(--crm-snap) forwards;
}

/*
 * Marco antes de hidratar (MP-01). El servidor no sabe el ancho: pinta la barra
 * lateral en línea y el modo móvil (`data-movil`) llega con el JavaScript. Por
 * debajo del punto de corte por defecto (900, la misma consulta que usa
 * `MarcoPanel`), la barra en línea no ocupa sitio: el contenido tiene todo el
 * ancho desde el primer pintado, aunque el JavaScript tarde o la persona dejara
 * la barra desplegada. El «Abrir la navegación» de la barra superior ya está
 * en el HTML con `data-fuera` (fuera del modo móvil, `display: none`): aquí se
 * enseña, en su sitio, y al hidratar React le quita el `data-fuera` (el botón y
 * las migas no saltan). No con el atributo `hidden`: el preflight de Tailwind
 * v4 lleva `[hidden] { display: none !important }` en `@layer base`, y un
 * `!important` en capa gana a cualquier regla sin capa (aun `!important`). Todo por hijos directos
 * (`>`): la guarda de un marco nunca alcanza a un marco anidado. Un
 * `puntoMovil` propio marca `data-punto-movil` y trae su propia guarda ceñida
 * a su marco (`guardaMovil`).
 */
.crm-superior-nav[data-fuera] {
  display: none;
}

@media (max-width: 899px) {
  .crm-marco:not([data-punto-movil]) {
    grid-template-columns: minmax(0, 1fr);
  }

  .crm-marco:not([data-punto-movil]) > .crm-marco-lateral {
    display: none;
  }

  .crm-marco:not([data-punto-movil]) > .crm-marco-principal > .crm-marco-secuencia {
    left: 16px;
  }

  .crm-marco:not([data-punto-movil]) > .crm-marco-principal > .crm-superior > .crm-superior-izquierda > .crm-superior-nav[data-fuera] {
    display: inline-flex;
  }
}

/*
 * La hoja al tacto (NV-01): sus entradas son un blanco de dedo, a 40 (GRAMÁTICA
 * §6, cómodos a 40), con el icono y el texto de siempre. Con ratón, la fila de
 * 28 de la barra lateral (§2). La marca de lo activo conserva su aire de 4.
 */
@media (pointer: coarse) {
  .crm-marco-hoja .crm-lateral-item {
    height: 40px;
  }
}

/* ── Barra lateral ──────────────────────────────────────────────────── */
.crm-lateral {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-height: 0;
  background: var(--crm-bg);
  color: var(--crm-text-2);
  font-family: var(--crm-sans);
}

.crm-lateral-cabecera {
  display: grid;
  padding-bottom: 4px;
}

/* La firma ocupa la franja de 44 de la barra superior: la «L invertida» de Linear. */
.crm-lateral-firma {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  box-sizing: border-box;
  height: 44px;
  /* 44 con el filete dentro: 43 útiles; 1 arriba deja 42 y lo de 28 cae en y entera (8), no en 7,5 (§1). */
  padding: 1px 8px 0 16px;
  overflow: hidden;
  border-bottom: 1px solid var(--crm-line);
}

/* La firma de la lateral: mayúscula pintada 14 (`mayuscula`); si no cabe en la franja, el isotipo con su consejo. */

/* Plegar: aparece al pasar por la barra (o con el foco), como en Linear. */
.crm-lateral-firma .crm-lateral-plegar {
  opacity: 0;
}

.crm-lateral:hover .crm-lateral-plegar,
.crm-lateral-plegar:focus-visible,
.crm-lateral-plegar[data-state="delayed-open"],
.crm-lateral-plegar[data-state="instant-open"] {
  opacity: 1;
}

@media (hover: none) {
  .crm-lateral-firma .crm-lateral-plegar {
    opacity: 1;
  }
}

.crm-isotipo {
  display: inline-flex;
  color: var(--crm-text);
}

.crm-isotipo > span {
  display: block;
  height: 16px;
  aspect-ratio: 2179.377 / 1000;
  background-color: currentColor;
  -webkit-mask: var(--crm-lockup) left center / auto 100% no-repeat;
  mask: var(--crm-lockup) left center / auto 100% no-repeat;
}

/* El cliente: fila de 40 con logo de 24, nombre a 13/500 y detalle a 12. */
.crm-lateral-cliente {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: calc(100% - 16px);
  height: 40px;
  margin: 8px 8px 0;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  transition: background-color var(--crm-t-color) var(--crm-snap);
}

button.crm-lateral-cliente {
  cursor: default;
}

button.crm-lateral-cliente:hover,
button.crm-lateral-cliente[data-state="open"] {
  background: var(--crm-panel-2);
  transition-duration: 0ms;
}

.crm-lateral-logo {
  display: grid;
  flex: none;
  place-items: center;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  overflow: hidden;
  border: 1px solid var(--crm-line-2);
  background: var(--crm-panel-2);
  color: var(--crm-text);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 1;
}

.crm-lateral-logo :is(img, svg) {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Con logotipo propio: libre, sin caja ni fondo, a 20 (plegada y desplegada); el logotipo ya es la marca. */
.crm-lateral-logo[data-logo] {
  width: 20px;
  height: 20px;
  margin: 2px;
  overflow: visible;
  border: 0;
  background: transparent;
}

/* Iniciales del espacio: dos letras en Geist 500, como el avatar de una persona (nunca una letra en mono). */
.crm-lateral-logo[data-iniciales] {
  font-family: var(--crm-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
}

/* Criterium: el isotipo real, recortado del lockup (mismo trazo), centrado por su centro óptico. */
.crm-lateral-logo[data-iso] {
  border-color: var(--crm-line-2);
  background: var(--crm-panel);
}

.crm-lateral-logo-iso {
  display: block;
  height: 8px;
  aspect-ratio: 2179.377 / 1000;
  background-color: currentColor;
  -webkit-mask: var(--crm-lockup) left center / auto 100% no-repeat;
  mask: var(--crm-lockup) left center / auto 100% no-repeat;
}

.crm-lateral-cliente[data-fijo]:focus-visible {
  outline: var(--crm-foco-ancho) solid var(--crm-acento);
  outline-offset: -1px;
}

.crm-lateral-cliente-texto {
  display: grid;
  min-width: 0;
}

.crm-lateral-cliente-nombre {
  overflow: hidden;
  color: var(--crm-text);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-lateral-cliente-detalle {
  overflow: hidden;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-lateral-cliente-flecha {
  width: 14px;
  height: 14px;
  color: var(--crm-dim);
}

.crm-lateral-nav {
  --crm-indicio: 24px;
  --crm-indicio-arriba: 0px;
  --crm-indicio-abajo: 0px;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 4px 8px 12px;
  /* El foco que llega por teclado se queda fuera del degradado. */
  scroll-padding-block: var(--crm-indicio);
}

/* Indicio de que hay más (§15): degradado de 24 px en el borde por el que queda
   contenido fuera; solo cuando lo hay. */
.crm-lateral-nav[data-mas-arriba] {
  --crm-indicio-arriba: var(--crm-indicio);
}

.crm-lateral-nav[data-mas-abajo] {
  --crm-indicio-abajo: var(--crm-indicio);
}

.crm-lateral-nav:is([data-mas-arriba], [data-mas-abajo]) {
  -webkit-mask-image: linear-gradient(180deg, transparent, currentColor var(--crm-indicio-arriba), currentColor calc(100% - var(--crm-indicio-abajo)), transparent);
  mask-image: linear-gradient(180deg, transparent, currentColor var(--crm-indicio-arriba), currentColor calc(100% - var(--crm-indicio-abajo)), transparent);
}

/* D115 · Si la lista no cabe, el borde por el que sigue se funde 24 (§15). */
.crm-lateral-nav[data-desborde-v="fin"] {
  mask-image: linear-gradient(to bottom, var(--crm-text) calc(100% - 24px), transparent);
}

.crm-lateral-nav[data-desborde-v="inicio"] {
  mask-image: linear-gradient(to top, var(--crm-text) calc(100% - 24px), transparent);
}

.crm-lateral-nav[data-desborde-v="ambos"] {
  mask-image: linear-gradient(to bottom, transparent, var(--crm-text) 24px, var(--crm-text) calc(100% - 24px), transparent);
}

.crm-lateral-grupo + .crm-lateral-grupo {
  margin-top: 12px;
}

.crm-lateral-grupo ul {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Rótulo de grupo: 24 de alto, 12 px en frase normal y --crm-muted (sin mayúsculas, como Linear). Se pliega. */
.crm-lateral-rotulo {
  margin: 0;
  color: var(--crm-muted);
  font-family: var(--crm-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.crm-lateral-rotulo > .crm-lateral-rotulo-texto,
.crm-lateral-rotulo-boton {
  display: flex;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  width: 100%;
  height: 24px;
  padding: 0 8px;
}

.crm-lateral-rotulo-boton {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: default;
  transition: color var(--crm-t-color) var(--crm-snap);
}

.crm-lateral-rotulo-boton:hover {
  color: var(--crm-text-2);
  transition-duration: 0ms;
}

.crm-lateral-rotulo-texto {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-lateral-rotulo-flecha {
  flex: none;
  width: 14px;
  height: 14px;
  stroke-width: 1.5;
  opacity: 0;
  transition:
    opacity var(--crm-t-color) var(--crm-snap),
    transform var(--crm-t-gesto) var(--crm-snap);
}

.crm-lateral-rotulo-boton:hover .crm-lateral-rotulo-flecha,
.crm-lateral-rotulo-boton:focus-visible .crm-lateral-rotulo-flecha,
.crm-lateral-grupo[data-cerrado] .crm-lateral-rotulo-flecha {
  opacity: 1;
}

.crm-lateral-grupo[data-cerrado] .crm-lateral-rotulo-flecha {
  transform: rotate(-90deg);
}

.crm-lateral-rotulo-boton:focus-visible {
  outline-offset: -1px;
}

/* Ítem de 28: icono de 16, texto 13 (500 en el activo) y contador 12 tabular a la derecha. */
.crm-lateral-item {
  position: relative;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  height: 28px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--crm-text-2);
  font-family: var(--crm-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 20px;
  text-align: left;
  text-decoration: none;
  cursor: default;
  transition:
    background-color var(--crm-t-color) var(--crm-snap),
    color var(--crm-t-color) var(--crm-snap);
}

.crm-lateral-item:focus-visible {
  outline-offset: -1px;
}

/* La marca de lo activo: 2 px de acento que baja desde arriba en 160 ms. */
.crm-lateral-item::before {
  content: "";
  position: absolute;
  inset: 4px auto 4px 0;
  width: 2px;
  background: var(--crm-acento);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--crm-t-gesto) var(--crm-snap);
}

/* Hover instantáneo al entrar, 120 ms al salir. */
/* El paso del puntero, solo con puntero que pasa: en táctil no queda un segundo ítem resaltado tras un toque (K5-17). */
@media (hover: hover) {
  .crm-lateral-item:hover {
    background: var(--crm-panel-2);
    color: var(--crm-text);
    transition-duration: 0ms;
  }

  .crm-lateral-item:hover .crm-lateral-icono {
    color: var(--crm-text);
  }
}

.crm-lateral-item[aria-current="page"] {
  background: var(--crm-panel-3);
  color: var(--crm-text);
  font-weight: 500;
}

.crm-lateral-item[aria-current="page"]::before {
  transform: scaleY(1);
}

.crm-lateral-icono {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: var(--crm-muted);
}

.crm-lateral-item[aria-current="page"] .crm-lateral-icono {
  color: var(--crm-text);
}

.crm-lateral-icono svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.6;
}

.crm-lateral-etiqueta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-lateral-vivo {
  flex: none;
}

.crm-lateral-contador {
  color: var(--crm-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  line-height: 16px;
}

.crm-lateral-contador[data-atencion] {
  color: var(--crm-acento);
  font-weight: 500;
}

/*
 * Franja inferior de 32 (filete incluido), con el filete a la misma «y» que
 * el del PiePanel (FUNDAMENTOS §2): la persona en una fila de 28.
 */
.crm-lateral-pie {
  display: flex;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  height: 32px;
  min-width: 0;
  padding: 0 2px 0 4px;
  border-top: 1px solid var(--crm-line);
}

/* La franja recorta por abajo (borde del panel): el anillo de lo que lleva dentro va por dentro (§7). */
.crm-lateral-pie :focus-visible {
  outline-offset: -1px;
}

.crm-lateral-pie .crm-usuario-fila {
  height: 28px;
  padding: 0 4px;
}

.crm-lateral-pie .crm-usuario-fila .crm-avatar {
  --crm-avatar: 20px;
}

/* En la franja de 28, el nombre solo; el rol va en su consejo y en el menú. */
.crm-lateral-pie .crm-usuario-rol {
  display: none;
}

.crm-lateral-hueco {
  flex: 1;
}

.crm-lateral-ajustes {
  display: flex;
  flex: none;
  align-items: center;
  gap: 2px;
}

/* Plegada (52): iconos con consejo; lo escrito sigue ahí para el lector de pantalla. */
.crm-lateral[data-plegado] :is(.crm-lateral-etiqueta, .crm-lateral-contador, .crm-lateral-rotulo, .crm-lateral-cliente-texto, .crm-lateral-cliente-flecha) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.crm-lateral[data-plegado] .crm-lateral-firma {
  justify-content: center;
  padding: 0;
}

.crm-lateral[data-plegado] .crm-lateral-cliente {
  grid-template-columns: 24px;
  justify-content: center;
  width: 36px;
  margin-inline: 8px;
  padding: 0;
}

/* 52 con el filete dentro: 51 de contenido → 8 + 36 + 7, ítem de 36 centrado e icono en x entera. */
.crm-lateral[data-plegado] .crm-lateral-nav {
  padding-inline: 8px 7px;
}

.crm-lateral[data-plegado] .crm-lateral-grupo + .crm-lateral-grupo {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--crm-line);
}

.crm-lateral[data-plegado] .crm-lateral-item {
  grid-template-columns: 16px;
  justify-content: center;
  padding: 0;
}

.crm-lateral[data-plegado] .crm-lateral-vivo {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 6px;
  height: 6px;
}

/* Lo que espera a una persona sigue a la vista plegada: un punto verde junto al icono. */
.crm-lateral[data-plegado] .crm-lateral-item:has(.crm-lateral-contador[data-atencion])::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--crm-acento);
}

/*
 * Plegada: los ajustes suben sobre la franja y la persona queda en la franja
 * de 32, con el filete a la misma «y» que el del PiePanel.
 */
.crm-lateral[data-plegado] .crm-lateral-pie {
  position: relative;
  flex-direction: column-reverse;
  gap: 4px;
  height: auto;
  padding: 0 0 2px;
  border-top: 0;
}

.crm-lateral[data-plegado] .crm-lateral-pie::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 31px;
  left: 0;
  border-top: 1px solid var(--crm-line);
  pointer-events: none;
}

.crm-lateral[data-plegado] .crm-lateral-ajustes {
  margin-bottom: 4px;
}

.crm-lateral[data-plegado] .crm-lateral-ajustes {
  flex-direction: column;
}

.crm-lateral[data-plegado] .crm-lateral-hueco {
  display: none;
}

/* ── La persona ─────────────────────────────────────────────────────── */
/* Fila de 40 en el pie de la barra lateral: el nombre no se corta sin decirlo entero en su consejo. */
.crm-usuario-fila {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  min-width: 0;
  height: 40px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: default;
  transition: background-color var(--crm-t-color) var(--crm-snap);
}

.crm-usuario-fila:hover,
.crm-usuario-fila[data-state="open"] {
  background: var(--crm-panel-2);
  transition-duration: 0ms;
}

.crm-usuario-fila .crm-avatar,
.crm-usuario-avatar .crm-avatar {
  --crm-avatar: 24px;
  font-size: 11px;
}

.crm-usuario-texto {
  display: grid;
  flex: 1;
  min-width: 0;
}

.crm-usuario-nombre {
  overflow: hidden;
  color: var(--crm-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-usuario-rol {
  overflow: hidden;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* La flecha no roba ancho al nombre: el fondo al pasar ya dice que abre un menú. */
.crm-usuario-flecha {
  display: none;
}

/* En la barra superior: avatar de 24 en un botón de 28. */
.crm-usuario-avatar {
  display: inline-grid;
  flex: none;
  place-items: center;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  cursor: default;
  transition:
    border-color var(--crm-t-color) var(--crm-snap),
    transform var(--crm-t-pulsar) var(--crm-snap);
}

.crm-usuario-avatar:hover,
.crm-usuario-avatar[data-state="open"] {
  border-color: var(--crm-line-2);
  transition-duration: 0ms;
}

.crm-usuario-avatar:active {
  transform: scale(0.96);
}

/* ── Barra superior ─────────────────────────────────────────────────── */
/* 44 de alto; todo lo de dentro a 28. Empieza a 24, como el contenido: migas y título caen en la misma guía. */
.crm-superior {
  position: sticky;
  z-index: 5;
  top: 0;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-sizing: border-box;
  height: 44px;
  /* 44 con el filete dentro: 1 arriba y los controles de 28 caen en y entera (8), como en la lateral. */
  padding: 1px 12px 0 var(--crm-es-pad);
  border-bottom: 1px solid var(--crm-line);
  /*
   * Opaca (K4-07): con el velo al 86 % y el desenfoque, lo que pasaba por
   * debajo al desplazar asomaba detrás de las migas y el título (comprobado en
   * captura). Lienzo macizo y su filete: nada que leer a través.
   */
  background: var(--crm-bg);
  /*
   * La barra decide «estrecha» por su ancho de contenido, también antes de que
   * llegue el JavaScript (ver «Barra superior estrecha»): mismo umbral que la
   * pieza (< 720 de caja de contenido).
   */
  container: crm-superior / inline-size;
}

.crm-superior-izquierda {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.crm-superior-derecha {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
}

/* Búsqueda de 28: lupa de 14, texto 13 y la tecla ⌘K a 4 px del borde. */
.crm-superior-busca {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  width: 240px;
  height: 28px;
  padding: 0 3px 0 8px;
  border: 1px solid var(--crm-line-2);
  background: var(--crm-panel);
  color: var(--crm-dim);
  font-family: var(--crm-sans);
  font-size: 13px;
  line-height: 20px;
  cursor: default;
  transition:
    border-color var(--crm-t-color) var(--crm-snap),
    color var(--crm-t-color) var(--crm-snap);
}

.crm-superior-busca:hover {
  border-color: var(--crm-control);
  color: var(--crm-muted);
  transition-duration: 0ms;
}

.crm-superior-busca > svg {
  flex: none;
  width: 14px;
  height: 14px;
  stroke-width: 1.5;
}

.crm-superior-busca-texto {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * Lo que el host pone en la barra va a su altura: `Boton tamano="compacto"`
 * (28, 13 px y en frase normal). Una barra, una altura.
 */
/* Ranura de las acciones de la vista (K5-18): vacía no ocupa nada; con acciones, iconos de 28 a 4. */
.crm-superior-ranura {
  display: contents;
}

.crm-va-acciones-marco {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.crm-superior-acciones {
  display: flex;
  align-items: center;
  gap: 8px;
}

.crm-superior-acciones :is(fieldset) {
  display: contents;
  margin: 0;
  padding: 0;
  border: 0;
}

/*
 * Un <button> o <a> suelto que el host pase en `acciones` recibe la piel de
 * un botón secundario de 28 (antes salía como texto suelto, sin caja).
 */
.crm-superior-accion {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  height: 28px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid var(--crm-line-2);
  border-radius: 0;
  background: var(--crm-panel);
  color: var(--crm-text-2);
  font-family: var(--crm-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.005em;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--crm-t-salida) linear,
    border-color var(--crm-t-salida) linear,
    color var(--crm-t-salida) linear;
}

.crm-superior-accion > svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.5;
}

@media (hover: hover) {
  .crm-superior-accion:hover {
    border-color: var(--crm-control);
    background: var(--crm-panel-2);
    color: var(--crm-text);
    transition-duration: 0ms;
  }
}

.crm-superior-accion:active {
  background: var(--crm-panel-3);
  transform: translateY(0.5px);
}

.crm-superior-accion:focus-visible {
  outline: var(--crm-foco-ancho) solid var(--crm-acento);
  outline-offset: 2px;
}

/* Pendientes: botón fantasma de 28 con su cifra (verde si algo espera a una persona). */
.crm-superior-pendientes .crm-superior-pendientes-cifra {
  margin-left: 2px;
}

/* Conmutador de vista: el `Conmutador` de controles a 28; el punto vivo, a su izquierda. */
.crm-vista .crm-vista-vivo {
  flex: none;
}

/* Campana: botón de 28 con su cifra al lado, en 12 tabular. */
.crm-avisos-campana {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--crm-text-2);
  font-family: var(--crm-sans);
  cursor: default;
  transition:
    background-color var(--crm-t-color) var(--crm-snap),
    border-color var(--crm-t-color) var(--crm-snap),
    color var(--crm-t-color) var(--crm-snap),
    transform var(--crm-t-pulsar) var(--crm-snap);
}

.crm-avisos-campana[data-cifra] {
  padding: 0 8px 0 7px;
}

.crm-avisos-campana:hover {
  border-color: var(--crm-line-2);
  color: var(--crm-text);
  transition-duration: 0ms, 0ms, 0ms, var(--crm-t-pulsar);
}

.crm-avisos-campana[data-state="open"] {
  border-color: var(--crm-line-2);
  background: var(--crm-panel-2);
  color: var(--crm-text);
}

.crm-avisos-campana:active {
  transform: scale(0.96);
}

.crm-avisos-campana svg {
  flex: none;
  width: 14px;
  height: 14px;
  stroke-width: 1.5;
}

.crm-avisos-cifra {
  color: var(--crm-acento);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  line-height: 16px;
}

/* ── Migas ──────────────────────────────────────────────────────────── */
/* 13 px; «/» en --crm-dim; la página actual en --crm-text a 500. */
.crm-migas {
  min-width: 0;
}

.crm-migas ol {
  display: flex;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crm-migas li {
  display: flex;
  align-items: center;
  min-width: 0;
  color: var(--crm-muted);
  font-family: var(--crm-sans);
  font-size: 13px;
  letter-spacing: -0.005em;
  line-height: 20px;
  white-space: nowrap;
}

.crm-migas li + li::before {
  content: "/" / "";
  margin: 0 8px;
  color: var(--crm-dim);
}

.crm-migas li[data-ultima] {
  overflow: hidden;
  color: var(--crm-text);
  font-weight: 500;
}

/* Si no caben, ceden primero los pasos (y la raíz), hasta 48 px con elipsis, y la página
   actual la última; cada paso cortado, con el texto entero en su consejo (§14). */
.crm-migas li:not([data-ultima]) {
  flex-shrink: 0;
}

/* Los pasos de más de 48 (los marca Migas) ceden primero, hasta 48 con elipsis. */
.crm-migas li[data-largo]:not([data-ultima]) {
  flex-shrink: 1000000;
  min-width: 48px;
}

/* La actual encoge a razón 1 frente al millón de los pasos: mientras ellos puedan, ella no
   pierde ni una fracción de píxel (con 1 frente a 1000 perdía ~0,05 px y la elipsis se comía
   «26»); con todos en su mínimo, le toca a ella. No va por debajo de 1: con una suma de
   factores < 1, flex solo reparte esa fracción del sobrante y la barra se saldría. */
.crm-migas li[data-ultima] {
  flex-shrink: 1;
}

.crm-migas-actual,
.crm-migas-enlace {
  min-width: 0;
}

.crm-migas-texto {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-migas-enlace {
  color: inherit;
  text-decoration: none;
  transition: color var(--crm-t-color) var(--crm-snap);
}

.crm-migas-enlace:hover {
  color: var(--crm-text);
  transition-duration: 0ms;
}

/* Un paso que navega por estado (`onElegir` sin `href`): un botón con la misma piel que el enlace. */
.crm-migas-boton {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

.crm-migas-boton:focus-visible {
  outline: var(--crm-foco-ancho) solid var(--crm-acento);
  outline-offset: 2px;
}

/* ── Avisos ─────────────────────────────────────────────────────────── */
.crm-avisos-leer,
.crm-avisos-todo {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 24px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--crm-muted);
  font-family: var(--crm-sans);
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  cursor: default;
  transition:
    background-color var(--crm-t-color) var(--crm-snap),
    color var(--crm-t-color) var(--crm-snap);
}

.crm-avisos-todo {
  width: 100%;
  height: 28px;
  color: var(--crm-text-2);
  font-size: 13px;
  line-height: 20px;
}

.crm-avisos-leer:hover,
.crm-avisos-todo:hover {
  background: var(--crm-panel-3);
  color: var(--crm-text);
  transition-duration: 0ms;
}

.crm-avisos-leer:focus-visible,
.crm-avisos-todo:focus-visible {
  outline-offset: -1px;
}

.crm-avisos-lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.crm-avisos-fila {
  position: relative;
}

.crm-avisos-fila + .crm-avisos-fila {
  border-top: 1px solid var(--crm-line);
}

.crm-avisos-abrir {
  position: relative;
  display: grid;
  grid-template-columns: 6px minmax(0, 1fr);
  align-items: start;
  column-gap: 8px;
  box-sizing: border-box;
  width: 100%;
  min-height: 56px;
  padding: 10px 76px 10px 12px;
  border: 0;
  background: transparent;
  color: var(--crm-text-2);
  font: inherit;
  text-align: left;
}

button.crm-avisos-abrir {
  cursor: default;
  transition: background-color var(--crm-t-color) var(--crm-snap);
}

/* Hover instantáneo al entrar, 120 ms al salir. */
button.crm-avisos-abrir:hover {
  background: var(--crm-panel-3);
  transition-duration: 0ms;
}

button.crm-avisos-abrir:focus-visible {
  outline-offset: -1px;
}

.crm-avisos-fila[data-tono="aprobacion"] .crm-avisos-abrir::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--crm-acento);
}

.crm-avisos-marca {
  display: grid;
  place-items: center;
  height: 20px;
}

/* El punto de lo no leído, centrado con la primera línea del título. */
.crm-avisos-nuevo {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--crm-acento);
}

.crm-avisos-texto {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.crm-avisos-titulo {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  color: var(--crm-text-2);
  font-size: 13px;
  letter-spacing: -0.005em;
  line-height: 20px;
}

.crm-avisos-fila[data-nuevo] .crm-avisos-titulo {
  color: var(--crm-text);
  font-weight: 500;
}

.crm-avisos-icono {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 3px;
  stroke-width: 1.5;
  color: var(--crm-muted);
}

.crm-avisos-fila:is([data-tono="aprobacion"], [data-tono="hecho"]) .crm-avisos-icono {
  color: var(--crm-acento);
}

.crm-avisos-fila[data-tono="error"] .crm-avisos-icono {
  color: var(--crm-error);
}

.crm-avisos-titulo-texto {
  min-width: 0;
}

.crm-avisos-detalle {
  overflow: hidden;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-avisos-hora {
  position: absolute;
  top: 12px;
  right: 12px;
  color: var(--crm-dim);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 16px;
  white-space: nowrap;
  pointer-events: auto;
}

.crm-avisos-hora:focus {
  outline: none;
}

.crm-avisos-vacio {
  padding: 24px 16px;
}

.crm-avisos-cargando {
  display: grid;
}

.crm-avisos-esqueleto {
  display: grid;
  gap: 6px;
  padding: 14px 12px 14px 26px;
  opacity: 0;
  animation: crm-es-aparece 0s linear var(--crm-t-retardo) forwards;
}

.crm-avisos-esqueleto + .crm-avisos-esqueleto {
  border-top: 1px solid var(--crm-line);
}

.crm-avisos-esqueleto i {
  display: block;
  width: 72%;
  height: 8px;
  background: linear-gradient(90deg, var(--crm-esqueleto-a), var(--crm-esqueleto-b), var(--crm-esqueleto-a));
  background-size: 200% 100%;
  animation: crm-es-esqueleto var(--crm-t-barrido) var(--crm-curva) infinite;
}

.crm-avisos-esqueleto i + i {
  width: 44%;
  height: 6px;
}

@keyframes crm-es-esqueleto {
  from {
    background-position: 100% 0;
  }

  to {
    background-position: -100% 0;
  }
}

.crm-avisos-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px;
  color: var(--crm-text-2);
  font-size: 13px;
  line-height: 20px;
}

.crm-avisos-error > svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--crm-error);
}

.crm-avisos-error p {
  margin: 0 0 8px;
}

.crm-avisos-error .crm-avisos-leer {
  margin-left: -8px;
  color: var(--crm-text);
}

/* ── Pie del panel ──────────────────────────────────────────────────── */
/*
 * Línea de estado de 32 (FUNDAMENTOS §2), mono 11 en frase normal. Lo vivo
 * (estado y hora) mide lo suyo y nunca encoge. La derecha (soporte y firma)
 * ocupa lo que queda: la firma entera si cabe y, si no, el isotipo a su escala
 * con el nombre en su consejo (§11), en la misma línea (K13: a 390 el pie ya no
 * parte en dos). Solo si lo vivo y el isotipo no caben con su hueco (sin
 * respuesta y su salida a 320), la derecha baja a una segunda línea (31 más),
 * a la derecha. Nada se corta, nada se achica y el hueco nunca baja del suyo.
 */
.crm-pp {
  position: sticky;
  z-index: 5;
  bottom: 0;
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 24px;
  box-sizing: border-box;
  min-height: 32px;
  padding: 0 12px 0 var(--crm-es-pad);
  overflow: hidden;
  border-top: 1px solid var(--crm-line);
  /* Opaco, como la barra superior: la línea de estado no deja ver el contenido que pasa por debajo. */
  background: var(--crm-bg);
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  line-height: 16px;
  white-space: nowrap;
}

.crm-pp-vivo,
.crm-pp-derecha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 16px;
  min-width: 0;
  /* La línea de 32 menos el filete de arriba (dentro de la medida): en una línea, el pie mide 32 justos. */
  min-height: 31px;
}

/*
 * Base 0: para partir línea cuenta su mínimo (el soporte, si se ve, y el
 * isotipo), no la firma entera; luego crece con lo que queda. Mínimo
 * automático (su contenido mínimo), no 0: con 0, el isotipo se salía hacia la
 * hora. Sin envolver por dentro: el soporte no baja de línea, la zona de la
 * firma cede.
 */
.crm-pp-derecha {
  flex: 1 1 0px;
  flex-wrap: nowrap;
  min-width: auto;
  justify-content: flex-end;
  margin-left: auto;
}

.crm-pp-derecha > :not(.crm-firma-zona) {
  flex: none;
}

/*
 * La zona de la firma parte del ancho del isotipo (51 a mayúscula 12) y crece
 * con lo libre, con la firma a la derecha: su mínimo, para partir línea, es el
 * isotipo y no la firma entera; nunca baja de él.
 */
.crm-pp .crm-firma-zona {
  justify-content: flex-end;
  width: var(--crm-pp-isotipo);
  min-width: var(--crm-pp-isotipo);
}

/*
 * Cada pieza de un grupo ocupa una línea entera de la ley (31, la de 32 sin el filete), centrada: si el grupo envuelve
 * por dentro (a 390, «Sin respuesta» con «Volver a medir» y la hora no caben juntos), cada línea interior mide 31 y no
 * lo que mida su pieza (24 el botón, 16 el texto). Así el pie es siempre 1 + 31 × líneas, envuelva un grupo o los dos.
 */
.crm-pp-vivo > *,
.crm-pp-derecha > * {
  display: inline-flex;
  align-items: center;
  min-height: 31px;
}

.crm-pp-estado,
.crm-pp-hora,
.crm-pp-soporte {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.crm-pp-estado .crm-punto {
  width: 6px;
  height: 6px;
}

.crm-pp-estado[data-estado="ok"] .crm-punto {
  background: var(--crm-acento);
  box-shadow: 0 0 0 3px var(--crm-acento-suave);
}

.crm-pp-estado[data-estado="ok"] .crm-punto::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--crm-acento);
  animation: crm-latido var(--crm-t-latido) ease-out infinite;
}

.crm-pp-estado[data-estado="sin-respuesta"] {
  color: var(--crm-aviso);
}

.crm-pp-estado[data-estado="sin-respuesta"] .crm-punto {
  background: var(--crm-aviso);
}

.crm-pp-valor {
  color: var(--crm-text-2);
  font-variant-numeric: tabular-nums;
}

.crm-pp-version {
  color: var(--crm-dim);
}

.crm-pp-soporte a,
.crm-pp-enlaces a {
  color: var(--crm-text-2);
  text-decoration: none;
  transition: color var(--crm-t-color) var(--crm-snap);
}

.crm-pp-soporte a:hover,
.crm-pp-enlaces a:hover {
  color: var(--crm-acento);
  transition-duration: 0ms;
}

.crm-pp-enlaces {
  display: inline-flex;
  gap: 12px;
}

/* Firma del pie: mayúscula pintada 12 (`mayuscula`, FUNDAMENTOS; el cálculo de la tinta está en marca.css), apagada. */
.crm-pp .crm-pp-firma {
  color: var(--crm-muted);
}


/* ── Cabecera de página ─────────────────────────────────────────────── */
/* Responde a su propio ancho (FUNDAMENTOS §15), no al de la ventana. */
.crm-cabecera {
  container: crm-cabecera / inline-size;
  padding: var(--crm-es-pad) var(--crm-es-pad) 0;
}

/* Ritmo fijo: 24 hasta el título, 4 hasta la descripción, 20 hasta el filete. */
.crm-cabecera-fila {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding-bottom: 20px;
}

.crm-cabecera-fila > .crm-es-rotulo {
  margin-bottom: 2px;
}

/*
 * Título y acciones en una línea: las acciones (32) en la base del título
 * (32). No se parte: si no cabe, el título baja a dos líneas y las acciones
 * siguen en su base (a menos de 720, la regla de abajo las pasa a su fila).
 */
.crm-cabecera-linea {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 32px;
  min-width: 0;
}

.crm-cabecera-linea > .crm-cabecera-titulo {
  flex: 1 1 320px;
  min-width: 0;
  max-width: 68ch;
}

/* Título 24/32, 500, −0,03 em. */
.crm-cabecera-titulo {
  margin: 0;
  color: var(--crm-text);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 32px;
  text-wrap: balance;
}

.crm-cabecera-descripcion {
  max-width: 68ch;
  margin: 0;
  color: var(--crm-muted);
  font-size: 14px;
  line-height: 22px;
}

/* A 4 de la descripción: el hueco lo pone la rejilla de la fila (un margen más lo dejaba en 8). */
.crm-cabecera-meta {
  margin: 0;
  color: var(--crm-dim);
  font-family: var(--crm-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 16px;
}

/*
 * Meta con un bloque (una navegación de anclas, una lista): el contenedor es
 * un <div> (HTML válido, sin errores de hidratación) y el bloque sigue en la
 * línea de la meta, con la misma letra, a 12 entre enlaces. Dentro de un
 * trozo de Metadatos, la navegación (o la lista) es una fila más del trozo,
 * esté donde esté: nunca enlaces pegados ni un bloque que salta de línea.
 */
/*
 * La caja de Metadatos (también un <div> en bloque) queda fuera: su hueco es el
 * suyo (16, con el «·» en el centro). Con esta regla encima, el hueco bajaba a
 * 12 y el «·» se quedaba a 4 del trozo de la izquierda (D-N016).
 */
.crm-cabecera-meta[data-crm-bloque] > :is(nav, ul, ol, div):not(.crm-metadatos),
.crm-metadatos-trozo :is(nav, ul, ol) {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  vertical-align: baseline;
}

/* Acciones de 32: la principal blanca, el resto en contorno. */
.crm-cabecera-acciones {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 32px;
}

/*
 * A menos de 720 de cabecera: título 24/32, la descripción y la meta debajo y
 * las acciones en su propia fila al final, con la principal a la derecha.
 * La línea título + acciones se deshace (display: contents) y el título es
 * una fila más de la rejilla: nada crece en el eje vertical (B2: la base de
 * 320 px del título se aplicaba al alto y dejaba un hueco bajo él).
 */
@container crm-cabecera (max-width: 719.98px) {
  .crm-cabecera-linea {
    display: contents;
  }

  .crm-cabecera-linea > .crm-cabecera-titulo {
    max-width: none;
  }

  .crm-cabecera-acciones {
    order: 1;
    justify-content: flex-end;
    margin-top: 8px;
  }
}

/* Pestañas que no caben: desplazan en horizontal con el degradado de 24 del Conmutador como indicio. */
.crm-cabecera-pestanas.crm-conmutador,
.crm-cabecera-pestanas .crm-conmutador {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.crm-cabecera-pestanas.crm-conmutador::-webkit-scrollbar,
.crm-cabecera-pestanas .crm-conmutador::-webkit-scrollbar {
  display: none;
}

/* El contenido empieza a 24 px del filete de la cabecera. */
.crm-cabecera + :is(.crm-seccion, .crm-cuerpo) {
  padding-top: 24px;
}

/*
 * Cuerpo de página: 24 a los lados (la misma guía que la cabecera y las
 * migas) y el mismo aire entre bloques, 32 (compacto) o 48 (cómodo). Las
 * secciones de dentro dejan su relleno: el ritmo es del cuerpo.
 */
.crm-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
  padding: 24px var(--crm-es-pad) 48px;
}

.crm-cuerpo[data-ritmo="comodo"] {
  gap: 48px;
}

.crm-cuerpo > .crm-seccion {
  padding: 0;
}

.crm-cuerpo > * {
  min-width: 0;
  margin-block: 0;
}

/* Rejilla de tarjetas: filas a la misma altura, filetes en las mismas líneas. */
.crm-rejilla {
  display: grid;
  grid-template-columns: var(--crm-rejilla-plantilla);
  align-items: stretch;
  gap: var(--crm-rejilla-separacion, 24px);
  min-width: 0;
}

.crm-rejilla > * {
  min-width: 0;
}

@media (max-width: 720px) {
  .crm-rejilla {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}

.crm-cabecera:not(.crm-cabecera-con-pestanas) {
  border-bottom: 1px solid var(--crm-line);
}

/* Pestañas de la página: las de controles, a sangre hasta los bordes del contenido. */
.crm-ctl-pestanas.crm-cabecera-pestanas,
nav.crm-cabecera-pestanas {
  max-width: none;
  margin-inline: calc(var(--crm-es-pad) * -1);
}

.crm-cabecera-pestanas .crm-conmutador,
nav.crm-cabecera-pestanas {
  padding-inline: var(--crm-es-pad);
}

/* ── Sección y tarjeta ──────────────────────────────────────────────── */
.crm-seccion {
  padding: 32px var(--crm-es-pad) 0;
}

/*
 * Sección dentro de lo que ya da su relleno y su ritmo: el cuerpo de una
 * capa (modal, panel deslizante), una tarjeta u otra sección. La sección no
 * suma el margen de página (32 arriba y --crm-es-pad a los lados): su
 * contenido queda en la misma guía que el cuerpo que la contiene. Dos
 * secciones seguidas guardan 24 entre ellas (el aire que deja una cabecera
 * hasta su contenido). Su título, filete, acciones y plegado no cambian; la
 * sección de página, tampoco.
 */
:is(.crm-modal-cuerpo, .crm-deslizante-cuerpo, .crm-tarjeta, .crm-seccion) .crm-seccion {
  padding: 0;
}

/*
 * SC-01 · En contexto, toda sección que no abre su contenedor guarda 24 con lo
 * de antes: otra sección, una lista de datos, un párrafo. Antes solo la que
 * seguía a otra sección (la que iba tras un <dl> quedaba pegada, 4–8, y su
 * título se leía como una fila más). La primera no suma nada: la guía es la del
 * contenedor.
 */
:is(.crm-modal-cuerpo, .crm-deslizante-cuerpo, .crm-tarjeta, .crm-seccion) .crm-seccion:not(:first-child) {
  margin-top: 24px;
}

/*
 * SC-03 · Dentro de una tarjeta la sección es un nivel por debajo del título de
 * la tarjeta (15/22 · 500): su título va en el rol de interfaz a 500 (13/20),
 * con su filete, y la primera se separa 16 del título de la tarjeta (8 de la
 * rejilla + 8). Dos títulos hermanos a 15 separados por 8 no tenían jerarquía.
 */
.crm-tarjeta .crm-seccion-titulo {
  font-size: 13px;
  letter-spacing: -0.005em;
  line-height: 20px;
}

.crm-tarjeta-cuerpo > .crm-seccion:first-child {
  margin-top: 8px;
}

.crm-seccion-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 24px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--crm-line);
}

.crm-seccion-textos {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.crm-seccion-titulo {
  margin: 0;
  color: var(--crm-text);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 22px;
}

.crm-seccion-descripcion {
  max-width: 68ch;
  margin: 0;
  color: var(--crm-muted);
  font-size: 13px;
  line-height: 20px;
}

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

.crm-tarjeta {
  position: relative;
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--crm-line-2);
  background: var(--crm-panel);
  color: var(--crm-text-2);
}

/*
 * Aprobación (FUNDAMENTOS §6): sin halo ni velo verde. El filo de acento de
 * 2 px arriba (el borde de 1 + 1 hacia dentro, sin cambiar la medida) y el
 * único verde relleno de la vista, que es su botón de aprobar.
 */
.crm-tarjeta[data-variante="aprobacion"] {
  border-color: var(--crm-acento-linea);
  border-top-color: var(--crm-acento);
  box-shadow: inset 0 1px 0 var(--crm-acento);
}

.crm-tarjeta[data-variante="error"] {
  border-color: var(--crm-error-linea);
}

.crm-tarjeta[data-variante="hundida"] {
  border-color: var(--crm-line);
  background: var(--crm-bg);
  box-shadow: var(--crm-sombra-hundida);
}

/* Chip de estado de 20: Geist 12 en frase normal, como los estados de todo el sistema. */
.crm-tarjeta-chip {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 6px;
  box-sizing: border-box;
  height: 20px;
  margin: 0;
  padding: 0 6px;
  border: 1px solid var(--crm-line-2);
  color: var(--crm-text-2);
  font-family: var(--crm-sans);
  font-size: 12px;
  letter-spacing: 0;
  line-height: 16px;
}

.crm-tarjeta-chip svg {
  width: 12px;
  height: 12px;
  stroke-width: 1.5;
}

.crm-tarjeta:is([data-variante="aprobacion"], [data-variante="hecho"]) .crm-tarjeta-chip {
  border-color: var(--crm-acento-linea);
  background: var(--crm-acento-suave);
  color: var(--crm-acento);
}

.crm-tarjeta[data-variante="error"] .crm-tarjeta-chip {
  border-color: var(--crm-error-linea);
  color: var(--crm-error);
}

.crm-tarjeta-titulo {
  margin: 4px 0 0;
  color: var(--crm-text);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 22px;
}

.crm-tarjeta-titulo:first-child {
  margin-top: 0;
}

/*
 * Títulos de sección y tarjeta con icono: 16 en muted a 8 px del título
 * 15/500. Un icono suelto que el host meta en el título (Lucide trae 24) se
 * queda también a 16.
 */
:is(.crm-seccion-titulo, .crm-tarjeta-titulo) {
  display: flex;
  align-items: center;
  gap: 8px;
}

.crm-titulo-icono {
  display: grid;
  flex: none;
  color: var(--crm-muted);
}

:is(.crm-seccion-titulo, .crm-tarjeta-titulo) svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--crm-muted);
  stroke-width: 1.6;
}

.crm-tarjeta-texto {
  margin: 0;
  color: var(--crm-text-2);
  font-size: 14px;
  line-height: 22px;
}

.crm-tarjeta-cuerpo {
  min-width: 0;
  font-size: 14px;
  line-height: 22px;
}

.crm-tarjeta-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

/*
 * Barra superior estrecha (< 720 de ancho de contenido): a la vista, la
 * navegación, la página actual, buscar, pendientes con su cifra, avisos y la
 * persona. La vista y las acciones del host van al menú «…». Nada se corta ni
 * se desplaza a escondidas.
 *
 * Desde el PRIMER PINTADO: lo de dentro lo decide la consulta de contenedor
 * de la propia barra (`@container crm-superior`), sin esperar al JavaScript;
 * la pieza mide lo mismo y pone `data-estrecha` (las reglas de abajo dicen lo
 * mismo con los dos). La barra no cambia su propio relleno ni su hueco en
 * estrecho (una consulta de contenedor no puede tocar al contenedor): a la
 * izquierda, el relleno de página (16 a menos de 720), alineado con el
 * contenido; así el botón y las migas no se mueven al hidratar.
 */
.crm-superior .crm-superior-mas {
  display: none;
}

.crm-superior-vista,
.crm-superior-al-menu {
  display: contents;
}

@container crm-superior (max-width: 719.98px) {
  .crm-superior .crm-superior-mas {
    display: inline-flex;
  }

  .crm-superior-vista,
  .crm-superior-al-menu {
    display: none;
  }

  .crm-superior-busca {
    justify-content: center;
    width: 28px;
    padding: 0;
    border-color: transparent;
    background: transparent;
    color: var(--crm-text-2);
  }

  .crm-superior-busca :is(.crm-superior-busca-texto, .crm-es-atajo) {
    display: none;
  }

  .crm-superior-izquierda {
    flex: 1 1 auto;
    min-width: 0;
  }

  .crm-superior-derecha {
    flex: none;
    gap: 4px;
  }

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

  .crm-superior-migas li:not([data-ultima]),
  .crm-superior-migas li[data-ultima]::before {
    display: none;
  }

  .crm-superior-migas :is(ol, li, [aria-current]) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Medida por la pieza: «…» a la vista (lo pinta solo cuando hace falta). */
.crm-superior[data-estrecha] .crm-superior-mas {
  display: inline-flex;
}

.crm-superior[data-estrecha] .crm-superior-busca {
  justify-content: center;
  width: 28px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: var(--crm-text-2);
}

.crm-superior[data-estrecha] .crm-superior-busca :is(.crm-superior-busca-texto, .crm-es-atajo) {
  display: none;
}

.crm-superior[data-estrecha] .crm-superior-izquierda {
  flex: 1 1 auto;
  min-width: 0;
}

.crm-superior[data-estrecha] .crm-superior-derecha {
  flex: none;
  gap: 4px;
}

.crm-superior[data-estrecha] .crm-superior-pendientes-texto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* AccionBarra: no pinta caja propia; mientras su acción va en el menú «…»,
   sigue montada pero fuera de la vista (y del orden de tabulación). */
.crm-accion-barra {
  display: contents;
}

.crm-accion-barra[data-en-menu] {
  display: none;
}

/* Migas: solo la página actual (FUNDAMENTOS §15), con elipsis si no cabe. */
.crm-superior[data-estrecha] .crm-superior-migas li:not([data-ultima]),
.crm-superior[data-estrecha] .crm-superior-migas li[data-ultima]::before {
  display: none;
}

.crm-superior[data-estrecha] .crm-superior-migas :is(ol, li, [aria-current]) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Pantallas estrechas ────────────────────────────────────────────── */
@media (max-width: 720px) {
  .crm-raiz,
  .crm-marco,
  .crm-capa {
    --crm-es-pad: 16px;
  }

  .crm-pp {
    column-gap: 16px;
    padding: 0 16px;
  }

  .crm-pp :is(.crm-pp-soporte, .crm-pp-version, .crm-pp-enlaces) {
    display: none;
  }

}

@media (max-width: 600px) {
  .crm-modal:not([data-tamano="completo"]) {
    --crm-modal-arriba: auto;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 92%;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    translate: none;
  }

  .crm-modal[data-tamano="completo"] {
    inset: 0;
    border: 0;
  }

  .crm-modal-cabecera {
    padding: 0 8px 0 16px;
  }

  .crm-modal-cuerpo {
    padding: 16px;
  }

  /*
   * Pie de 56 con su filete dentro (§1): 12 + 32 + 12. El filete se pinta
   * por dentro (sin sumar alto) en vez de como borde, que daba 57.
   */
  .crm-modal-pie {
    height: auto;
    min-height: 56px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 0;
    box-shadow: inset 0 1px 0 var(--crm-line);
  }

  /*
   * Dos acciones que no caben en una fila (nombres largos: «Cerrar sin
   * recalcular», «Recalcular con estos datos») bajan a dos, cada una a todo el
   * ancho y con su nombre entero; la principal, la última, queda abajo, bajo
   * el pulgar. Con filete dentro: 12 + 32 + 8 + 32 + 12 = 96. Nada se abrevia
   * ni se sale del pie.
   */
  .crm-modal-pie {
    flex-wrap: wrap;
  }

  .crm-modal-pie .crm-boton {
    flex: 1 1 auto;
    max-width: 100%;
  }

  .crm-deslizante {
    width: 100%;
    border-right: 0;
    border-left: 0;
  }

  .crm-deslizante-barra {
    padding: 0 8px 0 16px;
  }

  .crm-deslizante-cuerpo {
    padding: 16px;
  }

  /* Igual en el panel deslizante: si sus acciones no caben, bajan a otra fila (12 arriba y abajo, filete dentro). */
  .crm-deslizante-pie {
    flex-wrap: wrap;
    height: auto;
    min-height: 56px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 0;
    box-shadow: inset 0 1px 0 var(--crm-line);
  }

  .crm-paleta {
    top: 8px;
    width: calc(100% - 16px);
    max-height: calc(100% - 16px);
  }

  .crm-paleta-detalle,
  .crm-paleta-pie-foco {
    display: none;
  }

  .crm-paleta-pie {
    justify-content: flex-end;
  }
}

/* ── Movimiento reducido: quietas la luz y las llegadas; queda el estado. ── */
@media (prefers-reduced-motion: reduce) {
  .crm-telon,
  .crm-consejo,
  .crm-menu,
  .crm-desplegable,
  .crm-modal,
  .crm-deslizante,
  .crm-paleta,
  .crm-marco-hoja,
  .crm-punto.crm-es-vivo::after,
  .crm-pp-estado[data-estado="ok"] .crm-punto::after,
  .crm-avisos-esqueleto i {
    animation: none !important;
  }

  .crm-avisos-esqueleto {
    animation-duration: 0s;
  }

  .crm-modal::before,
  .crm-paleta::before,
  .crm-deslizante[data-lado="derecha"]::before,
  .crm-tarjeta[data-variante="aprobacion"]::before,
  .crm-desplegable[data-ocupado]::before {
    display: none;
  }

  .crm-marco,
  .crm-lateral-item::before,
  .crm-lateral-rotulo-flecha,
  .crm-tema-check,
  .crm-avisos-campana,
  .crm-usuario-avatar {
    transition-property: background-color, border-color, color, opacity;
  }

  .crm-avisos-campana:active,
  .crm-usuario-avatar:active {
    transform: none;
  }
}

/* ══ Elevación P1 (pulido de producción, 8-oct) ════════════════════════ */

/* ── Marco: la secuencia «G» a medias se ve abajo a la izquierda ──────── */
.crm-marco-secuencia {
  position: absolute;
  z-index: 30;
  bottom: 44px;
  left: calc(var(--crm-marco-lateral) + 24px);
  display: none;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  height: 28px;
  margin: 0;
  padding: 0 10px 0 4px;
  border: 1px solid var(--crm-line-2);
  background: var(--crm-panel-2);
  box-shadow: var(--crm-sombra-capa);
  color: var(--crm-text-2);
  font-size: 12px;
  line-height: 16px;
  pointer-events: none;
}

.crm-marco-secuencia[data-activa] {
  display: inline-flex;
  animation: crm-es-aparece var(--crm-t-entrada) var(--crm-snap);
}

.crm-marco[data-movil] > .crm-marco-principal > .crm-marco-secuencia {
  left: 16px;
}

/* ── Lista de atajos: filtro (la Busqueda del kit), cuenta y vacío con salida ── */
/*
 * El filtro es la `Busqueda` de controles (32; 40 y 16 al tacto; su × y su
 * Escape; sin la × nativa del navegador). Aquí solo se compone: el campo a
 * todo el ancho y, a su derecha, la cuenta en 12 tabular («34 atajos», «3
 * atajos de 34»), siempre a la vista para que filtrar no mueva nada.
 *
 * Filtro y cuenta se quedan arriba al desplazar (sticky sobre la superficie,
 * sin sombra nueva). En el cuerpo de un modal, que tiene 20 de relleno, la
 * banda sube esos 20 y los rellena con la superficie: lo que pasa por debajo
 * no asoma entre la cabecera del modal y el filtro.
 */
.crm-atajos-filtrable {
  display: grid;
  gap: 16px;
}

.crm-atajos-filtro {
  position: sticky;
  z-index: 1;
  top: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--crm-panel);
}

.crm-modal-cuerpo .crm-atajos-filtro {
  top: -20px;
  margin-top: -20px;
  padding-top: 20px;
}

.crm-atajos-filtro .crm-atajos-campo {
  flex: 1 1 auto;
  min-width: 0;
}

.crm-atajos-cuenta {
  flex: none;
  margin: 0;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Vacío «sin resultados» (§7): qué pasó, en frase, y la salida que quita el filtro. */
.crm-atajos-vacio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0;
  padding: 24px 0;
  color: var(--crm-muted);
  font-size: 13px;
  line-height: 20px;
}

.crm-atajos-vacio-texto {
  margin: 0;
  overflow-wrap: anywhere;
}

/* ── Barra lateral: el grupo plegado se oculta de verdad (el `display: grid`
   de la lista ganaba al atributo `hidden`) y deja a la vista la entrada activa. */
.crm-lateral-grupo :is(ul, li)[hidden] {
  display: none;
}

.crm-lateral-grupo ul[data-solo-activa] {
  animation: crm-es-aparece var(--crm-t-entrada) var(--crm-snap);
}

/* ── Pie del panel: sin respuesta, la salida a un clic (botón de 24, mono 11 como la línea). */
.crm-pp-medida {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.crm-pp-reintentar {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--crm-line-2);
  border-radius: 0;
  background: transparent;
  color: var(--crm-text-2);
  font: inherit;
  cursor: pointer;
  transition: background-color var(--crm-t-color) var(--crm-snap), color var(--crm-t-color) var(--crm-snap);
}

.crm-pp-reintentar:hover {
  background: var(--crm-panel-2);
  color: var(--crm-text);
  transition-duration: 0ms;
}

/* ── Avisos: «marcar como leído» al pasar, en el sitio de la hora (como Linear). */
.crm-avisos-leido {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--crm-line-2);
  border-radius: 0;
  background: var(--crm-panel-2);
  color: var(--crm-muted);
  opacity: 0;
  cursor: default;
  transition:
    opacity var(--crm-t-salida) var(--crm-snap),
    color var(--crm-t-color) var(--crm-snap);
}

.crm-avisos-leido svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.5;
}

.crm-avisos-hora {
  transition: opacity var(--crm-t-salida) var(--crm-snap);
}

.crm-avisos-fila[data-leible]:is(:hover, :focus-within) .crm-avisos-leido {
  opacity: 1;
  transition-duration: 0ms;
}

.crm-avisos-fila[data-leible]:is(:hover, :focus-within) .crm-avisos-hora {
  opacity: 0;
  transition-duration: 0ms;
}

.crm-avisos-leido:hover {
  color: var(--crm-acento);
}

.crm-avisos-leido:active {
  transform: scale(0.96);
  transition: transform var(--crm-t-pulsar) var(--crm-snap);
}

/* Sin puntero que pase (táctil): el botón se queda a la vista, bajo la hora. */
@media (hover: none) {
  .crm-avisos-fila[data-leible] .crm-avisos-leido {
    top: 32px;
    opacity: 1;
  }

  .crm-avisos-fila[data-leible]:is(:hover, :focus-within) .crm-avisos-hora {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crm-avisos-leido:active {
    transform: none;
  }
}

/* ── Modal con cambios sin guardar: la franja que pregunta antes de perder nada. */
/*
 * Franja de cambios sin guardar: 44 si texto y acciones caben en una fila; si
 * no, envuelve en dos (texto arriba, acciones debajo) con 8 arriba y abajo:
 * 8 + 20 + 8 + 28 + 8 = 72, en el ritmo de 4. El filete va por dentro
 * (sombra interior), sin sumar alto (§1), y nada se recorta ni se oculta.
 */
.crm-modal-descartar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  box-sizing: border-box;
  min-height: 44px;
  padding: 8px 12px 8px 20px;
  box-shadow: inset 0 1px 0 var(--crm-aviso-linea);
  background: var(--crm-aviso-suave);
  color: var(--crm-text-2);
  font-size: 13px;
  line-height: 20px;
  animation: crm-es-aparece var(--crm-t-entrada) var(--crm-snap);
}

.crm-modal-descartar > svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--crm-aviso);
  stroke-width: 1.6;
}

.crm-modal-descartar-texto {
  flex: 1 1 160px;
  min-width: 0;
  margin: 0;
}

.crm-modal-descartar-acciones {
  display: inline-flex;
  flex: none;
  gap: 8px;
  margin-left: auto;
}


@media (prefers-reduced-motion: reduce) {
  .crm-modal-descartar {
    animation: none;
  }
}

/* ── Confirmación: la frase que coincide se ve al momento (filete y visto de acento). */
.crm-confirmar-caja {
  position: relative;
  display: block;
}

.crm-confirmar-caja[data-coincide] .crm-confirmar-campo {
  padding-right: 36px;
  border-color: var(--crm-acento-linea);
}

.crm-confirmar-visto {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 16px;
  height: 16px;
  color: var(--crm-acento);
  stroke-width: 1.6;
  pointer-events: none;
  animation: crm-es-aparece var(--crm-t-entrada) var(--crm-snap);
}

@media (prefers-reduced-motion: reduce) {
  .crm-confirmar-visto {
    animation: none;
  }
}

/* ── Panel deslizante: «esc» a la vista junto al cierre y la pista de ⌘↵ en el pie. */
.crm-deslizante-esc {
  display: inline-flex;
  flex: none;
  margin-right: -6px;
}

.crm-deslizante-pista {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-right: auto;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
}

.crm-deslizante-pista-texto {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sin teclado físico (táctil) las teclas no dicen nada: fuera. */
@media (hover: none) {
  .crm-deslizante-esc,
  .crm-deslizante-pista {
    display: none;
  }
}

/* ── Desplegable: el disparador se queda hundido mientras su capa está abierta. */
[data-crm-disparador][aria-expanded="true"] {
  background: var(--crm-panel-3);
  color: var(--crm-text);
}

/* ── Paleta sin resultados: tres consultas que sí encuentran algo, en chips de 24. */
.crm-paleta-sugerencias {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 16px 24px;
}

.crm-paleta-sugerencias-rotulo {
  color: var(--crm-dim);
  font-size: 12px;
  line-height: 16px;
}

/* Con propuestas debajo, el vacío no deja su aire inferior entero: van juntos. */
.crm-paleta-vacio:has(+ .crm-paleta-sugerencias) {
  padding-bottom: 16px;
}

.crm-paleta-sugerencia {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--crm-line-2);
  border-radius: 0;
  background: transparent;
  color: var(--crm-text-2);
  font-family: var(--crm-sans);
  font-size: 12px;
  line-height: 16px;
  cursor: default;
  transition:
    background-color var(--crm-t-color) var(--crm-snap),
    color var(--crm-t-color) var(--crm-snap);
}

.crm-paleta-sugerencia:hover {
  background: var(--crm-panel-3);
  color: var(--crm-text);
  transition-duration: 0ms;
}

/* ── Migas recogidas: «…» de 24 que abre los pasos de en medio en un menú. */
.crm-migas-mas {
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--crm-muted);
  cursor: default;
  transition:
    background-color var(--crm-t-color) var(--crm-snap),
    color var(--crm-t-color) var(--crm-snap);
}

/* El «…» come 4 px a cada lado: entre las barras queda el mismo aire que entre dos pasos. */
.crm-migas-recogidas .crm-migas-mas {
  margin-inline: -4px;
}

.crm-migas-mas svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.5;
}

.crm-migas-mas:hover,
.crm-migas-mas[aria-expanded="true"] {
  background: var(--crm-panel-3);
  color: var(--crm-text);
  transition-duration: 0ms;
}

/* ── Sección plegable: el título es el botón; la flecha de 14 gira en 160 ms. */
.crm-seccion-plegar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: default;
}

.crm-seccion-titulo .crm-seccion-flecha {
  width: 14px;
  height: 14px;
  color: var(--crm-dim);
  stroke-width: 1.5;
  transition:
    rotate var(--crm-t-gesto) var(--crm-snap),
    color var(--crm-t-color) var(--crm-snap);
}

.crm-seccion-plegar:hover .crm-seccion-flecha {
  color: var(--crm-text);
}

.crm-seccion[data-plegada] .crm-seccion-flecha {
  rotate: -90deg;
}

.crm-seccion-cuerpo[hidden] {
  display: none;
}

/* Plegada, la cabecera no deja el hueco de debajo: el filete cierra la sección. */
.crm-seccion[data-plegada] > .crm-seccion-cabecera {
  margin-bottom: 0;
}

/* ── Tarjeta clicable entera: el área del título cubre la tarjeta. */
.crm-tarjeta[data-clicable] {
  transition:
    background-color var(--crm-t-color) var(--crm-snap),
    border-color var(--crm-t-color) var(--crm-snap);
}

.crm-tarjeta[data-clicable]:hover {
  border-color: var(--crm-control);
  background-color: var(--crm-panel-2);
  transition-duration: 0ms;
}

.crm-tarjeta-enlace {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  text-decoration: none;
  cursor: default;
}

.crm-tarjeta-enlace::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
}

/* El anillo va en el borde de la tarjeta, no alrededor del título. */
.crm-tarjeta .crm-tarjeta-enlace:focus-visible {
  outline: none;
}

.crm-tarjeta[data-clicable]:has(.crm-tarjeta-enlace:focus-visible) {
  outline: var(--crm-foco-ancho) solid var(--crm-acento);
  outline-offset: 2px;
}

/* Lo interactivo de dentro queda por encima del área clicable. */
.crm-tarjeta[data-clicable] :is(.crm-tarjeta-cuerpo, .crm-tarjeta-acciones) :is(a, button, input, select, textarea, [tabindex]) {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .crm-seccion-titulo .crm-seccion-flecha {
    transition-property: color;
  }
}

/* ── Cuerpo de lectura: 68 caracteres más los márgenes de página. */
.crm-cuerpo[data-ancho="lectura"] {
  max-width: calc(68ch + 2 * var(--crm-es-pad));
}

/* ── Rejilla vacía: el vacío ocupa toda la fila, con filete discontinuo de hueco por llenar. */
.crm-rejilla-vacio {
  grid-column: 1 / -1;
  min-width: 0;
  border: 1px dashed var(--crm-line-2);
}

/* ── Tarjeta: acciones de cabecera y cuerpo a sangre ────────────────── */
/*
 * Título y acciones en una línea de 28 (las acciones, a 28 por contexto): el
 * título de 22 queda centrado con ellas, en píxel entero (3 + 22 + 3). Si no
 * caben juntos, las acciones bajan a su fila, debajo del título, a 8, y esa
 * fila es suya entera: el campo (buscar, filtrar) crece hasta llenarla en vez
 * de quedarse en su base. En la línea del título no crecen: el título pide el
 * espacio libre con un factor que deja a las acciones una fracción de píxel
 * (1 frente a 100 000); solas en su fila, todo el espacio es suyo.
 */
.crm-tarjeta-linea {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  min-width: 0;
  min-height: 28px;
}

.crm-tarjeta-linea > .crm-tarjeta-titulo {
  flex: 100000 1 auto;
  min-width: 0;
  margin: 0;
}

.crm-tarjeta-linea-hueco {
  flex: 100000 1 auto;
}

.crm-tarjeta-acciones-cabecera {
  display: flex;
  flex: 1 0 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: 100%;
}

/*
 * Un campo en la cabecera (filtrar, buscar) es una acción más de la fila: su
 * caja (`.crm-entrada`, `width: 100%` en un formulario) no puede pedir todo el
 * contenedor, que es tan ancho como su contenido, o empuja los botones a otra
 * línea (36 de desfase con sitio de sobra). Aquí mide una base de 200; con el
 * título, no crece. Si con sus vecinas no cabe a esa base, la fila parte entre
 * acciones enteras (a 28 y alineadas) y el campo crece hasta llenar la suya:
 * nunca se queda encogido (158) junto a un selector. Igual si llega envuelto
 * en una caja propia (`<span className="w-72">`, `w-full`): la caja es la
 * acción y su ancho lo pone la fila, no una medida fija.
 */
.crm-tarjeta-acciones-cabecera > :is(.crm-entrada, :has(> .crm-entrada)) {
  flex: 1 1 200px;
  /* `width` y no solo la base: es lo que la fila cuenta como ancho natural del campo (sin ella, el del `<input>`). */
  width: 200px;
  min-width: 120px;
}

.crm-tarjeta-acciones-cabecera > :has(> .crm-entrada) > .crm-entrada {
  width: 100%;
}

/* El chip va encima de la línea con el mismo aire que encima del título. */
.crm-tarjeta-chip + .crm-tarjeta-linea {
  margin-top: 4px;
}

/* Tarjeta clicable: las acciones de la cabecera responden por encima del área del enlace. */
.crm-tarjeta[data-clicable] .crm-tarjeta-acciones-cabecera :is(a, button, input, select, textarea, [tabindex]) {
  position: relative;
  z-index: 1;
}

/*
 * A sangre: el contenido llega a los filetes de la tarjeta (tabla, lista,
 * gráfico de borde a borde); la cabecera conserva sus 20 y el contenido
 * empieza a 16 de ella. Sin pie de acciones, el contenido toca el filete de abajo.
 */
.crm-tarjeta[data-cuerpo="a-sangre"] > .crm-tarjeta-cuerpo {
  margin-inline: -20px;
}

.crm-tarjeta[data-cuerpo="a-sangre"] > :not(.crm-tarjeta-cuerpo) + .crm-tarjeta-cuerpo {
  margin-top: 8px;
}

.crm-tarjeta[data-cuerpo="a-sangre"] > .crm-tarjeta-cuerpo:last-child {
  margin-bottom: -20px;
}

.crm-tarjeta[data-cuerpo="a-sangre"] > .crm-tarjeta-cuerpo:first-child {
  margin-top: -20px;
}

/*
 * Una Lista a sangre: sus filas llegan a los filetes (el hover también) y su
 * texto cae en la guía de 20 del título. La última fila no dobla el filete de
 * abajo de la tarjeta.
 */
.crm-tarjeta[data-cuerpo="a-sangre"] > .crm-tarjeta-cuerpo > .crm-lista .crm-lista-fila {
  padding-inline: 20px;
}

.crm-tarjeta[data-cuerpo="a-sangre"] > .crm-tarjeta-cuerpo:last-child > .crm-lista > li:last-child > .crm-lista-fila {
  border-bottom: 0;
}

/* Una Tabla a sangre: la primera y la última celda en la guía de 20; la última fila no dobla el filete de abajo. */
.crm-tarjeta[data-cuerpo="a-sangre"] > .crm-tarjeta-cuerpo > .crm-tabla :is(th, td):first-child {
  padding-left: 20px;
}

.crm-tarjeta[data-cuerpo="a-sangre"] > .crm-tarjeta-cuerpo > .crm-tabla :is(th, td):last-child {
  padding-right: 20px;
}

.crm-tarjeta[data-cuerpo="a-sangre"] > .crm-tarjeta-cuerpo:last-child > .crm-tabla tbody tr:last-child > td {
  border-bottom: 0;
}

/* ── Plantillas de página (FUNDAMENTOS §16) ─────────────────────────── */
/*
 * Un solo marco: la plantilla es lo único que pone margen a la página. Es un
 * contenedor (`crm-pagina`) y todo lo de dentro reparte por su ancho, nunca
 * por el de la ventana. A menos de 720 de página, el margen y la separación
 * pasan a 16. Cabecera y cuerpo comparten la misma guía a los dos lados: las
 * acciones de la cabecera caen sobre el borde derecho del contenido.
 */
.crm-pagina {
  container: crm-pagina / inline-size;
  min-width: 0;
}

.crm-pagina-marco {
  --crm-pagina-hueco: 24px;
  min-width: 0;
  max-width: var(--crm-pagina-medida, none);
}

@container crm-pagina (max-width: 719.98px) {
  .crm-pagina-marco {
    --crm-es-pad: 16px;
    --crm-pagina-hueco: 16px;
  }
}

/*
 * Medida por patrón. Inicio, listado y ficha usan todo el ancho (sin topes
 * de 1280 o 1400 que dejan medio monitor vacío). El formulario sin resultado
 * y los ajustes miden lo que su lectura: la cabecera también, para que sus
 * acciones no queden flotando lejos del contenido.
 */
.crm-pagina[data-patron="formulario"]:not([data-con-lateral]) > .crm-pagina-marco {
  --crm-pagina-medida: calc(560px + 2 * var(--crm-es-pad));
}

.crm-pagina[data-patron="ajustes"] > .crm-pagina-marco {
  --crm-pagina-medida: calc(720px + 2 * var(--crm-es-pad));
}

.crm-pagina[data-patron="ajustes"][data-con-lateral] > .crm-pagina-marco {
  --crm-pagina-medida: calc(200px + 48px + 720px + 2 * var(--crm-es-pad));
}

/* Dentro de la plantilla, el ritmo y el margen son del cuerpo: las secciones no ponen el suyo. */
.crm-pagina-cuerpo .crm-seccion {
  padding: 0;
}

.crm-pagina-cuerpo > :is(.crm-pagina-aviso, .crm-pagina-atencion, .crm-pagina-cifras, .crm-pagina-coleccion) {
  min-width: 0;
}

/* Listado: la colección y su pie, a 16. */
.crm-pagina-coleccion {
  display: grid;
  gap: 16px;
}

.crm-pagina-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  min-height: 32px;
}

/* Vacía: el vacío grande arriba, a su medida, nunca estirado al alto de la vista. */
/*
 * Sobre la guía de la cabecera, no en una isla centrada a media pantalla:
 * la C, el título, la línea y la única salida alineados a la izquierda.
 */
.crm-pagina[data-patron="vacia"] .crm-vacio {
  justify-items: start;
  margin-inline: 0;
  padding-inline: 0;
  text-align: start;
}

.crm-pagina[data-patron="vacia"] .crm-vacio-acciones {
  justify-content: flex-start;
}

/* ── Columnas: reparto por el ancho de la página, nunca de la ventana ── */
/*
 * Una columna por debajo de los cortes; a partir de ellos (en ancho de
 * página, FUNDAMENTOS §15), dos. Las pistas fijas son enteras (560 del
 * formulario, 320 del lateral): ningún borde en medio píxel. align-items:
 * start: cada bloque mide lo que su contenido, ninguno se estira al alto
 * del vecino.
 */
.crm-columnas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--crm-pagina-hueco, 24px);
  min-width: 0;
}

/* Varios bloques en una columna (secciones, tarjetas): 32 entre ellos, como el cuerpo. */
.crm-columnas > * {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
}

/* mitades: dos iguales desde 720 de página. */
@container crm-pagina (min-width: 720px) {
  .crm-columnas[data-reparto="mitades"]:not([data-sola]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container crm-pagina (min-width: 1024px) {
  /* amplio: 7 a 5. */
  .crm-columnas[data-reparto="amplio"]:not([data-sola]) {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  /* lateral: la ficha con el resto y una columna de 320. */
  .crm-columnas[data-reparto="lateral"]:not([data-sola]) {
    grid-template-columns: minmax(0, 1fr) 320px;
  }

  /* medida: el formulario a 560 y el resultado con el resto. */
  .crm-columnas[data-reparto="medida"]:not([data-sola]) {
    grid-template-columns: 560px minmax(0, 1fr);
  }
}

/* Bajo el corte, el formulario conserva su medida de lectura (720 como mucho) y el resultado baja a todo el ancho. */
.crm-columnas[data-reparto="medida"]:not([data-sola]) > .crm-columnas-principal {
  max-width: 720px;
}

/* Fija: se queda bajo la barra superior (44) con el aire del margen. */
.crm-columnas-secundaria[data-fija] {
  position: sticky;
  top: calc(var(--crm-marco-arriba, 44px) + var(--crm-es-pad));
}

/* ── Formulario ── */
.crm-pagina-formulario {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
}

/* Acciones del formulario: filete, 16 de aire y la principal a la derecha (la última). */
.crm-pagina-formulario-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--crm-line);
}

/*
 * Resultado pendiente (D02): una nota a su medida, no una tarjeta vacía. Qué
 * saldrá aquí y cómo conseguirlo, alineado a la izquierda sobre un filete de
 * 1 px, con 20 arriba (el relleno de una tarjeta): junto a un formulario en
 * su tarjeta, el filete cae en la y de su borde y el título en la de su
 * título. El icono de 20, en su columna y en la línea del título; sin la caja
 * de 40 ni el relleno del vacío grande, sin filete discontinuo.
 */
.crm-pagina-resultado-vacio {
  border-top: 1px solid var(--crm-line);
}

.crm-pagina-resultado-vacio > .crm-vacio {
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: 4px 12px;
  max-width: none;
  margin: 0;
  padding: 20px 0 0;
  text-align: start;
}

.crm-pagina-resultado-vacio > .crm-vacio:has(> .crm-vacio-icono) {
  grid-template-columns: 20px minmax(0, 1fr);
}

.crm-pagina-resultado-vacio .crm-vacio-icono {
  grid-row: 1 / span 2;
  align-self: start;
  width: 20px;
  height: 22px;
  margin: 0;
  border: 0;
}

.crm-pagina-resultado-vacio .crm-vacio-icono ~ * {
  grid-column: 2;
}

.crm-pagina-resultado-vacio .crm-vacio-texto {
  max-width: 68ch;
}

/* ── Ajustes ── */
.crm-ajustes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  min-width: 0;
}

.crm-ajustes[data-con-indice] {
  grid-template-columns: 200px minmax(0, 1fr);
}

.crm-ajustes-indice {
  position: sticky;
  top: calc(var(--crm-marco-arriba, 44px) + var(--crm-es-pad));
  align-self: start;
  min-width: 0;
}

/*
 * Una sola pista de 200 (minmax(0, 1fr)): un título largo no la ensancha. Con la
 * pista implícita (auto), el ítem más largo la llevaba a su ancho entero y el
 * texto pasaba por encima del cuerpo (K9).
 */
.crm-ajustes-indice ul {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crm-ajustes-indice li {
  min-width: 0;
}

/* Ítem de 28 como la navegación: 13 en frase normal, marca de 2 px en la sección a la vista. */
.crm-ajustes-enlace {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 28px;
  padding: 0 10px;
  overflow: hidden;
  color: var(--crm-muted);
  font-size: 13px;
  line-height: 20px;
  text-decoration: none;
  transition: background-color var(--crm-t-color) var(--crm-snap), color var(--crm-t-color) var(--crm-snap);
}

/*
 * El título, en un bloque propio: la elipsis no actúa en una caja flexible
 * (el texto suelto de un flex se recorta sin «…»). Si se corta, el consejo
 * del enlace lo da entero (§14, «Título»).
 */
.crm-ajustes-enlace-texto,
.crm-ajustes-movil-enlace-texto {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-ajustes-enlace:hover,
.crm-ajustes-enlace[data-crm-forzar="hover"] {
  background: var(--crm-panel-2);
  color: var(--crm-text);
  transition-duration: 0ms;
}

.crm-ajustes-enlace[aria-current="location"] {
  color: var(--crm-text);
  font-weight: 500;
}

.crm-ajustes-enlace[aria-current="location"]::before {
  position: absolute;
  inset: 4px auto 4px 0;
  width: 2px;
  background: var(--crm-acento);
  content: "";
}

.crm-ajustes-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
  max-width: 720px;
}

/* Al saltar desde el índice, el título queda bajo la barra superior, no debajo de ella. */
.crm-ajustes-cuerpo > [id] {
  scroll-margin-top: calc(var(--crm-marco-arriba, 44px) + var(--crm-es-pad));
}

@container crm-pagina (max-width: 1023.98px) {
  .crm-ajustes[data-con-indice] {
    grid-template-columns: minmax(0, 1fr);
  }

  .crm-ajustes-indice {
    display: none;
  }
}

@media (forced-colors: active) {
  .crm-ajustes-enlace[aria-current="location"]::before {
    background: Highlight;
  }

  .crm-pagina-resultado-vacio {
    border-color: CanvasText;
  }
}

/* ── Campos: 16 entre campos; a dos columnas mientras cada una tenga 240 ── */
.crm-campos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  min-width: 0;
}

.crm-campos[data-columnas="2"] {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 16px 24px;
}

/* ── Índice de secciones ────────────────────────────────────────────── */
/*
 * Las pestañas de la página (32, trazo de acento de 2 px) como índice de
 * anclas. A sangre hasta los bordes de la página (el contenido no asoma por
 * los márgenes al pasar por debajo), sobre el lienzo y con su filete. Fija,
 * se queda bajo la barra superior (`--crm-marco-arriba`), nunca encima: el
 * contenido del marco aísla su apilado.
 */
.crm-indice {
  container: crm-indice / inline-size;
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  margin-inline: calc(var(--crm-es-pad) * -1);
  padding-inline: var(--crm-es-pad);
  background: var(--crm-bg);
  box-shadow: inset 0 -1px 0 var(--crm-line);
}

.crm-indice[data-fija] {
  position: sticky;
  z-index: 2;
  top: var(--crm-marco-arriba, 0px);
}

.crm-indice-pestanas {
  flex: 1 1 auto;
  min-width: 0;
}

/* El filete es del índice entero (también bajo lo de la derecha). */
.crm-indice .crm-conmutador[data-variante="subrayado"] {
  box-shadow: none;
}

.crm-indice-extra {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
}

@container crm-indice (max-width: 719.98px) {
  .crm-indice-extra {
    display: none;
  }
}

/* ── Metadatos ──────────────────────────────────────────────────────── */
/*
 * Trozos a 16 entre sí y el «·» en mitad del hueco, fuera del flujo: así el
 * trozo que abre una línea esconde su separador sin cambiar ningún ancho
 * (nada se recoloca ni oscila al partir). Hereda la letra de donde va (la
 * meta de cabecera, mono 12/16).
 */
.crm-metadatos {
  --crm-metadatos-hueco: 16px;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px var(--crm-metadatos-hueco);
  min-width: 0;
  max-width: 100%;
  vertical-align: baseline;
}

.crm-metadatos-trozo {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* En mitad del hueco, sea cual sea: el «·» sale de la misma medida que separa los trozos. */
.crm-metadatos-separador {
  position: absolute;
  left: calc(var(--crm-metadatos-hueco) / -2);
  color: var(--crm-dim);
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
}

.crm-metadatos-trozo[data-inicio-linea] > .crm-metadatos-separador {
  display: none;
}

/* ── Vista Agente dentro del marco (K14) ── */
/*
 * En un MarcoPanel la vista no mide la ventana (100dvh, que dejaba un
 * desplazamiento fantasma del alto de la barra y el pie): llena el alto que
 * deja el marco entre la barra y el pie, por la misma cadena flexible que el
 * lienzo, o el de su contenedor si el panel le da uno. Suelo de 320, como el
 * lienzo: por debajo, la página desplaza.
 */
.crm-marco-contenido:has(> .crm-va[data-en-marco]) {
  display: flex;
  flex: 1 1 0px;
  flex-direction: column;
  padding-bottom: 0;
}

.crm-va[data-en-marco] {
  flex: 1 1 0px;
  height: 100%;
  min-height: 320px;
}

/*
 * Sin su barra (sus acciones van a la barra superior del marco), el cuerpo es
 * la única fila. Con las dos filas de siempre (barra a su alto y cuerpo con
 * el resto), el cuerpo caía en la fila de la barra y medía su contenido: el
 * inicio quedaba pegado arriba y el resto, una fila vacía.
 */
.crm-va[data-sin-barra] {
  grid-template-rows: minmax(0, 1fr);
}

/*
 * El inicio, centrado en el alto real; si no cabe, empieza arriba y desplaza
 * entero (con «center» a secas, lo que sobra por arriba no se alcanza). Por
 * debajo de 481 de alto manda la composición baja de la vista.
 */
@media (min-height: 481px) {
  .crm-va .crm-va-inicio {
    align-content: safe center;
  }
}

/* ── Formulario · después ── */
.crm-pagina-despues {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
}

/* ── Lienzo: el cuerpo llena el alto que queda dentro del marco ── */
/*
 * El marco es una columna (barra, contenido, pie). Con un lienzo, el
 * contenido parte de base 0 y crece hasta el alto disponible; la página, su
 * marco, el cuerpo y el lienzo siguen la misma cadena flexible, así que lo de
 * dentro recibe un alto definido sin cálculos con la ventana. El suelo de
 * 320 evita un lienzo aplastado: por debajo, la página desplaza.
 */
.crm-marco-contenido:has(> .crm-pagina[data-patron="lienzo"]) {
  display: flex;
  flex: 1 1 0px;
  flex-direction: column;
  padding-bottom: 0;
}

.crm-pagina[data-patron="lienzo"],
.crm-pagina[data-patron="lienzo"] > .crm-pagina-marco {
  display: flex;
  flex: 1 1 0px;
  flex-direction: column;
  min-width: 0;
}

.crm-pagina[data-patron="lienzo"] .crm-pagina-cuerpo {
  flex: 1 1 0px;
  padding-bottom: var(--crm-es-pad);
}

.crm-pagina-lienzo {
  display: flex;
  flex: 1 1 0px;
  flex-direction: column;
  min-width: 0;
  min-height: 320px;
}

.crm-pagina-lienzo-pie {
  flex: none;
  min-width: 0;
}

/* ── Conversación ── */
/*
 * El hilo llena el lienzo y desplaza dentro (nunca la página); el pie (el
 * compositor) debajo, en la misma columna. Columna de lectura: hasta 880,
 * centrada; `completo`, todo el ancho. Mensajes a su medida (68 caracteres):
 * los tuyos a la derecha, en superficie con su filete; los del otro, texto sobre
 * el lienzo a la izquierda. Ni tarjetas a todo el ancho ni radio.
 */
.crm-conversacion {
  --crm-conversacion-col: 880px;
  display: flex;
  flex: 1 1 0px;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  min-height: 0;
}

.crm-conversacion[data-ancho="completo"] {
  --crm-conversacion-col: 100%;
}

.crm-conversacion-hilo {
  flex: 1 1 0px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  outline: none;
}

.crm-conversacion-hilo:focus-visible {
  box-shadow: inset 0 0 0 var(--crm-foco-ancho) var(--crm-acento);
}

.crm-conversacion-columna {
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  width: min(100%, var(--crm-conversacion-col));
  margin-inline: auto;
}

.crm-conversacion-hilo > .crm-conversacion-columna {
  padding-block: 8px;
}

.crm-conversacion-pie {
  flex: none;
  min-width: 0;
}

.crm-mensaje {
  display: grid;
  gap: 4px;
  max-width: min(100%, 68ch);
  margin: 0;
  color: var(--crm-text-2);
  font-size: 14px;
  line-height: 22px;
  overflow-wrap: anywhere;
}

.crm-mensaje[data-autor="tu"] {
  align-self: flex-end;
  justify-items: end;
}

.crm-mensaje[data-autor="otro"] {
  align-self: flex-start;
}

.crm-mensaje-cuerpo {
  min-width: 0;
}

.crm-mensaje[data-autor="tu"] .crm-mensaje-cuerpo {
  padding: 8px 12px;
  border: 1px solid var(--crm-line);
  background: var(--crm-panel);
  color: var(--crm-text);
}

.crm-mensaje-cuerpo > :first-child {
  margin-top: 0;
}

.crm-mensaje-cuerpo > :last-child {
  margin-bottom: 0;
}

.crm-mensaje-meta {
  display: flex;
  gap: 8px;
  margin: 0;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
}

.crm-mensaje-nombre {
  color: var(--crm-text);
  font-weight: 500;
}

.crm-mensaje-hora {
  font-variant-numeric: tabular-nums;
}

/* ── Ajustes · índice plegable en estrecho ── */
.crm-ajustes-movil {
  display: none;
}

@container crm-pagina (max-width: 1023.98px) {
  .crm-ajustes {
    gap: 24px;
  }

  /* Al saltar, el título queda bajo la barra y la fila del índice plegable (40), no debajo de ellas. */
  .crm-ajustes-cuerpo > [id] {
    scroll-margin-top: calc(var(--crm-marco-arriba, 44px) + 40px + var(--crm-es-pad));
  }

  /* Pegado bajo la barra, a sangre, sobre el lienzo y con su filete (como el índice de secciones). */
  .crm-ajustes-movil {
    position: sticky;
    z-index: 2;
    top: var(--crm-marco-arriba, 0px);
    display: block;
    margin-inline: calc(var(--crm-es-pad) * -1);
    padding-inline: var(--crm-es-pad);
    background: var(--crm-bg);
    box-shadow: inset 0 -1px 0 var(--crm-line);
  }
}

/* Fila de 40 (tacto): «Secciones» en secundario, la que se lee a 500 y la flecha que gira al abrir. */
.crm-ajustes-movil-boton {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--crm-text);
  font: inherit;
  font-size: 13px;
  line-height: 20px;
  text-align: start;
  cursor: pointer;
}

.crm-ajustes-movil-rotulo {
  flex: none;
  color: var(--crm-muted);
}

.crm-ajustes-movil-actual {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-ajustes-movil-flecha {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--crm-muted);
  stroke-width: 1.6;
  transition: transform var(--crm-t-gesto) var(--crm-snap);
}

.crm-ajustes-movil[data-abierto] .crm-ajustes-movil-flecha {
  transform: rotate(180deg);
}

.crm-ajustes-movil-lista {
  margin: 0;
  padding: 0 0 8px;
  list-style: none;
}

.crm-ajustes-movil-lista[hidden] {
  display: none;
}

.crm-ajustes-movil-enlace {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 40px;
  padding: 0 12px;
  overflow: hidden;
  color: var(--crm-muted);
  font-size: 13px;
  line-height: 20px;
  text-decoration: none;
}

.crm-ajustes-movil-enlace:hover {
  background: var(--crm-panel-2);
  color: var(--crm-text);
}

.crm-ajustes-movil-enlace[aria-current="location"] {
  color: var(--crm-text);
  font-weight: 500;
}

.crm-ajustes-movil-enlace[aria-current="location"]::before {
  position: absolute;
  inset: 8px auto 8px 0;
  width: 2px;
  background: var(--crm-acento);
  content: "";
}

@media (prefers-reduced-motion: reduce) {
  .crm-ajustes-movil-flecha {
    transition: none;
  }
}

/* ── Cabecera · volver ── */
/*
 * Control xs de 24 (texto 12, icono 14) en fantasma sobre el título: la
 * flecha cae en la guía de la cabecera (el relleno de 6 del lado del icono
 * se compensa hacia fuera) y el fondo de hover sale del borde, como Linear.
 */
.crm-cabecera-volver {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 6px;
  box-sizing: border-box;
  height: 24px;
  margin: 0 0 4px -6px;
  padding: 0 8px 0 6px;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
  text-decoration: none;
  transition: background-color var(--crm-t-salida) var(--crm-snap), color var(--crm-t-salida) var(--crm-snap);
}

.crm-cabecera-volver:hover,
.crm-cabecera-volver[data-crm-forzar="hover"] {
  background: var(--crm-panel-2);
  color: var(--crm-text);
  transition-duration: 0ms;
}

.crm-cabecera-volver svg {
  flex: none;
  width: 14px;
  height: 14px;
  stroke-width: 1.5;
}

.crm-cabecera-volver span {
  min-width: 0;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * NavegacionMovil (RFC 0010, FUNDAMENTOS §2 y §15): navegación inferior de
 * una app de operación. Barra de 56 (filete de arriba dentro de la medida,
 * con sombra inset) más la zona segura (`env(safe-area-inset-*)`, o
 * `--crm-zona-segura-abajo|izquierda|derecha` si la fija el contenedor); destinos de 48 × 48 como mínimo
 * con icono 16 y nombre 12/16. Compacta (o con un contenedor de 560 o más):
 * icono y nombre en una línea, a 48. El texto ampliado eleva la barra
 * por reflujo; su hueco reserva el alto real. El activo: marca de 2 px de acento
 * arriba, fondo --crm-panel-3, texto 500 y aria-current.
 */

.crm-nav-movil {
  --crm-nav-movil-alto: 56px;
  box-sizing: border-box;
  container-type: inline-size;
  container-name: crm-nav-movil;
  background: var(--crm-panel);
  box-shadow: inset 0 1px 0 var(--crm-line);
  font-family: var(--crm-sans);
}

.crm-nav-movil[data-compacta] {
  --crm-nav-movil-alto: 48px;
}

.crm-nav-movil[data-posicion="fija"] {
  position: fixed;
  inset: auto 0 0;
  z-index: 30;
  /* La zona segura la da el sistema; un contenedor nativo (WebView) o una vista previa puede fijarla con la variable. */
  padding: 0 var(--crm-zona-segura-derecha, env(safe-area-inset-right, 0px)) var(--crm-zona-segura-abajo, env(safe-area-inset-bottom, 0px)) var(--crm-zona-segura-izquierda, env(safe-area-inset-left, 0px));
}

/* El hueco al final del contenido: lo de abajo nunca queda debajo de la barra. */
.crm-nav-movil-hueco {
  flex: none;
  height: var(--crm-nav-movil-hueco-alto, calc(56px + var(--crm-zona-segura-abajo, env(safe-area-inset-bottom, 0px))));
}

/* En escritorio manda la barra lateral: dentro de un MarcoPanel, su punto móvil; fuera, el corte por defecto. */
.crm-nav-movil[data-escritorio="ocultar"][data-en-marco]:not([data-movil]),
.crm-nav-movil-hueco[data-escritorio="ocultar"][data-en-marco]:not([data-movil]) {
  display: none;
}

@media (min-width: 900px) {
  .crm-nav-movil[data-escritorio="ocultar"]:not([data-en-marco]),
  .crm-nav-movil-hueco[data-escritorio="ocultar"]:not([data-en-marco]) {
    display: none;
  }
}

.crm-nav-movil-lista {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  min-height: var(--crm-nav-movil-alto);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Cada destino es contenedor: la disposición en línea solo se queda si el destino tiene sitio (≥ 120). */
.crm-nav-movil-destino {
  display: grid;
  min-width: 0;
  container-type: inline-size;
  container-name: crm-nav-movil-destino;
}

/* Destino: icono 16 y nombre 12/16 apilados (36 de bloque, 10 arriba y abajo). */
.crm-nav-movil-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  justify-items: center;
  gap: 4px;
  box-sizing: border-box;
  min-width: 48px;
  min-height: 48px;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 10px 4px;
  border: 0;
  background: transparent;
  color: var(--crm-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 400;
  line-height: calc(4 / 3);
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    background-color var(--crm-t-color) var(--crm-snap),
    color var(--crm-t-color) var(--crm-snap);
}

/* La marca de lo activo: 2 px de acento pegados al filete, que crecen desde el centro en 160 ms. */
.crm-nav-movil-item::before {
  content: "";
  position: absolute;
  inset: 0 12px auto;
  height: 2px;
  background: var(--crm-acento);
  transform: scaleX(0);
  transition: transform var(--crm-t-gesto) var(--crm-snap);
}

.crm-nav-movil-item:focus-visible {
  outline-offset: -2px;
}

@media (hover: hover) {
  .crm-nav-movil-item:hover {
    background: var(--crm-panel-2);
    color: var(--crm-text);
    transition-duration: 0ms;
  }
}

.crm-nav-movil-item:active {
  background: var(--crm-panel-2);
}

.crm-nav-movil-item[aria-current="page"] {
  background: var(--crm-panel-3);
  color: var(--crm-text);
  font-weight: 500;
}

.crm-nav-movil-item[aria-current="page"]::before {
  transform: scaleX(1);
}

.crm-nav-movil-icono {
  position: relative;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
}

.crm-nav-movil-icono svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.6;
}

.crm-nav-movil-etiqueta {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}

/* Cabeza del destino: el icono y, si la hay, la cifra en línea (gap 4). La cifra nunca tapa el icono ni el nombre. */
.crm-nav-movil-cabeza {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  width: max-content;
  /* La cifra puede aprovechar el relleno lateral sin salir del objetivo táctil. */
  max-width: calc(100% + 8px);
  min-height: 16px;
}

/* Insignia: la cifra del Contador (16 de alto, mono 11 tabular). */
.crm-nav-movil-insignia {
  flex: none;
  box-sizing: border-box;
  min-width: 16px;
  min-height: 16px;
  max-width: 100%;
  padding: 0 4px;
  background: var(--crm-panel-3);
  color: var(--crm-text-2);
  font-family: var(--crm-mono);
  font-size: 11px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  line-height: calc(16 / 11);
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* En el activo (fondo panel-3) la insignia neutra sube un escalón para no fundirse. */
/* Espera a una persona: el tono acento del Contador (nunca un relleno verde: ese es el de aprobar, §5.3). */
.crm-nav-movil-insignia[data-tono="acento"] {
  background: var(--crm-acento-suave);
  color: var(--crm-acento);
}

.crm-nav-movil-item[aria-current="page"] .crm-nav-movil-insignia[data-tono="neutro"] {
  background: var(--crm-panel-2);
}

/* Punto: hay algo nuevo, sin cifra (8, el punto de estado). */
.crm-nav-movil-punto {
  position: absolute;
  top: -2px;
  right: -4px;
  box-sizing: border-box;
  width: 8px;
  height: 8px;
  border: 1px solid var(--crm-panel);
  border-radius: 50%;
  background: var(--crm-acento);
}

/* Compacta, o con sitio (contenedor ≥ 560): icono y nombre en una línea, a 13/20. */
/* En línea, el orden se lee «icono · nombre · cifra». */
.crm-nav-movil[data-compacta] .crm-nav-movil-cabeza {
  display: contents;
}

.crm-nav-movil[data-compacta] .crm-nav-movil-insignia {
  order: 2;
}

.crm-nav-movil[data-compacta] .crm-nav-movil-item {
  display: flex;
  grid-template-rows: none;
  justify-content: center;
  align-items: center;
  padding-block: 8px;
  gap: 8px;
  font-size: 13px;
  line-height: calc(20 / 13);
  letter-spacing: -0.005em;
}

@container crm-nav-movil (min-width: 560px) {
  .crm-nav-movil-lista {
    --crm-nav-movil-alto: 48px;
  }

  .crm-nav-movil-cabeza {
    display: contents;
  }

  .crm-nav-movil-insignia {
    order: 2;
  }

  .crm-nav-movil-item {
    display: flex;
    grid-template-rows: none;
    justify-content: center;
    align-items: center;
    padding-block: 8px;
    gap: 8px;
    font-size: 13px;
    line-height: calc(20 / 13);
    letter-spacing: -0.005em;
  }
}

/*
 * En línea sin sitio (destino < 120: cuatro o cinco destinos en un móvil):
 * vuelve a apilar icono y nombre dentro de los 48, para que ni el nombre ni
 * la cifra se corten.
 */
@container crm-nav-movil-destino (max-width: 119px) {
  .crm-nav-movil .crm-nav-movil-destino .crm-nav-movil-item {
    display: grid;
    grid-template-rows: auto auto;
    align-content: center;
    justify-items: center;
    gap: 4px;
    font-size: 12px;
    line-height: calc(4 / 3);
    letter-spacing: 0;
  }

  .crm-nav-movil .crm-nav-movil-destino .crm-nav-movil-cabeza {
    display: inline-flex;
  }

  .crm-nav-movil .crm-nav-movil-destino .crm-nav-movil-insignia {
    order: 0;
  }

  .crm-nav-movil[data-compacta] .crm-nav-movil-destino .crm-nav-movil-item {
    padding-block: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crm-nav-movil-item,
  .crm-nav-movil-item::before {
    transition: none;
  }
}

/* Colores forzados: la sombra desaparece, así que el filete pasa a borde; la marca y el punto conservan su color de sistema (los tokens ya lo son, 00-temas.css). */
@media (forced-colors: active) {
  .crm-nav-movil {
    border-top: 1px solid var(--crm-line);
  }

  .crm-nav-movil-item::before,
  .crm-nav-movil-punto {
    forced-color-adjust: none;
  }

  /* La cifra, con los colores del sistema y su propio contorno. */
  .crm-nav-movil-insignia {
    border: 1px solid var(--crm-line);
    padding-inline: 2px;
    line-height: calc(14 / 11);
  }
}

/*
 * ProgresoPasosMovil (RFC 0010, FUNDAMENTOS §2): fila de 48 con el rótulo
 * «PASO 3 DE 5» (mono 11/16) y el nombre del paso (15/22, 500), con
 * «Atrás» y «Siguiente» de icono de 40 (zona de 44 en táctil) a los lados
 * cuando la vista los da. Debajo, 8 de aire y la barra de 2: un tramo por
 * paso con 2 de hueco, que se llena de acento de izquierda a derecha con
 * --crm-curva (es progreso, §8); continua a partir de 11 pasos.
 */

.crm-progreso-pasos {
  display: grid;
  min-width: 0;
  container-type: inline-size;
  container-name: crm-progreso-pasos;
  font-family: var(--crm-sans);
}

.crm-progreso-pasos-fila {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  height: 48px;
}

.crm-progreso-pasos-fila:has(.crm-progreso-pasos-atras) {
  grid-template-columns: auto minmax(0, 1fr);
}

.crm-progreso-pasos-fila:has(.crm-progreso-pasos-siguiente) {
  grid-template-columns: minmax(0, 1fr) auto;
}

.crm-progreso-pasos-fila:has(.crm-progreso-pasos-atras):has(.crm-progreso-pasos-siguiente) {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.crm-progreso-pasos-texto {
  display: grid;
  min-width: 0;
  margin: 0;
}

.crm-progreso-pasos-rotulo {
  overflow: hidden;
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.crm-progreso-pasos-cifra {
  font-variant-numeric: tabular-nums;
}

.crm-progreso-pasos-nombre {
  overflow: hidden;
  color: var(--crm-text);
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Terminado: el rótulo sube a texto (no hay nombre de paso debajo). */
.crm-progreso-pasos[data-terminado] .crm-progreso-pasos-rotulo {
  color: var(--crm-acento);
}

.crm-progreso-pasos-barra {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 2px;
  height: 2px;
  margin-top: 8px;
}

.crm-progreso-pasos-tramo,
.crm-progreso-pasos[data-forma="continua"] .crm-progreso-pasos-barra {
  position: relative;
  overflow: hidden;
  background: var(--crm-line-2);
}

.crm-progreso-pasos-tramo::after,
.crm-progreso-pasos-relleno {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--crm-acento);
  transform-origin: left;
  transition: transform var(--crm-t-gesto) var(--crm-curva);
}

.crm-progreso-pasos-tramo::after {
  transform: scaleX(0);
}

.crm-progreso-pasos-tramo:is([data-estado="hecho"], [data-estado="actual"])::after {
  transform: scaleX(1);
}

/* Nombres de los pasos bajo cada tramo (12/16): el actual a la vista, los hechos en secundario. */
.crm-progreso-pasos-nombres {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 2px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.crm-progreso-pasos-nombres li {
  overflow: hidden;
  color: var(--crm-dim);
  font-size: 12px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-progreso-pasos-nombres li[data-estado="hecho"] {
  color: var(--crm-muted);
}

.crm-progreso-pasos-nombres li[data-estado="actual"] {
  color: var(--crm-text);
  font-weight: 500;
}

/* Estrecho: solo el nombre del actual, en su sitio bajo su tramo. */
@container crm-progreso-pasos (max-width: 399px) {
  .crm-progreso-pasos-nombres li:not([data-estado="actual"]) {
    visibility: hidden;
  }

  .crm-progreso-pasos-nombres li[data-estado="actual"] {
    overflow: visible;
  }
}

/*
 * Táctil: «Atrás» y «Siguiente» responden en 44 (40 + 2 por lado desde el
 * borde). La zona común del BotonIcono se mide desde dentro del filete y
 * da 42 en la base de este encargo (lo corrige PR #19); aquí se fija desde
 * fuera para no depender del orden de integración. Con #19 dentro, las dos
 * reglas dan 44.
 */
@media (pointer: coarse) {
  .crm-progreso-pasos .crm-progreso-pasos-atras::after,
  .crm-progreso-pasos .crm-progreso-pasos-siguiente::after {
    content: "";
    position: absolute;
    inset: -3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crm-progreso-pasos-tramo::after,
  .crm-progreso-pasos-relleno {
    transition: none;
  }
}

@media (forced-colors: active) {
  .crm-progreso-pasos-tramo,
  .crm-progreso-pasos-tramo::after,
  .crm-progreso-pasos-relleno,
  .crm-progreso-pasos[data-forma="continua"] .crm-progreso-pasos-barra {
    forced-color-adjust: none;
  }
}

/* ══ Fecha y hora: SelectorFechaHora ═════════════════════════════════ */
/*
 * Lo que ya existe no se repite aquí: el disparador es el de `SelectorFecha`
 * (.crm-entrada.crm-selector.crm-fecha), la capa hereda la receta de nivel 1
 * de .crm-fecha-capa (panel-2, filete line-2, sombra de capa, entrada de
 * 180 ms y su reducción de movimiento), y el día, la hora y las acciones son
 * `Calendario`, `Selector`, `Boton` y `BotonIcono`. Esta hoja solo pone la
 * composición de la capa y las dos piezas propias: atajos y horas rápidas.
 *
 * Medidas (FUNDAMENTOS §1, §2): capa de 496 (columna del día 248 = 12 + 224
 * + 12, columna de la hora 246 con su filete); cabecera 52 (título 13/20 y
 * resumen 12/16 con 8 arriba y 8 abajo contando su filete: 8 + 36 + 7 + 1);
 * pie 48 (botones de 32 con 8 contando su filete: 1 + 7 + 32 + 8); atajos
 * de 28 como mínimo (como los rangos rápidos), horas rápidas y hora exacta
 * de 32. Al tacto, lo que se toca va a 40 y el día del calendario también.
 *
 * Por qué pie de 48 y no de 56: el 52/56 de §2 es de la cabecera y el pie de
 * un modal o panel deslizante (nivel 2, §6). Esto es una capa de nivel 1
 * (popover, no modal: un clic fuera la cierra sin aplicar), como el
 * calendario de SelectorFecha; su pie va a la escala (8 + 32 + 8) y la
 * cabecera conserva 52 de mínimo porque lleva título y resumen en dos líneas.
 */

.crm-fh-capa {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 496px;
  max-height: var(--radix-popover-content-available-height);
  padding: 0;
  overflow: hidden;
  container-type: inline-size;
}

/* Cabecera: qué se elige y el borrador en vivo; cerrar a la derecha. */
.crm-fh-cabecera {
  display: flex;
  flex: none;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-height: 52px;
  /* El filete va dentro de la medida (§1): 8 + 20 + 16 + 7 + 1 = 52, no 53. */
  padding: 8px 8px 7px 12px;
  border-bottom: 1px solid var(--crm-line);
}

.crm-fh-cabecera-texto {
  display: grid;
  min-width: 0;
}

.crm-fh-titulo {
  margin: 0;
  color: var(--crm-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.005em;
}

/* El borrador nunca se corta: es lo que se va a aplicar (§14, texto esencial: refluye). */
.crm-fh-resumen {
  margin: 0;
  color: var(--crm-text-2);
  font-size: 12px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.crm-fh-resumen[data-vacio] {
  color: var(--crm-muted);
}

/* Cuerpo: el día a la izquierda, la hora a la derecha; desplaza él solo si no cabe en alto. */
.crm-fh-cuerpo {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--crm-line-2) transparent;
  scrollbar-width: thin;
}

.crm-fh-dia {
  display: grid;
  align-content: start;
  justify-content: center;
  padding: 12px;
}

.crm-fh-lado {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-left: 1px solid var(--crm-line);
}

/*
 * Atajos: ítems de 28 en frase, la pista a la derecha en muted (la gramática
 * de los rangos rápidos). Texto entero siempre (§14, como el texto de ayuda):
 * la etiqueta y la pista los pone la app y nunca se cortan; si no caben,
 * refluyen y el ítem crece desde su mínimo de 28 (40 al tacto). Así no hay
 * nada que «consultar»: se lee igual con ratón, teclado, tacto y lector, y
 * consultarlo no elige nada.
 */
.crm-fh-atajos {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 8px;
  list-style: none;
  border-bottom: 1px solid var(--crm-line);
}

.crm-fh-atajo {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 28px;
  margin: 0;
  padding: 4px 4px 4px 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--crm-text-2);
  font-family: var(--crm-sans);
  font-size: 13px;
  line-height: 20px;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--crm-t-salida) linear;
}

.crm-fh-atajo-etiqueta {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.crm-fh-atajo-detalle {
  flex: 0 1 auto;
  min-width: 0;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  overflow-wrap: anywhere;
}

.crm-fh-atajo .crm-tecla {
  flex: none;
}

@media (hover: hover) {
  .crm-fh-atajo:hover:not(:disabled) {
    background: var(--crm-panel-3);
    color: var(--crm-text);
    transition-duration: 0ms;
  }
}

/* Elegido (§7): panel-3 y la marca de acento de 2 px a la izquierda. */
.crm-fh-atajo[aria-pressed="true"] {
  background: var(--crm-panel-3);
  box-shadow: inset 2px 0 0 var(--crm-acento);
  color: var(--crm-text);
  font-weight: 500;
}

.crm-fh-atajo:disabled {
  color: var(--crm-dim);
  cursor: not-allowed;
}

.crm-fh-atajo:disabled .crm-fh-atajo-detalle {
  color: var(--crm-dim);
}

/* Hora: rótulo, horas rápidas y la hora exacta (24 × 60). */
.crm-fh-hora {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 12px;
}

.crm-fh-rotulo {
  margin: 0;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
}

.crm-fh-rapidas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
  gap: 4px;
}

/* Hora rápida: casilla de 32 con filete; elegida, como el día elegido del calendario (panel-3, filete de control y 2 px de acento abajo). */
.crm-fh-rapida {
  position: relative;
  display: grid;
  place-items: center;
  height: 32px;
  margin: 0;
  padding: 0 8px;
  border: 1px solid var(--crm-line-2);
  border-radius: 0;
  background: transparent;
  color: var(--crm-text-2);
  font-family: var(--crm-sans);
  font-size: 13px;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition:
    background-color var(--crm-t-salida) linear,
    border-color var(--crm-t-salida) linear;
}

@media (hover: hover) {
  .crm-fh-rapida:hover {
    border-color: var(--crm-muted);
    background: var(--crm-panel-3);
    color: var(--crm-text);
    transition-duration: 0ms;
  }
}

.crm-fh-rapida[aria-pressed="true"] {
  border-color: var(--crm-control);
  background: var(--crm-panel-3);
  color: var(--crm-text);
  font-weight: 500;
}

.crm-fh-rapida[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  left: -1px;
  height: 2px;
  background: var(--crm-acento);
}

.crm-fh-rapida:active {
  transform: translateY(0.5px);
}

.crm-fh-atajo:focus-visible,
.crm-fh-rapida:focus-visible {
  outline: var(--crm-foco-ancho) solid var(--crm-acento);
  outline-offset: -1px;
}

.crm-fh-hm {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 4px;
}

.crm-fh-hm .crm-selector-valor {
  font-variant-numeric: tabular-nums;
}

.crm-fh-dos-puntos {
  color: var(--crm-muted);
  font-size: 13px;
  line-height: 20px;
}

/* La hora que el reloj se salta: dice qué pasa y qué hacer; refluye, nunca se corta. */
.crm-fh-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  color: var(--crm-error);
  font-size: 12px;
  line-height: 16px;
}

.crm-fh-error svg {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 1px;
}

/* Pie: «Quitar» a la izquierda (fantasma), «Cancelar» y «Aplicar ⌘↵» a la derecha. */
.crm-fh-pie {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 48px;
  /* El filete va dentro de la medida (§1): 1 + 7 + 32 + 8 = 48, no 49. */
  padding: 7px 12px 8px;
  border-top: 1px solid var(--crm-line);
}

.crm-fh-quitar {
  margin-right: auto;
}

/*
 * Contenedor estrecho (la capa mide 496 con sus filetes, 494 por dentro; un móvil de 390 la deja en
 * 358): una sola columna. El día arriba, centrado; los atajos en dos
 * columnas de dos líneas (40 como mínimo) para no alargar la capa; la hora debajo.
 */
@container (max-width: 493px) {
  .crm-fh-cuerpo {
    grid-template-columns: minmax(0, 1fr);
  }

  .crm-fh-lado {
    border-top: 1px solid var(--crm-line);
    border-left: 0;
  }

  .crm-fh-atajos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }

  .crm-fh-atajo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: center;
    /* Sin hueco entre filas: el `gap: 8px` del ítem en fila dejaba 8 entre la etiqueta y la pista (48, no 40). */
    gap: 0 8px;
    /* 2 + 20 + 16 + 2 = 40 con una línea de cada; crece si refluyen. */
    min-height: 40px;
    padding: 2px 4px 2px 8px;
  }

  .crm-fh-atajo-detalle {
    grid-row: 2;
    text-align: left;
  }

  .crm-fh-atajo .crm-tecla {
    grid-row: 1 / span 2;
    grid-column: 2;
  }
}

/*
 * Tacto (§15, GRAMATICA §6): lo que se toca, a 40. El calendario de la capa
 * pasa a días de 40 (7 × 40 = 280, cabe en 358) y sus pasos de mes a 40;
 * fuera de esta capa, el calendario no cambia. La hora exacta ya crece sola
 * (Selector de tamaño normal: 40 y letra de 16).
 */
@media (pointer: coarse) {
  .crm-fh-atajo {
    min-height: 40px;
  }

  .crm-fh-rapida {
    height: 40px;
  }

  .crm-fh-capa .crm-calendario,
  .crm-fh-capa .crm-calendario-rejilla {
    width: 280px;
  }

  .crm-fh-capa .crm-calendario-cabecera {
    height: 40px;
  }

  .crm-fh-capa .crm-calendario-paso {
    width: 40px;
    height: 40px;
  }

  .crm-fh-capa .crm-calendario-rejilla td,
  .crm-fh-capa .crm-calendario-dia {
    width: 40px;
    height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crm-fh-rapida:active {
    transform: none;
  }
}

@media (forced-colors: active) {
  .crm-fh-atajo[aria-pressed="true"],
  .crm-fh-rapida[aria-pressed="true"] {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }

  .crm-fh-rapida[aria-pressed="true"]::after {
    background: Highlight;
  }
}

/*
 * Familia «datos» de la marca Criterium: tabla, celdas, cifras, ficha, línea
 * de tiempo, lista, tablero y agenda. Solo variables --crm-* (00-temas.css);
 * radio 0, filetes de 1 px, cifras tabulares. Medidas: docs/marca/FUNDAMENTOS.md
 * (filas 36/32/44, cabecera 32, controles 24/28, interfaz a 13, rótulo mono 11
 * en MAYÚSCULAS solo en cabeceras de columna, claves y rótulos de sección).
 * El verde se cuenta: elegido/activo, hecho, vivo y lo que espera a alguien.
 */

/* ── Comunes ───────────────────────────────────────────────────────────── */
.crm-tabla,
.crm-dato-menu,
.crm-grupo-kpi,
.crm-kpi,
.crm-ficha,
.crm-lista-desc,
.crm-linea,
.crm-lista,
.crm-kanban,
.crm-agenda,
.crm-dato-vacio,
.crm-dato-vacio-marco {
  box-sizing: border-box;
  color: var(--crm-text);
  font-family: var(--crm-sans);
  -webkit-font-smoothing: antialiased;
}

:is(.crm-tabla, .crm-dato-menu, .crm-grupo-kpi, .crm-kpi, .crm-ficha, .crm-lista-desc, .crm-linea, .crm-lista, .crm-kanban, .crm-agenda, .crm-dato-vacio, .crm-dato-vacio-marco) *,
:is(.crm-tabla, .crm-dato-menu, .crm-grupo-kpi, .crm-kpi, .crm-ficha, .crm-lista-desc, .crm-linea, .crm-lista, .crm-kanban, .crm-agenda, .crm-dato-vacio, .crm-dato-vacio-marco) ::before,
:is(.crm-tabla, .crm-dato-menu, .crm-grupo-kpi, .crm-kpi, .crm-ficha, .crm-lista-desc, .crm-linea, .crm-lista, .crm-kanban, .crm-agenda, .crm-dato-vacio, .crm-dato-vacio-marco) ::after {
  box-sizing: border-box;
}

:is(.crm-tabla, .crm-dato-menu, .crm-ficha, .crm-linea, .crm-lista, .crm-kanban, .crm-agenda, .crm-dato-vacio, .crm-dato-vacio-marco) svg {
  flex: none;
}

.crm-tabla-hueco {
  flex: 1 1 0;
  min-width: 0;
}

/* Acción con atajo (barra de lote, ficha): texto en frase y la tecla a la derecha. */
.crm-dato-accion .crm-dato-atajo {
  display: inline-flex;
  gap: 2px;
  margin-right: -4px;
}

.crm-dato-accion .crm-tecla {
  color: var(--crm-muted);
}

/* Sobre la acción blanca (o verde), la tecla es un filete del color de la tinta, no un bloque. */
.crm-dato-accion:is([data-variante="principal"], [data-variante="acento"]) .crm-tecla {
  border-color: color-mix(in srgb, currentColor 28%, transparent);
  background: transparent;
  color: inherit;
}

/* Casilla: cuadrada de 14, contorno de control; verde al marcarse. */
.crm-dato-casilla {
  display: inline-grid;
  place-content: center;
  flex: none;
  width: 14px;
  height: 14px;
  margin: 0;
  border: 1px solid var(--crm-control);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
  transition:
    background-color var(--crm-t-color) linear,
    border-color var(--crm-t-color) linear,
    opacity var(--crm-t-salida) linear;
}

.crm-dato-casilla::before {
  content: "";
  width: 8px;
  height: 4px;
  border-bottom: 2px solid var(--crm-sobre-acento);
  border-left: 2px solid var(--crm-sobre-acento);
  transform: translateY(-1px) rotate(-45deg) scale(0);
  transition: transform var(--crm-t-pulsar) var(--crm-snap);
}

.crm-dato-casilla:checked,
.crm-dato-casilla:indeterminate {
  border-color: var(--crm-acento);
  background: var(--crm-acento);
}

.crm-dato-casilla:checked::before {
  transform: translateY(-1px) rotate(-45deg) scale(1);
}

.crm-dato-casilla:indeterminate::before {
  width: 8px;
  height: 0;
  border-left: 0;
  transform: none;
}

.crm-dato-casilla:hover:not(:disabled, :checked, :indeterminate) {
  border-color: var(--crm-text-2);
}

.crm-dato-casilla:disabled {
  border-color: var(--crm-linea-apagada);
  background: transparent;
  cursor: not-allowed;
}

/* Vive en celdas y cabeceras que recortan: el anillo por dentro (§7), nunca cortado. */
.crm-dato-casilla:focus-visible {
  outline: var(--crm-foco-ancho) solid var(--crm-acento);
  outline-offset: -1px;
}

.crm-dato-casilla-area {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
}

/* Menús de filtro y columnas (la capa es el `Menu` de estructura): opción con su cuenta. */
.crm-dato-menu-opcion {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.crm-dato-menu-cuenta {
  flex: none;
  color: var(--crm-dim);
  font-size: 12px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

/* Vacío de bloque (lista, línea de tiempo). */
.crm-dato-vacio {
  border-top: 1px solid var(--crm-line);
  border-bottom: 1px solid var(--crm-line);
}

/* Vacío con personalidad: la C en ASCII (o un icono de 20), una línea y una acción. */
.crm-dato-vacio-marco {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 48px 24px;
  text-align: center;
}

.crm-dato-vacio-marco[data-tamano="compacto"] {
  padding: 32px 16px;
}

/* La C (opt-in con `firma`): la tipografía la pone `.crm-c-ascii` (10-controles). */
.crm-dato-c {
  margin-bottom: 8px;
  color: var(--crm-dim);
}

.crm-dato-vacio-marco[data-tamano="compacto"] .crm-dato-c {
  margin-bottom: 4px;
}

/* Icono de 20 en su marco de 40, como el de `Vacio` (32 en compacto). */
.crm-dato-vacio-icono {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 4px;
  border: 1px solid var(--crm-line-2);
  color: var(--crm-muted);
}

.crm-dato-vacio-marco[data-tamano="compacto"] .crm-dato-vacio-icono {
  width: 32px;
  height: 32px;
}

.crm-dato-vacio-icono svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.6;
}

.crm-dato-vacio-titulo {
  margin: 0;
  color: var(--crm-text);
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.crm-dato-vacio-texto {
  max-width: 52ch;
  margin: 0;
  color: var(--crm-muted);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}

.crm-dato-vacio-accion {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

/* ── Tabla ─────────────────────────────────────────────────────────────── */
.crm-tabla {
  container: crm-tabla / inline-size;
  --crm-tabla-fondo: var(--crm-bg);
  --crm-tabla-grupo: var(--crm-panel-2);
  position: relative;
  display: grid;
  gap: 12px;
  min-width: 0;
  font-size: 13px;
  line-height: 20px;
}

.crm-tabla[data-superficie="panel"] {
  --crm-tabla-fondo: var(--crm-panel);
  --crm-tabla-grupo: var(--crm-panel-2);
}

/* En móvil la densidad no aporta: el selector se calla y la barra respira. */
@media (max-width: 560px) {
  .crm-tabla-conmutador[aria-label="Densidad"] {
    display: none;
  }
}

/* Barra de herramientas: una altura, 28 (los chips, 24). */
.crm-tabla-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 28px;
}

.crm-tabla-busqueda {
  display: flex;
  flex: 0 1 280px;
  align-items: center;
  gap: 6px;
  min-width: 160px;
  height: 28px;
  padding: 0 4px 0 10px;
  border: 1px solid var(--crm-line-2);
  background: transparent;
  color: var(--crm-muted);
  cursor: text;
  transition: border-color var(--crm-t-color) linear;
}

.crm-tabla-busqueda:hover {
  border-color: var(--crm-control);
}

/* Es un campo: el borde pasa a acento y es el único indicador. */
.crm-tabla-busqueda:focus-within {
  border-color: var(--crm-acento);
}

.crm-tabla-busqueda > svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.5;
}

.crm-tabla-busqueda input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--crm-text);
  font: inherit;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: -0.005em;
  caret-color: var(--crm-acento);
}

.crm-tabla-busqueda input::placeholder {
  color: var(--crm-dim);
}

.crm-tabla-busqueda input::-webkit-search-cancel-button {
  appearance: none;
}

.crm-tabla-busqueda input:focus-visible {
  outline: 0;
}

.crm-tabla-busqueda-atajo {
  transition: opacity var(--crm-t-salida) linear;
}

.crm-tabla-busqueda:focus-within .crm-tabla-busqueda-atajo {
  opacity: 0;
}

/* Chips de filtro de 24: «Estado | es Espera | ×», como en Linear. */
.crm-chip-filtro {
  display: inline-flex;
  align-items: stretch;
  height: 24px;
  border: 1px solid var(--crm-line-2);
  background: var(--crm-panel);
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
}

.crm-chip-filtro-campo,
.crm-chip-filtro-boton,
.crm-chip-filtro-quitar,
.crm-tabla-anadir,
.crm-tabla-limpiar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--crm-muted);
  font: inherit;
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
}

.crm-chip-filtro-campo {
  border-right: 1px solid var(--crm-line);
  color: var(--crm-text-2);
}

.crm-chip-filtro-boton,
.crm-chip-filtro-quitar,
.crm-tabla-anadir,
.crm-tabla-limpiar {
  cursor: pointer;
  transition:
    background-color var(--crm-t-salida) linear,
    color var(--crm-t-salida) linear;
}

.crm-chip-filtro-valor {
  color: var(--crm-text);
}

.crm-chip-filtro-quitar {
  justify-content: center;
  width: 24px;
  padding: 0;
  border-left: 1px solid var(--crm-line);
}

.crm-chip-filtro-quitar svg,
.crm-tabla-anadir svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.5;
}

.crm-tabla-anadir {
  height: 24px;
  border: 1px dashed var(--crm-line-2);
}

.crm-tabla-limpiar {
  height: 24px;
}

:is(.crm-chip-filtro-boton, .crm-chip-filtro-quitar, .crm-tabla-anadir, .crm-tabla-limpiar):hover,
:is(.crm-chip-filtro-boton, .crm-tabla-anadir)[data-state="open"] {
  background: var(--crm-panel-2);
  color: var(--crm-text);
  transition-duration: 0ms;
}

.crm-tabla-anadir:hover,
.crm-tabla-anadir[data-state="open"] {
  border-color: var(--crm-control);
}

:is(.crm-chip-filtro-boton, .crm-chip-filtro-quitar):focus-visible {
  outline-offset: -1px;
}

.crm-tabla-cuenta {
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

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

/* Caja con desplazamiento: horizontal siempre, vertical con virtualización. */
/*
 * La caja es su propio contexto de apilamiento (D07): las capas de dentro
 * (cabecera fija, columnas fijas, pie contable) se ordenan entre ellas y
 * nunca salen por encima de la barra o el pie del marco.
 */
.crm-tabla-caja {
  /* La zona de toque de un botón de fila no pasa del alto de la fila (ver 10-controles): ni pisa la vecina ni desborda la caja. */
  --crm-toque-max: var(--crm-tabla-alto, 36px);
  position: relative;
  isolation: isolate;
  min-width: 0;
  overflow: auto;
  overscroll-behavior-x: contain;
  scrollbar-color: var(--crm-line-2) transparent;
  scrollbar-width: thin;
}

/*
 * Alto a la vista (`altoMaximo="vista"`): lo que queda bajo la barra del
 * marco y sobre su pie, menos el aire de la página arriba y abajo; nunca
 * menos de 320. La caja desplaza dentro y la cabecera y el pie contable
 * quedan fijos a la vista.
 */
.crm-tabla-caja[data-alto="vista"] {
  max-height: max(320px, calc(100dvh - var(--crm-marco-arriba, 44px) - var(--crm-marco-abajo, 32px) - 2 * var(--crm-es-pad, 24px)));
}

/*
 * Indicio de desborde (§15): el borde por el que sigue la tabla se funde 24
 * px, en su lado lógico (`--crm-tabla-hacia` apunta al fin de la línea; en
 * derecha a izquierda, a la izquierda). Con columnas fijas, lo escondido al
 * inicio queda bajo la última fija, no en el borde de la caja: el fundido
 * empieza en esa frontera medida (`--crm-tabla-fijas`) y dura el hueco libre
 * tras ella (`--crm-tabla-indicio`, hasta 24), así cae sobre aire o sobre lo
 * ya cortado y nunca sobre tinta que se lee entera. Las fijas no se funden.
 */
.crm-tabla-caja {
  --crm-tabla-hacia: right;
}

.crm-tabla-caja:dir(rtl) {
  --crm-tabla-hacia: left;
}

.crm-tabla-caja[data-desborde="fin"] {
  --crm-tabla-mascara: linear-gradient(to var(--crm-tabla-hacia), var(--crm-text) calc(100% - 24px), transparent);
}

.crm-tabla-caja[data-desborde="inicio"] {
  --crm-tabla-mascara: linear-gradient(to var(--crm-tabla-hacia), transparent, var(--crm-text) 24px);
}

.crm-tabla-caja[data-desborde="ambos"] {
  --crm-tabla-mascara: linear-gradient(to var(--crm-tabla-hacia), transparent, var(--crm-text) 24px, var(--crm-text) calc(100% - 24px), transparent);
}

.crm-tabla-caja[data-fijas][data-desborde="inicio"] {
  --crm-tabla-mascara: linear-gradient(to var(--crm-tabla-hacia), var(--crm-text) var(--crm-tabla-fijas, 0px), transparent var(--crm-tabla-fijas, 0px), var(--crm-text) calc(var(--crm-tabla-fijas, 0px) + var(--crm-tabla-indicio, 24px)));
}

.crm-tabla-caja[data-fijas][data-desborde="ambos"] {
  --crm-tabla-mascara: linear-gradient(to var(--crm-tabla-hacia), var(--crm-text) var(--crm-tabla-fijas, 0px), transparent var(--crm-tabla-fijas, 0px), var(--crm-text) calc(var(--crm-tabla-fijas, 0px) + var(--crm-tabla-indicio, 24px)), var(--crm-text) calc(100% - 24px), transparent);
}

.crm-tabla-caja[data-desborde] {
  mask-image: var(--crm-tabla-mascara);
}

/* Lo que se enfoca con el teclado se desplaza hasta salir de debajo de las fijas, con el aire del indicio. */
.crm-tabla-caja[data-fijas] {
  scroll-padding-inline-start: calc(var(--crm-tabla-fijas, 0px) + 24px);
}

/*
 * En vertical (K5-15), con alto máximo: si queda tabla por debajo y no hay
 * pie contable fijo, el borde inferior se funde 24. Con desborde horizontal a
 * la vez, las dos máscaras se cruzan (intersect): se funden los dos bordes.
 */
.crm-tabla-caja[data-desborde-v="fin"] {
  mask-image: linear-gradient(to bottom, var(--crm-text) calc(100% - 24px), transparent);
}

.crm-tabla-caja[data-desborde-v="fin"][data-desborde] {
  -webkit-mask-composite: source-in;
  mask-image: var(--crm-tabla-mascara), linear-gradient(to bottom, var(--crm-text) calc(100% - 24px), transparent);
  mask-composite: intersect;
}

/* Cargando: el filo de luz recorre la base de la cabecera (sin destellos de esqueleto). */
.crm-tabla-caja[data-ocupada]::before {
  content: "";
  position: absolute;
  z-index: 4;
  top: 31px;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--crm-acento) 50%, transparent) -40% 0 / 40% 100% no-repeat;
  animation: crm-dato-filo var(--crm-t-filo) var(--crm-curva) infinite;
}

.crm-tabla-tabla {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  line-height: 20px;
  letter-spacing: -0.005em;
}

/* Cabecera de 32: mono 11 en MAYÚSCULAS, la única mayúscula de la tabla. */
.crm-tabla-tabla thead th {
  position: sticky;
  z-index: 2;
  top: 0;
  height: 32px;
  padding: 0 12px;
  border-bottom: 1px solid var(--crm-line-2);
  background: var(--crm-tabla-fondo);
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.crm-tabla-tabla thead th[data-fija] {
  z-index: 3;
}

/*
 * Cabecera de dos filas (columnas con `grupo`): arriba, la celda de cada
 * grupo a 32 sobre sus columnas, con un filete line que dice hasta dónde
 * llega y otro a su izquierda que lo separa del anterior; debajo, la fila
 * de rótulos, fija a 32 del borde. Fuera de grupo, la fila de arriba queda
 * vacía (el mismo fondo, sin filete).
 */
.crm-tabla-grupos > :is(th, td) {
  position: sticky;
  z-index: 2;
  top: 0;
  height: 32px;
  padding: 0 12px;
  background: var(--crm-tabla-fondo);
}

.crm-tabla-grupos > [data-fija] {
  z-index: 3;
}

/* La fila de grupos lleva su filete de lado a lado (K5-14): sobre una columna sin grupo («Total») no queda un hueco. */
.crm-tabla-tabla thead .crm-tabla-grupos > td {
  border-bottom: 1px solid var(--crm-line);
}

.crm-tabla-tabla thead .crm-tabla-grupos > th {
  border-bottom: 1px solid var(--crm-line);
  box-shadow: inset 1px 0 0 var(--crm-line);
  text-align: center;
}

.crm-tabla-tabla thead[data-grupos] tr:not(.crm-tabla-grupos) th {
  top: 32px;
}

.crm-tabla-tabla [data-alinear="fin"] {
  text-align: right;
}

.crm-tabla-tabla [data-alinear="centro"] {
  text-align: center;
}

.crm-tabla-orden {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  margin: 0 -4px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition: color var(--crm-t-salida) linear;
}

[data-alinear="fin"] > .crm-tabla-orden {
  flex-direction: row-reverse;
}

.crm-tabla-orden svg {
  width: 12px;
  height: 12px;
  stroke-width: 1.5;
  transition: opacity var(--crm-t-salida) linear;
}

.crm-tabla-orden svg[data-fantasma] {
  opacity: 0;
}

.crm-tabla-orden:hover,
.crm-tabla-orden[data-activo] {
  color: var(--crm-text);
  transition-duration: 0ms;
}

.crm-tabla-orden[data-activo] svg {
  color: var(--crm-acento);
}

.crm-tabla-orden:hover svg[data-fantasma],
.crm-tabla-orden:focus-visible svg[data-fantasma] {
  opacity: 0.6;
  transition-duration: 0ms;
}

.crm-tabla-orden:focus-visible {
  outline-offset: -1px;
}

.crm-tabla-th {
  display: inline-block;
}

/* Filas de 36 (32 compacta, 44 cómoda), celdas a 13 y hover instantáneo (0 ms al entrar, 120 al salir). */
.crm-tabla-fila {
  --crm-tabla-fila: var(--crm-tabla-fondo);
}

.crm-tabla-fila > :is(td, th) {
  font-weight: 400;
  text-align: left;
  height: var(--crm-tabla-alto, 36px);
  padding: 0 12px;
  border-bottom: 1px solid var(--crm-line);
  background: var(--crm-tabla-fila);
  color: var(--crm-text-2);
  vertical-align: middle;
  white-space: nowrap;
  transition: background-color var(--crm-t-salida) linear;
}

/*
 * D43 · Fila con una celda de dos líneas (CeldaDoble con detalle, o una celda
 * marcada `data-crm-dos-lineas`): todas las celdas comparten la línea
 * principal. Se alinean arriba con el mismo margen superior (0 a 36, 4 a
 * 44); el dato auxiliar queda debajo. Las filas de una sola línea siguen
 * centradas y la altura de la ley (36/44) no cambia: 34 de bloque y el
 * filete de 1, dentro de la medida.
 */
.crm-tabla-fila:has(> :is(td, th) .crm-celda-doble-detalle, > :is(td, th)[data-crm-dos-lineas]) > :is(td, th) {
  padding-top: max(0px, calc((var(--crm-tabla-alto, 36px) - 36px) / 2));
  vertical-align: top;
}

/*
 * El CeldaDoble se sienta arriba de su línea (título 18 + detalle 16 = 34)
 * y el texto suelto de las demás celdas de la fila toma la misma línea de
 * 18: las líneas principales coinciden al píxel y el bloque (34) más el
 * filete (1, dentro de la medida, §1) cabe en la fila de 36.
 */
.crm-tabla-fila:has(> :is(td, th) .crm-celda-doble-detalle, > :is(td, th)[data-crm-dos-lineas]) > :is(td, th) {
  line-height: 18px;
}

.crm-tabla-fila:has(> :is(td, th) .crm-celda-doble-detalle, > :is(td, th)[data-crm-dos-lineas]) .crm-celda-doble {
  vertical-align: top;
}

/* La casilla (14) se centra en esa línea principal de 20, no en la fila entera. */
.crm-tabla-fila:has(> :is(td, th) .crm-celda-doble-detalle, > :is(td, th)[data-crm-dos-lineas]) > :is(td, th).crm-tabla-casilla {
  line-height: 18px;
}

.crm-tabla-fila:has(> :is(td, th) .crm-celda-doble-detalle, > :is(td, th)[data-crm-dos-lineas]) .crm-tabla-casilla .crm-dato-casilla {
  vertical-align: middle;
}

.crm-tabla-fila > :is(td, th):first-child:not(.crm-tabla-casilla),
.crm-tabla-fila > .crm-tabla-casilla + :is(td, th) {
  color: var(--crm-text);
}

.crm-tabla-fila > :is(td, th)[data-cifra] {
  color: var(--crm-text);
}

/*
 * La cifra se lee en su orden también en una página de derecha a izquierda:
 * sin letras fuertes, «1.234,56 €» tomaría la dirección de la página y
 * saldría «€ 1.234,56». Su párrafo decide por su contenido, no por la página.
 */
.crm-tabla-tabla td[data-cifra] {
  unicode-bidi: plaintext;
}

.crm-tabla-fila[data-abre] {
  cursor: pointer;
}

/* Estado propio de la fila (`estadoFila`): atenuada se lee en secundario; aviso y error, su filete de 2. */
.crm-tabla-fila[data-tono="atenuada"] > :is(td, th),
.crm-tabla-fila[data-tono="atenuada"] > :is(td, th):first-child:not(.crm-tabla-casilla),
.crm-tabla-fila[data-tono="atenuada"] > .crm-tabla-casilla + td,
.crm-tabla-fila[data-tono="atenuada"] > :is(td, th)[data-cifra] {
  color: var(--crm-muted);
}

.crm-tabla-fila[data-tono="aviso"]:not([data-elegida], [data-activa]) > :is(td, th):first-child {
  box-shadow: inset 2px 0 0 var(--crm-aviso);
}

.crm-tabla-fila[data-tono="error"]:not([data-elegida], [data-activa]) > :is(td, th):first-child {
  box-shadow: inset 2px 0 0 var(--crm-error);
}

.crm-tabla-fila:not([data-esqueleto]):hover {
  --crm-tabla-fila: var(--crm-panel-2);
}

.crm-tabla-fila:not([data-esqueleto]):hover > :is(td, th) {
  transition-duration: 0ms;
}

/* Elegida o abierta: marca de acento de 2 px y fondo un escalón más. */
.crm-tabla-fila[data-elegida],
.crm-tabla-fila[data-activa],
.crm-tabla-fila[data-elegida]:hover,
.crm-tabla-fila[data-activa]:hover {
  --crm-tabla-fila: var(--crm-panel-3);
}

.crm-tabla-fila:is([data-elegida], [data-activa]) > :is(td, th):first-child {
  box-shadow: inset 2px 0 0 var(--crm-acento);
}

.crm-tabla-fila:active:not([data-esqueleto]) {
  --crm-tabla-fila: var(--crm-panel-3);
}

/*
 * Foco de fila: el anillo se pinta en las celdas (sombra interior), no en el
 * <tr>: las columnas fijas son sticky con fondo opaco y tapaban el outline de
 * la fila. Así se ve entero, por dentro, sobre las fijas también (§7).
 */
.crm-tabla-fila:focus-visible {
  outline: none;
}

.crm-tabla-fila:focus-visible > :is(td, th) {
  box-shadow:
    inset 0 var(--crm-foco-ancho) 0 var(--crm-acento),
    inset 0 calc(var(--crm-foco-ancho) * -1) 0 var(--crm-acento);
}

.crm-tabla-fila:focus-visible > :is(td, th):first-child {
  box-shadow:
    inset 0 var(--crm-foco-ancho) 0 var(--crm-acento),
    inset 0 calc(var(--crm-foco-ancho) * -1) 0 var(--crm-acento),
    inset var(--crm-foco-ancho) 0 0 var(--crm-acento);
}

.crm-tabla-fila:focus-visible > :is(td, th):last-child {
  box-shadow:
    inset 0 var(--crm-foco-ancho) 0 var(--crm-acento),
    inset 0 calc(var(--crm-foco-ancho) * -1) 0 var(--crm-acento),
    inset calc(var(--crm-foco-ancho) * -1) 0 0 var(--crm-acento);
}

/* Con foco, la columna fija conserva su filete y la elegida su marca de 2 px (anillo + marca, §7). */
.crm-tabla-fila:focus-visible > [data-ultima-fija]:not(:first-child, :last-child) {
  box-shadow:
    inset 0 var(--crm-foco-ancho) 0 var(--crm-acento),
    inset 0 calc(var(--crm-foco-ancho) * -1) 0 var(--crm-acento),
    inset -1px 0 0 var(--crm-line-2);
}

.crm-tabla-fila:focus-visible:is([data-elegida], [data-activa]) > :is(td, th):first-child {
  box-shadow:
    inset 0 var(--crm-foco-ancho) 0 var(--crm-acento),
    inset 0 calc(var(--crm-foco-ancho) * -1) 0 var(--crm-acento),
    inset 2px 0 0 var(--crm-acento);
}

.crm-tabla-tabla [data-fija] {
  position: sticky;
  z-index: 1;
}

/*
 * Una fija mide su ancho, no el de su contenido: la frontera (y su indicio)
 * no se mueve con un título largo. En compacta el CeldaDoble va en una línea
 * flexible cuyo ancho mínimo es el texto entero (un título de 120: 895 de
 * columna); con su tope en píxeles (el ancho de la columna menos su relleno),
 * título y detalle ceden con su «…» como en las demás densidades.
 */
.crm-tabla-tabla td[data-fija] .crm-celda-doble {
  max-width: calc(var(--crm-col-ancho) - 24px);
}

.crm-tabla-tabla [data-ultima-fija] {
  box-shadow: inset -1px 0 0 var(--crm-line-2);
}

/* En derecha a izquierda, el filete de la frontera va a su fin: la izquierda. */
.crm-tabla-tabla:dir(rtl) [data-ultima-fija] {
  box-shadow: inset 1px 0 0 var(--crm-line-2);
}

.crm-tabla-fila:is([data-elegida], [data-activa]) > :is(td, th):first-child[data-ultima-fija] {
  box-shadow:
    inset 2px 0 0 var(--crm-acento),
    inset -1px 0 0 var(--crm-line-2);
}

/* Columna de la casilla: 32 de ancho; la casilla aparece al pasar por la fila (como Linear). */
.crm-tabla-tabla .crm-tabla-casilla {
  position: relative;
  width: 32px;
  min-width: 32px;
  padding: 0;
}

.crm-tabla-tabla .crm-tabla-casilla + :is(td, th) {
  padding-left: 4px;
}

.crm-tabla-casilla .crm-dato-casilla {
  opacity: 0;
}

.crm-tabla-fila:is(:hover, :focus-visible, :focus-within, [data-elegida]) .crm-dato-casilla,
.crm-tabla[data-con-seleccion] .crm-tabla-casilla .crm-dato-casilla,
.crm-tabla-tabla thead tr:hover .crm-dato-casilla,
.crm-tabla-casilla .crm-dato-casilla:is(:focus-visible, :checked, :indeterminate) {
  opacity: 1;
  transition-duration: 0ms;
}

@media (hover: none) {
  .crm-tabla-casilla .crm-dato-casilla {
    opacity: 1;
  }
}

/* Cabecera de grupo: 32, frase normal a 13/500, plegable y con su contador. */
.crm-tabla-grupo > th {
  position: sticky;
  z-index: 2;
  top: 32px;
  height: 32px;
  padding: 0 12px 0 8px;
  border-bottom: 1px solid var(--crm-line);
  background: var(--crm-tabla-grupo);
  color: var(--crm-text);
  font-family: var(--crm-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.005em;
  text-align: left;
  text-transform: none;
  white-space: nowrap;
  transition: background-color var(--crm-t-salida) linear;
}

.crm-tabla-cuerpo-grupo + .crm-tabla-cuerpo-grupo .crm-tabla-grupo > th {
  border-top: 1px solid var(--crm-line);
}

.crm-tabla-grupo {
  cursor: pointer;
}

.crm-tabla-grupo:hover > th {
  background: var(--crm-panel-3);
  transition-duration: 0ms;
}

.crm-tabla-grupo:focus-visible {
  outline: var(--crm-foco-ancho) solid var(--crm-acento);
  outline-offset: -1px;
}

.crm-tabla-grupo-cabeza {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.crm-tabla-grupo-flecha {
  width: 14px;
  height: 14px;
  color: var(--crm-muted);
  stroke-width: 1.5;
  transform: rotate(90deg);
  transition: transform var(--crm-t-color) var(--crm-snap);
}

.crm-tabla-grupo[data-plegado] .crm-tabla-grupo-flecha {
  transform: none;
}

.crm-tabla-grupo-titulo {
  display: inline-flex;
  align-items: center;
}

.crm-tabla-grupo-titulo .crm-celda-estado[data-tono] {
  color: var(--crm-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}

.crm-tabla-grupo-cuenta {
  color: var(--crm-muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

.crm-tabla-grupo-elegidas {
  color: var(--crm-acento);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

.crm-tabla-hueco-carga {
  max-width: 100%;
  vertical-align: middle;
}

[data-alinear="fin"] > .crm-tabla-hueco-carga {
  margin-left: auto;
}

.crm-tabla-sin-resultados {
  padding: 0;
  border-bottom: 1px solid var(--crm-line);
  white-space: normal;
}

.crm-tabla-vacio {
  border-top: 1px solid var(--crm-line);
  border-bottom: 1px solid var(--crm-line);
}

.crm-tabla-error {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--crm-error-linea);
  background: var(--crm-error-suave);
}

.crm-tabla-error > svg {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--crm-error);
  stroke-width: 1.6;
}

.crm-tabla-error-titulo {
  margin: 0;
  color: var(--crm-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}

.crm-tabla-error-texto {
  margin: 0;
  color: var(--crm-text-2);
  font-size: 13px;
  line-height: 20px;
}

.crm-tabla-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 28px;
}

.crm-tabla-pagina {
  min-width: 48px;
  color: var(--crm-text-2);
  font-size: 12px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* Barra de lote: 40, flota abajo (como en Linear) y entra desde su ancla, a 16 del borde del área que desplaza. El pie
   del panel va a todo el ancho FUERA de esa área (OFICIO F12): ya no la tapa, así que no se le suma su alto. */
.crm-tabla-lote {
  position: sticky;
  z-index: 5;
  bottom: 16px;
  display: flex;
  justify-self: center;
  align-items: center;
  gap: 8px;
  height: 40px;
  max-width: calc(100% - 16px);
  padding: 0 6px 0 12px;
  overflow-x: auto;
  border: 1px solid var(--crm-line-2);
  background: var(--crm-panel-2);
  box-shadow: var(--crm-sombra-capa);
  scrollbar-width: none;
  transform-origin: 50% 100%;
  animation: crm-dato-entra var(--crm-t-entrada) var(--crm-snap);
}

.crm-tabla-lote[data-saliendo] {
  opacity: 0;
  transition: opacity var(--crm-t-salida) linear;
}

.crm-tabla-lote-cuenta {
  flex: none;
  color: var(--crm-text-2);
  font-size: 13px;
  line-height: 20px;
  white-space: nowrap;
}

.crm-tabla-lote-cifra {
  color: var(--crm-text);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.crm-tabla-lote-sep {
  flex: none;
  width: 1px;
  height: 16px;
  background: var(--crm-line-2);
}

.crm-tabla-lote-acciones {
  display: flex;
  flex: none;
  gap: 4px;
}

.crm-tabla-lote-cerrar {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 6px;
  border: 0;
  background: transparent;
  color: var(--crm-muted);
  cursor: pointer;
  transition:
    background-color var(--crm-t-salida) linear,
    color var(--crm-t-salida) linear;
}

.crm-tabla-lote-cerrar svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.5;
}

.crm-tabla-lote-cerrar:hover {
  background: var(--crm-panel-3);
  color: var(--crm-text);
  transition-duration: 0ms;
}

.crm-tabla-lote-cerrar:active {
  transform: scale(0.96);
  transition: transform var(--crm-t-pulsar) var(--crm-snap);
}

.crm-tabla-lote-cerrar:focus-visible {
  outline: var(--crm-foco-ancho) solid var(--crm-acento);
  outline-offset: -1px;
}

/* ── Celdas ────────────────────────────────────────────────────────────── */
.crm-celda-estado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--crm-text-2);
  font-family: var(--crm-sans);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0;
  white-space: nowrap;
}

.crm-celda-estado[data-multilinea] {
  min-width: 0;
  white-space: normal;
  overflow-wrap: break-word;
}

.crm-celda-estado-icono,
.crm-celda-estado-icono > svg {
  display: block;
  flex: none;
  width: 16px;
  height: 16px;
}

.crm-celda-estado-icono > svg {
  stroke-width: 1.6;
}

.crm-celda-estado-punto {
  position: relative;
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--crm-dim);
}

.crm-celda-estado[data-tono="neutro"] {
  color: var(--crm-muted);
}

.crm-celda-estado:is([data-tono="hecho"], [data-tono="vivo"]) .crm-celda-estado-punto {
  background: var(--crm-acento);
}

.crm-celda-estado[data-tono="vivo"] {
  color: var(--crm-text);
}

.crm-celda-estado[data-tono="vivo"] .crm-celda-estado-punto {
  box-shadow: 0 0 0 2px var(--crm-acento-suave);
}

.crm-celda-estado[data-tono="vivo"] .crm-celda-estado-punto::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--crm-acento);
  animation: crm-dato-latido var(--crm-t-latido) ease-out infinite;
}

/* Lo que espera a una persona: anillo y texto en acento. */
.crm-celda-estado[data-tono="espera"] {
  color: var(--crm-acento);
}

.crm-celda-estado[data-tono="espera"] .crm-celda-estado-punto {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--crm-acento);
}

.crm-celda-estado[data-tono="aviso"] {
  color: var(--crm-aviso);
}

.crm-celda-estado[data-tono="aviso"] .crm-celda-estado-punto {
  background: var(--crm-aviso);
}

.crm-celda-estado[data-tono="error"] {
  color: var(--crm-error);
}

.crm-celda-estado[data-tono="error"] .crm-celda-estado-punto {
  background: var(--crm-error);
}

.crm-celda-persona {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  vertical-align: middle;
}

.crm-celda-persona-marca {
  flex: none;
}

.crm-celda-persona-texto {
  display: grid;
  min-width: 0;
}

.crm-celda-persona-nombre {
  overflow: hidden;
  color: var(--crm-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-celda-persona-detalle {
  overflow: hidden;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-celda-fecha {
  color: var(--crm-text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: default;
}

.crm-celda-cifra {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/*
 * La unidad (y el símbolo de moneda) es unidad, no cifra: apagada, a 400 aunque
 * la cifra vaya a 500 (un total), en la familia de la cifra y sin
 * transformar (una cabecera en mayúsculas no la sube: «€/kWh», no «€/KWH»).
 */
.crm-celda-cifra-unidad {
  /* Su pista (min-width) la iguala la columna: la unidad a la izquierda de ella, la cifra acaba siempre en la misma x. */
  display: inline-block;
  color: var(--crm-muted);
  font-weight: 400;
  text-align: left;
  text-transform: none;
}

/*
 * Cifra destacada (`escalon`, fuera de una tabla): el tamaño de la escala y la unidad al suyo (§3: 40 → 24,
 * 28 → 16, 24 → 14, 20 → 12), fijos, como el Kpi. Sin escalón, la cifra de tabla y su unidad del mismo tamaño.
 */
.crm-celda-cifra[data-escalon] {
  font-weight: 500;
}

.crm-celda-cifra[data-escalon="40"] {
  font-size: 40px;
  line-height: 44px;
}

.crm-celda-cifra[data-escalon="40"] .crm-celda-cifra-unidad {
  font-size: 24px;
}

.crm-celda-cifra[data-escalon="28"] {
  font-size: 28px;
  line-height: 32px;
}

.crm-celda-cifra[data-escalon="28"] .crm-celda-cifra-unidad {
  font-size: 16px;
}

.crm-celda-cifra[data-escalon="24"] {
  font-size: 24px;
  line-height: 28px;
}

.crm-celda-cifra[data-escalon="24"] .crm-celda-cifra-unidad {
  font-size: 14px;
}

.crm-celda-cifra[data-escalon="20"] {
  font-size: 20px;
  line-height: 24px;
}

.crm-celda-cifra[data-escalon="20"] .crm-celda-cifra-unidad {
  font-size: 12px;
}

/* ── Cifras (KPI) ──────────────────────────────────────────────────────── */
/*
 * Grupo de cifras: rejilla de columnas iguales (hasta 6 por fila; GrupoKpi
 * calcula --crm-kpi-columnas) y, si no caben, filas completas y equilibradas
 * (5 → 3 + 2; a menos de 400 de contenedor, 2 + 2 + 1). La última cifra se
 * estira sobre las columnas que sobran (--crm-kpi-ultima), así que cada fila
 * está llena y sus filetes caen sobre los de la fila de arriba. Con el ancho
 * medido, las columnas van en píxeles enteros (--crm-kpi-plantilla). Los filetes
 * entre cifras son sombras: la de la primera de cada fila (y la de arriba de
 * la primera fila) queda fuera y se recorta.
 */
.crm-grupo-kpi {
  display: grid;
  grid-template-columns: repeat(var(--crm-kpi-columnas, 4), minmax(0, 1fr));
  grid-template-columns: var(--crm-kpi-plantilla, repeat(var(--crm-kpi-columnas, 4), minmax(0, 1fr)));
  overflow: hidden;
  border-top: 1px solid var(--crm-line);
  border-bottom: 1px solid var(--crm-line);
}

.crm-grupo-kpi > :last-child {
  grid-column: span var(--crm-kpi-ultima, 1);
}

.crm-grupo-kpi > .crm-kpi {
  box-shadow:
    -1px 0 0 var(--crm-line),
    0 -1px 0 var(--crm-line);
}

/* Compacta (5 cifras o más): relleno de 16 (la cifra a 24/28 la pone el escalón). */
.crm-grupo-kpi[data-variante="compacta"] > .crm-kpi {
  padding: 16px;
}

/* El ancho de la cifra es el de su contenedor, nunca el de su contenido: así se mide sin bucles. */
/*
 * Una cifra suelta no dibuja filetes: los del grupo (izquierdo y de arriba)
 * solo tienen sentido dentro de `GrupoKpi`, que comparte las reglas y cierra
 * los bordes (D10: sueltas en una rejilla con hueco, las reglas quedaban rotas).
 */
.crm-kpi {
  display: grid;
  align-content: start;
  min-width: 0;
  padding: 20px;
  container-type: inline-size;
}

.crm-kpi-rotulo {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Rótulo: elipsis y el texto entero en el consejo (§14). */
.crm-kpi-rotulo > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-kpi-vivo {
  position: relative;
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--crm-acento);
  box-shadow: 0 0 0 2px var(--crm-acento-suave);
}

.crm-kpi-vivo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--crm-acento);
  animation: crm-dato-latido var(--crm-t-latido) ease-out infinite;
}

/* Cifra y mini tendencia en una fila: la tendencia se apoya en la línea base de la cifra. */
.crm-kpi-cuerpo {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
  margin-top: 6px;
}

/*
 * La cifra NUNCA se corta (§14): sin overflow ni elipsis. Kpi mide y elige la
 * forma que cabe (tendencia fuera, compacta, escalón 40 → 28 → 24 → 20); si
 * ni así, refluye (data-desborda) antes que cortarse.
 */
.crm-kpi-valor {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--crm-text);
  font-size: 28px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.crm-kpi[data-desborda] .crm-kpi-valor {
  white-space: normal;
  overflow-wrap: anywhere;
}

.crm-kpi-compacta,
.crm-kpi[data-compacta] .crm-kpi-exacta {
  display: none;
}

.crm-kpi[data-compacta] .crm-kpi-compacta {
  display: inline;
}

/* line-height 1: la unidad no estira la línea de la cifra. Tamaño por escalón (§3): 40 → 24, 28 → 16, 24 → 14, 20 → 12. */
.crm-kpi-unidad {
  margin-left: 4px;
  line-height: 1;
  color: var(--crm-muted);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
}

.crm-kpi[data-escalon="40"] .crm-kpi-valor {
  font-size: 40px;
  line-height: 44px;
}

.crm-kpi[data-escalon="40"] .crm-kpi-unidad {
  font-size: 24px;
}

.crm-kpi[data-escalon="28"] .crm-kpi-valor {
  font-size: 28px;
  line-height: 32px;
}

.crm-kpi[data-escalon="28"] .crm-kpi-unidad {
  font-size: 16px;
}

.crm-kpi[data-escalon="24"] .crm-kpi-valor {
  font-size: 24px;
  line-height: 28px;
}

.crm-kpi[data-escalon="24"] .crm-kpi-unidad {
  font-size: 14px;
}

.crm-kpi[data-escalon="20"] .crm-kpi-valor {
  font-size: 20px;
  line-height: 24px;
}

.crm-kpi[data-escalon="20"] .crm-kpi-unidad {
  font-size: 12px;
}

.crm-kpi-tendencia {
  flex: 0 1 96px;
  min-width: 48px;
  height: 24px;
  margin-left: auto;
  color: var(--crm-muted);
}

.crm-kpi[data-tamano="destacada"] .crm-kpi-tendencia {
  flex-basis: 128px;
  height: 32px;
}

/* La tendencia se va antes de quitarle sitio a la cifra: por contenedor (< 220) o porque Kpi midió que no caben las dos. */
.crm-kpi[data-sin-tendencia] .crm-kpi-tendencia {
  display: none;
}

@container (max-width: 219px) {
  .crm-kpi-tendencia {
    display: none;
  }
}

.crm-kpi-tendencia > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.crm-kpi-variacion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 8px 0 0;
  color: var(--crm-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 16px;
}

.crm-kpi-variacion svg {
  width: 12px;
  height: 12px;
  stroke-width: 1.5;
}

.crm-kpi-variacion[data-sentido="bueno"] :is(svg, .crm-kpi-variacion-valor) {
  color: var(--crm-acento);
}

.crm-kpi-variacion[data-sentido="fallo"] :is(svg, .crm-kpi-variacion-valor) {
  color: var(--crm-error);
}

.crm-kpi-variacion-valor {
  color: var(--crm-text-2);
  font-weight: 500;
}

.crm-kpi-referencia {
  margin-left: 2px;
  color: var(--crm-dim);
}

/* Lo que el panel ponga dentro del detalle va en línea: así la elipsis funciona (D11) y el consejo da el texto entero. */
.crm-kpi-detalle > * {
  display: inline;
}

.crm-kpi-detalle {
  margin: 8px 0 0;
  overflow: hidden;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * Acciones bajo el detalle: enlaces de 12 en su fila, con 12 entre ellas (nunca
 * pegadas: «Detalle» y «Ocultar» son dos destinos). Quedan por encima del
 * enlace que cubre la caja.
 */
.crm-kpi-acciones {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-top: 8px;
  font-size: 12px;
  line-height: 16px;
}

.crm-kpi-detalle + .crm-kpi-acciones {
  margin-top: 4px;
}

.crm-kpi-hueco {
  display: block;
  margin-top: 6px;
}

/* ── Ficha ─────────────────────────────────────────────────────────────── */
.crm-ficha {
  display: grid;
  min-width: 0;
  font-size: 13px;
  line-height: 20px;
  container-type: inline-size;
}

/* Cabecera de 52: identidad de 24, título a 15/500, estado y detalle, y acciones a 28. */
.crm-ficha-cabecera {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  border-bottom: 1px solid var(--crm-line);
}

.crm-ficha-identidad {
  display: grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  overflow: hidden;
  border: 1px solid var(--crm-line-2);
  background: var(--crm-panel-2);
  color: var(--crm-text-2);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0;
}

.crm-ficha-identidad img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.crm-ficha-identidad svg {
  width: 14px;
  height: 14px;
  color: var(--crm-muted);
  stroke-width: 1.5;
}

.crm-ficha-nombre {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.crm-ficha-titulo {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--crm-text);
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-ficha-meta {
  display: flex;
  flex: 0 100 auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.crm-ficha-detalle {
  overflow: hidden;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-ficha-acciones {
  display: flex;
  flex: none;
  gap: 8px;
  margin-left: auto;
}

.crm-ficha-seccion {
  padding-top: 24px;
}

.crm-ficha-seccion-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 32px;
}

.crm-ficha-seccion-titulo {
  margin: 0;
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crm-ficha-seccion-acciones {
  display: flex;
  gap: 8px;
}

@container (max-width: 560px) {
  .crm-ficha-cabecera {
    flex-wrap: wrap;
    padding: 12px 0;
  }

  .crm-ficha-nombre {
    flex: 1 1 calc(100% - 40px);
    flex-wrap: wrap;
    gap: 4px 12px;
  }

  .crm-ficha-titulo {
    white-space: normal;
  }

  .crm-ficha-acciones {
    width: 100%;
    margin-left: 0;
  }
}

/* Pares rótulo/valor de 32: clave mono 11, valor a 13. */
.crm-lista-desc {
  display: grid;
  margin: 0;
  border-top: 1px solid var(--crm-line);
}

.crm-lista-desc[data-columnas="2"] {
  grid-template-columns: repeat(auto-fill, minmax(max(min(100%, 320px), calc(50% - 16px)), 1fr));
  column-gap: 32px;
}

.crm-lista-desc-par {
  display: grid;
  grid-template-columns: minmax(96px, 176px) minmax(0, 1fr);
  align-items: baseline;
  gap: 16px;
  min-height: 32px;
  padding: 6px 0 5px;
  border-bottom: 1px solid var(--crm-line);
}

.crm-lista-desc-par dt {
  min-width: 0;
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crm-lista-desc-par dd {
  min-width: 0;
  margin: 0;
  color: var(--crm-text);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: -0.005em;
  overflow-wrap: anywhere;
}

.crm-lista-desc-par dd[data-cifra] {
  font-variant-numeric: tabular-nums;
}

.crm-lista-desc-par dd[data-mono] {
  color: var(--crm-text-2);
  font-family: var(--crm-mono);
  font-size: 12px;
  letter-spacing: 0;
}

.crm-lista-desc-par dd[data-falta] {
  color: var(--crm-dim);
}

/* ── Línea de tiempo (el carril de la Vista Agente) ───────────────────── */
.crm-linea {
  --crm-linea-fondo: var(--crm-bg);
  display: grid;
  gap: 24px;
  min-width: 0;
  font-size: 13px;
  line-height: 20px;
}

.crm-linea-dia-rotulo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crm-linea-dia-rotulo::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--crm-line);
}

/* Carril de 1 px por el centro de los nodos de 16. */
.crm-linea-carril {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crm-linea-carril::before,
.crm-linea-carril[data-vivo]::after {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 7px;
  width: 1px;
}

.crm-linea-carril::before {
  background: var(--crm-line-2);
}

.crm-linea-carril[data-vivo]::after {
  background: linear-gradient(180deg, transparent 0%, var(--crm-luz) 50%, transparent 100%) 0 -60px / 100% 60px no-repeat;
  box-shadow: 0 0 8px var(--crm-acento-halo);
  animation: crm-dato-corriente var(--crm-t-corriente) linear infinite;
}

.crm-linea-evento {
  position: relative;
  padding: 0 0 16px 28px;
}

.crm-linea-evento:last-child {
  padding-bottom: 0;
}

.crm-linea-nodo {
  position: absolute;
  top: 2px;
  left: 0;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1px solid var(--crm-line-2);
  border-radius: 50%;
  background: var(--crm-linea-fondo);
  color: var(--crm-muted);
}

.crm-linea-nodo svg {
  width: 10px;
  height: 10px;
  stroke-width: 2.5;
}

.crm-linea-evento[data-estado="neutro"] .crm-linea-nodo svg {
  stroke-width: 2;
}

.crm-linea-evento[data-estado="hecho"] .crm-linea-nodo {
  border-color: var(--crm-acento);
  background: var(--crm-acento);
  color: var(--crm-sobre-acento);
  box-shadow: 0 0 0 3px var(--crm-acento-suave);
}

.crm-linea-evento[data-estado="trabajando"] .crm-linea-nodo {
  border-color: var(--crm-acento-linea);
}

.crm-linea-evento[data-estado="trabajando"] .crm-linea-nodo::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid transparent;
  border-top-color: var(--crm-acento);
  border-right-color: var(--crm-acento);
  border-radius: 50%;
  animation: crm-dato-girar var(--crm-t-giro) linear infinite;
}

.crm-linea-evento[data-estado="error"] .crm-linea-nodo {
  border-color: var(--crm-error);
  color: var(--crm-error);
}

.crm-linea-cuerpo {
  min-width: 0;
}

.crm-linea-titulo {
  margin: 0;
  color: var(--crm-text);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: -0.005em;
}

.crm-linea-detalle {
  max-width: 68ch;
  margin: 2px 0 0;
  color: var(--crm-text-2);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: -0.005em;
}

.crm-linea-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin: 2px 0 0;
  color: var(--crm-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 16px;
}

.crm-linea-hora {
  cursor: default;
  transition: color var(--crm-t-salida) linear;
}

.crm-linea-hora:hover {
  color: var(--crm-text-2);
  transition-duration: 0ms;
}

.crm-linea-sep {
  color: var(--crm-line-2);
}

.crm-linea-evento:is([data-estado="hecho"], [data-estado="trabajando"]) .crm-linea-estado {
  color: var(--crm-acento);
}

.crm-linea-evento[data-estado="error"] .crm-linea-estado {
  color: var(--crm-error);
}

/* ── Lista (filas de 40, como Raycast) ─────────────────────────────────── */
.crm-lista {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--crm-line);
  font-size: 13px;
  line-height: 20px;
  list-style: none;
  container-type: inline-size;
}

.crm-lista-fila {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 40px;
  margin: 0;
  padding: 0 8px;
  border: 0;
  border-bottom: 1px solid var(--crm-line);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
}

.crm-lista[data-densidad="compacta"] .crm-lista-fila {
  height: 32px;
}

:is(a, button).crm-lista-fila {
  cursor: pointer;
  transition: background-color var(--crm-t-salida) linear;
}

:is(a, button).crm-lista-fila::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: -1px;
  left: 0;
  width: 2px;
  background: var(--crm-acento);
  opacity: 0;
}

:is(a, button).crm-lista-fila:is(:hover, :focus-visible) {
  background: var(--crm-panel-2);
  transition-duration: 0ms;
}

:is(a, button).crm-lista-fila:focus-visible {
  outline: 0;
}

/* La fila elegida con el teclado lleva la marca de acento y su atajo. */
:is(a, button).crm-lista-fila:focus-visible::before {
  opacity: 1;
}

:is(a, button).crm-lista-fila:active {
  background: var(--crm-panel-3);
}

.crm-lista-icono {
  display: grid;
  flex: none;
  place-items: center;
  width: 16px;
  height: 20px;
  color: var(--crm-muted);
  transition: color var(--crm-t-salida) linear;
}

.crm-lista-icono svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.6;
}

:is(a, button).crm-lista-fila:is(:hover, :focus-visible) .crm-lista-icono {
  color: var(--crm-text);
  transition-duration: 0ms;
}

.crm-lista-imagen {
  flex: none;
  width: 24px;
  height: 24px;
  border: 1px solid var(--crm-line-2);
  object-fit: cover;
}

.crm-lista-texto {
  display: flex;
  flex: 1;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}

.crm-lista-titulo {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--crm-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.005em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-lista-detalle {
  flex: 0 100 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-lista-meta {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

.crm-lista-atajo {
  display: inline-flex;
  flex: none;
  justify-content: flex-end;
  min-width: 20px;
  opacity: 0;
  transition: opacity var(--crm-t-salida) linear;
}

:is(a, button).crm-lista-fila:is(:hover, :focus-visible) .crm-lista-atajo {
  opacity: 1;
  transition-duration: 0ms;
}

/*
 * Estrecho (D22): la fila apila título, detalle y meta en vez de esconder el
 * detalle y apretar el título contra la meta. Cada línea con su elipsis; el
 * icono y el atajo, centrados en la altura de la fila.
 */
@container (max-width: 460px) {
  .crm-lista-fila {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 8px;
    row-gap: 0;
    height: auto;
    min-height: 44px;
    padding-block: 8px;
  }

  .crm-lista[data-densidad="compacta"] .crm-lista-fila {
    height: auto;
    min-height: 32px;
    padding-block: 6px;
  }

  .crm-lista-fila > :is(.crm-lista-icono, .crm-lista-imagen) {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .crm-lista-texto {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    grid-column: 2;
    grid-row: 1;
  }

  .crm-lista-titulo,
  .crm-lista-detalle {
    max-width: 100%;
  }

  .crm-lista-meta {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
  }

  .crm-lista-atajo {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
}

/* ── Tablero (kanban) ─────────────────────────────────────────────────── */
.crm-kanban {
  position: relative;
  display: grid;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
  line-height: 20px;
}

.crm-kanban-columnas {
  display: grid;
  grid-auto-columns: minmax(264px, 1fr);
  grid-auto-flow: column;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-color: var(--crm-line-2) transparent;
  scrollbar-width: thin;
}

.crm-kanban-columna {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 280px;
  padding: 0 12px;
  border-left: 1px solid var(--crm-line);
  scroll-snap-align: start;
  transition: background-color var(--crm-t-salida) linear;
}

.crm-kanban-columna:first-child {
  padding-left: 0;
  border-left: 0;
}

.crm-kanban-columna:last-child {
  padding-right: 0;
}

.crm-kanban-columna[data-destino] {
  background: var(--crm-panel);
  transition-duration: 0ms;
}

/* Cabecera de columna: 32, título en frase a 13/500 y el contador al lado. */
.crm-kanban-cabecera {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  margin: 0;
  border-bottom: 1px solid var(--crm-line-2);
  color: var(--crm-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.005em;
}

.crm-kanban-titulo {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-kanban-contador {
  color: var(--crm-muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

.crm-kanban-contador[data-excede] {
  color: var(--crm-aviso);
}

.crm-kanban-limite {
  color: var(--crm-dim);
}

.crm-kanban-lista {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
}

.crm-kanban-tarjeta {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--crm-line-2);
  background: var(--crm-panel);
  color: var(--crm-text);
  text-align: left;
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--crm-t-salida) linear,
    border-color var(--crm-t-salida) linear,
    box-shadow var(--crm-t-gesto) var(--crm-snap),
    translate var(--crm-t-gesto) var(--crm-snap);
}

.crm-kanban-tarjeta[draggable="true"] {
  cursor: grab;
}

.crm-kanban-tarjeta:hover {
  border-color: var(--crm-control);
  background: var(--crm-panel-2);
  transition-duration: 0ms, 0ms, var(--crm-t-gesto), var(--crm-t-gesto);
}

.crm-kanban-tarjeta:active:not([data-levantada]) {
  background: var(--crm-panel-3);
}

.crm-kanban-tarjeta:focus-visible {
  outline-offset: -1px;
}

.crm-kanban-tarjeta[data-levantada] {
  z-index: 2;
  border-color: var(--crm-acento-linea);
  background: var(--crm-panel-2);
  box-shadow: var(--crm-sombra-capa);
  translate: 0 -2px;
}

.crm-kanban-tarjeta[data-levantada]:focus-visible {
  border-color: var(--crm-acento);
  outline: 0;
}

.crm-kanban-tarjeta[data-arrastrada] {
  border-style: dashed;
  background: transparent;
  color: var(--crm-dim);
}

.crm-kanban-asa {
  position: absolute;
  top: 14px;
  right: 8px;
  width: 14px;
  height: 14px;
  color: var(--crm-dim);
  stroke-width: 1.5;
  opacity: 0;
  transition: opacity var(--crm-t-salida) linear;
}

.crm-kanban-tarjeta:is(:hover, :focus-visible, [data-levantada]) .crm-kanban-asa {
  opacity: 1;
  transition-duration: 0ms;
}

.crm-kanban-tarjeta[data-levantada] .crm-kanban-asa {
  color: var(--crm-acento);
}

.crm-kanban-tarjeta-titulo {
  padding-right: 20px;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.005em;
}

.crm-kanban-tarjeta-detalle {
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
}

.crm-kanban-tarjeta-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  min-height: 24px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--crm-line);
  font-size: 12px;
  line-height: 16px;
}

.crm-kanban-tarjeta-meta .crm-celda-persona-nombre {
  font-size: 12px;
}

.crm-kanban [data-hueco-antes]::before,
.crm-kanban-hueco {
  content: "";
  display: block;
  height: 2px;
  margin-bottom: 6px;
  background: var(--crm-acento);
}

.crm-kanban-vacia {
  margin: 8px 0;
  padding: 20px 12px;
  border: 1px dashed var(--crm-line-2);
  color: var(--crm-dim);
  font-size: 12px;
  line-height: 16px;
  text-align: center;
}

.crm-kanban-vacia[data-hueco-antes] {
  border-color: var(--crm-acento-linea);
}

.crm-kanban-vacia[data-hueco-antes]::before {
  display: none;
}

/* Guía de teclado: se ve con el foco dentro del tablero (reserva su alto: nada salta). */
.crm-kanban-guia {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  min-height: 24px;
  margin: 0;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
  opacity: 0;
  transition: opacity var(--crm-t-salida) linear;
}

.crm-kanban-guia > span {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.crm-kanban-guia .crm-tecla {
  margin-right: 2px;
}

.crm-kanban:focus-within .crm-kanban-guia,
.crm-kanban-guia[data-levantada] {
  opacity: 1;
  transition-duration: 0ms;
}

/* ── Agenda ────────────────────────────────────────────────────────────── */
.crm-agenda {
  display: grid;
  gap: 12px;
  min-width: 0;
  font-size: 13px;
  line-height: 20px;
  container-type: inline-size;
}

.crm-agenda-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 28px;
}

.crm-agenda-titulo {
  margin: 0;
  color: var(--crm-text);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -0.01em;
}

.crm-agenda-titulo::first-letter {
  text-transform: uppercase;
}

.crm-agenda-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.crm-agenda-mes {
  width: 100%;
  border-top: 1px solid var(--crm-line);
  border-left: 1px solid var(--crm-line);
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.crm-agenda-mes th {
  height: 32px;
  padding: 0 8px;
  border-right: 1px solid var(--crm-line);
  border-bottom: 1px solid var(--crm-line);
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
}

.crm-agenda-mes td {
  position: relative;
  height: 112px;
  padding: 4px 4px 8px;
  border-right: 1px solid var(--crm-line);
  border-bottom: 1px solid var(--crm-line);
  vertical-align: top;
}

.crm-agenda-mes td[data-hoy] {
  box-shadow: inset 0 2px 0 var(--crm-acento);
}

.crm-agenda-dia-num {
  display: inline-block;
  min-width: 20px;
  padding: 2px 4px;
  color: var(--crm-text-2);
  font-family: var(--crm-mono);
  font-size: 12px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

.crm-agenda-mes td[data-fuera] .crm-agenda-dia-num {
  color: var(--crm-dim);
}

.crm-agenda-mes td[data-hoy] .crm-agenda-dia-num {
  color: var(--crm-acento);
}

.crm-agenda-dia-eventos,
.crm-agenda-col-eventos {
  display: grid;
  gap: 2px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

/* Evento: 24 en el mes (objetivo táctil mínimo, WCAG 2.5.8), texto a 12. */
.crm-agenda-evento {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  min-height: 24px;
  margin: 0;
  padding: 4px 6px 4px 14px;
  overflow: hidden;
  border: 0;
  background: var(--crm-panel-2);
  color: var(--crm-text);
  font: inherit;
  font-size: 12px;
  line-height: 16px;
  text-align: left;
  white-space: nowrap;
  transition: box-shadow var(--crm-t-salida) linear;
}

.crm-agenda-evento::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 6px;
  width: 4px;
  height: 4px;
  background: var(--crm-dim);
}

button.crm-agenda-evento {
  cursor: pointer;
}

button.crm-agenda-evento:hover {
  box-shadow: inset 0 0 0 1px var(--crm-control);
  transition-duration: 0ms;
}

button.crm-agenda-evento:focus-visible {
  outline-offset: -1px;
}

.crm-agenda-evento[data-tono="acento"] {
  background: var(--crm-acento-suave);
}

.crm-agenda-evento[data-tono="acento"]::before {
  background: var(--crm-acento);
}

.crm-agenda-evento[data-tono="aviso"] {
  background: var(--crm-aviso-suave);
}

.crm-agenda-evento[data-tono="aviso"]::before {
  background: var(--crm-aviso);
}

.crm-agenda-evento[data-tono="error"] {
  background: var(--crm-error-suave);
}

.crm-agenda-evento[data-tono="error"]::before {
  background: var(--crm-error);
}

.crm-agenda-hora {
  flex: none;
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

.crm-agenda-evento-titulo {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crm-agenda-mas {
  height: 24px;
  padding: 0 6px;
  border: 0;
  background: transparent;
  color: var(--crm-muted);
  font: inherit;
  font-size: 12px;
  line-height: 16px;
  cursor: pointer;
  transition: color var(--crm-t-salida) linear;
}

.crm-agenda-mas:hover {
  color: var(--crm-text);
  transition-duration: 0ms;
}

.crm-agenda-puntos {
  display: none;
}

/* Semana: rejilla de horas, con una franja propia para lo que dura todo el día. */
.crm-agenda-semana {
  border-top: 1px solid var(--crm-line);
}

.crm-agenda-semana-cabecera,
.crm-agenda-semana-cuerpo,
.crm-agenda-todo-dia {
  display: grid;
  /* Columna de horas de 64: cabe «Todo el día» en una línea y la franja mide 32. */
  grid-template-columns: 64px repeat(7, minmax(0, 1fr));
}

.crm-agenda-semana-cabecera {
  border-bottom: 1px solid var(--crm-line);
}

.crm-agenda-semana-cabecera > span {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 8px;
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crm-agenda-semana-cabecera b {
  color: var(--crm-text-2);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.crm-agenda-semana-cabecera > span[data-hoy],
.crm-agenda-semana-cabecera > span[data-hoy] b {
  color: var(--crm-acento);
}

/* Franja de 32 (1 de filete incluido): un evento de 24 (OFICIO, objetivo táctil) centrado, con 3 de aire arriba y abajo. */
.crm-agenda-todo-dia {
  grid-auto-rows: minmax(31px, auto);
  border-bottom: 1px solid var(--crm-line-2);
}

.crm-agenda-todo-dia-rotulo {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 8px 0 0;
  color: var(--crm-dim);
  font-size: 11px;
  line-height: 16px;
  text-align: right;
  white-space: nowrap;
}

.crm-agenda-todo-dia-celda {
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
  margin: 0;
  padding: 2px;
  border-left: 1px solid var(--crm-line);
  list-style: none;
}

.crm-agenda-todo-dia-celda[data-hoy] {
  background: var(--crm-panel);
}

.crm-agenda-horas {
  display: grid;
  grid-auto-rows: var(--crm-agenda-alto-hora);
}

.crm-agenda-horas span {
  padding: 0 8px;
  color: var(--crm-dim);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  translate: 0 -8px;
}

.crm-agenda-horas span:first-child {
  translate: 0;
}

.crm-agenda-col {
  position: relative;
  height: calc(var(--crm-agenda-horas) * var(--crm-agenda-alto-hora));
  border-left: 1px solid var(--crm-line);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--crm-agenda-alto-hora) - 1px),
    var(--crm-line) calc(var(--crm-agenda-alto-hora) - 1px),
    var(--crm-line) var(--crm-agenda-alto-hora)
  );
}

.crm-agenda-col[data-hoy] {
  background-color: var(--crm-panel);
}

.crm-agenda-col-eventos {
  margin: 0;
}

.crm-agenda-bloque {
  position: absolute;
  z-index: 1;
  display: flex;
}

.crm-agenda-bloque > .crm-agenda-evento {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  height: 100%;
  padding-block: 4px;
  white-space: normal;
}

.crm-agenda-bloque > .crm-agenda-evento::before {
  top: 10px;
}

.crm-agenda-bloque > .crm-agenda-evento .crm-agenda-evento-titulo {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--crm-agenda-lineas, 2);
}

.crm-agenda-bloque[data-corto] > .crm-agenda-evento {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding-block: 0;
  white-space: nowrap;
}

.crm-agenda-bloque[data-corto] > .crm-agenda-evento::before {
  top: 50%;
  translate: 0 -50%;
}

.crm-agenda-bloque[data-corto] > .crm-agenda-evento .crm-agenda-evento-titulo {
  display: block;
  text-overflow: ellipsis;
}

.crm-agenda-ahora {
  position: absolute;
  z-index: 3;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--crm-acento);
  pointer-events: none;
}

.crm-agenda-ahora::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--crm-acento);
}

/* Semana en lista (pantallas estrechas). */
.crm-agenda-lista {
  display: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--crm-line);
  list-style: none;
}

.crm-agenda-lista > li {
  display: grid;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--crm-line);
}

.crm-agenda-lista-dia {
  margin: 0;
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crm-agenda-lista > li[data-hoy] .crm-agenda-lista-dia {
  color: var(--crm-acento);
}

.crm-agenda-lista ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crm-agenda-lista .crm-agenda-evento {
  min-height: 36px;
  font-size: 13px;
  line-height: 20px;
}

.crm-agenda-lista .crm-agenda-evento::before {
  top: 50%;
  translate: 0 -50%;
}

.crm-agenda-lista-vacio {
  margin: 0;
  color: var(--crm-dim);
  font-size: 13px;
  line-height: 20px;
}

@container (max-width: 640px) {
  .crm-agenda-mes th {
    padding: 0 2px;
    text-align: center;
  }

  .crm-agenda-mes td {
    height: 56px;
    padding: 4px 2px;
    text-align: center;
  }

  .crm-agenda-dia-eventos {
    display: none;
  }

  .crm-agenda-puntos {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 6px;
  }

  .crm-agenda-puntos > span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--crm-dim);
  }

  .crm-agenda-puntos > span[data-tono="acento"] {
    background: var(--crm-acento);
  }

  .crm-agenda-puntos > span[data-tono="aviso"] {
    background: var(--crm-aviso);
  }

  .crm-agenda-puntos > span[data-tono="error"] {
    background: var(--crm-error);
  }

  .crm-agenda-semana {
    display: none;
  }

  .crm-agenda-lista {
    display: block;
  }
}

/* ── Movimiento ────────────────────────────────────────────────────────── */
@keyframes crm-dato-filo {
  from {
    background-position: -40% 0;
  }
  to {
    background-position: 140% 0;
  }
}

/* Entrada de capa desde su ancla (abajo): opacidad, 4 px y escala .98. */
@keyframes crm-dato-entra {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.98);
  }
}

@keyframes crm-dato-latido {
  from {
    opacity: 0.6;
    scale: 1;
  }
  to {
    opacity: 0;
    scale: 2.6;
  }
}

@keyframes crm-dato-girar {
  to {
    rotate: 360deg;
  }
}

@keyframes crm-dato-corriente {
  to {
    background-position: 0 calc(100% + 60px);
  }
}

@keyframes crm-dato-funde {
  from {
    opacity: 0;
  }
}

/* ── Celda de dos líneas: título 13/18 a 500 y detalle 12/16 (mono o muted). 34 de alto: cabe en 36 y en 44. */
.crm-celda-doble {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  vertical-align: middle;
}

.crm-celda-doble-icono {
  display: grid;
  flex: none;
  color: var(--crm-muted);
}

.crm-celda-doble-icono svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.6;
}

.crm-celda-doble-texto {
  display: grid;
  min-width: 0;
}

.crm-celda-doble-titulo {
  overflow: hidden;
  color: var(--crm-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-celda-doble-detalle {
  overflow: hidden;
  color: var(--crm-muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-celda-doble[data-mono] .crm-celda-doble-detalle {
  font-family: var(--crm-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* Celda sin dato: «—» en dim, no un hueco. */
.crm-tabla-sin-dato {
  color: var(--crm-dim);
}

/*
 * Última columna: la acción de la fila (botones de 28 a la derecha) y el
 * chevrón de las filas que llevan a otro sitio. La acción aparece al pasar o
 * al enfocar la fila (0 ms al entrar, 120 al salir), como en Linear; en
 * pantallas táctiles, siempre.
 */
.crm-tabla-tabla .crm-tabla-fin {
  width: 1%;
  padding-right: 8px;
  padding-left: 8px;
  white-space: nowrap;
}

.crm-tabla-fin-cuerpo {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  vertical-align: middle;
}

.crm-tabla-acciones-fila {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition: opacity var(--crm-t-salida) linear;
}

/*
 * Modo interacción (F2): la fila con el foco en uno de sus controles se
 * queda en su escalón de hover (un solo indicador de foco: el anillo del
 * control) y sus acciones a la vista. Elegida o activa conserva su marca.
 */
.crm-tabla-fila[data-interactuando]:not([data-elegida], [data-activa]) {
  --crm-tabla-fila: var(--crm-panel-2);
}

.crm-tabla-fila:is(:hover, :focus-visible, :focus-within, [data-elegida], [data-activa]) .crm-tabla-acciones-fila {
  opacity: 1;
  transition-duration: 0ms;
}

@media (hover: none) {
  .crm-tabla-acciones-fila {
    opacity: 1;
  }
}

.crm-tabla-chevron {
  width: 14px;
  height: 14px;
  color: var(--crm-dim);
  stroke-width: 1.5;
  transition:
    color var(--crm-t-salida) linear,
    transform var(--crm-t-gesto) var(--crm-snap);
}

.crm-tabla-fila[data-navega]:is(:hover, :focus-visible) .crm-tabla-chevron {
  color: var(--crm-text);
  transform: translateX(2px);
  transition-duration: 0ms, var(--crm-t-gesto);
}

/* Variante expandible: chevrón de 24 en la primera columna, que gira 90° al abrir. */
.crm-tabla-tabla .crm-tabla-expandir {
  width: 32px;
  min-width: 32px;
  padding: 0 0 0 4px;
}

.crm-tabla-tabla .crm-tabla-expandir + :is(td, th) {
  padding-left: 4px;
}

.crm-tabla-expandir-boton {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--crm-muted);
  cursor: pointer;
}

.crm-tabla-expandir-boton svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.5;
  transition: transform var(--crm-t-gesto) var(--crm-snap);
}

.crm-tabla-fila[data-abierta] .crm-tabla-expandir-boton svg {
  transform: rotate(90deg);
}

@media (hover: hover) {
  .crm-tabla-expandir-boton:hover {
    background: var(--crm-panel-3);
    color: var(--crm-text);
  }
}

.crm-tabla-detalle > td {
  padding: 0;
  border-bottom: 1px solid var(--crm-line);
  background: var(--crm-tabla-fondo);
  white-space: normal;
}

.crm-tabla-detalle-cuerpo {
  padding: 12px 16px 16px 40px;
  box-shadow: inset 2px 0 0 var(--crm-line-2);
  color: var(--crm-text-2);
  font-size: 13px;
  line-height: 20px;
}

.crm-tabla-fila[data-abierta] > :is(td, th) {
  border-bottom-color: transparent;
}

/* Pie contable: la fila de sumas, pegada abajo, con filete line-2, a 500 y con cifras tabulares. */
.crm-tabla-pie-contable td {
  position: sticky;
  z-index: 2;
  bottom: 0;
  height: var(--crm-tabla-alto, 36px);
  padding: 0 12px;
  border-top: 1px solid var(--crm-line-2);
  background: var(--crm-tabla-fondo);
  color: var(--crm-text);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/*
 * El pie de una columna fija lleva `data-fija` como su columna: se pega al
 * desplazar en horizontal y, como en la cabecera, va por encima del resto
 * del pie que pasa por debajo (`[data-fija]` lo dejaba en 1).
 */
.crm-tabla-pie-contable td[data-fija] {
  z-index: 3;
}

/*
 * Varias filas contables (subtotal, impuestos, total): el filete line-2 solo
 * sobre la primera, solo la última se queda pegada abajo y las que no cierran
 * van a 400 en el color de cuerpo; la destacada (el total) a 500.
 */
.crm-tabla-pie-contable tr + tr td {
  border-top: 0;
}

.crm-tabla-pie-contable tr:not(:last-child) td {
  position: static;
}

/*
 * Fila de pie libre (`filaPieLibre`): una celda a todo el ancho, en cuerpo,
 * que envuelve. No se pega abajo: la última contable conserva su sitio fijo.
 */
.crm-tabla-pie-contable tr:has(+ .crm-tabla-pie-libre:last-child) td {
  position: sticky;
}

.crm-tabla-pie-contable .crm-tabla-pie-libre td {
  position: static;
  height: auto;
  padding: 8px 12px;
  border-top: 1px solid var(--crm-line);
  color: var(--crm-text-2);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  white-space: normal;
}

.crm-tabla-pie-contable tr:not([data-destacada]) td {
  color: var(--crm-text-2);
  font-weight: 400;
}

/* «Total» en frase normal: la mayúscula de la tabla es solo su cabecera. */
.crm-tabla-pie-rotulo {
  color: var(--crm-muted);
  font-weight: 500;
}

/* «Orden: …» en la barra, con su botón de dar la vuelta pegado. */
.crm-tabla-orden-barra {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .crm-celda-estado[data-tono="vivo"] .crm-celda-estado-punto::after,
  .crm-kpi-vivo::after,
  .crm-linea-carril[data-vivo]::after,
  .crm-linea-evento[data-estado="trabajando"] .crm-linea-nodo::after {
    animation: none;
  }

  .crm-tabla-caja[data-ocupada]::before,
  .crm-celda-estado[data-tono="vivo"] .crm-celda-estado-punto::after,
  .crm-kpi-vivo::after,
  .crm-linea-carril[data-vivo]::after {
    display: none;
  }

  .crm-tabla-lote {
    animation-name: crm-dato-funde;
  }

  .crm-kanban-tarjeta[data-levantada],
  .crm-tabla-lote-cerrar:active {
    transform: none;
    translate: none;
  }

  .crm-tabla-grupo-flecha,
  .crm-dato-casilla::before,
  .crm-tabla-expandir-boton svg {
    transition: none;
  }

  .crm-tabla-fila[data-navega]:is(:hover, :focus-visible) .crm-tabla-chevron {
    transform: none;
  }
}

/* ── Elevación P1: copiar, cifras que llevan, ficha plegable, tiempo vivo ── */

/*
 * Copiable: el valor es el botón (cursor de copiar). El icono de 12 asoma al
 * pasar o enfocar y, al copiar, pasa a ✓ en verde (hecho) durante 1,6 s.
 */
.crm-copiable {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  cursor: copy;
}

.crm-copiable-texto {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--crm-t-salida) linear;
}

.crm-copiable-icono {
  display: inline-grid;
  flex: none;
  place-items: center;
  color: var(--crm-muted);
  opacity: 0;
  transition: opacity var(--crm-t-salida) linear;
}

.crm-copiable-icono svg {
  width: 12px;
  height: 12px;
  stroke-width: 1.5;
}

.crm-copiable:is(:hover, :focus-visible) .crm-copiable-texto {
  color: var(--crm-text);
  transition-duration: 0ms;
}

.crm-copiable:is(:hover, :focus-visible, [data-copiado]) .crm-copiable-icono,
.crm-tabla-fila:focus-visible .crm-copiable-icono {
  opacity: 1;
  transition-duration: 0ms;
}

.crm-copiable[data-copiado] .crm-copiable-icono {
  color: var(--crm-acento);
}

.crm-copiable:focus-visible {
  outline: var(--crm-foco-ancho) solid var(--crm-acento);
  outline-offset: 2px;
}

/* Solo icono: botón cuadrado de 24 con icono de 14 (control xs). */
.crm-copiable[data-solo-icono] {
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--crm-muted);
  cursor: pointer;
  transition: background-color var(--crm-t-salida) linear;
}

.crm-copiable[data-solo-icono] .crm-copiable-icono svg {
  width: 14px;
  height: 14px;
}

.crm-copiable[data-solo-icono]:active {
  transform: scale(0.96);
  transition: transform var(--crm-t-pulsar) var(--crm-snap);
}

@media (hover: hover) {
  .crm-copiable[data-solo-icono]:hover {
    background: var(--crm-panel-2);
    transition-duration: 0ms;
  }

  .crm-copiable[data-solo-icono]:hover .crm-copiable-icono {
    color: var(--crm-text);
  }
}

/* Par rótulo/valor con copiar: el botón de 24 al final, centrado en el par de 32, sin estirarlo. */
.crm-lista-desc-par[data-copiable] {
  position: relative;
}

.crm-lista-desc-par[data-copiable] dd {
  padding-right: 32px;
}

.crm-lista-desc-copiar {
  position: absolute;
  top: 4px;
  right: 0;
}

.crm-lista-desc-par:is(:hover, :focus-within) .crm-copiable-icono {
  opacity: 1;
  transition-duration: 0ms;
}

@media (hover: none) {
  .crm-lista-desc-copiar .crm-copiable-icono {
    opacity: 1;
  }
}

/* Cifra que lleva a su listado: toda la caja es el enlace y la flecha de 14 avanza 2 px al pasar. */
.crm-kpi[data-enlace] {
  position: relative;
  transition: background-color var(--crm-t-salida) linear;
}

.crm-kpi[data-enlace] .crm-kpi-rotulo {
  padding-right: 24px;
}

.crm-kpi-enlace {
  position: absolute;
  z-index: 1;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--crm-muted);
  cursor: pointer;
}

.crm-kpi-enlace:focus-visible {
  outline: var(--crm-foco-ancho) solid var(--crm-acento);
  outline-offset: -1px;
}

.crm-kpi-ir {
  position: absolute;
  top: 21px;
  right: 20px;
  width: 14px;
  height: 14px;
  stroke-width: 1.5;
  transition:
    transform var(--crm-t-gesto) var(--crm-snap),
    color var(--crm-t-color) linear;
}

.crm-grupo-kpi[data-variante="compacta"] .crm-kpi-ir {
  top: 17px;
  right: 16px;
}

.crm-kpi-enlace:focus-visible .crm-kpi-ir {
  color: var(--crm-text);
  transform: translateX(2px);
}

@media (hover: hover) {
  .crm-kpi[data-enlace]:hover {
    background: var(--crm-panel-2);
    transition-duration: 0ms;
  }

  .crm-kpi[data-enlace]:hover .crm-kpi-ir {
    color: var(--crm-text);
    transform: translateX(2px);
  }
}

/*
 * Cifra que es también un filtro (`presionado` con `alAbrir`): el botón de la
 * caja es un conmutador. En lugar de la flecha que avanza (navegar), el glifo
 * de filtro de 14 que no se desliza. Presionada: panel 3 y la marca de acento
 * de 2 a la izquierda, como lo elegido en una lista (no solo color: la marca
 * es forma), el glifo en acento y el panel se queda al pasar. Dentro del
 * grupo conserva sus filetes.
 */
.crm-kpi[data-presionado] {
  background: var(--crm-panel-3);
  box-shadow: inset 2px 0 0 var(--crm-acento);
}

.crm-grupo-kpi > .crm-kpi[data-presionado] {
  box-shadow:
    inset 2px 0 0 var(--crm-acento),
    -1px 0 0 var(--crm-line),
    0 -1px 0 var(--crm-line);
}

.crm-kpi[data-presionado] .crm-kpi-ir {
  color: var(--crm-acento);
}

.crm-kpi[data-conmutador] .crm-kpi-enlace:focus-visible .crm-kpi-ir {
  transform: none;
}

@media (hover: hover) {
  .crm-kpi[data-conmutador]:hover .crm-kpi-ir {
    transform: none;
  }

  .crm-kpi[data-presionado]:hover {
    background: var(--crm-panel-3);
  }

  .crm-kpi[data-presionado]:hover .crm-kpi-ir {
    color: var(--crm-acento);
  }
}

/* Sección de ficha plegable: el rótulo es el botón, con su chevrón de 14 que gira. */
.crm-ficha-seccion-plegar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  margin: 0 0 0 -4px;
  padding: 0 4px;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition: color var(--crm-t-salida) linear;
}

.crm-ficha-seccion-plegar:hover {
  color: var(--crm-text);
  transition-duration: 0ms;
}

.crm-ficha-seccion-plegar:focus-visible {
  outline: var(--crm-foco-ancho) solid var(--crm-acento);
  outline-offset: 0;
}

.crm-ficha-seccion-flecha {
  width: 14px;
  height: 14px;
  stroke-width: 1.5;
  transition: transform var(--crm-t-gesto) var(--crm-snap);
}

.crm-ficha-seccion-plegar[aria-expanded="true"] .crm-ficha-seccion-flecha {
  transform: rotate(90deg);
}

.crm-ficha-seccion-resumen {
  margin-right: auto;
  color: var(--crm-dim);
  font-size: 12px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

/* Línea de tiempo: el rótulo del día se queda pegado arriba al desplazar (mismo hueco: 4 + 16 + 4 con −4 y 8 de margen). */
.crm-linea-dia-rotulo {
  position: sticky;
  z-index: 2;
  top: var(--crm-linea-pegajosa, 0px);
  margin: -4px 0 8px;
  padding: 4px 0;
  background: var(--crm-linea-fondo);
}

/* Lista numerada: la cifra en dim a la vista; al pasar o enfocar, la cifra cede el sitio a ↵ (mismo ancho). */
.crm-lista-atajo[data-cifra] {
  opacity: 1;
}

.crm-lista-atajo .crm-lista-cifra {
  color: var(--crm-dim);
}

.crm-lista-atajo[data-cifra] .crm-lista-intro,
:is(a, button).crm-lista-fila:is(:hover, :focus-visible) .crm-lista-atajo[data-cifra] .crm-lista-cifra {
  display: none;
}

:is(a, button).crm-lista-fila:is(:hover, :focus-visible) .crm-lista-atajo[data-cifra] .crm-lista-intro {
  display: inline-grid;
}

/* Kanban: la carga de la columna frente a su límite, en el filete de la cabecera (ámbar si se pasa). */
.crm-kanban-cabecera {
  position: relative;
}

.crm-kanban-carga {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  pointer-events: none;
}

.crm-kanban-carga > span {
  display: block;
  height: 100%;
  background: var(--crm-text-2);
  transition: inline-size var(--crm-t-gesto) var(--crm-snap);
}

.crm-kanban-carga[data-excede] > span {
  background: var(--crm-aviso);
}

.crm-kanban-contador[data-previo] {
  color: var(--crm-text);
}

.crm-kanban-contador[data-previo][data-excede] {
  color: var(--crm-aviso);
}

/* Agenda: la hora de «ahora» en la columna de horas, en verde (lo vivo), y la línea baja con el minuto. */
.crm-agenda-horas {
  position: relative;
}

.crm-agenda-horas span[data-tapada] {
  visibility: hidden;
}

.crm-agenda-ahora-hora {
  position: absolute;
  right: 0;
  left: 0;
  padding: 0 8px;
  color: var(--crm-acento);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  translate: 0 -8px;
  transition: top var(--crm-t-gesto) var(--crm-snap);
}

.crm-agenda-ahora {
  transition: top var(--crm-t-gesto) var(--crm-snap);
}

/* Vacío que espera: guarda su sitio sin dejarse ver (sin destello de vacío). */
.crm-dato-vacio-marco[data-esperando] {
  visibility: hidden;
}

/* La acción que disparó un atajo se ve pulsada un instante (160 ms). */
:is(.crm-dato-accion, .crm-tabla-pie .crm-boton)[data-crm-pulsado] {
  background: var(--crm-panel-3);
  color: var(--crm-text);
  transform: translateY(0.5px);
}

:is(.crm-dato-accion, .crm-tabla-pie .crm-boton)[data-crm-pulsado] .crm-tecla {
  border-color: var(--crm-control);
  box-shadow: none;
  color: var(--crm-text);
}

@media (prefers-reduced-motion: reduce) {
  .crm-kpi-ir,
  .crm-ficha-seccion-flecha,
  .crm-kanban-carga > span,
  .crm-agenda-ahora,
  .crm-agenda-ahora-hora {
    transition: none;
  }

  .crm-kpi[data-enlace]:hover .crm-kpi-ir,
  .crm-kpi-enlace:focus-visible .crm-kpi-ir,
  .crm-copiable[data-solo-icono]:active,
  :is(.crm-dato-accion, .crm-tabla-pie .crm-boton)[data-crm-pulsado] {
    transform: none;
  }
}

/* ── Dato con procedencia ───────────────────────────────────────────── */
/*
 * La cifra es un botón que no se nota: hereda letra, tamaño, peso, cifras
 * tabulares y color de donde se pone (KPI, línea de texto, celda). En reposo,
 * ninguna marca (nada de punteados en tablas de cientos de cifras). Al pasar,
 * un filete fino de control bajo la cifra, al instante; abierta, el filete
 * pasa a verde (lo que está activo). El foco, el anillo de control.
 */
.crm-dato-procedencia {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-variant-numeric: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-align: inherit;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-transform: inherit;
  text-underline-offset: 4px;
  cursor: help;
  transition: text-decoration-color var(--crm-t-color) var(--crm-snap);
}

.crm-dato-procedencia:hover,
.crm-dato-procedencia[data-crm-forzar="hover"] {
  text-decoration-color: var(--crm-control);
  transition-duration: 0ms;
}

.crm-dato-procedencia[data-abierta] {
  text-decoration-color: var(--crm-acento);
}

.crm-dato-procedencia:focus-visible,
.crm-dato-procedencia[data-crm-forzar="foco"] {
  outline: var(--crm-foco-ancho) solid var(--crm-acento);
  outline-offset: 2px;
}

/* En un Kpi que es enlace, la cifra responde por encima del área del enlace. */
.crm-kpi[data-enlace] .crm-dato-procedencia {
  position: relative;
  z-index: 2;
}

/* La capa: nivel 1 (FUNDAMENTOS §6), 360 de ancho y nunca más que la pantalla menos 24. */
.crm-procedencia {
  z-index: 60;
  box-sizing: border-box;
  width: min(360px, calc(100vw - 24px));
  max-height: min(var(--radix-popover-content-available-height, 70vh), 480px);
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--crm-line-2);
  background: var(--crm-panel-2);
  color: var(--crm-text-2);
  font-family: var(--crm-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 20px;
  text-align: start;
  text-transform: none;
  box-shadow: var(--crm-sombra-capa);
  outline: none;
  transform-origin: var(--radix-popover-content-transform-origin);
  user-select: text;
}

.crm-procedencia[data-state="open"][data-side="top"] {
  animation: crm-es-desde-abajo var(--crm-t-entrada) var(--crm-snap);
}

.crm-procedencia[data-state="open"][data-side="bottom"] {
  animation: crm-es-desde-arriba var(--crm-t-entrada) var(--crm-snap);
}

.crm-procedencia[data-state="closed"] {
  animation: crm-es-apaga var(--crm-t-salida) var(--crm-snap) forwards;
}

.crm-procedencia-tarjeta {
  display: grid;
  min-width: 0;
}

/* Cabecera: qué cifra es y su clase, a 16 de los lados y 12 arriba y abajo. */
/*
 * Una sola columna: el título usa todo el ancho de la capa (nunca encogido al
 * lado de la clase, que con un nombre largo lo dejaba en siete líneas) y la
 * clase va debajo de la cifra, a su ancho, con elipsis recuperable.
 */
.crm-procedencia-cabecera {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: 8px;
  padding: 12px 16px;
}

.crm-procedencia-cabecera > * {
  max-width: 100%;
}

/* Los textos ocupan toda su pista (el título corto o largo dispone del ancho interior entero); la clase, a su medida. */
.crm-procedencia-textos {
  display: grid;
  justify-self: stretch;
  gap: 2px;
  min-width: 0;
}

.crm-procedencia-titulo {
  margin: 0;
  color: var(--crm-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.crm-procedencia-valor {
  margin: 0;
  color: var(--crm-text);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 22px;
  overflow-wrap: anywhere;
}

/* Clase: chip de 20, Geist 12 en frase, con su punto de 6. Verde solo lo medido (un hecho). */
.crm-procedencia-clase {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  height: 20px;
  padding: 0 6px;
  border: 1px solid var(--crm-line-2);
  color: var(--crm-text-2);
  font-size: 12px;
  line-height: 16px;
}

/* La elipsis va en el texto (un elemento): en el nodo de texto suelto de un inline-flex no se pinta. */
.crm-procedencia-clase-texto {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-procedencia-clase[data-cortado] {
  cursor: help;
}

.crm-procedencia-clase[data-cortado]:focus-visible {
  outline: var(--crm-foco-ancho) solid var(--crm-acento);
  outline-offset: 2px;
}

.crm-procedencia-punto {
  flex: none;
  box-sizing: border-box;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--crm-muted);
}

.crm-procedencia-clase[data-clase="medido"] .crm-procedencia-punto {
  background: var(--crm-acento);
}

.crm-procedencia-clase[data-clase="estimado"] .crm-procedencia-punto {
  background: var(--crm-aviso);
}

/* Propuesto: el punto hueco (aún no es un hecho). */
.crm-procedencia-clase[data-clase="propuesto"] .crm-procedencia-punto {
  border: 1px solid var(--crm-text-2);
  background: transparent;
}

.crm-procedencia-resumen {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--crm-text-2);
  font-size: 13px;
  line-height: 20px;
  text-wrap: pretty;
}

/* Secciones: filete arriba, rótulo mono de 11 (la única mayúscula del bloque) a 8 de su contenido. */
.crm-procedencia-seccion {
  display: grid;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--crm-line);
}

.crm-procedencia-rotulo {
  margin: 0;
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  line-height: 16px;
  text-transform: uppercase;
}

.crm-procedencia-origenes {
  display: grid;
  gap: 8px;
  margin: 0;
}

/* Cada origen: su clase en una columna de 88 y lo citable al lado, con su contexto debajo. */
.crm-procedencia-origen {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 12px;
}

.crm-procedencia-origen dt {
  min-width: 0;
  overflow: hidden;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-procedencia-origen dd {
  display: grid;
  min-width: 0;
  margin: 0;
}

.crm-procedencia-cita {
  color: var(--crm-text);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  line-height: 20px;
  overflow-wrap: anywhere;
}

.crm-procedencia-cita[data-referencia] {
  font-family: var(--crm-mono);
  font-size: 12px;
}

.crm-procedencia-detalle {
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
  overflow-wrap: anywhere;
}

.crm-procedencia-calculo {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  color: var(--crm-text-2);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  line-height: 20px;
  list-style: none;
  overflow-wrap: anywhere;
}

/* Pie de 40 con la acción de 24 a la derecha. */
.crm-procedencia-pie {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
  height: 40px;
  padding: 0 8px;
  border-top: 1px solid var(--crm-line);
}

.crm-procedencia-pie .crm-boton[data-copiado] svg {
  color: var(--crm-acento);
}

.crm-procedencia-nada,
.crm-procedencia-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 12px 16px;
  color: var(--crm-muted);
  font-size: 13px;
  line-height: 20px;
}

.crm-procedencia-error {
  color: var(--crm-text-2);
}

.crm-procedencia-error svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--crm-error);
  stroke-width: 1.6;
}

.crm-procedencia-espera {
  display: grid;
  gap: 8px;
  padding: 12px 16px;
}

@media (forced-colors: active) {
  .crm-dato-procedencia:hover,
  .crm-dato-procedencia[data-abierta] {
    text-decoration-color: Highlight;
  }

  .crm-procedencia-punto {
    background: CanvasText;
  }
}

/*
 * Tabla estrecha (FUNDAMENTOS §15, por el ancho de la tabla): la columna
 * principal no baja de 160 y las secundarias se ocultan por su `prioridad`
 * (2 a menos de 400, 3 a menos de 560, 4 a menos de 720) antes de aplastarla.
 */
.crm-tabla-tabla :is(th, td)[data-principal] {
  min-width: 160px;
}

/* La principal con `ancho` lo pide por variable: el suyo en ancho; en estrecho, puede ceder (abajo). */
.crm-tabla-tabla :is(th, td)[data-principal][data-cede] {
  width: var(--crm-col-ancho);
  min-width: var(--crm-col-ancho);
}

/*
 * §14 en ancho: una celda de texto no ensancha su columna hasta sacar de la
 * vista las que deciden (un cliente de 150 caracteres escondía el estado y el
 * vencimiento a 1440 y a 1024).
 *  · Con tope (`ancho` o fija, nunca cifra ni extendida: `data-tope`, lo pone
 *    la Tabla), no pasa de su `ancho` y acaba en «…». Antes `ancho` solo era
 *    `width` y `min-width`: un texto más largo ensanchaba la columna igual.
 *  · La principal de texto sin `ancho` ni fija se queda con el ancho que
 *    dejan las demás (nunca menos de 160) y acaba en «…», como en estrecho
 *    (D33). Una principal cifra no: nunca se corta, conserva su ancho.
 * No es `table-layout: fixed`: las cifras, los estados y las demás columnas
 * conservan su ancho de contenido, enteros. Lo cortado se lee entero en el
 * consejo de la celda (ConsultaCompacta en tabla.tsx). En estrecho y en el
 * resumen mandan sus reglas, que vienen después o pesan más.
 */
.crm-tabla-tabla tbody td[data-tope] {
  max-width: var(--crm-col-ancho);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* `dosLineas` informativa con tope: cada una de sus dos líneas con su «…». */
.crm-tabla-tabla tbody td[data-tope][data-crm-dos-lineas=""] > * {
  overflow: hidden;
  text-overflow: ellipsis;
}

.crm-tabla-tabla tbody .crm-tabla-fila > td[data-principal]:not([data-cede], [data-fija], [data-cifra], [data-crm-dos-lineas="extendida"]) {
  width: 100%;
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

@container crm-tabla (max-width: 719.98px) {
  .crm-tabla-tabla :is(th, td)[data-prioridad="4"] {
    display: none;
  }

  /*
   * Si todos los grupos de la cabecera se han ocultado con sus columnas, la
   * fila de grupos se va y los rótulos suben a 0. `data-grupos-prioridad` lo
   * pone la Tabla: la prioridad del grupo que más aguanta (sin atributo si
   * alguno se ve siempre). Selectores simples: nada de :has dentro de :has,
   * que la norma prohíbe y el navegador descarta entero.
   */
  .crm-tabla-tabla thead[data-grupos-prioridad="4"] > .crm-tabla-grupos {
    display: none;
  }

  .crm-tabla-tabla thead[data-grupos-prioridad="4"] > tr:not(.crm-tabla-grupos) > th {
    top: 0;
  }
}

@container crm-tabla (max-width: 559.98px) {
  .crm-tabla-tabla :is(th, td)[data-prioridad="3"] {
    display: none;
  }

  .crm-tabla-tabla thead:is([data-grupos-prioridad="4"], [data-grupos-prioridad="3"]) > .crm-tabla-grupos {
    display: none;
  }

  .crm-tabla-tabla thead:is([data-grupos-prioridad="4"], [data-grupos-prioridad="3"]) > tr:not(.crm-tabla-grupos) > th {
    top: 0;
  }

  /*
   * D33 · En estrecho, la principal se queda con el ancho que dejan las
   * demás (nunca menos de 160) y lo que no cabe acaba en «…» (título,
   * detalle y meta del CeldaDoble, o el texto suelto), en vez de empujar la
   * tabla fuera de la tarjeta. `max-width: 0` + `width: 100%` es lo que
   * hace que una celda de tabla automática ceda en vez de crecer.
   */
  .crm-tabla-tabla tbody td[data-principal] {
    width: 100%;
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /*
   * Lo que solo oye el lector dentro de la meta («Producto: ») va en absoluto:
   * sin un bloque contenedor en la celda, su caja es la de la tabla, el
   * `overflow` de la celda no la recorta y la caja desplaza (27 px en
   * compacta). La principal es su bloque contenedor; la fija ya lo era.
   */
  .crm-tabla-tabla tbody td[data-principal]:not([data-fija]) {
    position: relative;
  }

  /*
   * El `ancho` de la principal es su preferencia, no un suelo: cede hasta 160
   * para que la cifra de la última columna (el total de la matriz, con su
   * unidad) quepa entera en vez de quedar bajo el fundido del borde.
   */
  .crm-tabla-tabla :is(th, td)[data-principal][data-cede] {
    min-width: min(var(--crm-col-ancho), 160px);
  }

  .crm-tabla-tabla thead th[data-principal][data-cede] {
    width: auto;
  }

  .crm-tabla-tabla tbody td[data-principal][data-cede] {
    width: 100%;
    max-width: 0;
  }

  /* El rótulo del pie («Coste estimado a 0,12 €/kWh») tampoco sostiene la columna: envuelve, entero, y la fila crece. */
  .crm-tabla-pie-contable tr:not(.crm-tabla-pie-libre) > td[data-principal] {
    white-space: normal;
  }
}

@container crm-tabla (max-width: 399.98px) {
  .crm-tabla-tabla :is(th, td)[data-prioridad="2"] {
    display: none;
  }

  .crm-tabla-tabla thead[data-grupos-prioridad] > .crm-tabla-grupos {
    display: none;
  }

  .crm-tabla-tabla thead[data-grupos-prioridad] > tr:not(.crm-tabla-grupos) > th {
    top: 0;
  }
}

/*
 * P1-T1 · Prioridad medida (`data-prioridad-oculta`, la decide la Tabla en
 * ancho, 560 o más propios): si con los cortes de contenedor la tabla aún no
 * cabe en su caja, se van las de prioridad 4; luego, también las de 3; por
 * último, las de 2. Nunca el estado de lista ni una fija: el estado y lo que
 * no tiene prioridad (cifras, totales) siguen a la vista y enteros. Los
 * grupos de la cabecera se van con sus columnas, como en los cortes.
 */
.crm-tabla-tabla[data-prioridad-oculta="4"] :is(th, td)[data-prioridad="4"]:not([data-en-lista="estado"], [data-fija]),
.crm-tabla-tabla[data-prioridad-oculta="3"] :is(th, td):is([data-prioridad="4"], [data-prioridad="3"]):not([data-en-lista="estado"], [data-fija]),
.crm-tabla-tabla[data-prioridad-oculta="2"] :is(th, td)[data-prioridad]:not([data-en-lista="estado"], [data-fija]) {
  display: none;
}

.crm-tabla-tabla[data-prioridad-oculta="4"] thead[data-grupos-prioridad="4"] > .crm-tabla-grupos,
.crm-tabla-tabla[data-prioridad-oculta="3"] thead:is([data-grupos-prioridad="4"], [data-grupos-prioridad="3"]) > .crm-tabla-grupos,
.crm-tabla-tabla[data-prioridad-oculta="2"] thead[data-grupos-prioridad] > .crm-tabla-grupos {
  display: none;
}

.crm-tabla-tabla[data-prioridad-oculta="4"] thead[data-grupos-prioridad="4"] > tr:not(.crm-tabla-grupos) > th,
.crm-tabla-tabla[data-prioridad-oculta="3"] thead:is([data-grupos-prioridad="4"], [data-grupos-prioridad="3"]) > tr:not(.crm-tabla-grupos) > th,
.crm-tabla-tabla[data-prioridad-oculta="2"] thead[data-grupos-prioridad] > tr:not(.crm-tabla-grupos) > th {
  top: 0;
}

/*
 * Modo lista (FUNDAMENTOS §15, Tabla a menos de 560 de ancho propio): la
 * principal es el título; las dos secundarias de mayor prioridad que su
 * prioridad oculta suben como meta (12/16 en muted, «·» entre ellas, una línea
 * con «…»: el dato entero sigue en la vista ancha); la columna con
 * `enLista: "estado"` se queda a la derecha. Las columnas sin prioridad
 * (cifras, totales) siguen en su columna, enteras: sus cabeceras envuelven en
 * dos líneas de 15 dentro de los 32 en vez de empujar la tabla a desplazarse.
 *
 * Ritmo (§2: «fila de tabla y de lista, 36; compacta 32; cómoda 44»): la meta
 * cabe DENTRO del alto de la densidad, nunca lo estira. La principal ocupa
 * como mucho dos líneas, 18 + 16 = 34, el bloque del CeldaDoble, más el filete
 * (1, dentro de la medida, §1): con un título suelto, la meta es su segunda
 * línea; con un CeldaDoble, va en la línea de su detalle («detalle · meta»),
 * cada uno con su «…». Una meta sin nada que enseñar en el tramo no ocupa línea.
 */
.crm-tabla-meta-lista {
  display: none;
}

.crm-tabla-principal-lista {
  display: contents;
}

@container crm-tabla (max-width: 559.98px) {
  .crm-tabla-meta-lista {
    display: block;
    overflow: hidden;
    color: var(--crm-muted);
    font-size: 12px;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .crm-tabla-meta-lista > span {
    display: none;
  }

  .crm-tabla-meta-lista > span[data-medio] {
    display: inline;
  }

  .crm-tabla-meta-lista > span[data-medio] ~ span[data-medio]::before {
    content: " · ";
  }

  /* Sin nada que enseñar en este tramo, la meta no ocupa su línea. */
  .crm-tabla-meta-lista:not(:has(> span[data-medio])) {
    display: none;
  }

  /*
   * Título suelto con meta: las dos líneas de un CeldaDoble (18 arriba, la meta
   * de 16 debajo), alineadas arriba como las filas de dos líneas (D43). La fila
   * conserva su alto de densidad.
   */
  .crm-tabla-tabla tbody .crm-tabla-fila:has(> :is(td, th) > .crm-tabla-principal-lista > .crm-tabla-meta-lista > span[data-medio]) > :is(td, th) {
    padding-top: max(0px, calc((var(--crm-tabla-alto, 36px) - 36px) / 2));
    line-height: 18px;
    vertical-align: top;
  }

  /*
   * Con un CeldaDoble con detalle, lleve icono o no: una rejilla de dos líneas
   * dentro de la fila (18 + 16 = 34 y el filete: 36, §2). Columnas: el icono
   * (`auto`: 0 si no hay), el detalle a su ancho y la meta en lo que queda.
   * El título arriba, de la columna del texto al final; abajo, el detalle y
   * «· meta», cada uno con su «…». El icono (Avatar de 24 o icono de 16, el
   * tamaño lo pone su pieza) ocupa las dos líneas, centrado, con 8 de aire,
   * como en la vista ancha. El CeldaDoble se desarma solo aquí (display:
   * contents): sus piezas, su copiable y su texto no cambian. Antes la regla
   * excluía el icono (`:not(:has(.crm-celda-doble-icono))`) y la meta caía a
   * una tercera línea: 18 + 16 + 16 + 1 = 51.
   */
  .crm-tabla-principal-lista:has(> .crm-celda-doble .crm-celda-doble-detalle) {
    display: grid;
    grid-template-columns: auto minmax(0, max-content) minmax(3em, 1fr);
    min-width: 0;
  }

  .crm-tabla-principal-lista:has(> .crm-celda-doble .crm-celda-doble-detalle) :is(.crm-celda-doble, .crm-celda-doble-texto) {
    display: contents;
  }

  .crm-tabla-principal-lista:has(> .crm-celda-doble .crm-celda-doble-detalle) .crm-celda-doble-icono {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    margin-right: 8px;
  }

  .crm-tabla-principal-lista:has(> .crm-celda-doble .crm-celda-doble-detalle) .crm-celda-doble-titulo {
    grid-column: 2 / -1;
    grid-row: 1;
  }

  .crm-tabla-principal-lista:has(> .crm-celda-doble .crm-celda-doble-detalle) .crm-celda-doble-detalle {
    grid-column: 2;
    grid-row: 2;
  }

  .crm-tabla-principal-lista:has(> .crm-celda-doble .crm-celda-doble-detalle) > .crm-tabla-meta-lista {
    grid-column: 3;
    grid-row: 2;
  }

  /* La meta empieza su caja de rejilla: un espacio normal al principio se colapsa («…AB· Renueva»); el duro, no. */
  .crm-tabla-principal-lista:has(> .crm-celda-doble .crm-celda-doble-detalle) > .crm-tabla-meta-lista::before {
    content: "\00a0· ";
  }

  .crm-tabla-tabla :is(th, td)[data-en-lista="estado"] {
    display: table-cell;
  }

  /*
   * Cabecera que envuelve: dos líneas de 15 (30) más su filete inferior (1)
   * caben en los 32 de la cabecera; dos de 16 sumaban 33 (§1, el filete va
   * dentro de la medida).
   */
  .crm-tabla-tabla thead th:not([data-principal], .crm-tabla-casilla, .crm-tabla-expandir) {
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 15px;
  }
}

@container crm-tabla (max-width: 399.98px) {
  .crm-tabla-meta-lista > span[data-medio] {
    display: none;
  }

  .crm-tabla-meta-lista > span::before {
    content: none;
  }

  .crm-tabla-meta-lista > span[data-estrecho] {
    display: inline;
  }

  .crm-tabla-meta-lista > span[data-estrecho] ~ span[data-estrecho]::before {
    content: " · ";
  }

  .crm-tabla-meta-lista:has(> span[data-estrecho]) {
    display: block;
  }

  .crm-tabla-meta-lista:not(:has(> span[data-estrecho])) {
    display: none;
  }

  .crm-tabla-tabla tbody .crm-tabla-fila:has(> :is(td, th) > .crm-tabla-principal-lista > .crm-tabla-meta-lista > span[data-estrecho]) > :is(td, th) {
    padding-top: max(0px, calc((var(--crm-tabla-alto, 36px) - 36px) / 2));
    line-height: 18px;
    vertical-align: top;
  }

  .crm-tabla-tabla :is(th, td)[data-en-lista="estado"] {
    display: table-cell;
  }
}

/*
 * Resumen de lista (FUNDAMENTOS §2, §14 y §15; `data-resumen`, lo decide la
 * Tabla). En el modo lista, una fila con acciones o estado y algo más a su
 * derecha no cabe en una línea sin cortar algo que se lee entero. La fila NO
 * crece: conserva su alto de ley (36 normal, 32 compacta, 44 cómoda; al
 * tacto, 44, la cómoda, para que la zona de toque de 44 quepa dentro) y
 * enseña lo primero, con jerarquía:
 *   arriba, el título (con «…») y la cifra exacta, entera, a su derecha;
 *   abajo, el estado (en 36, como texto de 16 con su tono; en 44, su
 *   etiqueta de 20), bajo el texto del título; sin estado, «detalle · meta»;
 *   al final, centrado, el botón del detalle (24; su zona de toque crece
 *   hasta lo que deja la fila).
 * Lo demás (el detalle y la meta cuando el estado ocupa su línea, las otras
 * columnas, las acciones) no desaparece: sigue en la fila para el lector,
 * fuera de la vista, y entero en el detalle desplegable (ListaDescripcion con
 * cada columna y las acciones de la fila). El filete, el fondo, la marca de
 * elegida, el tono y el foco van en la fila.
 * En compacta con puntero fino la fila es una línea de 20: el estado se
 * resume en su icono (o un punto de su tono), con el texto para el lector y
 * en el detalle.
 */
.crm-tabla-resumen-boton,
.crm-tabla-tabla [data-solo-resumen],
.crm-tabla-detalle-resumen,
.crm-tabla-detalle[data-resumen-detalle] {
  display: none;
}

/* En el detalle del resumen, lo que la fila corta se lee entero: el título y el detalle de la principal refluyen. */
.crm-tabla-detalle-resumen :is(.crm-celda-doble-titulo, .crm-celda-doble-detalle) {
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
}

.crm-tabla-detalle-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

@container crm-tabla (max-width: 559.98px) {
  .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]),
  .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > :is(thead, tbody, tfoot),
  .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > tr:not(.crm-tabla-fila),
  .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > tr:not(.crm-tabla-fila) > :is(td, th) {
    display: block;
  }

  .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > thead > tr:not(.crm-tabla-grupos),
  .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > .crm-tabla-fila,
  .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tfoot > tr {
    position: relative;
    display: grid;
    /* casilla · chevrón del detalle propio · principal · estado (compacta) · cifra · final */
    grid-template-columns: auto auto minmax(0, 1fr) auto auto auto;
    grid-template-rows: auto auto;
    align-content: center;
  }

  /*
   * Lo que el resumen no enseña: fuera de la vista, dentro de la fila para el lector (y entero en el detalle). Con
   * :where(), la especificidad mínima: cualquier regla de colocación de abajo la gana.
   */
  .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > :where(thead, tbody, tfoot) > :where(tr) > :where(td, th):not([colspan]) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > :is(thead, tbody, tfoot) > tr > :is(.crm-tabla-casilla, .crm-tabla-expandir, [data-principal], .crm-tabla-fin, td[data-cifra]:not([data-prioridad]):not(td[data-cifra]:not([data-prioridad]) ~ td), th[data-alinear="fin"]:not([data-prioridad], .crm-tabla-fin):not(th[data-alinear="fin"]:not([data-prioridad], .crm-tabla-fin) ~ th)),
  .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > .crm-tabla-fila > :is(td, th)[data-en-lista="estado"] {
    /* Quita sticky y su desplazamiento, conservando la caja de los hijos
       absolutos: el área de la casilla pertenece a su celda, nunca a la fila. */
    position: relative;
    inset: auto;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }

  .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > :is(thead, tbody, tfoot) > tr > .crm-tabla-casilla {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > :is(thead, tbody, tfoot) > tr > .crm-tabla-expandir {
    grid-column: 2;
    grid-row: 1 / 3;
  }

  .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > :is(thead, tbody, tfoot) > tr > [data-principal] {
    grid-column: 3;
    grid-row: 1 / 3;
    min-width: 0;
    max-width: none;
    overflow: hidden;
  }

  /*
   * P1-B · La principal corta su texto suelto con «…» dentro de su columna
   * de la rejilla y deja libre la del botón del final. La regla que quita el
   * sticky (`overflow: visible`, para los absolutos de la casilla) pesa más
   * por su :is() y ganaba a la de arriba: el título pasaba por debajo del
   * botón, sin «…». Este selector iguala ese peso y gana por orden (el
   * último argumento del :not() no excluye nada: la principal es la primera
   * columna de datos). La extendida no corta: refluye; la cifra, nunca.
   */
  .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > tr.crm-tabla-fila > td[data-principal]:not([data-crm-dos-lineas="extendida"], [data-cifra], td[data-cifra]:not([data-prioridad]) ~ td) {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /*
   * P1-C · CeldaPersona, como el CeldaDoble con avatar: el avatar ocupa las
   * dos líneas, centrado; el nombre, la primera; la segunda, el estado (o su
   * detalle, sin estado), que empieza tras el avatar (`--crm-resumen-icono`,
   * abajo), nunca encima.
   */
  .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > .crm-tabla-fila > td[data-principal] .crm-celda-persona {
    display: flex;
    align-items: flex-start;
    height: 100%;
  }

  .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > .crm-tabla-fila > td[data-principal] .crm-celda-persona-marca {
    align-self: center;
  }

  .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > :is(thead, tbody, tfoot) > tr > :is(td[data-cifra]:not([data-prioridad]):not(td[data-cifra]:not([data-prioridad]) ~ td), th[data-alinear="fin"]:not([data-prioridad], .crm-tabla-fin):not(th[data-alinear="fin"]:not([data-prioridad], .crm-tabla-fin) ~ th)) {
    grid-column: 5;
    grid-row: 1;
  }

  .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > :is(thead, tbody, tfoot) > tr > .crm-tabla-fin {
    display: flex;
    grid-column: 6;
    grid-row: 1 / 3;
    align-items: center;
    width: auto;
  }

  /* En el cuerpo, el botón del detalle se centra en las dos líneas; en la cabecera, la celda llena su fila (y su filete). */
  .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > tr > .crm-tabla-fin {
    align-self: center;
  }

  .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) .crm-tabla-acciones-fila {
    display: none;
  }

  .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) .crm-tabla-resumen-boton {
    display: inline-flex;
  }

  .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) .crm-tabla-resumen-boton svg {
    transition: transform var(--crm-t-gesto) var(--crm-snap);
  }

  .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > .crm-tabla-fila[data-abierta] .crm-tabla-resumen-boton svg {
    transform: rotate(180deg);
  }

  .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) .crm-tabla-detalle-resumen {
    display: block;
  }

  .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) .crm-tabla-detalle-resumen + * {
    margin-top: 16px;
  }

  .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > .crm-tabla-detalle[data-resumen-detalle] {
    display: block;
  }

  /* La fila, con su alto de ley; el filete, el fondo y las marcas, suyos. */
  .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > .crm-tabla-fila {
    --crm-resumen-pad: 12px;
    --crm-resumen-icono: 0px;
    /* Las dos líneas, a su medida de ley: título 18 y, debajo, 16 (en 44, la etiqueta de 20). */
    --crm-resumen-filas: 18px 16px;
    box-sizing: border-box;
    height: var(--crm-tabla-alto, 36px);
    border-bottom: 1px solid var(--crm-line);
    background: var(--crm-tabla-fila);
    transition: background-color var(--crm-t-salida) linear;
  }

  /* Dos líneas (título y detalle, o título y estado): arriba, con el margen que centra el bloque de 34 (como D43). */
  .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > .crm-tabla-fila:has(> :is(td, th) .crm-celda-doble-detalle, > :is(td, th) .crm-celda-persona-detalle, > :is(td, th)[data-crm-dos-lineas], > :is(td, th)[data-en-lista="estado"], > :is(td, th) > .crm-tabla-principal-lista > .crm-tabla-meta-lista > span) {
    align-content: start;
    grid-template-rows: var(--crm-resumen-filas);
    padding-top: max(0px, calc((var(--crm-tabla-alto, 36px) - 36px) / 2));
  }

  /* La especificidad sube con :is() para ganar a las reglas por celda (foco, elegida, tono, fija, dos líneas). */
  .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > .crm-tabla-fila:is(*, :focus-visible, [data-elegida], [data-tono]) > :is(td, th):is(*, :first-child, :last-child, [data-principal][data-cede]) {
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: 0;
    background: transparent;
    box-shadow: none;
    line-height: 18px;
    vertical-align: top;
  }

  .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > .crm-tabla-fila:has(> .crm-tabla-casilla, > .crm-tabla-expandir) {
    --crm-resumen-pad: 4px;
  }

  .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > .crm-tabla-fila:has(> :is(td, th)[data-principal] .crm-celda-doble-icono) {
    --crm-resumen-icono: 24px;
  }

  /* Avatar de 24 (de un CeldaDoble o de un CeldaPersona) y sus 8 de aire. */
  .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > .crm-tabla-fila:has(> :is(td, th)[data-principal] :is(.crm-celda-doble-icono .crm-avatar, .crm-celda-persona-marca)) {
    --crm-resumen-icono: 32px;
  }

  /* Con estado, su línea es la segunda: el detalle y la meta del título, para el lector y en el detalle. */
  .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > .crm-tabla-fila:has(> :is(td, th)[data-en-lista="estado"]) > :is(td, th)[data-principal] :is(.crm-celda-doble-detalle, .crm-celda-persona-detalle, .crm-tabla-meta-lista) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > .crm-tabla-fila > :is(td, th)[data-en-lista="estado"] {
    z-index: 1;
    display: flex;
    grid-column: 3 / 6;
    grid-row: 2;
    align-items: center;
    min-width: 0;
    /* El tope de su columna es de la vista ancha: aquí tiene la línea entera. */
    max-width: none;
    padding-inline-start: calc(var(--crm-resumen-pad) + var(--crm-resumen-icono));
    line-height: 16px;
  }

  /*
   * Un estado que no cabe en su sitio del resumen acaba en «…» en su TEXTO, no en su caja: CeldaEstado es flex
   * (punto y texto), y la «…» de una caja flex no se pinta. El punto y el tono se quedan; el texto entero, en el
   * detalle del resumen. La Etiqueta trae su propio tope y su «…».
   */
  .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > .crm-tabla-fila > td[data-en-lista="estado"] .crm-celda-estado {
    min-width: 0;
    max-width: 100%;
  }

  .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > .crm-tabla-fila > td[data-en-lista="estado"] .crm-celda-estado-texto {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /*
   * Estado `dosLineas: "extendida"` (varios estados, avisos): su contrato es refluir entero, nunca cortarse ni
   * resumirse (§14). En el resumen, sus estados pasan a la línea siguiente cuando no caben y la fila crece desde su
   * alto de ley. Se parte entre palabras (`break-word`, no `anywhere`: «Sin departamento» nunca «departamen / to»);
   * solo una palabra que no cabe ni sola en la línea se parte.
   */
  .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > .crm-tabla-fila:has(> td[data-en-lista="estado"][data-crm-dos-lineas="extendida"]) {
    --crm-resumen-filas: 18px minmax(16px, auto);
    height: auto;
    min-height: var(--crm-tabla-alto, 36px);
    padding-bottom: max(0px, calc((var(--crm-tabla-alto, 36px) - 36px) / 2));
  }

  .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > .crm-tabla-fila > td[data-en-lista="estado"][data-crm-dos-lineas="extendida"] {
    flex-wrap: wrap;
    column-gap: 12px;
    white-space: normal;
  }

  .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > .crm-tabla-fila > td[data-en-lista="estado"][data-crm-dos-lineas="extendida"] :is(.crm-celda-estado, .crm-celda-estado-texto) {
    overflow: visible;
    overflow-wrap: break-word;
    text-overflow: clip;
    white-space: normal;
  }

  /* La acción del final acaba donde la cifra (12 del borde). */
  .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > tr > .crm-tabla-fin {
    padding-inline-end: 12px;
  }

  .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > .crm-tabla-fila:is([data-elegida], [data-activa]) {
    box-shadow: inset 2px 0 0 var(--crm-acento);
  }

  .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > .crm-tabla-fila[data-tono="aviso"]:not([data-elegida], [data-activa]) {
    box-shadow: inset 2px 0 0 var(--crm-aviso);
  }

  .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > .crm-tabla-fila[data-tono="error"]:not([data-elegida], [data-activa]) {
    box-shadow: inset 2px 0 0 var(--crm-error);
  }

  .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > .crm-tabla-fila:focus-visible {
    box-shadow: inset 0 0 0 var(--crm-foco-ancho) var(--crm-acento);
  }

  .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > .crm-tabla-fila:focus-visible:is([data-elegida], [data-activa]) {
    box-shadow:
      inset 0 0 0 var(--crm-foco-ancho) var(--crm-acento),
      inset 2px 0 0 var(--crm-acento);
  }

  .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) [data-fija] {
    position: static;
  }
}

/*
 * En 36 (y 32), el estado es texto de 16 con su tono, sin la caja de 20, que no
 * cabe con el título. En 44 (cómoda, y al tacto en cualquier densidad) cabe su
 * etiqueta de 20 bajo el título de 18: se queda como es.
 */
@media not (pointer: coarse) {
  @container crm-tabla (max-width: 559.98px) {
    .crm-tabla:not([data-densidad="comoda"]) .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > .crm-tabla-fila > :is(td, th)[data-en-lista="estado"] .crm-etiqueta {
      --crm-etiqueta-alto: 16px;
      padding: 0;
      border-color: transparent;
      background: transparent;
    }

    .crm-tabla:not([data-densidad="comoda"]) .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > .crm-tabla-fila > :is(td, th)[data-en-lista="estado"] .crm-etiqueta-icono {
      margin-left: 0;
    }
  }
}

@container crm-tabla (max-width: 559.98px) {
  .crm-tabla[data-densidad="comoda"] .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > .crm-tabla-fila {
    --crm-resumen-filas: 18px 20px;
  }

  .crm-tabla[data-densidad="comoda"] .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > .crm-tabla-fila > :is(td, th)[data-en-lista="estado"] {
    line-height: 20px;
  }

  .crm-tabla[data-densidad="comoda"] .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > .crm-tabla-fila > :is(td, th)[data-en-lista="estado"] .crm-etiqueta {
    --crm-etiqueta-alto: 20px;
    padding: 0 6px;
  }
}

@media (pointer: coarse) {
  @container crm-tabla (max-width: 559.98px) {
    .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > .crm-tabla-fila {
      --crm-tabla-alto: 44px;
      --crm-resumen-filas: 18px 20px;
    }

    .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > .crm-tabla-fila > :is(td, th)[data-en-lista="estado"] {
      line-height: 20px;
    }

    .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > .crm-tabla-fila > :is(td, th)[data-en-lista="estado"] .crm-etiqueta {
      --crm-etiqueta-alto: 20px;
      padding: 0 6px;
    }
  }
}

/*
 * Compacta con puntero fino: una línea de 20; el estado, en su icono (o un punto de su tono) antes de la cifra. La
 * extendida no: su contrato es refluir entera, así que su Etiqueta conserva el texto (y sin punto sustituto).
 *
 * P1-U1 · Solo de 400 a 559 propios con estado. Por debajo de 400 (320, 280) no caben en una línea un nombre que se
 * lea y un estado entero: el nombre quedaba en 4 letras y el estado se partía. Ahí la fila con estado usa el resumen
 * de dos líneas de siempre (el de normal: avatar en las dos, nombre arriba, estados debajo, tras el avatar, en la
 * misma x en todas las filas) y su alto crece con el contenido (35 con una línea de estados). La fila sin estado
 * sigue en una línea de 32 (bloque siguiente).
 */
@media not (pointer: coarse) {
  @container crm-tabla (min-width: 400px) and (max-width: 559.98px) {
    /* Una línea de 20 en 32: 6 arriba, 5 abajo y el filete. El :has() iguala al de la regla de dos líneas, y la gana. */
    /*
     * P1-C en una línea (compacta a 280): el estado comparte la línea con la principal. Con su columna `auto`, un
     * estado largo («Activa · Sin departamento») se quedaba con todo y dejaba a la principal en 14: el estado se
     * pintaba encima del avatar. La principal guarda su relleno, el avatar o el icono (`--crm-resumen-icono`) y 12 ch
     * de título (un nombre que se reconoce, con su «…»); el estado se queda con lo que quede (`minmax(0, max-content)`:
     * entero si cabe), alineado a la derecha: la misma columna en todas las filas. Cómo cabe lo dice su contenido (abajo): el texto de un estado acaba en «…»; la extendida refluye y la
     * fila crece. La cifra (columna 5) sigue `auto`: nunca se corta. Todo, entero, en el detalle del resumen.
     */
    .crm-tabla[data-densidad="compacta"] .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > .crm-tabla-fila:has(> :is(td, th), > :is(td, th) > .crm-tabla-principal-lista > .crm-tabla-meta-lista > span) {
      --crm-resumen-filas: 20px;
      grid-template-columns: auto auto minmax(calc(var(--crm-resumen-pad) + 12px + var(--crm-resumen-icono) + 12ch), 1fr) minmax(0, max-content) auto auto;
      align-content: start;
      grid-template-rows: 20px;
      padding-top: 6px;
    }

    .crm-tabla[data-densidad="compacta"] .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > .crm-tabla-fila > :is(td, th)[data-en-lista="estado"] {
      grid-column: 4;
      grid-row: 1;
      justify-content: flex-end;
      padding-inline: 12px 0;
      line-height: 20px;
      text-align: end;
    }

    /*
     * Extendida en una línea: sus estados siguen a la derecha del título y, si no caben, pasan a la línea siguiente
     * dentro de su columna; la fila crece (6 + 20 por línea + 5 + filete; con una línea, 32 como siempre). La
     * principal se queda en la primera línea.
     */
    .crm-tabla[data-densidad="compacta"] .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > .crm-tabla-fila:has(> :is(td, th), > :is(td, th) > .crm-tabla-principal-lista > .crm-tabla-meta-lista > span):has(> :is(td, th)[data-en-lista="estado"][data-crm-dos-lineas="extendida"]) {
      grid-template-rows: minmax(20px, auto);
      padding-bottom: 5px;
    }

    .crm-tabla[data-densidad="compacta"] .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > .crm-tabla-fila:has(> :is(td, th)[data-en-lista="estado"][data-crm-dos-lineas="extendida"]) > :is(td, th)[data-principal] {
      align-self: start;
    }

    .crm-tabla[data-densidad="compacta"] .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > .crm-tabla-fila > :is(td, th)[data-en-lista="estado"]:not([data-crm-dos-lineas="extendida"]) .crm-etiqueta-texto {
      position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    }

    .crm-tabla[data-densidad="compacta"] .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > .crm-tabla-fila > :is(td, th)[data-en-lista="estado"]:not([data-crm-dos-lineas="extendida"]) .crm-etiqueta:not(:has(.crm-etiqueta-icono))::before {
      content: "";
      width: 6px;
      height: 6px;
      background: currentcolor;
    }

    /* En una línea manda el título: el icono y el título se quedan la línea entera de su celda. */
    .crm-tabla[data-densidad="compacta"] .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > .crm-tabla-fila > :is(td, th)[data-principal] .crm-tabla-principal-lista:has(> .crm-celda-doble .crm-celda-doble-detalle) {
      grid-template-columns: auto minmax(0, 1fr);
    }

    /* El detalle y la meta, para el lector y en el detalle (no le quitan sitio). */
    .crm-tabla[data-densidad="compacta"] .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > .crm-tabla-fila > :is(td, th)[data-principal] :is(.crm-celda-doble-detalle, .crm-celda-persona-detalle, .crm-tabla-meta-lista) {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }

    /*
     * La principal recorta (P1-B) y su línea es de 20: un avatar de 24 (de CeldaDoble o CeldaPersona) sobresale 2 por
     * cada lado. Solo entonces la celda gana 2 de relleno arriba y abajo y los devuelve con margen: la línea no se
     * mueve y el avatar se ve entero. El texto suelto y el icono de 16 caben: su celda no cambia.
     */
    .crm-tabla[data-densidad="compacta"] .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > tr.crm-tabla-fila > td[data-principal]:not([data-crm-dos-lineas="extendida"], [data-cifra], td[data-cifra]:not([data-prioridad]) ~ td):has(:is(.crm-celda-doble-icono .crm-avatar, .crm-celda-persona-marca)) {
      margin-block: -2px;
      padding-block: 2px;
    }

    /* CeldaPersona en una línea: nombre y avatar, centrados en ella. */
    .crm-tabla[data-densidad="compacta"] .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > .crm-tabla-fila > td[data-principal] .crm-celda-persona {
      align-items: center;
    }
  }
}

/*
 * P1-U1 · Compacta por debajo de 400 propios. La fila SIN estado sigue en una línea de 32 (las mismas reglas que de 400
 * a 559). La fila CON estado toma el resumen de dos líneas (sus reglas son las de cualquier densidad): aquí solo se
 * suelta su alto fijo, para que mida lo que su contenido (nunca menos de 32).
 */
@media not (pointer: coarse) {
  @container crm-tabla (max-width: 399.98px) {
    .crm-tabla[data-densidad="compacta"] .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > .crm-tabla-fila:not(:has(> td[data-en-lista="estado"])):has(> td, > td > .crm-tabla-principal-lista > .crm-tabla-meta-lista > span) {
      --crm-resumen-filas: 20px;
      align-content: start;
      grid-template-rows: 20px;
      padding-top: 6px;
    }

    .crm-tabla[data-densidad="compacta"] .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > .crm-tabla-fila:not(:has(> td[data-en-lista="estado"])) > td[data-principal] .crm-tabla-principal-lista:has(> .crm-celda-doble .crm-celda-doble-detalle) {
      grid-template-columns: auto minmax(0, 1fr);
    }

    .crm-tabla[data-densidad="compacta"] .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > .crm-tabla-fila:not(:has(> td[data-en-lista="estado"])) > td[data-principal] :is(.crm-celda-doble-detalle, .crm-celda-persona-detalle, .crm-tabla-meta-lista) {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }

    .crm-tabla[data-densidad="compacta"] .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > tr.crm-tabla-fila:not(:has(> td[data-en-lista="estado"])) > td[data-principal]:not([data-crm-dos-lineas="extendida"], [data-cifra], td[data-cifra]:not([data-prioridad]) ~ td):has(:is(.crm-celda-doble-icono .crm-avatar, .crm-celda-persona-marca)) {
      margin-block: -2px;
      padding-block: 2px;
    }

    .crm-tabla[data-densidad="compacta"] .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > .crm-tabla-fila:not(:has(> td[data-en-lista="estado"])) > td[data-principal] .crm-celda-persona {
      align-items: center;
    }

    /* Con estado: dos líneas, alto según contenido. */
    .crm-tabla[data-densidad="compacta"] .crm-tabla-tabla:is([data-resumen=""], [data-resumen="medido"][data-resumen-activo]) > tbody > .crm-tabla-fila:has(> td[data-en-lista="estado"]) {
      height: auto;
      min-height: var(--crm-tabla-alto, 32px);
    }
  }
}

/*
 * Compacta (32, FUNDAMENTOS §2) con contenido de dos líneas. Dos líneas son
 * 18 + 16 + 1 de filete = 35 y no caben en 32 (la fila medía 35 en vista ancha
 * y en lista, con o sin icono). La principal se pinta en UNA línea de 20: el
 * icono (Avatar 24 o icono 16, sin tocar), el título y, tras 8, el detalle; en
 * modo lista, «· meta» detrás. Cada pieza con su «…», la fila vuelve a
 * centrarse como cualquier fila de una línea: 32 exactos. Nada se quita: lo
 * que se corta se lee entero en el consejo de la celda (ConsultaCompacta en
 * tabla.tsx: puntero, teclado y pulsación larga al tacto).
 */
.crm-tabla[data-densidad="compacta"] .crm-tabla-fila:has(> :is(td, th) .crm-celda-doble-detalle, > :is(td, th)[data-crm-dos-lineas]) > :is(td, th) {
  padding-top: 0;
  line-height: 20px;
  vertical-align: middle;
}

.crm-tabla[data-densidad="compacta"] .crm-tabla-fila:has(> :is(td, th) .crm-celda-doble-detalle, > :is(td, th)[data-crm-dos-lineas]) .crm-celda-doble {
  vertical-align: middle;
}

.crm-tabla[data-densidad="compacta"] .crm-tabla-fila > :is(td, th) .crm-celda-doble-texto {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

/* El título cede después que el detalle: el detalle encoge cuatro veces más deprisa. */
.crm-tabla[data-densidad="compacta"] .crm-tabla-fila > :is(td, th) .crm-celda-doble-titulo {
  flex: 0 1 auto;
  min-width: 0;
  line-height: 20px;
}

.crm-tabla[data-densidad="compacta"] .crm-tabla-fila > :is(td, th) .crm-celda-doble-detalle {
  flex: 0 4 auto;
  min-width: 0;
  line-height: 20px;
}

/* Al tacto, la pulsación larga consulta: sin el menú de copiar del sistema ni una selección de texto encima del consejo. */
.crm-tabla[data-densidad="compacta"] .crm-tabla-fila > :is(td, th)[data-consulta] {
  -webkit-touch-callout: none;
}

@media (hover: none) {
  .crm-tabla[data-densidad="compacta"] .crm-tabla-fila > :is(td, th)[data-consulta] {
    -webkit-user-select: none;
    user-select: none;
  }
}

/*
 * `dosLineas: true` (dos líneas informativas de la app, sin CeldaDoble) en
 * compacta: las mismas dos piezas en una línea, con 8 entre ellas, y «…» si
 * no caben (la celda no pasa de su ancho de columna); lo cortado se consulta
 * entero. Nada se quita: solo se pone en fila.
 */
.crm-tabla[data-densidad="compacta"] .crm-tabla-fila > :is(td, th)[data-crm-dos-lineas=""] {
  max-width: var(--crm-col-ancho, none);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-tabla[data-densidad="compacta"] .crm-tabla-fila > :is(td, th)[data-crm-dos-lineas=""] :is(div, p, span, ul, li) {
  display: inline;
  margin-top: 0;
  margin-bottom: 0;
}

.crm-tabla[data-densidad="compacta"] .crm-tabla-fila > :is(td, th)[data-crm-dos-lineas=""] > * + *,
.crm-tabla[data-densidad="compacta"] .crm-tabla-fila > :is(td, th)[data-crm-dos-lineas=""] > * > * + * {
  margin-left: 8px;
}

/*
 * `dosLineas: "extendida"` en cualquier densidad: su texto refluye (avisos,
 * notas: §14, nunca se cortan); la fila crece con él. En estrecho, la
 * principal extendida cede ancho como todas (D33) pero no corta: envuelve.
 */
.crm-tabla-fila > :is(td, th)[data-crm-dos-lineas="extendida"] {
  white-space: normal;
  overflow-wrap: anywhere;
}

@container crm-tabla (max-width: 559.98px) {
  .crm-tabla-tabla tbody td[data-principal][data-crm-dos-lineas="extendida"] {
    overflow: visible;
    text-overflow: clip;
  }
}

/*
 * `dosLineas: "extendida"` (avisos, notas, controles: contenido de altura
 * propia) en compacta: nada se corta ni se resume. La fila se alinea arriba
 * con la primera línea en su sitio de compacta (6 + 20 + 5 + filete = 32 con
 * una línea) y crece con su contenido, como la nota de fila (§14: el texto
 * de aviso y de ayuda refluye, nunca se corta). En normal y cómoda ya lo
 * hacía (D43).
 */
.crm-tabla[data-densidad="compacta"] .crm-tabla-fila:has(> :is(td, th)[data-crm-dos-lineas="extendida"]) > :is(td, th) {
  box-sizing: border-box;
  padding-top: 6px;
  padding-bottom: 5px;
  line-height: 20px;
  vertical-align: top;
}

.crm-tabla[data-densidad="compacta"] .crm-tabla-fila:has(> :is(td, th)[data-crm-dos-lineas="extendida"]) .crm-celda-doble {
  vertical-align: top;
}

@container crm-tabla (max-width: 559.98px) {
  /* Lista en compacta: [icono] título  detalle · meta, en una fila de la rejilla. */
  /*
   * El título manda: el detalle (un CUPS mono, una referencia) no pasa del 40 %
   * de la fila (`fit-content`); título y detalle crecen a la par hasta ese
   * tope y el resto es del título. La meta guarda 3 em.
   */
  .crm-tabla[data-densidad="compacta"] .crm-tabla-principal-lista:has(> .crm-celda-doble .crm-celda-doble-detalle) {
    grid-template-columns: auto minmax(0, max-content) fit-content(40%) minmax(3em, 1fr);
    align-items: baseline;
  }

  /* En lista el CeldaDoble sigue desarmado (sus piezas son de la rejilla): gana a la línea de la vista ancha. */
  .crm-tabla[data-densidad="compacta"] .crm-tabla-principal-lista:has(> .crm-celda-doble .crm-celda-doble-detalle) :is(.crm-celda-doble, .crm-celda-doble-texto) {
    display: contents;
  }

  .crm-tabla[data-densidad="compacta"] .crm-tabla-principal-lista:has(> .crm-celda-doble .crm-celda-doble-detalle) .crm-celda-doble-icono {
    grid-row: 1;
    align-self: center;
  }

  .crm-tabla[data-densidad="compacta"] .crm-tabla-principal-lista:has(> .crm-celda-doble .crm-celda-doble-detalle) .crm-celda-doble-titulo {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  .crm-tabla[data-densidad="compacta"] .crm-tabla-principal-lista:has(> .crm-celda-doble .crm-celda-doble-detalle) .crm-celda-doble-detalle {
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
    margin-left: 8px;
  }

  .crm-tabla[data-densidad="compacta"] .crm-tabla-principal-lista:has(> .crm-celda-doble .crm-celda-doble-detalle) > .crm-tabla-meta-lista {
    grid-column: 4;
    grid-row: 1;
    line-height: 20px;
  }

  /* Título suelto con meta: «título · meta» en la línea de la celda (que ya acaba en «…»). */
  .crm-tabla[data-densidad="compacta"] .crm-tabla-tabla tbody .crm-tabla-fila:has(> :is(td, th) > .crm-tabla-principal-lista > .crm-tabla-meta-lista > span[data-medio]) > :is(td, th) {
    padding-top: 0;
    line-height: 20px;
    vertical-align: middle;
  }

  .crm-tabla[data-densidad="compacta"] .crm-tabla-principal-lista:not(:has(> .crm-celda-doble .crm-celda-doble-detalle)) > .crm-tabla-meta-lista:has(> span[data-medio]) {
    display: inline;
  }

  .crm-tabla[data-densidad="compacta"] .crm-tabla-principal-lista:not(:has(> .crm-celda-doble .crm-celda-doble-detalle)) > .crm-tabla-meta-lista::before {
    content: " · ";
  }
}

@container crm-tabla (max-width: 399.98px) {
  .crm-tabla[data-densidad="compacta"] .crm-tabla-tabla tbody .crm-tabla-fila:has(> :is(td, th) > .crm-tabla-principal-lista > .crm-tabla-meta-lista > span[data-estrecho]) > :is(td, th) {
    padding-top: 0;
    line-height: 20px;
    vertical-align: middle;
  }

  /* En el tramo estrecho manda `data-estrecho`: sin él, la meta no ocupa sitio (ni un «·» suelto). */
  .crm-tabla[data-densidad="compacta"] .crm-tabla-principal-lista:not(:has(> .crm-celda-doble .crm-celda-doble-detalle)) > .crm-tabla-meta-lista:has(> span[data-estrecho]) {
    display: inline;
  }

  .crm-tabla[data-densidad="compacta"] .crm-tabla-principal-lista:not(:has(> .crm-celda-doble .crm-celda-doble-detalle)) > .crm-tabla-meta-lista:not(:has(> span[data-estrecho])) {
    display: none;
  }
}

/* El consejo de la principal en compacta: título, detalle y cada meta con su nombre, enteros (envuelven). */
.crm-tabla-consulta {
  display: grid;
  gap: 2px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.crm-tabla-consulta-titulo {
  color: var(--crm-text);
  font-weight: 500;
}

.crm-tabla-consulta-detalle,
.crm-tabla-consulta-meta {
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
}

/*
 * Nota de fila (`notaFila`): tras la principal, una celda con el colSpan de
 * las demás y la explicación en frase, 12/16 en secundario (no es una cifra:
 * a la izquierda y envolviendo si hace falta). Sin «—»: no hay datos que
 * falten. La fila conserva su alto, su hover y su selección.
 * Ritmo: arriba (alto − 16) / 2 y abajo uno menos, porque el filete va dentro
 * de la medida. Con una línea la fila mide su alto de densidad (36; 32
 * compacta; 44 cómoda) y cada línea más suma 16: 36, 52, 68… siempre en la
 * escala de 4, con la frase entera. Gana a la regla de las filas de dos
 * líneas (`:has(…) > td`), que le pondría su relleno y su línea de 18.
 */
.crm-tabla-tabla tbody .crm-tabla-fila > :is(td, th).crm-tabla-nota-fila {
  padding-block: calc((var(--crm-tabla-alto, 36px) - 16px) / 2) calc((var(--crm-tabla-alto, 36px) - 16px) / 2 - 1px);
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
  text-align: left;
  vertical-align: top;
  white-space: normal;
}

/*
 * En estrecho la principal cede todo lo que puede (D33) y la nota se quedaba
 * con su ancho mínimo: una palabra por línea (tres y seis líneas a 390). La
 * nota pide la mitad del contenedor: la frase corta, en una línea; la larga,
 * en dos, entera.
 */
@container crm-tabla (max-width: 559.98px) {
  .crm-tabla-tabla tbody .crm-tabla-fila > :is(td, th).crm-tabla-nota-fila {
    min-width: 50cqi;
  }
}

/* ── Barra de filtros (fuera de la Tabla) ───────────────────────────── */
/*
 * Una barra, una altura (28, como la de la Tabla). En ancho: búsqueda de 280,
 * filtros, y al final el resultado, «Limpiar filtros» y las acciones. A menos
 * de 560 de ancho propio (§15, `@container`): búsqueda a todo el ancho en su
 * fila, filtros en la segunda fila con desplazamiento e indicio (cada uno a su
 * ancho) y el resultado con sus acciones en la tercera.
 *
 * Es una franja: `width: 100%` de su sitio y contenedor de consulta. La
 * contención de tamaño en línea le quita ancho intrínseco (0), así que en un
 * sitio que mide su contenido (las acciones de la cabecera de una Tarjeta) no
 * tiene ancho: ese no es su sitio (la pieza avisa en desarrollo). Su sitio es
 * el cuerpo, encima de la colección, donde su ancho es el del bloque.
 */
.crm-barra-filtros {
  container: crm-barra-filtros / inline-size;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: 28px;
}

.crm-barra-filtros-filtros {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.crm-barra-filtros-fin {
  display: flex;
  flex: 1 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.crm-barra-filtros-resultado {
  color: var(--crm-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 16px;
  white-space: nowrap;
}

@container crm-barra-filtros (max-width: 559.98px) {
  .crm-barra-filtros-busqueda {
    flex: 1 1 100%;
  }

  .crm-barra-filtros-filtros {
    flex: 1 1 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    mask-image: linear-gradient(to right, var(--crm-text) calc(100% - 24px), transparent);
  }

  .crm-barra-filtros-filtros::-webkit-scrollbar {
    display: none;
  }

  .crm-barra-filtros-filtros > * {
    flex: none;
  }

  .crm-barra-filtros-fin {
    flex: 1 1 100%;
    justify-content: space-between;
  }
}

/* Tacto: la búsqueda es un campo que se edita (16 y 40, para que iOS no amplíe); los filtros se quedan a 28. */
@media (pointer: coarse) {
  .crm-barra-filtros-busqueda {
    height: 40px;
  }

  .crm-barra-filtros-busqueda input {
    font-size: 16px;
  }
}

/* Una barra = una altura (§2): dentro de la barra de la tabla, los chips de filtro, «+ Filtro» y «Limpiar» toman su 28. */
.crm-tabla-barra :is(.crm-chip-filtro, .crm-tabla-anadir, .crm-tabla-limpiar) {
  height: 28px;
}

/* ── Texto extenso ───────────────────────────────────────────────────── */
/*
 * Texto de trabajo largo: párrafos a 8, saltos de línea respetados y tokens
 * largos partidos (nunca se sale del bloque). Plegado, un extracto de N
 * líneas que se funde en las dos últimas (la máscara dice «sigue», no corta
 * a ciegas). Pie de 32 con «Ver entero» (enlace de texto) y «Copiar el texto».
 */
.crm-texto-extenso {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.crm-texto-extenso-cuerpo {
  display: grid;
  gap: 8px;
  min-width: 0;
  color: var(--crm-text-2);
  font-size: 14px;
  line-height: 22px;
  overflow-wrap: anywhere;
}

.crm-texto-extenso[data-fuente="mono"] .crm-texto-extenso-cuerpo {
  font-family: var(--crm-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 20px;
}

.crm-texto-extenso-cuerpo > p {
  max-width: 68ch;
  margin: 0;
  white-space: pre-line;
}

.crm-texto-extenso-cuerpo[data-plegado] {
  max-height: calc(var(--crm-texto-lineas, 6) * 22px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, currentColor calc(100% - 44px), transparent);
  mask-image: linear-gradient(180deg, currentColor calc(100% - 44px), transparent);
}

.crm-texto-extenso[data-fuente="mono"] .crm-texto-extenso-cuerpo[data-plegado] {
  max-height: calc(var(--crm-texto-lineas, 6) * 20px);
}

.crm-texto-extenso-vacio {
  color: var(--crm-dim);
}

.crm-texto-extenso-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  min-height: 32px;
}

.crm-texto-extenso-alternar {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--crm-text-2);
  font: inherit;
  font-size: 13px;
  line-height: 20px;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--crm-line-2);
  text-underline-offset: 2px;
}

.crm-texto-extenso-alternar:hover {
  color: var(--crm-text);
  text-decoration-color: currentColor;
}

.crm-texto-extenso-alternar:focus-visible {
  outline: var(--crm-foco-ancho) solid var(--crm-acento);
  outline-offset: 2px;
}

/* ── Tabla · estado de celda, subtotal por grupo y fila anidada ──────── */
/*
 * Estado de celda (D109): un punto de 6 antes del valor, en el tono del
 * estado; el valor no se toca. La leyenda, una vez encima de la tabla, en
 * 12/16 secundario con el mismo punto. Lo normal no lleva marca: solo la
 * excepción se ve (nunca un chip verde por celda).
 */
.crm-tabla-estado-punto {
  display: inline-block;
  box-sizing: border-box;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--crm-muted);
  vertical-align: middle;
}

[data-tono-estado="aviso"] > .crm-tabla-estado-punto {
  background: var(--crm-aviso);
}

[data-tono-estado="error"] > .crm-tabla-estado-punto {
  background: var(--crm-error);
}

[data-tono-estado="tenue"] > .crm-tabla-estado-punto {
  border: 1px solid var(--crm-muted);
  background: transparent;
}

.crm-tabla-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0 0 8px;
  padding: 0;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
  list-style: none;
}

.crm-tabla-leyenda > li {
  display: inline-flex;
  align-items: center;
}

/*
 * Subtotal de grupo: una fila contable de 36 al final del grupo, con el
 * filete line-2 encima (como el pie), en cuerpo 400; la destacada, a 500.
 */
.crm-tabla-subtotal > td {
  height: var(--crm-tabla-alto, 36px);
  padding: 0 12px;
  border-top: 1px solid var(--crm-line-2);
  border-bottom: 1px solid var(--crm-line);
  background: var(--crm-tabla-fondo);
  color: var(--crm-text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.crm-tabla-subtotal[data-destacada] > td {
  color: var(--crm-text);
  font-weight: 500;
}

/*
 * Fila anidada: hija de la de arriba. Fondo hundido al lienzo y la celda
 * principal sangrada 20 (y su guía de 1 a la izquierda); el texto se lee
 * igual que en su madre.
 */
.crm-tabla-fila[data-anidada] {
  --crm-tabla-fila: var(--crm-bg);
}

.crm-tabla-fila[data-anidada] > :is(td, th)[data-principal] {
  padding-left: 32px;
  background-image: linear-gradient(var(--crm-line-2), var(--crm-line-2));
  background-position: 18px 0;
  background-repeat: no-repeat;
  background-size: 1px 100%;
}

/*
 * Mapa de calor de un solo tono (`ColumnaTabla.intensidad`): la serie 1 hasta
 * un 14 % sobre el fondo de la fila (el hover y la selección siguen
 * debajo); el valor no se toca. La cifra resaltada, a 500 en primario.
 */
.crm-tabla-fila > :is(td, th)[data-calor] {
  background-image: linear-gradient(color-mix(in srgb, var(--crm-serie-1) calc(var(--crm-intensidad, 0) * 14%), transparent), color-mix(in srgb, var(--crm-serie-1) calc(var(--crm-intensidad, 0) * 14%), transparent));
}

.crm-tabla-fila > :is(td, th)[data-resaltada] {
  color: var(--crm-text);
  font-weight: 500;
}

/* Fila destacada: un escalón arriba y filete neutro de 2 en la principal (la elegida o abierta conserva el de acento). */
.crm-tabla-fila[data-destacada] {
  --crm-tabla-fila: var(--crm-panel-2);
}

.crm-tabla-fila[data-destacada]:not([data-elegida], [data-activa], [data-tono="aviso"], [data-tono="error"]) > :is(td, th)[data-principal] {
  box-shadow: inset 2px 0 0 var(--crm-text-2);
}

/* Celda que encabeza su fila (`cabeceraFila`): semántica de <th scope="row">, aspecto de celda. */
:where(.crm-tabla-fila > th[scope="row"]) { font-weight: inherit; text-align: start; }

/* Acciones de lista y situación de persona (admin de InnoTec, 12-oct), sobre la candidata del CRM. */
/* Firma provisional y vacante: misma huella que el avatar firme. */
.crm-celda-persona[data-situacion="provisional"] .crm-celda-persona-marca,
.crm-celda-persona-vacante {
  box-sizing: border-box; width: 24px; height: 24px; border: 1px dashed var(--crm-line-2);
  border-radius: 0; background: transparent; color: var(--crm-muted);
}
.crm-celda-persona-vacante { display: inline-flex; align-items: center; justify-content: center; }
.crm-celda-persona-vacante svg { width: 14px; height: 14px; }
.crm-celda-persona[data-situacion="vacante"][data-tono="error"] .crm-celda-persona-nombre { color: var(--crm-error); }
.crm-celda-persona[data-situacion="vacante"][data-tono="aviso"] .crm-celda-persona-nombre { color: var(--crm-aviso); }
.crm-celda-persona[data-situacion="vacante"][data-tono="hecho"] .crm-celda-persona-nombre { color: var(--crm-acento); }
.crm-celda-persona[data-situacion="vacante"][data-tono="espera"] .crm-celda-persona-nombre { color: var(--crm-acento); }

.crm-celda-persona[data-situacion="vacante"][data-tono="neutro"] .crm-celda-persona-nombre { color: var(--crm-muted); }
.crm-celda-persona-marca { transition: border-color var(--crm-t-color) var(--crm-snap), background-color var(--crm-t-color) var(--crm-snap); }
@media (prefers-reduced-motion: reduce) { .crm-celda-persona-marca { transition: none; } }

/* Pie de acciones optativo; el destino conserva todo el ancho. */
.crm-lista[data-posicion-acciones="pie"] > li[data-con-acciones] { flex-direction: column; align-items: stretch; }
.crm-lista[data-posicion-acciones="pie"] > li[data-con-acciones] > .crm-lista-fila { flex: none; }
.crm-lista[data-posicion-acciones="pie"] .crm-lista-acciones { justify-content: flex-end; gap: 8px; padding: 8px; padding-top: 0; }
.crm-lista[data-posicion-acciones="pie"] > li[data-con-acciones] > .crm-lista-fila:not([data-contenido]) + .crm-lista-acciones { padding-top: 8px; }
/* Acciones de fila independientes del destino, también en listas móviles. */
.crm-lista > li[data-con-acciones] { display: flex; align-items: center; min-width: 0; border-bottom: 1px solid var(--crm-line); }

.crm-lista > li[data-con-acciones] > .crm-lista-fila { flex: 1; min-width: 0; border-bottom: 0; }

.crm-lista-acciones { display: flex; align-items: center; gap: 4px; padding-inline-end: 12px; flex-shrink: 0; }

.crm-lista > li[aria-current="true"] { position: relative; background: var(--crm-panel-3); }


.crm-lista-fila[data-contenido] { height: auto; min-height: 40px; padding-block: 8px; }

.crm-lista[data-densidad="compacta"] .crm-lista-fila[data-contenido] { height: auto; min-height: 32px; }

.crm-lista-contenido { flex: 1; min-width: 0; text-align: start; }
/* Overlay privado: Cita y galeria, kit fuente 73fff28c. */

/* ══ Texto plegable (`TextoPlegable`) ═══════════════════════════════════
 * Texto largo en una lista densa: plegado a N líneas y, si no cabe, «Ver más»
 * debajo. Hereda letra y color de su sitio (la nota de una fila). El botón es
 * de 24 (control xs, Geist 12) con zona de toque de 44 en pantallas táctiles.
 * Sin animación de alto. RFC docs/decisiones/0009-sala-movil.md.
 */
.crm-texto-plegable {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  max-width: 100%;
}

.crm-texto-plegable,
.crm-texto-plegable *,
.crm-texto-plegable *::before,
.crm-texto-plegable *::after {
  box-sizing: border-box;
}

.crm-texto-plegable-texto {
  width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}

.crm-texto-plegable-texto[data-plegado] {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--crm-plegable-lineas, 2);
  line-clamp: var(--crm-plegable-lineas, 2);
}

.crm-texto-plegable-boton {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--crm-text);
  font-family: var(--crm-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  text-decoration: underline;
  text-decoration-color: var(--crm-line-2);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: text-decoration-color var(--crm-t-color) ease-out;
}

.crm-texto-plegable-boton svg {
  width: 14px;
  height: 14px;
  color: var(--crm-muted);
  transition: transform var(--crm-t-gesto) var(--crm-snap);
}

.crm-texto-plegable[data-abierto] .crm-texto-plegable-boton svg {
  transform: rotate(180deg);
}

@media (hover: hover) {
  .crm-texto-plegable-boton:hover {
    text-decoration-color: var(--crm-text);
  }
}

.crm-texto-plegable-boton:focus-visible {
  outline: var(--crm-foco-ancho) solid var(--crm-acento);
  outline-offset: 2px;
}

/* Táctil: 24 visibles, 44 de zona de toque. */
@media (pointer: coarse) {
  .crm-texto-plegable-boton::after {
    content: "";
    position: absolute;
    inset: -10px -8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crm-texto-plegable-boton svg {
    transition: none;
  }
}

/*
 * Familia «datos» · piezas de cuenta comercial (14-oct-2026, Clientes vivos):
 * Expediente, SelloClase, PistaHabla, Guion, TarjetaObjecion, MedidorCierre y
 * TicketPropuesta. Solo variables --crm-*; medidas de FUNDAMENTOS.
 */

:is(.crm-expediente, .crm-sello, .crm-pista, .crm-reparto, .crm-guion, .crm-objecion, .crm-cierre, .crm-cuenta-ticket) *,
:is(.crm-expediente, .crm-sello, .crm-pista, .crm-reparto, .crm-guion, .crm-objecion, .crm-cierre, .crm-cuenta-ticket) *::before,
:is(.crm-expediente, .crm-sello, .crm-pista, .crm-reparto, .crm-guion, .crm-objecion, .crm-cierre, .crm-cuenta-ticket) *::after {
  box-sizing: border-box;
}

:is(.crm-expediente, .crm-sello, .crm-pista, .crm-reparto, .crm-guion, .crm-objecion, .crm-cierre, .crm-cuenta-ticket) {
  min-width: 0;
  color: var(--crm-text-2);
  font-family: var(--crm-sans);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: -0.005em;
}

:is(.crm-expediente, .crm-sello, .crm-pista, .crm-guion) :focus-visible {
  outline: 1px solid var(--crm-acento);
  outline-offset: 2px;
}

/* ── Expediente ─────────────────────────────────────────────────────────
   Folio de 32 sobre un carril de 1 px (su centro, a 16). Entre folio y folio,
   la cota de días corta el carril como en un plano. */

.crm-expediente {
  container-type: inline-size;
}

.crm-expediente-carril {
  position: relative;
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crm-expediente-carril::before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 16px;
  width: 1px;
  background: var(--crm-line-2);
}

.crm-expediente-hito {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 16px;
  padding-bottom: 8px;
}

.crm-expediente-hito:not(:first-child) {
  padding-top: 40px;
}

/* La cota: 40 px de carril con los días escritos sobre él. */
.crm-expediente-cota {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  height: 40px;
  padding-left: 8px;
}

.crm-expediente-cota::before,
.crm-expediente-cota::after {
  content: "";
  position: absolute;
  left: 12px;
  width: 9px;
  height: 1px;
  background: var(--crm-control);
}

.crm-expediente-cota::before {
  top: 8px;
}

.crm-expediente-cota::after {
  bottom: 8px;
}

.crm-expediente-cota > span {
  position: relative;
  padding: 2px 4px;
  background: var(--crm-bg);
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transform: translateX(-4px);
}

.crm-expediente-folio {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--crm-line-2);
  background: var(--crm-bg);
  color: var(--crm-text);
  font-family: var(--crm-mono);
  font-size: 12px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

.crm-expediente-hito[data-estado="hecho"] .crm-expediente-folio {
  border-color: var(--crm-control);
}

.crm-expediente-hito[data-estado="pendiente"] .crm-expediente-folio {
  border-style: dashed;
  border-color: var(--crm-acento-linea);
  color: var(--crm-acento);
}

.crm-expediente-hito[data-estado="pendiente"] .crm-expediente-folio::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid var(--crm-acento);
  opacity: 0;
  animation: crm-expediente-latido 2.4s var(--crm-curva) infinite;
}

.crm-expediente-hito[data-estado="vencido"] .crm-expediente-folio {
  border-style: dashed;
  border-color: var(--crm-error-linea);
  color: var(--crm-error);
}

@keyframes crm-expediente-latido {
  0% {
    opacity: 0.9;
    transform: scale(1);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}

.crm-expediente-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 12px;
  min-width: 0;
}

.crm-expediente-cabeza {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 2px;
  min-width: 0;
  margin: -6px 0 0 -8px;
  padding: 6px 8px 8px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  transition: background-color var(--crm-t-salida) var(--crm-snap);
}

button.crm-expediente-cabeza {
  cursor: pointer;
}

@media (hover: hover) {
  button.crm-expediente-cabeza:hover {
    background: var(--crm-panel-2);
    transition-duration: 0ms;
  }
}

button.crm-expediente-cabeza:focus-visible {
  outline-offset: -1px;
}

.crm-expediente-abre {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--crm-muted);
  stroke-width: 1.6;
  transition: transform var(--crm-t-gesto) var(--crm-snap);
}

.crm-expediente-hito[data-abierto] .crm-expediente-abre {
  transform: rotate(180deg);
  color: var(--crm-text);
}

.crm-expediente-rotulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crm-expediente-rotulo time {
  outline: 0;
}

.crm-expediente-tipo {
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
}

.crm-expediente-tipo svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.5;
}

.crm-expediente-marca {
  margin-left: 4px;
  padding: 0 6px;
  border-left: 2px solid var(--crm-acento);
  color: var(--crm-acento);
  text-transform: none;
  letter-spacing: 0;
}

.crm-expediente-hito[data-estado="vencido"] .crm-expediente-marca {
  border-left-color: var(--crm-error);
  color: var(--crm-error);
}

.crm-expediente-titulo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--crm-text);
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -0.01em;
}

.crm-expediente-quien {
  color: var(--crm-muted);
}

.crm-expediente-cita {
  display: block;
  max-width: 68ch;
  margin-top: 6px;
  padding-left: 12px;
  border-left: 1px solid var(--crm-line-2);
  color: var(--crm-text-2);
  font-size: 14px;
  line-height: 22px;
  quotes: "«" "»";
}

.crm-expediente-accion {
  padding-top: 0;
}

.crm-expediente-contenido {
  position: relative;
  z-index: 1;
  background: var(--crm-bg);
  grid-column: 1 / -1;
  min-width: 0;
  margin-top: 12px;
  padding: 20px 0 8px;
  border-top: 1px solid var(--crm-line);
  animation: crm-expediente-abrir var(--crm-t-entrada) var(--crm-snap);
}

/* Contenedor estrecho: el carril se pliega a 24, la acción baja y el contenido abierto usa todo el ancho. */
@container (max-width: 560px) {
  .crm-expediente-carril::before {
    left: 12px;
    top: 12px;
    bottom: 12px;
  }
  .crm-expediente-hito {
    grid-template-columns: 24px minmax(0, 1fr);
    column-gap: 12px;
  }
  .crm-expediente-hito:not(:first-child) {
    padding-top: 32px;
  }
  .crm-expediente-folio {
    width: 24px;
    height: 24px;
    font-size: 11px;
  }
  .crm-expediente-cota {
    height: 32px;
    padding-left: 4px;
  }
  .crm-expediente-cota::before,
  .crm-expediente-cota::after {
    left: 8px;
  }
  .crm-expediente-cuerpo {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 8px;
  }
  .crm-expediente-accion {
    grid-column: 1;
  }
  .crm-expediente-contenido {
    margin-left: -36px;
  }
}

@keyframes crm-expediente-abrir {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

/* ── SelloClase ─────────────────────────────────────────────────────────
   Sello de 64 (40 en compacto) con la letra a 40; ejes de 28 con tres celdas
   de 24 y la elegida hecha flecha. */

.crm-sello {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: start;
  gap: 20px;
}

.crm-sello[data-tamano="compacto"] {
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
}

.crm-sello-total {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  width: 64px;
  height: 64px;
  border: 1px solid var(--crm-control);
  color: var(--crm-text);
}

.crm-sello[data-tamano="compacto"] .crm-sello-total {
  width: 40px;
  height: 40px;
}

.crm-sello-total[data-clase="A"] {
  border-color: var(--crm-acento-linea);
  box-shadow: inset 0 -2px 0 var(--crm-acento);
}

.crm-sello-total[data-clase="C"] {
  color: var(--crm-muted);
}

.crm-sello-total-letra {
  display: inline-flex;
  align-items: baseline;
  font-size: 40px;
  font-weight: 500;
  line-height: 40px;
  letter-spacing: -0.035em;
}

.crm-sello[data-tamano="compacto"] .crm-sello-total-letra {
  font-size: 24px;
  line-height: 24px;
}

.crm-sello-total-letra .crm-sello-aprox {
  margin-right: 2px;
  color: var(--crm-muted);
  font-size: 20px;
  line-height: 20px;
}

.crm-sello[data-tamano="compacto"] .crm-sello-total-letra .crm-sello-aprox {
  font-size: 13px;
}

.crm-sello-total-rotulo {
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crm-sello[data-tamano="compacto"] .crm-sello-total-rotulo {
  display: none;
}

.crm-sello-ejes {
  display: grid;
  gap: 8px;
  margin: 0;
}

.crm-sello[data-tamano="compacto"] .crm-sello-ejes {
  grid-template-columns: repeat(3, max-content);
  column-gap: 12px;
}

.crm-sello[data-tamano="compacto"] .crm-sello-eje {
  grid-template-columns: max-content;
  justify-items: start;
  row-gap: 2px;
}

.crm-sello-eje {
  display: grid;
  grid-template-columns: minmax(96px, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 4px;
}

.crm-sello[data-tamano="normal"] .crm-sello-eje + .crm-sello-eje {
  padding-top: 8px;
  border-top: 1px solid var(--crm-line);
}

.crm-sello-nombre {
  display: flex;
  align-items: center;
  min-height: 28px;
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crm-sello[data-tamano="compacto"] .crm-sello-nombre {
  min-height: 16px;
  font-family: var(--crm-sans);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}

.crm-sello[data-tamano="compacto"] .crm-sello-valor > .crm-sello-letra {
  grid-column: 1;
}

.crm-sello[data-tamano="compacto"] .crm-sello-letra:not([data-elegida]) {
  border-style: dashed;
}

.crm-sello-valor {
  display: contents;
}

.crm-sello-valor > .crm-sello-escala {
  grid-column: 2;
}

.crm-sello-escala {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
}

.crm-sello[data-tamano="compacto"] .crm-sello-escala {
  height: 24px;
}

.crm-sello-letra {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--crm-line);
  background: transparent;
  color: var(--crm-dim);
  font-family: var(--crm-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
  transition: background-color var(--crm-t-salida) var(--crm-snap), color var(--crm-t-color) var(--crm-snap);
}

.crm-sello[data-tamano="compacto"] .crm-sello-letra {
  width: 24px;
  height: 20px;
  font-size: 12px;
  line-height: 16px;
}

/* La elegida, flecha: la punta sale hacia la izquierda, hacia el nombre del eje. */
.crm-sello-letra[data-elegida] {
  width: 40px;
  border-color: var(--crm-control);
  background: var(--crm-panel-3);
  color: var(--crm-text);
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
  padding-left: 6px;
}

.crm-sello[data-tamano="compacto"] .crm-sello-letra[data-elegida] {
  width: 32px;
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 50%);
  padding-left: 4px;
}

.crm-sello-letra[data-elegida][data-clase="A"] {
  box-shadow: inset 0 -2px 0 var(--crm-acento);
}

.crm-sello-letra .crm-sello-aprox {
  margin-right: 2px;
  color: var(--crm-muted);
  font-weight: 400;
}

button.crm-sello-letra {
  cursor: pointer;
}

@media (hover: hover) {
  button.crm-sello-letra:not([data-elegida]):hover {
    background: var(--crm-panel-2);
    color: var(--crm-text-2);
    transition-duration: 0ms;
  }
}

button.crm-sello-letra:active {
  transform: scale(0.96);
  transition: transform var(--crm-t-pulsar) var(--crm-snap);
}

.crm-sello-escala[aria-disabled="true"] .crm-sello-letra {
  border-color: var(--crm-line-2);
  color: var(--crm-dim);
  cursor: not-allowed;
}

.crm-sello-eje[data-vacio] .crm-sello-letra {
  border-style: dashed;
}

.crm-sello-motivo {
  grid-column: 1 / -1;
  max-width: 68ch;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
}

/* ── PistaHabla ─────────────────────────────────────────────────────────
   Reparto arriba (barra de 8 con la cota del objetivo), regla de minutos y
   una pista de 28 por voz: nombre 112 · ondas · dato 48. */

.crm-pista {
  display: grid;
  gap: 12px;
  margin: 0;
}

.crm-reparto {
  container-type: inline-size;
  display: grid;
  gap: 8px;
  padding-bottom: 20px;
}

.crm-reparto-cifras {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: var(--crm-muted);
}

.crm-reparto-cifra {
  color: var(--crm-text);
  font-size: 28px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

.crm-reparto[data-tamano="compacto"] .crm-reparto-cifra {
  font-size: 20px;
  line-height: 28px;
}

.crm-reparto-cifra small,
.crm-pista-dato small,
.crm-cierre-cifra small {
  color: var(--crm-muted);
  font-size: 0.6em;
  font-weight: 400;
  letter-spacing: 0;
}

.crm-reparto-barra {
  position: relative;
  display: flex;
  height: 8px;
  background: var(--crm-panel-2);
}

.crm-reparto-cliente {
  background: var(--crm-serie-2);
}

.crm-reparto-hueco {
  background: var(--crm-panel-3);
}

.crm-reparto-nosotros {
  background: var(--crm-serie-6);
}

.crm-reparto-cota {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 1px;
  background: var(--crm-text);
}

.crm-reparto-cota > span {
  position: absolute;
  top: 16px;
  left: 0;
  padding-left: 6px;
  border-left: 1px solid var(--crm-text);
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  white-space: nowrap;
}

.crm-reparto-cota > span > b {
  font-weight: 400;
}

/* Pasada la mitad, la etiqueta se lee hacia la izquierda de la cota: nunca se sale por la derecha. */
.crm-reparto-cota[data-ancla="derecha"] > span {
  left: auto;
  right: 0;
  padding-left: 0;
  padding-right: 6px;
  border-left: 0;
  border-right: 1px solid var(--crm-text);
}

@container (max-width: 400px) {
  .crm-reparto-cota-texto {
    display: none;
  }
}

.crm-reparto[data-cumple] .crm-reparto-cota > span {
  color: var(--crm-acento);
}

.crm-reparto-ventana {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  margin: 16px 0 0;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
}

.crm-reparto-resto::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 8px;
  margin-right: 6px;
  background: var(--crm-panel-3);
  border: 1px solid var(--crm-line-2);
  vertical-align: 0;
}

.crm-pista-mesa {
  position: relative;
  display: grid;
  border-top: 1px solid var(--crm-line);
  border-bottom: 1px solid var(--crm-line);
}

.crm-pista-regla,
.crm-pista-voz,
.crm-pista-marcas {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 48px;
  align-items: center;
  column-gap: 12px;
}

.crm-pista-regla {
  height: 24px;
  border-bottom: 1px solid var(--crm-line);
}

.crm-pista-escala {
  position: relative;
  align-self: stretch;
  min-width: 0;
}

.crm-pista-minuto {
  position: absolute;
  top: 4px;
  padding-left: 4px;
  border-left: 1px solid var(--crm-line-2);
  color: var(--crm-dim);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.crm-pista-minuto[data-fin] {
  padding-left: 0;
  padding-right: 4px;
  border-left: 0;
  border-right: 1px solid var(--crm-line-2);
  transform: translateX(-100%);
}

.crm-pista-voces {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crm-pista-voz {
  height: 36px;
  border-bottom: 1px solid var(--crm-line);
  transition: background-color var(--crm-t-salida) var(--crm-snap);
}

.crm-pista-voz:last-child {
  border-bottom: 0;
}

@media (hover: hover) {
  .crm-pista-voz:hover {
    background: var(--crm-panel-2);
    transition-duration: 0ms;
  }
}

.crm-pista-nombre {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  padding-left: 8px;
  overflow: hidden;
  white-space: nowrap;
}

.crm-pista-quien {
  color: var(--crm-text);
  font-weight: 500;
}

.crm-pista-voz[data-lado="nosotros"] .crm-pista-quien {
  color: var(--crm-text-2);
  font-weight: 400;
}

.crm-pista-rol {
  overflow: hidden;
  color: var(--crm-muted);
  font-size: 12px;
  text-overflow: ellipsis;
}

.crm-pista-ondas {
  position: absolute;
  top: 12px;
  left: 0;
  width: 100%;
  height: 12px;
  overflow: visible;
}

.crm-pista-voz[data-lado="cliente"] .crm-pista-ondas rect {
  fill: var(--crm-serie-2);
}

.crm-pista-voz[data-lado="nosotros"] .crm-pista-ondas rect {
  fill: var(--crm-serie-6);
}

.crm-pista-ondas rect {
  transform-origin: center;
  transform-box: fill-box;
}

.crm-pista-corte {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--crm-control);
}

.crm-pista-fuera {
  position: absolute;
  top: 0;
  bottom: 0;
  background: repeating-linear-gradient(135deg, var(--crm-rejilla) 0 1px, transparent 1px 6px);
  pointer-events: none;
}

.crm-pista-dato {
  justify-self: end;
  padding-right: 8px;
  color: var(--crm-text);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  outline-offset: 2px;
}

.crm-pista-marcas {
  height: 44px;
}

.crm-pista-marca[data-fila="2"] {
  top: 24px;
}

/* Las del final se leen hacia la izquierda, para no salirse. */
.crm-pista-marca[data-fin] {
  padding-left: 0;
  padding-right: 4px;
  border-left: 0;
  border-right: 1px solid var(--crm-control);
  transform: translateX(-100%);
}

.crm-pista-marca {
  position: absolute;
  top: 4px;
  padding-left: 4px;
  border-left: 1px solid var(--crm-control);
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
}

.crm-pista-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
}

.crm-pista-leyenda [data-lado]::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 8px;
  margin-right: 6px;
  vertical-align: 0;
}

.crm-pista-leyenda [data-lado="cliente"]::before {
  background: var(--crm-serie-2);
}

.crm-pista-leyenda [data-lado="nosotros"]::before {
  background: var(--crm-serie-6);
}

.crm-pista-leyenda > :last-child {
  margin-left: auto;
  font-family: var(--crm-mono);
  font-size: 11px;
}

@container (max-width: 560px) {
  .crm-pista-regla,
  .crm-pista-voz,
  .crm-pista-marcas {
    grid-template-columns: 72px minmax(0, 1fr) 40px;
    column-gap: 8px;
  }
  .crm-pista-rol {
    display: none;
  }
}

@media (max-width: 560px) {
  .crm-pista-regla,
  .crm-pista-voz,
  .crm-pista-marcas {
    grid-template-columns: 72px minmax(0, 1fr) 40px;
    column-gap: 8px;
  }
  .crm-pista-rol {
    display: none;
  }
  .crm-pista-minuto:not([data-par]) {
    display: none;
  }
}

/* ── Guion ─────────────────────────────────────────────────────────────
   Hoja de rodaje: código de tiempo de 48 al margen, personaje en mono y
   parlamento a 14/22, con 68 caracteres de ancho. */

.crm-guion {
  display: grid;
  gap: 16px;
}

.crm-guion-herramientas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.crm-guion-herramientas > .crm-campo-caja,
.crm-guion-herramientas > :nth-child(2) {
  flex: 1 1 200px;
  max-width: 320px;
}

.crm-guion-cuenta {
  margin-left: auto;
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

.crm-guion-hoja {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--crm-line);
}

.crm-guion-parlamento {
  display: grid;
  grid-template-columns: 48px minmax(0, 68ch);
  column-gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--crm-line);
}

.crm-guion-capitulo {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 16px;
  align-items: baseline;
  padding: 20px 0 8px;
  border-bottom: 1px solid var(--crm-line-2);
  color: var(--crm-text);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crm-guion-pliegue {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-top: 8px;
  font-family: var(--crm-sans);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}

.crm-guion-aviso {
  color: var(--crm-muted);
}

.crm-guion-desplegar {
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--crm-line-2);
  background: transparent;
  color: var(--crm-text-2);
  font-family: var(--crm-sans);
  font-size: 12px;
  line-height: 16px;
  cursor: pointer;
  transition: background-color var(--crm-t-salida) var(--crm-snap);
}

@media (hover: hover) {
  .crm-guion-desplegar:hover {
    background: var(--crm-panel-2);
    color: var(--crm-text);
    transition-duration: 0ms;
  }
}

.crm-guion-desplegar:focus-visible {
  outline: 1px solid var(--crm-acento);
  outline-offset: 2px;
}

.crm-guion-capitulo[data-plegado] {
  border-bottom-style: dashed;
}

.crm-guion-capitulo > span:first-child {
  color: var(--crm-muted);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.crm-guion-tiempo {
  padding-top: 2px;
  color: var(--crm-dim);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

.crm-guion-bloque {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.crm-guion-personaje {
  color: var(--crm-text);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crm-guion-parlamento[data-lado="nosotros"] .crm-guion-personaje {
  color: var(--crm-muted);
}

.crm-guion-parlamento[data-lado="cliente"] .crm-guion-personaje::before,
.crm-guion-parlamento[data-lado="nosotros"] .crm-guion-personaje::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  vertical-align: 0;
}

.crm-guion-parlamento[data-lado="cliente"] .crm-guion-personaje::before {
  background: var(--crm-serie-2);
}

.crm-guion-parlamento[data-lado="nosotros"] .crm-guion-personaje::before {
  background: var(--crm-serie-6);
}

.crm-guion-texto {
  margin: 0;
  color: var(--crm-text-2);
  font-size: 14px;
  line-height: 22px;
  overflow-wrap: anywhere;
}

.crm-guion-parlamento[data-lado="nosotros"] .crm-guion-texto {
  color: var(--crm-muted);
}

.crm-guion-texto mark {
  background: var(--crm-seleccion);
  color: var(--crm-text);
}

@media (max-width: 560px) {
  .crm-guion-parlamento {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 4px;
  }
}

/* ── TarjetaObjecion ────────────────────────────────────────────────── */

.crm-objecion {
  display: grid;
  gap: 8px;
  padding: 16px 20px;
  border: 1px solid var(--crm-line);
  border-left: 2px solid var(--crm-line-2);
  background: var(--crm-panel);
}

.crm-objecion[data-estado="abierta"] {
  border-left-color: var(--crm-error);
}

.crm-objecion[data-estado="a_medias"] {
  border-left-color: var(--crm-aviso);
}

.crm-objecion[data-estado="resuelta"] {
  border-left-color: var(--crm-acento);
}

.crm-objecion-cabeza {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
}

.crm-objecion-cita {
  color: var(--crm-text);
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -0.01em;
  quotes: "«" "»";
}

/* El tampón: mono, filete del tono y dos grados de giro. */
.crm-objecion-sello {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border: 1px solid currentColor;
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(-2deg);
}

.crm-objecion[data-estado="abierta"] .crm-objecion-sello {
  color: var(--crm-error);
}

.crm-objecion[data-estado="a_medias"] .crm-objecion-sello {
  color: var(--crm-aviso);
}

.crm-objecion[data-estado="resuelta"] .crm-objecion-sello {
  color: var(--crm-acento);
}

.crm-objecion-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin: 0;
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
}

.crm-objecion-meta > span:not(:last-child)::after {
  content: " ·";
  color: var(--crm-dim);
}

.crm-objecion-pares {
  display: grid;
  gap: 8px;
  margin: 4px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--crm-line);
}

.crm-objecion-pares > div {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 12px;
}

.crm-objecion-pares dt {
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 20px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crm-objecion-pares dd {
  margin: 0;
  max-width: 68ch;
}

.crm-objecion-pares [data-cierre] dd {
  color: var(--crm-text);
}

@media (max-width: 560px) {
  .crm-objecion {
    padding: 16px;
  }
  .crm-objecion-pares > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

/* ── MedidorCierre ──────────────────────────────────────────────────────
   Cifra de 40 y regla de calibre de 32: graduación cada 5 (4 px), cada 25 con
   cifra (8 px), zona de cierre en rejilla y aguja de acento de 20. */

.crm-cierre {
  display: grid;
  gap: 12px;
}

.crm-cierre-lectura {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

.crm-cierre-cifra {
  color: var(--crm-text);
  font-size: 40px;
  font-weight: 500;
  line-height: 44px;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

.crm-cierre[data-tamano="compacto"] .crm-cierre-cifra {
  font-size: 28px;
  line-height: 32px;
}

.crm-cierre-etiqueta {
  color: var(--crm-text-2);
  font-size: 14px;
  line-height: 22px;
}

.crm-cierre[data-tamano="compacto"] .crm-cierre-etiqueta {
  font-size: 13px;
  line-height: 20px;
}

.crm-cierre-regla {
  position: relative;
  height: 32px;
  border-bottom: 1px solid var(--crm-control);
}

.crm-cierre-zona {
  position: absolute;
  top: 8px;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(135deg, var(--crm-rejilla) 0 1px, transparent 1px 6px);
}

.crm-cierre-avance {
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--crm-text);
  transform-origin: left;
  animation: crm-cierre-dibujar var(--crm-t-dibujo) var(--crm-curva) both;
}

@keyframes crm-cierre-dibujar {
  from {
    transform: scaleX(0);
  }
}

.crm-cierre-marca {
  position: absolute;
  bottom: 0;
  width: 1px;
  height: 4px;
  background: var(--crm-line-2);
}

.crm-cierre-marca[data-mayor] {
  height: 8px;
  background: var(--crm-control);
}

.crm-cierre-marca > span {
  position: absolute;
  bottom: 12px;
  left: 0;
  color: var(--crm-dim);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
  transform: translateX(-50%);
}

.crm-cierre-marca[data-borde="inicio"] > span {
  transform: none;
}

.crm-cierre-marca[data-borde="fin"] > span {
  left: auto;
  right: 0;
  transform: none;
}

.crm-cierre-aguja {
  position: absolute;
  bottom: 0;
  width: 1px;
  height: 20px;
  background: var(--crm-acento);
}

.crm-cierre-aguja::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  width: 9px;
  height: 4px;
  background: var(--crm-acento);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.crm-cierre-hueco {
  position: absolute;
  bottom: -4px;
  width: 8px;
  height: 8px;
  border: 1px solid var(--crm-text-2);
  background: var(--crm-bg);
  transform: translateX(-4px) rotate(45deg);
}

.crm-cierre-pie {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  margin: 0;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
}

.crm-cierre-segunda {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.crm-cierre-segunda i {
  width: 8px;
  height: 8px;
  border: 1px solid var(--crm-text-2);
  transform: rotate(45deg);
}

.crm-cierre-segunda b {
  color: var(--crm-text);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* ── TicketPropuesta ───────────────────────────────────────────────────
   Resguardo de 20 de relleno, conceptos con puntos guía, línea de corte con
   dos muescas de 12 y el total a 20. */

.crm-cuenta-ticket {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  padding: 20px;
  border: 1px solid var(--crm-line);
  background: var(--crm-panel);
}

.crm-cuenta-ticket[data-recomendada] {
  border-color: var(--crm-line-2);
  box-shadow: inset 0 2px 0 var(--crm-acento);
}

.crm-cuenta-ticket-cabeza {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 24px;
}

.crm-cuenta-ticket-estado {
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crm-cuenta-ticket-sello {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 6px;
  border: 1px solid var(--crm-acento-linea);
  color: var(--crm-acento);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  transform: rotate(-2deg);
}

.crm-cuenta-ticket-titulo {
  margin: 0;
  color: var(--crm-text);
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -0.01em;
}

.crm-cuenta-ticket-lineas {
  flex: 1;
  align-content: start;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crm-cuenta-ticket-linea {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(16px, 1fr) auto;
  align-items: end;
  column-gap: 6px;
}

.crm-cuenta-ticket-concepto {
  display: grid;
  min-width: 0;
}

.crm-cuenta-ticket-concepto small {
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
}

.crm-cuenta-ticket-linea:not(:has(.crm-cuenta-ticket-importe)) .crm-cuenta-ticket-concepto {
  grid-column: 1 / -1;
}

.crm-cuenta-ticket-guia {
  height: 1px;
  margin-bottom: 6px;
  background: radial-gradient(circle, var(--crm-control) 0.5px, transparent 1px) 0 0 / 4px 1px repeat-x;
}

.crm-cuenta-ticket-importe {
  color: var(--crm-text);
  font-family: var(--crm-mono);
  font-size: 12px;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Línea de corte: discontinua, con una muesca a cada lado del color del lienzo. */
.crm-cuenta-ticket-corte {
  position: relative;
  height: 1px;
  margin: 4px -20px;
  background: repeating-linear-gradient(90deg, var(--crm-line-2) 0 6px, transparent 6px 10px);
}

/* Muescas: medio círculo del color del lienzo a cada lado, dibujado dentro del ticket (no sobresale). */
.crm-cuenta-ticket-corte::before,
.crm-cuenta-ticket-corte::after {
  content: "";
  position: absolute;
  top: -6px;
  width: 7px;
  height: 12px;
  border: 1px solid var(--crm-line);
  background: var(--crm-bg);
}

.crm-cuenta-ticket-corte::before {
  left: -1px;
  border-left: 0;
  border-radius: 0 6px 6px 0;
}

.crm-cuenta-ticket-corte::after {
  right: -1px;
  border-right: 0;
  border-radius: 6px 0 0 6px;
}

.crm-cuenta-ticket-total {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  color: var(--crm-muted);
}

.crm-cuenta-ticket-total b {
  white-space: nowrap;
  color: var(--crm-text);
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.crm-cuenta-ticket-hueco {
  display: block;
  margin: -6px 0;
}

.crm-cuenta-ticket-fila {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  align-items: stretch;
  gap: 16px;
}

@supports (grid-template-rows: subgrid) {
  .crm-cuenta-ticket-fila > .crm-cuenta-ticket {
    display: grid;
    grid-row: span 6;
    grid-template-rows: subgrid;
    row-gap: 12px;
  }
}

.crm-cuenta-ticket-pie {
  margin: 0;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
}

/* Movimiento reducido: solo color. */
@media (prefers-reduced-motion: reduce) {
  .crm-expediente-hito[data-estado="pendiente"] .crm-expediente-folio::after,
  .crm-expediente-contenido,
  .crm-cierre-avance {
    animation: none;
  }
  .crm-expediente-abre,
  button.crm-sello-letra:active {
    transition: none;
    transform: none;
  }
  .crm-expediente-hito[data-abierto] .crm-expediente-abre {
    transform: rotate(180deg);
  }
}

@media (forced-colors: active) {
  .crm-sello-letra[data-elegida],
  .crm-reparto-cliente,
  .crm-reparto-nosotros {
    forced-color-adjust: none;
    border: 1px solid CanvasText;
  }
}

/*
 * Familia «datos» · piezas de meta (16-oct-2026, apartado «Meta» de Talleres):
 * MarcadorFlaps (tablero de estación), CarreraMeta (pista con la liebre),
 * PizarraSemana (palotes de tiza), CartaMision y MazoMisiones (naipes) y
 * ContratoSellado (sello de caucho). Solo variables --crm-*; medidas de
 * FUNDAMENTOS (rejilla de 4, letras de la escala, pesos 400/500, radio 0).
 */

:is(.crm-flaps, .crm-carrera, .crm-pizarra, .crm-mazo, .crm-contrato) *,
:is(.crm-flaps, .crm-carrera, .crm-pizarra, .crm-mazo, .crm-contrato) *::before,
:is(.crm-flaps, .crm-carrera, .crm-pizarra, .crm-mazo, .crm-contrato) *::after {
  box-sizing: border-box;
}

:is(.crm-flaps, .crm-carrera, .crm-pizarra, .crm-mazo, .crm-contrato) {
  min-width: 0;
  color: var(--crm-text-2);
  font-family: var(--crm-sans);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: -0.005em;
}

/* ── MarcadorFlaps ───────────────────────────────────────────────────────
   Casilla de 64 × 88 (compacta 40 × 56) partida por la bisagra: la mitad de
   arriba un escalón más clara, una ranura de 2 px del color del lienzo y los
   dos ejes de 4 en sus extremos. La cifra, en el display de la casa. */

.crm-flaps {
  display: inline-grid;
  justify-items: start;
  gap: 12px;
}

.crm-flaps-tablero {
  display: flex;
  gap: 4px;
}

.crm-flaps-casilla {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px;
  height: 88px;
  overflow: hidden;
  background: var(--crm-panel-2);
  border: 1px solid var(--crm-line-2);
  perspective: 240px;
}

/* La mitad de arriba, un escalón más clara (sin degradados: una capa). */
.crm-flaps-casilla::before {
  content: "";
  position: absolute;
  inset: 0 0 50% 0;
  background: var(--crm-panel-3);
}

/* La ranura de la bisagra y sus dos ejes. */
.crm-flaps-casilla::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  right: 0;
  height: 2px;
  background: var(--crm-bg);
  box-shadow: inset 4px 0 0 0 var(--crm-control), inset -4px 0 0 0 var(--crm-control);
  z-index: 3;
}

.crm-flaps-casilla[data-vacia] .crm-flaps-cifra {
  visibility: hidden;
}

.crm-flaps-cifra {
  position: relative;
  z-index: 1;
  color: var(--crm-text);
  font-family: var(--crm-sans);
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

/* La hoja: la mitad de arriba de la cifra nueva, que cae sobre la bisagra. */
.crm-flaps-hoja {
  position: absolute;
  inset: 0 0 50% 0;
  z-index: 2;
  display: grid;
  place-items: end center;
  overflow: hidden;
  background: var(--crm-panel-3);
  transform-origin: 50% 100%;
  visibility: hidden;
}

.crm-flaps-hoja .crm-flaps-cifra {
  transform: translateY(50%);
}

.crm-flaps-hoja[data-cae] {
  visibility: visible;
  animation: crm-flaps-cae var(--crm-t-capa) var(--crm-snap) both;
}

@keyframes crm-flaps-cae {
  from {
    transform: rotateX(88deg);
  }
  to {
    transform: rotateX(0deg);
    visibility: hidden;
  }
}

.crm-flaps[data-tamano="compacto"] .crm-flaps-casilla {
  width: 40px;
  height: 56px;
}

.crm-flaps[data-tamano="compacto"] .crm-flaps-cifra {
  font-size: 28px;
}

.crm-flaps-rotulo {
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crm-flaps-pie {
  margin-top: -8px;
  color: var(--crm-muted);
  font-size: 13px;
  line-height: 20px;
}

/* ── CarreraMeta ─────────────────────────────────────────────────────────
   Lectura arriba (rótulo, cifra de 40/44 y la segunda lectura), pista de 8
   con la salida de 2 px, el avance en una franja de acento, los postes de 16
   que cruzan la pista con su cota debajo y la liebre: un cuadro hueco de 12
   sobre la pista con su cota encima. */

.crm-carrera {
  container-type: inline-size;
  display: grid;
  gap: 32px;
}

.crm-carrera-lectura {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: 24px;
  row-gap: 6px;
}

.crm-carrera-rotulo {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crm-carrera-cifra {
  margin: 0;
  color: var(--crm-text);
  font-size: 40px;
  font-weight: 500;
  line-height: 44px;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.crm-carrera-cifra small {
  margin-left: 4px;
  color: var(--crm-muted);
  font-size: 0.6em;
  font-weight: 400;
  letter-spacing: 0;
}

.crm-carrera-secundario {
  margin: 0;
  padding-bottom: 6px;
  color: var(--crm-muted);
  font-size: 13px;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.crm-carrera-pista {
  position: relative;
  height: 8px;
  margin: 36px 0 28px;
  background: var(--crm-panel-3);
}

.crm-carrera-salida {
  position: absolute;
  top: -8px;
  bottom: -8px;
  left: 0;
  width: 2px;
  background: var(--crm-text);
}

.crm-carrera-avance {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--crm-acento);
  transition: width var(--crm-t-dibujo) var(--crm-curva);
}

.crm-carrera-poste {
  position: absolute;
  top: -4px;
  width: 1px;
  height: 16px;
  background: var(--crm-line-2);
  transform: translateX(-1px);
}

.crm-carrera-poste > span {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--crm-dim);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.crm-carrera-poste[data-ancla="fin"] > span {
  left: auto;
  right: 0;
  transform: none;
}

/* Poste alcanzado: se enciende (marca de acento de 2 px y su cota en texto). */
.crm-carrera-poste[data-alcanzado] {
  width: 2px;
  background: var(--crm-acento);
}

.crm-carrera-poste[data-alcanzado] > span {
  color: var(--crm-text);
}

/* La liebre: guía de 1 px que baja hasta la pista y, encima, el cuadro hueco
   de 8 centrado al píxel en su x; la cota a la derecha del cuadro. */
.crm-carrera-liebre {
  position: absolute;
  bottom: 100%;
  width: 1px;
  height: 20px;
  background: var(--crm-text);
  transform: translateX(-1px);
  transition: left var(--crm-t-dibujo) var(--crm-curva);
}

.crm-carrera-liebre::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  width: 8px;
  height: 8px;
  border: 1px solid var(--crm-text);
  background: var(--crm-bg);
}

.crm-carrera-liebre > span {
  position: absolute;
  top: -8px;
  left: 12px;
  color: var(--crm-text-2);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.crm-carrera-liebre[data-ancla="derecha"] > span {
  left: auto;
  right: 12px;
}

/* Por detrás: el tramo entre lo firmado y la liebre, en trazo discontinuo. */
.crm-carrera-deuda {
  position: absolute;
  top: 0;
  bottom: 0;
  border: 1px dashed var(--crm-text-2);
  border-left: 0;
  transition: left var(--crm-t-dibujo) var(--crm-curva), width var(--crm-t-dibujo) var(--crm-curva);
}

@container (max-width: 400px) {
  .crm-carrera-lectura {
    grid-template-columns: minmax(0, 1fr);
  }
  .crm-carrera-secundario {
    padding-bottom: 0;
    text-align: left;
  }
  .crm-carrera-cifra {
    font-size: 28px;
    line-height: 32px;
  }
  /* Los postes intermedios callan su cota: quedan la mitad y la meta. */
  .crm-carrera-poste:not([data-ancla="fin"], [data-mitad]) > span {
    display: none;
  }
}

/* ── PizarraSemana ───────────────────────────────────────────────────────
   Filas de 44: etiqueta de 96, palotes y la cuenta a la derecha. Grupos de
   cinco en 24 × 20: cuatro palotes y el quinto en diagonal; hecho en texto,
   lo que falta en filete, lo de más en acento. */

.crm-pizarra {
  container-type: inline-size;
  display: grid;
  gap: 12px;
  margin: 0;
}

.crm-pizarra-filas {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crm-pizarra-fila {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 16px;
  min-height: 44px;
  padding: 8px 0;
  border-bottom: 1px solid var(--crm-line);
}

.crm-pizarra-fila:first-child {
  border-top: 1px solid var(--crm-line);
}

.crm-pizarra-etiqueta {
  display: grid;
  color: var(--crm-text-2);
  font-size: 13px;
  line-height: 20px;
}

.crm-pizarra-palotes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  min-width: 0;
}

.crm-pizarra-grupo {
  flex: none;
  display: block;
}

.crm-pizarra-grupo line {
  stroke: var(--crm-line-2);
  stroke-width: 1.6;
  stroke-linecap: square;
}

.crm-pizarra-grupo line[data-trazo="hecho"] {
  stroke: var(--crm-text);
}

.crm-pizarra-grupo line[data-trazo="extra"] {
  stroke: var(--crm-acento);
}

.crm-pizarra-vale {
  color: var(--crm-dim);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  white-space: nowrap;
}

.crm-pizarra-nada {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--crm-line-2);
}

.crm-pizarra-cuenta {
  color: var(--crm-muted);
  font-size: 13px;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.crm-pizarra-cuenta b {
  color: var(--crm-text);
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.02em;
}

.crm-pizarra-fila[data-cumple] .crm-pizarra-cuenta b {
  color: var(--crm-acento);
}

.crm-pizarra-nota {
  color: var(--crm-dim);
  font-size: 12px;
  line-height: 16px;
}

@container (max-width: 400px) {
  .crm-pizarra-fila {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 6px;
  }
  .crm-pizarra-fila > :nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* ── CartaMision y MazoMisiones ──────────────────────────────────────────
   Naipe de 20 de relleno: índice mono arriba a la izquierda y, del revés,
   abajo a la derecha; a quién (15/22), los motivos en chips de 20, la acción
   con verbo (14/22, en texto) y el pie con el destino y la flecha que avanza.
   La primera del mazo, marca de acento de 2 px en el canto de arriba. */

.crm-mazo {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 208px), 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crm-mazo-hueco {
  display: grid;
  min-width: 0;
}

.crm-carta {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 12px;
  min-width: 0;
  min-height: 240px;
  padding: 20px;
  border: 1px solid var(--crm-line);
  background: var(--crm-panel);
  color: var(--crm-text-2);
  text-decoration: none;
  transition: background-color var(--crm-t-salida) var(--crm-snap), border-color var(--crm-t-color) var(--crm-snap);
}

.crm-carta-destacada::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 2px;
  background: var(--crm-text);
}

@media (hover: hover) {
  .crm-carta:hover {
    background: var(--crm-panel-2);
    border-color: var(--crm-line-2);
    transition-duration: 0ms;
  }
  .crm-carta:hover .crm-carta-flecha {
    transform: translateX(2px);
  }
  .crm-carta:hover .crm-carta-indice {
    color: var(--crm-text);
  }
}

.crm-carta:focus-visible {
  outline: 1px solid var(--crm-acento);
  outline-offset: 2px;
}

.crm-carta:active {
  background: var(--crm-panel-3);
}

.crm-carta-indice {
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 12px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
  transition: color var(--crm-t-color) var(--crm-snap);
}

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

.crm-carta-titulo {
  display: -webkit-box;
  overflow: hidden;
  color: var(--crm-text);
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -0.01em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
}

.crm-carta-sub {
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
  overflow-wrap: anywhere;
}

.crm-carta-motivos {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.crm-carta-motivo {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 6px;
  border: 1px solid var(--crm-line-2);
  color: var(--crm-text-2);
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
}

.crm-carta-accion {
  align-self: end;
  color: var(--crm-text);
  font-size: 14px;
  line-height: 22px;
  overflow-wrap: anywhere;
}

.crm-carta-pie {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--crm-line);
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
}

.crm-carta-flecha {
  transition: transform var(--crm-t-gesto) var(--crm-snap);
}

/* En estrecho, la carta pierde altura: índice de pie fuera. */
@container (max-width: 560px) {
  .crm-carta {
    min-height: 0;
    grid-template-rows: auto;
  }
}

/* ── ContratoSellado ─────────────────────────────────────────────────────
   Hoja de 24 de relleno con su rótulo, a quién (20/28), las condiciones con
   puntos guía, la raya de la firma y el sello: marco de 2 px de acento con el
   contramarco de 1 px dentro, la palabra en mono 20 y la fecha en mono 11,
   girado −6°. Al celebrar, cae desde 1,6 y se asienta en 320 ms. */

.crm-contrato {
  position: relative;
  container-type: inline-size;
  display: grid;
  gap: 16px;
  padding: 24px;
  overflow: hidden;
  border: 1px solid var(--crm-line-2);
  background: var(--crm-panel);
}

.crm-contrato-rotulo {
  margin: 0;
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crm-contrato-titulo {
  margin: -8px 0 0;
  padding-right: 136px;
  color: var(--crm-text);
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.crm-contrato-lineas {
  display: grid;
  gap: 8px;
  margin: 0;
}

.crm-contrato-linea {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

/* El concepto lleva los puntos guía hasta el valor (un filete punteado que crece). */
.crm-contrato-linea dt {
  display: flex;
  flex: 1;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  color: var(--crm-text-2);
}

.crm-contrato-linea dt::after {
  content: "";
  flex: 1;
  min-width: 16px;
  border-bottom: 1px dotted var(--crm-line-2);
}

.crm-contrato-linea dd {
  margin: 0;
  color: var(--crm-text);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: right;
  overflow-wrap: anywhere;
}

/* Las rayas de la firma, una por firmante, con quién firma debajo. */
.crm-contrato-firmas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 200px));
  gap: 24px;
  margin-top: 24px;
}

.crm-contrato-firma {
  margin: 0;
  padding-top: 6px;
  border-top: 1px solid var(--crm-text-2);
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
}

.crm-contrato-pie {
  margin: 0;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
}

.crm-contrato-sello {
  position: absolute;
  top: 20px;
  right: 20px;
  display: grid;
  justify-items: center;
  gap: 2px;
  margin: 0;
  padding: 8px 12px;
  border: 2px solid var(--crm-acento);
  color: var(--crm-acento);
  transform: rotate(-6deg);
}

.crm-contrato-sello::before {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1px solid var(--crm-acento-linea);
  pointer-events: none;
}

.crm-contrato-sello b {
  font-family: var(--crm-mono);
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crm-contrato-sello span {
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

/* El hueco del sello: trazo discontinuo apagado, sin giro de más. */
.crm-contrato-sello[data-vacio] {
  border: 1px dashed var(--crm-line-2);
  color: var(--crm-dim);
}

.crm-contrato-sello[data-vacio]::before {
  content: none;
}

.crm-contrato[data-animar] .crm-contrato-sello {
  animation: crm-sello-cae var(--crm-t-capa) var(--crm-snap) both;
  animation-delay: var(--crm-t-entrada);
}

@keyframes crm-sello-cae {
  from {
    opacity: 0;
    transform: rotate(-14deg) scale(1.6);
  }
  to {
    opacity: 1;
    transform: rotate(-6deg) scale(1);
  }
}

@container (max-width: 400px) {
  .crm-contrato-titulo {
    padding-right: 0;
    padding-top: 64px;
  }
}

/* Movimiento reducido: la hoja no cae, el sello solo aparece, la pista no se dibuja. */
@media (prefers-reduced-motion: reduce) {
  .crm-flaps-hoja[data-cae] {
    animation: none;
    visibility: hidden;
  }
  .crm-carrera-avance,
  .crm-carrera-liebre,
  .crm-carrera-deuda,
  .crm-carta,
  .crm-carta-flecha {
    transition: none;
  }
  .crm-carta:hover .crm-carta-flecha {
    transform: none;
  }
  /* El hueco del sello: trazo discontinuo apagado, sin giro de más. */
.crm-contrato-sello[data-vacio] {
  border: 1px dashed var(--crm-line-2);
  color: var(--crm-dim);
}

.crm-contrato-sello[data-vacio]::before {
  content: none;
}

.crm-contrato[data-animar] .crm-contrato-sello {
    animation-name: crm-sello-aparece;
  }
  @keyframes crm-sello-aparece {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

@media (forced-colors: active) {
  .crm-carrera-avance,
  .crm-carrera-poste[data-alcanzado] {
    forced-color-adjust: none;
    background: Highlight;
  }
  .crm-flaps-casilla::after {
    forced-color-adjust: none;
    background: CanvasText;
  }
}

/*
 * Familia «graficos» del sistema de marca Criterium (pasada 2: a la altura de
 * Linear Insights, Vercel Analytics y Stripe). Medidas en
 * docs/marca/FUNDAMENTOS.md; aquí, las de los gráficos:
 *
 *   Marco ........ relleno 20 · título 15/500 · rótulo mono 11 · cifra 28/500
 *                  · fila de controles de 28 (rango y acciones de icono)
 *   Líneas ....... trazo 1,5 · área con degradado del color de la serie
 *                  (18 % → 0 %) · punto vivo de 6 con halo que late
 *                  · guía de 1 discontinua · consejo flotante instantáneo
 *   Barras ....... grosor ≤ 24 · 40 % de la banda es aire · esquina recta
 *                  · valor encima en mono 11 · destacada en su color, resto en
 *                  reposo; en verde solo si es lo vivo
 *   Embudo ....... filas de 36 · barra de 8 · pérdida como hueco con filete
 *                  punteado de 1 · etapa a 13 · conversión en mono 11
 *   Donut ........ anillo de 10 · 2 px de lienzo entre segmentos · total a 28
 *   Sparkline .... trazo de 1,5 con el punto final; consejo de 24 al pasar
 *   Referencias .. media discontinua 2/4 en --crm-muted con su rótulo · fila
 *                  «mín · media · máx» de 24 · serie apagada al 32 %
 *   Ejes ......... mono 11 en --crm-dim, sin mayúsculas · rejilla --crm-line al 60 %
 *   Entrada ...... 600 ms con --crm-curva, una sola vez (al entrar en pantalla)
 *   Carga ........ silueta de la forma real con barrido, solo pasados 300 ms
 *
 * Solo variables --crm-*: nunca un color literal. Radio 0. Con movimiento
 * reducido, todo se pinta directo y solo cambian colores.
 */

/*
 * SY-03 · Alfa de la banda por tema, medido (relleno compuesto sobre el panel,
 * serie 1): al 16 %, grafito 1,50:1, oscuro 1,44:1, contraste 1,45:1 y claro
 * 1,28:1, el más tenue. En claro, 24 %: 1,47:1, el mismo orden que los oscuros.
 * Lo fija cada zona de tema (también una zona oscura dentro de una página clara).
 */
[data-crm-tema] {
  --crm-gr-banda-alfa-tema: 16%;
}

[data-crm-tema="claro"] {
  --crm-gr-banda-alfa-tema: 24%;
}

@media (prefers-color-scheme: light) {
  [data-crm-tema="sistema"] {
    --crm-gr-banda-alfa-tema: 24%;
  }
}

/* ── Raíces: variables propias de la familia ────────────────────────── */
.crm-gr,
.crm-gr-marco,
.crm-gr-ampliado,
.crm-gr-spark,
.crm-gr-medidor {
  --crm-gr-fondo: var(--crm-bg);
  --crm-gr-resalte: var(--crm-panel-2);
  /* Degradado de las áreas: del 18 % del color de la serie a nada. */
  --crm-gr-area-alfa: 18%;
  --crm-gr-area-apilada: 28%;
  --crm-gr-banda-alfa: var(--crm-gr-banda-alfa-tema, 16%);
  --crm-gr-rejilla: var(--crm-rejilla);
}

/* ── Figura y series ─────────────────────────────────────────────────── */
.crm-gr {
  container-type: inline-size;
  position: relative;
  min-width: 0;
  margin: 0;
  color: var(--crm-text);
  font-family: var(--crm-sans);
  font-size: 13px;
  line-height: 20px;
}

.crm-gr-s1 { --s: var(--crm-serie-1); }
.crm-gr-s2 { --s: var(--crm-serie-2); }
.crm-gr-s3 { --s: var(--crm-serie-3); }
.crm-gr-s4 { --s: var(--crm-serie-4); }
.crm-gr-s5 { --s: var(--crm-serie-5); }
.crm-gr-s6 { --s: var(--crm-serie-6); }
.crm-gr-comparacion { --s: var(--crm-serie-comparacion); }

.crm-gr-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.crm-gr-plano {
  position: relative;
  min-width: 0;
}

.crm-gr-plano[data-desplazable] {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--crm-line-2) transparent;
}

.crm-gr-svg {
  display: block;
  overflow: visible;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

/* ── Rejilla y ejes ──────────────────────────────────────────────────── */
.crm-gr-rejilla line {
  stroke: var(--crm-gr-rejilla);
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.crm-gr-rejilla line[data-cero] {
  stroke: var(--crm-line-2);
}

/* Ejes: mono 11 en --crm-dim, en frase (las mayúsculas, solo en rótulos). */
.crm-gr-eje text,
.crm-gr-valor,
.crm-gr-umbral text {
  fill: var(--crm-dim);
  font-family: var(--crm-mono);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

.crm-gr-eje-nombre {
  fill: var(--crm-muted);
}

/* Valor sobre la barra: mono 11 tabular; sube a texto al pasar. */
.crm-gr-valor {
  fill: var(--crm-muted);
}

.crm-gr-valor[data-activo] {
  fill: var(--crm-text);
}

/* Columna bajo el puntero: el escalón de hover, al instante. */
.crm-gr-columna {
  fill: var(--crm-gr-resalte);
}

/* Línea guía: 1 px discontinua, nítida. */
.crm-gr-guia {
  stroke: var(--crm-control);
  stroke-width: 1;
  stroke-dasharray: 2 2;
  shape-rendering: crispEdges;
  pointer-events: none;
}

/* ── Marcas de serie (forma propia: no solo color) ──────────────────── */
.crm-gr-marca {
  fill: var(--s);
  stroke: var(--crm-gr-fondo);
  stroke-width: 1;
}

.crm-gr-marca[data-trazo] {
  fill: none;
  stroke: var(--s);
  stroke-width: 1.5;
}

/* Al pasar, la marca crece a 8 con un aro de lienzo de 2: se despega del trazo. */
.crm-gr-marca-activa {
  stroke-width: 2;
  pointer-events: none;
}

.crm-gr-final .crm-gr-marca {
  stroke: none;
}

.crm-gr-final .crm-gr-marca[data-trazo] {
  stroke: var(--s);
}

/* Halo del punto vivo: nace en el punto (6 px) y se abre hasta 18 px. */
.crm-gr-latido {
  fill: var(--s);
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  pointer-events: none;
}

/* ── Líneas y áreas ─────────────────────────────────────────────────── */
.crm-gr-trazo {
  fill: none;
  stroke: var(--s);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.crm-gr-trazo[data-comparacion] {
  stroke-dasharray: 4 4;
  stroke-linecap: butt;
}

/* Lo estimado de una serie: su mismo color, discontinuo desde el último dato real. */
.crm-gr-trazo[data-estimado] {
  stroke-dasharray: 4 3;
  stroke-linecap: butt;
}

/*
 * Banda de una serie (el intervalo real de cada dato: mín–máx, percentiles):
 * un relleno plano del color de la serie, sin degradado ni borde. Un hueco
 * en la banda es «sin dato», no un intervalo de cero.
 */
.crm-gr-banda {
  fill: color-mix(in oklab, var(--s) var(--crm-gr-banda-alfa), transparent);
  stroke: none;
  pointer-events: none;
}

/* Relleno entre dos series: el color de la que va por encima, plano y tenue; el signo lo dice la leyenda, no el verde. */
.crm-gr-relleno {
  fill: color-mix(in oklab, var(--s) var(--crm-gr-banda-alfa), transparent);
  stroke: none;
  pointer-events: none;
}

/* Máximo y mínimo permanentes: un punto de texto (máx) y uno apagado (mín), con aro de lienzo. */
.crm-gr-extremo {
  stroke: var(--crm-gr-fondo);
  stroke-width: 2;
  pointer-events: none;
}

.crm-gr-extremo-max {
  fill: var(--crm-text);
}

.crm-gr-extremo-min {
  fill: var(--crm-muted);
}

/* El extremo del eje que fija quien llama, con su valor exacto: un tono por encima de los rótulos redondos. */
.crm-gr-eje-limite {
  fill: var(--crm-text-2);
}

/* Recorte de un dato fuera del dominio de quien llama: un ángulo de 1,5 en --crm-text-2 en el borde del lienzo. */
.crm-gr-recorte {
  fill: none;
  stroke: var(--crm-text-2);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

/* Lo señalado sin puntero (el último dato que se miró): marcado, más quieto que lo activo. */
.crm-gr-marca-senalada {
  stroke-width: 1;
}

.crm-gr-columna[data-senalado] {
  fill: var(--crm-gr-resalte);
}

/* Degradado vertical del color de la serie: 18 % arriba, nada abajo. */
.crm-gr-grad-a {
  stop-color: color-mix(in oklab, var(--s) var(--crm-gr-area-alfa), transparent);
}

.crm-gr-grad-b {
  stop-color: var(--s);
  stop-opacity: 0;
}

.crm-gr-area[data-apilada] {
  fill: color-mix(in oklab, var(--s) var(--crm-gr-area-apilada), transparent);
}

/* ── Barras ─────────────────────────────────────────────────────────── */
.crm-gr-barra {
  fill: var(--s);
  stroke: none;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  shape-rendering: crispEdges;
}

/* Apiladas: un filete de lienzo de 1 px separa cada tramo. */
.crm-gr-barra[data-apilada] {
  stroke: var(--crm-gr-fondo);
  stroke-width: 1;
}

.crm-gr-barra[data-negativo] {
  transform-origin: 50% 0;
}

.crm-gr-barra[data-horizontal] {
  transform-origin: 0 50%;
}

.crm-gr-barra[data-reposo] {
  fill: var(--crm-serie-reposo);
}

/*
 * Destacar informa, no está vivo: la destacada conserva el color de su serie
 * y el resto baja a reposo (FUNDAMENTOS §5.3: el verde no es decorativo). En
 * el acento, solo la destacada que es un dato vivo (`vivo`: el periodo en
 * curso).
 */
.crm-gr-barra[data-destacada] {
  fill: var(--s);
}

.crm-gr-barra[data-destacada][data-vivo] {
  fill: var(--crm-serie-destacada);
}

.crm-gr-barra[data-reposo][data-activo] {
  fill: color-mix(in oklab, var(--crm-serie-reposo) 60%, var(--crm-text));
}

/* Trama: filete o punto de 1 px del color del lienzo cada 4 px. */
.crm-gr-trama {
  stroke: none;
  pointer-events: none;
}

.crm-gr-trama-linea {
  stroke: var(--crm-gr-fondo);
  stroke-width: 1;
}

.crm-gr-trama-punto {
  fill: var(--crm-gr-fondo);
}

/* Barra estimada: relleno tenue de su serie, rayado encima y perfil de 1 px en su color (una previsión, no una medida). */
.crm-gr-barra[data-estimado]:not(.crm-gr-trama) {
  fill: color-mix(in oklab, var(--s) var(--crm-gr-area-apilada), transparent);
  stroke: var(--s);
  stroke-width: 1;
}

.crm-gr-categorias text {
  fill: var(--crm-text-2);
  font-family: var(--crm-sans);
  font-size: 13px;
}

.crm-gr-categorias text[data-activo],
.crm-gr-valores text[data-activo] {
  fill: var(--crm-text);
}

.crm-gr-valores text {
  fill: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* ── Umbral y tendencia ─────────────────────────────────────────────── */
.crm-gr-umbral line {
  stroke: var(--crm-text-2);
  stroke-width: 1;
  stroke-dasharray: 2 2;
  shape-rendering: crispEdges;
}

.crm-gr-umbral text {
  fill: var(--crm-text-2);
}

.crm-gr-umbral[data-tipo="error"] line {
  stroke: var(--crm-error);
  stroke-dasharray: 4 2;
}

.crm-gr-umbral[data-tipo="error"] text {
  fill: var(--crm-error);
}

/* Media: referencia neutra, más callada que un umbral (2/4) y con su rótulo a la izquierda. */
.crm-gr-media line {
  stroke: var(--crm-muted);
  stroke-width: 1;
  stroke-dasharray: 2 4;
  shape-rendering: crispEdges;
}

.crm-gr-media text {
  fill: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  paint-order: stroke;
  stroke: var(--crm-gr-fondo);
  stroke-width: 3px;
}

/* Al pasar por «media» en la fila de estadísticas, la referencia sube a texto. */
.crm-gr-media[data-activo] line {
  stroke: var(--crm-text);
}

.crm-gr-media[data-activo] text {
  fill: var(--crm-text);
}

/*
 * Serie apagada mientras la leyenda resalta otra: al instante y sin tocar el
 * color. Va por fill/stroke-opacity, no por opacity, que es la que anima la
 * entrada de áreas y marcas (600 ms): el resalte no debe heredar ese tiempo.
 */
.crm-gr-capas > g[data-atenuado] {
  opacity: var(--crm-apagado);
}

.crm-gr-trazo[data-atenuado] {
  stroke-opacity: var(--crm-apagado);
}

.crm-gr-area[data-atenuado] {
  fill-opacity: var(--crm-apagado);
}

.crm-gr-final[data-atenuado] .crm-gr-marca {
  fill-opacity: var(--crm-apagado);
  stroke-opacity: var(--crm-apagado);
}

/* ── Fila «mín · media · máx» (una altura: 24) ──────────────────────── */
.crm-gr-estadisticas {
  display: flex;
  flex-wrap: wrap;
  gap: 0 4px;
  margin: 8px 0 0 -8px;
  padding: 0;
  list-style: none;
}

.crm-gr-estadistica {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--crm-text);
  font-family: var(--crm-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  text-transform: none;
  white-space: nowrap;
  transition: background-color var(--crm-t-color) ease;
}

button.crm-gr-estadistica {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.crm-gr-estadistica:hover,
.crm-gr-estadistica[data-activo] {
  background: var(--crm-panel-2);
  transition-duration: 0ms;
}

.crm-gr-estadistica-clave {
  color: var(--crm-muted);
}

.crm-gr-estadistica-valor {
  font-variant-numeric: tabular-nums;
}

.crm-gr-tendencia {
  stroke: var(--crm-text-2);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  pointer-events: none;
}

.crm-gr-punto {
  transition: opacity var(--crm-t-color) ease;
}

.crm-gr-punto[data-atenuado] {
  opacity: var(--crm-apagado);
}

/*
 * Selección de un intervalo (brush): un velo neutro con filete, sin color de serie (el verde es de lo vivo, §5). El
 * lienzo con selección no deja que el navegador tome el arrastre para desplazar: el dedo selecciona.
 */
.crm-gr-svg[data-seleccion] {
  cursor: crosshair;
  touch-action: none;
}

.crm-gr-seleccion {
  fill: color-mix(in oklab, var(--crm-text) 8%, transparent);
  stroke: var(--crm-line-2);
  stroke-width: 1;
  pointer-events: none;
}

/* Eje numérico: el filete vertical de una marca con separador (un cambio de año), punteado y tenue. */
.crm-gr-separadores line {
  stroke: var(--crm-line);
  stroke-dasharray: 1 6;
  stroke-width: 1;
}

/* ── Consejo del gráfico (flotante, compartido por todas las series) ── */
.crm-gr-consejo {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /*
   * Entra y se va al instante (§8: «los consejos se van al instante»; y el contraste en movimiento: un fundido dejaba
   * el texto por debajo de 4,5 durante la salida). Nunca se desliza detrás del puntero.
   */
  transition: none;
}

.crm-gr-consejo[data-visible] {
  opacity: 1;
  visibility: visible;
  transition: none;
}

/* La posición (a 12 px del dato, por el lado en que cabe) la calcula el componente midiendo la caja. */
.crm-gr-consejo-caja {
  width: max-content;
  min-width: 160px;
  max-width: min(280px, 80cqi);
  padding: 8px 12px;
  border: 1px solid var(--crm-line-2);
  background: var(--crm-panel-2);
  box-shadow: var(--crm-sombra-capa);
  color: var(--crm-text);
  font-size: 12px;
  line-height: 16px;
}

.crm-gr-consejo-titulo {
  margin: 0 0 4px;
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  /* Una línea si cabe; una cabecera larga (un intervalo de fechas) envuelve por palabras dentro de la caja. */
  overflow-wrap: break-word;
  font-variant-numeric: tabular-nums;
}

/*
 * Nada sale de la caja. Nombre y valor en una línea si caben; si no, el
 * valor baja a la siguiente, alineado a la derecha (la columna de las
 * cifras no cambia). El nombre envuelve por palabras; las cifras, nunca:
 * entre cifra y unidad va el espacio fino que no parte (formato.ts). La
 * rejilla no toma el ancho mínimo de una fila larga para todas: cada fila
 * cabe en el ancho de la caja.
 */
.crm-gr-consejo dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
}

.crm-gr-consejo-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 16px;
  min-width: 0;
  min-height: 20px;
}

.crm-gr-consejo-fila dt {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--crm-text-2);
}

.crm-gr-consejo-fila dt .crm-gr-muestra {
  flex: none;
}

.crm-gr-consejo-nombre {
  min-width: 0;
  overflow-wrap: break-word;
}

.crm-gr-consejo-fila dd {
  margin: 0 0 0 auto;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/*
 * Fila en partes (una banda): el nombre en su línea de 20 y cada parte
 * debajo en 16, con el rótulo bajo el nombre (sangrado lo que ocupan la
 * muestra y su aire: 16 + 6) y la cifra a la derecha, en la columna de las
 * demás. Mínimo, máximo y amplitud se leen enteros y se comparan en vertical.
 */
.crm-gr-consejo-fila[data-partes] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 16px;
}

.crm-gr-consejo-fila[data-partes] dt {
  grid-column: 1 / -1;
  min-height: 20px;
}

.crm-gr-consejo-fila dd.crm-gr-consejo-parte {
  display: contents;
}

.crm-gr-consejo-parte-rotulo {
  min-width: 0;
  padding-left: 22px;
  color: var(--crm-muted);
  overflow-wrap: break-word;
}

.crm-gr-consejo-parte-valor {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* Detalle bajo el valor (variación vs. anterior): 12 en gris; en color solo si el sentido dice que es mejora o empeora. */
.crm-gr-consejo-detalle {
  display: block;
  color: var(--crm-muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  text-align: right;
}

.crm-gr-consejo-detalle[data-sentido="bueno"] {
  color: var(--crm-acento);
}

.crm-gr-consejo-detalle[data-sentido="malo"] {
  color: var(--crm-error);
}

.crm-gr-consejo-fila[data-total] {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--crm-line-2);
}

/* ── Pie: leyenda y «Ver datos» (una fila, una altura: 28) ──────────── */
.crm-gr-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  margin-top: 12px;
}

.crm-gr-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0 4px;
  margin: 0 0 0 -8px;
  padding: 0;
  list-style: none;
}

.crm-gr-leyenda-item,
.crm-gr-ver-datos {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--crm-text-2);
  font-family: var(--crm-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.005em;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--crm-t-color) ease,
    color var(--crm-t-color) ease;
}

/* Hover de fila: al instante al entrar, 120 ms al salir. */
.crm-gr-leyenda-item:hover,
.crm-gr-ver-datos:hover {
  background: var(--crm-panel-2);
  color: var(--crm-text);
  transition-duration: 0ms;
}

.crm-gr-leyenda-item:active,
.crm-gr-ver-datos:active {
  background: var(--crm-panel-3);
}

.crm-gr-leyenda-item[aria-pressed="false"] {
  color: var(--crm-dim);
  text-decoration: line-through;
  text-decoration-color: var(--crm-dim);
}

.crm-gr-leyenda-item[aria-pressed="false"] .crm-gr-muestra {
  opacity: var(--crm-apagado);
}

/* «Ver datos»: botón fantasma en frase normal; su borde derecho cae en el del gráfico. */
.crm-gr-ver-datos {
  margin-left: auto;
  margin-right: -8px;
  color: var(--crm-muted);
}

.crm-gr-ver-datos svg {
  flex: none;
  width: 14px;
  height: 14px;
}

.crm-gr-ver-datos[aria-expanded="true"] {
  color: var(--crm-text);
}

.crm-gr-muestra {
  flex: none;
  overflow: visible;
}

.crm-gr-muestra-linea {
  stroke: var(--s);
  stroke-width: 1.5;
}

.crm-gr-muestra-linea[data-comparacion] {
  stroke-dasharray: 3 2;
}

.crm-gr-muestra .crm-gr-marca {
  stroke: none;
}

.crm-gr-muestra .crm-gr-marca[data-trazo] {
  stroke: var(--s);
}

.crm-gr-muestra-bloque {
  fill: var(--s);
}

.crm-gr-muestra-trama {
  fill: none;
  stroke: var(--crm-gr-fondo);
  stroke-width: 1;
}

.crm-gr-muestra-trama[data-puntos] {
  stroke-width: 1;
  stroke-linecap: square;
}

.crm-gr-muestra-bloque[data-estimado] {
  fill: color-mix(in oklab, var(--s) var(--crm-gr-area-apilada), transparent);
  stroke: var(--s);
  stroke-width: 1;
}

.crm-gr-muestra-linea[data-estimado] {
  stroke-dasharray: 3 2;
}

.crm-gr-muestra-banda {
  fill: color-mix(in oklab, var(--s) var(--crm-gr-banda-alfa), transparent);
}

/*
 * Intervalos puntuales (bigotes): un trazo de 1 en el color de su serie (pleno, como una marca: §5, 3:1 sobre el
 * panel), con remates de 6; el del dato marcado, a 2. No es una banda: no rellena ni une puntos.
 */
.crm-gr-intervalo,
.crm-gr-muestra-intervalo {
  fill: none;
  stroke: var(--s);
  stroke-width: 1;
  stroke-linecap: butt;
  pointer-events: none;
  /*
   * El lienzo no siempre va a escala entera (su ancho real es fraccionario y su viewBox, redondeado): un trazo de 1 en
   * x,5 caía repartido en dos píxeles con antialiasing y se veía desvaído (la medida dio 1,8:1 en una columna). Al píxel
   * del dispositivo: color pleno, nítido.
   */
  shape-rendering: crispEdges;
}

/* Sobre su barra (del mismo color) el bigote no se vería: va en tinta, como una barra de error. */
.crm-gr-intervalo[data-sobre-barra] {
  stroke: var(--crm-text);
}

.crm-gr-intervalo[data-atenuado] {
  opacity: var(--crm-apagado);
}

/* Con barras en el lienzo, el halo del panel detrás del trazo (no capta el puntero, no se ve sin barras). */
.crm-gr-intervalo-halo {
  fill: none;
  shape-rendering: crispEdges;
  stroke: var(--crm-gr-fondo, var(--crm-panel));
  stroke-width: 3;
  stroke-linecap: butt;
  pointer-events: none;
}

@media (forced-colors: active) {
  .crm-gr-intervalo,
  .crm-gr-intervalo[data-sobre-barra],
  .crm-gr-muestra-intervalo {
    stroke: CanvasText;
  }

  .crm-gr-intervalo-halo {
    stroke: Canvas;
  }
}

/* Entrada de leyenda que no se pulsa (lo estimado, una banda, un relleno): se lee igual, sin respuesta. */
.crm-gr-leyenda-item[data-fija],
.crm-gr-leyenda-item[data-fija]:hover,
.crm-gr-leyenda-item[data-fija]:active {
  background: transparent;
  color: var(--crm-text-2);
  cursor: default;
}

/* ── Tabla de datos (alternativa accesible) ─────────────────────────── */
.crm-gr-tabla:not([data-visible]) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.crm-gr-tabla[data-visible] {
  max-height: 324px;
  margin-top: 12px;
  overflow: auto;
  border-top: 1px solid var(--crm-line);
  scrollbar-width: thin;
  scrollbar-color: var(--crm-line-2) transparent;
}

.crm-gr-tabla table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  line-height: 20px;
}

.crm-gr-tabla caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.crm-gr-tabla th,
.crm-gr-tabla td {
  height: 36px;
  padding: 0 12px;
  border-bottom: 1px solid var(--crm-line);
  text-align: right;
  white-space: nowrap;
}

.crm-gr-tabla th:first-child {
  padding-left: 0;
  text-align: left;
}

.crm-gr-tabla thead th {
  position: sticky;
  top: 0;
  height: 32px;
  background: var(--crm-gr-fondo);
  color: var(--crm-dim);
  font-family: var(--crm-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crm-gr-tabla tbody tr:hover,
.crm-gr-tabla tbody tr[data-activo] {
  background: var(--crm-gr-resalte);
}

.crm-gr-tabla tbody tr[data-activo] :is(th, td) {
  color: var(--crm-text);
}

.crm-gr-tabla tbody th {
  color: var(--crm-text-2);
  font-weight: 400;
}

.crm-gr-tabla td {
  color: var(--crm-text);
  font-variant-numeric: tabular-nums;
}

/* ── Donut ──────────────────────────────────────────────────────────── */
.crm-gr-donut {
  display: grid;
  grid-template-columns: var(--crm-gr-donut) minmax(0, 1fr);
  align-items: center;
  gap: 32px;
}

@container (max-width: 420px) {
  .crm-gr-donut {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 24px;
  }

  .crm-gr-donut-lista {
    justify-self: stretch;
  }
}

.crm-gr-donut-lienzo {
  position: relative;
  width: var(--crm-gr-donut);
  height: var(--crm-gr-donut);
}

.crm-gr-donut-mascara {
  mask-type: alpha;
}

.crm-gr-donut-revelado {
  fill: none;
  stroke: var(--crm-text);
}

.crm-gr-donut-pista {
  fill: none;
  stroke: var(--crm-line);
}

.crm-gr-segmento {
  fill: var(--s);
  stroke: none;
  transition: opacity var(--crm-t-color) ease;
}

.crm-gr-segmento[data-atenuado] {
  opacity: var(--crm-apagado);
}

.crm-gr-donut-centro {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 2px;
  padding: 0 16px;
  text-align: center;
  pointer-events: none;
}

.crm-gr-donut-rotulo {
  max-width: 100%;
  overflow: hidden;
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.crm-gr-donut-valor {
  font-size: 28px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

/*
 * Cifra acotada (§14): nunca se corta ni se sale del anillo o del arco. El
 * componente elige el escalón (28 → 24 → 20) por su ancho y, desde 7 cifras,
 * la compacta; la exacta va en el consejo, que pide puntero solo entonces.
 */
.crm-gr-donut-valor,
.crm-gr-medidor-valor {
  max-width: 100%;
  white-space: nowrap;
}

.crm-gr-donut-valor[data-escalon="24"],
.crm-gr-medidor-valor[data-escalon="24"] {
  font-size: 24px;
  line-height: 28px;
}

.crm-gr-donut-valor[data-escalon="20"],
.crm-gr-medidor-valor[data-escalon="20"] {
  font-size: 20px;
  line-height: 24px;
}

.crm-gr-donut-valor[data-compacta],
.crm-gr-medidor-valor[data-compacta] {
  pointer-events: auto;
  cursor: default;
}

.crm-gr-donut-pct {
  color: var(--crm-text-2);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

.crm-gr-donut-lista {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crm-gr-donut-lista[hidden] {
  display: none;
}

/* Sin datos: el centro en --crm-dim y una línea que dice qué aparecerá aquí. */
.crm-gr-donut-centro[data-vacio] .crm-gr-donut-valor {
  color: var(--crm-dim);
}

.crm-gr-donut-vacio {
  max-width: 40ch;
  justify-self: center;
  margin: 0;
  text-align: center;
  color: var(--crm-muted);
  font-size: 13px;
  line-height: 20px;
}

.crm-gr-donut-lista li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto 48px;
  align-items: center;
  gap: 8px;
  height: 36px;
  border-top: 1px solid var(--crm-line);
  color: var(--crm-text-2);
  font-size: 13px;
  line-height: 20px;
  transition:
    background-color var(--crm-t-color) ease,
    color var(--crm-t-color) ease;
}

.crm-gr-donut-lista li:last-child {
  border-bottom: 1px solid var(--crm-line);
}

.crm-gr-donut-lista li[data-activo] {
  background: var(--crm-gr-resalte);
  color: var(--crm-text);
  transition-duration: 0ms;
}

.crm-gr-donut-nombre {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-gr-donut-cifra {
  color: var(--crm-text);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.crm-gr-donut-peso {
  color: var(--crm-dim);
  font-family: var(--crm-mono);
  font-size: 11px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── Sparkline ──────────────────────────────────────────────────────── */
.crm-gr-spark {
  --s: var(--crm-text-2);
  position: relative;
  display: block;
  width: 100%;
  min-width: 48px;
}

.crm-gr-spark[data-tono="acento"] {
  --s: var(--crm-acento);
}

.crm-gr-spark svg {
  display: block;
  overflow: visible;
}

/* Sin datos (§14): «Sin datos» en mono y un filete en --crm-dim a media altura que sigue hasta el final. */
.crm-gr-spark[data-vacio] {
  display: flex;
  align-items: center;
  gap: 8px;
}

.crm-gr-spark-vacio {
  color: var(--crm-dim);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  white-space: nowrap;
}

.crm-gr-spark-vacio-filete {
  flex: 1;
  height: 1px;
  background: var(--crm-dim);
}

.crm-gr-spark-linea {
  fill: none;
  stroke: var(--s);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.crm-gr-spark-area {
  stroke: none;
}

.crm-gr-spark-barra {
  fill: var(--crm-serie-reposo);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  shape-rendering: crispEdges;
}

.crm-gr-spark-barra[data-ultima] {
  fill: var(--s);
}

.crm-gr-spark-ref {
  stroke: var(--crm-line-2);
  stroke-dasharray: 2 2;
  shape-rendering: crispEdges;
}

/* Punto final: 4 px del color de la línea, con un aro de lienzo que lo despega. */
.crm-gr-spark-punto {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--s);
  box-shadow: 0 0 0 2px var(--crm-gr-fondo);
  translate: -50% -50%;
  pointer-events: none;
}

.crm-gr-spark-barra[data-activo] {
  fill: var(--crm-text);
}

/* Consejo de la minigráfica: el de la casa (24, texto 12, relleno 8), encima del punto. */
.crm-gr-spark-consejo {
  position: absolute;
  bottom: calc(100% + 6px);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--crm-line-2);
  background: var(--crm-panel-2);
  box-shadow: var(--crm-sombra-capa);
  color: var(--crm-text);
  font-family: var(--crm-sans);
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  translate: -50% 0;
  pointer-events: none;
}

.crm-gr-spark-consejo[data-lado="izquierda"] {
  translate: -100% 0;
}

.crm-gr-spark-consejo[data-lado="derecha"] {
  translate: 0 0;
}

.crm-gr-spark-consejo-rotulo {
  color: var(--crm-muted);
}

.crm-gr-spark-consejo-valor {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* ── Matriz de calor (categorías × categorías) ──────────────────────── */
/*
 * Rótulos de fila fuera del desplazamiento (siempre se leen) y la rejilla en
 * su caja, que desplaza dentro si no cabe con el indicio de 24 por el borde
 * que sigue. Cada celda toma su tinta de `--t` (0–1): de un 6 % a un 72 %
 * del color de la serie 1 sobre el lienzo (serie 2 bajo el centro en
 * divergente). 0 es un valor (su tinta mínima); sin dato, la celda va vacía
 * con su perfil punteado.
 */
.crm-mc {
  display: flex;
  align-items: flex-start;
  min-width: 0;
}

.crm-mc-filas {
  flex: none;
}

.crm-mc-filas text {
  fill: var(--crm-dim);
  font-family: var(--crm-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.crm-mc-filas text[data-activo],
.crm-mc-svg .crm-gr-eje text[data-activo] {
  fill: var(--crm-text);
}

.crm-mc-desplaza {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.crm-mc-desplaza[data-desborde="fin"] {
  -webkit-mask-image: linear-gradient(to right, currentColor calc(100% - 24px), transparent);
  mask-image: linear-gradient(to right, currentColor calc(100% - 24px), transparent);
}

.crm-mc-desplaza[data-desborde="inicio"] {
  -webkit-mask-image: linear-gradient(to left, currentColor calc(100% - 24px), transparent);
  mask-image: linear-gradient(to left, currentColor calc(100% - 24px), transparent);
}

.crm-mc-desplaza[data-desborde="ambos"] {
  -webkit-mask-image: linear-gradient(to right, transparent, currentColor 24px, currentColor calc(100% - 24px), transparent);
  mask-image: linear-gradient(to right, transparent, currentColor 24px, currentColor calc(100% - 24px), transparent);
}

.crm-mc-lienzo {
  position: relative;
}

.crm-mc-svg:focus-visible {
  outline: var(--crm-foco-ancho) solid var(--crm-acento);
  outline-offset: -1px;
}

.crm-mc-celda,
.crm-mc-muestra {
  --crm-mc-serie: var(--crm-serie-1);
  fill: color-mix(in oklab, var(--crm-mc-serie) calc(6% + var(--t, 0) * 66%), var(--crm-gr-fondo));
  background: color-mix(in oklab, var(--crm-mc-serie) calc(6% + var(--t, 0) * 66%), var(--crm-gr-fondo));
  stroke: transparent;
  stroke-width: 1;
}

.crm-mc-celda[data-lado="neg"],
.crm-mc-muestra[data-lado="neg"] {
  --crm-mc-serie: var(--crm-serie-2);
}

.crm-mc-celda[data-sin-dato],
.crm-mc-muestra[data-sin-dato] {
  fill: none;
  background: none;
  stroke: var(--crm-line-2);
  stroke-dasharray: 1 2;
}

.crm-mc-celda[data-activo] {
  stroke: var(--crm-text);
  stroke-dasharray: none;
}

.crm-mc-escala {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 4px;
  color: var(--crm-dim);
  font-family: var(--crm-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  line-height: 16px;
}

.crm-mc-muestra {
  display: inline-block;
  width: 12px;
  height: 12px;
}

.crm-mc-muestra[data-sin-dato] {
  box-sizing: border-box;
  margin-left: 8px;
  border: 1px dashed var(--crm-line-2);
}

/* ── Mapa de calor ──────────────────────────────────────────────────── */
.crm-gr-celda,
.crm-gr-celda-muestra {
  --crm-gr-calor: var(--crm-line);
  fill: var(--crm-gr-calor);
  stroke: transparent;
  stroke-width: 1.5;
  transition: stroke var(--crm-t-color) ease;
}

.crm-gr-celda[data-nivel="1"],
.crm-gr-celda-muestra[data-nivel="1"] {
  --crm-gr-calor: color-mix(in oklab, var(--crm-serie-1) 20%, var(--crm-gr-fondo));
}

.crm-gr-celda[data-nivel="2"],
.crm-gr-celda-muestra[data-nivel="2"] {
  --crm-gr-calor: color-mix(in oklab, var(--crm-serie-1) 42%, var(--crm-gr-fondo));
}

.crm-gr-celda[data-nivel="3"],
.crm-gr-celda-muestra[data-nivel="3"] {
  --crm-gr-calor: color-mix(in oklab, var(--crm-serie-1) 68%, var(--crm-gr-fondo));
}

.crm-gr-celda[data-nivel="4"],
.crm-gr-celda-muestra[data-nivel="4"] {
  --crm-gr-calor: var(--crm-serie-1);
}

.crm-gr-celda[data-activo] {
  stroke: var(--crm-text);
  transition-duration: 0ms;
}

/* Al pasar por un nivel de la escala, solo sus celdas quedan encendidas
 * (fill-opacity: no toca la opacidad que anima la entrada). */
.crm-gr-celda[data-atenuado] {
  fill-opacity: 0.24;
}

.crm-gr-escala .crm-gr-celda-muestra {
  cursor: default;
}

.crm-gr-celda-muestra[data-activo] {
  outline: 1px solid var(--crm-text);
  outline-offset: 1px;
}

/*
 * La tinta de cada etiqueta, elegida por contraste real con su celda en cada
 * tema (≥ 4,5:1, lo mide scripts/temas.mjs sobre lienzo y sobre panel):
 * niveles 0-2 en text, el 3 según el tema (--crm-calor-tinta-3) y el 4 en sobre-serie-1.
 */
.crm-gr-celda-valores text {
  fill: var(--crm-text);
  font-family: var(--crm-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.crm-gr-celda-valores text[data-nivel="3"] {
  fill: var(--crm-calor-tinta-3);
}

.crm-gr-celda-valores text[data-nivel="4"] {
  fill: var(--crm-sobre-serie-1);
}

.crm-gr-escala {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--crm-dim);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
}

.crm-gr-escala > span:first-child {
  margin-right: 6px;
}

.crm-gr-escala > span:last-child {
  margin-left: 6px;
}

.crm-gr-celda-muestra {
  display: inline-block;
  width: 12px;
  height: 12px;
  background: var(--crm-gr-calor);
}

/* ── Embudo ─────────────────────────────────────────────────────────── */
.crm-gr-embudo {
  display: grid;
  grid-template-columns: minmax(96px, 28%) minmax(0, 1fr) auto 56px;
  column-gap: 16px;
}

.crm-gr-embudo-cabecera,
.crm-gr-embudo-fila,
.crm-gr-embudo-total {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
}

/* Cabecera de tabla: 32, mono 11 en mayúsculas (la única línea de rótulo del bloque). */
.crm-gr-embudo-cabecera {
  height: 32px;
  color: var(--crm-dim);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crm-gr-embudo-cabecera span:first-child {
  grid-column: 1 / 3;
}

.crm-gr-embudo-cabecera span:not(:first-child) {
  text-align: right;
}

/* Fila de lista: 36 con filete; hover al instante. */
.crm-gr-embudo-fila {
  height: 36px;
  border-top: 1px solid var(--crm-line);
  transition: background-color var(--crm-t-color) ease;
}

.crm-gr-embudo-fila:hover,
.crm-gr-embudo-fila[data-activo] {
  background: var(--crm-gr-resalte);
  transition-duration: 0ms;
}

/* Etapa recorrida con el teclado: el nombre sube a texto. */
.crm-gr-embudo-fila[data-activo] .crm-gr-embudo-nombre {
  color: var(--crm-text);
}

.crm-gr-embudo-nombre {
  overflow: hidden;
  color: var(--crm-text-2);
  font-size: 13px;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-gr-embudo-pista {
  position: relative;
  display: block;
  height: 8px;
}

.crm-gr-embudo-barra,
.crm-gr-embudo-perdida {
  position: absolute;
  top: 0;
  display: block;
  height: 8px;
  box-sizing: border-box;
  transform-origin: 0 50%;
}

.crm-gr-embudo-barra {
  left: 0;
  background: var(--crm-serie-reposo);
}

.crm-gr-embudo-barra[data-ultima] {
  background: var(--crm-serie-destacada);
}

/* Lo que se perdió: un hueco con filete punteado de 1 px, cerrado por la barra. */
.crm-gr-embudo-perdida {
  border: 1px dotted var(--crm-line-2);
  border-left: 0;
  background: transparent;
}

.crm-gr-embudo-valor {
  color: var(--crm-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.crm-gr-embudo-paso {
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.crm-gr-embudo-paso[data-inicio] {
  color: var(--crm-dim);
}

.crm-gr-embudo-total {
  height: 36px;
  border-block: 1px solid var(--crm-line-2);
  color: var(--crm-text-2);
  font-size: 13px;
  line-height: 20px;
}

.crm-gr-embudo-total span:first-child {
  grid-column: 1 / 4;
}

.crm-gr-embudo-total span:last-child {
  color: var(--crm-text);
  font-family: var(--crm-mono);
  font-size: 11px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* En estrecho, la barra pasa a su propia línea: fila cómoda de 44. */
@container (max-width: 420px) {
  .crm-gr-embudo {
    grid-template-columns: minmax(0, 1fr) auto 48px;
    column-gap: 12px;
  }

  .crm-gr-embudo-cabecera span:first-child {
    grid-column: 1;
  }

  .crm-gr-embudo-fila {
    grid-template-rows: 20px 8px;
    row-gap: 4px;
    align-content: center;
    height: 44px;
  }

  .crm-gr-embudo-pista {
    grid-row: 2;
    grid-column: 1 / -1;
  }

  .crm-gr-embudo-total span:first-child {
    grid-column: 1 / 3;
  }
}

/* ── Medidor ────────────────────────────────────────────────────────── */
.crm-gr-medidor {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.crm-gr-medidor svg {
  display: block;
  max-width: 100%;
  height: auto;
}

.crm-gr-medidor-pista {
  fill: none;
  stroke: var(--crm-line);
}

.crm-gr-medidor-arco {
  fill: none;
  stroke: var(--crm-serie-destacada);
  stroke-dasharray: var(--crm-gr-medidor-frac) 1;
}

/* Muesca de umbral: 2 px del lienzo cortando la pista y el arco. */
.crm-gr-medidor-umbral {
  stroke: var(--crm-gr-fondo);
  stroke-width: 2;
}

.crm-gr-medidor[data-tono="aviso"] .crm-gr-medidor-arco {
  stroke: var(--crm-aviso);
}

.crm-gr-medidor[data-tono="error"] .crm-gr-medidor-arco {
  stroke: var(--crm-error);
}

.crm-gr-medidor[data-tono="aviso"] .crm-gr-medidor-rotulo {
  color: var(--crm-aviso);
}

.crm-gr-medidor[data-tono="error"] .crm-gr-medidor-rotulo {
  color: var(--crm-error);
}

.crm-gr-medidor-objetivo {
  stroke: var(--crm-text);
  stroke-width: 1.5;
}

.crm-gr-medidor-centro {
  position: absolute;
  inset-inline: 0;
  display: grid;
  justify-items: center;
  gap: 2px;
  translate: 0 -50%;
  text-align: center;
}

.crm-gr-medidor-valor {
  font-size: 28px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

.crm-gr-medidor-de {
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

.crm-gr-medidor-rotulo {
  color: var(--crm-text-2);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.crm-gr-medidor[data-logrado] .crm-gr-medidor-rotulo {
  color: var(--crm-acento);
}

/* ── Marco ──────────────────────────────────────────────────────────── */
.crm-gr-marco {
  --crm-gr-fondo: var(--crm-panel);
  container-type: inline-size;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--crm-line);
  background: var(--crm-panel);
  color: var(--crm-text);
  font-family: var(--crm-sans);
  font-size: 13px;
  line-height: 20px;
}

.crm-gr-marco .crm-gr,
.crm-gr-marco .crm-gr-medidor,
.crm-gr-marco .crm-gr-spark,
.crm-gr-ampliado .crm-gr {
  --crm-gr-fondo: var(--crm-panel);
}

/*
 * Cabecera en rejilla: el título comparte la fila de 28 con los controles
 * (centrado en ella) y el rótulo va debajo. Una barra, una altura.
 */
.crm-gr-marco-cabecera {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 28px auto;
  align-items: center;
  column-gap: 16px;
}

.crm-gr-marco-titulo {
  grid-row: 1;
  grid-column: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--crm-text);
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-gr-marco-rotulo {
  margin: 0;
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crm-gr-marco-cabecera > .crm-gr-marco-rotulo {
  grid-row: 2;
  grid-column: 1 / -1;
}

.crm-gr-marco-controles {
  grid-row: 1;
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
}

/* Las acciones, en la fila del título y siempre a la derecha (última columna). */
.crm-gr-marco-acciones {
  grid-row: 1;
  grid-column: -2;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 28px;
}

/* Con controles y acciones: título · controles · acciones (8 entre controles y acciones). */
.crm-gr-marco-cabecera:has(> .crm-gr-marco-controles):has(> .crm-gr-marco-acciones) {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.crm-gr-marco-controles + .crm-gr-marco-acciones {
  margin-left: -8px;
}

.crm-gr-marco-valor {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-top: 12px;
}

.crm-gr-marco-cifra {
  color: var(--crm-text);
  font-size: 28px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

.crm-gr-variacion {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--crm-text-2);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

.crm-gr-variacion svg {
  flex: none;
  width: 14px;
  height: 14px;
}

.crm-gr-variacion[data-mejora] {
  color: var(--crm-acento);
}

.crm-gr-variacion-contra {
  margin-left: 2px;
  color: var(--crm-dim);
  font-weight: 400;
}

.crm-gr-marco-cuerpo {
  margin-top: 16px;
}

.crm-gr-marco-aviso {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 16px;
  border-block: 1px solid var(--crm-line);
}

.crm-gr-marco-aviso[data-tipo="error"] {
  border-color: var(--crm-error-linea);
}

.crm-gr-marco-aviso [role="alert"] {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  color: var(--crm-error);
  font-size: 13px;
  line-height: 20px;
}

.crm-gr-marco-aviso [role="alert"] svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

@container (max-width: 400px) {
  .crm-gr-marco-cabecera {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 28px auto auto;
  }

  /* Las acciones siguen en la fila del título, a la derecha; los controles (rango, vivo) bajan a su fila. */
  .crm-gr-marco-cabecera:has(> .crm-gr-marco-controles):has(> .crm-gr-marco-acciones) {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .crm-gr-marco-cabecera:has(> .crm-gr-marco-acciones) {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .crm-gr-marco-acciones {
    grid-column: 2;
  }

  .crm-gr-marco-controles {
    grid-row: 3;
    grid-column: 1 / -1;
    flex-wrap: wrap;
    justify-content: flex-start;
    row-gap: 8px;
    height: auto;
    min-height: 28px;
    margin-top: 12px;
  }

  .crm-gr-marco-controles + .crm-gr-marco-acciones {
    margin-left: 0;
  }
}

@media (max-width: 480px) {
  .crm-gr-marco {
    padding: 16px;
  }
}

/* ── Esqueleto: la silueta del gráfico que viene, con barrido ───────── */
.crm-gr-esqueleto {
  position: relative;
  /* Solo si la carga pasa de 300 ms: nada de destellos. */
  animation: crm-gr-aparece var(--crm-t-color) linear var(--crm-t-retardo) both;
}

.crm-gr-esqueleto svg {
  display: block;
  overflow: hidden;
}

.crm-gr-esqueleto-forma {
  fill: var(--crm-esqueleto-a);
}

.crm-gr-esqueleto-trazo {
  fill: none;
  stroke: var(--crm-esqueleto-b);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.crm-gr-esqueleto-luz-a {
  stop-color: var(--crm-esqueleto-b);
  stop-opacity: 0;
}

.crm-gr-esqueleto-luz-b {
  stop-color: var(--crm-esqueleto-b);
}

.crm-gr-esqueleto-barrido {
  transform-box: fill-box;
  opacity: 0;
}

/* ── Ampliado (capa a pantalla grande) ──────────────────────────────── */
.crm-gr-capa {
  background: transparent;
}

.crm-gr-telon {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--crm-telon);
}

.crm-gr-ampliado {
  --crm-gr-fondo: var(--crm-panel);
  position: fixed;
  inset: 32px;
  z-index: 61;
  display: flex;
  flex-direction: column;
  padding: 0 20px 20px;
  border: 1px solid var(--crm-line-2);
  background: var(--crm-panel);
  box-shadow: var(--crm-sombra);
  color: var(--crm-text);
  font-family: var(--crm-sans);
  font-size: 13px;
  line-height: 20px;
  container-type: inline-size;
}

@media (max-width: 480px) {
  .crm-gr-ampliado {
    inset: 8px;
    padding: 0 16px 16px;
  }

  .crm-gr-ampliado-barra {
    margin-inline: -16px;
    padding-left: 16px;
  }
}

/* Cabecera de capa: 52 (FUNDAMENTOS §2). */
.crm-gr-ampliado-barra {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  margin: 0 -20px;
  padding: 0 12px 0 20px;
  border-bottom: 1px solid var(--crm-line);
}

.crm-gr-ampliado-barra .crm-gr-marco-rotulo {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-gr-ampliado-barra > :last-child {
  margin-left: auto;
}

.crm-gr-ampliado-titulo {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.crm-gr-ampliado-cuerpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  margin-top: 16px;
}

.crm-gr-ampliado-cuerpo > .crm-gr {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.crm-gr-plano[data-ampliado] {
  flex: 1;
  min-height: 0;
}

.crm-gr-plano[data-ampliado][data-desplazable] {
  overflow-y: auto;
}

/* ── Movimiento (solo en pantalla y sin preferencia de reducirlo) ──────
 * Impresión y estático (FUNDAMENTOS §8): en `print` no hay entrada (la regla
 * es solo `screen`), y con `data-crm-estatico` en el gráfico o en cualquier
 * ancestro nada empieza oculto: se pinta entero, sin esperar a entrar en pantalla.
 */
@media screen and (prefers-reduced-motion: no-preference) {
  /* Entrada: todo se dibuja en 600 ms con --crm-curva, una sola vez. */
  .crm-gr-trazo:not([data-comparacion], [data-estimado]) {
    stroke-dasharray: 1 1;
    transition: stroke-dashoffset var(--crm-t-dibujo) var(--crm-curva) calc(min(var(--i, 0), 10) * var(--crm-t-escalon));
  }

  .crm-gr:not([data-visto], [data-crm-estatico], [data-crm-estatico] *) .crm-gr-trazo:not([data-comparacion], [data-estimado]) {
    stroke-dashoffset: 1;
  }

  .crm-gr-trazo:is([data-comparacion], [data-estimado]),
  .crm-gr-area,
  .crm-gr-banda,
  .crm-gr-relleno,
  .crm-gr-final {
    transition: opacity var(--crm-t-dibujo) var(--crm-curva);
  }

  .crm-gr:not([data-visto], [data-crm-estatico], [data-crm-estatico] *) :is(.crm-gr-trazo[data-comparacion], .crm-gr-trazo[data-estimado], .crm-gr-area, .crm-gr-banda, .crm-gr-relleno, .crm-gr-final) {
    opacity: 0;
  }

  .crm-gr-barra {
    transition: scale var(--crm-t-dibujo) var(--crm-curva) calc(min(var(--i, 0), 10) * var(--crm-t-escalon));
  }

  .crm-gr:not([data-visto], [data-crm-estatico], [data-crm-estatico] *) .crm-gr-barra {
    scale: 1 0;
  }

  .crm-gr:not([data-visto], [data-crm-estatico], [data-crm-estatico] *) .crm-gr-barra[data-horizontal] {
    scale: 0 1;
  }

  .crm-gr-final[data-vivo] .crm-gr-latido {
    animation: crm-gr-latido var(--crm-t-latido) var(--crm-curva) var(--crm-t-dibujo) infinite;
  }

  .crm-gr-donut-revelado {
    stroke-dasharray: 1 1;
    transition: stroke-dashoffset var(--crm-t-dibujo) var(--crm-curva);
  }

  .crm-gr:not([data-visto], [data-crm-estatico], [data-crm-estatico] *) .crm-gr-donut-revelado {
    stroke-dashoffset: 1;
  }

  .crm-gr-celda {
    transition:
      opacity var(--crm-t-dibujo) var(--crm-curva) calc(min(var(--i, 0), 10) * var(--crm-t-escalon)),
      stroke var(--crm-t-color) ease;
  }

  .crm-gr:not([data-visto], [data-crm-estatico], [data-crm-estatico] *) .crm-gr-celda {
    opacity: 0;
  }

  .crm-gr-embudo-barra,
  .crm-gr-embudo-perdida {
    transition: scale var(--crm-t-dibujo) var(--crm-curva) calc(min(var(--i, 0), 10) * var(--crm-t-escalon));
  }

  .crm-gr:not([data-visto], [data-crm-estatico], [data-crm-estatico] *) .crm-gr-embudo-barra {
    scale: 0 1;
  }

  .crm-gr:not([data-visto], [data-crm-estatico], [data-crm-estatico] *) .crm-gr-embudo-perdida {
    scale: 0 1;
  }

  .crm-gr-medidor-arco {
    transition: stroke-dasharray var(--crm-t-dibujo) var(--crm-curva);
  }

  .crm-gr-medidor:not([data-visto], [data-crm-estatico], [data-crm-estatico] *) .crm-gr-medidor-arco {
    stroke-dasharray: 0 1;
  }

  .crm-gr-spark-linea {
    stroke-dasharray: 1 1;
    transition: stroke-dashoffset var(--crm-t-dibujo) var(--crm-curva);
  }

  .crm-gr-spark:not([data-visto], [data-crm-estatico], [data-crm-estatico] *) .crm-gr-spark-linea {
    stroke-dashoffset: 1;
  }

  .crm-gr-spark-barra {
    transition: scale var(--crm-t-dibujo) var(--crm-curva) calc(min(var(--i, 0), 10) * var(--crm-t-escalon));
  }

  .crm-gr-spark:not([data-visto], [data-crm-estatico], [data-crm-estatico] *) .crm-gr-spark-barra {
    scale: 1 0;
  }

  .crm-gr-spark-punto,
  .crm-gr-spark-area {
    transition: opacity var(--crm-t-color) ease var(--crm-t-dibujo);
  }

  .crm-gr-spark:not([data-visto], [data-crm-estatico], [data-crm-estatico] *) :is(.crm-gr-spark-punto, .crm-gr-spark-area) {
    opacity: 0;
  }

  .crm-gr-esqueleto-barrido {
    opacity: 1;
    animation: crm-gr-barrido var(--crm-t-barrido) var(--crm-curva) infinite;
  }

  .crm-gr-telon {
    animation: crm-gr-aparece var(--crm-t-capa) var(--crm-snap);
  }

  .crm-gr-ampliado {
    animation: crm-gr-entra var(--crm-t-capa) var(--crm-snap);
  }
}

@keyframes crm-gr-latido {
  from {
    opacity: 0.5;
    scale: 1;
  }
  to {
    opacity: 0;
    scale: 3;
  }
}

@keyframes crm-gr-barrido {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(200%);
  }
}

@keyframes crm-gr-aparece {
  from {
    opacity: 0;
  }
}

@keyframes crm-gr-entra {
  from {
    opacity: 0;
    translate: 0 4px;
    scale: 0.98;
  }
}

/* Movimiento reducido: nada late, barre ni se desliza; quedan los colores. */
@media (prefers-reduced-motion: reduce) {
  .crm-gr-consejo,
  .crm-gr-barra,
  .crm-gr-leyenda-item,
  .crm-gr-ver-datos,
  .crm-gr-estadistica {
    transition: none;
  }

  .crm-gr-latido,
  .crm-gr-esqueleto-barrido {
    animation: none;
  }
}

/* ── Vacío de un gráfico fuera de un marco (§14, «Datos raros») ─────────
 * Sin un solo dato pintable, nunca una rejilla muda: un filete en --crm-dim
 * y la frase en mono, a media altura del alto que ocupaba el lienzo. Dentro
 * de MarcoGrafico pinta el vacío del marco (VacioGrafico lo decide).
 */
.crm-gr-vacio {
  display: grid;
  align-content: center;
}

.crm-gr-vacio-linea {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}

.crm-gr-vacio-filete {
  flex: 1;
  height: 1px;
  background: var(--crm-dim);
  order: 2;
}

.crm-gr-vacio-texto {
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  white-space: nowrap;
}

/* Acciones del marco sin datos que ver (cargando, vacío, error o un gráfico
 * vacío dentro): deshabilitado en contorno (§7), texto e icono en --crm-dim,
 * sin hover ni opacidad global. */
.crm-gr-marco-acciones :is(button, [role="button"]):disabled {
  border-color: var(--crm-linea-apagada);
  background: transparent;
  color: var(--crm-dim);
  opacity: 1;
  cursor: not-allowed;
}

.crm-gr-marco-acciones :is(button, [role="button"]):disabled svg {
  color: var(--crm-dim);
}

/* ── Cascada ─────────────────────────────────────────────────────────── */
/*
 * Filas de 32 a 4: nombre (13, secundario, elipsis), pista de 12 sobre el
 * filete line y cifra tabular a la derecha (los totales en primario y 500).
 * Tonos: total --crm-text-2 · sube / baja, series 2 y 3 · desfavorable
 * --crm-error · favorable --crm-muted · residuo --crm-line-2. Línea base de 1
 * en 0. A menos de 560, la barra baja a su fila.
 */
.crm-cascada {
  container: crm-cascada / inline-size;
  min-width: 0;
}

.crm-cascada-lista {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crm-cascada-paso {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 32px;
}

.crm-cascada-etiqueta {
  overflow: hidden;
  min-width: 0;
  color: var(--crm-text-2);
  font-size: 13px;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-cascada-pista {
  position: relative;
  height: 12px;
  background: var(--crm-line);
}

.crm-cascada-base {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 1px;
  background: var(--crm-muted);
}

.crm-cascada-barra {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--crm-serie-2);
}

.crm-cascada-paso[data-tono="total"] .crm-cascada-barra {
  background: var(--crm-text-2);
}

.crm-cascada-paso[data-tono="baja"] .crm-cascada-barra {
  background: var(--crm-serie-3);
}

.crm-cascada-paso[data-tono="desfavorable"] .crm-cascada-barra {
  background: var(--crm-error);
}

.crm-cascada-paso[data-tono="favorable"] .crm-cascada-barra {
  background: var(--crm-muted);
}

.crm-cascada-paso[data-tono="residuo"] .crm-cascada-barra {
  background: var(--crm-line-2);
}

.crm-cascada-cifra {
  min-width: 96px;
  color: var(--crm-text-2);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  line-height: 20px;
  text-align: right;
  white-space: nowrap;
}

.crm-cascada-paso[data-tipo="total"] .crm-cascada-cifra {
  color: var(--crm-text);
  font-weight: 500;
}

@container crm-cascada (max-width: 559.98px) {
  .crm-cascada-paso {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 4px;
    padding-block: 4px;
  }

  .crm-cascada-pista {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (forced-colors: active) {
  .crm-cascada-barra {
    background: CanvasText;
  }
}

/*
 * Familia «controles» · Matrícula española (Matricula y EntradaMatricula).
 * La placa con banda UE y estrellas, escritura libre en cualquier formato y
 * validación amable. Procede de la línea de experiencia como un juego
 * (PR #17/#18/#28); el resto de aquella hoja (modo foco, fichas, ticket,
 * recorrido y celebración) ya vive en 45–48 con las revisiones de Stinson.
 */
/*
 * Experiencia como un juego (GRAMATICA §8): las piezas de mostrador que
 * nacieron en Vehículos de Gómez Arroyo (9-oct-2026) y son ya el estándar
 * de Criterium para todo flujo que tenga que entender cualquiera sin
 * formación. Viven en sus familias (controles: Matricula, EntradaMatricula,
 * FichaOpcion, GrupoFichas · estructura: ModoFoco, Celebracion · datos:
 * Ticket, PuntosRecorrido) y comparten esta hoja.
 *
 * Medidas: FUNDAMENTOS §2 (táctil 48) y §17 (momentos de experiencia).
 * Solo variables --crm-*; la placa usa --crm-placa-*, los colores reales de
 * la matrícula, iguales en los cuatro temas (la única excepción de color).
 * Radio 0 en todo; círculos solo en los puntos de estado (§6). Las piezas
 * responden a su contenedor. La placa no se anima.
 */

.crm-placa,
.crm-placa-editor,
.crm-placa *,
.crm-placa *::before,
.crm-placa *::after,
.crm-placa-editor *,
.crm-placa-editor *::before,
.crm-placa-editor *::after {
  box-sizing: border-box;
}

/* ══ Matrícula ════════════════════════════════════════════════════════
 * alto · banda · letra · E · estrellas · relleno del texto
 *   pequeña  32 · 16 · 20 · 11 · 12 ·  8
 *   normal   48 · 24 · 28 · 12 · 16 · 12
 *   grande   96 · 40 · 56 · 20 · 32 · 24
 */

.crm-placa {
  --crm-placa-alto: 48px;
  --crm-placa-banda: 24px;
  --crm-placa-estrellas: 16px;
  --crm-placa-relleno: 12px;
  position: relative;
  display: inline-flex;
  align-items: stretch;
  height: var(--crm-placa-alto);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  border: 2px solid var(--crm-placa-tinta);
  border-radius: 0;
  background: var(--crm-placa-fondo);
  color: var(--crm-placa-tinta);
  vertical-align: middle;
  /* Objeto del mundo real: conserva sus colores también con colores forzados (sigue siendo legible: tinta sobre blanco). */
  forced-color-adjust: none;
}

.crm-placa[data-tamano="pequena"] {
  --crm-placa-alto: 32px;
  --crm-placa-banda: 16px;
  --crm-placa-estrellas: 12px;
  --crm-placa-relleno: 8px;
  border-width: 1px;
}

.crm-placa[data-tamano="grande"] {
  --crm-placa-alto: 96px;
  --crm-placa-banda: 40px;
  --crm-placa-estrellas: 32px;
  --crm-placa-relleno: 24px;
}

.crm-placa-ue {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: var(--crm-placa-banda);
  padding: 2px 0;
  background: var(--crm-placa-azul);
  color: var(--crm-placa-letra-ue);
}

.crm-placa[data-tamano="grande"] .crm-placa-ue {
  padding: 8px 0 6px;
}

.crm-placa-estrellas {
  width: var(--crm-placa-estrellas);
  height: var(--crm-placa-estrellas);
  color: var(--crm-placa-estrella);
}

.crm-placa-pais {
  font-family: var(--crm-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.crm-placa[data-tamano="pequena"] .crm-placa-pais {
  font-size: 11px;
  line-height: 12px;
}

.crm-placa[data-tamano="grande"] .crm-placa-pais {
  font-size: 20px;
  line-height: 24px;
}

.crm-placa-texto,
.crm-placa-campo {
  display: flex;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: 0 var(--crm-placa-relleno);
  color: var(--crm-placa-tinta);
  font-family: var(--crm-mono);
  font-size: 28px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 32px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.crm-placa[data-tamano="pequena"] :is(.crm-placa-texto, .crm-placa-campo) {
  font-size: 20px;
  line-height: 24px;
}

.crm-placa[data-tamano="grande"] :is(.crm-placa-texto, .crm-placa-campo) {
  font-size: 56px;
  line-height: 64px;
}

.crm-placa-texto[data-vacia] {
  color: var(--crm-placa-apagado);
  font-family: var(--crm-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
  text-transform: none;
}

.crm-placa[data-tamano="pequena"] .crm-placa-texto[data-vacia] {
  font-size: 12px;
  line-height: 16px;
}

.crm-placa[data-tamano="grande"] .crm-placa-texto[data-vacia] {
  font-size: 24px;
  line-height: 32px;
}

/* Editable: se escribe dentro de la placa. */

.crm-placa-editor {
  container: crm-placa-editor / inline-size;
  display: grid;
  justify-items: center;
  gap: 16px;
  width: 100%;
  min-width: 0;
}

.crm-placa-editor .crm-placa {
  width: min(560px, 100%);
}

.crm-placa-editor .crm-placa[data-tamano="normal"] {
  width: min(320px, 100%);
}

.crm-placa-campo {
  width: 100%;
  border: 0;
  border-radius: 0;
  outline: none;
  background: transparent;
  caret-color: var(--crm-placa-tinta);
}

.crm-placa-campo::placeholder {
  color: var(--crm-placa-apagado);
  opacity: 1;
}

/* Un solo indicador: el anillo de control alrededor de la placa (el campo de dentro, sin el suyo). */

.crm-placa[data-editable]:focus-within {
  outline: var(--crm-foco-ancho) solid var(--crm-acento);
  outline-offset: 2px;
}

.crm-placa-editor[data-estado="error"] .crm-placa:not(:focus-within) {
  outline: 1px solid var(--crm-error-linea);
  outline-offset: 2px;
}

.crm-placa[data-deshabilitado] {
  border-color: var(--crm-placa-apagado);
  cursor: not-allowed;
}

.crm-placa[data-deshabilitado] .crm-placa-campo {
  color: var(--crm-placa-apagado);
  cursor: not-allowed;
}

/* Mensaje vivo: pista, aviso amable, error con salida, o el visto. */

.crm-placa-mensaje {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  max-width: 68ch;
  min-height: 24px;
  margin: 0;
  color: var(--crm-muted);
  font-size: 15px;
  line-height: 24px;
  text-align: center;
}

.crm-placa-mensaje svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 4px;
  stroke-width: 1.6;
}

.crm-placa-mensaje[data-estado="incompleta"] {
  color: var(--crm-text-2);
}

.crm-placa-mensaje[data-estado="valida"] {
  color: var(--crm-acento);
}

.crm-placa-mensaje[data-estado="error"] {
  color: var(--crm-error);
}

/* Una placa especial/provincial tiene hasta diez caracteres presentados.
 * El ancho de la columna manda también en pantallas de escritorio. */

@container crm-placa-editor (max-width: 560px) {
  .crm-placa[data-tamano="grande"] {
    --crm-placa-banda: 32px;
    --crm-placa-estrellas: 24px;
    --crm-placa-relleno: 12px;
  }

  .crm-placa[data-tamano="grande"] :is(.crm-placa-texto, .crm-placa-campo) {
    font-size: 32px;
    line-height: 40px;
  }
}

/* Escribiendo sobre la placa (la usa PreguntaInicio): lo que falta, en fantasma,
 * y un cursor de bloque fino tras lo escrito. La placa no se mueve; el cursor
 * parpadea solo con movimiento permitido. */

.crm-placa-hueco {
  color: var(--crm-placa-apagado);
  white-space: pre;
}

.crm-placa-cursor {
  display: inline-block;
  flex: none;
  width: 2px;
  height: 0.9em;
  margin: 0 1px;
  background: var(--crm-placa-tinta);
}

.crm-placa-cursor {
  animation: crm-placa-parpadeo var(--crm-t-corriente) steps(1) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .crm-placa-cursor {
    animation: none;
  }
}

@keyframes crm-placa-parpadeo {
  50% { opacity: 0; }
}

/* ══ Modo foco ═════════════════════════════════════════════════════════ */
/*
 * Un trámite de principio a fin, una pregunta por pantalla. Capa de nivel 2
 * (§6) a pantalla completa sobre el lienzo, sin telón ni sombra: es la página
 * entera. Arriba, «Salir» (y la vía experta) y, debajo, los `Pasos` del kit,
 * que dicen el paso una sola vez; en el centro, la pregunta con su respuesta;
 * abajo, «Atrás» y un único «Siguiente», en un pie de 80 (72 a < 720) con su
 * filete dentro. Pregunta, respuesta y pie comparten el ancho del bloque (768:
 * tres columnas de 240 con 12 entre ellas, la rejilla de las fichas) y se
 * centran. Tipos de la ley vigente (§3): la pregunta es un título de página
 * de la experiencia (40/44; 28/34 a < 720 de contenedor); ayuda 16/24.
 * Controles de 48 (`tactil`, FUNDAMENTOS §2 y §17.1).
 */
.crm-modo-foco {
  container: crm-foco / inline-size;
  position: fixed;
  z-index: 41;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  background: var(--crm-bg);
  color: var(--crm-text);
  font-family: var(--crm-sans);
  animation: crm-es-funde var(--crm-t-capa) var(--crm-snap);
}

/* En línea, ocupa el ancho de su sitio: con `container: inline-size` su ancho propio es 0 y, en una rejilla que no
   estira, se quedaba en 2 px (la pregunta letra a letra). */
.crm-modo-foco[data-en-linea] {
  position: relative;
  z-index: auto;
  inset: auto;
  box-sizing: border-box;
  width: 100%;
  min-height: 560px;
  border: 1px solid var(--crm-line);
  animation: none;
}

.crm-modo-foco :where(*),
.crm-modo-foco ::before,
.crm-modo-foco ::after {
  box-sizing: border-box;
}

.crm-foco-cabecera {
  display: grid;
  gap: 12px;
  padding: 16px 24px 0;
}

/* Solo las acciones, a la derecha: el paso no se repite aquí (lo dicen los Pasos). */
.crm-foco-fila {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  min-height: 48px;
}

.crm-foco-cabecera-acciones {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

/*
 * A < 560 los Pasos dejan los filetes y su línea «Paso 2 de 5 · Datos». Aquí,
 * cada paso conserva además su marca de 20 bajo el filete (visto si está
 * hecho, triángulo si pide revisión, número si falta), la misma de los Pasos
 * en ancho: el estado nunca va solo en el color (GRAMATICA §6). Los nombres
 * siguen para el lector, que oye «paso 3 de 5, por revisar».
 */
@container crm-pasos (max-width: 559.98px) {
  .crm-foco-pasos:not([data-con-acciones]) .crm-pasos-cuerpo {
    padding-top: 8px;
  }

  .crm-foco-pasos:not([data-con-acciones]) .crm-pasos-numero {
    position: static;
    width: 20px;
    height: 20px;
    overflow: visible;
    clip-path: none;
  }
}

/* La misma marca cuando la pieza mide que sus nombres no caben, a cualquier ancho (doce pasos, nombres largos). */
.crm-foco-pasos[data-forma="estrecha"]:not([data-con-acciones]) .crm-pasos-cuerpo {
  padding-top: 8px;
}

.crm-foco-pasos[data-forma="estrecha"]:not([data-con-acciones]) .crm-pasos-numero {
  position: static;
  width: 20px;
  height: 20px;
  overflow: visible;
  clip-path: none;
}

.crm-foco-cuerpo {
  display: grid;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 32px 24px;
}

/* Centrado en los dos ejes; si la respuesta no cabe, desplaza desde arriba (nunca se corta por encima). */
.crm-foco-contenido {
  display: grid;
  align-content: center;
  gap: 24px;
  width: min(768px, 100%);
  min-width: 0;
  margin: auto;
}

.crm-modo-foco[data-ancho="amplio"] .crm-foco-contenido,
.crm-modo-foco[data-ancho="amplio"] .crm-foco-pie-interior {
  width: min(1600px, 100%);
}

.crm-modo-foco[data-alineacion="inicio"] .crm-foco-contenido {
  align-content: start;
  margin-block: 0;
}

.crm-modo-foco[data-alineacion="inicio"] .crm-foco-titulo,
.crm-modo-foco[data-alineacion="inicio"] .crm-foco-ayuda {
  text-align: start;
  margin-inline: 0;
}

.crm-foco-titulo {
  margin: 0;
  color: var(--crm-text);
  font-size: 40px;
  font-weight: 500;
  line-height: 44px;
  letter-spacing: -0.035em;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

/* La pregunta recibe el foco para que el lector la lea: no lleva anillo (§7, contenedor con tabIndex −1). */
.crm-foco-titulo:focus,
.crm-foco-titulo:focus-visible {
  outline: none;
}

.crm-foco-ayuda {
  max-width: 68ch;
  margin: -8px auto 0;
  color: var(--crm-text-2);
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

/*
 * Pie de 80 con el filete dentro (§1): 16 + 48 + 16. El filete se pinta por
 * dentro, sobre el relleno de arriba, y no suma alto (como borde daría 81, y
 * 73 a < 720). Va en un borde, no en una sombra: en colores forzados se ve.
 */
.crm-foco-pie {
  position: relative;
  padding: 16px 24px;
  background: var(--crm-bg);
}

.crm-foco-pie::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  border-top: 1px solid var(--crm-line);
  pointer-events: none;
}

.crm-foco-pie-interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: min(768px, 100%);
  margin: 0 auto;
}

.crm-foco-pie-derecha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.crm-foco-siguiente {
  min-width: 200px;
}

@container crm-foco (max-width: 719.98px) {
  .crm-foco-cabecera {
    padding: 12px 16px 0;
  }

  .crm-foco-cuerpo {
    padding: 24px 16px;
  }

  .crm-foco-titulo {
    font-size: 28px;
    line-height: 34px;
  }

  /* 72: 12 + 48 + 12. A pantalla completa, la franja del gesto de inicio se suma debajo (0 donde no la hay). */
  .crm-foco-pie {
    padding: 12px 16px;
  }

  .crm-modo-foco:not([data-en-linea]) .crm-foco-pie {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
}

@container crm-foco (max-width: 399.98px) {
  /* El verbo cabe entero: «Siguiente» toma el ancho que queda, «Atrás» se queda en su sitio. */
  .crm-foco-pie-derecha {
    flex: 1;
  }

  .crm-foco-pie-derecha .crm-foco-siguiente {
    flex: 1;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crm-modo-foco {
    animation: none;
  }
}

@media print {
  .crm-modo-foco {
    position: static;
    animation: none;
  }

  .crm-foco-pie,
  .crm-foco-cabecera-acciones {
    display: none;
  }
}

@media (forced-colors: active) {
  .crm-modo-foco {
    border: 1px solid CanvasText;
  }

  .crm-foco-pie::before {
    border-top-color: CanvasText;
  }
}

/* ══ Experiencia · FichaOpcion y GrupoFichas ═══════════════════════════
 * Hoja exclusiva de estas dos piezas (la integra Root en el agregador).
 * Solo variables --crm-* existentes y la escala de §1/§2/§3; radio 0.
 *
 * Medidas (con la escala vigente; la ley propia de ficha, §17.1, está
 * pendiente del director y se propone en el informe):
 *   ficha: relleno 20, filete 1. Cabeza según lo que lleva (FO07): con icono,
 *   48 (icono 20 en su caja de 48, distintivo de 24, flecha 16) y 16 hasta el
 *   nombre; solo distintivo, 24 y 12; solo flecha, en la línea del nombre; sin
 *   nada, no hay cabeza. Nombre 20/28 a 500 en UNA línea (§14, título: elipsis
 *   y el entero en el consejo); detalle 14/22 en muted, una línea, 4 debajo de
 *   SU nombre. Cifras: filete de 1 a 16 del texto y 12 de aire; rótulo 13/20
 *   en muted (clave: elipsis) y, a 6, la cifra 24/28 con su unidad a 14 en
 *   muted (desde 7 cifras enteras, compacta; si aun así no cabe, 20/24 y 12 en
 *   todo el grupo); la secundaria, 13/20 en una fila 8 más abajo. Motivo,
 *   recuperación y nota (ayuda): reflujo, nunca se cortan. Motivo 13/20, 12
 *   debajo.
 *   Compacta: fila de 88 como mínimo, icono a la izquierda y 16 entre columnas.
 *   Grupo: columnas de 240 como mínimo y 12 entre fichas (8 en lista).
 *
 * Alineación POR FILA (la crítica P1-5, revisada en FO01): el grupo en
 * rejilla da a cada ficha cuatro filas de su rejilla (cabeza, texto, cifras,
 * motivo) y la ficha las toma con `subgrid`. En una fila, los nombres
 * empiezan a la misma altura y las cifras también; el detalle va con su
 * nombre en la misma pista (antes, en la suya, quedaba a 90 del nombre si la
 * vecina tenía cuatro líneas). La ficha mide lo que su fila necesita: nada se
 * reparte por dentro.
 */

/*
 * Caja con el filete dentro para las dos piezas, todo lo que llevan dentro y
 * sus pseudoelementos (también la marca de elegida, `::before` de la ficha).
 * Los pseudoelementos van FUERA de `:where()`: dentro no son válidos (Selectors
 * 4 §4.2) y el navegador los olvida. Especificidad: 0 (y 0,0,1 los pseudo).
 */
:where(.crm-ficha-opcion, .crm-grupo-fichas),
:where(.crm-ficha-opcion, .crm-grupo-fichas)::before,
:where(.crm-ficha-opcion, .crm-grupo-fichas)::after,
:where(.crm-ficha-opcion, .crm-grupo-fichas) *,
:where(.crm-ficha-opcion, .crm-grupo-fichas) ::before,
:where(.crm-ficha-opcion, .crm-grupo-fichas) ::after {
  box-sizing: border-box;
}

/* ── Grupo ─────────────────────────────────────────────────────────── */
/*
 * El mínimo de columna se declara una vez (`--crm-ficha-columna-minima`): lo usan la rejilla y el reparto sin
 * huérfanos de ficha-opcion.tsx, que hace la misma cuenta que `auto-fit` con el ancho del grupo.
 */
.crm-grupo-fichas {
  --crm-ficha-columna-minima: 240px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--crm-ficha-columna-minima), 100%), 1fr));
  gap: 12px;
  width: 100%;
}

/*
 * Reparto sin huérfanos (FO09, §15): el grupo lee cuántas columnas pinta
 * `auto-fit` y, si con ellas la última fila queda coja, pide las equilibradas
 * (6 donde caben 4: 3 + 3). Nunca más de las que caben; columnas iguales.
 */
.crm-grupo-fichas[data-disposicion="rejilla"][data-columnas] {
  grid-template-columns: repeat(var(--crm-ficha-columnas), minmax(0, 1fr));
}

/* Dos: una al lado de otra en 640; una debajo de otra cuando no caben dos de 280. */
.crm-grupo-fichas[data-disposicion="dos"] {
  --crm-ficha-columna-minima: 280px;
  width: min(640px, 100%);
}

/* Lista: una columna de fichas compactas. */
.crm-grupo-fichas[data-disposicion="lista"] {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

/*
 * Un envoltorio (un `div` por clave, un consejo) no rompe la rejilla: no pinta
 * caja propia y sus fichas son de la rejilla del grupo (las flechas y el Tab
 * del grupo las ven igual, ficha-opcion.tsx). UN nivel: un envoltorio dentro de
 * otro no se aplana (avisa en desarrollo). Un grupo anidado no es un
 * envoltorio: conserva su caja y su rejilla (crítica 2242, N1).
 */
.crm-grupo-fichas > :not(.crm-ficha-opcion, .crm-grupo-fichas-vacio, .crm-grupo-fichas) {
  display: contents;
}

/* Vacío (FO08): icono de 20 y la línea; con un `Vacio` del kit (tipo y salida), el suyo, sin caja propia. */
.crm-grupo-fichas-vacio {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 20px;
  border: 1px solid var(--crm-line);
  color: var(--crm-muted);
  font-family: var(--crm-sans);
  font-size: 14px;
  line-height: 22px;
}

.crm-grupo-fichas-vacio-icono {
  flex: none;
  width: 20px;
  height: 20px;
  stroke-width: 1.6;
}

.crm-grupo-fichas-vacio[data-propio] {
  display: block;
  padding: 0;
  border: 0;
}

/* ── Ficha ─────────────────────────────────────────────────────────── */
.crm-ficha-opcion {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto auto;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  row-gap: 0;
  min-width: 0;
  margin: 0;
  padding: 20px;
  border: 1px solid var(--crm-line-2);
  border-radius: 0;
  background: var(--crm-panel);
  color: var(--crm-text);
  font-family: var(--crm-sans);
  text-align: start;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    background-color var(--crm-t-color) ease-out,
    border-color var(--crm-t-color) ease-out,
    transform var(--crm-t-pulsar) var(--crm-snap);
}

/*
 * En rejilla (y en «dos»): cuatro filas del grupo por ficha, compartidas por
 * toda la fila. El grupo NO pone hueco entre filas (row-gap 0, el mismo que el
 * de la ficha): con un subgrid de hueco distinto al de su padre, la diferencia
 * se reparte en las pistas (CSS Grid 2 §9) y una pista vacía en toda la fila
 * (sin cifras, sin motivo) dejaba 12 o 6 px de aire dentro de la ficha. Los 12
 * entre filas de fichas son el margen inferior de cada ficha (que el subgrid
 * suma a su última pista) y el grupo lo devuelve abajo.
 */
.crm-grupo-fichas:is([data-disposicion="rejilla"], [data-disposicion="dos"]) {
  row-gap: 0;
  margin-block-end: -12px;
}

.crm-grupo-fichas:is([data-disposicion="rejilla"], [data-disposicion="dos"]) :is(.crm-ficha-opcion, .crm-grupo-fichas-vacio) {
  margin-block-end: 12px;
}

.crm-grupo-fichas:is([data-disposicion="rejilla"], [data-disposicion="dos"]) .crm-ficha-opcion:not([data-compacta]) {
  grid-row: span 4;
  grid-template-rows: subgrid;
}

/* Cada parte, en su fila (aunque falte alguna): cabeza, texto, cifras, motivo. */
.crm-ficha-opcion:not([data-compacta]) > .crm-ficha-opcion-cabeza {
  grid-row: 1;
  grid-column: 1 / -1;
}

.crm-ficha-opcion:not([data-compacta]) > .crm-ficha-opcion-texto {
  grid-row: 2;
  grid-column: 1 / -1;
}

.crm-ficha-opcion:not([data-compacta]) > .crm-ficha-opcion-cifras {
  grid-row: 3;
  grid-column: 1 / -1;
}

.crm-ficha-opcion:not([data-compacta]) > .crm-ficha-opcion-motivo {
  grid-row: 4;
  grid-column: 1 / -1;
}

.crm-ficha-opcion-cabeza {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 48px;
  margin-bottom: 16px;
}

/* Solo distintivo: la fila de 24 y 12 hasta el nombre. */
.crm-ficha-opcion[data-cabeza="chip"]:not([data-compacta]) > .crm-ficha-opcion-cabeza {
  min-height: 24px;
  margin-bottom: 12px;
}

/*
 * Solo flecha (sin icono ni distintivo): la flecha va al final de la PRIMERA
 * línea del nombre y la ficha empieza por el nombre. La cabeza deja su fila
 * (que, si nadie de la fila la usa, mide 0) y se sienta en la del texto.
 */
.crm-ficha-opcion[data-cabeza="linea"]:not([data-compacta]) {
  grid-template-columns: minmax(0, 1fr) auto;
}

.crm-ficha-opcion[data-cabeza="linea"]:not([data-compacta]) > .crm-ficha-opcion-cabeza {
  grid-row: 2;
  grid-column: 2;
  min-height: 28px;
  margin: 0;
  margin-inline-start: 12px;
}

.crm-ficha-opcion[data-cabeza="linea"]:not([data-compacta]) > .crm-ficha-opcion-texto {
  grid-column: 1;
}

.crm-ficha-opcion-icono {
  display: grid;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--crm-line-2);
  color: var(--crm-text-2);
}

.crm-ficha-opcion-icono svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.6;
}

/*
 * Distintivo: etiqueta NEUTRA de 24 (§5.3: el verde no decora; FO02). Bloque,
 * no flex, para que la elipsis exista de verdad (FO06: en un `inline-flex` el
 * texto es un hijo anónimo y `text-overflow` no se pinta). Ancho máximo 240
 * (§14); el entero va en la descripción de la ficha y en el consejo.
 */
.crm-ficha-opcion-distintivo {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 240px;
  height: 24px;
  margin-inline-start: auto;
  padding: 0 8px;
  overflow: hidden;
  border: 1px solid var(--crm-line-2);
  color: var(--crm-text-2);
  font-size: 12px;
  font-weight: 400;
  line-height: 22px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.crm-ficha-opcion-flecha {
  flex: none;
  width: 16px;
  height: 16px;
  margin-inline-start: auto;
  color: var(--crm-muted);
  stroke-width: 1.6;
  transition:
    translate var(--crm-t-gesto) var(--crm-snap),
    color var(--crm-t-color) ease-out;
}

.crm-ficha-opcion-distintivo + .crm-ficha-opcion-flecha {
  margin-inline-start: 0;
}

.crm-ficha-opcion-flecha:dir(rtl) {
  scale: -1 1;
}

.crm-ficha-opcion-texto {
  display: grid;
  align-content: start;
  min-width: 0;
}

/*
 * Nombre (título de tarjeta, §14): elipsis en UNA línea; el entero, en el
 * nombre accesible y en el consejo de la ficha (puntero, foco y mantener
 * pulsado). Detalle (segunda línea, §14): elipsis, una línea, con el mismo
 * consejo. Así nada empuja a la vecina (FO01) y la ficha mide siempre lo
 * mismo por fila.
 */
.crm-ficha-opcion-nombre {
  min-width: 0;
  overflow: hidden;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.02em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.crm-ficha-opcion-detalle {
  min-width: 0;
  margin-top: 4px;
  overflow: hidden;
  color: var(--crm-muted);
  font-size: 14px;
  line-height: 22px;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

/* Lo que devuelve el consejo: una parte por línea (nombre, detalle, distintivo, cada cifra con su rótulo y su exacta). */
.crm-ficha-opcion-consejo-linea {
  display: block;
}

/*
 * Con algo recortado, mantener pulsado abre el consejo (ficha-opcion.tsx): ni el
 * menú del sistema ni la selección de texto se le ponen encima.
 */
.crm-ficha-opcion[data-oculto] {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ── Cifras (FO03) ─────────────────────────────────────────────────── */
/*
 * Debajo del texto, tras un filete: en una fila de la rejilla, los filetes y
 * las cifras de todas las fichas caen a la misma altura y se comparan de un
 * vistazo. Ni verde ni rojo: la cifra se lee por su rótulo, no por su color.
 */
.crm-ficha-opcion-cifras {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--crm-line);
}

.crm-ficha-opcion-cifra {
  display: grid;
  min-width: 0;
}

/* Rótulo (clave, §14): una línea con elipsis y el entero en el consejo; la marca «Provisional» nunca se corta. */
.crm-ficha-opcion-cifra-rotulo {
  display: flex;
  align-items: center;
  column-gap: 8px;
  min-width: 0;
  color: var(--crm-muted);
  font-size: 13px;
  line-height: 20px;
}

.crm-ficha-opcion-cifra-rotulo-texto {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Provisional: dicho con texto en una etiqueta neutra de 20 (§2), no con color. */
.crm-ficha-opcion-cifra-marca {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: 20px;
  padding: 0 6px;
  border: 1px solid var(--crm-line-2);
  color: var(--crm-text-2);
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
}

/* La principal: entre rótulo y cifra, 6 (§1). Cifra KPI de ficha: 24/28 (§3), con la unidad a 14 en muted. */
.crm-ficha-opcion-cifra[data-principal] .crm-ficha-opcion-cifra-valor,
.crm-ficha-opcion-cifra[data-principal] .crm-ficha-opcion-cifra-falta {
  margin-top: 6px;
}

/*
 * La cifra nunca se corta (§14): desde 7 cifras enteras se ve la compacta (la exacta, para el lector y en el consejo);
 * si a 24 no cabe, todo el grupo baja a 20 (lo mide la ficha); y si aun así no cabe, la unidad baja de línea: la cifra,
 * jamás. Sin `overflow: hidden` en ningún sitio de la cifra.
 */
.crm-ficha-opcion-cifra-valor {
  display: block;
  min-width: 0;
  color: inherit;
  font-size: 24px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

.crm-ficha-opcion-cifra-visible {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  max-width: 100%;
}

.crm-ficha-opcion-cifra-texto {
  white-space: nowrap;
}

/* Interlineado propio y menor que el de la cifra: alineada por la línea base, la unidad no estira la línea (28, o 24). */
.crm-ficha-opcion-cifra-unidad {
  color: var(--crm-muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
  white-space: nowrap;
}

/*
 * Escalón mínimo (§3: 20/24, unidad 12) cuando la cifra, ya compacta si tiene
 * 7 cifras enteras o más, no cabe a 24 (§14; lo mide la ficha a su ancho real,
 * escalado a 24, sin vaivén). En un grupo TODAS las cifras principales
 * comparten escalón, el de la que menos cabe (§3): la fila se lee pareja.
 */
.crm-ficha-opcion-cifra[data-principal][data-escalon="20"] .crm-ficha-opcion-cifra-valor,
.crm-grupo-fichas:has(.crm-ficha-opcion-cifra[data-escalon="20"]) .crm-ficha-opcion-cifra[data-principal] .crm-ficha-opcion-cifra-valor {
  font-size: 20px;
  line-height: 24px;
}

.crm-ficha-opcion-cifra[data-principal][data-escalon="20"] .crm-ficha-opcion-cifra-unidad,
.crm-grupo-fichas:has(.crm-ficha-opcion-cifra[data-escalon="20"]) .crm-ficha-opcion-cifra[data-principal] .crm-ficha-opcion-cifra-unidad {
  font-size: 12px;
  line-height: 16px;
}

/* Pendiente: se dice qué falta, en la línea de la cifra y sin pintar un número. */
.crm-ficha-opcion-cifra-falta {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--crm-muted);
  font-size: 14px;
  line-height: 22px;
}

.crm-ficha-opcion-cifra-nota {
  min-width: 0;
  margin-top: 4px;
  overflow-wrap: anywhere;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
}

/*
 * La secundaria (otra base: «Ahorro anual estimado» frente al total del periodo): dos líneas, como la principal. El
 * rótulo, que dice el PERIODO, en su propia línea a todo el ancho de la ficha: en una ficha de rejilla (240 o más) se lee
 * entero a la primera; antes compartía fila con la marca y la cifra y en 248 quedaba «Ahorro a…», justo la palabra que
 * cambia el sentido. Debajo, la cifra (13/20, §3: unidad del mismo tamaño en muted) y, a su lado, la marca «Provisional».
 * Entre rótulo y cifra, 6 (§1). Si aun a todo el ancho el rótulo no cabe, elipsis y consejo (§14, clave): la ley no se
 * relaja, solo deja de recortarse por falta de composición. El orden del DOM (rótulo, marca, cifra) no cambia: el
 * lector lo oye igual.
 */
.crm-ficha-opcion-cifra:not([data-principal]) {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "rotulo rotulo"
    "valor marca"
    "nota nota";
  align-items: center;
  column-gap: 8px;
  row-gap: 6px;
}

.crm-ficha-opcion-cifra:not([data-principal]) .crm-ficha-opcion-cifra-rotulo {
  display: contents;
}

.crm-ficha-opcion-cifra:not([data-principal]) .crm-ficha-opcion-cifra-rotulo-texto {
  grid-area: rotulo;
  color: var(--crm-muted);
  font-size: 13px;
  line-height: 20px;
}

.crm-ficha-opcion-cifra:not([data-principal]) .crm-ficha-opcion-cifra-marca {
  grid-area: marca;
  justify-self: start;
}

.crm-ficha-opcion-cifra:not([data-principal]) .crm-ficha-opcion-cifra-valor,
.crm-ficha-opcion-cifra:not([data-principal]) .crm-ficha-opcion-cifra-falta {
  grid-area: valor;
  color: var(--crm-text-2);
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
}

/* Lo que falta es ayuda (sin cifra no hay marca «Provisional»): toda la línea de la cifra, y refluye (nunca se corta). */
.crm-ficha-opcion-cifra:not([data-principal]) .crm-ficha-opcion-cifra-falta {
  grid-column: 1 / -1;
  color: var(--crm-muted);
}

.crm-ficha-opcion-cifra:not([data-principal]) .crm-ficha-opcion-cifra-unidad {
  font-size: 13px;
}

.crm-ficha-opcion-cifra:not([data-principal]) .crm-ficha-opcion-cifra-nota {
  grid-area: nota;
  margin-top: 0;
}

/* ── Motivo ────────────────────────────────────────────────────────── */
.crm-ficha-opcion-motivo {
  display: grid;
  gap: 4px;
  min-width: 0;
  margin-top: 12px;
  overflow-wrap: anywhere;
  color: var(--crm-text-2);
  font-size: 13px;
  line-height: 20px;
}

/* Cada parte abraza su texto y arranca al principio de su pista: la pista (la de la fila) da la alineación. */
:is(.crm-ficha-opcion-cabeza, .crm-ficha-opcion-texto, .crm-ficha-opcion-cifras, .crm-ficha-opcion-motivo) {
  align-self: start;
}

.crm-ficha-opcion-recuperacion {
  color: var(--crm-muted);
}

/*
 * Recuperación disponible: una acción, dicha con subrayado y flecha (no con
 * verde, FO05). La flecha la pinta la ficha, pegada a la última palabra por
 * un espacio de no separación: nunca se queda sola en otra línea (FO04).
 */
.crm-ficha-opcion-recuperacion[data-accion] {
  color: var(--crm-text);
}

.crm-ficha-opcion-recuperacion[data-accion] .crm-ficha-opcion-recuperacion-texto {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--crm-muted);
}

.crm-ficha-opcion-recuperacion-flecha {
  white-space: nowrap;
}

.crm-ficha-opcion-recuperacion-flecha svg {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  stroke-width: 1.5;
  transition: translate var(--crm-t-gesto) var(--crm-snap);
}

.crm-ficha-opcion-recuperacion-flecha svg:dir(rtl) {
  scale: -1 1;
}

/* ── Estados (§7) ──────────────────────────────────────────────────── */
@media (hover: hover) {
  /* Hover: instantáneo al entrar, 120 al salir. */
  /* Al entrar, fondo y borde cambian sin transición (§7); al salir vuelven con la de la ficha (120). */
  .crm-ficha-opcion:hover:not([data-inactiva]) {
    border-color: var(--crm-control);
    background: var(--crm-panel-2);
    transition: transform var(--crm-t-pulsar) var(--crm-snap);
  }

  .crm-ficha-opcion:hover:not([data-inactiva]) .crm-ficha-opcion-flecha {
    color: var(--crm-text);
    translate: 2px 0;
  }

  .crm-ficha-opcion:hover:not([data-inactiva]) .crm-ficha-opcion-flecha:dir(rtl) {
    translate: -2px 0;
  }

  /* Bloqueada con recuperación: lo que responde es la recuperación (su flecha se adelanta como la de la ficha). */
  .crm-ficha-opcion[data-bloqueada]:hover:has(.crm-ficha-opcion-recuperacion[data-accion]) {
    border-color: var(--crm-muted);
  }

  .crm-ficha-opcion[data-recuperable]:hover .crm-ficha-opcion-recuperacion-flecha svg {
    translate: 2px 0;
  }

  .crm-ficha-opcion[data-recuperable]:hover .crm-ficha-opcion-recuperacion-flecha svg:dir(rtl) {
    translate: -2px 0;
  }

  .crm-ficha-opcion[data-recuperable]:hover .crm-ficha-opcion-recuperacion-texto {
    text-decoration-color: currentColor;
  }
}

.crm-ficha-opcion:active:not([data-inactiva]) {
  transform: translateY(0.5px);
}

.crm-ficha-opcion:focus-visible {
  outline: var(--crm-foco-ancho) solid var(--crm-acento);
  outline-offset: 2px;
}

/* Elegida: marca de acento de 2 px al principio y fondo panel-3. */
.crm-ficha-opcion[aria-pressed="true"] {
  border-color: var(--crm-acento-linea);
  background: var(--crm-panel-3);
}

.crm-ficha-opcion[aria-pressed="true"]::before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  inset-inline-start: -1px;
  width: 2px;
  background: var(--crm-acento);
}

.crm-ficha-opcion[aria-pressed="true"] .crm-ficha-opcion-icono {
  border-color: var(--crm-acento-linea);
  color: var(--crm-acento);
}

/* No disponible sin motivo: contorno apagado y texto dim, sin opacidad. */
.crm-ficha-opcion[data-inactiva] {
  cursor: not-allowed;
}

.crm-ficha-opcion[aria-disabled="true"]:not([data-bloqueada], [data-cargando]):not(.crm-grupo-fichas[data-solo-lectura] > *, .crm-grupo-fichas[aria-busy] > *) {
  border-color: var(--crm-linea-apagada);
  background: transparent;
  color: var(--crm-dim);
}

.crm-ficha-opcion[aria-disabled="true"]:not([data-bloqueada], [data-cargando]):not(.crm-grupo-fichas[data-solo-lectura] > *, .crm-grupo-fichas[aria-busy] > *) :is(.crm-ficha-opcion-icono, .crm-ficha-opcion-detalle, .crm-ficha-opcion-distintivo, .crm-ficha-opcion-cifra-rotulo, .crm-ficha-opcion-cifra-unidad, .crm-ficha-opcion-cifra-falta, .crm-ficha-opcion-cifra-nota) {
  border-color: var(--crm-linea-apagada);
  color: var(--crm-dim);
}

/* Bloqueada: se lee entera (nombre y cifras en text-2, motivo legible); lo apagado es el contorno y el candado. */
.crm-ficha-opcion[data-bloqueada] {
  border-color: var(--crm-linea-apagada);
  background: transparent;
  color: var(--crm-text-2);
}

.crm-ficha-opcion[data-bloqueada] .crm-ficha-opcion-icono {
  border-color: var(--crm-linea-apagada);
  color: var(--crm-muted);
}

.crm-ficha-opcion[data-bloqueada]:has(.crm-ficha-opcion-recuperacion[data-accion]) {
  cursor: pointer;
}

/* Confirmando: quieta, con su indicador; el foco y el sitio no cambian. */
.crm-ficha-opcion[data-cargando],
.crm-grupo-fichas[aria-busy] > .crm-ficha-opcion {
  cursor: progress;
}

.crm-ficha-opcion-cargando {
  color: var(--crm-text-2);
  animation: crm-ctl-giro var(--crm-t-giro) linear infinite;
}

/* Solo lectura: se ve la elegida; no hay hover ni cursor de acción. */
.crm-grupo-fichas[data-solo-lectura] > .crm-ficha-opcion {
  cursor: default;
}

.crm-ficha-opcion-motivo[data-lectura] {
  color: var(--crm-muted);
}

/* ── Compacta (listas largas) ──────────────────────────────────────── */
/*
 * Columnas por nombre: el texto, las cifras y el motivo van en «texto»; el
 * distintivo y la flecha, en las últimas. Sin icono, la ficha no guarda los
 * 48 + 16 de su columna (FO07), salvo en una lista donde alguna lo lleva: ahí
 * los nombres siguen alineados.
 */
.crm-ficha-opcion[data-compacta] {
  grid-template-columns: [texto-start] minmax(0, 1fr) [texto-end] auto;
  grid-template-rows: none;
  grid-auto-rows: auto;
  align-content: center;
  align-items: center;
  column-gap: 16px;
  min-height: 88px;
  padding-block: 16px;
}

.crm-ficha-opcion[data-compacta]:has(.crm-ficha-opcion-distintivo + .crm-ficha-opcion-flecha) {
  grid-template-columns: [texto-start] minmax(0, 1fr) [texto-end] auto auto;
}

.crm-ficha-opcion[data-compacta][data-icono],
.crm-grupo-fichas:has(.crm-ficha-opcion-icono) .crm-ficha-opcion[data-compacta] {
  grid-template-columns: 48px [texto-start] minmax(0, 1fr) [texto-end] auto;
}

.crm-ficha-opcion[data-compacta][data-icono]:has(.crm-ficha-opcion-distintivo + .crm-ficha-opcion-flecha),
.crm-grupo-fichas:has(.crm-ficha-opcion-icono) .crm-ficha-opcion[data-compacta]:has(.crm-ficha-opcion-distintivo + .crm-ficha-opcion-flecha) {
  grid-template-columns: 48px [texto-start] minmax(0, 1fr) [texto-end] auto auto;
}

.crm-ficha-opcion[data-compacta] .crm-ficha-opcion-cabeza {
  display: contents;
}

.crm-ficha-opcion[data-compacta] .crm-ficha-opcion-icono {
  grid-column: 1;
  grid-row: 1 / span 3;
  align-self: center;
}

.crm-ficha-opcion[data-compacta] :is(.crm-ficha-opcion-texto, .crm-ficha-opcion-cifras, .crm-ficha-opcion-motivo) {
  grid-column: texto;
}

.crm-ficha-opcion[data-compacta] .crm-ficha-opcion-texto {
  grid-row: 1;
}

.crm-ficha-opcion[data-compacta] .crm-ficha-opcion-cifras {
  grid-row: 2;
  margin-top: 8px;
  padding-top: 0;
  border-top: 0;
}

.crm-ficha-opcion[data-compacta] .crm-ficha-opcion-motivo {
  grid-row: 3;
}

.crm-ficha-opcion[data-compacta] :is(.crm-ficha-opcion-distintivo, .crm-ficha-opcion-flecha) {
  grid-column: -2 / -1;
  grid-row: 1 / span 3;
  align-self: center;
  margin-inline-start: 0;
}

.crm-ficha-opcion[data-compacta] .crm-ficha-opcion-distintivo:has(+ .crm-ficha-opcion-flecha) {
  grid-column: -3 / -2;
}

/* Sin subgrid (navegadores antiguos): cada ficha con sus filas propias, sin repartir aire. */
@supports not (grid-template-rows: subgrid) {
  .crm-grupo-fichas:is([data-disposicion="rejilla"], [data-disposicion="dos"]) .crm-ficha-opcion:not([data-compacta]) {
    grid-row: auto;
    grid-template-rows: auto auto auto 1fr;
  }
}

/* ── Movimiento reducido y colores forzados ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .crm-ficha-opcion,
  .crm-ficha-opcion-flecha,
  .crm-ficha-opcion-recuperacion-flecha svg {
    transition-property: background-color, border-color, color;
  }

  .crm-ficha-opcion:active:not([data-inactiva]) {
    transform: none;
  }

  .crm-ficha-opcion:hover:not([data-inactiva]) .crm-ficha-opcion-flecha,
  .crm-ficha-opcion[data-recuperable]:hover .crm-ficha-opcion-recuperacion-flecha svg {
    translate: none;
  }

  .crm-ficha-opcion-cargando {
    animation: none;
  }
}

@media (forced-colors: active) {
  .crm-ficha-opcion[aria-pressed="true"]::before {
    background: Highlight;
  }

  .crm-ficha-opcion[data-bloqueada] {
    border-style: dashed;
  }

  .crm-ficha-opcion-cifras {
    border-top-color: CanvasText;
  }
}

/* Atajo de la ficha (PR #31, mostrador): su Tecla abajo a la derecha; en la compacta, en el sitio de la flecha. Nunca en táctil. */
.crm-ficha-opcion-atajo {
  position: absolute;
  right: 20px;
  bottom: 20px;
}

/* Con atajo, el texto deja sitio a su tecla: nunca la pisa. */
.crm-ficha-opcion:has(.crm-ficha-opcion-atajo):not([data-compacta]) .crm-ficha-opcion-texto {
  padding-right: 32px;
}

.crm-ficha-opcion[data-compacta] .crm-ficha-opcion-atajo {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}

.crm-ficha-opcion[data-compacta]:has(.crm-ficha-opcion-atajo) .crm-ficha-opcion-flecha {
  display: none;
}

@media (pointer: coarse) {
  .crm-ficha-opcion-atajo {
    display: none;
  }

  .crm-ficha-opcion[data-compacta]:has(.crm-ficha-opcion-atajo) .crm-ficha-opcion-flecha {
    display: block;
  }
}

/* Nombre en dos líneas (`lineas={2}`): decisiones cuyo nombre es la acción. Corta solo a partir de la tercera. */
.crm-ficha-opcion[data-lineas="2"] .crm-ficha-opcion-nombre {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Firma manuscrita; el lockup FirmaCriterium conserva su propia familia. */
.crm-firma-pantalla,
.crm-firma-pantalla * { box-sizing: border-box; }
.crm-firma-pantalla {
  display: grid;
  gap: 16px;
  min-width: 0;
  width: 100%;
  color: var(--crm-text);
  font-family: var(--crm-sans);
  font-size: 15px;
  line-height: 1.5;
}
.crm-firma-pantalla-titulo { margin: 0; font-size: 20px; font-weight: 500; overflow-wrap: anywhere; }
.crm-firma-pantalla-ayuda,
.crm-firma-pantalla-estado { margin: 0; color: var(--crm-muted); }
.crm-firma-pantalla-canvas {
  display: block;
  width: 100%;
  height: clamp(280px, 45vh, 520px);
  border: 1px solid var(--crm-line);
  border-radius: 0;
  background: var(--crm-bg);
  color: var(--crm-text);
  touch-action: none;
  user-select: none;
  cursor: crosshair;
}
.crm-firma-pantalla-acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.crm-firma-pantalla-error { margin: 0; color: var(--crm-text); font-weight: 500; }
@media (max-width: 30em) {
  .crm-firma-pantalla-acciones { display: grid; grid-template-columns: minmax(0, 1fr); }
  .crm-firma-pantalla-acciones .crm-boton { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .crm-firma-pantalla .crm-boton { animation: none; transition: none; }
}

/*
 * Resumen y seguimiento de la experiencia guiada: Ticket y PuntosRecorrido
 * (datos). Un bloque por pieza; ninguna regla compartida salvo la caja.
 *
 * Medidas: FUNDAMENTOS §2 (filas 36, táctil 44 de zona), §3 (cifras en
 * Geist con tabular-nums; unidad por tamaño: 40 → 24, 28 → 16, 24 → 14 y
 * 13–15 → mismo tamaño en muted), §6 (radio 0; círculos solo en los puntos),
 * §14 (sin NaN, «—» o el motivo) y §15 (contenedor, cortes 400 y 560).
 * Solo variables --crm-*. Con prefers-reduced-motion, solo color.
 */

/* Los pseudoelementos no valen dentro de :where() (la regla entera se descartaría): van como selectores propios. */
:where(.crm-ticket, .crm-puntos),
:where(.crm-ticket, .crm-puntos) *,
:where(.crm-ticket, .crm-puntos) ::before,
:where(.crm-ticket, .crm-puntos) ::after {
  box-sizing: border-box;
}

/* ══ Ticket ════════════════════════════════════════════════════════════
 * Caja de 560, relleno 24 (16 a < 400). Cabecera 24/32. Líneas de 36 (44
 * al tacto) en una rejilla común: concepto | importe | acción. El importe,
 * 14/22 a 500 con su unidad al mismo tamaño en muted, alineado a la
 * derecha de SU columna: «Cambiar» vive en la columna siguiente y no lo
 * mueve. Total: Cifra de §14 con el escalón por el ANCHO REAL de su fila
 * (la pieza mide y pone `data-medido`): 40/44 con la unidad a 24 (techo 28
 * a < 400 de contenedor); con 7 cifras enteras que no caben, compacta con
 * la exacta en el consejo y, al tacto y en papel, escrita debajo a 12/16;
 * si aun así no cabe, 28/32 · 24/28 · 20/24 con la unidad a 16 · 14 · 12.
 * Antes de medir (servidor), la estimación: 28/32 con 7 cifras enteras y un
 * escalón menos a < 400. Marcas de estado («Provisional», «No suma») de 20
 * con texto, no solo color.
 */
.crm-ticket {
  container-type: inline-size;
  position: relative;
  width: min(560px, 100%);
  border: 1px solid var(--crm-line-2);
  border-bottom: 0;
  background: var(--crm-panel);
  color: var(--crm-text);
  font-family: var(--crm-sans);
  font-variant-numeric: tabular-nums;
  text-align: left;
}

/* El relleno va en el papel (16 a < 400 de contenedor): el propio contenedor no responde a su consulta. */
/*
 * Una sola columna ACOTADA al papel (`minmax(0, 1fr)`). Con la pista implícita `auto` de antes, la pista crecía hasta el
 * min-content de sus hijos: el total (cifra sin partir) ensanchaba la fila y la medida del escalón decía «cabe» dentro
 * de un padre que ya se salía del ticket (F7: 15 cifras a 40 en una caja de 560, documento desplazado 186 a 390).
 */
.crm-ticket-papel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 24px 24px 32px;
}

.crm-ticket-cabecera {
  display: grid;
  gap: 4px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--crm-line-2);
}

.crm-ticket-rotulo {
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.crm-ticket-titulo {
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.crm-ticket-subtitulo {
  color: var(--crm-text-2);
  font-size: 15px;
  line-height: 24px;
  overflow-wrap: anywhere;
}

.crm-ticket-extra {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

/* La rejilla de columnas es del `dl`; cada línea la hereda (subgrid): todas las cifras comparten borde derecho. */
.crm-ticket-lineas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) fit-content(50%);
  column-gap: 12px;
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px dashed var(--crm-line-2);
}

.crm-ticket-lineas[data-con-acciones] {
  grid-template-columns: minmax(0, 1fr) fit-content(50%) auto;
}

/*
 * Fila de 36 (§2) con relleno de la escala (§1: 4; el 7 de antes no existe): la línea de 22 la centra la propia
 * rejilla (`align-content`), así una fila de una línea mide 36 justos, también la que lleva «Cambiar» (28 + 4 + 4;
 * con 7 medía 42), y una que envuelve conserva 4 arriba y abajo.
 */
.crm-ticket-linea {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: baseline;
  align-content: center;
  min-height: 36px;
  padding: 4px 0;
}

.crm-ticket-concepto {
  min-width: 0;
  color: var(--crm-text-2);
  font-size: 14px;
  line-height: 22px;
  /* Envuelve por palabras; solo parte una palabra que no cabe ella sola en la línea (un identificador larguísimo). */
  overflow-wrap: break-word;
}

/*
 * Sin `min-width: 0`: con él, el mínimo automático de la pista de cifras era 0 y `fit-content(36%)` la dejaba más
 * estrecha que una cifra que no se parte (9 cifras a 390: 3,4 px fuera de la columna común, F4). Así la pista
 * nunca es más estrecha que su cifra más ancha; los motivos refluyen (`anywhere`) y no la ensanchan.
 */
.crm-ticket-importe {
  grid-column: 2;
  display: grid;
  justify-items: end;
  gap: 4px;
  margin: 0;
  color: var(--crm-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  text-align: right;
}

.crm-ticket-cifra {
  white-space: nowrap;
}

.crm-ticket-importe .crm-ticket-unidad {
  color: var(--crm-muted);
  font-weight: 400;
}

/* Sin cifra: el motivo, en frase, que refluye; nunca un «€» suelto. */
.crm-ticket-falta {
  color: var(--crm-muted);
  font-weight: 400;
  overflow-wrap: anywhere;
}

.crm-ticket-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 4px 8px;
}

.crm-ticket-motivo {
  color: var(--crm-muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  overflow-wrap: anywhere;
}

.crm-ticket-marca {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 6px;
  border: 1px solid var(--crm-aviso-linea);
  color: var(--crm-text-2);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0;
  white-space: nowrap;
}

.crm-ticket-linea[data-estado="excluida"] .crm-ticket-marca {
  border-color: var(--crm-line-2);
}

.crm-ticket-linea[data-estado="excluida"] :is(.crm-ticket-concepto, .crm-ticket-cifra) {
  color: var(--crm-muted);
}

/* Solo existe en las líneas con «Cambiar»: la columna 3 la sostiene la rejilla, no un `dd` vacío. */
.crm-ticket-accion {
  grid-column: 3;
  margin: 0;
}

/* Moneda no reconocida: se dice una vez, en frase; las cifras van sin unidad. */
.crm-ticket-aviso {
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px dashed var(--crm-line-2);
  color: var(--crm-text-2);
  font-size: 13px;
  line-height: 20px;
}

.crm-ticket-vacio {
  margin: 0;
  padding: 16px 0;
  border-bottom: 1px dashed var(--crm-line-2);
  color: var(--crm-muted);
  font-size: 14px;
  line-height: 22px;
}

.crm-ticket-total {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  padding-top: 20px;
}

.crm-ticket-total-rotulo {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
}

.crm-ticket-total-rotulo .crm-ticket-marca {
  align-self: center;
}

/* Nunca más ancha que su fila: la medida compara su texto con ESTE ancho (el del papel), no con uno que crece. */
.crm-ticket-total-cifra {
  max-width: 100%;
  margin-left: auto;
  font-size: 40px;
  font-weight: 500;
  line-height: 44px;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

/* La unidad no agranda la línea de la cifra (40/44): su caja, a su tamaño, como en el Kpi. */
.crm-ticket-total-cifra .crm-ticket-unidad {
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0;
}

.crm-ticket-total-falta {
  margin-left: auto;
  color: var(--crm-muted);
  font-size: 15px;
  line-height: 22px;
}

.crm-ticket-total-nota {
  flex-basis: 100%;
  color: var(--crm-text-2);
  font-size: 12px;
  line-height: 16px;
  text-align: right;
}

/* Antes de medir (servidor, sin JavaScript): la estimación por cifras enteras. */
.crm-ticket-total-cifra:not([data-medido])[data-largo] {
  font-size: 28px;
  line-height: 32px;
}

.crm-ticket-total-cifra:not([data-medido])[data-largo] .crm-ticket-unidad {
  font-size: 16px;
}

/* Medido: el escalón que cabe en la fila (la pieza ya aplica el techo de 28 a < 400). */
.crm-ticket-total-cifra[data-medido][data-escalon="40"] {
  font-size: 40px;
  line-height: 44px;
}

.crm-ticket-total-cifra[data-medido][data-escalon="40"] .crm-ticket-unidad {
  font-size: 24px;
}

.crm-ticket-total-cifra[data-medido][data-escalon="28"] {
  font-size: 28px;
  line-height: 32px;
}

.crm-ticket-total-cifra[data-medido][data-escalon="28"] .crm-ticket-unidad {
  font-size: 16px;
}

.crm-ticket-total-cifra[data-medido][data-escalon="24"] {
  font-size: 24px;
  line-height: 28px;
}

.crm-ticket-total-cifra[data-medido][data-escalon="24"] .crm-ticket-unidad {
  font-size: 14px;
}

.crm-ticket-total-cifra[data-medido][data-escalon="20"] {
  font-size: 20px;
  line-height: 24px;
}

.crm-ticket-total-cifra[data-medido][data-escalon="20"] .crm-ticket-unidad {
  font-size: 12px;
}

/* Mientras la pieza mide (en un mismo fotograma, sin pintar): una línea, acotada a su fila; lo que sobra, se cuenta. */
.crm-ticket-total-cifra[data-midiendo] {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

/* Exacta o compacta: se pinta una; la otra no ocupa ni se lee. */
.crm-ticket-total-cifra[data-compacta] > .crm-ticket-cifra,
.crm-ticket-total-cifra:not([data-compacta]) > .crm-ticket-compacta {
  display: none;
}

/* Compacta: parada de Tab con su consejo (la exacta). Foco de control, un anillo (§7). */
.crm-ticket-total-cifra[data-compacta]:focus-visible {
  outline: var(--crm-foco-ancho) solid var(--crm-acento);
  outline-offset: 2px;
}

/* La exacta de la compacta: para el lector siempre; a la vista al tacto y en papel (detalle explícito, 12/16). */
.crm-ticket-total-exacta {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (hover: none), (pointer: coarse), print {
  .crm-ticket-total-exacta {
    position: static;
    display: block;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    color: var(--crm-muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0;
    text-align: right;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

.crm-ticket-pie {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  padding-top: 16px;
  color: var(--crm-text-2);
  font-size: 13px;
  line-height: 20px;
}

/* Troquel: el papel acaba en dientes de 6 hacia abajo, con el filete del borde siguiendo el corte. */
.crm-ticket-troquel {
  position: absolute;
  bottom: -6px;
  left: -1px;
  width: calc(100% + 2px);
  height: 6px;
  overflow: visible;
}

.crm-ticket-diente {
  fill: var(--crm-panel);
}

.crm-ticket-diente-filo {
  fill: none;
  stroke: var(--crm-line-2);
  stroke-width: 1;
}

/* Al tacto, fila de 44 con relleno de la escala (8; antes 11): una línea y «Cambiar» (28 + 8 + 8), centradas por la rejilla. */
@media (pointer: coarse) {
  .crm-ticket-linea {
    min-height: 44px;
    padding: 8px 0;
  }
}

@container (max-width: 399px) {
  .crm-ticket-papel {
    padding: 16px 16px 24px;
  }

  /* La columna de cifras se queda con lo justo (36 % como tope; una cifra nunca se parte): el concepto conserva sus palabras. */
  .crm-ticket-lineas {
    grid-template-columns: minmax(0, 1fr) fit-content(36%);
  }

  .crm-ticket-lineas[data-con-acciones] {
    grid-template-columns: minmax(0, 1fr) fit-content(36%) auto;
  }

  .crm-ticket-total-cifra {
    font-size: 28px;
    line-height: 32px;
  }

  .crm-ticket-total-cifra .crm-ticket-unidad {
    font-size: 16px;
  }

  .crm-ticket-total-cifra:not([data-medido])[data-largo] {
    font-size: 24px;
    line-height: 28px;
  }

  .crm-ticket-total-cifra:not([data-medido])[data-largo] .crm-ticket-unidad {
    font-size: 14px;
  }
}

@media (forced-colors: active) {
  .crm-ticket-marca {
    border-color: CanvasText;
  }

  .crm-ticket-diente-filo {
    stroke: CanvasText;
  }
}

/* ══ Puntos del recorrido ══════════════════════════════════════════════
 * Puntos de 16 sobre un filete de 2; nombres 12/16 (el actual a 500).
 * A < 560 de contenedor, solo los puntos y el resumen («Ahora: …», «Estado
 * sin confirmar»). Estados del punto: hecho (relleno y visto), actual
 * (anillo y punto), pendiente (anillo apagado), parado (anillo con raya, o
 * con aspa en error si falló) y desconocido (anillo discontinuo: no se
 * afirma nada). El filete solo llega en verde hasta un actual que existe.
 */
/*
 * Ancho explícito: con `container-type: inline-size` el ancho intrínseco del
 * carril es 0 (contención de tamaño en línea), así que en un sitio que encoge
 * al contenido (rejilla con `justify-items: center`, flex sin base, inline-block)
 * se quedaría en 0 y desaparecería. El carril ocupa el ancho de su sitio.
 */
.crm-puntos {
  container-type: inline-size;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px 24px;
  color: var(--crm-text);
  font-family: var(--crm-sans);
}

/* El carril se queda con el ancho; la acción va a su lado y, si no cabe, debajo. */
.crm-puntos-carril {
  display: grid;
  flex: 1 1 480px;
  gap: 8px;
  min-width: 0;
}

.crm-puntos-resumen {
  display: none;
  margin: 0;
  color: var(--crm-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
}

.crm-puntos-cuenta {
  color: var(--crm-muted);
  font-weight: 400;
}

.crm-puntos-motivo,
.crm-puntos-vacio {
  margin: 0;
  color: var(--crm-text-2);
  font-size: 13px;
  line-height: 20px;
  overflow-wrap: anywhere;
}

.crm-puntos-vacio {
  color: var(--crm-muted);
}

.crm-puntos-lista {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crm-puntos-punto {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  min-width: 0;
  text-align: center;
  /*
   * El punto en sí no transiciona nada (lo hacen su filete y su marca, solo color). Se declara: sin esto su valor
   * inicial es `all`, y la regla global de movimiento reducido de la base (`* { transition-duration: 0.01ms
   * !important }`) lo dejaba como «all 0.01ms», una transición de todo que el contrato «solo color» no admite (F4).
   */
  transition: none;
}

/* El filete que une con el punto anterior: verde hasta el actual. */
.crm-puntos-punto::before {
  content: "";
  position: absolute;
  top: 7px;
  right: calc(50% + 8px);
  left: calc(-50% + 8px);
  height: 2px;
  background: var(--crm-line-2);
  transition: background-color var(--crm-t-color) var(--crm-snap);
}

.crm-puntos-punto:first-child::before {
  display: none;
}

.crm-puntos-punto:is([data-estado="hecho"], [data-estado="actual"])::before {
  background: var(--crm-acento);
}

.crm-puntos-marca {
  position: relative;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 2px solid var(--crm-line-2);
  border-radius: 50%;
  background: var(--crm-panel);
  transition:
    background-color var(--crm-t-color) var(--crm-snap),
    border-color var(--crm-t-color) var(--crm-snap);
}

.crm-puntos-marca svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: var(--crm-sobre-acento);
  stroke-width: 1.6;
  stroke-linecap: square;
}

.crm-puntos-punto[data-estado="hecho"] .crm-puntos-marca {
  border-color: var(--crm-acento);
  background: var(--crm-acento);
}

.crm-puntos-punto[data-estado="actual"] .crm-puntos-marca {
  border-color: var(--crm-acento);
}

.crm-puntos-punto[data-estado="actual"] .crm-puntos-marca::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--crm-acento);
  /*
   * El punto interior del actual existe (content "") y no transiciona: aparece con el estado. Se declara `none`: si
   * no, su valor inicial `all` recibe los 0.01ms globales de movimiento reducido de la base (F5).
   */
  transition: none;
}

.crm-puntos-punto[data-estado="desconocido"] .crm-puntos-marca {
  border-style: dashed;
}

.crm-puntos-punto[data-estado="parado"] .crm-puntos-marca {
  border-color: var(--crm-muted);
}

.crm-puntos-punto[data-estado="parado"] .crm-puntos-marca svg {
  stroke: var(--crm-muted);
}

.crm-puntos[data-estado="fallado"] .crm-puntos-punto[data-estado="parado"] .crm-puntos-marca {
  border-color: var(--crm-error);
}

.crm-puntos[data-estado="fallado"] .crm-puntos-punto[data-estado="parado"] .crm-puntos-marca svg {
  stroke: var(--crm-error);
}

.crm-puntos-nombre {
  max-width: 100%;
  overflow: hidden;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-puntos-punto[data-estado="hecho"] .crm-puntos-nombre {
  color: var(--crm-text-2);
}

.crm-puntos-punto:is([data-estado="actual"], [data-estado="parado"]) .crm-puntos-nombre {
  color: var(--crm-text);
  font-weight: 500;
}

/* Parado: el recorrido entero se apaga (lo hecho sigue con su visto). */
.crm-puntos:is([data-estado="cancelado"], [data-estado="fallado"]) .crm-puntos-punto::before {
  background: var(--crm-linea-apagada);
}

.crm-puntos[data-estado="fallado"] .crm-puntos-resumen {
  color: var(--crm-error);
}

.crm-puntos-accion {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@container (max-width: 559px) {
  .crm-puntos-resumen {
    display: block;
  }

  .crm-puntos-nombre {
    display: none;
  }

  .crm-puntos-accion > * {
    flex: 1 1 auto;
  }
}

@media (forced-colors: active) {
  .crm-puntos-punto:is([data-estado="hecho"], [data-estado="actual"])::before,
  .crm-puntos-punto[data-estado="hecho"] .crm-puntos-marca,
  .crm-puntos-punto[data-estado="actual"] .crm-puntos-marca::after {
    background: Highlight;
  }

  .crm-puntos-punto:is([data-estado="hecho"], [data-estado="actual"]) .crm-puntos-marca {
    border-color: Highlight;
  }

  .crm-puntos-marca svg {
    stroke: CanvasText;
  }

  .crm-puntos-punto[data-estado="hecho"] .crm-puntos-marca svg {
    stroke: HighlightText;
  }
}

/* Ficha documental de consulta · GRAMATICA §8, RFC 0009 y enmienda «ficha amplia».
 * Todo queda bajo la raíz propia: el candidato estrecho no altera otras piezas.
 * Responde a su contenedor (FUNDAMENTOS §15), máximo 1600 (host de escritorio):
 * base = 560–1023 (una columna), ≥ 1024 dos columnas (vehículo | carril del trámite
 * de 400; 480 a ≥ 1280), < 560 apilada. Compacta en vertical: cabecera de 48 con la
 * placa y «Cambiar matrícula», identidad ≤ 144 (ilustración de 96), procedencia en la
 * línea del valor cuando cabe; letras y objetivos táctiles de 48 intactos, sin alturas
 * fijas que recorten texto.
 * Colores físicos de placa: valores comunes de temas.json, acotados aquí para
 * consumidores previos. Distintivos DGT: excepción semántica autorizada, familias
 * de color BOE-A-2016-3828 (azul/verde/amarillo); chip informativo, no pegatina.
 */
.crm-ficha-vehiculo,
.crm-ficha-vehiculo *,
.crm-ficha-vehiculo *::before,
.crm-ficha-vehiculo *::after {
  box-sizing: border-box;
}
.crm-ficha-vehiculo {
  --crm-fv-escalon: var(--crm-t-escalon, var(--crm-t-pulsar));
  container: crm-ficha-vehiculo / inline-size;
  width: 100%;
  max-width: 1600px;
  min-width: 0;
  margin-inline: auto;
  color: var(--crm-text);
  font-family: var(--crm-sans);
  font-size: 14px;
  line-height: 22px;
  text-align: left;
}
.crm-ficha-vehiculo .crm-ficha-vehiculo-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── Estado y documento ─────────────────────────────────────────────── */
.crm-ficha-vehiculo .crm-ficha-vehiculo-status { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; line-height: 20px; color: var(--crm-text-2); }
.crm-ficha-vehiculo .crm-ficha-vehiculo-status::before { content: ""; flex: none; width: 4px; height: 4px; border-radius: 50%; background: var(--crm-muted); }
.crm-ficha-vehiculo[data-estado="encontrado"] .crm-ficha-vehiculo-status::before { background: var(--crm-acento); }
.crm-ficha-vehiculo .crm-ficha-vehiculo-documento { border: 1px solid var(--crm-line-2); background: var(--crm-panel); }
.crm-ficha-vehiculo[data-robo] .crm-ficha-vehiculo-documento { border-color: var(--crm-error-linea, var(--crm-error)); }
/* Un filete entre bloques del documento: la cabecera mide 48 con todo lo de dentro. */
.crm-ficha-vehiculo .crm-ficha-vehiculo-documento > * + * { border-top: 1px solid var(--crm-line); }

/* Cabecera: rótulo, fuente común (una vez), la única placa y «Cambiar matrícula» (48). */
.crm-ficha-vehiculo .crm-ficha-vehiculo-cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; min-height: 48px; padding: 0 20px; }
.crm-ficha-vehiculo .crm-ficha-vehiculo-contexto { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; min-width: 0; }
.crm-ficha-vehiculo .crm-ficha-vehiculo-cambiar { display: inline-flex; align-items: center; gap: 8px; height: 48px; margin-right: -16px; padding: 0 16px 0 14px; border: 0; border-radius: 0; background: transparent; color: var(--crm-text); font-family: var(--crm-sans); font-size: 15px; line-height: 20px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background-color var(--crm-t-color) var(--crm-snap); }
.crm-ficha-vehiculo .crm-ficha-vehiculo-cambiar > svg { flex: none; color: var(--crm-muted); }
.crm-ficha-vehiculo .crm-ficha-vehiculo-cambiar:hover { background: var(--crm-panel-2); }
.crm-ficha-vehiculo .crm-ficha-vehiculo-cambiar:hover > svg { color: var(--crm-text); }
.crm-ficha-vehiculo .crm-ficha-vehiculo-rotulo { margin-right: auto; font-family: var(--crm-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--crm-muted); }
.crm-ficha-vehiculo .crm-ficha-vehiculo-fuente { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--crm-muted); }
.crm-ficha-vehiculo .crm-ficha-vehiculo-fuente .crm-ficha-vehiculo-procedencia { margin: 0; }
.crm-ficha-vehiculo .crm-ficha-vehiculo-visto { flex: none; width: 14px; height: 14px; color: var(--crm-acento); }

/* Placa de 32 (FUNDAMENTOS §17.1, tamaño pequeño), autocontenida para consumidores sin 45-experiencia. */
.crm-ficha-vehiculo .crm-ficha-vehiculo-placa { position: relative; flex: none; max-width: 100%; overflow: hidden; }
.crm-ficha-vehiculo .crm-placa { display: inline-flex; align-items: stretch; height: 32px; max-width: 100%; overflow: hidden; border: 1px solid var(--crm-placa-tinta); background: var(--crm-placa-fondo); color: var(--crm-placa-tinta); forced-color-adjust: none; vertical-align: top; }
.crm-ficha-vehiculo .crm-placa-ue { display: flex; flex: none; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 16px; background: var(--crm-placa-azul); color: var(--crm-placa-letra-ue); }
.crm-ficha-vehiculo .crm-placa-estrellas { width: 12px; height: 12px; color: var(--crm-placa-estrella); }
.crm-ficha-vehiculo .crm-placa-pais { font-size: 11px; line-height: 12px; }
.crm-ficha-vehiculo .crm-placa-texto { display: flex; align-items: center; min-width: 0; padding: 0 8px; font-family: var(--crm-mono); font-size: 20px; font-weight: 500; line-height: 24px; white-space: nowrap; }
.crm-ficha-vehiculo .crm-ficha-vehiculo-escaner { display: none; }
.crm-ficha-vehiculo .crm-ficha-vehiculo-placa[data-escaneando] .crm-ficha-vehiculo-escaner { position: absolute; display: block; inset: 0 auto 0 0; width: 2px; background: var(--crm-placa-azul); animation: crm-fv-escanear var(--crm-t-filo, var(--crm-t-dibujo)) var(--crm-curva) infinite alternate; }
@keyframes crm-fv-escanear { from { left: 16px; } to { left: calc(100% - 2px); } }

.crm-ficha-vehiculo .crm-ficha-vehiculo-espera { min-height: 160px; display: grid; align-content: center; justify-items: center; gap: 8px; padding: 24px; text-align: center; }
.crm-ficha-vehiculo .crm-ficha-vehiculo-espera > span { font-family: var(--crm-mono); font-size: 40px; line-height: 44px; color: var(--crm-muted); }
.crm-ficha-vehiculo .crm-ficha-vehiculo-espera h3 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 500; letter-spacing: -0.02em; }
.crm-ficha-vehiculo .crm-ficha-vehiculo-espera p,
.crm-ficha-vehiculo .crm-ficha-vehiculo-vacio { margin: 0; color: var(--crm-text-2); }
.crm-ficha-vehiculo .crm-ficha-vehiculo-vacio { padding: 12px 20px; }

/* Robo: alerta seria arriba, con icono y salida («revisa…»); nunca solo color. */
.crm-ficha-vehiculo .crm-ficha-vehiculo-alerta { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; padding: 16px 20px; border-bottom: 2px solid var(--crm-error); background: var(--crm-error-suave); color: var(--crm-error); }
.crm-ficha-vehiculo .crm-ficha-vehiculo-alerta > svg { margin-top: 1px; }
.crm-ficha-vehiculo .crm-ficha-vehiculo-alerta strong { display: block; font-size: 15px; line-height: 22px; font-weight: 500; }
.crm-ficha-vehiculo .crm-ficha-vehiculo-alerta p { margin: 4px 0 0; font-size: 13px; line-height: 20px; }
.crm-ficha-vehiculo .crm-ficha-vehiculo-alerta .crm-ficha-vehiculo-procedencia { color: inherit; }

/* ── Cuerpo: vehículo y carril del trámite ──────────────────────────── */
.crm-ficha-vehiculo .crm-ficha-vehiculo-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); }
.crm-ficha-vehiculo .crm-ficha-vehiculo-vehiculo { min-width: 0; }

/* Identidad ≤ 144: modelo de 40 en su fila; marca y versión en otra, cada una editable con su marca. */
.crm-ficha-vehiculo .crm-ficha-vehiculo-identidad { display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: center; gap: 24px; padding: 12px 20px; }
.crm-ficha-vehiculo .crm-ficha-vehiculo-ilustracion { display: block; width: 200px; max-width: 100%; height: 96px; color: var(--crm-text-2); }
.crm-ficha-vehiculo .crm-ficha-vehiculo-suelo { color: var(--crm-line-2); }
.crm-ficha-vehiculo .crm-ficha-vehiculo-identidad > dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; min-width: 0; }
.crm-ficha-vehiculo .crm-ficha-vehiculo-identidad [data-campo="modelo"] { grid-column: 1 / -1; }
.crm-ficha-vehiculo .crm-ficha-vehiculo-identidad .crm-ficha-vehiculo-dato { display: grid; align-content: center; }
.crm-ficha-vehiculo .crm-ficha-vehiculo-identidad dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.crm-ficha-vehiculo .crm-ficha-vehiculo-identidad dd { margin: 0; }
.crm-ficha-vehiculo .crm-ficha-vehiculo-identidad [data-campo="marca"] dd { font-size: 15px; line-height: 24px; color: var(--crm-text-2); }
.crm-ficha-vehiculo .crm-ficha-vehiculo-identidad [data-campo="modelo"] h3 { margin: 0; font-size: 40px; line-height: 44px; letter-spacing: -0.035em; font-weight: 500; color: var(--crm-text); }
.crm-ficha-vehiculo .crm-ficha-vehiculo-identidad [data-campo="version"] dd { font-size: 15px; line-height: 24px; color: var(--crm-muted); }
.crm-ficha-vehiculo .crm-ficha-vehiculo-identidad [data-campo][data-falta] dd { color: var(--crm-muted); }

.crm-ficha-vehiculo .crm-ficha-vehiculo-tecnica { padding: 12px 20px; border-block: 1px solid var(--crm-line); background: var(--crm-panel-2); }
.crm-ficha-vehiculo .crm-ficha-vehiculo-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 24px; }
.crm-ficha-vehiculo .crm-ficha-vehiculo-detalles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 24px; padding: 12px 20px; }

/* ── Pares rótulo/valor: Geist para leer, Mono solo para códigos ─────── */
.crm-ficha-vehiculo dl { margin: 0; }
.crm-ficha-vehiculo dt { margin: 0; font-size: 12px; line-height: 16px; color: var(--crm-muted); }
/* El valor y su marca de procedencia comparten línea cuando caben; si no, la marca baja sin recortar nada. */
.crm-ficha-vehiculo dd { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; margin: 4px 0 0; min-width: 0; font-size: 15px; line-height: 24px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.crm-ficha-vehiculo dd > * { min-width: 0; max-width: 100%; }
.crm-ficha-vehiculo dd > .crm-ficha-vehiculo-editor { flex: 1 1 100%; }
.crm-ficha-vehiculo .crm-ficha-vehiculo-dato { position: relative; min-width: 0; }
.crm-ficha-vehiculo .crm-ficha-vehiculo-dato[data-editable] { min-height: 48px; padding-right: 24px; }
.crm-ficha-vehiculo .crm-ficha-vehiculo-dato[data-editando] { grid-column: 1 / -1; padding-right: 0; }
.crm-ficha-vehiculo .crm-ficha-vehiculo-dato[data-falta] dd { color: var(--crm-muted); }
.crm-ficha-vehiculo .crm-ficha-vehiculo-dato[data-alerta] dd { color: var(--crm-error); font-weight: 500; }
.crm-ficha-vehiculo [data-mono] dd { font-family: var(--crm-mono); font-size: 14px; line-height: 24px; }
.crm-ficha-vehiculo .crm-ficha-vehiculo-procedencia { display: block; margin-top: 2px; font-family: var(--crm-sans); font-size: 12px; line-height: 16px; font-weight: 400; letter-spacing: 0; color: var(--crm-muted); overflow-wrap: anywhere; }
.crm-ficha-vehiculo dd > .crm-ficha-vehiculo-procedencia { margin-top: 0; }
.crm-ficha-vehiculo .crm-ficha-vehiculo-procedencia[data-completa] { display: inline; }
/* Marca por campo: «✓ Comprobado» (fuente común), «✓ Fuente · fecha» (otra), manual en text-2, pendiente en muted. */
.crm-ficha-vehiculo .crm-ficha-vehiculo-procedencia[data-tipo="manual"] { color: var(--crm-text-2); }

.crm-ficha-vehiculo .crm-ficha-vehiculo-distintivo { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; height: 24px; padding: 0 8px; background: var(--crm-panel); border: 1px solid var(--crm-line-2); color: var(--crm-text); font-family: var(--crm-mono); font-size: 13px; line-height: 20px; font-weight: 500; vertical-align: top; }
.crm-ficha-vehiculo .crm-ficha-vehiculo-distintivo[data-etiqueta="0"] { background: var(--crm-fv-dgt-azul); color: var(--crm-fv-dgt-tinta); border-color: var(--crm-fv-dgt-tinta); }
.crm-ficha-vehiculo .crm-ficha-vehiculo-distintivo[data-etiqueta="C"] { background: var(--crm-fv-dgt-verde); color: var(--crm-fv-dgt-tinta); border-color: var(--crm-fv-dgt-tinta); }
.crm-ficha-vehiculo .crm-ficha-vehiculo-distintivo[data-etiqueta="B"] { background: var(--crm-fv-dgt-amarillo); color: var(--crm-fv-dgt-tinta); border-color: var(--crm-fv-dgt-tinta); }
.crm-ficha-vehiculo .crm-ficha-vehiculo-distintivo[data-etiqueta="ECO"] { position: relative; background: var(--crm-fv-dgt-verde); color: var(--crm-fv-dgt-tinta); border-color: var(--crm-fv-dgt-tinta); isolation: isolate; }
.crm-ficha-vehiculo .crm-ficha-vehiculo-distintivo[data-etiqueta="ECO"]::before { content: ""; position: absolute; inset: 0 0 0 50%; z-index: -1; background: var(--crm-fv-dgt-azul); }

/* ── Carril del trámite: kilómetros y fiscal, a la vista ────────────── */
.crm-ficha-vehiculo .crm-ficha-vehiculo-tramite { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-width: 0; border-top: 1px solid var(--crm-line); }
.crm-ficha-vehiculo .crm-ficha-vehiculo-lectura,
.crm-ficha-vehiculo .crm-ficha-vehiculo-fiscal { min-width: 0; padding: 16px 20px; }
.crm-ficha-vehiculo .crm-ficha-vehiculo-fiscal { border-left: 1px solid var(--crm-line); }
.crm-ficha-vehiculo .crm-ficha-vehiculo-km > label,
.crm-ficha-vehiculo .crm-ficha-vehiculo-fiscal h3 { display: block; margin: 0 0 8px; font-size: 15px; line-height: 22px; font-weight: 500; letter-spacing: -0.01em; color: var(--crm-text); }

.crm-ficha-vehiculo .crm-ficha-vehiculo-odometro { position: relative; display: flex; align-items: center; width: fit-content; max-width: 100%; min-height: 48px; border: 1px solid var(--crm-control); background: var(--crm-bg); }
.crm-ficha-vehiculo .crm-ficha-vehiculo-rodillos { display: flex; min-width: 0; padding: 0 8px; }
.crm-ficha-vehiculo .crm-ficha-vehiculo-rodillo { display: flex; align-items: center; justify-content: center; overflow: hidden; width: 24px; height: 40px; border-right: 1px solid var(--crm-line); font-family: var(--crm-mono); font-size: 20px; line-height: 24px; font-variant-numeric: tabular-nums; }
.crm-ficha-vehiculo .crm-ficha-vehiculo-rodillo > span { animation: crm-fv-rodillo var(--crm-t-gesto) var(--crm-snap); }
@keyframes crm-fv-rodillo { from { transform: translateY(-24px); } to { transform: translateY(0); } }
.crm-ficha-vehiculo .crm-ficha-vehiculo-odometro input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 48px; padding: 0 8px; border: 0; outline: 0; border-radius: 0; background: transparent; color: transparent; caret-color: var(--crm-text); font-family: var(--crm-mono); font-size: 20px; line-height: 24px; letter-spacing: 12px; }
.crm-ficha-vehiculo .crm-ficha-vehiculo-km-unidad { padding: 0 8px; font-size: 12px; line-height: 16px; color: var(--crm-muted); }
.crm-ficha-vehiculo .crm-ficha-vehiculo-odometro:focus-within { border-color: var(--crm-acento); }
.crm-ficha-vehiculo .crm-ficha-vehiculo-odometro[data-error] { border-color: var(--crm-error-linea, var(--crm-error)); }
.crm-ficha-vehiculo .crm-ficha-vehiculo-km > p { margin: 8px 0 0; color: var(--crm-muted); font-size: 12px; line-height: 16px; }
.crm-ficha-vehiculo .crm-ficha-vehiculo-odometro[data-error] + p { color: var(--crm-error); }
.crm-ficha-vehiculo .crm-ficha-vehiculo-itv { display: grid; gap: 4px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--crm-line); font-size: 12px; line-height: 16px; color: var(--crm-muted); }
.crm-ficha-vehiculo .crm-ficha-vehiculo-itv strong { font-family: var(--crm-mono); font-size: 15px; line-height: 24px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--crm-text); }

.crm-ficha-vehiculo .crm-ficha-vehiculo-fiscal dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.crm-ficha-vehiculo .crm-ficha-vehiculo-fiscal dd { font-family: var(--crm-mono); font-size: 20px; line-height: 24px; font-weight: 500; }
.crm-ficha-vehiculo .crm-ficha-vehiculo-fiscal [data-falta] dd { font-family: var(--crm-sans); font-size: 15px; font-weight: 400; color: var(--crm-muted); }
.crm-ficha-vehiculo .crm-ficha-vehiculo-fiscal p { margin: 8px 0 0; font-size: 12px; line-height: 16px; color: var(--crm-muted); overflow-wrap: anywhere; }
.crm-ficha-vehiculo .crm-ficha-vehiculo-fiscal > .crm-ficha-vehiculo-procedencia { margin-top: 8px; }
/* Candidatas en flujo normal, sin desplazamiento interior; las que pasan de 3, en un desplegable nativo con su número. */
.crm-ficha-vehiculo .crm-ficha-vehiculo-candidatos { display: grid; gap: 8px; margin-top: 8px; }
.crm-ficha-vehiculo .crm-ficha-vehiculo-mas { margin-top: 4px; }

.crm-ficha-vehiculo .crm-ficha-vehiculo-entradas-fiscales { grid-column: 1 / -1; padding: 0 20px 16px; border-top: 1px solid var(--crm-line); }
.crm-ficha-vehiculo :is(.crm-ficha-vehiculo-entradas-fiscales, .crm-ficha-vehiculo-mas) summary { display: list-item; min-height: 48px; padding: 12px 0; font-size: 13px; line-height: 24px; color: var(--crm-text); cursor: pointer; }
.crm-ficha-vehiculo .crm-ficha-vehiculo-entradas-fiscales dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }

/* ── Edición en su sitio (48 táctil) ────────────────────────────────── */
.crm-ficha-vehiculo .crm-ficha-vehiculo-editar { position: absolute; inset: 0; display: flex; justify-content: flex-end; align-items: center; width: 100%; min-height: 48px; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.crm-ficha-vehiculo .crm-ficha-vehiculo-lapiz { flex: none; width: 16px; height: 16px; color: var(--crm-muted); transition: color var(--crm-t-color) var(--crm-snap); }
.crm-ficha-vehiculo .crm-ficha-vehiculo-editar:hover .crm-ficha-vehiculo-lapiz { color: var(--crm-text); }
.crm-ficha-vehiculo button:focus-visible,
.crm-ficha-vehiculo summary:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: 2px; }
.crm-ficha-vehiculo :is(button, summary):focus:not(:focus-visible) { outline: none; }
.crm-ficha-vehiculo .crm-ficha-vehiculo-editor { display: grid; gap: 8px; }
.crm-ficha-vehiculo .crm-ficha-vehiculo-editor :is(input, select) { min-width: 0; width: 100%; height: 48px; padding: 0 12px; border: 1px solid var(--crm-control); border-radius: 0; outline: 0; background: var(--crm-bg); color: var(--crm-text); font-family: var(--crm-sans); font-size: 16px; }
.crm-ficha-vehiculo .crm-ficha-vehiculo-editor :is(input, select):focus-visible { border-color: var(--crm-acento); }
.crm-ficha-vehiculo .crm-ficha-vehiculo-editor :is(input, select)[aria-invalid="true"] { border-color: var(--crm-error-linea, var(--crm-error)); }
.crm-ficha-vehiculo .crm-ficha-vehiculo-editor-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.crm-ficha-vehiculo .crm-ficha-vehiculo-editor-acciones button,
.crm-ficha-vehiculo .crm-ficha-vehiculo-candidatos button { min-height: 48px; padding: 8px 16px; border: 1px solid var(--crm-control); border-radius: 0; background: transparent; color: var(--crm-text); font-family: var(--crm-sans); font-size: 15px; line-height: 20px; text-align: left; cursor: pointer; transition: background-color var(--crm-t-color) var(--crm-snap); }
.crm-ficha-vehiculo .crm-ficha-vehiculo-editor-acciones button:hover,
.crm-ficha-vehiculo .crm-ficha-vehiculo-candidatos button:hover { background: var(--crm-panel-2); }
.crm-ficha-vehiculo .crm-ficha-vehiculo-editor p { margin: 0; font-size: 12px; line-height: 16px; color: var(--crm-error); }
.crm-ficha-vehiculo .crm-ficha-vehiculo-candidatos button { display: flex; align-items: center; justify-content: space-between; gap: 8px; overflow-wrap: anywhere; }
.crm-ficha-vehiculo .crm-ficha-vehiculo-candidatos [aria-pressed="true"] { border-color: var(--crm-acento); box-shadow: inset 2px 0 0 var(--crm-acento); background: var(--crm-panel-3, var(--crm-panel-2)); }

/* ── Entrada: escalonada por token y silueta dibujada una vez ───────── */
.crm-ficha-vehiculo :is(.crm-ficha-vehiculo-vehiculo, .crm-ficha-vehiculo-tramite) > * { animation: crm-fv-revelar var(--crm-t-capa) var(--crm-snap) both; }
.crm-ficha-vehiculo .crm-ficha-vehiculo-vehiculo > :nth-child(2),
.crm-ficha-vehiculo .crm-ficha-vehiculo-tramite > :nth-child(1) { animation-delay: var(--crm-fv-escalon); }
.crm-ficha-vehiculo .crm-ficha-vehiculo-vehiculo > :nth-child(3),
.crm-ficha-vehiculo .crm-ficha-vehiculo-tramite > :nth-child(2) { animation-delay: calc(var(--crm-fv-escalon) * 2); }
.crm-ficha-vehiculo .crm-ficha-vehiculo-tramite > :nth-child(3) { animation-delay: calc(var(--crm-fv-escalon) * 3); }
@keyframes crm-fv-revelar { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.crm-ficha-vehiculo .crm-ficha-vehiculo-revelado .crm-ficha-vehiculo-ilustracion [pathLength] { animation: crm-fv-dibujar var(--crm-t-dibujo) var(--crm-curva) backwards; }
@keyframes crm-fv-dibujar { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }

/* ── Sin carril de trámite (recepción de taller): una columna a cualquier ancho, mismo vehículo y misma animación ── */
.crm-ficha-vehiculo[data-sin-tramite] .crm-ficha-vehiculo-tramite { display: none; }
.crm-ficha-vehiculo[data-sin-tramite] .crm-ficha-vehiculo-cuerpo { grid-template-columns: minmax(0, 1fr); }

/* ── Escritorio y iPad apaisado: dos columnas sin columnas kilométricas ── */
@container crm-ficha-vehiculo (min-width: 1024px) {
  .crm-ficha-vehiculo .crm-ficha-vehiculo-cabecera { padding: 0 24px; }
  .crm-ficha-vehiculo .crm-ficha-vehiculo-alerta { padding: 16px 24px; }
  .crm-ficha-vehiculo .crm-ficha-vehiculo-cuerpo { grid-template-columns: minmax(0, 1fr) 400px; }
  .crm-ficha-vehiculo .crm-ficha-vehiculo-identidad { padding: 12px 24px; }
  .crm-ficha-vehiculo .crm-ficha-vehiculo-tecnica { padding: 12px 24px; }
  .crm-ficha-vehiculo .crm-ficha-vehiculo-detalles { padding: 12px 24px; }
  .crm-ficha-vehiculo .crm-ficha-vehiculo-tramite { display: flex; flex-direction: column; border-top: 0; border-left: 1px solid var(--crm-line); }
  .crm-ficha-vehiculo .crm-ficha-vehiculo-lectura,
  .crm-ficha-vehiculo .crm-ficha-vehiculo-fiscal { padding: 16px 24px; }
  .crm-ficha-vehiculo .crm-ficha-vehiculo-fiscal { border-left: 0; border-top: 1px solid var(--crm-line); }
  .crm-ficha-vehiculo .crm-ficha-vehiculo-entradas-fiscales { padding: 0 24px 16px; }
}

/* ── Escritorio ancho (host de 1600): carril de 480, más aire, mismas columnas ── */
@container crm-ficha-vehiculo (min-width: 1280px) {
  .crm-ficha-vehiculo .crm-ficha-vehiculo-cabecera { padding: 0 32px; }
  .crm-ficha-vehiculo .crm-ficha-vehiculo-alerta { padding: 16px 32px; }
  .crm-ficha-vehiculo .crm-ficha-vehiculo-cuerpo { grid-template-columns: minmax(0, 1fr) 480px; }
  .crm-ficha-vehiculo .crm-ficha-vehiculo-identidad { gap: 32px; padding: 12px 32px; }
  .crm-ficha-vehiculo .crm-ficha-vehiculo-tecnica { padding: 12px 32px; }
  .crm-ficha-vehiculo .crm-ficha-vehiculo-chips,
  .crm-ficha-vehiculo .crm-ficha-vehiculo-detalles { column-gap: 32px; }
  .crm-ficha-vehiculo .crm-ficha-vehiculo-detalles { padding: 12px 32px; }
  .crm-ficha-vehiculo .crm-ficha-vehiculo-lectura,
  .crm-ficha-vehiculo .crm-ficha-vehiculo-fiscal { padding: 16px 32px; }
  .crm-ficha-vehiculo .crm-ficha-vehiculo-entradas-fiscales { padding: 0 32px 16px; }
}

/* ── Móvil: apilada, una lectura de arriba abajo ────────────────────── */
@container crm-ficha-vehiculo (max-width: 559px) {
  .crm-ficha-vehiculo .crm-ficha-vehiculo-cabecera { padding: 8px 16px; }
  .crm-ficha-vehiculo .crm-ficha-vehiculo-fuente { order: 3; flex-basis: 100%; }
  .crm-ficha-vehiculo .crm-ficha-vehiculo-alerta { padding: 16px; }
  .crm-ficha-vehiculo .crm-ficha-vehiculo-cambiar { margin-right: 0; }
  .crm-ficha-vehiculo .crm-ficha-vehiculo-identidad { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 16px; }
  .crm-ficha-vehiculo .crm-ficha-vehiculo-ilustracion { width: 100px; height: 48px; }
  .crm-ficha-vehiculo .crm-ficha-vehiculo-identidad [data-campo="modelo"] h3 { font-size: 28px; line-height: 34px; letter-spacing: -0.03em; }
  .crm-ficha-vehiculo .crm-ficha-vehiculo-tecnica { padding: 12px 16px; }
  .crm-ficha-vehiculo .crm-ficha-vehiculo-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
  .crm-ficha-vehiculo .crm-ficha-vehiculo-detalles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; padding: 12px 16px; }
  .crm-ficha-vehiculo .crm-ficha-vehiculo-detalles [data-campo="bastidor"] { grid-column: 1 / -1; }
  .crm-ficha-vehiculo .crm-ficha-vehiculo-tramite { grid-template-columns: minmax(0, 1fr); }
  .crm-ficha-vehiculo .crm-ficha-vehiculo-lectura,
  .crm-ficha-vehiculo .crm-ficha-vehiculo-fiscal { padding: 16px; }
  .crm-ficha-vehiculo .crm-ficha-vehiculo-fiscal { border-left: 0; border-top: 1px solid var(--crm-line); }
  .crm-ficha-vehiculo .crm-ficha-vehiculo-entradas-fiscales { padding: 0 16px 16px; }
}
@container crm-ficha-vehiculo (max-width: 399px) {
  .crm-ficha-vehiculo .crm-ficha-vehiculo-identidad > dl,
  .crm-ficha-vehiculo .crm-ficha-vehiculo-detalles,
  .crm-ficha-vehiculo .crm-ficha-vehiculo-fiscal dl,
  .crm-ficha-vehiculo .crm-ficha-vehiculo-entradas-fiscales dl { grid-template-columns: minmax(0, 1fr); }
}

/* ── Movimiento reducido, estático, colores forzados e impresión ────── */
@media (prefers-reduced-motion: reduce) {
  .crm-ficha-vehiculo :is(.crm-ficha-vehiculo-vehiculo, .crm-ficha-vehiculo-tramite) > *,
  .crm-ficha-vehiculo .crm-ficha-vehiculo-ilustracion [pathLength],
  .crm-ficha-vehiculo .crm-ficha-vehiculo-rodillo > span,
  .crm-ficha-vehiculo .crm-ficha-vehiculo-escaner { animation: none !important; }
  .crm-ficha-vehiculo .crm-ficha-vehiculo-escaner { display: none !important; }
}
:where([data-crm-estatico]) .crm-ficha-vehiculo :is(.crm-ficha-vehiculo-vehiculo, .crm-ficha-vehiculo-tramite) > *,
:where([data-crm-estatico]) .crm-ficha-vehiculo :is(.crm-ficha-vehiculo-ilustracion [pathLength], .crm-ficha-vehiculo-rodillo > span, .crm-ficha-vehiculo-escaner) { animation: none; }
:where([data-crm-tema="contraste"]) .crm-ficha-vehiculo :is(button, summary):focus-visible { outline-width: var(--crm-foco-ancho); }
@media (forced-colors: active) {
  .crm-ficha-vehiculo .crm-ficha-vehiculo-odometro input { color: CanvasText; }
  .crm-ficha-vehiculo .crm-ficha-vehiculo-odometro[data-editable] .crm-ficha-vehiculo-rodillos { visibility: hidden; }
  .crm-ficha-vehiculo .crm-ficha-vehiculo-alerta { border: 2px solid CanvasText; }
}
@media print {
  .crm-ficha-vehiculo :is(.crm-ficha-vehiculo-vehiculo, .crm-ficha-vehiculo-tramite) > *,
  .crm-ficha-vehiculo .crm-ficha-vehiculo-ilustracion [pathLength],
  .crm-ficha-vehiculo .crm-ficha-vehiculo-rodillo > span { animation: none; }
  .crm-ficha-vehiculo .crm-ficha-vehiculo-escaner,
  .crm-ficha-vehiculo .crm-ficha-vehiculo-lapiz,
  .crm-ficha-vehiculo .crm-ficha-vehiculo-editor-acciones,
  .crm-ficha-vehiculo .crm-ficha-vehiculo-cambiar { display: none; }
}

/*
 * Celebración (estructura): el cierre de un recorrido con el resultado ya
 * confirmado. Hoja exclusiva de la pieza; solo variables --crm-*.
 *
 * Medidas: caja de 640 como mucho, filete de 1 (`--crm-line-2`) y 2 de
 * acento en la cabeza (la firma: un hecho, §5.3 y §6), radio 0, relleno 32
 * (20 a < 400 de caja, §1). Visto de 64 [§17 sin fila: ver el informe].
 * El visto se centra con un margen redondeado a píxel entero (a un ancho
 * impar no cae en x,5, §1); sin `round()`, centrado normal. La caja se
 * centra con `margin: auto` en su sitio.
 * Título de página (§3, §15): 24/32 a 500 con SU contenedor a menos de 720
 * (la caja propia, de 640 como mucho: siempre) y 28/34 desde 720, si quien la
 * monta le da ese ancho. Rótulo mono 11/16 en
 * mayúsculas, a 6 de la cifra (§1), con elipsis y consejo si no cabe.
 * Cifra 40/44 a 500, 28/32, 24/28 o 20/24: el escalón lo elige la pieza
 * midiendo el ancho REAL de la caja (`data-escalon` con `data-medido`; techo
 * 28 a < 400) y, desde 7 cifras enteras que no caben, la compacta
 * (`data-compacta`) con la exacta en el consejo y escrita debajo a 12/16 en
 * muted solo al tacto y en papel. Antes de medir (servidor), la estimación
 * por largo y un escalón menos a < 400. Un código va en Geist Mono, nunca se
 * compacta y, si ni a 20 cabe, refluye por sus guiones; una cifra en Geist
 * con `tabular-nums` y su unidad a 24 · 16 · 14 · 12 en `--crm-muted` (§3);
 * la cifra no se parte. Cuerpo 15/24 en `--crm-text-2`, a 68 caracteres
 * como mucho, sin palabras viudas (`text-wrap: pretty`); una lista, a la
 * izquierda con su viñeta en la sangría de 20. Acciones a 40 (la pieza las
 * fuerza), separadas 8; a < 400, una por fila a todo el ancho.
 * «< 400 de caja» es la consulta de contenedor a < 398 (el contenido de la
 * caja: 400 menos sus dos filetes de 1).
 * Movimiento: el visto está DIBUJADO por defecto (craft-floor: visible
 * desde el principio; §8: nada se anima al cargar). Solo con `animar` de
 * la pieza (`data-animar`, que quien llama pone al recibir el resultado en
 * esta sesión) se dibuja una vez desde vacío (600 `--crm-curva` y 240
 * `--crm-snap` tras 320). Si la animación no corre (anulada, sin soporte),
 * se queda en el estado por defecto: dibujado. Con prefers-reduced-motion,
 * impresión y `data-crm-estatico`, sin animación. Sin bucles.
 */

:where(.crm-celebracion),
:where(.crm-celebracion) *,
:where(.crm-celebracion) ::before,
:where(.crm-celebracion) ::after {
  box-sizing: border-box;
}

.crm-celebracion {
  container: crm-celebracion / inline-size;
  width: min(640px, 100%);
  min-width: 0;
  margin: 0 auto;
  border: 1px solid var(--crm-line-2);
  border-top: 2px solid var(--crm-acento);
  background: var(--crm-panel);
  color: var(--crm-text);
  font-family: var(--crm-sans);
  text-align: center;
}

/* Recibe el foco por programa (tabIndex −1) para anunciarse: sin anillo nunca (§7). */
.crm-celebracion:focus,
.crm-celebracion:focus-visible {
  outline: none;
}

/*
 * Columna ACOTADA a la caja (`minmax(0, 1fr)`): con la pista `auto` implícita, una cifra o un código sin partir
 * ensanchaba la pista hasta su min-content y la medida del escalón comparaba con un ancho que ya se salía (la misma
 * causa que el total del Ticket en F7).
 */
.crm-celebracion-interior {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 24px;
  padding: 32px;
}

.crm-celebracion-visto {
  display: block;
  width: 64px;
  height: 64px;
  color: var(--crm-acento);
}

.crm-celebracion-circulo,
.crm-celebracion-trazo {
  stroke: currentColor;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}

.crm-celebracion-circulo {
  stroke-width: 2;
}

.crm-celebracion-trazo {
  stroke-width: 3;
  stroke-linecap: square;
}

/* Opt-in: el trazo espera vacío su turno (backwards) y acaba en el estado por defecto, dibujado. */
.crm-celebracion[data-animar] .crm-celebracion-circulo {
  animation: crm-celebracion-dibuja var(--crm-t-dibujo) var(--crm-curva) backwards;
}

.crm-celebracion[data-animar] .crm-celebracion-trazo {
  animation: crm-celebracion-dibuja var(--crm-t-panel) var(--crm-snap) var(--crm-t-capa) backwards;
}

@supports (margin-left: round(down, 1px, 1px)) {
  .crm-celebracion-visto {
    justify-self: start;
    margin-left: round(down, calc((100% - 64px) / 2), 1px);
  }
}

@keyframes crm-celebracion-dibuja {
  from {
    stroke-dashoffset: 100;
  }
}

.crm-celebracion-titulo {
  max-width: 100%;
  margin: 0;
  font-size: 28px;
  font-weight: 500;
  line-height: 34px;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.crm-celebracion-numero {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}

/* Parada de Tab solo si algo no se ve entero (consejo): foco de control, un anillo (§7). */
.crm-celebracion-numero:focus-visible {
  outline: var(--crm-foco-ancho) solid var(--crm-acento);
  outline-offset: 2px;
}

.crm-celebracion-rotulo {
  max-width: 100%;
  overflow: hidden;
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.crm-celebracion-cifra {
  max-width: 100%;
  font-family: var(--crm-mono);
  font-size: 40px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  line-height: 44px;
  letter-spacing: -0.035em;
  /* Un código largo parte primero por sus guiones (o barras); solo si no tiene, por donde haga falta. Nunca se corta. */
  overflow-wrap: break-word;
}

.crm-celebracion-cifra[data-forma="cifra"] {
  font-family: var(--crm-sans);
  overflow-wrap: normal;
}

/* Mientras la pieza mide (en un mismo fotograma, sin pintar): todo en una línea; lo que no cabe, se cuenta. */
.crm-celebracion-numero[data-midiendo] .crm-celebracion-cifra {
  overflow: hidden;
  overflow-wrap: normal;
  white-space: nowrap;
}

/* Exacta o compacta: se pinta una; la otra no ocupa ni se lee. */
.crm-celebracion-numero[data-compacta] .crm-celebracion-valor,
.crm-celebracion-numero:not([data-compacta]) .crm-celebracion-compacta {
  display: none;
}

.crm-celebracion-compacta {
  white-space: nowrap;
}

/*
 * La exacta de una compacta: para el lector siempre; con el puntero y el teclado, en el consejo (§14); al tacto y en
 * papel, donde un consejo no se abre, escrita debajo: secundario 12/16 (§3) con sus cifras tabulares.
 */
.crm-celebracion-exacta {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (hover: none), (pointer: coarse), print {
  .crm-celebracion-exacta {
    position: static;
    width: auto;
    max-width: 100%;
    height: auto;
    overflow: visible;
    clip-path: none;
    color: var(--crm-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    line-height: 16px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* La cifra no se parte; la unidad, si no cabe, baja entera a la línea siguiente. */
.crm-celebracion-cifra[data-forma="cifra"] .crm-celebracion-valor,
.crm-celebracion-unidad {
  white-space: nowrap;
}

.crm-celebracion-unidad {
  display: inline-block;
}

.crm-celebracion-unidad {
  color: var(--crm-muted);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0;
}

.crm-celebracion-numero[data-escalon="28"] .crm-celebracion-cifra {
  font-size: 28px;
  line-height: 32px;
}

.crm-celebracion-numero[data-escalon="28"] .crm-celebracion-unidad {
  font-size: 16px;
}

.crm-celebracion-numero[data-escalon="24"] .crm-celebracion-cifra {
  font-size: 24px;
  line-height: 28px;
}

.crm-celebracion-numero[data-escalon="24"] .crm-celebracion-unidad {
  font-size: 14px;
}

.crm-celebracion-numero[data-escalon="20"] .crm-celebracion-cifra {
  font-size: 20px;
  line-height: 24px;
}

.crm-celebracion-numero[data-escalon="20"] .crm-celebracion-unidad {
  font-size: 12px;
}

/*
 * `text-wrap: pretty` se hereda: vale también para un cuerpo que es texto suelto (sin `p`) y para cada `li`. Un párrafo
 * centrado no acaba en una palabra sola (craft-floor); el título sigue en `balance`.
 */
.crm-celebracion-cuerpo {
  display: grid;
  justify-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  color: var(--crm-text-2);
  font-size: 15px;
  line-height: 24px;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.crm-celebracion-cuerpo > * {
  max-width: min(68ch, 100%);
  margin: 0;
  overflow-wrap: anywhere;
}

/*
 * Una lista se lee como lista: su viñeta (o su número) en la sangría de 20, en muted. Se declara aquí: el reset del
 * sitio que la monta (el preflight de Tailwind, `ul, ol { list-style: none }`) la dejaba en una sangría sin marcador.
 */
.crm-celebracion-cuerpo > :is(ul, ol) {
  width: min(68ch, 100%);
  padding-left: 20px;
  text-align: left;
  list-style-position: outside;
}

.crm-celebracion-cuerpo > ul {
  list-style-type: disc;
}

.crm-celebracion-cuerpo > ol {
  list-style-type: decimal;
}

.crm-celebracion-cuerpo > :is(ul, ol) > li::marker {
  color: var(--crm-muted);
}

.crm-celebracion-acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.crm-celebracion-acciones > * {
  min-width: 0;
  max-width: 100%;
}

/*
 * Título de página (§3): 24/32 «compacto y a menos de 720» de SU contenedor (§15), no de la ventana. La caja mide 640
 * como mucho: con su ancho propio va siempre a 24/32; el 28/34 de arriba es para quien la monte en un sitio de 720 o
 * más. Dentro de ModoFoco la caja no lleva título: lo dice la pregunta de la capa, con su propia ley.
 */
@container crm-celebracion (max-width: 719.98px) {
  .crm-celebracion-titulo {
    font-size: 24px;
    line-height: 32px;
  }
}

@container crm-celebracion (max-width: 397.98px) {
  .crm-celebracion-interior {
    padding: 20px;
  }

  /* Solo antes de medir: medida, la pieza ya pone el techo de 28 y el escalón que cabe. */
  .crm-celebracion-numero:not([data-medido])[data-escalon="40"] .crm-celebracion-cifra {
    font-size: 28px;
    line-height: 32px;
  }

  .crm-celebracion-numero:not([data-medido])[data-escalon="40"] .crm-celebracion-unidad {
    font-size: 16px;
  }

  .crm-celebracion-numero:not([data-medido])[data-escalon="28"] .crm-celebracion-cifra {
    font-size: 24px;
    line-height: 28px;
  }

  .crm-celebracion-numero:not([data-medido])[data-escalon="28"] .crm-celebracion-unidad {
    font-size: 14px;
  }

  .crm-celebracion-numero:not([data-medido])[data-escalon="24"] .crm-celebracion-cifra {
    font-size: 20px;
    line-height: 24px;
  }

  .crm-celebracion-numero:not([data-medido])[data-escalon="24"] .crm-celebracion-unidad {
    font-size: 12px;
  }

  .crm-celebracion-acciones {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ══ Movimiento reducido, impresión y estático: el visto, ya dibujado ══ */
/* Con la misma fuerza que la regla de `data-animar`, para que ganen también cuando se pidió animar. */
@media (prefers-reduced-motion: reduce) {
  .crm-celebracion[data-animar] .crm-celebracion-circulo,
  .crm-celebracion[data-animar] .crm-celebracion-trazo {
    animation: none;
  }
}

[data-crm-estatico] .crm-celebracion[data-animar] .crm-celebracion-circulo,
[data-crm-estatico] .crm-celebracion[data-animar] .crm-celebracion-trazo,
.crm-celebracion[data-animar][data-crm-estatico] .crm-celebracion-circulo,
.crm-celebracion[data-animar][data-crm-estatico] .crm-celebracion-trazo {
  animation: none;
}

@media print {
  .crm-celebracion[data-animar] .crm-celebracion-circulo,
  .crm-celebracion[data-animar] .crm-celebracion-trazo {
    animation: none;
  }
}

/* Colores forzados: el visto y la firma no se pierden en el lienzo del sistema. */
@media (forced-colors: active) {
  .crm-celebracion {
    border-top-color: Highlight;
  }

  .crm-celebracion-visto {
    color: Highlight;
  }
}

/*
 * DocumentoReferencia (estructura): el documento original (PDF o imagen)
 * junto a la pregunta de un `ModoFoco`. Hoja exclusiva de la pieza; solo
 * variables --crm-*. Compone el panel deslizante de la casa (ancho: 46 % del
 * lienzo, mínimo 440): su cabecera de 52, su cuerpo con su relleno y su pie
 * de 56 son los del panel y no se tocan; aquí solo va lo de dentro.
 *
 * Sin cortes propios (§15): nada de esta hoja mira el viewport ni un ancho.
 * Lo de dentro va DENTRO del cuerpo del panel y hereda su relleno, así que la
 * pregunta, el marco y la imagen quedan siempre alineados con el título de la
 * cabecera, sea cual sea el ancho del panel o del lienzo que lo contiene.
 *
 * Medidas: la pregunta arriba del cuerpo, fija (no se desplaza con el
 * documento): «Pregunta» 12/16 en muted y la pregunta 13/20 a 500, que refluye
 * (nunca se corta), con 12 hasta su filete y 16 hasta el documento. Debajo, la
 * vista, que ocupa el resto y desplaza ella sola: el PDF en un marco a todo su
 * alto sobre un filete de 1; la imagen entera y con su proporción, ajustada
 * al ancho (nunca más grande que su tamaño real) o a tamaño real con
 * desplazamiento en los dos ejes (el conmutador va en el pie, a la vista).
 * Mientras no llega: una hoja de esqueleto con la proporción de un A4 (sale a
 * los 300 ms, por CSS). Error, ausente y «se abre fuera» con el vacío de la
 * casa (icono de 20 en su caja de 40; el del error en `--crm-error`). Radio 0;
 * sin sombras propias.
 */

:where(.crm-documento-panel),
:where(.crm-documento-panel) *,
:where(.crm-documento-panel) ::before,
:where(.crm-documento-panel) ::after {
  box-sizing: border-box;
}

/*
 * Abierto desde un `ModoFoco` a pantalla completa, el panel va ENCIMA: la capa del modo foco no tiene telón y su
 * contenido fijo está a 41, por encima del 40 con el que se apila toda capa con telón. Esta capa sube a 41 y, a igual
 * nivel, gana la que se abre después (el panel). Solo esta capa: el ajuste general es del núcleo (ver la entrega).
 */
.crm-capa:has(> .crm-documento-panel) {
  z-index: 41;
}

/* El cuerpo no desplaza: la pregunta se queda arriba y desplaza la vista. */
.crm-documento-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
}

/* ── La pregunta que se contesta ─────────────────────────────────────── */
.crm-documento-pregunta {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  min-width: 0;
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--crm-line);
  font-size: 13px;
  line-height: 20px;
}

.crm-documento-pregunta-rotulo {
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
}

.crm-documento-pregunta-texto {
  min-width: 0;
  color: var(--crm-text);
  font-weight: 500;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

/* ── La vista: el resto del cuerpo, con su propio desplazamiento ─────── */
.crm-documento-vista {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

.crm-documento-lienzo {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

/* PDF en un marco: a todo el alto de la vista, como un papel sobre la mesa (filete de 1). */
.crm-documento-marco {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  border: 1px solid var(--crm-line);
  background: var(--crm-bg);
}

/* El marco está dentro de una vista que recorta: el anillo, hacia dentro (§7). */
.crm-documento-marco:focus-visible {
  outline-offset: -1px;
}

/* Imagen: la vista desplaza; la imagen, arriba y centrada. */
.crm-documento-imagen-marco {
  flex: none;
  align-items: center;
}

/* Proporción entera: ancho como mucho el de la vista, alto el que le toque; nunca más grande que su tamaño real. */
.crm-documento-imagen {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--crm-line);
  background: var(--crm-bg);
}

/* A tamaño real: la imagen con sus píxeles y la vista desplaza (también en horizontal). */
.crm-documento-imagen-marco[data-real] {
  align-items: flex-start;
  width: max-content;
  min-width: 100%;
}

.crm-documento-imagen-marco[data-real] .crm-documento-imagen {
  max-width: none;
}

/* Hasta que la imagen llega, su hueco tiene la proporción de una hoja y la imagen no asoma a medias. */
.crm-documento-imagen-marco:not([data-cargado]) {
  aspect-ratio: 210 / 297;
}

.crm-documento-imagen-marco:not([data-cargado]) .crm-documento-imagen {
  visibility: hidden;
}

/* El conmutador de tamaño, a la izquierda del pie: las acciones de salida siguen a la derecha. */
.crm-documento-zoom {
  margin-right: auto;
}

/* ── Esperas: una hoja de esqueleto (A4), que sale a los 300 ms ─────── */
.crm-documento-cargando {
  display: grid;
  justify-items: center;
}

.crm-documento-hoja {
  width: 100%;
  max-width: 560px;
  height: auto;
  aspect-ratio: 210 / 297;
}

/* Tapa del marco o de la imagen mientras no han llegado: cubre su hueco entero. */
.crm-documento-tapa {
  position: absolute;
  inset: 0;
  width: auto;
  max-width: none;
  height: auto;
  aspect-ratio: auto;
}

/* ── Estados con el vacío de la casa ─────────────────────────────────── */
.crm-documento-estado[data-estado="error"] .crm-vacio-icono {
  border-color: var(--crm-error-linea);
  color: var(--crm-error);
}

@media (forced-colors: active) {
  .crm-documento-marco,
  .crm-documento-imagen {
    border-color: CanvasText;
  }

  .crm-documento-estado[data-estado="error"] .crm-vacio-icono {
    border-color: CanvasText;
    color: CanvasText;
  }
}

/*
 * MuestraFirma (estructura): la imagen de una firma ya capturada, para leerla.
 * Hoja exclusiva de la pieza; solo variables --crm-*. Sin reglas globales.
 *
 * Anatomía (de fuera a dentro):
 *   pieza    rejilla de ancho completo (máx. 480), papel y mensaje a 8;
 *   papel    filete de 1 (--crm-line) y relleno 16 · 24 · 12 (16 · 16 · 12 con
 *            contenedor de 400 o menos); blanco en los cuatro temas;
 *   tinta    zona de 64 de alto mínimo; con firma, su alto es el de la imagen
 *            redondeado HACIA ARRIBA a píxel entero (se calcula con las
 *            dimensiones del encabezado del PNG y el ancho del contenedor,
 *            antes de decodificar: espera y lista miden lo mismo);
 *   imagen   como mucho 160 de alto, el ancho del papel y su tamaño real;
 *            ocupa el alto de la tinta con object-fit: contain apoyada abajo
 *            (proporción exacta, sin recorte ni ampliación; el redondeo deja
 *            menos de 1 px de aire encima de la tinta, nunca debajo);
 *   renglón  la línea de firma: filete de 1 a todo el ancho de la tinta, justo
 *            debajo de la imagen (nunca la pisa);
 *   mensaje  13/20; ausente en --crm-muted; error con icono de 16 en
 *            --crm-error y el papel con filete --crm-error-linea.
 * Alto del papel: 1 + 16 + tinta (64 a 160, entero) + 1 + 12 + 1, de 95 a
 * 191, siempre entero (FUNDAMENTOS §1: ninguna caja de estructura en fracción).
 *
 * Papel y renglón son material documental, no superficie del panel: tokens de
 * la pieza (--crm-muestra-papel, --crm-muestra-renglon) sobre los comunes que
 * no cambian con el tema (los de la placa: blanco y gris de tinta, 6,7:1 entre
 * ellos). No se recolorea ningún token global ni se simula el tema claro. Con
 * colores forzados el papel conserva los suyos (forced-color-adjust: none):
 * la tinta negra del PNG sigue sobre blanco; el filete del papel, en CanvasText.
 *
 * No es interactiva: sin foco, sin hover, sin selección, sin arrastre. Nada se
 * mueve (sin transición ni animación): la imagen aparece al decodificarse.
 */

:where(.crm-muestra-firma),
:where(.crm-muestra-firma) *,
:where(.crm-muestra-firma) ::before,
:where(.crm-muestra-firma) ::after {
  box-sizing: border-box;
}

.crm-muestra-firma {
  --crm-muestra-papel: var(--crm-placa-fondo);
  --crm-muestra-renglon: var(--crm-placa-apagado);
  --crm-muestra-tope: 160px;
  container: crm-muestra-firma / inline-size;
  display: grid;
  gap: 8px;
  width: 100%;
  min-width: 0;
  max-width: 480px;
  color: var(--crm-text);
  font-family: var(--crm-sans);
}

/* ── El papel ──────────────────────────────────────────────────────────── */
.crm-muestra-firma-papel {
  --crm-muestra-relleno-x: 24px;
  display: grid;
  min-width: 0;
  padding: 16px var(--crm-muestra-relleno-x) 12px;
  border: 1px solid var(--crm-line);
  background: var(--crm-muestra-papel);
  forced-color-adjust: none;
}

.crm-muestra-firma-papel[data-estado="error"] {
  border-color: var(--crm-error-linea);
}

/* La tinta: la firma centrada y apoyada en el renglón. */
.crm-muestra-firma-tinta {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 0;
  min-height: 64px;
}

/*
 * Con firma (data-medida: el componente pasa el ancho y el alto del encabezado),
 * la tinta mide el alto que tendrá la imagen, redondeado hacia arriba a 1 px.
 * El ancho de la tinta es el del contenedor de la pieza (100cqw: la raíz no tiene
 * relleno ni filete) menos los dos filetes de 1 del papel y su relleno lateral
 * (la misma variable que pinta el relleno, así que el corte de 400 no se
 * desincroniza). Ancho de la imagen = mín(tinta, tamaño real, el que da 160 de
 * alto); su alto = ese ancho × alto / ancho del encabezado.
 * Sin round() se queda el alto exacto (proporción correcta, alto fraccional):
 * va antes y fuera de @supports porque una declaración con var() no cae a la
 * anterior si es inválida en cálculo, se anula.
 */
.crm-muestra-firma-tinta[data-medida] {
  --crm-muestra-ancho-tinta: calc(100cqw - 2px - 2 * var(--crm-muestra-relleno-x));
  --crm-muestra-ancho-imagen: min(var(--crm-muestra-ancho-tinta), calc(var(--crm-muestra-ancho) * 1px), calc(var(--crm-muestra-tope) * var(--crm-muestra-ancho) / var(--crm-muestra-alto)));
  --crm-muestra-alto-imagen: calc(var(--crm-muestra-ancho-imagen) * var(--crm-muestra-alto) / var(--crm-muestra-ancho));
  height: max(64px, var(--crm-muestra-alto-imagen));
}

@supports (height: round(up, 1.5px, 1px)) {
  .crm-muestra-firma-tinta[data-medida] {
    height: max(64px, round(up, var(--crm-muestra-alto-imagen), 1px));
  }
}

/*
 * Entera y con su proporción: el ancho es el menor entre el de la tinta, su
 * tamaño real y el que le corresponde a 160 de alto; el alto, el de la tinta
 * (entero). object-fit: contain escala por el ancho (la tinta es igual o más
 * alta que la imagen), así que nunca recorta ni amplía, y object-position la
 * apoya en el renglón.
 */
.crm-muestra-firma-imagen {
  display: block;
  flex: none;
  width: min(100%, calc(var(--crm-muestra-ancho) * 1px), calc(var(--crm-muestra-tope) * var(--crm-muestra-ancho) / var(--crm-muestra-alto)));
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  user-select: none;
  -webkit-user-drag: none;
}

/* Hasta que se decodifica entera, la imagen no asoma a medias (su hueco, sí). */
.crm-muestra-firma[data-estado="espera"] .crm-muestra-firma-imagen {
  visibility: hidden;
}

/* La línea de firma del impreso. */
.crm-muestra-firma-renglon {
  display: block;
  height: 0;
  border-top: 1px solid var(--crm-muestra-renglon);
}

/* ── El mensaje: ausente o error ───────────────────────────────────────── */
.crm-muestra-firma-mensaje {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  margin: 0;
  color: var(--crm-muted);
  font-size: 13px;
  line-height: 20px;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.crm-muestra-firma-mensaje[data-tono="error"] {
  color: var(--crm-text-2);
}

.crm-muestra-firma-mensaje-titulo {
  color: var(--crm-text);
  font-weight: 500;
}

.crm-muestra-firma-mensaje svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--crm-error);
  stroke-width: 1.6;
}

/* ── Contenedor estrecho: el papel cede relleno lateral, la tinta no ───── */
@container crm-muestra-firma (max-width: 400px) {
  .crm-muestra-firma-papel {
    --crm-muestra-relleno-x: 16px;
  }
}

@media (forced-colors: active) {
  .crm-muestra-firma-papel,
  .crm-muestra-firma-papel[data-estado="error"] {
    border-color: CanvasText;
  }

  .crm-muestra-firma-mensaje svg {
    color: CanvasText;
  }
}

/*
 * Familia «estructura» · Mostrador y ColaTrabajo (PR #31): la cola del día por
 * bloques de urgencia y el trabajo al lado. Separado de la hoja de experiencia
 * de la PR #17, cuyo resto ya vive en 45–48.
 */


/* ── Mostrador de trabajo (GRAMATICA §8, «Mostrador de escritorio») ──────
 * Cola de 400 a la izquierda y el trabajo a la derecha, cada una con su
 * desplazamiento, en el alto del marco menos barra (44) y pie (32). Desde
 * 880 de contenedor; por debajo, una columna (la de `data-vista`).
 */
.crm-mostrador {
  box-sizing: border-box;
  container: crm-mostrador / inline-size;
  min-width: 0;
  color: var(--crm-text);
  font-family: var(--crm-sans);
}

.crm-mostrador *,
.crm-mostrador *::before,
.crm-mostrador *::after {
  box-sizing: border-box;
}

/* El marco no añade su respiro inferior bajo el mostrador: ya ocupa el alto justo. */
.crm-marco-contenido:has(> .crm-mostrador) {
  padding-bottom: 0;
}

.crm-mostrador-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

.crm-mostrador-cola {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.crm-mostrador-cabecera {
  flex: none;
  padding: 16px;
  border-bottom: 1px solid var(--crm-line);
}

.crm-mostrador-lista {
  min-height: 0;
}

.crm-mostrador-trabajo {
  display: none;
  min-width: 0;
}

.crm-mostrador[data-vista="trabajo"] .crm-mostrador-cola {
  display: none;
}

.crm-mostrador[data-vista="trabajo"] .crm-mostrador-trabajo {
  display: block;
}

@container crm-mostrador (min-width: 880px) {
  .crm-mostrador-rejilla {
    grid-template-columns: 400px minmax(0, 1fr);
    height: calc(var(--crm-marco-alto, 100dvh) - 76px);
  }

  .crm-mostrador-cola,
  .crm-mostrador[data-vista="trabajo"] .crm-mostrador-cola {
    display: flex;
    min-height: 0;
    border-right: 1px solid var(--crm-line);
  }

  .crm-mostrador-lista {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .crm-mostrador-trabajo {
    display: block;
    min-height: 0;
    overflow-y: auto;
  }

  .crm-mostrador-trabajo > .crm-modo-foco[data-en-linea] {
    min-height: 100%;
  }
}

/* ── Cola de trabajo (FUNDAMENTOS §17.1) ─────────────────────────────────
 * Lo que hay que atender hoy, por bloques de urgencia. Fila de 56 con dos
 * líneas (quién y cuándo; qué pidió y sus etiquetas) y el verbo a la
 * derecha. Elegida: marca de 2 px de acento y panel-3. Rótulos pegados.
 */
.crm-cola {
  box-sizing: border-box;
  container: crm-cola / inline-size;
  min-width: 0;
  color: var(--crm-text);
  font-family: var(--crm-sans);
  font-size: 13px;
  line-height: 20px;
  -webkit-font-smoothing: antialiased;
}

.crm-cola *,
.crm-cola *::before,
.crm-cola *::after {
  box-sizing: border-box;
}

.crm-cola-grupo + .crm-cola-grupo {
  margin-top: 8px;
}

.crm-cola-rotulo {
  position: sticky;
  z-index: 1;
  top: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  margin: 0;
  padding: 0 12px;
  border-bottom: 1px solid var(--crm-line);
  background: var(--crm-bg);
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crm-cola-lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.crm-cola-fila {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-rows: 20px 20px;
  column-gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding: 8px 12px;
  border: 0;
  border-bottom: 1px solid var(--crm-line);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--crm-t-salida) linear;
}

.crm-cola-fila::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: -1px;
  left: 0;
  width: 2px;
  background: var(--crm-acento);
  opacity: 0;
}

.crm-cola-fila:hover {
  background: var(--crm-panel-2);
  transition-duration: 0ms;
}

.crm-cola-fila[data-elegida] {
  background: var(--crm-panel-3);
}

.crm-cola-fila[data-elegida]::before {
  opacity: 1;
}

.crm-cola-fila:focus {
  outline: none;
}

.crm-cola-fila:focus-visible {
  outline: var(--crm-foco-ancho) solid var(--crm-acento);
  outline-offset: -1px;
}

.crm-cola-titulo {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--crm-text);
  font-weight: 500;
  letter-spacing: -0.005em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-cola-tiempo {
  grid-column: 2;
  grid-row: 1;
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 12px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.crm-cola-tiempo[data-tono="aviso"] {
  color: var(--crm-aviso);
}

.crm-cola-tiempo[data-tono="error"] {
  color: var(--crm-error);
}

.crm-cola-detalle {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  overflow: hidden;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-cola-etiquetas {
  display: flex;
  grid-column: 2;
  grid-row: 2;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}

.crm-cola-accion {
  display: inline-flex;
  grid-column: 3;
  grid-row: 1 / 3;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--crm-line-2);
  color: var(--crm-text-2);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: color var(--crm-t-color) var(--crm-snap), border-color var(--crm-t-color) var(--crm-snap);
}

.crm-cola-accion svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.5;
  transition: transform var(--crm-t-gesto) var(--crm-snap);
}

.crm-cola-fila:is(:hover, :focus-visible, [data-elegida]) .crm-cola-accion {
  border-color: var(--crm-text);
  color: var(--crm-text);
}

.crm-cola-fila:hover .crm-cola-accion svg {
  transform: translateX(2px);
}

.crm-cola-grupo-vacio {
  margin: 0;
  padding: 8px 12px 12px;
  border-bottom: 1px solid var(--crm-line);
  color: var(--crm-dim);
  font-size: 12px;
  line-height: 16px;
}

.crm-cola-vacia {
  padding: 24px 12px;
}

/* Estrecho: el verbo se queda en su flecha (la fila entera ya es la acción). */
@container crm-cola (max-width: 360px) {
  .crm-cola-accion {
    width: 28px;
    padding: 0;
    justify-content: center;
    gap: 0;
  }

  .crm-cola-accion-texto {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crm-cola-fila,
  .crm-cola-accion,
  .crm-cola-accion svg {
    transition: none;
  }

  .crm-cola-fila:hover .crm-cola-accion svg {
    transform: none;
  }
}

[data-crm-estatico] .crm-cola-accion svg {
  transition: none;
}

/*
 * Familia «producto» del sistema de marca Criterium: piezas que se montan con
 * controles, estructura, datos y gráficos (docs/marca/GRAMATICA.md). Solo
 * variables --crm-* de 00-temas.css: ningún color, tiempo ni sombra literal.
 * Medidas de docs/marca/FUNDAMENTOS.md: filas de 36/44, barras de 44,
 * controles de 24/28/32, interfaz a 13 px, radio 0 y filetes de 1 px.
 */

/* ── Común: chips de prueba y fragmentos ───────────────────────────── */
.crm-prod-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crm-prod-chips > li {
  display: flex;
  min-width: 0;
  max-width: 100%;
}

.crm-prod-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  max-width: 100%;
  margin: 0;
  padding: 0 8px;
  border: 1px solid var(--crm-line-2);
  border-radius: 0;
  background: transparent;
  color: var(--crm-text-2);
  font-family: var(--crm-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  text-align: left;
  cursor: pointer;
  transition:
    background-color var(--crm-t-color) var(--crm-snap),
    border-color var(--crm-t-color) var(--crm-snap),
    color var(--crm-t-color) var(--crm-snap);
}

.crm-prod-chip:hover {
  border-color: var(--crm-control);
  background: var(--crm-panel-2);
  color: var(--crm-text);
  transition-duration: 0ms;
}

.crm-prod-chip:focus-visible {
  outline: 1px solid var(--crm-acento);
  outline-offset: 2px;
}

.crm-prod-chip[aria-pressed="true"] {
  border-color: var(--crm-acento-linea);
  background: var(--crm-acento-suave);
  color: var(--crm-text);
}

.crm-prod-chip svg {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--crm-muted);
}

.crm-prod-chip-texto {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-prod-chip-meta {
  flex: none;
  color: var(--crm-muted);
  font-variant-numeric: tabular-nums;
}

.crm-prod-chip-numero {
  flex: none;
  min-width: 14px;
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.crm-prod-fragmento {
  margin: 0;
  padding: 12px 16px;
  border-left: 2px solid var(--crm-line-2);
  background: var(--crm-panel-2);
  color: var(--crm-text-2);
  font-size: 15.5px;
  line-height: 26px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.crm-prod-fragmento mark {
  padding: 0 2px;
  background: var(--crm-acento-suave);
  box-shadow: inset 0 -1px 0 var(--crm-acento-linea);
  color: var(--crm-text);
}

.crm-prod-fragmento-vacio {
  margin: 0;
  color: var(--crm-muted);
  font-size: 13px;
  line-height: 20px;
}

/* ── Mesa de decisiones ─────────────────────────────────────────────── */
.crm-mesa {
  container-type: inline-size;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 44px;
  min-width: 0;
  border: 1px solid var(--crm-line);
  background: var(--crm-panel);
  color: var(--crm-text);
  font-family: var(--crm-sans);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: -0.005em;
}

.crm-mesa-cuerpo {
  display: grid;
  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
  min-height: 0;
}

.crm-mesa-lado {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-right: 1px solid var(--crm-line);
}

.crm-mesa-cabecera {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border-bottom: 1px solid var(--crm-line);
}

.crm-mesa-titulo {
  margin: 0;
  color: var(--crm-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}

.crm-mesa-pendientes {
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

.crm-mesa-lista {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  outline: none;
}

.crm-mesa-lista[hidden] {
  display: none;
}

.crm-mesa-fila {
  position: relative;
  display: grid;
  grid-template-columns: 6px minmax(0, 1fr) auto;
  grid-template-rows: 20px 16px;
  align-content: center;
  column-gap: 10px;
  height: 44px;
  padding: 0 16px 0 14px;
  border-bottom: 1px solid var(--crm-line);
  overflow: hidden;
  cursor: default;
  transition: background-color var(--crm-t-color) var(--crm-snap);
}

.crm-mesa-fila:hover {
  background: var(--crm-panel-2);
  transition-duration: 0ms;
}

.crm-mesa-fila[aria-selected="true"] {
  background: var(--crm-panel-3);
}

.crm-mesa-fila[aria-selected="true"]::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--crm-acento);
}

.crm-mesa-lista:focus-visible .crm-mesa-fila[aria-selected="true"] {
  outline: 1px solid var(--crm-acento);
  outline-offset: -1px;
}

.crm-mesa-fila[data-esqueleto] {
  row-gap: 6px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  padding-left: 30px;
}

.crm-mesa-prioridad {
  grid-row: 1;
  grid-column: 1;
  align-self: center;
  width: 6px;
  height: 6px;
  border: 1px solid var(--crm-line-2);
  border-radius: 50%;
  background: transparent;
}

.crm-mesa-prioridad[data-prioridad="normal"] {
  border-color: var(--crm-control);
  background: var(--crm-control);
}

.crm-mesa-prioridad[data-prioridad="alta"] {
  border-color: var(--crm-aviso);
  background: var(--crm-aviso);
}

.crm-mesa-prioridad[data-prioridad="urgente"] {
  border-color: var(--crm-error);
  background: var(--crm-error);
  box-shadow: 0 0 0 3px var(--crm-error-suave);
}

.crm-mesa-fila-titulo {
  grid-row: 1;
  grid-column: 2;
  min-width: 0;
  overflow: hidden;
  color: var(--crm-text);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-mesa-fila-importe {
  grid-row: 1;
  grid-column: 3;
  justify-self: end;
  color: var(--crm-text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.crm-mesa-fila-meta {
  grid-row: 2;
  grid-column: 2;
  display: flex;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
}

.crm-mesa-fila-meta > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.crm-mesa-fila-meta [data-pasado],
.crm-mesa-fila-meta [data-error] {
  color: var(--crm-error);
}

.crm-mesa-fila-meta [data-aviso] {
  color: var(--crm-aviso);
}

.crm-mesa-fila-origen {
  grid-row: 2;
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  color: var(--crm-muted);
}

.crm-mesa-fila-origen svg {
  width: 14px;
  height: 14px;
}

.crm-mesa-fila[data-estado="resuelta"] .crm-mesa-fila-titulo,
.crm-mesa-fila[data-estado="caducada"] .crm-mesa-fila-titulo {
  color: var(--crm-muted);
}

/* La fila que se va: corriente de luz por su base y pliegue. */
.crm-mesa-fila[data-saliendo] {
  pointer-events: none;
  animation: crm-mesa-pliega var(--crm-t-panel) var(--crm-snap) var(--crm-t-dibujo) forwards;
}

.crm-mesa-fila[data-saliendo] > * {
  opacity: 0.55;
  transition: opacity var(--crm-t-dibujo) var(--crm-curva);
}

.crm-mesa-fila[data-saliendo="aprobada"] {
  background: var(--crm-acento-suave);
}

.crm-mesa-fila[data-saliendo="aprobada"]::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--crm-acento);
}

.crm-mesa-fila[data-saliendo]::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--crm-luz) 50%, transparent 100%) -60% 0 / 60% 100% no-repeat;
  box-shadow: 0 0 8px var(--crm-acento-linea);
  animation: crm-mesa-corriente var(--crm-t-dibujo) var(--crm-curva) forwards;
}

.crm-mesa-fila[data-saliendo="rechazada"]::after,
.crm-mesa-fila[data-saliendo="descartada"]::after {
  background-image: linear-gradient(90deg, transparent 0%, var(--crm-control) 50%, transparent 100%);
  box-shadow: none;
}

@keyframes crm-mesa-corriente {
  to {
    background-position: 160% 0;
  }
}

@keyframes crm-mesa-pliega {
  to {
    height: 0;
    border-bottom-width: 0;
    opacity: 0;
  }
}

/* Vacío: «Nada que decidir» o, tras resolver, la C que se ilumina una vez. */
.crm-mesa-vacia {
  display: grid;
  flex: 1;
  place-content: center;
  justify-items: center;
  gap: 8px;
  padding: 32px 24px;
  text-align: center;
  outline: none;
}

.crm-mesa-vacia:focus-visible {
  outline: 1px solid var(--crm-acento);
  outline-offset: -1px;
}

.crm-mesa-c {
  margin: 0 0 12px;
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 12px;
  letter-spacing: 0;
  white-space: pre;
  user-select: none;
}

.crm-mesa-vacia[data-celebra] .crm-mesa-c {
  background: linear-gradient(100deg, var(--crm-acento) 0%, var(--crm-acento) 38%, var(--crm-luz) 50%, var(--crm-muted) 62%, var(--crm-muted) 100%) 100% 0 / 300% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: crm-mesa-ilumina calc(var(--crm-t-dibujo) * 2) var(--crm-curva) 1 both;
}

@keyframes crm-mesa-ilumina {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0% 0;
  }
}

.crm-mesa-vacia-titulo {
  margin: 0;
  color: var(--crm-text);
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -0.01em;
}

.crm-mesa-vacia-texto {
  max-width: 44ch;
  margin: 0;
  color: var(--crm-muted);
  font-size: 13px;
  line-height: 20px;
}

.crm-mesa-error {
  padding: 16px;
}

/* Detalle */
.crm-mesa-detalle:focus-visible,
.crm-pulso-cuerpo:focus-visible {
  outline: 1px solid var(--crm-acento);
  outline-offset: -1px;
}

.crm-mesa-detalle {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
}

.crm-mesa-detalle-cuerpo {
  display: grid;
  align-content: start;
  gap: 16px;
  max-width: calc(68ch + 48px);
  padding: 24px;
}

.crm-mesa-detalle-vacio {
  color: var(--crm-muted);
}

.crm-mesa-detalle-vacio p {
  margin: 0;
}

.crm-mesa-volver {
  display: none;
  align-items: center;
  justify-self: start;
  gap: 6px;
  height: 28px;
  margin: 0;
  padding: 0 10px 0 6px;
  border: 0;
  background: transparent;
  color: var(--crm-muted);
  font: inherit;
  cursor: pointer;
}

.crm-mesa-volver svg {
  width: 14px;
  height: 14px;
}

.crm-mesa-volver:hover {
  background: var(--crm-panel-2);
  color: var(--crm-text);
}

.crm-mesa-volver:focus-visible {
  outline: 1px solid var(--crm-acento);
  outline-offset: 2px;
}

.crm-mesa-detalle-rotulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 0 0 -10px;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
}

.crm-mesa-detalle-tipo {
  color: var(--crm-text-2);
}

.crm-mesa-origen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.crm-mesa-origen svg {
  width: 14px;
  height: 14px;
}

.crm-mesa-detalle-titulo {
  margin: 0;
  color: var(--crm-text);
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.crm-mesa-datos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  margin: 0;
}

.crm-mesa-datos > div {
  display: grid;
  gap: 2px;
}

.crm-mesa-datos dt {
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crm-mesa-datos dd {
  margin: 0;
  color: var(--crm-text);
}

.crm-mesa-datos dd[data-pasado] {
  color: var(--crm-error);
}

.crm-mesa-cifra {
  font-variant-numeric: tabular-nums;
}

.crm-mesa-resumen {
  max-width: 68ch;
  margin: 0;
  color: var(--crm-text-2);
  font-size: 14px;
  line-height: 22px;
}

.crm-mesa-seccion {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.crm-mesa-seccion-titulo {
  margin: 0;
  color: var(--crm-muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

/* Rechazo con motivo */
.crm-mesa-rechazo {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--crm-line-2);
  background: var(--crm-panel-2);
}

.crm-mesa-motivos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.crm-mesa-rechazo-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.crm-mesa-ayuda {
  margin-right: auto;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
}

/* Barra inferior, a la manera de Raycast */
.crm-mesa-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  height: 44px;
  padding: 0 8px 0 16px;
  border-top: 1px solid var(--crm-line);
  background: var(--crm-panel);
}

.crm-mesa-barra-estado {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 16px;
  min-width: 0;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
}

.crm-mesa-posicion {
  font-variant-numeric: tabular-nums;
}

.crm-mesa-resueltas {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.crm-mesa-cuenta {
  display: inline-block;
  color: var(--crm-text);
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.crm-mesa-cuenta[data-sube] {
  animation: crm-mesa-sube var(--crm-t-gesto) var(--crm-snap);
}

@keyframes crm-mesa-sube {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.crm-mesa-deshacer {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 28px;
}

.crm-mesa-deshacer::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--crm-acento-linea);
  transform-origin: left;
  animation: crm-mesa-ventana var(--crm-mesa-ventana) linear forwards;
}

@keyframes crm-mesa-ventana {
  to {
    transform: scaleX(0);
  }
}

.crm-mesa-deshacer-texto {
  min-width: 0;
  overflow: hidden;
  color: var(--crm-text-2);
  text-overflow: ellipsis;
}

.crm-mesa-barra-acciones {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
}

.crm-mesa-guia {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 8px;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
}

/* Estrecha (móvil, columna lateral): una vista cada vez. */
@container (max-width: 719px) {
  .crm-mesa-cuerpo {
    grid-template-columns: minmax(0, 1fr);
  }

  .crm-mesa-lado {
    border-right: 0;
  }

  .crm-mesa[data-vista-movil="lista"] .crm-mesa-detalle,
  .crm-mesa[data-vista-movil="detalle"] .crm-mesa-lado {
    display: none;
  }

  .crm-mesa-volver {
    display: inline-flex;
  }

  .crm-mesa-detalle-cuerpo {
    padding: 16px;
  }

  .crm-mesa-guia,
  .crm-mesa-posicion,
  .crm-mesa-barra .crm-boton-atajo {
    display: none;
  }
}

@container (max-width: 479px) {
  .crm-mesa-resueltas {
    display: none;
  }

  .crm-mesa-barra {
    padding: 0 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crm-ad-linea,
  .crm-mesa-fila[data-saliendo],
  .crm-mesa-fila[data-saliendo]::after,
  .crm-mesa-vacia[data-celebra] .crm-mesa-c,
  .crm-mesa-cuenta[data-sube],
  .crm-mesa-deshacer::after {
    animation: none;
  }

  .crm-mesa-vacia[data-celebra] .crm-mesa-c {
    background-position: 0% 0;
  }
}

/* ── Antes y después ────────────────────────────────────────────────── */
.crm-ad {
  container-type: inline-size;
  display: grid;
  gap: 12px;
  min-width: 0;
  color: var(--crm-text);
  font-family: var(--crm-sans);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: -0.005em;
}

.crm-ad-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.crm-ad-solo[aria-pressed="true"] {
  border-color: var(--crm-acento-linea);
  background: var(--crm-acento-suave);
  color: var(--crm-text);
}

.crm-ad-resumen {
  margin-left: auto;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

.crm-ad[data-compacto] .crm-ad-resumen {
  margin-left: 0;
}

/* Campos: rótulo mono · antes tachado · después con marca de acento. */
.crm-ad-campos {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.crm-ad-campos th,
.crm-ad-campos td {
  height: 36px;
  padding: 0 12px 0 0;
  border-bottom: 1px solid var(--crm-line);
  text-align: left;
  vertical-align: middle;
  overflow-wrap: anywhere;
}

.crm-ad-campos thead th {
  height: 32px;
  border-bottom-color: var(--crm-line-2);
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crm-ad-campos tbody th {
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

.crm-ad-campos td {
  font-variant-numeric: tabular-nums;
}

.crm-ad-campos tr[data-igual] td {
  color: var(--crm-muted);
}

.crm-ad-antes del {
  color: var(--crm-muted);
  text-decoration: line-through;
  text-decoration-color: var(--crm-control);
}

.crm-ad-despues ins {
  display: inline-block;
  padding-left: 8px;
  box-shadow: inset 2px 0 0 var(--crm-acento);
  color: var(--crm-text);
  text-decoration: none;
}

/* Texto: líneas con número de 11 en mono y diff por palabras. */
.crm-ad-texto {
  display: grid;
  min-width: 0;
  border: 1px solid var(--crm-line);
  background: var(--crm-bg);
}

.crm-ad-cabeceras {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  height: 32px;
  border-bottom: 1px solid var(--crm-line-2);
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
}

.crm-ad-cabeceras span {
  align-self: center;
  padding-left: 48px;
}

.crm-ad-cabeceras span + span {
  border-left: 1px solid var(--crm-line);
  align-self: stretch;
  display: flex;
  align-items: center;
}

.crm-ad-par {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.crm-ad-par > .crm-ad-linea + .crm-ad-linea {
  border-left: 1px solid var(--crm-line);
}

.crm-ad-linea {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  column-gap: 12px;
  min-width: 0;
  padding: 6px 12px 6px 0;
  border-bottom: 1px solid var(--crm-line);
}

.crm-ad-par:last-child .crm-ad-linea,
.crm-ad-texto > .crm-ad-linea:last-child,
.crm-ad-texto > .crm-ad-fila-pliegue:last-child {
  border-bottom: 0;
}

.crm-ad-linea[data-tipo="cambiado"],
.crm-ad-par[data-tipo="cambiado"] .crm-ad-linea {
  background: var(--crm-panel);
}

.crm-ad-linea[data-tipo="insertado"],
.crm-ad-par[data-tipo="insertado"] .crm-ad-linea[data-lado="despues"] {
  box-shadow: inset 2px 0 0 var(--crm-acento);
  background: var(--crm-acento-suave);
}

.crm-ad-linea[data-tipo="borrado"],
.crm-ad-par[data-tipo="borrado"] .crm-ad-linea[data-lado="antes"] {
  box-shadow: inset 2px 0 0 var(--crm-control);
  background: var(--crm-panel-2);
}

.crm-ad-linea[data-vacia] {
  background: repeating-linear-gradient(135deg, transparent 0 6px, var(--crm-line) 6px 7px);
}

.crm-ad-num {
  color: var(--crm-dim);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 22px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  user-select: none;
}

.crm-ad-contenido {
  margin: 0;
  min-width: 0;
  color: var(--crm-text-2);
  font-size: 14px;
  line-height: 22px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.crm-ad-linea[data-tipo="igual"] .crm-ad-contenido {
  color: var(--crm-muted);
}

.crm-ad-contenido del {
  color: var(--crm-muted);
  text-decoration: line-through;
  text-decoration-color: var(--crm-control);
}

.crm-ad-contenido del + ins {
  margin-left: 4px;
}

.crm-ad-contenido ins {
  background: var(--crm-acento-suave);
  color: var(--crm-text);
  text-decoration: underline;
  text-decoration-color: var(--crm-acento);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.crm-ad-fila-pliegue td {
  padding: 0;
}

.crm-ad-pliegue {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 28px;
  margin: 0;
  padding: 0 12px 0 48px;
  border: 0;
  border-bottom: 1px solid var(--crm-line);
  background: var(--crm-panel-2);
  color: var(--crm-muted);
  font-family: var(--crm-sans);
  font-size: 12px;
  line-height: 16px;
  text-align: left;
  cursor: pointer;
  transition:
    color var(--crm-t-color) var(--crm-snap),
    background-color var(--crm-t-color) var(--crm-snap);
}

.crm-ad-campos .crm-ad-pliegue {
  padding-left: 0;
  background: transparent;
}

.crm-ad-pliegue svg {
  width: 14px;
  height: 14px;
}

.crm-ad-pliegue:hover {
  background: var(--crm-panel-3);
  color: var(--crm-text);
  transition-duration: 0ms;
}

.crm-ad-pliegue:focus-visible {
  outline: 1px solid var(--crm-acento);
  outline-offset: -1px;
}

.crm-ad-linea {
  animation: crm-ad-despliega var(--crm-t-entrada) var(--crm-snap);
}

@keyframes crm-ad-despliega {
  from {
    opacity: 0;
  }
}

/* Estrecho: lado a lado pasa a uno encima de otro. */
@container (max-width: 559px) {
  .crm-ad-par,
  .crm-ad-cabeceras {
    grid-template-columns: minmax(0, 1fr);
  }

  .crm-ad-cabeceras {
    display: none;
  }

  .crm-ad-par > .crm-ad-linea + .crm-ad-linea {
    border-left: 0;
  }

  .crm-ad-linea[data-vacia] {
    display: none;
  }

  .crm-ad-resumen {
    flex-basis: 100%;
    margin-left: 0;
  }
}

.crm-ad-esqueleto {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--crm-line);
}

.crm-ad-esqueleto .crm-esqueleto,
.crm-mesa-detalle-cuerpo > .crm-esqueleto {
  display: block;
}

/* ── ¿Por qué esta cifra? ──────────────────────────────────────────── */
.crm-deslizante.crm-pq {
  --crm-desl-ancho: 480px;
}

.crm-pq-cuerpo {
  display: grid;
  gap: 24px;
}

.crm-pq-cifra {
  display: grid;
  gap: 6px;
}

.crm-pq-valor {
  margin: 0;
  color: var(--crm-text);
  font-size: 40px;
  font-weight: 500;
  line-height: 44px;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

.crm-pq-unidad {
  margin-left: 4px;
  color: var(--crm-muted);
  font-size: 24px;
  letter-spacing: 0;
}

.crm-pq-variacion {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

.crm-pq-variacion svg {
  width: 12px;
  height: 12px;
}

.crm-pq-variacion[data-sentido="bueno"] {
  color: var(--crm-acento);
}

.crm-pq-variacion[data-sentido="fallo"] {
  color: var(--crm-error);
}

.crm-pq-antes {
  color: var(--crm-muted);
}

.crm-pq-seccion {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.crm-pq-seccion-titulo {
  margin: 0;
  color: var(--crm-muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

/* Cascada */
.crm-pq-cascada {
  margin: 0;
}

.crm-pq-cascada svg {
  display: block;
  overflow: visible;
}

.crm-pq-cascada-base {
  stroke: var(--crm-line-2);
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.crm-pq-escalon rect {
  fill: var(--crm-text-2);
  stroke: none;
  shape-rendering: crispEdges;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: crm-pq-crece var(--crm-t-dibujo) var(--crm-curva) both;
  animation-delay: calc(var(--i) * var(--crm-t-pulsar));
}

.crm-pq-escalon[data-tipo="inicio"] rect {
  fill: var(--crm-serie-reposo);
}

.crm-pq-escalon[data-tipo="baja"] rect {
  fill: var(--crm-panel-2);
  stroke: var(--crm-text-2);
  stroke-width: 1;
  transform-origin: 50% 0;
}

.crm-pq-escalon[data-tipo="fin"] rect {
  fill: var(--crm-text);
}

.crm-pq-escalon[data-principal] rect {
  fill: var(--crm-acento);
  stroke: none;
}

.crm-pq-conector {
  stroke: var(--crm-control);
  stroke-width: 1;
  stroke-dasharray: 2 2;
  shape-rendering: crispEdges;
  animation: crm-pq-aparece var(--crm-t-gesto) var(--crm-snap) both;
  animation-delay: calc(var(--i) * var(--crm-t-pulsar) + var(--crm-t-dibujo));
}

.crm-pq-cascada-valor {
  fill: var(--crm-text-2);
  font-family: var(--crm-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  animation: crm-pq-aparece var(--crm-t-gesto) var(--crm-snap) both;
  animation-delay: calc(var(--i) * var(--crm-t-pulsar) + var(--crm-t-dibujo));
}

.crm-pq-escalon[data-principal] .crm-pq-cascada-valor {
  fill: var(--crm-acento);
}

.crm-pq-cascada-etiqueta {
  fill: var(--crm-muted);
  font-family: var(--crm-sans);
  font-size: 11px;
}

@keyframes crm-pq-crece {
  from {
    transform: scaleY(0);
  }
}

@keyframes crm-pq-aparece {
  from {
    opacity: 0;
  }
}

/* Causas */
.crm-pq-causas {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crm-pq-causa {
  display: grid;
  gap: 6px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--crm-line);
}

.crm-pq-causa:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.crm-pq-causa-cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.crm-pq-causa-titulo {
  color: var(--crm-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}

.crm-pq-peso {
  flex: none;
  color: var(--crm-text-2);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

.crm-pq-medidor {
  display: block;
  height: 4px;
  background: var(--crm-panel-3);
}

.crm-pq-medidor > span {
  display: block;
  height: 100%;
  background: var(--crm-serie-reposo);
  transform-origin: left;
  animation: crm-pq-mide var(--crm-t-dibujo) var(--crm-curva) both;
}

.crm-pq-medidor > span[data-principal] {
  background: var(--crm-acento);
}

@keyframes crm-pq-mide {
  from {
    transform: scaleX(0);
  }
}

.crm-pq-causa-detalle {
  margin: 0;
  color: var(--crm-text-2);
  font-size: 13px;
  line-height: 20px;
}

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

/* El disparador: «?» en la esquina de la cifra. */
.crm-kpi[data-porque],
.crm-pq-envoltorio {
  position: relative;
}

.crm-kpi[data-porque] {
  cursor: pointer;
}

.crm-kpi[data-porque]:hover {
  background: var(--crm-panel-2);
}

.crm-pq-esquina {
  position: absolute;
  top: 12px;
  right: 12px;
  opacity: 0;
  transition: opacity var(--crm-t-color) var(--crm-snap);
}

.crm-kpi[data-porque]:is(:hover, :focus-within) .crm-pq-esquina,
.crm-pq-envoltorio:is(:hover, :focus-within) .crm-pq-esquina,
.crm-pq-esquina[aria-expanded="true"] {
  opacity: 1;
}

@media (hover: none) {
  .crm-pq-esquina {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crm-pq-escalon rect,
  .crm-pq-conector,
  .crm-pq-cascada-valor,
  .crm-pq-medidor > span {
    animation: none;
  }
}

/* ── Pulso en vivo ──────────────────────────────────────────────────── */
.crm-pulso {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--crm-line);
  background: var(--crm-panel);
  color: var(--crm-text);
  font-family: var(--crm-sans);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: -0.005em;
}

.crm-pulso[data-variante="compacta"] {
  width: 320px;
  max-width: 100%;
}

.crm-pulso-cabecera {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  min-height: 44px;
  padding: 0 16px;
  border-bottom: 1px solid var(--crm-line);
}

.crm-pulso-titulo {
  margin: 0;
  color: var(--crm-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}

.crm-pulso-vivo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--crm-acento);
  font-size: 12px;
  line-height: 16px;
}

.crm-pulso-vivo[data-pausado] {
  color: var(--crm-muted);
}

.crm-pulso-punto {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--crm-acento);
  box-shadow: 0 0 0 2px var(--crm-acento-suave);
}

.crm-pulso-punto::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--crm-acento);
  animation: crm-latido calc(var(--crm-t-dibujo) * 4) var(--crm-curva) infinite;
}

.crm-pulso-vivo[data-pausado] .crm-pulso-punto {
  background: var(--crm-control);
  box-shadow: none;
}

.crm-pulso-vivo[data-pausado] .crm-pulso-punto::after {
  animation: none;
  opacity: 0;
}

.crm-pulso-ritmo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.crm-pulso-ritmo-rotulo {
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
}

.crm-pulso-ritmo svg {
  display: block;
}

.crm-pulso-barra {
  fill: var(--crm-serie-reposo);
  shape-rendering: crispEdges;
}

.crm-pulso-barra[data-vacia] {
  fill: var(--crm-line-2);
}

.crm-pulso-barra[data-ahora]:not([data-vacia]) {
  fill: var(--crm-acento);
}

.crm-pulso-latido {
  fill: var(--crm-luz);
  opacity: 0;
  shape-rendering: crispEdges;
}

.crm-pulso-latido[data-activo] {
  animation: crm-pulso-late var(--crm-t-capa) var(--crm-curva);
}

@keyframes crm-pulso-late {
  30% {
    opacity: 1;
  }
}

.crm-pulso-filtros {
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 16px;
  overflow-x: auto;
  border-bottom: 1px solid var(--crm-line);
  scrollbar-width: none;
  /* Que la fila de chips no ensanche la pieza: desplaza por dentro. */
  width: 0;
  min-width: 100%;
}

.crm-pulso-filtros .crm-prod-chip {
  flex: none;
}

.crm-pulso-cuerpo {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 0 16px;
}

.crm-pulso-nuevos {
  position: sticky;
  z-index: 1;
  top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  margin: 8px auto -32px;
  padding: 0 10px 0 8px;
  border: 1px solid var(--crm-acento-linea);
  background: var(--crm-panel-2);
  box-shadow: var(--crm-sombra-capa);
  color: var(--crm-text);
  font-family: var(--crm-sans);
  font-size: 12px;
  line-height: 16px;
  cursor: pointer;
  animation: crm-pulso-baja var(--crm-t-entrada) var(--crm-snap);
}

.crm-pulso-nuevos svg {
  width: 14px;
  height: 14px;
  color: var(--crm-acento);
}

.crm-pulso-nuevos:focus-visible {
  outline: 1px solid var(--crm-acento);
  outline-offset: 2px;
}

@keyframes crm-pulso-baja {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
}

.crm-pulso-grupo {
  position: relative;
  content-visibility: auto;
  contain-intrinsic-size: auto 120px;
}

/* El carril de 1 px que une los nodos, seguido de grupo en grupo. */
.crm-pulso-grupo::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 23px;
  width: 1px;
  background: var(--crm-line-2);
}

.crm-pulso-grupo:first-of-type::before {
  top: 34px;
}

.crm-pulso-grupo:last-of-type::before {
  bottom: auto;
  height: 100%;
  -webkit-mask-image: linear-gradient(180deg, currentColor 70%, transparent);
  mask-image: linear-gradient(180deg, currentColor 70%, transparent);
}

.crm-pulso-grupo-rotulo {
  position: sticky;
  z-index: 0;
  top: 0;
  margin: 0;
  padding: 12px 16px 4px 46px;
  background: linear-gradient(90deg, transparent 32px, var(--crm-panel) 32px);
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

.crm-pulso-lista {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}


.crm-pulso-evento {
  position: relative;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 16px;
  min-height: 36px;
  padding: 8px 16px 8px 18px;
}

.crm-pulso-nodo {
  position: relative;
  z-index: 1;
  width: 12px;
  height: 12px;
  margin-top: 4px;
  border: 1px solid var(--crm-control);
  border-radius: 50%;
  background: var(--crm-panel);
}

.crm-pulso-evento[data-estado="hecho"] .crm-pulso-nodo {
  border-color: var(--crm-acento);
  background: var(--crm-acento);
}

.crm-pulso-evento[data-estado="trabajando"] .crm-pulso-nodo {
  border-color: var(--crm-acento-linea);
  box-shadow: 0 0 0 3px var(--crm-acento-suave);
}

.crm-pulso-evento[data-estado="error"] .crm-pulso-nodo {
  border-color: var(--crm-error);
  background: var(--crm-error-suave);
}

.crm-pulso-texto {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.crm-pulso-evento-titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
  margin: 0;
  color: var(--crm-text-2);
  font-size: 13px;
  line-height: 20px;
}

.crm-pulso-evento[data-importancia="alta"] .crm-pulso-evento-titulo {
  color: var(--crm-text);
  font-weight: 500;
}

.crm-pulso-evento[data-importancia="baja"] .crm-pulso-evento-titulo {
  color: var(--crm-muted);
}

/* Objetivo de 24 de alto (WCAG 2.5.8) sin mover la línea: 2 de relleno arriba y abajo. */
.crm-pulso-enlace {
  padding: 2px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.crm-pulso-enlace:hover {
  color: var(--crm-text);
  text-decoration: underline;
  text-decoration-color: var(--crm-line-2);
  text-underline-offset: 3px;
}

.crm-pulso-enlace:focus-visible {
  outline: 1px solid var(--crm-acento);
  outline-offset: 2px;
}

.crm-pulso-falla {
  color: var(--crm-error);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

.crm-pulso-detalle {
  margin: 0;
  overflow: hidden;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-pulso-hora {
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
}

/* Lo nuevo entra arriba con la corriente de luz por el carril. */
.crm-pulso-evento[data-nuevo] {
  animation: crm-pulso-entra var(--crm-t-entrada) var(--crm-snap);
}

.crm-pulso-evento[data-nuevo]::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 23px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--crm-luz) 50%, transparent) 0 -40px / 100% 40px no-repeat;
  box-shadow: 0 0 8px var(--crm-acento-linea);
  animation: crm-pulso-corriente var(--crm-t-dibujo) var(--crm-curva) forwards;
}

.crm-pulso-evento[data-nuevo] .crm-pulso-nodo {
  box-shadow: 0 0 0 4px var(--crm-acento-suave);
}

@keyframes crm-pulso-entra {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

@keyframes crm-pulso-corriente {
  to {
    background-position: 0 calc(100% + 40px);
  }
}

.crm-pulso-esqueleto,
.crm-pulso-error,
.crm-pulso-vacio {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.crm-pulso-esqueleto .crm-esqueleto {
  display: block;
}

.crm-pulso-vacio {
  justify-items: start;
  gap: 6px;
  padding: 24px 16px;
}

.crm-pulso-vacio-titulo {
  margin: 0;
  color: var(--crm-text);
  font-weight: 500;
}

.crm-pulso-vacio-texto {
  margin: 0 0 6px;
  color: var(--crm-muted);
}

.crm-pulso-mas {
  margin: 8px 0 0 44px;
}

.crm-pulso-centinela {
  height: 1px;
}

/* Compacta (barra lateral): sin detalle y con menos aire. */
.crm-pulso[data-variante="compacta"] .crm-pulso-ritmo {
  flex-basis: 100%;
  margin: 0 0 8px;
}

.crm-pulso[data-variante="compacta"] .crm-pulso-cabecera {
  padding-top: 12px;
}

.crm-pulso[data-variante="compacta"] .crm-pulso-filtros,
.crm-pulso[data-variante="compacta"] .crm-pulso-cabecera {
  padding-left: 12px;
  padding-right: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .crm-pulso-punto::after,
  .crm-pulso-latido[data-activo],
  .crm-pulso-nuevos,
  .crm-pulso-evento[data-nuevo],
  .crm-pulso-evento[data-nuevo]::before {
    animation: none;
  }
}

/* ── Visor de documentos ────────────────────────────────────────────── */
.crm-visor {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--crm-line);
  background: var(--crm-panel);
  color: var(--crm-text);
  font-family: var(--crm-sans);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: -0.005em;
}

.crm-visor-barra {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 8px 0 16px;
  border-bottom: 1px solid var(--crm-line);
}

.crm-visor-titulo {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--crm-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-visor-zoom {
  display: flex;
  align-items: center;
  gap: 2px;
}

.crm-visor-cifra {
  font-variant-numeric: tabular-nums;
}

.crm-visor-porcentaje {
  min-width: 44px;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
  text-align: center;
}

.crm-visor-cuerpo {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  min-height: 0;
}

.crm-visor-lienzo {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 16px;
  min-width: 0;
  min-height: 0;
  padding: 16px;
  overflow: auto;
  background: var(--crm-bg);
  outline: none;
}

.crm-visor-lienzo:focus-visible {
  outline: 1px solid var(--crm-acento);
  outline-offset: -1px;
}

.crm-visor-pagina {
  position: relative;
  max-width: none;
  margin: 0;
  border: 1px solid var(--crm-line-2);
  box-shadow: var(--crm-sombra-hundida);
}

.crm-visor-pagina img {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
}

.crm-visor-numero {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 2px 6px;
  background: var(--crm-velo);
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

.crm-visor-caja {
  --crm-caja: var(--crm-control);
  position: absolute;
  margin: 0;
  padding: 0;
  border: 1px solid var(--crm-caja);
  background: transparent;
  cursor: pointer;
  transition:
    background-color var(--crm-t-color) var(--crm-snap),
    opacity var(--crm-t-color) var(--crm-snap),
    box-shadow var(--crm-t-color) var(--crm-snap);
}

.crm-visor-caja[data-tono="alta"] {
  --crm-caja: var(--crm-acento);
}

.crm-visor-caja[data-tono="baja"] {
  --crm-caja: var(--crm-aviso);
}

.crm-visor-caja[data-estado="confirmado"],
.crm-visor-caja[data-estado="corregido"] {
  --crm-caja: var(--crm-acento);
}

.crm-visor-caja[data-atenuada] {
  opacity: 0.45;
}

.crm-visor-caja[data-activa] {
  background: color-mix(in oklab, var(--crm-caja) 16%, transparent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--crm-caja) 28%, transparent);
}

.crm-visor-lado {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-left: 1px solid var(--crm-line);
}

.crm-visor-revision {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-height: 52px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--crm-line);
}

.crm-visor-cuenta {
  margin-left: auto;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

.crm-visor-progreso-texto {
  display: flex;
  flex-basis: 100%;
  justify-content: space-between;
  color: var(--crm-text);
  font-weight: 500;
}

.crm-visor-progreso {
  flex-basis: 100%;
  height: 4px;
  background: var(--crm-panel-3);
}

.crm-visor-progreso > span {
  display: block;
  height: 100%;
  background: var(--crm-acento);
  transition: width var(--crm-t-capa) var(--crm-curva);
}

.crm-visor-guia {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
}

.crm-visor-campos {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.crm-visor-campo {
  position: relative;
}

.crm-visor-fila,
.crm-visor-edicion {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) 40px;
  grid-template-rows: 20px 4px;
  align-items: center;
  column-gap: 12px;
  row-gap: 0;
  width: 100%;
  min-height: 36px;
  margin: 0;
  padding: 4px 16px 3px 16px;
  border: 0;
  border-bottom: 1px solid var(--crm-line);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--crm-t-color) var(--crm-snap);
}

.crm-visor-fila:hover {
  background: var(--crm-panel-2);
  transition-duration: 0ms;
}

.crm-visor-fila:focus-visible {
  outline: 1px solid var(--crm-acento);
  outline-offset: -1px;
}

.crm-visor-campo[data-activo] .crm-visor-fila {
  background: var(--crm-panel-3);
}

.crm-visor-campo[data-activo]::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--crm-acento);
}

.crm-visor-clave {
  grid-row: 1;
  overflow: hidden;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-visor-valor {
  grid-row: 1;
  overflow: hidden;
  color: var(--crm-text);
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-visor-campo[data-estado="corregido"] .crm-visor-valor {
  color: var(--crm-text);
  box-shadow: inset 2px 0 0 var(--crm-acento);
  padding-left: 6px;
}

.crm-visor-pct {
  grid-row: 1;
  justify-self: end;
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

.crm-visor-campo[data-tono="baja"] .crm-visor-pct {
  color: var(--crm-aviso);
}

.crm-visor-hecho {
  grid-row: 1;
  justify-self: end;
  width: 14px;
  height: 14px;
  color: var(--crm-acento);
}

.crm-visor-medidor {
  grid-row: 2;
  grid-column: 1 / -1;
  align-self: end;
  display: block;
  height: 4px;
  background: var(--crm-panel-3);
}

.crm-visor-medidor > span {
  display: block;
  height: 100%;
  background: var(--crm-control);
}

.crm-visor-campo[data-tono="alta"] .crm-visor-medidor > span {
  background: var(--crm-acento);
}

.crm-visor-campo[data-tono="baja"] .crm-visor-medidor > span {
  background: var(--crm-aviso);
}

.crm-visor-edicion {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) auto;
  grid-template-rows: 28px;
  cursor: default;
  background: var(--crm-panel-2);
}

.crm-visor-entrada {
  min-width: 0;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--crm-acento);
  border-radius: 0;
  background: var(--crm-panel);
  box-shadow: var(--crm-foco-halo);
  color: var(--crm-text);
  font-family: var(--crm-sans);
  font-size: 13px;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
  outline: none;
}

.crm-visor-acciones-edicion {
  display: inline-flex;
  gap: 2px;
}

.crm-visor-ayuda {
  flex: none;
  margin: 0;
  padding: 8px 16px;
  border-top: 1px solid var(--crm-line);
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
}

.crm-visor-mensaje {
  display: grid;
  flex: 1;
  place-content: center;
  justify-items: center;
  gap: 6px;
  padding: 32px 24px;
  text-align: center;
}

.crm-visor-vacio svg {
  width: 20px;
  height: 20px;
  margin-bottom: 6px;
  color: var(--crm-muted);
}

.crm-visor-vacio-titulo {
  margin: 0;
  color: var(--crm-text);
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
}

.crm-visor-vacio-texto {
  max-width: 44ch;
  margin: 0;
  color: var(--crm-muted);
}

.crm-visor-esqueleto {
  place-items: center;
}

.crm-visor-esqueleto .crm-esqueleto {
  display: block;
}

.crm-visor-esqueleto-lado {
  gap: 16px;
  padding: 16px;
}

.crm-visor-esqueleto-lado .crm-esqueleto {
  display: block;
}

/* Estrecho: el documento arriba y los campos debajo. */
@container (max-width: 719px) {
  .crm-visor-cuerpo {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  }

  .crm-visor-lado {
    border-top: 1px solid var(--crm-line);
    border-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crm-visor-progreso > span,
  .crm-visor-caja {
    transition: none;
  }
}

/* ── Llamada en vivo ────────────────────────────────────────────────── */
.crm-llamada {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--crm-line);
  background: var(--crm-panel);
  color: var(--crm-text);
  font-family: var(--crm-sans);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: -0.005em;
}

.crm-llamada-cabecera {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 16px;
  border-bottom: 1px solid var(--crm-line);
}

.crm-llamada-estado {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  color: var(--crm-acento);
  font-size: 12px;
  line-height: 16px;
}

.crm-llamada-punto {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--crm-acento);
  box-shadow: 0 0 0 2px var(--crm-acento-suave);
}

.crm-llamada-estado[data-estado="en-curso"] .crm-llamada-punto::after,
.crm-llamada-estado[data-estado="sonando"] .crm-llamada-punto::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: currentColor;
  animation: crm-latido calc(var(--crm-t-dibujo) * 2) var(--crm-curva) infinite;
}

.crm-llamada-estado[data-estado="sonando"] {
  color: var(--crm-aviso);
}

.crm-llamada-estado[data-estado="sonando"] .crm-llamada-punto {
  background: var(--crm-aviso);
  box-shadow: 0 0 0 2px var(--crm-aviso-suave);
}

.crm-llamada-estado[data-estado="en-espera"] {
  color: var(--crm-muted);
}

.crm-llamada-estado[data-estado="en-espera"] .crm-llamada-punto {
  background: transparent;
  border: 1px solid var(--crm-control);
  box-shadow: none;
}

.crm-llamada-estado[data-estado="terminada"] {
  color: var(--crm-muted);
}

.crm-llamada-estado[data-estado="terminada"] .crm-llamada-punto {
  background: var(--crm-control);
  box-shadow: none;
}

.crm-llamada-titulo {
  display: flex;
  flex: 1;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
}

.crm-llamada-titulo svg {
  align-self: center;
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--crm-aviso);
}

.crm-llamada-nombre {
  overflow: hidden;
  color: var(--crm-text);
  text-overflow: ellipsis;
}

.crm-llamada-telefono {
  color: var(--crm-muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

.crm-llamada-onda {
  flex: none;
}

.crm-llamada-onda rect {
  fill: var(--crm-serie-reposo);
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transform: scaleY(0.35);
  transition: transform var(--crm-t-capa) var(--crm-snap);
  shape-rendering: crispEdges;
}

.crm-llamada-onda[data-hablando] rect {
  fill: var(--crm-acento);
  animation: crm-llamada-onda calc(var(--crm-t-capa) * 2) var(--crm-curva) infinite alternate;
  animation-delay: calc(var(--i) * var(--crm-t-pulsar) * -1);
}

@keyframes crm-llamada-onda {
  0% {
    transform: scaleY(0.3);
  }
  100% {
    transform: scaleY(1);
  }
}

.crm-llamada-crono {
  flex: none;
  min-width: 44px;
  color: var(--crm-text);
  font-family: var(--crm-mono);
  font-size: 12px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.crm-llamada-cuerpo {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  min-height: 0;
}

.crm-llamada-transcripcion {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  margin: 0;
  padding: 16px;
  overflow-y: auto;
  list-style: none;
  outline: none;
}

.crm-llamada-transcripcion:focus-visible {
  outline: 1px solid var(--crm-acento);
  outline-offset: -1px;
}

/* Burbujas planas: filetes y radio 0; el agente, a la derecha con su filo de acento. */
.crm-llamada-turno {
  display: grid;
  gap: 2px;
  max-width: min(68ch, 82%);
  padding: 8px 12px;
  border: 1px solid var(--crm-line);
  background: var(--crm-panel-2);
  animation: crm-llamada-turno var(--crm-t-entrada) var(--crm-snap);
}

.crm-llamada-turno[data-quien="agente"] {
  align-self: flex-end;
  border-color: var(--crm-line);
  border-right: 2px solid var(--crm-acento-linea);
  background: var(--crm-panel);
}

.crm-llamada-turno[data-quien="persona"] {
  align-self: flex-end;
  border-right: 2px solid var(--crm-text-2);
  background: var(--crm-panel);
}

@keyframes crm-llamada-turno {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

.crm-llamada-quien {
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
}

.crm-llamada-texto {
  margin: 0;
  color: var(--crm-text-2);
  font-size: 14px;
  line-height: 22px;
  overflow-wrap: anywhere;
}

.crm-llamada-turno[data-parcial] .crm-llamada-texto {
  color: var(--crm-text);
}

/* Lo que aún se transcribe se escribe con la luz. */
.crm-llamada-cursor {
  display: inline-block;
  width: 24px;
  height: 2px;
  margin-left: 4px;
  vertical-align: middle;
  background: linear-gradient(90deg, transparent, var(--crm-luz), transparent) -24px 0 / 24px 100% no-repeat;
  animation: crm-llamada-luz var(--crm-t-dibujo) var(--crm-curva) infinite;
}

@keyframes crm-llamada-luz {
  to {
    background-position: 24px 0;
  }
}

.crm-llamada-silencio {
  margin: auto;
  color: var(--crm-muted);
}

.crm-llamada-lado:focus-visible {
  outline: 1px solid var(--crm-acento);
  outline-offset: -1px;
}

.crm-llamada-lado {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  border-left: 1px solid var(--crm-line);
}

.crm-llamada-seccion {
  display: grid;
  gap: 8px;
  padding: 16px;
  border-bottom: 1px solid var(--crm-line);
}

.crm-llamada-seccion-titulo {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  color: var(--crm-muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

.crm-llamada-confianza {
  color: var(--crm-text-2);
  font-family: var(--crm-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.crm-llamada-intencion {
  margin: 0;
  color: var(--crm-text);
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -0.01em;
}

.crm-llamada-intencion[data-vacia] {
  color: var(--crm-muted);
  font-weight: 400;
}

.crm-llamada-datos,
.crm-llamada-ficha {
  display: grid;
  margin: 0;
}

.crm-llamada-dato,
.crm-llamada-ficha > div {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 12px;
  min-height: 36px;
  border-bottom: 1px solid var(--crm-line);
}

.crm-llamada-dato:last-child,
.crm-llamada-ficha > div:last-child {
  border-bottom: 0;
}

.crm-llamada-datos dt,
.crm-llamada-ficha dt {
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crm-llamada-datos dd,
.crm-llamada-ficha dd {
  display: grid;
  gap: 4px;
  min-width: 0;
  margin: 0;
  color: var(--crm-text);
  font-variant-numeric: tabular-nums;
}

.crm-llamada-dato[data-vacio] dd {
  color: var(--crm-dim);
}

.crm-llamada-dato:not([data-vacio]) .crm-llamada-valor {
  animation: crm-llamada-turno var(--crm-t-entrada) var(--crm-snap);
}

.crm-llamada-valor {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-llamada-medidor {
  display: block;
  height: 4px;
  background: var(--crm-panel-3);
}

.crm-llamada-medidor > span {
  display: block;
  height: 100%;
  background: var(--crm-control);
  transition: width var(--crm-t-capa) var(--crm-curva);
}

.crm-llamada-dato[data-confirmado] .crm-llamada-medidor > span {
  background: var(--crm-acento);
}

/* Destello verde al confirmarse, una sola vez. */
.crm-llamada-dato[data-destello] {
  animation: crm-llamada-destello calc(var(--crm-t-dibujo) + var(--crm-t-capa)) var(--crm-curva);
}

@keyframes crm-llamada-destello {
  20% {
    background: var(--crm-acento-suave);
    box-shadow: inset 2px 0 0 var(--crm-acento);
  }
}

.crm-llamada-barra {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 7px 8px 8px;
  border-top: 1px solid var(--crm-line);
}

.crm-llamada-hueco {
  flex: 1;
}

@container (max-width: 639px) {
  .crm-llamada-cuerpo {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1.2fr) minmax(0, 1fr);
  }

  .crm-llamada-lado {
    border-top: 1px solid var(--crm-line);
    border-left: 0;
  }

  .crm-llamada-telefono,
  .crm-llamada-barra .crm-boton-atajo {
    display: none;
  }

  .crm-llamada-turno {
    max-width: 92%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crm-llamada-punto::after,
  .crm-llamada-onda[data-hablando] rect,
  .crm-llamada-turno,
  .crm-llamada-cursor,
  .crm-llamada-dato[data-destello],
  .crm-llamada-dato:not([data-vacio]) .crm-llamada-valor {
    animation: none;
  }

  .crm-llamada-onda[data-hablando] rect {
    transform: scaleY(0.7);
  }

  .crm-llamada-cursor {
    background: var(--crm-acento-linea);
  }
}

/* ── Parte del día ──────────────────────────────────────────────────── */
.crm-parte {
  display: grid;
  gap: 24px;
  max-width: calc(68ch + 48px);
  margin: 0 auto;
  padding: 32px 24px 40px;
  border: 1px solid var(--crm-line);
  background: var(--crm-panel);
  color: var(--crm-text);
  font-family: var(--crm-sans);
  font-size: 15.5px;
  line-height: 26px;
}

.crm-parte-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--crm-line);
}

.crm-parte-firma {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
}

.crm-parte-fecha {
  color: var(--crm-muted);
  font-size: 13px;
  line-height: 20px;
}

.crm-parte-herramientas {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.crm-parte-rotulo {
  margin: 0 0 -18px;
  color: var(--crm-acento);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crm-parte-saludo {
  margin: 0;
  color: var(--crm-text);
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.crm-parte-cifras {
  border-top: 1px solid var(--crm-line);
  border-bottom: 1px solid var(--crm-line);
}

.crm-parte-cuenta {
  font-variant-numeric: tabular-nums;
}

.crm-parte-seccion,
.crm-parte-espera {
  display: grid;
  gap: 12px;
}

.crm-parte-titulo {
  margin: 0;
  color: var(--crm-text);
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.02em;
}

.crm-parte-punto {
  max-width: 68ch;
  margin: 0;
  color: var(--crm-text-2);
  font-size: 15.5px;
  line-height: 26px;
}

.crm-parte-nota {
  margin-left: 2px;
  line-height: 0;
}

.crm-parte-nota button {
  min-width: 16px;
  height: 16px;
  margin: 0 1px;
  padding: 0 3px;
  border: 1px solid var(--crm-line-2);
  background: transparent;
  color: var(--crm-acento);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 14px;
  font-variant-numeric: tabular-nums;
  vertical-align: 2px;
  cursor: pointer;
}

.crm-parte-nota button:hover {
  border-color: var(--crm-acento-linea);
  background: var(--crm-acento-suave);
}

.crm-parte-nota button:focus-visible {
  outline: 1px solid var(--crm-acento);
  outline-offset: 2px;
}

.crm-parte-espera {
  padding: 16px 20px 20px;
  border: 1px solid var(--crm-line-2);
  border-left: 2px solid var(--crm-acento);
  background: var(--crm-panel-2);
}

.crm-parte-pendientes {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crm-parte-pendiente {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 16px 20px;
  column-gap: 16px;
  align-content: center;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--crm-line);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  line-height: 20px;
  text-align: left;
}

button.crm-parte-pendiente {
  cursor: pointer;
}

button.crm-parte-pendiente:hover .crm-parte-pendiente-titulo {
  text-decoration: underline;
  text-decoration-color: var(--crm-line-2);
  text-underline-offset: 3px;
}

button.crm-parte-pendiente:focus-visible {
  outline: 1px solid var(--crm-acento);
  outline-offset: -1px;
}

.crm-parte-pendiente-tipo {
  grid-column: 1;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
}

.crm-parte-pendiente-titulo {
  grid-column: 1;
  overflow: hidden;
  color: var(--crm-text);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-parte-pendiente-meta {
  display: grid;
  grid-column: 2;
  grid-row: 1 / 3;
  justify-items: end;
  align-content: center;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
  text-align: right;
}

.crm-parte-pendiente-meta [data-pasado] {
  color: var(--crm-error);
}

.crm-parte-cifra {
  color: var(--crm-text);
  font-size: 13px;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
}

.crm-parte-mesa {
  justify-self: start;
}

.crm-parte-notas {
  padding-top: 12px;
  border-top: 1px solid var(--crm-line);
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
}

.crm-parte-notas ol {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 24px;
  list-style: decimal;
}

.crm-parte-notas li::marker {
  color: var(--crm-acento);
  font-family: var(--crm-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.crm-parte-pie {
  margin: 0;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
}

.crm-parte-verde {
  color: var(--crm-acento);
}

@media (max-width: 599px) {
  .crm-parte {
    padding: 24px 16px 32px;
  }
}

/* Impreso: A4, márgenes de documento y sin interfaz; los colores, del tema de papel (ver 00-temas.css). */
@page {
  size: A4;
  margin: 18mm 18mm 20mm;
}

@media print {
  .crm-parte {
    max-width: none;
    padding: 0;
    border: 0;
    background: var(--crm-panel);
    font-size: 11pt;
    line-height: 1.6;
  }

  .crm-parte * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .crm-parte-herramientas,
  .crm-parte-mesa,
  .crm-kpi .crm-pq-esquina {
    display: none;
  }

  .crm-parte .crm-grupo-kpi {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  }

  .crm-parte .crm-kpi {
    padding: 12px 14px;
  }

  .crm-parte-nota button {
    border: 0;
    padding: 0;
    color: var(--crm-text);
  }

  .crm-parte-seccion,
  .crm-parte-espera,
  .crm-parte-cifras {
    break-inside: avoid;
  }

  .crm-parte-espera {
    background: transparent;
  }
}

.crm-parte-esqueleto {
  display: grid;
  gap: 16px;
}

.crm-parte-esqueleto .crm-esqueleto,
.crm-parte-esqueleto .crm-esqueleto-lineas {
  display: grid;
  gap: 10px;
}

/* ── Recorrido guiado ───────────────────────────────────────────────── */
.crm-recorrido {
  position: fixed;
  z-index: 60;
  inset: 0;
  pointer-events: none;
  font-family: var(--crm-sans);
}

/* El telón deja el hueco del objetivo: una sombra enorme alrededor de la caja recortada. */
.crm-recorrido-telon {
  position: fixed;
  border: 1px solid var(--crm-acento);
  box-shadow:
    0 0 0 4px var(--crm-acento-suave),
    0 0 0 100vmax var(--crm-telon);
  pointer-events: none;
  transition:
    top var(--crm-t-panel) var(--crm-snap),
    left var(--crm-t-panel) var(--crm-snap),
    width var(--crm-t-panel) var(--crm-snap),
    height var(--crm-t-panel) var(--crm-snap);
}

.crm-recorrido-telon[data-sin-hueco] {
  inset: 0;
  border: 0;
  background: var(--crm-telon);
  box-shadow: none;
}

.crm-recorrido-tarjeta {
  position: fixed;
  display: grid;
  gap: 12px;
  width: 320px;
  padding: 16px;
  border: 1px solid var(--crm-line-2);
  background: var(--crm-panel-2);
  box-shadow: var(--crm-sombra-capa);
  color: var(--crm-text);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: -0.005em;
  pointer-events: auto;
  outline: none;
  transition:
    top var(--crm-t-panel) var(--crm-snap),
    left var(--crm-t-panel) var(--crm-snap);
  animation: crm-recorrido-entra var(--crm-t-entrada) var(--crm-snap);
}

/* La tarjeta recibe el foco en cada paso (para el lector); su borde ya la marca. */
.crm-recorrido-tarjeta:focus-visible {
  outline: none;
  border-color: var(--crm-acento-linea);
}

@keyframes crm-recorrido-entra {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.98);
  }
}

.crm-recorrido-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.crm-recorrido-paso {
  color: var(--crm-acento);
  font-size: 12px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

.crm-recorrido-saltar {
  height: 24px;
  margin: -4px -8px -4px 0;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--crm-muted);
  font: inherit;
  font-size: 12px;
  line-height: 16px;
  cursor: pointer;
}

.crm-recorrido-saltar:hover {
  color: var(--crm-text);
}

.crm-recorrido-saltar:focus-visible {
  outline: 1px solid var(--crm-acento);
  outline-offset: 2px;
}

.crm-recorrido-progreso {
  display: flex;
  gap: 2px;
}

.crm-recorrido-progreso > span {
  flex: 1;
  height: 2px;
  background: var(--crm-line-2);
  transition: background-color var(--crm-t-panel) var(--crm-curva);
}

.crm-recorrido-progreso > span[data-hecho],
.crm-recorrido-progreso > span[data-actual] {
  background: var(--crm-acento);
}

.crm-recorrido-titulo {
  margin: 0;
  color: var(--crm-text);
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -0.01em;
}

.crm-recorrido-texto {
  color: var(--crm-text-2);
}

.crm-recorrido-texto p {
  margin: 0;
}

.crm-recorrido-atajos {
  display: grid;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.crm-recorrido-atajos li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
  border-bottom: 1px solid var(--crm-line);
}

.crm-recorrido-atajos li:last-child {
  border-bottom: 0;
}

.crm-recorrido-requiere {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 10px;
  border: 1px dashed var(--crm-acento-linea);
  color: var(--crm-text);
  font-size: 12px;
  line-height: 16px;
}

.crm-recorrido-requiere[data-hecho] {
  border-style: solid;
  background: var(--crm-acento-suave);
}

.crm-recorrido-requiere svg {
  width: 14px;
  height: 14px;
  color: var(--crm-acento);
}

.crm-recorrido-punto {
  position: relative;
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--crm-acento);
}

.crm-recorrido-punto::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--crm-acento);
  animation: crm-latido calc(var(--crm-t-dibujo) * 2) var(--crm-curva) infinite;
}

.crm-recorrido-botones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.crm-recorrido-hueco {
  flex: 1;
}

.crm-recorrido-salir {
  display: grid;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--crm-line);
  color: var(--crm-text-2);
}

.crm-recorrido-salir .crm-recorrido-botones {
  justify-content: flex-end;
}

/* Móvil: la tarjeta abajo, a todo el ancho. */
.crm-recorrido[data-movil] .crm-recorrido-tarjeta {
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  padding: 16px 16px max(16px, env(safe-area-inset-bottom));
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
}

@media (prefers-reduced-motion: reduce) {
  .crm-recorrido-telon,
  .crm-recorrido-tarjeta,
  .crm-recorrido-progreso > span {
    transition: none;
    animation: none;
  }

  .crm-recorrido-punto::after {
    animation: none;
  }
}

/*
 * Familia «bancos» (src/marca/bancos): Iban, MarcaBanco, CuentaBancaria,
 * EstadoSincronizacion, ConsentimientoBancario y ConectarBanco.
 * Solo variables --crm-*; tiempos por token; foco único (FUNDAMENTOS §7).
 * Los estados de las láminas se fuerzan con [data-crm-forzar~="hover|foco|pulsado"]
 * en un antecesor de la muestra.
 */

/* ── Iban ─────────────────────────────────────────────────────────── */

.crm-iban {
  display: inline-grid;
  grid-template-columns: minmax(0, max-content);
  row-gap: 2px;
  min-width: 0;
  max-width: 100%;
  vertical-align: top;
}

.crm-iban-linea {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 24px;
}

.crm-iban-numero {
  display: inline-flex;
  gap: 6px;
  color: var(--crm-text-2);
  font-family: var(--crm-mono);
  font-size: 13px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 20px;
  white-space: nowrap;
  transition: gap var(--crm-t-salida) var(--crm-snap);
}

/* País y control, a media voz; el centro, en pista; el final, que es lo que se reconoce, en primario. */
.crm-iban-grupo[data-lugar="primero"] {
  color: var(--crm-muted);
}

.crm-iban-grupo[data-oculto] {
  color: var(--crm-dim);
}

.crm-iban-grupo[data-lugar="ultimo"] {
  color: var(--crm-text);
}

/* Firma: al copiar, los grupos se juntan (lo copiado va sin espacios). */
.crm-iban[data-copiado] .crm-iban-numero {
  gap: 0;
  transition-duration: var(--crm-t-gesto);
}

.crm-iban[data-invalido] .crm-iban-grupo {
  color: var(--crm-text-2);
}

.crm-iban-aviso {
  flex: none;
  color: var(--crm-error);
  font-size: 12px;
  line-height: 16px;
}

.crm-iban-vacio {
  color: var(--crm-dim);
  font-size: 13px;
  line-height: 20px;
}

.crm-iban-copiar {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--crm-muted);
  cursor: pointer;
  transition:
    background-color var(--crm-t-salida) linear,
    color var(--crm-t-salida) linear;
}

.crm-iban-copiar svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.5;
}

.crm-iban-copiar:hover,
[data-crm-forzar~="hover"] .crm-iban-copiar {
  background: var(--crm-panel-2);
  color: var(--crm-text);
  transition-duration: 0ms;
}

.crm-iban-copiar:active,
[data-crm-forzar~="pulsado"] .crm-iban-copiar {
  scale: 0.96;
  transition: scale var(--crm-t-pulsar) var(--crm-snap);
}

.crm-iban-copiar:focus-visible,
[data-crm-forzar~="foco"] .crm-iban-copiar {
  outline: var(--crm-foco-ancho) solid var(--crm-acento);
  outline-offset: 2px;
}

.crm-iban[data-copiado] .crm-iban-copiar {
  color: var(--crm-acento);
}

.crm-iban-meta {
  display: flex;
  gap: 8px;
  min-width: 0;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
}

.crm-iban-meta > * {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crm-iban-meta > * + *::before {
  content: "·";
  margin-right: 8px;
  color: var(--crm-dim);
}

.crm-iban-entidad {
  display: inline-flex;
  flex: none;
  gap: 6px;
}

.crm-iban-entidad-nombre {
  color: var(--crm-text-2);
}

.crm-iban-codigo {
  color: var(--crm-dim);
  font-family: var(--crm-mono);
  font-variant-numeric: tabular-nums;
}

/* Dentro de una pieza de la familia estrecha (< 400), el IBAN oculto pasa a su forma corta. */
@container (max-width: 399px) {
  .crm-iban-grupo[data-oculto] + .crm-iban-grupo[data-oculto] {
    display: none;
  }
}

/* ── MarcaBanco ───────────────────────────────────────────────────── */

.crm-banco-marca {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  overflow: hidden;
  border: 1px solid var(--crm-line-2);
  background: var(--crm-panel-3);
  color: var(--crm-text-2);
}

.crm-banco-marca[data-tamano="pequena"] {
  width: 16px;
  height: 16px;
  border: 0;
}

.crm-banco-marca[data-tamano="grande"] {
  width: 48px;
  height: 48px;
}

/* Los logos de los bancos se dibujan para papel: lámina clara en cualquier tema (light-dark lee el color-scheme del tema). */
.crm-banco-marca[data-logo] {
  border-color: var(--crm-line);
  background: var(--crm-panel-3);
  background: light-dark(var(--crm-panel), var(--crm-text));
}

.crm-banco-marca-logo {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.crm-banco-marca[data-tamano="pequena"] .crm-banco-marca-logo {
  width: 16px;
  height: 16px;
  padding: 2px;
}

.crm-banco-marca[data-tamano="grande"] .crm-banco-marca-logo {
  width: 32px;
  height: 32px;
}

.crm-banco-marca-monograma {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 16px;
}

.crm-banco-marca-monograma[data-largo] {
  font-size: 11px;
  letter-spacing: -0.02em;
}

.crm-banco-marca[data-tamano="pequena"] .crm-banco-marca-monograma {
  font-size: 11px;
  line-height: 16px;
}

.crm-banco-marca[data-tamano="grande"] .crm-banco-marca-monograma {
  font-size: 15px;
  line-height: 22px;
}

/* ── CuentaBancaria ───────────────────────────────────────────────── */

.crm-cuenta {
  container-type: inline-size;
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--crm-line);
  background: var(--crm-panel);
  color: var(--crm-text);
}

.crm-cuenta-cuerpo {
  display: grid;
  grid-template-areas:
    "identidad saldo"
    "clase clase";
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px 24px;
  align-items: start;
}

.crm-cuenta-identidad {
  display: grid;
  grid-area: identidad;
  gap: 4px;
  min-width: 0;
}

.crm-cuenta-nombre {
  overflow: hidden;
  margin: 0;
  color: var(--crm-text);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-cuenta-saldo {
  display: grid;
  grid-area: saldo;
  gap: 6px;
  justify-items: end;
  text-align: right;
}

.crm-cuenta-cifra {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}

.crm-cuenta-cifra-numero {
  color: var(--crm-text);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 24px;
}

.crm-cuenta-cifra-unidad {
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
}

.crm-cuenta-saldo[data-sin-saldo] .crm-cuenta-cifra-numero {
  color: var(--crm-dim);
}

.crm-cuenta-fecha {
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
}

.crm-cuenta-clase {
  display: flex;
  flex-wrap: wrap;
  grid-area: clase;
  align-items: center;
  gap: 8px 12px;
  padding-top: 16px;
  border-top: 1px solid var(--crm-line);
}

.crm-cuenta-bloqueo {
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
}

.crm-cuenta-motivo {
  margin: 0;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
}

/* Excluida: baja un escalón de superficie y de tinta, con el filete discontinuo de lo que queda fuera del perímetro. Sin opacidad. */
.crm-cuenta[data-excluida] {
  border-style: dashed;
  border-color: var(--crm-line-2);
  background: var(--crm-bg);
}

.crm-cuenta[data-excluida] .crm-cuenta-nombre {
  color: var(--crm-text-2);
}

.crm-cuenta[data-excluida] :is(.crm-cuenta-cifra-numero, .crm-iban-grupo[data-lugar="ultimo"]) {
  color: var(--crm-muted);
}

.crm-cuenta[data-excluida] .crm-cuenta-cifra-unidad {
  color: var(--crm-dim);
}

/* La confirmación espera a una persona: filo de acento a la izquierda (GRAMATICA §3.6). */
.crm-cuenta-confirmar {
  display: grid;
  gap: 8px;
  padding: 12px 0 0 14px;
  border-left: 2px solid var(--crm-acento-linea);
}

.crm-cuenta-confirmar-titulo {
  margin: 0;
  color: var(--crm-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}

.crm-cuenta-efecto {
  max-width: 68ch;
  margin: 0;
  color: var(--crm-text-2);
  font-size: 13px;
  line-height: 20px;
}

.crm-cuenta-efecto-antes,
.crm-cuenta-efecto-despues {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.crm-cuenta-efecto-antes {
  color: var(--crm-muted);
}

.crm-cuenta-efecto-despues {
  color: var(--crm-text);
  font-weight: 500;
}

.crm-cuenta-confirmar-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
}

.crm-cuenta-fallo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0;
  color: var(--crm-error);
  font-size: 12px;
  line-height: 16px;
}

/* Fila: 44 (dos líneas de 20 + 24), en lista dentro de una superficie. */
.crm-cuenta[data-forma="fila"] {
  gap: 8px;
  padding: 0 16px;
  border-width: 0 0 1px;
  background: transparent;
}

.crm-cuenta[data-forma="fila"][data-excluida] {
  background: var(--crm-bg);
}

.crm-cuenta[data-forma="fila"] .crm-cuenta-cuerpo {
  grid-template-areas: "identidad saldo clase";
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  min-height: 44px;
  gap: 0 24px;
}

.crm-cuenta[data-forma="fila"] .crm-cuenta-identidad {
  gap: 0;
}

.crm-cuenta[data-forma="fila"] .crm-cuenta-nombre {
  font-size: 13px;
  letter-spacing: -0.005em;
  line-height: 20px;
}

/* En fila, el IBAN y su entidad van en una línea. */
.crm-cuenta[data-forma="fila"] .crm-iban {
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
}

.crm-cuenta[data-forma="fila"] .crm-cuenta-saldo {
  gap: 0;
}

.crm-cuenta[data-forma="fila"] .crm-cuenta-cifra-numero {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 20px;
}

.crm-cuenta[data-forma="fila"] .crm-cuenta-cifra-unidad {
  font-size: 13px;
  line-height: 20px;
}

.crm-cuenta[data-forma="fila"] .crm-cuenta-clase {
  flex-wrap: nowrap;
  padding: 0;
  border: 0;
}

.crm-cuenta[data-forma="fila"] :is(.crm-cuenta-motivo, .crm-cuenta-confirmar, .crm-cuenta-fallo) {
  margin-bottom: 12px;
}

@container (max-width: 719px) {
  .crm-cuenta[data-forma="fila"] .crm-cuenta-cuerpo {
    grid-template-areas:
      "identidad saldo"
      "clase clase";
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 16px;
    padding-block: 12px;
  }

  .crm-cuenta[data-forma="fila"] .crm-iban {
    grid-template-columns: minmax(0, max-content);
  }
}

@container (max-width: 399px) {
  .crm-cuenta-cuerpo,
  .crm-cuenta[data-forma="fila"] .crm-cuenta-cuerpo {
    grid-template-areas:
      "identidad"
      "saldo"
      "clase";
    grid-template-columns: minmax(0, 1fr);
  }

  .crm-cuenta-saldo {
    justify-items: start;
    text-align: left;
  }
}

/* ── EstadoSincronizacion ─────────────────────────────────────────── */

.crm-sincro {
  container-type: inline-size;
  display: grid;
  gap: 8px;
  min-width: 0;
  color: var(--crm-text);
}

.crm-sincro-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  min-height: 32px;
}

.crm-sincro-estado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  min-width: 0;
}

.crm-sincro-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
  min-width: 0;
  color: var(--crm-muted);
  font-size: 13px;
  line-height: 20px;
}

.crm-sincro-meta > * + *::before {
  content: "·";
  margin-right: 8px;
  color: var(--crm-dim);
}

.crm-sincro-manual {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
}

.crm-sincro-cupo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
}

/* Firma: el cupo manual, dos marcas que se gastan de arriba abajo. */
.crm-cupo-marcas {
  display: inline-flex;
  flex: none;
  gap: 4px;
}

.crm-cupo-marca {
  position: relative;
  width: 4px;
  height: 14px;
  border: 1px solid var(--crm-linea-apagada);
}

.crm-cupo-marca::after {
  content: "";
  position: absolute;
  inset: -1px;
  background: var(--crm-text-2);
  transform-origin: bottom;
  transition: scale var(--crm-t-gesto) var(--crm-snap);
}

.crm-cupo-marca[data-gastada]::after {
  scale: 1 0;
}

.crm-cupo-marcas[data-desconocido] .crm-cupo-marca {
  border-color: var(--crm-line);
}

.crm-cupo-marcas[data-desconocido] .crm-cupo-marca::after {
  background: var(--crm-esqueleto-b);
}

.crm-sincro[data-estado="en-curso"] .crm-cupo-marca::after {
  background: var(--crm-text);
}

/* La línea de debajo: solo si algo no va. Filete de 2 px del tono, sin caja. */
.crm-sincro-nota {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: start;
  gap: 4px 8px;
  padding-left: 12px;
  border-left: 2px solid var(--crm-line-2);
}

.crm-sincro[data-estado="limitada"] .crm-sincro-nota {
  border-left-color: var(--crm-aviso-linea);
}

.crm-sincro:is([data-estado="error"], [data-estado="caducada"]) .crm-sincro-nota {
  border-left-color: var(--crm-error-linea);
}

.crm-sincro-nota-icono {
  display: grid;
  place-items: center;
  height: 20px;
  color: var(--crm-muted);
}

.crm-sincro-nota-icono svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.6;
}

.crm-sincro[data-estado="limitada"] .crm-sincro-nota-icono {
  color: var(--crm-aviso);
}

.crm-sincro:is([data-estado="error"], [data-estado="caducada"]) .crm-sincro-nota-icono {
  color: var(--crm-error);
}

.crm-sincro-nota-texto {
  max-width: 68ch;
  margin: 0;
  color: var(--crm-text-2);
  font-size: 13px;
  line-height: 20px;
}

.crm-sincro-nota-accion {
  display: flex;
  margin-top: -4px;
}

@container (max-width: 559px) {
  .crm-sincro-fila {
    flex-direction: column;
    align-items: stretch;
  }

  .crm-sincro-manual {
    justify-content: space-between;
  }

  .crm-sincro-nota {
    grid-template-columns: 16px minmax(0, 1fr);
  }

  .crm-sincro-nota-accion {
    grid-column: 2;
    margin-top: 4px;
  }
}

@container (max-width: 399px) {
  .crm-sincro-meta {
    display: grid;
  }

  .crm-sincro-meta > * + *::before {
    content: none;
  }
}

/* ── ConsentimientoBancario ───────────────────────────────────────── */

.crm-sello-zona {
  display: inline-grid;
  justify-items: start;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
}

/* Firma: el doble filete del sello (fuera 1 px; dentro, a 2 px). */
.crm-sello {
  position: relative;
  display: grid;
  gap: 4px;
  min-width: 240px;
  max-width: 100%;
  padding: 16px 20px 20px;
  border: 1px solid var(--crm-line-2);
  background: var(--crm-panel);
}

.crm-sello::before {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1px solid var(--crm-line);
  pointer-events: none;
}

.crm-sello-rotulo {
  overflow: hidden;
  margin: 0;
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  line-height: 16px;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.crm-sello-cifra {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 4px 0 0;
}

.crm-sello-numero {
  color: var(--crm-text);
  font-size: 28px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 32px;
}

.crm-sello-unidad {
  color: var(--crm-muted);
  font-size: 16px;
  line-height: 20px;
}

.crm-sello-pie {
  margin: 0;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
}

/* Regla de la duración: lo que queda, de izquierda a derecha; marcas de mes. */
.crm-sello-regla {
  position: relative;
  height: 2px;
  margin-top: 12px;
  background: var(--crm-line-2);
}

.crm-sello-regla::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--crm-sello-resto, 1) * 100%);
  background: var(--crm-text-2);
}

.crm-sello-mes {
  position: absolute;
  top: -2px;
  left: calc(var(--crm-sello-mes) * 100%);
  width: 1px;
  height: 6px;
  background: var(--crm-panel);
  box-shadow: inset 0 0 0 1px var(--crm-line-2);
}

.crm-sello-zona[data-estado="por-caducar"] .crm-sello {
  border-color: var(--crm-aviso-linea);
}

.crm-sello-zona[data-estado="por-caducar"] .crm-sello-numero {
  color: var(--crm-aviso);
}

.crm-sello-zona[data-estado="por-caducar"] .crm-sello-regla::before {
  background: var(--crm-aviso);
}

.crm-sello-zona[data-estado="caducada"] .crm-sello {
  border-color: var(--crm-error-linea);
}

.crm-sello-zona[data-estado="caducada"] .crm-sello-numero {
  color: var(--crm-error);
}

.crm-sello-zona[data-estado="sin-fecha"] .crm-sello-numero {
  color: var(--crm-dim);
}

.crm-sello-renovar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.crm-sello-renovar-nota {
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
}

/* ── ConectarBanco (modo foco) ────────────────────────────────────── */

.crm-conectar-marco {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 640px;
  border: 1px solid var(--crm-line);
  background: var(--crm-bg);
  color: var(--crm-text);
  font-family: var(--crm-sans);
}

.crm-conectar-marco[data-pantalla-completa] {
  position: fixed;
  z-index: 41;
  inset: 0;
  min-height: 0;
  overflow-y: auto;
  border: 0;
}

.crm-conectar-marco:focus-visible {
  outline: none;
}

.crm-conectar {
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 100%;
}

.crm-conectar-cabecera {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 768px) minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  padding: 12px 24px;
}

.crm-conectar-cabecera .crm-conectar-pasos {
  grid-column: 2;
}

.crm-conectar-salir {
  grid-column: 3;
  justify-self: end;
}

/* Barra de pasos con nombre: se llena de verde tramo a tramo. */
.crm-conectar-pasos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crm-conectar-paso {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.crm-conectar-paso-tramo {
  height: 2px;
  background: var(--crm-line-2);
  transition: background-color var(--crm-t-gesto) var(--crm-snap);
}

.crm-conectar-paso[data-estado="actual"] .crm-conectar-paso-tramo {
  background: var(--crm-text-2);
}

.crm-conectar-paso[data-estado="hecho"] .crm-conectar-paso-tramo {
  background: var(--crm-acento);
}

.crm-conectar-paso-nombre {
  overflow: hidden;
  color: var(--crm-dim);
  font-size: 12px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-conectar-paso[data-estado="actual"] .crm-conectar-paso-nombre {
  color: var(--crm-text);
}

.crm-conectar-paso[data-estado="hecho"] .crm-conectar-paso-nombre {
  color: var(--crm-muted);
}

/*
 * La pregunta, en el centro óptico (un poco por encima del geométrico) y en
 * píxel entero: el centrado exacto deja medio píxel cuando el hueco es impar,
 * así que el aire de arriba se redondea a la rejilla de 4.
 */
.crm-conectar-centro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  justify-items: center;
  gap: 32px;
  padding: 40px 24px;
  padding-top: max(40px, round(down, 12vh, 4px));
}

.crm-conectar-centro > * {
  width: min(768px, 100%);
}

.crm-conectar-pregunta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  text-align: center;
}

.crm-conectar-titulo {
  margin: 0;
  color: var(--crm-text);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 34px;
  text-wrap: balance;
}

.crm-conectar-ayuda {
  max-width: 68ch;
  margin: 0 auto;
  color: var(--crm-muted);
  font-size: 15px;
  line-height: 24px;
  text-wrap: pretty;
}

.crm-conectar-rotulo {
  overflow: hidden;
  margin: 0;
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  line-height: 16px;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Buscador de bancos: el campo es la única parada; las flechas recorren la lista. */
.crm-conectar-buscador {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.crm-conectar-lista {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid var(--crm-line);
  background: var(--crm-panel);
}

.crm-conectar-lista:empty {
  display: none;
}

.crm-conectar-lista .crm-conectar-rotulo {
  padding: 12px 16px 4px;
}

.crm-conectar-banco {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 12px;
  position: relative;
  min-height: 64px;
  padding: 0 16px;
  cursor: pointer;
  transition: background-color var(--crm-t-salida) linear;
}

/* El filete entre filas, por encima y fuera del contenido: la fila mide 64 y su cara cae en píxel entero. */
.crm-conectar-banco + .crm-conectar-banco::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--crm-line);
}

.crm-conectar-banco[aria-selected="true"] {
  background: var(--crm-panel-2);
  transition-duration: 0ms;
}

.crm-conectar-banco-texto {
  display: grid;
  min-width: 0;
}

.crm-conectar-banco-nombre {
  overflow: hidden;
  color: var(--crm-text);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-conectar-banco-meta {
  display: flex;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
}

.crm-conectar-banco-meta > :last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.crm-conectar-banco-codigo {
  color: var(--crm-dim);
  font-family: var(--crm-mono);
  font-variant-numeric: tabular-nums;
}

.crm-conectar-banco-flecha,
.crm-conectar-ficha-flecha {
  width: 16px;
  height: 16px;
  color: var(--crm-dim);
  stroke-width: 1.6;
  transition:
    translate var(--crm-t-gesto) var(--crm-snap),
    color var(--crm-t-salida) linear;
}

.crm-conectar-banco[aria-selected="true"] .crm-conectar-banco-flecha {
  color: var(--crm-text);
  translate: 2px 0;
}

.crm-conectar-cargando {
  display: grid;
  gap: 1px;
}

/* Fichas de titular: grandes, avanzan solas al elegir. */
.crm-conectar-fichas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.crm-conectar-ficha {
  display: grid;
  grid-template-areas:
    "icono flecha"
    "titulo titulo"
    "detalle detalle";
  grid-template-columns: minmax(0, 1fr) 16px;
  align-content: start;
  gap: 8px;
  margin: 0;
  padding: 20px;
  border: 1px solid var(--crm-line-2);
  border-radius: 0;
  background: var(--crm-panel);
  color: var(--crm-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    background-color var(--crm-t-salida) linear,
    border-color var(--crm-t-salida) linear;
}

.crm-conectar-ficha-icono {
  display: grid;
  grid-area: icono;
  place-items: center start;
  height: 20px;
  color: var(--crm-muted);
}

.crm-conectar-ficha-icono svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.6;
}

.crm-conectar-ficha-flecha {
  grid-area: flecha;
  align-self: center;
}

.crm-conectar-ficha-titulo {
  grid-area: titulo;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 22px;
}

.crm-conectar-ficha-detalle {
  grid-area: detalle;
  color: var(--crm-muted);
  font-size: 13px;
  line-height: 20px;
}

.crm-conectar-ficha:hover,
[data-crm-forzar~="hover"] .crm-conectar-ficha {
  border-color: var(--crm-control);
  background: var(--crm-panel-2);
  transition-duration: 0ms;
}

.crm-conectar-ficha:is(:hover, :focus-visible) .crm-conectar-ficha-flecha,
[data-crm-forzar~="hover"] .crm-conectar-ficha .crm-conectar-ficha-flecha {
  color: var(--crm-text);
  translate: 2px 0;
}

.crm-conectar-ficha:active,
[data-crm-forzar~="pulsado"] .crm-conectar-ficha {
  background: var(--crm-panel-3);
  translate: 0 0.5px;
}

.crm-conectar-ficha:focus-visible,
[data-crm-forzar~="foco"] .crm-conectar-ficha {
  outline: var(--crm-foco-ancho) solid var(--crm-acento);
  outline-offset: 2px;
}

.crm-conectar-ficha[aria-checked="true"] {
  border-color: var(--crm-line-2);
  background: var(--crm-panel-3);
  box-shadow: inset 2px 0 0 var(--crm-acento);
}

.crm-conectar-ficha[aria-disabled="true"] {
  border-color: var(--crm-linea-apagada);
  background: transparent;
  color: var(--crm-dim);
  cursor: not-allowed;
}

.crm-conectar-ficha[aria-disabled="true"] :is(.crm-conectar-ficha-icono, .crm-conectar-ficha-detalle) {
  color: var(--crm-dim);
}

/* Autorizar y esperar. */
.crm-conectar-autorizar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 24px;
}

/* Firma: el puente entre la C y el banco. */
.crm-conectar-puente {
  display: grid;
  grid-template-columns: 48px minmax(64px, 1fr) 48px;
  align-items: center;
  width: min(336px, 100%);
}

.crm-conectar-puente-c {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--crm-line-2);
  background: var(--crm-panel);
}

/* El isotipo (2179 × 1000) a 26 × 12: la C de la casa en la tinta del tema. */
.crm-conectar-puente-iso {
  width: 26px;
  height: 12px;
  background: var(--crm-text);
  -webkit-mask: var(--crm-isotipo) center / contain no-repeat;
  mask: var(--crm-isotipo) center / contain no-repeat;
}

.crm-conectar-puente-linea {
  display: flex;
  min-width: 0;
  height: 24px;
}

/* Un tramo de 1 px en la fila 12 de los 24: nunca en medio píxel. */
.crm-conectar-puente-tramo {
  position: relative;
  flex: 1;
  box-sizing: border-box;
  height: 1px;
  margin-top: 11px;
  border-top: 1px dashed var(--crm-line-2);
}

.crm-conectar-puente[data-estado="esperando"] .crm-conectar-puente-tramo {
  border-top-style: solid;
}

/* Mientras te esperamos, una corriente de luz va de la C al banco (el filo continuo de la casa, a ritmo de corriente). */
.crm-conectar-puente[data-estado="esperando"] .crm-conectar-puente-tramo::after {
  content: "";
  position: absolute;
  inset: -1px 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--crm-luz) 50%, transparent) no-repeat;
  background-position: -40% 0;
  background-size: 40% 100%;
  animation: crm-filo-continuo var(--crm-t-corriente) linear infinite;
}

.crm-conectar-puente[data-estado="hecho"] .crm-conectar-puente-tramo {
  border-top: 1px solid var(--crm-acento);
}

.crm-conectar-puente[data-estado="fallo"] .crm-conectar-puente-tramo {
  border-top-color: var(--crm-error-linea);
}

.crm-conectar-puente-visto {
  display: grid;
  flex: none;
  place-items: center;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  border: 1px solid var(--crm-acento);
  background: var(--crm-bg);
}

.crm-conectar-notas {
  display: grid;
  justify-items: center;
  gap: 8px;
}

.crm-conectar-guia {
  display: grid;
  gap: 12px;
  width: min(440px, 100%);
  margin: 0;
  padding: 0;
  list-style: none;
}

.crm-conectar-guia li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  color: var(--crm-text-2);
  font-size: 15px;
  line-height: 24px;
}

.crm-conectar-guia-num {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--crm-line-2);
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 16px;
}

.crm-conectar-guia-con-icono {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.crm-conectar-guia-con-icono svg {
  width: 16px;
  height: 16px;
  color: var(--crm-muted);
  stroke-width: 1.6;
}

.crm-conectar-guia[data-esperando] li {
  color: var(--crm-muted);
}

.crm-conectar-garantia,
.crm-conectar-nota {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 68ch;
  margin: 0;
  color: var(--crm-muted);
  font-size: 13px;
  line-height: 20px;
  text-align: center;
}

.crm-conectar-garantia svg {
  flex: none;
  width: 14px;
  height: 14px;
  stroke-width: 1.5;
}

/* Hecho: el visto que se dibuja una vez, la cifra que importa y el resguardo. */
.crm-conectar-hecho {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 32px;
}

.crm-conectar-celebracion {
  display: grid;
  justify-items: center;
  gap: 16px;
}

.crm-conectar-visto {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--crm-acento);
  stroke-linecap: square;
  stroke-width: 1.6;
}

.crm-conectar-visto path {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  animation: crm-conectar-visto var(--crm-t-dibujo) var(--crm-curva) both;
}

.crm-conectar-cifra {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}

.crm-conectar-cifra-numero {
  color: var(--crm-text);
  font-size: 40px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 44px;
}

.crm-conectar-cifra-unidad {
  color: var(--crm-muted);
  font-size: 24px;
  line-height: 28px;
}

.crm-conectar-resguardo {
  display: grid;
  gap: 12px;
  width: min(480px, 100%);
  padding: 20px;
  border: 1px solid var(--crm-line);
  background: var(--crm-panel);
}

.crm-conectar-resguardo-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.crm-conectar-resguardo-lineas {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crm-conectar-resguardo-linea {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px dashed var(--crm-line-2);
}

.crm-conectar-resguardo-cuenta {
  display: grid;
  min-width: 0;
}

.crm-conectar-resguardo-nombre {
  overflow: hidden;
  color: var(--crm-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-conectar-resguardo-importe {
  color: var(--crm-text);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  line-height: 20px;
  white-space: nowrap;
}

.crm-conectar-resguardo-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--crm-line-2);
  color: var(--crm-muted);
  font-size: 13px;
  line-height: 20px;
}

.crm-conectar-resguardo-total-cifra {
  color: var(--crm-text);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 24px;
  white-space: nowrap;
}

.crm-conectar-resguardo-pie {
  margin: 0;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
}

/* Pie: el mismo ancho que la pregunta; «Atrás» a la izquierda, una sola principal a la derecha. */
.crm-conectar-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: min(768px, calc(100% - 48px));
  margin: 0 auto;
  padding: 16px 0 24px;
  border-top: 1px solid var(--crm-line);
}

.crm-conectar-pie-izquierda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.crm-conectar-planb {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 4px;
  min-width: 0;
}

.crm-conectar-planb-pregunta {
  color: var(--crm-muted);
  font-size: 13px;
  line-height: 20px;
}

.crm-conectar-pie-derecha {
  display: flex;
  flex: none;
}

.crm-conectar-pie:not(:has(.crm-boton)) {
  border-top-color: transparent;
}

@container (max-width: 1023px) {
  .crm-conectar-cabecera {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .crm-conectar-cabecera .crm-conectar-pasos {
    grid-column: 1;
  }

  .crm-conectar-salir {
    grid-column: 2;
  }
}

@container (max-width: 719px) {
  .crm-conectar-cabecera {
    padding: 12px 16px;
  }

  .crm-conectar-centro {
    align-content: start;
    gap: 24px;
    padding: 24px 16px;
  }

  .crm-conectar-titulo {
    font-size: 24px;
    line-height: 32px;
  }

  .crm-conectar-pie {
    width: calc(100% - 32px);
  }
}

@container (max-width: 559px) {
  .crm-conectar-fichas {
    grid-template-columns: minmax(0, 1fr);
  }

  .crm-conectar-pie {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .crm-conectar-pie-derecha,
  .crm-conectar-pie-derecha .crm-boton {
    width: 100%;
  }

  .crm-conectar-pie-izquierda {
    justify-content: center;
  }

  .crm-conectar-banco {
    grid-template-columns: 32px minmax(0, 1fr) auto;
  }

  .crm-conectar-banco-flecha {
    display: none;
  }
}

@container (max-width: 399px) {
  .crm-conectar-paso:not([data-estado="actual"]) .crm-conectar-paso-nombre {
    visibility: hidden;
  }

  .crm-conectar-paso[data-estado="actual"] .crm-conectar-paso-nombre {
    overflow: visible;
  }

  .crm-conectar-salir .crm-boton-texto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .crm-conectar-resguardo {
    padding: 16px;
  }
}

@keyframes crm-conectar-visto {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* ── Movimiento reducido, impresión y estático: solo color ────────── */

@media (prefers-reduced-motion: reduce) {
  .crm-iban-numero,
  .crm-iban[data-copiado] .crm-iban-numero {
    gap: 6px;
    transition: none;
  }

  .crm-cupo-marca::after,
  .crm-conectar-paso-tramo,
  .crm-conectar-banco-flecha,
  .crm-conectar-ficha-flecha {
    transition: none;
  }

  .crm-conectar-banco[aria-selected="true"] .crm-conectar-banco-flecha,
  .crm-conectar-ficha:is(:hover, :focus-visible) .crm-conectar-ficha-flecha {
    translate: none;
  }

  .crm-conectar-puente[data-estado="esperando"] .crm-conectar-puente-tramo {
    border-top-color: var(--crm-acento-linea);
  }

  .crm-conectar-puente[data-estado="esperando"] .crm-conectar-puente-tramo::after {
    content: none;
  }

  .crm-conectar-visto path {
    animation: none;
  }
}

@media print {
  .crm-conectar-puente[data-estado="esperando"] .crm-conectar-puente-tramo::after {
    content: none;
  }

  .crm-conectar-visto path {
    animation: none;
  }
}

:where([data-crm-estatico]) .crm-conectar-visto path {
  animation: none;
}

:where([data-crm-estatico]) .crm-conectar-puente[data-estado="esperando"] .crm-conectar-puente-tramo {
  border-top-color: var(--crm-acento-linea);
}

:where([data-crm-estatico]) .crm-conectar-puente[data-estado="esperando"] .crm-conectar-puente-tramo::after {
  content: none;
}

/* ── Colores forzados (contraste de Windows) ──────────────────────── */

@media (forced-colors: active) {
  .crm-cupo-marca::after {
    background: CanvasText;
  }

  .crm-cupo-marca[data-gastada]::after {
    scale: 1 0;
  }

  .crm-sello-regla::before,
  .crm-conectar-paso[data-estado="hecho"] .crm-conectar-paso-tramo {
    background: Highlight;
  }

  .crm-conectar-puente-iso {
    background: CanvasText;
  }

  .crm-conectar-ficha[aria-checked="true"] {
    outline: 2px solid Highlight;
  }
}

/*
 * Conector «bancos · identidad»: FichaBanco, SelectorBancos y BancoElegido.
 * Solo variables --crm-*; tiempos por token; foco único (FUNDAMENTOS §7).
 * La marca de cada banco es la de MarcaBanco (60-bancos.css), intacta: aquí
 * solo se le da contexto, una placa horizontal (.crm-bid-placa), porque los
 * logos de los bancos son palabras anchas y en un cuadrado no se leen.
 * Estados forzados para las láminas: [data-crm-forzar~="hover|foco|pulsado"].
 */

/* ── Placa: el contexto horizontal de MarcaBanco ─────────────────────── */

.crm-bid-placa {
  display: block;
  grid-area: placa;
  min-width: 0;
}

.crm-bid-placa .crm-banco-marca[data-tamano] {
  display: grid;
  width: 100%;
  height: 64px;
}

/* El logo cabe en una caja de altura óptica fija: las palabras anchas y los símbolos cuadrados pesan parecido. */
.crm-bid-placa .crm-banco-marca[data-tamano] .crm-banco-marca-logo {
  width: min(160px, calc(100% - 32px));
  height: 28px;
  padding: 0;
  object-fit: contain;
}

.crm-bid-placa .crm-banco-marca[data-tamano] .crm-banco-marca-monograma {
  font-size: 20px;
  line-height: 28px;
}

.crm-bid-placa[data-forma="fila"] {
  flex: none;
  width: 96px;
}

.crm-bid-placa[data-forma="fila"] .crm-banco-marca[data-tamano] {
  height: 48px;
}

.crm-bid-placa[data-forma="fila"] .crm-banco-marca[data-tamano] .crm-banco-marca-logo {
  width: 72px;
  height: 24px;
}

.crm-bid-placa[data-forma="fila"] .crm-banco-marca[data-tamano] .crm-banco-marca-monograma {
  font-size: 15px;
  line-height: 22px;
}

.crm-bid-placa[data-forma="resumen"] .crm-banco-marca[data-tamano] {
  height: 96px;
}

.crm-bid-placa[data-forma="resumen"] .crm-banco-marca[data-tamano] .crm-banco-marca-logo {
  width: min(200px, calc(100% - 48px));
  height: 40px;
}

.crm-bid-placa[data-forma="resumen"] .crm-banco-marca[data-tamano] .crm-banco-marca-monograma {
  font-size: 28px;
  line-height: 34px;
}

/* ── Firma: la entidad en su sitio del IBAN ──────────────────────────── */

.crm-bid-iban {
  display: inline-flex;
  flex: none;
  font-family: var(--crm-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 16px;
}

.crm-bid-iban > [aria-hidden] {
  display: inline-flex;
  gap: 4px;
}

.crm-bid-iban-oculto {
  color: var(--crm-dim);
}

.crm-bid-iban-codigo {
  color: var(--crm-text-2);
}

.crm-bid-iban[data-resaltar] .crm-bid-iban-codigo {
  color: var(--crm-text);
  text-decoration: underline 1px;
  text-underline-offset: 4px;
}

/* ── Firma: la matrícula de la cuenta (IBAN pegado en el buscador) ────── */

/*
 * Seis celdas con filete, como las casillas de una libreta: valor en mono
 * 13/20 y su nombre debajo en rótulo mono 11 (una sola línea en mayúsculas
 * en el bloque). Solo «ES» y la entidad se escriben; lo demás, tapado en
 * pista. La entidad reconocida lleva un filete de acento de 2 px debajo, por
 * pseudoelemento dentro de su celda: sin sombra, sin color nuevo.
 */
.crm-bid-matricula-marco {
  container-type: inline-size;
  display: block;
  width: 100%;
  min-width: 0;
}

.crm-bid-matricula {
  display: inline-grid;
  grid-auto-columns: auto;
  grid-auto-flow: column;
  justify-self: start;
  max-width: 100%;
  gap: 1px;
  border: 1px solid var(--crm-line-2);
  /* Los filetes entre casillas son el hueco de 1 px sobre el color de línea: iguales en una fila o en dos. */
  background: var(--crm-line);
}

.crm-bid-matricula-celda {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 8px 12px;
  background: var(--crm-panel);
}

.crm-bid-matricula-valor {
  color: var(--crm-dim);
  font-family: var(--crm-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 20px;
  white-space: nowrap;
}

.crm-bid-matricula-celda[data-pieza="pais"] .crm-bid-matricula-valor {
  color: var(--crm-muted);
}

.crm-bid-matricula-rotulo {
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  line-height: 16px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* La entidad: la casilla que importa. */
.crm-bid-matricula-celda[data-pieza="entidad"] {
  background: var(--crm-panel-2);
}

.crm-bid-matricula-celda[data-con-valor] .crm-bid-matricula-valor {
  color: var(--crm-text-2);
}

.crm-bid-matricula[data-estado="reconocido"] .crm-bid-matricula-celda[data-pieza="entidad"] .crm-bid-matricula-valor {
  color: var(--crm-text);
}

.crm-bid-matricula[data-estado="reconocido"] .crm-bid-matricula-celda[data-pieza="entidad"] .crm-bid-matricula-rotulo {
  color: var(--crm-acento);
}

.crm-bid-matricula[data-estado="reconocido"] .crm-bid-matricula-celda[data-pieza="entidad"]::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: var(--crm-acento);
  pointer-events: none;
}

/* Estrecha: dos filas de tres casillas. */
@container (max-width: 559px) {
  .crm-bid-matricula {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, auto);
  }
}

.crm-bid-iban-nota {
  max-width: 68ch;
  margin: 0;
  color: var(--crm-muted);
  font-size: 13px;
  line-height: 20px;
  text-wrap: pretty;
}

.crm-bid-iban-nota[data-tono="hecho"] {
  color: var(--crm-text-2);
}

.crm-bid-iban-nota[data-tono="error"] {
  color: var(--crm-error);
}

/* ── FichaBanco ───────────────────────────────────────────────────────── */

.crm-bid-ficha {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--crm-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    background-color var(--crm-t-salida) linear,
    border-color var(--crm-t-salida) linear;
}

.crm-bid-ficha[data-solo-lectura] {
  cursor: default;
}

.crm-bid-ficha-texto {
  display: grid;
  grid-area: texto;
  gap: 2px;
  min-width: 0;
}

.crm-bid-ficha-nombre {
  overflow: hidden;
  color: var(--crm-text);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-bid-ficha-meta {
  display: flex;
  gap: 8px;
  min-width: 0;
  min-height: 16px;
  overflow: hidden;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
}

.crm-bid-ficha-meta > :not(.crm-bid-iban) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crm-bid-ficha-meta > * + *::before {
  content: "·";
  margin-right: 8px;
  color: var(--crm-dim);
}

.crm-bid-ficha-etiqueta {
  grid-area: etiqueta;
  flex: none;
}

.crm-bid-ficha-icono {
  grid-area: icono;
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--crm-dim);
  stroke-width: 1.6;
  transition:
    translate var(--crm-t-gesto) var(--crm-snap),
    color var(--crm-t-salida) linear;
}

.crm-bid-ficha-icono[data-visto] {
  color: var(--crm-acento);
}

/* Placa: la marca en grande, el nombre y la meta debajo. 168 de alto con su filete (140 a menos de 400). */
.crm-bid-ficha[data-forma="placa"] {
  display: grid;
  grid-template-areas:
    "placa placa"
    "texto icono";
  grid-template-columns: minmax(0, 1fr) 16px;
  row-gap: 12px;
  column-gap: 8px;
  height: 100%;
  padding: 16px;
  border: 1px solid var(--crm-line);
  background: var(--crm-panel);
}

/* En la placa, la meta va en dos líneas fijas (firma arriba, para quién o por qué no debajo): nada se corta a 4 columnas y todas miden 168. */
.crm-bid-ficha[data-forma="placa"] .crm-bid-ficha-meta {
  display: grid;
  gap: 2px;
  min-height: 34px;
}

.crm-bid-ficha[data-forma="placa"] .crm-bid-ficha-meta > * + *::before {
  content: none;
}

.crm-bid-ficha[data-forma="placa"] .crm-bid-ficha-meta > :not(.crm-bid-iban) {
  white-space: nowrap;
}

/* En la fila, el motivo de «no disponible» refluye: es lo que hay que leer. */
.crm-bid-ficha[data-forma="fila"][aria-disabled="true"] .crm-bid-ficha-meta {
  flex-wrap: wrap;
  row-gap: 2px;
  white-space: normal;
}

.crm-bid-ficha[data-forma="placa"] .crm-bid-ficha-icono {
  align-self: start;
  margin-block: 3px;
}

.crm-bid-ficha-pruebas {
  color: var(--crm-aviso);
}

/* Fila: 64 de alto, la placa a 96 × 48, el texto y la flecha. */
.crm-bid-ficha[data-forma="fila"] {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 8px 16px 8px 8px;
}

.crm-bid-ficha[data-forma="fila"] .crm-bid-ficha-texto {
  flex: 1;
}

/*
 * Fila con «En pruebas» (solo esas): es su propio contenedor, porque la ficha
 * también se usa suelta, fuera de SelectorBancos. Con menos de 400 de fila,
 * la etiqueta baja a una segunda línea, alineada bajo el texto, en vez de
 * quitarle el ancho: la firma («ES•• 3081 ••••») cabe entera y no se recorta
 * en seco. El orden del DOM no cambia (la flecha es decorativa). Las demás
 * filas no cambian de contexto ni de alto.
 */
.crm-bid-ficha[data-forma="fila"]:has(> .crm-bid-ficha-etiqueta) {
  container: crm-bid-fila / inline-size;
  flex-wrap: wrap;
  row-gap: 4px;
}

/* La consulta mide la caja de contenido: 375 = 399 de fila menos sus 8 + 16 de relleno. */
@container crm-bid-fila (max-width: 375px) {
  /* Placa 80 (la de < 400), flecha 16 y dos huecos de 16 como mucho: el texto llena la línea y la etiqueta ya no cabe en ella. */
  .crm-bid-ficha[data-forma="fila"] > .crm-bid-ficha-texto {
    flex-basis: calc(100% - 128px);
  }

  .crm-bid-ficha[data-forma="fila"] > .crm-bid-ficha-icono {
    order: 1;
  }

  /* Bajo el texto: placa de 80 y el hueco de la fila en SelectorBancos a < 400 (12). */
  .crm-bid-ficha[data-forma="fila"] > .crm-bid-ficha-etiqueta {
    order: 2;
    margin-left: 92px;
  }
}

/* Hover: un escalón de superficie, al instante; la flecha avanza 2 px. */
.crm-bid-ficha:not([data-solo-lectura], [aria-disabled="true"]):hover,
[data-crm-forzar~="hover"] .crm-bid-ficha:not([data-solo-lectura], [aria-disabled="true"]) {
  background: var(--crm-panel-2);
  transition-duration: 0ms;
}

.crm-bid-ficha[data-forma="placa"]:not([data-solo-lectura], [aria-disabled="true"]):hover,
[data-crm-forzar~="hover"] .crm-bid-ficha[data-forma="placa"]:not([data-solo-lectura], [aria-disabled="true"]) {
  border-color: var(--crm-control);
}

.crm-bid-ficha:not([aria-disabled="true"]):is(:hover, :focus-visible) .crm-bid-ficha-icono:not([data-visto]),
[data-crm-forzar~="hover"] .crm-bid-ficha .crm-bid-ficha-icono:not([data-visto]) {
  color: var(--crm-text);
  translate: 2px 0;
}

.crm-bid-ficha:not([data-solo-lectura], [aria-disabled="true"]):active,
[data-crm-forzar~="pulsado"] .crm-bid-ficha:not([data-solo-lectura], [aria-disabled="true"]) {
  background: var(--crm-panel-3);
}

/* Foco: la placa es un control (anillo fuera); la fila vive en una lista (anillo dentro). */
.crm-bid-ficha:focus-visible,
[data-crm-forzar~="foco"] .crm-bid-ficha {
  outline: var(--crm-foco-ancho) solid var(--crm-acento);
  outline-offset: 2px;
}

.crm-bid-ficha[data-forma="fila"]:focus-visible,
[data-crm-forzar~="foco"] .crm-bid-ficha[data-forma="fila"] {
  outline-offset: -1px;
}

/*
 * Elegida: marca de acento de 2 px a la izquierda (filete propio, no sombra)
 * y el escalón de selección. Va dentro del filete de la placa y por encima
 * del fondo: no cambia la geometría ni se suma al anillo de foco.
 */
.crm-bid-ficha[data-estado="seleccionada"] {
  background: var(--crm-panel-3);
}

.crm-bid-ficha[data-estado="seleccionada"]::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--crm-acento);
  pointer-events: none;
}

.crm-bid-ficha[data-forma="placa"][data-estado="seleccionada"] {
  border-color: var(--crm-line-2);
}

/* No disponible: contorno apagado, tinta de pista y el motivo en frase. La marca, original e intacta (sin filtros ni opacidad). */
.crm-bid-ficha[aria-disabled="true"] {
  background: transparent;
  cursor: not-allowed;
}

.crm-bid-ficha[data-forma="placa"][aria-disabled="true"] {
  border-color: var(--crm-linea-apagada);
}

.crm-bid-ficha[aria-disabled="true"] .crm-bid-ficha-nombre {
  color: var(--crm-dim);
}

.crm-bid-ficha-motivo {
  color: var(--crm-muted);
}

/* ── SelectorBancos ───────────────────────────────────────────────────── */

.crm-bid-selector {
  container-type: inline-size;
  min-width: 0;
  color: var(--crm-text);
}

.crm-bid-hoja {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  max-width: 1024px;
  margin-inline: auto;
}

.crm-bid-cabecera {
  display: grid;
  gap: 8px;
}

.crm-bid-rotulo {
  overflow: hidden;
  margin: 0;
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 16px;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.crm-bid-titulo {
  margin: 0;
  color: var(--crm-text);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 34px;
  text-wrap: balance;
}

.crm-bid-mandos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.crm-bid-barra {
  display: flex;
  align-items: center;
  min-height: 48px;
}

.crm-bid-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  min-width: 0;
}

.crm-bid-grupo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}

.crm-bid-placas,
.crm-bid-filas {
  margin: 0;
  padding: 0;
  list-style: none;
}

.crm-bid-placas {
  display: grid;
  gap: 16px;
}

.crm-bid-placas[data-columnas="1"] {
  grid-template-columns: minmax(0, 1fr);
}

.crm-bid-placas[data-columnas="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.crm-bid-placas[data-columnas="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.crm-bid-placas[data-columnas="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.crm-bid-placas[data-columnas="auto"] {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
}

.crm-bid-item {
  position: relative;
  min-width: 0;
}

/* Índice de filas: filete arriba y abajo; entre filas, uno dentro de su medida (la fila sigue en 64). */
.crm-bid-filas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-block: 1px solid var(--crm-line);
}

.crm-bid-filas > .crm-bid-item + .crm-bid-item::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0 0 auto;
  height: 1px;
  background: var(--crm-line);
  pointer-events: none;
}

/* Páginas: Anterior · «25 a 48 de 1.000» · Siguiente, en una barra táctil de 48. */
.crm-bid-paginas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-top: 4px;
}

/*
 * Momento táctil (FUNDAMENTOS §2, fila de 48): el buscador, las páginas, el
 * plan B y las acciones del resguardo miden 48 con texto 15 e icono 16. Se
 * hace aquí, en el contexto del conector, con las variables de alto que ya
 * leen `Busqueda` y `Boton` (tamano «grande»); sus piezas no se tocan.
 */
.crm-bid-paginas .crm-boton[data-tamano],
.crm-bid-pie .crm-bid-planb[data-tamano],
.crm-bid-elegido-acciones .crm-boton[data-tamano],
.crm-bid-selector .crm-aviso .crm-boton[data-tamano],
.crm-bid-selector .crm-vacio .crm-boton[data-tamano] {
  font-size: 15px;
  line-height: 22px;
}

/* El campo, a 15 en puntero fino; en táctil manda el 16 del kit (que iOS no amplíe). */
.crm-bid-mandos .crm-entrada[data-tamano] {
  --crm-entrada-alto: 48px;
}

@media (pointer: fine) {
  .crm-bid-mandos .crm-entrada[data-tamano] {
    font-size: 15px;
    line-height: 22px;
  }
}

.crm-bid-paginas .crm-boton[data-tamano],
.crm-bid-pie .crm-bid-planb[data-tamano],
.crm-bid-elegido-acciones .crm-boton[data-tamano],
.crm-bid-selector .crm-aviso .crm-boton[data-tamano],
.crm-bid-selector .crm-vacio .crm-boton[data-tamano] {
  --crm-boton-alto: 48px;
}

/*
 * «Limpiar» (la × del buscador): se ve a 24, como en todo el kit, pero su
 * zona de toque es de 48 × 48 (pseudoelemento transparente). El foco sigue
 * siendo el anillo del propio botón, uno solo.
 */
.crm-bid-mandos .crm-entrada .crm-entrada-accion::after {
  content: "";
  position: absolute;
  inset: -12px;
}

/*
 * Filtro de titular: el Conmutador del kit, a 48 de caja con su variable de
 * alto (cada opción, 44 a la vista dentro del filete de 2 px, y 48 de toque
 * con un pseudoelemento que cubre ese relleno). Texto 15/22. El indicador lo
 * vuelve a medir el propio Conmutador al cambiar de tamaño.
 */
.crm-bid-barra .crm-conmutador[data-tamano] {
  --crm-conm-alto: 48px;
  --crm-conm-relleno: 16px;
}

.crm-bid-barra .crm-conmutador[data-tamano] .crm-conmutador-opcion {
  font-size: 15px;
  line-height: 22px;
}

.crm-bid-barra .crm-conmutador[data-tamano] .crm-conmutador-opcion::after {
  content: "";
  position: absolute;
  inset: -2px 0;
}

.crm-bid-paginas-rango {
  min-width: 0;
  color: var(--crm-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 16px;
  white-space: nowrap;
}

.crm-bid-cargando {
  display: grid;
  gap: 32px;
}

.crm-bid-filas-esqueleto {
  display: grid;
  gap: 1px;
}

.crm-bid-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding-top: 16px;
  border-top: 1px solid var(--crm-line);
}

.crm-bid-nota {
  max-width: 68ch;
  margin: 0;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
  text-wrap: pretty;
}

.crm-bid-planb {
  margin-left: auto;
}

/* Dos columnas de filas desde 720: el índice se lee a lo ancho, como un listín. */
@container (min-width: 720px) {
  .crm-bid-filas,
  .crm-bid-filas-esqueleto {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
  }

  .crm-bid-filas > .crm-bid-item:nth-child(2)::before {
    content: none;
  }
}

@container (max-width: 719px) {
  .crm-bid-titulo {
    font-size: 24px;
    line-height: 32px;
  }

  .crm-bid-placas[data-columnas="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container (max-width: 559px) {
  .crm-bid-hoja {
    gap: 24px;
  }

  .crm-bid-placas[data-columnas="3"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .crm-bid-planb {
    margin-left: 0;
  }

  /* El filtro ocupa el ancho: las tres opciones crecen y nunca encogen (sin cortar texto). */
  .crm-bid-barra .crm-conmutador[data-tamano] {
    display: flex;
    width: 100%;
    --crm-conm-relleno: 10px;
  }

  .crm-bid-barra .crm-conmutador[data-tamano] .crm-conmutador-opcion {
    flex: 1 0 auto;
  }

  /* Páginas: el rango arriba, en su línea; Anterior y Siguiente debajo, a su ancho y centrados (sin repartos con decimales). */
  .crm-bid-paginas {
    flex-wrap: wrap;
    gap: 12px;
  }

  .crm-bid-paginas-rango {
    order: -1;
    width: 100%;
    text-align: center;
  }
}

/* Estrecho (390): placas más bajas y filas con la placa a 80 × 40. */
@container (max-width: 399px) {
  .crm-bid-placas {
    gap: 12px;
  }

  .crm-bid-ficha[data-forma="placa"] {
    padding: 12px;
    row-gap: 8px;
  }

  .crm-bid-ficha[data-forma="placa"] .crm-bid-placa .crm-banco-marca[data-tamano] {
    height: 48px;
  }

  .crm-bid-ficha[data-forma="placa"] .crm-bid-placa .crm-banco-marca[data-tamano] .crm-banco-marca-logo {
    width: min(112px, calc(100% - 24px));
    height: 24px;
  }

  .crm-bid-ficha[data-forma="fila"] {
    gap: 12px;
    padding-right: 12px;
  }

  .crm-bid-placa[data-forma="fila"] {
    width: 80px;
  }

  .crm-bid-placa[data-forma="fila"] .crm-banco-marca[data-tamano] {
    height: 40px;
  }

  .crm-bid-placa[data-forma="fila"] .crm-banco-marca[data-tamano] .crm-banco-marca-logo {
    width: 64px;
    height: 20px;
  }
}

/* ── BancoElegido: el resguardo ───────────────────────────────────────── */

.crm-bid-elegido {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  width: min(400px, 100%);
  margin-inline: auto;
  color: var(--crm-text);
}

/* Firma del resguardo: el borde de abajo es un corte perforado. */
.crm-bid-elegido-ticket {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--crm-line-2);
  border-bottom-style: dashed;
  background: var(--crm-panel);
  animation: crm-bid-entra var(--crm-t-entrada) var(--crm-snap);
}

/*
 * El ticket no define el área «placa» (la de la ficha). Si la placa la
 * conservara, el grid crearía pistas implícitas y aplastaría el nombre en una
 * columna estrecha: aquí se coloca sola, en la única columna, en su orden.
 */
.crm-bid-elegido-ticket > .crm-bid-placa {
  grid-area: auto;
}

.crm-bid-elegido-identidad {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.crm-bid-elegido-nombre {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--crm-text);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 28px;
}

.crm-bid-elegido-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
}

.crm-bid-elegido-meta > * + *::before {
  content: "·";
  margin-right: 8px;
  color: var(--crm-dim);
}

.crm-bid-elegido-nota {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--crm-line);
  color: var(--crm-muted);
  font-size: 13px;
  line-height: 20px;
}

.crm-bid-elegido-acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

@keyframes crm-bid-entra {
  from {
    opacity: 0;
    translate: 0 4px;
  }
}

/* ── Movimiento reducido y colores forzados ───────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .crm-bid-ficha,
  .crm-bid-ficha-icono {
    transition-property: background-color, border-color, color;
  }

  /* Mismos selectores (misma especificidad) que el gesto de la flecha: aquí, después, gana; solo queda el color. */
  .crm-bid-ficha:not([aria-disabled="true"]):is(:hover, :focus-visible) .crm-bid-ficha-icono:not([data-visto]),
  [data-crm-forzar~="hover"] .crm-bid-ficha .crm-bid-ficha-icono:not([data-visto]) {
    translate: none;
  }

  .crm-bid-elegido-ticket {
    animation: none;
  }
}

@media (forced-colors: active) {
  .crm-bid-ficha[data-estado="seleccionada"]::after,
  .crm-bid-matricula[data-estado="reconocido"] .crm-bid-matricula-celda[data-pieza="entidad"]::after {
    forced-color-adjust: none;
    background: Highlight;
  }

  .crm-bid-ficha[aria-disabled="true"] .crm-bid-ficha-nombre {
    color: GrayText;
  }
}

/* ── ConexionBanco: el banco conectado y qué toca ahora ───────────────── */

/*
 * Plana: cabecera (marca, nombre, firma del código y estado de la
 * conexión), un cuerpo con las dos piezas S9 tal cual (lectura y sello del
 * permiso) y la línea «Ahora». Filetes de 1 px, radio 0, sin sombras y sin
 * verde propio: el único verde lo ponen las piezas S9 cuando algo está hecho.
 */
.crm-bcx {
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  border: 1px solid var(--crm-line);
  background: var(--crm-panel);
  color: var(--crm-text);
}

.crm-bcx-cabecera {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 16px 20px;
}

.crm-bcx-identidad {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

/* FUNDAMENTOS §14: el título, en una línea con elipsis; el texto entero va en su consejo (solo si se corta). */
.crm-bcx-nombre {
  display: flex;
  min-width: 0;
  margin: 0;
  color: var(--crm-text);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 22px;
}

/* El texto del título: lleva la elipsis y es la parada de teclado del consejo. */
.crm-bcx-nombre-texto {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Foco de control (FUNDAMENTOS §7): un solo anillo de acento separado 2 px; 2 px de ancho en contraste. */
.crm-bcx-nombre-texto:focus-visible {
  outline: var(--crm-foco-ancho) solid var(--crm-acento);
  outline-offset: 2px;
}

.crm-bcx-cabecera > .crm-etiqueta {
  flex: none;
}

/* Cuerpo: la lectura a la izquierda y el sello a su ancho, a la derecha; debajo de 560, uno sobre otro. */
.crm-bcx-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px 24px;
  padding: 20px;
  border-top: 1px solid var(--crm-line);
}

.crm-bcx-cuerpo > :only-child {
  grid-column: 1 / -1;
}

/*
 * Firma: la línea «Ahora». Rótulo mono a la izquierda, una frase de lectura
 * y la única acción, de 48 (momento táctil). Siempre responde, también
 * cuando no hay nada que hacer.
 */
/* 64 con su filete dentro (FUNDAMENTOS §1). */
.crm-bcx-ahora {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 16px;
  min-height: 64px;
  padding: 8px 20px;
  border-top: 1px solid var(--crm-line);
}

/* Rótulo y frase alineados por su primera línea de base, en una o en varias líneas. */
.crm-bcx-ahora-texto {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: first baseline;
  column-gap: 16px;
  min-width: 0;
}

.crm-bcx-ahora-rotulo {
  margin: 0;
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  line-height: 16px;
  text-transform: uppercase;
}

.crm-bcx-ahora-frase {
  display: block;
  min-width: 0;
  max-width: 68ch;
  margin: 0;
  color: var(--crm-text-2);
  font-size: 14px;
  line-height: 22px;
  text-wrap: pretty;
}

.crm-bcx-ahora-accion {
  display: grid;
}

.crm-bcx-ahora-accion .crm-boton[data-tamano] {
  --crm-boton-alto: 48px;
  font-size: 15px;
  line-height: 22px;
}

@container (max-width: 559px) {
  .crm-bcx-cuerpo {
    grid-template-columns: minmax(0, 1fr);
  }

  /* La acción baja bajo la frase y ocupa el ancho: un objetivo de 48 fácil de tocar. */
  .crm-bcx-ahora[data-con-accion] {
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 16px;
  }
}

@container (max-width: 399px) {
  .crm-bcx-cabecera,
  .crm-bcx-cuerpo {
    padding-inline: 16px;
  }

  .crm-bcx-cabecera {
    flex-wrap: wrap;
    gap: 12px;
  }

  /*
   * La identidad ocupa la línea junto a la placa (80 + 12 de hueco): el
   * nombre, en su línea con elipsis, tiene el ancho real que queda. La
   * etiqueta de estado baja a su propia línea, alineada bajo el nombre.
   */
  .crm-bcx-cabecera > .crm-bcx-identidad {
    flex-basis: calc(100% - 92px);
  }

  .crm-bcx-cabecera > .crm-etiqueta {
    margin-left: 92px;
  }

  .crm-bcx-ahora {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding-inline: 16px;
  }

  /* El rótulo, encima de la frase. */
  .crm-bcx-ahora-texto {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 4px;
  }
}

/*
 * Presupuestos de dibujo de ConexionBanco (no políticas: el dato sigue
 * valiendo entero). Con más de 24 lecturas manuales, el bloque de cupo de S9
 * (una marca por lectura) se quita en esta instancia, también para el lector
 * (display: none), y la pieza da la cifra exacta.
 */
.crm-bcx-lectura-col {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.crm-bcx[data-cupo-grande] .crm-bcx-lectura .crm-sincro-manual,
.crm-bcx[data-manual-en-pausa] .crm-bcx-lectura .crm-sincro-manual {
  display: none;
}

.crm-bcx-cupo {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--crm-text-2);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  line-height: 20px;
}

/* Permiso que la regla del sello no dibuja (más de 720 días) o caducado sin duración válida: fecha y días, sin regla. */
.crm-bcx-permiso-compacto {
  display: grid;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  padding: 16px 20px;
  border: 1px solid var(--crm-line-2);
  background: var(--crm-panel);
}

.crm-bcx-permiso-rotulo {
  overflow: hidden;
  margin: 0;
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  line-height: 16px;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.crm-bcx-permiso-cifra {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--crm-text);
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 28px;
}

.crm-bcx-permiso-compacto[data-estado="por-caducar"] .crm-bcx-permiso-cifra {
  color: var(--crm-aviso);
}

.crm-bcx-permiso-compacto[data-estado="caducada"] .crm-bcx-permiso-cifra {
  color: var(--crm-error);
}

.crm-bcx-permiso-pie {
  margin: 0;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
}

/* Familia universal documental. No altera piezas compartidas ni tokens. */
.crm-documental {
  container: crm-documental / inline-size;
  min-width: 0;
  color: var(--crm-text);
  font-family: var(--crm-sans);
  font-size: 13px;
  line-height: 20px;
  border-radius: 0;
}
.crm-documental *, .crm-documental *::before, .crm-documental *::after { box-sizing: border-box; }
.crm-documental :where(h3, h4, p, dl, dd, dt, ol, ul) { margin: 0; }
.crm-documental :where(h3, h4, p, dd, dt, li, span, time) { min-width: 0; overflow-wrap: anywhere; }
.crm-documental :where(h3) { font-size: 15px; line-height: 22px; font-weight: 500; letter-spacing: -0.01em; }
.crm-documental :where(h4) { font-size: 13px; line-height: 20px; font-weight: 500; }
.crm-documental svg { flex: none; width: 16px; height: 16px; stroke-width: 1.6; }
.crm-documental .crm-boton { max-width: 100%; }
.crm-doc-rotulo { font-family: var(--crm-mono); font-size: 11px; line-height: 16px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--crm-muted); }
.crm-doc-referencia, .crm-doc-codigo, .crm-doc-numero, .crm-doc-cuenta { font-family: var(--crm-mono); font-variant-numeric: tabular-nums; }
.crm-doc-referencia { color: var(--crm-muted); font-size: 12px; line-height: 16px; }
.crm-doc-estado, .crm-doc-motivo, .crm-doc-lectura { color: var(--crm-muted); font-size: 12px; line-height: 16px; }
.crm-doc-lectura { padding: 12px 16px; border-bottom: 1px solid var(--crm-line); }
.crm-doc-estado[data-estado="listo"], .crm-doc-listo { color: var(--crm-acento); }
.crm-doc-estado[data-estado="rechazado"] { color: var(--crm-error); }
.crm-doc-estado[data-estado="por-revisar"], .crm-doc-estado[data-estado="sin-confirmar"] { color: var(--crm-aviso); }

/* Bandeja: un solo recorrido de teclado, toda la fila abre el folio. */
.crm-doc-grupo-titulo { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--crm-line); }
.crm-doc-cuenta { font-size: 12px; line-height: 16px; color: var(--crm-muted); }
.crm-doc-cuenta[data-atencion] { color: var(--crm-acento); }
.crm-doc-folios { list-style: none; padding: 0; }
.crm-doc-folio {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 4px 12px;
  width: 100%;
  min-height: 64px;
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--crm-line);
  border-radius: 0;
  background: transparent;
  color: var(--crm-text);
  text-align: start;
  font-family: var(--crm-sans);
  cursor: pointer;
  transition: background-color var(--crm-t-color) var(--crm-curva);
}
.crm-doc-folio-nombre { font-size: 13px; line-height: 20px; font-weight: 500; }
.crm-doc-folio-detalle { grid-column: 1 / 3; color: var(--crm-muted); font-size: 12px; line-height: 16px; }
.crm-doc-folio > svg { grid-column: 3; grid-row: 1 / 3; color: var(--crm-muted); transition: transform var(--crm-t-gesto) var(--crm-snap); }
.crm-doc-folio[data-elegido] { background: var(--crm-panel-3); }
.crm-doc-folio[data-elegido]::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--crm-acento); }
.crm-doc-folio:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: -1px; }
.crm-doc-folio:active { background: var(--crm-panel-3); }
@media (hover: hover) {
  .crm-doc-folio:hover { background: var(--crm-panel-2); transition-duration: 0s; }
  .crm-doc-folio:hover > svg { transform: translateX(2px); }
  .crm-doc-folio[data-elegido]:hover { background: var(--crm-panel-3); }
}

/* Papel: el pliegue pertenece al documento, no a una tarjeta genérica. */
.crm-doc-papel, .crm-doc-manifiesto, .crm-doc-resguardo { position: relative; background: var(--crm-panel); border: 1px solid var(--crm-line); }
.crm-doc-papel::before { content: ""; position: absolute; top: 0; right: 0; width: 16px; height: 16px; background: var(--crm-panel-2); clip-path: polygon(0 0, 100% 100%, 0 100%); }
.crm-doc-cabecera { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 20px; border-bottom: 1px solid var(--crm-line); }
.crm-doc-cabecera > h3 { max-width: 100%; }
.crm-doc-campos { padding: 0 20px; }
.crm-doc-campo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 8px 24px; padding: 16px 0; border-bottom: 1px solid var(--crm-line); }
.crm-doc-campo:last-child { border-bottom: 0; }
.crm-doc-campo > dd { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 22px; }
.crm-doc-campo[data-pendiente] > dt { border-left: 2px solid var(--crm-aviso); padding-left: 8px; }
.crm-doc-frenos { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; border-top: 1px solid var(--crm-line); }
.crm-doc-original { padding: 16px 20px; border-top: 1px solid var(--crm-line); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.crm-doc-enlace { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-size: 13px; line-height: 20px; color: var(--crm-text); text-decoration: underline; text-underline-offset: 4px; }
.crm-doc-enlace:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; }
.crm-doc-enlace:active { color: var(--crm-text-2); }
.crm-doc-visor { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.crm-doc-visor-pdf { width: 100%; aspect-ratio: 210 / 297; border: 1px solid var(--crm-line); background: var(--crm-bg); }
.crm-doc-visor-pdf:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: -1px; }
.crm-doc-visor-imagen { display: block; max-width: 100%; height: auto; object-fit: contain; border: 1px solid var(--crm-line); }
.crm-doc-visor > .crm-doc-espera { padding: 8px 0; }

/* Un manifiesto: folios numerados y frenos, sin cajas dentro de cajas. */
.crm-doc-manifiesto-folios { list-style: none; padding: 0 20px; }
.crm-doc-manifiesto-folio { display: grid; grid-template-columns: 24px minmax(0, 1fr) 16px; gap: 12px; padding: 20px 0; border-top: 1px solid var(--crm-line); }
.crm-doc-numero { font-size: 12px; line-height: 20px; color: var(--crm-muted); }
.crm-doc-manifiesto-dato { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.crm-doc-folio-icono { color: var(--crm-muted); }
.crm-doc-pendientes { padding-left: 16px; font-size: 12px; line-height: 16px; color: var(--crm-aviso); display: flex; flex-direction: column; gap: 8px; }
.crm-doc-listo { display: flex; gap: 6px; align-items: center; font-size: 12px; line-height: 16px; }
.crm-doc-listo > svg { width: 14px; height: 14px; stroke-width: 1.5; }

/* Resguardo: código íntegro, corte de papel y fuente del registro. */
.crm-doc-resguardo { border-bottom: 1px dashed var(--crm-line-2); }
.crm-doc-resguardo[data-estado="confirmado"] { border-top: 2px solid var(--crm-acento); }
.crm-doc-codigo { font-size: 20px; line-height: 28px; font-weight: 500; user-select: text; }
.crm-doc-resguardo-folios { padding: 16px 20px 16px 40px; font-size: 12px; line-height: 16px; border-top: 1px solid var(--crm-line); color: var(--crm-muted); }
.crm-doc-resguardo > .crm-doc-motivo { padding: 16px 20px; }

/* Recuperación y capacidad: razón a la vista, una acción principal. */
.crm-doc-aviso { display: flex; align-items: flex-start; gap: 8px; padding: 12px 16px; border-left: 2px solid var(--crm-aviso); color: var(--crm-text-2); font-size: 13px; line-height: 20px; }
.crm-doc-aviso[data-error] { border-left-color: var(--crm-error-linea); }
.crm-doc-aviso > svg { color: var(--crm-aviso); margin-top: 2px; }
.crm-doc-aviso[data-error] > svg { color: var(--crm-error); }
.crm-doc-aviso > div { min-width: 0; }
.crm-doc-aviso > div > .crm-boton { margin-top: 8px; }
.crm-doc-acciones { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; padding: 20px; border-top: 1px solid var(--crm-line); }
.crm-doc-acciones > p { align-self: stretch; }
.crm-doc-espera { display: flex; align-items: center; gap: 8px; padding: 16px 20px; color: var(--crm-muted); font-size: 13px; line-height: 20px; }
.crm-doc-espera > svg { color: var(--crm-luz); }
.crm-doc-vacio { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px 20px; }
.crm-doc-vacio > svg { width: 20px; height: 20px; color: var(--crm-muted); }
.crm-doc-vacio > p { color: var(--crm-muted); max-width: 68ch; }

@container crm-documental (max-width: 720px) {
  .crm-doc-cabecera, .crm-doc-acciones { padding: 16px; }
  .crm-doc-campos, .crm-doc-manifiesto-folios { padding-inline: 16px; }
  .crm-doc-frenos, .crm-doc-original { padding-inline: 16px; }
  .crm-doc-campo { column-gap: 16px; }
}
@container crm-documental (max-width: 400px) {
  .crm-doc-campo { grid-template-columns: minmax(0, 1fr); }
  .crm-doc-folio { grid-template-columns: minmax(0, 1fr) 16px; }
  .crm-doc-folio > .crm-doc-estado { grid-column: 1; }
  .crm-doc-folio-detalle { grid-column: 1; }
  .crm-doc-folio > svg { grid-column: 2; grid-row: 1 / 4; }
  .crm-doc-acciones { align-items: stretch; }
  .crm-doc-manifiesto-folio { grid-template-columns: 24px minmax(0, 1fr); }
  .crm-doc-folio-icono { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .crm-doc-folio > svg { transition: none; transform: none; }
}
@media (forced-colors: active) {
  .crm-doc-folio[data-elegido]::before { background: Highlight; }
  .crm-doc-folio:focus-visible, .crm-doc-enlace:focus-visible { outline-color: Highlight; }
  .crm-doc-papel::before { background: Canvas; }
}

/* ── Inicio: el Motor en el centro, la foto alrededor, la C detrás (familia inicio) ───────────── */
/* Solo tokens del tema (--crm-*). Rótulos en mono y mayúsculas, cifras en Geist tabular, un acento contado. */

.crm-marco-contenido:has(> .crm-ini),
.crm-marco-contenido:has(> .crm-marca > .crm-ini) { display: flex; flex: 1 1 0px; flex-direction: column; padding-bottom: 0; }
/* La escena también puede llegar envuelta en una raíz de tema (RaizCriterium): la raíz toma el alto y la escena lo llena. */
.crm-marco-contenido > .crm-marca:has(> .crm-ini) { flex: none; display: flex; flex-direction: column; height: calc(100dvh - var(--crm-marco-arriba, 44px) - var(--crm-marco-abajo, 32px)); }
.crm-marco-contenido > .crm-marca > .crm-ini { flex: 1 1 auto; height: 100%; }
/* Dentro del marco, el alto exacto de la ventana menos barra y pie (como la Vista Agente): así no hay scroll. */
.crm-marco-contenido > .crm-ini { flex: none; height: calc(100dvh - var(--crm-marco-arriba, 44px) - var(--crm-marco-abajo, 32px)); }
.crm-ini {
  --crm-ini-vidrio: color-mix(in srgb, var(--crm-panel) 82%, transparent);
  --crm-ini-hueco: 12px;
  position: relative; flex: 1 1 auto; min-height: 0; height: 100%;
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  background: var(--crm-bg); color: var(--crm-text); font-family: var(--crm-sans); font-size: 13px; line-height: 1.45;
  container: crm-ini / inline-size;
}
.crm-ini *, .crm-ini *::before, .crm-ini *::after { box-sizing: border-box; }
:where(.crm-ini) :where(h1, h2, h3, p, ol, ul, dl, dd) { margin: 0; padding: 0; }
:where(.crm-ini) :where(ol, ul) { list-style: none; }
:where(.crm-ini) :where(a) { color: inherit; text-decoration: none; }
:where(.crm-ini) :where(svg) { fill: none; stroke: currentColor; stroke-width: 1.5; }
.crm-ini-rotulo { font: 500 11px/16px var(--crm-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--crm-dim); }
.crm-ini-tenue { color: var(--crm-dim); }
.crm-ini-verde { color: var(--crm-acento); }
.crm-ini-punto { position: relative; display: inline-block; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--crm-acento); }
.crm-ini-vivo { box-shadow: 0 0 0 3px var(--crm-acento-suave); }
.crm-ini-vivo::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--crm-acento); animation: crm-latido var(--crm-t-latido) ease-out infinite; }
.crm-ini-filo { position: relative; }
.crm-ini-filo::before { content: ""; position: absolute; z-index: 1; inset: -1px -1px auto; height: 1px; background: linear-gradient(90deg, transparent, var(--crm-acento) 50%, transparent) no-repeat -40% 0 / 40% 100%; opacity: 0; pointer-events: none; }

/* ── Escena ── */
.crm-ini-escena {
  position: relative; isolation: isolate; overflow: hidden; min-height: 0;
  display: grid; grid-template-columns: minmax(248px, 1fr) minmax(420px, 1.7fr) minmax(248px, 1fr);
  gap: clamp(16px, 2.2cqi, 36px); padding: clamp(12px, 2.2vh, 22px) clamp(14px, 1.6cqi, 24px);
}
.crm-ini-fondo { -webkit-mask-image: linear-gradient(180deg, black 72%, transparent 100%); mask-image: linear-gradient(180deg, black 72%, transparent 100%); }

/* ── Alas ── */
.crm-ini-ala { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); gap: var(--crm-ini-hueco); align-content: start; }
.crm-ini-ala-cab { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 0 2px; white-space: nowrap; }

/* KPI de cristal */
.crm-ini-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.crm-ini-kpi { position: relative; display: block; border: 1px solid var(--crm-line); background: var(--crm-ini-vidrio); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: border-color var(--crm-t-color) var(--crm-snap), background-color var(--crm-t-color) var(--crm-snap); }
.crm-ini-kpi-dentro { display: grid; align-content: start; gap: 2px; padding: 11px 12px 12px; min-width: 0; }
.crm-ini-kpi:hover { border-color: var(--crm-line-2); background: color-mix(in srgb, var(--crm-panel-2) 90%, transparent); }
.crm-ini-kpi:hover::before { opacity: 1; animation: crm-filo calc(var(--crm-t-filo) * 2) var(--crm-curva) 1 both; }
.crm-ini-kpi:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: 2px; }
.crm-ini-kpi-cab { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12px; line-height: 16px; color: var(--crm-text-2); }
.crm-ini-kpi-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-ini-estado { flex: none; width: 6px; height: 6px; background: var(--crm-control); }
.crm-ini-estado[data-estado="bien"] { background: var(--crm-acento); }
.crm-ini-estado[data-estado="atencion"] { background: var(--crm-aviso); }
.crm-ini-estado[data-estado="frenado"] { background: var(--crm-error); }
.crm-ini-tendencia { margin-left: auto; font: 500 11px/16px var(--crm-mono); letter-spacing: 0; color: var(--crm-dim); white-space: nowrap; transition: opacity var(--crm-t-color); }
.crm-ini-tendencia[data-tono="sube"], .crm-ini-tendencia[data-tono="acento"] { color: var(--crm-acento); }
.crm-ini-tendencia[data-tono="aviso"] { color: var(--crm-aviso); }
.crm-ini-kpi-fila { display: flex; align-items: baseline; gap: 8px; min-width: 0; margin-top: 6px; }
.crm-ini-kpi-cifra { font: 500 24px/28px var(--crm-sans); letter-spacing: -0.025em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.crm-ini-kpi-fila .crm-ini-tendencia { overflow: hidden; min-width: 0; text-overflow: ellipsis; }
.crm-ini-kpi-unidad { overflow: hidden; font: 400 11px/16px var(--crm-mono); color: var(--crm-dim); text-overflow: ellipsis; white-space: nowrap; }
.crm-ini-abrir { position: absolute; top: 12px; right: 10px; width: 12px; height: 12px; color: var(--crm-text); opacity: 0; transform: translate(-3px, 3px); transition: opacity var(--crm-t-color), transform var(--crm-t-gesto) var(--crm-snap); }
.crm-ini-kpi:hover .crm-ini-abrir, .crm-ini-kpi:focus-visible .crm-ini-abrir { opacity: 1; transform: none; }
.crm-ini-kpi:has([data-estado="frenado"].crm-ini-kpi-dentro) { border-color: var(--crm-error-linea); background: linear-gradient(var(--crm-error-suave), transparent 85%), var(--crm-ini-vidrio); }
.crm-ini-kpi-dentro[data-estado="frenado"] .crm-ini-kpi-cifra { color: var(--crm-error); }
.crm-ini-kpi-accion { display: inline-flex; gap: 6px; align-items: center; justify-self: start; margin-top: 4px; font: 500 12px/16px var(--crm-sans); color: var(--crm-error); }
.crm-ini-kpi-accion i { font-style: normal; transition: transform var(--crm-t-gesto) var(--crm-snap); }
.crm-ini-kpi:hover .crm-ini-kpi-accion i { transform: translateX(3px); }

/* Hojas */
.crm-ini-hoja { position: relative; min-height: 0; overflow: hidden; display: grid; align-content: start; gap: 10px; padding: 12px 14px 14px; border: 1px solid var(--crm-line); background: var(--crm-ini-vidrio); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: border-color var(--crm-t-color); }
.crm-ini-hoja:hover { border-color: var(--crm-line-2); }
.crm-ini-hoja-estirar { grid-template-rows: auto auto minmax(0, 1fr); }
.crm-ini-hoja-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.crm-ini-hoja-abrir { font: 400 11px/16px var(--crm-mono); color: var(--crm-dim); transition: color var(--crm-t-color); }
.crm-ini-hoja-abrir:hover { color: var(--crm-text); }
.crm-ini-hoja-cifra { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.crm-ini-hoja-cifra strong { font: 500 24px/28px var(--crm-sans); letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.crm-ini-hoja-cifra span { font: 400 11px/16px var(--crm-mono); color: var(--crm-dim); }
.crm-ini-hoja-cifra .crm-ini-tendencia { margin-left: auto; }
.crm-ini-hoja-nota { font-size: 12px; line-height: 17px; color: var(--crm-muted); }
.crm-ini-hoja-nota[hidden] { display: none; }
.crm-ini-hoja-nota b { font-weight: 500; color: var(--crm-text-2); }

/* Barra de estados */
.crm-ini-barra { display: flex; gap: 2px; height: 8px; }
.crm-ini-barra i { display: block; min-width: 2px; height: 100%; background: var(--crm-ini-c); transform-origin: left; }
.crm-ini[data-encendida] .crm-ini-barra i { animation: crm-ini-crecer var(--crm-t-dibujo) var(--crm-snap) both; }
@keyframes crm-ini-crecer { from { transform: scaleX(0); } }
.crm-ini-leyenda { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 16px; }
.crm-ini-leyenda li { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12px; line-height: 17px; color: var(--crm-muted); }
.crm-ini-leyenda span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-ini-leyenda i { flex: none; width: 6px; height: 6px; background: var(--crm-ini-c); }
.crm-ini-leyenda b { margin-left: auto; font-weight: 400; color: var(--crm-text-2); font-variant-numeric: tabular-nums; }
.crm-ini [data-tono="acento"] { --crm-ini-c: var(--crm-acento); }
.crm-ini [data-tono="aviso"] { --crm-ini-c: var(--crm-aviso); }
.crm-ini [data-tono="texto"] { --crm-ini-c: var(--crm-text-2); }
.crm-ini [data-tono="error"] { --crm-ini-c: var(--crm-error); }
.crm-ini [data-tono="apagado"] { --crm-ini-c: var(--crm-linea-apagada); }

/* Calendario */
.crm-ini-calendario { display: grid; align-content: start; overflow: hidden; min-height: 0; }
.crm-ini-calendario li[hidden] { display: none; }
.crm-ini-cal-fila { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--crm-line); transition: background-color var(--crm-t-color); }
a.crm-ini-cal-fila:hover { background: color-mix(in srgb, var(--crm-panel-2) 60%, transparent); }
.crm-ini-dia { display: grid; justify-items: center; padding: 2px 0 3px; border: 1px solid var(--crm-line-2); border-top: 3px solid var(--crm-line-2); background: var(--crm-panel-2); line-height: 1; }
.crm-ini-dia b { font: 500 14px/16px var(--crm-sans); font-variant-numeric: tabular-nums; }
.crm-ini-dia small { font: 500 11px/12px var(--crm-mono); letter-spacing: 0; letter-spacing: .06em; text-transform: uppercase; color: var(--crm-dim); }
.crm-ini-calendario li[data-pronto] .crm-ini-dia { border-top-color: var(--crm-aviso); }
.crm-ini-cal-txt { display: grid; min-width: 0; }
.crm-ini-cal-txt > span { overflow: hidden; font-size: 12px; line-height: 16px; color: var(--crm-text-2); text-overflow: ellipsis; white-space: nowrap; }
.crm-ini-cal-txt small { overflow: hidden; font: 400 11px/15px var(--crm-mono); color: var(--crm-dim); text-overflow: ellipsis; white-space: nowrap; }
.crm-ini-cal-txt small b { font-weight: 400; color: var(--crm-text-2); }
.crm-ini-calendario li[data-pronto] .crm-ini-cal-txt small b { color: var(--crm-aviso); }
.crm-ini-cal-cifra { font: 500 13px/16px var(--crm-sans); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* Gráficos */
.crm-ini-grafico { display: block; width: 100%; overflow: visible; }
.crm-ini-grafico text { fill: var(--crm-dim); stroke: none; font: 400 10px var(--crm-mono); letter-spacing: .04em; text-transform: uppercase; }
.crm-ini-barras rect { fill: var(--crm-line-2); stroke: none; transition: fill var(--crm-t-color); }
.crm-ini-barras g[data-mayor] rect { fill: var(--crm-text-2); }
.crm-ini-barras rect[data-curso] { stroke: var(--crm-control); stroke-width: 1; }
.crm-ini-rayado-fondo { fill: var(--crm-panel); stroke: none; }
.crm-ini-rayado-linea { stroke: var(--crm-control); stroke-width: 1.5; }
.crm-ini-barras g:hover rect { fill: var(--crm-acento); }
.crm-ini-barras .crm-ini-valor { fill: var(--crm-text-2); opacity: 0; transition: opacity var(--crm-t-color); }
.crm-ini-barras g[data-mayor] .crm-ini-valor, .crm-ini-barras g:hover .crm-ini-valor { opacity: 1; }
.crm-ini-barras g:hover ~ g[data-mayor] .crm-ini-valor { opacity: 0; }
.crm-ini-curva text[data-hoy] { fill: var(--crm-text-2); }
.crm-ini-eje { stroke: var(--crm-line); stroke-width: 1; }
.crm-ini-sombra-alta { stop-color: var(--crm-text-2); stop-opacity: .14; }
.crm-ini-sombra-baja { stop-color: var(--crm-text-2); stop-opacity: 0; }
.crm-ini-sombra { stroke: none; }
.crm-ini-hoy { stroke: var(--crm-line-2); stroke-width: 1; stroke-dasharray: 2 3; }
.crm-ini-pasado { fill: none; stroke: var(--crm-text-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.crm-ini-futuro { fill: none; stroke: var(--crm-control); stroke-width: 1.5; stroke-dasharray: 3 3; }
.crm-ini-halo { fill: var(--crm-aviso); stroke: none; opacity: .18; }
.crm-ini-punto-hoy { fill: var(--crm-aviso); stroke: none; }

/* ── Centro ── */
.crm-ini-centro { container: crm-ini-centro / inline-size; min-width: 0; min-height: 0; display: grid; grid-template-rows: auto auto auto; justify-items: center; align-content: safe center; gap: clamp(14px, 2.8vh, 30px); padding-bottom: clamp(0px, 1.6vh, 20px); }
/* Zona de respeto de la C (FUNDAMENTOS §11): cada bloque de texto se lee sobre un velo del lienzo, sin caja. */
.crm-ini-voz, .crm-ini-plan, .crm-ini-pregunta, .crm-ini-ala-cab, .crm-ini-vehiculo { position: relative; }
.crm-ini-voz::after, .crm-ini-plan::after, .crm-ini-pregunta::after, .crm-ini-ala-cab::after, .crm-ini-vehiculo::after {
  content: ""; position: absolute; z-index: -1; inset: -24px -32px; background: var(--crm-bg); pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 32px, black calc(100% - 32px), transparent), linear-gradient(180deg, transparent, black 24px, black calc(100% - 24px), transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, black 32px, black calc(100% - 32px), transparent), linear-gradient(180deg, transparent, black 24px, black calc(100% - 24px), transparent);
  mask-composite: intersect;
}
.crm-ini-voz[data-pendiente] { visibility: hidden; }
.crm-ini-voz { display: grid; justify-items: center; gap: 14px; width: 100%; max-width: 760px; text-align: center; }
/* En bloque, no en flex: si el sello envuelve (móvil), la línea crece y empuja al titular; nunca se le monta encima. */
.crm-ini-lectura { display: block; max-width: 100%; min-height: 16px; font: 400 11px/16px var(--crm-mono); letter-spacing: .06em; text-transform: uppercase; text-align: center; text-wrap: balance; color: var(--crm-dim); }
.crm-ini-lectura > .crm-ini-punto { margin-right: 10px; vertical-align: 1px; }
.crm-ini-lectura > .crm-ini-fuente + .crm-ini-fuente { margin-left: 10px; }
.crm-ini-fuente { color: var(--crm-dim); opacity: .55; transition: color var(--crm-t-color), opacity var(--crm-t-color); }
.crm-ini-fuente[data-estado="ahora"] { color: var(--crm-text); opacity: 1; }
.crm-ini-fuente[data-estado="ok"] { color: var(--crm-dim); opacity: 1; }
.crm-ini-fuente[data-estado="ok"]::before { content: "✓ "; color: var(--crm-acento); }
.crm-ini-fuente[data-estado="falla"] { color: var(--crm-error); opacity: 1; text-decoration: line-through; }
.crm-ini-falla { color: var(--crm-error); }
.crm-ini-titular { min-height: 2.08em; font-size: 56px; font-weight: 500; line-height: 1.04; letter-spacing: -0.04em; text-wrap: balance; }
.crm-ini-resumen { min-height: 3.1em; max-width: 64ch; font-size: 15px; line-height: 1.55; color: var(--crm-muted); text-wrap: pretty; }
.crm-ini-resumen b { font-weight: 500; color: var(--crm-text); }
.crm-ini-cursor { display: inline-block; width: .5em; height: .9em; margin-left: 2px; vertical-align: -0.08em; background: var(--crm-acento); animation: crm-ini-parpadeo calc(var(--crm-t-panel) * 4) steps(1) infinite; }
@keyframes crm-ini-parpadeo { 50% { opacity: 0; } }

/* Carril del plan */
.crm-ini-plan { width: 100%; max-width: 760px; }
.crm-ini-plan-cab { display: flex; align-items: center; gap: 16px; padding-bottom: 8px; }
.crm-ini-plan-cab { white-space: nowrap; }
.crm-ini-plan-cab > .crm-ini-tenue { overflow: hidden; text-overflow: ellipsis; }
.crm-ini-empezar { flex: none; margin-left: auto; }
.crm-ini-empezar { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; border: 1px solid var(--crm-acento-linea); background: var(--crm-acento-suave); color: var(--crm-text); font: 500 12px var(--crm-sans); cursor: pointer; transition: background-color var(--crm-t-color), border-color var(--crm-t-color), transform var(--crm-t-pulsar); }
.crm-ini-empezar:hover { border-color: var(--crm-acento); background: color-mix(in srgb, var(--crm-acento) 20%, transparent); }
.crm-ini-empezar:active { transform: scale(.98); }
.crm-ini-empezar:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: 2px; }
.crm-ini-empezar-icono { width: 0; height: 0; border-block: 4px solid transparent; border-left: 6px solid var(--crm-acento); }
.crm-ini-carril { position: relative; display: grid; }
.crm-ini-carril::before { content: ""; position: absolute; top: 24px; bottom: 24px; left: 11px; width: 1px; background: linear-gradient(var(--crm-acento-linea), var(--crm-line-2) 35%, var(--crm-line-2)); }
.crm-ini-paso { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 0 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--crm-line); }
.crm-ini-paso:last-child { border-bottom: 1px solid var(--crm-line); }
.crm-ini-nodo { position: relative; z-index: 1; display: grid; place-items: center; align-self: start; width: 23px; height: 24px; margin-top: 2px; border: 1px solid var(--crm-line-2); background: var(--crm-bg); font: 500 10px var(--crm-mono); color: var(--crm-dim); }
.crm-ini-paso[data-principal] .crm-ini-nodo { border-color: var(--crm-acento); background: var(--crm-acento); color: var(--crm-sobre-acento); }
.crm-ini-paso[data-principal] .crm-ini-nodo::after { content: ""; position: absolute; inset: -1px; border: 1px solid var(--crm-acento); animation: crm-ini-halo var(--crm-t-latido) ease-out infinite; }
@keyframes crm-ini-halo { from { inset: -1px; opacity: .7; } to { inset: -7px; opacity: 0; } }
.crm-ini-paso[data-resultado="hecho"] .crm-ini-nodo { border-color: var(--crm-acento-linea); color: var(--crm-acento); }
.crm-ini-paso[data-resultado="hecho"] h3 { color: var(--crm-dim); text-decoration: line-through; text-decoration-color: var(--crm-line-2); }
.crm-ini-paso-txt { display: grid; gap: 1px; min-width: 0; }
.crm-ini-motivo { font: 500 11px/14px var(--crm-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--crm-dim); }
.crm-ini-motivo[data-tono="aviso"] { color: var(--crm-aviso); }
.crm-ini-motivo[data-tono="acento"], .crm-ini-paso[data-resultado="hecho"] .crm-ini-motivo { color: var(--crm-acento); }
.crm-ini-paso-txt h3 { overflow: hidden; font-size: 15px; font-weight: 500; line-height: 21px; letter-spacing: -0.01em; text-overflow: ellipsis; white-space: nowrap; }
.crm-ini-paso-linea { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.crm-ini-paso-linea p { overflow: hidden; min-width: 0; font-size: 12px; line-height: 17px; color: var(--crm-muted); text-overflow: ellipsis; white-space: nowrap; }
.crm-ini-porque { display: inline-flex; flex: none; align-items: center; gap: 5px; padding: 0; border: 0; background: none; font: 400 11px/16px var(--crm-mono); color: var(--crm-dim); cursor: pointer; transition: color var(--crm-t-color); }
.crm-ini-porque:hover, .crm-ini-paso[data-abierto] .crm-ini-porque { color: var(--crm-text); }
.crm-ini-porque i { display: inline-block; font-style: normal; transition: transform var(--crm-t-gesto) var(--crm-snap); }
.crm-ini-paso[data-abierto] .crm-ini-porque i { transform: rotate(90deg); }
.crm-ini-paso-der { display: flex; align-items: center; gap: 16px; }
.crm-ini-paso-cifra { display: grid; text-align: right; }
.crm-ini-paso-cifra strong { font: 500 16px/20px var(--crm-sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.crm-ini-paso-cifra span { font: 400 11px/14px var(--crm-mono); color: var(--crm-dim); white-space: nowrap; }
.crm-ini-boton { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 132px; height: 32px; padding: 0 12px; border: 1px solid var(--crm-line-2); background: var(--crm-bg); color: var(--crm-text); font: 500 13px var(--crm-sans); white-space: nowrap; cursor: pointer; transition: background-color var(--crm-t-color), border-color var(--crm-t-color), color var(--crm-t-color), transform var(--crm-t-pulsar); }
.crm-ini-boton:hover { border-color: var(--crm-control); background: var(--crm-panel); }
.crm-ini-boton:active { transform: scale(.98); }
.crm-ini-boton:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: 2px; }
.crm-ini-boton i { font-style: normal; color: var(--crm-dim); transition: transform var(--crm-t-gesto) var(--crm-snap), color var(--crm-t-color); }
.crm-ini-boton:hover i { color: inherit; transform: translateX(3px); }
.crm-ini-boton-principal { border-color: var(--crm-boton); background: var(--crm-boton); color: var(--crm-boton-tinta); }
.crm-ini-boton-principal i { color: inherit; opacity: .55; font: 500 11px var(--crm-mono); }
.crm-ini-boton-principal:hover { border-color: var(--crm-acento); background: var(--crm-acento); color: var(--crm-sobre-acento); }
.crm-ini-paso[data-resultado="hecho"] .crm-ini-boton { opacity: .6; }
/* «Por qué» flota: nunca empuja la pantalla. */
.crm-ini-razon { position: absolute; z-index: 8; top: calc(100% - 4px); right: 0; left: 38px; visibility: hidden; border: 1px solid var(--crm-line-2); background: var(--crm-panel-2); box-shadow: var(--crm-sombra-capa); opacity: 0; transform: translateY(-4px); transition: opacity var(--crm-t-panel) var(--crm-snap), transform var(--crm-t-panel) var(--crm-snap), visibility 0s linear var(--crm-t-panel); }
.crm-ini-razon::before { content: ""; position: absolute; inset: -1px -1px auto; height: 1px; background: linear-gradient(90deg, transparent, var(--crm-acento) 50%, transparent) no-repeat -40% 0 / 40% 100%; }
.crm-ini-paso[data-abierto] .crm-ini-razon { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.crm-ini-paso[data-abierto] .crm-ini-razon::before { animation: crm-filo calc(var(--crm-t-filo) * 1.5) var(--crm-curva) 1 both; }
.crm-ini-paso:last-child .crm-ini-razon { top: auto; bottom: calc(100% - 4px); transform: translateY(4px); }
.crm-ini-razon dl, .crm-ini-foco-recomienda dl { display: grid; gap: 6px; padding: 14px 16px; font-size: 12px; line-height: 18px; color: var(--crm-text-2); }
.crm-ini-razon dl > div, .crm-ini-foco-recomienda dl > div { display: grid; grid-template-columns: 80px 1fr; gap: 14px; }
.crm-ini-razon dt, .crm-ini-foco-recomienda dt { font: 500 10px/18px var(--crm-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--crm-dim); }

/* La pregunta (Compositor del kit) y sus ideas */
.crm-ini-pregunta { display: grid; gap: 10px; width: 100%; max-width: 760px; }
.crm-ini-ideas { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.crm-ini-idea { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 11px; border: 1px solid var(--crm-line); background: var(--crm-ini-vidrio); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--crm-text-2); font: 400 12px var(--crm-sans); text-align: left; cursor: pointer; transition: border-color var(--crm-t-color), color var(--crm-t-color); }
.crm-ini-idea svg { flex: none; width: 14px; height: 14px; color: var(--crm-acento); }
.crm-ini-idea span { white-space: nowrap; }
.crm-ini-idea i { font-style: normal; color: var(--crm-dim); transition: transform var(--crm-t-gesto) var(--crm-snap), color var(--crm-t-color); }
.crm-ini-idea:hover { border-color: var(--crm-line-2); color: var(--crm-text); }
.crm-ini-idea:hover i { color: var(--crm-acento); transform: translateX(3px); }
.crm-ini-idea:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: 2px; }

/* Pie de atajos */
.crm-ini-pie { position: relative; z-index: 2; display: flex; justify-content: center; padding: 6px 16px; border-top: 1px solid var(--crm-line); background: var(--crm-bg); }
.crm-ini-atajos { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
.crm-ini-atajo { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 9px 0 4px; border: 0; background: none; color: var(--crm-muted); font: 400 12px var(--crm-sans); white-space: nowrap; cursor: pointer; transition: color var(--crm-t-color), background-color var(--crm-t-color); }
.crm-ini-atajo:hover, .crm-ini-atajo-caja[data-pulsada] .crm-ini-atajo { background: var(--crm-panel); color: var(--crm-text); }
.crm-ini-atajo:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: -1px; }
.crm-ini-tecla { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border: 1px solid var(--crm-line-2); border-bottom-width: 2px; background: var(--crm-panel-2); font: 500 11px var(--crm-mono); color: var(--crm-muted); transition: color var(--crm-t-color), border-color var(--crm-t-color), transform var(--crm-t-pulsar); }
.crm-ini-atajo:hover .crm-ini-tecla { border-color: var(--crm-control); color: var(--crm-text); }
.crm-ini-atajo-caja[data-pulsada] .crm-ini-tecla { transform: translateY(1px); border-bottom-width: 1px; border-color: var(--crm-acento-linea); color: var(--crm-acento); }

/* Respuesta del Motor: flota sobre la caja, nunca empuja */
.crm-ini-pregunta { position: relative; }
.crm-ini-respuesta { position: absolute; z-index: 9; right: 0; bottom: calc(100% + 8px); left: 0; max-height: min(52vh, 460px); overflow: auto; display: grid; gap: 10px; padding: 14px 16px 12px; border: 1px solid var(--crm-line-2); background: var(--crm-panel-2); box-shadow: var(--crm-sombra-capa); animation: crm-ini-sube var(--crm-t-capa) var(--crm-snap) both; }
@keyframes crm-ini-sube { from { opacity: 0; transform: translateY(6px); } }
.crm-ini-respuesta::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--crm-acento) 50%, transparent) no-repeat -40% 0 / 40% 100%; }
.crm-ini-respuesta[data-estado="pensando"]::before { animation: crm-filo-continuo var(--crm-t-filo) var(--crm-curva) infinite; }
.crm-ini-respuesta-cab { display: flex; align-items: baseline; gap: 12px; }
.crm-ini-respuesta[data-estado="lista"] .crm-ini-respuesta-cab .crm-ini-rotulo { color: var(--crm-acento); }
.crm-ini-respuesta[data-estado="error"] .crm-ini-respuesta-cab .crm-ini-rotulo { color: var(--crm-error); }
.crm-ini-respuesta-pregunta { flex: 1; min-width: 0; overflow: hidden; font-size: 13px; color: var(--crm-text-2); text-overflow: ellipsis; white-space: nowrap; }
.crm-ini-respuesta-cerrar { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid transparent; background: none; color: var(--crm-dim); cursor: pointer; transition: border-color var(--crm-t-color), color var(--crm-t-color); }
.crm-ini-respuesta-cerrar svg { width: 12px; height: 12px; }
.crm-ini-respuesta-cerrar:hover { border-color: var(--crm-line-2); color: var(--crm-text); }
.crm-ini-respuesta-texto { font-size: 14px; line-height: 1.5; color: var(--crm-text); white-space: pre-line; }
.crm-ini-respuesta-items { display: grid; }
.crm-ini-respuesta-item { display: grid; gap: 1px; padding: 7px 0; border-top: 1px solid var(--crm-line); }
.crm-ini-respuesta-item span { font-size: 13px; color: var(--crm-text-2); }
.crm-ini-respuesta-item small { font: 400 11px/15px var(--crm-mono); color: var(--crm-dim); }
a.crm-ini-respuesta-item:hover span { color: var(--crm-text); }
.crm-ini-respuesta-pie { display: flex; justify-content: flex-end; }

/* ── Plan en modo foco ── */
.crm-ini-foco { display: grid; gap: 16px; }
.crm-ini-foco-recomienda { position: relative; display: grid; gap: 6px; padding: 14px 16px 2px 18px; border: 1px solid var(--crm-line); background: var(--crm-panel); }
.crm-ini-foco-recomienda::before { content: ""; position: absolute; top: -1px; bottom: -1px; left: -1px; width: 2px; background: var(--crm-acento); }
.crm-ini-foco-recomienda > p { font-size: 15px; line-height: 1.5; color: var(--crm-text); }
.crm-ini-foco-recomienda dl { padding: 6px 0 12px; }
.crm-ini-foco-ficha { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); border-top: 1px solid var(--crm-line); border-left: 1px solid var(--crm-line); }
.crm-ini-foco-ficha > div { display: grid; align-content: start; gap: 2px; padding: 10px 12px; border-right: 1px solid var(--crm-line); border-bottom: 1px solid var(--crm-line); }
.crm-ini-foco-ficha > div:first-child { grid-column: 1 / -1; }
.crm-ini-foco-ficha > div[data-ancho="doble"] { grid-column: span 2; }
.crm-ini-foco-ficha > div[data-ancho="doble"] dd { font-family: var(--crm-mono); font-size: 13px; }
.crm-ini-foco-ficha > div:first-child dd { font-size: 16px; font-weight: 500; }
.crm-ini-foco-ficha dt { font: 500 10px/14px var(--crm-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--crm-dim); }
.crm-ini-foco-ficha dd { overflow-wrap: anywhere; font-size: 14px; line-height: 20px; color: var(--crm-text); font-variant-numeric: tabular-nums; }

/* ── Entrada: primero habla el Motor, luego se enciende la foto ── */
.crm-ini-aparece { opacity: 0; transform: translateY(6px); transition: opacity var(--crm-t-capa) var(--crm-snap), transform var(--crm-t-capa) var(--crm-snap); }
.crm-ini[data-encendida] .crm-ini-aparece { opacity: 1; transform: none; }
.crm-ini[data-encendida] .crm-ini-ala .crm-ini-aparece { transition-delay: var(--crm-t-gesto); }

/* ── Alturas ── */
@media (max-height: 960px) {
  .crm-ini-titular { font-size: 48px; }
  .crm-ini-resumen { font-size: 14px; }
  .crm-ini-paso { padding: 9px 0; }
}
@media (max-height: 860px) {
  .crm-ini { --crm-ini-hueco: 8px; }
  .crm-ini-titular { font-size: 40px; }
  .crm-ini-centro { gap: 14px; }
  .crm-ini-kpi-dentro { padding: 8px 10px 9px; }
  .crm-ini-kpi-fila { margin-top: 3px; }
  .crm-ini-kpi-cifra { font-size: 20px; line-height: 24px; }
  .crm-ini-hoja { gap: 7px; padding: 10px 12px 11px; }
  .crm-ini-hoja-cifra strong { font-size: 20px; line-height: 24px; }
  .crm-ini-cal-fila { padding: 4px 0; }
  .crm-ini-leyenda li { font-size: 11px; line-height: 15px; }
}
@media (max-height: 820px) {
  .crm-ini-centro { gap: 10px; padding-bottom: 0; }
  .crm-ini-idea { min-height: 32px; }
}
@media (max-height: 820px) {
  .crm-ini-ideas { display: none; }
}
@media (max-height: 740px) {
  .crm-ini-ideas, .crm-ini-lectura { display: none; }
  .crm-ini-titular { font-size: 40px; }
}

/* ── Anchuras (del contenedor: con la barra lateral abierta o plegada) ── */
@container crm-ini (max-width: 1240px) {
  .crm-ini-titular { font-size: 40px; }
  .crm-ini-ala-cab .crm-ini-tenue, .crm-ini-paso-cifra span { display: none; }
  .crm-ini-boton { min-width: 0; }
}
@container crm-ini-centro (max-width: 560px) {
  .crm-ini-plan-cab > .crm-ini-tenue { display: none; }
}
@container crm-ini (max-width: 820px) {
  .crm-ini-atajo span { display: none; }
  .crm-ini-atajo { padding: 0 4px; }
}
/* Por debajo de un escritorio no cabe todo: se apila, el Motor primero, y la página desplaza. */
@container crm-ini (max-width: 1000px) {
  .crm-ini-escena { grid-template-columns: 1fr 1fr; overflow: visible; }
  .crm-ini-centro { grid-column: 1 / -1; order: -1; padding: 12px 0 20px; }
}
@container crm-ini (max-width: 640px) {
  .crm-ini-escena { grid-template-columns: 1fr; padding: 16px; }
  .crm-ini-titular { font-size: 40px; }
  .crm-ini-paso { grid-template-columns: 24px minmax(0, 1fr); }
  .crm-ini-paso-der { grid-column: 2; justify-content: space-between; padding-top: 8px; }
  .crm-ini-paso-cifra { text-align: left; }
  .crm-ini-razon { left: 0; }
  .crm-ini-plan-cab { flex-wrap: wrap; }
  .crm-ini-atajos { flex-wrap: nowrap; overflow-x: auto; justify-content: start; scrollbar-width: none; }
}
/* Por debajo de 700 de alto (portátil de 1366×768 con el navegador) no cabe sin cortar la pregunta:
   antes que cortar, la escena crece y el marco desplaza. */
@media (max-width: 1240px), (max-height: 700px) {
  .crm-marco-contenido > .crm-ini, .crm-ini { height: auto; }
  .crm-ini-escena { overflow: visible; }
  .crm-ini-ala { grid-template-rows: none; }
  /* El velo decorativo cabe dentro del margen de 16 px de la escena móvil. */
  .crm-ini-voz::after, .crm-ini-plan::after, .crm-ini-pregunta::after, .crm-ini-ala-cab::after, .crm-ini-vehiculo::after { inset-inline: -12px; }
}
/* ── Inicio de un cliente: su ficha, leer otra web, pares y la entrada de un coche ── */

/* Fuera del marco (portada, demostración), la escena es la ventana. */
.crm-ini[data-pantalla] { height: 100dvh; }

/* Ficha del cliente: el rótulo de su fachada sobre papel, quién es y el sello de la fuente. */
.crm-ini-cliente { gap: 12px; }
.crm-ini-cliente-rotulo { display: flex; align-items: center; justify-content: center; height: 64px; padding: 8px 12px; border: 1px solid var(--crm-line); background: var(--crm-placa-fondo); forced-color-adjust: none; }
.crm-ini-cliente-rotulo img { display: block; max-width: 100%; max-height: 48px; object-fit: contain; }
.crm-ini-cliente-id { display: grid; gap: 2px; min-width: 0; }
.crm-ini-cliente-id h3 { overflow-wrap: anywhere; font-size: 15px; font-weight: 500; line-height: 22px; letter-spacing: -0.01em; }
.crm-ini-cliente-id h3[data-solo] { font-size: 20px; line-height: 28px; letter-spacing: -0.02em; }
.crm-ini-cliente-id p { font-size: 12px; line-height: 16px; color: var(--crm-muted); }
.crm-ini-cliente-texto { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 5; font-size: 13px; line-height: 20px; color: var(--crm-text-2); }
.crm-ini-cliente-etiquetas { display: flex; flex-wrap: wrap; gap: 4px; }
.crm-ini-cliente-etiquetas li { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border: 1px solid var(--crm-line-2); font-size: 12px; line-height: 16px; color: var(--crm-text-2); white-space: nowrap; }
.crm-ini-cliente-sello { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; padding-top: 12px; border-top: 1px solid var(--crm-line); font: 400 11px/16px var(--crm-mono); color: var(--crm-dim); }
.crm-ini-cliente-sello > span:first-child { color: var(--crm-acento); }
.crm-ini-cliente-sello a { overflow-wrap: anywhere; color: var(--crm-text-2); transition: color var(--crm-t-color); }
.crm-ini-cliente-sello a:hover { color: var(--crm-text); text-decoration: underline; text-decoration-color: var(--crm-line-2); text-underline-offset: 2px; }

/* Leer otra web: cerrado, un botón discreto; leyendo, el filo recorre el campo. */
.crm-ini-lector-abrir { justify-self: start; }
.crm-ini-lector { display: grid; gap: 8px; }
.crm-ini-lector .crm-entrada { position: relative; }
.crm-ini-lector .crm-entrada::after { content: ""; position: absolute; inset: -1px -1px auto; height: 1px; background: linear-gradient(90deg, transparent, var(--crm-acento) 50%, transparent) no-repeat -40% 0 / 40% 100%; opacity: 0; pointer-events: none; }
.crm-ini-lector[data-leyendo] .crm-entrada::after { opacity: 1; animation: crm-filo-continuo var(--crm-t-filo) var(--crm-curva) infinite; }
.crm-ini-lector-dominio { font-family: var(--crm-mono); }
.crm-ini-lector-dominio b { font-weight: 400; color: var(--crm-text); }
.crm-ini-lector-acciones { display: flex; flex-wrap: wrap; gap: 8px; }

/* Pares rótulo/valor de una hoja. */
.crm-ini-pares { display: grid; }
.crm-ini-pares > div { display: grid; grid-template-columns: minmax(64px, auto) minmax(0, 1fr); gap: 12px; align-items: center; min-height: 40px; padding: 4px 0; border-top: 1px solid var(--crm-line); }
.crm-ini-pares dt { font: 400 11px/16px var(--crm-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--crm-dim); }
.crm-ini-pares dd { display: flex; justify-content: flex-end; min-width: 0; overflow: hidden; font-size: 13px; line-height: 20px; color: var(--crm-text-2); text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.crm-ini-pares dd[data-mono] { font-family: var(--crm-mono); font-variant-numeric: tabular-nums; }

/* La entrada de un coche: la placa grande, su nota y la acción blanca de la vista. */
.crm-ini-vehiculo { display: grid; justify-items: center; gap: 8px; width: 100%; max-width: 760px; }
.crm-ini-vehiculo .crm-placa-editor { gap: 8px; }
.crm-ini-vehiculo-pie { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: min(560px, 100%); }
.crm-ini-vehiculo-nota { min-width: 0; font: 400 11px/16px var(--crm-mono); color: var(--crm-dim); }
.crm-ini-vehiculo-pie > :last-child { margin-left: auto; }
/* El lector: una línea de acento que barre la placa mientras se guarda. */
.crm-ini-vehiculo .crm-placa::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--crm-acento); opacity: 0; pointer-events: none; }
.crm-ini-vehiculo[data-leyendo] .crm-placa::after { opacity: 1; animation: crm-ini-lector var(--crm-t-filo) var(--crm-curva) infinite alternate; }
@keyframes crm-ini-lector { from { left: 0; } to { left: calc(100% - 2px); } }
@container crm-ini-centro (max-width: 560px) {
  .crm-ini-vehiculo-pie { flex-direction: column; align-items: stretch; text-align: center; }
  .crm-ini-vehiculo-pie > :last-child { margin-left: 0; }
}
@media (max-height: 820px) {
  .crm-ini-vehiculo > .crm-ini-rotulo { display: none; }
}

/* Accesos: las capacidades del inicio, con su tecla. */
.crm-ini-accesos-caja { width: 100%; max-width: 760px; }
.crm-ini-accesos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.crm-ini-accesos > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.crm-ini-acceso { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 2px 12px; align-items: center; width: 100%; min-height: 64px; padding: 12px 12px 12px 16px; border: 1px solid var(--crm-line); background: var(--crm-ini-vidrio); color: var(--crm-text); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--crm-t-color), background-color var(--crm-t-color); }
.crm-ini-acceso:hover { border-color: var(--crm-line-2); background: color-mix(in srgb, var(--crm-panel-2) 90%, transparent); }
.crm-ini-acceso:hover::before { opacity: 1; animation: crm-filo calc(var(--crm-t-filo) * 2) var(--crm-curva) 1 both; }
.crm-ini-acceso:active { background: var(--crm-panel-2); }
.crm-ini-acceso-icono { display: grid; place-items: center; width: 16px; height: 16px; color: var(--crm-muted); }
.crm-ini-acceso-icono svg { width: 16px; height: 16px; stroke-width: 1.6; }
.crm-ini-acceso:hover .crm-ini-acceso-icono { color: var(--crm-text); }
.crm-ini-acceso-titulo { overflow: hidden; font-size: 15px; font-weight: 500; line-height: 22px; letter-spacing: -0.01em; text-overflow: ellipsis; white-space: nowrap; }
.crm-ini-acceso-linea { grid-column: 2; overflow: hidden; font-size: 12px; line-height: 16px; color: var(--crm-muted); text-overflow: ellipsis; white-space: nowrap; }
.crm-ini-acceso-distintivo { grid-column: 3; font: 400 11px/16px var(--crm-mono); color: var(--crm-dim); white-space: nowrap; }
.crm-ini-accesos li[data-pulsada] .crm-ini-tecla { transform: translateY(1px); border-bottom-width: 1px; border-color: var(--crm-acento-linea); color: var(--crm-acento); }
.crm-ini-acceso[aria-disabled="true"] { border-color: var(--crm-linea-apagada); background: none; color: var(--crm-dim); cursor: not-allowed; }
.crm-ini-acceso[aria-disabled="true"]:hover::before { animation: none; opacity: 0; }
.crm-ini-acceso[aria-disabled="true"] .crm-ini-acceso-icono, .crm-ini-acceso[aria-disabled="true"] .crm-ini-acceso-linea { color: var(--crm-dim); }
@container crm-ini-centro (max-width: 560px) {
  .crm-ini-accesos { grid-template-columns: minmax(0, 1fr); }
}

/* Respuesta: sello de la fuente y fuentes que se abren en la escena. */
.crm-ini-respuesta-sello { font: 400 11px/16px var(--crm-mono); color: var(--crm-dim); }
button.crm-ini-respuesta-item { width: 100%; border: 0; border-top: 1px solid var(--crm-line); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
button.crm-ini-respuesta-item:hover span { color: var(--crm-text); }

@media (max-width: 1240px), (max-height: 700px) {
  .crm-ini[data-pantalla] { height: auto; min-height: 100dvh; }
}
@media (prefers-reduced-motion: reduce) {
  .crm-ini *, .crm-ini *::before, .crm-ini *::after { animation: none !important; transition-property: color, background-color, border-color, opacity, visibility !important; }
  .crm-ini-aparece { opacity: 1; transform: none; }
  /* Sin barrido: el lector se queda quieto en el borde, el botón ya dice que espera. */
  .crm-ini-vehiculo[data-leyendo] .crm-placa::after, .crm-ini-lector[data-leyendo] .crm-entrada::after { opacity: 0; }
}

/* Un solo anillo de marca en todo lo enfocable de la familia (FUNDAMENTOS §7). */
.crm-ini :is(.crm-ini-porque, .crm-ini-hoja-abrir, .crm-ini-respuesta-cerrar, .crm-ini-empezar, .crm-ini-idea, .crm-ini-boton, .crm-ini-kpi):focus-visible { outline: var(--crm-foco-ancho, 1px) solid var(--crm-acento); outline-offset: 2px; }
.crm-ini :is(.crm-ini-acceso):focus-visible { outline: var(--crm-foco-ancho, 1px) solid var(--crm-acento); outline-offset: 2px; }
.crm-ini .crm-ini-cliente-sello a:focus-visible { outline: var(--crm-foco-ancho, 1px) solid var(--crm-acento); outline-offset: 2px; }
.crm-ini :is(.crm-ini-cal-fila, .crm-ini-respuesta-item, .crm-ini-atajo):focus-visible { outline: var(--crm-foco-ancho, 1px) solid var(--crm-acento); outline-offset: -1px; }

/* ── PreguntaInicio: la matrícula cae sobre su placa en el propio campo ── */
.crm-ini-placa-viva { container-type: inline-size; width: 100%; display: flex; align-items: center; gap: 16px; min-width: 0; }
.crm-ini-placa-viva .crm-placa { flex: none; }
.crm-ini-placa-nota { min-width: 0; color: var(--crm-muted); font-size: 13px; line-height: 20px; }
.crm-ini-placa-nota b { color: var(--crm-text); font-weight: 500; }
.crm-ini-tecla-mini { display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 3px; border: 1px solid var(--crm-line-2); border-bottom-width: 2px; font: 500 10px var(--crm-mono); color: var(--crm-text); vertical-align: -3px; margin-right: 4px; }
.crm-compositor-pista [data-tono="error"] { color: var(--crm-error); }
/* Sin hueco para la nota a su lado: la placa sola (la nota la dice el lector). */
@container (max-width: 360px) { .crm-ini-placa-nota { display: none; } }

/* Secretario · expediente, sobre y resguardo. Solo esta familia, sin reglas globales. */
.crm-secretario { container: crm-secretario / inline-size; min-width: 0; color: var(--crm-text); font: 400 13px/20px var(--crm-sans); }
.crm-secretario *, .crm-secretario *::before, .crm-secretario *::after { box-sizing: border-box; }
.crm-secretario :where(h2,h3,h4,p,dl,dd,dt,ol,ul) { margin: 0; }
.crm-secretario :where(h2,h3,h4,p,dd,dt,li,span,time) { min-width: 0; overflow-wrap: anywhere; }
.crm-secretario :where(h2) { font-size: 24px; line-height: 32px; font-weight: 500; letter-spacing: -.03em; }
.crm-secretario :where(h3) { font-size: 15px; line-height: 22px; font-weight: 500; letter-spacing: -.01em; }
.crm-secretario :where(h4) { font-size: 13px; line-height: 20px; font-weight: 500; }
.crm-secretario svg { width: 16px; height: 16px; flex: none; stroke-width: 1.6; }
.crm-secretario .crm-boton { max-width: 100%; }
.crm-sec-rotulo { color: var(--crm-muted); font: 400 11px/16px var(--crm-mono); letter-spacing: .06em; text-transform: uppercase; }
.crm-sec-codigo,.crm-sec-numero,.crm-sec-cuenta,.crm-sec-valor { font-family: var(--crm-mono); font-variant-numeric: tabular-nums; }
.crm-sec-ayuda { color: var(--crm-muted); font-size: 12px; line-height: 16px; }
.crm-sec-cabecera { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-bottom: 1px solid var(--crm-line); }
.crm-sec-identidad { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.crm-sec-identidad > div { flex: 1 1 160px; min-width: 0; }
.crm-sec-identidad dt { color: var(--crm-muted); font-size: 12px; line-height: 16px; }
.crm-sec-identidad dd { font-size: 13px; line-height: 20px; }
.crm-sec-identidad[data-compacta] > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.crm-sec-asignacion { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--crm-muted); font-size: 12px; line-height: 16px; }
.crm-sec-mesa { border-top: 2px solid var(--crm-acento); }
.crm-sec-mesa > .crm-sec-cabecera { padding-inline: 0; }
.crm-sec-adelanto { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.crm-sec-salto { min-width: 0; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; max-width: 100%; color: var(--crm-text); font-size: 13px; line-height: 20px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
.crm-sec-salto-texto { min-width: 0; overflow-wrap: anywhere; }
.crm-sec-salto > svg { color: var(--crm-muted); transition: transform var(--crm-t-gesto) var(--crm-snap); }
.crm-sec-salto:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; }
.crm-sec-salto:active { color: var(--crm-text-2); }
.crm-sec-mesa :where([data-crm-sec-destino]) { outline: none; scroll-margin-top: 64px; }
@media (hover: hover) { .crm-sec-salto:hover > svg { transform: translateY(2px); } }
.crm-sec-trabajo { display: flex; flex-direction: column; gap: 24px; padding-block: 24px; }
.crm-sec-siguiente { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 16px 20px; border-top: 1px solid var(--crm-line); }
.crm-sec-siguiente > div:first-child { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.crm-sec-mesa > .crm-sec-siguiente { padding-inline: 0; }
.crm-sec-accion { display: flex; align-items: flex-start; flex-direction: column; gap: 8px; }
.crm-sec-aviso { display: flex; align-items: flex-start; gap: 8px; color: var(--crm-aviso); padding: 16px 20px; font-size: 13px; line-height: 20px; }
.crm-sec-aviso > svg { margin-top: 2px; }
.crm-sec-aviso[data-error] { color: var(--crm-error); }
.crm-sec-padding { padding: 12px 20px; }
.crm-sec-sr { position: absolute; width: 1px; height: 1px; padding: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }

/* Cobertura: el visto acredita una lectura, nunca una conexión. */
.crm-sec-cobertura { border-block: 1px solid var(--crm-line); }
.crm-sec-cobertura-cabecera { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding: 16px 20px; }
.crm-sec-cuenta { color: var(--crm-muted); font-size: 12px; line-height: 16px; }
.crm-sec-fuentes { list-style: none; padding: 0; }
.crm-sec-fuentes > li { display: grid; grid-template-columns: 16px minmax(0,1fr); gap: 12px; padding: 16px 20px; border-top: 1px solid var(--crm-line); }
.crm-sec-fuente-marca { color: var(--crm-muted); padding-top: 2px; }
.crm-sec-fuentes > li[data-estado="leida"] .crm-sec-fuente-marca { color: var(--crm-acento); }
.crm-sec-fuentes > li[data-estado="parcial"] .crm-sec-fuente-marca,.crm-sec-fuentes > li[data-estado="obsoleta"] .crm-sec-fuente-marca { color: var(--crm-aviso); }
.crm-sec-fuentes > li[data-estado="error"] .crm-sec-fuente-marca { color: var(--crm-error); }
.crm-sec-fuente-cuerpo { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.crm-sec-fuente-titulo { display: flex; width: 100%; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; }
.crm-sec-estado { color: var(--crm-muted); font-size: 12px; line-height: 16px; }
.crm-sec-intervalo { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.crm-sec-hallazgo { font-size: 14px; line-height: 22px; color: var(--crm-text-2); }
.crm-sec-vacio { padding: 24px 20px; color: var(--crm-muted); }
.crm-sec-cobertura > .crm-sec-accion { padding: 16px 20px; border-top: 1px solid var(--crm-line); }

/* Sobre: destinatarios antes del contenido, versión visible en cabecera. */
.crm-sec-revision { border: 1px solid var(--crm-line); background: var(--crm-panel); }
.crm-sec-revision[data-estado="por-revisar"] { border-top: 2px solid var(--crm-acento-linea); }
.crm-sec-version { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; width: 100%; }
.crm-sec-revision[data-estado="por-revisar"] .crm-sec-version > .crm-sec-estado,.crm-sec-revision[data-estado="aprobada"] .crm-sec-version > .crm-sec-estado { color: var(--crm-acento); }
.crm-sec-revision[data-estado="caducada"] .crm-sec-version > .crm-sec-estado,.crm-sec-revision[data-estado="obsoleta"] .crm-sec-version > .crm-sec-estado { color: var(--crm-aviso); }
.crm-sec-sobre { padding: 12px 20px; border-bottom: 1px solid var(--crm-line); }
.crm-sec-sobre > div { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 12px; padding-block: 8px; }
.crm-sec-sobre dt { color: var(--crm-muted); }
.crm-sec-sobre ul { list-style: none; padding: 0; }
.crm-sec-sobre dd { color: var(--crm-text-2); }
.crm-sec-texto { padding: 24px 20px; font-size: 15px; line-height: 24px; color: var(--crm-text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.crm-sec-adjuntos,.crm-sec-cotejo { list-style: none; padding: 0 20px; }
.crm-sec-adjuntos > li,.crm-sec-cotejo > li { display: grid; grid-template-columns: 24px minmax(0,1fr) auto; align-items: start; gap: 12px; padding-block: 16px; border-top: 1px solid var(--crm-line); }
.crm-sec-numero { color: var(--crm-muted); font-size: 12px; line-height: 20px; }
.crm-sec-revision-pie { padding: 16px 20px; border-top: 1px solid var(--crm-line); display: flex; flex-direction: column; gap: 16px; }
.crm-sec-revision-acciones { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; }

/* Resguardo: registro perforado, confirmación solo con prueba. */
.crm-sec-recibo { border: 1px solid var(--crm-line); background: var(--crm-panel); }
.crm-sec-recibo-estado { display: flex; align-items: center; gap: 8px; color: var(--crm-muted); }
.crm-sec-recibo[data-estado="confirmado"] .crm-sec-recibo-estado { color: var(--crm-acento); }
.crm-sec-recibo > .crm-sec-identidad { padding: 16px 20px; }
.crm-sec-registro { padding: 16px 20px; border-block: 1px dashed var(--crm-control); display: flex; flex-direction: column; gap: 16px; }
.crm-sec-registro dt { font-size: 12px; line-height: 16px; color: var(--crm-muted); }
.crm-sec-registro dd { font-size: 14px; line-height: 22px; }
.crm-sec-registro .crm-sec-codigo { font-size: 20px; line-height: 28px; }
.crm-sec-recibo-acciones { padding: 16px 20px; }
.crm-sec-recibo-acciones:empty { display: none; }

/* Cotejo: cada fuente conserva su propio valor. */
.crm-sec-conflicto { border: 1px solid var(--crm-aviso-linea); background: var(--crm-panel); }
.crm-sec-cotejo > li { padding-block: 20px; }
.crm-sec-cotejo > li > div { display: flex; flex-direction: column; gap: 8px; }
.crm-sec-valor { font-size: 20px; line-height: 28px; color: var(--crm-text); white-space: normal; }

@container crm-secretario (max-width: 719px) {
  .crm-sec-siguiente { align-items: flex-start; flex-direction: column; }
  .crm-sec-cabecera,.crm-sec-cobertura-cabecera,.crm-sec-fuentes > li,.crm-sec-aviso,.crm-sec-sobre,.crm-sec-texto,.crm-sec-revision-pie,.crm-sec-registro,.crm-sec-recibo > .crm-sec-identidad,.crm-sec-recibo-acciones { padding-inline: 16px; }
  .crm-sec-adjuntos,.crm-sec-cotejo { padding-inline: 16px; }
  .crm-secretario .crm-boton,.crm-sec-salto { min-height: 48px; }
}
@container crm-secretario (max-width: 399px) {
  .crm-sec-identidad > div { flex-basis: 100%; }
  .crm-sec-adjuntos > li,.crm-sec-cotejo > li { grid-template-columns: 24px minmax(0,1fr); }
  .crm-sec-adjuntos > li > .crm-boton,.crm-sec-cotejo > li > .crm-boton { grid-column: 2; justify-self: start; }
  .crm-sec-revision-acciones { flex-direction: column; }
  .crm-sec-sobre > div { grid-template-columns: minmax(0,1fr); gap: 4px; }
}
@media (prefers-reduced-motion: reduce) { .crm-secretario .crm-boton,.crm-sec-salto > svg { transition: none; transform: none; } }
@media (forced-colors: active) {
  .crm-sec-mesa,.crm-sec-revision,.crm-sec-recibo,.crm-sec-conflicto,.crm-sec-registro { border-color: CanvasText; }
  .crm-sec-estado,.crm-sec-aviso,.crm-sec-fuente-marca,.crm-sec-recibo-estado { color: CanvasText; }
}

/* La respuesta ocupa su columna visible incluso con fuentes o identificadores largos. */
.crm-ini-respuesta { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.crm-ini-respuesta > * { min-width: 0; }
.crm-ini-respuesta-items { grid-template-columns: minmax(0, 1fr); }
.crm-ini-respuesta-items > li { min-width: 0; }
.crm-ini-respuesta-item { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.crm-ini-respuesta-texto,
.crm-ini-respuesta-item span,
.crm-ini-respuesta-item small { overflow-wrap: anywhere; }
.crm-ini-respuesta-pie { min-width: 0; }
.crm-ini-respuesta-pie > a { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }

/* ── Inicio · mesa y plano del taller (familia inicio, 14-10-2026) ─────────────────────────────── */
/* Solo tokens del tema (--crm-*). Radio 0; los círculos, solo en puntos de estado. */

/* ── Escena en mesa: el Motor arriba, a lo ancho; debajo, la mesa de trabajo (ala ancha + ala estrecha). ── */
.crm-ini[data-disposicion="mesa"],
.crm-marco-contenido > .crm-ini[data-disposicion="mesa"] { height: auto; min-height: 100%; }
.crm-ini[data-disposicion="mesa"][data-pantalla] { min-height: 100dvh; }
/* La escena ocupa todo el ancho (la C de fondo llega de lado a lado); el contenido se centra a 1240 con el relleno. */
.crm-ini[data-disposicion="mesa"] .crm-ini-escena {
  --crm-mesa-ancho: 1240px;
  overflow: visible; width: 100%; max-width: none; margin-inline: 0;
  grid-template-columns: minmax(0, 1.3fr) minmax(360px, 1fr);
  grid-template-areas: "centro centro" "izquierda derecha";
  row-gap: clamp(40px, 7vh, 72px); column-gap: clamp(24px, 3cqi, 48px);
  padding: clamp(40px, 8vh, 88px) max(clamp(16px, 3cqi, 40px), calc((100% - var(--crm-mesa-ancho)) / 2)) 48px;
}
.crm-ini[data-disposicion="mesa"] .crm-ini-centro { grid-area: centro; width: 100%; max-width: 880px; justify-self: center; justify-items: center; align-content: start; padding-bottom: 0; }
/* La pregunta, centrada como el saludo aunque la envuelva un contenedor de la app. */
.crm-ini[data-disposicion="mesa"] .crm-ini-centro .crm-ini-pregunta { margin-inline: auto; }
.crm-ini[data-disposicion="mesa"] .crm-ini-ala[data-lado="izquierda"] { grid-area: izquierda; }
.crm-ini[data-disposicion="mesa"] .crm-ini-ala[data-lado="derecha"] { grid-area: derecha; }
.crm-ini[data-disposicion="mesa"] .crm-ini-ala { grid-template-rows: none; }
/* La página ya desplaza: el titular y el razonamiento no reservan líneas que no usan. */
.crm-ini[data-disposicion="mesa"] .crm-ini-titular { min-height: 1.04em; }
.crm-ini[data-disposicion="mesa"] .crm-ini-resumen { min-height: 1.55em; }
/* La C vive detrás del Motor y se apaga antes de la mesa: la mesa se lee sobre el fondo limpio. */
.crm-ini[data-disposicion="mesa"] .crm-ini-fondo { -webkit-mask-image: linear-gradient(180deg, var(--crm-bg) 0, var(--crm-bg) 38%, transparent 54%); mask-image: linear-gradient(180deg, var(--crm-bg) 0, var(--crm-bg) 38%, transparent 54%); }
@container crm-ini (max-width: 1000px) {
  .crm-ini[data-disposicion="mesa"] .crm-ini-escena { grid-template-columns: minmax(0, 1fr); grid-template-areas: "centro" "izquierda" "derecha"; }
}

/* ── Plano del taller ── */
.crm-ini-plano { --crm-plano-alto: 104px; --crm-plano-calle: 32px; --crm-plano-muro: 12px; display: grid; gap: 16px; min-width: 0; }
.crm-ini-plano-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.crm-ini-plano-cifras { display: flex; gap: 6px; }
.crm-ini-plano-cifra {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px;
  border: 1px solid var(--crm-line); background: transparent; color: var(--crm-muted);
  font: 400 12px/16px var(--crm-sans); white-space: nowrap;
  transition: border-color var(--crm-t-color), background-color var(--crm-t-color), color var(--crm-t-color);
}
.crm-ini-plano-cifra[data-total] { border-color: transparent; padding-inline: 4px 8px; }
.crm-ini-plano-cifra b { font: 500 20px/24px var(--crm-sans); letter-spacing: -0.025em; font-variant-numeric: tabular-nums; color: var(--crm-text); }
.crm-ini-plano-cifra i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--crm-control); }
.crm-ini-plano-cifra[data-estado="parado"] i { background: var(--crm-aviso); }
.crm-ini-plano-cifra[data-estado="listo"] i { background: var(--crm-acento); }
button.crm-ini-plano-cifra { cursor: pointer; }
button.crm-ini-plano-cifra:hover:not(:disabled) { border-color: var(--crm-line-2); color: var(--crm-text-2); }
button.crm-ini-plano-cifra:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: 2px; }
button.crm-ini-plano-cifra[aria-pressed="true"] { border-color: var(--crm-line-2); background: var(--crm-panel-2); color: var(--crm-text); }
button.crm-ini-plano-cifra:disabled { cursor: default; opacity: var(--crm-apagado); }

/* La nave: hileras enfrentadas con su calle; cada plaza, una raya de aparcamiento y su número en la pared. */
.crm-ini-plano-nave { position: relative; display: grid; gap: 0; }
.crm-ini-plano-hilera { position: relative; display: grid; grid-template-columns: repeat(var(--crm-plano-hilera), minmax(0, 1fr)); height: var(--crm-plano-alto); border-top: 1px solid var(--crm-line-2); }
.crm-ini-plano-hilera[data-cara="arriba"] { margin-top: var(--crm-plano-calle); border-top: 0; border-bottom: 1px solid var(--crm-line-2); }
/* Entre parejas de hileras, el muro: dos rayas juntas. */
.crm-ini-plano-hilera[data-cara="abajo"] + .crm-ini-plano-hilera[data-cara="abajo"], .crm-ini-plano-hilera[data-cara="arriba"] + .crm-ini-plano-hilera[data-cara="abajo"] { margin-top: var(--crm-plano-muro); }
/* Línea discontinua de la calle, a mitad del hueco entre las dos hileras de una pareja. */
.crm-ini-plano-hilera[data-cara="arriba"]::before {
  content: ""; position: absolute; left: 0; right: 0; top: calc(var(--crm-plano-calle) / -2);
  border-top: 1px dashed var(--crm-line);
}
.crm-ini-plaza { position: relative; display: grid; place-items: center; min-width: 0; border-left: 1px solid var(--crm-line-2); }
.crm-ini-plaza:first-child { border-left: 0; }
.crm-ini-plaza-num { position: absolute; top: 4px; left: 6px; font: 500 10px/12px var(--crm-mono); letter-spacing: .04em; color: var(--crm-linea-apagada); }
.crm-ini-plano-hilera[data-cara="arriba"] .crm-ini-plaza-num { top: auto; bottom: 4px; }
.crm-ini-plaza[data-libre]::after { content: "LIBRE"; font: 500 10px/12px var(--crm-mono); letter-spacing: .08em; color: var(--crm-linea-apagada); }

/* El coche en planta. */
.crm-ini-coche-enlace { display: contents; }
.crm-ini-coche {
  display: grid; justify-items: center; gap: 4px; padding: 6px 4px; margin: 0; border: 0; background: none; color: inherit; cursor: pointer;
  transition: transform var(--crm-t-gesto) var(--crm-snap), opacity var(--crm-t-color);
}
.crm-ini-plano-hilera[data-cara="arriba"] .crm-ini-coche { grid-auto-flow: row; }
.crm-ini-plano-hilera[data-cara="arriba"] .crm-ini-coche-planta { order: 2; transform: rotate(180deg); }
.crm-ini-coche:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: 2px; }
.crm-ini-coche:hover, .crm-ini-coche:focus-visible { transform: translateY(-2px); }
.crm-ini-coche-planta { display: block; width: 32px; height: 56px; overflow: visible; }
.crm-ini-coche-carro { fill: var(--crm-panel-2); stroke: var(--crm-control); stroke-width: 1.5; transition: stroke var(--crm-t-color), fill var(--crm-t-color); }
.crm-ini-coche-luna { fill: var(--crm-panel-3); stroke: var(--crm-control); stroke-width: 1; }
.crm-ini-coche-techo { fill: var(--crm-panel); stroke: var(--crm-line-2); stroke-width: 1; }
.crm-ini-coche-espejo { stroke: var(--crm-control); stroke-width: 1.5; fill: none; }
.crm-ini-coche-luces rect { fill: var(--crm-line-2); stroke: none; }
.crm-ini-coche-nuevo { fill: var(--crm-acento); stroke: var(--crm-bg); stroke-width: 2; opacity: 0; }
.crm-ini-coche-placa { display: grid; justify-items: center; font: 500 10px/12px var(--crm-mono); letter-spacing: .04em; color: var(--crm-dim); white-space: nowrap; transition: color var(--crm-t-color); }
.crm-ini-coche:hover .crm-ini-coche-carro, .crm-ini-coche:focus-visible .crm-ini-coche-carro { stroke: var(--crm-muted); }
.crm-ini-coche:hover .crm-ini-coche-placa, .crm-ini-coche:focus-visible .crm-ini-coche-placa { color: var(--crm-text); }

.crm-ini-plaza[data-nuevo] .crm-ini-coche-nuevo { opacity: 1; }
/* Parado: carrocería ámbar y los cuatro intermitentes de emergencia, a la vez, como en la calle. */
.crm-ini-plaza[data-estado="parado"] .crm-ini-coche-carro { stroke: var(--crm-aviso-linea); fill: color-mix(in srgb, var(--crm-aviso) 10%, var(--crm-panel-2)); }
.crm-ini-plaza[data-estado="parado"] .crm-ini-coche-luces rect { fill: var(--crm-aviso); animation: crm-ini-emergencia var(--crm-t-corriente) steps(1, end) infinite; }
.crm-ini-plaza[data-estado="parado"] .crm-ini-coche-placa { color: var(--crm-aviso); }
@keyframes crm-ini-emergencia { 50% { fill: var(--crm-line-2); } }
/* Para entregar: carrocería en verde, recién lavada. */
.crm-ini-plaza[data-estado="listo"] .crm-ini-coche-carro { stroke: var(--crm-acento-linea); fill: color-mix(in srgb, var(--crm-acento) 9%, var(--crm-panel-2)); }
.crm-ini-plaza[data-estado="listo"] .crm-ini-coche-placa { color: var(--crm-text-2); }
/* Filtro: lo que no se busca se apaga y sus luces callan. */
.crm-ini-plaza[data-apagado] .crm-ini-coche { opacity: var(--crm-apagado); }
.crm-ini-plaza[data-apagado] .crm-ini-coche-luces rect { animation: none; }

.crm-ini-plano-campa { justify-self: end; font: 500 11px/16px var(--crm-mono); letter-spacing: .04em; color: var(--crm-dim); }

/* La ficha flotante: junto al coche, hacia la calle; no empuja nada ni recibe el puntero. */
.crm-ini-plano-ficha {
  --crm-plano-x: calc(var(--crm-plano-col) * 100% / var(--crm-plano-hilera));
  position: absolute; z-index: 3; left: var(--crm-plano-x);
  top: calc(var(--crm-plano-fila) * var(--crm-plano-alto) + var(--crm-plano-calles) * var(--crm-plano-calle) + var(--crm-plano-muros) * var(--crm-plano-muro) + var(--crm-plano-alto) + 6px);
  display: grid; justify-items: start; gap: 4px; min-width: 200px; max-width: 280px; padding: 10px 12px 11px;
  border: 1px solid var(--crm-line-2); background: var(--crm-panel-3); box-shadow: var(--crm-sombra-capa);
  pointer-events: none; animation: crm-ini-ficha var(--crm-t-entrada) var(--crm-snap) both;
}
.crm-ini-plano-ficha[data-hilera="abajo"] { top: calc(var(--crm-plano-fila) * var(--crm-plano-alto) + var(--crm-plano-calles) * var(--crm-plano-calle) + var(--crm-plano-muros) * var(--crm-plano-muro) - 6px); translate: 0 -100%; }
.crm-ini-plano-ficha[data-lado="derecha"] { left: calc(var(--crm-plano-x) + 100% / var(--crm-plano-hilera)); translate: -100% 0; }
.crm-ini-plano-ficha[data-lado="derecha"][data-hilera="abajo"] { translate: -100% -100%; }
.crm-ini-plano-ficha b { margin-top: 4px; font: 500 13px/18px var(--crm-sans); color: var(--crm-text); }
.crm-ini-plano-ficha small { font: 400 11px/14px var(--crm-mono); color: var(--crm-dim); }
.crm-ini-plano-motivo { display: flex; gap: 8px; align-items: baseline; font: 500 12px/16px var(--crm-mono); color: var(--crm-text-2); }
.crm-ini-plano-motivo em { font-style: normal; color: var(--crm-dim); }
.crm-ini-plano-ficha[data-estado="parado"] .crm-ini-plano-motivo { color: var(--crm-aviso); }
.crm-ini-plano-ficha[data-estado="listo"] .crm-ini-plano-motivo { color: var(--crm-acento); }
@keyframes crm-ini-ficha { from { opacity: 0; } }

/* Móvil: la hilera de 12 no cabe; las plazas bajan a 6 por fila y el plano crece. */
@container crm-ini (max-width: 640px) {
  .crm-ini-plano-hilera { grid-template-columns: repeat(6, minmax(0, 1fr)); height: auto; grid-auto-rows: var(--crm-plano-alto); }
  .crm-ini-plaza:nth-child(6n + 1) { border-left: 0; }
  .crm-ini-plano-ficha { display: none; }
  .crm-ini-plano-cifra[data-total] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .crm-ini-plaza[data-estado="parado"] .crm-ini-coche-luces rect { animation: none; }
  .crm-ini-coche, .crm-ini-plano-ficha { transition: none; animation: none; }
  .crm-ini-coche:hover, .crm-ini-coche:focus-visible { transform: none; }
}

/* ── Barra de inicio fuera del marco: firma, cliente y estado de los datos ── */
.crm-ini-barra-sup {
  position: relative; min-width: 0; overflow: hidden; z-index: 2; display: flex; align-items: center; gap: 16px; height: 52px; padding: 0 clamp(16px, 2cqi, 24px);
  border-bottom: 1px solid var(--crm-line); background: color-mix(in srgb, var(--crm-bg) 86%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.crm-ini-barra-sep { flex: none; width: 1px; height: 20px; background: var(--crm-line-2); }
.crm-ini-barra-cliente {
  display: inline-flex; align-items: center; gap: 10px; min-width: 0; height: 36px; padding: 0 8px 0 4px; margin: 0;
  border: 1px solid transparent; background: none; color: var(--crm-text); font: 500 13px/18px var(--crm-sans);
  transition: border-color var(--crm-t-color);
}
button.crm-ini-barra-cliente { cursor: pointer; }
button.crm-ini-barra-cliente:hover { border-color: var(--crm-line-2); }
button.crm-ini-barra-cliente:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: 2px; }
.crm-ini-barra-chapa { flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 2px; background: var(--crm-placa-fondo); forced-color-adjust: none; }
.crm-ini-barra-chapa img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.crm-ini-barra-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-ini-barra-dominio { font: 400 11px/16px var(--crm-mono); color: var(--crm-dim); white-space: nowrap; }
.crm-ini-barra-mas { width: 12px; height: 12px; color: var(--crm-dim); fill: none; stroke: currentColor; stroke-width: 1.5; }
.crm-ini-barra-der { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.crm-ini-barra-estado { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
/* La barra vive fuera de la escena (no hay contenedor): manda la ventana. */
@media (max-width: 960px) { .crm-ini-barra-dominio, .crm-ini-barra-estado { display: none; } }
@media (max-width: 560px) {
  .crm-ini-barra-sup { gap: 10px; padding-inline: 12px; }
  .crm-ini-barra-nombre, .crm-ini-barra-mas, .crm-ini-barra-sep { display: none; }
}

/* ══ Mesa equilibrada (14-oct, tarde): las dos alas arrancan en la misma raya y acaban a la vez ══ */
.crm-ini[data-disposicion="mesa"] .crm-ini-escena { row-gap: clamp(32px, 5vh, 56px); padding-top: clamp(32px, 6vh, 64px); align-items: stretch; align-content: safe center; }
.crm-ini[data-disposicion="mesa"] .crm-ini-centro { gap: clamp(12px, 2.2vh, 22px); }
.crm-ini[data-disposicion="mesa"] .crm-ini-titular { font-size: clamp(36px, 3.6vw, 52px); }
.crm-ini[data-disposicion="mesa"] .crm-ini-ala { align-content: stretch; }
/* Rótulo de cada ala: misma altura (36) y la misma raya debajo. */
.crm-ini[data-disposicion="mesa"] .crm-ini-plano-cab,
.crm-ini[data-disposicion="mesa"] .crm-ini-plan-cab { box-sizing: border-box; height: 48px; align-items: center; padding: 0 0 12px; margin-bottom: 0; border-bottom: 1px solid var(--crm-line-2); }
.crm-ini[data-disposicion="mesa"] .crm-ini-plano-cab { flex-wrap: nowrap; }
.crm-ini[data-disposicion="mesa"] .crm-ini-plano { gap: 0; grid-template-rows: auto 1fr; height: 100%; }
.crm-ini[data-disposicion="mesa"] .crm-ini-plano-nave { padding-top: 16px; align-content: start; }
.crm-ini[data-disposicion="mesa"] .crm-ini-plano-hilera[data-cara="abajo"]:first-child { border-top: 0; }
/* El plan se reparte el alto del plano: tres pasos, tres tercios. */
.crm-ini[data-disposicion="mesa"] .crm-ini-plan { max-width: none; height: 100%; display: grid; grid-template-rows: auto 1fr; }
.crm-ini[data-disposicion="mesa"] .crm-ini-plan > ol { display: grid; grid-auto-rows: 1fr; }
.crm-ini[data-disposicion="mesa"] .crm-ini-plan .crm-ini-paso:first-child { border-top: 0; }

/* La calle: línea discontinua y, a la izquierda, por dónde se entra. */
.crm-ini-plano-hilera[data-cara="arriba"]::after {
  content: "ENTRADA →"; position: absolute; left: 0; top: calc(var(--crm-plano-calle) / -2 - 7px); padding-right: 10px;
  font: 500 10px/14px var(--crm-mono); letter-spacing: .1em; color: var(--crm-dim); background: var(--crm-bg); pointer-events: none;
}

/* El logotipo del cliente: chapa a su medida (apaisado o cuadrado), siempre 28 de alto. */
.crm-ini-barra-chapa { width: auto; min-width: 28px; max-width: 112px; padding: 2px 6px; }
.crm-ini-barra-chapa img { height: 24px; width: auto; max-width: 100px; }

/* ══ FichaOrden: la orden de un coche de un vistazo ══ */
.crm-ini-orden { display: grid; gap: 20px; min-width: 0; color: var(--crm-text); font-family: var(--crm-sans); font-size: 13px; line-height: 1.45; }
.crm-ini-orden :where(h3, h4, p) { margin: 0; }
.crm-ini-orden-cab { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; }
/* Etiqueta de llave: cartulina del panel de llaves, con su ojal y el número de orden. */
.crm-ini-llave {
  position: relative; display: grid; justify-items: center; align-content: end; gap: 2px; width: 72px; height: 104px; padding: 0 6px 10px;
  border: 1px solid var(--crm-line-2); background: var(--crm-panel-2); color: var(--crm-text);
  clip-path: polygon(22% 0, 78% 0, 100% 16%, 100% 100%, 0 100%, 0 16%);
}
.crm-ini-llave-ojal { position: absolute; top: 12px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border: 1px solid var(--crm-line-2); background: var(--crm-bg); }
.crm-ini-llave small { font: 500 10px/12px var(--crm-mono); letter-spacing: .06em; color: var(--crm-dim); }
.crm-ini-llave b { font: 600 24px/28px var(--crm-mono); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.crm-ini-orden[data-estado="parado"] .crm-ini-llave { border-color: var(--crm-aviso-linea); background: color-mix(in srgb, var(--crm-aviso) 10%, var(--crm-panel-2)); }
.crm-ini-orden[data-estado="listo"] .crm-ini-llave { border-color: var(--crm-acento-linea); background: color-mix(in srgb, var(--crm-acento) 9%, var(--crm-panel-2)); }
.crm-ini-orden-id { display: grid; justify-items: start; gap: 8px; min-width: 0; }
.crm-ini-orden-id h3 { font: 500 20px/28px var(--crm-sans); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.crm-ini-orden-id p { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--crm-muted); }
.crm-ini-orden-dias { font: 500 12px/18px var(--crm-mono); color: var(--crm-dim); }

/* Franja de estado: una línea, el estado manda. */
.crm-ini-orden-franja { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border: 1px solid var(--crm-line); background: var(--crm-panel); font-size: 13px; color: var(--crm-text-2); }
.crm-ini-orden-franja b { font: 500 11px/16px var(--crm-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--crm-text); }
.crm-ini-orden[data-estado="parado"] .crm-ini-orden-franja { border-color: var(--crm-aviso-linea); background: var(--crm-aviso-suave); }
.crm-ini-orden[data-estado="parado"] .crm-ini-orden-franja b { color: var(--crm-aviso); }
.crm-ini-orden[data-estado="listo"] .crm-ini-orden-franja { border-color: var(--crm-acento-linea); background: var(--crm-acento-suave); }
.crm-ini-orden[data-estado="listo"] .crm-ini-orden-franja b { color: var(--crm-acento); }
.crm-ini-orden-luces { display: grid; grid-template-columns: repeat(2, 6px); gap: 3px 10px; }
.crm-ini-orden-luces i { width: 6px; height: 4px; background: var(--crm-aviso); animation: crm-ini-emergencia-bg var(--crm-t-corriente) steps(1, end) infinite; }
@keyframes crm-ini-emergencia-bg { 50% { background: var(--crm-line-2); } }
.crm-ini-orden-marcha { width: 6px; height: 6px; background: var(--crm-text-2); }

.crm-ini-orden-trae, .crm-ini-orden-fases { display: grid; gap: 10px; }
.crm-ini-orden-trae p { font-size: 15px; line-height: 22px; color: var(--crm-text-2); text-wrap: pretty; }
.crm-ini-orden-otras { display: grid; justify-items: start; gap: 10px; }
.crm-ini-orden-otras-abrir { padding: 0; border: 0; background: none; font: 400 12px/16px var(--crm-sans); color: var(--crm-muted); text-decoration: underline; text-decoration-color: var(--crm-line-2); text-underline-offset: 3px; cursor: pointer; }
.crm-ini-orden-otras-abrir:hover { color: var(--crm-text); }
.crm-ini-orden-otras-abrir:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: 2px; }
.crm-ini-orden-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.crm-ini-orden-aviso { font: 500 12px/16px var(--crm-mono); color: var(--crm-acento); }
.crm-ini-orden-aviso[data-tono="error"] { color: var(--crm-error); }
.crm-ini-orden-pie { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 16px; border-top: 1px solid var(--crm-line); }

@media (prefers-reduced-motion: reduce) {
  .crm-ini-orden-luces i { animation: none; }
}
/* Parado: el punto donde está se pone en ámbar; lo hecho sigue en verde. */
.crm-ini-orden[data-estado="parado"] .crm-puntos-punto[data-estado="actual"] .crm-puntos-marca { border-color: var(--crm-aviso); }
.crm-ini-orden[data-estado="parado"] .crm-puntos-punto[data-estado="actual"] .crm-puntos-marca::after { background: var(--crm-aviso); }

/* ══ ExpedienteVehiculo: el expediente de un coche (taller) ══ */
.crm-ini-expediente { display: grid; gap: 24px; min-width: 0; color: var(--crm-text); font-family: var(--crm-sans); font-size: 13px; line-height: 1.45; }
.crm-ini-expediente :where(h2, h3, p, ol, ul) { margin: 0; padding: 0; }
.crm-ini-expediente :where(ol, ul) { list-style: none; }
.crm-ini-expediente-cab .crm-ini-llave { width: 80px; height: 116px; }
.crm-ini-expediente-cab .crm-ini-llave b { font-size: 28px; line-height: 32px; }
.crm-ini-expediente .crm-ini-orden-id h2 { font: 500 28px/32px var(--crm-sans); letter-spacing: -0.03em; overflow-wrap: anywhere; }
.crm-ini-expediente[data-estado="parado"] .crm-ini-llave { border-color: var(--crm-aviso-linea); background: color-mix(in srgb, var(--crm-aviso) 10%, var(--crm-panel-2)); }
.crm-ini-expediente[data-estado="listo"] .crm-ini-llave { border-color: var(--crm-acento-linea); background: color-mix(in srgb, var(--crm-acento) 9%, var(--crm-panel-2)); }
.crm-ini-expediente[data-estado="parado"] .crm-ini-orden-franja { border-color: var(--crm-aviso-linea); background: var(--crm-aviso-suave); }
.crm-ini-expediente[data-estado="parado"] .crm-ini-orden-franja b { color: var(--crm-aviso); }
.crm-ini-expediente[data-estado="listo"] .crm-ini-orden-franja { border-color: var(--crm-acento-linea); background: var(--crm-acento-suave); }
.crm-ini-expediente[data-estado="listo"] .crm-ini-orden-franja b { color: var(--crm-acento); }
.crm-ini-expediente-cab + .crm-ini-orden-franja { flex-wrap: wrap; row-gap: 4px; padding-block: 8px; }
.crm-ini-expediente-dentro { margin-left: auto; font: 500 12px/16px var(--crm-mono); color: var(--crm-dim); white-space: nowrap; }
.crm-ini-expediente-nota { margin-top: -16px !important; padding: 8px 12px; border-left: 2px solid var(--crm-aviso-linea); font-size: 13px; color: var(--crm-text-2); }

/* Siguiente paso: lo único que pide hacer algo ya. */
.crm-ini-expediente-siguiente { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px; border: 1px solid var(--crm-line-2); background: var(--crm-panel); }
.crm-ini-expediente-siguiente > div { display: grid; gap: 4px; min-width: 0; }
.crm-ini-expediente-siguiente-titulo { font: 500 16px/22px var(--crm-sans); letter-spacing: -0.01em; }
.crm-ini-expediente-siguiente-detalle { font-size: 12px; line-height: 17px; color: var(--crm-muted); }

/* Tira del tiempo: cada fase mide lo que el coche estuvo en ella. */
.crm-ini-expediente-tira { display: grid; gap: 12px; }
.crm-ini-expediente-tira-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.crm-ini-tira { --crm-tira-min: 56px; display: grid; gap: 2px; }
.crm-ini-tira-fase { display: grid; gap: 6px; min-width: 0; }
.crm-ini-tira-fase > i { display: block; height: 8px; background: var(--crm-line); }
.crm-ini-tira-fase[data-estado="hecho"] > i { background: var(--crm-acento-linea); }
.crm-ini-tira-fase[data-estado="actual"] > i { position: relative; overflow: hidden; background: var(--crm-acento); }
.crm-ini-tira-fase[data-estado="actual"] > i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--crm-luz), transparent) no-repeat -60% 0 / 40% 100%; animation: crm-ini-tira-luz calc(var(--crm-t-filo) * 2) var(--crm-curva) infinite; }
@keyframes crm-ini-tira-luz { to { background-position: 160% 0; } }
/* Parado: la fase actual se raya en ámbar, como la cinta de un aparcamiento cerrado. */
.crm-ini-expediente[data-estado="parado"] .crm-ini-tira-fase[data-estado="actual"] > i { background: repeating-linear-gradient(-45deg, var(--crm-aviso) 0 4px, var(--crm-aviso-suave) 4px 8px); }
.crm-ini-expediente[data-estado="parado"] .crm-ini-tira-fase[data-estado="actual"] > i::after { display: none; }
.crm-ini-tira-nombre { overflow: hidden; font-size: 12px; line-height: 16px; color: var(--crm-muted); text-overflow: ellipsis; white-space: nowrap; }
.crm-ini-tira-fase[data-estado="actual"] .crm-ini-tira-nombre { font-weight: 500; color: var(--crm-text); }
.crm-ini-tira-fase[data-estado="pendiente"] .crm-ini-tira-nombre { color: var(--crm-dim); }
.crm-ini-tira-dias { min-height: 16px; overflow: hidden; font: 500 11px/16px var(--crm-mono); color: var(--crm-dim); text-overflow: ellipsis; white-space: nowrap; }
.crm-ini-expediente[data-estado="parado"] .crm-ini-tira-fase[data-estado="actual"] .crm-ini-tira-dias { color: var(--crm-aviso); }

/* Más del expediente: historia, trabajo y fotos, a un toque. */
.crm-ini-expediente-pestanas { display: flex; gap: 20px; border-bottom: 1px solid var(--crm-line); }
.crm-ini-expediente-pestana { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0; border: 0; background: none; color: var(--crm-muted); font: 500 13px/16px var(--crm-sans); cursor: pointer; }
.crm-ini-expediente-pestana span { font: 500 11px/1 var(--crm-mono); color: var(--crm-dim); }
.crm-ini-expediente-pestana[aria-selected="true"] { color: var(--crm-text); }
.crm-ini-expediente-pestana[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--crm-acento); }
.crm-ini-expediente-pestana:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: 2px; }
.crm-ini-expediente-panel { padding-top: 16px; }
.crm-ini-expediente-vacio { color: var(--crm-dim); }
.crm-ini-expediente-trabajo { display: grid; gap: 16px; }
.crm-ini-expediente-presupuesto { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.crm-ini-expediente-presupuesto b { font: 500 20px/24px var(--crm-sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.crm-ini-expediente-presupuesto small { font: 400 11px/16px var(--crm-mono); color: var(--crm-dim); }
.crm-ini-expediente-lineas { display: grid; }
.crm-ini-expediente-lineas li { display: flex; align-items: center; gap: 10px; min-height: 36px; border-top: 1px solid var(--crm-line); color: var(--crm-text-2); }
.crm-ini-expediente-lineas li i { flex: none; width: 12px; height: 12px; border: 1px solid var(--crm-control); }
.crm-ini-expediente-lineas li[data-hecho] { color: var(--crm-muted); }
.crm-ini-expediente-lineas li[data-hecho] i { border-color: var(--crm-acento); background: var(--crm-acento); }
.crm-ini-expediente-horas { font: 500 12px/16px var(--crm-mono); color: var(--crm-dim); }
.crm-ini-expediente-cargando { display: inline-flex; align-items: center; gap: 10px; color: var(--crm-muted); }
.crm-ini-expediente-cargando i { position: relative; width: 48px; height: 1px; overflow: hidden; background: var(--crm-line-2); }
.crm-ini-expediente-cargando i::after { content: ""; position: absolute; inset: 0; width: 40%; background: var(--crm-acento); animation: crm-copiloto-filo var(--crm-t-filo) var(--crm-curva) infinite; }
.crm-ini-expediente-error { display: grid; justify-items: start; gap: 8px; color: var(--crm-error); }

/* El coche abierto en el expediente queda señalado en el plano (se ve tras el telón). */
.crm-ini-plaza[data-seleccionado] .crm-ini-coche-carro { stroke: var(--crm-text); stroke-width: 2; }
.crm-ini-plaza[data-resaltado] .crm-ini-coche { transform: translateY(-3px); }

@media (max-width: 640px) {
  .crm-ini-expediente .crm-ini-orden-id h2 { font-size: 24px; line-height: 28px; }
  .crm-ini-expediente-siguiente { grid-template-columns: minmax(0, 1fr); }
  .crm-ini-tira { --crm-tira-min: 0px; }
  .crm-ini-tira-nombre, .crm-ini-tira-dias { display: none; }
  .crm-ini-expediente-dentro { margin-left: 0; }
  .crm-ini-tira-fase[data-estado="actual"] .crm-ini-tira-nombre, .crm-ini-tira-fase[data-estado="actual"] .crm-ini-tira-dias { display: block; overflow: visible; }
}
@media (prefers-reduced-motion: reduce) {
  .crm-ini-tira-fase[data-estado="actual"] > i::after, .crm-ini-expediente-cargando i::after { animation: none; }
}

/* ── Inicio · lo que corre contra reloj y lo que espera respuesta (familia inicio, 16-10-2026) ── */
/* RelojPlazo, RelojCita, ListaPlazos, SelloDocumento, ListaDocumentos. Solo tokens --crm-*. */

/* Reloj: 24 de esfera, trazo de 1, un tono por tramo. */
.crm-ini-reloj { --crm-ini-tramo: var(--crm-text-2); display: inline-flex; flex: none; align-items: center; gap: 8px; color: var(--crm-ini-tramo); }
.crm-ini-reloj[data-tramo="aviso"], .crm-ini-reloj-cita[data-tramo="pasada"] { --crm-ini-tramo: var(--crm-aviso); }
.crm-ini-reloj[data-tramo="vencido"] { --crm-ini-tramo: var(--crm-error); }
.crm-ini-reloj-esfera { display: block; flex: none; width: 24px; height: 24px; overflow: visible; }
.crm-ini-reloj-caja { fill: var(--crm-panel); stroke: var(--crm-line-2); stroke-width: 1; }
.crm-ini-reloj-corona { fill: var(--crm-line-2); stroke: none; }
.crm-ini-reloj-cuna { fill: var(--crm-ini-tramo); fill-opacity: .16; stroke: none; transition: d var(--crm-t-dibujo) var(--crm-snap); }
.crm-ini-reloj[data-tramo="vencido"] .crm-ini-reloj-cuna { fill-opacity: .22; }
.crm-ini-reloj-marca { stroke: var(--crm-acento); stroke-width: 1.5; stroke-linecap: square; }
.crm-ini-reloj-aguja, .crm-ini-reloj-minutos { stroke: var(--crm-ini-tramo); stroke-width: 1.5; stroke-linecap: round; }
.crm-ini-reloj-horas { stroke: var(--crm-ini-tramo); stroke-width: 2; stroke-linecap: round; }
.crm-ini-reloj-eje { fill: var(--crm-ini-tramo); stroke: none; }
.crm-ini-reloj-hora-marca { stroke: var(--crm-control); stroke-width: 1; }
.crm-ini-reloj-cita[data-tramo="pronto"] .crm-ini-reloj-minutos { stroke: var(--crm-acento); }
.crm-ini-reloj-cita[data-tramo="pasada"] .crm-ini-reloj-caja { stroke: var(--crm-aviso-linea); }
.crm-ini-reloj[data-tramo="vencido"] .crm-ini-reloj-caja { stroke: var(--crm-error-linea); }
.crm-ini-reloj-texto { font: 400 11px/16px var(--crm-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Lista de plazos: filas de 40, reloj · quién · tiempo. */
.crm-ini-plazos, .crm-ini-docs { display: grid; align-content: start; overflow: hidden; min-height: 0; }
.crm-ini-plazos li[hidden], .crm-ini-docs li[hidden] { display: none; }
.crm-ini-plazo-fila { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 40px; padding: 4px 0; border-top: 1px solid var(--crm-line); transition: background-color var(--crm-t-color); }
a.crm-ini-plazo-fila:hover, a.crm-ini-doc-fila:hover { background: color-mix(in srgb, var(--crm-panel-2) 60%, transparent); }
.crm-ini-plazo-txt, .crm-ini-doc-txt { display: grid; min-width: 0; }
.crm-ini-plazo-txt > span, .crm-ini-doc-txt > span { overflow: hidden; font-size: 12px; line-height: 16px; color: var(--crm-text-2); text-overflow: ellipsis; white-space: nowrap; }
.crm-ini-plazo-txt small, .crm-ini-doc-txt small { overflow: hidden; font: 400 11px/16px var(--crm-mono); color: var(--crm-dim); text-overflow: ellipsis; white-space: nowrap; }
.crm-ini-plazo-cifra { font: 500 12px/16px var(--crm-mono); font-variant-numeric: tabular-nums; color: var(--crm-text-2); text-align: right; white-space: nowrap; }
.crm-ini-plazo-cifra[data-tramo="aviso"], .crm-ini-plazo-cifra[data-tramo="pasada"] { color: var(--crm-aviso); }
.crm-ini-plazo-cifra[data-tramo="vencido"] { color: var(--crm-error); }
.crm-ini-plazo-cifra[data-tramo="pronto"] { color: var(--crm-text); }
.crm-ini-plazos-vacio { display: flex; align-items: center; gap: 8px; min-height: 40px; border-top: 1px solid var(--crm-line); font-size: 12px; line-height: 16px; color: var(--crm-muted); }
.crm-ini-plazos-vacio > span { font: 500 12px/16px var(--crm-mono); color: var(--crm-acento); }

/* Sello de documento: doble filete de 1 con 2 de aire, 36 de alto. */
.crm-ini-sello { position: relative; display: inline-grid; flex: none; padding: 2px; border: 1px solid var(--crm-line-2); background: var(--crm-panel); }
.crm-ini-sello-dentro { display: grid; align-content: center; min-width: 64px; height: 28px; padding: 0 6px; border: 1px solid var(--crm-line-2); }
.crm-ini-sello-tipo { font: 500 11px/12px var(--crm-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--crm-dim); white-space: nowrap; }
.crm-ini-sello-num { display: flex; align-items: baseline; gap: 4px; font: 500 12px/14px var(--crm-mono); font-variant-numeric: tabular-nums; color: var(--crm-text); white-space: nowrap; }
.crm-ini-sello-num small { font: 400 11px/14px var(--crm-mono); color: var(--crm-dim); }
.crm-ini-sello[data-estado="borrador"], .crm-ini-sello[data-estado="borrador"] .crm-ini-sello-dentro { border-style: dashed; }
.crm-ini-sello[data-estado="aceptado"], .crm-ini-sello[data-estado="aceptado"] .crm-ini-sello-dentro { border-color: var(--crm-acento-linea); }
.crm-ini-sello[data-estado="aceptado"] .crm-ini-sello-tipo { color: var(--crm-acento); }
.crm-ini-sello-visto { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; width: 12px; height: 12px; background: var(--crm-acento); color: var(--crm-sobre-acento); font: 500 11px/12px var(--crm-mono); }
.crm-ini-sello[data-estado="caducado"], .crm-ini-sello[data-estado="caducado"] .crm-ini-sello-dentro { border-color: var(--crm-error-linea); }
.crm-ini-sello[data-estado="caducado"] .crm-ini-sello-num { color: var(--crm-dim); }
.crm-ini-sello[data-estado="caducado"]::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top right, transparent calc(50% - .5px), var(--crm-error) calc(50% - .5px), var(--crm-error) calc(50% + .5px), transparent calc(50% + .5px)); pointer-events: none; }

/* Lista de documentos: sello · para quién · importe y días; el filete se enfría. */
.crm-ini-docs li { position: relative; }
.crm-ini-doc-fila { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 48px; padding: 6px 0; border-top: 1px solid var(--crm-line); transition: background-color var(--crm-t-color); }
.crm-ini-doc-der { display: grid; justify-items: end; }
.crm-ini-doc-der b { font: 500 13px/16px var(--crm-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.crm-ini-doc-der small { font: 400 11px/16px var(--crm-mono); color: var(--crm-dim); white-space: nowrap; }
.crm-ini-doc-der small[data-aviso] { color: var(--crm-aviso); }
.crm-ini-doc-frio { position: absolute; top: -1px; left: 0; width: 100%; height: 1px; background: var(--crm-aviso-linea); transform-origin: left; pointer-events: none; }
.crm-ini-docs li[data-aviso] .crm-ini-doc-frio { background: var(--crm-aviso); }
.crm-ini[data-encendida] .crm-ini-doc-frio { animation: crm-ini-crecer var(--crm-t-dibujo) var(--crm-snap) both; }

.crm-ini :is(.crm-ini-plazo-fila, .crm-ini-doc-fila):focus-visible { outline: var(--crm-foco-ancho, 1px) solid var(--crm-acento); outline-offset: -1px; }

@media (max-height: 860px) {
  .crm-ini-plazo-fila { min-height: 36px; padding: 2px 0; }
  .crm-ini-doc-fila { min-height: 44px; padding: 4px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .crm-ini-reloj-cuna { transition: none; }
}
@media (forced-colors: active) {
  .crm-ini-reloj-cuna { fill: Highlight; }
  .crm-ini-reloj-marca { stroke: Highlight; }
  .crm-ini-sello-visto { forced-color-adjust: none; }
}

/* KpiCristal sin dato: la fuente no respondió. Cuadrado apagado y cifra tenue. */
.crm-ini-estado[data-estado="sin-dato"] { border: 1px solid var(--crm-control); background: none; }
.crm-ini-kpi-dentro[data-estado="sin-dato"] .crm-ini-kpi-cifra { color: var(--crm-dim); }

/* ── Espacio de trabajo, copiloto contextual y acción propuesta (familia estructura, 14-10-2026) ── */
/* Patrones universales: una entidad y su inteligencia en una ventana. Solo tokens --crm-*; radio 0. */

/* ══ EspacioTrabajo ══ */
.crm-modal.crm-espacio[data-tamano="completo"] {
  --crm-espacio-ancho: 1120px;
  inset: auto; top: max(24px, 5vh); bottom: max(24px, 5vh); left: 50%;
  width: min(var(--crm-espacio-ancho), calc(100% - 48px)); translate: -50% 0;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--crm-bg);
}
.crm-espacio-barra { display: flex; align-items: center; gap: 16px; height: 48px; padding: 0 8px 0 20px; border-bottom: 1px solid var(--crm-line); }
.crm-espacio-rotulo { font: 500 11px/16px var(--crm-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--crm-dim); }
.crm-espacio-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.crm-espacio-flecha, .crm-espacio-cerrar {
  display: inline-grid; place-items: center; height: 28px; min-width: 28px; padding: 0 6px; border: 1px solid transparent; background: none; color: var(--crm-muted); cursor: pointer;
  transition: border-color var(--crm-t-color), color var(--crm-t-color), background-color var(--crm-t-color);
}
.crm-espacio-flecha svg, .crm-espacio-cerrar svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.crm-espacio-flecha:hover:not(:disabled), .crm-espacio-cerrar:hover:not(:disabled) { border-color: var(--crm-line-2); background: var(--crm-panel-2); color: var(--crm-text); }
.crm-espacio-flecha:focus-visible, .crm-espacio-cerrar:focus-visible, .crm-espacio-pestana:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: 2px; }
.crm-espacio-flecha:disabled, .crm-espacio-cerrar:disabled { color: var(--crm-linea-apagada); cursor: not-allowed; }
.crm-espacio-cuenta { min-width: 64px; font: 500 12px/16px var(--crm-mono); letter-spacing: .04em; color: var(--crm-dim); text-align: center; font-variant-numeric: tabular-nums; }
.crm-espacio-cuenta b { font-weight: 500; color: var(--crm-text); }
.crm-espacio-cerrar { display: inline-flex; gap: 8px; }
.crm-espacio-cerrar kbd { font: 500 11px/1 var(--crm-mono); color: var(--crm-dim); }
.crm-espacio-nav + .crm-espacio-pestanas, .crm-espacio-nav ~ .crm-espacio-cerrar { margin-left: 0; }
.crm-espacio-barra > .crm-espacio-cerrar:only-of-type { margin-left: auto; }
.crm-espacio-pestanas { display: none; }

.crm-espacio-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; }
.crm-espacio-cuerpo[data-con-lateral] { grid-template-columns: minmax(0, 1.45fr) minmax(340px, 1fr); }
.crm-espacio-principal { min-height: 0; overflow-y: auto; padding: 28px 32px 40px; scrollbar-gutter: stable; }
.crm-espacio-lateral { display: grid; min-height: 0; border-left: 1px solid var(--crm-line); background: var(--crm-panel); }
/* La hoja nueva entra de lado, como la siguiente carpeta del archivador. */
.crm-espacio-principal[data-desde="derecha"] { animation: crm-espacio-derecha var(--crm-t-panel) var(--crm-snap); }
.crm-espacio-principal[data-desde="izquierda"] { animation: crm-espacio-izquierda var(--crm-t-panel) var(--crm-snap); }
@keyframes crm-espacio-derecha { from { opacity: 0; transform: translateX(16px); } }
@keyframes crm-espacio-izquierda { from { opacity: 0; transform: translateX(-16px); } }

/* Estrecho: una columna a la vez, con pestañas en la barra. */
@media (max-width: 900px) {
  .crm-modal.crm-espacio[data-tamano="completo"] { inset: 0; top: 0; bottom: 0; width: 100%; translate: none; border: 0; }
  .crm-espacio-barra { gap: 8px; padding-left: 16px; }
  .crm-espacio-rotulo { display: none; }
  .crm-espacio-nav { margin-left: 0; }
  .crm-espacio-pestanas { display: flex; margin-left: auto; border: 1px solid var(--crm-line-2); }
  .crm-espacio-pestana { height: 28px; padding: 0 10px; border: 0; background: none; color: var(--crm-muted); font: 500 12px/16px var(--crm-sans); cursor: pointer; }
  .crm-espacio-pestana[aria-selected="true"] { background: var(--crm-panel-3); color: var(--crm-text); }
  .crm-espacio-cuerpo[data-con-lateral] { grid-template-columns: minmax(0, 1fr); }
  .crm-espacio[data-pestana="principal"] .crm-espacio-lateral, .crm-espacio[data-pestana="lateral"] .crm-espacio-principal { display: none; }
  .crm-espacio-lateral { border-left: 0; }
  .crm-espacio-principal { padding: 20px 16px 32px; }
  .crm-espacio-cerrar kbd { display: none; }
}

/* ══ CopilotoContextual ══ */
.crm-copiloto { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; font-family: var(--crm-sans); font-size: 13px; line-height: 1.5; color: var(--crm-text); }
.crm-copiloto-hilo { display: grid; align-content: start; gap: 20px; min-height: 0; overflow-y: auto; padding: 24px 24px 12px; }
.crm-copiloto-rotulo { display: inline-flex; align-items: center; gap: 8px; font: 500 11px/16px var(--crm-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--crm-dim); }
.crm-copiloto-rotulo i { width: 6px; height: 6px; border-radius: 50%; background: var(--crm-acento); box-shadow: 0 0 0 3px var(--crm-acento-suave); }
.crm-copiloto-sintesis { display: grid; gap: 10px; padding-bottom: 20px; border-bottom: 1px solid var(--crm-line); }
.crm-copiloto-sintesis-texto { font-size: 16px; line-height: 24px; letter-spacing: -0.01em; color: var(--crm-text); text-wrap: pretty; }
.crm-copiloto-sintesis-texto b { font-weight: 500; }
.crm-copiloto-sintesis-texto [data-tono="aviso"] { color: var(--crm-aviso); }
.crm-copiloto-turno { display: grid; gap: 10px; }
.crm-copiloto-pregunta { justify-self: end; max-width: 85%; padding: 8px 12px; border: 1px solid var(--crm-line-2); background: var(--crm-panel-2); color: var(--crm-text-2); }
.crm-copiloto-respuesta { display: grid; gap: 10px; }
.crm-copiloto-respuesta > p { max-width: 62ch; color: var(--crm-text); text-wrap: pretty; }
.crm-copiloto-anexos, .crm-copiloto-acciones { display: grid; gap: 8px; }
.crm-copiloto-sello { font: 400 11px/16px var(--crm-mono); color: var(--crm-dim); }
.crm-copiloto-pensando { position: relative; display: inline-flex; align-items: center; gap: 10px; color: var(--crm-muted); }
.crm-copiloto-pensando i { position: relative; width: 48px; height: 1px; overflow: hidden; background: var(--crm-line-2); }
.crm-copiloto-pensando i::after { content: ""; position: absolute; inset: 0; width: 40%; background: var(--crm-acento); animation: crm-copiloto-filo var(--crm-t-filo) var(--crm-curva) infinite; }
@keyframes crm-copiloto-filo { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.crm-copiloto-error { display: grid; justify-items: start; gap: 6px; color: var(--crm-error); }
.crm-copiloto-reintentar, .crm-copiloto-idea { border: 1px solid var(--crm-line-2); background: none; color: var(--crm-text-2); font: 400 12px/16px var(--crm-sans); cursor: pointer; transition: border-color var(--crm-t-color), color var(--crm-t-color), background-color var(--crm-t-color); }
.crm-copiloto-reintentar { padding: 6px 10px; }
.crm-copiloto-pie { display: grid; gap: 10px; padding: 12px 24px 20px; border-top: 1px solid var(--crm-line); }
.crm-copiloto-ideas { display: flex; flex-wrap: wrap; gap: 6px; }
.crm-copiloto-idea { min-height: 28px; padding: 4px 10px; text-align: left; }
.crm-copiloto-idea:hover:not(:disabled), .crm-copiloto-reintentar:hover { border-color: var(--crm-control); background: var(--crm-panel-2); color: var(--crm-text); }
.crm-copiloto-idea:focus-visible, .crm-copiloto-reintentar:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: 2px; }
.crm-copiloto-idea:disabled { color: var(--crm-dim); border-color: var(--crm-linea-apagada); cursor: not-allowed; }
/* La insignia cosida al campo: no hace falta decir de qué se habla. */
.crm-copiloto-sobre { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--crm-dim); }
.crm-copiloto-sobre b { overflow: hidden; font-weight: 500; color: var(--crm-text-2); text-overflow: ellipsis; white-space: nowrap; }

/* ══ AccionPropuesta ══ */
.crm-propuesta { position: relative; display: grid; gap: 6px; padding: 12px 14px 14px; border: 1px solid var(--crm-acento-linea); background: var(--crm-panel-2); }
/* Lo que espera a una persona lleva filo de acento (GRAMATICA §3.6). */
.crm-propuesta[data-estado="propuesta"]::before {
  content: ""; position: absolute; inset: -1px -1px auto; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--crm-acento) 50%, transparent) no-repeat -40% 0 / 40% 100%;
  animation: crm-propuesta-filo calc(var(--crm-t-filo) * 2) var(--crm-curva) infinite;
}
@keyframes crm-propuesta-filo { to { background-position: 140% 0; } }
.crm-propuesta[data-estado="hecha"] { border-color: var(--crm-line-2); background: var(--crm-panel); }
.crm-propuesta[data-estado="error"] { border-color: var(--crm-error-linea); }
.crm-propuesta-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.crm-propuesta-rotulo { font: 500 11px/16px var(--crm-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--crm-acento); }
.crm-propuesta[data-estado="hecha"] .crm-propuesta-rotulo { color: var(--crm-dim); }
.crm-propuesta-sello { padding: 2px 6px; border: 1px solid var(--crm-acento-linea); font: 600 10px/14px var(--crm-mono); letter-spacing: .1em; color: var(--crm-acento); }
.crm-propuesta-titulo { font: 500 14px/20px var(--crm-sans); color: var(--crm-text); }
.crm-propuesta-cambio { display: flex; align-items: center; gap: 10px; font: 500 12px/16px var(--crm-mono); color: var(--crm-muted); }
.crm-propuesta-cambio i { position: relative; flex: 0 0 32px; height: 1px; background: var(--crm-line-2); }
.crm-propuesta-cambio i::after { content: ""; position: absolute; right: 0; top: -3px; width: 6px; height: 6px; border-top: 1px solid var(--crm-line-2); border-right: 1px solid var(--crm-line-2); transform: rotate(45deg); }
.crm-propuesta-cambio b { font-weight: 500; color: var(--crm-text); }
.crm-propuesta-motivo { font-size: 12px; line-height: 17px; color: var(--crm-muted); }
.crm-propuesta-error { font-size: 12px; line-height: 17px; color: var(--crm-error); }
.crm-propuesta-acciones { display: flex; gap: 6px; margin-top: 4px; }
.crm-propuesta-descartada { font: 400 12px/16px var(--crm-sans); color: var(--crm-dim); text-decoration: line-through; text-decoration-color: var(--crm-line-2); }

@media (prefers-reduced-motion: reduce) {
  .crm-espacio-principal[data-desde] { animation: none; }
  .crm-copiloto-pensando i::after, .crm-propuesta[data-estado="propuesta"]::before { animation: none; }
}

/* ══ AvisosCanal: lo que entra por WhatsApp (u otro canal) mientras se mira la pantalla ══ */
.crm-canal { position: fixed; z-index: 30; left: 24px; bottom: 24px; width: min(380px, calc(100vw - 32px)); pointer-events: none; font-family: var(--crm-sans); }
.crm-canal ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.crm-canal-aviso {
  display: grid; gap: 8px; padding: 12px 14px 14px; border: 1px solid var(--crm-line-2); background: var(--crm-panel-3); color: var(--crm-text);
  box-shadow: var(--crm-sombra-capa); pointer-events: auto; animation: crm-canal-entra var(--crm-t-capa) var(--crm-snap);
}
@keyframes crm-canal-entra { from { opacity: 0; transform: translateY(16px); } }
.crm-canal-cab { display: flex; align-items: center; gap: 8px; }
.crm-canal-nombre { display: inline-flex; align-items: center; gap: 8px; font: 500 11px/16px var(--crm-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--crm-text-2); }
.crm-canal-nombre i { width: 6px; height: 6px; border-radius: 50%; background: var(--crm-acento); box-shadow: 0 0 0 3px var(--crm-acento-suave); }
.crm-canal-hora { margin-left: auto; font: 400 11px/16px var(--crm-mono); color: var(--crm-dim); }
.crm-canal-cerrar { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; color: var(--crm-dim); cursor: pointer; }
.crm-canal-cerrar svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.crm-canal-cerrar:hover { color: var(--crm-text); }
.crm-canal-cerrar:focus-visible, .crm-canal-accion:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: 2px; }
.crm-canal-texto { margin: 0; font-size: 14px; line-height: 20px; color: var(--crm-text); overflow-wrap: anywhere; }
.crm-canal-texto b { font-weight: 500; }
.crm-canal-escribe { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 12px; line-height: 16px; color: var(--crm-muted); }
.crm-canal-escribe span { display: inline-flex; gap: 3px; }
.crm-canal-escribe i { width: 4px; height: 4px; border-radius: 50%; background: var(--crm-muted); animation: crm-canal-punto 1.2s var(--crm-curva) infinite; }
.crm-canal-escribe i:nth-child(2) { animation-delay: .15s; }
.crm-canal-escribe i:nth-child(3) { animation-delay: .3s; }
@keyframes crm-canal-punto { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
.crm-canal-respuesta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; padding-top: 8px; border-top: 1px solid var(--crm-line); }
.crm-canal-respuesta p { margin: 0; max-height: 7.5em; overflow: hidden; font-size: 12px; line-height: 17px; color: var(--crm-text-2); white-space: pre-line; overflow-wrap: anywhere; -webkit-mask-image: linear-gradient(180deg, var(--crm-bg) 70%, transparent); mask-image: linear-gradient(180deg, var(--crm-bg) 70%, transparent); }
.crm-canal-visto { font: 600 11px/17px var(--crm-mono); letter-spacing: -0.12em; color: var(--crm-dim); transition: color var(--crm-t-color); }
.crm-canal-aviso[data-estado="respondido"] .crm-canal-visto { color: var(--crm-acento); }
.crm-canal-aviso[data-estado="fallido"] .crm-canal-visto { color: var(--crm-error); }
.crm-canal-accion { justify-self: start; display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; border: 1px solid var(--crm-line-2); background: var(--crm-bg); color: var(--crm-text); font: 500 12px/16px var(--crm-sans); cursor: pointer; }
.crm-canal-accion:hover { border-color: var(--crm-control); }
@media (max-width: 640px) { .crm-canal { left: 16px; bottom: 16px; } }
@media (prefers-reduced-motion: reduce) { .crm-canal-aviso, .crm-canal-escribe i { animation: none; } }

/* ── Comercial · alta, reparto, seguimiento y dictado (familia comercial, 16-10-2026) ── */
/* CampoTelefono, Asignador, AvisoDuplicado, AgendaSeguimientos, Dictado. Solo tokens --crm-*. */

/* ══ CampoTelefono ═══════════════════════════════════════════════════ */
.crm-entrada.crm-tel { gap: 0; padding-left: 0; }
.crm-tel-prefijo {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  height: 100%;
  margin: 0;
  padding: 0 8px 0 6px;
  border: 0;
  border-right: 1px solid var(--crm-line-2);
  border-radius: 0;
  background: transparent;
  color: var(--crm-text);
  font: 400 13px/20px var(--crm-mono);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color var(--crm-t-color);
}
@media (hover: hover) {
  .crm-tel-prefijo:hover:not(:disabled) { background: var(--crm-panel-2); }
}
.crm-tel-prefijo:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: -2px; }
.crm-tel-prefijo:disabled { color: var(--crm-dim); cursor: not-allowed; }
/* Con el foco en el prefijo, su anillo es el único indicador: el borde del campo no se enciende. */
.crm-entrada.crm-tel:focus-within:has(.crm-tel-prefijo:focus) { border-color: var(--crm-control); }
.crm-tel-banda {
  display: grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  background: var(--crm-panel-3);
  color: var(--crm-text-2);
  font: 500 11px/12px var(--crm-mono);
  letter-spacing: 0;
}
.crm-tel-banda[data-ue] { background: var(--crm-placa-azul); color: var(--crm-placa-letra-ue); }
.crm-tel-flecha { width: 14px; height: 14px; color: var(--crm-dim); }
.crm-tel-cuerpo { position: relative; display: flex; flex: 1; align-items: center; min-width: 0; height: 100%; padding-left: 8px; }
.crm-tel-cuerpo .crm-entrada-control { letter-spacing: 0; }
.crm-tel[data-enfocado] .crm-entrada-control::placeholder { color: transparent; }
.crm-tel-fantasma {
  position: absolute;
  inset: 0 0 0 8px;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--crm-dim);
  font: 400 13px/22px var(--crm-mono);
  letter-spacing: 0;
  white-space: pre;
  pointer-events: none;
}
.crm-tel-hecho { visibility: hidden; }
.crm-tel-tipo {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  color: var(--crm-text-2);
  font: 400 11px/16px var(--crm-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.crm-tel-tipo svg { width: 14px; height: 14px; color: var(--crm-acento); }
.crm-tel[data-deshabilitado] .crm-tel-tipo, .crm-tel[data-deshabilitado] .crm-tel-tipo svg { color: var(--crm-dim); }
.crm-tel-pista { flex: none; color: var(--crm-dim); font: 400 11px/16px var(--crm-mono); white-space: nowrap; }
.crm-tel-lista {
  position: absolute;
  top: calc(100% + 4px);
  left: -1px;
  z-index: 30;
  display: grid;
  min-width: 240px;
  max-height: 320px;
  margin: 0;
  padding: 4px 0;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--crm-line-2);
  background: var(--crm-panel);
  box-shadow: var(--crm-sombra-capa);
  animation: crm-ctl-capa-entra var(--crm-t-capa) var(--crm-snap) both;
}
.crm-tel-opcion {
  display: grid;
  grid-template-columns: 20px 48px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  color: var(--crm-text);
  font-size: 13px;
  line-height: 20px;
  cursor: pointer;
}
.crm-tel-opcion[data-activo] { background: var(--crm-panel-2); }
.crm-tel-opcion[aria-selected="true"] { background: var(--crm-panel-3); box-shadow: inset 2px 0 var(--crm-acento); }
.crm-tel-opcion-mas { font: 400 13px/20px var(--crm-mono); font-variant-numeric: tabular-nums; color: var(--crm-text-2); }
.crm-tel-opcion-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ══ Asignador ═══════════════════════════════════════════════════════ */
.crm-asig { display: grid; gap: 12px; min-width: 0; container-type: inline-size; }
.crm-asig-rotulo { color: var(--crm-muted); font: 400 11px/16px var(--crm-mono); letter-spacing: .06em; text-transform: uppercase; }
.crm-asig-lista { display: grid; border-top: 1px solid var(--crm-line); }
.crm-asig-fila {
  position: relative;
  display: grid;
  grid-template-columns: 20px 24px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 44px;
  padding: 4px 12px 4px 8px;
  border-bottom: 1px solid var(--crm-line);
  cursor: pointer;
  transition: background-color var(--crm-t-color);
}
@media (hover: hover) {
  .crm-asig-fila:hover:not([data-fuera]) { background: var(--crm-panel-2); transition: none; }
}
.crm-asig-fila[aria-checked="true"] { background: var(--crm-panel-3); }
.crm-asig-fila[aria-checked="true"]::before { content: ""; position: absolute; top: -1px; bottom: -1px; left: 0; width: 2px; background: var(--crm-acento); }
.crm-asig-fila:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: -1px; }
.crm-asig-fila[data-fuera] { cursor: not-allowed; }
.crm-asig-fila[data-fuera] .crm-asig-nombre { color: var(--crm-dim); }
.crm-asig-fila[data-fuera] .crm-asig-detalle { color: var(--crm-aviso); }
.crm-asig[data-ocupado] .crm-asig-fila { cursor: progress; }
.crm-asig-quien { display: grid; min-width: 0; }
.crm-asig-nombre { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--crm-text); font-size: 13px; line-height: 20px; }
.crm-asig-nombre-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-asig-actual {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 4px;
  border: 1px solid var(--crm-line-2);
  color: var(--crm-muted);
  font: 400 11px/16px var(--crm-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.crm-asig-detalle { overflow: hidden; color: var(--crm-muted); font-size: 12px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; }
.crm-asig-sugerencia { color: var(--crm-text-2); }
.crm-asig-sugerencia::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; background: var(--crm-acento); vertical-align: 1px; }
.crm-asig-carga { display: inline-flex; align-items: center; gap: 8px; }
.crm-asig-palotes { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; }
.crm-asig-palotes i { display: block; width: 2px; height: 12px; background: var(--crm-text-2); }
.crm-asig-palotes i[data-quinto] { height: 16px; margin-right: 2px; }
.crm-asig-fila[data-fuera] .crm-asig-palotes i { background: var(--crm-line-2); }
.crm-asig-cifra { min-width: 20px; color: var(--crm-text-2); font: 400 12px/16px var(--crm-mono); font-variant-numeric: tabular-nums; text-align: right; }
.crm-asig-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.crm-asig-falta { color: var(--crm-aviso); font-size: 12px; line-height: 16px; }
.crm-asig-error { margin: 0; padding-left: 8px; border-left: 2px solid var(--crm-error); color: var(--crm-text); font-size: 12px; line-height: 16px; }
.crm-asig-vacio { margin: 0; color: var(--crm-muted); font-size: 13px; line-height: 20px; }
@container (max-width: 400px) {
  .crm-asig-fila { grid-template-columns: 24px minmax(0, 1fr) auto; }
  .crm-asig-fila > .crm-tecla, .crm-asig-fila > span:first-child:empty { display: none; }
}

/* ══ AvisoDuplicado ══════════════════════════════════════════════════ */
.crm-dup {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 12px 16px;
  overflow: hidden;
  border: 1px solid var(--crm-line-2);
  border-left: 2px solid var(--crm-aviso);
  background: var(--crm-panel);
}
.crm-dup[data-estado="buscando"] { border-left-color: var(--crm-line-2); }
.crm-dup[data-estado="buscando"]::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--crm-acento) 50%, transparent) no-repeat;
  background-size: 40% 100%;
  background-position: -40% 0;
  animation: crm-filo-continuo var(--crm-t-filo) var(--crm-curva) infinite;
}
.crm-dup[data-estado="error"] { border-left-color: var(--crm-error); }
.crm-dup-rotulo { color: var(--crm-text-2); font: 400 11px/16px var(--crm-mono); letter-spacing: .06em; text-transform: uppercase; }
.crm-dup-texto { margin: 0; color: var(--crm-muted); font-size: 12px; line-height: 16px; }
.crm-dup-lista { display: grid; margin: 0; padding: 0; list-style: none; }
.crm-dup-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--crm-line); }
.crm-dup-quien { display: grid; min-width: 0; }
.crm-dup-titulo { overflow: hidden; color: var(--crm-text); font-size: 13px; font-weight: 500; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
.crm-dup-detalle { overflow: hidden; color: var(--crm-muted); font-size: 12px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; }
.crm-dup-casan { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; }
.crm-dup-casa { display: inline-flex; align-items: baseline; gap: 6px; }
.crm-dup-casa-etq { color: var(--crm-text-2); font-size: 12px; line-height: 16px; }
.crm-dup-casa-valor { padding-bottom: 1px; border-bottom: 1px solid var(--crm-acento); color: var(--crm-text); font: 400 12px/16px var(--crm-mono); font-variant-numeric: tabular-nums; }
.crm-dup-casa-valor > span { color: var(--crm-dim); }
.crm-dup-pie { display: flex; justify-content: flex-end; }
.crm-dup-limpio { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--crm-muted); font-size: 12px; line-height: 16px; }
.crm-dup-limpio svg, .crm-seg-vacio svg { flex: none; width: 14px; height: 14px; color: var(--crm-acento); }

/* ══ AgendaSeguimientos ══════════════════════════════════════════════ */
.crm-seg { display: grid; gap: 24px; min-width: 0; container-type: inline-size; }
.crm-seg-tramo { display: grid; min-width: 0; }
.crm-seg-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 32px;
  margin: 0;
  border-bottom: 1px solid var(--crm-line);
  color: var(--crm-muted);
  font: 400 11px/16px var(--crm-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.crm-seg-cuenta { color: var(--crm-dim); font-variant-numeric: tabular-nums; }
.crm-seg-cuenta[data-hay] { color: var(--crm-text-2); }
.crm-seg-tramo[data-tramo="vencidas"] .crm-seg-cuenta[data-hay] { color: var(--crm-error); }
.crm-seg-lista { display: grid; margin: 0; padding: 0; list-style: none; }
.crm-seg-fila {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 52px;
  padding: 8px 0;
  border-bottom: 1px solid var(--crm-line);
  transition: background-color var(--crm-t-color);
}
@media (hover: hover) {
  .crm-seg-fila:hover { background: var(--crm-panel-2); transition: none; }
}
.crm-seg-texto { display: grid; min-width: 0; color: inherit; text-decoration: none; }
a.crm-seg-texto:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; }
.crm-seg-que { overflow: hidden; color: var(--crm-text); font-size: 13px; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
.crm-seg-para { overflow: hidden; color: var(--crm-text-2); font-size: 12px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; }
.crm-seg-motivo { color: var(--crm-text); quotes: "«" "»"; }
.crm-seg-antes { overflow: hidden; color: var(--crm-dim); font: 400 11px/16px var(--crm-mono); text-overflow: ellipsis; white-space: nowrap; }
.crm-seg-der { display: inline-flex; align-items: center; gap: 8px; }
.crm-seg-cifra { color: var(--crm-text-2); font: 400 12px/16px var(--crm-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.crm-seg-cifra[data-tramo="vencidas"] { color: var(--crm-error); }
.crm-seg-cifra[data-tramo="hoy"] { color: var(--crm-text); }
/* Las acciones no reservan sitio: aparecen sobre la cifra al pasar o enfocar la fila. */
.crm-seg-acciones { position: absolute; top: 50%; right: 0; display: inline-flex; gap: 2px; padding-left: 8px; background: var(--crm-panel-2); visibility: hidden; transform: translateY(-50%); }
.crm-seg-fila:hover .crm-seg-acciones, .crm-seg-fila:focus-within .crm-seg-acciones { visibility: visible; }
@media (hover: none) {
  .crm-seg-fila { grid-template-columns: 24px minmax(0, 1fr) auto; }
  .crm-seg-acciones { position: static; grid-column: 2 / -1; padding-left: 0; background: none; visibility: visible; transform: none; }
}
.crm-seg-hoja {
  display: grid;
  align-content: center;
  justify-items: center;
  width: 24px;
  height: 28px;
  border: 1px solid var(--crm-line-2);
  border-top: 2px solid var(--crm-line-2);
  background: var(--crm-panel-2);
  line-height: 1;
}
.crm-seg-hoja b { color: var(--crm-text); font: 500 12px/12px var(--crm-sans); font-variant-numeric: tabular-nums; }
.crm-seg-hoja small { color: var(--crm-dim); font: 400 11px/12px var(--crm-mono); text-transform: uppercase; }
.crm-seg-hoja[data-tono="vencida"] { border-top-color: var(--crm-error); }
.crm-seg-hoja[data-tono="vencida"] b { color: var(--crm-error); }
.crm-seg-vacio { display: flex; align-items: center; gap: 8px; min-height: 40px; margin: 0; border-bottom: 1px solid var(--crm-line); color: var(--crm-muted); font-size: 12px; line-height: 16px; }
.crm-seg[data-estado="error"] { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--crm-line-2); border-left: 2px solid var(--crm-error); }
.crm-seg-error { margin: 0; color: var(--crm-text); font-size: 13px; line-height: 20px; }
.crm-seg[data-estado="cargando"] { gap: 0; }
.crm-seg[data-estado="cargando"] .crm-seg-fila { grid-template-columns: 24px minmax(0, 1fr); }
@container (max-width: 560px) {
  .crm-seg-fila { grid-template-columns: 24px minmax(0, 1fr) auto; }
  .crm-seg-acciones { position: static; grid-column: 2 / -1; padding-left: 0; background: none; visibility: visible; transform: none; }
}

/* ══ Dictado ═════════════════════════════════════════════════════════ */
.crm-dict { display: grid; gap: 12px; min-width: 0; container-type: inline-size; }
.crm-dict-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.crm-dict-grabando:focus { outline: none; }
.crm-dict-vu { display: inline-flex; align-items: center; gap: 2px; height: 32px; padding: 0 8px; border: 1px solid var(--crm-line-2); background: var(--crm-panel); }
.crm-dict-vu i { display: block; width: 2px; height: 20px; background: var(--crm-acento); transform-origin: center; transition: transform var(--crm-t-pulsar) linear; }
.crm-dict-contador { color: var(--crm-text); font: 400 13px/20px var(--crm-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.crm-dict-contador small { color: var(--crm-dim); font-size: 11px; }
.crm-dict-contador[data-aviso] { color: var(--crm-aviso); }
.crm-dict-espera {
  position: relative;
  min-height: 32px;
  padding: 0 12px;
  overflow: hidden;
  border: 1px solid var(--crm-line-2);
  color: var(--crm-muted);
  font-size: 13px;
  line-height: 20px;
}
.crm-dict-espera::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--crm-acento) 50%, transparent) no-repeat;
  background-size: 40% 100%;
  background-position: -40% 0;
  animation: crm-filo-continuo var(--crm-t-filo) var(--crm-curva) infinite;
}
.crm-dict-texto { display: grid; gap: 8px; }
.crm-dict-propuesta { display: grid; gap: 12px; padding: 12px 16px; border: 1px solid var(--crm-line-2); background: var(--crm-panel); }
.crm-dict-resumen { color: var(--crm-text-2); font-size: 13px; line-height: 20px; quotes: "«" "»"; }
.crm-dict-cambios { display: grid; margin: 0; padding: 0; list-style: none; }
.crm-dict-cambio { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 8px 0; border-top: 1px solid var(--crm-line); }
.crm-dict-diff { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; min-width: 0; color: var(--crm-text); font-size: 13px; line-height: 20px; }
.crm-dict-diff del { color: var(--crm-dim); text-decoration: line-through; }
.crm-dict-diff ins { color: var(--crm-text); text-decoration: none; }
.crm-dict-flecha { color: var(--crm-dim); }
.crm-dict-nota { grid-column: 2; color: var(--crm-aviso); font-size: 12px; line-height: 16px; }
.crm-dict-nada { margin: 0; color: var(--crm-muted); font-size: 12px; line-height: 16px; }
.crm-dict-error { display: grid; gap: 8px; padding: 12px 16px; border: 1px solid var(--crm-line-2); border-left: 2px solid var(--crm-error); }
.crm-dict-error p { margin: 0; color: var(--crm-text); font-size: 13px; line-height: 20px; }
@container (max-width: 400px) {
  .crm-dict-cambio { grid-template-columns: minmax(0, 1fr); }
  .crm-dict-nota { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .crm-dict-vu i { transition: none; }
  .crm-dup[data-estado="buscando"]::after, .crm-dict-espera::after { animation: none; background-position: 50% 0; }
  .crm-tel-lista { animation: none; }
}
@media (forced-colors: active) {
  .crm-asig-fila[aria-checked="true"]::before, .crm-asig-sugerencia::before, .crm-dict-vu i { background: Highlight; forced-color-adjust: none; }
  .crm-tel-banda[data-ue] { forced-color-adjust: none; }
}

/* ── OrbeCriterium · la C de Criterium viva, en ASCII (voz y Superinteligencia) ── */
.crm-orbe { position: relative; display: inline-grid; place-items: center; flex: none; width: var(--crm-orbe, 64px); height: var(--crm-orbe, 64px); font-family: var(--crm-mono); color: var(--crm-dim); }
.crm-orbe-lienzo { display: block; width: 100%; height: 100%; }

/* ── GrabacionVoz · la cinta que escucha: orbe + vúmetro + texto en vivo ── */
.crm-voz { position: relative; display: grid; grid-template-rows: auto 1fr; gap: 12px; min-height: 100%; padding: 12px 16px 16px; background: var(--crm-panel); border: 1px solid var(--crm-acento); container-type: inline-size; }
.crm-voz:focus { outline: none; }
.crm-voz-cab { display: flex; align-items: center; gap: 12px; min-width: 0; }
.crm-voz-estado { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.crm-voz-rotulo { font: 500 11px/16px var(--crm-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--crm-acento); }
.crm-voz[data-estado="pensando"] .crm-voz-rotulo { color: var(--crm-dim); }
.crm-voz-motor { font: 400 11px/16px var(--crm-mono); color: var(--crm-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-voz-reloj { font: 500 13px/20px var(--crm-mono); font-variant-numeric: tabular-nums; color: var(--crm-text); white-space: nowrap; }
.crm-voz-reloj small { color: var(--crm-dim); font-size: 11px; }
.crm-voz-reloj[data-aviso] { color: var(--crm-aviso); }
.crm-voz-vu { display: inline-flex; align-items: center; gap: 2px; height: 24px; }
.crm-voz-vu i { display: block; width: 2px; height: 20px; background: var(--crm-acento); transform-origin: center; transform: scaleY(.125); transition: transform 80ms linear; }
.crm-voz-acciones { display: inline-flex; align-items: center; gap: 8px; }
.crm-voz-texto { margin: 0; font: 400 16px/24px var(--crm-sans); color: var(--crm-text); overflow-wrap: anywhere; min-height: 48px; max-height: 240px; overflow: auto; }
.crm-voz-texto .crm-voz-prov { color: var(--crm-dim); }
.crm-voz-texto[data-vacio] { color: var(--crm-dim); font-size: 14px; }
.crm-voz-cursor { display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -0.15em; background: var(--crm-acento); animation: crm-voz-cursor 1s steps(1) infinite; }
@keyframes crm-voz-cursor { 50% { opacity: 0; } }
.crm-voz-aviso { font: 400 11px/16px var(--crm-sans); color: var(--crm-dim); }
@media (prefers-reduced-motion: reduce) { .crm-voz-vu i { transition: none; } .crm-voz-cursor { animation: none; } }
@container (max-width: 420px) { .crm-voz-vu { display: none; } }

/* ── BotonVoz · el micrófono a la vista, dentro del campo ── */
.crm-boton-voz { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 0; overflow: hidden; border: 1px solid var(--crm-line-2); background: var(--crm-bg); color: var(--crm-text); font: 500 13px/20px var(--crm-sans); cursor: pointer; transition: border-color var(--crm-t-pulsar, 120ms), background var(--crm-t-pulsar, 120ms); }
.crm-boton-voz:hover:not(:disabled) { border-color: var(--crm-acento); }
.crm-boton-voz:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: 2px; }
.crm-boton-voz:disabled { color: var(--crm-dim); cursor: default; }
.crm-boton-voz .crm-tecla { margin-left: 4px; }
.crm-boton-voz[data-tactil] { height: 48px; padding: 0 16px 0 8px; }
.crm-voz-rotulo, .crm-voz-estado { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@container (max-width: 420px) { .crm-voz-cab { gap: 8px; } .crm-voz-motor { display: none; } .crm-voz-reloj small { display: none; } }

/* ══ DatoEditable · HistorialCampo ═════════════════════════════════════ */

/* La caja es el contenedor: la rejilla se apila cuando su columna es estrecha, mida lo que mida la ventana. */
.crm-dato-caja { container-type: inline-size; min-width: 0; }
.crm-dato {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 12px; row-gap: 2px;
  align-items: center; min-height: 32px; padding: 4px 0;
}
.crm-dato-rotulo { font: 500 11px/16px var(--crm-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--crm-dim); }

/* Lectura: el valor es un botón sin caja; «Cambiar» aparece al acercarse. */
.crm-dato-valor {
  display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 28px; padding: 0 6px; margin-left: -6px;
  border: 1px solid transparent; background: transparent; color: var(--crm-text); text-align: left; cursor: text;
  font: 15px/22px var(--crm-sans); transition: border-color var(--crm-t-color, 120ms), background var(--crm-t-color, 120ms);
}
.crm-dato-valor[data-mono] { font: 14px/22px var(--crm-mono); font-variant-numeric: tabular-nums; }
.crm-dato-valor:hover:not(:disabled) { border-color: var(--crm-line); background: var(--crm-panel-2, var(--crm-panel)); }
.crm-dato-valor:disabled { cursor: default; }
.crm-dato-valor:focus-visible, .crm-dato-hueco:focus-visible, .crm-dato-cambios:focus-visible { outline: var(--crm-foco-ancho, 1px) solid var(--crm-acento); outline-offset: 2px; }
.crm-dato-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-dato-cambiar { margin-left: auto; font: 500 11px/16px var(--crm-mono); letter-spacing: .06em; color: var(--crm-dim); opacity: 0; transition: opacity var(--crm-t-color, 120ms); }
.crm-dato-valor:hover .crm-dato-cambiar, .crm-dato-valor:focus-visible .crm-dato-cambiar { opacity: 1; }

/* Asentar: el valor nuevo sube 2 px y se posa; el filo verde se apaga. */
.crm-dato-valor[data-asentado] { animation: crm-dato-asienta 700ms var(--crm-snap, cubic-bezier(.2, .8, .2, 1)) both; }
@keyframes crm-dato-asienta {
  0% { transform: translateY(-2px); border-color: var(--crm-acento); background: var(--crm-acento-suave, transparent); }
  60% { transform: translateY(0); border-color: var(--crm-acento-linea, var(--crm-acento)); }
  100% { border-color: transparent; background: transparent; }
}

/* El hueco: la casilla vacía del impreso, con borde de troquel. */
.crm-dato-hueco {
  display: inline-flex; align-items: center; gap: 8px; justify-self: start; min-height: 28px; padding: 0 10px;
  border: 1px dashed var(--crm-line-2, var(--crm-line)); background: transparent; color: var(--crm-muted, var(--crm-dim));
  font: 14px/20px var(--crm-sans); white-space: nowrap; cursor: pointer;
  transition: color var(--crm-t-color, 120ms), border-color var(--crm-t-color, 120ms), background var(--crm-t-color, 120ms);
}
.crm-dato-hueco:hover { color: var(--crm-text); border-color: var(--crm-acento-linea, var(--crm-acento)); background: var(--crm-acento-suave, transparent); }
.crm-dato-mas { font: 500 15px/1 var(--crm-mono); color: var(--crm-acento); }
.crm-dato-falta { font: 14px/20px var(--crm-sans); color: var(--crm-dim); }

/* Edición en su sitio. */
.crm-dato-edicion { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.crm-dato-edicion > :first-child { flex: 1 1 220px; min-width: 0; }
.crm-dato-problema { flex-basis: 100%; margin: 2px 0 0; font: 13px/18px var(--crm-sans); color: var(--crm-error); }

.crm-dato-conflicto {
  flex-basis: 100%; display: grid; gap: 8px; margin-top: 4px; padding: 10px 12px;
  border: 1px solid var(--crm-aviso-linea, var(--crm-aviso)); border-left-width: 3px; background: var(--crm-panel);
  font: 13px/18px var(--crm-sans); color: var(--crm-text);
}
.crm-dato-conflicto p { margin: 0; }
.crm-dato-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.crm-dato-dos span { display: grid; gap: 2px; }
.crm-dato-dos small { font: 500 10px/14px var(--crm-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--crm-dim); }
.crm-dato-dos b { font: 500 14px/20px var(--crm-mono); overflow-wrap: anywhere; }
.crm-dato-acciones { display: flex; gap: 6px; justify-content: flex-end; }

/* Pie: el sello de quién tocó el dato y la puerta al registro. */
.crm-dato-pie { grid-column: 2; display: flex; align-items: center; gap: 10px; min-height: 0; }
.crm-dato-pie:empty { display: none; }
.crm-dato-sello { font: 11px/16px var(--crm-mono); color: var(--crm-dim); }
.crm-dato-cambios {
  display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; border-bottom: 1px solid var(--crm-line);
  background: transparent; color: var(--crm-muted, var(--crm-dim)); font: 11px/16px var(--crm-mono); cursor: pointer;
}
.crm-dato-cambios:hover { color: var(--crm-text); }
.crm-dato-n { font-variant-numeric: tabular-nums; }
.crm-dato-motivo { grid-column: 2; font: 12px/16px var(--crm-sans); color: var(--crm-dim); }

/* El registro: cada valor anterior tachado, el nuevo, quién y cuándo. */
.crm-dato > .crm-dato-historial { grid-column: 2; }
.crm-dato-historial {
  display: grid; gap: 6px; margin: 4px 0 2px; padding: 8px 10px; list-style: none;
  border-left: 1px solid var(--crm-line); background: var(--crm-panel-2, transparent);
}
.crm-dato-historial li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font: 13px/18px var(--crm-mono); }
.crm-dato-antes { color: var(--crm-dim); text-decoration: line-through; text-decoration-color: var(--crm-line-2, var(--crm-line)); }
.crm-dato-flecha { color: var(--crm-dim); }
.crm-dato-despues { color: var(--crm-text); }
.crm-dato-quien { flex-basis: 100%; font: 11px/16px var(--crm-mono); color: var(--crm-dim); }

@media (prefers-reduced-motion: reduce) {
  .crm-dato-valor[data-asentado] { animation: none; border-color: var(--crm-acento-linea, var(--crm-acento)); }
}
/* En una columna estrecha (lateral de la carpeta, móvil) el rótulo va encima y el dato
   tiene todo el ancho: nunca «+34 600 00…» ni «compras@de…» cortados. */
@container (max-width: 440px) {
  .crm-dato { grid-template-columns: 1fr; row-gap: 0; padding: 6px 0; }
  .crm-dato-pie, .crm-dato-motivo, .crm-dato > .crm-dato-historial { grid-column: 1; }
  .crm-dato-valor { margin-left: -6px; }
}


/* ── Mostrador de entradas · familia comercial (16-10-2026) ── */
/* Turno, SelloOrigen, PlacaPais, MarcadorSegmentos, MostradorEntradas, FichaAnuncio, CartaMensaje, AccionCanal. Solo tokens --crm-*. */

:is(.crm-entradas, .crm-marcador, .crm-anuncio, .crm-misiva, .crm-contacto-canal, .crm-origen, .crm-turno, .crm-pais-ue),
:is(.crm-entradas, .crm-marcador, .crm-anuncio, .crm-misiva, .crm-contacto-canal) * { box-sizing: border-box; }

/* ══ Turno: el talón del mostrador ════════════════════════════════════ */
.crm-turno {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  height: 16px;
  padding: 0 6px;
  border: 1px solid var(--crm-line-2);
  background: var(--crm-panel);
  color: var(--crm-dim);
  font: 500 10px/14px var(--crm-mono);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  /* Las dos muescas troqueladas a media altura. */
  -webkit-mask: radial-gradient(circle 3px at 0 50%, transparent 2.5px, currentColor 3px) left / 51% 100% no-repeat, radial-gradient(circle 3px at 100% 50%, transparent 2.5px, currentColor 3px) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 3px at 0 50%, transparent 2.5px, currentColor 3px) left / 51% 100% no-repeat, radial-gradient(circle 3px at 100% 50%, transparent 2.5px, currentColor 3px) right / 51% 100% no-repeat;
}

/* ══ Sello de origen ══════════════════════════════════════════════════ */
.crm-origen {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--crm-text-2);
  font: 400 13px/20px var(--crm-sans);
  white-space: nowrap;
}
.crm-origen-marca {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  /* Doble filete de sello de caucho. */
  border: 1px solid var(--crm-text-2);
  outline: 1px solid var(--crm-line-2);
  outline-offset: 1px;
  color: var(--crm-text);
  font: 500 10px/1 var(--crm-mono);
  letter-spacing: .02em;
}
.crm-origen[data-canal="sin"] .crm-origen-marca,
.crm-origen[data-canal="otro"] .crm-origen-marca { border-style: dashed; color: var(--crm-dim); }
.crm-origen-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.crm-origen-moneda {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  /* Canto acuñado: el anillo de puntos de una moneda. */
  border: 1px dotted var(--crm-text-2);
  box-shadow: inset 0 0 0 2px var(--crm-panel), inset 0 0 0 3px var(--crm-line-2);
  color: var(--crm-text);
  font: 500 9px/1 var(--crm-mono);
}

/* ══ Placa de país: la banda de la matrícula ═══════════════════════════ */
.crm-pais-ue { display: inline-flex; align-items: center; gap: 8px; color: var(--crm-text-2); font: 400 13px/20px var(--crm-sans); white-space: nowrap; }
.crm-pais-ue-banda {
  display: inline-grid;
  grid-template-rows: 10px 8px;
  place-items: center;
  width: 16px;
  height: 24px;
  padding: 1px 0;
  background: var(--crm-panel-3);
  border: 1px solid var(--crm-line-2);
}
.crm-pais-ue[data-ue] .crm-pais-ue-banda { background: var(--crm-placa-azul); border-color: var(--crm-placa-azul); }
.crm-pais-ue-estrellas { width: 10px; height: 10px; fill: var(--crm-placa-estrella); }
.crm-pais-ue-codigo { color: var(--crm-text); font: 500 8px/8px var(--crm-mono); letter-spacing: 0; }
.crm-pais-ue[data-ue] .crm-pais-ue-codigo { color: var(--crm-placa-letra-ue); }
.crm-pais-ue[data-detectado] .crm-pais-ue-nombre { color: var(--crm-dim); text-decoration: underline dotted var(--crm-line-2); text-underline-offset: 3px; }

/* ══ Marcador de segmentos ═════════════════════════════════════════════ */
.crm-marcador {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(112px, 1fr);
  border: 1px solid var(--crm-line);
  background: var(--crm-panel);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  container-type: inline-size;
}
.crm-marcador::-webkit-scrollbar { display: none; }
/* Casilla en columna: rótulo arriba y cifra empujada al pie, así todas las cifras
   comparten línea base aunque un rótulo ocupe una línea y otro dos (23-oct-2026). */
.crm-marcador-casilla {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 12px 16px 12px;
  border: 0;
  border-right: 1px solid var(--crm-line);
  background: transparent;
  color: var(--crm-dim);
  text-align: left;
  cursor: pointer;
  scroll-snap-align: start;
  transition: background-color var(--crm-t-color), color var(--crm-t-color);
}
.crm-marcador-casilla:last-child { border-right: 0; }
/* El seleccionado: filete superior de 2 px en verde (la marca de selección de la casa). */
.crm-marcador-casilla[aria-checked="true"] { color: var(--crm-text); background: var(--crm-panel-2); }
.crm-marcador-casilla[aria-checked="true"]::before { content: ""; position: absolute; inset: -1px 0 auto; height: 2px; background: var(--crm-acento); }
@media (hover: hover) { .crm-marcador-casilla:hover:not([aria-checked="true"]) { background: var(--crm-panel-2); color: var(--crm-text-2); } }
.crm-marcador-casilla:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: -2px; }
/* El glifo va en línea con la primera palabra: el rótulo usa todo el ancho de la casilla. */
.crm-marcador-cab { display: block; min-width: 0; min-height: 32px; }
/* Ocho o más situaciones: caben sin partir palabras. Nunca columnas de 0 px: por debajo
   de 88 px el marcador se desliza en horizontal (con imán) en vez de romper los rótulos. */
.crm-marcador:has(> .crm-marcador-casilla:nth-child(8)) { grid-auto-columns: minmax(88px, 1fr); }
@container (max-width: 1100px) {
  .crm-marcador-casilla { padding: 12px 8px; }
  .crm-marcador-casilla .crm-marcador-etiqueta { letter-spacing: .02em; }
  .crm-marcador-casilla .crm-marcador-glifo { width: 12px; height: 12px; margin-right: 4px; }
}
/* Móvil: carrusel de casillas de ancho fijo, con imán y un borde que se desvanece para
   que se vea que hay más. */
@media (max-width: 640px) {
  .crm-marcador, .crm-marcador:has(> .crm-marcador-casilla:nth-child(8)) {
    grid-auto-columns: 104px;
    scroll-snap-type: x mandatory;
    -webkit-mask-image: linear-gradient(to right, currentColor calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, currentColor calc(100% - 28px), transparent);
  }
  .crm-marcador-casilla .crm-marcador-cifra { font-size: 20px; line-height: 24px; }
}
.crm-marcador-glifo { display: inline-block; vertical-align: -2px; margin-right: 6px; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: square; }
/* Rótulo: corta solo entre palabras (nunca «REPARTI R»); el texto largo va en el consejo
   (`etiquetaLarga`). */
.crm-marcador-etiqueta {
  font: 500 11px/16px var(--crm-mono); letter-spacing: .06em; text-transform: uppercase; text-wrap: balance;
  overflow-wrap: normal; word-break: normal; hyphens: none;
}
.crm-marcador-cifra { display: block; margin-top: auto; color: var(--crm-text); font: 500 24px/28px var(--crm-sans); font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
.crm-marcador-casilla[aria-checked="false"] .crm-marcador-cifra { color: var(--crm-text-2); }
.crm-marcador-casilla[data-tono="error"] :is(.crm-marcador-glifo, .crm-marcador-cifra) { color: var(--crm-error); }
.crm-marcador-casilla[data-tono="aviso"] :is(.crm-marcador-glifo, .crm-marcador-cifra) { color: var(--crm-aviso); }
/* Firma: la hoja de la cifra cae como en un marcador de paletas cuando cambia. */
.crm-marcador-cifra[data-cae] { animation: crm-marcador-cae var(--crm-t-capa) var(--crm-snap, ease-out) both; transform-origin: 50% 0; }
@keyframes crm-marcador-cae { from { transform: perspective(200px) rotateX(-80deg); opacity: .2; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .crm-marcador-cifra[data-cae] { animation: none; } }

/* ══ Mostrador de entradas ════════════════════════════════════════════ */
.crm-entradas { position: relative; container: crm-entradas / inline-size; min-width: 0; border: 1px solid var(--crm-line); background: var(--crm-panel); }
.crm-entradas[data-vacio] { display: grid; place-items: center; min-height: 240px; }
/* Cada fila se pinta solo cuando entra en pantalla: 300+ filas no pesan. */
.crm-entrada-fila { content-visibility: auto; contain-intrinsic-size: auto 52px; }
.crm-entradas-rotulo {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 32px;
  padding: 0 16px;
  border-bottom: 1px solid var(--crm-line);
  background: var(--crm-panel-2);
  color: var(--crm-dim);
  font: 500 11px/16px var(--crm-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.crm-entradas-cuenta { font-variant-numeric: tabular-nums; }
/* Firma: el tramo «Ahora» lleva un filo verde que late mientras haya algo esperando. */
.crm-entradas-rotulo[data-tramo="ahora"] { color: var(--crm-text); }
.crm-entradas-rotulo[data-tramo="ahora"]::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 1px;
  background: var(--crm-acento);
  animation: crm-entradas-latido var(--crm-t-latido, 1800ms) ease-in-out infinite;
}
@keyframes crm-entradas-latido { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .crm-entradas-rotulo[data-tramo="ahora"]::after { animation: none; } }

.crm-entrada-fila {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(176px, 1.1fr) minmax(0, 2.6fr) 148px 156px 112px;
  align-items: center;
  column-gap: 16px;
  height: 52px;
  padding: 0 16px;
  border-bottom: 1px solid var(--crm-line);
  background: var(--crm-panel);
  color: var(--crm-text-2);
  font: 400 13px/20px var(--crm-sans);
  cursor: pointer;
  transition: background-color var(--crm-t-color);
}
.crm-entradas-lista:has(.crm-entrada-sel) .crm-entrada-fila { grid-template-columns: 20px 96px minmax(176px, 1.1fr) minmax(0, 2.6fr) 148px 156px 112px; }
/* Con columna de cifra (ticket estimado): entre la lectura y el sello, alineada a la derecha. */
.crm-entradas-lista[data-cifra] .crm-entrada-fila { grid-template-columns: 96px minmax(176px, 1.1fr) minmax(0, 2.3fr) 112px 148px 156px 112px; }
.crm-entradas-lista[data-cifra]:has(.crm-entrada-sel) .crm-entrada-fila { grid-template-columns: 20px 96px minmax(176px, 1.1fr) minmax(0, 2.3fr) 112px 148px 156px 112px; }
.crm-entrada-cifra { display: flex; justify-content: flex-end; min-width: 0; }
@media (hover: hover) { .crm-entrada-fila:hover { background: var(--crm-panel-2); } }
.crm-entrada-fila:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: -1px; }
.crm-entrada-fila[data-activa] { background: var(--crm-panel-2); }
.crm-entrada-fila[data-activa]::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--crm-acento); }
.crm-entrada-fila[data-seleccionada] { background: var(--crm-seleccion, var(--crm-panel-2)); }

.crm-entrada-sel { display: grid; place-items: center; }
.crm-entrada-casilla {
  width: 14px;
  height: 14px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--crm-control);
  background: var(--crm-panel);
  cursor: pointer;
}
.crm-entrada-casilla[aria-checked="true"] { border-color: var(--crm-acento); background: var(--crm-acento); box-shadow: inset 0 0 0 2px var(--crm-panel); }

.crm-entrada-reloj { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.crm-entrada-reloj .crm-ini-reloj { flex: none; }
.crm-entrada-reloj .crm-ini-reloj-esfera { width: 20px; height: 20px; }
.crm-entrada-reloj-hueco { flex: none; width: 20px; height: 20px; }
.crm-entrada-edad { color: var(--crm-dim); font: 400 12px/16px var(--crm-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.crm-entrada-reloj[data-pendiente]:has([data-tramo="aviso"]) .crm-entrada-edad { color: var(--crm-aviso); }
.crm-entrada-reloj[data-pendiente]:has([data-tramo="vencido"]) .crm-entrada-edad { color: var(--crm-error); }

.crm-entrada-quien { display: grid; gap: 2px; min-width: 0; }
.crm-entrada-nombre { overflow: hidden; color: var(--crm-text); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
/* Lo leído en el mensaje: tenue y con su subrayado de puntos (no es un dato guardado). */
.crm-entrada-nombre[data-detectado], .crm-entrada-tel[data-detectado] { text-decoration: underline dotted var(--crm-line-2); text-underline-offset: 3px; }
.crm-entrada-nombre[data-detectado] { color: var(--crm-text-2); }
.crm-entrada-sub { display: flex; overflow: hidden; align-items: center; gap: 8px; min-width: 0; color: var(--crm-dim); font-size: 12px; line-height: 16px; white-space: nowrap; }
.crm-entrada-tel { flex: none; font: 400 12px/16px var(--crm-mono); font-variant-numeric: tabular-nums; color: var(--crm-text-2); }
.crm-entrada-empresa { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.crm-entrada-lectura { display: flex; align-items: baseline; gap: 8px; min-width: 0; white-space: nowrap; }
.crm-entrada-pide { flex: none; max-width: 45%; overflow: hidden; color: var(--crm-text); font-weight: 500; text-overflow: ellipsis; }
.crm-entrada-texto { min-width: 0; overflow: hidden; color: var(--crm-dim); text-overflow: ellipsis; }
.crm-entrada-marcas { display: inline-flex; flex: none; align-items: center; gap: 4px; margin-left: auto; }

.crm-entrada-origen { min-width: 0; overflow: hidden; }
.crm-entrada-lleva { min-width: 0; }
.crm-entrada-persona { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; color: var(--crm-text-2); white-space: nowrap; }
.crm-entrada-persona > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.crm-entrada-persona[data-provisional] > span:last-child { color: var(--crm-dim); font-style: italic; }
/* Sin responsable: una ranura ámbar, no un avatar vacío. */
.crm-entrada-ranura {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  margin: 0;
  padding: 0 8px;
  border: 1px dashed var(--crm-aviso-linea, var(--crm-aviso));
  background: var(--crm-aviso-suave);
  color: var(--crm-aviso);
  font: 500 12px/16px var(--crm-sans);
  white-space: nowrap;
  cursor: pointer;
}
.crm-entrada-ranura[data-quieta] { cursor: default; }
@media (hover: hover) { button.crm-entrada-ranura:hover { border-style: solid; } }
.crm-entrada-ranura:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; }

.crm-entrada-estado { overflow: hidden; color: var(--crm-dim); font: 400 12px/16px var(--crm-mono); text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.crm-entrada-estado[data-tono="aviso"] { color: var(--crm-aviso); }
.crm-entrada-estado[data-tono="error"] { color: var(--crm-error); }
.crm-entrada-estado[data-tono="hecho"] { color: var(--crm-acento); }

/* Acciones de la fila: con foco o ratón ocupan el sitio de origen, responsable y estado
   (que se ocultan), así nunca tapan lo que dice el lead. */
.crm-entrada-acciones {
  position: absolute;
  inset: 0 0 0 auto;
  display: none;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  width: calc(148px + 156px + 112px + 32px);
  padding: 0 16px 0 0;
  background: inherit;
}
@media (hover: hover) {
  .crm-entrada-fila:hover .crm-entrada-acciones { display: inline-flex; }
  .crm-entrada-fila:hover :is(.crm-entrada-origen, .crm-entrada-lleva, .crm-entrada-estado) { visibility: hidden; }
}
.crm-entrada-fila:is(:focus-visible, :focus-within) .crm-entrada-acciones { display: inline-flex; }
.crm-entrada-fila:is(:focus-visible, :focus-within) :is(.crm-entrada-origen, .crm-entrada-lleva, .crm-entrada-estado) { visibility: hidden; }

/* Barra de lote: abajo, pegada, con la cuenta en tabular. */
.crm-entradas-lote {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 16px;
  border-top: 1px solid var(--crm-line-2);
  background: var(--crm-panel-3);
  color: var(--crm-text-2);
  box-shadow: var(--crm-sombra-capa);
  animation: crm-entradas-lote var(--crm-t-capa) var(--crm-snap, ease-out) both;
}
@keyframes crm-entradas-lote { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .crm-entradas-lote { animation: none; } }
.crm-entradas-lote-cuenta strong { color: var(--crm-text); font-weight: 500; font-variant-numeric: tabular-nums; }
.crm-entradas-lote-acciones { display: inline-flex; flex: 1; gap: 8px; }

@container crm-entradas (max-width: 1100px) {
  /* Las acciones ocupan solo el sitio del sello y del responsable. */
  .crm-entrada-acciones { width: calc(36px + 140px + 32px); }
  .crm-entrada-fila, .crm-entradas-lista:has(.crm-entrada-sel) .crm-entrada-fila { grid-template-columns: 88px minmax(160px, 1fr) minmax(0, 2fr) 36px 140px; }
  .crm-entradas-lista:has(.crm-entrada-sel) .crm-entrada-fila { grid-template-columns: 20px 88px minmax(160px, 1fr) minmax(0, 2fr) 36px 140px; }
  .crm-entradas-lista[data-cifra] .crm-entrada-fila { grid-template-columns: 88px minmax(160px, 1fr) minmax(0, 2fr) 104px 36px 140px; }
  .crm-entradas-lista[data-cifra]:has(.crm-entrada-sel) .crm-entrada-fila { grid-template-columns: 20px 88px minmax(160px, 1fr) minmax(0, 2fr) 104px 36px 140px; }
  .crm-entrada-estado { display: none; }
  .crm-entrada-origen .crm-origen-nombre, .crm-entrada-origen .crm-origen-moneda { display: none; }
}
@container crm-entradas (max-width: 720px) {
  /* Fila compacta (ficha abierta o móvil): alto fijo de 64, el reloj con su edad a la izquierda,
     quién y qué pide en el centro, el sello y quién lo lleva a la derecha. Mismo orden de lectura. */
  .crm-entrada-fila, .crm-entradas-lista:has(.crm-entrada-sel) .crm-entrada-fila {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    grid-template-areas: "reloj quien origen" "reloj lectura lleva";
    column-gap: 12px;
    row-gap: 4px;
    height: 64px;
    padding: 0 16px;
    align-content: center;
  }
  .crm-entrada-sel, .crm-entrada-estado, .crm-entrada-cifra { display: none; }
  .crm-entrada-reloj { grid-area: reloj; flex-direction: column; justify-content: center; gap: 4px; align-self: stretch; }
  .crm-entrada-quien { grid-area: quien; }
  .crm-entrada-quien .crm-entrada-sub { display: none; }
  .crm-entrada-lectura { grid-area: lectura; }
  .crm-entrada-origen { grid-area: origen; justify-self: end; }
  .crm-entrada-origen .crm-origen-nombre, .crm-entrada-origen .crm-origen-moneda { display: none; }
  .crm-entrada-lleva { grid-area: lleva; justify-self: end; }
  .crm-entrada-persona > span:last-child, .crm-entrada-marcas { display: none; }
  .crm-entrada-ranura { height: 20px; }
  .crm-entrada-acciones { display: none !important; }
}

/* ══ Ficha del anuncio: el papel del tablón ════════════════════════════ */
.crm-anuncio {
  position: relative;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 16px 16px 0;
  border: 1px solid var(--crm-line-2);
  background: var(--crm-panel);
  color: var(--crm-text-2);
}
.crm-anuncio-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.crm-anuncio-rotulo { color: var(--crm-dim); font: 500 11px/16px var(--crm-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.crm-anuncio-hora { margin-left: auto; color: var(--crm-dim); font: 400 11px/16px var(--crm-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.crm-anuncio-titulo { color: var(--crm-text); font: 500 20px/24px var(--crm-sans); letter-spacing: -.01em; overflow-wrap: anywhere; }
.crm-anuncio-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; }
.crm-anuncio-ref { color: var(--crm-text-2); font: 400 12px/16px var(--crm-mono); font-variant-numeric: tabular-nums; }
.crm-anuncio-ref > span { color: var(--crm-dim); }
/* Firma: las tiras recortables con la referencia, como en el corcho. */
.crm-anuncio-tiras {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  grid-template-rows: 28px;
  grid-auto-rows: 0;
  overflow: hidden;
  height: 28px;
  margin: 0 -16px;
  border-top: 1px dashed var(--crm-line-2);
}
.crm-anuncio-tiras > span {
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 0 4px;
  border-right: 1px dashed var(--crm-line-2);
  color: var(--crm-dim);
  font: 400 10px/1 var(--crm-mono);
  letter-spacing: .04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ══ Carta del mensaje ════════════════════════════════════════════════ */
.crm-misiva {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--crm-line-2);
  background: var(--crm-panel);
  color: var(--crm-text-2);
}
.crm-misiva-remite { color: var(--crm-dim); font: 400 12px/16px var(--crm-mono); letter-spacing: .04em; }
.crm-misiva-aviso { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--crm-aviso-linea, var(--crm-aviso)); background: var(--crm-aviso-suave); color: var(--crm-aviso); font: 500 12px/16px var(--crm-sans); }
.crm-misiva-cuerpo { display: grid; gap: 12px; color: var(--crm-text); font: 400 14px/22px var(--crm-sans); }
.crm-misiva-cuerpo p { margin: 0; overflow-wrap: anywhere; }
.crm-misiva-vacia { color: var(--crm-dim); }
/* Lo que necesita, subrayado con rotulador (la mitad baja de la línea). */
.crm-misiva-marca {
  padding: 0 1px;
  background: linear-gradient(transparent 58%, var(--crm-acento-suave) 58%);
  color: inherit;
}
.crm-misiva-firma { display: grid; gap: 2px; padding-top: 12px; border-top: 1px dashed var(--crm-line-2); }
.crm-misiva-persona { color: var(--crm-text); font: 500 14px/20px var(--crm-sans); }
.crm-misiva-empresa { color: var(--crm-dim); font: 400 13px/20px var(--crm-sans); }
/* Firma: el matasellos del idioma en la esquina. */
.crm-misiva-matasellos {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--crm-text-2);
  border-radius: 50%;
  outline: 1px dashed var(--crm-line-2);
  outline-offset: 2px;
  color: var(--crm-text-2);
  font: 500 11px/1 var(--crm-mono);
  letter-spacing: .06em;
  transform: rotate(-12deg);
}
.crm-misiva:has(.crm-misiva-matasellos) .crm-misiva-cuerpo { padding-right: 32px; }
.crm-misiva-necesita { display: grid; gap: 8px; margin: 0; padding-top: 12px; border-top: 1px solid var(--crm-line); }
.crm-misiva-necesita > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.crm-misiva-necesita dt { width: 72px; color: var(--crm-dim); font: 500 11px/16px var(--crm-mono); letter-spacing: .06em; text-transform: uppercase; }
.crm-misiva-necesita dd { margin: 0; padding: 0 6px; border: 1px solid var(--crm-line-2); color: var(--crm-text); font: 400 12px/20px var(--crm-sans); }

/* ══ Acción según el canal ════════════════════════════════════════════ */
.crm-contacto-canal { display: flex; flex-wrap: wrap; gap: 8px; }
.crm-contacto-canal-llamar { gap: 12px; }
.crm-contacto-canal-numero { font: 500 14px/20px var(--crm-mono); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.crm-contacto-canal-numero[data-detectado] { text-decoration: underline dotted; text-underline-offset: 3px; }
.crm-contacto-canal[data-sin] { display: grid; gap: 8px; padding: 12px; border: 1px dashed var(--crm-line-2); }
.crm-contacto-canal-sin { color: var(--crm-dim); font: 400 13px/20px var(--crm-sans); }

/* ══ Lista con su ficha al lado ════════════════════════════════════════ */
.crm-lista-ficha { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; min-width: 0; container: crm-lista-ficha / inline-size; }
.crm-lista-ficha[data-abierta] { grid-template-columns: minmax(0, 1fr) 9px var(--crm-ficha-ancho, 600px); }
.crm-lista-ficha-lista { min-width: 0; }
.crm-lista-ficha-borde {
  position: sticky;
  top: 0;
  display: grid;
  place-items: center;
  align-self: stretch;
  width: 9px;
  min-height: 100%;
  cursor: col-resize;
  touch-action: none;
}
.crm-lista-ficha-borde > span {
  width: 1px;
  height: 100%;
  background: var(--crm-line);
  /* Los tres puntos del asa, a media altura. */
  box-shadow: 0 0 0 0 transparent;
}
.crm-lista-ficha-borde::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 3px;
  width: 3px;
  height: 20px;
  margin-top: -10px;
  background: radial-gradient(circle, var(--crm-line-2) 1.5px, transparent 1.6px) 0 0 / 3px 8px repeat-y;
}
.crm-lista-ficha-borde:is(:hover, :active, :focus-visible)::after { background-image: radial-gradient(circle, var(--crm-acento) 1.5px, transparent 1.6px); }
.crm-lista-ficha-borde:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: -2px; }
.crm-lista-ficha-ficha {
  position: sticky;
  top: 0;
  display: grid;
  align-content: start;
  gap: 16px;
  min-width: 0;
  max-height: calc(100dvh - var(--crm-marco-arriba, 44px) - var(--crm-marco-abajo, 32px));
  overflow-y: auto;
  padding: 16px 20px 24px;
  border: 1px solid var(--crm-line);
  background: var(--crm-panel);
  overscroll-behavior: contain;
  animation: crm-ficha-entra var(--crm-t-panel, 240ms) var(--crm-snap, ease-out) both;
}
@keyframes crm-ficha-entra { from { transform: translateX(16px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .crm-lista-ficha-ficha { animation: none; } }
.crm-lista-ficha-mandos { display: flex; justify-content: flex-end; gap: 4px; margin: -8px -12px 0 0; }
/* Ampliada: la ficha ocupa todo el ancho de la vista. */
.crm-lista-ficha[data-amplia] { grid-template-columns: minmax(0, 1fr); }
.crm-lista-ficha[data-amplia] :is(.crm-lista-ficha-lista, .crm-lista-ficha-borde) { display: none; }
.crm-lista-ficha[data-amplia] .crm-lista-ficha-ficha { max-height: none; padding: 24px max(24px, calc((100% - 880px) / 2)); }
@container crm-lista-ficha (max-width: 960px) {
  .crm-lista-ficha[data-abierta] { grid-template-columns: minmax(0, 1fr); }
  .crm-lista-ficha-borde { display: none; }
  .crm-lista-ficha-ficha { position: fixed; inset: var(--crm-marco-arriba, 44px) 0 var(--crm-marco-abajo, 32px); z-index: 400; max-height: none; border: 0; padding-bottom: 24px; }
  .crm-lista-ficha-mandos { position: sticky; top: -16px; z-index: 1; margin: -16px -20px 0; padding: 8px 12px; border-bottom: 1px solid var(--crm-line); background: var(--crm-panel); }
}
/* Sin nombre: lo que se enseña (su teléfono o «Sin nombre») va apagado, en mono si es un número. */
.crm-entrada-nombre[data-anonimo] { color: var(--crm-dim); font-weight: 400; }

/* ══ Carta: el anuncio va dentro, como lo que acompaña al mensaje ═════ */
.crm-misiva-adjunto { margin: -20px -20px 4px; }
.crm-misiva-adjunto > .crm-anuncio { border-width: 0 0 1px; }
.crm-misiva:has(.crm-misiva-adjunto) .crm-misiva-matasellos { position: static; justify-self: end; margin-bottom: -44px; transform: rotate(-12deg) translateY(4px); }

/* ══ FichaModal: la ficha grande, con su cabecera pegajosa ═════════════ */
.crm-modal.crm-ficha-modal {
  /* Centrada en la ventana, márgenes iguales, y de alto FIJO: al pasar de entrada el marco no se mueve. */
  --crm-modal-ancho: min(1320px, 92vw);
  top: 50%;
  left: 50%;
  width: min(1320px, 92vw);
  height: min(88vh, 880px);
  max-height: none;
  translate: -50% -50%;
  grid-template-rows: auto minmax(0, 1fr);
}
.crm-modal.crm-ficha-modal[data-completa] { position: fixed; inset: auto; min-height: 0; max-height: none; translate: none; height: auto; border-width: 0 0 0 1px; box-shadow: none; }
.crm-modal.crm-ficha-modal[data-completa]:not([style*="top"]) { inset: 0; width: auto; }
.crm-ficha-modal-cab { position: relative; z-index: 2; display: grid; gap: 12px; padding: 12px 20px 16px; border-bottom: 1px solid var(--crm-line); background: var(--crm-panel); }
.crm-ficha-modal-barra { display: flex; align-items: center; gap: 12px; min-width: 0; }
.crm-ficha-modal-rotulo { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.crm-ficha-modal-pos { display: inline-flex; align-items: center; gap: 4px; }
/* Firma: el visor del turno; el número cae al cambiar de entrada. */
.crm-ficha-modal-tique { display: inline-flex; align-items: baseline; gap: 4px; padding: 0 8px; border: 1px solid var(--crm-line-2); color: var(--crm-dim); font: 400 12px/22px var(--crm-mono); font-variant-numeric: tabular-nums; }
.crm-ficha-modal-tique strong { display: inline-block; color: var(--crm-text); font-weight: 500; animation: crm-marcador-cae var(--crm-t-capa) var(--crm-snap, ease-out) both; transform-origin: 50% 0; }
@media (prefers-reduced-motion: reduce) { .crm-ficha-modal-tique strong { animation: none; } }
.crm-ficha-modal-mandos { display: inline-flex; gap: 4px; margin-left: auto; }
.crm-ficha-modal-quien { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.crm-ficha-modal-nombre { display: grid; gap: 4px; min-width: 0; }
.crm-modal-titulo.crm-ficha-modal-titulo { overflow: visible; font: 500 24px/28px var(--crm-sans); letter-spacing: -.01em; white-space: normal; overflow-wrap: anywhere; }
.crm-ficha-modal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; color: var(--crm-text-2); font: 400 13px/20px var(--crm-sans); }
.crm-ficha-modal-accion { flex: none; }
.crm-modal-cuerpo.crm-ficha-modal-cuerpo { padding: 20px; container: crm-ficha-modal / inline-size; }
.crm-ficha-modal-columnas { display: grid; gap: 20px; align-items: start; }
.crm-ficha-modal-principal, .crm-ficha-modal-hechos { display: grid; gap: 16px; align-content: start; min-width: 0; }
@container crm-ficha-modal (min-width: 840px) {
  .crm-ficha-modal-columnas[data-con-hechos] { grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr); gap: 32px; }
  .crm-ficha-modal-hechos { padding-left: 24px; border-left: 1px solid var(--crm-line); }
}
@media (max-width: 600px) {
  .crm-modal.crm-ficha-modal:not([data-completa]) { inset: 0; width: 100%; height: 100%; max-height: none; border: 0; translate: none; }
  .crm-ficha-modal-cab { padding: 8px 16px 12px; }
  .crm-ficha-modal-pos .crm-tecla, .crm-ficha-modal-mandos .crm-tecla { display: none; }
  .crm-ficha-modal-mandos > :first-child { display: none; }
  .crm-ficha-modal-barra { flex-wrap: wrap; }
  .crm-ficha-modal-accion { width: 100%; }
  .crm-modal-cuerpo.crm-ficha-modal-cuerpo { padding: 16px; }
}

/* ══ Ficha del producto: la etiqueta colgada de la máquina ═════════════ */
.crm-producto { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; margin: 0; padding: 16px; border: 1px solid var(--crm-line-2); background: var(--crm-panel); }
.crm-producto-ojal { position: absolute; top: -7px; left: 72px; width: 12px; height: 12px; border: 1px solid var(--crm-line-2); border-radius: 50%; background: var(--crm-bg); }
.crm-producto-ojal::before { content: ""; position: absolute; bottom: 10px; left: 5px; width: 1px; height: 12px; background: var(--crm-line-2); }
.crm-producto-foto { display: grid; place-items: center; width: 112px; height: 84px; overflow: hidden; border: 1px solid var(--crm-line); background: var(--crm-panel-2); }
.crm-producto-foto img { width: 100%; height: 100%; object-fit: contain; }
.crm-producto-datos { display: grid; align-content: start; gap: 2px; min-width: 0; }
.crm-producto-procedencia { color: var(--crm-dim); font: 500 11px/16px var(--crm-mono); letter-spacing: .06em; text-transform: uppercase; }
.crm-producto-nombre { color: var(--crm-text); font: 500 16px/24px var(--crm-sans); overflow-wrap: anywhere; }
.crm-producto-categoria { color: var(--crm-text-2); font: 400 13px/20px var(--crm-sans); }
.crm-producto-pie { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-top: 4px; }
.crm-producto-precio { color: var(--crm-text); font: 500 13px/20px var(--crm-mono); font-variant-numeric: tabular-nums; }

/* ══ Tique de atribución: el comprobante del clic ════════════════════ */
.crm-tique-atrib {
  --crm-tique-perfo: radial-gradient(circle 4px at 50% 50%, var(--crm-bg) 3.5px, transparent 4px) 0 0 / 14px 8px repeat-x;
  position: relative;
  display: grid;
  gap: 14px;
  padding: 24px 24px 28px;
  border-inline: 1px solid var(--crm-line-2);
  background: var(--crm-panel);
}
/* Perforado arriba y abajo: el comprobante arrancado del rollo. */
.crm-tique-atrib::before, .crm-tique-atrib::after { content: ""; position: absolute; left: -1px; right: -1px; height: 8px; background: var(--crm-tique-perfo); }
.crm-tique-atrib::before { top: -4px; }
.crm-tique-atrib::after { bottom: -4px; }
.crm-tique-atrib-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px dashed var(--crm-line-2); }
.crm-tique-atrib-rotulo { color: var(--crm-dim); font: 500 12px/16px var(--crm-mono); letter-spacing: .08em; text-transform: uppercase; }
.crm-tique-atrib-canal { display: inline-flex; align-items: center; gap: 10px; color: var(--crm-text); font: 500 16px/24px var(--crm-sans); }
.crm-tique-atrib-moneda { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1px dotted var(--crm-text-2); border-radius: 50%; box-shadow: inset 0 0 0 2px var(--crm-panel), inset 0 0 0 3px var(--crm-line-2); color: var(--crm-text); font: 500 12px/1 var(--crm-mono); }
.crm-tique-atrib-hora { display: flex; align-items: baseline; gap: 12px; }
.crm-tique-atrib-hora strong { color: var(--crm-text); font: 500 40px/44px var(--crm-mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.crm-tique-atrib-hora span { color: var(--crm-text-2); font: 400 15px/20px var(--crm-sans); }
.crm-tique-atrib-lineas { display: grid; gap: 8px; margin: 0; }
.crm-tique-atrib-lineas > div { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.crm-tique-atrib-lineas dt { flex: none; color: var(--crm-text-2); font: 400 15px/24px var(--crm-sans); }
.crm-tique-atrib-lineas > div::after { content: ""; order: 1; flex: 1; min-width: 16px; border-bottom: 1px dotted var(--crm-line-2); translate: 0 -6px; }
.crm-tique-atrib-lineas dd { order: 2; display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 72%; margin: 0; overflow: hidden; color: var(--crm-text); font: 500 15px/24px var(--crm-sans); text-overflow: ellipsis; white-space: nowrap; }
.crm-tique-atrib-lineas dd[data-mono] { font: 400 14px/24px var(--crm-mono); }
.crm-tique-atrib-icono { display: inline-flex; color: var(--crm-text-2); }
.crm-tique-atrib-icono svg { width: 16px; height: 16px; }
.crm-tique-atrib-ok { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding-top: 14px; border-top: 1px dashed var(--crm-line-2); color: var(--crm-text); font: 500 15px/20px var(--crm-sans); }
.crm-tique-atrib-ok svg { width: 20px; height: 20px; fill: none; stroke: var(--crm-acento); stroke-width: 1.5; }
.crm-tique-atrib-vacio { margin: 0; color: var(--crm-dim); font: 400 15px/24px var(--crm-sans); }

/* ══ Franja horaria: la regla de 8 a 20 ════════════════════════════════ */
.crm-franja { display: grid; gap: 6px; }
.crm-franja-texto { display: flex; align-items: baseline; gap: 8px; color: var(--crm-text-2); font: 400 13px/20px var(--crm-sans); }
.crm-franja-texto strong { color: var(--crm-text); font: 500 13px/20px var(--crm-mono); font-variant-numeric: tabular-nums; }
.crm-franja-texto em { color: var(--crm-acento); font: 500 11px/16px var(--crm-mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
.crm-franja-regla { position: relative; height: 16px; border-bottom: 1px solid var(--crm-line-2); }
.crm-franja-hora { position: absolute; bottom: 0; width: 1px; height: 4px; background: var(--crm-line-2); }
.crm-franja-hora[data-par] { height: 8px; }
.crm-franja-banda { position: absolute; bottom: 0; height: 8px; background: var(--crm-text-2); opacity: .35; }
.crm-franja[data-dentro] .crm-franja-banda { background: var(--crm-acento); opacity: 1; }
.crm-franja-aguja { position: absolute; bottom: -2px; width: 2px; height: 16px; margin-left: -1px; background: var(--crm-text); }
.crm-franja-escala { display: flex; justify-content: space-between; color: var(--crm-dim); font: 400 10px/12px var(--crm-mono); }

/* ══ FichaModal · cabecera de impacto ═════════════════════════════════ */
.crm-ficha-modal-quien[data-con-plazo] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 24px; }
.crm-ficha-modal-plazo { display: grid; justify-items: center; gap: 4px; }
.crm-ficha-modal-plazo .crm-ini-reloj-esfera { width: 68px; height: 68px; }
.crm-modal-titulo.crm-ficha-modal-titulo { font: 500 40px/44px var(--crm-sans); letter-spacing: -.02em; }
.crm-ficha-modal-meta { gap: 6px 16px; font: 400 16px/24px var(--crm-sans); }
.crm-ficha-modal-cab { gap: 16px; padding: 14px 24px 20px; }
.crm-modal-cuerpo.crm-ficha-modal-cuerpo { padding: 24px; font-size: 16px; line-height: 24px; }
.crm-ficha-modal-columnas { align-items: stretch; }
.crm-ficha-modal-principal { display: flex; flex-direction: column; gap: 20px; }
/* Sin huecos muertos: la carta crece y se centra si la columna tiene poco. */
.crm-ficha-modal-hechos { gap: 20px; }

/* Acción grande: 48 de alto, el teléfono en mono agrupado. */
.crm-contacto-canal[data-grande] .crm-contacto-canal-numero { font: 500 16px/24px var(--crm-mono); letter-spacing: .02em; }
.crm-contacto-canal-punto { opacity: .5; }

/* Carta protagonista: 21 px, comillas tipográficas grandes. */
.crm-misiva[data-destacada] { padding: 32px 32px 28px 72px; }
.crm-misiva[data-destacada] .crm-misiva-cuerpo { gap: 14px; font: 400 20px/32px var(--crm-sans); letter-spacing: -.005em; }
.crm-misiva[data-destacada] .crm-misiva-cuerpo { position: relative; }
.crm-misiva[data-destacada] .crm-misiva-cuerpo::before {
  content: "“";
  position: absolute;
  top: -10px;
  left: -52px;
  color: var(--crm-line-2);
  font: 500 80px/1 var(--crm-sans);
}
.crm-misiva[data-destacada] .crm-misiva-adjunto { margin: -32px -32px 8px -72px; }
.crm-misiva[data-destacada] .crm-misiva-persona { font-size: 16px; }
.crm-misiva[data-destacada] .crm-misiva-empresa { font-size: 15px; }
@media (max-width: 600px) {
  .crm-ficha-modal-quien[data-con-plazo] { grid-template-columns: auto minmax(0, 1fr); }
  .crm-ficha-modal-quien[data-con-plazo] .crm-ficha-modal-accion { grid-column: 1 / -1; }
  .crm-ficha-modal-plazo .crm-ini-reloj-esfera { width: 48px; height: 48px; }
  .crm-modal-titulo.crm-ficha-modal-titulo { font-size: 28px; line-height: 32px; }
  .crm-misiva[data-destacada] { padding: 24px 20px 20px 52px; }
  .crm-misiva[data-destacada] .crm-misiva-cuerpo::before { left: -40px; font-size: 40px; }
  .crm-misiva[data-destacada] .crm-misiva-cuerpo { font-size: 16px; line-height: 24px; }
  .crm-misiva[data-destacada] .crm-misiva-adjunto { margin: -24px -20px 8px -52px; }
}

/* ══ Hoja de archivador: pasar de entrada con J/K ══════════════════════ */
.crm-ficha-modal-cab, .crm-modal-cuerpo.crm-ficha-modal-cuerpo { position: relative; }
.crm-modal-cuerpo.crm-ficha-modal-cuerpo { overflow-x: hidden; overscroll-behavior: contain; }
.crm-ficha-modal-cab { overflow: hidden; }
.crm-hoja[data-entra] { animation: crm-hoja-entra-abajo 220ms var(--crm-snap) both; }
.crm-hoja[data-entra="arriba"] { animation-name: crm-hoja-entra-arriba; }
.crm-hoja[data-rafaga] { animation-duration: 90ms; }
.crm-ficha-modal .crm-hoja-saliente { position: absolute; z-index: 1; margin: 0; pointer-events: none; animation: crm-hoja-sale-arriba 180ms var(--crm-snap) both; }
.crm-ficha-modal .crm-hoja-saliente[data-sentido="arriba"] { animation-name: crm-hoja-sale-abajo; }
@keyframes crm-hoja-entra-abajo { from { opacity: 0; transform: translateY(24px); } 30% { opacity: 0; } }
@keyframes crm-hoja-entra-arriba { from { opacity: 0; transform: translateY(-24px); } 30% { opacity: 0; } }
/* La que se va se apaga antes de llegar a la mitad: nunca se leen dos nombres a la vez. */
@keyframes crm-hoja-sale-arriba { 60% { opacity: 0; } to { opacity: 0; transform: translateY(-24px); } }
@keyframes crm-hoja-sale-abajo { 60% { opacity: 0; } to { opacity: 0; transform: translateY(24px); } }
@keyframes crm-hoja-funde { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .crm-hoja[data-entra], .crm-hoja[data-entra="arriba"] { animation: crm-hoja-funde 120ms linear both; }
  .crm-ficha-modal .crm-hoja-saliente { display: none; }
}

/* Odómetro del contador: cada cifra rueda en su casilla, en el sentido del paso. */
.crm-ficha-modal-tique .crm-odometro { display: inline-flex; color: var(--crm-text); font-weight: 500; animation: none; }
.crm-odometro-casilla { display: inline-block; height: 20px; overflow: hidden; line-height: 20px; }
.crm-odometro-tira { display: flex; flex-direction: column; }
.crm-odometro-tira[data-sentido="abajo"] { animation: crm-odo-sube 220ms var(--crm-snap) both; }
.crm-odometro-tira[data-sentido="arriba"] { animation: crm-odo-baja 220ms var(--crm-snap) both; }
@keyframes crm-odo-sube { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes crm-odo-baja { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .crm-odometro-tira[data-sentido="abajo"] { animation: none; transform: translateY(-50%); }
  .crm-odometro-tira[data-sentido="arriba"] { animation: none; }
}
.crm-ficha-modal-barra { position: relative; }

/* Archivador de clientes vivos: carpeta colgante y cronología por días. */

/* CarpetaColgante (marca/datos, 16-oct-2026). Solo tokens del tema. */

.crm-carpeta {
  --alto-lengueta: 26px;
  position: relative; display: flex; flex-direction: column; color: var(--crm-text); text-decoration: none;
  transition: transform var(--crm-t-gesto, 120ms) var(--crm-snap, ease-out);
}
.crm-carpeta:focus-visible { outline: none; }
.crm-carpeta:focus-visible .crm-carpeta-lomo, .crm-carpeta:focus-visible .crm-carpeta-lengueta { border-color: var(--crm-acento); }

/* Lengüeta escalonada: asoma por encima del lomo, en una de cuatro posiciones. */
.crm-carpeta-lengueta {
  position: relative; z-index: 1; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  height: var(--alto-lengueta); max-width: min(46%, 520px); margin-left: calc(var(--paso) * 17%); margin-bottom: -1px;
  padding: 0 14px 0 6px; border: 1px solid var(--crm-line); border-bottom-color: transparent; background: var(--crm-panel);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 100%, 0 100%);
}
.crm-carpeta-mono {
  flex: none; display: grid; place-items: center; min-width: 24px; height: 18px; padding: 0 3px;
  font: 500 10px/16px var(--crm-mono); letter-spacing: .06em; color: var(--crm-dim); border: 1px solid var(--crm-line);
}
.crm-carpeta-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 13px/20px var(--crm-sans); }
.crm-carpeta-nombre[data-sustituido] { font-style: italic; color: var(--crm-text-2, var(--crm-text)); }

/* El lomo: todo lo de dentro, junto, en una línea. */
.crm-carpeta-lomo {
  position: relative;
  display: flex; align-items: center; gap: 10px; min-width: 0; height: 36px; padding: 0 12px;
  border: 1px solid var(--crm-line); background: var(--crm-panel);
  font: 12px/16px var(--crm-mono); font-variant-numeric: tabular-nums; color: var(--crm-dim); white-space: nowrap;
}
.crm-carpeta-lomo > * { flex: none; }
.crm-carpeta-nota { flex: 1 1 auto !important; min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 12px/16px var(--crm-sans); color: var(--crm-dim); }
.crm-carpeta-punto { color: var(--crm-line-2, var(--crm-line)); }
.crm-carpeta-quien {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--crm-line);
  font: 500 9px/14px var(--crm-mono); color: var(--crm-text-2, var(--crm-text));
}

/* Al tirar de ella. */
.crm-carpeta:hover, .crm-carpeta[data-activa] { transform: translateY(-2px); }
.crm-carpeta:hover .crm-carpeta-lengueta, .crm-carpeta[data-activa] .crm-carpeta-lengueta,
.crm-carpeta:hover .crm-carpeta-lomo, .crm-carpeta[data-activa] .crm-carpeta-lomo { background: var(--crm-panel-2, var(--crm-panel)); border-color: var(--crm-line-2, var(--crm-line)); }
.crm-carpeta[data-activa] .crm-carpeta-lomo::before { content: ""; position: absolute; left: -9px; bottom: 10px; width: 2px; height: 16px; background: var(--crm-acento); }

/* Viva: filo de luz en la lengüeta. */
.crm-carpeta[data-estado="viva"] .crm-carpeta-lengueta::before {
  content: ""; position: absolute; left: 0; right: 8px; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--crm-acento) 20%, var(--crm-acento) 70%, transparent);
  box-shadow: 0 0 8px var(--crm-acento-suave);
}
.crm-carpeta[data-estado="viva"] .crm-carpeta-mono { color: var(--crm-text); border-color: var(--crm-acento-linea, var(--crm-acento)); }

/* Dormida: plana y desvaída. */
.crm-carpeta[data-estado="dormida"] .crm-carpeta-lengueta,
.crm-carpeta[data-estado="dormida"] .crm-carpeta-lomo { background: transparent; border-style: dashed; }
.crm-carpeta[data-estado="dormida"] .crm-carpeta-nombre { color: var(--crm-dim); font-weight: 400; }
.crm-carpeta[data-estado="dormida"]:not(:hover):not([data-activa]) { opacity: .72; }

.crm-carpeta[data-leyendo] .crm-carpeta-nota { background: linear-gradient(90deg, var(--crm-esqueleto-a, var(--crm-line)), transparent) 0 50% / 30% 6px no-repeat; }

@media (max-width: 720px) {
  .crm-carpeta-lengueta { max-width: 80%; margin-left: calc(var(--paso) * 6%); }
  .crm-carpeta-lomo { height: auto; min-height: 36px; padding: 6px 10px; flex-wrap: wrap; row-gap: 4px; white-space: normal; }
  .crm-carpeta-nota { flex-basis: 100% !important; white-space: nowrap; }
  .crm-carpeta-punto { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .crm-carpeta, .crm-carpeta:hover, .crm-carpeta[data-activa] { transform: none; transition: none; }
}

/* CronologiaDias (marca/datos, 16-oct-2026). Solo tokens del tema.
   Firma: cada día es un fechador de oficina clavado en el carril. */

.crm-cronodias { position: relative; }
.crm-cronodias-dias { position: relative; list-style: none; margin: 0; padding: 0; }
.crm-cronodias-dias::before { content: ""; position: absolute; left: 27px; top: 8px; bottom: 8px; width: 1px; background: var(--crm-line); }

.crm-cronodias-dia { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 14px; padding: 10px 0; }
.crm-cronodias-dia + .crm-cronodias-dia { margin-top: 18px; }

/* Cota: los días que pasaron, sobre el carril, solo si hubo alguno. */
.crm-cronodias-cota {
  position: absolute; left: 28px; top: -16px; transform: translateX(-50%); padding: 0 4px; background: var(--crm-panel);
  font: 500 10px/14px var(--crm-mono); font-variant-numeric: tabular-nums; color: var(--crm-dim); white-space: nowrap;
}

/* El fechador: número grande, mes debajo, doble filete como el de caucho. */
.crm-cronodias-fechador {
  position: relative; z-index: 1; align-self: start; display: flex; flex-direction: column; align-items: center;
  width: 56px; padding: 4px 0 3px; background: var(--crm-panel); border: 1px solid var(--crm-line);
  outline: 1px solid var(--crm-line); outline-offset: 2px; color: var(--crm-text-2, var(--crm-text));
}
.crm-cronodias-fechador-dia { font: 500 18px/22px var(--crm-mono); font-variant-numeric: tabular-nums; }
.crm-cronodias-fechador-mes { font: 500 9px/12px var(--crm-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--crm-dim); }
.crm-cronodias-dia[data-hoy] .crm-cronodias-fechador { color: var(--crm-acento); border-color: var(--crm-acento-linea, var(--crm-acento)); outline-color: var(--crm-acento-suave); }
.crm-cronodias-dia[data-hoy] .crm-cronodias-fechador-mes { color: var(--crm-acento); }

.crm-cronodias-hechos { list-style: none; margin: 0; padding: 2px 0 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.crm-cronodias-hecho { display: grid; grid-template-columns: 40px 18px minmax(0, 1fr); align-items: baseline; gap: 8px; }
.crm-cronodias-hora { font: 12px/20px var(--crm-mono); font-variant-numeric: tabular-nums; color: var(--crm-dim); }
.crm-cronodias-tipo { display: inline-grid; place-items: center; width: 18px; height: 18px; color: var(--crm-dim); transform: translateY(3px); }
.crm-cronodias-hecho[data-tipo="llamada"] .crm-cronodias-tipo, .crm-cronodias-hecho[data-tipo="whatsapp"] .crm-cronodias-tipo { color: var(--crm-text); }
.crm-cronodias-hecho[data-tipo="documento"] .crm-cronodias-tipo { color: var(--crm-acento); }
.crm-cronodias-texto { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.crm-cronodias-titulo { font: 500 14px/20px var(--crm-sans); color: var(--crm-text); }
.crm-cronodias-quien { font: 12px/20px var(--crm-sans); color: var(--crm-dim); }
.crm-cronodias-cita {
  flex-basis: 100%; margin-top: 2px; padding-left: 10px; border-left: 2px solid var(--crm-line);
  font: 13px/20px var(--crm-sans); color: var(--crm-text-2, var(--crm-text)); quotes: "«" "»";
}

.crm-cronodias-anteriores {
  display: block; width: 100%; height: 28px; margin-top: 16px; border: 1px dashed var(--crm-line); background: transparent;
  color: var(--crm-dim); font: 500 11px/16px var(--crm-mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
}
.crm-cronodias-anteriores:hover { color: var(--crm-text); border-color: var(--crm-line-2, var(--crm-line)); }
.crm-cronodias-anteriores:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: 2px; }
.crm-cronodias-vacio { padding: 8px 0; font: 13px/20px var(--crm-sans); color: var(--crm-dim); }

@media (max-width: 560px) {
  .crm-cronodias-dias::before { left: 21px; }
  .crm-cronodias-dia { grid-template-columns: 44px minmax(0, 1fr); gap: 0 10px; }
  .crm-cronodias-fechador { width: 44px; }
  .crm-cronodias-cota { left: 22px; }
  .crm-cronodias-hecho { grid-template-columns: 36px minmax(0, 1fr); }
  .crm-cronodias-tipo { display: none; }
}

/* Carpeta (marca/datos, 16-oct-2026): la carpeta de un cliente con su lengüeta, los papeles
   dentro y la tapa delante. Solo tokens del tema y del movimiento. Pieza original. */

.crm-legajo {
  --legajo-hoja: color-mix(in oklab, var(--crm-panel) 82%, var(--crm-text) 6%);
  --legajo-alto-tapa: 160px;
  position: relative; display: flex; flex-direction: column; min-width: 0; perspective: 900px; isolation: isolate;
  color: var(--crm-text); text-decoration: none; outline: none;
}

/* Lengüeta: el nombre de la empresa, grande y entero (hasta dos líneas). */
.crm-legajo-pestana {
  position: relative; z-index: 1; align-self: flex-start; display: inline-flex; align-items: flex-start; gap: 8px;
  max-width: 100%; min-height: 30px; margin-bottom: -1px; padding: 6px 24px 5px 7px;
  background: var(--crm-panel-2, var(--crm-panel)); border: 1px solid var(--crm-line); border-bottom: 0;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 100%, 0 100%);
}
.crm-legajo-mono {
  flex: none; display: grid; place-items: center; min-width: 22px; height: 18px; margin-top: 1px; padding: 0 3px;
  font: 500 9px/14px var(--crm-mono); letter-spacing: .06em; color: var(--crm-dim); border: 1px solid var(--crm-line);
}
.crm-legajo-nombre {
  min-width: 0; font: 600 15px/19px var(--crm-sans); letter-spacing: -.005em; color: var(--crm-text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.crm-legajo-nombre[data-sustituido] { font-style: italic; font-weight: 500; color: var(--crm-text-2, var(--crm-text)); }

/* El cuerpo: cartón trasero, papeles y tapa. Con papeles, deja su franja para que asomen. */
.crm-legajo-cuerpo { position: relative; display: block; height: calc(var(--legajo-alto-tapa) + 10px); }
.crm-legajo[data-hojas="1"] .crm-legajo-cuerpo, .crm-legajo[data-hojas="2"] .crm-legajo-cuerpo { height: calc(var(--legajo-alto-tapa) + 40px); }
.crm-legajo-trasera { position: absolute; inset: 0; background: var(--crm-panel-2, var(--crm-panel)); border: 1px solid var(--crm-line); }

/* Los papeles: dos como mucho, lado a lado, sin pisarse. En reposo solo el canto; al pasar,
   suben y se lee su tipo y su título enteros. */
.crm-legajo-hojas { position: absolute; z-index: 2; left: 12px; right: 12px; top: 8px; height: 110px; pointer-events: none; }
.crm-legajo-hoja {
  --y: 26px; --r: 0deg;
  position: absolute; top: 0; display: flex; flex-direction: column; gap: 1px; width: calc(50% - 4px); height: 100px; padding: 6px 9px;
  background: var(--legajo-hoja); border: 1px solid var(--crm-line);
  transform: translateY(var(--y)) rotate(var(--r)); transform-origin: 50% 100%;
  transition: transform var(--crm-t-panel) var(--crm-snap); transition-delay: calc(var(--i, 0) * var(--crm-t-escalon));
}
.crm-legajo-hoja[data-i="0"] { --i: 1; left: 0; --r: -.6deg; }
.crm-legajo-hoja[data-i="1"] { --i: 0; right: 0; --r: .6deg; }
.crm-legajo-hoja > :not(.crm-legajo-hoja-renglones) { opacity: 0; transition: opacity var(--crm-t-color); }
.crm-legajo-hoja-tipo { font: 500 9px/12px var(--crm-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--crm-dim); }
.crm-legajo-hoja-titulo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 12px/16px var(--crm-sans); color: var(--crm-text); }
.crm-legajo-hoja-renglones {
  flex: 1; margin-top: 4px; opacity: .55;
  background: repeating-linear-gradient(to bottom, transparent 0 7px, var(--crm-line) 7px 8px);
  mask-image: linear-gradient(to right, black 70%, transparent);
}
/* El presupuesto lleva su esquina de acento: la única tinta verde del papel. */
.crm-legajo-hoja[data-tipo="presupuesto"]::after, .crm-legajo-hoja[data-tipo="proforma"]::after {
  content: ""; position: absolute; top: -1px; left: -1px; width: 14px; height: 2px; background: var(--crm-acento);
}
.crm-legajo:hover .crm-legajo-hoja, .crm-legajo:focus-visible .crm-legajo-hoja, .crm-legajo[data-activa] .crm-legajo-hoja { --y: -4px; }
.crm-legajo:hover .crm-legajo-hoja > *, .crm-legajo:focus-visible .crm-legajo-hoja > *, .crm-legajo[data-activa] .crm-legajo-hoja > * { opacity: 1; }
.crm-legajo:hover .crm-legajo-hoja-renglones, .crm-legajo:focus-visible .crm-legajo-hoja-renglones, .crm-legajo[data-activa] .crm-legajo-hoja-renglones { opacity: .55; }
.crm-legajo[data-abriendo] .crm-legajo-hoja { --y: -36px !important; }

/* La tapa: se inclina al pasar y cae al abrir. */
.crm-legajo-tapa {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: var(--legajo-alto-tapa);
  display: flex; flex-direction: column; gap: 6px; padding: 11px 14px 10px; min-width: 0;
  background: var(--crm-panel); border: 1px solid var(--crm-line); box-shadow: inset 0 1px 0 var(--crm-line-2, var(--crm-line));
  transform-origin: 50% 100%; transform: rotateX(0deg);
  transition: transform var(--crm-t-panel) var(--crm-snap), border-color var(--crm-t-color);
}
.crm-legajo:hover .crm-legajo-tapa, .crm-legajo:focus-visible .crm-legajo-tapa, .crm-legajo[data-activa] .crm-legajo-tapa { transform: rotateX(-8deg); }
.crm-legajo[data-activa] .crm-legajo-tapa { border-color: var(--crm-line-2, var(--crm-line)); }
.crm-legajo:focus-visible .crm-legajo-tapa { border-color: var(--crm-acento); }
.crm-legajo[data-abriendo] .crm-legajo-tapa { transform: rotateX(-68deg); transition-duration: var(--crm-t-capa); }

.crm-legajo-fila { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-width: 0; }
.crm-legajo-contacto { display: flex; flex-direction: column; min-width: 0; }
.crm-legajo-contacto-nombre { font: 500 13px/18px var(--crm-sans); color: var(--crm-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-legajo-contacto-cargo { font: 12px/16px var(--crm-sans); color: var(--crm-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-legajo-pulso { flex: none; display: inline-flex; align-items: center; gap: 7px; font: 12px/18px var(--crm-mono); font-variant-numeric: tabular-nums; color: var(--crm-dim); white-space: nowrap; }
.crm-legajo-latido { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--crm-linea-apagada, var(--crm-line)); flex: none; }
.crm-legajo-pulso[data-hoy] { color: var(--crm-text); }
.crm-legajo-pulso[data-hoy] .crm-legajo-latido { background: var(--crm-acento); box-shadow: 0 0 0 3px var(--crm-acento-suave); }
.crm-legajo-pulso[data-hoy] .crm-legajo-latido::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--crm-acento); animation: crm-latido var(--crm-t-latido) ease-out infinite; }

.crm-legajo-dinero { display: flex; align-items: center; gap: 10px; min-height: 28px; }
.crm-legajo-dinero b { font: 500 20px/24px var(--crm-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--crm-text); }
.crm-legajo-pide { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.crm-legajo-pide > :first-child:not(.crm-legajo-pide-texto) { flex: none; }
.crm-legajo-pide-texto { min-width: 0; font: 13px/18px var(--crm-sans); color: var(--crm-text-2, var(--crm-text)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.crm-legajo-proxima { display: flex; align-items: center; gap: 6px; min-width: 0; font: 12px/16px var(--crm-mono); color: var(--crm-text-2, var(--crm-text)); }
.crm-legajo-proxima > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-legajo-proxima[data-vencida] { color: var(--crm-error); }
.crm-legajo-reloj { width: 16px; height: 16px; flex: none; }
.crm-legajo-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; min-width: 0; padding-top: 6px; border-top: 1px dashed var(--crm-line); }
.crm-legajo-quien { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font: 12px/16px var(--crm-sans); color: var(--crm-text-2, var(--crm-text)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-legajo-avatar { display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--crm-line); font: 500 8px/12px var(--crm-mono); }
.crm-legajo-nadie { font: 500 11px/16px var(--crm-mono); letter-spacing: .02em; color: var(--crm-aviso); white-space: nowrap; }
.crm-legajo-recuento { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 11px/16px var(--crm-mono); font-variant-numeric: tabular-nums; color: var(--crm-dim); }

/* Viva: filo de luz en la lengüeta. */
.crm-legajo[data-estado="viva"] .crm-legajo-pestana::before {
  content: ""; position: absolute; left: 0; right: 16px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--crm-acento) 18%, var(--crm-acento) 72%, transparent);
}
.crm-legajo[data-estado="viva"] .crm-legajo-mono { color: var(--crm-text); border-color: var(--crm-acento-linea, var(--crm-acento)); }

/* Dormida: cartón apagado, cantos discontinuos. */
.crm-legajo[data-estado="dormida"] .crm-legajo-trasera,
.crm-legajo[data-estado="dormida"] .crm-legajo-pestana,
.crm-legajo[data-estado="dormida"] .crm-legajo-tapa { border-style: dashed; background: var(--crm-bg); box-shadow: none; }
.crm-legajo[data-estado="dormida"] .crm-legajo-nombre { color: var(--crm-dim); font-weight: 500; }
.crm-legajo[data-estado="dormida"]:not(:hover):not(:focus-visible):not([data-activa]) { opacity: .74; }

.crm-legajo[data-leyendo] .crm-legajo-tapa::after {
  content: ""; position: absolute; left: 14px; right: 40%; top: 50px; height: 8px;
  background: linear-gradient(90deg, var(--crm-esqueleto-a, var(--crm-line)), transparent);
}

@media (prefers-reduced-motion: reduce) {
  .crm-legajo-hoja, .crm-legajo-tapa { transition: none; }
  .crm-legajo:hover .crm-legajo-tapa, .crm-legajo:focus-visible .crm-legajo-tapa, .crm-legajo[data-activa] .crm-legajo-tapa,
  .crm-legajo[data-abriendo] .crm-legajo-tapa { transform: none; }
  .crm-legajo-pulso[data-hoy] .crm-legajo-latido::after { animation: none; }
}

/* CronologiaAmplia y TicketPresupuesto (marca/datos, 16-oct-2026). Solo tokens del tema.
   Firma: la hoja de taco de 64 px clavada en el carril; la de hoy, con la banda del acento. */

.crm-cronamp { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; height: 100%; min-height: 0; }
.crm-cronamp-carril { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 8px 32px 0; scrollbar-width: thin;
  mask-image: linear-gradient(to bottom, black calc(100% - 32px), transparent); }

.crm-cronamp-dias { position: relative; list-style: none; margin: 0; padding: 0; }
.crm-cronamp-dias::before { content: ""; position: absolute; left: 31px; top: 12px; bottom: 12px; width: 1px; background: var(--crm-line); }
.crm-cronamp-dia { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0 24px; padding: 8px 0 18px; }

/* Salto: los días largos sin nada, como un corte del carril. */
.crm-cronamp-salto { grid-column: 1 / -1; position: relative; display: flex; align-items: center; height: 36px; margin: -4px 0 8px; }
.crm-cronamp-salto::before { content: ""; position: absolute; left: 22px; width: 20px; top: 8px; bottom: 8px;
  background: repeating-linear-gradient(to bottom, var(--crm-panel) 0 3px, transparent 3px 6px); }
.crm-cronamp-salto > span { position: relative; z-index: 1; margin-left: 4px; padding: 1px 6px; background: var(--crm-panel); border: 1px dashed var(--crm-line);
  font: 500 11px/16px var(--crm-mono); color: var(--crm-dim); font-variant-numeric: tabular-nums; }

/* La hoja de taco. */
.crm-cronamp-taco {
  position: relative; z-index: 1; align-self: start; display: flex; flex-direction: column; align-items: center;
  width: 64px; padding-bottom: 6px; background: var(--crm-panel); border: 1px solid var(--crm-line-2, var(--crm-line));
}
.crm-cronamp-taco::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: -4px; height: 3px; border: 1px solid var(--crm-line); border-top: 0; background: var(--crm-panel); }
.crm-cronamp-taco-mes { width: 100%; padding: 2px 0; text-align: center; background: var(--crm-panel-2, var(--crm-bg)); border-bottom: 1px solid var(--crm-line);
  font: 500 10px/14px var(--crm-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--crm-dim); }
.crm-cronamp-taco-dia { margin-top: 2px; font: 500 28px/32px var(--crm-mono); font-variant-numeric: tabular-nums; color: var(--crm-text); }
.crm-cronamp-taco-sem { font: 500 10px/12px var(--crm-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--crm-dim); }
.crm-cronamp-dia[data-hoy] .crm-cronamp-taco { border-color: var(--crm-acento-linea, var(--crm-acento)); }
.crm-cronamp-dia[data-hoy] .crm-cronamp-taco-mes { background: var(--crm-acento); color: var(--crm-sobre-acento, var(--crm-bg)); border-color: var(--crm-acento); }

/* Los hechos. */
.crm-cronamp-hechos { list-style: none; margin: 0; padding: 4px 0 0; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.crm-cronamp-hecho { display: grid; grid-template-columns: 48px 30px minmax(0, 1fr); gap: 12px; align-items: start; }
.crm-cronamp-hora { padding-top: 4px; font: 13px/20px var(--crm-mono); font-variant-numeric: tabular-nums; color: var(--crm-dim); }
.crm-cronamp-icono { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--crm-line); background: var(--crm-panel); color: var(--crm-text-2, var(--crm-text)); }
.crm-cronamp-hecho[data-tipo="documento"] .crm-cronamp-icono { color: var(--crm-acento); border-color: var(--crm-acento-linea, var(--crm-acento)); }
.crm-cronamp-hecho[data-tipo="web"] .crm-cronamp-icono, .crm-cronamp-hecho[data-tipo="nota"] .crm-cronamp-icono { color: var(--crm-dim); }
.crm-cronamp-cuerpo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.crm-cronamp-linea { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
.crm-cronamp-titulo { font: 500 18px/28px var(--crm-sans); letter-spacing: -.005em; color: var(--crm-text); }
.crm-cronamp-veces { font: 500 12px/18px var(--crm-mono); padding: 0 6px; border: 1px solid var(--crm-line); color: var(--crm-text-2, var(--crm-text)); }
.crm-cronamp-cita { max-width: 72ch; padding-left: 12px; border-left: 2px solid var(--crm-line); font: 15px/24px var(--crm-sans); color: var(--crm-text-2, var(--crm-text)); quotes: "«" "»"; }

/* Chapa de persona. */
.crm-cronamp-chapa { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px 0 2px; border: 1px solid var(--crm-line); border-radius: 12px; background: var(--crm-bg); max-width: 220px; }
.crm-cronamp-chapa-ini { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--crm-panel-2, var(--crm-panel)); border: 1px solid var(--crm-line); font: 500 9px/12px var(--crm-mono); color: var(--crm-text); }
.crm-cronamp-chapa-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 12px/16px var(--crm-sans); color: var(--crm-text-2, var(--crm-text)); }
.crm-cronamp-nadie { font: 12px/16px var(--crm-mono); color: var(--crm-dim); }

/* Sello del resultado. */
.crm-cronamp-sello { align-self: flex-start; padding: 2px 8px; border: 2px double currentColor; transform: rotate(-1.5deg); font: 600 12px/18px var(--crm-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--crm-text-2, var(--crm-text)); }
.crm-cronamp-sello[data-tono="bien"] { color: var(--crm-acento); }
.crm-cronamp-sello[data-tono="mal"] { color: var(--crm-error); }

/* Antes → después. */
.crm-cronamp-cambio { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 15px/22px var(--crm-mono); font-variant-numeric: tabular-nums; color: var(--crm-dim); }
.crm-cronamp-cambio-que { font: 500 11px/16px var(--crm-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--crm-dim); }
.crm-cronamp-cambio del { color: var(--crm-dim); text-decoration-thickness: 1px; }
.crm-cronamp-cambio ins { text-decoration: none; color: var(--crm-text); font-weight: 500; }

/* El ticket del presupuesto: muescas a los lados, número en mono e importe grande. */
.crm-cronamp-ticket {
  --muesca: 7px;
  position: relative; align-self: flex-start; display: inline-grid; grid-auto-flow: column; align-items: baseline; gap: 14px;
  padding: 8px 18px; background: var(--crm-bg); border: 1px solid var(--crm-line-2, var(--crm-line));
  -webkit-mask: radial-gradient(circle var(--muesca) at 0 50%, transparent 98%, black) left / 51% 100% no-repeat, radial-gradient(circle var(--muesca) at 100% 50%, transparent 98%, black) right / 51% 100% no-repeat;
  mask: radial-gradient(circle var(--muesca) at 0 50%, transparent 98%, black) left / 51% 100% no-repeat, radial-gradient(circle var(--muesca) at 100% 50%, transparent 98%, black) right / 51% 100% no-repeat;
}
.crm-cronamp-ticket::before { content: ""; position: absolute; left: 0; top: -1px; width: 22px; height: 2px; background: var(--crm-acento); }
.crm-cronamp-ticket-rotulo { font: 500 10px/14px var(--crm-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--crm-dim); }
.crm-cronamp-ticket-num { font: 500 15px/20px var(--crm-mono); color: var(--crm-text); white-space: nowrap; }
.crm-cronamp-ticket-importe { font: 500 20px/24px var(--crm-mono); font-variant-numeric: tabular-nums; color: var(--crm-text); white-space: nowrap; }
.crm-cronamp-ticket-visto { position: absolute; top: 4px; right: 12px; display: grid; place-items: center; width: 16px; height: 16px; background: var(--crm-acento); color: var(--crm-sobre-acento, var(--crm-bg)); font: 600 11px/12px var(--crm-mono); }
.crm-cronamp-ticket[data-estado="aceptado"] { border-color: var(--crm-acento-linea, var(--crm-acento)); }
.crm-cronamp-ticket[data-estado="caducado"] { opacity: .6; }
.crm-cronamp-ticket[data-estado="borrador"] { border-style: dashed; }

/* El ticket suelto (listas de presupuestos): en columna, con su línea de corte. */
.crm-cronamp-ticket-suelto { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 14px 22px 12px; min-width: 0; }
.crm-cronamp-ticket-suelto .crm-cronamp-ticket-num { font-size: 20px; line-height: 24px; }
.crm-cronamp-ticket-que { font: 14px/20px var(--crm-sans); color: var(--crm-text-2, var(--crm-text)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-cronamp-ticket-corte { height: 0; margin: 4px -22px; border-top: 1px dashed var(--crm-line); }
.crm-cronamp-ticket-pie { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font: 12px/16px var(--crm-mono); color: var(--crm-dim); }
.crm-cronamp-ticket-suelto .crm-cronamp-ticket-importe { font-size: 24px; line-height: 28px; }

/* La lectura del cliente. */
.crm-cronamp-lectura { display: flex; flex-direction: column; gap: 20px; min-height: 0; overflow-y: auto; padding-left: 24px; border-left: 1px solid var(--crm-line); }
.crm-cronamp-cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; margin: 0; }
.crm-cronamp-cifra { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.crm-cronamp-cifra:last-child:nth-child(odd) { grid-column: 1 / -1; }
.crm-cronamp-cifra dt { font: 500 10px/14px var(--crm-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--crm-dim); }
.crm-cronamp-cifra dd { margin: 0; font: 500 26px/32px var(--crm-mono); font-variant-numeric: tabular-nums; color: var(--crm-text); overflow-wrap: anywhere; }
.crm-cronamp-cifra .crm-cronamp-cifra-detalle { font: 13px/18px var(--crm-sans); color: var(--crm-dim); }
.crm-cronamp-cifra[data-tono="aviso"] dd:first-of-type { color: var(--crm-aviso); }
.crm-cronamp-cifra[data-tono="error"] dd:first-of-type { color: var(--crm-error); }

.crm-cronamp-fichas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.crm-cronamp-ficha {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 44px; padding: 0 14px;
  border: 1px solid var(--crm-line); background: var(--crm-bg); color: var(--crm-text-2, var(--crm-text)); font: 14px/20px var(--crm-sans); cursor: pointer;
  transition: border-color var(--crm-t-color), background var(--crm-t-color);
}
.crm-cronamp-ficha b { font: 500 16px/20px var(--crm-mono); font-variant-numeric: tabular-nums; color: var(--crm-text); }
.crm-cronamp-ficha:hover:not(:disabled) { border-color: var(--crm-line-2, var(--crm-line)); }
.crm-cronamp-ficha[aria-checked="true"] { border-color: var(--crm-acento); background: var(--crm-acento-suave, var(--crm-bg)); color: var(--crm-text); }
.crm-cronamp-ficha:disabled { opacity: .45; cursor: default; }
.crm-cronamp-ficha:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: 2px; }
.crm-cronamp-pie { margin-top: auto; }
.crm-cronamp-vacio { padding: 24px 0; font: 15px/24px var(--crm-sans); color: var(--crm-dim); }

@media (max-width: 900px) {
  .crm-cronamp { grid-template-columns: minmax(0, 1fr); height: auto; }
  .crm-cronamp-lectura { order: -1; padding-left: 0; border-left: 0; }
  .crm-cronamp-carril { overflow: visible; mask-image: none; }
  .crm-cronamp-dia { grid-template-columns: 52px minmax(0, 1fr); gap: 0 14px; }
  .crm-cronamp-taco { width: 52px; }
  .crm-cronamp-dias::before { left: 25px; }
  .crm-cronamp-hecho { grid-template-columns: 40px minmax(0, 1fr); }
  .crm-cronamp-icono { display: none; }
  .crm-cronamp-titulo { font-size: 16px; line-height: 24px; }
}

/* ── SobrePresupuesto · el presupuesto que ya salió, en su sobre (16-10-2026) ── */
/* Solo tokens --crm-*. La hoja se hunde con la subida; el sobre se cierra y cae el sello. */

.crm-sobre {
  container: crm-sobre / inline-size;
  display: grid;
  grid-template-columns: minmax(240px, 300px) 1fr;
  grid-template-areas:
    "escena datos"
    "escena vuelta"
    "aviso aviso"
    "pie pie"
    "falta falta";
  column-gap: 24px;
  row-gap: 16px;
  align-items: start;
}
.crm-sobre-titulo,
.crm-sobre .crm-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.crm-sobre > .crm-aviso { grid-area: aviso; }
.crm-sobre-problema { grid-area: aviso; }

/* ══ La escena: fondo, hoja, frente y solapa ═══════════════════════════ */
.crm-sobre-escena {
  --crm-sobre-progreso: 0;
  --sobre-papel: var(--crm-panel);
  --sobre-filo: var(--crm-line-2);
  position: relative;
  grid-area: escena;
  aspect-ratio: 5 / 4;
  margin-top: 56px; /* aire para la hoja que asoma */
  isolation: isolate;
}
.crm-sobre-fondo,
.crm-sobre-frente,
.crm-sobre-solapa { position: absolute; inset: 0; }
.crm-sobre-fondo {
  z-index: 0;
  background: var(--crm-panel-2);
  border: 1px solid var(--sobre-filo);
}

/* La hoja: asoma por arriba; al subir se hunde al ritmo del progreso. */
.crm-sobre-hoja {
  position: absolute;
  z-index: 1;
  left: 9%;
  right: 9%;
  top: -48px;
  height: 92%;
  overflow: hidden;
  background: var(--crm-papel-sobre-blanco);
  border: 1px solid var(--sobre-filo);
  box-shadow: var(--crm-sombra);
  opacity: 0;
  transform: translateY(24px);
  transition: transform var(--crm-t-panel, 260ms) var(--crm-snap), opacity var(--crm-t-entrada) var(--crm-snap);
}
.crm-sobre[data-lleno] .crm-sobre-hoja {
  opacity: 1;
  transform: translateY(calc(var(--crm-sobre-progreso) * 48px));
}
.crm-sobre-miniatura { display: block; width: 100%; height: auto; }
.crm-sobre-lineas { display: grid; gap: 7px; padding: 14px 12px; }
.crm-sobre-lineas i { display: block; height: 4px; background: var(--crm-papel-sobre-1); }
.crm-sobre-lineas i:nth-child(1) { width: 46%; height: 6px; background: var(--crm-papel-sobre-2); }
.crm-sobre-lineas i:nth-child(3) { width: 82%; }
.crm-sobre-lineas i:nth-child(5) { width: 64%; }
.crm-sobre-lineas[data-leyendo] i { animation: crm-sobre-leer 1.2s var(--crm-curva) infinite alternate; }
@keyframes crm-sobre-leer { to { opacity: .45; } }
.crm-sobre-ensayo {
  position: absolute;
  top: 10px;
  right: -30px;
  width: 120px;
  padding: 2px 0;
  background: var(--crm-aviso);
  color: var(--crm-papel-sobre-tinta);
  font: 600 10px/14px var(--crm-mono);
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(35deg);
}

/* El frente: bolsillo del sobre con su V de pliegue, destinatario y matasellos. */
.crm-sobre-frente {
  z-index: 2;
  top: 30%;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr auto auto;
  align-content: start;
  gap: 6px 12px;
  padding: 14px 14px 12px;
  background:
    linear-gradient(to top right, transparent calc(50% - .5px), var(--sobre-filo) 50%, transparent calc(50% + .5px)) left top / 50% 46% no-repeat,
    linear-gradient(to top left, transparent calc(50% - .5px), var(--sobre-filo) 50%, transparent calc(50% + .5px)) right top / 50% 46% no-repeat,
    var(--sobre-papel);
  border: 1px solid var(--sobre-filo);
}
.crm-sobre-para { grid-column: 1 / -1; grid-row: 3; display: grid; gap: 2px; min-width: 0; }
.crm-sobre-matasellos { grid-column: 2; grid-row: 1; }
.crm-sobre-rotulo { font: 500 11px/14px var(--crm-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--crm-dim); }
.crm-sobre-empresa { overflow: hidden; color: var(--crm-text); font: 500 14px/18px var(--crm-sans); text-overflow: ellipsis; white-space: nowrap; }
.crm-sobre-contacto { overflow: hidden; color: var(--crm-text-2); font: 400 13px/18px var(--crm-sans); text-overflow: ellipsis; white-space: nowrap; }

.crm-sobre-matasellos {
  position: relative;
  display: block;
  width: 116px;
  height: 62px;
  color: var(--crm-text-2);
  opacity: .78;
  transform: rotate(-8deg);
}
.crm-sobre-matasellos svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.2; }
.crm-sobre-matasellos-texto {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-content: center;
  width: 53%;
  height: 100%;
  text-align: center;
  font-family: var(--crm-mono);
  font-variant-numeric: tabular-nums;
}
.crm-sobre-matasellos-texto small { font-size: 8px; line-height: 10px; letter-spacing: .12em; text-transform: uppercase; }
.crm-sobre-matasellos-texto b { font-size: 9px; line-height: 11px; font-weight: 500; white-space: nowrap; }

.crm-sobre-papel,
.crm-sobre-invita {
  grid-column: 1 / -1;
  grid-row: 4;
  align-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
}
.crm-sobre-nombre { flex: 1; min-width: 0; overflow: hidden; color: var(--crm-text); font: 400 12px/16px var(--crm-mono); text-overflow: ellipsis; white-space: nowrap; }
.crm-sobre-peso { flex: none; color: var(--crm-dim); font: 400 12px/16px var(--crm-mono); font-variant-numeric: tabular-nums; }
.crm-sobre-invita { justify-content: space-between; color: var(--crm-text-2); font: 400 13px/18px var(--crm-sans); }

/* Barra de subida: un filo en la boca del sobre. */
.crm-sobre-barra { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--crm-line); }
.crm-sobre-barra i {
  display: block;
  height: 100%;
  width: calc(var(--crm-sobre-progreso) * 100%);
  background: var(--crm-acento);
  transition: width var(--crm-t-entrada) linear;
}

/* La solapa: abierta detrás; al terminar baja y cierra. */
.crm-sobre-solapa {
  z-index: 0;
  bottom: auto;
  top: 30%;
  height: 26%;
  background: var(--crm-panel-3);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  transform: translateY(-100%) rotateX(180deg);
  transition: transform 520ms var(--crm-curva), z-index 0s 260ms;
}
.crm-sobre[data-fase="hecho"] .crm-sobre-solapa {
  z-index: 3;
  transform: translateY(0) rotateX(0deg);
  border-bottom: 0;
}
.crm-sobre[data-fase="hecho"] .crm-sobre-hoja { transform: translateY(56px); }

/* El sello cae torcido sobre el sobre cerrado. */
.crm-sobre-estampa {
  position: absolute;
  z-index: 4;
  right: 10%;
  top: 44%;
  transform: rotate(-7deg) scale(1);
  animation: crm-sobre-estampa 420ms var(--crm-snap) 380ms both;
}
.crm-sobre-estampa .crm-ini-sello { background: var(--sobre-papel); box-shadow: var(--crm-sombra); }
@keyframes crm-sobre-estampa {
  from { opacity: 0; transform: rotate(-16deg) scale(1.6); }
  60% { opacity: 1; transform: rotate(-6deg) scale(.94); }
  to { opacity: 1; transform: rotate(-7deg) scale(1); }
}

/* Arrastrando: la boca respira y el filo se enciende. */
.crm-sobre[data-encima] .crm-sobre-frente,
.crm-sobre[data-encima] .crm-sobre-fondo { border-color: var(--crm-acento); }
.crm-sobre[data-encima] .crm-sobre-escena { animation: crm-sobre-respira 1.1s var(--crm-curva) infinite alternate; }
@keyframes crm-sobre-respira { to { transform: scale(1.015); } }
.crm-sobre:not([data-lleno]) .crm-sobre-frente { border-style: dashed; }

/* ══ Datos: el total como un cheque ══════════════════════════════════════ */
.crm-sobre-datos {
  grid-area: datos;
  display: grid;
  grid-template-columns: minmax(160px, 1.3fr) minmax(140px, 1fr) minmax(110px, .9fr);
  gap: 12px;
  align-items: start;
}
.crm-sobre-cheque .crm-entrada { border-width: 0 0 1px; border-radius: 0; background: transparent; }
.crm-sobre-cheque .crm-entrada-control {
  font: 500 20px/28px var(--crm-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.crm-sobre-cheque .crm-entrada::after {
  content: "€";
  align-self: center;
  margin-left: 2px;
  color: var(--crm-text-2);
  font: 400 16px/20px var(--crm-mono);
}
.crm-sobre-mono .crm-entrada-control,
.crm-sobre-mono { font-family: var(--crm-mono); font-variant-numeric: tabular-nums; }

/* ══ Vuelta: fichas Mañana · 2 d · 3 d · 1 sem · Elegir ══════════════════ */
.crm-sobre-vuelta { grid-area: vuelta; display: grid; gap: 8px; }
.crm-sobre-fichas { display: flex; flex-wrap: wrap; gap: 6px; }
.crm-sobre-ficha {
  display: grid;
  gap: 1px;
  min-width: 72px;
  padding: 6px 10px;
  border: 1px solid var(--crm-line-2);
  background: var(--crm-panel);
  color: var(--crm-text);
  font: 500 13px/18px var(--crm-sans);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--crm-t-color), background-color var(--crm-t-color);
}
.crm-sobre-ficha small { color: var(--crm-dim); font: 400 11px/14px var(--crm-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (hover: hover) { .crm-sobre-ficha:hover:not(:disabled) { background: var(--crm-panel-2); } }
.crm-sobre-ficha[aria-checked="true"] { border-color: var(--crm-acento); background: var(--crm-acento-suave); }
.crm-sobre-ficha[aria-checked="true"] small { color: var(--crm-text-2); }
.crm-sobre-ficha:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; }
.crm-sobre-ficha:disabled { cursor: not-allowed; opacity: .6; }

/* ══ Pie ═════════════════════════════════════════════════════════════════ */
.crm-sobre-pie {
  grid-area: pie;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--crm-line);
}
.crm-sobre-resumen {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  min-width: 0;
  margin: 0;
  color: var(--crm-text-2);
  font: 400 12px/16px var(--crm-mono);
  font-variant-numeric: tabular-nums;
}
.crm-sobre-resumen b { color: var(--crm-text); font-weight: 500; }
.crm-sobre-falta { grid-area: falta; margin: -8px 0 0; color: var(--crm-text-2); font: 400 12px/16px var(--crm-sans); text-align: right; }

/* ══ Estrecho (390): todo en columna, el sobre arriba ═══════════════════ */
@container crm-sobre (max-width: 640px) {
  .crm-sobre { grid-template-columns: 1fr; grid-template-areas: "escena" "aviso" "datos" "vuelta" "pie" "falta"; }
  .crm-sobre-escena { width: min(100%, 320px); justify-self: center; }
  .crm-sobre-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crm-sobre-cheque { grid-column: 1 / -1; }
  .crm-sobre-pie { flex-wrap: wrap; }
  .crm-sobre-resumen { flex-basis: 100%; }
  .crm-sobre-pie .crm-boton:last-child { flex: 1; }
}

/* La raíz es el propio contenedor y su consulta no se aplica a sí misma: su columna única va por el ancho de la ventana. */
@media (max-width: 680px) {
  .crm-sobre { grid-template-columns: minmax(0, 1fr); grid-template-areas: "escena" "aviso" "datos" "vuelta" "pie" "falta"; }
}

/* Temas: el papel de la hoja es blanco siempre; el sobre sigue el tema. */
@media (prefers-reduced-motion: reduce) {
  .crm-sobre-hoja,
  .crm-sobre-solapa,
  .crm-sobre-barra i { transition: none; }
  .crm-sobre-estampa,
  .crm-sobre[data-encima] .crm-sobre-escena,
  .crm-sobre-lineas[data-leyendo] i { animation: none; }
}

/* Colores del objeto real (OFICIO §8): .crm-sobre es siempre el mismo objeto, en cualquier tema. */
.crm-sobre { --crm-papel-sobre-1: #e6e3dc; --crm-papel-sobre-2: #d4d0c7;  --crm-papel-sobre-blanco: #fff; --crm-papel-sobre-tinta: #1b1405; }

/* ── TicketEstimado · la etiqueta de tasación que cuelga de la máquina (16-10-2026) ── */
/* Solo tokens --crm-*. Rango, nunca un número mágico; la confianza en tres muescas. */

.crm-tasa {
  position: relative;
  padding-top: 14px;
  padding-left: 18px;
}

/* El cordel sale de arriba a la izquierda y entra en el ojal. */
.crm-ticket-cordel {
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 28px;
  pointer-events: none;
}
.crm-ticket-cordel svg { width: 100%; height: 100%; overflow: visible; }
.crm-ticket-cordel path { fill: none; stroke: var(--crm-dim); stroke-width: 1.25; stroke-linecap: round; }

.crm-ticket-carton {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 14px 18px 14px 34px;
  background: var(--crm-panel);
  border: 1px solid var(--crm-line-2);
  /* La esquina del ojal, recortada como una etiqueta de cartón. */
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px);
  transform-origin: 18px 14px;
  animation: crm-ticket-colgar 900ms var(--crm-snap) both;
}
.crm-ticket-carton::before {
  /* El filo de la esquina recortada. */
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, transparent 9.5px, var(--crm-line-2) 9.5px, var(--crm-line-2) 10.5px, transparent 10.5px);
  pointer-events: none;
}
@keyframes crm-ticket-colgar {
  0% { transform: rotate(-3.5deg); }
  45% { transform: rotate(1.6deg); }
  75% { transform: rotate(-0.6deg); }
  100% { transform: rotate(0deg); }
}

.crm-ticket-ojal {
  position: absolute;
  left: 12px;
  top: 12px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--crm-bg);
  box-shadow: 0 0 0 2px var(--crm-panel-2), 0 0 0 3px var(--crm-line-2);
}

.crm-ticket-cabeza { display: flex; align-items: baseline; gap: 10px; min-height: 16px; }
.crm-ticket-est-rotulo {
  font: 500 11px/1 var(--crm-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--crm-dim);
}
.crm-ticket-version { font: 400 11px/1 var(--crm-mono); color: var(--crm-muted); }
.crm-ticket-ensayo {
  margin-left: auto;
  padding: 2px 6px;
  font: 500 10px/1.2 var(--crm-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--crm-aviso);
  border: 1px solid var(--crm-aviso-linea);
  transform: rotate(-4deg);
}

.crm-ticket-est-cifra {
  margin: 0;
  font: 600 28px/1.05 var(--crm-sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
  color: var(--crm-text);
  white-space: nowrap;
}
.crm-ticket-guion { margin: 0 0.18em; color: var(--crm-dim); font-weight: 400; }
.crm-ticket-aprox { margin-right: 0.2em; color: var(--crm-dim); font-weight: 400; }
.crm-ticket-est-linea { margin: -4px 0 0; font: 400 13px/1.35 var(--crm-sans); color: var(--crm-text-2); }
.crm-ticket-sin { margin: 0; font: 600 20px/1.1 var(--crm-sans); color: var(--crm-text-2); }

/* La regla: 1 k € → 100 k € en escala logarítmica. Rayas arriba, rótulos en su propia línea. */
.crm-ticket-regla {
  position: relative;
  height: 12px;
  margin: 2px 0 0;
  border-bottom: 1px solid var(--crm-line-2);
}
.crm-ticket-rayas { position: absolute; inset: 0; }
.crm-ticket-rayas i {
  position: absolute;
  bottom: -1px;
  width: 1px;
  height: 5px;
  background: var(--crm-line-2);
}
.crm-ticket-rayas i[data-r="1k"] { left: 0; }
.crm-ticket-rayas i[data-r="3k"] { left: 23.86%; }
.crm-ticket-rayas i[data-r="10k"] { left: 50%; height: 8px; }
.crm-ticket-rayas i[data-r="30k"] { left: 73.86%; }
.crm-ticket-rayas i[data-r="100k"] { right: 0; }
.crm-ticket-escala {
  display: flex;
  justify-content: space-between;
  margin: 4px 0 2px;
  font: 400 10px/1 var(--crm-mono);
  color: var(--crm-muted);
}

.crm-ticket-tramo {
  position: absolute;
  bottom: 2px;
  height: 6px;
  background: var(--crm-text);
  transform-origin: left center;
  animation: crm-ticket-tramo var(--crm-t-dibujo, 520ms) var(--crm-snap) 200ms both;
}
.crm-tasa[data-confianza="media"] .crm-ticket-tramo { background: var(--crm-text-2); }
.crm-tasa[data-confianza="baja"] .crm-ticket-tramo {
  background: repeating-linear-gradient(90deg, var(--crm-text-2) 0 4px, transparent 4px 7px);
}
@keyframes crm-ticket-tramo { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* La cifra del comercial: una marca que cae sobre la regla. */
.crm-ticket-est-marca {
  position: absolute;
  bottom: -1px;
  width: 2px;
  height: 14px;
  margin-left: -1px;
  background: var(--crm-acento);
}
.crm-ticket-est-marca::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -4px;
  border: 5px solid transparent;
  border-top-color: var(--crm-acento);
}
.crm-ticket-est-marca[data-tono="fuera"] { background: var(--crm-aviso); }
.crm-ticket-est-marca[data-tono="fuera"]::before { border-top-color: var(--crm-aviso); }

.crm-ticket-est-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* Las muescas: tres cortes en el filo del cartón. */
.crm-ticket-muescas { display: inline-flex; align-items: center; gap: 8px; }
.crm-ticket-muescas-marcas { display: inline-flex; gap: 3px; }
.crm-ticket-muescas-marcas i {
  display: block;
  width: 5px;
  height: 11px;
  border: 1px solid var(--crm-line-2);
  background: transparent;
}
.crm-ticket-muescas-marcas i[data-llena] { background: var(--crm-text); border-color: var(--crm-text); }
.crm-ticket-muescas[data-confianza="alta"] .crm-ticket-muescas-marcas i[data-llena] { background: var(--crm-acento); border-color: var(--crm-acento); }
.crm-ticket-muescas[data-confianza="baja"] .crm-ticket-muescas-marcas i[data-llena] { background: var(--crm-aviso); border-color: var(--crm-aviso); }
.crm-ticket-muescas-texto { font: 500 11px/1 var(--crm-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--crm-text-2); }

.crm-ticket-porque-boton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  font: 500 12px/1 var(--crm-sans);
  color: var(--crm-text-2);
  background: transparent;
  border: 1px solid var(--crm-line-2);
  cursor: pointer;
  transition: color var(--crm-t-color) var(--crm-snap), border-color var(--crm-t-color) var(--crm-snap);
}
.crm-ticket-porque-boton:hover { color: var(--crm-text); border-color: var(--crm-dim); }
.crm-ticket-porque-boton:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; }
.crm-ticket-porque-boton span { font-family: var(--crm-mono); }

.crm-ticket-porque {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px dashed var(--crm-line-2);
}
.crm-ticket-porque ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.crm-ticket-porque li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font: 400 12.5px/1.4 var(--crm-sans);
  color: var(--crm-text-2);
}
.crm-ticket-motivos li { color: var(--crm-dim); }
.crm-ticket-motivos li::before { content: "·"; margin-right: 6px; color: var(--crm-muted); }
.crm-ticket-motivos li { justify-content: flex-start; }
.crm-ticket-n { flex: none; font: 500 11px/1 var(--crm-mono); color: var(--crm-dim); }
.crm-ticket-nota { margin: 0; font: 400 11.5px/1.4 var(--crm-sans); color: var(--crm-muted); }

/* El valor del comercial: rótulo arriba, valor debajo a todo el ancho, veredicto al lado del valor. */
.crm-ticket-comercial {
  display: grid;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--crm-line);
}
.crm-ticket-comercial-valor { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-width: 0; }
.crm-ticket-comercial-valor > * { min-width: 0; }
.crm-ticket-comercial-cifra { font: 600 16px/1.2 var(--crm-sans); font-variant-numeric: tabular-nums; color: var(--crm-text); }
.crm-ticket-comercial-vacio { font: 400 13px/1.35 var(--crm-sans); color: var(--crm-dim); }
.crm-ticket-veredicto { font: 500 11px/1 var(--crm-mono); letter-spacing: 0.04em; color: var(--crm-acento); }
.crm-ticket-veredicto[data-tono="fuera"] { color: var(--crm-aviso); }

/* ── El chip: la etiqueta en una fila ─────────────────────────────────── */
.crm-ticket-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 24px;
  padding: 0 8px 0 6px;
  font: 500 12px/1 var(--crm-sans);
  font-variant-numeric: tabular-nums;
  color: var(--crm-text);
  background: var(--crm-panel-2);
  border: 1px solid var(--crm-line-2);
  clip-path: polygon(6px 0, 100% 0, 100% 100%, 6px 100%, 0 50%);
  padding-left: 12px;
  white-space: nowrap;
}
.crm-ticket-chip[data-vacio] { color: var(--crm-muted); background: transparent; }
.crm-ticket-chip-ojal {
  width: 4px;
  height: 4px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--crm-bg);
  box-shadow: 0 0 0 1px var(--crm-line-2);
}
.crm-ticket-chip .crm-ticket-muescas-marcas i { width: 3px; height: 8px; }

@media (prefers-reduced-motion: reduce) {
  .crm-ticket-carton, .crm-ticket-tramo { animation: none; }
}

/* ══ Espera de Criterium (EsqueletoVista, EsqueletoTexto, CargaCriterium) ══
 * La espera tiene la forma de lo que viene. Invisible los primeros 300 ms
 * (si los datos llegan antes, nada destella); una sola luz diagonal con un
 * punto del acento cruza todos los huesos a la vez, anclada a la ventana.
 */

.crm-esq-vista {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

.crm-esq-cuerpo {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  opacity: 0;
  animation: crm-esq-aparece var(--crm-t-pulsar, 160ms) var(--crm-curva) var(--crm-esq-retardo, 300ms) forwards;
}

.crm-esq {
  position: relative;
  display: block;
  flex: none;
  max-width: 100%;
  overflow: hidden;
  background: var(--crm-esqueleto-a);
}

.crm-esq::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      105deg,
      transparent 30%,
      var(--crm-esqueleto-b) 46%,
      color-mix(in oklab, var(--crm-esqueleto-b), var(--crm-acento) 10%) 50%,
      var(--crm-esqueleto-b) 54%,
      transparent 70%
    )
    no-repeat;
  background-size: 60% 100%;
  background-position: -60% 0;
  background-attachment: fixed;
  animation: crm-esq-luz 1.8s var(--crm-curva) infinite;
}

.crm-esq-redondo {
  border-radius: 999px;
}

.crm-esq-chip {
  border: 1px solid var(--crm-line);
  background: transparent;
}

.crm-esq-texto {
  display: inline-block;
  vertical-align: -0.1em;
  opacity: 0;
  animation: crm-esq-aparece var(--crm-t-pulsar, 160ms) var(--crm-curva) 300ms forwards;
}

.crm-esq-col {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: 7px;
}

.crm-esq-relleno {
  flex: 1 1 auto;
}

.crm-esq-marco {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--crm-line);
  background: var(--crm-panel);
  overflow: hidden;
}

/* Lista: filas de 64 px como las de verdad. */
.crm-esq-lista {
  display: flex;
  flex-direction: column;
}

.crm-esq-fila {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 0 18px;
  border-bottom: 1px solid var(--crm-line);
}

/* Lista + ficha (Seguimientos, Leads, Hoy). */
.crm-esq-lf {
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
  gap: 0;
}

.crm-esq-lf > .crm-esq-marco + .crm-esq-marco {
  border-left: 0;
}

.crm-esq-lf-ancha {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
}

.crm-esq-ficha {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 14px;
  min-height: 320px;
  padding: 28px 32px;
}

.crm-esq-par {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 10px;
}

.crm-esq-caja {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--crm-line);
}

.crm-esq-acciones {
  display: flex;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--crm-line);
}

/* Agenda: hasta vacía lleva su aguja de AHORA. */
.crm-esq-agenda {
  gap: 0;
  padding-top: 14px;
}

.crm-esq-agenda > .crm-esq:first-child {
  margin: 0 18px 10px;
}

.crm-esq-aguja {
  position: relative;
  display: flex;
  align-items: center;
  height: 22px;
  margin: 0 0 0 10px;
}

.crm-esq-aguja::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--crm-acento);
}

.crm-esq-aguja::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  margin-left: 8px;
  background: var(--crm-acento-linea);
}

.crm-esq-aguja > span {
  order: 2;
  padding: 0 10px 0 8px;
  color: var(--crm-acento);
  font-family: var(--crm-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
}

/* Carpetas del archivador. */
.crm-esq-carpetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px 16px;
}

.crm-esq-carpeta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  height: 132px;
  padding: 22px 16px 14px;
  border: 1px solid var(--crm-line);
  background: var(--crm-panel);
}

.crm-esq-pestana {
  position: absolute;
  top: -9px;
  left: 14px;
  width: 64px;
  height: 9px;
  border: 1px solid var(--crm-line);
  border-bottom: 0;
  background: var(--crm-panel);
}

/* Cifras (Dirección, El negocio). */
.crm-esq-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.crm-esq-cifras-col {
  display: flex;
  flex-direction: column;
}

.crm-esq-cifra {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 108px;
  padding: 18px;
  border: 1px solid var(--crm-line);
  background: var(--crm-panel);
}

/* Cronología: hoja de taco + hora + hecho. */
.crm-esq-crono {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px 0;
}

.crm-esq-hecho {
  display: grid;
  grid-template-columns: 56px 48px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

.crm-esq-hoja {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 0;
  border: 1px solid var(--crm-line);
}

.crm-esq-hoja-vacia {
  border: 0;
  padding: 0;
}

/* Modal de lead. */
.crm-esq-modal {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 20px;
  min-height: 0;
}

.crm-esq-cabeza {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--crm-line);
}

/* Lanzadera (Superinteligencia). */
.crm-esq-lanzadera {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) minmax(240px, 280px);
  gap: 32px;
}

.crm-esq-centro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

/* La espera larga: la C de glifos pensando y una frase honesta. */
.crm-carga-c {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  animation: crm-esq-aparece var(--crm-t-pulsar, 160ms) var(--crm-curva) both;
}

.crm-carga-c[data-superpuesta] {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  padding: 18px 26px;
  transform: translate(-50%, -50%);
  border: 1px solid var(--crm-line);
  background: var(--crm-panel);
}

.crm-carga-c-frase {
  animation: crm-esq-frase 260ms var(--crm-curva) both;
}

@keyframes crm-esq-aparece {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes crm-esq-luz {
  0% {
    background-position: -60% 0;
  }
  60%,
  100% {
    background-position: 160% 0;
  }
}

@keyframes crm-esq-frase {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 900px) {
  .crm-esq-lf,
  .crm-esq-lf-ancha,
  .crm-esq-lanzadera {
    grid-template-columns: minmax(0, 1fr);
  }

  .crm-esq-lf > :last-child,
  .crm-esq-lanzadera > :not(.crm-esq-centro) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crm-esq::after,
  .crm-carga-c-frase {
    animation: none;
  }
}

/* VozBriefing (post-saludo vivo) y EscalaTickets (regla de tickets). Solo tokens del tema. */

/* ── VozBriefing ─────────────────────────────────────────── */
.crm-briefing { display: grid; justify-items: center; gap: clamp(10px, 1.6vh, 16px); width: min(100%, 780px); }
.crm-briefing-texto { margin: 0; text-shadow: 0 0 2px var(--crm-bg), 0 0 6px var(--crm-bg), 0 0 12px var(--crm-bg); font: 400 clamp(16px, 2.1vh, 19px)/1.55 var(--crm-sans); color: var(--crm-text-2, var(--crm-text)); text-wrap: pretty; min-height: calc(3 * 1.55em); cursor: default; }
.crm-briefing-enlace {
  color: var(--crm-text); font-weight: 500; text-decoration: none;
  background: linear-gradient(var(--crm-acento), var(--crm-acento)) 0 100% / 100% 1px no-repeat;
  padding-bottom: 1px; transition: background-size var(--crm-t-color, 160ms) var(--crm-snap, ease-out), color var(--crm-t-color, 120ms);
}
.crm-briefing-enlace:hover { background-size: 100% 100%; color: var(--crm-sobre-acento); }
.crm-briefing-enlace:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: 2px; }
.crm-briefing-enlace--aviso { background-image: linear-gradient(var(--crm-aviso), var(--crm-aviso)); }
.crm-briefing-enlace--error { background-image: linear-gradient(var(--crm-error), var(--crm-error)); }
.crm-briefing-cursor { display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -.15em; background: var(--crm-acento); animation: crm-briefing-parpadeo 1s steps(2) infinite; }
@keyframes crm-briefing-parpadeo { 50% { opacity: 0; } }

.crm-briefing-preguntas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.crm-briefing-pregunta { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 6px 0 12px; border: 1px dashed var(--crm-line-2); background: transparent; color: var(--crm-text-2, var(--crm-text)); font: 400 14px/1 var(--crm-sans); cursor: pointer; }
.crm-briefing-pregunta:hover { border-style: solid; color: var(--crm-text); }
.crm-briefing-pregunta[aria-pressed="true"] { border-style: solid; border-color: var(--crm-acento); color: var(--crm-text); }
.crm-briefing-pregunta:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: 2px; }
.crm-briefing-pregunta-cifra { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; background: var(--crm-panel-2, var(--crm-line)); font: 500 12px/1 var(--crm-mono); font-variant-numeric: tabular-nums; }

.crm-briefing-respuesta { width: 100%; border: 1px solid var(--crm-line-2); background: var(--crm-panel); text-align: left; }
.crm-briefing-resp-cab { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-bottom: 1px solid var(--crm-line); }
.crm-briefing-volver, .crm-briefing-ver-todo { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--crm-dim); font: 500 13px/1 var(--crm-sans); text-decoration: none; cursor: pointer; }
.crm-briefing-volver:hover, .crm-briefing-ver-todo:hover { color: var(--crm-text); }
.crm-briefing-resp-titulo { font: 500 12px/16px var(--crm-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--crm-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-briefing-filas { margin: 0; padding: 0; list-style: none; }
.crm-briefing-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 16px; height: 48px; padding: 0 12px; border-bottom: 1px solid var(--crm-line); color: var(--crm-text); text-decoration: none; }
.crm-briefing-filas li:last-child .crm-briefing-fila { border-bottom: 0; }
.crm-briefing-fila:hover { background: var(--crm-hover, var(--crm-panel-2)); box-shadow: inset 2px 0 0 var(--crm-acento); }
.crm-briefing-fila-texto { display: grid; min-width: 0; }
.crm-briefing-fila-texto b { font-size: 15px; line-height: 20px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-briefing-fila-texto span { font-size: 12px; line-height: 16px; color: var(--crm-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-briefing-fila-cifra { font: 500 14px/1 var(--crm-mono); font-variant-numeric: tabular-nums; color: var(--crm-text-2, var(--crm-dim)); }
.crm-briefing-fila-accion { display: inline-flex; align-items: center; gap: 4px; font: 500 13px/1 var(--crm-sans); color: var(--crm-acento); }

@media (prefers-reduced-motion: reduce) { .crm-briefing-cursor { animation: none; } .crm-briefing-enlace { transition: none; } }

/* ── EscalaTickets ───────────────────────────────────────── */
.crm-escala { display: flex; gap: 0; border-top: 1px solid var(--crm-text); border-bottom: 1px solid var(--crm-line); }
.crm-escala-tramo {
  all: unset; box-sizing: border-box; flex-basis: 0; min-width: 96px; cursor: pointer;
  display: grid; gap: 2px; padding: 8px 12px 10px; border-left: 1px solid var(--crm-line); position: relative;
}
.crm-escala-tramo:first-child { border-left: 0; }
.crm-escala-tramo:hover { background: var(--crm-hover, color-mix(in srgb, var(--crm-text) 4%, transparent)); }
.crm-escala-tramo:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: -1px; }
.crm-escala-tramo[aria-pressed='true']::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--crm-acento); }
.crm-escala-tramo[data-vacio] { color: var(--crm-dim); }
.crm-escala-rotulo { font: 500 11px/16px var(--crm-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--crm-dim); }
.crm-escala-cifra { font: 500 16px/22px var(--crm-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.crm-escala-n { font: 400 12px/16px var(--crm-mono); color: var(--crm-dim); white-space: nowrap; }

/* Estrecho: la escala pasa a rejilla (la cifra nunca se pisa con la vecina). */
@media (max-width: 720px) {
  .crm-escala { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .crm-escala-tramo { min-width: 0; border-left: 0; border-bottom: 1px solid var(--crm-line); }
  .crm-escala-n { white-space: normal; }
}

/* Lienzo de Criterium Superinteligencia y Taxímetro (16-oct-2026). */
.crm-lienzo { position: relative; display: flex; flex-direction: column; min-height: 0; height: 100%; border: 1px solid var(--crm-line); background: var(--crm-panel); }
.crm-lienzo[data-ampliado] { position: fixed; inset: 56px 16px 40px 16px; z-index: 40; box-shadow: var(--crm-sombra-capa); animation: crm-lienzo-entra 180ms var(--crm-snap, cubic-bezier(0.2, 0.8, 0.2, 1)); }
@keyframes crm-lienzo-entra { from { opacity: 0; transform: scale(0.985); } }
.crm-lienzo__cab { display: flex; align-items: stretch; gap: 12px; border-bottom: 1px solid var(--crm-line); min-height: 44px; }
.crm-lienzo__pestanas { display: flex; min-width: 0; flex: 1; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; mask-image: linear-gradient(90deg, black calc(100% - 28px), transparent); }
.crm-lienzo__pestanas::-webkit-scrollbar { display: none; }
.crm-lienzo__pestana { position: relative; display: flex; flex: 0 0 auto; align-items: center; border-right: 1px solid var(--crm-line); min-width: 132px; max-width: 240px; color: var(--crm-dim); }
.crm-lienzo__pestana[data-activa] { color: var(--crm-text); background: var(--crm-bg); }
.crm-lienzo__pestana[data-activa]::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--crm-acento); }
.crm-lienzo__pestana-boton { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 4px 0 14px; height: 44px; background: none; border: 0; color: inherit; font: 500 14px/1 var(--crm-sans); cursor: pointer; }
.crm-lienzo__pestana-boton:focus-visible, .crm-lienzo__cerrar:focus-visible, .crm-lienzo__ampliar:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: -2px; }
.crm-lienzo__sello { font: 600 10px/1 var(--crm-mono); letter-spacing: 0.08em; padding: 3px 5px; border: 1px solid currentColor; opacity: 0.8; }
.crm-lienzo__titulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-lienzo__cerrar { display: grid; place-items: center; width: 28px; height: 28px; margin-right: 6px; background: none; border: 0; color: var(--crm-dim); cursor: pointer; }
.crm-lienzo__cerrar:hover { color: var(--crm-text); background: var(--crm-hover); }
.crm-lienzo__ampliar { display: flex; align-items: center; gap: 8px; padding: 0 14px; background: none; border: 0; border-left: 1px solid var(--crm-line); color: var(--crm-text-2, var(--crm-dim)); font: 500 13px/1 var(--crm-sans); cursor: pointer; }
.crm-lienzo__ampliar:hover { color: var(--crm-text); background: var(--crm-hover); }
.crm-lienzo__tecla { font: 500 10px/1 var(--crm-mono); padding: 3px 5px; border: 1px solid var(--crm-line-2); color: var(--crm-dim); }
.crm-lienzo__cuerpo { flex: 1; min-height: 0; overflow: auto; animation: crm-lienzo-aparece 220ms var(--crm-snap, ease-out); }
@keyframes crm-lienzo-aparece { from { opacity: 0; transform: translateY(6px); } }
.crm-lienzo__mesa { flex: 1; display: grid; place-items: center; background-image: linear-gradient(var(--crm-line) 1px, transparent 1px), linear-gradient(90deg, var(--crm-line) 1px, transparent 1px); background-size: 32px 32px; background-position: -1px -1px; }

.crm-taximetro { position: relative; padding: 18px 18px 14px; background: var(--crm-taxi-1); border: 1px solid var(--crm-taxi-2); color: var(--crm-taxi-3); box-shadow: inset 0 1px 0 var(--crm-taxi-4); }
.crm-taximetro__bandera { position: absolute; top: -11px; right: 16px; padding: 4px 10px; font: 700 11px/1 var(--crm-mono); letter-spacing: 0.14em; background: var(--crm-taxi-5); color: var(--crm-taxi-6); }
.crm-taximetro__bandera[data-libre] { background: var(--crm-acento); color: var(--crm-taxi-1); }
.crm-taximetro__ventanilla { display: flex; align-items: flex-end; gap: 3px; padding: 10px 12px; background: var(--crm-taxi-7); border: 1px solid var(--crm-taxi-8); box-shadow: inset 0 2px 10px var(--crm-taxi-9); }
.crm-taximetro__digito { display: inline-grid; place-items: center; width: 34px; height: 50px; background: linear-gradient(var(--crm-taxi-10) 0 49%, var(--crm-taxi-11) 51% 100%); font: 600 34px/1 var(--crm-mono); color: var(--crm-taxi-12); text-shadow: 0 0 10px var(--crm-taxi-13); }
.crm-taximetro__coma { font: 600 30px/1 var(--crm-mono); color: var(--crm-taxi-12); padding: 0 1px 4px; }
.crm-taximetro__moneda { margin-left: 8px; padding-bottom: 6px; font: 600 16px/1 var(--crm-mono); color: var(--crm-taxi-14); }
.crm-taximetro__cinta { position: relative; height: 8px; margin-top: 14px; background: var(--crm-taxi-8); }
.crm-taximetro__hecho { position: absolute; inset: 0 auto 0 0; background: var(--crm-acento); }
.crm-taximetro__hecho[data-alerta] { background: var(--crm-aviso); }
.crm-taximetro__proy { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--crm-taxi-3); }
.crm-taximetro__pie { display: flex; justify-content: space-between; margin: 8px 0 0; font: 500 11.5px/1 var(--crm-mono); color: var(--crm-taxi-14); }

@media (prefers-reduced-motion: reduce) { .crm-lienzo[data-ampliado], .crm-lienzo__cuerpo { animation: none; } }

/* FichaCatalogo, PliegoPdf y LegajoDocumentos (17-oct-2026, A1-N5). */
.crm-ficha-cat { padding: 28px 32px 32px; display: flex; flex-direction: column; gap: 18px; max-width: 920px; }
.crm-ficha-cat__rotulo { margin: 0; font: 500 11px/1 var(--crm-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--crm-dim); }
.crm-ficha-cat__titulo { margin: -6px 0 0; font: 600 30px/1.15 var(--crm-sans); letter-spacing: -0.015em; color: var(--crm-text); text-wrap: balance; }
.crm-ficha-cat__estado { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: -8px 0 0; font: 400 15px/1.4 var(--crm-sans); color: var(--crm-text-2, var(--crm-dim)); }
.crm-ficha-cat__punto { width: 8px; height: 8px; border-radius: 50%; background: var(--crm-aviso); }
.crm-ficha-cat__punto[data-bien] { background: var(--crm-acento); }
.crm-ficha-cat__chapa { padding: 3px 7px; border: 1px solid var(--crm-line-2); font: 500 12px/1 var(--crm-mono); color: var(--crm-text); }
.crm-ficha-cat__galeria { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.crm-ficha-cat__marco { aspect-ratio: 16 / 10; background: var(--crm-bg); border: 1px solid var(--crm-line); display: grid; place-items: center; overflow: hidden; }
.crm-ficha-cat__marco img { width: 100%; height: 100%; object-fit: contain; }
.crm-ficha-cat__tira { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.crm-ficha-cat__diapo { position: relative; flex: 0 0 72px; height: 54px; padding: 0; border: 1px solid var(--crm-line-2); background: var(--crm-bg); cursor: pointer; opacity: 0.62; transition: opacity 140ms var(--crm-snap, ease); }
.crm-ficha-cat__diapo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crm-ficha-cat__diapo span { position: absolute; left: 3px; bottom: 2px; font: 600 9px/1 var(--crm-mono); color: var(--crm-pliego-1); text-shadow: 0 0 3px var(--crm-pliego-2); letter-spacing: 0.06em; }
.crm-ficha-cat__diapo[aria-selected="true"] { opacity: 1; border-color: var(--crm-acento); box-shadow: inset 0 2px 0 var(--crm-acento); }
.crm-ficha-cat__diapo:hover { opacity: 0.9; }
.crm-ficha-cat__diapo:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; }
.crm-ficha-cat__nota { display: flex; align-items: center; gap: 6px; margin: 0; font: 400 13px/1.4 var(--crm-mono); color: var(--crm-dim); }
.crm-ficha-cat__placa { position: relative; padding: 18px 22px 14px; border: 1px solid var(--crm-line-2); background: repeating-linear-gradient(90deg, transparent 0 2px, color-mix(in srgb, var(--crm-text) 2.5%, transparent) 2px 3px), var(--crm-panel-2, var(--crm-bg)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--crm-text) 8%, transparent); }
.crm-ficha-cat__remache { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--crm-text) 55%, transparent), color-mix(in srgb, var(--crm-text) 18%, transparent)); }
.crm-ficha-cat__remache[data-r="1"] { top: 8px; left: 8px; }
.crm-ficha-cat__remache[data-r="2"] { top: 8px; right: 8px; }
.crm-ficha-cat__remache[data-r="3"] { bottom: 8px; left: 8px; }
.crm-ficha-cat__remache[data-r="4"] { bottom: 8px; right: 8px; }
.crm-ficha-cat__placa-cab { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 12px; font: 700 15px/1 var(--crm-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--crm-text); }
.crm-ficha-cat__placa-cab span { font: 500 10px/1 var(--crm-mono); letter-spacing: 0.1em; color: var(--crm-dim); }
.crm-ficha-cat__specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 18px; margin: 0; }
.crm-ficha-cat__specs .crm-ficha-cat__dato dd { font-family: var(--crm-mono); font-size: 15px; }
.crm-ficha-cat__datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px 22px; margin: 0; }
.crm-ficha-cat__dato { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.crm-ficha-cat__dato dt { font: 500 10.5px/1 var(--crm-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--crm-dim); }
.crm-ficha-cat__dato dd { margin: 0; font: 500 16px/1.35 var(--crm-sans); color: var(--crm-text); overflow-wrap: anywhere; }
.crm-ficha-cat__dato[data-falta] dd { font: italic 400 13px/1.35 var(--crm-mono); color: var(--crm-dim); }
.crm-ficha-cat__enlace { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; color: var(--crm-text); text-decoration: underline; text-decoration-color: var(--crm-acento); text-underline-offset: 3px; }
.crm-ficha-cat__fuente { display: flex; gap: 8px; margin: 0; font: 400 12px/1.3 var(--crm-mono); color: var(--crm-dim); }
.crm-ficha-cat__fuente span { text-transform: uppercase; letter-spacing: 0.08em; color: var(--crm-acento); }
@media (max-width: 900px) { .crm-ficha-cat__specs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .crm-ficha-cat { padding: 20px 18px 24px; } }

.crm-pliego { position: relative; margin: 0; border: 1px solid var(--crm-line-2); background: var(--crm-bg); }
.crm-pliego--cerrado { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px 18px 16px 22px; background: var(--crm-panel-2, var(--crm-bg)); color: var(--crm-text); text-align: left; cursor: pointer; }
.crm-pliego--cerrado:hover { background: var(--crm-hover); }
.crm-pliego--cerrado:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; }
.crm-pliego__texto { display: flex; flex-direction: column; gap: 4px; }
.crm-pliego__texto b { font: 600 15px/1.2 var(--crm-sans); }
.crm-pliego__texto em { font: 400 12px/1 var(--crm-mono); font-style: normal; color: var(--crm-dim); }
.crm-pliego__pinza { position: absolute; top: -5px; left: 18px; width: 34px; height: 9px; border: 1px solid var(--crm-line-2); border-bottom: 0; background: var(--crm-panel, var(--crm-bg)); }
.crm-pliego__pinza::after { content: ""; position: absolute; left: 50%; top: 2px; width: 10px; height: 3px; margin-left: -5px; background: var(--crm-acento); }
.crm-pliego figcaption { position: relative; display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 22px; border-bottom: 1px solid var(--crm-line); font: 500 12px/1 var(--crm-mono); color: var(--crm-text); }
.crm-pliego figcaption a { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; color: var(--crm-dim); text-decoration: none; }
.crm-pliego figcaption a:hover { color: var(--crm-text); }
.crm-pliego figcaption button { display: grid; place-items: center; width: 26px; height: 28px; border: 1px solid var(--crm-line-2); background: none; color: var(--crm-dim); cursor: pointer; }
.crm-pliego iframe { display: block; width: 100%; height: min(68vh, 760px); border: 0; background: var(--crm-pliego-1); }
.crm-pliego__cargando { height: 360px; background: linear-gradient(100deg, var(--crm-line) 30%, var(--crm-line-2) 50%, var(--crm-line) 70%); background-size: 300% 100%; animation: crm-pliego-brillo 1.2s linear infinite; }
@keyframes crm-pliego-brillo { from { background-position: 100% 0; } to { background-position: 0 0; } }
.crm-pliego__fallo { margin: 24px; font: 400 14px/1.5 var(--crm-sans); color: var(--crm-dim); }

.crm-legajo { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px dashed var(--crm-line-2); }
.crm-legajo__titulo { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 15px/1.2 var(--crm-sans); color: var(--crm-text); }
.crm-legajo__titulo b { font: 600 11px/1 var(--crm-mono); padding: 3px 6px; border: 1px solid var(--crm-line-2); color: var(--crm-dim); }
.crm-legajo__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.crm-legajo__lista li { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 4px; padding: 10px 12px; border: 1px solid var(--crm-line); border-left: 2px solid var(--crm-line-2); }
.crm-legajo__solapa { grid-row: span 2; align-self: start; display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; border: 1px solid var(--crm-line-2); font: 600 10px/1 var(--crm-mono); letter-spacing: 0.08em; color: var(--crm-text); }
.crm-legajo__nombre { font: 500 14px/1.3 var(--crm-sans); color: var(--crm-text); overflow-wrap: anywhere; }
.crm-legajo__meta { font: 400 11.5px/1.3 var(--crm-mono); color: var(--crm-dim); overflow-wrap: anywhere; }
.crm-legajo__extracto { grid-column: 1 / -1; margin-top: 4px; font: 400 13px/1.5 var(--crm-sans); color: var(--crm-text-2, var(--crm-dim)); quotes: "«" "»"; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--crm-acento) 45%, transparent); text-underline-offset: 3px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.crm-legajo__vacio { display: flex; align-items: center; gap: 6px; margin: 0; font: 400 14px/1.4 var(--crm-sans); color: var(--crm-dim); }
.crm-legajo__leyendo { display: flex; flex-direction: column; gap: 10px; }
.crm-legajo__leyendo span { display: block; height: 14px; width: 80%; background: linear-gradient(100deg, var(--crm-line) 30%, var(--crm-line-2) 50%, var(--crm-line) 70%); background-size: 300% 100%; animation: crm-pliego-brillo 1.2s linear infinite; }
.crm-legajo__leyendo span + span { width: 60%; }
@media (prefers-reduced-motion: reduce) { .crm-pliego__cargando, .crm-legajo__leyendo span, .crm-ficha-cat__diapo { animation: none; transition: none; } }

/* ── Alertas del equipo (17-oct-2026): el parte del día de Dirección ── */
.crm-alertas { border: 1px solid var(--crm-line); background: var(--crm-panel); display: flex; flex-direction: column; }
.crm-alertas__cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px dashed var(--crm-line); }
.crm-alertas__rotulo { font-family: var(--crm-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--crm-muted); }
.crm-alertas__fecha { letter-spacing: 0.06em; }
.crm-alertas__cupo { display: inline-flex; align-items: center; gap: 4px; }
.crm-alertas__muesca { width: 6px; height: 12px; border: 1px solid var(--crm-line-2); }
.crm-alertas__muesca[data-usada] { background: var(--crm-text); border-color: var(--crm-text); }
.crm-alertas__cupo-num { font-family: var(--crm-mono); font-size: 11px; color: var(--crm-muted); margin-left: 6px; font-variant-numeric: tabular-nums; }
.crm-alertas__lista { list-style: none; margin: 0; padding: 0; }
.crm-alertas__fila { display: grid; grid-template-columns: 72px minmax(0, 1fr) 28px auto; align-items: center; gap: 12px; padding: 10px 16px 10px 13px; border-left: 3px solid transparent; border-bottom: 1px solid var(--crm-line); animation: crm-alertas-entra 220ms var(--crm-snap, cubic-bezier(0.2, 0.8, 0.2, 1)) both; }
.crm-alertas__fila:last-child { border-bottom: 0; }
.crm-alertas__fila:nth-child(2) { animation-delay: 40ms; } .crm-alertas__fila:nth-child(3) { animation-delay: 80ms; } .crm-alertas__fila:nth-child(4) { animation-delay: 120ms; } .crm-alertas__fila:nth-child(5) { animation-delay: 160ms; }
@keyframes crm-alertas-entra { from { opacity: 0; transform: translateY(4px); } }
.crm-alertas__fila[data-gravedad="alta"] { border-left-color: var(--crm-error); }
.crm-alertas__fila[data-gravedad="media"] { border-left-color: var(--crm-aviso); }
.crm-alertas__cifra { font-family: var(--crm-mono); font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--crm-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-alertas__fila[data-gravedad="alta"] .crm-alertas__cifra { color: var(--crm-error); }
.crm-alertas__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.crm-alertas__titulo { font-size: 14px; color: var(--crm-text); line-height: 1.3; }
.crm-alertas__detalle { font-size: 12px; color: var(--crm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-alertas__fuente { font-family: var(--crm-mono); font-size: 11px; }
.crm-alertas__chapa { width: 28px; height: 28px; display: inline-grid; place-items: center; border: 1px solid var(--crm-line); font-family: var(--crm-mono); font-size: 11px; color: var(--crm-text); background: var(--crm-bg); }
.crm-alertas__accion { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border: 1px solid var(--crm-line); background: transparent; color: var(--crm-text); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.crm-alertas__accion:hover { border-color: var(--crm-text); }
.crm-alertas__accion:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; }
.crm-alertas__aldia { display: flex; align-items: center; gap: 8px; margin: 0; padding: 16px; font-size: 14px; color: var(--crm-muted); }
.crm-alertas__aldia svg { color: var(--crm-acento); }
.crm-alertas__fila--esqueleto span { display: block; height: 12px; background: var(--crm-line); }
.crm-alertas__fila--esqueleto span:first-child { height: 24px; width: 40px; }
.crm-alertas__pie { padding: 8px 16px; border-top: 1px dashed var(--crm-line); font-size: 12px; color: var(--crm-muted); }
@media (prefers-reduced-motion: reduce) { .crm-alertas__fila { animation: none; } }
@media (max-width: 720px) { .crm-alertas__fila { grid-template-columns: 52px minmax(0, 1fr) auto; } .crm-alertas__chapa { display: none; } .crm-alertas__cifra { font-size: 20px; } }

/* Colores del objeto real (OFICIO §8): .crm-taximetro es siempre el mismo objeto, en cualquier tema. */
.crm-taximetro { --crm-taxi-1: #0d0e0f; --crm-taxi-2: #2a2c2e; --crm-taxi-3: #e8e6df; --crm-taxi-4: rgb(255 255 255 / 0.05); --crm-taxi-5: #3a3d40; --crm-taxi-6: #d6d3cb; --crm-taxi-7: #050606; --crm-taxi-8: #1d1f20; --crm-taxi-9: rgb(0 0 0 / 0.8); --crm-taxi-10: #1a1c1d; --crm-taxi-11: #121314; --crm-taxi-12: #f2c94c; --crm-taxi-13: rgb(242 201 76 / 0.35); --crm-taxi-14: #9b988f; }

/* Colores del objeto real (OFICIO §8): .crm-ficha-cat__diapo, .crm-pliego es siempre el mismo objeto, en cualquier tema. */
.crm-ficha-cat__diapo, .crm-pliego { --crm-pliego-1: #fff; --crm-pliego-2: #000; }

/* «Pregúntale a Criterium» (⌘K) y «Explícame esto» (17-oct-2026). */
.crm-pregunta-capa { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: center; align-items: flex-start; padding: 11vh 16px 16px; background: color-mix(in srgb, var(--crm-bg) 55%, transparent); backdrop-filter: blur(2px); animation: crm-pregunta-capa 140ms ease-out; }
@keyframes crm-pregunta-capa { from { opacity: 0; } }
.crm-pregunta { position: relative; display: flex; flex-direction: column; width: min(780px, 100%); max-height: 76vh; background: var(--crm-panel); border: 1px solid var(--crm-line-2, var(--crm-line)); color: var(--crm-text); box-shadow: var(--crm-sombra-capa); animation: crm-pregunta-entra 180ms var(--crm-snap, cubic-bezier(0.2, 0.8, 0.2, 1)); }
@keyframes crm-pregunta-entra { from { opacity: 0; transform: translateY(-8px) scale(0.99); } }
.crm-pregunta::before { content: ""; position: absolute; inset: -1px -1px auto -1px; height: 2px; background: var(--crm-acento); transform-origin: left; transform: scaleX(0.18); transition: transform 420ms var(--crm-snap, ease-out); }
.crm-pregunta[data-pensando]::before { animation: crm-pregunta-filo 1.4s ease-in-out infinite; }
@keyframes crm-pregunta-filo { 0% { transform: scaleX(0.1); } 50% { transform: scaleX(0.9); } 100% { transform: scaleX(0.1); transform-origin: right; } }

.crm-pregunta__contexto { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 14px 0 0; border-bottom: 1px solid var(--crm-line); overflow: hidden; }
.crm-pregunta__pestana { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-right: 1px solid var(--crm-line); background: var(--crm-bg); white-space: nowrap; }
.crm-pregunta__sello { font: 600 10px/1 var(--crm-mono); letter-spacing: 0.12em; color: var(--crm-acento); }
.crm-pregunta__pantalla { font: 500 13px/1 var(--crm-sans); color: var(--crm-text); max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.crm-pregunta__detalles { display: flex; gap: 6px; min-width: 0; overflow: hidden; }
.crm-pregunta__chapa { flex: none; font: 500 11px/1 var(--crm-mono); padding: 5px 7px; border: 1px solid var(--crm-line); color: var(--crm-dim); white-space: nowrap; }

.crm-pregunta__campo { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 18px; }
.crm-pregunta__orbe { flex: none; display: grid; place-items: center; width: 32px; height: 32px; }
.crm-pregunta__entrada { flex: 1; min-width: 0; height: 40px; border: 0; outline: 0; background: transparent; color: var(--crm-text); font: 400 22px/1.2 var(--crm-sans); letter-spacing: -0.01em; }
.crm-pregunta__entrada::placeholder { color: var(--crm-dim); }
.crm-pregunta__accion { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--crm-line-2, var(--crm-line)); background: var(--crm-bg); color: var(--crm-text); cursor: pointer; }
.crm-pregunta__accion:disabled { color: var(--crm-dim); cursor: default; }
.crm-pregunta__accion:not(:disabled):hover { border-color: var(--crm-acento); }
.crm-pregunta__accion:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; }

.crm-pregunta__sugerencias { list-style: none; margin: 0; padding: 4px 0 8px; border-top: 1px solid var(--crm-line); }
.crm-pregunta__sugerencias button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 18px; border: 0; background: none; color: var(--crm-text-2, var(--crm-text)); font: 400 15px/1.3 var(--crm-sans); text-align: left; cursor: pointer; }
.crm-pregunta__sugerencias li[data-elegida] button { background: var(--crm-panel-2); color: var(--crm-text); box-shadow: inset 2px 0 0 var(--crm-acento); }
.crm-pregunta__flecha { font: 500 12px/1 var(--crm-mono); color: var(--crm-dim); }
.crm-pregunta__sugerencias li[data-elegida] .crm-pregunta__flecha { color: var(--crm-acento); }

.crm-pregunta__pasos { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 10px 18px; border-top: 1px solid var(--crm-line); font: 500 11.5px/1.2 var(--crm-mono); color: var(--crm-dim); }
.crm-pregunta__pasos li { display: inline-flex; align-items: center; gap: 6px; }
.crm-pregunta__punto { width: 6px; height: 6px; border: 1px solid currentColor; }
.crm-pregunta__pasos li:not([data-hecho]) .crm-pregunta__punto { animation: crm-pregunta-punto 900ms ease-in-out infinite alternate; }
.crm-pregunta__pasos li[data-hecho] { color: var(--crm-text-2, var(--crm-text)); }
.crm-pregunta__pasos li[data-hecho] .crm-pregunta__punto { background: var(--crm-acento); border-color: var(--crm-acento); }
@keyframes crm-pregunta-punto { to { opacity: 0.3; } }
.crm-pregunta__respuesta { flex: 1; min-height: 0; overflow: auto; padding: 14px 18px 18px; border-top: 1px solid var(--crm-line); font: 400 16px/1.55 var(--crm-sans); }

.crm-pregunta__pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; border-top: 1px solid var(--crm-line); background: var(--crm-bg); font: 500 11px/1 var(--crm-mono); color: var(--crm-dim); }
.crm-pregunta__regleta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.crm-pregunta__regleta kbd, .crm-explica__lengueta kbd { font: 500 10px/1 var(--crm-mono); padding: 3px 5px; margin-right: 6px; border: 1px solid var(--crm-line-2, var(--crm-line)); color: var(--crm-text-2, var(--crm-text)); background: var(--crm-panel); }
.crm-pregunta__seguir { display: inline-flex; align-items: center; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.crm-pregunta__seguir:hover { color: var(--crm-text); }
.crm-pregunta__seguir:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 3px; }

/* Explícame esto */
[data-explicable] { cursor: help; }
[data-explicable][data-explicando] { outline: 1px dashed var(--crm-acento); outline-offset: 3px; }
.crm-explica__lengueta { position: fixed; z-index: 55; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 4px 0 8px; border: 1px solid var(--crm-acento); background: var(--crm-panel); color: var(--crm-text); font: 600 11px/1 var(--crm-sans, sans-serif); cursor: pointer; animation: crm-explica-asoma 140ms var(--crm-snap, ease-out); }
.crm-explica__lengueta kbd { margin: 0 0 0 4px; }
.crm-explica__lengueta:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; }
@keyframes crm-explica-asoma { from { opacity: 0; transform: translateY(4px); } }
.crm-explica { position: fixed; z-index: 56; width: min(400px, calc(100vw - 32px)); max-height: 56vh; display: flex; flex-direction: column; background: var(--crm-panel); color: var(--crm-text); border: 1px solid var(--crm-line-2); box-shadow: var(--crm-sombra-capa); animation: crm-explica-entra 160ms var(--crm-snap, ease-out); }
.crm-explica[data-arriba] { animation-name: crm-explica-entra-arriba; }
@keyframes crm-explica-entra { from { opacity: 0; transform: translateY(-6px); } }
@keyframes crm-explica-entra-arriba { from { opacity: 0; transform: translateY(6px); } }
.crm-explica__cab { display: flex; align-items: center; justify-content: space-between; height: 32px; padding: 0 6px 0 14px; border-bottom: 1px solid var(--crm-line); }
.crm-explica__rotulo { font: 600 10px/1 var(--crm-mono, monospace); letter-spacing: 0.12em; text-transform: uppercase; color: var(--crm-acento); }
.crm-explica__cerrar { display: grid; place-items: center; width: 24px; height: 24px; border: 0; background: none; color: var(--crm-dim); cursor: pointer; }
.crm-explica__cerrar:hover { color: var(--crm-text); background: var(--crm-panel-2); }
.crm-explica__cifra { display: flex; align-items: baseline; gap: 10px; margin: 0; padding: 14px 14px 0; }
.crm-explica__valor { font: 600 30px/1 var(--crm-sans, sans-serif); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.crm-explica__etiqueta { font: 500 11px/1.2 var(--crm-mono, monospace); letter-spacing: 0.06em; text-transform: uppercase; color: var(--crm-dim); }
.crm-explica__regla { margin: 10px 14px 0; padding-top: 6px; border-top: 1px dashed var(--crm-line-2); font: 500 10.5px/1 var(--crm-mono, monospace); color: var(--crm-dim); }
.crm-explica__cuerpo { flex: 1; min-height: 0; overflow: auto; padding: 8px 14px 14px; font: 400 14.5px/1.5 var(--crm-sans, sans-serif); }
.crm-explica__pensando { color: var(--crm-dim); font-style: italic; }
.crm-explica__pie { padding: 8px 14px; border-top: 1px solid var(--crm-line); font: 500 11px/1 var(--crm-mono, monospace); color: var(--crm-dim); }

@media (prefers-reduced-motion: reduce) {
  .crm-pregunta-capa, .crm-pregunta, .crm-explica, .crm-explica__lengueta { animation: none; }
  .crm-pregunta[data-pensando]::before, .crm-pregunta__pasos li .crm-pregunta__punto { animation: none; }
}
@media (max-width: 720px) {
  .crm-pregunta-capa { padding: 8px; }
  .crm-pregunta { max-height: calc(100vh - 16px); }
  .crm-pregunta__detalles { display: none; }
  .crm-pregunta__entrada { font-size: 20px; }
}

/* PropuestaConfirmable: volante perforado con filo de tono y sello al confirmar. */
.crm-propuesta { position: relative; display: grid; gap: 14px; padding: 18px 16px 16px 20px; border: 1px solid var(--crm-line-2); background: var(--crm-panel); color: var(--crm-text); }
.crm-propuesta::before { content: ""; position: absolute; inset: -1px auto -1px -1px; width: 3px; background: var(--crm-dim); transition: background-color 180ms var(--crm-curva); }
.crm-propuesta[data-tono="positivo"]::before { background: var(--crm-acento); }
.crm-propuesta[data-tono="negativo"]::before { background: var(--crm-error); }
/* Perforación de matriz: muescas del color del fondo sobre el filete superior. */
.crm-propuesta::after { content: ""; position: absolute; top: -5px; left: 12px; right: 12px; height: 8px; background: radial-gradient(circle at 4px 4px, var(--crm-bg) 2.5px, transparent 3px) 0 0 / 12px 8px repeat-x; }
.crm-propuesta[data-sellado]::after { top: -1px; height: 1px; background: var(--crm-acento); }
.crm-propuesta-firma { margin: 0; color: var(--crm-acento); font: 500 12px/16px var(--crm-mono); letter-spacing: .08em; text-transform: uppercase; }
.crm-propuesta-cuerpo { display: grid; gap: 14px; min-width: 0; }
.crm-propuesta-campo { display: grid; gap: 6px; min-width: 0; }
.crm-propuesta-rotulo { color: var(--crm-dim); font: 500 12px/16px var(--crm-mono); letter-spacing: .08em; text-transform: uppercase; }
.crm-propuesta-acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.crm-propuesta-descartar, .crm-propuesta-confirmar { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 14px; border: 1px solid transparent; font: 500 14px/20px var(--crm-sans); cursor: pointer; }
.crm-propuesta-descartar { background: none; color: var(--crm-text-2); }
.crm-propuesta-descartar:hover:not(:disabled) { color: var(--crm-text); }
.crm-propuesta-confirmar { border-color: var(--crm-text); background: var(--crm-text); color: var(--crm-bg); }
.crm-propuesta-confirmar:hover:not(:disabled) { background: var(--crm-text-2); border-color: var(--crm-text-2); }
.crm-propuesta-confirmar:active:not(:disabled) { transform: translateY(1px); }
.crm-propuesta-confirmar:disabled, .crm-propuesta-descartar:disabled { opacity: .5; cursor: not-allowed; }
.crm-propuesta-confirmar[aria-busy] { cursor: progress; }
.crm-propuesta-descartar:focus-visible, .crm-propuesta-confirmar:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; }
.crm-propuesta-sello { display: flex; align-items: baseline; gap: 10px; margin: 0; color: var(--crm-text); font: 500 15px/24px var(--crm-sans); animation: crm-propuesta-sella 220ms var(--crm-curva); }
.crm-propuesta-sello-marca { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--crm-acento); color: var(--crm-acento); font: 600 13px/1 var(--crm-mono); transform: rotate(-6deg); }
@keyframes crm-propuesta-sella { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .crm-propuesta-sello { animation: none; } .crm-propuesta::before { transition: none; } }
@media (max-width: 480px) { .crm-propuesta { padding: 16px 12px 12px 16px; } .crm-propuesta-acciones > * { flex: 1 1 auto; justify-content: center; } }

/* ══ Ficha ajustada: el cuerpo no desplaza nunca (escritorio) ══════════
   FichaModal[ajustada]: cada columna llena su alto; las piezas son fijas y el
   Recortable absorbe lo que sobra, con «Leer entero» en un modal amplio. */
@media (min-width: 900px) and (min-height: 560px) {
  .crm-modal.crm-ficha-modal[data-ajustada] .crm-modal-cuerpo.crm-ficha-modal-cuerpo { display: flex; flex-direction: column; overflow: hidden; }
  .crm-modal.crm-ficha-modal[data-ajustada] .crm-ficha-modal-columnas { flex: 1 1 auto; min-height: 0; align-items: stretch; }
  .crm-modal.crm-ficha-modal[data-ajustada] :is(.crm-ficha-modal-principal, .crm-ficha-modal-hechos) { display: flex; flex-direction: column; gap: 16px; min-height: 0; overflow: hidden; }
  .crm-modal.crm-ficha-modal[data-ajustada] :is(.crm-ficha-modal-principal, .crm-ficha-modal-hechos) > * { flex: none; }
  .crm-modal.crm-ficha-modal[data-ajustada] :is(.crm-ficha-modal-principal, .crm-ficha-modal-hechos) > .crm-recorte { flex: 1 1 0; min-height: 64px; }
  .crm-modal.crm-ficha-modal[data-ajustada] .crm-recorte { position: relative; display: flex; flex-direction: column; min-height: 0; }
  .crm-modal.crm-ficha-modal[data-ajustada] .crm-recorte-dentro { flex: 1 1 auto; min-height: 0; overflow: hidden; }
  .crm-modal.crm-ficha-modal[data-ajustada] .crm-recorte[data-cortado] .crm-recorte-dentro { -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 56px), transparent); mask-image: linear-gradient(to bottom, black calc(100% - 56px), transparent); }
  /* En pantallas bajas todo se aprieta un punto (nunca por debajo de 13 px) para que quepa sin desplazar. */
  @media (max-height: 800px) {
    .crm-modal.crm-ficha-modal[data-ajustada] :is(.crm-ficha-modal-principal, .crm-ficha-modal-hechos) { gap: 12px; }
    .crm-modal.crm-ficha-modal[data-ajustada] :is(.crm-ficha-modal-principal, .crm-ficha-modal-hechos) > .crm-recorte { min-height: 72px; }
    /* Lo elástico va al final de la columna: lo fijo (producto, tique) nunca queda cortado. */
    .crm-modal.crm-ficha-modal[data-ajustada] :is(.crm-ficha-modal-principal, .crm-ficha-modal-hechos) > .crm-recorte { order: 1; }
    .crm-modal.crm-ficha-modal[data-ajustada] .crm-producto { grid-template-columns: 80px minmax(0, 1fr); gap: 12px; padding: 10px 14px; }
    .crm-modal.crm-ficha-modal[data-ajustada] .crm-producto-foto { width: 80px; height: 60px; }
    .crm-modal.crm-ficha-modal[data-ajustada] .crm-producto-categoria { display: none; }
    .crm-modal.crm-ficha-modal[data-ajustada] .crm-triage { gap: 8px; padding: 10px 14px; }
    .crm-modal.crm-ficha-modal[data-ajustada] .crm-triage-guion li { height: 24px; font-size: 13px; }
    .crm-modal.crm-ficha-modal[data-ajustada] .crm-triage-resumen li { font-size: 14px; line-height: 20px; }
    /* Menos es más en poco alto: el rótulo lo dicen las muescas y la línea 2 (cliente y canal) ya está en la cabecera y el tique. */
    .crm-modal.crm-ficha-modal[data-ajustada] .crm-triage:not([data-compacta]) .crm-triage-rotulo { display: none; }
    .crm-modal.crm-ficha-modal[data-ajustada] .crm-triage-resumen li:nth-child(2) { display: none; }
    .crm-modal.crm-ficha-modal[data-ajustada] .crm-triage-guion { gap: 4px; }
    .crm-modal.crm-ficha-modal[data-ajustada] .crm-triage-guion li { padding-right: 6px; }
  }
}
/* La esquina de la hoja: «Leer entero» asoma abajo a la derecha, sobre el fundido. */
.crm-recorte-mas.crm-recorte-mas { position: absolute; right: 8px; bottom: 6px; z-index: 1; }
.crm-recorte:not([data-cortado]) .crm-recorte-mas { display: none; }
.crm-recorte-modal .crm-modal-cuerpo .crm-misiva { max-height: none; }

/* ══ Tique de atribución compacto: la tira del comprobante ══════════════ */
.crm-tique-atrib[data-compacto] { display: flex; flex-wrap: nowrap; align-items: center; gap: 14px; min-width: 0; padding: 10px 16px; cursor: default; }
.crm-tique-atrib[data-compacto] .crm-tique-atrib-canal { flex: none; gap: 8px; font-size: 15px; line-height: 20px; }
.crm-tique-atrib[data-compacto] .crm-tique-atrib-moneda { width: 20px; height: 20px; font-size: 11px; }
.crm-tique-atrib-hora-corta { display: inline-flex; flex: none; align-items: baseline; gap: 6px; }
.crm-tique-atrib-hora-corta strong { color: var(--crm-text); font: 500 15px/20px var(--crm-mono); font-variant-numeric: tabular-nums; }
.crm-tique-atrib-hora-corta span { color: var(--crm-text-2); font: 400 13px/20px var(--crm-sans); }
.crm-tique-atrib-campana { flex: 1 1 0; min-width: 0; overflow: hidden; color: var(--crm-text-2); font: 400 14px/20px var(--crm-sans); text-overflow: ellipsis; white-space: nowrap; }
.crm-tique-atrib-campana[data-mono] { font: 400 13px/20px var(--crm-mono); }
.crm-tique-atrib[data-compacto] .crm-tique-atrib-ok { flex: none; padding: 0; border: 0; }
.crm-tique-atrib[data-compacto] .crm-tique-atrib-ok svg { width: 18px; height: 18px; }
.crm-tique-atrib-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ══ Hoja de triage: el guion como tarjeta de control ══════════════════ */
.crm-triage { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--crm-line); border-left: 2px solid var(--crm-acento); background: var(--crm-panel); }
.crm-triage[data-compacta] { gap: 6px; padding: 8px 12px; border-left-width: 1px; }
.crm-triage-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.crm-triage[data-compacta] .crm-triage-cab { flex-wrap: nowrap; }
.crm-triage-rotulo { color: var(--crm-dim); font: 500 12px/16px var(--crm-mono); letter-spacing: .08em; text-transform: uppercase; }
.crm-triage-muescas { display: inline-flex; flex: none; align-items: center; gap: 3px; }
.crm-triage-muescas i { width: 6px; height: 12px; border: 1px solid var(--crm-line-2); }
.crm-triage-muescas i[data-consta] { border-color: var(--crm-acento); background: var(--crm-acento); }
.crm-triage-muescas b { margin-left: 6px; color: var(--crm-text-2); font: 500 12px/16px var(--crm-mono); font-variant-numeric: tabular-nums; }
.crm-triage-guion { display: flex; flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin: 0; padding: 0; list-style: none; }
.crm-triage-guion li { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px 0 4px; border: 1px dashed var(--crm-line-2); color: var(--crm-text-2); font: 400 13px/16px var(--crm-sans); cursor: help; }
.crm-triage-guion li[data-consta] { border-style: solid; border-color: var(--crm-line); color: var(--crm-text); }
.crm-triage-casilla { display: inline-grid; place-items: center; width: 16px; height: 16px; border: 1px solid var(--crm-line-2); }
.crm-triage-guion li[data-consta] .crm-triage-casilla { border-color: var(--crm-acento); color: var(--crm-acento); }
.crm-triage-casilla svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.crm-triage-faltan { flex: 1 1 0; min-width: 0; overflow: hidden; color: var(--crm-text-2); font: 400 14px/20px var(--crm-sans); text-overflow: ellipsis; white-space: nowrap; cursor: help; }
.crm-triage-cifra { flex: none; margin-left: auto; color: var(--crm-text); font: 500 15px/20px var(--crm-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.crm-triage-resumen { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; counter-reset: crm-triage; }
.crm-triage-resumen li { position: relative; padding-left: 22px; color: var(--crm-text); font: 400 15px/22px var(--crm-sans); }
.crm-triage-resumen li::before { counter-increment: crm-triage; content: counter(crm-triage); position: absolute; left: 0; top: 3px; color: var(--crm-dim); font: 500 11px/16px var(--crm-mono); }
.crm-triage-resumen li:first-child { font-weight: 500; }
.crm-triage-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 0; color: var(--crm-text-2); font: 400 14px/20px var(--crm-sans); }
.crm-triage[data-compacta] .crm-triage-pie { font-size: 13px; line-height: 18px; }
.crm-triage-hueco { flex: 1 1 0; height: 10px; background: var(--crm-line); }
.crm-triage-lineas { display: grid; gap: 8px; }
.crm-triage-lineas i { height: 12px; background: var(--crm-line); }
.crm-triage-lineas i:nth-child(1) { width: 78%; }
.crm-triage-lineas i:nth-child(2) { width: 64%; }
.crm-triage-lineas i:nth-child(3) { width: 52%; }
.crm-triage[data-cargando] :is(.crm-triage-lineas i, .crm-triage-hueco, .crm-triage-muescas i) { animation: crm-triage-brillo 1.4s ease-in-out infinite; }
@keyframes crm-triage-brillo { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .crm-triage[data-cargando] :is(.crm-triage-lineas i, .crm-triage-hueco, .crm-triage-muescas i) { animation: none; } }

/* ── PapelPresupuesto y ComparadorPresupuestos (17-10-2026, frente A2-PRESUPUESTO) ── */
/* Solo tokens --crm-*. La hoja de verdad: membrete, sello BORRADOR entintado,
   precio con su tarifa al lado y, si no consta, la casilla vacía con filo coral. */

.crm-papelpres {
  position: relative;
  display: grid;
  gap: 18px;
  padding: 26px 28px 22px;
  background: var(--crm-panel);
  border: 1px solid var(--crm-line-2);
  overflow: hidden;
  animation: crm-papel-entrar 520ms var(--crm-snap) both;
}
/* El taladro de archivador a la izquierda: dos ojales. */
.crm-papelpres::before,
.crm-papelpres::after {
  content: "";
  position: absolute;
  left: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--crm-bg);
  box-shadow: 0 0 0 1px var(--crm-line-2);
}
.crm-papelpres::before { top: 34%; }
.crm-papelpres::after { top: 66%; }
@keyframes crm-papel-entrar {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.crm-papelpres__sello {
  position: absolute;
  top: 22px;
  right: 26px;
  padding: 4px 10px;
  font: 600 12px/1 var(--crm-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--crm-aviso);
  border: 2px solid var(--crm-aviso);
  transform: rotate(-7deg);
  opacity: 0.82;
  pointer-events: none;
  animation: crm-papel-sellar 420ms 240ms var(--crm-snap) both;
}
@keyframes crm-papel-sellar {
  from { opacity: 0; transform: rotate(-7deg) scale(1.6); }
  to { opacity: 0.82; transform: rotate(-7deg) scale(1); }
}

.crm-papelpres__membrete {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--crm-line-2);
}
.crm-papelpres__rotulo {
  margin: 0 0 6px;
  font: 500 11px/1.2 var(--crm-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--crm-dim);
}
.crm-papelpres__titulo {
  margin: 0;
  max-width: 32ch;
  font: 600 22px/1.2 var(--crm-sans);
  color: var(--crm-text);
}
.crm-papelpres__para { margin: 8px 0 0; font: 400 14px/1.4 var(--crm-sans); color: var(--crm-text-2); }
.crm-papelpres__para span { margin-right: 8px; font: 500 11px/1 var(--crm-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--crm-dim); }
.crm-papelpres__numero { display: grid; gap: 6px; align-content: end; margin: 0; text-align: right; }
.crm-papelpres__numero div { display: grid; gap: 2px; }
.crm-papelpres__numero dt { font: 500 10px/1 var(--crm-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--crm-dim); }
.crm-papelpres__numero dd { margin: 0; font: 500 13px/1.2 var(--crm-mono); color: var(--crm-text-2); }

.crm-papelpres__lineas { width: 100%; border-collapse: collapse; font: 400 14px/1.35 var(--crm-sans); color: var(--crm-text); }
.crm-papelpres__lineas th {
  padding: 0 0 8px;
  text-align: left;
  font: 500 10px/1 var(--crm-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--crm-dim);
  border-bottom: 1px solid var(--crm-line-2);
}
.crm-papelpres__lineas td { padding: 12px 0; vertical-align: top; border-bottom: 1px solid var(--crm-line); }
.crm-papelpres__lineas tr[data-falta] td:first-child { box-shadow: inset 2px 0 0 var(--crm-error); padding-left: 10px; }
.crm-papelpres__num { text-align: right !important; white-space: nowrap; padding-left: 14px !important; }
.crm-papelpres__concepto { display: block; font-weight: 500; }
.crm-papelpres__fuente { display: block; margin-top: 3px; font: 400 11px/1.3 var(--crm-mono); color: var(--crm-dim); }
tr[data-falta] .crm-papelpres__fuente { color: var(--crm-error); }
.crm-papelpres__cifra { font: 500 14px/1.3 var(--crm-mono); font-variant-numeric: tabular-nums; }
.crm-papelpres__hueco { font: 400 12px/1 var(--crm-mono); color: var(--crm-error); }
.crm-papelpres__cantidad,
.crm-papelpres__precio {
  width: 9ch;
  padding: 4px 6px;
  font: 500 14px/1.2 var(--crm-mono);
  text-align: right;
  color: var(--crm-text);
  background: transparent;
  border: 0;
  border-bottom: 1px dashed var(--crm-line-2);
  border-radius: 0;
}
.crm-papelpres__cantidad { width: 6ch; }
.crm-papelpres__precio { width: 18ch; border-bottom-color: var(--crm-error); }
.crm-papelpres__precio::placeholder { color: var(--crm-error); opacity: 0.8; font-size: 12px; }
.crm-papelpres__cantidad:focus-visible,
.crm-papelpres__precio:focus-visible { outline: none; border-bottom: 1px solid var(--crm-acento); }
.crm-papelpres__cambiar {
  margin-left: 8px;
  padding: 0;
  font: 400 11px/1 var(--crm-mono);
  color: var(--crm-dim);
  background: none;
  border: 0;
  text-decoration: underline dotted;
  cursor: pointer;
}

.crm-papelpres__totales { display: flex; justify-content: flex-end; }
.crm-papelpres__totales dl { display: grid; gap: 6px; min-width: 260px; margin: 0; }
.crm-papelpres__totales dl div { display: flex; justify-content: space-between; gap: 24px; }
.crm-papelpres__totales dt { font: 400 13px/1.3 var(--crm-sans); color: var(--crm-text-2); }
.crm-papelpres__totales dd { margin: 0; font: 500 14px/1.3 var(--crm-mono); font-variant-numeric: tabular-nums; color: var(--crm-text); }
.crm-papelpres__total { padding-top: 8px; border-top: 1px solid var(--crm-line-2); }
.crm-papelpres__total dt { font-weight: 500; color: var(--crm-text); }
.crm-papelpres__total dd { font-size: 20px; font-weight: 500; }
.crm-papelpres__sin-total { margin: 0; max-width: 46ch; font: 400 13px/1.45 var(--crm-mono); color: var(--crm-error); text-align: right; }

.crm-papelpres__pendientes { display: grid; gap: 4px; margin: 0; padding: 10px 12px; list-style: none; background: var(--crm-panel-2); border-left: 2px solid var(--crm-aviso); }
.crm-papelpres__pendientes li { font: 400 13px/1.4 var(--crm-sans); color: var(--crm-text-2); }
.crm-papelpres__pendientes li::before { content: "· "; color: var(--crm-aviso); }
.crm-papelpres__acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.crm-papelpres__pie { margin: 0; font: 400 11px/1.4 var(--crm-mono); color: var(--crm-dim); }

/* ── Comparador de versiones ── */
.crm-comparador { display: grid; gap: 14px; padding: 20px 22px; background: var(--crm-panel); border: 1px solid var(--crm-line-2); }
.crm-comparador__cab { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.crm-comparador__versiones { display: flex; gap: 10px; margin: 0; font: 500 12px/1 var(--crm-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--crm-text-2); }
.crm-comparador__delta { margin: 0; font: 600 22px/1 var(--crm-mono); font-variant-numeric: tabular-nums; color: var(--crm-text); }
.crm-comparador__delta[data-tono="sube"] { color: var(--crm-acento); }
.crm-comparador__delta[data-tono="baja"] { color: var(--crm-error); }
.crm-comparador__delta em { font: 400 13px/1 var(--crm-mono); font-style: normal; color: var(--crm-dim); }
.crm-comparador__filas { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.crm-comparador__filas li { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--crm-line); }
.crm-comparador__marca { font: 600 14px/1 var(--crm-mono); color: var(--crm-dim); text-align: center; }
li[data-cambio="nueva"] .crm-comparador__marca { color: var(--crm-acento); }
li[data-cambio="quitada"] .crm-comparador__marca,
li[data-cambio="quitada"] .crm-comparador__concepto { color: var(--crm-error); }
li[data-cambio="quitada"] .crm-comparador__concepto { text-decoration: line-through; }
li[data-cambio="cambia"] .crm-comparador__marca { color: var(--crm-aviso); }
.crm-comparador__concepto { font: 400 14px/1.35 var(--crm-sans); color: var(--crm-text); }
.crm-comparador__cifras { display: flex; gap: 10px; font: 400 13px/1.2 var(--crm-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.crm-comparador__cifras s { color: var(--crm-dim); }
.crm-comparador__cifras b { font-weight: 500; color: var(--crm-text); }
.crm-comparador__totales { display: flex; justify-content: flex-end; gap: 28px; margin: 0; }
.crm-comparador__totales div { display: grid; gap: 4px; text-align: right; }
.crm-comparador__totales dt { font: 500 10px/1 var(--crm-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--crm-dim); }
.crm-comparador__totales dd { margin: 0; font: 600 16px/1 var(--crm-mono); color: var(--crm-text); }

@media (max-width: 720px) {
  .crm-papelpres { padding: 20px 16px 18px 22px; }
  .crm-papelpres__membrete { flex-direction: column; }
  .crm-papelpres__numero { text-align: left; }
  .crm-papelpres__precio { width: 12ch; }
}
@media (prefers-reduced-motion: reduce) {
  .crm-papelpres,
  .crm-papelpres__sello { animation: none; }
}

/* AvisoProactivo y CampanaAvisos: recados de centralita con la hora fichada. */
.crm-recado { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); border: 1px solid var(--crm-line-2); background: var(--crm-panel); color: var(--crm-text); }
.crm-recado::before { content: ""; position: absolute; inset: -1px auto -1px -1px; width: 3px; background: var(--crm-recado); }
.crm-recado[data-tono="error"]::before { background: var(--crm-error); }
.crm-recado[data-tono="acento"]::before { background: var(--crm-acento); }
.crm-recado-margen { display: grid; align-content: start; justify-items: center; gap: 10px; padding: 14px 0 12px; border-right: 1px dashed var(--crm-line-2); }
/* La hora fichada: mono, ligeramente torcida, como la ficha de un reloj de entrada. */
.crm-recado-hora { color: var(--crm-text-2); font: 500 12px/16px var(--crm-mono); letter-spacing: .04em; transform: rotate(-4deg); }
.crm-recado-muescas { display: grid; gap: 3px; }
.crm-recado-muescas i { display: block; width: 14px; height: 3px; background: var(--crm-line-2); }
.crm-recado-muescas[data-n="1"] i:nth-child(3), .crm-recado-muescas[data-n="2"] i:nth-child(n+2), .crm-recado-muescas[data-n="3"] i { background: var(--crm-text-2); }
.crm-recado-cuerpo { display: grid; gap: 6px; min-width: 0; padding: 12px 14px 12px 14px; }
.crm-recado-titulo { margin: 0; font: 500 15px/21px var(--crm-sans); text-wrap: pretty; }
.crm-recado-detalle { margin: 0; color: var(--crm-dim); font: 400 12px/18px var(--crm-mono); letter-spacing: .01em; overflow-wrap: anywhere; }
.crm-recado-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.crm-recado-accion { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; border: 1px solid var(--crm-text); background: var(--crm-text); color: var(--crm-bg); font: 500 14px/20px var(--crm-sans); text-decoration: none; cursor: pointer; }
.crm-recado-accion span { transition: transform 160ms var(--crm-curva); }
.crm-recado-accion:hover span { transform: translateX(2px); }
.crm-recado-visto { min-height: 32px; padding: 0 6px; border: 0; background: none; color: var(--crm-dim); font: 500 12px/16px var(--crm-mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.crm-recado-visto:hover { color: var(--crm-text); }
.crm-recado-accion:focus-visible, .crm-recado-visto:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; }

.crm-campana { position: relative; display: inline-flex; }
.crm-campana-boton { position: relative; display: inline-grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--crm-line-2); background: var(--crm-panel); color: var(--crm-text-2); cursor: pointer; }
.crm-campana-boton:hover { color: var(--crm-text); }
.crm-campana-boton[aria-expanded="true"] { color: var(--crm-text); border-color: var(--crm-text-2); }
.crm-campana-boton:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; }
.crm-campana-cifra { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; background: var(--crm-acento); color: var(--crm-bg); font: 600 11px/16px var(--crm-mono); text-align: center; }
.crm-campana-panel { position: absolute; z-index: 60; top: calc(100% + 8px); right: 0; width: min(420px, calc(100vw - 32px)); max-height: min(70vh, 640px); display: grid; grid-template-rows: auto minmax(0, 1fr); border: 1px solid var(--crm-line-2); background: var(--crm-bg); box-shadow: var(--crm-sombra-capa); animation: crm-campana-entra 160ms var(--crm-curva); }
.crm-campana-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--crm-line-2); color: var(--crm-acento); font: 500 12px/16px var(--crm-mono); letter-spacing: .08em; text-transform: uppercase; }
.crm-campana-dia { color: var(--crm-dim); }
.crm-campana-lista { display: grid; gap: 10px; padding: 12px; overflow: auto; overscroll-behavior: contain; }
.crm-campana-vacio { display: flex; gap: 10px; align-items: baseline; margin: 0; padding: 18px 14px; color: var(--crm-text-2); font: 400 14px/20px var(--crm-sans); }
.crm-campana-vacio span { color: var(--crm-acento); font-family: var(--crm-mono); }
.crm-campana-espera { display: grid; gap: 10px; padding: 12px; }
.crm-campana-espera i { display: block; height: 76px; border: 1px solid var(--crm-line); background: linear-gradient(100deg, transparent 30%, var(--crm-panel-2) 50%, transparent 70%) 0 0 / 300% 100%, var(--crm-panel); animation: crm-campana-brillo 1.4s linear infinite; }
@keyframes crm-campana-entra { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes crm-campana-brillo { from { background-position: 100% 0, 0 0; } to { background-position: -100% 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { .crm-campana-panel, .crm-campana-espera i { animation: none; } .crm-recado-accion span { transition: none; } }
@media (max-width: 480px) { .crm-recado { grid-template-columns: 44px minmax(0, 1fr); } .crm-campana-panel { position: fixed; top: 56px; right: 16px; left: 16px; width: auto; } }

/* ══ Guion vivo: lo que se pregunta mientras se habla ══════════════════
   Firma: la luz roja de estudio «EN EL AIRE» encendida durante la llamada y
   el guion como tarjeta de control con muescas. Lo respondido, en una tira de
   sellos; lo que falta, la pregunta exacta para leerla tal cual. Mismo alto
   que lo que sustituye: las objeciones cambian el cuerpo, no lo alargan. */
.crm-gvivo { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--crm-line); border-left: 2px solid var(--crm-error); background: var(--crm-panel); }
.crm-gvivo[data-estado="colgada"] { border-left-color: var(--crm-line-2); }
.crm-gvivo-cab { display: flex; align-items: center; gap: 10px; min-width: 0; }
.crm-gvivo-aire { display: inline-flex; flex: none; align-items: center; gap: 7px; height: 22px; padding: 0 8px; border: 1px solid var(--crm-error-linea); background: var(--crm-error-suave); color: var(--crm-error); font: 600 11px/14px var(--crm-mono); letter-spacing: .12em; text-transform: uppercase; }
.crm-gvivo-aire i { width: 7px; height: 7px; border-radius: 50%; background: var(--crm-error); animation: crm-gvivo-aire 1.6s ease-in-out infinite; }
.crm-gvivo[data-estado="colgada"] .crm-gvivo-aire { border-color: var(--crm-line); background: transparent; color: var(--crm-dim); }
.crm-gvivo[data-estado="colgada"] .crm-gvivo-aire i { background: var(--crm-line-2); animation: none; }
@keyframes crm-gvivo-aire { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.crm-gvivo-crono { color: var(--crm-text); font: 500 14px/18px var(--crm-mono); font-variant-numeric: tabular-nums; }
.crm-gvivo-muescas { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; cursor: default; }
.crm-gvivo-muescas i { width: 6px; height: 12px; border: 1px solid var(--crm-line-2); transition: background var(--crm-t-color, 160ms) ease, border-color var(--crm-t-color, 160ms) ease; }
.crm-gvivo-muescas i[data-hecha] { border-color: var(--crm-acento); background: var(--crm-acento); }
.crm-gvivo-muescas b { margin-left: 6px; color: var(--crm-text-2); font: 500 12px/16px var(--crm-mono); font-variant-numeric: tabular-nums; }
.crm-gvivo-cambiar { flex: none; height: 24px; padding: 0 8px; border: 1px solid var(--crm-line-2); background: none; color: var(--crm-text-2); font: 500 12px/16px var(--crm-sans); cursor: pointer; }
.crm-gvivo-cambiar[aria-pressed="true"] { border-color: var(--crm-text-2); color: var(--crm-text); }
.crm-gvivo-cambiar:focus-visible, .crm-gvivo-punto:focus-visible, .crm-gvivo-sello:focus-visible, .crm-gvivo-fichas button:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 1px; }
.crm-gvivo-cuerpo, .crm-gvivo-objeciones { display: grid; gap: 6px; min-width: 0; }
.crm-gvivo-apertura { overflow: hidden; margin: 0; color: var(--crm-text-2); font: italic 400 14px/20px var(--crm-sans); text-overflow: ellipsis; white-space: nowrap; }
.crm-gvivo-sellos { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.crm-gvivo-sello { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 7px 0 4px; border: 1px solid var(--crm-acento-linea, var(--crm-acento)); background: var(--crm-acento-suave); color: var(--crm-text); font: 400 12px/16px var(--crm-sans); cursor: pointer; }
.crm-gvivo-sello[data-consta] { border-color: var(--crm-line); background: transparent; color: var(--crm-dim); cursor: help; }
.crm-gvivo-sello svg { width: 11px; height: 11px; fill: none; stroke: var(--crm-acento); stroke-width: 2.6; }
.crm-gvivo-sello[data-consta] svg { stroke: var(--crm-dim); }
.crm-gvivo-sello:not([data-consta]) { animation: crm-gvivo-sello var(--crm-t-pulsar, 180ms) var(--crm-snap, ease-out); }
@keyframes crm-gvivo-sello { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
.crm-gvivo-lista { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.crm-gvivo-punto { display: flex; align-items: center; gap: 8px; width: 100%; height: 28px; padding: 0 6px 0 2px; border: 0; background: none; color: var(--crm-text); font: 400 14px/18px var(--crm-sans); text-align: left; cursor: pointer; }
.crm-gvivo-punto:hover:not(:disabled) { background: var(--crm-panel-2); }
.crm-gvivo-casilla { flex: none; width: 15px; height: 15px; border: 1px solid var(--crm-line-2); }
.crm-gvivo-punto:hover:not(:disabled) .crm-gvivo-casilla { border-color: var(--crm-acento); }
.crm-gvivo-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-gvivo-pista { margin: 0; color: var(--crm-dim); font: 400 13px/18px var(--crm-sans); }
.crm-gvivo-fichas { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.crm-gvivo-fichas button { height: 24px; padding: 0 8px; border: 1px dashed var(--crm-line-2); background: none; color: var(--crm-text-2); font: 400 13px/16px var(--crm-sans); cursor: pointer; }
.crm-gvivo-fichas button::before { content: "«"; }
.crm-gvivo-fichas button::after { content: "»"; }
.crm-gvivo-fichas button[aria-expanded="true"] { border-style: solid; border-color: var(--crm-text-2); color: var(--crm-text); }
.crm-gvivo-respuesta { margin: 0; padding: 6px 10px; border-left: 2px solid var(--crm-acento); background: var(--crm-panel-2); color: var(--crm-text); font: 400 14px/20px var(--crm-sans); }
.crm-gvivo-siguiente { color: var(--crm-acento); font: 500 13px/20px var(--crm-mono); white-space: nowrap; }
.crm-gvivo-cierre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.crm-gvivo-falta { display: grid; flex: 1 1 0; gap: 2px; min-width: 0; margin: 0; color: var(--crm-text-2); font: 400 15px/22px var(--crm-sans); }
.crm-gvivo-falta b { color: var(--crm-text); font-weight: 500; }
.crm-gvivo-regla { color: var(--crm-dim); font: 400 13px/18px var(--crm-sans); }
.crm-gvivo-contar { display: inline-flex; flex: none; align-items: center; gap: 10px; height: 32px; padding: 0 14px; border: 1px solid var(--crm-boton); background: var(--crm-boton); color: var(--crm-boton-tinta); font: 500 14px/18px var(--crm-sans); cursor: pointer; }
.crm-gvivo-contar kbd { padding: 0 5px; border: 1px solid currentColor; font: 500 11px/16px var(--crm-mono); opacity: .7; }
.crm-gvivo-contar:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .crm-gvivo-aire i, .crm-gvivo-sello:not([data-consta]) { animation: none; }
}
/* Una pregunta a la vez: la que toca, a 15 px; el resto, fichas para elegir. */
.crm-gvivo-cuerpo > .crm-gvivo-punto { height: 32px; font-size: 15px; }
.crm-gvivo-cuerpo > .crm-gvivo-punto .crm-gvivo-casilla { width: 16px; height: 16px; border-color: var(--crm-text-2); }
.crm-gvivo-luego { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.crm-gvivo-luego button { height: 24px; padding: 0 7px; border: 1px dashed var(--crm-line-2); background: none; color: var(--crm-text-2); font: 400 12px/16px var(--crm-sans); cursor: pointer; }
.crm-gvivo-luego button:hover { border-color: var(--crm-text-2); color: var(--crm-text); }
.crm-gvivo-luego button:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 1px; }
/* Una objeción abierta: solo ella, con su «‹» para volver a las demás. */
.crm-gvivo-dijo { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--crm-text); font: 500 14px/20px var(--crm-sans); }
.crm-gvivo-otras { display: inline-grid; place-items: center; width: 22px; height: 24px; border: 1px solid var(--crm-line-2); background: none; color: var(--crm-text-2); font: 500 14px/1 var(--crm-mono); cursor: pointer; }
.crm-gvivo-otras:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 1px; }
.crm-gvivo { gap: 6px; padding: 8px 12px; }

/* TarjetaGuion y PastillaOrden/BotonOrden (17-oct-2026). Solo tokens del tema. */

/* ── Tarjeta del guion: perforada, nunca con scroll por dentro ── */
.crm-guion-tarjeta {
  display: flex; flex-direction: column; gap: 10px; min-height: 0;
  padding: 14px 16px; border: 1px solid var(--crm-line); background: var(--crm-panel); color: var(--crm-text);
}
.crm-guion-tarjeta-rotulo {
  display: flex; justify-content: space-between; align-items: baseline;
  font: 500 11px/16px var(--crm-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--crm-dim);
}
.crm-guion-tarjeta-cuenta { font-variant-numeric: tabular-nums; color: var(--crm-text); }
.crm-guion-tarjeta-lista { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; padding: 0; list-style: none; }
.crm-guion-tarjeta-fila {
  position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start;
  padding: 7px 0; border-bottom: 1px dashed var(--crm-line); outline: 0;
}
.crm-guion-tarjeta-fila:focus-visible { box-shadow: inset calc(2 * var(--crm-foco-ancho)) 0 0 var(--crm-acento); }
.crm-guion-tarjeta-agujero {
  width: 14px; height: 14px; margin-top: 2px; border: 1px solid var(--crm-line-2); border-radius: 50%;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.crm-guion-tarjeta-fila[data-hecha] .crm-guion-tarjeta-agujero { background: var(--crm-acento); border-color: var(--crm-acento); transform: scale(1.06); }
.crm-guion-tarjeta-fila[data-siguiente] .crm-guion-tarjeta-agujero { border-color: var(--crm-acento); border-style: dashed; }
.crm-guion-tarjeta-texto { display: grid; gap: 2px; min-width: 0; }
.crm-guion-tarjeta-texto strong { font-size: 13px; line-height: 18px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-guion-tarjeta-fila[data-hecha] strong { color: var(--crm-dim); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--crm-dim) 60%, transparent); }
/* Solo la siguiente pendiente enseña su pregunta; el resto, al pasar el ratón o al enfocar. */
.crm-guion-tarjeta-pregunta { display: none; font-size: 12px; line-height: 16px; color: var(--crm-dim); }
.crm-guion-tarjeta-fila[data-siguiente] .crm-guion-tarjeta-pregunta { display: block; color: var(--crm-text-2, var(--crm-text)); }
.crm-guion-tarjeta-fila:not([data-siguiente]):is(:hover, :focus-visible) .crm-guion-tarjeta-pregunta {
  display: block; position: absolute; z-index: 2; left: 28px; right: 0; top: 100%;
  padding: 8px 10px; border: 1px solid var(--crm-line-2); background: var(--crm-panel); color: var(--crm-text);
}
.crm-guion-tarjeta-estado { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.crm-guion-tarjeta-marcador { display: flex; justify-content: space-between; margin-top: auto; font: 400 12px/16px var(--crm-mono); color: var(--crm-dim); }
.crm-guion-tarjeta-marcador b { font-weight: 500; color: var(--crm-text); font-variant-numeric: tabular-nums; }
.crm-guion-tarjeta-accion > * { width: 100%; }
/* Poco alto: dos columnas y filas más bajas; la pista de la siguiente sigue a todo el ancho. */
@media (max-height: 820px) {
  .crm-guion-tarjeta { gap: 8px; padding: 12px 14px; }
  .crm-guion-tarjeta-lista { grid-template-columns: 1fr 1fr; column-gap: 12px; }
  .crm-guion-tarjeta-fila { padding: 6px 0; }
  .crm-guion-tarjeta-fila[data-siguiente] { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .crm-guion-tarjeta-agujero { transition: none; } }

/* ── Orden hablada ── */
.crm-orden-pastilla {
  position: fixed; left: 50%; bottom: 56px; z-index: 60; transform: translateX(-50%);
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px;
  width: min(560px, calc(100vw - 32px)); padding: 10px 16px 10px 10px;
  border: 1px solid var(--crm-line-2); background: var(--crm-panel); color: var(--crm-text);
  animation: crm-orden-entra 180ms cubic-bezier(.2, .8, .2, 1);
}
.crm-orden-pastilla[data-fase='escuchando'] { border-color: var(--crm-acento); }
.crm-orden-pastilla[data-fase='error'] { border-color: var(--crm-error); }
@keyframes crm-orden-entra { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .crm-orden-pastilla { animation: none; } }
.crm-orden-cuerpo { display: grid; gap: 2px; min-width: 0; }
.crm-orden-rotulo { font: 500 11px/16px var(--crm-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--crm-dim); }
.crm-orden-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; line-height: 22px; }
.crm-orden-accion { margin-left: 10px; font-weight: 500; color: var(--crm-acento); }
.crm-orden-boton {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px;
  border: 1px solid var(--crm-line-2); background: transparent; color: var(--crm-text); cursor: pointer; touch-action: none;
}
.crm-orden-boton kbd { font: 500 11px/1 var(--crm-mono); color: var(--crm-dim); }
.crm-orden-boton:active { border-color: var(--crm-acento); color: var(--crm-acento); }
.crm-orden-boton:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; }

/* PlacaCaracteristicas y PapelBorrador (A3, 17-oct-2026): solo tokens del tema. */
.crm-placatec { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 16px; min-height: 0; overflow: auto; padding: 22px 26px 18px; border: 1px solid var(--crm-line-2);
  background: repeating-linear-gradient(90deg, var(--crm-panel) 0 2px, var(--crm-panel-2) 2px 3px); }
.crm-placatec-remache { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--crm-line-2); box-shadow: inset 1px 1px 0 var(--crm-bg); }
.crm-placatec-remache[data-p="1"] { top: 9px; left: 9px; } .crm-placatec-remache[data-p="2"] { top: 9px; right: 9px; }
.crm-placatec-remache[data-p="3"] { bottom: 9px; left: 9px; } .crm-placatec-remache[data-p="4"] { bottom: 9px; right: 9px; }
.crm-placatec-cabeza { display: grid; gap: 4px; }
.crm-placatec-rotulo { font: 500 11px/16px var(--crm-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--crm-dim); }
.crm-placatec-titulo { margin: 0; font: 600 22px/1.2 var(--crm-sans); letter-spacing: -.01em; color: var(--crm-text); }
.crm-placatec-meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font: 400 13px/20px var(--crm-mono); color: var(--crm-text-2); }
.crm-placatec-meta a { display: inline-flex; align-items: center; gap: 4px; color: var(--crm-text); text-decoration: underline; text-underline-offset: 3px; }
.crm-placatec-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; align-content: start; }
.crm-placatec-celda { display: grid; gap: 6px; align-content: start; padding: 12px 14px; border: 1px solid var(--crm-line); background: var(--crm-bg); min-height: 74px; }
.crm-placatec-celda[data-estado="consta"] { min-height: 0; background: transparent; border-color: transparent; border-bottom: 1px solid var(--crm-line); padding: 8px 2px; }
.crm-placatec-celda[data-estado="consta"] .crm-placatec-valor { font: 500 14px/20px var(--crm-mono); overflow-wrap: anywhere; }
.crm-placatec-celda[data-estado="hueco"] { border-style: dashed; background: transparent; }
.crm-placatec-celda[data-estado="aprobado"] { border-color: var(--crm-acento); }
.crm-placatec-celda[data-estado="descartado"] { opacity: .55; }
.crm-placatec-celda-rotulo { font: 500 11px/16px var(--crm-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--crm-dim); }
.crm-placatec-hueco { font: 400 13px/18px var(--crm-mono); color: var(--crm-dim); font-style: italic; }
.crm-placatec-valor { font: 600 18px/22px var(--crm-mono); font-variant-numeric: tabular-nums; color: var(--crm-text); }
.crm-placatec-fuente { margin: 0; padding: 8px 10px; border: 1px solid var(--crm-line-2); border-left: 3px solid var(--crm-acento); background: var(--crm-panel); }
.crm-placatec-fuente[data-tipo="otra"] { border-left-color: var(--crm-aviso); }
.crm-placatec-fuente figcaption { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 500 12px/16px var(--crm-mono); }
.crm-placatec-fuente figcaption a { color: var(--crm-text); text-decoration: underline; text-underline-offset: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-placatec-sello { padding: 1px 6px; border: 1px solid var(--crm-acento); font: 500 10px/14px var(--crm-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--crm-acento); }
.crm-placatec-fuente[data-tipo="otra"] .crm-placatec-sello { border-color: var(--crm-aviso); color: var(--crm-aviso); }
.crm-placatec-fuente blockquote { margin: 6px 0 0; font: 400 12px/18px var(--crm-sans); color: var(--crm-text-2); max-height: 72px; overflow: auto; }
.crm-placatec-acciones { display: flex; gap: 6px; }
.crm-placatec-nota { font: 400 12px/18px var(--crm-mono); color: var(--crm-dim); }
.crm-placatec-celda[data-estado="aprobado"] .crm-placatec-nota { color: var(--crm-acento); }
.crm-placatec-celda[data-estado="error"] .crm-placatec-nota { color: var(--crm-error); }
.crm-placatec-pie { display: grid; gap: 8px; padding-top: 12px; border-top: 1px dashed var(--crm-line-2); }
@media (prefers-reduced-motion: no-preference) { .crm-placatec-celda { transition: border-color .2s ease, opacity .2s ease; } }

.crm-papel-borrador { position: relative; padding: 18px 18px 14px 34px; border: 1px solid var(--crm-line-2); background: var(--crm-bg);
  background-image: linear-gradient(90deg, transparent 22px, var(--crm-line) 22px, var(--crm-line) 23px, transparent 23px); }
.crm-papel-borrador-sello { position: absolute; top: -10px; right: 14px; padding: 2px 8px; border: 1px dashed var(--crm-aviso); background: var(--crm-panel); font: 500 10px/14px var(--crm-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--crm-aviso); transform: rotate(-2deg); }
.crm-papel-borrador-texto { width: 100%; resize: vertical; min-height: 180px; border: 0; background: transparent; font: 400 15px/24px var(--crm-sans); color: var(--crm-text); outline: none; }
.crm-papel-borrador-texto:focus-visible { box-shadow: inset 0 calc(-1 * var(--crm-foco-ancho)) 0 var(--crm-acento); }

/* ══ DecisionComercial: ¿cómo queda este contacto? ═════════════════════
   Firma: la casilla numerada del albarán. Al elegir, el número deja paso a
   un trazo de bolígrafo que se dibuja una vez y se sale un poco de la caja,
   como en el papel. Cuatro decisiones de 48 (táctiles), dos columnas desde
   440 de contenedor, una debajo. Nada se corta: los textos refluyen. */
.crm-decision,
.crm-decision *,
.crm-decision ::before,
.crm-decision ::after { box-sizing: border-box; }
.crm-decision { display: grid; gap: 8px; min-width: 0; container: crm-decision / inline-size; }
.crm-decision-pregunta { margin: 0; color: var(--crm-text); font: 500 13px/20px var(--crm-sans); }
.crm-decision-opciones { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@container crm-decision (min-width: 440px) {
  .crm-decision-opciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.crm-decision-opcion {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 48px;
  margin: 0;
  padding: 4px 12px;
  border: 1px solid var(--crm-line-2);
  border-radius: 0;
  background: var(--crm-panel);
  color: var(--crm-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--crm-t-color) ease-out, border-color var(--crm-t-color) ease-out;
}
@media (hover: hover) {
  .crm-decision-opcion:hover:not(:disabled, [aria-disabled="true"]) { background: var(--crm-panel-2); transition-duration: 0ms; }
}
.crm-decision-opcion:active:not(:disabled, [aria-disabled="true"]) { transform: translateY(.5px); }
.crm-decision-opcion:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; }
.crm-decision-opcion[aria-pressed="true"] { background: var(--crm-panel-3); }
.crm-decision-opcion[aria-pressed="true"]::before { content: ""; position: absolute; inset: -1px auto -1px -1px; width: 2px; background: var(--crm-acento); }

.crm-decision-casilla { position: relative; display: grid; flex: none; place-items: center; width: 24px; height: 24px; border: 1px solid var(--crm-line-2); }
.crm-decision-numero { color: var(--crm-text-2); font: 400 12px/16px var(--crm-mono); font-variant-numeric: tabular-nums; }
.crm-decision-opcion[aria-pressed="true"] .crm-decision-casilla { border-color: var(--crm-text); }
.crm-decision-opcion[aria-pressed="true"] .crm-decision-numero { visibility: hidden; }
.crm-decision-marca {
  position: absolute;
  top: -6px;
  left: -2px;
  width: 32px;
  height: 32px;
  overflow: visible;
  fill: none;
  stroke: var(--crm-text);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  animation: crm-decision-traza calc(var(--crm-t-dibujo) / 2) var(--crm-curva) both;
}
@keyframes crm-decision-traza { from { stroke-dashoffset: 1; } }

.crm-decision-texto { display: grid; min-width: 0; }
.crm-decision-nombre { color: var(--crm-text); font: 500 15px/20px var(--crm-sans); overflow-wrap: anywhere; }
.crm-decision-ayuda { color: var(--crm-muted); font: 400 12px/16px var(--crm-sans); overflow-wrap: anywhere; }

/* Deshabilitada: contorno apagado, sin opacidad global. */
.crm-decision-opcion:disabled { border-color: var(--crm-linea-apagada); background: transparent; cursor: not-allowed; }
.crm-decision-opcion:disabled :is(.crm-decision-nombre, .crm-decision-ayuda, .crm-decision-numero) { color: var(--crm-dim); }
.crm-decision-opcion:disabled .crm-decision-casilla { border-color: var(--crm-linea-apagada); }

/* Guardando: quieta; la elegida lleva el filo de luz en su pie. */
.crm-decision-opcion[aria-disabled="true"] { cursor: progress; }
.crm-decision[data-ocupado] .crm-decision-opcion:not([aria-pressed="true"]) :is(.crm-decision-nombre, .crm-decision-ayuda) { color: var(--crm-dim); }
.crm-decision-opcion[data-guardando]::after {
  content: "";
  position: absolute;
  inset: auto -1px -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--crm-acento) 50%, transparent) no-repeat;
  background-size: 40% 100%;
  background-position: -40% 0;
  animation: crm-filo-continuo var(--crm-t-filo) var(--crm-curva) infinite;
}

.crm-decision-error { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 6px 12px; border-left: 2px solid var(--crm-error); background: var(--crm-error-suave); color: var(--crm-text); font: 400 13px/20px var(--crm-sans); }
.crm-decision-error svg { flex: none; width: 14px; height: 14px; margin-top: 3px; color: var(--crm-error); }

@media (prefers-reduced-motion: reduce) {
  .crm-decision-opcion { transition: none; }
  .crm-decision-opcion:active:not(:disabled, [aria-disabled="true"]) { transform: none; }
  .crm-decision-marca { animation: none; }
  .crm-decision-opcion[data-guardando]::after { animation: none; background-position: 50% 0; }
}
@media (forced-colors: active) {
  .crm-decision-opcion[aria-pressed="true"]::before { background: Highlight; }
  .crm-decision-marca { stroke: CanvasText; }
}

/* ══ FichaModal · contenidoAccesible (opt-in) ═════════════════════════
   Nada se recorta: la cabecera (quién y su acción) queda fija y el cuerpo
   es la región que desplaza, enfocable con teclado. Solo con el atributo;
   la ficha de siempre no cambia. */
.crm-modal.crm-ficha-modal[data-contenido-accesible] .crm-ficha-modal-cab { gap: 12px; padding: 12px 24px 16px; }
.crm-modal.crm-ficha-modal[data-contenido-accesible] .crm-modal-titulo.crm-ficha-modal-titulo { font-size: 28px; line-height: 32px; }
.crm-modal.crm-ficha-modal[data-contenido-accesible] .crm-ficha-modal-meta { font-size: 14px; line-height: 20px; }
.crm-modal.crm-ficha-modal[data-contenido-accesible] .crm-modal-cuerpo.crm-ficha-modal-cuerpo { overflow-y: auto; scrollbar-gutter: stable; }
.crm-modal.crm-ficha-modal[data-contenido-accesible] .crm-modal-cuerpo.crm-ficha-modal-cuerpo:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: -2px; }
.crm-modal.crm-ficha-modal[data-contenido-accesible] .crm-ficha-modal-columnas { align-items: start; }
/* Poco alto (zoom 150 %, apaisado): la cabecera nunca tapa ni recorta; si no cabe, desplaza ella sola. */
@media (max-height: 560px) {
  .crm-modal.crm-ficha-modal[data-contenido-accesible] .crm-ficha-modal-cab { max-height: 50vh; overflow-y: auto; }
  .crm-modal.crm-ficha-modal[data-contenido-accesible] .crm-modal-cuerpo.crm-ficha-modal-cuerpo { padding: 16px 24px; }
}
@media (max-width: 600px) {
  .crm-modal.crm-ficha-modal[data-contenido-accesible] .crm-ficha-modal-cab { padding: 8px 16px 12px; }
  .crm-modal.crm-ficha-modal[data-contenido-accesible] .crm-modal-titulo.crm-ficha-modal-titulo { font-size: 24px; line-height: 28px; }
  .crm-modal.crm-ficha-modal[data-contenido-accesible] .crm-modal-cuerpo.crm-ficha-modal-cuerpo { padding: 16px; }
}

/* Lámina de oficio: hover y foco forzados en la primera decisión (solo catálogo). */
[data-crm-forzar="hover"] > .crm-decision .crm-decision-opcion:first-child { background: var(--crm-panel-2); }
[data-crm-forzar="foco"] > .crm-decision .crm-decision-opcion:first-child { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; }

/* RespuestaCriterium (17-oct-2026): la respuesta con sus sellos de fuente. */
.crm-respuesta { font: 400 16px/1.55 var(--crm-sans); color: var(--crm-text); }
.crm-respuesta p { margin: 0 0 10px; }
.crm-respuesta > :last-child { margin-bottom: 0; }
.crm-respuesta ul { margin: 0 0 10px; padding: 0; list-style: none; }
.crm-respuesta ul > li { position: relative; margin: 3px 0; padding-left: 16px; }
.crm-respuesta ul > li::before { content: "–"; position: absolute; left: 0; color: var(--crm-acento); }
.crm-respuesta strong { font-weight: 500; color: var(--crm-text); }
.crm-respuesta .crm-respuesta__pregunta { margin: 0 0 12px; font: 500 13px/1.4 var(--crm-mono); color: var(--crm-dim); }
.crm-respuesta__pregunta::before { content: "› "; color: var(--crm-acento); }
.crm-respuesta__cita {
  display: inline-flex; align-items: center; height: 20px; margin: 0 2px; padding: 0 6px; vertical-align: 1px;
  border: 1px solid var(--crm-line-2, var(--crm-line)); border-top-color: var(--crm-acento);
  background: var(--crm-bg); color: var(--crm-text);
  font: 500 10px/1 var(--crm-mono); letter-spacing: 0.08em; text-transform: uppercase;
}
button.crm-respuesta__cita { cursor: pointer; }
button.crm-respuesta__cita:hover { border-color: var(--crm-acento); }
button.crm-respuesta__cita:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 1px; }
.crm-respuesta .crm-respuesta__pensando { color: var(--crm-dim); font: 400 13px/1.4 var(--crm-mono); }
.crm-respuesta .crm-respuesta__aviso { margin: 10px 0 0; padding: 6px 10px; border-left: 2px solid var(--crm-aviso, var(--crm-acento)); font: 400 13.5px/1.45 var(--crm-sans); color: var(--crm-text-2, var(--crm-dim)); }
@media (prefers-reduced-motion: no-preference) {
  .crm-respuesta[data-pensando] .crm-respuesta__pensando { animation: crm-respuesta-late 1.4s ease-in-out infinite; }
}
@keyframes crm-respuesta-late { 50% { opacity: 0.45; } }

/* ══ Expediente comercial: la mesa en el centro de la ficha ════════════
   Situación en una línea, dos objetos reales sobre la mesa (el presupuesto
   como papel, la próxima llamada como hoja de taco), la pregunta y la tira.
   Sin cajas dentro de cajas: el expediente no lleva marco; solo los objetos.
   Firmas: pestaña de carpeta (expediente), matasellos (presupuesto), hoja de
   taco (cita), pliegos (tira), casilla marcada (trámite). */
:where(.crm-expediente, .crm-docp, .crm-cita, .crm-elegir-cita, .crm-tira, .crm-tramite),
:where(.crm-expediente, .crm-docp, .crm-cita, .crm-elegir-cita, .crm-tira, .crm-tramite) *,
:where(.crm-expediente, .crm-docp, .crm-cita, .crm-elegir-cita, .crm-tira, .crm-tramite) ::before,
:where(.crm-expediente, .crm-docp, .crm-cita, .crm-elegir-cita, .crm-tira, .crm-tramite) ::after { box-sizing: border-box; }

.crm-expediente { display: grid; gap: 16px; min-width: 0; container: crm-expediente / inline-size; }

/* Canto y pestaña: la necesidad asoma sobre el filete del expediente. */
.crm-expediente-canto { display: flex; align-items: flex-end; min-height: 1px; border-bottom: 1px solid var(--crm-line-2); }
.crm-expediente-pestana {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  max-width: 100%;
  min-height: 28px;
  margin: 0 0 -1px 12px;
  padding: 4px 16px 4px;
  border: 1px solid var(--crm-line-2);
  border-bottom-color: var(--crm-panel);
  background: var(--crm-panel);
  clip-path: polygon(0 100%, 0 6px, 6px 0, calc(100% - 6px) 0, 100% 6px, 100% 100%);
}
.crm-expediente-pestana-rotulo { color: var(--crm-dim); font: 400 11px/16px var(--crm-mono); letter-spacing: .06em; text-transform: uppercase; }
.crm-expediente-pestana-nombre { min-width: 0; color: var(--crm-text); font: 500 13px/20px var(--crm-sans); overflow-wrap: anywhere; }
.crm-expediente-pestana-ref { color: var(--crm-text-2); font: 400 12px/16px var(--crm-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Situación: la lámpara de tono y una frase; el responsable, aparte. */
.crm-expediente-situacion { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.crm-expediente-lampara { flex: none; width: 8px; height: 8px; border: 1px solid var(--crm-text-2); }
.crm-expediente[data-tono="falta"] .crm-expediente-lampara { border-color: var(--crm-aviso); background: var(--crm-aviso); }
.crm-expediente[data-tono="vencida"] .crm-expediente-lampara { border-color: var(--crm-error); background: var(--crm-error); }
.crm-expediente[data-tono="al-dia"] .crm-expediente-lampara { border-color: var(--crm-acento); background: var(--crm-acento); }
.crm-expediente[data-tono="cerrada"] .crm-expediente-lampara { border-color: var(--crm-dim); background: transparent; }
.crm-expediente-estado { flex: 1 1 240px; min-width: 0; margin: 0; color: var(--crm-text); font: 500 15px/20px var(--crm-sans); overflow-wrap: anywhere; }
.crm-expediente-detalle { color: var(--crm-text-2); font-weight: 400; }
.crm-expediente-lleva { flex: none; color: var(--crm-text-2); font: 400 13px/20px var(--crm-sans); }
.crm-expediente-lleva b { color: var(--crm-text); font-weight: 500; }
.crm-expediente-lleva[data-sin] { color: var(--crm-aviso); }

/* La mesa: dos objetos con el mismo alto, uno al lado del otro desde 560. */
.crm-expediente-mesa { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@container crm-expediente (min-width: 560px) {
  .crm-expediente-mesa { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.crm-expediente-decision, .crm-expediente-tramite, .crm-expediente-historial { min-width: 0; }
.crm-expediente-historial { padding-top: 4px; }

/* Elegir necesidad: las necesidades como lengüetas para elegir. */
.crm-expediente-eleccion { display: grid; gap: 8px; }
.crm-expediente-eleccion-titulo { margin: 0; color: var(--crm-text); font: 500 13px/20px var(--crm-sans); }
.crm-expediente-eleccion-opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.crm-expediente-eleccion-opcion { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 16px; border: 1px solid var(--crm-line-2); border-radius: 0; background: var(--crm-panel); color: var(--crm-text); font: 500 14px/20px var(--crm-sans); cursor: pointer; transition: background-color var(--crm-t-color) ease-out; }
@media (hover: hover) { .crm-expediente-eleccion-opcion:hover { background: var(--crm-panel-2); transition-duration: 0ms; } }
.crm-expediente-eleccion-opcion:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; }

/* ══ DocumentoPresupuesto: el papel y su matasellos ═════════════════════ */
.crm-docp, .crm-cita { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 8px; min-width: 0; padding: 12px 16px 12px; border: 1px solid var(--crm-line-2); background: var(--crm-panel-2); }
.crm-docp-rotulo, .crm-cita-rotulo { color: var(--crm-dim); font: 400 11px/16px var(--crm-mono); letter-spacing: .06em; text-transform: uppercase; }
/* La esquina doblada del papel. */
.crm-docp::after { content: ""; position: absolute; top: -1px; right: -1px; width: 16px; height: 16px; background: linear-gradient(225deg, var(--crm-bg) 50%, var(--crm-line-2) 50%, var(--crm-line-2) calc(50% + 1px), var(--crm-panel-3) calc(50% + 1px)); }
.crm-docp { container: crm-docp / inline-size; }
.crm-docp-papel { position: relative; display: grid; align-content: start; gap: 2px; min-height: 64px; padding-right: 72px; }
.crm-docp:is([data-estado="falta"], [data-estado="cerrado"]) .crm-docp-papel { padding-right: 0; align-content: center; justify-items: start; gap: 4px; }
.crm-docp-numero { color: var(--crm-text-2); font: 400 12px/16px var(--crm-mono); font-variant-numeric: tabular-nums; }
.crm-docp-importe { display: flex; align-items: baseline; gap: 4px; color: var(--crm-text); font: 500 28px/32px var(--crm-sans); font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
.crm-docp-unidad { color: var(--crm-muted); font: 400 16px/20px var(--crm-sans); }
.crm-docp-titulo { color: var(--crm-text); font: 500 15px/20px var(--crm-sans); }
.crm-docp-linea { color: var(--crm-text-2); font: 400 13px/20px var(--crm-sans); }
.crm-docp-accion { justify-self: start; }

/* Matasellos de envío: doble círculo, «ENVIADO» arriba y el día en el centro. */
.crm-docp-matasellos {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  grid-template-rows: auto auto auto;
  place-items: center;
  align-content: center;
  width: 64px;
  height: 64px;
  border: 1px solid var(--crm-acento);
  border-radius: 50%;
  outline: 1px solid var(--crm-acento-linea);
  outline-offset: 2px;
  color: var(--crm-acento);
  transform: rotate(-12deg);
  animation: crm-docp-sello calc(var(--crm-t-dibujo) / 2) var(--crm-snap) both;
}
.crm-docp-matasellos-texto { font: 400 11px/12px var(--crm-mono); letter-spacing: .06em; text-transform: uppercase; }
.crm-docp-matasellos-dia { font: 500 20px/20px var(--crm-mono); font-variant-numeric: tabular-nums; }
.crm-docp-matasellos-mes { font: 400 11px/12px var(--crm-mono); letter-spacing: .06em; text-transform: uppercase; }
@keyframes crm-docp-sello { from { opacity: 0; transform: rotate(-12deg) scale(1.15); } }

/* Falta enviar: sello de caucho rectangular en aviso, con los días que lleva pedido. */
.crm-docp-sello {
  justify-self: start;
  margin: 8px 0 8px 4px;
  display: grid;
  justify-items: center;
  gap: 0;
  padding: 4px 8px;
  border: 1px solid var(--crm-aviso);
  outline: 1px solid var(--crm-aviso-linea);
  outline-offset: 2px;
  color: var(--crm-aviso);
  transform: rotate(-6deg);
}
.crm-docp-sello > span { font: 500 11px/16px var(--crm-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.crm-docp-sello small { font: 400 11px/16px var(--crm-mono); white-space: nowrap; }
.crm-docp[data-estado="falta"] { border-left: 2px solid var(--crm-aviso); }


/* Sin pedir: el pliego en contorno de puntos y bajo, sin esquina. */
.crm-docp[data-estado="sin-pedir"] { border-style: dashed; background: transparent; }
.crm-docp[data-estado="sin-pedir"]::after { display: none; }
.crm-docp[data-estado="sin-pedir"] .crm-docp-papel, .crm-docp[data-estado="cerrado"] .crm-docp-papel { padding-right: 0; }
.crm-docp[data-estado="sin-pedir"] .crm-docp-titulo { color: var(--crm-text-2); }

/* Cerrado: tachado en diagonal. */
.crm-docp[data-estado="cerrado"] { background: transparent; }
.crm-docp[data-estado="cerrado"] .crm-docp-titulo { color: var(--crm-text-2); }
.crm-docp-sello[data-tono="neutro"] { border-color: var(--crm-text-2); outline-color: var(--crm-line-2); color: var(--crm-text-2); transform: rotate(-3deg); }

/* ══ CitaLlamada: la hoja de taco ═══════════════════════════════════════ */
.crm-cita-cuerpo { display: flex; align-items: center; gap: 16px; min-width: 0; }
.crm-cita-hoja { display: grid; flex: none; grid-template-rows: 20px 32px 16px; justify-items: center; width: 64px; padding-bottom: 4px; border: 1px solid var(--crm-line-2); border-bottom: 2px dotted var(--crm-text-2); background: var(--crm-panel); }
.crm-cita-banda { position: relative; display: grid; place-items: end center; width: 100%; height: 20px; background: var(--crm-text-2); color: var(--crm-panel); }
.crm-cita-banda i { position: absolute; top: -6px; width: 6px; height: 12px; border: 1px solid var(--crm-text-2); background: var(--crm-bg); }
.crm-cita-banda i:first-child { left: 14px; }
.crm-cita-banda i:nth-child(2) { right: 14px; }
.crm-cita-mes { font: 500 11px/16px var(--crm-mono); letter-spacing: .06em; text-transform: uppercase; }
.crm-cita-dia { color: var(--crm-text); font: 500 28px/32px var(--crm-sans); font-variant-numeric: tabular-nums; }
.crm-cita-semana { color: var(--crm-text-2); font: 400 11px/16px var(--crm-mono); }
.crm-cita-texto { display: grid; gap: 2px; min-width: 0; }
.crm-cita-hora { color: var(--crm-text); font: 500 28px/32px var(--crm-mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.crm-cita-cuando { font: 500 13px/20px var(--crm-sans); white-space: nowrap; }
.crm-cita-tipo { color: var(--crm-text-2); font: 400 13px/20px var(--crm-sans); }
.crm-cita-relativo { color: var(--crm-text); font-weight: 500; }
.crm-cita-falta { color: var(--crm-text-2); font: 500 15px/20px var(--crm-sans); }
.crm-cita-nota { color: var(--crm-muted); font: 400 12px/16px var(--crm-sans); overflow-wrap: anywhere; }
.crm-cita-accion { justify-self: start; }
.crm-cita[data-estado="vencida"] { border-left: 2px solid var(--crm-error); }
.crm-cita[data-estado="vencida"] .crm-cita-banda { background: var(--crm-error); color: var(--crm-panel); }
.crm-cita[data-estado="vencida"] .crm-cita-relativo { color: var(--crm-error); }
.crm-cita[data-estado="sin-programar"] { border-style: dashed; background: transparent; }
.crm-cita[data-estado="sin-programar"] .crm-cita-hoja { border-style: dashed; background: transparent; }
.crm-cita[data-estado="sin-programar"] .crm-cita-banda, .crm-cita[data-estado="no-aplica"] .crm-cita-banda { background: var(--crm-line-2); }
.crm-cita[data-estado="no-aplica"] { background: transparent; }
.crm-cita[data-estado="no-aplica"] .crm-cita-hoja { border-style: dashed; background: transparent; }

/* Mini (vista previa): la hoja de 48, sin marco alrededor. */
.crm-cita[data-tamano="mini"] { grid-template-rows: auto; padding: 0; border: 0; background: transparent; }
.crm-cita[data-tamano="mini"] .crm-cita-cuerpo { gap: 12px; }
.crm-cita[data-tamano="mini"] .crm-cita-hoja { grid-template-rows: 16px 24px 16px; width: 56px; }
.crm-cita[data-tamano="mini"] .crm-cita-banda { height: 16px; }
.crm-cita[data-tamano="mini"] .crm-cita-mes { font-size: 11px; line-height: 12px; }
.crm-cita[data-tamano="mini"] .crm-cita-dia { font-size: 20px; line-height: 24px; }
.crm-cita[data-tamano="mini"] .crm-cita-hora { font-size: 20px; line-height: 24px; }
.crm-cita[data-tamano="mini"][data-estado="vencida"] { border: 0; }

/* ══ ElegirCita: atajos, día y hora, y la hoja viva ═════════════════════ */
.crm-elegir-cita { min-width: 0; container: crm-elegir-cita / inline-size; }
.crm-elegir-cita-rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.crm-elegir-cita-previa { display: none; }
@container crm-elegir-cita (min-width: 560px) {
  .crm-elegir-cita-rejilla { grid-template-columns: minmax(0, 1fr) 160px; }
  .crm-elegir-cita-previa { display: grid; padding: 12px 0 0 16px; border-left: 1px solid var(--crm-line); }
}
.crm-elegir-cita-controles { display: grid; gap: 12px; min-width: 0; }
.crm-elegir-cita-atajos { display: flex; flex-wrap: wrap; gap: 8px; }
.crm-elegir-cita-atajo { display: grid; justify-items: start; min-height: 44px; padding: 4px 12px; border: 1px solid var(--crm-line-2); border-radius: 0; background: var(--crm-panel); color: var(--crm-text); text-align: left; cursor: pointer; transition: background-color var(--crm-t-color) ease-out; }
@media (hover: hover) { .crm-elegir-cita-atajo:hover:not(:disabled) { background: var(--crm-panel-2); transition-duration: 0ms; } }
.crm-elegir-cita-atajo:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; }
.crm-elegir-cita-atajo[aria-pressed="true"] { position: relative; background: var(--crm-panel-3); }
.crm-elegir-cita-atajo[aria-pressed="true"]::before { content: ""; position: absolute; inset: -1px auto -1px -1px; width: 2px; background: var(--crm-acento); }
.crm-elegir-cita-atajo:disabled { border-color: var(--crm-linea-apagada); color: var(--crm-dim); cursor: not-allowed; }
.crm-elegir-cita-atajo-nombre { font: 500 13px/20px var(--crm-sans); }
.crm-elegir-cita-atajo-dia { color: var(--crm-text-2); font: 400 11px/16px var(--crm-mono); font-variant-numeric: tabular-nums; }

/* ══ TiraHistorial: pliegos y hechos ════════════════════════════════════ */
.crm-tira { display: grid; gap: 8px; min-width: 0; }
.crm-tira-cab { display: flex; align-items: baseline; gap: 8px; }
.crm-tira-titulo { margin: 0; color: var(--crm-dim); font: 400 11px/16px var(--crm-mono); letter-spacing: .06em; text-transform: uppercase; }
.crm-tira-cuenta { color: var(--crm-text-2); font: 400 12px/16px var(--crm-mono); font-variant-numeric: tabular-nums; }
.crm-tira-vacio { margin: 0; color: var(--crm-text-2); font: 400 13px/20px var(--crm-sans); }
.crm-tira-pliegos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.crm-tira-pliego { display: inline-flex; align-items: center; gap: 8px; max-width: 320px; min-height: 40px; padding: 4px 12px 4px 4px; border: 1px solid var(--crm-line-2); background: var(--crm-panel); color: var(--crm-text); text-decoration: none; transition: background-color var(--crm-t-color) ease-out; }
a.crm-tira-pliego:focus-visible { outline: var(--crm-foco-ancho) solid var(--crm-acento); outline-offset: 2px; }
@media (hover: hover) { a.crm-tira-pliego:hover { background: var(--crm-panel-2); transition-duration: 0ms; } }
.crm-tira-pliego-tipo { position: relative; display: grid; flex: none; place-items: end center; width: 24px; height: 32px; padding-bottom: 4px; border: 1px solid var(--crm-line-2); background: var(--crm-panel-2); color: var(--crm-text-2); font: 500 11px/12px var(--crm-mono); clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); }
.crm-tira-pliego-tipo::after { content: ""; position: absolute; top: -1px; right: -1px; width: 8px; height: 8px; background: linear-gradient(225deg, transparent 50%, var(--crm-line-2) 50%); }
.crm-tira-pliego-texto { display: grid; min-width: 0; }
.crm-tira-pliego-titulo { overflow: hidden; font: 500 13px/16px var(--crm-sans); text-overflow: ellipsis; white-space: nowrap; }
.crm-tira-pliego-fecha { color: var(--crm-text-2); font: 400 11px/16px var(--crm-mono); }
.crm-tira-hechos { display: grid; margin: 0; padding: 0; list-style: none; }
.crm-tira-hecho { display: grid; grid-template-columns: 104px 16px minmax(0, 1fr); gap: 8px; align-items: baseline; min-height: 36px; padding: 8px 0; border-top: 1px solid var(--crm-line); }
.crm-tira-cuando { color: var(--crm-text-2); font: 400 12px/20px var(--crm-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.crm-tira-cuando span { color: var(--crm-dim); }
.crm-tira-icono { display: grid; place-items: center; align-self: center; color: var(--crm-text-2); }
.crm-tira-texto { min-width: 0; color: var(--crm-text); font: 400 13px/20px var(--crm-sans); overflow-wrap: anywhere; }
.crm-tira-hecho-titulo { font-weight: 500; }
.crm-tira-autor { color: var(--crm-text-2); }
.crm-tira-detalle { display: block; color: var(--crm-text-2); }
.crm-tira-mas { justify-self: start; }
@container crm-expediente (max-width: 439px) {
  .crm-tira-hecho { grid-template-columns: 16px minmax(0, 1fr); }
  .crm-tira-cuando { grid-column: 2; }
  .crm-tira-icono { grid-row: 1; grid-column: 1; }
  .crm-tira-texto { grid-column: 2; }
}

/* ══ TramiteFicha: un trámite, un botón ═════════════════════════════════ */
.crm-tramite { display: grid; gap: 16px; min-width: 0; padding: 16px 16px 0; border: 1px solid var(--crm-line-2); border-top: 2px solid var(--crm-text-2); background: var(--crm-panel); }
.crm-tramite[data-decision="discarded"] { border-top-color: var(--crm-error); }
.crm-tramite-cab { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 12px; }
.crm-tramite-casilla { position: relative; display: grid; flex: none; place-items: center; width: 32px; height: 32px; margin-top: -4px; border: 1px solid var(--crm-text); }
.crm-tramite-casilla > span { visibility: hidden; font: 400 12px/16px var(--crm-mono); }
.crm-tramite-casilla svg { position: absolute; top: -8px; left: -4px; width: 44px; height: 44px; overflow: visible; fill: none; stroke: var(--crm-text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; animation: crm-decision-traza calc(var(--crm-t-dibujo) / 2) var(--crm-curva) both; }
.crm-tramite-titulos { display: grid; flex: 1 1 200px; gap: 2px; min-width: 0; }
.crm-tramite-titulo { margin: 0; color: var(--crm-text); font: 500 20px/24px var(--crm-sans); letter-spacing: -.01em; }
.crm-tramite-descripcion { margin: 0; color: var(--crm-text-2); font: 400 13px/20px var(--crm-sans); }
.crm-tramite-volver { flex: none; }
/* «‹ Volver a la ficha» (opt-in `volver`): fila de 28 sobre el título; el chevrón cae en la guía del título (−8 del relleno del fantasma) y la fila sube a 8 del filete. */
.crm-tramite > .crm-tramite-regreso { justify-self: start; margin: -8px 0 -4px -8px; }
.crm-tramite-cuerpo { display: grid; gap: 16px; min-width: 0; }
.crm-tramite[data-decision] .crm-tramite-cuerpo { padding-left: 44px; }
.crm-tramite-pie { display: grid; gap: 8px; margin: 0 -16px; padding: 12px 16px; border-top: 1px solid var(--crm-line); background: var(--crm-panel); }
section.crm-tramite { padding-bottom: 16px; }
/* Dentro de la ficha, el pie no se va al desplazar: Guardar siempre a la vista. */
/* El cuerpo de la ficha tiene 24 de relleno (16 en estrecho): el pie se pega al borde visible, no al relleno. */
.crm-ficha-modal-cuerpo .crm-tramite-pie { position: sticky; bottom: -24px; z-index: 1; padding-bottom: 24px; }
@media (max-width: 600px) {
  .crm-ficha-modal-cuerpo .crm-tramite-pie { bottom: -16px; padding-bottom: 16px; }
}
/* Poco alto (zoom 150–200 %): el pie fijo taparía los campos; va en su sitio. */
@media (max-height: 560px) {
  .crm-ficha-modal-cuerpo .crm-tramite-pie { position: static; }
}
.crm-tramite-botones { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.crm-tramite-cancelar { margin-right: auto; }
.crm-tramite-nota { color: var(--crm-text-2); font: 400 12px/16px var(--crm-sans); }
.crm-tramite-error { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 4px 12px; border-left: 2px solid var(--crm-error); background: var(--crm-error-suave); color: var(--crm-text); font: 400 13px/20px var(--crm-sans); }
.crm-tramite-error svg { flex: none; margin-top: 3px; color: var(--crm-error); }
@container crm-expediente (max-width: 439px) {
  .crm-tramite[data-decision] .crm-tramite-cuerpo { padding-left: 0; }
}

/* DecisionComercial en fila: las cuatro en una línea desde 720. */
@container crm-decision (min-width: 720px) {
  .crm-decision[data-disposicion="fila"] .crm-decision-opciones { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ══ FichaModal · huella «contenido» (opt-in) ═══════════════════════════ */
.crm-modal.crm-ficha-modal[data-huella="contenido"]:not([data-completa]) {
  --crm-modal-ancho: min(1120px, 92vw);
  display: flex;
  flex-direction: column;
  width: min(1120px, 92vw);
  height: auto;
  max-height: min(88vh, 880px);
}
.crm-modal.crm-ficha-modal[data-huella="contenido"] > .crm-ficha-modal-cab { flex: none; }
.crm-modal.crm-ficha-modal[data-huella="contenido"] > .crm-ficha-modal-cuerpo { flex: 1 1 auto; min-height: 0; }
@container crm-ficha-modal (min-width: 840px) {
  .crm-modal.crm-ficha-modal[data-huella="contenido"] .crm-ficha-modal-columnas[data-con-hechos] { grid-template-columns: minmax(0, 1.9fr) minmax(280px, 1fr); }
}
@media (max-width: 600px) {
  .crm-modal.crm-ficha-modal[data-huella="contenido"]:not([data-completa]) { width: 100%; max-height: none; height: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .crm-docp-matasellos, .crm-tramite-casilla svg { animation: none; }
  .crm-expediente-eleccion-opcion, .crm-elegir-cita-atajo, .crm-tira-pliego { transition: none; }
}
@media (forced-colors: active) {
  .crm-expediente-lampara { forced-color-adjust: none; background: CanvasText; }
  .crm-elegir-cita-atajo[aria-pressed="true"]::before { background: Highlight; }
  .crm-cita-banda { forced-color-adjust: none; background: CanvasText; color: Canvas; }
}

/* Turno a escala de rótulo en la ficha de expediente (solo con huella «contenido»; la lista y V1 no cambian). */
.crm-modal.crm-ficha-modal[data-huella="contenido"] .crm-ficha-modal-rotulo .crm-turno { height: 24px; padding: 0 10px; color: var(--crm-text-2); font: 500 12px/16px var(--crm-mono); }
/* La carta en la ficha de expediente: el remite (correo) se parte por cualquier sitio sin dejar huérfanos. */
.crm-modal.crm-ficha-modal[data-huella="contenido"] .crm-misiva-remite { overflow-wrap: anywhere; }
.crm-misiva-rotulo { color: var(--crm-dim); font: 400 11px/16px var(--crm-mono); letter-spacing: .06em; text-transform: uppercase; }

/* ── AdjuntoArchivo y SobrePresupuesto compacto (18-10-2026) ────────────── */
/* Solo tokens --crm-*. El sobre clásico (77-sobre.css) no se toca: aquí todo
   cuelga de .crm-adjunto o .crm-sobrec. */

:where(.crm-adjunto, .crm-sobrec),
:where(.crm-adjunto, .crm-sobrec) *,
:where(.crm-adjunto, .crm-sobrec) ::before,
:where(.crm-adjunto, .crm-sobrec) ::after { box-sizing: border-box; }

/* ══ AdjuntoArchivo: un archivo, una fila de 56 ══════════════════════════ */
.crm-adjunto { container: crm-adjunto / inline-size; display: grid; gap: 8px; min-width: 0; }

/*
 * Lleno: 1 + 7 + 40 (ventanilla; nombre 20 + meta 20) + 7 + 1 = 56, el mismo
 * alto que la ZonaSoltar en fila del hueco vacío: al entrar el archivo nada
 * salta. El filete discontinuo del hueco pasa a continuo (la firma).
 */
.crm-adjunto-fila {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 8px 0 12px;
  border: 1px solid var(--crm-line-2);
  background: var(--crm-panel);
  transition: border-color var(--crm-t-color) var(--crm-snap), background-color var(--crm-t-color) var(--crm-snap);
}
.crm-adjunto-fila[data-encima] { border-color: var(--crm-acento); background: var(--crm-acento-suave); }
.crm-adjunto-fila[data-error]:not([data-encima]) { border-color: var(--crm-error-linea); }

/* La ventanilla: la primera página real, arriba del todo (membrete y título). */
.crm-adjunto-ventanilla {
  display: grid;
  place-items: center;
  width: 32px;
  height: 40px;
  overflow: hidden;
  border: 1px solid var(--crm-line-2);
  background: var(--crm-panel-2);
  color: var(--crm-muted);
}
.crm-adjunto-ventanilla > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.crm-adjunto-ventanilla > svg { width: 16px; height: 16px; stroke-width: 1.6; }

.crm-adjunto-textos { display: grid; min-width: 0; }
.crm-adjunto-nombre { font: 400 13px/20px var(--crm-sans); }
.crm-adjunto-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 20px;
  color: var(--crm-muted);
  font: 400 12px/16px var(--crm-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.crm-adjunto-meta > :first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.crm-adjunto-subiendo { color: var(--crm-text-2); }
.crm-adjunto-marca { display: inline-flex; flex: none; }
.crm-adjunto-acciones { display: flex; align-items: center; gap: 4px; }

/*
 * Estrecho (< 440 de hueco): las acciones bajan a su fila, bajo el nombre, con el texto del botón
 * alineado al del nombre (−10 = su relleno de 28). El nombre y la meta tienen todo el ancho: nada
 * se tapa. 1 + 8 + 40 + 4 + 28 + 8 + 1 = 90.
 */
@container crm-adjunto (max-width: 439.98px) {
  .crm-adjunto-fila { grid-template-columns: 32px minmax(0, 1fr); align-items: start; row-gap: 4px; padding-block: 8px; }
  .crm-adjunto-acciones { grid-column: 2; margin-left: -10px; }
}

/* Subida: un filo de 2 px al pie, dentro del filete; avanza solo con lo que informa la subida. */
.crm-adjunto-progreso { position: absolute; inset: auto 0 0; height: 2px; overflow: hidden; background: var(--crm-line); }
.crm-adjunto-progreso > i { display: block; width: 0; height: 100%; background: var(--crm-acento); transition: width var(--crm-t-gesto) var(--crm-curva); }
.crm-adjunto-progreso[data-indeterminado] > i {
  width: 100%;
  background: linear-gradient(90deg, transparent, var(--crm-acento) 50%, transparent) no-repeat;
  background-size: 40% 100%;
  background-position: -40% 0;
  animation: crm-filo-continuo var(--crm-t-filo) var(--crm-curva) infinite;
}

.crm-adjunto-error { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--crm-error); font: 400 13px/20px var(--crm-sans); }
.crm-adjunto-error svg { flex: none; width: 16px; height: 16px; margin-top: 2px; stroke-width: 1.6; }

/* ══ SobrePresupuesto compacto ═══════════════════════════════════════════ */
.crm-sobrec { container: crm-sobrec / inline-size; display: grid; gap: 16px; min-width: 0; }

/*
 * Un solo indicador de foco en los campos (FUNDAMENTOS §7): el borde de la Entrada. Dentro de un
 * ExpedienteComercial, `:is(.crm-expediente, …) :focus-visible` (91) empata con el `outline: none`
 * del control y gana por orden: pintaba un segundo anillo, desplazado, alrededor del <input>.
 */
.crm-sobrec .crm-entrada-control:focus-visible { outline: none; }

/* Total · Enviado el · Número: una fila, una altura (40). */
.crm-sobrec-datos {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3fr);
  gap: 12px;
  align-items: start;
}
.crm-sobrec-total .crm-entrada-control { font: 500 20px/28px var(--crm-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.crm-sobrec-total .crm-entrada-sufijo { color: var(--crm-text-2); font-size: 16px; line-height: 20px; }

/* La vuelta: fichas de 48 en columnas iguales. */
.crm-sobrec-vuelta { display: grid; gap: 8px; min-width: 0; }
.crm-sobrec .crm-sobre-fichas { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
/*
 * 1 + 8 + «lun 19 · 10:00» (14 × 6,6 = 93 en mono 11) + 8 + 1 = 111 ≤ 112: la hora cabe entera
 * en la columna más estrecha. Si una fuente la ensancha, parte en el «·» (espacios duros dentro
 * de cada grupo): la ficha crece, nunca recorta la hora.
 */
.crm-sobrec .crm-sobre-ficha { align-content: center; min-width: 0; min-height: 48px; padding: 6px 8px; }
.crm-sobrec .crm-sobre-ficha > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-sobrec .crm-sobre-ficha > small { white-space: normal; }
/* Elegida: escalón de fondo y marca de acento de 2 px (OFICIO §4), nunca el recuadro verde entero. */
.crm-sobrec .crm-sobre-ficha[aria-checked="true"] { border-color: var(--crm-line-2); background: var(--crm-panel-3); box-shadow: inset 2px 0 0 var(--crm-acento); }
.crm-sobrec .crm-sobre-ficha:disabled { border-color: var(--crm-linea-apagada); background: transparent; color: var(--crm-dim); opacity: 1; }
.crm-sobrec .crm-sobre-ficha:disabled small { color: var(--crm-dim); }

/* Pie: el resumen de ticket a la izquierda, Cancelar y un solo principal a la derecha. */
.crm-sobrec-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding-top: 12px;
  border-top: 1px solid var(--crm-line);
}
.crm-sobrec-pie .crm-sobre-resumen > * { white-space: nowrap; }
.crm-sobrec .crm-sobre-falta { grid-area: auto; margin: -8px 0 0; text-align: right; }

/*
 * Total · día · número en una fila solo desde 720 de contenedor (19-oct-2026): entre 560 y 719 la
 * etiqueta «N.º de presupuesto · Opcional» partía en dos líneas y su campo bajaba respecto a los
 * otros (F8). Por debajo de 720, total entero arriba y día · número a partes iguales.
 */
@container crm-sobrec (max-width: 719.98px) {
  .crm-sobrec-datos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .crm-sobrec-total { grid-column: 1 / -1; }
}

/* Estrecho: relleno de 12 en los campos y el resumen en su fila. */
@container crm-sobrec (max-width: 559.98px) {
  .crm-sobrec-datos .crm-entrada { padding: 0 12px; }
  .crm-sobrec-pie .crm-sobre-resumen { flex-basis: 100%; }
  .crm-sobrec-pie > .crm-boton:last-child { flex: 1; }
}
@container crm-sobrec (max-width: 399.98px) {
  .crm-sobrec .crm-sobre-fichas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Bajo 400 no caben dos etiquetas en una línea: uno bajo otro, cada uno entero y a todo el ancho. */
  .crm-sobrec-datos { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .crm-adjunto-fila,
  .crm-adjunto-progreso > i { transition: none; }
  .crm-adjunto-progreso[data-indeterminado] > i { animation: none; background-position: 50% 0; }
}

@media (forced-colors: active) {
  .crm-adjunto-fila, .crm-adjunto-ventanilla { border-color: CanvasText; background: Canvas; }
  .crm-adjunto-fila[data-error], .crm-adjunto-fila[data-encima] { border-color: Highlight; }
  .crm-adjunto-progreso > i { background: Highlight; }
  .crm-sobrec .crm-sobre-ficha[aria-checked="true"] { border-color: Highlight; }
}

/*
 * ConfirmarSalida (19-oct-2026): la pregunta antes de perder un borrador.
 * Un alertdialog de 440 sobre las piezas del Modal (cabecera 52, cuerpo, pie
 * 56). Solo se acota lo propio con `crm-salida-*`: el rótulo en tono de aviso,
 * el título entero a 20/28, la línea de lo que se pierde y el pie con el
 * descarte a la izquierda y lo seguro a la derecha (con su Esc a la vista).
 */

.crm-salida-rotulo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--crm-aviso);
}

.crm-salida-rotulo svg {
  flex: none;
  width: 14px;
  height: 14px;
  stroke-width: 1.5;
}

/* El título se lee entero: sin elipsis, en hasta dos líneas equilibradas. */
.crm-modal-titulo.crm-salida-titulo {
  display: block;
  margin: 0 0 8px;
  overflow: visible;
  font-size: 20px;
  letter-spacing: -0.02em;
  line-height: 28px;
  text-overflow: clip;
  white-space: normal;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.crm-salida-pierde {
  max-width: 68ch;
  margin: 0;
  color: var(--crm-text-2);
  font-size: 14px;
  line-height: 22px;
  overflow-wrap: anywhere;
}

/* Descartar a un lado, seguir al otro: la distancia también dice cuál es cuál. */
.crm-modal-pie.crm-salida-pie {
  justify-content: space-between;
}

@media (max-width: 600px) {
  /* Hoja inferior: las dos a todo el ancho; lo seguro, abajo, bajo el pulgar. */
  .crm-modal-pie.crm-salida-pie .crm-boton {
    flex: 1 1 100%;
  }
}

@media (forced-colors: active) {
  .crm-salida-rotulo {
    color: CanvasText;
  }
}

/* ── Cobranza y avisos al cliente (27-oct-2026) ────────────────────────────
 * ReciboDevuelto · EscaleraCobro · CartaPrevia · BurbujaAviso · SelectorCanal.
 * Solo tokens --crm-*. El papel (recibo, carta) es material documental:
 * --crm-placa-fondo y --crm-placa-tinta, iguales en los cuatro temas; la banda
 * y el sello del recibo usan las tintas --crm-papel-* (temas.json).
 * Medidas: FUNDAMENTOS §2–§3 (alturas en múltiplos de 4, letra de la escala).
 */

/* ══ ReciboDevuelto ═══════════════════════════════════════════════════════ */
.crm-recibo {
  --recibo-tinta-2: color-mix(in oklab, var(--crm-placa-tinta) 64%, var(--crm-placa-fondo));
  --recibo-filete: color-mix(in oklab, var(--crm-placa-tinta) 16%, var(--crm-placa-fondo));
  container: crm-recibo / inline-size;
  position: relative;
  display: block;
  width: 100%;
  max-width: 400px;
  color: var(--crm-placa-tinta);
  font-family: var(--crm-sans);
  outline: none;
}
.crm-recibo[data-varios] { padding: 0 0 8px 0; }
.crm-recibo-papel {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 16px 20px 16px;
  background: var(--crm-placa-fondo);
  border: 1px solid var(--crm-line-2);
  /* Borde superior troquelado: el recibo sale de un talonario. */
  -webkit-mask: radial-gradient(4px at 8px 0, transparent 98%, var(--crm-placa-tinta)) -4px 0 / 16px 100%;
  mask: radial-gradient(4px at 8px 0, transparent 98%, var(--crm-placa-tinta)) -4px 0 / 16px 100%;
}
.crm-recibo-papel { grid-template-columns: minmax(0, 1fr); }
.crm-recibo-papel > *,
.crm-recibo-datos > div { min-width: 0; }
.crm-recibo-hojas {
  position: absolute;
  inset: 4px -4px 0 4px;
  background: var(--crm-placa-fondo);
  border: 1px solid var(--crm-line-2);
}
.crm-recibo-hojas[data-n="2"] { box-shadow: 4px 4px 0 -1px var(--crm-placa-fondo), 4px 4px 0 0 var(--crm-line-2); }

.crm-recibo-cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-height: 16px;
}
.crm-recibo-rotulo,
.crm-recibo-clave {
  font: 400 11px/16px var(--crm-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--recibo-tinta-2);
}
.crm-recibo-emisor {
  min-width: 0;
  overflow: hidden;
  font: 400 12px/16px var(--crm-sans);
  color: var(--recibo-tinta-2);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crm-recibo-titular { display: grid; gap: 0; }
.crm-recibo-nombre {
  font: 500 15px/22px var(--crm-sans);
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.crm-recibo-datos {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 4px 20px;
  margin: 0;
}
.crm-recibo-datos > div { display: grid; }
.crm-recibo-datos > div[data-ancho] { grid-column: 1 / -1; }
.crm-recibo-datos dd { margin: 0; }
.crm-recibo-factura,
.crm-recibo-fecha {
  font: 400 13px/20px var(--crm-mono);
  font-variant-numeric: tabular-nums;
}
.crm-recibo-concepto { font: 400 13px/20px var(--crm-sans); overflow-wrap: anywhere; }

.crm-recibo-lineas {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px dashed var(--recibo-filete);
}
.crm-recibo-linea {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 28px;
  border-bottom: 1px dashed var(--recibo-filete);
}
.crm-recibo-linea .crm-recibo-fecha { color: var(--recibo-tinta-2); }
.crm-recibo-importe-linea { font: 400 13px/20px var(--crm-mono); font-variant-numeric: tabular-nums; text-align: right; }
.crm-recibo-mas { min-height: 28px; padding-top: 4px; font: 400 12px/16px var(--crm-sans); color: var(--recibo-tinta-2); }

.crm-recibo-total { display: grid; gap: 0; }
.crm-recibo-cifra {
  font: 500 28px/32px var(--crm-sans);
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.crm-recibo-provisional { font: 400 12px/16px var(--crm-sans); color: var(--recibo-tinta-2); }

/* La firma: la banda del motivo cruza el papel de lado a lado, como el sello del banco. */
.crm-recibo-banda {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 32px;
  margin: 0 -20px;
  padding: 0 20px;
  color: var(--crm-placa-fondo);
  background: var(--crm-papel-devuelto);
}
.crm-recibo-banda[data-estado="cobrado"] {
  color: var(--crm-papel-cobrado);
  background: transparent;
  border-top: 2px solid var(--crm-papel-cobrado);
  border-bottom: 2px solid var(--crm-papel-cobrado);
}
.crm-recibo-banda-texto { font: 500 13px/20px var(--crm-sans); overflow-wrap: anywhere; }
.crm-recibo-banda-codigo {
  font: 400 13px/20px var(--crm-mono);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.crm-recibo-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  min-height: 20px;
}
.crm-recibo .crm-recibo-iban { color: var(--crm-placa-tinta); }
.crm-recibo .crm-recibo-iban .crm-iban-grupo { color: var(--crm-placa-tinta); }
.crm-recibo .crm-recibo-iban .crm-iban-grupo[data-oculto] { color: var(--recibo-tinta-2); }
.crm-recibo-paso {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 400 12px/16px var(--crm-sans);
  color: var(--recibo-tinta-2);
}
.crm-recibo-puntos { display: inline-flex; gap: 4px; }
.crm-recibo-puntos i {
  width: 8px;
  height: 8px;
  border: 1px solid var(--recibo-tinta-2);
}
.crm-recibo-puntos i[data-hecho] { background: var(--crm-placa-tinta); border-color: var(--crm-placa-tinta); }

/* Interactivo: el recibo es la fila de una cola. */
.crm-recibo[data-interactivo] { cursor: pointer; }
.crm-recibo[data-interactivo] .crm-recibo-papel {
  transition: border-color var(--crm-t-salida) var(--crm-snap), transform var(--crm-t-salida) var(--crm-snap);
}
@media (hover: hover) {
  .crm-recibo[data-interactivo]:hover .crm-recibo-papel { border-color: var(--crm-text-2); transition-duration: 0ms; }
}
.crm-recibo[data-interactivo]:active .crm-recibo-papel { transform: translateY(1px); transition-duration: var(--crm-t-pulsar); }
.crm-recibo[data-interactivo]:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: 2px; }

/* Cargando: el esqueleto con la forma del recibo. */
.crm-recibo[data-cargando] .crm-recibo-papel { background: var(--crm-panel); border-color: var(--crm-line); -webkit-mask: none; mask: none; }
.crm-recibo-esqueleto {
  display: block;
  height: 16px;
  background: linear-gradient(90deg, var(--crm-esqueleto-a), var(--crm-esqueleto-b), var(--crm-esqueleto-a));
  background-size: 200% 100%;
  animation: crm-recibo-barrido var(--crm-t-barrido) var(--crm-curva) infinite;
}
.crm-recibo-esqueleto[data-l="cab"] { width: 40%; }
.crm-recibo-esqueleto[data-l="cifra"] { width: 56%; height: 32px; }
.crm-recibo-esqueleto[data-l="banda"] { width: 100%; height: 32px; }
.crm-recibo-esqueleto[data-l="pie"] { width: 72%; }
@keyframes crm-recibo-barrido { to { background-position: -200% 0; } }

@container crm-recibo (max-width: 320px) {
  .crm-recibo-papel { padding: 16px 16px; }
  .crm-recibo-banda { margin: 0 -16px; padding: 0 16px; }
  .crm-recibo-cifra { font-size: 24px; line-height: 28px; }
  .crm-recibo-datos { grid-template-columns: auto 1fr; }
}

/* ══ EscaleraCobro ════════════════════════════════════════════════════════ */
.crm-escalera {
  container: crm-escalera / inline-size;
  display: grid;
  gap: 12px;
  color: var(--crm-text);
  font-family: var(--crm-sans);
}
.crm-escalera-pasos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--crm-line);
}
.crm-escalera-paso {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: start;
  gap: 4px 12px;
  min-height: 64px;
  padding: 12px 12px 12px 0;
}
/* El peldaño siguiente baja su marca de 2 px por arriba. */
.crm-escalera-paso[data-siguiente]::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 12px;
  height: 2px;
  background: var(--crm-acento);
}
.crm-escalera-marca {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  font: 400 12px/16px var(--crm-mono);
  color: var(--crm-muted);
  border: 1px solid var(--crm-line-2);
}
.crm-escalera-paso[data-hecho] .crm-escalera-marca { color: var(--crm-text); border-color: var(--crm-text-2); background: var(--crm-panel-2); }
.crm-escalera-paso[data-siguiente] .crm-escalera-marca { color: var(--crm-text); border-color: var(--crm-acento-linea); }
.crm-escalera-marca svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.crm-escalera-texto { display: grid; min-width: 0; }
.crm-escalera-nombre { font: 500 13px/20px var(--crm-sans); overflow-wrap: anywhere; }
.crm-escalera-paso:not([data-hecho]):not([data-siguiente]) .crm-escalera-nombre { font-weight: 400; color: var(--crm-muted); }
.crm-escalera-meta { font: 400 12px/16px var(--crm-sans); color: var(--crm-muted); font-variant-numeric: tabular-nums; }

/* La firma: el sello de la fecha límite que cuenta hacia atrás. */
.crm-escalera-sello {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  margin-top: 4px;
  padding: 0 8px;
  color: var(--crm-text);
  border: 1px solid var(--crm-line-2);
}
.crm-escalera-sello-dias { font: 500 13px/20px var(--crm-mono); font-variant-numeric: tabular-nums; }
.crm-escalera-sello-fecha { font: 400 11px/16px var(--crm-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--crm-muted); }
.crm-escalera-sello[data-tono="ultimo"] { color: var(--crm-aviso); border-color: var(--crm-burbuja-linea); }
.crm-escalera-sello[data-tono="vencido"] { color: var(--crm-error); border-color: var(--crm-error-linea); }
.crm-escalera-pie { margin: 0; font: 400 13px/20px var(--crm-sans); color: var(--crm-text-2); }
.crm-escalera[data-estado="cobrado"] .crm-escalera-pie { color: var(--crm-acento); }

@container crm-escalera (max-width: 480px) {
  .crm-escalera-pasos { grid-template-columns: 1fr; }
  .crm-escalera-paso { min-height: 48px; padding: 12px 0; border-bottom: 1px solid var(--crm-line); }
  .crm-escalera-paso[data-siguiente]::before { top: 12px; bottom: 12px; left: -12px; right: auto; width: 2px; height: auto; }
}

/* ══ CartaPrevia ══════════════════════════════════════════════════════════ */
.crm-cartaprevia {
  --cartaprevia-tinta-2: color-mix(in oklab, var(--crm-placa-tinta) 64%, var(--crm-placa-fondo));
  --cartaprevia-filete: color-mix(in oklab, var(--crm-placa-tinta) 16%, var(--crm-placa-fondo));
  container: crm-cartaprevia / inline-size;
  display: grid;
  gap: 16px;
  max-width: 640px;
  color: var(--crm-text);
  font-family: var(--crm-sans);
}
.crm-cartaprevia-canal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-height: 40px;
}
.crm-cartaprevia-canal-icono {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--crm-text);
  border: 1px solid var(--crm-line-2);
}
.crm-cartaprevia-canal-icono svg { width: 16px; height: 16px; stroke-width: 1.6; }
.crm-cartaprevia-canal-texto { display: grid; }
.crm-cartaprevia-clave { font: 400 11px/16px var(--crm-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--crm-muted); }
.crm-cartaprevia-canal-nombre { font: 500 13px/20px var(--crm-sans); }
.crm-cartaprevia-adjuntos { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; min-width: 0; }
.crm-cartaprevia-adjunto {
  display: inline-block;
  max-width: 240px;
  min-height: 24px;
  padding: 0 8px;
  overflow: hidden;
  font: 400 12px/24px var(--crm-mono);
  color: var(--crm-text-2);
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid var(--crm-line-2);
}

.crm-cartaprevia-escena { position: relative; }
/* El sobre: papel crema no, blanco documental; solapa y ventanilla dibujadas con filetes. */
.crm-cartaprevia-sobre {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr;
  gap: 16px;
  width: 100%;
  min-height: 220px;
  padding: 20px 24px;
  color: var(--crm-placa-tinta);
  background: var(--crm-placa-fondo);
  border: 1px solid var(--crm-line-2);
  overflow: hidden;
}
.crm-cartaprevia-solapa {
  position: absolute;
  inset: 0 0 auto 0;
  height: 52%;
  background:
    linear-gradient(to bottom right, transparent calc(50% - 1px), var(--cartaprevia-filete) 50%, transparent calc(50% + 1px)) left / 50% 100% no-repeat,
    linear-gradient(to bottom left, transparent calc(50% - 1px), var(--cartaprevia-filete) 50%, transparent calc(50% + 1px)) right / 50% 100% no-repeat;
  pointer-events: none;
}
.crm-cartaprevia-remite { position: relative; grid-row: 1; grid-column: 1; min-width: 0; font: 400 12px/16px var(--crm-sans); color: var(--cartaprevia-tinta-2); }
.crm-cartaprevia-matasellos {
  position: relative;
  grid-row: 1;
  grid-column: 2;
  align-self: start;
  padding: 4px 8px;
  font: 400 11px/16px var(--crm-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cartaprevia-tinta-2);
  border: 1px solid var(--cartaprevia-filete);
  transform: rotate(-3deg);
}
/* La firma: la ventanilla. El mismo bloque encabeza la carta abierta. */
.crm-cartaprevia-ventanilla {
  position: relative;
  grid-column: 1 / -1;
  align-self: end;
  justify-self: start;
  display: grid;
  min-width: 240px;
  max-width: 100%;
  padding: 12px 16px;
  background: var(--crm-placa-fondo);
  border: 1px solid var(--cartaprevia-filete);
  color: var(--crm-placa-tinta);
}
.crm-cartaprevia-sobre .crm-cartaprevia-ventanilla { box-shadow: inset 0 0 0 4px color-mix(in oklab, var(--crm-placa-tinta) 4%, var(--crm-placa-fondo)); }
.crm-cartaprevia-dest-nombre { font: 500 14px/22px var(--crm-sans); overflow-wrap: anywhere; }
.crm-cartaprevia-dest-linea { font: 400 13px/20px var(--crm-sans); overflow-wrap: anywhere; }

.crm-cartaprevia-hoja {
  display: grid;
  align-content: start;
  gap: 16px;
  min-height: 560px;
  padding: 32px 40px;
  color: var(--crm-placa-tinta);
  background: var(--crm-placa-fondo);
  border: 1px solid var(--crm-line-2);
  outline: none;
  animation: crm-cartaprevia-sale var(--crm-t-capa) var(--crm-snap) both;
}
.crm-cartaprevia-hoja:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: 2px; }
@keyframes crm-cartaprevia-sale {
  from { transform: translateY(16px); clip-path: inset(40% 0 0 0); }
  to { transform: none; clip-path: inset(0 0 0 0); }
}
.crm-cartaprevia-membrete { display: grid; justify-items: end; font: 400 12px/16px var(--crm-sans); color: var(--cartaprevia-tinta-2); text-align: right; }
.crm-cartaprevia-rem-nombre { font: 500 13px/20px var(--crm-sans); color: var(--crm-placa-tinta); }
.crm-cartaprevia-cabecera { display: grid; gap: 16px; justify-items: end; }
.crm-cartaprevia-hoja .crm-cartaprevia-ventanilla { justify-self: end; border-color: transparent; padding: 12px 0 12px 16px; }
.crm-cartaprevia-lugar { font: 400 13px/20px var(--crm-sans); }
.crm-cartaprevia-asunto { margin: 0; font: 500 14px/22px var(--crm-sans); }
.crm-cartaprevia-asunto .crm-cartaprevia-clave { color: var(--cartaprevia-tinta-2); margin-right: 8px; }
.crm-cartaprevia-cuerpo { display: grid; gap: 12px; font: 400 14px/22px var(--crm-sans); }
.crm-cartaprevia-cuerpo p { margin: 0; text-wrap: pretty; overflow-wrap: anywhere; }
.crm-cartaprevia-vacia { margin: 0; padding: 24px 0; font: 400 14px/22px var(--crm-sans); color: var(--cartaprevia-tinta-2); border-top: 1px dashed var(--cartaprevia-filete); border-bottom: 1px dashed var(--cartaprevia-filete); }
.crm-cartaprevia-firma {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
.crm-cartaprevia-firma-titular { max-width: 160px; font: 500 15px/22px var(--crm-sans); text-align: right; overflow-wrap: anywhere; }
.crm-cartaprevia-firma-sello {
  max-width: 200px;
  padding-left: 12px;
  font: 400 11px/16px var(--crm-mono);
  color: var(--cartaprevia-tinta-2);
  border-left: 1px solid var(--cartaprevia-filete);
  overflow-wrap: anywhere;
}
.crm-cartaprevia-firma:not([data-firmada]) .crm-cartaprevia-firma-sello { color: var(--crm-papel-devuelto); }
.crm-cartaprevia-pie { margin-top: auto; padding-top: 12px; font: 400 11px/16px var(--crm-sans); color: var(--cartaprevia-tinta-2); text-align: center; border-top: 1px solid var(--cartaprevia-filete); }
.crm-cartaprevia-acciones { display: flex; justify-content: flex-end; }
.crm-cartaprevia-error {
  display: grid;
  justify-items: start;
  gap: 12px;
  padding: 16px;
  color: var(--crm-error);
  border: 1px solid var(--crm-error-linea);
  border-left-width: 2px;
}
.crm-cartaprevia-error p { margin: 0; font: 400 14px/22px var(--crm-sans); }
.crm-cartaprevia-sobre[data-esqueleto] { background: var(--crm-panel); border-color: var(--crm-line); }
.crm-cartaprevia-esqueleto {
  grid-column: 1 / -1;
  align-self: end;
  width: 240px;
  height: 64px;
  background: linear-gradient(90deg, var(--crm-esqueleto-a), var(--crm-esqueleto-b), var(--crm-esqueleto-a));
  background-size: 200% 100%;
  animation: crm-recibo-barrido var(--crm-t-barrido) var(--crm-curva) infinite;
}

@container crm-cartaprevia (max-width: 480px) {
  .crm-cartaprevia-sobre { padding: 16px; min-height: 200px; }
  .crm-cartaprevia-ventanilla { min-width: 0; }
  .crm-cartaprevia-hoja { padding: 24px 16px; min-height: 0; }
  .crm-cartaprevia-firma { grid-template-columns: 1fr; justify-items: start; }
  .crm-cartaprevia-firma-titular { text-align: left; }
  .crm-cartaprevia-acciones > * { width: 100%; }
}

/* ══ BurbujaAviso ═════════════════════════════════════════════════════════ */
.crm-burbuja {
  container: crm-burbuja / inline-size;
  display: grid;
  gap: 12px;
  max-width: 400px;
  padding: 16px;
  color: var(--crm-text);
  font-family: var(--crm-sans);
  background: var(--crm-panel);
  border: 1px solid var(--crm-line);
}
.crm-burbuja-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 20px; }
.crm-burbuja-clave { font: 400 11px/16px var(--crm-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--crm-muted); }
.crm-burbuja-estado { font: 400 12px/16px var(--crm-sans); color: var(--crm-muted); }
.crm-burbuja-estado[data-estado="leido"] { color: var(--crm-acento); }
.crm-burbuja-estado[data-estado="fallido"] { color: var(--crm-error); }

.crm-burbuja-movil { display: grid; gap: 8px; padding: 12px; background: var(--crm-bg); border: 1px solid var(--crm-line); }
.crm-burbuja-contacto { font: 500 13px/20px var(--crm-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Burbuja saliente: a la derecha, con su pico. */
.crm-burbuja-burbuja {
  position: relative;
  justify-self: end;
  display: grid;
  gap: 4px;
  max-width: 88%;
  padding: 8px 12px 4px;
  background: var(--crm-panel-3);
  border: 1px solid var(--crm-line-2);
}
.crm-burbuja[data-canal="whatsapp"] .crm-burbuja-burbuja { background: var(--crm-acento-suave); border-color: var(--crm-acento-linea); }
.crm-burbuja-burbuja::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -8px;
  width: 8px;
  height: 12px;
  background: inherit;
  border-top: 1px solid;
  border-right: 1px solid;
  border-color: inherit;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.crm-burbuja-texto { font: 400 14px/22px var(--crm-sans); white-space: pre-wrap; overflow-wrap: anywhere; }
.crm-burbuja-vacio { color: var(--crm-muted); font-style: normal; }
.crm-burbuja-pie { display: inline-flex; justify-self: end; align-items: center; gap: 4px; min-height: 16px; }
.crm-burbuja-hora { font: 400 11px/16px var(--crm-mono); color: var(--crm-muted); font-variant-numeric: tabular-nums; }
/* La firma en WhatsApp: el doble visto se vuelve verde al leerse. */
.crm-burbuja-vistos { width: 20px; height: 12px; fill: none; stroke: var(--crm-muted); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--crm-t-color) var(--crm-snap); }
.crm-burbuja-vistos[data-leido] { stroke: var(--crm-acento); }
/* La firma en SMS: el contador del móvil. */
.crm-burbuja-contador {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: baseline;
  gap: 0 8px;
  font: 400 12px/16px var(--crm-sans);
  color: var(--crm-muted);
}
.crm-burbuja-contador-cifra { font: 400 12px/16px var(--crm-mono); font-variant-numeric: tabular-nums; }
.crm-burbuja-contador[data-varios] { color: var(--crm-aviso); }
.crm-burbuja-contador-nota { flex-basis: 100%; text-align: right; }

.crm-burbuja-correo { display: grid; gap: 0; background: var(--crm-bg); border: 1px solid var(--crm-line); }
.crm-burbuja-sobres { margin: 0; border-bottom: 1px solid var(--crm-line); }
.crm-burbuja-sobres > div { display: grid; grid-template-columns: 64px 1fr; align-items: center; min-height: 28px; padding: 0 12px; border-bottom: 1px solid var(--crm-line); }
.crm-burbuja-sobres > div:last-child { border-bottom: 0; }
.crm-burbuja-sobres dt { font: 400 11px/16px var(--crm-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--crm-muted); }
.crm-burbuja-sobres dd { margin: 0; min-width: 0; overflow: hidden; font: 400 13px/20px var(--crm-sans); text-overflow: ellipsis; white-space: nowrap; }
.crm-burbuja-sobres .crm-burbuja-asunto { font-weight: 500; white-space: normal; overflow-wrap: anywhere; }
.crm-burbuja-cuerpo-correo { padding: 12px; font: 400 14px/22px var(--crm-sans); white-space: pre-wrap; overflow-wrap: anywhere; }
.crm-burbuja-adjunto {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  margin: 0 12px 12px;
  padding: 0 8px;
  min-width: 0;
  border: 1px solid var(--crm-line-2);
}
.crm-burbuja-adjunto[data-en-burbuja] { margin: 0; background: var(--crm-panel); }
.crm-burbuja-adjunto svg { flex: none; width: 14px; height: 14px; color: var(--crm-muted); stroke-width: 1.5; }
.crm-burbuja-adjunto-nombre { min-width: 0; overflow: hidden; font: 400 12px/16px var(--crm-mono); text-overflow: ellipsis; white-space: nowrap; }
.crm-burbuja-adjunto-tamano { flex: none; font: 400 11px/16px var(--crm-mono); color: var(--crm-muted); white-space: nowrap; }
.crm-burbuja-fallo {
  margin: 0;
  padding: 8px 12px;
  font: 400 13px/20px var(--crm-sans);
  color: var(--crm-error);
  border-left: 2px solid var(--crm-error-linea);
  background: var(--crm-error-suave);
}

/* ══ SelectorCanal ════════════════════════════════════════════════════════ */
.crm-selcanal { container: crm-selcanal / inline-size; display: grid; gap: 8px; font-family: var(--crm-sans); }
.crm-selcanal-etiqueta { font: 400 11px/16px var(--crm-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--crm-muted); }
.crm-selcanal-fichas { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.crm-selcanal-ficha {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 8px 16px 8px 12px;
  color: var(--crm-text);
  text-align: left;
  font: inherit;
  background: var(--crm-panel);
  border: 1px solid var(--crm-control);
  cursor: pointer;
  transition: background-color var(--crm-t-salida) var(--crm-snap), border-color var(--crm-t-salida) var(--crm-snap);
}
@media (hover: hover) {
  .crm-selcanal-ficha:not([aria-disabled]):hover { background: var(--crm-panel-2); transition-duration: 0ms; }
}
.crm-selcanal-ficha:not([aria-disabled]):active { background: var(--crm-panel-3); transition-duration: var(--crm-t-pulsar); }
.crm-selcanal-ficha:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: 2px; }
.crm-selcanal-ficha[data-elegida] { background: var(--crm-panel-3); border-color: var(--crm-text-2); }
/* La elegida baja su marca de 2 px a la izquierda. */
.crm-selcanal-ficha[data-elegida]::before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  width: 2px;
  background: var(--crm-acento);
}
.crm-selcanal-ficha[aria-disabled] {
  color: var(--crm-dim);
  background: transparent;
  border-color: var(--crm-linea-apagada);
  cursor: not-allowed;
}
.crm-selcanal-icono { display: inline-grid; place-items: center; width: 32px; height: 32px; color: var(--crm-muted); }
.crm-selcanal-ficha[data-elegida] .crm-selcanal-icono { color: var(--crm-text); }
.crm-selcanal-icono svg { width: 16px; height: 16px; stroke-width: 1.6; }
.crm-selcanal-texto { display: grid; min-width: 0; }
.crm-selcanal-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.crm-selcanal-nombre { font: 500 15px/22px var(--crm-sans); }
.crm-selcanal-destino { font: 400 13px/20px var(--crm-sans); color: var(--crm-muted); overflow-wrap: anywhere; }
.crm-selcanal-ficha[aria-disabled] .crm-selcanal-destino { color: var(--crm-dim); }
.crm-selcanal-recomendado {
  min-height: 20px;
  padding: 0 8px;
  font: 400 11px/20px var(--crm-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--crm-acento);
  border: 1px solid var(--crm-acento-linea);
}
@container crm-selcanal (max-width: 400px) {
  .crm-selcanal-fichas { grid-template-columns: 1fr; }
  .crm-selcanal-ficha { min-height: 56px; }
}

/* ══ Movimiento reducido, impresión y colores forzados ═══════════════════ */
@media (prefers-reduced-motion: reduce) {
  .crm-cartaprevia-hoja,
  .crm-recibo-esqueleto,
  .crm-cartaprevia-esqueleto { animation: none; }
  .crm-recibo[data-interactivo]:active .crm-recibo-papel { transform: none; }
  .crm-cartaprevia-matasellos { transform: none; }
}
@media (forced-colors: active) {
  .crm-recibo-papel,
  .crm-cartaprevia-sobre,
  .crm-cartaprevia-hoja { forced-color-adjust: none; }
  .crm-recibo-banda { forced-color-adjust: none; }
  .crm-selcanal-ficha[data-elegida]::before,
  .crm-escalera-paso[data-siguiente]::before { background: Highlight; }
}

/* ══ Familia «conectores» ═══════════════════════════════════════════════ */
/*
 * Hoja propia de la familia (WhatsApp, estado y ficha de conector, catálogo y
 * bandeja). Solo variables `--crm-*` existentes, radio 0, filetes de 1 y sin
 * sombras en el flujo. Cada pieza responde a su contenedor, nunca al viewport.
 * La integración en la hoja común (`styles.css`) la decide dirección: ver
 * docs/conectores/DISENO.md. Mientras, las historias la cargan con un import.
 */

/* ── Táctil 48 en el flujo de conexión ─────────────────────────────────── */
/*
 * Excepción local, por encargo expreso de Jesús (11-oct-2026): en el modo foco
 * de conectar, los momentos de decisión (pie de «Atrás» / «Siguiente», abrir y
 * copiar el enlace) y las casillas de requisitos miden 48, con letra 15 (§2,
 * fila «táctil»). Se hace con el envoltorio de la familia, sobre los
 * controles que ya existen y sin tocar sus API. El resto del kit no cambia.
 */
.crm-conector-foco .crm-foco-pie .crm-boton[data-tamano="grande"],
.crm-conector-foco .crm-wa-enlace-acciones .crm-boton[data-tamano="grande"] {
  --crm-boton-alto: 48px;
  font-size: 15px;
}

.crm-conector-foco .crm-wa-requisitos .crm-opcion-fila {
  min-height: 48px;
}

.crm-conector-foco .crm-wa-requisitos .crm-opcion-etiqueta {
  font-size: 15px;
  line-height: 24px;
}

/* La casilla (16) se centra en la primera línea de 24: (24 − 16) / 2 = 4. */
.crm-conector-foco .crm-wa-requisitos .crm-casilla {
  margin-top: 4px;
}

.crm-wa-pantalla {
  container: crm-wa-pantalla / inline-size;
  width: 100%;
  min-width: 0;
}

/* ── Permisos ─────────────────────────────────────────────────────────── */
.crm-wa-permisos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--crm-line);
}

.crm-wa-permisos-lista {
  min-width: 0;
  padding: 20px 20px 20px 0;
}

.crm-wa-permisos-lista + .crm-wa-permisos-lista {
  padding: 20px 0 20px 20px;
  border-left: 1px solid var(--crm-line);
}

.crm-wa-permisos-rotulo {
  margin: 0 0 12px;
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crm-wa-permisos ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crm-wa-permisos li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 8px;
  color: var(--crm-text);
  font-size: 15px;
  line-height: 24px;
}

.crm-wa-permisos li svg {
  width: 16px;
  height: 16px;
  margin-top: 4px;
  color: var(--crm-text-2);
  stroke-width: 1.6;
}

.crm-wa-permisos-lista[data-tono="nunca"] li {
  color: var(--crm-text-2);
}

.crm-wa-permisos-lista[data-tono="nunca"] li svg {
  color: var(--crm-muted);
}

@container crm-wa-pantalla (max-width: 559px) {
  .crm-wa-permisos {
    grid-template-columns: minmax(0, 1fr);
  }

  .crm-wa-permisos-lista,
  .crm-wa-permisos-lista + .crm-wa-permisos-lista {
    padding: 16px 0;
    border-left: 0;
  }

  .crm-wa-permisos-lista + .crm-wa-permisos-lista {
    border-top: 1px solid var(--crm-line);
  }
}

/* ── Modo: fichas y lo que cambia con cada una ──────────────────────── */
.crm-wa-modos {
  display: grid;
  justify-items: center;
  gap: 16px;
  width: 100%;
}

.crm-wa-modos-consecuencias {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: min(640px, 100%);
  margin: 0;
}

.crm-wa-modos-consecuencias[data-columnas="1"] {
  grid-template-columns: minmax(0, 1fr);
}

.crm-wa-modos-consecuencia {
  min-width: 0;
}

.crm-wa-modos-consecuencia dt {
  margin: 0 0 4px;
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crm-wa-modos-consecuencia dd {
  margin: 0;
  color: var(--crm-text-2);
  font-size: 13px;
  line-height: 20px;
}

@container crm-wa-pantalla (max-width: 559px) {
  .crm-wa-modos-consecuencias {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Requisitos y fallo ──────────────────────────────────────────────── */
.crm-wa-fallo-ayuda,
.crm-wa-fallo-servidor {
  display: block;
}

.crm-wa-fallo-servidor {
  margin-top: 4px;
  color: var(--crm-muted);
  overflow-wrap: anywhere;
}

.crm-wa-requisitos,
.crm-wa-fallo {
  display: grid;
  gap: 16px;
  width: 100%;
}

/* ── Enlace: QR, sello y acciones ────────────────────────────────────── */
.crm-wa-enlace {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 32px;
  width: 100%;
}

.crm-wa-enlace-otro {
  justify-self: start;
}

.crm-wa-enlace-lado {
  display: grid;
  justify-items: start;
  gap: 16px;
  min-width: 0;
}

.crm-wa-enlace-acciones {
  display: grid;
  gap: 8px;
  width: 100%;
}

.crm-wa-enlace-acciones .crm-boton {
  justify-content: flex-start;
  width: 100%;
}

.crm-wa-enlace-host {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  color: var(--crm-text-2);
  font-family: var(--crm-mono);
  font-size: 12px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-wa-enlace-host-rotulo {
  color: var(--crm-muted);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crm-wa-enlace-nota {
  margin: 0;
  color: var(--crm-muted);
  font-size: 13px;
  line-height: 20px;
}

@container crm-wa-pantalla (max-width: 559px) {
  .crm-wa-enlace {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 24px;
  }

  .crm-wa-enlace-lado {
    justify-items: stretch;
    width: 100%;
  }
}

/* ── QR: placa de tinta oscura sobre fondo claro en todos los temas ──── */
.crm-qr {
  display: inline-block;
  flex: none;
  padding: 0;
  border: 1px solid var(--crm-line-2);
  line-height: 0;
  forced-color-adjust: none;
}

.crm-qr-placa {
  display: block;
}

.crm-qr-fondo {
  fill: var(--crm-boton);
}

.crm-qr-modulos {
  fill: var(--crm-boton-tinta);
}

/* Claro (y «sistema» con el equipo en claro): el botón va invertido, la placa cruza los dos tokens. */
.crm-qr[data-invertir] .crm-qr-fondo {
  fill: var(--crm-boton-tinta);
}

.crm-qr[data-invertir] .crm-qr-modulos {
  fill: var(--crm-boton);
}

/* ── Sello de validez: doble filete, como un sello de caucho ─────────── */
.crm-conector-sello {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.crm-conector-sello-interior {
  display: grid;
  gap: 2px;
  padding: 8px 12px;
  border: 1px solid var(--crm-line-2);
  background: var(--crm-panel);
  box-shadow:
    inset 0 0 0 2px var(--crm-panel),
    inset 0 0 0 3px var(--crm-line-2);
}

.crm-conector-sello-rotulo {
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crm-conector-sello-fecha {
  color: var(--crm-text);
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.crm-conector-sello-detalle {
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

.crm-conector-sello[data-estado="por-caducar"] .crm-conector-sello-interior {
  border-color: var(--crm-aviso-linea);
  box-shadow:
    inset 0 0 0 2px var(--crm-panel),
    inset 0 0 0 3px var(--crm-aviso-linea);
}

.crm-conector-sello[data-estado="por-caducar"] .crm-conector-sello-detalle {
  color: var(--crm-aviso);
}

.crm-conector-sello[data-estado="caducado"] .crm-conector-sello-interior {
  border-color: var(--crm-error-linea);
  box-shadow:
    inset 0 0 0 2px var(--crm-panel),
    inset 0 0 0 3px var(--crm-error-linea);
}

.crm-conector-sello[data-estado="caducado"] :is(.crm-conector-sello-rotulo, .crm-conector-sello-detalle) {
  color: var(--crm-error);
}

/* ── Espera honesta ──────────────────────────────────────────────────── */
.crm-wa-espera {
  display: grid;
  width: 100%;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--crm-line);
  list-style: none;
}

.crm-wa-espera > li {
  position: relative;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  border-bottom: 1px solid var(--crm-line);
}

.crm-wa-espera > li > svg {
  width: 16px;
  height: 16px;
  color: var(--crm-acento);
  stroke-width: 1.6;
}

.crm-wa-espera-texto {
  min-width: 0;
  color: var(--crm-text);
  font-size: 15px;
  line-height: 24px;
}

.crm-wa-espera-meta {
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 12px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

/* Lo que espera a una persona: anillo de acento (punto de estado, §6). */
.crm-wa-espera-punto {
  justify-self: center;
  width: 8px;
  height: 8px;
  border: 1px solid var(--crm-acento);
  border-radius: 50%;
}

/* Un solo bucle en la vista: el filo de luz bajo lo que falta. */
.crm-wa-espera > li[data-pendiente]::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--crm-acento) 50%, transparent);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  background-position: -40% 0;
  pointer-events: none;
  animation: crm-filo-continuo var(--crm-t-filo) var(--crm-curva) infinite;
}

.crm-wa-espera > li.crm-wa-espera-ultima {
  display: block;
  min-height: 0;
  padding: 12px 0 0;
  border-bottom: 0;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
}

@media (prefers-reduced-motion: reduce) {
  .crm-wa-espera > li[data-pendiente]::after {
    animation: none;
    background: var(--crm-acento-linea);
    background-size: auto;
  }
}

/* ── Celebración: el resguardo de la línea y lo que queda activo ─────── */
.crm-wa-celebracion .crm-wa-numero {
  margin-top: 24px;
}

.crm-wa-activo {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.crm-wa-activo li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--crm-text-2);
  font-size: 13px;
  line-height: 20px;
}

.crm-wa-activo svg {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--crm-muted);
  stroke-width: 1.5;
}

/* ── Número de WhatsApp ──────────────────────────────────────────────── */
.crm-wa-numero {
  min-width: 0;
  max-width: 100%;
}

.crm-wa-numero[data-forma="resguardo"] {
  container: crm-wa-numero / inline-size;
  width: 100%;
  max-width: 560px;
  text-align: left;
}

.crm-wa-resguardo {
  display: grid;
  grid-template-columns: 64px 1px minmax(0, 1fr);
  border: 1px solid var(--crm-line-2);
  background: var(--crm-panel);
}

.crm-wa-talon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 8px;
}

.crm-wa-talon-rotulo {
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crm-wa-talon-iso {
  color: var(--crm-text);
  font-family: var(--crm-mono);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}

.crm-wa-talon-prefijo {
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 12px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

/* El corte: punteado con dos muescas cuadradas de 6 (radio 0), como el talón de un alta. */
.crm-wa-corte {
  position: relative;
  border-left: 1px dashed var(--crm-line-2);
}

.crm-wa-corte::before,
.crm-wa-corte::after {
  content: "";
  position: absolute;
  left: -4px;
  width: 6px;
  height: 6px;
  border: 1px solid var(--crm-line-2);
  background: var(--crm-bg);
}

.crm-wa-corte::before {
  top: -1px;
  border-top: 0;
}

.crm-wa-corte::after {
  bottom: -1px;
  border-bottom: 0;
}

.crm-conector-ficha .crm-wa-corte::before,
.crm-conector-ficha .crm-wa-corte::after {
  background: var(--crm-panel);
}

.crm-wa-cuerpo {
  display: grid;
  justify-items: start;
  gap: 4px;
  min-width: 0;
  padding: 12px 16px;
}

.crm-wa-cifra-fila {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}

.crm-wa-cifra {
  color: var(--crm-text);
  font-family: var(--crm-mono);
  font-size: 28px;
  font-weight: 500;
  line-height: 32px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* La cifra nunca se corta (§14): baja de escalón antes. */
.crm-wa-cifra .crm-copiable-texto {
  overflow: visible;
}

.crm-wa-nombre {
  margin: 0;
  color: var(--crm-text);
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  overflow-wrap: anywhere;
}

.crm-wa-nombre[data-pendiente] {
  color: var(--crm-muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
}

@container crm-wa-numero (max-width: 399px) {
  .crm-wa-resguardo {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1px auto;
  }

  .crm-wa-talon {
    flex-direction: row;
    justify-content: flex-start;
    gap: 8px;
    padding: 8px 16px;
  }

  .crm-wa-corte {
    border-top: 1px dashed var(--crm-line-2);
    border-left: 0;
  }

  .crm-wa-corte::before {
    top: -4px;
    left: -1px;
    border-top: 1px solid var(--crm-line-2);
    border-left: 0;
  }

  .crm-wa-corte::after {
    top: -4px;
    right: -1px;
    bottom: auto;
    left: auto;
    border-right: 0;
    border-bottom: 1px solid var(--crm-line-2);
  }

  .crm-wa-cifra {
    font-size: 20px;
    line-height: 24px;
  }
}

/* En una línea; si no cabe, lo accesorio (nombre, estado, «Ejemplo») baja: el número nunca se corta. */
.crm-wa-numero[data-forma="linea"] {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 4px;
  gap: 8px;
  min-width: 0;
}

.crm-wa-iso {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 24px;
  height: 20px;
  padding: 0 4px;
  border: 1px solid var(--crm-line-2);
  color: var(--crm-text-2);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
}

.crm-wa-iso[data-vacio] {
  visibility: hidden;
}

.crm-wa-numero-texto {
  flex: none;
  color: var(--crm-text);
  font-family: var(--crm-mono);
  font-size: 13px;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.crm-wa-numero-texto .crm-copiable-texto {
  overflow: visible;
}

.crm-wa-numero-nombre {
  min-width: 0;
  overflow: hidden;
  color: var(--crm-muted);
  font-size: 13px;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-wa-numero-invalido {
  color: var(--crm-dim);
  font-size: 13px;
  line-height: 20px;
}

/* ── Ficha de conector ───────────────────────────────────────────────── */
.crm-conector-ficha {
  container: crm-conector-ficha / inline-size;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--crm-line);
  background: var(--crm-panel);
}

.crm-conector-ficha-cabeza {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
}

.crm-conector-ficha-icono {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--crm-line-2);
  color: var(--crm-text-2);
}

.crm-conector-ficha-icono svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.6;
}

.crm-conector-ficha-titulo {
  min-width: 0;
}

.crm-conector-ficha-nombre {
  margin: 0;
  overflow: hidden;
  color: var(--crm-text);
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Qué hace: una frase que refluye a dos líneas como mucho (el entero, en el consejo nativo del título). */
.crm-conector-ficha-que {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--crm-muted);
  font-size: 13px;
  line-height: 20px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.crm-conector-ficha-estado {
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}

.crm-conector-ficha-identidad,
.crm-conector-ficha-cuerpo {
  display: grid;
  gap: 12px;
  min-width: 0;
}

/*
 * Pie: la actividad (firma) entera y la acción. Si no caben en una fila, la acción baja a la siguiente, a la
 * derecha; la actividad nunca se corta (la cifra de «hace 10 h» es la firma). La acción no pasa del ancho de la
 * ficha ni de 320 (§14): su texto hace elipsis y el entero va en el consejo.
 */
.crm-conector-ficha-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 12px;
  min-height: 32px;
  margin-top: auto;
}

.crm-conector-ficha-actividad {
  flex: 1 0 auto;
  max-width: 100%;
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 12px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.crm-conector-ficha-actividad:empty {
  display: none;
}

.crm-conector-ficha-accion {
  min-width: 0;
  max-width: min(100%, 320px);
}

.crm-conector-ficha-accion-texto {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-conector-ficha[data-disponibilidad="proximamente"] .crm-conector-ficha-nombre {
  color: var(--crm-text-2);
}

.crm-conector-ficha[data-disponibilidad="proximamente"] .crm-conector-ficha-icono {
  color: var(--crm-muted);
}

.crm-conector-ficha[data-esqueleto] {
  gap: 12px;
  min-height: 160px;
}

@container crm-conector-ficha (max-width: 319px) {
  .crm-conector-ficha-cabeza {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .crm-conector-ficha-estado {
    grid-column: 2;
    justify-content: flex-start;
  }
}

/* ── Catálogo ────────────────────────────────────────────────────────── */
.crm-conectores {
  container: crm-conectores / inline-size;
  display: grid;
  gap: 32px;
  min-width: 0;
}

.crm-conectores-barra {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 320px;
}

.crm-conectores-barra > * {
  flex: 1;
}

.crm-conectores-secciones {
  display: grid;
  gap: 32px;
}

.crm-conectores-seccion {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.crm-conectores-rotulo {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crm-conectores-cuenta {
  color: var(--crm-dim);
  font-variant-numeric: tabular-nums;
}

.crm-conectores-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crm-conectores-rejilla > li {
  min-width: 0;
}

.crm-conectores-rejilla > li[data-ancho="doble"] {
  grid-column: span 2;
}

@container crm-conectores (max-width: 719px) {
  .crm-conectores-barra {
    max-width: none;
  }

  .crm-conectores-rejilla > li[data-ancho="doble"] {
    grid-column: auto;
  }
}

/* ── Bandeja ─────────────────────────────────────────────────────────── */
.crm-wa-bandeja {
  container: crm-wa-bandeja / inline-size;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  height: 100%;
  min-height: 480px;
  border: 1px solid var(--crm-line);
  background: var(--crm-bg);
}

.crm-wa-bandeja[data-vacia] {
  display: block;
  padding: 48px 24px;
}

.crm-wa-lista {
  display: flex;
  flex-direction: column;
  width: 320px;
  min-width: 0;
  min-height: 0;
  border-right: 1px solid var(--crm-line);
  background: var(--crm-panel);
}

.crm-wa-lista-cabecera {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 44px;
  min-width: 0;
  padding: 0 12px;
  border-bottom: 1px solid var(--crm-line);
}

.crm-wa-lista-busqueda {
  padding: 8px 12px;
  border-bottom: 1px solid var(--crm-line);
}

.crm-wa-conversaciones {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.crm-wa-conversacion {
  position: relative;
  display: grid;
  align-content: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 4px 12px;
  border: 0;
  border-bottom: 1px solid var(--crm-line);
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--crm-t-salida) linear;
}

@media (hover: hover) {
  .crm-wa-conversacion:hover {
    background: var(--crm-panel-2);
    transition-duration: 0ms;
  }
}

.crm-wa-conversacion[aria-current="true"] {
  background: var(--crm-panel-3);
}

.crm-wa-conversacion[aria-current="true"]::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: var(--crm-acento);
}

.crm-wa-conversacion:focus-visible {
  outline: var(--crm-foco-ancho) solid var(--crm-acento);
  outline-offset: -1px;
}

.crm-wa-conversacion-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.crm-wa-conversacion-nombre {
  min-width: 0;
  overflow: hidden;
  color: var(--crm-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-wa-conversacion-nombre[data-numero] {
  font-family: var(--crm-mono);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.crm-wa-conversacion-hora {
  flex: none;
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 12px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

.crm-wa-conversacion-ultimo {
  min-width: 0;
  overflow: hidden;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-wa-conversacion[data-sin-leer] .crm-wa-conversacion-ultimo {
  color: var(--crm-text-2);
}

.crm-wa-conversacion-esqueleto {
  display: grid;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--crm-line);
}

.crm-wa-lista-cargando {
  flex: 1;
}

.crm-wa-paginas {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  height: 44px;
  padding: 0 8px 0 12px;
  border-top: 1px solid var(--crm-line);
}

.crm-wa-paginas-botones {
  display: flex;
  flex: none;
  gap: 4px;
}

.crm-wa-paginas-rango {
  margin-right: auto;
  white-space: nowrap;
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 12px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

.crm-wa-hilo {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.crm-wa-hilo > .crm-vacio,
.crm-wa-hilo > .crm-aviso,
.crm-wa-hilo-cargando {
  margin: 24px;
}

.crm-wa-hilo-cabecera {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border-bottom: 1px solid var(--crm-line);
}

.crm-wa-hilo-nombre {
  min-width: 0;
  overflow: hidden;
  color: var(--crm-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-wa-volver {
  display: none;
}

.crm-wa-conversacion-hilo {
  flex: 1;
  min-height: 0;
}

/* El hilo y su pie respiran 16 a los lados (24 en ancho), como el contenido de un panel. */
.crm-wa-conversacion-hilo .crm-conversacion-columna {
  padding-inline: 16px;
}

.crm-wa-conversacion-hilo .crm-conversacion-pie {
  padding-bottom: 16px;
}

.crm-wa-anteriores {
  display: flex;
  justify-content: center;
  padding: 8px 0;
}

.crm-wa-dia {
  margin: 16px 0 8px;
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

.crm-wa-texto {
  max-width: 68ch;
  margin: 0;
  font-size: 14px;
  line-height: 22px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.crm-wa-texto[data-no-soportado] {
  color: var(--crm-muted);
}

.crm-wa-plantilla-rotulo {
  margin: 0 0 4px;
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crm-wa-entrega {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 4px 0 0;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

.crm-wa-entrega svg {
  flex: none;
  width: 14px;
  height: 14px;
  stroke-width: 1.5;
}

.crm-wa-entrega[data-estado="leido"] {
  color: var(--crm-text-2);
}

.crm-wa-entrega[data-estado="fallido"] {
  color: var(--crm-error);
}

.crm-wa-adjunto {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  max-width: 360px;
  padding: 8px;
  border: 1px solid var(--crm-line-2);
  background: var(--crm-panel);
}

.crm-wa-adjunto-icono {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--crm-line);
  color: var(--crm-text-2);
}

.crm-wa-adjunto-icono svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.6;
}

.crm-wa-adjunto-texto {
  display: grid;
  min-width: 0;
}

.crm-wa-adjunto-nombre {
  overflow: hidden;
  color: var(--crm-text);
  font-size: 13px;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-wa-adjunto-meta {
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 12px;
  line-height: 16px;
}

.crm-wa-adjunto-pie {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 14px;
  line-height: 22px;
  overflow-wrap: anywhere;
}

.crm-wa-pie {
  display: grid;
  gap: 8px;
}

.crm-wa-ventana {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

.crm-wa-ventana svg {
  flex: none;
  margin-top: 1px;
  width: 14px;
  height: 14px;
  stroke-width: 1.5;
}

.crm-wa-ventana[data-cerca] {
  color: var(--crm-aviso);
}

.crm-wa-ventana[data-estado="cerrada"] {
  color: var(--crm-text-2);
}

/* Lo que propone el agente espera a una persona: filo de acento de 2 a la izquierda. */
.crm-wa-propuesta {
  display: grid;
  gap: 8px;
  padding: 12px 12px 12px 14px;
  border: 1px solid var(--crm-line-2);
  border-left: 2px solid var(--crm-acento-linea);
  background: var(--crm-panel);
}

.crm-wa-propuesta-rotulo {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
}

.crm-wa-propuesta-rotulo svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.5;
}

.crm-wa-propuesta-texto {
  margin: 0;
  color: var(--crm-text-2);
  font-size: 14px;
  line-height: 22px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.crm-wa-propuesta-acciones {
  display: flex;
  gap: 8px;
}

.crm-wa-envio-plantilla {
  display: grid;
  gap: 12px;
}

.crm-wa-plantilla-variables {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 12px;
}

.crm-wa-plantilla-vista {
  margin: 0;
  padding: 12px;
  border: 1px dashed var(--crm-line-2);
  color: var(--crm-text-2);
  font-size: 14px;
  line-height: 22px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.crm-wa-envio-plantilla-pie {
  display: flex;
  justify-content: flex-end;
}

/* Estrecho: una cosa cada vez (lista o hilo), con «Volver». */
.crm-wa-hilo-numero {
  display: flex;
  flex: none;
  min-width: 0;
}

@container crm-wa-bandeja (max-width: 719px) {
  .crm-wa-bandeja[data-vista="lista"] .crm-wa-hilo,
  .crm-wa-bandeja[data-vista="hilo"] .crm-wa-lista {
    display: none;
  }

  .crm-wa-lista,
  .crm-wa-hilo {
    grid-column: 1 / -1;
    width: auto;
    border-right: 0;
  }

  .crm-wa-volver {
    display: inline-flex;
  }

  /* Con nombre, el número cede la cabecera a menos de 560: el nombre manda y el número sigue en la lista. */
  .crm-wa-hilo-numero {
    display: none;
  }

  .crm-wa-adjunto {
    max-width: 100%;
  }
}

/*
 * Familia «integraciones · actividad»: RegistroActividadConector y AvisoConector.
 * Solo variables --crm-*, radio 0, filetes de 1 px, sin sombras (nivel 0, flujo).
 * Hoja propia de la familia: la integración en la hoja común y en el build la
 * decide dirección (docs/integraciones/actividad/INTEGRACION.md).
 */

:where(.crm-actividad, .crm-aviso-conector),
:where(.crm-actividad, .crm-aviso-conector) *,
:where(.crm-actividad, .crm-aviso-conector) ::before,
:where(.crm-actividad, .crm-aviso-conector) ::after {
  box-sizing: border-box;
}

/* ══ Registro de actividad ═══════════════════════════════════════════ */
.crm-actividad {
  container-type: inline-size;
  display: grid;
  gap: 16px;
  min-width: 0;
  color: var(--crm-text-2);
  font-family: var(--crm-sans);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: -0.005em;
}

.crm-actividad-registro {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.crm-actividad-dia {
  --crm-actividad-hora: 40px;
  min-width: 0;
}

/* Si la página trae la hora repetida (al atrasar el reloj), la columna de la hora da sitio a su desfase en TODOS
   los días: la acción sigue cayendo en la misma vertical. */
.crm-actividad-registro:has(.crm-actividad-desfase) .crm-actividad-dia {
  --crm-actividad-hora: 80px;
}

.crm-actividad-dia-rotulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  height: 32px;
  margin: 0;
  border-bottom: 1px solid var(--crm-line);
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crm-actividad-dia-rotulo > span {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-actividad-zona {
  flex: none;
  color: var(--crm-dim);
  letter-spacing: 0;
  text-transform: none;
}

/* El filete de actividad: un carril de 1 px por el centro de la columna de 16. */
.crm-actividad-carril,
.crm-actividad-esqueleto {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crm-actividad-carril::before,
.crm-actividad-esqueleto::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 7px;
  width: 1px;
  background: var(--crm-line-2);
}

.crm-actividad-fila {
  position: relative;
  display: grid;
  grid-template-columns: 16px var(--crm-actividad-hora, 40px) minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  min-height: 36px;
  padding: 8px 8px 8px 0;
  outline: none;
  transition: background-color var(--crm-t-salida) var(--crm-snap);
}

/* Filete entre filas, desde la hora: el carril nunca se corta. */
.crm-actividad-fila::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 28px;
  height: 1px;
  background: var(--crm-line);
}

.crm-actividad-fila:last-child::after {
  content: none;
}

@media (hover: hover) {
  .crm-actividad-carril .crm-actividad-fila:hover {
    background: var(--crm-panel-2);
    transition-duration: 0ms;
  }
}

.crm-actividad-fila:focus-visible {
  outline: var(--crm-foco-ancho) solid var(--crm-acento);
  outline-offset: -1px;
}

/* Estados pintados de verdad en la lámina (PIEZA §3). */
.crm-actividad-fila[data-crm-forzar="hover"] {
  background: var(--crm-panel-2);
}

.crm-actividad-fila[data-crm-forzar="foco"] {
  outline: var(--crm-foco-ancho) solid var(--crm-acento);
  outline-offset: -1px;
}

/* La muesca: cada entrada cruza el carril. La de un fallo, en su tono (y lo dice su texto). */
.crm-actividad-muesca {
  position: absolute;
  top: 17px;
  left: 3px;
  width: 9px;
  height: 1px;
  background: var(--crm-muted);
}

.crm-actividad-fila[data-resultado="error"] .crm-actividad-muesca {
  top: 15px;
  left: 5px;
  width: 5px;
  height: 5px;
  background: var(--crm-error);
}

.crm-actividad-hora {
  grid-column: 2;
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  color: var(--crm-text-2);
  font-family: var(--crm-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 20px;
  white-space: nowrap;
  cursor: default;
}

.crm-actividad-desfase {
  color: var(--crm-muted);
  font-size: 11px;
  line-height: 16px;
}

.crm-actividad-cuerpo {
  grid-column: 3;
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}

/* Posicionados: el texto para el lector (.crm-sr, absoluto) se queda dentro de su recorte y no ensancha la página. */
.crm-actividad-hora,
.crm-actividad-que,
.crm-actividad-quien,
.crm-actividad-motivo {
  position: relative;
}

/*
 * Qué pasó manda: la celda de la acción toma lo que sobra (base 0) y nunca baja del ancho de la acción;
 * el conector que la acompaña se corta primero. La meta conserva su tamaño mientras quepa y, si no,
 * cede: dentro de ella, quién (encoge 4) antes que el motivo (encoge 1).
 */
/* Sin overflow: hidden (anularía el mínimo automático del elemento flex): recorta el conector, no la celda. */
.crm-actividad-que {
  display: flex;
  flex: 1 1 0%;
  align-items: baseline;
  color: var(--crm-text);
  white-space: nowrap;
}

.crm-actividad-accion {
  flex: none;
}

/* Su ancho intrínseco no cuenta (contain): ocupa lo que deje la acción y se corta con elipsis. */
.crm-actividad-que .crm-actividad-conector {
  overflow: hidden;
  min-width: 0;
  flex: 1 1 0%;
  contain: inline-size;
  text-overflow: ellipsis;
  white-space: pre;
}

.crm-actividad-conector {
  color: var(--crm-muted);
}

/* Copia del conector para la línea de meta: solo por debajo de 560 (ver el @container). */
.crm-actividad-conector-meta {
  display: none;
}

/* La meta puede encoger hasta lo que deje la acción (que tiene suelo propio); dentro, cede antes quién que el motivo. */
.crm-actividad-meta {
  display: flex;
  flex: 0 1 auto;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
}

/* Si no cabe todo, cede primero quién; el motivo de un fallo es lo último que se corta. */
.crm-actividad-quien {
  flex: 0 4 auto;
  overflow: hidden;
  min-width: 0;
  max-width: 160px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* En bloque (no flex): comparte línea base con la acción y la fila no crece. */
.crm-actividad-motivo {
  flex: 0 1 auto;
  display: block;
  overflow: hidden;
  min-width: 0;
  max-width: 280px;
  color: var(--crm-error);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-actividad-motivo svg {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  vertical-align: -2px;
}

/* Cargando: filas de esqueleto (tras 300 ms) o el hueco guardado mientras tanto. */
.crm-actividad-esqueleto .crm-actividad-fila {
  grid-template-columns: 16px 40px minmax(0, 1fr);
}

.crm-actividad-esq-hora {
  grid-column: 2;
}

.crm-actividad-esq-texto {
  grid-column: 3;
}

.crm-actividad-espera {
  min-height: 216px;
}

/* ── Páginas ─────────────────────────────────────────────────────────── */
.crm-actividad-paginas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding-top: 12px;
  border-top: 1px solid var(--crm-line);
}

.crm-actividad-tramo {
  color: var(--crm-text-2);
  font-family: var(--crm-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 16px;
  white-space: nowrap;
}

.crm-actividad-de {
  color: var(--crm-muted);
}

.crm-actividad-pasar {
  display: flex;
  gap: 8px;
}

/* < 560: la fila pasa a dos líneas (qué arriba; quién y motivo debajo), como la tabla en modo lista (§15). */
@container (max-width: 559px) {
  .crm-actividad-fila {
    align-items: start;
  }

  .crm-actividad-cuerpo {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  /* La acción se lee entera: parte en líneas en vez de cortarse (al dedo no hay consejo). */
  .crm-actividad-que {
    display: block;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* El conector pasa a la línea de meta, entero, delante de quién. */
  .crm-actividad-que .crm-actividad-conector {
    display: none;
  }

  .crm-actividad-conector-meta {
    display: inline;
    color: var(--crm-text-2);
    overflow-wrap: anywhere;
  }

  .crm-actividad-quien {
    max-width: 100%;
  }

  /* El desfase va debajo de la hora: la columna vuelve a 40 y el texto recupera su ancho. */
  .crm-actividad-registro:has(.crm-actividad-desfase) .crm-actividad-dia {
    --crm-actividad-hora: 40px;
  }

  .crm-actividad-hora {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .crm-actividad-meta {
    flex-wrap: wrap;
    gap: 0 12px;
    min-width: 0;
  }

  .crm-actividad-motivo {
    max-width: 100%;
  }

  .crm-actividad-pasar {
    flex: 1 1 100%;
  }

  .crm-actividad-pasar .crm-boton {
    flex: 1 1 0;
  }
}

/* ══ Aviso de conector ═══════════════════════════════════════════════ */
.crm-aviso-conector {
  --crm-aviso-conector-tono: var(--crm-aviso);
  container-type: inline-size;
  min-width: 0;
  font-family: var(--crm-sans);
}

.crm-aviso-conector[data-tono="error"] {
  --crm-aviso-conector-tono: var(--crm-error);
}

.crm-aviso-conector[data-tono="hecho"] {
  --crm-aviso-conector-tono: var(--crm-acento);
}

/* Filo de tono solo a la izquierda (F10), de 1 px como todo filete: la jerarquía la da el color, no el grosor. */
.crm-aviso-conector-caja {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  border: 1px solid var(--crm-line-2);
  border-left-color: var(--crm-aviso-conector-tono);
  background: var(--crm-panel);
}

.crm-aviso-conector-cuerpo {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-content: center;
  gap: 2px 8px;
  min-width: 0;
  padding: 12px 16px;
}

.crm-aviso-conector-icono {
  grid-row: 1;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--crm-aviso-conector-tono);
}

.crm-aviso-conector-titulo {
  grid-column: 2;
  margin: 0;
  color: var(--crm-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.005em;
  overflow-wrap: anywhere;
}

.crm-aviso-conector-detalle {
  grid-column: 2;
  margin: 0;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
  overflow-wrap: anywhere;
}

/* El talón: separado por una perforación de 1 px, como el resguardo de un abono. */
.crm-aviso-conector-talon {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 12px 16px;
  border-left: 1px dashed var(--crm-line-2);
}

.crm-aviso-conector-talon[data-sin-permiso] {
  max-width: 280px;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 16px;
}

.crm-aviso-conector-candado {
  flex: none;
  width: 14px;
  height: 14px;
}

/* < 480: el talón baja y la perforación se vuelve horizontal; la acción, a todo el ancho del talón. */
@container (max-width: 479px) {
  .crm-aviso-conector-caja {
    grid-template-columns: minmax(0, 1fr);
  }

  .crm-aviso-conector-talon {
    padding: 12px 16px;
    border-top: 1px dashed var(--crm-line-2);
    border-left: 0;
  }

  .crm-aviso-conector-talon[data-sin-permiso] {
    max-width: none;
  }

  .crm-aviso-conector-talon .crm-boton {
    flex: 1 1 auto;
  }
}

/* El trazo de los iconos en botones compactos de esta familia conserva el 1.6 px solicitado. */
.crm-actividad .crm-boton.crm-boton[data-tamano="compacto"] .crm-boton-icono svg,
.crm-aviso-conector .crm-boton.crm-boton[data-tamano="compacto"] .crm-boton-icono svg {
  stroke-width: 1.6;
}

/*
 * Táctil (ley de la noche): toda acción de la familia mide al menos 48 × 48 al dedo, en alto y en ancho
 * (Reintentar, Quitar filtro, páginas, Volver a autorizar). Solo dentro de la familia: el Boton del canon no cambia fuera.
 * Doble clase para ganar a los tamaños del canon sin depender del orden de las hojas.
 */
@media (pointer: coarse) {
  :is(.crm-actividad, .crm-aviso-conector) .crm-boton.crm-boton {
    --crm-boton-alto: 48px;
    min-width: 48px;
  }

  :is(.crm-actividad, .crm-aviso-conector) .crm-boton.crm-boton::after {
    content: none;
  }
}

@media (forced-colors: active) {
  .crm-actividad-muesca,
  .crm-actividad-carril::before,
  .crm-actividad-esqueleto::before {
    background: CanvasText;
  }

  .crm-aviso-conector-caja {
    border-left-color: CanvasText;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crm-actividad-fila {
    transition: none;
  }
}

/*
 * Familia «integraciones · alta»: el alta universal de conectores dentro de
 * ModoFoco. Solo variables --crm-*, radio 0, filetes de 1 px, sin sombras
 * (nivel 0, flujo). Hoja propia: su entrada en la hoja común y en el build la
 * decide dirección (docs/integraciones/alta/README.md).
 */

:where(.crm-alta) :where(.crm-alta-alcance, .crm-alta-autorizacion, .crm-alta-fichero, .crm-alta-resumen),
:where(.crm-alta) :where(.crm-alta-alcance, .crm-alta-autorizacion, .crm-alta-fichero, .crm-alta-resumen) * {
  box-sizing: border-box;
}

/* Táctil: TODAS las acciones del alta miden 48, también las secundarias y «Salir». */
.crm-alta .crm-boton,
.crm-alta .crm-zona-soltar button {
  min-height: 48px;
  min-width: 48px;
}

/* Campo secreto: la caja entera es la diana, a 48 (la entrada del kit va a 40 en «grande»). */
.crm-alta-campo .crm-entrada {
  --crm-entrada-alto: 48px;
}

/* Elección: por debajo de 3 × 240 + 2 × 12 (744) de contenedor, una columna (nunca 2 + 1). */
.crm-alta-eleccion {
  container-type: inline-size;
}

@container (max-width: 743px) {
  .crm-alta-eleccion .crm-alta-fichas.crm-alta-fichas[data-disposicion] {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Alcance: tres listas en filas con filete ── */
.crm-alta-alcance {
  container-type: inline-size;
  display: grid;
  border-top: 1px solid var(--crm-line);
}

.crm-alta-alcance-bloque {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--crm-line);
}

.crm-alta-rotulo {
  margin: 0;
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
  padding-top: 4px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crm-alta-lista {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crm-alta-lista li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 8px;
  color: var(--crm-text-2);
  font-size: 15px;
  line-height: 24px;
}

.crm-alta-lista-icono {
  display: flex;
  height: 24px;
  align-items: center;
  color: var(--crm-muted);
}

.crm-alta-alcance-bloque[data-tono="puede"] .crm-alta-lista-icono {
  color: var(--crm-acento);
}

.crm-alta-lista-icono svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.6;
}

.crm-alta-vacio,
.crm-alta-nota {
  margin: 0;
  color: var(--crm-muted);
  font-size: 15px;
  line-height: 24px;
}

@container (max-width: 559px) {
  .crm-alta-alcance-bloque {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
}

/* ── OAuth: la espera ── */
.crm-alta-autorizacion {
  display: grid;
  gap: 24px;
}

.crm-alta-autorizacion-accion {
  display: flex;
  justify-content: flex-start;
}

/* ── Resumen dentro de la celebración ── */
.crm-alta-celebracion .crm-alta-resumen {
  width: 100%;
  min-width: 0;
  margin-top: 24px;
  text-align: left;
  container-type: inline-size;
}

@container (max-width: 399px) {
  .crm-alta-resumen .crm-lista-desc-par {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
}

.crm-alta svg {
  stroke-width: 1.6;
}

/*
 * Iconos a 16 en las fichas grandes de la elección (ley del encargo de integraciones: lucide de 14/16 a trazo 1,6;
 * decisión literal de root, docs/integraciones/cobros/DECISION-ICONOS.md). La pieza del núcleo los pinta a 20 con
 * `.crm-ficha-opcion-icono svg` (0,1,1); esta, solo dentro del alta, en línea y en capa, pesa (0,2,1). La caja de 48
 * centra el icono: no cambia su medida.
 */
.crm-alta .crm-ficha-opcion-icono svg {
  width: 16px;
  height: 16px;
}

/*
 * Colores forzados: el tema da al principal fondo `ButtonText` y texto `ButtonFace` (00-temas.css), y con el ajuste
 * automático el navegador pinta la placa `Canvas` tras el texto: blanco sobre blanco. Solo aquí y solo el principal
 * habilitado del alta: los mismos tokens del tema, opacos y sin placa. El canon no se toca.
 */
@media (forced-colors: active) {
  .crm-alta .crm-boton[data-variante="principal"]:not([data-deshabilitado], :disabled),
  .crm-alta .crm-boton[data-variante="principal"]:not([data-deshabilitado], :disabled):hover,
  .crm-alta .crm-boton[data-variante="principal"]:not([data-deshabilitado], :disabled):active {
    forced-color-adjust: none;
    border-color: var(--crm-boton);
    background: var(--crm-boton);
    color: var(--crm-boton-tinta);
  }
}

@media (prefers-reduced-motion: reduce) {
  .crm-alta-alcance,
  .crm-alta-autorizacion,
  .crm-alta-fichero {
    transition: none;
    animation: none;
  }
}

/* Verifactu: la identidad fiscal y el QR tributario generado en la central. */
.crm-alta-identidad-prevista { margin: 0; padding: 16px; border: 1px solid var(--crm-line); font: 400 13px/20px var(--crm-mono); overflow-wrap: anywhere; }
.crm-verifactu-identidad { display: grid; gap: 4px; overflow-wrap: anywhere; }
.crm-verifactu-identidad > span { font-family: var(--crm-mono); }
.crm-verifactu-nota, .crm-verifactu-qr-nota { margin: 0; color: var(--crm-text-2); font-size: 13px; line-height: 20px; overflow-wrap: anywhere; }
.crm-verifactu-qr { display: grid; align-content: start; align-self: start; justify-items: start; gap: 8px; margin: 0; max-width: 100%; }
.crm-verifactu-qr-titulo { color: var(--crm-text); font: 500 13px/20px var(--crm-sans); }
.crm-verifactu-qr-imagen { display: block; width: 47mm; height: auto; max-width: 100%; }
.crm-verifactu-qr-enlace { display: inline-flex; align-items: center; min-height: 48px; color: var(--crm-text); font-size: 13px; text-underline-offset: 3px; }
.crm-verifactu-qr-enlace:focus-visible { outline: 1px solid var(--crm-acento); outline-offset: 2px; }

.crm-verifactu-qr-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  align-content: start;
  gap: 24px;
  max-width: 1000px;
  margin: 40px auto;
  padding: 24px;
}

.crm-verifactu-qr-grilla-compacta {
  margin: 0;
  padding: 0;
}

.crm-verifactu-lamina {
  box-sizing: border-box;
  width: 100%;
  max-width: 1100px;
  min-width: 0;
  margin: 0 auto;
  padding: 32px;
}

.crm-verifactu-lamina-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px;
  min-width: 0;
}

.crm-verifactu-lamina-leyenda { margin: 0 0 8px; color: var(--crm-text-2); font-size: 13px; line-height: 20px; }
.crm-verifactu-lamina-titulo { margin: 0 0 20px; color: var(--crm-text); font: 500 20px/28px var(--crm-sans); }

@media (max-width: 719px) {
  .crm-verifactu-lamina { padding: 16px; }
}

/*
 * Familia «integraciones · cobros»: ConectarCobros (FichaConector + AltaConector, sin clonar ninguno) y
 * MandatoSepa. Solo variables --crm-*, radio 0, filetes de 1 px, sin sombras (nivel 0, flujo). Hoja propia: su
 * entrada en la hoja común y en el build la decide dirección (docs/integraciones/cobros/README.md). Necesita la
 * hoja del alta (comun/alta/alta.css) y la de conectores (conectores/conectores.css).
 */

:where(.crm-cobros, .crm-mandato),
:where(.crm-cobros, .crm-mandato) * {
  box-sizing: border-box;
}

/* ── ConectarCobros ── */

/* Rejilla: en línea, el alta estira hasta el alto que le dé su contenedor (como cuando va sola). */
.crm-cobros {
  display: grid;
  min-width: 0;
}

/* Táctil: la acción de la ficha también a 48 × 48, como las del alta. */
.crm-cobros .crm-boton {
  min-height: 48px;
  min-width: 48px;
}

.crm-cobros svg.lucide {
  stroke-width: 1.6;
}

.crm-cobros-identidad {
  overflow-wrap: anywhere;
  color: var(--crm-text);
  font-family: var(--crm-mono);
  font-size: 13px;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
}

.crm-cobros-nota {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--crm-text-2);
  font-size: 13px;
  line-height: 20px;
}

/* ── MandatoSepa: la orden de domiciliación, en filas con filete ── */

.crm-mandato {
  container: crm-mandato / inline-size;
  position: relative;
  display: grid;
  min-width: 0;
  margin: 0;
  border: 1px solid var(--crm-line);
  background: var(--crm-panel);
  color: var(--crm-text);
}

/* Lo que espera al banco lleva filo de acento (GRAMATICA §3.6), dentro de la medida. */
.crm-mandato[data-estado="pendiente"]::before {
  content: "";
  position: absolute;
  inset: -1px auto -1px -1px;
  width: 2px;
  background: var(--crm-acento);
}

.crm-mandato-cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  min-height: 48px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--crm-line);
}

.crm-mandato-rotulo {
  margin: 0;
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crm-mandato-referencia {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 20px 20px 16px;
}

/* La firma: la referencia escrita sobre su renglón, como en el impreso. */
.crm-mandato-renglon {
  display: block;
  min-width: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--crm-control);
  overflow-wrap: anywhere;
  color: var(--crm-text);
  font-family: var(--crm-mono);
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.crm-mandato-datos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--crm-line);
}

.crm-mandato-dato {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  padding: 12px 20px 16px;
}

.crm-mandato-dato + .crm-mandato-dato {
  border-left: 1px solid var(--crm-line);
}

.crm-mandato-dato dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--crm-text);
  font-size: 15px;
  line-height: 24px;
}

/* La cuenta, tal como la enmascara el servidor: no se selecciona ni se arrastra (y la pieza no deja copiarla). */
.crm-mandato .crm-mandato-cuenta {
  font-family: var(--crm-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  -webkit-user-select: none;
  user-select: none;
}

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

.crm-mandato-pie {
  padding: 16px 20px;
  border-top: 1px solid var(--crm-line);
}

.crm-mandato svg.lucide {
  stroke-width: 1.6;
}

@container crm-mandato (max-width: 479px) {
  .crm-mandato-cabeza,
  .crm-mandato-referencia,
  .crm-mandato-dato,
  .crm-mandato-pie {
    padding-right: 16px;
    padding-left: 16px;
  }

  .crm-mandato-renglon {
    font-size: 16px;
    line-height: 24px;
  }

  .crm-mandato-datos {
    grid-template-columns: minmax(0, 1fr);
  }

  .crm-mandato-dato + .crm-mandato-dato {
    border-top: 1px solid var(--crm-line);
    border-left: 0;
  }
}

/*
 * Colores forzados: la misma mitigación local que el alta (alta.css, P1-7) para el principal de la ficha, que
 * también sería blanco sobre blanco por la placa `Canvas`. Solo en esta media y con los tokens del tema.
 */
@media (forced-colors: active) {
  .crm-cobros .crm-boton[data-variante="principal"]:not([data-deshabilitado], :disabled),
  .crm-cobros .crm-boton[data-variante="principal"]:not([data-deshabilitado], :disabled):hover,
  .crm-cobros .crm-boton[data-variante="principal"]:not([data-deshabilitado], :disabled):active {
    forced-color-adjust: none;
    border-color: var(--crm-boton);
    background: var(--crm-boton);
    color: var(--crm-boton-tinta);
  }
}

/*
 * CatalogoCobros: GoCardless en el CatalogoConectores compartido. Solo lo imprescindible y solo dentro de
 * `.crm-cobros-catalogo`: táctil 48 y trazo 1,6 como en ConectarCobros (cobros.css), y la misma mitigación de colores
 * forzados para el principal. Sin chasis, color ni medida nueva. Necesita conectores.css, alta.css y cobros.css.
 * Su entrada en la hoja común la decide dirección (docs/integraciones/cobros/CATALOGO.md).
 */

.crm-cobros-catalogo {
  display: grid;
  min-width: 0;
}

/* Táctil: las acciones del catálogo a 48 × 48, como las de la ficha y el alta de cobros. Una fila, una altura. */
.crm-cobros-catalogo .crm-boton {
  min-height: 48px;
  min-width: 48px;
}

.crm-cobros-catalogo svg.lucide {
  stroke-width: 1.6;
}

/*
 * La lupa de la búsqueda heredada: la hoja de controles la pone a 1,5 en los campos compactos con
 * `.crm-entrada:is([data-tamano="mini"], [data-tamano="compacto"]) .crm-entrada-icono svg` (0,3,1), que gana a la
 * regla de arriba (0,2,1). Esta, solo dentro del catálogo de cobros y solo en el icono del campo de su barra, suma
 * cinco clases (0,5,1) y gana por especificidad, sin `!important` ni depender del orden de las hojas.
 */
.crm-cobros-catalogo .crm-conectores-barra .crm-entrada .crm-entrada-icono svg.lucide {
  stroke-width: 1.6;
}

/*
 * El icono del vacío del catálogo (sin resultados) a 16: el canon lo pinta a 20 con `.crm-vacio-icono svg` (0,1,1) y
 * la ley del encargo pide 14/16 (DECISION-ICONOS.md). Solo dentro de esta pieza, (0,2,1).
 */
.crm-cobros-catalogo .crm-vacio-icono svg {
  width: 16px;
  height: 16px;
}

/* La búsqueda es un control editable: a menos de 720 de contenedor, también 48 (FUNDAMENTOS §2, táctil). */
@container crm-conectores (max-width: 719px) {
  .crm-cobros-catalogo .crm-conectores-barra .crm-entrada {
    --crm-entrada-alto: 48px;
  }
}

/* Colores forzados: el principal no puede quedar blanco sobre blanco por la placa `Canvas` (cobros.css, alta.css P1-7). */
@media (forced-colors: active) {
  .crm-cobros-catalogo .crm-boton[data-variante="principal"]:not([data-deshabilitado], :disabled),
  .crm-cobros-catalogo .crm-boton[data-variante="principal"]:not([data-deshabilitado], :disabled):hover,
  .crm-cobros-catalogo .crm-boton[data-variante="principal"]:not([data-deshabilitado], :disabled):active {
    forced-color-adjust: none;
    border-color: var(--crm-boton);
    background: var(--crm-boton);
    color: var(--crm-boton-tinta);
  }
}

/*
 * Capa de marca de Criterium (crm-*). Paleta y tipografía propias de la casa
 * (las de criterium.pro), independientes del tema de la app: el acceso, el
 * pie y la Vista Agente siguen el tema de su zona (grafito por defecto) y el
 * verde es el de Criterium. El logotipo y la «C» van
 * incrustados: el build sustituye los dos marcadores de url() por data URI.
 */

:where(.crm-marca, .crm-pie, .crm-firma, .crm-iso-fondo),
:where(.crm-marca, .crm-pie, .crm-firma, .crm-iso-fondo) *,
:where(.crm-marca, .crm-pie, .crm-firma, .crm-iso-fondo) ::before,
:where(.crm-marca, .crm-pie, .crm-firma, .crm-iso-fondo) ::after {
  box-sizing: border-box;
}

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

/* ── Firma: lockup + apellido ────────────────────────────────────────────
 * Lockup 7029,559 × 1000: mayúsculas del wordmark del 22,8 % al 78,8 % de la
 * altura (0,56 h), línea base a 0,212 h del pie. Geist: mayúscula 0,726 em y
 * línea base a 0,14 em del pie de la caja ⇒ font-size 0,7713 h y la caja sube
 * 0,104 h. Cada letra del apellido ocupa ~0,6 h.
 */
.crm-firma {
  --crm-h: 20px;
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  gap: calc(var(--crm-h) * 0.3);
  color: var(--crm-text);
  line-height: 1;
}

.crm-firma[data-tamano="md"] {
  --crm-h: 32px;
}

.crm-firma[data-tamano="lg"] {
  --crm-h: clamp(36px, 5vw, 72px);
}

/* Ocupa el ancho del contenedor (el pie a sangre). */
.crm-firma[data-tamano="fluida"] {
  --crm-h: calc(100cqi / (7.4 + var(--crm-letras, 0) * 0.6 + 0.3));
  display: flex;
}

.crm-firma-lockup {
  position: relative;
  flex: none;
  display: block;
  height: var(--crm-h);
  aspect-ratio: 7029.559 / 1000;
  /* El ancho, explícito por la misma proporción: no depende de cómo resuelva el flex un bloque vacío. */
  width: calc(var(--crm-h) * 7.029559);
  background-color: currentColor;
  -webkit-mask: var(--crm-lockup) center / contain no-repeat;
  mask: var(--crm-lockup) center / contain no-repeat;
}

.crm-firma-apellido {
  color: var(--crm-acento);
  font-family: var(--crm-sans);
  /* Respaldo sin round(): la proporción exacta (con decimales). El redondeo va en @supports:
     una declaración con var() no se descarta al leerla, así que sin @supports un round()
     no soportado dejaría la letra heredada del contenedor. */
  font-size: calc(var(--crm-h) * 0.7713);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  margin-bottom: calc(var(--crm-h) * 0.104);
}

/* Píxel entero, hacia abajo: la letra nunca sale con decimales y la firma sigue cabiendo
   (en el pie a sangre, centrada, los márgenes quedan iguales). */
@supports (font-size: round(down, 1px, 1px)) {
  .crm-firma-apellido {
    font-size: round(down, calc(var(--crm-h) * 0.7713), 1px);
  }
}

/*
 * Firma por su MAYÚSCULA PINTADA (`mayuscula`, FUNDAMENTOS §11: lateral 14, pie
 * del panel 12, acceso 20). Las medidas llegan ya calculadas en px ENTEROS
 * (`medidasFirma`, en TS, medidas en la tinta real del wordmark y de Geist): la
 * hoja solo las lee, sin `calc()` ni letra fraccionaria (§1, §3). La firma es la
 * del canon (mismo lockup, misma máscara, mismo apellido y su @supports para el
 * resto de tamaños); aquí solo cambian la caja, la letra, el hueco y lo que sube
 * el apellido para alinear las líneas base. La de sangre y la del pie gigante
 * siguen como estaban.
 */
.crm-firma[data-mayus] {
  --crm-h: var(--crm-firma-caja);
  gap: var(--crm-firma-hueco);
}

.crm-firma[data-mayus] .crm-firma-apellido {
  font-size: var(--crm-firma-letra);
  margin-bottom: var(--crm-firma-base);
}

/* La zona de la firma ajustada ocupa el sitio libre de su fila; la firma no encoge (se mide entera). */
.crm-firma-zona {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  overflow: hidden;
}

.crm-firma-zona > .crm-firma {
  flex: none;
}

/* El isotipo de la firma que no cabe, a la escala de la firma: su caja h, como dentro del lockup. */
.crm-isotipo.crm-firma-isotipo > span {
  height: var(--crm-firma-caja);
}

/* Barrido de luz recortado a la silueta: sigue siendo una sola pieza. */
.crm-firma-brillo {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 40%, color-mix(in oklab, var(--crm-acento) 95%, transparent) 50%, transparent 60%);
  background-size: 260% 100%;
  background-position: 115% 0;
  animation: crm-barrido-lento calc(var(--crm-t-filo) * 8) var(--crm-curva) infinite calc(var(--crm-t-filo) * 1.5);
}

.crm-firma:hover .crm-firma-brillo {
  animation: crm-barrido-ya var(--crm-t-dibujo) var(--crm-curva) 1 both;
}

/* ── La «C» gigante con su luz ───────────────────────────────────────── */
.crm-iso-fondo {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, currentColor 72%, transparent 100%);
  mask-image: linear-gradient(180deg, currentColor 72%, transparent 100%);
}

/* La «C» en ASCII (iso-fondo.tsx): un lienzo que aparece con un fundido cuando ya está pintado. */
.crm-iso-fondo {
  font-family: var(--crm-mono);
}

.crm-iso-lienzo {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity var(--crm-t-dibujo) var(--crm-snap);
}

.crm-iso-fondo[data-listo] .crm-iso-lienzo {
  opacity: 1;
}

/* ── Acceso ──────────────────────────────────────────────────────────── */
/* El color-scheme lo fija cada tema (00-temas.css) y el fondo lo pone cada
   superficie (raíz, acceso, Vista Agente), nunca las capas portadas. */
.crm-marca {
  color: var(--crm-text);
  font-family: var(--crm-sans);
  -webkit-font-smoothing: antialiased;
}

/*
 * ── AccesoCriterium: la pantalla de acceso ────────────────────────────
 * Una pantalla completa (como el marco): barra con la firma, el panel del
 * cliente en el centro y el pie de la casa. Todo en px ENTEROS de la escala
 * (§1) y en los roles de §2, §3 y §17, a todos los tamaños:
 *   barra: firma de mayúscula 20 (caja 38) con 20 arriba y abajo (12 si la
 *     vista es baja, 8 si es muy baja); 16 a los lados (24 a ≥ 720, 32 a ≥ 1280).
 *   panel: 460 (912 apaisado), filete 1. Cliente: logo de 48 (40 bajo), nombre
 *     15/22 a 500, rótulo mono 11/16. Cuerpo: 32 · 24 · 16 de aire según el
 *     alto; 24 a los lados (40 a ≥ 560).
 *   título: display por escalón de SU contenedor (§3): el panel declara su
 *     contenedor (`crm-acceso-panel`); 460 → 40/44; apaisado (912) → 48/52;
 *     ≥ 1280 → 56/60 (no se da: el panel no llega).
 *   descripción: 15/24 en muted (nunca se oculta). Nota: mono 12/16.
 *   campo de acceso: 48 con su filete dentro (§17), rótulo mono 11/16 sobre la
 *     entrada mono 16/24; la ENTRADA ocupa los 48 (el toque es la fila entera).
 *   acción del campo («Ver»): caja de 48 × 48 (el marco visible, 32).
 *   botón de acceso: 48 (§17), mono 13. Aviso y «dentro»: 48 como mínimo.
 * Alto de la vista (FUNDAMENTOS §15 lo reserva al marco: el acceso es otra
 * pantalla completa y lo necesita; propuesta al núcleo en el informe):
 *   ≥ 800 de alto, la composición de siempre; < 800, el aire baja y la firma a
 *   sangre del pie tiene tope; < 600 y ≥ 960 de ancho, el panel APAISADO (la
 *   identidad y el título a la izquierda, el formulario a la derecha), porque
 *   el formulario no cabe debajo del título sin quitar nada. Nada se oculta:
 *   ni la descripción, ni la línea legal del pie, ni el soporte.
 */
/*
 * §15 sin excepción (F5 0240): el acceso es su propio contenedor de TAMAÑO. Su alto es el de la pantalla que ocupa
 * (`min-height: 100dvh`; con contención de tamaño el contenido no lo estira) y las reglas de pantalla baja responden a
 * ESE alto con `@container crm-acceso (max-height: …)`, no a la vista con `@media`. Lo que no quepa (contraseña
 * actualizada y error a la vez en la vista más baja, el extremo) sale por abajo a la vista (`overflow-y: visible`) y
 * el documento desplaza: nada se recorta ni se esconde dentro. En x recorta (`clip`) por si un fondo saliera de lado.
 */
.crm-acceso {
  container: crm-acceso / size;
  background: var(--crm-bg);
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  overflow-y: visible;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh;
}

.crm-acceso-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding: 20px 16px;
}

.crm-acceso-volver {
  min-width: 0;
  max-width: 45%;
  text-align: right;
}

/* «Volver»: un enlace de navegación en frase normal (§3: mayúsculas nunca en navegación), interfaz base 13/20. */
.crm-acceso-volver,
.crm-acceso-volver a {
  color: var(--crm-muted);
  font-family: var(--crm-sans);
  font-size: 13px;
  line-height: 20px;
  text-decoration: none;
}

/* La caja visible mide 32; la zona de toque, 48 (sin mover la barra). */
.crm-acceso-volver a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.crm-acceso-volver a::after {
  content: "";
  position: absolute;
  inset: -8px -4px;
}

.crm-acceso-volver svg {
  display: inline-block;
  flex: none;
  width: 16px;
  height: 16px;
}

.crm-acceso-volver a:hover {
  color: var(--crm-acento);
}

.crm-acceso-centro {
  display: grid;
  align-items: center;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding: 24px 16px;
}

.crm-acceso-panel {
  container: crm-acceso-panel / inline-size;
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  max-width: 460px;
  justify-self: center;
  border: 1px solid var(--crm-line-2);
  background: var(--crm-panel);
  box-shadow: var(--crm-sombra);
  /*
   * La sombra del panel (nivel 2, `0 24px 80px`) cae hacia abajo y a los lados; por encima del panel no se pinta
   * (1 px arriba para el filo de luz). En pantallas bajas el panel queda a 16 de la barra y la parte alta de la
   * sombra oscurecía el fondo bajo la firma «Criterium <apellido>» (F5: tinta ajena 0,07–0,24 bajo la letra en
   * 1024 × 640, 800 × 600 y 1000 × 545). La sombra sigue entera donde se ve: debajo y a los lados.
   */
  clip-path: inset(-1px -128px -128px -128px);
}

/* Filo de luz por el borde superior: pasa y descansa; al acceder, sin pausa. */
.crm-acceso-panel::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -1px -1px auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--crm-acento) 50%, transparent);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  background-position: -40% 0;
  animation: crm-filo calc(var(--crm-t-filo) * 4) var(--crm-curva) infinite calc(var(--crm-t-filo) * 0.75);
}

.crm-acceso-panel[data-estado="accediendo"]::before,
.crm-acceso-panel[data-estado="dentro"]::before {
  animation: crm-filo-continuo var(--crm-t-filo) var(--crm-curva) infinite;
}

.crm-acceso-cliente {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 16px 24px;
  border-bottom: 1px solid var(--crm-line);
}

.crm-acceso-logo {
  --crm-logo-h: 48px;
  display: flex;
  align-items: center;
  flex: none;
  max-width: 120px;
}

.crm-acceso-logo img,
.crm-acceso-logo svg {
  display: block;
  width: auto;
  max-width: 120px;
  height: var(--crm-logo-h);
  object-fit: contain;
}

.crm-acceso-cliente-texto {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.crm-acceso-cliente-rotulo {
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crm-acceso-cliente-nombre {
  color: var(--crm-text);
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.crm-acceso-cuerpo {
  display: grid;
  align-content: start;
  gap: 24px;
  min-width: 0;
  padding: 32px 24px;
}

/* Display del acceso (§3): por escalón de su contenedor, el panel (40 · 48 · 56 a < 720 · < 1280 · ≥ 1280). */
.crm-acceso-titulo {
  margin: 0;
  color: var(--crm-text);
  font-family: var(--crm-sans);
  font-size: 40px;
  font-weight: 500;
  line-height: 44px;
  letter-spacing: -0.04em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

@container crm-acceso-panel (min-width: 720px) {
  .crm-acceso-titulo {
    font-size: 48px;
    line-height: 52px;
  }
}

@container crm-acceso-panel (min-width: 1280px) {
  .crm-acceso-titulo {
    font-size: 56px;
    line-height: 60px;
  }
}

/* La descripción (también «Contraseña actualizada») se queda siempre: es información. */
.crm-acceso-descripcion {
  margin: -8px 0 0;
  color: var(--crm-muted);
  font-size: 15px;
  line-height: 24px;
}

/* Ayuda bajo el formulario: secundario 12/16 en Geist (§3: el mono es de rótulos y códigos, no de la ayuda). */
.crm-acceso-nota {
  color: var(--crm-muted);
  font-family: var(--crm-sans);
  font-size: 12px;
  line-height: 16px;
  overflow-wrap: anywhere;
}

/*
 * Un enlace de la nota (recuperar la contraseña…) toca a 48 sin mover la línea:
 * 16 por encima y por debajo de su línea de 16. Esos 16 nunca pisan «Entrar»:
 * entre el botón y la nota hay siempre 16 o más (el hueco del cuerpo, y en la
 * vista más baja, 12 + 4 de margen).
 */
/*
 * Subrayado con text-decoration (no con border-bottom): dentro de un contenedor flex del host el enlace pasa a
 * tener caja propia y un filete le sumaba 1 px a su línea (D: nota de 33 = 16 + 17). El subrayado no ocupa caja.
 */
.crm-acceso-nota a {
  position: relative;
  color: var(--crm-text-2);
  text-decoration: underline;
  text-decoration-color: var(--crm-line-2);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.crm-acceso-nota a::after {
  content: "";
  position: absolute;
  inset: -16px -4px;
}

.crm-acceso-nota a:hover {
  color: var(--crm-acento);
  text-decoration-color: var(--crm-acento-linea);
}

/*
 * Lo que pasa el host, en un solo bloque: un `form` (directo o envuelto en lo
 * que sea), o sus piezas sueltas. El filete de arriba es SIEMPRE del bloque,
 * nunca del form: así hay uno solo, lo envuelva el host o no (crítica 2242, N4).
 * Un bloque sin nada que pintar no pinta (ni filete ni columna vacía, N5).
 */
.crm-acceso-formulario {
  display: grid;
  min-width: 0;
  border-top: 1px solid var(--crm-line);
}

.crm-acceso-formulario:empty {
  display: none;
}

/* Formulario en filas, como el contacto del pie. */
.crm-acceso form {
  display: grid;
  min-width: 0;
}

/*
 * Campo de acceso (§17): 48 con su filete dentro; al enfocar, el filete pasa a
 * 2 px de acento. La entrada ocupa la fila entera (48): el rótulo va encima de
 * ella, sin recibir el toque, y se llega con un toque en cualquier sitio de la
 * fila. Si el foco está en su acción («Ver»), el campo no se enciende: un solo
 * indicador.
 */
.crm-campo {
  position: relative;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  min-height: 48px;
  padding: 0 4px;
  box-shadow: inset 0 -1px 0 var(--crm-line);
  transition:
    background-color var(--crm-t-color) ease,
    box-shadow var(--crm-t-gesto) var(--crm-snap);
}

.crm-campo-accion {
  grid-template-columns: 16px minmax(0, 1fr) auto;
  padding-right: 0;
}

.crm-campo:focus-within:not(:has(.crm-campo-boton:focus)) {
  background: var(--crm-panel-2);
  box-shadow: inset 0 -2px 0 var(--crm-acento);
}

.crm-campo-icono {
  display: grid;
  color: var(--crm-muted);
  transition: color var(--crm-t-color) ease;
}

.crm-campo-icono svg {
  width: 16px;
  height: 16px;
}

.crm-campo:focus-within:not(:has(.crm-campo-boton:focus)) .crm-campo-icono {
  color: var(--crm-acento);
}

.crm-campo-texto {
  position: relative;
  display: grid;
  align-self: stretch;
  min-width: 0;
}

.crm-campo-etiqueta {
  position: absolute;
  top: 4px;
  right: 0;
  left: 0;
  overflow: hidden;
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

.crm-campo-entrada {
  display: block;
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 20px 0 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--crm-text);
  font-family: var(--crm-mono);
  font-size: 16px;
  line-height: 24px;
  outline: none;
}

.crm-campo-entrada:focus-visible {
  outline: none;
}

.crm-campo-entrada::placeholder {
  color: var(--crm-dim);
}

.crm-campo-entrada:-webkit-autofill {
  -webkit-text-fill-color: var(--crm-text);
  transition: background-color calc(var(--crm-t-dibujo) * 100000) ease-out;
}

/* «Ver» / «Ocultar»: caja de 48 × 48 (la fila entera de alto); el marco visible, 32. */
.crm-campo-boton {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: 48px;
  height: 48px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--crm-muted);
  /*
   * Un botón en frase normal (§3: «nunca en botones»; la excepción mono en mayúsculas es SOLO la acción principal del
   * acceso). Interfaz base de botón, 13/20 a 500, en el marco visible de 32 (control md): «Ver», no «VER».
   */
  font-family: var(--crm-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.crm-campo-boton::before {
  content: "";
  position: absolute;
  inset: 8px 4px;
  border: 1px solid var(--crm-line-2);
  pointer-events: none;
  transition: border-color var(--crm-t-color) ease;
}

.crm-campo-boton:hover,
.crm-campo-boton:focus-visible {
  color: var(--crm-text);
}

.crm-campo-boton:hover::before {
  border-color: var(--crm-muted);
}

.crm-campo-boton:focus-visible {
  outline: none;
}

.crm-campo-boton:focus-visible::before {
  outline: var(--crm-foco-ancho) solid var(--crm-acento);
  outline-offset: 2px;
}

.crm-acceso-acciones {
  display: grid;
  padding-top: 24px;
}

/* Botón de acceso (§17): 48, mono 13 en mayúsculas (firma). */
.crm-boton-acceso {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 48px;
  padding: 0 24px;
  border: 0;
  background: var(--crm-text);
  color: var(--crm-bg);
  font-family: var(--crm-mono);
  font-size: 13px;
  line-height: 20px;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--crm-t-color) ease;
}

.crm-boton-acceso:hover {
  background: var(--crm-acento);
}

.crm-boton-acceso:focus-visible {
  outline: var(--crm-foco-ancho) solid var(--crm-acento);
  outline-offset: 2px;
}

.crm-boton-acceso:disabled {
  cursor: progress;
  background: var(--crm-text-2);
}

.crm-boton-acceso svg {
  width: 16px;
  height: 16px;
  transition: transform var(--crm-t-gesto) var(--crm-snap);
}

.crm-boton-acceso:hover svg {
  transform: translateX(4px);
}

/* Aviso y «dentro»: filas de 48 como mínimo, con su filete dentro; el texto refluye. */
.crm-acceso-aviso,
.crm-acceso-dentro {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  min-height: 48px;
  margin: 0;
  padding: 4px;
  box-shadow: inset 0 -1px 0 var(--crm-line);
  font-size: 14px;
  line-height: 22px;
  overflow-wrap: anywhere;
}

.crm-acceso-aviso {
  color: var(--crm-error);
}

/* «Sesión iniciada»: un aviso de estado en frase normal (§3: mayúsculas nunca en avisos), 14/22 como el de error. */
.crm-acceso-dentro {
  color: var(--crm-acento);
}

.crm-acceso-aviso svg,
.crm-acceso-dentro svg {
  display: block;
  width: 16px;
  height: 16px;
}

/* Ancho del acceso (su contenedor, §15). */
@container crm-acceso (min-width: 560px) {
  .crm-acceso-cliente,
  .crm-acceso-cuerpo {
    padding-inline: 40px;
  }
}

@container crm-acceso (min-width: 720px) {
  .crm-acceso-barra,
  .crm-acceso-centro {
    padding-inline: 24px;
  }
}

@container crm-acceso (min-width: 1280px) {
  .crm-acceso-barra,
  .crm-acceso-centro {
    padding-inline: 32px;
  }
}

/* ── Pie de la casa ───────────────────────────────────────────────────── */
.crm-pie {
  container: crm-pie / inline-size;
  /* El logotipo a sangre es el fondo del pie y la base viva va encima: se ve
     entero sin sumar altura (el acceso sigue cabiendo sin scroll). */
  --crm-pie-h: clamp(84px, 15vh, 156px);
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: var(--crm-pie-h);
  overflow: hidden;
  border-top: 1px solid var(--crm-line);
  /* Zona fija: pinta su propio lienzo opaco debajo del degradado, así nunca se compone con el de fuera. */
  background: linear-gradient(180deg, var(--crm-pie-fondo), var(--crm-bg)), var(--crm-bg);
  color: var(--crm-muted);
  font-family: var(--crm-sans);
}

.crm-pie-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 28px;
  max-width: 1440px;
  margin-inline: auto;
  padding: clamp(10px, 1.6vh, 16px) clamp(16px, 2.6vw, 36px);
}

.crm-pie-vivo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 24px;
}

.crm-pie-estado,
.crm-pie-hora,
.crm-pie-soporte,
.crm-pie-legal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--crm-mono);
  font-size: 12px;
  text-transform: uppercase;
}

.crm-pie-legal {
  text-transform: none;
  font-family: var(--crm-sans);
  font-size: 13px;
}

.crm-pie-soporte a,
.crm-pie-enlaces a {
  white-space: nowrap;
  color: var(--crm-text-2);
  text-decoration: none;
  text-transform: none;
}

.crm-pie-soporte a:hover,
.crm-pie-enlaces a:hover {
  color: var(--crm-acento);
}

/* A menos de 720 de pie (§17): estado, hora y soporte en una sola columna, sin solapes y con el teléfono. */
@container crm-pie (max-width: 719.98px) {
  .crm-pie-base,
  .crm-pie-vivo {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .crm-pie-soporte {
    flex-wrap: wrap;
  }

  /* La línea legal se queda, en las líneas que necesite (nunca se oculta). */
  .crm-pie .crm-pie-legal {
    white-space: normal;
  }

  /*
   * La firma a sangre baja a su propia franja, en el flujo y debajo de la
   * base: el pie crece con sus filas y nada se pisa (N1). Ya no hace falta
   * la sombra del texto sobre el logotipo.
   */
  .crm-pie .crm-pie-base {
    text-shadow: none;
  }

  .crm-pie .crm-pie-gigante {
    position: relative;
    z-index: auto;
    inset: auto;
    padding-top: 8px;
  }
}

.crm-pie-hora-valor {
  color: var(--crm-text-2);
}

.crm-punto {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--crm-dim);
}

.crm-pie-estado[data-estado="ok"] .crm-punto {
  background: var(--crm-acento);
  box-shadow: 0 0 0 3px var(--crm-acento-suave);
}

.crm-pie-estado[data-estado="ok"] .crm-punto::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--crm-acento);
  animation: crm-latido var(--crm-t-latido) ease-out infinite;
}

.crm-pie-estado[data-estado="sin-respuesta"] .crm-punto {
  background: var(--crm-error);
}

/* El logotipo a sangre con el apellido, detrás de la base: las mayúsculas
   quedan bajo la línea de estado y se ven enteras; el pie del lockup se funde. */
/*
 * La firma a sangre va en el flujo, en su propia franja bajo la base, a
 * CUALQUIER ancho: el pie mide lo que mide su contenido (base en una, dos o
 * tres filas + firma) y ningún texto la pisa nunca (N1, N1′). Antes era un
 * fondo absoluto y la base, al partirse en filas, caía sobre las letras.
 */
.crm-pie-gigante {
  position: relative;
  max-width: 1440px;
  margin-inline: auto;
  padding: 8px clamp(16px, 2.6vw, 36px) 0;
  container-type: inline-size;
  /* Centrado con márgenes iguales; el ancho exacto lo ajusta PieCriterium al medir. */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, currentColor 70%, transparent 100%);
  mask-image: linear-gradient(180deg, currentColor 70%, transparent 100%);
}

.crm-pie-base {
  position: relative;
  /* Se lee sobre el logotipo: sombra del color del fondo, sin caja. */
  text-shadow: 0 1px 10px var(--crm-bg), 0 0 2px var(--crm-bg);
}

.crm-pie-gigante .crm-firma {
  flex: none;
  color: var(--crm-pie-lockup);
}

/*
 * Ajustada por PieCriterium: maquetada a su alto de referencia y escalada al
 * ancho útil desde el centro de su borde superior. El margen inferior devuelve
 * al flujo el alto escalado (alto × escala), así que la franja mide lo mismo
 * que antes; centrada con márgenes iguales también cuando la caja de
 * referencia es más ancha que el pie.
 */
.crm-pie-gigante .crm-firma[data-ajustada] {
  transform: scale(var(--crm-escala, 1));
  transform-origin: 50% 0;
  margin-bottom: calc(var(--crm-h) * (var(--crm-escala, 1) - 1));
}

.crm-pie-gigante .crm-firma-apellido {
  color: var(--crm-pie-apellido);
}

/* En el pie, el barrido es más suave y más frecuente: flujo continuo con pausa. */
.crm-pie-gigante .crm-firma-brillo {
  background-image: linear-gradient(100deg, transparent 40%, color-mix(in oklab, var(--crm-acento) 55%, transparent) 50%, transparent 60%);
  animation: crm-barrido calc(var(--crm-t-barrido) * 4) var(--crm-curva) infinite calc(var(--crm-t-barrido) / 2);
}

/* Pantallas estrechas: el pie se queda en lo vivo y el soporte. */
@media (max-width: 40em) {
  .crm-pie {
    --crm-pie-h: 96px;
  }
}

/*
 * ── El pie en el acceso y el alto de la vista ─────────────────────────
 * El pie es el de la casa (PieCriterium); aquí solo lo que el acceso necesita
 * de él, en enteros: su base sin `vh` (12 arriba y abajo; líneas de 16 y la
 * legal de 20), sin alto mínimo propio (mide lo que lleva) y la firma a sangre
 * con tope de alto cuando la vista es baja (PieCriterium la escala entera y
 * centrada hasta el tope, nunca la recorta). La línea legal y el soporte se ven
 * siempre.
 */
.crm-acceso .crm-pie {
  --crm-pie-h: 0px;
}

.crm-acceso .crm-pie-base {
  padding: 12px 16px;
}

.crm-acceso :is(.crm-pie-estado, .crm-pie-hora, .crm-pie-soporte) {
  line-height: 16px;
}

.crm-acceso .crm-pie-legal {
  line-height: 20px;
}

.crm-acceso .crm-pie-gigante {
  padding: 8px 16px 0;
}

@container crm-acceso (min-width: 720px) {
  .crm-acceso .crm-pie-base {
    gap: 8px 24px;
    padding-inline: 24px;
  }

  .crm-acceso .crm-pie-vivo {
    gap: 8px 24px;
  }

  .crm-acceso .crm-pie-gigante {
    padding-inline: 24px;
  }
}

@container crm-acceso (min-width: 1280px) {
  .crm-acceso :is(.crm-pie-base, .crm-pie-gigante) {
    padding-inline: 32px;
  }
}

/* Acceso de menos de 800 de alto (su contenedor, §15): menos aire, logo de 40 y la firma a sangre con tope de 80. */
@container crm-acceso (max-height: 799px) {
  .crm-acceso .crm-pie {
    --crm-pie-gigante-alto: 80px;
  }

  .crm-acceso-barra {
    padding-block: 12px;
  }

  .crm-acceso-centro {
    padding-block: 8px;
  }

  .crm-acceso-cliente {
    padding-block: 12px;
  }

  .crm-acceso-logo {
    --crm-logo-h: 40px;
  }

  .crm-acceso-cuerpo {
    gap: 16px;
    padding-block: 24px;
  }

  .crm-acceso-acciones {
    padding-top: 16px;
  }
}

/* Menos de 700 de alto (su contenedor): el aire mínimo de la escala y la firma a sangre con tope de 56. */
@container crm-acceso (max-height: 699px) {
  .crm-acceso .crm-pie {
    --crm-pie-gigante-alto: 56px;
  }

  .crm-acceso-barra {
    padding-block: 8px;
  }

  .crm-acceso-cliente {
    padding-block: 8px;
  }

  .crm-acceso-cuerpo {
    gap: 12px;
    padding-block: 16px;
  }

  .crm-acceso-descripcion {
    margin-top: -4px;
  }

  /* 12 + 4: la zona de toque de 48 de un enlace de la nota no pisa «Entrar». */
  .crm-acceso-nota {
    margin-top: 4px;
  }
}

/*
 * Menos de 620 de alto (F5: 800 × 600 con error o «dentro» medía 609 frente a 600): la firma a sangre del pie, que
 * es la única pieza decorativa de la columna, baja su tope a 40. Entera y centrada (PieCriterium la escala, nunca la
 * recorta); nada informativo se toca.
 */
@container crm-acceso (max-height: 619px) {
  .crm-acceso .crm-pie {
    --crm-pie-gigante-alto: 40px;
  }
}

/*
 * Menos de 600 de alto y 960 o más de ancho, ambos de su contenedor (portátil apaisado con la barra del navegador):
 * apaisado. La identidad, el título, la descripción y la nota a la izquierda; el formulario a la derecha. Es la misma
 * pieza en dos columnas, no otra: el orden de lectura y de foco no cambia.
 */
@container crm-acceso (max-height: 599px) and (min-width: 960px) {
    .crm-acceso-panel {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      grid-template-rows: auto auto auto minmax(0, 1fr);
      max-width: 912px;
    }

    .crm-acceso-cliente {
      grid-column: 1;
      grid-row: 1;
      padding-block: 12px;
    }

    .crm-acceso-logo {
      --crm-logo-h: 40px;
    }

    .crm-acceso-cuerpo {
      display: contents;
    }

    .crm-acceso-titulo {
      grid-column: 1;
      grid-row: 2;
      padding: 24px 40px 0;
    }

    .crm-acceso-descripcion {
      grid-column: 1;
      grid-row: 3;
      margin: 0;
      padding: 8px 40px 0;
    }

    .crm-acceso-nota {
      grid-column: 1;
      grid-row: 4;
      align-self: end;
      padding: 16px 40px 24px;
    }

    /* Todo lo del host va en su bloque: un solo hijo en la columna 2, sea un form o sus piezas sueltas. */
    .crm-acceso-formulario {
      grid-column: 2;
      grid-row: 1 / -1;
      align-self: center;
      align-content: center;
      padding: 0 40px;
      border-top: 0;
      border-left: 1px solid var(--crm-line);
    }

    /*
     * El filete lo dibuja el bloque (24 de aire y el filete encima del contenido), no su primer hijo: un `hidden`, un
     * envoltorio con display: contents o un aviso delante ya no lo pierden ni lo cambian de sitio (crítica 2307, P3).
     */
    .crm-acceso-formulario::before {
      content: "";
      display: block;
      box-sizing: content-box;
      height: 24px;
      border-bottom: 1px solid var(--crm-line);
    }

    .crm-acceso-formulario::after {
      content: "";
      display: block;
      height: 24px;
    }
}

/* ── Movimiento ─────────────────────────────────────────────────────── */
@keyframes crm-filo {
  0% {
    background-position: -40% 0;
  }
  36%,
  100% {
    background-position: 140% 0;
  }
}

@keyframes crm-filo-continuo {
  from {
    background-position: -40% 0;
  }
  to {
    background-position: 140% 0;
  }
}

@keyframes crm-barrido {
  0% {
    background-position: 115% 0;
  }
  40%,
  100% {
    background-position: 0% 0;
  }
}

@keyframes crm-barrido-lento {
  0% {
    background-position: 115% 0;
  }
  18%,
  100% {
    background-position: 0% 0;
  }
}

@keyframes crm-barrido-ya {
  from {
    background-position: 115% 0;
  }
  to {
    background-position: 0% 0;
  }
}

@keyframes crm-latido {
  from {
    opacity: 0.6;
    scale: 1;
  }
  to {
    opacity: 0;
    scale: 2.6;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crm-acceso-panel::before,
  .crm-pie-estado[data-estado="ok"] .crm-punto::after {
    animation: none;
  }

  .crm-iso-lienzo {
    transition: none;
  }

  .crm-firma-brillo,
  .crm-acceso-panel::before {
    display: none;
  }

  .crm-campo,
  .crm-campo-boton::before,
  .crm-boton-acceso svg {
    transition: none;
  }

  .crm-boton-acceso:hover svg {
    transform: none;
  }
}

/* ══ Vista Agente ═══════════════════════════════════════════════════════
 * La sala de Criterium dentro de cada panel: oscura, con la firma, y cada
 * petición tratada como un caso (petición → pasos observados → resultado).
 * Lo que el agente prepara se abre en la mesa, a la derecha.
 */
.crm-va {
  background: var(--crm-bg);
  --crm-va-col: 820px;
  --crm-va-coral: var(--crm-error);
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  /* A todo el ancho de su contenedor, también dentro de uno flex en fila (K5-19: se encogía a su contenido). */
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 100dvh;
  overflow: hidden;
}

/* El color-scheme lo da el bloque de cada tema (00-temas.css): la Vista Agente sigue al de su zona. */

.crm-va ::selection {
  background: color-mix(in srgb, var(--crm-acento) 28%, transparent);
  color: var(--crm-text);
}

.crm-va * {
  scrollbar-color: var(--crm-line-2) transparent;
  scrollbar-width: thin;
}

/* ── Barra ─────────────────────────────────────────────────────────── */
.crm-va-barra {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
  height: 44px;
  padding: 0 12px 0 16px;
  border-bottom: 1px solid var(--crm-line);
  /* Opaca, como la barra del marco (K4-07): nada asoma por detrás. */
  background: var(--crm-bg);
}

.crm-va-identidad {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.crm-va-org {
  min-width: 0;
  overflow: hidden;
  padding-left: 12px;
  border-left: 1px solid var(--crm-line-2);
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  line-height: 16px;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.crm-va-derecha {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.crm-va-extra {
  display: flex;
  align-items: center;
  gap: 8px;
}

/*
 * D25 · Dentro de MarcoPanel (`cabecera="marco"`): la firma y el cambio de
 * vista ya los pone el marco, una vez. La barra de la vista se queda con
 * sus acciones (nueva conversación, historial y las del host), a la derecha.
 */
.crm-va-barra[data-cabecera="marco"] {
  grid-template-columns: minmax(0, 1fr);
}

/* Barra de 44, todo a 28 (FUNDAMENTOS §2): el conmutador es el mismo segmentado que el del panel. */
.crm-va-vistas {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  box-sizing: border-box;
  height: 28px;
  padding: 1px;
  border: 1px solid var(--crm-line-2);
  background: var(--crm-panel);
}

.crm-va-vista {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  height: 24px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: var(--crm-muted);
  font-family: var(--crm-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 20px;
  white-space: nowrap;
  cursor: default;
  transition:
    background-color var(--crm-t-color) var(--crm-snap),
    color var(--crm-t-color) var(--crm-snap);
}

.crm-va-vista:hover {
  color: var(--crm-text);
  transition-duration: 0ms;
}

.crm-va-vista[aria-pressed="true"] {
  background: var(--crm-panel-3);
  color: var(--crm-text);
  font-weight: 500;
}

.crm-va-vista:focus-visible {
  outline-offset: -1px;
}

.crm-va-vista .crm-punto {
  width: 6px;
  height: 6px;
}

.crm-va-vivo {
  background: var(--crm-acento) !important;
  box-shadow: 0 0 0 3px var(--crm-acento-suave);
}

.crm-va-vivo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--crm-acento);
  animation: crm-latido var(--crm-t-latido) ease-out infinite;
}

.crm-va-acciones {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
}

/* Botones de icono de 28 con icono de 14; pulsado a scale(.96) en 80 ms. */
.crm-va-icono {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--crm-text-2);
  cursor: default;
  transition:
    border-color var(--crm-t-color) var(--crm-snap),
    color var(--crm-t-color) var(--crm-snap),
    transform var(--crm-t-pulsar) var(--crm-snap);
}

.crm-va-icono:hover:not(:disabled) {
  border-color: var(--crm-line-2);
  color: var(--crm-text);
  transition-duration: 0ms, 0ms, var(--crm-t-pulsar);
}

.crm-va-icono:active:not(:disabled) {
  transform: scale(0.96);
}

.crm-va-icono:disabled {
  color: var(--crm-dim);
  cursor: not-allowed;
}

.crm-va-icono svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.5;
}

/* ── Cuerpo y mesa ─────────────────────────────────────────────────── */
.crm-va-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
}

.crm-va-conversacion {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.crm-va-cargando {
  margin: 0;
  padding: 10px 20px;
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 12px;
}

@media (min-width: 1100px) {
  .crm-va[data-mesa] .crm-va-cuerpo {
    grid-template-columns: minmax(0, 1fr) minmax(440px, 46%);
  }

  .crm-va[data-mesa] {
    --crm-va-col: 680px;
  }
}

.crm-va-mesa {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  border-left: 1px solid var(--crm-line-2);
  background: var(--crm-panel);
  box-shadow: var(--crm-sombra-capa);
  animation: crm-va-mesa var(--crm-t-capa) var(--crm-snap) both;
}

.crm-va-mesa::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -1px -1px auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--crm-acento) 50%, transparent);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  animation: crm-filo calc(var(--crm-t-filo) * 4) var(--crm-curva) infinite calc(var(--crm-t-filo) / 4);
}

@media (max-width: 1099.98px) {
  .crm-va-mesa {
    position: fixed;
    z-index: 30;
    inset: 0;
    border-left: 0;
  }
}

.crm-va-mesa-barra {
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  min-width: 0;
  height: 52px;
  padding: 0 12px 0 20px;
  border-bottom: 1px solid var(--crm-line);
}

.crm-va-mesa-rotulo {
  flex: none;
  color: var(--crm-acento);
  font-family: var(--crm-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crm-va-mesa-titulo {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--crm-text);
  font-size: 14px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-va-mesa-cuerpo {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
}

.crm-va-mesa-cuerpo > * {
  flex: 1 0 auto;
}

/* ── Inicio ────────────────────────────────────────────────────────── */
.crm-va-inicio {
  position: relative;
  isolation: isolate;
  display: grid;
  flex: 1;
  align-content: center;
  justify-items: center;
  gap: clamp(18px, 3.4vh, 30px);
  min-height: 0;
  padding: clamp(20px, 5vh, 56px) clamp(16px, 4vw, 48px);
  overflow-y: auto;
}

.crm-va-inicio-texto {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
}

/*
 * Zona de respeto de la C (FUNDAMENTOS §11, D25 y D46): nunca detrás de
 * texto de cuerpo, campos ni errores, y a menos de 720 fuera del bloque de
 * título. Cada bloque del inicio (título con su entrada, compositor con su
 * error y su ayuda, ideas y frase final) se lee sobre un velo del lienzo:
 * macizo bajo el bloque y fundido en 32 a los lados y 24 arriba y abajo,
 * sin caja. La C sigue a la vista alrededor (el momento de marca), nunca
 * debajo de una letra. Un velo por bloque, en todos los anchos.
 */
.crm-va-inicio :is(.crm-va-inicio-texto, .crm-va-compositor, .crm-va-ideas, .crm-va-pie-inicio) {
  position: relative;
}

.crm-va-inicio :is(.crm-va-inicio-texto, .crm-va-compositor, .crm-va-ideas, .crm-va-pie-inicio)::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -24px -32px;
  background: var(--crm-bg);
  -webkit-mask-image:
    linear-gradient(90deg, transparent, currentColor 32px, currentColor calc(100% - 32px), transparent),
    linear-gradient(180deg, transparent, currentColor 24px, currentColor calc(100% - 24px), transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent, currentColor 32px, currentColor calc(100% - 32px), transparent),
    linear-gradient(180deg, transparent, currentColor 24px, currentColor calc(100% - 24px), transparent);
  mask-composite: intersect;
  pointer-events: none;
}

.crm-va-titulo {
  margin: 0;
  color: var(--crm-text);
  font-family: var(--crm-sans);
  font-size: 40px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

/* Display por escalones (§3: nada calculado): 40 · 48 a ≥ 720 · 56 a ≥ 1280. */
@media (min-width: 720px) {
  .crm-va-titulo {
    font-size: 48px;
  }
}

@media (min-width: 1280px) {
  .crm-va-titulo {
    font-size: 56px;
  }
}

.crm-va-intro {
  margin: 0;
  max-width: 46ch;
  color: var(--crm-muted);
  font-size: 15px;
  line-height: 1.5;
}

.crm-va-ideas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
  width: min(720px, 100%);
  margin: 0;
  padding: 0;
  list-style: none;
}

.crm-va-idea {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--crm-line);
  background: color-mix(in srgb, var(--crm-panel) 78%, transparent);
  color: var(--crm-text-2);
  font-family: var(--crm-sans);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition:
    border-color var(--crm-t-color) ease,
    color var(--crm-t-color) ease;
}

.crm-va-idea > svg:first-child {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--crm-acento);
}

.crm-va-idea span {
  flex: 1;
}

.crm-va-idea-flecha {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--crm-dim);
  transition:
    transform var(--crm-t-gesto) var(--crm-snap),
    color var(--crm-t-color) ease;
}

.crm-va-idea:hover {
  border-color: var(--crm-line-2);
  color: var(--crm-text);
}

.crm-va-idea:hover .crm-va-idea-flecha {
  transform: translateX(3px);
  color: var(--crm-acento);
}

.crm-va-pie-inicio {
  margin: 0;
  color: var(--crm-dim);
  font-family: var(--crm-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.crm-va-verde {
  color: var(--crm-acento);
}

/* ── Compositor ────────────────────────────────────────────────────── */
.crm-va-compositor {
  width: min(var(--crm-va-col), 100%);
  /* Dentro de rejillas con columna auto, nunca más ancho que su sitio (la línea de estado va en nowrap). */
  min-width: 0;
}

.crm-va-compositor[data-lugar="inicio"] {
  width: min(720px, 100%);
}

.crm-va-caja {
  position: relative;
  border: 1px solid var(--crm-line-2);
  /* Opaca: la C nunca se ve detrás de un campo (§11). */
  background: var(--crm-panel);
  box-shadow: var(--crm-sombra-capa);
  transition:
    border-color var(--crm-t-color) ease,
    box-shadow var(--crm-t-capa) var(--crm-snap);
}

/* Filo de luz: al escribir se queda; mientras trabaja, recorre sin pausa. */
.crm-va-caja::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -1px -1px auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--crm-acento) 50%, transparent);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  background-position: -40% 0;
  opacity: 0;
  transition: opacity var(--crm-t-entrada) ease;
}

.crm-va-caja:focus-within {
  border-color: var(--crm-acento-linea);
  box-shadow: var(--crm-sombra-capa);
}

.crm-va-caja:focus-within::before {
  opacity: 1;
  animation: crm-filo calc(var(--crm-t-filo) * 3) var(--crm-curva) infinite;
}

.crm-va-compositor[data-ocupado] .crm-va-caja::before {
  opacity: 1;
  animation: crm-filo-continuo var(--crm-t-filo) var(--crm-curva) infinite;
}

.crm-va-cursor {
  position: absolute;
  left: 18px;
  top: 13px;
  color: var(--crm-acento);
  font-family: var(--crm-mono);
  font-size: 20px;
  line-height: 1.4;
  pointer-events: none;
}

.crm-va-texto {
  display: block;
  width: 100%;
  min-height: 56px;
  max-height: min(11rem, 32dvh);
  padding: 15px 18px 6px 42px;
  border: 0;
  background: transparent;
  color: var(--crm-text);
  font-family: var(--crm-sans);
  font-size: 16px;
  line-height: 1.5;
  resize: none;
  outline: none;
  overflow-y: auto;
}

.crm-va-compositor[data-lugar="inicio"] .crm-va-texto {
  min-height: 84px;
}

.crm-va-texto::placeholder {
  color: var(--crm-dim);
}

.crm-va-texto:disabled {
  color: var(--crm-muted);
}

.crm-va-caja-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 10px 10px 18px;
}

.crm-va-estado {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.crm-va-estado .crm-punto {
  flex: none;
  background: var(--crm-acento);
}

.crm-va-enviar {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--crm-boton);
  background: var(--crm-boton);
  color: var(--crm-boton-tinta);
  font-family: var(--crm-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background-color var(--crm-t-color) ease,
    border-color var(--crm-t-color) ease,
    opacity var(--crm-t-color) ease;
}

.crm-va-enviar svg {
  width: 15px;
  height: 15px;
}

.crm-va-enviar:hover:not(:disabled) {
  border-color: var(--crm-acento);
  background: var(--crm-acento);
  color: var(--crm-sobre-acento);
}

.crm-va-enviar:disabled {
  border-color: var(--crm-linea-apagada);
  background: transparent;
  color: var(--crm-dim);
  cursor: not-allowed;
}

.crm-va-enviar[data-detener] {
  border-color: var(--crm-line-2);
  background: transparent;
  color: var(--crm-text);
}

.crm-va-enviar[data-detener] svg {
  width: 11px;
  height: 11px;
  fill: currentColor;
}

.crm-va-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 0 0;
  color: var(--crm-va-coral);
  font-size: 14px;
}

.crm-va-error svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

.crm-va-recuperacion {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.crm-va-ayuda {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 8px 0 0;
  color: var(--crm-dim);
  font-family: var(--crm-mono);
  font-size: 11px;
}

.crm-va-ayuda svg {
  width: 11px;
  height: 11px;
}

/* ── Casos ─────────────────────────────────────────────────────────── */
.crm-va-casos {
  display: grid;
  flex: 1;
  align-content: start;
  gap: 44px;
  min-height: 0;
  padding: 36px max(16px, calc((100% - var(--crm-va-col)) / 2)) 28px;
  overflow-y: auto;
}

.crm-va-caso:last-child {
  animation: crm-va-entra var(--crm-t-dibujo) var(--crm-snap) both;
}

.crm-va-peticion {
  position: relative;
  margin: 0 0 18px;
  padding-left: 46px;
  color: var(--crm-text);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.015em;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.crm-va-peticion::before {
  content: "›";
  position: absolute;
  left: 9px;
  top: -1px;
  color: var(--crm-acento);
  font-family: var(--crm-mono);
  font-size: 20px;
  font-weight: 400;
}

.crm-va-carril {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* El carril que une los pasos; mientras se trabaja, la corriente baja por él. */
.crm-va-carril::before,
.crm-va-carril[data-vivo]::after {
  content: "";
  position: absolute;
  left: 15px;
  top: -10px;
  bottom: 10px;
  width: 1px;
}

.crm-va-carril::before {
  background: linear-gradient(180deg, var(--crm-acento-linea), var(--crm-line-2) 60%, transparent);
}

.crm-va-carril[data-vivo]::after {
  background: linear-gradient(180deg, transparent 0%, var(--crm-luz) 50%, transparent 100%) 0 -60px / 100% 60px no-repeat;
  box-shadow: 0 0 10px var(--crm-acento-linea);
  animation: crm-va-corriente var(--crm-t-corriente) linear infinite;
}

.crm-va-paso {
  position: relative;
  padding: 0 0 16px 46px;
}

.crm-va-paso:last-child {
  padding-bottom: 0;
}

.crm-va-nodo {
  position: absolute;
  left: 5px;
  top: -1px;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border: 1px solid var(--crm-line-2);
  border-radius: 50%;
  background: var(--crm-bg);
}

.crm-va-nodo svg {
  width: 11px;
  height: 11px;
  stroke-width: 2.6;
}

.crm-va-paso[data-paso="hecho"] .crm-va-nodo {
  border-color: var(--crm-acento);
  background: var(--crm-acento);
  color: var(--crm-sobre-acento);
  box-shadow: 0 0 0 4px var(--crm-acento-suave);
}

.crm-va-paso[data-paso="trabajando"] .crm-va-nodo {
  border-color: var(--crm-acento-linea);
}

.crm-va-paso[data-paso="trabajando"] .crm-va-nodo::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1.5px solid transparent;
  border-top-color: var(--crm-acento);
  border-right-color: var(--crm-acento);
  border-radius: 50%;
  animation: crm-va-girar var(--crm-t-giro) linear infinite;
}

.crm-va-paso[data-paso="error"] .crm-va-nodo {
  border-color: var(--crm-va-coral);
  color: var(--crm-va-coral);
}

.crm-va-paso-etiqueta {
  font-weight: 400;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0;
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  line-height: 1.6;
  text-transform: uppercase;
}

.crm-va-paso-estado {
  color: var(--crm-acento);
}

.crm-va-paso[data-paso="error"] .crm-va-paso-estado,
.crm-va-carril[data-estado="error"] .crm-va-paso-estado {
  color: var(--crm-va-coral);
}

.crm-va-carril[data-estado="error"] .crm-va-nodo {
  border-color: var(--crm-va-coral);
  background: transparent;
  color: var(--crm-va-coral);
  box-shadow: none;
}

.crm-va-sep {
  color: var(--crm-line-2);
}

.crm-va-respuesta {
  margin: 12px 0 0;
  max-width: 68ch;
  color: var(--crm-text-2);
  font-size: 15px;
  line-height: 1.68;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.crm-va-nota,
.crm-va-filtros {
  margin: 12px 0 0;
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 12px;
}

/* Filas, como el contacto del pie. */
.crm-va-items {
  margin: 16px 0 0;
  padding: 0;
  border-top: 1px solid var(--crm-line);
  list-style: none;
}

.crm-va-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 54px;
  padding: 10px 8px;
  border: 0;
  border-bottom: 1px solid var(--crm-line);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}

button.crm-va-item {
  cursor: pointer;
  transition: background-color var(--crm-t-color) ease;
}

button.crm-va-item::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  bottom: -1px;
  width: 2px;
  background: var(--crm-acento);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--crm-t-gesto) var(--crm-snap);
}

button.crm-va-item:hover {
  background: var(--crm-panel-2);
}

button.crm-va-item:hover::before {
  transform: scaleY(1);
}

.crm-va-item-imagen {
  flex: none;
  width: 40px;
  height: 40px;
  object-fit: cover;
  border: 1px solid var(--crm-line-2);
}

.crm-va-item-texto {
  display: grid;
  flex: 1;
  gap: 3px;
  min-width: 0;
}

.crm-va-item-titulo {
  color: var(--crm-text);
  font-size: 14px;
  line-height: 1.35;
}

.crm-va-item-detalle {
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 12px;
  line-height: 1.45;
}

.crm-va-item-flecha {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--crm-dim);
  transition:
    transform var(--crm-t-gesto) var(--crm-snap),
    color var(--crm-t-color) ease;
}

button.crm-va-item:hover .crm-va-item-flecha {
  transform: translateX(3px);
  color: var(--crm-acento);
}

/* Tarjetas de bloque: la aprobación es el momento clave. */
.crm-va-tarjeta {
  position: relative;
  display: grid;
  gap: 8px;
  margin-top: 16px;
  padding: 16px 18px 18px;
  border: 1px solid var(--crm-line-2);
  background: var(--crm-panel);
}

.crm-va-tarjeta[data-tipo="approval"] {
  border-color: var(--crm-acento-linea);
  background: linear-gradient(180deg, color-mix(in srgb, var(--crm-acento) 7%, transparent), transparent 70%), var(--crm-panel);
}

.crm-va-tarjeta[data-tipo="approval"]::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--crm-acento) 50%, transparent);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  animation: crm-filo calc(var(--crm-t-filo) * 2.5) var(--crm-curva) infinite;
}

.crm-va-tarjeta[data-tipo="error"] {
  border-color: var(--crm-error-linea);
}

.crm-va-chip {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 7px;
  margin: 0;
  padding: 3px 8px;
  border: 1px solid var(--crm-line-2);
  color: var(--crm-text-2);
  font-family: var(--crm-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.crm-va-chip svg {
  width: 12px;
  height: 12px;
}

.crm-va-tarjeta[data-tipo="approval"] .crm-va-chip,
.crm-va-tarjeta[data-tipo="result"] .crm-va-chip {
  border-color: var(--crm-acento-linea);
  background: var(--crm-acento-suave);
  color: var(--crm-acento);
}

.crm-va-tarjeta[data-tipo="error"] .crm-va-chip {
  border-color: var(--crm-error-linea);
  color: var(--crm-va-coral);
}

.crm-va-tarjeta-titulo {
  margin: 4px 0 0;
  color: var(--crm-text);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.crm-va-tarjeta-texto {
  margin: 0;
  color: var(--crm-text-2);
  font-size: 14px;
  line-height: 1.6;
}

.crm-va-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.crm-va-boton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--crm-line-2);
  background: transparent;
  color: var(--crm-text);
  font-family: var(--crm-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background-color var(--crm-t-color) ease,
    border-color var(--crm-t-color) ease,
    color var(--crm-t-color) ease;
}

.crm-va-boton svg {
  width: 14px;
  height: 14px;
  transition: transform var(--crm-t-gesto) var(--crm-snap);
}

.crm-va-boton:hover:not(:disabled) {
  border-color: var(--crm-text-2);
}

.crm-va-boton:hover:not(:disabled) svg {
  transform: translateX(3px);
}

.crm-va-boton:disabled {
  border-color: var(--crm-linea-apagada);
  background: transparent;
  color: var(--crm-dim);
  cursor: not-allowed;
}

.crm-va-boton-principal {
  border-color: var(--crm-boton);
  background: var(--crm-boton);
  color: var(--crm-boton-tinta);
}

.crm-va-boton-principal:hover:not(:disabled) {
  border-color: var(--crm-acento);
  background: var(--crm-acento);
  color: var(--crm-sobre-acento);
}

.crm-va-bloque-propio {
  margin-top: 16px;
}

/* ── Dock ──────────────────────────────────────────────────────────── */
.crm-va-dock {
  position: relative;
  display: grid;
  justify-items: center;
  padding: 12px clamp(16px, 4vw, 48px) 14px;
  background: linear-gradient(180deg, transparent, var(--crm-bg) 30%);
}

/* ── Pantallas estrechas ───────────────────────────────────────────── */
@media (max-width: 720px) {
  .crm-va-barra {
    height: auto;
    min-height: 44px;
    padding-block: 8px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "identidad acciones" "vistas extra";
    row-gap: 8px;
    column-gap: 8px;
  }

  .crm-va-identidad {
    grid-area: identidad;
  }

  .crm-va-derecha {
    display: contents;
  }

  .crm-va-acciones {
    grid-area: acciones;
  }

  .crm-va-extra {
    grid-area: extra;
  }

  .crm-va-vistas {
    grid-area: vistas;
    grid-column: 1 / -1;
    justify-self: stretch;
    justify-content: center;
  }

  .crm-va-barra:has(.crm-va-extra) .crm-va-vistas {
    grid-column: auto;
  }

  .crm-va-barra[data-cabecera="marco"] {
    height: 44px;
    padding-block: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: none;
  }

  .crm-va-barra[data-cabecera="marco"] .crm-va-derecha {
    display: flex;
  }

  .crm-va-vista {
    flex: 1;
    justify-content: center;
  }

  .crm-va-org {
    display: none;
  }

  .crm-va-casos {
    gap: 34px;
    padding-top: 24px;
  }

  .crm-va-peticion {
    font-size: 16px;
  }

  .crm-va-ayuda-extra {
    display: none;
  }

  .crm-va-dock .crm-va-ayuda {
    display: none;
  }
}

@media (max-height: 640px) {
  .crm-va-pie-inicio,
  .crm-va-dock .crm-va-ayuda {
    display: none;
  }

  .crm-va-compositor[data-lugar="inicio"] .crm-va-texto {
    min-height: 60px;
  }
}

/* Pantallas bajas (móvil apaisado, teclado abierto: 320 a 480 de alto): la
   vista sigue midiendo la ventana y nunca desplaza la página. Cede alto lo que
   se lee (historial, título, ideas), nunca el compositor: en la conversación
   va en su dock fijo abajo y en el inicio se queda pegado al borde inferior
   de la zona que desplaza, con su aviso y su recuperación. */
@media (max-height: 480px) {
  .crm-va-inicio {
    align-content: start;
    gap: 12px;
    padding-block: 12px 0;
  }

  .crm-va-titulo {
    font-size: 24px;
  }

  .crm-va-intro {
    display: none;
  }

  .crm-va-compositor[data-lugar="inicio"] {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding-bottom: 12px;
    background: var(--crm-bg);
  }

  .crm-va-casos {
    gap: 24px;
    padding-top: 16px;
    padding-bottom: 12px;
  }

  .crm-va-dock {
    padding-top: 8px;
    padding-bottom: 8px;
    background: var(--crm-bg);
  }

  .crm-va-texto {
    max-height: 96px;
  }

  .crm-va-error,
  .crm-va-recuperacion {
    margin-top: 8px;
  }

  .crm-va-ayuda,
  .crm-va-pie-inicio {
    display: none;
  }

  /* El estado, en una línea (detalle: elipsis, §14); con un error a la vista, lo dice el aviso. */
  .crm-va-estado {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .crm-va-estado .crm-punto {
    display: inline-block;
    margin-right: 8px;
    vertical-align: middle;
  }

  .crm-va-compositor:has(.crm-va-error) .crm-va-estado {
    visibility: hidden;
  }

  /* El aviso cede antes que el historial: aviso y recuperación en una sola fila. */
  .crm-va-compositor:has(.crm-va-error) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
  }

  .crm-va-compositor:has(.crm-va-error) > .crm-va-caja {
    grid-column: 1 / -1;
  }

  .crm-va-compositor:has(.crm-va-error) > .crm-va-recuperacion {
    justify-content: flex-end;
  }

  .crm-va-texto {
    min-height: 44px;
    padding-top: 10px;
  }

  .crm-va-compositor[data-lugar="inicio"] .crm-va-texto {
    min-height: 44px;
  }
}

/* Muy bajo (≤ 400) y con un error en el inicio: el título cede para que el compositor,
   pegado abajo, no lo tape a medias. */
@media (max-height: 400px) {
  .crm-va-inicio:has(.crm-va-error) .crm-va-inicio-texto {
    display: none;
  }

  /* Con un error, el campo se queda en 44 y desplaza por dentro: el historial no baja de 72 sea cual sea la petición. */
  .crm-va-compositor:has(.crm-va-error) .crm-va-texto {
    max-height: 44px;
  }
}

/* ── Movimiento de la vista ────────────────────────────────────────── */
@keyframes crm-va-entra {
  from {
    opacity: 0;
    translate: 0 10px;
  }
}

@keyframes crm-va-mesa {
  from {
    opacity: 0;
    translate: 24px 0;
  }
}

@keyframes crm-va-corriente {
  to {
    background-position: 0 calc(100% + 60px);
  }
}

@keyframes crm-va-girar {
  to {
    rotate: 360deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crm-va-caso:last-child,
  .crm-va-mesa,
  .crm-va-mesa::before,
  .crm-va-caja::before,
  .crm-va-carril[data-vivo]::after,
  .crm-va-paso[data-paso="trabajando"] .crm-va-nodo::after,
  .crm-va-tarjeta[data-tipo="approval"]::before,
  .crm-va-vivo::after {
    animation: none;
  }
}

/* ── Historial ─────────────────────────────────────────────────────── */
.crm-va-historial {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(400px, 100vw);
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-right: 1px solid var(--crm-line);
  background: var(--crm-panel);
  color: var(--crm-text);
  font-family: var(--crm-sans);
  box-shadow: var(--crm-sombra);
}

.crm-va-historial[open] {
  animation: crm-va-historial-entra var(--crm-t-capa) var(--crm-snap);
}

.crm-va-historial::backdrop {
  background: var(--crm-telon);
}

@keyframes crm-va-historial-entra {
  from {
    transform: translateX(-24px);
    opacity: 0;
  }
}

.crm-va-historial-cuerpo {
  display: grid;
  grid-template-rows: auto auto auto auto auto minmax(0, 1fr);
  height: 100%;
}

.crm-va-historial-cabecera {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "rotulo cerrar" "titulo cerrar";
  align-items: center;
  column-gap: 12px;
  padding: 18px 16px 0 22px;
}

.crm-va-historial-cabecera .crm-va-mesa-rotulo {
  grid-area: rotulo;
}

.crm-va-historial-cabecera .crm-va-icono {
  grid-area: cerrar;
}

.crm-va-historial-titulo {
  grid-area: titulo;
  margin: 4px 0 0;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.crm-va-historial-texto {
  margin: 8px 22px 0;
  color: var(--crm-muted);
  font-size: 13px;
  line-height: 1.5;
}

.crm-va-historial-busca {
  position: relative;
  display: flex;
  align-items: center;
  margin: 18px 22px 0;
  border: 1px solid var(--crm-line-2);
  background: var(--crm-bg);
  transition: border-color var(--crm-t-color) ease;
}

.crm-va-historial-busca:focus-within {
  border-color: var(--crm-acento-linea);
}

.crm-va-historial-busca > svg {
  flex: none;
  width: 15px;
  height: 15px;
  margin-left: 12px;
  color: var(--crm-dim);
}

.crm-va-historial-campo {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 10px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--crm-text);
  font: inherit;
  font-size: 14px;
}

.crm-va-historial-campo::placeholder {
  color: var(--crm-dim);
}

.crm-va-historial-campo::-webkit-search-cancel-button {
  filter: invert(0.6);
}

.crm-va-historial-tecla {
  margin-right: 10px;
  color: var(--crm-dim);
  font-family: var(--crm-mono);
  font-size: 12px;
}

.crm-va-historial-filtro {
  display: flex;
  gap: 0;
  margin: 12px 22px 0;
  border: 1px solid var(--crm-line);
  width: fit-content;
}

.crm-va-historial-filtro button {
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--crm-muted);
  font-family: var(--crm-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.crm-va-historial-filtro button[aria-pressed="true"] {
  background: var(--crm-panel-2);
  color: var(--crm-text);
  box-shadow: inset 0 -1px 0 var(--crm-acento);
}

.crm-va-historial-deshacer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 22px 0;
  padding: 8px 8px 8px 12px;
  border: 1px solid var(--crm-acento-linea);
  background: var(--crm-acento-suave);
  font-size: 13px;
}

.crm-va-historial-deshacer button {
  border: 0;
  background: transparent;
  color: var(--crm-acento);
  font-family: var(--crm-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.crm-va-historial-lista {
  overflow-y: auto;
  margin-top: 14px;
  padding: 4px 12px 24px;
  border-top: 1px solid var(--crm-line);
}

.crm-va-historial-grupo-titulo {
  margin: 16px 10px 6px;
  color: var(--crm-dim);
  font-family: var(--crm-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.crm-va-historial-grupo ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.crm-va-historial-hilo {
  position: relative;
  display: flex;
  align-items: center;
}

.crm-va-historial-hilo::before {
  content: "";
  position: absolute;
  inset: 10px auto 10px 0;
  width: 2px;
  background: transparent;
  transition: background-color var(--crm-t-color) ease;
}

.crm-va-historial-hilo[data-actual]::before {
  background: var(--crm-acento);
}

.crm-va-historial-abrir {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: baseline;
  gap: 12px;
  min-height: 44px;
  padding: 10px 10px 10px 12px;
  border: 0;
  background: transparent;
  color: var(--crm-text-2);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    background-color var(--crm-t-color) ease,
    color var(--crm-t-color) ease;
}

.crm-va-historial-abrir:hover:not(:disabled),
.crm-va-historial-hilo[data-actual] .crm-va-historial-abrir {
  background: var(--crm-panel-2);
  color: var(--crm-text);
}

.crm-va-historial-abrir:disabled {
  cursor: default;
}

.crm-va-historial-nombre {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-va-historial-hora {
  flex: none;
  color: var(--crm-dim);
  font-family: var(--crm-mono);
  font-size: 11px;
}

.crm-va-historial-hilo[data-actual] .crm-va-historial-hora {
  color: var(--crm-acento);
}

.crm-va-historial-archivar {
  width: 34px;
  height: 34px;
  opacity: 0;
}

.crm-va-historial-hilo:hover .crm-va-historial-archivar,
.crm-va-historial-archivar:focus-visible {
  opacity: 1;
}

@media (hover: none) {
  .crm-va-historial-archivar {
    opacity: 1;
  }
}

.crm-va-historial-confirmar {
  width: 100%;
  margin: 4px 0;
  padding: 14px;
  border: 1px solid var(--crm-line-2);
  background: var(--crm-bg);
  font-size: 13px;
  line-height: 1.5;
}

.crm-va-historial-confirmar p {
  margin: 0;
  color: var(--crm-text-2);
}

.crm-va-historial-confirmar strong {
  color: var(--crm-text);
  font-weight: 500;
}

.crm-va-historial-confirmar .crm-va-botones {
  margin-top: 12px;
}

.crm-va-historial-cargando {
  display: grid;
  gap: 10px;
  margin: 18px 10px;
}

.crm-va-historial-hueco {
  height: 18px;
  background: linear-gradient(90deg, var(--crm-panel-2), var(--crm-line), var(--crm-panel-2));
  background-size: 200% 100%;
  animation: crm-va-hueco var(--crm-t-barrido) linear infinite;
}

.crm-va-historial-hueco:nth-child(odd) {
  width: 72%;
}

@keyframes crm-va-hueco {
  to {
    background-position: -200% 0;
  }
}

.crm-va-historial-vacio,
.crm-va-historial-aviso {
  margin: 28px 10px;
  color: var(--crm-muted);
  font-size: 13px;
  line-height: 1.55;
}

.crm-va-historial-vacio p,
.crm-va-historial-aviso p {
  margin: 0 0 12px;
}

.crm-va-historial-vacio-titulo {
  color: var(--crm-text);
  font-size: 15px;
}

.crm-va-historial-aviso p {
  color: var(--crm-va-coral);
}

.crm-va-historial-mas {
  width: 100%;
  justify-content: center;
  margin-top: 16px;
}

@media (prefers-reduced-motion: reduce) {
  .crm-va-historial[open],
  .crm-va-historial-hueco {
    animation: none;
  }
}