/*
 * Identidad visual "Suite" (tokens tomados de suite.nextdrivesolutions.cl):
 * fondo azulado claro, tarjetas blancas con sombra suave, navy/azul/aqua/
 * violeta como paleta de marca, radios generosos (nada de esquinas rectas)
 * y Manrope para toda la interfaz. DM Mono queda reservado únicamente para
 * datos: cifras tabulares, IDs, timestamps — nunca para botones, nav o
 * badges (eso ahora es Manrope 700 en mayúsculas, como los "overline" del
 * sistema de tokens).
 */
:root {
    --navy: #002058;
    --navy-2: #071b3a;
    --blue: #0078ff;
    --blue-2: #135ee8;
    --aqua: #00d0c0;
    --aqua-deep: #00a899;
    --violet: #7667ff;
    --green: #20d59b;
    --green-deep: #159a76;
    --warning: #f4a524;
    --danger: #e44e5e;

    --blue-tint: #e8f2ff;
    --aqua-tint: #e5fbf8;
    --violet-tint: #f0edff;
    --green-tint: #e8faf4;
    --warning-tint: #fdefd9;
    --danger-tint: #fbe6e8;

    --ink: #10213d;
    --text: var(--ink);
    --text-muted: #5b6a80;
    --muted: #6e7c91;
    --bg: #f3f7fc;
    --card: #ffffff;
    --white: #ffffff;
    --surface: #ffffff;
    --surface-2: #f8fafd;
    --border: #e2e9f2;
    --border-strong: #d2dce9;

    /* compat: nombres usados por vistas/badges existentes, remapeados a la nueva paleta */
    --black: var(--navy-2);
    --cream: var(--surface-2);
    --blue-dark: var(--blue-2);
    --blue-light: var(--blue-tint);
    --teal: var(--aqua);
    --teal-light: var(--aqua-tint);
    --yellow: #b9740a;
    --yellow-light: var(--warning-tint);
    --red: var(--danger);
    --red-light: var(--danger-tint);
    --gray-1: var(--text-muted);
    --gray-2: #3d4a5e;
    --gray-3: #9ab0cc;

    --radius: 12px;
    --radius-xs: 8px;
    --radius-sm: 10px;
    --radius-btn: 11px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-pill: 999px;

    --shadow: 0 7px 22px rgba(0, 32, 88, .09);
    --shadow-button: 0 7px 18px rgba(0, 120, 255, .28);
    --shadow-hover: 0 12px 35px rgba(0, 32, 88, .16);
    --shadow-lg: 0 30px 80px rgba(0, 32, 88, .28);

    --mono: 'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
    --sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--sans);
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-2); }
h1, h2, h3 { margin: 0 0 4px; color: var(--ink); font-weight: 800; letter-spacing: -.02em; }
h1 { font-size: 26px; }
h2 { font-size: 17px; }
p { margin: 0 0 8px; color: var(--text-muted); }

#app { display: flex; flex-direction: column; min-height: 100vh; }

/* Topbar */
.topbar {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--navy-2); color: var(--surface-2); padding: 0 20px; height: 60px;
    position: sticky; top: 0; z-index: 20; border-bottom: 1px solid rgba(255,255,255,.08);
}
.topbar-left { display: flex; align-items: center; gap: 28px; min-width: 0; flex: 1 1 auto; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--surface-2); flex-shrink: 0; }
.brand-logo { height: 34px; width: auto; display: block; }
.brand-text b { display: block; font-size: 14px; font-weight: 800; }
.brand-text span { display: block; font-family: var(--sans); font-weight: 700; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: #94a8c9; }
/* El menú siempre queda extendido (todas las etiquetas visibles, nunca
   colapsado en un cajón) salvo en mobile real. Si en algún ancho angosto
   de escritorio no entra completo, esta fila se desplaza horizontalmente
   en vez de partir el texto o esconder items detrás de un hamburguesa. */
.navlinks { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: thin; position: relative; }
.navlinks::-webkit-scrollbar { height: 4px; }
.navlinks::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); }
/* Insinúa que hay más ítems de menú fuera de vista (sin agregar ancho de
   scroll: al ser absolute queda fija en el borde, no dentro del contenido
   que se desplaza). Solo relevante en anchos angostos donde el menú no
   entra completo. */
.navlinks::after {
    content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 22px;
    background: linear-gradient(to right, transparent, var(--navy-2));
    pointer-events: none;
}
.navlink {
    display: flex; align-items: center; gap: 5px; padding: 8px 8px; white-space: nowrap;
    color: #a9bcd9; font-family: var(--sans); font-size: 12.5px; font-weight: 700;
    letter-spacing: .01em; border-bottom: 2px solid transparent;
}
.navlink:hover { color: var(--surface-2); }
.navlink.active { color: var(--aqua); border-color: var(--aqua); }

/* Menú desplegable "Inventario" (agrupa Inventario + Alerta de Pedido) */
.navgroup { position: relative; }
.navgroup-trigger { background: none; border: none; cursor: pointer; font: inherit; }
.navgroup.active > .navgroup-trigger { color: var(--aqua); border-color: var(--aqua); }
.navgroup-menu {
    /* position: fixed (no absolute): ".navlinks" tiene overflow-x:auto para
       el scroll horizontal del menú (§ más arriba), y por regla de CSS eso
       fuerza overflow-y a auto también — un dropdown "absolute" quedaría
       recortado dentro de esa fila y aparecería con scrollbar propio en vez
       de desplegarse. "fixed" lo saca del todo de ese contexto de recorte;
       top/left se calculan en JS (ver script al final del archivo). */
    display: none; position: fixed; min-width: 240px;
    background: var(--navy-2); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-md);
    flex-direction: column; z-index: 30; overflow: hidden; box-shadow: var(--shadow-hover);
}
.navgroup.open .navgroup-menu { display: flex; }
.navgroup-item {
    padding: 11px 14px; font-family: var(--sans); font-size: 12.5px; font-weight: 700;
    color: #a9bcd9; border-left: 2px solid transparent;
}
.navgroup-item:hover { color: var(--surface-2); background: rgba(255,255,255,.06); }
.navgroup-item.active { color: var(--aqua); border-color: var(--aqua); }

.topbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.user-pill { display: flex; align-items: center; gap: 8px; color: #cbd8ec; font-size: 13px; }
.user-avatar {
    width: 26px; height: 26px; background: var(--blue); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono); font-weight: 500; font-size: 11px; color: var(--white);
}
.topbar .btn-ghost { background: transparent; border: 1px solid rgba(255,255,255,.22); color: #cbd8ec; }
.topbar .btn-ghost:hover { background: rgba(255,255,255,.08); color: var(--surface-2); border-color: rgba(255,255,255,.4); }

/* Page */
.page { flex: 1; max-width: 1400px; width: 100%; margin: 0 auto; padding: 22px 20px 40px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; gap: 10px; }

/* Título de panel con tipología de marca: recuadro degradé navy -> azul ->
   aqua. Usado en "Dashboard" y "Mi Panel" (Técnico) — discreto a propósito,
   no un hero grande, para no competir con el resto de la página. */
.dashboard-title {
    display: inline-block;
    margin: 0;
    padding: 7px 16px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: #fff;
    background: linear-gradient(135deg, var(--navy) 0%, var(--blue-2) 60%, var(--aqua) 130%);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
}

/* Cards */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 18px; }
.card + .card { margin-top: 16px; }

.modal-dialog { border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-hover); padding: 0; width: min(560px, 92vw); background: var(--card); }
.modal-dialog::backdrop { background: rgba(10, 20, 40, .45); }

/* Eyebrow de sección: etiqueta + número */
.section-eyebrow { display: flex; align-items: center; justify-content: space-between; margin: 30px 0 10px; }
.section-eyebrow:first-child { margin-top: 0; }
.section-eyebrow-label { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.section-eyebrow-num { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--blue); }

/* Hero panel: bloque con degradé navy -> azul -> aqua y resplandor radial,
   tono suite.nextdrivesolutions.cl (fondo oscuro con acentos vivos) — se
   reserva para Bodega ("foco del proyecto"), el resto del dashboard usa
   tarjetas claras. */
.hero-panel {
    background: var(--navy-2); color: var(--surface-2); border-radius: var(--radius-xl);
    padding: 30px 34px; display: grid; grid-template-columns: minmax(220px,1.1fr) 2fr; gap: 30px; align-items: center;
    position: relative; overflow: hidden;
}
.hero-panel::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(circle at 85% 10%, rgba(0,208,192,.45), transparent 32%),
        linear-gradient(145deg, var(--navy), var(--blue-2) 66%, var(--aqua));
    opacity: .5;
}
.hero-panel > * { position: relative; z-index: 1; }
.hero-eyebrow {
    display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 11px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,.14);
    padding: 5px 12px; border-radius: var(--radius-pill); margin-bottom: 14px;
}
.hero-eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--aqua); }
.hero-value { font-family: var(--mono); font-weight: 700; font-size: clamp(30px, 4vw, 50px); line-height: 1.02; letter-spacing: -.01em; color: var(--surface-2); }
.hero-sub { font-family: var(--sans); font-size: 11.5px; font-weight: 600; color: #b9c9e4; margin-top: 12px; }
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-left: 1px solid rgba(255,255,255,.16); }
.hero-stat { padding: 2px 22px; border-right: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-md); transition: background .18s ease; }
.hero-stat:last-child { border-right: none; }
.hero-stat:hover { background: rgba(255,255,255,.06); }
.hero-stat-label { font-family: var(--sans); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #b9c9e4; margin-bottom: 8px; }
.hero-stat-value { font-family: var(--mono); font-weight: 700; font-size: clamp(20px, 2.4vw, 30px); line-height: 1; }
.hero-stat.red .hero-stat-value { color: #ff8f7e; }
.hero-stat.green .hero-stat-value { color: var(--aqua); }
.hero-stat.blue .hero-stat-value { color: var(--aqua); }
.hero-stat.yellow .hero-stat-value { color: var(--warning); }
.hero-stat-sub { font-family: var(--sans); font-size: 10.5px; font-weight: 500; color: #94a8c9; margin-top: 6px; }
a.hero-stat { text-decoration: none; display: block; }

/* KPI grid */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 18px; }
a.kpi-card { text-decoration: none; display: block; }
.kpi-card {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px;
    box-shadow: var(--shadow);
    transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.kpi-icon { width: 32px; height: 32px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.kpi-icon.blue { background: var(--blue-tint); color: var(--blue-2); }
.kpi-icon.aqua { background: var(--aqua-tint); color: var(--aqua-deep); }
.kpi-icon.violet { background: var(--violet-tint); color: var(--violet); }
.kpi-icon.green { background: var(--green-tint); color: var(--green-deep); }
.kpi-icon.yellow { background: var(--warning-tint); color: var(--yellow); }
.kpi-icon.red { background: var(--danger-tint); color: var(--danger); }
.kpi-label { font-family: var(--sans); font-size: 10.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.kpi-value { font-size: 25px; font-weight: 700; color: var(--ink); font-family: var(--mono); }
.kpi-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.kpi-card.red { border-top: 3px solid var(--danger); }
.kpi-card.red .kpi-value { color: var(--danger); }
.kpi-card.yellow { border-top: 3px solid var(--warning); }
.kpi-card.yellow .kpi-value { color: var(--warning); }
.kpi-card.green { border-top: 3px solid var(--green-deep); }
.kpi-card.green .kpi-value { color: var(--green-deep); }
.kpi-card.blue { border-top: 3px solid var(--blue); }
.kpi-card.blue .kpi-value { color: var(--blue); }
.kpi-card.violet { border-top: 3px solid var(--violet); }
.kpi-card.violet .kpi-value { color: var(--violet); }
.kpi-card.aqua { border-top: 3px solid var(--aqua-deep); }
.kpi-card.aqua .kpi-value { color: var(--aqua-deep); }

/* Hover: se eleva con sombra más profunda y borde azul, sin invertir a oscuro
   (la nueva identidad es clara/luminosa, no de "chrome" negro). */
a.kpi-card:hover, .kpi-card.matrix-hoverable:hover { box-shadow: var(--shadow-hover); border-color: var(--blue); transform: translateY(-2px); }

/* Buttons */
.btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 11px 18px; border-radius: var(--radius-btn);
    font-family: var(--sans); font-size: 13px; font-weight: 700;
    border: 1px solid transparent; cursor: pointer; white-space: nowrap;
}
.btn-primary { background: linear-gradient(135deg, var(--blue), var(--blue-2)); color: #fff; border-color: transparent; box-shadow: var(--shadow-button); }
.btn-primary:hover { filter: brightness(1.05); box-shadow: 0 9px 22px rgba(0,120,255,.36); }
.btn-outline { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.btn-outline:hover { background: var(--surface-2); border-color: var(--blue); color: var(--blue); }
.btn-ghost { background: transparent; border-color: var(--border-strong); color: var(--text-muted); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-sm { padding: 7px 12px; font-size: 12px; border-radius: var(--radius-sm); }
.btn-block { width: 100%; justify-content: center; }
.btn-danger { background: var(--danger-tint); color: var(--danger); border-color: #f3c3c9; }
.btn-danger:hover { background: #f9d5d9; }

/* Forms */
.field { margin-bottom: 14px; }
.field-label { display: block; font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--text); margin-bottom: 6px; }
.field-hint { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }
.input, select.input, textarea.input {
    width: 100%; padding: 10px 13px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    font-size: 13.5px; font-family: var(--sans); background: var(--surface-2); color: var(--text);
}
.input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-tint); background: var(--surface); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 4px 18px; }

/* Checks de rol (multi-rol): grupo compacto de checkboxes, usado en la
   celda "Rol" de Administración y en el formulario "Crear usuario". */
.role-checks { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.role-check { display: flex; align-items: center; gap: 5px; font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; cursor: pointer; }
.role-check input { width: 14px; height: 14px; accent-color: var(--blue); cursor: pointer; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 16px; }
.filter-bar .field { margin-bottom: 0; min-width: 150px; }

/* Stepper: línea de tiempo horizontal de 3 pasos con el rol responsable de
   cada uno (Solicitado/Validado/Entregado, o Abierta/Cierre reportado/
   Validada). Variante .stepper-compact para caber en una celda de tabla
   (sin label/sub, con tooltip via title). */
.stepper { display: flex; align-items: flex-start; min-width: 200px; }
.stepper-compact { min-width: 90px; }
.stepper-step { display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; }
.stepper-connector {
    position: absolute; top: 13px; right: 50%; width: 100%; height: 2px;
    background: var(--border); z-index: 0;
}
.stepper-compact .stepper-connector { top: 8px; }
.stepper-step:first-child .stepper-connector { display: none; }
.stepper-dot {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono); font-size: 10px; font-weight: 600;
    border: 2px solid var(--border); background: var(--white); color: var(--gray-3);
    position: relative; z-index: 1;
}
.stepper-compact .stepper-dot { width: 16px; height: 16px; }
.stepper-step.done .stepper-dot { background: var(--green-deep); border-color: var(--green-deep); color: var(--white); }
.stepper-step.done .stepper-connector { background: var(--green-deep); }
.stepper-step.active .stepper-dot { background: var(--blue); border-color: var(--blue); color: var(--white); box-shadow: 0 0 0 3px var(--blue-tint); }
.stepper-step.active .stepper-connector { background: var(--green-deep); }
.stepper-step.rejected .stepper-dot { background: var(--danger); border-color: var(--danger); color: var(--white); }
.stepper-step.rejected .stepper-connector { background: var(--danger); }
.stepper-step.pending .stepper-dot { background: var(--white); border-color: var(--border); color: var(--gray-3); }
.stepper-label { font-family: var(--sans); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ink); margin-top: 7px; text-align: center; white-space: nowrap; }
.stepper-step.pending .stepper-label { color: var(--gray-3); }
.stepper-sub { font-size: 10.5px; color: var(--text-muted); margin-top: 2px; text-align: center; line-height: 1.3; max-width: 100px; }

/* Calendario del Planner: grilla mensual, una celda por día con badges de
   las tareas que vencen ese día (color = estado semáforo). */
.calendar-nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.calendar-nav-month { display: flex; align-items: center; gap: 10px; }
.calendar-nav-month h2 { min-width: 170px; text-align: center; font-size: 17px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.calendar-head { font-family: var(--sans); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); text-align: center; padding: 4px 0 8px; }
.calendar-cell { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); min-height: 92px; min-width: 0; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.calendar-badge { min-width: 0; }
.calendar-cell.empty { background: var(--surface-2); border-style: dashed; }
.calendar-cell.today { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-tint); }
.calendar-daynum { font-family: var(--mono); font-size: 11.5px; font-weight: 700; color: var(--text-muted); }
.calendar-cell.today .calendar-daynum { color: var(--blue); }
.calendar-badge { display: block; font-size: 10.5px; font-weight: 700; padding: 3px 7px; border-radius: 7px; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-badge.badge-red { background: var(--danger-tint); color: var(--danger); }
.calendar-badge.badge-yellow { background: var(--warning-tint); color: var(--yellow); }
.calendar-badge.badge-green { background: var(--green-tint); color: var(--green-deep); }
.calendar-badge.badge-blue { background: var(--blue-tint); color: var(--blue-2); }
.calendar-more { font-size: 10px; color: var(--text-muted); font-weight: 600; }
@media (max-width: 640px) {
    .calendar-cell { min-height: 64px; }
    .calendar-badge { font-size: 9.5px; padding: 2px 5px; }
}

/* Checklists (seguridad laboral / seguridad alimentaria) */
.checklist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; margin: 10px 0; }
.checklist-check { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.checklist-check input { width: 16px; height: 16px; flex: none; accent-color: var(--blue); }
.checklist-resultado { list-style: none; margin: 10px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 16px; }
.checklist-resultado li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.checklist-resultado li.checked { color: var(--green-deep); }
.checklist-resultado li.unchecked { color: var(--gray-3); }

/* Tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--white); }
table.data { width: 100%; border-collapse: collapse; font-size: 12.5px; white-space: nowrap; }
table.data th {
    text-align: left; padding: 11px 12px; background: var(--surface-2); color: var(--ink);
    font-family: var(--sans); font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
    border-bottom: 1px solid var(--border); position: sticky; top: 0;
}
table.data th a { color: var(--ink); white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; cursor: pointer; user-select: none; }
table.data th a:hover { color: var(--blue); }
table.data th a.th-sort-active { color: var(--blue); font-weight: 700; }
table.data th a .sort-arrow { font-size: 9px; opacity: .45; }
table.data th a.th-sort-active .sort-arrow { opacity: 1; }
table.data th.num { text-align: right; }
table.data td { padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text); }
table.data tbody tr:hover { background: var(--surface-2); }
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); }
table.data.table-tight th, table.data.table-tight td { padding: 8px 7px; }

/* Badges: pill con tinte suave (sistema semántico navy/azul/aqua/violeta) */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 11px; border-radius: var(--radius-pill); font-family: var(--sans); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.badge-red { background: var(--danger-tint); color: var(--danger); }
.badge-yellow { background: var(--warning-tint); color: var(--yellow); }
.badge-green { background: var(--green-tint); color: var(--green-deep); }
.badge-blue { background: var(--blue-tint); color: var(--blue-2); }
.badge-gray { background: var(--surface-2); color: var(--text-muted); }
.badge-aqua { background: var(--aqua-tint); color: var(--aqua-deep); }

/* Ranking (barras horizontales, ej. Valor por Clasificación) */
.rank-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.rank-row { display: grid; grid-template-columns: 22px minmax(110px,170px) 1fr; gap: 14px; align-items: center; }
.rank-badge {
    width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-family: var(--mono); font-size: 10px; font-weight: 700; background: var(--surface-2); color: var(--muted);
}
.rank-row.top .rank-badge { background: linear-gradient(135deg, var(--blue), var(--aqua)); color: #fff; }
.rank-row.top .rank-fill { background: linear-gradient(135deg, var(--blue), var(--aqua)); }
.rank-label { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .01em; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-track { background: var(--surface-2); border: 1px solid var(--border); height: 34px; position: relative; border-radius: var(--radius-sm); }
.rank-fill {
    height: 100%; background: linear-gradient(135deg, var(--blue), var(--blue-2)); min-width: 2px; max-width: 100%;
    display: flex; align-items: center; justify-content: flex-end; padding-right: 10px; overflow: visible;
    border-radius: var(--radius-sm); transition: width .4s ease, filter .15s ease, box-shadow .15s ease;
}
.rank-fill:hover { filter: brightness(1.1) saturate(1.1); box-shadow: inset 0 0 0 2px var(--aqua); }
.rank-fill-inner { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.rank-fill-inner.outside { transform: translateX(calc(100% + 10px)); }
.rank-fill-label { font-family: var(--mono); font-weight: 700; font-size: 14px; color: var(--white); }
.rank-fill-inner.outside .rank-fill-label { color: var(--ink); }
.rank-pct { font-family: var(--mono); font-size: 10.5px; color: rgba(255,255,255,.8); font-weight: 400; }
.rank-fill-inner.outside .rank-pct { color: var(--text-muted); }

/* Tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; flex-wrap: wrap; }
.tab { padding: 10px 14px; font-family: var(--sans); font-size: 12.5px; font-weight: 700; color: var(--text-muted); border-bottom: 2px solid transparent; }
.tab.active { color: var(--blue); border-color: var(--blue); }
.tab:hover { color: var(--ink); }

/* Matrix (ABC x XYZ) */
.matrix { display: grid; grid-template-columns: 90px repeat(4, 1fr); gap: 6px; min-width: 620px; }
.matrix .mh { font-family: var(--sans); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ink); font-size: 11px; padding: 10px; display: flex; align-items: center; }
.matrix .mcell { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px; text-align: center; transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease; }
.matrix a.mcell { display: block; text-decoration: none; cursor: pointer; }
.matrix .mcell b { display: block; font-size: 18px; color: var(--ink); font-family: var(--mono); font-weight: 700; }
.matrix .mcell span { font-family: var(--sans); font-weight: 600; font-size: 10.5px; color: var(--text-muted); }
.matrix .mcell small { display: block; font-size: 10.5px; color: var(--text-muted); margin-top: 6px; line-height: 1.3; }
.matrix .mcell:hover { box-shadow: var(--shadow-hover); border-color: var(--blue); transform: translateY(-2px); }

/* Bar chart (estado semáforo) */
.bar-chart { display: flex; height: 56px; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; margin: 16px 0; background: var(--surface-2); }
.bar-seg {
    height: 100%; border-right: 2px solid var(--white); transition: width .4s ease, filter .15s ease, box-shadow .15s ease;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.bar-seg:last-child { border-right: none; }
.bar-seg:hover { filter: brightness(1.15) saturate(1.1); box-shadow: inset 0 0 0 2px var(--aqua); }
.bar-seg-label { font-family: var(--sans); font-weight: 700; color: var(--white); text-align: center; line-height: 1.15; white-space: nowrap; }
.bar-seg-label b { display: block; font-size: 17px; font-family: var(--mono); }
.bar-seg-label span { display: block; font-family: var(--sans); font-weight: 600; font-size: 9.5px; letter-spacing: .04em; opacity: .9; }

/* Panel dividido: dona/gauge a la izquierda + leyenda de métricas a la
   derecha (patrón "chart + KPI list" típico de un dashboard BI). */
.panel-split { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.panel-split-chart { flex-shrink: 0; }
.panel-split-legend { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 4px; }
.panel-split-item {
    display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-radius: var(--radius-sm);
    text-decoration: none; color: var(--ink); transition: background .15s ease;
}
a.panel-split-item:hover { background: var(--surface-2); }
.panel-split-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.panel-split-text { flex: 1; min-width: 0; }
.panel-split-label { font-family: var(--sans); font-size: 11.5px; font-weight: 700; color: var(--ink); }
.panel-split-sub { font-family: var(--sans); font-size: 10.5px; color: var(--text-muted); }
.panel-split-value { font-family: var(--mono); font-size: 18px; font-weight: 700; color: var(--ink); flex-shrink: 0; }

/* Dona SVG multi-segmento (ver core/helpers.php::donut_svg()), con texto
   centrado superpuesto (total + etiqueta). */
.donut-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.donut-center b { font-family: var(--mono); font-size: 20px; font-weight: 700; color: var(--ink); line-height: 1; }
.donut-center span { font-family: var(--sans); font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-top: 2px; }

/* Legend: fila simple swatch+label por defecto; cuando trae un .legend-value
   se convierte en mini stat-card (más peso visual, ej. semáforo/estado). */
.legend { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.legend-item { display: flex; align-items: center; gap: 7px; color: var(--ink); }
a.legend-item { padding: 4px 2px; text-decoration: none; transition: color .15s ease; }
a.legend-item:hover { color: var(--blue); }
a.legend-item:hover .legend-label { text-decoration: underline; color: var(--blue); }
a.legend-item:hover .legend-swatch { box-shadow: 0 0 0 3px var(--aqua-tint); }
.legend-swatch { width: 11px; height: 11px; display: inline-block; border-radius: 3px; flex-shrink: 0; transition: box-shadow .15s ease; }
.legend-label { font-family: var(--sans); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ink); transition: color .15s ease; }
.legend-top { display: flex; align-items: center; gap: 7px; }

.legend-item:has(.legend-value) {
    flex-direction: column; align-items: flex-start; gap: 6px;
    padding: 10px 16px; border: 1px solid var(--border); border-radius: var(--radius-md); min-width: 108px;
    background: var(--card); box-shadow: var(--shadow); transition: border-color .15s ease, box-shadow .15s ease;
}
a.legend-item:has(.legend-value):hover { border-color: var(--blue); box-shadow: var(--shadow-hover); text-decoration: none; }
.legend-item:has(.legend-value) .legend-label { color: var(--text-muted); font-weight: 700; }
a.legend-item:has(.legend-value):hover .legend-label { text-decoration: none; color: var(--blue-2); }
.legend-value { font-family: var(--mono); font-weight: 700; font-size: 20px; line-height: 1; color: var(--ink); }
.legend-value .legend-pct { font-family: var(--mono); font-weight: 400; font-size: 11px; color: var(--text-muted); margin-left: 4px; }

/* Heatmap (estado por Terminal) */
.heatmap-wrap { overflow-x: auto; margin-top: 14px; }
.heatmap { display: grid; gap: 5px; align-items: stretch; min-width: 520px; }
.heatmap .hh { font-family: var(--sans); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ink); font-size: 10.5px; padding: 6px 4px; display: flex; align-items: center; gap: 6px; }
.heatmap .hrow-label { display: flex; align-items: center; font-size: 12.5px; font-weight: 700; color: var(--ink); padding: 4px 8px 4px 0; }
.heatmap .hcell { border-radius: var(--radius-sm); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; min-height: 54px; font-family: var(--mono); font-size: 18px; font-weight: 700; transition: filter .15s ease, box-shadow .15s ease, transform .15s ease; cursor: default; }
.heatmap a.hcell { text-decoration: none; cursor: pointer; }
.heatmap .hcell:hover { filter: brightness(1.1) saturate(1.2); box-shadow: inset 0 0 0 2px var(--blue); transform: scale(1.05); position: relative; z-index: 2; }
.heatmap .hrow-label { font-size: 13.5px; }
.heatmap .hcell-total { background: var(--surface-2); font-weight: 700; color: var(--ink); }
.heatmap .hcell-total:hover { background: var(--navy-2); color: var(--aqua); filter: none; box-shadow: none; transform: none; }

/* Heatmap por Autoriza (Solicitudes SIEF): fila resaltable + celda con % embebido */
.heatmap-autoriza .hrow-label { border-radius: var(--radius-sm); transition: background .12s ease, color .12s ease; }
.heatmap-autoriza .hrow:hover .hrow-label { background: var(--blue-tint); color: var(--blue-2); padding-left: 8px; }
.heatmap-autoriza .hrow:hover .hcell:not(a) { background: var(--surface-2); }
.heatmap-autoriza .hcell { flex-direction: column; gap: 1px; min-height: 50px; }
.heatmap-autoriza .hcell b { font-size: 17px; line-height: 1; }
.heatmap-autoriza .hcell small { font-family: var(--mono); font-weight: 500; font-size: 9.5px; opacity: .8; line-height: 1; }
.heatmap-autoriza .hrow:nth-of-type(even) .hrow-label { background: rgba(16,33,61,.03); }
.heatmap-autoriza .hrow:hover:nth-of-type(even) .hrow-label { background: var(--blue-tint); }

/* Pagination */
.pagination { display: flex; gap: 6px; margin-top: 14px; align-items: center; justify-content: flex-end; }
.pagination a, .pagination span { padding: 7px 12px; border-radius: var(--radius-sm); font-family: var(--mono); font-size: 11px; border: 1px solid var(--border); color: var(--ink); }
.pagination .current { background: var(--blue); color: var(--white); border-color: var(--blue); }

/* Login */
.login-screen { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--navy-2); min-height: 100vh; position: relative; overflow: hidden; }
.login-screen::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(circle at 85% 10%, rgba(0,208,192,.4), transparent 32%),
        linear-gradient(145deg, var(--navy), var(--blue-2) 66%, var(--aqua));
    opacity: .45;
}
.login-screen > * { position: relative; z-index: 1; }
.login-screen .powered-by { padding: 14px 14px 0; margin-top: 0; }
.login-card { background: var(--surface); border-radius: var(--radius-xl); padding: 34px; width: 360px; max-width: calc(100vw - 32px); box-sizing: border-box; box-shadow: var(--shadow-lg); }
.login-card h1 { font-size: 19px; text-align: center; margin-bottom: 4px; }
.login-card p { text-align: center; font-size: 12.5px; margin-bottom: 20px; }
.login-card p.login-tagline { color: var(--blue); font-weight: 700; font-size: 12px; margin-bottom: 10px; }
.login-badge-icon { display: block; width: 52px; height: auto; margin: 0 auto 14px; }
.login-hero-logo { display: block; width: min(320px, 80vw); height: auto; margin: 0 auto 22px; }
.login-foot { text-align: center; font-size: 11px; color: var(--text-muted); margin-top: 14px; }

/* Alerts / toasts */
.alert { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-radius: var(--radius-md); font-size: 12.5px; font-weight: 600; margin-bottom: 14px; }
.alert-red { background: var(--danger-tint); color: var(--danger); }
.alert-green { background: var(--green-tint); color: var(--green-deep); }
.alert-yellow { background: var(--warning-tint); color: var(--yellow); }

/* Cuadro de alerta clickeable (una sola caja, sin tabla) */
.alert-box {
    display: flex; align-items: center; gap: 14px; text-decoration: none;
    background: var(--warning-tint); border: 1px solid #f3dcae; border-left: 4px solid var(--warning);
    border-radius: var(--radius-md); padding: 14px 18px; margin-top: 16px; transition: background .15s ease, border-color .15s ease;
}
.alert-box:hover { background: #fbe6bc; border-left-color: var(--danger); }
.alert-box-icon { color: var(--warning); flex-shrink: 0; }
.alert-box-body { display: flex; flex-direction: column; gap: 3px; }
.alert-box-title { font-family: var(--sans); font-weight: 800; font-size: 16px; color: var(--ink); }
.alert-box-sub { font-family: var(--sans); font-weight: 600; font-size: 11px; color: var(--text-muted); }
.alert-box.alert-box-red { background: var(--danger-tint); border-color: #f3c3c9; border-left-color: var(--danger); }
.alert-box.alert-box-red:hover { background: #f9d5d9; }
.alert-box.alert-box-red .alert-box-icon { color: var(--danger); }
.toast-wrap { position: fixed; top: 76px; right: 20px; z-index: 50; }
.toast { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-radius: var(--radius-md); box-shadow: var(--shadow-hover); font-size: 13px; font-weight: 700; background: var(--white); border: 1px solid var(--border); }
.toast.success { color: var(--green-deep); border-color: #bdeeda; }
.toast.error { color: var(--danger); border-color: #f3c3c9; }
.toast.warn { color: var(--warning); border-color: #f3dcae; }

.muted { color: var(--text-muted); }
.mt-0 { margin-top: 0; }
.footer-note { text-align: center; padding: 14px 14px 4px; font-family: var(--sans); font-weight: 600; font-size: 10.5px; letter-spacing: .03em; color: var(--text-muted); }

/* Pie "Powered by NextDrive": franja de ancho completo con el mismo navy
   oscuro del topbar (link al sitio del desarrollador). */
.powered-by {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; box-sizing: border-box; padding: 18px 14px; margin-top: 10px;
    background: var(--navy-2); text-decoration: none;
}
.powered-by-label {
    font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--warning); transition: opacity .15s ease;
}
.powered-by-logo { height: 40px; width: auto; display: block; transition: opacity .15s ease; }
.powered-by:hover .powered-by-label,
.powered-by:hover .powered-by-logo { opacity: .8; }
.section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.upload-box { border: 1px dashed var(--gray-3); border-radius: var(--radius-md); padding: 20px; text-align: center; background: var(--surface-2); }
.list-inline { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 4px 11px; font-family: var(--sans); font-size: 10.5px; font-weight: 700; color: var(--ink); }

/* ---------------------------------------------------------------
   Responsive: el menú es siempre una barra horizontal normal (nunca un
   cajón hamburguesa), en cualquier tamaño de pantalla, texto completo,
   igual que un sitio web. Si en algún ancho angosto no entra completo,
   ".navlinks" (arriba) se desplaza horizontalmente en vez de partir texto
   o esconder módulos.
   --------------------------------------------------------------- */
@media (max-width: 680px) {
    .topbar-left { gap: 12px; }
    .brand-text span { display: none; }

    /* El menú principal baja a una barra fija inferior (patrón app mobile):
       el topbar de arriba queda solo con marca + usuario, y ".navlinks" se
       saca del flujo con position:fixed para anclarse al borde inferior. */
    .navlinks {
        position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 25;
        justify-content: space-around; gap: 0;
        background: var(--navy-2); border-top: 1px solid rgba(255,255,255,.1);
        box-shadow: 0 -8px 20px rgba(0,32,88,.18);
        padding: 4px 2px calc(4px + env(safe-area-inset-bottom));
    }
    .navlinks::after { display: none; }
    .navlink, .navgroup-trigger {
        flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: center;
        gap: 2px; padding: 6px 2px; font-size: 9.5px; text-align: center;
        border-bottom: none; border-top: 2px solid transparent;
    }
    .navlink.active, .navgroup.active > .navgroup-trigger { border-top-color: var(--aqua); }
    .navlink-text { white-space: normal; line-height: 1.15; }
    /* La flechita de los desplegables no aporta nada en este formato de tab bar */
    .navgroup-trigger svg[width="12"] { display: none; }

    /* Deja espacio abajo para que la barra fija no tape el contenido */
    .page { padding-bottom: 82px; }
}

/* Tablet: los grids auto-fit/flex-wrap ya reflowan solos; acá solo se
   ajustan los pocos lugares con ancho fijo pensado para escritorio. */
@media (max-width: 900px) {
    .panel-split { justify-content: center; }
    .calendar-nav { justify-content: center; text-align: center; }
    .page-head { align-items: flex-start; }
}

@media (max-width: 640px) {
    .page { padding: 16px 14px 82px; }
    h1 { font-size: 21px; }
    .matrix { grid-template-columns: 60px repeat(4, 1fr); gap: 4px; }
    .matrix .mcell { padding: 8px 6px; }
    .kpi-value { font-size: 21px; }
    .filter-bar { flex-direction: column; align-items: stretch; }
    .filter-bar .field { min-width: 0; }
    .filter-bar .btn { width: 100%; justify-content: center; }
    table.data { font-size: 11.5px; }
    .section-eyebrow { margin: 22px 0 8px; }
    .brand-text { display: none; }

    .hero-panel { grid-template-columns: 1fr; padding: 22px 20px; gap: 20px; }
    .hero-stats { grid-template-columns: 1fr; border-left: none; border-top: 1px solid rgba(255,255,255,.16); }
    .hero-stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,.16); padding: 16px 2px; }
    .hero-stat:last-child { border-bottom: none; }

    .rank-row { grid-template-columns: 22px 1fr; grid-template-areas: "badge label" "track track"; gap: 4px 8px; }
    .rank-row .rank-badge { grid-area: badge; }
    .rank-row .rank-label { grid-area: label; white-space: normal; }
    .rank-row .rank-track { grid-area: track; }

    .panel-split { gap: 16px; }
    .panel-split-chart { width: 100%; display: flex; justify-content: center; }
    .panel-split-legend { min-width: 0; width: 100%; }
    .panel-split-value { font-size: 15px; }

    .donut-center b { font-size: 16px; }

    .bar-chart { height: 46px; }
    .bar-seg-label b { font-size: 13px; }
    .bar-seg-label span { font-size: 8px; }

    .calendar-grid { gap: 3px; }
    .calendar-cell { min-height: 54px; padding: 4px; }
    .calendar-head { font-size: 9px; padding: 2px 0 6px; }
    .calendar-nav-month h2 { min-width: 0; font-size: 14px; }
    .calendar-badge { font-size: 8.5px; padding: 1px 4px; border-radius: 5px; }
    .calendar-more { font-size: 8.5px; }

    .print-grid, .print-grid.cols-2 { grid-template-columns: 1fr; }
    .print-firmas { flex-direction: column; gap: 14px; }
}

/* ============================================================
   Exportar a PDF: botón "Exportar a PDF" -> window.print(). Se
   conserva la identidad visual completa (degradé del hero, colores
   de estado, badges, etc.) forzando la impresión de fondos/colores;
   solo se oculta la navegación y los controles interactivos
   (botones, filtros, paginación).
   ============================================================ */
/* Documento imprimible de una sola hoja (Orden de Trabajo cerrada, Orden de
   Compra): "print-only" oculta esto en pantalla; ".print-sheet" y sus
   piezas (".print-box", ".print-grid", etc.) son un mini sistema de
   maquetación denso — tipo formulario formal — pensado para caber en una
   página A4/Carta al imprimir (ver window.print() + @page más abajo). */
.print-only { display: none; }

.print-sheet { font-size: 10.5px; line-height: 1.35; color: #10141c; }
.print-header { display: flex; align-items: center; gap: 12px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 2px solid #10141c; }
.print-header img { height: 36px; width: auto; }
.print-header b { display: block; font-size: 13px; }
.print-header span { display: block; font-size: 10px; color: #555; }
.print-num { margin-left: auto; text-align: right; font-size: 12px; font-weight: 800; line-height: 1.3; white-space: nowrap; }

.print-box { border: 1px solid #10141c; padding: 5px 8px; margin-bottom: 6px; }
.print-box-title { font-size: 8.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; color: #444; }
.print-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px 14px; margin-bottom: 6px; }
.print-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.print-grid .print-box { margin-bottom: 0; }
.print-field b { display: block; font-size: 7.5px; text-transform: uppercase; letter-spacing: .03em; color: #666; font-weight: 700; }

.print-check-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 10px; }
.print-check { font-size: 9.5px; }
.print-check .m { display: inline-block; width: 11px; }

.print-table { width: 100%; border-collapse: collapse; font-size: 9.5px; }
.print-table th, .print-table td { border: 1px solid #999; padding: 2px 5px; text-align: left; }
.print-table th { background: #eee; font-size: 8.5px; text-transform: uppercase; letter-spacing: .02em; }
.print-table td.num, .print-table th.num { text-align: right; }

.print-firmas { display: flex; justify-content: space-between; gap: 30px; margin-top: 16px; }
.print-firmas > div { flex: 1; text-align: center; font-size: 10px; color: #444; }
.print-firma-linea { border-top: 1px solid #10141c; margin-bottom: 4px; height: 26px; }

@media print {
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; }
    body { background: #fff !important; }
    .topbar, .btn, .filter-bar, .pagination, .no-print, .footer-note, .powered-by { display: none !important; }
    .page { max-width: 100%; padding: 0; margin: 0; }
    .table-wrap, .heatmap-wrap { overflow: visible !important; }
    .card, .hero-panel, .kpi-card, .alert-box { break-inside: avoid; page-break-inside: avoid; }
    .section-eyebrow { break-after: avoid; page-break-after: avoid; }
    a[href] { text-decoration: none; color: inherit; }
    .print-only { display: block; }
    .print-box, .print-table, .print-grid { break-inside: avoid; }
}
@page { margin: 10mm; size: auto; }