/*==========Paleta de colores========*/
/* ==========================================
   🎛️ MOTOR DE TEMAS REAC-ACTIVOS V2 (LearnCarpi OS)
   ========================================== */

/* 🌌 TEMA DE SERVIDOR (Oscuro por defecto - Slate 900) */
:root, body.theme-oscuro {
    /* === COLORES PRINCIPALES === */
    --primary-color: #00c3ff;
    --primary-glow: rgba(0, 195, 255, 0.4);
    
    /* === FONDOS === */
    --bg-dark: #0f172a;
    --bg-light: #1e293b;
    --bg-overlay: rgba(15, 23, 42, 0.95);
    --bg-input: rgba(15, 23, 42, 0.6);
    
    /* === CRISTAL === */
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.2);
    --shadow-base: rgba(0, 0, 0, 0.4);
    
    /* === TEXTOS === */
    --text-main: #ffffff;   
    --text-body: #cbd5e1; 
    --text-muted: #94a3b8;
    --text-faint: #64748b;
    --hero-text: rgba(0,0,0,0.5);
    
    /* === COLORES FUNCIONALES === */
    --color-success: #41eb60; 
    --color-danger: #ff4757; 
    
    /* === RANKING (¡Tu dorado original preservado!) === */
    --rank-gold: #ffd700;
    --rank-silver: #c0c0c0;
    --rank-bronze: #cd7f32;
}

/* ☀️ TEMA SALA DE SERVIDORES (Claro Pastel Suave - AntiCegueras) */
body.theme-claro {
    --primary-color: #0077b6; /* Azul profundo con contraste */
    --primary-glow: rgba(0, 119, 182, 0.2);
    
    /* Cambiado de blanco nuclear a un crema/gris pastel sedoso */
    --bg-dark: #f1f5f9;  /* Slate 100: Fondo general relajado */
    --bg-light: #e2e8f0; /* Slate 200: Tarjetas un pelín más oscuras para notar relieve */
    --bg-overlay: rgba(241, 245, 249, 0.95);
    --bg-input: rgba(255, 255, 255, 0.8);
    
    /* Cristal adaptado para fondos claros */
    --glass-bg: rgba(255, 255, 255, 0.45);
    --glass-border: rgba(15, 23, 42, 0.08);
    --shadow-base: rgba(15, 23, 42, 0.06);
    
    /* CONTRASTE MÁXIMO: Las letras aquí NUNCA serán blancas */
    --text-main: #0f172a;   /* Gris oscuro Slate 900 */
    --text-body: #334155;   /* Slate 700 para párrafos legibles */
    --text-muted: #64748b;  /* Slate 500 */
    --text-faint: #94a3b8;
    --hero-text: rgba(255,255,255,0.2);
    
    /* Colores de estado corporativos */
    --color-success: #00aa44; 
    --color-danger: #d63031; 
    
    /* RANKING CLARO: Dorado ámbar oscuro para que se lea sobre el fondo pastel */
    --rank-gold: #b38600;
    --rank-silver: #718096;
    --rank-bronze: #a0522d;
}

/* 👾 TEMA CYBERPUNK TOKIO (Neón Hardcore) */
body.theme-neon {
    --primary-color: #ff007f; 
    --primary-glow: rgba(255, 0, 127, 0.5);
    --bg-dark: #050010; 
    --bg-light: #0d0221; 
    --bg-overlay: rgba(13, 2, 33, 0.95);
    --bg-input: rgba(255, 0, 127, 0.05);
    
    --glass-bg: rgba(13, 2, 33, 0.4);
    --glass-border: rgba(255, 0, 127, 0.25);
    --shadow-base: rgba(0, 0, 0, 0.7);
    
    --text-main: #00ffcc; 
    --text-body: #e0fbf6;
    --text-muted: #7b5cb7;
    --text-faint: #493070;
    
    --color-success: #00ffcc;
    --color-danger: #ff0055;
    
    /* RANKING NEÓN: Rosa neón flúor destructivo */
    --rank-gold: #ff007f; 
    --rank-silver: #00ffcc;
    --rank-bronze: #9d4edd;
}

/* 📟 TEMA TERMINAL DE ARCH LINUX (Retro TTY) */
body.theme-terminal {
    --primary-color: #33ff33; 
    --primary-glow: rgba(51, 255, 51, 0.3);
    --bg-dark: #000000;
    --bg-light: #0a0a0a;
    --bg-overlay: rgba(0, 0, 0, 0.95);
    --bg-input: rgba(0, 0, 0, 0.8);
    
    --glass-bg: rgba(0, 0, 0, 0.9);
    --glass-border: rgba(51, 255, 51, 0.3);
    --shadow-base: rgba(0, 0, 0, 0);
    
    --text-main: #33ff33;
    --text-body: #33ff33;
    --text-muted: #1a881a;
    --text-faint: #0a440a;
    
    --color-success: #33ff33;
    --color-danger: #ff3333;
    
    /* RANKING TERMINAL: Verde fósforo puro (monocromático clásico) */
    --rank-gold: #33ff33;
    --rank-silver: #22cc22;
    --rank-bronze: #11aa11;
}

/* ==========================================
   🧱 SANEAMIENTO GLOBAL DE COMPONENTES
   ========================================== */

body {
    background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-light) 100%) !important;
    color: var(--text-body) !important;
    min-height: 100vh;
    transition: background 0.25s ease, color 0.25s ease;
    font-family: 'Manjari', sans-serif;
}

/* 🔥 EL ANTÍDOTO PARA LAS LETRAS BLANCAS REBELDES:
   Forzamos a que las tarjetas, títulos e inputs lean SIEMPRE de la variable dinámica activa */
.content, .contentSidebar, .glass, .project-card, .navbar {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-body) !important;
    box-shadow: 0 8px 32px 0 var(--shadow-base);
}

/* Forzar títulos principales */
h1, h2, h3, h4, th, .logo {
    color: var(--text-main) !important;
}

/* Forzar textos descriptivos secundarios */
p, span, label, td, .description {
    color: var(--text-body) !important;
}

/* Evitar que los inputs se queden con texto blanco sobre fondo claro */
input, textarea, select {
    background: var(--bg-input) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--glass-border) !important;
}

/* Corregir marcadores de posición (placeholders) */
input::placeholder, textarea::placeholder {
    color: var(--text-muted) !important;
    opacity: 0.8;
}

/* Forzar enlaces genéricos que no tengan clases especiales */
a:not([style*="color"]) {
    color: var(--primary-color);
}
/*==========Cosas generales========*/
/*Tamaño del icono*/
.icon
{
    height: 40px;
    border-radius: 30px;
}
/*Aplicar cambios basicos al html*/
*
{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
}

/*Efecto glass difuminado*/
.glass
{
    background: var(--glass-bg);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid var(--glass-border);
    box-shadow: 0 4px 30px var(--shadow-base);
}
/*Animaciones*/
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); };
    to   { opacity: 1; transform: translateY(0); };
}
@keyframes fadeOut {
    from { opacity: 1; transform: translateY(0); };
    to   { opacity: 0; transform: translateY(-10px); };
}
@keyframes float {
    0%, 100% { transform: translateY(0); };
    50% { transform: translateY(-10px); };
}
/*=========Seccion del navbar==========*/
/*Estructura basica del navbar*/
.navbar
{
    display: flex;
    position: fixed;
    top: 1rem;
    left: 1rem;
    right: 1rem;
    padding: 1rem 1.5rem;
    border-radius: 1.5rem;
    z-index: 100;
    justify-content: space-between;
    align-items: center;
}
.navbarLinks
{
    display: flex;
    gap: 1rem;
    align-items: center;
    list-style:none;
}
/*Color del nickname*/
.logoContainer
{
    display: flex;
    align-items: center;
    gap: 10px;
}
.logoContainer a
{
    color: var(--text-main);
    font-size: 1.125rem;
    font-weight: bold;
    margin-right: 0;
}
.navbarLinks a
{
    color: var(--text-main);
    transition: color 0.3s ease;
}
.navbarLinks a:hover
{
    color: var(--primary-color);
}
/*==Selector de idiomas==*/
/* Contenedor principal */
.lang-dropdown 
{
    position: relative;
    margin-left: 1rem; /* Separarlo de los otros links */
}

/* El botón visible */
.lang-btn 
{
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-main);
    padding: 8px 15px;
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    transition: all 0.3s ease;
}
/*hover de color*/
.lang-btn:hover 
{
    background: var(--glass-bg);
    border-color: var(--primary-color);
    box-shadow: 0 0 10px var(--primary-glow);
}
/*acompaña al hover de arriba con un ligero movimiento horizontal derecho*/
.lang-btn i 
{
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}
/* Estado activo (cuando el menú está abierto) */
.lang-dropdown.active .lang-btn i 
{
    transform: rotate(180deg);
}
/* La lista desplegable (oculta por defecto) */
.lang-options 
{
    position: absolute;
    top: 120%; /* Un poco separado del botón */
    right: 0;
    width: 120px;
    background: var(--bg-dark); /* Más oscuro para leer bien */
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 10px 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    /* Animación de aparición */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 200;
}
/* Mostrar la lista cuando tiene la clase .active */
.lang-dropdown.active .lang-options 
{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.lang-options li a 
{
    display: block;
    padding: 8px 15px;
    color: var(--text-body);
    font-size: 0.9rem;
    transition: all 0.2s;
}
.lang-options li a:hover {
    background: var(--primary-glow);
    color: white;
    padding-left: 20px; /* Pequeño desplazamiento al hover */
}
/*=========Main==========*/
/*==Margenes del main==*/
main
{
    margin: 40px auto 30px;
    display: grid;
    grid-template-columns: 3fr 1fr; 
    gap: 20px;
    width: 90%;
    max-width: 1800px;
}
.content
{
    background: var(--bg-light);
    border: 1px solid var(--glass-border);
    color: var(--text-main);
    padding: 20px;
    border-radius: 20px 5px 5px 20px ;
}
.contentSidebar
{
    background: var(--bg-light);
    border: 1px solid var(--glass-border);
    color: var(--text-main);
    padding: 20px;
    border-radius: 5px 20px 20px 5px ;
}
/*==Wrapper para Sections==*/
.mainContentWrapper
{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.content
{
    background: var(--bg-light);
    border: 1px solid var(--glass-border);
    color: var(--text-main);
    padding: 20px;
    border-radius: 20px 5px 5px 20px ;
}
.contentSidebar
{
    background: var(--bg-light);
    border: 1px solid var(--glass-border);
    color: var(--text-main);
    padding: 20px;
    border-radius: 5px 20px 20px 5px ;
}
/*==Wrapper para Sections==*/
.mainContentWrapper
{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
/*Presentacion*/
.me
{
    grid-column: 1 / -1;
    background: var(--bg-light);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    margin-bottom: 20px;
}
.me p
{
    font-size: 20px;
}
/*=========Responsividad==========*/
.mobileMenu { display: none; }
@media(max-width: 767px){
    .mobileMenu { display: block;}
    .navbarLinks
    {
        position:absolute;
        top: 6rem;
        left:1rem;
        right: 1rem;
        display: none;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        padding: 2rem;
        background: var(--bg-dark);
        border:1px solid var(--glass-border);
        border-radius: 20px;
    }
    .navbarLinks.active {
        display:flex;
        animation: fadeIn 0.4s ease forwards;
    }
    .navbarLinks.closing {
        display: flex;
        animation: fadeOut 0.4s ease forwards;
        pointer-events: none;
    }
    .icon
    {
    height: 25px;
    border-radius: 30px;
    }
    .lang-dropdown 
    {
    display:flex;
    margin-left: 0;
    width: 100%;
    justify-content: center;
}
    .lang-options
    {
        right: auto;
        left: 50%;
        transform: translateX(-50%) translateY(-10px);
        width: 150px;
        text-align: center;
    }
    .lang-dropdown.active .lang-options
    {
        transform: translateX(-50%) translateY(0);
    }
    main
    {
        grid-template-columns: 1fr;
    }
    .content
    {
        border-radius: 20px  20px 5px 5px ;
    }

    .contentSidebar
    {

        border-radius: 5px 5px 20px 20px  ;
    }
}

/*==============Paleta de colores (Modo claro)============*/
body.light-mode
{
    /* Fondos */
    /* Slate 50 (casi blanco) */   
    --bg-dark: #f8fafc;
    /* Blanco puro */
    --bg-light: #ffffff;
    --bg-overlay: rgba(255, 255, 255, 0.95);
    /* Textos (Invertidos) */
    /* Slate 900 (oscuro) */
    --text-main: #0f172a;
    /* Slate 700 */
    --text-body: #334155;
    --text-muted: #64748b;
    /* Colores del glass */
    /* Más opaco */
    --glass-bg: rgba(255, 255, 255, 0.4);
    /* Más grisaceo */
    --glass-border: rgba(0, 0, 0, 0.1);
    --shadow-base: rgba(0, 0, 0, 0.05);
}
body.light-mode .heroContent h1,
body.light-mode .heroContent p {
    color: #ffffff;
    text-shadow: 0 4px 10px rgba(0,0,0,0.8);
}