/* ========================================= */
/* 1. RESET Y VARIABLES GLOBALES             */
/* ========================================= */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
    --bg-dark: #050505;       /* Negro profundo */
    --bg-card: #121212;       /* Gris muy oscuro para cartas */
    --accent: #1e40af;        /* Azul base */
    --accent-light: #60a5fa;  /* Azul claro para brillos */
    --accent-gradient: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
    --text-main: #f3f4f6;
    --glass-bg: rgba(20, 20, 20, 0.85); /* Vidrio oscuro */
    --glass-border: rgba(255, 255, 255, 0.08);
    --shadow-3d: 0 10px 30px rgba(0,0,0,0.7);
    --radius: 16px;
    --neon-glow: 0 0 10px rgba(59, 130, 246, 0.5), 0 0 20px rgba(59, 130, 246, 0.3);
}

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: 'Inter', system-ui, sans-serif;
    margin: 0; padding: 0;
    overflow-x: hidden; width: 100%;
}

/* ========================================= */
/* 2. EFECTOS ESPECIALES Y ANIMACIONES 3D    */
/* ========================================= */

/* Efecto Vidrio (Glassmorphism) */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}

/* Animación de Entrada de Modales (Pop In 3D) */
@keyframes popIn { 
    from { transform: scale(0.9) translateY(20px); opacity: 0; } 
    to { transform: scale(1) translateY(0); opacity: 1; } 
}

/* Animación FLASH AZUL al hacer clic en historias (Tu favorita) */
@keyframes flashBlue {
    0% { transform: scale(0.95); box-shadow: 0 0 0 rgba(30, 58, 138, 0); }
    50% { transform: scale(0.98); box-shadow: 0 0 25px var(--accent-light); border: 1px solid var(--accent-light); }
    100% { transform: scale(1); box-shadow: 0 0 0 rgba(30, 58, 138, 0); }
}
.card-pulse { animation: flashBlue 0.4s ease-out forwards; }

/* NUEVO: Efecto de botón presionado (3D Click) */
button:active, .nav-btn:active, .bubble.action:active {
    transform: scale(0.95);
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.5); /* Sombra interna */
    transition: transform 0.1s;
}

/* Clases Utilitarias */
.hidden { display: none !important; }
.no-copy { -webkit-user-select: none; user-select: none; }

/* ========================================= */
/* 3. BARRA DE NAVEGACIÓN (NAVBAR)           */
/* ========================================= */
.navbar {
    position: sticky; top: 0; z-index: 100;
    padding: 15px 20px 5px 20px;
    display: flex; flex-direction: column; gap: 15px;
}

.nav-brand { display: flex; align-items: center; gap: 12px; }
.nav-logo-img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 0 5px rgba(255,255,255,0.2)); }
.nav-title { font-weight: 900; font-size: 1.5rem; letter-spacing: -0.5px; color: white; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }

.nav-actions { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding-bottom: 10px; 
    width: 100%; /* Asegura que ocupe todo el ancho */
    gap: 10px; /* Espacio entre categorías y campana */
    overflow: hidden; /* Evita desbordamientos indeseados */
}

.nav-categories {
    display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none;
    align-items: center; padding-right: 15px; flex: 1;
}
.nav-categories {
    display: flex; 
    gap: 10px; 
    overflow-x: auto; 
    align-items: center; 
    flex: 1; /* Toma todo el espacio disponible */
    min-width: 0; /* TRUCO DE ORO: Permite el scroll dentro de un hijo flex */
    scrollbar-width: none; /* Oculta scrollbar Firefox */
    mask-image: linear-gradient(to right, black 90%, transparent 100%); /* Desvanecido estético al final */
    -webkit-mask-image: linear-gradient(to right, black 90%, transparent 100%);
    padding-right: 5px;
}

.nav-btn {
    background: rgba(255,255,255,0.03); border: 1px solid #333; color: #888;
    padding: 8px 18px; border-radius: 20px; font-size: 0.85rem; font-weight: 600;
    white-space: nowrap; cursor: pointer; transition: all 0.3s ease;
}
.nav-btn:hover { border-color: #555; color: white; background: rgba(255,255,255,0.08); }

.nav-btn.active {
    background: var(--accent-gradient); color: white; border: 1px solid var(--accent);
    box-shadow: var(--neon-glow); /* Brillo Neon */
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.bell-btn {
    background: rgba(255,255,255,0.05); 
    border: none; 
    color: white;
    width: 38px; 
    height: 38px; 
    border-radius: 50%;
    display: flex; 
    align-items: center; 
    justify-content: center;
    cursor: pointer; 
    flex-shrink: 0; /* IMPORTANTE: Impide que se encoja o desaparezca */
    transition: 0.3s;
    z-index: 10; /* Asegura que esté por encima si algo se mueve mal */
}
.bell-btn:hover { background: rgba(255,255,255,0.2); box-shadow: 0 0 10px rgba(255,255,255,0.1); }

/* ========================================= */
/* 4. GRID PRINCIPAL (HISTORIAS)             */
/* ========================================= */
.grid-container {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px;
    padding: 15px; max-width: 1400px; margin: 0 auto;
    min-height: 85vh; /* Empuja el footer hacia abajo */
    align-content: start;
}
@media (min-width: 768px) { .grid-container { grid-template-columns: repeat(4, 1fr); gap: 25px; } }

.story-card {
    background: var(--bg-card); border-radius: var(--radius);
    aspect-ratio: 4/5; position: relative; overflow: hidden;
    box-shadow: var(--shadow-3d); cursor: pointer; transition: transform 0.3s, box-shadow 0.3s;
    border: 1px solid transparent;
}

/* Hover suave 3D en Desktop */
@media(hover: hover) {
    .story-card:hover { 
        transform: translateY(-5px); 
        box-shadow: 0 15px 40px rgba(0,0,0,0.8), 0 0 15px rgba(59, 130, 246, 0.2);
        border-color: rgba(59, 130, 246, 0.3);
    }
}

.story-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.story-card:hover img { transform: scale(1.05); }

.story-card .overlay {
    position: absolute; bottom: 0; width: 100%;
    background: linear-gradient(to top, black, transparent); padding: 60px 10px 15px;
}
.story-card h3 { margin: 0; font-size: 1rem; text-shadow: 0 2px 4px black; font-weight: 700; }

/* ========================================= */
/* 5. PIE DE PÁGINA (PROFESIONAL)            */
/* ========================================= */
.site-footer {
    background-color: #080808; border-top: 1px solid var(--glass-border);
    padding: 60px 20px 30px; margin-top: 50px; font-size: 0.9rem; color: #aaa;
}
.footer-content { max-width: 1200px; margin: 0 auto; }

.footer-grid {
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 30px; margin-bottom: 40px;
}
.footer-section { flex: 1; min-width: 200px; }
.footer-section h4 { 
    color: var(--text-main); font-size: 0.8rem; font-weight: 800; 
    margin-bottom: 20px; letter-spacing: 1px; text-transform: uppercase;
    text-shadow: 0 0 10px rgba(255,255,255,0.1);
}

.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 10px; }
.footer-links a { color: #888; text-decoration: none; transition: 0.3s; display: inline-block; }
.footer-links a:hover { color: var(--accent-light); transform: translateX(5px); } /* Deslizamiento 3D */

.footer-input-group {
    display: flex; background: #1a1a1a; border: 1px solid #333; border-radius: 8px; overflow: hidden;
    max-width: 300px; transition: 0.3s;
}
.footer-input-group:focus-within { border-color: var(--accent-light); box-shadow: 0 0 15px rgba(30, 58, 138, 0.4); }
.footer-input-group input { background: transparent; border: none; padding: 12px; color: white; width: 100%; outline: none; }
.footer-input-group button { background: var(--accent-gradient); border: none; color: white; padding: 0 15px; cursor: pointer; }

.footer-divider { border: 0; height: 1px; background: #222; margin-bottom: 30px; }
.footer-bottom { display: flex; flex-direction: column; gap: 15px; align-items: center; text-align: center; font-size: 0.8rem; }
@media (min-width: 768px) { .footer-bottom { flex-direction: row; justify-content: space-between; } }

.security-seal {
    display: inline-flex; align-items: center; gap: 5px; background: rgba(16, 185, 129, 0.1);
    color: #10b981; padding: 3px 10px; border-radius: 20px; font-size: 0.75rem; 
    border: 1px solid rgba(16, 185, 129, 0.2); margin-left: 10px;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.1);
}
.separator { margin: 0 8px; color: #333; }

/* ========================================= */
/* 6. LECTOR (MODAL PRINCIPAL)               */
/* ========================================= */
.reader-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: var(--bg-dark); z-index: 2000; display: flex; flex-direction: column;
}
.reader-header {
    position: absolute; top: 0; left: 0; width: 100%; height: 75px;
    padding: 0 15px; display: flex; align-items: center; justify-content: space-between;
    z-index: 2001; transition: transform 0.3s ease;
}
.reader-header.hidden-scroll { transform: translateY(-100%); }

.reader-info-box { display: flex; align-items: center; flex: 1; margin: 0 10px; overflow: hidden; }
#reader-thumb { 
    width: 35px; height: 50px; border-radius: 4px; object-fit: cover; 
    margin-right: 10px; border: 1px solid rgba(255,255,255,0.2); 
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}
.reader-text h2 { margin: 0; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reader-text span { font-size: 0.7rem; color: #aaa; }

.reader-scroll-area { flex: 1; overflow-y: auto; padding-top: 85px; padding-bottom: 50px; scroll-behavior: smooth; }
.story-content { padding: 0 20px; line-height: 1.8; color: #e0e0e0; max-width: 700px; margin: 0 auto; white-space: pre-line; font-size: 18px; }

/* METADATA BUBBLES (Botones Interactivos) */
.meta-bubbles { display: flex; gap: 10px; padding: 0 20px 20px; margin-top: 0; flex-wrap: wrap; }
.bubble {
    padding: 6px 14px; border-radius: 20px; font-size: 0.8rem; font-weight: 600;
    backdrop-filter: blur(5px); border: 1px solid rgba(255,255,255,0.1);
    color: #eee; display: flex; align-items: center; gap: 5px; transition: 0.2s;
}
.bubble.status { background: rgba(30, 58, 138, 0.4); color: #93c5fd; border-color: #1e40af; box-shadow: 0 0 10px rgba(30, 58, 138, 0.3); }

/* Botones de acción (Temporada/Ep) */
.bubble.action { background: rgba(255,255,255,0.05); cursor: pointer; }
.bubble.action:hover { 
    background: rgba(255,255,255,0.15); border-color: white; 
    box-shadow: 0 0 15px rgba(255,255,255,0.2); /* Brillo blanco */
    transform: translateY(-2px);
}
.small-font-btn { width:30px; height:30px; font-size:0.7rem; border: 1px solid #333; }

/* FOOTER DEL LECTOR (Votos, Vistas, Share) */
.story-footer {
    display: flex; justify-content: space-between; align-items: flex-end;
    padding: 20px; border-top: 1px solid #222; margin-top: 40px; 
    max-width: 700px; margin-left: auto; margin-right: auto;
}
.rating-container { text-align: left; }
.stars i { font-size: 1.6rem; color: #333; margin-right: 5px; cursor: pointer; transition: 0.2s; }
.stars i.active { 
    color: #ffd700; 
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.6); /* Brillo Dorado Intenso */
    transform: scale(1.1);
}

.stats-row { color: #888; font-size: 0.9rem; }
.views-container { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.views-container i { color: var(--accent-light); }

/* ========================================= */
/* 7. COMENTARIOS                            */
/* ========================================= */
.comments-section { padding: 20px; max-width: 700px; margin: 0 auto; }
.chat-bubble {
    background: #1a1a1a; padding: 12px 16px; border-radius: 12px; border-bottom-left-radius: 2px;
    margin-bottom: 12px; width: fit-content; max-width: 90%;
    border: 1px solid #222;
}
.chat-nick { color: #60a5fa; font-weight: bold; font-size: 0.75rem; display: block; margin-bottom: 3px; }
.chat-msg { color: #ddd; font-size: 0.95rem; }

/* ========================================= */
/* 8. MODALES Y FORMULARIOS                  */
/* ========================================= */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8); z-index: 3000;
    display: flex; align-items: center; justify-content: center; 
    backdrop-filter: blur(8px); /* Blur más fuerte para enfoque */
}
.custom-modal {
    width: 85%; max-width: 350px; padding: 25px; border-radius: 24px; text-align: center;
    background: rgba(15, 15, 15, 0.95); border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Efecto rebote suave */
}

.modal-icon-big { 
    font-size: 3rem; display: block; margin-bottom: 15px; 
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.2)); 
}
.modal-input { 
    width: 100%; padding: 14px; background: #222; border: 1px solid #444; 
    color: white; border-radius: 10px; margin-bottom: 10px; transition: 0.3s;
}
.modal-input:focus {
    border-color: var(--accent-light);
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.3); /* Resplandor al escribir */
    outline: none;
}
.modal-btn { 
    background: var(--accent-gradient); color: white; border: none; padding: 14px; 
    border-radius: 25px; width: 100%; font-weight: bold; cursor: pointer; margin-top: 5px; 
    box-shadow: 0 5px 15px rgba(30, 58, 138, 0.4);
    transition: 0.2s;
}
.modal-btn:hover { filter: brightness(1.1); transform: translateY(-2px); }
.secondary { background: transparent; border: 1px solid #555; box-shadow: none; margin-top: 10px; color: #ccc; }

/* Lista de Episodios (Selector) */
.episodes-list { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin-bottom: 15px; }
.ep-item {
    background: rgba(255,255,255,0.05); padding: 12px; border-radius: 8px;
    cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem;
    border: 1px solid transparent; transition: 0.2s;
}
.ep-item:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); }
.ep-item.current { 
    border: 1px solid var(--accent); color: #93c5fd; background: rgba(30, 58, 138, 0.2);
    box-shadow: inset 0 0 10px rgba(30, 58, 138, 0.3);
}

/* Menú Opciones (Puntos suspensivos) */
.options-menu {
    position: absolute; top: 65px; right: 15px; width: 180px;
    border-radius: 12px; z-index: 2002; display: none; flex-direction: column; padding: 5px;
    background: #1a1a1a; border: 1px solid #333; box-shadow: 0 10px 30px black;
}
.options-menu.show { display: flex; animation: popIn 0.2s; }
.menu-item { padding: 12px; cursor: pointer; color: #eee; font-size: 0.9rem; display: flex; gap: 10px; border-radius: 8px; align-items: center; }
.menu-item:hover { background: rgba(255,255,255,0.1); color: white; }
/* --- ESTILOS EXTRA PARA LA PÁGINA DE SOPORTE --- */
.fade-in { animation: fadeIn 0.5s ease-in; }

/* Para los textos HTML que insertes */
.dynamic-html h1, .dynamic-html h2, .dynamic-html h3 { color: white; font-weight: 800; margin-top: 1.5em; }
.dynamic-html p { margin-bottom: 1em; color: #d1d5db; font-size: 1rem; line-height: 1.7; }
.dynamic-html ul { margin-left: 20px; color: #ccc; }
.dynamic-html li { margin-bottom: 5px; }
.dynamic-html hr { border: 0; border-top: 1px solid #333; margin: 30px 0; }
.dynamic-html a { color: var(--accent-light); text-decoration: underline; }