/* public/assets/css/style.css 
    VERSION: 3.7 (Auth Isolation - Final Breathing Fix)
    CHANGES:
    - AUTH BREATHING FIX: Se aumenta el padding-top a 120px en body.auth-page. Esto soluciona el "pegado al techo" en Registro e Intro (Imagen 1 y 2).
    - APP STABILITY: Se mantiene intacto el padding de 80px en body:not(.auth-page) para que Servicios, eCMR y Auditoría sigan perfectos.
    - BANNER INTEGRITY: Se mantiene la fijación de los banners internos (top: 56px) para que sigan sellados al logo como rocas.
    - NO SIDE EFFECTS: Cambio quirúrgico aislado solo para las pantallas de bienvenida.
    - INTEGRIDAD: Prohibido reducir líneas. Código completo para sustitución total.
*/

:root {
    --color-primary: #198653; /* Verde Transergo #198653 */
    --color-primary-dark: #146c43;
    --color-text: #212529;
    --color-error: #da2f40;
    --color-bg-light: #ffffff;
}

/* --- REFUERZOS DE ESTABILIDAD MÓVIL (MOTOR DE SCROLL UNIFICADO) --- */
html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    /* Bloqueamos el scroll del body para que mande el contenedor principal */
    overflow: hidden; 
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--color-text);
    background-color: var(--color-bg-light);
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
}

/* --- ESTRUCTURA PRINCIPAL (DUEÑO DEL SCROLL) --- */
#main-content {
    height: 100dvh; 
    display: flex;
    flex-direction: column;
    width: 100%;
    /* Motor de scroll principal fluido */
    overflow-y: auto; 
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* Ajuste para cuando el navbar está presente en páginas internas */
body:not(.auth-page) #main-content {
    padding-top: 80px !important;
    padding-bottom: 120px;
}

/* CIRUGÍA V3.7: Aislamiento total. Subimos a 120px para que Registro e Intro bajen y respiren */
body.auth-page #main-content {
    padding-top: 120px !important;
    padding-bottom: 50px;
}

/* --- FIJACIÓN QUIRÚRGICA DE CABECERAS ("LA ROCA") --- */
/* Cambiamos a FIXED para que no dependa del flujo de scroll y no desaparezca */
#header-slim, #archivosHeader {
    position: fixed !important;
    /* CIRUGÍA V3.5/3.6: Ajustado a 56px para sellar el hueco blanco con el logo superior */
    top: 56px; 
    left: 0;
    width: 100%;
    z-index: 1040;
    background-color: #ffffff;
    border-bottom: 1px solid #eee;
    padding: 10px 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Compensación de espacio: el elemento que va después del banner fijo debe bajar proporcionalmente */
#header-slim + *, #archivosHeader + * {
    margin-top: 50px !important;
}

/* --- TIPOGRAFÍA --- */
h1, h2, h3, h4, h5, .navbar-brand, .offcanvas-title {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700;
    color: var(--color-primary) !important;
}

/* --- COMPONENTES UI --- */

/* Menú Lateral */
.offcanvas-body .nav-link {
    color: #212529 !important;
    font-family: 'Inter', sans-serif;
    padding: 15px 10px;
    display: flex;
    align-items: center;
    gap: 15px;
    border-radius: 8px;
    transition: all 0.2s;
}
.offcanvas-body .nav-link i { font-size: 1.3rem; width: 30px; text-align: center; }
.offcanvas-body .nav-link:hover { 
    color: var(--color-primary) !important; 
    background-color: rgba(25, 134, 83, 0.05);
}

/* Botones Estándar */
.btn-success {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    padding: 12px 20px;
    font-weight: 600;
}

/* --- MODALES MAJESTIC (Soporte para Router.js) --- */
.modal-neutral-majestic {
    background-color: #ffffff !important;
    border-radius: 20px !important;
}

.modal-success-majestic {
    background-color: var(--color-primary) !important;
    border-radius: 20px !important;
}

.text-icon-danger {
    color: var(--color-error);
    font-size: 4rem;
    margin-bottom: 15px;
}

.btn-majestic-white {
    background-color: #ffffff !important;
    color: var(--color-primary) !important;
    font-weight: 700;
    border: none;
    padding: 12px;
}

/* --- ACCIONES CRÍTICAS MOBILE (30% INFERIOR) --- */
.action-container-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(to top, rgba(255,255,255,1) 70%, rgba(255,255,255,0));
    z-index: 1030;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* --- LOGIN & REGISTER BOX (INTACTO PARA AUTH) --- */
#login-container {
    max-width: 450px;
    width: 90%;
    border-radius: 16px;
    background: white;
    padding: 2.5rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    margin: 2rem auto; 
}

.form-control {
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

.form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.25rem rgba(25, 134, 83, 0.1);
}

/* --- ANIMACIONES --- */
@keyframes blink-yellow {
    0% { background-color: #eebb00; box-shadow: 0 0 5px #eebb00; }
    50% { background-color: #ffdd55; box-shadow: 0 0 20px #ffdd55; }
    100% { background-color: #eebb00; box-shadow: 0 0 5px #eebb00; }
}

.parpadeo-amarillo {
    animation: blink-yellow 1s infinite;
    color: #333 !important;
    border-color: #ccaa00 !important;
}

/* --- MODO ALTO CONTRASTE / DARK (Básico) --- */
@media (prefers-color-scheme: dark) {
    .modal-neutral-majestic {
        background-color: #1a1a1a !important;
    }
    .modal-neutral-majestic .text-secondary, 
    .modal-neutral-majestic .text-muted {
        color: #f8f9fa !important;
    }
}