/* Estilos propios de areas.html (extraidos del <style> inline). Base global: styles.css */

/* Color de texto base de esta página: se mantiene idéntico al original (#212529). */
body { font-size: 1rem; color: #212529; } 

        .titulo-seccion { font-size: 2.2rem; font-weight: 900; margin-bottom: 30px; padding-bottom: 10px; border-bottom: 6px solid; display: inline-block; }

        .card-area { border: none; border-radius: 20px; background: white; transition: all 0.3s ease; box-shadow: 0 6px 15px rgba(0,0,0,0.06); height: 100%; }
        .card-area:hover { transform: translateY(-8px); box-shadow: 0 15px 30px rgba(0,0,0,0.12) !important; }

        .area-nombre { font-size: 1.4rem; font-weight: 800; text-transform: uppercase; margin-bottom: 10px; }
        .responsable-name { color: #000; font-weight: 700; font-size: 1.15rem; display: block; margin-bottom: 10px; }

        /* ACÁ ESTÁ EL FIX PARA EL CELULAR: word-wrap */
        .info-contacto { font-size: 0.95rem; background: #e9ecef; padding: 12px; border-radius: 10px; margin-bottom: 15px; font-weight: 500; word-wrap: break-word; }

        .sub-titulo-interno { font-size: 1rem; font-weight: 800; color: #495057; margin-top: 20px; text-transform: uppercase; border-left: 4px solid #ced4da; padding-left: 10px; }
        .lista-personal { list-style: none; padding-left: 0; font-size: 1rem; margin-top: 10px; }
        .lista-personal li { padding: 6px 0; border-bottom: 1px solid #f1f3f5; }

        /* REGLAS PARA DESKTOP (PC) - TAMAÑOS REDUCIDOS */
        @media (min-width: 992px) {
            body { font-size: 1.1rem; }
            .titulo-seccion { font-size: 3rem; margin-bottom: 40px; }
            .area-nombre { font-size: 1.5rem; }
            .responsable-name { font-size: 1.25rem; }
            .info-contacto { font-size: 1rem; }
            .sub-titulo-interno { font-size: 1.1rem; }
            .lista-personal { font-size: 1.1rem; }
            .card-area { border-radius: 25px; padding: 1.5rem !important; }
        }

        /* Colores de Gestión */
        .text-verde { color: #198754; border-color: #198754; }
        .text-rojo { color: #dc3545; border-color: #dc3545; }
        .text-azul { color: #0d6efd; border-color: #0d6efd; }
        .border-secretaria { border-top: 12px solid #198754 !important; }
        .border-direccion { border-top: 12px solid #dc3545 !important; }
        .border-coordinacion { border-top: 12px solid #0d6efd !important; }
        .btn-link-area { font-size: 1.1rem; font-weight: 700; text-decoration: none; display: block; margin-top: 20px; text-align: center; padding: 12px; border-radius: 12px; }