/* ============================================================ THEME · MODO OSCURO (Dark Mode) — Farmacias Similares ------------------------------------------------------------ Sistema de tema basado en data-theme="dark" en . Se aplica con .no-flash incluso antes de pintar para evitar flash blanco. Compatible con todas las páginas existentes, sobreescribiendo solo las variables del design system y afinando algunos componentes específicos (header, modales, sidebar profesional, panel BI, etc.). ============================================================ */ /* Smooth transition entre modos (pero NO en la primera carga) */ html.theme-ready, html.theme-ready body, html.theme-ready *:not(.no-theme-trans):not(svg):not(path) { transition: background-color .35s ease, border-color .35s ease, color .35s ease, box-shadow .35s ease; } /* ------------------------------------------------------------ TOKENS PARA MODO OSCURO ------------------------------------------------------------ */ :root[data-theme="dark"] { /* Paleta principal recalibrada para fondo oscuro */ --blue-900:#9ec1ff; --blue-800:#7fa9ff; --blue-700:#6a99ff; --blue-600:#5a8eff; --blue-500:#4178e0; --blue-50:#152244; --gold:#ffd84a; --green:#34d27c; --red:#ff7390; /* Tinta clara sobre fondo oscuro */ --ink-900:#e8eefc; --ink-700:#c6d2ec; --ink-500:#8fa0c3; --ink-300:#5a6c91; /* Fondos */ --bg:#0a1226; --white:#121b35; /* Las superficies "blancas" se vuelven azul muy oscuro */ --border:#22325a; /* Sombras más sutiles y oscuras */ --shadow-sm: 0 4px 14px rgba(0,0,0,.4); --shadow-md: 0 12px 40px rgba(0,0,0,.55); --shadow-lg: 0 24px 60px rgba(0,0,0,.7); color-scheme: dark; } /* ------------------------------------------------------------ AJUSTES FINOS DE SUPERFICIES — para que los componentes con fondo blanco hardcodeado sigan funcionando. ------------------------------------------------------------ */ :root[data-theme="dark"] body { background: radial-gradient(1200px 600px at 20% -10%, rgba(106,153,255,.08), transparent 60%), radial-gradient(900px 500px at 110% 10%, rgba(255,216,74,.06), transparent 70%), #0a1226; } /* Header translúcido en oscuro */ :root[data-theme="dark"] .site-header { background: rgba(10, 18, 38, .85); border-bottom-color: var(--border); } /* Botones con fondo blanco hardcodeado */ :root[data-theme="dark"] .btn-secondary { background: #1b2748; color: var(--blue-700); border-color: var(--blue-700); } :root[data-theme="dark"] .btn-secondary:hover { background: var(--blue-700); color: #0a1226; } :root[data-theme="dark"] .btn-tertiary { background: var(--gold); color: #0a1226; } /* Tarjetas / superficies con fondo blanco hardcodeado */ :root[data-theme="dark"] .card, :root[data-theme="dark"] .panel, :root[data-theme="dark"] .surface, :root[data-theme="dark"] [class*="-card"]:not(.simi-card):not(.rx-doc):not(.sheet):not(.ev-canvas):not(.ev-page), :root[data-theme="dark"] .modal-content, :root[data-theme="dark"] .modal-body, :root[data-theme="dark"] .dialog, :root[data-theme="dark"] .pop, :root[data-theme="dark"] .form-card { background: var(--white); color: var(--ink-900); border-color: var(--border); } /* Inputs y formularios */ :root[data-theme="dark"] input, :root[data-theme="dark"] textarea, :root[data-theme="dark"] select { background: #0f1830; color: var(--ink-900); border-color: var(--border); } :root[data-theme="dark"] input::placeholder, :root[data-theme="dark"] textarea::placeholder { color: var(--ink-500); } :root[data-theme="dark"] input:focus, :root[data-theme="dark"] textarea:focus, :root[data-theme="dark"] select:focus { border-color: var(--blue-700); box-shadow: 0 0 0 3px rgba(106,153,255,.18); outline: none; } /* Inputs con clase explícita white */ :root[data-theme="dark"] .input-white, :root[data-theme="dark"] .input.white { background: #0f1830; color: var(--ink-900); } /* Tablas */ :root[data-theme="dark"] table { color: var(--ink-900); } :root[data-theme="dark"] th { background: #0f1830; color: var(--ink-700); border-color: var(--border); } :root[data-theme="dark"] td { border-color: var(--border); } :root[data-theme="dark"] tr:hover td { background: rgba(106,153,255,.06); } /* Sidebar / Panel pro */ :root[data-theme="dark"] .sidebar, :root[data-theme="dark"] .side-drawer, :root[data-theme="dark"] .pp-drawer, :root[data-theme="dark"] .pp-sidebar { background: #0f1830; border-color: var(--border); color: var(--ink-900); } /* Bottom nav */ :root[data-theme="dark"] .bottom-nav, :root[data-theme="dark"] .mobile-bottom-nav, :root[data-theme="dark"] .pp-bottom-nav { background: rgba(15, 24, 48, .96); border-color: var(--border); color: var(--ink-700); } /* Hero con gradientes */ :root[data-theme="dark"] .hero-bg { background: radial-gradient(ellipse 600px 400px at 80% 20%, rgba(106,153,255,.18), transparent 70%), radial-gradient(ellipse 500px 400px at 10% 80%, rgba(255,216,74,.14), transparent 70%), linear-gradient(180deg, #0a1226 0%, #0f1830 100%); } /* Banner / cards con gradientes claros */ :root[data-theme="dark"] [style*="background: linear-gradient"][style*="#ffffff"], :root[data-theme="dark"] [style*="background:#fff"], :root[data-theme="dark"] [style*="background: #fff"] { filter: brightness(.92); } /* Imágenes — sutil reducción de brillo para que no deslumbren */ :root[data-theme="dark"] img:not(.no-dark-dim):not(.brand-logo):not([src*=".svg"]) { filter: brightness(.92) contrast(1.02); } /* Texto y enlaces */ :root[data-theme="dark"] a { color: var(--blue-700); } :root[data-theme="dark"] a:hover { color: var(--blue-800); } /* Resaltados / chips */ :root[data-theme="dark"] .chip, :root[data-theme="dark"] .badge, :root[data-theme="dark"] .pill, :root[data-theme="dark"] .tag { background: #1b2748; color: var(--ink-900); border-color: var(--border); } /* Receta y editor visual: SE EXCLUYEN del modo oscuro */ /* La hoja imprimible debe seguir siendo blanca para ser fiel a la impresión */ :root[data-theme="dark"] .rx-doc, :root[data-theme="dark"] .sheet, :root[data-theme="dark"] .ev-page, :root[data-theme="dark"] .ev-canvas .ev-page, :root[data-theme="dark"] .receta, :root[data-theme="dark"] .print-area { background: #ffffff !important; color: #0d2240 !important; } :root[data-theme="dark"] .rx-doc *, :root[data-theme="dark"] .sheet *, :root[data-theme="dark"] .ev-page *, :root[data-theme="dark"] .receta * { color: inherit; } /* Toasts y modales sobre fondo oscuro */ :root[data-theme="dark"] .toast { background: #1b2748; color: var(--ink-900); border: 1px solid var(--border); } /* PWA banner (instalar / offline) */ :root[data-theme="dark"] .pwa-install, :root[data-theme="dark"] .pwa-update, :root[data-theme="dark"] .pwa-offline { background: #1b2748; color: var(--ink-900); border-color: var(--border); } /* Animación de selección */ :root[data-theme="dark"] ::selection { background: var(--blue-700); color: #0a1226; } /* Scrollbar oscura */ :root[data-theme="dark"] ::-webkit-scrollbar { width: 12px; height: 12px; } :root[data-theme="dark"] ::-webkit-scrollbar-track { background: #0a1226; } :root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #22325a; border-radius: 6px; border: 3px solid #0a1226; } :root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #2f4377; } /* ============================================================ THEME TOGGLE — Botón flotante / inline ============================================================ */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.85); color: var(--ink-700); border: 1px solid var(--border); cursor: pointer; font-size: 16px; position: relative; overflow: hidden; transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease; box-shadow: var(--shadow-sm); } .theme-toggle:hover { transform: translateY(-2px) rotate(-12deg); box-shadow: var(--shadow-md); color: var(--blue-700); } .theme-toggle:active { transform: scale(.92); } .theme-toggle .theme-icon { display: block; transition: transform .5s cubic-bezier(.4,1.6,.4,1), opacity .25s ease; } .theme-toggle .theme-icon.hidden { transform: scale(0) rotate(180deg); opacity: 0; position: absolute; } :root[data-theme="dark"] .theme-toggle { background: rgba(27, 39, 72, .85); color: var(--gold); border-color: var(--border); } :root[data-theme="dark"] .theme-toggle:hover { color: var(--blue-700); background: #1b2748; } /* Toggle flotante (esquina inferior izquierda) cuando no se inyecta en el header */ .theme-toggle.theme-toggle--floating { position: fixed; bottom: 20px; left: 20px; z-index: 950; width: 48px; height: 48px; font-size: 18px; box-shadow: var(--shadow-md); } @media (max-width: 780px) { /* En móvil, alejarlo del bottom-nav del dashboard */ .theme-toggle.theme-toggle--floating { bottom: 84px; left: 14px; width: 44px; height: 44px; } } /* Cuando el toggle está integrado en el header */ .site-header .theme-toggle { width: 38px; height: 38px; font-size: 14px; margin-right: 4px; } /* Acentos institucionales en oscuro */ :root[data-theme="dark"] .btn-primary { background: var(--blue-700); color: #0a1226; box-shadow: 0 8px 22px rgba(106,153,255,.25); } :root[data-theme="dark"] .btn-primary:hover { background: var(--blue-800); color: #0a1226; } /* ------------------------------------------------------------ ANIMACIÓN del cambio de tema (radial reveal opcional) ------------------------------------------------------------ */ @keyframes theme-reveal { from { clip-path: circle(0% at var(--theme-x, 50%) var(--theme-y, 50%)); } to { clip-path: circle(150% at var(--theme-x, 50%) var(--theme-y, 50%)); } } html.theme-animating::view-transition-new(root) { animation: theme-reveal .55s cubic-bezier(.4,0,.2,1); } html.theme-animating::view-transition-old(root) { animation: none; } /* ------------------------------------------------------------ AUTO (prefers-color-scheme) — solo si NO se forzó tema ------------------------------------------------------------ */ @media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --blue-900:#9ec1ff; --blue-800:#7fa9ff; --blue-700:#6a99ff; --blue-600:#5a8eff; --blue-500:#4178e0; --blue-50:#152244; --ink-900:#e8eefc; --ink-700:#c6d2ec; --ink-500:#8fa0c3; --ink-300:#5a6c91; --bg:#0a1226; --white:#121b35; --border:#22325a; --shadow-sm: 0 4px 14px rgba(0,0,0,.4); --shadow-md: 0 12px 40px rgba(0,0,0,.55); --shadow-lg: 0 24px 60px rgba(0,0,0,.7); color-scheme: dark; } :root[data-theme="auto"] body { background: radial-gradient(1200px 600px at 20% -10%, rgba(106,153,255,.08), transparent 60%), radial-gradient(900px 500px at 110% 10%, rgba(255,216,74,.06), transparent 70%), #0a1226; } :root[data-theme="auto"] .rx-doc, :root[data-theme="auto"] .sheet, :root[data-theme="auto"] .ev-page, :root[data-theme="auto"] .receta { background:#ffffff !important; color:#0d2240 !important; } }