/**
 * ============================================================================
 * FORMS.CSS
 * Componente de Formularios - Sistema Académico MINERD
 * ============================================================================
 * 
 * Componente reutilizable para formularios del sistema.
 * Incluye inputs, selects, textareas, validación visual y layouts.
 * Requiere: sistema-design.css
 * 
 * @author Sistema Académico MINERD
 * @version 2.0.0
 * @date 11 de Enero de 2026
 * ============================================================================
 */

/* ============================================================================
   FORMULARIOS - ESTRUCTURA BASE
   ============================================================================ */

.form {
    width: 100%;
}

/* ============================================================================
   FORM GROUP (contenedor de campo)
   ============================================================================ */

.form-group {
    margin-bottom: var(--spacing-6);
}

.form-group:last-child {
    margin-bottom: 0;
}

/* ============================================================================
   LABELS
   ============================================================================ */

.form-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--gray-700);
    margin-bottom: var(--spacing-2);
    line-height: var(--leading-tight);
}

.form-label-required::after {
    content: " *";
    color: var(--danger-500);
    font-weight: var(--font-bold);
}

/* ============================================================================
   INPUTS BASE
   ============================================================================ */

.form-control,
.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: var(--spacing-3);
    font-size: var(--text-base);
    font-family: var(--font-family-sans);
    line-height: var(--leading-normal);
    color: var(--gray-900);
    background-color: var(--white);
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-lg);
    transition: var(--transition-base);
}

.form-control:focus,
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-control:disabled,
.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
    background-color: var(--gray-100);
    cursor: not-allowed;
    opacity: 0.6;
}

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

/* Input válido */
.form-control.is-valid,
.form-select.is-valid {
    border-color: var(--success-500);
    padding-right: 3rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2310b981'%3e%3cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 10.586l7.293-7.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-3) center;
    background-size: 20px;
}

.form-select:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Textarea */
.form-textarea {
    width: 100%;
    padding: var(--spacing-3);
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-lg);
    font-family: var(--font-family-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--gray-900);
    background: var(--white);
    resize: vertical;
    min-height: 100px;
    transition: var(--transition-base);
}

.form-control:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* ============================================================================
   FORM INPUT SIZES
   ============================================================================ */

.form-control-sm {
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--text-sm);
}

.form-control-lg {
    padding: var(--spacing-4) var(--spacing-5);
    font-size: var(--text-lg);
}

/* ============================================================================
   ESTADOS DE INPUT
   ============================================================================ */

/* Success */
.form-control-success,
.form-control.is-valid {
    border-color: var(--success-500);
    background-color: var(--success-50);
}

.form-control-success:focus,
.form-control.is-valid:focus {
    border-color: var(--success-500);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* Error */
.form-control-error,
.form-control.is-invalid {
    border-color: var(--danger-500);
    background-color: var(--danger-50);
}

.form-control-error:focus {
    border-color: var(--danger-500);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Success */
.form-control-success {
    border-color: var(--success-500);
}

.form-control-success:focus {
    border-color: var(--success-600);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* ============================================================================
   FORM VALIDATION STATES
   ============================================================================ */

.form-group.is-valid .form-control {
    border-color: var(--success-500);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2310b981'%3e%3cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 10.586l7.293-7.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-3) center;
    background-size: 1rem;
}

.form-control.is-invalid {
    border-color: var(--danger-500);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ef4444' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-3) center;
    background-size: 1rem;
}

/* ============================================================================
   SELECT PERSONALIZADO
   ============================================================================ */

.form-select {
    width: 100%;
    padding: var(--spacing-3);
    padding-right: var(--spacing-10);
    
    font-family: var(--font-family-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--gray-900);
    
    background-color: var(--white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-3) center;
    background-size: 1.5rem;
    
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-lg);
    
    appearance: none;
    cursor: pointer;
    transition: var(--transition-base);
}

.form-select:hover {
    border-color: var(--gray-400);
}

.form-select:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-select:disabled {
    background-color: var(--gray-100);
    cursor: not-allowed;
    opacity: 0.6;
}

/* ============================================================================
   TEXTAREA
   ============================================================================ */

.form-textarea {
    width: 100%;
    min-height: 120px;
    padding: var(--spacing-3);
    
    font-family: var(--font-family-sans);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--gray-900);
    
    background-color: var(--white);
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-lg);
    
    resize: vertical;
    transition: var(--transition-base);
}

.form-textarea:hover {
    border-color: var(--gray-400);
}

.form-textarea:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* ============================================================================
   CHECKBOX Y RADIO
   ============================================================================ */

.form-check {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
}

.form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-sm);
    
    cursor: pointer;
    transition: var(--transition-base);
    
    appearance: none;
    background-color: var(--white);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.form-check-input:hover {
    border-color: var(--primary-400);
}

.form-check-input:checked {
    background-color: var(--primary-500);
    border-color: var(--primary-500);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
}

.form-check-input:focus {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

.form-check-input[type="radio"] {
    border-radius: var(--radius-full);
}

.form-check-input[type="radio"]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3' fill='white'/%3E%3C/svg%3E");
}

.form-check-label {
    font-size: var(--text-base);
    color: var(--gray-700);
    cursor: pointer;
    user-select: none;
}

/* ============================================================================
   SWITCH (Toggle)
   ============================================================================ */

.form-switch {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.form-switch-input {
    width: 3rem;
    height: 1.5rem;
    margin: 0;
    
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-full);
    
    cursor: pointer;
    transition: var(--transition-base);
    
    appearance: none;
    background-color: var(--gray-200);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='white'/%3E%3C/svg%3E");
    background-position: left 0.25rem center;
    background-repeat: no-repeat;
}

.form-switch-input:checked {
    background-color: var(--primary-500);
    border-color: var(--primary-500);
    background-position: right 0.25rem center;
}

.form-switch-input:focus {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

/* ============================================================================
   FILE INPUT
   ============================================================================ */

.form-file {
    position: relative;
    display: inline-block;
    width: 100%;
}

.form-file-input {
    position: absolute;
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
}

.form-file-label {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-4);
    
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--gray-700);
    
    background-color: var(--white);
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius-lg);
    
    cursor: pointer;
    transition: var(--transition-base);
}

.form-file-label:hover {
    border-color: var(--primary-400);
    background-color: var(--primary-50);
}

.form-file-input:focus + .form-file-label {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

/* ============================================================================
   INPUT GROUP (con íconos/botones)
   ============================================================================ */

.input-group {
    position: relative;
    display: flex;
    width: 100%;
}

.input-group-prepend,
.input-group-append {
    display: flex;
    align-items: center;
    padding: var(--spacing-3);
    background-color: var(--gray-100);
    border: 2px solid var(--gray-300);
    color: var(--gray-600);
}

.input-group-prepend {
    border-right: none;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.input-group-append {
    border-left: none;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.input-group .form-control {
    border-radius: 0;
}

.input-group .form-control:first-child {
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.input-group .form-control:last-child {
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

/* ============================================================================
   FORM VALIDATION MESSAGES
   ============================================================================ */

.valid-feedback {
    display: none;
    margin-top: var(--spacing-1);
    font-size: var(--text-sm);
    color: var(--success-600);
}

.invalid-feedback {
    display: none;
    margin-top: var(--spacing-1);
    font-size: var(--text-sm);
    color: var(--danger-600);
}

.form-control.is-valid ~ .valid-feedback,
.form-control.is-invalid ~ .invalid-feedback {
    display: block;
}

/* ============================================================================
   FORM HELP TEXT
   ============================================================================ */

.form-text {
    display: block;
    margin-top: var(--spacing-1);
    font-size: var(--text-sm);
    color: var(--gray-600);
    line-height: var(--leading-relaxed);
}

/* ============================================================================
   FORM SIZES
   ============================================================================ */

.form-control-sm,
.form-select-sm {
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--text-sm);
}

.form-control-lg,
.form-select-lg {
    padding: var(--spacing-4) var(--spacing-5);
    font-size: var(--text-lg);
}

/* ============================================================================
   FORM LAYOUTS
   ============================================================================ */

.form-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-4);
}

.form-horizontal .form-group {
    display: grid;
    grid-template-columns: 200px 1fr;
    align-items: center;
    gap: var(--spacing-4);
}

.form-horizontal .form-label {
    margin-bottom: 0;
    text-align: right;
}

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

@media (max-width: 768px) {
    .form-horizontal .form-group {
        grid-template-columns: 1fr;
    }
    
    .form-horizontal .form-label {
        text-align: left;
        margin-bottom: var(--spacing-2);
    }
    
    .form-inline {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ============================================================================
   EJEMPLOS DE USO (comentados)
   ============================================================================

<!-- Input básico con label -->
<div class="form-group">
    <label class="form-label" for="nombre">Nombre Completo</label>
    <input type="text" id="nombre" class="form-control" placeholder="Ingrese su nombre">
    <div class="form-text">Este campo es requerido</div>
</div>

<!-- Input con validación -->
<div class="form-group">
    <label class="form-label" for="email">Email</label>
    <input type="email" id="email" class="form-control is-valid" value="usuario@ejemplo.com">
    <div class="valid-feedback">✓ Email válido</div>
</div>

<!-- Select -->
<div class="form-group">
    <label class="form-label" for="grado">Grado</label>
    <select id="grado" class="form-select">
        <option value="">Seleccionar...</option>
        <option value="1">1ro Primaria</option>
        <option value="2">2do Primaria</option>
    </select>
</div>

<!-- Checkbox -->
<div class="form-check">
    <input type="checkbox" id="terminos" class="form-check-input">
    <label class="form-check-label" for="terminos">
        Acepto los términos y condiciones
    </label>
</div>

<!-- Switch -->
<div class="form-switch">
    <input type="checkbox" id="notificaciones" class="form-switch-input">
    <label for="notificaciones">Activar notificaciones</label>
</div>

<!-- Input con icono -->
<div class="input-group">
    <div class="input-group-prepend">
        <svg>...</svg>
    </div>
    <input type="text" class="form-control" placeholder="Buscar...">
</div>

<!-- File upload -->
<div class="form-file">
    <input type="file" id="archivo" class="form-file-input">
    <label for="archivo" class="form-file-label">
        📁 Seleccionar archivo
    </label>
</div>

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