/* ═══════════════════════════════════════════════════════ THEME.CSS — Dark / Light mode Se aplica via [data-theme] en La preferencia se guarda en localStorage: 'cla_theme' ═══════════════════════════════════════════════════════ */ /* ── DARK (default — la identidad visual de la bodega) ── */ :root, [data-theme="dark"] { --cream: #F6F3EE; --black: #0e0c0a; --gold: #B39662; --gold-dk: #92754B; --text: #1F1F1F; --muted: #7A7269; --white: #FFFFFF; /* Superficies */ --bg-page: #F6F3EE; --bg-dark: #0e0c0a; --bg-card: #FFFFFF; --border-light: rgba(14,12,10,.1); /* Header (siempre oscuro en dark mode) */ --hdr-bg: transparent; --hdr-bg-scroll: rgba(14,12,10,.94); --hdr-text: #B39662; /* Footer */ --footer-bg: #0e0c0a; --footer-text: rgba(246,243,238,.6); } /* ── LIGHT mode ── */ [data-theme="light"] { --cream: #FFFFFF; --black: #1a1714; --gold: #9a7d4a; --gold-dk: #7a6038; --text: #1a1714; --muted: #6b6058; --white: #FFFFFF; --bg-page: #FFFFFF; --bg-dark: #f0ece6; --bg-card: #fafaf8; --border-light: rgba(14,12,10,.12); --hdr-bg: transparent;/* rgba(189,164,118,.95); /*#bda476;/*rgba(255,255,255,.95);*/ --hdr-bg-scroll: rgba(245, 234, 206,.98); --hdr-text: #B39662; --footer-bg: #f0ece6; --footer-text: rgba(26,23,20,.6); } /* Aplicar variables al body */ body { background: var(--bg-page); color: var(--text); transition: background .3s, color .3s; } /* ── Scrollbar (sitio + admin) ── */ html { scrollbar-width: auto; scrollbar-color: var(--gold) transparent; } body::-webkit-scrollbar { width: 15px; } body::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 8px; } body::-webkit-scrollbar-track { background: transparent; } /* Variante angosta para paneles internos con scroll propio (ej. sidebar del admin) */ .admin-nav { scrollbar-width: thin; scrollbar-color: var(--a-gold, var(--gold)) transparent; } .admin-nav::-webkit-scrollbar { width: 6px; } .admin-nav::-webkit-scrollbar-thumb { background: var(--a-gold, var(--gold)); border-radius: 8px; } .admin-nav::-webkit-scrollbar-track { background: transparent; } /* Header en light mode */ [data-theme="light"] #hdr { background: var(--hdr-bg); border-bottom: 1px solid rgba(14,12,10,.08); } [data-theme="light"] #hdr.scrolled { background: var(--hdr-bg-scroll); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(14,12,10,.12); } [data-theme="light"] .hdr-logo { color: var(--black); } /* Logo del header: 3 variantes — transparente (arriba), scrolleado-oscuro, scrolleado-claro */ .hdr-logo-img { display: none; } .hdr-logo-img--top { display: block; } #hdr.scrolled .hdr-logo-img--top { display: none; } #hdr.scrolled .hdr-logo-img--dark { display: block; } [data-theme="light"] #hdr.scrolled .hdr-logo-img--dark { display: none; } [data-theme="light"] #hdr.scrolled .hdr-logo-img--light { display: block; } [data-theme="light"] nav ul a { color: rgba(26,23,20,.6); } [data-theme="light"] nav ul a:hover { color: var(--black); } [data-theme="light"] .hdr-reserve { color: var(--black); border-color: rgba(154,125,74,.4); } [data-theme="light"] .lang-switch a { color: rgba(26,23,20,.4); } [data-theme="light"] .burger span { background: var(--black); } [data-theme="light"] .m-nav { background: rgba(255,255,255,.98); } [data-theme="light"] .m-nav a { color: var(--black); } /* Footer en light mode */ [data-theme="light"] footer { background: var(--footer-bg); color: var(--footer-text); } [data-theme="light"] .f-brand-logo { color: var(--black); } /* Logo del footer: una imagen por tema, la otra oculta */ .f-logo-img { display: none; } .f-logo-img--dark { display: block; } [data-theme="light"] .f-logo-img--dark { display: none; } [data-theme="light"] .f-logo-img--light { display: block; } [data-theme="light"] .f-col ul a { color: rgba(26,23,20,.55); } [data-theme="light"] .f-langs a { color: rgba(26,23,20,.35); } [data-theme="light"] .f-copy { color: rgba(26,23,20,.35); } /* Secciones con fondo oscuro explícito — no cambian en light mode */ [data-theme="light"] #loader, [data-theme="light"] #exp, [data-theme="light"] #qfull, [data-theme="light"] .exp-cta-banner { /* mantienen fondo negro */ } /* ── BOTÓN FLOTANTE DE TEMA ── */ .theme-toggle { position: fixed; bottom: 28px; right: 28px; z-index: 5000; width: 44px; height: 44px; background: var(--gold); border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(0,0,0,.3); transition: transform .3s, background .3s, opacity .3s; opacity: .85; } .theme-toggle:hover { transform: scale(1.1); opacity: 1; } .theme-toggle svg { width: 18px; height: 18px; fill: #fff; transition: transform .4s cubic-bezier(.25,.46,.45,.94); } /* Icono sol en dark mode, luna en light mode */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="light"] .theme-toggle .icon-sun { display: block; } [data-theme="light"] .theme-toggle .icon-moon { display: none; } /* Tooltip */ .theme-toggle::before { content: attr(data-tooltip); position: absolute; right: 52px; background: var(--black); color: var(--cream); font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s; } .theme-toggle:hover::before { opacity: 1; } /* Admin — variante */ .admin-body .theme-toggle { bottom: 20px; right: 20px; width: 36px; height: 36px; background: var(--a-gold, #B39662); } /* ── Admin dark/light ── */ :root { --a-bg: #0e0c0a; --a-surface: #161410; --a-border: rgba(255,255,255,.07); --a-gold: #B39662; --a-cream: #F6F3EE; --a-muted: rgba(246,243,238,.4); --a-text: rgba(246,243,238,.85); } [data-theme="light"] .admin-body, [data-theme="light"] .admin-wrap { --a-bg: #f5f4f2; --a-surface: #ffffff; --a-border: rgba(14,12,10,.1); --a-text: #1a1714; --a-muted: rgba(26,23,20,.45); --a-cream: #1a1714; } [data-theme="light"] .admin-body { background: var(--a-bg); color: var(--a-text); } [data-theme="light"] .admin-sidebar { background: var(--a-surface); border-right-color: var(--a-border); } [data-theme="light"] .admin-topbar { background: var(--a-surface); border-bottom-color: var(--a-border); } [data-theme="light"] .admin-nav a { color: var(--a-muted); } [data-theme="light"] .admin-nav a.active { color: var(--a-gold); } [data-theme="light"] .admin-card { background: var(--a-surface); border-color: var(--a-border); } [data-theme="light"] .admin-table th { color: var(--a-muted); border-bottom-color: var(--a-border); } [data-theme="light"] .admin-table td { color: var(--a-text); border-bottom-color: rgba(14,12,10,.05); } [data-theme="light"] .a-input, [data-theme="light"] .a-select { background: var(--a-bg); border-color: var(--a-border); color: var(--a-text); } [data-theme="light"] .admin-logo { color: var(--a-text); } [data-theme="light"] .admin-page-title { color: var(--a-text); } [data-theme="light"] .admin-sidebar-foot { border-top-color: var(--a-border); color: var(--a-muted); } [data-theme="light"] .admin-login-body { background: #f5f4f2; } [data-theme="light"] .login-box { background: #fff; border-color: rgba(14,12,10,.12); } [data-theme="light"] .login-logo { color: #1a1714; } [data-theme="light"] .l-input { background: rgba(14,12,10,.04); border-color: rgba(14,12,10,.15); color: #1a1714; } [data-theme="light"] .admin-quick-link { background: var(--a-surface); border-color: var(--a-border); color: var(--a-muted); } [data-theme="light"] .stat-card { background: var(--a-surface); border-color: var(--a-border); } [data-theme="light"] .stat-n { color: var(--a-text); } [data-theme="light"] .burger-admin span { background: var(--a-text); }