/**
 * ==========================================================================
 * ARCHIVO: styles.css
 * ==========================================================================
 * Estilos personalizados para el formulario de quejas del Comité de Convivencia.
 * 
 * PALETA DE COLORES CORPORATIVOS (Tonos Marrones):
 * - Marrón oscuro principal: #5D4037
 * - Marrón medio: #795548
 * - Marrón claro: #8D6E63
 * - Marrón muy claro (hover): #A1887F
 * - Fondo crema: #F5F3F2
 * - Blanco: #FFFFFF
 * 
 * ESTRUCTURA DEL ARCHIVO:
 * 1. Variables CSS y configuración global
 * 2. Estilos del body y contenedor principal
 * 3. Encabezado del formulario
 * 4. Secciones del formulario
 * 5. Campos de entrada
 * 6. Botones
 * 7. Validaciones y mensajes
 * 8. Responsive design
 * ==========================================================================
 */

/* ==========================================================================
   1. VARIABLES CSS Y CONFIGURACIÓN GLOBAL
   Define las variables de colores y estilos reutilizables
   ========================================================================== */

:root {
    /* Colores principales - Paleta marrón corporativa */
    --color-primary: #5D4037;          /* Marrón oscuro - Color principal */
    --color-primary-light: #795548;    /* Marrón medio - Variante clara */
    --color-primary-lighter: #8D6E63; /* Marrón claro - Hover estados */
    --color-primary-lightest: #A1887F; /* Marrón muy claro */
    
    /* Colores de fondo */
    --color-background: #F5F3F2;       /* Fondo crema muy suave */
    --color-white: #FFFFFF;            /* Blanco puro */
    --color-section-bg: #FFFFFF;       /* Fondo de secciones */
    
    /* Colores de texto */
    --color-text-primary: #3E2723;     /* Texto principal oscuro */
    --color-text-secondary: #5D4037;   /* Texto secundario */
    --color-text-muted: #8D6E63;       /* Texto atenuado */
    
    /* Colores de estado */
    --color-error: #C62828;            /* Rojo para errores */
    --color-success: #2E7D32;          /* Verde para éxito */
    --color-warning: #F57C00;          /* Naranja para advertencias */
    
    /* Sombras */
    --shadow-light: 0 1px 3px rgba(0, 0, 0, 0.12);
    --shadow-medium: 0 2px 6px rgba(0, 0, 0, 0.15);
    --shadow-heavy: 0 4px 12px rgba(0, 0, 0, 0.2);
    
    /* Bordes */
    --border-radius: 8px;
    --border-color: #D7CCC8;
    
    /* Tipografía */
    --font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ==========================================================================
   2. ESTILOS DEL BODY Y CONTENEDOR PRINCIPAL
   Configuración base de la página y contenedor del formulario
   ========================================================================== */

/* Reset y configuración base del body */
body {
    font-family: var(--font-family);
    background-color: var(--color-background);
    color: var(--color-text-primary);
    line-height: 1.6;
    margin: 0;
    padding: 20px;
    min-height: 100vh;
}

/* Contenedor principal del formulario - Estilo Google Forms */
.form-container {
    max-width: 800px;                  /* Ancho máximo del formulario */
    margin: 0 auto;                    /* Centrado horizontal */
    background-color: transparent;
}

/* ==========================================================================
   3. ENCABEZADO DEL FORMULARIO
   Logo, barra de color y título principal
   ========================================================================== */

/* Contenedor del encabezado */
.form-header {
    background-color: var(--color-white);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    box-shadow: var(--shadow-light);
    margin-bottom: 12px;
    overflow: hidden;
}

/* Barra de color superior - Estilo característico de Google Forms */
.header-bar {
    height: 10px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
}

/* Contenedor del contenido del header (logo + título) */
.header-content {
    padding: 24px 30px;
}

/* Fila superior del header (logo + enlace admin) */
.header-top-row {
    display: flex;
    justify-content: space-between;    /* Logo a la izquierda, enlace a la derecha */
    align-items: flex-start;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
}

/* Contenedor del logo */
.logo-container {
    flex-shrink: 0;
}

/* Imagen del logo */
.logo {
    max-width: 120px;
    height: auto;
}

/* Contenedor del enlace de administrador */
.admin-link-container {
    text-align: right;
}

/* Enlace para acceder como administrador */
.admin-link {
    font-size: 0.85rem;
    color: var(--color-primary-light);
    text-decoration: none;
    transition: color 0.3s ease;
}

/* Estado hover del enlace de administrador */
.admin-link:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Título principal del formulario */
.form-title {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--color-primary);
    margin: 0;
    line-height: 1.4;
}

/* ==========================================================================
   4. SECCIONES DEL FORMULARIO
   Cada grupo de campos se agrupa en una sección con fondo blanco
   ========================================================================== */

/* Sección individual del formulario */
.form-section {
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-light);
    padding: 24px 30px;
    margin-bottom: 12px;
    border-left: 4px solid transparent;
    transition: border-color 0.3s ease;
}

/* Efecto hover en las secciones */
.form-section:hover {
    border-left-color: var(--color-primary);
}

/* Título de cada sección */
.section-title {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--color-primary);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

/* Instrucciones de la sección */
.section-instructions {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    margin-bottom: 20px;
    padding: 12px 16px;
    background-color: var(--color-background);
    border-radius: 4px;
    border-left: 3px solid var(--color-primary-light);
}

/* ==========================================================================
   5. CAMPOS DE ENTRADA
   Estilos para inputs, textareas, labels y validaciones
   ========================================================================== */

/* Grupo de campo (label + input + mensajes) */
.form-group {
    margin-bottom: 24px;
}

/* Etiquetas de los campos */
.form-label {
    display: block;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

/* Indicador de campo obligatorio (asterisco rojo) */
.form-label.required::after {
    content: " *";
    color: var(--color-error);
    font-weight: bold;
}

/* Descripción adicional del campo */
.field-description {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-bottom: 10px;
    font-style: italic;
}

/* Estilos base para inputs y textareas */
.form-control {
    width: 100%;
    padding: 12px 16px;
    font-size: 1rem;
    font-family: var(--font-family);
    color: var(--color-text-primary);
    background-color: var(--color-white);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
}

/* Estado focus de los campos */
.form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(93, 64, 55, 0.15);
}

/* Estado de campo con error */
.form-control.is-invalid {
    border-color: var(--color-error);
}

.form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.15);
}

/* Estado de campo válido */
.form-control.is-valid {
    border-color: var(--color-success);
}

/* Campo de fecha de solo lectura */
.fecha-readonly {
    background-color: var(--color-background);
    cursor: not-allowed;
}

/* Textareas - Ajustes específicos */
textarea.form-control {
    resize: vertical;              /* Solo permite redimensionar verticalmente */
    min-height: 100px;
}

/* Selectores - Ajustes específicos */
select.form-control,
.form-select {
    cursor: pointer;
    appearance: none;              /* Quitar estilos nativos del navegador */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235D4037' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;           /* Espacio para el icono de flecha */
}

/* Estado hover del selector */
select.form-control:hover,
.form-select:hover {
    border-color: var(--color-primary-light);
}

/* Opción deshabilitada (placeholder) */
select.form-control option[value=""],
.form-select option[value=""] {
    color: var(--color-text-muted);
}

/* Selector con estado válido */
select.form-control.is-valid,
.form-select.is-valid {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%232E7D32' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

/* Selector con estado inválido */
select.form-control.is-invalid,
.form-select.is-invalid {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23C62828' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

/* ==========================================================================
   SELECT2 - Estilos personalizados
   Integración visual con el tema corporativo
   ========================================================================== */

/* Contenedor principal de Select2 */
.select2-container--bootstrap-5 .select2-selection {
    font-family: var(--font-family);
    font-size: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    min-height: 46px;
    padding: 8px 12px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Estado focus de Select2 */
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(93, 64, 55, 0.15);
}

/* Placeholder de Select2 */
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder {
    color: var(--color-text-muted);
}

/* Texto seleccionado */
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    color: var(--color-text-primary);
    padding-left: 0;
}

/* Flecha del dropdown */
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow {
    height: 100%;
    right: 8px;
}

/* Dropdown de opciones */
.select2-container--bootstrap-5 .select2-dropdown {
    border-color: var(--color-primary-light);
    border-radius: 4px;
    box-shadow: var(--shadow-medium);
}

/* Campo de búsqueda dentro del dropdown */
.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 8px 12px;
    font-family: var(--font-family);
}

.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(93, 64, 55, 0.1);
}

/* Opciones del dropdown */
.select2-container--bootstrap-5 .select2-results__option {
    padding: 10px 12px;
    font-family: var(--font-family);
}

/* Opción resaltada (hover/teclado) */
.select2-container--bootstrap-5 .select2-results__option--highlighted {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* Opción seleccionada */
.select2-container--bootstrap-5 .select2-results__option--selected {
    background-color: var(--color-background);
    color: var(--color-text-primary);
}

/* Botón de limpiar selección */
.select2-container--bootstrap-5 .select2-selection__clear {
    color: var(--color-text-muted);
    font-size: 1.2rem;
    margin-right: 5px;
}

.select2-container--bootstrap-5 .select2-selection__clear:hover {
    color: var(--color-error);
}

/* Estados de validación para Select2 */
.select2-container.is-valid .select2-selection {
    border-color: var(--color-success);
}

.select2-container.is-invalid .select2-selection {
    border-color: var(--color-error);
}

/* Mostrar mensaje de error cuando Select2 es inválido */
.select2-container.is-invalid ~ .invalid-feedback {
    display: block;
}

/* Contador de caracteres */
.char-counter {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    text-align: right;
    margin-top: 4px;
}

/* Texto de disclaimer */
.disclaimer-text {
    display: block;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-top: 8px;
    font-style: italic;
    padding: 8px 12px;
    background-color: #FFF8E1;     /* Fondo amarillo suave para destacar */
    border-radius: 4px;
    border-left: 3px solid var(--color-warning);
}

/* Mensaje de error de validación */
.invalid-feedback {
    display: none;
    font-size: 0.85rem;
    color: var(--color-error);
    margin-top: 4px;
}

/* Mostrar mensaje de error cuando el campo es inválido */
.form-control.is-invalid ~ .invalid-feedback {
    display: block;
}

/* Texto de ayuda */
.form-text {
    font-size: 0.8rem;
    margin-top: 4px;
}

/* ==========================================================================
   6. BOTONES
   Estilos para el botón de envío y sus estados
   ========================================================================== */

/* Sección del botón de envío */
.submit-section {
    text-align: center;
    padding: 30px;
}

/* Contenedor de botones del formulario */
.botones-formulario {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* Botón de guardar borrador */
.btn-borrador {
    padding: 14px 32px;
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-primary);
    background-color: var(--color-white);
    border: 2px solid var(--color-primary);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-light);
}

/* Estado hover del botón borrador */
.btn-borrador:hover {
    background-color: var(--color-background);
    box-shadow: var(--shadow-medium);
    transform: translateY(-2px);
}

/* Estado activo (click) del botón borrador */
.btn-borrador:active {
    transform: translateY(0);
    box-shadow: var(--shadow-light);
}

/* Botón de envío principal */
.btn-submit {
    padding: 14px 48px;
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-white);
    background-color: var(--color-primary);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-medium);
}

/* Estado hover del botón */
.btn-submit:hover:not(:disabled) {
    background-color: var(--color-primary-light);
    box-shadow: var(--shadow-heavy);
    transform: translateY(-2px);
}

/* Estado activo (click) del botón */
.btn-submit:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: var(--shadow-light);
}

/* Estado deshabilitado del botón */
.btn-submit:disabled {
    background-color: #BDBDBD;
    color: #757575;
    cursor: not-allowed;
    box-shadow: none;
}

/* Nota debajo del botón */
.submit-note {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-top: 16px;
    margin-bottom: 0;
}

/* ==========================================================================
   7. VALIDACIONES Y MENSAJES
   Estilos para indicadores de validación
   ========================================================================== */

/* Indicador visual de campo completado */
.form-control.is-valid {
    border-color: var(--color-success);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%232E7D32' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 16px;
    padding-right: 40px;
}

/* No aplicar icono a textareas */
textarea.form-control.is-valid {
    background-image: none;
    padding-right: 16px;
}

/* ==========================================================================
   8. RESPONSIVE DESIGN
   Adaptaciones para diferentes tamaños de pantalla
   ========================================================================== */

/* Tablets y pantallas medianas */
@media (max-width: 768px) {
    body {
        padding: 12px;
    }
    
    .form-title {
        font-size: 1.25rem;
    }
    
    .form-section {
        padding: 20px;
    }
    
    .header-content {
        padding: 20px;
    }
    
    .btn-submit {
        width: 100%;
        padding: 14px 24px;
    }
}

/* Móviles */
@media (max-width: 480px) {
    body {
        padding: 8px;
    }
    
    .form-title {
        font-size: 1.1rem;
    }
    
    .section-title {
        font-size: 1rem;
    }
    
    .form-section {
        padding: 16px;
        border-radius: 4px;
    }
    
    .form-control {
        padding: 10px 12px;
    }
}

/* ==========================================================================
   9. ANIMACIONES Y TRANSICIONES
   Efectos visuales para mejorar la experiencia de usuario
   ========================================================================== */

/* Animación de aparición suave al cargar */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animación de aparición para secciones */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
        max-height: 0;
    }
    to {
        opacity: 1;
        transform: translateY(0);
        max-height: 2000px;
    }
}

/* ==========================================================================
   10. CLASES DE VISIBILIDAD PARA REVELACIÓN PROGRESIVA
   Controla qué secciones se muestran según el progreso del formulario
   ========================================================================== */

/* Sección visible - Mostrada con animación */
.seccion-visible {
    display: block;
    opacity: 1;
    max-height: 2000px;
    overflow: visible;
    animation: slideDown 0.4s ease-out forwards;
    transition: opacity 0.3s ease, max-height 0.4s ease;
}

/* Sección oculta - Escondida completamente */
.seccion-oculta {
    display: none;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
    border: none;
}

/* Animación para el botón cuando se habilita */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(93, 64, 55, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(93, 64, 55, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(93, 64, 55, 0);
    }
}

.btn-submit:not(:disabled) {
    animation: pulse 2s infinite;
}

.btn-submit:hover:not(:disabled) {
    animation: none;
}