/* ============================================================================
   RESET Y CONFIGURACIÓN BASE
   ============================================================================ */

/* 
 * RESET UNIVERSAL
 * - Elimina márgenes y padding por defecto de todos los navegadores
 * - box-sizing: border-box hace que padding y border se incluyan en el width/height
 * - Esto evita problemas de cálculo de dimensiones en diferentes navegadores
 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 
 * VARIABLES CSS (CUSTOM PROPERTIES)
 * - Define valores reutilizables en :root para acceso global
 * - Facilita el mantenimiento: cambiar un valor aquí afecta a todo el sitio
 * - Mejora la consistencia visual
 */
:root {
    /* ===== PALETA DE COLORES PRINCIPALES ===== */
    --primary-color: #27ae60;      /* Verde principal - color ecológico */
    --primary-dark: #229954;       /* Verde oscuro - hover y estados activos */
    --secondary-color: #95a5a6;    /* Gris - elementos secundarios */
    --secondary-dark: #7f8c8d;     /* Gris oscuro - hover secundario */
    --success-color: #2ecc71;      /* Verde claro - validaciones exitosas, confirmaciones */
    --error-color: #e74c3c;        /* Rojo - errores, advertencias importantes */
    --warning-color: #f39c12;      /* Naranja - advertencias, estados intermedios */
    
    /* ===== COLORES NEUTROS ===== */
    --text-color: #2c3e50;         /* Color principal del texto - alto contraste */
    --text-light: #7f8c8d;         /* Texto secundario, placeholders, ayuda */
    --bg-color: #ecf0f1;           /* Color de fondo general - gris muy claro */
    --white: #ffffff;              /* Blanco puro - fondos de contenido */
    --border-color: #bdc3c7;       /* Color para bordes - gris medio */
    
    /* ===== SISTEMA TIPOGRÁFICO ===== */
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Fuente con fallbacks */
    --font-size-base: 16px;        /* Tamaño base para cálculo de rem (1rem = 16px) */
    --line-height: 1.6;            /* Interlineado para mejor legibilidad */
    
    /* ===== SISTEMA DE ESPACIADO ===== */
    /* Escala basada en 0.25rem (4px) para consistencia visual */
    --spacing-xs: 0.25rem;         /* 4px - Espaciado muy pequeño */
    --spacing-sm: 0.5rem;          /* 8px - Espaciado pequeño */
    --spacing-md: 1rem;            /* 16px - Espaciado medio (base) */
    --spacing-lg: 1.5rem;          /* 24px - Espaciado grande */
    --spacing-xl: 2rem;            /* 32px - Espaciado extra grande */
    
    /* ===== PROPIEDADES VISUALES ===== */
    --border-radius: 8px;          /* Radio de borde para contenedores grandes */
    --border-radius-sm: 4px;       /* Radio de borde para elementos pequeños */
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);        /* Sombra suave para profundidad */
    --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.15);    /* Sombra pronunciada para énfasis */
    
    /* ===== TRANSICIONES Y ANIMACIONES ===== */
    --transition: all 0.3s ease;   /* Transición suave para hover, focus, cambios de estado */
}

/* ============================================================================
   ESTILOS BASE DEL DOCUMENTO
   ============================================================================ */

/* 
 * ESTILOS BASE DEL BODY
 * - Define la apariencia fundamental de toda la página
 * - Aplica las variables CSS definidas anteriormente
 */
body {
    font-family: var(--font-family);        /* Aplica la fuente definida en variables */
    font-size: var(--font-size-base);       /* Tamaño base de fuente para cálculo de rem */
    line-height: var(--line-height);        /* Mejora la legibilidad del texto */
    color: var(--text-color);               /* Color principal del texto */
    background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%); /* Fondo gradiente verde */
    min-height: 100vh;                      /* Ocupa al menos toda la altura visible */
    padding: var(--spacing-md);             /* Espaciado interno del body */
}

/* 
 * CONTENEDOR PRINCIPAL
 * - Actúa como tarjeta de contenido centrada
 * - max-width: limita el ancho máximo para mejor legibilidad
 * - margin: 0 auto centra horizontalmente el contenedor
 * - box-shadow: efecto de elevación visual
 */
.container {
    max-width: 800px;                       /* Ancho máximo para legibilidad en escritorio */
    margin: 0 auto;                         /* Centrado horizontal automático */
    background: var(--white);               /* Fondo blanco para el contenido */
    border-radius: var(--border-radius);    /* Esquinas redondeadas */
    box-shadow: var(--shadow-lg);           /* Sombra para efecto de elevación y profundidad */
    overflow: hidden;                       /* Evita que el contenido se salga del contenedor */
}

/* ============================================================================
   HEADER - CABECERA DEL FORMULARIO
   ============================================================================ */

/* 
 * ESTILOS DEL HEADER
 * - Sección superior con título e instrucciones
 * - background: gradiente verde para destacar
 * - text-align: center centra el contenido
 */
.header {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); /* Gradiente verde */
    color: var(--white);                    /* Texto blanco para máximo contraste */
    padding: var(--spacing-xl);             /* Espaciado interno generoso */
    text-align: center;                     /* Centra todo el contenido */
}

/* Título principal del formulario */
.header h1 {
    font-size: 2rem;                        /* Tamaño grande para jerarquía visual */
    font-weight: 600;                       /* Peso semi-negrita para destacar */
    margin-bottom: var(--spacing-sm);       /* Separación con el subtítulo */
}

/* Texto descriptivo debajo del título */
.subtitle {
    font-size: 1rem;                        /* Tamaño normal de lectura */
    opacity: 0.9;                           /* Ligeramente transparente para jerarquía */
    font-weight: 300;                       /* Peso ligero para contraste con el título */
}

/* ============================================================================
   CONTENIDO PRINCIPAL
   ============================================================================ */

/* 
 * ÁREA DE CONTENIDO PRINCIPAL
 * - Donde se encuentra el formulario
 * - padding: espaciado interno consistente
 */
.main-content {
    padding: var(--spacing-xl);             /* Espaciado interno consistente */
}

/* ============================================================================
   SECCIONES DEL FORMULARIO
   ============================================================================ */

/* 
 * SECCIONES DEL FORMULARIO
 * - Agrupan campos relacionados temáticamente
 * - border-bottom: línea separadora sutil
 * - padding-bottom: separación con la siguiente sección
 */
.form-section {
    margin-bottom: var(--spacing-xl);       /* Separación entre secciones */
    padding-bottom: var(--spacing-lg);       /* Separación interna inferior */
    border-bottom: 1px solid var(--border-color); /* Línea separadora sutil */
}

/* Última sección sin borde inferior */
.form-section:last-child {
    border-bottom: none;                    /* Elimina borde en la última sección */
}

/* Títulos de las secciones */
.section-title {
    color: var(--primary-color);            /* Color verde para coherencia con el tema */
    font-size: 1.25rem;                     /* Tamaño mediano para destacar */
    margin-bottom: var(--spacing-lg);        /* Separación con los campos */
    padding-bottom: var(--spacing-sm);       /* Separación inferior */
    border-bottom: 2px solid var(--primary-color); /* Línea inferior verde */
}

/* ============================================================================
   GRUPOS DE FORMULARIO - ESTRUCTURA DE CAMPOS
   ============================================================================ */

/* 
 * GRUPO DE FORMULARIO
 * - Contenedor para cada campo (label + input + texto ayuda)
 * - margin-bottom: separación vertical entre grupos
 * - position: relative para posicionar elementos hijos absolutos si es necesario
 */
.form-group {
    margin-bottom: var(--spacing-lg);       /* Separación vertical entre grupos */
    position: relative;                     /* Para posicionar elementos hijos absolutos */
}

/* 
 * ETIQUETAS DE LOS CAMPOS
 * - display: block para que ocupen toda la línea
 * - font-weight: 600 para destacar y mejorar scaneo visual
 */
.form-label {
    display: block;                         /* Ocupa toda la línea, fuerza el input debajo */
    font-weight: 600;                       /* Negrita para destacar y mejorar scaneo */
    margin-bottom: var(--spacing-sm);       /* Separación con el input */
    color: var(--text-color);               /* Color del texto principal */
    font-size: 0.95rem;                     /* Tamaño ligeramente menor que el texto normal */
}

/* 
 * ASTERISCO PARA CAMPOS OBLIGATORIOS
 * - Color rojo para llamar la atención inmediatamente
 * - font-weight: bold para mayor énfasis
 */
.requerido {
    color: var(--error-color);              /* Rojo para llamar la atención inmediatamente */
    font-weight: bold;                      /* Negrita para mayor énfasis */
}

/* ============================================================================
   INPUTS DEL FORMULARIO
   ============================================================================ */

/* 
 * ESTILOS BASE PARA TODOS LOS INPUTS
 * - width: 100% para ocupar todo el ancho disponible
 * - border: 2px solid para bordes visibles pero sutiles
 * - transition: efectos suaves al interactuar
 */
.form-input {
    width: 100%;                            /* Ocupa todo el ancho disponible del contenedor */
    padding: var(--spacing-md);             /* Espaciado interno cómodo para escritura */
    border: 2px solid var(--border-color);  /* Borde sutil pero visible */
    border-radius: var(--border-radius-sm); /* Esquinas ligeramente redondeadas */
    font-size: 1rem;                        /* Tamaño de fuente legible */
    transition: var(--transition);          /* Transición suave para cambios de estado */
    background-color: var(--white);         /* Fondo blanco para contraste */
}

/* 
 * ESTADO DE FOCO - CUANDO EL USUARIO INTERACTÚA
 * - outline: none elimina el outline azul por defecto
 * - border-color: verde para indicar claramente el foco
 * - box-shadow: sombra sutil verde para mayor énfasis
 */
.form-input:focus {
    outline: none;                          /* Elimina el outline azul por defecto del navegador */
    border-color: var(--primary-color);     /* Borde verde para indicar claramente el foco */
    box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.1); /* Sombra sutil verde para mayor énfasis */
    background-color: var(--white);         /* Mantiene fondo blanco */
}

/* 
 * TEXTO DE PLACEHOLDER
 * - Color gris claro para no competir con texto real
 * - opacity: 0.7 para ligeramente transparente
 */
.form-input::placeholder {
    color: var(--text-light);               /* Color gris claro para no competir con texto real */
    opacity: 0.7;                           /* Ligeramente transparente */
}

/* ============================================================================
   ESTADOS DE VALIDACIÓN DE INPUTS
   ============================================================================ */

/* 
 * INPUT VÁLIDO (VALIDACIÓN HTML5 NATIVA)
 * - Se activa cuando el campo cumple todas las validaciones
 * - border-color: verde para indicar éxito
 * - :not(:focus) para no aplicar durante la edición
 */
.form-input:valid:not(:focus) {
    border-color: var(--success-color);     /* Borde verde para indicar éxito y validación */
}

/* 
 * INPUT CON ERROR - APLICADO POR JAVASCRIPT
 * - border-color: rojo para indicar error claramente
 * - background-color: fondo rojo muy suave para mayor énfasis
 * - box-shadow: sombra roja sutil
 */
.form-input.error {
    border-color: var(--error-color);       /* Borde rojo para indicar error claramente */
    background-color: rgba(231, 76, 60, 0.05); /* Fondo rojo muy suave para mayor énfasis */
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1); /* Sombra roja sutil */
}

/* 
 * INPUT EXITOSO - APLICADO POR JAVASCRIPT
 * - border-color: verde para confirmación positiva
 * - background-color: fondo verde muy suave
 */
.form-input.success {
    border-color: var(--success-color);     /* Borde verde para confirmación positiva */
    background-color: rgba(46, 204, 113, 0.05); /* Fondo verde muy suave */
}

/* ============================================================================
   TEXTO DE AYUDA Y DESCRIPCIÓN
   ============================================================================ */

/* 
 * TEXTO DE AYUDA DEBAJO DE CADA INPUT
 * - display: block para ocupar toda la línea
 * - font-size: pequeño para no competir visualmente
 * - color: gris claro para texto secundario
 */
.form-help {
    display: block;                         /* Ocupa toda la línea */
    margin-top: var(--spacing-xs);          /* Pequeña separación del input */
    font-size: 0.85rem;                     /* Tamaño pequeño para no competir */
    color: var(--text-light);               /* Color gris para texto secundario */
    line-height: 1.4;                       /* Interlineado cómodo para lectura */
}

/* ============================================================================
   GRUPOS DE RADIO Y CHECKBOX
   ============================================================================ */

/* 
 * CONTENEDOR PARA GRUPOS DE RADIO
 * - display: flex para layout flexible
 * - flex-wrap: wrap para responsive en móviles
 * - gap: separación entre opciones
 */
.radio-group {
    display: flex;                          /* Layout flexible para alinear opciones */
    flex-wrap: wrap;                        /* Permite que las opciones se envuelvan en pantallas pequeñas */
    gap: var(--spacing-md);                 /* Separación entre opciones */
    margin-top: var(--spacing-sm);          /* Separación con el label */
}

/* 
 * CONTENEDOR PARA GRUPOS DE CHECKBOX
 * - display: flex para layout flexible
 * - flex-direction: column para apilar opciones
 * - gap: separación entre opciones
 */
.checkbox-group {
    display: flex;                          /* Layout flexible para alinear opciones */
    flex-direction: column;                 /* Apila las opciones verticalmente */
    gap: var(--spacing-sm);                 /* Separación entre opciones */
    margin-top: var(--spacing-sm);          /* Separación con el label */
}

/* 
 * OPCIONES INDIVIDUALES DE RADIO Y CHECKBOX
 * - display: flex para alinear input y label
 * - align-items: center para centrado vertical
 */
.radio-option,
.checkbox-option {
    display: flex;                          /* Layout flexible para alinear input y label */
    align-items: center;                    /* Centra verticalmente input y label */
    gap: var(--spacing-xs);                 /* Pequeña separación entre input y label */
}

/* 
 * ETIQUETAS PARA RADIO Y CHECKBOX
 * - cursor: pointer para indicar interactividad
 * - font-weight: normal para diferenciar de labels principales
 */
.radio-option label,
.checkbox-option label {
    cursor: pointer;                        /* Cursor de mano para indicar interactividad */
    font-weight: normal;                    /* Peso normal para diferenciar de labels principales */
}

/* 
 * INPUTS DE TIPO RADIO Y CHECKBOX
 * - width y height para tamaño consistente
 * - margin-right: separación con el label
 */
input[type="radio"],
input[type="checkbox"] {
    width: 18px;                            /* Ancho consistente */
    height: 18px;                           /* Altura consistente */
    margin-right: var(--spacing-xs);         /* Separación con el label */
}

/* ============================================================================
   CONTENEDOR DE MENSAJES DE ERROR
   ============================================================================ */

/* 
 * CONTENEDOR DE ERRORES GLOBALES
 * - background-color: fondo rojo muy suave (10% opacidad)
 * - display: none oculto por defecto, se muestra con JavaScript
 * - border: borde rojo delgado
 */
.error-container {
    background-color: rgba(231, 76, 60, 0.1);  /* Fondo rojo muy suave (10% opacidad) */
    border: 1px solid var(--error-color);   /* Borde rojo delgado */
    border-radius: var(--border-radius-sm); /* Esquinas redondeadas consistentes */
    padding: var(--spacing-md);             /* Espaciado interno */
    margin: var(--spacing-lg) 0;            /* Separación arriba y abajo */
    color: var(--error-color);              /* Texto rojo para llamar atención */
    font-weight: 500;                       /* Peso medio para destacar pero no gritar */
    display: none;                          /* Oculto por defecto, se muestra con JavaScript */
}

/* 
 * ESTADO VISIBLE DEL CONTENEDOR DE ERRORES
 * - display: block para mostrar el contenedor
 * - animation: animación suave al aparecer
 */
.error-container.show {
    display: block;                         /* Se muestra cuando hay errores */
    animation: slideDown 0.3s ease;         /* Animación suave al aparecer */
}

/* 
 * ANIMACIÓN PARA MOSTRAR ERRORES
 * - Desliza suavemente desde arriba
 * - opacity: transparencia para efecto de fade in
 */
@keyframes slideDown {
    from {
        opacity: 0;                         /* Comienza completamente transparente */
        transform: translateY(-10px);       /* Comienza ligeramente desplazado hacia arriba */
    }
    to {
        opacity: 1;                         /* Termina completamente visible */
        transform: translateY(0);           /* Termina en su posición natural */
    }
}

/* ============================================================================
   BOTONES DEL FORMULARIO
   ============================================================================ */

/* 
 * CONTENEDOR DE BOTONES
 * - display: flex para layout flexible
 * - gap: separación horizontal entre botones
 * - flex-wrap: wrap para responsive en móviles
 */
.form-buttons {
    display: flex;                          /* Layout flexible para alinear botones */
    gap: var(--spacing-md);                 /* Separación horizontal entre botones */
    margin-top: var(--spacing-xl);          /* Separación superior grande del contenido anterior */
    flex-wrap: wrap;                        /* Permite que los botones se envuelvan en pantallas pequeñas */
}

/* 
 * ESTILO BASE PARA TODOS LOS BOTONES
 * - display: inline-flex para alinear icono y texto
 * - align-items: center para centrado vertical
 * - cursor: pointer para indicar interactividad
 */
.btn {
    display: inline-flex;                   /* Flex para alinear icono y texto fácilmente */
    align-items: center;                    /* Centra verticalmente icono y texto */
    gap: var(--spacing-sm);                 /* Separación entre icono y texto */
    padding: var(--spacing-md) var(--spacing-lg); /* Espaciado interno vertical y horizontal */
    border: none;                           /* Sin borde por defecto */
    border-radius: var(--border-radius-sm); /* Esquinas redondeadas consistentes */
    font-size: 1rem;                        /* Tamaño de texto legible */
    font-weight: 600;                       /* Negrita para hacer los botones prominentes */
    cursor: pointer;                        /* Cursor de mano para indicar interactividad */
    transition: var(--transition);          /* Transición suave para efectos hover */
    text-decoration: none;                  /* Sin subrayado (útil para links con clase btn) */
    flex: 1;                                /* Ocupa espacio disponible equitativamente */
    min-width: 150px;                       /* Ancho mínimo para evitar botones muy pequeños */
    justify-content: center;                /* Centra el contenido horizontalmente */
}

/* 
 * BOTÓN PRINCIPAL - ACCIÓN PRINCIPAL (ENVIAR)
 * - background: gradiente verde para destacar
 * - color: texto blanco para máximo contraste
 */
.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); /* Gradiente verde */
    color: var(--white);                    /* Texto blanco para máximo contraste */
}

/* 
 * EFECTO HOVER PARA BOTÓN PRINCIPAL
 * - transform: translateY(-2px) efecto de elevación sutil
 * - box-shadow: sombra verde para profundidad
 */
.btn-primary:hover {
    transform: translateY(-2px);            /* Efecto de elevación sutil */
    box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3); /* Sombra verde para profundidad */
}

/* 
 * BOTÓN SECUNDARIO - ACCIONES MENOS IMPORTANTES (LIMPIAR)
 * - background: gradiente gris para diferenciar
 * - color: texto blanco para contraste
 */
.btn-secondary {
    background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark)); /* Gradiente gris */
    color: var(--white);                    /* Texto blanco para contraste */
}

/* 
 * EFECTO HOVER PARA BOTÓN SECUNDARIO
 * - Efectos consistentes con el botón primario
 * - box-shadow: sombra gris para coherencia
 */
.btn-secondary:hover {
    transform: translateY(-2px);            /* Efecto de elevación consistente */
    box-shadow: 0 4px 12px rgba(149, 165, 166, 0.3); /* Sombra gris para profundidad */
}

/* 
 * EFECTO AL HACER CLIC EN CUALQUIER BOTÓN
 * - transform: translateY(0) vuelve a posición original
 */
.btn:active {
    transform: translateY(0);               /* Vuelve a posición original al hacer clic */
}

/* 
 * ICONOS DENTRO DE LOS BOTONES
 * - font-weight: bold para mejor visibilidad
 */
.btn-icon {
    font-weight: bold;                      /* Iconos en negrita para mejor visibilidad */
}

/* ============================================================================
   FOOTER - PIE DE PÁGINA
   ============================================================================ */

/* 
 * PIE DE PÁGINA
 * - background-color: fondo verde claro para diferenciarse
 * - text-align: center para texto centrado
 * - border-top: línea separadora sutil
 */
.footer {
    background-color: rgba(39, 174, 96, 0.1); /* Fondo verde muy claro para diferenciarse */
    padding: var(--spacing-md);             /* Espaciado interno */
    text-align: center;                     /* Texto centrado */
    color: var(--text-light);               /* Color gris para texto secundario */
    font-size: 0.9rem;                      /* Tamaño pequeño */
    border-top: 1px solid var(--primary-color); /* Línea separadora verde en la parte superior */
}

/* ============================================================================
   ESTADOS DE DESHABILITADO
   ============================================================================ */

/* 
 * ELEMENTOS DESHABILITADOS
 * - opacity: 0.6 para indicar estado deshabilitado
 * - cursor: not-allowed para cursor de "no permitido"
 * - transform: none para anular efectos hover
 */
.btn:disabled,
.form-input:disabled {
    opacity: 0.6;                           /* Transparencia para indicar estado deshabilitado */
    cursor: not-allowed;                    /* Cursor de "no permitido" */
    transform: none !important;             /* Anula transformaciones de hover cuando está deshabilitado */
}

/* ============================================================================
   DISEÑO RESPONSIVE - ADAPTACIÓN A DIFERENTES TAMAÑOS DE PANTALLA
   ============================================================================ */

/* 
 * MEDIA QUERY PARA TABLETS Y DISPOSITIVOS MEDIANOS (768px o menos)
 * - Ajusta estilos para pantallas más pequeñas
 */
@media (max-width: 768px) {
    body {
        padding: var(--spacing-sm);         /* Menos padding en móviles para aprovechar espacio */
    }
    
    .container {
        border-radius: var(--border-radius); /* Mantiene bordes redondeados */
    }
    
    .header {
        padding: var(--spacing-lg);         /* Menos padding en header para dispositivos pequeños */
    }
    
    .header h1 {
        font-size: 1.75rem;                 /* Título ligeramente más pequeño */
    }
    
    .main-content {
        padding: var(--spacing-lg);         /* Menos padding en contenido */
    }
    
    .form-buttons {
        flex-direction: column;             /* Botones en columna para mejor uso en móviles */
    }
    
    .btn {
        flex: none;                         /* Anula flex:1 para que no se estiren */
        width: 100%;                        /* Botones ocupan todo el ancho disponible */
    }
    
    .radio-group {
        flex-direction: column;             /* Radio buttons en columna en móviles */
        gap: var(--spacing-sm);             /* Menos separación entre opciones */
    }
}

/* 
 * MEDIA QUERY PARA TELÉFONOS MÓVILES PEQUEÑOS (480px o menos)
 * - Ajustes más específicos para pantallas muy pequeñas
 */
@media (max-width: 480px) {
    :root {
        --font-size-base: 14px;             /* Tamaño base más pequeño para móviles */
    }
    
    .header h1 {
        font-size: 1.5rem;                  /* Título aún más pequeño en móviles muy pequeños */
    }
    
    .form-input {
        padding: var(--spacing-sm) var(--spacing-md); /* Padding vertical menor para inputs */
    }
}

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

/* 
 * ANIMACIÓN DE "SHAKE" PARA INPUTS CON ERROR
 * - Llama la atención sobre campos con problemas
 * - Movimiento lateral suave
 */
@keyframes shake {
    0%, 100% { transform: translateX(0); }  /* Posición normal */
    25% { transform: translateX(-5px); }    /* Mueve ligeramente a la izquierda */
    75% { transform: translateX(5px); }     /* Mueve ligeramente a la derecha */
}

/* 
 * CLASE PARA APLICAR ANIMACIÓN SHAKE
 * - Usada por JavaScript en campos con error
 * - animation: duración de 0.3 segundos suave
 */
.shake {
    animation: shake 0.3s ease-in-out;      /* Animación de 0.3 segundos suave */
}

/* ============================================================================
   ACCESIBILIDAD - MEJORAS PARA USUARIOS CON DISCAPACIDAD
   ============================================================================ */

/* 
 * FOCUS VISIBLE PARA NAVEGACIÓN CON TECLADO
 * - outline: visible y claro para focus con teclado
 * - outline-offset: separación del elemento para mejor visibilidad
 * - Importante para usuarios que navegan con teclado
 */
.btn:focus-visible,
.form-input:focus-visible {
    outline: 2px solid var(--primary-color); /* Outline visible y claro para focus con teclado */
    outline-offset: 2px;                    /* Separación del elemento para mejor visibilidad */
}