/* ============================================================================ Modo claro (light theme) — Proyecto 5% Se activa con . El default (sin atributo o data-theme="dark") conserva el tema oscuro original SIN cambios. Todo va bajo html[data-theme="light"] para no tocar el dark. ============================================================================ */ html[data-theme="light"] { --bg: #eef1f6; --sidebar-bg: #ffffff; --text: #16202b; /* antes #FEFFFF: en claro el texto es oscuro */ --accent: #1f7a7a; /* teal un poco más oscuro para contraste sobre blanco */ --accent-soft: #1f7a7a; --gold: #8a6d18; /* antes #fff (blanco) → dorado oscuro visible en claro */ --card-bg: #ffffff; --card-bg-2: #eef2f7; --input-bg: #ffffff; --expander-bg: #e8f1f1; --border: rgba(20, 30, 45, 0.14); --border-strong: rgba(20, 30, 45, 0.22); --bg-deep: #f4f6fa; /* antes #050505: fondos de página/hero */ --bg-deep-2: #e7edf5; /* color interior del gradiente radial */ color-scheme: light; } /* Tarjetas: en dark son un velo blanco translúcido (rgba(255,255,255,.03)) que sobre fondo claro desaparece. En claro les damos superficie sólida + borde. */ html[data-theme="light"] .costos-card, html[data-theme="light"] .glass-card, html[data-theme="light"] .cost-card, html[data-theme="light"] [class*="-card"] { background: #ffffff; border-color: var(--border); box-shadow: 0 6px 20px -14px rgba(20, 30, 45, 0.25); } /* Inputs/selects/steppers: en dark tienen un velo negro (rgba(0,0,0,.5)) y borde blanco tenue → grises e ilegibles en claro. Los volvemos blancos con borde visible. */ html[data-theme="light"] .costos-input, html[data-theme="light"] .number-stepper, html[data-theme="light"] input, html[data-theme="light"] select, html[data-theme="light"] textarea { background: #ffffff; border-color: var(--border); color: var(--text); } html[data-theme="light"] .stepper-btn, html[data-theme="light"] .costos-stepper .stepper-btn { background: #eef2f7; color: var(--accent); border-color: var(--border); } html[data-theme="light"] ::placeholder { color: #8a94a3; } /* Fondos/estructura base (por si algún selector no usa la variable directamente) */ html[data-theme="light"] body { background: var(--bg); color: var(--text); } /* La navbar y el footer suelen tener fondo muy oscuro propio: los aclaramos */ html[data-theme="light"] .navbar, html[data-theme="light"] #main-nav { background: #ffffff; border-bottom: 1px solid var(--border); } html[data-theme="light"] .navbar-menu a, html[data-theme="light"] .navbar-brand a { color: var(--text); } /* Grises claros hardcodeados (texto secundario) → gris oscuro legible en claro */ html[data-theme="light"] { /* estos se aplican por si el texto secundario quedó muy claro */ } html[data-theme="light"] .muted, html[data-theme="light"] .subtitle, html[data-theme="light"] .hint, html[data-theme="light"] small { color: #4b5563; } /* Cian de marca (#22d3ee) es muy claro sobre blanco: lo oscurecemos SOLO para texto pequeño donde el contraste importa. Los títulos grandes lo conservan. */ html[data-theme="light"] .cyan-em, html[data-theme="light"] a { color: #0e7f93; } /* ============================================================================ Botón de cambio de tema (vive en la navbar, junto al toggle de idioma) ============================================================================ */ .theme-toggle { background: transparent; border: 1px solid var(--border); color: var(--accent); padding: .35rem .55rem; border-radius: 6px; cursor: pointer; font-size: .95rem; line-height: 1; margin-right: .5rem; transition: border-color .15s ease, background .15s ease; } .theme-toggle:hover { border-color: var(--accent); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }