/**

 * Estilos para la página de Historia ANFDGAC

 *

 * Este archivo contiene todos los estilos específicos para la página de historia

 * de la Asociación Nacional de Funcionarios de la Dirección General de Aeronáutica Civil

 *

 * Secciones incluidas:

 * - Variables CSS personalizadas

 * - Layout principal y contenedor

 * - Breadcrumb de navegación

 * - Sección de historia

 * - Responsive design

 *

 * Responsive breakpoints:

 * - Desktop: > 992px

 * - Tablet: 768px - 992px

 * - Mobile: < 768px

 *

 * Autor: Sistema ANFDGAC

 * Fecha: {{ date('Y-m-d') }}

 */



/* ========================================

   Variables CSS personalizadas

   ======================================== */

:root {

    /* Colores principales de historia */

    --historia-primary: #153547;

    --historia-secondary: #2c5f7a;

    --historia-accent: #4a90a4;

    --historia-light: #f8f9fa;

    --historia-dark: #0d1b23;



    /* Colores de texto */

    --historia-text-primary: #2c3e50;

    --historia-text-secondary: #5a6c7d;

    --historia-text-light: #7f8c8d;



    /* Espaciado */

    --historia-spacing-xs: 0.5rem;

    --historia-spacing-sm: 1rem;

    --historia-spacing-md: 1.5rem;

    --historia-spacing-lg: 1.5rem;
    --historia-spacing-xl: 2rem;


    /* Tipografía */

    --historia-font-family: 'Montserrat', sans-serif;

    --historia-font-size-base: 1rem;

    --historia-font-size-sm: 0.875rem;

    --historia-font-size-lg: 1.125rem;

    --historia-font-size-xl: 1.25rem;



    /* Sombras */

    --historia-shadow-sm: 0 2px 4px rgba(21, 53, 71, 0.1);

    --historia-shadow-md: 0 4px 8px rgba(21, 53, 71, 0.15);

    --historia-shadow-lg: 0 8px 16px rgba(21, 53, 71, 0.2);



    /* Bordes */

    --historia-border-radius: 8px;

    --historia-border-color: #e9ecef;

}



/* ========================================

   Layout principal

   ======================================== */

.main-content {

    min-height: calc(100vh - 200px);

    padding: var(--historia-spacing-lg) 0;

    background: linear-gradient(135deg,

        var(--historia-light) 0%,

        #ffffff 50%,

        var(--historia-light) 100%);

}



/* ========================================

   Breadcrumb de navegación

   ======================================== */

.breadcrumb {

    display: flex;

    align-items: center;

    gap: var(--historia-spacing-xs);

    margin-bottom: var(--historia-spacing-xl);

    padding: var(--historia-spacing-sm);

    background: rgba(255, 255, 255, 0.8);

    border-radius: var(--historia-border-radius);

    box-shadow: var(--historia-shadow-sm);

    font-size: var(--historia-font-size-sm);

}



.breadcrumb a {

    color: var(--historia-secondary);

    text-decoration: none;

    font-weight: 500;

    transition: color 0.3s ease;

}



.breadcrumb a:hover {

    color: var(--historia-primary);

}



.breadcrumb-separator {

    color: var(--historia-text-light);

    font-weight: bold;

}



.breadcrumb-current {

    color: var(--historia-text-primary);

    font-weight: 600;

}



/* ========================================

   Sección de Historia

   ======================================== */

.historia-section {

    background: rgba(255, 255, 255, 0.95);

    border-radius: var(--historia-border-radius);

    box-shadow: var(--historia-shadow-lg);

    overflow: hidden;

    margin-bottom: var(--historia-spacing-xl);

}



.historia-header {

    background: linear-gradient(135deg,

        var(--historia-primary) 0%,

        var(--historia-secondary) 100%);

    color: white;

    text-align: center;

    padding: var(--historia-spacing-xl) var(--historia-spacing-lg);

    position: relative;

}



.historia-header::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;

    opacity: 0.3;

}



.historia-header h1 {

    font-size: 2.5rem;

    font-weight: 700;

    margin: 0;

    position: relative;

    z-index: 1;

    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

}



.historia-content {

    padding: var(--historia-spacing-xl);

}



.historia-text-image {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: var(--historia-spacing-xl);

    align-items: start;

}

.historia-text-image:nth-child(even) .historia-image {

    order: 2;

}

.historia-text-image:nth-child(even) .historia-text {

    order: 1;

}

.historia-text-image:not(:first-of-type) {

    margin-top: 3rem;

}


.historia-image {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

}



.historia-image img {

    width: 100%;

    height: 300px;

    max-width: 100%;

    object-fit: cover;

    border-radius: var(--historia-border-radius);

    box-shadow: var(--historia-shadow-md);

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.historia-image img:hover {

    transform: scale(1.02);

    box-shadow: var(--historia-shadow-lg);

}



.historia-text {

    font-family: var(--historia-font-family);

    line-height: 1.8;

    color: var(--historia-text-primary);

}



.historia-text p {

    margin-bottom: var(--historia-spacing-lg);

    font-size: var(--historia-font-size-lg);

    text-align: justify;

    position: relative;

    line-height: 1.7;

}



.historia-text p:first-child::first-letter {

    float: left;

    font-size: 3.5rem;

    line-height: 2.8rem;

    margin: 0 0.4rem 0.2rem 0;

    color: var(--historia-primary);

    font-weight: 700;

    text-shadow: 2px 2px 4px rgba(21, 53, 71, 0.2);

}



/* ========================================

   Responsive Design

   ======================================== */



/* Tablet - 768px a 992px */

@media (max-width: 992px) {

    .historia-text-image {

        grid-template-columns: 1fr;

        gap: var(--historia-spacing-lg);

    }



    .historia-image {

        position: relative;

        width: 100%;

        margin: 0 auto;

    }



    .historia-image img {

        max-width: 100%;

        max-height: 300px;

        object-fit: contain;

    }



    .historia-header h1 {

        font-size: 2rem;

    }



    .historia-content {

        padding: var(--historia-spacing-lg);

    }



    .historia-text p {

        font-size: var(--historia-font-size-base);

    }

}



/* Mobile - menos de 768px */

@media (max-width: 768px) {

    .main-content {

        padding: var(--historia-spacing-md) 0;

    }



    .breadcrumb {

        flex-wrap: wrap;

        margin-bottom: var(--historia-spacing-md);

        padding: var(--historia-spacing-sm);

    }



    .historia-header {

        padding: var(--historia-spacing-lg) var(--historia-spacing-md);

    }



    .historia-header h1 {

        font-size: 1.75rem;

        line-height: 1.2;

    }



    .historia-content {

        padding: var(--historia-spacing-lg) var(--historia-spacing-md);

    }



    .historia-image img {

        max-width: 100%;

        object-fit: contain;

    }



    .historia-text p {

        font-size: var(--historia-font-size-sm);

        margin-bottom: var(--historia-spacing-md);

        text-align: left;

    }



    .historia-text p:first-child::first-letter {

        font-size: 3rem;

        line-height: 2.5rem;

    }

}



/* Mobile pequeño - menos de 480px */

@media (max-width: 480px) {

    .historia-header h1 {

        font-size: 1.5rem;

    }



    .historia-content {

        padding: var(--historia-spacing-md);

    }



    .breadcrumb {

        font-size: 0.75rem;

    }



    .historia-text p:first-child::first-letter {

        font-size: 2.5rem;

        line-height: 2rem;

        margin-right: 0.3rem;

    }

}



/* ========================================

   Clases auxiliares

   ======================================== */

.historia-list {

    margin-bottom: 1.5rem;

    padding-left: 2rem;

    color: #2c3e50;

    display: block;

}



.historia-list li {

    margin-bottom: 0.5rem;

}



.fundadores-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 1rem;

    margin-bottom: 1.5rem;

    padding: 1rem;

    background: #f8f9fa;

    border-radius: 8px;

    border-left: 4px solid #153547;

    color: #2c3e50;

}



.fundadores-grid p {

    margin: 0.2rem 0;

    font-size: 1rem;

    color: #2c3e50;

}



/* ========================================

   Animaciones

   ======================================== */

@keyframes fadeInUp {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.historia-section {

    animation: fadeInUp 0.8s ease-out;

}



.historia-text p {

    animation: fadeInUp 0.6s ease-out both;

}



.historia-text p:nth-child(1) {

    animation-delay: 0.2s;

}



.historia-text p:nth-child(2) {

    animation-delay: 0.4s;

}



.historia-text p:nth-child(3) {

    animation-delay: 0.6s;

}



/* ========================================

   Accesibilidad

   ======================================== */

@media (prefers-reduced-motion: reduce) {

    .historia-section,

    .historia-image img {

        animation: none;

        transition: none;

    }



    .historia-text p {

        animation: none;

        transition: none;

        opacity: 1;

        transform: none;

    }



    .historia-image img:hover {

        transform: none;

    }

}



/* Mejoras para lectores de pantalla */

.sr-only {

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;

}



/* ========================================

   Impresión

   ======================================== */

@media print {

    .main-content {

        background: white;

        padding: 0;

    }



    .breadcrumb {

        display: none;

    }



    .historia-section {

        box-shadow: none;

        border: 1px solid #ccc;

    }



    .historia-header {

        background: #f0f0f0 !important;

        color: black !important;

    }



    .historia-text-image {

        grid-template-columns: 1fr;

    }



    .historia-image img {

        max-width: 300px;

        margin: 0 auto;

        display: block;

    }

}