/*
 * 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;
    --faint: var(--gray-3); /* usado por dash-*/pos-* (Fases 42/45/50) — nunca se había declarado; sin esto, var(--faint) quedaba inválido y el color heredaba del padre en vez de aplicar el gris tenue */

    --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; max-width: 150px; object-fit: contain; 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; scroll-margin-top: 76px; }
.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); }
.section-eyebrow-link { font-family: var(--sans); font-size: 11.5px; font-weight: 800; color: var(--blue-2); text-decoration: none; }
.section-eyebrow-link:hover { color: var(--navy); }
/* Encabezado dentro de una .card, cuando hace falta un link/acción al lado del título (Fase 42). */
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }

/* 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; }
/* Variación vs. mes anterior como badge (en vez de texto suelto) — Fase 36, referencia NextMant-Dashboard-v3. */
.hero-delta {
    display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-weight: 800; font-size: 12px;
    padding: 5px 11px; border-radius: var(--radius-pill); margin-top: 12px; white-space: nowrap;
}
.hero-delta.up { background: rgba(43,225,168,.16); color: #7cf0c9; border: 1px solid rgba(124,240,201,.25); }
.hero-delta.down { background: rgba(228,78,94,.18); color: #ff8f7e; border: 1px solid rgba(255,143,126,.3); }
/* Tendencia de facturación (sparkline SVG) dentro del hero — Fase 37, referencia
   NextMant-Dashboard-v3 (código). */
.hero-chart { grid-column: 1 / -1; margin-top: 20px; }
.hero-axis { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 9.5px; color: #8ba3c7; margin-top: 8px; letter-spacing: .06em; }

/* Grid de 2 tarjetas lado a lado (colapsa a 1 columna en pantallas angostas) */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-bottom: 18px; }

/* 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:disabled { opacity: .5; cursor: not-allowed; filter: none; box-shadow: none; }
.btn-primary { background: linear-gradient(135deg, var(--navy), var(--navy-2)); color: #fff; border-color: transparent; box-shadow: var(--shadow-button); }
.btn-primary:hover { filter: brightness(1.15); box-shadow: 0 9px 22px rgba(0,32,88,.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; }

/* Buscador con lupa (mismo estilo que .pos-search del Punto de venta) — para
   usar dentro de un .field de un .filter-bar; el filtrado en vivo lo activa
   buscador-tabla.js vía data-filtro-tabla en el <input>, sin JS por vista. */
.search-input { position: relative; display: flex; align-items: center; }
.search-input svg { position: absolute; left: 13px; color: var(--muted); pointer-events: none; }
.search-input input { width: 100%; padding: 11px 14px 11px 38px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--card); font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--text); outline: none; transition: border-color .12s ease, box-shadow .12s ease; }
.search-input input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,120,255,.16); }

/* 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; }
a.stepper-dot { text-decoration: none; cursor: pointer; }
a.stepper-dot:hover { box-shadow: 0 0 0 3px var(--blue-tint); }
.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; }
/* Envoltorio del stepper compacto: puntos + etiqueta de la etapa vigente al costado, para no depender de pasar el mouse. */
.stepper-inline { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; }
.stepper-caption { font-family: var(--sans); font-size: 11px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.stepper-caption.rejected { color: var(--danger); }

/* 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; }
/* Para una columna de texto largo (ej. "Mensaje sugerido" en Avisos) dentro de una tabla que por defecto es white-space:nowrap — sin esto, una sola celda larga estira toda la tabla más allá del viewport y esconde las columnas siguientes (ej. Acciones) sin scroll horizontal. */
table.data td.td-wrap { white-space: normal; max-width: 280px; }

/* Variante para tablas angostas con muchas columnas de texto largo (ej. Avisos):
   en mobile cada fila pasa a ser una tarjeta apilada en vez de forzar scroll
   horizontal — los <td> necesitan un atributo data-label="..." con el título
   de su columna. */
@media (max-width: 680px) {
    table.data.table-cards thead { display: none; }
    table.data.table-cards, table.data.table-cards tbody, table.data.table-cards tr, table.data.table-cards td { display: block; width: 100%; }
    table.data.table-cards { white-space: normal; }
    table.data.table-cards tr { border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 10px; padding: 4px 12px; }
    table.data.table-cards tr:last-child { margin-bottom: 0; }
    table.data.table-cards td { border-bottom: 1px dashed var(--border); padding: 8px 0; }
    table.data.table-cards td:last-child { border-bottom: none; }
    table.data.table-cards td[data-label]::before {
        content: attr(data-label); display: block; font-family: var(--sans); font-size: 10px;
        font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 3px;
    }
}

/* 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); }
/* Variante con columna de valor aparte (barra queda solo visual, sin texto adentro) — Fase 36,
   referencia NextMant-Dashboard-v3. Se activa con .has-value, sin tocar .rank-row por defecto
   (usado en otras ~20 vistas). */
.rank-row.has-value { grid-template-columns: 22px minmax(110px,170px) 1fr 58px; }
.rank-row.has-value .rank-fill { padding-right: 0; }
.rank-value { font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: var(--ink); text-align: right; white-space: nowrap; }

/* Meter: una razón contra un límite (ej. capacidad instalada utilizada) */
.meter-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 14px; }
.meter-value { font-family: var(--mono); font-weight: 700; font-size: 26px; color: var(--ink); margin-top: 4px; }
.meter-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: 11.5px; color: var(--text-muted); flex-wrap: wrap; }
.meter-foot b { font-family: var(--mono); font-weight: 700; color: var(--ink); }
/* Badge de tendencia (ej. "bajo la meta" / "sobre la meta") — reutilizable, Fase 38. */
.trend { display: inline-flex; align-items: center; gap: 4px; font-family: var(--sans); font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: var(--radius-pill); white-space: nowrap; }
.trend.up { background: var(--green-tint); color: var(--green-deep); }
.trend.down { background: var(--danger-tint); color: var(--danger); }
.trend.flat { background: var(--surface-2); color: var(--text-muted); }
.meter-track { height: 22px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; overflow: hidden; position: relative; }
/* Redondeo solo a la izquierda (no en los 4 lados): a % bajo, un fill angosto con
   border-radius igual a su alto en ambos lados se ve como un puntito flotante, no como una
   barra — el borde derecho queda cuadrado y lo redondea el overflow:hidden + border-radius
   del track cuando llega al final. min-width asegura que se vea algo incluso cerca de 0%. */
.meter-fill { height: 100%; min-width: 4px; border-radius: 11px 0 0 11px; background: linear-gradient(90deg, var(--blue), var(--aqua-deep)); transition: width .4s ease; }
.meter-target { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); }
.meter-target-label { position: absolute; top: -20px; font-family: var(--mono); font-size: 9.5px; color: var(--text-muted); transform: translateX(-50%); white-space: nowrap; }

/* Barras agrupadas: dos series por período (ej. horas programadas vs. reales) */
.grouped-chart { display: flex; align-items: flex-end; gap: 18px; height: 130px; margin-top: 14px; padding: 0 4px; border-bottom: 1px solid var(--border); }
.grouped-month { display: flex; flex-direction: column; align-items: center; flex: 1; height: 100%; justify-content: flex-end; }
.grouped-bars { display: flex; align-items: flex-end; gap: 4px; height: 100%; }
.gbar { width: 14px; border-radius: 4px 4px 0 0; min-height: 2px; }
.gbar.plan { background: var(--violet); }
.gbar.real { background: var(--blue); }
.grouped-month-label { font-family: var(--mono); font-size: 9.5px; color: var(--muted); margin-top: 6px; }

/* Highlight: destaca un elemento top de un ranking (ej. mecánico más productivo) */
/* Mismo degradado de marca que .hero-panel (navy->blue->aqua) — la barra del más productivo usa el mismo lenguaje visual que el panel de facturación de arriba. */
.highlight-mechanic {
    display: flex; align-items: center; gap: 14px; padding: 16px 18px;
    background: linear-gradient(135deg, var(--navy), var(--blue-2) 66%, var(--aqua));
    border-radius: var(--radius-md); margin-bottom: 14px; flex-wrap: wrap;
    position: relative; overflow: hidden;
}
.highlight-mechanic::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at 90% 15%, rgba(0,208,192,.45), transparent 40%);
}
.highlight-mechanic > * { position: relative; z-index: 1; }
.highlight-badge { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.highlight-name { font-family: var(--sans); font-weight: 800; font-size: 14.5px; color: #fff; }
.highlight-sub { font-family: var(--sans); font-size: 11.5px; color: rgba(255,255,255,.75); }
.highlight-value { margin-left: auto; text-align: right; }
.highlight-value b { display: block; font-family: var(--mono); font-size: 20px; color: #fff; }
.highlight-value span { font-family: var(--sans); font-size: 10px; color: rgba(255,255,255,.7); text-transform: uppercase; letter-spacing: .05em; }

/* 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; }
/* Separadores entre filas de la leyenda — Fase 36, referencia NextMant-Dashboard-v3. Con
   .divided, sin tocar .panel-split-legend por defecto (usado también en Solicitudes de compra
   y en reportes). */
.panel-split-legend.divided .panel-split-item { border-bottom: 1px solid var(--border); border-radius: 0; }
.panel-split-legend.divided .panel-split-item:last-child { border-bottom: none; }

/* 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); }

/* Escaneo de repuestos en Recepción de Mercadería (código de barra / SKU proveedor). */
.scanner-feedback { min-height: 18px; font-size: 12.5px; font-weight: 700; margin-top: 8px; }
.scanner-feedback.ok { color: var(--green-deep); }
.scanner-feedback.error { color: var(--danger); }
.scanner-feedback.info { color: var(--text-muted); }
table.data tr.scanner-match { background: var(--blue-tint) !important; transition: background .2s ease; }
.scanner-camera-label {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
}
.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); }
.alert-box.alert-box-green { background: var(--green-tint, #e6f6ee); border-color: #b9e3cc; border-left-color: var(--green-deep); }
.alert-box.alert-box-green:hover { background: #d9f0e4; }
.alert-box.alert-box-green .alert-box-icon { color: var(--green-deep); }
.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); }

.ot-timeline { position: relative; padding-left: 34px; }
.ot-timeline-item { position: relative; padding-bottom: 20px; }
.ot-timeline-item:last-child { padding-bottom: 0; }
.ot-timeline-item::before { content: ''; position: absolute; left: -22px; top: 26px; bottom: -2px; width: 2px; background: var(--border-strong); }
.ot-timeline-item:last-child::before { display: none; }
.ot-timeline-dot { position: absolute; left: -34px; top: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--blue); display: flex; align-items: center; justify-content: center; }
.ot-timeline-fecha { font-family: var(--mono); font-size: 11px; color: var(--text-muted); }
.ot-timeline-titulo { font-weight: 700; color: var(--ink); margin-top: 2px; }
.ot-timeline-detalle { font-size: 12.5px; margin-top: 2px; }

/* 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; }
    .rank-row.has-value { grid-template-columns: 22px 1fr 46px; grid-template-areas: "badge label label" "track track value"; }
    .rank-row.has-value .rank-value { grid-area: value; }

    .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; }

    .grouped-chart { gap: 8px; height: 100px; }
    .gbar { width: 9px; }
    .highlight-mechanic { flex-direction: column; align-items: flex-start; }
    .highlight-value { margin-left: 0; text-align: left; }

    .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; max-width: 160px; object-fit: contain; }
.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, .ot-timeline-item { 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; }

/* ============================================================
   Bloque financiero del Dashboard (Utilidad neta + punto de equilibrio +
   utilización de horas) — Fase 41, ver views/partials/bloque-financiero.php
   y App\Services\FinanzasService. Reusa los tokens ya definidos arriba.
   ============================================================ */
.fin {
    display: grid; grid-template-columns: minmax(190px,auto) 1fr; gap: 26px; align-items: center;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-hover); padding: 18px 20px; margin-top: 14px;
    border-left: 4px solid var(--green-deep);
}
.fin.is-loss { border-left-color: var(--danger); }
.fin-net { display: flex; flex-direction: column; gap: 5px; padding-right: 26px; border-right: 1px solid var(--border); }
.fin-net-label { display: flex; align-items: center; gap: 7px; font-family: var(--sans); font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.fin-net b { font-family: var(--mono); font-size: 27px; letter-spacing: -.03em; line-height: 1; color: var(--green-deep); }
.fin.is-loss .fin-net b { color: var(--danger); }
.fin-net i { font-style: normal; font-family: var(--sans); font-size: 11px; color: var(--muted); }

.fin-be { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.fin-be-top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; font-family: var(--sans); font-size: 11.5px; color: var(--muted); }
.fin-be-top b { font-family: var(--mono); font-weight: 700; color: var(--ink); }
.fin-be-track { position: relative; height: 18px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--border); }
.fin-be-fill { position: absolute; top: 2px; bottom: 2px; left: 2px; min-width: 16px; max-width: calc(100% - 4px); border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--blue-2), var(--aqua)); }
.fin.is-loss .fin-be-fill { background: linear-gradient(90deg, #f08196, var(--danger)); }
.fin-be-end { position: absolute; top: -5px; bottom: -5px; right: -1px; width: 2px; background: var(--ink); border-radius: 2px; }
.fin-be-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-family: var(--sans); font-size: 11px; color: var(--muted); }
.fin-be-foot b { font-family: var(--mono); font-weight: 700; color: var(--ink); }

/* Insignia de procedencia del dato (dato real / estimado / confirmado) */
.src { display: inline-flex; align-items: center; gap: 4px; font-family: var(--sans); font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; white-space: nowrap; vertical-align: middle; }
.src::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.src.is-real { background: var(--aqua-tint); color: var(--aqua-deep); }
.src.is-est { background: var(--warning-tint); color: #7d4c07; }

/* Alerta de utilización de horas baja */
.fin-warn {
    display: flex; align-items: center; gap: 11px; margin-top: 12px; padding: 12px 15px;
    border-radius: var(--radius-lg); background: var(--warning-tint); border: 1px solid #f0d9a8;
    border-left: 4px solid var(--warning);
}
.fin-warn-ring { position: relative; width: 42px; height: 42px; flex-shrink: 0; }
.fin-warn-pct { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--mono); font-size: 11px; color: #6d4a09; }
.fin-warn-text { font-family: var(--sans); font-size: 11.5px; color: #6d4a09; line-height: 1.5; min-width: 0; }
.fin-warn-text b { font-weight: 800; }

/* Detalle colapsable "Ver cómo se calcula" */
.fin-more { margin-top: 12px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-hover); padding: 16px 20px; }
.fin-toggle { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 11px; font-weight: 800; color: var(--blue-2); cursor: pointer; list-style: none; margin: 0; }
.fin-toggle::-webkit-details-marker { display: none; }
.fin-toggle::after { content: ''; width: 5px; height: 5px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
details[open] .fin-toggle::after { transform: translateY(1px) rotate(-135deg); }

.fin-detail { display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap: 0 30px; margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--border); }
.fin-col-title { display: block; font-family: var(--sans); font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.fin-col-note { display: block; font-family: var(--sans); font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.fin-line { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--border); font-family: var(--sans); font-size: 12px; }
.fin-line:last-child { border-bottom: 0; }
.fin-line em { font-style: normal; color: var(--text); }
.fin-line em small { display: block; font-family: var(--sans); font-size: 11px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.fin-line b { font-family: var(--mono); font-weight: 700; color: var(--ink); white-space: nowrap; text-align: right; }
.fin-line b.is-neg { color: var(--danger); }
.fin-line.is-sum { border-bottom: 0; border-top: 1.5px solid var(--border-strong); margin-top: 2px; }
.fin-line.is-sum em { font-weight: 800; color: var(--ink); }
.fin-line.is-sum b { font-size: 14px; }
.fin-foot-note { font-family: var(--sans); font-size: 11px; color: var(--muted); margin-top: 14px; line-height: 1.55; }

@media (max-width: 640px) {
    .fin { grid-template-columns: 1fr; gap: 18px; }
    .fin-net { padding-right: 0; padding-bottom: 16px; border-right: 0; border-bottom: 1px solid var(--border); }
    .fin-warn { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ============================================================
   Fase 42: Rediseño completo del Dashboard (layout NextMant-Dashboard-v4).
   Prefijo "dash-" en los componentes SIN equivalente previo, para no
   chocar con .rank-row/.panel-split/.card-title/etc. que ya usan otras
   ~20 vistas — todo lo que ya tenía un equivalente real (.card,
   .hero-panel, .rank-list, .panel-split, .kpi-grid, .badge, .bar-chart,
   .alert-box, .fin...) se reutiliza tal cual, sin duplicar.
   ============================================================ */

/* A. Atención requerida */
.dash-todo-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.dash-todo {
    display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: var(--radius-lg);
    background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow);
    border-left: 4px solid var(--blue); position: relative; transition: transform .15s ease, box-shadow .15s ease;
    text-decoration: none; color: inherit;
}
.dash-todo:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); color: inherit; }
.dash-todo.is-red { border-left-color: var(--danger); }
.dash-todo.is-amber { border-left-color: var(--warning); }
.dash-todo.is-blue { border-left-color: var(--blue); }
.dash-todo-count { font-family: var(--mono); font-size: 28px; line-height: 1; letter-spacing: -.03em; color: var(--ink); }
.dash-todo-title { font-family: var(--sans); font-size: 13px; font-weight: 800; color: var(--ink); }
.dash-todo-sub { font-family: var(--sans); font-size: 11.5px; color: var(--muted); }
.dash-todo-go { position: absolute; top: 14px; right: 14px; color: var(--faint,var(--border-strong)); }
.dash-todo:hover .dash-todo-go { color: var(--blue-2); }

/* B. Facturación: desglose + mezcla + pie (extiende .hero-panel ya existente) */
.dash-hero-flag {
    display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; font-family: var(--sans); font-size: 12px; font-weight: 800;
    white-space: nowrap; padding: 5px 11px; border-radius: var(--radius-pill);
    background: rgba(244,165,36,.18); border: 1px solid rgba(244,165,36,.34); color: #ffd487;
}
.dash-hero-bd { display: flex; flex-direction: column; gap: 1px; background: rgba(255,255,255,.12); border-radius: var(--radius-md); overflow: hidden; min-width: 260px; }
.dash-hero-bd-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 11px 16px; background: rgba(255,255,255,.05); }
.dash-hero-bd-label { display: flex; align-items: center; gap: 9px; font-family: var(--sans); font-size: 11.5px; font-weight: 700; color: #cfdcf0; }
.dash-hero-bd-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.dash-hero-bd-val { font-family: var(--mono); font-size: 15px; color: #fff; }
.dash-hero-mix { grid-column: 1 / -1; display: flex; height: 8px; border-radius: var(--radius-pill); overflow: hidden; margin-top: 20px; gap: 2px; }
.dash-hero-mix span { display: block; height: 100%; border-radius: var(--radius-pill); }
.dash-hero-foot { grid-column: 1 / -1; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14); font-family: var(--sans); font-size: 11px; color: #9db3d4; }
.dash-hero-foot b { font-family: var(--mono); color: #cfe0f7; }

/* C. Flujo de OT */
.dash-flow { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; }
.dash-stage { position: relative; padding: 16px 14px; border-radius: var(--radius-md); background: var(--surface-2); border: 1px solid var(--border); }
.dash-stage.is-hot { background: linear-gradient(140deg,var(--blue-tint),#fff); border-color: #cfe4ff; }
.dash-stage.is-done { background: var(--green-tint); border-color: #cdeee2; }
.dash-stage.is-empty { opacity: .55; }
.dash-stage-num { font-family: var(--mono); font-size: 26px; line-height: 1; letter-spacing: -.03em; color: var(--ink); }
.dash-stage.is-empty .dash-stage-num { color: var(--faint,var(--border-strong)); }
.dash-stage-label { font-family: var(--sans); font-size: 11.5px; font-weight: 800; color: var(--ink); margin-top: 8px; }
.dash-stage-sub { font-family: var(--sans); font-size: 10.5px; color: var(--muted); margin-top: 3px; line-height: 1.35; }
.dash-stage-arrow { position: absolute; top: 50%; right: -11px; transform: translateY(-50%); color: var(--border-strong); z-index: 2; }
.dash-flow-foot { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); font-family: var(--sans); font-size: 11.5px; color: var(--muted); }
.dash-flow-foot b { font-family: var(--mono); color: var(--ink); }

/* D. Capacidad y productividad */
.dash-grid-2u { display: grid; grid-template-columns: 1.25fr 1fr; gap: 18px; }
.dash-gauge-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.dash-gauge-name { font-family: var(--sans); font-size: 12px; font-weight: 700; color: var(--ink); }
.dash-gauge-num { font-family: var(--mono); font-size: 12.5px; color: var(--text); }
.dash-gauge-track { position: relative; height: 16px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--border); }
.dash-gauge-fill { position: absolute; top: 2px; bottom: 2px; left: 2px; min-width: 18px; max-width: calc(100% - 4px); border-radius: var(--radius-pill); }
.dash-gauge-fill.is-plan { background: linear-gradient(90deg,#b7c6dd,#93a8c6); }
.dash-gauge-fill.is-real { background: linear-gradient(90deg,var(--blue-2),var(--aqua)); }
.dash-gauge + .dash-gauge { margin-top: 20px; }
.dash-gauge-hint { font-family: var(--sans); font-size: 11px; color: var(--muted); margin-top: 7px; }
.dash-callout { display: flex; gap: 11px; align-items: flex-start; margin-top: 20px; padding: 13px 14px; border-radius: var(--radius-md); background: var(--warning-tint); border: 1px solid #f6e0b6; }
.dash-callout svg { color: #a9690a; flex-shrink: 0; margin-top: 1px; }
.dash-callout-text { font-family: var(--sans); font-size: 11.5px; color: #6d4a09; line-height: 1.5; }
.dash-callout-text b { font-weight: 800; }
/* Nota: Productividad reusa .highlight-mechanic/.rank-list ya existentes (degradado oscuro de
   marca, decisión explícita del usuario en la Fase 23b) — no se agrega un ".dash-champion" con
   el degradado claro del mockup para no perder esa decisión ya confirmada. */

/* F. Bodega: mini-tarjetas + chips */
.dash-mini-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.dash-mini { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 15px 16px; text-decoration: none; color: inherit; display: block; }
.dash-mini-label { font-family: var(--sans); font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.dash-mini-val { font-family: var(--mono); font-size: 24px; letter-spacing: -.02em; margin-top: 9px; line-height: 1; color: var(--ink); }
.dash-mini-val.is-danger { color: var(--danger); }
.dash-mini-sub { font-family: var(--sans); font-size: 11px; color: var(--muted); margin-top: 6px; }
.dash-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.dash-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.dash-chip b { font-family: var(--mono); font-weight: 500; }

@media (max-width: 1080px) {
    .dash-todo-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .dash-mini-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .dash-flow { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .dash-stage-arrow { display: none; }
    .dash-grid-2u { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .dash-todo-grid, .dash-mini-grid, .dash-flow { grid-template-columns: 1fr; }
    .dash-hero-bd { min-width: 0; width: 100%; }
    .dash-champion-val { margin-left: 0; text-align: left; flex: 1 1 100%; }
}

/* ============================================================
   NextMant — Dashboard v4
   Pegado al final de public/assets/css/app.css (Fase 44).
   Cubre todas las clases dash-* y fin-* del dashboard.
   Usa las variables de :root que ya existían.
   ============================================================ */

/* ══════════════════════════════════════════════════════
   01 · Requiere tu atención
   ══════════════════════════════════════════════════════ */
.dash-todo-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;
}
.dash-todo{
  position:relative;display:flex;flex-direction:column;gap:6px;
  padding:16px;border-radius:18px;text-decoration:none;
  background:var(--card);border:1px solid var(--border);
  border-left:4px solid var(--blue);
  box-shadow:0 6px 18px -8px rgba(10,35,80,.18),0 1px 2px rgba(10,35,80,.05);
  transition:transform .15s ease,box-shadow .15s ease;
}
.dash-todo:hover{transform:translateY(-2px);box-shadow:0 16px 34px -18px rgba(10,35,80,.4);}
.dash-todo.is-red{border-left-color:var(--danger);}
.dash-todo.is-amber{border-left-color:var(--warning);}
.dash-todo.is-blue{border-left-color:var(--blue);}
.dash-todo-count{font-family:var(--mono);font-size:30px;line-height:1;letter-spacing:-.03em;color:var(--ink);}
.dash-todo-title{font-size:13px;font-weight:800;color:var(--ink);}
.dash-todo-sub{font-size:11.5px;color:var(--muted);line-height:1.45;}
.dash-todo-go{position:absolute;top:14px;right:14px;color:var(--faint);display:flex;}
.dash-todo:hover .dash-todo-go{color:var(--blue-2);}

/* ══════════════════════════════════════════════════════
   02 · Hero de facturación
   ══════════════════════════════════════════════════════ */
.hero-panel{
  display:grid;grid-template-columns:1fr auto;gap:24px 28px;align-items:start;
}
.hero-main{min-width:0;}
.dash-hero-mix,
.hero-chart,
.dash-hero-foot{grid-column:1 / -1;}

.dash-hero-flag{
  display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  font-size:12px;font-weight:800;white-space:nowrap;
  padding:5px 11px;border-radius:999px;
  background:rgba(244,165,36,.18);border:1px solid rgba(244,165,36,.34);color:#ffd487;
}
.dash-hero-bd{
  display:flex;flex-direction:column;gap:1px;
  background:rgba(255,255,255,.12);border-radius:14px;overflow:hidden;min-width:280px;
}
.dash-hero-bd-row{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:11px 16px;background:rgba(255,255,255,.05);
}
.dash-hero-bd-label{display:flex;align-items:center;gap:9px;font-size:11.5px;font-weight:700;color:#cfdcf0;}
.dash-hero-bd-dot{width:8px;height:8px;border-radius:2px;flex-shrink:0;}
.dash-hero-bd-val{font-family:var(--mono);font-size:15px;color:#fff;white-space:nowrap;}

.dash-hero-mix{display:flex;height:8px;gap:2px;border-radius:999px;overflow:hidden;margin-top:4px;}
.dash-hero-mix span{display:block;height:100%;border-radius:999px;}

.dash-hero-foot{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-size:11px;color:#9db3d4;
}
.dash-hero-foot b{font-family:var(--mono);font-weight:500;color:#cfe0f7;}

/* ══════════════════════════════════════════════════════
   Bloque financiero
   ══════════════════════════════════════════════════════ */
.fin{
  display:grid;grid-template-columns:minmax(190px,auto) 1fr;gap:26px;align-items:center;
  background:var(--card);border:1px solid var(--border);border-radius:18px;
  box-shadow:0 6px 18px -8px rgba(10,35,80,.18),0 1px 2px rgba(10,35,80,.05);
  padding:18px 20px;margin-top:14px;border-left:4px solid var(--green-deep);
}
.fin.is-loss{border-left-color:var(--danger);}
.fin-net{display:flex;flex-direction:column;gap:5px;padding-right:26px;border-right:1px solid var(--border);}
.fin-net-label{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);}
.fin-net b{font-family:var(--mono);font-size:27px;letter-spacing:-.03em;line-height:1;color:var(--green-deep);}
.fin.is-loss .fin-net b{color:var(--danger);}
.fin-net i{font-style:normal;font-size:11px;color:var(--muted);}

.fin-be{display:flex;flex-direction:column;gap:9px;min-width:0;}
.fin-be-top{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:baseline;font-size:11.5px;color:var(--muted);}
.fin-be-top b{font-family:var(--mono);font-weight:500;color:var(--ink);}
.fin-be-track{position:relative;height:18px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);}
.fin-be-fill{position:absolute;top:2px;bottom:2px;left:2px;min-width:16px;max-width:calc(100% - 4px);border-radius:999px;background:linear-gradient(90deg,var(--blue-2),var(--aqua));}
.fin.is-loss .fin-be-fill{background:linear-gradient(90deg,#f08196,var(--danger));}
.fin-be-end{position:absolute;top:-5px;bottom:-5px;right:-1px;width:2px;background:var(--ink);border-radius:2px;}
.fin-be-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--muted);}
.fin-be-foot b{font-family:var(--mono);font-weight:500;color:var(--ink);}

.src{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;border-radius:5px;white-space:nowrap;vertical-align:middle;}
.src::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;}
.src.is-real{background:var(--aqua-tint);color:#00594f;}
.src.is-est{background:var(--warning-tint);color:#7d4c07;}

.fin-warn{
  display:flex;align-items:center;gap:11px;margin-top:12px;padding:12px 15px;
  border-radius:14px;background:var(--warning-tint);border:1px solid #f0d9a8;
  border-left:4px solid var(--warning);
}
.fin-warn-ring{position:relative;width:42px;height:42px;flex-shrink:0;}
.fin-warn-pct{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);font-size:11px;color:#6d4a09;}
.fin-warn-text{font-size:11.5px;color:#6d4a09;line-height:1.5;min-width:0;}
.fin-warn-text b{font-weight:800;}

.fin-more{
  margin-top:12px;background:var(--card);border:1px solid var(--border);border-radius:18px;
  box-shadow:0 6px 18px -8px rgba(10,35,80,.18),0 1px 2px rgba(10,35,80,.05);padding:16px 20px;
}
.fin-toggle{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;color:var(--blue-2);cursor:pointer;list-style:none;margin:0;}
.fin-toggle::-webkit-details-marker{display:none;}
.fin-toggle::after{content:'';width:5px;height:5px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);}
details[open] .fin-toggle::after{transform:translateY(1px) rotate(-135deg);}

.fin-detail{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:0 30px;margin-top:14px;padding-top:16px;border-top:1px solid var(--border);}
.fin-col-title{display:block;font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:4px;}
.fin-col-note{display:block;font-size:11px;color:var(--muted);margin-bottom:8px;line-height:1.45;}
.fin-line{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--border);font-size:12px;}
.fin-line:last-child{border-bottom:0;}
.fin-line em{font-style:normal;color:var(--text);}
.fin-line em small{display:block;font-size:11px;color:var(--muted);margin-top:3px;line-height:1.4;}
.fin-line b{font-family:var(--mono);font-weight:500;color:var(--ink);white-space:nowrap;text-align:right;}
.fin-line b.is-neg{color:var(--danger);}
.fin-line.is-sum{border-bottom:0;border-top:1.5px solid var(--border-strong);margin-top:2px;}
.fin-line.is-sum em{font-weight:800;color:var(--ink);}
.fin-line.is-sum b{font-size:14px;}
.fin-foot-note{font-size:11px;color:var(--muted);margin-top:14px;line-height:1.55;}

/* ══════════════════════════════════════════════════════
   03 · Flujo de OT
   ══════════════════════════════════════════════════════ */
.dash-flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;}
.dash-stage{
  position:relative;display:block;padding:16px 14px;border-radius:14px;text-decoration:none;
  background:var(--surface-2);border:1px solid var(--border);
  transition:transform .15s ease,box-shadow .15s ease;
}
.dash-stage:hover{transform:translateY(-2px);box-shadow:0 12px 26px -16px rgba(10,35,80,.4);}
.dash-stage.is-hot{background:linear-gradient(140deg,var(--blue-tint),#fff);border-color:#cfe4ff;}
.dash-stage.is-done{background:var(--green-tint);border-color:#cdeee2;}
.dash-stage.is-empty{opacity:.55;}
.dash-stage.is-empty:hover{transform:none;box-shadow:none;}
.dash-stage-num{font-family:var(--mono);font-size:26px;line-height:1;letter-spacing:-.03em;color:var(--ink);}
.dash-stage.is-empty .dash-stage-num{color:var(--faint);}
.dash-stage-label{font-size:11.5px;font-weight:800;color:var(--ink);margin-top:8px;}
.dash-stage-sub{font-size:10.5px;color:var(--muted);margin-top:3px;line-height:1.35;}
.dash-stage-arrow{position:absolute;top:50%;right:-11px;transform:translateY(-50%);color:var(--border-strong);z-index:2;display:flex;}

.dash-flow-foot{
  display:flex;flex-wrap:wrap;gap:20px;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--border);font-size:11.5px;color:var(--muted);
}
.dash-flow-foot b{font-family:var(--mono);font-weight:500;color:var(--ink);}

/* ══════════════════════════════════════════════════════
   04 · Capacidad (medidores) + callout
   ══════════════════════════════════════════════════════ */
.dash-grid-2u{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;align-items:start;}

.dash-gauge{margin-top:4px;}
.dash-gauge + .dash-gauge{margin-top:20px;}
.dash-gauge-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:7px;flex-wrap:wrap;}
.dash-gauge-name{font-size:12px;font-weight:700;color:var(--ink);}
.dash-gauge-num{font-family:var(--mono);font-size:12.5px;color:var(--text);}
.dash-gauge-track{position:relative;height:16px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);}
.dash-gauge-fill{position:absolute;top:2px;bottom:2px;left:2px;min-width:18px;max-width:calc(100% - 4px);border-radius:999px;}
.dash-gauge-fill.is-plan{background:linear-gradient(90deg,#b7c6dd,#93a8c6);}
.dash-gauge-fill.is-real{background:linear-gradient(90deg,var(--blue-2),var(--aqua));box-shadow:0 4px 12px -6px rgba(0,120,255,.9);}
.dash-gauge-hint{font-size:11px;color:var(--muted);margin-top:7px;}

.dash-callout{
  display:flex;gap:11px;align-items:flex-start;margin-top:20px;padding:13px 14px;
  border-radius:14px;background:var(--warning-tint);border:1px solid #f6e0b6;
}
.dash-callout svg{color:#7d4c07;flex-shrink:0;margin-top:1px;}
.dash-callout-text{font-size:11.5px;color:#6d4a09;line-height:1.5;}
.dash-callout-text b{font-weight:800;}

/* ══════════════════════════════════════════════════════
   06 · Bodega (mini tarjetas)
   ══════════════════════════════════════════════════════ */
.dash-mini-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
.dash-mini{
  display:block;text-decoration:none;padding:15px 16px;border-radius:18px;
  background:var(--card);border:1px solid var(--border);
  box-shadow:0 6px 18px -8px rgba(10,35,80,.18),0 1px 2px rgba(10,35,80,.05);
  transition:transform .15s ease,box-shadow .15s ease;
}
a.dash-mini:hover{transform:translateY(-2px);box-shadow:0 16px 34px -18px rgba(10,35,80,.4);}
.dash-mini-label{font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);}
.dash-mini-val{font-family:var(--mono);font-size:24px;letter-spacing:-.02em;margin-top:9px;line-height:1;color:var(--ink);}
.dash-mini-val.is-danger{color:var(--danger);}
.dash-mini-sub{font-size:11px;color:var(--muted);margin-top:6px;line-height:1.45;}
.dash-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.dash-chip{
  display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;
  padding:4px 10px;border-radius:999px;background:var(--surface-2);color:var(--text);
  border:1px solid var(--border);
}
.dash-chip b{font-family:var(--mono);font-weight:500;}

/* ══════════════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════════════ */
@media (max-width:1080px){
  .dash-grid-2u{grid-template-columns:1fr;}
  .dash-todo-grid,.dash-mini-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .dash-flow{grid-template-columns:repeat(2,minmax(0,1fr));}
  .dash-stage-arrow{display:none;}
}
@media (max-width:820px){
  .hero-panel{grid-template-columns:1fr;}
  .dash-hero-bd{min-width:0;width:100%;}
}
@media (max-width:640px){
  .dash-todo-grid,.dash-mini-grid,.dash-flow{grid-template-columns:1fr;}
  .fin{grid-template-columns:1fr;gap:18px;}
  .fin-net{padding-right:0;padding-bottom:16px;border-right:0;border-bottom:1px solid var(--border);}
  .fin-warn{flex-direction:column;align-items:flex-start;gap:10px;}
  .dash-hero-foot,.dash-flow-foot{flex-direction:column;gap:6px;}
}

/* ══════════════════════════════════════════════════════
   Punto de venta (Venta de mostrador) — rediseño hifi (Fase 50,
   ver design_handoff_punto_de_venta). Colores/tamaños tomados literal del
   handoff (suite-design-tokens.html) — algunos son variantes más oscuras
   de los tokens de marca para pasar contraste 4.5:1 en texto chico sobre
   fondos tintados, así que se hardcodean en vez de reusar var() cuando
   difieren (ej. verde/ámbar de esta sección vs. --green-deep/--warning
   usados en el resto del panel).
   ══════════════════════════════════════════════════════ */
.pos-page { font-variant-numeric: tabular-nums; display: flex; flex-direction: column; gap: 22px; }

.pos-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.pos-eyebrow { display: flex; align-items: center; gap: 11px; margin-bottom: 6px; }
.pos-chip { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--blue-2); background: #eaf3ff; border-radius: 6px; padding: 3px 7px; }
.pos-eyebrow-label { font-family: var(--sans); font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); }
.pos-h1 { margin: 0; font-family: var(--sans); font-size: clamp(30px,3vw,36px); font-weight: 800; letter-spacing: -.035em; line-height: 1.04; color: var(--ink); }
.pos-lead { margin: 2px 0 0; max-width: 54ch; font-family: var(--sans); font-size: 13.5px; font-weight: 500; line-height: 1.6; color: var(--text-muted); }
.pos-btn-secondary { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border: 1px solid #d5e6ff; border-radius: 10px; background: #eaf3ff; font-family: var(--sans); font-size: 13px; font-weight: 800; text-decoration: none; color: var(--blue-2); white-space: nowrap; transition: background .12s ease, color .12s ease; }
.pos-btn-secondary:hover { background: #dceaff; color: var(--navy); }

.pos-body { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; }
.pos-catalog-col { flex: 1 1 460px; min-width: 300px; display: flex; flex-direction: column; gap: 14px; }
.pos-ticket-col { flex: 0 1 400px; min-width: 300px; position: sticky; top: 18px; }

.pos-search { position: relative; display: flex; align-items: center; }
.pos-search svg { position: absolute; left: 15px; color: var(--muted); pointer-events: none; }
.pos-search input { width: 100%; padding: 13px 16px 13px 43px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--card); font-family: var(--sans); font-size: 14px; font-weight: 600; outline: none; box-shadow: 0 1px 2px rgba(10,35,80,.05); }
.pos-search input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,120,255,.16); }

.pos-section-eyebrow { display: flex; align-items: center; gap: 12px; }
.pos-section-label { font-family: var(--sans); font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.pos-section-rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--border-strong), transparent); }
.pos-section-count { font-family: var(--mono); font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }

.pos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; }
.pos-item { display: flex; flex-direction: column; gap: 11px; padding: 15px 16px 13px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card); text-align: left; cursor: pointer; font-family: var(--sans); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; box-shadow: 0 6px 18px -8px rgba(10,35,80,.18), 0 1px 2px rgba(10,35,80,.05); }
.pos-item:hover { border-color: #9fc9ff; transform: translateY(-2px); box-shadow: 0 16px 30px -18px rgba(0,32,88,.4); }
.pos-item:active { transform: translateY(0); }
.pos-item.is-out { opacity: .55; cursor: not-allowed; }
.pos-item.is-out:hover { border-color: var(--border); transform: none; box-shadow: 0 6px 18px -8px rgba(10,35,80,.18), 0 1px 2px rgba(10,35,80,.05); }
.pos-item-top { display: flex; flex-direction: column; gap: 4px; min-height: 42px; }
.pos-item-name { font-size: 14.5px; font-weight: 700; line-height: 1.26; letter-spacing: -.017em; color: var(--ink); }
.pos-item-code { font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.pos-item-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid #e3e9f1; }
.pos-item-price { font-family: var(--mono); font-size: 19px; font-weight: 500; letter-spacing: -.045em; color: var(--ink); }
.pos-item-stock { padding: 4px 9px; border-radius: var(--radius-pill); background: #e8faf4; color: #0f7a5e; font-family: var(--mono); font-size: 10.5px; letter-spacing: .02em; white-space: nowrap; }
.pos-item-stock.is-low { background: #fdf2de; color: #8a5407; }
.pos-empty-search { margin: 6px 0; padding: 30px; border: 1px dashed var(--border-strong); border-radius: var(--radius-xl); background: var(--surface-2); text-align: center; font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--muted); }

.pos-ticket { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card); overflow: hidden; box-shadow: 0 22px 48px -24px rgba(0,32,88,.45); }
.pos-ticket-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 18px; background: linear-gradient(180deg, var(--navy), var(--navy-2)); color: #fff; font-family: var(--sans); font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.pos-ticket-count { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: var(--radius-pill); background: rgba(0,208,192,.14); font-family: var(--mono); font-size: 10.5px; letter-spacing: .03em; color: #a8f0e9; text-transform: none; }
.pos-ticket-lines { display: flex; flex-direction: column; max-height: 34vh; overflow-y: auto; }
.pos-ticket-empty { margin: 0; padding: 42px 26px; text-align: center; font-family: var(--sans); font-size: 13px; font-weight: 600; line-height: 1.55; color: var(--muted); }

.pos-line { display: flex; flex-direction: column; gap: 9px; padding: 13px 18px; border-bottom: 1px solid #e3e9f1; }
.pos-line:last-child { border-bottom: 0; }
.pos-line-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pos-line-name { font-family: var(--sans); font-size: 13.5px; font-weight: 700; line-height: 1.3; letter-spacing: -.012em; color: var(--ink); }
.pos-line-remove { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 24px; height: 24px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--muted); cursor: pointer; transition: background .12s ease, border-color .12s ease, color .12s ease; }
.pos-line-remove:hover { border-color: #f7c4ca; background: #fdeaec; color: var(--danger); }
.pos-line-controls { display: flex; align-items: center; gap: 8px; }
.pos-stepper { display: flex; align-items: center; border: 1px solid var(--border-strong); border-radius: 10px; overflow: hidden; flex: 0 0 auto; }
.pos-stepper button { width: 28px; height: 30px; border: 0; background: var(--surface-2); color: var(--ink); cursor: pointer; font-size: 15px; line-height: 1; transition: background .12s ease, color .12s ease; }
.pos-stepper button:hover { background: #eaf3ff; color: var(--blue-2); }
.pos-stepper input { width: 42px; height: 30px; border: 0; border-left: 1px solid #e3e9f1; border-right: 1px solid #e3e9f1; text-align: center; font-family: var(--mono); font-size: 12.5px; outline: none; }
.pos-price-box { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; height: 30px; padding: 0 9px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface-2); }
.pos-price-box span { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.pos-price-box input { width: 100%; min-width: 0; border: 0; background: transparent; font-family: var(--mono); font-size: 12.5px; outline: none; }
.pos-line-amounts { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; min-width: 86px; }
.pos-line-subtotal { font-family: var(--mono); font-size: 14px; font-weight: 500; letter-spacing: -.03em; color: var(--ink); }
.pos-line-neto { font-family: var(--mono); font-size: 11px; letter-spacing: .02em; color: var(--text-muted); }

.pos-ticket-totals { display: flex; flex-direction: column; gap: 7px; padding: 16px 18px; background: var(--surface-2); border-top: 1px solid #e3e9f1; border-bottom: 1px solid #e3e9f1; }
.pos-total-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.pos-total-row b { font-family: var(--mono); font-weight: 400; color: var(--ink); }
.pos-total-row.is-total { padding-top: 9px; border-top: 1px solid var(--border-strong); font-size: 10.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); }
.pos-total-row.is-total b { font-size: 30px; font-weight: 500; letter-spacing: -.05em; line-height: 1; color: var(--navy); text-transform: none; letter-spacing: -.05em; }
.pos-total-note { margin: 3px 0 0; font-family: var(--sans); font-size: 11.5px; font-weight: 500; line-height: 1.55; color: var(--muted); }

.pos-ticket-form { display: flex; flex-direction: column; gap: 15px; padding: 18px; }
.pos-field { display: flex; flex-direction: column; gap: 6px; }
.pos-field-label { font-family: var(--sans); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); }
.pos-field-hint { margin: 0; font-family: var(--sans); font-size: 11.5px; font-weight: 500; line-height: 1.55; color: var(--text-muted); }
.pos-field-hint.is-warn { color: #8a5407; }
.pos-field-hint.is-ok { color: #0f7a5e; }
.pos-field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(146px,1fr)); gap: 12px; }
.pos-input { padding: 11px 13px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface-2); font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--text); outline: none; transition: border-color .12s ease, background .12s ease, box-shadow .12s ease; }
.pos-input:focus { border-color: var(--blue); background: var(--card); box-shadow: 0 0 0 3px rgba(0,120,255,.16); }

.pos-segmented { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; border-radius: var(--radius-md); background: var(--bg); border: 1px solid #e3e9f1; }
.pos-segmented-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pos-segmented-opt { display: block; padding: 9px 10px; border-radius: 9px; font-family: var(--sans); font-size: 13px; font-weight: 800; text-align: center; color: var(--muted); cursor: pointer; transition: background .12s ease, color .12s ease, box-shadow .12s ease; }
.pos-segmented-input:checked + .pos-segmented-opt { background: var(--card); color: var(--navy); box-shadow: 0 1px 3px rgba(10,35,80,.16); }
.pos-segmented-input:focus-visible + .pos-segmented-opt { outline: 2px solid var(--blue); outline-offset: 1px; }

.pos-cobrar { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 14px 18px; border: 0; border-radius: var(--radius-md); font-family: var(--sans); font-size: 14px; font-weight: 800; letter-spacing: .02em; color: #fff; cursor: pointer; background: linear-gradient(135deg, var(--blue), var(--blue-2)); box-shadow: 0 8px 18px -10px rgba(0,120,255,.9); transition: filter .12s ease; }
.pos-cobrar:hover { filter: brightness(1.06); }
.pos-cobrar span:last-child { font-family: var(--mono); font-size: 14.5px; font-weight: 500; letter-spacing: -.03em; }
.pos-cobrar:disabled { background: var(--border); color: var(--faint); box-shadow: none; cursor: not-allowed; filter: none; }

@media (max-width: 780px) {
  .pos-ticket-col { position: static; flex-basis: 100%; }
  .pos-catalog-col { flex-basis: 100%; }
}

/* ══════════════════════════════════════════════════════
   Punto de venta — escaneo de código de barras (Fase 52)
   ══════════════════════════════════════════════════════ */
.pos-search-row { display: flex; align-items: stretch; gap: 9px; }
.pos-search-row .pos-search { flex: 1 1 auto; min-width: 0; }
.pos-scan-btn { display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; border: 1px solid var(--navy); border-radius: var(--radius-md); background: linear-gradient(180deg, var(--navy), var(--navy-2)); color: #fff; font-family: var(--sans); font-size: 13px; font-weight: 800; cursor: pointer; white-space: nowrap; box-shadow: 0 8px 18px -12px rgba(0,32,88,.9); transition: filter .12s ease; }
.pos-scan-btn:hover { filter: brightness(1.15); }

.pos-scan-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 0 2px; }
.pos-scan-chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 8px; border-radius: var(--radius-pill); background: var(--aqua-tint); color: #0f7a5e; font-family: var(--mono); font-size: 10.5px; letter-spacing: .03em; }
.pos-scan-chip span { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pos-scan-hint-text { font-family: var(--sans); font-size: 11.5px; font-weight: 600; color: var(--text-muted); }

.pos-aviso { display: none; align-items: center; gap: 11px; padding: 11px 14px; border-radius: var(--radius-md); animation: pos-pop .18s ease both; }
.pos-aviso.is-visible { display: flex; }
.pos-aviso svg { flex-shrink: 0; }
.pos-aviso-msg { flex: 1; min-width: 0; font-family: var(--sans); font-size: 12.5px; font-weight: 700; }
.pos-aviso-codigo { font-family: var(--mono); font-size: 11px; letter-spacing: .05em; white-space: nowrap; }
.pos-aviso.is-ok { background: var(--aqua-tint); border: 1px solid #b9ead9; color: #0f7a5e; }
.pos-aviso.is-error { background: #fdf2de; border: 1px solid #f0dcb0; color: #8a5407; }
.pos-aviso.is-info { background: var(--blue-tint); border: 1px solid #cfe0ff; color: var(--blue-2); }

.pos-camera-overlay { display: none; position: fixed; inset: 0; z-index: 60; align-items: center; justify-content: center; padding: 20px; background: rgba(7,27,58,.78); backdrop-filter: blur(6px); }
.pos-camera-overlay.is-open { display: flex; }
.pos-camera-panel { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 420px; padding: 18px; border-radius: var(--radius-xl); background: var(--navy-2); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 40px 80px -30px rgba(0,0,0,.7); }
.pos-camera-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pos-camera-eyebrow { font-family: var(--sans); font-size: 10.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--aqua); }
.pos-camera-title { display: block; font-family: var(--sans); font-size: 16px; font-weight: 800; letter-spacing: -.02em; color: #fff; margin-top: 3px; }
.pos-camera-close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; background: rgba(255,255,255,.06); color: #fff; cursor: pointer; transition: background .12s ease; }
.pos-camera-close:hover { background: rgba(255,255,255,.14); }

.pos-camera-viewport { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; background: #050f21; }
.pos-camera-viewport video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pos-camera-mask { position: absolute; inset: 14% 10%; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(5,15,33,.45); pointer-events: none; }
.pos-camera-corner { position: absolute; width: 34px; height: 34px; border-color: var(--aqua); border-style: solid; border-width: 0; pointer-events: none; }
.pos-camera-corner.tl { left: 10%; top: 14%; border-top-width: 3px; border-left-width: 3px; border-top-left-radius: 12px; }
.pos-camera-corner.tr { right: 10%; top: 14%; border-top-width: 3px; border-right-width: 3px; border-top-right-radius: 12px; }
.pos-camera-corner.bl { left: 10%; bottom: 14%; border-bottom-width: 3px; border-left-width: 3px; border-bottom-left-radius: 12px; }
.pos-camera-corner.br { right: 10%; bottom: 14%; border-bottom-width: 3px; border-right-width: 3px; border-bottom-right-radius: 12px; }
.pos-camera-scanline { position: absolute; left: 10%; right: 10%; height: 2px; background: linear-gradient(90deg, transparent, var(--aqua), transparent); box-shadow: 0 0 18px var(--aqua); animation: pos-scanline 2.4s ease-in-out infinite; pointer-events: none; }
.pos-camera-formats { position: absolute; left: 0; right: 0; bottom: 5%; text-align: center; font-family: var(--mono); font-size: 11px; letter-spacing: .05em; color: rgba(255,255,255,.72); pointer-events: none; }
.pos-camera-error { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px; text-align: center; background: #050f21; color: rgba(255,255,255,.8); font-family: var(--sans); font-size: 12.5px; font-weight: 600; line-height: 1.5; }
.pos-camera-error.is-visible { display: flex; }

.pos-camera-hint { margin: 0; font-family: var(--sans); font-size: 12.5px; font-weight: 500; line-height: 1.55; color: rgba(255,255,255,.66); }
.pos-camera-cerrar { padding: 13px 16px; border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius-md); background: transparent; color: #fff; font-family: var(--sans); font-size: 13.5px; font-weight: 800; cursor: pointer; transition: background .12s ease; }
.pos-camera-cerrar:hover { background: rgba(255,255,255,.1); }

@keyframes pos-scanline { 0% { top: 6%; } 50% { top: 92%; } 100% { top: 6%; } }
@keyframes pos-pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 480px) {
  .pos-search-row { flex-wrap: wrap; }
  .pos-scan-btn { flex: 1 1 100%; justify-content: center; }
}

/* ══════════════════════════════════════════════════════
   Compra directa — tarjetas de línea (Fase 59)
   Reutiliza pos-page/pos-header/pos-body/pos-field/
   pos-segmented/pos-ticket/pos-cobrar (Fase 50/56) —
   solo se agrega lo genuinamente nuevo: la tarjeta de línea
   y el checklist "Antes de registrar".
   ══════════════════════════════════════════════════════ */
.pos-segmented.pos-segmented-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 420px) {
  .pos-segmented.pos-segmented-3 { grid-template-columns: 1fr; }
}

.oc-linea { display: flex; flex-direction: column; gap: 12px; padding: 15px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); box-shadow: 0 6px 18px -8px rgba(10,35,80,.18), 0 1px 2px rgba(10,35,80,.05); transition: border-color .12s ease; }
.oc-linea.is-completa { border-color: #c9dcf5; }
.oc-linea-head { display: flex; align-items: center; gap: 11px; }
.oc-linea-num { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; background: var(--surface-2); font-family: var(--mono); font-size: 11.5px; color: var(--text-muted); }
.oc-linea-select { flex: 1 1 auto; min-width: 0; font-weight: 700; }
.oc-linea-remove { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); color: var(--text-muted); cursor: pointer; transition: border-color .12s ease, background .12s ease, color .12s ease; }
.oc-linea-remove:hover { border-color: #f7c4ca; background: #fdeaec; color: #e44e5e; }

.oc-linea-nuevo { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px dashed #b6d4ff; border-radius: 14px; background: #f6faff; animation: pos-pop .18s ease both; }
.oc-linea-nuevo-badge { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.oc-linea-nuevo-pill { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; background: #eaf3ff; font-family: var(--mono); font-size: 10px; letter-spacing: .04em; color: var(--blue-2); }
.oc-linea-nuevo-badge span:last-child { font-family: var(--sans); font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.oc-linea-nuevo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px,1fr)); gap: 8px; }

.oc-linea-foot { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.oc-linea-cantidad { display: flex; flex-direction: column; gap: 6px; flex: 0 1 150px; }
.oc-linea-costo { display: flex; flex-direction: column; gap: 6px; flex: 0 1 170px; }
.oc-linea-costo .pos-field-label { display: flex; align-items: center; gap: 6px; }
.oc-linea-sug { font-family: var(--mono); font-size: 9.5px; letter-spacing: .02em; color: #8494a8; text-transform: none; }
.oc-linea-box { display: flex; align-items: center; height: 38px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface-2); overflow: hidden; }
.oc-linea-box input { width: 100%; min-width: 0; height: 100%; padding: 0 11px; border: 0; background: transparent; font-family: var(--mono); font-size: 13.5px; outline: none; color: var(--text); }
.oc-linea-unidad { padding: 0 11px; border-left: 1px solid var(--border); font-family: var(--mono); font-size: 11.5px; color: var(--text-muted); white-space: nowrap; line-height: 36px; }
.oc-linea-cifra { padding-left: 11px; font-family: var(--mono); font-size: 12px; color: var(--text-muted); }
.oc-linea-costo .oc-linea-box input { margin-left: 4px; }
.oc-linea-subtotal { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: 1 1 120px; }
.oc-linea-subtotal-val { font-family: var(--mono); font-size: 18px; font-weight: 500; letter-spacing: -.04em; color: var(--faint); }
.oc-linea-subtotal-val.has-valor { color: var(--ink); }

.oc-linea-add { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 14px; border: 1px dashed #b6d4ff; border-radius: 16px; background: #f6faff; font-family: var(--sans); font-size: 13.5px; font-weight: 800; color: var(--blue-2); cursor: pointer; transition: background .12s ease, border-color .12s ease; }
.oc-linea-add:hover { background: #eaf3ff; border-color: var(--blue); }

.oc-checklist { display: flex; flex-direction: column; gap: 9px; padding: 16px 18px; background: var(--surface-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.oc-checklist-item { display: flex; align-items: flex-start; gap: 9px; font-family: var(--sans); font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--text-muted); }
.oc-checklist-icon { display: flex; flex: 0 0 auto; margin-top: 1px; width: 14px; height: 14px; align-items: center; justify-content: center; color: var(--faint); font-weight: 800; }
.oc-checklist-item.is-ok .oc-checklist-icon { color: #0f7a5e; }
.oc-checklist-item.is-ok .oc-checklist-icon svg { display: block; }

@media (max-width: 480px) {
  .oc-linea-foot { gap: 10px; }
  .oc-linea-cantidad, .oc-linea-costo { flex-basis: 100%; }
}

/* Reportes — indice con buscador y chips de categoria (Fase 62). */
.rpt-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.rpt-filterbar .search-input { flex: 1 1 280px; min-width: 240px; }
.rpt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rpt-chip { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--card); color: var(--text-muted); font-family: var(--sans); font-size: 12.5px; font-weight: 800; cursor: pointer; transition: border-color .12s ease, background .12s ease, color .12s ease; }
.rpt-chip:hover { border-color: #9fc9ff; }
.rpt-chip.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.rpt-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--chip-dot, var(--muted)); }
.rpt-chip-n { font-family: var(--mono); font-size: 10.5px; font-weight: 400; opacity: .7; }

.rpt-group { display: flex; flex-direction: column; gap: 13px; margin-top: 22px; }
.rpt-group-head { display: flex; align-items: center; gap: 12px; }
.rpt-group-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 24px; height: 24px; border-radius: 8px; }
.rpt-group-rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--border-strong), transparent); }
.rpt-group-count { font-family: var(--mono); font-size: 11px; color: var(--text-muted); white-space: nowrap; }

.rpt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px,1fr)); gap: 13px; }
.rpt-card { display: flex; flex-direction: column; gap: 11px; padding: 16px 17px 14px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); text-decoration: none; color: inherit; box-shadow: 0 6px 18px -8px rgba(10,35,80,.18), 0 1px 2px rgba(10,35,80,.05); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.rpt-card:hover, .rpt-card:focus-visible { border-color: #9fc9ff; transform: translateY(-2px); box-shadow: 0 16px 30px -18px rgba(0,32,88,.4); color: inherit; }
.rpt-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.rpt-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.rpt-card-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 11px; }
.rpt-scope { padding: 3px 9px; border-radius: var(--radius-pill); font-family: var(--mono); font-size: 9.5px; letter-spacing: .05em; white-space: nowrap; background: #f3f7fc; color: var(--text-muted); }
.rpt-scope.is-hoy { background: #e8faf4; color: #0f7a5e; }
.rpt-scope.is-por_ot { background: #efedff; color: #5145d8; }
.rpt-card-body { display: flex; flex-direction: column; gap: 5px; }
.rpt-card-title { font-family: var(--sans); font-size: 14.5px; font-weight: 700; line-height: 1.25; letter-spacing: -.017em; color: var(--ink); }
.rpt-card-desc { font-family: var(--sans); font-size: 12.5px; font-weight: 500; line-height: 1.5; color: var(--text-muted); }
.rpt-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 11px; border-top: 1px solid var(--border); }
.rpt-card-formats { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.rpt-format-badge { padding: 3px 7px; border-radius: 6px; background: #f3f7fc; font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; color: var(--text-muted); }
.rpt-card-open { display: inline-flex; align-items: center; gap: 4px; font-family: var(--sans); font-size: 12px; font-weight: 800; color: var(--blue-2); white-space: nowrap; }

.rpt-empty { margin: 20px 0 0; padding: 34px; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-2); text-align: center; font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--muted); }

@media (max-width: 480px) {
  .rpt-filterbar { flex-direction: column; align-items: stretch; }
  .rpt-filterbar .search-input { flex-basis: auto; }
}