/* ============================================================
   Quantum Central — UI v6.0 "Claude"
   Warm editorial palette · Serif headings · Dual theme · Minimal
   ============================================================ */

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }

/* ============================================================
   DESIGN TOKENS — Tema claro (Claude warm gray, por defecto)
   ============================================================ */
:root, [data-theme="light"] {
    --bg:            #eae8df;   /* warm gray un toque más profundo → las tarjetas se despegan */
    --bg-sidebar:    #e3e0d4;
    --bg-card:       #fdfcf9;   /* tarjetas casi blancas, limpias */
    --bg-card-hover: #f5f3ec;
    --bg-input:      #fdfcf9;
    --bg-terminal:   #2c2b28;
    --bg-overlay:    rgba(44, 43, 40, 0.4);

    --border:        #e2dfd2;   /* bordes suaves → menos líneas, más limpio */
    --border-light:  #ebe8dc;
    --border-strong: #cfcbb9;

    --text:          #2c2b28;
    --text-secondary:#5d5b54;
    --text-muted:    #8a8780;
    --text-inverse:  #faf9f5;

    --accent:        #c15f3c;
    --accent-hover:  #a94e2e;
    --accent-soft:   #f5e1d6;
    --accent-blue:   #3e6b9e;
    --accent-cyan:   #4a9eac;
    --accent-green:  #5c8c62;
    --accent-red:    #c1493c;
    --accent-yellow: #c19a3c;
    --accent-purple: #8b6fb0;
    --accent-orange: #c15f3c;

    --shadow-sm:  0 1px 2px rgba(44, 43, 40, 0.04);
    --shadow:     0 1px 3px rgba(44, 43, 40, 0.06), 0 1px 2px rgba(44, 43, 40, 0.04);
    --shadow-lg:  0 4px 12px rgba(44, 43, 40, 0.08);

    --radius-sm: 6px;
    --radius:    8px;
    --radius-lg: 12px;
    --sidebar-w: 240px;
    --topbar-h:  56px;

    --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-serif: 'Source Serif 4', 'Tiempos Text', Georgia, 'Times New Roman', serif;
    --font-mono:  'JetBrains Mono', 'SF Mono', Monaco, Consolas, monospace;

    --status-ok-bg:      rgba(34,197,94,0.12);
    --status-ok-border:  rgba(34,197,94,0.28);
    --status-err-bg:     rgba(239,68,68,0.12);
    --status-err-border: rgba(239,68,68,0.28);
    --status-warn-bg:    rgba(234,179,8,0.12);
    --status-warn-border:rgba(234,179,8,0.28);
    --status-info-bg:    rgba(59,130,246,0.12);
    --status-info-border:rgba(59,130,246,0.28);

    --status-ok-solid:   #22c55e;
    --status-err-solid:  #ef4444;
    --status-warn-solid: #fbbf24;
}

/* ============================================================
   DESIGN TOKENS — Tema oscuro (Claude warm dark)
   ============================================================ */
[data-theme="dark"] {
    --bg:            #1a1815;   /* base más profunda → las tarjetas se despegan */
    --bg-sidebar:    #141310;
    --bg-card:       #242321;   /* paso claro vs el fondo (profundidad, sin ruido) */
    --bg-card-hover: #2b2926;
    --bg-input:      #2b2926;
    --bg-terminal:   #121110;
    --bg-overlay:    rgba(0, 0, 0, 0.55);

    --border:        #2c2a26;   /* bordes suaves → menos líneas, más limpio */
    --border-light:  #232120;
    --border-strong: #3a3834;

    --text:          #ebe9e1;
    --text-secondary:#a8a69d;
    --text-muted:    #75726a;
    --text-inverse:  #1f1e1b;

    --accent:        #da7756;
    --accent-hover:  #e6896c;
    --accent-soft:   #3d2a22;
    --accent-blue:   #7ba8d6;
    --accent-cyan:   #7ecbdb;
    --accent-green:  #8cb87f;
    --accent-red:    #e67565;
    --accent-yellow: #e6c47b;
    --accent-purple: #b8a0d6;
    --accent-orange: #da7756;

    --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow:     0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-lg:  0 4px 16px rgba(0, 0, 0, 0.5);
    --status-ok-bg:      rgba(34,197,94,0.16);
    --status-ok-border:  rgba(34,197,94,0.35);
    --status-err-bg:     rgba(239,68,68,0.16);
    --status-err-border: rgba(239,68,68,0.35);
    --status-warn-bg:    rgba(234,179,8,0.16);
    --status-warn-border:rgba(234,179,8,0.35);
    --status-info-bg:    rgba(59,130,246,0.16);
    --status-info-border:rgba(59,130,246,0.35);

    --status-ok-solid:   #22c55e;
    --status-err-solid:  #ef4444;
    --status-warn-solid: #fbbf24;
}

body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.55;
    display: flex;
    min-height: 100vh;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background 0.3s ease, color 0.3s ease;
}

h1, h2, h3, .page-title, .card-title, .section-title {
    font-family: var(--font-serif);
    letter-spacing: -0.01em;
    font-weight: 500;
}

a { color: var(--accent); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--accent-hover); text-decoration: none; }

/* ============================================================
   SIDEBAR — fixed left column
   ============================================================ */
aside.sidebar {
    width: 220px;
    min-width: 220px;
    height: 100vh;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    z-index: 100;
    overflow: hidden;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 16px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--bg-sidebar);
    position: sticky;
    top: 0;
    z-index: 2;
}

.brand-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    background: transparent;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.brand-icon svg { width: 100%; height: 100%; display: block; }
.brand-icon:hover { transform: rotate(30deg) scale(1.05); }

.brand-text {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 17px;
    letter-spacing: -0.01em;
    color: var(--text);
    line-height: 1.1;
}
.brand-central {
    color: var(--accent);
    font-style: italic;
    font-weight: 500;
}

.sidebar-nav {
    flex: 1;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }

.sidebar-nav > a.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
    text-decoration: none !important;
    position: relative;
    white-space: nowrap;
}

.sidebar-nav > a.nav-item:hover { background: var(--bg-card); color: var(--text); transform: translateX(2px); }
.sidebar-nav > a.nav-item.active { background: var(--bg-card); color: var(--text); font-weight: 600; }
.sidebar-nav > a.nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    background: var(--accent);
    border-radius: 0 3px 3px 0;
    animation: fadeIn 0.3s ease;
}

.sidebar-nav > a.nav-item svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.nav-badge {
    background: var(--accent-red);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: auto;
}

.sidebar-footer {
    padding: 10px;
    border-top: 1px solid var(--border);
    background: var(--bg-sidebar);
    position: sticky;
    bottom: 0;
    z-index: 2;
    flex-shrink: 0;
}

/* ----- User card compacto (estilo Claude) ----- */
.user-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.user-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
}

.user-card-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.user-card-avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

.user-card-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.user-card-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.005em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.user-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.user-card-role {
    text-transform: capitalize;
    letter-spacing: 0.01em;
}

.user-card-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--border-light);
}

.user-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}
.user-action-btn:hover {
    background: var(--bg-card-hover);
    color: var(--text);
}
.user-action-btn.user-action-logout:hover {
    color: var(--accent-red);
    background: color-mix(in srgb, var(--accent-red) 10%, transparent);
}

/* Iconos de tema: solo muestra el opuesto al actual */
[data-theme="light"] .user-action-btn .theme-icon-sun { display: none; }
[data-theme="light"] .user-action-btn .theme-icon-moon { display: block; }
[data-theme="dark"]  .user-action-btn .theme-icon-sun  { display: block; }
[data-theme="dark"]  .user-action-btn .theme-icon-moon { display: none; }

/* Legacy: status-dot ahora va inline dentro del user-card-meta */
.nav-external { font-size: 12px; color: var(--text-muted); }
.nav-external:hover { color: var(--text-secondary); }
.nav-logout { font-size: 12px; color: var(--text-muted); cursor: pointer; }
.nav-logout:hover { color: var(--accent-red); text-decoration: none; }
.nav-logout-mobile { display: none; }
.nav-action-mobile { display: none; }

.sidebar-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 12px;
    color: var(--text-muted);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-green);
    flex-shrink: 0;
    display: inline-block;
    box-shadow: 0 0 6px var(--status-ok-border);
    transition: background 0.3s, box-shadow 0.3s;
}

.status-dot.offline { background: var(--accent-red); box-shadow: 0 0 6px var(--status-err-border); }
.status-dot.running { background: var(--accent-yellow); animation: pulse 1.5s infinite; box-shadow: 0 0 6px var(--status-warn-border); }

/* ============================================================
   "CENTRAL" SKIN — TANDA 1 (marco): rail desktop + top/bottom bar mobile
   Cumple standards-diseno-central.md. Activado por [data-skin="central"]
   directamente en aside.sidebar / .mob-topbar (opt-in, scoped a esos
   elementos y sus descendientes vía central-tokens.css — no toca :root
   ni el contenido de <main>, que sigue con los tokens viejos hasta su
   propia tanda). Redeclara las MISMAS custom properties que ya consume
   el marcado existente (--bg-sidebar, --text, --accent, etc.) leyendo
   de los tokens canónicos (--plum-*, --go) así todo el CSS de
   sidebar-nav/user-card/nav-modsel se re-tematiza sin reescribirlo.
   ============================================================ */
aside.sidebar[data-skin="central"],
.mob-topbar[data-skin="central"] {
    --bg-sidebar:     var(--plum-deep);
    --bg-card:        var(--plum-hover);   /* hover/active del nav-item */
    --bg-card-hover:  var(--plum-hover);
    --border:         var(--plum-hover);
    --border-light:   var(--plum-hover);
    --border-strong:  var(--plum-hover);
    --text:           var(--plum-text);
    --text-secondary: var(--plum-dim);
    --text-muted:     var(--plum-dim);
    --accent:         var(--go);           /* acción verde: stripe activo + iconos de marca */
    --accent-soft:    var(--go-soft);
    --font-serif:     var(--sans);         /* wordmark "Quantum Central" en Manrope, no serif */
    font-family: var(--sans);
}
/* .mob-topbar tiene una variante "v7.0 Spotify-style" (media max-width:820px,
   más abajo en este archivo) que fija background/color con !important
   leyendo --bg/--text directos (no --bg-sidebar/--text que ya redeclaramos
   arriba) + backdrop-filter — hay que ganarle explícitamente y sacar el
   glassmorphism (regla dura §3, standards-diseno-central.md). */
.mob-topbar[data-skin="central"] {
    background: var(--plum-deep) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom-color: var(--plum-hover) !important;
}
.mob-topbar[data-skin="central"] .mob-topbar-title {
    color: var(--plum-text) !important;
}
/* Mismo problema para el bottom tab bar (aside.sidebar en mobile): la
   variante v7.0 le pone blur/transparencia !important — sacamos el
   glassmorphism y dejamos el marco sólido. */
aside.sidebar[data-skin="central"] {
    background: var(--plum-deep) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-top-color: var(--plum-hover) !important;
}
/* nav-item activo: pill suave (consistente con el tab bar mobile de
   referencia, que usa --plum-pill de fondo) en vez del stripe lateral.
   Cubre el nivel raíz Y los submenus (.nav-group-inner, ej. "Administración")
   — ambos tienen su propio ::before de stripe en el CSS viejo (styles.css). */
aside.sidebar[data-skin="central"] .sidebar-nav > a.nav-item.active::before,
aside.sidebar[data-skin="central"] .sidebar-nav .nav-group-inner > a.nav-item.active::before {
    content: none;
}
aside.sidebar[data-skin="central"] .sidebar-nav > a.nav-item.active,
aside.sidebar[data-skin="central"] .sidebar-nav .nav-group-inner > a.nav-item.active {
    background: var(--plum-pill);
    color: var(--plum-text);
}
/* Topbar desktop: no es marco (no lleva berenjena, el contenido "respira"
   casi blanco/negro como el resto de la página) — solo tipografía única.
   --font-serif también se redeclara: .page-title lo usa explícitamente
   (styles.css:3652) y una sola familia (Manrope) es regla dura §2. */
.topbar[data-skin="central"] { font-family: var(--sans); --font-serif: var(--sans); }
.mob-topbar[data-skin="central"] .mob-topbar-title { font-family: var(--sans); }

/* Badge de dominio (QUA-231/QUA-224 PR-H): identidad de color por área
   junto al título de página, standards-diseno-central.md §identidad.
   Scoped al topbar Central — no toca páginas sin migrar. */
.topbar[data-skin="central"] .domain-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 10px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.01em;
    white-space: nowrap;
    vertical-align: middle;
}
.topbar[data-skin="central"] .domain-badge[hidden] { display: none; }
.topbar[data-skin="central"] .domain-badge[data-dom="crm"]       { color: var(--dom-crm);       background: var(--dom-crm-soft); }
.topbar[data-skin="central"] .domain-badge[data-dom="mercado"]   { color: var(--dom-mercado);   background: var(--dom-mercado-soft); }
.topbar[data-skin="central"] .domain-badge[data-dom="oper"]      { color: var(--dom-oper);      background: var(--dom-oper-soft); }
.topbar[data-skin="central"] .domain-badge[data-dom="catalogo"]  { color: var(--dom-catalogo);  background: var(--dom-catalogo-soft); }
.topbar[data-skin="central"] .domain-badge[data-dom="garantias"] { color: var(--dom-garantias); background: var(--dom-garantias-soft); }
.topbar[data-skin="central"] .domain-badge[data-dom="admin"]     { color: var(--dom-admin);     background: var(--dom-admin-soft); }
.topbar[data-skin="central"] .domain-badge[data-dom="contenido"] { color: var(--dom-contenido); background: var(--dom-contenido-soft); }
.topbar[data-skin="central"] .domain-badge[data-dom="odoo"]      { color: var(--dom-odoo);      background: var(--dom-odoo-soft); }

/* ============================================================
   "CENTRAL" SKIN — TANDA 2a: Mis Tareas (CRM). Cumple
   standards-diseno-central.md. El sistema qc-* (qc-page/qc-card/qc-col/
   qc-chip/qc-btn) ya consume custom properties (--bg-card/--text/--accent/
   etc.) — igual que el marco (Tanda 1b), acá se redeclaran esas variables
   apuntando a los tokens canónicos en vez de reescribir los componentes.
   --accent-red/--accent-yellow (usados para "vencida"/SLA) se redeclaran
   a --bad/--warn (semántica de ESTADO, standards §1). El resto de la
   paleta accent-* (verde/cian/azul/púrpura/naranja) es el "código de
   color con significado" del tipo de tarea (_taskKind en app.js,
   preexistente y documentado ahí) — no es identidad de dominio, queda
   fuera de este alcance para no reescribir esa lógica de negocio.
   ============================================================ */
#page-mis-tareas[data-skin="central"] {
    background: var(--bg);
    --bg-card:        var(--card);
    --bg-card-hover:  color-mix(in oklch, var(--card) 94%, var(--ink) 6%);
    --bg-input:       var(--card);
    --border:         var(--line);
    --border-light:   var(--line);
    --border-strong:  var(--line-2);
    --text:           var(--ink);
    --text-secondary: var(--ink-2);
    --text-muted:     var(--ink-3);
    --accent:         var(--go);
    --accent-hover:   var(--go-ink);
    --accent-soft:    var(--go-soft);
    --accent-red:     var(--bad);
    --accent-yellow:  var(--warn);
    --shadow-sm: 0 1px 2px oklch(25% 0.02 330 / 0.05);
    --shadow:    0 1px 3px oklch(25% 0.02 330 / 0.07), 0 1px 2px oklch(25% 0.02 330 / 0.05);
    font-family: var(--sans);
}
/* Tareas de Garantías mostradas dentro de Mis Tareas: domchip cruzado
   (identidad del dominio de origen, standards §1) en vez de texto plano. */
#page-mis-tareas[data-skin="central"] .mt-gar-hint {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    color: var(--dom-garantias);
    background: var(--dom-garantias-soft);
}
/* Contadores: tabular-nums (standards §2) sin tocar los render de app.js. */
#page-mis-tareas[data-skin="central"] .qc-col-n,
#page-mis-tareas[data-skin="central"] .qc-card-n,
#page-mis-tareas[data-skin="central"] .qc-card-total {
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   "CENTRAL" SKIN — TANDA 2b: Bandeja (CRM). Cumple
   standards-diseno-central.md. El sistema qb-* (bandeja2.css) ya usa
   custom properties — mismo patron de redeclaracion que Mis Tareas
   (Tanda 2a) y el marco (Tanda 1b).
   Identidad de canal (WhatsApp verde / Instagram magenta / Messenger
   azul / Email gris — objeto CH en app.js) queda intacta a proposito:
   son colores de MARCA de terceros reconocidos por el usuario, no
   identidad de dominio de Quantum — remapearlos a un solo color
   confundiria "que canal es" en vez de aclararlo. El estado de
   conversacion (EST en app.js: nuevo/en curso/esperando/cerrado/
   derivado) tambien queda con su paleta rica preexistente — es
   semantica de ESTADO propia, ya separada de la identidad de dominio.
   ============================================================ */
#page-crm-bandeja2[data-skin="central"] {
    background: var(--bg);
    --bg-card:        var(--card);
    --bg-card-hover:  color-mix(in oklch, var(--card) 94%, var(--ink) 6%);
    --bg-input:       var(--card);
    --border:         var(--line);
    --border-light:   var(--line);
    --border-strong:  var(--line-2);
    --text:           var(--ink);
    --text-secondary: var(--ink-2);
    --text-muted:     var(--ink-3);
    --accent:         var(--go);
    --accent-hover:   var(--go-ink);
    --accent-soft:    var(--go-soft);
    --accent-red:     var(--bad);
    --accent-yellow:  var(--warn);
    --shadow-sm: 0 1px 2px oklch(25% 0.02 330 / 0.05);
    --shadow:    0 1px 3px oklch(25% 0.02 330 / 0.07), 0 1px 2px oklch(25% 0.02 330 / 0.05);
    font-family: var(--sans);
}
/* Navegacion entre sub-vistas (Inbox/Cola de salida/Metricas) y filtros
   rapidos de la lista: identidad de dominio CRM (azul), no accion —
   standards §1 ("identidad... en menu, chips de items"). El boton
   primario real (Enviar) sigue en verde de ACCION via --accent arriba. */
#page-crm-bandeja2[data-skin="central"] .qb-tab.active svg,
#page-crm-bandeja2[data-skin="central"] .qb-chip.active {
    color: var(--dom-crm);
}
#page-crm-bandeja2[data-skin="central"] .qb-chip.active {
    background: var(--dom-crm-soft);
    border-color: var(--dom-crm-soft);
}

/* ============================================================
   "CENTRAL" SKIN — TANDA 2c: Pipeline (CRM). Cumple
   standards-diseno-central.md. Mismo patron de redeclaracion que 2a/2b.
   #crm2-drawer vive a nivel raiz de <body> (se abre desde cualquier
   pagina), no es descendiente de #page-crm-pipeline — necesita su
   propio data-skin="central" + el mismo bloque de variables para que
   el detalle del deal tambien quede tokenizado.
   El color por ETAPA (STAGE_COLOR en app.js: ambar/azul/violeta/cian/
   verde/teal/gris/rojo) queda intacto a proposito, mismo criterio que
   el kind-legend de Mis Tareas: es semantica de estado del pedido
   dentro del kanban, no identidad de dominio. */
#page-crm-pipeline[data-skin="central"] { background: var(--bg); }
#page-crm-pipeline[data-skin="central"],
#crm2-drawer[data-skin="central"] {
    --bg-card:        var(--card);
    --bg-card-hover:  color-mix(in oklch, var(--card) 94%, var(--ink) 6%);
    --bg-input:       var(--card);
    --border:         var(--line);
    --border-light:   var(--line);
    --border-strong:  var(--line-2);
    --text:           var(--ink);
    --text-secondary: var(--ink-2);
    --text-muted:     var(--ink-3);
    --accent:         var(--go);
    --accent-hover:   var(--go-ink);
    --accent-soft:    var(--go-soft);
    --accent-red:     var(--bad);
    --accent-yellow:  var(--warn);
    --shadow-sm: 0 1px 2px oklch(25% 0.02 330 / 0.05);
    --shadow:    0 1px 3px oklch(25% 0.02 330 / 0.07), 0 1px 2px oklch(25% 0.02 330 / 0.05);
    font-family: var(--sans);
}
/* Contadores del kanban: tabular-nums (standards §2). */
#page-crm-pipeline[data-skin="central"] .qc-col-n,
#page-crm-pipeline[data-skin="central"] .qc-card-n,
#page-crm-pipeline[data-skin="central"] .qc-card-total,
#crm2-drawer[data-skin="central"] .pl-head-total {
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   "CENTRAL" SKIN — TANDA 4: Operaciones (Compras, Presupuesto, Stock,
   Órdenes, Pedidos internos, Armado de PC, Búsqueda de productos).
   Cumple standards-diseno-central.md. Nuevo régimen (JUEZ 2026-07-02):
   tandas por MÓDULO — estas páginas comparten los componentes
   compartidos .card/.data-table/.cs-hero/.gar-hero/.gar-kpi/.pn-kpi
   (Armado de PC via .qc-page de crm.css) que ya consumen custom
   properties, así que entran juntas en un solo bloque redeclarando esas
   variables, mismo patrón que CRM (Tanda 2). Estos componentes también
   los usa Garantías (fuera de esta tanda, sub-tanda propia de CRM) — el
   scope por #page-id[data-skin="central"] hace que Garantías no se
   toque. "Clientes TN" (mencionada en el pedido original del juez para
   Operaciones) queda FUERA de este PR a proposito: vive en la seccion
   Tiendanube (eyebrow "Tiendanube · CRM", componentes tn-*), mismo
   sistema que el resto de Catálogo/TN — se migra en Tanda 5 para no
   mezclar dominios (--dom-oper vs --dom-catalogo). Ver nota en el
   checklist de cobertura.
   Paleta accent-* de tipo/estado (verde/azul/cian/amarillo/rojo en
   gar-kpi-warn/info/ok/alert, pn-kpi-warn/info/ok) queda intacta a
   propósito: es semántica de ESTADO, no identidad de dominio.
   ============================================================ */
#page-compras[data-skin="central"],
#page-presupuesto[data-skin="central"],
#page-stock[data-skin="central"],
#page-ordenes[data-skin="central"],
#page-pedidos[data-skin="central"],
#page-ventas[data-skin="central"],
#page-busqueda-productos[data-skin="central"] {
    background: var(--bg);
    --bg-card:        var(--card);
    --bg-card-hover:  color-mix(in oklch, var(--card) 94%, var(--ink) 6%);
    --bg-input:       var(--card);
    --border:         var(--line);
    --border-light:   var(--line);
    --border-strong:  var(--line-2);
    --text:           var(--ink);
    --text-secondary: var(--ink-2);
    --text-muted:     var(--ink-3);
    --accent:         var(--go);
    --accent-hover:   var(--go-ink);
    --accent-soft:    var(--go-soft);
    --accent-red:     var(--bad);
    --accent-yellow:  var(--warn);
    --shadow-sm: 0 1px 2px oklch(25% 0.02 330 / 0.05);
    --shadow:    0 1px 3px oklch(25% 0.02 330 / 0.07), 0 1px 2px oklch(25% 0.02 330 / 0.05);
    --font-serif: var(--sans);
    font-family: var(--sans);
}
/* Sub-tabs de Compras (Catalogo/Comparador/Presupuesto): identidad de
   dominio Operaciones, no acción — standards §1. El botón primario real
   (Actualizar) sigue en verde de ACCION via --accent arriba. */
#page-compras[data-skin="central"] .compras-tab:hover {
    background: var(--bg-card-hover);
}
#page-compras[data-skin="central"] .compras-tab.active {
    color: var(--dom-oper);
    border-bottom-color: var(--dom-oper);
}
/* KPI "Pedidos totales" (filtro sin tipo semántico): identidad de
   dominio en la selección, igual que los chips de filtro de Bandeja. */
#page-pedidos[data-skin="central"] .pn-kpi.active {
    border-color: var(--dom-oper);
    background: var(--dom-oper-soft);
}
/* Wizard de Armado de PC: círculo de paso y texto sobre --accent
   (verde) hardcodeaban blanco/rgba(255,255,255,..) fijo — se
   reemplazan por --text-inverse (mismo token que .btn-primary usa
   sobre --accent en toda la app ya migrada) y un overlay relativo al
   propio color del paso, adaptable a ambos temas. */
#page-ventas[data-skin="central"] .wizard-step-num {
    background: color-mix(in oklch, currentColor 10%, transparent);
}
#page-ventas[data-skin="central"] .wizard-step.current,
#page-ventas[data-skin="central"] .wizard-step.filled.current {
    color: var(--text-inverse);
}
#page-ventas[data-skin="central"] .wizard-step.current .wizard-step-num,
#page-ventas[data-skin="central"] .wizard-step.filled.current .wizard-step-num {
    background: color-mix(in oklch, var(--text-inverse) 25%, transparent);
    color: var(--text-inverse);
}
#page-ventas[data-skin="central"] .wizard-step.filled .wizard-step-num {
    color: var(--text-inverse);
}
#page-ventas[data-skin="central"] .wizard-subchip.active {
    color: var(--text-inverse);
}
#page-ventas[data-skin="central"] .wizard-table tbody td {
    border-bottom: 1px solid var(--border-light);
}
#page-ventas[data-skin="central"] .wizard-row.selected td {
    background: color-mix(in oklch, var(--accent-green) 8%, transparent);
}

/* ============================================================
   "CENTRAL" SKIN — TANDA 5: Catálogo / Tiendanube (Productos,
   Proveedores, Exportar a Odoo, Dashboard TN, Pedidos TN, Clientes TN,
   Catálogo TN). Cumple standards-diseno-central.md. Mismo patrón que
   Operaciones (Tanda 4): estas 7 páginas comparten componentes
   (.cs-hero/.cs-stats/.cs-panel/.cs-card/.qc-table/.qc-modal/.tn-*) que
   ya consumen custom properties, así que entran juntas en un solo
   bloque. Identidad de dominio Catálogo (--dom-catalogo) reservada para
   cuando haya navegación/chips propios de esta tanda — hoy ninguna
   página tiene esa sub-navegación (a diferencia de Compras en Tanda 4),
   así que no hay overrides de identidad que agregar todavía.
   ============================================================ */
#page-productos[data-skin="central"],
#page-proveedores[data-skin="central"],
#page-exportar-odoo[data-skin="central"],
#page-tn-dashboard[data-skin="central"],
#page-tn-pedidos[data-skin="central"],
#page-tn-clientes[data-skin="central"],
#page-tn-catalogo[data-skin="central"] {
    background: var(--bg);
    --bg-card:        var(--card);
    --bg-card-hover:  color-mix(in oklch, var(--card) 94%, var(--ink) 6%);
    --bg-input:       var(--card);
    --border:         var(--line);
    --border-light:   var(--line);
    --border-strong:  var(--line-2);
    --text:           var(--ink);
    --text-secondary: var(--ink-2);
    --text-muted:     var(--ink-3);
    --accent:         var(--go);
    --accent-hover:   var(--go-ink);
    --accent-soft:    var(--go-soft);
    --accent-red:     var(--bad);
    --accent-yellow:  var(--warn);
    --shadow-sm: 0 1px 2px oklch(25% 0.02 330 / 0.05);
    --shadow:    0 1px 3px oklch(25% 0.02 330 / 0.07), 0 1px 2px oklch(25% 0.02 330 / 0.05);
    --font-serif: var(--sans);
    font-family: var(--sans);
}
/* Chips de estado de integración de Proveedores (REST API/SOAP/Scraping):
   semántica de ESTADO (ok/atención), no identidad — background rgba
   hardcodeado -> color-mix() sobre los mismos accent-green/yellow. */
#page-proveedores[data-skin="central"] .cs-chip-ok {
    background: color-mix(in oklch, var(--accent-green) 15%, transparent);
}
#page-proveedores[data-skin="central"] .cs-chip-warn {
    background: color-mix(in oklch, var(--accent-yellow) 18%, transparent);
}
/* Badges de estado de pago/envío/orden: la funcion _badge() de app.js
   las usa tanto en Pedidos TN (tabla + modal detalle) como en el detalle
   de pedido dentro de Clientes TN — mismo criterio, hex+rgba fijos ->
   color-mix() sobre los tokens de estado. */
#page-tn-pedidos[data-skin="central"] .tn-badge-ok,
#page-tn-clientes[data-skin="central"] .tn-badge-ok {
    background: color-mix(in oklch, var(--accent-green) 15%, transparent);
    color: var(--accent-green);
    border-color: color-mix(in oklch, var(--accent-green) 40%, transparent);
}
#page-tn-pedidos[data-skin="central"] .tn-badge-warn,
#page-tn-clientes[data-skin="central"] .tn-badge-warn {
    background: color-mix(in oklch, var(--accent-yellow) 15%, transparent);
    color: var(--accent-yellow);
    border-color: color-mix(in oklch, var(--accent-yellow) 40%, transparent);
}
#page-tn-pedidos[data-skin="central"] .tn-badge-err,
#page-tn-clientes[data-skin="central"] .tn-badge-err {
    background: color-mix(in oklch, var(--accent-red) 15%, transparent);
    color: var(--accent-red);
    border-color: color-mix(in oklch, var(--accent-red) 40%, transparent);
}

/* ============================================================
   "CENTRAL" SKIN — TANDA 6: Administración / Sistema (Seguridad,
   Empleados, Análisis del Ciclo, Salud Scraping, Errores, Reportes
   ejecutivos, API Keys, Scheduler, Sistema). Cumple
   standards-diseno-central.md. Mismo régimen por módulo: un solo
   bloque de redeclaración de tokens para las 9 páginas. A diferencia
   de Tanda 5, varias de estas páginas SÍ tienen sub-navegación propia
   (tabs de Sistema) -> identidad --dom-admin (neutro berenjena) ahí.
   Varias tenían mucho más color hardcodeado que Tanda 4/5 (paneles
   pensados originalmente solo para tema oscuro) — cada bloque abajo
   documenta a qué token semántico corresponde cada hex/rgba viejo.
   ============================================================ */
#page-seguridad[data-skin="central"],
#page-admin-usuarios[data-skin="central"],
#page-ciclo-analytics[data-skin="central"],
#page-scraper-health[data-skin="central"],
#page-errores[data-skin="central"],
#page-reportes[data-skin="central"],
#page-api-keys[data-skin="central"],
#page-scheduler[data-skin="central"],
#page-sistema[data-skin="central"] {
    background: var(--bg);
    --bg-card:        var(--card);
    --bg-card-hover:  color-mix(in oklch, var(--card) 94%, var(--ink) 6%);
    --bg-input:       var(--card);
    --border:         var(--line);
    --border-light:   var(--line);
    --border-strong:  var(--line-2);
    --text:           var(--ink);
    --text-secondary: var(--ink-2);
    --text-muted:     var(--ink-3);
    --accent:         var(--go);
    --accent-hover:   var(--go-ink);
    --accent-soft:    var(--go-soft);
    --accent-red:     var(--bad);
    --accent-yellow:  var(--warn);
    --shadow-sm: 0 1px 2px oklch(25% 0.02 330 / 0.05);
    --shadow:    0 1px 3px oklch(25% 0.02 330 / 0.07), 0 1px 2px oklch(25% 0.02 330 / 0.05);
    --font-serif: var(--sans);
    font-family: var(--sans);
}

/* ============================================================
   "CENTRAL" SKIN — TANDA 7: páginas sueltas (Inicio, Dashboard).
   Cumple standards-diseno-central.md. Última tanda del inventario base
   de ux-nav-propuesta-menu.md §1 — se benefician de que el resto de la
   app ya tenga tokens Central para mostrar datos consistentes (KPIs,
   accesos rápidos a otras páginas).
   ============================================================ */
#page-inicio[data-skin="central"],
#page-dashboard[data-skin="central"] {
    background: var(--bg);
    --bg-card:        var(--card);
    --bg-card-hover:  color-mix(in oklch, var(--card) 94%, var(--ink) 6%);
    --bg-input:       var(--card);
    --border:         var(--line);
    --border-light:   var(--line);
    --border-strong:  var(--line-2);
    --text:           var(--ink);
    --text-secondary: var(--ink-2);
    --text-muted:     var(--ink-3);
    --accent:         var(--go);
    --accent-hover:   var(--go-ink);
    --accent-soft:    var(--go-soft);
    --accent-red:     var(--bad);
    --accent-yellow:  var(--warn);
    --shadow-sm: 0 1px 2px oklch(25% 0.02 330 / 0.05);
    --shadow:    0 1px 3px oklch(25% 0.02 330 / 0.07), 0 1px 2px oklch(25% 0.02 330 / 0.05);
    --font-serif: var(--sans);
    font-family: var(--sans);
}

/* --- Seguridad: badges/QR/recovery-box del panel 2FA, todos hex/rgba
   fijos asumiendo tema oscuro fijo (semántica de ESTADO, no identidad)
   -> color-mix() sobre accent-green/yellow/red/blue. El fondo blanco
   del QR (.sec-qr) queda intacto a propósito: un QR necesita alto
   contraste para poder escanearse, es requisito funcional, no de
   marca — no depende del tema. */
#page-seguridad[data-skin="central"] .sec-badge-ok {
    background: color-mix(in oklch, var(--accent-green) 15%, transparent);
    color: var(--accent-green);
}
#page-seguridad[data-skin="central"] .sec-badge-warn {
    background: color-mix(in oklch, var(--accent-yellow) 15%, transparent);
    color: var(--accent-yellow);
}
#page-seguridad[data-skin="central"] .sec-badge-muted {
    background: color-mix(in oklch, var(--text-muted) 15%, transparent);
}
#page-seguridad[data-skin="central"] .sec-badge-danger {
    background: color-mix(in oklch, var(--accent-red) 15%, transparent);
}
#page-seguridad[data-skin="central"] .sec-warn {
    background: color-mix(in oklch, var(--accent-yellow) 10%, transparent);
    border-color: color-mix(in oklch, var(--accent-yellow) 30%, transparent);
    color: var(--accent-yellow);
}
#page-seguridad[data-skin="central"] .sec-recovery-box {
    background: color-mix(in oklch, var(--accent-blue) 5%, transparent);
}
#page-seguridad[data-skin="central"] .sec-recovery-title {
    color: var(--accent-yellow);
}

/* --- Empleados: sin color hardcodeado propio (solo .modal-backdrop
   compartido con el resto de la app, fuera de alcance). --- */

/* --- Salud Scraping: KPIs por estado (ok/warn/fail/stale) + badges +
   rates, todo hex/rgba fijo -> color-mix()/tokens. .sh-badge/.sh-rate
   no están scopeadas por id en el CSS original (a diferencia de
   .ap-kpi-*), pero solo se usan dentro de #sh-tbody/#sh-history-panel,
   ambos exclusivos de esta página. */
#page-scraper-health[data-skin="central"] .ap-kpi-ok    { border-color: color-mix(in oklch, var(--accent-green) 27%, transparent); }
#page-scraper-health[data-skin="central"] .ap-kpi-ok    .ap-kpi-value { color: var(--accent-green); }
#page-scraper-health[data-skin="central"] .ap-kpi-warn  { border-color: color-mix(in oklch, var(--accent-yellow) 27%, transparent); }
#page-scraper-health[data-skin="central"] .ap-kpi-warn  .ap-kpi-value { color: var(--accent-yellow); }
#page-scraper-health[data-skin="central"] .ap-kpi-fail  { border-color: color-mix(in oklch, var(--accent-red) 53%, transparent); }
#page-scraper-health[data-skin="central"] .ap-kpi-fail  .ap-kpi-value { color: var(--accent-red); }
#page-scraper-health[data-skin="central"] .ap-kpi-stale { border-color: color-mix(in oklch, var(--text-muted) 53%, transparent); }
#page-scraper-health[data-skin="central"] .ap-kpi-stale .ap-kpi-value { color: var(--text-muted); }
#page-scraper-health[data-skin="central"] .sh-badge.sh-ok    { background: color-mix(in oklch, var(--accent-green) 13%, transparent); color: var(--accent-green); border-color: color-mix(in oklch, var(--accent-green) 27%, transparent); }
#page-scraper-health[data-skin="central"] .sh-badge.sh-warn  { background: color-mix(in oklch, var(--accent-yellow) 13%, transparent); color: var(--accent-yellow); border-color: color-mix(in oklch, var(--accent-yellow) 27%, transparent); }
#page-scraper-health[data-skin="central"] .sh-badge.sh-fail  { background: color-mix(in oklch, var(--accent-red) 13%, transparent); color: var(--accent-red); border-color: color-mix(in oklch, var(--accent-red) 53%, transparent); }
#page-scraper-health[data-skin="central"] .sh-badge.sh-stale { background: color-mix(in oklch, var(--text-muted) 13%, transparent); color: var(--text-muted); border-color: color-mix(in oklch, var(--text-muted) 40%, transparent); }
#page-scraper-health[data-skin="central"] .sh-rate.sh-ok    { color: var(--accent-green); }
#page-scraper-health[data-skin="central"] .sh-rate.sh-warn  { color: var(--accent-yellow); }
#page-scraper-health[data-skin="central"] .sh-rate.sh-fail,
#page-scraper-health[data-skin="central"] .sh-error-cell,
#page-scraper-health[data-skin="central"] .sh-history-err { color: var(--accent-red); }
#page-scraper-health[data-skin="central"] .sh-rate.sh-stale { color: var(--text-muted); }

/* --- Errores: chips backend/frontend (identidad de ORIGEN del error,
   no de dominio — se mantiene la distinción semántica ámbar/celeste
   pero sobre tokens) + contador de "veces" + botón resolver. --- */
#page-errores[data-skin="central"] .ap-kpi-fail { border-color: color-mix(in oklch, var(--accent-red) 53%, transparent); }
#page-errores[data-skin="central"] .ap-kpi-fail .ap-kpi-value { color: var(--accent-red); }
#page-errores[data-skin="central"] .err-backend { background: color-mix(in oklch, var(--accent-yellow) 16%, transparent); color: var(--accent-yellow); }
#page-errores[data-skin="central"] .err-frontend { background: color-mix(in oklch, var(--accent-cyan) 18%, transparent); color: var(--accent-cyan); }
#page-errores[data-skin="central"] .err-veces-high { background: color-mix(in oklch, var(--accent-red) 13%, transparent); color: var(--accent-red); }
#page-errores[data-skin="central"] .err-veces-mid { background: color-mix(in oklch, var(--accent-yellow) 13%, transparent); color: var(--accent-yellow); }
#page-errores[data-skin="central"] .err-resolver:hover { border-color: color-mix(in oklch, var(--accent-green) 53%, transparent); color: var(--accent-green); background: color-mix(in oklch, var(--accent-green) 7%, transparent); }

/* --- Reportes ejecutivos: sin color hardcodeado propio (cards
   renderizadas por _repRender() ya usan clases genéricas). --- */

/* --- Análisis del Ciclo: bloques/pills/banner pensados solo para
   tema oscuro (colores de texto claro fijos tipo #f3f4f6) -> tokens.
   [id^="page-analisis-"] (Tanda 3, Mercado) no matchea "page-ciclo-
   analytics" -- ids distintos, sin colisión. */
#page-ciclo-analytics[data-skin="central"] .ap-section-block {
    background: var(--bg-card-hover);
    border-color: var(--border-light);
}
#page-ciclo-analytics[data-skin="central"] .ap-section-title {
    color: var(--text);
}
#page-ciclo-analytics[data-skin="central"] .ap-warnings-banner {
    background: color-mix(in oklch, var(--accent-yellow) 8%, transparent);
    border-left-color: var(--accent-yellow);
}
#page-ciclo-analytics[data-skin="central"] .ap-warnings-banner h3 {
    color: var(--accent-yellow);
}
#page-ciclo-analytics[data-skin="central"] .ap-warnings-banner ul {
    color: var(--text-secondary);
}
#page-ciclo-analytics[data-skin="central"] .ca-pill-ok    { background: color-mix(in oklch, var(--accent-green) 18%, transparent); color: var(--accent-green); }
#page-ciclo-analytics[data-skin="central"] .ca-pill-warn  { background: color-mix(in oklch, var(--accent-yellow) 18%, transparent); color: var(--accent-yellow); }
#page-ciclo-analytics[data-skin="central"] .ca-pill-fail  { background: color-mix(in oklch, var(--accent-red) 18%, transparent); color: var(--accent-red); }
#page-ciclo-analytics[data-skin="central"] .ca-pill-stale { background: color-mix(in oklch, var(--text-muted) 25%, transparent); color: var(--text-muted); }
#page-ciclo-analytics[data-skin="central"] .ap-kpi-warn .ap-kpi-value { color: var(--accent-yellow); }
#page-ciclo-analytics[data-skin="central"] .ap-kpi-fail .ap-kpi-value { color: var(--accent-red); }

/* --- API Keys: tabla + badges de estado + caja de plaintext (tenía un
   par manual [data-theme="light"] separado, ya no hace falta con
   tokens que cambian solos) + fuente Inter -> Manrope. --- */
#page-api-keys[data-skin="central"] .ak-table {
    font-family: var(--sans);
}
#page-api-keys[data-skin="central"] .ak-table tbody tr:hover td {
    background: var(--bg-card-hover);
}
#page-api-keys[data-skin="central"] .ak-status-active {
    background: color-mix(in oklch, var(--accent-green) 15%, transparent);
    color: var(--accent-green);
}
#page-api-keys[data-skin="central"] .ak-status-revoked {
    background: color-mix(in oklch, var(--accent-red) 15%, transparent);
    color: var(--accent-red);
}
#page-api-keys[data-skin="central"] .ak-status-disabled {
    background: color-mix(in oklch, var(--accent-yellow) 15%, transparent);
    color: var(--accent-yellow);
}
#page-api-keys[data-skin="central"] .ak-action-btn.danger:hover {
    border-color: var(--accent-red);
    color: var(--accent-red);
    background: color-mix(in oklch, var(--accent-red) 5%, transparent);
}
#page-api-keys[data-skin="central"] .ak-plaintext-box {
    background: var(--bg-card);
    border-color: var(--accent);
    color: var(--text);
}
#page-api-keys[data-skin="central"] .ak-plaintext-value {
    background: var(--accent-soft);
}
#page-api-keys[data-skin="central"] .ak-warning {
    color: var(--accent-yellow);
}

/* --- Scheduler: badges de estado de job + historial + barra de
   progreso, hex/rgba fijos -> tokens. --- */
#page-scheduler[data-skin="central"] .sched-badge-idle { border-color: var(--border); }
#page-scheduler[data-skin="central"] .sched-badge-ok { color: var(--accent-green); }
#page-scheduler[data-skin="central"] .sched-badge-running { color: var(--accent-blue); }
#page-scheduler[data-skin="central"] .sched-badge-warn { background: color-mix(in oklch, var(--accent-yellow) 15%, transparent); color: var(--accent-yellow); border-color: color-mix(in oklch, var(--accent-yellow) 30%, transparent); }
#page-scheduler[data-skin="central"] .sched-badge-error { color: var(--accent-red); }
#page-scheduler[data-skin="central"] .sched-badge-paused { background: color-mix(in oklch, var(--text-muted) 15%, transparent); color: var(--text-muted); border-color: color-mix(in oklch, var(--text-muted) 30%, transparent); }
#page-scheduler[data-skin="central"] .sched-error-box,
#page-scheduler[data-skin="central"] .sched-hist-errmsg { color: var(--accent-red); }
#page-scheduler[data-skin="central"] .sched-hist-err { background: color-mix(in oklch, var(--accent-red) 8%, transparent); color: var(--accent-red); }
#page-scheduler[data-skin="central"] .sched-hist-run { background: color-mix(in oklch, var(--accent-blue) 8%, transparent); color: var(--accent-blue); }
#page-scheduler[data-skin="central"] .sched-progress { background: color-mix(in oklch, var(--accent-blue) 6%, transparent); border-color: color-mix(in oklch, var(--accent-blue) 25%, transparent); }
#page-scheduler[data-skin="central"] .sched-progress-phase { color: var(--accent-blue); }

/* --- Sistema: tabs de sub-navegación propia -> identidad --dom-admin
   (standards §1, mismo criterio que los tabs de Compras/Bandeja).
   Badges/estado de sprints/roadmap: hex fijos -> tokens de estado. --- */
#page-sistema[data-skin="central"] .sistema-tab.active {
    background: var(--dom-admin);
    border-color: var(--dom-admin);
    color: var(--text-inverse);
}
#page-sistema[data-skin="central"] .sistema-badge.ok {
    background: color-mix(in oklch, var(--accent-green) 15%, transparent);
    color: var(--accent-green);
}
#page-sistema[data-skin="central"] .sistema-badge.warn {
    background: color-mix(in oklch, var(--accent-yellow) 15%, transparent);
    color: var(--accent-yellow);
}
#page-sistema[data-skin="central"] .sistema-badge.info {
    background: color-mix(in oklch, var(--accent-cyan) 15%, transparent);
}
#page-sistema[data-skin="central"] .sistema-badge.muted {
    background: color-mix(in oklch, var(--text-muted) 15%, transparent);
    color: var(--text-muted);
}
#page-sistema[data-skin="central"] .sistema-sprint.estado-completado .sistema-sprint-num {
    border-color: var(--accent-green);
    color: var(--accent-green);
}
#page-sistema[data-skin="central"] .sistema-archivo-row.missing code {
    color: var(--accent-red);
}
/* Colores inline generados por _renderSistemaExportar()/_renderSistemaDb()
   en app.js: ya apuntan a var(--accent-*) (ver commit), no a hex —
   nada que scopear acá aparte del bloque base de arriba. */

/* Badge de estado de Salud Scraping en el rail lateral (#sh-sidebar-badge):
   vive en aside.sidebar, no dentro de #page-scraper-health -- se scopea
   por el data-skin="central" que el rail ya trae desde Tanda 1. */
aside.sidebar[data-skin="central"] .nav-badge-warn {
    background: var(--accent-yellow);
    color: var(--text-inverse);
}
aside.sidebar[data-skin="central"] .nav-badge-fail {
    background: var(--accent-red);
    color: var(--text-inverse);
}

/* --- Inicio: icono de "Empezá por acá" (fondo --accent, texto blanco
   fijo) -> var(--text-inverse), mismo token que .btn-primary sobre
   --accent en toda la app ya migrada. --- */
#page-inicio[data-skin="central"] .qc-act2-ic {
    color: var(--text-inverse);
}
/* --- Dashboard: sombra de hover de los KPI, rgba fijo -> el token de
   sombra ya theme-aware que usa el resto de .kpi en la app vieja. --- */
#page-dashboard[data-skin="central"] .kpi:hover {
    box-shadow: var(--shadow-lg);
}

/* ============================================================
   "CENTRAL" SKIN — TANDA 7a (parte 1 de la última tanda, sub-dividida
   por volumen): páginas sueltas de CRM con markup simple (.qc-page de
   crm.css, ya migrado en Tanda 2) — Cartera, Equipo, Contactos,
   Insights, Objetivos, Responsables, Reportes del Agente IA.
   Quedan para una sub-tanda 7a2 las páginas con sistemas de CSS-en-JS
   propios y mas complejos (Reglas, Garantías/RMA kanban, Asignador,
   Tickets, Chat, Simulador) y para 7b el resto de Tanda 3 (Mercado/
   Buscar/Comparador/Competidores/Alertas/Historial), Acceso Denegado y
   los overlays globales (QUA-232).
   ============================================================ */
#page-cartera[data-skin="central"],
#page-equipo[data-skin="central"],
#page-crm-contactos[data-skin="central"],
#page-crm-insights[data-skin="central"],
#page-crm-objetivos[data-skin="central"],
#page-crm-responsables[data-skin="central"],
#page-crm-ia-reportes[data-skin="central"] {
    background: var(--bg);
    --bg-card:        var(--card);
    --bg-card-hover:  color-mix(in oklch, var(--card) 94%, var(--ink) 6%);
    --bg-input:       var(--card);
    --border:         var(--line);
    --border-light:   var(--line);
    --border-strong:  var(--line-2);
    --text:           var(--ink);
    --text-secondary: var(--ink-2);
    --text-muted:     var(--ink-3);
    --accent:         var(--go);
    --accent-hover:   var(--go-ink);
    --accent-soft:    var(--go-soft);
    --accent-red:     var(--bad);
    --accent-yellow:  var(--warn);
    --shadow-sm: 0 1px 2px oklch(25% 0.02 330 / 0.05);
    --shadow:    0 1px 3px oklch(25% 0.02 330 / 0.07), 0 1px 2px oklch(25% 0.02 330 / 0.05);
    --font-serif: var(--sans);   /* gate (juez): .qc-page titula con var(--font-serif) — sin este remap cae al serif global (Manrope unica, §2) */
    font-family: var(--sans);
}
/* Avatares con iniciales (.qc-av, hash de color por username -- ya
   usa var(--accent-*) en el background): el texto blanco fijo -> el
   mismo token que .btn-primary usa sobre --accent en toda la app. */
#page-equipo[data-skin="central"] .qc-av,
#page-crm-insights[data-skin="central"] .qc-av,
#page-crm-responsables[data-skin="central"] .qc-av {
    color: var(--text-inverse);
}

/* ============================================================
   "CENTRAL" SKIN — TANDA 7a2 (segunda sub-tanda de la última tanda):
   Garantías (`#page-garantias`, legacy gar-* kanban), Garantías/RMA
   (`#page-crm-garantias`, kanban nuevo dentro de _CRM2) y Reglas.
   Quedan para 7a3 Asignador/Tickets/Chat/Simulador — sistemas de
   CSS-en-JS propios inyectados dinámicamente (notificaciones, audio,
   lead-pop) que se entrelazan con código de otras features en el mismo
   archivo, necesitan una auditoría más cuidadosa antes de tocar CSS.
   ============================================================ */
#page-garantias[data-skin="central"],
#page-crm-garantias[data-skin="central"],
#page-reglas[data-skin="central"] {
    background: var(--bg);
    --bg-card:        var(--card);
    --bg-card-hover:  color-mix(in oklch, var(--card) 94%, var(--ink) 6%);
    --bg-sidebar:     color-mix(in oklch, var(--card) 92%, var(--ink) 8%);
    --bg-input:       var(--card);
    --border:         var(--line);
    --border-light:   var(--line);
    --border-strong:  var(--line-2);
    --text:           var(--ink);
    --text-secondary: var(--ink-2);
    --text-muted:     var(--ink-3);
    --accent:         var(--go);
    --accent-hover:   var(--go-ink);
    --accent-soft:    var(--go-soft);
    --accent-red:     var(--bad);
    --accent-yellow:  var(--warn);
    --shadow-sm: 0 1px 2px oklch(25% 0.02 330 / 0.05);
    --shadow:    0 1px 3px oklch(25% 0.02 330 / 0.07), 0 1px 2px oklch(25% 0.02 330 / 0.05);
    --font-serif: var(--sans);
    font-family: var(--sans);
}
/* KPI "Todos" (filtro sin tipo semántico, standards §1): identidad de
   dominio Garantías (coral) en vez de accent verde, mismo criterio que
   los chips de filtro de Bandeja/Compras. El resto de gar-kpi-warn/ok
   (semántica de ESTADO) queda intacto. */
#page-garantias[data-skin="central"] .gar-kpi.active {
    border-color: var(--dom-garantias);
    background: var(--dom-garantias-soft);
}

/* ============================================================
   "CENTRAL" SKIN — TANDA 7a3 (última sub-tanda del bloque CRM):
   Asignador, Tickets, Chat, Simulador, Testeo ST, Actividades. La
   mayoría de los hardcodeos de estas páginas vivían en CSS-en-JS
   inyectado dinámicamente (Asignador/Tickets/Chat/Simulador tienen su
   propio `_css()`/`<style>` con selectores exclusivos de cada uno,
   ya corregidos ahí mismo en el commit de JS) — este bloque solo cubre
   el mapeo de variables + los pocos hardcodeos que vivían en
   styles.css (Testeo ST).
   ============================================================ */
#page-asignador[data-skin="central"],
#page-tickets[data-skin="central"],
#page-chat[data-skin="central"],
#page-simulador[data-skin="central"],
#page-testeo-st[data-skin="central"],
#page-crm-actividades[data-skin="central"] {
    background: var(--bg);
    --bg-card:        var(--card);
    --bg-card-hover:  color-mix(in oklch, var(--card) 94%, var(--ink) 6%);
    --bg-input:       var(--card);
    --border:         var(--line);
    --border-light:   var(--line);
    --border-strong:  var(--line-2);
    --text:           var(--ink);
    --text-secondary: var(--ink-2);
    --text-muted:     var(--ink-3);
    --accent:         var(--go);
    --accent-hover:   var(--go-ink);
    --accent-soft:    var(--go-soft);
    --accent-red:     var(--bad);
    --accent-yellow:  var(--warn);
    --shadow-sm: 0 1px 2px oklch(25% 0.02 330 / 0.05);
    --shadow:    0 1px 3px oklch(25% 0.02 330 / 0.07), 0 1px 2px oklch(25% 0.02 330 / 0.05);
    --font-serif: var(--sans);
    font-family: var(--sans);
}
/* Simulador: mucho del CSS inline en app.js usa var(--x, #hex) con x
   que no existe en NINGÚN lado del proyecto (--ok/--err/--surface-2/
   --bg-subtle, mismo hallazgo de variables fantasma que Tandas 5/6) —
   se definen acá para que los fallbacks queden inertes en vez de
   tocar 15+ líneas de JS una por una. */
#page-simulador[data-skin="central"] {
    --ok:         var(--accent-green);
    --err:        var(--accent-red);
    --surface-2:  var(--bg-card-hover);
    --bg-subtle:  color-mix(in oklch, var(--text-muted) 15%, transparent);
}
/* Testeo ST: toggle de vista y buscador con hex/rgba fijos -> tokens. */
#page-testeo-st[data-skin="central"] .st-view-toggle button.active {
    color: var(--text-inverse);
}
#page-testeo-st[data-skin="central"] .st-search-box:focus-within {
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 15%, transparent);
}
#page-testeo-st[data-skin="central"] .st-card:hover {
    box-shadow: var(--shadow);
}

/* ============================================================
   MAIN AREA — right of sidebar
   ============================================================ */
main.main {
    flex: 1;
    min-height: 100vh;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.topbar {
    height: var(--topbar-h);
    min-height: var(--topbar-h);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    background: var(--bg);
    position: sticky;
    top: 0;
    z-index: 50;
}

.topbar-left { display: flex; align-items: center; }
.page-title { font-size: 18px; font-weight: 700; letter-spacing: -0.3px; }
.topbar-right { display: flex; align-items: center; gap: 24px; }
.topbar-stat { text-align: right; }
.stat-label { display: block; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.stat-value { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ============================================================
   PAGES — only active one is visible
   ============================================================ */
section.page { display: none; padding: 24px 28px; flex: 1; }
section.page.active { display: block; animation: fadeInUp 0.35s cubic-bezier(0.22, 0.61, 0.36, 1); }

/* ============================================================
   KPI ROW
   ============================================================ */
.kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.kpi {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
    animation: fadeInUp 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.kpi:nth-child(1) { animation-delay: 0.05s; }
.kpi:nth-child(2) { animation-delay: 0.1s; }
.kpi:nth-child(3) { animation-delay: 0.15s; }
.kpi:nth-child(4) { animation-delay: 0.2s; }

.kpi:hover { border-color: var(--border-light); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.2); }
.kpi-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.kpi-value { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.kpi-value.green { color: var(--accent-green); }
.kpi-value.blue { color: var(--accent-blue); }
.kpi-value.cyan { color: var(--accent-cyan); }
.kpi-value.yellow { color: var(--accent-yellow); }
.kpi-value.red { color: var(--accent-red); }

/* ============================================================
   CARDS
   ============================================================ */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color 0.25s, box-shadow 0.3s, transform 0.25s;
    animation: fadeInUp 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation-delay: 0.1s;
}

.card:hover { border-color: var(--border-light); box-shadow: 0 4px 20px rgba(0,0,0,0.15); }

.card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.card-header h3 { font-size: 14px; font-weight: 700; }
.card-subtitle { font-size: 12px; color: var(--text-muted); margin-top: 2px; display: block; }

.card-body { padding: 16px 20px; }
.card-body.no-pad { padding: 0; }

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.mt-24 { margin-top: 24px; }

/* ============================================================
   DATA TABLES
   ============================================================ */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.data-table th {
    padding: 10px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: transparent;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.data-table td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.data-table tbody tr { transition: background 0.2s, opacity 0.2s; }
.data-table tbody tr:hover { background: var(--bg-card-hover); }
.data-table .price { color: var(--accent-green); font-weight: 600; }
.data-table .price-high { color: var(--accent-red); }

/* Expandable rows */
.row-expandable { cursor: pointer; }
.row-expandable:hover { background: var(--bg-card-hover); }
.row-expandable.open { background: var(--bg-card-hover); }
.row-detail { display: none; }
.row-detail.open { display: table-row; }
.row-detail td { background: rgba(0,0,0,0.2); padding: 12px 20px; }

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}

.detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    background: var(--bg-card);
    border-radius: 6px;
    font-size: 13px;
}

.detail-item.best {
    background: var(--status-ok-bg);
    border: 1px solid var(--status-ok-border);
}

.detail-item .comp-name { color: var(--text-secondary); }
.detail-item .comp-price { font-weight: 600; color: var(--text); }
.detail-item.best .comp-price { color: var(--accent-green); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.btn:active { transform: scale(0.96); }

.btn-primary {
    background: var(--accent);
    color: var(--text-inverse);
    border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-sm { padding: 5px 12px; font-size: 12px; }

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
}
.btn-ghost:hover { background: var(--bg-card); color: var(--text); }

.spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    vertical-align: middle;
}

/* ============================================================
   SEARCH
   ============================================================ */
.search-container { margin-bottom: 20px; }

.search-box {
    display: flex;
    gap: 8px;
    align-items: center;
}

.search-box input[type="text"] {
    flex: 1;
    padding: 10px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.25s, box-shadow 0.25s;
}

.search-box input[type="text"]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.search-box input[type="text"]::placeholder { color: var(--text-muted); }

.search-box select {
    padding: 10px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    outline: none;
}

/* Search summary bar */
.search-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--text-secondary);
}
.ss-count { font-weight: 600; color: var(--text); }
.ss-sep { color: var(--text-muted); }
.ss-best strong { color: var(--accent-green); font-size: 15px; }
.ss-usd { color: var(--text-muted); font-size: 12px; }

/* Search results grid */
.search-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
}

.sr-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
    transition: border-color 0.2s, background 0.2s, transform 0.25s, box-shadow 0.25s;
    position: relative;
    animation: fadeInUp 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.sr-card:hover {
    border-color: var(--border-light);
    background: var(--bg-card-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}
.sr-best {
    border-color: var(--status-ok-border);
    background: var(--status-ok-bg);
}
.sr-best:hover {
    border-color: rgba(34,197,94,0.6);
}

.sr-badge {
    position: absolute;
    top: 10px;
    right: 12px;
    background: var(--accent-green);
    color: #000;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.sr-price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
}
.sr-price {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.sr-usd {
    font-size: 13px;
    color: var(--text-muted);
}

.sr-name {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sr-name a {
    color: var(--text-secondary);
    text-decoration: none;
}
.sr-name a:hover {
    color: var(--accent);
    text-decoration: underline;
}

.sr-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}
.sr-comp {
    color: var(--text-muted);
    font-weight: 500;
}
.sr-cond {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}
.cond-nuevo { background: var(--status-ok-bg); color: var(--accent-green); }
.cond-usado { background: var(--status-warn-bg); color: var(--accent-yellow); }
.cond-unknown { background: rgba(100,100,120,0.15); color: var(--text-muted); }

/* Banners */
.search-banner {
    padding: 12px 18px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 16px;
}
.banner-green { background: var(--status-ok-bg); border: 1px solid var(--status-ok-border); color: var(--accent-green); }
.banner-yellow { background: var(--status-warn-bg); border: 1px solid var(--status-warn-border); color: var(--accent-yellow); }
.banner-red { background: var(--status-err-bg); border: 1px solid var(--status-err-border); color: var(--accent-red); }

/* ============================================================
   COMPARADOR
   ============================================================ */
.comparador-setup { margin-bottom: 24px; }
.comparador-setup .text-muted { color: var(--text-muted); margin-bottom: 12px; font-size: 13px; }

.comparador-selectors {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.comp-select {
    flex: 1;
    min-width: 160px;
    padding: 10px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    cursor: pointer;
}

.vs-label { color: var(--text-muted); font-weight: 700; font-size: 13px; }

.comp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }

.comp-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
}

.comp-card-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    color: var(--accent-cyan);
}

.comp-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(35,39,48,0.5);
    font-size: 13px;
}

.comp-stat-row:last-child { border-bottom: none; }
.comp-stat-label { color: var(--text-secondary); }
.comp-stat-value { font-weight: 600; }

.comp-detail-list {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.comp-detail-title { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 8px; }
.comp-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 13px;
    color: var(--text-secondary);
}
.comp-detail-row span:last-child { font-weight: 600; color: var(--text); }

/* ============================================================
   COMPETIDORES
   ============================================================ */
.comp-summary {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.comp-pill {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    background: var(--bg-card);
    border: 1px solid var(--border);
}

.comp-pill.total { color: var(--text); }
.comp-pill.ok { color: var(--accent-green); border-color: var(--status-ok-border); }
.comp-pill.fail { color: var(--accent-red); border-color: var(--status-err-border); }

/* ============================================================
   ALERTAS
   ============================================================ */
.alerta-section {
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--bg);
}

.alerta-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    transition: background 0.2s, transform 0.2s;
}

.alerta-item:hover { background: var(--bg-card-hover); transform: translateX(4px); }
.alerta-item:last-child { border-bottom: none; }

.alerta-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.alerta-icon.up { background: var(--status-err-bg); color: var(--accent-red); }
.alerta-icon.down { background: var(--status-ok-bg); color: var(--accent-green); }

.alerta-info { flex: 1; min-width: 0; }
.alerta-modelo { font-weight: 600; font-size: 13px; }
.alerta-detail { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.alerta-pct { font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }

/* ============================================================
   PROGRESS PANELS
   ============================================================ */
.progress-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    margin: 0 28px 16px;
    animation: slideDown 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.progress-panel.hidden { display: none; }

.progress-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.progress-title { font-weight: 600; font-size: 14px; }
.progress-meta { margin-left: auto; display: flex; gap: 12px; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.progress-bar-wrap {
    height: 4px;
    background: var(--bg);
    border-radius: 2px;
    margin-bottom: 12px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-blue), var(--accent-cyan));
    border-radius: 2px;
    width: 0%;
    transition: width 0.4s ease;
    position: relative;
}

.progress-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.progress-terminal {
    background: var(--bg-terminal);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 12px;
    max-height: 180px;
    overflow-y: auto;
    font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;
    font-size: 11.5px;
    line-height: 1.8;
}

.terminal-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-time { color: var(--text-muted); margin-right: 8px; }
.t-phase { color: var(--accent-cyan); }
.t-error { color: var(--accent-red); font-weight: 600; }

/* ============================================================
   PILLS
   ============================================================ */
.tab-pills { display: flex; gap: 4px; }

.pill {
    padding: 6px 16px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.pill:hover { background: var(--bg-card); color: var(--text); transform: translateY(-1px); }
.pill:active { transform: scale(0.97); }
.pill.active { background: var(--accent); color: var(--text-inverse); border-color: var(--accent); }

.page-toolbar { margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; }

/* ============================================================
   UTILITIES
   ============================================================ */
.text-muted { color: var(--text-muted); }
.text-green { color: var(--accent-green); }
.text-red { color: var(--accent-red); }
.empty-state { text-align: center; padding: 40px; color: var(--text-muted); animation: fadeIn 0.4s ease; }

.skeleton-loader {
    height: 120px;
    background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-card-hover) 50%, var(--bg-card) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius);
}

/* Skeletons de carga por vista — reusan @keyframes shimmer. Neutros (sin color con
   significado, sin side-stripes): sólo anticipan la FORMA del contenido para que la
   transición entre páginas no se lea como "se colgó". */
.skel { background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-card-hover) 50%, var(--bg-card) 75%);
        background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 10px; }
.skel-board { display: flex; gap: 12px; padding: 8px 4px; }
.skel-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.skel-col-head { height: 26px; border-radius: 8px; opacity: 0.85; }
.skel-card { height: 62px; }
.skel-list { display: flex; flex-direction: column; gap: 6px; padding: 10px; }
.skel-row { height: 58px; border-radius: 12px; }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; opacity: 0.6; } }

.tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}
.tag-ok { background: var(--status-ok-bg); color: var(--accent-green); }
.tag-fail { background: var(--status-err-bg); color: var(--accent-red); }
.tag-warn { background: var(--status-warn-bg); color: var(--accent-yellow); }
.tag-info { background: var(--status-info-bg); color: var(--accent-blue); }
.tag-alert { background: var(--status-err-bg); color: var(--accent-red); }

/* Own store highlight in competitor details */
.detail-item.own-store {
    border: 1px solid var(--accent-purple);
    background: rgba(167,139,250,0.08);
    border-radius: 6px;
}
.detail-item.own-store .comp-name { color: var(--accent-purple); font-weight: 600; }

/* Quantum model indicator */
.q-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-cyan);
    margin-right: 6px;
    vertical-align: middle;
}
.quantum-row td:first-child { border-left: 2px solid var(--accent-cyan); }

/* Section headers in mercado table */
.section-header td {
    background: var(--bg-sidebar);
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    cursor: default;
}
.section-title {
    font-weight: 700;
    font-size: 13px;
    color: var(--accent-cyan);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.section-count {
    margin-left: 10px;
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 400;
}

/* No data rows */
.no-data-row td {
    opacity: 0.5;
}
.no-data-row td:first-child {
    border-left: 2px solid var(--text-muted);
}

.hidden { display: none !important; }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInScale { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes popIn { 0% { transform: scale(0.8); opacity: 0; } 60% { transform: scale(1.05); } 100% { transform: scale(1); opacity: 1; } }
@keyframes subtlePulse { 0%, 100% { box-shadow: 0 0 0 0 var(--status-ok-border); } 50% { box-shadow: 0 0 0 6px rgba(34,197,94,0); } }

/* Mobile-only elements — hidden on desktop */
.mob-tab, .mob-tab-menu, .mob-label { display: none !important; }
.mob-topbar { display: none; }

/* Theme toggle: en desktop va en sidebar-footer, en mobile se oculta (menú mobile lo maneja) */
@media (max-width: 768px) {
    .theme-toggle { display: none !important; }
    .nav-group-label { display: none !important; }
}

/* ============================================================
   RESPONSIVE — Mobile (< 768px) — Spotify-style
   ============================================================ */
@media (max-width: 768px) {
    /* ---- BODY ---- */
    body {
        flex-direction: column;
        padding-bottom: 64px;
        padding-top: 52px;
    }

    /* ---- MOBILE TOPBAR ---- */
    .mob-topbar {
        display: flex !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 52px;
        background: var(--bg-sidebar);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        z-index: 190;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        border-bottom: 1px solid var(--border);
    }
    .mob-topbar-title {
        font-size: 18px;
        font-weight: 700;
        color: var(--text);
        margin: 0;
        letter-spacing: -0.3px;
    }
    /* ---- SIDEBAR → bottom tab bar ---- */
    aside.sidebar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        width: 100% !important;
        min-width: 100% !important;
        min-height: auto;
        height: 64px;
        flex-direction: row;
        border-right: none;
        border-top: 1px solid var(--border);
        background: var(--bg-sidebar);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        z-index: 200;
        overflow: visible;
    }

    .sidebar-brand { display: none; }
    .sidebar-footer { display: none; }

    .sidebar-nav {
        flex-direction: row;
        padding: 0;
        gap: 0;
        width: 100%;
        justify-content: stretch;
        align-items: stretch;
        height: 100%;
    }

    /* Hide all desktop nav items, show only mob tabs */
    .sidebar-nav > a.nav-item { display: none; }
    .sidebar-nav > a.nav-item[data-page="dashboard"],
    .sidebar-nav > a.nav-item[data-page="compras"],
    .sidebar-nav > a.nav-item[data-page="buscar"],
    .sidebar-nav > a.nav-item.mob-tab,
    .sidebar-nav > a.nav-item.mob-tab-menu {
        display: flex !important;
    }

    .sidebar-nav > a.nav-item {
        flex-direction: column;
        gap: 3px;
        padding: 6px 0 8px;
        font-size: 0;
        border-radius: 0;
        justify-content: center;
        align-items: center;
        flex: 1;
        min-width: 0;
        height: 100%;
        position: relative;
        color: var(--text-muted);
        transition: color 0.2s ease;
    }

    /* Show labels on mobile */
    .mob-label {
        display: block !important;
        font-size: 10px !important;
        font-weight: 500;
        letter-spacing: 0.2px;
        line-height: 1;
        color: inherit;
    }

    /* Labels for native nav items (Dashboard, Compras, Buscar) */
    .sidebar-nav > a.nav-item[data-page="dashboard"]::after { content: "Inicio"; font-size: 10px; font-weight: 500; letter-spacing: 0.2px; }
    .sidebar-nav > a.nav-item[data-page="compras"]::after { content: "Compras"; font-size: 10px; font-weight: 500; letter-spacing: 0.2px; }
    .sidebar-nav > a.nav-item[data-page="buscar"]::after { content: "Buscar"; font-size: 10px; font-weight: 500; letter-spacing: 0.2px; }

    .sidebar-nav > a.nav-item svg {
        width: 22px;
        height: 22px;
        transition: transform 0.2s ease;
    }

    /* Active state — copper accent (Claude) */
    .sidebar-nav > a.nav-item.active::before { display: none; }
    .sidebar-nav > a.nav-item.active {
        color: var(--accent);
        background: transparent;
    }
    .sidebar-nav > a.nav-item.active svg {
        transform: scale(1.05);
    }
    .sidebar-nav > a.nav-item.active::after {
        color: var(--accent) !important;
        font-weight: 600 !important;
    }

    .nav-badge {
        position: absolute;
        top: 4px;
        right: calc(50% - 16px);
        font-size: 9px;
        padding: 0 4px;
        min-width: 14px;
        text-align: center;
    }

    .mob-tab-menu.menu-open {
        color: var(--accent);
    }

    /* ---- MAIN AREA ---- */
    main.main {
        width: 100%;
        min-height: calc(100vh - 116px);
    }

    /* Desktop topbar hidden, mobile topbar replaces it */
    .topbar { display: none; }
    .btn-sm { padding: 4px 10px; font-size: 11px; }

    /* Pages — tighter padding */
    section.page { padding: 12px; }

    /* Progress panel */
    .progress-panel { margin: 0 12px 12px; padding: 12px; }
    .progress-terminal { font-size: 10px; max-height: 120px; }

    /* KPIs — 2 columns */
    .kpi-row {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-bottom: 12px;
    }
    .kpi { padding: 12px; }
    .kpi-value { font-size: 20px; }
    .kpi-label { font-size: 11px; }
    .kpi-sub { font-size: 11px; }

    /* Cards */
    .card-header { padding: 12px 14px; }
    .card-body { padding: 12px 14px; }
    .grid-2 { grid-template-columns: 1fr; gap: 12px; }

    /* Tables — horizontal scroll */
    .card-body.no-pad { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .data-table { min-width: 600px; }
    .data-table th { padding: 8px 10px; font-size: 10px; }
    .data-table td { padding: 8px 10px; font-size: 12px; }

    /* Detail grid in expanded rows */
    .detail-grid { grid-template-columns: 1fr; }

    /* Pills — horizontal scroll */
    .tab-pills {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
        padding-bottom: 4px;
    }
    .tab-pills::-webkit-scrollbar { display: none; }
    .pill { white-space: nowrap; flex-shrink: 0; padding: 5px 12px; font-size: 12px; }

    .page-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    /* Search */
    .search-box {
        flex-direction: column;
    }
    .search-box input[type="text"] { width: 100%; }
    .search-box select { width: 100%; }
    .search-summary { flex-wrap: wrap; font-size: 12px; padding: 10px 12px; }
    .search-grid { grid-template-columns: 1fr; }
    .sr-price { font-size: 18px; }
    .sr-card { padding: 14px; }

    /* Comparador */
    .comparador-selectors { flex-direction: column; gap: 8px; }
    .vs-label { display: none; }
    .comp-select { min-width: 100%; }
    .comp-cards { grid-template-columns: 1fr; }

    /* Competidores */
    .comp-summary { display: flex; flex-wrap: wrap; gap: 6px; }

    /* Alertas */
    .alerta-item { padding: 10px 12px; gap: 8px; }
    .alerta-modelo { font-size: 12px; }
    .alerta-detail { font-size: 11px; }
    .alerta-pct { font-size: 13px; }

    /* Charts — smaller */
    canvas { max-height: 200px; }

    /* Mercado summary */
    #mercado-summary { font-size: 12px !important; }

    /* Old FABs hidden on mobile — replaced by qfab */
    .fab { display: none !important; }
    .aria-fab { display: none !important; }
}

/* FAB hidden on desktop */
@media (min-width: 769px) { .fab { display: none; } }

/* ============================================================
   ARIA CHAT PANEL
   ============================================================ */
.aria-fab {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-purple), #7c3aed);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(167,139,250,0.4);
    cursor: pointer;
    z-index: 300;
    transition: transform 0.15s, box-shadow 0.15s;
}
.aria-fab:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(167,139,250,0.5); }
.aria-fab:active { transform: scale(0.95); }
.aria-fab.has-panel { display: none; }

.aria-panel {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 400px;
    height: 520px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    z-index: 301;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5);
    animation: fadeIn 0.2s ease;
    overflow: hidden;
}

.aria-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, rgba(167,139,250,0.12), rgba(124,58,237,0.08));
}
.aria-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}
.aria-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-purple), #7c3aed);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 16px;
    color: #fff;
}
.aria-name {
    font-weight: 700;
    font-size: 15px;
    color: var(--text);
    display: block;
    line-height: 1.2;
}
.aria-subtitle {
    font-size: 11px;
    color: var(--text-muted);
    display: block;
}
.aria-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}
.aria-close:hover { background: rgba(255,255,255,0.08); color: var(--text); }

.aria-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.aria-msg {
    display: flex;
    max-width: 88%;
    animation: fadeIn 0.2s ease;
}
.aria-msg-ai { align-self: flex-start; }
.aria-msg-user { align-self: flex-end; }

.aria-msg-content {
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.55;
    word-break: break-word;
}
.aria-msg-ai .aria-msg-content {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text);
    border-bottom-left-radius: 4px;
}
.aria-msg-user .aria-msg-content {
    background: linear-gradient(135deg, #7c3aed, var(--accent-purple));
    color: #fff;
    border-bottom-right-radius: 4px;
}

.aria-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 12px;
    border-bottom-left-radius: 4px;
    align-self: flex-start;
}
.aria-typing-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-purple);
    animation: ariaPulse 1.4s infinite;
}
.aria-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.aria-typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes ariaPulse { 0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } }

.aria-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid var(--border);
    background: var(--bg);
}
.aria-input {
    flex: 1;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 9px 12px;
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
}
.aria-input:focus { border-color: var(--accent-purple); }
.aria-input::placeholder { color: var(--text-muted); }
.aria-send {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--accent-purple), #7c3aed);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
    flex-shrink: 0;
}
.aria-send:hover { opacity: 0.85; }
.aria-send:active { transform: scale(0.92); }
.aria-send:disabled { opacity: 0.4; cursor: not-allowed; }

/* ============================================================
   QUICK FAB — Menu de acciones rapidas (mobile)
   ============================================================ */
.qfab-wrap {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 250;
    display: block;
}
.qfab-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #ee1c25;
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 22px rgba(238,28,37,0.45);
    cursor: pointer;
    transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
}
.qfab-btn:hover { background: #d11018; box-shadow: 0 8px 26px rgba(238,28,37,0.55); }
.qfab-btn:active { transform: scale(0.9); }
.qfab-btn.open {
    transform: rotate(45deg);
    background: linear-gradient(135deg, var(--accent-red), var(--accent-orange));
}
.qfab-menu {
    position: absolute;
    bottom: 58px;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    animation: fadeIn 0.15s ease;
}
.qfab-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    transition: background 0.15s;
}
.qfab-item:hover { background: var(--bg-card-hover); }
#qfab-ciclo svg { color: var(--accent-cyan); }
#qfab-aria svg { color: var(--accent-purple); }

@media (max-width: 768px) {
    .qfab-wrap { display: none; }
}

/* Aria responsive */
@media (max-width: 768px) {
    .aria-fab { bottom: 116px; right: 14px; width: 44px; height: 44px; }
    .aria-fab svg { width: 20px; height: 20px; }
    .aria-panel {
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
        max-height: 100dvh;
    }
}

/* ---- Compras ---- */
/* Compras tabs */
.compras-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0;
}
.compras-tab {
    padding: 10px 20px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.compras-tab:hover { color: var(--text-secondary); background: rgba(255,255,255,0.03); }
.compras-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
.compras-tabs-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 6px;
}
.compras-tab-content { display: none; }
.compras-tab-content.active { display: block; animation: fadeInUp 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); }

.compras-search-bar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}
.compras-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.compras-search-icon {
    position: absolute;
    left: 14px;
    color: var(--text-muted);
    pointer-events: none;
}
.compras-search-input {
    width: 100%;
    padding: 12px 12px 12px 42px;
    font-size: 15px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--text);
    transition: border-color 0.25s, box-shadow 0.25s;
}
.compras-search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.compras-search-input::placeholder { color: var(--text-muted); }
.compras-search-count {
    position: absolute;
    right: 14px;
    font-size: 12px;
    color: var(--text-muted);
}
.compras-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.compras-select {
    padding: 6px 10px;
    font-size: 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.25s, box-shadow 0.25s;
}
.compras-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }

.compras-sort-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-green);
    cursor: pointer;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-input);
    white-space: nowrap;
    transition: all 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.compras-sort-btn:hover { border-color: var(--accent-green); background: var(--status-ok-bg); }
.compras-sort-btn:active { transform: scale(0.95); }

/* Status bar */
.compras-stats {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 0;
    font-size: 12px;
}
.prov-chip {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
}
.prov-chip b { margin-left: 4px; }
.prov-chip-ok { background: var(--status-ok-bg); color: var(--accent-green); }
.prov-chip-pending { background: rgba(92,99,112,0.15); color: var(--text-muted); }
.compras-total { font-weight: 700; color: var(--text); margin-left: 4px; }

/* Table */
.compras-table th { cursor: default; user-select: none; white-space: nowrap; }
.compras-table th.col-sort { cursor: pointer; }
.compras-table th.col-sort:hover { color: var(--accent); }
.compras-prod-name { font-weight: 500; max-width: 420px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compras-precio-usd { font-weight: 600; color: var(--accent-cyan); white-space: nowrap; text-align: right; font-size: 13px; }
.compras-precio { font-weight: 700; color: var(--accent-green); white-space: nowrap; text-align: right; }
.compras-cat { font-size: 12px; white-space: nowrap; }
.compras-link { color: var(--accent-cyan); text-decoration: none; font-size: 16px; transition: color 0.15s, transform 0.2s; display: inline-block; }
.compras-link:hover { color: var(--accent); transform: scale(1.15) translateY(-1px); }

/* Proveedor tags */
.prov-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    transition: transform 0.15s, filter 0.15s;
}
.prov-tag:hover { transform: scale(1.05); filter: brightness(1.15); }
.prov-cg { background: var(--status-info-bg); color: #60a5fa; }
.prov-gn { background: var(--status-warn-bg); color: var(--status-warn-solid); }
.prov-nb { background: rgba(168,85,247,0.15); color: #c084fc; }
.prov-el { background: rgba(249,115,22,0.15); color: #fb923c; }
.prov-iv { background: rgba(34,211,238,0.15); color: var(--accent-cyan); }

/* Comparador rapido */
.compras-comp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}
.comp-card {
    padding: 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
    animation: fadeInScale 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.comp-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.25); }
.comp-card.comp-best { border-color: var(--accent-green); background: var(--status-ok-bg); animation: subtlePulse 2s ease-in-out 1; }
.comp-prov { font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.comp-price { font-size: 20px; font-weight: 800; color: var(--text); }
.comp-best .comp-price { color: var(--accent-green); }
.comp-price-ars { font-size: 14px; color: var(--text-secondary); margin-top: 2px; }
.comp-price-main { font-size: 22px !important; font-weight: 800 !important; color: var(--text) !important; }
.comp-best .comp-price-main { color: var(--accent-green) !important; }
.comp-price-usd-small { font-size: 13px; color: var(--accent-cyan); margin-top: 2px; }
.comp-cotiz { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.comp-summary { font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; }
.comp-cat-count { font-size: 11px; color: var(--text-muted); font-weight: 400; margin-left: 8px; }
.comp-name { font-size: 11px; color: var(--text-muted); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comp-diff { font-size: 12px; color: var(--accent-red); margin-top: 4px; }
.comp-best-label { color: var(--accent-green) !important; font-weight: 700; }
.comp-link { font-size: 12px; color: var(--accent-cyan); text-decoration: none; margin-top: 6px; display: inline-block; }
.comp-link:hover { text-decoration: underline; }
.comp-category { margin-bottom: 20px; animation: fadeInUp 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.comp-category:nth-child(2) { animation-delay: 0.06s; }
.comp-category:nth-child(3) { animation-delay: 0.12s; }
.comp-category:nth-child(4) { animation-delay: 0.18s; }
.comp-category:last-child { margin-bottom: 0; }
.comp-cat-header {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-cyan);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}

/* Stock indicators */
.stock-badge-no {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    background: var(--status-err-bg);
    color: var(--accent-red);
    margin-left: 6px;
}
.row-no-stock td { opacity: 0.45; }

/* Stock toggle */
.compras-stock-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.compras-stock-toggle input[type="checkbox"] {
    accent-color: var(--accent-green);
    width: 15px;
    height: 15px;
    cursor: pointer;
}

.table-wrap { overflow-x: auto; }
.card-actions { display: flex; align-items: center; gap: 8px; }

/* Visibilidad por rol — vendedores no ven markups */
body[data-role="vendedor"] .hide-for-vendedor { display: none !important; }
.vendedor-only { display: none; }
body[data-role="vendedor"] .vendedor-only { display: block; }

/* Cart add button in catalog */
.compras-actions-cell { white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.cart-add-btn {
    width: 26px; height: 26px;
    border-radius: 6px;
    border: 1px solid var(--accent-green);
    background: var(--status-ok-bg);
    color: var(--accent-green);
    font-size: 16px; font-weight: 700;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
    line-height: 1;
}
.cart-add-btn:hover { background: var(--accent-green); color: #000; transform: scale(1.15); box-shadow: 0 2px 10px var(--status-ok-border); }
.cart-add-btn:active { transform: scale(0.9); }

/* Cart badge on Presupuesto tab */
.cart-badge {
    display: inline-block;
    background: var(--accent-green);
    color: #000;
    font-size: 10px;
    font-weight: 800;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 9px;
    margin-left: 4px;
    padding: 0 5px;
    animation: popIn 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition: transform 0.2s;
}
.cart-badge:not([style*="none"]) { animation: popIn 0.35s cubic-bezier(0.22, 0.61, 0.36, 1); }
/* Pulse sutil mientras el badge tenga items — recordatorio de fondo */
.cart-badge.has-items {
    box-shadow: 0 0 0 0 rgba(34,197,94, 0.55);
    animation: cartBadgePulse 2.6s ease-out infinite;
}
@keyframes cartBadgePulse {
    0%   { box-shadow: 0 0 0 0   rgba(34,197,94, 0.55); }
    60%  { box-shadow: 0 0 0 8px rgba(34,197,94, 0); }
    100% { box-shadow: 0 0 0 0   rgba(34,197,94, 0); }
}

/* Pulse del nav-item "Presupuesto" cuando se agrega algo desde otra página */
.nav-item.cart-bump,
.compras-tab.cart-bump {
    animation: cartNavBump 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes cartNavBump {
    0%   { transform: translateX(0)   scale(1); }
    25%  { transform: translateX(-2px) scale(1.04); }
    50%  { transform: translateX(2px)  scale(1.04); }
    75%  { transform: translateX(-1px) scale(1.02); }
    100% { transform: translateX(0)   scale(1); }
}

/* Feedback en el botón "+" tras agregar */
.cart-add-btn.added {
    background: var(--accent-green) !important;
    color: #000 !important;
    transform: scale(1.18);
    box-shadow: 0 0 0 4px var(--status-ok-border);
    font-size: 0;
    animation: cartBtnPop 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.cart-add-btn.added::after {
    content: "";
    width: 13px; height: 7px;
    border-left: 2.5px solid #000;
    border-bottom: 2.5px solid #000;
    transform: rotate(-45deg) translate(1px, -2px);
}
@keyframes cartBtnPop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.25); }
    100% { transform: scale(1.18); }
}

/* ============================================================
   Cart toast — notificación enriquecida (add / remove + acciones)
   ============================================================ */
.cart-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 280px;
    max-width: 380px;
    padding: 12px 14px;
    border-radius: var(--radius);
    background: var(--card, #1a1d24);
    color: var(--text, #e8eaed);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 12px 32px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.35);
    opacity: 0;
    transform: translateY(14px) scale(0.98);
    transition: opacity 0.24s ease, transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.cart-toast.show { opacity: 1; transform: translateY(0) scale(1); }

.cart-toast__icon {
    flex: 0 0 auto;
    width: 32px; height: 32px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
}
.cart-toast__icon svg { width: 18px; height: 18px; }
.cart-toast--added  .cart-toast__icon { background: var(--status-ok-bg); color: var(--accent-green); }
.cart-toast--removed .cart-toast__icon { background: var(--status-err-bg); color: var(--status-err-solid); }
.cart-toast--added   { border-left: 3px solid var(--accent-green); }
.cart-toast--removed { border-left: 3px solid var(--status-err-solid); }

.cart-toast__body { flex: 1 1 auto; min-width: 0; }
.cart-toast__title {
    font-size: 12px; font-weight: 700; letter-spacing: 0.2px;
    text-transform: uppercase;
    color: var(--text-muted, #a5acba);
    margin-bottom: 2px;
}
.cart-toast__name {
    font-size: 13.5px; font-weight: 600;
    color: var(--text, #e8eaed);
    line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cart-toast__meta {
    margin-top: 4px;
    font-size: 11.5px; color: var(--text-muted, #a5acba);
    font-variant-numeric: tabular-nums;
}

.cart-toast__actions { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; }
.cart-toast__btn {
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: var(--text, #e8eaed);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 11.5px; font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s, border-color 0.15s;
    white-space: nowrap;
}
.cart-toast__btn:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.20); }
.cart-toast__btn:active { transform: scale(0.96); }
.cart-toast__btn--view {
    background: var(--accent-green);
    color: #000;
    border-color: var(--accent-green);
}
.cart-toast__btn--view:hover { background: #16a34a; border-color: #16a34a; }
.cart-toast__btn--undo { color: var(--text-muted, #a5acba); }
.cart-toast__btn--undo:hover { color: var(--text, #e8eaed); }

/* ============================================================
   Mini-cart flotante — recordatorio persistente
   ============================================================ */
.mini-cart {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 900;
    display: none;
    align-items: center;
    gap: 12px;
    padding: 10px 14px 10px 12px;
    background: linear-gradient(135deg, rgba(34,197,94,0.96), rgba(22,163,74,0.96));
    color: #00150a;
    border-radius: 999px;
    box-shadow: 0 12px 32px var(--status-ok-border), 0 2px 6px rgba(0,0,0,0.35);
    cursor: pointer;
    user-select: none;
    font-family: inherit;
    transform: translateY(20px) scale(0.95);
    opacity: 0;
    transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.24s, box-shadow 0.2s;
}
.mini-cart.show {
    display: inline-flex;
    transform: translateY(0) scale(1);
    opacity: 1;
    animation: miniCartIn 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mini-cart:hover {
    box-shadow: 0 16px 38px rgba(34,197,94,0.5), 0 2px 6px rgba(0,0,0,0.35);
    transform: translateY(-2px) scale(1.02);
}
@keyframes miniCartIn {
    0%   { transform: translateY(40px) scale(0.85); opacity: 0; }
    60%  { transform: translateY(-4px) scale(1.04); opacity: 1; }
    100% { transform: translateY(0)   scale(1);    opacity: 1; }
}

.mini-cart__icon {
    position: relative;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(0,0,0,0.18);
    display: inline-flex; align-items: center; justify-content: center;
    color: #00150a;
}
.mini-cart__count {
    position: absolute;
    top: -4px; right: -4px;
    background: #00150a;
    color: var(--accent-green);
    font-size: 10px; font-weight: 800;
    min-width: 18px; height: 18px;
    line-height: 18px;
    border-radius: 9px;
    padding: 0 5px;
    text-align: center;
    border: 2px solid rgba(34,197,94, 1);
    font-variant-numeric: tabular-nums;
}

.mini-cart__body { display: flex; flex-direction: column; gap: 0; line-height: 1.15; }
.mini-cart__label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    opacity: 0.75;
}
.mini-cart__total {
    font-size: 15px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.mini-cart__cta {
    font-size: 12.5px;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,0.18);
    margin-left: 4px;
}
.mini-cart__close {
    background: transparent;
    border: 0;
    color: #00150a;
    opacity: 0.55;
    width: 22px; height: 22px;
    border-radius: 50%;
    font-size: 18px;
    line-height: 18px;
    cursor: pointer;
    margin-left: 2px;
    padding: 0;
    transition: opacity 0.15s, background 0.15s;
}
.mini-cart__close:hover { opacity: 1; background: rgba(0,0,0,0.12); }

@media (max-width: 720px) {
    .mini-cart { bottom: 76px; right: 12px; padding: 8px 12px 8px 8px; }
    .mini-cart__total { font-size: 13px; }
    .mini-cart__cta { padding: 5px 8px; font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
    .cart-badge.has-items,
    .nav-item.cart-bump, .compras-tab.cart-bump,
    .cart-add-btn.added, .mini-cart.show { animation: none; }
}

/* ============================================================
   PRESUPUESTO — List-style cart
   ============================================================ */
.presup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding: 0 4px;
}
.presup-title { font-size: 16px; font-weight: 700; color: var(--text); margin: 0; }
.presup-actions { display: flex; gap: 8px; }

/* Provider group */
.presup-prov-group {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 12px;
    animation: fadeInUp 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.presup-prov-group:hover { border-color: var(--border-light); box-shadow: 0 2px 12px rgba(0,0,0,0.15); }
.presup-prov-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.presup-prov-count {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

/* Item list */
.presup-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.presup-item {
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    animation: fadeInUp 0.25s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.presup-item:last-child { border-bottom: none; }
.presup-item-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.presup-item-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.4;
    flex: 1;
    min-width: 0;
    word-break: break-word;
}
.presup-item-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.presup-item-prices {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.presup-item-usd {
    font-size: 15px;
    font-weight: 700;
    color: var(--accent-green);
}
.presup-item-ars {
    font-size: 13px;
    color: var(--text-muted);
}
.presup-item-link {
    display: inline-block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--accent-blue);
    opacity: 0.7;
    text-decoration: none;
    transition: opacity 0.15s;
}
.presup-item-link:hover, .presup-item-link:active { opacity: 1; }

/* Qty controls */
.presup-item-qty {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
.presup-qty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
}
.presup-qty-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.presup-qty-btn:hover { background: rgba(255,255,255,0.08); color: var(--accent); }
.presup-qty-btn:active { background: rgba(255,255,255,0.12); }

/* Remove button */
.presup-remove-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 20px;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s, color 0.2s, transform 0.15s;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
}
.presup-remove-btn:hover { opacity: 1; color: var(--accent-red); }
.presup-remove-btn:active { transform: scale(0.85); }

/* Provider subtotal */
.presup-prov-total {
    text-align: right;
    padding: 10px 0 0;
    font-size: 14px;
    color: var(--text-secondary);
    border-top: 1px solid var(--border);
    margin-top: 4px;
}
.presup-usd-total { color: var(--accent-cyan); font-size: 13px; }

/* Grand total */
.presup-grand-total {
    background: var(--status-ok-bg);
    border: 1px solid var(--status-ok-border);
    border-radius: var(--radius-lg);
    padding: 20px;
    text-align: center;
    margin: 16px 0;
    animation: fadeInScale 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation-delay: 0.15s;
    transition: box-shadow 0.3s;
}
.presup-grand-total:hover { box-shadow: 0 0 24px var(--status-ok-bg); }
.presup-total-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 4px; }
.presup-total-ars { font-size: 28px; font-weight: 800; color: var(--accent-green); }
.presup-total-usd { font-size: 16px; color: var(--accent-cyan); margin-top: 2px; }
.presup-total-items { font-size: 12px; color: var(--text-muted); margin-top: 6px; }

/* Links section */
.presup-links-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
    animation: fadeInUp 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation-delay: 0.2s;
}
.presup-links-title { font-size: 13px; font-weight: 700; color: var(--accent-cyan); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.presup-link-row { font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.presup-link-row:last-child { border-bottom: none; }
.presup-link-qty { color: var(--accent-green); font-weight: 700; }
.presup-link-url { color: var(--accent-blue); }
.presup-link-prov { color: var(--text-muted); font-size: 11px; }

@media (max-width: 768px) {
    .compras-filters { flex-direction: column; align-items: stretch; }
    .compras-select { width: 100%; }
    .compras-comp-grid { grid-template-columns: 1fr; }
    .compras-prod-name { max-width: 180px; }
    .presup-grand-total { padding: 14px; }
    .presup-total-ars { font-size: 22px; }
}

/* ============================================================
   MOBILE FULL-SCREEN MENU — Spotify-style
   ============================================================ */
.mob-menu {
    display: none;
}

@media (max-width: 768px) {
    .mob-menu {
        display: flex;
        flex-direction: column;
        position: fixed;
        inset: 0;
        background: var(--bg);
        z-index: 600;
        overflow: hidden;
        transform: translateY(100%);
        opacity: 0;
        transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s ease;
        will-change: transform, opacity;
    }
    .mob-menu.open {
        transform: translateY(0);
        opacity: 1;
    }

    /* Header */
    .mob-menu-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px 12px;
        flex-shrink: 0;
    }
    .mob-menu-brand {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .mob-menu-avatar {
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--accent);
        background: transparent;
    }
    .mob-menu-avatar svg { width: 100%; height: 100%; display: block; }
    .mob-menu-title {
        display: block;
        font-family: var(--font-serif);
        font-size: 20px;
        font-weight: 500;
        color: var(--text);
        letter-spacing: -0.015em;
        line-height: 1.1;
    }
    .mob-menu-header-actions {
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .mob-theme-btn {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: transparent;
        border: 1px solid var(--border);
        color: var(--text-secondary);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.15s ease;
    }
    .mob-theme-btn:hover {
        background: var(--bg-card);
        border-color: var(--border-strong);
        color: var(--text);
    }
    [data-theme="light"] .mob-theme-btn .theme-icon-sun { display: none; }
    [data-theme="light"] .mob-theme-btn .theme-icon-moon { display: block; }
    [data-theme="dark"]  .mob-theme-btn .theme-icon-sun  { display: block; }
    [data-theme="dark"]  .mob-theme-btn .theme-icon-moon { display: none; }
    .mob-menu-subtitle {
        display: block;
        font-size: 12px;
        color: var(--accent-green);
        font-weight: 500;
    }
    .mob-menu-close {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(255,255,255,0.08);
        border: none;
        color: var(--text-secondary);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background 0.15s, color 0.15s, transform 0.15s;
    }
    .mob-menu-close:active {
        transform: scale(0.9);
        background: rgba(255,255,255,0.15);
        color: #fff;
    }

    /* Nav items */
    .mob-menu-nav {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 4px 16px 16px;
    }
    .mob-menu-section-label {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.2px;
        color: var(--text-muted);
        padding: 16px 8px 8px;
    }
    .mob-menu-item {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 12px;
        border-radius: 12px;
        color: var(--text-secondary);
        text-decoration: none;
        cursor: pointer;
        transition: background 0.2s ease, transform 0.15s ease;
        border: none;
        background: none;
        width: 100%;
        text-align: left;
        font-family: inherit;
    }
    .mob-menu-item:active {
        background: rgba(255,255,255,0.06);
        transform: scale(0.98);
    }
    .mob-menu-icon {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        background: rgba(255,255,255,0.06);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: background 0.2s;
    }
    .mob-menu-icon svg {
        color: var(--text-secondary);
        transition: color 0.2s;
    }
    .mob-menu-item:active .mob-menu-icon {
        background: rgba(255,255,255,0.12);
    }
    .mob-menu-item:active .mob-menu-icon svg {
        color: #fff;
    }
    .mob-menu-icon-alert svg { color: var(--accent-orange); }
    .mob-menu-icon-aria svg { color: var(--accent-purple); }
    .mob-menu-text {
        flex: 1;
        min-width: 0;
    }
    .mob-menu-item-title {
        display: block;
        font-size: 15px;
        font-weight: 600;
        color: var(--text);
        line-height: 1.3;
    }
    .mob-menu-item-desc {
        display: block;
        font-size: 12px;
        color: var(--text-muted);
        line-height: 1.3;
        margin-top: 1px;
    }
    .mob-menu-arrow {
        flex-shrink: 0;
        color: var(--text-muted);
        opacity: 0.4;
    }
    .mob-menu-badge {
        background: var(--accent-red);
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        padding: 2px 8px;
        border-radius: 20px;
        flex-shrink: 0;
    }

    /* Staggered animation for menu items */
    .mob-menu.open .mob-menu-item {
        animation: menuSlideIn 0.35s cubic-bezier(0.32, 0.72, 0, 1) both;
    }
    .mob-menu.open .mob-menu-item:nth-child(1) { animation-delay: 0.05s; }
    .mob-menu.open .mob-menu-item:nth-child(2) { animation-delay: 0.08s; }
    .mob-menu.open .mob-menu-item:nth-child(3) { animation-delay: 0.11s; }
    .mob-menu.open .mob-menu-item:nth-child(4) { animation-delay: 0.14s; }
    .mob-menu.open .mob-menu-item:nth-child(5) { animation-delay: 0.17s; }
    .mob-menu.open .mob-menu-item:nth-child(6) { animation-delay: 0.20s; }
    .mob-menu.open .mob-menu-section-label:nth-child(1) { animation: menuSlideIn 0.3s cubic-bezier(0.32, 0.72, 0, 1) both; animation-delay: 0.03s; }
    .mob-menu.open .mob-menu-section-label:nth-child(5) { animation: menuSlideIn 0.3s cubic-bezier(0.32, 0.72, 0, 1) both; animation-delay: 0.12s; }

    @keyframes menuSlideIn {
        from { opacity: 0; transform: translateY(12px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* Footer — FIX QUA-488: sticky bottom para que Cerrar sesión siempre sea visible */
    .mob-menu-footer {
        flex-shrink: 0;
        position: sticky;
        bottom: 0;
        background: var(--bg);
        z-index: 1;
        padding: 12px 20px 24px;
        border-top: 1px solid rgba(255,255,255,0.06);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .mob-menu-info {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .mob-menu-update {
        font-size: 11px;
        color: var(--text-muted);
    }
    .mob-menu-update strong {
        color: var(--text-secondary);
    }
    .mob-menu-logout {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        border-radius: 20px;
        background: var(--status-err-bg);
        border: 1px solid var(--status-err-border);
        color: var(--accent-red);
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        transition: background 0.15s, transform 0.15s;
        font-family: inherit;
    }
    .mob-menu-logout:active {
        transform: scale(0.96);
        background: var(--status-err-bg);
    }
}

/* ============================================================
   MOBILE COMPRAS — Card layout instead of table
   ============================================================ */
@media (max-width: 768px) {
    /* Compras tabs — scrollable row */
    .compras-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }
    .compras-tabs::-webkit-scrollbar { display: none; }
    .compras-tab {
        white-space: nowrap;
        flex-shrink: 0;
        font-size: 12px;
        padding: 6px 14px;
    }

    /* Compras table — transform to card layout */
    #compras-table { min-width: 0 !important; }
    #compras-table thead { display: none; }
    #compras-table tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto auto;
        gap: 4px 8px;
        padding: 12px 14px;
        border-bottom: 1px solid var(--border);
        position: relative;
    }
    #compras-table tbody tr:nth-child(even) {
        background: rgba(255,255,255,0.02);
    }

    /* 1: Producto name — spans full width, row 1 */
    #compras-table tbody td:nth-child(1) {
        grid-column: 1 / -1;
        grid-row: 1;
        max-width: none;
        font-weight: 600;
        font-size: 13px;
        padding: 0 30px 0 0;
        white-space: normal;
    }

    /* 2: USD price — row 2 left */
    #compras-table tbody td:nth-child(2) {
        grid-column: 1;
        grid-row: 2;
        font-size: 15px;
        font-weight: 700;
        color: var(--accent-green);
        padding: 2px 0;
    }

    /* 3: ARS price — row 2 right */
    #compras-table tbody td:nth-child(3) {
        grid-column: 2;
        grid-row: 2;
        text-align: right;
        font-size: 13px;
        color: var(--text-secondary);
        padding: 2px 0;
    }

    /* 4: Proveedor tag — row 3 left */
    #compras-table tbody td:nth-child(4) {
        grid-column: 1;
        grid-row: 3;
        padding: 2px 0;
    }

    /* 5: Categoria — row 3 right */
    #compras-table tbody td:nth-child(5) {
        grid-column: 2;
        grid-row: 3;
        text-align: right;
        font-size: 11px;
        padding: 2px 0;
    }

    /* 6: Actions (link + cart btn) — absolute top right */
    #compras-table tbody td:nth-child(6) {
        position: absolute;
        top: 10px;
        right: 12px;
        padding: 0;
        display: flex;
        gap: 6px;
        align-items: center;
    }

    /* Compras filters — collapsible look */
    .compras-filters {
        gap: 6px;
    }
    .compras-search {
        font-size: 14px;
    }
    .compras-select {
        font-size: 13px;
        padding: 6px 10px;
    }

    /* Presupuesto mobile */
    .presup-prov-group { padding: 12px; }
    .presup-item-name { font-size: 12px; }
    .presup-item-usd { font-size: 14px; }
    .presup-item-ars { font-size: 12px; }
    .presup-item-bottom { gap: 8px; }
    .presup-grand-total { padding: 16px; margin: 12px 0; }
    .presup-total-ars { font-size: 24px; }
    .presup-total-usd { font-size: 14px; }
    .presup-links-section { padding: 12px; }
    .presup-link-row { font-size: 12px; }
    .presup-header { flex-wrap: wrap; gap: 8px; }
    .presup-title { font-size: 15px; }
}

/* Small phones (< 380px) */
@media (max-width: 380px) {
    .kpi-row { grid-template-columns: 1fr; }
    #compras-table tbody td:nth-child(2) { font-size: 13px; }
    #compras-table tbody td:nth-child(3) { font-size: 12px; }
}

/* ==============================================================
   VENTAS WIZARD — Armado paso a paso
   ============================================================== */
.btn-link { background: none; border: none; color: var(--accent); cursor: pointer; padding: 0; font-size: 12px; }
.btn-link.danger { color: #f87171; }
.btn-link:hover { text-decoration: underline; }

.wizard-steps {
    display: flex; align-items: center;
    gap: 4px; flex-wrap: wrap;
    padding: 14px 0;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
}
.wizard-step {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: all 0.15s;
    white-space: nowrap;
}
.wizard-step:hover { border-color: var(--accent); color: var(--text); }
.wizard-step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    background: rgba(255,255,255,0.05);
    font-size: 11px; font-weight: 700;
}
.wizard-step.current {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    font-weight: 600;
}
.wizard-step.current .wizard-step-num { background: rgba(255,255,255,0.25); }
.wizard-step.filled {
    border-color: var(--accent-green);
    color: var(--accent-green);
}
.wizard-step.filled.current {
    background: var(--accent-green);
    color: #fff;
    border-color: var(--accent-green);
}
.wizard-step.filled .wizard-step-num {
    background: var(--accent-green);
    color: #fff;
}
.wizard-step-sep { width: 12px; height: 1px; background: var(--border); flex-shrink: 0; }

.wizard-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 20px;
    align-items: start;
}
.wizard-main {
    background: var(--surface-1, var(--bg-card));
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px;
    min-width: 0;
}
.wizard-step-header { margin-bottom: 14px; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.wizard-step-title { font-size: 18px; font-weight: 700; color: var(--text); margin: 0 0 4px; }
.wizard-step-desc { font-size: 13px; color: var(--text-muted); }
.wizard-step-badge {
    background: var(--status-info-bg);
    color: var(--accent-cyan);
    border: 1px solid var(--status-info-border);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px; font-weight: 600;
    white-space: nowrap;
}

.wizard-subfilters {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 10px;
}
.wizard-subfilters:empty { display: none; }
.wizard-subchip {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s;
    font-weight: 500;
}
.wizard-subchip:hover { color: var(--text); border-color: var(--accent); }
.wizard-subchip.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    font-weight: 600;
}

.wizard-toolbar {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.wizard-toolbar-group {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px;
}
.wizard-toolbar-group label {
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.wizard-toolbar-group select {
    background: var(--surface-0, var(--bg));
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 6px;
    padding: 5px 9px;
    font-size: 12px;
    cursor: pointer;
}
.wizard-toolbar-group select:focus { outline: none; border-color: var(--accent); }
.wizard-multi-hint { margin-left: auto; }
.multi-badge {
    background: var(--status-ok-bg);
    border: 1px solid var(--status-ok-border);
    color: var(--accent-green);
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 11px;
    font-weight: 600;
}

.wizard-search-bar {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 12px;
}
.wizard-search-bar input {
    flex: 1;
    background: var(--surface-0, var(--bg));
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 9px 14px;
    color: var(--text);
    font-size: 13px;
}
.wizard-search-bar input:focus { outline: none; border-color: var(--accent); }
#wizard-count { font-size: 12px; color: var(--text-muted); white-space: nowrap; }

.wizard-results {
    max-height: 58vh; overflow-y: auto;
    border: 1px solid var(--border); border-radius: 8px;
}
.wizard-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.wizard-table thead th {
    position: sticky; top: 0;
    background: var(--surface-1, var(--bg-card));
    text-align: left; font-weight: 600; color: var(--text-muted);
    padding: 9px 12px; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border);
    z-index: 1;
}
.wizard-table th.right, .wizard-table td.right { text-align: right; }
.wizard-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    vertical-align: middle;
}
/* ================= WIZARD CARDS (gx-*) — paleta Claude warm ================= */
.gx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    padding: 4px;
}
.gx-card {
    display: flex; flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: border-color 0.2s, box-shadow 0.25s, transform 0.2s;
    min-height: 170px;
}
.gx-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-lg);
    transform: translateY(-1px);
}
.gx-card.selected {
    border-color: var(--accent-green);
    background: var(--bg-card-hover);
    box-shadow: inset 3px 0 0 var(--accent-green), var(--shadow-sm);
}
.gx-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.gx-check {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--accent-green); color: var(--text-inverse);
    font-size: 12px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
.gx-card-name {
    margin: 2px 0 0;
    font-family: var(--font-serif);
    font-size: 15px; line-height: 1.3;
    color: var(--text); font-weight: 600;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 58px;
}
.gx-card-link { font-size: 11px; color: var(--accent-blue); text-decoration: none; font-weight: 500; }
.gx-card-link:hover { text-decoration: underline; }
.gx-card-foot {
    margin-top: auto;
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--border-light);
}
.gx-card-price {
    color: var(--text); font-weight: 700;
    font-size: 16px; white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.gx-btn {
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    font-size: 12px; font-weight: 600;
    font-family: inherit;
    cursor: pointer; border: 1px solid transparent;
    transition: all 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
    white-space: nowrap;
}
.gx-btn:active { transform: scale(0.96); }
.gx-btn-elegir {
    background: var(--accent);
    color: var(--text-inverse);
    border-color: var(--accent);
}
.gx-btn-elegir:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.gx-btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border-color: var(--border);
}
.gx-btn-ghost:hover { background: var(--bg-card-hover); color: var(--accent-red); border-color: var(--accent-red); }

/* Barra de progreso del armado — sobria, warm */
.gx-progress {
    position: relative;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    height: 20px;
    overflow: hidden;
    margin-bottom: 12px;
}
.gx-progress-bar {
    position: absolute; inset: 0 auto 0 0;
    background: var(--accent-green);
    transition: width 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.gx-progress-lbl {
    position: relative; z-index: 1;
    text-align: center; line-height: 20px;
    font-size: 10px; font-weight: 600;
    color: var(--text); letter-spacing: 0.5px; text-transform: uppercase;
    mix-blend-mode: difference;
    filter: invert(1);
}
@media (max-width: 640px) {
    .gx-grid { grid-template-columns: 1fr; }
}

.wizard-row:hover td { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.wizard-row.selected td { background: rgba(34,197,94,0.08); }
.wizard-row.selected td:first-child { border-left: 3px solid var(--accent-green); }
.wizard-row-name { color: var(--text); font-weight: 500; line-height: 1.35; }
.wizard-row-link { font-size: 11px; color: var(--accent-cyan); text-decoration: none; display: inline-block; margin-top: 3px; }
.wizard-row-link:hover { text-decoration: underline; }
.wizard-row-price { color: var(--accent-green); font-weight: 700; font-size: 14px; white-space: nowrap; }
.wizard-row-actions { display: flex; justify-content: flex-end; align-items: center; gap: 6px; white-space: nowrap; }

.wizard-nav {
    display: flex; justify-content: space-between; gap: 10px;
    margin-top: 14px; padding-top: 14px;
    border-top: 1px solid var(--border);
}
.wizard-nav button:disabled { opacity: 0.4; cursor: not-allowed; }

/* Summary sidebar */
.wizard-summary {
    background: var(--surface-1, var(--bg-card));
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    position: sticky; top: 16px;
    display: flex; flex-direction: column; gap: 10px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}
.wizard-summary-head { display: flex; justify-content: space-between; align-items: center; }
.wizard-summary-head h4 { margin: 0; font-size: 14px; }
.wizard-summary-empty {
    text-align: center; color: var(--text-muted);
    padding: 20px 8px; font-size: 12px;
    border: 1px dashed var(--border); border-radius: 8px;
}
#wizard-summary-list { display: flex; flex-direction: column; gap: 8px; }
.wizard-summary-item {
    background: var(--surface-0, var(--bg));
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent-green);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 12px;
}
.wizard-summary-item-lbl {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--text-muted); font-weight: 600;
}
.wizard-summary-item-name {
    color: var(--text); font-weight: 500; margin: 3px 0 6px;
    line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wizard-summary-item-row { display: flex; justify-content: space-between; align-items: center; }
.wizard-summary-item-price { color: var(--accent-green); font-weight: 700; }

.wizard-summary-total {
    border-top: 1px solid var(--border);
    padding-top: 12px; margin-top: 4px;
    display: flex; flex-direction: column; gap: 4px;
}
.wizard-summary-total-lbl { font-size: 12px; color: var(--text-muted); }
#wizard-total-price { font-size: 22px; font-weight: 800; color: var(--accent-green); }
#wizard-share { width: 100%; margin-top: 4px; }

@media (max-width: 960px) {
    .wizard-layout { grid-template-columns: 1fr; }
    .wizard-summary { position: static; max-height: none; }
}
@media (max-width: 640px) {
    .wizard-main { padding: 12px; }
    .wizard-step-title { font-size: 16px; }
    .wizard-results { max-height: 50vh; }
    .wizard-table thead { display: none; }
    .wizard-table, .wizard-table tbody, .wizard-table tr, .wizard-table td { display: block; width: 100%; }
    .wizard-table tr { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.06); }
    .wizard-table td { padding: 2px 0; border: none; }
    .wizard-table td.right { text-align: left; margin-top: 6px; }
}

/* ============================================================
   SEGURIDAD PAGE
   ============================================================ */
.sec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
}
.sec-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px dashed var(--border);
    font-size: 14px;
}
.sec-info-row:last-child { border-bottom: none; }
.sec-label { color: var(--text-muted); font-size: 13px; }
.sec-value { color: var(--text); font-weight: 500; }
.sec-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}
.sec-badge-ok {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}
.sec-badge-warn {
    background: color-mix(in oklch, var(--accent-yellow) 15%, transparent);
    color: var(--accent-yellow);
}
.sec-badge-muted {
    background: rgba(156, 163, 180, 0.15);
    color: var(--text-muted);
}
.sec-badge-danger {
    background: rgba(239, 68, 68, 0.15);
    color: var(--accent-red);
}
.sec-qr-wrap {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.sec-qr {
    width: 180px;
    height: 180px;
    border-radius: 10px;
    background: #fff;
    padding: 8px;
}
.sec-qr-fallback .sec-label { margin-bottom: 4px; }
.sec-secret {
    display: inline-block;
    background: var(--surface-2);
    padding: 6px 10px;
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    color: var(--text);
    word-break: break-all;
    user-select: all;
}
.sec-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 8px;
}
.sec-warn {
    background: color-mix(in oklch, var(--accent-yellow) 10%, transparent);
    border: 1px solid color-mix(in oklch, var(--accent-yellow) 30%, transparent);
    color: var(--accent-yellow);
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 13px;
}
.sec-recovery-box {
    margin-top: 14px;
    padding: 12px;
    border: 1px dashed var(--border);
    border-radius: 10px;
    background: rgba(59, 130, 246, 0.05);
}
.sec-recovery-title {
    color: var(--accent-yellow);
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 8px;
}
.sec-recovery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 6px;
    margin-bottom: 10px;
}
.sec-recovery-grid code {
    background: var(--surface-2);
    padding: 6px 8px;
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    color: var(--text);
    text-align: center;
    letter-spacing: 1px;
    user-select: all;
}

/* Form messages */
.form-group { margin-bottom: 12px; }
.form-label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.form-input {
    width: 100%;
    padding: 9px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
}
.form-input:focus { border-color: var(--accent); }
.form-input-sm { padding: 5px 8px; font-size: 13px; }
.form-msg { min-height: 20px; font-size: 13px; margin-top: 8px; }
.form-msg-ok { color: #10b981; }
.form-msg-err { color: var(--accent-red); }

.btn-danger {
    background: rgba(239, 68, 68, 0.1);
    color: var(--accent-red);
    border: 1px solid rgba(239, 68, 68, 0.3);
}
.btn-danger:hover {
    background: rgba(239, 68, 68, 0.2);
}

/* ============================================================
   ADMIN USUARIOS PAGE
   ============================================================ */
.admin-actions {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.admin-actions .btn {
    padding: 4px 8px;
    font-size: 12px;
}

/* Modal */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.modal-backdrop.hidden { display: none; }
.modal-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    width: 100%;
    max-width: 420px;
    margin: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}
.modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-sidebar);
}
.modal-head h3 { margin: 0; font-size: 16px; color: var(--text); }
.modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
}
.modal-close:hover { color: var(--text); }
.modal-body { padding: 16px 20px; }
.modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.15);
}

.btn-link.danger { color: var(--accent-red); }

/* ============ SCHEDULER PANEL (Fase 4) ============ */
.sched-summary { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--text-secondary); }
.sched-summary-text b { color:var(--text); }
.sched-badge { display:inline-block; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:600; letter-spacing:0.3px; }
.sched-badge-idle { background:var(--bg-card-hover); color:var(--text-secondary); border:1px solid #2a2f3d; }
.sched-badge-ok { background:var(--status-ok-bg); color:#4ade80; border:1px solid var(--status-ok-border); }
.sched-badge-running { background:var(--status-info-bg); color:#60a5fa; border:1px solid var(--status-info-border); animation: schedPulse 1.8s ease-in-out infinite; }
.sched-badge-warn { background:rgba(245,158,11,0.15); color:var(--status-warn-solid); border:1px solid rgba(245,158,11,0.3); }
.sched-badge-error { background:var(--status-err-bg); color:#f87171; border:1px solid var(--status-err-border); }
.sched-badge-paused { background:rgba(148,163,184,0.15); color:#cbd5e1; border:1px solid rgba(148,163,184,0.3); }
@keyframes schedPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }

.sched-jobs-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap:16px; }
.sched-job-card .card-header { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.sched-job-card .card-header h3 { display:flex; align-items:center; gap:10px; font-size:15px; text-transform: capitalize; }
.sched-card-actions { display:flex; gap:6px; flex-wrap:wrap; }
.btn-sm { padding: 5px 10px !important; font-size: 12px !important; }
.sched-desc { color:var(--text-secondary); font-size: 12px; margin: 0 0 12px 0; }
.sched-h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color:var(--text-secondary); margin: 14px 0 8px 0; font-weight: 600; }
.sched-muted { color:var(--text-muted); font-size:12px; font-style:italic; }
.sched-grid-meta { display:grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-bottom: 4px; }
.sched-kv { display:flex; justify-content:space-between; align-items:center; padding: 4px 0; font-size: 12px; border-bottom: 1px dashed var(--border); }
.sched-kv span:first-child { color:var(--text-secondary); }
.sched-kv b { color:var(--text); font-weight: 500; }
.sched-summary-grid { display:grid; grid-template-columns: 1fr; gap: 0; }
.sched-error-box { margin-top:10px; padding:8px 12px; background: var(--status-err-bg); border:1px solid var(--status-err-border); border-radius:6px; color:#fca5a5; font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.sched-history { display:flex; flex-direction: column; gap:2px; }
.sched-hist-row { display:grid; grid-template-columns: 110px 60px 1fr; gap: 10px; font-size: 11px; padding: 4px 8px; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.sched-hist-ok { color:var(--text-secondary); }
.sched-hist-err { background: rgba(239,68,68,0.08); color:#fca5a5; }
.sched-hist-run { background: rgba(59,130,246,0.08); color:#93c5fd; }
.sched-hist-errmsg { color:#f87171; }

/* Scheduler progress bar */
.sched-progress { margin: 0 0 14px 0; padding: 12px; background: rgba(59,130,246,0.06); border: 1px solid rgba(59,130,246,0.25); border-radius: 8px; }
.sched-progress-bar { width: 100%; height: 8px; background: var(--bg-card-hover); border-radius: 999px; overflow: hidden; margin-bottom: 8px; }
.sched-progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent-blue), var(--accent-cyan)); border-radius: 999px; transition: width 0.4s ease; }
.sched-progress-meta { display:flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 4px; }
.sched-progress-phase { font-size: 12px; font-weight: 600; color: #93c5fd; }
.sched-progress-elapsed { font-size: 11px; color: var(--text-secondary); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.sched-progress-detail { font-size: 11px; color: var(--text-secondary); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ========== PRICING TAB ========== */
.pricing-toolbar { flex-wrap: wrap; gap: 16px; align-items: end; }
.pricing-controls { display: flex; gap: 14px; flex-wrap: wrap; }
.pricing-ctrl { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
.pricing-ctrl select, .pricing-ctrl input { padding: 8px 10px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 13px; font-family: inherit; min-width: 150px; text-transform: none; letter-spacing: normal; }
.pricing-ctrl select:focus, .pricing-ctrl input:focus { outline: none; border-color: var(--accent); }

.pricing-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.pricing-summary-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.pricing-summary-label { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.pricing-summary-val { font-size: 20px; font-weight: 700; color: var(--text); }
.pricing-summary-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.pricing-summary-card.ok .pricing-summary-val { color: var(--accent-green); }
.pricing-summary-card.warn .pricing-summary-val { color: var(--accent-yellow); }
.pricing-summary-card.bad .pricing-summary-val { color: var(--accent-red); }

.pricing-table { font-size: 12px; }
.pricing-table th.num, .pricing-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.pricing-table td.neg { color: var(--accent-green); font-weight: 600; }
.pricing-table td.pos { color: var(--accent-red); font-weight: 600; }
.pricing-table td.muted { color: var(--text-muted); font-style: italic; }

.badge-margen { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.badge-ok { background: var(--status-ok-bg); color: #4ade80; }
.badge-warn { background: rgba(245,158,11,0.15); color: var(--status-warn-solid); }
.badge-bad { background: var(--status-err-bg); color: #f87171; }
.badge-none { background: var(--bg-card-hover); color: var(--text-muted); }

.badge-pos { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.badge-pos-bajo { background: var(--status-ok-bg); color: #4ade80; }
.badge-pos-medio { background: rgba(245,158,11,0.15); color: var(--status-warn-solid); }
.badge-pos-alto { background: var(--status-err-bg); color: #f87171; }

.pricing-sug-manual { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.pricing-manual-input {
    width: 110px; padding: 4px 6px; border-radius: 6px;
    background: #14171f; border: 1px solid #2a2f3d; color: var(--text);
    font-size: 12px; text-align: right; font-variant-numeric: tabular-nums;
    outline: none; transition: border-color 0.15s;
}
.pricing-manual-input:focus { border-color: var(--accent); background: var(--bg-input); }
.pricing-manual-input::-webkit-outer-spin-button,
.pricing-manual-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pricing-sug-mg { line-height: 1; }

/* ==== Sistema (admin-only panel, v2.3.0) ==== */
.sistema-tabs { display:flex; gap:4px; flex-wrap:wrap; }
.sistema-tab {
    background: transparent; border: 1px solid var(--border);
    color: var(--text-secondary); padding: 7px 14px; border-radius: 8px;
    font-size: 13px; font-weight: 500; cursor: pointer;
    transition: all 0.15s;
}
.sistema-tab:hover { border-color: var(--accent); color: var(--text-primary); }
.sistema-tab.active {
    background: var(--accent); border-color: var(--accent);
    color: #fff; font-weight: 600;
}
.sistema-pane { display: none; }
.sistema-pane.active { display: block; }

.sistema-principles { list-style: none; padding: 0; margin: 12px 0 0; }
.sistema-principles li {
    padding: 10px 14px; margin-bottom: 6px; background: var(--bg-card-inner);
    border-left: 3px solid var(--accent-cyan); border-radius: 6px;
    font-size: 13px; color: var(--text-secondary);
}
.sistema-principles li strong { color: var(--text-primary); margin-right: 8px; }

.sistema-docs-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px; margin-top: 12px;
}
.sistema-doc-chip {
    padding: 10px 14px; background: var(--bg-card-inner);
    border: 1px solid var(--border); border-radius: 8px;
    font-size: 12px;
}
.sistema-doc-chip strong { display: block; color: var(--text-primary); margin-bottom: 2px; }
.sistema-doc-chip code { color: var(--text-secondary); font-size: 11px; }

.sistema-kv { display:grid; grid-template-columns: 180px 1fr; gap: 6px 14px; margin: 12px 0; font-size: 13px; }
.sistema-kv dt { color: var(--text-secondary); font-weight: 500; }
.sistema-kv dd { color: var(--text-primary); margin: 0; }
.sistema-kv dd code { color: var(--accent-cyan); font-size: 12px; }

.sistema-badge {
    display: inline-block; padding: 3px 10px; border-radius: 6px;
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px;
}
.sistema-badge.ok { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
.sistema-badge.warn { background: rgba(245, 158, 11, 0.15); color: var(--status-warn-solid); }
.sistema-badge.info { background: rgba(6, 182, 212, 0.15); color: var(--accent-cyan); }
.sistema-badge.muted { background: rgba(100, 116, 139, 0.15); color: #94a3b8; }

.sistema-sprint {
    padding: 12px 14px; margin-bottom: 8px; background: var(--bg-card-inner);
    border: 1px solid var(--border); border-radius: 8px;
    display: flex; gap: 14px; align-items: flex-start;
}
.sistema-sprint-num {
    flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%;
    background: var(--bg-card); border: 2px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; color: var(--text-secondary);
}
.sistema-sprint.estado-completado .sistema-sprint-num { border-color: #4ade80; color: #4ade80; }
.sistema-sprint.estado-en_curso .sistema-sprint-num { border-color: var(--accent-cyan); color: var(--accent-cyan); }
.sistema-sprint-body { flex: 1; min-width: 0; }
.sistema-sprint-body h4 { margin: 0 0 3px; font-size: 14px; color: var(--text-primary); }
.sistema-sprint-body p { margin: 0; font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.sistema-sprint-body .sistema-badge { margin-top: 6px; }

.sistema-modulo {
    padding: 12px 14px; margin-bottom: 6px; background: var(--bg-card-inner);
    border-radius: 6px; display: grid;
    grid-template-columns: 140px 1fr auto; gap: 14px; align-items: center;
}
.sistema-modulo-nombre { color: var(--text-primary); font-weight: 500; font-size: 13px; }
.sistema-modulo-desc { color: var(--text-secondary); font-size: 12px; line-height: 1.4; }
.sistema-modulo code { color: var(--accent-cyan); font-size: 11px; }

.sistema-tabla-row {
    padding: 8px 14px; display: grid;
    grid-template-columns: 200px 120px 1fr; gap: 12px; align-items: center;
    border-bottom: 1px solid var(--border); font-size: 12px;
}
.sistema-tabla-row:last-child { border-bottom: none; }
.sistema-tabla-row code { color: var(--accent-cyan); font-weight: 500; }
.sistema-tabla-row .sistema-badge { justify-self: start; }

.sistema-param-row {
    padding: 10px 14px; display: grid;
    grid-template-columns: 260px 100px 80px 1fr; gap: 12px; align-items: center;
    border-bottom: 1px solid var(--border); font-size: 12px;
}
.sistema-param-row:last-child { border-bottom: none; }
.sistema-param-row code { color: var(--accent-cyan); font-weight: 500; font-size: 12px; }
.sistema-param-valor {
    font-family: monospace; background: var(--bg-card); padding: 2px 8px;
    border-radius: 4px; color: var(--text-primary);
}
.sistema-archivo-row {
    padding: 8px 14px; display: grid;
    grid-template-columns: 1fr 100px 180px 70px; gap: 12px; align-items: center;
    border-bottom: 1px solid var(--border); font-size: 12px;
}
.sistema-archivo-row:last-child { border-bottom: none; }
.sistema-archivo-row code { color: var(--text-primary); font-size: 12px; }
.sistema-archivo-row.missing code { color: #f87171; text-decoration: line-through; }

.stat-card-sistema {
    padding: 14px 16px; background: var(--bg-card-inner);
    border: 1px solid var(--border); border-radius: 8px;
}
.stat-card-sistema .stat-label {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--text-secondary); margin-bottom: 6px;
}
.stat-card-sistema .stat-value {
    font-size: 22px; font-weight: 700; color: var(--text-primary);
    line-height: 1;
}

/* ============================================================
   UI v6.0 "Claude" — Grupos de navegación + Toggle de tema
   ============================================================ */
.nav-group-label {
    font-family: var(--font-sans);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 16px 12px 6px;
    user-select: none;
}

/* Sub-header dentro de un .nav-group-label (ej: "Externo"/"Interno" en
   Inteligencia de Mercado) — mismo tratamiento pero más discreto, sin
   borde ni chevron, para no competir visualmente con el label del grupo. */
.nav-subgroup-label {
    font-family: var(--font-sans);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
    opacity: 0.65;
    padding: 10px 12px 4px 20px;
    user-select: none;
}
.nav-subgroup-label:first-of-type {
    padding-top: 2px;
}

.theme-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin: 4px 0;
    width: 100%;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}
.theme-toggle:hover {
    background: var(--bg-card);
    color: var(--text);
    border-color: var(--border-strong);
}
.theme-toggle .theme-icon-sun,
.theme-toggle .theme-icon-moon { flex-shrink: 0; }

/* Mostrar sol en tema oscuro (para cambiar a claro), luna en tema claro */
[data-theme="light"] .theme-toggle .theme-icon-sun { display: none; }
[data-theme="light"] .theme-toggle .theme-icon-moon { display: block; }
[data-theme="dark"]  .theme-toggle .theme-icon-sun  { display: block; }
[data-theme="dark"]  .theme-toggle .theme-icon-moon { display: none; }

/* ============================================================
   UI v6.0 — Refinamientos estéticos Claude
   ============================================================ */
/* Headings editoriales con serif */
.page-title { font-family: var(--font-serif); font-weight: 500; letter-spacing: -0.015em; }
h1 { font-size: 28px; line-height: 1.2; }
h2 { font-size: 22px; line-height: 1.25; }
h3 { font-size: 17px; line-height: 1.3; }

/* Cards más aireadas */
.card, .stat-card {
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.card:hover, .stat-card:hover {
    box-shadow: var(--shadow);
}

/* Badges más suaves */
.badge, .nav-badge {
    font-family: var(--font-sans);
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Inputs más limpios */
input[type="text"], input[type="number"], input[type="email"],
input[type="password"], input[type="search"], select, textarea {
    font-family: var(--font-sans);
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Tablas con más respiración */
table { font-family: var(--font-sans); }
table th {
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* Links más discretos */
a { transition: color 0.15s ease; }

/* ============================================================
   UI v6.0 — Nuevas secciones de centralización (cs-*)
   ============================================================ */
.cs-hero {
    padding: 32px 0 20px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 28px;
}
.cs-hero-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 10px;
}
.cs-hero-title {
    font-family: var(--font-serif);
    font-size: 38px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0 0 10px;
    line-height: 1.1;
}
.cs-hero-sub {
    font-size: 15px;
    color: var(--text-secondary);
    max-width: 640px;
    line-height: 1.55;
}

.cs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}
.cs-tile {
    padding: 22px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: border-color 0.15s ease, transform 0.2s ease;
    position: relative;
}
.cs-tile:hover {
    border-color: var(--border-strong);
}
.cs-tile-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
.cs-tile h3 {
    font-family: var(--font-serif);
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 6px;
}
.cs-tile p {
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 14px;
}
.cs-tile-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    background: var(--bg-input);
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 100px;
    letter-spacing: 0.02em;
}

.cs-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}
.cs-stat {
    padding: 18px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cs-stat-val {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.01em;
    line-height: 1.1;
}
.cs-stat-lbl {
    font-size: 12px;
    color: var(--text-muted);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-weight: 500;
}

.cs-panel {
    padding: 24px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
}
.cs-panel h3 {
    font-family: var(--font-serif);
    font-size: 19px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
}
.cs-panel-sub {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin-bottom: 16px;
}
.cs-panel-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}
.cs-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}
.cs-cols strong { color: var(--text); font-weight: 600; }
@media (max-width: 680px) {
    .cs-cols { grid-template-columns: 1fr; }
    .cs-hero-title { font-size: 30px; }
}

.cs-providers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}
.cs-provider {
    padding: 18px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.cs-provider-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.cs-provider-head h3 {
    font-family: var(--font-serif);
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}
.cs-chip {
    font-size: 10.5px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 100px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.cs-chip-ok { background: rgba(92, 140, 98, 0.12); color: var(--accent-green); }
.cs-chip-warn { background: rgba(193, 154, 60, 0.14); color: var(--accent-yellow); }
.cs-provider-meta {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.7;
}
.cs-provider-meta strong { color: var(--text); font-weight: 600; }

/* ============================================================
   UI v6.0 — FIX MOBILE: página Compras redistribuida
   ============================================================ */
@media (max-width: 768px) {
    /* ---- Tabs + acciones: 2 filas en mobile ---- */
    .compras-tabs {
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        padding: 10px 14px;
        position: relative;
    }
    .compras-tab {
        flex: 0 0 auto;
        padding: 7px 14px !important;
        font-size: 13px !important;
    }
    .compras-tabs-right {
        flex-basis: 100%;
        order: 3;
        display: flex;
        gap: 6px;
        margin: 0;
        padding-top: 4px;
        border-top: 1px solid var(--border-light);
        width: 100%;
    }
    .compras-tabs-right .btn {
        flex: 1;
        justify-content: center;
        padding: 8px 10px;
        font-size: 12px;
    }

    /* ---- Status bar: chips más compactos + wrap limpio ---- */
    .compras-status-bar { padding: 8px 12px; }
    .compras-stats {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        align-items: center;
        font-size: 11.5px;
    }
    .compras-stats .prov-chip {
        padding: 3px 9px !important;
        font-size: 11px !important;
        border-radius: 100px !important;
        white-space: nowrap;
    }
    .compras-stats .compras-total {
        flex-basis: 100%;
        margin-top: 6px;
        font-size: 13px;
        font-weight: 600;
        color: var(--text);
    }
    .compras-stats .text-muted {
        font-size: 11px;
        color: var(--text-muted);
    }

    /* ---- Search: mejor padding para que el counter no pise el placeholder ---- */
    .compras-search-wrap {
        position: relative;
    }
    .compras-search-input {
        padding-right: 72px !important;
        font-size: 14px !important;
        height: 42px;
    }
    .compras-search-count {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 10.5px !important;
        color: var(--text-muted);
        white-space: nowrap;
        pointer-events: none;
    }

    /* ---- Filtros: grid 2x2 con respiración ---- */
    .compras-filters {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px !important;
        padding: 0 !important;
    }
    .compras-filters .compras-select {
        grid-column: span 2;
        width: 100% !important;
        padding: 9px 12px !important;
        font-size: 13px !important;
        height: 40px;
    }
    .compras-filters .compras-sort-btn {
        grid-column: 1 / 2;
        height: 36px;
        font-size: 12px;
    }
    .compras-filters .compras-stock-toggle {
        font-size: 12px !important;
        padding: 6px 10px !important;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 6px;
        height: 36px;
        display: flex;
        align-items: center;
    }
    /* primer toggle lado derecho de ARS */
    .compras-filters .compras-stock-toggle:nth-of-type(1) { grid-column: 2 / 3; }
    /* segundo toggle ocupa los 2 col */
    .compras-filters .compras-stock-toggle:nth-of-type(2) { grid-column: 1 / -1; justify-content: center; }

    /* ---- Card producto: más aire, tipografía más limpia ---- */
    #compras-table tbody tr {
        padding: 14px 16px !important;
        gap: 6px 10px !important;
    }
    #compras-table tbody tr:nth-child(even) {
        background: var(--bg-card-hover);
    }
    #compras-table tbody td:nth-child(1) {
        font-size: 13.5px !important;
        line-height: 1.35 !important;
        padding-right: 70px !important;
    }
    #compras-table tbody td:nth-child(2) {
        font-size: 16px !important;
        color: var(--accent-green);
    }
    #compras-table tbody td:nth-child(3) {
        font-size: 13.5px !important;
        font-weight: 600;
        color: var(--text);
        text-align: right;
    }
    #compras-table tbody td:nth-child(6) {
        top: 12px !important;
        right: 14px !important;
    }

    /* Chips de proveedor más refinados */
    #compras-table .prov-tag {
        font-size: 10.5px !important;
        padding: 3px 9px !important;
        border-radius: 100px !important;
        font-weight: 600;
    }
}

/* ============================================================
   UI v6.0 — FIX MOBILE: secciones nuevas (cs-*) + scroll tablas
   ============================================================ */
@media (max-width: 768px) {
    /* Hero sections responsive */
    .cs-hero { padding: 20px 0 16px; margin-bottom: 18px; }
    .cs-hero-title { font-size: 26px !important; }
    .cs-hero-sub { font-size: 13.5px; }
    .cs-hero-eyebrow { font-size: 10px; }

    /* Grids apilados */
    .cs-grid,
    .cs-providers,
    .cs-stats {
        grid-template-columns: 1fr !important;
    }
    .cs-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
    .cs-stat-val { font-size: 22px !important; }
    .cs-stat-lbl { font-size: 10.5px !important; }

    .cs-tile, .cs-provider, .cs-panel {
        padding: 18px !important;
    }
    .cs-panel-actions { flex-direction: column; }
    .cs-panel-actions .btn { width: 100%; }

    /* Tablas: scroll horizontal deslizable con momentum iOS */
    .table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        scrollbar-width: thin;
    }
    .table-wrap::-webkit-scrollbar { height: 4px; }
    .table-wrap::-webkit-scrollbar-thumb {
        background: var(--border-strong);
        border-radius: 4px;
    }
    .table-wrap::-webkit-scrollbar-track { background: transparent; }
    /* indicador de scroll horizontal: sombra al borde derecho si hay overflow */
    .table-wrap {
        background-image:
            linear-gradient(to right, var(--bg-card), var(--bg-card)),
            linear-gradient(to right, var(--bg-card), var(--bg-card)),
            linear-gradient(to right, rgba(44,43,40,0.08), transparent),
            linear-gradient(to left,  rgba(44,43,40,0.08), transparent);
        background-position: left center, right center, left center, right center;
        background-repeat: no-repeat;
        background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100%;
        background-attachment: local, local, scroll, scroll;
    }

    /* Stats / data cards globales: siempre visibles y deslizables */
    .stat-card, .card {
        min-width: 0;
        overflow-x: visible;
    }
    .stats-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    /* Charts contenedores: scroll horizontal si el chart es muy ancho */
    .chart-wrap, .chart-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Cards ocupan 100% del ancho disponible */
    .card {
        width: 100%;
        border-radius: var(--radius);
    }

    .mob-topbar { padding: 0 14px !important; }
    .mob-topbar-title { font-size: 17px !important; }
}

/* ============================================================
   UI v6.0 — FIX tablas deslizables también en desktop < 900px
   ============================================================ */
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
table { min-width: 100%; }
/* ============================================================
   UI v6.0 — Garantías
   ============================================================ */
.gar-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    padding: 28px 0 20px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.gar-hero-left { flex: 1; min-width: 280px; }
.gar-hero-actions { display: flex; gap: 8px; align-items: center; }

.gar-kpis {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}
.gar-kpi {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
    color: inherit;
    font-family: inherit;
}
.gar-kpi:hover {
    border-color: var(--border-strong);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}
.gar-kpi.active {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.gar-kpi-val {
    font-family: var(--font-serif);
    font-size: 26px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.01em;
    line-height: 1;
}
.gar-kpi-lbl {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}
.gar-kpi-warn  .gar-kpi-val { color: var(--accent-yellow); }
.gar-kpi-info  .gar-kpi-val { color: var(--accent-blue); }
.gar-kpi-ok    .gar-kpi-val { color: var(--accent-green); }
.gar-kpi-alert .gar-kpi-val { color: var(--accent-red); }

.gar-toolbar {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    margin-bottom: 14px;
    align-items: center;
}
.gar-search {
    position: relative;
    display: flex;
    align-items: center;
}
.gar-search svg {
    position: absolute;
    left: 12px;
    color: var(--text-muted);
    pointer-events: none;
}
.gar-search input {
    width: 100%;
    height: 38px;
    padding: 0 12px 0 36px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--text);
}
.gar-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.gar-filters select {
    height: 38px;
    padding: 0 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 12.5px;
    color: var(--text);
    min-width: 150px;
}

.gar-table th { font-size: 11px; padding: 10px 14px; }
.gar-table td { padding: 12px 14px; font-size: 13px; vertical-align: middle; }
.gar-table tbody tr:hover { background: var(--bg-card-hover); }
.gar-table .gar-tick-num {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-muted);
    font-weight: 600;
}
.gar-table .gar-cliente { font-weight: 600; color: var(--text); }
.gar-table .gar-cliente-sub {
    display: block;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--text-muted);
    margin-top: 2px;
}
.gar-table .gar-producto {
    font-size: 12.5px;
    color: var(--text-secondary);
    max-width: 320px;
}
.gar-table .gar-fecha {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.gar-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 100px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}
.gar-badge::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}
.gar-badge-pendiente          { color: var(--accent-yellow); background: color-mix(in srgb, var(--accent-yellow) 14%, transparent); }
.gar-badge-en_proceso         { color: var(--accent-blue);   background: color-mix(in srgb, var(--accent-blue) 14%, transparent); }
.gar-badge-esperando_repuesto { color: var(--accent-purple); background: color-mix(in srgb, var(--accent-purple) 14%, transparent); }
.gar-badge-resuelto           { color: var(--accent-green);  background: color-mix(in srgb, var(--accent-green) 14%, transparent); }
.gar-badge-rechazado          { color: var(--accent-red);    background: color-mix(in srgb, var(--accent-red) 14%, transparent); }

.gar-sla {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 600;
    font-family: var(--font-mono);
}
.gar-sla-ok      { color: var(--accent-green); }
.gar-sla-warn    { color: var(--accent-yellow); }
.gar-sla-expired { color: var(--accent-red); }

.gar-actions { display: flex; gap: 6px; justify-content: flex-end; }
.gar-action {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}
.gar-action:hover { background: var(--bg-card-hover); color: var(--text); }

.gar-empty { padding: 40px 20px; text-align: center; }
.gar-empty-content { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--text-muted); }
.gar-empty-content p { font-size: 14px; color: var(--text-secondary); margin: 0; }
.gar-empty-content small { font-size: 12px; color: var(--text-muted); }
.gar-empty svg { color: var(--text-muted); opacity: 0.5; }

.gar-integrations {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 24px;
}
.gar-int-card {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.gar-int-icon {
    width: 36px; height: 36px; min-width: 36px;
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
}
.gar-int-body h4 {
    font-family: var(--font-serif);
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 4px;
}
.gar-int-body p {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.45;
    margin: 0 0 8px;
}

.gar-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.gar-form-field { display: flex; flex-direction: column; gap: 4px; }
.gar-form-field.gar-form-full { grid-column: 1 / -1; }
.gar-form-field label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.gar-form-field input,
.gar-form-field select,
.gar-form-field textarea {
    padding: 8px 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    color: var(--text);
    font-family: inherit;
}
.gar-form-field textarea { resize: vertical; font-family: inherit; }

@media (max-width: 900px) {
    .gar-kpis { grid-template-columns: repeat(3, 1fr); }
    .gar-integrations { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .gar-hero { padding: 20px 0 14px; }
    .gar-hero-actions { width: 100%; flex-direction: column; }
    .gar-hero-actions .btn { width: 100%; justify-content: center; }
    .gar-kpis { grid-template-columns: repeat(2, 1fr); }
    .gar-toolbar { grid-template-columns: 1fr; }
    .gar-filters { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    .gar-filters select { min-width: 0; width: 100%; }
    .gar-filters select:first-child { grid-column: 1 / -1; }
    .gar-form-grid { grid-template-columns: 1fr; }

    .gar-table thead { display: none; }
    .gar-table tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 4px 10px;
        padding: 14px 16px;
        border-bottom: 1px solid var(--border);
    }
    .gar-table tbody td { padding: 2px 0; font-size: 13px; }
    .gar-table tbody td:nth-child(1) { grid-column: 1; grid-row: 1; font-weight: 600; font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); }
    .gar-table tbody td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
    .gar-table tbody td:nth-child(3) { grid-column: 1 / -1; grid-row: 3; }
    .gar-table tbody td:nth-child(4) { grid-column: 1; grid-row: 4; font-size: 11.5px; color: var(--text-muted); }
    .gar-table tbody td:nth-child(5) { grid-column: 2; grid-row: 1; justify-self: end; }
    .gar-table tbody td:nth-child(6) { grid-column: 1; grid-row: 5; font-size: 11.5px; }
    .gar-table tbody td:nth-child(7) { grid-column: 2; grid-row: 5; justify-self: end; }
    .gar-table tbody td:nth-child(8) { grid-column: 1 / -1; grid-row: 6; padding-top: 6px; }
    .gar-table tbody td:nth-child(8) .gar-actions { justify-content: flex-start; }
}
/* ============================================================
   UI v6.0 — Password generator modal + admin create
   ============================================================ */
.admin-gen-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text);
    user-select: none;
}
.admin-gen-toggle input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}
.admin-gen-hint {
    display: block;
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 4px;
    margin-left: 24px;
    line-height: 1.4;
}

.pwd-gen-warn {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    background: color-mix(in srgb, var(--accent-yellow) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-yellow) 40%, transparent);
    border-radius: 8px;
    color: var(--text);
    font-size: 12.5px;
    line-height: 1.5;
    margin-bottom: 16px;
}
.pwd-gen-warn svg {
    color: var(--accent-yellow);
    flex-shrink: 0;
    margin-top: 1px;
}
.pwd-gen-warn strong { display: block; margin-bottom: 2px; }

.pwd-gen-user {
    font-size: 12.5px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}
.pwd-gen-user strong {
    color: var(--text);
    font-weight: 600;
    font-family: var(--font-mono);
}

.pwd-gen-value-wrap {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 16px;
}
.pwd-gen-value {
    flex: 1;
    padding: 12px 14px;
    background: var(--bg-input);
    border: 1.5px solid var(--accent);
    border-radius: 8px;
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0.06em;
    text-align: center;
    user-select: all;
    word-break: break-all;
}
.pwd-gen-copy {
    flex-shrink: 0;
}
.pwd-gen-copy.copied {
    background: color-mix(in srgb, var(--accent-green) 14%, transparent);
    color: var(--accent-green);
    border-color: var(--accent-green);
}

.pwd-gen-confirm {
    padding: 10px 0;
    font-size: 12.5px;
    color: var(--text);
}
.pwd-gen-confirm label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}
.pwd-gen-confirm input[type="checkbox"] {
    width: 15px; height: 15px;
    accent-color: var(--accent);
    cursor: pointer;
}

#pwd-gen-ok:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ============================================================
   UI v6.0 — Productos (catálogo DB)
   ============================================================ */
.prod-toolbar .gar-filters { flex-wrap: wrap; }
.gar-chk {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px;
    padding: 0 12px;
    height: 38px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    color: var(--text);
}
.gar-chk input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; }

.prod-hint {
    font-size: 12px;
    color: var(--text-muted);
    padding: 8px 2px 14px;
}

.prod-table th { font-size: 11px; padding: 10px 14px; white-space: nowrap; }
.prod-table td { padding: 10px 14px; font-size: 12.5px; vertical-align: middle; }
.prod-table tbody tr:hover { background: var(--bg-card-hover); }
.prod-name { font-weight: 600; color: var(--text); line-height: 1.3; max-width: 360px; }
.prod-sku {
    font-family: var(--font-mono); font-size: 10.5px;
    color: var(--text-muted); margin-top: 2px;
}
.prod-cat { color: var(--text-secondary); }
.prod-price { font-variant-numeric: tabular-nums; white-space: nowrap; }
.prod-pvp { font-weight: 600; color: var(--text); }
.prod-iva { font-size: 11.5px; white-space: nowrap; }
.prod-iva-fuente {
    font-size: 9.5px; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.04em; margin-left: 4px;
}

@media (max-width: 768px) {
    .prod-table thead { display: none; }
    .prod-table tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 4px 10px;
        padding: 12px 14px;
        border-bottom: 1px solid var(--border);
    }
    .prod-table tbody td { padding: 2px 0; }
    .prod-table tbody td:nth-child(1) { grid-column: 1 / -1; grid-row: 1; }
    .prod-table tbody td:nth-child(2) { grid-column: 1; grid-row: 2; font-size: 11.5px; color: var(--text-secondary); }
    .prod-table tbody td:nth-child(3) { grid-column: 2; grid-row: 2; font-size: 11.5px; color: var(--text-muted); text-align: right; }
    .prod-table tbody td:nth-child(4) { grid-column: 1; grid-row: 3; }
    .prod-table tbody td:nth-child(5) { grid-column: 2; grid-row: 3; text-align: right; font-size: 11.5px; color: var(--text-secondary); }
    .prod-table tbody td:nth-child(6) { grid-column: 1 / -1; grid-row: 4; font-size: 15px; font-weight: 700; color: var(--accent); }
    .prod-table tbody td:nth-child(7) { grid-column: 1; grid-row: 5; }
    .prod-table tbody td:nth-child(8) { grid-column: 2; grid-row: 5; text-align: right; font-size: 11px; color: var(--text-muted); }
    .prod-table tbody td:nth-child(9) { display: none; }
}
/* ============================================================
   UI v6.0 — Garantías v2: Kanban + Tabla + Detalle completo
   ============================================================ */

/* KPIs v2: 7 columnas (responsive) */
.gar-kpis-v2 {
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}
@media (max-width: 1024px) {
    .gar-kpis-v2 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
    .gar-kpis-v2 { grid-template-columns: repeat(2, 1fr); }
}
.gar-kpis-v2 .gar-kpi-val { font-size: 22px; }
.gar-kpis-v2 .gar-kpi-lbl { font-size: 10px; }

/* Switch de vistas Kanban / Tabla */
.gar-view-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.gar-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-size: 12.5px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: var(--font-sans);
}
.gar-view-btn:hover { border-color: var(--border-strong); color: var(--text); }
.gar-view-btn.active {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent);
}
.gar-search-inline {
    flex: 1;
    min-width: 240px;
    position: relative;
    display: flex;
    align-items: center;
}
.gar-search-inline svg {
    position: absolute;
    left: 10px;
    color: var(--text-muted);
    pointer-events: none;
}
.gar-search-inline input {
    width: 100%;
    height: 34px;
    padding: 0 10px 0 32px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 12.5px;
    color: var(--text);
}

/* ============================================================
   Kanban board
   ============================================================ */
.gar-kanban {
    display: grid;
    grid-template-columns: repeat(7, minmax(240px, 1fr));
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
}
@media (max-width: 1400px) {
    .gar-kanban { grid-template-columns: repeat(7, 250px); }
}
.gar-kan-col {
    background: var(--bg-sidebar);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    min-height: 400px;
    max-height: 70vh;
}
.gar-kan-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--bg-sidebar);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    z-index: 1;
}
.gar-kan-title {
    font-family: var(--font-serif);
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
.gar-kan-count {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    background: var(--bg-card);
    border-radius: 100px;
    color: var(--text-secondary);
    border: 1px solid var(--border);
}
.gar-kan-body {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    scrollbar-width: thin;
}
.gar-kan-body::-webkit-scrollbar { width: 4px; }
.gar-kan-body::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }

/* Card del ticket en kanban */
.gar-kan-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 12px;
}
.gar-kan-card:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}
.gar-kan-card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.gar-kan-card-pedido {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--accent);
    font-weight: 700;
    letter-spacing: 0.02em;
}
.gar-kan-card-dias {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
}
.gar-kan-card-dias.warn { color: var(--accent-yellow); }
.gar-kan-card-dias.alert { color: var(--accent-red); }
.gar-kan-card-cliente {
    font-weight: 600;
    color: var(--text);
    font-size: 12.5px;
    line-height: 1.3;
    margin-bottom: 3px;
}
.gar-kan-card-componente {
    font-size: 11.5px;
    color: var(--text-secondary);
    line-height: 1.35;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.gar-kan-card-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 10px;
    color: var(--text-muted);
}

/* ============================================================
   Modal detalle del ticket — densidad alta, theme-consistent
   ============================================================ */
.gar-detail-panel {
    max-width: 920px !important;
    width: 95vw;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: 0 24px 72px rgba(0, 0, 0, 0.7);
}
.gar-detail-panel .modal-head {
    background: linear-gradient(180deg, var(--bg-sidebar) 0%, var(--bg-card) 100%);
    padding: 14px 22px;
    border-bottom: 1px solid var(--border);
}
.gar-detail-subtitle {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--accent);
    letter-spacing: 0.05em;
    margin-bottom: 2px;
    font-weight: 600;
}

.gar-detail-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    padding: 0 14px;
    overflow-x: auto;
    scrollbar-width: none;
    flex-shrink: 0;
    background: var(--bg-sidebar);
}
.gar-detail-tabs::-webkit-scrollbar { display: none; }
.gar-detail-tab {
    padding: 11px 16px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    font-family: var(--font-sans);
    white-space: nowrap;
    margin-bottom: -1px;
    letter-spacing: 0.01em;
}
.gar-detail-tab:hover { color: var(--text); background: var(--bg-card-hover); }
.gar-detail-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 600;
    background: var(--bg-card);
}

.gar-detail-body {
    overflow-y: auto;
    flex: 1;
    padding: 18px 22px;
    background: var(--bg-card);
}

.gar-detail-section { display: none; }
.gar-detail-section.active { display: block; animation: fadeIn 0.2s ease; }

.gar-field {
    margin-bottom: 12px;
}
.gar-field-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 5px;
    display: block;
}
.gar-field-value {
    font-size: 13px;
    color: var(--text);
    line-height: 1.45;
    word-break: break-word;
    white-space: pre-wrap;
}
.gar-field-value.empty {
    color: var(--text-muted);
    font-style: italic;
}
.gar-field-input {
    width: 100%;
    padding: 8px 11px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 13px;
    font-family: var(--font-sans);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.gar-field-input:hover { border-color: var(--border-strong); }
.gar-field-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    background: var(--bg);
}
textarea.gar-field-input {
    min-height: 72px;
    resize: vertical;
    font-family: var(--font-sans);
    line-height: 1.45;
}

/* Placeholder → "auto-rellenado desde Envío" (ver JS que agrega data-fallback) */
.gar-field-input[data-fallback]::placeholder {
    color: var(--text-muted);
    font-style: italic;
    opacity: 0.75;
}

.gar-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
}
.gar-field-grid .gar-field.full { grid-column: 1 / -1; }

.gar-field-link {
    color: var(--accent);
    text-decoration: underline dotted;
    font-size: 12.5px;
    word-break: break-all;
}

.gar-detail-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    flex-shrink: 0;
    padding: 12px 22px;
    border-top: 1px solid var(--border);
    background: var(--bg-sidebar);
}
.gar-detail-estado {
    display: flex;
    align-items: center;
    gap: 10px;
}
.gar-detail-estado label {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}
.gar-detail-estado select {
    padding: 7px 11px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--text);
    font-weight: 500;
    cursor: pointer;
}
.gar-detail-estado select:hover { border-color: var(--accent); }
.gar-detail-estado select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.gar-detail-actions {
    display: flex;
    gap: 8px;
}

/* Section headers dentro de tab (opcional, para agrupar bloques) */
.gar-section-heading {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 18px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--border);
}
.gar-section-heading:first-child { margin-top: 0; }

/* Tabla extendida */
.gar-tabla-view.hidden { display: none !important; }
.gar-kanban.hidden { display: none !important; }

.gar-table .gar-estado-cell {
    font-size: 10.5px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 100px;
    display: inline-block;
    background: var(--bg-input);
    border: 1px solid var(--border);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.gar-estado-cell.estado-pendiente            { color: var(--accent-yellow); border-color: var(--accent-yellow); }
.gar-estado-cell.estado-recibido             { color: var(--accent-blue); border-color: var(--accent-blue); }
.gar-estado-cell.estado-en_servicio_tecnico  { color: var(--accent-cyan); border-color: var(--accent-cyan); }
.gar-estado-cell.estado-en_administracion    { color: var(--accent-purple); border-color: var(--accent-purple); }
.gar-estado-cell.estado-en_logistica         { color: var(--accent-orange); border-color: var(--accent-orange); }
.gar-estado-cell.estado-listo_retiro_local   { color: var(--accent-orange); border-color: var(--accent-orange); }
.gar-estado-cell.estado-finalizado           { color: var(--accent-green); border-color: var(--accent-green); }
.gar-estado-cell.estado-rechazado            { color: var(--accent-red); border-color: var(--accent-red); }

/* Mobile */
@media (max-width: 768px) {
    .gar-kanban {
        grid-template-columns: repeat(7, 82vw);
        gap: 10px;
    }
    .gar-kan-col { min-height: 300px; max-height: 60vh; }
    .gar-detail-panel { max-height: 100vh; height: 100vh; width: 100vw; max-width: 100vw !important; border-radius: 0; }
    .gar-field-grid { grid-template-columns: 1fr; }
    .gar-detail-tabs { padding: 0 10px; }
    .gar-detail-tab { padding: 10px 12px; font-size: 12px; }
    .gar-detail-foot { flex-direction: column; align-items: stretch; }
    .gar-detail-foot .gar-detail-actions { width: 100%; justify-content: flex-end; }
}

/* Pedido + Cliente pegados en el header de la card kanban */
.gar-kan-card-header .gar-kan-card-pedido {
    flex: 1;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
}
.gar-kan-card-header .gar-kan-card-pedido::first-letter {
    color: var(--accent);
}

/* ============================================================
   UI v6.1 — RMA Cards (vista tipo producto) + DnD
   ============================================================ */
.gar-toolbar-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.gar-dnd-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--text-muted);
    padding: 5px 10px;
    background: var(--bg-card);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
}
.gar-dnd-hint svg { color: var(--accent); }

.gar-cards-wrap.hidden { display: none !important; }
.gar-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 14px;
}
.gar-cards-empty {
    grid-column: 1 / -1;
    padding: 60px 20px;
    text-align: center;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.gar-cards-empty svg { opacity: 0.4; }
.gar-cards-empty p { font-size: 15px; color: var(--text-secondary); margin: 0; }
.gar-cards-empty small { font-size: 12.5px; }

.gar-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.gar-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}
.gar-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}
.gar-card-num {
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: -0.01em;
    line-height: 1;
}
.gar-card-dias {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    padding: 3px 8px;
    background: var(--bg-input);
    border-radius: 100px;
    border: 1px solid var(--border);
    white-space: nowrap;
}
.gar-card-dias.warn  { color: var(--accent-yellow); border-color: color-mix(in srgb, var(--accent-yellow) 30%, transparent); }
.gar-card-dias.alert { color: var(--accent-red);    border-color: color-mix(in srgb, var(--accent-red) 30%, transparent); }
.gar-card-cliente {
    font-family: var(--font-serif);
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.005em;
    line-height: 1.3;
}
.gar-card-comp {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.gar-card-serie {
    font-size: 10.5px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
}
.gar-card-hl {
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.gar-card-hl-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.gar-card-hl-value {
    font-size: 12px;
    color: var(--text);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.gar-card-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-light);
}
.gar-card-chip {
    font-size: 10.5px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 100px;
    letter-spacing: 0.02em;
    background: var(--bg-input);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    white-space: nowrap;
}
.gar-card-chip.chip-green  { color: var(--accent-green);  background: color-mix(in srgb, var(--accent-green) 12%, transparent); border-color: color-mix(in srgb, var(--accent-green) 28%, transparent); }
.gar-card-chip.chip-orange { color: var(--accent-orange); background: color-mix(in srgb, var(--accent-orange) 12%, transparent); border-color: color-mix(in srgb, var(--accent-orange) 28%, transparent); }

/* DnD feedback */
.gar-kan-card.dragging { opacity: 0.4; cursor: grabbing; }
.gar-kan-card { cursor: grab; }
.gar-kan-body.drop-target {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border-radius: var(--radius);
    outline: 2px dashed var(--accent);
    outline-offset: -4px;
}

@media (max-width: 768px) {
    .gar-cards-grid { grid-template-columns: 1fr; }
    .gar-card-num { font-size: 20px; }
}

/* Contador compacto en subsecciones RMA (al lado del título) */
.gar-sector-count {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin-left: 10px;
    font-family: var(--font-sans);
    font-weight: 400;
}
.gar-sector-count .gar-count-num {
    font-family: var(--font-mono);
    font-size: 0.55em;
    color: var(--accent);
    background: var(--accent-soft);
    padding: 3px 10px;
    border-radius: 100px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.gar-sector-count .gar-count-label {
    font-size: 0.32em;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
}

/* Ocultar los 7 KPIs en subsecciones */
.gar-kpis.hidden { display: none !important; }


/* ============================================================
   PEDIDOS INTERNOS — estilo alineado con Garantías v2
   Reemplaza la planilla "COMPRAS PRODUCTOS NUEVOS - <MES>.csv".
   ============================================================ */

/* ---------- KPIs clickeables (filtros rápidos) ---------- */
.pedidos-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 18px 0 16px;
}
.pn-kpi {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
    color: inherit;
    font-family: inherit;
}
.pn-kpi:hover {
    border-color: var(--border-strong);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}
.pn-kpi.active {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.pn-kpi-val {
    font-family: var(--font-serif);
    font-size: 26px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.01em;
    line-height: 1;
}
.pn-kpi-lbl {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}
.pn-kpi-warn  .pn-kpi-val { color: var(--accent-yellow); }
.pn-kpi-info  .pn-kpi-val { color: var(--accent-blue); }
.pn-kpi-ok    .pn-kpi-val { color: var(--accent-green); }

/* ---------- Toolbar (search + filtros + acciones) ---------- */
.pedidos-toolbar {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
}
.pedidos-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.pedidos-search-input {
    flex: 1;
    min-width: 260px;
    height: 38px;
    padding: 0 12px 0 36px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--text);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23918e84' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
    background-repeat: no-repeat;
    background-position: 12px center;
}
.pedidos-search-input:focus {
    outline: none;
    border-color: var(--accent);
}
.pedidos-filter-select,
.pedidos-filter-date {
    height: 38px;
    padding: 0 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 12.5px;
    color: var(--text);
    min-width: 150px;
    font-family: inherit;
}
.pedidos-filter-select:focus,
.pedidos-filter-date:focus {
    outline: none;
    border-color: var(--accent);
}
.pedidos-filter-date { min-width: 140px; }
.pedidos-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ---------- Lista de pedidos (cards agrupadas) ---------- */
.pedidos-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pedido-group {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color 0.15s;
}
.pedido-group:hover { border-color: var(--border-strong); }
.pedido-group.open { border-color: var(--accent); box-shadow: var(--shadow); }

.pedido-group-head {
    display: grid;
    grid-template-columns: 28px auto 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 14px 18px;
    cursor: pointer;
    user-select: none;
}
.pedido-group-head:hover { background: var(--bg-card-hover); }
.pedido-group.open .pedido-group-head { border-bottom: 1px solid var(--border); background: var(--bg-card-hover); }

.pedido-collapse-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
    font-size: 11px;
}
.pedido-group-head:hover .pedido-collapse-btn { color: var(--text); border-color: var(--border-strong); }

.pedido-head-id {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pedido-numero-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}
.pedido-numero {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 600;
    color: var(--text);
    line-height: 1;
    letter-spacing: -0.01em;
}
.pedido-numero.quantum {
    color: var(--accent);
}

.pedido-head-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.pedido-head-row1 {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--text-secondary);
    font-size: 13px;
}
.pedido-head-row2 {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 11.5px;
    color: var(--text-muted);
}
.pedido-fecha {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text-secondary);
    font-family: var(--font-mono);
}
.pedido-lineas-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    color: var(--text-muted);
    padding: 2px 9px;
    background: var(--bg-card-hover);
    border-radius: 100px;
    border: 1px solid var(--border);
}
.pedido-prov-tag {
    display: inline-flex;
    align-items: center;
    font-size: 10.5px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 100px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.pedido-head-badges {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Badges de estado (mismo patrón que gar-badge) */
.pn-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 100px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}
.pn-badge::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}
.pn-badge-pendiente { color: var(--text-muted);    background: color-mix(in srgb, var(--text-muted) 10%, transparent); }
.pn-badge-parcial   { color: var(--accent-yellow); background: color-mix(in srgb, var(--accent-yellow) 14%, transparent); }
.pn-badge-completo  { color: var(--accent-green);  background: color-mix(in srgb, var(--accent-green) 14%, transparent); }

/* ---------- Tabla de líneas (dentro del grupo expandido) ---------- */
.pedido-lineas-wrap {
    background: var(--bg-card);
    overflow-x: auto;
}
.pedido-lineas-table {
    width: 100%;
    border-collapse: collapse;
}
.pedido-lineas-table thead th {
    text-align: left;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    background: var(--bg-card-hover);
    white-space: nowrap;
}
.pedido-lineas-table td {
    padding: 12px 14px;
    font-size: 13px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    vertical-align: middle;
}
.pedido-lineas-table tr:last-child td { border-bottom: none; }
.pedido-lineas-table tr:hover td { background: var(--bg-card-hover); }

.pedido-producto { max-width: 420px; }
.pedido-cantidad {
    width: 60px;
    text-align: center;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}
.pedido-proveedor {
    width: 120px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}
.pedido-check {
    width: 70px;
    text-align: center;
}
.pedido-check input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: var(--accent-green);
    cursor: pointer;
}
.pedido-flag.si { color: var(--accent-green); font-weight: 700; }
.pedido-flag.no { color: var(--text-muted); }
.pedido-fecha-venta {
    width: 90px;
    font-size: 11.5px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    white-space: nowrap;
}
.pedido-comentario {
    max-width: 200px;
    color: var(--text-muted);
    font-size: 11.5px;
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pedido-actions-cell { width: 36px; text-align: center; }
.pedido-linea-del {
    width: 26px; height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}
.pedido-linea-del:hover {
    color: var(--accent-red);
    background: color-mix(in srgb, var(--accent-red) 10%, transparent);
    border-color: var(--accent-red);
}

/* ---------- Producto + bubble de link al proveedor ---------- */
.pedido-prod-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.pedido-prod-nombre {
    flex: 1;
    min-width: 0;
    font-weight: 500;
    color: var(--text);
    line-height: 1.3;
}
.pedido-prod-bubble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    padding: 0;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--accent);
    text-decoration: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s;
    position: relative;
}
.pedido-prod-bubble:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    transform: translateY(-1px);
}
.pedido-prod-bubble svg { display: block; }
.pedido-prod-bubble.multi::after {
    content: attr(data-count);
    position: absolute;
    top: -6px; right: -6px;
    font-size: 9px;
    font-weight: 700;
    background: var(--accent);
    color: white;
    border-radius: 10px;
    padding: 0 5px;
    line-height: 1.5;
    min-width: 14px;
    text-align: center;
}
.pedido-prod-precio {
    font-size: 11px;
    color: var(--accent-green);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
}

/* Popover de alternativas (múltiples proveedores) */
.pedido-alts-popover {
    position: absolute;
    z-index: 1500;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    min-width: 320px;
    max-width: 420px;
    max-height: 380px;
    overflow-y: auto;
    padding: 6px 0;
    animation: pedidosModalPop 0.14s ease-out;
}
.pedido-alts-title {
    padding: 10px 14px;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
    background: var(--bg-card-hover);
}
.pedido-alts-item {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 12.5px;
    align-items: center;
}
.pedido-alts-item:last-child { border-bottom: none; }
.pedido-alts-item:hover { background: var(--bg-card-hover); }
.pedido-alts-stock {
    font-size: 10px;
    line-height: 1;
}
.pedido-alts-stock.si { color: var(--accent-green); }
.pedido-alts-stock.no { color: var(--text-muted); }
.pedido-alts-prov {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--accent);
}
.pedido-alts-precio {
    color: var(--text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.pedido-alts-link {
    color: var(--accent);
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid var(--border);
    transition: all 0.15s;
}
.pedido-alts-link:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
}

/* ============================================================
   MODAL — Nuevo pedido / Import CSV
   Backdrop oscuro + contenido sólido gris card.
   ============================================================ */
#pedidos-nuevo-modal,
#pedidos-import-modal {
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 32px 16px;
    overflow-y: auto;
}
#pedidos-nuevo-modal .modal-content,
#pedidos-import-modal .modal-content {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    max-height: calc(100vh - 64px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.45);
    animation: pedidosModalPop 0.18s ease-out;
}
#pedidos-nuevo-modal .modal-wide.modal-content,
#pedidos-nuevo-modal .modal-content.modal-wide {
    max-width: 960px;
}
#pedidos-nuevo-modal .modal-head,
#pedidos-import-modal .modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border);
}
#pedidos-nuevo-modal .modal-head h2,
#pedidos-import-modal .modal-head h2 {
    margin: 0;
    font-size: 20px;
    font-family: var(--font-serif);
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.01em;
}
#pedidos-nuevo-modal .modal-close,
#pedidos-import-modal .modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 26px;
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.15s;
}
#pedidos-nuevo-modal .modal-close:hover,
#pedidos-import-modal .modal-close:hover {
    color: var(--text);
    background: var(--bg-card-hover);
}
#pedidos-nuevo-modal .modal-body,
#pedidos-import-modal .modal-body {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}
#pedidos-nuevo-modal .modal-foot,
#pedidos-import-modal .modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px;
    border-top: 1px solid var(--border);
    background: var(--bg-card-hover);
}
@keyframes pedidosModalPop {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Form grid estilo garantías */
.pedidos-form-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 14px;
    margin-bottom: 4px;
}
.pn-field { display: flex; flex-direction: column; gap: 6px; }
.pn-field.pn-field-full { grid-column: 1 / -1; }
.pn-field label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.pn-field input,
.pn-field select,
.pn-field textarea {
    padding: 9px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--text);
    font-family: inherit;
    transition: border-color 0.15s;
}
.pn-field input:focus,
.pn-field select:focus,
.pn-field textarea:focus {
    outline: none;
    border-color: var(--accent);
}
.pn-hint {
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.4;
}

/* Sección de líneas: cabecera separada + rows card */
.pedidos-lineas-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 22px 0 10px 0;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}
.pedidos-lineas-head h3 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}
.pedidos-lineas-head .pn-lineas-count {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: 8px;
    font-weight: 400;
}
.pedidos-lineas {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 380px;
    overflow-y: auto;
    padding: 2px;
}

/* Row de línea: grid coherente, fields con respiro */
.pn-linea-row {
    display: grid;
    grid-template-columns: minmax(260px, 2.6fr) 80px 200px minmax(160px, 1.2fr) 36px;
    gap: 8px;
    align-items: flex-start;
    padding: 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.pn-linea-row:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.pn-linea-row input,
.pn-linea-row select {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    background: var(--bg-card);
    color: var(--text);
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
}
.pn-linea-row input:focus,
.pn-linea-row select:focus {
    outline: none;
    border-color: var(--accent);
}
.pn-linea-row input[type="number"] {
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.pn-del-linea {
    width: 32px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
    transition: all 0.15s;
}
.pn-del-linea:hover {
    color: var(--accent-red);
    background: color-mix(in srgb, var(--accent-red) 10%, transparent);
    border-color: var(--accent-red);
}

/* ---------- Picker autocomplete ---------- */
.pn-picker { position: relative; }
.pn-picker-dropdown {
    position: fixed;
    max-height: 320px;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
    z-index: 3000;
}
.pn-picker-empty,
.pn-picker-loading {
    padding: 12px 14px;
    color: var(--text-muted);
    font-size: 12.5px;
    font-style: italic;
}
.pn-picker-item {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    font-size: 12.5px;
}
.pn-picker-item:last-child { border-bottom: none; }
.pn-picker-item:hover,
.pn-picker-item.active { background: var(--accent-soft); }
.pn-pk-nombre {
    grid-column: 1/2;
    color: var(--text);
    font-weight: 500;
    line-height: 1.3;
}
.pn-pk-precio {
    grid-column: 2/3;
    color: var(--text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-size: 13px;
}
.pn-pk-meta {
    grid-column: 1/-1;
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 10.5px;
    color: var(--text-muted);
    flex-wrap: wrap;
    margin-top: 2px;
}
.pn-pk-prov {
    padding: 2px 8px;
    border-radius: 100px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    font-size: 10px;
    letter-spacing: 0.04em;
    font-weight: 700;
    text-transform: uppercase;
}
.pn-pk-stock-si { color: var(--accent-green); font-weight: 600; }
.pn-pk-stock-no { color: var(--text-muted); font-style: italic; }
.pn-pk-sku { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }
.pn-pk-link {
    color: var(--accent);
    text-decoration: none;
    font-size: 11px;
    margin-left: auto;
}
.pn-pk-link:hover { text-decoration: underline; }
.pn-pk-freetext {
    padding: 9px 12px;
    font-size: 11.5px;
    color: var(--text-muted);
    background: var(--bg-card-hover);
    border-top: 1px dashed var(--border);
    cursor: pointer;
}
.pn-pk-freetext:hover { color: var(--accent); }

/* Chip de producto ya elegido (debajo del input) */
.pn-pk-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 10.5px;
    color: var(--text-muted);
    flex-wrap: wrap;
    padding: 4px 8px;
    background: color-mix(in srgb, var(--accent-green) 8%, transparent);
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--accent-green) 20%, transparent);
}
.pn-pk-chip .pn-pk-prov { font-size: 9px; padding: 1px 6px; }
.pn-pk-chip a { color: var(--accent); text-decoration: none; font-weight: 600; }
.pn-pk-chip a:hover { text-decoration: underline; }

/* Resultado de import */
.pedidos-import-result {
    padding: 12px 14px;
    background: var(--bg-card-hover);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    font-size: 13px;
}
.pedidos-import-result ul {
    margin: 8px 0 0 20px;
    padding: 0;
    font-size: 12.5px;
    line-height: 1.6;
}
.import-success { color: var(--accent-green); font-weight: 700; margin: 0 0 6px 0; }
.import-error { color: var(--accent-red); margin: 0; font-weight: 600; }
.import-warn { color: var(--accent-yellow); font-size: 12px; margin: 10px 0 0 0; }

.link-btn {
    background: transparent;
    border: none;
    color: var(--accent);
    text-decoration: underline;
    cursor: pointer;
    font-size: inherit;
    padding: 0;
    font-family: inherit;
}

/* ---------- Empty state ---------- */
.pedidos-container .empty-state {
    padding: 60px 24px;
    text-align: center;
    color: var(--text-muted);
    background: var(--bg-card);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
    .pedidos-toolbar { grid-template-columns: 1fr; }
    .pedidos-actions { justify-content: flex-end; flex-wrap: wrap; }
    .pn-linea-row { grid-template-columns: 1fr 80px 1fr 36px; }
    .pn-linea-row .pn-comentario { grid-column: 1 / -1; }
    .pedidos-form-grid { grid-template-columns: 1fr 1fr; }
    .pn-field.pn-field-full { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
    .pedidos-kpis { grid-template-columns: repeat(2, 1fr); }
    .pedido-group-head { grid-template-columns: 28px 1fr; grid-auto-rows: auto; gap: 10px; }
    .pedido-head-id { grid-column: 2; }
    .pedido-head-main { grid-column: 2; }
    .pedido-head-badges { grid-column: 1 / -1; justify-content: flex-start; }
    .pedidos-form-grid { grid-template-columns: 1fr; }
    .pn-linea-row { grid-template-columns: 1fr 80px 36px; }
    .pn-linea-row .pn-proveedor { grid-column: 1 / 3; }
    .pn-linea-row .pn-comentario { grid-column: 1 / -1; }
    .pedido-lineas-table thead { display: none; }
    .pedido-lineas-table tbody tr {
        display: grid;
        grid-template-columns: 1fr auto auto;
        gap: 4px 10px;
        padding: 12px 14px;
        border-bottom: 1px solid var(--border);
    }
    .pedido-lineas-table tbody td { padding: 2px 0; border: none; }
    .pedido-lineas-table tbody td.pedido-producto { grid-column: 1 / -1; grid-row: 1; max-width: none; }
    .pedido-lineas-table tbody td.pedido-cantidad { grid-column: 1; grid-row: 2; text-align: left; font-size: 11px; color: var(--text-muted); }
    .pedido-lineas-table tbody td.pedido-proveedor { grid-column: 2; grid-row: 2; }
    .pedido-lineas-table tbody td.pedido-fecha-venta { grid-column: 3; grid-row: 2; }
    .pedido-lineas-table tbody td.pedido-check { grid-column: span 1; grid-row: 3; width: auto; }
    .pedido-lineas-table tbody td.pedido-comentario { grid-column: 1 / -1; grid-row: 4; max-width: none; white-space: normal; }
    .pedido-lineas-table tbody td.pedido-actions-cell { grid-column: 3; grid-row: 3; justify-self: end; }
}

/* ==================================================================== */
/* ANALISIS DE PLACAS — UI fluida, responsive (desktop tabla / mobile cards) */
/* ==================================================================== */

/* --- Header --- */
[id^="page-analisis-"] .ap-header {
    margin-bottom: 1.25rem;
}
[id^="page-analisis-"] .ap-header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* --- Tabs Outlet / Nuevo (v2.6.0) --- */
[id^="page-analisis-"] .ap-tipo-tabs {
    display: flex;
    gap: 6px;
    margin: 0 0 14px 0;
    padding: 4px;
    background: var(--bg-input, rgba(0,0,0,0.03));
    border: 1px solid var(--border, rgba(0,0,0,0.08));
    border-radius: 10px;
    width: fit-content;
}
[id^="page-analisis-"] .ap-tipo-tab {
    padding: 8px 18px;
    border-radius: 7px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary, #666);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
[id^="page-analisis-"] .ap-tipo-tab:hover:not(.active) {
    background: var(--bg-hover, rgba(0,0,0,0.04));
    color: var(--text, #222);
}
[id^="page-analisis-"] .ap-tipo-tab.active {
    background: var(--accent, #c15f3c);
    color: #fff;
    border-color: var(--accent, #c15f3c);
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
[id^="page-analisis-"] .ap-eyebrow {
    font-size: 0.72em;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 0.2rem;
}
[id^="page-analisis-"] .ap-title {
    font-family: "Source Serif 4", serif;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    margin: 0;
    font-weight: 400;
    letter-spacing: -0.01em;
}
[id^="page-analisis-"] .ap-actions {
    display: flex;
    gap: 0.45rem;
    align-items: center;
}
[id^="page-analisis-"] .ap-btn-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    cursor: pointer;
    font-size: 1.15em;
    transition: background 150ms, color 150ms, border-color 150ms;
}
[id^="page-analisis-"] .ap-btn-icon:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
/* Gate T6 (juez): .ap-btn-primary tambien se usa en Salud Scraping / Errores /
   Analisis del Ciclo, donde no matcheaba el scope [id^="page-analisis-"] y quedaba
   como boton NATIVO del browser (fondo blanco en tema oscuro). Pre-existente. */
#page-proveedores .ap-btn-primary,
#page-reportes .ap-btn-primary,
#page-acceso-denegado .ap-btn-primary,
#page-scraper-health .ap-btn-primary,
#page-errores .ap-btn-primary,
#page-ciclo-analytics .ap-btn-primary,
[id^="page-analisis-"] .ap-btn-primary {
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 150ms, box-shadow 150ms;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.02em;
}
#page-proveedores .ap-btn-primary:hover,
#page-reportes .ap-btn-primary:hover,
#page-acceso-denegado .ap-btn-primary:hover,
#page-scraper-health .ap-btn-primary:hover,
#page-errores .ap-btn-primary:hover,
#page-ciclo-analytics .ap-btn-primary:hover,
[id^="page-analisis-"] .ap-btn-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    box-shadow: 0 2px 8px var(--accent-soft);
}
#page-proveedores .ap-btn-primary:disabled,
#page-reportes .ap-btn-primary:disabled,
#page-acceso-denegado .ap-btn-primary:disabled,
#page-scraper-health .ap-btn-primary:disabled,
#page-errores .ap-btn-primary:disabled,
#page-ciclo-analytics .ap-btn-primary:disabled,
[id^="page-analisis-"] .ap-btn-primary:disabled {
    opacity: 0.7;
    cursor: wait;
}
.ap-spin {
    display: inline-block;
    animation: ap-spin 1s linear infinite;
}
@keyframes ap-spin { to { transform: rotate(360deg); } }

/* ============ CANDIDATOS PANEL ============ */
[id^="page-analisis-"] .ap-candidatos-wrap,
.ap-candidatos-wrap {
    margin: 12px 0 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-card);
    overflow: hidden;
}
.ap-candidatos-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: linear-gradient(90deg, var(--bg-sidebar), var(--bg-card));
    border: none;
    color: var(--text);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background 150ms;
}
.ap-candidatos-toggle:hover {
    background: var(--bg-card-hover);
}
.ap-candidatos-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 100px;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}
.ap-candidatos-chevron {
    margin-left: auto;
    transition: transform 200ms;
    color: var(--text-muted);
}
.ap-candidatos-wrap.open .ap-candidatos-chevron {
    transform: rotate(180deg);
}
.ap-candidatos-panel {
    padding: 14px 18px 16px;
    border-top: 1px solid var(--border);
    animation: ap-fadein 0.2s ease;
}
.ap-candidatos-panel.hidden { display: none; }
.ap-candidatos-help {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-bottom: 10px;
    line-height: 1.5;
}
#ap-candidatos-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}
.ap-cand-card {
    padding: 10px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: border-color 150ms;
}
.ap-cand-card:hover { border-color: var(--accent); }
.ap-cand-card.selected {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.ap-cand-card input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    flex-shrink: 0;
    margin: 0;
}
.ap-cand-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ap-cand-nombre {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ap-cand-meta {
    font-size: 10.5px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}
.ap-cand-fuente {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--bg-card);
    color: var(--text-secondary);
    flex-shrink: 0;
}
.ap-cand-fuente.snapshot { color: var(--accent-blue); }
.ap-cand-fuente.proveedor { color: var(--accent-green); }
.ap-candidatos-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}
.ap-btn-ghost {
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px dashed var(--border);
    background: transparent;
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 150ms;
}
.ap-btn-ghost:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}

/* Chips de filtro (Outlet CPU/RAM/SSD) */
.ao-chip {
    padding: 5px 14px;
    border-radius: 100px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 150ms;
}
.ao-chip:hover {
    border-color: var(--accent);
    color: var(--text);
}
.ao-chip.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* Progress panel — inline en la header de analisis-placas */
[id^="page-analisis-"] .ap-progress-panel {
    margin-top: 14px;
    padding: 14px 18px;
    background: var(--bg-card);
    border: 1px solid var(--accent);
    border-radius: 10px;
    box-shadow: 0 2px 12px var(--accent-soft);
    animation: ap-fadein 0.25s ease;
}
[id^="page-analisis-"] .ap-progress-panel.hidden { display: none; }
@keyframes ap-fadein { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

[id^="page-analisis-"] .ap-progress-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    gap: 12px;
}
[id^="page-analisis-"] .ap-progress-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
}
[id^="page-analisis-"] .ap-progress-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid var(--accent-soft);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: ap-spin 0.8s linear infinite;
    flex-shrink: 0;
}
[id^="page-analisis-"] .ap-progress-meta {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-secondary);
    display: flex;
    gap: 8px;
    align-items: center;
}
[id^="page-analisis-"] .ap-progress-sep { opacity: 0.4; }
[id^="page-analisis-"] .ap-progress-bar-wrap {
    height: 8px;
    background: var(--bg-input);
    border-radius: 100px;
    overflow: hidden;
    border: 1px solid var(--border);
}
[id^="page-analisis-"] .ap-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-hover) 50%, var(--accent) 100%);
    background-size: 200% 100%;
    border-radius: 100px;
    transition: width 0.4s ease;
    animation: ap-progress-shimmer 1.8s linear infinite;
}
@keyframes ap-progress-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}
[id^="page-analisis-"] .ap-progress-detail {
    margin-top: 8px;
    font-size: 11.5px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    min-height: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
[id^="page-analisis-"] .ap-progress-panel.done {
    border-color: var(--accent-green);
    box-shadow: 0 2px 12px rgba(140, 184, 127, 0.25);
}
[id^="page-analisis-"] .ap-progress-panel.done .ap-progress-bar {
    background: var(--accent-green);
    animation: none;
}
[id^="page-analisis-"] .ap-progress-panel.done .ap-progress-spinner {
    border-color: var(--accent-green);
    border-top-color: transparent;
    animation: none;
}
[id^="page-analisis-"] .ap-progress-panel.error {
    border-color: var(--accent-red);
}
[id^="page-analisis-"] .ap-progress-panel.error .ap-progress-bar {
    background: var(--accent-red);
    animation: none;
}

[id^="page-analisis-"] .ap-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
}
[id^="page-analisis-"] .ap-kpi {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.7rem 0.95rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
[id^="page-analisis-"] .ap-kpi-label {
    font-size: 0.7em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
[id^="page-analisis-"] .ap-kpi-value {
    font-size: 1.05em;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
[id^="page-analisis-"] .ap-kpi-hint .ap-kpi-value {
    font-size: 0.75em;
    font-weight: 400;
    color: var(--text-muted);
    line-height: 1.4;
}

/* --- Desktop vs Mobile show/hide --- */
[id^="page-analisis-"] .ap-desktop { display: block; }
[id^="page-analisis-"] .ap-mobile  { display: none; }
@media (max-width: 820px) {
    [id^="page-analisis-"] .ap-desktop { display: none; }
    [id^="page-analisis-"] .ap-mobile  { display: block; }
}

/* --- TABLE (desktop) --- */
[id^="page-analisis-"] .ap-table-scroll {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: auto;
    max-height: calc(100vh - 280px);
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    cursor: grab;
    scroll-behavior: auto; /* desactivar smooth para que el drag responda 1:1 */
    scrollbar-color: var(--accent) var(--bg-card);  /* Firefox */
    scrollbar-width: thin;
}
[id^="page-analisis-"] .ap-table-scroll.is-panning {
    cursor: grabbing;
    user-select: none;
}
[id^="page-analisis-"] .ap-table-scroll.is-panning * {
    cursor: grabbing !important;
}
/* Scrollbar custom (WebKit) */
[id^="page-analisis-"] .ap-table-scroll::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
[id^="page-analisis-"] .ap-table-scroll::-webkit-scrollbar-track {
    background: var(--bg-sidebar);
    border-radius: 12px;
    margin: 2px;
}
[id^="page-analisis-"] .ap-table-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--accent) 0%, var(--accent-hover) 100%);
    border-radius: 12px;
    border: 2px solid var(--bg-sidebar);
    min-height: 40px;
    min-width: 40px;
}
[id^="page-analisis-"] .ap-table-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--accent-hover);
    border-width: 1px;
}
[id^="page-analisis-"] .ap-table-scroll::-webkit-scrollbar-corner {
    background: var(--bg-sidebar);
}
/* Hint visual de que se puede draggear (solo cuando no hay input focus) */
[id^="page-analisis-"] .ap-table-scroll input,
[id^="page-analisis-"] .ap-table-scroll a,
[id^="page-analisis-"] .ap-table-scroll button,
[id^="page-analisis-"] .ap-table-scroll textarea,
[id^="page-analisis-"] .ap-table-scroll select {
    cursor: auto;
}
[id^="page-analisis-"] .ap-table {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.82em;
    font-family: "Inter", sans-serif;
    width: max-content;
    min-width: 100%;
}
[id^="page-analisis-"] .ap-table thead th {
    position: sticky;
    top: 0;
    background: var(--bg-sidebar);
    font-weight: 600;
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid var(--border);
    text-align: center;
    white-space: nowrap;
    z-index: 3;
}
[id^="page-analisis-"] .ap-row-supergroup th {
    border-bottom: 2px solid var(--border);
    padding: 0.4rem 0.5rem;
    font-size: 0.72em;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 700;
    top: 0;
}
[id^="page-analisis-"] .ap-row-head th {
    top: 34px;
    font-size: 0.78em;
    font-weight: 600;
}
[id^="page-analisis-"] .ap-group-mercado    { background: var(--bg-sidebar); color: #4a7a4e; }
[id^="page-analisis-"] .ap-group-quantum-a  { background: var(--bg-sidebar); color: var(--accent); }
[id^="page-analisis-"] .ap-group-mayorista  { background: var(--bg-sidebar); color: #6b5ea8; }
[id^="page-analisis-"] .ap-group-quantum-n  { background: var(--bg-sidebar); color: var(--accent); }
[id^="page-analisis-"] .ap-group-margen     { background: var(--bg-sidebar); color: #8a5a2b; }
[id^="page-analisis-"] .ap-group-comp       { background: var(--bg-sidebar); color: var(--text-muted); }

[id^="page-analisis-"] .ap-table tbody td {
    padding: 0.35rem 0.55rem;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-size: 0.9em;
}
[id^="page-analisis-"] .ap-table tbody tr:hover td {
    background: rgba(218, 119, 86, 0.05);
}

[id^="page-analisis-"] .ap-col-modelo {
    position: sticky;
    left: 0;
    z-index: 2;
    text-align: left !important;
    background: var(--bg-card);
    /* QUA-8: ancho fijo para que el offset sticky de la col 5 sea exacto */
    width: var(--ap-col1-w, 220px);
    min-width: var(--ap-col1-w, 220px);
    max-width: var(--ap-col1-w, 220px);
    border-right: 2px solid var(--accent);
    font-weight: 600;
    padding: 0.5rem 0.9rem !important;
}
[id^="page-analisis-"] .ap-table thead .ap-col-modelo { z-index: 4; background: var(--bg-sidebar); }

/* Inputs editables */
[id^="page-analisis-"] .ap-input {
    width: 100%;
    min-width: 80px;
    padding: 0.28rem 0.4rem;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--text);
    text-align: right;
    font-size: inherit;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    transition: all 120ms;
}
[id^="page-analisis-"] .ap-input:hover {
    border-color: var(--border);
    background: var(--bg);
}
[id^="page-analisis-"] .ap-input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg);
    box-shadow: 0 0 0 3px rgba(218, 119, 86, 0.15);
}
[id^="page-analisis-"] .ap-input.ap-saving {
    border-color: #f0a830;
    background: rgba(240, 168, 48, 0.08);
}
[id^="page-analisis-"] .ap-input.ap-saved {
    border-color: #4caf50;
    animation: ap-flash 900ms ease-out;
}
[id^="page-analisis-"] .ap-input.ap-error {
    border-color: #e54b4b;
    background: rgba(229, 75, 75, 0.08);
}
@keyframes ap-flash {
    0% { background: rgba(76, 175, 80, 0.22); }
    100% { background: var(--bg); }
}

[id^="page-analisis-"] .ap-col-edit {
    background: rgba(218, 119, 86, 0.03);
}
[data-theme="dark"] [id^="page-analisis-"] .ap-col-edit {
    background: rgba(218, 119, 86, 0.06);
}

[id^="page-analisis-"] .ap-row-serie td {
    background: linear-gradient(90deg, var(--accent) 0%, rgba(218, 119, 86, 0.7) 100%) !important;
    color: #fff !important;
    font-weight: 700;
    text-align: left !important;
    padding: 0.38rem 0.9rem !important;
    letter-spacing: 0.08em;
    font-size: 0.72em;
    text-transform: uppercase;
    border-right: none !important;
}
[id^="page-analisis-"] .ap-row-sep td {
    background: transparent;
    padding: 0.18rem !important;
    border: none !important;
}

/* ============================================================
   QUA-8: Zebra marrón + columnas fijas (col 1 Modelo y col 5 Precio A)
   Diseño: Delfina/Joaquín/Benicio. Integración: Claude Code.
   ============================================================ */
:root {
    --ap-col1-w:   220px;     /* ancho fijo de la col Modelo = offset sticky de la col 5 */
    --ap-row-odd:  #2e2018;   /* marrón oscuro — filas impares */
    --ap-row-even: #3b2a1e;   /* marrón medio  — filas pares  */
}

/* Zebra: excluye filas decorativas (serie y separador) para no pisarles el fondo */
[id^="page-analisis-"] .ap-table tbody tr:not(.ap-row-serie):not(.ap-row-sep):nth-child(odd) > td {
    background-color: var(--ap-row-odd);
}
[id^="page-analisis-"] .ap-table tbody tr:not(.ap-row-serie):not(.ap-row-sep):nth-child(even) > td {
    background-color: var(--ap-row-even);
}
/* Hover por encima del zebra — marrón cálido algo más claro */
[id^="page-analisis-"] .ap-table tbody tr:not(.ap-row-serie):not(.ap-row-sep):hover > td {
    background-color: #503530;
}

/* Columna 5 (Precio A) sticky al scroll horizontal, pegada a la col 1 */
[id^="page-analisis-"] .ap-col-precio-a {
    position: sticky;
    left: var(--ap-col1-w, 220px);
    z-index: 2;
    border-left: 1px solid rgba(218, 119, 86, 0.35);
    border-right: 2px solid var(--accent);
}
[id^="page-analisis-"] .ap-table thead .ap-col-precio-a {
    z-index: 5;                 /* por encima de col-modelo header (z:4) y thead th (z:3) */
    background: var(--bg-sidebar);
}

/* QUA-18: pin de columnas a eleccion. El offset (left) y z-index los pone JS inline
   (_apRecalcStickyOffsets); aca solo el boton, el indicador y el fondo del header fijado. */
[id^="page-analisis-"] .ap-table th { position: relative; }
[id^="page-analisis-"] .ap-pin-btn {
    position: absolute; top: 3px; right: 3px;
    width: 18px; height: 18px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; border-radius: 4px; background: transparent;
    color: var(--text-muted); cursor: pointer; opacity: 0;
    transition: opacity .12s, color .12s, background .12s;
}
[id^="page-analisis-"] .ap-table th:hover .ap-pin-btn { opacity: .55; }
[id^="page-analisis-"] .ap-pin-btn:hover { opacity: 1; background: rgba(255,255,255,0.08); color: var(--text); }
[id^="page-analisis-"] .ap-table th.is-pinned .ap-pin-btn { opacity: 1; color: var(--accent); }
[id^="page-analisis-"] .ap-table th.is-pinned { box-shadow: inset 0 -2px 0 var(--accent); }
/* header de columna fijada (no-glass): fondo opaco para que el sticky no transparente */
[id^="page-analisis-"] .ap-table thead th.ap-col-pinned { background: var(--bg-sidebar); }

[id^="page-analisis-"] .ap-price-min {
    color: #1a9b50;
    font-weight: 700;
}
[id^="page-analisis-"] .ap-price-max {
    color: #b94a2e;
    font-weight: 500;
}
[id^="page-analisis-"] .ap-cell-calc {
    color: var(--text-muted);
    font-weight: 500;
}
[id^="page-analisis-"] .ap-cell-calc-strong {
    color: var(--text);
    font-weight: 600;
}
[id^="page-analisis-"] .ap-cell-dash {
    color: var(--text-muted);
    opacity: 0.35;
}
[id^="page-analisis-"] .ap-cell-neg {
    color: #b94a2e;
    font-weight: 600;
}
[id^="page-analisis-"] .ap-cell-pos {
    color: #1a9b50;
    font-weight: 600;
}
[id^="page-analisis-"] .ap-col-quantum {
    background: rgba(0, 128, 255, 0.04);
}
[id^="page-analisis-"] .ap-table td a { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--border); }
[id^="page-analisis-"] .ap-table td a:hover { color: var(--accent); border-color: var(--accent); }

/* --- MOBILE (cards) --- */
[id^="page-analisis-"] .ap-mobile .ap-serie-header {
    font-size: 0.72em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--accent);
    margin: 1.2rem 0 0.5rem;
    padding-bottom: 0.3rem;
    border-bottom: 2px solid var(--accent);
}
[id^="page-analisis-"] .ap-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
[id^="page-analisis-"] .ap-card-title {
    font-weight: 700;
    font-size: 1.05em;
    margin-bottom: 0.75rem;
    color: var(--text);
}
[id^="page-analisis-"] .ap-card-section {
    margin-bottom: 0.9rem;
}
[id^="page-analisis-"] .ap-card-section:last-child { margin-bottom: 0; }
[id^="page-analisis-"] .ap-card-section-title {
    font-size: 0.68em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 0.5rem;
}
[id^="page-analisis-"] .ap-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}
[id^="page-analisis-"] .ap-card-field {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}
[id^="page-analisis-"] .ap-card-field label {
    font-size: 0.72em;
    color: var(--text-muted);
    font-weight: 500;
}
[id^="page-analisis-"] .ap-card-field .ap-input,
[id^="page-analisis-"] .ap-card-field .ap-card-value {
    text-align: left;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 0.95em;
}
[id^="page-analisis-"] .ap-card-value {
    color: var(--text-muted);
}
[id^="page-analisis-"] .ap-card-field .ap-input {
    width: 100%;
    background: var(--bg-card);
    color: var(--text);
}
[id^="page-analisis-"] .ap-card-field .ap-input:focus {
    border-color: var(--accent);
    background: var(--bg);
    box-shadow: 0 0 0 3px rgba(218, 119, 86, 0.15);
}
[id^="page-analisis-"] .ap-card-mercado-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.88em;
}
[id^="page-analisis-"] .ap-card-mercado-row > div {
    flex: 1;
    text-align: center;
}
[id^="page-analisis-"] .ap-card-mercado-row .label {
    display: block;
    font-size: 0.72em;
    color: var(--text-muted);
    margin-bottom: 0.2rem;
}
[id^="page-analisis-"] .ap-card-mercado-row .value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

[id^="page-analisis-"] .ap-empty {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
    font-size: 0.9em;
}

/* Mobile overall padding */
@media (max-width: 820px) {
    [id^="page-analisis-"] .ap-header-top { flex-direction: column; align-items: stretch; }
    [id^="page-analisis-"] .ap-kpis { grid-template-columns: repeat(2, 1fr); }
    [id^="page-analisis-"] .ap-kpi-hint { grid-column: 1 / -1; }
}

/* ==================================================================== */
/* API KEYS — gestión admin                                             */
/* ==================================================================== */
#page-api-keys .ak-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    align-items: end;
}
#page-api-keys .ak-form .form-group:last-of-type { grid-column: 1 / -1; }
#page-api-keys .ak-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}
#page-api-keys .ak-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85em;
    font-family: "Inter", sans-serif;
}
#page-api-keys .ak-table thead th {
    background: var(--bg-sidebar);
    padding: 0.6rem 0.75rem;
    text-align: left;
    border-bottom: 2px solid var(--border);
    font-weight: 600;
    white-space: nowrap;
}
#page-api-keys .ak-table tbody td {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--border);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
#page-api-keys .ak-table tbody tr:hover td {
    background: rgba(218, 119, 86, 0.04);
}
#page-api-keys .ak-status {
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    font-size: 0.78em;
    font-weight: 600;
    letter-spacing: 0.03em;
}
#page-api-keys .ak-status-active {
    background: rgba(76, 175, 80, 0.15);
    color: #1a9b50;
}
#page-api-keys .ak-status-revoked {
    background: rgba(229, 75, 75, 0.15);
    color: #b94a2e;
}
#page-api-keys .ak-status-disabled {
    background: rgba(240, 168, 48, 0.15);
    color: #a87d1e;
}
#page-api-keys .ak-scopes {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.8em;
    color: var(--text-muted);
}
#page-api-keys .ak-prefix {
    font-family: "JetBrains Mono", monospace;
    color: var(--accent);
    font-weight: 600;
}
#page-api-keys .ak-action-btn {
    background: none;
    border: 1px solid var(--border);
    padding: 0.3rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text);
    font-size: 0.85em;
    margin-right: 0.4rem;
}
#page-api-keys .ak-action-btn:hover { border-color: var(--accent); color: var(--accent); }
#page-api-keys .ak-action-btn.danger:hover {
    border-color: #e54b4b;
    color: #e54b4b;
    background: rgba(229, 75, 75, 0.05);
}

#page-api-keys .ak-plaintext-box {
    background: #25241f;
    border: 2px solid var(--accent);
    padding: 1rem;
    border-radius: 6px;
    margin-top: 1rem;
    color: #faf9f5;
}
[data-theme="light"] #page-api-keys .ak-plaintext-box {
    background: #faf9f5;
    color: #2c2b28;
}
#page-api-keys .ak-plaintext-value {
    font-family: "JetBrains Mono", monospace;
    font-size: 1.1em;
    word-break: break-all;
    padding: 0.6rem;
    background: rgba(218, 119, 86, 0.08);
    border-radius: 4px;
    margin: 0.5rem 0;
    user-select: all;
}
#page-api-keys .ak-warning {
    color: #a87d1e;
    font-weight: 600;
    margin-top: 0.5rem;
}

/* ============================================================
   DESKTOP UX v6.1 — animaciones, role-aware sidebar, page transitions
   ============================================================
   Solo se aplica en viewports >= 820px (desktop). En mobile el
   sidebar se convierte en tab bar y este bloque queda inerte.
   ------------------------------------------------------------ */
@media (min-width: 820px) {

    /* --- 1) Nav item: hover/active con shine + icon scale ---------- */
    .sidebar-nav > a.nav-item {
        overflow: hidden;
        isolation: isolate;
    }
    .sidebar-nav > a.nav-item::after {
        /* Shine que cruza de izquierda a derecha al hover */
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
            100deg,
            transparent 20%,
            color-mix(in srgb, var(--accent) 18%, transparent) 50%,
            transparent 80%
        );
        transform: translateX(-120%);
        transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
        pointer-events: none;
        z-index: -1;
    }
    .sidebar-nav > a.nav-item:hover::after { transform: translateX(120%); }
    .sidebar-nav > a.nav-item svg {
        transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s;
    }
    .sidebar-nav > a.nav-item:hover svg { transform: scale(1.12) rotate(-3deg); color: var(--accent); }
    .sidebar-nav > a.nav-item.active svg { color: var(--accent); }
    .sidebar-nav > a.nav-item.active::before {
        /* Barra lateral del active — se estira con bounce */
        animation: navBarIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
        box-shadow: 0 0 8px 0 color-mix(in srgb, var(--accent) 55%, transparent);
    }
    @keyframes navBarIn {
        0%   { transform: scaleY(0); opacity: 0; }
        60%  { transform: scaleY(1.15); opacity: 1; }
        100% { transform: scaleY(1); }
    }

    /* --- 2) Stagger entrance: nav items al cargar ------------------ */
    .sidebar-nav > a.nav-item {
        animation: navItemIn 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }
    .sidebar-nav > a.nav-item:nth-child(1)  { animation-delay: 0.02s; }
    .sidebar-nav > a.nav-item:nth-child(2)  { animation-delay: 0.04s; }
    .sidebar-nav > a.nav-item:nth-child(3)  { animation-delay: 0.06s; }
    .sidebar-nav > a.nav-item:nth-child(4)  { animation-delay: 0.08s; }
    .sidebar-nav > a.nav-item:nth-child(5)  { animation-delay: 0.10s; }
    .sidebar-nav > a.nav-item:nth-child(6)  { animation-delay: 0.12s; }
    .sidebar-nav > a.nav-item:nth-child(7)  { animation-delay: 0.14s; }
    .sidebar-nav > a.nav-item:nth-child(8)  { animation-delay: 0.16s; }
    .sidebar-nav > a.nav-item:nth-child(9)  { animation-delay: 0.18s; }
    .sidebar-nav > a.nav-item:nth-child(10) { animation-delay: 0.20s; }
    .sidebar-nav > a.nav-item:nth-child(n+11) { animation-delay: 0.22s; }
    @keyframes navItemIn {
        from { opacity: 0; transform: translateX(-8px); }
        to   { opacity: 1; transform: translateX(0); }
    }

    /* --- 3) Role-aware sidebar: destaca el grupo del usuario ------- */
    /* Admin ve todo tal cual. Los otros roles reciben un acento visual
       sobre el grupo principal que les compete y una reducción de énfasis
       sobre los demás, para que la navegación sea inmediata. */
    .nav-group-label {
        position: relative;
        transition: color 0.25s, letter-spacing 0.25s;
    }
    body[data-role="vendedor"] .nav-group-label[data-group="operaciones"],
    body[data-role="compras"]  .nav-group-label[data-group="operaciones"],
    body[data-role="tecnico"]  .nav-group-label[data-group="rma"] {
        color: var(--accent);
        letter-spacing: 0.06em;
    }
    body[data-role="vendedor"] .nav-group-label[data-group="operaciones"]::after,
    body[data-role="compras"]  .nav-group-label[data-group="operaciones"]::after,
    body[data-role="tecnico"]  .nav-group-label[data-group="rma"]::after {
        content: "";
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: -2px;
        height: 1px;
        background: linear-gradient(90deg,
            color-mix(in srgb, var(--accent) 55%, transparent),
            transparent);
    }
    /* Grupos que el rol no usa → opacidad reducida (pero legibles) */
    body[data-role="vendedor"] .nav-group-label[data-group="catalogo"],
    body[data-role="vendedor"] .nav-group-label[data-group="inteligencia"],
    body[data-role="tecnico"]  .nav-group-label[data-group="operaciones"],
    body[data-role="tecnico"]  .nav-group-label[data-group="inteligencia"],
    body[data-role="tecnico"]  .nav-group-label[data-group="catalogo"] {
        opacity: 0.55;
    }

    /* --- 4) Page transition: fade + slight slide-up --------------- */
    section.page.active {
        animation: pageIn 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }
    @keyframes pageIn {
        from { opacity: 0; transform: translateY(6px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* --- 5) Cards/stats stagger dentro de la página activa -------- */
    section.page.active > .stats-grid > .stat-card,
    section.page.active > .page-grid   > .card,
    section.page.active > .cards-row   > .card {
        animation: cardIn 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }
    section.page.active > .stats-grid > .stat-card:nth-child(1),
    section.page.active > .page-grid   > .card:nth-child(1),
    section.page.active > .cards-row   > .card:nth-child(1) { animation-delay: 0.04s; }
    section.page.active > .stats-grid > .stat-card:nth-child(2),
    section.page.active > .page-grid   > .card:nth-child(2),
    section.page.active > .cards-row   > .card:nth-child(2) { animation-delay: 0.09s; }
    section.page.active > .stats-grid > .stat-card:nth-child(3),
    section.page.active > .page-grid   > .card:nth-child(3),
    section.page.active > .cards-row   > .card:nth-child(3) { animation-delay: 0.14s; }
    section.page.active > .stats-grid > .stat-card:nth-child(4),
    section.page.active > .page-grid   > .card:nth-child(4),
    section.page.active > .cards-row   > .card:nth-child(4) { animation-delay: 0.19s; }
    section.page.active > .stats-grid > .stat-card:nth-child(n+5),
    section.page.active > .page-grid   > .card:nth-child(n+5),
    section.page.active > .cards-row   > .card:nth-child(n+5) { animation-delay: 0.24s; }
    @keyframes cardIn {
        from { opacity: 0; transform: translateY(10px) scale(0.985); }
        to   { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* --- 6) Hover lift en cards clickables ------------------------- */
    .card, .stat-card {
        transition:
            border-color 0.25s,
            box-shadow 0.25s,
            transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
    }
    .card:hover, .stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px -12px rgba(0,0,0,0.35),
                    0 2px 4px -1px rgba(0,0,0,0.12);
    }

    /* --- 7) Brand icon rotation continua muy sutil ----------------- */
    .sidebar-brand .brand-icon {
        animation: brandFloat 8s ease-in-out infinite;
    }
    @keyframes brandFloat {
        0%, 100% { transform: rotate(0deg); }
        50%      { transform: rotate(6deg); }
    }

    /* --- 8) User card footer: hover glow --------------------------- */
    .user-card {
        transition: border-color 0.2s, box-shadow 0.3s;
    }
    .user-card:hover {
        border-color: var(--border-strong);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);
    }

    /* --- 9) Respetar reduce-motion -------------------------------- */
    @media (prefers-reduced-motion: reduce) {
        .sidebar-nav > a.nav-item,
        section.page.active,
        section.page.active > .stats-grid > .stat-card,
        section.page.active > .page-grid > .card,
        section.page.active > .cards-row > .card,
        .sidebar-brand .brand-icon {
            animation: none !important;
        }
        .sidebar-nav > a.nav-item::after { display: none; }
    }
}

/* ============================================================
   Sidebar v6.3 — solo grupos colapsables + spacing
   ============================================================
   Reversión del "data-flow edge": el estilo de hover/active vuelve
   al de v6.1 (shine horizontal + icon scale/rotate + barra lateral
   default). Acá sólo sumamos:
     • Más spacing entre grupos con separador superior sutil.
     • Labels clickeables con chevron → colapsan con grid-rows trick.
     • Persistencia del estado abierto/cerrado en localStorage (JS).
   ------------------------------------------------------------ */
@media (min-width: 820px) {

    /* --- Spacing de grupos: más aire entre secciones --------------- */
    .nav-group-label {
        margin-top: 16px;
        padding: 10px 12px 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        cursor: pointer;
        border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
        transition: color 0.2s, border-color 0.25s, letter-spacing 0.2s;
    }
    .nav-group-label:first-of-type { border-top: none; margin-top: 6px; }
    .nav-group-label:hover {
        color: var(--text-secondary);
        letter-spacing: 0.1em;
    }
    .nav-group-label:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
        border-radius: 4px;
    }

    /* --- Chevron (solo color muted, sin tinte accent) ------------- */
    .nav-group-chevron {
        display: inline-flex;
        transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.2s;
        opacity: 0.5;
    }
    .nav-group-label:hover .nav-group-chevron { opacity: 0.9; }
    .nav-group-label.collapsed .nav-group-chevron { transform: rotate(-90deg); }

    /* --- Contenedor colapsable (grid-rows trick para animar) ------- */
    .nav-group-items {
        display: grid;
        grid-template-rows: 1fr;
        transition: grid-template-rows 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
    }
    .nav-group-items > .nav-group-inner {
        overflow: hidden;
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .nav-group-items.collapsed { grid-template-rows: 0fr; }

    @media (prefers-reduced-motion: reduce) {
        .nav-group-items, .nav-group-chevron {
            transition: none !important;
        }
    }

    /* ------------------------------------------------------------------
       Re-aplicar el styling de los nav-items cuando quedaron envueltos
       dentro de .nav-group-inner por el JS de colapsables.
       El selector original "{.sidebar-nav > a.nav-item}" usa hijo directo
       y no matchea a los items anidados (quedaban en color accent heredado
       de `a {}` y con cursor text por no tener href). Replicamos los
       estilos base + hover/active para ese caso.
       ------------------------------------------------------------------ */
    .sidebar-nav .nav-group-inner > a.nav-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        border-radius: 6px;
        color: var(--text-secondary);
        font-size: 13.5px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
        text-decoration: none !important;
        position: relative;
        white-space: nowrap;
        overflow: hidden;
        isolation: isolate;
        animation: navItemIn 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }
    .sidebar-nav .nav-group-inner > a.nav-item:hover {
        background: var(--bg-card);
        color: var(--text);
        transform: translateX(2px);
    }
    .sidebar-nav .nav-group-inner > a.nav-item.active {
        background: var(--bg-card);
        color: var(--text);
        font-weight: 600;
    }
    .sidebar-nav .nav-group-inner > a.nav-item.active::before {
        content: '';
        position: absolute;
        left: 0;
        top: 6px;
        bottom: 6px;
        width: 3px;
        background: var(--accent);
        border-radius: 0 3px 3px 0;
        animation: fadeIn 0.3s ease;
    }
    .sidebar-nav .nav-group-inner > a.nav-item svg {
        flex-shrink: 0;
        width: 18px;
        height: 18px;
        transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s;
    }
    .sidebar-nav .nav-group-inner > a.nav-item:hover svg {
        transform: scale(1.12) rotate(-3deg);
        color: var(--accent);
    }
    /* Shine horizontal del v6.1 (igual que los hijos directos) */
    .sidebar-nav .nav-group-inner > a.nav-item::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
            100deg,
            transparent 20%,
            color-mix(in srgb, var(--accent) 18%, transparent) 50%,
            transparent 80%
        );
        transform: translateX(-120%);
        transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
        pointer-events: none;
        z-index: -1;
    }
    .sidebar-nav .nav-group-inner > a.nav-item:hover::after { transform: translateX(120%); }
}

/* ============================================================
   Page-load choreography v6.5 — animaciones de entrada globales
   (durada extendida: ~1.9s total para sensación más pausada)
   ============================================================
   Secuencia al cargar la página principal (index.html):
     0ms   — body fade in (0.6s)
     0ms   — sidebar desliza desde la izquierda (0.9s)
     200ms — brand del sidebar aparece (scale + fade, 1.1s)
     300ms — topbar baja con fade (0.75s)
     350ms — group labels aparecen escalonados (140ms de offset)
     400ms+ nav items (stagger)
     1100ms — user-card del footer emerge desde abajo
   ------------------------------------------------------------ */
@media (min-width: 820px) {

    body { animation: bodyFadeIn 0.6s ease-out both; }
    @keyframes bodyFadeIn {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    aside.sidebar {
        animation: sidebarSlideIn 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }
    @keyframes sidebarSlideIn {
        from { transform: translateX(-30px); opacity: 0; }
        to   { transform: translateX(0); opacity: 1; }
    }

    .sidebar-brand {
        animation: brandPopIn 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
    }
    @keyframes brandPopIn {
        0%   { transform: scale(0.6); opacity: 0; filter: blur(6px); }
        50%  { filter: blur(0); }
        100% { transform: scale(1); opacity: 1; filter: blur(0); }
    }

    main.main > header.topbar {
        animation: topbarDown 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s both;
    }
    @keyframes topbarDown {
        from { transform: translateY(-18px); opacity: 0; }
        to   { transform: translateY(0); opacity: 1; }
    }

    /* Group labels con stagger extendido (140ms por cada uno) */
    .sidebar-nav .nav-group-label {
        animation: groupLabelIn 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }
    .sidebar-nav .nav-group-label:nth-of-type(1) { animation-delay: 0.35s; }
    .sidebar-nav .nav-group-label:nth-of-type(2) { animation-delay: 0.50s; }
    .sidebar-nav .nav-group-label:nth-of-type(3) { animation-delay: 0.65s; }
    .sidebar-nav .nav-group-label:nth-of-type(4) { animation-delay: 0.80s; }
    .sidebar-nav .nav-group-label:nth-of-type(5) { animation-delay: 0.95s; }
    .sidebar-nav .nav-group-label:nth-of-type(n+6) { animation-delay: 1.10s; }
    @keyframes groupLabelIn {
        from { opacity: 0; transform: translateX(-12px); letter-spacing: 0; }
        to   { opacity: 1; transform: translateX(0); letter-spacing: 0.08em; }
    }

    /* Nav items stagger ampliado */
    .sidebar-nav > a.nav-item,
    .sidebar-nav .nav-group-inner > a.nav-item {
        animation: navItemIn 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both !important;
    }
    .sidebar-nav > a.nav-item:nth-child(1),
    .sidebar-nav .nav-group-inner > a.nav-item:nth-child(1)  { animation-delay: 0.40s !important; }
    .sidebar-nav > a.nav-item:nth-child(2),
    .sidebar-nav .nav-group-inner > a.nav-item:nth-child(2)  { animation-delay: 0.46s !important; }
    .sidebar-nav > a.nav-item:nth-child(3),
    .sidebar-nav .nav-group-inner > a.nav-item:nth-child(3)  { animation-delay: 0.52s !important; }
    .sidebar-nav > a.nav-item:nth-child(4),
    .sidebar-nav .nav-group-inner > a.nav-item:nth-child(4)  { animation-delay: 0.58s !important; }
    .sidebar-nav > a.nav-item:nth-child(5),
    .sidebar-nav .nav-group-inner > a.nav-item:nth-child(5)  { animation-delay: 0.64s !important; }
    .sidebar-nav > a.nav-item:nth-child(6),
    .sidebar-nav .nav-group-inner > a.nav-item:nth-child(6)  { animation-delay: 0.70s !important; }
    .sidebar-nav > a.nav-item:nth-child(7),
    .sidebar-nav .nav-group-inner > a.nav-item:nth-child(7)  { animation-delay: 0.76s !important; }
    .sidebar-nav > a.nav-item:nth-child(n+8),
    .sidebar-nav .nav-group-inner > a.nav-item:nth-child(n+8) { animation-delay: 0.82s !important; }

    .sidebar-footer .user-card {
        animation: userCardIn 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) 1.1s both;
    }
    @keyframes userCardIn {
        from { opacity: 0; transform: translateY(16px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* Page title shimmer más largo y más tarde */
    main.main > header.topbar .page-title {
        background: linear-gradient(90deg,
            var(--text) 0%, var(--text) 40%,
            color-mix(in srgb, var(--accent) 70%, var(--text)) 50%,
            var(--text) 60%, var(--text) 100%);
        background-size: 200% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: titleShimmer 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) 0.75s both;
    }
    @keyframes titleShimmer {
        0%   { background-position: 120% 0; }
        100% { background-position: -20% 0; }
    }

    main.main > header.topbar .topbar-stat,
    main.main > header.topbar .topbar-right > * {
        animation: statFadeIn 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }
    main.main > header.topbar .topbar-right > *:nth-child(1) { animation-delay: 0.65s; }
    main.main > header.topbar .topbar-right > *:nth-child(2) { animation-delay: 0.78s; }
    main.main > header.topbar .topbar-right > *:nth-child(3) { animation-delay: 0.91s; }
    main.main > header.topbar .topbar-right > *:nth-child(4) { animation-delay: 1.04s; }
    main.main > header.topbar .topbar-right > *:nth-child(n+5) { animation-delay: 1.17s; }
    @keyframes statFadeIn {
        from { opacity: 0; transform: translateX(12px); }
        to   { opacity: 1; transform: translateX(0); }
    }

    @media (prefers-reduced-motion: reduce) {
        body,
        aside.sidebar,
        .sidebar-brand,
        main.main > header.topbar,
        .sidebar-nav .nav-group-label,
        .sidebar-footer .user-card,
        main.main > header.topbar .page-title,
        main.main > header.topbar .topbar-right > * {
            animation: none !important;
        }
        main.main > header.topbar .page-title {
            -webkit-text-fill-color: var(--text);
            background: none;
        }
    }
}

/* ============================================================
   Landing page #page-inicio — hero + pillars con entrance stagger
   ============================================================ */
#page-inicio { padding: 32px 48px 64px; }

.qc-hero {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    isolation: isolate;
}
.qc-hero-bg {
    position: absolute;
    inset: -40px -10% 40% -10%;
    z-index: -1;
    background:
        radial-gradient(circle at 30% 10%, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 45%),
        radial-gradient(circle at 80% 30%, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 50%);
    filter: blur(40px);
    opacity: 0;
    animation: heroBgIn 2s cubic-bezier(0.22, 0.61, 0.36, 1) 1.0s both;
}
@keyframes heroBgIn {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
}

.qc-hero-head {
    text-align: center;
    padding: 40px 0 56px;
}
.qc-hero-kicker {
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 16px;
    animation: heroFadeUp 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 1.7s both;
}
@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.qc-hero-ctas {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    animation: heroFadeUp 1s cubic-bezier(0.22, 0.61, 0.36, 1) 2.3s both;
}
.qc-cta-primary, .qc-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: transform 0.2s, box-shadow 0.25s, background 0.2s, border-color 0.2s;
}
.qc-cta-primary {
    background: var(--accent);
    color: #fff;
    border: 1px solid var(--accent);
    box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--accent) 60%, transparent);
}
.qc-cta-primary:hover {
    background: var(--accent-hover, var(--accent));
    transform: translateY(-2px);
    box-shadow: 0 8px 22px -6px color-mix(in srgb, var(--accent) 70%, transparent);
}
.qc-cta-secondary {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border-strong);
}
.qc-cta-secondary:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-2px);
}

/* Pillars grid */
.qc-pillars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 8px;
}
.qc-pillar {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px 20px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: border-color 0.25s, transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.3s;
    animation: pillarIn 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.qc-pillar[data-pillar-index="0"] { animation-delay: 2.4s; }
.qc-pillar[data-pillar-index="1"] { animation-delay: 2.52s; }
.qc-pillar[data-pillar-index="2"] { animation-delay: 2.64s; }
.qc-pillar[data-pillar-index="3"] { animation-delay: 2.76s; }
.qc-pillar[data-pillar-index="4"] { animation-delay: 2.88s; }
.qc-pillar[data-pillar-index="5"] { animation-delay: 3.0s; }
@keyframes pillarIn {
    from { opacity: 0; transform: translateY(20px) scale(0.97); filter: blur(4px); }
    60%  { filter: blur(0); }
    to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.qc-pillar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 12%, transparent),
        transparent 60%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}
.qc-pillar:hover {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
    transform: translateY(-4px);
    box-shadow: 0 12px 32px -16px color-mix(in srgb, var(--accent) 45%, transparent),
                0 2px 6px -2px rgba(0,0,0,0.15);
}
.qc-pillar:hover::before { opacity: 1; }
.qc-pillar-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent);
    margin-bottom: 14px;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.25s;
}
.qc-pillar:hover .qc-pillar-ico {
    transform: rotate(-6deg) scale(1.08);
    background: color-mix(in srgb, var(--accent) 24%, transparent);
}
.qc-pillar-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
}
.qc-pillar-desc {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.qc-hero-footer {
    text-align: center;
    margin-top: 40px;
    font-size: 12px;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    animation: heroFadeUp 1s cubic-bezier(0.22, 0.61, 0.36, 1) 3.2s both;
}
.qc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--status-ok-solid);
    box-shadow: 0 0 10px var(--status-ok-solid);
    animation: subtlePulse 2.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .qc-hero-bg, .qc-hero-kicker,
    .qc-hero-ctas, .qc-pillar, .qc-hero-footer, .qc-dot {
        animation: none !important;
        filter: none !important;
    }
}

@media (max-width: 820px) {
    #page-inicio { padding: 16px; }
    .qc-hero-head { padding: 24px 0 32px; }
    .qc-pillars { grid-template-columns: 1fr; gap: 12px; }
}

/* ============================================================
   Landing mode: sidebar + topbar ocultos en la landing inicial
   ============================================================
   Cuando la página activa es #page-inicio, agregamos body.landing-mode
   y el layout se simplifica: sidebar slide-out, topbar hidden, main
   full-width. Un trigger flotante top-left permite reabrir el menú.
   ------------------------------------------------------------ */
body.landing-mode aside.sidebar {
    /* `animation: none` evita que sidebarSlideIn (fill-mode: both) pise
       estos valores al terminar su reveal inicial. */
    animation: none !important;
    transform: translateX(-105%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition:
        transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1),
        opacity 0.5s ease !important;
}
body.landing-mode.sidebar-open aside.sidebar {
    transform: translateX(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
body.landing-mode main.main {
    margin-left: 0 !important;
    transition: margin-left 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
body.landing-mode main.main > header.topbar { display: none !important; }

/* Trigger flotante para abrir el sidebar en landing-mode */
.landing-sidebar-trigger {
    position: fixed;
    top: 22px;
    left: 22px;
    z-index: 200;
    display: none;
    align-items: center;
    gap: 8px;
    padding: 9px 14px 9px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-card) 88%, transparent);
    backdrop-filter: blur(12px) saturate(1.2);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    opacity: 0;
    transform: translateX(-8px);
    transition:
        opacity 0.3s ease,
        transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
        border-color 0.2s,
        color 0.2s;
}
body.landing-mode .landing-sidebar-trigger {
    display: inline-flex;
    animation: triggerReveal 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 2.8s both;
}
body.landing-mode.sidebar-open .landing-sidebar-trigger {
    opacity: 0;
    transform: translateX(-12px);
    pointer-events: none;
    animation: none;
}
.landing-sidebar-trigger:hover {
    border-color: var(--accent);
    color: var(--text);
}
.landing-sidebar-trigger svg {
    color: var(--accent);
    transition: transform 0.2s;
}
.landing-sidebar-trigger:hover svg { transform: translateX(-2px); }
@keyframes triggerReveal {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Hero centrado en viewport cuando no hay topbar ni sidebar */
body.landing-mode #page-inicio { padding-top: 60px; }

@media (prefers-reduced-motion: reduce) {
    body.landing-mode aside.sidebar,
    .landing-sidebar-trigger {
        transition: none !important;
        animation: none !important;
    }
}

/* ── PC: el menú lateral queda SIEMPRE visible, también en la landing ──
   El landing-mode (ocultar sidebar + topbar y dejar sólo el trigger flotante)
   es conducta pensada para mobile. En desktop lo neutralizamos para no dejar
   al usuario sin navegación. Mismo patrón que el override mobile (max-width:820)
   que mantiene visibles los bottom-tabs. Va después del bloque landing global
   para ganarle por orden de fuente. */
@media (min-width: 820px) {
    body.landing-mode aside.sidebar {
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        animation: none !important;
    }
    body.landing-mode main.main > header.topbar { display: flex !important; }
    body.landing-mode .landing-sidebar-trigger { display: none !important; }
    body.landing-mode #page-inicio { padding-top: 0 !important; }
}

/* ============================================================
   Page-specific entrance animations v6.6 — temáticas por sección
   ============================================================
   MVP con 5 categorías de alto tráfico. Cada una sobreescribe el
   pageIn genérico y aplica stagger a sus children principales.
   ------------------------------------------------------------ */
@media (min-width: 820px) {

    /* ================ DASHBOARD — mosaic descent ================ */
    /* KPIs caen desde arriba uno tras otro con scale bounce.
       Cards grandes aparecen oblicuamente con slight translate. */
    section#page-dashboard.active {
        animation: pageIn 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }
    section#page-dashboard.active .kpi-row > * {
        animation: kpiDrop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }
    section#page-dashboard.active .kpi-row > *:nth-child(1) { animation-delay: 0.05s; }
    section#page-dashboard.active .kpi-row > *:nth-child(2) { animation-delay: 0.15s; }
    section#page-dashboard.active .kpi-row > *:nth-child(3) { animation-delay: 0.25s; }
    section#page-dashboard.active .kpi-row > *:nth-child(4) { animation-delay: 0.35s; }
    section#page-dashboard.active .kpi-row > *:nth-child(n+5) { animation-delay: 0.45s; }
    @keyframes kpiDrop {
        0%   { opacity: 0; transform: translateY(-26px) scale(0.85); }
        60%  { opacity: 1; transform: translateY(4px) scale(1.05); }
        100% { opacity: 1; transform: translateY(0) scale(1); }
    }
    section#page-dashboard.active .grid-2 > .card,
    section#page-dashboard.active > .card {
        animation: cardOblique 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }
    section#page-dashboard.active .grid-2 > .card:nth-child(1) { animation-delay: 0.45s; }
    section#page-dashboard.active .grid-2 > .card:nth-child(2) { animation-delay: 0.55s; }
    section#page-dashboard.active .grid-2 > .card:nth-child(n+3) { animation-delay: 0.65s; }
    @keyframes cardOblique {
        from { opacity: 0; transform: translate(-10px, 12px) scale(0.98); }
        to   { opacity: 1; transform: translate(0, 0) scale(1); }
    }

    /* ================ COMPRAS — conveyor belt ================ */
    /* Toolbar + filtros entran desde arriba. Tabla/cards desde la
       derecha con slight bounce como si llegaran por cinta. */
    section#page-compras.active .page-toolbar {
        animation: slideFromTop 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }
    @keyframes slideFromTop {
        from { opacity: 0; transform: translateY(-16px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    section#page-compras.active .data-table tbody tr,
    section#page-compras.active .card {
        animation: conveyorIn 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }
    section#page-compras.active .data-table tbody tr:nth-child(1),
    section#page-compras.active .card:nth-child(1) { animation-delay: 0.10s; }
    section#page-compras.active .data-table tbody tr:nth-child(2),
    section#page-compras.active .card:nth-child(2) { animation-delay: 0.16s; }
    section#page-compras.active .data-table tbody tr:nth-child(3),
    section#page-compras.active .card:nth-child(3) { animation-delay: 0.22s; }
    section#page-compras.active .data-table tbody tr:nth-child(4),
    section#page-compras.active .card:nth-child(4) { animation-delay: 0.28s; }
    section#page-compras.active .data-table tbody tr:nth-child(5),
    section#page-compras.active .card:nth-child(5) { animation-delay: 0.34s; }
    section#page-compras.active .data-table tbody tr:nth-child(n+6),
    section#page-compras.active .card:nth-child(n+6) { animation-delay: 0.40s; }
    @keyframes conveyorIn {
        0%   { opacity: 0; transform: translateX(40px); }
        70%  { opacity: 1; transform: translateX(-3px); }
        100% { opacity: 1; transform: translateX(0); }
    }

    /* ================ VENTAS — ticket print ================ */
    /* Filas aparecen desde arriba con clip-path reveal (como si
       salieran de una impresora), y un shine ámbar las recorre al
       entrar. */
    section#page-ventas.active .data-table tbody tr {
        animation: ticketPrint 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both;
        position: relative;
        overflow: hidden;
    }
    section#page-ventas.active .data-table tbody tr:nth-child(1)  { animation-delay: 0.08s; }
    section#page-ventas.active .data-table tbody tr:nth-child(2)  { animation-delay: 0.14s; }
    section#page-ventas.active .data-table tbody tr:nth-child(3)  { animation-delay: 0.20s; }
    section#page-ventas.active .data-table tbody tr:nth-child(4)  { animation-delay: 0.26s; }
    section#page-ventas.active .data-table tbody tr:nth-child(5)  { animation-delay: 0.32s; }
    section#page-ventas.active .data-table tbody tr:nth-child(6)  { animation-delay: 0.38s; }
    section#page-ventas.active .data-table tbody tr:nth-child(7)  { animation-delay: 0.44s; }
    section#page-ventas.active .data-table tbody tr:nth-child(n+8) { animation-delay: 0.50s; }
    @keyframes ticketPrint {
        0%   { opacity: 0; transform: translateY(-12px); clip-path: inset(0 0 100% 0); }
        50%  { opacity: 1; clip-path: inset(0 0 0 0); }
        100% { opacity: 1; transform: translateY(0); clip-path: inset(0 0 0 0); }
    }

    /* ================ RMA — animaciones específicas por sub-vista =============
       El módulo RMA tiene 6 sub-vistas (dashboard con Kanban, y recepcion /
       tecnico / administracion / logistica / finalizadas con grid de cards).
       En vez de una scan-line global que se veía rara sobre el Kanban, cada
       sub-vista tiene ahora una entrada que refleja su rol en el flujo:

         dashboard      → columnas del Kanban entran de izq a der (overview)
         recepcion      → cards caen desde arriba con bounce (ingresando)
         tecnico        → clip-path reveal horizontal (diagnosticando)
         administracion → fade + slide sutil (burocrático, tranquilo)
         logistica      → slide desde la derecha (enviando)
         finalizadas    → scale+fade con tilde verde momentáneo (completado)

       Todas comparten foundational fade (evita flash). Stagger por nth-child
       común para que el timing sea consistente entre vistas.
       ------------------------------------------------------------------ */
    section#page-garantias.active { position: relative; }

    /* --- Dashboard: Kanban columns entrando de izq a der ------------ */
    section#page-garantias.active[data-rma-view="dashboard"] .gar-kpi,
    section#page-garantias.active[data-rma-view="dashboard"] .gar-kan-col {
        animation: rmaKanbanIn 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }
    section#page-garantias.active[data-rma-view="dashboard"] .gar-kpi:nth-child(1),
    section#page-garantias.active[data-rma-view="dashboard"] .gar-kan-col:nth-child(1) { animation-delay: 0.05s; }
    section#page-garantias.active[data-rma-view="dashboard"] .gar-kpi:nth-child(2),
    section#page-garantias.active[data-rma-view="dashboard"] .gar-kan-col:nth-child(2) { animation-delay: 0.12s; }
    section#page-garantias.active[data-rma-view="dashboard"] .gar-kpi:nth-child(3),
    section#page-garantias.active[data-rma-view="dashboard"] .gar-kan-col:nth-child(3) { animation-delay: 0.19s; }
    section#page-garantias.active[data-rma-view="dashboard"] .gar-kpi:nth-child(4),
    section#page-garantias.active[data-rma-view="dashboard"] .gar-kan-col:nth-child(4) { animation-delay: 0.26s; }
    section#page-garantias.active[data-rma-view="dashboard"] .gar-kpi:nth-child(n+5),
    section#page-garantias.active[data-rma-view="dashboard"] .gar-kan-col:nth-child(n+5) { animation-delay: 0.33s; }
    @keyframes rmaKanbanIn {
        from { opacity: 0; transform: translateX(-16px); }
        to   { opacity: 1; transform: translateX(0); }
    }
    /* Kanban cards adentro: fade escalonado después de las cols */
    section#page-garantias.active[data-rma-view="dashboard"] .gar-kan-card {
        animation: rmaKanCardIn 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both;
        animation-delay: calc(0.5s + var(--qc-kan-idx, 0) * 0.03s);
    }
    section#page-garantias.active[data-rma-view="dashboard"] .gar-kan-card:nth-child(1)  { --qc-kan-idx: 0; }
    section#page-garantias.active[data-rma-view="dashboard"] .gar-kan-card:nth-child(2)  { --qc-kan-idx: 1; }
    section#page-garantias.active[data-rma-view="dashboard"] .gar-kan-card:nth-child(3)  { --qc-kan-idx: 2; }
    section#page-garantias.active[data-rma-view="dashboard"] .gar-kan-card:nth-child(4)  { --qc-kan-idx: 3; }
    section#page-garantias.active[data-rma-view="dashboard"] .gar-kan-card:nth-child(n+5){ --qc-kan-idx: 4; }
    @keyframes rmaKanCardIn {
        from { opacity: 0; transform: translateY(8px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* --- Recepción: cards caen desde arriba (ingresando al sistema) --- */
    section#page-garantias.active[data-rma-view="recepcion"] .gar-card {
        animation: rmaReceptionDrop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }

    /* --- Técnico: clip-path reveal horizontal (scan diagnóstico) ------ */
    section#page-garantias.active[data-rma-view="tecnico"] .gar-card {
        animation: rmaTechScan 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }

    /* --- Administración: fade + slide-up sutil (burocrático) --------- */
    section#page-garantias.active[data-rma-view="administracion"] .gar-card {
        animation: rmaAdminFade 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }

    /* --- Logística: slide desde la derecha (envíos saliendo) --------- */
    section#page-garantias.active[data-rma-view="logistica"] .gar-card {
        animation: rmaLogisticsOut 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }

    /* --- Finalizadas: scale-fade con check verde momentáneo ---------- */
    section#page-garantias.active[data-rma-view="finalizadas"] .gar-card {
        animation: rmaCompletedIn 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }

    /* Stagger común por nth-child para TODAS las sub-vistas con .gar-card */
    section#page-garantias.active[data-rma-view]:not([data-rma-view="dashboard"]) .gar-card:nth-child(1)  { animation-delay: 0.06s; }
    section#page-garantias.active[data-rma-view]:not([data-rma-view="dashboard"]) .gar-card:nth-child(2)  { animation-delay: 0.11s; }
    section#page-garantias.active[data-rma-view]:not([data-rma-view="dashboard"]) .gar-card:nth-child(3)  { animation-delay: 0.16s; }
    section#page-garantias.active[data-rma-view]:not([data-rma-view="dashboard"]) .gar-card:nth-child(4)  { animation-delay: 0.21s; }
    section#page-garantias.active[data-rma-view]:not([data-rma-view="dashboard"]) .gar-card:nth-child(5)  { animation-delay: 0.26s; }
    section#page-garantias.active[data-rma-view]:not([data-rma-view="dashboard"]) .gar-card:nth-child(6)  { animation-delay: 0.31s; }
    section#page-garantias.active[data-rma-view]:not([data-rma-view="dashboard"]) .gar-card:nth-child(n+7) { animation-delay: 0.36s; }

    @keyframes rmaReceptionDrop {
        0%   { opacity: 0; transform: translateY(-20px) scale(0.95); }
        60%  { opacity: 1; transform: translateY(3px) scale(1.02); }
        100% { opacity: 1; transform: translateY(0) scale(1); }
    }
    @keyframes rmaTechScan {
        0%   { opacity: 0; clip-path: inset(0 100% 0 0); }
        100% { opacity: 1; clip-path: inset(0 0 0 0); }
    }
    @keyframes rmaAdminFade {
        from { opacity: 0; transform: translateY(8px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes rmaLogisticsOut {
        from { opacity: 0; transform: translateX(24px); }
        to   { opacity: 1; transform: translateX(0); }
    }
    @keyframes rmaCompletedIn {
        0%   { opacity: 0; transform: scale(0.92); box-shadow: 0 0 0 0 var(--status-ok-solid); }
        60%  { opacity: 1; transform: scale(1.02); box-shadow: 0 0 0 6px color-mix(in srgb, var(--status-ok-solid) 22%, transparent); }
        100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 transparent; }
    }

    /* ================ MERCADO — chart build-up ================ */
    /* Toolbar + pills deslizan de izq. La table/cards con stagger
       suave. Los charts si existen crecen de bottom up (transform
       origin bottom) — aprovechado en el transition de chart.js
       canvas no aplica, pero el wrapper card sí. */
    section#page-mercado.active .page-toolbar {
        animation: toolbarSlide 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }
    @keyframes toolbarSlide {
        from { opacity: 0; transform: translateX(-20px); }
        to   { opacity: 1; transform: translateX(0); }
    }
    section#page-mercado.active .pill {
        animation: pillFadeIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }
    section#page-mercado.active .pill:nth-child(1) { animation-delay: 0.1s; }
    section#page-mercado.active .pill:nth-child(2) { animation-delay: 0.15s; }
    section#page-mercado.active .pill:nth-child(3) { animation-delay: 0.2s; }
    section#page-mercado.active .pill:nth-child(4) { animation-delay: 0.25s; }
    section#page-mercado.active .pill:nth-child(5) { animation-delay: 0.3s; }
    section#page-mercado.active .pill:nth-child(n+6) { animation-delay: 0.35s; }
    @keyframes pillFadeIn {
        from { opacity: 0; transform: translateY(-8px) scale(0.9); }
        to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    section#page-mercado.active .card,
    section#page-mercado.active .data-table tbody tr {
        animation: chartBuildUp 0.65s cubic-bezier(0.22, 0.61, 0.36, 1) both;
        transform-origin: center bottom;
    }
    section#page-mercado.active .card:nth-child(1),
    section#page-mercado.active .data-table tbody tr:nth-child(1) { animation-delay: 0.3s; }
    section#page-mercado.active .card:nth-child(2),
    section#page-mercado.active .data-table tbody tr:nth-child(2) { animation-delay: 0.38s; }
    section#page-mercado.active .card:nth-child(3),
    section#page-mercado.active .data-table tbody tr:nth-child(3) { animation-delay: 0.46s; }
    section#page-mercado.active .card:nth-child(4),
    section#page-mercado.active .data-table tbody tr:nth-child(4) { animation-delay: 0.54s; }
    section#page-mercado.active .card:nth-child(n+5),
    section#page-mercado.active .data-table tbody tr:nth-child(n+5) { animation-delay: 0.62s; }
    @keyframes chartBuildUp {
        from { opacity: 0; transform: translateY(14px) scaleY(0.85); }
        to   { opacity: 1; transform: translateY(0) scaleY(1); }
    }

    /* ================ STOCK / ÓRDENES / PEDIDOS — fold unfold ============ */
    /* Cards/rows se despliegan como papel (scaleY desde 0.1 → 1 + slight
       rotación) en cascada. */
    section#page-stock.active .card,
    section#page-stock.active .data-table tbody tr,
    section#page-ordenes.active .card,
    section#page-ordenes.active .data-table tbody tr,
    section#page-pedidos.active .card,
    section#page-pedidos.active .data-table tbody tr {
        animation: foldUnfold 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
        transform-origin: top center;
    }
    section#page-stock.active .card:nth-child(1), section#page-stock.active .data-table tbody tr:nth-child(1),
    section#page-ordenes.active .card:nth-child(1), section#page-ordenes.active .data-table tbody tr:nth-child(1),
    section#page-pedidos.active .card:nth-child(1), section#page-pedidos.active .data-table tbody tr:nth-child(1) { animation-delay: 0.08s; }
    section#page-stock.active .card:nth-child(2), section#page-stock.active .data-table tbody tr:nth-child(2),
    section#page-ordenes.active .card:nth-child(2), section#page-ordenes.active .data-table tbody tr:nth-child(2),
    section#page-pedidos.active .card:nth-child(2), section#page-pedidos.active .data-table tbody tr:nth-child(2) { animation-delay: 0.15s; }
    section#page-stock.active .card:nth-child(3), section#page-stock.active .data-table tbody tr:nth-child(3),
    section#page-ordenes.active .card:nth-child(3), section#page-ordenes.active .data-table tbody tr:nth-child(3),
    section#page-pedidos.active .card:nth-child(3), section#page-pedidos.active .data-table tbody tr:nth-child(3) { animation-delay: 0.22s; }
    section#page-stock.active .card:nth-child(n+4), section#page-stock.active .data-table tbody tr:nth-child(n+4),
    section#page-ordenes.active .card:nth-child(n+4), section#page-ordenes.active .data-table tbody tr:nth-child(n+4),
    section#page-pedidos.active .card:nth-child(n+4), section#page-pedidos.active .data-table tbody tr:nth-child(n+4) { animation-delay: 0.30s; }
    @keyframes foldUnfold {
        0%   { opacity: 0; transform: scaleY(0.15) rotateX(-22deg); }
        60%  { opacity: 1; transform: scaleY(1.04) rotateX(3deg); }
        100% { opacity: 1; transform: scaleY(1) rotateX(0); }
    }

    /* ================ BUSCAR / HISTORIAL / COMPARADOR / COMPETIDORES / BÚSQUEDA-PRODUCTOS — focus zoom ============ */
    /* Pequeño scale-in con blur que se limpia — sensación de "enfocando" datos. */
    section#page-buscar.active,
    section#page-historial.active,
    section#page-comparador.active,
    section#page-competidores.active,
    section#page-busqueda-productos.active {
        animation: focusZoom 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }
    @keyframes focusZoom {
        0%   { opacity: 0; transform: scale(0.96); filter: blur(6px); }
        60%  { filter: blur(0); }
        100% { opacity: 1; transform: scale(1); filter: blur(0); }
    }
    section#page-comparador.active .card,
    section#page-competidores.active .card,
    section#page-historial.active .card,
    section#page-busqueda-productos.active .card {
        animation: focusStagger 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }
    section#page-comparador.active .card:nth-child(1),
    section#page-competidores.active .card:nth-child(1),
    section#page-historial.active .card:nth-child(1),
    section#page-busqueda-productos.active .card:nth-child(1) { animation-delay: 0.15s; }
    section#page-comparador.active .card:nth-child(2),
    section#page-competidores.active .card:nth-child(2),
    section#page-historial.active .card:nth-child(2),
    section#page-busqueda-productos.active .card:nth-child(2) { animation-delay: 0.23s; }
    section#page-comparador.active .card:nth-child(n+3),
    section#page-competidores.active .card:nth-child(n+3),
    section#page-historial.active .card:nth-child(n+3),
    section#page-busqueda-productos.active .card:nth-child(n+3) { animation-delay: 0.31s; }
    @keyframes focusStagger {
        from { opacity: 0; transform: translateY(8px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* ================ ALERTAS — radar ping ============ */
    /* Cada alerta emerge con ripple pulsante y stagger rápido. */
    section#page-alertas.active .alert-item,
    section#page-alertas.active .card {
        animation: radarPing 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
        position: relative;
    }
    section#page-alertas.active .alert-item:nth-child(1), section#page-alertas.active .card:nth-child(1) { animation-delay: 0.05s; }
    section#page-alertas.active .alert-item:nth-child(2), section#page-alertas.active .card:nth-child(2) { animation-delay: 0.12s; }
    section#page-alertas.active .alert-item:nth-child(3), section#page-alertas.active .card:nth-child(3) { animation-delay: 0.19s; }
    section#page-alertas.active .alert-item:nth-child(4), section#page-alertas.active .card:nth-child(4) { animation-delay: 0.26s; }
    section#page-alertas.active .alert-item:nth-child(n+5), section#page-alertas.active .card:nth-child(n+5) { animation-delay: 0.33s; }
    @keyframes radarPing {
        0%   { opacity: 0; transform: scale(0.85); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); }
        50%  { opacity: 1; transform: scale(1.02); box-shadow: 0 0 0 12px color-mix(in srgb, var(--accent) 10%, transparent); }
        100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 transparent; }
    }

    /* ================ PRODUCTOS / PROVEEDORES — grid shimmer ============ */
    /* Stagger fade + leve zoom con un shine diagonal que pasa por cada
       card al entrar. */
    section#page-productos.active .card,
    section#page-productos.active .data-table tbody tr,
    section#page-proveedores.active .card,
    section#page-proveedores.active .data-table tbody tr {
        animation: gridShimmer 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }
    section#page-productos.active .card:nth-child(1), section#page-productos.active .data-table tbody tr:nth-child(1),
    section#page-proveedores.active .card:nth-child(1), section#page-proveedores.active .data-table tbody tr:nth-child(1) { animation-delay: 0.08s; }
    section#page-productos.active .card:nth-child(2), section#page-productos.active .data-table tbody tr:nth-child(2),
    section#page-proveedores.active .card:nth-child(2), section#page-proveedores.active .data-table tbody tr:nth-child(2) { animation-delay: 0.15s; }
    section#page-productos.active .card:nth-child(3), section#page-productos.active .data-table tbody tr:nth-child(3),
    section#page-proveedores.active .card:nth-child(3), section#page-proveedores.active .data-table tbody tr:nth-child(3) { animation-delay: 0.22s; }
    section#page-productos.active .card:nth-child(n+4), section#page-productos.active .data-table tbody tr:nth-child(n+4),
    section#page-proveedores.active .card:nth-child(n+4), section#page-proveedores.active .data-table tbody tr:nth-child(n+4) { animation-delay: 0.29s; }
    @keyframes gridShimmer {
        from { opacity: 0; transform: scale(0.97) translateY(6px); }
        to   { opacity: 1; transform: scale(1) translateY(0); }
    }

    /* ================ EXPORTAR A ODOO — export pipeline ============ */
    /* Todo el formulario aparece como si se estuviera empaquetando:
       inputs y checkboxes caen en secuencia con bounce. */
    section#page-exportar-odoo.active .form-group,
    section#page-exportar-odoo.active .checkbox-row,
    section#page-exportar-odoo.active .card,
    section#page-exportar-odoo.active .btn {
        animation: exportIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }
    section#page-exportar-odoo.active .form-group:nth-child(1),
    section#page-exportar-odoo.active .checkbox-row:nth-child(1),
    section#page-exportar-odoo.active .card:nth-child(1) { animation-delay: 0.1s; }
    section#page-exportar-odoo.active .form-group:nth-child(2),
    section#page-exportar-odoo.active .checkbox-row:nth-child(2),
    section#page-exportar-odoo.active .card:nth-child(2) { animation-delay: 0.18s; }
    section#page-exportar-odoo.active .form-group:nth-child(3),
    section#page-exportar-odoo.active .checkbox-row:nth-child(3),
    section#page-exportar-odoo.active .card:nth-child(3) { animation-delay: 0.26s; }
    section#page-exportar-odoo.active .form-group:nth-child(n+4),
    section#page-exportar-odoo.active .checkbox-row:nth-child(n+4),
    section#page-exportar-odoo.active .card:nth-child(n+4) { animation-delay: 0.34s; }
    section#page-exportar-odoo.active .btn { animation-delay: 0.5s !important; }
    @keyframes exportIn {
        from { opacity: 0; transform: translateY(-10px) scale(0.95); }
        to   { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* ================ SEGURIDAD — lock unlock ============ */
    /* Icon rotate simulando apertura + cards de sesión con "acceso
       concedido" (stagger con leve glow verde al aparecer). */
    section#page-seguridad.active > .card:first-of-type,
    section#page-seguridad.active .page-toolbar {
        animation: lockUnlock 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s both;
    }
    @keyframes lockUnlock {
        0%   { opacity: 0; transform: scale(0.7) rotate(-12deg); }
        60%  { opacity: 1; transform: scale(1.05) rotate(4deg); }
        100% { opacity: 1; transform: scale(1) rotate(0deg); }
    }
    section#page-seguridad.active .card,
    section#page-seguridad.active .data-table tbody tr {
        animation: accessGranted 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }
    section#page-seguridad.active .card:nth-child(1), section#page-seguridad.active .data-table tbody tr:nth-child(1) { animation-delay: 0.35s; }
    section#page-seguridad.active .card:nth-child(2), section#page-seguridad.active .data-table tbody tr:nth-child(2) { animation-delay: 0.42s; }
    section#page-seguridad.active .card:nth-child(3), section#page-seguridad.active .data-table tbody tr:nth-child(3) { animation-delay: 0.49s; }
    section#page-seguridad.active .card:nth-child(n+4), section#page-seguridad.active .data-table tbody tr:nth-child(n+4) { animation-delay: 0.56s; }
    @keyframes accessGranted {
        from { opacity: 0; transform: translateX(-12px); box-shadow: -3px 0 0 0 var(--status-ok-solid); }
        to   { opacity: 1; transform: translateX(0); box-shadow: -3px 0 0 0 transparent; }
    }

    /* ================ USUARIOS — roster 3D ============ */
    /* Cards de usuario aparecen con slight rotateX (tarjetas dadas
       vuelta que se acomodan). */
    section#page-admin-usuarios.active .card,
    section#page-admin-usuarios.active .data-table tbody tr {
        animation: rosterFlip 0.65s cubic-bezier(0.22, 0.61, 0.36, 1) both;
        transform-origin: center top;
    }
    section#page-admin-usuarios.active .card:nth-child(1), section#page-admin-usuarios.active .data-table tbody tr:nth-child(1) { animation-delay: 0.1s; }
    section#page-admin-usuarios.active .card:nth-child(2), section#page-admin-usuarios.active .data-table tbody tr:nth-child(2) { animation-delay: 0.17s; }
    section#page-admin-usuarios.active .card:nth-child(3), section#page-admin-usuarios.active .data-table tbody tr:nth-child(3) { animation-delay: 0.24s; }
    section#page-admin-usuarios.active .card:nth-child(n+4), section#page-admin-usuarios.active .data-table tbody tr:nth-child(n+4) { animation-delay: 0.31s; }
    @keyframes rosterFlip {
        0%   { opacity: 0; transform: translateY(18px) rotateX(-18deg); }
        60%  { opacity: 1; transform: translateY(-2px) rotateX(3deg); }
        100% { opacity: 1; transform: translateY(0) rotateX(0); }
    }

    /* ================ PRICING — subtle counter (CSS fade + glow) ============ */
    /* Los números no pueden contar sin JS, pero les damos un pulse
       ámbar al aparecer para simular "valor calculado". */
    section#page-pricing.active .card,
    section#page-pricing.active .data-table tbody tr,
    section#page-pricing.active .kpi-row > * {
        animation: pricingReveal 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }
    section#page-pricing.active .kpi-row > *:nth-child(1) { animation-delay: 0.05s; }
    section#page-pricing.active .kpi-row > *:nth-child(2) { animation-delay: 0.12s; }
    section#page-pricing.active .kpi-row > *:nth-child(3) { animation-delay: 0.19s; }
    section#page-pricing.active .card:nth-child(1), section#page-pricing.active .data-table tbody tr:nth-child(1) { animation-delay: 0.3s; }
    section#page-pricing.active .card:nth-child(n+2), section#page-pricing.active .data-table tbody tr:nth-child(n+2) { animation-delay: 0.38s; }
    @keyframes pricingReveal {
        0%   { opacity: 0; transform: translateY(10px); text-shadow: 0 0 20px color-mix(in srgb, var(--accent) 80%, transparent); }
        50%  { opacity: 1; text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 40%, transparent); }
        100% { opacity: 1; transform: translateY(0); text-shadow: none; }
    }

    /* ================ ANÁLISIS PLACAS — column reveal ============ */
    /* Columnas de tabla entran de izq a der con un barrido horizontal. */
    section#page-analisis-placas.active .data-table thead th,
    section#page-analisis-placas.active .data-table tbody td {
        animation: colReveal 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }
    section#page-analisis-placas.active .data-table thead th:nth-child(1),
    section#page-analisis-placas.active .data-table tbody td:nth-child(1) { animation-delay: 0.05s; }
    section#page-analisis-placas.active .data-table thead th:nth-child(2),
    section#page-analisis-placas.active .data-table tbody td:nth-child(2) { animation-delay: 0.08s; }
    section#page-analisis-placas.active .data-table thead th:nth-child(3),
    section#page-analisis-placas.active .data-table tbody td:nth-child(3) { animation-delay: 0.11s; }
    section#page-analisis-placas.active .data-table thead th:nth-child(n+4),
    section#page-analisis-placas.active .data-table tbody td:nth-child(n+4) { animation-delay: 0.14s; }
    @keyframes colReveal {
        from { opacity: 0; transform: translateX(-8px); }
        to   { opacity: 1; transform: translateX(0); }
    }

    /* ================ API KEYS — blur out (secure) ============ */
    /* Cards aparecen con blur que se limpia (como decoding). */
    section#page-api-keys.active .card,
    section#page-api-keys.active .data-table tbody tr {
        animation: secureReveal 0.65s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }
    section#page-api-keys.active .card:nth-child(1), section#page-api-keys.active .data-table tbody tr:nth-child(1) { animation-delay: 0.1s; }
    section#page-api-keys.active .card:nth-child(2), section#page-api-keys.active .data-table tbody tr:nth-child(2) { animation-delay: 0.2s; }
    section#page-api-keys.active .card:nth-child(n+3), section#page-api-keys.active .data-table tbody tr:nth-child(n+3) { animation-delay: 0.3s; }
    @keyframes secureReveal {
        0%   { opacity: 0; transform: scale(0.96); filter: blur(10px); letter-spacing: 0.3em; }
        50%  { filter: blur(2px); letter-spacing: 0.05em; }
        100% { opacity: 1; transform: scale(1); filter: blur(0); letter-spacing: normal; }
    }

    /* ================ SCHEDULER — radial dispatch ============ */
    /* Cards emergen desde el centro con leve rotación (como relojes). */
    section#page-scheduler.active .card {
        animation: radialDispatch 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }
    section#page-scheduler.active .card:nth-child(1) { animation-delay: 0.1s; }
    section#page-scheduler.active .card:nth-child(2) { animation-delay: 0.17s; }
    section#page-scheduler.active .card:nth-child(3) { animation-delay: 0.24s; }
    section#page-scheduler.active .card:nth-child(n+4) { animation-delay: 0.31s; }
    @keyframes radialDispatch {
        0%   { opacity: 0; transform: scale(0.6) rotate(-20deg); }
        60%  { opacity: 1; transform: scale(1.06) rotate(3deg); }
        100% { opacity: 1; transform: scale(1) rotate(0); }
    }

    /* ================ SISTEMA — boot sequence ============ */
    /* Bloques aparecen línea a línea tipo terminal (clip-path reveal
       de izq a der con cursor imaginario). */
    section#page-sistema.active .card,
    section#page-sistema.active .data-table tbody tr {
        animation: bootSeq 0.55s steps(30) both;
    }
    section#page-sistema.active .card:nth-child(1), section#page-sistema.active .data-table tbody tr:nth-child(1) { animation-delay: 0.08s; }
    section#page-sistema.active .card:nth-child(2), section#page-sistema.active .data-table tbody tr:nth-child(2) { animation-delay: 0.20s; }
    section#page-sistema.active .card:nth-child(3), section#page-sistema.active .data-table tbody tr:nth-child(3) { animation-delay: 0.32s; }
    section#page-sistema.active .card:nth-child(n+4), section#page-sistema.active .data-table tbody tr:nth-child(n+4) { animation-delay: 0.44s; }
    @keyframes bootSeq {
        from { opacity: 0; clip-path: inset(0 100% 0 0); }
        to   { opacity: 1; clip-path: inset(0 0 0 0); }
    }

    /* ============ reduce-motion: desactivar todo ============ */
    @media (prefers-reduced-motion: reduce) {
        section.page.active *,
        section.page.active::before {
            animation: none !important;
        }
    }
}

/* ============================================================
   Performance v6.7 — optimizaciones sin cambiar comportamiento
   ============================================================
   1. content-visibility: auto en .page:not(.active) → el browser
      se saltea layout + paint + composite de las secciones ocultas
      hasta que son visibles. Reduce el work inicial en 60-80% en
      una app con ~30 secciones como esta (LARGE win).
   2. contain: layout paint en contenedores grandes (evita que
      cambios internos disparen reflow del padre).
   3. backface-visibility: hidden + transform: translateZ(0) en
      elementos animados → fuerzan capa GPU, composite-only.
   4. will-change solo durante animación (via animation itself),
      nunca estático (no se debe usar como blanket opt-in).
   ------------------------------------------------------------ */

/* Secciones fuera de vista: saltear el work de render hasta que se
   activen. Intrinsic-size evita salto de layout cuando aparecen. */
section.page:not(.active) {
    content-visibility: auto;
    contain-intrinsic-size: auto 800px;
}

/* Tablas grandes (data-table) y grids de cards: layout+paint containment
   limita el scope de reflow cuando actualizan sus children. */
.data-table,
.gar-cards-grid,
.gar-kanban,
.qc-pillars,
.page-grid {
    contain: layout paint;
}

/* Animated elements con transforms: promover a capa GPU para que el
   browser pueda compositar sin repintar. */
section.page.active .gar-card,
section.page.active .gar-kan-card,
section.page.active .card,
section.page.active .stat-card,
section.page.active .kpi-row > *,
section.page.active .data-table tbody tr {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
}

/* Sidebar: contain strict (no afecta fuera del bounding box) */
aside.sidebar {
    contain: layout style;
}

/* Scroll containment en el sidebar-nav (scroll interno no afecta outside) */
.sidebar-nav {
    contain: content;
}

/* ============================================================
   Mobile v7.0 — Spotify-style layout para iPhone 13 Pro Max
   ============================================================
   iPhone 13 Pro Max: 428 × 926 CSS px, notch ~59px top,
   home indicator ~34px bottom. Usamos env(safe-area-inset-*)
   con viewport-fit=cover.
   ------------------------------------------------------------ */
@media (max-width: 820px) {

    /* Desactivar animaciones pesadas de desktop en mobile — son
       distractoras en viewport chico y consumen CPU innecesaria */
    body { animation: none !important; }
    aside.sidebar, .sidebar-brand { animation: none !important; }

    /* --- Safe areas para notch + home indicator ------------------ */
    :root {
        --safe-top: env(safe-area-inset-top, 0);
        --safe-bot: env(safe-area-inset-bottom, 0);
        --tab-h: 58px;        /* alto de bottom tabs (sin safe area) */
        --top-h: 54px;        /* alto del topbar (sin safe area) */
    }

    body {
        padding-top: calc(var(--top-h) + var(--safe-top)) !important;
        padding-bottom: calc(var(--tab-h) + var(--safe-bot)) !important;
        overscroll-behavior-y: contain; /* evita bounce que rompe layout */
    }

    /* --- Topbar: integra notch, título tipo Spotify -------------- */
    .mob-topbar {
        height: calc(var(--top-h) + var(--safe-top)) !important;
        padding-top: var(--safe-top) !important;
        padding-left: max(16px, env(safe-area-inset-left)) !important;
        padding-right: max(16px, env(safe-area-inset-right)) !important;
        background: color-mix(in srgb, var(--bg) 88%, transparent) !important;
        backdrop-filter: blur(28px) saturate(1.3) !important;
        -webkit-backdrop-filter: blur(28px) saturate(1.3) !important;
        border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent) !important;
        transition: background 0.25s, border-color 0.25s;
    }
    .mob-topbar-title {
        font-size: 20px !important;
        font-weight: 700 !important;
        letter-spacing: -0.4px !important;
        color: var(--text) !important;
    }

    /* --- Bottom tab bar: glass, safe area, 44+ touch targets ----- */
    aside.sidebar {
        height: calc(var(--tab-h) + var(--safe-bot)) !important;
        padding-bottom: var(--safe-bot) !important;
        background: color-mix(in srgb, var(--bg-sidebar) 85%, transparent) !important;
        backdrop-filter: blur(32px) saturate(1.3) !important;
        -webkit-backdrop-filter: blur(32px) saturate(1.3) !important;
        border-top: 1px solid color-mix(in srgb, var(--border) 45%, transparent) !important;
        z-index: 300 !important;
    }

    /* En landing mode NO ocultamos las bottom tabs (son el nav
       primario mobile). Forzamos visible. */
    body.landing-mode aside.sidebar {
        animation: none !important;
        transform: translateX(0) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .sidebar-nav {
        padding-left: max(0px, env(safe-area-inset-left)) !important;
        padding-right: max(0px, env(safe-area-inset-right)) !important;
        align-items: stretch !important;
    }

    /* Los grupos colapsables (desktop) envuelven los nav-items en
       .nav-group-items > .nav-group-inner. En mobile:
         - labels + chevron ocultos
         - wrappers con display: contents → hijos se integran al flex
         - TODOS los nav-items hidden por default, solo 5 visibles */
    .sidebar-nav .nav-group-label,
    .sidebar-nav .nav-group-chevron,
    .sidebar-nav .nav-subgroup-label {
        display: none !important;
    }
    .sidebar-nav .nav-group-items,
    .sidebar-nav .nav-group-inner {
        display: contents !important;
    }

    /* Hard reset: TODOS los items (wrapped o no) ocultos + font-size 0
       para que el texto directo del <a> nunca sea visible. Luego los 5
       tabs explícitamente visibles con display:flex. Specificity alta
       (dos classes + atributo) para ganarle al v6.0 legacy. */
    body .sidebar-nav a.nav-item {
        display: none !important;
        font-size: 0 !important;
    }
    body .sidebar-nav a.nav-item[data-page="inicio"],
    body .sidebar-nav a.nav-item[data-page="compras"],
    body .sidebar-nav a.nav-item[data-page="buscar"],
    body .sidebar-nav a.nav-item[data-page="rma-dashboard"],
    body .sidebar-nav a.nav-item.mob-tab-menu {
        display: flex !important;
    }
    /* Anti "Inicio" duplicado: el bloque legacy de bottom-nav mostraba data-page="dashboard"
       como tab "Inicio". El home canónico del bottom-nav es data-page="inicio", así que
       ocultamos el tab dashboard (specificity 0,3,2 le gana al legacy 0,3,1). */
    body .sidebar-nav a.nav-item[data-page="dashboard"] { display: none !important; }
    /* Vendedor: reemplazar "Compras" por "Ventas" */
    body[data-role="vendedor"] .sidebar-nav a.nav-item[data-page="compras"] { display: none !important; }
    body[data-role="vendedor"] .sidebar-nav a.nav-item[data-page="ventas"] { display: flex !important; }
    /* Técnico: reemplazar "Compras" por "RMA Técnico", ocultar rma-dashboard */
    body[data-role="tecnico"] .sidebar-nav a.nav-item[data-page="compras"] { display: none !important; }
    body[data-role="tecnico"] .sidebar-nav a.nav-item[data-page="rma-tecnico"] { display: flex !important; }
    body[data-role="tecnico"] .sidebar-nav a.nav-item[data-page="rma-dashboard"] { display: none !important; }

    /* Tab items: 44+ touch target, vertical stack.
       Selectores sin `>` para alcanzar los items wrapped en
       .nav-group-inner. */
    .sidebar-nav a.nav-item {
        flex: 1 !important;
        min-width: 0 !important;
        min-height: 44px !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 3px !important;
        padding: 6px 4px 0 !important;
        color: var(--text-muted) !important;
        background: transparent !important;
        border-radius: 0 !important;
        transform: none !important;
        transition: color 0.2s, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
        animation: none !important;
    }
    .sidebar-nav a.nav-item:active { transform: scale(0.94) !important; }
    .sidebar-nav a.nav-item.active { color: var(--accent) !important; }
    .sidebar-nav a.nav-item.active svg { color: var(--accent) !important; }
    .sidebar-nav a.nav-item.active::before,
    .sidebar-nav a.nav-item.active::after { display: none !important; }
    .sidebar-nav a.nav-item svg {
        width: 23px !important;
        height: 23px !important;
        transform: none !important;
        transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    }
    .sidebar-nav a.nav-item.active svg { transform: translateY(-1px) scale(1.06) !important; }
    .sidebar-nav a.nav-item .mob-label,
    .sidebar-nav a.nav-item:not(.mob-tab)::after {
        display: block !important;
        font-size: 10px !important;
        font-weight: 500 !important;
        letter-spacing: 0.1px !important;
        color: inherit !important;
    }
    .sidebar-nav a.nav-item[data-page="inicio"]::after { content: "Inicio"; }
    .sidebar-nav a.nav-item[data-page="compras"]::after { content: "Compras"; }
    .sidebar-nav a.nav-item[data-page="ventas"]::after { content: "Ventas"; }
    .sidebar-nav a.nav-item[data-page="buscar"]::after { content: "Buscar"; }
    .sidebar-nav a.nav-item[data-page="rma-dashboard"]::after,
    .sidebar-nav a.nav-item[data-page="rma-tecnico"]::after { content: "RMA"; }

    /* --- Badge sobre el icono del tab ---------------------------- */
    .sidebar-nav a.nav-item .nav-badge {
        position: absolute !important;
        top: 4px !important;
        right: calc(50% - 20px) !important;
        font-size: 9px !important;
        padding: 0 5px !important;
        min-width: 16px !important;
        height: 16px !important;
        line-height: 16px !important;
        border-radius: 8px !important;
        background: var(--accent) !important;
        color: #fff !important;
        box-shadow: 0 0 0 2px var(--bg-sidebar) !important;
    }

    /* --- Main content: ocultar topbar desktop, scroll smooth ----- */
    main.main {
        width: 100% !important;
        margin-left: 0 !important;
        min-height: calc(100dvh - var(--top-h) - var(--tab-h) - var(--safe-top) - var(--safe-bot)) !important;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
    main.main > header.topbar { display: none !important; }

    /* Pages: padding Spotify-like y safe area lateral */
    section.page {
        padding: 16px max(16px, env(safe-area-inset-left)) 24px max(16px, env(safe-area-inset-right)) !important;
    }

    /* --- Landing en mobile: full-screen hero sin sidebar ocultado - */
    body.landing-mode main.main > header.topbar { display: none !important; }
    body.landing-mode .mob-topbar { display: flex !important; }
    body.landing-mode .landing-sidebar-trigger { display: none !important; }

    #page-inicio { padding: 12px 16px 24px !important; }
    .qc-hero-head { padding: 20px 0 28px !important; }
    .qc-hero-kicker { font-size: 10.5px !important; margin-bottom: 10px !important; }
    .qc-hero-ctas { gap: 8px !important; }
    .qc-cta-primary, .qc-cta-secondary {
        font-size: 13px;
        padding: 11px 18px;
        flex: 1;
    }
    .qc-pillars { grid-template-columns: 1fr !important; gap: 10px !important; margin-top: 4px !important; }
    .qc-pillar { padding: 18px 16px !important; border-radius: 14px !important; }
    .qc-pillar-title { font-size: 15px !important; }
    .qc-pillar-desc { font-size: 13px !important; }
    .qc-hero-footer { margin-top: 24px !important; font-size: 11px !important; }

    /* --- Cards/KPIs más generosos en mobile ---------------------- */
    .kpi-row {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        margin-bottom: 14px !important;
    }
    .kpi {
        padding: 14px 12px !important;
        border-radius: 14px !important;
        min-height: 72px !important;
    }
    .kpi-value { font-size: 22px !important; font-weight: 700 !important; }
    .kpi-label { font-size: 11px !important; letter-spacing: 0.2px !important; text-transform: uppercase !important; color: var(--text-muted) !important; }

    .card, .stat-card {
        border-radius: 14px !important;
        padding: 16px !important;
    }

    /* --- Menu drawer: slide desde abajo (bottom sheet) ----------- */
    .mob-menu {
        transform: translateY(100%) !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 85dvh !important;
        max-height: 85vh !important;
        border-radius: 24px 24px 0 0 !important;
        transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
        background: var(--bg-card) !important;
        padding-bottom: var(--safe-bot) !important;
        box-shadow: 0 -10px 40px rgba(0,0,0,0.25);
    }
    .mob-menu.open { transform: translateY(0) !important; }
    .mob-menu::before {
        content: "";
        display: block;
        width: 40px;
        height: 4px;
        background: var(--border-strong);
        border-radius: 2px;
        margin: 10px auto 0;
        opacity: 0.5;
    }

    /* --- Listas / tablas: horizontal scroll suave ---------------- */
    .data-table {
        min-width: 560px !important;
    }
    .card-body.no-pad {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    .card-body.no-pad::-webkit-scrollbar { display: none !important; }

    /* --- Pills horizontales con snap --------------------------- */
    .tab-pills, .pill-row {
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 8px !important;
        padding: 6px 2px !important;
    }
    .tab-pills::-webkit-scrollbar, .pill-row::-webkit-scrollbar { display: none !important; }
    .pill {
        scroll-snap-align: start;
        min-height: 34px !important;
        padding: 7px 14px !important;
        font-size: 12.5px !important;
        border-radius: 999px !important;
    }

    /* --- Buttons: 44+ touch targets ------------------------------ */
    .btn, .btn-primary, .btn-secondary, button:not(.pill):not(.nav-item):not(.qc-cta-primary):not(.qc-cta-secondary) {
        min-height: 44px !important;
    }

    /* --- Inputs: 16px font (evita zoom en iOS) + padding -------- */
    input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="search"], input[type="tel"],
    textarea, select {
        font-size: 16px !important;
        padding: 12px 14px !important;
        border-radius: 12px !important;
    }

    /* --- Charts: max-height razonable ---------------------------- */
    canvas { max-height: 220px !important; }

    /* --- FAB / Aria: respetar safe-area-bottom ------------------- */
    .qfab, .fab-button {
        bottom: calc(var(--tab-h) + var(--safe-bot) + 12px) !important;
        right: max(12px, env(safe-area-inset-right)) !important;
    }

    /* --- Scrollbar hide global en mobile ------------------------- */
    ::-webkit-scrollbar { display: none !important; }
    * { scrollbar-width: none; }

    /* --- Tap highlight de iOS: sutil accent, no azul defecto ----- */
    a, button, .nav-item, .card, .pill, .kpi {
        -webkit-tap-highlight-color: color-mix(in srgb, var(--accent) 12%, transparent);
    }

    /* --- Prevenir double-tap zoom en elementos interactivos ------ */
    button, .nav-item, .pill, .qc-cta-primary, .qc-cta-secondary,
    .kpi, .card-header {
        touch-action: manipulation;
    }

    /* --- Animaciones mobile: simplificar y acortar --------------- */
    section.page.active {
        animation: mobilePageIn 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) both !important;
    }
    @keyframes mobilePageIn {
        from { opacity: 0; transform: translateY(6px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    /* Desactivar la mayoría de animations de children en mobile:
       se sienten más fluidas sin stagger en pantalla chica */
    section.page.active .kpi-row > *,
    section.page.active .stats-grid > *,
    section.page.active .card,
    section.page.active .gar-card,
    section.page.active .gar-kan-col,
    section.page.active .gar-kan-card,
    section.page.active .data-table tbody tr,
    section.page.active .pill,
    section.page.active .page-toolbar {
        animation: none !important;
    }
}

/* ============ Sub-nav mobile contextual por categoría ============
   Barra horizontal con pills scrollables que aparece debajo del topbar
   SOLO en mobile y SOLO cuando la categoría activa tiene sub-vistas
   (RMA, Compras, Mercado, Administración). Renderizado por JS en
   renderMobileSubnav() según la página activa. */
.mob-subnav {
    display: none;
}
@media (max-width: 820px) {
    .mob-subnav {
        display: flex;
        position: fixed;
        top: calc(var(--top-h) + var(--safe-top));
        left: 0;
        right: 0;
        z-index: 189;
        background: color-mix(in srgb, var(--bg) 92%, transparent);
        backdrop-filter: blur(24px) saturate(1.2);
        -webkit-backdrop-filter: blur(24px) saturate(1.2);
        border-bottom: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
        padding: 8px max(14px, env(safe-area-inset-left));
        padding-right: max(14px, env(safe-area-inset-right));
        gap: 8px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        min-height: 44px;
        transform: translateY(-100%);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
                    opacity 0.22s ease;
    }
    .mob-subnav::-webkit-scrollbar { display: none; }
    .mob-subnav.visible {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }
    body.mob-subnav-on main.main {
        padding-top: 44px;
    }
    body.mob-subnav-on { padding-top: calc(var(--top-h) + var(--safe-top) + 44px) !important; }

    .mob-subnav-pill {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 14px;
        border-radius: 999px;
        background: color-mix(in srgb, var(--bg-card) 80%, transparent);
        border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
        color: var(--text-secondary);
        font-size: 12.5px;
        font-weight: 500;
        letter-spacing: 0.1px;
        cursor: pointer;
        white-space: nowrap;
        scroll-snap-align: start;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
    }
    .mob-subnav-pill:active { transform: scale(0.95); }
    .mob-subnav-pill.active {
        background: var(--accent);
        border-color: var(--accent);
        color: #fff;
        font-weight: 600;
    }
    .mob-subnav-pill .mob-subnav-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        margin-left: 2px;
        font-size: 10px;
        font-weight: 700;
        background: color-mix(in srgb, var(--bg) 60%, transparent);
        color: inherit;
        border-radius: 10px;
    }
    .mob-subnav-pill.active .mob-subnav-badge {
        background: rgba(255, 255, 255, 0.25);
        color: #fff;
    }
}

/* iPhone Pro Max específico — 428×926+ */
@media (max-width: 820px) and (min-height: 800px) {
    :root {
        --tab-h: 62px;
    }
    .sidebar-nav a.nav-item svg { width: 25px !important; height: 25px !important; }
}

/* Landscape orientation en mobile: topbar + tabs más compactos */
@media (max-width: 920px) and (orientation: landscape) {
    :root {
        --top-h: 46px;
        --tab-h: 50px;
    }
    .qc-hero-head { padding: 12px 0 16px !important; }
}

/* ============================================================================
   SCRAPER HEALTH — dashboard observabilidad
   ============================================================================ */
#page-scraper-health .ap-kpi-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin: 16px 0;
}
#page-scraper-health .ap-kpi {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
#page-scraper-health .ap-kpi-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
#page-scraper-health .ap-kpi-value {
    font-size: 24px;
    font-weight: 700;
    font-family: var(--font-mono);
}
#page-scraper-health .ap-kpi-ok    { border-color: #22c55e44; }
#page-scraper-health .ap-kpi-ok    .ap-kpi-value { color: var(--status-ok-solid); }
#page-scraper-health .ap-kpi-warn  { border-color: color-mix(in oklch, var(--accent-yellow) 27%, transparent); }
#page-scraper-health .ap-kpi-warn  .ap-kpi-value { color: var(--accent-yellow); }
#page-scraper-health .ap-kpi-fail  { border-color: #ef444488; }
#page-scraper-health .ap-kpi-fail  .ap-kpi-value { color: var(--status-err-solid); }
#page-scraper-health .ap-kpi-stale { border-color: #6b728088; }
#page-scraper-health .ap-kpi-stale .ap-kpi-value { color: #6b7280; }

#page-scraper-health .ap-toolbar {
    display: flex; align-items: center; gap: 16px; margin: 12px 0;
    flex-wrap: wrap;
}
#page-scraper-health .ap-filters {
    display: flex; align-items: center; gap: 16px;
    color: var(--text-secondary); font-size: 13px;
}
#page-scraper-health .ap-select {
    background: var(--bg-input); border: 1px solid var(--border);
    border-radius: 6px; padding: 6px 10px; color: var(--text);
}

#page-scraper-health .sh-row { cursor: pointer; transition: background 0.15s; }
#page-scraper-health .sh-row:hover { background: var(--bg-hover); }

/* Capa 8 — panel de Errores: reusa el look de Salud Scraping (sus .ap-* están scopeados por página) */
#page-errores .ap-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 16px 0; }
#page-errores .ap-kpi {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
    padding: 14px 16px; display: flex; flex-direction: column; gap: 4px;
}
#page-errores .ap-kpi-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
#page-errores .ap-kpi-value { font-size: 24px; font-weight: 700; font-family: var(--font-mono); }
#page-errores .ap-kpi-fail { border-color: #ef444488; }
#page-errores .ap-kpi-fail .ap-kpi-value { color: var(--status-err-solid); }
#page-errores .ap-toolbar { display: flex; align-items: center; gap: 16px; margin: 12px 0; flex-wrap: wrap; }
#page-errores .ap-filters { display: flex; align-items: center; gap: 16px; color: var(--text-secondary); font-size: 13px; }
#page-errores .err-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
#page-errores .err-backend { background: color-mix(in oklch, var(--accent-yellow) 16%, transparent); color: var(--accent-yellow); }
#page-errores .err-frontend { background: color-mix(in srgb, #38bdf8 18%, transparent); color: #38bdf8; }
#page-errores .err-veces { font-weight: 700; font-family: var(--font-mono); padding: 1px 8px; border-radius: 6px; }
#page-errores .err-veces-high { background: #ef444422; color: var(--status-err-solid); }
#page-errores .err-veces-mid { background: color-mix(in oklch, var(--accent-yellow) 13%, transparent); color: var(--accent-yellow); }
#page-errores .err-veces-low { color: var(--text-muted); }
#page-errores .err-ruta { font-size: 12px; color: var(--text-secondary); background: var(--bg-input); padding: 1px 6px; border-radius: 5px; }
#page-errores .err-resolver { cursor: pointer; white-space: nowrap; background: transparent; border: 1px solid var(--border); color: var(--text-secondary); border-radius: 6px; padding: 4px 11px; font-size: 12px; font-weight: 600; transition: all .15s; }
#page-errores .err-resolver:hover { border-color: #22c55e88; color: var(--status-ok-solid); background: #22c55e11; }
#page-errores .ap-table tbody tr:hover { background: var(--bg-hover); }
@media (max-width: 640px) { #page-errores .ap-kpi-row { grid-template-columns: repeat(2, 1fr); } }

.sh-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.sh-badge.sh-ok    { background: #22c55e22; color: var(--status-ok-solid); border: 1px solid #22c55e44; }
.sh-badge.sh-warn  { background: color-mix(in oklch, var(--accent-yellow) 13%, transparent); color: var(--accent-yellow); border: 1px solid color-mix(in oklch, var(--accent-yellow) 27%, transparent); }
.sh-badge.sh-fail  { background: #ef444422; color: var(--status-err-solid); border: 1px solid #ef444488; }
.sh-badge.sh-stale { background: #6b728022; color: #9ca3af; border: 1px solid #6b728066; }

.sh-rate { font-family: var(--font-mono); font-weight: 600; }
.sh-rate.sh-ok    { color: var(--status-ok-solid); }
.sh-rate.sh-warn  { color: var(--accent-yellow); }
.sh-rate.sh-fail  { color: var(--status-err-solid); }
.sh-rate.sh-stale { color: #6b7280; }

.sh-error-cell {
    color: var(--status-err-solid);
    font-family: var(--font-mono);
    font-size: 11px;
    cursor: help;
}

.sh-history-list {
    display: flex; flex-direction: column; gap: 6px;
    max-height: 400px; overflow-y: auto;
}
.sh-history-row {
    display: grid;
    grid-template-columns: 160px 70px 1fr auto;
    gap: 12px;
    padding: 6px 10px;
    background: var(--bg-card);
    border-radius: 4px;
    font-size: 13px;
    align-items: center;
}
.sh-history-ts { color: var(--text-muted); font-family: var(--font-mono); font-size: 12px; }
.sh-history-counts { color: var(--text-secondary); font-family: var(--font-mono); font-size: 12px; }
.sh-history-err { color: var(--status-err-solid); font-size: 11px; }

/* Sidebar badge */
.nav-badge.nav-badge-warn { background: var(--accent-yellow); color: #000; }
.nav-badge.nav-badge-fail { background: var(--status-err-solid); color: #fff; }

@media (max-width: 900px) {
    #page-scraper-health .ap-kpi-row { grid-template-columns: repeat(2, 1fr); }
    #page-scraper-health .ap-toolbar { flex-direction: column; align-items: stretch; }
    .sh-history-row { grid-template-columns: 1fr; }
}

/* ============================================================================
 * v2.10.0 — Coloreado de tablas por serie + filas prioritarias (Fase 2)
 * Diferencia visual entre RTX 50/40/30, RX 7000/9000, etc. con backgrounds
 * sutiles. Filas marcadas como `data-prioritario="true"` tienen border-left
 * destacado para identificar gama legacy importante en outlet (GTX 16/10,
 * RTX 20/30, GT entry, RX 500/5000/6000, Vega).
 * ============================================================================ */

/* Backgrounds por serie — gradientes muy sutiles, mantienen contraste para edits */
[id^="page-analisis-"] tr[data-serie="RTX 50"]   { background: linear-gradient(90deg, rgba(118, 185, 0, 0.06), transparent 80%); }
[id^="page-analisis-"] tr[data-serie="RTX 40"]   { background: linear-gradient(90deg, rgba(118, 185, 0, 0.04), transparent 80%); }
[id^="page-analisis-"] tr[data-serie="RTX 30"]   { background: linear-gradient(90deg, rgba(118, 185, 0, 0.025), transparent 80%); }
[id^="page-analisis-"] tr[data-serie="RTX 20"]   { background: linear-gradient(90deg, rgba(118, 185, 0, 0.02), transparent 80%); }
[id^="page-analisis-"] tr[data-serie="GTX 16"]   { background: linear-gradient(90deg, rgba(118, 185, 0, 0.015), transparent 80%); }
[id^="page-analisis-"] tr[data-serie="GTX 10"]   { background: linear-gradient(90deg, rgba(118, 185, 0, 0.01), transparent 80%); }
[id^="page-analisis-"] tr[data-serie="GT entry"]{ background: linear-gradient(90deg, rgba(160, 160, 160, 0.02), transparent 80%); }

[id^="page-analisis-"] tr[data-serie="RX 9000"]  { background: linear-gradient(90deg, rgba(237, 28, 36, 0.05), transparent 80%); }
[id^="page-analisis-"] tr[data-serie="RX 7000"]  { background: linear-gradient(90deg, rgba(237, 28, 36, 0.04), transparent 80%); }
[id^="page-analisis-"] tr[data-serie="RX 6000"]  { background: linear-gradient(90deg, rgba(237, 28, 36, 0.03), transparent 80%); }
[id^="page-analisis-"] tr[data-serie="RX 5000"]  { background: linear-gradient(90deg, rgba(237, 28, 36, 0.02), transparent 80%); }
[id^="page-analisis-"] tr[data-serie="RX 500"]   { background: linear-gradient(90deg, rgba(237, 28, 36, 0.015), transparent 80%); }
[id^="page-analisis-"] tr[data-serie="Vega"]     { background: linear-gradient(90deg, rgba(237, 28, 36, 0.018), transparent 80%); }

/* Mothers — series AM4/AM5/Intel */
[id^="page-analisis-"] tr[data-serie^="Ryzen 9000"] { background: linear-gradient(90deg, rgba(237, 28, 36, 0.05), transparent 80%); }
[id^="page-analisis-"] tr[data-serie^="Ryzen 7000"] { background: linear-gradient(90deg, rgba(237, 28, 36, 0.04), transparent 80%); }
[id^="page-analisis-"] tr[data-serie^="Ryzen 5000"] { background: linear-gradient(90deg, rgba(237, 28, 36, 0.025), transparent 80%); }
[id^="page-analisis-"] tr[data-serie^="Intel 14"]   { background: linear-gradient(90deg, rgba(0, 113, 197, 0.04), transparent 80%); }
[id^="page-analisis-"] tr[data-serie^="Intel 13"]   { background: linear-gradient(90deg, rgba(0, 113, 197, 0.03), transparent 80%); }
[id^="page-analisis-"] tr[data-serie^="Intel 12"]   { background: linear-gradient(90deg, rgba(0, 113, 197, 0.025), transparent 80%); }
[id^="page-analisis-"] tr[data-serie^="Intel"]      { background: linear-gradient(90deg, rgba(0, 113, 197, 0.02), transparent 80%); }

/* RAMs/SSDs — series por generación */
[id^="page-analisis-"] tr[data-serie="DDR5"]   { background: linear-gradient(90deg, rgba(118, 185, 0, 0.04), transparent 80%); }
[id^="page-analisis-"] tr[data-serie="DDR4"]   { background: linear-gradient(90deg, rgba(160, 160, 160, 0.03), transparent 80%); }
[id^="page-analisis-"] tr[data-serie="NVMe Gen5"] { background: linear-gradient(90deg, rgba(118, 185, 0, 0.05), transparent 80%); }
[id^="page-analisis-"] tr[data-serie="NVMe Gen4"] { background: linear-gradient(90deg, rgba(118, 185, 0, 0.035), transparent 80%); }
[id^="page-analisis-"] tr[data-serie="NVMe Gen3"] { background: linear-gradient(90deg, rgba(118, 185, 0, 0.02), transparent 80%); }
[id^="page-analisis-"] tr[data-serie="SATA SSD"]  { background: linear-gradient(90deg, rgba(160, 160, 160, 0.02), transparent 80%); }

/* Filas prioritarias (outlet legacy en placas) — border-left coloreado destacado */
[id^="page-analisis-"] tr[data-prioritario="true"] {
    border-left: 4px solid var(--accent-yellow);
    box-shadow: inset 4px 0 0 -3px color-mix(in oklch, var(--accent-yellow) 45%, transparent);
}

[id^="page-analisis-"] tr[data-prioritario="true"] td:first-child {
    font-weight: 600;
}

/* Hover destacado */
[id^="page-analisis-"] tbody tr[data-modelo]:hover {
    background-color: rgba(255, 255, 255, 0.04);
}

/* Separador visual entre series consecutivas — borde superior sutil cuando cambia */
[id^="page-analisis-"] tr[data-serie-change="true"] {
    border-top: 2px solid rgba(255, 255, 255, 0.08);
}

/* Header de sección por serie — fila completa destacada */
[id^="page-analisis-"] tr.ap-row-serie td {
    padding: 12px 14px !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    color: #d1d5db;
    border-top: 2px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: sticky;
    left: 0;
    z-index: 1;
}

/* Header de sección PRIORITARIA en outlet — destacado en ámbar */
[id^="page-analisis-"] tr.ap-row-serie[data-prioritario="true"] td {
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.12) 0%, rgba(245, 158, 11, 0.04) 100%);
    color: var(--status-warn-solid);
    border-top: 2px solid rgba(245, 158, 11, 0.45);
    border-bottom: 1px solid rgba(245, 158, 11, 0.2);
}

/* v2.10.3 — Análisis del Ciclo */
#page-ciclo-analytics .ap-section-block {
    margin-top: 28px;
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
}

#page-ciclo-analytics .ap-section-title {
    margin: 0 0 12px 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: #f3f4f6;
}

#page-ciclo-analytics .ap-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 28px;
}

@media (max-width: 1100px) {
    #page-ciclo-analytics .ap-grid-2 { grid-template-columns: 1fr; }
}

#page-ciclo-analytics .ap-warnings-banner {
    margin-top: 20px;
    padding: 14px 18px;
    background: color-mix(in oklch, var(--accent-yellow) 8%, transparent);
    border-left: 4px solid var(--accent-yellow);
    border-radius: 6px;
}

#page-ciclo-analytics .ap-warnings-banner h3 {
    margin: 0 0 8px 0;
    color: var(--status-warn-solid);
    font-size: 1rem;
}

#page-ciclo-analytics .ap-warnings-banner ul {
    margin: 0;
    padding-left: 22px;
    font-size: 0.9rem;
    color: #d1d5db;
}

#page-ciclo-analytics .ap-warnings-banner li {
    margin-bottom: 4px;
}

/* Status pills para tabla competidor */
#page-ciclo-analytics .ca-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}
#page-ciclo-analytics .ca-pill-ok       { background: rgba(34, 197, 94, 0.18); color: #4ade80; }
#page-ciclo-analytics .ca-pill-warn     { background: rgba(245, 158, 11, 0.18); color: var(--status-warn-solid); }
#page-ciclo-analytics .ca-pill-fail     { background: rgba(239, 68, 68, 0.18); color: #fca5a5; }
#page-ciclo-analytics .ca-pill-stale    { background: rgba(107, 114, 128, 0.25); color: #9ca3af; }

/* KPI variants */
#page-ciclo-analytics .ap-kpi-warn .ap-kpi-value { color: var(--status-warn-solid); }
#page-ciclo-analytics .ap-kpi-fail .ap-kpi-value { color: #fca5a5; }


/* Badge "prioritaria outlet" en el header de sección */
[id^="page-analisis-"] .ap-serie-badge {
    display: inline-block;
    margin-left: 10px;
    padding: 2px 8px;
    font-size: 0.7em;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    background: rgba(245, 158, 11, 0.2);
    color: var(--status-warn-solid);
    border-radius: 4px;
    border: 1px solid rgba(245, 158, 11, 0.4);
}


/* =========================================================
   TIENDANUBE — dashboard + pedidos + clientes + catálogo
   ========================================================= */
.tn-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-top: 16px;
}
.tn-kpi {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 18px;
}
.tn-kpi h4 {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.tn-kpi-num {
    font-size: 28px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.1;
}
.tn-kpi-sub {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
}
.tn-kpi-rev {
    font-size: 14px;
    color: var(--accent);
    margin-top: 6px;
    font-weight: 600;
}
.tn-kpi.tn-kpi-alert {
    background: linear-gradient(135deg, rgba(218, 119, 86, 0.08), transparent);
    border-color: var(--accent);
}
.tn-kpi.tn-kpi-alert .tn-kpi-num {
    color: var(--accent);
}

.tn-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.tn-filter-row select,
.tn-filter-row input {
    background: var(--bg-card-hover);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 13px;
}
.tn-pager {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    margin-top: 12px;
    font-size: 13px;
    color: var(--text-secondary);
}

.tn-row-click {
    cursor: pointer;
    transition: background 0.15s;
}
.tn-row-click:hover {
    background: var(--bg-card-hover);
}

.tn-badge {
    display: inline-block;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
    border: 1px solid transparent;
}
.tn-badge-ok    { background: rgba(34, 197, 94, 0.15);  color: var(--status-ok-solid); border-color: rgba(34, 197, 94, 0.4); }
.tn-badge-warn  { background: color-mix(in oklch, var(--accent-yellow) 15%, transparent); color: var(--accent-yellow); border-color: color-mix(in oklch, var(--accent-yellow) 40%, transparent); }
.tn-badge-err   { background: rgba(239, 68, 68, 0.15);  color: var(--status-err-solid); border-color: rgba(239, 68, 68, 0.4); }
.tn-badge-muted { background: var(--bg-card-hover); color: var(--text-secondary); border-color: var(--border); }

.tn-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    padding: 12px 0;
}
.tn-detail-grid > div {
    font-size: 13px;
    line-height: 1.5;
}

/* modal genérico para TN (y reutilizable) */
.qc-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 32px;
}
.qc-modal-content {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    max-width: 900px;
    width: 100%;
    max-height: 85vh;
    overflow: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.qc-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--bg-card);
}
.qc-modal-head h3 {
    margin: 0;
    font-size: 18px;
}
.qc-modal-close {
    background: transparent;
    border: 0;
    color: var(--text);
    font-size: 26px;
    cursor: pointer;
    padding: 0 8px;
}
.qc-modal-body {
    padding: 18px 22px;
}

/* ============================================================
   INICIO — Hub bento (estética cálida Claude / terracota)
   v6.1: re-pulido en la base styles.css. Reemplaza el pulido que
   vivía SOLO en glass.css (skin qc-skin-glass, ahora desactivado).
   Sin glossy iOS: profundidad con sombras cálidas + acento terracota.
   Theme-aware vía tokens (sirve claro y oscuro).
   ============================================================ */
.qc-hub { display: flex; flex-direction: column; gap: 20px; max-width: 1200px; }

/* Top bar */
.qc-hub-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.qc-hub-bar-left { display: flex; align-items: center; gap: 10px; }
.qc-status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent-green, #5c8c62);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-green, #5c8c62) 18%, transparent); }
.qc-hub-bar-text { font-size: 15px; color: var(--text-secondary); }
.qc-hub-bar-text strong { color: var(--text); font-weight: 600; }
.qc-hub-bar-right { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.qc-hub-clock { font-family: var(--font-serif); font-weight: 600; font-size: 18px; color: var(--text); }
.qc-hub-date { font-size: 12px; color: var(--text-muted); text-transform: capitalize; }

/* Bento grid (el tile Sistema ahora entra en la grilla, antes flotaba) */
.qc-hub-bento { display: grid; grid-template-columns: 1.4fr 1fr 1fr;
    grid-template-rows: minmax(168px, auto) minmax(150px, auto);
    grid-template-areas: "hero catalog dolar" "hero activity system"; gap: 16px; }
.qc-hub-bento > .qc-tile:nth-child(1) { grid-area: hero; }
.qc-hub-bento > .qc-tile:nth-child(2) { grid-area: catalog; }
.qc-hub-bento > .qc-tile:nth-child(3) { grid-area: dolar; }
.qc-hub-bento > .qc-tile:nth-child(4) { grid-area: activity; }
.qc-hub-bento > .qc-tile:nth-child(5) { grid-area: system; }
@media (max-width: 980px) {
    .qc-hub-bento { grid-template-columns: 1fr 1fr; grid-template-rows: auto;
        grid-template-areas: "hero hero" "catalog dolar" "activity activity" "system system"; }
}

/* Tile base */
.qc-tile { position: relative; text-align: left; background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg, 12px); padding: 18px 20px; box-shadow: var(--shadow-sm);
    transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s, border-color .18s; overflow: hidden; }
button.qc-tile { font: inherit; color: inherit; width: 100%; }
.qc-tile[data-page-link] { cursor: pointer; }
.qc-tile[data-page-link]:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.qc-tile-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); font-weight: 600; }

/* Hero */
.qc-tile-hero { grid-area: hero; display: flex; flex-direction: column; gap: 6px; justify-content: flex-end;
    background: linear-gradient(150deg, var(--accent-soft) 0%, var(--bg-card) 58%);
    border-color: color-mix(in srgb, var(--accent) 28%, var(--border)); }
.qc-tile-hero-logo { margin-bottom: auto; display: inline-flex; }
.qc-tile-hero-logo svg { width: 56px; height: 56px; }
.qc-tile-hero-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); font-weight: 600; }
.qc-tile-hero-title { font-family: var(--font-serif); font-size: 30px; font-weight: 600; letter-spacing: -.02em; line-height: 1.05; color: var(--text); }
.qc-tile-hero-tagline { font-size: 13.5px; color: var(--text-secondary); max-width: 44ch; line-height: 1.5; }
.qc-tile-hero-cta { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 12px;
    background: var(--accent); color: #fff; padding: 9px 16px; border-radius: 999px; font-weight: 600; font-size: 13.5px;
    box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--accent) 80%, transparent);
    transition: transform .18s, box-shadow .18s, background .18s; }
.qc-tile-hero:hover .qc-tile-hero-cta { background: var(--accent-hover); transform: translateX(2px); }

/* Stat */
.qc-tile-stat { display: flex; flex-direction: column; gap: 6px; }
.qc-tile-big { font-family: var(--font-serif); font-size: 30px; font-weight: 600; letter-spacing: -.02em; color: var(--text); line-height: 1; }
.qc-tile-trend { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--accent-green, #5c8c62); margin-top: auto; }
.qc-tile-sparkline { margin-top: auto; height: 24px; }
.qc-tile-sparkline svg { width: 100%; height: 100%; }
.qc-tile-sparkline polyline { stroke: var(--accent); }

/* Activity */
.qc-tile-activity { grid-area: activity; }
.qc-tile-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.qc-tile-live { font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--accent-green, #5c8c62);
    background: color-mix(in srgb, var(--accent-green, #5c8c62) 14%, transparent); padding: 2px 8px; border-radius: 999px; }
.qc-activity-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.qc-activity-list li { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.qc-activity-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--text-muted); }
.qc-activity-dot.ok { background: var(--accent-green, #5c8c62); }
.qc-activity-dot.warn { background: var(--accent-yellow, #c19a3c); }
.qc-activity-text { color: var(--text-secondary); flex: 1; }
.qc-activity-time { color: var(--text-muted); font-size: 11.5px; white-space: nowrap; }

/* System */
.qc-tile-system { grid-area: system; }
.qc-system-rows { display: flex; flex-direction: column; gap: 9px; margin-top: 10px; }
.qc-system-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--text-secondary); }
.qc-mono { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.qc-pill { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; }
.qc-pill.ok { background: color-mix(in srgb, var(--accent-green, #5c8c62) 16%, transparent); color: var(--accent-green, #5c8c62); }
.qc-pill.warn { background: color-mix(in srgb, var(--accent-yellow, #c19a3c) 20%, transparent); color: var(--accent-yellow, #c19a3c); }

/* Quick actions (chips) */
.qc-hub-actions { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
@media (max-width: 980px) { .qc-hub-actions { grid-template-columns: repeat(2, 1fr); } }
.qc-action-chip { display: flex; align-items: center; gap: 11px; padding: 13px 14px; background: var(--bg-card);
    border: 1px solid var(--border); border-radius: var(--radius, 8px); cursor: pointer; text-decoration: none;
    transition: transform .16s, box-shadow .16s, border-color .16s; }
.qc-action-chip:hover { transform: translateY(-2px); box-shadow: var(--shadow);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.qc-chip-title { font-weight: 600; font-size: 13.5px; color: var(--text); }
.qc-chip-desc { font-size: 11.5px; color: var(--text-muted); }

/* Logo mark (sidebar) */
.sidebar-brand .brand-icon.qc-logo-mark { display: inline-flex; align-items: center; justify-content: center; }

/* ============================================================
   TIER 1 — Pulido global (estética cálida / terracota)
   v6.1: profundidad + foco consistente, SIN glossy iOS.
   Overrides aditivos (van al final → ganan por orden). Los selectores
   con :where() tienen especificidad 0: cualquier regla con clase los gana,
   así no piso componentes ya estilados, solo los "pelados".
   ============================================================ */

/* --- Botones: profundidad sutil + lift + foco terracota --- */
.btn-primary { box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 30%, transparent); border-color: var(--accent); }
.btn-primary:hover { transform: translateY(-1px);
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent) 65%, transparent); border-color: var(--accent-hover); }
.btn-secondary { background: var(--accent-soft); color: var(--accent-hover);
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border)); }
.btn-secondary:hover { background: color-mix(in srgb, var(--accent) 16%, var(--bg-card));
    transform: translateY(-1px); }
.btn-ghost:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
/* Botones "pelados": muchos usan .btn-primary/.btn-secondary SIN la clase .btn base, así que
   les faltaba padding/radius/transición/:active (se veían cuadrados y sin animación). Las variantes
   ahora traen el estilo base por su cuenta — fix de raíz, no por botón. (v3.00) */
.btn-primary, .btn-secondary, .btn-ghost, .btn-danger {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600;
    font-family: inherit; line-height: 1.2; cursor: pointer; border: 1px solid transparent;
    transition: transform .16s cubic-bezier(.22,.61,.36,1), box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.btn-primary.btn-sm, .btn-secondary.btn-sm, .btn-ghost.btn-sm { padding: 5px 12px; font-size: 12px; border-radius: 7px; }
.btn-primary:active, .btn-secondary:active, .btn-ghost:active, .btn-danger:active { transform: scale(.96); }
.btn-primary:disabled, .btn-secondary:disabled, .btn-ghost:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn:focus-visible, button:focus-visible, .sidebar-nav > a.nav-item:focus-visible,
.qc-tile:focus-visible, .qc-action-chip:focus-visible {
    outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }

/* --- Controles de formulario: base consistente donde no hay estilo propio --- */
:where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]), select, textarea) {
    padding: 9px 12px; background: var(--bg-input); border: 1px solid var(--border);
    border-radius: var(--radius, 8px); color: var(--text); font: inherit; font-size: 13.5px;
    outline: none; transition: border-color .18s, box-shadow .18s; }
:where(input, select, textarea)::placeholder { color: var(--text-muted); }
:where(input, select, textarea):hover { border-color: var(--border-strong); }
/* Foco terracota (también pisa los focos azules previos) */
input:focus, select:focus, textarea:focus,
.search-box input[type="text"]:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
/* Select nativo → flecha custom cálida */
:where(select) { appearance: none; -webkit-appearance: none; padding-right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8780' stroke-width='2.4' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 11px center; }
/* Ícono nativo de date-picker + flechas de number: coherentes con el tema activo (QUA-272) */
[data-theme="dark"] input[type="date"], [data-theme="dark"] input[type="number"] { color-scheme: dark; }
[data-theme="light"] input[type="date"], [data-theme="light"] input[type="number"] { color-scheme: light; }
/* dd/mm/aaaa: la UA pinta los segmentos con su gris fijo, ignorando el color heredado (QUA-277) */
input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-year-field { color: var(--text); }
input[type="date"]::-webkit-calendar-picker-indicator { opacity: .7; cursor: pointer; transition: opacity .15s; }
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* --- Scrollbar global tema-aware: fallback para contenedores sin regla scoped (QUA-270) --- */
html { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* --- Checkbox/radio nativos: accent-color tema-aware (QUA-270) --- */
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

/* --- Autofill de Chrome: override del fondo amarillo nativo (QUA-270) --- */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text);
    -webkit-box-shadow: 0 0 0px 1000px var(--bg-input) inset;
    transition: background-color 9999s ease-in-out 0s; }

/* --- Cards / KPI: sombra cálida en hover (en vez de negro frío) --- */
.card:hover { box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--accent) 28%, rgba(44,43,40,.18));
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.kpi:hover { box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--accent) 26%, rgba(44,43,40,.16));
    border-color: color-mix(in srgb, var(--accent) 32%, var(--border)); }
.cs-card { transition: border-color .2s, box-shadow .2s; }
.cs-card:hover { box-shadow: 0 6px 20px -12px rgba(44,43,40,.16); }

/* --- Sidebar: separación más definida --- */
aside.sidebar { box-shadow: 1px 0 0 var(--border-light); }

/* ============================================================
   TIER 2 — Toasts + diálogos (reemplazo de alert/confirm/prompt nativos)
   ============================================================ */
.btn-danger { background: var(--accent-red); color: #fff; border: 1px solid var(--accent-red); }
.btn-danger:hover { filter: brightness(.94); transform: translateY(-1px); }

.qc-toasts { position: fixed; top: 18px; right: 18px; z-index: 9999; display: flex; flex-direction: column;
    gap: 10px; width: 340px; max-width: calc(100vw - 36px); }
.qc-toast { display: flex; align-items: flex-start; gap: 10px; background: var(--bg-card);
    border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; box-shadow: var(--shadow-lg);
    font-size: 13.5px; color: var(--text); animation: qcToastIn .25s cubic-bezier(.2,.8,.2,1);
    transition: opacity .2s, transform .2s; }
.qc-toast-ico { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.qc-toast.ok .qc-toast-ico { color: var(--accent-green); }
.qc-toast.info .qc-toast-ico { color: var(--accent); }
.qc-toast.err { border-color: color-mix(in srgb, var(--accent-red) 40%, var(--border)); }
.qc-toast.err .qc-toast-ico { color: var(--accent-red); }
.qc-toast-msg { flex: 1; line-height: 1.45; word-break: break-word; }
.qc-toast-x { background: none; border: 0; color: var(--text-muted); cursor: pointer; font-size: 17px;
    line-height: 1; padding: 0 2px; }
.qc-toast-x:hover { color: var(--text); }
@keyframes qcToastIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

.qc-dlg-backdrop { position: fixed; inset: 0; background: var(--bg-overlay); z-index: 9998;
    /* flex, no grid: con "grid; place-items:center" el track se auto-dimensiona al contenido
       y max-width:100% de .qc-dlg no tiene contra qué resolver -> se corta en mobile (QUA-195). */
    display: flex; align-items: center; justify-content: center; padding: 16px; animation: qcFadeIn .15s ease; }
.qc-dlg { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
    box-shadow: var(--shadow-lg); width: 420px; max-width: 100%; padding: 22px;
    animation: qcDlgIn .2s cubic-bezier(.2,.8,.2,1); }
.qc-dlg h4 { font-family: var(--font-serif); font-size: 18px; font-weight: 600; margin: 0 0 8px; color: var(--text); }
.qc-dlg p { color: var(--text-secondary); font-size: 13.5px; line-height: 1.5; margin: 0 0 16px; white-space: pre-line; }
.qc-dlg input { width: 100%; margin-bottom: 16px; }
.qc-dlg-actions { display: flex; gap: 8px; justify-content: flex-end; }
@keyframes qcDlgIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes qcFadeIn { from { opacity: 0; } to { opacity: 1; } }



/* ===== HOME PERSONAL (Inicio) — info del usuario, sin cifras de dinero ===== */
.qc-home { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 18px; }
.qc-home-card { display: flex; flex-direction: column; gap: 10px; }
.qc-home-name { font-family: var(--font-serif); font-size: 22px; font-weight: 600; color: var(--text); line-height: 1.1; }
.qc-home-rows { display: flex; flex-direction: column; gap: 7px; margin-top: 2px; }
.qc-home-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.qc-home-row > span:first-child { color: var(--text-muted); }
.qc-home-row > span:last-child { color: var(--text); font-weight: 500; text-align: right; word-break: break-word; }
.qc-home-big { font-family: var(--font-serif); font-size: 42px; font-weight: 600; color: var(--text); line-height: 1; }
.qc-home-big small { font-family: inherit; font-size: 14px; color: var(--text-muted); font-weight: 400; }
.qc-home-sub { font-size: 13px; color: var(--text-muted); }
.qc-home-actions { grid-column: 1 / -1; }
.qc-home-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.qc-home-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); font: inherit; font-size: 13px; color: var(--text); cursor: pointer; transition: transform .12s, border-color .12s; }
.qc-home-chip:hover { border-color: var(--accent); transform: translateY(-1px); }

/* ===== Onboarding / Inicio rediseñado (v2.47) ===== */
.qc-hub-role { color: var(--text-muted); font-size: 13px; font-weight: 500; margin-left: 2px; }

.qc-welcome { display: flex; align-items: center; gap: 16px; justify-content: space-between;
    background: color-mix(in oklch, var(--accent) 6%, var(--bg-card));
    border: 1px solid color-mix(in oklch, var(--accent) 25%, var(--border));
    border-radius: 12px; padding: 14px 18px; margin-top: 14px; }
.qc-welcome-title { font-family: var(--font-serif); font-size: 17px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.qc-welcome-sub { font-size: 13.5px; color: var(--text-secondary); line-height: 1.5; max-width: 80ch; }
.qc-welcome-x { flex-shrink: 0; align-self: flex-start; padding: 7px 15px; border-radius: 9px;
    border: 1px solid var(--border-strong); background: none; color: var(--text-secondary); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.qc-welcome-x:hover { border-color: var(--accent); color: var(--accent); }

.qc-home-block { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.qc-home-h { font-family: var(--font-serif); font-size: 18px; font-weight: 600; color: var(--text); }
.qc-home-h-sm { font-size: 14px; color: var(--text-secondary); }

.qc-startrow { display: grid; grid-template-columns: 260px 1fr; gap: 14px; align-items: stretch; }
.qc-taskcard { display: flex; flex-direction: column; gap: 4px; text-align: left; background: var(--bg-card);
    border: 1px solid var(--border); border-radius: 14px; padding: 18px 18px 16px; cursor: pointer;
    transition: transform .12s, box-shadow .12s, border-color .12s; font: inherit; color: inherit; }
.qc-taskcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--accent); }
.qc-taskcard-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); font-weight: 600; }
.qc-taskcard-big { font-family: var(--font-serif); font-size: 38px; font-weight: 600; color: var(--text); line-height: 1.05; }
.qc-taskcard-big small { font-family: var(--font-sans, inherit); font-size: 14px; color: var(--text-muted); font-weight: 400; }
.qc-taskcard-sub { font-size: 13px; color: var(--text-muted); }
.qc-taskcard-go { margin-top: auto; padding-top: 10px; font-size: 12px; color: var(--accent); font-weight: 600; }

.qc-primary { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.qc-pcard { display: flex; align-items: center; gap: 12px; text-align: left; background: var(--bg-card);
    border: 1px solid var(--border); border-radius: 14px; padding: 15px 16px; cursor: pointer;
    transition: transform .12s, box-shadow .12s, border-color .12s; font: inherit; color: inherit; }
.qc-pcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--accent); }
.qc-pcard-ic { flex-shrink: 0; width: 42px; height: 42px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent-soft); color: var(--accent); }
.qc-pcard-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.qc-pcard-label { font-size: 14.5px; font-weight: 600; color: var(--text); }
.qc-pcard-desc { font-size: 12px; color: var(--text-muted); line-height: 1.35; }
.qc-pcard-go { flex-shrink: 0; color: var(--text-muted); display: inline-flex; }
.qc-pcard:hover .qc-pcard-go { color: var(--accent); }

.qc-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.qc-toolgrp { display: flex; flex-direction: column; gap: 6px; }
.qc-toolgrp-h { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); font-weight: 700; padding: 2px 2px 4px; }
.qc-tool { display: flex; align-items: center; gap: 11px; text-align: left; background: var(--bg-card);
    border: 1px solid var(--border); border-radius: 11px; padding: 11px 13px; cursor: pointer;
    transition: border-color .12s, background .12s; font: inherit; color: inherit; }
.qc-tool:hover { border-color: var(--accent); background: var(--bg-card-hover); }
.qc-tool-ic { flex-shrink: 0; color: var(--text-secondary); display: inline-flex; }
.qc-tool:hover .qc-tool-ic { color: var(--accent); }
.qc-tool-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.qc-tool-label { font-size: 13.5px; font-weight: 600; color: var(--text); }
.qc-tool-desc { font-size: 11.5px; color: var(--text-muted); line-height: 1.35; }

.qc-acct-block { margin-top: 24px; }
.qc-acct { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; max-width: 460px; }
.qc-acct-rows { display: flex; flex-direction: column; gap: 7px; }
.qc-acct-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.qc-acct-row > span:first-child { color: var(--text-muted); }
.qc-acct-row > span:last-child { color: var(--text); font-weight: 500; text-align: right; word-break: break-word; }
.qc-acct-warn { color: var(--accent) !important; font-weight: 700; }
.qc-acct-link { display: inline-block; margin-top: 11px; font-size: 12.5px; color: var(--accent); font-weight: 600; text-decoration: none; }
.qc-acct-link:hover { text-decoration: underline; }

@media (max-width: 720px) {
    .qc-startrow { grid-template-columns: 1fr; }
    .qc-welcome { flex-direction: column; align-items: flex-start; gap: 10px; }
    .qc-welcome-x { align-self: stretch; text-align: center; }
}

/* v2.47: el header de scraping (última actualización) es ruido/confuso para
   vendedor y técnico (lo marcó la auditoría de onboarding).
   admin/compras/gerente lo siguen viendo. */
body[data-role="vendedor"] .topbar-stat, body[data-role="tecnico"] .topbar-stat { display: none !important; }

/* ===== Inicio v3 — bold · minimal · progressive disclosure (UI lo mejor) ===== */
.qc-hub2 { display: flex; flex-direction: column; gap: 30px; max-width: 1180px; padding-top: 6px; }

.qc-hero2 { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    padding-bottom: 22px; border-bottom: 1px solid var(--border-light); }
.qc-hero2-hi { font-family: var(--font-serif); font-size: 34px; font-weight: 600; letter-spacing: -.02em; color: var(--text); line-height: 1.05; }
.qc-hero2-focus { display: inline-flex; align-items: center; gap: 7px; margin-top: 11px; padding: 0; background: none; border: none;
    font: inherit; font-size: 15px; color: var(--text-secondary); cursor: pointer; transition: color .12s; }
.qc-hero2-focus strong { color: var(--text); font-weight: 700; }
.qc-hero2-focus:hover { color: var(--accent); }
.qc-hero2-focus.is-urgent strong { color: var(--accent); }
.qc-hero2-focus.is-ok { color: var(--accent-green); }
.qc-hero2-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.qc-hero2-role { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); font-weight: 600; }
.qc-hero2-date { font-size: 13px; color: var(--text-muted); text-transform: capitalize; }

.qc-sec2 { display: flex; flex-direction: column; gap: 13px; }
.qc-sec2-h { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); font-weight: 700; }

.qc-actions2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.qc-act2 { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; text-align: left;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 20px;
    cursor: pointer; font: inherit; color: inherit; transition: transform .14s, box-shadow .14s, border-color .14s; }
.qc-act2:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
.qc-act2-ic { width: 46px; height: 46px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent); color: #fff; }
.qc-act2-label { font-size: 16px; font-weight: 650; color: var(--text); }
.qc-act2-desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.4; }

.qc-tools2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 10px; }
.qc-tool2 { position: relative; display: flex; align-items: center; gap: 9px; text-align: left;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 13px 14px;
    cursor: pointer; font: inherit; color: inherit; transition: border-color .12s, transform .12s; }
.qc-tool2:hover { border-color: var(--accent); transform: translateY(-1px); }
.qc-tool2-ic { flex-shrink: 0; color: var(--text-secondary); display: inline-flex; }
.qc-tool2:hover .qc-tool2-ic { color: var(--accent); }
.qc-tool2-label { font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qc-tool2-tip { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%) translateY(4px);
    width: max-content; max-width: 230px; padding: 8px 11px; border-radius: 9px;
    background: var(--text); color: var(--bg); font-size: 12px; line-height: 1.4; font-weight: 400;
    box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity .14s, transform .14s; z-index: 30; }
.qc-tool2:hover .qc-tool2-tip { opacity: 1; transform: translateX(-50%) translateY(0); }

.qc-acct2 { margin-top: 2px; }
.qc-acct2-sum { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; list-style: none;
    font-size: 13px; color: var(--text-secondary); font-weight: 600; padding: 8px 0; user-select: none; }
.qc-acct2-sum::-webkit-details-marker { display: none; }
.qc-acct2-sum::before { content: "\203A"; display: inline-block; transition: transform .15s; font-size: 17px; color: var(--text-muted); line-height: 1; }
.qc-acct2[open] .qc-acct2-sum::before { transform: rotate(90deg); }
.qc-acct2-body { margin-top: 10px; }
.qc-acct2-body .qc-acct-rows { max-width: 460px; }

@media (max-width: 720px) {
    .qc-hero2 { align-items: flex-start; }
    .qc-hero2-hi { font-size: 28px; }
    .qc-hero2-meta { align-items: flex-start; }
    .qc-tool2-tip { display: none; }
}

/* ============================================================
   Testeo ST — lista agrupada/ordenable + detalle seccionado
   ============================================================ */
/* fila de encabezado de grupo en la lista */
.st-table tr.st-group td {
    background: var(--bg-elev, rgba(255,255,255,.03));
    font-weight: 600; letter-spacing: .02em;
    padding: 8px 12px; border-top: 1px solid var(--border);
}
.st-table tr.st-group .st-group-n {
    margin-left: 8px; color: var(--text-muted); font-weight: 500; font-size: 12px;
}
/* indicador de orden en los headers clickeables */
.st-table thead th[data-sort] { user-select: none; white-space: nowrap; }
.st-table thead th[data-sorted]::after { content: " ▲"; font-size: 10px; color: var(--accent, #c87f4a); }
.st-table thead th[data-sorted="desc"]::after { content: " ▼"; }

/* detalle: grid de secciones de pares clave/valor */
.st-secs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 14px; }
.st-sec { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.st-sec-h {
    padding: 8px 12px; font-size: 12px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; color: var(--text-muted);
    background: var(--bg-elev, rgba(255,255,255,.03)); border-bottom: 1px solid var(--border);
}
.st-sec-body { padding: 10px 12px; }
.st-kvs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
.st-kv { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; min-width: 0; }
.st-kv-k { color: var(--text-muted); white-space: nowrap; }
.st-kv-v { color: var(--text); text-align: right; overflow: hidden; text-overflow: ellipsis; }
.st-histo { margin-top: 4px; }
.st-histo th, .st-histo td { font-size: 12px; }
@media (max-width: 720px) {
    .st-secs { grid-template-columns: 1fr; }
    .st-kvs { grid-template-columns: 1fr; }
}

/* pestañas (dimensión de agrupado) */
.st-tabs { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.st-tab {
    padding: 8px 16px; background: none; border: none; border-bottom: 2px solid transparent;
    color: var(--text-muted); cursor: pointer; font-size: 13px; font-weight: 500;
}
.st-tab:hover { color: var(--text); }
.st-tab.active { color: var(--accent, #c87f4a); border-bottom-color: var(--accent, #c87f4a); font-weight: 600; }
/* barra de filtros */
.st-filters { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; }
.st-filters .input { min-width: 120px; }
.st-filters #st-desde, .st-filters #st-hasta { min-width: 140px; }
#st-clear {
    padding: 8px 14px; background: none; border: 1px solid var(--border); border-radius: 8px;
    color: var(--text-muted); cursor: pointer; font-size: 13px;
}
#st-clear:hover { color: var(--text); border-color: var(--text-muted); }
/* fabricante con el mismo protagonismo que el modelo; SN monoespaciado (UID atenuado) */
.st-fab { font-weight: 600; }
.st-detail-title .st-fab, #st-detail-title .st-fab { color: var(--accent, #c87f4a); }
.st-sn { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; }
.st-sn-uid { color: var(--text-muted); }

/* barra de búsqueda + toggle de vista */
.st-toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.st-search-box {
    flex: 1; min-width: 240px; display: flex; align-items: center; gap: 8px;
    padding: 0 12px; height: 42px; border: 1px solid var(--border); border-radius: 10px;
    background: var(--bg-elev, rgba(255,255,255,.03)); transition: border-color .12s, box-shadow .12s;
}
.st-search-box:focus-within { border-color: var(--accent, #c87f4a); box-shadow: 0 0 0 3px rgba(200,127,74,.15); }
.st-search-ic { color: var(--text-muted); flex-shrink: 0; }
.st-search-input { flex: 1; background: none; border: none; outline: none; color: var(--text); font-size: 14px; }
.st-search-input::placeholder { color: var(--text-muted); }
.st-view-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.st-view-toggle button {
    padding: 9px 16px; background: none; border: none; cursor: pointer;
    color: var(--text-muted); font-size: 13px; font-weight: 500;
}
.st-view-toggle button:hover { color: var(--text); }
.st-view-toggle button.active { background: var(--accent, #c87f4a); color: #fff; }
.st-count { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }

/* cards */
.st-cards { display: flex; flex-direction: column; gap: 24px; }
.st-gcard-h {
    display: flex; align-items: center; gap: 10px; margin-bottom: 13px;
    padding-bottom: 9px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 14px;
}
.st-gc-label { font-weight: 600; }
.st-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(282px, 1fr)); gap: 14px; }

.st-card {
    position: relative; border: 1px solid var(--border); border-radius: 14px;
    padding: 16px 16px 14px; cursor: pointer; background: var(--bg-elev, rgba(255,255,255,.025));
    overflow: hidden; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.st-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--border); }
.st-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.22); border-color: var(--text-muted); }
.st-card-ok::before   { background: var(--accent-green); }
.st-card-warn::before { background: var(--accent-yellow); }
.st-card-bad::before  { background: var(--accent-red); }

.st-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.st-card-titles { min-width: 0; }
.st-card-fab { font-weight: 700; font-size: 15px; letter-spacing: .01em; color: var(--text); line-height: 1.15; }
.st-card-model { margin-top: 3px; font-size: 13px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-card-badge { flex-shrink: 0; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; border: 1px solid currentColor; }

.st-card-body { display: flex; align-items: center; gap: 16px; margin: 14px 0 12px; }
.st-ring-wrap { display: flex; flex-direction: column; align-items: center; gap: 3px; flex-shrink: 0; }
.st-ring { width: 58px; height: 58px; transform: rotate(-90deg); }
.st-ring-bg { fill: none; stroke: var(--border); stroke-width: 3; }
.st-ring-fg { fill: none; stroke-width: 3; stroke-linecap: round; transition: stroke-dasharray .4s ease; }
.st-ring-ok   .st-ring-fg { stroke: var(--accent-green); }
.st-ring-warn .st-ring-fg { stroke: var(--accent-yellow); }
.st-ring-bad  .st-ring-fg { stroke: var(--accent-red); }
.st-ring-na   .st-ring-fg { stroke: var(--border); }
.st-ring-t { transform: rotate(90deg); transform-origin: 18px 18px; fill: var(--text); font-size: 11px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.st-ring-cap { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }

.st-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 12px; min-width: 0; flex: 1; }
.st-stat { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text); }
.st-stat svg { color: var(--text-muted); flex-shrink: 0; }
.st-stat-empty { font-size: 12px; color: var(--text-muted); }

.st-card-sn { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 9px; }
.st-card-foot { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 11px; color: var(--text-muted); }
.st-card-foot .st-card-id { font-family: var(--font-mono, monospace); }
.st-card-fecha { display: inline-flex; align-items: center; gap: 4px; }
.st-foot-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--text-muted); opacity: .5; }

.st-card-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.st-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 2px 9px; border-radius: 999px; background: var(--bg, rgba(255,255,255,.04)); border: 1px solid var(--border); color: var(--text-muted); }
.st-chip svg { width: 11px; height: 11px; }
.st-chip-gar { color: var(--accent-green); border-color: var(--accent-green); }
.st-empty { text-align: center; color: var(--text-muted); padding: 48px 0; }
@media (max-width: 720px) {
    .st-cards-grid { grid-template-columns: 1fr; }
    .st-search-box { min-width: 100%; }
}

/* ============================================================
   "CENTRAL" SKIN — TANDA 3 (QUA-224/QUA-235): las 8 grillas de
   Analisis de Mercado + Pricing. Todas comparten el sistema de
   clases ap- / apu- / pricing- ([id^="page-analisis-"] en este mismo
   archivo) — un solo bloque de redeclaracion de custom properties
   cubre las 9 secciones (8 grillas + Pricing; Placas de Video tiene
   dos secciones: el switcher page-analisis-placas y el contenido
   page-analisis-placas-video). Mismo patron que Tanda 2a/2b: los
   componentes ya leen var(--bg-card)/var(--text)/etc., solo se
   apuntan a los tokens canonicos.
   ============================================================ */
#page-pricing[data-skin="central"],
#page-analisis-placas[data-skin="central"],
#page-analisis-mothers[data-skin="central"],
#page-analisis-fuentes[data-skin="central"],
#page-analisis-procesadores[data-skin="central"],
#page-analisis-rams[data-skin="central"],
#page-analisis-ssds[data-skin="central"],
#page-analisis-placas-video[data-skin="central"],
#page-analisis-marcas[data-skin="central"] {
    background: var(--bg);
    --bg-card:        var(--card);
    --bg-card-hover:  color-mix(in oklch, var(--card) 94%, var(--ink) 6%);
    --bg-sidebar:     color-mix(in oklch, var(--card) 92%, var(--ink) 8%);
    --bg-hover:       color-mix(in oklch, var(--card) 96%, var(--ink) 4%);
    --bg-input:       var(--card);
    --border:         var(--line);
    --border-light:   var(--line);
    --border-strong:  var(--line-2);
    --text:           var(--ink);
    --text-secondary: var(--ink-2);
    --text-muted:     var(--ink-3);
    --accent:         var(--go);
    --accent-hover:   var(--go-ink);
    --accent-soft:    var(--go-soft);
    --accent-green:   var(--go);
    --accent-red:     var(--bad);
    --ap-line-soft:   oklch(94.5% 0.005 330);
    --ap-row-odd:     var(--card);
    --ap-row-even:    color-mix(in oklch, var(--card) 97%, var(--ink) 3%);
    --shadow-sm: 0 1px 2px oklch(25% 0.02 330 / 0.05);
    --shadow:    0 1px 3px oklch(25% 0.02 330 / 0.07), 0 1px 2px oklch(25% 0.02 330 / 0.05);
    font-family: var(--sans);
}
/* gate(juez): banda de serie con IDENTIDAD Mercado (ambar, standards §1)
   en vez del gradiente verde->terracota hardcodeado del CSS legacy. Los
   !important son para ganarle al !important viejo de [id^="page-analisis-"]
   .ap-row-serie (linea ~6887), mismo criterio documentado que tanda 1b. */
#page-pricing[data-skin="central"] .ap-row-serie td,
#page-analisis-placas[data-skin="central"] .ap-row-serie td,
#page-analisis-mothers[data-skin="central"] .ap-row-serie td,
#page-analisis-fuentes[data-skin="central"] .ap-row-serie td,
#page-analisis-procesadores[data-skin="central"] .ap-row-serie td,
#page-analisis-rams[data-skin="central"] .ap-row-serie td,
#page-analisis-ssds[data-skin="central"] .ap-row-serie td,
#page-analisis-placas-video[data-skin="central"] .ap-row-serie td,
#page-analisis-marcas[data-skin="central"] .ap-row-serie td {
    background: var(--dom-mercado-soft) !important;
    color: var(--dom-mercado) !important;
}

html[data-theme="dark"] #page-pricing[data-skin="central"],
html[data-theme="dark"] #page-analisis-placas[data-skin="central"],
html[data-theme="dark"] #page-analisis-mothers[data-skin="central"],
html[data-theme="dark"] #page-analisis-fuentes[data-skin="central"],
html[data-theme="dark"] #page-analisis-procesadores[data-skin="central"],
html[data-theme="dark"] #page-analisis-rams[data-skin="central"],
html[data-theme="dark"] #page-analisis-ssds[data-skin="central"],
html[data-theme="dark"] #page-analisis-placas-video[data-skin="central"],
html[data-theme="dark"] #page-analisis-marcas[data-skin="central"] {
    --ap-line-soft: color-mix(in oklch, var(--card) 88%, var(--ink) 12%);
}

/* Identidad de dominio "Mercado" (standards §1, capa 3) — chip ambar
   sobre el eyebrow de cada grilla que tiene titulo propio. NO duplica
   el badge del topbar (QUA-231, Joaquin): ese vive en el marco global,
   este es el label inline de la propia pagina. Pricing no lleva
   eyebrow propio (toolbar directo) y queda fuera. */
[id^="page-analisis-"][data-skin="central"] .ap-eyebrow {
    color: var(--dom-mercado);
}

/* Spec de grillas del owner (standards-diseno-central.md §3.1):
   - linea vertical MUY suave entre celdas
   - celda sin precio: guion centrado, tinta terciaria, peso 400
   - precio Quantum: fondo suave berenjena
   - mejor precio de mercado: tinta verde (ya cubierto por --accent-green arriba) */
#page-pricing[data-skin="central"] .ap-table tbody td,
#page-analisis-placas[data-skin="central"] .ap-table tbody td,
#page-analisis-mothers[data-skin="central"] .ap-table tbody td,
#page-analisis-fuentes[data-skin="central"] .ap-table tbody td,
#page-analisis-procesadores[data-skin="central"] .ap-table tbody td,
#page-analisis-rams[data-skin="central"] .ap-table tbody td,
#page-analisis-ssds[data-skin="central"] .ap-table tbody td,
#page-analisis-placas-video[data-skin="central"] .ap-table tbody td,
#page-analisis-marcas[data-skin="central"] .ap-table tbody td {
    border-right-color: var(--ap-line-soft);
    border-bottom-color: var(--ap-line-soft);
}
#page-pricing[data-skin="central"] .ap-cell-dash,
#page-analisis-placas[data-skin="central"] .ap-cell-dash,
#page-analisis-mothers[data-skin="central"] .ap-cell-dash,
#page-analisis-fuentes[data-skin="central"] .ap-cell-dash,
#page-analisis-procesadores[data-skin="central"] .ap-cell-dash,
#page-analisis-rams[data-skin="central"] .ap-cell-dash,
#page-analisis-ssds[data-skin="central"] .ap-cell-dash,
#page-analisis-placas-video[data-skin="central"] .ap-cell-dash,
#page-analisis-marcas[data-skin="central"] .ap-cell-dash {
    text-align: center;
    color: var(--text-muted);
    font-weight: 400;
    opacity: 1;
}
#page-pricing[data-skin="central"] .ap-col-quantum,
#page-analisis-placas[data-skin="central"] .ap-col-quantum,
#page-analisis-mothers[data-skin="central"] .ap-col-quantum,
#page-analisis-fuentes[data-skin="central"] .ap-col-quantum,
#page-analisis-procesadores[data-skin="central"] .ap-col-quantum,
#page-analisis-rams[data-skin="central"] .ap-col-quantum,
#page-analisis-ssds[data-skin="central"] .ap-col-quantum,
#page-analisis-placas-video[data-skin="central"] .ap-col-quantum,
#page-analisis-marcas[data-skin="central"] .ap-col-quantum {
    background: var(--plum-pill);
}
#page-pricing[data-skin="central"] .ap-price-min,
#page-analisis-placas[data-skin="central"] .ap-price-min,
#page-analisis-mothers[data-skin="central"] .ap-price-min,
#page-analisis-fuentes[data-skin="central"] .ap-price-min,
#page-analisis-procesadores[data-skin="central"] .ap-price-min,
#page-analisis-rams[data-skin="central"] .ap-price-min,
#page-analisis-ssds[data-skin="central"] .ap-price-min,
#page-analisis-placas-video[data-skin="central"] .ap-price-min,
#page-analisis-marcas[data-skin="central"] .ap-price-min,
#page-pricing[data-skin="central"] .ap-cell-pos,
#page-analisis-placas[data-skin="central"] .ap-cell-pos,
#page-analisis-mothers[data-skin="central"] .ap-cell-pos,
#page-analisis-fuentes[data-skin="central"] .ap-cell-pos,
#page-analisis-procesadores[data-skin="central"] .ap-cell-pos,
#page-analisis-rams[data-skin="central"] .ap-cell-pos,
#page-analisis-ssds[data-skin="central"] .ap-cell-pos,
#page-analisis-placas-video[data-skin="central"] .ap-cell-pos,
#page-analisis-marcas[data-skin="central"] .ap-cell-pos {
    color: var(--go);
}
#page-pricing[data-skin="central"] .ap-price-max,
#page-analisis-placas[data-skin="central"] .ap-price-max,
#page-analisis-mothers[data-skin="central"] .ap-price-max,
#page-analisis-fuentes[data-skin="central"] .ap-price-max,
#page-analisis-procesadores[data-skin="central"] .ap-price-max,
#page-analisis-rams[data-skin="central"] .ap-price-max,
#page-analisis-ssds[data-skin="central"] .ap-price-max,
#page-analisis-placas-video[data-skin="central"] .ap-price-max,
#page-analisis-marcas[data-skin="central"] .ap-price-max,
#page-pricing[data-skin="central"] .ap-cell-neg,
#page-analisis-placas[data-skin="central"] .ap-cell-neg,
#page-analisis-mothers[data-skin="central"] .ap-cell-neg,
#page-analisis-fuentes[data-skin="central"] .ap-cell-neg,
#page-analisis-procesadores[data-skin="central"] .ap-cell-neg,
#page-analisis-rams[data-skin="central"] .ap-cell-neg,
#page-analisis-ssds[data-skin="central"] .ap-cell-neg,
#page-analisis-placas-video[data-skin="central"] .ap-cell-neg,
#page-analisis-marcas[data-skin="central"] .ap-cell-neg {
    color: var(--bad);
}

/* ============================================================
   "CENTRAL" SKIN — TANDA 7b (QUA-224): Mercado, Buscar, Comparador,
   Competidores, Alertas, Historial y Acceso Denegado. Cumple
   standards-diseno-central.md. Mismo patron de redeclaracion de
   custom properties que Tandas 1-6 (un solo bloque de tokens
   compartido + reglas puntuales de identidad de dominio).
   Identidad de dominio: Mercado / Inteligencia (--dom-mercado, ambar).
   La ACCION (verde, --go) sigue reservada a boton primario real
   (Buscar/Comparar/Actualizar): NUNCA se pisa aca.
   ============================================================ */
#page-mercado[data-skin="central"],
#page-buscar[data-skin="central"],
#page-comparador[data-skin="central"],
#page-competidores[data-skin="central"],
#page-alertas[data-skin="central"],
#page-historial[data-skin="central"],
#page-acceso-denegado[data-skin="central"] {
    background: var(--bg);
    --bg-card:        var(--card);
    --bg-card-hover:  color-mix(in oklch, var(--card) 94%, var(--ink) 6%);
    --bg-sidebar:     color-mix(in oklch, var(--card) 92%, var(--ink) 8%);
    --bg-hover:       color-mix(in oklch, var(--card) 96%, var(--ink) 4%);
    --bg-input:       var(--card);
    --border:         var(--line);
    --border-light:   var(--line);
    --border-strong:  var(--line-2);
    --text:           var(--ink);
    --text-secondary: var(--ink-2);
    --text-muted:     var(--ink-3);
    --accent:         var(--go);
    --accent-hover:   var(--go-ink);
    --accent-soft:    var(--go-soft);
    --accent-green:   var(--go);
    --accent-red:     var(--bad);
    --accent-yellow:  var(--warn);
    --mkt-line-soft:  oklch(94.5% 0.005 330);
    --shadow-sm: 0 1px 2px oklch(25% 0.02 330 / 0.05);
    --shadow:    0 1px 3px oklch(25% 0.02 330 / 0.07), 0 1px 2px oklch(25% 0.02 330 / 0.05);
    --font-serif: var(--sans);   /* gate (juez): 3ra vez que falta este remap en una tanda — titulos caian a serif (Manrope unica, §2) */
    font-family: var(--sans);
}
html[data-theme="dark"] #page-mercado[data-skin="central"],
html[data-theme="dark"] #page-buscar[data-skin="central"],
html[data-theme="dark"] #page-comparador[data-skin="central"],
html[data-theme="dark"] #page-competidores[data-skin="central"],
html[data-theme="dark"] #page-alertas[data-skin="central"],
html[data-theme="dark"] #page-historial[data-skin="central"],
html[data-theme="dark"] #page-acceso-denegado[data-skin="central"] {
    --mkt-line-soft: color-mix(in oklch, var(--card) 88%, var(--ink) 12%);
}

/* Pills de switcher/filtro (Placas-Fuentes, Quantum/Todos/RTX...): identidad
   de dominio Mercado en la seleccion, mismo criterio que .compras-tab.active
   (--dom-oper) y .qb-chip.active (--dom-crm) de tandas previas — no es el
   boton primario real, asi que no lleva verde de ACCION. */
#page-mercado[data-skin="central"] .pill.active {
    background: var(--dom-mercado-soft);
    color: var(--dom-mercado);
    border-color: var(--dom-mercado-soft);
}
/* Encabezados de generacion en la tabla de Mercado ("RTX 30", "Otros
   modelos"): identidad de dominio, no accion. */
#page-mercado[data-skin="central"] .section-title {
    color: var(--dom-mercado);
}
/* Indicador "modelo propio de Quantum" (punto + borde de fila + chip de
   "propio" en el detalle expandido): identidad de MARCO (--plum), no de
   dominio — reemplaza el cyan/violeta hardcodeado legacy (--accent-cyan/
   --accent-purple no forman parte del set de tokens Central). */
#page-mercado[data-skin="central"] .q-dot {
    background: var(--plum-deep);
}
#page-mercado[data-skin="central"] .quantum-row td:first-child {
    border-left-color: var(--plum-deep);
}
#page-mercado[data-skin="central"] .detail-item.own-store {
    border-color: var(--plum-deep);
    background: var(--plum-pill);
}
#page-mercado[data-skin="central"] .detail-item.own-store .comp-name {
    color: var(--plum-deep);
}

/* Spec de grillas (standards-diseno-central.md §3.1): linea vertical MUY
   suave entre celdas, numeros tabular-nums alineados a la derecha, celda
   sin dato = guion centrado tinta terciaria (reusa .ap-cell-dash, mismo
   convenio ya instalado en Tanda 3 para las grillas de Analisis/Pricing). */
#page-mercado[data-skin="central"] .data-table td,
#page-historial[data-skin="central"] .data-table td,
#page-competidores[data-skin="central"] .qc-table td {
    border-right: 1px solid var(--mkt-line-soft);
    border-bottom-color: var(--mkt-line-soft);
}
#page-mercado[data-skin="central"] .data-table td:last-child,
#page-historial[data-skin="central"] .data-table td:last-child,
#page-competidores[data-skin="central"] .qc-table td:last-child {
    border-right: none;
}
#page-mercado[data-skin="central"] .data-table .num,
#page-historial[data-skin="central"] .data-table .num,
#page-competidores[data-skin="central"] .qc-table .num {
    text-align: right;
}
#page-mercado[data-skin="central"] .data-table .num.ap-cell-dash,
#page-historial[data-skin="central"] .data-table .num.ap-cell-dash,
#page-competidores[data-skin="central"] .qc-table .ap-cell-dash {
    text-align: center;
    color: var(--text-muted);
    font-weight: 400;
    opacity: 1;
}

/* Acceso Denegado: tarjeta centrada. Icono con SVG stroke inline (cero
   emojis, standards §1) en vez del glifo unicode legacy; tinta de ESTADO
   (denegado = --bad), no de dominio (esta pagina no pertenece a ningun
   dominio en particular). */
#page-acceso-denegado[data-skin="central"].active {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}
#page-acceso-denegado[data-skin="central"] .acc-deny-card {
    max-width: 420px;
    width: 100%;
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r, 10px);
    padding: 32px 28px;
    box-shadow: var(--shadow);
}
#page-acceso-denegado[data-skin="central"] .acc-deny-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--bad-soft);
    color: var(--bad);
}
#page-acceso-denegado[data-skin="central"] .acc-deny-title {
    font-size: var(--t-xl, 1.2rem);
    font-weight: 700;
    color: var(--text);
    margin: 0 0 8px;
}
#page-acceso-denegado[data-skin="central"] .acc-deny-msg,
#page-acceso-denegado[data-skin="central"] .acc-deny-allowed {
    font-size: var(--t-s, 0.875rem);
    color: var(--text-secondary);
    margin: 0 0 6px;
}
#page-acceso-denegado[data-skin="central"] .acc-deny-back {
    margin-top: 16px;
    min-height: var(--tap, 48px);
    padding: 0 20px;
}
/* Boton de "Volver al inicio": pre-existente .ap-btn-primary quedaba fuera
   de su scope original (gate T6, mismo criterio ya documentado arriba para
   Salud Scraping/Errores/Analisis del Ciclo) y renderizaba como boton
   nativo del browser. Se suma esta pagina a la lista de scope. */
#page-acceso-denegado .ap-btn-primary {
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--text-inverse);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 150ms, box-shadow 150ms;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.02em;
}
#page-acceso-denegado .ap-btn-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    box-shadow: 0 2px 8px var(--accent-soft);
}

/* ============================================================
   "CENTRAL" SKIN — TANDA FINAL (QUA-224): overlays globales
   (QUA-232), transversales a cualquier pantalla (viven fuera de
   cualquier section.page): menu mobile full-screen, modal de
   Ajustes, dialogo de WhatsApp (Gladys, QUA-195) y banner de
   notificaciones push. Cierra la epica de migracion Central.
   ============================================================ */

/* --- Menu mobile full-screen (#mob-menu) -------------------- */
#mob-menu[data-skin="central"] {
    --bg-card:        var(--card);
    --bg-card-hover:  color-mix(in oklch, var(--card) 94%, var(--ink) 6%);
    --bg-hover:       color-mix(in oklch, var(--card) 96%, var(--ink) 4%);
    --bg-input:       var(--card);
    --border:         var(--line);
    --border-light:   var(--line);
    --border-strong:  var(--line-2);
    --text:           var(--ink);
    --text-secondary: var(--ink-2);
    --text-muted:     var(--ink-3);
    --accent:         var(--go);
    --accent-hover:   var(--go-ink);
    --accent-soft:    var(--go-soft);
    --accent-green:   var(--go);
    --accent-red:     var(--bad);
    --shadow-sm: 0 1px 2px oklch(25% 0.02 330 / 0.05);
    --shadow:    0 1px 3px oklch(25% 0.02 330 / 0.07), 0 1px 2px oklch(25% 0.02 330 / 0.05);
    --font-serif: var(--sans);   /* checklist standards §3.3: sin este remap el titulo cae a serif legacy */
    font-family: var(--sans);
}
/* Estados legacy en rgba(255,255,255,X) fijo: en tema claro quedan
   invisibles/rotos (blanco sobre blanco) — se reemplazan por superficies
   solidas de la escala Central, sin transparencia decorativa nueva. */
#mob-menu[data-skin="central"] .mob-menu-close {
    background: var(--bg-card-hover);
}
#mob-menu[data-skin="central"] .mob-menu-close:active {
    background: var(--border);
    color: var(--text);
}
#mob-menu[data-skin="central"] .mob-menu-item:active {
    background: var(--bg-card-hover);
}
#mob-menu[data-skin="central"] .mob-menu-icon {
    background: var(--bg-card-hover);
}
#mob-menu[data-skin="central"] .mob-menu-item:active .mob-menu-icon {
    background: var(--border);
}
#mob-menu[data-skin="central"] .mob-menu-item:active .mob-menu-icon svg {
    color: var(--text);
}
#mob-menu[data-skin="central"] .mob-menu-footer {
    border-top-color: var(--border);
}

/* --- Modal de Ajustes (#qc-settings-overlay) ---------------- */
/* Nota Tanda 0 (central-tokens.css): los tokens Central no viven en :root,
   asi que no colisionan con --bg/--ink legacy de glass.css. Este bloque
   reemplaza el glassmorphism decorativo (backdrop-filter:blur + rgba)
   de glass.css:2124-2264 por superficies solidas de la escala Central —
   standards-diseno-central.md §3 prohibe glassmorphism nuevo. */
.qc-settings-overlay[data-skin="central"] {
    --bg-card:        var(--card);
    --bg-card-hover:  color-mix(in oklch, var(--card) 94%, var(--ink) 6%);
    --border:         var(--line);
    --border-strong:  var(--line-2);
    --text:           var(--ink);
    --text-secondary: var(--ink-2);
    --text-muted:     var(--ink-3);
    --accent:         var(--go);
    --font-serif: var(--sans);
    font-family: var(--sans);
    background: color-mix(in oklch, var(--ink) 45%, transparent);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.qc-settings-overlay[data-skin="central"] .qc-settings-modal {
    background: var(--bg-card);
    border: 1px solid var(--border);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: var(--shadow-lg);
    color: var(--text);
}
.qc-settings-overlay[data-skin="central"] .qc-settings-modal h2 {
    color: var(--text);
}
.qc-settings-overlay[data-skin="central"] .qc-settings-sub,
.qc-settings-overlay[data-skin="central"] .qc-settings-section-title,
.qc-settings-overlay[data-skin="central"] .qc-toggle-desc {
    color: var(--text-muted);
}
.qc-settings-overlay[data-skin="central"] .qc-settings-close {
    background: var(--bg-card-hover);
    color: var(--text);
}
.qc-settings-overlay[data-skin="central"] .qc-settings-close:hover {
    background: var(--border-strong);
}
.qc-settings-overlay[data-skin="central"] .qc-settings-section {
    background: var(--bg-card-hover);
    border: 1px solid var(--border);
}
.qc-settings-overlay[data-skin="central"] .qc-toggle-row {
    border-top-color: var(--border);
}
.qc-settings-overlay[data-skin="central"] .qc-toggle-row:hover {
    background: color-mix(in oklch, var(--card) 96%, var(--ink) 4%);
}
.qc-settings-overlay[data-skin="central"] .qc-toggle-label {
    color: var(--text);
}
.qc-settings-overlay[data-skin="central"] .qc-switch-track {
    background: var(--border-strong);
}
.qc-settings-overlay[data-skin="central"] .qc-switch-track::before {
    background: oklch(98% 0.004 330);   /* neutro tintado, no #fff puro (standards §3) */
}
.qc-settings-overlay[data-skin="central"] .qc-switch input:checked + .qc-switch-track {
    background: var(--accent);
}

/* --- Dialogo de WhatsApp (Gladys, QUA-195) -------------------
   Componente TIER 2 compartido (.qc-dlg-backdrop/.qc-dlg, tambien usado
   por confirmDialog/promptDialog): se migra SOLO cuando el backdrop trae
   data-skin="central" (lo agrega _openWhatsappModal en app.js), para no
   pisar los demas usos todavia no migrados. Las reglas .qc-wa-* (definidas
   en _waCss(), app.js) heredan estas custom properties por cascada normal
   al ser descendientes de .qc-dlg. */
.qc-dlg-backdrop[data-skin="central"] .qc-dlg {
    --text:           var(--ink);
    --text-secondary: var(--ink-2);
    --text-muted:     var(--ink-3);
    --accent:         var(--go);
    --accent-hover:   var(--go-ink);
    --accent-red:     var(--bad);
    --accent-green:   var(--go);
    --font-serif: var(--sans);
    font-family: var(--sans);
    background: var(--card);
    border-color: var(--line);
    color: var(--ink);
}

/* --- Banner de notificaciones push bloqueadas (#push-banner) --
   Reglas base .push-banner* viven inline en app.js (_NOTIF._css /
   modulo de push); este bloque solo remapea tokens + tipografia
   cuando el contenedor trae data-skin="central". */
#push-banner[data-skin="central"] {
    --bg-card:    var(--card);
    --border:     var(--line);
    --text:       var(--ink);
    --text-muted: var(--ink-3);
    --accent:     var(--go);
    --font-serif: var(--sans);
    font-family: var(--sans);
}
#push-banner[data-skin="central"] .push-banner__btn {
    color: var(--text-inverse);
}
#push-banner[data-skin="central"] .push-banner__ico svg {
    display: block;
}

/* ============================================================
   "CENTRAL" SKIN — Contenido & Growth (QUA-257 F3 / QUA-264).
   Cumple standards-diseno-central.md. Páginas nuevas construidas
   directo con .qc-page (crm.css), mismo bloque de redeclaración de
   tokens que el resto de páginas sueltas (Tanda 7a). Identidad de
   dominio VIOLETA (--dom-contenido) en chips/badges propios, no en
   la superficie (regla de tres capas, standards §1).
   ============================================================ */
#page-contenido-resumen[data-skin="central"],
#page-contenido-angulos[data-skin="central"],
#page-contenido-carlos[data-skin="central"],
#page-contenido-solicitudes[data-skin="central"],
#page-contenido-backlog[data-skin="central"],
#page-contenido-calendario[data-skin="central"],
#page-contenido-briefs[data-skin="central"],
#page-contenido-metricas[data-skin="central"],
#page-contenido-analisis[data-skin="central"],
#page-contenido-rentabilidad[data-skin="central"],
#page-contenido-trials[data-skin="central"],
#page-contenido-fechas[data-skin="central"],
#page-contenido-trends[data-skin="central"],
#page-contenido-costos[data-skin="central"] {
    background: var(--bg);
    --bg-card:        var(--card);
    --bg-card-hover:  color-mix(in oklch, var(--card) 94%, var(--ink) 6%);
    --bg-input:       var(--card);
    --border:         var(--line);
    --border-light:   var(--line);
    --border-strong:  var(--line-2);
    --text:           var(--ink);
    --text-secondary: var(--ink-2);
    --text-muted:     var(--ink-3);
    --accent:         var(--go);
    --accent-hover:   var(--go-ink);
    --accent-soft:    var(--go-soft);
    --accent-red:     var(--bad);
    --accent-yellow:  var(--warn);
    --shadow-sm: 0 1px 2px oklch(25% 0.02 330 / 0.05);
    --shadow:    0 1px 3px oklch(25% 0.02 330 / 0.07), 0 1px 2px oklch(25% 0.02 330 / 0.05);
    --font-serif: var(--sans);
    font-family: var(--sans);
}
/* Chip de identidad de dominio (violeta) en el header de las 5 páginas y en
   los estados del workflow de Solicitudes: tinta/fondo del dominio, nunca la
   superficie (regla de tres capas §1). */
.qc-chip--contenido {
    color: var(--dom-contenido);
    background: var(--dom-contenido-soft);
    border-color: transparent;
}
/* A11Y (QUA-279): filtros de Solicitudes/Backlog y filas de la tabla de
   Solicitudes son operables por teclado (role="button" + tabindex en el JS);
   acá solo el foco visible, acción (verde) igual que el resto de controles. */
#page-contenido-solicitudes .qc-chip:focus-visible,
#page-contenido-backlog .qc-chip:focus-visible,
#page-contenido-solicitudes tr[data-id]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}
/* Badges de estado del workflow de Solicitudes (semántica de ESTADO, aparte
   de la identidad de dominio violeta -- ver §1 nota "nunca usar el color de
   un dominio para significar estado"): grises/verde/ambar/rojo por etapa. */
.qc-status-pendiente    { color: var(--text-secondary); background: var(--bg-card-hover); }
.qc-status-en_revision  { color: var(--accent-yellow); background: color-mix(in oklch, var(--accent-yellow) 15%, transparent); }
.qc-status-cambios      { color: var(--accent-yellow); background: color-mix(in oklch, var(--accent-yellow) 15%, transparent); }
.qc-status-aprobada     { color: var(--go); background: var(--go-soft); }
.qc-status-producida    { color: var(--go); background: var(--go-soft); }
.qc-status-publicada    { color: var(--go-ink); background: var(--go-soft); }
.qc-status-rechazada    { color: var(--accent-red); background: color-mix(in oklch, var(--accent-red) 13%, transparent); }

/* QUA-266 F4 — Métricas "estilo Scalify": banner de conexión Meta Ads, filtros
   del período y tabla unificada de campañas con fila de totales. Identidad de
   dominio violeta solo en acentos/total, superficie neutra (§1 tres capas). */
#page-contenido-metricas .cnt-me-banner {
    margin-bottom: 14px; padding: 10px 14px; border-radius: 10px;
    font-size: 13px; line-height: 1.5; border: 1px solid var(--border);
}
#page-contenido-metricas .cnt-me-banner code {
    background: var(--bg-card-hover); padding: 1px 5px; border-radius: 5px; font-size: 12px;
}
#page-contenido-metricas .cnt-me-banner--warn {
    color: var(--accent-yellow);
    background: color-mix(in oklch, var(--accent-yellow) 10%, transparent);
    border-color: color-mix(in oklch, var(--accent-yellow) 35%, transparent);
}
#page-contenido-metricas .cnt-me-banner--ok {
    color: var(--go); background: var(--go-soft);
    border-color: color-mix(in oklch, var(--go) 30%, transparent);
}
#page-contenido-metricas .cnt-me-banner .cnt-me-mut { color: var(--text-muted); font-weight: 400; }
#page-contenido-metricas .cnt-me-banner .cnt-me-cta { margin-left: 8px; font-weight: 600; color: inherit; text-decoration: underline; }
#page-contenido-metricas .cnt-me-filters {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 14px;
}
#page-contenido-metricas .cnt-me-filters label {
    display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-secondary);
}
#page-contenido-metricas .cnt-me-filters input,
#page-contenido-metricas .cnt-me-filters select {
    padding: 6px 9px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--bg-input); color: var(--text); font-size: 13px;
}
#page-contenido-metricas .cnt-me-scalify tfoot .cnt-me-total-row td {
    font-weight: 700; border-top: 2px solid var(--dom-contenido);
    background: var(--dom-contenido-soft); color: var(--text);
}
#page-contenido-metricas .cnt-me-detalle { margin-top: 16px; }
#page-contenido-metricas .cnt-me-detalle > summary {
    cursor: pointer; font-size: 13px; color: var(--text-secondary); padding: 6px 0;
}
#page-contenido-metricas .cnt-me-scalify .void { color: var(--text-muted); }

/* QUA-273 F5-A — Carlos, el chat del Director. Estética Central violeta ESTRICTA
   (nada del CSS neon del dashboard original): avatar/acentos con --dom-contenido,
   superficie neutra (§1 tres capas). Layout chat + generar en dos columnas. */
#page-contenido-carlos .cnt-carlos-diag {
    margin-bottom: 14px; padding: 11px 15px; border-radius: 10px;
    font-size: 13px; line-height: 1.5; color: var(--text);
    border: 1px solid color-mix(in oklab, var(--dom-contenido) 30%, var(--border));
    background: var(--dom-contenido-soft);
}
#page-contenido-carlos .cnt-carlos-grid {
    display: grid; grid-template-columns: 1fr 300px; gap: 16px; align-items: start;
}
@media (max-width: 900px) {
    #page-contenido-carlos .cnt-carlos-grid { grid-template-columns: 1fr; }
}
#page-contenido-carlos .cnt-carlos-chatcard,
#page-contenido-carlos .cnt-carlos-gencard {
    border: 1px solid var(--border); border-radius: 12px;
    background: var(--bg-card); box-shadow: var(--shadow-sm);
}
#page-contenido-carlos .cnt-carlos-chatcard {
    display: flex; flex-direction: column; min-height: 460px;
}
#page-contenido-carlos .cnt-carlos-head {
    display: flex; align-items: center; gap: 11px;
    padding: 12px 15px; border-bottom: 1px solid var(--border);
}
#page-contenido-carlos .cnt-carlos-head b { font-size: 14px; color: var(--text); }
#page-contenido-carlos .cnt-carlos-sub {
    display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 1px;
}
#page-contenido-carlos .cnt-carlos-avatar {
    display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
    color: var(--dom-contenido); background: var(--dom-contenido-soft);
    border: 1px solid color-mix(in oklch, var(--dom-contenido) 30%, transparent);
}
#page-contenido-carlos .cnt-carlos-msgs {
    flex: 1; overflow-y: auto; padding: 15px; display: flex; flex-direction: column;
    gap: 9px; max-height: 420px;
}
#page-contenido-carlos .cnt-carlos-empty {
    color: var(--text-muted); font-size: 13px; text-align: center;
    margin: auto; max-width: 320px; line-height: 1.5;
}
#page-contenido-carlos .cnt-carlos-b {
    max-width: 82%; padding: 9px 13px; border-radius: 14px; font-size: 13px;
    line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}
#page-contenido-carlos .cnt-carlos-b--me {
    align-self: flex-end; color: #fff; background: var(--dom-contenido);
    border-bottom-right-radius: 4px;
}
#page-contenido-carlos .cnt-carlos-b--ai {
    align-self: flex-start; color: var(--text); background: var(--bg-card-hover);
    border: 1px solid var(--border); border-bottom-left-radius: 4px;
}
#page-contenido-carlos .cnt-carlos-typing { color: var(--text-muted); font-style: italic; }
#page-contenido-carlos .cnt-carlos-chips {
    display: flex; flex-wrap: wrap; gap: 7px; padding: 0 15px 10px;
}
#page-contenido-carlos .cnt-carlos-chips .qc-chip:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px;
}
#page-contenido-carlos .cnt-carlos-inputrow {
    display: flex; gap: 9px; padding: 12px 15px; border-top: 1px solid var(--border);
}
#page-contenido-carlos .cnt-carlos-inputrow input {
    flex: 1; padding: 9px 12px; border: 1px solid var(--border); border-radius: 9px;
    background: var(--bg-input); color: var(--text); font-size: 13px;
}
#page-contenido-carlos .cnt-carlos-gencard { padding: 15px; }
#page-contenido-carlos .cnt-carlos-gencard > b { font-size: 14px; color: var(--text); }
#page-contenido-carlos .cnt-carlos-genhint {
    font-size: 12px; color: var(--text-muted); line-height: 1.5; margin: 6px 0 12px;
}
#page-contenido-carlos .cnt-carlos-lbl {
    display: block; font-size: 12px; color: var(--text-secondary);
    margin: 10px 0 4px;
}
#page-contenido-carlos .cnt-carlos-gencard select {
    width: 100%; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--bg-input); color: var(--text); font-size: 13px;
}
#page-contenido-carlos .cnt-carlos-genresult {
    margin-top: 12px; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary);
}
#page-contenido-carlos .cnt-carlos-genresult a { color: var(--dom-contenido); font-weight: 600; }

/* ============================================================
   QUA-439 Ola 1a — Contenido · Resumen. Diagnóstico + KPIs +
   worldcards (pauta/orgánico) + pulso. Mismo patrón de tres capas
   que Carlos: superficie neutra, identidad de dominio solo en
   acentos (violeta pauta/contenido, verde dominio orgánico —
   NUNCA el mint de acción, standards §1/§3.2).
   ============================================================ */
#page-contenido-resumen .cnt-res-diag {
    margin-bottom: 14px; padding: 11px 15px; border-radius: 10px;
    font-size: 13px; line-height: 1.5; color: var(--text);
    border: 1px solid color-mix(in oklab, var(--dom-contenido) 30%, var(--border));
    background: var(--dom-contenido-soft);
}
#page-contenido-resumen .cnt-res-kpis {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px;
}
@media (max-width: 700px) {
    #page-contenido-resumen .cnt-res-kpis { grid-template-columns: repeat(2, 1fr); }
}
#page-contenido-resumen .cnt-res-kpi {
    border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card);
    box-shadow: var(--shadow-sm); padding: 13px;
}
#page-contenido-resumen .cnt-res-kpi-ic {
    width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px;
    background: color-mix(in oklab, var(--ac) 13%, transparent); margin-bottom: 8px; font-size: 15px;
}
#page-contenido-resumen .cnt-res-kpi-v { font-size: 22px; font-weight: 700; color: var(--text); }
#page-contenido-resumen .cnt-res-kpi-l { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
#page-contenido-resumen .cnt-res-worlds {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px;
}
@media (max-width: 700px) {
    #page-contenido-resumen .cnt-res-worlds { grid-template-columns: 1fr; }
}
#page-contenido-resumen .cnt-res-world {
    border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card);
    box-shadow: var(--shadow-sm); padding: 15px;
}
#page-contenido-resumen .cnt-res-world-h {
    display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 10px;
    border-radius: 999px; color: var(--wc); background: var(--wcs); margin-bottom: 8px;
}
#page-contenido-resumen .cnt-res-world-goal { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
#page-contenido-resumen .cnt-res-world-num { font-size: 26px; font-weight: 700; color: var(--wc); margin-top: 10px; }
#page-contenido-resumen .cnt-res-world-sub { font-size: 11.5px; color: var(--text-muted); margin-bottom: 10px; }
#page-contenido-resumen .cnt-res-world-link { font-size: 12.5px; font-weight: 600; color: var(--wc); }
#page-contenido-resumen .cnt-res-pulso-card {
    border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card);
    box-shadow: var(--shadow-sm); padding: 15px;
}
#page-contenido-resumen .cnt-res-pulso-card h2 { font-size: 14px; color: var(--text); margin: 0; }
#page-contenido-resumen .cnt-res-hint { font-size: 12px; color: var(--text-muted); margin: 4px 0 10px; }
#page-contenido-resumen .cnt-res-pulso-row {
    display: flex; align-items: center; gap: 9px; padding: 8px 0;
    border-top: 1px solid var(--border); font-size: 13px; color: var(--text-secondary);
}
#page-contenido-resumen .cnt-res-pulso-row:first-child { border-top: none; }

/* ============================================================
   QUA-439 Ola 1b — Página Ángulos de venta.
   Grid de cards por ángulo (datos de /api/contenido/analisis/ranking-angulos)
   + sección sugeridos estáticos con borde dashed.
   Dominio VIOLETA (--dom-contenido). Sin side-stripes, sin gradientes
   decorativos, verde solo acción (standards §3). Color por ángulo
   via inline --ac; fondos con color-mix oklab 13%.
   ============================================================ */
#page-contenido-angulos .cnt-ang-hero {
    display: flex; align-items: center; gap: 14px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 12px; padding: 16px 18px; margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}
#page-contenido-angulos .cnt-ang-hero-ic {
    width: 52px; height: 52px; flex-shrink: 0; border-radius: 14px;
    display: grid; place-items: center;
    background: var(--dom-contenido-soft); color: var(--dom-contenido);
}
#page-contenido-angulos .cnt-ang-hero-tx { flex: 1; min-width: 0; }
#page-contenido-angulos .cnt-ang-hero-tx b { font-size: 15px; font-weight: 700; }
#page-contenido-angulos .cnt-ang-hero-tx p {
    font-size: 12.5px; color: var(--text-muted); margin-top: 3px;
    line-height: 1.5; max-width: 480px;
}
#page-contenido-angulos .cnt-ang-hero-stats {
    display: flex; gap: 22px; flex-shrink: 0; text-align: right;
}
#page-contenido-angulos .cnt-ang-hero-stats b {
    display: block; font-size: 24px; font-weight: 800; line-height: 1;
    color: var(--text);
}
#page-contenido-angulos .cnt-ang-hero-stats small {
    font-size: 10px; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .6px;
}
@media (max-width: 700px) {
    #page-contenido-angulos .cnt-ang-hero { flex-wrap: wrap; }
    #page-contenido-angulos .cnt-ang-hero-stats { margin-left: 0; text-align: left; }
}
#page-contenido-angulos .cnt-ang-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px; margin-bottom: 22px;
}
#page-contenido-angulos .cnt-ang-card {
    background: var(--bg-card);
    border: 1px solid color-mix(in oklab, var(--ac, var(--dom-contenido)) 30%, var(--border));
    border-radius: 14px; padding: 15px;
    box-shadow: var(--shadow-sm); transition: background .15s;
}
#page-contenido-angulos .cnt-ang-card:hover { background: var(--bg-card-hover, var(--bg-card)); }
#page-contenido-angulos .cnt-ang-card-head {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;
}
#page-contenido-angulos .cnt-ang-card-ic {
    width: 40px; height: 40px; border-radius: 12px;
    display: grid; place-items: center; flex-shrink: 0;
    background: color-mix(in oklab, var(--ac, var(--dom-contenido)) 13%, transparent);
    color: var(--ac, var(--dom-contenido));
}
#page-contenido-angulos .cnt-ang-card-count {
    font-size: 21px; font-weight: 800; line-height: 1;
    color: var(--text); text-align: right;
}
#page-contenido-angulos .cnt-ang-card-count small {
    display: block; font-size: 10px; font-weight: 500;
    color: var(--text-muted); text-transform: uppercase; letter-spacing: .6px;
}
#page-contenido-angulos .cnt-ang-card-name {
    font-weight: 700; font-size: 13.5px; margin-bottom: 8px; color: var(--text);
}
#page-contenido-angulos .cnt-ang-bar {
    height: 5px; background: var(--border); border-radius: 99px;
    overflow: hidden; margin-bottom: 6px;
}
#page-contenido-angulos .cnt-ang-bar-fill {
    display: block; height: 100%; border-radius: 99px;
    background: var(--ac, var(--dom-contenido)); transition: width .5s;
}
#page-contenido-angulos .cnt-ang-card-foot {
    font-size: 11.5px; color: var(--text-muted);
}
#page-contenido-angulos .cnt-ang-sugg-head {
    display: flex; align-items: center; gap: 12px;
    margin: 4px 0 13px; font-size: 13px; font-weight: 700; color: var(--text);
}
#page-contenido-angulos .cnt-ang-sugg-ln {
    flex: 1; height: 1px; background: var(--border);
}
#page-contenido-angulos .cnt-ang-sugg-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px; margin-bottom: 16px;
}
#page-contenido-angulos .cnt-ang-sugg-card {
    background: var(--bg-card);
    border: 1px dashed color-mix(in oklab, var(--ac, var(--dom-contenido)) 40%, var(--border));
    border-radius: 14px; padding: 15px; display: flex; flex-direction: column; gap: 10px;
    box-shadow: var(--shadow-sm);
}
#page-contenido-angulos .cnt-ang-sugg-ic {
    width: 38px; height: 38px; border-radius: 11px;
    display: grid; place-items: center; flex-shrink: 0;
    background: color-mix(in oklab, var(--ac, var(--dom-contenido)) 13%, transparent);
    color: var(--ac, var(--dom-contenido));
}
#page-contenido-angulos .cnt-ang-sugg-name {
    font-size: 13px; font-weight: 700; color: var(--text);
}
#page-contenido-angulos .cnt-ang-sugg-desc {
    font-size: 12px; color: var(--text-muted); line-height: 1.45;
}
#page-contenido-angulos .cnt-ang-sugg-btn {
    padding: 7px 10px; border-radius: 9px; font-size: 12px; font-weight: 600;
    background: var(--bg-card); border: 1px solid var(--border); color: var(--text);
    cursor: pointer; transition: border-color .15s, color .15s; width: 100%;
    text-align: center; margin-top: auto;
}
#page-contenido-angulos .cnt-ang-sugg-btn:hover {
    border-color: var(--dom-contenido); color: var(--dom-contenido);
}
#page-contenido-angulos .cnt-ang-notice {
    display: flex; align-items: flex-start; gap: 10px;
    background: color-mix(in oklab, var(--dom-contenido) 6%, var(--bg-card));
    border: 1px solid color-mix(in oklab, var(--dom-contenido) 22%, transparent);
    border-radius: 11px; padding: 12px 14px; font-size: 12px;
    color: var(--text-secondary); line-height: 1.5;
}
#page-contenido-angulos .cnt-ang-notice svg { flex-shrink: 0; color: var(--dom-contenido); margin-top: 1px; }

/* ============================================================
   QUA-275 [QUA-257 F5-C] — Centro de Análisis de Contenido.
   Bloque propio (Tomás). Grid de cards con charts + heatmap +
   biblioteca de hooks. Mismos tokens de dominio violeta que el
   resto del módulo Contenido (redeclarados arriba en el selector
   base #page-contenido-*). No toca bloques de otras fases.
   ============================================================ */
.cnt-an-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.cnt-an-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
}
.cnt-an-card > h3 {
    margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--text-secondary);
    display: flex; align-items: center; gap: 8px;
}
.cnt-an-card--wide { grid-column: 1 / -1; }
.qc-badge-info {
    font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 999px;
    color: var(--dom-contenido); background: var(--dom-contenido-soft);
}
.cnt-an-heatmap { overflow-x: auto; }
.cnt-an-heatmap table { border-collapse: collapse; width: 100%; font-size: 12px; }
.cnt-an-heatmap th, .cnt-an-heatmap td {
    padding: 6px 8px; text-align: center; border: 1px solid var(--border); white-space: nowrap;
}
.cnt-an-heatmap th:first-child, .cnt-an-heatmap td:first-child {
    text-align: left; position: sticky; left: 0; background: var(--bg-card); font-weight: 600;
}
.cnt-an-heatmap .cnt-an-cell { color: var(--text); }
.cnt-an-saturacion .cnt-an-sat-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 0; border-bottom: 1px solid var(--border-light); font-size: 13px;
}
.cnt-an-saturacion .cnt-an-sat-row:last-child { border-bottom: none; }
.cnt-an-saturacion .cnt-an-sat-share {
    font-weight: 700; color: var(--accent-yellow);
}
.cnt-an-saturacion .cnt-an-sat-empty { color: var(--text-muted); font-size: 13px; padding: 6px 0; }
@media (max-width: 1100px) {
    .cnt-an-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .cnt-an-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   QUA-274 [QUA-257 F5-B] — Producción: kanban con drag&drop.
   Bloque propio (Joaquín). Dominio VIOLETA (--dom-contenido) estricto,
   sin tocar clases .gar-kan-* (esas son de Garantías).
   ============================================================ */
.prod-kan-count-total {
    font-size: 12px; color: var(--text-secondary);
}
.prod-kanban {
    display: grid;
    grid-template-columns: repeat(7, minmax(220px, 1fr));
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
}
@media (max-width: 1400px) {
    .prod-kanban { grid-template-columns: repeat(7, 230px); }
}
.prod-kan-col {
    background: var(--bg-sidebar);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    min-height: 360px;
    max-height: 70vh;
}
.prod-kan-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 2px solid var(--dom-contenido);
    position: sticky;
    top: 0;
    background: var(--bg-sidebar);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    z-index: 1;
}
.prod-kan-title {
    font-family: var(--font-serif);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
}
.prod-kan-count {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    background: var(--dom-contenido-soft);
    color: var(--dom-contenido);
    border-radius: 100px;
}
.prod-kan-body {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    scrollbar-width: thin;
}
.prod-kan-body::-webkit-scrollbar { width: 4px; }
.prod-kan-body::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
.prod-kan-empty {
    padding: 20px 8px; text-align: center; color: var(--text-muted); font-size: 11px;
}
.prod-kan-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    cursor: grab;
    transition: all 0.15s ease;
    font-size: 12px;
}
.prod-kan-card:hover {
    border-color: var(--dom-contenido);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}
.prod-kan-card.dragging { opacity: 0.4; cursor: grabbing; }
.prod-kan-card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.prod-kan-card-titulo {
    font-weight: 600;
    color: var(--text);
    font-size: 12.5px;
    line-height: 1.3;
}
.prod-kan-card-venc {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
}
.prod-kan-card-venc.prod-venc-warn { color: var(--accent-yellow); }
.prod-kan-card-venc.prod-venc-alert { color: var(--accent-red); }
.prod-kan-card-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.prod-kan-card-chip {
    font-size: 10px;
    padding: 1px 7px;
    border-radius: 999px;
    color: var(--dom-contenido);
    background: var(--dom-contenido-soft);
}
.prod-kan-card-resp {
    font-size: 11px;
    color: var(--text-secondary);
}
.prod-kan-body.drop-target {
    outline: 2px dashed var(--dom-contenido);
    outline-offset: -4px;
    background: var(--dom-contenido-soft);
}
@media (max-width: 900px) {
    .prod-kanban { grid-template-columns: 1fr; }
    .prod-kan-col { min-height: 260px; max-height: 50vh; }
}

/* Panel de detalle (drawer compartido #crm2-drawer) — sección Producción */
.prod-notas-list {
    display: flex; flex-direction: column; gap: 6px; margin-top: 8px; max-height: 160px; overflow-y: auto;
}
.prod-nota {
    display: flex; flex-direction: column; gap: 2px;
    padding: 6px 8px; border-radius: var(--radius); background: var(--bg-sidebar);
    border-left: 2px solid var(--dom-contenido);
}
.prod-nota-tx { font-size: 12.5px; color: var(--text); }

/* ============================================================
   "CENTRAL" SKIN — Odoo (QUA-426, Ola 1b). Catálogo Odoo: buscador +
   grilla con pin de columna (nombre) + ficha/drawer con edición inline
   + Safe Sync dry-run. Identidad de dominio ocre/terracota (--dom-odoo,
   standards-diseno-central.md §1 — 7mo dominio, agregado 2026-07-07).
   Mismo régimen que Tanda 5/6: un bloque de redeclaración de tokens
   viejos -> tokens Central, así .qc-table/.qc-drawer/.modal-* (ya
   consumen esos custom properties) funcionan sin tocarlos.
   ============================================================ */
#page-odoo-catalogo[data-skin="central"] {
    background: var(--bg);
    --bg-card:        var(--card);
    --bg-card-hover:  color-mix(in oklch, var(--card) 94%, var(--ink) 6%);
    --bg-input:       var(--card);
    --border:         var(--line);
    --border-light:   var(--line);
    --border-strong:  var(--line-2);
    --text:           var(--ink);
    --text-secondary: var(--ink-2);
    --text-muted:     var(--ink-3);
    --accent:         var(--go);
    --accent-hover:   var(--go-ink);
    --accent-soft:    var(--go-soft);
    --accent-red:     var(--bad);
    --accent-yellow:  var(--warn);
    --shadow-sm: 0 1px 2px oklch(25% 0.02 330 / 0.05);
    --shadow:    0 1px 3px oklch(25% 0.02 330 / 0.07), 0 1px 2px oklch(25% 0.02 330 / 0.05);
    --font-serif: var(--sans);
    font-family: var(--sans);
}
/* Chip de identidad de dominio (ocre/terracota) en el header, mismo patrón
   que .qc-chip--contenido: tinta/fondo del dominio, nunca la superficie. */
.qc-chip--odoo {
    color: var(--dom-odoo);
    background: var(--dom-odoo-soft);
    border-color: transparent;
}

/* Banner persistente de modo solo-lectura (403 kill-switch ODOO_PANEL_WRITE_ENABLED,
   lección QUA-419: nunca fallar en silencio). A diferencia de un toast, este banner
   NO se auto-oculta — queda visible mientras el panel esté en modo lectura. */
.odp-banner {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 11px 14px; margin: 0 0 14px; border-radius: var(--radius, 10px);
    font-size: 13px; line-height: 1.4;
}
.odp-banner[hidden] { display: none; }
.odp-banner--warn {
    color: var(--warn, var(--accent-yellow));
    background: var(--warn-soft, color-mix(in oklch, var(--accent-yellow) 15%, transparent));
    border: 1px solid color-mix(in oklch, var(--warn, var(--accent-yellow)) 35%, transparent);
}
.odp-banner svg { flex-shrink: 0; margin-top: 1px; }

/* Grilla: pin de columna "Nombre" (standards §3.1 — columnas separadas por
   línea vertical MUY suave, celda sin dato = guion centrado tinta terciaria). */
.odp-table-wrap { flex: 1; min-height: 0; overflow: auto; }
.odp-table { width: 100%; }
.odp-table th, .odp-table td { border-right: 1px solid color-mix(in oklch, var(--border) 55%, transparent); }
.odp-table th:last-child, .odp-table td:last-child { border-right: none; }
.odp-table tbody td.num, .odp-table thead th.num { text-align: right; font-variant-numeric: tabular-nums; }
.odp-table .odp-col-pin,
.odp-table th.odp-col-pin {
    position: sticky; left: 0; z-index: 1;
    background: var(--bg-card);
    box-shadow: 1px 0 0 color-mix(in oklch, var(--border) 70%, transparent);
}
.odp-table thead th.odp-col-pin { z-index: 3; }
.odp-table tbody tr:hover .odp-col-pin { background: var(--bg-card-hover); }
.odp-void { text-align: center !important; color: var(--text-muted); font-weight: 400; }
.odp-name { font-weight: 600; color: var(--text); }
.odp-sku { font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.odp-badge-tn {
    display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600;
    padding: 2px 8px; border-radius: 999px;
}
.odp-badge-tn--ok { color: var(--accent-green, #1a9b50); background: color-mix(in oklch, var(--accent-green, #1a9b50) 15%, transparent); }
.odp-badge-tn--off { color: var(--text-muted); background: var(--bg-card-hover); }
button.odp-badge-toggle { border: none; cursor: pointer; font-family: inherit; }
button.odp-badge-toggle:hover { filter: brightness(0.95); }
button.odp-badge-toggle:focus-visible { outline: 2px solid var(--accent-blue, #3b82f6); outline-offset: 2px; }
.odp-col-thumb { width: 40px; }
.odp-thumb {
    width: 32px; height: 32px; border-radius: 6px; display: flex; align-items: center;
    justify-content: center; color: var(--text-muted); background: var(--bg-card-hover);
    border: 1px solid var(--border);
}
.odp-thumb-img { width: 32px; height: 32px; border-radius: 6px; object-fit: cover; border: 1px solid var(--border); }
.odp-foto-section { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
.odp-foto-preview { display: flex; gap: 8px; flex-wrap: wrap; }
.odp-foto-current { width: 96px; height: 96px; border-radius: 8px; object-fit: cover; border: 1px solid var(--border); }
.odp-foto-empty {
    width: 96px; height: 96px; border-radius: 8px; border: 1.5px dashed var(--border);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; color: var(--text-muted); font-size: 12px;
}
.odp-foto-dropzone {
    display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 8px;
    border: 1.5px dashed var(--border); background: var(--bg-card-hover);
    color: var(--text-muted); font-size: 13px; cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.odp-foto-dropzone:hover, .odp-foto-dropzone--over {
    border-color: var(--accent); background: color-mix(in oklch, var(--accent) 8%, transparent);
    color: var(--accent);
}
.odp-foto-pending { display: flex; flex-direction: column; gap: 8px; }
.odp-foto-preview-new { max-width: 160px; max-height: 120px; border-radius: 8px; object-fit: contain; border: 1px solid var(--border); background: var(--bg-card-hover); }
.odp-foto-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.odp-foto-aviso { font-size: 11.5px; color: var(--text-muted); margin: 0; }
.odp-f-ok { color: var(--accent-green, #22c55e); font-size: 12.5px; }
.odp-f-spin { color: var(--text-muted); font-size: 12.5px; }
.odp-filtro {
    font: inherit; font-size: 12.5px; padding: 6px 10px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--bg-input); color: inherit;
}
.odp-section-h {
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
    color: var(--text-muted); margin: 18px 0 8px; padding-top: 10px; border-top: 1px solid var(--border);
}
.odp-section-h:first-of-type { margin-top: 14px; padding-top: 0; border-top: none; }
.odp-badge-dup {
    display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-size: 10.5px; font-weight: 700;
    padding: 1px 6px; border-radius: 999px; color: var(--accent-red); background: color-mix(in oklch, var(--accent-red) 15%, transparent);
}
.odp-row-clickable { cursor: pointer; }

/* Estado vacío / loading (sin emojis — SVG stroke) */
.odp-empty { text-align: center; padding: 12px; }

/* Buscador con debounce: ligero indicador de "buscando…" */
.odp-searching { font-size: 11.5px; color: var(--text-muted); margin-left: 6px; }

/* Ficha de producto (drawer #odp-drawer, mismo componente .qc-drawer que CRM) */
.odp-f { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.odp-f > span:first-child { font-size: 11.5px; color: var(--text-muted); font-weight: 600; }
.odp-f input, .odp-f select { font: inherit; }
.odp-f-ro { color: var(--text); padding: 6px 0; }
.odp-f-editable { position: relative; }
.odp-f-savebar { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.odp-f-savebar .odp-f-saved { font-size: 11.5px; color: var(--accent-green, #1a9b50); }
.odp-f-savebar .odp-f-err { font-size: 11.5px; color: var(--accent-red); }
.odp-stale-box {
    margin-top: 6px; padding: 8px 10px; border-radius: 8px; font-size: 12px;
    color: var(--accent-red); background: color-mix(in oklch, var(--accent-red) 12%, transparent);
    border: 1px solid color-mix(in oklch, var(--accent-red) 35%, transparent);
}
.odp-stock-ro {
    display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted);
}
.odp-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 10px; }

/* Mini-historial de trazabilidad (audit_events) */
.odp-audit { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.odp-audit-row {
    display: flex; flex-direction: column; gap: 2px;
    padding: 6px 8px; border-radius: var(--radius, 8px); background: var(--bg-card-hover);
    border-left: 2px solid var(--dom-odoo);
    font-size: 12px;
}
.odp-audit-row b { color: var(--text); }
.odp-audit-row .odp-audit-ts { color: var(--text-muted); font-size: 11px; }
.odp-audit-empty { color: var(--text-muted); font-size: 12.5px; }

/* Modal Safe Sync Dry-Run: diff legible Odoo vs TN antes de cualquier push */
.odp-diff-row {
    display: grid; grid-template-columns: 140px 1fr 1fr; gap: 10px; align-items: center;
    padding: 7px 0; border-bottom: 1px solid var(--border-light); font-size: 12.5px;
}
.odp-diff-row:last-child { border-bottom: none; }
.odp-diff-campo { font-weight: 600; color: var(--text-secondary); }
.odp-diff-odoo { color: var(--text); }
.odp-diff-tn { color: var(--accent-red); font-weight: 600; }
.odp-diff-empty { color: var(--text-muted); font-size: 12.5px; padding: 8px 0; }

@media (max-width: 720px) {
    .odp-table thead { display: none; }
    .odp-table tbody tr {
        display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px;
        padding: 10px 4px; border-bottom: 1px solid var(--border-light);
    }
    .odp-table td { border: none !important; padding: 2px 0 !important; min-height: var(--tap, 48px); display: flex; align-items: center; }
    .odp-table .odp-col-pin { position: static; grid-column: 1 / -1; box-shadow: none; background: none; }
    .odp-table td.odp-col-thumb { display: none; }
    .odp-diff-row { grid-template-columns: 1fr; gap: 2px; }
}
.prod-nota-meta { font-size: 10.5px; color: var(--text-muted); }

/* ============================================================
   QUA-467 OLA B — Contenido · Rentabilidad Ads Pro (Benicio)
   Cumple standards-diseno-central.md:
     §3.3 --font-serif remap obligatorio en [data-skin="central"]
     §2   tabular-nums en todos los números
     CERO emojis, sin side-stripes, 4 temas via tokens.
   ============================================================ */

/* ── Estado vacío / carga ────────────────────────────────── */
#page-contenido-rentabilidad .pl-empty {
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
    padding: 32px 16px;
}

/* ── Acciones del header ─────────────────────────────────── */
#page-contenido-rentabilidad .cnt-rent-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
#page-contenido-rentabilidad .cnt-rent-range {
    display: flex;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
#page-contenido-rentabilidad .cnt-rent-range-btn {
    padding: 5px 13px;
    font-size: 12.5px;
    font-family: var(--sans);
    font-weight: 500;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    border-right: 1px solid var(--border);
}
#page-contenido-rentabilidad .cnt-rent-range-btn:last-child { border-right: none; }
#page-contenido-rentabilidad .cnt-rent-range-btn:hover { background: var(--bg-card-hover); color: var(--text); }
#page-contenido-rentabilidad .cnt-rent-range-btn--active {
    background: var(--dom-contenido-soft);
    color: var(--dom-contenido);
    font-weight: 600;
}

/* ── Tabla principal ─────────────────────────────────────── */
#page-contenido-rentabilidad .cnt-rent-table-wrap {
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-card);
}
#page-contenido-rentabilidad .cnt-rent-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
#page-contenido-rentabilidad .cnt-rent-table th {
    padding: 9px 12px;
    text-align: left;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-card-hover);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
#page-contenido-rentabilidad .cnt-rent-table td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text);
    vertical-align: middle;
}
#page-contenido-rentabilidad .cnt-rent-table tbody tr:last-child td { border-bottom: none; }
#page-contenido-rentabilidad .cnt-rent-table tbody .cnt-rent-row {
    cursor: pointer;
    transition: background 0.1s;
}
#page-contenido-rentabilidad .cnt-rent-table tbody .cnt-rent-row:hover {
    background: var(--bg-card-hover);
}
/* tabular-nums obligatorio en toda celda numérica (§2) */
#page-contenido-rentabilidad .cnt-rent-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
#page-contenido-rentabilidad .cnt-rent-table th.cnt-rent-num { text-align: right; }

/* ── Ganancia neta ───────────────────────────────────────── */
/* selector con td. para superar la especificidad de
   #page-contenido-rentabilidad .cnt-rent-table td (línea ~11990) */
#page-contenido-rentabilidad .cnt-rent-table td.cnt-rent-ganancia {
    font-weight: 700;
    color: var(--accent);
}
#page-contenido-rentabilidad .cnt-rent-table td.cnt-rent-ganancia--neg { color: var(--accent-red); }

/* ── Chip ganancia parcial ───────────────────────────────── */
#page-contenido-rentabilidad .cnt-rent-chip-parcial {
    display: inline-block;
    margin-left: 5px;
    padding: 1px 6px;
    border-radius: 5px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--accent-yellow);
    background: color-mix(in oklch, var(--accent-yellow) 15%, transparent);
    cursor: help;
    vertical-align: middle;
}

/* ── Columna Margen (QUA-484: pct_costeado condicional) ───── */
#page-contenido-rentabilidad .cnt-rent-table td.cnt-rent-margen--pos {
    font-weight: 700;
    color: var(--accent);
}
#page-contenido-rentabilidad .cnt-rent-table td.cnt-rent-margen--neg {
    font-weight: 700;
    color: var(--accent-red);
}
#page-contenido-rentabilidad .cnt-rent-table td.cnt-rent-margen--parcial {
    white-space: nowrap;
    font-size: 11.5px;
}
#page-contenido-rentabilidad .cnt-rent-margen-pct-label {
    display: block;
    color: var(--text-muted);
    font-size: 11px;
    cursor: help;
}
#page-contenido-rentabilidad .cnt-rent-margen-link {
    display: block;
    color: var(--dom-contenido);
    font-size: 10.5px;
    text-decoration: none;
    font-weight: 600;
    margin-top: 1px;
}
#page-contenido-rentabilidad .cnt-rent-margen-link:hover {
    text-decoration: underline;
}
#page-contenido-rentabilidad .cnt-rent-table td.cnt-rent-margen-nd {
    color: var(--text-muted);
}

/* ── Semáforo ────────────────────────────────────────────── */
#page-contenido-rentabilidad .cnt-rent-sem {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    vertical-align: middle;
    flex-shrink: 0;
}
#page-contenido-rentabilidad .cnt-rent-sem--ok   { background: var(--accent); }
#page-contenido-rentabilidad .cnt-rent-sem--warn { background: var(--warn); }
#page-contenido-rentabilidad .cnt-rent-sem--err  { background: var(--accent-red); }
#page-contenido-rentabilidad .cnt-rent-sem--nd   { background: var(--border); }

/* ── Drawer ──────────────────────────────────────────────── */
#page-contenido-rentabilidad .cnt-rent-drawer-overlay {
    position: fixed;
    inset: 0;
    background: oklch(0% 0 0 / 0.45);
    z-index: 900;
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
}
/* QUA-484: [hidden] pierde contra el display:flex de la regla de arriba (misma
   especificidad, gana la que aparece despues en la cascada) => el overlay
   quedaba SIEMPRE visible aunque el atributo hidden estuviera puesto, tapando
   la pagina con un bloque oscuro fijo (visible sobre todo en mobile, donde
   ademas el drawer de 560px/95vw no entraba y quedaba cortado). */
#page-contenido-rentabilidad .cnt-rent-drawer-overlay[hidden] {
    display: none;
}
#page-contenido-rentabilidad .cnt-rent-drawer {
    width: min(560px, 95vw);
    background: var(--bg-card);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateX(100%);
    transition: transform 0.22s cubic-bezier(.25,.8,.25,1);
}
#page-contenido-rentabilidad .cnt-rent-drawer-overlay.cnt-rent-drawer-open .cnt-rent-drawer {
    transform: translateX(0);
}
#page-contenido-rentabilidad .cnt-rent-drawer-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 12px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
#page-contenido-rentabilidad .cnt-rent-drawer-ttl {
    font-weight: 700;
    font-size: 15px;
    color: var(--text);
}
#page-contenido-rentabilidad .cnt-rent-drawer-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 17px;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 5px;
}
#page-contenido-rentabilidad .cnt-rent-drawer-close:hover { color: var(--text); background: var(--bg-card-hover); }
#page-contenido-rentabilidad .cnt-rent-drawer-body {
    overflow-y: auto;
    padding: 16px 18px;
    flex: 1;
}
#page-contenido-rentabilidad .cnt-rent-dr-sec { margin-bottom: 22px; }
#page-contenido-rentabilidad .cnt-rent-dr-sec h3 {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    margin: 0 0 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ── Mapping editor ──────────────────────────────────────── */
#page-contenido-rentabilidad .cnt-rent-map-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-light);
    font-size: 13px;
}
#page-contenido-rentabilidad .cnt-rent-map-row:last-child { border-bottom: none; }
#page-contenido-rentabilidad .cnt-rent-map-sku { flex: 1; font-variant-numeric: tabular-nums; color: var(--text); }
#page-contenido-rentabilidad .cnt-rent-map-badge-sug {
    padding: 1px 7px;
    border-radius: 5px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--dom-contenido);
    background: var(--dom-contenido-soft);
}
#page-contenido-rentabilidad .cnt-rent-map-add {
    position: relative;
    margin-top: 10px;
}
#page-contenido-rentabilidad .cnt-rent-map-add input {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--bg-input);
    color: var(--text);
    font-size: 13px;
    font-family: var(--sans);
}
#page-contenido-rentabilidad .cnt-rent-map-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 7px;
    margin-top: 3px;
    z-index: 10;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 4px 16px oklch(0% 0 0 / 0.12);
}
#page-contenido-rentabilidad .cnt-rent-map-ri {
    padding: 7px 12px;
    font-size: 12.5px;
    color: var(--text);
}
#page-contenido-rentabilidad .cnt-rent-map-ri--sel {
    cursor: pointer;
}
#page-contenido-rentabilidad .cnt-rent-map-ri--sel:hover,
#page-contenido-rentabilidad .cnt-rent-map-ri--sel:focus {
    background: var(--bg-card-hover);
    outline: none;
}

/* ── Worldcard Pauta: línea ROAS real ────────────────────── */
#page-contenido-resumen .cnt-res-world-roas {
    font-size: 12.5px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    font-variant-numeric: tabular-nums;
}
#page-contenido-resumen .cnt-res-world-roas b { color: var(--accent); }
#page-contenido-resumen .cnt-res-world-roas-rep { color: var(--text-muted); }

/* Margen condicional — link a costos cuando pct_costeado < 100 */
#page-contenido-rentabilidad .cnt-rent-link-costos {
    color: var(--accent-yellow);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    white-space: nowrap;
}
#page-contenido-rentabilidad .cnt-rent-link-costos:hover { text-decoration: underline; }

/* Resumen margen en el drawer */
#page-contenido-rentabilidad .cnt-rent-dr-margen {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
    background: var(--bg-card-hover);
    border-radius: 8px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
#page-contenido-rentabilidad .cnt-rent-dr-margen-lbl {
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
#page-contenido-rentabilidad .cnt-rent-dr-margen-val {
    color: var(--text);
    font-weight: 700;
}

/* Responsive: tabla en mobile muestra menos columnas */
/* Responsive: tabla en mobile muestra menos columnas.
   Col order: 1=Plat 2=Camp 3=Spend 4=Rev 5=Costo 6=Ganancia 7=Margen 8=ROASrep 9=ROASreal 10=BE 11=sem [12=Acc]
   Mobile muestra: Plataforma · Campaña · Ganancia · Margen · ROAS real · Semáforo */
@media (max-width: 680px) {
    #page-contenido-rentabilidad .cnt-rent-table th:nth-child(3),
    #page-contenido-rentabilidad .cnt-rent-table td:nth-child(3),
    #page-contenido-rentabilidad .cnt-rent-table th:nth-child(4),
    #page-contenido-rentabilidad .cnt-rent-table td:nth-child(4),
    #page-contenido-rentabilidad .cnt-rent-table th:nth-child(5),
    #page-contenido-rentabilidad .cnt-rent-table td:nth-child(5),
    #page-contenido-rentabilidad .cnt-rent-table th:nth-child(8),
    #page-contenido-rentabilidad .cnt-rent-table td:nth-child(8),
    #page-contenido-rentabilidad .cnt-rent-table th:nth-child(10),
    #page-contenido-rentabilidad .cnt-rent-table td:nth-child(10) { display: none; }
    #page-contenido-rentabilidad .cnt-rent-range-btn { padding: 5px 9px; font-size: 11.5px; }
    /* FIX QUA-488: drawer 100% del overlay (no 100vw+border), sin overflow horizontal de página */
    #page-contenido-rentabilidad .cnt-rent-drawer {
        width: 100%;
        border-left: none;
        height: 100%;
    }
    #page-contenido-rentabilidad .cnt-rent-drawer-body .cnt-rent-table-wrap {
        max-width: 100%;
    }
}

/* FIX QUA-488: padding-bottom para que el push-banner no tape controles en mobile */
@media (max-width: 480px) {
    .qc-page-body {
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   QUA-472 OLA 2: TRIAL REELS / FECHAS / TREND RADAR
   §3.3: --font-serif ya remapeado en el bloque data-skin compartido de arriba.
   sin side-stripes · tabular-nums · cero emojis (SVG stroke)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── ÁNGULOS: loading / error state para el endpoint IA (OLA 2) ─────────── */
#page-contenido-angulos .cnt-ang-sugg-loading {
    grid-column: 1 / -1;
    color: var(--text-muted); font-size: 13px; text-align: center; padding: 28px 0;
}
#page-contenido-angulos .cnt-ang-sugg-err {
    grid-column: 1 / -1;
    display: flex; gap: 11px; align-items: flex-start;
    background: color-mix(in oklab, var(--bad) 6%, var(--bg-card));
    border: 1px solid color-mix(in oklab, var(--bad) 24%, transparent);
    border-radius: 11px; padding: 13px 15px;
    font-size: 12.5px; color: var(--text-secondary); line-height: 1.5;
}
#page-contenido-angulos .cnt-ang-sugg-err svg { flex-shrink: 0; color: var(--bad); margin-top: 1px; }

/* ── TRIAL REELS ─────────────────────────────────────────────────────────── */
#page-contenido-trials .cnt-tr-flow {
    display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px;
}
#page-contenido-trials .cnt-tr-step {
    flex: 1; min-width: 90px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 10px; padding: 11px 12px; font-size: 11.5px; text-align: center;
    color: var(--text-secondary);
}
#page-contenido-trials .cnt-tr-step b {
    display: block; color: var(--dom-contenido); font-size: 10px;
    text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px;
}
/* Shared field style */
.cnt-tr-field, .cnt-fecha-field, .cnt-trend-field {
    display: flex; flex-direction: column; gap: 4px;
}
.cnt-tr-field label, .cnt-fecha-field label, .cnt-trend-field label {
    font-size: 10px; text-transform: uppercase;
    letter-spacing: .5px; color: var(--text-muted); font-weight: 700;
}
.cnt-tr-field input, .cnt-tr-field select, .cnt-tr-field textarea,
.cnt-fecha-field input, .cnt-fecha-field select, .cnt-fecha-field textarea,
.cnt-trend-field input, .cnt-trend-field select, .cnt-trend-field textarea {
    background: var(--bg-input, var(--bg-card));
    border: 1px solid var(--border-strong); border-radius: 9px;
    padding: 8px 10px; color: var(--text); font-size: 12.5px; font-family: var(--sans);
    width: 100%;
}
/* Chips de filtro */
#page-contenido-trials .cnt-tr-chip {
    padding: 6px 13px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
    border: 1px solid var(--border-strong); color: var(--text-muted);
    background: var(--bg-card); cursor: pointer; transition: .15s;
}
#page-contenido-trials .cnt-tr-chip:hover { color: var(--text); }
#page-contenido-trials .cnt-tr-chip.active {
    background: color-mix(in oklab, var(--dom-contenido) 14%, transparent);
    color: var(--text); border-color: color-mix(in oklab, var(--dom-contenido) 40%, transparent);
}
#page-contenido-trends .cnt-trend-chip {
    padding: 6px 13px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
    border: 1px solid var(--border-strong); color: var(--text-muted);
    background: var(--bg-card); cursor: pointer; transition: .15s;
}
#page-contenido-trends .cnt-trend-chip:hover { color: var(--text); }
#page-contenido-trends .cnt-trend-chip.active {
    background: color-mix(in oklab, var(--dom-contenido) 14%, transparent);
    color: var(--text); border-color: color-mix(in oklab, var(--dom-contenido) 40%, transparent);
}
/* Form wrappers */
#page-contenido-trials .cnt-tr-form-wrap,
#page-contenido-fechas .cnt-fecha-form-wrap,
#page-contenido-trends .cnt-trend-form-wrap {
    background: var(--bg-card); border: 1px solid var(--border-strong);
    border-radius: 13px; padding: 16px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 12px;
}
/* QUA-484: mismo bug de cascada [hidden] vs display:flex (misma especificidad)
   que el drawer de Rentabilidad y el "Sin resultados" del menu mobile — estos
   3 formularios "agregar nuevo" quedaban SIEMPRE visibles en vez de aparecer
   solo al abrirlos. */
#page-contenido-trials .cnt-tr-form-wrap[hidden],
#page-contenido-fechas .cnt-fecha-form-wrap[hidden],
#page-contenido-trends .cnt-trend-form-wrap[hidden] {
    display: none;
}
#page-contenido-trials .cnt-tr-form-grid,
#page-contenido-fechas .cnt-fecha-form-grid,
#page-contenido-trends .cnt-trend-form-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
@media (max-width: 700px) {
    #page-contenido-trials .cnt-tr-form-grid,
    #page-contenido-fechas .cnt-fecha-form-grid,
    #page-contenido-trends .cnt-trend-form-grid { grid-template-columns: 1fr; }
}
/* Context mini-boxes (trial reels info panel) */
#page-contenido-trials .cnt-tr-twocol {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px;
}
@media (max-width: 700px) { #page-contenido-trials .cnt-tr-twocol { grid-template-columns: 1fr; } }
#page-contenido-trials .cnt-tr-minib {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 14px;
}
#page-contenido-trials .cnt-tr-minib h3 {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px;
    color: var(--text-muted); margin-bottom: 10px; font-weight: 700;
}
#page-contenido-trials .cnt-tr-taglist { display: flex; gap: 7px; flex-wrap: wrap; }
#page-contenido-trials .cnt-tr-tag {
    font-size: 11px; font-weight: 600; padding: 5px 11px; border-radius: 999px;
    background: color-mix(in oklab, var(--dom-contenido) 8%, transparent);
    color: var(--text-secondary); border: 1px solid var(--border);
}
/* Toolbars */
#page-contenido-trials .cnt-tr-toolbar,
#page-contenido-trends .cnt-trend-toolbar {
    display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; align-items: center;
}
/* Trial list rows */
#page-contenido-trials .cnt-tr-row {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 12px; padding: 14px; margin-bottom: 10px;
}
#page-contenido-trials .cnt-tr-row--won {
    border-color: color-mix(in oklab, var(--go) 40%, transparent);
}
#page-contenido-trials .cnt-tr-row--bad { opacity: .65; }
#page-contenido-trials .cnt-tr-row-head {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px;
}
#page-contenido-trials .cnt-tr-badge {
    font-size: 10px; font-weight: 800; padding: 3px 9px;
    border-radius: 999px; text-transform: uppercase; letter-spacing: .4px;
}
#page-contenido-trials .cnt-tr-badge--warn {
    background: color-mix(in oklab, var(--warn) 12%, transparent); color: var(--warn);
}
#page-contenido-trials .cnt-tr-badge--go {
    background: color-mix(in oklab, var(--go) 14%, transparent); color: var(--go);
}
#page-contenido-trials .cnt-tr-badge--bad {
    background: color-mix(in oklab, var(--bad) 12%, transparent); color: var(--bad);
}
#page-contenido-trials .cnt-tr-badge--go-only {
    width: 8px; height: 8px; border-radius: 50%; background: var(--go); padding: 0; display: inline-block;
}
#page-contenido-trials .cnt-tr-ang {
    font-size: 11px; color: var(--text-muted);
    background: var(--bg-card); border: 1px solid var(--border);
    padding: 2px 9px; border-radius: 999px;
}
#page-contenido-trials .cnt-tr-video-link {
    font-size: 11.5px; color: var(--dom-contenido); font-weight: 600; margin-left: auto;
}
#page-contenido-trials .cnt-tr-hip {
    font-size: 13.5px; font-weight: 600; line-height: 1.35;
    margin-bottom: 8px; color: var(--text);
}
#page-contenido-trials .cnt-tr-res {
    font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; line-height: 1.45;
}
#page-contenido-trials .cnt-tr-acciones {
    display: flex; gap: 7px; flex-wrap: wrap;
}
#page-contenido-trials .cnt-tr-act {
    background: var(--bg-card); border: 1px solid var(--border-strong);
    color: var(--text-muted); border-radius: 8px; padding: 5px 12px;
    font-size: 11.5px; font-weight: 700; cursor: pointer; transition: .12s; font-family: var(--sans);
}
#page-contenido-trials .cnt-tr-act--go:hover { color: var(--go); border-color: var(--go); }
#page-contenido-trials .cnt-tr-act--bad:hover { color: var(--bad); border-color: var(--bad); }

/* ── FECHAS ──────────────────────────────────────────────────────────────── */
#page-contenido-fechas .cnt-fecha-proximas {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 14px; padding: 16px; margin-bottom: 18px;
}
#page-contenido-fechas .cnt-fecha-proximas-title {
    font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
    color: var(--text-muted); margin-bottom: 12px;
}
#page-contenido-fechas .cnt-fecha-prox {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 0; border-bottom: 1px dashed var(--border); font-size: 12.5px;
}
#page-contenido-fechas .cnt-fecha-prox:last-child { border-bottom: none; }
#page-contenido-fechas .cnt-fecha-prox--hot .cnt-fecha-prox-countdown { color: var(--bad); }
#page-contenido-fechas .cnt-fecha-prox-date {
    flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
}
#page-contenido-fechas .cnt-fecha-prox-date b { color: var(--text); font-size: 13px; }
#page-contenido-fechas .cnt-fecha-prox-label {
    font-size: 10px; font-weight: 700; color: var(--dom-contenido);
    text-transform: uppercase; letter-spacing: .5px;
}
#page-contenido-fechas .cnt-fecha-prox-countdown {
    font-size: 12px; font-weight: 800; color: var(--text-muted);
    font-variant-numeric: tabular-nums; flex-shrink: 0; min-width: 90px; text-align: right;
}
#page-contenido-fechas .cnt-fecha-mes { margin-bottom: 20px; }
#page-contenido-fechas .cnt-fecha-mes-label {
    font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
    color: var(--text-muted); margin-bottom: 9px;
}
#page-contenido-fechas .cnt-fecha-row,
#page-contenido-fechas .cnt-fecha-row--past {
    display: flex; align-items: center; gap: 12px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 11px; padding: 11px 14px; margin-bottom: 7px; transition: border-color .15s;
}
#page-contenido-fechas .cnt-fecha-row--past { opacity: .55; }
#page-contenido-fechas .cnt-fecha-row-date {
    flex-shrink: 0; width: 36px; text-align: center;
}
#page-contenido-fechas .cnt-fecha-row-date b {
    font-size: 22px; font-weight: 900; line-height: 1;
    font-variant-numeric: tabular-nums; color: var(--text);
}
#page-contenido-fechas .cnt-fecha-row-body { flex: 1; min-width: 0; }
#page-contenido-fechas .cnt-fecha-row-body strong {
    font-size: 13px; font-weight: 700; color: var(--text);
}
#page-contenido-fechas .cnt-fecha-row-notas {
    display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 2px;
}
#page-contenido-fechas .cnt-fecha-row-meta {
    display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0;
}
#page-contenido-fechas .cnt-fecha-cat {
    font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
    background: color-mix(in oklab, var(--dom-contenido) 12%, transparent);
    color: var(--dom-contenido);
}
#page-contenido-fechas .cnt-fecha-dias {
    font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums;
}

/* ── TREND RADAR ─────────────────────────────────────────────────────────── */
#page-contenido-trends .cnt-trend-info {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px;
}
@media (max-width: 700px) {
    #page-contenido-trends .cnt-trend-info { grid-template-columns: 1fr; }
}
#page-contenido-trends .cnt-trend-minib {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 14px;
}
#page-contenido-trends .cnt-trend-minib h3 {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px;
    color: var(--text-muted); margin-bottom: 10px; font-weight: 700;
}
#page-contenido-trends .cnt-trend-taglist { display: flex; gap: 7px; flex-wrap: wrap; }
#page-contenido-trends .cnt-trend-tag {
    font-size: 11px; font-weight: 600; padding: 5px 11px; border-radius: 999px;
    background: var(--bg-card); color: var(--text-secondary); border: 1px solid var(--border);
}
#page-contenido-trends .cnt-trend-row {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 12px; padding: 14px; margin-bottom: 9px;
}
#page-contenido-trends .cnt-trend-row-head {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 7px;
}
#page-contenido-trends .cnt-trend-badge {
    font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: 999px;
    text-transform: uppercase; letter-spacing: .4px;
}
#page-contenido-trends .cnt-trend-badge--up { background: color-mix(in oklab, var(--bad) 12%, transparent); color: var(--bad); }
#page-contenido-trends .cnt-trend-badge--warn { background: color-mix(in oklab, var(--warn) 12%, transparent); color: var(--warn); }
#page-contenido-trends .cnt-trend-badge--bad { background: color-mix(in oklab, var(--text-muted) 10%, transparent); color: var(--text-muted); }
#page-contenido-trends .cnt-trend-badge--info { background: color-mix(in oklab, var(--dom-contenido) 12%, transparent); color: var(--dom-contenido); }
#page-contenido-trends .cnt-trend-badge--go { background: color-mix(in oklab, var(--go) 14%, transparent); color: var(--go); }
#page-contenido-trends .cnt-trend-plat {
    font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px;
    background: color-mix(in oklab, var(--dom-contenido) 10%, transparent);
    color: var(--dom-contenido); border: 1px solid color-mix(in oklab, var(--dom-contenido) 25%, transparent);
}
#page-contenido-trends .cnt-trend-link {
    font-size: 11.5px; color: var(--dom-contenido); font-weight: 600; margin-left: auto;
}
#page-contenido-trends .cnt-trend-link:hover { text-decoration: underline; }
#page-contenido-trends .cnt-trend-titulo {
    font-size: 13.5px; font-weight: 700; line-height: 1.35; color: var(--text); margin-bottom: 6px;
}
#page-contenido-trends .cnt-trend-notas {
    font-size: 12px; color: var(--text-secondary); line-height: 1.45; margin-bottom: 8px;
}
#page-contenido-trends .cnt-trend-actions {
    display: flex; gap: 7px; flex-wrap: wrap;
}
#page-contenido-trends .cnt-trend-act {
    background: var(--bg-card); border: 1px solid var(--border-strong);
    color: var(--text-muted); border-radius: 8px; padding: 5px 12px;
    font-size: 11.5px; font-weight: 700; cursor: pointer; transition: .12s; font-family: var(--sans);
}
#page-contenido-trends .cnt-trend-act:hover { color: var(--go); border-color: var(--go); }
#page-contenido-trends .cnt-trend-act--muted:hover { color: var(--text-muted); border-color: var(--border-strong); opacity: .7; }

/* ============================================================
   RECOMENDACIONES CARLOS (OLA C) — QUA-470
   Feed de recomendaciones de pauta en Resumen + Rentabilidad.
   Badge contador en nav Resumen. Estándar Central LEY.
   ============================================================ */
.cnt-recom-section {
    margin-bottom: 20px;
}
#page-contenido-resumen .cnt-recom-section {
    margin-top: 0;
    padding: 0;
}
.cnt-recom-rent-wrap {
    padding: 0 20px 20px;
}
.cnt-recom-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.cnt-recom-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
    font-family: var(--sans);
}
.cnt-recom-count-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--accent-red);
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.cnt-recom-empty {
    font-size: 13px;
    color: var(--text-muted);
    padding: 8px 0 12px;
}
.cnt-recom-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cnt-recom-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transition: opacity 0.18s;
}
.cnt-recom-item--aplicada { opacity: 0.5; }
.cnt-recom-item--descartada { opacity: 0.38; }
.cnt-recom-badge {
    flex-shrink: 0;
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 6px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.cnt-recom-badge--pausar {
    background: color-mix(in oklch, var(--bad) 14%, transparent);
    color: var(--bad);
}
.cnt-recom-badge--escalar {
    background: var(--go-soft);
    color: var(--go-ink);
}
.cnt-recom-badge--fatiga,
.cnt-recom-badge--cpa {
    background: color-mix(in oklch, var(--warn) 14%, transparent);
    color: var(--accent-yellow);
}
.cnt-recom-body {
    flex: 1;
    min-width: 0;
}
.cnt-recom-camp {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cnt-recom-ev {
    font-size: 12px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    margin-bottom: 8px;
    line-height: 1.5;
}
.cnt-recom-actions {
    display: flex;
    gap: 6px;
}
.cnt-recom-btn {
    font-size: 12px;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.14s, color 0.14s;
    font-family: var(--sans);
}
.cnt-recom-btn:hover { background: var(--bg-card-hover); color: var(--text); }
.cnt-recom-btn:disabled { opacity: 0.5; cursor: default; }
.cnt-recom-btn--aplicar {
    color: var(--go-ink);
    border-color: color-mix(in oklch, var(--go) 40%, transparent);
}
.cnt-recom-btn--aplicar:hover { background: var(--go-soft); color: var(--go-ink); }
.cnt-recom-btn--descartar { color: var(--text-muted); }
.cnt-recom-estado {
    font-size: 11.5px;
    font-style: italic;
    color: var(--text-muted);
    flex-shrink: 0;
    align-self: center;
    white-space: nowrap;
}
@media (max-width: 600px) {
    .cnt-recom-item { flex-wrap: wrap; }
    .cnt-recom-rent-wrap { padding: 0 12px 16px; }
}

/* ── OLA D: acciones Meta Ads — botones Pausar/Ajustar presupuesto (QUA-ola-d) ── */
.cnt-ads-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.cnt-ads-btn {
    font-size: 12px; font-weight: 600; padding: 5px 10px;
    border: 1px solid currentColor; border-radius: 6px;
    background: transparent; cursor: pointer;
    font-family: var(--font-sans);
    transition: background .12s, color .12s;
}
.cnt-ads-btn--pausar { color: var(--bad); border-color: color-mix(in oklch, var(--bad) 40%, transparent); }
.cnt-ads-btn--pausar:not(:disabled):hover { background: var(--bad-soft); }
.cnt-ads-btn--ajustar { color: var(--warn); border-color: color-mix(in oklch, var(--warn) 40%, transparent); }
.cnt-ads-btn--ajustar:not(:disabled):hover { background: var(--warn-soft); }
.cnt-ads-btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: auto; }
.cnt-ads-btn[data-tip] { position: relative; }
.cnt-ads-btn[data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%);
    background: var(--bg-card); border: 1px solid var(--border);
    color: var(--text-muted); font-size: 11px; font-weight: 400;
    padding: 4px 8px; border-radius: 6px; white-space: nowrap;
    z-index: 100; box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.cnt-ads-drawer-actions { display: flex; gap: 8px; padding: 14px 0 0; flex-wrap: wrap; border-top: 1px solid var(--border); margin-top: 14px; }
#cnt-ads-budget-dlg h4 { font-size: 15px; font-weight: 600; margin: 0 0 10px; color: var(--text); }
#cnt-ads-budget-dlg p { font-size: 13px; color: var(--text-secondary); margin: 0 0 6px; }
#cnt-ads-budget-dlg .cnt-ads-dlg-ev { font-size: 12px; color: var(--text-muted); margin: 2px 0 14px; font-variant-numeric: tabular-nums; }
#cnt-ads-budget-dlg input[type="number"] { width: 100%; font-size: 14px; font-variant-numeric: tabular-nums; margin-bottom: 14px; }

/* ── Costos de contenido (QUA-484) ─────────────────────────────────────── */
/* [hidden] override — display:flex/block en estas clases pisaría el UA [hidden] */