/* ==========================================================================
   theme.css — Modo claro / oscuro del sitio SinBek
   --------------------------------------------------------------------------
   Cubre TODO: panel admin y sitio público. El tema vive en la clase "dark"
   de <html>, que _Layout.cshtml pinta desde el servidor leyendo la cookie.

   Las vistas traen sus colores hardcodeados en <style> inline. Este archivo
   los pisa por especificidad (html.dark .clase = 0,2,1 contra .clase = 0,1,0),
   por eso casi no hace falta !important.

   Criterio con las imágenes: los recuadros que contienen logotipos de marca,
   fotos de producto o logos de cliente se mantienen CLAROS a propósito. Son
   PNG recortados sobre blanco; oscurecerlos los vuelve ilegibles.
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
    /* Claro — refleja la paleta que ya usan las vistas. */
    --sb-bg: linear-gradient(135deg, #f4f8ff 0%, #ffffff 45%, #edf7ff 100%);
    --sb-surface: #ffffff;
    --sb-surface-soft: #f8fbff;
    --sb-surface-alt: #eef5ff;
    --sb-text: #24324a;
    --sb-text-strong: #172033;
    --sb-heading: #003366;
    --sb-muted: #637083;
    --sb-border: #dbe7f6;
    --sb-border-soft: #edf2f7;
    --sb-accent: #006dff;
    --sb-chip-bg: #e8f3ff;
    --sb-chip-text: #0055b8;
    --sb-chip-border: #cae3ff;
    --sb-ok-bg: #ecfdf3;
    --sb-ok-text: #027a48;
    --sb-ok-border: #abefc6;
    --sb-err-bg: #fff1f1;
    --sb-err-text: #b42318;
    --sb-err-border: #ffd5d5;
    --sb-warn-bg: #fff3e0;
    --sb-warn-text: #b26a00;
    --sb-warn-border: #ffe0b2;
    --sb-media-bg: linear-gradient(135deg, #eef5ff 0%, #ffffff 55%, #e9fbff 100%);
    --sb-hero: linear-gradient(135deg, #003366 0%, #006dff 56%, #41befd 100%);
    --sb-shadow: 0 24px 65px rgba(0,31,84,0.14);
    --sb-shadow-sm: 0 10px 28px rgba(0,31,84,0.10);

    /* Fondo claro para recuadros de imagen (logos y fotos de producto). */
    --sb-media-light: #ffffff;
}

html.dark {
    --sb-bg: linear-gradient(135deg, #0a1120 0%, #0f1a2e 45%, #0a1526 100%);
    --sb-surface: #131f33;
    --sb-surface-soft: #0f1a2b;
    --sb-surface-alt: #1a2942;
    --sb-text: #d7e2f2;
    --sb-text-strong: #e8f0fb;
    --sb-heading: #7fb6ff;
    --sb-muted: #93a4bd;
    --sb-border: #2a3c55;
    --sb-border-soft: #223045;
    --sb-accent: #4ba3ff;
    --sb-chip-bg: #13294a;
    --sb-chip-text: #8cc2ff;
    --sb-chip-border: #1d3a63;
    --sb-ok-bg: #0e2a1c;
    --sb-ok-text: #54d287;
    --sb-ok-border: #1e5138;
    --sb-err-bg: #32161a;
    --sb-err-text: #ff8d84;
    --sb-err-border: #5b2429;
    --sb-warn-bg: #33260f;
    --sb-warn-text: #f2b64f;
    --sb-warn-border: #5a4320;
    --sb-media-bg: linear-gradient(135deg, #16243a 0%, #101b2d 55%, #142438 100%);
    --sb-hero: linear-gradient(135deg, #06213f 0%, #0b4a99 56%, #1f7fc4 100%);
    --sb-shadow: 0 24px 65px rgba(0,0,0,0.55);
    --sb-shadow-sm: 0 10px 28px rgba(0,0,0,0.45);
    --sb-media-light: #eef2f8;
}


/* ==========================================================================
   2. BOTÓN DEL TEMA
   ========================================================================== */

.theme-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(226,232,240,0.95);
    background: rgba(255,255,255,0.85);
    color: #003366;
    cursor: pointer;
    outline: none;
    flex-shrink: 0;
    transition: background .22s ease, border-color .22s ease, color .22s ease, transform .22s ease;
}

    .theme-toggle:hover {
        transform: translateY(-2px);
        border-color: #006dff;
        color: #006dff;
    }

    .theme-toggle:focus-visible {
        box-shadow: 0 0 0 4px rgba(0,109,255,0.22);
    }

    /* Va DESPUÉS de :hover a propósito: ambos pesan lo mismo (0,2,0), así que
       al pulsar gana el último. El hundido hace que el barrido se lea como si
       saliera del botón. */
    .theme-toggle:active {
        transform: scale(0.92);
        transition-duration: .08s;
    }

    /* Variante flotante: pantallas sin navbar (login, 404, etc.). */
    .theme-toggle--floating {
        position: fixed;
        top: 22px;
        right: 22px;
        z-index: 1001;
        width: 46px;
        height: 46px;
        box-shadow: 0 10px 26px rgba(0,31,84,0.16);
    }

    .theme-toggle svg {
        width: 19px;
        height: 19px;
        display: block;
    }

    /* En claro se ve la luna (invitación a oscurecer); en oscuro, el sol. */
    .theme-toggle .theme-toggle-sun {
        display: none;
    }

html.dark .theme-toggle {
    border-color: #2a3c55;
    background: #1a2942;
    color: #ffd479;
}

    html.dark .theme-toggle:hover {
        border-color: #4ba3ff;
        color: #ffe1a3;
    }

html.dark .theme-toggle .theme-toggle-sun {
    display: block;
}

html.dark .theme-toggle .theme-toggle-moon {
    display: none;
}

/* En móvil el navbar apila los enlaces con align-items:stretch; sin esto el
   botón redondo se estiraría a todo el ancho. */
@media (max-width: 900px) {
    .theme-toggle--inline {
        align-self: flex-start;
    }
}


/* ==========================================================================
   2.1 BOTÓN DE IDIOMA (_LangToggle.cshtml + translate.js)
   --------------------------------------------------------------------------
   Reutiliza la forma de .theme-toggle (el partial lleva las dos clases);
   aquí solo cambia el contenido: texto en lugar de icono.
   ========================================================================== */

.lang-toggle .lang-toggle-label {
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .5px;
    line-height: 1;
}

html.dark .lang-toggle {
    color: var(--sb-heading);
}

/* Lo que inyecta Google Translate. Sin esto aparece una barra fija arriba
   que tapa el navbar, y Google empuja el <body> 40px hacia abajo con un
   style en línea (por eso el !important en top). */
#google_translate_element,
body > .skiptranslate,
.goog-te-banner-frame,
.goog-te-balloon-frame,
#goog-gt-tt,
.goog-tooltip {
    display: none !important;
}

body {
    top: 0 !important;
}

/* Google resalta en amarillo el texto al pasar el ratón por encima. */
.goog-text-highlight {
    background: none !important;
    box-shadow: none !important;
}


/* ==========================================================================
   3. TRANSICIÓN CIRCULAR
   ========================================================================== */

/* Geometría del barrido. theme.js publica estos valores en <html> justo antes
   de disparar la transición (centro del botón, radio inicial = radio del
   botón, radio final = esquina más lejana). Los pseudo-elementos
   ::view-transition* cuelgan del elemento raíz, así que heredan lo que se fije
   ahí con style.setProperty.

   Los valores por omisión importan: si el script no alcanzara a publicarlos,
   el círculo sale del centro de la pantalla en vez de romper la animación y
   dejar el cambio seco. */
:root {
    --sb-wipe-x: 50%;
    --sb-wipe-y: 50%;
    --sb-wipe-r0: 0px;
    --sb-wipe-r1: 150vmax;
    --sb-wipe-dur: 720ms;
    --sb-wipe-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes sb-wipe-reveal {
    from {
        clip-path: circle(var(--sb-wipe-r0) at var(--sb-wipe-x) var(--sb-wipe-y));
    }

    to {
        clip-path: circle(var(--sb-wipe-r1) at var(--sb-wipe-x) var(--sb-wipe-y));
    }
}

@keyframes sb-wipe-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* View Transitions API: la captura vieja se queda quieta debajo y la nueva se
   descubre con el círculo que crece desde el botón.

   El keyframe se declara AQUÍ, en CSS, y no solo con Element.animate desde el
   script: así la animación existe desde el primer fotograma en que nace el
   pseudo-elemento. Si se deja en manos del script y esa llamada no prende
   (promesa que no resuelve, pseudoElement no soportado, error silencioso),
   ::view-transition-new(root) se queda con animation:none y el tema cambia de
   golpe — exactamente el salto seco que esto evita. */
::view-transition-old(root) {
    animation: none;
    mix-blend-mode: normal;
    z-index: 1;
}

::view-transition-new(root) {
    animation: sb-wipe-reveal var(--sb-wipe-dur) var(--sb-wipe-ease) both;
    mix-blend-mode: normal;
    z-index: 9999;
}

/* Fallback para navegadores sin View Transitions: un velo con el fondo del
   tema destino que se expande desde el botón, cambia el tema y se desvanece. */
.theme-wipe {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    pointer-events: none;
    will-change: clip-path, opacity;
}

/* Con movimiento reducido no se elimina la transición: se cambia el barrido
   por un fundido corto. Quitarla del todo devuelve el corte seco, que es
   justo lo que molesta; un fundido respeta la preferencia sin desplazamiento. */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-new(root) {
        animation: sb-wipe-fade 240ms ease both;
    }
}


/* ==========================================================================
   4. BASE
   ========================================================================== */

html.dark {
    color-scheme: dark;
}

html.dark body {
    background: var(--sb-bg);
    color: var(--sb-text);
}

html.dark ::placeholder {
    color: #7b8ba5;
    opacity: 1;
}

html.dark ::selection {
    background: rgba(75,163,255,0.32);
}

/* Los héroes con gradiente azul se conservan (son identidad de marca), solo
   se les baja el brillo para que no deslumbren sobre fondo oscuro. */
html.dark .admin-hero,
html.dark .my-brands-hero,
html.dark .product-detail-hero,
html.dark .ap-header,
html.dark .login-brand-side,
html.dark .register-brand-side,
html.dark .forgot-brand-side,
html.dark .hero-section,
html.dark .stats-modern,
html.dark .testimonial-section,
html.dark .contact-hero,
html.dark .final-cta,
html.dark .brands-hero,
html.dark .brand-hero,
html.dark .brand-banner {
    background: var(--sb-hero);
    box-shadow: 0 18px 45px rgba(0,0,0,0.5);
}


/* ==========================================================================
   5. NAVBAR COMPARTIDO (_Navbar.cshtml, Index y Contacto lo replican)
   ========================================================================== */

html.dark .modern-navbar,
html.dark .top-navbar {
    background: rgba(13,22,38,0.88);
    border-bottom-color: #223045;
    box-shadow: 0 8px 30px rgba(0,0,0,0.45);
}

html.dark .modern-logo,
html.dark .brand-logo-text {
    color: var(--sb-heading);
}

/* El logo se deja tal cual en ambos temas: sin filtros ni versión alterna. */

html.dark .modern-nav-links a,
html.dark .nav-links a {
    color: var(--sb-text);
}

    html.dark .modern-nav-links a:hover,
    html.dark .nav-links a:hover {
        color: var(--sb-accent);
    }

html.dark .modern-hamburger {
    color: var(--sb-heading);
}

html.dark .user-dropdown-menu {
    background: var(--sb-surface);
    border-color: var(--sb-border);
    box-shadow: 0 18px 45px rgba(0,0,0,0.55);
}

html.dark .user-dropdown-header {
    border-bottom-color: var(--sb-border-soft);
}

    html.dark .user-dropdown-header strong {
        color: var(--sb-heading);
    }

    html.dark .user-dropdown-header small {
        color: var(--sb-muted);
    }

html.dark .user-dropdown-menu a,
html.dark .logout-button {
    color: var(--sb-text);
}

    html.dark .user-dropdown-menu a:hover,
    html.dark .logout-button:hover {
        background: var(--sb-surface-alt);
        color: var(--sb-accent);
    }

html.dark .logout-button i {
    color: #ff8d84;
}

/* Con "Distribución" el navbar trae 3 enlaces + 2 botones + 2 toggles; con el
   gap de 34px no cabe entre el corte del menú móvil (900px) y ~1180px. No va
   con html.dark: aplica en ambos temas. */
@media (min-width: 901px) and (max-width: 1180px) {
    /* Doble clase a propósito: el <style> de _Navbar e Index se carga
       DESPUÉS de este archivo y, a igual especificidad, ganaría. */
    .modern-navbar .modern-nav-links {
        gap: 18px;
    }

    .modern-navbar .modern-navbar-inner {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* Panel móvil del navbar */
@media (max-width: 900px) {
    html.dark .modern-nav-links {
        background: rgba(13,22,38,0.98);
        border-bottom-color: #223045;
        box-shadow: 0 18px 30px rgba(0,0,0,0.5);
    }
}


/* ==========================================================================
   6. PANEL ADMIN
   ========================================================================== */

/* --------------------------------------------------------------------------
   6.1 Fondos de página
   -------------------------------------------------------------------------- */

html.dark .users-page,
html.dark .edit-user-page,
html.dark .brand-admin-page,
html.dark .register-page,
html.dark .login-page,
html.dark .forgot-page {
    background: var(--sb-bg);
}

/* Círculos decorativos del login: casi invisibles sobre fondo oscuro. */
html.dark .login-page::before,
html.dark .forgot-page::before {
    background: rgba(75,163,255,0.08);
}

html.dark .login-page::after,
html.dark .forgot-page::after {
    background: rgba(65,190,253,0.07);
}


/* --------------------------------------------------------------------------
   6.2 Users.cshtml
   -------------------------------------------------------------------------- */

html.dark .users-shell {
    background: var(--sb-surface);
    box-shadow: var(--sb-shadow);
}

html.dark .users-title {
    color: var(--sb-heading);
}

html.dark .users-subtitle {
    color: var(--sb-muted);
}

html.dark .users-btn-edit {
    background: var(--sb-chip-bg);
    color: var(--sb-chip-text) !important;
}

html.dark .users-btn-delete {
    background: var(--sb-err-bg);
    color: var(--sb-err-text);
}

html.dark .users-alert-success {
    background: var(--sb-ok-bg);
    color: var(--sb-ok-text);
    border-color: var(--sb-ok-border);
}

html.dark .users-alert-error {
    background: var(--sb-err-bg);
    color: var(--sb-err-text);
    border-color: var(--sb-err-border);
}

html.dark .users-table th {
    background: var(--sb-surface-alt);
    color: var(--sb-heading);
}

html.dark .users-table td {
    border-bottom-color: var(--sb-border-soft);
    color: var(--sb-text);
}

html.dark .role-badge {
    background: var(--sb-chip-bg);
    color: var(--sb-chip-text);
}

/* Vista de tarjetas en móvil */
@media (max-width: 768px) {
    html.dark .users-table tr {
        background: var(--sb-surface-soft);
        border-color: var(--sb-border);
    }

    html.dark .users-table td::before {
        color: var(--sb-heading);
    }
}


/* --------------------------------------------------------------------------
   6.3 EditUser + RegisterUser (chips de marca compartidos)
   -------------------------------------------------------------------------- */

html.dark .edit-user-shell {
    background: var(--sb-surface);
    box-shadow: var(--sb-shadow);
}

html.dark .edit-user-title {
    color: var(--sb-heading);
}

html.dark .edit-user-subtitle,
html.dark .edit-help,
html.dark .edit-note,
html.dark .brand-empty,
html.dark .brand-selected-empty {
    color: var(--sb-muted);
}

html.dark .edit-label,
html.dark .register-label,
html.dark .brand-selected-title {
    color: var(--sb-heading);
}

html.dark .edit-input,
html.dark .edit-select,
html.dark .register-input,
html.dark .register-select {
    background: var(--sb-surface-soft);
    border-color: var(--sb-border);
    color: var(--sb-text-strong);
}

/* Las opciones del <select> las pinta el sistema: color-scheme las adapta,
   pero en Windows conviene fijarlas para que no salgan blancas. */
html.dark .edit-select option,
html.dark .register-select option {
    background: #131f33;
    color: var(--sb-text-strong);
}

html.dark .brand-chip {
    background: var(--sb-surface-soft);
    border-color: var(--sb-border);
    color: var(--sb-text);
}

    html.dark .brand-chip:hover {
        border-color: var(--sb-accent);
        background: var(--sb-surface-alt);
    }

html.dark .brand-chip-check {
    background: var(--sb-surface-alt);
    border-color: var(--sb-border);
}

html.dark .brand-selected {
    background: var(--sb-surface-soft);
    border-color: var(--sb-border);
}

html.dark .edit-btn-secondary,
html.dark .register-link-button {
    background: var(--sb-surface-alt);
    border-color: var(--sb-border);
    color: var(--sb-heading);
}


/* --------------------------------------------------------------------------
   6.4 LogIng / RegisterUser / LogIsNot — tarjetas partidas
   -------------------------------------------------------------------------- */

html.dark .login-wrapper,
html.dark .register-wrapper,
html.dark .forgot-wrapper {
    background: rgba(19,31,51,0.9);
    border-color: var(--sb-border);
    box-shadow: var(--sb-shadow);
}

html.dark .login-form-side,
html.dark .register-form-side,
html.dark .forgot-form-side {
    background: var(--sb-surface);
}

html.dark .login-form-title,
html.dark .register-form-title,
html.dark .forgot-form-title,
html.dark .login-label,
html.dark .forgot-label {
    color: var(--sb-heading);
}

html.dark .login-form-subtitle,
html.dark .register-form-subtitle,
html.dark .forgot-form-subtitle,
html.dark .login-bottom-text,
html.dark .register-note,
html.dark .register-help,
html.dark .remember-box {
    color: var(--sb-muted);
}

    html.dark .login-bottom-text strong {
        color: var(--sb-heading);
    }

html.dark .login-input,
html.dark .forgot-input {
    background: var(--sb-surface-soft);
    border-color: var(--sb-border);
    color: var(--sb-text-strong);
}

    html.dark .login-input:focus,
    html.dark .forgot-input:focus,
    html.dark .rp-input:focus {
        background: var(--sb-surface-alt);
        border-color: var(--sb-accent);
    }

html.dark .login-alert,
html.dark .register-alert-error,
html.dark .forgot-alert-error {
    background: var(--sb-err-bg);
    color: var(--sb-err-text);
    border-color: var(--sb-err-border);
}

html.dark .register-alert-success,
html.dark .forgot-alert-success {
    background: var(--sb-ok-bg);
    color: var(--sb-ok-text);
    border-color: var(--sb-ok-border);
}

html.dark .forgot-help-box {
    background: var(--sb-surface-soft);
    border-color: var(--sb-border);
    color: var(--sb-muted);
}

html.dark .forgot-back-login,
html.dark .forgot-link {
    color: var(--sb-accent);
}

/* Botón "Volver al inicio" del login. En claro es un botón fantasma sobre
   fondo casi blanco; en oscuro hay que oscurecer el relleno o queda como una
   mancha clara debajo del botón azul. */
html.dark .login-back-home {
    background: var(--sb-surface-soft);
    border-color: var(--sb-border);
    color: var(--sb-heading);
}

    html.dark .login-back-home:hover {
        background: var(--sb-surface-alt);
        border-color: var(--sb-accent);
        color: var(--sb-accent);
    }


/* --------------------------------------------------------------------------
   6.5 ForgotPassword / ResetPassword (.rp-*)
   -------------------------------------------------------------------------- */

html.dark .rp-card {
    background: rgba(19,31,51,0.94);
    border-color: var(--sb-border);
    box-shadow: var(--sb-shadow);
}

html.dark .rp-title,
html.dark .rp-label,
html.dark .rp-logo {
    color: var(--sb-heading);
}

html.dark .rp-subtitle,
html.dark .rp-hint,
html.dark .rp-bottom {
    color: var(--sb-muted);
}

html.dark .rp-input {
    background: var(--sb-surface-soft);
    border-color: var(--sb-border);
    color: var(--sb-text-strong);
}

html.dark .rp-alert-error {
    background: var(--sb-err-bg);
    color: var(--sb-err-text);
    border-color: var(--sb-err-border);
}

html.dark .rp-alert-ok {
    background: var(--sb-ok-bg);
    color: var(--sb-ok-text);
    border-color: var(--sb-ok-border);
}

html.dark .rp-link {
    color: var(--sb-accent);
}


/* --------------------------------------------------------------------------
   6.6 EditHomeContent (.admin-*, .section-*)
   -------------------------------------------------------------------------- */

html.dark .admin-alert-success {
    background: var(--sb-ok-bg);
    color: var(--sb-ok-text);
    border-color: var(--sb-ok-border);
}

html.dark .admin-alert-error {
    background: var(--sb-err-bg);
    color: var(--sb-err-text);
    border-color: var(--sb-err-border);
}

html.dark .admin-empty {
    background: var(--sb-surface);
    color: var(--sb-muted);
    box-shadow: var(--sb-shadow-sm);
}

    html.dark .admin-empty h3 {
        color: var(--sb-heading);
    }

    html.dark .admin-empty p {
        color: var(--sb-muted);
    }

html.dark .section-title-admin,
html.dark .section-title-modern {
    color: var(--sb-heading);
}

html.dark .section-subtitle-admin,
html.dark .section-subtitle-modern {
    color: var(--sb-muted);
}

html.dark .section-badge {
    background: var(--sb-chip-bg);
    color: var(--sb-chip-text);
    border-color: var(--sb-chip-border);
}

html.dark .admin-edit-card {
    background: var(--sb-surface);
    border-color: var(--sb-border);
    box-shadow: var(--sb-shadow-sm);
}

    html.dark .admin-edit-card:hover {
        box-shadow: 0 22px 50px rgba(0,0,0,0.55);
    }

html.dark .admin-card-top {
    background: var(--sb-surface-alt);
    border-bottom-color: var(--sb-border-soft);
}

html.dark .admin-label {
    color: var(--sb-heading);
}

html.dark .admin-meta,
html.dark .admin-help {
    color: var(--sb-muted);
}

html.dark .admin-type-pill {
    background: var(--sb-chip-bg);
    color: var(--sb-chip-text);
}

html.dark .admin-input,
html.dark .admin-textarea {
    background: var(--sb-surface-soft);
    border-color: var(--sb-border);
    color: var(--sb-text-strong);
}

    html.dark .admin-input:focus,
    html.dark .admin-textarea:focus {
        border-color: var(--sb-accent);
        background: var(--sb-surface-alt);
    }

html.dark .admin-file {
    color: var(--sb-text);
}

html.dark .admin-image-preview {
    background: var(--sb-media-light);
    border-color: var(--sb-border);
}


/* --------------------------------------------------------------------------
   6.7 EditBrandPageContent (.brand-admin-*)
   -------------------------------------------------------------------------- */

html.dark .brand-admin-title,
html.dark .brand-admin-section-title,
html.dark .brand-admin-label {
    color: var(--sb-heading);
}

html.dark .brand-admin-subtitle,
html.dark .brand-admin-meta {
    color: var(--sb-muted);
}

html.dark .brand-admin-card {
    background: var(--sb-surface);
    border-color: var(--sb-border);
    box-shadow: var(--sb-shadow-sm);
}

html.dark .brand-admin-input,
html.dark .brand-admin-textarea {
    background: var(--sb-surface-soft);
    border-color: var(--sb-border);
    color: var(--sb-text-strong);
}

html.dark .brand-admin-btn-secondary {
    background: var(--sb-surface-alt);
    color: var(--sb-heading) !important;
    border-color: var(--sb-border);
}

html.dark .brand-admin-alert-success {
    background: var(--sb-ok-bg);
    color: var(--sb-ok-text);
    border-color: var(--sb-ok-border);
}

html.dark .brand-admin-alert-error {
    background: var(--sb-err-bg);
    color: var(--sb-err-text);
    border-color: var(--sb-err-border);
}

html.dark .brand-admin-empty {
    background: var(--sb-surface);
    color: var(--sb-muted);
    box-shadow: var(--sb-shadow-sm);
}

html.dark .brand-admin-image-preview {
    background: var(--sb-media-light);
    border-color: var(--sb-border);
}

html.dark .brand-admin-file {
    color: var(--sb-text);
}


/* --------------------------------------------------------------------------
   6.8 MyBrandPages
   -------------------------------------------------------------------------- */

html.dark .my-brands-actions {
    background: rgba(19,31,51,0.72);
    border-color: var(--sb-border);
    box-shadow: 0 18px 42px rgba(0,0,0,0.45);
}

html.dark .my-brands-toolbar-text {
    color: var(--sb-muted);
}

    html.dark .my-brands-toolbar-text i {
        color: var(--sb-accent);
    }

html.dark .brand-access-card {
    background: var(--sb-surface);
    border-color: var(--sb-border);
    box-shadow: var(--sb-shadow-sm);
}

    html.dark .brand-access-card:hover {
        box-shadow: 0 22px 50px rgba(0,0,0,0.55);
    }

/* Zona del logo de marca: se mantiene clara para no apagar los logotipos. */
html.dark .brand-access-top {
    background: var(--sb-media-light);
}

html.dark .brand-access-title {
    color: var(--sb-heading);
}

html.dark .brand-access-description {
    color: var(--sb-muted);
}


/* --------------------------------------------------------------------------
   6.9 MisProductos (.mp-*)
   -------------------------------------------------------------------------- */

html.dark .mp-title {
    color: var(--sb-heading);
}

html.dark .mp-card {
    background: var(--sb-surface);
    border-color: var(--sb-border);
    box-shadow: var(--sb-shadow-sm);
}

/* Foto de producto: recuadro claro a propósito. */
html.dark .mp-img {
    background: var(--sb-media-light);
}

html.dark .mp-name {
    color: var(--sb-text-strong);
}

html.dark .mp-meta {
    color: var(--sb-muted);
}

    html.dark .mp-meta strong {
        color: var(--sb-heading);
    }

html.dark .mp-alert.error {
    background: var(--sb-err-bg);
    color: var(--sb-err-text);
    border-color: var(--sb-err-border);
}

html.dark .mp-alert.success {
    background: var(--sb-ok-bg);
    color: var(--sb-ok-text);
    border-color: var(--sb-ok-border);
}

html.dark .mp-badge.on,
html.dark .mp-act.play {
    background: var(--sb-ok-bg);
    color: var(--sb-ok-text);
}

html.dark .mp-badge.off,
html.dark .mp-act.pause {
    background: var(--sb-warn-bg);
    color: var(--sb-warn-text);
}

html.dark .mp-act.edit {
    background: var(--sb-chip-bg);
    color: var(--sb-chip-text);
}

html.dark .mp-act.del {
    background: var(--sb-err-bg);
    color: var(--sb-err-text);
}

html.dark .mp-empty {
    background: var(--sb-surface);
    color: var(--sb-muted);
    box-shadow: var(--sb-shadow-sm);
}


/* --------------------------------------------------------------------------
   6.10 AgregarProducto + EditarProducto (.ap-*)
   -------------------------------------------------------------------------- */

html.dark .ap-card {
    background: var(--sb-surface);
    border-color: var(--sb-border);
    box-shadow: var(--sb-shadow);
}

html.dark .ap-back {
    background: var(--sb-surface-alt);
    color: var(--sb-heading);
    border-color: var(--sb-border);
}

html.dark .ap-brand-chip {
    background: var(--sb-chip-bg);
    color: var(--sb-chip-text);
}

html.dark .ap-alert.error {
    background: var(--sb-err-bg);
    color: var(--sb-err-text);
    border-color: var(--sb-err-border);
}

html.dark .ap-alert.success {
    background: var(--sb-ok-bg);
    color: var(--sb-ok-text);
    border-color: var(--sb-ok-border);
}

html.dark .ap-imgcol {
    background: var(--sb-surface-soft);
    border-color: var(--sb-border);
}

html.dark .ap-imglabel {
    color: var(--sb-heading);
}

html.dark .ap-current-none {
    color: var(--sb-muted);
}

html.dark .ap-current {
    background: var(--sb-media-light);
    border-color: var(--sb-border);
}

html.dark .ap-field label {
    color: var(--sb-heading);
}

html.dark .ap-field input[type="text"],
html.dark .ap-field input[type="number"],
html.dark .ap-field input[type="url"],
html.dark .ap-field textarea,
html.dark .ap-field select {
    background: var(--sb-surface-soft);
    border-color: var(--sb-border);
    color: var(--sb-text-strong);
}

html.dark .ap-field select option {
    background: #131f33;
    color: var(--sb-text-strong);
}


/* --------------------------------------------------------------------------
   6.11 EndpointsProducto (ficha con iframes de InfoCode)
   -------------------------------------------------------------------------- */

html.dark .product-back-btn {
    background: var(--sb-surface-alt);
    color: var(--sb-heading);
    border-color: var(--sb-border);
}

    html.dark .product-back-btn:hover {
        border-color: var(--sb-accent);
        color: var(--sb-accent);
    }

html.dark .quick-action-card {
    background: rgba(19,31,51,0.85);
    border-color: var(--sb-border);
    box-shadow: var(--sb-shadow-sm);
}

html.dark .quick-action-title {
    color: var(--sb-heading);
}

html.dark .quick-action-text {
    color: var(--sb-muted);
}

html.dark .quick-action-link {
    background: var(--sb-chip-bg);
    color: var(--sb-chip-text) !important;
}

    html.dark .quick-action-link:hover {
        background: var(--sb-accent);
        color: #06213f !important;
    }

html.dark .section-box-modern {
    background: var(--sb-surface);
    border-color: var(--sb-border);
    box-shadow: var(--sb-shadow-sm);
}

html.dark .section-header-modern {
    background: var(--sb-surface-alt);
    border-bottom-color: var(--sb-border-soft);
}

html.dark .frame-note {
    color: var(--sb-muted);
}

/* Los iframes cargan infocode.io: contenido externo, siempre claro.
   Se deja el marco claro para que no haya un salto brusco de color. */
html.dark .frame-wrapper {
    background: var(--sb-media-light);
}


/* ==========================================================================
   7. SITIO PÚBLICO
   ========================================================================== */

/* --------------------------------------------------------------------------
   7.1 Encabezados de sección (Index, Contacto, OurBrands1, ficha de marca)
   -------------------------------------------------------------------------- */

html.dark .section-header,
html.dark .section-header-modern,
html.dark .brands-section-header,
html.dark .brand-section-header,
html.dark .brand-social-row {
    border-color: var(--sb-border);
}

html.dark .section-title,
html.dark .brands-section-title,
html.dark .brand-section-title,
html.dark .modern-section-header h2 {
    color: var(--sb-heading);
}

html.dark .section-text,
html.dark .brands-section-text,
html.dark .brand-section-subtitle,
html.dark .modern-section-header p {
    color: var(--sb-muted);
}

html.dark .section-eyebrow {
    color: var(--sb-accent);
}

html.dark .brands-count-badge,
html.dark .brand-count-badge,
html.dark .brands-info-badge {
    background: var(--sb-chip-bg);
    color: var(--sb-chip-text);
    border-color: var(--sb-chip-border);
}

html.dark .empty-brands,
html.dark .no-products,
html.dark .brand-carousel-empty {
    background: var(--sb-surface);
    color: var(--sb-muted);
    box-shadow: var(--sb-shadow-sm);
}

    html.dark .empty-brands h3,
    html.dark .no-products h4 {
        color: var(--sb-heading);
    }


/* --------------------------------------------------------------------------
   7.2 Index.cshtml
   -------------------------------------------------------------------------- */

html.dark .about-floating-badge {
    background: rgba(19,31,51,0.90);
}

    html.dark .about-floating-badge h3 {
        color: var(--sb-heading);
    }

    html.dark .about-floating-badge p {
        color: var(--sb-muted);
    }

html.dark .stat-card {
    background: var(--sb-surface);
    border-color: var(--sb-border);
    box-shadow: var(--sb-shadow-sm);
}

html.dark .stat-number {
    color: var(--sb-heading);
}

html.dark .stat-label {
    color: var(--sb-muted);
}

/* Franjas de fondo claro que ocupan todo el ancho. */
html.dark .brand-carousel-section,
html.dark .contact-banner {
    background: var(--sb-bg);
}

html.dark .clients-section {
    background: var(--sb-surface-soft);
}

html.dark #carousel123 {
    background: var(--sb-media-bg);
    box-shadow: var(--sb-shadow-sm);
}

/* Carruseles de marcas y clientes: recuadros claros a propósito, los
   logotipos vienen recortados sobre blanco. */
html.dark .hero-brand-slide,
html.dark .hero-brand-slide img,
html.dark .client-logo-box {
    background: var(--sb-media-light);
}

html.dark .client-logo-box {
    border-color: var(--sb-border);
}

html.dark .carousel-control i {
    background: rgba(19,31,51,0.92);
    color: var(--sb-text-strong);
}


/* --------------------------------------------------------------------------
   7.3 Contacto.cshtml
   -------------------------------------------------------------------------- */

html.dark .contact-info-card,
html.dark .contact-option-card {
    background: rgba(19,31,51,0.88);
    border-color: var(--sb-border);
    box-shadow: var(--sb-shadow-sm);
}

html.dark .contact-info-title,
html.dark .option-title {
    color: var(--sb-heading);
}

html.dark .contact-info-text,
html.dark .option-text {
    color: var(--sb-muted);
}

html.dark .contact-info-text a {
    color: var(--sb-accent);
}

/* Cabecera decorativa de la tarjeta (solo lleva un icono, no imágenes). */
html.dark .option-top {
    background: var(--sb-media-bg);
}


/* --------------------------------------------------------------------------
   7.4 OurBrands1.cshtml
   -------------------------------------------------------------------------- */

html.dark .brand-card-modern {
    background: var(--sb-surface);
    border-color: var(--sb-border);
    box-shadow: var(--sb-shadow-sm);
}

/* Lienzo del logotipo de marca: claro a propósito. */
html.dark .brand-card-bg {
    background: var(--sb-media-light);
}

html.dark .brand-name-bar {
    background: rgba(10,17,32,0.90);
    border-color: var(--sb-border);
}

html.dark .brand-name {
    color: var(--sb-accent);
}

html.dark .brand-fallback {
    color: var(--sb-heading);
}


/* --------------------------------------------------------------------------
   7.5 OurProductssByIdBrand.cshtml (ficha pública de marca)
   -------------------------------------------------------------------------- */

html.dark .brand-main-card {
    background: rgba(19,31,51,0.94);
    border-color: var(--sb-border);
    box-shadow: var(--sb-shadow);
}

/* Columna con el logotipo y la foto del producto: se queda clara. */
html.dark .brand-visual {
    background: var(--sb-media-light);
}

html.dark .brand-logo-box {
    background: #ffffff;
    border-color: #d9e4f3;
}

html.dark .brand-info-title {
    color: var(--sb-heading);
}

html.dark .brand-info-text {
    color: var(--sb-muted);
}

html.dark .brand-social-link {
    background: var(--sb-surface-alt);
    border-color: var(--sb-border);
    color: var(--sb-text);
}

html.dark .benefit-card,
html.dark .product-card {
    background: var(--sb-surface);
    border-color: var(--sb-border);
    box-shadow: var(--sb-shadow-sm);
}

/* Aro de las altas manuales: en oscuro se usa el azul claro del tema, porque
   el #006dff de la vista se pierde contra el fondo navy. Va después de la
   regla de arriba, que también fija box-shadow y si no lo pisaría. */
html.dark .product-card.is-manual {
    box-shadow: 0 0 0 2px var(--sb-accent), 0 10px 30px rgba(75,163,255,.22);
}

    html.dark .product-card.is-manual:hover {
        box-shadow: 0 0 0 2px var(--sb-accent), 0 22px 50px rgba(75,163,255,.32);
    }

html.dark .product-manual-flag {
    background: linear-gradient(135deg, #0b4a99 0%, #4ba3ff 100%);
    color: #06213f;
    box-shadow: 0 6px 18px rgba(0,0,0,.45);
}

html.dark .benefit-title {
    color: var(--sb-heading);
}

html.dark .benefit-text,
html.dark .product-description {
    color: var(--sb-muted);
}

/* Foto de producto: recuadro claro a propósito. */
html.dark .product-img-box {
    background: var(--sb-media-light);
}

html.dark .product-title {
    color: var(--sb-text-strong);
}

html.dark .product-info {
    background: var(--sb-surface-soft);
    border-color: var(--sb-border);
    color: var(--sb-text);
}

    html.dark .product-info strong {
        color: var(--sb-heading);
    }

/* Portafolio agrupado que ve el visitante sin sesión (tarjeta con "Ver más"). */
html.dark .portfolio-locked-info,
html.dark .portfolio-teaser {
    background: var(--sb-surface);
    border-color: var(--sb-border);
    box-shadow: var(--sb-shadow-sm);
}

html.dark .portfolio-locked-title,
html.dark .portfolio-teaser-title {
    color: var(--sb-heading);
}

html.dark .portfolio-locked-text,
html.dark .portfolio-teaser-more {
    color: var(--sb-muted);
}

    html.dark .portfolio-locked-text strong {
        color: var(--sb-text-strong);
    }

html.dark .portfolio-locked-note {
    background: var(--sb-surface-alt);
    color: var(--sb-heading);
}

/* Miniaturas: recuadro claro a propósito, igual que .product-img-box. */
html.dark .portfolio-teaser-thumb {
    background: var(--sb-media-light);
}