/* ==========================================
   ESTILOS BASE Y ESTRUCTURA GLOBAL
   ========================================== */

html, body { 
    margin: 0; 
    padding: 0; 
    background-color: #f4f7f6; 
    font-family: 'Segoe UI', Arial, sans-serif; 
    color: #333; 
    height: 100%; 
    display: flex; 
    flex-direction: column; 
}

/* Contenedor Principal */
.main-content { 
    flex: 1 0 auto; 
    width: 100%; 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 20px; 
    box-sizing: border-box; 
}

/* Área superior fija (Menú y Alertas) */
.top-fixed-area { 
    position: sticky; 
    top: 0; 
    width: 100%; 
    z-index: 99999; 
}

/* Cabecera Principal */
header { 
    padding: 30px 20px; 
    text-align: center; 
    transition: background-color 0.3s ease; 
}

/* Temas Dinámicos de Cabecera */
header.tema-blanco { background: #ffffff; color: #1a1a1a; border-bottom: 1px solid #eee; }
header.bg-azul    { background: #3498db; color: #ffffff; }
header.bg-verde   { background: #2ecc71; color: #ffffff; }
header.bg-rojo    { background: #e74c3c; color: #ffffff; }
header.bg-naranja { background: #e67e22; color: #ffffff; }
header.bg-morado  { background: #9b59b6; color: #ffffff; }

/* Tipografía de Cabecera */
header h1 { margin: 0; font-size: 2rem; }
header p  { margin: 5px 0 0 0; }

/* Separadores */
hr { 
    border: 0; 
    border-top: 1px solid #eee; 
    margin: 30px 0; 
}