/* ============================================= BaRRa — Sistema de tema claro / oscuro Toggle: data-theme="light" en ============================================= */ /* ── TRANSICIÓN GLOBAL ─────────────────────── */ *, *::before, *::after { transition: background-color .25s ease, color .2s ease, border-color .25s ease, box-shadow .25s ease; } /* ── TEMA OSCURO (por defecto, clases Tailwind ya lo cubren) ── */ /* ── TEMA CLARO ────────────────────────────── */ [data-theme="light"] body { background-color: #f1f5f9 !important; color: #1e293b !important; } /* Navbar */ [data-theme="light"] nav { background-color: #ffffff !important; border-color: #e2e8f0 !important; box-shadow: 0 1px 4px rgba(0,0,0,.08) !important; } [data-theme="light"] nav a { color: #64748b !important; } [data-theme="light"] nav a:hover { color: #1e293b !important; } /* Cards / secciones */ [data-theme="light"] .bg-dark, [data-theme="light"] section.bg-dark, [data-theme="light"] div.bg-dark { background-color: #ffffff !important; border-color: #e2e8f0 !important; box-shadow: 0 2px 12px rgba(0,0,0,.06) !important; } [data-theme="light"] .bg-darker { background-color: #f1f5f9 !important; } /* Textos */ [data-theme="light"] .text-gray-100, [data-theme="light"] .text-gray-200 { color: #1e293b !important; } [data-theme="light"] .text-gray-300 { color: #334155 !important; } [data-theme="light"] .text-gray-400 { color: #64748b !important; } [data-theme="light"] .text-gray-500, [data-theme="light"] .text-gray-600 { color: #94a3b8 !important; } [data-theme="light"] .text-white { color: #1e293b !important; } /* Inputs / controles */ [data-theme="light"] input[type="text"], [data-theme="light"] input[type="number"], [data-theme="light"] input[type="password"] { background-color: #f8fafc !important; border-color: #cbd5e1 !important; color: #1e293b !important; } [data-theme="light"] input::placeholder { color: #94a3b8 !important; } /* Fondos translúcidos blancos */ [data-theme="light"] .bg-white\/5 { background-color: #f8fafc !important; } [data-theme="light"] .bg-white\/10 { background-color: #f1f5f9 !important; } [data-theme="light"] .bg-white\/15 { background-color: #e2e8f0 !important; } [data-theme="light"] .bg-white\/20 { background-color: #cbd5e1 !important; } /* Bordes blancos translúcidos */ [data-theme="light"] .border-white\/10 { border-color: #e2e8f0 !important; } [data-theme="light"] .border-white\/20 { border-color: #cbd5e1 !important; } [data-theme="light"] .border-white\/5 { border-color: #f1f5f9 !important; } /* Divisores en tabla */ [data-theme="light"] .divide-white\/5 > * + * { border-color: #f1f5f9 !important; } /* Head de tabla */ [data-theme="light"] thead.bg-white\/5, [data-theme="light"] .bg-white\/5 { background-color: #f8fafc !important; } /* Botones hover */ [data-theme="light"] .hover\:bg-white\/5:hover { background-color: #f8fafc !important; } [data-theme="light"] .hover\:bg-white\/15:hover { background-color: #e2e8f0 !important; } [data-theme="light"] .hover\:bg-white\/20:hover { background-color: #cbd5e1 !important; } /* Bordes brand: se mantienen igual */ /* Panell resumen — borde brand/30 se mantiene */ /* Panel login */ [data-theme="light"] .backdrop-blur { background-color: rgba(255,255,255,0.9) !important; border-color: #e2e8f0 !important; } /* Admin toggle de disponibilidad: sin cambios (ya usa colores fijos) */ /* ── TOAST: texto siempre blanco independientemente del tema ── */ [data-theme="light"] #toast { color: #ffffff !important; background-color: #111111 !important; } /* ── NAV activo: texto blanco sobre fondo negro ── */ [data-theme="light"] nav a.bg-black { color: #ffffff !important; } /* ══════════════════════════════════════════════════════ TEMA OSCURO — correcciones de visibilidad brand = #111111 (negro) es invisible sobre fondos oscuros → se sustituye por gris-blanco claro (#e2e8f0) ══════════════════════════════════════════════════════ */ /* Textos brand: negro → gris claro visible */ [data-theme="dark"] .text-brand { color: #e2e8f0 !important; } /* Fondos brand translúcidos: negro opaco → blanco translúcido */ [data-theme="dark"] .bg-brand\/10 { background-color: rgba(255,255,255,.06) !important; } [data-theme="dark"] .bg-brand\/20 { background-color: rgba(255,255,255,.10) !important; } [data-theme="dark"] .bg-brand\/30 { background-color: rgba(255,255,255,.15) !important; } [data-theme="dark"] .hover\:bg-brand\/30:hover { background-color: rgba(255,255,255,.20) !important; } [data-theme="dark"] .hover\:bg-brand\/40:hover { background-color: rgba(255,255,255,.26) !important; } [data-theme="dark"] .hover\:bg-brand\/50:hover { background-color: rgba(255,255,255,.32) !important; } /* Bordes brand: negro translúcido → blanco translúcido */ [data-theme="dark"] .border-brand\/30 { border-color: rgba(226,232,240,.25) !important; } [data-theme="dark"] .border-brand\/40 { border-color: rgba(226,232,240,.35) !important; } [data-theme="dark"] .border-brand\/50 { border-color: rgba(226,232,240,.45) !important; } /* Botón guardar precio en admin */ [data-theme="dark"] .bg-brand\/50 { background-color: rgba(255,255,255,.30) !important; } /* Nav activo en oscuro: bg-black (#000) casi idéntico al fondo → usar blanco translúcido */ [data-theme="dark"] nav a.bg-black { background-color: rgba(255,255,255,.18) !important; color: #ffffff !important; }