/* Estilos de ODIN. Un solo sistema: tokens de marca → base → encabezado → layout → componentes → módulos → celular. */
/* Paleta (concepto de marca, nov 2026): azul marino profundo #101D31 como base dominante, blanco para la interfaz,
   gris acero #657687 para lo secundario y dorado antiguo #B08D57 como acento selectivo (pestaña activa, acción principal,
   foco, el ojo del logotipo). Las unidades de negocio conservan su color propio solo en su punto y su nombre. */

/* ---------- 1. Tokens ---------- */
:root {
  /* Marca */
  --navy: #101d31;
  --navy-2: #182a44;
  --steel: #657687;
  --gold: #b08d57;
  --gold-ink: #8a6a39;      /* dorado legible como texto sobre blanco */
  --white: #ffffff;

  /* Superficies y texto (tema claro) */
  --bg: #f4f6f9;
  --surface: #ffffff;
  --sunk: #eef2f6;
  --line: #e1e7ee;
  --line-2: #c9d3de;
  --fg: #101d31;
  --fg-2: #33445a;
  --muted: #657687;

  /* Acento e interacción */
  --accent: var(--gold-ink);
  --accent-ink: #ffffff;
  --accent-soft: #f5efe3;
  --ring: rgb(176 141 87 / .35);
  --btn: var(--navy);
  --btn-hover: #1c3252;
  --btn-ink: #ffffff;
  --selected: var(--navy);     /* chip / sección elegida */
  --selected-ink: #ffffff;

  /* Semánticos */
  --ingreso: #2b4c74;
  --gasto: #b08d57;
  --good: #0f7a55;
  --good-bg: #e3f3eb;
  --warn: #9a6400;
  --warn-bg: #fbf1da;
  --bad: #c42846;
  --bad-bg: #fbe7eb;

  /* Forma */
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --shadow: 0 1px 2px rgb(16 29 49 / .04), 0 6px 16px -10px rgb(16 29 49 / .12);
  --shadow-hi: 0 2px 6px rgb(16 29 49 / .08), 0 24px 48px -20px rgb(16 29 49 / .35);
  --radius: var(--r-lg);

  /* Unidades de negocio */
  --b-arcamexi: #0063f9;
  --b-lemon: #e5ad2e;
  --b-drfix: #f25c00;
  --b-coldfire: #d64390;
  --b-eleazar: #313638;
  --b-hunab: #075543;

  /* Toda la app en Josefin Sans (la del logotipo). Sus minúsculas son bajas: font-size-adjust la agranda para que se lea cómoda. */
  --f-display: "Josefin Sans", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Josefin Sans", "Helvetica Neue", Arial, sans-serif;
  --f-data: "Josefin Sans", "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1424; --surface: #121f33; --sunk: #182840; --line: #233853; --line-2: #31496a;
    --fg: #eef1f5; --fg-2: #c4cedb; --muted: #94a4b6;
    --accent: #d2ad73; --accent-ink: #101d31; --accent-soft: #2a2416; --ring: rgb(210 173 115 / .4);
    --btn: #c9a265; --btn-hover: #d8b47a; --btn-ink: #101d31;
    --selected: #d2ad73; --selected-ink: #101d31;
    --ingreso: #8fb0d8; --gasto: #d6b47e;
    --good: #4fd1a1; --good-bg: #0f2d27; --warn: #f0bd4a; --warn-bg: #332a10; --bad: #ff6f8a; --bad-bg: #3a1524;
    --b-arcamexi: #4b8dff; --b-lemon: #f4bc43; --b-drfix: #ff8a3d; --b-coldfire: #e35fa6; --b-eleazar: #b8bfd6; --b-hunab: #3fb48e;
    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 10px 24px -14px rgb(0 0 0 / .6);
    --shadow-hi: 0 2px 6px rgb(0 0 0 / .4), 0 24px 48px -16px rgb(0 0 0 / .7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0b1424; --surface: #121f33; --sunk: #182840; --line: #233853; --line-2: #31496a;
  --fg: #eef1f5; --fg-2: #c4cedb; --muted: #94a4b6;
  --accent: #d2ad73; --accent-ink: #101d31; --accent-soft: #2a2416; --ring: rgb(210 173 115 / .4);
  --btn: #c9a265; --btn-hover: #d8b47a; --btn-ink: #101d31;
  --selected: #d2ad73; --selected-ink: #101d31;
  --ingreso: #8fb0d8; --gasto: #d6b47e;
  --good: #4fd1a1; --good-bg: #0f2d27; --warn: #f0bd4a; --warn-bg: #332a10; --bad: #ff6f8a; --bad-bg: #3a1524;
  --b-arcamexi: #4b8dff; --b-lemon: #f4bc43; --b-drfix: #ff8a3d; --b-coldfire: #e35fa6; --b-eleazar: #b8bfd6; --b-hunab: #3fb48e;
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 10px 24px -14px rgb(0 0 0 / .6);
  --shadow-hi: 0 2px 6px rgb(0 0 0 / .4), 0 24px 48px -16px rgb(0 0 0 / .7);
  color-scheme: dark;
}

/* ---------- 2. Base ---------- */
* { box-sizing: border-box; }
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--f-body); font-size: 15px; line-height: 1.5; font-size-adjust: 0.44; -webkit-font-smoothing: antialiased; }
table { font-size-adjust: 0.41; } /* tablas un poco más compactas: Josefin es ancha */
img { max-width: 100%; }
[hidden] { display: none !important; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--navy); }
html, body { overscroll-behavior-y: contain; } /* deslizar hacia abajo para actualizar lo hace la app */
.wrap { max-width: 1180px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.num, td.m, .kpi-val { font-family: var(--f-data); font-variant-numeric: tabular-nums; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h2 { font-family: var(--f-display); font-weight: 600; font-size: 17px; margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
.label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.muted { color: var(--muted); }
.status { font-size: 13px; color: var(--muted); }
.neg { color: var(--bad); }

/* Deslizar para actualizar y pantalla de carga: el isotipo de Odin.app, la O modular de dos piezas con el punto oro centrado.
   Las piezas se separan y se juntan; el punto no se mueve del centro (60,60), solo respira. */
.ptr { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 8px); z-index: 30; display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-hi); font-size: 13px; font-weight: 600; color: var(--fg);
  transform: translate(-50%, -70px); opacity: 0; pointer-events: none; }
.ptr.anim { transition: transform .2s ease, opacity .2s ease; }
.ptr .iso-odin { width: 20px; height: 20px; color: var(--fg); flex: none; }
/* Al jalar, --abre baja de 1 a 0: las piezas, abiertas en diagonal, se juntan justo al llegar al umbral (ver interfaz.js). */
.iso-odin { display: block; overflow: visible; }
.iso-odin .pieza-a { translate: calc(var(--abre, 0) * -8px) calc(var(--abre, 0) * -8px); }
.iso-odin .pieza-b { translate: calc(var(--abre, 0) * 8px) calc(var(--abre, 0) * 8px); }
.iso-odin .punto { transform-box: fill-box; transform-origin: center; }
.iso-odin.vivo .pieza-a, .ptr.cargando .iso-odin .pieza-a { animation: abrir-a 2.6s ease-in-out infinite; }
.iso-odin.vivo .pieza-b, .ptr.cargando .iso-odin .pieza-b { animation: abrir-b 2.6s ease-in-out infinite; }
.iso-odin.vivo .punto, .ptr.cargando .iso-odin .punto { animation: latir 2.6s ease-in-out infinite; }
@keyframes abrir-a { 50% { translate: -5px -5px; } }
@keyframes abrir-b { 50% { translate: 5px 5px; } }
@keyframes latir { 50% { scale: 1.12; } }
.cargando-app { position: fixed; inset: 0; z-index: 40; display: grid; place-content: center; justify-items: center; gap: 24px; text-align: center; color: #fff;
  padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(16px, env(safe-area-inset-left, 0px));
  background: radial-gradient(circle at 50% 42%, rgb(176 141 87 / .14), transparent 40%), var(--navy); transition: opacity .45s ease, visibility .45s; }
.cargando-app .iso-odin { width: clamp(84px, 18vw, 120px); height: auto; color: #fff; filter: drop-shadow(0 0 22px rgb(176 141 87 / .3)); animation: aparecer .8s cubic-bezier(.2, .7, .2, 1) both; }
.cargando-app .firma-odin { width: clamp(185px, 37vw, 259px); height: auto; color: #fff; margin-top: -6px; animation: aparecer .8s .1s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes aparecer { from { opacity: 0; scale: .92; } }
.cargando-app span { font-size: 13.5px; letter-spacing: .08em; color: rgb(255 255 255 / .62); animation: aparecer .8s .2s cubic-bezier(.2, .7, .2, 1) both; }
.cargando-app.fuera { opacity: 0; visibility: hidden; }

/* ---------- 3. Encabezado: banda marina, logotipo blanco, pestañas con marcador dorado ---------- */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--navy); color: #fff; border-bottom: 1px solid rgb(176 141 87 / .55); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 16px 12px; }
/* Marca como bloque: logotipo arriba y descriptor alineado justo debajo, mismo ancho visual */
.brand { display: grid; gap: 6px; justify-items: start; color: #fff; min-width: 0; }
.logo-odin { height: 24px; width: auto; color: #fff; display: block; }
.marca-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.brand small { font-weight: 500; font-size: 11px; line-height: 1; color: rgb(255 255 255 / .62); letter-spacing: .15em; text-transform: uppercase; white-space: nowrap; }
/* Ajustes y cuenta: siempre arriba a la derecha */
.user-chip { display: inline-flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; }
.user-menu { position: relative; flex: none; }
.user-menu summary { display: grid; place-items: center; width: 36px; height: 36px; list-style: none; border: 1px solid rgb(255 255 255 / .14); background: rgb(255 255 255 / .08); color: #fff; border-radius: 50%; cursor: pointer; transition: background .15s; }
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu summary:hover, .user-menu[open] summary { background: rgb(255 255 255 / .2); }
.user-menu summary svg { width: 18px; height: 18px; }
/* Botón de empresas: dice lo elegido (una, dos o cuántas, con sus colores) y va aparte del botón de la cuenta. */
.empresa-menu { position: relative; min-width: 0; }
.empresa-menu summary { display: flex; align-items: center; gap: 7px; min-width: 0; height: 36px; padding-inline: 13px 12px; list-style: none; border: 1px solid rgb(255 255 255 / .14); background: rgb(255 255 255 / .08); color: rgb(255 255 255 / .88); border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s; }
.empresa-menu summary::-webkit-details-marker { display: none; }
.empresa-menu summary::after { content: ""; flex: none; width: 6px; height: 6px; margin: -3px 1px 0 2px; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: rotate(45deg); opacity: .75; }
.empresa-menu summary:hover, .empresa-menu[open] summary { background: rgb(255 255 255 / .2); }
.empresa-menu.fija summary { pointer-events: none; }
.empresa-menu.fija summary::after { display: none; }
.empresa-puntos { display: inline-flex; flex: none; }
.empresa-puntos:empty { display: none; }
.empresa-puntos .dot { box-shadow: 0 0 0 1px rgb(255 255 255 / .6); } /* el color de la empresa, legible sobre el marino */
.empresa-puntos .dot + .dot { margin-left: -3px; }
.empresa-puntos .dot-todas { box-shadow: inset 0 0 0 1.5px currentColor; }
.empresa-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empresa-corto { display: none; flex: none; white-space: nowrap; }
@media (max-width: 640px) { .empresa-nombre.largo { display: none; } .empresa-corto { display: inline; } }
/* Menús del encabezado. El encabezado es fijo: si un menú no cabe, se desliza por dentro. Cuenta: correo, Usuario, apariencia, Ajustes (solo dueño) y Salir. */
.user-pop, .empresa-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 7; min-width: 250px; max-width: calc(100vw - 32px); max-height: calc(100vh - 84px); max-height: calc(100dvh - 84px - env(safe-area-inset-top, 0px)); overflow-y: auto; overscroll-behavior: contain; display: grid; padding: 6px; background: var(--surface); color: var(--fg); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-hi); }
.empresa-pop { min-width: 280px; }
@media (max-width: 460px) { .empresa-pop { right: -44px; } } /* en teléfono se alinea con el borde de la pantalla, no con el botón */
.user-correo { display: block; padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.user-pop .aj-btn { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; color: var(--fg); border-radius: var(--r-sm); padding: 9px 10px; font-size: 14px; font-weight: 500; text-align: left; cursor: pointer; transition: background .15s; }
.user-pop .aj-btn:hover { background: var(--sunk); }
.user-tema { display: grid; gap: 6px; padding: 4px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.user-tema > span { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.user-tema .seg { display: flex; }
.user-tema .seg button { flex: 1; padding: 5px 8px; font-size: 13px; }
.user-pop .aj-btn svg { width: 17px; height: 17px; color: var(--muted); flex: none; }
/* Mes: compacto, en la fila de secciones, solo donde las cifras son mensuales */
.month { display: inline-flex; align-items: center; gap: 2px; flex: none; margin-left: auto; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 2px; }
.month button { border: 0; background: transparent; color: var(--muted); width: 26px; height: 26px; border-radius: 50%; font-size: 15px; line-height: 1; transition: background .15s, color .15s; }
.month button:hover { background: var(--sunk); color: var(--fg); }
.month span { min-width: 7.5em; text-align: center; font-size: 13px; font-weight: 600; text-transform: capitalize; }
.tabs { display: flex; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs .wrap { display: flex; flex-wrap: nowrap; gap: 2px; padding-block: 0; }
/* Área activa con tres señales: color, fondo y marcador dorado (no solo color) */
.tab { border: 0; background: none; padding: 11px 13px 10px; color: rgb(255 255 255 / .62); font-weight: 500; border-bottom: 2px solid transparent; border-radius: 6px 6px 0 0; margin-bottom: -1px; white-space: nowrap; transition: color .15s, border-color .15s, background .15s; }
.tab:hover { color: #fff; background: rgb(255 255 255 / .05); }
.tab[aria-selected="true"] { color: #fff; font-weight: 700; background: rgb(255 255 255 / .07); border-bottom-color: var(--gold); }
.tab:focus-visible { outline-offset: -2px; }
.tab .count { font-family: var(--f-data); font-size: 11.5px; background: rgb(255 255 255 / .14); color: #fff; border-radius: 10px; padding: 1px 7px; margin-left: 4px; }
.tab[data-tab="cortana"] .count { background: var(--gold); color: var(--navy); }
@media (max-width: 520px) { .top .wrap { padding-block: 14px 10px; } .logo-odin { height: 20px; } .brand small { font-size: 9.5px; letter-spacing: .12em; } }
/* En teléfono manda la empresa elegida: el descriptor le cede su lugar para que se lea completa. */
@media (max-width: 460px) { .brand small { display: none; } }

/* Secciones del área y mes en una sola fila de píldoras; las empresas se eligen en su botón del encabezado */
.ctx-row { display: flex; align-items: center; gap: 8px 16px; padding-top: 12px; }
.subnav { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.subnav-area { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); flex: none; }
.subnav-items { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.subnav-items::-webkit-scrollbar { display: none; }
.subnav-items button, .chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--fg-2); border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 600; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }
.subnav-items button:hover, .chip:hover { border-color: var(--line-2); }
.subnav-items button[aria-selected="true"], .chip[aria-pressed="true"] { background: var(--selected); color: var(--selected-ink); border-color: var(--selected); }
.subnav-items .count { font-family: var(--f-data); font-size: 12px; opacity: .75; }
.subnav-nota { font-size: 12.5px; color: var(--muted); }
.chip { font-weight: 500; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
/* Menú de empresas: un renglón por opción, con su casilla; se marcan varias. «Solo» deja únicamente esa empresa. */
.biz-filter { display: grid; gap: 2px; }
.biz-fila { display: flex; align-items: center; gap: 2px; border-radius: var(--r-sm); }
.biz-fila:hover, .biz-fila:has([aria-pressed="true"]) { background: var(--sunk); }
.biz-filter .chip, .biz-filter .chip[aria-pressed="true"] { flex: 1 1 auto; min-width: 0; border-color: transparent; background: none; color: var(--fg); border-radius: var(--r-sm); padding: 9px 10px; font-size: 14px; white-space: normal; text-align: left; cursor: pointer; }
.biz-filter .chip[aria-pressed="true"] { font-weight: 600; }
.biz-marca { flex: none; display: grid; place-items: center; width: 17px; height: 17px; margin-right: 3px; border: 1.5px solid var(--line-2); border-radius: 4px; font-size: 12px; line-height: 1; }
[aria-pressed="true"] > .biz-marca { background: var(--selected); border-color: var(--selected); color: var(--selected-ink); }
[aria-pressed="true"] > .biz-marca::after { content: "✓"; }
.biz-filter .dot-todas { box-shadow: inset 0 0 0 1.5px currentColor; opacity: .6; } /* «Todas» no tiene color: alinea su texto con el resto */
.biz-solo { flex: none; border: 0; background: none; color: var(--muted); border-radius: var(--r-sm); padding: 6px 9px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.biz-solo:hover { color: var(--fg); background: var(--line); }
@media (hover: hover) { .biz-solo { opacity: 0; } .biz-fila:hover .biz-solo, .biz-solo:focus-visible { opacity: 1; } }
/* En celular el mes sube junto al nombre del área, para no ocupar otra fila: las secciones van debajo, a todo el ancho. */
@media (max-width: 640px) {
  .ctx-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
  .subnav { display: contents; }
  .subnav-items, .subnav-nota { grid-column: 1 / -1; }
  .month { grid-area: 1 / 2; margin-left: 0; }
}

/* ---------- 4. Layout y paneles ---------- */
main { padding-block: 12px 48px; display: grid; gap: 20px; }
main > section { min-width: 0; } /* sin esto, una tabla ancha estira la pestaña y la página se desborda de lado en celular */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; min-width: 0; box-shadow: var(--shadow); }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.banner { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--warn-bg); color: var(--warn); border-radius: var(--r); padding: 10px 14px; font-size: 14px; font-weight: 500; }
.empty { text-align: center; padding: 28px 12px; color: var(--muted); display: grid; gap: 8px; justify-items: center; }
.empty strong { color: var(--fg); font-family: var(--f-display); font-size: 16px; }
.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--navy); color: #fff; padding: 9px 16px; border-radius: var(--r); box-shadow: var(--shadow-hi); font-size: 14px; font-weight: 500; z-index: 20; }

/* KPIs: etiqueta en acero, cifra en marino; solo el de alerta lleva color */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px 12px; display: grid; gap: 3px; align-content: start; box-shadow: var(--shadow); }
.kpi-val { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.delta { font-size: 12.5px; color: var(--muted); }
.delta.up { color: var(--good); } .delta.down { color: var(--bad); }
.kpi.alert { border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); }
.kpi.alert .kpi-val { color: var(--bad); }
.kpi-btn { align-self: flex-start; justify-self: start; margin-top: 6px; padding: 2px 0; color: var(--fg); text-decoration: underline; }
#objSinAsignar:empty { display: none; }
.kpi .avance { margin-top: 4px; }
.cx-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.lm-kpis, .lg-kpis { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

/* ---------- 5. Componentes ---------- */
/* Tablas */
/* Tabla ancha: se desliza sola, con sombra en el borde que indica que hay más columnas */
.tbl-wrap { overflow-x: auto; overscroll-behavior-x: contain;
  background: linear-gradient(90deg, var(--surface) 30%, transparent), linear-gradient(270deg, var(--surface) 30%, transparent) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgb(16 29 49 / .18), transparent), radial-gradient(farthest-side at 100% 50%, rgb(16 29 49 / .18), transparent) 100% 0;
  background-repeat: no-repeat; background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%; background-attachment: local, local, scroll, scroll; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
td { padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
th.m, td.m { text-align: right; white-space: nowrap; }
tfoot td { font-weight: 600; border-top: 1px solid var(--line-2); border-bottom: 0; }
.biz { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
tr.click { cursor: pointer; }
tr.click:hover td { background: var(--sunk); }
.avance, .marginbar { height: 6px; background: var(--sunk); border-radius: 3px; overflow: hidden; min-width: 60px; }
.avance i, .marginbar i { display: block; height: 100%; }
.marginbar i { background: var(--good); }

/* Píldoras de estado: color más un punto, para que el estado no dependa solo del color */
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; letter-spacing: .01em; padding: 2px 8px 2px 7px; border-radius: 999px; white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; opacity: .85; }
.pill.capturado, .pill.baja { background: var(--sunk); color: var(--muted); }
.pill.confirmado { background: var(--good-bg); color: var(--good); }
.pill.observado, .pill.alta { background: var(--bad-bg); color: var(--bad); }
.pill.media, .pill.ej { background: var(--warn-bg); color: var(--warn); }
.pill.area { background: var(--accent-soft); color: var(--accent); }

/* Avisos */
.alerts { display: grid; gap: 8px; }
.alert-row { display: grid; grid-template-columns: 3px minmax(0, 1fr); gap: 12px; background: var(--sunk); border-radius: var(--r-sm); padding: 10px 12px 10px 0; overflow: hidden; }
.alert-row .stripe { border-radius: 0 3px 3px 0; background: var(--steel); }
.alert-row.bad .stripe { background: var(--bad); }
.alert-row.warn .stripe { background: var(--warn); }
.alert-row strong { display: block; font-weight: 600; }
.alert-row span { font-size: 13.5px; color: var(--muted); }

/* Gráfica */
.chart svg { width: 100%; height: auto; display: block; }
.legend { display: flex; gap: 16px; font-size: 13px; color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }

/* Botones */
.btn { border: 1px solid var(--line-2); background: var(--surface); color: var(--fg); border-radius: 10px; padding: 7px 14px; font-weight: 600; font-size: 14px; transition: background .15s, border-color .15s; }
.btn:hover { background: var(--sunk); }
.btn.primary { background: var(--btn); color: var(--btn-ink); border-color: transparent; }
.btn.primary:hover { background: var(--btn-hover); }
.btn.danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, var(--line-2)); }
.btn.danger:hover { background: var(--bad-bg); }
.btn.small { padding: 4px 10px; font-size: 13px; }
.btn:disabled, .linkbtn:disabled, .seg-btn:disabled { opacity: .5; cursor: not-allowed; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.linkbtn { border: 0; background: none; color: var(--muted); font-size: 13px; padding: 2px 4px; }
.linkbtn:hover { color: var(--fg); text-decoration: underline; }
.linkbtn.danger { color: var(--bad); }

/* Control segmentado */
.seg { display: inline-flex; gap: 2px; border: 1px solid var(--line); border-radius: 10px; background: var(--sunk); padding: 2px; overflow: hidden; }
.seg { flex-wrap: wrap; } /* con varias pestañas (Legal tiene cinco) el selector cabe en un celular sin ensanchar la página */
.seg button { border: 0; border-radius: 8px; background: transparent; color: var(--muted); padding: 5px 12px; font-size: 13.5px; font-weight: 500; transition: background .15s, color .15s; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--fg); font-weight: 600; box-shadow: 0 1px 2px rgb(16 29 49 / .12); }

/* Campos */
input[type="search"], .field input, .field select, .field textarea, .cx-quick input, .cx-quick select, .aj-persona input, .aj-persona select, .aj-nuevo input, .aj-nuevo select,
.lg-filtro select, .lg-filtro input, .dir-tarea-acc input, .dir-tarea-acc select, .dir-filtro, .doc-subir .doc-archivo input[type=url], .login-card .field input {
  border: 1px solid var(--line-2); background: var(--surface); color: var(--fg); border-radius: 10px; padding: 7px 10px; min-width: 0; transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--ring); }
input:disabled, select:disabled, textarea:disabled { background: var(--sunk); color: var(--muted); border-color: var(--line); cursor: not-allowed; }
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }
input[type="search"] { width: 220px; max-width: 100%; }
input[type="checkbox"] { accent-color: var(--accent); }
.field { display: grid; gap: 4px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 13px; font-weight: 600; color: var(--muted); }
.field input, .field select, .field textarea { width: 100%; padding: 8px 10px; }
.field textarea { min-height: 64px; resize: vertical; }
.field label.con-mic { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.field small, .field .hint { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.area-campo { border: 0; margin: 0; padding: 0; min-width: 0; }
.area-campo legend { padding: 0; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.area-ops { display: flex; flex-wrap: wrap; gap: 6px; }
.field .area-op { position: relative; display: inline-flex; cursor: pointer; font-size: 13.5px; font-weight: 500; }
.area-op input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.area-op span { border: 1px solid var(--line); background: var(--surface); color: var(--fg-2); border-radius: 999px; padding: 6px 12px; }
.area-op input:checked + span { background: var(--selected); color: var(--selected-ink); border-color: var(--selected); }
.area-op input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-error { color: var(--bad); font-size: 13.5px; font-weight: 500; margin: 0; }
.form-error:not(:empty)::before { content: "● "; }
.mic { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line-2); background: var(--surface); color: var(--accent); border-radius: 999px; padding: 2px 10px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.mic svg { width: 14px; height: 14px; flex: none; }
.mic:hover { border-color: var(--accent); }
.mic.on { background: var(--bad); border-color: var(--bad); color: #fff; animation: micPulso 1.2s ease-in-out infinite; }
@keyframes micPulso { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--bad) 25%, transparent); } }
.cx-quick .mic { padding: 7px 12px; font-size: 13.5px; }

/* Diálogos */
dialog { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0; background: var(--surface); color: var(--fg); width: min(520px, calc(100vw - 32px)); box-shadow: var(--shadow-hi); }
dialog::backdrop { background: rgb(16 29 49 / .55); backdrop-filter: blur(3px); }
dialog form { display: grid; gap: 14px; padding: 20px; }
.dlg-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.dlg-actions .spacer { flex: 1; }

/* Interruptor */
.switch { position: relative; display: inline-flex; width: 46px; height: 28px; flex: none; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--line-2); transition: background .15s; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .3); transition: transform .15s; }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- 6. Inicio de sesión ---------- */
#login { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(circle at 20% 15%, rgb(101 118 135 / .35), transparent 45%), radial-gradient(circle at 85% 90%, rgb(176 141 87 / .2), transparent 40%), var(--navy); }
.login-card { width: min(380px, 100%); display: grid; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; box-shadow: 0 30px 60px -20px rgb(0 0 0 / .6); }
.login-card .brand { flex-wrap: wrap; row-gap: 6px; color: var(--fg); }
.login-card .logo-odin { color: var(--fg); height: 26px; }
.login-card .brand small { color: var(--muted); display: block; }
.login-card .field input { width: 100%; padding: 9px 10px; }
.pass-wrap { position: relative; }
.pass-wrap input { padding-right: 44px !important; }
.pass-ver { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 36px; height: 36px; display: grid; place-items: center; border: 0; background: none; color: var(--muted); border-radius: 6px; cursor: pointer; }
.pass-ver:hover, .pass-ver[aria-pressed="true"] { color: var(--accent); }
.pass-ver svg { width: 20px; height: 20px; }
#login .linkbtn { padding: 2px 0; }
#login [hidden] { display: none !important; }
/* Aviso de mudanza de dominio (js/dominio.js): encima del inicio de sesión, debajo de la pantalla de carga. */
.aviso-dominio { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 35; width: min(520px, calc(100vw - 32px)); display: grid; gap: 8px; justify-items: start; padding: 16px 18px; background: var(--navy); color: #fff; border: 1px solid var(--gold); border-radius: var(--r-lg); box-shadow: var(--shadow-hi); }
.aviso-dominio p { margin: 0; font-size: 14px; color: rgb(255 255 255 / .85); }
.aviso-dominio .btn { text-decoration: none; }

/* ---------- 7. Pendientes y cierres ---------- */
.todo-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; align-items: start; }
.todo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.todo:last-child { border-bottom: 0; }
.todo input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; }
.todo .t { font-weight: 500; overflow-wrap: anywhere; }
.todo.done .t { text-decoration: line-through; color: var(--muted); }
.todo .meta { font-size: 13px; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; }
.todo .meta .late { color: var(--bad); font-weight: 600; }
.cierre { display: grid; gap: 12px; }
.cierre-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cierre-facts div { background: var(--sunk); border-radius: var(--r-sm); padding: 10px 12px; display: grid; gap: 2px; }

/* ---------- 8. Ajustes: negocios, usuarios y permisos ---------- */
dialog.aj-dlg { width: min(680px, calc(100vw - 16px)); }
.aj { display: grid; gap: 14px; padding: 20px; max-height: calc(100dvh - 40px); overflow: auto; }
.aj-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.aj-head h2 { margin: 0; }
.aj h3 { margin: 6px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.aj-neg { border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; display: grid; gap: 10px; background: var(--bg); }
.aj-neg.off { opacity: .6; }
.aj-neg-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.aj-neg-head b { display: block; font-weight: 600; }
.aj-neg-head small { color: var(--muted); font-size: 13px; }
.aj-neg-head .dot { width: 10px; height: 10px; }
.aj-gente { display: flex; flex-wrap: wrap; gap: 6px; }
.aj-p { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 13px; font-weight: 500; color: var(--muted); cursor: pointer; }
.aj-p[aria-pressed="true"] { border-color: var(--accent); color: var(--fg); background: var(--accent-soft); }
.aj-p[aria-pressed="true"]::before { content: "✓"; color: var(--accent); font-weight: 700; }
.aj-p.fijo { cursor: default; }
.aj-p.off { opacity: .55; text-decoration: line-through; }
.aj-persona { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 12px; align-items: center; padding: 10px 0; }
.aj-persona + .aj-persona { border-top: 1px solid var(--line); }
.aj-persona small { display: block; color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; margin-top: 2px; }
.aj-persona input, .aj-persona select, .aj-nuevo input, .aj-nuevo select { width: 100%; }
.aj-persona input { font-weight: 600; }
.aj-persona.aj-persona2 { grid-template-columns: minmax(0, 1fr) auto; }
.aj-persona2 b { font-weight: 600; }
.aj-persona2 .pill { margin-left: 6px; vertical-align: 1px; }
.aj-roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 8px; }
.aj-roles div { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; font-size: 13px; display: grid; gap: 2px; }
.aj-roles span { color: var(--muted); }
.aj-org { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; padding: 10px 12px; border-radius: var(--r); background: var(--sunk); font-size: 13.5px; }
.aj-org b { font-size: 15px; }
.aj-org span { color: var(--muted); }
/* Ajustes: menú de tres opciones; cada sección se muestra sola, con «‹ Ajustes» para volver. */
.aj-menu { display: grid; gap: 10px; }
.aj-opcion { text-align: left; border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; background: var(--bg); display: grid; gap: 3px; font: inherit; color: var(--fg); cursor: pointer; }
.aj-opcion:hover, .aj-opcion:focus-visible { border-color: var(--line-2); background: var(--sunk); }
.aj-opcion b { font-size: 15.5px; font-weight: 600; }
.aj-opcion small { color: var(--muted); font-size: 13px; }
.aj-opcion b::after { content: "›"; float: right; color: var(--muted); font-weight: 400; }
.aj-sec { display: grid; gap: 14px; }
.aj-sec-head { display: flex; align-items: baseline; gap: 12px; }
.aj-sec-head h3 { margin: 0; }
.aj-volver { padding-left: 0; font-weight: 600; }
.aj-bit { display: grid; }
.aj-bit-fila { display: grid; grid-template-columns: 7.2rem minmax(0, 1fr); gap: 2px 12px; padding: 8px 0; font-size: 13.5px; }
.aj-bit-fila + .aj-bit-fila { border-top: 1px solid var(--line); }
.aj-bit-fila time { color: var(--muted); font-size: 12.5px; }
.aj-bit-fila small { grid-column: 2; color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.aj-nuevo { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 8px; align-items: end; }
.aj-matriz summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.aj-tabla { font-size: 13px; }
.aj-tabla td, .aj-tabla th { white-space: nowrap; }
.perm-persona { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.perm-email { font-size: 14px; overflow-wrap: anywhere; margin: 4px 0; }
.perm-config { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.perm-emp { gap: 12px; }
.perm-tabla { font-size: 13.5px; }
.perm-tabla th, .perm-tabla td { text-align: center; padding: 6px 8px; }
.perm-tabla th:first-child, .perm-tabla td:first-child { text-align: left; }
.perm-tabla td small { display: block; color: var(--muted); font-size: 12px; }
.perm-tabla input[type="checkbox"] { width: 18px; height: 18px; }
.perm-resumen { border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; background: var(--sunk); font-size: 14px; }
.perm-resumen ul { margin: 6px 0; padding-left: 18px; }
.perm-resumen p { margin: 6px 0 0; }
.perm-cambios { color: var(--muted); font-size: 13px; }
@media (max-width: 640px) {
  .perm-persona, .perm-config { grid-template-columns: 1fr; }
  .aj { padding: 16px; }
  .aj-p { min-height: 36px; }
  .aj-persona { grid-template-columns: minmax(0, 1fr) auto; }
  .aj-persona > div { grid-column: 1 / -1; }
  .aj-nuevo { grid-template-columns: 1fr; }
  .aj-bit-fila { grid-template-columns: 1fr; } .aj-bit-fila small { grid-column: 1; }
}

/* ---------- 9. Odín: centro de mando ---------- */
/* Banda marina con el isotipo y el saludo: la única pieza con gradiente, igual en ambos temas */
.cx-hero { display: flex; align-items: center; gap: clamp(16px, 4vw, 40px); padding: clamp(20px, 3.4vw, 32px); border-radius: var(--r-lg); overflow: hidden; position: relative; color: #fff;
  background: radial-gradient(circle at 10% 50%, rgb(101 118 135 / .32), transparent 42%), radial-gradient(circle at 95% 0%, rgb(176 141 87 / .18), transparent 38%), linear-gradient(120deg, var(--navy) 0%, var(--navy-2) 100%);
  box-shadow: var(--shadow); }
.cx-holo { width: clamp(104px, 12vw, 150px); aspect-ratio: 1; flex: none; position: relative; border-radius: 50%; }
.cx-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.cx-r { transform-box: view-box; transform-origin: 50% 50%; }
/* El isotipo del héroe no gira: queda fijo y respira; solo las órbitas se mueven, despacio y en sentidos opuestos */
.cx-iso { position: absolute; inset: 19%; background: center / contain no-repeat; filter: drop-shadow(0 0 12px rgb(176 141 87 / .4)); }
@media (prefers-reduced-motion: no-preference) {
  .cx-r1 { animation: cx-spin 70s linear infinite; }
  .cx-r2 { animation: cx-spin 110s linear infinite reverse; }
  .cx-iso { animation: cx-glow 4.5s ease-in-out infinite alternate; }
}
@keyframes cx-spin { to { transform: rotate(360deg); } }
@keyframes cx-glow { from { filter: drop-shadow(0 0 10px rgb(176 141 87 / .3)); scale: 1; } to { filter: drop-shadow(0 0 20px rgb(176 141 87 / .6)); scale: 1.02; } }
.cx-hero-text { display: grid; gap: 8px; min-width: 0; position: relative; z-index: 1; }
.cx-hero-text p { margin: 0; font-size: 14px; }
.cx-eyebrow { display: flex; gap: 10px; align-items: center; font-size: 12.5px; color: rgb(255 255 255 / .6); letter-spacing: .02em; }
.cx-eyebrow b { text-transform: uppercase; letter-spacing: .2em; font-size: 11px; color: #fff; border: 1px solid rgb(176 141 87 / .6); padding: 2px 9px; border-radius: 999px; font-weight: 600; }
.cx-title { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(26px, 4vw, 38px); letter-spacing: -0.03em; line-height: 1.05; color: #fff; text-wrap: balance; }
.cx-resumen { color: rgb(255 255 255 / .82) !important; font-size: 15.5px !important; max-width: 60ch; }
@media (max-width: 520px) { .cx-hero { flex-direction: column; align-items: flex-start; } }
/* Marca de Odin: isotipo inverso aprobado (piezas blancas y punto oro centrado), mismos contornos que output/branding/odin-app-corporativo-dorado */
.cx-iso { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%2210 10 100 100%22%3E%3Cpath fill=%22%23fff%22 d=%22M38 16 H85 L67 34 H40 Q34 34 34 40 V67 L16 85 V38 Q16 16 38 16 Z%22/%3E%3Cpath fill=%22%23fff%22 d=%22M104 35 V82 Q104 104 82 104 H35 L53 86 H80 Q86 86 86 80 V53 Z%22/%3E%3Ccircle cx=%2260%22 cy=%2260%22 r=%2210%22 fill=%22%23B08D57%22/%3E%3C/svg%3E"); }

.cx-main { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.cx-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 20px; align-items: start; }
.cx-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; }
.cx-area { background: var(--sunk); border-radius: var(--r-sm); padding: 12px; display: grid; gap: 2px; align-content: start; }
.cx-area-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.cx-area-h b { font-weight: 600; }
.cx-task { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--line); font-size: 14px; }
.cx-task small, .cx-row small { display: block; color: var(--muted); font-size: 12.5px; }
.cx-due { font-size: 12.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cx-due.late { color: var(--bad); font-weight: 600; } .cx-due.today { color: var(--warn); font-weight: 600; }
.cx-scroll { max-height: 30rem; overflow: auto; }
.cx-scroll-sm { max-height: 20rem; }
.cx-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.cx-quick #qTitulo { flex: 1 1 200px; }
.cx-quick select { flex: 0 1 150px; }
/* Lista única de pendientes agrupada por urgencia */
.cx-bucket { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 18px 0 2px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.cx-bucket.late { color: var(--bad); } .cx-bucket.today { color: var(--warn); }
.cx-bucket.late span:first-child::before, .cx-bucket.today span:first-child::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 7px; vertical-align: 1px; }
.cx-item { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 9px 8px; margin-inline: -8px; border-radius: var(--r-sm); border-bottom: 1px solid var(--line); transition: background .15s; }
.cx-item:last-child { border-bottom: 0; }
.cx-item:hover { background: var(--sunk); }
.cx-item input[type="checkbox"] { width: 18px; height: 18px; margin: 2px 0 0; }
.cx-item .t { font-weight: 500; overflow-wrap: anywhere; }
.cx-item.done .t { color: var(--muted); text-decoration: line-through; }
.cx-item .meta { font-size: 13px; color: var(--muted); display: flex; gap: 4px 10px; flex-wrap: wrap; margin-top: 1px; }
.cx-item .side { display: grid; gap: 4px; justify-items: end; text-align: right; }
.cx-item .t .cx-tag, .todo .t .cx-tag { margin-left: 4px; vertical-align: 1px; }
.cx-bullet { width: 10px; height: 10px; border-radius: 50%; margin: 6px 4px 0; border: 2px solid var(--muted); }
.cx-bullet.prospecto { border-color: var(--good); }
.cx-sub { margin-top: 4px; font-size: 13px; color: var(--muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cx-sub b { color: var(--fg); font-weight: 600; }
/* Agenda */
.cx-day { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 14px 0 4px; }
.cx-day:first-child { margin-top: 0; }
.cx-row { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 7px 0; font-size: 14px; }
.cx-row + .cx-row { border-top: 1px solid var(--line); }
.cx-row .cx-t { color: var(--muted); font-family: var(--f-data); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.cx-row .cx-m { min-width: 0; overflow-wrap: anywhere; }
.cx-row a { color: inherit; text-decoration: none; }
.cx-row a:hover { color: var(--accent); text-decoration: underline; }
.cx-past { opacity: .45; }
.cx-free { opacity: .55; }
.cx-live { background: var(--accent-soft); border-radius: 6px; padding-inline: 8px; margin-inline: -8px; }
.cx-now { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: 12px; font-weight: 600; color: var(--bad); }
.cx-now::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--bad); flex: none; }
.cx-now::after { content: ""; flex: 1; height: 2px; background: var(--bad); border-radius: 2px; }
/* Etiquetas */
.cx-tag { font-size: 12px; padding: 1px 9px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); white-space: nowrap; }
.cx-tag.blue { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.cx-tag.ok { border-color: var(--good); color: var(--good); }
.cx-tag.warn { border-color: var(--warn); color: var(--warn); }
/* Prospectos */
.cx-prow { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; gap: 10px; padding: 8px 0; align-items: baseline; font-size: 14px; }
.cx-prow + .cx-prow { border-top: 1px solid var(--line); }
.cx-prow b { font-weight: 600; }
.cx-ing { text-align: right; white-space: nowrap; font-family: var(--f-data); font-variant-numeric: tabular-nums; font-weight: 500; color: var(--good); }
.cx-ing small { display: block; font-family: var(--f-body); font-weight: 400; font-size: 12px; color: var(--muted); white-space: normal; max-width: 16ch; margin-left: auto; }
.cx-ing.na { color: var(--muted); font-family: var(--f-body); font-weight: 400; font-size: 12.5px; }
.cx-note { color: var(--muted); font-size: 13.5px; padding: 8px 0; display: grid; gap: 8px; justify-items: start; }
.cx-note.fail::before { content: "● "; color: var(--bad); }
.cx-stale { color: var(--warn); }
.cx-pub { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); display: grid; gap: 6px; }
.cx-pub a, .cx-item .meta a, .todo .meta a { color: var(--accent); }
/* Correo: respuestas rápidas */
.cx-mail { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 10px 0; font-size: 14px; }
.cx-mail + .cx-mail { border-top: 1px solid var(--line); }
.cx-mail b { font-weight: 600; overflow-wrap: anywhere; }
.cx-mail small { grid-column: 1 / -1; color: var(--muted); font-size: 13px; }
.cx-mail .cx-tag { align-self: start; }
.cx-mail .seg-btns { grid-column: 1 / -1; margin-top: 4px; }
.seg-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.seg-btn { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line-2); background: var(--surface); border-radius: 999px; padding: 3px 11px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; text-decoration: none; }
.seg-btn.si:hover, .seg-btn.si:focus-visible { border-color: var(--good); color: var(--good); }
.seg-btn.no:hover, .seg-btn.no:focus-visible { border-color: var(--warn); color: var(--warn); }
.seg-btn.pri { border-color: var(--accent); color: var(--accent); }
.seg-btn.pri:hover, a.seg-btn:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.seg-ult { color: var(--fg); }
.seg-rapidas { display: flex; flex-wrap: wrap; gap: 6px; }
.seg-hist { display: grid; gap: 6px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 10px; }
.seg-hist b { color: var(--fg); font-weight: 600; }
/* Dinero: cada aviso es un botón */
#cxDinero .alert-row { border: 0; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: background .15s; }
#cxDinero .alert-row:hover { background: color-mix(in srgb, var(--sunk) 60%, var(--line)); }
/* ODIN Command: fuente, fecha y avisos de cada indicador */
.fuente { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.fuente.aviso { color: var(--warn); }
.fuente.aviso::before { content: "● "; }
.alerts > .fuente:first-of-type { margin-top: 4px; }
/* Tablero: resumen de «Qué revisar», agenda y pendientes compactos, gráfica apretada. */
.tb-resumen { margin: 0 0 4px; font-size: 14.5px; }
.tb-resumen .tb-urg { color: var(--bad); }
.alerts .label { margin-top: 6px; }
.tb-mas summary { cursor: pointer; font-size: 13.5px; color: var(--accent); margin-top: 4px; }
.tb-mas[open] { display: grid; gap: 8px; }
.tb-pend { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.tb-pend:last-child { border-bottom: 0; }
.tb-pend.click { cursor: pointer; } .tb-pend.click:hover .tb-pend-t { color: var(--accent); }
.tb-pend-t { min-width: 0; overflow-wrap: anywhere; }
.tb-pend-t small { display: block; color: var(--muted); font-size: 12.5px; }
.tb-pend-t small .dot { width: 8px; height: 8px; margin-right: 5px; vertical-align: 0; }
.tb-pie { margin-top: 8px; }
.tb-chart .chart-vacio { margin: 0; }
@media (max-width: 640px) { .tb-pend { grid-template-columns: 4.6rem minmax(0, 1fr) auto; } }

/* Vigencia y cobertura: color más símbolo. Sin clase = sin dato (neutro, sin urgencia) */
.cob { display: block; margin: 2px 0 0 15px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.cob.ok { color: var(--good); } .cob.warn { color: var(--warn); } .cob.bad { color: var(--bad); font-weight: 600; }
.cob.ok::before { content: "✓ "; } .cob.warn::before { content: "◔ "; } .cob.bad::before { content: "✕ "; }
@media (max-width: 860px) { .cx-main { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 10. Finanzas ---------- */
.fi-item .side { display: grid; gap: 3px; justify-items: end; text-align: right; }
.fi-monto { font-weight: 600; }
.fi-sub { font-size: 12px; color: var(--muted); }
.fi-hechas { margin-top: 14px; font-size: 14px; }
.fi-hechas summary { cursor: pointer; color: var(--muted); font-size: 13px; }

/* ---------- 11. Lemon Rentals ---------- */
.lm-calc { margin: 0; padding: 10px 12px; border-radius: var(--r-sm); background: var(--sunk); font-size: 14px; }
.lm-sub { font-size: 12.5px; color: var(--muted); display: block; }
.lm-falta { color: var(--bad); font-weight: 600; }
.lm-row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.lm-fondo { display: grid; gap: 6px; padding: 14px; border-radius: var(--r); background: var(--accent-soft); margin-bottom: 12px; }
.lm-fondo > .num { font-size: 26px; font-weight: 600; }
.lm-linea { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.lm-flota { display: grid; gap: 10px; }
.lm-auto { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 14px; border-radius: var(--r); background: var(--sunk); border-left: 3px solid var(--muted); }
.lm-auto.renta { border-left-color: var(--accent); } .lm-auto.libre { border-left-color: var(--good); } .lm-auto.entrega { border-left-color: var(--warn); }
.lm-auto b { font-weight: 600; } .lm-auto .lm-sub { grid-column: 1 / -1; }
.lm-fin { display: grid; gap: 6px; margin-top: 12px; }

/* ---------- 12. Legal · Permisos ---------- */
.lg-head { display: flex; justify-content: space-between; align-items: end; gap: 12px; flex-wrap: wrap; }
.lg-titulo { margin: 0; font-size: 22px; }
.lg-filtros { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 12px; }
.lg-filtro { display: grid; gap: 3px; font-size: 12px; color: var(--muted); font-weight: 600; min-width: 0; flex: 1 1 150px; max-width: 260px; }
.lg-filtro select, .lg-filtro input { padding: 6px 8px; font-weight: 400; font-size: 13.5px; width: 100%; }
.lg-tabla td b { font-weight: 600; }
.lg-cand { border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; display: grid; gap: 10px; background: var(--bg); }
.lg-cand + .lg-cand { margin-top: 12px; }
.lg-cand-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.lg-cand-head b { font-weight: 600; font-size: 15.5px; display: block; }
.lg-cand-head small { color: var(--muted); font-size: 13px; }
.lg-pills { display: flex; gap: 6px; flex-wrap: wrap; align-items: start; }
.lg-cand-datos { display: grid; gap: 6px; font-size: 13.5px; }
.lg-cand-datos .label { display: block; }
.lg-cand-datos details summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.lg-cand-datos details p { margin: 4px 0 0; }
.lg-ok { color: var(--good); font-size: 12.5px; } .lg-pend { color: var(--warn); font-size: 12.5px; }
.lg-fuentes { display: grid; gap: 2px; font-size: 13px; }
.lg-fuentes a { overflow-wrap: anywhere; }
.lg-fuentes small { color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.lg-cand-pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.lg-cand-pie > span:last-child { display: flex; gap: 10px; align-items: center; }
#lgExpForm, #lgCandForm { display: grid; gap: 12px; padding: 20px; }
.le-h { margin: 6px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.le-check { font-size: 14px; } .le-check span { display: flex; gap: 8px; align-items: center; font-weight: 500; color: var(--fg); }
.le-check input { width: 18px; height: 18px; }
.le-vigencia { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; background: var(--sunk); font-size: 13.5px; }
.le-ev { display: grid; grid-template-columns: 1fr 1.3fr 1.5fr 1fr auto; gap: 8px; align-items: end; }
.le-doc { border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; display: grid; gap: 8px; background: var(--bg); }
.le-doc + .le-doc { margin-top: 10px; }
.le-doc.archivado { opacity: .6; }
.le-doc-head { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.le-doc-head b { font-weight: 600; display: block; }
.le-doc small, .le-ver small { display: block; color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.le-ver { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding: 6px 0 6px 10px; border-left: 2px solid var(--line-2); font-size: 13.5px; }
.le-ver.actual { border-left-color: var(--accent); }
.le-ver small.lg-ok { color: var(--good); } .le-ver small.lg-pend { color: var(--warn); }
.le-acc { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.le-doc > .le-acc { justify-content: flex-start; }
#lgRevDlg .perm-tabla td:nth-child(2) { max-width: 260px; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .le-ev { grid-template-columns: 1fr 1fr; } .le-ev .field:nth-child(2), .le-ev .field:nth-child(3) { grid-column: 1 / -1; } .le-ev .field[style] { grid-column: 1 / -1 !important; }
  .lg-filtro { max-width: none; }
  .le-ver { grid-template-columns: 1fr; } .le-acc { justify-content: flex-start; }
}

/* ---------- 13. Dirección, Recursos Humanos y documentos ---------- */
.dir-form { display: grid; gap: 12px; padding: 20px; }
.dir-lista { display: grid; gap: 10px; }
.dir-card { border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; display: grid; gap: 8px; background: var(--bg); }
.dir-card-head { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.dir-card-head b { font-weight: 600; display: block; }
.dir-card-head small { color: var(--muted); font-size: 13px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.dir-avance { display: grid; gap: 4px; font-size: 14px; }
.dir-avance small { color: var(--muted); font-size: 12.5px; }
.dir-bloque { display: grid; gap: 10px; border: 1px solid var(--line); border-radius: var(--r); padding: 12px; }
.dir-hito { display: flex; justify-content: space-between; gap: 8px; }
.dir-tarea-acc { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dir-tarea-acc input, .dir-tarea-acc select, .dir-filtro { padding: 6px 8px; font-size: 13.5px; flex: 1 1 200px; }
.toolbar > .dir-filtro { flex: 0 1 auto; } /* en la cabecera del panel el filtro no empuja al botón a otra línea */
.doc-subir { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; align-items: end; margin-top: 8px; }
.doc-subir .doc-archivo { grid-column: span 2; display: grid; gap: 4px; }
@media (max-width: 640px) { .doc-subir .doc-archivo { grid-column: 1 / -1; } }

/* ---------- 14. Entrada suave de los bloques fijos de cada pestaña ---------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  [data-view] .panel, [data-view] .kpis, .cx-hero, .todo-groups { animation: rise .4s cubic-bezier(.2, .7, .2, 1) both; }
  .cx-main > :nth-child(2), .grid2 > :nth-child(2) { animation-delay: .06s; }
  .cx-cols > .panel:nth-child(2) { animation-delay: .05s; } .cx-cols > .panel:nth-child(3) { animation-delay: .1s; } .cx-cols > .panel:nth-child(4) { animation-delay: .15s; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } .iso-odin.vivo .pieza-a, .iso-odin.vivo .pieza-b, .iso-odin.vivo .punto, .ptr.cargando .iso-odin .pieza-a, .ptr.cargando .iso-odin .pieza-b, .ptr.cargando .iso-odin .punto, .mic.on, .cargando-app .iso-odin, .cargando-app .firma-odin, .cargando-app span { animation: none; } .iso-odin .pieza-a, .iso-odin .pieza-b { translate: none; } .cargando-app { transition: none; } }

/* ---------- 15. Celular ---------- */
@media (max-width: 860px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid2 { grid-template-columns: minmax(0, 1fr); }
  .cierre-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .fgrid { grid-template-columns: 1fr; }
  .kpi-val { font-size: 21px; }
  .hide-sm { display: none; }
}
/* Campos de 16 px (iOS no hace zoom al escribir), filtros que se deslizan, diálogos con scroll y botones fijos abajo,
   y las tablas de Lemon convertidas en tarjetas (cada celda con su etiqueta). */
@media (max-width: 640px) {
  input, select, textarea { font-size: 16px !important; }
  .panel { padding: 16px; }
  .panel-head .toolbar { width: 100%; }
  .panel-head .toolbar .btn { flex: 1; }
  .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg::-webkit-scrollbar { display: none; }
  .seg button { white-space: nowrap; flex: none; padding: 8px 12px; }
  .seg-btn { padding: 6px 12px; font-size: 13.5px; }
  .mic { padding: 6px 12px; font-size: 14px; }
  input[type="search"] { width: 100%; }
  table { font-size: 13.5px; }
  th { padding: 6px; } td { padding: 8px 6px; }
  .btn { min-height: 40px; }
  .btn.small { min-height: 34px; }
  dialog { width: calc(100vw - 16px); max-width: none; max-height: calc(100dvh - 16px); overflow-y: auto; overscroll-behavior: contain; }
  dialog form { padding: 16px 16px 0; gap: 12px; }
  dialog h2 { font-size: 18px; }
  .dlg-actions { position: sticky; bottom: 0; background: var(--surface); margin-inline: -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
  .dlg-actions .btn { flex: 1; min-height: 44px; }
  .dlg-actions .spacer { display: none; }
  table.apilable, table.apilable tbody, table.apilable tfoot, table.apilable tr { display: block; width: 100%; }
  table.apilable thead { display: none; }
  table.apilable tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  table.apilable tbody tr:last-child { border-bottom: 0; }
  table.apilable tfoot tr { border-top: 2px solid var(--line); border-bottom: 0; }
  table.apilable td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 3px 0; border: 0; text-align: right; white-space: normal; }
  table.apilable td::before { content: attr(data-label); flex: none; color: var(--muted); font-size: 12.5px; font-family: var(--f-body); text-align: left; }
  table.apilable td.sin-etiqueta { justify-content: flex-start; text-align: left; }
  table.apilable td.sin-etiqueta::before { content: none; }
  table.apilable td.sin-etiqueta:empty { display: none; }
  table.apilable td > div { min-width: 0; overflow-wrap: anywhere; }
  table.apilable .lm-sub { text-align: inherit; }
  tr.click:hover td { background: none; }
}

/* Legal · Atención (avisos): tarjetas de lg-cand, historial de seg-hist; solo lo que falta para el diálogo. */
.av-card .cob { font-size: 13px; margin-right: 6px; }
.av-cuerpo { display: grid; gap: 12px; }
.av-faltas { display: grid; gap: 6px; }
.av-faltas > div { border-left: 3px solid var(--warn); padding: 2px 0 2px 10px; font-size: 14px; }
.av-faltas small { display: block; color: var(--muted); font-size: 12.5px; }
.av-resolver summary, .av-nueva summary { cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--accent); }
.av-nueva[open], .av-resolver[open] { border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; }
.av-cfg { display: grid; grid-template-columns: minmax(0, 1fr) 9rem 11rem auto; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.av-cfg small { display: block; color: var(--muted); font-size: 12px; }
.av-cfg input, .av-cfg select { padding: 6px 8px; font-size: 13.5px; width: 100%; }
.av-link { text-align: left; }
#cxLegal .cx-row { grid-template-columns: 4.6rem minmax(0, 1fr) 0; }
@media (max-width: 640px) { .av-cfg { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .av-cfg > div:first-child { grid-column: 1 / -1; } .av-cfg > span:empty { display: none; } }

/* Sin acceso: sesión válida sin módulos, o catálogo de empresas que no llegó. */
.sin-acceso { max-width: 560px; margin: 24px auto; display: grid; gap: 10px; }
.sin-acceso h2 { margin: 0; }
.sin-acceso p { margin: 0; font-size: 14.5px; line-height: 1.5; }

/* Odín Intelligence: consultas guiadas y resumen de hoy (reutiliza kpis, seg y cx-row). */
#cxIntel { display: grid; gap: 10px; }
.intel-cobertura { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--muted); }
.intel-fuente::before { content: "● "; }
.intel-fuente.listo::before { color: var(--good); } .intel-fuente.antiguo::before { color: var(--warn); } .intel-fuente.cargando::before { color: var(--warn); } .intel-fuente.error { color: var(--bad); } .intel-fuente.error::before { content: "✕ "; }
.intel-consultas { flex-wrap: wrap; max-width: 100%; }
.intel-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.intel-cuerpo .le-h { margin-top: 12px; }
#cxIntel .cx-row { grid-template-columns: 6.6rem minmax(0, 1fr) 0; }
@media (max-width: 640px) { .intel-consultas button { flex: 1 1 100%; text-align: left; } }

/* Pregúntale a Odín (pregunta.js): caja de pregunta, ejemplos y respuesta con referencias (reutiliza cx-row y fuente). */
#cxPregunta { display: grid; gap: 10px; }
.pregunta-form { display: flex; gap: 8px; }
.pregunta-form input { flex: 1; min-width: 0; border: 1px solid var(--line-2); background: var(--surface); color: var(--fg); border-radius: 10px; padding: 8px 12px; transition: border-color .15s, box-shadow .15s; }
.pregunta-ejemplos { display: flex; flex-wrap: wrap; gap: 6px; }
.pregunta-ejemplos:empty { display: none; }
.pregunta-ejemplos button { border: 1px solid var(--line); background: var(--sunk); color: var(--fg-2); border-radius: 999px; padding: 4px 11px; font-size: 12.5px; }
.pregunta-ejemplos button:hover { border-color: var(--gold); color: var(--fg); }
.pregunta-turno { border-top: 1px solid var(--line); padding-top: 10px; }
.pregunta-q { margin: 0; font-size: 13px; color: var(--muted); }
.pregunta-r { margin: 4px 0 0; font-size: 14.5px; line-height: 1.55; overflow-wrap: anywhere; }
.pregunta-ref { padding: 0 1px; color: var(--accent); font-weight: 600; }
.pregunta-refs { margin-top: 6px; }
#cxPregunta .cx-row { grid-template-columns: 2.6rem minmax(0, 1fr) 0; }

/* Reportes diarios (reportes.js): reutiliza kpis, intel-cobertura y cx-row. */
#cxReportes { display: grid; gap: 10px; }
#cxReportes .cx-row { grid-template-columns: 4.6rem minmax(0, 1fr) 0; }
.rep-pref { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: 13.5px; }
.rep-pref summary { cursor: pointer; color: var(--fg-2); font-weight: 600; }
.rep-pref[open] { display: grid; gap: 8px; }
.rep-fuentes { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.rep-op { display: inline-flex; align-items: center; gap: 6px; }

/* Propuestas de seguimiento (propuestas.js). */
#cxPropuestas { display: grid; gap: 10px; }
.prop-tarjeta { display: grid; gap: 4px; border-top: 1px solid var(--line); padding-top: 10px; }
.prop-tarjeta small { color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.prop-cab { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.prop-desc { margin: 0; font-size: 14px; color: var(--fg-2); overflow-wrap: anywhere; }
.prop-estado { font-size: 12px; white-space: nowrap; color: var(--muted); }
.prop-estado.pendiente { color: var(--warn); } .prop-estado.aprobada { color: var(--good); } .prop-estado.rechazada, .prop-estado.caducada { color: var(--bad); }
.prop-acc { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.prop-forma { display: grid; gap: 8px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.prop-forma label { display: grid; gap: 4px; font-size: 13px; color: var(--fg-2); }
.prop-forma input, .prop-forma select, .prop-forma textarea { border: 1px solid var(--line-2); background: var(--surface); color: var(--fg); border-radius: 10px; padding: 7px 10px; min-width: 0; }
.prop-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
@media (max-width: 640px) { .pregunta-form { flex-direction: column; } .pregunta-form .btn { width: 100%; } }

/* Legal · vista Empresa (una tabla por razón social) y vista Clientes (matriz de documentos) */
.lg-razon + .lg-razon { margin-top: 22px; }
.lg-razon h3, .lg-sub { margin: 0 0 8px; font-size: 16px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.lg-razon h3 small { font-family: var(--f-body); font-size: 12.5px; font-weight: 500; color: var(--muted); }
.lg-sub { margin-top: 20px; }
.lg-tabla tr.lg-grupo th { text-align: left; background: var(--sunk); color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 6px 10px; }
.lg-tabla tr.lg-grupo th span { margin-left: 8px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.lg-tabla tr.lg-grupo th .linkbtn { margin-left: 10px; text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.lg-matriz th, .lg-matriz td { text-align: center; }
.lg-matriz th:first-child, .lg-matriz td:first-child { text-align: left; }
.lg-cli-nombre { font-weight: 600; text-align: left; }
.lg-celda { position: relative; border: 0; background: none; font: inherit; font-size: 15px; line-height: 1; padding: 4px 6px; border-radius: 6px; cursor: pointer; color: var(--muted); }
.lg-celda span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.lg-celda.confirmado { color: var(--good); } .lg-celda.media { color: var(--warn); } .lg-celda.capturado { color: var(--muted); opacity: .8; font-size: 11.5px; }
.lg-celda:hover:not([disabled]), .lg-celda:focus-visible { background: var(--sunk); }
.lg-celda[disabled] { cursor: default; }
@media (max-width: 640px) {
  table.apilable tr.lg-grupo { padding: 0; border-bottom: 0; }
  table.apilable tr.lg-grupo th { display: block; margin-top: 8px; border-radius: 6px; }
  table.lg-matriz th, table.lg-matriz td { text-align: right; }
  .lg-celda span { position: static; width: auto; height: auto; clip: auto; margin-left: 6px; font-size: 12.5px; }
}
/* Legal · Por revisar: una tarjeta por documento emitido sin verificar, con un solo botón. */
.lg-rr-prog { display: grid; gap: 8px; margin-bottom: 14px; font-size: 14px; }
.lg-rr-barra { height: 8px; border-radius: 999px; background: var(--sunk); overflow: hidden; }
.lg-rr-barra span { display: block; height: 100%; background: var(--good); border-radius: 999px; transition: width .3s; }
.lg-rr { border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; display: grid; gap: 12px; background: var(--bg); }
.lg-rr + .lg-rr { margin-top: 12px; }
.lg-rr.lg-rr-hecha { opacity: .45; }
.lg-rr-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: start; }
.lg-rr-head b { font-weight: 600; font-size: 15.5px; display: block; }
.lg-rr-head small { color: var(--muted); font-size: 13px; }
.lg-rr-doc { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 10px 12px; border-radius: var(--r-sm); background: var(--sunk); font-size: 14px; }
.lg-rr-doc small { display: block; color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.lg-rr-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 10px 16px; }
.lg-rr-dato { display: grid; gap: 2px; font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.lg-rr-dato .label { display: block; }
.lg-rr-campo label small { font-weight: 500; }
.lg-rr-vence { display: grid; gap: 6px; }
.lg-rr-acc { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.lg-rr-acc .linkbtn { margin-left: auto; }
.lg-rr-nota { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
@media (max-width: 640px) {
  .lg-rr { padding: 12px; }
  .lg-rr-acc .btn { flex: 1 1 auto; text-align: center; }
  .lg-rr-acc .linkbtn { margin-left: 0; width: 100%; text-align: left; }
}
/* La matriz de clientes es ancha: se desplaza dentro de su recuadro en lugar de ensanchar la página. */
#view-legal > div > .panel, #lgLista { min-width: 0; }

/* Reportes diarios: reproductor del audio del reporte */
.rep-audio { width: 100%; max-width: 460px; height: 36px; margin: 2px 0 4px; }

/* Google por persona (google.js): botón del menú de la cuenta, invitación a vincular y filas de correo propio */
.user-pop .aj-btn span small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
.empty .btn { margin-top: 4px; }
.empty .cx-stale { font-size: 13px; }
.tb-mail { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) auto; gap: 6px 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.tb-mail:last-child { border-bottom: 0; }
.tb-mail .cx-t { color: var(--muted); font-family: var(--f-data); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.tb-mail-t { min-width: 0; overflow-wrap: anywhere; }
.tb-mail-t small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 400; }
.tb-mail.nuevo .tb-mail-t { font-weight: 600; }

/* Foto de perfil (perfil.js): en el botón de la cuenta y en su menú */
.user-menu summary.con-foto { overflow: hidden; }
.user-menu summary.con-foto svg { display: none; }
.user-menu summary .user-foto { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.user-pop .aj-btn .perfil-mini { position: relative; width: 26px; height: 26px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--sunk); color: var(--muted); margin: -4px -2px; }
.user-pop .aj-btn .perfil-mini svg { width: 15px; height: 15px; }
.user-pop .aj-btn .perfil-mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Categoría Usuario (perfil.js): foto, nombre y contraseña */
.us-foto { display: flex; align-items: center; gap: 16px; }
.us-avatar { position: relative; width: 84px; height: 84px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--sunk); color: var(--muted); border: 1px solid var(--line); }
.us-avatar svg { width: 38px; height: 38px; }
.us-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.us-foto-txt { display: grid; gap: 6px; min-width: 0; }
.us-foto-txt small { color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.us-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.us-form { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.us-form > small { color: var(--muted); font-size: 12.5px; margin-top: -4px; }
.us-pie { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.us-msg { font-size: 13px; color: var(--muted); }
.us-msg.ok { color: var(--good); }
.us-msg.fail { color: var(--bad); }

/* Oficina (oficina.js): plano de distribución redibujado a escala, con el estado de cada espacio (datos de demostración) */
.of { display: grid; gap: 16px; }
.of-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.of-titulo { font-size: 22px; margin: 0 0 4px; letter-spacing: -0.01em; }
.of-cabeza .status { margin: 0; }
.of-aviso { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; border-radius: 999px; padding: 4px 11px; white-space: nowrap; }
.of-aviso::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.of-demo { color: var(--warn); background: var(--warn-bg); }
.of-prov { color: var(--b-arcamexi); background: color-mix(in srgb, var(--b-arcamexi) 12%, var(--surface)); }
.of-principios { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 0; padding: 0; }
.of-principios li { font-size: 12.5px; color: var(--fg-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; background: var(--surface); }
.of .kpi-val small { font-size: 14px; font-weight: 500; color: var(--muted); }
.of .kpi .of-barra { margin-top: 6px; }
.of-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.of-herr { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.of-ampliar { display: none; }
.of-plano { width: 100%; }
.of-svg { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; }
.of-svg text { font-family: var(--f-body); }
.of-piso { fill: var(--sunk); }
.of-muro { fill: none; stroke: var(--fg-2); stroke-width: .12; stroke-linejoin: round; pointer-events: none; }
.of-esp polygon { stroke: var(--line-2); stroke-width: .05; cursor: pointer; transition: fill .15s, opacity .15s, stroke .15s; }
.of-esp.libre polygon { fill: var(--good-bg); }
.of-esp.uso polygon { fill: var(--accent-soft); }
.of-esp.lleno polygon { fill: var(--bad-bg); }
.of-esp.servicio polygon { fill: var(--surface); }
.of-esp:hover polygon { stroke: var(--fg-2); stroke-width: .08; }
.of-esp.sel polygon { stroke: var(--accent); stroke-width: .16; }
.of-esp:focus { outline: none; }
.of-esp:focus-visible polygon { stroke: var(--ring); stroke-width: .18; }
.of .atenuado { opacity: .28; }
.of-capa { pointer-events: none; transition: opacity .15s; }
.of-mueble { fill: none; stroke: var(--muted); stroke-width: .035; opacity: .6; }
.of-celosia { fill: none; stroke: var(--muted); stroke-width: .07; stroke-dasharray: .1 .13; }
.of-asiento { stroke-width: .045; }
.of-asiento.ocupado { fill: var(--accent); stroke: var(--accent); }
.of-asiento.libre { fill: var(--surface); stroke: var(--good); }
.of-etq { cursor: pointer; transition: opacity .15s; }
.of-nombre { font-size: .37px; font-weight: 600; fill: var(--fg); }
.of-cap { font-size: .29px; fill: var(--fg-2); }
.of-num { display: none; }
.of-num circle { fill: var(--fg); }
.of-num text { font-size: .62px; font-weight: 700; fill: var(--surface); }
.of-cota line { stroke: var(--muted); stroke-width: .025; }
.of-cota text { font-size: .3px; fill: var(--muted); }
.of-cota .of-entrada { font-size: .32px; font-weight: 600; fill: var(--fg-2); }
.of-barra { display: block; height: 6px; border-radius: 99px; background: var(--sunk); overflow: hidden; }
.of-barra i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
/* Detalle */
.of-detalle { display: grid; gap: 14px; position: sticky; top: 12px; }
.of-vacio { display: grid; gap: 4px; }
.of-vacio b { font-family: var(--f-display); font-size: 16px; }
.of-vacio span, .of-nota { color: var(--muted); font-size: 13px; line-height: 1.45; margin: 0; }
.of-leyenda { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; font-size: 13px; color: var(--fg-2); }
.of-leyenda i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -3px; margin-right: 7px; border: 1px solid var(--line-2); }
.of-leyenda i.libre { background: var(--good-bg); } .of-leyenda i.uso { background: var(--accent-soft); } .of-leyenda i.lleno { background: var(--bad-bg); }
.of-leyenda i.servicio { background: var(--surface); } .of-leyenda i.asiento { background: var(--accent); border-color: var(--accent); border-radius: 50%; }
.of-leyenda i.asiento-libre { background: var(--surface); border: 2px solid var(--good); border-radius: 50%; }
.of-det-cabeza { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.of-det-cabeza h3 { margin: 0 0 4px; font-family: var(--f-display); font-size: 17px; letter-spacing: 0; text-transform: none; color: var(--fg); }
.of-n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--fg); color: var(--surface); font-size: 12.5px; font-weight: 700; flex: none; }
.of-ocupa { display: grid; gap: 5px; } .of-ocupa small { color: var(--muted); font-size: 12.5px; }
.of-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 0; }
.of-datos dt { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.of-datos dd { margin: 2px 0 0; font-size: 14px; }
.of-reservas { display: grid; gap: 6px; font-size: 13.5px; }
.of-reservas ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.of-reservas li { padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.of-reservas li b { font-family: var(--f-data); font-variant-numeric: tabular-nums; font-weight: 600; }
.of-reservas li.en-curso { border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); }
/* Lista */
.of-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.of-grupo { display: grid; gap: 6px; align-content: start; }
.of-grupo h3 { margin: 0 0 2px; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.of-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left; width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--fg); font: inherit; cursor: pointer; transition: border-color .15s, background .15s, opacity .15s; }
.of-item:hover { border-color: var(--line-2); background: var(--bg); }
.of-item.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.of-item-t { display: grid; gap: 3px; min-width: 0; }
.of-item-t b { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.of-item-t small { color: var(--muted); font-size: 12.5px; }
.of-fuente { margin: 0; font-size: 12.5px; }
@media (max-width: 960px) {
  .of-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .of-detalle { position: static; }
}
@media (max-width: 640px) {
  .of-titulo { font-size: 19px; }
  .of-plano-panel { padding: 14px 12px; }
  .of-ampliar { display: inline-flex; }
  .of-plano:not(.ampliado) .of-nombre, .of-plano:not(.ampliado) .of-cap { display: none; }
  .of-plano:not(.ampliado) .of-num { display: inline; }
  .of-plano.ampliado { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .of-plano.ampliado .of-svg { width: 760px; max-width: none; }
  .of-lista { grid-template-columns: minmax(0, 1fr); }
  .of-datos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Oficina · vista de distribución provisional (oficina-distribucion.js): quién tiene su lugar en cada espacio */
.of-modos { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
.of-modos .status { margin: 0; font-size: 13px; max-width: 62ch; }
.of-esp.d-asignado polygon { fill: color-mix(in srgb, var(--b-arcamexi) 14%, var(--surface)); }
.of-esp.d-sin polygon { fill: var(--surface); }
.of-esp.d-servicio polygon { fill: var(--sunk); }
.of-tarjeta { fill: var(--surface); stroke: color-mix(in srgb, var(--b-arcamexi) 35%, var(--line)); stroke-width: .04; }
.of-rotulo { font-size: .29px; font-weight: 600; fill: var(--b-arcamexi); letter-spacing: .02em; }
.of-persona { font-size: .31px; font-weight: 600; fill: var(--fg); }
.of-funcion { font-size: .26px; fill: var(--fg-2); }
.of-leyenda i.d-asignado { background: color-mix(in srgb, var(--b-arcamexi) 14%, var(--surface)); }
.of-dist { display: grid; gap: 6px; font-size: 13.5px; }
.of-dist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.of-dist li { display: grid; gap: 1px; padding: 8px 10px; border: 1px solid var(--line); border-left: 3px solid var(--b-arcamexi); border-radius: var(--r-sm); }
.of-dist li span { color: var(--muted); font-size: 12.5px; }
.of-rot { font-size: 12px; font-weight: 600; color: var(--b-arcamexi); }
.of-quien { color: var(--fg); font-weight: 600; }
.of-item-t small + small { margin-top: -1px; }
@media (max-width: 640px) {
  .of-plano:not(.ampliado) .of-tarjeta, .of-plano:not(.ampliado) .of-rotulo, .of-plano:not(.ampliado) .of-persona, .of-plano:not(.ampliado) .of-funcion { display: none; }
  .of-modos .seg { width: 100%; }
  .of-modos .seg button { flex: 1; }
}
.of-correo { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-top: 2px; }
.of-correo-dir { font-family: var(--f-data); font-size: 12.5px; color: var(--fg-2); overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.of-conf { font-size: 11.5px; font-weight: 600; color: var(--good); background: var(--good-bg); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.of-nota.fail { color: var(--bad); }
.of-esp.d-pendiente polygon { fill: var(--surface); }

/* Proyección (tablero.js): de dónde sale cada cifra y renglones que se abren para ver sus movimientos */
.obj-puente { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; }
.obj-puente-col { display: grid; gap: 6px; align-content: start; min-width: 0; }
.obj-puente-col h3 { margin: 0 0 2px; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.obj-linea { border-radius: var(--r-sm); }
.obj-linea > summary, div.obj-linea { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 7px 8px; list-style: none; font-size: 14px; }
.obj-linea > summary { cursor: pointer; }
.obj-linea > summary::-webkit-details-marker { display: none; }
.obj-linea > summary:hover { background: var(--sunk); border-radius: var(--r-sm); }
.obj-linea > summary .obj-txt::after { content: " ▸"; color: var(--muted); }
.obj-linea[open] > summary .obj-txt::after { content: " ▾"; }
.obj-linea b { font-family: var(--f-data); font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.obj-linea small { color: var(--muted); font-weight: 400; }
.obj-sig { color: var(--muted); font-family: var(--f-data); text-align: center; }
.obj-linea.sub > summary { padding-left: 22px; font-size: 13.5px; color: var(--fg-2); }
.obj-linea.obj-base { background: var(--sunk); }
.obj-linea.obj-total { border-top: 2px solid var(--line-2); border-radius: 0; font-weight: 600; margin-top: 2px; }
.obj-linea.obj-pendiente { margin-top: 10px; background: var(--warn-bg); }
.obj-ok { margin: 2px 0 0; font-size: 13px; color: var(--good); }
.obj-ok::before { content: "✓ "; }
.obj-dif { margin: 2px 0 0; font-size: 13px; color: var(--bad); }
.obj-nota { margin: 0 0 10px; font-size: 13px; color: var(--muted); line-height: 1.45; }
.obj-movs { margin: 4px 0 8px; font-size: 13px; }
.obj-movs td { padding: 5px 8px; border-top: 1px solid var(--line); vertical-align: top; }
.obj-movs td small { display: block; color: var(--muted); font-size: 12px; }
.obj-movs td.num { white-space: nowrap; color: var(--muted); width: 4.5rem; }
.obj-vacio { margin: 4px 8px 8px; font-size: 13px; }
.obj-fila.click { cursor: pointer; }
.obj-fila.click:hover td { background: var(--sunk); }
.obj-fila:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.obj-flecha { display: inline-block; width: 1em; color: var(--muted); }
.obj-det > td { background: var(--bg); padding: 0 8px 4px; }
@media (max-width: 760px) { .obj-puente { grid-template-columns: minmax(0, 1fr); } }

/* Movimientos › Revisar ingresos (tablero.js) */
.rev-resumen { display: grid; gap: 6px; margin: 0 0 12px; font-size: 14px; }
.rev-montos { display: flex; flex-wrap: wrap; gap: 4px 18px; color: var(--muted); font-size: 13px; }
.rev-montos b { color: var(--fg); font-family: var(--f-data); font-weight: 600; }
.rev-solo { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fg-2); }
.rev-tabla td { vertical-align: top; }
.rev-tabla td small { display: block; font-size: 12.5px; margin-top: 2px; }
.rev-tabla select { max-width: 15rem; font-size: 13px; padding: 4px 6px; }
.rev-tabla tr.rev-ok td { background: color-mix(in srgb, var(--good-bg) 45%, transparent); }
.rev-marca { display: block; font-size: 11.5px; color: var(--good); margin-top: 2px; }
/* Ingreso que cuenta en la Proyección de otro mes (mes de servicio distinto del del banco). */
.mes-servicio { display: block; font-size: 11.5px; color: var(--muted); font-style: italic; margin-top: 2px; }
.rev-tabla .rev-concepto { min-width: 180px; }
/* En el teléfono cada ingreso es una tarjeta: fecha, concepto y monto arriba; categoría y verificación debajo, sin desplazar de lado. */
@media (max-width: 640px) {
  .rev-tabla thead { display: none; }
  .rev-tabla, .rev-tabla tbody { display: block; }
  .rev-tabla tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 10px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
  .rev-tabla tr:last-child { border-bottom: 0; }
  .rev-tabla td { display: block; padding: 0; border: 0; }
  .rev-tabla .rev-concepto { min-width: 0; }
  .rev-tabla td:nth-child(4) { grid-column: 3; grid-row: 1; }
  .rev-tabla td:nth-child(3), .rev-tabla td:nth-child(5) { grid-column: 1 / -1; }
  .rev-tabla select { max-width: 100%; width: 100%; }
}

/* Proyección › Otros ingresos y Otros egresos (tablero.js): lo que no estaba presupuestado. */
.otros-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 10px; }
.otros-total b { font-family: var(--f-data); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.otros-total span { color: var(--muted); font-size: 13px; }
.otros-motivo { display: block; color: var(--muted); font-size: 12px; margin: 2px 0 0 1em; }
/* Proyección: tres secciones (Ingresos, Egresos y Reparto de utilidades). */
.obj-seccion { display: grid; gap: 14px; }
.obj-seccion[hidden] { display: none; }
.obj-seccion + .obj-seccion { margin-top: 10px; padding-top: 22px; border-top: 1px solid var(--line-2); }
.obj-seccion-titulo { font-size: 22px; }
/* Proyección: el desglose del renglón «Sin concepto» se acomoda en varias líneas dentro de su panel. */
.obj-extra-det { display: block; margin: 3px 0 0 1em; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
/* Proyección: la columna Avance de las tablas de comparación. */
.obj-avance { min-width: 90px; }
/* Proyección › Ingresos por servicio: cada renglón en una línea y sin desplazar de lado. El tamaño sale del ancho del
   cuadro, no de la pantalla: en pantalla ancha la tabla vive en la columna angosta. Si no cabe, se quita la barra de avance. */
#objServicios, #objEgresos { container-type: inline-size; }
.obj-compacta { font-size: clamp(11.5px, 3.75cqw, 14px); }
.obj-compacta th { padding: 6px 4px; font-size: clamp(9.5px, 2.9cqw, 11.5px); letter-spacing: .03em; }
.obj-compacta > * > tr:not(.obj-det) > td { padding-left: 4px; padding-right: 4px; white-space: nowrap; }
.obj-compacta > * > tr:not(.obj-det) > td.obj-extra, .obj-compacta .obj-extra .pill { white-space: normal; }
.obj-compacta .obj-extra .pill { max-width: calc(100% - 1.2em); }
.obj-compacta .obj-avance { min-width: 0; width: 13%; }
.obj-compacta .avance { min-width: 0; }
.obj-compacta .pill { font-size: inherit; padding: 1px 6px 1px 5px; }
.obj-compacta .obj-movs td { overflow-wrap: anywhere; }
@container (max-width: 560px) { .obj-compacta .obj-nmov { display: none; } }
@container (max-width: 400px) { .obj-compacta .obj-avance { display: none; } }
@container (max-width: 340px) { .obj-compacta > * > tr:not(.obj-det) > td:first-child { white-space: normal; overflow-wrap: anywhere; } } /* un nombre largo baja de línea antes que salirse */
@container (max-width: 280px) { /* teléfonos de 320 px */
  .obj-compacta { font-size: 10.75px; }
  .obj-compacta th { padding-left: 2px; padding-right: 2px; }
  .obj-compacta > * > tr:not(.obj-det) > td { padding-left: 2px; padding-right: 2px; }
  .obj-compacta .obj-flecha { width: .8em; }
}

/* Visualizador › Flujo de dinero (flujo.js): diagrama Sankey. Colores validados con daltonismo simulado, uno para cada
   tema y contra la superficie de cada uno. */
:root { --sk-entra: #2f6db5; --sk-sale: #b4832a; --sk-queda: #14876a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sk-entra: #4a8cdc; --sk-sale: #b98a2e; --sk-queda: #1f9f7c; } }
:root[data-theme="dark"] { --sk-entra: #4a8cdc; --sk-sale: #b98a2e; --sk-queda: #1f9f7c; }
.sk-entra { --c: var(--sk-entra); } .sk-sale { --c: var(--sk-sale); } .sk-queda { --c: var(--sk-queda); } .sk-falta { --c: var(--bad); }
.sk-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sk-herr { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.sk-leyenda { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--fg-2); }
.sk-leyenda li { display: inline-flex; align-items: center; gap: 6px; }
.sk-leyenda li[hidden] { display: none; }
.sk-leyenda i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.sk-lienzo { position: relative; }
.sk-svg { display: block; max-width: 100%; }
.sk-svg text { font-family: var(--f-body); }
.sk-cab { font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; fill: var(--muted); }
.sk-cinta { fill: var(--c); opacity: .3; transition: opacity .15s; }
.sk-hub { fill: var(--muted); }
.sk-barra { fill: var(--c); }
.sk-hit { fill: transparent; }
.sk-nodo.abre, .sk-cinta { cursor: pointer; }
.sk-nodo:focus { outline: none; }
.sk-nodo:focus-visible .sk-hit { stroke: var(--ring); stroke-width: 2; }
.sk-nombre { font-size: 13px; font-weight: 600; fill: var(--fg); }
.sk-monto { font-size: 12px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.sk-svg.sk-estrecho .sk-nombre, .sk-svg.sk-estrecho .sk-monto { paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.sk-svg.sk-con-foco .sk-cinta, .sk-svg.sk-con-sel .sk-cinta { opacity: .12; }
.sk-svg .sk-cinta.foco, .sk-svg .sk-cinta.sel { opacity: .62; }
.sk-tip { position: absolute; z-index: 5; display: grid; gap: 1px; max-width: 240px; padding: 7px 10px; pointer-events: none; font-size: 13px; color: var(--fg-2); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-sm); box-shadow: var(--shadow-hi); }
.sk-tip[hidden] { display: none; }
.sk-tip b { color: var(--fg); }
.sk-tip span { font-variant-numeric: tabular-nums; }
.sk-tip-mov { color: var(--muted); font-size: 12px; }
.sk-detalle { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.sk-detalle-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.sk-detalle-cab span { display: block; color: var(--muted); font-size: 13px; }
.bbva-cuerpo { display: grid; gap: 20px; }
.bbva-cuerpo[hidden] { display: none; }
.bbva-grupo { border-top: 1px solid var(--line); padding: 8px 0; }
.bbva-grupo:first-child { border-top: 0; }
.bbva-grupo > summary { display: flex; justify-content: space-between; gap: 12px; cursor: pointer; font-weight: 600; }
.bbva-grupo > summary span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bbva-grupo > summary small { color: var(--muted); font-weight: 400; }
.sk-tabla > summary { cursor: pointer; font-weight: 600; }
.sk-tabla[open] > summary { margin-bottom: 12px; }
@media (max-width: 520px) { .sk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sk-kpis .kpi:last-child { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .sk-cinta { transition: none; } }

/* Recursos Humanos: Nómina, Histórico, Finiquitos y Alertas (rh-nomina.js). Reutiliza kpis, lg-filtros, seg y tablas apilables. */
.rn-vista { display: grid; gap: 16px; min-width: 0; }
.rn-kpis { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.rn-cabeza { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end; justify-content: space-between; }
.rn-cabeza .lg-filtros { margin-bottom: 0; flex: 1 1 220px; }
.rn-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.rn-avisos > summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
.rn-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.rn-dias { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 4px 16px; font-size: 13.5px; }
.rn-quincena { display: flex; gap: 6px; }
.rn-quincena input, .rn-quincena select { min-width: 0; padding: 4px 6px; font-size: 13px; }
dialog.rn-dlg { width: min(860px, calc(100vw - 16px)); }
.rn-dlg .aj { grid-template-columns: minmax(0, 1fr); } /* la tabla de archivos no ensancha el diálogo en el teléfono */
@media (max-width: 720px) { .rn-dlg .aj { padding-bottom: 0; } .rn-dlg .rn-fila-avisos td { display: block; } .rn-quincena input { width: 150px; } }
.rn-graficas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-bottom: 16px; }
.rn-graf { margin: 0; min-width: 0; }
.rn-graf figcaption { font-family: var(--f-display); font-weight: 600; font-size: 14px; margin-bottom: 22px; }
.rn-barras { display: flex; align-items: flex-end; gap: 2px; height: 120px; border-bottom: 1px solid var(--line); }
.rn-col { position: relative; flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; }
.rn-barra { display: block; width: 100%; max-width: 22px; margin-inline: auto; background: color-mix(in srgb, var(--accent) 55%, var(--surface)); border-radius: 4px 4px 0 0; }
.rn-barra.ultima, .rn-col:hover .rn-barra { background: var(--accent); }
.rn-val { position: absolute; bottom: 100%; right: 0; font-size: 11.5px; color: var(--muted); white-space: nowrap; padding-bottom: 2px; }
.rn-col:first-child .rn-val { right: auto; left: 0; }
.rn-ejes { display: flex; gap: 2px; margin-top: 4px; }
.rn-ejes span { flex: 1 1 0; min-width: 0; font-size: 10.5px; color: var(--muted); text-align: center; white-space: nowrap; }
.rn-tentativo { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); background: var(--warn-bg); font-size: 14px; line-height: 1.5; }
.rn-supuestos { margin: 0 0 18px; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
.rn-supuestos b { color: var(--fg); font-weight: 600; }