/* ============================================================================ tema-claro.css — MODO CLARO de web2 (web pública + panel de cliente). ---------------------------------------------------------------------------- El modo OSCURO (azul marino + cian) es el BASE de styles.css/panel.css/mb.css y queda intacto. Aquí SOLO se sobrescriben colores cuando el usuario elige el modo claro (cookie mb_tema=claro → , ver tema.go). Paleta = la del PANEL ADMIN (design system probado): grises cálidos, tinta negra y pasteles (verde/rojo/ámbar/azul). Ver http_panel_admin/estaticos/panel.css. Estrategia (ADR de la sesión): NO se tokenizan los ~630 colores del oscuro; se redefinen las variables :root que ya se usan (var()) + overrides dirigidos a los selectores de alto peso. La especificidad `html[data-tema="claro"] .x` (0,1,1,1) gana a `.x` sin necesidad de !important. ============================================================================ */ /* -------- 1) Tokens claros (cubre todos los usos de var(--…)) --------------- */ html[data-tema="claro"] { --bg: #F7F6F3; --bg-soft: #FFFFFF; --panel: #FFFFFF; --panel-2: #F9F9F8; --panel-3: #F3F2EF; --line: rgba(17,17,17,.05); --cyan: #235773; /* acento (era cian): azul-tinta admin, buen contraste sobre claro */ --cyan-2: #235773; --blue: #235773; --green: #2F5D3A; /* verde-tinta admin */ --white: #111111; /* "texto principal" (antes casi-blanco) → tinta */ --muted: #55534E; /* tinta-suave */ --muted-2: #8A877F; /* tinta-tenue */ --border: rgba(17,17,17,.10); --card-border: #EAEAEA; --shadow: 0 14px 40px rgba(17,17,17,.08); /* Alias propios de esta hoja (paleta admin), para no repetir los hex. */ --mb-tinta: #111111; --mb-tinta-suave: #55534E; --mb-tinta-tenue: #8A877F; --mb-tarjeta: #FFFFFF; --mb-tarjeta-alt: #F9F9F8; --mb-borde: #EAEAEA; --mb-borde-fuerte:#E0E0DE; --mb-verde-pal: #EDF3EC; --mb-verde-tinta:#2F5D3A; --mb-verde-bde:#CFE2CE; --mb-rojo-pal: #FDEBEC; --mb-rojo-tinta: #8A3038; --mb-rojo-bde: #F3D2D5; --mb-azul-pal: #E1F3FE; --mb-azul-tinta: #235773; --mb-azul-bde: #CFE6F5; --mb-ambar-pal: #FBF3DB; --mb-ambar-tinta:#7A5B18; --mb-ambar-bde:#E6D9AD; } /* ============================================================================ 2) WEB PÚBLICA (styles.css) ============================================================================ */ /* -- Fondos base -- */ html[data-tema="claro"] body { background: radial-gradient(circle at 15% 12%, rgba(35,87,115,.04), transparent 20%), linear-gradient(180deg, #F7F6F3 0%, #FFFFFF 100%); color: var(--mb-tinta); } html[data-tema="claro"] .has-public-code-bg { background: linear-gradient(180deg, #F7F6F3 0%, #FFFFFF 100%); } html[data-tema="claro"] body::after { background: none; } /* Fondo animado de "código": en claro se VE y SE MUEVE igual que en oscuro (antes estaba a opacity .07 = invisible → parecía "fondo fijo"). Se re-tiñe a la paleta admin (azul/verde tinta) y el velo (__shade) pasa de oscuro a un velo CLARO para no ensuciar la página. */ html[data-tema="claro"] .public-code-bg { opacity: .42; } html[data-tema="claro"] .public-code-bg__shade { background: linear-gradient(90deg, rgba(247,246,243,.74) 0%, rgba(247,246,243,.5) 34%, rgba(247,246,243,.56) 66%, rgba(247,246,243,.8) 100%); } html[data-tema="claro"] .public-code-bg__column { color: rgba(35,87,115,.42); text-shadow: none; } html[data-tema="claro"] .public-code-bg__column:nth-child(even) { color: rgba(47,93,58,.38); text-shadow: none; } html[data-tema="claro"] .public-code-bg__column span { border-bottom-color: rgba(17,17,17,.07); } html[data-tema="claro"] .public-code-bg__column span.is-blue { color: rgba(35,87,115,.5); text-shadow: none; } html[data-tema="claro"] .public-code-bg__column span.is-green { color: rgba(47,93,58,.44); text-shadow: none; border-bottom-color: rgba(47,93,58,.14); } /* -- Topbar / navegación -- */ html[data-tema="claro"] .topbar { background: rgba(255,255,255,.85); border-bottom: 1px solid var(--mb-borde); box-shadow: 0 6px 20px rgba(17,17,17,.05); } html[data-tema="claro"] .topbar::after { display: none; } html[data-tema="claro"] .menu { color: var(--mb-tinta-suave); } html[data-tema="claro"] .menu a:hover, html[data-tema="claro"] .menu a.active-link { color: var(--mb-tinta); } html[data-tema="claro"] .brand-logo { filter: none; } html[data-tema="claro"] .login-btn { color: var(--mb-tinta-suave); } html[data-tema="claro"] .login-btn:hover { color: var(--mb-tinta); text-shadow: none; } /* -- Botones -- */ html[data-tema="claro"] .cta, html[data-tema="claro"] .submit-btn { background: var(--mb-tinta); color: #fff; box-shadow: 0 8px 22px rgba(17,17,17,.16); } html[data-tema="claro"] .cta:hover, html[data-tema="claro"] .submit-btn:hover { filter: brightness(1.12); box-shadow: 0 10px 26px rgba(17,17,17,.22); } html[data-tema="claro"] .btn-outline { border-color: var(--mb-borde-fuerte); color: var(--mb-tinta); background: #fff; box-shadow: none; } html[data-tema="claro"] .btn-ghost { border-color: var(--mb-borde-fuerte); color: var(--mb-tinta); background: #fff; } /* -- Tarjetas glass -- */ html[data-tema="claro"] .glass-panel, html[data-tema="claro"] .glass-card { background: var(--mb-tarjeta); border: 1px solid var(--card-border); box-shadow: 0 10px 30px rgba(17,17,17,.06); backdrop-filter: none; } html[data-tema="claro"] .glass-panel::before, html[data-tema="claro"] .glass-card::before, html[data-tema="claro"] .glass-panel::after, html[data-tema="claro"] .glass-card::after { display: none; } html[data-tema="claro"] .premium-glow, html[data-tema="claro"] .premium-glow-soft { box-shadow: 0 8px 24px rgba(17,17,17,.06); } html[data-tema="claro"] .tilt-card:hover { border-color: var(--mb-borde-fuerte); box-shadow: 0 12px 28px rgba(17,17,17,.10); } /* -- Eyebrow / badges de sección -- */ html[data-tema="claro"] .eyebrow { background: var(--mb-azul-pal); border-color: var(--mb-azul-bde); color: var(--mb-azul-tinta); box-shadow: none; } html[data-tema="claro"] .eyebrow::before { background: var(--mb-verde-tinta); box-shadow: none; } html[data-tema="claro"] .section-badge-icon { background: var(--mb-tarjeta-alt); border-color: var(--mb-borde); box-shadow: none; } html[data-tema="claro"] .section-heading p { color: var(--mb-tinta-suave); } /* -- Iconos de feature/contacto: gradientes oscuros → pasteles admin -- */ html[data-tema="claro"] .feature-icon, html[data-tema="claro"] .contact-icon { border-color: var(--mb-borde); box-shadow: none; } html[data-tema="claro"] .feature-icon.cyan, html[data-tema="claro"] .contact-icon.cyan, html[data-tema="claro"] .feature-icon.sky { background: var(--mb-azul-pal); color: var(--mb-azul-tinta); } html[data-tema="claro"] .feature-icon.green, html[data-tema="claro"] .contact-icon.green { background: var(--mb-verde-pal); color: var(--mb-verde-tinta); } html[data-tema="claro"] .feature-icon.blue, html[data-tema="claro"] .contact-icon.blue, html[data-tema="claro"] .contact-icon.faq { background: var(--mb-azul-pal); color: var(--mb-azul-tinta); } html[data-tema="claro"] .feature-icon.pink { background: var(--mb-rojo-pal); color: var(--mb-rojo-tinta); } html[data-tema="claro"] .feature-icon.yellow { background: var(--mb-ambar-pal); color: var(--mb-ambar-tinta); } html[data-tema="claro"] .feature-card p { color: var(--mb-tinta-suave); } /* -- Demo credenciales -- */ html[data-tema="claro"] .demo-credential-row { border-bottom-color: var(--mb-borde); } html[data-tema="claro"] .demo-credential-row span { color: var(--mb-tinta-suave); } html[data-tema="claro"] .demo-credential-row strong { color: var(--mb-tinta); } /* -- "Plataforma": rail lateral demostrativo -- */ html[data-tema="claro"] .side-menu a { color: var(--mb-tinta-suave); } html[data-tema="claro"] .side-menu a:hover { background: var(--mb-tarjeta-alt); color: var(--mb-tinta); } html[data-tema="claro"] .side-menu a.active { color: var(--mb-azul-tinta); background: var(--mb-azul-pal); border-color: var(--mb-azul-bde); } html[data-tema="claro"] .platform-robot-card { background: var(--mb-tarjeta-alt); } html[data-tema="claro"] .platform-robot-title { color: var(--mb-verde-tinta); text-shadow: none; } html[data-tema="claro"] .bot-status { background: var(--mb-tarjeta-alt); border-color: var(--mb-borde); } html[data-tema="claro"] .bot-status .top, html[data-tema="claro"] .bot-status .bottom { color: var(--mb-tinta-tenue); } html[data-tema="claro"] .progress { background: rgba(17,17,17,.08); } /* -- Pills de estado (pedidos) → pasteles admin -- */ html[data-tema="claro"] .pill, html[data-tema="claro"] .pill--completado { background: var(--mb-verde-pal); color: var(--mb-verde-tinta); border-color: var(--mb-verde-bde); } html[data-tema="claro"] .pill--pendiente { background: var(--mb-ambar-pal); color: var(--mb-ambar-tinta); border-color: var(--mb-ambar-bde); } html[data-tema="claro"] .pill--en_proceso { background: var(--mb-azul-pal); color: var(--mb-azul-tinta); border-color: var(--mb-azul-bde); } html[data-tema="claro"] .pill--cancelado { background: var(--mb-rojo-pal); color: var(--mb-rojo-tinta); border-color: var(--mb-rojo-bde); } /* -- Selector de idioma + toggle de tema en la web pública -- */ html[data-tema="claro"] .lang-toggle { background: #fff; border-color: var(--mb-borde-fuerte); color: var(--mb-tinta-suave); } html[data-tema="claro"] .lang-menu { background: #fff; border: 1px solid var(--mb-borde); } html[data-tema="claro"] .lang-option { color: var(--mb-tinta-suave); } html[data-tema="claro"] .lang-option:hover, html[data-tema="claro"] .lang-option.active { color: var(--mb-tinta); background: var(--mb-tarjeta-alt); } html[data-tema="claro"] .tema-toggle { background: #fff; border-color: var(--mb-borde-fuerte); color: var(--mb-tinta-suave); } html[data-tema="claro"] .tema-toggle:hover { border-color: var(--mb-tinta); color: var(--mb-tinta); } /* -- Pie de página -- */ html[data-tema="claro"] .site-footer { background: rgba(255,255,255,.9); border-top: 1px solid var(--mb-borde); backdrop-filter: none; } html[data-tema="claro"] .footer-logo { filter: none; } html[data-tema="claro"] .footer-brand p { color: var(--mb-tinta-tenue); } html[data-tema="claro"] .footer-links { color: var(--mb-tinta-suave); } html[data-tema="claro"] .footer-links a:hover { color: var(--mb-tinta); } html[data-tema="claro"] .footer-legal-links a { color: var(--mb-tinta-tenue); } html[data-tema="claro"] .footer-legal-links a:hover { color: var(--mb-tinta); } html[data-tema="claro"] .footer-social__link { background: #fff; border-color: var(--mb-borde-fuerte); color: var(--mb-tinta-suave); box-shadow: 0 4px 12px rgba(17,17,17,.05); } html[data-tema="claro"] .footer-social__link:hover { color: var(--mb-tinta); border-color: var(--mb-tinta); box-shadow: 0 6px 16px rgba(17,17,17,.10); } /* ============================================================================ 3) PANEL DE CLIENTE (panel.css) ============================================================================ */ html[data-tema="claro"] .panel-nav a { color: var(--mb-tinta-suave); } html[data-tema="claro"] .panel-nav a:hover { color: var(--mb-tinta); background: var(--mb-tarjeta-alt); border-color: var(--mb-borde); } html[data-tema="claro"] .panel-nav a.active { color: #fff; background: var(--mb-tinta); border-color: var(--mb-tinta); box-shadow: none; } html[data-tema="claro"] .panel-nav a.panel-nav-destacado:not(.active) { color: var(--mb-verde-tinta); background: var(--mb-verde-pal); border-color: var(--mb-verde-bde); } html[data-tema="claro"] .panel-meta-card { background: var(--mb-tarjeta-alt); border-color: var(--mb-borde); } html[data-tema="claro"] .panel-meta-card small, html[data-tema="claro"] .panel-meta-card p { color: var(--mb-tinta-tenue); } html[data-tema="claro"] .panel-meta-card strong { color: var(--mb-tinta); } html[data-tema="claro"] .panel-brand span { color: var(--mb-tinta-tenue); } html[data-tema="claro"] .panel-topbar, html[data-tema="claro"] .panel-sidebar { /* glass-panel ya cubierto arriba (fondo blanco) */ } html[data-tema="claro"] .panel-mobile-toggle, html[data-tema="claro"] .panel-mobile-close { background: var(--mb-tarjeta-alt); color: var(--mb-tinta-suave); } html[data-tema="claro"] .panel-search input, html[data-tema="claro"] .panel-dt-search input, html[data-tema="claro"] .panel-mt5-head-actions input { background: #fff; border-color: var(--mb-borde-fuerte); color: var(--mb-tinta); } html[data-tema="claro"] .panel-user { background: #fff; border-color: var(--mb-borde); } html[data-tema="claro"] .panel-user span { color: var(--mb-tinta-suave); } html[data-tema="claro"] .panel-user-avatar { background: var(--mb-tinta); color: #fff; } html[data-tema="claro"] .panel-page-head h1 { color: var(--mb-tinta); text-shadow: none; } html[data-tema="claro"] .panel-page-head p { color: var(--mb-tinta-suave); } /* Botones del panel */ html[data-tema="claro"] .panel-btn { background: var(--mb-tarjeta-alt); border-color: var(--mb-borde-fuerte); color: var(--mb-tinta); } html[data-tema="claro"] .panel-btn.primary { background: var(--mb-tinta); color: #fff; border-color: var(--mb-tinta); } html[data-tema="claro"] .panel-btn.success { background: var(--mb-verde-tinta); color: #fff; border-color: var(--mb-verde-tinta); } html[data-tema="claro"] .panel-btn.danger-soft { background: var(--mb-rojo-pal); color: var(--mb-rojo-tinta); border-color: var(--mb-rojo-bde); } html[data-tema="claro"] .panel-btn.danger-soft:hover { background: #fbe0e2; } html[data-tema="claro"] .panel-meta .panel-logout-btn { background: var(--mb-tinta); color: #fff; border-color: var(--mb-tinta); box-shadow: none; } html[data-tema="claro"] .panel-meta .panel-logout-btn:hover { filter: brightness(1.15); box-shadow: none; } /* KPIs / métricas / gráficas */ html[data-tema="claro"] .metric-card small, html[data-tema="claro"] .chart-sub, html[data-tema="claro"] .status-item small, html[data-tema="claro"] .panel-dt-meta-label, html[data-tema="claro"] .panel-dt-page-label { color: var(--mb-tinta-tenue); } html[data-tema="claro"] .metric-trend { color: var(--mb-verde-tinta); } html[data-tema="claro"] .metric-trend.down { color: var(--mb-rojo-tinta); } html[data-tema="claro"] .line-chart { background: var(--mb-tarjeta-alt); border-color: var(--mb-borde); } html[data-tema="claro"] .status-item { background: var(--mb-tarjeta-alt); border-color: var(--mb-borde); } /* Badges */ html[data-tema="claro"] .badge { border-color: var(--mb-borde); } html[data-tema="claro"] .badge.green { color: var(--mb-verde-tinta); background: var(--mb-verde-pal); border-color: var(--mb-verde-bde); } html[data-tema="claro"] .badge.cyan { color: var(--mb-azul-tinta); background: var(--mb-azul-pal); border-color: var(--mb-azul-bde); } html[data-tema="claro"] .badge.orange { color: var(--mb-ambar-tinta); background: var(--mb-ambar-pal); border-color: var(--mb-ambar-bde); } /* Tablas del panel */ html[data-tema="claro"] .table-wrap { border-color: var(--mb-borde); } html[data-tema="claro"] .panel-table th { color: var(--mb-tinta-tenue); } html[data-tema="claro"] .panel-table td { color: var(--mb-tinta-suave); border-bottom-color: var(--mb-borde); } html[data-tema="claro"] .panel-table th { border-bottom-color: var(--mb-borde); } html[data-tema="claro"] .panel-table tr:hover td { background: var(--mb-tarjeta-alt); } html[data-tema="claro"] .panel-dt-meta-count { background: var(--mb-azul-pal); color: var(--mb-azul-tinta); border-color: var(--mb-azul-bde); } html[data-tema="claro"] .panel-dt-page { background: #fff; border-color: var(--mb-borde-fuerte); color: var(--mb-tinta-suave); } /* Biblioteca de setups / modales de bot (crear/confirmar/borrar) */ html[data-tema="claro"] .panel-bot-library-body, html[data-tema="claro"] .panel-bot-confirm-body, html[data-tema="claro"] .panel-bot-delete-body { background: var(--mb-tarjeta-alt); border-color: var(--mb-borde); } html[data-tema="claro"] .panel-bot-library-toolbar strong { color: var(--mb-tinta); } html[data-tema="claro"] .panel-bot-library-toolbar span, html[data-tema="claro"] .panel-bot-library-group-count { color: var(--mb-tinta-tenue); } html[data-tema="claro"] .panel-bot-setup-card { background: #fff; color: var(--mb-tinta-suave); border-color: var(--mb-borde); } html[data-tema="claro"] .panel-bot-setup-card-head strong { color: var(--mb-tinta); } html[data-tema="claro"] .panel-bot-setup-risk, html[data-tema="claro"] .panel-bot-setup-capital { color: var(--mb-tinta-suave); background: var(--mb-tarjeta-alt); border-color: var(--mb-borde); } html[data-tema="claro"] .panel-bot-setup-action { background: var(--mb-tinta); color: #fff; border-color: var(--mb-tinta); box-shadow: none; } html[data-tema="claro"] .panel-bot-confirm-item, html[data-tema="claro"] .panel-bot-confirm-description, html[data-tema="claro"] .panel-bot-delete-item { background: var(--mb-tarjeta-alt); border-color: var(--mb-borde); } html[data-tema="claro"] .panel-bot-confirm-item strong { color: var(--mb-tinta); } html[data-tema="claro"] .panel-bot-confirm-description p { color: var(--mb-tinta-suave); } html[data-tema="claro"] .panel-bot-confirm-label { color: var(--mb-tinta-tenue); } html[data-tema="claro"] .panel-bot-toggle-note { color: var(--mb-tinta-suave); } /* ============================================================================ 4) COMPONENTES PROPIOS mb.css (dialog, toast, altcha, botones, auth, tickets) ============================================================================ */ html[data-tema="claro"] .mb-dialog { background: transparent; border: 0; color: var(--mb-tinta); } /* La CAJA visible del modal es .mb-dialog__panel (gradiente navy en oscuro). En claro tenía fondo oscuro sin override → marco navy alrededor del login/registro y modales del panel (confirmar pedido, on/off, desinstalar) enteros oscuros. Un solo override los cubre TODOS. */ html[data-tema="claro"] .mb-dialog__panel { background: #fff; border-color: var(--mb-borde); box-shadow: 0 30px 80px rgba(17,17,17,.18), 0 0 0 1px rgba(17,17,17,.02); } html[data-tema="claro"] .mb-dialog::backdrop { background: rgba(17,17,17,.35); } /* En el modal de login/registro el contenido inyectado ya es una .glass-panel (blanca): dentro del panel blanco sobra su borde/sombra propios → se aplanan para que sea UNA sola tarjeta. */ html[data-tema="claro"] .mb-dialog__panel .glass-panel { border: 0; box-shadow: none; background: transparent; } html[data-tema="claro"] .mb-dialog__close { background: var(--mb-tarjeta-alt); border-color: var(--mb-borde); color: var(--mb-tinta-suave); } html[data-tema="claro"] .mb-dialog .login-head p { color: var(--mb-tinta-tenue); } html[data-tema="claro"] .mb-auth-cargando { color: var(--mb-tinta-tenue); } html[data-tema="claro"] .mb-btn--primary { background: var(--mb-tinta); color: #fff; } html[data-tema="claro"] .mb-btn--ghost { color: var(--mb-tinta-suave); border-color: var(--mb-borde-fuerte); } html[data-tema="claro"] .mb-btn--ghost:hover { color: var(--mb-tinta); border-color: var(--mb-tinta); } html[data-tema="claro"] .auth-alert { background: var(--mb-rojo-pal); border-color: var(--mb-rojo-bde); color: var(--mb-rojo-tinta); } html[data-tema="claro"] .auth-swap { color: var(--mb-tinta-tenue); } html[data-tema="claro"] .auth-swap a { color: var(--mb-azul-tinta); } /* Altcha (captcha) */ html[data-tema="claro"] .mb-altcha { background: #fff; border-color: var(--mb-borde-fuerte); color: var(--mb-tinta-suave); } html[data-tema="claro"] .mb-altcha__status { color: var(--mb-tinta-suave); } html[data-tema="claro"] .mb-altcha__badge { color: var(--mb-tinta-tenue); } /* Tickets (soporte) */ html[data-tema="claro"] .ticket-ref { color: var(--mb-tinta-tenue); } html[data-tema="claro"] .ticket-espera { color: var(--mb-tinta-tenue); } html[data-tema="claro"] .ticket-state--pendiente, html[data-tema="claro"] .ticket-state--abierto, html[data-tema="claro"] .ticket-state--re-abierto { background: var(--mb-ambar-pal); color: var(--mb-ambar-tinta); border-color: var(--mb-ambar-bde); } html[data-tema="claro"] .ticket-state--respondido { background: var(--mb-azul-pal); color: var(--mb-azul-tinta); border-color: var(--mb-azul-bde); } /* ============================================================================ 5) RED DE SEGURIDAD DE TEXTO — títulos y textos que en el oscuro heredaban el casi-blanco global. Selectores de TAG (especificidad baja): los overrides por clase de arriba (acentos) siguen ganando. Evita títulos "invisibles" sobre el claro sin perseguir cada #hex hardcodeado. El mockup del móvil (phone-*) se deja oscuro a propósito (es una "pantalla de producto"). ============================================================================ */ html[data-tema="claro"] h1, html[data-tema="claro"] h2, html[data-tema="claro"] h3, html[data-tema="claro"] h4 { color: var(--mb-tinta); } html[data-tema="claro"] .page-subtitle, html[data-tema="claro"] .lead { color: var(--mb-tinta-suave); } /* El mockup del hero (captura de la app) conserva su aspecto oscuro. */ html[data-tema="claro"] .phone-mock h1, html[data-tema="claro"] .phone-mock h2, html[data-tema="claro"] .phone-mock h3, html[data-tema="claro"] .phone-mock h4 { color: inherit; } /* ============================================================================ 6) FLECOS de la WEB PÚBLICA en claro que quedaban con fondos oscuros hardcodeados (no cuelgan de var()): formulario de contacto, banda de marca + marquee, y la tarjeta de credenciales de la demo. Fotos: _capturas s88. ============================================================================ */ /* -- Formulario de contacto (.field): inputs #03070e → blanco -- */ html[data-tema="claro"] .field label { color: var(--mb-tinta-suave); } html[data-tema="claro"] .field input, html[data-tema="claro"] .field textarea { background: #fff; border-color: var(--mb-borde-fuerte); color: var(--mb-tinta); } html[data-tema="claro"] .field input::placeholder, html[data-tema="claro"] .field textarea::placeholder { color: var(--mb-tinta-tenue); } html[data-tema="claro"] .field input:focus, html[data-tema="claro"] .field textarea:focus { background: #fff; border-color: var(--mb-azul-tinta); box-shadow: 0 0 0 3px rgba(35,87,115,.12); } /* -- Banda de marca (home): gradiente azul oscuro → tarjeta clara -- */ html[data-tema="claro"] .mini-brand-inner { background: var(--mb-tarjeta-alt); border-color: var(--mb-borde); box-shadow: 0 10px 30px rgba(17,17,17,.06); } html[data-tema="claro"] .mini-brand-inner:hover { border-color: var(--mb-borde-fuerte); box-shadow: 0 12px 28px rgba(17,17,17,.10); filter: none; } html[data-tema="claro"] .mini-brand-icon { filter: none; } html[data-tema="claro"] .mini-brand-inner p .accent-green { color: var(--mb-verde-tinta); } /* Marquee (la barra negra deslizante) → carril azul pastel + píldora blanca */ html[data-tema="claro"] .mini-brand-marquee { background: var(--mb-azul-pal); border-color: var(--mb-azul-bde); box-shadow: inset 0 0 0 1px rgba(17,17,17,.02), 0 8px 20px rgba(17,17,17,.05); } html[data-tema="claro"] .mini-brand-marquee-item { color: var(--mb-tinta); border-color: var(--mb-borde-fuerte); background: #fff; box-shadow: 0 6px 16px rgba(17,17,17,.08); } html[data-tema="claro"] .mini-brand-marquee-item .accent-green { color: var(--mb-verde-tinta); } /* -- Tarjeta de credenciales de la demo (.demo-credentials): azul oscuro → clara -- */ html[data-tema="claro"] .demo-credentials { background: var(--mb-tarjeta-alt); border-color: var(--mb-borde); box-shadow: inset 0 0 0 1px rgba(17,17,17,.02); } html[data-tema="claro"] .demo-credential-row { border-bottom-color: var(--mb-borde); }