/* ==========================================================================
   STYLES.CSS — EDICIÓN FINAL (TEXTURAS SÍ, SOMBRAS NO)
   ========================================================================== */

/* ==========================================================================
   CONFIGURACIÓN BASE (Variables)
   ========================================================================== */
:root {
    --bg-body: url('assets/index/SATIN01.png');
    --bg-container: url('assets/index/cip60067.jpg');
    /* Fondo semi-transparente para que se vea la textura de abajo pero se lea el texto */
    --bg-header: rgba(255,255,255,0.85); 
    --bg-nav: #fff;
    --bg-updates: #000;
    
    --col-text: #000;
    --col-link: #0000AA;
    --col-link-hover: #FF0000;
    
    --cursor: url('assets/index/spider-0038.gif'), auto;
    --gif-mascot: url('assets/index/tiger-clock-0450.gif');
    --gif-deco-1: url('assets/index/bird-0480.gif');
    
    --font-heading: 'Comic Sans MS', 'Comic Sans', 'Chalkboard SE', sans-serif;
    --font-body: 'Courier New', Courier, monospace;
    
    --border-style: 3px solid #000;
    --text-shadow: none; 
}

/* --- AJUSTES POR TEMA --- */
[data-theme] { --font-heading: 'Comic Sans MS', cursive; }
[data-theme="telas"] { --col-text: #4a0000; --col-link: #b71c1c; --bg-nav: #fff0f5; --border-style: 4px dashed #8a2be2; }
[data-theme="geotema"] { --col-text: #000; --col-link: #006064; --col-link-hover: #ffff00; --bg-nav: #cfd8dc; --bg-updates: #222; --border-style: 4px solid #000; }
[data-theme="maderitas"] { --col-text: #000; --col-link: #76ff03; --col-link-hover: #fff; --bg-nav: #5d4037; --border-style: 5px outset #8d6e63; }
[data-theme="edificios"] { --col-text: #000; --col-link: #d50000; --bg-nav: #b0bec5; --border-style: 3px solid #000; }
[data-theme="plantas"] { --col-text: #1b5e20; --col-link: #d81b60; --bg-nav: #f1f8e9; --border-style: 4px double #2e7d32; }

/* ==========================================================================
   ESTRUCTURA GENERAL
   ========================================================================== */
* { box-sizing: border-box; }

body {
    margin: 0; padding: 10px;
    background-image: var(--bg-body);
    background-attachment: fixed;
    background-repeat: repeat;
    font-family: var(--font-body);
    color: var(--col-text);
    cursor: var(--cursor);
    overflow-x: hidden;
    font-size: 18px; 
    line-height: 1.6;
}

a { 
    color: var(--col-link); 
    text-decoration: underline; 
    cursor: help; 
    background: rgba(255,255,255,0.3); /* Fondo sutil en enlaces */
    font-weight: bold; 
}
a:hover { 
    color: var(--col-link-hover); 
    background: yellow; 
    text-decoration: none; 
}

/* CONTENEDOR PRINCIPAL (Con Textura + Legibilidad) */
.main-container {
    max-width: 1200px; width: 95%; margin: 40px auto;
    
    /* Recuperamos la imagen de fondo */
    background-image: var(--bg-container); 
    background-color: #fff; 
    background-size: cover;
    
    border: var(--border-style); 
    box-shadow: none; /* Sin sombra externa */
    padding: 40px; 
    position: relative; 
    text-shadow: none;
    transform: none; 
}

/* Capa blanca semitransparente para que el texto se lea sobre la foto */
.main-container::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: #fff; 
    opacity: 0.7; /* Ajusta esto si quieres ver más o menos fondo (0.0 a 1.0) */
    transform: rotate(-1.5deg); pointer-events: none;
    border: 1px solid #000;
}

h1, h2, h3, legend, .nav-item span { font-family: var(--font-heading); text-transform: uppercase; font-weight: bold; }

/* HEADER */
.header-box {
    position: relative; border-bottom: 4px solid black; padding: 30px; margin-bottom: 40px;
    
    /* Recuperamos la textura del header */
    background-image: var(--bg-header); 
    background-color: rgba(255,255,255,0.8);
    background-size: cover; background-blend-mode: overlay;
    
    display: flex; flex-direction: column; align-items: center; 
    box-shadow: none; 
    border: 4px solid #000;
    transform: rotate(1deg);
}

.title-stack h1 { 
    font-size: 5rem; margin: 0; letter-spacing: -3px; line-height: 0.9; 
    color: red; 
    text-shadow: none; 
    transform: rotate(-2deg); 
}
.title-stack .subtitle { 
    background: black; color: white; display: inline-block; padding: 5px 15px; 
    margin-top: 10px; font-size: 1.2rem; transform: rotate(2deg); 
}

.stamp { position: absolute; top: 10px; right: 20px; transform: rotate(15deg); width: 100px; mix-blend-mode: multiply; }
.flags { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 10px; transform: rotate(-2deg); }
.flags img { border: 2px solid black; width: 60px; box-shadow: none; }
.mascot { position: absolute; bottom: -30px; right: 20px; z-index: 10; }
.mascot img { width: 100px; }

/* NAV */
.nav-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 25px; margin-bottom: 50px; padding: 10px; }
.nav-item {
    display: flex; flex-direction: column; align-items: center; padding: 15px; 
    background: var(--bg-nav); 
    border: 3px solid black; 
    box-shadow: none; 
    color: black !important; text-decoration: none; width: 160px; transition: transform 0.2s;
}
.nav-item img { height: 80px; width: auto; object-fit: contain; margin-bottom: 10px; }
.nav-item span { font-size: 1.2rem; }
.nav-item:nth-child(odd) { transform: rotate(-3deg); margin-top: 15px; }
.nav-item:nth-child(even) { transform: rotate(2deg); margin-top: -5px; }

.nav-item:hover { 
    transform: scale(1.1) rotate(0deg) !important; 
    z-index: 10; 
    background: yellow; 
    border: 4px solid black; 
    box-shadow: none; 
}

/* CONTENIDO */
.dashboard-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; align-items: start; }

.paper-note { 
    border: 3px solid #000; 
    /* Fondo casi opaco para leer bien, pero no blanco nuclear */
    background: rgba(255,255,255,0.95); 
    padding: 25px; 
    position: relative; 
    box-shadow: none; 
    transform: none; 
}

.intro-box { z-index: 2; background: #ffffcc; transform: none; } /* Nota amarilla */
.intro-box::before { 
    content: ''; position: absolute; top: -15px; left: 45%; width: 60px; height: 35px; 
    background: rgba(255,255,255,0.4); border: 1px dotted #000; 
    transform: rotate(-3deg); box-shadow: none; 
}
.updates-box { z-index: 1; background: #e6e6fa; transform: none; } /* Nota morada */
img { max-width: 100%; height: auto; }

/* FOOTER */
.footer-box { 
    margin-top: 60px; text-align: center; font-size: 1rem; 
    border-top: 4px solid #000; 
    padding: 30px; background: black; color: white; 
    transform: rotate(0.5deg); width: 104%; margin-left: -2%; 
}

/* UTILIDADES */
#theme-selector { position: fixed; top: 10px; right: 10px; background: #000; border: 2px solid #fff; padding: 5px; z-index: 10000; width: 160px; box-shadow: none; }
.skin-header { background: red; color: yellow; text-align: center; font-family: var(--font-heading); font-weight: bold; margin-bottom: 5px;}
.skin-btn { font-family: var(--font-body); border: 1px solid white; margin-bottom: 3px; background: #333; color: white; cursor: pointer; padding: 5px; width: 100%; text-align: left;}
.skin-btn:hover { background: #fff; color: #000; border-color: #000; }

/* MARQUESINA */
.marquee-container { 
    background: #e276cc; 
    color: #057; 
    border: 3px solid black; 
    margin-bottom: 30px; 
    font-family: var(--font-body); 
    font-size: 1,5rem; 
    transform: rotate(-0.5deg); 
    width: 101%; 
    margin-left: -0.5%; 
    padding: 8px 0;
}

.floater { position: fixed; z-index: 999; pointer-events: none; }
.bird-fly { content: var(--gif-deco-1); top: 50px; left: 30px; width: 100px; }

/* --- EXTRAS Y2K --- */
.cursor-trail { position: fixed; pointer-events: none; z-index: 9999; font-size: 1.2rem; animation: fadeOut 1s forwards; }
@keyframes fadeOut { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.5) translateY(20px); } }

.sticker-drop { position: absolute; pointer-events: none; z-index: 50; filter: none; width: 80px; height: auto; animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
@keyframes popIn { from { transform: scale(0); } to { transform: scale(1) rotate(var(--rot)); } }

#bios-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; color: #00ff00; font-family: 'Courier New', monospace; z-index: 100000; padding: 40px; font-size: 1.2rem; display: flex; flex-direction: column; justify-content: flex-start; cursor: wait; }
.bios-line { margin-bottom: 10px; }
.blink-cursor::after { content: '_'; animation: blink 0.8s infinite; }
@keyframes blink { 50% { opacity: 0; } }

.side-widget { 
    position: fixed; top: 150px; width: 130px; 
    background: #fff; 
    border: 3px solid #000; 
    padding: 5px; text-align: center; z-index: 50; 
    box-shadow: none; 
}
.side-widget h4 { background: navy; color: white; margin: 0; padding: 5px; font-family: sans-serif; font-size: 0.8rem; margin-bottom: 5px; font-weight: bold; }
.widget-left { left: 20px; } .widget-right { right: 20px; }
@media (max-width: 1400px) { .side-widget { display: none; } }

.nav-item:hover, .post-card:hover { animation: glitch-shake 0.3s cubic-bezier(.36,.07,.19,.97) both infinite; }
@keyframes glitch-shake { 0% { transform: translate(0, 0); } 20% { transform: translate(-2px, 2px); } 40% { transform: translate(-2px, -2px); } 60% { transform: translate(2px, 2px); } 80% { transform: translate(2px, -2px); } 100% { transform: translate(0, 0); } }

/* --- GATEWAY MODAL --- */
#gateway-modal { position: fixed; inset: 0; z-index: 200000; background: rgba(0,0,0,0.9); backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; }
.gateway-content { 
    background: #fff; 
    border: 6px solid #000; 
    padding: 40px; text-align: center; max-width: 600px; width: 90%; 
    box-shadow: none; 
    position: relative; 
}
.gateway-content h2 { font-family: 'Arial Black', sans-serif; font-size: 2.5rem; color: #000; background: yellow; border: 2px solid black; display: inline-block; padding: 10px 20px; margin-top: 0; margin-bottom: 20px; text-transform: uppercase; letter-spacing: -1px; }
.gateway-content p { font-family: 'Verdana', sans-serif; font-size: 1.2rem; line-height: 1.5; color: #333; margin-bottom: 15px; font-weight: bold; }
.gateway-buttons { display: flex; gap: 20px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.gateway-buttons button { padding: 20px 30px; cursor: pointer; border: 4px solid #000; font-size: 1.1rem; transition: transform 0.2s; min-width: 200px; box-shadow: none; }

.btn-simple { background: #f0f0f0; color: #000; font-family: Arial, sans-serif; font-weight: bold; }
.btn-simple:hover { background: #fff; transform: translateY(-5px); border-color: #000; }

.btn-chachi { background: #000; color: #0f0; font-family: 'Comic Sans MS', 'Impact', sans-serif; }
.btn-chachi:hover { background: #222; transform: scale(1.1) rotate(-3deg); color: #fff; border-color: yellow; }

@media (max-width: 600px) { .gateway-content { padding: 20px; } .gateway-content h2 { font-size: 1.8rem; } .gateway-buttons button { width: 100%; } }

/* --- MODO SIMPLE --- */
[data-mode="simple"] {
    --bg-body: #f5f5dc; --bg-container: #ffffff; --bg-header: #eeeeee; --bg-nav: #e0e0e0; --bg-updates: #333;
    --col-text: #333; --col-link: #0000ee; --col-link-hover: #551a8b; --cursor: auto; 
    --font-heading: 'Arial', sans-serif; --font-body: 'Georgia', serif;
    --border-style: 1px solid #999; --text-shadow: none;
}
[data-mode="simple"] .chaos-element, [data-mode="simple"] .cursor-trail, [data-mode="simple"] .sticker-drop, [data-mode="simple"] #bios-screen, [data-mode="simple"] #theme-selector, [data-mode="simple"] .marquee-container, [data-mode="simple"] .floater, [data-mode="simple"] .crt-overlay { display: none !important; }
[data-mode="simple"] .header-box, [data-mode="simple"] .title-stack h1, [data-mode="simple"] .title-stack .subtitle, [data-mode="simple"] .nav-item, [data-mode="simple"] .intro-box, [data-mode="simple"] .updates-box, [data-mode="simple"] .footer-box, [data-mode="simple"] .flags { transform: none !important; margin-top: 0 !important; box-shadow: none; border-radius: 4px; }
[data-mode="simple"] .nav-item:hover { transform: none !important; background: #ccc; box-shadow: none; animation: none; border: 1px solid #000; }
[data-mode="simple"] .intro-box::before { display: none; }
[data-mode="simple"] .main-container { box-shadow: none; max-width: 900px; border: 1px solid #ccc; }

/* ==========================================================================
   MÓVIL (MODO PLANCHADO OBLIGATORIO)
   ========================================================================== */
@media (max-width: 768px) { 
    body { padding: 0; font-size: 16px; overflow-x: hidden; }
    
    .main-container { width: 100%; max-width: none; padding: 15px; margin: 0; box-shadow: none; border: none; transform: none !important; }
    .main-container::before { display: none; }
    
    .header-box { transform: none !important; margin-bottom: 20px; width: 100%; text-align: center; }
    .title-stack h1 { font-size: 3.5rem; transform: none !important; }
    .title-stack .subtitle { transform: none !important; display: block; margin-top: 5px; }

    .nav-grid { gap: 10px; padding: 0; margin-bottom: 30px; }
    .nav-item { width: 48%; transform: none !important; margin: 0 !important; }
    
    .dashboard-grid { grid-template-columns: 1fr; gap: 20px; }
    .paper-note, .intro-box, .updates-box { transform: none !important; margin: 0 !important; width: 100%; }
    .intro-box::before { left: 50%; transform: translateX(-50%); }

    .footer-box { transform: none !important; width: 100%; margin-left: 0; margin-top: 30px; }
    .marquee-container { transform: none !important; width: 100%; margin-left: 0; margin-bottom: 0; border: none; border-bottom: 2px solid #fff; }

    #theme-selector { position: relative; width: 100%; top: 0; right: 0; margin-bottom: 15px; border: none; }
    
    .floater, .side-widget, .crt-overlay, .sticker-drop { display: none !important; }
    
    .gateway-content { width: 95%; padding: 20px; }
}

/* ==========================================================================
   EFECTO CRT
   ========================================================================== */
.crt-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 999999;
    pointer-events: none;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), 
                linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    background-size: 100% 3px, 3px 100%;
    animation: crt-flicker 0.15s infinite;
    opacity: 0.4;
    box-shadow: inset 0 0 100px rgba(0,0,0,0.5);
}
@keyframes crt-flicker { 0% { opacity: 0.4; } 50% { opacity: 0.35; } 100% { opacity: 0.4; } }

/* ==========================================================================
   SISTEMA DE GLOSARIO / DEFINICIONES (TOOLTIPS)
   ========================================================================== */
.glosario {
    cursor: help;
    border-bottom: 3px dotted red;
    position: relative;
    transition: background 0.2s;
}

.glosario:hover {
    background: yellow;
    color: black;
}

.glosario::after {
    content: attr(data-def);
    position: absolute;
    bottom: 120%; left: 50%;
    transform: translateX(-50%) scale(0);
    transform-origin: bottom center;
    width: 250px; padding: 15px;
    background: #ffffcc; border: 2px solid black;
    color: black; font-family: 'Courier New', monospace; font-size: 0.9rem;
    line-height: 1.3; text-align: left;
    box-shadow: 5px 5px 0 rgba(0,0,0,0.5);
    z-index: 999999;
    opacity: 0; transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
}

.glosario::before {
    content: '';
    position: absolute; bottom: 100%; left: 50%; margin-left: -10px;
    border-width: 10px; border-style: solid; border-color: black transparent transparent transparent;
    opacity: 0; transition: opacity 0.2s; transform: translateY(10px);
}

.glosario:hover::after { opacity: 1; transform: translateX(-50%) scale(1) rotate(-2deg); }
.glosario:hover::before { opacity: 1; transform: translateY(0); }

@media (max-width: 600px) {
    .glosario::after { width: 200px; left: 0; transform: translateX(-20%) scale(0); }
    .glosario:hover::after { transform: translateX(-20%) scale(1); }
}

[data-mode="simple"] .glosario { border-bottom: 1px dashed #666; }
[data-mode="simple"] .glosario:hover { background: #e0e0e0; }
[data-mode="simple"] .glosario::after {
    background: #fff; border: 1px solid #ccc; box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
    font-family: Arial, sans-serif; color: #333; transform: translateX(-50%) scale(0);
}
[data-mode="simple"] .glosario:hover::after { transform: translateX(-50%) scale(1); }

/* ==========================================================================
   SCROLLBAR RETRO BRUTALISTA (ANCHO EXTREMO)
   ========================================================================== */

/* 1. CONFIGURACIÓN BASE (Solo Chrome, Edge, Safari, Opera) */
::-webkit-scrollbar {
    width: 30px;  /* ANCHURA EXTREMA */
    height: 30px; /* Para scroll horizontal */
    background: #000; /* Fondo de seguridad */
}

/* 2. EL CARRIL (Track) - Fondo oscuro con trama */
::-webkit-scrollbar-track {
    background-color: #404040; /* Gris oscuro */
    
    /* Textura de puntitos retro para el fondo */
    background-image: radial-gradient(#000 20%, transparent 20%);
    background-size: 4px 4px;
    
    border-left: 2px solid #000; /* Separador con la web */
}

/* 3. EL DESLIZADOR (Thumb) - Bloque 3D Windows 95 */
::-webkit-scrollbar-thumb {
    background-color: #c0c0c0; /* El gris clásico de Windows */
    border: 2px solid #000;    /* Borde negro sólido */
    
    /* EL EFECTO 3D (Biselado) */
    /* Luz arriba/izquierda (blanco), Sombra abajo/derecha (gris oscuro) */
    box-shadow: 
        inset 2px 2px 0 #ffffff,
        inset -2px -2px 0 #808080;
}

/* 4. AL PASAR EL RATÓN (Hover) */
::-webkit-scrollbar-thumb:hover {
    background-color: #d4d4d4; /* Se ilumina un poco */
}

/* 5. AL CLICAR (Active) - Efecto botón hundido */
::-webkit-scrollbar-thumb:active {
    background-color: #c0c0c0;
    /* Invertimos las sombras para que parezca presionado */
    box-shadow: 
        inset 2px 2px 0 #808080,
        inset -2px -2px 0 #ffffff;
}

/* 6. SOPORTE PARA FIREFOX (Limitado por el navegador) */
/* Firefox no permite cambiar el ancho ni texturas, solo colores */
html {
    scrollbar-width: auto;      /* Ancho por defecto */
    scrollbar-color: #c0c0c0 #404040; /* Color Thumb / Color Track */
}