/* IMC Operaciones v2 · styles.css (dueño: núcleo de interfaz)
   Contrato: SPEC.md 2 (tokens, copiados literal) y 3 (componentes).
   DECISIÓN: lo que la SPEC describe solo en prosa (riel, vacío, documento, visor, listas para elegir,
   encabezado de grupo dentro de la tabla, radios del segmentado en formularios) se resolvió acá con los
   mismos tokens, en la sección "Núcleo: piezas genéricas". Las vistas no agregan componentes: componen estos.
   El foco global (:focus-visible) va SIEMPRE al final del archivo. */

/* ==========================================================================
   2.2 Tokens (literal)
   ========================================================================== */
:root {
  color-scheme: light;

  /* Marca: constantes, no cambian con el tema */
  --imc-ink: #0F0D3A;
  --imc-navy: #1E1870;
  --imc-orange: #E8620A;
  --brass: #A8862F;

  /* Superficies */
  --bg: #FFFFFF;
  --bg-sunken: #F3F3F7;
  --surface: #FFFFFF;
  --surface-2: #F7F7FA;
  --surface-raised: #FFFFFF;
  --band: #0F0D3A;
  --band-gradient: linear-gradient(180deg, #16125C 0, #0F0D3A 240px);
  --on-band: #FFFFFF;
  --on-band-2: #B6B4D8;
  --band-line: rgb(255 255 255 / .14);
  --band-hover: rgb(255 255 255 / .07);
  --band-active: rgb(255 255 255 / .13);
  --scrim: rgb(15 13 58 / .36);

  /* Texto */
  --text: #1C1B33;
  --text-strong: #0F0D3A;
  --text-2: #4A4964;
  --text-3: #5D5C77;
  --text-inverse: #FFFFFF;

  /* Líneas */
  --line: #E2E2EA;
  --line-strong: #C9C8D6;
  --rule: #8F8EA6;
  --control-border: #84839C;

  /* Interacción */
  --accent: #3A32B0;
  --accent-hover: #2C2590;
  --accent-soft: #EDECFA;
  --focus: #3A32B0;
  --sel: #1E1870;
  --on-sel: #FFFFFF;
  --hover: rgb(15 13 58 / .045);
  --press: rgb(15 13 58 / .09);
  --primary: #E8620A;
  --primary-hover: #FF7722;
  --primary-press: #DB5C09;
  --on-primary: #0F0D3A;
  --disabled-opacity: .42;

  /* Semáforo (el del Excel) */
  --ok: #1E6B3A;      --ok-fill: #2E8B57;      --ok-bg: #E8F4EC;
  --warn: #6E4E00;    --warn-fill: #A87A00;    --warn-bg: #FFF4D1;
  --danger: #A50E0E;  --danger-fill: #B50000;  --danger-bg: #FDECEC;  --on-danger: #FFFFFF;
  --info: #3A32B0;    --info-bg: #EDECFA;
  --firma: #7D6220;   --firma-ring: #A8862F;   --firma-bg: #F6F1E4;
  --seg-done: #1E1870;
  --seg-todo: #C9C8D6;

  /* Personas (color propio; nunca se usan para estado) */
  --p-ac: #1F5FA8;  --p-ac-tint: #E8EFF8;
  --p-gu: #8A3B7A;  --p-gu-tint: #F5ECF3;
  --p-kh: #0E7490;  --p-kh-tint: #E7F3F6;
  --p-fp: #7D6220;  --p-fp-ring: #A8862F;  --p-fp-tint: #F6F1E4;
  --p-ext: #5D5C77; --p-ext-tint: #F1F1F5;
  --emb-on: #FFFFFF;

  /* Vista previa de mensajes */
  --mail-paper: #FFFFFF;
  --var-bg: #EDECFA;
  --var-line: #3A32B0;
  --var-missing-bg: #FDECEC;
  --wa-wall: #EFEAE2;
  --wa-out: #D9FDD3;
  --wa-ink: #111B21;
  --wa-meta: #5E6E78;

  /* Materiales y sombras */
  --material: rgb(255 255 255 / .82);
  --material-blur: saturate(180%) blur(20px);
  --sh-1: 0 1px 2px rgb(15 13 58 / .06), 0 0 0 .5px rgb(15 13 58 / .08);
  --sh-pop: 0 10px 30px rgb(15 13 58 / .14), 0 0 0 .5px rgb(15 13 58 / .10);
  --sh-float: 0 8px 24px rgb(15 13 58 / .18), 0 0 0 .5px rgb(15 13 58 / .10);
  --sh-sheet: 0 24px 64px rgb(15 13 58 / .26), 0 0 0 .5px rgb(15 13 58 / .10);

  /* Tipografía */
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-caps: "Archivo", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --fs-display: 2.75rem;  --lh-display: 1.05; --ls-display: .01em;   /* 44 px: Nº de la ficha */
  --fs-title: 2.5rem;     --lh-title: 1.08;   --ls-title: .012em;    /* 40 px: título de pantalla */
  --fs-h2: 1.625rem;      --lh-h2: 1.18;      --ls-h2: .02em;        /* 26 px serif: secciones */
  --fs-h3: 1.0625rem;     --lh-h3: 1.3;                              /* 17 px UI 600: títulos de bloque */
  --fs-body: .9375rem;    --lh-body: 1.47;                           /* 15/22 */
  --fs-table: .875rem;    --lh-table: 1.43;                          /* 14/20 */
  --fs-small: .8125rem;   --lh-small: 1.38;                          /* 13/18 */
  --fs-caption: .75rem;   --lh-caption: 1.33;                        /* 12/16: mínimo absoluto */
  --fs-eyebrow: .6875rem; --lh-eyebrow: 1.25; --ls-eyebrow: .14em;   /* 11 px Archivo 125 % 600 */
  --fs-input: .9375rem;

  /* Espaciado (grilla de 4) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 48px; --sp-10: 64px; --sp-11: 80px;
  --gutter: clamp(16px, 1.6vw + 10px, 40px);
  --gutter-l: max(var(--gutter), env(safe-area-inset-left, 0px));
  --gutter-r: max(var(--gutter), env(safe-area-inset-right, 0px));

  /* Medidas */
  --sidebar-w: 248px;
  --inspector-w: 600px;
  --read-max: 782px;
  --toolbar-h: 56px;
  --masthead-h: 52px;
  --tabbar-h: 64px;
  --franja-h: 36px;
  --row-h: 60px;
  --control-h: 36px;
  --hit: 44px;

  /* Radios (concéntricos: interno = externo − padding) */
  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;

  /* Movimiento */
  --dur-1: 120ms;  /* hover y presión */
  --dur-2: 200ms;  /* fundidos, toggles, aviso que se resuelve */
  --dur-3: 320ms;  /* hoja y panel */
  --dur-4: 480ms;  /* hoja en celular (resorte) */
  --ease: cubic-bezier(.4, 0, .6, 1);
  --ease-out: cubic-bezier(.25, .1, .3, 1);
  --spring: linear(0, .084, .249, .421, .57, .69, .781, .848, .895, .929, .952, .968, .978, .986, .991, .994, .996, .997, 1);
  --shift: 12px;

  /* Capas */
  --z-sticky: 10; --z-sidebar: 20; --z-tabbar: 30; --z-panel: 40; --z-scrim: 50; --z-sheet: 60; --z-toast: 70;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0D0C22;
    --bg-sunken: #08071A;
    --surface: #13122E;
    --surface-2: #19183A;
    --surface-raised: #1D1C42;
    --band: #0C0A38;
    --band-gradient: linear-gradient(180deg, #16125C 0, #0C0A38 240px);
    --on-band: #FFFFFF;
    --on-band-2: #B6B4D8;
    --band-line: rgb(255 255 255 / .12);
    --band-hover: rgb(255 255 255 / .06);
    --band-active: rgb(255 255 255 / .12);
    --scrim: rgb(0 0 0 / .55);
    --text: #E8E7F3;
    --text-strong: #FFFFFF;
    --text-2: #B6B5CF;
    --text-3: #9C9BB8;
    --text-inverse: #0D0C22;
    --line: rgb(255 255 255 / .09);
    --line-strong: rgb(255 255 255 / .18);
    --rule: rgb(255 255 255 / .32);
    --control-border: #73718F;
    --accent: #ADA8FF;
    --accent-hover: #C6C2FF;
    --accent-soft: rgb(173 168 255 / .14);
    --focus: #ADA8FF;
    --sel: #D9D7FF;
    --on-sel: #0F0D3A;
    --hover: rgb(255 255 255 / .05);
    --press: rgb(255 255 255 / .09);
    --primary: #FF7722;
    --primary-hover: #FF9944;
    --primary-press: #F06A14;
    --on-primary: #0F0D3A;
    --ok: #5BC98A;   --ok-fill: #3DAA6A;   --ok-bg: rgb(91 201 138 / .14);
    --warn: #E9B949; --warn-fill: #D9A72E; --warn-bg: rgb(233 185 73 / .14);
    --danger: #FF8080; --danger-fill: #D23A3A; --danger-bg: rgb(255 128 128 / .13); --on-danger: #FFFFFF;
    --info: #ADA8FF; --info-bg: rgb(173 168 255 / .14);
    --firma: #D9B95C; --firma-ring: #D9B95C; --firma-bg: rgb(217 185 92 / .13);
    --seg-done: #C9C6F5;
    --seg-todo: rgb(255 255 255 / .22);
    --p-ac: #8DB6F2;  --p-ac-tint: rgb(141 182 242 / .14);
    --p-gu: #E19BD3;  --p-gu-tint: rgb(225 155 211 / .14);
    --p-kh: #5CC8DD;  --p-kh-tint: rgb(92 200 221 / .14);
    --p-fp: #D9B95C;  --p-fp-ring: #D9B95C;  --p-fp-tint: rgb(217 185 92 / .14);
    --p-ext: #A3A2BE; --p-ext-tint: rgb(163 162 190 / .12);
    --emb-on: #0D0C22;
    --mail-paper: #13122E;
    --var-bg: rgb(173 168 255 / .16);
    --var-line: #ADA8FF;
    --var-missing-bg: rgb(255 128 128 / .16);
    --wa-wall: #0B141A; --wa-out: #005C4B; --wa-ink: #E9EDEF; --wa-meta: #8696A0;
    --material: rgb(19 18 46 / .78);
    --sh-1: 0 1px 2px rgb(0 0 0 / .4), 0 0 0 .5px rgb(255 255 255 / .08);
    --sh-pop: 0 10px 30px rgb(0 0 0 / .5), 0 0 0 .5px rgb(255 255 255 / .10);
    --sh-float: 0 8px 24px rgb(0 0 0 / .5), 0 0 0 .5px rgb(255 255 255 / .10);
    --sh-sheet: 0 24px 64px rgb(0 0 0 / .6), 0 0 0 .5px rgb(255 255 255 / .10);
  }
}

/* Tema oscuro elegido a mano en el visor: mismos valores que el bloque anterior */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0D0C22;
  --bg-sunken: #08071A;
  --surface: #13122E;
  --surface-2: #19183A;
  --surface-raised: #1D1C42;
  --band: #0C0A38;
  --band-gradient: linear-gradient(180deg, #16125C 0, #0C0A38 240px);
  --on-band: #FFFFFF;
  --on-band-2: #B6B4D8;
  --band-line: rgb(255 255 255 / .12);
  --band-hover: rgb(255 255 255 / .06);
  --band-active: rgb(255 255 255 / .12);
  --scrim: rgb(0 0 0 / .55);
  --text: #E8E7F3;
  --text-strong: #FFFFFF;
  --text-2: #B6B5CF;
  --text-3: #9C9BB8;
  --text-inverse: #0D0C22;
  --line: rgb(255 255 255 / .09);
  --line-strong: rgb(255 255 255 / .18);
  --rule: rgb(255 255 255 / .32);
  --control-border: #73718F;
  --accent: #ADA8FF;
  --accent-hover: #C6C2FF;
  --accent-soft: rgb(173 168 255 / .14);
  --focus: #ADA8FF;
  --sel: #D9D7FF;
  --on-sel: #0F0D3A;
  --hover: rgb(255 255 255 / .05);
  --press: rgb(255 255 255 / .09);
  --primary: #FF7722;
  --primary-hover: #FF9944;
  --primary-press: #F06A14;
  --on-primary: #0F0D3A;
  --ok: #5BC98A;   --ok-fill: #3DAA6A;   --ok-bg: rgb(91 201 138 / .14);
  --warn: #E9B949; --warn-fill: #D9A72E; --warn-bg: rgb(233 185 73 / .14);
  --danger: #FF8080; --danger-fill: #D23A3A; --danger-bg: rgb(255 128 128 / .13); --on-danger: #FFFFFF;
  --info: #ADA8FF; --info-bg: rgb(173 168 255 / .14);
  --firma: #D9B95C; --firma-ring: #D9B95C; --firma-bg: rgb(217 185 92 / .13);
  --seg-done: #C9C6F5;
  --seg-todo: rgb(255 255 255 / .22);
  --p-ac: #8DB6F2;  --p-ac-tint: rgb(141 182 242 / .14);
  --p-gu: #E19BD3;  --p-gu-tint: rgb(225 155 211 / .14);
  --p-kh: #5CC8DD;  --p-kh-tint: rgb(92 200 221 / .14);
  --p-fp: #D9B95C;  --p-fp-ring: #D9B95C;  --p-fp-tint: rgb(217 185 92 / .14);
  --p-ext: #A3A2BE; --p-ext-tint: rgb(163 162 190 / .12);
  --emb-on: #0D0C22;
  --mail-paper: #13122E;
  --var-bg: rgb(173 168 255 / .16);
  --var-line: #ADA8FF;
  --var-missing-bg: rgb(255 128 128 / .16);
  --wa-wall: #0B141A; --wa-out: #005C4B; --wa-ink: #E9EDEF; --wa-meta: #8696A0;
  --material: rgb(19 18 46 / .78);
  --sh-1: 0 1px 2px rgb(0 0 0 / .4), 0 0 0 .5px rgb(255 255 255 / .08);
  --sh-pop: 0 10px 30px rgb(0 0 0 / .5), 0 0 0 .5px rgb(255 255 255 / .10);
  --sh-float: 0 8px 24px rgb(0 0 0 / .5), 0 0 0 .5px rgb(255 255 255 / .10);
  --sh-sheet: 0 24px 64px rgb(0 0 0 / .6), 0 0 0 .5px rgb(255 255 255 / .10);
}

/* Compacto (< 1024 px): escala táctil tipo iOS */
@media (max-width: 1023.98px) {
  :root {
    --fs-display: 2.25rem; --fs-title: 2rem; --fs-h2: 1.375rem;
    --fs-body: 1.0625rem; --lh-body: 1.41;     /* 17/24 */
    --fs-table: 1rem;     --lh-table: 1.38;    /* 16/22 */
    --fs-small: .875rem;  --fs-input: 1rem;    /* inputs de 16 px: iOS no hace zoom */
    --control-h: 44px; --row-h: 72px;
  }
}

/* Preferencias del sistema: :root:root:root (0,3,0) gana a los bloques de tema (0,2,0) */
@media (prefers-reduced-motion: reduce) {
  :root:root:root { --shift: 0px; --spring: ease; --dur-3: 200ms; --dur-4: 200ms; }
}
@media (prefers-contrast: more) {
  :root:root:root { --text-2: #34334D; --text-3: #4A4964; --line: #C9C8D6; --control-border: #6A6984; }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root:root:root:not([data-theme="light"]) { --text-2: #C9C8DD; --text-3: #B3B2CC; --control-border: #8E8CAA; --line: rgb(255 255 255 / .18); }
}
:root:root:root[data-theme="dark"] { /* si además prefers-contrast: more, repetir el bloque anterior dentro de @media (prefers-contrast: more) */ }
@media (prefers-reduced-transparency: reduce) {
  :root:root:root { --material: var(--surface); --material-blur: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root:root:root { --material: var(--surface); }
}

/* Base */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--fs-body)/var(--lh-body) var(--font-ui);
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
}
.num, td.num, .tabular { font-variant-numeric: tabular-nums; }
::selection { background: var(--accent-soft); }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }   /* igual que el esqueleto de la plataforma (2.6), también en local */
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea { font-size: var(--fs-input); }
.sidebar, .masthead, .franja--band { --focus: #FFFFFF; }   /* foco blanco sobre la banda: 18,4:1 */

/* Alto contraste con el tema oscuro elegido a mano en el visor (2.2: repetir el bloque) */
@media (prefers-contrast: more) {
  :root:root:root[data-theme="dark"] { --text-2: #C9C8DD; --text-3: #B3B2CC; --control-border: #8E8CAA; --line: rgb(255 255 255 / .18); }
}

/* ==========================================================================
   2.3 Clases de texto (escala cerrada)
   ========================================================================== */
.t-display { font: 400 var(--fs-display)/var(--lh-display) var(--font-display); letter-spacing: var(--ls-display); color: var(--text-strong); font-variant-numeric: lining-nums tabular-nums; margin: 0; }
.t-title   { font: 400 var(--fs-title)/var(--lh-title) var(--font-display); letter-spacing: var(--ls-title); color: var(--text-strong); text-wrap: balance; margin: 0; }
.t-h2      { font: 400 var(--fs-h2)/var(--lh-h2) var(--font-display); letter-spacing: var(--ls-h2); color: var(--text-strong); text-wrap: balance; margin: 0; }
.t-h3      { font: 600 var(--fs-h3)/var(--lh-h3) var(--font-ui); color: var(--text-strong); margin: 0; }
.t-body    { font: 400 var(--fs-body)/var(--lh-body) var(--font-ui); text-wrap: pretty; }
.t-table   { font: 400 var(--fs-table)/var(--lh-table) var(--font-ui); }
.t-small   { font: 400 var(--fs-small)/var(--lh-small) var(--font-ui); }
.t-caption { font: 400 var(--fs-caption)/var(--lh-caption) var(--font-ui); color: var(--text-3); }
.t-2 { color: var(--text-2); } .t-3 { color: var(--text-3); }
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2); margin: 0;
  font: 600 var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-caps); font-stretch: 125%;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-2);
}
.eyebrow__star { width: 10px; height: 10px; color: var(--imc-orange); flex: none; }
.eyebrow--band { color: var(--on-band-2); }
.grupo { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-7) 0 var(--sp-2); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--rule); }
.grupo .eyebrow { color: var(--text-strong); }
.datos { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 6px 16px; margin: 0; font-size: var(--fs-small); }
.datos dt { color: var(--text-3); } .datos dd { margin: 0; overflow-wrap: anywhere; } .datos .sin-dato { color: var(--text-3); font-style: italic; }
@media (max-width: 599.98px) { .datos { grid-template-columns: 1fr; } .datos dd { margin-bottom: 8px; } }

/* ==========================================================================
   3.1 Estructura de la app (shell)
   ========================================================================== */
.app { display: grid; min-height: 100dvh; grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  grid-template-rows: auto auto 1fr; grid-template-areas: "side mast" "side franja" "side main"; }
.sidebar { grid-area: side; } .masthead { grid-area: mast; } .franja { grid-area: franja; } .main { grid-area: main; }
.sidebar { position: sticky; top: 0; height: 100dvh; overflow-y: auto; background: var(--band) var(--band-gradient); color: var(--on-band); z-index: var(--z-sidebar); }
.main { min-width: 0; container: main / inline-size; padding: 0 var(--gutter-r) var(--sp-10) var(--gutter-l); }
.masthead, .tabbar { display: none; }
.franja:empty { display: none; }
@media (min-width: 1280px) {
  .app[data-panel="docked"] { grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--inspector-w);
    grid-template-areas: "side mast panel" "side franja panel" "side main panel"; }
  .app[data-panel="docked"] .panel { grid-area: panel; }
}
@media (max-width: 1023.98px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-areas: "mast" "franja" "main"; }
  .sidebar { display: none; } .masthead { display: flex; } .tabbar { display: grid; }
  .franja { position: sticky; top: calc(var(--masthead-h) + env(safe-area-inset-top, 0px)); z-index: var(--z-sticky); }
  .main { padding-bottom: calc(var(--tabbar-h) + 32px + env(safe-area-inset-bottom, 0px)); }
  .app[data-panel="full"] .tabbar, body:has(dialog[open]) .tabbar { display: none; }
}
.skip { position: absolute; left: -999px; } .skip:focus { left: 8px; top: 8px; z-index: 100; background: var(--surface); padding: 8px 12px; }
.velo { position: fixed; inset: 0; z-index: var(--z-scrim); background: var(--scrim); }

/* Núcleo: el contenido de cada vista vive en #vista, debajo de la barra (que no se re-pinta) */
.vista { min-width: 0; }
.main:focus { outline: none; }

/* ==========================================================================
   3.2 Riel lateral (sidebar, ≥ 1024 px)
   ========================================================================== */
.sidebar { flex-direction: column; box-sizing: border-box; padding: var(--sp-6) var(--sp-3) var(--sp-3); }
@media (min-width: 1024px) { .sidebar { display: flex; } }   /* en compacto queda oculto (3.1) */
.sidebar__brand { display: grid; justify-items: start; gap: 12px; padding: 4px 12px var(--sp-5); }
.sidebar__logo { display: block; border-radius: var(--r-xs); }
.sidebar__logo img { width: 168px; height: auto; }
.sidebar__thread { display: block; width: 24px; height: 2px; border-radius: 1px; background: var(--imc-orange); }
.sidebar__nav { flex: 1 0 auto; }
.navlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.navitem { position: relative; display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px; border-radius: var(--r-sm);
  font-size: 14px; font-weight: 500; color: var(--on-band); text-decoration: none; transition: background-color var(--dur-1) var(--ease); }
.navitem .ico { flex: none; color: var(--on-band-2); }
.navitem:hover { background: var(--band-hover); }
.navitem[aria-current="page"] { background: var(--band-active); font-weight: 600; }
.navitem[aria-current="page"] .ico { color: var(--on-band); }
.navitem[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 2px; border-radius: 0 2px 2px 0; background: var(--imc-orange); }
.navitem__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navitem__count { font-size: 13px; font-weight: 400; color: var(--on-band-2); font-variant-numeric: tabular-nums; }
.navgroup { margin: var(--sp-6) 12px 6px; font: 600 10px/1.2 var(--font-caps); font-stretch: 125%; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--on-band-2); }
.sidebar__foot { display: grid; gap: 8px; margin-top: var(--sp-5); padding: 12px 4px 4px; border-top: 1px solid var(--band-line); }
.yo { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 8px; border-radius: var(--r-md); color: var(--on-band); cursor: pointer; }
.yo:hover { background: var(--band-hover); }
.yo__text { display: grid; gap: 1px; min-width: 0; }
.yo__name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yo__role { font-size: 12px; color: var(--on-band-2); }
.yo__sin { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--on-band-2); color: var(--on-band-2); flex: none; }
.sidebar__data { margin: 0 8px; font-size: 12px; line-height: 1.35; color: var(--on-band-2); }

/* ==========================================================================
   3.3 Masthead (compacto, < 1024 px)
   ========================================================================== */
.masthead { position: sticky; top: env(safe-area-inset-top, 0px); z-index: var(--z-sticky); height: var(--masthead-h);
  padding-inline: var(--gutter-l) var(--gutter-r); align-items: center; justify-content: space-between;
  background: var(--band) var(--band-gradient); border-bottom: 2px solid var(--imc-orange); box-sizing: border-box; }
.masthead__actions { display: flex; align-items: center; gap: 4px; }
.masthead__logo { display: block; border-radius: var(--r-xs); }
.masthead__logo img { height: 20px; width: auto; }
.yo--compact { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0; border-radius: 50%; }
.yo--compact .yo__sin { width: 30px; height: 30px; }

/* ==========================================================================
   3.4 Barra de herramientas (≥ 1024 px)
   ========================================================================== */
.toolbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: var(--z-sticky); display: flex; align-items: center; gap: var(--sp-3); height: var(--toolbar-h);
  margin: 0 calc(var(--gutter-r) * -1) 0 calc(var(--gutter-l) * -1); padding-inline: var(--gutter-l) var(--gutter-r); background: var(--material);
  -webkit-backdrop-filter: var(--material-blur); backdrop-filter: var(--material-blur); border-bottom: 1px solid transparent; }
.toolbar.is-scrolled { border-bottom-color: var(--line); }
.toolbar__title { margin-right: auto; font: 600 var(--fs-h3)/1 var(--font-ui); opacity: 0; transition: opacity var(--dur-2) var(--ease); }
.toolbar.is-scrolled .toolbar__title { opacity: 1; }
.toolbar__primaria { display: contents; }
@media (max-width: 1023.98px) { .toolbar { display: none; } }

/* ==========================================================================
   3.5 Cabecera de página
   ========================================================================== */
.pagehead { padding: var(--sp-8) 0 var(--sp-6); display: grid; gap: var(--sp-2); }
.meta { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; font-size: var(--fs-small); color: var(--text-2); }
.meta > li + li { border-inline-start: 1px solid var(--rule); margin-inline-start: var(--sp-3); padding-inline-start: var(--sp-3); }
@media (max-width: 1023.98px) { .pagehead { padding-top: var(--sp-6); } }
@media (max-width: 599.98px) { .pagehead > .eyebrow { display: none; } .pagehead { padding: var(--sp-4) 0 var(--sp-3); gap: 4px; } }
.pagehead__title { overflow-wrap: anywhere; }
.pagehead__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: var(--sp-2); }
.pagehead__actions:empty { display: none; }

/* ==========================================================================
   3.6 Campo de búsqueda (combobox)
   ========================================================================== */
.search { position: relative; width: min(420px, 100%); }
.search__input { width: 100%; box-sizing: border-box; height: var(--control-h); padding: 0 32px 0 34px; border: 0; border-radius: var(--r-md); background: var(--bg-sunken); text-overflow: ellipsis; }
.search__input:focus { background: var(--surface); box-shadow: 0 0 0 2px var(--focus); outline: none; }
.search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.search__input::placeholder { color: var(--text-3); opacity: 1; }
.search__icon { position: absolute; left: 10px; top: 50%; translate: 0 -50%; color: var(--text-3); pointer-events: none; }
.search__kbd { position: absolute; right: 10px; top: 50%; translate: 0 -50%; font: 500 11px/1 var(--font-mono); color: var(--text-3); padding: 2px 5px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--line-strong); }
.search__clear { all: unset; position: absolute; right: 6px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--text-2); cursor: pointer; }
.search:has(.search__clear:not([hidden])) .search__kbd { display: none; }
.searchpop { position: absolute; z-index: var(--z-sheet); width: min(560px, calc(100vw - 32px)); max-height: 60dvh; overflow-y: auto; padding: 8px; border-radius: var(--r-lg); background: var(--surface-raised); box-shadow: var(--sh-pop); box-sizing: border-box; }
.searchpop__group { padding: 10px 8px 4px; }
.searchpop__item { padding: 8px; border-radius: var(--r-md); cursor: pointer; }
.searchpop__item[aria-selected="true"], .searchpop__item:hover { background: var(--accent-soft); }
.searchpop__more { margin: 6px 8px 2px; font-size: var(--fs-small); color: var(--text-2); }
@media (max-width: 1023.98px) { .search__kbd { display: none; } }
.search > .searchpop { top: calc(100% + 6px); right: 0; }
.search--ancha { width: 100%; }
.searchpop--estatico { position: static; width: auto; max-height: none; padding: 0; box-shadow: none; background: transparent; }
.res { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.res__t { display: block; font-weight: 600; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res__l { display: block; font-size: var(--fs-caption); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res__n { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-strong); min-width: 3.2em; }
.res__ico { color: var(--text-3); }
.buscar-mas { margin: var(--sp-3) 0; font-size: var(--fs-small); color: var(--text-2); }
.buscar-hoja { display: grid; gap: var(--sp-4); }

/* ==========================================================================
   3.7 Control segmentado
   ========================================================================== */
.segscroll { overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter-r) * -1) 0 calc(var(--gutter-l) * -1); padding-inline: var(--gutter-l) var(--gutter-r); }
.segscroll::-webkit-scrollbar { display: none; }
.seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(max-content, 1fr); gap: 2px; padding: 2px; border-radius: var(--r-md); background: var(--bg-sunken); }
.seg__btn { min-height: 32px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; font-size: var(--fs-small); font-weight: 500; color: var(--text-2); white-space: nowrap; cursor: pointer; transition: background-color var(--dur-1) var(--ease); }
.seg__btn:hover { background: var(--hover); }
.seg__btn[aria-checked="true"] { background: var(--surface); color: var(--text-strong); font-weight: 600; box-shadow: var(--sh-1); }
.seg__n { color: var(--text-3); margin-inline-start: 4px; font-weight: 400; }
/* Segmentado dentro de un formulario: radios nativos (5.5.4) */
label.seg__btn { position: relative; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
.seg__btn > input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.seg__btn:has(input:checked) { background: var(--surface); color: var(--text-strong); font-weight: 600; box-shadow: var(--sh-1); }
.seg__btn:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.campo .segscroll { margin: 0; padding: 0; }
/* Dentro de una hoja o una tarjeta no hay márgenes de página que recuperar: sin sangría negativa (integración) */
.hoja .segscroll, .card .segscroll { margin: 0; padding: 0; max-width: 100%; }
.segscroll { position: relative; }

/* ==========================================================================
   3.8 Pestañas de la ficha y filtros "píldora"
   ========================================================================== */
.tabs { display: flex; gap: var(--sp-1); overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.tabs::-webkit-scrollbar { display: none; }
.tabs__tab { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 0;
  font-size: var(--fs-small); font-weight: 500; color: var(--text-2); text-decoration: none; }
.tabs__tab:hover { color: var(--text-strong); background: var(--hover); }
.tabs__tab[aria-current="page"] { color: var(--text-strong); font-weight: 600; box-shadow: inset 0 -2px 0 var(--sel); }
.tabs__n { color: var(--text-3); font-weight: 400; }
.pill { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: transparent; font-size: var(--fs-small); font-weight: 500; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.pill:hover { background: var(--hover); }
.pill[aria-pressed="true"] { background: var(--sel); border-color: var(--sel); color: var(--on-sel); font-weight: 600; }
.pill__n { opacity: .8; }
.pills { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.pills::-webkit-scrollbar { display: none; }

/* ==========================================================================
   3.9 Botones
   ========================================================================== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--control-h); padding: 0 16px; border: 0; border-radius: var(--r-md);
  font-size: var(--fs-small); font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
.btn:active { transform: scale(.98); }
.btn[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: not-allowed; }
.btn[aria-disabled="true"]:active { transform: none; }
.btn--sm { min-height: 32px; padding: 0 12px; }
.btn--lg { min-height: 48px; padding: 0 20px; font-size: var(--fs-body); font-weight: 600; }
.btn--block { width: 100%; }
@media (max-width: 1023.98px) { .btn--primary.btn--lg { min-height: 50px; border-radius: var(--r-pill); } }
.btn--primary { background: var(--primary); color: var(--on-primary); font-weight: 600; }
.btn--primary:hover { background: var(--primary-hover); } .btn--primary:active { background: var(--primary-press); }
.btn--secondary { background: var(--bg-sunken); color: var(--text-strong); box-shadow: inset 0 0 0 1px var(--line); }
.btn--secondary:hover { background: color-mix(in srgb, var(--bg-sunken), var(--text) 5%); }
.btn--tertiary { background: transparent; color: var(--accent); padding-inline: 8px; }
.btn--tertiary:hover { text-decoration: underline; text-underline-offset: 3px; }
.btn--danger { background: transparent; color: var(--danger); }
.btn--danger.btn--filled { background: var(--danger-fill); color: var(--on-danger); font-weight: 600; }
.iconbtn { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: var(--r-md); background: transparent; color: var(--text-2); cursor: pointer; text-decoration: none; padding: 0; }
.iconbtn:hover { background: var(--hover); color: var(--text-strong); }
.iconbtn--band { color: var(--on-band); } .iconbtn--band:hover { background: var(--band-hover); color: var(--on-band); }
.btn .ico, .iconbtn .ico { flex: none; }
.btn.is-guardando { pointer-events: none; }
.btn-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ==========================================================================
   3.10 Insignias, chips, etiquetas y utilidades
   ========================================================================== */
.badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: var(--r-pill); font: 600 12px/1 var(--font-ui); }
.badge--danger { background: var(--danger-fill); color: var(--on-danger); }
.badge--neutral { background: var(--line-strong); color: var(--text-strong); }
.count { font-size: var(--fs-small); color: var(--text-3); font-variant-numeric: tabular-nums; }
.chip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--r-pill); font: 600 12px/1 var(--font-ui); white-space: nowrap; }
.chip--trabado { color: var(--danger); background: var(--danger-bg); }
.chip--atencion { color: var(--warn); background: var(--warn-bg); }
.chip--ok { color: var(--ok); background: var(--ok-bg); }
.chip--info { color: var(--info); background: var(--info-bg); }
.chip--neutral { color: var(--text-2); background: var(--bg-sunken); }
.chip--firma { color: var(--firma); background: var(--firma-bg); box-shadow: inset 0 0 0 1px var(--firma-ring); }
.chip--espera { color: var(--text-2); background: repeating-linear-gradient(135deg, var(--bg-sunken) 0 6px, transparent 6px 10px); box-shadow: inset 0 0 0 1px var(--line-strong); }
.chip--ejemplo { color: var(--text-2); background: transparent; outline: 1px dashed var(--rule); outline-offset: -1px; }
.chip--sugerido { color: var(--text-2); background: transparent; outline: 1px dashed var(--line-strong); outline-offset: -1px; font-weight: 500; }
.chip--xs { height: 18px; padding: 0 6px; font-size: 11px; }
.tag { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: var(--r-xs); box-shadow: inset 0 0 0 1px var(--line-strong); font: 500 12px/1 var(--font-ui); color: var(--text-2); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.spinner { width: 14px; height: 14px; box-sizing: border-box; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: girar .8s linear infinite; }
@keyframes girar { to { rotate: 1turn; } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }
.ico { flex: none; }
.tag + .tag { margin-inline-start: 4px; }
.fila__1 .tag, .tarjeta__desc .tag { margin-inline-start: 6px; vertical-align: 1px; }

/* ==========================================================================
   3.11 Emblema de cada persona
   ========================================================================== */
.emb { flex: none; overflow: visible; }
.emb--ac { color: var(--p-ac); --emb-tint: var(--p-ac-tint); }
.emb--gu { color: var(--p-gu); --emb-tint: var(--p-gu-tint); }
.emb--kh { color: var(--p-kh); --emb-tint: var(--p-kh-tint); }
.emb--fp { color: var(--p-fp); --emb-tint: var(--p-fp-tint); }
.emb--fp .emb__ring { stroke: var(--p-fp-ring); }
.emb--gg, .emb--cs, .emb--fb { color: var(--p-ext); --emb-tint: var(--p-ext-tint); }
.emb--ext .emb__ring, .emb.is-sugerido .emb__ring { stroke-dasharray: 3.2 2.4; }
.emb.is-fuera { opacity: .45; }
.emb--vacio { color: var(--danger); }
.emb--respaldo-vacio { color: var(--text-3); }
/* Responsable + respaldo superpuesto */
.duo { position: relative; display: inline-block; width: calc(var(--s, 28px) + 6px); height: calc(var(--s, 28px) + 2px); flex: none; }
.duo > .emb:first-child { position: absolute; left: 0; top: 0; }
.duo > .emb + .emb { position: absolute; right: 0; bottom: 0; border-radius: 50%; box-shadow: 0 0 0 2px var(--row-bg, var(--surface)); }
.dot-traba { position: absolute; top: -1px; right: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--danger-fill); box-shadow: 0 0 0 2px var(--row-bg, var(--surface)); }
/* Pila de emblemas mini (encabezado de grupo) */
.pila { display: inline-flex; align-items: center; }
.pila > .emb + .emb { margin-inline-start: -4px; border-radius: 50%; box-shadow: 0 0 0 2px var(--bg); }
/* Sobre la banda (riel y masthead) */
.sidebar .emb, .masthead .emb { --row-bg: var(--band); }

/* ==========================================================================
   3.12 Indicador compacto de pasos
   ========================================================================== */
.pasos { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.pasos__bar { display: inline-flex; gap: 2px; flex: none; }
.pasos__s { width: 14px; height: 6px; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--seg-todo); }
.pasos__s.is-done { background: var(--seg-done); box-shadow: none; }
.pasos__s.is-now.is-ok { background: var(--ok-fill); box-shadow: none; }
.pasos__s.is-now.is-atencion { background: var(--warn-fill); box-shadow: none; }
.pasos__s.is-now.is-trabado { background: var(--danger-fill); box-shadow: none; }
.pasos__s.is-na { box-shadow: none; background: linear-gradient(var(--seg-todo), var(--seg-todo)) center / 6px 1.5px no-repeat; }
.pasos__s.is-nofac { box-shadow: none; outline: 1px dashed var(--rule); outline-offset: -1px; }
.pasos__s.is-espera { box-shadow: inset 0 0 0 1px var(--line-strong); background: repeating-linear-gradient(135deg, var(--line-strong) 0 2px, transparent 2px 4px); }
.pasos__label { display: inline-flex; align-items: center; gap: 4px; min-width: 0; font-size: var(--fs-small); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pasos__label.is-trabado { color: var(--danger); font-weight: 600; }
.pasos__label.is-atencion { color: var(--warn); font-weight: 600; }
.pasos__txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1023.98px) { .pasos__s { width: 10px; } }

/* ==========================================================================
   3.13 Fila de tabla
   ========================================================================== */
.tabla { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font: var(--fs-table)/var(--lh-table) var(--font-ui); font-variant-numeric: tabular-nums; }
.tabla th { position: sticky; top: calc(var(--toolbar-h) + env(safe-area-inset-top, 0px)); z-index: 1; height: 32px; padding: 0 12px; text-align: left; background: var(--bg); border-bottom: 1px solid var(--line-strong);
  font: 600 var(--fs-eyebrow)/1 var(--font-caps); font-stretch: 125%; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-2); white-space: nowrap; }
.tabla th button { all: unset; cursor: pointer; } .tabla th[aria-sort="ascending"] button::after { content: " ▴"; } .tabla th[aria-sort="descending"] button::after { content: " ▾"; }
.tabla td { height: var(--row-h); padding: 8px 12px; vertical-align: middle; border-bottom: 1px solid var(--line); overflow: hidden; }
.fila { --row-bg: var(--surface); background: var(--row-bg); cursor: pointer; }
.fila:hover { --row-bg: color-mix(in srgb, var(--surface), var(--text) 4%); }
.fila[aria-current="true"] { --row-bg: var(--accent-soft); }
.fila[data-nivel="trabado"] td:first-child { box-shadow: inset 3px 0 0 var(--danger-fill); }
.fila[data-nivel="atencion"] td:first-child { box-shadow: inset 3px 0 0 var(--warn-fill); }
.fila__1, .fila__2 { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila__2 { font-size: var(--fs-caption); color: var(--text-3); margin-top: 2px; }
.fila__nro { font-weight: 600; color: var(--text-strong); text-decoration: none; }
.c-nro { width: 64px; } .c-resp { width: 156px; } .c-cli { width: 14%; } .c-pasos { width: 188px; } .c-falta { width: 22%; }
.falta { all: unset; display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--accent); cursor: pointer; border-radius: var(--r-xs); max-width: 100%; }
.falta--trabado { color: var(--danger); } .falta--atencion { color: var(--warn); } .falta:hover span { text-decoration: underline; }
.falta > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resp { display: flex; align-items: center; gap: 8px; min-width: 0; }
.resp__txt { min-width: 0; } .resp__nombre { font-weight: 600; color: var(--text-strong); }
.resp--sin .resp__nombre { color: var(--danger); }
.fila .sin-lugar { color: var(--danger); }
/* Encabezado de grupo dentro de la tabla */
.tabla .tabla__grupo th { position: static; height: auto; padding: 0; background: transparent; border-bottom: 0; text-align: left;
  font: inherit; letter-spacing: normal; text-transform: none; color: inherit; white-space: normal; }
.tabla .tabla__grupo .grupo { margin: var(--sp-6) 0 0; }
.tabla tbody:first-of-type .tabla__grupo .grupo { margin-top: var(--sp-3); }
.grupo .pila { margin-inline-start: auto; }
.grupo .chip { flex: none; }

/* ==========================================================================
   3.14 Tarjeta
   ========================================================================== */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-4); }
.tarjeta { --row-bg: var(--surface); display: grid; gap: 6px; padding: 12px 14px; min-height: 80px; background: var(--row-bg); border: 1px solid var(--line); border-radius: var(--r-lg);
  color: inherit; text-decoration: none; box-shadow: inset 3px 0 0 transparent; box-sizing: border-box; min-width: 0; }
.tarjeta[data-nivel="trabado"] { box-shadow: inset 3px 0 0 var(--danger-fill); } .tarjeta[data-nivel="atencion"] { box-shadow: inset 3px 0 0 var(--warn-fill); }
.tarjeta:active { background: color-mix(in srgb, var(--surface), var(--text) 6%); }
.tarjeta[aria-current="true"] { --row-bg: var(--accent-soft); }
.tarjeta__top { display: flex; align-items: center; gap: 8px; min-width: 0; } .tarjeta__nro { font-weight: 600; }
.tarjeta__cli { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarjeta__resp { display: inline-flex; align-items: center; gap: 6px; flex: none; max-width: 45%; }
.tarjeta__respname { font-size: var(--fs-small); font-weight: 600; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarjeta__resp--sin .tarjeta__respname { color: var(--danger); }
.tarjeta__desc { color: var(--text-2); font-size: var(--fs-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarjeta__bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.tarjeta__bottom .falta { flex: none; max-width: 48%; font-size: var(--fs-small); }
.tarjetas { display: grid; gap: 8px; }

/* ==========================================================================
   3.15 Panel de detalle (ficha) y hoja
   ========================================================================== */
.panel { background: var(--surface); overflow-y: auto; overscroll-behavior: contain; }
.app[data-panel="docked"] .panel { position: sticky; top: 0; height: 100dvh; border-left: 1px solid var(--line); }
.app[data-panel="overlay"] .panel { position: fixed; inset: 0 0 0 auto; width: var(--inspector-w); max-width: 100vw; z-index: var(--z-panel); box-shadow: var(--sh-sheet);
  animation: panel-in var(--dur-3) var(--ease-out) both; }
.app[data-panel="full"] .panel { position: fixed; inset: 0; z-index: var(--z-panel); padding-top: env(safe-area-inset-top, 0px); }
@keyframes panel-in { from { opacity: 0; translate: 24px 0; } }
@media (prefers-reduced-motion: reduce) { .app[data-panel="overlay"] .panel { animation-name: fundido; } }
@keyframes fundido { from { opacity: 0; } }
.panel__bar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; min-height: 52px; padding-inline: var(--gutter-l) var(--gutter-r); background: var(--material); -webkit-backdrop-filter: var(--material-blur); backdrop-filter: var(--material-blur); }
.panel__body { padding: 0 var(--gutter-r) var(--sp-8) var(--gutter-l); }
.panel__foot { position: sticky; bottom: 0; padding: 12px var(--gutter-r) calc(12px + env(safe-area-inset-bottom, 0px)) var(--gutter-l); background: var(--material); -webkit-backdrop-filter: var(--material-blur); backdrop-filter: var(--material-blur); border-top: 1px solid var(--line); }
@media (min-width: 1024px) { .panel__foot { position: static; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; } }
.panel__foot:empty { display: none; }
.panel__crumb { flex: 1; min-width: 0; font-weight: 600; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel__volver { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--accent); font-weight: 500; cursor: pointer; }
#panel-titulo:focus { outline: none; }

.hoja { width: min(560px, calc(100vw - 32px)); max-height: min(86dvh, 760px); padding: 0; border: 0; border-radius: var(--r-xl); background: var(--surface-raised); color: var(--text); box-shadow: var(--sh-sheet);
  opacity: 1; translate: 0 0; transition: opacity var(--dur-2) var(--ease), translate var(--dur-3) var(--spring), display var(--dur-2) allow-discrete, overlay var(--dur-2) allow-discrete; }
@starting-style { .hoja[open] { opacity: 0; translate: 0 var(--shift); } }
.hoja::backdrop { background: var(--scrim); }
.hoja--ancha { width: min(760px, calc(100vw - 32px)); }
.hoja__bar { display: grid; grid-template-columns: 1fr minmax(0, max-content) 1fr; align-items: center; min-height: 52px; padding: 0 8px; border-bottom: 1px solid var(--line); }
/* un título largo ("Confirmación · 11352 Savino del Bene") baja de línea en vez de cortarse (integración) */
.hoja__title { font: 600 var(--fs-h3)/1.2 var(--font-ui); margin: 0; padding-block: 6px; text-align: center; overflow-wrap: break-word; text-wrap: balance; }
.hoja__body { padding: var(--sp-5) var(--sp-5) var(--sp-4); overflow-y: auto; display: grid; gap: var(--sp-5); }
.hoja__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px var(--sp-5) calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
.hoja__grabber { display: none; }
@media (max-width: 599.98px) {
  .hoja, .hoja--ancha { margin: auto 0 0; width: 100%; max-width: none; max-height: 92dvh; border-radius: var(--r-xl) var(--r-xl) 0 0; transition-duration: var(--dur-2), var(--dur-4); }
  @starting-style { .hoja[open] { translate: 0 100%; } }
  .hoja__grabber { display: block; width: 36px; height: 5px; margin: 6px auto 0; border-radius: 3px; background: var(--line-strong); }
  .hoja__foot .btn--primary { flex: 1; }
}
/* Estructura interna: la hoja es columna flexible (cuerpo con scroll propio) */
.hoja[open] { display: flex; flex-direction: column; }
.hoja__form { display: flex; flex-direction: column; min-height: 0; max-height: inherit; flex: 1 1 auto; }
.hoja__body { flex: 1 1 auto; min-height: 0; }
.hoja__bar > :first-child { justify-self: start; } .hoja__bar > :last-child { justify-self: end; }
.hoja__intro { margin: 0; font-size: var(--fs-small); color: var(--text-2); }
.hoja__lista { display: grid; gap: 8px; }

/* Listas para elegir (Reasignar, ¿Quién sos?) */
.elegir { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.elegir__item { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 8px 14px 8px 8px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); cursor: pointer; }
.elegir__item:hover { background: var(--hover); }
.elegir__item[aria-current="true"] { border-color: var(--sel); box-shadow: inset 0 0 0 1px var(--sel); }
.elegir__txt { display: grid; gap: 2px; min-width: 0; flex: 1; }
.elegir__nombre { font-weight: 600; color: var(--text-strong); }
.elegir__d { font-size: var(--fs-caption); color: var(--text-3); }
.elegir__marca { color: var(--accent); }
.sellos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sello { all: unset; box-sizing: border-box; display: grid; justify-items: center; align-content: start; gap: 6px; padding: 16px 8px 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); text-align: center; cursor: pointer; }
.sello:hover { background: var(--hover); }
.sello[aria-pressed="true"] { border-color: var(--sel); box-shadow: inset 0 0 0 1px var(--sel); }
.sello__nombre { font: 400 20px/1.15 var(--font-display); color: var(--text-strong); }
.sello__puesto { font-size: var(--fs-caption); color: var(--text-3); }
.cuenta-vista { margin: 0; font-size: var(--fs-small); color: var(--text-2); }

/* ==========================================================================
   3.16 Vista previa de documento
   ========================================================================== */
.doc { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px 16px; align-items: start; margin: 0; }
.doc__thumb { all: unset; box-sizing: border-box; display: block; width: 120px; max-width: 100%; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--line); background: var(--surface-2); cursor: zoom-in; }
.doc__thumb img { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border-radius: var(--r-sm); }
.doc__thumb--word, .doc__thumb--servidor { display: grid; place-content: center; justify-items: center; gap: 4px; padding: 8px; background: var(--bg-sunken); color: var(--text-2); font-size: var(--fs-caption); text-align: center; cursor: default; }
.doc__thumb--word b, .doc__thumb--servidor b { font-weight: 600; color: var(--text-strong); }
.doc__meta { display: grid; gap: 4px; min-width: 0; }
.doc__name { font-weight: 600; color: var(--text-strong); overflow-wrap: anywhere; }
.doc__info { font-size: var(--fs-small); color: var(--text-2); }
.doc__where { display: flex; align-items: flex-start; gap: 6px; font-size: var(--fs-caption); color: var(--text-3); }
.doc__where .ico { margin-top: 1px; }
.doc__actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px; margin-left: -8px; }
@media (max-width: 599.98px) { .doc { grid-template-columns: 88px minmax(0, 1fr); } .doc__thumb { width: 88px; } }

/* ==========================================================================
   3.17 Grilla de fotos y visor
   ========================================================================== */
.fotos { display: grid; gap: 8px; }
.fotos__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: 0; }
.fotos__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.fotos__item { all: unset; display: block; aspect-ratio: 3 / 2; max-width: 100%; overflow: hidden; border-radius: var(--r-sm); cursor: zoom-in; background: var(--surface-2); }
.fotos__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-2) var(--ease); }
.fotos__item:hover img { transform: scale(1.03); }
@media (max-width: 599.98px) { .fotos__grid { grid-template-columns: repeat(3, 1fr); gap: 4px; } }
@media (prefers-reduced-motion: reduce) { .fotos__item:hover img { transform: none; } }

/* Visor: negro al 97 % en los dos temas (son fotos; tapa la app de atrás). La foto ocupa hasta 92vw × 84vh. */
.visor { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(0 0 0 / .97); color: #FFFFFF; --focus: #FFFFFF; }
.visor[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.visor::backdrop { background: rgb(0 0 0 / .85); }
.visor__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) calc(8px + env(safe-area-inset-right, 0px)) 8px calc(16px + env(safe-area-inset-left, 0px)); }
.visor__n { font-size: var(--fs-small); font-variant-numeric: tabular-nums; color: #E8E7F3; }
.visor__btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / .12); color: #FFFFFF; cursor: pointer; }
.visor__btn:hover { background: rgb(255 255 255 / .2); }
.visor__btn:disabled { opacity: .3; cursor: default; }
.visor__fig { position: relative; display: grid; place-items: center; min-height: 0; margin: 0; padding: 0 calc(60px + env(safe-area-inset-right, 0px)) 0 calc(60px + env(safe-area-inset-left, 0px)); }
.visor__fig img { width: 100%; height: 100%; max-width: 92vw; max-height: 84vh; object-fit: contain; border-radius: 0; }
/* «Descargar» en la barra (lo pinta core.js si el ítem trae {key, trabajo, bajar}) */
.visor__bajar { display: inline-flex; align-items: center; gap: 8px; height: 44px; margin-left: auto; padding: 0 18px 0 14px; border: 0; border-radius: var(--r-pill);
  background: rgb(255 255 255 / .14); color: #FFFFFF; font: 600 var(--fs-small)/1 var(--font-ui); cursor: pointer; }
.visor__bajar:hover { background: rgb(255 255 255 / .24); }
.visor__bajar:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.visor__prev, .visor__next { position: absolute; top: 50%; translate: 0 -50%; }
.visor__prev { left: calc(8px + env(safe-area-inset-left, 0px)); } .visor__next { right: calc(8px + env(safe-area-inset-right, 0px)); }
.visor__cap { margin: 0; padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)); text-align: center; font-size: var(--fs-small); color: #E8E7F3; }
@media (max-width: 599.98px) { .visor__fig { padding-inline: 8px; } .visor__prev, .visor__next { top: auto; bottom: 8px; translate: none; } }
/* Deslizar con un dedo lo maneja core.js (pasar de foto, cerrar hacia abajo); el zoom con dos dedos sigue andando */
.visor { touch-action: pinch-zoom; }
/* Un solo ítem: sin contador ni flechas; la cruz va a la derecha y la foto usa todo el ancho */
.visor__bar > [data-visor="cerrar"]:first-child { margin-left: auto; }
.visor__fig.is-solo { padding-inline: calc(8px + env(safe-area-inset-left, 0px)) calc(8px + env(safe-area-inset-right, 0px)); }

/* ==========================================================================
   3.18 Vista previa de mail y de WhatsApp
   ========================================================================== */
.mail { max-width: 720px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--mail-paper); overflow: hidden; }
.mail__head { padding: 12px 16px; border-bottom: 1px solid var(--line); display: grid; gap: 6px; }
.mail__row { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.mail__k { font-size: var(--fs-caption); color: var(--text-3); }
.mail__v { min-width: 0; overflow-wrap: anywhere; }
.mail__subject { font-weight: 600; font-size: var(--fs-h3); }
.mail__count { font-size: var(--fs-caption); color: var(--text-3); margin-inline-start: 8px; } .mail__count.is-largo { color: var(--warn); }
.mail__body { padding: 16px; max-width: 68ch; white-space: pre-wrap; font-size: var(--fs-body); line-height: 1.55; overflow-wrap: anywhere; }
.mail__firma { padding: 0 16px 16px; font-size: var(--fs-small); color: var(--text-2); white-space: pre-line; }
.var { background: var(--var-bg); border-bottom: 1px dotted var(--var-line); border-radius: 2px; }
.mail:not(.ver-variables) .var:not(.var--falta) { background: none; border: 0; }
.var--falta { background: var(--var-missing-bg); color: var(--danger); font-weight: 600; padding: 0 4px; border: 0; }
.mail__checks { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 10px 16px; border-top: 1px solid var(--line); background: var(--surface-2); font-size: var(--fs-caption); }
.check { display: inline-flex; align-items: center; gap: 4px; } .check.is-ok { color: var(--ok); } .check.is-mal { color: var(--danger); font-weight: 600; } .check.is-pend { color: var(--warn); }
.mail__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.copiamail { display: grid; gap: 6px; max-width: 720px; margin-top: 12px; padding: 12px; border-radius: var(--r-lg); background: var(--surface-2); box-sizing: border-box; }
.copiamail__row { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 44px; }
.copiamail__v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
@media (max-width: 599.98px) { .mail__row { grid-template-columns: 1fr; gap: 0; } .copiamail__row { grid-template-columns: minmax(0, 1fr) auto; } .copiamail__row .mail__k { grid-column: 1 / -1; } }
.mail__logo { display: block; height: 18px; width: auto; margin-bottom: 10px; }
.mail__logo--oscuro { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mail__logo--claro { display: none; }
  :root:not([data-theme="light"]) .mail__logo--oscuro { display: block; }
}
:root[data-theme="dark"] .mail__logo--claro { display: none; }
:root[data-theme="dark"] .mail__logo--oscuro { display: block; }
.mail__adj { display: inline-flex; align-items: center; gap: 4px; margin-inline-end: 8px; }

.wa { max-width: 360px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); }
.wa__head { padding: 10px 14px; background: var(--surface-2); display: grid; } .wa__name { font-weight: 600; } .wa__num { font-size: var(--fs-caption); color: var(--text-3); }
.wa__wall { background: var(--wa-wall); padding: 14px; }
.wa__bubble { margin: 0 0 0 auto; max-width: 85%; padding: 8px 10px 6px; background: var(--wa-out); color: var(--wa-ink); border-radius: 8px 0 8px 8px; font-size: 15px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.wa__meta { display: block; text-align: right; font-size: 11px; color: var(--wa-meta); margin-top: 2px; }
.wa__foot { padding: 8px 14px; background: var(--surface-2); }
.wa__foot .is-largo { color: var(--warn); }
.wa .var:not(.var--falta) { background: none; border: 0; }

/* ==========================================================================
   3.19 Aviso (toast) con Deshacer
   ========================================================================== */
.toasts { position: fixed; z-index: var(--z-toast); left: 50%; translate: -50% 0; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 8px; width: min(520px, calc(100vw - 32px)); }
@media (max-width: 1023.98px) { .toasts { bottom: calc(var(--tabbar-h) + 24px + env(safe-area-inset-bottom, 0px)); } }
/* Con una hoja abierta el aviso sale arriba de la pantalla: abajo tapaba el Guardar del pie (repaso 21/10/26).
   La hoja abierta va sin `translate` (translate: 0 0 la volvía el marco del aviso fijo y lo pegaba a su título). */
dialog .toasts { bottom: auto; top: calc(16px + env(safe-area-inset-top, 0px)); }
dialog .toast { --shift: -8px; }
.toast { display: flex; align-items: center; gap: 8px; padding: 10px 6px 10px 16px; border-radius: var(--r-lg); background: var(--surface-raised); box-shadow: var(--sh-float); font-size: var(--fs-small); animation: toast-in var(--dur-3) var(--spring) both; }
.toast__text { flex: 1; min-width: 0; } .toast__btn { all: unset; padding: 8px 10px; border-radius: var(--r-md); font-weight: 600; color: var(--accent); cursor: pointer; white-space: nowrap; } .toast__btn:hover { background: var(--hover); }
@keyframes toast-in { from { opacity: 0; translate: 0 var(--shift); } }
.toasts:empty { display: none; }
.toast > .ico { color: var(--ok); }
.toast--aviso > .ico { color: var(--warn); }
.toast.is-saliendo { opacity: 0; transition: opacity var(--dur-2) var(--ease); }
.toast__btn { box-sizing: border-box; text-align: center; }

/* ==========================================================================
   3.20 Diálogo de confirmación
   ========================================================================== */
.alerta { width: min(360px, calc(100vw - 32px)); padding: 20px; border: 0; border-radius: var(--r-xl); background: var(--surface-raised); color: var(--text); box-shadow: var(--sh-sheet); box-sizing: border-box; }
.alerta::backdrop { background: var(--scrim); }
.alerta__title { margin: 0 0 6px; font: 600 var(--fs-h3)/1.3 var(--font-ui); color: var(--text-strong); }
.alerta__text { margin: 0 0 16px; font-size: var(--fs-small); color: var(--text-2); }
.alerta__actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ==========================================================================
   3.21 Bloqueo, banner de traba y estado vacío
   ========================================================================== */
.bloqueo { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; padding: 12px; border-radius: var(--r-md); background: var(--surface-2); box-shadow: inset 3px 0 0 var(--warn-fill); }
.bloqueo--trabado { box-shadow: inset 3px 0 0 var(--danger-fill); }
.bloqueo__t { margin: 0; font-weight: 600; color: var(--text-strong); } .bloqueo__l { margin: 2px 0 0; font-size: var(--fs-small); color: var(--text-2); } .bloqueo__a { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bloqueo > .ico { margin-top: 2px; color: var(--text-2); }
.bloqueo:focus { outline: 2px solid var(--focus); outline-offset: 2px; }

.traba { padding: 12px 14px; border-radius: var(--r-md); background: var(--warn-bg); box-shadow: inset 3px 0 0 var(--warn-fill); }
.traba--trabado { background: var(--danger-bg); box-shadow: inset 3px 0 0 var(--danger-fill); }
.traba__nivel { margin: 0; display: inline-flex; gap: 4px; align-items: center; font: 600 var(--fs-eyebrow)/1 var(--font-caps); font-stretch: 125%; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--warn); }
.traba--trabado .traba__nivel { color: var(--danger); }
.traba__t { margin: 6px 0 0; font: 600 var(--fs-body)/1.35 var(--font-ui); color: var(--text-strong); } .traba__l { margin: 2px 0 0; font-size: var(--fs-small); color: var(--text-2); } .traba__a { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.traba--info { background: var(--info-bg); box-shadow: inset 3px 0 0 var(--seg-done); }
.traba--info .traba__nivel { color: var(--text-2); }

.vacio { display: grid; justify-items: center; gap: 6px; max-width: 380px; margin: 0 auto; padding: 48px 24px; text-align: center; box-sizing: border-box; }
.vacio__marca { width: 40px; height: 40px; color: var(--text-3); margin-bottom: 6px; }
.vacio__t { margin: 0; font: 600 17px/1.3 var(--font-ui); color: var(--text-strong); text-wrap: balance; }
.vacio__l { margin: 0; font-size: var(--fs-small); color: var(--text-2); text-wrap: pretty; }
.vacio .btn { margin-top: 10px; }

/* ==========================================================================
   3.22 Campos de formulario
   ========================================================================== */
.campo { display: grid; gap: 6px; min-width: 0; }
.campo__label { font-size: var(--fs-small); font-weight: 600; color: var(--text-strong); }
.campo__input, .campo select, .campo textarea { box-sizing: border-box; width: 100%; min-height: var(--control-h); padding: 0 12px; border: 1px solid var(--control-border); border-radius: var(--r-md); background: var(--surface); }
.campo textarea { padding: 10px 12px; min-height: 120px; resize: vertical; }
.campo__input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--focus); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
.campo__ayuda { margin: 0; font-size: var(--fs-caption); color: var(--text-3); }
.campo__error { margin: 0; font-size: var(--fs-caption); font-weight: 600; color: var(--danger); }
.campo [aria-invalid="true"] { border-color: var(--danger-fill); }
.mas > summary { cursor: pointer; font-size: var(--fs-small); font-weight: 600; color: var(--accent); min-height: 44px; display: flex; align-items: center; }
.mas[open] > summary { margin-bottom: var(--sp-3); }
.mas > .campo + .campo { margin-top: var(--sp-4); }
.campo__opciones { display: grid; gap: 2px; }
.opcion { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: var(--fs-small); cursor: pointer; }
.opcion input { width: 18px; height: 18px; margin: 0; accent-color: var(--sel); flex: none; }
.campo__fila { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.campo__ok { margin: 0; font-size: var(--fs-caption); font-weight: 600; color: var(--ok); }
.campos-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
@media (max-width: 599.98px) { .campos-2 { grid-template-columns: 1fr; } }
.copiar-manual { width: 100%; min-height: 160px; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--control-border); border-radius: var(--r-md); background: var(--surface); font: var(--fs-small)/1.5 var(--font-mono); resize: vertical; }
/* el mail con su cuadro, como papel (los colores del mail van en línea: fondo blanco también en modo noche) */
.copiar-manual--html { max-height: 50vh; overflow: auto; resize: none; background: #FFFFFF; color: #1C1B33; font: 14px/1.45 Arial, Helvetica, sans-serif; }
.copiar-manual--html:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ==========================================================================
   3.23 Filtro "Quién"
   ========================================================================== */
.quien { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter-r) * -1) 0 calc(var(--gutter-l) * -1); padding: 4px var(--gutter-r) 4px var(--gutter-l); }
.quien::-webkit-scrollbar { display: none; }
.quien__chip { position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 14px 4px 6px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); cursor: pointer; }
.quien__chip:not(:has(.emb)) { padding-left: 14px; }
.quien__emb { position: relative; display: inline-flex; }
.quien__name { font-size: var(--fs-small); font-weight: 600; } .quien__n { font-size: var(--fs-small); color: var(--text-3); }
.quien__chip[aria-pressed="true"] { background: var(--sel); border-color: var(--sel); color: var(--on-sel); }
.quien__chip[aria-pressed="true"] .quien__n { color: inherit; opacity: .8; }
.quien__chip--sin .quien__name { color: var(--danger); } .quien__chip--sin[aria-pressed="true"] .quien__name { color: inherit; }
.quien__chip { --row-bg: var(--surface); color: var(--text-strong); }
.quien__chip[aria-pressed="true"] { --row-bg: var(--sel); }
.quien__chip[aria-pressed="true"] .emb--vacio { color: var(--on-sel); }
@media (max-width: 1023.98px) { .quien .emb { width: 28px; height: 28px; } }

/* ==========================================================================
   3.24 Lista de pasos de la ficha y control de calidad
   ========================================================================== */
.tareas { list-style: none; margin: 0; padding: 0; }
.tarea { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--line); }
.tarea__n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-strong); font: 600 12px/1 var(--font-ui); color: var(--text-2); }
.tarea.is-hecho .tarea__n { background: var(--seg-done); color: var(--on-sel); box-shadow: none; }
.tarea.is-ahora .tarea__n { box-shadow: inset 0 0 0 2px var(--ok-fill); color: var(--text-strong); }
.tarea.is-ahora.is-atencion .tarea__n { box-shadow: inset 0 0 0 2px var(--warn-fill); } .tarea.is-ahora.is-trabado .tarea__n { box-shadow: inset 0 0 0 2px var(--danger-fill); }
.tarea__t { margin: 0; font-weight: 600; color: var(--text-strong); } .tarea__d { margin: 2px 0 0; font-size: var(--fs-small); color: var(--text-2); }
.tarea__main > * + .control, .tarea__main > * + .bloqueo, .tarea__main > * + .btn { margin-top: 12px; }
.tarea__main { min-width: 0; }
.tarea__main > * + .btn-fila { margin-top: 12px; }
.tarea.is-na .tarea__t, .tarea.is-nofac .tarea__t { color: var(--text-2); }
.tarea .chip--firma { margin-inline-start: 6px; vertical-align: 1px; }
.control { padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); }
.control__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; }
.control__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.control__p { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; }
.control__p:has(.control__check) { grid-template-columns: minmax(0, 1fr); }
.control__p.is-ok > .ico { color: var(--ok); } .control__p.is-mal > .ico { color: var(--danger); }
.control__p > .ico { margin-top: 2px; }
.control__t { margin: 0; font-weight: 600; font-size: var(--fs-small); } .control__d { margin: 2px 0 0; font-size: var(--fs-caption); color: var(--text-3); }
.control__check { display: flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; font-size: var(--fs-small); cursor: pointer; }
.control__check input { width: 18px; height: 18px; margin: 0; accent-color: var(--sel); flex: none; }
.control__a { margin: 6px 0 0; }
.control__a .btn { margin-inline-start: -8px; }
.control__a .btn--secondary { margin-inline-start: 0; }

/* ==========================================================================
   3.25 Aviso de traba en lista (pantalla Trabas)
   ========================================================================== */
.avisos { list-style: none; margin: 0; padding: 0; }
.aviso { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto auto; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; min-height: 64px; border-bottom: 1px solid var(--line); box-shadow: inset 3px 0 0 var(--nivel); }
.aviso--trabado { --nivel: var(--danger-fill); } .aviso--atencion { --nivel: var(--warn-fill); } .aviso--info { --nivel: var(--seg-done); }
.aviso__nivel { display: inline-flex; gap: 4px; align-items: center; font: 600 var(--fs-eyebrow)/1 var(--font-caps); font-stretch: 125%; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }
.aviso--trabado .aviso__nivel { color: var(--danger); } .aviso--atencion .aviso__nivel { color: var(--warn); } .aviso--info .aviso__nivel { color: var(--text-2); }
.aviso__t { margin: 0; font-weight: 600; } .aviso__t a { color: var(--text-strong); text-decoration: none; } .aviso__l { margin: 2px 0 0; font-size: var(--fs-small); color: var(--text-2); }
.aviso__quien { display: inline-flex; align-items: center; gap: 6px; } .aviso__acc { display: flex; flex-wrap: wrap; gap: 6px; }
.aviso.is-resuelto { opacity: 0; transition: opacity var(--dur-2) var(--ease); }
@container main (max-width: 899.98px) { .aviso { grid-template-columns: minmax(0, 1fr) auto; } .aviso__nivel { grid-column: 1 / -1; } .aviso__edad { display: none; } .aviso__acc { grid-column: 1 / -1; } }
.aviso__t a:hover { text-decoration: underline; text-underline-offset: 3px; }
.aviso__main { min-width: 0; }
.aviso__quien .t-small { color: var(--text-strong); font-weight: 600; }
.aviso__quien .aviso__sin { color: var(--danger); }

/* ==========================================================================
   3.26 Barra de pestañas (compacto)
   ========================================================================== */
.tabbar { position: fixed; z-index: var(--z-tabbar); left: calc(12px + env(safe-area-inset-left, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); height: var(--tabbar-h);
  grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 4px; border-radius: var(--r-pill); box-sizing: border-box;
  background: var(--material); -webkit-backdrop-filter: var(--material-blur); backdrop-filter: var(--material-blur); box-shadow: var(--sh-float); }
.tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 44px; min-width: 0; border-radius: var(--r-pill); color: var(--text-2); text-decoration: none; font: 600 11px/1 var(--font-ui); }
.tab[aria-current="page"] { color: var(--text-strong); background: var(--hover); }
.tab[aria-current="page"] svg { color: var(--imc-orange); }
.tab .badge { position: absolute; top: 2px; left: calc(50% + 6px); }
.tab > span:not(.badge) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   3.27 Franja de datos
   ========================================================================== */
.franja { display: flex; align-items: center; gap: 8px; min-height: var(--franja-h); padding: 4px var(--gutter-r) 4px var(--gutter-l); background: var(--info-bg); font-size: var(--fs-small); color: var(--text); box-sizing: border-box; }
.franja__t { flex: 1; min-width: 0; margin: 0; }
.franja--atencion { background: var(--warn-bg); } .franja--solo-lectura { background: var(--bg-sunken); }
.franja.is-min .franja__l, .franja.is-min .btn { display: none; }
/* en el celular se esconde la segunda frase, salvo en los avisos (franja ámbar): ahí es lo que hay que leer */
@media (max-width: 599.98px) { .franja:not(.franja--atencion) .franja__l { display: none; } }
.franja__t b { font-weight: 600; }
.franja .iconbtn { width: 28px; height: 28px; flex: none; }
.franja--error { background: var(--danger-bg); }
/* En oscuro los fondos de estado son translúcidos: la franja fija (compacto) necesita base opaca */
.franja { background-color: var(--bg); background-image: linear-gradient(var(--info-bg), var(--info-bg)); }
.franja.franja--atencion { background-image: linear-gradient(var(--warn-bg), var(--warn-bg)); }
.franja.franja--solo-lectura { background-image: linear-gradient(var(--bg-sunken), var(--bg-sunken)); }
.franja.franja--error { background-image: linear-gradient(var(--danger-bg), var(--danger-bg)); }

/* ==========================================================================
   3.28 Personas de la ficha
   ========================================================================== */
.personas { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.persona { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 14px 8px 8px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); text-align: left; cursor: pointer; box-sizing: border-box; min-width: 0; color: inherit; }
.persona:hover { background: var(--hover); } .persona--fija { cursor: default; } .persona--fija:hover { background: var(--surface); }
.persona__txt { display: grid; gap: 2px; min-width: 0; }
.persona__nombre { font: 600 var(--fs-body)/1.2 var(--font-ui); color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.persona--vacia .persona__nombre { color: var(--accent); }
.persona--sin .persona__nombre { color: var(--danger); }
.persona__estado { font-size: var(--fs-caption); color: var(--text-3); }
@media (max-width: 599.98px) { .personas { grid-template-columns: repeat(2, minmax(0, 1fr)); } .persona { padding-right: 8px; } }

/* ==========================================================================
   3.29 Bloque de cliente en Cobranza
   ========================================================================== */
.cobra { padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 3px 0 0 transparent; display: grid; gap: 8px; min-width: 0; }
.cobra[data-nivel="trabado"] { box-shadow: inset 3px 0 0 var(--danger-fill); } .cobra[data-nivel="atencion"] { box-shadow: inset 3px 0 0 var(--warn-fill); }
.cobra__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.cobra__cli { margin: 0; flex: 1; min-width: 0; font: 600 var(--fs-h3)/1.3 var(--font-ui); color: var(--text-strong); }
.cobra__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; font-size: var(--fs-small); color: var(--text-2); }
.cobra__resumen { margin: 0; font-weight: 600; } .cobra__reclamos { margin: 0; font-size: var(--fs-small); color: var(--text-2); }
.cobra__acc { display: flex; flex-wrap: wrap; gap: 8px; }
.cobra__facturas { list-style: none; margin: 4px 0 0; padding: 0; border-top: 1px solid var(--line); }
.cobra__f { display: grid; grid-template-columns: 64px 140px 112px 64px 96px 132px auto minmax(0, 1fr); gap: 10px; align-items: center; min-height: 44px; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
.cobra__nro { font-weight: 600; } .cobra__arca { color: var(--text-3); }
@container main (max-width: 899.98px) { .cobra__f { grid-template-columns: minmax(0, 1fr) auto; padding: 8px 0; } .cobra__arca, .cobra__f > :nth-child(3) { display: none; } }
.cobra__f > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cobra__f a { color: var(--accent); }
.cobra__mas { list-style: none; padding: 6px 0 0; }

/* ==========================================================================
   3.30 Menú "⋯" y popover
   ========================================================================== */
.menu { position: absolute; z-index: var(--z-sheet); min-width: 240px; padding: 6px; border-radius: var(--r-lg); background: var(--surface-raised); box-shadow: var(--sh-pop); display: grid; box-sizing: border-box; }
.menu__item { all: unset; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: var(--r-md); font-size: var(--fs-small); cursor: pointer; }
.menu__item:hover, .menu__item:focus-visible { background: var(--accent-soft); }
.menu__item--peligro { color: var(--danger); }
.menu__sep { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
@media (max-width: 1023.98px) { .menu__item { min-height: 48px; } }
.menu--hoja { position: static; min-width: 0; padding: 0; box-shadow: none; background: transparent; }
.menu__item .ico { color: var(--text-2); }
.menu__item--peligro .ico { color: var(--danger); }

/* ==========================================================================
   Núcleo: piezas genéricas que la SPEC describe en prosa
   ========================================================================== */
/* Lista agrupada con filas de 52 px (Más, listas de navegación) */
.lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.lista__item { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 4px; border-bottom: 1px solid var(--line); color: var(--text-strong); text-decoration: none; }
.lista__item:hover { background: var(--hover); }
.lista__item .ico { color: var(--text-2); }
.lista__label { flex: 1; min-width: 0; }
.lista__item > .ico:last-child { color: var(--text-3); }

/* Vista en construcción (views/_stubs.js) */
.stub { padding-bottom: var(--sp-8); }
.stub__nota { max-width: var(--read-max); }

/* Bloques de lectura */
.lectura { max-width: var(--read-max); }
.seccion { margin-top: var(--sp-7); }
.seccion > .t-h2 { margin-bottom: var(--sp-3); }

/* Estrella y marca IMC en línea */
.estrella { width: 10px; height: 10px; color: var(--imc-orange); flex: none; }

@media (prefers-reduced-motion: reduce) {
  .toast { animation-name: fundido; }
  .hoja { translate: none; }
}

/* Núcleo (core.js): piezas que arma el núcleo además de la SPEC */
.lista__item--btn { box-sizing: border-box; width: 100%; border: 0; border-bottom: 1px solid var(--line); background: none; font: inherit; text-align: left; cursor: pointer; }
.lista__item .emb { margin-inline-start: -2px; }
.quien__solo { justify-self: center; }
.tarea__accion { margin-top: 12px; }
.tarea__accion + .tarea__accion { margin-inline-start: 8px; }
.tarea__main > .bloqueo + .tarea__accion { margin-top: 8px; }
.tarea__d .emb, .aviso__l .emb, .t-small .emb, .datos .emb { display: inline-block; vertical-align: -3px; }
/* DECISIÓN: los anchos de columna de 3.13 suman bien solo con border-box (Trabajo = 304 px a 1440, como dice 2.4);
   y en la celda "Paso a paso" (164 px útiles) la etiqueta va debajo de la barra para no cortarse. */
.tabla th, .tabla td { box-sizing: border-box; }
.tabla .pasos { flex-direction: column; align-items: flex-start; gap: 5px; }
.tabla .pasos__label { max-width: 100%; }
.alerta .copiar-manual { margin: 0 0 16px; }
.searchpop .vacio { padding: 24px 12px; }
.franja__min { color: var(--text-2); }
.panel__volver .ico { margin-inline-start: -4px; }
.v-mas .grupo { margin-top: var(--sp-6); }
@media (max-width: 1023.98px) { .lista__item--btn { min-height: 52px; } }

/* ==========================================================================
   UPGRADE 20/10/26 · Tema "Apple": claro, aireado, una sola señal de color por fila.
   DECISIÓN: es una capa encima de 2.2–3.30 (mismos tokens y clases): se puede sacar entera y vuelve la v2.
   - Tipografía: SF en Apple, Inter en el resto; títulos en sans 700 con tracking negativo. La serif queda solo
     en los sellos de las personas (--font-seal), que son la impronta "institucional".
   - Riel lateral claro (como Mail o Notas) con el logo de IMC en sus colores; la marca va en el logo, no en la banda.
   - El semáforo (punto + plazo) es la única señal de estado en la fila: chau barras rojas y textos en rojo.
   ========================================================================== */
:root {
  --font-ui: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --font-seal: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --fs-display: 2.5rem;  --ls-display: -.025em;
  --fs-title: 2.125rem;  --lh-title: 1.12; --ls-title: -.022em;
  --fs-h2: 1.25rem;      --lh-h2: 1.25;    --ls-h2: -.012em;

  --bg: #FBFBFD; --bg-sunken: #F2F2F5; --surface: #FFFFFF; --surface-2: #F7F7F9; --surface-raised: #FFFFFF;
  --side-bg: #F5F5F7; --side-hover: rgb(0 0 0 / .045); --side-active: rgb(30 24 112 / .085); --side-active-ink: #1E1870;
  --text: #1D1D1F; --text-strong: #1D1D1F; --text-2: #5E5E64; --text-3: #6E6E74;
  --line: #E8E8ED; --line-strong: #D2D2D7; --rule: #C7C7CC; --control-border: #8E8E93;
  --hover: rgb(0 0 0 / .035); --press: rgb(0 0 0 / .07);
  --sel: #1E1870; --on-sel: #FFFFFF;
  --ok: #1D7A35;   --ok-fill: #30B550;  --ok-bg: #E8F6EC;
  --warn: #935400; --warn-fill: #F59E0B; --warn-bg: #FFF3DC;
  --danger: #C21A1A; --danger-fill: #F0352B; --danger-bg: #FDECEB;
  --azul: #0A64D6; --azul-fill: #2F7BF5; --azul-bg: #EAF2FE;
  --seg-done: #1E1870; --seg-todo: #D9D9DF;
  --sh-1: 0 1px 2px rgb(0 0 0 / .04), 0 0 0 .5px rgb(0 0 0 / .07);
  --sh-card: 0 1px 3px rgb(0 0 0 / .04), 0 4px 14px rgb(0 0 0 / .035), 0 0 0 .5px rgb(0 0 0 / .06);
  --sh-pop: 0 12px 32px rgb(0 0 0 / .12), 0 0 0 .5px rgb(0 0 0 / .08);
  --sh-float: 0 10px 28px rgb(0 0 0 / .14), 0 0 0 .5px rgb(0 0 0 / .08);
  --sh-sheet: 0 24px 70px rgb(0 0 0 / .22), 0 0 0 .5px rgb(0 0 0 / .08);
  --material: rgb(251 251 253 / .8);
  --r-md: 10px; --r-lg: 16px; --r-xl: 22px;
  --row-h: 64px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E0E11; --bg-sunken: #1A1A1E; --surface: #161619; --surface-2: #1C1C20; --surface-raised: #222226;
    --side-bg: #131316; --side-hover: rgb(255 255 255 / .06); --side-active: rgb(173 168 255 / .16); --side-active-ink: #D9D7FF;
    --text: #EDEDF0; --text-strong: #FFFFFF; --text-2: #A8A8AF; --text-3: #8E8E95;
    --line: rgb(255 255 255 / .085); --line-strong: rgb(255 255 255 / .16); --rule: rgb(255 255 255 / .28);
    --hover: rgb(255 255 255 / .05); --press: rgb(255 255 255 / .09);
    --ok: #4ED07A; --ok-fill: #30C25A; --ok-bg: rgb(48 194 90 / .14);
    --warn: #F7B955; --warn-fill: #F5A524; --warn-bg: rgb(245 165 36 / .14);
    --danger: #FF7B72; --danger-fill: #FF453A; --danger-bg: rgb(255 69 58 / .14);
    --azul: #6EA8FF; --azul-fill: #3B82F6; --azul-bg: rgb(59 130 246 / .16);
    --seg-done: #C9C6F5; --seg-todo: rgb(255 255 255 / .18);
    --sh-1: 0 1px 2px rgb(0 0 0 / .5), 0 0 0 .5px rgb(255 255 255 / .07);
    --sh-card: 0 1px 2px rgb(0 0 0 / .5), 0 0 0 .5px rgb(255 255 255 / .08);
    --material: rgb(14 14 17 / .78);
  }
}
:root[data-theme="dark"] {
  --bg: #0E0E11; --bg-sunken: #1A1A1E; --surface: #161619; --surface-2: #1C1C20; --surface-raised: #222226;
  --side-bg: #131316; --side-hover: rgb(255 255 255 / .06); --side-active: rgb(173 168 255 / .16); --side-active-ink: #D9D7FF;
  --text: #EDEDF0; --text-strong: #FFFFFF; --text-2: #A8A8AF; --text-3: #8E8E95;
  --line: rgb(255 255 255 / .085); --line-strong: rgb(255 255 255 / .16); --rule: rgb(255 255 255 / .28);
  --hover: rgb(255 255 255 / .05); --press: rgb(255 255 255 / .09);
  --ok: #4ED07A; --ok-fill: #30C25A; --ok-bg: rgb(48 194 90 / .14);
  --warn: #F7B955; --warn-fill: #F5A524; --warn-bg: rgb(245 165 36 / .14);
  --danger: #FF7B72; --danger-fill: #FF453A; --danger-bg: rgb(255 69 58 / .14);
  --azul: #6EA8FF; --azul-fill: #3B82F6; --azul-bg: rgb(59 130 246 / .16);
  --seg-done: #C9C6F5; --seg-todo: rgb(255 255 255 / .18);
  --sh-1: 0 1px 2px rgb(0 0 0 / .5), 0 0 0 .5px rgb(255 255 255 / .07);
  --sh-card: 0 1px 2px rgb(0 0 0 / .5), 0 0 0 .5px rgb(255 255 255 / .08);
  --material: rgb(14 14 17 / .78);
}
@media (max-width: 1023.98px) { :root { --fs-title: 1.875rem; --fs-display: 2.125rem; --row-h: 72px; } }

/* Tipografía */
.t-display { font-weight: 700; }
.t-title { font-weight: 700; }
.t-h2 { font-weight: 650; }
.eyebrow { font: 500 var(--fs-small)/1.3 var(--font-ui); font-stretch: normal; letter-spacing: 0; text-transform: none; color: var(--text-3); }
.eyebrow__star { display: none; }
.grupo { border-bottom: 0; padding-bottom: 0; margin: var(--sp-7) 0 var(--sp-2); }
.grupo .eyebrow { font: 650 var(--fs-body)/1.3 var(--font-ui); color: var(--text-strong); letter-spacing: -.01em; }
.grupo .eyebrow .num { color: var(--text-3); font-weight: 500; }

/* Marca de IMC: versión clara u oscura según el tema */
.marca { display: block; height: auto; }
.marca--oscura { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .marca--clara { display: none; } :root:not([data-theme="light"]) .marca--oscura { display: block; } }
:root[data-theme="dark"] .marca--clara { display: none; }
:root[data-theme="dark"] .marca--oscura { display: block; }

/* Riel lateral claro */
.sidebar { background: var(--side-bg); color: var(--text); border-right: 1px solid var(--line); --focus: var(--accent); padding-top: var(--sp-5); }
.sidebar__brand { padding: 6px 12px var(--sp-5); gap: 10px; }
.sidebar__logo img { width: 152px; }
.sidebar__thread { display: none; }
.sidebar .eyebrow--band { color: var(--text-3); font-size: 12px; }
.navitem { color: var(--text); height: 34px; border-radius: 8px; font-weight: 500; }
.navitem .ico { color: var(--text-2); }
.navitem:hover { background: var(--side-hover); }
.navitem[aria-current="page"] { background: var(--side-active); color: var(--side-active-ink); font-weight: 600; }
.navitem[aria-current="page"] .ico { color: var(--side-active-ink); }
.navitem[aria-current="page"]::before { display: none; }
.navitem__count { color: var(--text-3); }
.navgroup { font: 600 11px/1.2 var(--font-ui); font-stretch: normal; letter-spacing: .02em; text-transform: none; color: var(--text-3); margin-top: var(--sp-5); }
.sidebar__foot { border-top-color: var(--line); }
.yo { color: var(--text); } .yo:hover { background: var(--side-hover); }
.yo__role, .sidebar__data { color: var(--text-3); }
.yo__sin { box-shadow: inset 0 0 0 1.5px var(--text-3); color: var(--text-3); }
.sidebar .emb, .masthead .emb { --row-bg: var(--side-bg); }

/* Masthead (celular): material claro, sin banda */
.masthead { background: var(--material); -webkit-backdrop-filter: var(--material-blur); backdrop-filter: var(--material-blur); border-bottom: .5px solid var(--line-strong); --focus: var(--accent); }
.masthead .iconbtn { color: var(--text-strong); }
.masthead__logo img { height: 18px; }

/* Franja de datos: discreta (solo grita si hay un problema) */
.franja { min-height: 30px; font-size: 12.5px; color: var(--text-2); background-image: none !important; background-color: var(--bg); border-bottom: 1px solid var(--line); }
.franja__t b { font-weight: 600; color: var(--text); }
.franja.franja--atencion { background-color: var(--warn-bg); color: var(--warn); }
.franja.franja--error { background-color: var(--danger-bg); color: var(--danger); }
.franja .btn--tertiary { font-size: 12.5px; min-height: 26px; }

/* Barra superior y cabecera */
.toolbar { background: var(--material); }
.pagehead { padding: var(--sp-7) 0 var(--sp-5); gap: 6px; grid-template-columns: minmax(0, 1fr) auto; }
.pagehead > * { grid-column: 1; }
.pagehead > .pagehead__actions { grid-column: 2; grid-row: 1 / span 3; align-self: end; margin: 0; justify-content: flex-end; }
@media (max-width: 599.98px) { .pagehead { grid-template-columns: minmax(0, 1fr); } .pagehead > .pagehead__actions { grid-column: 1; grid-row: auto; justify-content: flex-start; } }
.pagehead .meta { color: var(--text-3); }
.meta > li + li { border-inline-start-color: var(--line-strong); }
.search__input { background: var(--bg-sunken); border-radius: 10px; }
.search:has(.search__kbd) .search__input { padding-right: 64px; }
.app[data-panel="docked"] .search__kbd { display: none; }
.app[data-panel="docked"] .search:has(.search__kbd) .search__input { padding-right: 32px; }

/* Botones, píldoras, segmentado */
.btn { border-radius: 10px; font-weight: 550; }
.btn--secondary { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn--secondary:hover { background: var(--surface-2); }
.btn--primary { box-shadow: 0 1px 2px rgb(232 98 10 / .25); }
.seg { background: var(--bg-sunken); border-radius: 10px; }
.seg__btn { border-radius: 8px; }
.pill { border-color: var(--line-strong); }
.quien__chip { border-color: var(--line); background: var(--surface); box-shadow: var(--sh-1); border-width: 0; min-height: 40px; }
.quien__chip[aria-pressed="true"] { box-shadow: none; }
.chip { font-weight: 600; height: 22px; }
.tag { box-shadow: none; background: var(--bg-sunken); color: var(--text-2); border-radius: 6px; font-weight: 600; font-size: 11.5px; }
.badge--danger { background: var(--danger-fill); }

/* ---------- Logo de cliente (avatar de empresa) ---------- */
.logo { position: relative; display: inline-grid; place-items: center; flex: none; width: var(--s, 28px); height: var(--s, 28px); box-sizing: border-box;
  border-radius: calc(var(--s, 28px) * .26); overflow: hidden; background: var(--logo-bg, #FFFFFF); box-shadow: 0 0 0 .5px rgb(0 0 0 / .12), 0 1px 2px rgb(0 0 0 / .06); }
.logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.logo--mono { background: linear-gradient(160deg, color-mix(in srgb, var(--tono) 82%, #fff) 0%, var(--tono) 100%); color: #fff; box-shadow: inset 0 0 0 .5px rgb(255 255 255 / .18);
  font: 650 calc(var(--s, 28px) * .4)/1 var(--font-ui); letter-spacing: -.02em; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo:not(.logo--mono) { box-shadow: 0 0 0 .5px rgb(255 255 255 / .14); } }

/* ---------- Semáforo unificado ---------- */
.sem { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 22px; padding: 0 9px 0 7px; border-radius: var(--r-pill); box-sizing: border-box;
  font: 600 12.5px/1 var(--font-ui); white-space: nowrap; color: var(--text-2); }
.sem__txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sem__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--sem, var(--text-3)); }
.sem--verde { --sem: var(--ok-fill); padding-inline-start: 0; color: var(--text-2); font-weight: 500; }
.sem--ambar { --sem: var(--warn-fill); background: var(--warn-bg); color: var(--warn); }
.sem--rojo { --sem: var(--danger-fill); background: var(--danger-bg); color: var(--danger); }
.sem--rojo .sem__dot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger-fill) 22%, transparent); }
.sem--azul { --sem: var(--azul-fill); background: var(--azul-bg); color: var(--azul); }
.sem--gris { --sem: var(--line-strong); padding-inline-start: 0; color: var(--text-3); font-weight: 500; }
.sem--grande { height: 28px; padding: 0 12px 0 10px; font-size: 13.5px; }
.sem--grande.sem--verde, .sem--grande.sem--gris { padding-inline-start: 0; }
.sem--punto { padding: 0; height: auto; background: none; }
.sem-ref { all: unset; display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 10px; border-radius: var(--r-pill); cursor: pointer;
  font: 500 var(--fs-small)/1 var(--font-ui); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line); }
.sem-ref:hover { background: var(--hover); color: var(--text-strong); }
.sem-ref__dots { display: inline-flex; gap: 3px; }
.sem-ref__v { --sem: var(--ok-fill); } .sem-ref__a { --sem: var(--warn-fill); } .sem-ref__r { --sem: var(--danger-fill); }
.semhoja { display: grid; gap: var(--sp-4); }
.semhoja__intro { margin: 0; color: var(--text-2); }
.semhoja__claves { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.semhoja__claves li { display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: center; gap: 12px; }
.semhoja__tabla { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.semhoja__tabla th, .semhoja__tabla td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.semhoja__tabla thead th { font-weight: 500; color: var(--text-3); font-size: 12px; }
.semhoja__tabla tbody th { font-weight: 600; color: var(--text-strong); }
@media (max-width: 599.98px) {
  .semhoja__claves li { grid-template-columns: 1fr; gap: 2px; }
  .semhoja__tabla thead { display: none; }
  .semhoja__tabla tr { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .semhoja__tabla th, .semhoja__tabla td { padding: 0; border: 0; }
  .semhoja__tabla tbody th, .semhoja__tabla tbody td:nth-child(2) { grid-column: 1 / -1; }
}

/* ---------- Tabla de trabajos: Nº · Cliente · Trabajo · Etapa · Estado · Responsable ---------- */
.tabla th { background: var(--bg); border-bottom: 1px solid var(--line); height: 34px; font: 500 12px/1 var(--font-ui); font-stretch: normal; letter-spacing: 0; text-transform: none; color: var(--text-3); }
.tabla td { border-bottom: 1px solid var(--line); padding: 10px 12px; }
.fila { --row-bg: transparent; }
.fila:hover { --row-bg: var(--hover); }
.fila[aria-current="true"] { --row-bg: var(--side-active); }
.fila[data-nivel="trabado"] td:first-child, .fila[data-nivel="atencion"] td:first-child { box-shadow: none; }
.fila__nro { font-weight: 600; color: var(--text-3); font-size: var(--fs-small); }
.fila:hover .fila__nro { color: var(--text-strong); }
.fila__1 { color: var(--text-strong); }
.fila__2 { color: var(--text-3); font-size: 12px; }
.c-nro { width: 68px; } .c-cli { width: 22%; } .c-pasos { width: 128px; } .c-falta { width: 21%; } .c-resp { width: 148px; }
.cli { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cli__txt { min-width: 0; display: grid; }
.cli__nombre { font-weight: 600; }
.estado { display: grid; justify-items: start; gap: 5px; min-width: 0; }
.falta--sutil { font-size: 12.5px; font-weight: 500; color: var(--accent); }
.falta--sutil:hover span { text-decoration: underline; text-underline-offset: 2px; }
.pasos--neutro .pasos__label { color: var(--text-2); font-weight: 500; }
.pasos__s { height: 4px; width: 13px; border-radius: 2px; }
.resp__nombre { font-weight: 550; }
.resp--sin .resp__nombre { color: var(--text-2); font-weight: 500; }
.emb--vacio { color: var(--text-3); }
.fila .sin-lugar { color: var(--warn); }
.tabla .tabla__grupo .grupo { margin: var(--sp-7) 0 var(--sp-1); padding: 0 0 0 2px; }
.tabla tbody:first-of-type .tabla__grupo .grupo { margin-top: var(--sp-2); }

/* ---------- Tarjetas y bloques ---------- */
.card { border: 0; box-shadow: var(--sh-card); border-radius: var(--r-lg); }
.tarjeta { border: 0; box-shadow: var(--sh-card); border-radius: var(--r-lg); padding: 14px 16px; gap: 6px; }
.tarjeta[data-nivel="trabado"], .tarjeta[data-nivel="atencion"] { box-shadow: var(--sh-card); }
.tarjeta__top { gap: 10px; }
.tarjeta__nro { color: var(--text-3); font-size: 12.5px; font-weight: 500; }
.tarjeta__top .sem { margin-inline-start: auto; }
.tarjeta__bottom .falta--sutil { margin-inline-start: auto; }
.traba { background: var(--surface); box-shadow: var(--sh-card); border-radius: var(--r-lg); padding: 14px 16px; }
.traba--trabado { background: var(--surface); box-shadow: var(--sh-card), inset 0 0 0 1px color-mix(in srgb, var(--danger-fill) 28%, transparent); }
.traba--info { background: var(--surface); box-shadow: var(--sh-card); }
.traba__nivel { font: 600 12px/1 var(--font-ui); font-stretch: normal; letter-spacing: 0; text-transform: none; }
.bloqueo { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); border-radius: 12px; }
.bloqueo--trabado { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger-fill) 35%, transparent); background: var(--danger-bg); }
.aviso { border-bottom-color: var(--line); }
.aviso__nivel { font: 600 12px/1 var(--font-ui); font-stretch: normal; letter-spacing: 0; text-transform: none; }
.persona { border: 0; box-shadow: var(--sh-card); }
.tabs__tab[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--text-strong); }
.hoja { border-radius: var(--r-xl); }
.vacio__marca { color: var(--line-strong); }
.tarea.is-hecho .tarea__n { background: var(--ok-fill); }
.panel { background: var(--surface); }
.app[data-panel="docked"] .panel { border-left-color: var(--line); }


/* ---------- Cobranza: tarjeta de cliente ---------- */
.cobra { border: 0; box-shadow: var(--sh-card); border-radius: var(--r-lg); padding: var(--sp-5); gap: 10px; }
.cobra[data-nivel="trabado"], .cobra[data-nivel="atencion"] { box-shadow: var(--sh-card); }
.cobra__head { flex-wrap: nowrap; align-items: center; gap: 12px; }
.cobra__id { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.cobra__nombres { display: grid; min-width: 0; }
.cobra__cli { font: 650 1.0625rem/1.25 var(--font-ui); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cobra__razon { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cobra__resp { flex: none; }
.cobra__resp .resp__txt { display: grid; }
.cobra__resp .resp--sin .resp__nombre { color: var(--text-2); font-weight: 500; font-size: var(--fs-small); }
.cobra__resumen { font-weight: 600; color: var(--text-strong); }
.cobra__meta, .cobra__reclamos { color: var(--text-3); }
.cobra__facturas { border-top-color: var(--line); }
.cobra__f { border-bottom-color: var(--line); }
@container main (max-width: 699.98px) { .cobra__head { flex-wrap: wrap; } .cobra__resp { width: 100%; } }

/* ---------- Trabas: aviso sin barra roja; el nivel como píldora ---------- */
.aviso { box-shadow: none; grid-template-columns: 104px minmax(0, 1fr) auto auto auto; padding: 14px 8px; }
.aviso__nivel { justify-self: start; height: 22px; padding: 0 9px 0 7px; border-radius: var(--r-pill); gap: 5px; }
.aviso--trabado .aviso__nivel { background: var(--danger-bg); }
.aviso--atencion .aviso__nivel { background: var(--warn-bg); }
.aviso--info .aviso__nivel { background: var(--bg-sunken); }
.aviso__nivel .ico { width: 13px; height: 13px; }
.aviso__quien .aviso__sin { color: var(--text-2); font-weight: 500; }
.aviso:hover { background: var(--hover); }


/* ---------- Legibilidad para el equipo (upgrade 2 · auditoría H07, H08, H09, H50, H57) ---------- */
:root { --fs-body: 1.0625rem; --fs-table: 1rem; --fs-small: .9375rem; --fs-caption: .875rem; --fs-eyebrow: .8125rem; --control-h: 40px; }
@media (max-width: 1023.98px) { :root { --fs-small: .9375rem; --fs-caption: .875rem; --control-h: 44px; } }
.navitem { height: 38px; font-size: 15px; }
.fila__2, .tarjeta__desc { font-size: var(--fs-caption); }
.fila__nro, .tarjeta__nro { font-size: var(--fs-small); }
.sem { font-size: 13.5px; height: 26px; }
.chip { font-size: 13px; height: 26px; padding: 0 10px; }
.chip--xs { font-size: 12.5px; height: 22px; }
.badge { font-size: 12.5px; min-width: 22px; height: 22px; }
.badge--danger, .campana__n { background: var(--danger); color: #FFFFFF; }
.search__kbd { display: none; }
.search:has(.search__kbd) .search__input { padding-right: 32px; }
.btn--sm { min-height: 36px; }
/* rojo solo para lo atrasado: lo que no tiene responsable va en ámbar */
.quien__chip--sin .quien__name, .persona--sin .persona__nombre, .aviso__quien .aviso__sin, .resp--sin .resp__nombre { color: var(--warn); }
.emb--vacio { color: var(--warn); }
@media (max-width: 1023.98px) {
  .quien__chip { min-height: 44px; }
  .falta, .sem-ref { min-height: 44px; display: inline-flex; align-items: center; }
}


/* ==========================================================================
   UPGRADE 3 · Azules de IMC, menú por categorías y una sola escala de títulos
   ========================================================================== */
:root {
  --brand: #1E1870; --brand-2: #2E2A9E; --brand-tint: #ECEDF8; --brand-tint-2: #F4F5FB;
  --side-bg: #F1F2F9; --side-hover: rgb(30 24 112 / .06); --side-active: #1E1870; --side-active-ink: #FFFFFF;
  --text-strong: #15133F; --accent: #2E2A9E; --accent-hover: #1E1870; --accent-soft: #ECEDF8; --sel: #1E1870;
  --titulo: #15124A;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --brand-tint: rgb(173 168 255 / .12); --brand-tint-2: rgb(173 168 255 / .06); --side-bg: #12122B; --side-hover: rgb(255 255 255 / .06);
    --side-active: #3A32B0; --side-active-ink: #FFFFFF; --text-strong: #FFFFFF; --accent: #ADA8FF; --accent-soft: rgb(173 168 255 / .14); --titulo: #FFFFFF; --sel: #D9D7FF; }
}
:root[data-theme="dark"] { --brand-tint: rgb(173 168 255 / .12); --brand-tint-2: rgb(173 168 255 / .06); --side-bg: #12122B; --side-hover: rgb(255 255 255 / .06);
  --side-active: #3A32B0; --side-active-ink: #FFFFFF; --text-strong: #FFFFFF; --accent: #ADA8FF; --accent-soft: rgb(173 168 255 / .14); --titulo: #FFFFFF; --sel: #D9D7FF; }

/* Escala única: título de pantalla · sección · bloque · cuerpo · detalle */
.t-title, .pagehead__title { font: 700 2.125rem/1.12 var(--font-display); letter-spacing: -.022em; color: var(--titulo); }
.t-h2 { font: 700 1.3125rem/1.25 var(--font-display); letter-spacing: -.014em; color: var(--text-strong); }
.t-h3 { font: 650 1.0625rem/1.3 var(--font-ui); color: var(--text-strong); }
.pagehead .meta { font-size: var(--fs-small); }
@media (max-width: 1023.98px) { .t-title, .pagehead__title { font-size: 1.875rem; } .t-h2 { font-size: 1.1875rem; } }

/* Menú lateral: cuatro bloques con identidad */
.sidebar { background: var(--side-bg); }
.sidebar__brand { padding-bottom: var(--sp-4); }
.sidebar .eyebrow--band { color: var(--brand); font-weight: 600; opacity: .7; }
.navsec { padding: 10px 0 8px; border-top: 1px solid color-mix(in srgb, var(--brand) 10%, transparent); }
.navsec:first-child { border-top: 0; padding-top: 0; }
.navgroup { display: flex; align-items: center; gap: 8px; margin: 4px 12px 6px; font: 700 12px/1.2 var(--font-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--brand); opacity: .8; }
.navgroup .ico { flex: none; }
.navitem { color: var(--text-strong); }
.navitem .ico { color: var(--brand); opacity: .75; }
.navitem[aria-current="page"] { background: var(--side-active); color: var(--side-active-ink); box-shadow: 0 2px 6px rgb(30 24 112 / .25); }
.navitem[aria-current="page"] .ico { color: var(--side-active-ink); opacity: 1; }
.navitem[aria-current="page"] .navitem__count { color: rgb(255 255 255 / .8); }
/* "Buscar clientes" va aparte, como una herramienta propia */
.navsec--comercial { margin: 8px 4px 10px; padding: 10px 6px 8px; border: 0; border-radius: 14px;
  background: linear-gradient(135deg, #1E1870 0%, #3A32B0 100%); box-shadow: 0 6px 18px rgb(30 24 112 / .22); }
.navsec--comercial .navgroup { color: #FFFFFF; opacity: .85; margin-inline: 8px; }
.navsec--comercial .navgroup .ico { color: #FFB27A; }
.navsec--comercial .navitem { color: #FFFFFF; }
.navsec--comercial .navitem .ico { color: #FFB27A; opacity: 1; }
.navsec--comercial .navitem:hover { background: rgb(255 255 255 / .10); }
.navsec--comercial .navitem[aria-current="page"] { background: rgb(255 255 255 / .18); box-shadow: none; }
.navsec--comercial + .navsec { border-top: 0; }
.sidebar__ayuda { color: var(--brand); font-weight: 600; text-decoration: none; }
.sidebar__ayuda:hover { text-decoration: underline; }

/* Botones y selección en el azul de la marca */
.pill[aria-pressed="true"], .quien__chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); }
.seg__btn[aria-checked="true"], .seg__btn:has(input:checked) { color: var(--brand); }
.btn--secondary { color: var(--brand); }
.tabs__tab[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--brand); color: var(--brand); }
.tabla th { color: color-mix(in srgb, var(--brand) 55%, var(--text-3)); }
.fila__nro { color: var(--brand); opacity: .75; }
.fila:hover .fila__nro { opacity: 1; }

/* ==========================================================================
   UPGRADE 4 · Tema institucional (estilo Casa Blanca / Navy)
   DECISIÓN: capa encima de las anteriores (se puede sacar entera). Vuelve la banda índigo de IMC (los colores
   de antes) y suma la impronta institucional: títulos en serif (Instrument Serif), cuerpo en Instrument Sans,
   rótulos en mayúsculas espaciadas (Archivo expandida), esquinas rectas, cifras grandes con filete naranja.
   Sin sellos, escudos ni marcas oficiales de nadie: la marca es la de IMC (logo, índigo y naranja del sitio).
   ========================================================================== */
:root {
  --font-ui: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, Arial, sans-serif;
  --font-display: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-caps: "Archivo", "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --band: #0F0D3A; --band-solid: #0F0D3A; --band-gradient: linear-gradient(180deg, #0F0D3A 0, #14114D 100%);
  --hero-gradient: linear-gradient(180deg, #0F0D3A 0, #17145C 100%);
  --on-band: #FFFFFF; --on-band-2: #C9CBE2; --band-line: rgb(255 255 255 / .12); --band-hover: rgb(255 255 255 / .07); --band-active: rgb(255 255 255 / .12);
  --oro: #6B6753; --oro-band: #CCC7AB;              /* el "caqui" de los rótulos: oscuro sobre blanco, claro sobre la banda */
  --tile-bg: #0F0D3A; --tile-hover: #1A1760; --card-top: #0F0D3A;
  --brand: #0F0D3A; --brand-2: #1E1870; --brand-tint: #EEEEF4; --brand-tint-2: #F6F6F9;
  --titulo: #0F0D3A; --text: #293340; --text-strong: #0F0D3A; --text-2: #4C5465; --text-3: #5E6575;
  --bg: #FFFFFF; --bg-sunken: #F2F2F5; --surface: #FFFFFF; --surface-2: #F7F7F9;
  --line: #E3E4E9; --line-strong: #CDCFD7; --rule: #B9BCC7;
  --accent: #1E1870; --accent-hover: #0F0D3A; --accent-soft: #EEEEF6; --sel: #0F0D3A; --focus: #1E1870; --seg-done: #0F0D3A;
  --side-bg: var(--band); --side-hover: var(--band-hover); --side-active: var(--band-active); --side-active-ink: #FFFFFF;
  --r-sm: 3px; --r-md: 4px; --r-lg: 6px; --r-xl: 8px;
  --sh-1: 0 0 0 1px var(--line);
  --sh-card: 0 0 0 1px var(--line), 0 1px 2px rgb(15 13 58 / .04);
  --material: rgb(255 255 255 / .94);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --band: #08071F; --band-solid: #08071F; --band-gradient: linear-gradient(180deg, #08071F 0, #0E0C34 100%); --hero-gradient: linear-gradient(180deg, #08071F 0, #120F45 100%);
    --tile-bg: #191C47; --tile-hover: #22265A; --card-top: #4A43C8;
    --bg: #0A0B1A; --bg-sunken: #12142B; --surface: #111329; --surface-2: #161937; --surface-raised: #1A1D3B;
    --text: #E4E6F0; --text-strong: #FFFFFF; --text-2: #A9ADC6; --text-3: #9195B0; --titulo: #FFFFFF; --oro: #C9C4A8;
    --line: rgb(255 255 255 / .09); --line-strong: rgb(255 255 255 / .17); --rule: rgb(255 255 255 / .26);
    --accent: #B9B5FF; --accent-hover: #D9D7FF; --accent-soft: rgb(185 181 255 / .14); --sel: #D9D7FF; --focus: #B9B5FF; --seg-done: #D9D7FF;
    --brand: #D9D7FF; --brand-tint: rgb(255 255 255 / .06); --brand-tint-2: rgb(255 255 255 / .03);
    --material: rgb(10 11 26 / .9);
  }
}
:root[data-theme="dark"] {
  --band: #08071F; --band-solid: #08071F; --band-gradient: linear-gradient(180deg, #08071F 0, #0E0C34 100%); --hero-gradient: linear-gradient(180deg, #08071F 0, #120F45 100%);
  --tile-bg: #191C47; --tile-hover: #22265A; --card-top: #4A43C8;
  --bg: #0A0B1A; --bg-sunken: #12142B; --surface: #111329; --surface-2: #161937; --surface-raised: #1A1D3B;
  --text: #E4E6F0; --text-strong: #FFFFFF; --text-2: #A9ADC6; --text-3: #9195B0; --titulo: #FFFFFF; --oro: #C9C4A8;
  --line: rgb(255 255 255 / .09); --line-strong: rgb(255 255 255 / .17); --rule: rgb(255 255 255 / .26);
  --accent: #B9B5FF; --accent-hover: #D9D7FF; --accent-soft: rgb(185 181 255 / .14); --sel: #D9D7FF; --focus: #B9B5FF; --seg-done: #D9D7FF;
  --brand: #D9D7FF; --brand-tint: rgb(255 255 255 / .06); --brand-tint-2: rgb(255 255 255 / .03);
  --material: rgb(10 11 26 / .9);
}

/* Tipografía: serif para títulos, mayúsculas espaciadas para rótulos */
body { font-family: var(--font-ui); }
.t-display { font-weight: 400; letter-spacing: .01em; }
.t-title, .pagehead__title { font: 400 2.75rem/1.05 var(--font-display); letter-spacing: .006em; color: var(--titulo); }
.t-h2 { font: 400 1.75rem/1.15 var(--font-display); letter-spacing: .008em; color: var(--text-strong); }
.t-h3 { font: 600 1.0625rem/1.3 var(--font-ui); color: var(--text-strong); }
@media (max-width: 1023.98px) { .t-title, .pagehead__title { font-size: 2.25rem; } .t-h2 { font-size: 1.5rem; } }
@media (max-width: 599.98px) { .t-title, .pagehead__title { font-size: 1.875rem; } }
.eyebrow { font: 600 11px/1.35 var(--font-caps); font-stretch: 125%; letter-spacing: .18em; text-transform: uppercase; color: var(--oro); }
.grupo { margin: var(--sp-7) 0 var(--sp-3); padding-bottom: 8px; border-bottom: 1px solid var(--line-strong); }
.grupo .eyebrow { font: 600 12px/1.3 var(--font-caps); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.grupo .eyebrow .num { color: var(--oro); font-weight: 600; }
.tabla th { font: 600 11px/1.2 var(--font-ui); font-stretch: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }

/* Riel lateral: la banda índigo de IMC */
.sidebar { background: var(--band) var(--band-gradient); color: var(--on-band); border-right: 0; --focus: #FFFFFF; }
.app .sidebar .marca--clara, .app .masthead .marca--clara { display: none; }
.app .sidebar .marca--oscura, .app .masthead .marca--oscura { display: block; }
.sidebar__thread { display: block; width: 28px; height: 2px; border-radius: 0; }
.sidebar .eyebrow--band { font: 600 10px/1.2 var(--font-caps); font-stretch: 125%; letter-spacing: .24em; text-transform: uppercase; color: var(--oro-band); opacity: 1; }
.navsec { padding: 12px 0 10px; border-top: 1px solid var(--band-line); }
.navsec:first-child { border-top: 0; padding-top: 0; }
.navgroup { margin: 8px 12px 10px; font: 600 14px/1.15 var(--font-caps); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; color: #E9E6D6; opacity: 1; white-space: nowrap; }
.navgroup .ico { width: 18px; height: 18px; }
.navgroup .ico { color: var(--oro-band); flex: none; }
.navitem { height: 36px; border-radius: 3px; color: rgb(255 255 255 / .9); font: 500 14.5px/1 var(--font-ui); letter-spacing: .01em; }
.navitem .ico { color: var(--on-band-2); opacity: 1; }
.navitem:hover { background: var(--band-hover); }
.navitem[aria-current="page"] { background: var(--band-active); color: #FFFFFF; font-weight: 600; box-shadow: none; }
.navitem[aria-current="page"] .ico { color: #FFFFFF; }
.navitem[aria-current="page"]::before { display: block; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 0; background: var(--imc-orange); }
.navitem__count, .navitem[aria-current="page"] .navitem__count { color: var(--on-band-2); }
.navsec--comercial { margin: 10px 0; padding: 12px 4px 8px; background: rgb(255 255 255 / .045); border: 1px solid rgb(255 255 255 / .12); border-top: 2px solid var(--imc-orange); border-radius: 3px; box-shadow: none; }
.navsec--comercial .navgroup { margin: 2px 8px 10px; color: #FFB27A; }
.navsec--comercial .navgroup .ico { width: 18px; height: 18px; }
.navsec--comercial .navitem { font-weight: 600; font-size: 15px; }
.navsec--comercial .navgroup .ico, .navsec--comercial .navitem .ico { color: #FFB27A; }
.navsec--comercial .navitem[aria-current="page"] { background: rgb(255 255 255 / .12); }
.sidebar__foot { border-top-color: var(--band-line); }
.yo { color: var(--on-band); } .yo:hover { background: var(--band-hover); }
.yo__role, .sidebar__data { color: var(--on-band-2); }
.yo__sin { box-shadow: inset 0 0 0 1.5px var(--on-band-2); color: var(--on-band-2); }
.sidebar__ayuda { color: #FFFFFF; }
.sidebar .emb, .masthead .emb { --row-bg: var(--band); }

/* Celular: la cabecera también es la banda, con el filete naranja de IMC */
.masthead { background: var(--band) var(--band-gradient); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 2px solid var(--imc-orange); --focus: #FFFFFF; }
.masthead .iconbtn { color: #FFFFFF; }
.masthead__logo img { height: 19px; }

/* Escritorio: la barra de arriba sigue la banda; el buscador es una caja clara y recta */
@media (min-width: 1024px) {
  .toolbar { background: var(--band-solid); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 0; }
  .toolbar.is-scrolled { border-bottom: 0; box-shadow: 0 2px 0 var(--imc-orange); }
  .toolbar > .iconbtn { color: #FFFFFF; --focus: #FFFFFF; }
  .toolbar > .iconbtn:hover { background: var(--band-hover); }
  .toolbar__title { font: 400 1.375rem/1 var(--font-display); letter-spacing: .01em; color: #FFFFFF; }
  .toolbar .search__input { background: #E7E8EF; color: #1C1B33; border-radius: 2px; }
  .toolbar .search__input:focus { background: #FFFFFF; box-shadow: 0 0 0 2px var(--imc-orange); }
  .toolbar .search__input::placeholder { color: #5E6575; }
  .toolbar .search__icon, .toolbar .search__kbd, .toolbar .search__clear { color: #4C5465; }
  .toolbar .search__kbd { box-shadow: inset 0 0 0 1px #C3C5CF; }
}

/* Cabecera de cada pantalla: franja índigo a todo el ancho, título en serif blanco (como un "hero" institucional) */
.main { overflow-x: clip; }
.pagehead, .v-inicio .v-inicio__hola { position: relative; isolation: isolate; margin-bottom: var(--sp-6); padding: var(--sp-7) 0 var(--sp-7); color: #FFFFFF;
  --text: #F1F2F8; --text-strong: #FFFFFF; --text-2: #DFE0EE; --text-3: #CACCE0; --titulo: #FFFFFF; --oro: var(--oro-band);
  --line: rgb(255 255 255 / .16); --line-strong: rgb(255 255 255 / .3); --rule: rgb(255 255 255 / .32);
  --surface: rgb(255 255 255 / .07); --surface-2: rgb(255 255 255 / .11); --bg-sunken: rgb(255 255 255 / .08); --hover: rgb(255 255 255 / .08);
  --accent: #FFFFFF; --brand: #FFFFFF; --focus: #FFFFFF; --seg-todo: rgb(255 255 255 / .25); }
.pagehead::before, .v-inicio .v-inicio__hola::before { content: ""; position: absolute; z-index: -1; inset: 0 -100vmax; background: var(--band-solid) var(--hero-gradient); }
.pagehead::after, .v-inicio .v-inicio__hola::after { content: ""; position: absolute; left: 0; bottom: 0; width: 48px; height: 3px; background: var(--imc-orange); }
.pagehead .eyebrow__star { display: inline-block; color: var(--imc-orange); }
.pagehead .btn--secondary { background: transparent; color: #FFFFFF; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .5); }
.pagehead .btn--secondary:hover { background: rgb(255 255 255 / .09); }
.pagehead .btn--tertiary { color: #FFFFFF; }
.v-inicio .v-inicio__fecha { font: 600 11px/1.35 var(--font-caps); font-stretch: 125%; letter-spacing: .18em; text-transform: uppercase; color: var(--oro-band); }
@media (max-width: 1023.98px) { .pagehead, .v-inicio .v-inicio__hola { padding: var(--sp-5) 0 var(--sp-6); margin-bottom: var(--sp-5); } }
@media (max-width: 599.98px) { .pagehead, .v-inicio .v-inicio__hola { padding: var(--sp-4) 0 var(--sp-5); } }

/* Controles: rectos y sobrios; la selección es un bloque índigo (como las pestañas institucionales) */
.btn { border-radius: 3px; font-weight: 600; letter-spacing: .01em; }
.btn--primary { box-shadow: none; }
.seg { border-radius: 4px; }
.seg__btn { border-radius: 3px; }
.seg__btn[aria-checked="true"], .seg__btn:has(input:checked) { background: var(--sel); color: #FFFFFF; box-shadow: none; }
.seg__btn[aria-checked="true"] .seg__n, .seg__btn:has(input:checked) .seg__n { color: rgb(255 255 255 / .75); }
.pill[aria-pressed="true"], .quien__chip[aria-pressed="true"] { background: var(--sel); border-color: var(--sel); color: #FFFFFF; }
.tabs__tab[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--imc-orange); color: var(--text-strong); }
.fila__nro { color: var(--text-strong); opacity: .8; }
.searchpop { --focus: var(--accent); border-radius: 4px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .seg__btn[aria-checked="true"], :root:not([data-theme="light"]) .seg__btn:has(input:checked),
  :root:not([data-theme="light"]) .pill[aria-pressed="true"], :root:not([data-theme="light"]) .quien__chip[aria-pressed="true"] { background: #2E2A9E; border-color: #2E2A9E; }
}
:root[data-theme="dark"] .seg__btn[aria-checked="true"], :root[data-theme="dark"] .seg__btn:has(input:checked),
:root[data-theme="dark"] .pill[aria-pressed="true"], :root[data-theme="dark"] .quien__chip[aria-pressed="true"] { background: #2E2A9E; border-color: #2E2A9E; }

/* Avisos de la franja: fondo sólido (en modo noche el tinte era transparente y el contenido se veía por debajo al bajar) */
.franja.franja--atencion { background-color: color-mix(in srgb, var(--warn-fill) 14%, var(--bg)); }
.franja.franja--error { background-color: color-mix(in srgb, var(--danger-fill) 14%, var(--bg)); }
/* En el celular la línea de datos de la cabecera va uno debajo del otro, sin el separador colgando al principio */
@media (max-width: 599.98px) { .pagehead .meta { flex-direction: column; gap: 2px; } .pagehead .meta > li + li { border: 0; margin-inline-start: 0; padding-inline-start: 0; } }
/* Repaso de diseño (21/10/26): lo urgente se ve más grande que los títulos de listado; botones con la misma forma en todos los tamaños */
#panel .v-ficha .t-h2 { font-size: 1.375rem; }
#panel .v-ficha__sigue .traba__t { font: 400 1.625rem/1.15 var(--font-display); letter-spacing: .005em; }
@media (max-width: 1023.98px) { #panel .v-ficha__sigue .traba__t { font-size: 1.375rem; } .btn--primary.btn--lg, .btn--lg { border-radius: 3px; } }
@media (min-width: 1024px) {
  .toolbar .btn--secondary { background: transparent; color: #FFFFFF; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .55); }
  .toolbar .btn--secondary:hover { background: rgb(255 255 255 / .09); }
}

/* Botón de modo día / noche (core.js: IMC.tema). En la barra va como ícono; en el ingreso, con la palabra */
.tema--texto { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 3px;
  font: 600 14px/1 var(--font-ui); color: #FFFFFF; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .55); cursor: pointer; --focus: #FFFFFF; }
.tema--texto:hover { background: rgb(255 255 255 / .1); }
.tema--texto .ico { color: #FFB27A; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* Repaso 21/10/26: el globo de «Facturas por cobrar» dice qué cuenta («11 · +60 d»): el nombre pasa a dos renglones */
.navitem.navitem--et { height: auto; min-height: 38px; padding-block: 5px; }
.navitem--et .navitem__label { white-space: normal; line-height: 1.2; }
.navitem--et .badge, .navitem--et .navitem__count { flex: none; white-space: nowrap; }
/* el aviso (toast) que se mueve adentro de una hoja se ubica contra la pantalla, no contra la hoja (ver «dialog .toasts») */
.hoja[open] { translate: none; }

/* Ficha: «Ver en grande» / «Achicar» (core.js, botonAncho; 21/10/26). En escritorio la ficha pasa a casi todo el ancho,
   encima de la lista con el velo; el contenido queda centrado (hasta 1080 px) para que los renglones no se estiren. */
.panel__ancho { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 36px; padding: 0 12px 0 10px; border-radius: 3px;
  font: 600 var(--fs-small)/1 var(--font-ui); color: var(--text-strong); box-shadow: inset 0 0 0 1px var(--line-strong); cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-1) var(--ease); }
.panel__ancho:hover { background: var(--hover); }
.panel__ancho .ico { color: var(--accent); flex: none; }
/* el velo va DEBAJO del panel (antes, de 1024 a 1279 px, lo tapaba: la ficha se veía oscurecida y no se podía tocar) */
.app[data-panel="overlay"] .panel { z-index: calc(var(--z-scrim) + 1); }
@media (min-width: 1024px) {
  .app[data-panel-ancho="grande"][data-panel="docked"] { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); grid-template-areas: "side mast" "side franja" "side main"; }
  .app[data-panel-ancho="grande"][data-panel] .panel { position: fixed; inset: 0 0 0 auto; width: min(calc(100vw - var(--sidebar-w) - 72px), 1320px); height: auto; max-width: 100vw;
    z-index: calc(var(--z-scrim) + 1); border-left: 0; box-shadow: var(--sh-sheet); animation: panel-in var(--dur-3) var(--ease-out) both; }
  .app[data-panel-ancho="grande"] .panel :is(.panel__bar, .panel__body, .panel__foot) { padding-inline: max(40px, calc((100% - 1080px) / 2)); }
}
@media (prefers-reduced-motion: reduce) { .app[data-panel-ancho="grande"] .panel { animation-name: fundido; } }

/* Barra de arriba angosta (revisión 21/10/26): con la ficha al costado la lista queda de 430 a 590 px y la barra se
   aplastaba (el botón día / noche quedaba de 10 px y el buscador en «Busc»). Por debajo de 520 px de contenido el
   buscador pasa a ser el botón de la lupa, que abre el buscador universal (Ctrl/⌘ K), y los botones no se encogen. */
.toolbar__buscar { display: none; }
.toolbar > .iconbtn { flex: none; min-width: 40px; }
.toolbar > .toolbar__primaria .btn { flex: none; }
@container main (max-width: 520px) {
  .toolbar > .search { display: none; }
  .toolbar > .toolbar__buscar { display: inline-grid; }
}
/* Subtítulo de la cabecera («32 trabajos abiertos | 44 esperando el cobro»): el separador es el borde izquierdo de cada
   dato; la lista se corre a la izquierda lo mismo que ocupa el separador y lo recorta, así el primero de cada renglón
   nunca arranca con la rayita colgando (antes, al partirse en dos renglones, la segunda línea empezaba con «|»). */
.pagehead .meta { column-gap: var(--sp-3); margin-inline-start: calc(-1 * var(--sp-3) - 1px); clip-path: inset(-4px -4px -4px calc(var(--sp-3) + 1px)); }
.pagehead .meta > li, .pagehead .meta > li + li { margin-inline-start: 0; padding-inline-start: var(--sp-3); border-inline-start: 1px solid var(--line-strong); }
@media (max-width: 599.98px) {
  .pagehead .meta { flex-direction: row; row-gap: 2px; }
  .pagehead .meta > li, .pagehead .meta > li + li { margin-inline-start: 0; padding-inline-start: var(--sp-3); border-inline-start: 1px solid var(--line-strong); }
}
/* El aviso de la fecha del Excel (core.js, franja--datos): en el celular, un renglón que se despliega al tocarlo, y no
   queda fijo arriba mientras se recorre la lista */
.franja__plegada { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; cursor: pointer; font: 500 12.5px/1.3 var(--font-ui); color: var(--warn); }
.franja__plegada .franja__pt { font-weight: 600; }
.franja__plegada .franja__que { text-decoration: underline; text-underline-offset: 3px; }
.franja__plegada .ico { flex: none; margin-inline-start: auto; }
@media (max-width: 1023.98px) { .franja.franja--datos { position: static; } .franja__plegada { min-height: 44px; } }
/* modo noche: el globo rojo (Cobranza en la barra de abajo, campanita) es rojo claro: la cifra va oscura (blanco daba 2,5:1) */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.badge--danger, .campana__n) { color: #1A0505; } }
:root[data-theme="dark"] :is(.badge--danger, .campana__n) { color: #1A0505; }

/* ==========================================================================
   V17 · Armazón (SPEC_v17 §3): Inicio arriba, grupos en serif, Ayuda al pie, barra de abajo con «+ Nuevo»
   ========================================================================== */
/* Letra de la columna del Excel al lado del nombre (IMC.campos.rotulo): chica y gris; no va en el celular ni en el modo Pedido */
.letra-col { display: inline-block; margin-inline-start: .35em; font: 500 .72em/1 var(--font-ui); letter-spacing: .04em; color: var(--text-3); vertical-align: .08em; white-space: nowrap; }
@media (max-width: 599.98px) { .letra-col { display: none; } }
:is(.is-pedido, [data-modo="pedido"]) .letra-col { display: none; }
/* Riel: Inicio solo arriba, los títulos de grupo grandes en Instrument Serif y sin ícono, Ayuda al pie con una raya */
.navlist--arriba { margin: 4px 0 6px; }
.navlist--arriba .navitem, .navlist--pie .navitem { font-weight: 600; }
.navsec { padding: 8px 0 6px; }
.navsec .navgroup { display: block; margin: 2px 12px 4px; font: 400 22px/1.1 var(--font-display); font-stretch: normal; letter-spacing: .01em; text-transform: none; color: #F1EFE4; white-space: nowrap; }
.navsec--comercial .navgroup { color: #FFC59B; }
.navlist--pie { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--band-line); }
.navsec--comercial { margin: 6px 0; padding: 8px 4px 6px; }
/* «Facturar y cobrar · 11 con más de 60 días» (solo admin): la frase en rojo, en un segundo renglón debajo del nombre */
.navitem__label .navitem__sub { display: block; margin-top: 4px; }
.navitem__sub .badge { display: inline-block; font-size: 11.5px; line-height: 1.35; padding: 1px 7px; white-space: nowrap; }
/* Barra de abajo (celular): cinco botones; el del centro es «+ Nuevo», naranja */
.tabbar { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-flow: row; }
.tab.tab--nuevo { color: var(--text-strong); }
.tab--nuevo .tab__mas { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--imc-orange); color: #FFFFFF; box-shadow: 0 2px 8px rgb(232 98 10 / .35); }
.tab--nuevo .tab__mas svg, .tab.tab--nuevo[aria-current="page"] svg { color: #FFFFFF; }
.tab.tab--nuevo[aria-current="page"] { background: transparent; }
/* «Facturar y cobrar» no entra en un renglón a 390 px: los nombres de la barra pueden ir en dos */
.tabbar .tab > span:not(.badge):not(.tab__mas) { white-space: normal; text-align: center; line-height: 1.1; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ==========================================================================
   V20 · Avisos (campanita), recordatorios, póliza y tipo de cambio (núcleo)
   La campanita va en la barra de arriba (escritorio) y arriba a la derecha (celular). El número cuenta las no leídas:
   rojo si alguna es urgente o de hoy; si no, gris oscuro (blanco sobre la banda del celular).
   ========================================================================== */
.toolbar__campana { display: contents; }
.campana { position: relative; flex: none; }
.campana__n { position: absolute; top: 1px; right: -1px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 999px;
  display: grid; place-items: center; font: 700 11px/1 var(--font-ui); letter-spacing: 0; pointer-events: none; box-shadow: 0 0 0 2px var(--surface); }
.campana .campana__n:not(.campana__n--fuerte) { background: var(--text-2); color: var(--surface); }
.masthead .campana .campana__n { box-shadow: 0 0 0 2px var(--band); }
.masthead .campana .campana__n:not(.campana__n--fuerte) { background: #FFFFFF; color: var(--imc-ink); }
/* escritorio: la barra de arriba es la banda índigo (UPGRADE 4): campanita blanca, como el botón de modo día / noche */
.toolbar .campana { color: #FFFFFF; --focus: #FFFFFF; min-width: 40px; }
.toolbar .campana:hover { background: var(--band-hover); color: #FFFFFF; }
.toolbar .campana[aria-expanded="true"] { background: var(--band-active); color: #FFFFFF; }
.toolbar .campana .campana__n { box-shadow: 0 0 0 2px var(--band-solid, var(--band)); }
.toolbar .campana .campana__n:not(.campana__n--fuerte) { background: #FFFFFF; color: var(--imc-ink); }
@media (max-width: 1023.98px) { .campana__n { top: 4px; right: 3px; } }

/* Panel de avisos: al lado de la campanita (escritorio) o en una hoja (celular) */
.avisos--pop { position: fixed; z-index: var(--z-sheet); display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box;
  background: var(--surface-raised); color: var(--text); border-top: 3px solid var(--imc-orange); border-radius: var(--r-lg); box-shadow: var(--sh-pop); }
.avisos__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding: 14px 16px 10px; border-bottom: 1px solid var(--line); }
.avisos__t { margin: 0; font: 400 26px/1.1 var(--font-display); color: var(--titulo, var(--text-strong)); outline-offset: 4px; }
/* el foco va al título al abrir (lectores de pantalla); un título no es un control: sin anillo */
.avisos__t:focus { outline: none; }
.avisos__n { font: 600 var(--fs-eyebrow)/1 var(--font-caps); font-stretch: 125%; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-3); }
.avisos__leer { margin-left: auto; }
.avisos__lista { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.avisos--pop .avisos__lista { padding: 2px 8px; }
.avisos__pie { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 16px 12px; border-top: 1px solid var(--line); }
.avisos--hoja .avisos__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }   /* la hoja ya tiene título */
.avisos--hoja .avisos__head { padding: 0 0 10px; }
.avisos--hoja .avisos__pie { padding: 12px 0 0; }

.notifs { list-style: none; margin: 0; padding: 0; }
.notif { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.notif:last-child { border-bottom: 0; }
.notif__main { display: grid; justify-items: start; gap: 4px; min-width: 0; padding: 2px 4px; border-radius: var(--r-md); color: inherit; text-decoration: none; }
.notif__main:hover .notif__t { text-decoration: underline; text-underline-offset: 2px; }
.notif__cuando { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: var(--r-pill);
  font: 600 11px/1.15 var(--font-caps); font-stretch: 125%; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.notif--urgente .notif__cuando { color: var(--danger); background: var(--danger-bg); }
.notif--hoy .notif__cuando { color: var(--warn); background: var(--warn-bg); }
.notif--pronto .notif__cuando { color: var(--info); background: var(--info-bg); }
.notif__punto { flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.notif__t { font: 600 var(--fs-body)/1.3 var(--font-ui); color: var(--text-strong); overflow-wrap: anywhere; }
.notif__d { font: 400 var(--fs-small)/1.35 var(--font-ui); color: var(--text-2); overflow-wrap: anywhere; }
.notif.is-leida .notif__t { font-weight: 500; color: var(--text); }
.notif.is-leida .notif__cuando { background: transparent; padding-inline: 0; }
.notif__btn { white-space: nowrap; }
@media (max-width: 599.98px) { .notif { grid-template-columns: minmax(0, 1fr); } .notif__btn { justify-self: start; margin-left: 4px; } }
.notifs__vacio { display: flex; align-items: center; gap: 8px; margin: 0; padding: 18px 8px; font: 500 var(--fs-body)/1.3 var(--font-ui); color: var(--ok); }

/* Mail de la póliza (hoja): el papel es blanco en los dos modos, como se ve el mail */
.polmail { display: grid; gap: 12px; }
.polmail__aviso { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 12px; border-left: 3px solid var(--imc-orange); background: var(--bg-sunken);
  font: 500 var(--fs-small)/1.35 var(--font-ui); color: var(--text-strong); }
.polmail__cab { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: var(--fs-small); }
.polmail__cab dt { font-weight: 600; color: var(--text-2); }
.polmail__cab dd { margin: 0; color: var(--text-strong); overflow-wrap: anywhere; }
.polmail__papel { padding: 16px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: #FFFFFF; color: #1C1B33; overflow-x: auto; }
.polmail__acc { display: flex; flex-wrap: wrap; gap: 8px; }
.polmail__acc .btn .ico { margin-inline-end: 6px; }
.polmail__copiar { margin-inline-start: 6px; }

/* Recordatorio nuevo: fecha y hora lado a lado */
.rec__fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 419.98px) { .rec__fila { grid-template-columns: minmax(0, 1fr); } }

/* Tipo de cambio del día (IMC.tc.html): rótulo, valor grande en serif, de cuándo y «Cargar el de hoy» */
.tcbox { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; padding: 8px 14px; border: 1px solid var(--line-strong); border-left: 3px solid var(--imc-orange);
  border-radius: var(--r-md); background: var(--surface); box-sizing: border-box; max-width: 100%; }
.tcbox__rot { font: 600 var(--fs-eyebrow)/1.2 var(--font-caps); font-stretch: 125%; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-2); }
.tcbox__v { font: 400 28px/1 var(--font-display); color: var(--text-strong); }
.tcbox__f { font: 500 var(--fs-small)/1.2 var(--font-ui); color: var(--text-2); }
.tcbox--viejo .tcbox__f { color: var(--warn); }

/* ==========================================================================
   Foco global (2.2): SIEMPRE AL FINAL
   ========================================================================== */
/* SIEMPRE AL FINAL DE styles.css: gana a cualquier `all: unset` de los componentes (misma especificidad, más tarde) */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 1023.98px) {
  .btn--sm, .seg__btn, .pill, .tabs__tab, .toast__btn, .search__clear, .iconbtn { min-height: 44px; }
  .toast__btn, .search__clear, .iconbtn { min-width: 44px; }
}

/* "Hay N" en los contadores de pasos (Trabajos e Inicio) */
.v-hay { font: 500 0.8125rem/1 var(--font-sans, inherit); color: var(--text-2, inherit); margin-inline-end: .3em; letter-spacing: 0; text-transform: none; align-self: baseline; }
.v-tr2__b.is-todos .v-hay { color: inherit; opacity: .9; }