/*
Theme Name: Theme Administracion
Version: 1.1.0
Author: Fundación Romero
Description: Tema ERP de viáticos — Fundación Romero.
Requires PHP: 7.4
Tested up to: 7.0
License: Propietario — uso interno de Fundación Romero. Todos los derechos reservados.
Text Domain: theme-administracion
*/
/*
   Nota sobre la cabecera:
   - No hay `Requires at least`: no se determinó un piso real de WordPress, y
     declarar uno inventado es peor que omitirlo. Si alguna vez se mide, va acá.
   - `Tested up to` = versión de WordPress sobre la que corre hoy en producción.
   - `Text Domain` se declara por convención, pero el tema NO carga traducciones:
     es mono-idioma (español) por decisión. Ver viaticos_theme_setup() en
     functions.php.
   - `License` refleja composer.json ("proprietary"). Sin License URI: no hay
     licencia pública que enlazar.
*/
/* ============================================================
   DESIGN TOKENS — Sistema de Viáticos · Fundación Romero
   ============================================================ */
:root {
    --primary:          #da5b3e;
    --primary-dark:     #b84930;
    --primary-darker:   #963821;
    --primary-light:    #fde9e3;
    --primary-ink:      #7f2d1d;
    --bg:               #f3f6f9;
    --surface:          #ffffff;
    --surface-strong:   #f7f8fb;
    --border:           #e4e7ec;
    --border-light:     #edf1f5;
    --text:             #101828;
    --text-muted:       #667085;
    --text-light:       #667085;
    --sidebar-bg:       #17202b;
    --sidebar-hover:    #223042;

    /* Badge colors: solicitud */
    --badge-solicitud-pendiente-bg:  oklch(96% 0.06 80);  --badge-solicitud-pendiente-text:  oklch(34% 0.11 65);  --badge-solicitud-pendiente-border:  oklch(83% 0.10 80);
    --badge-solicitud-aprobada-bg:   oklch(95% 0.06 150); --badge-solicitud-aprobada-text:   oklch(32% 0.10 150); --badge-solicitud-aprobada-border:   oklch(80% 0.12 150);
    --badge-solicitud-observada-bg:  oklch(96% 0.05 52);  --badge-solicitud-observada-text:  oklch(37% 0.12 40);  --badge-solicitud-observada-border:  oklch(82% 0.10 52);
    --badge-solicitud-rechazada-bg:  oklch(96% 0.04 22);  --badge-solicitud-rechazada-text:  oklch(35% 0.13 22);  --badge-solicitud-rechazada-border:  oklch(82% 0.09 22);

    /* Badge colors: rendicion */
    --badge-rendicion-no-disponible-bg:  oklch(96% 0.003 0);   --badge-rendicion-no-disponible-text:  oklch(50% 0.005 0);  --badge-rendicion-no-disponible-border:  oklch(88% 0.005 0);
    --badge-rendicion-no-iniciada-bg:    oklch(96% 0.008 60);  --badge-rendicion-no-iniciada-text:    oklch(42% 0.015 60); --badge-rendicion-no-iniciada-border:    oklch(85% 0.015 60);
    --badge-rendicion-en-proceso-bg:     oklch(96% 0.025 42);  --badge-rendicion-en-proceso-text:     oklch(37% 0.10 38);  --badge-rendicion-en-proceso-border:     oklch(83% 0.07 42);
    --badge-rendicion-en-revision-bg:    oklch(95% 0.022 325); --badge-rendicion-en-revision-text:    oklch(38% 0.10 325); --badge-rendicion-en-revision-border:    oklch(82% 0.07 325);
    --badge-rendicion-aprobada-bg:       oklch(95% 0.06 150);  --badge-rendicion-aprobada-text:       oklch(32% 0.10 150); --badge-rendicion-aprobada-border:       oklch(80% 0.12 150);
    --badge-rendicion-observada-bg:      oklch(96% 0.06 80);   --badge-rendicion-observada-text:      oklch(37% 0.11 65);  --badge-rendicion-observada-border:      oklch(83% 0.10 80);
    --badge-rendicion-rechazada-bg:      oklch(96% 0.04 22);   --badge-rendicion-rechazada-text:      oklch(35% 0.13 22);  --badge-rendicion-rechazada-border:      oklch(82% 0.09 22);

    --shadow-xs: 0 1px 2px rgba(35,31,27,.04);
    --shadow-sm: 0 1px 2px rgba(35,31,27,.04), 0 1px 1px rgba(35,31,27,.03);
    --shadow-md: 0 6px 18px rgba(35,31,27,.06), 0 2px 4px rgba(35,31,27,.03);
    --shadow-lg: 0 16px 40px rgba(35,31,27,.08), 0 4px 10px rgba(35,31,27,.05);
    --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px;
    --sidebar-w: 240px; --topbar-h: 60px;
    --ease: .2s ease;
    --font-display: 'Sora', 'Manrope', sans-serif;
    --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --wp-admin-bar-h: 0px;
    --paper: #ffffff;

    /* ====================================================================
       FASE 1 — Tokens del sistema (DESIGN.md). ADITIVO, sin cambio visual:
       ningún selector existente los consume todavía; los alias igualan los
       valores vigentes. El vocabulario de DESIGN.md ya es válido en código.
       ==================================================================== */

    /* Alias semánticos → tokens vigentes (mapeo doc↔código, 0 visual) */
    --navy:           var(--sidebar-bg);      /* #17202b */
    --navy-2:         var(--sidebar-hover);   /* #223042 */
    --ink:            var(--text);            /* #101828 */
    --ink-muted:      var(--text-muted);      /* #667085 */
    --primary-deep:   var(--primary-dark);    /* #b84930 */
    --primary-soft:   var(--primary-light);   /* #fde9e3 */
    --surface-2:      var(--surface-strong);  /* #f7f8fb */

    /* Tokens nuevos (no existían; sin consumidores aún) */
    --ink-light:      #98a2b3;   /* tier de tinta más claro (placeholder/separador) */
    --border-strong:  #d0d5dd;   /* = fallback ya en uso (cero cambio); target DESIGN #d6dbe3 se reconcilia en fase 6 */
    --radius-pill:    999px;
    /* Sin 'JetBrains Mono' aún (no está cargada): mantiene el fallback actual
       ui-monospace. Se le antepone la webfont en la fase 7. */
    --font-mono:      ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    --ease-out:       .16s cubic-bezier(.2, 0, 0, 1);

    /* Halo de foco terracota (§7.8 stepper-now, anillos de foco). Valor único
       del sistema = rgba(218,91,62,.18); evita rgba sueltos divergentes. */
    --primary-focus-ring: rgba(218,91,62,.18);

    /* Escala de espaciado (4/8/16/24/32/48) — fin de los números mágicos */
    --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;

    /* Ternas de estado por flujo (bg/tx) consumibles por cualquier componente,
       no solo badges. Mismos hues que los --badge-* para consistencia. */
    --st-pendiente-bg:  oklch(96% .06 80);  --st-pendiente-tx:  oklch(34% .11 65);
    --st-aprobada-bg:   oklch(95% .06 150); --st-aprobada-tx:   oklch(32% .10 150);
    --st-observada-bg:  oklch(96% .05 52);  --st-observada-tx:  oklch(37% .12 40);
    --st-rechazada-bg:  oklch(96% .04 22);  --st-rechazada-tx:  oklch(35% .13 22);
    --st-revision-bg:   oklch(95% .022 325);--st-revision-tx:   oklch(38% .10 325);
    --st-proceso-bg:    oklch(96% .025 42); --st-proceso-tx:    oklch(37% .10 38);

    /* Tintes DECORATIVOS de superficie accionable (saldo/devolución, "qué falta").
       El ámbar funcional (--st-observada-*) se reserva para pills/indicadores.
       Estas superficies grandes usan un tono mucho menos saturado para no saturar
       la pantalla de amarillo (DESIGN §2.4: color funcional, no decorativo). */
    --surface-warn-soft: oklch(97% .018 60);  /* fondo cálido casi neutro */
    --surface-warn-line: oklch(89% .025 60);  /* borde cálido tenue */
    --ink-warn:          oklch(42% .055 55);  /* texto/icono cálido apagado */

    /* ====================================================================
       Detalle de expediente — superficies internas y neutros sobre navy.
       Gobernanza DESIGN.md §2/§11.1: cero oklch/#fff/rgba sueltos en la vista.
       ==================================================================== */

    /* Superficies tintadas de la fila/campos expandibles (§7.5 variante row) */
    --surface-detail:  oklch(97% 0.005 250);    /* fondo fila-detalle expandida */
    --surface-field:   oklch(98.5% 0.004 250);  /* fondo campos dentro del detalle */

    /* Texto sobre superficie de acento sólida (chip de estado, sello) */
    --on-accent:       #ffffff;   /* tinta sobre fondo de estado/acento */

    /* Neutros sobre el ancla navy (§4): blanco tintado por opacidad, nunca #fff suelto.
       Se exponen como tokens para que el banner no use rgba(255,255,255,...) mágico. */
    --on-navy:         #ffffff;             /* texto principal sobre navy */
    --on-navy-72:      rgba(255,255,255,.72);
    --on-navy-60:      rgba(255,255,255,.60);
    --on-navy-55:      rgba(255,255,255,.55);
    --on-navy-45:      rgba(255,255,255,.45);
    --on-navy-40:      rgba(255,255,255,.40);
    --on-navy-12:      rgba(255,255,255,.12);
    --on-navy-10:      rgba(255,255,255,.10);
    --on-navy-03:      rgba(255,255,255,.03);
}

/* ── Skip link ───────────────────────────────────────────────── */
.skip-link {
    position: absolute; top: -100%; left: 8px; z-index: 9999;
    padding: 8px 16px; background: var(--primary); color: oklch(99% 0.005 30);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    font-size: 13px; font-weight: 600; text-decoration: none;
    transition: top .15s ease;
}
.skip-link:focus { top: 0; outline: 2px solid oklch(99% 0.005 30); outline-offset: 2px; }

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    font-family: var(--font-body);
    font-size: 16px; color: var(--text); background: var(--bg);
    line-height: 1.6; -webkit-font-smoothing: antialiased;
    font-kerning: normal;
    font-feature-settings: "kern" 1, "tnum" 1;
}

/* ============================================================
   LAYOUT — ERP Shell
   ============================================================ */
#erp-shell {
    display: flex;
    height: calc(100vh - var(--wp-admin-bar-h));
    margin-top: var(--wp-admin-bar-h);
    overflow: hidden;
}

body.admin-bar {
    --wp-admin-bar-h: 32px;
}

/* ── Sidebar ──────────────────────────────────────────────── */
#erp-sidebar {
    width: var(--sidebar-w); min-width: var(--sidebar-w);
    background: var(--sidebar-bg); display: flex; flex-direction: column;
    height: calc(100vh - var(--wp-admin-bar-h)); overflow-y: auto; z-index: 100;
    transition: width var(--ease);
}

@media (max-width: 782px) {
    body.admin-bar {
        --wp-admin-bar-h: 46px;
    }
}

.sidebar-logo { padding: 20px 18px 16px; border-bottom: 1px solid rgba(255,255,255,.06); }
.sidebar-logo-mark { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-icon {
    width: 36px; height: 36px; background: #fff;
    border-radius: var(--radius-sm); display: flex; align-items: center;
    justify-content: center; flex-shrink: 0; padding: 3px;
}
.logo-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.logo-text { display: flex; flex-direction: column; }
.sidebar-logo-full { max-width: 110px; height: auto; display: block; filter: brightness(0) invert(1); }

.sidebar-section       { padding: 16px 0 8px; }
.sidebar-section-label { padding: 0 16px 8px; font-size: 10px; font-weight: 600;
                         letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.30); }
.sidebar-nav           { list-style: none; padding: 0 8px; }
.sidebar-nav li        { margin-bottom: 2px; }
.sidebar-nav a {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    border-radius: var(--radius-sm); color: rgba(255,255,255,.62);
    text-decoration: none; font-size: 13.5px; font-weight: 500;
    transition: background var(--ease), color var(--ease); cursor: pointer;
}
.sidebar-nav a .nav-icon { width: 18px; height: 18px; flex-shrink: 0; opacity: .7; transition: opacity var(--ease); }
.sidebar-nav a:hover { background: var(--sidebar-hover); color: #fff; }
.sidebar-nav a:hover .nav-icon { opacity: 1; }
.sidebar-nav a.active { background: oklch(27% 0.075 30); color: #fff; font-weight: 600; }
.sidebar-nav a.active .nav-icon { opacity: 1; }

/* ── Grupo desplegable (acordeón "Anticipos") ─────────────────── */
/* La cabecera es un <button class="nav-link nav-group-toggle">: hereda los
   estilos de .sidebar-nav a vía los selectores de abajo (mismo aspecto). */
.sidebar-nav .nav-group-toggle {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 10px 12px; border: 0; background: transparent;
    border-radius: var(--radius-sm); color: rgba(255,255,255,.62);
    font-family: inherit; font-size: 13.5px; font-weight: 500; text-align: left;
    transition: background var(--ease), color var(--ease); cursor: pointer;
}
.sidebar-nav .nav-group-toggle .nav-icon { width: 18px; height: 18px; flex-shrink: 0; opacity: .7; transition: opacity var(--ease); }
.sidebar-nav .nav-group-toggle:hover { background: var(--sidebar-hover); color: #fff; }
.sidebar-nav .nav-group-toggle:hover .nav-icon { opacity: 1; }
.nav-chevron {
    width: 16px; height: 16px; margin-left: auto; flex-shrink: 0; opacity: .55;
    transition: transform var(--ease), opacity var(--ease);
}
.nav-group.open > .nav-group-toggle .nav-chevron { transform: rotate(180deg); opacity: 1; }

/* Submenu: oculto por defecto, expande con .open en el grupo. Animación CSS
   pura vía grid-template-rows (sin medir alturas en JS). El grid va sobre el
   wrapper (un único hijo: la <ul>) para que colapse TODOS los items; si el grid
   fuera la <ul> con N <li>, solo el primer <li> caería en la pista 0fr y el
   resto iría a pistas implícitas (auto) → quedarían visibles. */
.nav-submenu-wrap {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows var(--ease);
}
.nav-group.open > .nav-submenu-wrap { grid-template-rows: 1fr; }
.nav-submenu-wrap > .nav-submenu { min-height: 0; overflow: hidden; }
.nav-submenu {
    list-style: none; margin: 2px 0 0; padding: 0;
}
.nav-submenu > li { margin-bottom: 0; }
/* Sangría de los hijos para jerarquía visual respecto a la cabecera. */
.nav-submenu .nav-link { padding-left: 40px; }

.sidebar-footer {
    margin-top: auto; padding: 16px;
    border-top: 1px solid rgba(255,255,255,.06);
}
.sidebar-user  { display: flex; align-items: center; gap: 10px; }
.user-avatar {
    width: 32px; height: 32px; border-radius: 50%; background: var(--primary);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.user-info { flex: 1; overflow: hidden; }
.user-info .u-name { display: block; font-size: 12.5px; color: #fff; font-weight: 600;
                     white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-info .u-role { display: block; font-size: 10.5px; color: rgba(255,255,255,.40); }
.user-info .u-meta { display: block; font-size: 10px; color: rgba(255,255,255,.26); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.sidebar-wp-link {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; margin-top: 10px;
    border-top: 1px solid rgba(255,255,255,.06);
    color: rgba(255,255,255,.32); font-size: 12px; font-weight: 500;
    text-decoration: none; transition: color var(--ease);
}
.sidebar-wp-link svg { flex-shrink: 0; opacity: .5; transition: opacity var(--ease); }
.sidebar-wp-link:hover { color: rgba(255,255,255,.68); }
.sidebar-wp-link:hover svg { opacity: 1; }

/* ── Main area ──────────────────────────────────────────────── */
#erp-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

/* ── Topbar ─────────────────────────────────────────────────── */
#erp-topbar {
    height: var(--topbar-h); min-height: var(--topbar-h);
    background: var(--surface); border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 24px; gap: 12px; box-shadow: var(--shadow-sm); z-index: 50; overflow: hidden;
}
.topbar-breadcrumb {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--text-muted); flex: 1; min-width: 0;
}
.topbar-breadcrumb .bc-home-icon { flex-shrink: 0; opacity: .4; }
.topbar-breadcrumb .bc-sep { color: var(--border); font-size: 18px; font-weight: 300; line-height: 1; }
.topbar-breadcrumb .bc-page {
    color: var(--text); font-weight: 600; font-size: 13.5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.btn-logout {
    display: flex; align-items: center; gap: 5px; padding: 6px 11px;
    background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
    color: var(--text-muted); font-size: 12.5px; font-weight: 500; cursor: pointer;
    text-decoration: none; transition: all var(--ease);
}
.btn-logout:hover { background: oklch(97% 0.03 22); border-color: oklch(85% 0.08 22); color: oklch(35% 0.13 22); }

/* ── Content area ───────────────────────────────────────────── */
#erp-content { flex: 1; overflow-y: auto; padding: 28px; }

/* ============================================================
   VIEWS
   ============================================================ */
.erp-view { display: none; animation: fadeIn .18s ease; }
.erp-view.active { display: block; }
@keyframes fadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

/* Gate anti-FOUC del inicio: oculta KPIs/grid hasta que el JS diferido decida
   qué pintar (home con datos vs. onboarding "cree su primera solicitud"). Sin
   esto el primer paint muestra los KPIs en "—" y luego salta al onboarding.
   visibility (no display) reserva el alto → sin reflow. inicio-ui.js quita
   .inicio-gate en el primer render. */
#view-inicio.inicio-gate .inicio-summary,
#view-inicio.inicio-gate .inicio-grid { visibility: hidden; }

/* ── Page header ─────────────────────────────────────────── */
.page-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    margin-bottom: 24px; gap: 16px; flex-wrap: wrap;
}
.page-header-left h1 { font-family: var(--font-display); font-size: 1.75rem; font-weight: 400; color: var(--text); line-height: 1.18; letter-spacing: 0; }
.page-header-left p  { font-size: .9375rem; color: var(--text-muted); margin-top: 4px; }

/* ── Card ────────────────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--border);
        border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }

/* ── Tables ──────────────────────────────────────────────── */
.table-wrapper, .table-wrap { overflow-x: auto; }
table.erp-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.erp-table thead th {
    padding: 12px var(--s5); text-align: left; font-size: 11px; font-weight: 600;
    letter-spacing: .05em; text-transform: uppercase; color: var(--ink-light);
    background: var(--surface-2); white-space: nowrap;
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    user-select: none;
    position: sticky; top: 0; z-index: 2;
}
.erp-table thead th.sortable { cursor: pointer; }
.erp-table thead th.sortable:hover { color: var(--text); }
.th-inner { display: inline-flex; align-items: center; gap: 5px; }
.sort-arrows { display: inline-flex; flex-direction: column; gap: 1px; opacity: .3; line-height: 0; }
.sort-arrows svg { display: block; }
th.sort-asc .sort-arrows, th.sort-desc .sort-arrows { opacity: 1; color: var(--primary); }
th.sort-asc .arrow-desc { opacity: .2; }
th.sort-desc .arrow-asc { opacity: .2; }

.erp-table tbody tr { border-bottom: 1px solid var(--border); }
.erp-table tbody tr:last-child { border-bottom: none; }
.erp-table tbody tr:hover { background: var(--surface-2); }
.erp-table td { padding: 15px var(--s5); color: var(--text); vertical-align: middle; transition: background var(--ease); }
.erp-table td.text-muted, .erp-table td.muted { color: var(--text-muted); }

/* Bandejas (partial admin-list-table). Un código, dos fechas y un monto son
   columnas cortas: si la tabla reparte el ancho en partes iguales, en una
   pantalla ancha quedan islas de texto con medio metro de blanco entre ellas,
   y el expediente se parte en tres líneas por los guiones. Las columnas
   marcadas w-fit se ajustan a su contenido y el espacio sobrante se lo queda
   Estado; Acciones va pegada al borde derecho, que es donde se busca. */
.erp-table-bandeja th, .erp-table-bandeja td { white-space: nowrap; }
/* La columna "ancha" (Estado) pide todo el sobrante; con nowrap en el resto,
   cada una queda al ancho de su contenido. (width:1% en las cortas las
   colapsaba y el texto se montaba: no usar.) */
.erp-table-bandeja th.w-max { width: 100%; }
/* La columna ancha lleva contenido real (Motivo / Colaborador), no un badge
   corto: se queda el sobrante y si el texto no cabe, corta con puntos
   suspensivos en vez de empujar la tabla. max-width:0 + width:100% es el truco
   estandar de truncado en tabla con layout auto. */
.erp-table-bandeja td.w-max { max-width: 0; overflow: hidden; text-overflow: ellipsis; }
.erp-table-bandeja th:last-child, .erp-table-bandeja td:last-child { text-align: right; }
.erp-table-bandeja td:last-child .worktray-action { justify-content: flex-end; }
.erp-table td .badge { font-weight: 700; }
.erp-table th.num,
.erp-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Cifras en mono tabular — look ledger, alineadas al píxel (DESIGN §3) */
.erp-table td.num { font-family: var(--font-mono); letter-spacing: -.01em; }
.erp-table th.num .th-inner { justify-content: flex-end; }

/* Celdas de "Mis solicitudes" alineadas al mock (design-preview §7.5):
   Expediente (slug + fecha apilada) · Motivo (flexible, ellipsis) · CECO (mono) */
.erp-table .cell-exp { display: inline-flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.erp-table .cell-exp strong { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.erp-table .cell-exp small { font-size: .6875rem; color: var(--text-muted); }
.erp-table .cell-motivo { display: block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); }
.erp-table td.cell-ceco { font-family: var(--font-mono); font-size: .8125rem; color: var(--text-muted); letter-spacing: -.01em; white-space: nowrap; }

/* Chevron de fila clickeable: se desliza al hover (DESIGN §7.5).
   El chevron es afordancia de navegación de la fila (no acción aislada):
   pointer-events:none en el SVG hace que el click resuelva al row-handler. */
.go { color: var(--ink-light); transition: color var(--ease), transform var(--ease); display: inline-grid; place-items: center; }
.go svg { width: 16px; height: 16px; display: block; pointer-events: none; }
.erp-table tbody tr:hover .go { color: var(--primary); transform: translateX(2px); }

.cell-saldo {
    display: inline-block;
    font-family: var(--font-mono);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.cell-saldo.is-positive { color: var(--badge-solicitud-aprobada-text); }
.cell-saldo.is-negative { color: var(--badge-solicitud-rechazada-text); }
.cell-saldo.is-zero,
.cell-saldo.is-neutral  { color: var(--text-light); font-weight: 500; }

.cell-doc-anticipo {
    display: inline-block;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 12px;
}
.cell-doc-anticipo.is-set     { color: var(--text); }
.cell-doc-anticipo.is-pending {
    color: var(--badge-solicitud-pendiente-text, #7a4a10);
    background: var(--badge-solicitud-pendiente-bg, #fdf4e4);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    max-width: none;
    overflow: visible;
}

.doc-anticipo-widget.is-readonly {
    opacity: .92;
}
.doc-anticipo-widget.is-readonly .doc-anticipo-hint {
    font-style: italic;
}

.cell-gastos {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--surface-strong);
    border: 1px solid var(--border-light);
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.cell-gastos.is-empty { color: var(--text-light); background: transparent; border-color: var(--border-light); }

.worktray-row,
.erp-table tr.row-clickable { cursor: pointer; }
.worktray-row:focus-visible,
.erp-table tr.row-clickable:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}
/* Fila que requiere acción: borde interno terracota (DESIGN §7.5), no fade ni side-stripe */
.erp-table .worktray-row.is-needs-action td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.erp-table .worktray-row:hover td { background: var(--surface-2); }

.worktray-action { display: inline-flex; align-items: center; gap: 10px; }
.worktray-primary { display: inline-flex; align-items: center; gap: 6px; }
.worktray-note {
    display: inline-flex; align-items: center; min-height: 32px;
    font-size: 12.5px; font-weight: 600; color: var(--text-muted);
}
.worktray-note.progress { color: oklch(37% 0.10 38); }
.worktray-note.warning  { color: var(--st-observada-tx); }
.worktray-note.success  { color: var(--st-aprobada-tx); }
.worktray-note.danger   { color: var(--st-rechazada-tx); }
.worktray-person { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.worktray-person strong { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.worktray-person span   { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* ── Column widths per view ──────────────────────────────── */
/* La bandeja unificada (.erp-table-bandeja) usa table-layout AUTO: las columnas
   w-fit se ajustan al contenido con nowrap y Estado (w-max) se queda el
   sobrante. Antes había reglas por-vista con `table-layout: fixed` + ancho fijo
   en la 1ra columna, remanentes de la tabla vieja del colaborador
   (#view-solicitudes). Con fixed, w-max (100%) + EXPE (52px) colapsaban las
   columnas del medio a cero y el texto se montaba: exactamente lo que el
   comentario de .erp-table-bandeja advierte. Se quitaron; el modelo w-fit/w-max
   necesita auto, que es el default. */

.table-empty { text-align: center; padding: 52px 20px; color: var(--text-muted); }
.table-empty svg { width: 38px; height: 38px; margin: 0 auto 10px; display: block; opacity: .25; }
.table-empty p { font-size: 13.5px; margin: 0; }
.table-loading {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; padding: 40px; color: var(--text-muted); font-size: 13px;
}
@keyframes shimmer {
    from { background-position: -200% 0; }
    to   { background-position:  200% 0; }
}
.skel-cell {
    height: 13px; border-radius: 5px;
    background: linear-gradient(90deg, var(--border) 25%, var(--border-light) 50%, var(--border) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.6s infinite linear;
}
.table-skeleton-row td { padding: 14px 16px; }
.tbl-pagination {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
    padding: 10px 16px 12px; border-top: 1px solid var(--border-light);
    font-size: 12.5px; color: var(--text-muted);
}
.tbl-pagination:empty { display: none; }
.tbl-pag-info { font-weight: 500; }
/* Celda "Viaje": inicio → fin en una línea; la flecha atenuada separa sin competir. */
.tbl-rango { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tbl-dni { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl-rango-sep { color: var(--text-muted); margin: 0 2px; }
.tbl-pag-btns { display: flex; gap: 4px; }

/* ── Table Toolbar ─────────────────────────────────────────── */
.tbl-toolbar {
    display: flex; align-items: center; gap: 8px; padding: 10px 16px;
    border-bottom: 1px solid var(--border-light); flex-wrap: wrap;
}
.tbl-toolbar-search { position: relative; flex-shrink: 0; }
.tbl-toolbar-search .search-input { padding-left: 30px; width: 190px; }
.tbl-toolbar-search-icon {
    position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
    color: var(--text-muted); pointer-events: none;
}
.tbl-chips { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.tbl-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 11px; border-radius: 20px;
    border: 1.5px solid var(--border); background: transparent;
    color: var(--text-muted); font-size: 12px; font-weight: 500;
    cursor: pointer; white-space: nowrap; line-height: 1.45; font-family: inherit;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    /* WCAG 2.2 SC 2.5.8: los chips sin badge de conteo (p.ej. el de fecha)
       se quedaban en 23.x de alto, justo por debajo del mínimo de 24px.
       min-height iguala a toda la familia sin tocar tipografía ni padding;
       align-items: center mantiene el contenido centrado. */
    min-height: 24px;
}
.tbl-chip:hover { background: var(--surface-strong); border-color: oklch(55% 0.01 250); color: var(--text); }
.tbl-chip.is-active {
    background: var(--text); border-color: var(--text);
    color: var(--surface);
}
.tbl-chip-count {
    background: oklch(88% 0.014 250); color: oklch(32% 0.04 250);
    border-radius: 10px; padding: 0 6px; font-size: 11px; font-weight: 600; line-height: 1.6;
}
.tbl-toolbar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.tbl-count-label { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.tbl-page-size-wrap { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-muted); }
.tbl-page-size {
    padding: 4px 22px 4px 7px; border: 1.5px solid var(--border); border-radius: 5px;
    background: var(--surface); color: var(--text); font-size: 12px; font-family: inherit;
    cursor: pointer; appearance: none; -webkit-appearance: none; outline: none;
    background-image: url("data:image/svg+xml,%3Csvg width='9' height='5' viewBox='0 0 9 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l3.5 3L8 1' stroke='%236B7280' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 7px center;
}
.tbl-page-size:focus { border-color: var(--primary); }
.tbl-page-size:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.tbl-chip-count:empty { display: none; }
.tbl-chip.is-active .tbl-chip-count { background: rgba(15,20,27,.13); color: inherit; }

/* Estado-tinted active chip states */
.tbl-chip[data-filter="pendiente"].is-active   { background: oklch(83% 0.12 75);  border-color: oklch(72% 0.15 75);  color: oklch(27% 0.10 75); }
.tbl-chip[data-filter="aprobada"].is-active    { background: oklch(83% 0.10 150); border-color: oklch(72% 0.12 150); color: oklch(25% 0.10 150); }
.tbl-chip[data-filter="observada"].is-active   { background: oklch(83% 0.11 55);  border-color: oklch(72% 0.13 55);  color: oklch(27% 0.09 55); }
.tbl-chip[data-filter="rechazada"].is-active   { background: oklch(83% 0.09 18);  border-color: oklch(72% 0.11 18);  color: oklch(25% 0.10 18); }
.tbl-chip[data-filter="no_iniciada"].is-active { background: oklch(84% 0.06 60);  border-color: oklch(73% 0.08 60);  color: oklch(29% 0.07 60); }
.tbl-chip[data-filter="en_proceso"].is-active  { background: oklch(83% 0.10 45);  border-color: oklch(72% 0.12 45);  color: oklch(27% 0.09 45); }
.tbl-chip[data-filter="en_revision"].is-active { background: oklch(83% 0.08 290); border-color: oklch(72% 0.10 290); color: oklch(25% 0.08 290); }

/* Fecha chip */
.tbl-chip-fecha { gap: 5px; }
.tbl-chip-fecha.is-active { background: var(--text); border-color: var(--text); color: var(--surface); }

/* Clear button */
.tbl-clear-btn {
    display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px;
    border-radius: 5px; border: 1.5px solid oklch(82% 0.04 15);
    background: oklch(96% 0.012 15); color: oklch(36% 0.09 15);
    font-size: 11.5px; font-family: inherit; font-weight: 500; cursor: pointer;
    transition: background 0.12s;
}
.tbl-clear-btn:hover { background: oklch(90% 0.02 15); }

/* Toolbar dates strip (collapsible) */
.tbl-toolbar-dates {
    flex: 0 0 100%; display: flex; align-items: center; gap: 8px;
    max-height: 0; overflow: hidden; opacity: 0; padding: 0;
    transition: max-height 0.22s cubic-bezier(0.25,0,0,1), opacity 0.18s ease, padding 0.22s;
}
.tbl-toolbar-dates.is-open {
    max-height: 52px; opacity: 1; padding: 9px 0 3px;
    border-top: 1px solid var(--border-light);
}
.tbl-dates-label { font-size: 12px; font-weight: 500; color: var(--text-muted); white-space: nowrap; }
.tbl-date-field {
    font-size: 12px; font-weight: 600; color: var(--text);
    padding: 4px 26px 4px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface); cursor: pointer;
}
.tbl-date-field:focus { border-color: var(--primary); outline: none; }
.tbl-dates-sep { font-size: 11px; color: var(--text-muted); padding: 0 2px; }
.tbl-date-input {
    padding: 4px 7px; border: 1.5px solid var(--border); border-radius: 5px;
    background: var(--surface); color: var(--text); font-size: 12px; font-family: inherit;
    outline: none; cursor: pointer;
}
.tbl-date-input:focus { border-color: var(--primary); }
.tbl-date-input:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* ── Search input ─────────────────────────────────────────── */
.search-input {
    padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-size: 13px; color: var(--text); font-family: inherit;
    outline: none; transition: border-color var(--ease), box-shadow var(--ease); width: 220px;
}
.search-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(218,91,62,.15); }

/* ── Badges ──────────────────────────────────────────────── */
.badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 999px; font-size: .6875rem; font-weight: 700; white-space: nowrap;
    border: 1px solid transparent;
}
.badge::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* Con icono de estado (§5/§7.7) el SVG reemplaza al punto */
.badge.has-ic::before { display: none; }
.badge.has-ic svg { width: 13px; height: 13px; flex-shrink: 0; }
.badge-solicitud-pendiente { background: var(--badge-solicitud-pendiente-bg); color: var(--badge-solicitud-pendiente-text); border-color: var(--badge-solicitud-pendiente-border); }
.badge-solicitud-aprobada  { background: var(--badge-solicitud-aprobada-bg);  color: var(--badge-solicitud-aprobada-text);  border-color: var(--badge-solicitud-aprobada-border); }
.badge-solicitud-observada { background: var(--badge-solicitud-observada-bg); color: var(--badge-solicitud-observada-text); border-color: var(--badge-solicitud-observada-border); }
.badge-solicitud-rechazada { background: var(--badge-solicitud-rechazada-bg); color: var(--badge-solicitud-rechazada-text); border-color: var(--badge-solicitud-rechazada-border); }
.badge-rendicion-no_disponible { background: var(--badge-rendicion-no-disponible-bg); color: var(--badge-rendicion-no-disponible-text); border-color: var(--badge-rendicion-no-disponible-border); }
.badge-rendicion-no_iniciada   { background: var(--badge-rendicion-no-iniciada-bg);   color: var(--badge-rendicion-no-iniciada-text);   border-color: var(--badge-rendicion-no-iniciada-border); }
.badge-rendicion-en_proceso    { background: var(--badge-rendicion-en-proceso-bg);    color: var(--badge-rendicion-en-proceso-text);    border-color: var(--badge-rendicion-en-proceso-border); }
.badge-rendicion-en_revision   { background: var(--badge-rendicion-en-revision-bg);   color: var(--badge-rendicion-en-revision-text);   border-color: var(--badge-rendicion-en-revision-border); }
.badge-rendicion-aprobada      { background: var(--badge-rendicion-aprobada-bg);      color: var(--badge-rendicion-aprobada-text);      border-color: var(--badge-rendicion-aprobada-border); }
.badge-rendicion-observada     { background: var(--badge-rendicion-observada-bg);     color: var(--badge-rendicion-observada-text);     border-color: var(--badge-rendicion-observada-border); }
.badge-rendicion-rechazada     { background: var(--badge-rendicion-rechazada-bg);     color: var(--badge-rendicion-rechazada-text);     border-color: var(--badge-rendicion-rechazada-border); }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px;
    border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; cursor: pointer;
    border: 1px solid transparent; text-decoration: none;
    transition: all var(--ease); white-space: nowrap; font-family: inherit;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary   { background: var(--primary-dark); color: oklch(99% 0.005 30); border-color: var(--primary-dark); }
.btn-primary:hover:not(:disabled) { background: var(--primary-darker); border-color: var(--primary-darker); box-shadow: 0 2px 8px rgba(150,56,33,.22); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-secondary:hover:not(:disabled) { background: var(--bg); border-color: var(--border-strong); }
.btn-ghost     { background: transparent; color: var(--text-muted); border-color: transparent; padding: 6px 10px; }
.btn-ghost:hover:not(:disabled) { background: var(--bg); color: var(--text); }
.btn-sm        { padding: 5px 11px; font-size: 12px; }
.btn-success   { background: oklch(95% 0.07 150); color: oklch(30% 0.10 150); border-color: oklch(80% 0.12 150); }
.btn-success:hover:not(:disabled) { background: oklch(90% 0.09 150); box-shadow: 0 2px 8px oklch(30% 0.10 150 / .15); }
.btn-warning   { background: var(--st-observada-bg); color: var(--st-observada-tx); border-color: var(--badge-solicitud-observada-border); }
.btn-warning:hover:not(:disabled) { background: #FFEDD5; }
.btn-danger    { background: var(--st-rechazada-bg); color: var(--st-rechazada-tx); border-color: var(--badge-solicitud-rechazada-border); }
.btn-danger:hover:not(:disabled)  { background: var(--st-rechazada-bg); box-shadow: 0 2px 8px rgba(220,38,38,.2); }
/* ── Botones de decisión admin (aprobar / observar / rechazar) ── */
.btn-decide-rechazar { background: transparent; color: oklch(35% .13 22); border: 1px solid oklch(88% .05 22); padding: 8px 14px; border-radius: var(--radius-sm); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background var(--ease), border-color var(--ease); white-space: nowrap; }
.btn-decide-rechazar:hover:not(:disabled) { background: oklch(96% .04 22); border-color: oklch(78% .09 22); }
.btn-decide-observar { background: oklch(96% .05 52); color: oklch(37% .12 40); border: 1px solid oklch(78% .10 52); padding: 8px 14px; border-radius: var(--radius-sm); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background var(--ease), box-shadow var(--ease); white-space: nowrap; }
.btn-decide-observar:hover:not(:disabled) { background: oklch(92% .07 52); box-shadow: 0 2px 8px oklch(37% .12 40 / .14); }
.btn-decide-aprobar { background: var(--primary-dark); color: oklch(99% 0.005 30); border: 1px solid var(--primary-dark); padding: 9px 18px; border-radius: var(--radius-sm); font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: .01em; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: background var(--ease), box-shadow var(--ease), transform .12s; white-space: nowrap; }
.btn-decide-aprobar:hover:not(:disabled) { background: var(--primary-darker); border-color: var(--primary-darker); box-shadow: 0 3px 12px rgba(150,56,33,.28); transform: translateY(-1px); }
.btn-decide-aprobar:active:not(:disabled) { transform: translateY(0); }
.btn-decide-rechazar:disabled,.btn-decide-observar:disabled,.btn-decide-aprobar:disabled { opacity: .55; cursor: not-allowed; }
/* .decision-sep se retiró con el issue #16 (3): era un separador pensado para
   una fila horizontal y en la columna del aside se veía como una rayita suelta
   de 1×22px en el medio. Lo reemplaza la zona .solv-decision. */

/* Jerarquía decisión admin: Aprobar primario derecha, Observar/Rechazar secundarios izquierda. */
.modal-footer-decide {
    display: flex; align-items: center; gap: 8px; padding: 14px 20px;
    border-top: 1px solid var(--border-light); background: var(--surface-strong);
    flex-wrap: wrap;
}
/* Observar/Rechazar a la izquierda, Aprobar (primario) empujado a la derecha. */
.modal-footer-decide-secondary { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; }
.modal-footer-decide .btn-decide-primary {
    padding: 10px 22px; font-size: 13.5px; box-shadow: 0 2px 8px rgba(150,56,33,.18);
}
.solv-exp-actions .btn-decide-rechazar,.solv-exp-actions .btn-decide-observar,.solv-exp-actions .btn-decide-aprobar { min-height: 36px; font-size: .84rem; }

/* ── Spinner ─────────────────────────────────────────────── */
.spinner {
    width: 20px; height: 20px; border: 2px solid var(--border);
    border-top-color: var(--primary); border-radius: 50%;
    animation: spin .7s linear infinite; flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Modals ──────────────────────────────────────────────── */
.modal-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(15,23,42,.55); backdrop-filter: blur(3px);
    z-index: 1000; align-items: center; justify-content: center; padding: 20px;
}
.modal-overlay.open { display: flex; animation: overlayIn .18s ease; }
@keyframes overlayIn { from { opacity:0; } to { opacity:1; } }
.modal {
    background: var(--surface); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); width: 100%; max-width: 580px;
    max-height: 92vh; overflow-y: auto; animation: modalIn .2s ease;
}
.modal-lg { max-width: 720px; }
.modal-xl { max-width: 960px; }
@keyframes modalIn { from { opacity:0; transform:translateY(-16px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }
/* Liquidación modal layout — flex column so internal table scrolls, chrome stays fixed */
.liq-modal { display: flex; flex-direction: column; }
.liq-modal .modal-body { flex: 1; min-height: 0; padding: 0; }
.modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px 18px; border-bottom: 1px solid var(--border);
}
.modal-header h2, .modal-header-info h2 { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--text); }
.modal-header p,  .modal-header-info p  { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.modal-close {
    width: 32px; height: 32px; border: none; background: var(--bg);
    border-radius: var(--radius-sm); display: flex; align-items: center;
    justify-content: center; cursor: pointer; color: var(--text-muted);
    transition: background var(--ease), color var(--ease); flex-shrink: 0;
}
.modal-close:hover { background: var(--st-rechazada-bg); color: var(--st-rechazada-tx); }
.modal-close:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.modal-body { padding: 24px; }
.modal-footer {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 10px; padding: 16px 24px; border-top: 1px solid var(--border);
    background: var(--surface-strong); border-radius: 0 0 var(--radius-lg) var(--radius-lg); flex-wrap: wrap;
}

/* ── Forms ───────────────────────────────────────────────── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-grid .col-full { grid-column: 1 / -1; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group[hidden] { display: none; }
.form-label { font-size: 12.5px; font-weight: 600; color: var(--text); }
.form-label .required { color: var(--primary); margin-left: 2px; }
.form-control {
    width: 100%; padding: 9px 12px; border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm); font-size: 13.5px; color: var(--text);
    background: var(--surface); font-family: inherit;
    transition: border-color var(--ease), box-shadow var(--ease); outline: none;
}
.form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(218,91,62,.15); }
.form-control:invalid:not(:placeholder-shown) { border-color: #FC8181; }
textarea.form-control { resize: vertical; min-height: 88px; }
/* Inputs monoespaciados para cifras, fechas y códigos (montos/fechas/operación) */
.form-control.mono {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
    font-weight: 500;
}
.form-control.mono--right { text-align: right; }
input[type="date"].form-control.mono { font-weight: 500; }
.form-hint  { font-size: 11.5px; color: var(--text-muted); }
.form-error { font-size: 11.5px; color: var(--st-rechazada-tx); display: none; }
.form-error.visible {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}
.form-error.visible::before {
    content: '!';
    display: inline-flex;
    width: 14px;
    height: 14px;
    align-items: center;
    justify-content: center;
    background: var(--st-rechazada-tx);
    color: #fff;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    flex: 0 0 auto;
}

.form-control.is-invalid,
.form-control.is-invalid:focus {
    border-color: var(--st-rechazada-tx);
    background-color: var(--st-rechazada-bg);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
    animation: viaFieldShake .35s cubic-bezier(.36, .07, .19, .97);
}
.input-prefix-wrap:has(.form-control.is-invalid) .input-prefix {
    border-color: var(--st-rechazada-tx);
    background: var(--st-rechazada-bg);
    color: var(--st-rechazada-tx);
}
@keyframes viaFieldShake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }
    40%, 60% { transform: translate3d(3px, 0, 0); }
}
.input-prefix-wrap { display: flex; }
.input-prefix {
    padding: 9px 10px; background: var(--surface-2); border: 1px solid var(--border-strong);
    border-right: none; border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    font-size: 13px; color: var(--text-muted); font-weight: 500; white-space: nowrap;
}
.input-prefix-wrap .form-control { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* Solicitud — profile readonly section */
.sol-profile-section {
    background: var(--primary-light); border-radius: var(--radius-md);
    border: 1px solid oklch(87% 0.09 28);
    padding: 12px 16px; margin-bottom: 0;
    display: grid; grid-template-columns: 3fr 2fr; gap: 10px 20px;
}
.sol-profile-field { display: flex; flex-direction: column; gap: 2px; }
.sol-profile-field.col-full { grid-column: 1 / -1; }
.sol-profile-label {
    font-size: 10px; font-weight: 700; color: oklch(42% 0.11 35);
    text-transform: uppercase; letter-spacing: 0.06em;
}
.sol-profile-value { font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.3; }
.sol-profile-value.is-empty { color: oklch(55% 0.07 35); font-style: italic; }

/* Form section divider label
   ───────────────────────────
   El separador de secciones del formulario: una línea con nombre. El dueño
   pidió "una línea o algo que diferencie secciones"; se eligió ESTE elemento y
   no un <hr> ni solo más aire por tres razones.
   1. Ya existía en el sistema (se usaba una vez, para "Datos del viaje"). El
      arreglo es usarlo las veces que hagan falta, no agregar vocabulario.
   2. Una regla pelada separa pero no explica. El rótulo dice además en qué
      bloque estás entrando, que es la mitad del problema: el modal no se leía
      como "cuándo viaja / a qué se imputa / qué acepta" sino como una lista
      plana de campos.
   3. Es texto, no adorno: viaja en el orden de lectura y le da a un lector de
      pantalla el mismo encabezamiento que al ojo.
   El borde pasó de --border-light (oklch 95%, invisible sobre blanco) a
   --border: si la línea no se ve, no separa nada. El margen superior sube a
   26px para que el aire acompañe a la línea en lugar de dejarla sola. */
.form-section-label {
    font-size: 10px; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.07em;
    margin: 26px 0 14px; padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
/* La primera sección arranca pegada al bloque de perfil, que ya es una
   superficie propia y no necesita el aire completo por encima. */
.sol-profile-section + .form-section-label { margin-top: 18px; }

/* ── Nueva Solicitud: bloque T&C ────────────────────────── */
.ns-tc-block { margin-top: 4px; }
.ns-tc-text {
    font-size: 12.5px; color: var(--text-muted); line-height: 1.65;
    background: var(--bg-alt, #f7f8fb); border: 1px solid var(--border-light);
    border-radius: 8px; padding: 12px 14px; margin-bottom: 10px;
}
/* El enlace al PDF vive DENTRO de la frase de aceptación (sobre la palabra
   "términos"), no en un renglón propio encima. Por eso es inline y subrayado
   por defecto: dentro de un texto corrido el subrayado es la única señal de
   que es un enlace. El icono de documento va como glifo, sin romper la línea. */
.ns-tc-doc-link {
    color: var(--accent, #b8621b);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.ns-tc-doc-link svg { vertical-align: -2px; margin-left: 3px; }
.ns-tc-doc-link:hover { color: var(--primary-darker, #8a4713); }
.ns-tc-doc-link:focus-visible {
    outline: 2px solid var(--accent, #b8621b);
    outline-offset: 2px;
    border-radius: 2px;
}
.ns-tc-label {
    display: flex; align-items: flex-start; gap: 9px;
    font-size: 13px; font-weight: 500; color: var(--text); cursor: pointer;
    line-height: 1.4;
    /* WCAG 2.2 SC 2.5.8: el checkbox nativo mide 13x13 y agrandarlo con CSS
       lo deforma y lo desalinea del texto. El <label> envuelve al input, así
       que el área que realmente acepta el toque es esta caja: le damos los
       24px de alto mínimos y el control nativo se queda intacto.
       align-items: flex-start deja el checkbox pegado a la primera línea. */
    min-height: 24px;
}
.ns-tc-label input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; }

/* ── Rendir Gasto: category auto-fill panel ─────────────── */
.rg-cat-panel {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    align-items: center;
    gap: 12px 24px;
    padding: 0 16px;
    margin-top: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    background: var(--primary-light);
    border: 1px solid oklch(87% 0.09 28);
    border-radius: var(--radius-md);
    transition:
        opacity .16s ease-out,
        max-height .24s cubic-bezier(.22, 1, .36, 1),
        padding .24s cubic-bezier(.22, 1, .36, 1),
        margin-top .24s cubic-bezier(.22, 1, .36, 1);
}
.rg-cat-panel.is-visible {
    opacity: 1;
    max-height: 160px;
    padding: 14px 18px;
    margin-top: 10px;
}
.rg-cat-panel__field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rg-cat-panel__label {
    font-size: 10px; font-weight: 700;
    color: oklch(42% 0.11 35);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.rg-cat-panel__value {
    font-size: 13.5px; font-weight: 600;
    color: var(--text);
    line-height: 1.35;
    word-break: break-word;
}
.rg-cat-panel__value--mono {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.rg-cat-panel__lock {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    color: oklch(42% 0.11 35);
    background: var(--surface);
    border-radius: 999px;
    opacity: .75;
}
/* Ayuda de la categoría seleccionada: reusa .form-hint (mismo tono que el
   resto de textos de apoyo del formulario) pero necesita línea propia y aire
   respecto del panel de arriba. */
.rg-cat-ayuda { display: block; margin-top: 8px; }
.rg-cat-ayuda[hidden] { display: none; }

.rg-ocr-hint {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius-md, 8px);
    background-color: oklch(96% 0.04 60);
    color: oklch(40% 0.12 60);
    font-size: 13px;
}
.rg-ocr-hint[hidden] { display: none !important; }
.rg-ocr-hint svg { flex: 0 0 auto; }

.rg-ocr-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin: 8px 0 14px;
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--border, #e5e7eb);
    background-color: #fafafa;
    font-size: 13px;
    line-height: 1.4;
    animation: rgOcrBannerIn .25s ease-out;
}
.rg-ocr-banner[hidden] { display: none !important; }
.rg-ocr-banner__icon {
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
}
.rg-ocr-banner__text { flex: 1 1 auto; color: var(--text, #1f2937); }
.rg-ocr-banner__close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* WCAG 2.2 SC 2.5.8: área táctil mínima 24x24px CSS. El ícono visual
       (fill-icon vía font/svg interno) no cambia, solo la caja del botón. */
    width: 24px;
    height: 24px;
    background: transparent;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    color: var(--text-muted);
    opacity: .7;
    transition: opacity .15s, background-color .15s;
}
.rg-ocr-banner__close:hover { opacity: 1; background-color: rgba(15,20,27,.06); }

.rg-ocr-banner.is-success {
    background-color: oklch(97% 0.05 150);
    border-color: oklch(82% 0.10 150);
}
.rg-ocr-banner.is-success .rg-ocr-banner__icon {
    background-color: oklch(70% 0.15 150);
    color: #fff;
}
.rg-ocr-banner.is-success .rg-ocr-banner__icon::before { content: '✓'; }

.rg-ocr-banner.is-warning {
    background-color: oklch(97% 0.06 80);
    border-color: oklch(82% 0.13 80);
}
.rg-ocr-banner.is-warning .rg-ocr-banner__icon {
    background-color: oklch(70% 0.16 70);
    color: #fff;
}
.rg-ocr-banner.is-warning .rg-ocr-banner__icon::before { content: '!'; }

.rg-ocr-banner.is-error {
    background-color: oklch(96% 0.04 25);
    border-color: oklch(80% 0.12 25);
}
.rg-ocr-banner.is-error .rg-ocr-banner__icon {
    background-color: oklch(60% 0.20 25);
    color: #fff;
}
.rg-ocr-banner.is-error .rg-ocr-banner__icon::before { content: '×'; font-size: 16px; }

@keyframes rgOcrBannerIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.rg-ocr-loader {
    margin-top: 16px;
    display: flex;
    justify-content: center;
}
.rg-ocr-loader[hidden] { display: none !important; }
.rg-ocr-loader__card {
    width: 100%;
    max-width: 460px;
    background-color: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius-lg, 12px);
    padding: 24px 24px 22px;
    text-align: center;
    box-shadow: 0 6px 24px -8px rgba(15,20,27,.12);
}
.rg-ocr-loader__icon {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background-color: oklch(95% 0.06 40);
    color: var(--primary, #da5b3e);
    margin-bottom: 12px;
    animation: rgOcrPulse 1.6s ease-in-out infinite;
}
.rg-ocr-loader__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text, #111827);
}
.rg-ocr-loader__step {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
    min-height: 18px;
    transition: opacity .25s;
}
.rg-ocr-loader__bar {
    margin-top: 14px;
    height: 6px;
    width: 100%;
    background-color: oklch(94% 0.01 0);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.rg-ocr-loader__bar-fill {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 35%;
    background: linear-gradient(90deg,
        var(--primary, #da5b3e) 0%,
        oklch(72% 0.17 50) 50%,
        var(--primary, #da5b3e) 100%);
    border-radius: 999px;
    will-change: transform;
    animation: rgOcrSlide 1.4s cubic-bezier(.4,.0,.2,1) infinite;
}
.rg-ocr-loader__hint {
    margin-top: 14px;
    font-size: 12px;
    color: var(--text-muted);
}
@keyframes rgOcrSlide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(286%); }
}
@keyframes rgOcrPulse {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%      { transform: scale(1.08); opacity: .85; }
}

.ocr-picker-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ocr-picker-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.ocr-picker-item:hover {
    border-color: var(--primary, #da5b3e);
    background-color: oklch(98% 0.04 40);
}
.ocr-picker-item.is-selected {
    border-color: var(--primary, #da5b3e);
    background-color: oklch(96% 0.06 40);
}
.ocr-picker-item__icon {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-soft, #f3f4f6);
    border-radius: 6px;
    color: var(--text-muted);
    flex: 0 0 auto;
}
.ocr-picker-item.is-selected .ocr-picker-item__icon {
    background-color: var(--primary, #da5b3e);
    color: #fff;
}
.ocr-picker-item__name {
    flex: 1 1 auto;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ocr-picker-item__size {
    font-size: 12px;
    color: var(--text-muted);
    flex: 0 0 auto;
}
.form-control.is-autofilled {
    border-color: oklch(70% 0.15 90);
    background-color: oklch(98% 0.04 90);
}
.form-control.is-autofilled:focus {
    border-color: var(--primary, #da5b3e);
    background-color: #fff;
}
@media (max-width: 600px) {
    .rg-cat-panel { grid-template-columns: 1fr; }
    .rg-cat-panel__lock { justify-self: start; }
    .rg-cat-panel.is-visible { max-height: 320px; }
}


/* ── Toast ───────────────────────────────────────────────── */
#toast-container {
    position: fixed; top: 20px; right: 20px; z-index: 9999;
    display: flex; flex-direction: column; gap: 10px; max-width: 360px; width: 100%;
}
.toast {
    display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
    border-radius: var(--radius-md); box-shadow: var(--shadow-md);
    font-size: 13px; font-weight: 500; animation: toastIn .25s ease;
    border: 1px solid transparent;
}
@keyframes toastIn { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }
.toast-success { background: oklch(97% 0.05 150); border-color: oklch(82% 0.12 150); color: oklch(30% 0.10 150); }
.toast-error   { background: oklch(97% 0.04 22);  border-color: oklch(82% 0.09 22);  color: oklch(35% 0.13 22); }
.toast-warning { background: oklch(96% 0.06 80);  border-color: oklch(82% 0.13 70);  color: oklch(34% 0.11 65); }
.toast-info    { background: oklch(97% 0.03 250); border-color: oklch(82% 0.07 250); color: oklch(32% 0.09 250); }
.toast-icon    { flex-shrink: 0; margin-top: 1px; }
.toast-body    { flex: 1; }
.toast-body strong { display: block; font-weight: 700; }
.toast-body p      { font-weight: 400; margin-top: 2px; opacity: .85; }

/* ── Adjuntos panel (inside gasto accordion body) ──────────── */
/* Flat por default — evita "card-en-card" cuando vive dentro del
   detalle de gasto (que ya es surface-strong). La variante --flat se
   aplica desde detalle-ui.js para distinguir del uso heredado. */
.gasto-adj-panel {
    margin-top: 12px;
    padding: 12px 14px 10px;
    background: #F8FAFC;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
}
.gasto-adj-panel.gasto-adj-panel--flat {
    margin-top: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}
.gasto-adj-title {
    font-family: 'Manrope', sans-serif;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.gasto-adj-panel--flat .gasto-adj-title {
    margin-bottom: 6px;
}
.gasto-adj-list { display: flex; flex-direction: column; gap: 6px; }
.gasto-adj-empty {
    font-size: 12.5px; color: var(--text-muted);
    padding: 8px 0; font-style: italic;
}
.gasto-adj-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; background: var(--surface);
    border: 1px solid var(--border); border-radius: 8px;
    font-size: 12.5px; transition: box-shadow var(--ease);
}
.gasto-adj-item:hover { box-shadow: var(--shadow-sm); }
.gasto-adj-icon {
    width: 30px; height: 30px; border-radius: 6px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 9.5px; font-weight: 800; color: #fff; letter-spacing: .03em;
}
.gasto-adj-icon.pdf  { background: oklch(55% 0.20 22); }
.gasto-adj-icon.img  { background: oklch(53% 0.16 148); }
.gasto-adj-icon.xml  { background: oklch(64% 0.15 70); }
.gasto-adj-icon.file { background: oklch(52% 0.03 250); }
.gasto-adj-name {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; color: var(--text); font-weight: 500;
}
.gasto-adj-actions { display: flex; gap: 5px; flex-shrink: 0; }
.gasto-adj-btn {
    font-size: 11.5px; padding: 4px 10px;
    border: 1px solid var(--border); border-radius: 6px;
    background: var(--surface); cursor: pointer;
    color: var(--text-muted); transition: all var(--ease); font-weight: 500;
}
.gasto-adj-btn:hover { background: var(--bg); color: var(--text); border-color: oklch(68% 0.01 250); }
.gasto-adj-btn.del { color: var(--badge-solicitud-rechazada-text); border-color: var(--badge-solicitud-rechazada-border); background: var(--badge-solicitud-rechazada-bg); }
.gasto-adj-btn.del:hover { background: oklch(93% 0.05 22); border-color: oklch(75% 0.15 22); }
.gasto-adj-loading { font-size: 12px; color: var(--text-muted); font-style: italic; }

/* ═══════════════════════════════════════════════════════════════
   RENDIR GASTO · WIZARD MODAL · 2 PASOS
   ═══════════════════════════════════════════════════════════════ */

/* Modal shell: focused wizard width, taller, flex column for sticky header/footer */
.modal-wizard {
    width: 100%;
    max-width: 680px;
    max-height: 95vh;
    min-height: 560px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.modal-wizard > .wizard-topbar,
.modal-wizard > .wizard-footer { flex-shrink: 0; }
.modal-wizard > .wizard-body {
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

/* Topbar: consolida stepper + solicitud ref + close en un solo chrome de ~60px */
.wizard-topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px 14px 24px;
    background: var(--surface-strong);
    border-bottom: 1px solid var(--border);
}
.wizard-topbar__progress {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.wizard-topbar__progress .wizard-step__line {
    flex: 0 0 auto;
    width: 44px;
    min-width: 44px;
}
.wizard-topbar__ref {
    margin-left: auto;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
    letter-spacing: 0.01em;
}
.wizard-topbar__ref strong {
    color: var(--text);
    font-family: var(--font-display);
    font-weight: 700;
    margin-left: 2px;
}
.wizard-topbar .modal-close { flex-shrink: 0; }
.wizard-step {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--text-muted);
    font: inherit;
    flex-shrink: 0;
    cursor: default;
    transition: opacity var(--ease);
}
.wizard-step:not(:disabled) { cursor: pointer; }
.wizard-step:disabled { opacity: .72; }
.wizard-step__node {
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: var(--surface);
    border: 1.5px solid var(--border);
    color: var(--text-muted);
    font-family: var(--font-display);
    font-size: 12.5px;
    font-weight: 700;
    transition: background-color .22s ease, border-color .22s ease, color .22s ease, transform .2s ease;
}
.wizard-step__num,
.wizard-step__check {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
}
.wizard-step__check { display: none; width: 14px; height: 14px; margin: auto; }
.wizard-step.is-active .wizard-step__node {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--surface);
    transform: scale(1.05);
}
.wizard-step.is-complete .wizard-step__node {
    background: var(--primary-light);
    border-color: var(--primary-light);
    color: oklch(42% 0.11 35);
}
.wizard-step.is-complete .wizard-step__num { display: none; }
.wizard-step.is-complete .wizard-step__check { display: grid; }
.wizard-step__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    transition: color .22s ease;
    white-space: nowrap;
}
.wizard-step.is-active .wizard-step__label,
.wizard-step.is-complete .wizard-step__label { color: var(--text); }
.wizard-step__line {
    flex: 1;
    height: 1.5px;
    background: var(--border);
    border-radius: 2px;
    transition: background-color .3s ease;
    min-width: 20px;
}
.wizard-topbar[data-current="2"] .wizard-step__line { background: oklch(80% 0.12 28); }

/* Panels: absolute-stack with fade/slide */
.wizard-panel {
    position: absolute;
    inset: 0;
    padding: 28px 32px 28px;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    opacity: 0;
    visibility: hidden;
    transform: translateX(14px);
    transition:
        opacity .2s ease-out,
        transform .24s cubic-bezier(.22, 1, .36, 1),
        visibility 0s linear .24s;
}
.wizard-panel::-webkit-scrollbar { width: 10px; }
.wizard-panel::-webkit-scrollbar-track { background: transparent; }
.wizard-panel::-webkit-scrollbar-thumb {
    background: var(--border);
    border: 3px solid var(--surface);
    border-radius: 999px;
}
.wizard-panel::-webkit-scrollbar-thumb:hover { background: var(--text-light); }
/* Spacing between top-level form groups inside a panel (step 1 uses stacked groups) */
.wizard-panel > .form-group + .form-group { margin-top: 22px; }
.wizard-panel.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
        opacity .22s ease-out,
        transform .26s cubic-bezier(.22, 1, .36, 1),
        visibility 0s linear 0s;
}
.modal-wizard[data-wizard-step="2"] .wizard-panel[data-step="1"]:not(.is-active) {
    transform: translateX(-14px);
}
.wizard-panel__title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
    margin: 0 0 6px;
    line-height: 1.25;
}
.wizard-panel__subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0 0 26px;
    line-height: 1.55;
}
/* Dense panel (step 2): form-heavy, drop subtitle gap, title flows straight into summary */
.wizard-panel--dense .wizard-panel__title { margin-bottom: 16px; }

/* Summary strip (step 2): compact */
.wizard-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--primary-light);
    border: 1px solid oklch(87% 0.09 28);
    border-radius: var(--radius-sm);
    margin-bottom: 18px;
}
.wizard-summary__line {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--text);
}
.wizard-summary__cat { font-weight: 700; }
.wizard-summary__sep { color: var(--text-muted); font-weight: 400; }
.wizard-summary__clase {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    padding: 2px 8px;
    background: var(--surface);
    border-radius: 999px;
    font-weight: 600;
    color: oklch(42% 0.11 35);
    border: 1px solid oklch(85% 0.08 28);
    letter-spacing: 0.02em;
}
.wizard-summary__files {
    font-size: 11.5px;
    color: var(--text-muted);
    font-weight: 500;
}
.wizard-summary__back {
    background: transparent;
    border: 0;
    color: oklch(42% 0.11 35);
    font-size: 10.5px;
    font-weight: 700;
    cursor: pointer;
    padding: 5px 9px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: background-color var(--ease);
    flex-shrink: 0;
    /* WCAG 2.2 SC 2.5.8: 24px de alto mínimo. El texto conserva su tamaño;
       solo crece la caja del botón (centrada). */
    min-height: 24px;
    display: inline-flex;
    align-items: center;
}
.wizard-summary__back:hover { background: oklch(93% 0.06 28); }

/* Dropzone */
.dropzone-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
}
.dropzone-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.6;
}
.dropzone-badge.is-optional {
    background: var(--surface);
    color: var(--text-muted);
    border: 1px solid var(--border);
}
.dropzone-badge.is-required {
    background: oklch(96% 0.04 22);
    color: oklch(35% 0.13 22);
    border: 1px solid oklch(82% 0.09 22);
}
.dropzone {
    position: relative;
    border: 1.5px dashed var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-strong);
    min-height: 180px;
    display: flex;
    flex-direction: column;
    transition: border-color var(--ease), background-color var(--ease);
}
.dropzone.is-dragover {
    border-color: var(--primary);
    background: var(--primary-light);
    border-style: solid;
}
.dropzone.is-required:not(.has-files) { border-color: oklch(82% 0.11 22); }
.dropzone.has-error {
    border-color: oklch(65% 0.20 22);
    background: oklch(97% 0.025 22);
    animation: dzShake .32s cubic-bezier(.36, .07, .19, .97);
}
@keyframes dzShake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}
.dropzone-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1;
    min-height: 180px;
    padding: 28px 24px;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--text-muted);
    font: inherit;
    text-align: center;
    transition: color var(--ease);
}
.dropzone-empty:hover { color: var(--primary); }
.dropzone-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-muted);
    margin-bottom: 10px;
    transition: background-color var(--ease), color var(--ease), transform var(--ease);
}
.dropzone-empty:hover .dropzone-icon,
.dropzone.is-dragover .dropzone-icon {
    background: var(--primary);
    color: var(--surface);
    transform: translateY(-1px);
}
.dropzone-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}
.dropzone-sub {
    font-size: 12px;
    color: var(--text-muted);
}
.dropzone-files {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
}
.dropzone.has-files .dropzone-files { padding: 14px 14px 0; }
/* IP3 — variante de un archivo (devolución, constancia de sobregasto): vive en
   un modal-sm, así que es más baja, y el chip cierra la caja (no hay
   "agregar otro" debajo). El texto de error va dentro de la zona. */
.dropzone--single,
.dropzone--single .dropzone-empty { min-height: 132px; }
.dropzone--single .dropzone-empty { padding: 18px 16px; }
.dropzone--single.has-files { min-height: 0; }
.dropzone--single.has-files .dropzone-files { padding: 12px; }
.dropzone-error {
    margin: 0;
    padding: 0 14px 12px;
    font-size: 12px;
    line-height: 1.45;
    color: oklch(48% 0.18 22);
}
.dropzone-file {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
}
.dropzone-file__icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    font-size: 9px;
    font-weight: 800;
    color: var(--surface);
    flex-shrink: 0;
    letter-spacing: 0.02em;
}
.dropzone-file__icon.pdf  { background: oklch(58% 0.20 22); }
.dropzone-file__icon.img  { background: oklch(58% 0.15 150); }
.dropzone-file__icon.file { background: oklch(55% 0.01 260); }
.dropzone-file__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    color: var(--text);
}
.dropzone-file__size {
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.dropzone-file__remove {
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--text-light);
    padding: 4px;
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    transition: background-color var(--ease), color var(--ease);
    /* WCAG 2.2 SC 2.5.8: 24x24 mínimo. Es el control más riesgoso del wizard
       (un toque impreciso borra el comprobante equivocado); el ícono de 12px
       no cambia, solo el área de toque vía min-width/min-height. */
    min-width: 24px;
    min-height: 24px;
}
.dropzone-file__remove:hover {
    background: oklch(96% 0.03 22);
    color: oklch(50% 0.18 22);
}
.dropzone-add {
    display: inline-flex;
    align-self: center;
    align-items: center;
    gap: 6px;
    margin: 8px auto 12px;
    padding: 5px 11px;
    background: transparent;
    border: 0;
    color: oklch(42% 0.11 35);
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background-color var(--ease);
    /* WCAG 2.2 SC 2.5.8: 24px de alto mínimo. El texto/ícono conservan su
       tamaño; solo crece la caja del botón (centrada por align-items). */
    min-height: 24px;
}
.dropzone-add:hover { background: var(--primary-light); }
.dropzone-add svg { flex-shrink: 0; }

/* Footer: show/hide actions per step */
.wizard-footer { gap: 10px; padding: 18px 32px; }
.modal-wizard[data-wizard-step="1"] .wizard-footer [data-show-step="2"] { display: none !important; }
.modal-wizard[data-wizard-step="2"] .wizard-footer [data-show-step="1"] { display: none !important; }
.wizard-next,
.wizard-back { display: inline-flex; align-items: center; gap: 6px; }
/* Grid spacing inside wizard */
.modal-wizard .form-grid { gap: 14px 18px; }
.modal-wizard .form-label { font-size: 13px; }
/* Textarea más compacto dentro del wizard (concepto / motivo) */
.modal-wizard textarea.form-control { min-height: 72px; }

/* Short viewports: keep content visible without scroll by compacting chrome and reveals */
@media (max-height: 720px) {
    .modal-wizard { min-height: 0; height: 92vh; }
    .wizard-panel { padding: 20px 32px 20px; }
    .wizard-panel__title { margin-bottom: 4px; }
    .wizard-panel__subtitle { margin-bottom: 18px; }
    .wizard-panel--dense .wizard-panel__title { margin-bottom: 12px; }
    .wizard-panel > .form-group + .form-group { margin-top: 16px; }
    .wizard-summary { margin-bottom: 14px; padding: 8px 12px; }
    .modal-wizard .form-grid { gap: 12px 16px; }
    .modal-wizard textarea.form-control { min-height: 60px; }
    .dropzone, .dropzone-empty { min-height: 140px; }
    .dropzone-icon { width: 40px; height: 40px; margin-bottom: 4px; }
    .dropzone-empty { padding: 20px 18px; }
}
@media (max-width: 760px) {
    .modal-wizard { max-width: calc(100vw - 32px); }
}
@media (max-width: 640px) {
    .modal-wizard { min-height: 0; max-height: 96vh; max-width: 100%; }
    .modal-wizard .form-grid { grid-template-columns: 1fr; gap: 12px; }
    .wizard-topbar { gap: 10px; padding: 12px 16px; }
    .wizard-topbar__ref { display: none; }
    .wizard-step__label { display: none; }
    .wizard-panel  { padding: 20px 20px 22px; }
    .wizard-footer { padding: 14px 20px; }
}


/* ── Liquidación — documento formal en modal ─────────────────────────── */
.liq-doc {
    background: var(--surface);
    font-family: inherit;
    /* Flujo natural (block): el documento crece con su contenido y el scroll
       lo lleva .modal-body. El esquema anterior (flex-fill + scroll interno en
       .liq-doc-table-wrap) colapsaba el tbody a ~0 de alto y las filas no se
       veían pese a existir en el DOM. */
}
/* Document header — institutional band */
.liq-doc-header {
    display: flex; align-items: stretch; justify-content: space-between;
    padding: 22px 32px; background: var(--sidebar-bg, #17202b); color: #fff; gap: 24px;
    border-bottom: 3px solid var(--primary);
    flex-shrink: 0;
}
.liq-doc-header-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.liq-doc-header-title {
    font-family: var(--font-display); font-size: 20px; font-weight: 700;
    letter-spacing: -.005em; line-height: 1.2;
    display: flex; align-items: center; gap: 10px;
}
.liq-doc-header-title-icon {
    width: 28px; height: 28px; border-radius: 6px;
    background: var(--primary); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.liq-doc-header-sub {
    font-size: 11px; opacity: .65; margin-top: 4px;
    text-transform: uppercase; letter-spacing: .08em;
    font-feature-settings: "tnum" 1;
}
.liq-doc-header-meta {
    text-align: right; font-size: 11px; opacity: .65;
    display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 8px;
    text-transform: uppercase; letter-spacing: .06em;
    flex-shrink: 0;
}
.liq-doc-header-meta strong {
    display: block; font-size: 13px; opacity: 1; font-weight: 600;
    font-family: var(--font-display); letter-spacing: 0; text-transform: none;
}
/* Status stamp */
.liq-doc-stamp {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border: 1px solid currentColor; border-radius: 999px;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
    background: rgba(255,255,255,.04);
}
.liq-doc-stamp::before {
    content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor;
}
.liq-doc-stamp.is-aprobada { color: oklch(85% 0.1 150); }
.liq-doc-stamp.is-observada { color: oklch(82% 0.13 65); }
.liq-doc-stamp.is-rechazada { color: oklch(82% 0.14 22); }
.liq-doc-stamp.is-en_revision { color: oklch(85% 0.08 325); }
.liq-doc-stamp.is-default { color: oklch(82% 0.05 80); }

/* Info grid — 6 fields in 3-col + Motivo full-width */
.liq-doc-info {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 0; border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    background: linear-gradient(to bottom, #fafbfd, #ffffff);
}
.liq-info-cell {
    padding: 14px 24px;
    border-right: 1px solid var(--border-light, #edf1f5);
    border-bottom: 1px solid var(--border-light, #edf1f5);
    min-width: 0;
}
.liq-info-cell:nth-child(3n) { border-right: none; }
.liq-info-cell.liq-info-motivo {
    grid-column: 1 / -1;
    border-bottom: none; border-right: none;
    background: var(--surface-strong, #f7f8fb);
}
.liq-info-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: var(--text-muted, #667085); margin-bottom: 4px;
}
.liq-info-value {
    font-size: 14px; font-weight: 600; color: var(--text, #101828);
    overflow-wrap: break-word; line-height: 1.35;
}
.liq-info-value.muted { font-weight: 400; color: var(--ink-muted); }
.liq-info-value.mono {
    font-family: var(--font-mono, ui-monospace, 'SF Mono', Menlo, Consolas, monospace);
    font-feature-settings: "tnum" 1;
    letter-spacing: -.01em;
    font-weight: 600;
}

/* Table — solo scroll horizontal en pantallas angostas; el vertical lo maneja
   .modal-body para que las filas siempre fluyan visibles. */
.liq-doc-table-wrap {
    overflow-x: auto; background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.liq-doc-table {
    width: 100%; border-collapse: collapse; font-size: 11.5px; line-height: 1.5;
    table-layout: fixed;
}
/* F4: header navy contrastado (texto claro) — lee como cabecera de tabla,
   no como otra fila pálida. Ancla la jerarquía del documento. */
.liq-doc-table thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--navy, #17202b);
    padding: 11px 8px; text-align: left;
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: oklch(86% .015 250); line-height: 1.3;
    border-bottom: 2px solid var(--navy-2, #222d3a);
    /* Antes overflow:hidden recortaba los títulos en columnas estrechas
       (table-layout:fixed). Dejamos que envuelvan en varias líneas. */
    white-space: normal; overflow-wrap: break-word; hyphens: auto;
    vertical-align: bottom;
}
/* Column widths (table-layout: fixed, 13 cols, totals 100%) */
.liq-doc-table th:nth-child(1)  { width: 2.5%;  } /* # */
.liq-doc-table th:nth-child(2)  { width: 9.5%;  } /* Categoría */
.liq-doc-table th:nth-child(3)  { width: 6.5%;  } /* Clase Doc. */
.liq-doc-table th:nth-child(4)  { width: 7%;    } /* Fecha Doc. */
.liq-doc-table th:nth-child(5)  { width: 5.5%;  } /* Moneda */
.liq-doc-table th:nth-child(6)  { width: 8%;    } /* N° Doc. */
.liq-doc-table th:nth-child(7)  { width: 10%;   } /* Concepto */
.liq-doc-table th:nth-child(8)  { width: 7.5%;  } /* RUC */
.liq-doc-table th:nth-child(9)  { width: 7%;    } /* Cta. Contable */
.liq-doc-table th:nth-child(10) { width: 9%;    } /* Ce. Co. */
.liq-doc-table th:nth-child(11) { width: 8%;    } /* Monto Base */
.liq-doc-table th:nth-child(12) { width: 6.5%;  } /* IGV */
.liq-doc-table th:nth-child(13) { width: 13%;   } /* Importe Total */
.liq-doc-table th.num,
.liq-doc-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    white-space: nowrap;
}
/* Cifras del documento en mono (consistente con .erp-table — look ledger) */
.liq-doc-table td.num { font-family: var(--font-mono); letter-spacing: -.01em; }
/* F4 (c): agrupar visualmente las 3 columnas numéricas (Monto Base · IGV ·
   Importe Total = nth-child 11..13). Fondo tenue + borde izquierdo sutil en la
   primera para que se lean como un bloque "importes", no columnas sueltas. */
.liq-doc-table tbody td:nth-child(11),
.liq-doc-table tbody td:nth-child(12),
.liq-doc-table tbody td:nth-child(13) { background: rgba(23,32,43,.022); }
.liq-doc-table thead th:nth-child(11),
.liq-doc-table tbody td:nth-child(11) { border-left: 1px solid var(--border, #e4e7ec); }
/* Highlight Importe Total column (last) — sobre header navy el sello terracota
   se aclara para leer; en el cuerpo mantiene el tint cálido + peso. */
.liq-doc-table thead th:last-child {
    color: oklch(78% .11 38);
    background: rgba(218,91,62,.16);
}
.liq-doc-table tbody td:last-child {
    background: rgba(218,91,62,.05);
    border-left: 1px solid rgba(218,91,62,.20);
    font-weight: 700;
}
.liq-doc-table tbody tr {
    /* F4 (d): separador de fila más definido para que la tabla se lea como
       tabla (hairline claro entre registros). */
    border-bottom: 1px solid var(--border, #e4e7ec);
    transition: background .18s ease;
}
.liq-doc-table tbody tr:nth-child(even) td:nth-child(-n+10) { background: rgba(247,248,251,.6); }
.liq-doc-table tbody tr:nth-child(even) td:nth-child(11),
.liq-doc-table tbody tr:nth-child(even) td:nth-child(12),
.liq-doc-table tbody tr:nth-child(even) td:nth-child(13) { background: rgba(23,32,43,.04); }
.liq-doc-table tbody tr:hover td:not(:last-child) { background: rgba(218,91,62,.05); }
.liq-doc-table tbody tr:hover td:last-child { background: rgba(218,91,62,.09); }
.liq-doc-table td {
    /* F4 (d/e): más respiro vertical (12px) y line-height legible (1.5). */
    padding: 12px 8px; vertical-align: top; line-height: 1.5;
    color: var(--text, #101828);
    /* Texto largo (concepto, categoría, razón) envuelve en lugar de cortarse
       con elipsis. Las columnas numéricas mantienen nowrap vía .num. */
    white-space: normal; overflow-wrap: break-word; word-break: break-word;
}
.liq-doc-table td.muted { color: var(--text-muted, #667085); font-size: 11px; }

/* Totals — right-aligned rail, factura style */
.liq-doc-totals {
    flex-shrink: 0;
    display: flex; justify-content: flex-end;
    padding: 18px 32px 22px;
    background: var(--surface);
    border-top: 1px solid var(--border, #e4e7ec);
}
.liq-totals-rail {
    width: min(480px, 100%);
    display: flex; flex-direction: column; gap: 2px;
}
.liq-total-row {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 24px;
    padding: 10px 14px;
    border-radius: 6px;
}
.liq-total-row .liq-total-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: var(--text-muted, #667085);
    /* Labels largos (p.ej. "SALDO EN CONTRA (Reintegro al colaborador)")
       envuelven en su propia caja en lugar de forzar al monto a partirse
       en dos líneas por falta de espacio (issue #13). */
    flex: 1 1 auto; min-width: 0;
}
.liq-total-row .liq-total-value {
    font-size: 17px; font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    font-family: var(--font-display, inherit);
    letter-spacing: -.01em;
    color: var(--text, #101828);
    text-align: right;
    /* El monto nunca se parte en dos líneas: es el dato que el colaborador
       necesita leer de un vistazo. */
    white-space: nowrap; flex-shrink: 0;
}
.liq-total-row.is-saldo-favor  { background: oklch(96% 0.04 150 / 0.55); }
.liq-total-row.is-saldo-contra { background: oklch(96% 0.05 22  / 0.65); }
.liq-total-row.is-saldo-neutro { background: oklch(96% 0.05 80  / 0.55); }
.liq-total-row.is-saldo-favor  .liq-total-value { color: oklch(38% 0.10 150); }
.liq-total-row.is-saldo-contra .liq-total-value { color: oklch(38% 0.14 22);  }
.liq-total-row.is-saldo-neutro .liq-total-value { color: oklch(40% 0.11 65);  }
.liq-total-row.is-total {
    margin-top: 6px;
    padding-top: 14px;
    border-top: 2px solid var(--navy);
}
.liq-total-row.is-total .liq-total-label {
    color: var(--text, #101828);
    font-size: 12px;
}
.liq-total-row.is-total .liq-total-value {
    color: var(--navy);
    font-size: 22px;
    font-weight: 800;
}

.liq-doc-empty { padding: 40px; text-align: center; color: var(--text-muted); font-size: 13px; }

/* Liquidación modal sizing override (extends .liq-modal in modals section) */
.liq-modal { position: relative; max-width: min(1280px, 96vw); height: 92vh; max-height: 92vh; overflow: hidden; }
/* El documento entero hace scroll aquí (vertical). Sin flex-fill interno. */
.liq-modal .modal-body {
    overflow-y: auto; overflow-x: hidden;
}
/* Botón cerrar flotante sobre la banda institucional del documento (sin header
   de chrome redundante encima). */
.liq-modal .liq-doc-header { padding-right: 64px; }
.liq-modal__close {
    position: absolute; top: 16px; right: 18px; z-index: 12;
    width: 30px; height: 30px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 8px; cursor: pointer;
    /* Chip oscuro: legible sobre la banda navy y sobre el papel blanco cuando
       el documento se scrollea por debajo del botón. */
    background: rgba(16,24,40,.62); color: #fff;
    transition: background var(--ease, .18s ease);
}
.liq-modal__close:hover { background: rgba(16,24,40,.82); }
.liq-modal__close:focus-visible { outline: 2px solid var(--primary, #da5b3e); outline-offset: 2px; }

/* Print mode — full document, no chrome */
@media print {
    body.liq-printing > *:not(.liq-print-root) { display: none !important; }
    body.liq-printing { background: #fff; }
    .liq-print-root { display: block !important; padding: 0; margin: 0; }
    .liq-print-root .liq-doc {
        width: 100%; max-width: none; box-shadow: none; border: none;
        display: block; max-height: none; overflow: visible;
    }
    .liq-print-root .liq-doc-table-wrap {
        overflow: visible !important; max-height: none !important;
    }
    .liq-print-root .liq-doc-table { min-width: 0 !important; table-layout: auto !important; }
    .liq-print-root .liq-doc-table td { overflow: visible !important; text-overflow: clip !important; white-space: normal !important; }
    .liq-print-root .liq-doc-table th { overflow: visible !important; }
    .liq-print-root .liq-doc-table thead th { position: static !important; }
    .liq-print-root .liq-doc-header {
        background: var(--navy, #17202b) !important; color: #fff !important;
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
    /* F4: el header de la tabla ahora es navy con texto claro; forzamos que el
       fondo se imprima (sin esto el texto claro quedaría invisible en papel).
       El navy va atado al token --navy (= #17202b) para no divergir del header
       en pantalla si el sistema de diseño evoluciona; el fallback hex conserva
       el comportamiento de impresión si la variable no está disponible. */
    .liq-print-root .liq-doc-table thead th {
        background: var(--navy, #17202b) !important; color: #e6e9ee !important;
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
    .liq-print-root .liq-doc-table thead th:last-child { color: #f0b9a8 !important; }
    .liq-print-root .liq-total-row,
    .liq-print-root .liq-doc-table tbody td:last-child,
    .liq-print-root .liq-doc-table thead th:last-child {
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
}

/* ── Estado Alerta banners ───────────────────────────────── */
.timeline-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.timeline-item {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 14px;
    align-items: flex-start;
}
.timeline-marker {
    position: relative;
    display: grid;
    /* D2: el dot (28px) se alinea ARRIBA, junto al título, no centrado en el
       min-height del marker (dejaba un hueco con el texto). */
    place-items: start center;
    min-height: 48px;
}
.timeline-marker::after {
    content: '';
    position: absolute;
    top: 28px;          /* arranca bajo el dot (28px) */
    bottom: -14px;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, var(--border-strong) 0%, var(--border) 100%);
}
.timeline-item:last-child .timeline-marker::after {
    display: none;
}
/* §7.11: dot 28px con icono de evento centrado. Reciente = terracota soft;
   resto = neutro. Tamaño/color reales definidos abajo (consolidado). */
.timeline-dot {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* D2 (polish): dot sobre surface limpio con anillo definido y un sutil
       realce, para que el ícono no se pierda contra el fondo y la "columna"
       de dots se lea como una línea de tiempo clara. */
    background: var(--surface);
    border: 1.5px solid var(--border-strong);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    color: var(--text);
}
.timeline-dot svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2.1;
}
.timeline-dot.is-recent {
    background: var(--primary-soft);
    border-color: var(--primary-light);
    color: var(--primary-deep);
}
.timeline-content {
    /* D2: el dot mide 28px y se alinea arriba; este margen baja el bloque de
       texto lo justo para que la primera línea (título) quede centrada con el
       centro del dot. */
    margin-top: 4px;
    padding-bottom: 16px;
}
.timeline-item:last-child .timeline-content {
    /* A2: el autor del último evento no debe quedar pegado al borde inferior
       del historial; se le da aire (≈22px) en lugar de 0. */
    padding-bottom: 22px;
}
.timeline-head {
    display: flex;
    /* D2: flex-start (no baseline) para que la hora quede alineada al inicio
       del título aunque éste haga wrap a 2 líneas. */
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
/* D2: wrapper block del chip de autor, separa limpiamente del head/comment. */
.timeline-author-row {
    display: block;
}
.timeline-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
}
.timeline-time {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-light);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    cursor: help;
}
.timeline-empty {
    font-size: 13px;
    color: var(--text-muted);
}
.timeline-author {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* D2: separa el autor del título/meta del evento (antes 6px lo dejaba
       pegado al texto superior). */
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.2;
}
.timeline-author-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: var(--surface-strong);
    border: 1px solid var(--border);
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: .02em;
    flex-shrink: 0;
}
.timeline-author.is-admin .timeline-author-avatar {
    background: var(--primary-light);
    border-color: oklch(89% 0.04 30);
    color: var(--primary-ink);
}
.timeline-author-name {
    font-weight: 600;
    color: var(--text);
}
.timeline-author-rol {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--surface-strong);
    border: 1px solid var(--border-light);
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
}
.timeline-author.is-admin .timeline-author-rol {
    background: var(--primary-light);
    border-color: oklch(89% 0.04 30);
    color: var(--primary-ink);
}
.timeline-comment {
    display: block;
    /* D2: 10px (antes 8px) uniforma el respiro título→autor→comentario; el
       chip de autor usa margin-top:10px, este lo iguala. */
    margin: 10px 0 0;
    padding: 9px 12px;
    border-radius: 8px;
    background: oklch(98.5% 0.004 80);
    border: 1px solid var(--border-light);
    font-size: 12.75px;
    line-height: 1.6;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
}
.timeline-comment.is-admin {
    background: oklch(98% 0.018 30);
    border-color: oklch(91% 0.028 30);
    color: var(--primary-ink);
}
/* ============================================================
   DETALLE SOLICITUD — history modal + gasto accordion legacy
   ============================================================ */
.solv-history-modal { max-width: 860px; display: flex; flex-direction: column; max-height: 90vh; overflow: hidden; }
.solv-history-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 24px 16px;
    border-bottom: 1px solid var(--border-light);
}
.solv-history-chip {
    min-width: 120px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid var(--border-light);
    background: var(--surface-strong);
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
}
.solv-history-chip strong { font-size: .92rem; color: var(--text); font-variant-numeric: tabular-nums; }
.solv-history-chip-label {
    font-size: .64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-light);
}
.solv-history-body {
    padding: 18px 24px 24px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
.gasto-acc-field { padding:10px 12px; border-radius:14px; background:#fff; border:1px solid var(--border-light); }
.gaf-label { display:block; font-size:.66rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--text-light); }
.gaf-value { display:block; margin-top:3px; font-size:.86rem; font-weight:700; color:var(--text); }
.timeline-list { content-visibility:auto; contain-intrinsic-size:260px; }
/* §7.11: tamaño/color del dot (28px, icono centrado, reciente terracota) se
   definen arriba en el bloque .timeline-dot consolidado. */
.timeline-title { font-size:.9rem; font-weight:800; }
/* ============================================================
   RENDICION DETAIL — Premium Institutional Layout (.rd-*)
   ============================================================ */

/* Topbar de navegación liviana */
.rd-topbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 24px; flex-wrap: wrap;
}
.rd-back-btn {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 600; color: var(--text-muted);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 7px 14px; cursor: pointer;
    transition: all var(--ease); text-decoration: none;
}
.rd-back-btn:hover { color: var(--primary); border-color: rgba(218,91,62,.35); background: rgba(218,91,62,.04); }
.rd-back-btn svg { flex-shrink: 0; }

/* Fase A cleanup: bloque rd-* dead removido (hero/alert/body-grid/right/card/flow/datos/dato/rail/money/progress/saldo/estado-item/list-card/list-empty/cta-full). Mantenido: .rd-topbar, .rd-back-btn. (.rd-list-loading se retiró el 2026-09-04 al pasar Mis rendiciones de cards a tabla.) */

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    #erp-sidebar { position: fixed; left: -100%; transition: left .25s ease; }
    #erp-sidebar.open { left: 0; }
    .form-grid { grid-template-columns: 1fr; }
    .form-grid .col-full { grid-column: 1; }
    #erp-content { padding: 16px; }
    .search-input { width: 100%; }
    /* Enterprise components */
    .liq-doc-info { grid-template-columns: repeat(2, 1fr); }
    .liq-doc-info .liq-info-cell:nth-child(3n) { border-right: 1px solid var(--border-light, #edf1f5); }
    .liq-doc-info .liq-info-cell:nth-child(2n) { border-right: none; }
    .liq-doc-totals { padding: 16px 20px; }
    .liq-totals-rail { width: 100%; }
    /* Modal bottom-sheet on mobile */
    .modal-overlay { padding: 0; align-items: flex-end; }
    .modal-overlay .modal { border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-height: 92vh; }
    .liq-modal { max-height: 92vh; }
    .liq-doc-header { padding: 16px 18px; flex-direction: column; align-items: flex-start; gap: 8px; }
    .liq-doc-header-meta { text-align: left; }
    /* Phase 1: toolbar search flex */
    .tbl-toolbar-search { flex: 1 1 auto; }
    .tbl-toolbar-search .search-input { width: 100%; }
    /* Phase 2: sidebar toggle */
    .btn-hamburger { display: flex; }
    #erp-sidebar.open { box-shadow: 2px 0 32px rgba(16,24,40,.2); }
    #sidebar-overlay.open { display: block; }
    /* Phase 3: admin table — DNI va 1º; se esconden Expediente (2ª) y la fecha
       (5ª: Viaje en Rendiciones, Solicitado en Anticipos). El rango del viaje
       sale debajo del nombre vía ::after. */
    .erp-table-admin thead th:nth-child(2),
    .erp-table-admin tbody td:nth-child(2),
    .erp-table-admin thead th:nth-child(5),
    .erp-table-admin tbody td:nth-child(5) { display: none; }
    /* Anticipos tiene una columna más (Solicitado): Viaje es la 6ª y también se esconde. */
    .erp-table-anticipos thead th:nth-child(6),
    .erp-table-anticipos tbody td:nth-child(6) { display: none; }
    .erp-table-admin .worktray-person-cell::after {
        content: attr(data-fecha);
        display: block; font-size: 11px; color: var(--text-muted); margin-top: 2px;
    }
}

/* ── Error alert shared component ─────────────────────────── */
.erp-alert-error {
    display: none;
    padding: 12px 14px;
    background: var(--st-rechazada-bg);
    border: 1px solid var(--badge-solicitud-rechazada-border);
    border-radius: var(--radius-sm);
    color: var(--st-rechazada-tx);
    font-size: 13px;
    margin-top: 16px;
}

/* Variant: noticia informativa sobre el mismo contenedor de error. */
.erp-alert-error.is-notice {
    background: #EFF6FF;
    border-color: #BFDBFE;
    color: #1E40AF;
}

/* Info box: duración + monto máximo en nueva solicitud.
   Issue #16 (4) — antes era una losa azul (#EFF6FF/#BFDBFE/#1E40AF) ajena a la
   paleta terracota+navy del tema, y el desglose iba en un azul todavía más
   claro (#3B82C4 sobre #EFF6FF ≈ 3.1:1, por debajo de AA). Ahora es una TIRA DE
   DATOS neutra: la jerarquía la da la escala (monto en display font, tabular)
   y no un baño de color. DESIGN §2.4: el color es funcional, no decorativo. */
.erp-info-box {
    display: flex;
    gap: 6px 28px;
    flex-wrap: wrap;
    align-items: baseline;
    padding: 11px 15px;
    background: var(--surface-strong);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--ink-muted);
    font-size: 12.5px;
}
.erp-info-box > span {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
}
.erp-info-box strong {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
/* El monto es EL dato de la caja; la duración lo acompaña. Jerarquía por
   escala (ratio ≥1.25 entre pasos), no por color. */
.erp-info-box__primary strong { font-size: 18px; }

/* R03 / issue #16 (4) — desglose del monto (días × diario + plus aeropuerto).
   Se mantiene SIEMPRE VISIBLE, no en tooltip: es el dato que deja verificar de
   dónde sale la plata, y un hover no existe en táctil ni en teclado. Lo que se
   corrige es la jerarquía — pasa a renglón secundario claramente subordinado
   al monto.

   La línea que lo separaba se quitó. El desglose no es OTRO dato: es el MISMO
   monto de arriba, deletreado. Una regla horizontal anuncia un cambio de
   asunto, así que ponía distancia justo donde hace falta adyacencia, y el
   renglón se leía como una nota ajena. Peor todavía dentro del panel, donde
   una línea ya significa "abajo va la casilla que mueve esto de arriba": eran
   dos rayas en una misma caja diciendo cosas distintas.

   Lo subordinado ahora lo cargan la escala (12px contra 18px del monto), el
   color tenue y la sangría; el "=" con el que abre el texto ya declara que es
   la cuenta de lo anterior. */
.erp-info-sub {
    flex-basis: 100%;
    margin-top: 5px;
    padding-left: 1px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}
.erp-info-sub:empty {
    display: none;
}

/* R04b / issue #16 (1) — aviso de emergencia (72h) en nueva solicitud y edición.
   Antes: losa crema (#FDF4E4/#F0C090/#7A4A10) fuera de la paleta, apilada bajo
   la caja azul, con la casilla "es una emergencia" flotando aparte como si no
   tuviera relación con el aviso.
   Ahora: el bloque entero es UNA unidad de decisión sobre superficie neutra —
   diagnóstico arriba, acción en el pie. La severidad la cargan el icono y el
   titular en el ámbar FUNCIONAL del sistema (--st-observada-tx, hue 40, vecino
   del terracota de marca), no un fondo de color. */
/* ── Panel de decisión ───────────────────────────────────────
   La ÚNICA caja compuesta del modal de solicitud. Anatomía fija:
   cuerpo con el hecho arriba, y — cuando existe — un pie con la casilla que
   responde a ese hecho o lo altera, separado por una hairline y sobre
   superficie tenue.

   Nació como caja exclusiva del aviso de 72h (.ns-emergencia-block) y el
   modal la usaba una sola vez; el resto era caja-con-borde suelta, casilla
   desnuda y otra caja-con-borde, tres tratamientos apilados sin regla. Lo que
   se hizo NO fue inventar una cuarta variante sino ascender esta a primitiva y
   pasar por ella a los tres bloques que la piden: aviso de 72h + emergencia,
   monto + aeropuerto, y términos + aceptación. Una sola anatomía, tres
   instancias, ninguna casilla flotando entre superficies.

   Regla derivada: dentro de un panel, una línea horizontal significa SIEMPRE
   "abajo va la casilla que mueve lo de arriba". Cualquier otro uso de una
   regla acá compite con esa señal y se quita (ver .erp-info-sub). */
.ns-panel {
    padding: 0;
    /* Dos de los tres paneles son .form-group (gap: 6px). Dentro de una caja
       ese gap abre una rendija blanca entre el cuerpo y el pie y despega la
       hairline; las partes del panel van a hueso. */
    gap: 0;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}
/* Nada de cajas anidadas: lo que entra al panel cede su propio marco y deja
   que el panel ponga borde, fondo y radio. */
.ns-panel > .erp-info-box,
.ns-panel > .ns-tc-text {
    border: 0;
    background: transparent;
    border-radius: 0;
    margin-bottom: 0;
}
.erp-alert-warning {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 15px;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--ink);
    font-size: 13px;
    line-height: 1.55;
    margin-bottom: 0;
}
.erp-alert-warning::before {
    content: "";
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin-top: 1px;
    background-color: var(--st-observada-tx);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 1 21h22L12 2Zm1 16h-2v-2h2v2Zm0-4h-2V9h2v5Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 1 21h22L12 2Zm1 16h-2v-2h2v2Zm0-4h-2V9h2v5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.erp-alert-warning__body { display: block; min-width: 0; }
.erp-alert-warning strong {
    display: block;
    margin-bottom: 2px;
    color: var(--st-observada-tx);
    font-weight: 700;
}
/* Pie del panel: la casilla es la acción que resuelve o modifica lo que dice
   el cuerpo, así que vive dentro de la misma caja, separada por una línea y
   sobre superficie tenue. Los 24px táctiles (WCAG 2.5.8) los sigue poniendo
   .ns-tc-label; acá el padding vertical de 11px los supera de sobra y el
   min-height queda como piso, no como medida efectiva.

   La casilla se ancla a la PRIMERA línea, no al centro del bloque. A 390px
   tanto "…traslado a/desde el aeropuerto" como la frase de términos envuelven
   en dos renglones, y centrado el checkbox se descolgaba al medio del párrafo,
   sin nada al lado. Con flex-start + 3px queda ópticamente centrado en la
   primera línea cuando hay una sola (18px de caja de línea contra 13px de
   control) y sigue pegado arriba cuando hay dos. */
.ns-panel > .ns-tc-label {
    align-items: flex-start;
    padding: 11px 15px;
    background: var(--surface-strong);
    border-top: 1px solid var(--border-light);
    font-weight: 600;
}
.ns-panel > .ns-tc-label input[type="checkbox"] { margin-top: 3px; }
/* El error de "acepta los términos" queda dentro del panel: pertenece a la
   casilla del pie, no al formulario entero. */
.ns-tc-block > .form-error {
    padding: 0 15px 11px;
    background: var(--surface-strong);
}

/* R04b — Panel admin "Emergencias por autorizar" */
.admin-emergencias {
    margin: 0 0 24px;
    padding: 16px 18px;
    background: #FDF4E4;
    border: 1px solid #F0C090;
    border-radius: var(--radius-md, 10px);
}
.admin-emergencias__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* Paginación del popup: mismo control que las tablas, sin borde superior
   (la tarjeta ya cierra el bloque) y pegado al final. */
.admin-emergencias__pag { border-top: 0; padding: 12px 0 0; }
/* Card de emergencia — propuesta A (lectura fácil): quién y cuánto grandes,
   dos frases con etiquetas en negrita, botones en su propia fila. */
.emg-card {
    background: #fff;
    border: 1px solid #F0C090;
    border-left: 3px solid #EC7C22; /* rail ámbar: acción urgente <72h */
    border-radius: var(--radius-md);
    padding: 16px 18px;
    transition: box-shadow .15s ease, border-color .15s ease;
}
.emg-card:hover { box-shadow: 0 2px 10px rgba(180, 83, 9, .10); }
.emg-card[hidden] { display: none; }
.emg-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.emg-card__who { min-width: 0; }
.emg-card__name { margin: 0; font-size: 18px; font-weight: 800; color: #101828; line-height: 1.25; }
.emg-card__dni { margin: 3px 0 0; font-size: 14px; color: var(--text-muted, #667085); }
.emg-card__dni b { color: #101828; font-weight: 700; }
.emg-card__amt { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
.emg-card__amtl { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted, #667085); }
.emg-card__monto { font-weight: 800; font-size: 24px; line-height: 1.1; color: #B54708; font-variant-numeric: tabular-nums; }
.emg-card__lines { margin: 12px 0 0; display: grid; gap: 4px; font-size: 15.5px; color: #101828; }
.emg-card__lines p { margin: 0; }
.emg-card__lines b { font-weight: 700; }
.emg-card__dias { color: var(--text-muted, #667085); }
.emg-card__actions {
    display: flex; gap: 10px; align-items: center; justify-content: flex-end; flex-wrap: wrap;
    margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border, #E4E7EC);
}
.emg-card__actions .btn-decide-rechazar,
.emg-card__actions .btn-decide-aprobar { min-height: 40px; padding: 0 18px; font-size: 14px; }
.emg-card__actions .emg-card__detail-btn { width: 40px; height: 40px; }
.emg-ico { flex-shrink: 0; }
.emg-card__reject-box { margin-top: 10px; }
.emg-card__reject-box textarea { width: 100%; }
.emg-card__reject-row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }

/* Buscador del modal de emergencias */
.admin-emergencias__search {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 14px;
}
.admin-emergencias__search-icon {
    position: absolute;
    left: 12px;
    color: var(--text-muted, #98A2B3);
    pointer-events: none;
}
.admin-emergencias__search-input {
    width: 100%;
    padding: 9px 34px 9px 36px;
    font-family: inherit;
    font-size: 13px;
    color: #101828;
    background: #fff;
    border: 1px solid var(--border, #e4e7ec);
    border-radius: var(--radius-sm, 8px);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.admin-emergencias__search-input:focus {
    outline: none;
    border-color: #EC7C22;
    box-shadow: 0 0 0 3px rgba(236, 124, 34, .16);
}
.admin-emergencias__search-clear {
    position: absolute;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted, #98A2B3);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.admin-emergencias__search-clear:hover { background: #F2F4F7; color: #475467; }
.admin-emergencias__empty {
    margin: 14px 0 0;
    text-align: center;
    font-size: 13px;
    color: var(--text-muted, #667085);
}

/* R04b — botón + popup "Emergencias por autorizar" */
/* Vive en el slot del CTA del head (view-admin.php → inicio_cta_html): sin
   margen, se alinea con el título por el flex del .inicio-head. */
.admin-emergencias-trigger-wrap { margin: 0; flex-shrink: 0; }
/* Alerta ámbar, no un botón gris más: es una acción URGENTE (viajes a <72h). El
   ámbar la distingue de "Nueva solicitud" (primario) sin la agresividad del rojo,
   que se reserva para el contador. .btn.… gana especificidad sobre btn-secondary. */
.btn.admin-emergencias-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #FEF6EC;
    border: 1px solid #F1C486;
    color: #B54708;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.btn.admin-emergencias-trigger svg { color: #DC6803; }
.btn.admin-emergencias-trigger:hover {
    background: #FDECD3;
    border-color: #E79A45;
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.admin-emergencias-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #B42318;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 0 0 3px rgba(180, 35, 24, .14); /* halo suave: el número salta */
}
.emg-card__detail-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--border, #e4e7ec);
    border-radius: var(--radius-sm, 6px);
    background: #fff;
    color: var(--text-muted, #667085);
    cursor: pointer;
    transition: background .15s, color .15s;
}
.emg-card__detail-btn:hover { background: #FCFAF5; color: #7A4A10; }
.emg-card__detail {
    margin: 0 0 12px;
    padding: 8px 12px;
    background: #FCFAF5;
    border-left: 3px solid #F0C090;
    border-radius: 4px;
    font-size: 13px;
    color: #101828;
}
.emg-card__detail-row { margin: 0 0 6px; white-space: pre-wrap; }
.emg-card__detail-row:last-child { margin-bottom: 0; }

/* Devolución modal: elección entre leer el comprobante y llenar a mano.
   Issue #16 (2) — antes el OCR era un botón gris y "Completar manualmente" un
   ghost sin borde: parecía un pie de página, no una alternativa. Ahora los dos
   son botones del MISMO peso (btn-secondary), encuadrados por una pregunta y
   unidos por una "o". Nada compite con el primario del footer del modal. */
.dev-action-choice {
    margin: 10px 0 4px;
}
.dev-action-choice__lead {
    margin: 0 0 7px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--ink-muted);
}
.dev-action-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    /* Respiro respecto al dropzone (antes lo daba el envoltorio
       .dev-action-choice, ya retirado). Sin botón visible no ocupa alto. */
    margin: 10px 0 4px;
}
.dev-action-row:not(:has(:not([hidden]))) { display: none; }
.dev-action-row__or {
    font-size: 12px;
    color: var(--ink-light);
    flex: 0 0 auto;
}
/* flex-basis 0 = las dos cajas miden lo mismo pese a tener textos de largo
   distinto. Que midan igual es parte del mensaje: son opciones del mismo nivel. */
.dev-action-btn {
    flex: 1 1 0;
    justify-content: center;
    /* Altura fija (no min-height): las dos cajas miden EXACTAMENTE igual
       aunque su svg o padding difiera — antes una salía más baja. */
    height: 40px;
    padding: 0 14px;
    box-sizing: border-box;
}
/* colab-devolucion.js oculta uno u otro camino según el estado (hay comprobante
   previo → solo OCR; no hay → aparece manual). Con un solo camino disponible ya
   no hay elección que encuadrar: se caen la pregunta y la "o". */
.dev-action-choice:has([hidden]) .dev-action-choice__lead,
.dev-action-choice:has([hidden]) .dev-action-row__or { display: none; }
.dev-action-choice:has(#btn-dev-ocr[hidden]):has(#btn-dev-llenar-manual[hidden]) { display: none; }
/* En pantalla angosta las dos cajas no entran lado a lado: se apilan y la "o"
   pasa a vivir centrada ENTRE ellas, en vez de quedar colgando al costado de
   la primera fila cuando el flex envuelve. */
@media (max-width: 560px) {
    .dev-action-row { flex-direction: column; align-items: stretch; gap: 6px; }
    .dev-action-row__or { text-align: center; }
    .dev-action-btn { flex: 0 0 auto; }
}

/* ============================================================
   DETALLE SOLICITUD v5 — canonical shell, header, fin bar, sections
   ============================================================ */

.solv-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ── Expediente header: num + date + actions ───────────────── */
.solv-exp-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.solv-exp-actions .btn {
    min-height: 36px;
    padding: 8px 14px;
    font-size: .84rem;
}
.decision-prompt {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.decision-prompt-ta {
    width: 100%;
    min-height: 72px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    resize: vertical;
    transition: border-color var(--ease), box-shadow var(--ease);
    box-sizing: border-box;
}
.decision-prompt-ta:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(186,76,51,.12);
}
.decision-prompt-row {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ── Doc anticipo widget (admin aside) ─────────────────────────────
   Two states:
   .is-pending — amber, requires admin action before colaborador can close
   .is-set     — green, confirmation that the doc is registered
   ------------------------------------------------------------------ */
.doc-anticipo-widget {
    width: 100%;
    border-radius: var(--radius-md);
    border: 1px solid;
    overflow: hidden;
    font-size: .8125rem;
    box-sizing: border-box;
}

/* is-pending — versión suave (2026-09-07: "algo menos fuerte"). Crema pálido
   como el .gwidget.pending del mock: la cabecera ya no es una banda naranja,
   el "Pendiente" es un chip discreto y el botón va en terracota de marca. */
.doc-anticipo-widget.is-pending {
    border-color: oklch(88% .06 85);
    background: oklch(98.5% .015 85);
}
.doc-anticipo-widget.is-pending .doc-anticipo-head {
    background: transparent;
    color: var(--ink);
    border-bottom: 1px solid oklch(93% .035 85);
}
.doc-anticipo-widget.is-pending .doc-anticipo-sello {
    background: oklch(94% .06 75);
    color: oklch(50% .13 60);
}
.doc-anticipo-widget.is-pending .doc-anticipo-req {
    background: var(--surface);
    border: 1px solid oklch(86% .08 75);
    color: oklch(48% .12 65);
}
.doc-anticipo-widget.is-pending .doc-anticipo-hint {
    display: block;
    color: var(--ink-muted);
}
.doc-anticipo-widget.is-pending .doc-anticipo-btn {
    background: var(--primary);
    color: oklch(99% .005 30);
    border-color: var(--primary);
}
.doc-anticipo-widget.is-pending .doc-anticipo-btn:hover:not(:disabled) {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    box-shadow: 0 2px 8px rgba(150,56,33,.22);
}

/* is-set — estado confirmado: neutro. El verde sólo en el sello (check) como
   señal puntual; no una barra de color que compita con el veredicto y la
   acción pendiente. Jerarquía: color = acción/estado que requiere atención. */
.doc-anticipo-widget.is-set {
    border-color: var(--border);
    background: var(--surface);
}
.doc-anticipo-widget.is-set .doc-anticipo-head {
    background: var(--surface-strong);
    color: var(--text-muted);
}
/* N5: el check confirmado se suaviza a un indicador discreto (chip tint +
   ícono verde apagado), no un disco verde saturado que compite con el
   veredicto/acción. El verde queda como señal puntual, no como bloque. */
.doc-anticipo-widget.is-set .doc-anticipo-sello {
    background: oklch(95% .04 150);
    color: oklch(48% .12 150);
}
/* N5: "quitar check ✓ en todo". El estado confirmado renderiza
   .doc-anticipo-done = ícono check ✓ + "Completo". Se elimina el glifo ✓
   (el check que el usuario pidió quitar) y se conserva el rótulo "Completo"
   como chip neutro/discreto — el estado sigue legible sin el disco/ícono
   verde que competía con el veredicto y la acción. */
/* Chip "Completo" con check (pedido 2026-09-07: "unos checks svgs o iconos
   algo bonito"; reemplaza el N5 que lo dejaba en texto plano). */
.doc-anticipo-widget.is-set .doc-anticipo-done {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    padding: 2px 8px 2px 6px;
    border-radius: 999px;
    background: oklch(95% .04 150);
    color: oklch(42% .12 150);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.doc-anticipo-widget.is-set .doc-anticipo-done svg {
    display: inline-block; width: 12px; height: 12px;
}
/* N5: devolución con cada dato en su propio campo etiquetado (Monto / Fecha /
   Operación). Antes iban concatenados en un value con ellipsis que cortaba la
   fecha ("S/ 470,00 · 08/0…"); ahora cada item envuelve y la fecha se ve
   completa. */
.doc-anticipo-field--meta {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}
.doc-anticipo-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}
.doc-anticipo-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.doc-anticipo-meta-label {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.doc-anticipo-meta-val {
    font-variant-numeric: tabular-nums;
    font-size: .82rem;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
}
.doc-anticipo-field-actions {
    display: flex;
}
/* Cifra protagonista de una tarjeta de estado (sobregasto pendiente): el monto
   se lee como número, no como parte de una oración. Etiqueta chica a la
   izquierda, cifra grande y tabular a la derecha, alineadas por la línea base.
   Wrap permitido: si el monto crece, la cifra baja de renglón antes de
   desbordar la tarjeta (medido a 375px con S/ 129,440.00: una sola fila). */
.doc-anticipo-cifra {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 2px 10px;
}
.doc-anticipo-cifra-label {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: oklch(42% .08 52);
}
.doc-anticipo-cifra-val {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
    color: oklch(36% .14 52);
    white-space: nowrap;
}
.doc-anticipo-widget.is-set .doc-anticipo-btn {
    background: var(--surface);
    color: var(--text-muted);
    border-color: var(--border-strong);
}
.doc-anticipo-widget.is-set .doc-anticipo-btn:hover:not(:disabled) {
    background: var(--surface-strong);
    border-color: var(--border-strong);
    color: var(--text);
}
/* is-set: display mode — value text + Editar button */
.doc-anticipo-widget.is-set .doc-anticipo-field {
    flex-direction: row;
    /* N5: flex-start (no center) para que, si el valor envuelve a 2 líneas,
       el botón quede alineado con la primera línea y no se descentre. */
    align-items: flex-start;
    gap: 8px;
    padding: 9px 12px;
}
.doc-anticipo-value {
    flex: 1;
    min-width: 0;
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    font-size: .84rem;
    line-height: 1.45;
    font-weight: 500;
    color: var(--text);
    /* N5: el valor lleva "monto · fecha · operación"; con nowrap+ellipsis la
       FECHA se cortaba. Se permite wrap (la fila ya es flex row con botón
       flex-shrink:0) para que nunca se recorte el dato. */
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.doc-anticipo-widget.is-set .doc-anticipo-btn {
    width: auto;
    height: 30px;
    padding: 0 10px;
    flex-shrink: 0;
    font-size: .78rem;
}

/* is-set + is-editing: input row + Guardar / Cancelar */
.doc-anticipo-widget.is-set.is-editing .doc-anticipo-field {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 12px;
}
.doc-anticipo-widget.is-set.is-editing .doc-anticipo-input {
    height: 36px;
}
.doc-anticipo-edit-row {
    display: flex;
    gap: 6px;
}
.doc-anticipo-edit-row .doc-anticipo-btn {
    flex: 1;
    height: 32px;
    font-size: .8rem;
}
.doc-anticipo-btn.is-cancel {
    background: oklch(97% .01 250);
    color: var(--text-muted);
    border-color: var(--border);
}
.doc-anticipo-btn.is-cancel:hover:not(:disabled) {
    background: oklch(94% .02 250);
    border-color: oklch(78% .04 250);
}

/* Shared structural pieces */
.doc-anticipo-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-weight: 700;
    font-size: .695rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    line-height: 1;
}
.doc-anticipo-sello {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.doc-anticipo-title { flex: 1; min-width: 0; }
.doc-anticipo-req {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 2px 7px;
    border-radius: 999px;
    background: oklch(52% .16 52 / .15);
    color: oklch(36% .14 52);
    white-space: nowrap;
}
.doc-anticipo-hint {
    display: none;
    margin: 0;
    padding: 8px 12px;
    font-size: .78rem;
    line-height: 1.55;
}
.doc-anticipo-field {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.doc-anticipo-input {
    width: 100%;
    height: 38px;
    padding: 0 10px;
    font-size: .84rem;
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: oklch(99.5% .005 250);
    color: #101828;
    transition: border-color var(--ease), box-shadow var(--ease);
    box-sizing: border-box;
}
.doc-anticipo-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(218,91,62,.14);
}
.doc-anticipo-btn {
    width: 100%;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--ease), border-color var(--ease), box-shadow var(--ease);
    white-space: nowrap;
    letter-spacing: .01em;
}
.doc-anticipo-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Screen-reader-only: visualmente oculto pero accesible por SR. Estándar
   pattern (no usar display:none que también lo oculta de SR). */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Status list compacto del sidebar — reemplaza las 2 cards .colb-doc-pendiente
   grandes apiladas cuando coexisten múltiples avisos. Reduce ruido visual y
   jerarquiza por color. Las cards .colb-doc-pendiente quedan para usos
   donde se necesita el card grande (modales, banners standalone). */
.colb-status-list {
    width: 100%;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    background: var(--surface);
    overflow: hidden;
    box-sizing: border-box;
}
.colb-status-row {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-light);
}
.colb-status-row:last-child { border-bottom: none; }
.colb-status-icon {
    flex-shrink: 0; width: 22px; height: 22px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: oklch(94% .03 80); color: oklch(45% .12 60);
}
.colb-status-body { min-width: 0; flex: 1; }
.colb-status-title {
    display: block; font-size: .75rem; font-weight: 700;
    line-height: 1.3; color: var(--text);
    margin-bottom: 2px;
}
.colb-status-text {
    margin: 0; font-size: .75rem; line-height: 1.5;
    color: var(--text-muted);
}
.colb-status-link { color: var(--primary-dark); text-decoration: underline; }
.colb-status-link:hover { color: var(--primary-darker); }

.colb-status-row.is-pending .colb-status-icon { background: oklch(94% .05 78);  color: oklch(45% .14 62); }
.colb-status-row.is-warning .colb-status-icon { background: oklch(94% .06 50);  color: oklch(45% .16 38); }
.colb-status-row.is-ok      .colb-status-icon { background: oklch(94% .07 152); color: oklch(40% .13 152); }

.colb-status-row.is-warning .colb-status-title { color: oklch(38% .14 22); }

/* Modal devolución: aviso del saldo a devolver */
.dev-saldo-aviso {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 16px;
    border-radius: var(--radius-md);
    background: var(--st-observada-bg);
    border: 1px solid var(--badge-solicitud-observada-border, var(--border-strong));
}
.dev-saldo-aviso-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
}
.dev-saldo-aviso-monto {
    font-size: 1.15rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--primary);
}
#btn-dev-ocr { margin-bottom: 14px; }
#btn-dev-ocr[hidden],
#btn-admin-sg-ocr[hidden] { display: none !important; }

/* Modal devolución: grilla de campos (monto | fecha, operación full) */
#dev-fields-wrapper { gap: 14px 18px; }
#dev-fields-wrapper[hidden],
#admin-sg-fields-wrapper[hidden] { display: none !important; }
@media (max-width: 600px) {
    #dev-fields-wrapper { grid-template-columns: 1fr; gap: 12px; }
}

/* ── ViaticosConfirm: confirm dialog ─────────────────────────── */
.vc-overlay {
    --vc-accent-bg: oklch(96% 0.02 50);
    --vc-accent-ink: var(--primary, #da5b3e);
    --vc-accent-ring: rgba(218, 91, 62, .14);
}
.vc-overlay[data-variant="danger"] {
    --vc-accent-bg: oklch(96% 0.04 22);
    --vc-accent-ink: oklch(45% 0.16 22);
    --vc-accent-ring: oklch(45% 0.16 22 / .14);
}
.vc-overlay[data-variant="warning"] {
    --vc-accent-bg: oklch(96% 0.06 65);
    --vc-accent-ink: oklch(40% 0.13 50);
    --vc-accent-ring: oklch(40% 0.13 50 / .14);
}
.vc-modal {
    width: 420px;
    max-width: calc(100vw - 32px);
    padding: 22px 22px 16px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.vc-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.vc-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--vc-accent-bg);
    color: var(--vc-accent-ink);
    box-shadow: 0 0 0 4px var(--vc-accent-ring);
}
.vc-headtxt {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.vc-title {
    font-family: 'Sora', 'Manrope', sans-serif;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text, #101828);
    letter-spacing: -.005em;
    margin: 0;
}
.vc-msg {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--text-muted, #667085);
    margin: 0;
}
.vc-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}
.vc-foot .btn {
    min-width: 96px;
    justify-content: center;
}

/* ── Stepper: dots + labels, flows across row ──────────────── */
.solv-exp-stepper {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
}
.solv-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
}
.solv-step::after {
    content: '';
    position: absolute;
    top: 12px;
    left: calc(50% + 16px);
    right: calc(-50% + 16px);
    height: 2px;
    background: var(--border);
    z-index: 0;
}
.solv-step:last-child::after { display: none; }
.solv-step-dot {
    position: relative;
    z-index: 1;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: var(--surface);
    border: 2px solid var(--border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .66rem;
    font-weight: 700;
    color: var(--text-light);
}
.solv-step-label {
    font-size: .72rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: .02em;
}
.solv-step.is-done .solv-step-dot {
    background: var(--st-aprobada-tx);
    border-color: var(--st-aprobada-tx);
    color: transparent;
    font-size: 0;
}
.solv-step.is-done .solv-step-dot::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 4px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translateY(-1px);
}
.solv-step.is-done::after { background: var(--st-aprobada-tx); }
.solv-step.is-done .solv-step-label { color: var(--text); }
.solv-step.is-current .solv-step-dot {
    border-color: var(--primary);
    background: var(--surface);
    color: var(--primary-dark);
    box-shadow: 0 0 0 4px var(--primary-focus-ring);
}
.solv-step.is-current .solv-step-label {
    color: var(--ink);
    font-weight: 700;
}
.solv-step.is-warning .solv-step-dot {
    background: #d97706;
    border-color: #d97706;
    color: #fff;
}
.solv-step.is-warning::after { background: #d97706; }
.solv-step.is-warning .solv-step-label {
    color: #92400e;
    font-weight: 700;
}
/* Dot con icono (alineación design-detalle-v4): el SVG reemplaza al número
   y al check CSS. Color explícito en done/warning porque el dot pinta el
   texto transparente/oscuro. */
.solv-step-dot .solv-ic { width: 14px; height: 14px; }
.solv-step.is-done .solv-step-dot::before { display: none; }
.solv-step.is-done .solv-step-dot .solv-ic { color: var(--on-accent); }
.solv-step.is-warning .solv-step-dot .solv-ic { color: var(--on-accent); }

/* ── Sections (Expediente, Comprobantes) ───────────────────── */
.solv-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}
.solv-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
}
.solv-section-body { overflow-x: auto; }

/* Empty state for comprobantes */
.solv-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted);
}
.solv-empty p { margin: 0; font-size: .9rem; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .solv-exp-actions { justify-content: flex-start; }
}
@media (max-width: 640px) {
    .solv-exp-stepper {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px 0;
    }
    .solv-step:nth-child(2)::after { display: none; }
}

/* ── Liquidación — impresión ─────────────────────────────────────── */
@media print {
    body.liq-printing * { visibility: hidden; }
    body.liq-printing .liq-print-root,
    body.liq-printing .liq-print-root * { visibility: visible; }
    body.liq-printing .liq-print-root {
        position: fixed; inset: 0; background: #fff;
    }
    body.liq-printing .liq-doc {
        max-width: 100%; border: none; border-radius: 0; box-shadow: none;
    }
    body.liq-printing .liq-doc-header {
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
        border-bottom: 3px solid var(--primary);
    }
    body.liq-printing .liq-doc-table tbody tr:hover { background: transparent; }
}

/* ============================================================
   VIEW: INICIO (colaborador) — sober, task-first
   ============================================================ */
#view-inicio { max-width: 1440px; margin: 0 auto; }

.inicio-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 24px; margin: 4px 0 28px;
}
.inicio-head-main { min-width: 0; }
.inicio-eyebrow {
    font-size: 11px; font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; color: var(--text-light);
    margin-bottom: 10px; min-height: 14px;
}
.inicio-title {
    font-family: var(--font-display);
    /* Escala dominante del head: crece hasta 2.5rem para ganarle a los KPIs
       (2rem) — el saludo ancla la jerarquía superior, los KPIs la de datos. */
    font-size: clamp(2rem, 1.5rem + 1.6vw, 2.5rem); font-weight: 500; color: var(--text);
    letter-spacing: -.015em; line-height: 1.08;
}
.inicio-cta { flex-shrink: 0; white-space: nowrap; }

/* Summary strip — inline, not cards */
/* El display:grid de autor pisaba el [hidden] del UA: en primera vez (sin
   solicitudes) los KPIs y la grilla seguían visibles pese a hidden=true.
   El selector de atributo recupera prioridad → solo se ve el onboarding. */
.inicio-summary[hidden],
.inicio-grid[hidden] { display: none !important; }

.inicio-summary {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 16px; margin-bottom: 36px;
}
.inicio-metric {
    position: relative;
    padding: 20px 22px; min-height: 96px;
    border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--surface); box-shadow: var(--shadow-sm);
    font: inherit; color: inherit;
    text-align: left; cursor: pointer;
    display: flex; flex-direction: column; gap: 4px; justify-content: flex-start;
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.inicio-metric:hover:not(:disabled) {
    box-shadow: var(--shadow-md); transform: translateY(-2px);
}
.inicio-metric:focus-visible {
    outline: 2px solid var(--primary); outline-offset: -2px;
}
.inicio-metric:disabled {
    cursor: default; opacity: .55;
}
.inicio-metric-num {
    font-family: var(--font-display);
    font-size: 2rem; font-weight: 600; color: var(--text);
    line-height: 1; font-feature-settings: "tnum" 1; letter-spacing: -.02em;
    margin-top: 2px;
}
.inicio-metric-lbl {
    font-size: .7rem; color: var(--text-muted); font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em;
}
/* Chip de icono de la stat card (§7.6): 34px neutro; terracota en la activa */
.inicio-metric-ic {
    width: 34px; height: 34px; border-radius: 9px;
    background: var(--surface-2); color: var(--text-muted);
    display: grid; place-items: center; margin-bottom: 10px;
}
.inicio-metric-ic svg { width: 18px; height: 18px; }
.inicio-metric.is-active .inicio-metric-ic { background: var(--primary-soft); color: var(--primary-deep); }
.inicio-metric-hint {
    margin-top: 6px;
    font-size: .6875rem; font-weight: 600; letter-spacing: .04em;
    color: var(--primary);
    display: inline-flex; align-items: center; gap: 4px;
    opacity: 0; transform: translateY(2px);
    transition: opacity .18s ease, transform .18s ease;
}
.inicio-metric-hint::after {
    content: '→'; font-size: .75rem; line-height: 1;
}
.inicio-metric:hover:not(:disabled) .inicio-metric-hint,
.inicio-metric:focus-visible .inicio-metric-hint {
    opacity: 1; transform: translateY(0);
}
/* Métrica activa = "hot" card (tint terracota, el dato que pide atención) */
.inicio-metric.is-active .inicio-metric-num { color: var(--primary-deep); }
.inicio-metric.is-active {
    background: linear-gradient(165deg, var(--primary-soft), var(--surface) 75%);
    border-color: #f3d3c7;
}
/* Barra de acento superior en la métrica "hot": refuerza por escala/color cuál
   pide atención, sin sumar un nodo (::before sobre el botón). */
.inicio-metric.is-active::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: var(--primary);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.inicio-metric-total .inicio-metric-num { color: var(--text-muted); }

/* Grid: bandeja (main) + recent (aside) */
.inicio-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
}
@media (min-width: 1240px) {
    .inicio-grid {
        grid-template-columns: minmax(0, 1.55fr) minmax(340px, 1fr);
        gap: 40px;
    }
    .inicio-block-bandeja { margin-bottom: 0; }
}

/* Inicio de ALTO FIJO (solo en el layout de 2 columnas, ≥1240px, como el
   escritorio real). #view-inicio llena el alto de #erp-content y las dos listas
   scrollean INTERNAS, así el scroll general de la página no crece con los
   pendientes/recientes. En pantallas chicas (1 columna, apiladas) se deja el
   scroll normal: forzar el alto ahí apretaría todo. */
@media (min-width: 1240px) {
    #view-inicio.active { display: flex; flex-direction: column; height: 100%; min-height: 0; }
    #view-inicio .inicio-head,
    #view-inicio .inicio-summary { flex: 0 0 auto; }
    #view-inicio .inicio-grid { flex: 1 1 auto; min-height: 0; margin-bottom: 0; align-items: stretch; }
    #view-inicio .inicio-block { min-height: 0; display: flex; flex-direction: column; margin-bottom: 0; }
    #view-inicio .inicio-block-head { flex: 0 0 auto; }
    #view-inicio .inicio-bandeja-list,
    #view-inicio .inicio-recent-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
}

/* Block sections */
.inicio-block { margin-bottom: 36px; }
.inicio-grid > .inicio-block:last-child { margin-bottom: 0; }
.inicio-block-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; margin-bottom: 14px;
}
.inicio-block-title {
    font-family: var(--font-display);
    font-size: 1.125rem; font-weight: 600; color: var(--text);
    letter-spacing: -.005em;
}
.inicio-block-sub {
    font-size: .8125rem; color: var(--text-muted);
    margin-top: 2px;
}
.inicio-pill {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 26px; height: 24px; padding: 0 9px;
    border-radius: 999px; background: var(--primary); color: #fff;
    font-size: .75rem; font-weight: 700;
    font-feature-settings: "tnum" 1;
}
.inicio-pill:empty, .inicio-pill[data-empty="1"] { display: none; }

.inicio-linkbtn {
    display: inline-flex; align-items: center; gap: 4px;
    background: transparent; border: none; padding: 4px 0;
    color: var(--primary); font-size: .8125rem; font-weight: 600;
    cursor: pointer; font-family: inherit;
}
.inicio-linkbtn:hover { color: var(--primary-dark); }
.inicio-linkbtn svg { transition: transform var(--ease); }
.inicio-linkbtn:hover svg { transform: translateX(2px); }

/* Bandeja — priority queue */
.inicio-bandeja-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 8px;
    padding-right: 4px; /* aire para la barra de scroll cuando aparece */
    overscroll-behavior: contain;
}
.inicio-bandeja-item {
    position: relative;
    display: grid; grid-template-columns: auto 1fr auto;
    gap: 20px; align-items: center;
    padding: 18px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}
.inicio-bandeja-item:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    border-color: var(--border-strong, #d0d5dd);
}
.inicio-bandeja-item:focus-visible {
    outline: 2px solid var(--primary); outline-offset: 2px;
}

/* Correlativo numérico — el sello de expediente. Único punto donde vive el tone color. */
.inicio-bandeja-num {
    font-family: var(--font-mono, ui-monospace, 'SF Mono', Menlo, monospace);
    font-size: 1.5rem; font-weight: 700;
    line-height: 1; letter-spacing: -.02em;
    font-feature-settings: "tnum" 1;
    color: var(--text-light);
    min-width: 32px; text-align: center;
    transition: color var(--ease);
}

.inicio-bandeja-body { min-width: 0; }
.inicio-bandeja-row {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 4px; flex-wrap: wrap;
}
.inicio-bandeja-tag {
    font-size: .6875rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Tone modifiers — aplicados dinámicamente vía `inicio-bandeja-${tone}` en inicio-ui.js. */
.inicio-bandeja-accent .inicio-bandeja-num { color: var(--primary); }
.inicio-bandeja-accent .inicio-bandeja-tag { color: var(--primary-ink, var(--primary)); }
.inicio-bandeja-warn .inicio-bandeja-num { color: var(--st-observada-tx); }
.inicio-bandeja-warn .inicio-bandeja-tag { color: var(--st-observada-tx); }
.inicio-bandeja-danger .inicio-bandeja-num { color: var(--st-rechazada-tx); }
.inicio-bandeja-danger .inicio-bandeja-tag { color: var(--st-rechazada-tx); }

/* El sello ahora es un chip de icono de estado (§5/§7.6): fondo tintado por tone,
   el icono hereda el color del tone (currentColor). */
.inicio-bandeja-ic {
    width: 34px; height: 34px; min-width: 34px; border-radius: 10px;
    display: grid; place-items: center; flex-shrink: 0;
    background: var(--surface-2); font-size: 0;
}
.inicio-bandeja-ic svg { width: 18px; height: 18px; }
.inicio-bandeja-accent .inicio-bandeja-ic { background: var(--primary-soft); }
.inicio-bandeja-warn .inicio-bandeja-ic   { background: var(--st-observada-bg); }
.inicio-bandeja-danger .inicio-bandeja-ic { background: var(--st-rechazada-bg); }

.inicio-bandeja-sep { color: var(--text-light); font-size: .75rem; }
.inicio-bandeja-id {
    font-size: .6875rem; color: var(--text-muted);
    font-feature-settings: "tnum" 1;
    font-family: var(--font-mono, ui-monospace, 'SF Mono', Menlo, monospace);
    letter-spacing: -.01em;
}
.inicio-bandeja-motivo {
    font-size: .9375rem; color: var(--text);
    line-height: 1.35; margin: 2px 0 6px; font-weight: 500;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
.inicio-bandeja-meta {
    display: flex; align-items: center; gap: 8px;
    font-size: .8125rem; color: var(--text-muted);
    flex-wrap: wrap;
}
.inicio-bandeja-dot {
    width: 3px; height: 3px; border-radius: 50%;
    background: var(--text-light);
}

.inicio-bandeja-end {
    display: flex; flex-direction: column; align-items: flex-end;
    gap: 6px; min-width: 110px;
}
.inicio-bandeja-monto {
    color: var(--text); font-weight: 700;
    font-size: 1rem;
    font-feature-settings: "tnum" 1;
    font-family: var(--font-mono, ui-monospace, 'SF Mono', Menlo, monospace);
    letter-spacing: -.01em;
    line-height: 1;
}
.inicio-bandeja-cta {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: .75rem; font-weight: 600;
    color: var(--text-muted);
    transition: color var(--ease), gap var(--ease);
}
.inicio-bandeja-cta svg { transition: transform var(--ease); }
.inicio-bandeja-item:hover .inicio-bandeja-cta {
    color: var(--primary);
    gap: 6px;
}
.inicio-bandeja-item:hover .inicio-bandeja-cta svg { transform: translateX(2px); }

.inicio-bandeja-empty {
    display: flex; align-items: center; gap: 12px;
    padding: 20px 22px; border: 1px dashed var(--border);
    border-radius: var(--radius-md); color: var(--text-muted);
    font-size: .875rem;
}
.inicio-bandeja-empty svg { color: oklch(58% 0.14 150); flex-shrink: 0; }

/* Recent list — compact 2-row layout */
.inicio-recent-list {
    list-style: none; padding: 0; margin: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    overflow: hidden;
}
.inicio-recent-item {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    grid-template-areas:
        "id   fecha  monto"
        "id   ceco   estado";
    column-gap: 14px; row-gap: 3px;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    font-size: .875rem;
    box-shadow: inset 0 0 0 0 var(--primary);
    transition: background var(--ease), box-shadow var(--ease);
}
.inicio-recent-item:last-child { border-bottom: none; }
/* Hover con intención: fondo + barra de acento a la izquierda (inset, sin
   desplazar el grid), en vez de solo cambiar el gris. */
.inicio-recent-item:hover {
    background: var(--surface-strong);
    box-shadow: inset 3px 0 0 0 var(--primary);
}
.inicio-recent-item:focus-visible {
    outline: 2px solid var(--primary); outline-offset: -2px;
}
.inicio-recent-id {
    grid-area: id; align-self: center;
    color: var(--text-muted); font-weight: 600;
    font-feature-settings: "tnum" 1;
}
.inicio-recent-fecha { grid-area: fecha; color: var(--text); font-feature-settings: "tnum" 1; font-weight: 500; }
.inicio-recent-ceco  {
    grid-area: ceco; color: var(--text-muted); font-size: .8125rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inicio-recent-monto {
    grid-area: monto;
    color: var(--text); font-weight: 600; text-align: right;
    font-feature-settings: "tnum" 1;
}
.inicio-recent-estado { grid-area: estado; text-align: right; }

.inicio-recent-empty {
    padding: 28px 22px; text-align: center;
    color: var(--text-muted); font-size: .875rem;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}

/* Skeleton */
.inicio-skel {
    height: 72px; border-radius: var(--radius-md);
    background: linear-gradient(90deg, var(--surface-strong) 0%, #edf1f5 50%, var(--surface-strong) 100%);
    background-size: 200% 100%;
    animation: inicioShimmer 1.2s ease-in-out infinite;
    list-style: none; margin-bottom: 8px;
}
.inicio-recent-list .inicio-skel:last-child,
.inicio-bandeja-list .inicio-skel:last-child { margin-bottom: 0; }
@keyframes inicioShimmer { to { background-position: -200% 0; } }

/* Responsive */
@media (max-width: 860px) {
    .inicio-head { flex-direction: column; align-items: flex-start; gap: 16px; }
    .inicio-summary { grid-template-columns: 1fr 1fr; }
    .inicio-metric:nth-child(2) { border-right: none; }
    .inicio-metric:nth-child(1), .inicio-metric:nth-child(2) {
        border-bottom: 1px solid var(--border-light);
    }
    .inicio-metric:nth-child(3) { border-right: 1px solid var(--border-light); }
}
@media (max-width: 520px) {
    .inicio-summary { grid-template-columns: 1fr; }
    .inicio-metric { border-right: none; border-bottom: 1px solid var(--border-light); }
    .inicio-metric:last-child { border-bottom: none; }
    .inicio-bandeja-item {
        grid-template-columns: 1fr;
        row-gap: 10px;
    }
    .inicio-bandeja-cta { justify-self: flex-start; }
    /* Phase 3: liq-doc-info single column */
    .liq-doc-info { grid-template-columns: 1fr; }
    .liq-info-cell,
    .liq-doc-info .liq-info-cell:nth-child(3n),
    .liq-doc-info .liq-info-cell:nth-child(2n) { border-right: none; }
}

/* ── Sidebar mobile overlay ───────────────────────────────── */
.btn-hamburger {
    display: none; align-items: center; justify-content: center;
    width: 36px; height: 36px; padding: 0; flex-shrink: 0;
    background: none; border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--text-muted);
    cursor: pointer; transition: all var(--ease);
}
.btn-hamburger:hover { background: var(--bg); color: var(--text); }
#sidebar-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(16,24,40,.45); z-index: 99;
}

/* ── Phase 2: ultra-narrow phones (<375px) ──────────────── */
@media (max-width: 375px) {
    #erp-topbar { padding: 0 12px; gap: 8px; }

    .tbl-toolbar { padding: 8px 12px; gap: 4px; }
    .tbl-chip { font-size: 11px; padding: 3px 8px; }
    #erp-content { padding: 10px; }
}

/* ============================================================
   JERARQUÍA PICKER — CECO / OI
   ============================================================ */

/* Input + lupa wrapper */
.jerarquia-input-wrap { display: flex; }
.jerarquia-input-wrap .form-control {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    background: var(--surface-strong);
    flex: 1;
}
.btn-jerarquia-trigger {
    display: flex; align-items: center; justify-content: center;
    width: 38px; flex-shrink: 0;
    background: var(--primary-light); border: 1px solid var(--border);
    border-left: none; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--primary); cursor: pointer;
    transition: background var(--ease), color var(--ease);
}
.btn-jerarquia-trigger:hover {
    background: var(--primary); color: #fff;
}

/* Tabs */
.jerarquia-tabs {
    display: flex; gap: 4px; flex-wrap: wrap;
    border-bottom: 2px solid var(--border);
    padding-bottom: 0; margin-bottom: 16px; flex-shrink: 0;
}
.jerarquia-tab {
    padding: 8px 16px; font-size: 13px; font-weight: 600;
    background: none; border: none; border-bottom: 2px solid transparent;
    margin-bottom: -2px; color: var(--text-muted);
    cursor: pointer; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    transition: color var(--ease), border-color var(--ease);
}
.jerarquia-tab:hover { color: var(--text); }
.jerarquia-tab.is-active { color: var(--primary); border-bottom-color: var(--primary); }

/* Sub-tabs: divisiones dentro del área elegida. Chips, para distinguirlos a
   simple vista del nivel de arriba. */
.jerarquia-subtabs {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin-bottom: 14px; min-height: 28px; flex-shrink: 0;
}
.jerarquia-subtab {
    padding: 5px 12px; font-size: 12.5px; font-weight: 600;
    background: var(--surface-2, #f4f5f7); border: 1px solid var(--border);
    border-radius: 999px; color: var(--text-muted); cursor: pointer;
    transition: color var(--ease), background var(--ease), border-color var(--ease);
}
.jerarquia-subtab:hover { color: var(--text); }
.jerarquia-subtab.is-active {
    color: #fff; background: var(--primary); border-color: var(--primary);
}
.jerarquia-division { color: var(--text-muted); font-size: 12.5px; }

/* Search */
.jerarquia-search-wrap { margin-bottom: 12px; flex-shrink: 0; }

/* El modal tiene alto FIJO y scrollea solo la tabla. Si el alto lo define el
   contenido, cambiar de división lo hace saltar: Portal PQS tiene 7 OIs y
   Campus Virtual 302, así que el modal crecía y se encogía en cada clic —
   además de moverse cuando la fila de chips pasa a dos líneas. Mismo patrón
   que .liq-modal. */
#modal-jerarquia-picker .modal {
    display: flex; flex-direction: column;
    height: 82vh; max-height: 720px;
}
#modal-jerarquia-picker .modal-body {
    display: flex; flex-direction: column;
    flex: 1; min-height: 0; overflow: hidden;
}
#jerarquia-content {
    display: flex; flex-direction: column;
    flex: 1; min-height: 0;
}

/* Table */
.jerarquia-table-wrap {
    flex: 1; min-height: 0; overflow-y: auto;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.jerarquia-table {
    width: 100%; border-collapse: collapse; font-size: 13px;
}
.jerarquia-table thead th {
    position: sticky; top: 0;
    background: var(--surface-strong); font-weight: 600;
    padding: 8px 12px; text-align: left;
    border-bottom: 1px solid var(--border); color: var(--text-muted);
    font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
}
.jerarquia-row {
    cursor: pointer; transition: background var(--ease);
}
.jerarquia-row:hover { background: var(--primary-light); }
.jerarquia-row td { padding: 9px 12px; border-bottom: 1px solid var(--border-light); }
.jerarquia-row:last-child td { border-bottom: none; }
.jerarquia-code, .jerarquia-ceco {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 12px; color: var(--text-muted); white-space: nowrap;
}
.jerarquia-tipo { font-size: 11px; color: var(--text-light); white-space: nowrap; }

/* Empty state */
.jerarquia-empty {
    text-align: center; padding: 24px; color: var(--text-muted);
    font-size: 13px;
}

/* ============================================================
   DIRECTOR: FIRMAS PENDIENTES
   ============================================================ */
.nav-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px; background: var(--primary); color: #fff;
    font-size: 11px; font-weight: 700; margin-left: auto;
}

/* ── View header (used by director + perfil views) ────────────── */
.view-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    margin-bottom: 20px; gap: 16px; flex-wrap: wrap;
}

.view-title {
    font-family: var(--font-display);
    font-size: 1.75rem; font-weight: 400;
    color: var(--text); line-height: 1.18; letter-spacing: 0;
}

.view-subtitle {
    font-size: 0.9375rem; color: var(--text-muted); margin-top: 4px;
}

/* ── Firmas: Inbox ────────────────────────────────────────────── */
#view-firmas.erp-view.active {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--wp-admin-bar-h) - var(--topbar-h) - 56px);
    min-height: 480px;
    overflow: hidden;
    padding-bottom: 0;
}

.firmas-inbox {
    display: flex;
    flex: 1;
    min-height: 0;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: 0 2px 12px oklch(18% 0.012 242 / .08), 0 1px 3px oklch(18% 0.012 242 / .06);
}

/* ── List pane ─ */
.inbox-pane {
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--surface-strong);
    border-right: 1px solid var(--border);
}

.inbox-tabs {
    display: flex;
    gap: 2px;
    padding: 8px 10px;
    background: var(--surface-strong);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.inbox-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Manrope', sans-serif;
    color: var(--text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background .13s, color .13s;
}

.inbox-tab:hover {
    background: var(--surface);
    color: var(--text);
}

.inbox-tab.is-active {
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 1px 4px oklch(18% 0.012 242 / .10);
    position: relative;
}

.inbox-tab.is-active::after {
    content: '';
    position: absolute;
    bottom: 3px; left: 50%;
    transform: translateX(-50%);
    width: 18px; height: 2px;
    background: var(--primary);
    border-radius: 1px;
}

.inbox-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    font-size: 9.5px; font-weight: 700;
    background: var(--primary);
    color: #fff;
    line-height: 1;
    transition: opacity .2s;
}

.inbox-tab-badge[data-count="0"] { opacity: 0; pointer-events: none; }

.inbox-list {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.inbox-list-loading,
.inbox-list-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 44px 20px;
    text-align: center;
    color: var(--text-light);
    font-size: 12.5px;
}

.inbox-list-loading svg,
.inbox-list-empty svg { stroke: var(--text-light); }

/* Row */
.inbox-row {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 11px 14px 11px 14px;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: background .1s;
    position: relative;
    outline: none;
    background: var(--surface);
}

.inbox-row:last-child { border-bottom: none; }

.inbox-row:hover { background: var(--surface-2); }

.inbox-row:focus-visible {
    box-shadow: inset 0 0 0 2px var(--primary);
}

.inbox-row.is-active {
    background: var(--primary-soft);
    border-bottom-color: transparent;
    /* Acento de selección por inset shadow (no side-stripe decorativo) */
    box-shadow: inset 3px 0 0 var(--primary);
}

/* Firmados rows: visually quieter (read) */
.inbox-row--firmado {
    background: var(--surface-strong);
}

.inbox-row--firmado:hover { background: oklch(96.5% 0.006 52); }

/* Unread dot for pending rows */
.inbox-row:not(.inbox-row--firmado) .inbox-row__name::before {
    content: '';
    display: block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--primary);
    margin-right: 7px;
    flex-shrink: 0;
}

.inbox-row.is-active:not(.inbox-row--firmado) .inbox-row__name::before {
    background: var(--primary-deep);
}

/* Avatars */
.inbox-row__avatar {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: oklch(93% 0.06 70);
    color: oklch(46% 0.14 70);
    font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-family: 'Manrope', sans-serif;
    user-select: none;
}

.inbox-row--firmado .inbox-row__avatar {
    background: oklch(93% 0.04 160);
    color: oklch(44% 0.10 160);
}

.inbox-row__meta { min-width: 0; }

.inbox-row__name {
    font-size: 13px; font-weight: 600;
    color: var(--text);
    display: flex; align-items: center; gap: 0;
    overflow: hidden;
}

.inbox-row__name-text {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.inbox-row--firmado .inbox-row__name {
    color: var(--text-muted);
    font-weight: 500;
}

.inbox-row__sub {
    font-size: 11px;
    color: var(--text-light);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-top: 2px;
}

.inbox-row__right { text-align: right; flex-shrink: 0; }

.inbox-row__importe {
    font-size: 12.5px; font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.inbox-row--firmado .inbox-row__importe {
    color: var(--text-muted);
    font-weight: 500;
}

.inbox-row__tipo-label {
    font-size: 9.5px; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase;
    margin-top: 3px;
}

.inbox-row__tipo-label.inbox-row__tipo--caja { color: oklch(54% 0.14 70); }
.inbox-row__tipo-label.inbox-row__tipo--mov  { color: var(--text-muted); }

/* Checkbox en rows pendientes (R13 — firma masiva) */
.inbox-row:has(.inbox-row__check) {
    grid-template-columns: 20px 32px 1fr auto;
}

.inbox-row__check {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    padding: 2px;
    z-index: 1;
}

.inbox-row__check input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: var(--primary);
    flex-shrink: 0;
}

/* Bulk action bar (R13) */
/* El panel mide 300px: "Todos" + contador + "Firmar seleccionados" no caben en
   una fila (el contador se partía en dos líneas y el botón se salía). Dos
   filas: arriba Todos y el botón (a la derecha), abajo el contador. */
.inbox-bulk-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    padding: 6px 12px;
    background: var(--primary-soft);
    border-bottom: 1px solid oklch(84% 0.09 264);
    flex-shrink: 0;
}
.inbox-bulk-bar > .btn {
    margin-left: auto;
    white-space: nowrap;
    flex-shrink: 0;
}

.inbox-bulk-bar__selectall {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
}

.inbox-bulk-bar__selectall input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--primary);
    cursor: pointer;
}

.inbox-bulk-bar__count {
    flex: 1 1 100%;
    order: 3;
    font-size: 11.5px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Load-more pagination */
.inbox-load-more {
    padding: 10px 14px;
    border-top: 1px solid var(--border);
    background: var(--surface-strong);
}

.inbox-load-more__btn {
    width: 100%;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 11.5px; font-weight: 600;
    cursor: pointer;
    font-family: 'Manrope', sans-serif;
    transition: background .13s, color .13s, border-color .13s;
}

.inbox-load-more__btn:hover {
    background: var(--primary-soft);
    border-color: var(--primary-soft);
    color: var(--primary-deep);
}

/* ── Detail pane: warm white document ─ */
.inbox-detail {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: oklch(98.8% 0.006 52);
}

.inbox-detail__empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.inbox-detail__empty-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: oklch(96% 0.010 52);
    border: 1px solid oklch(90% 0.015 52);
    display: flex; align-items: center; justify-content: center;
    color: oklch(60% 0.06 52);
}

.inbox-detail__empty-state p { font-size: 13px; color: var(--text-muted); }

/* El display:flex de ambas capas ganaba al [hidden] del UA stylesheet (regla
   de autor gana al UA con misma especificidad), dejando el placeholder
   "Seleccione un vale" visible incluso tras seleccionar uno. El selector de
   atributo recupera prioridad y restaura el toggle por .hidden del JS. */
.inbox-detail__empty-state[hidden],
.inbox-detail__content[hidden] { display: none !important; }

.inbox-detail__content {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.inbox-detail__header {
    padding: 20px 26px 16px;
    background: oklch(99.5% 0.004 52);
    border-bottom: 1px solid oklch(93% 0.010 52);
    flex-shrink: 0;
}

.inbox-detail__header-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.inbox-detail__importe {
    font-family: 'Sora', 'Manrope', sans-serif;
    font-size: 1.875rem;
    font-weight: 400;
    color: oklch(18% 0.03 60);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

/* Tipo chips */
.inbox-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-family: 'Manrope', sans-serif;
}

.inbox-chip--caja {
    background: oklch(95% 0.08 78);
    color: oklch(33% 0.12 65);
}

.inbox-chip--mov {
    background: var(--surface-2);
    color: var(--text-muted);
}

.inbox-detail__body {
    flex: 1;
    overflow-y: auto;
    padding: 0 26px;
    scrollbar-width: thin;
    scrollbar-color: oklch(90% 0.012 52) transparent;
}

.inbox-detail__section {
    padding: 14px 0;
    border-bottom: 1px solid oklch(92% 0.008 52);
}

.inbox-detail__section:last-child { border-bottom: none; }

.inbox-detail__section-label {
    font-size: 10px; font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase;
    color: oklch(50% 0.07 38);
    margin-bottom: 8px;
    font-family: 'Manrope', sans-serif;
}

.inbox-detail__name {
    font-size: 15px; font-weight: 700;
    color: var(--text);
    line-height: 1.3;
    font-family: 'Manrope', sans-serif;
    margin-bottom: 4px;
}

.inbox-detail__meta-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 4px 0;
}

.inbox-detail__meta-label {
    font-size: 12px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.inbox-detail__meta-value {
    font-size: 13px; font-weight: 500;
    color: var(--text);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.inbox-detail__meta-value--wrap {
    text-align: right;
    white-space: normal;
    max-width: 220px;
    line-height: 1.4;
}

.inbox-detail__firma-box {
    margin-top: 6px;
    background: oklch(98% 0.006 52);
    border: 1px solid oklch(90% 0.010 52);
    border-radius: 10px;
    padding: 12px 16px;
    min-height: 60px;
    display: flex; align-items: center; justify-content: center;
}

.inbox-detail__firma-box img {
    max-height: 56px; max-width: 200px;
    object-fit: contain;
}

.inbox-detail__firma-placeholder {
    font-size: 12px;
    color: var(--text-light);
    text-align: center;
}

.inbox-detail__footer {
    padding: 12px 26px;
    border-top: 1px solid oklch(93% 0.010 52);
    background: oklch(98% 0.012 52);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-shrink: 0;
}

.inbox-detail__footer-note { font-size: 11.5px; color: oklch(52% 0.06 38); }
.inbox-detail__footer-actions { display: flex; gap: 8px; }

@media (max-width: 768px) {
    #view-firmas.erp-view.active { height: auto; overflow: visible; }
    .firmas-inbox { flex-direction: column; height: auto; border-radius: 12px; }
    .inbox-pane {
        width: 100%; max-height: 260px;
        border-bottom: 1px solid oklch(20% 0.014 242);
    }
    .inbox-detail { min-height: 340px; }
    .inbox-detail__header { padding: 16px 20px 12px; }
    .inbox-detail__body { padding: 0 20px; }
    .inbox-detail__footer { padding: 10px 20px; }
}

/* ── Mi Perfil ──────────────────────────────────────────────── */

.perfil-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 32px;
}

.perfil-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    user-select: none;
    box-shadow: 0 2px 8px rgba(218,91,62,.28);
}

.perfil-hero__name {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 400;
    color: var(--text);
    line-height: 1.2;
    margin: 0;
}

.perfil-hero__sub {
    font-size: 13.5px;
    color: var(--text-muted);
    margin: 4px 0 0;
}

.perfil-body {
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.perfil-section__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.perfil-section__title {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-light);
    margin: 0;
}

.perfil-section__desc {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0 0 14px;
    line-height: 1.55;
}

/* Fields table */
.perfil-fields {
    margin: 10px 0 0;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.perfil-field {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 12px;
    padding: 11px 16px;
    font-size: 13.5px;
    border-bottom: 1px solid var(--border-light);
    background: var(--surface);
}

.perfil-field:last-child { border-bottom: none; }
.perfil-field:nth-child(even) { background: var(--surface-strong); }

.perfil-field dt {
    color: var(--text-light);
    font-weight: 500;
}

.perfil-field dd {
    color: var(--text);
    font-weight: 500;
    margin: 0;
}

.perfil-field--mono {
    font-family: var(--font-mono, monospace);
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
}
/* Dato aún no registrado: se muestra igual (perfil completo) pero atenuado. */
.perfil-field--empty { color: var(--text-light); font-style: italic; }

/* Firma status pill */
.perfil-firma-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 3px 9px;
    border-radius: 999px;
    line-height: 1;
}

.perfil-firma-status__dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.perfil-firma-status--active {
    background: var(--badge-solicitud-aprobada-bg);
    color: var(--badge-solicitud-aprobada-text);
    border: 1px solid var(--badge-solicitud-aprobada-border);
}

.perfil-firma-status--pending {
    background: var(--badge-solicitud-pendiente-bg);
    color: var(--badge-solicitud-pendiente-text);
    border: 1px solid var(--badge-solicitud-pendiente-border);
}

/* ── Firma canvas — zona única de interacción ─────────────── */
.perfil-firma-canvas {
    position: relative;
    width: 100%;
    max-width: 320px;
    min-height: 120px;
    background: var(--surface);
    border: 1.5px dashed var(--border);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* Cuando ya hay firma, borde sólido sutil */
.perfil-firma-canvas[data-state="active"],
.perfil-firma-canvas[data-state="pending"],
.perfil-firma-canvas[data-state="loading"] {
    border-style: solid;
    border-color: var(--border);
}

.perfil-firma-canvas.is-dragover {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(218,91,62,.10);
}

/* ── Estado vacío ── */
.perfil-firma-canvas__empty {
    position: absolute;
    inset: 0;
    display: none; /* controlado por data-state */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 20px 16px;
    color: var(--text-muted);
    transition: color .15s ease, background .15s ease;
    border-radius: calc(var(--radius-md) - 1px);
}

.perfil-firma-canvas[data-state="empty"] .perfil-firma-canvas__empty {
    display: flex;
}

.perfil-firma-canvas__empty:hover,
.perfil-firma-canvas__empty:focus-visible {
    color: var(--primary);
    background: var(--primary-light);
    outline: none;
}

.perfil-firma-canvas__empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--surface-strong);
    color: inherit;
    transition: background .15s ease;
    margin-bottom: 2px;
}

.perfil-firma-canvas__empty:hover .perfil-firma-canvas__empty-icon {
    background: rgba(218,91,62,.12);
}

.perfil-firma-canvas__empty-title {
    font-size: 13px;
    font-weight: 600;
    color: inherit;
    line-height: 1.2;
}

.perfil-firma-canvas__empty-sub {
    font-size: 11.5px;
    color: var(--text-light);
    line-height: 1.3;
}

/* ── Imagen de firma ── */
.perfil-firma-img {
    max-width: calc(100% - 32px);
    max-height: 76px;
    object-fit: contain;
    display: none; /* controlado por data-state */
    position: relative;
    z-index: 1;
    margin: 20px 16px;
    transition: opacity .2s ease;
}

.perfil-firma-canvas[data-state="active"] .perfil-firma-img,
.perfil-firma-canvas[data-state="pending"] .perfil-firma-img,
.perfil-firma-canvas[data-state="loading"] .perfil-firma-img {
    display: block;
}

.perfil-firma-canvas[data-state="loading"] .perfil-firma-img {
    opacity: .35;
}

.perfil-firma-change-link {
    display: none;
    background: none;
    border: none;
    padding: 0;
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-light);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .15s ease;
}

.perfil-firma-change-link:hover,
.perfil-firma-change-link:focus-visible {
    color: var(--text-muted);
    outline: none;
}

.perfil-firma-canvas[data-state="active"] ~ .perfil-firma-change-link {
    display: inline-block;
}

/* ── Barra de confirmación inline (state=pending) ── */
.perfil-firma-canvas__confirm {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--surface-strong);
    border-top: 1px solid var(--border);
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity .18s ease, transform .18s ease;
}

.perfil-firma-canvas[data-state="pending"] .perfil-firma-canvas__confirm {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.perfil-firma-canvas__confirm-save {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 12px;
    background: none;
    border: none;
    border-right: 1px solid var(--border);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
    transition: background .14s ease, color .14s ease;
}

.perfil-firma-canvas__confirm-save:hover {
    background: rgba(218,91,62,.07);
}

.perfil-firma-canvas__confirm-save:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.perfil-firma-canvas__confirm-discard {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 100%;
    padding: 8px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    transition: background .14s ease, color .14s ease;
    flex-shrink: 0;
}

.perfil-firma-canvas__confirm-discard:hover {
    background: rgba(35,31,27,.05);
    color: var(--text);
}

.perfil-firma-canvas__confirm-discard:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

/* ── Loading overlay ── */
.perfil-firma-canvas__loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}

.perfil-firma-canvas[data-state="loading"] .perfil-firma-canvas__loading {
    opacity: 1;
    pointer-events: auto;
}

.perfil-firma-canvas__spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: firma-spin .7s linear infinite;
}

@keyframes firma-spin {
    to { transform: rotate(360deg); }
}

/* Acciones estructural (vacío, solo para compat. JS) */
.perfil-firma-actions {
    display: none;
}

/* ============================================================
   DETALLE v6 — dossier cover + two-column body
   Overrides v5 layout. Keeps: .solv-step,
   .solv-section-head, .solv-history-body.
   State communication: .solv-vrd (aside card).
   ============================================================ */

/* Secciones como paneles separados sobre el papel (lienzo, no slab fusionado).
   Cada bloque respira; las cards internas resaltan sobre --paper. */
.solv-shell { display: flex; flex-direction: column; gap: 14px; }

/* ── Barra de acciones superior (back link + Descargar/Finalizar) ── */
.solv-header-actions {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s4);
    padding: 0 0 var(--s4);
    margin-bottom: 0;
}
.solv-header-actions__right { display: flex; gap: 8px; flex-shrink: 0; }
.solv-header-actions__right .btn { white-space: nowrap; }
/* Ghost del hero = botón delineado (blanco + borde), como el mock head__acts;
   no el ghost transparente global. */
.solv-header-actions__right .btn-ghost {
    background: var(--surface);
    border-color: var(--border-strong, var(--border));
    color: var(--text-muted);
    padding: 9px 15px;
}
.solv-header-actions__right .btn-ghost:hover:not(:disabled) {
    background: var(--surface);
    color: var(--text);
    border-color: var(--text-light, var(--text-muted));
}

/* ── Cover strip ─────────────────────────────────────────── */
.solv-cover {
    display: flex;
    flex-direction: column;
    background: var(--navy);
    border: none;
    border-top: 3px solid var(--primary);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    overflow: hidden;
    color: var(--on-navy);
}
.solv-cover-top {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: flex-start;
    gap: 16px 24px;
    padding: 24px 28px 20px;
}
.solv-cover-person {
    display: flex; align-items: flex-start; gap: 16px; min-width: 0;
}
.solv-cover-info {
    min-width: 0;
    display: flex; flex-direction: column; gap: 4px;
}
.solv-cover-id {
    font-family: var(--font-mono); font-size: .72rem;
    color: var(--on-navy-45); letter-spacing: .02em;
}
.solv-cover-name {
    font-family: var(--font-display);
    font-size: 1.7rem; font-weight: 600; color: var(--on-navy);
    margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    letter-spacing: -0.025em; line-height: 1.2;
}
.solv-cover-sub {
    font-size: .85rem; color: var(--on-navy-60); margin: 0; white-space: nowrap;
}
.solv-cover-estados {
    display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-start;
    margin-top: 4px;
}
.solv-cover-amount {
    display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
    padding-left: 24px; border-left: 1px solid var(--on-navy-12);
}
.solv-cover-amount-k {
    font-size: .65rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: var(--on-navy-45);
}
.solv-cover-amount-v {
    font-family: var(--font-display);
    font-size: 2.25rem; font-weight: 600; color: var(--on-navy);
    font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.1;
}
/* Contexto del anticipo (§7.14): "S/ X rendido · S/ Y por devolver" */
.solv-cover-amount-ctx {
    font-size: .72rem; color: var(--on-navy-55);
    font-variant-numeric: tabular-nums; white-space: nowrap; margin-top: 2px;
}

/* Motivo strip — full-width row below the top grid */
.solv-cover-motivo {
    padding: 14px 28px 18px;
    border-top: 1px solid var(--on-navy-10);
    background: var(--on-navy-03);
}
.solv-cover-motivo-text {
    font-size: .9125rem; color: var(--on-navy-72);
    line-height: 1.55; margin: 0;
    max-width: 68ch;
}
.solv-cover-motivo-text::before {
    content: "Motivo"; display: block;
    font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: var(--on-navy-40); margin-bottom: 6px;
}

/* ── Stepper rail ─────────────────────────────────────────── */
.solv-rail {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    padding: 16px 28px;
}

/* ── Franja "qué falta" — pendientes para finalizar ── */
/* Franja "qué falta" — como en propuesta-ux.html (.next): card blanca con
   acento terracota a la izquierda e icono en terracota, sin caja oscura ni
   fondo melocotón. */
.solv-next {
    display: flex; align-items: flex-start; gap: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 16px 20px;
}
.solv-next__ic {
    width: 36px; height: 36px; border-radius: 9px;
    background: var(--primary-light); color: var(--primary);
    display: grid; place-items: center; flex-shrink: 0;
}
.solv-next__t { font-weight: 700; font-size: 13px; color: var(--ink); }

/* ── Tabs del expediente (Resumen / Gastos / Historial) ── */
/* Barra: tabs a la izquierda, accesos rápidos (consulta) en la esquina
   derecha, visibles desde cualquier tab. La línea inferior vive acá. */
.solv-tabbar {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
}
.solv-tabbar .solv-quick { padding-bottom: 6px; }
.solv-tabs {
    display: flex; gap: 2px;
    background: transparent;
    border: none;
    padding: 0 4px;
}
.solv-tab {
    border: none; background: none; font-family: inherit;
    font-size: 14px; font-weight: 600; color: var(--text-muted);
    padding: 11px 16px; cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    display: inline-flex; align-items: center; gap: 7px;
    transition: color var(--ease-out);
}
.solv-tab:hover { color: var(--text); }
.solv-tab.is-active { color: var(--primary-deep); border-bottom-color: var(--primary); }
.solv-tab-n {
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--radius-pill); font-size: 11px; padding: 1px 8px;
    color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.solv-tabwrap {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}
/* Historial (tab): panel blanco propio para que el timeline resalte sobre el papel */
#solv-historial {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}
.solv-tabpanel { display: none; }
.solv-tabpanel.is-active { display: block; animation: fadeIn .2s ease; }
/* IP1 (propuesta-ux.html): izquierda GESTIÓN (1.6fr) · derecha DATOS (1fr). */
.solv-resumen-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; align-items: start; }
.solv-resumen-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.solv-resumen-side { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 860px) { .solv-resumen-grid { grid-template-columns: 1fr; } }
/* Columna de gestión vacía (colab sin CTAs): los datos van a todo el ancho,
   en 3 pares por fila (dt+dd se conservan: los usan los specs). */
.solv-resumen-grid.is-solo { grid-template-columns: 1fr; }
.solv-resumen-grid.is-solo .solv-resumen-main { display: none; }
.solv-resumen-grid.is-solo .solv-aside-dl {
    grid-template-columns: repeat(3, auto 1fr);
    column-gap: 28px;
}
@media (max-width: 1100px) { .solv-resumen-grid.is-solo .solv-aside-dl { grid-template-columns: repeat(2, auto 1fr); } }
@media (max-width: 640px)  { .solv-resumen-grid.is-solo .solv-aside-dl { grid-template-columns: auto 1fr; } }

/* ── Veredicto card — aside widget, replaces full-width banner ─ */
/*    States: is-aprobada | is-observada | is-rechazada           */
.solv-vrd {
    border-radius: var(--radius-md);
    border: 1px solid;
    overflow: hidden;
    font-size: .8125rem;
    max-width: 760px;
}
/* Sin comentario (aprobada, o veredicto sin texto) la card se compacta a una
   sola fila: etiqueta a la izquierda, quién y cuándo a la derecha. */
.solv-vrd:has(.solv-vrd-body > .solv-vrd-meta:only-child) { display: flex; align-items: stretch; max-width: 620px; }
.solv-vrd:has(.solv-vrd-body > .solv-vrd-meta:only-child) .solv-vrd-head { flex: 0 0 auto; }
.solv-vrd:has(.solv-vrd-body > .solv-vrd-meta:only-child) .solv-vrd-body { flex: 1 1 auto; justify-content: center; padding: 6px 12px; }

/* Head strip: tinted, icon + label in one tight row */
.solv-vrd-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    font-weight: 700;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .055em;
    line-height: 1;
}

/* Sello icon bubble */
.solv-vrd-sello {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.solv-vrd-label {
    flex: 1;
    min-width: 0;
}

/* Body: actor meta + comment */
.solv-vrd-body {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.solv-vrd-meta {
    font-size: .75rem;
    font-weight: 500;
    display: block;
}

.solv-vrd-comentario {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.solv-vrd-ver-mas {
    display: inline-block;
    margin-top: 6px;
    font-size: .75rem;
    font-weight: 600;
    color: inherit;
    text-decoration: underline;
    opacity: .75;
}
.solv-vrd-ver-mas:hover { opacity: 1; }

.solv-vrd-autor {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .65;
}

.solv-vrd-texto {
    margin: 0;
    font-size: .8rem;
    line-height: 1.6;
    font-style: italic;
    color: inherit;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── is-aprobada: green sello ─── */
.solv-vrd.is-aprobada {
    border-color: oklch(76% 0.13 150);
    background: oklch(96% 0.04 150);
}
.solv-vrd.is-aprobada .solv-vrd-head {
    background: oklch(88% 0.10 150);
    color: oklch(28% 0.10 150);
}
.solv-vrd.is-aprobada .solv-vrd-sello {
    background: oklch(46% 0.16 150);
    color: var(--on-accent);
}
.solv-vrd.is-aprobada .solv-vrd-body {
    color: oklch(36% 0.10 150);
}
.solv-vrd.is-aprobada .solv-vrd-meta {
    color: oklch(40% 0.10 150);
}

/* ── is-observada: amber note ─── */
.solv-vrd.is-observada {
    border-color: oklch(72% 0.13 65);
    background: oklch(97% 0.03 65);
}
.solv-vrd.is-observada .solv-vrd-head {
    background: oklch(89% 0.10 65);
    color: oklch(34% 0.10 52);
}
.solv-vrd.is-observada .solv-vrd-sello {
    background: oklch(52% 0.16 52);
    color: var(--on-accent);
}
.solv-vrd.is-observada .solv-vrd-body {
    color: oklch(30% 0.08 52);
    border-top: 1px solid oklch(82% 0.10 65);
}
.solv-vrd.is-observada .solv-vrd-autor {
    color: oklch(45% 0.12 52);
    opacity: 1;
}
/* IP5 — pendientes plegados dentro de la card observada (reemplazan la franja
   .solv-next aparte: una sola señal primaria). */
.solv-vrd-pend__t { font-weight: 700; font-size: 12.5px; color: var(--ink); }
.solv-vrd.is-observada .solv-vrd-pend { gap: 2px; }
.solv-vrd.is-observada .solv-vrd-pend .solv-next__list { margin-top: 4px; }
.solv-vrd.is-observada .solv-vrd-pend .solv-next__list li { color: oklch(30% 0.08 52); }

/* ── is-rechazada: terracotta-red ─── */
.solv-vrd.is-rechazada {
    border-color: oklch(68% 0.14 22);
    background: oklch(97% 0.02 22);
}
.solv-vrd.is-rechazada .solv-vrd-head {
    background: oklch(88% 0.09 22);
    color: oklch(30% 0.10 22);
}
.solv-vrd.is-rechazada .solv-vrd-sello {
    background: oklch(46% 0.16 22);
    color: var(--on-accent);
}
.solv-vrd.is-rechazada .solv-vrd-body {
    color: oklch(28% 0.08 22);
    border-top: 1px solid oklch(80% 0.10 22);
}
.solv-vrd.is-rechazada .solv-vrd-autor {
    color: oklch(42% 0.12 22);
    opacity: 1;
}

/* Body de la card de gestión: botones a todo el ancho (la pila vertical la da
   .solv-aside-actions-card .solv-aside-card-body). */
.solv-aside-actions .btn {
    width: auto; align-self: flex-start; justify-content: center; box-sizing: border-box;
}

/* ── Accesos rápidos (consulta): esquina derecha de la barra de tabs (IP1) ── */
.solv-quick { display: flex; gap: 8px; flex-wrap: wrap; }
.solv-quick .btn { width: auto; font-size: 12.5px; padding: 6px 11px; }

/* ── Card de gestión (admin): los widgets en rejilla, no apilados a todo el
   ancho. Cada uno es una unidad compacta: input+botón en fila, botón de
   acción con ancho propio. ── */
.solv-gestion-card .solv-aside-card-body:has(.doc-anticipo-widget) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
    align-items: stretch;
}
/* Misma altura en toda la fila y misma anatomía: cabecera → texto (crece) →
   acción anclada abajo. Así los botones de widgets vecinos quedan alineados. */
.solv-gestion-card .doc-anticipo-widget { margin: 0; display: flex; flex-direction: column; }
.solv-gestion-card .doc-anticipo-widget .doc-anticipo-hint { flex: 1 1 auto; }
.solv-gestion-card .doc-anticipo-widget .doc-anticipo-field { margin-top: auto; }
.solv-gestion-card .doc-anticipo-widget.is-pending .doc-anticipo-field {
    flex-direction: row; align-items: center; gap: 8px;
}
.solv-gestion-card .doc-anticipo-widget.is-pending .doc-anticipo-input { flex: 1; width: auto; min-width: 0; }
.solv-gestion-card .doc-anticipo-btn { width: auto; padding: 0 14px; flex-shrink: 0; }
/* Cifra + CTA largo (sobregasto): apilados, botón a todo el ancho — en fila
   el botón desbordaba la card. */
/* Especificidad: debe ganarle a `.solv-gestion-card .doc-anticipo-widget
   .is-pending .doc-anticipo-field` (4 clases) — con 3 perdía y el botón
   seguía saliéndose. */
.solv-gestion-card .doc-anticipo-widget.is-pending .doc-anticipo-field:has(.doc-anticipo-cifra) {
    flex-direction: column; align-items: stretch; gap: 10px;
}
.solv-gestion-card .doc-anticipo-widget.is-pending .doc-anticipo-field:has(.doc-anticipo-cifra) .doc-anticipo-btn { width: 100%; }
.solv-gestion-card .doc-anticipo-widget.is-set.is-editing .doc-anticipo-field { flex-direction: column; align-items: stretch; }
.solv-gestion-card .doc-anticipo-edit-row .doc-anticipo-btn { flex: 1; }
/* Widget resuelto: datos a la izquierda, "Ver comprobante" pegado a la derecha. */
.solv-gestion-card .doc-anticipo-field--meta {
    flex-direction: row; align-items: center; justify-content: space-between; gap: 12px;
}
.doc-anticipo-link { gap: 5px; height: 30px; font-size: .78rem; text-decoration: none; }
.doc-anticipo-link svg { flex-shrink: 0; }

/* ── F. Zona de decisión (IP1 · propuesta-ux.html) ──
   Terminus del scroll: panel full width tras los tabs, fuera de cualquier
   card. Rechazar es terminal (capabilities.js: 'rechazada' bloquea reenviar),
   así que va aislado a la derecha con tratamiento destructivo explícito. Al
   observar/rechazar, admin-detalle.js reemplaza el contenido de la zona por el
   formulario de comentario (.decision-prompt). */
/* La zona también lleva .solv-exp-actions (fila flex a la derecha, para el
   formulario de comentario): acá se neutraliza para que el panel ocupe el
   ancho completo. Esta regla va después de .solv-exp-actions, gana por orden. */
.solv-decision-zone { display: block; margin-top: var(--s2); }
.solv-decision {
    width: 100%;
    box-sizing: border-box;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--s5);
    display: flex;
    flex-direction: column;
    gap: var(--s2);
}
.solv-decision__title {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ink);
}
.solv-decision__hint {
    margin: 0 0 var(--s3);
    max-width: 640px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-muted);
}
.solv-decision__hint strong { color: var(--ink); font-weight: 700; }
.solv-decision__actions {
    display: flex;
    align-items: center;
    gap: var(--s3);
    flex-wrap: wrap;
}
.solv-decision__danger { margin-left: auto; }
.solv-decision__danger .btn-decide-rechazar {
    background: var(--surface);
    border-color: var(--badge-solicitud-rechazada-border);
    font-weight: 600;
}
.solv-decision__danger .btn-decide-rechazar:hover:not(:disabled) {
    background: var(--st-rechazada-bg);
    border-color: oklch(70% .13 22);
}
.solv-decision-zone .decision-prompt { width: 100%; }
@media (max-width: 640px) {
    .solv-decision__actions { flex-direction: column; align-items: stretch; }
    .solv-decision__danger { margin-left: 0; margin-top: var(--s2); }
    .solv-decision__actions [class^="btn-decide-"] { width: 100%; justify-content: center; }
}

/* ── IP2: barra sticky condensada de decisión ──
   Respaldo del panel inline (aparece solo cuando .solv-decision sale del
   viewport; lo controla admin-detalle.js con IntersectionObserver). Sticky y
   no fixed: respeta el ancho del contenido, no pisa el sidebar. */
.solv-decision-sticky {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin-top: var(--s4);
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 18px -8px oklch(20% 0.02 260 / .28);
}
.solv-decision-sticky__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    padding: var(--s3) var(--s4);
}
.solv-decision-sticky__label {
    font-size: .8125rem;
    color: var(--ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.solv-decision-sticky__label strong { color: var(--ink); font-weight: 700; }
.solv-decision-sticky__btns {
    display: flex;
    align-items: center;
    gap: var(--s2);
    flex-shrink: 0;
}
/* Condensados: .btn-sm no pisa el padding propio de .btn-decide-* (cascada). */
.solv-decision-sticky__btns .btn-decide-rechazar,
.solv-decision-sticky__btns .btn-decide-observar,
.solv-decision-sticky__btns .btn-decide-aprobar { padding: 6px 12px; font-size: 12.5px; }
/* Rechazar aislado a la izquierda: misma jerarquía por consecuencia que el panel. */
.solv-decision-sticky__btns .btn-decide-rechazar { margin-right: var(--s3); }
@media (max-width: 640px) {
    .solv-decision-sticky__label { display: none; }
    .solv-decision-sticky__btns { width: 100%; justify-content: flex-end; }
}

.solv-aside-actions + .solv-aside-card {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--border);
}

/* ── Estado "detalle no disponible" (solicitud inexistente / sin acceso) ──
   Reemplaza al spinner. Es un estado de página: sin toast, con una salida. */
.solv-estado {
    max-width: 520px; margin: 48px auto; padding: 32px 28px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
    text-align: center;
}
.solv-estado__ic {
    width: 48px; height: 48px; margin: 0 auto 14px; border-radius: 50%;
    background: var(--surface-strong); color: var(--ink-muted);
    display: grid; place-items: center;
}
.solv-estado__ic svg { width: 22px; height: 22px; }
.solv-estado__t { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; color: var(--ink); margin: 0 0 6px; }
.solv-estado__p { font-size: .875rem; color: var(--ink-muted); margin: 0 0 18px; line-height: 1.5; }
.solv-estado__detalle { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .75rem; color: var(--ink-light); margin: -8px 0 18px; }
.solv-estado__acts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
/* Dentro de una celda de tabla: sin caja propia, solo el contenido. */
.solv-estado--compacto { margin: 12px auto; padding: 28px 20px; border: none; box-shadow: none; background: transparent; }

/* ── Aside cards ─────────────────────────────────────────── */
.solv-aside-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md); overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.solv-aside-card-title {
    font-size: .65rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: var(--text-muted);
    padding: 10px 14px 9px; border-bottom: 1px solid var(--border-light);
    margin: 0; background: var(--surface-strong);
}

/* ── Cards financieras horizontales (Anticipo · Rendido · Saldo) ── */
.solv-fincards {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--s4);
}
.solv-fincard {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--s5);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--ease-out), transform var(--ease-out);
    display: flex; flex-direction: column; gap: var(--s3);
}
.solv-fincard:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
/* Stat card que navega a un tab (Rendido → Gastos). */
.solv-fincard--link { cursor: pointer; }
.solv-fincard--link:hover { border-color: var(--primary); }
.solv-fincard--link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.solv-fincard-go { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--primary); }
.solv-fincard-go svg { width: 13px; height: 13px; }
.solv-fincard-label {
    display: flex; align-items: center; gap: 7px;
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--ink-light);
}
.solv-fincard-label .solv-ic { width: 15px; height: 15px; color: var(--ink-light); flex-shrink: 0; }
.solv-fincard-value {
    font-family: var(--font-display);
    font-size: 2rem; font-weight: 600; letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums; color: var(--ink); line-height: 1.1;
}
/* Saldo a favor de la empresa (por devolver) → tinte verde */
.solv-fincard--favor {
    background: linear-gradient(165deg, var(--st-aprobada-bg), var(--surface) 75%);
    border-color: var(--badge-rendicion-aprobada-border);
}
.solv-fincard--favor .solv-fincard-label,
.solv-fincard--favor .solv-fincard-label .solv-ic,
.solv-fincard--favor .solv-fincard-value { color: var(--st-aprobada-tx); }
/* Saldo a favor del colaborador (a reembolsar) → tinte cálido apagado
   (no ámbar saturado): superficie grande, color decorativo bajado de saturación. */
.solv-fincard--debe {
    background: linear-gradient(165deg, var(--surface-warn-soft), var(--surface) 75%);
    border-color: var(--surface-warn-line);
}
.solv-fincard--debe .solv-fincard-label,
.solv-fincard--debe .solv-fincard-label .solv-ic,
.solv-fincard--debe .solv-fincard-value { color: var(--ink-warn); }

/* ── Card de devolución de saldo (prominente, tinte terracota) ── */
/* Como el widget "pendiente" del mock (.gwidget.pending): ámbar pálido plano,
   sin degradado melocotón. */
.solv-devolucion-card {
    background: oklch(98% .02 85);
    border: 1px solid oklch(87% .07 85);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.solv-devolucion-card-head {
    display: flex; align-items: center; gap: 8px;
    padding: var(--s4) var(--s5);
    border-bottom: 1px solid var(--border-light);
    font-size: .78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--ink-warn);
}
.solv-devolucion-card-head .solv-ic { width: 15px; height: 15px; color: var(--ink-warn); }
.solv-devolucion-card-body {
    padding: var(--s5);
    display: flex; flex-direction: column; gap: var(--s4);
}
.solv-devolucion-card-text {
    font-size: .8125rem; color: var(--ink-muted); margin: 0; line-height: 1.6;
}
.solv-devolucion-card-text strong { font-weight: 600; color: var(--ink); }

/* ── Card "Acciones" del aside (envuelve accionesHtml) ── */
.solv-aside-actions-card .solv-aside-card-body {
    padding: var(--s4);
    display: flex; flex-direction: column; gap: 8px;
}
.solv-aside-actions-card .solv-aside-card-body .btn {
    width: auto; align-self: flex-start; justify-content: flex-start;
}

/* Metadata dl */
.solv-aside-dl {
    display: grid; grid-template-columns: auto 1fr;
    gap: 0; margin: 0; padding: 6px 14px 10px; font-size: .8125rem;
}
.solv-aside-dl dt {
    color: var(--text-muted); font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    padding: 6px 10px 6px 0; white-space: nowrap;
    border-bottom: 1px solid var(--border-light);
}
.solv-aside-dl dd {
    color: var(--text); padding: 6px 0; margin: 0;
    border-bottom: 1px solid var(--border-light);
    font-variant-numeric: tabular-nums;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.solv-aside-dl dt:last-of-type,
.solv-aside-dl dd:last-of-type { border-bottom: none; }

/* ── Modal solicitud redesign (msol-*) ─────────────────────── */
.msol-modal { max-width: 680px; width: 100%; }
.msol-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border); background: var(--surface-strong);
}
.msol-header-person {
    display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1;
}
.msol-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--primary); color: #fff;
    font-family: var(--font-display); font-size: 1.15rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; text-transform: uppercase;
}
.msol-title {
    font-family: var(--font-display); font-size: 1rem; font-weight: 700;
    color: var(--text); margin: 0; letter-spacing: -0.01em;
}
.msol-subtitle { font-size: .825rem; color: var(--text-muted); margin: 2px 0 0; }
.msol-header-right {
    display: flex; align-items: flex-start; gap: 16px; flex-shrink: 0;
}
.msol-amount-block {
    display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
}
.msol-amount-k {
    font-size: .65rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: var(--text-light);
}
.msol-amount-v {
    font-family: var(--font-display); font-size: 1.5rem; font-weight: 700;
    color: var(--text); font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em; line-height: 1.1;
}
.msol-meta-strip {
    display: flex; border-bottom: 1px solid var(--border-light);
}
/* Etiquetas del modal: jerarquía consistente (chiquitas, mayúsculas, atenuadas)
   para que el VALOR sea lo que se lee. */
.msol-modal .di-label {
    font-size: .66rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .06em; color: var(--text-light);
}
.msol-meta-item {
    flex: 1; padding: 14px 24px; display: flex; flex-direction: column; gap: 5px;
}
.msol-meta-value {
    font-size: .9375rem; font-weight: 600; color: var(--text);
    font-variant-numeric: tabular-nums;
}
.msol-badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.msol-fields {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    border-bottom: 1px solid var(--border-light);
}
/* Sin líneas verticales (look de planilla); solo un divisor horizontal entre las
   dos filas. Más padding para respirar. */
.msol-field {
    padding: 14px 24px; display: flex; flex-direction: column; gap: 5px;
    border-bottom: 1px solid var(--border-light);
}
.msol-field:nth-last-child(-n+2) { border-bottom: none; }
.msol-field-value { font-size: .9375rem; font-weight: 600; color: var(--text); }
.msol-motivo {
    padding: 16px 24px; border-bottom: 1px solid var(--border-light);
    background: oklch(98% 0.003 250);
}
.msol-motivo-text {
    font-size: .9125rem; color: var(--text); line-height: 1.6;
    margin: 6px 0 0; font-style: italic; max-width: 60ch;
}
.msol-hist-block { padding: 16px 24px 4px; }

/* ── Block separation: paper stripe between main sections ─── */
.solv-section + .solv-section {
    border-top: 8px solid var(--paper);
}

/* ── Iconos del detalle (alineación a design-detalle-v4) ─────────
   Tabs, stat-cards, items de "qué falta" y chip de firma. SVG Lucide
   inline (sin CDN, DESIGN.md §5). Puramente aditivo. */
.solv-ic { width: 16px; height: 16px; flex-shrink: 0; }
/* Franja "qué falta": cada item con icono terracota en vez de viñeta */
.solv-next__list { margin: 6px 0 0; padding-left: 0; list-style: none; }
.solv-next__list li { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-muted); margin: 2px 0; }
.solv-next__list .solv-ic { width: 15px; height: 15px; color: var(--primary); }
/* Footer del tab Gastos: total rendido + conteo (§8 doc) */
.solv-gastos-foot {
    display: flex; align-items: baseline; gap: 8px; justify-content: flex-end;
    padding: 14px 4px 2px; margin-top: 12px;
    border-top: 1px solid var(--border); font-size: .8125rem; color: var(--text-muted);
}
.solv-gastos-foot strong {
    font-family: var(--font-display); font-size: 1rem; color: var(--text);
    font-variant-numeric: tabular-nums;
}
.solv-gastos-foot-n { color: var(--text-light); }

/* Header del tab Gastos (total rendido · N gastos | Registrar gasto) */
.solv-section-head-content { flex: 1; min-width: 0; }
.solv-section-head-text { font-size: .8125rem; color: var(--ink-muted); }
.solv-section-head-text .monto {
    font-weight: 700; color: var(--ink); font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
}
.solv-section-head-text .solv-gastos-count { color: var(--ink-muted); }

/* ── TABLA DE GASTOS — sistema canónico (§7.5 DESIGN.md), expandible ── */
.data-table { width: 100%; border-collapse: collapse; background: var(--surface); }
.data-table thead th {
    text-align: left; font-size: .68rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em; color: var(--ink-light);
    padding: 12px var(--s5); background: var(--surface-2);
    border-bottom: 1px solid var(--border); white-space: nowrap;
}
.data-table th.num { text-align: right; }
.data-table tbody tr.data-table-row {
    border-bottom: 1px solid var(--border-light);
    cursor: pointer; transition: background var(--ease-out);
}
.data-table tbody tr.data-table-row:hover { background: var(--surface-2); }
.data-table tbody tr.data-table-row.is-open { background: var(--surface-2); }
.data-table td {
    padding: 14px var(--s5); font-size: .875rem; color: var(--ink);
    vertical-align: middle;
}
.data-table .gnum {
    font-family: var(--font-mono); font-size: .72rem; color: var(--ink-light);
    font-variant-numeric: tabular-nums;
}
.data-table .gtipo {
    font-size: .66rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .03em; color: var(--primary-ink); background: var(--primary-soft);
    padding: 3px 9px; border-radius: var(--radius-pill);
    white-space: nowrap; display: inline-block;
}
.data-table .gtipo.doc {
    color: var(--ink-muted); background: var(--surface-2); border: 1px solid var(--border);
}
.data-table .gasto-concept {
    color: var(--ink); overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; max-width: 300px;
}
.data-table .ceco {
    font-family: var(--font-mono); font-size: .75rem; color: var(--ink-light);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.data-table .firmachip {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .68rem; font-weight: 600; white-space: nowrap;
}
.data-table .firmachip .solv-ic { width: 12px; height: 12px; }
.data-table .firmachip.falta { color: var(--st-observada-tx); }
.data-table .firmachip.ok { color: var(--st-aprobada-tx); }
.data-table .firmachip.none { color: var(--ink-light); }
.data-table .monto {
    font-family: var(--font-mono); font-weight: 600;
    font-variant-numeric: tabular-nums; text-align: right;
    color: var(--ink); white-space: nowrap;
}
.data-table .gasto-chev-cell { text-align: center; width: 44px; padding: 14px 12px; }
.data-table-expand-btn {
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; background: transparent; cursor: pointer; padding: 0;
    color: var(--ink-light); transition: color var(--ease-out);
}
.data-table-expand-btn:hover { color: var(--primary); }
.data-table-expand-btn svg {
    width: 14px; height: 14px;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.data-table-expand-btn[aria-expanded="true"] svg { transform: rotate(90deg); }
.data-table-expand-btn[aria-expanded="true"] { color: var(--primary); }

/* Fila de detalle expandible */
.data-table-detail { border-bottom: 1px solid var(--border-light); }
.data-table-detail[hidden] { display: none; }
.data-table-detail > td { padding: 0; background: var(--surface-detail); }
.data-table-detail-body {
    display: flex; flex-direction: column; gap: var(--s4);
    padding: 16px var(--s5) 20px 60px;
}
.gasto-detail-fields {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    gap: 0; border: 1px solid var(--border-light); border-radius: var(--radius-sm);
    overflow: hidden;
}
.gasto-detail-fields .gasto-acc-field {
    padding: 9px 14px 10px; background: var(--surface-field);
    border: none; border-radius: 0;
    border-right: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}
.gasto-detail-fields .gasto-acc-field:last-child { border-bottom: none; }
.gasto-detail-fields .gaf-label {
    font-size: .62rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--ink-light);
}
.gasto-detail-fields .gaf-value {
    font-size: .875rem; font-weight: 600; color: var(--ink); margin-top: 2px;
    font-variant-numeric: tabular-nums;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.data-table-detail-body .gasto-adj-panel--flat .gasto-adj-title {
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--ink-light);
    padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--border);
}
.data-table-actions {
    display: flex; gap: 6px; align-items: center;
    padding-top: 12px; border-top: 1px solid var(--border-light);
    flex-wrap: wrap;
}

.solv-gitem-act-gap { flex: 1; min-width: 8px; }
/* Eliminar gasto: acción destructiva → terna de estado "rechazada".
   Especificidad .btn.solv-gitem-del (0,2,0) gana a .btn-ghost sin !important. */
.btn.solv-gitem-del {
    color: var(--st-rechazada-tx);
}
.btn.solv-gitem-del:hover:not(:disabled) {
    background: var(--st-rechazada-bg);
    color: var(--st-rechazada-tx);
}

/* ── Responsive ───────────────────────────────────────────────
   Breakpoints en orden descendente (max-width) para que la cascada
   resuelva sin ambigüedad: la regla más estrecha gana por orden de
   fuente. Tablet ~1000px usa el layout base; reflows: 860 → 480. */
@media (max-width: 768px) {
    .solv-header-actions { flex-direction: column; align-items: flex-start; }
    .solv-header-actions__right { width: 100%; }
    .solv-header-actions__right .btn { flex: 1; }
    .solv-fincards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .data-table { font-size: .8125rem; }
    .data-table thead th { padding: 10px 12px; }
    .data-table td { padding: 12px 12px; }
    .data-table .gasto-concept { max-width: 120px; }
    .data-table-detail-body { padding: 14px 16px 18px 44px; }
    .gasto-detail-fields { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .solv-cover-top { grid-template-columns: 1fr; padding: 18px 20px 14px; }
    .solv-cover-amount {
        border-left: none; padding-left: 0;
        padding-top: 12px; border-top: 1px solid var(--on-navy-12);
        align-items: flex-start;
    }
    .solv-cover-name { font-size: 1.4rem; }
    .solv-cover-amount-v { font-size: 1.4rem; }
    .solv-cover-motivo { padding: 12px 20px 16px; }
    .solv-rail { padding: 12px 20px; }
}
@media (max-width: 480px) {
    .solv-fincards { grid-template-columns: 1fr; }
}

/* ── Onboarding colaborador (Inicio sin solicitudes) ─────── */
.inicio-onboarding {
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 48px 32px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    max-width: 640px; margin: 16px auto 0;
}
.inicio-onboarding-icon {
    width: 80px; height: 80px; margin: 0 auto 18px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: rgba(218,91,62,.10); color: var(--primary);
}
.inicio-onboarding-title {
    font-size: 1.4rem; font-weight: 700; color: var(--text);
    margin: 0 0 10px; line-height: 1.25;
}
.inicio-onboarding-desc {
    font-size: .9375rem; color: var(--text-muted);
    margin: 0 auto 24px; max-width: 480px; line-height: 1.55;
}
.inicio-onboarding-cta { padding: 11px 22px; font-size: 14px; }
.inicio-onboarding-steps {
    list-style: none; margin: 32px 0 0; padding: 0;
    display: grid; gap: 10px; max-width: 420px; margin-left: auto; margin-right: auto;
    text-align: left;
}
.inicio-onboarding-steps li {
    display: flex; align-items: center; gap: 12px;
    font-size: .875rem; color: var(--text); padding: 10px 14px;
    background: var(--surface); border: 1px solid var(--border-light); border-radius: 10px;
}
.inicio-onboarding-steps li span {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--primary); color: #fff; font-size: .75rem; font-weight: 700;
    flex-shrink: 0;
}

/* ── Toolbar table: popover de opciones secundarias ─────── */
.tbl-more { position: relative; }
.tbl-more > summary {
    list-style: none; cursor: pointer; display: inline-flex; align-items: center;
    justify-content: center; width: 32px; height: 32px; border-radius: 8px;
    color: var(--text-muted); background: transparent; border: 1px solid transparent;
    transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.tbl-more > summary::-webkit-details-marker { display: none; }
.tbl-more > summary:hover { background: var(--surface-strong); color: var(--text); border-color: var(--border); }
.tbl-more[open] > summary { background: var(--surface-strong); color: var(--text); border-color: var(--border); }

.tbl-more-panel {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
    min-width: 220px; background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; box-shadow: var(--shadow-md); padding: 6px;
    display: flex; flex-direction: column; gap: 2px;
    animation: tbl-more-pop .12s ease-out;
}
@keyframes tbl-more-pop {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.tbl-more-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-radius: 6px;
    background: transparent; border: none; cursor: pointer;
    color: var(--text); font: inherit; font-size: 13px; text-align: left;
    transition: background var(--ease);
}
.tbl-more-item:hover { background: var(--surface-strong); }
.tbl-more-item svg { flex-shrink: 0; color: var(--text-muted); }

.tbl-more-pagesize { justify-content: space-between; cursor: default; }
.tbl-more-pagesize:hover { background: transparent; }
.tbl-more-pagesize select {
    padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px;
    font: inherit; font-size: 13px; background: var(--surface); cursor: pointer;
}

/* ============================================================
   ACCESIBILIDAD — prefers-reduced-motion
   Usuarios con sistema configurado para reducir movimiento
   (mareos, vestibular disorders). Anula transiciones y animaciones.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   Multi-moneda — toggle segmentado de moneda (form de solicitud).
   Radios estilados como segmented control: pista neutra, opción
   activa en pill blanco con sombra y el acento de marca. El valor
   sale del radio name="moneda" marcado (PEN/USD en mayúsculas).
   ============================================================ */
.erp-segmented {
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 3px;
    padding: 3px;
    background: var(--surface-sunken, #eef1f5);
    border: 1px solid var(--border, #dfe3e9);
    border-radius: 10px;
    margin-top: 4px;
}
.erp-segmented input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.erp-segmented__opt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 24px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-muted, #6b7280);
    white-space: nowrap;
    cursor: pointer;
    border-radius: 8px;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.erp-segmented__sym {
    font-weight: 800;
    opacity: .6;
    transition: color .18s ease, opacity .18s ease;
}
.erp-segmented input:checked + label.erp-segmented__opt {
    background: #fff;
    color: var(--primary-ink, #7f2d1d);
    box-shadow: 0 1px 3px rgba(35, 31, 27, .12), 0 0 0 .5px rgba(35, 31, 27, .04);
}
.erp-segmented input:checked + label.erp-segmented__opt .erp-segmented__sym {
    color: var(--primary, #da5b3e);
    opacity: 1;
}
.erp-segmented__opt:hover {
    color: var(--primary-ink, #7f2d1d);
}
.erp-segmented:focus-within {
    box-shadow: 0 0 0 3px var(--primary-focus-ring, rgba(218, 91, 62, .18));
}