/* ===================================================================
 * Vorpia — Sistema de diseño 2026
 * SaaS industrial multi-tenant, AI-native.
 * Inspirado en Linear, Vercel y Notion. Tipografía Inter, modo claro/oscuro.
 * =================================================================== */

:root {
    /* === Marca === */
    --vr-primary:        #0d9488;
    --vr-primary-600:    #0f766e;
    --vr-primary-700:    #115e59;
    --vr-primary-soft:   #5eead4;
    --vr-primary-tint:   #ccfbf1;
    --vr-primary-fog:    #f0fdfa;

    /* === Neutrales (light) === */
    --vr-bg:             #f8fafc;
    --vr-surface:        #ffffff;
    --vr-surface-2:      #f1f5f9;
    --vr-surface-3:      #e2e8f0;
    --vr-text:           #0f172a;
    --vr-text-2:         #334155;
    --vr-muted:          #64748b;
    --vr-muted-2:        #94a3b8;
    --vr-border:         #e2e8f0;
    --vr-border-strong:  #cbd5e1;
    --vr-divider:        #f1f5f9;

    /* === Semánticos === */
    --vr-success:        #16a34a;
    --vr-success-tint:   #dcfce7;
    --vr-warning:        #d97706;
    --vr-warning-tint:   #fef3c7;
    --vr-danger:         #dc2626;
    --vr-danger-tint:    #fee2e2;
    --vr-info:           #2563eb;
    --vr-info-tint:      #dbeafe;

    /* === Radios / sombras / tipografía === */
    --vr-radius-xs: 4px;
    --vr-radius-sm: 6px;
    --vr-radius:    8px;
    --vr-radius-lg: 12px;
    --vr-radius-xl: 16px;
    --vr-radius-2xl: 20px;
    --vr-radius-full: 999px;

    --vr-shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
    --vr-shadow-sm: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
    --vr-shadow:    0 4px 8px -2px rgba(15, 23, 42, .06), 0 2px 4px -2px rgba(15, 23, 42, .04);
    --vr-shadow-md: 0 8px 16px -4px rgba(15, 23, 42, .08), 0 4px 8px -4px rgba(15, 23, 42, .06);
    --vr-shadow-lg: 0 16px 32px -8px rgba(15, 23, 42, .12), 0 8px 16px -8px rgba(15, 23, 42, .08);
    --vr-shadow-glow: 0 0 0 4px rgba(13, 148, 136, .15);

    --vr-font-sans: 'Inter var', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --vr-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --vr-fs-xs: 0.75rem;
    --vr-fs-sm: 0.85rem;
    --vr-fs-base: 0.95rem;
    --vr-fs-md: 1rem;
    --vr-fs-lg: 1.125rem;
    --vr-fs-xl: 1.25rem;
    --vr-fs-2xl: 1.5rem;
    --vr-fs-3xl: 1.875rem;

    --vr-fast: 120ms cubic-bezier(.4, 0, .2, 1);
    --vr-base: 200ms cubic-bezier(.4, 0, .2, 1);
    --vr-slow: 320ms cubic-bezier(.4, 0, .2, 1);
}

/* === Dark mode opt-in ===
   Solo se activa si el body tiene el atributo `data-theme="dark"`.
   El usuario cambia el modo desde la topbar. Default siempre light. */
[data-theme="dark"] {
    --vr-bg:             #0a0f1c;
    --vr-surface:        #111827;
    --vr-surface-2:      #1f2937;
    --vr-surface-3:      #374151;
    --vr-text:           #f1f5f9;
    --vr-text-2:         #cbd5e1;
    --vr-muted:          #94a3b8;
    --vr-muted-2:        #64748b;
    --vr-border:         #1f2937;
    --vr-border-strong:  #334155;
    --vr-divider:        #1f2937;
    --vr-primary-tint:   #134e4a;
    --vr-primary-fog:    #042f2e;
    --vr-success-tint:   #064e3b;
    --vr-warning-tint:   #422006;
    --vr-danger-tint:    #450a0a;
    --vr-info-tint:      #1e3a8a;
    --vr-shadow:    0 4px 8px -2px rgba(0, 0, 0, .3), 0 2px 4px -2px rgba(0, 0, 0, .2);
    --vr-shadow-md: 0 8px 16px -4px rgba(0, 0, 0, .4), 0 4px 8px -4px rgba(0, 0, 0, .25);
}

* { box-sizing: border-box; }
*::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; tab-size: 4; }
html, body { margin: 0; padding: 0; }
body {
    background: var(--vr-bg);
    color: var(--vr-text);
    font-family: var(--vr-font-sans);
    font-size: var(--vr-fs-base);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "cv11", "ss01", "ss03";
}

a { color: var(--vr-primary); text-decoration: none; transition: color var(--vr-fast); }
a:hover { color: var(--vr-primary-600); text-decoration: underline; text-underline-offset: 2px; }

h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; font-weight: 600; color: var(--vr-text); letter-spacing: -0.01em; }
h1 { font-size: var(--vr-fs-2xl); letter-spacing: -0.02em; }
h2 { font-size: var(--vr-fs-xl); }
h3 { font-size: var(--vr-fs-lg); }
h4 { font-size: var(--vr-fs-md); }

small { color: var(--vr-muted); font-size: var(--vr-fs-sm); }
code { font-family: var(--vr-font-mono); font-size: .88em; background: var(--vr-surface-2); padding: .15em .4em; border-radius: var(--vr-radius-xs); }
::selection { background: var(--vr-primary-tint); color: var(--vr-primary-700); }

*:focus-visible { outline: 2px solid var(--vr-primary); outline-offset: 2px; border-radius: var(--vr-radius-xs); }

/* ========== TOPBAR ==========
   Layout simple y robusto: topbar fixed arriba, contenido con padding-top
   para no quedar tapado. Sin flex column ni grid para evitar los bugs
   que provocaban que el topbar apareciera en medio de la página. */
.vr-topbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: .75rem 1.5rem;
    background: var(--vr-surface);
    border-bottom: 1px solid var(--vr-border);
    box-shadow: var(--vr-shadow-xs);
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 50;
    min-height: 64px;
}
.vr-brand { display: flex; gap: .75rem; align-items: center; }
.vr-brand img { height: 32px; width: auto; display: block; transition: transform var(--vr-base); }
.vr-brand:hover img { transform: rotate(-6deg) scale(1.05); }
.vr-brand-meta { display: flex; flex-direction: column; line-height: 1.15; padding-left: .85rem; border-left: 1px solid var(--vr-border); }
.vr-plant { color: var(--vr-text-2); font-size: .82rem; font-weight: 600; }
.vr-brand-tag { color: var(--vr-muted); font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; }
.vr-user { display: flex; gap: .85rem; align-items: center; position: relative; }
.vr-user-name { font-weight: 600; font-size: .9rem; }
.vr-user-email { color: var(--vr-muted); font-size: .78rem; }
.vr-user-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg, var(--vr-primary), var(--vr-primary-600));
    color: white; display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .85rem;
    box-shadow: 0 2px 6px rgba(13, 148, 136, .3);
}

/* ========== LAYOUT ==========
   Topbar es fixed (height 64px). Layout es grid de 2 columnas:
   sidebar 260px | main 1fr. */
.vr-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    min-height: 100vh;
    padding-top: 64px;
}
.vr-side {
    background: var(--vr-surface);
    border-right: 1px solid var(--vr-border);
    padding: 1rem 0;
}
.vr-side-footer { padding: .85rem 1.25rem; border-top: 1px solid var(--vr-border); color: var(--vr-muted); font-size: .72rem; }
.vr-main {
    padding: 1.75rem 2rem;
    min-width: 0;          /* permite que el grid cell encoja si hace falta */
    width: auto;
    max-width: 1500px;
}
.vr-page-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap;
}
.vr-page-title { display: flex; align-items: baseline; gap: .85rem; }
/* El título va en línea con el botón de "Guía de uso"; el subtítulo, debajo. */
.vr-page-title h1 { margin: 0; display: inline-block; vertical-align: middle; }
.vr-page-subtitle { display: block; color: var(--vr-muted); font-size: .92rem; }
.vr-breadcrumb { color: var(--vr-muted); font-size: .82rem; margin-bottom: .25rem; }
.vr-breadcrumb a { color: var(--vr-muted); }
.vr-breadcrumb a:hover { color: var(--vr-text); }

/* ========== NAV ========== */
.vr-nav-group { margin: 0 .5rem .25rem; }
.vr-nav-group-header {
    display: flex; align-items: center; gap: .6rem; width: 100%;
    padding: .55rem .85rem; background: transparent; border: 0; cursor: pointer;
    color: var(--vr-text-2); font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    border-radius: var(--vr-radius);
    transition: background var(--vr-fast);
}
.vr-nav-group-header:hover { background: var(--vr-surface-2); }
.vr-nav-group-icon { font-size: 1rem; }
.vr-nav-group-caret { margin-left: auto; font-size: .65rem; transition: transform var(--vr-base); }
.vr-nav-group.collapsed .vr-nav-group-caret { transform: rotate(-90deg); }
.vr-nav-group.collapsed .vr-nav-group-body { display: none; }
.vr-nav-group-body ul { list-style: none; margin: 0; padding: 0 0 .35rem; }
.vr-nav-group-body a {
    display: flex; align-items: center; gap: .55rem;
    padding: .5rem .85rem; color: var(--vr-text-2);
    border-radius: var(--vr-radius); font-size: .88rem; font-weight: 500;
    margin: 0 .35rem; transition: all var(--vr-fast);
}
.vr-nav-group-body a:hover { background: var(--vr-surface-2); color: var(--vr-text); text-decoration: none; }
.vr-nav-group-body a.active {
    background: var(--vr-primary-fog);
    color: var(--vr-primary-700);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--vr-primary);
}
.vr-nav-group-body a.is-soon { opacity: .5; cursor: not-allowed; }
.vr-nav-emoji { width: 18px; text-align: center; font-size: 1rem; }

/* ========== ICONOS LUCIDE (https://lucide.dev) ==========
   Los iconos vienen como <i data-lucide="name"> y Lucide los reemplaza por SVGs.
   Estos estilos controlan el tamaño, color y alineación. */
.vr-icon,
.vr-nav-icon,
i[data-lucide] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    color: currentColor;
    flex-shrink: 0;
}
/* Forzamos a los SVGs que genera Lucide a heredar el tamaño y color */
.vr-icon svg,
.vr-nav-icon svg,
i[data-lucide] svg {
    width: 100%;
    height: 100%;
    display: block;
    color: currentColor;
}
/* Icono del item de menú: tamaño fijo en px, alineado al texto */
.vr-nav-icon {
    width: 18px;
    height: 18px;
    margin-right: .65rem;
    color: var(--vr-muted);
    transition: color var(--vr-base);
}
a:hover .vr-nav-icon { color: var(--vr-text-2); }
a.active .vr-nav-icon { color: var(--vr-primary); }
/* Icono del header del grupo */
.vr-nav-group-header .vr-nav-icon {
    margin-right: .65rem;
    color: var(--vr-text-2);
}
.vr-nav-tag { margin-left: auto; font-size: .65rem; padding: .1rem .45rem; background: var(--vr-surface-3); color: var(--vr-muted); border-radius: var(--vr-radius-full); font-weight: 600; letter-spacing: .03em; }
.vr-nav-tag.soon { background: var(--vr-surface-2); color: var(--vr-muted-2); }

/* ========== KPI ========== */
.vr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.vr-kpi {
    background: var(--vr-surface);
    border: 1px solid var(--vr-border);
    border-radius: var(--vr-radius-lg);
    padding: 1.1rem 1.25rem;
    transition: all var(--vr-base);
    position: relative;
    overflow: hidden;
}
.vr-kpi:hover { border-color: var(--vr-border-strong); box-shadow: var(--vr-shadow); transform: translateY(-1px); }
.vr-kpi::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--vr-primary), var(--vr-primary-soft));
    opacity: 0; transition: opacity var(--vr-base);
}
.vr-kpi:hover::before { opacity: 1; }
.vr-kpi-accent { background: linear-gradient(135deg, var(--vr-primary-fog), var(--vr-surface)); border-color: var(--vr-primary-tint); }
.vr-kpi-accent::before { opacity: 1; }
.vr-kpi-label { color: var(--vr-muted); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .35rem; }
.vr-kpi-value { font-size: 2rem; font-weight: 700; color: var(--vr-text); letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.vr-kpi-trend { color: var(--vr-muted); font-size: .82rem; margin-top: .25rem; }
.vr-kpi-trend.is-good { color: var(--vr-success); font-weight: 600; }
.vr-kpi-trend.is-ok   { color: var(--vr-warning); font-weight: 600; }
.vr-kpi-trend.is-bad  { color: var(--vr-danger);  font-weight: 600; }
.vr-kpi-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.vr-kpi-head .vr-icon-kpi { width: 18px; height: 18px; color: var(--vr-primary); flex-shrink: 0; }
.vr-kpi-accent .vr-kpi-head .vr-icon-kpi { color: var(--vr-primary); }
.vr-kpi-head .vr-kpi-label { margin-bottom: 0; }

/* Icono Lucide a la izquierda de un título (h2/h3) */
.vr-icon-title { width: 20px; height: 20px; color: var(--vr-primary); margin-right: .35rem; vertical-align: -3px; }
.vr-card-title h2 { display: inline-flex; align-items: center; }
/* Icono Lucide inline en un botón o label */
.vr-icon-inline { width: 16px; height: 16px; margin-right: .35rem; vertical-align: -2px; }

/* ========== CARD ========== */
.vr-card {
    background: var(--vr-surface);
    border: 1px solid var(--vr-border);
    border-radius: var(--vr-radius-lg);
    padding: 1.25rem;
    box-shadow: var(--vr-shadow-xs);
    transition: box-shadow var(--vr-base);
}
.vr-card:hover { box-shadow: var(--vr-shadow-sm); }
.vr-card-title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.vr-card-title h2 { margin: 0; font-size: var(--vr-fs-md); }
@media (prefers-reduced-motion: no-preference) {
    .vr-card { animation: vrFadeIn .35s ease-out both; }
    .vr-card:nth-child(2) { animation-delay: .04s; }
    .vr-card:nth-child(3) { animation-delay: .08s; }
    .vr-card:nth-child(4) { animation-delay: .12s; }
}

/* ========== ALERT ========== */
.vr-alert { padding: .85rem 1rem; border-radius: var(--vr-radius); border: 1px solid; margin-bottom: 1rem; font-size: .92rem; }
.vr-alert-success { background: var(--vr-success-tint); border-color: #86efac; color: #14532d; }
.vr-alert-danger  { background: var(--vr-danger-tint);  border-color: #fca5a5; color: #7f1d1d; }
.vr-alert-warning { background: var(--vr-warning-tint); border-color: #fcd34d; color: #78350f; }
.vr-alert-info    { background: var(--vr-info-tint);    border-color: #93c5fd; color: #1e3a8a; }

/* ========== BUTTONS ========== */
.vr-btn {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .55rem 1.05rem; border-radius: var(--vr-radius);
    border: 1px solid transparent; font: inherit; cursor: pointer; font-weight: 600;
    background: var(--vr-primary); color: white;
    transition: all var(--vr-fast);
    text-decoration: none; font-size: .9rem;
    box-shadow: var(--vr-shadow-xs);
}
.vr-btn:hover { background: var(--vr-primary-600); color: white; text-decoration: none; transform: translateY(-1px); box-shadow: var(--vr-shadow); }
.vr-btn:active { transform: translateY(0); box-shadow: var(--vr-shadow-xs); }
.vr-btn-ghost { background: transparent; color: var(--vr-text); border-color: var(--vr-border); }
.vr-btn-ghost:hover { background: var(--vr-surface-2); color: var(--vr-text); border-color: var(--vr-border-strong); }
.vr-btn-danger { background: var(--vr-danger); }
.vr-btn-danger:hover { background: #b91c1c; }
.vr-btn-sm { padding: .4rem .8rem; font-size: .82rem; }
.vr-btn-lg { padding: .75rem 1.4rem; font-size: 1rem; }
.vr-btn-block { width: 100%; justify-content: center; }
.vr-btn-icon { padding: .45rem; line-height: 1; }
.vr-logout-form { display: inline; margin: 0; }

/* ========== FORMS ========== */
.vr-form { display: grid; gap: 1rem; }
.vr-form-row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.vr-field { display: flex; flex-direction: column; gap: .35rem; }
.vr-field label { font-weight: 600; font-size: .85rem; color: var(--vr-text-2); }
.vr-field .vr-help { font-size: .78rem; color: var(--vr-muted); }
.vr-input-group { position: relative; display: flex; align-items: center; }
.vr-input-group .vr-input-icon { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--vr-muted); pointer-events: none; }
.vr-input-with-icon { padding-left: 2.25rem; width: 100%; }
.vr-input, .vr-select, .vr-textarea {
    padding: .6rem .8rem; border-radius: var(--vr-radius);
    border: 1px solid var(--vr-border); background: var(--vr-surface);
    color: var(--vr-text); font: inherit; font-size: .92rem;
    transition: border-color var(--vr-fast), box-shadow var(--vr-fast);
    width: 100%;
}
.vr-input:hover, .vr-select:hover, .vr-textarea:hover { border-color: var(--vr-border-strong); }
.vr-input:focus, .vr-select:focus, .vr-textarea:focus {
    outline: none; border-color: var(--vr-primary); box-shadow: var(--vr-shadow-glow);
}
.vr-textarea { min-height: 100px; resize: vertical; font-family: var(--vr-font-sans); }
.vr-error { color: var(--vr-danger); font-size: .82rem; }
.vr-search { position: relative; }
.vr-search input { padding-left: 2.25rem; }
.vr-search::before { content: "🔎"; position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); opacity: .55; }

/* ========== CONTROLADORES DE FORMULARIO (normalizados) ==========
   Este proyecto NO usa Bootstrap: el sistema visual es propio (vorpia.css).
   El problema que se corrigió aquí: sólo los controles que llevarían clase
   (.vr-input, .vr-select, .vr-textarea) tenían aspecto de Vorpia; los
   <select>, <input type=number|date> y <textarea> "crudos" de las vistas se
   veían como controles nativos del navegador, ajenos al resto de la app.
   Este bloque da a TODOS los controles el mismo lenguaje visual —mismo alto,
   mismo borde, mismo foco, mismo chevron— sin tener que tocar cada vista.

   También arregla el layout: .vr-form .vr-form-row { display: block } anulaba
   la rejilla y las filas de 2 columnas nunca se ponían en dos columnas.
   ============================================================== */

/* Los controles nativos (date picker, scrollbars, desplegables) se adaptan
   al tema: sin esto, el icono del calendario sale negro sobre fondo oscuro. */
:root { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }

.vr-form select,
.vr-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.vr-form textarea,
.vr-line-grid select,
.vr-line-grid input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.vr-filters select,
.vr-filters input:not([type="hidden"]):not([type="checkbox"]) {
    width: 100%;
    min-height: 2.5rem;
    padding: .55rem .75rem;
    border: 1px solid var(--vr-border);
    border-radius: var(--vr-radius);
    background-color: var(--vr-surface);
    color: var(--vr-text);
    font: inherit;
    font-size: .92rem;
    line-height: 1.4;
    box-shadow: var(--vr-shadow-xs);
    transition: border-color var(--vr-fast), box-shadow var(--vr-fast), background-color var(--vr-fast);
}

.vr-form select:hover,
.vr-form input:hover:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.vr-form textarea:hover,
.vr-line-grid select:hover,
.vr-line-grid input:hover,
.vr-filters select:hover,
.vr-filters input:hover { border-color: var(--vr-border-strong); }

.vr-form select:focus,
.vr-form input:focus:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.vr-form textarea:focus,
.vr-line-grid select:focus,
.vr-line-grid input:focus,
.vr-filters select:focus,
.vr-filters input:focus {
    outline: none;
    border-color: var(--vr-primary);
    box-shadow: var(--vr-shadow-glow);
}

.vr-form select:disabled,
.vr-form input:disabled,
.vr-form textarea:disabled,
.vr-line-grid select:disabled,
.vr-line-grid input:disabled {
    background-color: var(--vr-surface-2);
    color: var(--vr-muted);
    cursor: not-allowed;
    box-shadow: none;
}

/* Chevron propio en los <select>: el del navegador rompe la línea visual. */
.vr-form select,
.vr-line-grid select,
.vr-filters select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 2.2rem;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .7rem center;
}
[data-theme="dark"] .vr-form select,
[data-theme="dark"] .vr-line-grid select,
[data-theme="dark"] .vr-filters select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* Los <textarea> no se estiran a 2.5rem: llevan su alto propio. */
.vr-form textarea {
    min-height: 5.5rem;
    resize: vertical;
    font-family: var(--vr-font-sans);
}
.vr-form input::placeholder,
.vr-form textarea::placeholder,
.vr-line-grid input::placeholder { color: var(--vr-muted-2); }

/* Números con cifras tabulares para que las columnas se lean alineadas. */
.vr-form input[type="number"],
.vr-line-grid input[type="number"] { font-variant-numeric: tabular-nums; }

/* Etiquetas: mismo peso y color en todo el app. */
.vr-form label:not(.vr-field),
.vr-line-grid label {
    display: block;
    margin-bottom: .35rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--vr-text-2);
}

/* Filas de dos columnas: la regla anterior las convertía en bloque.
   (El layout definitivo vive al final del archivo, después de la regla
   legacy ".vr-form .vr-form-row { display: block }", para ganar la cascata.) */

/* ========== TABLES ========== */
.vr-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--vr-surface); border-radius: var(--vr-radius); overflow: hidden; }
.vr-table th, .vr-table td { padding: .7rem .9rem; text-align: left; border-bottom: 1px solid var(--vr-divider); font-size: .9rem; }
.vr-table th { background: var(--vr-surface-2); font-weight: 600; color: var(--vr-text-2); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.vr-table tr:last-child td { border-bottom: 0; }
.vr-table tbody tr { transition: background var(--vr-fast); }
.vr-table tbody tr:hover td { background: var(--vr-surface-2); }
.vr-table-wrap { overflow-x: auto; border-radius: var(--vr-radius); border: 1px solid var(--vr-border); }
.vr-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ========== PILLS ========== */
.vr-pill { display: inline-block; padding: .2rem .6rem; border-radius: var(--vr-radius-full); font-size: .72rem; font-weight: 600; letter-spacing: .02em; }
.vr-pill-draft      { background: var(--vr-surface-3);    color: var(--vr-text-2); }
.vr-pill-calculated { background: var(--vr-info-tint);    color: #1d4ed8; }
.vr-pill-reviewed   { background: var(--vr-warning-tint); color: #92400e; }
.vr-pill-approved   { background: var(--vr-success-tint); color: #166534; }
.vr-pill-execution,
.vr-pill-in_execution { background: var(--vr-primary-tint); color: #115e59; }
.vr-pill-closed     { background: var(--vr-surface-2);    color: var(--vr-muted); }
.vr-pill-low        { background: var(--vr-success-tint); color: #166534; }
.vr-pill-medium     { background: var(--vr-warning-tint); color: #92400e; }
.vr-pill-high       { background: var(--vr-danger-tint);  color: #991b1b; }
.vr-pill-success    { background: var(--vr-success-tint); color: #166534; }
.vr-pill-warning    { background: var(--vr-warning-tint); color: #92400e; }
.vr-pill-danger     { background: var(--vr-danger-tint);  color: #991b1b; font-weight: 700; }
.vr-pill-shortfall  { background: var(--vr-danger-tint);  color: #991b1b; font-variant-numeric: tabular-nums; }

/* Dark mode: los pills con texto hardcoded (verde/ámbar/rojo/azul oscuros) se
   ven mal contra tintes oscuros. Subimos el contraste invirtiendo a tinte más
   claro + texto más claro. */
[data-theme="dark"] {
    .vr-pill-draft      { background: var(--vr-surface-3); color: var(--vr-text); }
    .vr-pill-calculated { background: color-mix(in srgb, var(--vr-info) 22%, transparent);    color: #93c5fd; }
    .vr-pill-reviewed   { background: color-mix(in srgb, var(--vr-warning) 22%, transparent); color: #fcd34d; }
    .vr-pill-approved   { background: color-mix(in srgb, var(--vr-success) 22%, transparent); color: #86efac; }
    .vr-pill-execution,
    .vr-pill-in_execution { background: color-mix(in srgb, var(--vr-primary) 22%, transparent); color: #5eead4; }
    .vr-pill-closed     { background: var(--vr-surface-2); color: var(--vr-muted); }
    .vr-pill-success    { background: color-mix(in srgb, var(--vr-success) 22%, transparent); color: #86efac; }
    .vr-pill-warning    { background: color-mix(in srgb, var(--vr-warning) 22%, transparent); color: #fcd34d; }
    .vr-pill-danger,
    .vr-pill-shortfall  { background: color-mix(in srgb, var(--vr-danger) 22%, transparent);  color: #fca5a5; }
}

/* ========== EMPTY ========== */
.vr-empty { padding: 3rem 2rem; text-align: center; color: var(--vr-muted); border: 1px dashed var(--vr-border); border-radius: var(--vr-radius-lg); background: var(--vr-surface); }
.vr-empty-icon { font-size: 2.5rem; display: block; margin-bottom: .65rem; opacity: .7; }
.vr-empty h3 { color: var(--vr-text); margin-bottom: .35rem; }
.vr-empty p { margin-bottom: 1.25rem; font-size: .92rem; }

/* ========== DASHBOARD TREND ========== */
.vr-trend { display: grid; gap: 1.5rem; padding: .5rem .25rem .25rem; }
.vr-card-trend > .vr-trend,
.vr-card > .vr-trend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 1.5rem; }
.vr-trend-bar { display: flex; flex-direction: column; align-items: stretch; gap: .75rem; min-width: 0; }
.vr-trend-bar-track { position: relative; width: 100%; height: 200px; background: var(--vr-surface-2); border-radius: var(--vr-radius); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.vr-trend-bar-fill { width: 100%; border-radius: var(--vr-radius) var(--vr-radius) 0 0; display: flex; align-items: flex-start; justify-content: center; padding-top: .4rem; transition: height .6s cubic-bezier(.4,.2,.2,1); min-height: 4px; }
.vr-trend-bar-fill.is-good { background: linear-gradient(180deg, #34d399, #10b981); }
.vr-trend-bar-fill.is-ok   { background: linear-gradient(180deg, #fbbf24, #f59e0b); }
.vr-trend-bar-fill.is-bad  { background: linear-gradient(180deg, #f87171, #ef4444); }
.vr-trend-bar-value { color: white; font-size: .75rem; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.2); }
.vr-trend-bar-empty { color: var(--vr-muted); font-size: 1.25rem; padding-bottom: 1rem; }
.vr-trend-bar-label { color: var(--vr-muted); font-size: .8rem; font-weight: 500; }
.vr-trend-legend { display: flex; flex-direction: row; flex-wrap: wrap; gap: 1.25rem; font-size: .78rem; padding-top: .75rem; border-top: 1px solid var(--vr-border); margin-top: 1rem; align-items: center; }
.vr-legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .35rem; vertical-align: middle; }
.vr-legend-dot.is-good { background: #10b981; }
.vr-legend-dot.is-ok { background: #f59e0b; }
.vr-legend-dot.is-bad { background: #ef4444; }

/* ========== DASHBOARD GRID (auto-fit, sin huecos) ========== */
/* Cada fila es un grid con sus propias columnas. Los cards adentro
   estiran a la misma altura por grid stretch. El grid permite spans
   tipo "wide" para cards grandes, sin huecos. */
.vr-dash-row-1 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-top: 1.25rem; }
.vr-dash-row-1 .vr-kpi { display: flex; flex-direction: column; }
/* Filas 2 y 3: charts full-width (una sola card por fila) */
.vr-dash-row-2, .vr-dash-row-3 { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 1.25rem; }
.vr-dash-row-4 { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 1.25rem; align-items: stretch; }
.vr-dash-row-5 { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; margin-top: 1.25rem; align-items: stretch; }

.vr-card-chart, .vr-card-trend, .vr-card-donut { display: flex; flex-direction: column; }
.vr-card-chart > .vr-card-title, .vr-card-trend > .vr-card-title, .vr-card-donut > .vr-card-title { flex: 0 0 auto; }
.vr-card-chart > :not(.vr-card-title) { flex: 1 1 auto; }
.vr-card-trend > :not(.vr-card-title):not(.vr-trend):not(.vr-trend-legend) { flex: 1 1 auto; display: flex; flex-direction: column; }
.vr-card-donut > :not(.vr-card-title) { flex: 1 1 auto; }

/* KPI de salud: se posiciona al final de la fila 1 en desktop, full width en mobile */
.vr-kpi-health { display: flex; flex-direction: column; }
.vr-kpi-health-value { font-size: 1.35rem !important; }
.vr-health-good { background: linear-gradient(135deg, #d1fae5, var(--vr-surface)); border-color: #6ee7b7; }
.vr-health-good::before { background: linear-gradient(90deg, #10b981, #34d399) !important; opacity: 1 !important; }
.vr-health-warning { background: linear-gradient(135deg, #fef3c7, var(--vr-surface)); border-color: #fcd34d; }
.vr-health-warning::before { background: linear-gradient(90deg, #f59e0b, #fbbf24) !important; opacity: 1 !important; }
.vr-health-critical { background: linear-gradient(135deg, #fee2e2, var(--vr-surface)); border-color: #fca5a5; }
.vr-health-critical::before { background: linear-gradient(90deg, #ef4444, #f87171) !important; opacity: 1 !important; }
.vr-health-idle { background: var(--vr-surface); }
.vr-health-good .vr-kpi-head .vr-icon-kpi,
.vr-health-good .vr-kpi-value { color: #047857; }
.vr-health-warning .vr-kpi-head .vr-icon-kpi,
.vr-health-warning .vr-kpi-value { color: #b45309; }
.vr-health-critical .vr-kpi-head .vr-icon-kpi,
.vr-health-critical .vr-kpi-value { color: #b91c1c; }

/* ========== CHART: progreso diario (SVG) ========== */
.vr-chart-progress-wrap { width: 100%; }
.vr-chart-progress { width: 100%; height: auto; aspect-ratio: 3 / 1; display: block; }
.vr-chart-grid { stroke: var(--vr-border); stroke-width: 1; stroke-dasharray: 2 3; opacity: .6; }
.vr-chart-y-label { fill: var(--vr-muted); font-size: 10px; font-family: var(--vr-font-mono, ui-monospace, monospace); }
.vr-chart-x-label { fill: var(--vr-text-2); font-size: 11px; font-weight: 600; }
.vr-chart-x-sub { fill: var(--vr-muted); font-size: 9px; }
.vr-chart-line-actual { fill: none; stroke: var(--vr-primary); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.vr-chart-line-planned { fill: none; stroke: var(--vr-muted); stroke-width: 1.5; stroke-dasharray: 5 4; opacity: .75; }
.vr-chart-area-actual { fill: var(--vr-primary); opacity: .12; }
.vr-chart-dot-actual { fill: var(--vr-primary); stroke: var(--vr-surface); stroke-width: 2; }
.vr-chart-dot-planned { fill: var(--vr-surface); stroke: var(--vr-muted); stroke-width: 1.5; }
.vr-chart-today-line { stroke: var(--vr-warning); stroke-width: 1; stroke-dasharray: 3 2; opacity: .8; }
.vr-chart-today-label { fill: var(--vr-warning); font-size: 9px; font-weight: 700; }
.vr-chart-legend { display: flex; gap: 1.25rem; padding-top: .5rem; font-size: .78rem; color: var(--vr-muted); }
.vr-legend-item { display: inline-flex; align-items: center; gap: .35rem; }
.vr-legend-line { display: inline-block; width: 18px; height: 2.5px; border-radius: 2px; }
.vr-legend-line.actual { background: var(--vr-primary); }
.vr-legend-line.planned { background: repeating-linear-gradient(90deg, var(--vr-muted) 0 5px, transparent 5px 9px); }

/* ========== BARS LIST (Top faltantes, Top merma, Por mesa) ========== */
.vr-bars-list { display: flex; flex-direction: column; gap: .65rem; }
.vr-bars-item { display: grid; grid-template-columns: minmax(100px, 1.2fr) 2fr auto; gap: .75rem; align-items: center; }
.vr-bars-label { display: flex; flex-direction: column; gap: .1rem; line-height: 1.15; }
.vr-bars-label small { font-size: .72rem; }
.vr-bars-track { position: relative; height: 26px; background: var(--vr-surface-2); border-radius: var(--vr-radius); overflow: hidden; display: flex; align-items: center; }
.vr-bars-fill { position: absolute; inset: 0 auto 0 0; background: var(--vr-primary); display: flex; align-items: center; padding: 0 .5rem; border-radius: var(--vr-radius); min-width: 2rem; transition: width .6s cubic-bezier(.4,.2,.2,1); }
.vr-bars-fill.is-good { background: linear-gradient(90deg, #34d399, #10b981); }
.vr-bars-fill.is-ok   { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.vr-bars-fill.is-bad  { background: linear-gradient(90deg, #f87171, #ef4444); }
.vr-bars-value { color: white; font-size: .72rem; font-weight: 700; white-space: nowrap; text-shadow: 0 1px 1px rgba(0,0,0,.2); }
.vr-bars-rejected { margin-left: auto; padding: 0 .5rem; display: inline-flex; align-items: center; gap: .25rem; color: var(--vr-danger); font-size: .72rem; font-weight: 600; }
.vr-bars-rejected .vr-icon { width: 12px; height: 12px; }
.vr-bars-pill { display: flex; align-items: center; }

/* ========== DONUT chart (Por cliente) ========== */
/* Layout vertical: donut grande centrado arriba, leyenda como grid horizontal debajo. */
.vr-donut-wrap { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; height: 100%; }
.vr-donut-stage { display: flex; align-items: center; justify-content: center; flex: 1 1 auto; padding: 1rem 0; }
.vr-donut { width: 320px; height: 320px; max-width: 100%; }
.vr-donut-total { fill: var(--vr-text); font-size: 32px; font-weight: 700; font-variant-numeric: tabular-nums; }
.vr-donut-subtotal { fill: var(--vr-muted); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; }
.vr-donut-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .75rem 1.5rem; width: 100%; padding: 1rem 0 0; margin: 0; list-style: none; border-top: 1px solid var(--vr-border); }
.vr-donut-legend li { display: grid; grid-template-columns: 14px 1fr auto; gap: .5rem; align-items: center; font-size: .88rem; }
.vr-donut-legend-label { color: var(--vr-text-2); }
.vr-donut-legend-value { font-weight: 600; font-variant-numeric: tabular-nums; }


/* ========== AUTH ========== */
.vr-body-auth {
    background: radial-gradient(ellipse at top, #ccfbf1 0%, #f0fdfa 35%, #e0f2fe 100%);
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 2rem; position: relative; overflow: hidden;
}
.vr-body-auth::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(13, 148, 136, .15), transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(37, 99, 235, .12), transparent 40%);
    pointer-events: none;
}
.vr-auth-main { width: 100%; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; }
.vr-auth-card {
    width: 100%; max-width: 440px; background: var(--vr-surface);
    border-radius: var(--vr-radius-2xl);
    box-shadow: 0 24px 56px -16px rgba(15, 23, 42, .18);
    padding: 2.5rem; border: 1px solid var(--vr-border);
}
.vr-auth-brand { text-align: center; margin-bottom: 1.85rem; }
.vr-auth-brand img { height: 56px; width: auto; display: block; margin: 0 auto .85rem; }
.vr-auth-brand h1 { font-size: 1.5rem; margin: 0 0 .25rem; }
.vr-auth-brand .vr-tagline { color: var(--vr-muted); font-size: .85rem; margin: 0; letter-spacing: .02em; }

/* ========== CAPTURE ========== */
.vr-capture { background: var(--vr-surface); border: 2px solid var(--vr-primary); border-radius: var(--vr-radius-xl); padding: 1.5rem; }
.vr-capture .vr-input { font-size: 1.25rem; padding: .85rem 1rem; }
.vr-capture .vr-btn { font-size: 1.1rem; padding: .85rem 1.5rem; }
.vr-capture-toast { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 9999; display: flex; align-items: center; gap: .5rem; padding: .85rem 1.1rem; border-radius: var(--vr-radius); box-shadow: var(--vr-shadow); }
.vr-capture-toast-icon .vr-icon { width: 20px; height: 20px; }
.vr-capture-row-error { background: var(--vr-danger-tint) !important; }
.vr-capture-select-locked { background: var(--vr-warning-tint); }

/* ========== PLANNING WEEK ========== */
.vr-plan-toolbar { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; margin-bottom: 1rem; padding: 1rem 1.15rem; background: var(--vr-surface); border: 1px solid var(--vr-border); border-radius: var(--vr-radius); box-shadow: var(--vr-shadow-xs); }
.vr-plan-toolbar .vr-spacer { flex: 1; }
.vr-plan-toolbar .vr-week-info { display: flex; flex-direction: column; }
.vr-plan-toolbar .vr-week-info strong { font-size: 1.05rem; color: var(--vr-text); }
.vr-plan-toolbar .vr-week-info small { color: var(--vr-muted); }

.vr-plan-week { display: grid; grid-template-columns: 200px repeat(5, minmax(150px, 1fr)); gap: 1px; background: var(--vr-border); border: 1px solid var(--vr-border); border-radius: var(--vr-radius-lg); overflow: hidden; }
.vr-plan-cell { background: var(--vr-surface); padding: .7rem .8rem; min-height: 64px; font-size: .9rem; transition: background var(--vr-fast); }
.vr-plan-cell.head { background: var(--vr-surface-2); font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--vr-text-2); display: flex; align-items: center; justify-content: space-between; }
.vr-plan-cell.product { background: var(--vr-surface-2); font-weight: 600; display: flex; flex-direction: column; justify-content: center; gap: .15rem; }
.vr-plan-cell.product small { color: var(--vr-muted); font-weight: 400; font-size: .76rem; }
.vr-plan-cell.editable { cursor: text; }
.vr-plan-cell.editable:hover { background: var(--vr-primary-fog); }
.vr-plan-cell.has-value { background: var(--vr-success-tint); }
.vr-plan-cell.has-shortage { background: var(--vr-danger-tint); color: var(--vr-danger); font-weight: 600; }
.vr-plan-cell.today { box-shadow: inset 0 0 0 2px var(--vr-primary); }
.vr-plan-cell input { width: 100%; border: none; background: transparent; font: inherit; font-weight: 600; text-align: center; color: inherit; padding: .25rem; }
.vr-plan-cell input:focus { outline: 2px solid var(--vr-primary); outline-offset: -2px; border-radius: var(--vr-radius-xs); background: var(--vr-surface); }
.vr-plan-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }

/* ========== UTILITIES ========== */
.vr-row { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.vr-spacer { flex: 1; }
.vr-text-muted { color: var(--vr-muted); }
.vr-text-success { color: var(--vr-success); }
.vr-text-danger  { color: var(--vr-danger); }
.vr-text-warning { color: var(--vr-warning); }
.vr-text-right { text-align: right; }
.vr-text-center { text-align: center; }
.vr-mt-1 { margin-top: .5rem; } .vr-mt-2 { margin-top: 1rem; } .vr-mt-3 { margin-top: 1.5rem; }
.vr-mb-1 { margin-bottom: .5rem; } .vr-mb-2 { margin-bottom: 1rem; } .vr-mb-3 { margin-bottom: 1.5rem; }
.vr-hidden { display: none; }
.vr-fade-in { animation: vrFadeIn .35s ease-out both; }
@keyframes vrFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ========== SKELETON LOADER ========== */
.vr-skeleton { background: linear-gradient(90deg, var(--vr-surface-2) 0%, var(--vr-surface-3) 50%, var(--vr-surface-2) 100%); background-size: 200% 100%; animation: vrShimmer 1.5s ease-in-out infinite; border-radius: var(--vr-radius); color: transparent; }
@keyframes vrShimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

/* ========== PWA BANNER ========== */
.vr-pwa-banner { animation: vrSlideUp .3s ease-out; }
@keyframes vrSlideUp { from { transform: translateX(-50%) translateY(20px); opacity: 0; } to { transform: translateX(-50%) translateY(0); opacity: 1; } }

/* ========== RESPONSIVE ========== */
@media (max-width: 1280px) {
    .vr-dash-row-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vr-dash-row-4 > :last-child { grid-column: span 2; }
}
@media (max-width: 1100px) {
    .vr-plan-week { grid-template-columns: 160px repeat(5, minmax(120px, 1fr)); font-size: .85rem; }
    .vr-dash-row-2 { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .vr-layout { grid-template-columns: 1fr; }
    .vr-side { position: fixed; left: 0; top: 64px; height: calc(100vh - 64px); width: 260px; z-index: 40; transform: translateX(-100%); transition: transform var(--vr-base); }
    .vr-side.is-open { transform: translateX(0); box-shadow: var(--vr-shadow-lg); }
    .vr-main { padding: 1.25rem; }
    .vr-topbar { padding: .65rem 1rem; }
    .vr-user-email, .vr-user-name { display: none; }
    .vr-user-meta { display: none !important; }
    .vr-brand-tag { display: none; }
    .vr-plan-week { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
    .vr-dash-row-3 { grid-template-columns: 1fr; }
    .vr-dash-row-3 > :last-child { grid-column: span 1; }
    .vr-dash-row-4 { grid-template-columns: 1fr; }
    /* Tablas en mobile: vista de cards */
    .vr-table-mobile-cards thead { display: none; }
    .vr-table-mobile-cards tbody tr { display: block; background: var(--vr-surface); border: 1px solid var(--vr-border); border-radius: var(--vr-radius); padding: .75rem; margin-bottom: .5rem; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
    .vr-table-mobile-cards tbody td { display: flex; justify-content: space-between; align-items: center; padding: .4rem 0; border: none; gap: 1rem; }
    .vr-table-mobile-cards tbody td:before { content: attr(data-label); font-weight: 600; color: var(--vr-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
    .vr-table-mobile-cards tbody td.vr-table-actions { display: block; padding-top: .5rem; border-top: 1px solid var(--vr-border); margin-top: .35rem; }
    .vr-table-mobile-cards tbody td.vr-table-actions:before { display: none; }
    .vr-help-btn { width: 44px; height: 44px; bottom: 1rem; right: 1rem; }
    .vr-donut { width: 220px; height: 220px; }
    .vr-donut { margin: 0 auto; }
    .vr-bars-item { grid-template-columns: 1fr; gap: .25rem; }
    .vr-bars-pill { justify-content: flex-start; }
    /* Form de captura en mobile: vista de cards apiladas */
    .vr-capture-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .vr-capture-table { min-width: 720px; }
    .vr-capture-table thead th { position: sticky; top: 0; background: var(--vr-surface-2); }
    .vr-capture-input { font-size: 1.1rem !important; padding: .65rem .75rem !important; }
    .vr-capture-save { min-height: 44px; padding: .65rem 1rem !important; }
    .vr-capture-save-all { width: 100%; }
    .vr-capture-footer { flex-direction: column; align-items: stretch; gap: .5rem; }
    .vr-capture-footer small { text-align: center; }
    .vr-page-header { flex-direction: column; align-items: flex-start; }
    .vr-page-header .vr-row { width: 100%; }
    .vr-page-header .vr-row .vr-btn { flex: 1; justify-content: center; }
    /* Burger button for sidebar */
    .vr-burger { display: inline-flex !important; }
    .vr-side-backdrop { display: block; }
    .vr-topbar { gap: .5rem; }
}
@media (max-width: 640px) {
    .vr-grid { grid-template-columns: 1fr; }
    .vr-kpi-value { font-size: 1.65rem; }
    .vr-trend { grid-template-columns: 1fr 1fr; }
    .vr-dash-row-1 { grid-template-columns: 1fr 1fr; }
    .vr-dash-row-1 .vr-kpi-health { grid-column: span 2; }
    .vr-form-row { grid-template-columns: 1fr; }
    .vr-auth-card { padding: 1.5rem; max-width: 100%; }
    .vr-bom-detail-header { flex-direction: column; align-items: flex-start; }
    .vr-modal-content { width: 95vw; max-height: 92vh; }
    .vr-table-wrap { margin: 0 -.5rem; padding: 0 .5rem; }
    h1 { font-size: 1.4rem; }
    .vr-page-title h1 { font-size: 1.4rem; }
}

/* Burger menu (oculto en desktop) */
.vr-burger { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--vr-border); background: var(--vr-surface); border-radius: var(--vr-radius); cursor: pointer; color: var(--vr-text); }
.vr-burger:hover { background: var(--vr-surface-2); }
.vr-burger .vr-icon { width: 20px; height: 20px; }
.vr-side-backdrop { display: none; position: fixed; inset: 64px 0 0 0; background: rgba(0,0,0,.35); z-index: 35; }
body.vr-side-locked { overflow: hidden; }
@media (max-width: 900px) {
    .vr-side-backdrop.is-open { display: block; }
}

/* Cards layout de capture table (cuando wrapping se quiere en mobile) */
.vr-capture-cards { display: none; }
@media (max-width: 720px) {
    .vr-capture-table-wrap .vr-capture-table { display: none; }
    .vr-capture-cards { display: flex; flex-direction: column; gap: .75rem; }
    .vr-capture-card { background: var(--vr-surface); border: 1px solid var(--vr-border); border-radius: var(--vr-radius); padding: 1rem; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
    .vr-capture-card-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: .65rem; padding-bottom: .5rem; border-bottom: 1px solid var(--vr-border); }
    .vr-capture-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
    .vr-capture-card-field { display: flex; flex-direction: column; gap: .25rem; }
    .vr-capture-card-field label { font-size: .72rem; font-weight: 600; color: var(--vr-muted); text-transform: uppercase; letter-spacing: .04em; }
    .vr-capture-card-footer { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: .75rem; padding-top: .5rem; border-top: 1px solid var(--vr-border); }
}

/* ========== ANIMACIONES DE ENTRADA ========== */
@media (prefers-reduced-motion: no-preference) {
    .vr-fade-in { animation: vrFadeIn .35s ease-out both; }
}

/* ========== IMPRESIÓN ========== */
@media print {
    .vr-topbar, .vr-side, .vr-pwa-banner { display: none !important; }
    .vr-main { padding: 0; max-width: none; }
    .vr-card, .vr-kpi { box-shadow: none; border-color: #cbd5e1; }
    body { background: white; }
}

/* ========== PAGINACIÓN ========== */
.vr-pagination { padding: .85rem 1rem; border-top: 1px solid var(--vr-border); background: var(--vr-surface-2); display: flex; justify-content: flex-end; }
.vr-pagination-nav { display: inline-flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
.vr-page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 2.1rem; height: 2.1rem; padding: 0 .65rem; border-radius: var(--vr-radius-sm); border: 1px solid var(--vr-border); background: var(--vr-surface); color: var(--vr-text-2); font-size: .85rem; font-weight: 500; text-decoration: none; transition: background var(--vr-base), border-color var(--vr-base), color var(--vr-base); }
.vr-page-link:hover { background: var(--vr-surface-3); color: var(--vr-text); border-color: var(--vr-border-strong); }
.vr-page-link.is-active { background: var(--vr-primary); color: white; border-color: var(--vr-primary); font-weight: 600; }
.vr-page-link.is-active:hover { background: var(--vr-primary-600); border-color: var(--vr-primary-600); color: white; }
.vr-page-link.is-disabled { color: var(--vr-muted-2); background: var(--vr-surface); cursor: not-allowed; opacity: .55; }
.vr-page-link.is-disabled:hover { background: var(--vr-surface); border-color: var(--vr-border); color: var(--vr-muted-2); }
.vr-page-link.is-ellipsis { border-color: transparent; background: transparent; color: var(--vr-muted); pointer-events: none; }
[data-theme="dark"] {
    .vr-pagination { background: var(--vr-surface-2); }
    .vr-page-link { background: var(--vr-surface); color: var(--vr-text); }
    .vr-page-link:hover { background: var(--vr-surface-3); }
}

/* ========== SEARCH BAR / PER-PAGE (form en header de tablas) ========== */
.vr-search { display: flex; gap: .65rem; align-items: center; }
.vr-select { padding: .55rem .75rem; border: 1px solid var(--vr-border); border-radius: var(--vr-radius); background: var(--vr-surface); color: var(--vr-text); font-size: .92rem; font-family: inherit; cursor: pointer; transition: border-color var(--vr-base), box-shadow var(--vr-base); }
.vr-select:hover { border-color: var(--vr-border-strong); }
.vr-select:focus { outline: none; border-color: var(--vr-primary); box-shadow: var(--vr-shadow-glow); }

/* ========== MÓDULO BOM (catalog/bom) ==========
   Antes vivía en <style> inline de bom_index.blade.php. Movido aquí para
   consistencia con el sistema de diseño y soporte de dark mode. */

.vr-table-expandable .vr-expandable-row { cursor: pointer; transition: background .12s; }
.vr-table-expandable .vr-expandable-row:hover { background: var(--vr-surface-2); }
.vr-table-expandable .vr-expandable-row:focus { outline: 2px solid var(--vr-primary); outline-offset: -2px; }
.vr-table-expandable .vr-expandable-row[aria-expanded="true"] { background: var(--vr-primary-fog); }
.vr-table-expandable .vr-expandable-row[aria-expanded="true"] td { border-bottom-color: transparent; }
.vr-expand-toggle { padding: .65rem .85rem .65rem 1rem; }
.vr-chevron { display: inline-block; transition: transform .2s ease; color: var(--vr-muted); font-size: .9rem; }
.vr-expandable-row[aria-expanded="true"] .vr-chevron { transform: rotate(90deg); color: var(--vr-primary); }
.vr-expanded-row[hidden] { display: none; }
.vr-expanded-row td { border-bottom: 1px solid var(--vr-border); padding: 0 !important; }
.vr-expanded-row[hidden] td { display: none; }

.vr-bom-detail { padding: 1rem 0; animation: vr-slide-down .25s ease; }
@keyframes vr-slide-down { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.vr-bom-detail-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.25rem 1rem; gap: 1rem; flex-wrap: wrap; }
.vr-table-compact th, .vr-table-compact td { padding: .55rem .75rem; font-size: .88rem; }
.vr-table-compact thead th { background: var(--vr-surface-2); }

.vr-qty-editor { display: inline-flex; align-items: center; gap: .25rem; justify-content: flex-end; }
.vr-qty-editor .vr-qty-input { width: 60px; padding: .3rem .4rem; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.vr-qty-step { padding: .25rem .55rem; line-height: 1; }
.vr-qty-status { font-size: .72rem; margin-left: .35rem; min-width: 1.25rem; text-align: center; display: inline-flex; align-items: center; justify-content: center; }
.vr-qty-status .vr-icon { width: 14px; height: 14px; }
.vr-qty-status.saving { color: var(--vr-warning); }
.vr-qty-status.saved  { color: var(--vr-success); }
.vr-qty-status.error  { color: var(--vr-danger); }

/* Soporte dark mode para BOM (los tokens cambian automáticamente, pero los
   fondos explícitos necesitan un override) */
[data-theme="dark"] {
    .vr-table-compact thead th { background: var(--vr-surface-2); }
    .vr-table-expandable .vr-expandable-row[aria-expanded="true"] { background: color-mix(in srgb, var(--vr-primary) 18%, transparent); }
}

/* ========== BOTÓN FLOTANTE "GUÍA DE USO" ==========
   Pensado para que Luis pueda consultar cómo se calcula cada pantalla.
   Aparece solo si la vista define un @section('help_content'). */
.vr-help-btn {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 80;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem 1rem;
    border-radius: var(--vr-radius-full);
    background: var(--vr-primary);
    color: white;
    border: none;
    box-shadow: 0 6px 16px -4px rgba(13, 148, 136, .35), 0 2px 6px -1px rgba(15, 23, 42, .12);
    cursor: pointer;
    font-family: inherit;
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .01em;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.vr-help-btn:hover { background: var(--vr-primary-600); transform: translateY(-1px); box-shadow: 0 10px 24px -8px rgba(13, 148, 136, .45), 0 4px 10px -2px rgba(15, 23, 42, .14); }
.vr-help-btn:active { transform: translateY(0); }
.vr-help-btn:focus-visible { outline: 3px solid var(--vr-primary-soft); outline-offset: 2px; }
.vr-help-btn > span:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    font-size: .85rem;
    font-weight: 700;
}
.vr-help-btn-label { line-height: 1; }

/* ========== MODAL GENÉRICO ========== */
.vr-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}
.vr-modal[hidden] { display: none !important; }
.vr-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: vr-modal-fade .15s ease;
}
.vr-modal-panel {
    position: relative;
    background: var(--vr-surface);
    border-radius: var(--vr-radius-xl);
    box-shadow: 0 24px 48px -12px rgba(15, 23, 42, .25), 0 8px 16px -4px rgba(15, 23, 42, .12);
    width: min(720px, 100%);
    max-height: calc(100vh - 2.5rem);
    display: flex;
    flex-direction: column;
    animation: vr-modal-pop .18s cubic-bezier(.2, .9, .3, 1.2);
}
@keyframes vr-modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vr-modal-pop  { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

.vr-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem 1rem;
    border-bottom: 1px solid var(--vr-border);
}
.vr-modal-eyebrow {
    display: block;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .68rem;
    color: var(--vr-primary-600);
    font-weight: 700;
    margin-bottom: .25rem;
}
.vr-modal-title { margin: 0; font-size: 1.25rem; line-height: 1.3; color: var(--vr-text); }
.vr-modal-close {
    background: transparent;
    border: none;
    color: var(--vr-muted);
    font-size: 1.1rem;
    cursor: pointer;
    padding: .35rem .55rem;
    border-radius: var(--vr-radius);
    line-height: 1;
}
.vr-modal-close:hover { background: var(--vr-surface-2); color: var(--vr-text); }
.vr-modal-close:focus-visible { outline: 2px solid var(--vr-primary); outline-offset: 1px; }

.vr-modal-body {
    padding: 1.25rem 1.5rem;
    overflow-y: auto;
    color: var(--vr-text);
    line-height: 1.55;
}
.vr-modal-body h3 { margin-top: 1.25rem; margin-bottom: .5rem; font-size: 1.02rem; color: var(--vr-text); }
.vr-modal-body h3:first-child { margin-top: 0; }
.vr-modal-body h4 { margin-top: 1rem; margin-bottom: .35rem; font-size: .92rem; color: var(--vr-text-2); }
.vr-modal-body p { margin: 0 0 .75rem; color: var(--vr-text-2); font-size: .92rem; }
.vr-modal-body ul, .vr-modal-body ol { padding-left: 1.4rem; margin: 0 0 .85rem; color: var(--vr-text-2); font-size: .92rem; }
.vr-modal-body li { margin-bottom: .25rem; }
.vr-modal-body code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    background: var(--vr-surface-2);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: .85em;
    color: var(--vr-text);
}
.vr-modal-body .vr-help-formula {
    display: block;
    background: var(--vr-surface-2);
    padding: .65rem .85rem;
    border-radius: var(--vr-radius);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: .85rem;
    color: var(--vr-text);
    margin: .5rem 0 .85rem;
    border-left: 3px solid var(--vr-primary);
}
.vr-modal-body .vr-help-callout {
    background: var(--vr-primary-fog);
    border-left: 3px solid var(--vr-primary);
    padding: .65rem .85rem;
    border-radius: var(--vr-radius);
    margin: .5rem 0 .85rem;
    font-size: .88rem;
    color: var(--vr-text);
}
.vr-modal-body .vr-help-callout strong { color: var(--vr-primary-700); }

.vr-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1.5rem;
    border-top: 1px solid var(--vr-border);
    background: var(--vr-surface-2);
    border-bottom-left-radius: var(--vr-radius-xl);
    border-bottom-right-radius: var(--vr-radius-xl);
}
.vr-modal-footer small { flex: 1; }

/* Soporte dark mode para modal y help button */
[data-theme="dark"] {
    .vr-modal-backdrop { background: rgba(0, 0, 0, .55); }
    .vr-modal-body code, .vr-modal-body .vr-help-formula { background: var(--vr-surface-3); }
    .vr-modal-body .vr-help-callout { background: color-mix(in srgb, var(--vr-primary) 18%, transparent); }
    .vr-modal-footer { background: var(--vr-surface-3); }
}

/* ========== TOGGLE DE TEMA (claro/oscuro) ========== */
.vr-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: var(--vr-radius-full);
    background: var(--vr-surface-2);
    border: 1px solid var(--vr-border);
    color: var(--vr-text-2);
    cursor: pointer;
    font-size: 1.05rem;
    line-height: 1;
    transition: background var(--vr-base), border-color var(--vr-base), transform var(--vr-fast);
}
.vr-theme-toggle:hover { background: var(--vr-surface-3); border-color: var(--vr-border-strong); transform: rotate(15deg); }
.vr-theme-toggle:focus-visible { outline: 2px solid var(--vr-primary); outline-offset: 2px; }
.vr-theme-toggle [data-theme-icon-dark]  { display: none; }
.vr-theme-toggle [data-theme-icon-light] { display: inline; }
[data-theme="dark"] .vr-theme-toggle [data-theme-icon-light] { display: none; }
[data-theme="dark"] .vr-theme-toggle [data-theme-icon-dark]  { display: inline; }

/* Bloqueo scroll cuando modal abierto */
body.vr-modal-open { overflow: hidden; }

/* ========== BADGE / KBD para modales ========== */
.vr-modal-body kbd {
    background: var(--vr-surface-2);
    border: 1px solid var(--vr-border);
    border-bottom-width: 2px;
    border-radius: 4px;
    padding: 1px 5px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: .8em;
}

/* =========================================================
   === ICONBTN, POPOVERS, NOTIFICACIONES, USUARIO, PERFIL ===
   ========================================================= */

/* ---------- Botón de icono cuadrado (campana, tema) ---------- */
.vr-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid transparent;
    color: var(--vr-text-2);
    cursor: pointer;
    position: relative;
    transition: background var(--vr-base), border-color var(--vr-base), color var(--vr-base), transform var(--vr-fast);
}
.vr-iconbtn:hover {
    background: var(--vr-surface-2);
    border-color: var(--vr-border);
    color: var(--vr-text);
}
.vr-iconbtn:active { transform: scale(.96); }
.vr-iconbtn:focus-visible {
    outline: 2px solid var(--vr-primary);
    outline-offset: 2px;
}
.vr-iconbtn .vr-icon { width: 20px; height: 20px; }
/* Para que el botón de tema siga circular y funcione como iconbtn */
button.vr-theme-toggle.vr-iconbtn {
    width: 40px; height: 40px;
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
}
button.vr-theme-toggle.vr-iconbtn:hover {
    background: var(--vr-surface-2);
    border-color: var(--vr-border);
}

/* Ocultamos los iconos "ocultos" del toggle de tema al inicio */
.vr-theme-toggle [data-theme-icon-dark]  { display: none; }
.vr-theme-toggle [data-theme-icon-light] { display: inline-flex; }
[data-theme="dark"] .vr-theme-toggle [data-theme-icon-light] { display: none; }
[data-theme="dark"] .vr-theme-toggle [data-theme-icon-dark]  { display: inline-flex; }

/* ---------- Badge numérico (campana) ---------- */
.vr-notif-badge {
    position: absolute;
    top: 4px; right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--vr-danger);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--vr-surface);
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

/* ---------- Popover genérico (campana + usuario) ---------- */
.vr-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    background: var(--vr-surface);
    border: 1px solid var(--vr-border);
    border-radius: var(--vr-radius-lg);
    box-shadow: var(--vr-shadow-lg);
    min-width: 280px;
    max-width: 360px;
    overflow: hidden;
    animation: vrPopoverIn .14s ease-out;
}
@keyframes vrPopoverIn {
    from { opacity: 0; transform: translateY(-4px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.vr-popover[hidden] { display: none; }
.vr-popover-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .85rem 1rem .55rem;
    border-bottom: 1px solid var(--vr-border);
}
.vr-popover-head strong { font-size: .92rem; }
.vr-popover-foot {
    padding: .55rem 1rem .75rem;
    border-top: 1px solid var(--vr-border);
    background: var(--vr-surface-2);
}
.vr-popover-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem 1rem;
    color: var(--vr-text);
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-size: .9rem;
    transition: background var(--vr-fast);
    text-decoration: none;
}
.vr-popover-item:hover { background: var(--vr-surface-2); text-decoration: none; }
.vr-popover-item .vr-icon { width: 18px; height: 18px; color: var(--vr-text-2); }
.vr-popover-item-danger { color: var(--vr-danger); }
.vr-popover-item-danger:hover { background: color-mix(in srgb, var(--vr-danger) 10%, var(--vr-surface-2)); }
.vr-popover-form { margin: 0; padding: 0; }
.vr-popover-form .vr-popover-item { width: 100%; }

/* ---------- Notificaciones (campana) ---------- */
.vr-notif { position: relative; }
.vr-notif-popover { min-width: 320px; max-width: 380px; }
.vr-notif-list {
    max-height: 360px;
    overflow-y: auto;
    padding: .35rem 0;
}
.vr-notif-item {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: .65rem;
    align-items: flex-start;
    padding: .65rem 1rem;
    color: var(--vr-text);
    border-bottom: 1px solid var(--vr-border);
    transition: background var(--vr-fast);
    text-decoration: none;
}
.vr-notif-item:last-child { border-bottom: 0; }
.vr-notif-item:hover { background: var(--vr-surface-2); text-decoration: none; }
.vr-notif-item.is-unread { background: color-mix(in srgb, var(--vr-primary) 5%, transparent); }
.vr-notif-item.is-unread .vr-notif-title::before {
    content: ''; display: inline-block;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--vr-primary);
    margin-right: .55rem; vertical-align: 2px;
}
.vr-notif-icon .vr-icon { color: var(--vr-primary); }
.vr-notif-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vr-notif-title { font-weight: 600; font-size: .88rem; color: var(--vr-text); }
.vr-notif-text  { font-size: .82rem; color: var(--vr-text-2); line-height: 1.35; }
.vr-notif-meta  { font-size: .72rem; color: var(--vr-muted); margin-top: 2px; }
.vr-notif-empty {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: .35rem; padding: 1.5rem 1rem;
    color: var(--vr-muted); font-size: .88rem;
    text-align: center;
}
.vr-notif-empty .vr-icon { width: 28px; height: 28px; color: var(--vr-muted); }

/* Variantes de severidad — tiñen el icono */
.vr-notif-item[data-severity="warning"]  .vr-notif-icon .vr-icon { color: var(--vr-warning); }
.vr-notif-item[data-severity="critical"] .vr-notif-icon .vr-icon { color: var(--vr-danger); }
.vr-notif-item[data-severity="success"]  .vr-notif-icon .vr-icon { color: var(--vr-success); }

/* ---------- Trigger de usuario (botón que abre Mi Perfil) ---------- */
.vr-user-trigger {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .25rem .65rem .25rem .25rem;
    border-radius: var(--vr-radius-full);
    background: var(--vr-surface);
    border: 1px solid var(--vr-border);
    color: var(--vr-text);
    cursor: pointer;
    transition: background var(--vr-fast), border-color var(--vr-fast), box-shadow var(--vr-fast);
}
.vr-user-trigger:hover {
    background: var(--vr-surface-2);
    border-color: var(--vr-border-strong);
    box-shadow: var(--vr-shadow-xs);
}
.vr-user-trigger:focus-visible {
    outline: 2px solid var(--vr-primary);
    outline-offset: 2px;
}
.vr-user-trigger .vr-user-meta { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.vr-user-trigger .vr-icon-caret { color: var(--vr-muted); transition: transform var(--vr-base); }
.vr-user-trigger[aria-expanded="true"] .vr-icon-caret { transform: rotate(180deg); }

/* Avatar circular (compartido entre topbar y popover) */
.vr-user-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--vr-primary), var(--vr-primary-600));
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: -.02em;
    box-shadow: 0 2px 6px rgba(13, 148, 136, .25);
    overflow: hidden;
    flex-shrink: 0;
    user-select: none;
}
.vr-user-avatar-img { object-fit: cover; }
.vr-user-avatar-lg { width: 96px; height: 96px; font-size: 1.6rem; }

/* Popover de usuario */
.vr-user-popover { min-width: 240px; }
.vr-user-popover-head {
    display: flex; align-items: center; gap: .75rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--vr-border);
    background: var(--vr-surface-2);
}
.vr-user-popover-head strong { display: block; font-size: .9rem; }
.vr-user-popover-head small { display: block; font-size: .76rem; }
.vr-user-popover-head > div { min-width: 0; line-height: 1.25; }
.vr-user-popover-avatar { width: 40px; height: 40px; font-size: .9rem; }

/* En mobile los nombres se ocultan (vienen estilos previos a 900px). Forzamos
   el centrado del chevron en pantallas chicas. */
@media (max-width: 900px) {
    .vr-user-trigger { padding: .25rem; }
    .vr-user-trigger .vr-user-meta { display: none; }
    .vr-user-trigger .vr-icon-caret { display: none; }
    .vr-notif-popover { min-width: 280px; max-width: 92vw; }
    .vr-popover { min-width: 240px; max-width: 92vw; }
    .vr-topbar .vr-user { gap: .35rem; }
}

/* ========== MOBILE-FRIENDLY: card-title con H1 + acciones ==========
   Muchas páginas (Planeación, Captura, Mi Perfil) usan .vr-card-title con un
   <h1> + botones. En desktop se ve horizontal, en mobile debe apilarse. */
@media (max-width: 720px) {
    .vr-card-title {
        flex-direction: column;
        align-items: stretch;
        gap: .65rem;
    }
    .vr-card-title h1, .vr-card-title h2 { font-size: 1.25rem; }
    .vr-card-title .vr-btn { width: 100%; justify-content: center; }
    .vr-card-title .vr-row { width: 100%; flex-wrap: wrap; }
    .vr-card-title .vr-row .vr-btn { flex: 1; min-width: 0; justify-content: center; }
}

/* ========== MOBILE-FRIENDLY: tablas con first-col sticky ==========
   Cuando una tabla tiene muchas columnas y entra en mobile, la columna de
   "Código" o "Producto" debería quedarse fija mientras el usuario hace
   scroll horizontal. Aplicar con clase opt-in. */
.vr-table-sticky-first.vr-table-mobile-cards tbody td:first-child {
    position: sticky;
    left: 0;
    background: var(--vr-surface);
    border-right: 1px solid var(--vr-border);
    box-shadow: 4px 0 8px rgba(0,0,0,.04);
    z-index: 1;
}
[data-theme="dark"] .vr-table-sticky-first.vr-table-mobile-cards tbody td:first-child {
    background: var(--vr-surface);
    box-shadow: 4px 0 12px rgba(0,0,0,.4);
}

/* ========== MOBILE-FRIENDLY: chart "Progreso diario" ==========
   El SVG debe fluir al 100% del container sin desbordar y mantener aspect
   ratio razonable en mobile. */
@media (max-width: 720px) {
    .vr-card-chart .vr-chart-progress { width: 100%; }
    .vr-card-chart { padding: 1rem; }
}

/* ========== MOBILE-FRIENDLY: KPI grid en tablets ========== */
@media (max-width: 720px) and (min-width: 481px) {
    .vr-dash-row-1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vr-dash-row-1 .vr-kpi-health { grid-column: span 2; }
}

/* ========== MOBILE-FRIENDLY: cards de planeación (index) ========== */
@media (max-width: 480px) {
    .vr-grid[style*="minmax(320px"] { grid-template-columns: 1fr !important; }
}

/* ========== MOBILE-FRIENDLY: alert en planeación/producción ========== */
@media (max-width: 720px) {
    .vr-alert { font-size: .85rem; padding: .75rem .85rem; }
    .vr-alert strong { word-break: break-word; }
}

/* ========== MOBILE-FRIENDLY: topbar — logo + planta en mobile ========== */
@media (max-width: 600px) {
    .vr-plant { display: none; }
    .vr-brand-meta { border-left: 0 !important; padding-left: 0 !important; }
    .vr-topbar .vr-burger { margin-right: .25rem; }
}

/* ========== FILTROS de listado (pedidos y otros) ========== */
.vr-filters { padding: 1rem; }
.vr-filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .75rem;
    align-items: end;
}
.vr-filters label { display: block; font-size: .78rem; font-weight: 600; color: var(--vr-text-2); margin-bottom: .25rem; }
.vr-filters select, .vr-filters input {
    width: 100%; padding: .5rem .65rem; border-radius: var(--vr-radius);
    border: 1px solid var(--vr-border); background: var(--vr-surface); color: var(--vr-text);
    font-size: .9rem;
}
.vr-filters select:focus, .vr-filters input:focus {
    border-color: var(--vr-primary); outline: 2px solid color-mix(in srgb, var(--vr-primary) 30%, transparent);
    outline-offset: 1px;
}
@media (max-width: 640px) {
    .vr-filters-grid { grid-template-columns: 1fr; }
}

/* ========== LINES (líneas de pedido dinámicas) ========== */
.vr-line-row {
    display: flex; gap: .5rem; align-items: flex-start;
    padding: .85rem; border: 1px solid var(--vr-border); border-radius: var(--vr-radius);
    background: var(--vr-surface-2); margin-bottom: .5rem; position: relative;
}
.vr-line-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 0.8fr 1fr;
    gap: .65rem;
    flex: 1;
}
.vr-line-grid > div { display: flex; flex-direction: column; }
.vr-line-grid label { font-size: .72rem; font-weight: 600; color: var(--vr-muted); margin-bottom: .25rem; text-transform: uppercase; letter-spacing: .04em; }
.vr-line-grid select, .vr-line-grid input {
    width: 100%; padding: .5rem .65rem; border-radius: var(--vr-radius);
    border: 1px solid var(--vr-border); background: var(--vr-surface); color: var(--vr-text);
    font-size: .9rem;
}
.vr-line-remove { align-self: flex-start; margin-top: 1.4rem; }

/* Resumen en vivo del pedido: tira discreta de una línea (no tarjetas). */
.vr-order-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-top: .85rem;
    padding: .6rem .85rem;
    border: 1px solid var(--vr-border);
    border-left: 3px solid var(--vr-primary);
    border-radius: var(--vr-radius);
    background: var(--vr-surface-2);
    font-size: .85rem;
    color: var(--vr-muted);
}
.vr-order-summary-item strong {
    color: var(--vr-text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) {
    .vr-line-grid { grid-template-columns: 1fr 1fr; }
}

/* ========== Datalist / Definition list (cabecera del pedido) ========== */
.vr-dl { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1rem; margin: 0; }
.vr-dl dt { color: var(--vr-muted); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.vr-dl dd { margin: 0; color: var(--vr-text); }
@media (max-width: 640px) {
    .vr-dl { grid-template-columns: 1fr; gap: 0 .5rem; }
    .vr-dl dt { margin-top: .5rem; }
    .vr-dl dd { margin-bottom: .25rem; }
}

/* ========== Form actions (botones al pie de form) ========== */
.vr-form-actions { display: flex; gap: .65rem; justify-content: flex-end; margin-top: 1rem; }

/* ========== Captura de componentes (mini-grid) ========== */
.vr-capture-row { display: block; }
.vr-capture-mini-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr auto;
    gap: .35rem;
    align-items: center;
}
.vr-capture-mini {
    padding: .4rem .5rem; border-radius: var(--vr-radius);
    border: 1px solid var(--vr-border); background: var(--vr-surface); color: var(--vr-text);
    font-size: .85rem; min-width: 0;
}
.vr-capture-mini:focus { border-color: var(--vr-primary); outline: 2px solid color-mix(in srgb, var(--vr-primary) 30%, transparent); outline-offset: 1px; }
@media (max-width: 720px) {
    .vr-capture-mini-grid { grid-template-columns: 1fr 1fr; }
}

/* ========== Capacidad de mesas (gauge bar) ========== */
.vr-capacity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .85rem;
}
.vr-capacity-cell { display: flex; flex-direction: column; gap: .25rem; }
.vr-capacity-head { display: flex; justify-content: space-between; align-items: baseline; font-size: .88rem; }
.vr-capacity-track {
    background: var(--vr-surface-2);
    border-radius: 999px;
    height: 10px;
    overflow: hidden;
}
.vr-capacity-fill { height: 100%; border-radius: 999px; transition: width var(--vr-base); }
.vr-capacity-fill.is-good { background: var(--vr-success); }
.vr-capacity-fill.is-ok  { background: var(--vr-warning); }
.vr-capacity-fill.is-bad { background: var(--vr-danger); }

/* ========== MI PERFIL ========== */
.vr-profile-grid {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}
@media (max-width: 900px) {
    .vr-profile-grid { grid-template-columns: 1fr; }
}
.vr-profile-section-title {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin: 0 0 .85rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--vr-text);
}
.vr-profile-help {
    font-size: .85rem;
    color: var(--vr-text-2);
    margin: -.5rem 0 1rem;
}
.vr-profile-help-small {
    font-size: .75rem;
    color: var(--vr-muted);
    margin-top: .5rem;
}
.vr-profile-avatar-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.vr-profile-avatar-preview {
    width: 120px; height: 120px;
    border-radius: 50%;
    background: var(--vr-surface-2);
    border: 1px solid var(--vr-border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: .5rem 0 1rem;
}
.vr-profile-avatar-preview img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.vr-profile-avatar-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    justify-content: center;
}
.vr-btn-danger-ghost {
    border-color: var(--vr-border);
    color: var(--vr-danger);
}
.vr-btn-danger-ghost:hover {
    background: color-mix(in srgb, var(--vr-danger) 10%, transparent);
    border-color: var(--vr-danger);
    color: var(--vr-danger);
}
.vr-profile-avatar-toast {
    margin-top: 1rem;
    padding: .55rem .75rem;
    border-radius: var(--vr-radius);
    font-size: .85rem;
    width: 100%;
    border: 1px solid var(--vr-border);
    background: var(--vr-surface-2);
    color: var(--vr-text);
}
.vr-profile-avatar-toast.is-ok  { border-color: color-mix(in srgb, var(--vr-success) 40%, transparent); background: color-mix(in srgb, var(--vr-success) 10%, transparent); color: var(--vr-success); }
.vr-profile-avatar-toast.is-err { border-color: color-mix(in srgb, var(--vr-danger) 40%, transparent); background: color-mix(in srgb, var(--vr-danger) 10%, transparent); color: var(--vr-danger); }

.vr-profile-plant {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .65rem .85rem;
    background: var(--vr-surface-2);
    border: 1px solid var(--vr-border);
    border-radius: var(--vr-radius);
    color: var(--vr-text-2);
}
.vr-profile-plant .vr-icon { width: 18px; height: 18px; color: var(--vr-primary); }
.vr-profile-plant small { display: block; font-size: .72rem; }
.vr-profile-plant strong { display: block; font-size: .9rem; }
.vr-profile-form-actions {
    display: flex;
    gap: .65rem;
    justify-content: flex-end;
    margin-top: 1rem;
}

/* NOTA: las reglas originales de .vr-form (input[type=text|email|tel],
   .vr-form input:focus y .vr-form-row-2) se movieron al bloque
   "CONTROLES DE FORMULARIO (normalizados)" de este archivo, junto al
   resto de controles. Aquí queda el espaciado de la fila y, DEBAJO, el
   layout de dos columnas (tiene que ir después para ganar la cascata). */
.vr-form .vr-form-row { display: block; margin-bottom: 1rem; }
.vr-form .vr-form-row:last-child { margin-bottom: 0; }
.vr-form .vr-form-row > label { display: block; font-size: .82rem; font-weight: 600; color: var(--vr-text-2); margin-bottom: .35rem; }

/* Filas de dos columnas: antes esta regla existía pero con menor
   especificidad que ".vr-form .vr-form-row { display: block }", así que
   NUNCA se veían en dos columnas. */
.vr-form .vr-form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
/* Filas cuyos hijos directos son .vr-field: rejilla responsive. */
.vr-form .vr-form-row:has(> .vr-field) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}
@media (max-width: 720px) {
    .vr-form .vr-form-row-2,
    .vr-form .vr-form-row:has(> .vr-field) { grid-template-columns: 1fr; }
}

.vr-stack > * + * { margin-top: 1rem; }

/* ========== CROPPER MODAL ========== */
.vr-modal {
    position: fixed; inset: 0;
    background: var(--vr-modal-backdrop, rgba(0,0,0,.55));
    z-index: 90;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
.vr-modal[hidden] { display: none; }
.vr-modal-content {
    background: var(--vr-surface);
    border-radius: var(--vr-radius-xl);
    box-shadow: var(--vr-shadow-lg);
    max-width: 92vw;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    width: 520px;
    overflow: hidden;
}
.vr-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--vr-border);
}
.vr-modal-head h3 { margin: 0; display: inline-flex; align-items: center; gap: .5rem; font-size: 1.05rem; }
.vr-modal-close {
    background: transparent; border: 0;
    color: var(--vr-muted);
    font-size: 1.5rem; line-height: 1;
    cursor: pointer;
    width: 36px; height: 36px;
    border-radius: 50%;
    transition: background var(--vr-fast);
}
.vr-modal-close:hover { background: var(--vr-surface-2); color: var(--vr-text); }
.vr-modal-body { padding: 1rem 1.25rem; flex: 1; overflow: auto; }
.vr-modal-foot {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--vr-border);
    background: var(--vr-surface-2);
    display: flex; justify-content: flex-end; gap: .65rem;
}

.vr-cropper-modal-content { width: min(560px, 92vw); }
.vr-cropper-body { padding: 1rem; }
.vr-cropper-stage {
    height: 360px;
    background: var(--vr-surface-2);
    border-radius: var(--vr-radius);
    overflow: hidden;
}
.vr-cropper-stage img { display: block; max-width: 100%; }
.vr-cropper-help { font-size: .82rem; margin-top: .65rem; text-align: center; }
@media (max-width: 720px) {
    .vr-cropper-stage { height: 280px; }
    .vr-modal-content { width: 100%; max-height: 95vh; }
}

/* =========================================================================
 * Tooltips estilo Bootstrap (vanilla JS)
 * Activados por `data-bs-toggle="tooltip"` en cualquier elemento.
 * El contenedor (.vr-tooltip) se inyecta una sola vez en <body>.
 * ========================================================================= */
.vr-tooltip {
    position: absolute;
    z-index: 1080;
    display: block;
    margin: 0;
    font-family: var(--vr-font-sans);
    font-style: normal;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    white-space: normal;
    font-size: .8125rem;
    max-width: 260px;
    padding: .4rem .6rem;
    color: #fff;
    background-color: #0f172a;             /* slate-900, paleta Vorpia */
    border-radius: var(--vr-radius-sm);   /* 6px, idéntico a Bootstrap 5 */
    box-shadow: 0 6px 16px rgba(15, 23, 42, .18),
                0 2px 4px rgba(15, 23, 42, .12);
    pointer-events: none;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity var(--vr-base), transform var(--vr-base);
    visibility: hidden;
}
.vr-tooltip.show { visibility: visible; }
.vr-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}
.vr-tooltip-arrow {
    position: absolute;
    display: block;
    width: .6rem;
    height: .6rem;
    background-color: #0f172a;
    transform: rotate(45deg);
}
.vr-tooltip-arrow-top    { bottom: -.3rem; }
.vr-tooltip-arrow-bottom { top:    -.3rem; }
.vr-tooltip-arrow-left   { right:  -.3rem; }
.vr-tooltip-arrow-right  { left:   -.3rem; }

/* Contenido opcional con jerarquía (header / filas clave-valor) */
.vr-tooltip-inner { display: block; }
.vr-tooltip-header {
    font-weight: 600;
    font-size: .8rem;
    padding-bottom: .3rem;
    margin-bottom: .3rem;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    opacity: .92;
}
.vr-tooltip-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    line-height: 1.45;
    align-items: baseline;
}
.vr-tooltip-row + .vr-tooltip-row { margin-top: .05rem; }
.vr-tooltip-row > span {
    color: rgba(255, 255, 255, .72);
}
.vr-tooltip-row strong {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #fff;
}
.vr-tooltip-row.is-success strong { color: #4ade80; }   /* verde para entregas */
.vr-tooltip-row.is-danger  strong { color: #f87171; }   /* rojo para faltante */
.vr-tooltip-row.is-warning strong { color: #fbbf24; }   /* ámbar */

/* Modo oscuro Vorpia: tooltip claro (consistente con sus textos) */
[data-theme="dark"] .vr-tooltip {
    background-color: #f1f5f9;
    color: #0f172a;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .35),
                0 2px 4px rgba(0, 0, 0, .25);
}
[data-theme="dark"] .vr-tooltip-arrow { background-color: #f1f5f9; }
[data-theme="dark"] .vr-tooltip-header {
    border-bottom-color: rgba(15, 23, 42, .12);
}
[data-theme="dark"] .vr-tooltip-row > span { color: rgba(15, 23, 42, .65); }
[data-theme="dark"] .vr-tooltip-row strong  { color: #0f172a; }
[data-theme="dark"] .vr-tooltip-row.is-success strong { color: #15803d; }
[data-theme="dark"] .vr-tooltip-row.is-danger  strong { color: #b91c1c; }
[data-theme="dark"] .vr-tooltip-row.is-warning strong { color: #b45309; }

/* Accesibilidad: usuarios con reduced-motion no ven la animación */
@media (prefers-reduced-motion: reduce) {
    .vr-tooltip {
        transition: none;
        transform: none;
    }
}

/* ==========================================================================
   MATRIZ SEMANAL — Entregar | Fabricar | Real por día
   Sistema visual: la tira de indicadores es una línea discreta, sin cajas.
   ========================================================================== */

/* --- Tira de indicadores (una línea, sin tarjetas) --- */
.vr-kpi-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 1.5rem;
    padding: .6rem 0 .9rem;
    margin-bottom: .5rem;
    border-bottom: 1px solid var(--vr-divider);
}
.vr-kpi-line { display: inline-flex; align-items: baseline; gap: .4rem; }
.vr-kpi-line .vr-kpi-label {
    margin: 0;
    font-size: .69rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--vr-muted);
}
.vr-kpi-line .vr-kpi-num {
    font-size: .95rem;
    font-weight: 700;
    color: var(--vr-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}
.vr-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.vr-dot-primary { background: var(--vr-primary); }
.vr-dot-info    { background: var(--vr-info); }
.vr-dot-success { background: var(--vr-success); }
.vr-dot-warning { background: var(--vr-warning); }
.vr-dot-danger  { background: var(--vr-danger); }
.vr-dot-muted   { background: var(--vr-muted-2); }

/* --- Leyenda de la matriz --- */
.vr-matrix-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.1rem;
    font-size: .78rem;
    color: var(--vr-muted);
    padding: .45rem 0 .9rem;
}
.vr-matrix-legend > span { display: inline-flex; align-items: center; gap: .35rem; }
.vr-swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.vr-swatch-deliver { background: var(--vr-info); }
.vr-swatch-make    { background: var(--vr-warning); }
.vr-swatch-real    { background: var(--vr-success); }
.vr-legend-note { color: var(--vr-muted-2); font-style: italic; }

/* --- Tabla matriz --- */
.vr-matrix-wrap {
    overflow-x: auto;
    border: 1px solid var(--vr-border);
    border-radius: var(--vr-radius-lg);
    background: var(--vr-surface);
    -webkit-overflow-scrolling: touch;
}
.vr-matrix { border-collapse: separate; border-spacing: 0; width: 100%; font-size: .8rem; }
.vr-matrix thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--vr-surface-2);
    border-bottom: 1px solid var(--vr-border-strong);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .045em;
    color: var(--vr-text-2);
    padding: .5rem .55rem;
    white-space: nowrap;
    text-align: left;
}
.vr-matrix thead tr.vr-matrix-subhead th {
    top: 1.85rem;
    z-index: 3;
    background: var(--vr-surface);
    color: var(--vr-muted);
    font-size: .63rem;
    padding: .22rem .5rem .35rem;
    border-bottom: 1px solid var(--vr-border);
}
.vr-matrix thead tr.vr-matrix-subhead th.vr-matrix-sticky { z-index: 5; background: var(--vr-surface); }
.vr-matrix th.vr-matrix-day { text-align: center; border-left: 1px solid var(--vr-border); }
.vr-matrix th.vr-day-sat { background: var(--vr-primary-fog); color: var(--vr-primary-700); }
.vr-matrix .vr-matrix-num { text-align: right; font-variant-numeric: tabular-nums; }
.vr-matrix .vr-matrix-sticky {
    position: sticky;
    background: var(--vr-surface);
    z-index: 2;
}
.vr-matrix thead .vr-matrix-sticky { z-index: 4; }
.vr-matrix-col-cliente { left: 0; width: 62px; min-width: 62px; }
.vr-matrix-col-modelo { left: 62px; min-width: 168px; box-shadow: 4px 0 6px -4px rgba(15,23,42,.10); }
.vr-matrix tbody td.vr-matrix-sticky { border-right: 1px solid var(--vr-divider); }
.vr-matrix tbody td.vr-matrix-col-modelo { border-right: 1px solid var(--vr-border); }

.vr-matrix tbody td { padding: .4rem .55rem; border-bottom: 1px solid var(--vr-divider); vertical-align: middle; }
.vr-matrix tbody tr.vr-matrix-row:hover td { background: var(--vr-primary-fog); }
.vr-matrix tbody tr.vr-matrix-row:hover td.vr-matrix-sticky { background: var(--vr-primary-fog); }

/* Modelo: dato principal en 700, soporte en 400-500 sin mayúsculas. */
.vr-modelo { font-weight: 700; color: var(--vr-text); font-size: .82rem; }
.vr-modelo-desc { display: block; font-weight: 400; font-size: .72rem; color: var(--vr-muted); line-height: 1.25; }

/* Celdas del día */
.vr-cell-deliver { color: var(--vr-info); font-weight: 600; }
.vr-cell-real { color: var(--vr-text-2); font-weight: 500; }
.vr-cell-real.vr-has-real { color: var(--vr-success); font-weight: 700; }
.vr-cell-make { padding: .2rem .3rem !important; }

.vr-quota {
    width: 100%;
    min-width: 42px;
    padding: .18rem .3rem;
    border: 1px solid transparent;
    border-radius: var(--vr-radius-sm);
    background: transparent;
    font: inherit;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: .8rem;
    color: var(--vr-warning);
    text-align: right;
    cursor: pointer;
    transition: background var(--vr-base), border-color var(--vr-base);
}
.vr-quota:hover { background: var(--vr-warning-tint); border-color: var(--vr-warning); }
.vr-quota:focus-visible { outline: 2px solid var(--vr-primary); outline-offset: 1px; }
.vr-quota-empty { color: var(--vr-muted-2); font-weight: 500; }
.vr-quota-manual { border-bottom-color: var(--vr-border-strong); }

.vr-matrix-actions { width: 30px; text-align: center; }
.vr-expand-toggle {
    background: transparent; border: none; cursor: pointer;
    color: var(--vr-muted); font-size: .9rem; line-height: 1; padding: .2rem .35rem; border-radius: var(--vr-radius-sm);
}
.vr-expand-toggle:hover { background: var(--vr-surface-3); color: var(--vr-text); }

/* Números con semántica */
.vr-num-strong { font-weight: 700; color: var(--vr-text); }
.vr-num-danger  { color: var(--vr-danger); font-weight: 700; }
.vr-num-warning { color: var(--vr-warning); font-weight: 700; }
.vr-num-muted   { color: var(--vr-muted-2); font-weight: 400; }

/* Detalle expandido */
.vr-matrix-detail td { padding: 0 !important; background: var(--vr-surface-2); }
.vr-matrix-detail-cell { padding: 1rem 1.1rem 1.2rem !important; }
.vr-detail-grid { display: grid; grid-template-columns: minmax(180px, 260px) 1fr; gap: 1.4rem; align-items: start; }
.vr-detail-block h4 {
    margin: 0 0 .5rem;
    font-size: .69rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--vr-muted);
}
.vr-detail-block dl { display: grid; grid-template-columns: 1fr auto; gap: .25rem .8rem; margin: 0; font-size: .78rem; }
.vr-detail-block dt { color: var(--vr-text-2); font-weight: 400; }
.vr-detail-block dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--vr-text); }
.vr-detail-motivo { font-size: .75rem; color: var(--vr-muted); font-weight: 400; max-width: 220px; }

/* Total */
.vr-matrix tfoot td {
    position: sticky; bottom: 0;
    background: var(--vr-surface-2);
    border-top: 1px solid var(--vr-border-strong);
    font-weight: 700;
    color: var(--vr-text);
    padding: .55rem;
}
.vr-matrix tfoot td.vr-matrix-sticky { z-index: 3; }

.vr-btn-group { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.vr-field-actions { display: flex; align-items: flex-end; gap: .5rem; }

@media (max-width: 900px) {
    .vr-detail-grid { grid-template-columns: 1fr; }
    .vr-kpi-strip { gap: 1rem; }
}

/* ==========================================================================
   TABLERO — estado de la semana y secciones de metricas
   ========================================================================== */
.vr-health {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
    padding: .7rem .95rem;
    border-radius: var(--vr-radius);
    border: 1px solid var(--vr-border);
    background: var(--vr-surface);
    margin-bottom: 1.1rem;
    font-size: .86rem;
}
.vr-health-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.vr-health-text { font-weight: 600; color: var(--vr-text); }
.vr-health-detail { color: var(--vr-muted); font-weight: 400; }
.vr-health-good    { background: var(--vr-success-tint); border-color: #86efac; }
.vr-health-good .vr-health-dot { background: var(--vr-success); }
.vr-health-warning { background: var(--vr-warning-tint); border-color: #fcd34d; }
.vr-health-warning .vr-health-dot { background: var(--vr-warning); }
.vr-health-critical{ background: var(--vr-danger-tint); border-color: #fca5a5; }
.vr-health-critical .vr-health-dot { background: var(--vr-danger); }
.vr-health-idle    { background: var(--vr-surface-2); border-color: var(--vr-border); }
.vr-health-idle .vr-health-dot { background: var(--vr-muted-2); }

.vr-metric-section { margin-bottom: 1.2rem; }
.vr-section-title {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--vr-muted);
    margin: 0 0 .1rem;
}
.vr-section-subtitle {
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--vr-muted); margin: 1rem 0 .4rem;
}
.vr-kpi-unit { font-size: .72rem; color: var(--vr-muted-2); font-weight: 400; }
.vr-empty-inline { color: var(--vr-muted); font-size: .84rem; margin: .4rem 0; }
.vr-row-today td { background: var(--vr-primary-fog); }
.vr-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 980px) { .vr-grid-2 { grid-template-columns: 1fr; } }

/* Stock deseado editable: se distingue del resto de números porque es
   un dato maestro, no una captura del día. */
.vr-quota-stock { color: var(--vr-primary-700); }
.vr-quota-stock:hover { background: var(--vr-primary-tint); border-color: var(--vr-primary); }
.vr-quota-stock.vr-quota-empty { color: var(--vr-warning); font-weight: 600; }
.vr-field-check { display: flex; align-items: center; gap: .5rem; }
.vr-field-check .vr-label { margin: 0; }

/* Pestañas de inventario */
.vr-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--vr-border); margin-bottom: 1rem; flex-wrap: wrap; }
.vr-tab {
    padding: .5rem .85rem;
    font-size: .84rem;
    font-weight: 500;
    color: var(--vr-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.vr-tab:hover { color: var(--vr-text); }
.vr-tab.active { color: var(--vr-primary-700); border-bottom-color: var(--vr-primary); font-weight: 600; }

/* Guía de usuario visible junto al título (§11.4.10) */
.vr-guide-link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin: 0 0 0 .55rem;
    padding: .2rem .5rem;
    vertical-align: middle;
    font-size: .78rem;
    font-weight: 500;
    color: var(--vr-primary-700);
    background: var(--vr-primary-fog);
    border: 1px solid var(--vr-primary-tint);
    border-radius: var(--vr-radius-full);
    cursor: pointer;
    transition: background var(--vr-base), border-color var(--vr-base);
}
.vr-guide-link:hover { background: var(--vr-primary-tint); border-color: var(--vr-primary-soft); }
.vr-guide-link:focus-visible { outline: 2px solid var(--vr-primary); outline-offset: 2px; }
.vr-guide-link .vr-icon { width: 14px; height: 14px; margin-right: 0; }

/* Distintivo de datos de demostración: visible, pero discreto. */
.vr-demo-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin: 0 0 0 .55rem;
    padding: .18rem .55rem;
    vertical-align: middle;
    font-size: .74rem;
    font-weight: 600;
    color: var(--vr-warning);
    background: var(--vr-warning-tint);
    border: 1px solid color-mix(in srgb, var(--vr-warning) 40%, transparent);
    border-radius: var(--vr-radius-full);
}
.vr-demo-badge .vr-icon { width: 13px; height: 13px; margin-right: 0; }

/* Las tarjetas de una rejilla no deben desbordar su columna: la tabla
   interna se desplaza, no invade la tarjeta vecina. */
.vr-grid > *, .vr-grid-2 > * { min-width: 0; }
.vr-grid .vr-card, .vr-grid-2 .vr-card { overflow-x: auto; }
.vr-grid-2 .vr-table { width: 100%; }
.vr-grid-2 .vr-table th, .vr-grid-2 .vr-table td { white-space: nowrap; }

/* Un <dialog> sin el atributo [open] no debe verse: .vr-modal fija display:flex
   y el navegador lo respeta, así que hay que anularlo explícitamente. */
dialog.vr-modal:not([open]) { display: none !important; }
dialog.vr-modal[open] { display: flex; align-items: center; justify-content: center; }