/* Bloque 17 — Móvil y app instalada (PWA): la página no se encoge ni se
   amplía sola y nada queda tapado arriba (notch, isla dinámica, barra de
   estado) ni abajo (barra de inicio, barra de pestañas, «+», avisos).
   Reglas generales; se carga la última para mandar sobre los bloques.
   Las safe areas valen 0 en escritorio: allí nada cambia. */

:root{
  --sa-t:env(safe-area-inset-top, 0px);
  --sa-b:env(safe-area-inset-bottom, 0px);
  --sa-l:env(safe-area-inset-left, 0px);
  --sa-r:env(safe-area-inset-right, 0px);
  /* alto de lo que hay fijo abajo en móvil (0 en escritorio) */
  --barra-movil:0px;
}

/* ---------- 1. La página no se encoge ---------- */
/* iOS agranda el texto al girar el móvil si no se le dice lo contrario. */
html{-webkit-text-size-adjust:100%; text-size-adjust:100%;}
/* Red de seguridad: si algo se sale por un lado, se recorta en vez de
   ensanchar la página (lo que hace que el navegador o la app instalada la
   «encojan»). clip no crea contenedor de scroll: position:sticky sigue igual. */
@supports (overflow:clip){
  html, body{overflow-x:clip;}
}
img, video, canvas{max-width:100%;}

/* iOS amplía la página al tocar un campo con letra < 16 px y no la devuelve
   a su tamaño: en pantallas táctiles y en móvil los campos van a 16 px. */
@media (pointer:coarse), (max-width:700px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=button]):not([type=submit]):not([type=reset]):not([type=image]),
  select, textarea, [contenteditable=""], [contenteditable="true"]{font-size:max(16px, 1em) !important;}
}

/* Ajustes → Usuarios: en móvil la fila pasa a dos columnas que pueden
   encogerse (bloque4.css fijaba siete columnas también en móvil). */
@media (max-width:760px){
  .usuario-row, .usuario-row.usuario-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .usuario-row > *{min-width:0;}
  .usuario-row .u-inm-f{flex-wrap:wrap;}
  .usuario-row .u-inm-f input{min-width:0; flex:1 1 120px;}
  /* el selector de rol ocupa la fila entera y sus opciones pueden encogerse */
  .usuario-row > :has(> .b8-seg), .solicitud-row > :has(> .b8-seg){grid-column:1 / -1;}
  .b8-seg{min-width:0;}
  .b8-seg-op{min-width:0; overflow:hidden; text-overflow:ellipsis;}
}
@media (max-width:360px){ .b8-seg-op{padding-inline:9px;} }

/* ---------- 2. Barra de estado (app instalada con notch) ---------- */
/* Lo que se desplaza por debajo de la barra de estado no se ve a través de ella. */
html::before{
  content:""; position:fixed; z-index:33; left:0; right:0; top:0; height:var(--sa-t);
  background:var(--bg); pointer-events:none;
}

/* ---------- 3. Laterales (móvil en horizontal con notch) ---------- */
body{padding-left:max(20px, var(--sa-l)); padding-right:max(20px, var(--sa-r));}
.fab{right:calc(24px + var(--sa-r)); bottom:calc(24px + var(--sa-b));}
.ir-arriba{right:calc(30px + var(--sa-r)); bottom:calc(96px + var(--sa-b));}
.toast-stack{bottom:calc(24px + var(--sa-b));}

/* ---------- 4. Paneles, hojas y ventanas: dentro de la zona segura ---------- */
.overlay .panel{
  padding-top:calc(24px + var(--sa-t));
  padding-bottom:calc(22px + var(--sa-b));
  padding-right:calc(22px + var(--sa-r));
}
/* el pie pegajoso de Tareas ya suma la barra de inicio y llega al borde: sin
   relleno debajo (si no, el contenido asoma por debajo del pie) */
.overlay #formTarea.panel{padding-bottom:0;}
.chat-panel{padding-top:var(--sa-t); padding-right:var(--sa-r);}
.overlay.b9-overlay{padding:calc(16px + var(--sa-t)) calc(16px + var(--sa-r)) calc(16px + var(--sa-b)) calc(16px + var(--sa-l));}
.b9-dlg{max-height:calc(100dvh - 32px - var(--sa-t) - var(--sa-b));}
.overlay.buscador{padding-top:calc(10vh + var(--sa-t));}
/* Portada (acceso): botón de tema y tarjeta fuera del notch y de la barra de inicio */
.auth-gate{padding:calc(64px + var(--sa-t)) calc(16px + var(--sa-r)) calc(32px + var(--sa-b)) calc(16px + var(--sa-l));}
.auth-gate .tema-btn-gate{top:calc(16px + var(--sa-t)); right:calc(16px + var(--sa-r));}
.celebracion{padding:calc(16px + var(--sa-t)) calc(16px + var(--sa-r)) calc(16px + var(--sa-b)) calc(16px + var(--sa-l));}
.celebracion-card{max-height:calc(100dvh - 32px - var(--sa-t) - var(--sa-b));}

@media (max-width:700px){
  :root{--barra-movil:calc(var(--nav-bar-h) + var(--sa-b));}
  body{padding-left:max(14px, var(--sa-l)); padding-right:max(14px, var(--sa-r));}
  .nav-main{padding-left:max(4px, var(--sa-l)); padding-right:max(4px, var(--sa-r));}
  /* El «+» centrado encima de la barra y «Volver arriba» a su derecha */
  .fab{right:0; bottom:calc(var(--barra-movil) + 14px);}
  .ir-arriba{right:calc(16px + var(--sa-r)); bottom:calc(var(--barra-movil) + 20px);}
  /* Los avisos salen por encima del «+»: no tapan la barra ni los botones de guardar */
  .toast-stack{bottom:calc(var(--barra-movil) + 84px);}
  /* Búsqueda: caja dentro de la zona segura */
  .overlay.buscador{padding:calc(8px + var(--sa-t)) calc(8px + var(--sa-r)) calc(8px + var(--sa-b)) calc(8px + var(--sa-l));}
  .buscador-caja{max-height:calc(100dvh - 16px - var(--sa-t) - var(--sa-b));}
}
@media (max-width:600px){
  /* hoja inferior: empieza debajo de la barra de estado */
  .overlay .panel{
    margin-top:calc(12px + var(--sa-t)); height:calc(100% - 12px - var(--sa-t));
    padding-top:24px;
  }
}
@media (max-width:560px){
  .overlay.b9-overlay{padding:var(--sa-t) 0 0;}
  .b9-dlg, .b9-dlg.b9-dlg-ancho{max-height:calc(100dvh - 12px - var(--sa-t));}
  /* la hoja entera deja libre la barra de inicio (tenga pie o no) */
  .b9-dlg{padding-bottom:var(--sa-b);}
  .b9-dlg-pie{padding-bottom:14px;}
}
@media (max-width:520px){
  .b4-ip{max-height:82dvh;}
}

/* ---------- 5. Teclado abierto (app.js: html.teclado, --vv-alto, --vv-arriba) ---------- */
/* Con el teclado fuera, las capas ocupan solo lo que se ve: el botón de
   guardar y el campo del chat quedan encima del teclado. La barra de
   pestañas, el «+» y «Volver arriba» se apartan mientras se escribe. */
@media (max-width:700px){
  html.teclado .nav-main, html.teclado .fab, html.teclado .ir-arriba, html.teclado .pwa-banner{visibility:hidden;}
  html.teclado .overlay{top:var(--vv-arriba, 0px); bottom:auto; height:var(--vv-alto, 100%);}
  html.teclado .chat-panel{height:100%;}
  html.teclado .overlay .panel{padding-bottom:22px;}
  html.teclado .overlay #formTarea.panel{padding-bottom:0;}
  html.teclado .chat-form, html.teclado .chat-hoja-pie{padding-bottom:10px;}
  html.teclado .b9-dlg{padding-bottom:0;}
  html.teclado .toast-stack{bottom:calc(var(--vv-oculto, 0px) + 12px);}
}

/* ---------- 6. Móvil en horizontal (poca altura): cabecera compacta ---------- */
@media (max-height:500px) and (orientation:landscape){
  /* el menú del «+» en dos columnas para que quepa de alto */
  .fab-menu{display:grid; grid-template-columns:repeat(2, auto); justify-content:end;}
  .wrap{padding-top:12px;}
  .masthead{gap:6px 16px; padding-bottom:10px; margin-bottom:10px; align-items:center;}
  .masthead h1{font-size:1.35rem;}
  .masthead .lema{display:none;}
  .logo-chip img{height:34px;}
  .auth-gate{padding-top:calc(56px + var(--sa-t));}
  .overlay .panel{padding-top:calc(14px + var(--sa-t));}
}