/* ============================================================
   Sistema Contable - Hoja de estilos
   ------------------------------------------------------------
   Diseno basado en tokens (custom properties) y componentes
   reusables. No se duplican valores; cualquier ajuste de color,
   espaciado o tipografia se hace cambiando una variable.
   ============================================================ */

/* ---------------------------------------------------------------
   1. Tokens
--------------------------------------------------------------- */
:root {
    /* ============================================================
       Paleta corporativa (alias de los tokens semanticos abajo).
       Estos coinciden con los nombres del manual de marca; usar
       siempre los tokens semanticos (`--c-*`) en el CSS de la app.
       ============================================================ */
    --primary-700:    #1D4ED8;
    --primary-600:    #2563EB;
    --primary-100:    #DBEAFE;
    --accent-500:     #06B6D4;
    --bg-app:         #F4F7FB;
    --bg-section:     #EEF2F7;
    --bg-card:        #FFFFFF;
    --text-main:      #0F172A;
    --text-body:      #475569;
    --text-muted:     #64748B;
    --border:         #CBD5E1;
    --border-soft:    #E2E8F0;
    --placeholder:    #94A3B8;
    --success:        #16A34A;
    --success-bg:     #DCFCE7;
    --warning:        #D97706;
    --warning-bg:     #FEF3C7;
    --danger:         #DC2626;
    --danger-bg:      #FEE2E2;
    --info:           #0284C7;
    --info-bg:        #E0F2FE;
    --sidebar-bg:     #0F172A;
    --sidebar-hover:  #1E293B;

    /* ============================================================
       Tokens semanticos usados por todo el CSS legacy.
       Mantienen el prefijo `--c-` para no romper miles de usos
       que ya existen en el codigo.
       ============================================================ */

    /* Marca */
    --c-primary: var(--primary-600);
    --c-primary-dark: var(--primary-700);
    --c-primary-soft: var(--primary-100);
    --c-accent: var(--accent-500);

    /* Sidebar */
    --c-sidebar: var(--sidebar-bg);
    --c-sidebar-deep: #07101F;          /* tono mas oscuro para footer del sidebar */
    --c-sidebar-text: #CBD5E1;
    --c-sidebar-text-muted: var(--placeholder);
    --c-sidebar-active: var(--primary-600);
    --c-sidebar-hover: var(--sidebar-hover);

    /* Superficies */
    --c-bg: var(--bg-app);
    --c-surface: var(--bg-card);
    --c-surface-soft: var(--bg-section);
    --c-border: var(--border-soft);
    --c-border-strong: var(--border);
    --c-text: var(--text-main);
    --c-text-body: var(--text-body);
    --c-text-strong: var(--text-main);
    --c-text-muted: var(--text-muted);
    --c-text-subtle: var(--placeholder);

    /* Estados (semantica) */
    --c-success: var(--success);
    --c-success-bg: var(--success-bg);
    --c-success-border: #86EFAC;
    --c-danger: var(--danger);
    --c-danger-bg: var(--danger-bg);
    --c-danger-border: #FCA5A5;
    --c-warning: var(--warning);
    --c-warning-bg: var(--warning-bg);
    --c-warning-border: #FCD34D;
    --c-info: var(--info);
    --c-info-bg: var(--info-bg);
    --c-info-border: #7DD3FC;
    --c-partial: #C2410C;
    --c-partial-bg: #FFEDD5;
    --c-partial-border: #FDBA74;

    /* Espaciado */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-8: 32px;
    --s-10: 40px;
    --s-12: 48px;

    /* Border radius */
    --r-sm: 6px;
    --r: 8px;
    --r-lg: 12px;
    --r-pill: 9999px;

    /* Sombras: multi-layer estilo Stripe/Linear para dar profundidad real */
    --sh-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --sh: 0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 12px -2px rgba(15, 23, 42, 0.05);
    --sh-md: 0 4px 12px -2px rgba(15, 23, 42, 0.10), 0 8px 24px -8px rgba(15, 23, 42, 0.08);
    --sh-lg: 0 12px 40px -8px rgba(15, 23, 42, 0.18), 0 4px 12px -2px rgba(15, 23, 42, 0.08);
    --sh-card-hover: 0 4px 16px -2px rgba(15, 23, 42, 0.12), 0 8px 32px -8px rgba(15, 23, 42, 0.08);
    --sh-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.18);
    --sh-focus-ring-soft: 0 0 0 3px rgba(37, 99, 235, 0.10);

    /* Tipografia: Geist (Vercel) — distintiva, optimizada para dashboards
       financieros. NO usar Inter/Roboto/Arial: look genérico. */
    --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Consolas, monospace;
    --font-display: 'Geist', sans-serif;

    /* Escala tipografica: jerarquia clara y predecible (estilo editorial) */
    --fs-display:  32px;   /* page hero / login */
    --fs-h1:       24px;   /* page title */
    --fs-h2:       18px;   /* section title */
    --fs-h3:       15px;   /* subsection */
    --fs-body:     14px;   /* default */
    --fs-sm:       13px;   /* secondary */
    --fs-xs:       12px;   /* captions, labels uppercase */
    --fs-xxs:      11px;   /* badges, micro labels */

    /* Pesos */
    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    /* Tracking (letter-spacing) — siempre negativo en displays grandes */
    --tr-tight:    -0.02em;
    --tr-snug:     -0.01em;
    --tr-normal:   0;
    --tr-wide:      0.04em;
    --tr-wider:     0.08em;   /* uppercase pretitles */

    /* Movimiento */
    --t:           160ms cubic-bezier(0.2, 0, 0, 1);
    --t-fast:      80ms ease-out;
    --t-slow:      300ms cubic-bezier(0.2, 0, 0, 1);
}

/* ============================================================
   MODO OSCURO — activado con [data-theme="dark"] en <html>.
   Solo overrideamos los tokens primarios; los --c-* derivan
   automáticamente y todo el resto del CSS se actualiza.
   Filosofía: superficie elevada (cards) más clara que el fondo.
   ============================================================ */
[data-theme="dark"] {
    --primary-700:    #2563EB;        /* invertimos: el "dark" es el más vivo */
    --primary-600:    #3B82F6;
    --primary-100:    #1E3A8A;        /* tinte azul oscuro para hovers/selects */
    --accent-500:     #22D3EE;

    --bg-app:         #0B1220;        /* fondo más oscuro que el sidebar */
    --bg-section:     #131C2E;        /* secciones / hover de tablas */
    --bg-card:        #1A2438;        /* cards más claros que el bg */

    --text-main:      #F1F5F9;
    --text-body:      #CBD5E1;
    --text-muted:     #94A3B8;
    --placeholder:    #64748B;

    --border:         #334155;
    --border-soft:    #1E293B;

    --success:        #22C55E;
    --success-bg:     #052E16;
    --warning:        #F59E0B;
    --warning-bg:     #422006;
    --danger:         #F87171;
    --danger-bg:      #450A0A;
    --info:           #38BDF8;
    --info-bg:        #082F49;

    --sidebar-bg:     #07101F;
    --sidebar-hover:  #1E293B;

    /* Sombras: más sutiles en dark mode (la luz no se ve) — usamos rings */
    --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
    --sh:    0 1px 3px rgba(0, 0, 0, 0.35), 0 4px 12px -2px rgba(0, 0, 0, 0.30);
    --sh-md: 0 4px 12px -2px rgba(0, 0, 0, 0.40), 0 8px 24px -8px rgba(0, 0, 0, 0.30);
    --sh-lg: 0 12px 40px -8px rgba(0, 0, 0, 0.50);
    --sh-card-hover: 0 4px 16px -2px rgba(0, 0, 0, 0.45);
    --sh-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.40);

    color-scheme: dark;
}

/* Imágenes y QR codes con fondo claro: en dark mode pueden verse mal.
   Mantenemos su look pero envueltos con bg-card. */
[data-theme="dark"] img.is-light-asset { background: white; padding: 4px; border-radius: 6px; }

/* ---------------------------------------------------------------
   2. Reset y base
--------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: 1.5;
    color: var(--c-text);
    background-color: var(--c-bg);
    background-image:
        radial-gradient(ellipse 50rem 30rem at 100% -10%, rgba(6, 182, 212, 0.10), transparent 60%),
        radial-gradient(ellipse 60rem 40rem at -10% 110%, rgba(37, 99, 235, 0.08), transparent 70%);
    background-attachment: fixed;
    font-feature-settings: 'cv11', 'ss01', 'ss03';   /* Geist — formas alternativas más legibles */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color var(--t-slow), color var(--t-slow);
}
/* Dark mode: gradients sutiles más fríos sobre fondo oscuro */
[data-theme="dark"] body {
    background-image:
        radial-gradient(ellipse 60rem 30rem at 100% -10%, rgba(34, 211, 238, 0.06), transparent 60%),
        radial-gradient(ellipse 60rem 40rem at -10% 110%, rgba(59, 130, 246, 0.08), transparent 70%);
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }

/* Jerarquia tipografica — editorial, tracking tight en displays */
h1, h2, h3, h4 {
    color: var(--c-text);
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    line-height: 1.2;
    letter-spacing: var(--tr-snug);
}
h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); letter-spacing: var(--tr-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-body); font-weight: var(--fw-semibold); }
p  { color: inherit; }

/* Pretitle: micro-label uppercase con tracking wide — patrón editorial */
.pretitle {
    display: inline-block;
    font-size: var(--fs-xxs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tr-wider);
    color: var(--c-primary);
    margin-bottom: 6px;
}

/* Numeros: SIEMPRE tabulares para que las columnas alineen perfectamente */
.tabular-nums,
.money-cell,
.amount,
td.money-cell,
input[readonly][value]:not([type="text"]):not([type="email"]):not([type="password"]) {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

a {
    color: var(--c-primary);
    text-decoration: none;
    transition: color var(--t);
}
a:hover { color: var(--c-primary-dark); }

:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* ---------------------------------------------------------------
   3. Layout principal
--------------------------------------------------------------- */
.container {
    display: flex;
    min-height: 100vh;
}

.main-content {
    flex: 1;
    min-width: 0;
    padding: var(--s-8) var(--s-10);
    max-width: 1480px;
    margin: 0 auto;
    width: 100%;
}

/* ============================================================
   APP HEADER — barra superior persistente en desktop
   Contiene breadcrumb minimo (izq) + theme toggle + user menu (der)
   ============================================================ */
.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 56px;
    padding: 0 var(--s-2);
    margin: calc(var(--s-8) * -1) calc(var(--s-10) * -1) var(--s-6);
    padding-left: var(--s-10);
    padding-right: var(--s-10);
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(8px);
}
@media (max-width: 1100px) {
    .app-header { margin-left: calc(var(--s-6) * -1); margin-right: calc(var(--s-6) * -1); padding-left: var(--s-6); padding-right: var(--s-6); }
}
@media (max-width: 900px) {
    /* En mobile el .topbar fixed cubre este rol; ocultamos el app-header */
    .app-header { display: none; }
}

.app-header-left {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    min-width: 0;
    overflow: hidden;
}
.app-header-eyebrow {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    font-weight: var(--fw-medium);
    white-space: nowrap;
}
.app-header-divider {
    color: var(--c-text-subtle);
    font-size: var(--fs-sm);
}
.app-header-current {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--c-text);
    letter-spacing: var(--tr-snug);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-header-right {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex-shrink: 0;
}

/* Theme toggle: muestra sol o luna según el tema activo */
.theme-toggle {
    width: 36px;
    height: 36px;
    border-radius: var(--r);
    background: transparent;
    border: 1px solid var(--c-border);
    color: var(--c-text-body);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--t), border-color var(--t), color var(--t), transform var(--t-fast);
    padding: 0;
}
.theme-toggle:hover {
    background: var(--c-surface-soft);
    border-color: var(--c-border-strong);
    color: var(--c-text);
}
.theme-toggle:active { transform: scale(0.94); }
.theme-toggle:focus-visible {
    outline: none;
    box-shadow: var(--sh-focus-ring);
}
/* Sol visible en light mode, luna en dark mode */
.theme-toggle-sun { display: inline-block; }
.theme-toggle-moon { display: none; }
[data-theme="dark"] .theme-toggle-sun { display: none; }
[data-theme="dark"] .theme-toggle-moon { display: inline-block; }

/* Variante para la topbar mobile: contexto oscuro (texto/borde blancos) */
.theme-toggle-topbar {
    width: 36px;
    height: 36px;
    color: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.15);
    background: transparent;
}
.theme-toggle-topbar:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
    color: white;
}

/* User menu: avatar + nombre + logout */
.user-menu {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 4px 4px 4px 4px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-pill);
    background: var(--c-surface);
    transition: background var(--t), border-color var(--t);
}
.user-menu:hover {
    background: var(--c-surface-soft);
    border-color: var(--c-border-strong);
}
.user-menu-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-600), var(--accent-500));
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    box-shadow: 0 1px 4px rgba(37, 99, 235, 0.30);
    flex-shrink: 0;
}
.user-menu-name {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--c-text);
    padding: 0 4px;
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.user-menu-logout {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--c-text-muted);
    transition: background var(--t), color var(--t);
    text-decoration: none;
}
.user-menu-logout:hover {
    background: var(--c-danger-bg);
    color: var(--c-danger);
}
@media (max-width: 720px) {
    .user-menu-name { display: none; }
}

.main-header {
    margin-bottom: var(--s-6);
    padding-bottom: var(--s-5);
    position: relative;
}
.main-header h1 {
    font-size: var(--fs-display);
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tr-tight);
    color: var(--c-text);
    line-height: 1.1;
}
.main-header::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-600), var(--accent-500));
    border-radius: 2px;
}

@media (max-width: 1100px) {
    .main-content { padding: var(--s-6) var(--s-6); }
}
@media (max-width: 720px) {
    .main-content { padding: var(--s-5) var(--s-4); }
}

.content > * + * { margin-top: var(--s-5); }

/* ---------------------------------------------------------------
   4. Sidebar
--------------------------------------------------------------- */
.sidebar {
    --sidebar-w: 248px;
    --sidebar-w-collapsed: 68px;

    width: var(--sidebar-w);
    background: var(--c-sidebar);
    color: var(--c-sidebar-text);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    flex-shrink: 0;
    box-shadow: 4px 0 16px -4px rgba(15, 23, 42, 0.12);
    z-index: 100;
    transition: width 220ms cubic-bezier(0.2, 0, 0, 1);
    overflow-x: hidden;            /* Evita scroll horizontal por contenidos que excedan al colapsar */
}
.sidebar.is-collapsed { width: var(--sidebar-w-collapsed); }

.sidebar-header {
    padding: var(--s-4) var(--s-5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 64px;
    position: relative;
}
.sidebar-header h2 {
    color: white;
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tr-tight);
    flex: 1;
    transition: opacity 160ms ease, max-width 220ms cubic-bezier(0.2, 0, 0, 1);
    overflow: hidden;
    white-space: nowrap;
}
/* Logo cuadrado con gradient */
/* Placeholder cuadrado con gradient cuando NO hay logo cargado */
.sidebar-header::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--primary-600), var(--accent-500));
    box-shadow: 0 2px 12px -2px rgba(37, 99, 235, 0.6),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}
/* Cuando hay logo cargado, ocultamos el placeholder gradient */
.sidebar-header.has-logo::before { display: none; }
.sidebar-logo {
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    object-fit: contain;
    background: white;        /* fondo blanco para logos transparentes */
    padding: 2px;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
/* Logos SVG sobre fondo oscuro pueden necesitar el bg blanco */
[data-theme="dark"] .sidebar-logo { background: rgba(255, 255, 255, 0.95); }

/* Toggle de colapsar — vive en el footer del sidebar (desktop only) */
.sidebar-collapse-toggle {
    display: none;
    width: 100%;
    height: 36px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--c-sidebar-text-muted);
    border-radius: var(--r);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    flex-shrink: 0;
    transition: background var(--t), color var(--t), border-color var(--t);
    padding: 0 var(--s-3);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    letter-spacing: var(--tr-snug);
}
.sidebar-collapse-toggle:hover {
    background: var(--c-sidebar-hover);
    color: white;
    border-color: rgba(255, 255, 255, 0.16);
}
.sidebar-collapse-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}
@media (min-width: 901px) {
    .sidebar-collapse-toggle { display: inline-flex; }
}
.sidebar-collapse-toggle svg {
    flex-shrink: 0;
    transition: transform 220ms cubic-bezier(0.2, 0, 0, 1);
}
.sidebar-collapse-label {
    white-space: nowrap;
    overflow: hidden;
    transition: opacity 160ms ease, max-width 220ms ease;
}

/* Colapsado: el icono se voltea + se oculta el label, el botón queda cuadrado */
.sidebar.is-collapsed .sidebar-collapse-toggle {
    width: 40px;
    padding: 0;
    margin: 0 auto;
}
.sidebar.is-collapsed .sidebar-collapse-toggle svg {
    transform: rotate(180deg);
}
.sidebar.is-collapsed .sidebar-collapse-label {
    opacity: 0;
    max-width: 0;
    pointer-events: none;
}

/* En modo colapsado: oculta título del header, centra el logo */
.sidebar.is-collapsed .sidebar-header { padding: var(--s-4) 0; justify-content: center; gap: 0; }
.sidebar.is-collapsed .sidebar-header h2 {
    opacity: 0;
    max-width: 0;
    pointer-events: none;
}

.sidebar-nav {
    flex: 1;
    padding: var(--s-3) var(--s-3);
    overflow-y: auto;
    overflow-x: hidden;     /* Evita scroll horizontal por items o flyouts */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar:horizontal { height: 0; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.12);
    border-radius: 3px;
}

.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-list > li { margin-bottom: 2px; }

/* Link de primer nivel (Dashboard) y sub-links dentro de un grupo */
.nav-link {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: 9px 12px;
    color: var(--c-sidebar-text);
    border-radius: var(--r);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    letter-spacing: var(--tr-snug);
    transition: background var(--t), color var(--t);
    position: relative;
    text-decoration: none;
}
.nav-link:hover {
    background: var(--c-sidebar-hover);
    color: white;
}
.nav-link.active {
    background: var(--c-sidebar-hover);
    color: white;
    font-weight: var(--fw-semibold);
}
/* Indicator vertical accent al lado izquierdo del item activo (estilo Linear) */
.nav-link.active::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, var(--accent-500), var(--primary-600));
    box-shadow: 0 0 12px rgba(6, 182, 212, 0.5);
}
.nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.nav-icon svg { width: 18px; height: 18px; }
.nav-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Grupo colapsable (acordeon) */
.nav-group {
    list-style: none;
    margin-bottom: 2px;
}
.nav-group-toggle {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    width: 100%;
    padding: 9px var(--s-4);
    background: transparent;
    border: 0;
    color: var(--c-sidebar-text);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    letter-spacing: var(--tr-snug);
    text-align: left;
    cursor: pointer;
    border-radius: var(--r);
    transition: background var(--t), color var(--t);
    font-family: inherit;
}
.nav-group-toggle:hover {
    background: var(--c-sidebar-hover);
    color: white;
}
.nav-group.is-active > .nav-group-toggle {
    color: white;
}
.nav-group.is-active > .nav-group-toggle .nav-icon {
    color: var(--c-sidebar-active);
}
.nav-group .nav-chevron {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.6;
}
.nav-group.is-open > .nav-group-toggle .nav-chevron {
    transform: rotate(180deg);
    opacity: 1;
}

/* Lista interna del grupo */
.nav-group-items {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 260ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 180ms ease,
                padding 180ms ease;
}
.nav-group.is-open > .nav-group-items {
    /* Suficientemente grande para cualquier grupo. La animacion sigue siendo suave. */
    max-height: 800px;
    opacity: 1;
    padding: 4px 0 var(--s-2);
}
.nav-group-items > li { margin-bottom: 1px; }
.nav-sublink {
    padding: 8px var(--s-4) 8px 44px;
    font-size: 13.5px;
    font-weight: 450;
    color: var(--c-sidebar-text);
    border-radius: var(--r-sm);
    display: block;
    transition: background 160ms ease, color 160ms ease, padding-left 160ms ease;
    position: relative;
}
.nav-sublink::before {
    content: '';
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: background 160ms ease, transform 160ms ease;
}
.nav-sublink:hover {
    background: rgba(255, 255, 255, 0.05);
    color: white;
    padding-left: 48px;
}
.nav-sublink:hover::before {
    background: white;
}
.nav-sublink.active {
    background: var(--c-sidebar-active);
    color: white;
    box-shadow: 0 2px 8px -2px rgba(67, 56, 202, 0.6);
}
.nav-sublink.active::before {
    background: white;
    transform: translateY(-50%) scale(1.3);
}

/* Sub-encabezado dentro de un grupo (ej: "Estados Financieros") */
.nav-subheader {
    padding: var(--s-3) var(--s-4) 4px 44px;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-sidebar-text-muted);
    font-weight: 600;
    list-style: none;
}

.sidebar-footer {
    padding: var(--s-3) var(--s-3);
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}
.sidebar.is-collapsed .sidebar-footer {
    padding: var(--s-3) 0;
}
.btn-logout {
    color: #fca5a5;
    font-size: 13px;
    font-weight: 500;
}
.btn-logout:hover { color: #fecaca; }

/* ============================================================
   SIDEBAR COLAPSADO — modo "rail" (solo iconos)
   Activado con .sidebar.is-collapsed via JS + localStorage.
   En este modo, los grupos colapsables despliegan un FLYOUT
   flotante a la derecha al hacer hover (estilo Linear/Stripe).
   ============================================================ */
.sidebar.is-collapsed .sidebar-nav { padding: var(--s-3) 8px; }

/* Solo los nav-link de PRIMER nivel (no los .nav-sublink del flyout) se vuelven cuadraditos */
.sidebar.is-collapsed .nav-link:not(.nav-sublink),
.sidebar.is-collapsed .nav-group-toggle {
    justify-content: center;
    padding: 10px 0;
    width: 52px;
    margin: 0 auto;
}
/* Los nav-label y chevrons del SIDEBAR (primer nivel) sí se ocultan,
   pero NO los del flyout (los sublinks no tienen .nav-label de todos modos) */
.sidebar.is-collapsed .sidebar-nav > .nav-list > li > .nav-link .nav-label,
.sidebar.is-collapsed .sidebar-nav > .nav-list > .nav-group > .nav-group-toggle .nav-label,
.sidebar.is-collapsed .nav-chevron {
    display: none;
}

/* Tooltip al hover sobre cualquier item en modo colapsado.
   Usa data-tooltip del HTML (Dashboard, grupos). */
.sidebar.is-collapsed [data-tooltip]:hover::after,
.sidebar.is-collapsed .nav-link[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--c-sidebar-deep);
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: var(--fw-medium);
    white-space: nowrap;
    box-shadow: var(--sh-md);
    z-index: 1000;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Indicator de active item en modo colapsado: barra a la izquierda */
.sidebar.is-collapsed .nav-link.active::before {
    left: -8px;
    height: 24px;
    top: 50%;
    transform: translateY(-50%);
}

/* Grupos en modo colapsado: el toggle queda como ícono solo.
   Al hacer hover, aparece un panel flotante con sus subitems. */
.sidebar.is-collapsed .nav-group {
    position: relative;
}
.sidebar.is-collapsed .nav-group .nav-group-items {
    /* Flyout POSITION FIXED para no ser cortado por overflow del sidebar-nav. */
    position: fixed;
    left: calc(var(--sidebar-w-collapsed, 68px) + 8px);
    top: var(--flyout-top, 80px);
    width: 240px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    overflow-x: hidden;
    opacity: 0;
    background: var(--c-sidebar);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
    padding: 8px 6px;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease;
    transform: translateX(-4px);
    z-index: 999;
    list-style: none;             /* asegura que <ul> no tenga bullets */
    box-sizing: border-box;
}
.sidebar.is-collapsed .nav-group .nav-group-items > li {
    width: 100%;
    margin: 0 0 1px;
    list-style: none;
}
.sidebar.is-collapsed .nav-group:hover > .nav-group-items,
.sidebar.is-collapsed .nav-group:focus-within > .nav-group-items {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
}

/* Cabecera del flyout: muestra el nombre del grupo */
.sidebar.is-collapsed .nav-group .nav-group-items::before {
    content: attr(data-flyout-title);
    display: block;
    padding: 6px 12px 10px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: var(--tr-wider);
    color: var(--c-sidebar-text-muted);
    font-weight: var(--fw-semibold);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 6px;
}

/* En modo collapsed los sublinks del flyout deben ocupar todo el ancho del flyout
   (no heredar el width: 52px de .nav-link). Reseteamos explícitamente. */
.sidebar.is-collapsed .nav-sublink {
    width: 100%;
    margin: 0;
    padding: 8px 12px;
    font-size: 13px;
    border-radius: var(--r-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.35;
    justify-content: flex-start;   /* texto a la izquierda, no centrado */
}
.sidebar.is-collapsed .nav-sublink::before { display: none; }
.sidebar.is-collapsed .nav-sublink:hover {
    padding-left: 14px;
    background: var(--c-sidebar-hover);
}
.sidebar.is-collapsed .nav-subheader {
    padding: 8px 12px 4px;
    font-size: 9.5px;
}

/* Sidebar footer en modo colapsado: solo botón logout como ícono circular */
.sidebar.is-collapsed .sidebar-footer {
    flex-direction: column;
    gap: var(--s-2);
    padding: var(--s-3) 8px;
}
.sidebar.is-collapsed .sidebar-footer > span {
    display: none;       /* Oculta el nombre del usuario */
}
.sidebar.is-collapsed .btn-logout {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    font-size: 0;
    position: relative;
}
.sidebar.is-collapsed .btn-logout::before {
    content: '';
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fecaca' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}
.sidebar.is-collapsed .btn-logout:hover { background: rgba(220, 38, 38, 0.18); }

/* En collapsed, el dashboard link también muestra tooltip */
.sidebar.is-collapsed > .sidebar-nav > .nav-list > li:first-child .nav-link {
    position: relative;
}

/* ---------------------------------------------------------------
   5. Page header (subtitulo dentro del content)
--------------------------------------------------------------- */
.page-header {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4);
    justify-content: space-between;
    align-items: center;
    padding: var(--s-5) var(--s-6);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh);
    position: relative;
    overflow: hidden;
}
.page-header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--accent-500) 0%, var(--primary-600) 100%);
}
.page-header h2 {
    font-size: var(--fs-h1);
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tr-tight);
    color: var(--c-text);
    margin: 0;
}
.page-header p {
    color: var(--c-text-body);
    font-size: var(--fs-sm);
    margin: 4px 0 0;
    font-weight: var(--fw-regular);
}
.page-header-actions {
    display: flex;
    gap: var(--s-2);
    align-items: center;
    flex-wrap: wrap;
}

/* ---------------------------------------------------------------
   6. Cards / superficies
--------------------------------------------------------------- */
.detail-info,
.transaccion-diario,
.resultado-final,
.filters,
.report-summary,
.stat-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: var(--s-6);
    box-shadow: var(--sh);
    transition: box-shadow var(--t), transform var(--t);
}
.detail-info:hover,
.transaccion-diario:hover,
.resultado-final:hover,
.report-summary:hover,
.stat-card:hover {
    box-shadow: var(--sh-card-hover);
}

.detail-info p { margin-bottom: 6px; }
.detail-info p:last-child { margin-bottom: 0; }
.detail-info strong {
    color: var(--c-text-muted);
    font-weight: 500;
    margin-right: 4px;
}

/* Wrappers que solo agrupan secciones (no son cards) */
.transaccion-detail > * + *,
.cobro-form > * + *,
.pago-form > * + *,
.recent-transactions > * + *,
.dashboard > * + * {
    margin-top: var(--s-5);
}

.recent-transactions h2 { font-size: 16px; }

.ultimas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: var(--s-5);
}
.ultimas-col h2 {
    font-size: 16px;
    margin-bottom: var(--s-3);
}
.ultimas-col table { font-size: 13px; }
.ultimas-col table td,
.ultimas-col table th { padding: var(--s-2) var(--s-3); }

/* ---------------------------------------------------------------
   7. Stats grid (dashboard - legacy)
--------------------------------------------------------------- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--s-4);
}
.stat-card h3 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-text-muted);
    font-weight: 600;
    margin-bottom: var(--s-3);
}
.stat-value {
    font-size: 26px;
    font-weight: 700;
    color: var(--c-text);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.stat-value.positive { color: var(--c-success); }
.stat-value.negative { color: var(--c-danger); }
.stat-card a {
    display: inline-block;
    margin-top: var(--s-3);
    font-size: 13px;
    font-weight: 500;
}

/* ---------------------------------------------------------------
   7b. Dashboard avanzado: KPIs + charts + listas
--------------------------------------------------------------- */
.dashboard .quick-actions {
    display: flex;
    gap: var(--s-3);
    flex-wrap: wrap;
}

/* KPI cards: 6 metricas con tendencia y variacion */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--s-4);
}
.kpi-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: var(--s-5) var(--s-5) var(--s-4);
    box-shadow: var(--sh);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 200ms ease, box-shadow 200ms ease;
    position: relative;
    overflow: hidden;
}
.kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--c-text-muted), transparent);
    opacity: 0.6;
}
.kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-card-hover);
}
.kpi-card:hover::before { opacity: 1; }
.kpi-success::before { background: linear-gradient(90deg, var(--c-success), #4ADE80); }
.kpi-danger::before  { background: linear-gradient(90deg, var(--c-danger), #F87171); }
.kpi-info::before    { background: linear-gradient(90deg, var(--c-primary), var(--accent-500)); }
.kpi-warning::before { background: linear-gradient(90deg, var(--c-warning), #FBBF24); }

.kpi-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.kpi-label {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-text-muted);
    font-weight: 600;
}
.kpi-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(67, 56, 202, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--c-primary);
}
.kpi-success .kpi-icon { background: rgba(22, 163, 74, 0.1); color: var(--c-success); }
.kpi-danger  .kpi-icon { background: rgba(220, 38, 38, 0.1); color: var(--c-danger); }
.kpi-warning .kpi-icon { background: rgba(245, 158, 11, 0.12); color: #d97706; }

.kpi-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--c-text);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}
.kpi-success .kpi-value { color: var(--c-success); }
.kpi-danger  .kpi-value { color: var(--c-danger); }

.kpi-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}
.kpi-aux {
    color: var(--c-text-muted);
    font-weight: 500;
}
a.kpi-aux { color: var(--c-primary); }
a.kpi-aux:hover { text-decoration: underline; }

.trend {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
}
.trend-up   { color: var(--c-success); background: rgba(22, 163, 74, 0.1); }
.trend-down { color: var(--c-danger);  background: rgba(220, 38, 38, 0.1); }
.trend-flat { color: var(--c-text-muted); background: rgba(100, 116, 139, 0.1); }

/* Charts */
.chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--s-4);
}
.chart-grid-main {
    grid-template-columns: 2fr 1fr;
}
@media (max-width: 1100px) {
    .chart-grid-main { grid-template-columns: 1fr; }
}
.chart-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r);
    padding: var(--s-4) var(--s-5);
    box-shadow: var(--sh-sm);
    display: flex;
    flex-direction: column;
    min-height: 320px;
}
.chart-card-wide { min-height: 360px; }
.chart-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: var(--s-3);
}
.chart-head h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--c-text);
    margin: 0;
}
.chart-sub {
    font-size: 11.5px;
    color: var(--c-text-muted);
    font-weight: 500;
}
.chart-body {
    flex: 1;
    position: relative;
    min-height: 240px;
}
.chart-body canvas { max-height: 100%; }

/* Listas: rankings y vencimientos */
.dash-listas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: var(--s-4);
}
.lista-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r);
    padding: var(--s-4) var(--s-5);
    box-shadow: var(--sh-sm);
}
.lista-card-alert {
    border-color: rgba(220, 38, 38, 0.25);
    background: linear-gradient(180deg, rgba(254, 226, 226, 0.4) 0%, var(--c-surface) 60%);
}
.lista-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--s-3);
    padding-bottom: var(--s-2);
    border-bottom: 1px solid var(--c-border);
}
.lista-head h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--c-text);
    margin: 0;
}
.lista-link {
    font-size: 12px;
    color: var(--c-primary);
    font-weight: 500;
}
.lista-link:hover { text-decoration: underline; }

/* Rank list (top clientes/proveedores con barra de progreso) */
.rank-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}
.rank-list li {
    display: grid;
    grid-template-columns: 1fr 80px 110px;
    gap: var(--s-3);
    align-items: center;
}
.rank-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rank-name {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--c-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rank-meta { font-size: 11.5px; color: var(--c-text-muted); }
.rank-warn { color: var(--c-danger); font-weight: 600; }
.rank-bar {
    height: 6px;
    background: rgba(100, 116, 139, 0.1);
    border-radius: 3px;
    overflow: hidden;
}
.rank-fill {
    height: 100%;
    width: 0;
    border-radius: 3px;
    transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.rank-fill-up   { background: linear-gradient(90deg, var(--c-success), #22c55e); }
.rank-fill-down { background: linear-gradient(90deg, #ef4444, #f97316); }
.rank-value {
    font-size: 13.5px;
    font-weight: 600;
    text-align: right;
    color: var(--c-text);
    font-variant-numeric: tabular-nums;
}

/* Vencimientos (proximos / vencidos) */
.venc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.venc-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--s-3);
    align-items: center;
    padding: 10px var(--s-2);
    border-radius: var(--r-sm);
    transition: background 160ms ease;
}
.venc-item:hover { background: rgba(67, 56, 202, 0.04); }
.venc-tag {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    color: white;
    min-width: 56px;
    text-align: center;
}
.venc-cxc .venc-tag { background: var(--c-success); }
.venc-cxp .venc-tag { background: var(--c-danger); }
.venc-alert .venc-tag { box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15); }
.venc-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.venc-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--c-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.venc-doc { font-size: 11.5px; color: var(--c-text-muted); }
.venc-monto {
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.venc-up { color: var(--c-success); }
.venc-down { color: var(--c-danger); }

.empty-state.mini {
    padding: var(--s-3);
    font-size: 13px;
    background: transparent;
    border: 1px dashed var(--c-border);
}

@media (max-width: 700px) {
    .rank-list li { grid-template-columns: 1fr 90px; }
    .rank-list li .rank-bar { display: none; }
}

/* ---------------------------------------------------------------
   8. Tablas
--------------------------------------------------------------- */
table {
    width: 100%;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh);
    border-collapse: separate;
    border-spacing: 0;
    font-feature-settings: 'tnum';
    font-variant-numeric: tabular-nums;
}
thead {
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border-strong);
}
thead th {
    font-size: var(--fs-xxs);
    text-transform: uppercase;
    letter-spacing: var(--tr-wider);
    color: var(--c-text-muted);
    font-weight: var(--fw-semibold);
    padding: 12px var(--s-4);
    text-align: left;
    border-bottom: 0;
    white-space: nowrap;
    position: relative;
}
tbody td {
    padding: 14px var(--s-4);
    border-bottom: 1px solid var(--c-border);
    color: var(--c-text);
    font-size: var(--fs-sm);
    line-height: 1.4;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background var(--t-fast); }
tbody tr:hover td {
    background: var(--c-surface-soft);
}
/* Cuando una fila se selecciona o destaca explícitamente */
tbody tr.is-selected td {
    background: var(--c-primary-soft);
    color: var(--c-primary-dark);
    border-bottom-color: var(--primary-100);
}
.row-success-soft td { background: var(--c-success-bg); }
.row-warning-soft td { background: var(--c-warning-bg); }
.row-info-soft td { background: var(--c-primary-soft); }
tfoot td, tfoot th {
    padding: var(--s-3) var(--s-4);
    background: var(--c-surface-soft);
    font-weight: 600;
    border-top: 1px solid var(--c-border);
}

tr.vencida td { background: var(--c-danger-bg); }
tr.vencida:hover td { background: #fecaca; }
tr.row-anulada td {
    color: var(--c-text-subtle);
    text-decoration: line-through;
}

.table-sm th, .table-sm td { padding: var(--s-2) var(--s-3); font-size: 13px; }
.table-dense th,
.table-dense td { padding: 8px 10px; font-size: 13px; }
.table-actions {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    flex-wrap: wrap;
}

/* ---------------------------------------------------------------
   9. Formularios
--------------------------------------------------------------- */
input,
select,
textarea {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    height: 40px;                       /* MISMA altura que .btn default — alineación perfecta en filters/forms */
    padding: 0 12px;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r);
    color: var(--c-text);
    background: var(--c-surface);
    transition: border-color var(--t), box-shadow var(--t), background var(--t);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    line-height: 1.4;
}
textarea {
    height: auto;
    padding: 10px 12px;
    min-height: 80px;
    resize: vertical;
}
input[type="checkbox"],
input[type="radio"] {
    height: auto;
    width: auto;
    padding: 0;
    box-shadow: none;
    accent-color: var(--c-primary);
}
input:hover:not(:disabled):not(:focus),
select:hover:not(:disabled):not(:focus),
textarea:hover:not(:disabled):not(:focus) {
    border-color: var(--c-text-subtle);
}
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: var(--sh-focus-ring);
    background: var(--c-surface);
}
input::placeholder,
textarea::placeholder { color: var(--placeholder); }
/* Inputs numéricos: tabular-nums automático */
input[type="number"],
input[type="text"][readonly][value*="."] { font-feature-settings: 'tnum'; }
input:disabled,
select:disabled,
textarea:disabled {
    background: var(--c-surface-soft);
    color: var(--c-text-muted);
    cursor: not-allowed;
}

.form-group { margin-bottom: var(--s-4); }
.form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
    color: var(--c-text);
    letter-spacing: var(--tr-snug);
}
.form-group input,
.form-group select,
.form-group textarea { width: 100%; }

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--s-4);
}
.form-row .form-group { margin-bottom: 0; }
.form-hint,
small.text-muted {
    display: inline-block;
    margin-top: 5px;
    color: var(--c-text-muted);
    font-size: 12.5px;
}
.required-mark {
    color: var(--c-danger);
    font-weight: 700;
}

.form-actions {
    margin-top: var(--s-6);
    display: flex;
    gap: var(--s-3);
    flex-wrap: wrap;
    padding-top: var(--s-4);
    border-top: 1px solid var(--c-border);
}

/* Filters bar (lista de transacciones, reportes) */
.filters .form-row { align-items: end; gap: var(--s-3); }

/* ---------------------------------------------------------------
   10. Sistema de botones — UNIFICADO
   ------------------------------------------------------------
   Reglas:
   - Toda variante hereda el mismo height, radius, font, focus ring
   - El COLOR lo da el modifier .btn-primary | .btn-secondary | .btn-ghost | .btn-danger
   - El TAMAÑO lo da .btn-sm (32px) / default (40px) / .btn-lg (48px)
   - .btn-icon = cuadrado para iconos (mismo height que el size)
   - .btn-oauth, .btn-login son variantes especiales que reusan el mismo base
--------------------------------------------------------------- */
.btn,
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-danger,
.btn-sm,
.btn-login,
.btn-oauth {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    font-family: var(--font-sans);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-body);
    line-height: 1;
    letter-spacing: var(--tr-snug);
    border: 1px solid transparent;
    border-radius: var(--r);
    padding: 0 var(--s-4);
    height: 40px;
    min-width: 40px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition:
        background var(--t),
        border-color var(--t),
        color var(--t),
        box-shadow var(--t),
        transform var(--t-fast);
}
/* Active: leve hundimiento */
.btn:active,
.btn-primary:active,
.btn-secondary:active,
.btn-ghost:active,
.btn-danger:active,
.btn-sm:active,
.btn-login:active,
.btn-oauth:active { transform: translateY(1px); }

/* Focus ring uniforme en TODOS los botones */
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-ghost:focus-visible,
.btn-danger:focus-visible,
.btn-sm:focus-visible,
.btn-login:focus-visible,
.btn-oauth:focus-visible {
    outline: none;
    box-shadow: var(--sh-focus-ring);
}

/* Disabled */
.btn[disabled],
.btn-primary[disabled],
.btn-secondary[disabled],
.btn-ghost[disabled],
.btn-danger[disabled] {
    opacity: 0.45;
    pointer-events: none;
    box-shadow: none;
    transform: none;
}

/* ---- Variantes de COLOR ---- */
.btn-primary {
    background: linear-gradient(180deg, var(--primary-600) 0%, var(--primary-700) 100%);
    color: #fff;
    border-color: var(--primary-700);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.btn-primary:hover {
    background: linear-gradient(180deg, var(--primary-700) 0%, #1E3A8A 100%);
    border-color: #1E3A8A;
    color: #fff;
    box-shadow: 0 6px 14px -3px rgba(37, 99, 235, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.16);
    transform: translateY(-1px);
}

.btn-secondary {
    background: var(--c-surface);
    color: var(--c-text);
    border-color: var(--c-border-strong);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    font-weight: var(--fw-medium);
}
.btn-secondary:hover {
    background: var(--c-surface-soft);
    color: var(--c-primary-dark);
    border-color: var(--c-primary);
    box-shadow: var(--sh);
    transform: translateY(-1px);
}

/* Ghost: solo texto, sin fondo. Para acciones terciarias dentro de cards */
.btn-ghost {
    background: transparent;
    color: var(--c-text-body);
    border-color: transparent;
    font-weight: var(--fw-medium);
}
.btn-ghost:hover {
    background: var(--c-surface-soft);
    color: var(--c-text);
}

.btn-danger {
    background: linear-gradient(180deg, #EF4444 0%, var(--c-danger) 100%);
    color: #fff;
    border-color: var(--c-danger);
    box-shadow: 0 1px 2px rgba(220, 38, 38, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.btn-danger:hover {
    background: #B91C1C;
    border-color: #B91C1C;
    color: #fff;
    box-shadow: 0 6px 14px -3px rgba(220, 38, 38, 0.45);
    transform: translateY(-1px);
}

/* ---- Tamaños ---- */
/* sm: 32px height — para acciones in-row, in-card */
.btn-sm {
    height: 32px;
    min-width: 32px;
    padding: 0 12px;
    font-size: var(--fs-sm);
    border-radius: var(--r-sm);
    font-weight: var(--fw-medium);
}
/* sm sin variante de color = secondary por default */
.btn-sm:not(.btn-primary):not(.btn-danger):not(.btn-ghost) {
    background: var(--c-surface);
    color: var(--c-text-body);
    border-color: var(--c-border-strong);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.btn-sm:not(.btn-primary):not(.btn-danger):not(.btn-ghost):hover {
    background: var(--c-primary-soft);
    color: var(--c-primary-dark);
    border-color: var(--c-primary);
}

/* lg: 48px height — para CTAs principales (login, formularios largos) */
.btn-lg {
    height: 48px;
    padding: 0 var(--s-6);
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
}

/* Icon: cuadrado, sin padding lateral — para botones con un solo símbolo */
.btn-icon {
    width: 40px;
    min-width: 40px;
    padding: 0;
    font-size: 16px;
    line-height: 1;
}
.btn-sm.btn-icon {
    width: 32px;
    min-width: 32px;
    font-size: 14px;
}

/* ---- Variantes especiales ---- */
/* Login: full-width primary lg con margen. */
.btn-login {
    width: 100%;
    height: 48px;
    background: linear-gradient(180deg, var(--primary-600) 0%, var(--primary-700) 100%);
    color: #fff;
    border-color: var(--primary-700);
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
    margin-top: var(--s-4);
    box-shadow: 0 4px 12px -2px rgba(37, 99, 235, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.btn-login:hover {
    background: linear-gradient(180deg, var(--primary-700) 0%, #1E3A8A 100%);
    border-color: #1E3A8A;
    box-shadow: 0 8px 20px -4px rgba(37, 99, 235, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.16);
    transform: translateY(-1px);
}

/* OAuth: full-width neutro con ícono. Mismo height que btn default. */
.btn-oauth {
    width: 100%;
    height: 44px;
    gap: var(--s-3);
    background: var(--c-surface);
    color: var(--c-text);
    border-color: var(--c-border-strong);
    margin-bottom: var(--s-2);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.btn-oauth:hover {
    background: var(--c-surface-soft);
    border-color: var(--c-text-muted);
    box-shadow: var(--sh);
    color: var(--c-text);
    transform: translateY(-1px);
}
.btn-oauth svg { flex-shrink: 0; }

.login-divider {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin: var(--s-5) 0;
    color: var(--c-text-muted);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--tr-wider);
}
.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--c-border);
}
.login-divider span { white-space: nowrap; }

/* ---------------------------------------------------------------
   11. Badges
--------------------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    border-radius: var(--r-pill);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border: 1px solid transparent;
    line-height: 1.4;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.badge-ingreso,
.badge-activo,
.badge-cancelado {
    background: var(--c-success-bg);
    color: var(--c-success);
    border-color: var(--c-success-border);
}
.badge-egreso,
.badge-pasivo {
    background: var(--c-danger-bg);
    color: var(--c-danger);
    border-color: var(--c-danger-border);
}
.badge-diario,
.badge-patrimonio {
    background: var(--c-info-bg);
    color: var(--c-info);
    border-color: var(--c-info-border);
}
.badge-pendiente {
    background: var(--c-warning-bg);
    color: var(--c-warning);
    border-color: var(--c-warning-border);
}
.badge-parcial {
    background: var(--c-partial-bg);
    color: var(--c-partial);
    border-color: var(--c-partial-border);
}
.badge-anulado {
    background: var(--c-surface-soft);
    color: var(--c-text-muted);
    border-color: var(--c-border-strong);
}
.badge-success-solid,
.badge-warning-solid,
.badge-danger-solid,
.badge-info-solid {
    color: white;
    border-color: transparent;
}
.badge-success-solid { background: var(--c-success); }
.badge-warning-solid { background: var(--warning); }
.badge-danger-solid { background: var(--c-danger); }
.badge-info-solid { background: var(--c-primary); }

/* ---------------------------------------------------------------
   12. Alerts
--------------------------------------------------------------- */
.alert {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-4) var(--s-5);
    border-radius: var(--r-lg);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    border: 1px solid transparent;
    border-left-width: 4px;
    box-shadow: var(--sh-sm);
}
.alert > span { flex: 1; }
.alert-dismiss {
    border: 0;
    background: transparent;
    color: currentColor;
    font-size: 18px;
    line-height: 1;
    opacity: 0.65;
    cursor: pointer;
    padding: 0 0 0 var(--s-2);
}
.alert-dismiss:hover { opacity: 1; }
.alert-success {
    background: var(--c-success-bg);
    color: var(--c-success);
    border-color: var(--c-success-border);
    border-left-color: var(--c-success);
}
.alert-error {
    background: var(--c-danger-bg);
    color: var(--c-danger);
    border-color: var(--c-danger-border);
    border-left-color: var(--c-danger);
}
.alert-warning {
    background: var(--c-warning-bg);
    color: var(--c-warning);
    border-color: var(--c-warning-border);
    border-left-color: var(--c-warning);
}

/* ---------------------------------------------------------------
   13. Detalle de transaccion
--------------------------------------------------------------- */
.detail-header {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    flex-wrap: wrap;
    padding: var(--s-5) var(--s-6);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh);
    position: relative;
    overflow: hidden;
}
.detail-header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--accent-500) 0%, var(--primary-600) 100%);
}
.detail-header h2 {
    flex: 1;
    min-width: 220px;
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tr-tight);
    margin: 0;
}
.detail-actions {
    display: flex;
    gap: var(--s-3);
    flex-wrap: wrap;
}

/* Status bar: barra superior con badges de estado del documento */
.status-bar {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    flex-wrap: wrap;
    margin-bottom: calc(var(--s-5) * -1 + var(--s-2));
}

/* Tabla de lineas de factura/documento: anchos optimizados */
.line-items {
    table-layout: auto;
}
/* Código del producto: 1 sola línea, no se corta. Si hay correlativo (sin
   producto), igual sale en una línea pero más muted. */
.line-items .col-codigo {
    width: 110px;
    white-space: nowrap;
    text-align: left;
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-sm);
}
.line-items .col-codigo strong { color: var(--c-text); }
/* Compatibilidad legacy: vistas que aún usen .col-num */
.line-items .col-num {
    width: 48px;
    text-align: center;
    color: var(--c-text-muted);
    font-variant-numeric: tabular-nums;
}
.line-items thead .col-num,
.line-items thead .col-codigo { text-align: left; }
.line-items .col-qty { width: 80px; white-space: nowrap; }
.line-items .col-money { width: 120px; white-space: nowrap; }
/* Descripción: la única que SÍ wrap (multilínea OK) */
.line-items .col-desc { word-break: break-word; line-height: 1.4; }
.line-items tbody td { vertical-align: middle; }

/* .invoice-summary se mantiene como alias del componente unificado
   .invoice-totals (ver bloque arriba). Solo overrides legacy de .line-items
   en mobile que no son del componente totals: */
@media (max-width: 600px) {
    .line-items .col-codigo { width: 80px; font-size: 12px; }
    .line-items .col-qty { width: 60px; }
    .line-items .col-money { width: 100px; }
}

/* ---------------------------------------------------------------
   Conciliacion bancaria y adjuntos
--------------------------------------------------------------- */
.reconciliation-filter {
    display: flex;
    align-items: end;
    gap: var(--s-4);
    flex-wrap: wrap;
}
.reconciliation-filter__account { flex: 1 1 320px; margin-bottom: 0; }
.reconciliation-filter__actions { display: flex; align-items: center; }

.reconciliation-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--s-3);
}
.reconciliation-summary div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.reconciliation-summary strong {
    color: var(--c-text-muted);
    font-size: 12px;
    font-weight: 500;
}
.reconciliation-summary span {
    color: var(--c-text);
    font-weight: 600;
}

.reconciliation-import-panel h3,
.reconciliation-import-panel h4,
.reconciliation-panel h3,
.attachment-panel h3 {
    margin-bottom: var(--s-3);
}
.reconciliation-import-panel > .text-muted { margin-bottom: 0; }
.reconciliation-import-form { margin-top: var(--s-4); }
.reconciliation-check {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 39px;
    color: var(--c-text);
    font-weight: 500;
}
.reconciliation-check input { flex: 0 0 auto; }

.reconciliation-split {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
    gap: var(--s-5);
    align-items: start;
}
.reconciliation-panel { min-width: 0; }
.reconciliation-table-wrap,
.attachment-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.reconciliation-table-wrap table,
.attachment-table-wrap table {
    min-width: 760px;
}
.reconciliation-number,
.attachment-number {
    text-align: right;
    white-space: nowrap;
}
.status-row--matched td { background: var(--c-success-bg); }
.status-row--matched:hover td { background: #bbf7d0; }
.status-row--suggested td { background: var(--c-warning-bg); }
.status-row--suggested:hover td { background: #fde68a; }
.reconciliation-inline-form,
.attachment-inline-form,
.attachment-panel .inline-form {
    display: inline-flex;
    align-items: center;
}
.reconciliation-match-form {
    display: flex;
    gap: var(--s-2);
    align-items: center;
    min-width: 260px;
}
.reconciliation-match-form select { min-width: 0; flex: 1 1 auto; }

.attachment-panel { margin-top: var(--s-6); }
.attachment-upload {
    margin-top: var(--s-4);
    padding-top: var(--s-4);
    border-top: 1px solid var(--c-border);
}
.attachment-upload__row {
    grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) auto;
    align-items: end;
}
.attachment-upload__actions { margin-bottom: 0; }

@media (max-width: 1100px) {
    .reconciliation-split { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   14. Libro diario
--------------------------------------------------------------- */
.transaccion-diario { padding: var(--s-4); }
.transaccion-header {
    padding: var(--s-3) var(--s-4);
    background: var(--c-primary-soft);
    border-radius: var(--r-sm);
    margin-bottom: var(--s-3);
    font-size: 13px;
    color: var(--c-text);
    border-left: 3px solid var(--c-primary);
}
.transaccion-header strong { color: var(--c-primary-dark); }

/* ---------------------------------------------------------------
   15. Resultado final (estado de resultados / balance)
--------------------------------------------------------------- */
.resultado-final { text-align: left; }
.resultado-final h3 {
    font-size: 18px;
    margin: var(--s-2) 0 var(--s-1);
}
.resultado-final p { color: var(--c-text-muted); font-size: 13px; margin: 4px 0; }

/* ---------------------------------------------------------------
   16. Paginacion
--------------------------------------------------------------- */
.paginacion {
    display: flex;
    gap: var(--s-2);
    align-items: center;
    flex-wrap: wrap;
    margin-top: var(--s-4);
    padding: var(--s-3) 0 0;
    font-size: 13px;
    color: var(--c-text-muted);
}
.paginacion .btn-sm {
    min-width: 36px;
    padding: 6px 10px;
    justify-content: center;
}
.paginacion .btn-sm.btn-primary { pointer-events: none; }

/* ---------------------------------------------------------------
   17. Enterprise UI primitives
--------------------------------------------------------------- */
.toolbar,
.action-bar {
    display: flex;
    gap: var(--s-3);
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.toolbar {
    padding: var(--s-4);
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid var(--c-border);
    border-radius: var(--r);
    box-shadow: var(--sh-sm);
}
.summary-strip,
.metric-strip {
    display: flex;
    gap: var(--s-4);
    flex-wrap: wrap;
    align-items: center;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid var(--c-border);
    border-radius: var(--r);
    padding: var(--s-4) var(--s-5);
    box-shadow: var(--sh-sm);
}
.summary-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 150px;
}
.summary-label {
    color: var(--c-text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.summary-value {
    color: var(--c-text);
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.split-grid,
.two-column-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-5);
    align-items: start;
}
.panel,
.section-panel {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r);
    padding: var(--s-5);
    box-shadow: var(--sh-sm);
}
.panel > h3,
.section-panel > h3 {
    margin-bottom: var(--s-3);
}
.inline-form {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    flex-wrap: wrap;
}
.inline-form select,
.inline-form input {
    min-width: 150px;
}
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--s-4);
    align-items: end;
}
.compact-form {
    display: flex;
    gap: var(--s-3);
    align-items: end;
    flex-wrap: wrap;
}
.compact-form .form-group { margin: 0; }
.scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.value-large {
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.total-input {
    font-weight: 700;
    font-size: 16px;
}
.value-success { color: var(--c-success); }
.value-danger { color: var(--c-danger); }
.value-warning { color: var(--c-warning); }
.value-info { color: var(--c-info); }
.value-muted { color: var(--c-text-muted); }
.list-relaxed { line-height: 1.75; }
.period-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-3);
    flex-wrap: wrap;
    margin-bottom: var(--s-3);
}
.period-title {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin: 0;
}
/* ----- Tabla de líneas de factura (venta/compra) -----
   Compacta: tipografía y padding reducidos para que no desborde
   en pantallas medianas. Los inputs heredan los estilos globales
   pero los reducimos solo dentro de esta tabla. */
.line-items-table { font-size: 12.5px; table-layout: fixed; }
.line-items-table thead th {
    font-size: 10.5px;
    padding: 10px 8px;
    letter-spacing: 0.05em;
}
.line-items-table tbody td {
    padding: 6px 6px;
    vertical-align: middle;
}
.line-items-table tbody tr:nth-child(even) td { background: transparent; }
.line-items-table tbody tr:hover td { background: var(--c-primary-soft); color: var(--c-text); }

/* Inputs y selects DENTRO de la tabla de líneas — compactos y sin sombras */
.line-items-table input,
.line-items-table select {
    width: 100%;
    font-size: 12.5px;
    padding: 6px 8px;
    border-radius: var(--r-sm);
    box-shadow: none;
    background: var(--c-surface);
}
.line-items-table input:focus,
.line-items-table select:focus {
    box-shadow: var(--sh-focus-ring-soft);
}
/* Campos numéricos: alinear a la derecha y quitar arrows que ocupan ancho */
.line-items-table input[type="number"] {
    text-align: right;
    -moz-appearance: textfield;
}
.line-items-table input[type="number"]::-webkit-outer-spin-button,
.line-items-table input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.line-items-table .linea-subtotal {
    display: inline-block;
    width: 100%;
    text-align: right;
    font-weight: 600;
    color: var(--c-text);
    font-variant-numeric: tabular-nums;
    padding: 6px 8px;
}

/* Anchos de columnas — más espacio a numéricos, menos a producto/cuenta */
.line-items-table .col-product { width: 16%; }
.line-items-table .col-description { width: 26%; }
.line-items-table .col-qty { width: 9%; }
.line-items-table .col-price { width: 12%; }
.line-items-table .col-discount { width: 9%; }
.line-items-table .col-subtotal { width: 12%; text-align: right; }
.line-items-table .col-account { width: 11%; }
.line-items-table .col-actions { width: 40px; }

/* Botón quitar línea — icono compacto rojo */
.line-items-table .btn-quitar {
    width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    border-radius: var(--r-sm);
    font-size: 16px;
    line-height: 1;
}

/* En pantallas medianas/pequeñas la tabla scrollea horizontal para no romper
   el form ni perder columnas. Ancho mínimo garantizado. */
@media (max-width: 1100px) {
    .line-items-table { font-size: 12px; min-width: 920px; }
    .line-items-table input,
    .line-items-table select { font-size: 12px; padding: 5px 6px; }
}
.detail-info:has(> .line-items-table) { overflow-x: auto; }
/* Fallback para navegadores sin :has — el wrap manual también funciona */
#tabla-lineas { display: table; }

/* ============================================================
   Panel de totales de factura — UN SOLO COMPONENTE
   ------------------------------------------------------------
   Usado en:  crear factura (con <input readonly> para JS)
              ver factura (con <span> de solo lectura)
              también soporta legacy <dl><dt/><dd/> via .invoice-summary

   Convención: Subtotal arriba → impuestos → TOTAL al pie con
   border-top sólido y monto en azul vibrante. Sin caja gradient.
   ============================================================ */
/* .invoice-totals = panel block alineado a la derecha (NO flex container).
   Sus rows internos son grid 2 cols. Esta es la unica forma confiable de
   alinear a la derecha de un padre block (margin-left:auto solo funciona
   en elementos block con max-width). */
.invoice-totals {
    display: block;
    width: 100%;
    max-width: 380px;
    margin-left: auto;
    margin-right: 0;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    padding: var(--s-3) var(--s-5);
}
/* .invoice-summary legacy: wrapper flex justify-end + el <dl> adentro
   tiene los estilos card */
.invoice-summary {
    display: flex;
    justify-content: flex-end;
}
.invoice-summary > dl {
    width: 100%;
    max-width: 380px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    padding: var(--s-3) var(--s-5);
    margin: 0;
}

/* Filas: label izquierda + monto derecha */
.invoice-totals-row,
.invoice-summary .row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: var(--s-3);
    padding: 12px 0;
    border-bottom: 1px solid var(--c-border);
}

/* Wrapper del monto: agrupa moneda + número en una sola unidad alineada a la derecha */
.invoice-totals-amount {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    justify-self: end;
    white-space: nowrap;
}
.currency-prefix {
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    letter-spacing: var(--tr-snug);
}
.invoice-totals-total .currency-prefix {
    font-size: var(--fs-sm);
    color: var(--c-primary);
    font-weight: var(--fw-semibold);
}
.invoice-totals-row:last-child,
.invoice-summary .row:last-child { border-bottom: 0; }

/* Label */
.invoice-totals-label,
.invoice-summary dt {
    color: var(--c-text-body);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    text-align: left;
    margin: 0;
}

/* Valor (puede ser <span>, <dd> o <input readonly>) */
.invoice-totals-row .invoice-totals-value,
.invoice-totals-row input,
.invoice-summary dd {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
    font-weight: var(--fw-semibold);
    color: var(--c-text);
    font-size: var(--fs-body);
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    height: auto;
}
.invoice-totals-row .invoice-totals-value,
.invoice-summary dd {
    min-width: 110px;
    justify-self: end;
}
/* Inputs dentro del .invoice-totals-amount: solo el número, ancho ajustado */
.invoice-totals-amount input {
    width: 110px;
    height: 24px;
    padding: 0;
    text-align: right;
}
.invoice-totals-amount input:focus {
    box-shadow: none;
    background: var(--c-surface-soft);
    border-radius: var(--r-sm);
    padding: 0 4px;
}
/* Input EDITABLE dentro del bloque (ej: subtotal de NC/ND que el usuario tipea):
   se diferencia de los readonly con border-bottom sutil + focus visible */
.invoice-totals-amount input.invoice-totals-editable {
    border-bottom: 1.5px solid var(--c-border-strong);
    background: var(--c-surface);
    padding: 2px 6px;
    height: 30px;
    border-radius: var(--r-sm);
    border: 1px solid var(--c-border-strong);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.invoice-totals-amount input.invoice-totals-editable:hover {
    border-color: var(--c-text-subtle);
}
.invoice-totals-amount input.invoice-totals-editable:focus {
    border-color: var(--c-primary);
    box-shadow: var(--sh-focus-ring);
    background: var(--c-surface);
    padding: 2px 6px;
}
.invoice-totals-amount input.invoice-totals-editable::placeholder {
    color: var(--placeholder);
}

/* Fila TOTAL: border-top sólido + monto azul vibrante grande */
.invoice-totals-total,
.invoice-summary .row.total {
    border-top: 2px solid var(--c-text);
    border-bottom: 0;
    margin-top: 4px;
    padding-top: 14px;
    padding-bottom: 12px;
}
.invoice-totals-total .invoice-totals-label,
.invoice-summary .row.total dt {
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--c-text);
    text-transform: uppercase;
    letter-spacing: var(--tr-wider);
}
.invoice-totals-total .invoice-totals-value,
.invoice-totals-total input,
.invoice-summary .row.total dd {
    font-size: 20px;
    font-weight: var(--fw-bold);
    color: var(--c-primary);
    letter-spacing: var(--tr-tight);
    font-family: var(--font-display);
}
/* TOTAL: el input dentro del wrap también debe ser grande y azul */
.invoice-totals-total .invoice-totals-amount input {
    font-size: 20px;
    font-weight: var(--fw-bold);
    color: var(--c-primary);
    letter-spacing: var(--tr-tight);
    font-family: var(--font-display);
    height: 30px;
    width: 130px;
}

@media (max-width: 600px) {
    .invoice-totals,
    .invoice-summary > dl { max-width: 100%; }
    .invoice-totals-row .invoice-totals-value,
    .invoice-totals-row input,
    .invoice-summary dd { min-width: 100px; }
}
.budget-month-cell { min-width: 80px; }
.budget-month-input { width: 80px; }
.choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--s-2);
}
.choice-card {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-3);
    background: var(--c-surface-soft);
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    cursor: pointer;
}
.choice-card:hover {
    border-color: var(--c-primary);
    background: var(--c-primary-soft);
}

/* ---------------------------------------------------------------
   18. Login
--------------------------------------------------------------- */
.login-body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: var(--s-4);
    background:
        radial-gradient(ellipse 60rem 40rem at 100% -10%, rgba(6, 182, 212, 0.15), transparent 60%),
        radial-gradient(ellipse 60rem 40rem at -10% 110%, rgba(37, 99, 235, 0.18), transparent 70%),
        linear-gradient(135deg, var(--c-sidebar) 0%, #1E3A8A 100%);
    background-attachment: fixed;
}
.login-container { width: 100%; max-width: 420px; }
.login-box {
    background: var(--c-surface);
    padding: var(--s-8);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
    border: 1px solid var(--c-border);
}

/* Brand: bloque del logo + nombre + subtítulo */
.login-brand {
    text-align: center;
    margin-bottom: var(--s-6);
    padding-bottom: var(--s-5);
    border-bottom: 1px solid var(--c-border);
}
.login-logo {
    display: block;
    max-width: 200px;
    max-height: 64px;
    margin: 0 auto var(--s-3);
    object-fit: contain;
}
.login-isotipo {
    display: block;
    width: 56px;
    height: 56px;
    margin: 0 auto var(--s-3);
    object-fit: contain;
    border-radius: 12px;
    background: var(--c-surface-soft);
    padding: 6px;
}
.login-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary-600), var(--accent-500));
    color: white;
    font-size: 28px;
    font-weight: 700;
    box-shadow: 0 8px 24px -8px rgba(37, 99, 235, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
    margin-bottom: var(--s-3);
}
.login-box h1 {
    color: var(--c-text);
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tr-tight);
    margin: 0 0 4px;
}
/* Si hay logo grande con letras, ocultamos el h1 (el logo ya tiene el nombre) */
.login-brand:has(.login-logo) h1 { display: none; }
.login-subtitle {
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
    margin: 0;
}
.login-box h2 {
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tr-wider);
    margin-bottom: var(--s-5);
    text-align: center;
}

/* ---------------------------------------------------------------
   18. Pagina 404 / errores
--------------------------------------------------------------- */
.error-container {
    text-align: center;
    padding: var(--s-12) var(--s-6);
    background: var(--c-surface);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
    border: 1px solid var(--c-border);
    max-width: 460px;
    margin: 10vh auto;
}
.error-logo {
    display: block;
    max-width: 180px;
    max-height: 56px;
    margin: 0 auto var(--s-5);
    object-fit: contain;
}
.error-isotipo {
    display: block;
    width: 56px;
    height: 56px;
    margin: 0 auto var(--s-5);
    object-fit: contain;
    border-radius: 12px;
    background: var(--c-surface-soft);
    padding: 6px;
}
.error-container h1 {
    font-family: var(--font-display);
    font-size: 80px;
    color: var(--c-primary);
    margin: 0 0 var(--s-2);
    letter-spacing: var(--tr-tight);
    line-height: 1;
    background: linear-gradient(135deg, var(--primary-600), var(--accent-500));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.error-subtitle {
    color: var(--c-text);
    font-size: var(--fs-h2);
    font-weight: var(--fw-semibold);
    margin: 0 0 var(--s-3);
}
.error-text {
    color: var(--c-text-muted);
    margin-bottom: var(--s-6);
}
.error-container p { color: var(--c-text-muted); }

/* ---------------------------------------------------------------
   19. Utilidades
--------------------------------------------------------------- */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.text-nowrap { white-space: nowrap; }
.text-success { color: var(--c-success); }
.text-danger { color: var(--c-danger); }
.text-muted { color: var(--c-text-muted); }
.tabular { font-variant-numeric: tabular-nums; }
.is-hidden { display: none; }
.hidden { display: none; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.display-inline { display: inline; }
.display-inline-block { display: inline-block; }
.display-flex { display: flex; }
.mt-1 { margin-top: var(--s-1); }
.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mb-3 { margin-bottom: var(--s-3); }
.max-w-code { max-width: 420px; }
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.money-cell,
.number-cell {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Tabs (auditoria, configuracion, etc.) */
.tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--c-border);
    margin-bottom: var(--s-4);
    overflow-x: auto;
    scrollbar-width: thin;
}
.tab {
    padding: var(--s-3) var(--s-5);
    color: var(--c-text-muted);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    transition: color var(--t), border-color var(--t);
}
.tab:hover { color: var(--c-text); }
.tab.is-active {
    color: var(--c-primary);
    border-bottom-color: var(--c-primary);
    font-weight: 600;
}

/* Tabla de diff dentro de un detail */
.diff-table {
    width: 100%;
    margin-top: var(--s-2);
    font-size: 12.5px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
}
.diff-table thead th {
    background: var(--c-surface-soft);
    padding: 6px 10px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
}
.diff-table tbody td {
    padding: 6px 10px;
    word-break: break-word;
    border-bottom: 1px solid var(--c-border);
}
.diff-table tbody tr:last-child td { border-bottom: 0; }
.diff-table code {
    font-family: var(--font-mono);
    font-size: 11.5px;
    background: var(--c-primary-soft);
    padding: 1px 4px;
    border-radius: 3px;
}

/* Lista de toggles (configuracion de modulos / feature flags) */
.toggle-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    margin-top: var(--s-3);
}
.toggle-row {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    background: var(--c-surface-soft);
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background var(--t), border-color var(--t);
}
.toggle-row:hover {
    background: white;
    border-color: var(--c-border-strong);
}
.toggle-row input[type="checkbox"] {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    accent-color: var(--c-primary);
    flex-shrink: 0;
    cursor: pointer;
}
.toggle-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.toggle-info strong {
    font-size: 14px;
    color: var(--c-text);
    font-weight: 600;
}
.toggle-info small {
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--c-text-muted);
}

.code-block {
    font-family: var(--font-mono);
    font-size: 11px;
    background: var(--c-surface-soft);
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    padding: var(--s-2);
    overflow: auto;
}
.logo-preview {
    max-height: 40px;
    vertical-align: middle;
    margin-left: var(--s-2);
}

.report-table {
    font-variant-numeric: tabular-nums;
}

.statement-section td,
.statement-section th {
    background: var(--c-surface-soft);
    color: var(--c-text);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.statement-subtotal td,
.statement-subtotal th,
.report-total td,
.report-total th {
    background: var(--c-primary-soft);
    font-weight: 600;
}

.statement-total td,
.statement-total th {
    background: var(--c-sidebar);
    color: white;
    font-weight: 700;
}

.statement-total-positive td,
.statement-total-positive th {
    background: var(--c-success);
    color: white;
    font-weight: 700;
}

.statement-total-negative td,
.statement-total-negative th {
    background: var(--c-danger);
    color: white;
    font-weight: 700;
}

.statement-note td,
.statement-note th {
    background: var(--c-warning-bg);
    font-style: italic;
}

.statement-spacer td {
    padding-top: var(--s-4);
}

.report-summary {
    display: flex;
    gap: var(--s-5);
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: var(--s-5);
}

.report-summary-item {
    color: var(--c-text);
    font-variant-numeric: tabular-nums;
}

.report-summary-item strong {
    color: var(--c-text-muted);
    font-weight: 600;
}

.is-positive { color: var(--c-success); font-weight: 700; }
.is-negative { color: var(--c-danger); font-weight: 700; }

.help-text {
    font-size: 13px;
    color: var(--c-text-muted);
    margin: calc(-1 * var(--s-3)) 0 var(--s-2);
}

.empty-state {
    padding: var(--s-8) var(--s-5);
    text-align: center;
    color: var(--c-text-muted);
    background: var(--c-surface);
    border: 1px dashed var(--c-border-strong);
    border-radius: var(--r);
}

/* .error-page wrapper — el .error-container y sus estilos viven más arriba (sección 18) */
.error-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s-6);
    background:
        radial-gradient(ellipse 50rem 30rem at 100% -10%, rgba(6, 182, 212, 0.08), transparent 60%),
        radial-gradient(ellipse 60rem 40rem at -10% 110%, rgba(37, 99, 235, 0.06), transparent 70%),
        var(--c-bg);
    background-attachment: fixed;
}

/* ---------------------------------------------------------------
   20. Topbar mobile + drawer
--------------------------------------------------------------- */
/* Topbar: visible solo en mobile. Contiene hamburguesa, marca y acciones
   de usuario (avatar + cerrar sesion). Fija arriba para que el contenido
   nunca quede tapado por el menu. */
.topbar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    z-index: 170;
    background: var(--c-sidebar);
    color: white;
    align-items: center;
    gap: var(--s-3);
    padding: 0 var(--s-3);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.menu-toggle {
    display: none;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 0;
    border-radius: var(--r-sm);
    cursor: pointer;
    padding: 11px 9px;
    flex-direction: column;
    justify-content: space-between;
    transition: background var(--t);
    flex-shrink: 0;
}
.menu-toggle:hover,
.menu-toggle:focus-visible { background: rgba(255, 255, 255, 0.08); outline: none; }
.menu-toggle span {
    display: block;
    height: 2px;
    background: white;
    border-radius: 2px;
    transition: transform var(--t), opacity var(--t);
}

/* Marca (link al dashboard) */
.topbar-brand {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    color: white;
    text-decoration: none;
    font-weight: 600;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.topbar-brand:hover { color: white; }
.topbar-brand-mark {
    width: 28px;
    height: 28px;
    border-radius: var(--r-sm);
    background: linear-gradient(135deg, var(--c-primary) 0%, #1e40af 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.4);
    flex-shrink: 0;
}
.topbar-brand-name {
    font-size: 15px;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    flex-shrink: 0;
}
.topbar-user {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    flex-shrink: 0;
}
.topbar-logout {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.85);
    border-radius: var(--r-sm);
    transition: background var(--t), color var(--t);
}
.topbar-logout:hover {
    background: rgba(239, 68, 68, 0.18);
    color: #fecaca;
}

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 150;
    animation: fadeIn 200ms ease;
}
.sidebar-backdrop.open { display: block; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------------------------------------------------------------
   21. Responsive
--------------------------------------------------------------- */
@media (max-width: 900px) {
    .topbar { display: flex; }
    .menu-toggle { display: flex; }

    .sidebar {
        position: fixed;
        top: 0;
        left: -280px;
        height: 100vh;
        width: 260px;
        z-index: 180;
        transition: left 250ms ease;
        box-shadow: var(--sh-lg);
    }
    .sidebar.open { left: 0; }

    /* En mobile la marca ya esta en la topbar; ocultar el header del sidebar
       para no duplicarlo dentro del drawer */
    .sidebar .sidebar-header { display: none; }

    .container { display: block; }
    .main-content {
        padding: var(--s-5) var(--s-4) var(--s-6);
        padding-top: calc(56px + var(--s-4)); /* altura topbar + respiro */
    }
    .main-header {
        margin-bottom: var(--s-4);
        padding: var(--s-2) 0 var(--s-3);
    }

    /* Tablas: scroll horizontal en mobile en vez de romper layout */
    .main-content table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .main-content table thead,
    .main-content table tbody,
    .main-content table tfoot { display: table; width: 100%; }

    /* Cards / containers: padding mas chico */
    .detail-info,
    .panel,
    .section-panel,
    .stat-card,
    .kpi-card,
    .chart-card,
    .lista-card,
    .filters,
    .report-summary,
    .resultado-final,
    .transaccion-diario { padding: var(--s-4); }

    .stats-grid,
    .kpi-grid,
    .chart-grid,
    .dash-listas { gap: var(--s-3); }
    .ultimas-grid { grid-template-columns: 1fr; }
    .chart-card { min-height: 280px; }
    .kpi-value { font-size: 21px; }
    .split-grid,
    .two-column-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .form-row { grid-template-columns: 1fr; }
    .stats-grid,
    .kpi-grid,
    .chart-grid,
    .dash-listas { grid-template-columns: 1fr; }

    .page-header {
        flex-direction: column;
        align-items: stretch;
    }
    .page-header > div:first-child { margin-bottom: var(--s-3); }
    .page-header .detail-actions { flex-direction: column; }
    .page-header .detail-actions > * { width: 100%; }

    .detail-actions { flex-direction: column; }
    .detail-actions > * { width: 100%; }

    .form-actions {
        flex-direction: column;
    }
    .form-actions > * { width: 100%; }

    .main-content {
        padding: var(--s-4) var(--s-3) var(--s-6);
        padding-top: calc(56px + var(--s-3));
    }

    /* Topbar mas compacta en pantallas chicas */
    .topbar-brand-name { font-size: 14px; }
    .topbar-user { display: none; }

    h1 { font-size: 20px; }
    .main-header h1 { font-size: 20px; }
    .stat-value { font-size: 22px; }

    /* Login responsive */
    .login-box { padding: var(--s-6) var(--s-5); }
}

/* ---------------------------------------------------------------
   22. Tabla -> Tarjetas en mobile (opt-in con .cards-mobile)
   En pantallas chicas, las filas se reordenan como tarjetas
   verticales con cada celda mostrando "Etiqueta · Valor". Mucho
   mas legible que un scroll horizontal en listados.
--------------------------------------------------------------- */
@media (max-width: 720px) {
    /* Override del scroll horizontal del bloque mobile general
       (especificidad mayor por la clase) */
    .main-content table.cards-mobile,
    .main-content table.cards-mobile thead,
    .main-content table.cards-mobile tbody,
    .main-content table.cards-mobile tfoot,
    .main-content table.cards-mobile tr,
    .main-content table.cards-mobile td,
    .main-content table.cards-mobile th {
        display: block;
        width: 100%;
        white-space: normal;
        overflow: visible;
    }
    .main-content table.cards-mobile {
        background: transparent;
        border: 0;
        box-shadow: none;
        overflow: visible;
    }
    /* Header oculto pero accesible para lectores de pantalla */
    .main-content table.cards-mobile thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
    }
    .main-content table.cards-mobile tbody tr {
        background: var(--c-surface);
        border: 1px solid var(--c-border);
        border-radius: var(--r);
        padding: var(--s-3) var(--s-4);
        margin-bottom: var(--s-3);
        box-shadow: var(--sh-sm);
    }
    .main-content table.cards-mobile tbody tr:hover {
        background: var(--c-surface);
    }
    .main-content table.cards-mobile tbody tr:last-child { margin-bottom: 0; }
    .main-content table.cards-mobile tbody td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: var(--s-3);
        padding: 8px 0;
        border: 0;
        border-bottom: 1px dashed var(--c-border);
        text-align: right;
        white-space: normal;
    }
    .main-content table.cards-mobile tbody td:last-child { border-bottom: 0; }
    .main-content table.cards-mobile tbody td::before {
        content: attr(data-label);
        flex-shrink: 0;
        text-align: left;
        color: var(--c-text-muted);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-weight: 600;
    }
    /* Cuando una celda no tiene data-label (ej: columna de acciones),
       no se muestra etiqueta y el contenido se alinea a la derecha */
    .main-content table.cards-mobile tbody td:not([data-label])::before { content: none; }
    .main-content table.cards-mobile tbody td:not([data-label]) { justify-content: flex-end; }

    /* Tipos especificos: monto, badges, links */
    .main-content table.cards-mobile td .badge { white-space: nowrap; }
    .main-content table.cards-mobile td.money-cell,
    .main-content table.cards-mobile td.number-cell { text-align: right; }
    .main-content table.cards-mobile td a.btn-sm {
        white-space: nowrap;
    }

    /* Tfoot opcional: lo mostramos como tarjeta destacada al final */
    .main-content table.cards-mobile tfoot tr {
        background: var(--c-surface-soft);
        border: 1px solid var(--c-border-strong);
        font-weight: 700;
    }

    /* Si la tabla cards-mobile esta dentro de un .ultimas-col o panel,
       le quitamos cualquier padding extra que vendria del contenedor */
    .ultimas-col table.cards-mobile { font-size: 13.5px; }
}

/* ============================================================
   Componentes vanilla: Modal, Toast, Combobox
   ============================================================ */

/* ----- MODAL ------------------------------------------------- */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s-4);
    opacity: 0;
    transition: opacity 180ms ease;
}
.modal-backdrop.is-open { opacity: 1; }

.modal-dialog {
    background: var(--c-surface);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
    width: 100%;
    max-width: 480px;
    max-height: calc(100vh - 4rem);
    display: flex;
    flex-direction: column;
    transform: scale(0.96) translateY(8px);
    opacity: 0;
    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease;
}
.modal-backdrop.is-open .modal-dialog {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.modal-sm { max-width: 380px; }
.modal-md { max-width: 520px; }
.modal-lg { max-width: 720px; }

.modal-danger  { border-top: 4px solid var(--c-danger); }
.modal-success { border-top: 4px solid var(--c-success); }
.modal-warning { border-top: 4px solid #f59e0b; }

.modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--s-4) var(--s-5) var(--s-2);
    border-bottom: 1px solid var(--c-border);
}
.modal-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--c-text);
    margin: 0;
}
.modal-close {
    background: transparent;
    border: 0;
    font-size: 24px;
    line-height: 1;
    color: var(--c-text-muted);
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: var(--r-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--t), color var(--t);
}
.modal-close:hover { background: var(--c-surface-soft); color: var(--c-text); }

.modal-body {
    padding: var(--s-4) var(--s-5);
    overflow-y: auto;
    flex: 1;
    color: var(--c-text);
    font-size: 14px;
    line-height: 1.55;
}
.modal-body p { margin: 0 0 var(--s-3); }
.modal-body p:last-child { margin-bottom: 0; }
.modal-input {
    width: 100%;
    margin-top: var(--s-3);
    padding: 10px 12px;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-sm);
    font-size: 14px;
    background: var(--c-surface);
    color: var(--c-text);
    font-family: inherit;
    resize: vertical;
}
.modal-input:focus { outline: 2px solid var(--c-primary); outline-offset: 1px; border-color: var(--c-primary); }
.modal-error {
    color: var(--c-danger);
    font-size: 12.5px;
    margin-top: var(--s-2);
    min-height: 18px;
}

.modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-5) var(--s-4);
    border-top: 1px solid var(--c-border);
    background: var(--c-surface-soft);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.modal-foot button { min-width: 84px; }

/* ----- TOAST ------------------------------------------------- */
.toast-container {
    position: fixed;
    top: var(--s-4);
    right: var(--s-4);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    pointer-events: none;
    max-width: 380px;
}
.toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: 12px 14px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-left: 4px solid var(--c-primary);
    border-radius: var(--r-sm);
    box-shadow: var(--sh-md);
    font-size: 13.5px;
    color: var(--c-text);
    transform: translateX(120%);
    opacity: 0;
    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms ease;
}
.toast.is-visible { transform: translateX(0); opacity: 1; }
.toast.is-leaving { transform: translateX(120%); opacity: 0; }

.toast-success { border-left-color: var(--c-success); }
.toast-error   { border-left-color: var(--c-danger); }
.toast-warning { border-left-color: #f59e0b; }
.toast-info    { border-left-color: var(--c-primary); }

.toast-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    flex-shrink: 0;
    color: white;
    margin-top: 1px;
}
.toast-success .toast-icon { background: var(--c-success); }
.toast-error   .toast-icon { background: var(--c-danger); }
.toast-warning .toast-icon { background: #f59e0b; }
.toast-info    .toast-icon { background: var(--c-primary); }

.toast-msg { flex: 1; line-height: 1.45; }

.toast-close {
    background: transparent;
    border: 0;
    color: var(--c-text-muted);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 0 2px;
    flex-shrink: 0;
}
.toast-close:hover { color: var(--c-text); }

@media (max-width: 600px) {
    .toast-container {
        top: 64px; /* abajo de la topbar */
        right: var(--s-3);
        left: var(--s-3);
        max-width: none;
    }
}

/* ----- COMBOBOX ----------------------------------------------- */
.combobox {
    position: relative;
    width: 100%;
}
.combobox-native {
    /* el <select> original queda oculto pero presente para el form submit */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.combobox-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    width: 100%;
    padding: 9px 12px;
    background: var(--c-surface);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-sm);
    color: var(--c-text);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--t), box-shadow var(--t);
}
.combobox-trigger:hover { border-color: var(--c-text-muted); }
.combobox.is-open .combobox-trigger {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.combobox.is-disabled { opacity: 0.6; pointer-events: none; }

.combobox-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.combobox-label.is-placeholder { color: var(--c-text-muted); }
.combobox-caret {
    color: var(--c-text-muted);
    font-size: 11px;
    transition: transform 180ms ease;
}
.combobox.is-open .combobox-caret { transform: rotate(180deg); }

.combobox-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--c-surface);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-sm);
    box-shadow: var(--sh-md);
    z-index: 50;
    max-height: 280px;
    display: none;
    flex-direction: column;
    overflow: hidden;
}
.combobox.is-open .combobox-dropdown { display: flex; }

.combobox-search {
    padding: 9px 12px;
    border: 0;
    border-bottom: 1px solid var(--c-border);
    font-size: 13.5px;
    background: var(--c-surface);
    color: var(--c-text);
    outline: none;
    font-family: inherit;
}

.combobox-options {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    overflow-y: auto;
    flex: 1;
}
.combobox-option {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13.5px;
    color: var(--c-text);
    transition: background var(--t);
}
.combobox-option:hover,
.combobox-option.is-active {
    background: var(--c-primary-soft);
}
.combobox-option.is-selected {
    background: var(--c-primary);
    color: white;
    font-weight: 500;
}
.combobox-empty {
    padding: 12px;
    text-align: center;
    color: var(--c-text-muted);
    font-size: 13px;
    font-style: italic;
    list-style: none;
}

/* ============================================================
   REPORTES IMPRIMIBLES (auxiliar clientes/proveedores, balance, etc.)
   El bloque .reporte-impreso es lo que se exporta por window.print().
   Los controles (filtros, botones) viven en .reporte-toolbar y se
   ocultan al imprimir mediante @media print.
   ============================================================ */
.reporte-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.reporte-toolbar .filters { flex: 1 1 auto; margin-bottom: 0; }
.reporte-toolbar .reporte-acciones {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.form-group-check {
    display: flex;
    align-items: flex-end;
}
.form-group-check label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--c-text-strong, var(--c-text));
    cursor: pointer;
}

/* Subtítulo descriptivo debajo de un <h3> dentro de un .detail-info.
   Da el respiro correcto entre el título de sección y la descripción.
   Usar siempre esta clase en lugar de styles inline. */
.detail-info > h3 + .section-help,
.detail-info > h3 + p.section-help {
    margin-top: var(--s-2);
    margin-bottom: var(--s-4);
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
    line-height: 1.5;
    max-width: 720px;
}

/* Filtro "Omitir tipos asiento" — etiqueta + 3 checkboxes en linea */
.filtro-omit-tipos {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    border: 1px solid var(--c-border);
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--c-surface-soft);
}
.filtro-omit-tipos .filter-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}
.filtro-omit-tipos label {
    font-size: 12px;
    font-weight: normal;
    color: var(--c-text-body);
}

.reporte-impreso {
    background: #fff;
    color: var(--c-text);
    border: 1px solid var(--c-border);
    border-radius: 8px;
    padding: 28px 32px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    font-size: 13px;
    line-height: 1.45;
}
.reporte-encabezado {
    border-bottom: 2px solid var(--c-text);
    padding-bottom: 14px;
    margin-bottom: 18px;
}
.reporte-empresa {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--c-text-body);
    margin-bottom: 12px;
}
.reporte-logo {
    display: block;
    max-width: 140px;
    max-height: 56px;
    object-fit: contain;
    flex-shrink: 0;
}
.reporte-empresa-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.reporte-empresa-info strong {
    font-size: 13px;
    color: var(--c-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.reporte-empresa-info span {
    font-size: 11px;
    color: var(--c-text-body);
}
/* Print: el logo en blanco y negro o color, mantiene proporción */
@media print {
    .reporte-logo {
        max-width: 120px;
        max-height: 48px;
    }
}
.reporte-titulo {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    margin: 8px 0 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-text);
}
.reporte-filtros {
    display: grid;
    grid-template-columns: max-content 1fr max-content 1fr;
    gap: 4px 12px;
    font-size: 11px;
    color: var(--c-text-body);
    margin: 0;
}
.reporte-filtros dt { font-weight: 600; color: var(--c-text-body); }
.reporte-filtros dd { margin: 0; }
@media (max-width: 720px) {
    .reporte-filtros { grid-template-columns: max-content 1fr; }
}

.reporte-seccion {
    margin: 18px 0;
    page-break-inside: avoid;
}
.reporte-entidad {
    background: var(--c-surface-soft);
    border-left: 4px solid var(--c-text-body);
    padding: 8px 12px;
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--c-text);
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.reporte-entidad .reporte-rut { color: var(--c-text-muted); font-weight: 500; }
.reporte-entidad .reporte-nombre { color: var(--c-text); }

.reporte-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 11.5px;
}
.reporte-tabla th,
.reporte-tabla td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--c-border);
    vertical-align: top;
}
.reporte-tabla thead th {
    background: var(--c-text-body);
    color: #fff;
    text-align: left;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 10.5px;
    letter-spacing: 0.04em;
    border-bottom: 0;
}
.reporte-tabla .col-fecha { width: 80px; }
.reporte-tabla .col-tipo { width: 130px; }
.reporte-tabla .col-doc { width: 110px; }
.reporte-tabla .col-monto { width: 100px; text-align: right; }
.reporte-tabla .col-concepto { color: var(--c-text-body); }
.reporte-tabla .money-cell {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.reporte-tabla .text-right { text-align: right; }
.reporte-tabla code {
    font-size: 11px;
    background: transparent;
    color: var(--c-text);
}
.reporte-tabla tbody tr:nth-child(even) { background: var(--c-surface-soft); }
.reporte-tabla .row-saldo-inicial td {
    background: var(--c-surface-soft);
    font-style: italic;
    color: var(--c-text-muted);
}
.reporte-tabla .row-anulada td {
    text-decoration: line-through;
    color: var(--c-text-subtle);
}
.reporte-tabla tfoot .row-subtotal td {
    background: var(--c-border);
    font-weight: 600;
    border-top: 2px solid var(--c-text-body);
    border-bottom: 0;
}
.reporte-total-general .reporte-tabla {
    margin-top: 10px;
    border-top: 2px solid var(--c-text);
}
.reporte-total-general .row-total td {
    background: var(--c-text);
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    padding: 10px 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.reporte-pie {
    display: flex;
    justify-content: space-around;
    margin-top: 56px;
    padding-top: 12px;
}
.reporte-firma {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 200px;
}
.firma-line {
    width: 100%;
    border-top: 1px solid var(--c-text);
    margin-bottom: 4px;
}
.firma-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--c-text-body);
    text-transform: uppercase;
}
.reporte-pie-info {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
    padding-top: 8px;
    border-top: 1px solid var(--c-border);
    font-size: 10px;
    color: var(--c-text-muted);
}

/* ----- Variantes para reportes JERARQUICOS (balance/resultados formal) ----- */
.reporte-tabla-jerarquica {
    font-size: 11px;
}
.reporte-tabla-jerarquica .col-codigo { width: 110px; font-family: 'SFMono-Regular', Consolas, monospace; font-size: 10.5px; color: var(--c-text-body); }
.reporte-tabla-jerarquica .col-nombre { color: var(--c-text); }
.reporte-tabla-jerarquica .col-tipo { width: 130px; color: var(--c-text-muted); font-size: 10.5px; }
.reporte-tabla-jerarquica .row-titulo td {
    background: var(--c-surface-soft);
    font-weight: 700;
    color: var(--c-text);
}
.reporte-tabla-jerarquica .row-titulo .col-codigo code { color: var(--c-text); font-weight: 600; }
.reporte-tabla-jerarquica .row-cuenta td { color: var(--c-text-body); }
.reporte-tabla-jerarquica .nivel-1 td { font-size: 12px; }
.reporte-tabla-jerarquica .row-seccion td {
    background: var(--c-text);
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 11px;
    padding: 8px 10px;
}

.reporte-resumen {
    margin-top: 32px;
    page-break-inside: avoid;
}
.reporte-resumen h4 {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-text-body);
    margin: 0 0 8px;
}
.reporte-resumen-tabla {
    border-collapse: collapse;
    min-width: 280px;
    margin-left: auto;       /* alineado a la derecha como el PDF modelo */
    font-size: 11.5px;
}
.reporte-resumen-tabla th,
.reporte-resumen-tabla td {
    border: 1px solid var(--c-border-strong);
    padding: 6px 12px;
}
.reporte-resumen-tabla th {
    text-align: left;
    background: var(--c-surface-soft);
    font-weight: 600;
    color: var(--c-text);
}
.reporte-resumen-tabla td.money-cell {
    text-align: right;
    font-variant-numeric: tabular-nums;
    min-width: 110px;
}
.reporte-resumen-tabla .row-total th,
.reporte-resumen-tabla .row-total td {
    background: var(--c-text);
    color: #fff;
    font-weight: 700;
}

.reporte-resumen-doble {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}
.reporte-ecuacion thead th {
    background: var(--c-text-body);
    color: #fff;
    text-align: center;
}
.reporte-ecuacion tbody th {
    text-align: center;
    background: var(--c-border);
    font-size: 10.5px;
    text-transform: uppercase;
}
.reporte-ecuacion td.money-cell {
    text-align: center;
    font-weight: 600;
}
@media (max-width: 720px) {
    .reporte-resumen-doble { grid-template-columns: 1fr; }
    .reporte-resumen-tabla { margin-left: 0; }
}

/* ----- Variantes para Mayor por Cuenta (10 columnas, más comprimido) ----- */
.reporte-tabla-mayor { font-size: 10.5px; }
.reporte-tabla-mayor th,
.reporte-tabla-mayor td {
    padding: 5px 6px;
    vertical-align: top;
}
.reporte-tabla-mayor .col-fecha { width: 78px; }
.reporte-tabla-mayor .col-concepto { color: var(--c-text-body); min-width: 180px; }
.reporte-tabla-mayor .col-doc { width: 100px; }
.reporte-tabla-mayor .col-suc { width: 70px; color: var(--c-text-muted); }
.reporte-tabla-mayor .col-ref { width: 80px; color: var(--c-text-muted); }
.reporte-tabla-mayor .col-cc { width: 130px; color: var(--c-text-body); font-size: 10px; }
.reporte-tabla-mayor .col-manual { width: 50px; text-align: center; color: var(--c-text-muted); }
.reporte-tabla-mayor .col-monto { width: 90px; }
.reporte-tabla-mayor code { font-size: 10px; }
@media (max-width: 1100px) {
    .reporte-tabla-mayor { font-size: 9.5px; }
    .reporte-tabla-mayor th, .reporte-tabla-mayor td { padding: 4px; }
}

/* ----- Print: oculta toda la cascara y solo deja el reporte ----- */
@media print {
    @page { size: A4; margin: 14mm 12mm; }

    /* Oculta navegacion, header, sidebar, toolbar, alertas */
    .topbar,
    .sidebar,
    .sidebar-backdrop,
    .reporte-toolbar,
    .no-print,
    .alert,
    .main-header { display: none !important; }

    body, html {
        background: #fff !important;
        color: #000 !important;
        font-size: 10.5pt;
    }
    .container { display: block !important; }
    .main-content {
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        background: #fff !important;
    }
    .content { padding: 0 !important; }
    .reporte-impreso {
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        font-size: 9pt;
    }
    .reporte-titulo { font-size: 14pt; }
    .reporte-tabla { font-size: 8.5pt; }
    .reporte-tabla thead { display: table-header-group; } /* repite header por pagina */
    .reporte-tabla tfoot { display: table-row-group; }
    .reporte-seccion { page-break-inside: avoid; }
    a[href]::after { content: ''; } /* no expandir hrefs */
}

/* ============================================================
   CAPA DE COMPATIBILIDAD — Aliases del sistema legacy al canónico
   ------------------------------------------------------------
   Cuando se introdujo el documento docs/COMPONENTS.md (abril 2026)
   se detectaron múltiples patrones duplicados. Esta capa aliasea
   los nombres legacy al sistema canónico, sin tocar las 112 vistas.

   En código nuevo, usar SIEMPRE los nombres canónicos.
   Ver docs/COMPONENTS.md para la guía completa.
   ============================================================ */

/* --- Cards: .box, .panel-block → .detail-info --- */
.box {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: var(--s-6);
    box-shadow: var(--sh);
}

/* --- Tables legacy: heredan estilos default --- */
.report-table,
table.report-table,
table.totales,
table.lineas,
table.diff-table,
table.forma-pago {
    /* Heredan automáticamente los estilos de <table> base */
}

/* --- Money cells: todos los aliases pintan idéntico --- */
.money-cell,
.num,
.number-cell,
.reconciliation-number,
.attachment-number,
td.col-num,
td.col-monto {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
    white-space: nowrap;
}

/* --- Estados semánticos: positive/negative + aliases legacy --- */
.text-positive,
.text-success,
.value-success {
    color: var(--c-success);
}
.text-negative,
.text-danger,
.value-danger,
.is-negative {
    color: var(--c-danger);
}
/* "value-large" → numero destacado en cards */
.value-large {
    font-size: var(--fs-h2);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tr-tight);
}

/* --- Spacing utilities legacy (pre-tokens) --- */
.mt-1 { margin-top: var(--s-1); }
.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mb-1 { margin-bottom: var(--s-1); }
.mb-2 { margin-bottom: var(--s-2); }
.mb-3 { margin-bottom: var(--s-3); }
.mb-4 { margin-bottom: var(--s-4); }
.mb-5 { margin-bottom: var(--s-5); }
.mb-6 { margin-bottom: var(--s-6); }

/* --- Typography utilities legacy --- */
.font-semibold { font-weight: var(--fw-semibold); }
.font-bold     { font-weight: var(--fw-bold); }
.text-right    { text-align: right; }
.text-center   { text-align: center; }
.text-left     { text-align: left; }
.text-muted    { color: var(--c-text-muted); }
.text-sm       { font-size: var(--fs-sm); }
.text-xs       { font-size: var(--fs-xs); }

/* --- Headings ad-hoc en algunas vistas que se "pegan" al canónico --- */
.period-title {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tr-tight);
    color: var(--c-text);
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

/* --- Empty states (pantalla vacía) --- */
.empty-state {
    text-align: center;
    padding: var(--s-10) var(--s-5);
    background: var(--c-surface);
    border: 1px dashed var(--c-border-strong);
    border-radius: var(--r-lg);
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
}
.empty-state::before {
    content: '';
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 auto var(--s-3);
    background: var(--c-surface-soft);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-size: 18px;
    background-position: center;
    background-repeat: no-repeat;
}

/* --- Inline forms (sin estructura form-group) --- */
.inline-form {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    flex-wrap: wrap;
}

/* --- Cell de columna numérica en reportes --- */
.col-monto,
.col-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* --- Helper: indicador de fila (icon dot) --- */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-text-muted);
    margin-right: var(--s-2);
    vertical-align: baseline;
}
.status-dot.is-active   { background: var(--c-success); }
.status-dot.is-pending  { background: var(--c-warning); }
.status-dot.is-canceled { background: var(--c-danger); }

/* --- Hint text (info debajo de inputs/labels) --- */
.help-text,
.form-hint {
    display: block;
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    margin-top: 4px;
    line-height: 1.4;
}

/* --- visually-hidden (accesibilidad: texto solo screen readers) --- */
.visually-hidden,
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Layout helpers comunes --- */
.is-hidden, [hidden] { display: none !important; }
.flex-1 { flex: 1; }
.gap-2 { gap: var(--s-2); }
.gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); }

/* ============================================================
   DASHBOARDS EJECUTIVOS (CFO/CEO)
   Vistas: /ejecutivo/resumen, /ejecutivo/cash, /ejecutivo/ccc
   ============================================================ */

/* Section titles dentro de los dashboards */
.ejec-section-title {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tr-wider);
    color: var(--c-text-muted);
    margin-bottom: var(--s-3);
}

/* ----- Alertas ----- */
.ejec-alertas {
    margin-bottom: var(--s-5);
    padding: var(--s-4);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
}
.ejec-alertas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--s-3);
}
.ejec-alerta {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r);
    border: 1px solid var(--c-border);
    background: var(--c-surface-soft);
}
.ejec-alerta-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 6px;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.10);
}
.ejec-alerta-danger { border-left: 3px solid var(--c-danger); }
.ejec-alerta-danger .ejec-alerta-dot { background: var(--c-danger); }
.ejec-alerta-warning { border-left: 3px solid var(--c-warning); }
.ejec-alerta-warning .ejec-alerta-dot { background: var(--c-warning); box-shadow: 0 0 0 4px rgba(217,119,6,0.10); }
.ejec-alerta-info { border-left: 3px solid var(--c-info); }
.ejec-alerta-info .ejec-alerta-dot { background: var(--c-info); box-shadow: 0 0 0 4px rgba(2,132,199,0.10); }
.ejec-alerta strong {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--c-text);
    margin-bottom: 2px;
}
.ejec-alerta p {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--c-text-body);
    line-height: 1.4;
}
.ejec-alertas-ok {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-5);
    background: var(--c-success-bg);
    color: var(--c-success);
    border-radius: var(--r-lg);
    border: 1px solid var(--c-border);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    margin-bottom: var(--s-5);
}

/* ----- Semáforos / dots ----- */
.ejec-dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ejec-dot-g { background: var(--c-success); box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18); }
.ejec-dot-y { background: var(--c-warning); box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.18); }
.ejec-dot-r { background: var(--c-danger);  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18); }
.ejec-dot-n { background: var(--c-text-subtle); }

/* ----- KPI Grid del resumen ejecutivo ----- */
.ejec-kpis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--s-4);
    margin-bottom: var(--s-5);
}
.ejec-kpi {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: var(--s-5);
    box-shadow: var(--sh);
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    transition: transform var(--t), box-shadow var(--t);
    position: relative;
    overflow: hidden;
}
.ejec-kpi:hover {
    transform: translateY(-2px);
    box-shadow: var(--sh-card-hover);
}
.ejec-kpi-featured {
    background: linear-gradient(135deg, var(--c-surface) 0%, var(--primary-100) 100%);
    border-color: var(--primary-600);
}
[data-theme="dark"] .ejec-kpi-featured {
    background: linear-gradient(135deg, var(--c-surface) 0%, var(--primary-100) 100%);
}
.ejec-kpi-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ejec-kpi-value {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: var(--fw-bold);
    letter-spacing: var(--tr-tight);
    color: var(--c-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.ejec-kpi-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--fs-xs);
    flex-wrap: wrap;
}
.ejec-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    background: var(--c-surface-soft);
    color: var(--c-text-body);
    font-size: var(--fs-xxs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tr-wide);
}
.ejec-badge-g { background: var(--c-success-bg); color: var(--c-success); }
.ejec-badge-y { background: var(--c-warning-bg); color: var(--c-warning); }
.ejec-badge-r { background: var(--c-danger-bg);  color: var(--c-danger); }

/* ----- Hero blocks (Cash Position page) ----- */
.ejec-hero-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--s-4);
    margin-bottom: var(--s-5);
}
.ejec-hero {
    padding: var(--s-6);
    border-radius: var(--r-lg);
    border: 1px solid var(--c-border);
    box-shadow: var(--sh);
    background: var(--c-surface);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    position: relative;
    overflow: hidden;
}
.ejec-hero-primary {
    background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
    color: white;
    border-color: var(--primary-700);
}
.ejec-hero-primary .pretitle { color: rgba(255, 255, 255, 0.85); }
.ejec-hero-primary .ejec-hero-sub { color: rgba(255, 255, 255, 0.85); }
.ejec-hero-runway-g { border-left: 4px solid var(--c-success); }
.ejec-hero-runway-y { border-left: 4px solid var(--c-warning); }
.ejec-hero-runway-r { border-left: 4px solid var(--c-danger); }
.ejec-hero-value {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: var(--fw-bold);
    letter-spacing: var(--tr-tight);
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}
.ejec-hero-primary .ejec-hero-value { color: white; }
.ejec-hero-unit {
    font-size: 18px;
    font-weight: var(--fw-medium);
    color: var(--c-text-muted);
    margin-left: 4px;
}
.ejec-hero-sub {
    font-size: var(--fs-sm);
    color: var(--c-text-body);
    margin: 0;
}

/* ----- Ratios Grid ----- */
.ejec-ratios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--s-5);
}
.ejec-ratio {
    padding: var(--s-4);
    border-radius: var(--r);
    background: var(--c-surface-soft);
    border: 1px solid var(--c-border);
}
.ejec-ratio-value {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: var(--fw-bold);
    letter-spacing: var(--tr-tight);
    margin: var(--s-2) 0;
    font-variant-numeric: tabular-nums;
}
.ejec-ratio-help {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    margin: 0;
    line-height: 1.4;
}

/* ----- CCC formula banner ----- */
.ejec-ccc-formula {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: var(--s-2);
    padding: var(--s-6) var(--s-5);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh);
    margin-bottom: var(--s-5);
    flex-wrap: wrap;
}
.ejec-ccc-formula-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    min-width: 120px;
    padding: var(--s-3);
    gap: 4px;
}
.ejec-ccc-final {
    background: var(--primary-100);
    border-radius: var(--r);
}
[data-theme="dark"] .ejec-ccc-final { background: rgba(37,99,235,0.18); }
.ejec-ccc-value {
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: var(--fw-bold);
    letter-spacing: var(--tr-tight);
    line-height: 1;
    color: var(--c-text);
    font-variant-numeric: tabular-nums;
}
.ejec-ccc-final .ejec-ccc-value { color: var(--c-primary-dark); }
.ejec-ccc-unit {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    line-height: 1.3;
}
.ejec-ccc-delta {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    margin-top: 4px;
}
.ejec-ccc-op {
    display: flex;
    align-items: center;
    font-size: 28px;
    font-weight: var(--fw-bold);
    color: var(--c-text-muted);
    padding: 0 var(--s-2);
}

@media (max-width: 900px) {
    .ejec-ccc-formula { flex-direction: column; }
    .ejec-ccc-op { transform: rotate(90deg); padding: var(--s-2); }
}

/* Interpretación de CCC */
.ejec-interpretacion p {
    font-size: var(--fs-body);
    line-height: 1.5;
    margin: 0 0 var(--s-3);
}
.ejec-warning { color: var(--c-warning); }
.ejec-tips {
    list-style: none;
    margin: var(--s-3) 0 0;
    padding: 0;
    font-size: var(--fs-sm);
    color: var(--c-text-body);
}
.ejec-tips li {
    padding: 8px 0 8px 24px;
    border-top: 1px solid var(--c-border);
    position: relative;
}
.ejec-tips li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--c-primary);
    font-weight: var(--fw-bold);
}
.ejec-tips li strong { color: var(--c-text); }

/* ----- Chart wrappers ----- */
.ejec-chart-wrapper {
    position: relative;
    height: 280px;
    margin: var(--s-3) 0;
}
.ejec-chart-meta {
    text-align: center;
    margin-top: var(--s-2);
    font-size: var(--fs-xs);
}

/* ============================================================
   ESTILOS — Dashboards ejecutivos extendidos (forecast/variance/rentab/fiscal)
   ============================================================ */

/* Stress test grid (forecast) */
.ejec-stress-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--s-4);
}
.ejec-stress-item {
    padding: var(--s-4);
    background: var(--c-surface-soft);
    border-radius: var(--r);
    border: 1px solid var(--c-border);
}
.ejec-stress-value {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: var(--fw-bold);
    letter-spacing: var(--tr-tight);
    margin-top: var(--s-2);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

/* Pareto / concentración (rentabilidad) */
.ejec-pareto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--s-4);
    margin-bottom: var(--s-5);
}
.ejec-pareto-stat {
    padding: var(--s-4);
    background: var(--c-surface-soft);
    border-radius: var(--r);
    border: 1px solid var(--c-border);
}
.ejec-pareto-stat .ejec-stat-value,
.ejec-stat-value {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: var(--fw-bold);
    letter-spacing: var(--tr-tight);
    margin: var(--s-2) 0;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.ejec-stat-value small {
    font-size: 16px;
    color: var(--c-text-muted);
    font-weight: var(--fw-regular);
}

.ejec-pareto-bars {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}
.ejec-pareto-bar {
    display: grid;
    grid-template-columns: 180px 1fr 60px;
    align-items: center;
    gap: var(--s-3);
}
.ejec-pareto-bar-track {
    background: var(--c-surface-soft);
    border-radius: var(--r-pill);
    height: 14px;
    overflow: hidden;
    border: 1px solid var(--c-border);
}
.ejec-pareto-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-600), var(--accent-500));
    border-radius: var(--r-pill);
    transition: width var(--t-slow);
}
.ejec-pareto-bar-pct {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

@media (max-width: 600px) {
    .ejec-pareto-bar { grid-template-columns: 1fr 60px; }
    .ejec-pareto-bar .pretitle { grid-column: 1 / -1; }
}

.text-warning { color: var(--c-warning); }

/* ============================================================
   PLAZO SELECTOR — pills + input custom para vencimiento de factura
   Usado en views/facturas-{venta,compra}/create.php
   ============================================================ */
.plazo-selector {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}
.plazo-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.plazo-pill {
    height: 32px;
    padding: 0 14px;
    border: 1px solid var(--c-border-strong);
    background: var(--c-surface);
    color: var(--c-text-body);
    border-radius: var(--r-pill);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    cursor: pointer;
    transition: background var(--t), border-color var(--t), color var(--t), transform var(--t-fast);
    white-space: nowrap;
}
.plazo-pill:hover:not(.is-active) {
    background: var(--c-surface-soft);
    border-color: var(--c-primary);
    color: var(--c-primary-dark);
}
.plazo-pill.is-active {
    background: linear-gradient(180deg, var(--primary-600) 0%, var(--primary-700) 100%);
    color: white;
    border-color: var(--primary-700);
    font-weight: var(--fw-semibold);
    box-shadow: 0 2px 8px -2px rgba(37, 99, 235, 0.45);
}
.plazo-pill:active { transform: translateY(1px); }
.plazo-pill:focus-visible {
    outline: none;
    box-shadow: var(--sh-focus-ring);
}
.plazo-custom {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}
.plazo-custom input {
    width: 100px;
    height: 32px;
    text-align: right;
}