/* ============================================================================
   STREAMIFY UI — Sistema de diseño unificado
   ----------------------------------------------------------------------------
   Fuente única de verdad visual para TODA la aplicación: landing pública,
   tienda, panel administrativo, Donna y correos.

   Estructura tomada del artefacto "Streamify Metrics" (tipografía editorial,
   tarjetas de 12px, bordes finos de 1px, micro-etiquetas en versalitas,
   números tabulares, dark mode por tokens) con la PALETA DE MARCA Streamify
   (azul #274698, dorado #E4B100, rojo #D41216, tinta #1D1D1B).

   ORDEN DE CARGA: este archivo se carga SIEMPRE al final, después de
   Bootstrap / styles.css / styles2.css / themes.css, para poder reescribir
   los componentes heredados sin usar !important salvo donde es inevitable.

   Se divide en cuatro capas:
     1. TOKENS           — variables de diseño (lo único que se debería tocar)
     2. BASE             — tipografía y ritmo del documento
     3. PUENTE BOOTSTRAP — reescribe .btn/.card/.table/.modal/... heredados
     4. COMPONENTES SF   — primitivas nuevas (.sf-*) para vistas nuevas
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
    /* --- Marca ------------------------------------------------------------ */
    --sf-brand:          #274698;   /* azul corporativo — acción primaria     */
    --sf-brand-strong:   #1d3576;   /* hover / pressed                        */
    --sf-brand-soft:     #eaeefa;   /* fondo suave de acento                  */
    --sf-brand-contrast: #ffffff;

    --sf-gold:           #E4B100;   /* dorado — destaques comerciales, promos */
    --sf-gold-strong:    #c69a00;
    --sf-gold-soft:      #fdf5db;
    --sf-gold-contrast:  #1D1D1B;

    --sf-red:            #D41216;   /* rojo — urgencia comercial, destructivo */
    --sf-red-strong:     #ad0e11;
    --sf-red-soft:       #fdeaea;
    --sf-red-contrast:   #ffffff;

    /* --- Superficies ------------------------------------------------------ */
    --sf-surface-page:   #fcfbf8;   /* fondo de página, off-white cálido      */
    --sf-surface-card:   #ffffff;   /* tarjetas y paneles                     */
    --sf-surface-sunken: #f5f3ee;   /* secciones alternas, tracks, thead      */
    --sf-surface-inverse:#1D1D1B;   /* bloques oscuros (hero, footer, CTA)    */

    /* --- Tinta ------------------------------------------------------------ */
    --sf-ink:            #1D1D1B;   /* texto principal                        */
    --sf-ink-secondary:  #575756;   /* texto de apoyo                         */
    --sf-ink-muted:      #8a8884;   /* metadatos, micro-etiquetas             */
    --sf-ink-inverse:    #f7f6f3;   /* texto sobre superficie oscura          */

    /* --- Bordes ----------------------------------------------------------- */
    --sf-border:         #e4e1d9;   /* borde estructural                      */
    --sf-border-soft:    #eeece6;   /* separador interno entre filas          */
    --sf-border-strong:  #d3cfc4;   /* inputs, foco visible                   */

    /* --- Estado ----------------------------------------------------------- */
    --sf-good:           #0f8a4d;
    --sf-good-soft:      #e6f4ec;
    --sf-warning:        #d99206;
    --sf-warning-soft:   #fdf1dc;
    --sf-critical:       #c62828;
    --sf-critical-soft:  #fbeaea;
    --sf-info:           #1a6fa8;
    --sf-info-soft:      #e7f1f8;

    /* --- Tipografía ------------------------------------------------------- */
    --sf-font-display: 'Fraunces', 'Newsreader', Georgia, 'Times New Roman', serif;
    --sf-font-sans:    'IBM Plex Sans', 'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --sf-font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace;

    --sf-text-xs:   0.72rem;
    --sf-text-sm:   0.82rem;
    --sf-text-base: 0.94rem;
    --sf-text-lg:   1.08rem;
    --sf-text-xl:   1.3rem;
    --sf-text-2xl:  1.7rem;
    --sf-text-3xl:  2.3rem;
    --sf-text-4xl:  3.1rem;

    /* --- Forma ------------------------------------------------------------ */
    --sf-radius-sm:   8px;
    --sf-radius:      12px;   /* radio canónico de tarjetas y paneles         */
    --sf-radius-lg:   18px;
    --sf-radius-pill: 999px;

    /* --- Elevación (sutil: la jerarquía la da el borde, no la sombra) ------ */
    --sf-shadow-sm: 0 1px 2px rgba(29, 29, 27, 0.05);
    --sf-shadow:    0 4px 14px rgba(29, 29, 27, 0.08);
    --sf-shadow-lg: 0 12px 34px rgba(29, 29, 27, 0.12);

    /* --- Ritmo ------------------------------------------------------------ */
    --sf-space-1: 4px;
    --sf-space-2: 8px;
    --sf-space-3: 12px;
    --sf-space-4: 16px;
    --sf-space-5: 22px;
    --sf-space-6: 32px;
    --sf-space-7: 48px;
    --sf-space-8: 72px;

    --sf-transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);
    --sf-container:  1180px;
}

/* --- Modo oscuro ----------------------------------------------------------
   Es preferencia PERSONAL de cada quien, no un ajuste global. Tres estados:
   'system' (sigue al sistema operativo, el de fábrica), 'light' y 'dark'.
   El atributo data-dark-mode que consumen estas reglas lo resuelve el script
   de partials/apariencia-esquema.blade.php antes del primer pintado.       */

/* Red de seguridad para navegadores con JavaScript desactivado: si la persona
   sigue al sistema ('system') y su sistema está en oscuro, los tokens ya se
   invierten aunque el script en línea no llegue a correr. Los componentes que
   usan tokens quedan bien; los que traen color incrustado necesitan el script. */
@media (prefers-color-scheme: dark) {
    :root[data-color-scheme="system"] {
        --sf-brand:          #7b9aed;
        --sf-brand-strong:   #9ab2f3;
        --sf-brand-soft:     #21294a;
        --sf-brand-contrast: #10131f;
        --sf-gold:           #f0c435;
        --sf-gold-soft:      #3a2f10;
        --sf-red:            #f06b6e;
        --sf-red-soft:       #3d1a1b;
        --sf-surface-page:   #16151a;
        --sf-surface-card:   #1f1e25;
        --sf-surface-sunken: #26252d;
        --sf-surface-inverse:#0f0e12;
        --sf-ink:            #edece9;
        --sf-ink-secondary:  #b6b3ad;
        --sf-ink-muted:      #8a8781;
        --sf-border:         #33323b;
        --sf-border-soft:    #2b2a32;
        --sf-border-strong:  #45444f;
        --sf-good:           #4ade80;
        --sf-good-soft:      #12301f;
        --sf-warning:        #fbbf24;
        --sf-warning-soft:   #362a10;
        --sf-critical:       #f87171;
        --sf-critical-soft:  #3a1a1a;
        --sf-info:           #60b8ec;
        --sf-info-soft:      #14293a;
    }
}

[data-dark-mode="true"],
[data-bs-theme="dark"] {
    --sf-brand:          #7b9aed;
    --sf-brand-strong:   #9ab2f3;
    --sf-brand-soft:     #21294a;
    --sf-brand-contrast: #10131f;

    --sf-gold:           #f0c435;
    --sf-gold-strong:    #f7d668;
    --sf-gold-soft:      #3a2f10;
    --sf-gold-contrast:  #17160f;

    --sf-red:            #f06b6e;
    --sf-red-strong:     #f58e90;
    --sf-red-soft:       #3d1a1b;
    --sf-red-contrast:   #1a0e0e;

    --sf-surface-page:   #16151a;
    --sf-surface-card:   #1f1e25;
    --sf-surface-sunken: #26252d;
    --sf-surface-inverse:#0f0e12;

    --sf-ink:            #edece9;
    --sf-ink-secondary:  #b6b3ad;
    --sf-ink-muted:      #8a8781;
    --sf-ink-inverse:    #edece9;

    --sf-border:         #33323b;
    --sf-border-soft:    #2b2a32;
    --sf-border-strong:  #45444f;

    --sf-good:           #4ade80;
    --sf-good-soft:      #12301f;
    --sf-warning:        #fbbf24;
    --sf-warning-soft:   #362a10;
    --sf-critical:       #f87171;
    --sf-critical-soft:  #3a1a1a;
    --sf-info:           #60b8ec;
    --sf-info-soft:      #14293a;

    --sf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sf-shadow:    0 4px 14px rgba(0, 0, 0, 0.45);
    --sf-shadow-lg: 0 12px 34px rgba(0, 0, 0, 0.55);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
body {
    font-family: var(--sf-font-sans);
    font-size: var(--sf-text-base);
    line-height: 1.6;
    color: var(--sf-ink);
    background-color: var(--sf-surface-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--sf-font-display);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.15;
    color: var(--sf-ink);
}

h1, .h1 { font-size: clamp(2rem, 4vw, var(--sf-text-4xl)); }
h2, .h2 { font-size: clamp(1.6rem, 3vw, var(--sf-text-3xl)); }
h3, .h3 { font-size: var(--sf-text-2xl); }
h4, .h4 { font-size: var(--sf-text-xl); }
h5, .h5 { font-size: var(--sf-text-lg); }
h6, .h6 { font-size: var(--sf-text-base); }

.lead { font-size: var(--sf-text-lg); color: var(--sf-ink-secondary); font-weight: 400; }
.text-muted { color: var(--sf-ink-secondary) !important; }
small, .small { font-size: var(--sf-text-sm); }

a { color: var(--sf-brand); text-decoration: none; transition: color var(--sf-transition); }
a:hover { color: var(--sf-brand-strong); }

hr { border-color: var(--sf-border); opacity: 1; }

/* Un icono dentro de un titular no debe crecer con la fuente del titular:
   con Fraunces a 3rem, un <i class="fas"> se convertia en una mancha de 50 px
   junto al texto. Lo usan dashboard, inicio, inteligencia y employee/edit. */
h1 > i, h2 > i, h3 > i,
.h1 > i, .h2 > i, .h3 > i {
    font-size: 0.55em;
    vertical-align: 0.06em;
    color: var(--sf-brand);
}

::selection { background: var(--sf-gold); color: var(--sf-gold-contrast); }

:focus-visible {
    outline: 2px solid var(--sf-brand);
    outline-offset: 2px;
    border-radius: var(--sf-radius-sm);
}

/* Números: siempre monoespaciados y tabulares — dinero, fechas, contadores.  */
.sf-num, .num, td.sf-num, .sf-money {
    font-family: var(--sf-font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* ==========================================================================
   3. PUENTE BOOTSTRAP
   Reescribe los componentes que ya usan las 204 vistas Blade existentes,
   para que hereden el sistema sin tocar su HTML.
   ========================================================================== */

/* --- Variables nativas de Bootstrap 5 ------------------------------------ */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bs-primary:        var(--sf-brand);
    --bs-primary-rgb:    39, 70, 152;
    --bs-secondary:      var(--sf-ink-secondary);
    --bs-success:        var(--sf-good);
    --bs-danger:         var(--sf-red);
    --bs-warning:        var(--sf-gold);
    --bs-info:           var(--sf-info);
    --bs-body-color:     var(--sf-ink);
    --bs-body-bg:        var(--sf-surface-page);
    --bs-border-color:   var(--sf-border);
    --bs-border-radius:  var(--sf-radius);
    --bs-font-sans-serif: var(--sf-font-sans);
    --bs-link-color:     var(--sf-brand);
    --bs-link-hover-color: var(--sf-brand-strong);
}

/* --- Botones ------------------------------------------------------------- */
.btn {
    --sf-btn-bg: transparent;
    --sf-btn-fg: var(--sf-ink);
    --sf-btn-border: transparent;
    --sf-btn-bg-hover: transparent;

    font-family: var(--sf-font-sans);
    font-size: var(--sf-text-sm);
    font-weight: 600;
    letter-spacing: 0.005em;
    line-height: 1.4;
    padding: 0.55rem 1.05rem;
    border-radius: var(--sf-radius-sm);
    border: 1px solid var(--sf-btn-border);
    background-color: var(--sf-btn-bg);
    color: var(--sf-btn-fg);
    transition: background-color var(--sf-transition), border-color var(--sf-transition),
                color var(--sf-transition), transform var(--sf-transition);
    box-shadow: none;
}
.btn:hover  { background-color: var(--sf-btn-bg-hover); color: var(--sf-btn-fg); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn.disabled { opacity: 0.5; }
.btn-lg { font-size: var(--sf-text-base); padding: 0.75rem 1.5rem; }
.btn-sm { font-size: var(--sf-text-xs); padding: 0.38rem 0.75rem; }
.btn.rounded-pill { border-radius: var(--sf-radius-pill); }

.btn-primary {
    --sf-btn-bg: var(--sf-brand); --sf-btn-bg-hover: var(--sf-brand-strong);
    --sf-btn-fg: var(--sf-brand-contrast); --sf-btn-border: var(--sf-brand);
}
.btn-primary:hover { border-color: var(--sf-brand-strong); }

.btn-secondary {
    --sf-btn-bg: var(--sf-surface-card); --sf-btn-bg-hover: var(--sf-surface-sunken);
    --sf-btn-fg: var(--sf-ink); --sf-btn-border: var(--sf-border-strong);
}
.btn-success {
    --sf-btn-bg: var(--sf-good); --sf-btn-bg-hover: #0c7341;
    --sf-btn-fg: #fff; --sf-btn-border: var(--sf-good);
}
.btn-danger {
    --sf-btn-bg: var(--sf-red); --sf-btn-bg-hover: var(--sf-red-strong);
    --sf-btn-fg: var(--sf-red-contrast); --sf-btn-border: var(--sf-red);
}
.btn-warning {
    --sf-btn-bg: var(--sf-gold); --sf-btn-bg-hover: var(--sf-gold-strong);
    --sf-btn-fg: var(--sf-gold-contrast); --sf-btn-border: var(--sf-gold);
}
.btn-info {
    --sf-btn-bg: var(--sf-info); --sf-btn-bg-hover: #155a89;
    --sf-btn-fg: #fff; --sf-btn-border: var(--sf-info);
}
.btn-dark {
    --sf-btn-bg: var(--sf-surface-inverse); --sf-btn-bg-hover: #333330;
    --sf-btn-fg: var(--sf-ink-inverse); --sf-btn-border: var(--sf-surface-inverse);
}
.btn-light {
    --sf-btn-bg: var(--sf-surface-card); --sf-btn-bg-hover: var(--sf-surface-sunken);
    --sf-btn-fg: var(--sf-ink); --sf-btn-border: var(--sf-border);
}
.btn-outline-primary {
    --sf-btn-fg: var(--sf-brand); --sf-btn-border: var(--sf-brand);
    --sf-btn-bg: transparent; --sf-btn-bg-hover: var(--sf-brand);
}
.btn-outline-primary:hover { color: var(--sf-brand-contrast); }
.btn-outline-secondary {
    --sf-btn-fg: var(--sf-ink-secondary); --sf-btn-border: var(--sf-border-strong);
    --sf-btn-bg: transparent; --sf-btn-bg-hover: var(--sf-surface-sunken);
}
.btn-outline-danger {
    --sf-btn-fg: var(--sf-red); --sf-btn-border: var(--sf-red);
    --sf-btn-bg: transparent; --sf-btn-bg-hover: var(--sf-red);
}
.btn-outline-danger:hover { color: var(--sf-red-contrast); }
.btn-outline-success {
    --sf-btn-fg: var(--sf-good); --sf-btn-border: var(--sf-good);
    --sf-btn-bg: transparent; --sf-btn-bg-hover: var(--sf-good);
}
.btn-outline-success:hover { color: #fff; }
.btn-outline-light {
    --sf-btn-fg: #fff; --sf-btn-border: rgba(255, 255, 255, 0.5);
    --sf-btn-bg: transparent; --sf-btn-bg-hover: rgba(255, 255, 255, 0.14);
}
.btn-outline-light:hover { color: #fff; }
.btn-link { --sf-btn-fg: var(--sf-brand); text-decoration: none; }
.btn-link:hover { text-decoration: underline; }

/* --- Tarjetas ------------------------------------------------------------ */
.card {
    background-color: var(--sf-surface-card);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    box-shadow: none;
}
.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--sf-border);
    font-family: var(--sf-font-sans);
    font-weight: 600;
    font-size: var(--sf-text-sm);
    color: var(--sf-ink);
    padding: var(--sf-space-4) var(--sf-space-5);
}
.card-body   { padding: var(--sf-space-5); }
.card-footer { background-color: transparent; border-top: 1px solid var(--sf-border); }
.card-title  { font-family: var(--sf-font-display); font-weight: 600; }

/* Las sombras de utilidad de Bootstrap se vuelven sutiles, no se anulan. */
.shadow-sm { box-shadow: var(--sf-shadow-sm) !important; }
.shadow    { box-shadow: var(--sf-shadow) !important; }
.shadow-lg { box-shadow: var(--sf-shadow-lg) !important; }

/* --- Tablas (patrón "ledger" del artefacto) ------------------------------ */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--sf-ink);
    --bs-table-border-color: var(--sf-border-soft);
    --bs-table-striped-bg: var(--sf-surface-sunken);
    --bs-table-hover-bg: var(--sf-brand-soft);
    font-size: var(--sf-text-sm);
    margin-bottom: 0;
}
.table > thead > tr > th {
    font-family: var(--sf-font-sans);
    font-size: var(--sf-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sf-ink-muted);
    background-color: transparent;
    border-bottom: 1px solid var(--sf-border);
    white-space: nowrap;
    padding: 0.4rem 0.85rem 0.7rem;
    vertical-align: bottom;
}
.table > tbody > tr > td {
    border-bottom: 1px solid var(--sf-border-soft);
    border-top: 0;
    padding: 0.7rem 0.85rem;
    vertical-align: middle;
    color: var(--sf-ink);
}
.table > tbody > tr:last-child > td { border-bottom: 0; }

/* Filas resaltadas (`table-success`, `table-danger`…). Bootstrap las pinta con
   verdes y rojos fijos que no se aclaran en oscuro: es lo que dejaba la fila de
   "Utilidad real del negocio" como un recuadro chillón fuera del tema. */
.table > :not(caption) > tr.table-success > *,
.table > :not(caption) > * > tr.table-success > * { --bs-table-bg-state: var(--sf-good-soft);     color: var(--sf-good); }
.table > :not(caption) > tr.table-danger > *,
.table > :not(caption) > * > tr.table-danger > *  { --bs-table-bg-state: var(--sf-critical-soft); color: var(--sf-critical); }
.table > :not(caption) > tr.table-warning > *,
.table > :not(caption) > * > tr.table-warning > * { --bs-table-bg-state: var(--sf-warning-soft);  color: var(--sf-warning); }
.table > :not(caption) > tr.table-info > *,
.table > :not(caption) > * > tr.table-info > *    { --bs-table-bg-state: var(--sf-info-soft);     color: var(--sf-info); }
.table > :not(caption) > tr.table-primary > *,
.table > :not(caption) > * > tr.table-primary > * { --bs-table-bg-state: var(--sf-brand-soft);    color: var(--sf-brand); }
.table > :not(caption) > tr.table-light > *,
.table > :not(caption) > * > tr.table-light > *   { --bs-table-bg-state: var(--sf-surface-sunken); color: var(--sf-ink); }

/* --- Utilidades de color de texto ---------------------------------------
   Bootstrap las fija en hexadecimal y en oscuro quedaban ilegibles. */
.text-primary { color: var(--sf-brand) !important; }
.text-success { color: var(--sf-good) !important; }
.text-danger  { color: var(--sf-critical) !important; }
.text-warning { color: var(--sf-warning) !important; }
.text-info    { color: var(--sf-info) !important; }

/* --- Formularios --------------------------------------------------------- */
.form-control, .form-select, .input-group-text, textarea.form-control {
    font-family: var(--sf-font-sans);
    font-size: var(--sf-text-sm);
    color: var(--sf-ink);
    background-color: var(--sf-surface-card);
    border: 1px solid var(--sf-border-strong);
    border-radius: var(--sf-radius-sm);
    padding: 0.55rem 0.8rem;
    transition: border-color var(--sf-transition), box-shadow var(--sf-transition);
}
.form-control:focus, .form-select:focus {
    border-color: var(--sf-brand);
    box-shadow: 0 0 0 3px var(--sf-brand-soft);
    background-color: var(--sf-surface-card);
    color: var(--sf-ink);
}
.form-control::placeholder { color: var(--sf-ink-muted); }
.form-label {
    font-size: var(--sf-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sf-ink-muted);
    margin-bottom: 0.35rem;
}
.form-text { font-size: var(--sf-text-xs); color: var(--sf-ink-muted); }
.input-group-text { background-color: var(--sf-surface-sunken); color: var(--sf-ink-secondary); }
.form-check-input:checked { background-color: var(--sf-brand); border-color: var(--sf-brand); }

/* --- Modales ------------------------------------------------------------- */
.modal-content {
    background-color: var(--sf-surface-card);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    box-shadow: var(--sf-shadow-lg);
}
.modal-header {
    border-bottom: 1px solid var(--sf-border);
    padding: var(--sf-space-4) var(--sf-space-5);
}
.modal-title  { font-family: var(--sf-font-display); font-size: var(--sf-text-lg); font-weight: 600; }
.modal-body   { padding: var(--sf-space-5); }
.modal-footer { border-top: 1px solid var(--sf-border); padding: var(--sf-space-4) var(--sf-space-5); gap: var(--sf-space-2); }

/* --- Badges -------------------------------------------------------------- */
.badge {
    font-family: var(--sf-font-sans);
    font-size: var(--sf-text-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.32em 0.7em;
    border-radius: var(--sf-radius-pill);
}
.badge.bg-primary   { background-color: var(--sf-brand-soft) !important; color: var(--sf-brand) !important; }
.badge.bg-success   { background-color: var(--sf-good-soft) !important; color: var(--sf-good) !important; }
.badge.bg-danger    { background-color: var(--sf-critical-soft) !important; color: var(--sf-critical) !important; }
.badge.bg-warning   { background-color: var(--sf-warning-soft) !important; color: var(--sf-warning) !important; }
.badge.bg-info      { background-color: var(--sf-info-soft) !important; color: var(--sf-info) !important; }
.badge.bg-secondary { background-color: var(--sf-surface-sunken) !important; color: var(--sf-ink-secondary) !important; }

/* --- Alertas ------------------------------------------------------------- */
.alert {
    border-radius: var(--sf-radius);
    border: 1px solid transparent;
    border-left-width: 3px;
    font-size: var(--sf-text-sm);
    padding: var(--sf-space-3) var(--sf-space-4);
}
.alert-success { background: var(--sf-good-soft);     border-color: var(--sf-good);     color: var(--sf-ink); }
.alert-danger  { background: var(--sf-critical-soft); border-color: var(--sf-critical); color: var(--sf-ink); }
.alert-warning { background: var(--sf-warning-soft);  border-color: var(--sf-warning);  color: var(--sf-ink); }
.alert-info    { background: var(--sf-info-soft);     border-color: var(--sf-info);     color: var(--sf-ink); }

/* --- Navegación, dropdowns, breadcrumb, acordeón, paginación ------------- */
.dropdown-menu {
    background-color: var(--sf-surface-card);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    box-shadow: var(--sf-shadow);
    padding: var(--sf-space-2);
    font-size: var(--sf-text-sm);
}
.dropdown-item {
    border-radius: var(--sf-radius-sm);
    padding: 0.5rem 0.7rem;
    color: var(--sf-ink);
    font-weight: 500;
}
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--sf-brand-soft); color: var(--sf-brand); }
.dropdown-divider { border-color: var(--sf-border-soft); }

.breadcrumb { font-size: var(--sf-text-xs); text-transform: uppercase; letter-spacing: 0.05em; }
.breadcrumb-item, .breadcrumb-item.active { color: var(--sf-ink-muted); }
.breadcrumb-item a { color: var(--sf-ink-secondary); }

.accordion {
    --bs-accordion-bg: var(--sf-surface-card);
    --bs-accordion-border-color: var(--sf-border);
    --bs-accordion-border-radius: var(--sf-radius);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 3px var(--sf-brand-soft);
    --bs-accordion-active-bg: var(--sf-brand-soft);
    --bs-accordion-active-color: var(--sf-brand);
}
.accordion-button {
    font-family: var(--sf-font-sans);
    font-weight: 600;
    font-size: var(--sf-text-base);
    box-shadow: none;
}
.accordion-body { color: var(--sf-ink-secondary); font-size: var(--sf-text-sm); }

.page-link { color: var(--sf-brand); border-color: var(--sf-border); font-size: var(--sf-text-sm); }
.page-item.active .page-link { background-color: var(--sf-brand); border-color: var(--sf-brand); }

.nav-tabs { border-bottom-color: var(--sf-border); }
.nav-tabs .nav-link {
    font-size: var(--sf-text-sm); font-weight: 600; color: var(--sf-ink-secondary);
    border: 0; border-bottom: 2px solid transparent; border-radius: 0;
}
.nav-tabs .nav-link.active {
    color: var(--sf-brand); background: transparent; border-bottom-color: var(--sf-brand);
}

/* --- Utilidades de fondo heredadas: se reconducen a tokens --------------- */
/* El `:not([class*="bg-opacity"])` es imprescindible: Bootstrap construye
   estas utilidades como rgba(var(--bs-x-rgb), var(--bs-bg-opacity)), asi que un
   `background-color` plano con !important anula el modificador de opacidad.
   Sin esta exclusion, `bg-dark bg-opacity-10` pintaba un circulo negro solido
   y el icono oscuro de dentro desaparecia. */
.bg-light:not([class*="bg-opacity"]) { background-color: var(--sf-surface-sunken) !important; }
.bg-white:not([class*="bg-opacity"]) { background-color: var(--sf-surface-card) !important; }
.bg-dark:not([class*="bg-opacity"])  { background-color: var(--sf-surface-inverse) !important; color: var(--sf-ink-inverse); }

/* Colores de marca heredados de principal.blade.php, ahora tokenizados */
.bg-streamify-yellow { background-color: var(--sf-gold);  color: var(--sf-gold-contrast); }
.bg-streamify-red    { background-color: var(--sf-red);   color: var(--sf-red-contrast); }
.bg-streamify-blue   { background-color: var(--sf-brand); color: var(--sf-brand-contrast); }
.bg-streamify-black  { background-color: var(--sf-surface-inverse); color: var(--sf-ink-inverse); }
.bg-streamify-gray   { background-color: var(--sf-ink-secondary); color: #fff; }

/* ==========================================================================
   4. COMPONENTES SF — primitivas para todo lo nuevo
   ========================================================================== */

/* --- Contenedor y secciones --------------------------------------------- */
.sf-container { width: 100%; max-width: var(--sf-container); margin-inline: auto; padding-inline: var(--sf-space-5); }
.sf-section   { padding-block: var(--sf-space-8); }
.sf-section--sunken  { background-color: var(--sf-surface-sunken); }
.sf-section--inverse { background-color: var(--sf-surface-inverse); color: var(--sf-ink-inverse); }
.sf-section--inverse h1,
.sf-section--inverse h2,
.sf-section--inverse h3 { color: #fff; }
.sf-section--inverse .sf-eyebrow { color: var(--sf-gold); }
.sf-section--inverse p,
.sf-section--inverse .sf-lead { color: rgba(255, 255, 255, 0.72); }

/* --- Micro-etiqueta en versalitas (firma del sistema) -------------------- */
.sf-eyebrow {
    display: block;
    font-family: var(--sf-font-sans);
    font-size: var(--sf-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--sf-ink-muted);
    margin-bottom: var(--sf-space-2);
}

.sf-section-head { max-width: 46rem; margin-bottom: var(--sf-space-6); }
.sf-section-head--center { margin-inline: auto; text-align: center; }
.sf-title { font-family: var(--sf-font-display); font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.sf-lead  { font-size: var(--sf-text-lg); color: var(--sf-ink-secondary); margin-top: var(--sf-space-3); }

/* --- Panel: la caja canónica --------------------------------------------- */
.sf-panel {
    background-color: var(--sf-surface-card);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    padding: var(--sf-space-5);
}
.sf-panel--flush  { padding: 0; overflow: hidden; }
.sf-panel--accent { background-color: var(--sf-brand-soft); border-color: var(--sf-brand); }
.sf-panel-head {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: var(--sf-space-3); flex-wrap: wrap; margin-bottom: var(--sf-space-4);
}
.sf-panel-title { font-weight: 600; font-size: var(--sf-text-lg); font-family: var(--sf-font-display); margin: 0; }
.sf-panel-meta  { font-size: var(--sf-text-xs); color: var(--sf-ink-muted); }

/* --- Tarjeta interactiva (feature, combo, producto) ---------------------- */
.sf-card {
    display: flex; flex-direction: column; gap: var(--sf-space-3);
    background-color: var(--sf-surface-card);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    padding: var(--sf-space-5);
    height: 100%;
    transition: border-color var(--sf-transition), transform var(--sf-transition), box-shadow var(--sf-transition);
}
a.sf-card, .sf-card--link { color: inherit; }
a.sf-card:hover, .sf-card--link:hover {
    border-color: var(--sf-brand);
    transform: translateY(-2px);
    box-shadow: var(--sf-shadow);
    color: inherit;
}
.sf-card-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: none;
    border-radius: var(--sf-radius-sm);
    background-color: var(--sf-brand-soft);
    color: var(--sf-brand);
    font-size: 1.15rem;
}
.sf-card-icon--gold { background-color: var(--sf-gold-soft); color: var(--sf-gold-strong); }
.sf-card-icon--red  { background-color: var(--sf-red-soft);  color: var(--sf-red); }
.sf-card-icon--good { background-color: var(--sf-good-soft); color: var(--sf-good); }
.sf-card-title { font-family: var(--sf-font-sans); font-weight: 600; font-size: var(--sf-text-base); margin: 0; }
.sf-card-text  { font-size: var(--sf-text-sm); color: var(--sf-ink-secondary); margin: 0; }

/* --- Rejilla ------------------------------------------------------------- */
.sf-grid { display: grid; gap: var(--sf-space-4); }
.sf-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf-split {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--sf-space-7); align-items: center;
}

/* --- KPI ----------------------------------------------------------------- */
.sf-kpi {
    display: flex; flex-direction: column; gap: var(--sf-space-2);
    background-color: var(--sf-surface-card);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    padding: var(--sf-space-4) var(--sf-space-5);
}
.sf-kpi--primary { background-color: var(--sf-brand-soft); border-color: var(--sf-brand); }
.sf-kpi-label { font-size: var(--sf-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--sf-ink-muted); }
.sf-kpi-value { font-family: var(--sf-font-mono); font-variant-numeric: tabular-nums; font-weight: 600; font-size: var(--sf-text-2xl); letter-spacing: -0.02em; }
.sf-kpi-sub   { font-size: var(--sf-text-sm); color: var(--sf-ink-secondary); }
.sf-kpi-delta { font-size: var(--sf-text-sm); font-weight: 600; }
.sf-kpi-delta.is-up   { color: var(--sf-good); }
.sf-kpi-delta.is-down { color: var(--sf-critical); }

/* --- Acentos de superficie ----------------------------------------------
   Los recuadros de color (tarjetas de KPI de los dashboards, cajas de
   "utilidad del negocio", tarjetas de bancos…) llevaban cada uno su propia
   paleta fija en hexadecimal, con un bloque aparte para el modo oscuro. Eso
   los dejaba fuera del tema y descoordinados entre sí.

   Aquí se define UNA sola escala de acentos. El "tinte" es el fondo suave, el
   "chip" es la pastilla del icono (un paso más saturado) y la "tinta" es el
   texto. Todo se deriva de los tokens, así que sigue al tema y se invierte
   solo en oscuro: ya no hace falta duplicar la paleta por vista.
   ------------------------------------------------------------------------ */
.sf-tint {
    --sf-tint-bg: var(--sf-surface-sunken);
    --sf-tint-ink: var(--sf-ink);
    --sf-tint-chip: var(--sf-border);

    background: var(--sf-tint-bg);
    color: var(--sf-tint-ink);
    border: 1px solid transparent;
    border-radius: var(--sf-radius);
}
.sf-tint--good     { --sf-tint-bg: var(--sf-good-soft);     --sf-tint-ink: var(--sf-good);     --sf-tint-chip: color-mix(in srgb, var(--sf-good) 22%, var(--sf-surface-card)); }
.sf-tint--critical { --sf-tint-bg: var(--sf-critical-soft); --sf-tint-ink: var(--sf-critical); --sf-tint-chip: color-mix(in srgb, var(--sf-critical) 22%, var(--sf-surface-card)); }
.sf-tint--warning  { --sf-tint-bg: var(--sf-warning-soft);  --sf-tint-ink: var(--sf-warning);  --sf-tint-chip: color-mix(in srgb, var(--sf-warning) 22%, var(--sf-surface-card)); }
.sf-tint--info     { --sf-tint-bg: var(--sf-info-soft);     --sf-tint-ink: var(--sf-info);     --sf-tint-chip: color-mix(in srgb, var(--sf-info) 22%, var(--sf-surface-card)); }
.sf-tint--brand    { --sf-tint-bg: var(--sf-brand-soft);    --sf-tint-ink: var(--sf-brand);    --sf-tint-chip: color-mix(in srgb, var(--sf-brand) 22%, var(--sf-surface-card)); }
.sf-tint--gold     { --sf-tint-bg: var(--sf-gold-soft);     --sf-tint-ink: var(--sf-gold-strong); --sf-tint-chip: color-mix(in srgb, var(--sf-gold) 26%, var(--sf-surface-card)); }

/* --- Tarjetas KPI de los dashboards -------------------------------------
   Las clases .kpi-<color> las comparten dashboard, bancos, inteligencia, MNE
   y el panel de Donna. Cada vista tenía SU PROPIA copia en hexadecimal —el
   dashboard ni siquiera traía variante oscura— y por eso los recuadros de
   color no combinaban entre sí ni con el tema.

   Aquí quedan definidas UNA sola vez y derivadas de tokens. Los nombres son
   de color por herencia, pero el significado es semántico:
     verde = bueno · rojo = crítico · naranja/amarillo/ámbar = atención
     azul/teal = informativo · índigo/morado = color de marca
   Solo se define el COLOR; la geometría (tamaño, radio, sombra) sigue en
   cada vista, que es donde varía.

   Amarillo y ámbar usan el color semántico de ATENCIÓN, no el dorado del
   tema: con el tema Neón el dorado es cian, y una tarjeta "amarilla"
   turquesa desorienta más de lo que aporta.
   ------------------------------------------------------------------------ */
.kpi-green,
.kpi-red,
.kpi-orange,
.kpi-yellow,
.kpi-blue,
.kpi-teal,
.kpi-indigo,
.kpi-purple,
.kpi-amber {
    background: var(--sf-kpi-bg);
    color: var(--sf-kpi-ink);
}
.kpi-green .kpi-icon,
.kpi-red .kpi-icon,
.kpi-orange .kpi-icon,
.kpi-yellow .kpi-icon,
.kpi-blue .kpi-icon,
.kpi-teal .kpi-icon,
.kpi-indigo .kpi-icon,
.kpi-purple .kpi-icon,
.kpi-amber .kpi-icon { background: var(--sf-kpi-chip); color: var(--sf-kpi-ink); }

.kpi-green::after,
.kpi-red::after,
.kpi-orange::after,
.kpi-yellow::after,
.kpi-blue::after,
.kpi-teal::after,
.kpi-indigo::after,
.kpi-purple::after,
.kpi-amber::after { background: var(--sf-kpi-ink); }

.kpi-green  { --sf-kpi-bg: var(--sf-good-soft);     --sf-kpi-ink: var(--sf-good);        --sf-kpi-chip: color-mix(in srgb, var(--sf-good) 22%, var(--sf-surface-card)); }
.kpi-red    { --sf-kpi-bg: var(--sf-critical-soft); --sf-kpi-ink: var(--sf-critical);    --sf-kpi-chip: color-mix(in srgb, var(--sf-critical) 22%, var(--sf-surface-card)); }
.kpi-orange { --sf-kpi-bg: var(--sf-warning-soft);  --sf-kpi-ink: var(--sf-warning);     --sf-kpi-chip: color-mix(in srgb, var(--sf-warning) 24%, var(--sf-surface-card)); }
.kpi-yellow { --sf-kpi-bg: var(--sf-warning-soft);  --sf-kpi-ink: var(--sf-warning);     --sf-kpi-chip: color-mix(in srgb, var(--sf-warning) 24%, var(--sf-surface-card)); }
.kpi-blue   { --sf-kpi-bg: var(--sf-info-soft);     --sf-kpi-ink: var(--sf-info);        --sf-kpi-chip: color-mix(in srgb, var(--sf-info) 22%, var(--sf-surface-card)); }
.kpi-teal   { --sf-kpi-bg: var(--sf-info-soft);     --sf-kpi-ink: var(--sf-info);        --sf-kpi-chip: color-mix(in srgb, var(--sf-info) 22%, var(--sf-surface-card)); }
.kpi-indigo { --sf-kpi-bg: var(--sf-brand-soft);    --sf-kpi-ink: var(--sf-brand);       --sf-kpi-chip: color-mix(in srgb, var(--sf-brand) 22%, var(--sf-surface-card)); }
.kpi-purple { --sf-kpi-bg: var(--sf-brand-soft);    --sf-kpi-ink: var(--sf-brand);       --sf-kpi-chip: color-mix(in srgb, var(--sf-brand) 22%, var(--sf-surface-card)); }
.kpi-amber  { --sf-kpi-bg: var(--sf-warning-soft);  --sf-kpi-ink: var(--sf-warning);     --sf-kpi-chip: color-mix(in srgb, var(--sf-warning) 24%, var(--sf-surface-card)); }

/* --- Tarjeta de META (semáforo de objetivos) -----------------------------
   El color NO indica si la cifra es alta o baja: indica si se va a cumplir
   el objetivo al ritmo actual. Verde = logrado o en ritmo, ámbar = ajustado,
   rojo = fuera de ritmo. Por eso deriva de --sf-good/warning/critical y no
   de la paleta de marca.
   ------------------------------------------------------------------------ */
.meta-card {
    --meta-ink: var(--sf-good);
    --meta-soft: var(--sf-good-soft);

    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sf-space-2);
    padding: var(--sf-space-4) var(--sf-space-5);
    padding-left: calc(var(--sf-space-5) + 4px);
    background: var(--sf-surface-card);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    height: 100%;
}
.meta-card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    border-radius: var(--sf-radius) 0 0 var(--sf-radius);
    background: var(--meta-ink);
}
.meta-card--good     { --meta-ink: var(--sf-good);     --meta-soft: var(--sf-good-soft); }
.meta-card--warning  { --meta-ink: var(--sf-warning);  --meta-soft: var(--sf-warning-soft); }
.meta-card--critical { --meta-ink: var(--sf-critical); --meta-soft: var(--sf-critical-soft); }
/* Sin datos: no es bueno ni malo, es que no hay nada que medir todavia. */
.meta-card--neutro   { --meta-ink: var(--sf-ink-muted); --meta-soft: var(--sf-surface-sunken); }

.meta-card-head {
    display: flex;
    align-items: center;
    gap: var(--sf-space-2);
}
.meta-card-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; flex: none;
    border-radius: var(--sf-radius-sm);
    background: var(--meta-soft);
    color: var(--meta-ink);
    font-size: .85rem;
}
.meta-card-label {
    font-size: var(--sf-text-sm);
    font-weight: 600;
    color: var(--sf-ink);
    line-height: 1.2;
}
.meta-card-pill {
    margin-left: auto;
    flex: none;
    padding: 2px 9px;
    border-radius: var(--sf-radius-pill);
    background: var(--meta-soft);
    color: var(--meta-ink);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.meta-card-cifras {
    display: flex;
    align-items: baseline;
    gap: var(--sf-space-2);
    flex-wrap: wrap;
}
.meta-card-valor {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--meta-ink);
}
.meta-card-objetivo {
    font-size: var(--sf-text-sm);
    color: var(--sf-ink-muted);
}

.meta-card-barra {
    display: flex;
    align-items: center;
    gap: var(--sf-space-2);
}
.meta-card-track {
    position: relative;
    flex: 1;
    height: 8px;
    border-radius: var(--sf-radius-pill);
    background: var(--sf-surface-sunken);
    overflow: hidden;
}
.meta-card-fill {
    height: 100%;
    border-radius: var(--sf-radius-pill);
    background: var(--meta-ink);
    transition: width .35s ease;
}
/* Marca de ritmo: dónde debería ir el avance a día de hoy. */
.meta-card-marca {
    position: absolute;
    top: -2px; bottom: -2px;
    width: 2px;
    background: var(--sf-ink);
    opacity: .45;
}
.meta-card-pct {
    flex: none;
    min-width: 3.2em;
    text-align: right;
    font-size: var(--sf-text-sm);
    font-weight: 700;
    color: var(--sf-ink-secondary);
}

.meta-card-mensaje {
    margin: 0;
    font-size: var(--sf-text-sm);
    line-height: 1.45;
    color: var(--sf-ink-secondary);
}

/* Advertencia de lectura parcial: una métrica que a mitad de periodo engaña. */
.meta-card-aviso {
    margin: 0;
    padding: var(--sf-space-2);
    border-radius: var(--sf-radius-sm);
    background: var(--sf-surface-sunken);
    font-size: .72rem;
    line-height: 1.4;
    color: var(--sf-ink-muted);
}
.meta-card-aviso i { margin-right: 4px; opacity: .8; }

.meta-card-pie {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sf-space-1) var(--sf-space-4);
    padding-top: var(--sf-space-2);
    border-top: 1px solid var(--sf-border-soft);
    font-size: .72rem;
    color: var(--sf-ink-muted);
}
.meta-card-pie i { opacity: .7; margin-right: 3px; }
.meta-card-nota { font-style: italic; }

/* Resumen de una línea: cuántas metas van bien, ajustadas o mal. */
.meta-resumen {
    display: inline-flex;
    align-items: center;
    gap: var(--sf-space-3);
    flex-wrap: wrap;
    font-size: var(--sf-text-sm);
    color: var(--sf-ink-secondary);
}
.meta-resumen-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px;
    border-radius: var(--sf-radius-pill);
    background: var(--sf-surface-sunken);
    border: 1px solid var(--sf-border-soft);
    font-weight: 600;
}
.meta-resumen-punto { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.meta-resumen-punto--good     { background: var(--sf-good); }
.meta-resumen-punto--warning  { background: var(--sf-warning); }
.meta-resumen-punto--critical { background: var(--sf-critical); }
.meta-resumen-punto--neutro   { background: var(--sf-ink-muted); }

/* Pastilla del icono dentro de un acento */
.sf-tint-chip {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; flex: none;
    border-radius: var(--sf-radius-sm);
    background: var(--sf-tint-chip);
    color: var(--sf-tint-ink);
    font-size: 1.3rem;
}

/* --- Estado -------------------------------------------------------------- */
.sf-status { display: inline-flex; align-items: center; gap: var(--sf-space-2); font-size: var(--sf-text-sm); color: var(--sf-ink-secondary); white-space: nowrap; }
.sf-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.sf-dot--good     { background: var(--sf-good); }
.sf-dot--warning  { background: var(--sf-warning); }
.sf-dot--critical { background: var(--sf-critical); }
.sf-dot--muted    { background: var(--sf-ink-muted); }

.sf-tag {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: var(--sf-text-xs); font-weight: 600;
    padding: 4px 10px; border-radius: var(--sf-radius-pill);
    background: var(--sf-surface-sunken); color: var(--sf-ink-secondary);
}
.sf-tag--brand    { background: var(--sf-brand-soft);    color: var(--sf-brand); }
.sf-tag--gold     { background: var(--sf-gold-soft);     color: var(--sf-gold-strong); }
.sf-tag--good     { background: var(--sf-good-soft);     color: var(--sf-good); }
.sf-tag--critical { background: var(--sf-critical-soft); color: var(--sf-critical); }

/* --- Botones SF (equivalentes sin depender de Bootstrap) ----------------- */
.sf-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sf-space-2);
    font-family: var(--sf-font-sans); font-size: var(--sf-text-sm); font-weight: 600;
    padding: 0.62rem 1.15rem;
    border: 1px solid transparent; border-radius: var(--sf-radius-sm);
    cursor: pointer; text-align: center;
    transition: background-color var(--sf-transition), border-color var(--sf-transition), color var(--sf-transition);
}
.sf-btn--primary { background: var(--sf-brand); border-color: var(--sf-brand); color: var(--sf-brand-contrast); }
.sf-btn--primary:hover { background: var(--sf-brand-strong); border-color: var(--sf-brand-strong); color: #fff; }
.sf-btn--gold { background: var(--sf-gold); border-color: var(--sf-gold); color: var(--sf-gold-contrast); }
.sf-btn--gold:hover { background: var(--sf-gold-strong); border-color: var(--sf-gold-strong); color: var(--sf-gold-contrast); }
.sf-btn--ghost { background: transparent; border-color: var(--sf-border-strong); color: var(--sf-ink); }
.sf-btn--ghost:hover { background: var(--sf-surface-sunken); color: var(--sf-ink); }
.sf-btn--onDark { background: transparent; border-color: rgba(255, 255, 255, 0.45); color: #fff; }
.sf-btn--onDark:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.sf-btn--lg { font-size: var(--sf-text-base); padding: 0.8rem 1.6rem; }

/* --- Lista de filas separadas ------------------------------------------- */
.sf-rows > * + * { border-top: 1px solid var(--sf-border-soft); }
.sf-row { display: flex; justify-content: space-between; align-items: center; gap: var(--sf-space-3); padding: var(--sf-space-3) 0; }
.sf-row-name { font-weight: 600; font-size: var(--sf-text-sm); }
.sf-row-meta { font-size: var(--sf-text-xs); color: var(--sf-ink-muted); margin-top: 2px; }

/* --- Barra de progreso --------------------------------------------------- */
.sf-bar-track { background: var(--sf-border-soft); border-radius: 5px; height: 8px; overflow: hidden; }
.sf-bar-fill  { height: 100%; border-radius: 5px; background: var(--sf-brand); }

/* --- Scroll horizontal seguro (tablas anchas, nunca el body) ------------ */
.sf-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ==========================================================================
   4b. (ELIMINADA) Compatibilidad con themes.css
   --------------------------------------------------------------------------
   Aquí vivían reglas `html[data-theme] body/.card/.modal-content` que le
   devolvían el mando a themes.css cuando había un tema de temporada activo.

   Ya no hacen falta y además hacían daño:

   1. Son redundantes. La sección 0 de streamify-themes.css redirige
      `--bg-card`, `--bg-body`… a los tokens `--sf-*`, así que ambas reglas
      resolvían exactamente al mismo color.

   2. Rompían los acentos. El servidor pinta `data-theme` en el <html>
      SIEMPRE (no solo en temporada), así que `html[data-theme] .card`
      —especificidad (0,2,1)— ganaba a cualquier `.kpi-*` (0,1,0) y dejaba
      todas las tarjetas de KPI en blanco, sin su fondo de color.

   Si alguna vez hace falta volver a dar prioridad a themes.css, hay que
   hacerlo sin subir la especificidad por encima de los componentes.
   ========================================================================== */

/* ==========================================================================
   4c. SHELL PÚBLICO (layouts/cliente.blade.php)
   --------------------------------------------------------------------------
   Navbar y footer compartidos por las 11 vistas públicas (landing, tienda,
   perfil, recargas, códigos, historial, tutorial, legales, Donna).
   El tema New Age los deja con Kanit y un azul #2937f0 que no es de marca.
   `#mainNav` y `#pie` son IDs, así que hay que igualar la especificidad.
   El ScrollSpy de scripts2.js sigue funcionando: solo cambian colores.
   ========================================================================== */
#mainNav {
    background-color: var(--sf-surface-card);
    border-bottom: 1px solid var(--sf-border);
    padding-block: 0.85rem;
}
#mainNav .navbar-brand {
    font-family: var(--sf-font-display);
    font-weight: 600;
    font-size: var(--sf-text-xl);
    letter-spacing: -0.02em;
    color: var(--sf-ink);
}
#mainNav .navbar-brand:hover,
#mainNav .navbar-brand:active { color: var(--sf-brand); }

#mainNav .navbar-nav .nav-item .nav-link {
    font-size: var(--sf-text-sm);
    font-weight: 600;
    color: var(--sf-ink-secondary);
}
#mainNav .navbar-nav .nav-item .nav-link:hover { color: var(--sf-ink); }
#mainNav .navbar-nav .nav-item .nav-link.active { color: var(--sf-brand); }
#mainNav .navbar-toggler {
    font-size: var(--sf-text-sm);
    color: var(--sf-ink);
    border-color: var(--sf-border);
}

/* Saldo del cliente en la barra: es una cifra, va en mono tabular. */
#mainNav .sf-saldo {
    font-family: var(--sf-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--sf-text-sm);
    font-weight: 600;
    color: var(--sf-ink);
}

/* Botón de cuenta: dorado de marca, sin hex incrustado en el Blade. */
#mainNav .sf-account-btn {
    background-color: var(--sf-gold);
    border-color: var(--sf-gold);
    color: var(--sf-gold-contrast);
}
#mainNav .sf-account-btn:hover {
    background-color: var(--sf-gold-strong);
    border-color: var(--sf-gold-strong);
    color: var(--sf-gold-contrast);
}

/* Footer */
#pie {
    background-color: var(--sf-surface-inverse) !important;
    color: rgba(255, 255, 255, 0.72);
    border-top: 1px solid var(--sf-border);
    font-size: var(--sf-text-sm);
}
#pie a { color: rgba(255, 255, 255, 0.72); }
#pie a:hover { color: #fff; }
#pie .sf-footer-highlight { color: var(--sf-gold); }
#pie .sf-footer-social { font-size: 1.15rem; }

/* ==========================================================================
   5. RESPONSIVE
   ========================================================================== */
@media (max-width: 991.98px) {
    .sf-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sf-split   { grid-template-columns: 1fr; gap: var(--sf-space-5); }
    .sf-section { padding-block: var(--sf-space-7); }
}
@media (max-width: 575.98px) {
    .sf-grid--2, .sf-grid--3, .sf-grid--4 { grid-template-columns: 1fr; }
    .sf-container { padding-inline: var(--sf-space-4); }
    .sf-panel, .sf-card { padding: var(--sf-space-4); }
}

@media print {
    .sf-panel, .card { border-color: #ccc; box-shadow: none; }
    body { background: #fff; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}