/**
 * Responsive Scaling CSS - Versión SIMPLE
 * Solo escala todo proporcionalmente sin cambiar diseños
 */

/* Variables CSS para escalado dinámico */
:root {
    --scaling-factor: 1;
    --content-width: 100%;
    --content-height: 100%;
}

/* ESCALADO TEMPRANO - Se aplica desde el HTML head */
html[data-early-scaling] {
    overflow-x: hidden !important;
}

html[data-early-scaling] body {
    transform: scale(var(--scaling-factor)) !important;
    transform-origin: top left !important;
    width: var(--content-width) !important;
    height: var(--content-height) !important;
    overflow: visible !important;
}

/* ✅ CRÍTICO: Cuando hay modales activos, prevenir scroll del body */
html[data-early-scaling] body.modal-active {
    overflow: hidden !important;
}

/* Evitar doble escalado en login */
html[data-early-scaling] .auth-container,
html[data-early-scaling] .login-container,
html[data-early-scaling] .auth-wrapper {
    transform: none !important;
}

/* ESCALADO ESPECÍFICO PARA LOGIN EN LAPTOPS */
/* El login debe escalarse al 80% en laptops 1366x768 */
@media screen and (min-width: 1366px) and (max-width: 1919px) {
    /* Login independiente - usar las variables CSS */
    html[data-early-scaling] body {
        transform: scale(var(--scaling-factor)) !important;
        transform-origin: top left !important;
        width: var(--content-width) !important;
        height: var(--content-height) !important;
        overflow: visible !important;
    }
    
    /* ✅ CRÍTICO: Cuando hay modales activos, prevenir scroll del body */
    html.page-loading[data-early-scaling] body.modal-active {
        overflow: hidden !important;
    }
    
    html.page-loading[data-early-scaling] {
        overflow-x: hidden !important;
    }
}

/* Escalado por JavaScript (fallback) */
body.is-scaled {
    transform: scale(var(--scaling-factor));
    transform-origin: top left;
    width: var(--content-width);
    height: var(--content-height);
    overflow: visible;
    transition: transform 0.3s ease-out;
}

/* ✅ CRÍTICO: Cuando hay modales activos, prevenir scroll del body */
body.is-scaled.modal-active {
    overflow: hidden !important;
}

html:has(body.is-scaled) {
    overflow-x: hidden;
}

/* Elementos que NO deben escalarse */
.no-scale,
.modal-backdrop,
.toast-container {
    transform: none !important;
}

/* CORRECCIÓN ESPECÍFICA PARA EL SIDEBAR */
/* El problema: cuando escalamos el body al 80%, el 100vh del sidebar también se escala */
/* Solución: Compensar el height del sidebar SOLO en laptops 1366x768 */
@media screen and (min-width: 1366px) and (max-width: 1919px) {
    html[data-early-scaling] .sidebar,
    body.is-scaled .sidebar {
        height: calc(100vh / 0.8) !important; /* Compensar el escalado */
        min-height: calc(100vh / 0.8) !important;
    }
    
    /* NOTA: Modales utilizan las mismas reglas CSS que en PC (1920x1080) */
    /* Solo se aplica el escalado 0.8, pero sin reglas CSS específicas */
    /* Esto garantiza el mismo comportamiento de centrado que funciona perfecto en PC */
}