:root{
  --ink:#101c42; --muted:#66728d; --teal:#009f9b; --red:#ec2535; --orange:#ef9600;
  --line:#e6eaf2; --canvas:#f8fafc; --card:#fff; --shadow:0 8px 24px rgba(32,49,83,.08);
  /* Escala de esquinas: chip/insignia, botón/campo, tarjeta, panel grande, píldora. */
  --r-xs:8px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-pill:999px;
  /* Escala de sombras (elevación): reposo, realzado al pasar el mouse,
     flotante (menús y globos), y el modal/cajón, que es el más alto de todos.
     Antes cada cuadro traía su propia sombra escrita a mano —46 variantes
     distintas entre app.css y modal.css, casi iguales pero no iguales—, y
     esa diferencia mínima es lo que hace que una pantalla se sienta hecha
     de piezas sueltas en vez de un solo sistema. */
  --e1:0 1px 2px rgba(16,28,66,.05), 0 6px 16px rgba(16,28,66,.06);
  --e2:0 4px 10px rgba(16,28,66,.08), 0 16px 32px rgba(16,28,66,.10);
  --e3:0 10px 26px rgba(16,28,66,.13), 0 2px 8px rgba(16,28,66,.06);
  --e4:0 26px 64px rgba(16,28,66,.20), 0 6px 18px rgba(16,28,66,.08);
  /* Un solo compás de movimiento para toda la casa: la curva con un poquito
     de rebote que ya se usaba en el cajón y en la barra lateral, ahora con
     nombre, y tres duraciones para lo instantáneo, lo normal y lo que debe
     sentirse con más peso. */
  --ease:cubic-bezier(.16,1,.3,1);
  /* Una segunda curva, para lo que se ABRE en vez de entrar. La de arriba
     hace el 90 % del recorrido en el primer tercio del tiempo: perfecta para
     que algo aparezca y aterrice, pero al abrir un buscador se siente de
     golpe, porque el cuadro ya está casi entero antes de que uno lo note.
     Esta reparte el movimiento parejo y frena al final. */
  --ease-abrir:cubic-bezier(.4,0,.2,1);
  --dur-1:120ms; --dur-2:200ms; --dur-3:360ms;
  font-family:Inter,ui-sans-serif,system-ui,sans-serif; color:var(--ink); background:var(--canvas);
}
*{ box-sizing:border-box; }
body{ margin:0; background:var(--canvas); font-size:14px; }
button,
input,
select,
textarea{ font:inherit; }
button{ cursor:pointer; }
.app-shell{ min-height:100vh; background:var(--canvas); }
.sidebar{ position:fixed; inset:0 auto 0 0; width:220px; z-index:4; padding:22px 12px; display:flex; flex-direction:column; overflow-y:auto; overflow-x:hidden; background:#fff; border-right:1px solid var(--line); }
.brand{ height:148px; text-align:center; }
.brand img{ width:130px; }
.sidebar nav{ display:grid; gap:6px; }
.nav-item{ position:relative; isolation:isolate; height:48px; display:flex; align-items:center; gap:15px; padding:0 14px; border:0; border-radius:var(--r-sm); background:transparent; color:var(--ink); text-align:left; font-weight:600; transition:transform var(--dur-2) var(--ease), background var(--dur-2) ease, box-shadow var(--dur-2) ease; }
.nav-item span{ width:23px; color:#66738e; font-size:21px; text-align:center; transition:transform .2s ease; }
.nav-item.active{ padding-left:10px; color:var(--teal); background:#e7f7f5; border-left:4px solid var(--teal); }

/* Al pasar el mouse crece una barrita de acento a la izquierda y el ícono se
   desplaza: se realza sin el destello de color que cruzaba el botón. */
.nav-item::before{ content:""; position:absolute; left:0; top:50%; width:3px; height:0; border-radius:0 3px 3px 0; background:var(--teal); transform:translateY(-50%); transition:height .26s cubic-bezier(.16,1,.3,1); pointer-events:none; }
.nav-item:hover{ background:#f3f6fa; transform:translateY(-2px); box-shadow:0 8px 16px rgba(16,28,66,.1); }
.nav-item:hover span{ transform:translateX(3px) scale(1.06); }
.nav-item:hover::before{ height:58%; }
.nav-item.active::before{ display:none; }
.nav-item.active:hover{ background:#e7f7f5; }
.side-foot{ margin-top:auto; display:grid; gap:10px; color:#8c97ae; text-align:center; font-size:11px; padding-top:14px; }
/* Cerrar sesión, al pie de la barra. Solo existe cuando hay sesión abierta,
   así que en una planilla sin cuentas la barra queda exactamente como antes.
   Discreto a propósito: es de irse, no de trabajar. */
.side-salir{ display:flex; align-items:center; justify-content:center; gap:7px; min-height:38px; padding:0 10px; border:1px solid var(--line); border-radius:var(--r-sm); background:transparent; color:var(--muted); font-size:12.5px; font-weight:600; cursor:pointer; transition:background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); }
.side-salir svg{ width:15px; height:15px; }
[data-theme="dark"] .side-salir{ color:#9aa6bd; }
.side-salir:hover{ border-color:color-mix(in srgb, var(--red) 40%, transparent); background:color-mix(in srgb, var(--red) 8%, transparent); color:var(--red); }
.content{ min-height:100vh; max-width:1800px; margin-left:220px; padding:38px 48px 42px; }
.page-heading{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:22px; }.page-heading h1{ margin:0 0 6px; font-size:32px; font-weight:630; letter-spacing:-.018em; }.page-heading p{ margin:0; color:#60708e; font-size:16px; }
.button,
.select-button{ min-height:42px; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:0 17px; border:1px solid transparent; border-radius:var(--r-sm); font-weight:700; white-space:nowrap; transition:transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease), background var(--dur-2) ease, border-color var(--dur-2) ease, filter var(--dur-2) ease; }
.button b{ display:grid; place-items:center; line-height:0; }
.button b svg{ width:18px; height:18px; }
.button.primary{ color:#fff; background:linear-gradient(135deg,var(--teal),#00b4ae); box-shadow:0 6px 13px rgba(0,159,155,.19); }
.button:not(:disabled):hover{ transform:translateY(-1px); filter:brightness(1.02); }
.button.primary:not(:disabled):hover{ box-shadow:0 10px 24px rgba(0,159,155,.3); }
.button:not(:disabled):active{ transform:translateY(0) scale(.97); filter:none; }
.select-button:not(:disabled):hover{ transform:translateY(-1px); border-color:#c7d0e0; }
.select-button:not(:disabled):active{ transform:translateY(0) scale(.98); }.button.outline,
.select-button{ color:var(--ink); background:#fff; border-color:#dce2ec; }.button.quiet{ color:var(--ink); background:#fff; border-color:#e6eaf1; box-shadow:var(--shadow); }.button.quiet[data-action="config"]{ transition:transform .22s ease, box-shadow .22s ease; }.button.quiet[data-action="config"]:hover{ transform:translateY(-4px); box-shadow:0 14px 26px rgba(16,28,66,.16); }.button.quiet[data-action="config"] svg{ transition:transform .5s ease; }.button.quiet[data-action="config"]:hover svg{ transform:rotate(100deg); }.button.danger-outline{ color:#f23b47; background:#fff; border-color:#ff6e76; }.button-group{ display:flex; gap:11px; }
.hero{ position:relative; height:148px; display:flex; align-items:center; gap:27px; padding:26px; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--e1); }.hero:after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 45%,rgba(239,245,244,.9)); }.hero-icon{ z-index:1; width:76px; height:76px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; color:var(--teal); background:#e2f7f4; font-size:37px; }.hero h2,
.hero p{ position:relative; z-index:1; max-width:440px; }.hero h2{ margin:0 0 8px; font-size:18px; }.hero p{ margin:0; color:#63708d; line-height:1.5; }.hero.purple .hero-icon{ color:#823dff; background:#f1e8ff; }.hero.red .hero-icon{ color:#ff3c45; background:#ffebec; }.hero.orange .hero-icon{ color:#f4a000; background:#fff2d9; }.hero-scene{ z-index:1; margin-left:auto; color:#80ada8; font-size:55px; opacity:.6; }
.toolbar{ display:flex; align-items:center; gap:12px; margin:20px 0; }.search{ min-width:260px; height:42px; display:flex; align-items:center; gap:10px; padding:0 13px; color:#70809b; background:#fff; border:1px solid #dce2ec; border-radius:var(--r-sm); transition:border-color var(--dur-2) ease, box-shadow var(--dur-2) ease; }
.search:focus-within{ border-color:var(--teal); box-shadow:0 0 0 3px color-mix(in srgb, var(--teal) 16%, transparent); }.search input{ width:100%; border:0; outline:0; color:var(--ink); background:transparent; }.segmented{ display:flex; overflow:hidden; background:#fff; border:1px solid #edf0f5; border-radius:8px; }.segmented button{ padding:11px 16px; border:0; border-right:1px solid #edf0f5; background:#fff; color:#50607e; }.segmented .on{ color:#fff; background:var(--teal); }
.liquidation-picker{ display:flex; align-items:center; gap:8px; color:#596784; font-size:12px; font-weight:700; }.liquidation-picker select{ height:42px; min-width:180px; padding:0 12px; border:1px solid #dce2ec; border-radius:7px; color:var(--ink); background:#fff; outline-color:var(--teal); }
.data-area,
.detail-panel,
.receipt-side article,
.chart-card,
.available-reports,
.report-actions,
.employee-list,
.file-detail,
.agui-overview>article,
.metrics-strip,
.selected-summary,
.selected-person-bar{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--e1); transition:box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); }.data-area{ overflow:auto; }.data-area table,
.file-detail table{ width:100%; border-collapse:collapse; }.data-area th,
.file-detail th{ padding:13px 18px; color:#55627e; text-align:left; font-size:12px; font-weight:600; white-space:nowrap; }.data-area td,
.file-detail td{ padding:12px 18px; color:#182344; border-top:1px solid #edf0f4; font-size:13px; }.selected-row td{ background:#f5fcfb; }.danger-row td{ background:#fffafa; }.orange-row td{ background:#fffdf8; }.person-cell{ display:flex; align-items:center; gap:12px; padding:0; border:0; color:inherit; background:transparent; text-align:left; }.person-cell span,
.detail-person span{ display:grid; gap:4px; }.person-cell small,
.detail-person small{ color:#66748f; }.avatar{ width:45px; height:45px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; font-size:17px; font-weight:700; }.badge{ width:max-content; display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:var(--r-pill); font-size:11.5px; font-weight:650; letter-spacing:.01em; white-space:nowrap; }.badge i{ width:8px; height:8px; border-radius:50%; background:currentColor; }.badge.success{ color:#07884c; background:#e5f8ee; }.badge.warning{ color:#a9720a; background:#f7ecd6; }.badge.danger{ color:#f2333e; background:#ffebed; }.badge.muted{ color:#6c778e; background:#f0f2f5; }.badge.info{ color:#087ee9; background:#e7f4ff; }.badge.teal{ color:#00726f; background:#e0f5f4; }.more{ width:40px; height:40px; border:1px solid #dce2ec; border-radius:var(--r-sm); color:var(--ink); background:#fff; font-weight:800; transition:transform var(--dur-1) var(--ease), background var(--dur-2) ease, border-color var(--dur-2) ease, box-shadow var(--dur-2) ease; }
.more:hover{ background:#f4f7fb; border-color:#c9d3e2; box-shadow:var(--e1); }
.more:active{ transform:scale(.94); }.table-footer{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:19px; color:#66738e; font-size:12px; }.table-footer span b{ padding:9px 13px; border-radius:7px; color:#fff; background:var(--teal); }
.stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin:18px 0; }.stat-card{ min-height:98px; display:flex; align-items:center; gap:17px; padding:18px; background:#fff; border:1px solid var(--line); border-radius:9px; box-shadow:var(--shadow); }.stat-icon{ width:57px; height:57px; display:grid; place-items:center; border-radius:50%; color:var(--teal); background:#e0f7f4; font-size:30px; }.stat-card.red .stat-icon{ color:#ff3d46; background:#ffe5e7; }.stat-card.blue .stat-icon{ color:#078cf2; background:#e5f2ff; }.stat-card.orange .stat-icon{ color:#ef9600; background:#fff1db; }.stat-card.purple .stat-icon{ color:#823dff; background:#f1e8ff; }.stat-card small{ display:block; margin-bottom:5px; color:#53617d; }.stat-card strong{ font-size:23px; }
.selected-summary{ display:flex; gap:28px; align-items:center; padding:18px 22px; margin:18px 0; }.selected-person{ min-width:360px; padding-right:25px; border-right:1px solid #e7ebf1; }.selected-person>small{ display:block; margin-bottom:12px; color:var(--teal); }.selected-person>div{ display:flex; align-items:center; gap:16px; }.selected-person h2{ margin:0; font-size:22px; }.selected-person p{ margin:5px 0; color:#596784; }.metric-group{ flex:1; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }.metric{ display:grid; grid-template-columns:48px 1fr; align-items:center; padding:12px; border:1px solid #e9edf3; border-radius:8px; }.metric>span{ grid-row:span 2; width:46px; height:46px; display:grid; place-items:center; border-radius:12px; color:#7e43e7; background:#f1e8ff; font-size:25px; }.metric>span.green{ color:#0a9e5c; background:#e6f8ef; }.metric>span.orange{ color:#f39a00; background:#fff2dc; }.metric>span.red{ color:#ff4350; background:#ffe9eb; }.metric>span.blue{ color:#0987ed; background:#e5f3ff; }.metric small{ color:#5d6985; }.metric strong{ font-size:21px; }.split-table{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:18px; }.detail-panel{ padding:24px; }.detail-panel h2{ margin:0 0 21px; font-size:17px; }.detail-panel h3{ font-size:17px; }.detail-person{ display:flex; align-items:center; gap:12px; padding-bottom:17px; margin-bottom:13px; border-bottom:1px solid #e5e9ef; }.detail-panel dl,
.receipt-side dl{ display:grid; grid-template-columns:1fr auto; gap:14px 10px; margin:0 0 20px; }.detail-panel dt,
.receipt-side dt{ color:#62708d; }.detail-panel dd,
.receipt-side dd{ margin:0; text-align:right; font-weight:600; }.good{ color:#078e4d; }.bad{ color:#ec2535!important; }.detail-panel .button{ width:100%; margin-top:10px; }.notice{ display:flex; align-items:center; gap:9px; padding:12px 15px; border-radius:7px; font-size:12px; }.notice.warning{ color:#9a6213; background:#fff8ea; }.notice.info{ color:#1471d7; background:#eef7ff; }
.agui-overview{ display:grid; grid-template-columns:410px 1fr; gap:18px; margin:18px 0; }.agui-overview>article{ display:flex; align-items:center; gap:14px; padding:17px; }.agui-overview>article>span{ width:56px; height:56px; display:grid; place-items:center; border-radius:50%; color:#f39a00; background:#fff2d9; font-size:28px; }.agui-overview b{ display:block; margin:3px 0; font-size:17px; }.agui-overview p{ margin:0; color:#64718c; font-size:12px; }.agui-overview .select-button{ margin-left:auto; }.metrics-strip{ display:grid; grid-template-columns:repeat(4,1fr); padding:13px; }.metrics-strip span{ display:flex; align-items:center; justify-content:center; gap:10px; color:var(--teal); border-right:1px solid #e6eaf1; font-size:28px; }.metrics-strip b{ color:#596783; font-size:12px; font-weight:500; }.metrics-strip strong{ color:var(--ink); font-size:19px; }.selected-person-bar{ display:flex; align-items:center; gap:13px; padding:12px 17px; }.selected-person-bar>small{ align-self:flex-start; color:#087e82; }.selected-person-bar span{ display:grid; gap:3px; }.selected-person-bar .badge{ margin-left:auto; }.selected-person-bar p{ margin:0 18px; color:#586682; }
.report-filter{ display:flex; align-items:center; gap:20px; padding:16px; margin:18px 0; background:#fff; border:1px solid var(--line); border-radius:9px; box-shadow:var(--shadow); }.report-filter label{ flex:1; display:flex; align-items:center; gap:12px; }.report-filter button:not(.button){ width:100%; padding:11px 14px; border:1px solid #dce2ec; border-radius:7px; color:var(--ink); background:#fff; text-align:left; }.report-grid{ display:grid; grid-template-columns:minmax(0,2.1fr) 360px; gap:18px; }.chart-card,
.available-reports,
.report-actions{ padding:20px; }.chart-card h2,
.available-reports h2,
.data-area h2{ margin:0 0 18px; font-size:17px; }.legend{ float:right; margin-top:-40px; display:flex; gap:22px; color:#53617e; font-size:12px; }.bar-chart{ height:228px; display:flex; align-items:end; gap:38px; padding:15px 22px 30px; border-bottom:1px solid #dfe5ed; border-left:1px solid #dfe5ed; background:repeating-linear-gradient(to bottom,transparent 0,transparent 36px,#e8edf3 37px); }.bar-chart>div{ position:relative; height:100%; flex:1; display:flex; align-items:end; justify-content:center; }.bar-chart i{ width:42%; background:linear-gradient(#00aaa5,#009792); border-radius:4px 4px 0 0; }.bar-chart em{ position:absolute; width:10px; height:10px; border:3px solid #ff8285; border-radius:50%; background:#fff; }.bar-chart small{ position:absolute; bottom:-26px; white-space:nowrap; }.available-reports button{ width:100%; display:flex; justify-content:space-between; padding:14px; border:0; border-bottom:1px solid #e7ebf0; color:var(--ink); background:#fff; text-align:left; }.available-reports button:first-of-type{ color:var(--teal); background:#e9f9f7; }.report-table{ padding:20px; }.report-actions{ display:grid; align-content:start; gap:12px; }.report-actions p{ margin:0; color:#315787; }.report-actions small{ color:#63708e; line-height:1.5; }
.files-layout{ display:grid; grid-template-columns:365px minmax(0,1fr); gap:18px; }.employee-list{ display:grid; align-content:start; gap:10px; padding:17px; }.employee-list h2{ margin:0 0 8px; font-size:17px; }.file-person{ display:flex; align-items:center; gap:12px; padding:13px; border:1px solid #edf0f4; border-radius:8px; color:var(--ink); background:#fff; text-align:left; }.file-person.selected{ border-color:var(--teal); background:#f2fdfb; }.file-person span{ flex:1; display:grid; gap:4px; }.file-person small{ color:#687590; }.file-detail{ padding:17px; }.file-detail>header{ display:flex; align-items:center; gap:15px; margin-bottom:17px; }.file-detail>header h2{ margin:0; font-size:22px; }.file-detail>header p,
.file-detail>header small{ margin:4px 0; color:#63718e; }.file-detail>header .badge{ margin-left:auto; }.file-tabs{ display:flex; gap:10px; margin-bottom:13px; }.file-tabs button{ padding:8px 13px; border:1px solid #e6ebf1; border-radius:7px; color:#34435f; background:#fff; }.file-tabs button.on{ color:#fff; background:var(--teal); }.pdf{ padding:3px; border:1px solid #f33846; border-radius:3px; color:#f33846; font-size:9px; }.dropzone{ width:100%; margin:12px 0; padding:19px; border:1px dashed #9fbed1; border-radius:7px; color:#63718d; background:#fbfdff; text-align:left; }.dropzone b{ float:right; padding:7px; border:1px solid var(--teal); border-radius:5px; color:var(--teal); }.company-form{ display:grid; grid-template-columns:140px 1fr; gap:0 16px; }.company-form h2{ grid-column:1/-1; }.company-logo{ grid-row:span 5; text-align:center; }.company-logo img{ width:105px; display:block; margin:10px auto 12px; }.company-form label{ display:grid; grid-template-columns:140px 1fr; align-items:center; padding:8px 0; border-bottom:1px solid #edf0f4; color:#586681; font-size:12px; }.company-form input,
.form-grid input,
.form-grid select,
.form-grid textarea{ padding:10px; border:1px solid #dce2ec; border-radius:7px; outline-color:var(--teal); color:var(--ink); background:#fff; }.company-form input{ padding:3px; border:0; font-weight:700; }.company-form .button{ grid-column:2; justify-self:end; margin-top:14px; }
.welcome{ position:relative; min-height:100vh; width:100%; display:flex; flex-direction:column; align-items:center; overflow:visible; margin:0; padding:36px 60px 86px; background:radial-gradient(circle at 7% 6%,#dff3f2 0,transparent 26%),radial-gradient(circle at 97% 15%,#effafa 0,transparent 29%),#fff; }.welcome-inner{ display:flex; flex-direction:column; align-items:center; width:100%; margin:auto; }.settings-float{ position:absolute; z-index:2; top:40px; right:55px; display:grid; gap:5px; padding:14px 18px; border:0; border-radius:15px; color:var(--ink); background:#fff; box-shadow:var(--shadow); transition:transform .22s ease, box-shadow .22s ease; }.settings-float:hover{ transform:translateY(-4px); box-shadow:0 14px 26px rgba(16,28,66,.16); }.settings-float svg{ transition:transform .5s ease; }.settings-float:hover svg{ transform:rotate(100deg); }.welcome-rights{ position:absolute; left:0; right:0; bottom:26px; z-index:1; margin:0; color:#93a0b8; font-size:12px; letter-spacing:.02em; text-align:center; }.welcome-copy{ z-index:1; max-width:650px; margin-top:0; text-align:center; }.welcome-copy img{ width:190px; max-height:190px; margin-bottom:14px; object-fit:contain; }.welcome-copy h1{ margin:0; font-size:38px; }.welcome-copy h2{ margin:8px 0; color:#66738f; font-size:22px; font-weight:500; }.welcome-copy i{ display:block; width:42px; height:3px; margin:14px auto; background:var(--teal); }.welcome-copy p{ margin:0; color:#687590; font-size:17px; line-height:1.5; }.welcome-modules{ z-index:1; width:min(700px,100%); display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:38px; transition:width .25s ease; }.welcome-module{ aspect-ratio:1/1.22; display:grid; align-content:center; justify-items:center; gap:18px; border:1px solid #edf0f3; border-radius:16px; color:var(--ink); background:#fff; box-shadow:var(--shadow); transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.welcome-module b{ font-size:13.5px; font-weight:590; letter-spacing:-.005em; }.welcome-module:hover{ transform:translateY(-7px) scale(1.045); box-shadow:0 18px 30px rgba(16,28,66,.14); border-color:#c9ecea; }.welcome-module:active{ transform:translateY(-3px) scale(1.015); }.welcome-module span{ width:68px; height:68px; display:grid; place-items:center; border-radius:22px; color:var(--teal); background:#e2f7f4; font-size:34px; transition:transform .22s ease; }.welcome-module:hover span{ transform:scale(1.1) rotate(-4deg); }.welcome-module.vacaciones span{ color:#8242e9; background:#f0e8ff; }.welcome-module.aguinaldos span{ color:#a9720a; background:#f7ecd6; }.welcome-module.liquidaciones span{ color:#ff4350; background:#ffe7e8; }.welcome-module.reportes span{ color:#8642e9; background:#f0e9ff; }.welcome-module.expedientes span{ color:#718096; background:#f0f1f3; }
/* Inicio: ventana de escritorio con espacio de sobra -> los 8 accesos van en una sola fila. Ventana de escritorio más compacta -> 4 arriba y 4 abajo. Sin variantes para tablet ni celular. */
@media (min-width:1120px) { .welcome{ padding:20px 60px 58px; }.welcome-copy img{ width:150px; max-height:150px; margin-bottom:8px; }.welcome-copy h1{ font-size:32px; }.welcome-copy h2{ margin:6px 0; font-size:19px; }.welcome-copy i{ margin:9px auto; }.welcome-copy p{ font-size:15px; }.welcome-modules{ width:min(1100px,100%); grid-template-columns:repeat(8,1fr); gap:16px; margin-top:24px; }.welcome-module{ gap:12px; }.welcome-module span{ width:54px; height:54px; font-size:26px; }.welcome-rights{ bottom:16px; } }
[data-theme="dark"] .welcome-module{ background:var(--card); border-color:var(--line); }
[data-theme="dark"] .settings-float{ background:var(--card); border:1px solid var(--line); color:var(--ink); }
[data-theme="dark"] .welcome-copy h2{ color:#aeb9d1; }
[data-theme="dark"] .welcome-copy p{ color:#8b96ad; }
[data-theme="dark"] .welcome-rights{ color:#6b7690; }
[data-theme="dark"] .hero:after{ background:linear-gradient(90deg,transparent 45%,rgba(27,36,51,.92)); }
[data-theme="dark"] .hero p{ color:#9aa6bd; }
[data-theme="dark"] .search,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .more{
  background: var(--card);
  border-color: var(--line);
  color: var(--ink);
}
[data-theme="dark"] .data-area td,
[data-theme="dark"] .file-detail td{
  color: var(--ink);
  border-top-color: var(--line);
}
[data-theme="dark"] .data-area th,
[data-theme="dark"] .file-detail th{
  color: #9aa6bd;
}
[data-theme="dark"] .person-cell small,
[data-theme="dark"] .detail-person small{
  color: #8b96ad;
}
[data-theme="dark"] .selected-row td{
  background: #173834;
}
[data-theme="dark"] .available-reports button{
  color: var(--ink);
  background: var(--card);
  border-bottom-color: var(--line);
}
[data-theme="dark"] .available-reports button:first-of-type{
  color: #5eead4;
  background: #0f2e2b;
}
[data-theme="dark"] .report-actions p{
  color: #9db3d8;
}
[data-theme="dark"] .dropzone{
  background: #121824;
  border-color: #3a4a63;
  color: #9aa6bd;
}
[data-theme="dark"] .file-detail > header p,
[data-theme="dark"] .file-detail > header small,
[data-theme="dark"] .file-person small{
  color: #9aa6bd;
}
[data-theme="dark"] .net-side,
[data-theme="dark"] .receipt-box strong{
  color: #4ade80;
  background: #123328;
}
[data-theme="dark"] .receipt-box.deductions strong{
  color: #ff8080;
  background: #3a1518;
}
[data-theme="dark"] .receipt-total{
  color: #5eead4;
  background: #0f2e2b;
  border-color: var(--teal);
}
[data-theme="dark"] .receipt-total > b{
  color: #4ade80;
}
[data-theme="dark"] .receipt-box{
  border-color: var(--line);
}
[data-theme="dark"] .receipt-box p{
  border-top-color: var(--line);
}
/* Pantalla de bienvenida en oscuro: degradado profundo con destellos del teal
   de la marca. */
[data-theme="dark"] .welcome{
  background:
    radial-gradient(circle at 12% 6%, rgba(0, 190, 180, .20) 0, transparent 42%),
    radial-gradient(circle at 88% 16%, rgba(96, 116, 224, .16) 0, transparent 44%),
    radial-gradient(circle at 50% 118%, rgba(0, 190, 180, .12) 0, transparent 52%),
    linear-gradient(165deg, #17223a 0%, #131b2d 48%, #0e1522 100%);
}

[data-theme="dark"] .welcome-copy h1{
  background: linear-gradient(100deg, #ffffff 0%, #a9e8e3 52%, #82d6ec 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Fondo con degradado también en las demás pestañas, no solo en Inicio.

   Va en una capa fija del tamaño de la ventana, detrás de todo. Pintado en
   <html> se estiraba a lo largo de la página entera: en una pestaña corta
   los dos resplandores de arriba se veían chicos, y en una larga —el
   Historial de la ficha pasa de seis mil pixeles— cubrían la pantalla, así
   que cada pestaña salía de otro tono aunque sus tarjetas fueran idénticas.

   No va con background-attachment:fixed: en .app-shell esa combinación
   obligaba al navegador a un modo de composición que dejaba un "fantasma"
   repintado de la barra lateral fija encima del contenido. Una capa
   position:fixed se compone aparte y no se repinta al deslizar. */
html[data-theme="dark"]{ background: #0e1522; }
html[data-theme="dark"]::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 0%, rgba(0, 190, 180, .10) 0, transparent 38%),
    radial-gradient(circle at 92% 6%, rgba(96, 116, 224, .09) 0, transparent 40%),
    linear-gradient(170deg, #16203a 0%, #121a2c 42%, #0e1522 100%);
}
@media print { html[data-theme="dark"]::before { display: none; } }

[data-theme="dark"] .app-shell:not(.home-shell),
[data-theme="dark"] body{
  background: transparent;
}

/* Barra lateral en oscuro: degradado propio con un aura turquesa arriba y un
   filo iluminado en el borde derecho. */
[data-theme="dark"] .sidebar{
  background:
    radial-gradient(circle at 50% -8%, rgba(0, 190, 180, .17) 0, transparent 58%),
    linear-gradient(180deg, #1b2740 0%, #161e33 55%, #121a2b 100%);
  border-right-color: rgba(255, 255, 255, .05);
}

[data-theme="dark"] .sidebar::after{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent 0, rgba(0, 190, 180, .38) 22%, rgba(0, 190, 180, .38) 72%, transparent 100%);
  pointer-events: none;
}

[data-theme="dark"] .nav-item:hover{
  background: #1c2740;
  box-shadow: 0 8px 16px rgba(0, 0, 0, .3);
}
/* La pestaña activa usa un teal apagado en vez del verde menta claro,
que en
   oscuro se veía casi blanco. */
[data-theme="dark"] .nav-item.active,
[data-theme="dark"] .nav-item.active:hover{
  background: rgba(0, 190, 180, .13);
  color: #5fd8d0;
}

[data-theme="dark"] .nav-item::before{
  background: #5fd8d0;
}
/* Las insignias usaban fondos pastel muy claros que en oscuro se veían blancos. */
[data-theme="dark"] .badge.success{ color:#4ade80; background:rgba(10,158,92,.17); }
[data-theme="dark"] .badge.warning{ color:#e0b45c; background:rgba(169,114,10,.22); }
[data-theme="dark"] .badge.danger{ color:#ff8b8b; background:rgba(242,51,62,.17); }
[data-theme="dark"] .badge.muted{ color:#9aa6bd; background:rgba(255,255,255,.07); }
[data-theme="dark"] .badge.info{ color:#7ab8f5; background:rgba(8,126,233,.17); }
[data-theme="dark"] .badge.teal{ color:#4fd6cf; background:rgba(0,159,155,.18); }

[data-theme="dark"] .notice.warning{
  color: #e0b45c;
  background: #2e2712;
}
[data-theme="dark"] .notice.info{
  color: #7ab8f5;
  background: #12233a;
}
.content > .page-heading:has(+ .receipt-layout),
.content > .page-heading:has(+ .receipt-layout) + .receipt-layout{ width:min(100%, 1440px); margin-left:auto; margin-right:auto; }.receipt-layout{ display:grid; grid-template-columns:358px minmax(0,1fr); gap:25px; }.receipt-side{ display:grid; align-content:start; gap:17px; }.receipt-side article{ padding:17px; }.receipt-side h3{ margin:0 0 18px; font-size:15px; }.net-side{ display:flex; justify-content:space-between; margin:0 -17px -17px; padding:15px 17px; color:#07864e; background:#eaf9f4; }.receipt-frame{ padding:17px; background:#fff; }.receipt{ padding:20px; border:1px solid #dee4eb; border-radius:7px; }.receipt header{ display:flex; align-items:center; justify-content:space-between; }.receipt header img{ width:145px; }.receipt header h2{ margin:0; font-size:20px; }.receipt header small{ display:block; color:var(--teal); text-align:right; }.receipt-line{ height:2px; margin:19px 0 24px; background:var(--teal); }.receipt-meta{ display:grid; grid-template-columns:1fr 1fr; gap:30px; }.receipt-meta>div{ display:grid; grid-template-columns:125px 1fr; gap:10px; font-size:12px; }.receipt-meta small{ color:#60708d; }.receipt-columns{ display:grid; grid-template-columns:1fr 1.2fr; gap:12px; margin:24px 0 17px; }.receipt-box{ overflow:hidden; border:1px solid #e2e6ed; border-radius:6px; }.receipt-box h3{ margin:0; padding:12px; font-size:13px; }.receipt-box p{ display:grid; grid-template-columns:1.1fr 1fr auto; margin:0; padding:11px; border-top:1px solid #e9edf2; font-size:12px; }.receipt-box strong{ display:flex; justify-content:space-between; padding:12px; color:#048447; background:#eaf8f4; font-size:12px; }.receipt-box.deductions strong{ color:#da222c; background:#fff3f3; }.receipt-total{ display:flex; align-items:center; justify-content:space-between; padding:14px 17px; border:1px solid var(--teal); border-radius:5px; color:#087e7d; background:#f0faf8; }.receipt-total small{ display:block; color:var(--ink); font-weight:500; }.receipt-total>b{ color:#078449; font-size:26px; }.receipt footer{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:15px; margin:14px -20px -20px; padding:20px; border-top:1px dashed #d3dbe4; text-align:center; }.receipt footer div{ display:grid; gap:5px; font-size:11px; }.receipt footer div:nth-child(2){ color:#006b6c; font-size:23px; }.receipt footer div:nth-child(2) b{ color:var(--ink); font-size:13px; }
.modal-backdrop{ position:fixed; z-index:20; inset:0; background:rgba(20,29,52,.38); backdrop-filter:blur(3px); }.drawer{ position:fixed; z-index:21; top:0; right:0; bottom:0; width:min(760px,94vw); padding:29px; overflow:auto; background:#fff; box-shadow:-12px 0 35px rgba(8,23,58,.18); }.drawer-close{ position:absolute; top:22px; right:24px; width:40px; height:40px; border:1px solid #dce2ec; border-radius:7px; color:var(--ink); background:#fff; font-size:27px; }.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:15px; padding-right:20px; }.form-grid>h2,
.form-grid>p,
.form-grid>fieldset,
.form-grid>.notice,
.drawer-actions{ grid-column:1/-1; }.form-grid h2{ margin:0; font-size:25px; }.form-grid p{ margin:-7px 0 8px; color:#63718c; }.form-grid label{ display:grid; gap:6px; color:#55627e; font-size:12px; }.form-grid fieldset{ display:grid; grid-template-columns:repeat(2,1fr); gap:13px; padding:16px; border:1px solid #e4e9f0; border-radius:8px; }.form-grid legend{ padding:0 8px; font-size:16px; font-weight:700; }.form-grid fieldset small{ grid-column:1/-1; color:#63718d; }.mini-cards{ grid-column:1/-1; display:flex; gap:10px; }.mini-cards span{ flex:1; padding:10px; border:1px solid #e7ebf1; border-radius:7px; color:#63718d; font-size:12px; }.mini-cards b{ display:block; margin-top:4px; color:var(--ink); font-size:14px; }.drawer-actions{ display:flex; align-items:center; justify-content:flex-end; gap:11px; margin-top:12px; }.toast{ position:fixed; z-index:40; right:30px; bottom:25px; max-width:350px; padding:14px 17px; border-radius:var(--r-sm); color:#fff; background:#102146; box-shadow:var(--e3); transform:translateY(110px); transition:transform var(--dur-3) var(--ease), opacity var(--dur-2) ease; }.toast.show{ transform:translateY(0); } [hidden]{ display:none!important; }
html[data-theme="dark"]{
  --canvas:#121824; --card:#1b2433; --ink:#eff5ff; --red:#ec2535; --orange:#f0a33a;
  --line:#2c3a50; --shadow:0 8px 24px rgba(0,0,0,.25);
  /* En oscuro la sombra no separa —sobre un fondo ya oscuro casi no se ve—,
     así que el peso baja y el borde hace la mayor parte del trabajo. */
  --e1:0 1px 2px rgba(0,0,0,.3);
  --e2:0 10px 24px rgba(0,0,0,.4);
  --e3:0 16px 36px rgba(0,0,0,.44);
  --e4:0 26px 64px rgba(0,0,0,.5);
  color:var(--ink);
}
[data-theme="dark"] .button.outline,
[data-theme="dark"] .button.quiet,
[data-theme="dark"] .button.danger-outline,
[data-theme="dark"] .select-button,
[data-theme="dark"] .more{
  color: var(--ink);
  background: var(--card);
  border-color: var(--line);
}
/* Tema oscuro: vive en un solo lugar,
el atributo data-theme de la raíz (arriba).
   Antes había además una clase .dark que pintaba 25 selectores de un solo
   brochazo,
incluido `.dark .segmented button`. Eso le borraba el color al
   botón activo,
y de ahí salieron los tres "cuadros blancos" (el selector de
   temas,
los filtros de estado y las pestañas de expedientes).

   La diferencia ahora no es solo el nombre: aquí van únicamente contenedores y
   campos,
nunca botones que tengan estado. Los filtros,
el selector de temas y
   las pestañas de expedientes traen su propio color oscuro Y su color activo,
así que pintarlos desde aquí volvería a taparlos. */
[data-theme="dark"] .sidebar,
[data-theme="dark"] .button.outline,
[data-theme="dark"] .select-button,
[data-theme="dark"] .report-filter,
[data-theme="dark"] .report-filter button:not(.button),
[data-theme="dark"] .drawer,
[data-theme="dark"] .form-grid input,
[data-theme="dark"] .form-grid select,
[data-theme="dark"] .form-grid textarea{ color:var(--ink); background:var(--card); }
[data-theme="dark"] .hero,
[data-theme="dark"] .receipt,
[data-theme="dark"] .receipt-frame{ background:var(--card); }
[data-theme="dark"] .selected-row td{ background:#173834; }
@media(max-width:480px) { .content{ margin-left:200px; padding:28px 25px; }.sidebar{ width:200px; }.stats{ grid-template-columns:repeat(2,1fr); }.selected-summary{ display:block; }.selected-person{ min-width:0; padding-bottom:14px; margin-bottom:14px; border:0; border-bottom:1px solid var(--line); }.metric-group{ grid-template-columns:repeat(2,1fr); }.split-table,
.receipt-layout,
.files-layout{ grid-template-columns:1fr; }.detail-panel{ display:none; } }
@media(max-width:480px) { .sidebar{ position:static; width:auto; height:auto; padding:10px; flex-direction:row; overflow:auto; }.brand,
.side-foot{ display:none; }.sidebar nav{ display:flex; gap:4px; }.nav-item{ width:44px; height:42px; justify-content:center; padding:0; font-size:0; }.nav-item.active{ padding:0; border-bottom:3px solid var(--teal); border-left:0; }.content{ margin:0; padding:23px 14px; }.page-heading{ display:block; }.page-heading .button,
.page-heading .button-group{ margin-top:15px; }.hero{ height:auto; }.hero-scene{ display:none; }.toolbar{ flex-wrap:wrap; }.search{ min-width:min(100%,300px); flex:1; }.stats{ grid-template-columns:1fr 1fr; gap:10px; }.stat-card{ padding:12px; }.stat-icon{ width:44px; height:44px; font-size:22px; }.stat-card strong{ font-size:18px; }.metric-group{ grid-template-columns:1fr; }.agui-overview{ grid-template-columns:1fr; }.metrics-strip{ grid-template-columns:1fr 1fr; gap:12px; }.metrics-strip span{ justify-content:flex-start; border:0; }.report-filter,
.report-grid{ display:grid; grid-template-columns:1fr; }.company-form{ grid-template-columns:1fr; }.company-logo{ grid-row:auto; }.company-form .button{ grid-column:auto; }.receipt-columns,
.receipt-meta,
.form-grid{ grid-template-columns:1fr; }.receipt footer{ grid-template-columns:1fr; }.drawer{ padding:24px 16px; }.form-grid{ padding:25px 4px; }.form-grid fieldset{ grid-template-columns:1fr; }.drawer-actions{ flex-wrap:wrap; } }

/* Pantalla principal sin barra lateral: el contenido ocupa todo el ancho */
.app-shell.home-shell .content{ width: 100%; max-width: none; margin-left: 0; margin-right: 0; padding: 0; }

/* ── Las pastillas de los íconos en tema oscuro ───────────────────────────
   El dibujo no era el problema: en oscuro los cuadritos conservaban su fondo
   pastel de tema claro —un verde menta clarito, un rosado— y quedaban como
   calcomanías encendidas sobre la tarjeta negra. Ahora el fondo es el mismo
   color pero en transparencia sobre la tarjeta, y el trazo sube de tono para
   que se siga leyendo. Es la misma receta del vidrio: en oscuro el tinte
   sube y nada se aclara con blanco. */
[data-theme="dark"] .stat-icon,
[data-theme="dark"] .metric>span{ color:#4fd6cf; background:rgba(0,159,155,.16); }
[data-theme="dark"] .stat-card.red .stat-icon,
[data-theme="dark"] .metric>span.red{ color:#f4757f; background:rgba(236,37,53,.17); }
[data-theme="dark"] .stat-card.blue .stat-icon,
[data-theme="dark"] .metric>span.blue{ color:#7ab8f5; background:rgba(8,126,233,.17); }
[data-theme="dark"] .stat-card.orange .stat-icon,
[data-theme="dark"] .metric>span.orange{ color:#f0b45e; background:rgba(239,150,0,.17); }
[data-theme="dark"] .stat-card.purple .stat-icon,
[data-theme="dark"] .metric>span.purple{ color:#b795ff; background:rgba(130,61,255,.18); }
[data-theme="dark"] .stat-card.green .stat-icon,
[data-theme="dark"] .metric>span.green{ color:#5fd39a; background:rgba(10,158,92,.17); }
[data-theme="dark"] .metric{ border-color: var(--line); }

/* ── Las tarjetas de cifras ──────────────────────────────────────────────
   El ícono se ve y se ve bien: cuadrito redondeado de 40 px con el color del
   dato en transparencia sobre la tarjeta —no un pastel fijo, que en oscuro
   quedaba como calcomanía— y el dibujo a 20 px en el tono fuerte. Al lado, el
   rótulo en versalitas y la cifra grande. */
.stat-card, .metric{
  min-height:0; display:flex; align-items:center; gap:14px; padding:16px 18px;
  background:var(--card); border:1px solid var(--line); border-radius:13px; box-shadow:none;
}
.stat-card>div, .metric>div{ min-width:0; }
/* El rótulo de arriba: en versalitas, pero no estampado. A 700 con nueve
   centésimas de separación parecía un sello de goma. */
.stat-card small, .metric small{
  display:block; margin:0 0 4px;
  color:var(--muted); font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
}
/* La cifra: más chica y más fina de lo que estaba. A 24px y peso 680 el
   trazo engordaba y la pantalla se sentía a gritos —cinco cifras blancas
   compitiendo—; a 19px y peso 500 se lee igual y deja de pesar. */
.stat-card strong, .metric strong{
  display:block; color:var(--ink); font-size:19px; font-weight:500;
  line-height:1.15; font-variant-numeric:tabular-nums; letter-spacing:-.015em;
}
.stat-card .stat-icon, .metric .stat-icon{
  --tono:var(--teal);
  width:40px; height:40px; flex:0 0 auto;
  display:grid; place-items:center; border-radius:12px;
  color:var(--tono);
  background:color-mix(in srgb, var(--tono) 13%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--tono) 16%, transparent);
}
.stat-card .stat-icon svg, .metric .stat-icon svg{ width:20px; height:20px; }
.stat-card.red .stat-icon, .metric.red .stat-icon{ --tono:#e0453f; }
.stat-card.blue .stat-icon, .metric.blue .stat-icon{ --tono:#0f7ddb; }
.stat-card.orange .stat-icon, .metric.orange .stat-icon{ --tono:#d68a06; }
.stat-card.purple .stat-icon, .metric.purple .stat-icon{ --tono:#7742ec; }
.stat-card.green .stat-icon, .metric.green .stat-icon{ --tono:#07884c; }
/* En oscuro el tono se aclara para que el dibujo se lea sobre el fondo
   hondo, y el tinte del cuadrito sube un punto. */
[data-theme="dark"] .stat-card .stat-icon, [data-theme="dark"] .metric .stat-icon{
  --tono:#4fd6cf; background:color-mix(in srgb, var(--tono) 17%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--tono) 22%, transparent);
}
[data-theme="dark"] .stat-card.red .stat-icon, [data-theme="dark"] .metric.red .stat-icon{ --tono:#f4757f; }
[data-theme="dark"] .stat-card.blue .stat-icon, [data-theme="dark"] .metric.blue .stat-icon{ --tono:#7ab8f5; }
[data-theme="dark"] .stat-card.orange .stat-icon, [data-theme="dark"] .metric.orange .stat-icon{ --tono:#f0b45e; }
[data-theme="dark"] .stat-card.purple .stat-icon, [data-theme="dark"] .metric.purple .stat-icon{ --tono:#b795ff; }
[data-theme="dark"] .stat-card.green .stat-icon, [data-theme="dark"] .metric.green .stat-icon{ --tono:#5fd39a; }

/* ── Los redondeles de las iniciales ──────────────────────────────────────
   El color viene en --av-tinta (el fuerte, el de las letras) y --av-fondo
   (el pastel). En claro se usan tal cual, con un aro finito del mismo color
   para que el redondel tenga borde y no parezca una mancha. En oscuro el
   pastel no sirve —queda como una calcomanía encendida—, así que el fondo
   pasa a ser la misma tinta en transparencia sobre la tarjeta y las letras
   se aclaran hasta que se lean bien. */
.avatar{
  background: var(--av-fondo, #e0f7f4);
  color: var(--av-tinta, #008f8c);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--av-tinta, #008f8c) 16%, transparent);
}
[data-theme="dark"] .avatar{
  background: color-mix(in srgb, var(--av-tinta, #008f8c) 22%, transparent);
  color: color-mix(in srgb, var(--av-tinta, #008f8c) 45%, #ffffff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--av-tinta, #008f8c) 34%, transparent);
}

/* ── En pantalla grande, todo crece ───────────────────────────────────────
   El ancho sí se estiraba, pero la letra, los botones y los íconos están en
   pixeles fijos: en un monitor de 24" o más el contenedor quedaba enorme y
   el contenido diminuto, perdido en el medio. Aquí no hace falta rediseñar
   nada: se agranda el conjunto entero, que es lo mismo que uno hace con el
   zoom del navegador, y así todo mantiene sus proporciones.

   Se usa zoom y no transform:scale a propósito: scale deja el hueco del
   tamaño viejo y descuadra el desplazamiento; zoom sí recalcula el diseño.
   Los cortes son anchos de monitor de verdad —1600, 1900 y 2400— y no
   afectan la ventana angosta ni la del panel de vista previa. */
@media (min-width: 1600px){ .app-shell{ zoom: 1.10; } }
@media (min-width: 1900px){ .app-shell{ zoom: 1.20; } }
@media (min-width: 2400px){ .app-shell{ zoom: 1.32; } }

/* Quien pide menos movimiento no ve ninguno: ni el levantado de botones y
   tarjetas, ni el rebote de los ítems del menú. El color y la sombra siguen
   cambiando —eso no marea a nadie—, solo se apaga lo que se mueve. */
@media (prefers-reduced-motion: reduce){
  .button, .select-button, .more, .nav-item, .nav-item span, .nav-item::before,
  .toast{ transition-duration: .001ms !important; animation-duration: .001ms !important; }
  .button:hover, .button:active, .select-button:hover, .select-button:active,
  .more:hover, .more:active, .nav-item:hover{ transform: none !important; }
}

/* ── El blanco, en voz baja ───────────────────────────────────────────────
   En oscuro, --ink es un blanco casi puro (#eff5ff). Sirve para un título,
   pero cuando lo llevan a la vez cinco cifras, los valores de un panel y
   los renglones de un estado de cuenta, la pantalla se siente a gritos: es
   lo que hacía que Liquidaciones se viera dura al lado de Vacaciones, que
   apoya casi todo en gris.

   Estos son los textos de APOYO —cifras de tarjeta, valores de panel,
   renglones— y bajan a un blanco tibio. El título de la pantalla y los
   nombres siguen con el blanco de siempre, que para eso están. */
[data-theme="dark"] .stat-card strong,
[data-theme="dark"] .metric strong,
[data-theme="dark"] .detail-panel dd,
[data-theme="dark"] .receipt-side dd,
[data-theme="dark"] .liq-basis b,
[data-theme="dark"] .liq-amount,
[data-theme="dark"] .liq-line-name b{ color:#cfd9ea; }

/* ── Los números de Tiempo laborado y los títulos de panel ────────────────
   La tira de arriba de Tiempo laborado usa .metrics-strip, que es otra
   pieza distinta de las tarjetas: se había quedado con la negrita cerrada
   de antes. Y los títulos de los paneles —"Detalle del registro", "Pagos
   hechos", "Reportes disponibles"— son <h2>, que el navegador pinta a 700:
   a 17px eso compite con el dato que va abajo, que es lo que uno vino a
   leer. */
.metrics-strip strong{ font-weight:500; }
[data-theme="dark"] .metrics-strip strong{ color:#cfd9ea; }

.detail-panel h2,
.chart-card h2,
.available-reports h2,
.report-table h2,
.employee-detail-side h2{ font-size:15px; font-weight:600; }