/* ==========================================================================
Lucky Cobros — Sistema de diseño (boceto)
Estilo: "libro mayor" — papel cálido, reglas finas, tinta verde-jade,
números tabulares. Denso para operar, sobrio para inspirar confianza.
Índice:
1. Tokens (claro / oscuro) 9. Tablas y paginación
2. Base y tipografía 10. Pestañas, pasos
3. Layout de la aplicación 11. Modal, drawer, toasts, tooltip
4. Utilidades 12. Avisos, vacío, skeleton
5. Botones 13. Línea de tiempo, árbol, matriz
6. Formularios 14. Código, avatar, desplegables
7. Chips y estados (badges) 15. Gráfico de barras, varios
8. Tarjetas, KPI, saldos, tope 16. Responsive fino, movimiento, impresión
17. Piezas compartidas nuevas (consola, paginación con
filas, barras dobles, comprobante, estado del servicio…)
La consola de la plataforma (boceto/admin/) usa este mismo archivo con
: solo cambia el menú lateral (ver tokens de la consola).
========================================================================== */
/* 1. TOKENS ================================================================ */
:root {
color-scheme: light;
/* Superficies */
--fondo: #f5f4ef;
--superficie: #ffffff;
--superficie-2: #faf9f6;
--superficie-3: #efeee8;
--borde: #e2e0d8;
--borde-fuerte: #c9c6bb;
--velo: rgba(10, 18, 15, 0.55);
/* Texto */
--texto: #17201c;
--texto-2: #47524d;
--texto-3: #636d68;
--texto-invertido: #ffffff;
/* Marca */
--primario: #0b6b53;
--primario-hover: #08583f;
--primario-suave: #e2f1eb;
--primario-texto: #0a5e49;
--en-primario: #ffffff;
--acento: #e9a23b;
--acento-texto: #8a4b00;
--acento-suave: #fcefd6;
--foco: #0b6b53;
/* Menú lateral (tinta) */
--lateral-fondo: #10261f;
--lateral-texto: #e4ece8;
--lateral-texto-2: #a9bbb3;
--lateral-hover: rgba(255, 255, 255, 0.07);
--lateral-activo: rgba(94, 211, 168, 0.16);
--lateral-marca: #5ed3a8;
--lateral-borde: rgba(255, 255, 255, 0.09);
/* Estados (texto / fondo / borde) */
--exito: #11663a; --exito-fondo: #e2f3e8; --exito-borde: #b6dfc5;
--alerta: #85500a; --alerta-fondo: #fcf0d9; --alerta-borde: #efd29a;
--peligro: #b3261e; --peligro-fondo: #fce8e6; --peligro-borde: #f2bdb8;
--info: #1d5aa6; --info-fondo: #e5eefa; --info-borde: #bcd2f0;
--revision: #683c98; --revision-fondo: #f0e9fa; --revision-borde: #d7c5ef;
--neutro: #47524d; --neutro-fondo: #eeede8; --neutro-borde: #d6d4cb;
--peligro-solido: #b3261e; --en-peligro: #ffffff; --peligro-solido-hover: #93201a;
/* Barras de tope */
--tope-ok: #1d8a50;
--tope-alerta: #c98612;
--tope-critico: #c8352c;
--pista: #e8e6df;
/* Código */
--codigo-fondo: #13201b;
--codigo-borde: #13201b;
--codigo-texto: #dce7e1;
--codigo-tenue: #8fa59b;
--codigo-clave: #8fd8bb;
--codigo-cadena: #f2c27a;
--codigo-numero: #9cc2f7;
--codigo-bool: #e3a6f0;
/* Gráficos */
--serie-1: #0b6b53;
--serie-1-suave: #9ccfbd;
--serie-1-medio: #4a957c;
--serie-2: #e9a23b;
--grilla: #ebe9e2;
/* Comprobante: el "escritorio" sobre el que se apoya el papel */
--recibo-escritorio: var(--superficie-3);
/* Tipografía */
--fuente-texto: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--fuente-titulo: "Bricolage Grotesque", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
--fuente-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
--t-11: 0.6875rem;
--t-12: 0.75rem;
--t-13: 0.8125rem;
--t-14: 0.875rem;
--t-15: 0.9375rem;
--t-16: 1rem;
--t-18: 1.125rem;
--t-20: 1.25rem;
--t-24: 1.5rem;
--t-28: 1.75rem;
--t-32: 2rem;
--t-40: 2.5rem;
/* Espaciado (escala de 4) */
--e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px;
--e-6: 24px; --e-8: 32px; --e-10: 40px; --e-12: 48px; --e-16: 64px;
/* Radios */
--radio-1: 6px;
--radio-2: 10px;
--radio-3: 14px;
--radio-4: 20px;
--radio-total: 999px;
/* Sombras */
--sombra-1: 0 1px 2px rgba(23, 32, 28, 0.06), 0 0 0 1px rgba(23, 32, 28, 0.02);
--sombra-2: 0 6px 16px -4px rgba(23, 32, 28, 0.12), 0 2px 4px rgba(23, 32, 28, 0.05);
--sombra-3: 0 24px 60px -12px rgba(10, 18, 15, 0.32), 0 6px 16px rgba(10, 18, 15, 0.1);
/* Capas */
--z-base: 1;
--z-pegajoso: 20;
--z-barra: 30;
--z-lateral: 40;
--z-desplegable: 50;
--z-modal: 100;
--z-toast: 200;
--z-tooltip: 300;
/* Medidas de layout */
--ancho-lateral: 256px;
--ancho-lateral-compacto: 76px;
--alto-barra: 64px;
--alto-inferior: 64px;
--ancho-contenido: 1440px;
/* Movimiento */
--dur-1: 120ms;
--dur-2: 200ms;
--dur-3: 280ms;
--curva: cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* Tema oscuro: se aplica por preferencia del sistema (salvo que el usuario elija claro)
y siempre que el conmutador fije data-tema="oscuro". Los dos bloques son idénticos. */
@media (prefers-color-scheme: dark) {
:root:not([data-tema="claro"]) {
color-scheme: dark;
--fondo: #0c1210; --superficie: #141b18; --superficie-2: #111815; --superficie-3: #1c2622;
--borde: #26312c; --borde-fuerte: #38463f; --velo: rgba(0, 0, 0, 0.66);
--texto: #e8edea; --texto-2: #b5c1bb; --texto-3: #8f9d96; --texto-invertido: #0c1210;
--primario: #4cc9a0; --primario-hover: #6fd9b5; --primario-suave: rgba(76, 201, 160, 0.14);
--primario-texto: #6fd9b5; --en-primario: #04241a; --acento: #f2b654; --acento-texto: #f4c77f;
--acento-suave: rgba(242, 182, 84, 0.14); --foco: #6fd9b5;
--lateral-fondo: #09100d; --lateral-texto: #e4ece8; --lateral-texto-2: #9fb2a9;
--lateral-hover: rgba(255, 255, 255, 0.06); --lateral-activo: rgba(94, 211, 168, 0.15);
--lateral-marca: #5ed3a8; --lateral-borde: rgba(255, 255, 255, 0.07);
--exito: #74d69d; --exito-fondo: rgba(64, 190, 120, 0.14); --exito-borde: rgba(64, 190, 120, 0.36);
--alerta: #f1c063; --alerta-fondo: rgba(230, 160, 40, 0.14); --alerta-borde: rgba(230, 160, 40, 0.38);
--peligro: #ff958c; --peligro-fondo: rgba(240, 90, 80, 0.15); --peligro-borde: rgba(240, 90, 80, 0.4);
--info: #94bdf6; --info-fondo: rgba(90, 150, 240, 0.15); --info-borde: rgba(90, 150, 240, 0.4);
--revision: #c9aaf4; --revision-fondo: rgba(160, 110, 230, 0.16); --revision-borde: rgba(160, 110, 230, 0.42);
--neutro: #b5c1bb; --neutro-fondo: rgba(181, 193, 187, 0.1); --neutro-borde: rgba(181, 193, 187, 0.26);
--peligro-solido: #f07167; --en-peligro: #2a0705; --peligro-solido-hover: #ff8a81;
--tope-ok: #43c07c; --tope-alerta: #e9ad3c; --tope-critico: #f0675d; --pista: #26312c;
--codigo-fondo: #080d0b; --codigo-borde: #26312c;
--serie-1: #4cc9a0; --serie-1-suave: #2c6b57; --serie-1-medio: #43b38e; --serie-2: #f2b654; --grilla: #222c28;
--recibo-escritorio: var(--fondo);
--sombra-1: 0 1px 2px rgba(0, 0, 0, 0.4);
--sombra-2: 0 8px 20px -6px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.3);
--sombra-3: 0 28px 70px -12px rgba(0, 0, 0, 0.75), 0 6px 16px rgba(0, 0, 0, 0.4);
}
}
:root[data-tema="oscuro"] {
color-scheme: dark;
--fondo: #0c1210; --superficie: #141b18; --superficie-2: #111815; --superficie-3: #1c2622;
--borde: #26312c; --borde-fuerte: #38463f; --velo: rgba(0, 0, 0, 0.66);
--texto: #e8edea; --texto-2: #b5c1bb; --texto-3: #8f9d96; --texto-invertido: #0c1210;
--primario: #4cc9a0; --primario-hover: #6fd9b5; --primario-suave: rgba(76, 201, 160, 0.14);
--primario-texto: #6fd9b5; --en-primario: #04241a; --acento: #f2b654; --acento-texto: #f4c77f;
--acento-suave: rgba(242, 182, 84, 0.14); --foco: #6fd9b5;
--lateral-fondo: #09100d; --lateral-texto: #e4ece8; --lateral-texto-2: #9fb2a9;
--lateral-hover: rgba(255, 255, 255, 0.06); --lateral-activo: rgba(94, 211, 168, 0.15);
--lateral-marca: #5ed3a8; --lateral-borde: rgba(255, 255, 255, 0.07);
--exito: #74d69d; --exito-fondo: rgba(64, 190, 120, 0.14); --exito-borde: rgba(64, 190, 120, 0.36);
--alerta: #f1c063; --alerta-fondo: rgba(230, 160, 40, 0.14); --alerta-borde: rgba(230, 160, 40, 0.38);
--peligro: #ff958c; --peligro-fondo: rgba(240, 90, 80, 0.15); --peligro-borde: rgba(240, 90, 80, 0.4);
--info: #94bdf6; --info-fondo: rgba(90, 150, 240, 0.15); --info-borde: rgba(90, 150, 240, 0.4);
--revision: #c9aaf4; --revision-fondo: rgba(160, 110, 230, 0.16); --revision-borde: rgba(160, 110, 230, 0.42);
--neutro: #b5c1bb; --neutro-fondo: rgba(181, 193, 187, 0.1); --neutro-borde: rgba(181, 193, 187, 0.26);
--peligro-solido: #f07167; --en-peligro: #2a0705; --peligro-solido-hover: #ff8a81;
--tope-ok: #43c07c; --tope-alerta: #e9ad3c; --tope-critico: #f0675d; --pista: #26312c;
--codigo-fondo: #080d0b; --codigo-borde: #26312c;
--serie-1: #4cc9a0; --serie-1-suave: #2c6b57; --serie-1-medio: #43b38e; --serie-2: #f2b654; --grilla: #222c28;
--recibo-escritorio: var(--fondo);
--sombra-1: 0 1px 2px rgba(0, 0, 0, 0.4);
--sombra-2: 0 8px 20px -6px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.3);
--sombra-3: 0 28px 70px -12px rgba(0, 0, 0, 0.75), 0 6px 16px rgba(0, 0, 0, 0.4);
}
/* Consola de la plataforma (boceto/admin/, ): misma marca, misma tipografía y
mismos componentes. Solo cambia el menú lateral (azul pizarra en lugar de tinta verde) para que nadie
confunda la consola con el panel de un operador, y --cara-acento pinta la pastilla de la barra superior.
Los tres bloques (claro, oscuro por sistema, oscuro elegido) van siempre juntos. */
:root[data-cara="consola"] {
--lateral-fondo: #142033;
--lateral-texto: #e6ebf3;
--lateral-texto-2: #a9b6cb;
--lateral-hover: rgba(255, 255, 255, 0.07);
--lateral-activo: rgba(140, 180, 255, 0.17);
--lateral-marca: #5ed3a8;
--lateral-borde: rgba(255, 255, 255, 0.1);
--cara-acento: #1e3a66;
--cara-acento-fondo: #e6edf8;
--cara-acento-borde: #bfd0ea;
}
@media (prefers-color-scheme: dark) {
:root[data-cara="consola"]:not([data-tema="claro"]) {
--lateral-fondo: #0b111c; --lateral-texto: #e6ebf3; --lateral-texto-2: #9fadc4;
--lateral-hover: rgba(255, 255, 255, 0.06); --lateral-activo: rgba(140, 180, 255, 0.16);
--lateral-marca: #5ed3a8; --lateral-borde: rgba(255, 255, 255, 0.08);
--cara-acento: #b4cbf2; --cara-acento-fondo: rgba(120, 160, 230, 0.14); --cara-acento-borde: rgba(120, 160, 230, 0.38);
}
}
:root[data-cara="consola"][data-tema="oscuro"] {
--lateral-fondo: #0b111c; --lateral-texto: #e6ebf3; --lateral-texto-2: #9fadc4;
--lateral-hover: rgba(255, 255, 255, 0.06); --lateral-activo: rgba(140, 180, 255, 0.16);
--lateral-marca: #5ed3a8; --lateral-borde: rgba(255, 255, 255, 0.08);
--cara-acento: #b4cbf2; --cara-acento-fondo: rgba(120, 160, 230, 0.14); --cara-acento-borde: rgba(120, 160, 230, 0.38);
}
/* 2. BASE Y TIPOGRAFÍA ===================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
margin: 0;
background: var(--fondo);
color: var(--texto);
font-family: var(--fuente-texto);
font-size: var(--t-15);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--texto); line-height: 1.25; font-weight: 600; }
h1 { font-family: var(--fuente-titulo); font-size: var(--t-28); font-weight: 700; letter-spacing: -0.015em; }
h2 { font-family: var(--fuente-titulo); font-size: var(--t-20); font-weight: 650; letter-spacing: -0.01em; }
h3 { font-size: var(--t-16); }
h4 { font-size: var(--t-14); }
p { margin: 0; }
.prosa p + p { margin-top: var(--e-3); }
a { color: var(--primario-texto); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
small { font-size: var(--t-13); }
strong, b { font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--borde); margin: var(--e-6) 0; }
code, kbd, samp, pre { font-family: var(--fuente-mono); font-size: 0.92em; }
:not(pre) > code {
background: var(--superficie-3); border: 1px solid var(--borde); border-radius: var(--radio-1);
padding: 0.05em 0.4em; font-size: 0.86em; color: var(--texto); overflow-wrap: anywhere;
}
kbd {
border: 1px solid var(--borde-fuerte); border-bottom-width: 2px; border-radius: var(--radio-1);
padding: 0 0.4em; font-size: 0.8em; background: var(--superficie);
}
::selection { background: var(--primario-suave); color: var(--texto); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: 4px; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
/* Montos y números: siempre tabulares */
.num, .monto, .tnum, td.num, th.num, .kpi__valor, .saldo__valor, .tope__cifras {
font-variant-numeric: tabular-nums lining-nums;
font-feature-settings: "tnum" 1, "lnum" 1;
}
.monto { white-space: nowrap; font-weight: 500; }
.monto--positivo { color: var(--exito); }
.monto--negativo { color: var(--peligro); }
.monto--tenue { color: var(--texto-3); font-weight: 400; }
.mono { font-family: var(--fuente-mono); font-size: 0.92em; letter-spacing: 0; }
.ref { font-family: var(--fuente-mono); font-size: var(--t-13); color: var(--texto-2); white-space: nowrap; }
a.ref { color: var(--primario-texto); text-decoration: none; }
a.ref:hover { text-decoration: underline; }
/* Valor copiable: … */
.copiable { display: inline-flex; align-items: center; gap: 2px; min-width: 0; max-width: 100%; }
.copiable .mono { overflow-wrap: anywhere; }
.copiable .btn { margin: -6px 0; color: var(--texto-3); }
.copiable .btn:hover { color: var(--texto); }
/* Íconos SVG inline: */
.ico {
width: 20px; height: 20px; flex: none;
fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.ico--14 { width: 14px; height: 14px; }
.ico--16 { width: 16px; height: 16px; }
.ico--18 { width: 18px; height: 18px; }
.ico--24 { width: 24px; height: 24px; }
.ico--32 { width: 32px; height: 32px; stroke-width: 1.5; }
/* Saltar al contenido */
.saltar {
position: absolute; left: var(--e-3); top: -60px; z-index: var(--z-tooltip);
background: var(--primario); color: var(--en-primario); padding: var(--e-2) var(--e-4);
border-radius: var(--radio-2); font-weight: 600; text-decoration: none; transition: top var(--dur-2);
}
.saltar:focus { top: var(--e-3); }
/* 3. LAYOUT DE LA APLICACIÓN =============================================== */
.app {
display: grid;
grid-template-columns: var(--ancho-lateral) minmax(0, 1fr);
min-height: 100vh;
min-height: 100dvh;
}
:root[data-menu="compacto"] { --ancho-lateral: var(--ancho-lateral-compacto); }
/* Menú lateral */
.lateral {
position: sticky; top: 0; height: 100vh; height: 100dvh;
display: flex; flex-direction: column;
background: var(--lateral-fondo); color: var(--lateral-texto);
z-index: var(--z-lateral);
overflow: hidden;
}
.lateral__marca {
display: flex; align-items: center; gap: var(--e-3);
height: var(--alto-barra); padding: 0 var(--e-4) 0 var(--e-5);
border-bottom: 1px solid var(--lateral-borde);
flex: none;
}
.lateral__marca a { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; min-width: 0; }
.lateral__marca .logo-marca { width: 30px; height: 30px; flex: none; }
.lateral__nombre { font-family: var(--fuente-titulo); font-weight: 700; font-size: var(--t-18); letter-spacing: -0.02em; white-space: nowrap; }
.lateral__nombre span { color: var(--lateral-marca); font-weight: 600; }
.btn-barra.lateral__cerrar { margin-left: auto; display: none; }
.lateral__nav { flex: 1; overflow-y: auto; padding: var(--e-3) var(--e-3) var(--e-4); scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.lateral__grupo { margin-top: var(--e-4); }
.lateral__grupo-titulo {
display: block; padding: 0 var(--e-3) var(--e-2); margin: 0;
font-size: var(--t-11); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--lateral-texto-2);
}
.lateral__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lateral__item {
position: relative;
display: flex; align-items: center; gap: var(--e-3);
min-height: 40px; padding: 0 var(--e-3);
border-radius: var(--radio-2);
color: var(--lateral-texto-2); text-decoration: none; font-size: var(--t-14); font-weight: 500;
transition: background var(--dur-1), color var(--dur-1);
}
.lateral__item:hover { background: var(--lateral-hover); color: var(--lateral-texto); }
.lateral__item[aria-current="page"] { background: var(--lateral-activo); color: #ffffff; font-weight: 600; }
.lateral__item[aria-current="page"]::before {
content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px;
border-radius: 0 3px 3px 0; background: var(--lateral-marca);
}
.lateral__item[aria-current="page"] .ico { color: var(--lateral-marca); }
.lateral__item:focus-visible { outline-color: var(--lateral-marca); outline-offset: -2px; }
.lateral__texto { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lateral__contador {
min-width: 22px; height: 20px; padding: 0 6px; border-radius: var(--radio-total);
background: var(--acento); color: #2b1a00; font-size: var(--t-12); font-weight: 700;
display: inline-flex; align-items: center; justify-content: center;
font-variant-numeric: tabular-nums;
}
.lateral__pie { flex: none; padding: var(--e-3); border-top: 1px solid var(--lateral-borde); display: grid; gap: 2px; }
.lateral__compactar { width: 100%; background: none; border: 0; cursor: pointer; text-align: left; font: inherit; }
.lateral__compactar .ico { transition: transform var(--dur-2); }
/* Menú compacto (solo escritorio) */
@media (min-width: 1024px) {
:root[data-menu="compacto"] .lateral__nombre,
:root[data-menu="compacto"] .lateral__texto,
:root[data-menu="compacto"] .lateral__grupo-titulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:root[data-menu="compacto"] .lateral__marca { padding: 0; justify-content: center; }
:root[data-menu="compacto"] .lateral__item { justify-content: center; padding: 0; }
:root[data-menu="compacto"] .lateral__grupo { margin-top: var(--e-3); padding-top: var(--e-3); border-top: 1px solid var(--lateral-borde); }
:root[data-menu="compacto"] .lateral__contador { position: absolute; top: 3px; right: 6px; min-width: 18px; height: 16px; font-size: 10px; padding: 0 4px; }
:root[data-menu="compacto"] .lateral__compactar .ico { transform: rotate(180deg); }
}
/* Columna principal */
.app__principal { min-width: 0; display: flex; flex-direction: column; }
/* Barra superior */
.barra {
position: sticky; top: 0; z-index: var(--z-barra);
display: flex; align-items: center; gap: var(--e-3);
min-height: var(--alto-barra); padding: var(--e-2) var(--e-6);
background: color-mix(in srgb, var(--fondo) 92%, transparent);
backdrop-filter: saturate(1.4) blur(8px);
-webkit-backdrop-filter: saturate(1.4) blur(8px);
border-bottom: 1px solid var(--borde);
}
.btn-barra.barra__menu { display: none; }
.barra__titulo { min-width: 0; font-weight: 600; font-size: var(--t-15); color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra__migas { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--t-14); color: var(--texto-3); }
.barra__migas a { color: var(--texto-2); text-decoration: none; }
.barra__migas a:hover { color: var(--texto); text-decoration: underline; }
.barra__migas .ico { color: var(--texto-3); flex: none; }
.barra__migas [aria-current="page"] { color: var(--texto); font-weight: 600; }
.barra__contexto { display: flex; align-items: center; gap: var(--e-3); margin-left: auto; min-width: 0; }
.barra__acciones { display: flex; align-items: center; gap: var(--e-1); }
.barra__separador { width: 1px; height: 24px; background: var(--borde); }
/* Contenido */
.contenido {
width: 100%; max-width: var(--ancho-contenido); margin: 0 auto;
padding: var(--e-6) var(--e-6) var(--e-12);
flex: 1;
}
.pagina-cabecera {
display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
gap: var(--e-4); margin-bottom: var(--e-6);
}
.pagina-cabecera__textos { min-width: 0; flex: 1 1 320px; }
.pagina-sub { margin-top: var(--e-1); color: var(--texto-2); font-size: var(--t-15); max-width: 70ch; }
.pagina-acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.antetitulo { display: block; font-size: var(--t-12); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-3); margin-bottom: var(--e-1); }
.seccion { margin-top: var(--e-8); }
.seccion:first-child { margin-top: 0; }
.seccion__cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); margin-bottom: var(--e-4); }
.seccion__titulo { font-size: var(--t-18); }
.seccion__sub { color: var(--texto-2); font-size: var(--t-14); margin-top: 2px; }
/* Barra inferior (celular) */
.barra-inferior { display: none; }
/* Fondo detrás del drawer de menú en celular */
.lateral-velo { display: none; }
/* 4. UTILIDADES ============================================================ */
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.texto-2 { color: var(--texto-2); }
.texto-3 { color: var(--texto-3); }
.texto-chico { font-size: var(--t-13); }
.texto-exito { color: var(--exito); }
.texto-peligro { color: var(--peligro); }
.texto-alerta { color: var(--alerta); }
.derecha { text-align: right; }
.centro { text-align: center; }
.nowrap { white-space: nowrap; }
.cortar { overflow-wrap: anywhere; }
.pila { display: flex; flex-direction: column; gap: var(--e-4); }
.pila--chica { gap: var(--e-2); }
.pila--grande { gap: var(--e-6); }
.fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); }
.fila--chica { gap: var(--e-2); }
.entre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); }
.empujar { margin-left: auto; }
.grilla { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.grilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grilla--principal { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.divisor { height: 1px; background: var(--borde); margin: var(--e-4) 0; border: 0; }
/* 5. BOTONES =============================================================== */
.btn {
--btn-alto: 40px;
display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
min-height: var(--btn-alto); padding: 0 var(--e-4);
border: 1px solid transparent; border-radius: var(--radio-2);
font-family: var(--fuente-texto); font-size: var(--t-14); font-weight: 600; line-height: 1;
text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none;
touch-action: manipulation;
transition: background var(--dur-1), border-color var(--dur-1), color var(--dur-1), box-shadow var(--dur-1), transform var(--dur-1);
}
.btn:active:not(:disabled):not([aria-disabled="true"]) { transform: translateY(1px); }
.btn .ico { width: 18px; height: 18px; }
.btn--primario { background: var(--primario); color: var(--en-primario); box-shadow: inset 0 -1px 0 rgba(0,0,0,.12); }
.btn--primario:hover { background: var(--primario-hover); }
.btn--secundario { background: var(--superficie); color: var(--texto); border-color: var(--borde-fuerte); box-shadow: var(--sombra-1); }
.btn--secundario:hover { background: var(--superficie-3); border-color: var(--texto-3); }
.btn--fantasma { background: transparent; color: var(--texto-2); }
.btn--fantasma:hover { background: var(--superficie-3); color: var(--texto); }
.btn--peligro { background: var(--peligro-solido); color: var(--en-peligro); }
.btn--peligro:hover { background: var(--peligro-solido-hover); }
.btn--peligro-suave { background: var(--peligro-fondo); color: var(--peligro); border-color: var(--peligro-borde); }
.btn--peligro-suave:hover { border-color: var(--peligro); }
.btn--enlace { background: none; border: 0; padding: 0; min-height: 0; color: var(--primario-texto); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.btn--chico { --btn-alto: 32px; padding: 0 var(--e-3); font-size: var(--t-13); border-radius: var(--radio-1); gap: 6px; }
.btn--chico .ico { width: 16px; height: 16px; }
.btn--grande { --btn-alto: 48px; padding: 0 var(--e-6); font-size: var(--t-16); border-radius: var(--radio-3); }
.btn--bloque { width: 100%; }
.btn--icono { width: var(--btn-alto); padding: 0; }
.btn--icono.btn--chico { width: 32px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.btn[aria-busy="true"] { position: relative; color: transparent !important; pointer-events: none; }
.btn[aria-busy="true"]::after {
content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
border: 2px solid currentColor; border-color: var(--en-primario) var(--en-primario) transparent transparent;
animation: girar 0.7s linear infinite;
}
.btn--secundario[aria-busy="true"]::after, .btn--fantasma[aria-busy="true"]::after { border-color: var(--texto) var(--texto) transparent transparent; }
.grupo-btn { display: inline-flex; }
.grupo-btn .btn { border-radius: 0; }
.grupo-btn .btn + .btn { margin-left: -1px; }
.grupo-btn .btn:first-child { border-radius: var(--radio-2) 0 0 var(--radio-2); }
.grupo-btn .btn:last-child { border-radius: 0 var(--radio-2) var(--radio-2) 0; }
/* Botón de ícono de la barra superior */
.btn-barra {
position: relative; display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border: 0; border-radius: var(--radio-2); background: transparent;
color: var(--texto-2); cursor: pointer; transition: background var(--dur-1), color var(--dur-1);
}
.btn-barra:hover { background: var(--superficie-3); color: var(--texto); }
.btn-barra__punto { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--peligro-solido); box-shadow: 0 0 0 2px var(--fondo); }
.tema-icono-luna { display: none; }
:root[data-tema="oscuro"] .tema-icono-sol { display: none; }
:root[data-tema="oscuro"] .tema-icono-luna { display: block; }
@media (prefers-color-scheme: dark) {
:root:not([data-tema="claro"]) .tema-icono-sol { display: none; }
:root:not([data-tema="claro"]) .tema-icono-luna { display: block; }
}
/* 6. FORMULARIOS =========================================================== */
.form { display: grid; gap: var(--e-4); }
.form-grilla { display: grid; gap: var(--e-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grilla .campo--ancho { grid-column: 1 / -1; }
fieldset { border: 1px solid var(--borde); border-radius: var(--radio-3); padding: var(--e-4); margin: 0; min-width: 0; }
legend { padding: 0 var(--e-2); font-weight: 600; font-size: var(--t-14); }
.campo { display: grid; gap: 6px; min-width: 0; }
.campo__etiqueta { font-size: var(--t-14); font-weight: 600; color: var(--texto); }
.campo__etiqueta .requerido { color: var(--peligro); margin-left: 2px; }
.campo__opcional { color: var(--texto-3); font-weight: 400; }
.campo__ayuda { font-size: var(--t-13); color: var(--texto-3); }
.campo__error { display: none; align-items: center; gap: 6px; font-size: var(--t-13); color: var(--peligro); font-weight: 500; }
.campo--error .campo__error { display: flex; }
.campo--error .campo__control, .campo--error .select select { border-color: var(--peligro); }
.campo--error .campo__control:focus { box-shadow: 0 0 0 3px var(--peligro-fondo); }
.campo__control, .select select {
width: 100%; min-height: 40px; padding: 8px 12px;
background: var(--superficie); color: var(--texto);
border: 1px solid var(--borde-fuerte); border-radius: var(--radio-2);
font-family: var(--fuente-texto); font-size: var(--t-15); line-height: 1.4;
transition: border-color var(--dur-1), box-shadow var(--dur-1), background var(--dur-1);
}
.campo__control::placeholder { color: var(--texto-3); opacity: 1; }
.campo__control:hover, .select select:hover { border-color: var(--texto-3); }
.campo__control:focus, .select select:focus { outline: none; border-color: var(--primario); box-shadow: 0 0 0 3px var(--primario-suave); }
.campo__control:disabled, .select select:disabled { background: var(--superficie-3); color: var(--texto-3); cursor: not-allowed; }
.campo__control[readonly] { background: var(--superficie-2); border-style: dashed; }
textarea.campo__control { min-height: 96px; resize: vertical; }
.campo__control--mono { font-family: var(--fuente-mono); font-size: var(--t-14); letter-spacing: 0.02em; }
/* Select con flecha propia */
.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer; }
.select::after {
content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -6px;
border-right: 2px solid var(--texto-2); border-bottom: 2px solid var(--texto-2); transform: rotate(45deg);
pointer-events: none;
}
/* Control con ícono o prefijo */
.control-adornado { position: relative; display: flex; align-items: center; }
.control-adornado .campo__control { padding-left: 40px; }
.control-adornado__ico { position: absolute; left: 12px; color: var(--texto-3); pointer-events: none; }
.control-adornado__prefijo { position: absolute; left: 12px; color: var(--texto-2); font-weight: 600; pointer-events: none; }
.control-adornado--prefijo .campo__control { padding-left: 30px; font-variant-numeric: tabular-nums; }
.control-adornado__fin { position: absolute; right: 4px; }
.control-adornado--fin .campo__control { padding-right: 48px; padding-left: 12px; }
/* Búsqueda */
.buscador { position: relative; display: flex; align-items: center; min-width: 0; flex: 1 1 240px; max-width: 420px; }
.buscador .campo__control { padding-left: 40px; padding-right: 64px; background: var(--superficie); }
.buscador__ico { position: absolute; left: 12px; color: var(--texto-3); pointer-events: none; }
.buscador__atajo { position: absolute; right: 10px; font-size: var(--t-12); color: var(--texto-3); }
.buscador .campo__control::-webkit-search-cancel-button { display: none; }
/* Checkbox y radio */
.check { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: var(--t-14); line-height: 1.4; min-height: 24px; }
.check input {
appearance: none; -webkit-appearance: none; margin: 1px 0 0; flex: none;
width: 18px; height: 18px; border: 1.5px solid var(--borde-fuerte); background: var(--superficie);
border-radius: 5px; display: inline-grid; place-content: center; cursor: pointer;
transition: background var(--dur-1), border-color var(--dur-1);
}
.check input[type="radio"] { border-radius: 50%; }
.check input:hover { border-color: var(--primario); }
.check input:checked { background: var(--primario); border-color: var(--primario); }
.check input[type="checkbox"]:checked::before {
content: ""; width: 9px; height: 5px; margin-top: -2px;
border-left: 2px solid var(--en-primario); border-bottom: 2px solid var(--en-primario); transform: rotate(-45deg);
}
.check input[type="checkbox"]:indeterminate { background: var(--primario); border-color: var(--primario); }
.check input[type="checkbox"]:indeterminate::before { content: ""; width: 8px; height: 2px; background: var(--en-primario); }
.check input[type="radio"]:checked { background: var(--superficie); border-width: 5px; }
.check input:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.check input:disabled { opacity: 0.45; cursor: not-allowed; }
.check__texto small { display: block; color: var(--texto-3); font-size: var(--t-13); }
.grupo-opciones { display: grid; gap: var(--e-3); }
/* Opción en tarjeta (radio grande) */
.opcion-tarjeta { position: relative; display: flex; gap: var(--e-3); padding: var(--e-4); border: 1px solid var(--borde-fuerte); border-radius: var(--radio-3); background: var(--superficie); cursor: pointer; transition: border-color var(--dur-1), box-shadow var(--dur-1); }
.opcion-tarjeta:hover { border-color: var(--texto-3); }
.opcion-tarjeta:has(input:checked) { border-color: var(--primario); box-shadow: 0 0 0 1px var(--primario); background: var(--primario-suave); }
/* Switch */
.switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: var(--t-14); min-height: 28px; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch__pista {
position: relative; flex: none; width: 40px; height: 24px; border-radius: var(--radio-total);
background: var(--borde-fuerte); transition: background var(--dur-2);
}
.switch__pista::after {
content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
background: #ffffff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform var(--dur-2) var(--curva);
}
.switch input:checked + .switch__pista { background: var(--primario); }
.switch input:checked + .switch__pista::after { transform: translateX(16px); }
.switch input:focus-visible + .switch__pista { outline: 2px solid var(--foco); outline-offset: 2px; }
.switch input:disabled + .switch__pista { opacity: 0.45; }
/* Código de 6 dígitos */
.otp { display: flex; gap: var(--e-2); align-items: center; }
.otp input {
width: 48px; height: 56px; padding: 0; text-align: center;
font-family: var(--fuente-mono); font-size: var(--t-24); font-weight: 500;
border: 1px solid var(--borde-fuerte); border-radius: var(--radio-2); background: var(--superficie); color: var(--texto);
caret-color: var(--primario);
}
.otp input:focus { outline: none; border-color: var(--primario); box-shadow: 0 0 0 3px var(--primario-suave); }
.campo--error .otp input { border-color: var(--peligro); }
.campo--error .otp input:focus { box-shadow: 0 0 0 3px var(--peligro-fondo); }
.otp__separador { width: 10px; height: 2px; background: var(--borde-fuerte); border-radius: 2px; }
/* Barra de filtros */
.filtros { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); margin-bottom: var(--e-4); }
.filtros__fila { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; width: 100%; }
/* 7. CHIPS Y ESTADOS ======================================================= */
.chip {
display: inline-flex; align-items: center; gap: 6px;
min-height: 32px; padding: 0 12px; border-radius: var(--radio-total);
border: 1px solid var(--borde-fuerte); background: var(--superficie); color: var(--texto-2);
font-size: var(--t-13); font-weight: 500; cursor: pointer; white-space: nowrap;
transition: background var(--dur-1), border-color var(--dur-1), color var(--dur-1);
}
.chip:hover { border-color: var(--texto-3); color: var(--texto); }
.chip[aria-pressed="true"] { background: var(--primario-suave); border-color: var(--primario); color: var(--primario-texto); font-weight: 600; }
.chip__cuenta { font-variant-numeric: tabular-nums; color: var(--texto-3); font-weight: 500; }
.chip[aria-pressed="true"] .chip__cuenta { color: inherit; }
.chip--quitar { padding-right: 4px; background: var(--superficie-3); border-color: transparent; color: var(--texto); }
.chip--quitar button { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: var(--texto-2); cursor: pointer; }
.chip--quitar button:hover { background: var(--borde); color: var(--texto); }
.estado {
--e-fg: var(--neutro); --e-bg: var(--neutro-fondo); --e-bd: var(--neutro-borde);
display: inline-flex; align-items: center; gap: 6px;
height: 24px; padding: 0 9px 0 8px; border-radius: var(--radio-total);
background: var(--e-bg); color: var(--e-fg); border: 1px solid var(--e-bd);
font-size: var(--t-12); font-weight: 600; line-height: 1; white-space: nowrap;
}
.estado::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.estado .ico { width: 13px; height: 13px; stroke-width: 2.25; margin: 0 -1px 0 -2px; }
.estado:has(.ico)::before { display: none; }
.estado--exito, .estado--confirmada, .estado--activa, .estado--resuelto { --e-fg: var(--exito); --e-bg: var(--exito-fondo); --e-bd: var(--exito-borde); }
.estado--alerta, .estado--monto-menor, .estado--monto-mayor, .estado--abierto { --e-fg: var(--alerta); --e-bg: var(--alerta-fondo); --e-bd: var(--alerta-borde); }
.estado--peligro, .estado--fallida, .estado--tope { --e-fg: var(--peligro); --e-bg: var(--peligro-fondo); --e-bd: var(--peligro-borde); }
.estado--info, .estado--en-analisis { --e-fg: var(--info); --e-bg: var(--info-fondo); --e-bd: var(--info-borde); }
.estado--revision { --e-fg: var(--revision); --e-bg: var(--revision-fondo); --e-bd: var(--revision-borde); }
.estado--neutro, .estado--pendiente, .estado--pausada { --e-fg: var(--neutro); --e-bg: var(--neutro-fondo); --e-bd: var(--neutro-borde); }
.estado--pendiente::before { background: transparent; border: 1.5px solid currentColor; width: 7px; height: 7px; }
.estado--pausada::before { border-radius: 1px; width: 6px; height: 7px; background: linear-gradient(90deg, currentColor 0 2px, transparent 2px 4px, currentColor 4px); }
.etiqueta { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--radio-1); background: var(--superficie-3); color: var(--texto-2); font-size: var(--t-12); font-weight: 600; white-space: nowrap; }
.etiqueta--marca { background: var(--primario-suave); color: var(--primario-texto); }
.etiqueta--acento { background: var(--acento-suave); color: var(--acento-texto); }
.etiqueta--mono { font-family: var(--fuente-mono); font-weight: 500; }
/* Indicador en vivo */
.en-vivo { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-13); color: var(--texto-2); white-space: nowrap; }
.en-vivo__punto { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--tope-ok); flex: none; }
.en-vivo__punto::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--tope-ok); opacity: 0; animation: latido 2s var(--curva) infinite; }
.en-vivo--pausado .en-vivo__punto { background: var(--texto-3); }
.en-vivo--pausado .en-vivo__punto::after { display: none; }
/* 8. TARJETAS, KPI, SALDOS, TOPE ========================================== */
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-3); box-shadow: var(--sombra-1); min-width: 0; }
.tarjeta--relleno { padding: var(--e-5); }
.tarjeta__cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding: var(--e-4) var(--e-5); border-bottom: 1px solid var(--borde); flex-wrap: wrap; }
.tarjeta__titulo { font-size: var(--t-15); font-weight: 600; }
.tarjeta__sub { color: var(--texto-3); font-size: var(--t-13); }
.tarjeta__cuerpo { padding: var(--e-5); }
.tarjeta__pie { padding: var(--e-3) var(--e-5); border-top: 1px solid var(--borde); background: var(--superficie-2); border-radius: 0 0 var(--radio-3) var(--radio-3); font-size: var(--t-13); color: var(--texto-2); }
.tarjeta--clic { cursor: pointer; transition: border-color var(--dur-1), box-shadow var(--dur-1); text-decoration: none; color: inherit; display: block; }
.tarjeta--clic:hover { border-color: var(--borde-fuerte); box-shadow: var(--sombra-2); }
.kpi { padding: var(--e-5); display: flex; flex-direction: column; gap: var(--e-2); }
.kpi__etiqueta { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-13); color: var(--texto-2); font-weight: 500; }
.kpi__etiqueta .ico { color: var(--texto-3); width: 18px; height: 18px; }
.kpi__valor { font-family: var(--fuente-titulo); font-size: var(--t-28); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; white-space: nowrap; }
.kpi__valor small, .saldo__valor small { font-size: 0.55em; font-weight: 600; color: var(--texto-3); letter-spacing: 0; }
.kpi__pie { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); font-size: var(--t-13); color: var(--texto-3); }
.delta { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; font-variant-numeric: tabular-nums; }
.delta .ico { width: 14px; height: 14px; stroke-width: 2.25; }
.delta--sube { color: var(--exito); }
.delta--baja { color: var(--peligro); }
.delta--neutro { color: var(--texto-3); }
/* Trío de saldos: real − comisiones = neto */
.saldos { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1.15fr); align-items: stretch; gap: var(--e-2); }
.saldo { padding: var(--e-5); display: flex; flex-direction: column; gap: var(--e-2); }
.saldo__etiqueta { display: flex; align-items: center; gap: 6px; font-size: var(--t-13); color: var(--texto-2); font-weight: 500; }
.saldo__valor { font-family: var(--fuente-titulo); font-size: var(--t-32); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; white-space: nowrap; }
.saldo__nota { font-size: var(--t-13); color: var(--texto-3); }
.saldos__op { display: grid; place-items: center; width: 28px; font-family: var(--fuente-titulo); font-size: var(--t-24); font-weight: 600; color: var(--texto-3); }
.saldo--destacado { padding-bottom: calc(var(--e-5) + 16px); background: var(--primario); border-color: var(--primario); color: var(--en-primario); position: relative; overflow: hidden; }
.saldo--destacado .saldo__etiqueta, .saldo--destacado .saldo__nota { color: color-mix(in srgb, var(--en-primario) 82%, transparent); }
.saldo--destacado .saldo__valor small { color: color-mix(in srgb, var(--en-primario) 75%, transparent); }
.saldo--destacado::after {
/* filete de "libro mayor": doble regla bajo el total */
content: ""; position: absolute; left: var(--e-5); right: var(--e-5); bottom: 14px; height: 4px;
border-top: 1px solid color-mix(in srgb, var(--en-primario) 35%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--en-primario) 35%, transparent);
}
/* Tope mensual */
.tope { display: grid; gap: 6px; }
.tope__cabecera { display: flex; justify-content: space-between; gap: var(--e-2); font-size: var(--t-13); color: var(--texto-2); }
.tope__porcentaje { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--texto); }
.tope__pista { height: 8px; border-radius: var(--radio-total); background: var(--pista); overflow: hidden; }
.tope__relleno { height: 100%; width: var(--valor, 0%); border-radius: inherit; background: var(--tope-ok); }
.tope--alerta .tope__relleno { background: var(--tope-alerta); }
.tope--critico .tope__relleno { background: var(--tope-critico); }
.tope--critico .tope__porcentaje { color: var(--peligro); }
.tope--alerta .tope__porcentaje { color: var(--alerta); }
.tope__cifras { font-size: var(--t-12); color: var(--texto-3); }
/* marca del 90 %: a partir de acá la rotación deja de asignar esa cuenta */
.tope__pista--marca { position: relative; }
.tope__pista--marca::after { content: ""; position: absolute; left: 90%; top: -2px; bottom: -2px; width: 2px; background: var(--superficie); }
/* Tarjeta de cuenta CVU */
.cuenta { padding: var(--e-5); display: grid; gap: var(--e-4); }
.cuenta__cabecera { display: flex; justify-content: space-between; gap: var(--e-3); align-items: flex-start; }
.cuenta__apodo { font-weight: 600; font-size: var(--t-16); }
.cuenta__cvu { font-family: var(--fuente-mono); font-size: var(--t-13); color: var(--texto-2); letter-spacing: 0.02em; overflow-wrap: anywhere; }
/* Lista de definición (detalle) */
.datos { display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: 10px var(--e-6); margin: 0; font-size: var(--t-14); }
.datos dt { color: var(--texto-3); }
.datos dd { margin: 0; color: var(--texto); font-weight: 500; overflow-wrap: anywhere; display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.datos--apilado { grid-template-columns: 1fr; gap: 2px; }
.datos--apilado dd { margin-bottom: var(--e-3); }
/* Comparación esperado / recibido */
.comparar { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--borde); border-radius: var(--radio-3); overflow: hidden; }
.comparar__celda { padding: var(--e-4); }
.comparar__celda + .comparar__celda { border-left: 1px solid var(--borde); }
.comparar__etiqueta { font-size: var(--t-12); color: var(--texto-3); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.comparar__valor { font-family: var(--fuente-titulo); font-size: var(--t-24); font-weight: 700; font-variant-numeric: tabular-nums; }
.comparar__celda--diferencia { background: var(--alerta-fondo); }
.comparar__celda--diferencia .comparar__valor { color: var(--alerta); }
/* 9. TABLAS Y PAGINACIÓN =================================================== */
.tabla-contenedor {
position: relative; overflow-x: auto; overscroll-behavior-x: contain;
background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-3);
box-shadow: var(--sombra-1);
scrollbar-width: thin; scrollbar-color: var(--borde-fuerte) transparent;
}
.tabla-contenedor--alto { max-height: 560px; overflow-y: auto; }
.tarjeta > .tabla-contenedor { border: 0; border-radius: 0 0 var(--radio-3) var(--radio-3); box-shadow: none; }
.tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-14); }
.tabla caption { text-align: left; padding: var(--e-3) var(--e-4); font-weight: 600; }
.tabla th {
position: sticky; top: 0; z-index: 1;
background: var(--superficie-2); color: var(--texto-2);
font-size: var(--t-12); font-weight: 600; letter-spacing: 0.02em; text-align: left; white-space: nowrap;
padding: 10px 14px; border-bottom: 1px solid var(--borde);
}
.tabla td { padding: 12px 14px; border-bottom: 1px solid var(--borde); white-space: nowrap; vertical-align: middle; color: var(--texto); }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla th.num, .tabla td.num { text-align: right; }
.tabla td.envolver { white-space: normal; min-width: 220px; }
.tabla td.acciones { text-align: right; width: 1%; }
.tabla td.check-col, .tabla th.check-col { width: 1%; padding-right: 0; }
.tabla tbody tr { transition: background var(--dur-1); }
.tabla tbody tr:hover td { background: var(--superficie-2); }
.tabla tr.fila-clic { cursor: pointer; }
.tabla tr.fila-clic:hover td { background: var(--primario-suave); }
.tabla tr[aria-selected="true"] td { background: var(--primario-suave); }
.tabla tr.fila--atencion td:first-child { box-shadow: inset 3px 0 0 var(--tope-alerta); }
.tabla .celda-principal { font-weight: 600; color: var(--texto); }
.tabla .celda-sub { display: block; font-size: var(--t-12); color: var(--texto-3); font-weight: 400; margin-top: 1px; }
.tabla a.celda-enlace { color: var(--texto); font-weight: 600; text-decoration: none; }
.tabla a.celda-enlace:hover { color: var(--primario-texto); text-decoration: underline; }
.tabla--densa th { padding: 8px 12px; }
.tabla--densa td { padding: 8px 12px; }
.tabla th[aria-sort] button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.tabla th[aria-sort] button:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: 3px; }
.tabla th[aria-sort="ascending"] .ico, .tabla th[aria-sort="descending"] .ico { color: var(--primario-texto); }
.tabla tfoot td { background: var(--superficie-2); font-weight: 600; border-top: 1px solid var(--borde-fuerte); border-bottom: 0; }
/* Tabla → tarjetas en celular: agregar .tabla--tarjetas y data-etiqueta en cada | */
@media (max-width: 640px) {
.tabla-contenedor:has(.tabla--tarjetas) { overflow: visible; background: transparent; border: 0; box-shadow: none; }
.tabla--tarjetas, .tabla--tarjetas tbody, .tabla--tarjetas tr, .tabla--tarjetas td { display: block; width: 100%; }
.tabla--tarjetas thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tabla--tarjetas tbody { display: grid; gap: var(--e-3); }
.tabla--tarjetas tr { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-3); padding: var(--e-2) var(--e-4); box-shadow: var(--sombra-1); }
.tabla--tarjetas td { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--e-3); row-gap: 1px; align-items: center; justify-items: end; padding: 7px 0; border-bottom: 1px dashed var(--borde); white-space: normal; text-align: right; min-width: 0; }
.tabla--tarjetas td > * { grid-column: 2; }
.tabla--tarjetas td.check-col { display: none; }
.tabla--tarjetas td:last-child { border-bottom: 0; }
.tabla--tarjetas td::before { content: attr(data-etiqueta); grid-column: 1; grid-row: 1 / span 3; justify-self: start; color: var(--texto-3); font-size: var(--t-12); font-weight: 600; text-align: left; }
.tabla--tarjetas td[data-etiqueta=""]::before, .tabla--tarjetas td:not([data-etiqueta])::before { display: none; }
.tabla--tarjetas td.num { text-align: right; }
.tabla--tarjetas td.tarjeta-titulo { display: flex; justify-content: flex-start; text-align: left; font-size: var(--t-15); border-bottom: 1px solid var(--borde); padding-bottom: var(--e-2); margin-bottom: 2px; }
.tabla--tarjetas td.tarjeta-titulo::before { display: none; }
.tabla--tarjetas tbody tr:hover td, .tabla--tarjetas tr.fila-clic:hover td { background: transparent; }
.tabla--tarjetas tr.fila--atencion { box-shadow: inset 3px 0 0 var(--tope-alerta), var(--sombra-1); }
.tabla--tarjetas tr.fila--atencion td:first-child { box-shadow: none; }
.tabla--tarjetas tfoot { display: block; }
.tabla--tarjetas td.acciones { width: 100%; }
.tabla--tarjetas td .copiable { justify-content: flex-end; }
}
.paginacion { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); padding: var(--e-3) var(--e-4); font-size: var(--t-13); color: var(--texto-2); }
.paginacion__paginas { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.paginacion__paginas a, .paginacion__paginas button, .paginacion__paginas span {
display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 8px;
border-radius: var(--radio-1); border: 1px solid transparent; background: none;
color: var(--texto-2); text-decoration: none; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer;
}
.paginacion__paginas a:hover, .paginacion__paginas button:hover { background: var(--superficie-3); color: var(--texto); }
.paginacion__paginas [aria-current="page"] { background: var(--texto); color: var(--fondo); }
.paginacion__paginas span { cursor: default; }
/* 10. PESTAÑAS Y PASOS ===================================================== */
.pestanas__lista {
display: flex; gap: var(--e-1); border-bottom: 1px solid var(--borde);
overflow-x: auto; scrollbar-width: none; margin-bottom: var(--e-5);
}
.pestanas__lista::-webkit-scrollbar { display: none; }
.pestana {
position: relative; display: inline-flex; align-items: center; gap: var(--e-2);
min-height: 44px; padding: 0 var(--e-3); border: 0; background: none; cursor: pointer;
color: var(--texto-2); font-weight: 500; font-size: var(--t-14); white-space: nowrap;
border-radius: var(--radio-1) var(--radio-1) 0 0;
}
.pestana:hover { color: var(--texto); background: var(--superficie-3); }
.pestana[aria-selected="true"] { color: var(--texto); font-weight: 600; }
.pestana[aria-selected="true"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--primario); }
.pestana:focus-visible { outline-offset: -2px; }
.pestana__cuenta { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radio-total); background: var(--superficie-3); font-size: var(--t-12); font-weight: 600; display: inline-grid; place-items: center; color: var(--texto-2); }
.pestana[aria-selected="true"] .pestana__cuenta { background: var(--primario-suave); color: var(--primario-texto); }
/* Control segmentado (rango de fechas del gráfico, etc.) */
.segmentado { display: inline-flex; padding: 3px; gap: 2px; background: var(--superficie-3); border-radius: var(--radio-2); }
.segmentado button { border: 0; background: none; min-height: 30px; padding: 0 12px; border-radius: 7px; font-size: var(--t-13); font-weight: 600; color: var(--texto-2); cursor: pointer; }
.segmentado button[aria-pressed="true"] { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-1); }
/* Indicador de pasos */
.pasos { display: flex; gap: var(--e-2); list-style: none; margin: 0; padding: 0; counter-reset: paso; }
.pasos li { flex: 1; display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-13); color: var(--texto-3); font-weight: 500; counter-increment: paso; min-width: 0; }
.pasos li::before {
content: counter(paso); flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
border: 1.5px solid var(--borde-fuerte); font-size: var(--t-12); font-weight: 700; font-variant-numeric: tabular-nums; background: var(--superficie);
}
.pasos li::after { content: ""; flex: 1; height: 1.5px; background: var(--borde); min-width: 8px; }
.pasos li:last-child::after { display: none; }
.pasos li[aria-current="step"] { color: var(--texto); font-weight: 600; }
.pasos li[aria-current="step"]::before { border-color: var(--primario); background: var(--primario); color: var(--en-primario); }
.pasos li.hecho::before { content: "✓"; border-color: var(--primario); color: var(--primario-texto); background: var(--primario-suave); }
.pasos li.hecho::after { background: var(--primario); }
.pasos__texto { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 11. MODAL, DRAWER, TOASTS, TOOLTIP ======================================= */
dialog { color: var(--texto); }
.modal, .drawer {
padding: 0; border: 0; background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-3);
max-width: none; max-height: none; overflow: visible;
}
.modal::backdrop, .drawer::backdrop { background: var(--velo); }
.modal {
width: min(560px, calc(100% - 32px)); max-height: calc(100dvh - 48px);
border-radius: var(--radio-4); display: none; flex-direction: column;
}
.modal[open] { display: flex; animation: modal-entra var(--dur-3) var(--curva); }
.modal--ancho { width: min(760px, calc(100% - 32px)); }
.modal--chico { width: min(420px, calc(100% - 32px)); }
.modal__cabecera { display: flex; align-items: flex-start; gap: var(--e-3); padding: var(--e-5) var(--e-5) var(--e-4); border-bottom: 1px solid var(--borde); }
.modal__titulo { font-family: var(--fuente-titulo); font-size: var(--t-20); font-weight: 700; letter-spacing: -0.01em; }
.modal__sub { font-size: var(--t-14); color: var(--texto-2); margin-top: 2px; }
.modal__cerrar { margin-left: auto; margin-top: -6px; margin-right: -8px; }
.modal__cuerpo { padding: var(--e-5); overflow-y: auto; flex: 1; min-height: 0; }
.modal__pie { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--e-2); padding: var(--e-4) var(--e-5); border-top: 1px solid var(--borde); background: var(--superficie-2); border-radius: 0 0 var(--radio-4) var(--radio-4); }
.modal__pie .empujar-izq { margin-right: auto; }
.modal__icono { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--peligro-fondo); color: var(--peligro); }
.modal__icono--marca { background: var(--primario-suave); color: var(--primario-texto); }
.drawer {
margin: 0 0 0 auto; width: min(520px, 100%); height: 100dvh; max-height: 100dvh;
border-radius: var(--radio-4) 0 0 var(--radio-4); display: none; flex-direction: column;
}
.drawer[open] { display: flex; animation: drawer-entra var(--dur-3) var(--curva); }
.drawer--ancho { width: min(720px, 100%); }
.drawer__cabecera { display: flex; align-items: flex-start; gap: var(--e-3); padding: var(--e-5); border-bottom: 1px solid var(--borde); }
.drawer__cuerpo { flex: 1; overflow-y: auto; padding: var(--e-5); }
.drawer__pie { display: flex; flex-wrap: wrap; gap: var(--e-2); justify-content: flex-end; padding: var(--e-4) var(--e-5); border-top: 1px solid var(--borde); background: var(--superficie-2); }
/* En modales y drawers largos, ningún bloque se achica por debajo de su contenido (scrollea el cuerpo) */
.drawer__cuerpo > *, .modal__cuerpo > * { flex-shrink: 0; min-height: min-content; }
body:has(dialog[open]) { overflow: hidden; }
/* Muestra estática de modal/drawer (catálogo) */
.muestra-modal { position: static; display: flex; flex-direction: column; width: 100%; max-width: 560px; border-radius: var(--radio-4); box-shadow: var(--sombra-3); background: var(--superficie); border: 1px solid var(--borde); }
/* Toasts */
.toasts { position: fixed; z-index: var(--z-toast); right: var(--e-6); bottom: var(--e-6); display: grid; gap: var(--e-2); width: min(380px, calc(100% - 32px)); pointer-events: none; }
.toast {
pointer-events: auto; display: flex; align-items: flex-start; gap: var(--e-3);
padding: var(--e-3) var(--e-3) var(--e-3) var(--e-4); border-radius: var(--radio-3);
background: var(--texto); color: var(--fondo); box-shadow: var(--sombra-3); font-size: var(--t-14);
animation: toast-entra var(--dur-3) var(--curva);
}
.toast .ico { margin-top: 1px; }
/* El toast invierte colores (fondo = --texto), así que los íconos usan el tono del tema contrario */
.toast--exito .ico { color: var(--toast-exito, #6fe0a8); }
.toast--peligro .ico { color: var(--toast-peligro, #ff9a92); }
.toast--alerta .ico { color: var(--toast-alerta, #f6c86d); }
:root[data-tema="oscuro"] .toast { --toast-exito: #11663a; --toast-peligro: #b3261e; --toast-alerta: #85500a; }
@media (prefers-color-scheme: dark) {
:root:not([data-tema="claro"]) .toast { --toast-exito: #11663a; --toast-peligro: #b3261e; --toast-alerta: #85500a; }
}
.toast__texto { flex: 1; padding-top: 1px; }
.toast__texto strong { display: block; }
.toast__cerrar { border: 0; background: none; color: inherit; opacity: 0.7; cursor: pointer; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; margin: -2px -2px 0 0; }
.toast__cerrar:hover { opacity: 1; background: rgba(127,127,127,.2); }
.toast.saliendo { animation: toast-sale var(--dur-2) ease-in forwards; }
.muestra-toast { position: static; animation: none; max-width: 380px; }
/* Tooltip CSS: data-tooltip="Texto" */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
content: attr(data-tooltip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 4px);
z-index: var(--z-tooltip); width: max-content; max-width: 260px; padding: 6px 10px; border-radius: var(--radio-1);
background: var(--texto); color: var(--fondo); font-size: var(--t-12); font-weight: 500; line-height: 1.4; white-space: normal; text-align: center;
opacity: 0; pointer-events: none; transition: opacity var(--dur-1), transform var(--dur-1);
}
[data-tooltip]:hover::after, [data-tooltip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
[data-tooltip-lado="abajo"]::after { bottom: auto; top: calc(100% + 8px); }
.ayuda-ico { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 0; background: none; color: var(--texto-3); cursor: help; border-radius: 50%; padding: 0; }
.ayuda-ico:hover { color: var(--texto); }
/* 12. AVISOS, VACÍO, SKELETON ============================================= */
.aviso {
--a-fg: var(--info); --a-bg: var(--info-fondo); --a-bd: var(--info-borde);
display: flex; gap: var(--e-3); align-items: flex-start;
padding: var(--e-3) var(--e-4); border-radius: var(--radio-3);
background: var(--a-bg); border: 1px solid var(--a-bd); color: var(--texto); font-size: var(--t-14);
}
.aviso > .ico { color: var(--a-fg); margin-top: 1px; }
.aviso__cuerpo { flex: 1; min-width: 0; }
.aviso__titulo { font-weight: 600; color: var(--texto); }
.aviso__texto { color: var(--texto-2); }
.aviso__acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-2); }
.aviso--exito { --a-fg: var(--exito); --a-bg: var(--exito-fondo); --a-bd: var(--exito-borde); }
.aviso--alerta { --a-fg: var(--alerta); --a-bg: var(--alerta-fondo); --a-bd: var(--alerta-borde); }
.aviso--peligro { --a-fg: var(--peligro); --a-bg: var(--peligro-fondo); --a-bd: var(--peligro-borde); }
.aviso--banda { border-radius: 0; border-left: 0; border-right: 0; border-top: 0; padding: var(--e-3) var(--e-6); }
.vacio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--e-2); padding: var(--e-12) var(--e-6); }
.vacio__icono { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--superficie-3); color: var(--texto-2); margin-bottom: var(--e-2); }
.vacio__titulo { font-size: var(--t-16); font-weight: 600; }
.vacio__texto { color: var(--texto-2); max-width: 44ch; font-size: var(--t-14); }
.vacio .btn { margin-top: var(--e-3); }
.esqueleto {
display: block; border-radius: var(--radio-1); min-height: 12px;
background: linear-gradient(90deg, var(--superficie-3) 0%, var(--borde) 40%, var(--superficie-3) 80%);
background-size: 300% 100%; animation: brillo 1.4s ease-in-out infinite;
}
.esqueleto--texto { height: 12px; margin: 6px 0; }
.esqueleto--titulo { height: 24px; width: 50%; }
.esqueleto--circulo { width: 32px; height: 32px; border-radius: 50%; }
/* 13. LÍNEA DE TIEMPO, ÁRBOL, MATRIZ ====================================== */
.linea-tiempo { list-style: none; margin: 0; padding: 0; }
.linea-tiempo__item { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--e-3); padding-bottom: var(--e-5); }
.linea-tiempo__item:last-child { padding-bottom: 0; }
.linea-tiempo__item::before { content: ""; position: absolute; left: 11px; top: 26px; bottom: 2px; width: 2px; background: var(--borde); border-radius: 2px; }
.linea-tiempo__item:last-child::before { display: none; }
.linea-tiempo__marca { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--superficie-3); color: var(--texto-2); border: 1px solid var(--borde); }
.linea-tiempo__marca .ico { width: 13px; height: 13px; stroke-width: 2.25; }
.linea-tiempo__marca--exito { background: var(--exito-fondo); color: var(--exito); border-color: var(--exito-borde); }
.linea-tiempo__marca--alerta { background: var(--alerta-fondo); color: var(--alerta); border-color: var(--alerta-borde); }
.linea-tiempo__marca--peligro { background: var(--peligro-fondo); color: var(--peligro); border-color: var(--peligro-borde); }
.linea-tiempo__marca--marca { background: var(--primario); color: var(--en-primario); border-color: var(--primario); }
.linea-tiempo__marca--pendiente { background: var(--superficie); color: var(--alerta); border: 1.5px dashed var(--alerta); }
.linea-tiempo__titulo { font-weight: 600; font-size: var(--t-14); }
.linea-tiempo__hora { font-family: var(--fuente-mono); font-size: var(--t-12); color: var(--texto-3); }
.linea-tiempo__texto { font-size: var(--t-14); color: var(--texto-2); margin-top: 2px; }
.linea-tiempo__mensaje { margin-top: var(--e-2); padding: var(--e-3); border-radius: var(--radio-2); background: var(--superficie-2); border: 1px solid var(--borde); font-size: var(--t-14); }
.arbol, .arbol ul { list-style: none; margin: 0; padding: 0; }
.arbol ul { margin-left: 15px; padding-left: 18px; border-left: 1.5px solid var(--borde-fuerte); }
.arbol li { position: relative; }
.arbol ul > li::before { content: ""; position: absolute; left: -18px; top: 22px; width: 14px; border-top: 1.5px solid var(--borde-fuerte); }
.arbol ul > li:last-child::after { content: ""; position: absolute; left: -20px; top: 23px; bottom: 0; width: 3px; background: var(--superficie); }
.arbol__nodo { display: flex; align-items: center; gap: var(--e-3); min-height: 44px; padding: 4px var(--e-3); border-radius: var(--radio-2); margin: 2px 0; }
.arbol__nodo:hover { background: var(--superficie-2); }
.arbol__icono { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--primario-suave); color: var(--primario-texto); flex: none; }
.arbol__icono--sucursal { background: var(--acento-suave); color: var(--acento-texto); }
.arbol__nombre { font-weight: 600; font-size: var(--t-14); }
.arbol__meta { font-size: var(--t-12); color: var(--texto-3); }
.arbol__fin { margin-left: auto; display: flex; align-items: center; gap: var(--e-2); }
.matriz th, .matriz td { text-align: center; }
.matriz th:first-child, .matriz td:first-child { text-align: left; position: sticky; left: 0; background: var(--superficie); z-index: 2; }
.matriz thead th:first-child { background: var(--superficie-2); z-index: 3; }
.matriz tbody tr:hover td:first-child { background: var(--superficie-2); }
.matriz .grupo-permiso td { background: var(--superficie-2); font-size: var(--t-12); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3); }
.matriz .si { color: var(--exito); display: inline-grid; place-items: center; }
.matriz .no { color: var(--texto-3); }
/* 14. CÓDIGO, AVATAR, DESPLEGABLES ======================================== */
.codigo { border-radius: var(--radio-3); background: var(--codigo-fondo); border: 1px solid var(--codigo-borde); overflow: hidden; min-width: 0; }
.codigo__barra { display: flex; align-items: center; gap: var(--e-2); padding: 6px 6px 6px 14px; border-bottom: 1px solid rgba(255,255,255,.08); color: var(--codigo-tenue); font-size: var(--t-12); font-family: var(--fuente-mono); }
.codigo__barra .btn { margin-left: auto; color: var(--codigo-texto); }
.codigo__barra .btn:hover { background: rgba(255,255,255,.08); color: #ffffff; }
.codigo pre { margin: 0; padding: var(--e-4); overflow-x: auto; color: var(--codigo-texto); font-size: var(--t-13); line-height: 1.65; tab-size: 2; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
.codigo .t-clave { color: var(--codigo-clave); }
.codigo .t-cadena { color: var(--codigo-cadena); }
.codigo .t-numero { color: var(--codigo-numero); }
.codigo .t-bool { color: var(--codigo-bool); }
.codigo .t-tenue { color: var(--codigo-tenue); }
.metodo { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 4px; font-family: var(--fuente-mono); font-size: 11px; font-weight: 600; letter-spacing: .03em; }
.metodo--get { background: var(--info-fondo); color: var(--info); }
.metodo--post { background: var(--exito-fondo); color: var(--exito); }
.metodo--put, .metodo--patch { background: var(--alerta-fondo); color: var(--alerta); }
.metodo--delete { background: var(--peligro-fondo); color: var(--peligro); }
/* Secreto enmascarado (API key) */
.secreto { display: flex; align-items: center; gap: var(--e-2); padding: 4px 4px 4px 12px; border: 1px solid var(--borde-fuerte); border-radius: var(--radio-2); background: var(--superficie-2); min-width: 0; }
.secreto code { all: unset; flex: 1; min-width: 0; font-family: var(--fuente-mono); font-size: var(--t-13); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar {
--av-bg: #d9eee6; --av-fg: #0a5e49;
display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%;
background: var(--av-bg); color: var(--av-fg); font-size: var(--t-12); font-weight: 700; letter-spacing: .02em;
}
.avatar--chico { width: 24px; height: 24px; font-size: 10px; }
.avatar--grande { width: 44px; height: 44px; font-size: var(--t-15); }
.avatar--2 { --av-bg: #fcebcd; --av-fg: #7a4300; }
.avatar--3 { --av-bg: #e3e9fa; --av-fg: #1f4f94; }
.avatar--4 { --av-bg: #f1e6f8; --av-fg: #643793; }
.avatar--5 { --av-bg: #fbe3df; --av-fg: #9c2a20; }
.avatar--6 { --av-bg: #e6ece9; --av-fg: #3a4741; }
:root[data-tema="oscuro"] .avatar { --av-bg: rgba(76,201,160,.18); --av-fg: #8fe3c4; }
:root[data-tema="oscuro"] .avatar--2 { --av-bg: rgba(242,182,84,.18); --av-fg: #f6cd85; }
:root[data-tema="oscuro"] .avatar--3 { --av-bg: rgba(90,150,240,.2); --av-fg: #a9c8f7; }
:root[data-tema="oscuro"] .avatar--4 { --av-bg: rgba(160,110,230,.2); --av-fg: #d2b8f6; }
:root[data-tema="oscuro"] .avatar--5 { --av-bg: rgba(240,90,80,.2); --av-fg: #ffaaa3; }
:root[data-tema="oscuro"] .avatar--6 { --av-bg: rgba(181,193,187,.14); --av-fg: #c7d1cc; }
@media (prefers-color-scheme: dark) {
:root:not([data-tema="claro"]) .avatar { --av-bg: rgba(76,201,160,.18); --av-fg: #8fe3c4; }
:root:not([data-tema="claro"]) .avatar--2 { --av-bg: rgba(242,182,84,.18); --av-fg: #f6cd85; }
:root:not([data-tema="claro"]) .avatar--3 { --av-bg: rgba(90,150,240,.2); --av-fg: #a9c8f7; }
:root:not([data-tema="claro"]) .avatar--4 { --av-bg: rgba(160,110,230,.2); --av-fg: #d2b8f6; }
:root:not([data-tema="claro"]) .avatar--5 { --av-bg: rgba(240,90,80,.2); --av-fg: #ffaaa3; }
:root:not([data-tema="claro"]) .avatar--6 { --av-bg: rgba(181,193,187,.14); --av-fg: #c7d1cc; }
}
.persona { display: flex; align-items: center; gap: var(--e-3); min-width: 0; }
.persona__texto { min-width: 0; display: grid; line-height: 1.3; }
.persona__nombre { font-weight: 600; font-size: var(--t-14); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.persona__meta { font-size: var(--t-12); color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Desplegable sin JS (details/summary). app.js lo cierra con Escape o clic afuera. */
.desplegable { position: relative; }
.desplegable > summary { list-style: none; cursor: pointer; }
.desplegable:not([open]) > .desplegable__menu { display: none; }
.desplegable__menu--ancho { width: 340px; }
.desplegable > summary::-webkit-details-marker { display: none; }
.desplegable__menu {
position: absolute; right: 0; top: calc(100% + 6px); z-index: var(--z-desplegable);
min-width: 240px; max-width: min(320px, calc(100vw - 24px)); padding: 6px;
background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-3); box-shadow: var(--sombra-2);
animation: aparece var(--dur-2) var(--curva);
}
.desplegable__menu--izq { right: auto; left: 0; }
.desplegable__cabecera { padding: 10px 10px 12px; border-bottom: 1px solid var(--borde); margin-bottom: 6px; }
.desplegable__titulo { padding: 8px 10px 4px; font-size: var(--t-11); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); }
.desplegable__item {
display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 10px;
border: 0; border-radius: var(--radio-1); background: none; color: var(--texto); text-decoration: none;
font-size: var(--t-14); text-align: left; cursor: pointer;
}
.desplegable__item:hover { background: var(--superficie-3); }
.desplegable__item .ico { color: var(--texto-3); }
.desplegable__item[aria-checked="true"] { font-weight: 600; }
.desplegable__item[aria-checked="true"] .ico-check { visibility: visible; color: var(--primario-texto); }
.desplegable__item .ico-check { margin-left: auto; visibility: hidden; }
.desplegable__item--peligro { color: var(--peligro); }
.desplegable__item--peligro .ico { color: var(--peligro); }
.desplegable__separador { height: 1px; background: var(--borde); margin: 6px 0; }
/* Selector de sucursal (botón de la barra superior) */
.selector {
display: inline-flex; align-items: center; gap: var(--e-2); min-height: 40px; padding: 0 10px 0 12px;
border: 1px solid var(--borde-fuerte); border-radius: var(--radio-2); background: var(--superficie);
font-size: var(--t-14); font-weight: 500; color: var(--texto); max-width: 260px;
}
.selector:hover { border-color: var(--texto-3); }
.selector .ico { color: var(--texto-3); }
.selector__texto { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.selector__chev { transition: transform var(--dur-2); }
details[open] > .selector .selector__chev { transform: rotate(180deg); }
/* Botón de usuario */
.usuario-btn { display: inline-flex; align-items: center; gap: var(--e-2); padding: 4px 8px 4px 4px; border-radius: var(--radio-total); min-height: 40px; }
.usuario-btn:hover { background: var(--superficie-3); }
.usuario-btn__nombre { font-size: var(--t-14); font-weight: 600; white-space: nowrap; }
/* Notificaciones */
.notificacion { display: flex; gap: var(--e-3); padding: 10px; border-radius: var(--radio-2); text-decoration: none; color: inherit; }
.notificacion:hover { background: var(--superficie-3); }
.notificacion__ico { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--alerta-fondo); color: var(--alerta); }
.notificacion__ico--exito { background: var(--exito-fondo); color: var(--exito); }
.notificacion__ico--info { background: var(--info-fondo); color: var(--info); }
.notificacion__texto { font-size: var(--t-13); line-height: 1.45; color: var(--texto-2); }
.notificacion__texto strong { color: var(--texto); display: block; font-size: var(--t-14); }
/* 15. GRÁFICO DE BARRAS Y VARIOS ========================================== */
/* Barras CSS: … */
.barras { display: flex; align-items: flex-end; gap: 3px; height: 180px; border-bottom: 1px solid var(--borde-fuerte);
background-image: linear-gradient(var(--grilla) 1px, transparent 1px); background-size: 100% 25%; background-position: 0 0; }
.barras > span { position: relative; flex: 1; min-width: 4px; height: var(--alto, 0%); border-radius: 3px 3px 0 0; background: var(--serie-1-suave); transition: background var(--dur-1); }
.barras > span.fin-de-semana { background: var(--serie-1-medio); }
.barras > span.hoy { background: repeating-linear-gradient(135deg, var(--serie-2) 0 4px, color-mix(in srgb, var(--serie-2) 60%, transparent) 4px 8px); }
.barras > span:hover, .barras > span:focus-visible { background: var(--serie-1); opacity: 1; outline: none; }
.barras > span[data-valor]:hover::after, .barras > span[data-valor]:focus-visible::after {
content: attr(data-valor); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
white-space: pre; padding: 4px 8px; border-radius: var(--radio-1); background: var(--texto); color: var(--fondo);
font-size: var(--t-12); font-weight: 600; z-index: 5; text-align: center;
}
.grafico-barras { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--e-2); }
.barras__ejey { display: flex; flex-direction: column; justify-content: space-between; height: 197px; margin-top: -8.5px; line-height: 17px; font-size: var(--t-11); color: var(--texto-3); text-align: right; font-variant-numeric: tabular-nums; }
.grafico-barras .barras__eje { grid-column: 2; }
.barras__eje { display: flex; justify-content: space-between; font-size: var(--t-12); color: var(--texto-3); margin-top: 6px; font-variant-numeric: tabular-nums; }
.leyenda { display: flex; flex-wrap: wrap; gap: var(--e-4); font-size: var(--t-13); color: var(--texto-2); }
.leyenda__item { display: inline-flex; align-items: center; gap: 6px; }
.leyenda__muestra { width: 10px; height: 10px; border-radius: 3px; background: var(--serie-1-suave); }
/* Lista simple con separadores */
.lista { list-style: none; margin: 0; padding: 0; }
.lista__item { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3) 0; border-bottom: 1px solid var(--borde); min-width: 0; }
.lista__item:last-child { border-bottom: 0; }
.lista--relleno .lista__item { padding: var(--e-3) var(--e-5); }
/* Zona de carga de archivos */
.carga { display: grid; place-items: center; gap: var(--e-2); text-align: center; padding: var(--e-6); border: 1.5px dashed var(--borde-fuerte); border-radius: var(--radio-3); background: var(--superficie-2); color: var(--texto-2); font-size: var(--t-14); cursor: pointer; }
.carga:hover { border-color: var(--primario); color: var(--texto); }
/* Logo */
.logo-marca .hoja { fill: var(--lateral-marca); }
.logo-marca .hoja--suerte { fill: var(--acento); }
.logo-completo { display: inline-flex; align-items: center; gap: 10px; color: var(--texto); text-decoration: none; }
.logo-completo .logo-marca { width: 36px; height: 36px; }
.logo-completo .logo-marca .hoja { fill: var(--primario); }
.logo-completo .lateral__nombre { font-size: var(--t-20); color: var(--texto); }
.logo-completo .lateral__nombre span { color: var(--primario-texto); }
/* Pantalla de acceso (login) */
.acceso { min-height: 100dvh; display: grid; place-items: center; padding: var(--e-6) var(--e-4); }
.acceso__caja { width: min(420px, 100%); }
/* 16. RESPONSIVE ============================================================ */
@media (max-width: 1279px) {
.grilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.saldo__valor { font-size: var(--t-28); }
}
@media (max-width: 1023px) {
.app { grid-template-columns: minmax(0, 1fr); }
.lateral {
position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); height: 100dvh;
transform: translateX(-100%); transition: transform var(--dur-3) var(--curva), visibility 0s linear var(--dur-3);
visibility: hidden; box-shadow: var(--sombra-3);
}
:root[data-menu-movil="abierto"] .lateral { transform: none; visibility: visible; transition: transform var(--dur-3) var(--curva); }
:root[data-menu-movil="abierto"] .lateral-velo { display: block; position: fixed; inset: 0; z-index: calc(var(--z-lateral) - 1); background: var(--velo); animation: aparece var(--dur-2); }
:root[data-menu-movil="abierto"] body { overflow: hidden; }
.btn-barra.lateral__cerrar { display: inline-flex; color: var(--lateral-texto-2); }
.lateral__cerrar:hover { background: var(--lateral-hover); color: var(--lateral-texto); }
.lateral__item { min-height: 44px; }
.lateral__compactar { display: none !important; }
.btn-barra.barra__menu { display: inline-flex; margin-left: -8px; }
.barra { padding: var(--e-2) var(--e-4); }
.contenido { padding: var(--e-5) var(--e-4) var(--e-10); }
.grilla--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grilla--principal { grid-template-columns: minmax(0, 1fr); }
.saldos { grid-template-columns: minmax(0, 1fr); gap: 0; }
.saldos__op { width: 100%; height: 28px; font-size: var(--t-20); }
}
@media (max-width: 767px) {
.barra { flex-wrap: wrap; row-gap: 0; padding-top: 6px; padding-bottom: 0; }
.barra__titulo { flex: 1; }
.barra__contexto { order: 3; width: 100%; margin: 0 -16px; padding: 6px 16px 8px; justify-content: space-between; border-top: 1px solid var(--borde); flex: 1 1 100%; }
.barra__acciones { margin-left: auto; margin-right: -6px; }
.barra__separador, .usuario-btn__nombre, .barra .en-vivo__texto-largo { display: none; }
.selector { min-height: 36px; max-width: 56vw; }
.contenido { padding-bottom: calc(var(--alto-inferior) + var(--e-8) + env(safe-area-inset-bottom)); }
h1 { font-size: var(--t-24); }
.pagina-cabecera { margin-bottom: var(--e-5); }
.pagina-acciones { width: 100%; }
.pagina-acciones .btn { flex: 1 1 auto; }
.grilla--2, .grilla--3, .form-grilla { grid-template-columns: minmax(0, 1fr); }
.kpi__valor { font-size: var(--t-24); }
.barra-inferior {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-barra);
height: calc(var(--alto-inferior) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
background: var(--superficie); border-top: 1px solid var(--borde); box-shadow: 0 -4px 16px rgba(0,0,0,.06);
}
.barra-inferior a {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 48px;
color: var(--texto-3); text-decoration: none; font-size: var(--t-11); font-weight: 600; position: relative;
}
.barra-inferior a[aria-current="page"] { color: var(--primario-texto); }
.barra-inferior a[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--primario); }
.barra-inferior .ico { width: 22px; height: 22px; }
.toasts { left: 16px; right: 16px; width: auto; bottom: calc(var(--alto-inferior) + 12px + env(safe-area-inset-bottom)); }
.modal { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: var(--radio-4) var(--radio-4) 0 0; max-height: 92dvh; }
.modal[open] { animation: hoja-entra var(--dur-3) var(--curva); }
.modal__pie { border-radius: 0; padding-bottom: calc(var(--e-4) + env(safe-area-inset-bottom)); }
.modal__pie .btn { flex: 1 1 auto; }
.drawer__pie { padding-bottom: calc(var(--e-4) + env(safe-area-inset-bottom)); }
.barra__migas { flex: 1; overflow: hidden; }
.drawer { border-radius: 0; }
.datos { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.datos dd { margin-bottom: var(--e-3); }
.comparar__valor { font-size: var(--t-20); }
.otp input { width: 44px; height: 52px; }
.otp { gap: 6px; }
.buscador { max-width: none; flex-basis: 100%; }
.pasos__texto { display: none; }
.pasos li[aria-current="step"] .pasos__texto { display: inline; }
.desplegable__menu { position: fixed; left: 12px; right: 12px; top: auto; max-width: none; min-width: 0; width: auto; }
.barra .desplegable__menu { top: 60px; }
.barra__contexto .desplegable__menu { top: 104px; }
}
@media (max-width: 640px) {
.grilla--4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.tarjeta--relleno, .tarjeta__cuerpo, .kpi, .saldo, .cuenta { padding: var(--e-4); }
.tarjeta__cabecera { padding: var(--e-3) var(--e-4); }
.saldo__valor { font-size: var(--t-28); }
.grilla--4 .kpi__valor { font-size: var(--t-20); }
.paginacion { justify-content: center; }
/* Migas: en celular queda solo el último nivel (la pantalla trae su "Volver") */
.barra__migas > a, .barra__migas > .ico { display: none; }
}
@media (max-width: 380px) {
.grilla--4 { grid-template-columns: minmax(0, 1fr); }
}
/* Áreas táctiles mínimas de 44 px en pantallas táctiles */
@media (pointer: coarse) {
.btn, .campo__control, .select select, .selector { min-height: 44px; }
.btn--icono { width: 44px; }
.btn--chico { min-height: 40px; }
.btn--icono.btn--chico { width: 40px; }
.btn-barra { width: 44px; height: 44px; }
.chip { min-height: 40px; }
.paginacion__paginas a, .paginacion__paginas button, .paginacion__paginas span { min-width: 44px; height: 44px; }
.desplegable__item { min-height: 44px; }
.check { min-height: 32px; align-items: center; }
.check input { margin-top: 0; }
.segmentado button { min-height: 44px; }
.tabla th[aria-sort] button { min-height: 44px; }
/* El ícono se ve de 20 px, pero el área táctil es de 44 px: el margen negativo compensa el tamaño. */
.ayuda-ico { width: 44px; height: 44px; margin: -12px; }
}
/* Movimiento */
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes latido { 0% { transform: scale(.6); opacity: .7; } 80%, 100% { transform: scale(1.6); opacity: 0; } }
@keyframes brillo { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@keyframes aparece { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes modal-entra { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes hoja-entra { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes drawer-entra { from { transform: translateX(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes toast-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes toast-sale { to { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
.en-vivo__punto::after { display: none; }
}
/* Impresión */
@media print {
:root { --fondo: #ffffff; --superficie: #ffffff; --superficie-2: #ffffff; --texto: #000000; --texto-2: #333333; --texto-3: #555555; --borde: #bbbbbb; }
body { background: #ffffff; font-size: 11pt; }
.app { display: block; }
.lateral, .lateral-velo, .barra, .barra-inferior, .toasts, .pagina-acciones, .filtros, .paginacion, .btn, .saltar, .no-imprimir { display: none !important; }
.contenido { padding: 0; max-width: none; }
.tarjeta, .tabla-contenedor { box-shadow: none; border-color: #bbbbbb; break-inside: avoid; }
.tabla-contenedor { overflow: visible; }
.tabla th { position: static; }
.saldo--destacado { background: #ffffff; color: #000000; border: 2px solid #000000; }
.saldo--destacado .saldo__etiqueta, .saldo--destacado .saldo__nota { color: #333333; }
.codigo { background: #f4f4f4; border-color: #bbbbbb; }
.codigo pre, .codigo .t-clave, .codigo .t-cadena, .codigo .t-numero, .codigo .t-bool { color: #000000; }
a { color: #000000; text-decoration: none; }
.solo-imprimir { display: block !important; }
}
.solo-imprimir { display: none; }
dialog:focus, dialog:focus-visible { outline: none; }
/* 17. PIEZAS COMPARTIDAS NUEVAS ============================================ */
/* Las usan el panel y la consola. HTML copiable en GUIA.md §5 y en componentes.html. */
/* --- Consola: etiqueta junto al nombre, pastilla de la barra y botones del menú --- */
.lateral__cara.etiqueta {
height: 20px; padding: 0 7px; margin-left: 2px; flex: none;
background: rgba(255, 255, 255, 0.1); color: var(--lateral-texto);
font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.lateral__boton { width: 100%; background: none; border: 0; cursor: pointer; text-align: left; font: inherit; }
@media (min-width: 1024px) {
:root[data-menu="compacto"] .lateral__cara { display: none; }
}
@media (max-width: 1023px) {
:root[data-cara="consola"] .lateral__marca { padding-left: var(--e-4); padding-right: var(--e-2); gap: var(--e-2); }
:root[data-cara="consola"] .lateral__marca a { gap: 8px; }
.lateral__cara.etiqueta { padding: 0 5px; letter-spacing: 0.04em; }
}
.barra__cara {
display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px 0 10px;
border-radius: var(--radio-total); border: 1px solid var(--cara-acento-borde, var(--borde));
background: var(--cara-acento-fondo, var(--superficie-3)); color: var(--cara-acento, var(--texto));
font-size: var(--t-13); font-weight: 600; white-space: nowrap; min-width: 0;
}
.barra__cara .ico { width: 16px; height: 16px; flex: none; }
@media (max-width: 380px) {
.barra__cara { padding: 0 10px 0 8px; font-size: var(--t-12); }
}
.notificacion__ico--peligro { background: var(--peligro-fondo); color: var(--peligro); }
.notificacion__ico--revision { background: var(--revision-fondo); color: var(--revision); }
/* --- Paginación con "Filas por página" (select[data-filas], recordado en lc-filas) --- */
.paginacion--pie { border-top: 1px solid var(--borde); background: var(--superficie-2); border-radius: 0 0 var(--radio-3) var(--radio-3); }
.paginacion__tam { display: flex; align-items: center; gap: var(--e-2); margin-left: auto; }
.paginacion__tam label { color: var(--texto-2); white-space: nowrap; }
.paginacion__tam .select select { min-height: 32px; padding-top: 0; padding-bottom: 0; font-size: var(--t-13); width: auto; }
@media (max-width: 640px) {
.paginacion--pie { background: transparent; border: 0; padding-left: 0; padding-right: 0; }
.paginacion__tam { margin-left: 0; order: 3; }
}
@media (pointer: coarse) {
.paginacion__tam .select select { min-height: 44px; }
}
/* --- Gráfico de barras dobles: dos series por día (serie 1 sólida, serie 2 rayada) ---
… */
.barras--doble { gap: 6px; }
.barras--doble > span {
display: flex; align-items: flex-end; justify-content: center; gap: 2px;
height: 100%; padding: 0 2px; background: none; border-radius: var(--radio-1) var(--radio-1) 0 0;
}
.barras--doble > span > i { flex: 1 1 0; max-width: 30px; height: var(--alto, 0%); border-radius: 3px 3px 0 0; background: var(--serie-1); }
.barras--doble > span > i + i {
background: repeating-linear-gradient(135deg, var(--serie-2) 0 3px, color-mix(in srgb, var(--serie-2) 40%, transparent) 3px 6px);
box-shadow: inset 0 0 0 1.5px var(--alerta);
}
.barras--doble > span:hover, .barras--doble > span:focus-visible { background: color-mix(in srgb, var(--texto) 7%, transparent); }
.barras--doble > span:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; }
.barras--doble > span.hoy { background: none; }
.barras--doble > span.hoy:hover, .barras--doble > span.hoy:focus-visible { background: color-mix(in srgb, var(--texto) 7%, transparent); }
/* Eje X con una etiqueta por día, centrada bajo su par de barras (pocos días: 7 a 14) */
.barras__eje--dias { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; text-align: center; }
.barras__eje--dias > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leyenda__muestra--serie-1 { background: var(--serie-1); }
.leyenda__muestra--rayada {
background: repeating-linear-gradient(135deg, var(--serie-2) 0 2px, color-mix(in srgb, var(--serie-2) 40%, transparent) 2px 4px);
box-shadow: inset 0 0 0 1.5px var(--alerta);
}
.barras__datos { margin-top: var(--e-3); font-size: var(--t-13); }
.barras__datos > summary { cursor: pointer; color: var(--primario-texto); font-weight: 600; width: max-content; min-height: 32px; display: flex; align-items: center; }
.barras__datos .tabla { margin-top: var(--e-2); }
/* --- Comprobante (recibo de papel): transaccion.html, retiros.html y los modales de comprobante --- */
.recibo-marco { padding: var(--e-6) var(--e-5); background: var(--recibo-escritorio); border-radius: var(--radio-3); }
.recibo{
position: relative; max-width: 380px; margin: 0 auto;
padding: var(--e-8) var(--e-5) var(--e-8);
background: var(--superficie); color: var(--texto); font-size: var(--t-13);
}
/* Bordes troquelados arriba y abajo (medialunas del color del escritorio) */
.recibo::before, .recibo::after{
content: ""; position: absolute; left: 0; right: 0; height: 12px;
background-size: 16px 12px; background-repeat: repeat-x;
}
.recibo::before{ top: -6px; background-image: radial-gradient(circle at 50% 50%, var(--recibo-escritorio) 5.5px, transparent 6px); }
.recibo::after{ bottom: -6px; background-image: radial-gradient(circle at 50% 50%, var(--recibo-escritorio) 5.5px, transparent 6px); }
.recibo__cabecera{ display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-3); padding-bottom: var(--e-4); border-bottom: 1px solid var(--borde-fuerte); }
.recibo__logo .logo-marca{ width: 26px; height: 26px; }
.recibo__logo .lateral__nombre{ font-size: var(--t-16); }
.recibo__tipo{ display: grid; text-align: right; line-height: 1.35; }
.recibo__tipo strong{ font-size: var(--t-12); text-transform: uppercase; letter-spacing: 0.08em; }
.recibo__tipo .mono{ font-size: var(--t-12); color: var(--texto-2); }
.recibo__importe{ text-align: center; padding: var(--e-5) 0 var(--e-4); }
.recibo__etiqueta{ font-size: var(--t-12); text-transform: uppercase; letter-spacing: 0.08em; color: var(--texto-3); font-weight: 600; }
.recibo__monto{ font-family: var(--fuente-titulo); font-size: var(--t-32); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums lining-nums; }
.recibo__fecha{ color: var(--texto-2); font-variant-numeric: tabular-nums; }
.recibo__bloque{ padding: var(--e-3) 0; border-top: 1px dashed var(--borde-fuerte); }
.recibo__bloque dl{ margin: 0; display: grid; gap: 6px; }
.recibo__titulo-bloque{ font-size: var(--t-11); text-transform: uppercase; letter-spacing: 0.08em; color: var(--texto-3); font-weight: 700; margin-bottom: 2px; }
.recibo__fila{ display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-3); }
.recibo__fila dt{ color: var(--texto-3); flex: none; }
.recibo__fila dd{ margin: 0; text-align: right; font-weight: 500; overflow-wrap: anywhere; min-width: 0; }
.recibo__fila .mono{ font-size: var(--t-12); letter-spacing: 0.02em; }
.recibo__sello{
--sello: var(--alerta);
display: block; width: max-content; max-width: 100%; margin: var(--e-4) auto var(--e-2);
padding: 6px 12px; border: 2px solid var(--sello); border-radius: var(--radio-1);
color: var(--sello); font-size: var(--t-12); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-align: center;
transform: rotate(-3deg);
}
.recibo__sello--exito { --sello: var(--exito); }
.recibo__sello--neutro { --sello: var(--neutro); }
.recibo__sello--peligro { --sello: var(--peligro); }
.recibo__pie{ margin-top: var(--e-4); padding-top: var(--e-3); border-top: 1px solid var(--borde-fuerte); text-align: center; color: var(--texto-3); font-size: var(--t-11); line-height: 1.6; }
.recibo__pie .mono{ color: var(--texto-2); letter-spacing: 0.06em; }
@media (max-width: 767px) {
.recibo-marco { padding: var(--e-5) var(--e-3); }
.recibo { padding-left: var(--e-4); padding-right: var(--e-4); }
}
@media (max-width: 380px) {
.recibo__fila { flex-direction: column; gap: 0; }
.recibo__fila dd { text-align: left; }
}
/* --- Estado del servicio (salud): banner con ícono, estado y motivos --- */
.estado-servicio {
--es-fg: var(--exito); --es-bg: var(--exito-fondo); --es-bd: var(--exito-borde);
display: flex; align-items: flex-start; gap: var(--e-4);
padding: var(--e-4) var(--e-5); border: 1px solid var(--es-bd); border-left: 4px solid var(--es-fg);
border-radius: var(--radio-3); background: var(--es-bg); color: var(--texto);
}
.estado-servicio--ok { --es-fg: var(--exito); --es-bg: var(--exito-fondo); --es-bd: var(--exito-borde); }
.estado-servicio--alerta { --es-fg: var(--alerta); --es-bg: var(--alerta-fondo); --es-bd: var(--alerta-borde); }
.estado-servicio--peligro { --es-fg: var(--peligro); --es-bg: var(--peligro-fondo); --es-bd: var(--peligro-borde); }
.estado-servicio__icono { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--superficie); color: var(--es-fg); border: 1px solid var(--es-bd); }
.estado-servicio__cuerpo { flex: 1; min-width: 0; }
.estado-servicio__nivel { display: block; font-size: var(--t-12); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--es-fg); }
.estado-servicio__titulo { font-family: var(--fuente-titulo); font-size: var(--t-20); font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.estado-servicio__texto { color: var(--texto-2); font-size: var(--t-14); margin-top: 2px; }
.estado-servicio__motivos { margin: var(--e-2) 0 0; padding-left: 1.15em; display: grid; gap: 2px; font-size: var(--t-14); }
.estado-servicio__fin { margin-left: auto; align-self: center; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
@media (max-width: 640px) {
.estado-servicio { flex-wrap: wrap; padding: var(--e-4); gap: var(--e-3); }
.estado-servicio__icono { width: 36px; height: 36px; }
.estado-servicio__cuerpo { flex-basis: calc(100% - 52px); }
.estado-servicio__fin { margin-left: 0; width: 100%; }
}
/* --- KPI que pide atención (algo para mirar: cuentas sin uso, retiros trabados…) --- */
.kpi--alerta { border-color: var(--alerta-borde); box-shadow: inset 0 3px 0 var(--tope-alerta), var(--sombra-1); }
.kpi--alerta .kpi__etiqueta .ico { color: var(--alerta); }
.kpi--alerta .kpi__valor { color: var(--alerta); }
.kpi--alerta .kpi__pie { color: var(--texto-2); }
/* --- Antigüedad: 43 min --- */
.edad { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-13); color: var(--texto-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.edad .ico { width: 14px; height: 14px; stroke-width: 2; }
.edad--alerta { color: var(--alerta); font-weight: 600; }
.edad--critica { color: var(--peligro); font-weight: 700; }
/* --- Fila o bloque expandible: |