/* Fyna en el móvil: se comporta como una app instalada.
   - En pantallas de menos de 960 px el documento no se mueve: solo se desplaza el contenido (<main>), con la barra
     superior y la inferior siempre en su sitio, sin rebote ni arrastre de la página entera.
   - Respeta las zonas seguras (notch, barra de gestos) en vertical y en horizontal.
   - Los campos miden 16 px en pantallas táctiles para que iOS no haga zoom al enfocarlos.
   Se carga el último, por eso no hace falta tocar app.css. */

: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);
  --gutter-l: max(16px, var(--safe-l));
  --gutter-r: max(16px, var(--safe-r));
}

html { -webkit-tap-highlight-color: transparent; }

/* Sin zoom por doble toque. En la app instalada tampoco por pellizco; el desplazamiento sigue igual. */
html { touch-action: manipulation; }
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
  html { touch-action: pan-x pan-y; }
}

/* Lo que es interfaz (no texto de datos) no se selecciona ni abre el menú de pulsación larga. */
.tabbar, .topbar, .fab, .btn, .icon-btn, .tab, .brand, .nav a {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
img, svg { -webkit-user-drag: none; }

/* Pantallas táctiles: campos de 16 px (evita el zoom de iOS al enfocar) y objetivos de toque de 44 px */
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px; }
  .im-row select { font-size: 16px; min-height: 44px; }
  .icon-btn { width: 44px; height: 44px; }
  .tx-actions .icon-btn { width: 40px; height: 40px; }
  .btn-sm { min-height: 40px; }
}

/* Respuesta al toque: lo pulsado se nota al instante (el :hover no existe en táctil) */
@media (hover: none) {
  .btn:active:not([disabled]) { filter: brightness(0.92); }
  .icon-btn:active { background: var(--input-bg); color: var(--text); }
  .list-item:active, .acc-tile:active, .cat-opt:active { background: var(--input-bg); }
  .acc-tile:hover { transform: none; }
}

/* ===== Móvil y tablet: la app ocupa la pantalla y solo se desplaza el contenido ===== */
@media (max-width: 959.98px) {
  html, body { overscroll-behavior-y: none; }
  html:has(.shell), html:has(.shell) body {
    height: 100%; min-height: 0; overflow: hidden; overscroll-behavior: none;
  }
  /* Las manchas de color difuminadas fijas pesan en la GPU del móvil; el fondo ya lleva sus degradados. */
  body::before, body::after { display: none; }

  .shell { height: 100vh; height: 100dvh; min-height: 0; }
  .content {
    height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior: none;
    -webkit-overflow-scrolling: touch; scroll-padding-top: 72px;
    padding: 0 var(--gutter-r) 0 var(--gutter-l);
  }
  /* El hueco bajo la barra inferior es un separador y no un padding: con padding, los elementos "sticky" que se
     pegan abajo (p. ej. «Siguiente» en los asistentes) se pegarían más arriba de lo debido. */
  .content::after { content: ''; display: block; height: calc(104px + var(--safe-b)); }
  .shell.no-tabbar .content::after { height: calc(32px + var(--safe-b)); }

  /* Barra superior fija arriba: la marca, ocultar importes, tema y perfil siempre a mano */
  .topbar {
    position: sticky; top: 0; z-index: 25; min-height: 58px;
    margin: 0 calc(-1 * var(--gutter-r)) 14px calc(-1 * var(--gutter-l));
    padding: calc(8px + var(--safe-t)) var(--gutter-r) 8px var(--gutter-l);
    background: var(--glass); border-bottom: 1px solid var(--line);
    -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  }

  /* Barra inferior: respeta el notch en horizontal, deja de ser un pegote al girar y marca la pestaña activa */
  .tabbar {
    left: max(10px, var(--safe-l)); right: max(10px, var(--safe-r)); bottom: calc(8px + var(--safe-b));
    height: 64px;
  }
  .tabbar { background: var(--surface); background: color-mix(in srgb, var(--surface) 92%, transparent); }
  .tab { min-height: 52px; align-content: center; padding-left: 2px; padding-right: 2px; transition: background 0.15s, color 0.15s, transform 0.12s; }
  .tab.active { background: rgba(139, 92, 246, 0.18); }
  .tab:active { transform: scale(0.94); }
  .fab { right: max(18px, var(--safe-r)); bottom: calc(84px + var(--safe-b)); }
  .toasts { bottom: calc(88px + var(--safe-b)); }
  .toasts { padding-left: max(16px, var(--safe-l)); padding-right: max(16px, var(--safe-r)); }

  /* Hojas inferiores: nunca más altas que la pantalla visible y con aire para el gesto del sistema */
  .modal { max-height: calc(100vh - 12px); max-height: calc(100dvh - 12px - var(--safe-t)); }
  .modal-head { padding-left: max(24px, var(--safe-l)); padding-right: max(20px, var(--safe-r)); }
  .modal-body { padding-left: max(24px, var(--safe-l)); padding-right: max(24px, var(--safe-r)); }
  .modal-foot {
    margin-left: calc(-1 * max(24px, var(--safe-l))); margin-right: calc(-1 * max(24px, var(--safe-r)));
    padding-left: max(24px, var(--safe-l)); padding-right: max(24px, var(--safe-r));
  }
}

/* Teléfonos: etiquetas de la barra inferior que no se tocan y cabeceras más compactas (la lista empieza antes) */
@media (max-width: 440px) {
  .tab { font-size: 10.5px; letter-spacing: -0.015em; }
}
@media (max-width: 380px) {
  .tab { font-size: 10px; letter-spacing: -0.02em; }
}
@media (max-width: 350px) {
  .tabbar { left: max(6px, var(--safe-l)); right: max(6px, var(--safe-r)); padding-left: 2px; padding-right: 2px; }
  .tab { font-size: 9.5px; letter-spacing: -0.035em; padding-left: 0; padding-right: 0; }
}
@media (max-width: 560px) {
  .head-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
  .head-actions > .btn { width: 100%; padding: 0 10px; }
  .head-actions > .btn-primary { grid-column: 1 / -1; order: -1; }
  .toolbar-end { gap: 8px; }
  .toolbar-end > .btn { flex: 1 1 0; min-width: max-content; height: 42px; padding: 0 12px; font-size: 14px; }
}

/* Teléfono girado: la barra inferior baja de tamaño para dejar sitio al contenido */
@media (max-width: 959.98px) and (orientation: landscape) and (max-height: 500px) {
  .topbar { position: static; }
  .tabbar { height: 54px; bottom: calc(6px + var(--safe-b)); }
  .tab { min-height: 44px; padding: 4px 0; font-size: 10.5px; }
  .tab .icon { width: 20px; height: 20px; }
  .content::after { height: calc(76px + var(--safe-b)); }
  .fab { bottom: calc(70px + var(--safe-b)); width: 50px; height: 50px; }
  .toasts { bottom: calc(70px + var(--safe-b)); }
}

/* Pantallas de acceso: altura real del móvil (con la barra del navegador a la vista) y sin saltos al abrir el teclado */
@supports (height: 100dvh) {
  .auth, .auth-panel { min-height: 100dvh; }
}