/* ========================================================= TVET Labs — dark.css Tema oscuro. El tema claro queda intacto. Se activa con data-theme="dark" en . ========================================================= */ [data-theme="dark"] { color-scheme: dark; } /* ── Body ────────────────────────────────────────────────── */ [data-theme="dark"] body { background: #141929; color: #e8ecf0; } /* ── Secciones ───────────────────────────────────────────── */ [data-theme="dark"] .section-hero { background: radial-gradient(ellipse at 6% 92%, rgba(75,182,156,0.13) 0%, transparent 52%), radial-gradient(ellipse at 94% 6%, rgba(234,94,88,0.07) 0%, transparent 52%), linear-gradient(158deg, #141929 0%, #1a2038 52%, #1f2649 100%); } [data-theme="dark"] .section-white { background: radial-gradient(ellipse at 92% 88%, rgba(75,182,156,0.09) 0%, transparent 50%), linear-gradient(180deg, #1c2440 0%, #1f2649 100%); } [data-theme="dark"] .section-alt { background: radial-gradient(ellipse at 7% 18%, rgba(75,182,156,0.11) 0%, transparent 55%), linear-gradient(180deg, #111728 0%, #141929 100%); } [data-theme="dark"] .section-navy { background: radial-gradient(ellipse at 22% 65%, rgba(75,182,156,0.17) 0%, transparent 52%), radial-gradient(ellipse at 78% 30%, rgba(234,94,88,0.09) 0%, transparent 44%), linear-gradient(142deg, #090d1a 0%, #0f1422 52%, #111828 100%); border-top: 1px solid rgba(255,255,255,0.05); border-bottom: 1px solid rgba(0,0,0,0.4); } /* ── Header ──────────────────────────────────────────────── */ [data-theme="dark"] .site-header { background: rgba(20, 25, 41, 0.96); border-bottom-color: rgba(255,255,255,0.07); } [data-theme="dark"] .site-logo__main { color: #fff; } [data-theme="dark"] .site-logo__sub { color: var(--gray-dark); } [data-theme="dark"] .site-nav__link { color: var(--gray-mid); } [data-theme="dark"] .site-nav__link:hover { color: #fff; } [data-theme="dark"] .site-nav__link--active { color: var(--teal-primary); } [data-theme="dark"] .lang-selector__btn { color: var(--gray-mid); } [data-theme="dark"] .lang-selector__btn:hover { color: #fff; } [data-theme="dark"] .lang-selector__menu { background: #1f2649; border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .lang-selector__option { color: #e8ecf0; } [data-theme="dark"] .lang-selector__option:hover { background: rgba(255,255,255,0.07); } [data-theme="dark"] .mobile-toggle { color: var(--gray-mid); } [data-theme="dark"] .mobile-toggle:hover { color: #fff; } [data-theme="dark"] .mobile-menu { background: #1a2035; border-top-color: rgba(255,255,255,0.07); } [data-theme="dark"] .mobile-nav__link { color: #e8ecf0; } [data-theme="dark"] .mobile-nav__link--active { color: var(--teal-primary); } [data-theme="dark"] .mobile-menu__footer { border-top-color: rgba(255,255,255,0.07); } [data-theme="dark"] .mobile-langs__link { color: var(--gray-mid); } [data-theme="dark"] .mobile-langs__link:hover { color: #fff; } [data-theme="dark"] .mobile-langs__link--active { color: var(--teal-primary); } [data-theme="dark"] .mobile-lang-inline__link { color: var(--gray-mid); } [data-theme="dark"] .mobile-lang-inline__link:hover { color: #fff; } [data-theme="dark"] .mobile-lang-inline__link--active { color: var(--teal-primary); } /* ── Tipografía ──────────────────────────────────────────── */ [data-theme="dark"] .lead-text { color: var(--gray-mid); } [data-theme="dark"] .body-text { color: var(--gray-mid); } [data-theme="dark"] .card-title { color: #fff; } [data-theme="dark"] .label-mono { color: rgba(255,255,255,0.35); } [data-theme="dark"] .why-col__title { color: #fff; } [data-theme="dark"] .why-col__text { color: var(--gray-mid); } [data-theme="dark"] .step__title { color: #fff; } [data-theme="dark"] .step__text { color: var(--gray-mid); } [data-theme="dark"] .callout__text { color: var(--gray-mid); } /* ── Cards ───────────────────────────────────────────────── */ [data-theme="dark"] .card { background: #263050; border-color: rgba(255,255,255,0.06); } [data-theme="dark"] .card--muted { background: rgba(255,255,255,0.04); border-top-color: var(--teal-primary); } [data-theme="dark"] .team-card--white { background: #263050; border-color: rgba(255,255,255,0.06); } [data-theme="dark"] .team-card--muted { background: rgba(255,255,255,0.04); } [data-theme="dark"] .team-card__name { color: #fff; } [data-theme="dark"] .team-card__bio { color: var(--gray-mid); } [data-theme="dark"] .team-card__region { color: var(--gray-mid); } /* ── Avatar ──────────────────────────────────────────────── */ [data-theme="dark"] .avatar { background: rgba(75,182,156,0.15); box-shadow: 0 0 0 3px rgba(75,182,156,0.18), 0 4px 14px rgba(0,0,0,0.3); } /* ── Formulario ──────────────────────────────────────────── */ [data-theme="dark"] .form__label { color: var(--gray-mid); } [data-theme="dark"] .form__input { background: #1a2035; border-color: rgba(255,255,255,0.12); color: #e8ecf0; } [data-theme="dark"] .form__input::placeholder { color: var(--gray-dark); } [data-theme="dark"] .form__input:focus { border-color: var(--teal-primary); box-shadow: 0 0 0 3px rgba(75,182,156,0.2); } [data-theme="dark"] .form-success__title { color: #fff; } [data-theme="dark"] .form-success__msg { color: var(--gray-mid); } [data-theme="dark"] .form-success__icon { background: rgba(75,182,156,0.15); } /* ── Footer ──────────────────────────────────────────────── */ [data-theme="dark"] .footer-depth { background: linear-gradient(180deg, #090d1a 0%, #0f1422 50%, #0d1220 100%); } /* ── Theme toggle button ─────────────────────────────────── */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; color: var(--gray-dark); flex-shrink: 0; transition: color 0.2s ease, background 0.2s ease; } .theme-toggle:hover { color: var(--teal-primary); background: rgba(75,182,156,0.1); } [data-theme="dark"] .theme-toggle { color: var(--gray-mid); } [data-theme="dark"] .theme-toggle:hover { color: var(--teal-primary); } .theme-toggle__icon { width: 1.125rem; height: 1.125rem; } /* Muestra luna en modo claro, sol en modo oscuro */ .theme-toggle__sun { display: none; } .theme-toggle__moon { display: block; } [data-theme="dark"] .theme-toggle__sun { display: block; } [data-theme="dark"] .theme-toggle__moon { display: none; }