/**
 * ============================================================================
 * STYLESHEET: contactanos.css - Formulario de Contacto HyO
 * ============================================================================
 * Objetivo: Estilos específicos para página contacto (form + FAQ)
 * Complejidad: O(s × d) donde s = selectores específicos, d = elementos form
 * 
 * Justificación:
 *   - Separación de concerns: styles contacto independientes de index.css
 *   - Form validation visual con :invalid/:valid pseudo-classes
 *   - Responsive design mobile-first
 * 
 * Alternativas descartadas:
 *   - Merger con index.css: Viola single responsibility principle
 *   - Inline styles: Dificulta mantenimiento y cacheo
 * ============================================================================
 */


/* ============================================================================
   COMPONENTE: Contenedor Formulario
   Objetivo: Card centered con background neutro
   Comportamiento: Max-width 450px (imagen referencia), auto margin centrado
   ============================================================================ */
#contactanos {
    margin: 50px auto;
    padding: 30px;
    max-width: 450px;  /* Ajustado desde 600px a 450px (imagen referencia) */
    text-align: center;
    background-color: #f9f9f9;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

#contactanos h2 {
    margin-bottom: 25px;
    font-size: 1.8rem;
    font-weight: 700;
    color: #333;
}


/* ============================================================================
   COMPONENTE: Labels
   Objetivo: Etiquetas de formulario consistentes
   Comportamiento: Display block, font-weight medium
   ============================================================================ */
#contactanos label {
    display: block;
    margin-top: 15px;
    margin-bottom: 5px;
    text-align: left;
    font-weight: 500;
    color: #555;
}


/* ============================================================================
   COMPONENTE: Inputs y Textareas
   Objetivo: Campos de formulario con validación visual
   Comportamiento: Border change en :focus/:valid/:invalid
   Complejidad: O(1) por input, navegador maneja pseudo-classes
   ============================================================================ */
#contactanos input,
#contactanos select,
#contactanos textarea {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 15px;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    font-family: 'Roboto', sans-serif;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Focus state */
#contactanos input:focus,
#contactanos select:focus,
#contactanos textarea:focus {
    border-color: #AFDC06;
    box-shadow: 0 0 0 3px rgba(175, 220, 6, 0.2);
    outline: none;
}

/* Invalid state (HTML5 validation) */
#contactanos input:invalid:not(:focus),
#contactanos select:invalid:not(:focus),
#contactanos textarea:invalid:not(:focus) {
    border-color: #dc3545;
}

/* Valid state */
#contactanos input:valid,
#contactanos select:valid,
#contactanos textarea:valid {
    border-color: #28a745;
}


/* ============================================================================
   COMPONENTE: Textarea específico
   Objetivo: Altura mínima para mensajes largos
   Comportamiento: Resize vertical only
   ============================================================================ */
#contactanos textarea {
    min-height: 120px;
    resize: vertical;  /* Solo resize vertical (UX mejor) */
}


/* ============================================================================
   COMPONENTE: Botón Submit
   Objetivo: CTA principal con branding corporativo
   Comportamiento: Hover scale + background transition
   Complejidad: O(1) transformación CSS
   ============================================================================ */
#contactanos button[type="submit"] {
    width: 100%;
    padding: 14px 20px;
    margin-top: 20px;
    background-color: #AFDC06;
    color: #2a2828;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

#contactanos button[type="submit"]:hover {
    background-color: #98c805;
    transform: translateY(-2px);  /* Lift effect */
    box-shadow: 0 6px 16px rgba(175, 220, 6, 0.3);
}

#contactanos button[type="submit"]:active {
    transform: translateY(0);  /* Press effect */
}

#contactanos button[type="submit"]:disabled {
    background-color: #ccc;
    cursor: not-allowed;
    transform: none;
}


/* ============================================================================
   COMPONENTE: Mensaje de Respuesta (#msg)
   Objetivo: Feedback visual después de submit
   Comportamiento: Color dinámico con JavaScript (verde/rojo)
   ============================================================================ */
#msg {
    margin-top: 15px;
    padding: 10px;
    font-weight: 600;
    border-radius: 6px;
    text-align: center;
    display: none;  /* Hidden por default, mostrado por JS */
}

#msg.success {
    color: #155724;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
}

#msg.error {
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
}


/* ============================================================================
   COMPONENTE: Placeholder Styles
   Objetivo: Placeholders sutiles, no distractivos
   Complejidad: O(1) por input con placeholder
   ============================================================================ */
#contactanos input::placeholder,
#contactanos textarea::placeholder,
#contactanos select::placeholder {
    color: #999;
    opacity: 0.7;
}


/* ============================================================================
   MEDIA QUERIES: Mobile (≤768px)
   Objetivo: Reducir paddings, ajustar fuentes
   Comportamiento: Touch-friendly tap targets (min 44px altura)
   ============================================================================ */
@media (max-width: 768px) {
    #contactanos {
        margin: 30px 15px;
        padding: 20px 15px;
        max-width: 100%;
    }
    
    #contactanos h2 {
        font-size: 1.5rem;
        margin-bottom: 20px;
    }
    
    #contactanos input,
    #contactanos select,
    #contactanos textarea {
        padding: 12px 12px;  /* Mantener min 44px tap target */
        font-size: 0.95rem;
    }
    
    #contactanos button[type="submit"] {
        padding: 14px 16px;  /* Mantener min 44px altura */
        font-size: 1rem;
    }
}


/* ============================================================================
   MEDIA QUERIES: Small Mobile (≤480px)
   Objetivo: Ajustes finales para móviles pequeños
   ============================================================================ */
@media (max-width: 480px) {
    #contactanos {
        margin: 20px 10px;
        padding: 15px 10px;
        border-radius: 8px;
    }
    
    #contactanos h2 {
        font-size: 1.3rem;
    }
    
    #contactanos label {
        font-size: 0.9rem;
    }
    
    #contactanos input,
    #contactanos select,
    #contactanos textarea {
        font-size: 0.9rem;
        padding: 10px;
    }
    
    #contactanos button[type="submit"] {
        font-size: 0.95rem;
    }
}


/* ============================================================================
   COMPONENTE: Select Custom Arrow (opcional)
   Objetivo: Consistencia visual del dropdown
   Comportamiento: Custom arrow icon
   ============================================================================ */
#contactanos select {
    appearance: none;  /* Remove default arrow */
    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='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    padding-right: 35px;  /* Espacio para arrow */
}


/* ============================================================================
   FIN DEL ARCHIVO contactanos.css
   Total líneas: ~240 (vs ~80 original)
   Expansión: Documentación élite + estados interactivos completos
   Mejoras: :valid/:invalid states, touch-friendly mobile, custom select arrow
   ============================================================================ */