/* ══════════════════════════════════════════════════════════════════════
   theme-staff.css  ·  MyBox Pack  ·  REDISEÑO v3 — TEMA BLANCO VIBRANTE
   Layout: rail de íconos (gradiente de marca) + bento grid + acciones rápidas.
   Fondo blanco con gradientes de color suaves (sin tráiler).
   SOLO admin / sucursal → body.staff-theme. Clientes conservan su diseño.
   ⚠️ SOLO DISEÑO. No cambia IDs, ni JS, ni comportamiento.
   Cárgalo AL FINAL de los CSS en index.html.
   ══════════════════════════════════════════════════════════════════════ */
.staff-theme {
    --s-bg:#f4f7fc;                 /* fondo base muy claro */
    --s-card:#ffffff;               /* tarjetas blancas */
    --s-card-2:#fbfcff;
    --s-border:#e6ecf5;
    --s-border-hi:#cdddf5;
    --s-ink:#1e293b;                /* texto principal */
    --s-dim:#5b6b85;                /* texto secundario */
    --s-mut:#94a3b8;                /* texto tenue */
    --s-brand:#2a6da8;              /* azul MyBox */
    --s-brand-2:#3b96f0;
    --s-violet:#7c5cff;
    --s-cyan:#06b6d4;
    --s-amber:#f59e0b;
    --s-emerald:#10b981;
    --s-red:#e11d48;
    --s-pink:#ec4899;
    --s-grad-brand:linear-gradient(160deg,#3b96f0 0%,#2a6da8 45%,#7c5cff 100%);
    --s-shadow:0 4px 16px rgba(37,99,235,.06), 0 1px 3px rgba(15,23,42,.05);
    --s-shadow-hi:0 14px 40px rgba(37,99,235,.14), 0 4px 12px rgba(15,23,42,.06);
}

/* ═══ 1) FONDO blanco con gradientes de color suaves ═══ */
.staff-theme .app-layout { position: relative; }
.staff-theme .app-layout::before {
    content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(760px 520px at 8% 4%, rgba(59,150,240,.14), transparent 60%),
        radial-gradient(700px 520px at 98% 6%, rgba(124,92,255,.13), transparent 60%),
        radial-gradient(720px 560px at 82% 96%, rgba(6,182,212,.12), transparent 62%),
        radial-gradient(680px 520px at 12% 92%, rgba(236,72,153,.08), transparent 60%),
        var(--s-bg);
}
.staff-theme .app-sidebar,
.staff-theme .app-content-wrap,
.staff-theme .sb-overlay { position: relative; z-index: 1; }
.staff-theme,
.staff-theme .app-layout,
.staff-theme .app-content-wrap { background: transparent !important; color: var(--s-ink); }
.staff-theme .app-content { background: transparent !important; }
.staff-theme ::-webkit-scrollbar { width: 10px; height: 10px; }
.staff-theme ::-webkit-scrollbar-track { background: rgba(203,221,245,.25); }
.staff-theme ::-webkit-scrollbar-thumb { background: rgba(59,150,240,.35); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.staff-theme ::-webkit-scrollbar-thumb:hover { background: rgba(59,150,240,.55); background-clip: padding-box; }

/* ═══ 2) RAIL DE ÍCONOS con gradiente de marca (expande al hover) ═══ */
.staff-theme .app-sidebar {
    width: 78px !important; min-width: 78px !important;
    background: var(--s-grad-brand) !important;
    border-right: none !important;
    box-shadow: 6px 0 24px rgba(42,109,168,.18);
    transition: width .28s cubic-bezier(.16,1,.3,1), min-width .28s cubic-bezier(.16,1,.3,1);
    overflow: visible;
}
.staff-theme .app-sidebar:hover { width: 236px !important; min-width: 236px !important; box-shadow: 22px 0 60px rgba(42,109,168,.35); }
.staff-theme .app-sidebar::before { display: none !important; } /* quitar overlay oscuro previo */
.staff-theme .app-sidebar .sb-logo-text,
.staff-theme .app-sidebar .sb-nav-label,
.staff-theme .app-sidebar .sb-section-title,
.staff-theme .app-sidebar .sb-user-info,
.staff-theme .app-sidebar .sos-sidebar-badge {
    opacity: 0; width: 0; overflow: hidden; white-space: nowrap; transition: opacity .18s ease;
}
.staff-theme .app-sidebar:hover .sb-logo-text,
.staff-theme .app-sidebar:hover .sb-nav-label,
.staff-theme .app-sidebar:hover .sb-section-title,
.staff-theme .app-sidebar:hover .sb-user-info,
.staff-theme .app-sidebar:hover .sos-sidebar-badge { opacity: 1; width: auto; }
.staff-theme .app-sidebar .sb-nav-link { justify-content: center; padding: 12px 0; margin: 3px 12px; border-radius: 12px; position: relative; }
.staff-theme .app-sidebar:hover .sb-nav-link { justify-content: flex-start; padding: 12px 16px; }
.staff-theme .app-sidebar .sb-nav-icon { margin-right: 0; }
.staff-theme .app-sidebar:hover .sb-nav-icon { margin-right: 14px; }
.staff-theme .app-sidebar .sb-logo { justify-content: center; padding: 18px 0 12px; }
.staff-theme .app-sidebar:hover .sb-logo { justify-content: flex-start; padding: 18px 20px 12px; }
.staff-theme .app-sidebar .sb-user { justify-content: center; padding: 14px 0; }
.staff-theme .app-sidebar:hover .sb-user { justify-content: flex-start; padding: 14px 20px; }
.staff-theme .sb-toggle { display: none !important; }
/* logo en chip blanco para que resalte sobre el gradiente */
.staff-theme .sb-logo { border-bottom: 1px solid rgba(255,255,255,.18) !important; }
.staff-theme .sb-logo-img { background: #fff; border-radius: 8px; padding: 5px; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.staff-theme .sb-logo-text { color: #fff !important; letter-spacing: .12em; }
.staff-theme .sb-section-title { color: rgba(255,255,255,.6) !important; }
.staff-theme .sb-divider { background: rgba(255,255,255,.18) !important; }
.staff-theme .sb-nav-link { color: rgba(255,255,255,.85) !important; transition: all .2s cubic-bezier(.16,1,.3,1); }
.staff-theme .sb-nav-link:hover { background: rgba(255,255,255,.16) !important; color: #fff !important; }
.staff-theme .sb-nav-link.active { background: rgba(255,255,255,.95) !important; color: var(--s-brand) !important; box-shadow: 0 4px 14px rgba(0,0,0,.14); }
.staff-theme .sb-nav-link.active .sb-nav-icon { color: var(--s-brand) !important; }
.staff-theme .sb-user { border-top: 1px solid rgba(255,255,255,.18) !important; }
.staff-theme .sb-user-avatar { background: #fff !important; color: var(--s-brand) !important; font-weight: 800; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.staff-theme .sb-user-name { color: #fff !important; }
.staff-theme .sb-user-role { color: rgba(255,255,255,.7) !important; }

/* ═══ 3) TOPBAR blanca ═══ */
.staff-theme .app-topbar {
    background: rgba(255,255,255,.78) !important;
    border-bottom: 1px solid var(--s-border) !important;
    backdrop-filter: blur(14px);
    box-shadow: 0 1px 0 rgba(15,23,42,.03);
}
.staff-theme .topbar-title { color: var(--s-ink) !important; }
.staff-theme .sb-hamburger { color: var(--s-brand) !important; }
.staff-theme .btn-new { background: var(--s-grad-brand) !important; color: #fff !important; border: none !important; box-shadow: 0 6px 18px rgba(59,150,240,.3); }
.staff-theme .btn-new:hover { filter: brightness(1.06); transform: translateY(-1px); }
.staff-theme .btn-bulk-topbar { background: #fff !important; color: var(--s-brand) !important; border: 1px solid var(--s-border-hi) !important; box-shadow: var(--s-shadow); }
.staff-theme .btn-bulk-topbar:hover { background: #f0f6ff !important; border-color: var(--s-brand-2) !important; }
.staff-theme #btn-dhl-bulk-topbar { background: linear-gradient(135deg,#e11d48,#f43f5e) !important; color:#fff !important; border: none !important; box-shadow: 0 6px 18px rgba(225,29,72,.28); }
.staff-theme .topbar-user-pill { background: #fff !important; border: 1px solid var(--s-border) !important; box-shadow: var(--s-shadow); }
.staff-theme .topbar-name { color: var(--s-ink) !important; }
.staff-theme .topbar-avatar { background: var(--s-grad-brand) !important; color: #fff !important; }
.staff-theme .topbar-badge { background: rgba(59,150,240,.12) !important; color: var(--s-brand) !important; }
.staff-theme .btn-topbar-out { background: rgba(225,29,72,.08) !important; color: var(--s-red) !important; border: 1px solid rgba(225,29,72,.2) !important; }
.staff-theme .notif-bell-btn { background: #fff !important; color: var(--s-brand) !important; border: 1px solid var(--s-border-hi) !important; }
.staff-theme .notif-dropdown { background: #fff !important; border: 1px solid var(--s-border) !important; box-shadow: var(--s-shadow-hi) !important; color: var(--s-ink); }

/* ═══ 4) DASHBOARD greeting ═══ */
.staff-theme .dash-ent-title {
    color: var(--s-ink) !important;
    background: linear-gradient(90deg, var(--s-brand), var(--s-violet));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.staff-theme .dash-ent-subtitle { color: var(--s-dim) !important; }
.staff-theme .meta-label { color: var(--s-mut) !important; }
.staff-theme .meta-value { color: var(--s-ink) !important; }
.staff-theme .meta-sep { background: var(--s-border) !important; }

/* ═══ 5) BENTO GRID ═══ */
.staff-theme #staff-bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: start; }
.staff-theme #staff-bento .d-metrics { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0 !important; }
.staff-theme #staff-bento .stat-card { margin: 0 !important; }
.staff-theme #staff-bento #chart-section { grid-column: span 3; margin: 0 !important; }
.staff-theme #staff-quickactions { grid-column: span 1; margin: 0 !important; }
.staff-theme #staff-bento #dash-suc-charts { grid-column: 1 / -1; margin: 0 !important; }
.staff-theme #staff-bento .table-section { grid-column: 1 / -1; margin: 0 !important; }

/* Tarjetas blancas */
.staff-theme .stat-card,
.staff-theme .ent-panel,
.staff-theme #staff-quickactions {
    background: var(--s-card) !important; border: 1px solid var(--s-border) !important;
    box-shadow: var(--s-shadow) !important; border-radius: 18px !important;
    transition: transform .25s cubic-bezier(.16,1,.3,1), border-color .25s, box-shadow .25s;
    position: relative; overflow: hidden;
}
/* barra de color superior en cada KPI */
.staff-theme #staff-bento .stat-card { padding-top: 24px !important; }
.staff-theme #staff-bento .stat-card::after {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 18px 18px 0 0;
}
.staff-theme #staff-bento .stat-card:nth-child(1)::after { background: linear-gradient(90deg,#3b96f0,#2a6da8); }
.staff-theme #staff-bento .stat-card:nth-child(2)::after { background: linear-gradient(90deg,#f59e0b,#ef4444); }
.staff-theme #staff-bento .stat-card:nth-child(3)::after { background: linear-gradient(90deg,#10b981,#06b6d4); }
.staff-theme #staff-bento .stat-card:nth-child(4)::after { background: linear-gradient(90deg,#7c5cff,#ec4899); }
.staff-theme .stat-card:hover,
.staff-theme .ent-panel:hover { transform: translateY(-4px); border-color: var(--s-border-hi) !important; box-shadow: var(--s-shadow-hi) !important; }

/* KPI internos */
.staff-theme .stat-label, .staff-theme .m-lab { color: var(--s-dim) !important; }
.staff-theme .stat-value, .staff-theme .m-val { color: var(--s-ink) !important; }
.staff-theme #staff-bento .stat-card:nth-child(1) .m-val { color: var(--s-brand) !important; }
.staff-theme #staff-bento .stat-card:nth-child(2) .m-val { color: var(--s-red) !important; }
.staff-theme #staff-bento .stat-card:nth-child(3) .m-val { color: var(--s-emerald) !important; }
.staff-theme #staff-bento .stat-card:nth-child(4) .m-val { color: var(--s-violet) !important; }
.staff-theme .stat-period { background: rgba(59,150,240,.1) !important; color: var(--s-brand) !important; border: 1px solid var(--s-border-hi) !important; }
.staff-theme .stat-foot-text { color: var(--s-mut) !important; }
.staff-theme .stat-icon.m-b { background: rgba(59,150,240,.14) !important; color: var(--s-brand-2) !important; }
.staff-theme .stat-icon.m-r { background: rgba(239,68,68,.13) !important; color: var(--s-red) !important; }
.staff-theme .stat-icon.m-g { background: rgba(16,185,129,.14) !important; color: var(--s-emerald) !important; }
.staff-theme .stat-icon.m-a { background: rgba(124,92,255,.14) !important; color: var(--s-violet) !important; }

/* Paneles */
.staff-theme .ent-panel-title, .staff-theme .chart-title-text { color: var(--s-ink) !important; }
.staff-theme .ent-panel-sub { color: var(--s-dim) !important; }
.staff-theme .chart-legend { color: var(--s-dim) !important; }

/* ═══ 6) ACCIONES RÁPIDAS ═══ */
.staff-theme #staff-quickactions { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.staff-theme #staff-quickactions .qa-title { font-weight: 700; font-size: 1rem; color: var(--s-ink); margin-bottom: 2px; }
.staff-theme #staff-quickactions .qa-item {
    display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px;
    background: var(--s-card-2); border: 1px solid var(--s-border);
    cursor: pointer; transition: .2s; text-align: left; font-family: inherit; color: var(--s-ink); width: 100%;
}
.staff-theme #staff-quickactions .qa-item:hover { background: #eef5ff; border-color: var(--s-border-hi); transform: translateX(3px); box-shadow: var(--s-shadow); }
.staff-theme #staff-quickactions .qa-item:nth-child(2) .qa-ico { background: rgba(59,150,240,.14); color: var(--s-brand-2); }
.staff-theme #staff-quickactions .qa-item:nth-child(3) .qa-ico { background: rgba(16,185,129,.14); color: var(--s-emerald); }
.staff-theme #staff-quickactions .qa-item:nth-child(4) .qa-ico { background: rgba(225,29,72,.12); color: var(--s-red); }
.staff-theme #staff-quickactions .qa-item:nth-child(5) .qa-ico { background: rgba(124,92,255,.14); color: var(--s-violet); }
.staff-theme #staff-quickactions .qa-ico { width: 36px; height: 36px; border-radius: 10px; background: rgba(59,150,240,.12); display: flex; align-items: center; justify-content: center; color: var(--s-brand); flex-shrink: 0; }
.staff-theme #staff-quickactions .qa-ico svg { width: 18px; height: 18px; stroke-width: 1.9; fill: none; stroke: currentColor; }
.staff-theme #staff-quickactions .qa-txt b { font-size: .85rem; display: block; color: var(--s-ink); }
.staff-theme #staff-quickactions .qa-txt small { color: var(--s-mut); font-size: .72rem; }

/* ═══ 7) TABLA ═══ */
.staff-theme .ship-table thead th { background: #f2f7ff !important; color: var(--s-dim) !important; border-bottom: 1px solid var(--s-border) !important; }
.staff-theme .ship-table tbody td { color: var(--s-ink) !important; border-bottom: 1px solid var(--s-border) !important; }
.staff-theme .ship-table tbody tr:hover { background: #f6faff !important; }
.staff-theme .table-empty, .staff-theme .te-desc { color: var(--s-mut) !important; }
.staff-theme .te-title { color: var(--s-dim) !important; }
.staff-theme .te-icon { color: var(--s-border-hi) !important; }
.staff-theme .page-info { color: var(--s-mut) !important; }
.staff-theme .page-btn { background: #fff !important; color: var(--s-brand) !important; border: 1px solid var(--s-border-hi) !important; }
.staff-theme .page-btn:not(:disabled):hover { background: #eef5ff !important; }
.staff-theme .page-btn:disabled { opacity: .4; }

/* ═══ 8) OTRAS PÁGINAS ═══ */
.staff-theme .app-content input:not([type="checkbox"]):not([type="radio"]),
.staff-theme .app-content select,
.staff-theme .app-content textarea { background: #fff !important; border: 1px solid var(--s-border-hi) !important; color: var(--s-ink) !important; }
.staff-theme .app-content input::placeholder,
.staff-theme .app-content textarea::placeholder { color: var(--s-mut) !important; }
.staff-theme .app-content input:focus,
.staff-theme .app-content select:focus,
.staff-theme .app-content textarea:focus { border-color: var(--s-brand-2) !important; box-shadow: 0 0 0 3px rgba(59,150,240,.15) !important; outline: none; }
.staff-theme .app-content h1, .staff-theme .app-content h2,
.staff-theme .app-content h3, .staff-theme .app-content h4 { color: var(--s-ink); }

/* ═══ 9) RESPONSIVE ═══ */
@media (max-width: 1100px) {
    .staff-theme #staff-bento { grid-template-columns: repeat(2, 1fr); }
    .staff-theme #staff-bento .d-metrics { grid-template-columns: repeat(2, 1fr); }
    .staff-theme #staff-bento #chart-section { grid-column: 1 / -1; }
    .staff-theme #staff-quickactions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
    .staff-theme #staff-quickactions .qa-item { flex: 1 1 45%; }
}
@media (max-width: 640px) {
    .staff-theme #staff-bento { grid-template-columns: 1fr; }
    .staff-theme #staff-bento .d-metrics { grid-template-columns: 1fr; }
    .staff-theme #staff-bento .stat-card { grid-column: 1 / -1; }
    .staff-theme #staff-quickactions .qa-item { flex: 1 1 100%; }
    .staff-theme .app-sidebar { width: 260px !important; min-width: 260px !important; }
    .staff-theme .app-sidebar .sb-nav-label,
    .staff-theme .app-sidebar .sb-section-title,
    .staff-theme .app-sidebar .sb-user-info,
    .staff-theme .app-sidebar .sb-logo-text { opacity: 1 !important; width: auto !important; }
    .staff-theme .app-sidebar .sb-nav-link { justify-content: flex-start; padding: 12px 16px; }
    .staff-theme .app-sidebar .sb-nav-icon { margin-right: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .staff-theme .stat-card, .staff-theme .ent-panel, .staff-theme .app-sidebar { transition: none; }
}