/* ============================================================
     ESTRUCTURA compartida (los 3 temas) — solo color cambia abajo
     ============================================================
     Breakpoints responsivos del shell (únicos en toda la app):
       ≥1280px  layout completo (sidebar 240px)
       900–1279 rail de íconos (~64px); al hover/focus se expande
       <900px   sidebar drawer/overlay (hamburguesa en topbar)
     Grids: auto-fit/minmax o 1 columna en el angosto.
     Tablas anchas: siempre dentro de .table-container { overflow-x:auto }.
     No usar zoom de layout (el --lv-zoom del login es excepción puntual).
     ============================================================ */
  :root {
    --sidebar-w: 240px;
    --sidebar-w-rail: 64px;
    --header-h: 56px;
    --fs-12: 12px;
    --fs-13: 13px;
    --fs-14: 14px;
    --fs-16: 16px;
    --fs-20: 20px;
    --fs-28: 28px;
    --radius: 14px;
    --shadow: 0 1px 2px rgba(16,21,31,.05), 0 10px 24px -14px rgba(16,21,31,.18);
    --shadow-md: 0 4px 14px -6px rgba(16,21,31,.22);
    --white: #FFFFFF;
  }

  /* ============================================================
     TEMAS — solo paleta de color (Classic / Terracota / Nova)
     ============================================================ */

  :root, html.theme-classic {
    /* Classic — gris-beige + azul selección; misma estructura moderna */
    --navy: #D4D0C8;
    --navy-light: #E8E4D8;
    --accent: #316AC5;
    --accent-soft: #E8F4FC;
    --accent-strong: #1E4A8C;
    --accent-ink: #1E4A8C;
    --ink: #333333;
    --ink-faint: #6B7280;
    --sel: #316AC5;
    --green: #16A34A;
    --green-soft: #F0FDF4;
    --red: #9E2A2B;
    --red-soft: #FCE8E8;
    --orange: #D97706;
    --orange-soft: #FFFBEB;
    --grey-50: #F5F2EA;
    --grey-100: #E8E4D8;
    --grey-200: #C8C4B8;
    --grey-300: #D4D0C8;
    --grey-400: #5C574E;
    --grey-500: #808080;
    --grey-600: #4A5568;
    --grey-700: #333333;
    --grey-800: #1A202C;
    --page-bg: #F5F2EA;
    --panel-bg: #FFFFFF;
    --panel-bg-end: #E8E4D8;
    --title-color: #8B1A1A;
    --grid-header: #E8E4D8;
    --grid-border: #C8C4B8;
    --grid-border-light: #E0DCD0;
    --topbar-bg: #FFFFFF;
    --card-border: #C8C4B8;
    --header-grad-start: #FFFFFF;
    --header-grad-end: #E8E4D8;
    --surface: #FFFCF8;
    --surface-sunken: #F5F2EA;
    --login-bg-start: #D4D0C8;
    --login-bg-end: #ECE9D8;
    --theme-accent-glow: rgba(49, 106, 197, 0.28);
    --sidebar-accent: #316AC5;
    --sidebar-text: #000000;
    --sidebar-text-muted: #555555;
    --sidebar-border: #C8C4B8;
    --sidebar-shadow: 2px 0 12px rgba(0,0,0,0.06);
    --nav-hover-bg: #ECE9D8;
    --nav-active-bg: #316AC5;
    --nav-active-color: #FFFFFF;
    --logo-sm-from: #ECE9D8;
    --logo-sm-to: #D4D0C8;
    --kpi-top-accent: rgba(49, 106, 197, 0.45);
  }

  html.theme-terracota {
    --navy: #2A2622;
    --navy-light: #3D372F;
    --accent: #B4573D;
    --accent-soft: #FBEEE8;
    --accent-strong: #8B4A36;
    --accent-ink: #8B4A36;
    --ink: #2A2622;
    --ink-faint: #6B7280;
    --sel: #B4573D;
    --green: #3D7A5A;
    --green-soft: #E8F5EE;
    --red: #A63D3D;
    --red-soft: #FCEAEA;
    --orange: #C97A1E;
    --orange-soft: #FBEEDC;
    --grey-50: #F6F2EA;
    --grey-100: #F0E8DC;
    --grey-200: #E9E1D3;
    --grey-300: #DCCFBF;
    --grey-400: #6B5344;
    --grey-500: #8A7A6A;
    --grey-600: #5C5048;
    --grey-700: #3D3630;
    --grey-800: #2A2622;
    --page-bg: #F6F2EA;
    --panel-bg: #FFFFFF;
    --panel-bg-end: #F3E8DF;
    --title-color: #8B4A36;
    --grid-header: #F3E8DF;
    --grid-border: #E9E1D3;
    --grid-border-light: #F0E8DC;
    --topbar-bg: #FFFCF8;
    --card-border: #E9E1D3;
    --header-grad-start: #FFFFFF;
    --header-grad-end: #F3E8DF;
    --surface: #FFFCF8;
    --surface-sunken: #F1EBE3;
    --login-bg-start: #221F1B;
    --login-bg-end: #4A3226;
    --theme-accent-glow: rgba(180, 87, 61, 0.22);
    --sidebar-accent: #C97B5D;
    --sidebar-text: #FFFFFF;
    --sidebar-text-muted: rgba(255,255,255,0.92);
    --sidebar-border: #3D372F;
    --sidebar-shadow: 2px 0 20px rgba(0,0,0,0.12);
    --nav-hover-bg: rgba(255,255,255,0.08);
    --nav-active-bg: #B4573D;
    --nav-active-color: #FFFFFF;
    --logo-sm-from: #C97B5D;
    --logo-sm-to: #B4573D;
    --kpi-top-accent: rgba(180, 87, 61, 0.45);
  }

  html.theme-nova {
    --navy: #18212F;
    --navy-light: #0F1620;
    --accent: #2F6FED;
    --accent-soft: #E8EFFD;
    --accent-strong: #1D4ED8;
    --accent-ink: #1D4ED8;
    --ink: #10151F;
    --ink-faint: #6B7280;
    --sel: #2F6FED;
    --green: #17A673;
    --green-soft: #E3F6EE;
    --red: #D5433B;
    --red-soft: #FCEAE8;
    --orange: #C97A1E;
    --orange-soft: #FBEEDC;
    --grey-50: #F3F5F9;
    --grey-100: #EAEEF4;
    --grey-200: #E1E6ED;
    --grey-300: #D0D5DD;
    --grey-400: #5C6B80;
    --grey-500: #8992A3;
    --grey-600: #5B6577;
    --grey-700: #3A4556;
    --grey-800: #10151F;
    --page-bg: #F3F5F9;
    --panel-bg: #FFFFFF;
    --panel-bg-end: #EAEEF4;
    --title-color: #2F6FED;
    --grid-header: #F3F5F9;
    --grid-border: #E1E6ED;
    --grid-border-light: #ECEFF4;
    --topbar-bg: #FFFFFF;
    --card-border: #E1E6ED;
    --header-grad-start: #FFFFFF;
    --header-grad-end: #EAEEF4;
    --surface: #FFFFFF;
    --surface-sunken: #F3F5F9;
    --login-bg-start: #0F1620;
    --login-bg-end: #1E3A6E;
    --theme-accent-glow: rgba(47, 111, 237, 0.22);
    --sidebar-accent: #2F6FED;
    --sidebar-text: #FFFFFF;
    --sidebar-text-muted: rgba(255,255,255,0.92);
    --sidebar-border: #243044;
    --sidebar-shadow: 2px 0 20px rgba(0,0,0,0.18);
    --nav-hover-bg: rgba(255,255,255,0.08);
    --nav-active-bg: #2F6FED;
    --nav-active-color: #FFFFFF;
    --logo-sm-from: #2F6FED;
    --logo-sm-to: #1D4ED8;
    --kpi-top-accent: rgba(47, 111, 237, 0.45);
  }

  /* --- Shell / tipografía / componentes compartidos (estructura) --- */
  body {
    background: var(--page-bg);
    color: var(--grey-800);
    font-family: "Public Sans", "Segoe UI", Arial, sans-serif;
  }
  h1, h2, h3,
  .card-header h3, .dash-title, .sb-brand, .logo-text,
  .topbar-title, .modal-header h3, .login-logo h1 {
    font-family: "Manrope", "Public Sans", sans-serif;
  }

  .sidebar {
    background: linear-gradient(180deg, var(--navy-light) 0%, var(--navy) 100%);
    box-shadow: var(--sidebar-shadow);
    border-right: 1px solid var(--sidebar-border);
    color: var(--sidebar-text);
  }
  .sidebar-top, .sidebar-footer, .sidebar-scroll, .sidebar-header {
    background: transparent;
    box-shadow: none;
  }
  .sidebar-footer { border-top-color: var(--sidebar-border); }
  .sidebar-header { color: var(--sidebar-text); border-bottom-color: var(--sidebar-border); }
  .sidebar-header .logo-text { color: var(--sidebar-text); }
  .sidebar-header .logo-sub { color: var(--sidebar-text-muted); }
  .sidebar-header .logo-sm {
    background: linear-gradient(135deg, var(--logo-sm-from), var(--logo-sm-to));
    border: 1px solid var(--card-border);
    color: var(--nav-active-color);
    border-radius: 9px;
  }
  .empresa-selector, .periodo-selector {
    background: transparent; border-bottom-color: var(--sidebar-border);
  }
  .empresa-selector label, .periodo-selector label, .periodo-anio-label,
  .nav-section-title, .nav-subtitle, .nav-group-header {
    color: var(--sidebar-text-muted);
  }
  .empresa-selector select, .periodo-mes-anio select, .periodo-anio-btn {
    background: color-mix(in srgb, var(--sidebar-text) 12%, transparent);
    color: var(--sidebar-text);
    border-color: var(--sidebar-border);
  }
  .empresa-selector select option, .periodo-mes-anio select option {
    background: var(--navy); color: var(--sidebar-text);
  }
  .nav-item {
    margin-right: 8px; border-radius: 9px; color: var(--sidebar-text-muted);
  }
  .nav-item:hover { background: var(--nav-hover-bg); color: var(--sidebar-text); }
  .nav-item.active {
    background: var(--nav-active-bg); color: var(--nav-active-color); font-weight: 600; box-shadow: none;
  }
  .nav-group:not(.collapsed) > .nav-group-header {
    background: color-mix(in srgb, var(--navy) 92%, white 8%);
  }
  .nav-group.active-section > .nav-group-header {
    background: color-mix(in srgb, var(--navy) 82%, white 18%);
    box-shadow: inset -3px 0 0 var(--sidebar-accent);
    color: var(--sidebar-text);
  }
  .user-name { color: var(--sidebar-text); }
  .user-role { color: var(--sidebar-text-muted); }
  .user-avatar {
    background: color-mix(in srgb, var(--sidebar-text) 15%, transparent);
    border-color: var(--sidebar-border);
    color: var(--sidebar-text);
    border-radius: 9px;
  }
  .btn-logout, .btn-theme-sidebar {
    background: color-mix(in srgb, var(--sidebar-text) 10%, transparent);
    color: var(--sidebar-text);
    border: 1px solid var(--sidebar-border);
    border-radius: 9px;
  }
  .btn-logout:hover, .btn-theme-sidebar:hover {
    background: color-mix(in srgb, var(--sidebar-text) 18%, transparent);
  }

  .topbar {
    background: var(--topbar-bg);
    border-bottom: 1px solid var(--card-border);
  }
  .topbar-title { color: var(--title-color); }
  .topbar-bcch-lbl { color: var(--accent); }

  .card, .kpi-card, .modal, .rep-panel-card, .dash-filters, .login-card, .rep-hub-der {
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border-color: var(--card-border);
  }
  .card, .modal { background: var(--panel-bg); }
  .card-header, .modal-header {
    background: linear-gradient(180deg, var(--header-grad-start) 0%, var(--header-grad-end) 100%);
    border-bottom-color: var(--card-border);
    border-radius: var(--radius) var(--radius) 0 0;
  }
  .card-body, .modal-body { background: var(--panel-bg); }
  .kpi-card { border-top: 3px solid var(--kpi-top-accent); }
  .kpi-value { color: var(--ink); }
  .rep-panel-card-header, .rep-main-header, .rep-form-footer, .rep-form-section h4, .dash-filters {
    background: linear-gradient(180deg, var(--header-grad-start) 0%, var(--header-grad-end) 100%);
    border-color: var(--card-border);
  }
  .rep-panel-card-header h3 { color: var(--ink); }
  .rep-main-header h3, .rep-form-section h4 { color: var(--title-color); }
  .rep-hub-der { background: var(--panel-bg); }
  .rep-hub-placeholder {
    border-radius: var(--radius);
    background: var(--surface-sunken);
    border-color: var(--card-border);
    color: var(--grey-600);
  }
  .rep-main-volver {
    background: var(--accent-soft); color: var(--accent); border: 1px solid var(--card-border);
    border-radius: var(--radius);
  }
  .rep-panel-item:hover { background: var(--accent-soft); color: var(--ink); }
  .rep-panel-item.active {
    background: var(--accent-soft); color: var(--accent-ink); border-left-color: var(--accent);
  }

  .btn, .btn-navy, .btn-primary, .btn-ghost, .btn-sm { border-radius: var(--radius); }
  .btn-navy, .card-header .btn-navy {
    background: var(--accent); color: #fff; border: 1px solid var(--accent-strong);
  }
  .btn-navy:hover, .card-header .btn-navy:hover { background: var(--accent-strong); color: #fff; }
  .btn-primary {
    background: var(--accent); color: #fff; border: none;
    box-shadow: 0 1px 2px rgba(16, 21, 31, 0.12);
  }
  .btn-primary:hover { background: var(--accent-strong); }
  .btn-ghost:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }

  #login-screen {
    background: linear-gradient(145deg, var(--login-bg-start) 0%, var(--login-bg-end) 100%);
  }
  .login-card { background: #FFFFFF; color: var(--grey-800); border: 1px solid var(--card-border); }
  .login-logo h1 { color: var(--title-color); }
  .login-logo .logo-icon {
    background: linear-gradient(135deg, var(--logo-sm-from), var(--navy));
    border: 1px solid var(--card-border); color: var(--nav-active-color);
    border-radius: 12px;
  }
  .theme-card.selected { border-color: var(--accent); }
  input:focus, select:focus, textarea:focus {
    border-color: var(--accent); box-shadow: 0 0 0 3px var(--theme-accent-glow);
  }
  .cfg-tab.active {
    color: var(--accent); border-bottom-color: var(--accent); background: var(--accent-soft);
  }
  .dash-insight-text .val-navy { color: var(--accent); }

  th { color: var(--grey-600); border-color: var(--grid-border); }
  td { color: var(--ink); border-color: var(--grid-border-light); }
  .page-lista-scroll .lista-scroll-card .table-container thead th {
    background: var(--grid-header); background-color: var(--grid-header);
    color: var(--grey-600); border-color: var(--grid-border);
  }
  .page-lista-scroll .lista-scroll-head,
  .page-lista-scroll .ficha-terceros-sticky-head,
  .page-lista-scroll .plan-cuentas-sticky-head { background: var(--grid-header); }
  .page-lista-scroll .lista-scroll-head .card-header,
  .page-lista-scroll .ficha-terceros-sticky-head .card-header,
  .page-lista-scroll .plan-cuentas-sticky-head .card-header {
    background: linear-gradient(180deg, var(--header-grad-start) 0%, var(--grid-header) 100%);
  }

  #tabla-presupuestos tr.presup-cuenta-subtotal td,
  #tabla-presupuesto-mensual tr.presup-cuenta-subtotal td,
  #tabla-informe-presupuesto tr.presup-cuenta-subtotal td,
  #tabla-presupuesto-anual-cuentas tr.panual-cuenta-subtotal td {
    background: var(--accent-soft) !important;
  }
  #tabla-presupuestos tr.presup-otros td,
  #tabla-presupuesto-mensual tr.presup-otros td,
  #tabla-informe-presupuesto tr.presup-otros td,
  #tabla-presupuesto-anual-cuentas tr.panual-otros td {
    background: var(--grey-50); color: var(--grey-600);
  }

  /* Selector de tema visual */
  .theme-picker-section { max-width: 920px; width: 100%; margin: 0 auto; padding: 0 16px 32px; }
  .theme-picker-title { text-align: center; font-size: 22px; font-weight: 700; color: white; margin-bottom: 6px; }
  .theme-picker-sub { text-align: center; font-size: 13px; color: rgba(255,255,255,0.75); margin-bottom: 20px; }
  .theme-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
  @media (max-width: 700px) { .theme-grid { grid-template-columns: 1fr; } }
  .theme-card {
    background: var(--white); border: 2px solid var(--grey-200); border-radius: 12px;
    padding: 0; overflow: hidden; cursor: pointer; text-align: left;
    transition: transform .15s, box-shadow .15s, border-color .15s;
    box-shadow: var(--shadow-md);
  }
  .theme-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
  .theme-card.selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--theme-accent-glow); }
  .theme-card-preview {
    height: 72px; display: flex; gap: 6px; padding: 8px; background: var(--grey-100);
  }
  .theme-card-preview .tp-side {
    width: 28%; border-radius: 4px; flex-shrink: 0;
  }
  .theme-card-preview .tp-main { flex: 1; display: flex; flex-direction: column; gap: 4px; }
  .theme-card-preview .tp-bar { height: 10px; border-radius: 3px; opacity: 0.9; }
  .theme-card-preview .tp-chart { flex: 1; border-radius: 4px; opacity: 0.85; }
  .theme-card-body { padding: 14px 16px 16px; }
  .theme-card-name { font-size: 15px; font-weight: 700; color: var(--grey-800); margin-bottom: 2px; }
  .theme-card-tagline { font-size: 12px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 6px; }
  .theme-card-desc { font-size: 12px; color: var(--grey-600); line-height: 1.45; margin-bottom: 10px; }
  .theme-card-btn {
    display: inline-block; font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 6px;
    background: var(--grey-100); color: var(--grey-600); border: 1px solid var(--grey-200);
  }
  .theme-card.selected .theme-card-btn { background: var(--accent); color: white; border-color: var(--accent); }
  .theme-card.selected .theme-card-btn::before { content: '✓ '; }
  .login-wrap { width: 100%; max-width: 960px; padding: 24px 16px 16px; display: flex; flex-direction: column; align-items: center; }
  #login-screen {
    min-height: 100vh; display: flex; align-items: flex-start; justify-content: center;
    background: linear-gradient(135deg, var(--login-bg-start) 0%, var(--login-bg-end) 100%);
    overflow-y: auto; padding: 24px 0;
  }
  .login-theme-toggle {
    display: block; width: 100%; margin-top: 12px; padding: 8px;
    background: transparent; border: 1px dashed var(--grey-200); border-radius: var(--radius);
    color: var(--grey-600); font-size: 12px; cursor: pointer;
  }
  html.theme-terracota .login-theme-toggle { border-color: rgba(201, 123, 93, 0.45); color: rgba(246, 242, 234, 0.8); }
  .btn-theme-sidebar {
    margin-top: 8px; width: 100%; padding: 6px;
    background: color-mix(in srgb, var(--sidebar-text) 10%, transparent);
    color: var(--sidebar-text); border: 1px solid var(--sidebar-border);
    border-radius: var(--radius); cursor: pointer; font-size: 12px;
  }
  .btn-theme-sidebar:hover { background: var(--nav-hover-bg); }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: "Public Sans", "Segoe UI", Arial, sans-serif; background: var(--page-bg, var(--grey-50)); color: var(--grey-800); font-size: 14px; line-height: 1.5; }
  code { font-family: inherit; }

  /* LOGIN */
  #login-screen-inner { width: 100%; display: flex; flex-direction: column; align-items: center; }
  .login-card {
    background: var(--white); border-radius: 16px; padding: 48px 40px;
    width: 380px; box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  }
  .login-logo { text-align: center; margin-bottom: 32px; }
  .login-logo .logo-icon {
    width: 56px; height: 56px; background: linear-gradient(135deg, var(--logo-sm-from), var(--navy)); border: 1px solid var(--card-border); border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 24px; margin-bottom: 12px; color: var(--nav-active-color);
  }
  .login-logo h1 { font-size: 20px; font-weight: 700; color: var(--title-color, #8B1A1A); }
  .login-logo p { color: var(--grey-600); font-size: 13px; }
  .form-group { margin-bottom: 16px; }
  .form-group label { display: block; font-size: 13px; font-weight: 500; color: var(--grey-600); margin-bottom: 6px; }
  .form-group input {
    width: 100%; padding: 10px 14px; border: 1px solid var(--card-border);
    border-radius: var(--radius); font-size: 14px; transition: border-color .2s;
    outline: none; background: #fff;
  }
  .form-group input:focus { border-color: var(--accent); background: var(--white); }
  .login-password-wrap { position: relative; }
  .login-password-wrap #login-pass { padding-right: 48px; }
  .login-password-toggle {
    position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: var(--radius); background: transparent; color: var(--grey-600);
    cursor: pointer; font-size: 18px; line-height: 1; touch-action: manipulation;
  }
  .login-password-toggle:hover,
  .login-password-toggle.is-visible { background: var(--grey-100); color: var(--accent); }
  .login-password-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  .server-config { margin-bottom: 20px; }
  .server-config label { font-size: 12px; color: var(--grey-400); display: block; margin-bottom: 4px; }
  .server-config input { font-size: 12px; padding: 7px 10px; }
  .btn-primary {
    width: 100%; padding: 12px; background: var(--accent); color: #fff;
    border: none;
    border-radius: var(--radius); font-size: 15px; font-weight: 600;
    cursor: pointer; transition: background .15s;
  }
  .btn-primary:hover { background: var(--accent-strong); }
  .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
  .login-error { background: var(--red-soft); color: var(--red); padding: 12px 14px; border-radius: var(--radius); font-size: 13px; margin: 12px 0; display: none; border: 2px solid var(--red); font-weight: 600; text-align: center; }
  .login-error.is-success { background: #ecfdf3; color: #166534; border-color: #22c55e; }
  .login-recovery-link {
    display: block; width: 100%; margin: 8px 0 10px; padding: 4px;
    border: 0; background: transparent; color: var(--accent); cursor: pointer;
    font: inherit; font-size: 13px; text-align: center; text-decoration: underline;
  }
  .login-recovery-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .login-recovery-panel h2 { margin: 0 0 6px; color: var(--navy); font-size: 18px; text-align: center; }
  .login-recovery-panel > p { margin: 0 0 16px; color: var(--grey-600); font-size: 13px; line-height: 1.45; text-align: center; }
  .login-recovery-message { min-height: 20px; margin: 8px 0 12px; color: var(--grey-700); font-size: 13px; line-height: 1.4; text-align: center; }

  /* Panel visual del login — módulos orbitando alrededor de la tarjeta.
     Solo Nova y Terracota; Clásico (retro) se deja tal cual. */
  .login-orbit-stage { position: relative; display: flex; align-items: center; justify-content: center; }
  .login-orbit-stage .login-card { position: relative; z-index: 2; }
  .lv-glow, .lv-ring { display: none; }

  html.theme-nova .login-orbit-stage,
  html.theme-terracota .login-orbit-stage {
    width: 940px; height: 940px; max-width: 96vw; max-height: 92vh; margin: 0 auto;
    /* Se achica completo (anillo + tarjeta juntos, misma proporción) según el
       alto/ancho de pantalla disponible, para no generar scroll de página.
       --lv-zoom lo calcula el script del login según el viewport. */
    zoom: var(--lv-zoom, 1);
  }
  html.theme-nova .lv-glow,
  html.theme-terracota .lv-glow {
    display: block; position: absolute; top: 50%; left: 50%;
    width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%;
    background: radial-gradient(circle, var(--theme-accent-glow) 0%, transparent 70%);
    filter: blur(10px); z-index: 0;
    animation: lvBreathe 9s ease-in-out infinite;
  }
  html.theme-nova .lv-ring,
  html.theme-terracota .lv-ring {
    display: block; position: absolute; inset: 0; z-index: 1;
    animation: lvOrbitSpin 60s linear infinite;
  }
  @keyframes lvBreathe {
    0%, 100% { transform: scale(1); opacity: .55; }
    50% { transform: scale(1.1); opacity: .85; }
  }
  @keyframes lvOrbitSpin { to { transform: rotate(360deg); } }
  /* Contrarresta tanto el ángulo fijo del propio chip (--ang) como el giro
     del anillo, para que el ícono se mantenga siempre "de pie". */
  @keyframes lvOrbitCounter {
    from { transform: rotate(calc(-1 * var(--ang))); }
    to   { transform: rotate(calc(-1 * var(--ang) - 360deg)); }
  }
  .lv-chip-pos {
    position: absolute; top: 50%; left: 50%; width: 0; height: 0;
    transform: rotate(var(--ang));
  }
  .lv-chip {
    position: absolute; top: 0; left: 410px; width: 62px; height: 62px; margin: -31px 0 0 -31px;
    border-radius: 16px; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.18);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 22px rgba(0,0,0,0.28);
    animation: lvOrbitCounter 60s linear infinite;
    cursor: default;
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
  }
  .lv-chip:hover {
    background: rgba(255,255,255,0.20); border-color: rgba(255,255,255,0.38);
    box-shadow: 0 10px 28px rgba(0,0,0,0.34);
  }
  /* El ícono "infla" al pasar el mouse — en un elemento aparte, para no
     pelear con la animación de rotación que ya usa transform. */
  .lv-chip-inner {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
  }
  .lv-chip:hover .lv-chip-inner { transform: scale(1.4); }
  .lv-chip svg { width: 28px; height: 28px; stroke: #fff; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

  /* Globo con la frase de cada ícono — sale del propio ícono, no de un
     texto compartido abajo de la tarjeta. */
  .lv-tip {
    position: absolute; left: 50%; bottom: 100%; margin-bottom: 12px;
    transform: translateX(-50%) translateY(6px) scale(.82);
    transform-origin: bottom center;
    max-width: 150px; width: max-content;
    background: rgba(12,14,20,0.94); color: #fff; font-size: 12px; font-weight: 600;
    line-height: 1.35; text-align: center; white-space: normal;
    padding: 7px 11px; border-radius: 9px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.4);
    opacity: 0; pointer-events: none; z-index: 6;
    transition: opacity .22s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1);
  }
  .lv-tip::after {
    content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: rgba(12,14,20,0.94);
  }
  .lv-chip:hover .lv-tip { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }

  /* Mientras el selector de tema está abierto, el anillo estorba: se oculta y el
     stage se compacta, para que la grilla de temas tenga espacio. */
  html.theme-nova .login-orbit-stage.lv-compact,
  html.theme-terracota .login-orbit-stage.lv-compact {
    width: auto; height: auto; max-width: none;
  }
  .lv-compact .lv-glow, .lv-compact .lv-ring { display: none !important; }

  @media (max-width: 900px) {
    html.theme-nova .login-orbit-stage, html.theme-terracota .login-orbit-stage {
      width: auto; height: auto; max-width: none;
    }
    html.theme-nova .lv-glow, html.theme-terracota .lv-glow,
    html.theme-nova .lv-ring, html.theme-terracota .lv-ring { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .lv-glow, .lv-ring, .lv-chip { animation: none !important; }
    .lv-chip-inner, .lv-tip { transition: none !important; }
  }

  /* APP SHELL */
  #app { display: none; height: 100vh; overflow: hidden; }

  /* SIDEBAR — layout shell (colores vía tokens de tema) */
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar-w);
    background: linear-gradient(180deg, var(--navy-light) 0%, var(--navy) 100%); color: var(--sidebar-text);
    display: flex; flex-direction: column;
    z-index: 100; overflow: hidden;
    border-right: 1px solid var(--sidebar-border);
    box-shadow: var(--sidebar-shadow);
    transition: width .18s ease, transform .2s ease;
  }
  .sidebar-top {
    flex-shrink: 0;
    background: transparent;
    z-index: 2;
    box-shadow: none;
    border-bottom: 1px solid var(--sidebar-border);
  }
  .sidebar-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background: transparent;
    /* Espacio al final para que el último grupo (Herramientas) no quede pegado al footer */
    padding-bottom: 28px;
  }
  .sidebar-header {
    padding: 12px 14px; border-bottom: 1px solid var(--sidebar-border);
    display: flex; align-items: center; gap: 10px; min-height: var(--header-h);
    background: transparent; color: var(--sidebar-text);
  }
  .sidebar-header .logo-sm {
    width: 28px; height: 28px; background: linear-gradient(135deg, var(--logo-sm-from), var(--logo-sm-to)); border: 1px solid var(--card-border); border-radius: 9px;
    display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0;
    color: var(--nav-active-color);
  }
  .sidebar-header .logo-text { font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--sidebar-text); }
  .sidebar-header .logo-sub { font-size: 12px; color: var(--sidebar-text-muted); opacity: 1; }

  .empresa-selector {
    padding: 10px 12px; border-bottom: 1px solid var(--sidebar-border); background: transparent;
  }
  .empresa-selector label { font-size: 12px; color: var(--sidebar-text-muted); text-transform: uppercase; letter-spacing: .5px; display: block; margin-bottom: 4px; opacity: 1; }
  .empresa-selector select {
    width: 100%; background: color-mix(in srgb, var(--sidebar-text) 12%, transparent); color: var(--sidebar-text); border: 1px solid var(--sidebar-border);
    border-radius: var(--radius); padding: 5px 6px; font-size: 12px; cursor: pointer; outline: none;
  }
  .empresa-selector select option { background: var(--navy); color: var(--sidebar-text); }

  .periodo-selector {
    padding: 10px 12px; border-bottom: 1px solid var(--sidebar-border); background: transparent;
  }
  .periodo-selector label { font-size: 12px; color: var(--sidebar-text-muted); text-transform: uppercase; letter-spacing: .5px; display: block; margin-bottom: 4px; opacity: 1; }
  .periodo-mes-anio { display: flex; align-items: center; gap: 6px; }
  .periodo-mes-anio select {
    flex: 1; width: 100%;
    background: color-mix(in srgb, var(--sidebar-text) 12%, transparent); color: var(--sidebar-text);
    border: 1px solid var(--sidebar-border);
    border-radius: var(--radius); padding: 5px 6px; font-size: 12px; font-weight: 600; letter-spacing: .3px;
    cursor: pointer; outline: none; text-align: center; text-align-last: center;
  }
  .periodo-mes-anio select:focus { border-color: var(--accent); background: color-mix(in srgb, var(--sidebar-text) 16%, transparent); }
  .periodo-mes-anio select option { background: var(--navy); color: var(--sidebar-text); }
  .periodo-anio-btn {
    flex: 0 0 auto; width: 22px; height: 26px;
    background: color-mix(in srgb, var(--sidebar-text) 12%, transparent); color: var(--sidebar-text);
    border: 1px solid var(--sidebar-border); border-radius: var(--radius); cursor: pointer; font-size: 14px;
    line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0;
  }
  .periodo-anio-btn:hover { background: var(--nav-hover-bg); }
  .periodo-anio-label { text-align: center; font-size: 12px; color: var(--sidebar-text-muted); margin-top: 4px; letter-spacing: .5px; opacity: 1; }

  .nav-section { padding: 10px 0; }
  .nav-section-title { font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--sidebar-text-muted); padding: 0 16px 6px; opacity: 1; }
  .nav-group { padding: 2px 0; }
  .nav-group-header {
    display: flex; justify-content: space-between; align-items: center; cursor: pointer;
    font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--sidebar-text-muted);
    padding: 8px 14px 6px; user-select: none; transition: background .12s, color .12s;
    opacity: 1; border-radius: var(--radius);
  }
  .nav-group-header:hover { background: var(--nav-hover-bg); color: var(--sidebar-text); }
  .nav-group.active-section > .nav-group-header {
    opacity: 1;
    color: var(--sidebar-text);
    font-weight: 700;
    background: color-mix(in srgb, var(--navy) 82%, white 18%);
    box-shadow: inset -3px 0 0 var(--sidebar-accent);
    border-left: none;
    cursor: pointer;
  }
  /* Sticky del grupo abierto (acordeón): al explorar Contabilidad u otro menú
     el título queda fijo al hacer scroll, aunque la página activa sea otra. */
  .nav-group:not(.collapsed) > .nav-group-header {
    position: sticky;
    top: 0;
    z-index: 3;
    background: color-mix(in srgb, var(--navy) 92%, white 8%);
  }
  .nav-group.active-section:not(.collapsed) > .nav-group-header {
    background: color-mix(in srgb, var(--navy) 82%, white 18%);
    z-index: 4;
  }
  .nav-group.active-section > .nav-group-header .nav-chevron { opacity: 1; color: var(--sidebar-text); }
  .nav-chevron { font-size: 10px; transition: transform .2s ease; color: var(--sidebar-text-muted); }
  .nav-group.collapsed .nav-chevron { transform: rotate(-90deg); }
  .nav-group.collapsed > .nav-group-body { display: none; }
  .nav-group-body { padding-bottom: 4px; }
  /* Submenú: mismo bloque, un poco más adentro. El padre abierto no esconde
     al hijo; el hijo cerrado esconde solo su cuerpo (selector directo). */
  .nav-group .nav-subgroup > .nav-group-header {
    padding: 6px 14px 4px 26px;
    font-size: 12px;
    letter-spacing: .5px;
  }
  .nav-group .nav-subgroup .nav-item { padding-left: 34px; }
  .nav-group .nav-subgroup:not(.collapsed) > .nav-group-header {
    top: 34px;
    z-index: 2;
  }
  .nav-subtitle { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--sidebar-text-muted); padding: 8px 16px 3px; opacity: 1; }
  .nav-item {
    display: flex; align-items: center; gap: 10px; padding: 7px 14px 7px 18px;
    cursor: pointer; transition: background .1s; font-size: 13px; border-radius: 9px;
    color: var(--sidebar-text-muted);
    min-height: 36px; line-height: 1.25; white-space: normal;
  }
  .nav-item:hover { background: var(--nav-hover-bg); color: var(--sidebar-text); }
  .nav-item.active {
    background: var(--nav-active-bg); color: var(--nav-active-color); font-weight: 600;
  }
  .nav-item .nav-icon { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }

  th.sortable {
    cursor: pointer; user-select: none; white-space: nowrap;
  }
  th.sortable:hover { color: var(--ink, #333); }
  th.sortable .sort-ind {
    display: inline-block; margin-left: 4px; font-size: 10px; opacity: 0.35;
  }
  th.sortable.sort-active .sort-ind { opacity: 1; }

  .sidebar-footer {
    flex-shrink: 0; padding: 10px 12px; border-top: 1px solid var(--sidebar-border);
    background: transparent; color: var(--sidebar-text);
  }
  .user-info { display: flex; align-items: center; gap: 10px; }
  .user-avatar {
    width: 28px; height: 28px;
    background: color-mix(in srgb, var(--sidebar-text) 15%, transparent);
    border: 1px solid var(--sidebar-border); border-radius: 9px;
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; flex-shrink: 0;
    color: var(--sidebar-text);
  }
  .user-name { font-size: 12px; font-weight: 600; color: var(--sidebar-text); }
  .user-role { font-size: 12px; color: var(--sidebar-text-muted); opacity: 1; }
  .btn-logout {
    margin-top: 8px; width: 100%; padding: 6px;
    background: color-mix(in srgb, var(--sidebar-text) 10%, transparent); color: var(--sidebar-text);
    border: 1px solid var(--sidebar-border);
    border-radius: var(--radius); cursor: pointer; font-size: 12px;
  }
  .btn-logout:hover { background: var(--nav-hover-bg); }

  /* Asistente de voz (micrófono flotante) */
  #asistente-voz-root {
    position: fixed; right: 0; bottom: 0; z-index: 9200;
    /* Solo el FAB/panel reciben clics: no bloquear el resto de la UI. */
    width: 0; height: 0; overflow: visible; pointer-events: none;
  }
  #asistente-voz-fab {
    position: fixed; right: 22px; bottom: 22px; z-index: 9201;
    width: 54px; height: 54px; border-radius: 50%;
    border: 1px solid #808080; background: #1F3864; color: #fff;
    font-size: 22px; cursor: grab; box-shadow: 0 4px 14px rgba(0,0,0,.25);
    display: none; align-items: center; justify-content: center;
    pointer-events: auto;
    touch-action: none; user-select: none; -webkit-user-select: none;
  }
  #asistente-voz-fab.arrastrando { cursor: grabbing; }
  #asistente-voz-fab:hover { background: #2a4a7a; }
  #asistente-voz-fab.escuchando { background: #B91C1C; animation: asistente-pulse 1.2s infinite; }
  @keyframes asistente-pulse {
    0% { box-shadow: 0 0 0 0 rgba(185,28,28,.45); }
    70% { box-shadow: 0 0 0 14px rgba(185,28,28,0); }
    100% { box-shadow: 0 0 0 0 rgba(185,28,28,0); }
  }
  #asistente-voz-panel {
    position: fixed; right: 22px; bottom: 88px; z-index: 9201;
    width: min(380px, calc(100vw - 32px));
    height: min(480px, calc(100vh - 120px));
    max-height: min(480px, calc(100vh - 120px));
    display: none; flex-direction: column;
    background: #fff; border: 1px solid #808080; border-radius: 8px;
    box-shadow: 0 8px 28px rgba(0,0,0,.28);
    overflow: hidden;
    pointer-events: auto;
  }
  #asistente-voz-panel.open { display: flex; }
  #asistente-voz-panel .asistente-head {
    display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0;
    padding: 10px 12px; background: #1F3864; color: #fff; font-size: 13px; font-weight: 600;
  }
  #asistente-voz-panel .asistente-head button {
    background: transparent; border: 0; color: #fff; cursor: pointer; font-size: 16px;
  }
  #asistente-voz-chat {
    flex: 1 1 auto;
    min-height: 0; /* necesario para que overflow-y funcione dentro de flex */
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding: 12px; font-size: 13px; line-height: 1.45;
    background: #f7f7f5;
  }
  .asistente-msg {
    margin-bottom: 10px; padding: 8px 10px; border-radius: 6px; max-width: 100%;
    overflow-wrap: anywhere; word-break: break-word; white-space: pre-wrap;
  }
  .asistente-msg.user { background: #e8eef8; margin-left: auto; max-width: 92%; }
  .asistente-msg.bot { background: #fff; border: 1px solid #ddd; }
  .asistente-msg.warn { background: #FFF7ED; border: 1px solid #FDBA74; color: #9A3412; font-size: 12px; }
  .asistente-msg.status { background: #EEF2FF; border: 1px solid #A5B4FC; color: #3730A3; font-size: 12px; }
  #asistente-voz-panel .asistente-foot {
    display: flex; gap: 6px; padding: 10px; border-top: 1px solid #ddd; background: #fff;
    flex-shrink: 0;
  }
  #asistente-voz-input {
    flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid #808080; border-radius: 4px; font-size: 13px;
  }
  #asistente-voz-panel .asistente-foot .btn { padding: 8px 10px; font-size: 12px; white-space: nowrap; }



  /* MAIN CONTENT */
  .main { margin-left: var(--sidebar-w); display: flex; flex-direction: column; height: 100vh; min-width: 0; width: 0; flex: 1 1 auto; overflow: hidden; transition: margin-left .2s ease; }
  .topbar {
    height: var(--header-h);
    background: var(--topbar-bg);
    border-bottom: 1px solid var(--grid-border, #808080);
    display: flex; align-items: center; justify-content: space-between; padding: 0 16px 0 24px;
    box-shadow: none; flex-shrink: 0; gap: 12px;
  }
  .topbar-nav-toggle {
    display: none; align-items: center; justify-content: center;
    width: 36px; height: 36px; flex-shrink: 0; margin-right: 4px;
    border: 1px solid var(--grid-border, #C8C4B8); border-radius: var(--radius);
    background: var(--panel-bg, #fff); color: var(--ink, #333);
    cursor: pointer; font-size: 18px; line-height: 1; padding: 0;
  }
  .topbar-nav-toggle:hover { background: var(--grey-100, #E8E4D8); }
  .sidebar-backdrop {
    display: none; position: fixed; inset: 0; z-index: 90;
    background: rgba(16, 21, 31, 0.45);
  }
  .topbar-title { font-size: 16px; font-weight: 700; color: var(--title-color, #8B1A1A); flex-shrink: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-bcch-aviso {
    flex-shrink: 0; margin: 0 0 0 auto; padding: 3px 10px;
    font-size: 12px; font-weight: 800; letter-spacing: 0.01em;
    color: #7F1D1D;
    background: linear-gradient(180deg, #FDE68A 0%, #FBBF24 55%, #F59E0B 100%);
    border: 1px solid #D97706;
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.45), 0 0 10px rgba(245, 158, 11, 0.55);
    cursor: pointer; white-space: nowrap;
  }
  .topbar-bcch-aviso:hover {
    background: linear-gradient(180deg, #FEF3C7 0%, #FCD34D 50%, #F59E0B 100%);
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.6), 0 0 14px rgba(245, 158, 11, 0.75);
  }
  .topbar-bcch-aviso.topbar-bcch-aviso-info {
    color: #1E3A5F;
    background: #E8EEF6;
    border: 1px solid #8AA0B8;
    box-shadow: none;
  }
  .topbar-bcch-aviso.topbar-bcch-aviso-info:hover {
    background: #F4F7FB;
    box-shadow: none;
  }
  .topbar-bcch {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 0; overflow: hidden; white-space: nowrap; flex-shrink: 1; min-width: 0;
    margin-left: 10px;
  }
  .topbar-bcch-fecha {
    font-size: 12px; font-weight: 600; color: var(--grey-600, #4A5568);
    margin-right: 10px; flex-shrink: 0;
  }
  .topbar-bcch-item {
    display: inline-flex; align-items: baseline; gap: 5px;
    padding: 0 10px; border-left: 1px solid rgba(13, 115, 119, 0.35);
  }
  .topbar-bcch-item:first-of-type { border-left: none; padding-left: 0; }
  .topbar-bcch-lbl {
    font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
    color: #0D7377; text-transform: none;
  }
  .topbar-bcch-val {
    font-size: 12px; font-weight: 700; color: var(--grey-800, #1A202C);
    font-variant-numeric: tabular-nums;
  }
  .topbar-bcch-alt {
    font-size: 12px; font-weight: 600; color: var(--grey-600, #4A5568);
    margin-left: 2px;
  }
  .topbar-bcch-empty { font-size: 12px; color: var(--grey-400); }
  .topbar-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

  .banner-periodo-cerrado {
    display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 18px; flex-shrink: 0;
    background: var(--red-soft, #fee2e2); color: var(--red, #b91c1c);
    border-bottom: 1px solid rgba(185,28,28,0.25);
    padding: 6px 24px; font-size: 12px; font-weight: 600;
  }
  .banner-periodo-cerrado-linea { display: inline-flex; align-items: baseline; gap: 6px; }
  .banner-periodo-cerrado-linea .modulo { text-transform: uppercase; font-size: 12px; letter-spacing: .04em; opacity: .85; white-space: nowrap; }
  .banner-periodo-cerrado-resumen { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .banner-periodo-cerrado-resumen .modulos { font-weight: 700; letter-spacing: .02em; }
  .banner-estado-pago {
    flex-shrink: 0; padding: 7px 24px; border-bottom: 1px solid transparent;
    font-size: 12px; font-weight: 650; text-align: center;
  }
  .banner-estado-pago.estado-neutro { background: var(--grey-100); color: var(--grey-700); border-color: var(--grey-200); }
  .banner-estado-pago.estado-advertencia { background: #fef3c7; color: #92400e; border-color: #f59e0b; }
  .banner-estado-pago.estado-peligro { background: var(--red-soft, #fee2e2); color: var(--red, #b91c1c); border-color: var(--red, #b91c1c); }
  .banner-estado-pago.estado-suspendida { background: var(--red-soft, #fee2e2); color: var(--red, #b91c1c); border-color: var(--red, #b91c1c); }
  .mensualidad-edicion { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 380px; }
  .mensualidad-edicion input[type="date"] { min-width: 145px; }

  .content { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 24px; background: var(--page-bg, #ECE9D8); min-width: 0; }

  /* ---- Shell responsivo (estructura, no tema) ---- */
  @media (max-width: 1279px) and (min-width: 900px) {
    .main { margin-left: var(--sidebar-w-rail); }
    .sidebar {
      width: var(--sidebar-w-rail);
      transition: width .18s ease;
    }
    /* Rail: solo íconos; al hover/focus se expande encima del contenido */
    .sidebar:not(:hover):not(:focus-within) .sidebar-header > div:last-child,
    .sidebar:not(:hover):not(:focus-within) .empresa-selector,
    .sidebar:not(:hover):not(:focus-within) .periodo-selector,
    .sidebar:not(:hover):not(:focus-within) .nav-group-header,
    .sidebar:not(:hover):not(:focus-within) .nav-subtitle,
    .sidebar:not(:hover):not(:focus-within) .sidebar-footer {
      display: none;
    }
    .sidebar:not(:hover):not(:focus-within) .nav-group.collapsed > .nav-group-body { display: block; }
    .sidebar:not(:hover):not(:focus-within) .nav-item {
      justify-content: center; padding: 10px 0; font-size: 0; gap: 0;
    }
    .sidebar:not(:hover):not(:focus-within) .nav-item .nav-icon {
      font-size: 18px; width: auto;
    }
    .sidebar:not(:hover):not(:focus-within) .sidebar-header {
      justify-content: center; padding: 12px 0;
    }
    .sidebar:hover,
    .sidebar:focus-within {
      width: var(--sidebar-w);
      z-index: 120;
      box-shadow: 8px 0 28px rgba(0,0,0,.22);
    }
    .topbar-bcch-fecha { display: none; }
    .topbar-bcch-item { padding: 0 7px; }
    .topbar-bcch-lbl { font-size: 12px; }
    .topbar-bcch-val { font-size: 12px; }
  }

  @media (max-width: 899px) {
    .topbar-nav-toggle { display: inline-flex; }
    .topbar { padding: 0 12px; }
    .topbar-bcch { display: none; }
    .main { margin-left: 0; }
    .sidebar {
      width: var(--sidebar-w);
      transform: translateX(-105%);
      transition: transform .2s ease;
      box-shadow: 8px 0 28px rgba(0,0,0,.28);
      z-index: 110;
    }
    body.sidebar-open .sidebar { transform: translateX(0); }
    body.sidebar-open .sidebar-backdrop { display: block; }
    .content { padding: 14px; }
    .banner-periodo-cerrado { padding: 6px 14px; }
    .banner-estado-pago { padding: 7px 14px; }
  }

  /* CARDS & PANELS — formato GFM */
  .card {
    background: var(--panel-bg, #ECE9D8); border-radius: var(--radius); border: 1px solid var(--card-border, #808080);
    box-shadow: var(--shadow); margin-bottom: 20px;
  }
  .card-header {
    padding: 10px 14px; border-bottom: 1px solid var(--grid-border, #808080);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: linear-gradient(180deg, var(--header-grad-start) 0%, var(--header-grad-end) 100%);
    border-radius: var(--radius) var(--radius) 0 0;
  }
  .card-header h3 { font-size: 14px; font-weight: 700; color: var(--title-color, #8B1A1A); margin: 0; }
  .card-header .btn-navy {
    background: var(--accent); color: #fff;
    border: 1px solid var(--accent-strong);
  }
  .card-header .btn-navy:hover { background: var(--accent-strong); color: #fff; }
  .card-header .btn-ghost {
    color: var(--grey-600); border-color: var(--grid-border, #808080); background: transparent;
  }
  .card-header .btn-ghost:hover { background: rgba(0,0,0,0.06); }
  .card-body { padding: 16px; background: var(--panel-bg, #ECE9D8); }

  /* KPI GRID */
  .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }
  .kpi-card {
    background: var(--white); border-radius: var(--radius); padding: 16px;
    border: 1px solid var(--grid-border, #808080); box-shadow: var(--shadow);
  }
  .kpi-label { font-size: 12px; color: var(--grey-400); font-weight: 500; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
  .kpi-value { font-size: 26px; font-weight: 800; color: var(--ink, #333); line-height: 1; }
  .kpi-sub { font-size: 12px; color: var(--grey-400); margin-top: 6px; }
  .kpi-card.green .kpi-value { color: var(--green); }
  .kpi-card.red .kpi-value { color: var(--red); }
  .kpi-card.orange .kpi-value { color: var(--orange); }

  /* DASHBOARD ANALÍTICA */
  .dash-filters {
    background: linear-gradient(180deg, var(--header-grad-start) 0%, var(--header-grad-end) 100%);
    border-radius: var(--radius); padding: 14px 16px; margin-bottom: 20px;
    display: flex; gap: 16px; align-items: end; flex-wrap: wrap;
    box-shadow: var(--shadow);
    border: 1px solid var(--card-border);
  }
  .dash-filters .field label { color: var(--grey-600); font-size: 12px; }
  .dash-filters .field input,
  .dash-filters .field select {
    background: var(--white); border: 1px solid var(--card-border);
    color: var(--grey-800); border-radius: var(--radius); padding: 8px 10px; font-size: 13px;
  }
  .dash-filters .field input[type="date"] { color-scheme: light; }
  .dash-filters .field select option { color: var(--grey-800); background: white; }
  .dash-check { display: flex; align-items: center; gap: 8px; color: var(--ink, #333); font-size: 13px; padding-bottom: 8px; }
  .dash-check input { width: auto; }
  .dash-filters-actions { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; padding-bottom: 2px; }
  .dash-filters-actions .btn {
    background: var(--accent); color: #fff; border: 1px solid var(--accent-strong);
  }
  .dash-filters-actions .btn:hover { background: var(--accent-strong); color: #fff; }
  .dash-title { text-align: center; font-size: 18px; font-weight: 700; color: var(--grey-800); margin-bottom: 20px; line-height: 1.35; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .dash-grid-main { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 20px; margin-bottom: 20px; }
  @media (max-width: 1279px) { .dash-grid-main { grid-template-columns: 1fr; } }
  .dash-insight-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 12px; }
  .dash-insight {
    background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--radius);
    padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; box-shadow: var(--shadow);
    min-height: 72px;
  }
  .dash-insight-icon { font-size: 22px; line-height: 1; flex-shrink: 0; margin-top: 2px; }
  .dash-insight-text { font-size: 12px; color: var(--grey-600); line-height: 1.45; }
  .dash-insight-text strong { color: var(--grey-800); font-size: 14px; display: block; margin-top: 4px; }
  .dash-insight-text .val-green { color: var(--green); font-weight: 700; }
  .dash-insight-text .val-red { color: var(--red); font-weight: 700; }
  .dash-insight-text .val-navy { color: var(--ink, #333); font-weight: 700; }
  .dash-compare-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
  @media (max-width: 900px) { .dash-compare-row { grid-template-columns: 1fr; } }
  .dash-compare-card {
    background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--radius);
    padding: 20px; box-shadow: var(--shadow);
  }
  .dash-compare-card h4 { font-size: 13px; color: var(--grey-500); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
  .dash-year-line { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--grey-100); font-size: 14px; }
  .dash-year-line:last-child { border-bottom: none; }
  .dash-year-line .yr { font-weight: 700; }
  .dash-year-line .yr.cur { color: var(--ink, #333); }
  .dash-year-line .yr.prev { color: var(--grey-400); }

  .dash-tabs {
    display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px;
    border-bottom: 2px solid var(--grey-200); padding-bottom: 0;
  }
  .dash-tab {
    appearance: none; border: none; background: transparent; cursor: pointer;
    padding: 10px 16px; font-size: 13px; font-weight: 600; color: var(--grey-500);
    border-bottom: 3px solid transparent; margin-bottom: -2px; transition: color .15s, border-color .15s;
  }
  .dash-tab:hover { color: var(--grey-800); }
  .dash-tab.active { color: var(--ink, #333); border-bottom-color: var(--green); }
  .dash-panel { min-height: 120px; }
  .dash-kpi-row {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px; margin-bottom: 20px;
  }
  .dash-kpi {
    background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--radius);
    padding: 14px 16px; box-shadow: var(--shadow);
  }
  .dash-kpi-label { font-size: 12px; color: var(--grey-500); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 6px; }
  .dash-kpi-value { font-size: 20px; font-weight: 700; color: var(--ink, #333); }
  .dash-kpi-value.pos { color: var(--green); }
  .dash-kpi-value.neg { color: var(--red); }
  .dash-ratio-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px; margin-bottom: 16px;
  }
  .dash-ratio-card {
    background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--radius);
    padding: 14px 16px; box-shadow: var(--shadow); border-left: 4px solid var(--grey-300);
  }
  .dash-ratio-card.estado-verde { border-left-color: var(--green); }
  .dash-ratio-card.estado-amarillo { border-left-color: #ca8a04; }
  .dash-ratio-card.estado-rojo { border-left-color: var(--red); }
  .dash-ratio-card.estado-gris { border-left-color: var(--grey-300); }
  .dash-ratio-etiqueta { font-size: 12px; color: var(--grey-600); margin-bottom: 4px; }
  .dash-ratio-valor { font-size: 22px; font-weight: 700; color: var(--ink, #333); line-height: 1.2; }
  .dash-ratio-meta { font-size: 12px; color: var(--grey-500); margin-top: 6px; }
  .dash-ratio-meta .val-green { color: var(--green); font-weight: 700; }
  .dash-ratio-meta .val-red { color: var(--red); font-weight: 700; }
  .dash-ratio-spark { margin-top: 8px; height: 36px; }
  .dash-ratio-spark svg { width: 100%; height: 100%; display: block; }
  .dash-advertencias { margin-top: 8px; }
  .dash-advertencias .alert { margin-bottom: 8px; font-size: 13px; }
  .dash-cont-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
  }
  .dash-cont-card {
    background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--radius);
    padding: 16px 18px; box-shadow: var(--shadow);
  }
  .dash-cont-card h4 { margin: 0 0 10px; font-size: 14px; color: var(--ink, #333); }
  .dash-cont-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--grey-100); font-size: 13px; }
  .dash-cont-row:last-child { border-bottom: none; }
  .dash-stock-list { max-height: 220px; overflow-y: auto; margin-top: 8px; }
  .dash-stock-item { font-size: 12px; padding: 6px 0; border-bottom: 1px solid var(--grey-100); color: var(--grey-700); }
  .dash-stock-item strong { color: var(--red); }

  /* MÓDULO REPORTES (ERP GFM) */
  .rep-layout { display: flex; gap: 0; min-height: calc(100vh - 120px); border: 1px solid var(--grid-border, #808080); border-radius: var(--radius); overflow: hidden; background: var(--panel-bg, #ECE9D8); box-shadow: var(--shadow); }
  .rep-sidebar { width: 280px; flex-shrink: 0; background: #E0DCD0; border-right: 1px solid var(--grid-border, #808080); overflow-y: auto; max-height: calc(100vh - 120px); }
  .rep-sidebar-title { padding: 14px 16px 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--grey-400); }
  .rep-sidebar-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: 13px; color: var(--grey-700);
    cursor: pointer; border-left: 3px solid transparent; transition: background .12s;
  }
  .rep-sidebar-item:hover { background: var(--white); }
  .rep-sidebar-item.active { background: var(--white); border-left-color: var(--green); color: var(--ink, #333); font-weight: 600; }
  .rep-sidebar-item .rep-icon { font-size: 16px; width: 22px; text-align: center; flex-shrink: 0; }
  .rep-sidebar-item.proximamente { opacity: .55; }
  .rep-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
  .rep-main-header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 14px; border-bottom: 1px solid var(--grid-border, #808080);
    background: linear-gradient(180deg, var(--header-grad-start) 0%, var(--header-grad-end) 100%);
  }
  .rep-main-header h3 { color: var(--title-color, #8B1A1A); font-size: 15px; font-weight: 700; margin: 0; }
  .rep-main-header .rep-titulo-wrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .rep-main-header .rep-categoria { font-size: 12px; color: var(--grey-500); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
  .rep-actions { display: flex; gap: 8px; flex-wrap: wrap; }
  .rep-form-body { padding: 16px; overflow-y: auto; flex: 1; background: var(--panel-bg, #ECE9D8); }
  .rep-form-section { background: var(--white); border: 1px solid var(--grid-border, #808080); border-radius: var(--radius); padding: 16px; margin-bottom: 0; }
  .rep-form-section h4 {
    font-size: 13px; font-weight: 700; color: var(--title-color, #8B1A1A); margin: -14px -14px 14px;
    padding: 8px 14px;
    background: linear-gradient(180deg, var(--header-grad-start) 0%, var(--header-grad-end) 100%);
    border-bottom: 1px solid var(--grid-border, #808080);
    border-radius: var(--radius) var(--radius) 0 0;
  }
  .rep-form-section.rep-form-section-plain h4 { display: none; }
  .rep-form-footer {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 10px 14px; border-top: 1px solid var(--grid-border, #808080);
    background: linear-gradient(180deg, var(--header-grad-start) 0%, var(--header-grad-end) 100%);
  }
  .rep-form-footer .rep-footer-hint { font-size: 12px; color: var(--grey-500); max-width: 420px; line-height: 1.35; }
  .rep-form-footer .rep-actions { margin-left: auto; }
  #tabla-vent-partidas thead th,
  #tabla-comp-partidas thead th {
    background: var(--grid-header, #D4D0C8);
    color: #000;
    border: 1px solid var(--grid-border, #808080);
  }
  .rep-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
  .rep-panel-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 0; }
  .rep-panel-card { background: #fff; border: 1px solid var(--grid-border, #808080); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
  .rep-panel-card-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 12px; background: linear-gradient(180deg, var(--header-grad-start) 0%, var(--header-grad-end) 100%); border-bottom: 1px solid var(--grid-border, #808080); }
  .rep-panel-card-header h3 { margin: 0; color: #000; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
  .rep-panel-card-count { font-size: 12px; color: var(--grey-500); white-space: nowrap; }
  .rep-panel-items { padding: 4px 0; display: grid; grid-template-columns: 1fr; gap: 0; }
  .rep-panel-item { width: 100%; display: flex; align-items: center; gap: 8px; padding: 7px 12px; border: 0; border-radius: var(--radius); background: transparent; color: var(--grey-700); text-align: left; cursor: pointer; font: inherit; font-size: 13px; border-left: 3px solid transparent; }
  .rep-panel-item:hover { background: var(--accent-soft); color: var(--ink, #333); }
  .rep-panel-item.proximamente { opacity: .48; }
  .rep-panel-item .rep-icon { width: 20px; text-align: center; font-size: 14px; flex-shrink: 0; }
  .rep-panel-item .rep-status { margin-left: auto; font-size: 12px; color: var(--grey-400); }
  .rep-panel-item.active { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; border-left-color: var(--accent); }
  .rep-main-volver { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--card-border); }
  .rep-hub-layout { display: flex; gap: 12px; align-items: stretch; min-height: calc(100vh - 150px); }
  .rep-hub-izq { flex: 0 0 340px; max-width: 360px; min-width: 280px; overflow-y: auto; max-height: calc(100vh - 150px); display: flex; flex-direction: column; gap: 10px; }
  .rep-hub-izq .rep-kpi-strip {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  }
  .rep-hub-izq .rep-kpi-chip {
    background: #fff; border: 1px solid var(--grid-border, #808080); padding: 8px 8px 6px; text-align: center;
  }
  .rep-hub-izq .rep-kpi-chip .kpi-label { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--grey-500); line-height: 1.2; margin-bottom: 4px; }
  .rep-hub-izq .rep-kpi-chip .kpi-value { font-size: 18px; font-weight: 700; color: var(--title-color, #8B1A1A); line-height: 1; }
  .rep-hub-izq .rep-kpi-chip .kpi-value.green { color: var(--green); }
  .rep-hub-izq .rep-kpi-chip .kpi-sub { font-size: 12px; color: var(--grey-400); margin-top: 3px; }
  .rep-hub-izq .alert { margin: 0; padding: 8px 10px; font-size: 12px; }
  .rep-hub-izq .kpi-grid { display: none; }
  .rep-hub-der-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .rep-hub-der {
    flex: 1; display: flex; flex-direction: column; min-height: 0;
    border: 1px solid var(--grid-border, #808080); border-radius: var(--radius); overflow: hidden;
    background: var(--panel-bg); box-shadow: var(--shadow);
  }
  .rep-hub-der .rep-main { flex: 1; display: flex; flex-direction: column; min-height: 0; }
  .rep-hub-der .rep-form-body { flex: 1; overflow-y: auto; padding: 14px; }
  .rep-hub-der .rep-form-section { width: 100%; max-width: 760px; }
  .rep-hub-der .rep-form-footer { flex-shrink: 0; }
  .rep-hub-der .rep-main-header .rep-actions-top { display: none; }
  .rep-hub-placeholder {
    flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 28px;
    border: 1px dashed #A0A0A0; border-radius: var(--radius); background: var(--surface-sunken);
    color: var(--grey-500); text-align: center;
  }
  .rep-hub-empty span { font-size: 36px; display: block; margin-bottom: 10px; opacity: .4; }
  .rep-hub-empty p { margin: 0; font-size: 13px; line-height: 1.45; max-width: 260px; }
  .rep-voucher-fieldset {
    margin-top: 14px; border: 1px solid var(--grid-border, #808080); border-radius: 0;
    padding: 10px 12px; background: #fff;
  }
  .rep-voucher-fieldset legend {
    font-weight: 700; color: var(--title-color, #8B1A1A); font-size: 12px; padding: 0 4px;
  }
  @media (max-width: 1279px) {
    .rep-hub-layout { flex-direction: column; min-height: 0; }
    .rep-hub-izq { flex: 1; max-width: none; max-height: none; }
    .rep-hub-izq .rep-kpi-strip { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  }
  @media (max-width: 899px) { .rep-layout { flex-direction: column; } .rep-sidebar { width: 100%; max-height: 220px; } }
  /* Excepción puntual <560px: form AF inline — no calza en 900/1280 (campos muy estrechos) */


  /* TABLES — contenedor con scroll horizontal; la página no desborda */
  .table-container { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
  /* Listados: encabezado fijo; solo la grilla hace scroll (filas no cruzan título/filtros). */
  .page.page-lista-scroll.active {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 96px);
    max-height: calc(100vh - 96px);
    overflow: hidden;
  }
  .page-lista-scroll > .alert,
  .page-lista-scroll > .banner,
  .page-lista-scroll > [id$="-banner"],
  .page-lista-scroll > .lista-scroll-filtros {
    flex-shrink: 0;
  }
  .page-lista-scroll > .card.lista-scroll-filtros {
    margin-bottom: 12px;
    flex-shrink: 0;
  }
  .page-lista-scroll > .card.lista-scroll-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin-bottom: 0;
    overflow: hidden;
  }
  .page-lista-scroll .lista-scroll-head,
  .page-lista-scroll .ficha-terceros-sticky-head,
  .page-lista-scroll .plan-cuentas-sticky-head {
    position: relative;
    /* Sobre thead sticky (z-index:3) para que menús del toolbar (tipo presupuesto) no queden detrás */
    z-index: 10;
    flex-shrink: 0;
    background: var(--grid-header);
    border-bottom: 1px solid var(--grid-border, #808080);
    overflow: visible;
  }
  .page-lista-scroll .lista-scroll-head .card-header,
  .page-lista-scroll .ficha-terceros-sticky-head .card-header,
  .page-lista-scroll .plan-cuentas-sticky-head .card-header {
    border-bottom: none;
    margin: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    background: linear-gradient(180deg, var(--header-grad-start) 0%, var(--header-grad-end) 100%);
    overflow: visible;
  }
  .page-lista-scroll .lista-scroll-card > .card-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
  }
  .page-lista-scroll .lista-scroll-card .table-container {
    flex: 0 1 auto;
    min-height: 0;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    background: var(--panel-bg, #fff);
  }
  .page-lista-scroll .lista-scroll-card > .card-body > *:not(.table-container) {
    flex-shrink: 0;
  }
  .page-lista-scroll .lista-scroll-head .card-header .btn-export-excel,
  .card-header .btn-export-excel {
    white-space: nowrap;
  }
  /* Títulos de columna fijos al hacer scroll en listados (Plan de Cuentas, etc.) */
  .page-lista-scroll .lista-scroll-card .table-container table {
    border-collapse: separate;
    border-spacing: 0;
  }
  .page-lista-scroll .lista-scroll-card .table-container thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--grid-header);
    background-color: var(--grid-header);
    border: 1px solid var(--grid-border, #808080);
    color: #000;
    box-shadow: 0 1px 0 var(--grid-border, #808080);
  }
  /* Totales del asiento: títulos en una sola línea, alineados */
  #asiento-totales-row .asiento-tot-titulo {
    color: var(--grey-600);
    text-transform: uppercase;
    letter-spacing: .3px;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 14px;
    line-height: 14px;
  }
  #asiento-totales-row .asiento-tot-valor {
    font-size: 13px;
    white-space: nowrap;
    min-height: 18px;
    line-height: 18px;
    margin-top: 2px;
  }
  .page-lista-scroll .lista-scroll-card > .card-body > .flex {
    flex-shrink: 0;
  }
  /* Config. Cuentas: encabezado+tabs fijos; solo el cuerpo hace scroll (evita ver filas por detrás). */
  #page-config-compras.page.active {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 96px);
    max-height: calc(100vh - 96px);
    overflow: hidden;
  }
  #page-config-compras .cfg-cuentas-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin-bottom: 0;
    overflow: hidden;
  }
  #page-config-compras .cfg-cuentas-sticky-top {
    position: relative;
    flex-shrink: 0;
    z-index: 5;
    background-color: #ECE9D8;
    background-image: none;
    border-bottom: none;
    box-shadow: none;
    border-radius: var(--radius) var(--radius) 0 0;
    /* Espacio opaco bajo las pestañas: el scroll no puede verse ahí */
    padding-bottom: 22px;
  }
  #page-config-compras .cfg-cuentas-sticky-top > .card-header {
    border-radius: var(--radius) var(--radius) 0 0;
    border-bottom: 1px solid var(--grid-border, #808080);
    background-color: var(--grid-header);
    background-image: linear-gradient(180deg, var(--header-grad-start) 0%, var(--header-grad-end) 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
  }
  #page-config-compras .cfg-cuentas-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
  }
  #page-config-compras .cfg-collapse-section > .card-header.liq-card-toggle {
    cursor: pointer;
    user-select: none;
  }
  #page-config-compras .cfg-cuentas-sticky-top > .cfg-tabs {
    margin: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: 1px solid var(--grid-border, #808080);
    background-color: var(--grid-header);
    background-image: linear-gradient(180deg, var(--header-grad-start) 0%, var(--header-grad-end) 100%);
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  }
  #page-config-compras .cfg-cuentas-card > .card-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #ECE9D8;
  }
  #cfg-panel-rrhh .mc-rrhh-intro {
    transition: max-height .28s ease, opacity .22s ease, margin .28s ease, padding .28s ease;
    max-height: 140px; overflow: hidden; opacity: 1; margin-bottom: 16px;
  }
  #cfg-panel-rrhh .mc-rrhh-intro.mc-rrhh-intro-hidden {
    max-height: 0; opacity: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border: none;
  }
  #cfg-panel-rrhh .mc-sticky-section {
    overflow: visible;
    margin-top: 0;
  }
  #cfg-panel-rrhh .mc-sticky-section > .card-header {
    position: sticky;
    top: 0;
    z-index: 30;
    background-color: var(--grid-header);
    background-image: linear-gradient(180deg, var(--header-grad-start) 0%, var(--header-grad-end) 100%);
    border-bottom: 1px solid var(--grid-border, #808080);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    /* Cubre filas que intenten asomar por encima del título */
  }
  #cfg-panel-rrhh .mc-sticky-section > .card-header::before {
    content: '';
    position: absolute;
    left: -2px;
    right: -2px;
    top: -24px;
    height: 24px;
    background: #ECE9D8;
    pointer-events: none;
  }
  #cfg-panel-rrhh .mc-sticky-section > .card-header.liq-card-toggle {
    position: sticky;
  }
  #cfg-panel-rrhh .mc-sticky-section > .card-header.liq-card-toggle h3 {
    flex: 1;
    margin: 0;
    color: var(--title-color, #8B1A1A);
  }
  #cfg-panel-rrhh .mc-sticky-section > .card-header .liq-card-chevron {
    color: var(--title-color, #8B1A1A);
    opacity: 0.85;
  }
  #cfg-panel-rrhh .mc-sticky-table thead th {
    position: sticky;
    top: var(--mc-rrhh-section-head-h, 44px);
    z-index: 15;
    background-color: var(--grid-header);
    background-image: none;
    color: #000;
    border: 1px solid var(--grid-border, #808080);
    box-shadow: none;
  }
  #cfg-panel-rrhh .table-container.mc-sticky-table { overflow: visible; }
  table { width: 100%; border-collapse: collapse; }
  th {
    background: var(--grid-header, #D4D0C8); padding: 6px 10px; text-align: left;
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
    border: 1px solid var(--grid-border, #808080); white-space: nowrap;
  }
  td {
    padding: 5px 10px; border: 1px solid var(--grid-border-light, #C0C0C0);
    font-size: 13px; color: #000; background: var(--white);
  }

  /* Libro Diario: glosa acotada; resto al contenido (sin huecos enormes) */
  #page-libro-diario #tabla-asientos {
    width: 100%;
    table-layout: fixed;
  }
  #tabla-asientos th,
  #tabla-asientos td { padding: 7px 8px; vertical-align: middle; }
  #tabla-asientos th:nth-child(1), #tabla-asientos td:nth-child(1) { width: 64px; white-space: nowrap; }
  #tabla-asientos th:nth-child(2), #tabla-asientos td:nth-child(2) { width: 92px; white-space: nowrap; }
  #tabla-asientos th:nth-child(3), #tabla-asientos td:nth-child(3) {
    width: 20%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #tabla-asientos th:nth-child(4), #tabla-asientos td:nth-child(4) { width: 22%; }
  #tabla-asientos th:nth-child(5), #tabla-asientos td:nth-child(5) { width: 80px; white-space: nowrap; }
  #tabla-asientos th:nth-child(6), #tabla-asientos td:nth-child(6) { width: 280px; white-space: nowrap; }
  #tabla-asientos .ld-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
  }
  tr:hover td { background: #E8F4FC; }
  tr.eo-row-sel td { background: #316AC5; color: #fff; font-weight: 600; }
  #m-comp-tipo option:checked,
  #m-vent-tipo option:checked,
  #m-hon-tipo option:checked {
    background: #316AC5;
    color: #fff;
    font-weight: 600;
  }
  tr.eo-row:hover td { background: #E8F4FC; }

  /* Estructura Organizacional — misma paleta/cards que el resto del ERP */
  #page-estructura-rrhh { max-width: 1100px; }
  .eo-page-intro.card { margin-bottom: 14px; }
  .eo-page-intro .card-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 14px;
  }
  .eo-page-intro-text { flex: 1; min-width: 220px; }
  .eo-page-intro-text p {
    font-size: 13px;
    margin: 0;
    color: var(--grey-600);
    line-height: 1.45;
  }
  .eo-page-intro-actions {
    display: inline-flex;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 0;
    border: 1px solid var(--grid-border, #808080);
    border-top-color: #fff;
    border-left-color: #fff;
    background: var(--navy, #D4D0C8);
  }
  .eo-page-intro-actions .btn {
    border-radius: 0;
    margin: 0;
    border: none;
    border-right: 1px solid var(--grid-border, #808080);
    box-shadow: none;
    background: transparent;
    color: var(--ink, #333);
  }
  .eo-page-intro-actions .btn:last-child { border-right: none; }
  .eo-page-intro-actions .btn:hover { background: var(--grey-50, #F5F2EA); }
  .eo-page-intro-actions .btn:active { background: var(--grey-200, #C8C4B8); }
  .eo-accordion { display: flex; flex-direction: column; gap: 10px; }
  .eo-panel.card { margin-bottom: 0; overflow: hidden; }
  .eo-panel-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: none;
    cursor: pointer;
    text-align: left;
    background: linear-gradient(180deg, var(--grey-50, #F5F2EA) 0%, var(--navy, #D4D0C8) 100%);
    color: var(--title-color);
    border-bottom: 1px solid var(--grid-border, #808080);
  }
  .eo-panel-head:hover { filter: brightness(0.98); }
  .eo-panel-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius);
    background: var(--accent-soft, #E8F4FC);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
    border: 1px solid var(--grid-border-light, #C0C0C0);
  }
  .eo-panel-title {
    font-size: 14px;
    font-weight: 700;
    flex: 1;
    letter-spacing: .2px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    color: var(--title-color);
  }
  .eo-panel-sub {
    font-size: 12px;
    font-weight: 400;
    color: var(--grey-600);
  }
  .eo-panel-count {
    font-size: 12px;
    font-weight: 600;
    background: var(--white);
    border: 1px solid var(--grid-border, #808080);
    padding: 3px 10px;
    border-radius: var(--radius);
    color: var(--ink, #333);
    min-width: 28px;
    text-align: center;
  }
  .eo-panel-chevron {
    font-size: 12px;
    opacity: 0.85;
    transition: transform .2s ease;
    color: var(--grey-600);
  }
  .eo-panel.collapsed .eo-panel-chevron { transform: rotate(-90deg); }
  .eo-panel.collapsed .eo-panel-body { display: none; }
  .eo-panel.collapsed .eo-panel-head { border-bottom: none; }
  .eo-panel-body {
    padding: 14px 16px 16px;
    background: var(--panel-bg);
  }
  .eo-form-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 14px;
    padding: 10px 12px;
    background: var(--white);
    border: 1px solid var(--grid-border, #808080);
    border-radius: var(--radius);
  }
  .eo-form-bar input {
    padding: 8px 10px;
    border: 1px solid var(--grid-border, #808080);
    border-radius: var(--radius);
    font-size: 13px;
    background: #fff;
    color: var(--ink, #333);
  }
  .eo-form-bar input:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 2px var(--theme-accent-glow);
  }
  .eo-form-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
  .eo-form-actions .btn-ghost {
    border: 1px solid var(--grid-border, #808080);
    background: var(--grey-50, #F5F2EA);
    color: var(--ink, #333);
  }
  .eo-form-actions .btn-ghost:hover { background: var(--grey-100, #E8E4D8); }
  .eo-form-actions .btn-danger-ghost {
    border: 1px solid var(--grid-border, #808080);
    background: var(--red-soft);
    color: var(--red);
  }
  #page-estructura-rrhh #eo-lista-cargos,
  #page-estructura-rrhh #eo-lista-secciones,
  #page-estructura-rrhh #eo-lista-sucursales,
  #page-estructura-rrhh #eo-lista-centros-costo,
  #page-estructura-rrhh #eo-lista-unidades,
  #page-estructura-rrhh #eo-lista-codigos-ine,
  #page-estructura-rrhh #eo-lista-otras {
    background: var(--white);
    border: 1px solid var(--grid-border, #808080);
  }
  #page-estructura-rrhh table { font-size: 13px; width: 100%; margin: 0; }
  #page-estructura-rrhh table thead th {
    background: var(--grid-header, #D4D0C8);
    color: var(--ink, #333);
    font-weight: 700;
    border: 1px solid var(--grid-border, #808080);
  }
  #page-estructura-rrhh table td {
    border-color: var(--grid-border-light, #C0C0C0);
    color: var(--ink, #333);
  }
  tr.eo-row-sel td { background: var(--sel, #316AC5); color: #fff; font-weight: 600; }
  tr.eo-row:hover td { background: var(--accent-soft, #E8F4FC); }

  .cfg-tabs {
    display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 16px;
    padding: 6px 8px 0;
    background: linear-gradient(180deg, var(--grey-50, #F5F2EA) 0%, var(--navy, #D4D0C8) 100%);
    border-radius: var(--radius); border: 1px solid var(--grid-border, #808080); border-bottom: none;
  }
  .cfg-tab {
    border: none; background: transparent; color: var(--grey-600); font-size: 13px; font-weight: 600;
    padding: 10px 14px; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: 0;
    border-radius: 4px 4px 0 0;
  }
  .cfg-tab:hover { color: var(--ink, #333); background: rgba(0,0,0,0.04); }
  .cfg-cuenta-row { display: grid; grid-template-columns: minmax(260px, 1.2fr) minmax(280px, 1fr); gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--grid-border-light, #C0C0C0); }
  .cfg-cuenta-row label { font-size: 13px; font-weight: 600; color: var(--grey-700); margin: 0; }
  .cfg-cuenta-row select { width: 100%; }
  .cfg-section-title {
    font-size: 12px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700;
    color: var(--title-color); margin: 18px 0 10px; padding: 8px 12px;
    background: linear-gradient(180deg, var(--grey-50, #F5F2EA) 0%, var(--navy, #D4D0C8) 100%);
    border: 1px solid var(--grid-border, #808080);
    border-radius: var(--radius);
  }
  tr:last-child td { border-bottom: none; }

  /* Súper admin en listado de usuarios */
  #tabla-usuarios tr.row-superadmin td {
    background: var(--orange-soft);
    border-bottom-color: color-mix(in srgb, var(--orange) 28%, var(--grid-border, #ccc));
  }
  #tabla-usuarios tr.row-superadmin td:first-child {
    box-shadow: inset 3px 0 0 var(--orange);
    font-weight: 600;
  }

  /* BADGES */
  .badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 12px; font-size: 12px; font-weight: 600; }
  .badge-green { background: var(--green-soft); color: var(--green); }
  .badge-red { background: var(--red-soft); color: var(--red); }
  .nav-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 6px;
    border-radius: 999px;
    background: var(--red);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
  }
  .badge-orange { background: var(--orange-soft); color: var(--orange); }
  .badge-blue { background: var(--accent-soft); color: var(--accent); }
  .badge-grey { background: var(--grey-100); color: var(--grey-600); }

  /* BUTTONS */
  .btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--radius); font-size: 13px; font-weight: 500; cursor: pointer; border: 1px solid transparent; transition: all .15s; }
  .btn-sm { padding: 4px 10px; font-size: 12px; min-height: 28px; box-sizing: border-box; }
  .btn-eliminar { color: var(--grey-600); }
  .btn-eliminar:hover:not(:disabled),
  .btn-eliminar:focus-visible:not(:disabled) { color: var(--red); background: var(--red-soft); }
  .btn-eliminar:disabled { opacity: 0.55; cursor: not-allowed; }
  .btn-navy {
    background: var(--accent); color: #fff;
    border: 1px solid var(--accent-strong);
  }
  .btn-navy:hover { background: var(--accent-strong); color: #fff; }
  .btn-navy:active {
    background: var(--accent-strong);
  }
  .btn-green { background: var(--green); color: white; border-color: #0f7a35; }
  .btn-green:hover { opacity: 0.9; }
  .btn-ghost { background: transparent; color: var(--grey-600); border: 1px solid transparent; }
  .btn-ghost:hover { background: rgba(0,0,0,0.06); border-color: var(--grid-border, #808080); }
  .btn-danger { background: var(--red); color: white; border-color: #6B1516; }
  .barra-acciones { align-items: center; }
  .menu-accion { position: relative; }
  .menu-accion > summary { list-style: none; cursor: pointer; }
  .menu-accion > summary::-webkit-details-marker { display: none; }
  .menu-accion-panel {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 30;
    min-width: 220px; background: var(--white); border: 1px solid var(--grid-border, #C8C4B8);
    border-radius: 8px; box-shadow: var(--shadow-md); padding: 4px;
    display: flex; flex-direction: column; align-items: stretch;
  }
  .menu-accion:not([open]) > .menu-accion-panel { display: none; }
  .menu-accion-panel .btn { justify-content: flex-start; width: 100%; }
  .btn-export-excel.btn-icono { min-width: 28px; padding-inline: 8px; }
  .btn-export-excel.btn-icono svg { display: block; }

  /* FORMS */
  .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
  /* Modal Nuevo Activo Fijo: 2 columnas fijas, sin forzar 6 pistas (evita scroll horizontal). */
  #modal-activo-fijo .modal {
    width: min(760px, 96vw);
  }
  #page-activo-fijo .af-lista-scroll { max-height: 60vh; overflow: auto; }
  #page-activo-fijo .af-lista-scroll table { border-collapse: separate; border-spacing: 0; }
  #page-activo-fijo .af-lista-scroll thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--grid-header); background-color: var(--grid-header);
    white-space: normal; line-height: 1.15; letter-spacing: 0; font-size: 12px;
    overflow: hidden;
  }
  #tabla-activos-fijos { table-layout: fixed; width: 100%; }
  #tabla-activos-fijos col.af-c-cod { width: 10%; }
  #tabla-activos-fijos col.af-c-nom { width: 17%; }
  #tabla-activos-fijos col.af-c-cat { width: 10%; }
  #tabla-activos-fijos col.af-c-fecha { width: 9%; }
  #tabla-activos-fijos col.af-c-valor { width: 10%; }
  #tabla-activos-fijos col.af-c-dep { width: 10%; }
  #tabla-activos-fijos col.af-c-libro { width: 10%; }
  #tabla-activos-fijos col.af-c-est { width: 8%; }
  #tabla-activos-fijos col.af-c-op { width: 8%; }
  #tabla-activos-fijos col.af-c-acc { width: 8%; }
  #tabla-activos-fijos td.af-codigo { white-space: nowrap; }
  #tabla-activos-fijos .badge {
    display: inline-block; max-width: 100%; box-sizing: border-box;
    white-space: normal; text-align: center;
  }
  #tabla-activos-fijos th,
  #tabla-activos-fijos td { padding: 5px 6px; }
  #tabla-activos-fijos td.af-recorte {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  #tabla-activos-fijos td.num-right { white-space: nowrap; }
  #tabla-activos-fijos .af-acc-btn { white-space: nowrap; padding: 4px 6px; }
  .af-menu-acciones {
    position: fixed; z-index: 40; min-width: 168px;
    background: #fff; color: var(--text, #1a1a1a);
    border: 1px solid var(--grid-border, #C5C5C5);
    border-radius: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
    padding: 4px 0;
  }
  .af-menu-acciones [role="menuitem"] {
    display: block; width: 100%; text-align: left;
    background: transparent; border: 0; border-radius: 0;
    padding: 8px 14px; font: inherit; font-size: 13px; cursor: pointer;
  }
  .af-menu-acciones [role="menuitem"]:hover,
  .af-menu-acciones [role="menuitem"]:focus {
    background: #E8F4FC; outline: none;
  }
  .af-menu-acciones .af-menu-sep {
    height: 1px; margin: 4px 0; background: #E4E4E4;
  }
  .af-menu-acciones .af-menu-eliminar { color: #9B2C2C; }
  .af-menu-acciones .af-menu-eliminar:hover,
  .af-menu-acciones .af-menu-eliminar:focus { background: #FDECEC; }
  #tabla-tomas-af, #tabla-marca-af { table-layout: fixed; width: 100%; }
  #tabla-tomas-af col.tif-c-fecha { width: 14%; }
  #tabla-tomas-af col.tif-c-resp { width: 28%; }
  #tabla-tomas-af col.tif-c-est { width: 16%; }
  #tabla-tomas-af col.tif-c-filtro { width: 28%; }
  #tabla-tomas-af col.tif-c-acc { width: 14%; }
  #page-inventario-fisico-af .af-lista-scroll { max-height: 60vh; overflow: auto; }
  #page-inventario-fisico-af .af-lista-scroll table { border-collapse: separate; border-spacing: 0; }
  #page-inventario-fisico-af .af-lista-scroll thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--grid-header); background-color: var(--grid-header);
    white-space: normal; overflow: hidden; font-size: 12px;
  }
  #tabla-marca-af col.tif-m-cod { width: 12%; }
  #tabla-marca-af col.tif-m-nom { width: 18%; }
  #tabla-marca-af col.tif-m-res { width: 16%; }
  #tabla-marca-af col.tif-m-ubi { width: 18%; }
  #tabla-marca-af col.tif-m-est { width: 16%; }
  #tabla-marca-af col.tif-m-acc { width: 20%; }
  #tabla-marca-af select, #tabla-marca-af input { width: 100%; max-width: 100%; box-sizing: border-box; }
  #tabla-tomas-af td.af-recorte,
  #tabla-marca-af td.af-recorte,
  #tabla-marca-af td.af-codigo {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  #tabla-tomas-af .af-acc-btn, #tabla-marca-af .af-acc-btn { white-space: nowrap; padding: 4px 6px; }
  #tif-informe .tif-informe-tabla { table-layout: fixed; width: 100%; }
  #tif-informe .tif-informe-tabla th,
  #tif-informe .tif-informe-tabla td {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  #tif-informe .tif-informe-tabla td.tif-acc { overflow: visible; }
  #tabla-af-en-curso, #tabla-aec-tareas, #tabla-aec-oc, #tabla-aec-desembolsos { table-layout: fixed; width: 100%; }
  #tabla-af-en-curso col.aec-c-cod { width: 11%; }
  #tabla-af-en-curso col.aec-c-nom { width: 16%; }
  #tabla-af-en-curso col.aec-c-resp { width: 13%; }
  #tabla-af-en-curso col.aec-c-est { width: 12%; }
  #tabla-af-en-curso col.aec-c-av { width: 14%; }
  #tabla-af-en-curso col.aec-c-term { width: 13%; }
  #tabla-af-en-curso col.aec-c-pre { width: 11%; }
  #tabla-af-en-curso col.aec-c-acc { width: 10%; }
  #tabla-aec-tareas col.aec-t-tit { width: 28%; }
  #tabla-aec-tareas col.aec-t-resp { width: 16%; }
  #tabla-aec-tareas col.aec-t-fec { width: 14%; }
  #tabla-aec-tareas col.aec-t-est { width: 14%; }
  #tabla-aec-tareas col.aec-t-hito { width: 10%; }
  #tabla-aec-tareas col.aec-t-acc { width: 18%; }
  #tabla-aec-oc col.aec-o-num { width: 7%; }
  #tabla-aec-oc col.aec-o-fec { width: 10%; }
  #tabla-aec-oc col.aec-o-prov { width: 16%; }
  #tabla-aec-oc col.aec-o-tar { width: 18%; }
  #tabla-aec-oc col.aec-o-est { width: 12%; }
  #tabla-aec-oc col.aec-o-tot { width: 12%; }
  #tabla-aec-oc col.aec-o-comp { width: 13%; }
  #tabla-aec-oc col.aec-o-acc { width: 12%; }
  #tabla-aec-desembolsos col.aec-d-fec { width: 12%; }
  #tabla-aec-desembolsos col.aec-d-ori { width: 12%; }
  #tabla-aec-desembolsos col.aec-d-con { width: 30%; }
  #tabla-aec-desembolsos col.aec-d-mon { width: 14%; }
  #tabla-aec-desembolsos col.aec-d-est { width: 16%; }
  #tabla-aec-desembolsos col.aec-d-acc { width: 16%; }
  #page-af-en-curso .af-lista-scroll { max-height: 60vh; overflow: auto; }
  #page-af-en-curso .af-lista-scroll table { border-collapse: separate; border-spacing: 0; }
  #page-af-en-curso .af-lista-scroll thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--grid-header); background-color: var(--grid-header);
    white-space: nowrap; overflow: hidden; font-size: 12px;
  }
  #tabla-af-en-curso td.af-recorte,
  #tabla-aec-tareas td.af-recorte,
  #tabla-aec-oc td.af-recorte,
  #tabla-aec-desembolsos td.af-recorte {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  #tabla-af-en-curso td.num-right,
  #tabla-aec-oc td.num-right,
  #tabla-aec-desembolsos td.num-right { white-space: nowrap; }
  #tabla-af-en-curso .af-acc-btn, #tabla-aec-tareas .af-acc-btn,
  #tabla-aec-oc .af-acc-btn, #tabla-aec-desembolsos .af-acc-btn { white-space: nowrap; padding: 4px 6px; }
  .aec-avance {
    display: inline-block; width: 64px; height: 8px; margin-right: 6px;
    background: #E4E4E4; border-radius: 4px; vertical-align: middle; overflow: hidden;
  }
  .aec-avance-barra { display: block; height: 100%; background: #1F6F8B; }
  #tabla-aec-tareas tr.aec-atrasada td { background: #FDECEC; }
  #page-informe-activo-fijo .af-informe-scroll { max-height: 60vh; overflow: auto; }
  #page-informe-activo-fijo .af-informe-scroll table { border-collapse: separate; border-spacing: 0; }
  #page-informe-activo-fijo .af-informe-scroll thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--grid-header); background-color: var(--grid-header);
  }
  #page-informe-activo-fijo .af-informe-scroll tfoot td {
    position: sticky; bottom: 0; z-index: 2;
    background: var(--grid-header); background-color: var(--grid-header);
    font-weight: 700;
  }
  #modal-activo-fijo .modal-body {
    overflow-x: hidden;
  }
  #modal-activo-fijo .af-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
    align-items: start;
  }
  #modal-activo-fijo .af-form-grid .field-full {
    grid-column: 1 / -1;
  }
  #modal-activo-fijo .af-form-grid .field label {
    display: block;
    margin-bottom: 4px;
    line-height: 1.25;
  }
  #modal-activo-fijo .af-form-grid .af-field-inline {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
  #modal-activo-fijo .af-form-grid .af-field-inline > label {
    display: block;
    margin-bottom: 0;
    flex: 0 0 auto;
    width: 230px;
    max-width: 38%;
    line-height: 1.25;
  }
  #modal-activo-fijo .af-form-grid .af-field-inline > select {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }
  @media (max-width: 560px) {
    #modal-activo-fijo .af-form-grid .af-field-inline {
      flex-direction: column;
      align-items: stretch;
      gap: 4px;
    }
    #modal-activo-fijo .af-form-grid .af-field-inline > label {
      width: auto;
      max-width: none;
    }
  }
  #modal-activo-fijo .af-form-grid input,
  #modal-activo-fijo .af-form-grid select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  #modal-activo-fijo .af-form-grid select {
    text-overflow: ellipsis;
  }
  #modal-activo-fijo .af-sep {
    margin: 4px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--grey-200, #c8c4b8);
  }
  #modal-activo-fijo .af-metodo-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
    align-items: start;
  }
  #modal-activo-fijo .af-metodo-col {
    border: 1px solid var(--grey-200, #c8c4b8);
    border-radius: 6px;
    padding: 10px 12px;
    background: #fff;
  }
  #modal-activo-fijo .af-metodo-col-trib {
    background: #faf9f6;
  }
  #modal-activo-fijo .af-metodo-col-title {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--grey-600, #666);
    margin-bottom: 8px;
  }
  #modal-activo-fijo .af-metodo-opt {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-weight: 400;
    margin: 0 0 6px;
    line-height: 1.35;
    cursor: pointer;
  }
  #modal-activo-fijo .af-metodo-opt:last-child { margin-bottom: 0; }
  #modal-activo-fijo .af-metodo-opt input {
    width: auto;
    margin-top: 2px;
    flex-shrink: 0;
  }
  @media (max-width: 560px) {
    #modal-activo-fijo .af-metodo-split { grid-template-columns: 1fr; }
  }
  @media (max-width: 560px) {
    #modal-activo-fijo .af-form-grid {
      grid-template-columns: 1fr;
    }
  }
  .params-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 36px; }
  .params-col-title { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--grey-600); text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--grey-100); padding-bottom: 6px; }
  .params-col .field { margin-bottom: 6px; }
  @media (max-width: 900px) { .params-2col { grid-template-columns: 1fr; } }

  /* Factores Internos: filas compactas y alineadas (label | valor) */
  #subtab-factores-internos .params-col {
    max-width: 520px;
  }
  #subtab-factores-internos .params-col .field {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) 112px;
    align-items: center;
    column-gap: 12px;
    row-gap: 2px;
    margin-bottom: 5px;
  }
  #subtab-factores-internos .params-col .field label {
    margin: 0;
    font-size: 12px;
    line-height: 1.3;
    color: var(--grey-700);
  }
  #subtab-factores-internos .params-col .field input {
    width: 112px;
    min-width: 112px;
    max-width: 112px;
    justify-self: end;
    padding: 5px 8px;
    font-size: 13px;
  }
  #subtab-factores-internos .params-col .field input.pp-num { text-align: right; }
  #subtab-factores-internos .params-col .field:has(#pp-fuente) {
    grid-template-columns: minmax(120px, 160px) minmax(160px, 1fr);
  }
  #subtab-factores-internos .params-col .field input#pp-fuente {
    width: 100%;
    min-width: 0;
    max-width: none;
    justify-self: stretch;
    text-align: left;
  }
  #subtab-factores-internos .card-body { padding: 12px 16px; }
  #subtab-factores-internos .alert { margin-bottom: 10px; padding: 8px 12px; font-size: 12px; }
  #subtab-factores-internos #pp-fuente-info { margin-bottom: 8px !important; font-size: 12px !important; }
  @media (max-width: 700px) {
    #subtab-factores-internos .params-col { max-width: none; }
    #subtab-factores-internos .params-col .field {
      grid-template-columns: 1fr 100px;
    }
  }

  /* Parámetros / Impuesto Único — tablas estilo GFM con color */
  .gfm-param-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  @media (max-width: 1000px) { .gfm-param-grid { grid-template-columns: 1fr; } }
  .gfm-param-panel {
    border: 1px solid var(--grid-border, #808080); border-radius: var(--radius);
    overflow: hidden; background: var(--panel-bg, #ECE9D8); box-shadow: var(--shadow);
  }
  .gfm-param-panel-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 12px; color: var(--title-color, #8B1A1A); font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    background: linear-gradient(180deg, #ECE9D8 0%, #D4D0C8 100%);
    border-bottom: 1px solid var(--grid-border, #808080);
  }
  .gfm-param-panel-head.utm {
    background: linear-gradient(180deg, #ECE9D8 0%, #D4D0C8 100%);
  }
  .gfm-param-panel-head.pesos {
    background: linear-gradient(180deg, #ECE9D8 0%, #D4D0C8 100%);
    color: #1B7A4E;
  }
  .gfm-param-panel-head .gfm-tag {
    font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: none;
    background: #ECE9D8; border: 1px solid #808080; border-radius: 0; padding: 2px 8px; color: var(--ink, #333);
  }
  .tc-calendario { font-size: 12px; border-collapse: collapse; width: 100%; min-width: 980px; }
  .tc-calendario th, .tc-calendario td {
    border: 1px solid var(--grid-border-light, #C0C0C0); padding: 3px 5px; white-space: nowrap;
  }
  .tc-calendario thead th {
    background: var(--grid-header, #D4D0C8); color: #000; font-weight: 700; text-align: center;
    text-transform: uppercase; font-size: 12px; letter-spacing: .02em;
    position: sticky; top: 0; z-index: 1;
    border: 1px solid var(--grid-border, #808080);
  }
  .tc-calendario td.tc-dia {
    background: var(--grid-header, #D4D0C8); color: var(--title-color, #8B1A1A);
    font-weight: 700; text-align: center; width: 44px;
    border-color: var(--grid-border, #808080);
  }
  .tc-calendario td.tc-val { text-align: right; font-variant-numeric: tabular-nums; background: #fff; }
  .tc-calendario tbody tr:nth-child(even) td.tc-val { background: #F8F6F0; }
  .tc-calendario td.tc-vacio { background: #F5F2EA; color: #999; text-align: center; }
  .tc-toolbar {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: end;
    padding: 12px 14px; border-bottom: 1px solid var(--grid-border-light, #C0C0C0);
    background: linear-gradient(180deg, #F5F2EA 0%, #ECE9D8 100%);
  }
  .tc-toolbar .field { margin: 0; min-width: 110px; }
  .tc-toolbar .field label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--grey-700, #555); }
  .tc-manual-box {
    display: flex; flex-wrap: nowrap; gap: 12px; align-items: end;
    padding: 12px 14px; margin: 0;
    border-bottom: 1px solid var(--grid-border-light, #C0C0C0);
    background: var(--white, #fff);
  }
  .tc-manual-box .field { margin: 0; flex: 1 1 0; min-width: 0; }
  .tc-manual-box .field label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
  .tc-manual-box .field input,
  .tc-manual-box .field select { width: 100%; }
  .tc-manual-box > .btn { flex: 0 0 auto; white-space: nowrap; align-self: end; }
  .tc-cal-wrap { padding: 12px 14px 14px; }
  .tc-cal-titulo {
    font-size: 12px; font-weight: 700; color: var(--title-color, #8B1A1A);
    margin: 0 0 8px; text-transform: uppercase; letter-spacing: .03em;
  }
  .gfm-param-panel .tabla-maestro th {
    background: var(--grid-header, #D4D0C8); color: #000; font-weight: 700;
    border: 1px solid var(--grid-border, #808080); padding: 6px 10px;
  }
  .gfm-param-panel.utm .tabla-maestro th { border-color: var(--grid-border, #808080); }
  .gfm-param-panel.pesos .tabla-maestro th { border-color: var(--grid-border, #808080); color: #1B7A4E; }
  .gfm-param-panel .tabla-maestro td { padding: 5px 10px; font-variant-numeric: tabular-nums; }
  .gfm-param-panel .tabla-maestro tbody tr:nth-child(even) td { background: #F8F6F0; }
  .gfm-param-panel.pesos .tabla-maestro tbody tr:nth-child(even) td { background: #F3FAF6; }
  .gfm-param-panel .tabla-maestro tbody tr:hover td { background: var(--accent-soft); }
  .gfm-param-utm-box {
    display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px;
    padding: 8px 12px; border-radius: var(--radius); border: 1px solid var(--grid-border, #808080);
    background: var(--white);
  }
  .gfm-param-utm-box label { margin: 0; color: var(--ink, #333); font-weight: 700; font-size: 12px; }
  .gfm-param-utm-box input {
    border: none !important; background: transparent !important; font-weight: 800;
    color: var(--ink, #333); font-size: 16px; text-align: right; width: 140px; padding: 0 !important;
  }
  .params-col-title.gfm-left {
    color: var(--ink, #333); border-bottom-color: rgba(31,56,100,0.25);
  }
  .params-col-title.gfm-right {
    color: #1B7A4E; border-bottom-color: rgba(27,122,78,0.28);
  }

  .param-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 2px solid var(--grey-200); margin-bottom: 16px; }
  .param-tab {
    background: none; border: none; padding: 10px 16px; font-size: 13px; font-weight: 600;
    color: var(--grey-400); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px;
  }
  .param-tab:hover { color: var(--ink, #333); }
  .param-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
  .param-subtab { display: none; }
  .param-subtab.active { display: block; }
  .tabla-maestro { width: 100%; border-collapse: collapse; }
  .tabla-maestro th { text-align: left; font-size: 12px; text-transform: uppercase; color: #000; font-weight: 700; padding: 5px 8px; background: var(--grid-header, #D4D0C8); border: 1px solid var(--grid-border, #808080); }
  .tabla-maestro td { padding: 2px 6px; border: 1px solid var(--grid-border-light, #C0C0C0); background: #fff; }
  .tabla-maestro input, .tabla-maestro select { width: 100%; border: none; background: transparent; padding: 6px 2px; font-size: 13px; min-height: 32px; box-sizing: border-box; }
  .tabla-maestro input:focus, .tabla-maestro select:focus { background: var(--accent-soft); outline: none; border-radius: 4px; }

  /* Control Presupuesto Mensual/Anual: desglose auxiliar y centro (como Crea tú) */
  #tabla-presupuestos tr.presup-cuenta-subtotal td,
  #tabla-presupuesto-mensual tr.presup-cuenta-subtotal td {
    background: var(--accent-soft) !important;
    font-weight: 600;
  }
  #tabla-presupuestos tr.presup-aux td.presup-col-codigo,
  #tabla-presupuestos tr.presup-aux td.presup-col-cuenta,
  #tabla-presupuesto-mensual tr.presup-aux td.presup-col-codigo,
  #tabla-presupuesto-mensual tr.presup-aux td.presup-col-cuenta {
    padding-left: 18px;
  }
  #tabla-presupuestos tr.presup-otros td,
  #tabla-presupuesto-mensual tr.presup-otros td {
    color: #555;
    font-style: italic;
    background: #f7f5ef;
  }
  #tabla-presupuestos tr.presup-otros td.presup-col-codigo,
  #tabla-presupuestos tr.presup-otros td.presup-col-cuenta,
  #tabla-presupuesto-mensual tr.presup-otros td.presup-col-codigo,
  #tabla-presupuesto-mensual tr.presup-otros td.presup-col-cuenta {
    padding-left: 18px;
  }
  # Contraer desglose Informe Control
  #tabla-informe-presupuesto tr.presup-cuenta-subtotal td {
    background: var(--accent-soft) !important;
    font-weight: 600;
  }
  #tabla-informe-presupuesto tr.presup-aux td.presup-col-codigo,
  #tabla-informe-presupuesto tr.presup-aux td.presup-col-cuenta {
    padding-left: 18px;
  }
  #tabla-informe-presupuesto tr.presup-otros td {
    color: #555;
    font-style: italic;
    background: #f7f5ef;
  }
  #tabla-informe-presupuesto tr.presup-otros td.presup-col-codigo,
  #tabla-informe-presupuesto tr.presup-otros td.presup-col-cuenta {
    padding-left: 18px;
  }
  #tabla-informe-presupuesto.presup-desglose-colapsado tr.presup-aux,
  #tabla-informe-presupuesto.presup-desglose-colapsado tr.presup-otros {
    display: none !important;
  }
  .presup-marca-desglose {
    display: inline-block;
    margin-left: 8px;
    font-size: 12px;
    font-weight: 400;
    color: #666;
  }
  /* Contraer desglose: solo cuentas (más compacto) */
  #tabla-presupuestos.presup-desglose-colapsado tr.presup-aux,
  #tabla-presupuestos.presup-desglose-colapsado tr.presup-otros,
  #tabla-presupuesto-mensual.presup-desglose-colapsado tr.presup-aux,
  #tabla-presupuesto-mensual.presup-desglose-colapsado tr.presup-otros {
    display: none;
  }

  /* Control Presupuesto — código / cuenta / montos (todas las pantallas) */
  #tabla-presupuestos,
  #tabla-presupuesto-mensual,
  #tabla-informe-presupuesto,
  #tabla-presupuesto-anual-cuentas,
  #tabla-presupuesto-anual-prov {
    table-layout: fixed;
  }
  #tabla-presupuestos,
  #tabla-presupuesto-mensual {
    width: 100%;
  }
  #tabla-informe-presupuesto,
  #tabla-presupuesto-anual-cuentas,
  #tabla-presupuesto-anual-prov {
    width: 100%;
  }
  /* Crea tú Presupuesto: un solo scroll; títulos + filtros fijos; scrollbar al fondo.
     Importante: display:flex SOLO con .active — si no, anula .page{display:none} y la pantalla queda “pegada”. */
  #page-presupuesto-anual {
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }
  #page-presupuesto-anual.page.active {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  #page-presupuesto-anual > .card {
    max-width: 100%;
    min-width: 0;
  }
  #page-presupuesto-anual .card-header {
    flex-wrap: wrap;
    gap: 8px;
  }
  #page-presupuesto-anual > .card:first-of-type .card-body,
  #page-presupuesto-anual #panual-resumen {
    overflow: visible;
  }
  #page-presupuesto-anual #panual-card-cuentas,
  #page-presupuesto-anual #panual-card-prov {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 210px);
    min-height: 240px;
    overflow: hidden;
  }
  #page-presupuesto-anual .panual-grid-scroll {
    flex: 1 1 auto;
    min-height: 0;
    max-width: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0;
  }
  #tabla-presupuesto-anual-cuentas,
  #tabla-presupuesto-anual-prov {
    table-layout: fixed;
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }
  #page-presupuesto-anual .panual-grid-scroll thead th {
    position: sticky;
    z-index: 5;
    background: var(--grid-header, #D4D0C8);
    background-clip: padding-box;
    box-shadow: 0 1px 0 var(--grid-border, #808080);
  }
  #page-presupuesto-anual .panual-grid-scroll thead tr.panual-titulos th {
    top: 0;
  }
  #page-presupuesto-anual .panual-grid-scroll thead tr.panual-filtros th {
    top: var(--panual-th-h, 26px);
    z-index: 6;
    background: #E8E4D8;
    padding: 2px 3px;
    font-weight: 400;
  }
  #page-presupuesto-anual .panual-filtro {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    font-size: 12px;
    padding: 2px 4px;
    border: 1px solid #a0a0a0;
    background: #fff;
  }
  #tabla-presupuesto-anual-cuentas th.presup-col-monto,
  #tabla-presupuesto-anual-cuentas td.presup-col-monto,
  #tabla-presupuesto-anual-prov th.presup-col-monto,
  #tabla-presupuesto-anual-prov td.presup-col-monto {
    width: 78px;
    min-width: 72px;
    max-width: 84px;
    font-size: 12px;
    padding: 2px 4px;
  }
  #tabla-presupuesto-anual-cuentas th.presup-col-codigo,
  #tabla-presupuesto-anual-cuentas td.presup-col-codigo,
  #tabla-presupuesto-anual-cuentas th.presup-col-cuenta,
  #tabla-presupuesto-anual-cuentas td.presup-col-cuenta,
  #tabla-presupuesto-anual-prov th.presup-col-cuenta,
  #tabla-presupuesto-anual-prov td.presup-col-cuenta {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
  }
  #tabla-presupuesto-anual-cuentas thead th.presup-col-codigo,
  #tabla-presupuesto-anual-cuentas thead th.presup-col-cuenta,
  #tabla-presupuesto-anual-prov thead th.presup-col-cuenta {
    z-index: 7;
    background: var(--grid-header, #D4D0C8);
  }
  #tabla-presupuesto-anual-cuentas thead tr.panual-filtros th.presup-col-codigo,
  #tabla-presupuesto-anual-cuentas thead tr.panual-filtros th.presup-col-cuenta,
  #tabla-presupuesto-anual-prov thead tr.panual-filtros th.presup-col-cuenta {
    background: #E8E4D8;
    z-index: 8;
  }
  #tabla-presupuesto-anual-cuentas th.presup-col-cuenta,
  #tabla-presupuesto-anual-cuentas td.presup-col-cuenta {
    left: 88px;
  }
  #tabla-presupuesto-anual-cuentas td.presup-col-monto input.panual-cta-monto,
  #tabla-presupuesto-anual-cuentas td.presup-col-monto input.panual-mes-monto,
  #tabla-presupuesto-anual-prov td.presup-col-monto input {
    text-align: right;
    font-size: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 1px 3px;
  }
  #tabla-presupuesto-anual-cuentas tr.panual-cuenta-subtotal td {
    background: var(--accent-soft) !important;
    font-weight: 600;
  }
  #tabla-presupuesto-anual-cuentas tr.panual-aux td.presup-col-codigo,
  #tabla-presupuesto-anual-cuentas tr.panual-aux td.presup-col-cuenta {
    padding-left: 18px;
  }
  #tabla-presupuesto-anual-cuentas tr.panual-otros td {
    color: #555;
    font-style: italic;
    background: #f7f5ef;
  }
  #tabla-presupuesto-anual-cuentas tr.panual-otros td.presup-col-codigo,
  #tabla-presupuesto-anual-cuentas tr.panual-otros td.presup-col-cuenta {
    padding-left: 18px;
  }
  #tabla-presupuesto-anual-cuentas .panual-btn-add-aux {
    font-size: 12px;
    padding: 1px 6px;
    margin-left: 6px;
  }
  #tabla-presupuesto-anual-cuentas.presup-desglose-colapsado tr.panual-aux,
  #tabla-presupuesto-anual-cuentas.presup-desglose-colapsado tr.panual-otros {
    display: none !important;
  }
  .panual-check-list label.panual-check-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 5px 4px;
    font-size: 13px;
    cursor: pointer;
    border-radius: 4px;
  }
  .panual-check-list label.panual-check-item:hover {
    background: #f3f0e8;
  }
  .panual-check-list label.panual-check-item input {
    margin-top: 2px;
  }
  .panual-check-list .panual-check-meta {
    color: #666;
    font-size: 12px;
  }
  .panual-tipo-menu,
  .presup-tipo-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 50;
  }
  /* Menú portaleado a body al abrir (ver _presupToggleTipoMenu) */
  .presup-tipo-menu.presup-tipo-menu--floating {
    position: fixed !important;
    z-index: 20000 !important;
    margin-top: 0 !important;
    background: #fff;
    border: 1px solid var(--grey-300, #ccc);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    padding: 6px;
    min-width: 180px;
  }
  .presup-tipo-wrap {
    position: relative;
    z-index: 11;
  }
  .panual-tipo-menu label.panual-check-item,
  .presup-tipo-menu label.presup-check-item,
  .presup-tipo-menu label.panual-check-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    margin: 0;
    font-size: 13px;
    cursor: pointer;
    border-radius: 4px;
    white-space: nowrap;
  }
  .panual-tipo-menu label.panual-check-item:hover,
  .presup-tipo-menu label.presup-check-item:hover,
  .presup-tipo-menu label.panual-check-item:hover {
    background: #f3f0e8;
  }
  .panual-tipo-menu label.panual-check-item input,
  .presup-tipo-menu label.presup-check-item input,
  .presup-tipo-menu label.panual-check-item input {
    flex: 0 0 auto;
    margin: 0;
  }
  #tabla-presupuestos th.presup-col-modo,
  #tabla-presupuestos td.presup-col-modo,
  #tabla-presupuesto-mensual th.presup-col-modo,
  #tabla-presupuesto-mensual td.presup-col-modo {
    width: 100px;
    min-width: 100px;
    max-width: 110px;
  }
  #tabla-presupuestos th.presup-col-codigo,
  #tabla-presupuestos td.presup-col-codigo,
  #tabla-presupuesto-mensual th.presup-col-codigo,
  #tabla-presupuesto-mensual td.presup-col-codigo,
  #tabla-informe-presupuesto th.presup-col-codigo,
  #tabla-informe-presupuesto td.presup-col-codigo,
  #tabla-presupuesto-anual-cuentas th.presup-col-codigo,
  #tabla-presupuesto-anual-cuentas td.presup-col-codigo {
    width: 88px;
    min-width: 88px;
    max-width: 88px;
  }
  #tabla-presupuestos th.presup-col-cuenta,
  #tabla-presupuestos td.presup-col-cuenta,
  #tabla-presupuesto-mensual th.presup-col-cuenta,
  #tabla-presupuesto-mensual td.presup-col-cuenta,
  #tabla-informe-presupuesto th.presup-col-cuenta,
  #tabla-informe-presupuesto td.presup-col-cuenta,
  #tabla-presupuesto-anual-cuentas th.presup-col-cuenta,
  #tabla-presupuesto-anual-cuentas td.presup-col-cuenta,
  #tabla-presupuesto-anual-prov th.presup-col-cuenta,
  #tabla-presupuesto-anual-prov td.presup-col-cuenta {
    width: 200px;
    min-width: 160px;
    max-width: 220px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.25;
  }
  #tabla-presupuestos th.presup-col-monto,
  #tabla-presupuesto-mensual th.presup-col-monto,
  #tabla-informe-presupuesto th.presup-col-monto,
  #tabla-presupuesto-anual-cuentas th.presup-col-monto,
  #tabla-presupuesto-anual-prov th.presup-col-monto {
    width: 110px;
    min-width: 96px;
    max-width: 110px;
    font-size: 12px;
    line-height: 1.2;
    text-align: right;
    white-space: normal;
    vertical-align: bottom;
    padding: 4px 6px;
  }
  #tabla-presupuestos td.presup-col-monto,
  #tabla-presupuesto-mensual td.presup-col-monto,
  #tabla-informe-presupuesto td.presup-col-monto,
  #tabla-presupuesto-anual-cuentas td.presup-col-monto,
  #tabla-presupuesto-anual-prov td.presup-col-monto {
    width: 110px;
    min-width: 96px;
    max-width: 110px;
    text-align: right;
  }
  #tabla-presupuestos td.presup-col-monto input,
  #tabla-presupuesto-mensual td.presup-col-monto input,
  #tabla-presupuesto-anual-prov td.presup-col-monto input {
    text-align: right;
    font-size: 12px;
  }
  #tabla-presupuestos th.presup-col-avance,
  #tabla-presupuestos td.presup-col-avance,
  #tabla-presupuesto-mensual th.presup-col-avance,
  #tabla-presupuesto-mensual td.presup-col-avance,
  #tabla-informe-presupuesto th.presup-col-avance,
  #tabla-informe-presupuesto td.presup-col-avance,
  #tabla-presupuesto-anual-cuentas th.presup-col-avance,
  #tabla-presupuesto-anual-cuentas td.presup-col-avance,
  #tabla-presupuesto-anual-prov th.presup-col-avance,
  #tabla-presupuesto-anual-prov td.presup-col-avance {
    width: 72px;
    min-width: 72px;
    max-width: 72px;
    padding: 2px 4px;
  }
  #tabla-presupuestos th.presup-col-avance,
  #tabla-presupuesto-mensual th.presup-col-avance,
  #tabla-informe-presupuesto th.presup-col-avance,
  #tabla-presupuesto-anual-cuentas th.presup-col-avance,
  #tabla-presupuesto-anual-prov th.presup-col-avance {
    font-size: 12px;
    text-align: center;
  }
  #tabla-presupuestos td.presup-col-avance .presup-avance-wrap,
  #tabla-presupuesto-mensual td.presup-col-avance .presup-avance-wrap,
  #tabla-informe-presupuesto td.presup-col-avance .presup-avance-wrap,
  #tabla-presupuesto-anual-cuentas td.presup-col-avance .presup-avance-wrap,
  #tabla-presupuesto-anual-prov td.presup-col-avance .presup-avance-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    max-width: 64px;
  }
  #tabla-presupuestos td.presup-col-avance .presup-avance-bar,
  #tabla-presupuesto-mensual td.presup-col-avance .presup-avance-bar,
  #tabla-informe-presupuesto td.presup-col-avance .presup-avance-bar,
  #tabla-presupuesto-anual-cuentas td.presup-col-avance .presup-avance-bar,
  #tabla-presupuesto-anual-prov td.presup-col-avance .presup-avance-bar {
    background: var(--grey-200);
    border-radius: 3px;
    height: 6px;
    min-width: 0;
    width: 100%;
  }
  #tabla-presupuesto-mensual td.presup-saldo-negativo {
    color: var(--red-500, #C53030);
    font-weight: 700;
  }
  #cfg-panel-rrhh .mc-cuenta-cell { display: flex; gap: 4px; align-items: center; min-width: 280px; position: relative; z-index: 1; }
  #cfg-panel-rrhh .mc-cuenta-cell:focus-within { z-index: 25; }
  #cfg-panel-rrhh .field:has(> .mc-input-cuenta) { position: relative; }
  #cfg-panel-rrhh .mc-input-cuenta {
    flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid var(--grey-200); border-radius: 6px;
    font-size: 13px; background: #fff; cursor: text;
  }
  #cfg-panel-rrhh .mc-input-cuenta[readonly] { cursor: pointer; background: #fff; }
  #cfg-panel-rrhh .mc-input-cuenta:focus { border-color: var(--accent); outline: none; background: var(--accent-soft); }
  #cfg-panel-rrhh .mc-input-cuenta.mc-cuenta-invalida { border-color: var(--red); background: var(--red-soft); }
  #cfg-panel-rrhh .field .mc-input-cuenta { width: 100%; }
  #cfg-panel-rrhh .mc-ac-drop {
    position: absolute; left: 0; right: 36px; top: calc(100% + 2px); z-index: 80;
    background: #fff; border: 1px solid var(--grey-200); border-radius: 6px;
    box-shadow: var(--shadow); max-height: min(420px, 55vh); overflow-y: auto;
  }
  #cfg-panel-rrhh .field > .mc-ac-drop { right: 0; }
  #cfg-panel-rrhh .mc-ac-item {
    padding: 7px 10px; font-size: 12px; cursor: pointer; border-bottom: 1px solid var(--grey-100);
  }
  #cfg-panel-rrhh .mc-ac-item:hover, #cfg-panel-rrhh .mc-ac-item.activo { background: var(--accent-soft); }
  #cfg-panel-rrhh .mc-ac-item code { font-size: 12px; color: var(--ink, #333); margin-right: 6px; }
  #cfg-panel-rrhh .mc-ac-vacio { padding: 10px; font-size: 12px; color: var(--grey-400); }

  .autocomplete-resultados {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 40; margin-top: 2px;
    background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--radius);
    box-shadow: var(--shadow); max-height: 240px; overflow-y: auto;
  }
  .autocomplete-item { padding: 8px 12px; font-size: 13px; cursor: pointer; border-bottom: 1px solid var(--grey-100); }
  .autocomplete-item:last-child { border-bottom: none; }
  .autocomplete-item:hover { background: var(--accent-soft); }
  .autocomplete-item strong { color: var(--ink, #333); }
  input.rut-invalido, select.rut-invalido {
    border-color: var(--red, #c0392b) !important;
    background: #fff5f5;
  }
  .autocomplete-vacio { padding: 10px 12px; font-size: 12px; color: var(--grey-400); }

  /* Mantención de Empresas — secciones y grilla jurídica */
  #modal-ficha-empresa .fe-sec-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .45px;
    color: var(--title-color, #8B1A1A);
    margin: 18px 0 10px;
    padding: 0 0 6px;
    border-bottom: 1px solid var(--grid-border-light, #C0C0C0);
  }
  #modal-ficha-empresa .fe-panel > .fe-sec-title:first-child { margin-top: 0; }
  #modal-ficha-empresa .fe-sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 18px 0 10px;
    padding: 0 0 6px;
    border-bottom: 1px solid var(--grid-border-light, #C0C0C0);
  }
  #modal-ficha-empresa .fe-sec-head .fe-sec-title {
    margin: 0;
    padding: 0;
    border: none;
  }
  #modal-ficha-empresa .fe-rut-grid {
    display: grid;
    grid-template-columns: 64px minmax(110px, 140px) 52px minmax(160px, 1fr);
    gap: 8px 10px;
    align-items: center;
    margin-bottom: 4px;
  }
  #modal-ficha-empresa .fe-rut-grid .fe-col-h {
    font-size: 12px;
    font-weight: 600;
    color: var(--grey-600);
    text-transform: uppercase;
    letter-spacing: .03em;
  }
  #modal-ficha-empresa .fe-rut-grid .fe-ord {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink, #333);
    text-align: right;
    padding-right: 4px;
  }
  #modal-ficha-empresa .fe-rut-grid input {
    width: 100%;
    min-width: 0;
  }
  #modal-ficha-empresa .fe-radio-box {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    padding: 10px 12px;
    margin-bottom: 2px;
    background: var(--grey-50, #F5F2EA);
    border: 1px solid var(--grey-100, #E8E4D8);
  }
  #modal-ficha-empresa .fe-radio-box label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 400;
    margin: 0;
    white-space: nowrap;
  }
  #modal-ficha-empresa .fe-regimen-grid {
    display: grid;
    grid-template-columns: 90px minmax(180px, 1fr) 120px auto;
    gap: 8px 10px;
    align-items: center;
    margin-bottom: 8px;
  }
  #modal-ficha-empresa .fe-regimen-grid .fe-col-h {
    font-size: 12px;
    font-weight: 600;
    color: var(--grey-600);
    text-transform: uppercase;
  }
  #modal-ficha-empresa .fe-regimen-grid input,
  #modal-ficha-empresa .fe-regimen-grid select {
    width: 100%;
    min-width: 0;
  }

  .f29-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
  .f29-seccion-ui { background: var(--grey-50, #f8fafc); border: 1px solid var(--grey-100); border-radius: var(--radius); padding: 14px; }
  .tabla-f29 { width: 100%; border-collapse: collapse; }
  .tabla-f29 td { padding: 6px 4px; border-bottom: 1px solid var(--grey-100); font-size: 13px; }
  .tabla-f29 td:first-child { color: var(--grey-600); }
  .tabla-f29 td:last-child { text-align: right; width: 140px; }
  .tabla-f29 input { width: 100%; text-align: right; border: 1.5px solid var(--grey-200); border-radius: 6px; padding: 5px 8px; font-size: 13px; }
  .tabla-f29 input:disabled { background: var(--grey-100); color: var(--grey-400); }
  .tabla-f29 .f29-fila-total td { font-weight: 700; color: var(--ink, #333); border-top: 2px solid var(--grey-200); border-bottom: none; }
  .f29-total-card {
    display: flex; justify-content: space-between; align-items: center;
    background: #D4D0C8; color: #000; border: 1px solid #808080; border-radius: 0;
    padding: 16px 20px; font-weight: 800; font-size: 15px;
  }
  .f29-total-card span:last-child { font-size: 24px; }
  @media (max-width: 900px) { .f29-grid { grid-template-columns: 1fr; } }

  .banner-advertencias-presupuesto {
    position: fixed; top: 16px; right: 16px; z-index: 500; width: 360px;
    max-height: 70vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px;
  }
  .banner-advertencias-presupuesto .item {
    background: #fef3c7; border: 1px solid #f59e0b; color: #92400e;
    border-radius: var(--radius); padding: 12px 14px; font-size: 13px; box-shadow: var(--shadow);
    position: relative; padding-right: 30px;
  }
  .banner-advertencias-presupuesto .item .cerrar {
    position: absolute; top: 8px; right: 10px; cursor: pointer; font-weight: 700; opacity: .6; background: none; border: none; font-size: 14px; color: #92400e;
  }
  .banner-advertencias-presupuesto .item .cerrar:hover { opacity: 1; }
  .banner-advertencias-presupuesto .item strong { display: block; margin-bottom: 2px; }
  .field { display: flex; flex-direction: column; gap: 5px; }
  .field > .btn { align-self: flex-start; width: auto; }
  .field label { font-size: 12px; font-weight: 600; color: var(--grey-600); }
  .field input, .field select, .field textarea {
    padding: 8px 10px; border: 1px solid var(--grid-border, #808080); border-radius: var(--radius);
    font-size: 13px; outline: none; transition: border-color .2s; background: var(--white);
    min-height: 32px; box-sizing: border-box;
  }
  .field input:focus, .field select:focus, .field textarea:focus {
    border-color: var(--accent); box-shadow: 0 0 0 2px var(--theme-accent-glow);
  }
  .field input.pp-num { text-align: right; font-variant-numeric: tabular-nums; }
  .field textarea { resize: vertical; min-height: 80px; }

  /* Homologación visual: cualquier campo de período (MM/AAAA) debe verse
     explícitamente como un dropdown, con la misma flecha que el selector
     de "Empresa activa"/"Período" del sidebar — aunque técnicamente siga
     siendo un <input> de texto con máscara (initPeriodoInput), no un
     <select>, para no perder la edición libre de mes/año en pantallas de
     operación e informes. Una sola regla homologa TODOS los campos de
     período del sistema, porque todos comparten la clase .input-periodo. */
  .field input.input-periodo {
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%2394A3B8' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 11px 7px;
    padding-right: 30px;
  }
  .field input.input-periodo:focus {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%232563EB' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  }

  /* Selector de calendario global — un único componente compartido por
     TODOS los campos de período (.input-periodo) de todo el sistema, sin
     depender de qué datos existan en ninguna tabla en particular (es solo
     un calendario estándar Mes/Año, ver abrirPeriodoPicker en el JS). */
  .periodo-picker-popover {
    position: absolute; z-index: 200; background: var(--white); border: 1px solid var(--grey-200);
    border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px; width: 220px;
  }
  .periodo-picker-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-weight: 700; color: var(--ink, #333); font-size: 14px; }

  /* Liquidación de sueldos — flujo paso a paso */
  .liq-intro {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 14px; margin-bottom: 14px;
    background: linear-gradient(135deg, #fff 0%, #f8fbff 100%);
    border: 1px solid #c8d8ea; border-left: 4px solid var(--navy, #1a365d);
    border-radius: 8px;
  }
  .liq-intro-icon { font-size: 22px; line-height: 1; margin-top: 2px; }
  .liq-intro-tit { font-size: 13px; font-weight: 700; color: var(--navy, #1a365d); margin-bottom: 4px; }
  .liq-intro-sub { font-size: 12px; color: var(--grey-600, #555); line-height: 1.5; }
  .liq-pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
  @media (max-width: 720px) { .liq-pasos { grid-template-columns: 1fr; } }
  .liq-paso {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 8px;
    background: #fff; border: 1px solid var(--grid-border, #c5c5c5);
    font-size: 12px; color: var(--grey-600, #666);
    transition: border-color .15s, box-shadow .15s;
  }
  .liq-paso-num {
    flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800; color: #fff; background: var(--grey-400, #9ca3af);
  }
  .liq-paso-body { min-width: 0; }
  .liq-paso-body strong {
    display: block; font-size: 12px; text-transform: uppercase;
    letter-spacing: 0.04em; margin-bottom: 1px; color: var(--grey-500, #888);
  }
  .liq-paso-body span { display: block; font-size: 12px; font-weight: 600; color: var(--ink, #333); line-height: 1.25; }
  .liq-paso.active { border-color: var(--navy, #1a365d); background: #f0f6ff; box-shadow: 0 1px 4px rgba(26, 54, 93, 0.12); }
  .liq-paso.active .liq-paso-num { background: var(--navy, #1a365d); }
  .liq-paso.active .liq-paso-body strong { color: var(--navy, #1a365d); }
  .liq-paso.done { border-color: #86efac; background: #f0fdf4; }
  .liq-paso.done .liq-paso-num { background: #16a34a; color: transparent; position: relative; }
  .liq-paso.done .liq-paso-num::before {
    content: '✓'; color: #fff; position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center; font-size: 14px;
  }
  .liq-card-body { padding: 16px 18px !important; }
  .liq-card-toggle {
    cursor: pointer; user-select: none;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
  }
  .liq-card-toggle h3 { margin: 0; }
  .liq-card-chevron {
    font-size: 14px; line-height: 1; transition: transform .2s ease;
    color: var(--title-color, #8B1A1A); flex-shrink: 0; opacity: 0.85;
  }
  .liq-card-collapsed .liq-card-toggle { border-bottom: none; }
  .liq-zona-calculo.liq-zona-oculta { display: none; }
  #btn-liq-vista { white-space: nowrap; }
  .liq-seccion { margin-bottom: 18px; }
  .liq-seccion-tit {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--title-color, #8B1A1A);
    margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid #ddd;
  }
  .liq-seccion-hint { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--grey-500, #888); font-size: 12px; margin-left: 6px; }
  .liq-filtros { display: grid; grid-template-columns: 140px 1fr 110px; gap: 12px; align-items: end; }
  @media (max-width: 720px) { .liq-filtros { grid-template-columns: 1fr; } }
  .liq-filtros .field { margin: 0; }
  .liq-filtros label { font-size: 12px; font-weight: 600; color: var(--grey-600, #555); }
  .liq-filtros input, .liq-filtros select {
    width: 100%; padding: 8px 10px; font-size: 13px;
    border: 1px solid var(--grid-border, #808080); border-radius: 6px; background: #fff;
  }
  .liq-trab-banner {
    padding: 10px 12px; margin-bottom: 14px;
    background: #fff; border: 1px solid #bfdbfe; border-left: 4px solid #2563eb;
    border-radius: 8px; font-size: 12px; line-height: 1.55; color: var(--grey-700, #444);
  }
  .liq-trab-banner strong { color: var(--navy, #1a365d); font-weight: 600; }
  .liq-haberes-panel { background: #fff; border: 1px solid var(--grid-border, #c5c5c5); border-radius: 8px; overflow: hidden; }
  .liq-concepto-nota { display: block; font-size: 12px; font-weight: 400; color: var(--grey-500, #888); margin-top: 1px; }
  .liq-celda-sueldo { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink, #222); }
  .liq-hoja { width: 100%; border-collapse: collapse; font-size: 13px; }
  .liq-haberes-tabla th, .liq-haberes-tabla td { padding: 8px 12px; }
  .liq-hoja th, .liq-hoja td { padding: 6px 10px; border: 1px solid var(--grid-border-light, #C0C0C0); }
  .liq-haberes-tabla th, .liq-haberes-tabla td { border-left: none; border-right: none; }
  .liq-haberes-tabla tbody tr { border-bottom: 1px solid #eee; }
  .liq-haberes-tabla tbody tr:last-child { border-bottom: none; }
  .liq-haberes-tabla tbody tr:nth-child(even) { background: #fafafa; }
  .liq-hoja th {
    text-align: left; color: #000; font-weight: 700; font-size: 12px;
    background: var(--grid-header, #D4D0C8); text-transform: uppercase;
  }
  .liq-haberes-tabla th { background: #f5f5f5; color: var(--grey-600, #555); }
  .liq-hoja td.num-right { text-align: right; white-space: nowrap; }
  .liq-hoja #liq-sueldo-display, .liq-hoja .liq-celda-sueldo {
    font-family: "Public Sans", "Segoe UI", Arial, sans-serif;
    font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: #000;
  }
  .liq-hoja input.input-monto-clp {
    width: 140px; max-width: 100%; text-align: right; padding: 6px 8px; margin: 0;
    font-family: "Public Sans", "Segoe UI", Arial, sans-serif;
    font-size: 13px; font-weight: 400; line-height: 1.35;
    font-variant-numeric: tabular-nums; color: #000; background: #fff;
    border: 1px solid #b0b0b0; border-radius: 6px;
    box-sizing: border-box; min-height: 0; height: auto; box-shadow: none; outline: none;
  }
  .liq-hoja input.input-monto-clp:focus { border-color: #2563eb; outline: 2px solid rgba(37, 99, 235, 0.2); }
  .input-monto-clp {
    text-align: right; font-family: "Public Sans", "Segoe UI", Arial, sans-serif;
    font-size: 13px; font-weight: 400; font-variant-numeric: tabular-nums;
  }
  .liq-barra-acciones {
    display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: space-between;
    margin-top: 4px; padding-top: 16px; border-top: 1px solid #ddd;
  }
  .liq-barra-grupo { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
  .liq-resultado-panel {
    margin-top: 18px; padding: 14px 16px;
    background: #fff; border: 1px solid #c8d8ea; border-radius: 8px;
    box-shadow: 0 1px 4px rgba(26, 54, 93, 0.08);
  }
  .liq-resultado-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
  .liq-resultado-head h4 { margin: 0; font-size: 14px; color: var(--navy, #1a365d); }
  .liq-resultado-icon { font-size: 18px; }
  .liq-resumen-dos-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  @media (max-width: 900px) { .liq-resumen-dos-col { grid-template-columns: 1fr; } }
  .liq-resumen-col { background: #fafafa; border: 1px solid #e5e5e5; border-radius: 8px; overflow: hidden; }
  .liq-col-titulo {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    padding: 8px 12px; margin: 0; letter-spacing: 0.04em;
  }
  .liq-col-haberes { background: #ecfdf5; color: #166534; border-bottom: 1px solid #bbf7d0; }
  .liq-col-desc { background: #fef2f2; color: #991b1b; border-bottom: 1px solid #fecaca; }
  .liq-liquido-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 14px; padding: 12px 16px; border-radius: 8px;
    background: linear-gradient(135deg, #166534 0%, #15803d 100%); color: #fff;
  }
  .liq-liquido-bar span { font-size: 13px; font-weight: 600; }
  .liq-liquido-bar strong { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
  .liq-cargos-intro {
    font-size: 12px; color: var(--grey-600, #555); line-height: 1.45;
    margin-bottom: 12px; padding: 8px 10px;
    background: #f8fafc; border-radius: 6px; border-left: 3px solid #b45309;
  }
  .liq-cargos-empty {
    text-align: center; padding: 28px 16px; color: var(--grey-500, #888);
    background: #fafafa; border: 1px dashed #ccc; border-radius: 8px;
  }
  .liq-cargos-empty-icon { font-size: 28px; display: block; margin-bottom: 8px; opacity: 0.7; }
  .liq-cargos-empty p { margin: 0; font-size: 13px; line-height: 1.45; }
  .liq-cargos-panel { background: #fff; border: 1px solid var(--grid-border, #c5c5c5); border-radius: 8px; overflow: hidden; }
  .liq-cargos-panel tfoot td { background: #fff7ed; font-weight: 700; }
  .liq-info-trab { font-size: 13px; line-height: 1.6; }

  /* Haberes y Descuentos — panel único compacto */
  #liq-tab-conceptos { min-width: 0; }
  .ca-shell {
    width: 100%; max-width: none; min-width: 0;
    margin: 0;
  }
  .ca-shell .ca-intro { margin-bottom: 8px; }
  .ca-intro {
    display: block; width: 100%; min-width: 0; box-sizing: border-box;
    padding: 6px 10px;
    background: linear-gradient(135deg, #fff 0%, #f8fbff 100%);
    border: 1px solid #c8d8ea; border-left: 3px solid var(--navy, #1a365d);
    border-radius: 6px;
  }
  .ca-intro-summary {
    display: flex; align-items: center; gap: 6px; cursor: pointer;
    list-style: none; min-width: 0;
  }
  .ca-intro-summary::-webkit-details-marker { display: none; }
  .ca-intro-icon { font-size: 16px; line-height: 1; flex-shrink: 0; }
  .ca-intro-tit { font-size: 12px; font-weight: 700; color: var(--navy, #1a365d); min-width: 0; }
  .ca-intro-hint {
    margin-left: auto; font-size: 12px; color: var(--grey-500, #888);
    white-space: nowrap; flex-shrink: 0;
  }
  .ca-intro[open] .ca-intro-hint { display: none; }
  .ca-intro-sub {
    margin-top: 6px; padding-top: 6px; border-top: 1px dashed #d0dbe8;
    font-size: 12px; color: var(--grey-600, #555); line-height: 1.45;
    overflow-wrap: anywhere;
  }
  .ca-panel { margin-bottom: 12px !important; }
  .ca-panel .card-header {
    flex-wrap: wrap; gap: 6px; padding: 8px 12px;
  }
  .ca-panel .card-header h3 {
    flex: 1 1 auto; min-width: 0; font-size: 13px; margin: 0;
  }
  .ca-panel .ca-card-body {
    padding: 10px 12px !important;
    background: #fff;
  }
  .ca-tipo-pills { display: flex; gap: 3px; flex-wrap: wrap; flex-shrink: 0; }
  .ca-tipo-pill { cursor: pointer; margin: 0; }
  .ca-tipo-pill input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
  .ca-tipo-pill span {
    display: inline-block; padding: 3px 9px; font-size: 12px; font-weight: 600;
    border-radius: 999px; border: 1px solid var(--grid-border, #c5c5c5);
    background: #fff; color: var(--grey-600, #666);
  }
  .ca-tipo-pill input:checked + span {
    background: var(--navy, #1a365d); color: #fff; border-color: var(--navy, #1a365d);
  }
  #liq-tab-conceptos .ca-form-grid {
    display: flex; flex-direction: column; gap: 6px;
    width: 100%; min-width: 0;
  }
  #liq-tab-conceptos .ca-form-row {
    display: grid; gap: 6px 8px; align-items: start; min-width: 0; width: 100%;
  }
  #liq-tab-conceptos .ca-form-row-principal {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  #liq-tab-conceptos .ca-form-row-valores {
    grid-template-columns: 150px 150px 120px minmax(0, 1fr);
    align-items: end;
  }
  #liq-tab-conceptos .ca-form-grid .field {
    margin: 0; min-width: 0; max-width: 100%; contain: inline-size;
  }
  #liq-tab-conceptos .ca-form-grid label {
    font-size: 12px; font-weight: 600; color: var(--grey-600, #555);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #liq-tab-conceptos .ca-form-grid input,
  #liq-tab-conceptos .ca-form-grid select {
    display: block; width: 100% !important; max-width: 100% !important;
    min-width: 0 !important; box-sizing: border-box;
    padding: 5px 7px; font-size: 12px;
    border: 1px solid var(--grid-border, #808080); border-radius: 5px; background: #fff;
  }
  #liq-tab-conceptos .ca-field-hint {
    font-size: 12px; margin-top: 2px; line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  #liq-tab-conceptos .ca-field-hint-muted { color: var(--grey-500, #888); }
  #liq-tab-conceptos .ca-field-hint-accent { color: var(--navy, #1a365d); font-weight: 600; }
  .ca-check-label {
    display: flex; align-items: center; gap: 6px; font-size: 12px;
    cursor: pointer; margin: 0; color: var(--ink, #333);
  }
  .ca-check-label input { width: auto; flex-shrink: 0; }
  #liq-tab-conceptos .ca-field-prestamo { grid-column: 1 / -1; }
  @media (max-width: 480px) {
    .ca-shell { max-width: 100%; }
    #liq-tab-conceptos .ca-form-row-principal,
    #liq-tab-conceptos .ca-form-row-valores { grid-template-columns: 1fr; }
  }
  .ca-mapeo-panel {
    margin: 6px 0 0; padding: 8px 10px;
    background: #f8fafc; border: 1px solid #dbeafe; border-radius: 6px;
  }
  .ca-mapeo-panel > label {
    display: block; font-size: 12px; font-weight: 700; text-transform: uppercase;
    color: var(--grey-600, #555); margin-bottom: 6px;
  }
  .ca-mapeo-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
  .ca-mapeo-row select { flex: 1; min-width: 0; max-width: 100%; }
  .ca-barra-acciones {
    display: flex; gap: 4px; flex-wrap: wrap; align-items: center;
    padding-top: 6px; margin-top: 6px; border-top: 1px solid #ddd;
  }
  .ca-barra-acciones .btn { padding: 4px 8px; font-size: 12px; line-height: 1.2; }
  .ca-tabla-sep {
    margin: 10px 0 6px; padding-top: 8px; border-top: 1px solid #ccc;
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--title-color, #8B1A1A);
  }
  .ca-tabla-wrap {
    display: block; width: 100%; max-width: 100%; min-width: 0;
    overflow-x: auto; background: #fff;
    border: 1px solid #e0e0e0; border-radius: 6px;
  }
  .ca-tabla-asignaciones {
    font-size: 12px; width: 100%; table-layout: fixed; border-collapse: collapse;
  }
  .ca-tabla-asignaciones thead th {
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em;
    background: #f5f5f5; color: var(--grey-600, #555);
    padding: 5px 6px; border-bottom: 1px solid #e0e0e0;
  }
  .ca-tabla-asignaciones td { vertical-align: middle; padding: 5px 6px; border-bottom: 1px solid #eee; font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
  .ca-tabla-asignaciones tbody tr:last-child td { border-bottom: none; }
  .ca-tabla-asignaciones tbody tr:nth-child(even) { background: #fafafa; }
  .ca-tabla-asignaciones .ca-col-concepto { width: 26%; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ca-tabla-asignaciones .ca-col-monto { width: 12%; white-space: nowrap; }
  .ca-tabla-asignaciones .ca-col-temp { width: 11%; font-size: 12px; white-space: nowrap; }
  .ca-tabla-asignaciones .ca-col-desde { width: 9%; white-space: nowrap; }
  .ca-tabla-asignaciones .ca-col-cuotas { width: 6%; white-space: nowrap; }
  .ca-tabla-asignaciones .ca-col-estado { width: 10%; white-space: nowrap; }
  .ca-tabla-asignaciones .ca-col-notas {
    width: 14%; font-size: 12px; color: var(--grey-500, #888);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .ca-tabla-asignaciones .ca-col-acciones { width: 12%; white-space: nowrap; }
  .ca-tabla-asignaciones .ca-col-acciones .btn { padding: 2px 6px; font-size: 12px; }
  .ca-empty-state {
    text-align: center; padding: 10px 8px; color: var(--grey-500, #888);
  }
  .ca-empty-icon { font-size: 22px; display: block; margin-bottom: 4px; opacity: 0.65; }
  .ca-empty-state p { margin: 0; font-size: 12px; line-height: 1.35; }
  .ca-loading-state {
    text-align: center; padding: 28px 16px; color: var(--grey-500, #888);
  }
  .ca-loading-state p { margin: 10px 0 0; font-size: 12px; }

  /* Inventario — listados y maestros (productos, familias, bodegas) */
  .inv-list-head { flex-shrink: 0; }
  .inv-list-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
  }
  .inv-list-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
  .inv-list-title h3 { margin: 0; }
  .inv-list-meta {
    font-size: 12px; font-weight: 500; color: var(--grey-600, #64748b);
    white-space: nowrap;
  }
  .inv-list-header-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
  .inv-list-toolbar {
    display: grid;
    grid-template-columns: 88px minmax(160px, 1fr) minmax(120px, 180px) auto;
    gap: 10px 14px;
    align-items: end;
    padding: 10px 14px 12px;
    background: linear-gradient(180deg, #f8f7f2 0%, #f0efe8 100%);
    border-top: 1px solid rgba(0,0,0,0.08);
  }
  .inv-list-toolbar .field { margin: 0; }
  .inv-list-toolbar label { font-size: 12px; margin-bottom: 3px; }
  .inv-field-sm select { width: 100%; height: 34px; box-sizing: border-box; }
  .inv-field-md select { width: 100%; height: 34px; box-sizing: border-box; }
  .inv-field-search input { width: 100%; height: 34px; box-sizing: border-box; }
  .inv-check-inline {
    display: flex; align-items: center; gap: 6px; font-weight: 400; font-size: 12.5px;
    margin: 0 0 6px; white-space: nowrap; cursor: pointer; color: var(--ink, #333);
  }
  .inv-check-inline input { width: auto; margin: 0; }
  
  .inv-page-maestros .inv-alert-compact { margin-bottom: 12px; padding: 10px 14px; font-size: 12.5px; }
  .inv-maestro-card { margin-bottom: 14px; }
  .inv-maestro-card:last-child { margin-bottom: 0; }
  .inv-card-body-table { padding: 0 !important; }
  .inv-tabla { table-layout: fixed; width: 100%; margin: 0; }
  .inv-tabla th, .inv-tabla td {
    padding: 8px 10px; vertical-align: middle; font-size: 12.5px;
    border-bottom: 1px solid var(--grey-100, #e8e8e8);
  }
  .inv-tabla thead th {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.03em; white-space: nowrap;
  }
  .inv-tabla tbody tr:nth-child(even) { background: rgba(0,0,0,0.018); }
  .inv-tabla tbody tr:hover { background: var(--accent-soft, #eff6ff); }
  .inv-tabla .col-codigo { width: 102px; }
  .inv-tabla .col-tipo { width: 50px; text-align: center; }
  .inv-tabla .col-tipo-wide { width: 130px; }
  .inv-tabla .col-familia { width: 110px; }
  .inv-tabla .col-um { width: 44px; text-align: center; }
  .inv-tabla .col-precio { width: 92px; }
  .inv-tabla .col-estado { width: 76px; text-align: center; }
  .inv-tabla .col-accion { width: 100px; text-align: right; }
  /* Productos: nombre acotado; familia absorbe espacio sobrante */
  #tabla-productos col.col-codigo { width: 102px; }
  #tabla-productos col.col-nombre { width: 200px; }
  #tabla-productos col.col-tipo { width: 50px; }
  #tabla-productos col.col-familia { width: auto; }
  #tabla-productos col.col-um { width: 44px; }
  #tabla-productos col.col-precio { width: 92px; }
  #tabla-productos col.col-estado { width: 76px; }
  #tabla-productos col.col-accion { width: 100px; }
  #tabla-productos thead th {
    text-align: center !important;
  }
  #tabla-productos thead th .sort-ind {
    margin-left: 2px;
  }
  #tabla-productos .col-nombre {
    width: 200px; max-width: 200px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  #tabla-productos .col-familia {
    min-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .inv-codigo-pill {
    display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
    font-size: 12px; font-weight: 600; font-family: inherit;
    background: var(--grey-100, #f1f5f9); padding: 3px 8px; border-radius: 4px;
    white-space: nowrap; vertical-align: middle;
  }
  .inv-tipo-badge {
    display: inline-block; min-width: 30px; padding: 2px 7px; border-radius: 4px;
    font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-align: center;
    background: var(--accent-soft, #eff6ff); color: var(--accent, #2563eb);
  }
  .inv-cell-ellipsis {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 0;
  }
  .inv-cell-muted { color: var(--grey-600, #64748b); font-size: 12px; }
  .inv-acciones {
    display: flex; gap: 2px; justify-content: flex-end; flex-wrap: nowrap;
  }
  .inv-acciones .btn { padding: 4px 6px; min-width: 28px; line-height: 1; }
  @media (max-width: 900px) {
    .inv-list-toolbar {
      grid-template-columns: 1fr 1fr;
    }
    .inv-field-search { grid-column: 1 / -1; }
  }
  @media (max-width: 520px) {
    .inv-list-toolbar { grid-template-columns: 1fr; }
    .inv-list-header-actions { width: 100%; justify-content: flex-end; }
  }

  /* Mantenedor de productos — lista + modal */
  .prod-btn-agregar { background: var(--green); color: #fff; border: none; min-height: 34px; }
  .prod-btn-agregar:hover { filter: brightness(0.95); }
  #tabla-productos.prod-tabla-lista { table-layout: fixed; width: 100%; }
  #tabla-productos .prod-familia-cell { color: var(--grey-600, #64748b); }
  .prod-modal-checks { flex-wrap: wrap; margin-top: 4px; }
  #modal-producto .modal {
    width: min(520px, 96vw);
    max-width: 96vw;
  }
  #modal-producto .modal-body {
    overflow-x: hidden;
  }
  .prod-modal-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .prod-modal-panel { border: 1px solid var(--grey-200, #ddd); border-radius: var(--radius); padding: 14px 16px; background: #fff; }
  .prod-modal-panel:first-child { border-color: var(--green); border-width: 2px; }
  .prod-modal-panel h4 { margin: 0 0 12px; font-size: 13px; font-weight: 700; color: var(--title-color, #8B1A1A); text-transform: uppercase; letter-spacing: 0.04em; }
  .prod-modal-contab { border-color: var(--grey-200); }
  .prod-modal-panel .field { margin-bottom: 10px; }
  .prod-modal-panel .field:last-child { margin-bottom: 0; }
  .prod-modal-panel input,
  .prod-modal-panel select,
  .prod-modal-panel textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .prod-modal-row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
  }
  @media (max-width: 420px) {
    .prod-modal-row2 { grid-template-columns: 1fr; }
  }
  .prod-codigo-wrap { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .prod-codigo-wrap input { min-width: 0; }
  .prod-codigo-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 4px; font-size: 16px; flex-shrink: 0; }
  .prod-codigo-icon.warn { background: #FEF3C7; color: #B45309; }
  .prod-codigo-icon.ok { background: #DCFCE7; color: #15803D; }
  .prod-codigo-icon.bad { background: #FEE2E2; color: #B91C1C; }
  .prod-btn-barcode { width: 36px; height: 36px; padding: 0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .prod-alert-contab { background: #FEE2E2; color: #B91C1C; border: 1px solid #FECACA; border-radius: 6px; padding: 10px 12px; font-size: 12px; margin-bottom: 12px; line-height: 1.35; }
  #modal-producto .prod-cuenta-cell { display: flex; gap: 6px; align-items: center; min-width: 0; }
  #modal-producto .prod-cuenta-cell .mc-input-cuenta {
    flex: 1; min-width: 0; cursor: pointer; background: #fff;
  }
  #modal-producto .prod-cuenta-cell .mc-input-cuenta:focus {
    border-color: var(--accent); outline: none; background: var(--accent-soft);
  }
  .periodo-picker-header button { background: var(--grey-100); border: none; border-radius: 6px; width: 26px; height: 26px; cursor: pointer; font-size: 14px; color: var(--ink, #333); }
  .periodo-picker-header button:hover { background: var(--accent-soft); }
  .periodo-picker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .periodo-picker-mes { background: var(--grey-50, #f8fafc); border: 1px solid var(--grey-100); border-radius: 6px; padding: 8px 0; font-size: 12.5px; cursor: pointer; color: var(--grey-600); }
  .periodo-picker-mes:hover { background: var(--accent-soft); border-color: var(--accent); }
  .periodo-picker-mes.activo { background: var(--accent); color: white; border-color: var(--accent); font-weight: 700; }

  .input-monto-clp { text-align: right; }

  /* ALERTS */
  .alert { padding: 12px 16px; border-radius: var(--radius); font-size: 13px; margin-bottom: 16px; display: block; line-height: 1.45; }
  .alert-info { background: var(--accent-soft); color: #1D4ED8; border-left: 3px solid var(--accent); }
  .alert-success { background: var(--green-soft); color: #15803D; border-left: 3px solid var(--green); }
  .alert-error { background: var(--red-soft); color: #B91C1C; border-left: 3px solid var(--red); }
  .alert-warning { background: var(--orange-soft); color: #92400E; border-left: 3px solid var(--orange); }
  .alert-cent-rrhh-bloqueo {
    background: #FEF2F2;
    color: #991B1B;
    border: 2px solid #DC2626;
    border-left: 6px solid #DC2626;
    border-radius: 10px;
    padding: 16px 18px;
    margin: 0 0 14px;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.12);
    font-size: 14px;
    line-height: 1.5;
  }
  .alert-cent-rrhh-bloqueo-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 800;
    color: #7F1D1D;
    margin-bottom: 10px;
  }
  .alert-cent-rrhh-bloqueo-icon { font-size: 22px; line-height: 1; }
  .alert-cent-rrhh-bloqueo ul {
    margin: 0 0 12px 0;
    padding-left: 20px;
  }
  .alert-cent-rrhh-bloqueo li { margin-bottom: 4px; }
  .alert-cent-rrhh-bloqueo-note {
    font-size: 13px;
    color: #7F1D1D;
    margin-bottom: 12px;
  }
  .alert-cent-rrhh-bloqueo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
  }

  /* LOADING */
  .spinner { width: 20px; height: 20px; border: 2px solid var(--grey-200); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .loading-center { display: flex; align-items: center; justify-content: center; padding: 48px; gap: 12px; color: var(--grey-400); }

  /* EMPTY STATE */
  .empty { text-align: center; padding: 48px 24px; }
  .empty-icon { font-size: 40px; margin-bottom: 12px; }
  .empty h4 { font-size: 15px; font-weight: 600; color: var(--grey-600); margin-bottom: 6px; }
  .empty p { font-size: 13px; color: var(--grey-400); margin-bottom: 16px; }

  /* MODAL — ventanas flotantes no bloqueantes (varias abiertas a la vez) */
  .modal-overlay {
    position: fixed; inset: 0;
    background: transparent;
    z-index: 200;
    display: none;
    align-items: center; justify-content: center;
    pointer-events: none;
  }
  .modal-overlay.open { display: flex; pointer-events: none; }
  .modal-overlay.open.modal-behind { display: none !important; }
  .modal-overlay.open .modal {
    pointer-events: auto;
    box-shadow: 4px 4px 0 rgba(0,0,0,.15);
  }
  .modal {
    background: var(--panel-bg, #ECE9D8); border-radius: var(--radius); width: 560px; max-width: 95vw;
    max-height: 90vh; overflow: hidden;
    border: 2px solid var(--grid-border, #808080);
    display: flex; flex-direction: column;
  }
  .modal-header {
    padding: 8px 12px; border-bottom: 1px solid var(--grid-border, #808080);
    display: flex; align-items: center; justify-content: space-between;
    background: linear-gradient(180deg, var(--header-grad-start) 0%, var(--header-grad-end) 100%);
    border-radius: var(--radius) var(--radius) 0 0;
    flex-shrink: 0;
    position: sticky; top: 0; z-index: 2;
  }
  .modal-header.modal-drag-handle { cursor: move; user-select: none; }
  .modal-header.modal-drag-handle:active { cursor: grabbing; }
  .modal-header.modal-drag-handle .modal-close { cursor: pointer; }
  .modal.modal-is-dragging { user-select: none; }
  .modal-header h3 { font-size: 14px; font-weight: 700; color: var(--title-color, #8B1A1A); margin: 0; }
  .modal-close {
    background: none; border: none; font-size: 18px; cursor: pointer;
    color: #333; padding: 4px; line-height: 1;
  }
  .modal-close:hover { color: #000; }
  .modal-body { padding: 14px 16px; overflow-y: auto; flex: 1 1 auto; min-height: 0; background: var(--panel-bg, #ECE9D8); }
  .modal-footer {
    padding: 8px 12px; border-top: 1px solid var(--grid-border, #808080);
    display: flex; gap: 8px; justify-content: flex-end;
    flex-shrink: 0; background: var(--panel-bg, #ECE9D8);
  }

  /* PAGE VIEWS */
  .page { display: none; }
  .page.active { display: block; }

  /* NUMBER FORMAT */
  .num-right { text-align: right; font-variant-numeric: tabular-nums; }
  .text-muted { color: var(--grey-400); }
  .text-green { color: var(--green); }
  .text-red { color: var(--red); }
  .fw-bold { font-weight: 700; }

  /* TOAST: arriba a la derecha, fuera del botón flotante. */
  #toast-container {
    position: fixed; top: calc(var(--header-h) + 12px); right: 24px; bottom: auto;
    z-index: 9300; display: flex; flex-direction: column; gap: 8px;
    max-width: min(320px, calc(100vw - 32px));
  }
  .toast { padding: 12px 18px; border-radius: var(--radius); color: white; font-size: 13px; font-weight: 500; box-shadow: var(--shadow-md); animation: slideIn .3s ease; max-width: 320px; display: flex; align-items: center; gap: 8px; }
  .toast-success { background: var(--green); }
  .toast-error { background: var(--red); }
  .toast-info { background: var(--accent); }
  @keyframes slideIn { from { transform: translateY(-8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

  .divider { height: 1px; background: var(--grey-100); margin: 20px 0; }
  .flex { display: flex; }
  .items-center { align-items: center; }
  .gap-2 { gap: 8px; }
  .gap-3 { gap: 12px; }
  .ml-auto { margin-left: auto; }
  .mb-4 { margin-bottom: 16px; }
  .mb-6 { margin-bottom: 24px; }

  /* SELECTOR COMPROBANTES / CUENTAS — estilo GFM crema (referencia imagen) */
  .gfm-selector-modal {
    max-width: 860px; width: 96vw;
    border: 1px solid #B8B4A8; border-radius: 8px;
    box-shadow: 0 8px 28px rgba(0,0,0,.18);
    background: #F5F2EA;
  }
  .gfm-selector-modal .modal-header {
    background: linear-gradient(180deg, #EDEAE0 0%, #E0DCD0 100%);
    border-bottom: 1px solid #C8C4B8;
    padding: 10px 14px; min-height: auto; border-radius: 8px 8px 0 0;
  }
  .gfm-selector-modal .modal-header h3 {
    color: #8B1A1A; font-size: 15px; font-weight: 700; margin: 0;
  }
  .gfm-selector-modal .modal-close { color: #555; font-size: 18px; }
  .gfm-selector-modal .modal-close:hover { color: #111; }
  .gfm-selector-modal .modal-body { padding: 14px 16px; background: #F5F2EA; }
  .gfm-selector-modal .modal-footer {
    background: #F5F2EA; border-top: 1px solid #C8C4B8;
    padding: 10px 14px; align-items: center;
  }
  #mc-selector-tipo-filtros .mc-tipo-btn.active {
    background: var(--sel, #316AC5); color: #fff; border-color: var(--sel, #316AC5);
  }
  .gfm-selector-wrap {
    max-height: min(520px, 60vh); overflow: auto;
    border: 1px solid #C0BBB0; background: #fff; border-radius: 4px;
  }
  .gfm-selector-grid { width: 100%; border-collapse: collapse; font-size: 12px; font-family: "Public Sans", "Segoe UI", Arial, sans-serif; }
  .gfm-selector-grid th {
    background: #D8D4C8; border: 1px solid #B8B4A8; padding: 6px 10px;
    text-align: left; font-weight: 700; color: #111; text-transform: uppercase;
    font-size: 12px; position: sticky; top: 0; z-index: 1;
  }
  .gfm-selector-grid td { border: 1px solid #D0CCC0; padding: 5px 10px; color: #111; background: #fff; }
  .gfm-selector-grid tr.gfm-sel-row { cursor: pointer; }
  .gfm-selector-grid tr.gfm-sel-row:hover td { background: #E8F4FC; }
  .gfm-selector-grid tr.gfm-sel-row.selected td { background: #316AC5; color: #fff; }

  /* Selector de cuenta RRHH — mismo formato GFM que la imagen */
  #modal-mc-selector-cuenta .mc-cuenta-modal {
    width: min(720px, 96vw);
    max-width: 96vw;
    border: 1px solid #B8B4A8;
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(0,0,0,.18);
    background: #F5F2EA;
  }
  #modal-mc-selector-cuenta .mc-cuenta-modal .modal-header {
    background: linear-gradient(180deg, #EDEAE0 0%, #E0DCD0 100%);
    border-bottom: 1px solid #C8C4B8;
    border-radius: 8px 8px 0 0;
    padding: 10px 14px;
  }
  #modal-mc-selector-cuenta .mc-cuenta-modal .modal-header h3 {
    color: #8B1A1A; font-size: 15px; font-weight: 700;
  }
  #modal-mc-selector-cuenta .mc-cuenta-modal .modal-body {
    background: #F5F2EA;
    padding: 14px 16px;
  }
  #modal-mc-selector-cuenta .mc-cuenta-modal .modal-footer {
    background: #F5F2EA;
    border-top: 1px solid #C8C4B8;
    padding: 10px 14px;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }
  #modal-mc-selector-cuenta .mc-cuenta-modal .modal-footer .btn-ghost {
    background: #E8E4DC;
    border: 1px solid #C8C4B8;
    color: #333;
    padding: 6px 14px;
  }
  #modal-mc-selector-cuenta .mc-cuenta-modal .modal-footer .btn-ghost:hover {
    background: #DDD8CE;
  }
  #modal-mc-selector-cuenta #mc-selector-buscar {
    border: 1px solid #C8C4B8;
    border-radius: 6px;
    background: #fff;
    padding: 9px 12px;
  }
  #modal-mc-selector-cuenta #mc-selector-buscar:focus {
    border-color: var(--sel, #316AC5);
    box-shadow: 0 0 0 2px rgba(49, 106, 197, 0.22);
  }
  #modal-mc-selector-cuenta .mc-sel-wrap {
    max-height: min(480px, 55vh);
    overflow: auto;
    border: 1px solid #C0BBB0;
    border-radius: 4px;
    background: #fff;
    box-shadow: none;
  }
  #modal-mc-selector-cuenta .mc-sel-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
  }
  #modal-mc-selector-cuenta .mc-sel-grid thead th {
    position: sticky; top: 0; z-index: 1;
    background: #D8D4C8;
    color: #111;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    padding: 6px 10px;
    text-align: left;
    border: 1px solid #B8B4A8;
  }
  #modal-mc-selector-cuenta .mc-sel-grid td {
    padding: 5px 10px;
    border: 1px solid #D0CCC0;
    color: #111;
    background: #fff;
  }
  #modal-mc-selector-cuenta .mc-sel-grid tr.gfm-sel-row { cursor: pointer; }
  #modal-mc-selector-cuenta .mc-sel-grid tr.gfm-sel-row:hover td {
    background: #E8F4FC;
  }
  #modal-mc-selector-cuenta .mc-sel-grid tr.gfm-sel-row:active td,
  #modal-mc-selector-cuenta .mc-sel-grid tr.gfm-sel-row.selected td {
    background: #316AC5; color: #fff;
  }
  #modal-mc-selector-cuenta .mc-sel-meta {
    margin: 0;
    font-size: 12px;
    color: #888;
    flex: 1;
    min-width: 0;
    line-height: 1.35;
  }
  #modal-mc-selector-cuenta #mc-selector-tipo-filtros .mc-tipo-btn {
    border: none;
    border-radius: 999px;
    padding: 5px 14px;
    background: transparent;
    color: #555;
    font-weight: 500;
  }
  #modal-mc-selector-cuenta #mc-selector-tipo-filtros .mc-tipo-btn:hover {
    background: #ECE9D8;
    color: #000;
  }
  #modal-mc-selector-cuenta #mc-selector-tipo-filtros .mc-tipo-btn.active {
    background: var(--sel, #316AC5);
    color: #fff;
    border-color: transparent;
  }

  /* RANGO DE CUENTAS GFM */
  .gfm-rango-cuentas { margin-top: 14px; border: 1px solid var(--grey-200); border-radius: var(--radius); padding: 12px 14px; background: #fff; }
  .gfm-rango-cuentas legend { font-weight: 700; color: #8b1a1a; font-size: 13px; padding: 0 6px; }
  .gfm-rango-fila { display: grid; grid-template-columns: 110px 120px 36px 1fr; gap: 8px; align-items: center; margin-bottom: 8px; font-size: 13px; }
  .gfm-rango-fila:last-child { margin-bottom: 0; }
  .gfm-rango-lbl { background: #d4d0c8; border: 1px solid #808080; padding: 6px 8px; font-weight: 600; color: var(--ink, #333); text-align: center; }
  .gfm-rango-nombre { background: #fff; border: 1px solid #c0c0c0; padding: 6px 10px; min-height: 32px; color: #333; }
  .gfm-libro-cv-form { margin-top: 12px; max-width: 520px; }
  .gfm-libro-cv-fila { display: grid; grid-template-columns: 130px 1fr; gap: 10px; align-items: center; margin-bottom: 8px; font-size: 13px; }
  .gfm-libro-cv-fila input, .gfm-libro-cv-fila select {
    width: 100%; max-width: 100%;
    padding: 8px 12px; border: 1.5px solid var(--grey-200); border-radius: var(--radius);
    font-size: 13px; outline: none; background: var(--white); min-height: 36px;
  }
  .gfm-libro-cv-fila input[type="date"] { cursor: pointer; color-scheme: light; }
  .gfm-libro-cv-fila input:focus, .gfm-libro-cv-fila select:focus { border-color: var(--accent); }
  .gfm-libro-cv-fila .gfm-libro-cv-corto { max-width: 140px; }
  .gfm-libro-cv-lbl { text-align: right; font-weight: 600; color: var(--ink, #333); padding-right: 4px; }
  .lrem-filtros {
    margin-top: 14px;
    border-top: 1px solid var(--grid-border, #c0c0c0);
    padding-top: 12px;
  }
  .lrem-filtros-titulo {
    color: #8b0000;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 10px;
  }
  .lrem-filtros-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
  }
  .lrem-filtro-campo label {
    display: block;
    color: var(--blue, #003399);
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 3px;
  }
  .lrem-lookup {
    display: grid;
    grid-template-columns: 64px 32px 1fr;
    gap: 4px;
    align-items: center;
  }
  .lrem-lookup .lrem-cod {
    width: 100%;
    min-width: 0;
    font-size: 12px;
    padding: 4px 6px;
  }
  .lrem-lookup .lrem-nom {
    width: 100%;
    min-width: 0;
    font-size: 12px;
    padding: 4px 6px;
    background: #fff;
    cursor: pointer;
  }
  .lrem-lookup button {
    padding: 2px 0;
    min-width: 32px;
  }
  #modal-lrem-estructura tr.gfm-sel-row:hover td { background: #E8F4FC; }
  #modal-lrem-estructura tr.gfm-sel-row.selected td { background: #316AC5; color: #fff; }
  #modal-lrem-estructura tr.gfm-sel-row.selected td code { color: #fff; }
  .lrem-filtro-full {
    margin-top: 10px;
  }
  .lrem-filtro-full select {
    width: 100%;
    font-size: 12px;
    padding: 5px 8px;
  }
  @media (max-width: 720px) {
    .lrem-filtros-grid { grid-template-columns: 1fr; }
  }
  .gfm-fs { border: 1px solid var(--grey-200); border-radius: var(--radius); padding: 12px 14px; margin-top: 12px; background: #fff; }
  .gfm-fs legend { font-weight: 700; color: #8b1a1a; font-size: 13px; padding: 0 6px; }
  .gfm-fs-radios { display: flex; gap: 20px; flex-wrap: wrap; font-size: 13px; }
  .gfm-fs-radios label { display: flex; align-items: center; gap: 6px; }
  .gfm-fs-check { font-size: 13px; color: var(--ink, #333); }
  .gfm-fs-check label { display: flex; align-items: center; gap: 8px; }

  /* Vista de impresión de reportes — modal en el ERP (no bloquea la emisión) */
  #modal-rep-vista.modal-overlay.open { z-index: 350; }
  #modal-importar-comprobante.modal-overlay.open,
  #modal-lista-comprobantes-imp.modal-overlay.open { z-index: 260; }
  .modal-rep-vista {
    width: min(96vw, 1100px);
    max-width: 96vw;
    height: min(92vh, 900px);
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
  }
  .modal-rep-vista .modal-header { flex-shrink: 0; }
  .modal-rep-vista .modal-body-rep {
    flex: 1;
    min-height: 0;
    padding: 0;
    background: #e8e8e8;
  }
  .modal-rep-vista iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #fff;
  }
  .modal-rep-vista .modal-footer { flex-shrink: 0; }

  #tabla-forecast-anual td.pfc-celda-real {
    background: #f0f4f8;
    color: var(--grey-700, #444);
  }
  #tabla-forecast-anual td.pfc-celda-proy {
    background: #fffef5;
  }
  #tabla-forecast-anual .pfc-mes-input {
    font-size: 12px;
    padding: 2px 4px;
    border: 1px solid #c5c5c5;
    border-radius: 4px;
    width: 72px;
  }
  .comp-partida-row:hover { background: var(--grey-50); }
  .comp-partida-row-active { background: #e8f0fe !important; outline: 1px solid var(--blue-400, #4a7fd4); }

  /* MODAL COSTO PREVIRED */
  .modal-previred-costo .modal-body { padding: 0; background: #f4f2eb; }
  .previred-costo-wrap { padding: 16px 18px 18px; }
  .previred-costo-intro {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 14px; margin-bottom: 14px;
    background: linear-gradient(135deg, #fff 0%, #f8fbff 100%);
    border: 1px solid #c8d8ea; border-left: 4px solid var(--navy, #1a365d);
    border-radius: 8px; box-shadow: 0 1px 3px rgba(26, 54, 93, 0.08);
  }
  .previred-costo-intro-icon { font-size: 22px; line-height: 1; margin-top: 2px; }
  .previred-costo-intro-tit { font-size: 13px; font-weight: 700; color: var(--navy, #1a365d); margin-bottom: 4px; }
  .previred-costo-intro-sub { font-size: 12px; color: var(--grey-600, #555); line-height: 1.45; }
  .previred-badge {
    display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 7px;
    border-radius: 999px; margin-left: 4px; vertical-align: middle;
  }
  .previred-badge-jub { background: #fff3e0; color: #b45309; border: 1px solid #fbbf24; }
  .previred-badge-se { background: #ede9fe; color: #5b21b6; border: 1px solid #c4b5fd; }
  .previred-costo-kpis {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px;
  }
  @media (max-width: 640px) {
    .previred-costo-kpis { grid-template-columns: repeat(2, 1fr); }
  }
  .previred-kpi {
    background: #fff; border: 1px solid var(--grid-border, #c5c5c5);
    border-radius: 8px; padding: 10px 12px; min-height: 54px;
    display: flex; flex-direction: column; justify-content: center;
  }
  .previred-kpi-label {
    font-size: 12px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--grey-400, #888); margin-bottom: 4px;
  }
  .previred-kpi-val { font-size: 14px; font-weight: 700; color: var(--ink, #222); line-height: 1.2; }
  .previred-kpi-val.num { font-variant-numeric: tabular-nums; }
  .previred-costo-paneles {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px;
  }
  @media (max-width: 720px) {
    .previred-costo-paneles { grid-template-columns: 1fr; }
  }
  .previred-costo-seccion {
    background: #fff; border: 1px solid var(--grid-border, #c5c5c5);
    border-radius: 8px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  }
  .previred-seccion-trab { border-top: 3px solid #2563eb; }
  .previred-seccion-emp { border-top: 3px solid #b45309; }
  .previred-costo-seccion-head {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; background: #fafafa; border-bottom: 1px solid #e5e5e5;
  }
  .previred-costo-seccion-head h4 {
    margin: 0; flex: 1; font-size: 12px; font-weight: 700;
    color: var(--title-color, #8B1A1A); text-transform: uppercase; letter-spacing: 0.03em;
  }
  .previred-costo-seccion-icon { font-size: 15px; }
  .previred-costo-seccion-total {
    font-size: 13px; font-weight: 800; color: var(--navy, #1a365d);
    font-variant-numeric: tabular-nums;
  }
  .previred-costo-tabla-wrap { overflow-x: auto; }
  .previred-costo-tabla { width: 100%; border-collapse: collapse; font-size: 12px; }
  .previred-costo-tabla thead th {
    padding: 7px 10px; font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--grey-500, #666); background: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
  }
  .previred-costo-tabla tbody td { padding: 9px 10px; border-bottom: 1px solid #eee; vertical-align: top; }
  .previred-costo-tabla tbody tr:last-child td { border-bottom: none; }
  .previred-col-concepto { max-width: 0; width: 68%; }
  .previred-col-monto { white-space: nowrap; font-weight: 600; color: var(--ink, #222); width: 32%; }
  .previred-concepto-main { font-weight: 600; color: var(--ink, #222); line-height: 1.35; }
  .previred-concepto-sub { font-size: 12px; color: var(--grey-500, #777); margin-top: 2px; line-height: 1.35; }
  .previred-vacio { text-align: center; color: var(--grey-400); font-style: italic; padding: 16px !important; }
  .previred-costo-tabla tfoot td {
    padding: 9px 10px; font-weight: 700; background: #f0f4f8;
    border-top: 2px solid #d0dbe8; font-size: 12px;
  }
  .previred-costo-tabla tfoot .num-right { color: var(--navy, #1a365d); font-size: 13px; }
  .previred-costo-grand-total {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    padding: 14px 16px; border-radius: 8px;
    background: linear-gradient(135deg, #1a365d 0%, #2c5282 100%);
    color: #fff; box-shadow: 0 2px 8px rgba(26, 54, 93, 0.25);
  }
  .previred-costo-grand-total-label {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600; line-height: 1.35;
  }
  .previred-costo-grand-total-icon { font-size: 18px; opacity: 0.9; }
  .previred-costo-grand-total-val {
    font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em; text-shadow: 0 1px 2px rgba(0,0,0,0.15);
  }

  /* Modal detalle asiento — totales tipo libro + badge Cuadrado/Descuadrado */
  #modal-detalle-asiento .modal-detalle-asiento { max-width: 820px; }
  #modal-detalle-asiento .da-tabla { width: 100%; table-layout: fixed; }
  #modal-detalle-asiento .da-col-cuenta { width: 38%; }
  #modal-detalle-asiento .da-col-glosa { width: auto; }
  #modal-detalle-asiento .da-col-debe,
  #modal-detalle-asiento .da-col-haber { width: 110px; }
  #modal-detalle-asiento .da-tabla th.num-right,
  #modal-detalle-asiento .da-tabla td.num-right {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  #modal-detalle-asiento .da-tabla tfoot td {
    font-weight: 700;
    border-top: 2px solid var(--grid-border, #808080);
    padding-top: 10px;
    background: #f3f0e8;
  }
  #modal-detalle-asiento .da-balance {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    margin-top: 14px; padding: 12px 16px; border-radius: 8px;
    box-shadow: 0 2px 8px rgba(26, 54, 93, 0.18);
  }
  #modal-detalle-asiento .da-balance:empty { display: none; }
  #modal-detalle-asiento .da-balance-ok {
    background: linear-gradient(135deg, #14532d 0%, #166534 100%);
    color: #fff;
  }
  #modal-detalle-asiento .da-balance-bad {
    background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%);
    color: #fff;
  }
  #modal-detalle-asiento .da-balance-label {
    font-size: 14px; font-weight: 700; letter-spacing: 0.01em;
  }
  #modal-detalle-asiento .da-balance-hint {
    font-size: 12px; font-weight: 600; opacity: 0.9;
  }
  .previred-costo-notas { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #ccc; }
  .previred-costo-notas p {
    margin: 0 0 4px; font-size: 12px; color: var(--grey-500, #777); line-height: 1.45;
  }
  .previred-costo-notas p:last-child { margin-bottom: 0; }
  .previred-costo-otros { margin-top: 14px; }
  .previred-costo-otros h4 {
    margin: 0 0 8px; font-size: 12px; font-weight: 700; color: var(--grey-600, #555);
  }
  .previred-costo-resumen-kpis {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px; margin-bottom: 16px;
  }
  .previred-costo-resumen-kpis .kpi-card { padding: 12px; }
  .previred-costo-resumen-kpis .kpi-value { font-size: 20px; }
  @media print {
    .modal-overlay:not(#modal-costo-previred) { display: none !important; }
    #modal-costo-previred { position: static !important; background: #fff !important; }
    #modal-costo-previred .modal { box-shadow: none !important; max-height: none !important; width: 100% !important; }
    #modal-costo-previred .modal-header,
    #modal-costo-previred .modal-footer { display: none !important; }
    .previred-costo-grand-total { background: #1a365d !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  }

  /* Aviso previo al cierre por inactividad de sesión */
  #modal-sesion-inactiva.gfm-idle-overlay.open {
    z-index: 9999;
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.45);
  }
  #modal-sesion-inactiva.gfm-idle-overlay.open .modal {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.28);
  }
  #modal-sesion-inactiva #gfm-idle-countdown {
    font-variant-numeric: tabular-nums;
    color: var(--red, #c0392b);
  }

  /* Ficha Auxiliares: solo #tabla-auxiliares.aux-tabla */
  #page-ficha-auxiliares .aux-toolbar {
    flex-wrap: wrap;
    overflow-x: visible;
  }
  #page-ficha-auxiliares .aux-tabla-scroll {
    max-height: min(70vh, 720px);
    overflow: auto;
  }
  #page-ficha-auxiliares table.aux-tabla {
    table-layout: fixed;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }
  #page-ficha-auxiliares table.aux-tabla .aux-col-rut { width: 8.5rem; }
  #page-ficha-auxiliares table.aux-tabla .aux-col-dir { width: 18%; }
  #page-ficha-auxiliares table.aux-tabla .aux-col-correo { width: 16%; }
  #page-ficha-auxiliares table.aux-tabla .aux-col-tipos { width: 11rem; }
  #page-ficha-auxiliares table.aux-tabla .aux-col-estado { width: 6.5rem; }
  #page-ficha-auxiliares table.aux-tabla .aux-col-acc { width: 9.5rem; }
  #page-ficha-auxiliares table.aux-tabla thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--white);
  }
  #page-ficha-auxiliares table.aux-tabla tbody td {
    height: 4.2rem;
    vertical-align: middle;
    overflow: hidden;
  }
  #page-ficha-auxiliares table.aux-tabla tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--ink) 4%, var(--white));
  }
  #page-ficha-auxiliares table.aux-tabla tbody tr:hover td,
  #page-ficha-auxiliares table.aux-tabla tbody tr.aux-fila-edicion td {
    background: var(--accent-soft);
  }
  #page-ficha-auxiliares .aux-rut {
    display: inline-block;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
  }
  #page-ficha-auxiliares .aux-nombre {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.25rem;
    max-height: 2.5rem;
    word-break: break-word;
  }
  #page-ficha-auxiliares .aux-una,
  #page-ficha-auxiliares .aux-dir-calle,
  #page-ficha-auxiliares .aux-dir-lugar {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  #page-ficha-auxiliares .aux-dir-lugar {
    color: var(--ink-faint);
    font-size: 12px;
  }
  #page-ficha-auxiliares .aux-vacio { color: var(--ink-faint); }
  #page-ficha-auxiliares .aux-tipos {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
  }
  #page-ficha-auxiliares .aux-tipos .badge,
  #page-ficha-auxiliares .aux-estado .badge {
    white-space: nowrap;
    font-size: 12px;
    line-height: 1.2;
  }
  #page-ficha-auxiliares .aux-acc {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    align-items: center;
  }
  #page-ficha-auxiliares .aux-eliminar { color: var(--red); }

  /* Excepción pedida en el OK del 16-10: 44 px solo bajo 768 px.
     El drawer del shell sigue en 900 px; entre 769 y 899 el ítem queda en 36 px. */
  .aviso-mas { display: none; }
  @media (max-width: 768px) {
    .nav-item { min-height: 44px; }
    .page.active { padding-bottom: 76px; }
    .btn { min-height: 36px; white-space: nowrap; }
    .btn-navy, .btn-primary { min-height: 40px; }
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
    select, textarea { min-height: 36px; }
    .aviso-recorte {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    .aviso-recorte.aviso-abierto {
      display: block;
      -webkit-line-clamp: unset;
      overflow: visible;
    }
    .aviso-mas { display: inline-flex; margin: 0 0 8px; }
    .topbar { flex-wrap: wrap; height: auto; min-height: var(--header-h); padding-top: 6px; padding-bottom: 6px; }
    .topbar-bcch-aviso {
      flex: 1 1 100%;
      order: 5;
      margin: 4px 0 0;
      max-width: 100%;
      white-space: normal;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    #dash-tabs { flex-wrap: nowrap; }
    .dash-tab { font-size: 0; line-height: 1.2; padding: 8px 10px; min-height: 36px; }
    .dash-tab::after { font-size: 13px; font-weight: 600; }
    .dash-tab[data-tab="financiero"]::after { content: "Financiero"; }
    .dash-tab[data-tab="contable"]::after { content: "Contable"; }
    .dash-tab[data-tab="operativo"]::after { content: "Operativo"; }
    #page-libro-diario .lista-scroll-head .card-header,
    #page-plan-cuentas .lista-scroll-head .card-header {
      flex-wrap: wrap;
      align-items: flex-start;
    }
    #page-libro-diario .lista-scroll-head .card-header > .flex:first-child,
    #page-plan-cuentas .lista-scroll-head .card-header > .flex {
      flex: 1 1 100%;
      flex-wrap: wrap;
    }
    #page-libro-diario .lista-scroll-head .card-header h3,
    #page-plan-cuentas .lista-scroll-head .card-header h3 { flex: 1 0 100%; }
    #ld-filtro-anio { width: auto; max-width: 100%; min-width: 9rem; }
    #page-compras .lista-scroll-filtros .form-grid,
    #page-ventas .lista-scroll-filtros .form-grid,
    #page-honorarios .lista-scroll-filtros .form-grid { grid-template-columns: 1fr 1fr; }
    #page-compras .lista-scroll-filtros .form-grid > .field:nth-child(n+3),
    #page-ventas .lista-scroll-filtros .form-grid > .field:nth-child(n+3),
    #page-honorarios .lista-scroll-filtros .form-grid > .field:nth-child(n+3) { grid-column: 1 / -1; }
    #page-compras .lista-scroll-filtros .form-grid > .field:last-child,
    #page-ventas .lista-scroll-filtros .form-grid > .field:last-child {
      justify-self: start;
      width: auto;
    }
    #page-compras .lista-scroll-filtros .form-grid > .field:last-child .btn,
    #page-ventas .lista-scroll-filtros .form-grid > .field:last-child .btn { width: auto; }
    #tabla-asientos:has(th:nth-child(6)),
    #tabla-compras:has(th:nth-child(11)),
    #tabla-ventas:has(th:nth-child(10)) {
      display: block;
      width: 100%;
      min-width: 0;
    }
    #tabla-asientos:has(th:nth-child(6)) thead,
    #tabla-compras:has(th:nth-child(11)) thead,
    #tabla-ventas:has(th:nth-child(10)) thead { display: none; }
    #tabla-asientos:has(th:nth-child(6)) tbody,
    #tabla-compras:has(th:nth-child(11)) tbody,
    #tabla-ventas:has(th:nth-child(10)) tbody { display: block; width: 100%; }
    #tabla-asientos:has(th:nth-child(6)) tr:not(:has(td[colspan])),
    #tabla-compras:has(th:nth-child(11)) tr:not(:has(td[colspan])),
    #tabla-ventas:has(th:nth-child(10)) tr:not(:has(td[colspan])) {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 6px 10px;
      margin: 8px 12px;
      padding: 10px;
      border: 1px solid var(--grey-200);
      border-radius: 10px;
      background: var(--white, #fff);
    }
    #tabla-asientos:has(th:nth-child(6)) td,
    #tabla-compras:has(th:nth-child(11)) td,
    #tabla-ventas:has(th:nth-child(10)) td {
      display: block;
      border: none;
      padding: 0;
      width: auto;
      white-space: normal;
    }
    #tabla-asientos:has(th:nth-child(6)) td:nth-child(1) { order: 1; font-weight: 700; }
    #tabla-asientos:has(th:nth-child(6)) td:nth-child(2) { order: 2; }
    #tabla-asientos:has(th:nth-child(6)) td:nth-child(3) { order: 10; flex: 1 0 100%; }
    #tabla-asientos:has(th:nth-child(6)) td:nth-child(4) { order: 20; }
    #tabla-asientos:has(th:nth-child(6)) td:nth-child(5) { order: 21; }
    #tabla-asientos:has(th:nth-child(6)) td:nth-child(6) { order: 30; flex: 1 0 100%; }
    #tabla-compras:has(th:nth-child(11)) td:nth-child(1),
    #tabla-ventas:has(th:nth-child(10)) td:nth-child(1) { order: 1; }
    #tabla-compras:has(th:nth-child(11)) td:nth-child(2),
    #tabla-ventas:has(th:nth-child(10)) td:nth-child(2) { order: 2; font-weight: 700; }
    #tabla-compras:has(th:nth-child(11)) td:nth-child(3),
    #tabla-ventas:has(th:nth-child(10)) td:nth-child(3) { order: 3; }
    #tabla-compras:has(th:nth-child(11)) td:nth-child(4),
    #tabla-ventas:has(th:nth-child(10)) td:nth-child(4) { order: 4; }
    #tabla-compras:has(th:nth-child(11)) td:nth-child(5) { order: 5; }
    #tabla-asientos:has(th:nth-child(6)) .ld-acciones { display: flex; flex-wrap: wrap; gap: 6px; }
    #tabla-compras:has(th:nth-child(11)) td:nth-child(6) { order: 10; flex: 1 0 100%; font-size: 15px; }
    #tabla-ventas:has(th:nth-child(10)) td:nth-child(5) { order: 10; flex: 1 0 100%; font-size: 15px; }
    #tabla-compras:has(th:nth-child(11)) td:nth-child(n+7):not(:nth-last-child(-n+3)),
    #tabla-ventas:has(th:nth-child(10)) td:nth-child(n+6):not(:nth-last-child(-n+3)) { order: 15; font-size: 13px; }
    #tabla-compras:has(th:nth-child(11)) td:nth-last-child(3),
    #tabla-ventas:has(th:nth-child(10)) td:nth-last-child(3) { order: 30; font-weight: 700; font-size: 15px; }
    #tabla-ventas:has(th:nth-child(10)) td:nth-last-child(2),
    #tabla-compras:has(th:nth-child(11)) td:nth-last-child(2) { order: 31; }
    #tabla-compras:has(th:nth-child(11)) td:nth-last-child(1),
    #tabla-ventas:has(th:nth-child(10)) td:nth-last-child(1) {
      order: 40;
      flex: 1 0 100%;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    #tabla-asientos:has(th:nth-child(6)) tr:has(td[colspan]),
    #tabla-compras:has(th:nth-child(11)) tr:has(td[colspan]),
    #tabla-ventas:has(th:nth-child(10)) tr:has(td[colspan]) { display: block; }
    #tabla-asientos:has(th:nth-child(6)) td[colspan],
    #tabla-compras:has(th:nth-child(11)) td[colspan],
    #tabla-ventas:has(th:nth-child(10)) td[colspan] { display: block; width: 100%; }
  }
  /* Una sola barra en listados: la página llena el contenido y el scroll queda en la grilla.
     Sin esto, alto 100vh-96 más el padding de .content deja unos 8 px de scroll en la página. */
  .content:has(> .page.page-lista-scroll.active) {
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .page.page-lista-scroll.active {
    flex: 1 1 auto;
    height: auto;
    max-height: none;
    min-height: 0;
  }
  /* Mismo corte de 768 px, después de las reglas de B: si van antes, el orden del archivo las pisa.
     Solo Libro Diario, Compras y Ventas (las que ya se vuelven tarjetas) sueltan el alto fijo.
     Un :has anidado no es selector válido en este Chrome, por eso se usa el id de cada página.
     El resto conserva el scroll horizontal de la grilla. */
  @media (max-width: 768px) {
    .content:has(> #page-ventas.page.active),
    .content:has(> #page-compras.page.active),
    .content:has(> #page-libro-diario.page.active) {
      overflow-x: hidden;
      overflow-y: auto;
      display: block;
    }
    #page-ventas.page-lista-scroll.active,
    #page-compras.page-lista-scroll.active,
    #page-libro-diario.page-lista-scroll.active {
      display: block;
      height: auto;
      max-height: none;
      overflow: visible;
      flex: none;
    }
    #page-ventas.page-lista-scroll.active > .card.lista-scroll-card,
    #page-compras.page-lista-scroll.active > .card.lista-scroll-card,
    #page-libro-diario.page-lista-scroll.active > .card.lista-scroll-card {
      display: block;
      height: auto;
      overflow: visible;
      flex: none;
    }
    #page-ventas.page-lista-scroll.active .lista-scroll-card > .card-body,
    #page-compras.page-lista-scroll.active .lista-scroll-card > .card-body,
    #page-libro-diario.page-lista-scroll.active .lista-scroll-card > .card-body {
      display: block;
      height: auto;
      min-height: 0;
      overflow: visible;
      flex: none;
    }
    #page-ventas.page-lista-scroll.active .lista-scroll-card .table-container,
    #page-compras.page-lista-scroll.active .lista-scroll-card .table-container,
    #page-libro-diario.page-lista-scroll.active .lista-scroll-card .table-container {
      height: auto;
      max-height: none;
      overflow: visible !important;
      flex: none;
    }
  }