/* ============================================
   CSS: theme-claro.css — Olemurcia
   Componente: Tema Claro completo
   ============================================ */

    /* === TEMA CLARO === */
    body.tema-claro{
        --fondo:#f0f2f5;
        --superficie:rgba(0,0,0,.04);
        --borde:rgba(0,0,0,.1);
        --texto:#1a1d2e;
        --difuso:#6b7280;
    }

    /* El tema "nuevo" define su propio fondo claro (con retícula), así que
       aquí se excluye para no anularlo. */
    body.tema-claro:not(.tema-nuevo) .fondo{
        background:
            radial-gradient(700px 350px at 15% 0%, rgba(124,92,255,.08), transparent),
            radial-gradient(700px 350px at 85% 100%, rgba(34,211,238,.06), transparent) !important;
    }

    body.tema-claro .fondo-overlay{
        background:rgba(255,255,255,.82);
    }

    body.tema-claro .contenedor{
        background:rgba(255,255,255,.85);
    }

    body.tema-claro .sidebar{
        background:transparent !important;
    }

    body.tema-claro .sidebar .nav-sidebar a{
        background:rgba(255,255,255,.6) !important;
    }

    body.tema-claro .nav-sidebar a:hover{
        background:rgba(124,92,255,.06) !important;
        border-color:rgba(124,92,255,.25) !important;
    }

    body.tema-claro .nav-sidebar a.activo{
        background:rgba(124,92,255,.1) !important;
        border-color:rgba(124,92,255,.35) !important;
        color:var(--violeta) !important;
    }

    body.tema-claro .cabecera{
        background:rgba(255,255,255,.5) !important;
        border-bottom:1px solid var(--borde) !important;
    }

    body.tema-claro .banner{
        opacity:.95;
    }

    body.tema-claro .widget-sidebar{
        background:rgba(255,255,255,.65) !important;
    }

    body.tema-claro .nav-seccion[data-seccion="estado"],
    body.tema-claro .nav-seccion[data-seccion="ts3"],
    body.tema-claro .nav-seccion[data-seccion="discord"]{
        background:rgba(255,255,255,.65) !important;
    }

    body.tema-claro .seccion h2{
        color:var(--texto);
    }

    body.tema-claro .acceso{
        background:transparent !important;
        border:1px solid var(--borde);
    }

    body.tema-claro .acceso:hover{
        background:rgba(255,255,255,.3) !important;
        border-color:rgba(124,92,255,.3);
    }

    body.tema-claro .gallery-featured{
        background:transparent !important;
    }

    body.tema-claro .btn,
    body.tema-claro button{
        color:var(--texto);
    }

    body.tema-claro .pie{
        color:var(--difuso);
        border-top:1px solid var(--borde);
    }

    body.tema-claro input,
    body.tema-claro textarea,
    body.tema-claro select{
        background:rgba(255,255,255,.7) !important;
        border-color:var(--borde) !important;
        color:var(--texto) !important;
    }

    body.tema-claro{
        --verde:#16a34a;
        --rojo:#dc2626;
        --violeta:#6d28d9;
        --cian:#0891b2;
    }

    body.tema-claro .seccion{
        background:transparent;
    }

    /* === SWITCH TEMA PORTADA (toggle bubble) === */
    .tema-switch{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:2px;
        width:fit-content;
        margin:0 auto 10px;
        padding:3px;
        border-radius:20px;
        border:1px solid var(--borde);
        background:var(--superficie);
    }

    .tema-switch-btn{
        width:32px;
        height:32px;
        border-radius:50%;
        border:none;
        background:transparent;
        cursor:pointer;
        font-size:14px;
        display:flex;
        align-items:center;
        justify-content:center;
        transition:.2s;
        opacity:.45;
    }

    .tema-switch-btn:hover{
        opacity:.85;
    }

    .tema-switch-btn.activo{
        opacity:1;
        background:rgba(125,217,255,.15);
        box-shadow:0 0 8px rgba(125,217,255,.2);
    }

    body.tema-claro .tema-switch{
        border-color:rgba(0,0,0,.12);
        background:rgba(0,0,0,.04);
    }

    body.tema-claro .tema-switch-btn.activo{
        background:rgba(124,92,255,.12);
        box-shadow:0 0 8px rgba(124,92,255,.15);
    }

    /* === WHITELIST / VOTAR EN TEMA CLARO === */
    body.tema-claro .whitelist-card{
        background:rgba(255,255,255,.5);
        border:1px solid var(--borde);
        box-shadow:none;
    }

    body.tema-claro .whitelist-logo{
        background:rgba(124,92,255,.08);
        border:1px solid rgba(124,92,255,.15);
    }

    body.tema-claro .whitelist-header h2{
        color:var(--texto);
    }

    body.tema-claro .whitelist-sub{
        color:var(--difuso);
    }

    body.tema-claro .whitelist-label span{
        color:#4b5563;
    }

    body.tema-claro .whitelist-label input,
    body.tema-claro .whitelist-input{
        background:rgba(255,255,255,.8) !important;
        border-color:var(--borde) !important;
        color:var(--texto) !important;
    }

    body.tema-claro .whitelist-label input::placeholder,
    body.tema-claro .whitelist-input::placeholder{
        color:#9ca3af;
    }

    body.tema-claro .whitelist-btn{
        background:var(--violeta);
        color:#fff;
    }

    body.tema-claro .whitelist-btn:hover:not(:disabled){
        background:#6d28d9;
    }

    body.tema-claro .whitelist-resultado.ok{
        background:rgba(22,163,74,.1);
        color:#15803d;
        border:1px solid rgba(22,163,74,.25);
    }

    body.tema-claro .whitelist-resultado.error{
        background:rgba(220,38,38,.1);
        color:#b91c1c;
        border:1px solid rgba(220,38,38,.25);
    }

    body.tema-claro .whitelist-info{
        border-top-color:var(--borde);
    }

    body.tema-claro .whitelist-info ul{
        color:#4b5563;
    }

    body.tema-claro .whitelist-info li::before{
        background:#16a34a;
    }

    body.tema-claro .whitelist-proceso{
        background:rgba(0,0,0,.04);
        border-color:var(--borde);
        color:var(--texto);
    }

    /* === LOGROS EN TEMA CLARO === */
    body.tema-claro .logros-tab{
        background:rgba(0,0,0,.04);
        border-color:var(--borde);
        color:var(--texto);
    }

    body.tema-claro .logros-tab:hover{
        background:rgba(0,0,0,.07);
    }

    body.tema-claro .logros-tab.activo{
        background:rgba(124,92,255,.1);
        border-color:rgba(124,92,255,.3);
        color:var(--violeta);
    }

    body.tema-claro .logros-header{
        background:rgba(255,255,255,.5);
        border-color:var(--borde);
    }

    body.tema-claro .logros-avatar{
        background:rgba(124,92,255,.08);
    }

    body.tema-claro .logros-seccion{
        background:rgba(255,255,255,.5);
        border-color:var(--borde);
    }

    body.tema-claro .logros-personaje{
        border-bottom-color:var(--borde);
    }

    body.tema-claro .logros-pj-votos{
        color:var(--difuso);
    }

    body.tema-claro .logros-claim{
        background:rgba(234,179,8,.08);
        border-color:rgba(234,179,8,.2);
    }

    body.tema-claro .logros-sugerencia{
        background:rgba(22,163,74,.06);
        border-color:rgba(22,163,74,.15);
    }

    body.tema-claro .logros-logout{
        background:rgba(220,38,38,.08);
        border-color:rgba(220,38,38,.2);
        color:#b91c1c;
    }

    body.tema-claro .logros-logout:hover{
        background:rgba(220,38,38,.14);
    }

    body.tema-claro .logros-logro.completado{
        background:rgba(22,163,74,.06);
    }

    body.tema-claro .logros-countdown{
        color:var(--difuso);
    }

    /* === RECURSOS EN TEMA CLARO === */
    body.tema-claro .btn-pagina{
        background:rgba(124,92,255,.1);
        border-color:rgba(124,92,255,.3);
        color:var(--violeta);
    }

    body.tema-claro .btn-pagina:hover:not(:disabled){
        background:rgba(124,92,255,.2);
    }

    body.tema-claro .chip-recurso{
        background:rgba(255,255,255,.5);
        border-color:var(--borde);
        color:var(--texto);
    }

    body.tema-claro .chip-recurso.activo{
        background:rgba(124,92,255,.12);
        border-color:rgba(124,92,255,.4);
        color:var(--violeta);
    }

    body.tema-claro .recurso-modal{
        background:rgba(0,0,0,.4);
    }

    body.tema-claro .recurso-modal-caja{
        background:#fff;
        border-color:var(--borde);
    }

    body.tema-claro .recurso-modal-cerrar{
        background:rgba(0,0,0,.06);
        color:var(--texto);
    }

    body.tema-claro .recurso-modal-cerrar:hover{
        background:rgba(0,0,0,.1);
    }

    body.tema-claro .servidor{
        background:rgba(255,255,255,.5);
        border-color:var(--borde);
    }

    body.tema-claro .servidor:hover{
        background:rgba(255,255,255,.7);
        border-color:rgba(124,92,255,.25);
    }

    /* === NOTICIAS EN TEMA CLARO === */
    body.tema-claro .btn-mini{
        background:rgba(124,92,255,.08) !important;
        color:var(--violeta) !important;
        border:1px solid rgba(124,92,255,.25) !important;
    }

    body.tema-claro .btn-mini:hover{
        background:rgba(124,92,255,.15) !important;
    }

    /* === GALERIA EN TEMA CLARO === */
    body.tema-claro .galeria-item{
        border-color:var(--borde);
    }

    body.tema-claro .galeria-overlay{
        background:linear-gradient(transparent, rgba(255,255,255,.85));
        color:var(--texto);
    }

    /* === BOTONES GENERALES EN TEMA CLARO === */
    body.tema-claro .btn{
        background:rgba(0,0,0,.05);
        border-color:var(--borde);
        color:var(--texto);
    }

    body.tema-claro .btn:hover:not(:disabled){
        background:rgba(0,0,0,.09);
    }

    body.tema-claro .btn.principal{
        background:linear-gradient(135deg, var(--violeta), var(--cian));
        color:#fff;
    }

    body.tema-claro .btn.rojo{
        background:rgba(220,38,38,.1);
        border-color:rgba(220,38,38,.25);
        color:#b91c1c;
    }

    body.tema-claro .btn.rojo:hover:not(:disabled){
        background:rgba(220,38,38,.18);
    }

    .login-tarjeta{
        background:var(--fondo);
        border:1px solid var(--borde);
    }

    body.tema-claro .login-tarjeta{
        background:#1a1d2e;
        border-color:rgba(255,255,255,.12);
    }

    /* === ESTADO / SERVIDORES EN TEMA CLARO === */
    body.tema-claro .grid-servidores .servidor{
        background:rgba(255,255,255,.5);
    }

    /* === WIDGETS SIDEBAR EN TEMA CLARO === */
    body.tema-claro .widget-sidebar{
        background:rgba(255,255,255,.65) !important;
    }