/* ═══ LA BASE DE PANTALLA DE TODA LA APP Y DE LOS ENLACES QUE SE MANDAN FUERA (24-oct-2026).
   La carga TODA página: `layout.html`, `layout_public.html`, el portal de externos y cada página pública suelta (justo
   detrás de Bootstrap, si lo carga), así que lo que va aquí vale igual dentro de la app que en un enlace que abre un
   tercero (Dani: «faltaría adaptar los enlaces externos que mandamos»). Es lo GENÉRICO del iPhone plegable (sus dos
   pantallas, abrirlo y cerrarlo, la franja de los iconos de Apple); lo propio de la app sigue en `styles.css`.
   Lo comprueba `tools/check_pantallas_plegables.py`. */
/* ═══ HASTA EL BORDE, POR DEBAJO DE LOS ICONOS DE APPLE (24-oct-2026, Dani: «se queda a la derecha una franja vertical en
   la que están los iconos de acciones de Apple flotando, pero nuestra app se corta y no entra ahí; hay otras aplicaciones
   que sí muestran el contenido por debajo de estos botones para aprovechar la pantalla, tanto la frontal como la
   interior»). Sin `viewport-fit=cover` iOS encaja la página en la ZONA SEGURA y deja esa franja vacía. Ahora TODAS las
   páginas llevan `viewport-fit=cover` y el contenido llega hasta el borde (pasa por debajo, como en las demás apps); lo
   que se aparta es solo lo FIJO que hay que poder tocar: la barra de arriba, el menú lateral, los pop-ups, los avisos
   flotantes y las capas a pantalla completa. Todo por estas variables (y no `env()` a secas) para que la comprobación
   pueda SIMULAR la franja poniéndoles un valor. En un ordenador valen 0. */
:root{
  --safe-t:env(safe-area-inset-top, 0px); --safe-r:env(safe-area-inset-right, 0px);
  --safe-b:env(safe-area-inset-bottom, 0px); --safe-l:env(safe-area-inset-left, 0px);
  --safe-x:max(var(--safe-l), var(--safe-r));
}
/* La barra de arriba: su fondo llega al borde y lo de dentro (el logo, el menú) se aparta. */
.navbar > .container-fluid, .navbar > .container{ padding-left:max(.75rem, var(--safe-l)); padding-right:max(.75rem, var(--safe-r)); }
.navbar.sticky-top{ padding-top:calc(var(--bs-navbar-padding-y, .5rem) + var(--safe-t)); }
/* LOS ENLACES QUE SE MANDAN FUERA, A TODO EL ANCHO (24-oct-2026, Dani: «las hojas de ruta externas, las que compartimos,
   se siguen viendo sin ocupar la franja de la derecha en la pantalla exterior»). Bootstrap deja `.container` en una
   columna de 540 px entre 576 y 767 y de 720 hasta 991: en la pantalla de fuera tumbada (678) y en la de dentro (626 y
   890) la página quedaba en medio con dos bandas grises, y la de la derecha es justo la de los iconos de Apple. Por debajo
   de 992 la columna ocupa todo el ancho, como ya hacía por debajo de 576 (por dentro, la app ya va en `container-fluid`). */
@media (max-width:991.98px){
  .container, .container-sm, .container-md{ max-width:none; }
  /* Y la página que se manda fuera con SU columna estrecha (un documento, un formulario, una entrada, la puerta) la marca
     con `pl-ancho`: aquí ocupa todo el ancho. El `!important` gana al `max-width` escrito en la propia etiqueta. */
  .pl-ancho{ max-width:none !important; }
}
/* LA ALTURA QUE SE VE: en el iPhone `100vh` es la pantalla SIN la barra de Safari (la más alta posible), así que un pop-up o
   un panel fijo que mide `100vh` deja sus botones de abajo debajo de la barra. `--vh-visible` es `100dvh` (lo que se ve
   ahora) donde existe y `100vh` donde no; lo usan los pop-ups y paneles FIJOS que miden la ventana. Lo que va en el flujo
   de la página se queda en `vh`: con `dvh` crecería y menguaría al deslizar, cuando Safari esconde su barra. */
:root{ --vh-visible:100vh; }
@supports (height:100dvh){ :root{ --vh-visible:100dvh; } }
/* Los POP-UPS GRANDES aprovechan la pantalla de dentro: Bootstrap deja `modal-lg` y `modal-xl` en 500 px hasta los 992
   (en la pantalla de dentro, casi la mitad vacía). Entre 576 y 991, el lg hasta 800 y el xl todo lo que hay. */
@media (min-width:576px) and (max-width:991.98px){
  .modal-dialog.modal-lg{ --bs-modal-width:min(800px, calc(100vw - 2rem - 2 * var(--safe-x))); --bs-modal-margin:1rem; }
  .modal-dialog.modal-xl{ --bs-modal-width:calc(100vw - 2rem - 2 * var(--safe-x)); --bs-modal-margin:1rem; }
}
/* La pantalla TUMBADA es baja (~420 px útiles por fuera): el pop-up no gasta 3,5 rem en márgenes arriba y abajo. */
@media (max-height:480px){
  .modal{ --bs-modal-margin:.5rem; }
}
/* LOS POP-UPS: el velo de detrás llega al borde, el cuadro no pasa por debajo de la franja. Por debajo de 576 el cuadro
   ocupa el ancho (sus márgenes, más la franja); desde 576 va centrado y nunca más ancho que lo que queda. Uno de pantalla
   completa ocupa todo y aparta lo de dentro (solo donde es de pantalla completa). `:where()` deja la especificidad de
   Bootstrap: un pop-up con su propio ancho (`modal-panes`…) lo sigue mandando él. */
@media (max-width:575.98px){
  .modal-dialog:where(:not([class*="modal-fullscreen"])){ margin-left:calc(var(--bs-modal-margin) + var(--safe-l));
    margin-right:calc(var(--bs-modal-margin) + var(--safe-r)); }
}
@media (min-width:576px){
  .modal-dialog:where(:not([class*="modal-fullscreen"])){ max-width:min(var(--bs-modal-width), calc(100vw - 2rem - 2 * var(--safe-x))); }
}
/* El de PANTALLA COMPLETA: su cabecera y su pie llegan al borde CON SU COLOR y lo de dentro se aparta. Con un borde
   TRANSPARENTE del ancho de la franja (el fondo se pinta debajo del borde): así no se pisa el margen propio de cada uno. */
.modal-fullscreen :is(.modal-header, .modal-body, .modal-footer){ border-left:var(--safe-l) solid transparent; border-right:var(--safe-r) solid transparent; } .modal-fullscreen .modal-header{ border-top:var(--safe-t) solid transparent; } .modal-fullscreen .modal-footer{ border-bottom:var(--safe-b) solid transparent; }
@media (max-width:575.98px){ .modal-fullscreen-sm-down :is(.modal-header, .modal-body, .modal-footer){ border-left:var(--safe-l) solid transparent; border-right:var(--safe-r) solid transparent; } .modal-fullscreen-sm-down .modal-header{ border-top:var(--safe-t) solid transparent; } .modal-fullscreen-sm-down .modal-footer{ border-bottom:var(--safe-b) solid transparent; } }
@media (max-width:767.98px){ .modal-fullscreen-md-down :is(.modal-header, .modal-body, .modal-footer){ border-left:var(--safe-l) solid transparent; border-right:var(--safe-r) solid transparent; } .modal-fullscreen-md-down .modal-header{ border-top:var(--safe-t) solid transparent; } .modal-fullscreen-md-down .modal-footer{ border-bottom:var(--safe-b) solid transparent; } }
@media (max-width:991.98px){ .modal-fullscreen-lg-down :is(.modal-header, .modal-body, .modal-footer){ border-left:var(--safe-l) solid transparent; border-right:var(--safe-r) solid transparent; } .modal-fullscreen-lg-down .modal-header{ border-top:var(--safe-t) solid transparent; } .modal-fullscreen-lg-down .modal-footer{ border-bottom:var(--safe-b) solid transparent; } }
@media (max-width:1199.98px){ .modal-fullscreen-xl-down :is(.modal-header, .modal-body, .modal-footer){ border-left:var(--safe-l) solid transparent; border-right:var(--safe-r) solid transparent; } .modal-fullscreen-xl-down .modal-header{ border-top:var(--safe-t) solid transparent; } .modal-fullscreen-xl-down .modal-footer{ border-bottom:var(--safe-b) solid transparent; } }
@media (max-width:1399.98px){ .modal-fullscreen-xxl-down :is(.modal-header, .modal-body, .modal-footer){ border-left:var(--safe-l) solid transparent; border-right:var(--safe-r) solid transparent; } .modal-fullscreen-xxl-down .modal-header{ border-top:var(--safe-t) solid transparent; } .modal-fullscreen-xxl-down .modal-footer{ border-bottom:var(--safe-b) solid transparent; } }

/* ── EL SELECTOR ES / EN DE LAS PÁGINAS QUE SE MANDAN FUERA (3-nov-2026): la nota de prensa y la comunicación, sus
   adjuntos y sus fotos, los adjuntos de un SMS y el dosier de una oferta. Lo pone `_web_i18n_after_request` donde la
   plantilla lleva `<!--w-lang:…-->` (docs/app/web-ingles.md). Las webs y el One Sheet llevan el suyo en su CSS. ── */
.w-langsw{display:inline-flex;align-items:center;gap:.1em;font-size:.74rem;font-weight:600;letter-spacing:.08em;line-height:1;white-space:nowrap}
.w-langsw a{color:inherit;text-decoration:none;opacity:.5;padding:.45em .32em;border-radius:6px;transition:opacity .2s}
.w-langsw a:hover,.w-langsw a:focus-visible{opacity:1}
.w-langsw a.is-on{opacity:1;text-decoration:underline;text-underline-offset:.34em;text-decoration-thickness:1.5px}
.w-langsw i{font-style:normal;opacity:.3}
.w-langsw--float{position:fixed;top:calc(10px + var(--safe-t,0px));right:calc(12px + var(--safe-r,0px));z-index:1030;background:rgba(17,24,39,.62);color:#fff;border-radius:999px;padding:0 9px;font-size:12px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.w-langsw--float a{opacity:.62;padding:9px 3px}
/* Abajo a la derecha (los enlaces de una actividad: la hoja de ruta tiene arriba el círculo de identificarse). */
.w-langsw--floatb{position:fixed;bottom:calc(14px + var(--safe-b,0px));right:calc(12px + var(--safe-r,0px));z-index:1030;background:rgba(17,24,39,.62);color:#fff;border-radius:999px;padding:0 9px;font-size:12px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.w-langsw--floatb a{opacity:.62;padding:9px 3px}
.w-langsw.w-langsw--bar{margin-right:auto;color:#374151;font-size:12px}
.w-langsw.w-langsw--bar a{background:none;border:0;padding:6px 3px;font-size:12px}
.w-langsw--pd{align-self:center;border:1px solid var(--pd-line,rgba(255,255,255,.2));border-radius:999px;padding:0 .55rem;background:rgba(10,12,24,.55);color:var(--pd-text,#fff);font-size:.72rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.w-langsw--pd a{padding:.62rem .22rem}
.w-langsw-ready{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:2147483000;width:max-content;max-width:calc(100vw - 24px);border:0;border-radius:999px;padding:11px 18px;font:600 13px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;color:#fff;background:rgba(17,24,39,.88);box-shadow:0 10px 30px rgba(0,0,0,.28);cursor:pointer}
@media print{.w-langsw,.w-langsw-ready{display:none!important}}

/* ── SIN FRANJAS ENCIMA DE LA CABECERA (4-nov-2026, Dani: «que en ningún terminal haya esa franja blanca por encima de
   la cabecera»). El hueco de la hora lo reserva iOS (desde 26.1 no se puede pasar por debajo) y lo pinta con
   `theme-color`, el blanco de la cabecera. Lo que sí es nuestro: en la app instalada la página no «rebota» por arriba
   (dejaba otra franja gris encima de la cabecera). ── */
@media (display-mode:standalone), (display-mode:fullscreen){
  html, body{ overscroll-behavior-y:none; }
}
/* En un móvil estrecho (~390) el logo (353 px) no dejaba sitio al botón del menú, que bajaba a otra línea y la cabecera
   ocupaba el doble. El logo encoge lo justo para que todo vaya en una línea. */
@media (max-width:575.98px){
  .navbar .navbar-brand{ margin-right:.5rem; min-width:0; }
  .navbar .navbar-brand img{ height:auto !important; max-height:34px; max-width:calc(100vw - 6.5rem - var(--safe-l) - var(--safe-r)); }
}