/* ==========================================================================
   panel-lateral.css
   Comportamiento del panel lateral y de la barra vertical, COMPARTIDO por
   todas las páginas del aplicativo (índice, ficha de mapa, Atlas, Proyectos,
   Recursos y Créditos). Se carga después de barra.css y panel.css, que son
   las hojas globales que definen el panel, y por eso puede corregirlas sin
   tocarlas (el sitio antiguo sigue viéndose igual).

   Motivo (reporte BNC, 2026-09-11): «la barra izquierda tapa el botón de
   anterior mapa y ocupa casi 1/3 de la pantalla». En otro correo se decía que
   en los equipos de la Biblioteca se veía bien. Las dos cosas eran ciertas:
   el panel tiene ancho FIJO (320px) y el contenido de la ficha arranca en
   120px, así que proporción y solape dependen de la resolución y del zoom.
   Medido en la página real, con el panel abierto y sin esta hoja:

       1920 -> panel 17%, sin solape          1280 -> panel 25%, tapa 112px
       1440 -> panel 22%, tapa  33px          1024 -> panel 31%, tapa 240px

   Con el zoom del navegador al 150% sobre 1920, el viewport se comporta como
   1280: de ahí que el problema apareciera y desapareciera «solo».

   En el XD el panel ocupa el 23% del ancho, y ese es el valor de referencia.
   ========================================================================== */

:root {
    /* Proporcional pero acotado: ni minúsculo en pantallas pequeñas ni
       desproporcionado en grandes. El tope de 320px es importante: la
       posición de cierre del panel son -320px fijos en las hojas globales,
       así que cualquier ancho menor o igual garantiza que al cerrarse quede
       completamente fuera de la pantalla. */
    --mp-panel: clamp(240px, 23vw, 320px);
}

/* --- Transversal: mismo ancho de panel en todas las páginas -------------- */

body .side-panel,
body .menu-panel {
    width: var(--mp-panel) !important;
}

/* La barra vertical queda pegada al borde derecho del panel abierto, en los
   dos modos: ficha de mapa (info-panel-open) y menú de secciones
   (menu-panel-open). Las hojas globales la fijan en «left: 320px». */
body.info-panel-open .vertical-bar,
body.menu-panel-open .vertical-bar {
    left: var(--mp-panel) !important;
}

/* --- Iconos de la barra: todos del mismo tamaño -------------------------- */

/* En el XD los cuatro iconos de la barra son del mismo tamaño. En producción
   barra.css los pone a 32px salvo los de #btn-menu (menú y cerrar), que se
   quedan en 24px: de ahí que se vean desiguales. Se igualan a 32px, que es
   el valor de los otros tres y la proporción del XD (icono ≈ 0,45 del ancho
   de la barra). */
body .vertical-bar img,
body .vertical-bar #btn-menu img {
    width: 32px !important;
    height: 32px !important;
}

/* --- Solo donde hay panel de ficha (mapa.aspx) --------------------------- */

@media (min-width: 701px) {

    /* Aquí está la garantía de que «Anterior mapa» no puede taparse: el
       contenido arranca después del panel y de la barra. Es por construcción,
       no por ajuste, así que deja de depender de la resolución y del zoom.
       Los 120px son el padding izquierdo original de .map-card-view
       (mapa.css), que ya reservaba el ancho de la barra más su margen. */
    body.info-panel-open .map-card-view {
        padding-left: calc(var(--mp-panel) + 120px) !important;
        box-sizing: border-box;
    }
}

/* --- Móvil: la barra pasa a horizontal abajo y el panel se superpone ----- */

@media (max-width: 700px) {

    :root {
        --mp-panel: min(86vw, 320px);
    }

    /* Corrección real: sin esto, al abrir el menú en un móvil las hojas
       globales desplazan la barra inferior a «left: 320px», es decir fuera de
       la pantalla, y aparece barra de desplazamiento horizontal. */
    body.info-panel-open .vertical-bar,
    body.menu-panel-open .vertical-bar {
        left: 0 !important;
    }
}