/* ==========================================================================
   [PERSONALIZAR] VARIABLES DE MARCA
   Aquí defines la paleta de colores de toda la aplicación.
   ==========================================================================
*/
:root {
    /* --- COLORES PRINCIPALES --- */
    
    /* Títulos, Textos Fuertes y Botones Principales (Negro/Gris muy oscuro) */
    --color-primary: #111827;     
    
    /* Color para estados Hover de botones (Un poco más claro que el primario) */
    --color-secondary: #374151;   
    
    /* Color de Acento (Azul Royal) - Usado para bordes seleccionados e iconos destacados */
    --color-accent: #2563EB;      
    
    /* --- SUPERFICIES Y FONDOS --- */
    
    /* Fondo general de la página (Gris muy tenue para reducir fatiga visual) */
    --color-bg-main: #F9FAFB;     
    
    /* Fondo de las tarjetas y contenedores (Blanco puro) */
    --color-surface: #FFFFFF;     
    
    /* --- TIPOGRAFÍA Y BORDES --- */
    
    /* Texto principal del cuerpo */
    --color-text-main: #1F2937;   
    
    /* Texto secundario / instrucciones (Gris medio) */
    --color-text-muted: #6B7280;  
    
    /* Color de líneas divisorias y bordes de inputs */
    --color-border: #E5E7EB;      
    
    /* --- ESTADOS --- */
    
    /* Mensajes de error y validación */
    --color-error: #DC2626;       
    
    /* Mensajes de éxito (si aplicara) */
    --color-success: #10B981;     
}

/* ==========================================================================
   CONFIGURACIÓN BASE
   ==========================================================================
*/
body {
    background-color: var(--color-bg-main);
    color: var(--color-text-main);
    /* Fuente del sistema optimizada para cada SO (San Francisco en Mac, Segoe en Win) */
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased; /* Suavizado de fuente en Mac */
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   CORRECCIONES TÉCNICAS (IOS & MOBILE FIXES) - [NO BORRAR]
   Estas reglas son críticas para evitar errores visuales en iPhones.
   ==========================================================================
*/

/* 1. Evita que iOS haga zoom automático al tocar un input (tamaño fuente min 16px) */
input, select, textarea { 
    font-size: 16px !important; 
}

/* 2. Asegura un área táctil mínima de 46px en móviles */
.fixed-height-input { 
    height: 46px; 
} 

/* 3. Evita que textos largos rompan el layout Flexbox en Safari */
.flex-text-safe { 
    flex: 1; 
    min-w: 0; 
} 

/* 4. Clase utilitaria para ocultar secciones dinámicamente desde JS */
.hidden-section { 
    display: none; 
}

/* 5. Grid del Footer Responsivo */
/* En móvil es 1 columna, en desktop son 3 columnas (1fr 2fr 1fr) */
.footer-grid { 
    display: grid !important; 
    grid-template-cols: 1fr; 
    gap: 15px; 
}
@media (min-width: 768px) { 
    .footer-grid { 
        grid-template-cols: 1fr 2fr 1fr; 
    } 
}

/* ==========================================================================
   COMPONENTES DE LA INTERFAZ (UI)
   ==========================================================================
*/

/* --- TARJETAS DE OPCIÓN (RADIO BUTTONS VISUALES) --- */
.option-card {
    border: 2px solid var(--color-border);
    transition: all 0.2s ease-in-out;
    cursor: pointer; /* Indica que es clicable */
    background-color: var(--color-surface);
}

/* Estado Hover (Al pasar el mouse) */
.option-card:hover {
    border-color: var(--color-accent);
    background-color: #F3F4F6; /* Gris muy claro */
    transform: translateY(-2px); /* Pequeña elevación */
}

/* Estado Seleccionado (Aplicado vía JS) */
.option-card.selected {
    border-color: var(--color-accent);
    background-color: #EFF6FF; /* Azul muy claro (bg-blue-50 de Tailwind aprox) */
    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2); /* Sombra suave azulada */
}

/* --- BOTONES PRINCIPALES --- */
.btn-primary {
    background-color: var(--color-primary);
    color: white;
    transition: background-color 0.2s, transform 0.1s;
    border: none;
    cursor: pointer;
}

.btn-primary:hover { 
    background-color: var(--color-secondary); 
}

.btn-primary:active {
    transform: scale(0.98); /* Efecto de pulsación */
}

/* Estado Deshabilitado (Mientras carga o valida) */
.btn-disabled {
    background-color: #9CA3AF !important; /* Gris */
    cursor: not-allowed;
    transform: none !important;
    opacity: 0.7;
}

/* ==========================================================================
   ANIMACIONES
   ==========================================================================
*/

/* Definición de Keyframes: Entrada deslizante desde abajo */
@keyframes slideInUp {
    from { 
        opacity: 0; 
        transform: translateY(20px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* Clase para aplicar la animación */
.animate-entry {
    animation: slideInUp 0.6s ease-out forwards;
    opacity: 0; /* Comienza invisible hasta que arranca la animación */
}