/* ═══ DESIGN SYSTEM v4.0 — Fluid Trust ═══ */
:root {
    --brand-700: #006ba1;
    --brand-600: #0087c2;
    --brand-500: #009ee3;
    --brand-400: #38bdf8;
    --brand-100: #e0f2fe;
    --brand-50:  #f0f9ff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --green-700: #047857;
    --green-600: #059669;
    --green-500: #10b981;
    --green-400: #34d399;
    --green-100: #d1fae5;
    --green-200: #a7f3d0;
    --green-50: #ecfdf5;
    --red-700: #b91c1c;
    --red-600: #dc2626;
    --red-500: #ef4444;
    --red-100: #fee2e2;
    --red-50: #fef2f2;
    --yellow-600: #d97706;
    --yellow-500: #f59e0b;
    --yellow-100: #fef3c7;
    --yellow-50: #fffbeb;
    --blue-700: #1d4ed8;
    --blue-600: #2563eb;
    --blue-100: #dbeafe;
    --blue-50: #eff6ff;
    /* Orange family */
    --orange-50:  #fff7ed;
    --orange-100: #ffedd5;
    --orange-200: #fed7aa;
    --orange-600: #ea580c;
    --orange-700: #c2410c;
    --orange-800: #9a3412;
    /* Purple family */
    --purple-50:  #faf5ff;
    --purple-100: #f3e8ff;
    --purple-300: #d8b4fe;
    --purple-600: #9333ea;
    --purple-700: #7e22ce;
    --purple-800: #6b21a8;
    /* Amber family (aliases de yellow — mismos valores) */
    --amber-50:  var(--yellow-50);
    --amber-100: var(--yellow-100);
    --amber-300: #fcd34d;
    --amber-600: var(--yellow-600);
    --amber-700: #b45309;
    --amber-800: #92400e;
    /* Semantic aliases */
    --error:      var(--red-600);
    --error-bg:   var(--red-50);
    --success:    var(--green-600);
    --success-bg: var(--green-50);
    --warning:    var(--yellow-600);
    --warning-bg: var(--yellow-50);
    /* Stitch brand aliases */
    --color-secondary: #1e293b;
    --color-tertiary:  #f8fafc;
    --color-neutral:   #64748b;
    --topbar-height: 56px;
    /* Elevation system — Linear/Vercel neutral */
    --shadow-xs:    0 1px 3px rgba(0,0,0,0.04);
    --shadow-sm:    0 2px 10px rgba(0,0,0,0.05);
    --shadow-md:    0 4px 16px rgba(0,0,0,0.10);
    --shadow-lg:    0 8px 24px rgba(0,0,0,0.12);
    --shadow-soft:  0 2px 8px rgba(0,0,0,0.06);
    --shadow-card:  0 4px 20px rgba(0,0,0,0.06);
    --shadow-modal: 0 16px 48px rgba(0,0,0,0.16);
    --shadow-hover: 0 8px 24px rgba(0,0,0,0.14);
    /* Spacing scale */
    --space-1: 4px;  --space-2: 8px;   --space-3: 12px;
    --space-4: 16px; --space-5: 20px;  --space-6: 24px;
    --space-8: 32px; --space-10: 40px; --space-12: 48px;
    /* Typography scale */
    --text-xs:   11px; --text-sm:   12px; --text-md:  13px;
    --text-base: 14px; --text-lg:   16px; --text-xl:  20px;
    --text-2xl:  26px; --text-3xl:  32px;
    --font-regular: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700;
    --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.5;
    /* Font families — Inter para cuerpo/datos, Montserrat para titulares */
    --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
    --font-display: 'Montserrat', system-ui, -apple-system, sans-serif;
    /* Radius scale — geometric premium (Linear/Vercel) */
    --radius-xs:      4px;
    --radius-sm:      6px;
    --radius-md:      8px;
    --radius-control: 8px;   /* buttons, inputs, selects, search bars */
    --radius-card:    14px;  /* cards, panels, modals */
    --radius-panel:   18px;  /* chart containers, paneles grandes */
    --radius-full:    9999px; /* pills, badges, avatares */
    /* Border tokens */
    --border-subtle:  rgba(0,0,0,0.06);
    --border-default: rgba(0,0,0,0.09);
    /* Surface tokens */
    --page-bg:        #f7f8fa;
    --surface-base:   #ffffff;
    --surface-muted:  var(--gray-50);
    --surface-subtle: var(--gray-100);
    --surface-overlay: rgba(0,0,0,0.3);
    /* Transition */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --duration: 0.2s;
    /* ─── Density system ─── */
    --table-row-py: 11px;
    --card-p: 22px;
    --section-gap: 24px;
    --page-py: 24px;
    --page-px: 24px;
}

/* ─── Density: compact ─── */
body.density-compact {
    --table-row-py: 7px;
    --card-p: 14px;
    --section-gap: 12px;
    --page-py: 14px;
    --page-px: 20px;
}

/* ─── Density: spacious ─── */
body.density-spacious {
    --table-row-py: 16px;
    --card-p: 28px;
    --section-gap: 28px;
    --page-py: 28px;
    --page-px: 32px;
}

* { font-family: var(--font-sans); }
body {
    background: var(--page-bg);
    color: var(--gray-800);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
}

/* ═══ PAGE FADE IN ═══ */
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
main { animation: fadeUp 0.3s var(--ease) both; }

/* ═══ CARDS ═══ */
.card {
    background: var(--surface-base);
    border-radius: var(--radius-card);
    border: 1px solid var(--border-subtle);
    padding: var(--card-p);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.card:hover { box-shadow: var(--shadow-sm); border-color: var(--border-default); }
.card-interactive { cursor: pointer; }
.card-interactive:hover { box-shadow: var(--shadow-card); border-color: rgba(0,135,194,0.18); }

/* ═══ KPI ═══ */
.kpi {
    background: var(--surface-base);
    border-radius: var(--radius-card);
    border: 1px solid var(--border-subtle);
    padding: var(--space-4) var(--space-5);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease);
    position: relative;
    overflow: hidden;
}
.kpi:hover { box-shadow: var(--shadow-sm); border-color: var(--border-default); }
.kpi-label { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--gray-500); letter-spacing: 0.01em; display: flex; align-items: center; gap: 6px; }
.kpi-value { font-family: var(--font-display); font-size: 28px; font-weight: var(--font-bold); color: var(--gray-900); line-height: var(--leading-tight); margin-top: 4px; letter-spacing: -0.03em; }
.kpi-sub { font-size: var(--text-sm); color: var(--gray-500); margin-top: 2px; }
.kpi-icon          { width: 40px; height: 40px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kpi-icon-brand    { background: var(--brand-100);  color: var(--brand-600);  }
.kpi-icon-success  { background: var(--green-50);   color: var(--green-600);  }
.kpi-icon-warning  { background: var(--yellow-50);  color: var(--yellow-600); }
.kpi-icon-danger   { background: var(--red-50);     color: var(--red-600);    }
.kpi-icon-neutral  { background: var(--gray-100);   color: var(--gray-600);   }
/* Chip de variación % para KPI (▲/▼) — R2 */
.kpi-delta { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-semibold); line-height: 1.2; }
.kpi-delta-up   { background: var(--green-50); color: var(--green-700); }
.kpi-delta-down { background: var(--red-50);   color: var(--red-700); }
.kpi-delta-flat { background: var(--gray-100); color: var(--gray-500); }

/* ═══ HEALTH STATES — catalog product pills ═══ */
.health-critico   { background: var(--red-50);    color: var(--red-700);    border-color: var(--red-100);    }
.health-atencion  { background: var(--amber-50);  color: var(--amber-700);  border-color: var(--amber-300);  }
.health-ok        { background: var(--green-50);  color: var(--green-700);  border-color: var(--green-100);  }
.health-saludable { background: var(--blue-50);   color: var(--blue-700);   border-color: var(--blue-100);   }

/* ═══ FT-KPI — Stitch-style KPI card (dashboard) ═══ */
.ft-kpi { background: var(--surface-base); border-radius: var(--radius-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-xs); padding: var(--card-p) 22px; display: flex; align-items: flex-start; gap: 14px; transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease); }
.ft-kpi:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.ft-kpi-icon { width: 44px; height: 44px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ft-kpi-label { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--gray-400); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.ft-kpi-value { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--color-secondary); letter-spacing: -0.5px; line-height: var(--leading-tight); }
.ft-kpi-delta { font-size: var(--text-sm); font-weight: var(--font-semibold); margin-top: 4px; }

/* ═══ FT-CARD — Content card (slightly more padded variant) ═══ */
.ft-card { background: var(--surface-base); border-radius: var(--radius-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-xs); padding: var(--card-p); }

/* ═══ FT-LABEL / FT-TITLE — dashboard typography ═══ */
.ft-label { font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--gray-400); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 3px; }
.ft-title { font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--font-bold); color: var(--color-secondary); }

/* ═══ FT-ALERT — dashboard alert list item ═══ */
.ft-alert-item { display: flex; align-items: flex-start; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); }
.ft-alert-item:last-child { border-bottom: none; padding-bottom: 0; }
.ft-alert-icon { width: 32px; height: 32px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ═══ SECTION HEADERS ═══ */
.section-title { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--gray-900); letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; }
.page-title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--gray-900); letter-spacing: -0.03em; }
.page-subtitle { font-size: var(--text-base); color: var(--gray-500); margin-top: 2px; }

/* ═══ TABLES — Enterprise (Stripe/Linear) ═══ */
table { border-collapse: collapse; width: 100%; }
thead th {
    font-size: var(--text-xs); font-weight: var(--font-medium); text-transform: none; letter-spacing: 0;
    color: var(--gray-500); padding: 11px 14px; border-bottom: 1px solid var(--gray-200);
    background: var(--gray-50); white-space: nowrap;
}
tbody td { padding: var(--table-row-py) 14px; border-bottom: 1px solid rgba(0,0,0,0.04); font-size: var(--text-md); transition: background var(--duration) var(--ease); }
tbody tr { transition: background var(--duration) var(--ease); }
tbody tr:hover { background: var(--gray-50); }
tbody tr:last-child td { border-bottom: none; }

/* ═══ BUTTONS ═══ */
.btn {
    padding: var(--space-2) var(--space-4); border-radius: var(--radius-control); font-size: var(--text-md); font-weight: var(--font-medium);
    transition: all var(--duration) var(--ease); cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    border: none; text-decoration: none; position: relative;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--brand-600); color: white; box-shadow: 0 1px 3px rgba(0,135,194,0.20); }
.btn-primary:hover { background: var(--brand-700); box-shadow: 0 2px 6px rgba(0,135,194,0.25); }
.btn-secondary { background: var(--gray-100); color: var(--gray-700); }
.btn-secondary:hover { background: var(--gray-200); }
.btn-success { background: var(--green-600); color: white; box-shadow: 0 1px 3px rgba(5,150,105,0.20); }
.btn-success:hover { background: #047857; box-shadow: 0 2px 6px rgba(5,150,105,0.25); }
.btn-danger { background: var(--red-600); color: white; }
.btn-danger:hover { background: #b91c1c; }
.btn-outline { background: white; color: var(--gray-600); border: 1px solid var(--gray-300); }
.btn-outline:hover { border-color: var(--brand-500); color: var(--brand-600); background: var(--brand-50); }
.btn-ghost { background: transparent; color: var(--gray-500); }
.btn-ghost:hover { background: var(--gray-100); color: var(--gray-700); }
.btn-warning { background: var(--yellow-600); color: white; box-shadow: 0 1px 3px rgba(217,119,6,0.20); }
.btn-warning:hover { background: #b45309; box-shadow: 0 2px 6px rgba(217,119,6,0.25); color: white; }
.btn-sm { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }
.btn-xs { padding: var(--space-1) var(--space-2); font-size: var(--text-xs); border-radius: calc(var(--radius-control) - 2px); }

/* ═══ BADGES ═══ */
.badge { padding: 3px 8px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-medium); display: inline-flex; align-items: center; gap: 4px; }
.badge-green  { background: var(--green-50);   color: var(--green-700);   }
.badge-yellow { background: var(--yellow-50);  color: var(--amber-800);   }
.badge-red    { background: var(--red-50);     color: var(--red-700);     }
.badge-blue   { background: var(--blue-50);    color: var(--blue-700);    }
.badge-gray   { background: var(--gray-100);   color: var(--gray-600);    }
.badge-brand  { background: var(--brand-50);   color: var(--brand-600);   }
.badge-orange { background: var(--orange-100); color: var(--orange-800);  }
.badge-amber  { background: var(--amber-100);  color: var(--amber-800);   }
.badge-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.badge-dot-green { background: var(--green-600); }
.badge-dot-red { background: var(--red-600); }
.badge-dot-yellow { background: var(--yellow-600); }

/* ═══ INPUTS ═══ */
input[type="text"], input[type="number"], input[type="password"], input[type="search"], input[type="date"], select, textarea {
    padding: var(--space-2) var(--space-3); border: 1px solid var(--gray-300); border-radius: var(--radius-control); font-size: var(--text-md);
    outline: none; transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
    background: var(--surface-base); color: var(--gray-800);
}
input:focus, select:focus, textarea:focus {
    border-color: var(--brand-500); box-shadow: 0 0 0 2px rgba(0,135,194,0.12);
}
input::placeholder { color: var(--gray-500); }

/* ═══ A11Y: focus visible global (keyboard navigation) ═══ */
:focus-visible {
    outline: 2px solid var(--brand-500);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
button:focus-visible, a:focus-visible, [role="button"]:focus-visible, [role="tab"]:focus-visible {
    outline: 2px solid var(--brand-500);
    outline-offset: 2px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: none;  /* ya tienen border + box-shadow via :focus */
}

/* ═══ NAV LINK (legacy — mantenido para content pages) ═══ */
.nav-link {
    padding: 6px 12px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500;
    color: var(--gray-500); transition: all var(--duration) var(--ease); text-decoration: none;
    display: inline-flex; align-items: center; gap: 5px;
}
.nav-link:hover { color: var(--gray-900); background: var(--gray-100); }
.nav-active { color: var(--brand-600) !important; background: var(--brand-50) !important; }

/* ═══ LOADING ═══ */
.btn-loading { opacity: 0.6; pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══ TOOLTIPS ═══ */
.tip { position:relative; cursor:help; border-bottom:1px dashed var(--gray-400); }
.tip::after {
    content: attr(data-tip);
    position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%);
    background:var(--gray-800); color:white; font-size:11px; padding:6px 10px;
    border-radius:6px; white-space:nowrap; pointer-events:none;
    opacity:0; transition:opacity .15s; z-index:200;
}
.tip:hover::after { opacity:1; }

/* ═══ TOAST ═══ */
.toast {
    position: fixed; top: 16px; right: 16px; z-index: 9999;
    padding: 12px 20px; border-radius: var(--radius); font-size: 13px; font-weight: 500;
    box-shadow: var(--shadow-lg);
    animation: slideIn 0.3s var(--ease), fadeOut 0.4s var(--ease) 3s forwards;
    display: flex; align-items: center; gap: 8px;
}
.toast-success { background: var(--green-600); color: white; }
.toast-error { background: var(--red-600); color: white; }
.toast-warning { background: var(--yellow-600); color: white; }
.toast-info { background: var(--blue-600); color: white; }
@keyframes slideIn { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes fadeOut { to { opacity: 0; transform: translateX(10px); } }

/* ═══ ALERTS ═══ */
.alert { padding: 12px 16px; border-radius: var(--radius); font-size: 13px; display: flex; align-items: flex-start; gap: 10px; }
.alert-success { background: #ecfdf5; color: #065f46; border-left: 3px solid var(--green-600); }
.alert-warning { background: #fffbeb; color: #92400e; border-left: 3px solid var(--yellow-600); }
.alert-error { background: #fef2f2; color: #991b1b; border-left: 3px solid var(--red-600); }
.alert-info { background: #eff6ff; color: #1e40af; border-left: 3px solid var(--blue-600); }

/* ═══ PROGRESS BAR ═══ */
.progress-track { width: 100%; height: 6px; background: var(--gray-200); border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 3px; transition: width 0.5s var(--ease); }

/* ═══ DROPDOWN ═══ */
.dropdown { position: relative; }
.dropdown-menu {
    position: absolute; right: 0; top: 100%; margin-top: 4px;
    background: white; border: 1px solid var(--gray-200); border-radius: var(--radius);
    padding: 4px; min-width: 180px; z-index: 50;
    box-shadow: var(--shadow-lg);
    opacity: 0; transform: translateY(-4px) scale(0.98); pointer-events: none;
    transition: all 0.15s var(--ease);
}
.dropdown-menu.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.dropdown-item {
    display: flex; align-items: center; gap: 8px; padding: 8px 12px;
    font-size: 13px; color: var(--gray-600); border-radius: var(--radius-sm);
    text-decoration: none; transition: all 0.1s var(--ease); cursor: pointer;
}
.dropdown-item:hover { background: var(--gray-50); color: var(--gray-900); }
.dropdown-divider { height: 1px; background: var(--gray-100); margin: 4px 0; }

/* ═══ EMPTY STATE ═══ */
.empty-state {
    text-align: center; padding: 40px 20px; color: var(--gray-400);
}
.empty-state i { margin-bottom: 12px; }

/* ═══ SCROLLBAR ═══ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

/* ═══ STAGGER ANIMATION ═══ */
.stagger > * { animation: fadeUp 0.3s var(--ease) both; }
.stagger > *:nth-child(1) { animation-delay: 0s; }
.stagger > *:nth-child(2) { animation-delay: 0.04s; }
.stagger > *:nth-child(3) { animation-delay: 0.08s; }
.stagger > *:nth-child(4) { animation-delay: 0.12s; }
.stagger > *:nth-child(5) { animation-delay: 0.16s; }
.stagger > *:nth-child(6) { animation-delay: 0.20s; }
.stagger > *:nth-child(n+7) { animation-delay: 0.24s; }

/* ═══ SKELETON LOADING ═══ */
.skeleton { background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-sm); }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ═══ APP SHELL — regiones semánticas ═══ */
.app-shell {
    display: flex;
    min-height: 100vh;
}
.sidebar-shell {
    width: 240px;
    flex-shrink: 0;
}
.content-shell {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    margin-left: 240px;
}
.topbar-shell {
    height: var(--topbar-height);
    background: white;
    border-bottom: 1px solid var(--gray-200);
    position: sticky;
    top: 0;
    z-index: 30;
    flex-shrink: 0;
}
.page-shell {
    flex: 1;
    padding: var(--page-py) var(--page-px);
    max-width: 1280px;
    width: 100%;
}

/* ═══ SIDEBAR ═══ */
.sidebar {
    width: 240px;
    height: 100vh;
    background: white;
    border-right: 1px solid var(--gray-100);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0;
    z-index: 50;
    overflow-y: auto;
    box-shadow: none;
}
.sidebar-logo {
    padding: 20px 16px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--gray-100);
    flex-shrink: 0;
}
.sidebar-nav { padding: 8px 0; flex: 1; }

/* ── Nav section grouping ──────────────────────────────── */
.nav-section { margin-bottom: 4px; }
.nav-group-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--gray-400);
    text-transform: uppercase;
    padding: 12px 16px 4px;
    user-select: none;
}

/* ── Sidebar items ─────────────────────────────────────── */
.sidebar-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 450;
    color: var(--gray-600);
    text-decoration: none;
    border-radius: 6px;
    margin: 1px 6px;
    transition: background 0.12s var(--ease), color 0.12s var(--ease);
    cursor: pointer;
    position: relative;
}
.sidebar-item:hover { background: var(--gray-100); color: var(--gray-900); }
.sidebar-item.active { background: var(--brand-600); color: #fff; font-weight: 600; }
.sidebar-item.active:hover { background: var(--brand-600); color: #fff; }
.sidebar-item.active .sidebar-item-icon { color: #fff; opacity: 1; }
.sidebar-item-icon { width: 15px; height: 15px; flex-shrink: 0; color: var(--gray-400); }
.sidebar-item-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-item-danger { color: var(--red-600); }
.sidebar-item-danger:hover { background: var(--red-50); color: var(--red-700); }

/* ── Nav badge (Preguntas counter) ────────────────────── */
.nav-badge {
    background: var(--red-600);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 10px;
    min-width: 16px;
    text-align: center;
    line-height: 1.4;
}

/* ── Sidebar footer ────────────────────────────────────── */
.sidebar-footer {
    border-top: 1px solid var(--gray-100);
    padding: 8px 0 16px;
    margin-top: auto;
    flex-shrink: 0;
}
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 49;
}
.sidebar-overlay.open { display: block; }

/* ═══ MAIN WRAPPER (legacy — compatibilidad) ═══ */
.main-wrapper {
    margin-left: 240px;
    flex: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.topbar {
    height: var(--topbar-height);
    background: white;
    border-bottom: 1px solid var(--gray-100);
    display: flex;
    align-items: center;
    padding: 0 24px;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 30;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.main-content {
    flex: 1;
    padding: var(--page-py) var(--page-px);
    max-width: 1280px;
    width: 100%;
}

/* ═══ MOBILE ═══ */
.show-mobile { display: none !important; }

@media (max-width: 768px) {
    .sidebar { transform: translateX(-100%); transition: transform 0.3s var(--ease); }
    .sidebar.open { transform: translateX(0); }
    .main-wrapper { margin-left: 0; }
    .content-shell { margin-left: 0; }
    .main-content { padding: 16px; }
    .page-shell { padding: 14px 16px 80px; }
    table { font-size: 12px; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    td, th { padding: 8px 10px !important; }
    .hide-mobile { display: none !important; }
    .show-mobile { display: block !important; }
    .show-mobile-flex { display: flex !important; }
    .show-mobile-inline { display: inline-flex !important; }
    .kpi-value { font-size: 20px; }
    .kpi { padding: 14px; }
    .kpi:hover { transform: none; }
    .card { padding: 14px; }
    .page-title { font-size: 18px; }
    .page-subtitle { font-size: 12px; }
    .section-title { font-size: 13px; }
    .grid { gap: 8px !important; }
    .grid-cols-3, .grid-cols-5 { grid-template-columns: repeat(2, 1fr) !important; }
    .flex-wrap { gap: 6px !important; }
    .btn { padding: 8px 14px; font-size: 13px; }
    .btn-sm { padding: 7px 12px; font-size: 12px; }
    .btn-xs { padding: 6px 10px; font-size: 12px; min-height: 36px; min-width: 36px; justify-content: center; }
    input[type="text"], input[type="number"], input[type="password"], select, textarea {
        font-size: 16px !important;
    }
    /* Tablas responsivas como cards */
    .table-mobile-cards thead { display: none; }
    .table-mobile-cards tbody tr {
        display: block;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius);
        margin-bottom: 10px;
        padding: 12px;
        background: white;
    }
    .table-mobile-cards tbody td {
        display: flex !important;
        justify-content: space-between;
        padding: 4px 0 !important;
        border: none !important;
        font-size: 13px;
    }
    .table-mobile-cards tbody td:before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--gray-500);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        flex-shrink: 0;
        padding-right: 8px;
    }
    .table-mobile-cards tbody td.td-full { flex-direction: column; }
    .table-mobile-cards tbody td.td-full:before { margin-bottom: 4px; }
}

@media (max-width: 480px) {
    .grid-cols-2 { grid-template-columns: 1fr !important; }
    .kpi-value { font-size: 18px; }
    .page-title { font-size: 17px; }
}

/* ═══ BOTTOM NAV (mobile) ═══ */
/* Safe-area-inset-bottom: respeta el home indicator de iPhone con notch (~34px).
   En navegadores sin soporte de env(), el fallback es 0 → comportamiento original. */
#bottom-nav {
    display: none;
    position: fixed; bottom: 0; left: 0; width: 100%;
    height: calc(62px + env(safe-area-inset-bottom, 0px));
    background: white;
    border-top: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.06);
    border-radius: 16px 16px 0 0;
    z-index: 40;
    padding: 0 4px env(safe-area-inset-bottom, 0px) 4px;
}
@media (max-width: 768px) {
    #bottom-nav { display: flex; align-items: stretch; }
    .main-content { padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important; }
    #support-btn, #help-btn { bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; }
}
.bn-tab {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2px;
    padding: 6px 4px 8px;
    text-decoration: none;
    color: #94a3b8; font-size: 9.5px; font-weight: 500;
    border-radius: 10px;
    transition: all 0.15s;
    position: relative;
}
.bn-tab:hover { color: var(--gray-600); background: var(--gray-50); }
.bn-tab.active {
    color: var(--brand-600); background: var(--brand-50);
}
.bn-tab.active i { color: var(--brand-500); }

/* ═══ MISC ═══ */
.mono { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12px; }
.text-positive { color: #059669; }
.text-negative { color: #dc2626; }
.divider { height: 1px; background: var(--gray-200); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-inline { width: 16px; height: 16px; vertical-align: -2px; }
a { color: var(--brand-600); text-decoration: none; transition: color var(--duration) var(--ease); }
a:hover { color: var(--brand-500); }
/* Reset link colors for buttons and nav */
.btn, .nav-link, .dropdown-item, .sidebar-link, .sidebar-sublink, .sidebar-item { color: inherit; }
.btn-primary, .btn-success, .btn-danger { color: white; }
.btn-primary:hover, .btn-success:hover, .btn-danger:hover { color: white; }

/* ═══ COMPOSITION SYSTEM ═══ */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}
.page-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 16px;
    background: white;
    border-radius: var(--radius);
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: var(--shadow-xs);
    margin-bottom: 16px;
}
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

/* ── Semantic tones ─────────────────────────────────────────
   Python → tone → CSS. Cambiar implementación aquí sin tocar Python.
   ─────────────────────────────────────────────────────────── */
.tone-danger  { color: var(--red-600); }
.tone-warning { color: var(--yellow-600); }
.tone-success { color: var(--green-600); }
.tone-neutral { color: var(--gray-500); }
.tone-brand   { color: var(--brand-600); }

/* ── Badge-dot por tone ──────────────────────────────────── */
.badge-dot-success { background: var(--green-500); }
.badge-dot-warning { background: var(--yellow-400); }
.badge-dot-danger  { background: var(--red-500); }
.badge-dot-neutral { background: var(--gray-400); }

/* ── Pulse animation (repricing tab indicators) ──────────── */
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(1.4)} }
.tab-pulse { width:7px;height:7px;border-radius:50%;background:#dc2626;display:inline-block;margin-left:6px;animation:pulse-dot 1.4s ease-in-out infinite;vertical-align:middle }

/* ── Catalog badge variants ──────────────────────────────── */
.catalog-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 5px;
}
.catalog-badge-success  { background: #f0fdf4; color: #059669; border: 1px solid #86efac; font-size: 12px; font-weight: 700; }
.catalog-badge-verified { background: #eff6ff; color: #2563eb; border: 1px solid #93c5fd; }
.catalog-badge-warning  { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; font-size: 11px; }
.catalog-badge-pending  { background: var(--gray-100); color: var(--gray-400); border: 1px solid var(--gray-200); font-size: 11px; }

/* ── pcard-tag por tone (mobile product cards) ───────────── */
.pcard-tag-danger  { background: var(--red-50);    color: var(--red-700);    border: 1px solid var(--red-100); }
.pcard-tag-warning { background: var(--yellow-50); color: var(--yellow-600); border: 1px solid var(--yellow-100); }
.pcard-tag-neutral { background: var(--gray-100);  color: var(--gray-500);   border: 1px solid var(--gray-200); }

/* ══════════════════════════════════════════════════════════
   WORKSPACE SYSTEM — Fase 6 (2026-05-26)
   Clases compartidas por todos los módulos con layout de
   workspace: tabs, header, metric hero, timeline.
   ══════════════════════════════════════════════════════════ */

/* ── Workspace header ────────────────────────────────────── */
.ws-header { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-5); padding-bottom:var(--space-4); border-bottom:1px solid var(--gray-100); }
.ws-header-main { flex:1; min-width:0; }
.ws-back { display:inline-flex; align-items:center; gap:var(--space-1); font-size:var(--text-sm); color:var(--gray-400); text-decoration:none; margin-bottom:var(--space-2); }
.ws-back:hover { color:var(--gray-700); }
.ws-title { font-family:var(--font-display); font-size:var(--text-xl); font-weight:var(--font-bold); color:var(--gray-900); line-height:var(--leading-snug); margin:0; }
.ws-subtitle { font-size:var(--text-sm); color:var(--gray-400); margin-top:2px; }
.ws-header-actions { display:flex; align-items:center; gap:var(--space-2); flex-shrink:0; padding-top:var(--space-5); }

/* ── Review bar ──────────────────────────────────────────── */
.ws-review-bar { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); background:var(--brand-50); border:1px solid var(--brand-100); border-radius:var(--radius-card); padding:var(--space-2) var(--space-4); margin-bottom:var(--space-4); }

/* ── Tab nav ─────────────────────────────────────────────── */
.ws-tabs { display:flex; gap:0; border-bottom:2px solid var(--gray-100); margin-bottom:var(--space-5); overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.ws-tabs::-webkit-scrollbar { display:none; }
.ws-tab { padding:var(--space-2) var(--space-4); font-size:var(--text-sm); font-weight:var(--font-semibold); color:var(--gray-400); cursor:pointer; border:none; border-bottom:2px solid transparent; margin-bottom:-2px; background:none; white-space:nowrap; transition:color .12s, border-color .12s; }
.ws-tab:hover { color:var(--gray-700); }
.ws-tab.active { color:var(--brand-600); border-bottom-color:var(--brand-600); }
.ws-tab-count { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:var(--radius-full); background:var(--gray-200); color:var(--gray-600); font-size:10px; margin-left:4px; }
.ws-panel { display:none; }
.ws-panel.active { display:block; }

/* ── Info grid 2 columnas ────────────────────────────────── */
.ws-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); margin-bottom:var(--space-4); }
@media (max-width:768px) { .ws-grid { grid-template-columns:1fr; } }
.ws-divider { margin-top:var(--space-4); padding-top:var(--space-4); border-top:1px solid var(--gray-100); }

/* ── Metric hero (porcentaje o valor grande destacado) ───── */
.metric-hero { background:var(--surface-subtle); border-radius:var(--radius-card); padding:var(--space-5); margin-bottom:var(--space-4); text-align:center; }
.metric-hero-value { font-family:var(--font-display); font-size:var(--text-3xl); font-weight:var(--font-bold); line-height:var(--leading-tight); }
.metric-hero-label { font-size:var(--text-sm); color:var(--gray-400); font-weight:var(--font-medium); text-transform:uppercase; letter-spacing:.06em; margin-top:2px; }
.metric-hero-sub { font-size:var(--text-md); color:var(--gray-600); margin-top:var(--space-1); }

/* ── Definition list de breakdown (precios, márgenes) ────── */
.breakdown-dl { display:grid; grid-template-columns:auto 1fr; gap:4px var(--space-4); font-size:var(--text-sm); margin-bottom:var(--space-4); }
.breakdown-dl dt { color:var(--gray-500); }
.breakdown-dl dd { text-align:right; margin:0; }

/* ── Vertical timeline (historial de costos, auditoría) ──── */
.v-timeline { display:flex; flex-direction:column; padding-left:var(--space-4); border-left:2px solid var(--gray-200); }
.v-event { position:relative; padding:0 0 var(--space-4) var(--space-4); }
.v-event-dot { position:absolute; left:-9px; top:4px; width:16px; height:16px; border-radius:var(--radius-full); background:var(--surface-base); border:2px solid var(--gray-300); }
.v-event-latest .v-event-dot { border-color:var(--brand-500); background:var(--brand-500); }
.v-event-amount { font-size:var(--text-lg); font-weight:var(--font-bold); color:var(--gray-900); }
.v-event-meta { display:flex; gap:var(--space-3); font-size:var(--text-sm); color:var(--gray-400); margin-top:2px; flex-wrap:wrap; }
.v-event-tag { background:var(--surface-subtle); border-radius:var(--radius-sm); padding:1px 6px; font-size:var(--text-xs); }

/* ══════════════════════════════════════════════════════════
   WORKSPACE PRIMITIVES — Fase 6.5 (2026-05-26)
   ws-field, ws-form-section, ws-stat-row, ws-kpi-strip,
   ws-stack.
   ══════════════════════════════════════════════════════════ */

/* ── ws-stack — apilamiento vertical con gap configurable ── */
.ws-stack    { display:flex; flex-direction:column; gap:var(--space-4); }
.ws-stack-sm { display:flex; flex-direction:column; gap:var(--space-2); }
.ws-stack-lg { display:flex; flex-direction:column; gap:var(--space-6); }

/* ── ws-field — campo de formulario con label y hint ─────── */
.ws-field { display:flex; flex-direction:column; gap:var(--space-1); }
.ws-field-label { font-size:var(--text-sm); font-weight:var(--font-medium); color:var(--gray-700); }
.ws-field-required { color:var(--red-500); margin-left:2px; }
.ws-input { width:100%; padding:var(--space-2) var(--space-3); font-size:var(--text-md); border:1px solid var(--gray-200); border-radius:var(--radius-sm); background:var(--surface-base); color:var(--gray-900); transition:border-color .12s; }
.ws-input:focus { outline:none; border-color:var(--brand-500); }
.ws-input:disabled { background:var(--surface-subtle); color:var(--gray-400); cursor:not-allowed; }
.ws-field-hint { font-size:var(--text-xs); color:var(--gray-400); }
.ws-field-disabled .ws-field-label { color:var(--gray-400); }

/* ── ws-form-section — agrupador de campos con título ─────── */
.ws-form-section { display:flex; flex-direction:column; gap:var(--space-3); padding:var(--space-4); background:var(--surface-base); border:1px solid var(--gray-100); border-radius:var(--radius-card); }
.ws-form-section-header { border-bottom:1px solid var(--gray-100); padding-bottom:var(--space-3); }
.ws-form-section-title { font-size:var(--text-sm); font-weight:var(--font-semibold); color:var(--gray-700); }
.ws-form-section-hint { font-size:var(--text-xs); color:var(--gray-400); margin-top:2px; }
.ws-form-section-body { display:flex; flex-direction:column; gap:var(--space-3); }

/* ── ws-stat-row — fila label/valor para paneles info ─────── */
.ws-stat-row { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding:var(--space-2) 0; border-bottom:1px solid var(--gray-100); }
.ws-stat-row:last-child { border-bottom:none; }
.ws-stat-label { font-size:var(--text-sm); color:var(--gray-500); }
.ws-stat-value { font-size:var(--text-sm); font-weight:var(--font-semibold); color:var(--gray-900); }

/* ── ws-kpi-strip — strip horizontal de KPIs pequeños ─────── */
.ws-kpi-strip { display:flex; gap:var(--space-1); flex-wrap:wrap; padding:var(--space-3) var(--space-4); background:var(--surface-subtle); border-radius:var(--radius-card); }
.ws-kpi-item { display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-3); background:var(--surface-base); border-radius:var(--radius-sm); flex:1; min-width:120px; }
.ws-kpi-value { font-size:var(--text-md); font-weight:var(--font-semibold); color:var(--gray-900); }
.ws-kpi-label { font-size:var(--text-xs); color:var(--gray-400); }

/* ═══════════════════════════════════════════════════════════════
   FASE 7 — VISUAL SURFACE SYSTEM (2026-05-26)
   .ws-bento   — grid 12 columnas global
   .ws-col-*   — column spans
   .ws-card    — surface workspace con overflow:clip
   .ws-glass   — gradient card brand azul
   ═══════════════════════════════════════════════════════════════ */

/* ─── WS BENTO GRID ─── */
.ws-bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-4);
    align-items: start;
    /* dense: cuando una card condicional no se renderiza (sin datos), las cards
       siguientes rellenan el hueco en vez de dejar un espacio muerto en el grid. */
    grid-auto-flow: row dense;
}
.ws-bento > * { min-width: 0; }

.ws-col-1  { grid-column: span 1;  }
.ws-col-2  { grid-column: span 2;  }
.ws-col-3  { grid-column: span 3;  }
.ws-col-4  { grid-column: span 4;  }
.ws-col-5  { grid-column: span 5;  }
.ws-col-6  { grid-column: span 6;  }
.ws-col-7  { grid-column: span 7;  }
.ws-col-8  { grid-column: span 8;  }
.ws-col-9  { grid-column: span 9;  }
.ws-col-10 { grid-column: span 10; }
.ws-col-11 { grid-column: span 11; }
.ws-col-12 { grid-column: span 12; }

@media (max-width: 1024px) {
    .ws-col-1,.ws-col-2,.ws-col-3,.ws-col-4,.ws-col-5,.ws-col-6,
    .ws-col-7,.ws-col-8,.ws-col-9,.ws-col-10,.ws-col-11,.ws-col-12
    { grid-column: span 12; }
}
@media (min-width: 640px) and (max-width: 1024px) {
    .ws-col-3, .ws-col-4, .ws-col-6 { grid-column: span 6; }
}

/* ─── WS CARD ─── */
.ws-card {
    background: var(--surface-base);
    border-radius: var(--radius-card);
    border: 1px solid var(--border-subtle);
    padding: var(--card-p);
    box-shadow: var(--shadow-xs);
    position: relative;
    overflow: hidden;
    overflow: clip;
    transition: box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.ws-card-hover {
    cursor: pointer;
}
.ws-card-hover:hover {
    box-shadow: var(--shadow-card);
    border-color: rgba(0,135,194,0.18);
}
.ws-card-header   { margin-bottom: var(--space-3); }
.ws-card-title    { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--gray-700); }
.ws-card-subtitle { font-size: var(--text-xs); color: var(--gray-400); margin-top: 2px; }

/* ─── WS GLASS ─── */
.ws-glass {
    background: var(--brand-700, #005f8e);
    background: linear-gradient(135deg, var(--brand-700, #005f8e) 0%, var(--brand-500, #009ee3) 100%);
    border-radius: var(--radius-card);
    border: 1px solid rgba(255,255,255,0.12);
    padding: var(--card-p);
    position: relative;
    overflow: hidden;
    overflow: clip;
    color: white;
    box-shadow: 0 8px 32px rgba(0,107,161,0.20);
}

/* ─── FEATURE SOLID — card/KPI destacada en azul de marca (modificador, R2) ─── */
.feature-solid { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.feature-solid .kpi-label, .feature-solid .kpi-sub, .feature-solid .ft-kpi-label, .feature-solid .metric-hero-label { color: rgba(255,255,255,0.85); }
.feature-solid .kpi-value, .feature-solid .ft-kpi-value, .feature-solid .metric-hero-value { color: #fff; }
.feature-solid .kpi-icon, .feature-solid .ft-kpi-icon { background: rgba(255,255,255,0.18); color: #fff; }

/* ══════════════════════════════════════════════════════════════
   PILL BADGE — semáforo / status compactos (2026-05-27)
   Reemplaza los inline-flex con HEX literales que se repetían
   en stock, posventa, ads, performance.
   Uso: <span class="pill pill-danger"><span class="pill-dot"></span>18d</span>
   ══════════════════════════════════════════════════════════════ */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 12px;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    white-space: nowrap;
    line-height: 1.2;
}
.pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.pill-danger  { background: var(--red-50);    color: var(--red-700); }
.pill-warning { background: var(--yellow-50); color: var(--yellow-600); }
.pill-success { background: var(--green-50);  color: var(--green-700); }
.pill-neutral { background: var(--gray-100);  color: var(--gray-500); }
.pill-brand   { background: var(--brand-50);  color: var(--brand-600); }

/* ── FILTER PILL con conteo — Todos 1248 / Crítico 112 (R2) ── */
.count-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--gray-600); background: var(--surface-base); border: 1px solid var(--gray-200); cursor: pointer; transition: all 0.12s var(--ease); white-space: nowrap; }
.count-pill:hover { border-color: var(--brand-400); color: var(--brand-600); }
.count-pill.active { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.count-pill-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-full); background: var(--gray-100); color: var(--gray-600); font-size: 10px; font-weight: var(--font-bold); }
.count-pill.active .count-pill-count { background: rgba(255,255,255,0.25); color: #fff; }

/* ══════════════════════════════════════════════════════════════
   TAB NAV reusable (no workspace) — 2026-05-27
   Para tabs de página: /posventa, /performance, /finance.
   Scroll horizontal automático en mobile.
   Uso: {{ tab_nav(tabs, current=tab) }}
   ══════════════════════════════════════════════════════════════ */
.tab-nav {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--gray-200);
    margin-bottom: 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.tab-nav::-webkit-scrollbar { display: none; }
.tab-nav-item {
    text-decoration: none;
    padding: 8px 16px;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    border-radius: 6px 6px 0 0;
    color: var(--gray-500);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: -2px;
    border: 2px solid transparent;
    transition: color .12s, background .12s;
}
.tab-nav-item.active {
    background: var(--surface-base, white);
    border-color: var(--gray-200);
    border-bottom-color: var(--surface-base, white);
    color: var(--brand-600);
}
.tab-nav-item:hover:not(.active) {
    color: var(--gray-700);
}
.tab-nav-badge {
    background: var(--red-500);
    color: white;
    border-radius: 10px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: var(--font-semibold);
    margin-left: 2px;
}
.tab-nav-badge-neutral { background: var(--gray-400); }
.tab-nav-badge-warning { background: var(--yellow-500); }

/* ══════════════════════════════════════════════════════════════
   BAR (progreso/% inline, sin Chart.js)
   Uso: <div class="bar-bg"><div class="bar-fill bar-fill-danger" style="width:42%"></div></div>
   ══════════════════════════════════════════════════════════════ */
.bar-bg {
    display: inline-block;
    width: 80px;
    background: var(--gray-100);
    border-radius: 4px;
    height: 14px;
    position: relative;
    overflow: hidden;
    vertical-align: middle;
}
.bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
}
.bar-fill-danger  { background: var(--red-500); }
.bar-fill-warning { background: var(--yellow-500); }
.bar-fill-success { background: var(--green-500); }
.bar-fill-brand   { background: var(--brand-500); }
.bar-fill-neutral { background: var(--gray-400); }

/* ══════════════════════════════════════════════════════════════
   MOBILE — densidad de KPI grid en pantallas chicas
   Hasta 480px: 2 cols, padding y tipografía reducidas.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .kpi { padding: 12px 10px; }
    .kpi-value { font-size: 20px; }
    .kpi-label { font-size: 11px; }
    /* Tab nav más denso en mobile */
    .tab-nav-item { padding: 6px 10px; font-size: 12px; }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE — Fixes globales (auditoría 2026-05-27)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    /* Bulk action bars no deben desbordar el viewport */
    #bulk-actions, #bulk-bar-raise, #bulk-bar-lower {
        min-width: 0 !important;
        left: 8px !important;
        right: 8px !important;
        transform: none !important;
        width: auto !important;
    }
    /* Header actions: forzar wrap si hay varios botones */
    .page-header-actions { flex-wrap: wrap; gap: 6px; }
    /* Tabla genérica con scroll horizontal — fallback si falta wrapper */
    .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    /* Hero greeting del dashboard no se atasca */
    .dash-greeting { font-size: 18px !important; }

    /* ── I7: fixes adicionales para stock/finance/questions/posventa/branches ── */

    /* Cards sin padding (envolturas de tabla): forzar scroll horizontal */
    .card[style*="padding:0"],
    .card[style*="padding: 0"] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Touch targets: botones >= 44x44 (WCAG 2.5.5) */
    .btn { min-height: 40px; }
    .btn-sm { min-height: 36px; }
    .btn-xs { min-height: 30px; }
    /* Inputs/selects de tamaño cómodo para mobile (evitar zoom iOS también: font-size >= 16px) */
    input[type="text"], input[type="number"], input[type="email"], input[type="password"],
    input[type="search"], input[type="tel"], input[type="date"],
    select, textarea {
        min-height: 40px;
        font-size: 16px !important;
    }

    /* Filter bars: stack vertical y full-width */
    .filter-bar { gap: 6px; padding: 8px 12px; }
    .filter-bar > * { flex: 1 1 calc(50% - 4px); min-width: 0; }

    /* Tablas: padding más compacto */
    table.table th, table.table td { padding: 8px 10px; font-size: 12px; }

    /* questions.html: textarea de respuesta no debe quedar tapado por el teclado virtual */
    textarea[name="answer_text"], textarea#answer-text {
        scroll-margin-bottom: 120px;
    }

    /* Forms en 2 columnas: colapsar a 1 col en mobile (común en branches, traslados, etc.) */
    .form-grid-2,
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   R3 — COMPONENTES NUEVOS (restyle reusable)
   Gráfico de barras server-side · stock bar por nivel · CTA card.
   Solo datos reales (weekly_bars, presenters de stock, daily_insight).
   ══════════════════════════════════════════════════════════════ */

/* ── Gráfico de barras (server-side, sin JS). Clases .chart-* propias
      para no colisionar con el .bar-fill horizontal del progreso inline ── */
.chart-bars { display: flex; align-items: flex-end; gap: 6px; height: 96px; }
.chart-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; min-width: 0; }
.chart-bar-track { width: 100%; flex: 1; display: flex; align-items: flex-end; }
.chart-bar-fill { width: 100%; border-radius: var(--radius-sm) var(--radius-sm) 0 0; min-height: 4px; background: var(--brand-100); transition: height .4s var(--ease); }
.chart-bar-fill.is-highlight { background: var(--brand-500); }
.chart-bar-value { font-size: 10px; color: var(--gray-500); font-weight: var(--font-semibold); }
.chart-bar-label { font-size: var(--text-xs); color: var(--gray-400); font-weight: var(--font-medium); white-space: nowrap; }

/* ── Stock bar por nivel (label + barra) — reusa .bar-bg/.bar-fill-* ── */
.stockbar { display: inline-flex; align-items: center; gap: 8px; }
.stockbar .bar-bg { width: 64px; }
.stockbar-label { font-size: var(--text-xs); font-weight: var(--font-semibold); white-space: nowrap; }

/* ── CTA card — reusa .ws-glass (gradiente brand, texto blanco) ── */
.cta-card { display: flex; gap: 14px; align-items: flex-start; }
.cta-card-icon { width: 40px; height: 40px; border-radius: var(--radius-full); background: rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; }
.cta-card-body { flex: 1; min-width: 0; }
.cta-card-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--font-bold); color: #fff; }
.cta-card-text { font-size: var(--text-sm); color: rgba(255,255,255,0.88); margin-top: 4px; line-height: var(--leading-normal); }
.cta-card-btn { background: #fff; color: var(--brand-700); margin-top: 12px; font-weight: var(--font-semibold); }
.cta-card-btn:hover { background: rgba(255,255,255,0.92); color: var(--brand-700); }