/* =========================================
   EVENTOS.CSS - PALETA FULL COLOR GMIN
   ========================================= */

:root {
    --bg-body: #f4f6f8;       
    --primary-blue: #002b4e;  
    --text-main: #333;
    --bg-card: #ffffff;
}

body {
    background-color: var(--bg-body);
    font-family: 'Montserrat', sans-serif;
    color: var(--text-main);
    margin: 0; padding: 0;
}

a { text-decoration: none; color: inherit; }

/* --- NAVBAR & HERO --- */
.navbar {
    background-color: var(--primary-blue);
    padding: 15px 20px;
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 4px solid #ffc107;
}
.logo-container { display: flex; align-items: center; gap: 10px; color: white; font-weight: 800; font-size: 1.5rem; }
.logo-university { height: 40px; }
.navbar nav a { color: white; margin-left: 20px; font-weight: 500; transition: 0.3s; }
.navbar nav a:hover, .navbar nav a.active { color: #00bcd4; }

.event-hero {
    /* Asegúrate de tener la imagen hero_feria.jpeg */
    background: url('hero_feria.jpeg') center/cover no-repeat, var(--primary-blue);
    height: 300px; position: relative;
}
.hero-overlay {
    background: linear-gradient(90deg, rgba(0, 43, 78, 0.9) 0%, rgba(0, 43, 78, 0.6) 100%); 
    width: 100%; height: 100%; display: flex; align-items: center; padding-left: 10%; box-sizing: border-box;
}
.hero-content-detail h1 { font-family: 'Merriweather', serif; font-size: 2.8rem; margin: 10px 0; color: white; }
.hero-content-detail p { color: #e3f2fd; font-size: 1.1rem; }

/* --- LISTA DE EVENTOS --- */
.events-list { max-width: 900px; margin: 50px auto; padding: 0 20px; }

/* Título de sección */
.section-title {
    font-size: 1.5rem; color: var(--primary-blue); margin-bottom: 20px; 
    border-left: 5px solid #ffc107; padding-left: 15px;
}

/* --- TARJETA PRINCIPAL --- */
.event-card {
    background: var(--bg-card); 
    border: 1px solid #e0e0e0; border-radius: 12px;
    margin-bottom: 25px; padding: 20px;
    display: flex; align-items: flex-start; 
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    overflow: hidden;
    position: relative;
}

/* Efecto Hover General */
.event-card:hover {
    transform: translateX(5px);
    background-color: #fcfcfc;
}

/* =======================================================
   SINCRONIZACIÓN DE COLORES (BORDE AL PASAR EL MOUSE)
   ======================================================= */
/* 1. CURSOS (Verde) */
.event-card:has(.date-green):hover { border-left: 5px solid #2e7d32; }

/* 2. FERIAS (Morado) */
.event-card:has(.date-purple):hover { border-left: 5px solid #7b1fa2; }

/* 3. CHARLAS (Cyan) */
.event-card:has(.date-cyan):hover { border-left: 5px solid #00bcd4; }

/* 4. TESIS (Naranja) */
.event-card:has(.date-orange):hover { border-left: 5px solid #ef6c00; }

/* 5. AZUL (General) */
.event-card:has(.date-blue):hover { border-left: 5px solid #1565c0; }

/* 6. ALERTA (Rojo) */
.event-card:has(.date-red):hover { border-left: 5px solid #c62828; }

/* 7. PASADO (Gris) */
.event-card:has(.date-gray):hover { border-left: 5px solid #999; }


/* --- CAJAS DE FECHA (COLORES) --- */
.date-box {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 85px; padding: 10px 5px; margin-right: 25px;
    border-radius: 8px; border: 1px solid #e0e0e0;
    flex-shrink: 0; transition: 0.3s;
    background: #f4f6f8; color: #555; 
}
.date-box .day { font-size: 1.8rem; font-weight: 800; line-height: 1; }
.date-box .month { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; margin-top: 3px; }
.date-box .year { font-size: 0.7rem; margin-top: 2px; }

/* Definición de Colores de Fecha */
.date-box.date-green { background: #e8f5e9; border-color: #c8e6c9; color: #2e7d32; }
.date-box.date-purple { background: #f3e5f5; border-color: #e1bee7; color: #7b1fa2; }
.date-box.date-cyan { background: #e0f7fa; border-color: #b2ebf2; color: #0097a7; }
.date-box.date-orange { background: #fff3e0; border-color: #ffe0b2; color: #ef6c00; }
.date-box.date-blue { background: #e3f2fd; border-color: #bbdefb; color: #1565c0; }
.date-box.date-red { background: #ffebee; border-color: #ffcdd2; color: #c62828; }
.date-box.date-gray { background: #f5f5f5; border-color: #e0e0e0; color: #757575; }

/* Hover en fechas (Mismo color) */
.event-card:hover .date-box.date-green { background: #2e7d32; border-color: #2e7d32; }
.event-card:hover .date-box.date-purple { background: #7b1fa2; border-color: #7b1fa2; }
.event-card:hover .date-box.date-cyan { background: #00bcd4; border-color: #00bcd4; }
.event-card:hover .date-box.date-orange { background: #ef6c00; border-color: #ef6c00; }
.event-card:hover .date-box.date-blue { background: #1565c0; border-color: #1565c0; }
.event-card:hover .date-box.date-red { background: #d32f2f; border-color: #d32f2f; }
.event-card:hover .date-box.date-gray { background: #616161; border-color: #616161; }

/* Texto blanco al hover */
.event-card:hover .date-box, 
.event-card:hover .date-box .day, 
.event-card:hover .date-box .month, 
.event-card:hover .date-box .year { 
    color: white !important; 
    transition: color 0.3s ease;
}

/* --- DETALLES E INFO --- */
.event-info { flex: 1; }
.event-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }

/* --- ETIQUETAS (BADGES) --- */
.category-badge { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; color: white; }

.category-badge.curso       { background: #2e7d32; } /* Verde */
.category-badge.feria       { background: #7b1fa2; } /* Morado */
.category-badge.conferencia { background: #0097a7; } /* Cyan */
.category-badge.tesis       { background: #ef6c00; } /* Naranja */
.category-badge.alerta      { background: #c62828; } /* Rojo */

/* Tipografía y Botones */
.event-info h3 { margin: 5px 0 10px 0; font-family: 'Merriweather', serif; font-size: 1.3rem; color: var(--text-main); }
.event-info h3 a:hover { color: var(--primary-blue); text-decoration: underline; }
.location { font-size: 0.9rem; color: #555; margin-bottom: 10px; }
.location i { color: var(--primary-blue); margin-right: 5px; }
.details { color: #666; font-size: 0.95rem; margin-bottom: 10px; }

.btn-event { display: inline-block; color: var(--primary-blue); font-weight: 700; font-size: 0.9rem; border-bottom: 2px solid transparent; }
.btn-event:hover { border-bottom-color: var(--primary-blue); }

/* =========================================
   SECCIÓN HISTORIAL (ESTILO ARCHIVO)
   ========================================= */

.history-section {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 2px dashed #e0e0e0;
    position: relative;
}

.history-section .section-title {
    color: #555;
    border-left: 5px solid #b0bec5;
    padding-left: 15px;
    margin-bottom: 30px;
}

/* Estilo de tarjetas pasadas */
.history-section .event-card {
    background-color: #fafafa;
    border: 1px solid #eee;
    opacity: 0.9;
    transition: all 0.3s ease;
}

.history-section .event-card:hover {
    background-color: #fff;
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
    opacity: 1;
    transform: translateY(-3px);
    border-color: #b0bec5;
}

/* CLASE PARA OCULTAR EVENTOS */
.hidden-events {
    display: none;
    animation: fadeIn 0.6s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================
   ELEMENTOS GRÁFICOS (SELLOS Y ÉXITO)
   ========================================= */

/* Sello Realizado */
.event-card { position: relative; overflow: hidden; }

.stamp-completed {
    position: absolute;
    top: 15px; right: 15px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800; font-size: 1rem;
    letter-spacing: 2px; text-transform: uppercase;
    color: #cfd8dc; 
    border: 3px solid #cfd8dc;
    padding: 5px 12px; border-radius: 6px;
    transform: rotate(-15deg);
    opacity: 0.7; pointer-events: none; z-index: 1; 
}

.event-card:hover .stamp-completed { color: #b0bec5; border-color: #b0bec5; opacity: 1; }

/* Mensaje de Éxito */
.success-message {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 12px; padding: 6px 14px;
    background-color: #f1f8e9; border: 1px solid #dcedc8; border-radius: 50px;
    color: #33691e; font-size: 0.8rem; font-weight: 600; width: fit-content;
}

.success-message i { color: #689f38; font-size: 0.9rem; }

/* Botón Ver Más */
.load-more-container { text-align: center; margin-top: 30px; padding-bottom: 20px; }

#btnLoadMore {
    background: white; border: 2px solid #e0e0e0; color: #666;
    padding: 12px 30px; border-radius: 50px;
    font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 0.9rem;
    cursor: pointer; transition: all 0.3s ease;
    display: inline-flex; align-items: center; gap: 8px;
}

#btnLoadMore:hover {
    border-color: #002b4e; color: #002b4e; background-color: #e3f2fd; transform: scale(1.05);
}


/* =========================================
   FOOTER ACADÉMICO Y BOTÓN PDF
   ========================================= */

/* 1. Contenedor que alinea: Texto a la izq, Botón a la der. */
.card-footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eee; /* Línea separadora fina */
    flex-wrap: wrap; /* Para que se adapte en móviles */
    gap: 10px;
}

/* 2. Ajuste del mensaje de "Realizado" */
.card-footer-row .success-message {
    margin: 0;
    background: transparent; border: none; padding: 0;
    font-size: 0.8rem; color: #2e7d32; font-weight: 600;
}
.card-footer-row .success-message i { color: #689f38; margin-right: 5px; }


/* 3. EL BOTÓN ACADÉMICO (Diseño Ghost) */
.btn-academic-pdf {
    background-color: transparent;
    color: #880e4f; /* Color Vino / Burgundy */
    border: 1px solid #880e4f;
    padding: 7px 15px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem; font-weight: 700;
    text-transform: uppercase; border-radius: 4px;
    cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
    transition: all 0.3s ease;
}
.btn-academic-pdf i { font-size: 0.9rem; }

/* 4. Efectos Hover */
.btn-academic-pdf:hover {
    background-color: #880e4f; color: white;
    box-shadow: 0 4px 12px rgba(136, 14, 79, 0.25);
    transform: translateY(-2px);
}


/* =========================================
   MODAL: LECTOR ACADÉMICO (TIPO BIBLIOTECA)
   ========================================= */

/* Fondo oscuro semitransparente (Overlay) */
.modal-overlay {
    display: none; /* Oculto por defecto */
    position: fixed;
    z-index: 9999;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Gris oscuro, no negro total */
    backdrop-filter: blur(3px); /* Desenfoque suave del fondo */
    align-items: center; justify-content: center;
    animation: fadeIn 0.3s ease;
}

/* La caja del lector (Blanca y estructurada) */
.academic-reader {
    background-color: #fff;
    width: 90%;
    max-width: 1000px;
    height: 85vh; /* Ocupa el 85% de la altura de la pantalla */
    border-radius: 8px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column; /* Organiza Cabecera arriba, PDF abajo */
    overflow: hidden;
    border: 1px solid #dcdcdc;
}

/* Cabecera gris (Estilo Software/App) */
.reader-header {
    background-color: #f5f5f5;
    padding: 12px 20px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0; /* Evita que se aplaste */
}

.doc-title {
    font-weight: 700;
    color: #455a64;
    font-size: 0.9rem;
    text-transform: uppercase;
    display: flex; align-items: center; gap: 8px;
}

/* Botón Cerrar (Más formal que una simple X) */
.btn-close-reader {
    background: white;
    border: 1px solid #ccc;
    color: #333;
    padding: 6px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.2s;
    display: flex; align-items: center; gap: 5px;
}

.btn-close-reader:hover {
    background-color: #d32f2f;
    color: white;
    border-color: #d32f2f;
}

/* Cuerpo donde va el iFrame */
.reader-body {
    flex-grow: 1; /* Ocupa todo el espacio restante */
    background-color: #525659; /* Color de fondo típico de lectores PDF */
    position: relative;
    width: 100%;
    height: 100%;
    border-top: 10px solid #525659;
}

.reader-body iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: none;
}

.toolbar-blocker {
    position: absolute;
    top: 0;
    left: 0;
    height: 60px; /* Altura de la barra negra de Google */
    
    /* EL TRUCO: Ancho calculado para NO tapar el scroll derecho */
    width: calc(100% - 25px); 
    
    z-index: 20; /* Encima del iframe */
    background: transparent; /* Invisible */
    /* background: rgba(255,0,0,0.2); <--- Descomenta esto para ver dónde está el escudo mientras pruebas */
}

/* Animación de entrada */
@keyframes fadeIn { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } }


/* =========================================
   RESPONSIVE GENERAL (TABLETS Y MÓVILES)
   Aplica a todo dispositivo con ancho menor a 1024px
   ========================================= */

@media (max-width: 1024px) {

    /* --- 1. SOLUCIÓN AL "PEGADO SUPERIOR" DEL MODAL --- */
    .modal-overlay {
        /* Cambiamos 'center' por 'flex-start' para tener control manual del inicio */
        align-items: flex-start; 
        
        /* ESTE ES EL BORDE DE SEGURIDAD: 
           60px de aire arriba para que no choque con la barra del navegador */
        padding-top: 60px; 
        padding-bottom: 30px;
        padding-left: 20px;
        padding-right: 20px;
        
        overflow-y: auto; /* Permite scroll si el contenido es muy alto */
    }

    .academic-reader {
        width: 100%; 
        height: auto;        /* Altura automática según contenido */
        min-height: 60vh;    /* Mínimo decente */
        max-height: 85vh;    /* No ocupar toda la pantalla */
        border-radius: 12px;
        margin: 0 auto;      /* Centrado horizontal */
        display: flex; 
        flex-direction: column;
    }

    /* --- 2. AJUSTE DE LA PÁGINA PRINCIPAL --- */
    .events-list {
        margin-top: 30px;     /* Separación extra del navbar */
        padding: 0 15px;      /* Márgenes laterales seguros */
    }

    .event-card {
        flex-direction: column; /* Pone la fecha arriba y texto abajo */
        padding: 20px;
    }

    /* --- 3. CAJA DE FECHA HORIZONTAL --- */
    .date-box {
        width: 100%;
        flex-direction: row;      /* Fecha en horizontal */
        justify-content: flex-start;
        align-items: center;
        gap: 15px;
        margin-right: 0;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-right: none;
        border-bottom: 1px solid #eee;
    }
    
    .date-box .day { font-size: 1.5rem; }
    .date-box .month { font-size: 0.9rem; margin-top: 0; }
    .date-box .year { display: none; /* Ocultamos año para limpiar visualmente */ }

    /* --- 4. NAVBAR Y HERO --- */
    .navbar {
        flex-direction: column;
        padding: 15px;
        gap: 15px;
    }
    
    .navbar nav {
        display: flex; 
        gap: 20px; 
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .navbar nav a { margin-left: 0; }

    .event-hero {
        height: 200px; /* Hero más pequeño */
    }
    
    .hero-content-detail h1 { font-size: 1.8rem; }
    
    /* --- 5. BOTONES Y FOOTER --- */
    .card-footer-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .btn-academic-pdf {
        width: 100%;          /* Botón grande para dedos táctiles */
        justify-content: center;
        padding: 12px;
    }
}