/* ================================================================
   theme-toggle.css — Dark / Light mode + correcciones de contraste
   ================================================================ */

/* ---------------------------------------------------------------
   1. VARIABLES MODO CLARO
   --------------------------------------------------------------- */
:root[data-theme="light"] {
    --bg-uniform: #f0f2f5;
    --fg: #1a1a2e;
    --muted: #555;
    --card-bg: rgba(255, 255, 255, 0.95);
    --card-border: rgba(0, 0, 0, 0.12);
    --accent-blue: #005f99;
    --accent-purple: #7a1fa8;
    --accent-green: #2e7d32;
    --accent-gold: #c8a200;
    --accent-red: #c62a47;
    --accent-emerald: #1b5e20;
    --accent-orange: #c84b1f;
}

/* ---------------------------------------------------------------
   2. FONDO Y BODY EN MODO CLARO
   --------------------------------------------------------------- */
:root[data-theme="light"] #particles-js {
    background-color: var(--bg-uniform);
}

:root[data-theme="light"] html {
    background-color: var(--bg-uniform);
}

/* ---------------------------------------------------------------
   3. TARJETAS EN MODO CLARO
   --------------------------------------------------------------- */
:root[data-theme="light"] .card {
    background: var(--card-bg);
    border-color: var(--card-border);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    color: var(--fg);
}

:root[data-theme="light"] .main-header-card {
    background: rgba(255, 255, 255, 0.97);
    border-color: rgba(0, 0, 0, 0.15);
}

/* ---------------------------------------------------------------
   4. MENÚ LATERAL EN MODO CLARO
   --------------------------------------------------------------- */
:root[data-theme="light"] .side-navbar {
    background: rgba(255, 255, 255, 0.97);
    border-right-color: var(--card-border);
}

:root[data-theme="light"] .side-navbar .nav-link {
    color: var(--fg);
}

:root[data-theme="light"] .side-navbar .nav-link i {
    color: var(--fg);
}

:root[data-theme="light"] .side-navbar .nav-link:hover {
    background-color: rgba(0, 0, 0, 0.06);
}

/* ---------------------------------------------------------------
   5. PRELOADER EN MODO CLARO
   --------------------------------------------------------------- */
:root[data-theme="light"] #preloader {
    background-color: var(--bg-uniform);
}

:root[data-theme="light"] .loading-text {
    color: var(--fg);
    text-shadow: none;
}

/* ---------------------------------------------------------------
   6. NOMBRE / TYPEWRITER EN MODO CLARO (fix text-shadow negro)
   --------------------------------------------------------------- */
:root[data-theme="light"] .title,
:root[data-theme="light"] .typewriter-title,
:root[data-theme="light"] #typewriter-name-container {
    color: var(--fg);
    text-shadow: none;
}

/* ---------------------------------------------------------------
   7. BOTÓN X (Twitter) — SIEMPRE BLANCO sobre negro
   --------------------------------------------------------------- */
#contacto .btn-x {
    background: #1a1a1a;
    color: #ffffff !important;
    border: 2px solid #cccccc;
}

#contacto .btn-x i,
#contacto .btn-x span {
    color: #ffffff !important;
}

#contacto .btn-x:hover {
    background: #2d2d2d;
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.15);
}

/* ---------------------------------------------------------------
   8. BOTÓN TikTok — SIEMPRE NEGRO sobre blanco
   --------------------------------------------------------------- */
#contacto .btn-tiktok {
    background: #ffffff;
    color: #000000 !important;
    border: 2px solid #000000;
}

#contacto .btn-tiktok i,
#contacto .btn-tiktok span {
    color: #000000 !important;
}

/* ---------------------------------------------------------------
   9. BOTÓN TOGGLE DE TEMA (luna / sol)
   --------------------------------------------------------------- */
#theme-toggle-btn {
    background: none;
    border: none;
    color: var(--fg);
    font-size: 1.3em;
    cursor: pointer;
    padding: 10px 23px;
    transition: transform 0.3s ease;
    width: 100%;
    display: flex;
    align-items: center;
}

#theme-toggle-btn:hover {
    opacity: 0.8;
}

#theme-toggle-btn .icon-moon {
    display: inline;
}

#theme-toggle-btn .icon-sun {
    display: none;
}

:root[data-theme="light"] #theme-toggle-btn .icon-moon {
    display: none;
}

:root[data-theme="light"] #theme-toggle-btn .icon-sun {
    display: inline;
}

/* ---------------------------------------------------------------
   10. BANDERAS DEL SELECTOR DE IDIOMA
   --------------------------------------------------------------- */
.lang-switcher {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 0;
}

.lang-switcher button {
    background: transparent;
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    padding: 4px 6px;
    transition: border-color 0.2s, background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 36px;
    margin-left: 13px;
}

.lang-switcher button:hover {
    border-color: var(--accent-gold);
    background: rgba(255, 215, 0, 0.1);
}

.lang-switcher button.active {
    display: none;
}

.lang-switcher button img {
    width: 28px;
    height: 20px;
    border-radius: 3px;
    object-fit: cover;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}