/*
Theme Name: Nuevo Espejo
Description: Tema moderno para Revista Espejo con React integrado
Author: Tu Nombre
Version: 1.0
Text Domain: nuevo-espejo
UPDATED: 2025-11-05 23:35 - CSS CACHE BUSTER
*/

/* Estilos básicos - Los estilos principales vendrán de React */
body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    line-height: 1.6;
    color: #333;
}

* {
    box-sizing: border-box;
}

/* Banner de anuncios arriba */
.banner-ads {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3.5rem; /* Responsivo con rem en lugar de px */
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    z-index: 1002;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(0.875rem, 2vw, 1rem); /* Tamaño de fuente fluido */
    color: #666;
    padding: 0 5%; /* Padding lateral responsivo */
}

/* Estilos para el header */
.top-bar {
    position: fixed;
    top: 5.5rem; /* Mayor espacio desde el banner (responsivo con rem) */
    left: 0;
    right: 0;
    z-index: 1001;
    transform: translateY(0);
    width: 100%; /* Ancho completo responsivo */
}

/* Estados del header */
.top-bar.header-visible {
    transform: translateY(0);
}

.top-bar.header-hidden {
    transform: translateY(-100%);
}

/* Compensar el espacio del header fijo */
body {
    padding-top: clamp(10rem, 15vh, 13rem); /* Responsivo: adapta según viewport */
}

/* Ajustar padding en móvil */
@media (max-width: 768px) {
    body {
        padding-top: clamp(8rem, 12vh, 10rem); /* Ajustado para móvil con nota destacada arriba */
    }
}

.main-navigation {
    position: fixed;
    top: 9.5rem; /* Pegado al header con espacio del banner (responsivo con rem) */
    left: 0;
    right: 0;
    z-index: 1000;
    transform: translateY(0);
    width: 100%; /* Ancho completo */
}

/* La navegación también se oculta con el header */
.top-bar.header-hidden + .main-navigation {
    transform: translateY(-200%);
}

/* Hero section responsive */
.hero-section {
    min-height: 60vh;
    display: flex;
    align-items: center;
}

/* Estilos para el buscador expandible */
.search-box-container {
    z-index: 100;
}

.search-box-container input:focus {
    border-color: #007cba !important;
    box-shadow: 0 0.25rem 0.75rem rgba(0,124,186,0.15) !important;
}

.search-box-container button:hover {
    transform: scale(1.05);
    transition: transform 0.2s ease;
}

.search-box-container button:active {
    transform: scale(0.95);
}

/* Menú móvil - Oculto en desktop */
.mobile-menu-toggle {
    display: none !important;
}

.mobile-menu {
    display: none !important;
}

/* Estilos para el menú desplegable */
.mobile-menu {
    animation: slideDown 0.3s ease-out;
}

.mobile-menu ul {
    max-height: 300px;
    overflow-y: auto;
}

.mobile-menu li:last-child {
    border-bottom: none !important;
}

/* Animación de entrada del menú */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive design */
@media (max-width: 768px) {
    /* FORZAR OCULTAR elementos problemáticos en móvil */
    .social-dots,
    .newsletter-button,
    .top-right button[style*="background: #4a5568"],
    div[style*="background: #007cba"],
    div[style*="border-radius: 50%"][style*="width: 12px"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    /* Mostrar menú móvil */
    .mobile-menu-toggle {
        display: flex !important;
    }
    
    .mobile-menu {
        display: block !important;
    }
    
    /* Ocultar navegación principal en móvil */
    .main-navigation {
        display: none !important;
    }
    
    /* Ocultar bolitas de redes sociales en móvil */
    .social-dots {
        display: none !important;
    }
    
    /* Layout móvil reorganizado */
    .top-bar .header-container {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        padding: 1rem 5% !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    
    /* Logo arriba centrado - ocupa toda la fila */
    .top-center {
        position: static !important;
        transform: none !important;
        order: 1 !important;
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 0.5rem !important;
    }
    
    .top-center img {
        
        margin-top: -10px !important;
        margin-bottom: -10px !important;
        height: 70px !important; 
        width: auto !important;
        max-width: 180px !important;
    }
    
    /* Ocultar iconos sociales en móvil */
    .top-left .social-icons {
        display: none !important;
    }
    
    /* Menú a la izquierda - segunda fila */
    .top-left {
        order: 2 !important;
        width: auto !important;
        flex: 0 0 auto !important;
        padding: 0 !important;
        border: none !important;
        margin: 0 !important;
        display: flex !important;
        justify-content: flex-start !important;
    }
    
    /* Búsqueda a la derecha - segunda fila */
    .top-right {
        order: 3 !important;
        width: auto !important;
        flex: 0 0 auto !important;
        display: flex !important;
        justify-content: flex-end !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Menú móvil a la izquierda */
    .mobile-menu-toggle {
        display: flex !important;
        position: relative !important;
        background: #f7c52d !important;
        color: #333 !important;
        border: none !important;
        border-radius: 8px !important;
        padding: 10px 16px !important;
        font-size: 16px !important;
        font-weight: bold !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
    }
    
    /* Búsqueda a la derecha */
    .search-box-container {
        display: flex !important;
        position: relative !important;
        z-index: 100 !important;
        align-items: center !important;
        gap: 5px !important;
        transition: all 0.3s ease !important;
    }
    
    .search-box-container button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        pointer-events: auto !important;
        background: none !important;
        border: none !important;
        cursor: pointer !important;
        padding: 8px !important;
        color: #333 !important;
        font-size: 20px !important;
        flex-shrink: 0 !important;
    }
    
    /* Ajustes del buscador móvil - oculto por defecto */
    .search-box-container input {
        width: 0 !important;
        opacity: 0 !important;
        transition: all 0.3s ease !important;
        padding: 0 !important;
        border: 2px solid transparent !important;
    }
    
    /* Cuando se expande - permanece en la misma línea */
    .search-box-container.expanded {
        position: relative !important;
        background: rgba(255, 255, 255, 0.95) !important;
        padding: 4px !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
    }
    
    .search-box-container.expanded input {
        width: 200px !important;
        opacity: 1 !important;
        padding: 8px 12px !important;
        border: 2px solid #f7c52d !important;
        border-radius: 6px !important;
        font-size: 14px !important;
    }
    
    /* Ocultar Newsletter del top-right en móvil */
    .top-right .newsletter-button {
        display: none !important;
    }
    
    /* Menú móvil desplegable */
    .mobile-menu {
        position: fixed !important;
        top: auto !important;
        bottom: auto !important;
        left: 5% !important;
        right: auto !important;
        margin-top: 0.5rem !important;
    }
    
    .hero-section {
        padding: 15px 0; 
        min-height: 15vh; 
    }
    
    /* Layout móvil para la primera nota destacada */
    .featured-post-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* Orden específico para móvil */
    .featured-post-content {
        order: 2; /* Texto va después de imagen */
    }
    
    .featured-post-image {
        order: 1; /* Imagen va primero */
        margin-bottom: 1rem;
    }
    
    /* Ocultar redes sociales y newsletter en móvil */
    .social-dots,
    .social-buttons,
    .newsletter-button {
        display: none !important;
    }
    
    /* Reducir logo a la mitad en móvil */
    .hero-section h1 {
        font-size: clamp(0.9rem, 3vw, 1.8rem) !important; /* Mitad del tamaño */
    }
    
    
    /* Videos responsive en móvil */
    .videos-section {
        padding: 2rem 0 !important;
    }
    
    .videos-layout {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    
    .videos-sidebar {
        order: 1; /* Videos laterales primero en móvil */
    }
    
    .videos-main {
        order: 2; /* Video principal después en móvil */
    }
}

@media (max-width: 480px) {
    /* Logo más pequeño en móvil muy pequeño */
    .top-center img {
        height: 70px !important; /* 10% más grande que antes (60px) */
    }
    
    /* Búsqueda más compacta */ 
    .search-box-container input {
        width: clamp(5rem, 16vw, 7rem) !important;
    }
    
    /* Menú móvil */
    .mobile-menu {
        width: min(85%, 18rem) !important;
        max-width: 18rem !important;
    }
}

#root {
    min-height: 100vh;
}

/* Loading spinner mientras carga React */
.loading-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-size: clamp(1rem, 2vw, 1.25rem); /* Tamaño de fuente responsivo */
    padding: 0 5%; /* Padding lateral */
}

/* Ocultar completamente el loading spinner cuando no está visible */
.loading-spinner[style*="display: none"] {
    position: absolute !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

.spinner {
    border: 0.25rem solid #f3f3f3;
    border-top: 0.25rem solid #3498db;
    border-radius: 50%;
    width: clamp(2rem, 5vw, 3rem); /* Tamaño responsivo */
    height: clamp(2rem, 5vw, 3rem);
    animation: spin 2s linear infinite;
    margin-right: clamp(0.5rem, 2vw, 0.75rem);
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Estilos para la sección de nota destacada */
.featured-post-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem); /* Gap responsivo */
    align-items: center;
    padding: 0 5%; /* Padding lateral */
}

/* Responsive para móvil */
@media (max-width: 768px) {
    .featured-post-grid {
        grid-template-columns: 1fr !important;
        gap: clamp(1.5rem, 4vw, 2.5rem) !important; /* Gap responsivo móvil */
        padding: 1.5rem 5% !important; /* Agregado padding superior para evitar corte */
    }
    
    /* Ajustar tamaños de texto en móvil */
    .featured-post-grid h2 {
        font-size: clamp(1.5rem, 5vw, 2.5rem) !important; /* Título responsivo */
    }
    
    .featured-post-grid h3 {
        font-size: clamp(1.2rem, 4vw, 2rem) !important; /* Subtítulo responsivo */
    }
    
    .featured-post-grid img {
        height: clamp(15rem, 40vw, 20rem) !important; /* Altura responsiva */
        width: 100%;
        object-fit: cover;
        margin-top: 0rem !important; /* Margen superior para evitar que se corte */
        margin-bottom: 0rem !important;
    }
    
    /* Margen superior al contenedor de la imagen en móvil */
    .featured-post-image {
        margin-top: 2rem !important; /* Bajar la imagen agregando margen al bloque */
    }
}

/* Animación de parpadeo para el botón Newsletter */
@keyframes newsletterBlink {
    0%, 50% {
        opacity: 1;
        background: #4a5568;
    }
    51%, 100% {
        opacity: 0.6;
        background: #f7c52d;
    }
}

/* Animación del modal de Newsletter */
@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Estilos responsive para la sección de 3 columnas */
@media (max-width: 768px) {
    .three-column-grid {
        grid-template-columns: 1fr !important;
        gap: clamp(1rem, 3vw, 2rem) !important; /* Gap responsivo */
        padding: 0 5% !important;
    }
    
    .three-column-grid > div:first-child {
        order: 3; /* Mover publicidad al final en móvil */
        min-height: clamp(12rem, 30vw, 15rem) !important; /* Altura mínima responsiva */
        padding: clamp(0.75rem, 2vw, 1.25rem) !important;
    }
}

@media (max-width: 480px) {
    .three-column-grid {
        padding: 0 5% !important;
        gap: clamp(0.75rem, 2.5vw, 1.25rem) !important;
    }
}

/* Estilos responsive para la sección de videos */
@media (max-width: 768px) {
    .videos-carousel .video-item {
        min-width: calc(50% - 0.5rem) !important;
    }
    
    .videos-carousel .video-container {
        transform: translateX(calc(-50% * var(--current-index))) !important;
    }
}

@media (max-width: 480px) {
    .videos-carousel .video-item {
        min-width: calc(100% - 1rem) !important;
    }
    
    .videos-carousel .video-container {
        transform: translateX(calc(-100% * var(--current-index))) !important;
    }
    
    .videos-carousel .nav-button {
        display: none !important;
    }
}

/* Estilos responsive para la sección de 3 columnas invertida */
@media (max-width: 768px) {
    .inverted-three-column-grid {
        grid-template-columns: 1fr !important;
        gap: clamp(1rem, 3vw, 2rem) !important;
        padding: 0 5% !important;
    }
    
    .inverted-three-column-grid > div:last-child {
        order: 3; /* Mover publicidad al final en móvil */
        min-height: clamp(12rem, 30vw, 15rem) !important;
        padding: clamp(0.75rem, 2vw, 1.25rem) !important;
    }
}

@media (max-width: 480px) {
    .inverted-three-column-grid {
        padding: 0 5% !important;
        gap: clamp(0.75rem, 2.5vw, 1.25rem) !important;
    }
}

/* Estilos responsive para la sección Dr. Vagón */
@media (max-width: 768px) {
    .dr-vagon-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: clamp(1rem, 3vw, 2rem) !important;
        padding: 0 5% !important;
    }
}

@media (max-width: 480px) {
    .dr-vagon-grid {
        grid-template-columns: 1fr !important;
        gap: clamp(0.75rem, 2.5vw, 1.25rem) !important;
        padding: 0 5% !important;
    }
}

/* Estilos responsive para las secciones Reflexiones y Recomendaciones */
@media (max-width: 768px) {
    .reflexiones-grid,
    .recomendaciones-grid {
        grid-template-columns: 1fr !important;
        gap: clamp(1rem, 3vw, 2rem) !important;
        padding: 0 5% !important;
    }
}

@media (max-width: 480px) {
    .reflexiones-grid,
    .recomendaciones-grid {
        gap: clamp(0.75rem, 2.5vw, 1.25rem) !important;
        padding: 0 5% !important;
    }
}