/* Shell layout — top nav (desktop+mobile), bottom nav (mobile), main */

/* El atributo hidden SIEMPRE oculta. El del navegador es la regla más débil:
   cualquier `display` de una clase le gana, y un botón con hidden quedaba
   visible y vacío (la Torre mostraba "Cancelar · [vacío] · Confirmar" porque
   .torre-btn-sm pone display:inline-flex). Pasaba en varios modales y ya
   había ~20 parches sueltos `.x[hidden] { display:none }`. Para mostrar algo
   se le quita el hidden (el.hidden = false), no se le pone un display. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  line-height: var(--line-height-base);
  /* border-box: el relleno inferior que reserva sitio a la barra de abajo (48px en el celular)
     cuenta DENTRO del alto mínimo. Sin esto toda página medía pantalla + 48px y se deslizaba
     aunque el contenido cupiera. dvh: el alto visible de verdad cuando el navegador muestra u
     oculta su barra. */
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  /* Bloquea pull-to-refresh nativo (Chrome Android) en toda la PWA. La regla
     condicional `:has(dialog[open])` de modal.css llegaba tarde cuando el
     swipe-down empezaba en el mismo frame que el dialog se montaba. `contain`
     no basta — solo `none` impide la recarga al deslizar en tope sin scroll. */
  overscroll-behavior-y: none;
}

/* Barras de desplazamiento invisibles en TODA la app (pedido del dueño, 2026-09-21). Se sigue
   deslizando con el dedo, la rueda o el trackpad; solo no se dibuja la barra. */
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* Los controles NO heredan la fuente por defecto: un <button> sin clase salía en la fuente del
   sistema y a 13,33 px, fuera de la tipografía y de la escala de la app. */
button, input, select, textarea { font-family: inherit; }
button { font-size: var(--fs-13); }

#view {
  box-sizing: border-box;
  padding: var(--space-md);
  /* Altura mínima = viewport - topnav. En desktop alcanza. En móvil
     hay que restar también el bottom nav (48px + safe-area) para que
     vistas con min-height:100% (Torre, Finanzas) no generen scroll
     fantasma que hace ver la nav "más abajo". border-box hace que el
     padding de #view se cuente dentro del min-height (sin esto sumaba
     32px extra y .torre-view tapaba el nav inferior). */
  min-height: calc(100vh - var(--topnav-height));
  max-width: 1400px;
  margin: 0 auto;
}
/* Apartados que van a ancho completo (Administración y Configuración). La
   clase la pone applyShellMode() en app.js según el prefijo de la ruta; acá
   vive el efecto para que valga tanto en los shells con pestañas como en las
   rutas sueltas de cada apartado. */
body.vista-ancha #view {
  max-width: none;
  padding: 0;
}

@media (max-width: 900px) {
  #view {
    min-height: calc(100vh - var(--topnav-height) - 48px - env(safe-area-inset-bottom, 0));
  }
}

/* View transitions (progressive enhancement) */
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: var(--transition-med);
}