/* ============================================================
   MÁRGENES DE SEGURIDAD DEL MÓVIL (notch, esquinas redondeadas y
   barra de inicio del iPhone).

   Hace falta porque el viewport de la plataforma lleva
   viewport-fit=cover (ver _PwaHead.cshtml): la página ocupa la
   pantalla ENTERA, incluidos los trozos que el sistema tapa. Sin
   estos márgenes, el menú lateral queda por debajo del notch en
   horizontal y la última fila de cualquier listado queda debajo de
   la barra de inicio.

   DOS DECISIONES QUE CONVIENE NO DESHACER SIN MIRAR:

   1) Los selectores llevan `body` delante a propósito. El CSS de
      cada plantilla vive en un <style> que va DESPUÉS de este
      fichero, así que a igualdad de especificidad ganaría el suyo.
      Con `body` delante (0,1,1 contra 0,1,0) manda este, sin tener
      que ensuciar nada con !important.

   2) Se añade el margen a los contenedores que NO tienen padding
      propio en ninguna plantilla (.pl-sidebar, .pl-main-wrapper,
      .pl-main, .ayto-*), no a las barras y áreas de contenido, que
      sí lo tienen y en forma abreviada (padding: 0 30px). Así el
      margen SUMA en vez de pisar el diseño de cada panel.

   _LayoutPolicia se apaña solo: ya nació con sus propios
   env(safe-area-inset-*) y usa otras clases, así que aquí no le
   toca nada.
   ============================================================ */

/* Menú lateral. En móvil se convierte en un cajón (position: fixed)
   que ocupa el alto entero, así que necesita arriba, abajo e
   izquierda. Todas las plantillas usan box-sizing: border-box, de
   modo que el alto de 100dvh se respeta y lo que encoge es el
   interior, que es justo lo que se quiere. */
body .pl-sidebar,
body .ayto-sidebar {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
}

/* Columna de trabajo (barra superior + contenido). En móvil el menú
   lateral sale del flujo, así que esta columna pasa a ocupar todo el
   ancho: necesita los dos lados, no solo el derecho. */
body .pl-main-wrapper,
body .pl-main,
body .ayto-main {
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* En cuanto el menú lateral vuelve a verse, es él quien tapa el borde
   izquierdo: el margen de la columna sobraría y solo restaría sitio útil. Cada
   plantilla recupera el menú a un ancho distinto (992 px casi todas, 900 px las
   dos que usan .pl-shell), así que cada una levanta el margen en el suyo. Un
   iPhone en horizontal mide ~930 px, justo entre los dos: por eso importa. */
@media (min-width: 993px) {
    body .pl-main-wrapper,
    body .ayto-main {
        padding-left: 0;
    }
}

@media (min-width: 901px) {
    body .pl-main {
        padding-left: 0;
    }
}