/* ===== IMPORTACIÓN DE FUENTES ===== */
@font-face {
    font-family: 'Bjorn';
    src: url('./fonts/bjorn-regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Bjorn';
    src: url('./fonts/bjorn-bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Brandon Grotesque';
    src: url('./fonts/brandon-grotesque-regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Brandon Grotesque';
    src: url('./fonts/brandon-grotesque-bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* ===== VARIABLES CSS ===== */
:root {
    /* Forzar modo claro siempre */
    color-scheme: light only;
    
    --primary-green: #81AF3E;
    --primary-orange: #E6801E;
    --hover-orange: #FFAB5B;
    --text-dark: #333333;
    --text-light: #666666;
    --background-light: #f8f9fa;
    --white: #ffffff;
    --border-light: #e0e0e0;
    --shadow-light: 0 2px 10px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.15);
    --border-radius: 15px;
    --transition: all 0.3s ease;
}

/* ===== RESET Y BASE ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    /* Forzar esquema de color claro en el elemento HTML también */
    color-scheme: light only;
}

body {
    font-family: 'Brandon Grotesque', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--text-dark);
    background-color: var(--background-light);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Asegurar que el body también use modo claro */
    color-scheme: light only;
}

/* ===== TIPOGRAFÍA ===== */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Bjorn', Georgia, serif;
    font-weight: normal;
    line-height: 1.2;
    margin-bottom: 1rem;
}

h1 {
    font-size: 2.7rem;
    color: var(--text-dark);
}

h2 {
    font-size: 2.2rem;
    color: var(--text-dark);
}

h3 {
    font-size: 1.8rem;
    color: var(--text-dark);
}

h4 {
    font-size: 1.5rem;
    color: var(--text-dark);
}

/* ===== CONTENEDORES Y LAYOUT ===== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ===== HEADER ===== */
.header {
    background: var(--white);
    box-shadow: var(--shadow-light);
    padding: 1.5rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-content {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.logo {
    width: 60px;
    height: auto;
    flex-shrink: 0;
}

.header-text h1 {
    margin-bottom: 0.25rem;
    font-size: 2rem;
}

.header-text p {
    color: var(--primary-green);
    font-weight: 600;
    font-size: 1.1rem;
    margin: 0;
}

/* ===== MAIN CONTENT ===== */
.main {
    flex: 1;
    padding: 3rem 0;
}

/* ===== SECCIÓN DE BÚSQUEDA ===== */
.search-section {
    margin-bottom: 3rem;
}

.search-card {
    background: var(--white);
    border-radius: var(--border-radius);
    padding: 2.5rem;
    box-shadow: var(--shadow-medium);
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.search-card h2 {
    color: var(--primary-green);
    margin-bottom: 1rem;
}

.search-description {
    color: var(--text-light);
    margin-bottom: 2rem;
    font-size: 1.1rem;
    text-align: left;
}

.search-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.input-group {
    text-align: left;
}

.input-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-dark);
}

.input-group input {
    width: 100%;
    padding: 1rem 1.25rem;
    border: 2px solid var(--border-light);
    border-radius: var(--border-radius);
    font-size: 1.1rem;
    font-family: inherit;
    transition: var(--transition);
    background: var(--white);
}

.input-group input:focus {
    outline: none;
    border-color: var(--primary-green);
    box-shadow: 0 0 0 3px rgba(129, 175, 62, 0.1);
}

.search-options {
    margin-top: 0.5rem;
}

.search-options small {
    color: var(--text-light);
    font-size: 0.9rem;
}

/* ===== BOTONES ===== */
.search-btn {
    background: var(--primary-orange);
    color: var(--white);
    border: none;
    padding: 1rem 2rem;
    border-radius: var(--border-radius);
    font-size: 1.1rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.search-btn:hover {
    background: var(--hover-orange);
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.search-btn:active {
    transform: translateY(0);
}

.secondary-btn {
    background: transparent;
    color: var(--primary-green);
    border: 2px solid var(--primary-green);
    padding: 0.75rem 1.5rem;
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition);
}

.secondary-btn:hover {
    background: var(--primary-green);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-light);
}

/* ===== SECCIÓN DE RESULTADOS ===== */
.results-section {
    margin-top: 2rem;
}

.results-card {
    background: var(--white);
    border-radius: var(--border-radius);
    padding: 2.5rem;
    box-shadow: var(--shadow-medium);
    margin-bottom: 2rem;
}

/* ===== MÚLTIPLES RESULTADOS ===== */
.multiple-results h3 {
    color: var(--primary-green);
    margin-bottom: 1rem;
}

.persons-list {
    display: grid;
    gap: 1rem;
    margin-top: 1.5rem;
}

.person-item {
    background: var(--background-light);
    border: 2px solid var(--border-light);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    cursor: pointer;
    transition: var(--transition);
    text-align: left;
}

.person-item:hover {
    border-color: var(--primary-green);
    background: var(--white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-light);
}

.person-item h4 {
    color: var(--primary-green);
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
}

.person-item p {
    color: var(--text-light);
    margin: 0;
    font-size: 1rem;
}

/* ===== RESULTADO ÚNICO ===== */
.person-header {
    text-align: center;
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid var(--background-light);
}

.person-header h3 {
    color: var(--primary-green);
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
}

.person-details {
    display: grid;
    gap: 0.75rem;
    max-width: 500px;
    margin: 0 auto;
}

.person-details p {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--background-light);
}

.person-details strong {
    color: var(--text-dark);
    font-weight: 600;
}

.person-details span {
    color: var(--text-light);
    text-align: right;
}

/* ===== SECCIÓN DE TALLERES ===== */
.workshops-section {
    margin-bottom: 2rem;
}

.workshops-section h4 {
    text-align: center;
    color: var(--primary-green);
    margin-bottom: 2rem;
    font-size: 1.8rem;
}

/* Grid 2x2 para desktop */
.workshops-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(2, 1fr);
}

/* Mantener el comportamiento responsive para tablets y móviles */
@media (max-width: 768px) {
    .workshops-grid {
        grid-template-columns: 1fr;
    }
}

.workshop-card {
    background: linear-gradient(135deg, var(--primary-green) 0%, #6a8f33 100%);
    color: var(--white);
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-light);
    position: relative;
    overflow: hidden;
    transition: var(--transition);
}

.workshop-card.saturday {
    background: linear-gradient(135deg, var(--primary-orange) 0%, #cc6f1a 100%);
}

.workshop-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
}

.workshop-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transform: translate(50%, -50%);
}

.workshop-day {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
    opacity: 0.9;
}

.workshop-time {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    opacity: 0.9;
}

.workshop-title {
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 1rem;
    min-height: 3em;
}

.workshop-location {
    font-size: 1rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    text-align: center;
    font-weight: 600;
    backdrop-filter: blur(10px);
}

/* ===== BOTONES DE ACCIÓN ===== */
.action-buttons {
    text-align: center;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px solid var(--background-light);
}

/* ===== SIN RESULTADOS ===== */
.no-results-content {
    text-align: center;
    padding: 2rem 0;
}

.no-results-content h3 {
    color: var(--primary-orange);
    margin-bottom: 1.5rem;
}

.no-results-content p {
    color: var(--text-light);
    margin-bottom: 1rem;
}

/* ===== FOOTER ===== */
.footer {
    background: var(--white);
    color: var(--text-dark);
    text-align: center;
    padding: 2rem 0;
    margin-top: auto;
    border-top: 1px solid var(--border-light);
}

.footer p {
    margin: 0.5rem 0;
    font-size: 1rem;
    color: var(--text-dark);
}

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

.results-section {
    animation: fadeIn 0.5s ease-out;
}

/* ===== ESTADOS DE CARGA ===== */
.btn-loading {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-loading::after {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ===== RESPONSIVE DESIGN ===== */

/* Tablets */
@media (max-width: 768px) {
    html {
        font-size: 14px;
    }
    
    .container {
        padding: 0 15px;
    }
    
    .header {
        padding: 1rem 0;
    }
    
    .header-content {
        gap: 1rem;
    }
    
    .logo {
        width: 50px;
    }
    
    .header-text h1 {
        font-size: 1.8rem;
    }
    
    .main {
        padding: 2rem 0;
    }
    
    .search-card, .results-card {
        padding: 2rem;
        margin: 0 10px;
    }
    
    .workshops-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .workshop-card {
        padding: 1.5rem;
    }
    
    .person-details {
        gap: 0.5rem;
    }
    
    .person-details p {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    
    .person-details span {
        text-align: left;
    }
}

/* Móviles */
@media (max-width: 480px) {
    html {
        font-size: 13px;
    }
    
    .container {
        padding: 0 10px;
    }
    
    .header-content {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }
    
    .header-text h1 {
        font-size: 1.6rem;
    }
    
    .search-card, .results-card {
        padding: 1.5rem;
        margin: 0 5px;
        border-radius: 10px;
    }
    
    .search-form {
        gap: 1rem;
    }
    
    .input-group input {
        padding: 0.875rem 1rem;
        font-size: 1rem;
    }
    
    .search-btn {
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }
    
    .workshop-card {
        padding: 1.25rem;
    }
    
    .workshop-title {
        font-size: 1.1rem;
        min-height: auto;
    }
    
    .workshop-location {
        font-size: 0.9rem;
        padding: 0.4rem 0.8rem;
    }
    
    .person-header h3 {
        font-size: 1.8rem;
    }
    
    .workshops-section h4 {
        font-size: 1.5rem;
    }
}

/* ===== MEJORAS DE ACCESIBILIDAD ===== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus visible para navegación por teclado */
.search-btn:focus-visible,
.secondary-btn:focus-visible,
.person-item:focus-visible,
input:focus-visible {
    outline: 3px solid var(--primary-orange);
    outline-offset: 2px;
}

/* ===== MODO OSCURO DESACTIVADO ===== */
/* 
   El modo oscuro ha sido completamente eliminado.
   La aplicación siempre se mostrará en modo claro
   independientemente de las preferencias del sistema del usuario.
   
   Si en el futuro deseas reactivar el modo oscuro,
   tendrías que crear una nueva media query @media (prefers-color-scheme: dark)
   y redefinir las variables CSS para ese modo.
*/