/* ============================================================ SAVIA FIT — Tema oscuro compartido + botón de tema Se carga DESPUÉS del CSS de cada página. El modo oscuro se activa con la clase `dark` en (assets/theme.js) y se recuerda en localStorage ('savia_theme') entre páginas. ============================================================ */ :root{ color-scheme:light; /* index.html usa --gold-light sin definirla; se define global para todas */ --gold-light:#E8D5A0; } html.dark{ color-scheme:dark; --ink:#F1EDE3; --ink-soft:#C6C0B2; --gold:#C9A96E; --gold-light:#E8D5A0; --gold-dark:#D8BA8C; --cream:#1F1B15; --cream-dark:#2E2921; --warm-white:#16130E; --gray:#9A9384; --gray-light:#413C32; --hairline:rgba(241,237,227,.12); --sage:#628055; --terra:#D98A6A; --navy:#8FA9C9; } /* ---------- Superficies con colores literales (no variables) ---------- */ /* Nav isla (index, suplementos, recetas): con left:50% el ancho disponible queda en la mitad del viewport y "SAVIA FIT"/"USD" se cortaban en desktop */ .nav{width:max-content;} .nav .brand{white-space:nowrap;} html.dark .nav{background:rgba(22,19,14,.8);border-color:rgba(241,237,227,.08); box-shadow:0 12px 40px -18px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.05);} html.dark .nav a.lnk:hover{background:rgba(241,237,227,.08);} html.dark .nav-toggle:hover{background:rgba(241,237,227,.08);} html.dark .nav-mobile-panel{background:rgba(22,19,14,.96);border-color:rgba(241,237,227,.1); box-shadow:0 20px 60px -20px rgba(0,0,0,.6);} html.dark .nav-mobile-panel a.lnk:hover{background:rgba(241,237,227,.08);} html.dark .nav .back:hover{background:rgba(241,237,227,.08);} /* Quiz: barra superior y barra de botones */ html.dark .topbar{background:rgba(31,27,21,.9);} html.dark .navbtns{background:rgba(22,19,14,.94);} html.dark .btn-primary:hover{background:#fff;} /* Marcos de producto (index) */ html.dark .bezel{background:rgba(241,237,227,.05);border-color:rgba(241,237,227,.09);} html.dark .cmp .no{color:rgba(241,237,227,.25);} /* Carrusel coverflow del hero (index) */ html.dark .cf-arrow{background:rgba(22,19,14,.82);border-color:rgba(241,237,227,.14); box-shadow:0 12px 34px -16px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.06);} html.dark .cf-dot{background:rgba(241,237,227,.2);} html.dark .cf-glass{background:linear-gradient(168deg,rgba(33,29,22,.36),rgba(24,21,16,.16)); border-color:rgba(255,255,255,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(201,169,110,.14);} /* Aura y acento del carrusel en oscuro: tonos claros y legibles del color de cada diseño */ html.dark .cf-aura{opacity:.72;} html.dark .stage[data-theme="gold"] {--accent-ink:#D8BA8C;} html.dark .stage[data-theme="dark"] {--accent-ink:#A6D636;} html.dark .stage[data-theme="atlas"]{--accent-ink:#7FA8E8;} html.dark .stage[data-theme="terra"]{--accent-ink:#E7A47F;} /* Pop-up de recetas (index) */ html.dark .lead-card{background:linear-gradient(168deg,rgba(33,29,22,.94),rgba(24,21,16,.88)); border-color:rgba(255,255,255,.12); box-shadow:0 40px 100px -30px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.06),inset 0 -1px 0 rgba(201,169,110,.2);} html.dark .lead-x{background:rgba(241,237,227,.08);} html.dark .lead-x:hover{background:rgba(241,237,227,.14);} html.dark .lead-form input::placeholder{color:#75705F;} /* Modal de upsell (quiz) */ html.dark .up-card{background:linear-gradient(168deg,rgba(33,29,22,.95),rgba(24,21,16,.9)); border-color:rgba(201,169,110,.4); box-shadow:0 40px 90px -30px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.05);} /* Formularios (quiz) */ html.dark input::placeholder,html.dark textarea::placeholder{color:#75705F;} /* Botones dorados: en oscuro --ink es claro, el texto sobre dorado debe seguir oscuro */ html.dark .btn-gold,html.dark .up-btn-gold{color:#16130E;} html.dark .btn-gold .arr{background:rgba(22,19,14,.14);} /* Mensaje de error (pago) */ html.dark .msg.err{background:#3A231B;border-color:#5A3327;} /* Flechas de botones de compra (suplementos) */ html.dark .buy .arr{background:rgba(241,237,227,.08);} html.dark .buy.ml .arr{background:rgba(22,19,14,.2);} /* ---------- Botón de tema ---------- */ .theme-toggle{display:inline-flex;align-items:center;justify-content:center; width:34px;height:34px;border-radius:50%;border:1px solid rgba(14,13,11,.14); background:transparent;color:inherit;cursor:pointer;flex:0 0 auto;padding:0; transition:background .3s,border-color .3s;} .theme-toggle:hover{border-color:currentColor;background:rgba(14,13,11,.05);} html.dark .theme-toggle{border-color:rgba(241,237,227,.18);} html.dark .theme-toggle:hover{background:rgba(241,237,227,.08);} .theme-toggle svg{width:17px;height:17px;display:block;} .theme-toggle .tt-sun{display:none;} html.dark .theme-toggle .tt-sun{display:block;} html.dark .theme-toggle .tt-moon{display:none;} .theme-toggle:focus-visible{outline:2px solid var(--gold,#C9A96E);outline-offset:2px;} /* Versión flotante (páginas sin barra de navegación) */ .theme-toggle.floating{position:fixed;top:16px;right:16px;z-index:80;width:42px;height:42px; background:rgba(251,249,244,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border:1px solid rgba(14,13,11,.12);box-shadow:0 10px 30px -14px rgba(14,13,11,.35);} html.dark .theme-toggle.floating{background:rgba(22,19,14,.82);border-color:rgba(241,237,227,.14); box-shadow:0 10px 30px -14px rgba(0,0,0,.6);}