/***********************************************************/
/*                                                         */
/* Plataforma e-ducativa - Argentina                       */
/*                                                         */
/* Copyright (c) 2026 de e-ducativa Educación Virtual S.A. */
/*                                                         */
/***********************************************************/
/**
 * Navigation Layout - CSS Grid Base
 * Define el layout principal usando CSS Grid
 */

/* Layout principal con CSS Grid */
.layout {
    display: grid;
    grid-template-rows: var(--topbar-height) 1fr auto;
    grid-template-columns: var(--icon-sidebar-width) 1fr;
    grid-template-areas:
        "topbar topbar"
        "icon-sidebar main-content"
        "footer footer";
    min-height: 100vh;
}

/* Layout cuando no hay sidebar (usuario no logueado) */
.layout:not(:has(.icon-sidebar)) {
    grid-template-columns: 1fr;
    grid-template-areas:
        "topbar"
        "main-content"
        "footer";
}

/* Asignacion de areas del grid */
.topbar {
    grid-area: topbar;
}

.icon-sidebar {
    grid-area: icon-sidebar;
}

.main-content {
    grid-area: main-content;
    min-width: 0;
}

.footer {
    grid-area: footer;
    position: relative;
    z-index: var(--footer-z-index);
}

/* El dropdown del paginador (ul.control) es position:absolute y debe
   superar al footer para no quedar tapado */
.paginador .selector { position: relative; z-index: calc(var(--footer-z-index) + 1); }

/* Layout especifico para backend */
.layout-backend {
    /* El backend usa la misma estructura grid base */
    /* Los estilos especificos estan en navigation_back.css */
}

/* =============================================================================
   COMPATIBILIDAD PAGINAS NO RECODIFICADAS (sin Grid)
   ============================================================================= */

/* Ajustar contenido en paginas que NO usan CSS Grid
   Agregar espacio vertical para la topbar fixed
   y espacio horizontal para el icon-sidebar fixed
   Usar flexbox para que el footer quede al fondo */
body:not(:has(.layout)) {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: var(--topbar-height);
    padding-left: var(--icon-sidebar-width);
    box-sizing: border-box;
}

/* Sin padding-left cuando no hay sidebar (usuario no logueado) */
body:not(:has(.layout)):not(:has(.icon-sidebar)) {
    padding-left: 0;
}

body:not(:has(.layout)) .centrado {
    flex: 1 0 auto;
    width: 100%;
}

/* Footer en paginas no recodificadas - visible sobre sidebar */
body:not(:has(.layout)):has(.icon-sidebar) #footer {
    position: relative;
    z-index: var(--footer-z-index);
    background-color: #fff;
    margin-left: calc(-1 * var(--icon-sidebar-width));
    width: calc(100% + var(--icon-sidebar-width));
}

/* Footer sin sidebar (usuario no logueado) */
body:not(:has(.layout)):not(:has(.icon-sidebar)) #footer {
    position: relative;
    z-index: var(--footer-z-index);
    background-color: #fff;
}

/* =============================================================================
   AREA DE DEBUG
   ============================================================================= */

/* En paginas con layout (grid), el debug debe aparecer por encima de la sidebar */
.debug-area {
    position: relative;
    z-index: 150;
    background: white;
    padding: 10px 0;
}

/* =============================================================================
   RESPONSIVE - MOBILE
   ============================================================================= */

@media (max-width: 960px) {
    /* Quitar padding-left en paginas no recodificadas cuando sidebar esta oculta */
    body:not(:has(.layout)) {
        padding-left: 0;
    }

    /* Resetear compensacion de ancho del footer en mobile (la sidebar no ocupa espacio en el flujo) */
    body:not(:has(.layout)):has(.icon-sidebar) #footer {
        margin-left: 0;
        width: 100%;
    }

    /* En paginas con grid, ajustar el layout para movil */
    .layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "topbar"
            "main-content"
            "footer";
    }

    /* La sidebar esta fuera del flujo (position fixed), no ocupa espacio en el grid */
    .icon-sidebar {
        grid-area: unset;
    }
}

/* =============================================
   Scroll to top button
   ============================================= */
.scroll_top {
    position: fixed;
    right: -100px;
    bottom: 91px;
    padding: 10px;
    color: #757575;
    border: 1px solid rgba(0, 0, 0, .1);
    border-right: none;
    border-radius: 10px 0 0 10px;
    cursor: pointer;
    background-color: rgba(0, 0, 0, .1);
    transition-duration: .2s;
    z-index: 999;
}

.scroll_top.in_proctorizer {
    bottom: 121px;
}

.scroll_top:hover {
    padding-right: 15px;
    color: #6c6c6c;
    background-color: rgba(236, 236, 236, .7);
}

.scroll_top.show {
    right: 0;
}