/* ============================================================ TEMA CLARO ------------------------------------------------------------ La página está escrita en clases oscuras de Tailwind; este archivo las remapea cuando . El prefijo html[data-theme="light"] da más especificidad que las utilidades que genera el CDN de Tailwind, sin depender del orden de carga. ============================================================ */ /* ---------- Selector de tema (ambos temas) ---------- */ .theme-switch-active { background: rgba(6, 182, 212, 0.15); color: #22d3ee !important; } /* ---------- Logos: versión según el fondo ---------- */ html[data-theme="light"] .logo-on-dark, html:not([data-theme="light"]) .logo-on-light { display: none; } /* ---------- Base ---------- */ html[data-theme="light"] ::-webkit-scrollbar-track { background: #dfe5ec; } html[data-theme="light"] .bg-slate-950 { background-color: #e6ebf1; } html[data-theme="light"] .text-slate-100 { color: #1e293b; } /* ---------- Texto neutro ---------- */ html[data-theme="light"] .text-white { color: #1e293b; } html[data-theme="light"] .text-slate-300 { color: #334155; } html[data-theme="light"] .text-slate-400 { color: #475569; } html[data-theme="light"] .text-slate-500 { color: #64748b; } html[data-theme="light"] .text-slate-600 { color: #64748b; } html[data-theme="light"] .text-slate-700 { color: #94a3b8; } html[data-theme="light"] .placeholder-slate-600::placeholder { color: #94a3b8; } html[data-theme="light"] .hover\:text-white:hover { color: #1e293b; } html[data-theme="light"] .hover\:text-slate-300:hover { color: #334155; } /* Botón primario: el texto sigue blanco sobre el cian */ html[data-theme="light"] .btn-primary, html[data-theme="light"] .btn-primary .text-white { color: #fff; } /* ---------- Acentos: -400 es poco legible sobre claro, pasar a -600 ---------- */ html[data-theme="light"] .text-cyan-400, html[data-theme="light"] .text-cyan-500, html[data-theme="light"] .hover\:text-cyan-400:hover { color: #0891b2; } html[data-theme="light"] .theme-switch-active { color: #0891b2 !important; } html[data-theme="light"] .text-indigo-400 { color: #4f46e5; } html[data-theme="light"] .text-rose-400 { color: #e11d48; } html[data-theme="light"] .text-sky-400 { color: #0284c7; } html[data-theme="light"] .text-violet-400 { color: #7c3aed; } html[data-theme="light"] .text-emerald-400 { color: #059669; } html[data-theme="light"] .text-amber-400 { color: #d97706; } html[data-theme="light"] .text-teal-400 { color: #0d9488; } html[data-theme="light"] .text-red-400 { color: #dc2626; } /* ---------- Bordes y fondos translúcidos blancos → oscuros ---------- */ html[data-theme="light"] .border-white\/5 { border-color: rgba(15, 23, 42, 0.08); } html[data-theme="light"] .border-white\/8 { border-color: rgba(15, 23, 42, 0.1); } html[data-theme="light"] .border-white\/10 { border-color: rgba(15, 23, 42, 0.12); } html[data-theme="light"] .bg-white\/5 { background-color: rgba(15, 23, 42, 0.06); } html[data-theme="light"] .bg-white\/\[0\.01\] { background-color: rgba(15, 23, 42, 0.03); } html[data-theme="light"] .hover\:bg-white\/5:hover { background-color: rgba(15, 23, 42, 0.05); } html[data-theme="light"] .hover\:bg-white\/8:hover { background-color: rgba(15, 23, 42, 0.06); } /* ---------- Degradados de fondo (orden from → via → to) ---------- */ html[data-theme="light"] .from-slate-950 { --tw-gradient-from: #e6ebf1 var(--tw-gradient-from-position); --tw-gradient-to: rgb(230 235 241 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } html[data-theme="light"] .via-slate-900\/30 { --tw-gradient-to: rgb(222 228 236 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgb(222 228 236 / 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to); } html[data-theme="light"] .via-slate-900\/80 { --tw-gradient-to: rgb(222 228 236 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgb(222 228 236 / 0.9) var(--tw-gradient-via-position), var(--tw-gradient-to); } html[data-theme="light"] .to-slate-950 { --tw-gradient-to: #e6ebf1 var(--tw-gradient-to-position); } /* ---------- Componentes de styles.css ---------- */ html[data-theme="light"] .glass-card { background: rgba(241, 244, 248, 0.8); border-color: rgba(15, 23, 42, 0.09); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06); } html[data-theme="light"] .card-hover:hover { background: #f3f6f9 !important; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08); } html[data-theme="light"] .navbar-blur { background: rgba(230, 235, 241, 0.97); } html[data-theme="light"] .gradient-text { background: linear-gradient(135deg, #1e293b 0%, #0891b2 50%, #6366f1 100%); -webkit-background-clip: text; background-clip: text; } html[data-theme="light"] .text-glow { text-shadow: 0 0 40px rgba(6, 182, 212, 0.2); } html[data-theme="light"] .hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(6, 182, 212, 0.1), transparent 70%); } html[data-theme="light"] .hero-grid { background-image: linear-gradient(rgba(8, 145, 178, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(8, 145, 178, 0.07) 1px, transparent 1px); } html[data-theme="light"] .form-input { background: #f3f6f9; border-color: rgba(15, 23, 42, 0.15); } html[data-theme="light"] .form-input:focus { background: #f6f8fb; border-color: rgba(8, 145, 178, 0.6); } html[data-theme="light"] .form-input:-webkit-autofill { -webkit-text-fill-color: #1e293b; caret-color: #1e293b; -webkit-box-shadow: 0 0 0 1000px #f3f6f9 inset; box-shadow: 0 0 0 1000px #f3f6f9 inset; }