/* ========================================================================== site-ui.css — Mierda, no era David • Controles discretos: idioma (ES/EN) y tema (oscuro/claro) • Tema claro: se aplica con la clase `light` en (darkMode:'class') ========================================================================== */ /* ---------- cluster de controles en la barra de menú ---------- */ .mnd-ui { display: inline-flex; align-items: center; gap: .4rem; margin-left: auto; flex-shrink: 0; } .mnd-btn { display: inline-flex; align-items: center; gap: .35rem; height: 2rem; padding: 0 .55rem; border-radius: .5rem; border: 1px solid rgba(148, 163, 184, .35); background: rgba(148, 163, 184, .12); color: #cbd5e1; font-size: .72rem; font-weight: 700; line-height: 1; cursor: pointer; user-select: none; transition: background .15s, color .15s, border-color .15s; } .mnd-btn:hover { background: rgba(148, 163, 184, .22); color: #fff; } .mnd-btn svg { width: .95rem; height: .95rem; } .mnd-btn .mnd-lbl { letter-spacing: .02em; } @media (max-width: 640px) { .mnd-btn { padding: 0 .45rem; } .mnd-btn .mnd-lbl { display: none; } } /* ---------- pie de página: contador de visitantes ---------- */ .mnd-visits { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; color: #94a3b8; opacity: .9; } .mnd-visits .dot { width: .42rem; height: .42rem; border-radius: 9999px; background: #34d399; display: inline-block; } /* ========================================================================== TEMA CLARO (html.light) El sitio está maquetado en oscuro con utilidades slate; aquí las remapeamos. Se usan selectores de atributo (substring) para cubrir las variantes /opacity. ========================================================================== */ html.light body { background-color: #f6f8fb !important; color: #0f172a !important; } html.light { color-scheme: light; background-color: #f6f8fb !important; color: #0f172a !important; } html.light [class*="bg-[#0B1120]"], html.light [class*="bg-slate-950"], html.light [class*="bg-slate-900"] { background-color: #ffffff !important; } html.light [class*="bg-slate-800"] { background-color: #eef2f7 !important; } html.light [class*="bg-slate-700"] { background-color: #e2e8f0 !important; } html.light [class*="bg-slate-100"] { background-color: #ffffff !important; } html.light [class*="text-white"], html.light [class*="text-slate-50"], html.light [class*="text-slate-100"], html.light [class*="text-slate-200"], html.light [class*="text-slate-300"] { color: #0f172a !important; } html.light [class*="text-slate-400"] { color: #475569 !important; } html.light [class*="text-slate-500"] { color: #64748b !important; } html.light [class*="text-slate-600"] { color: #64748b !important; } html.light [class*="placeholder-slate"]::placeholder { color: #94a3b8 !important; } html.light [class*="border-slate-"] { border-color: #dbe3ec !important; } html.light [class*="divide-slate-"] > * + * { border-color: #e5eaf1 !important; } html.light [class*="border-white"] { border-color: #dbe3ec !important; } /* tarjetas/toolbars con blur y semitransparencia clara */ html.light [class*="backdrop-blur"] { background-color: rgba(255, 255, 255, .86) !important; } /* el botón/segmento activo del menú lateral y pestañas */ html.light .mnd-btn { border-color: #cbd5e1; background: #ffffff; color: #334155; } html.light .mnd-btn:hover { background: #eef2f7; color: #0f172a; } /* degradado del logo y textos con gradiente: mantener legibles */ html.light .text-gradient { background: linear-gradient(135deg, #0369a1 0%, #4f46e5 55%, #7c3aed 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* imágenes de láminas/portada con fondo oscuro -> borde suave en claro */ html.light img.bg-white { background-color: #fff !important; } /* sombras un poco más suaves en claro */ html.light .shadow-2xl, html.light .shadow-lg { box-shadow: 0 10px 25px -12px rgba(15, 23, 42, .25) !important; }