/* Accesibilidad y celular: contrastes, tamaños de toque, textos legibles, paneles táctiles (D-232) */

/* ---------- Toques de 44 px en pantallas táctiles ---------- */
/* Con el dedo, todo lo que se toca mide al menos 44 × 44. Donde el botón chico es parte del diseño (íconos sueltos,
   cerrar, letras del índice, flechas), se agranda sólo el área que recibe el toque con un ::after invisible que
   desborda el botón; lo que se ve queda igual. Donde sobra lugar (el paso de cantidades, la barra del panel), crece. */
@media (pointer: coarse) {
  /* Sin peso (:where): si algún botón ya está posicionado (la X de los avisos, el engranaje), manda su regla. */
  :where(.btn-icono, .btn-chico, .fc-cerrar, .letra, .pl-pestana) { position: relative; }
  :is(.btn-icono, .btn-chico, .campana, .aviso-cerrar, .fc-cerrar, .letra, .desliza-flecha, .pm-engranaje, .pl-pestana)::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px);
    transform: translate(-50%, -50%); border-radius: inherit;
  }
  .btn-chico { min-height: 38px; }
  .paso button { width: 44px; height: 44px; }
  .pl-cab .btn { min-height: 44px; min-width: 44px; }
  .pl-pestana { padding-block: .5rem; }
  .desliza-flecha { width: 40px; height: 40px; margin-top: -20px; }
}

/* ---------- Formularios ---------- */
/* El campo con error se ve (no sólo se anuncia): borde y halo en rojo hasta que se lo corrige. */
:is(input, select, textarea)[aria-invalid="true"] { border-color: var(--peligro); }
:is(input, select, textarea)[aria-invalid="true"]:focus { border-color: var(--peligro); box-shadow: 0 0 0 4px var(--peligro-suave); }

/* ---------- Al cambiar de sección ---------- */
/* El foco va al título de la sección para que el lector de pantalla la anuncie; no hace falta el anillo ahí. */
#vista h1[tabindex="-1"]:focus, #vista:focus { outline: none; }

/* ---------- Ingreso: Recordarme en este celular ---------- */
.ingreso .recordarme { margin: .2rem 0 1rem; }
.ingreso .recordarme > span { display: grid; gap: .15rem; }
.ingreso .recordarme small { margin: 0; font-weight: 400; }

/* ---------- Alto de pantalla real en el celular ---------- */
/* 100vh en el celular incluye la barra del navegador que se esconde: dvh es lo que se ve. Con vh de respaldo. */
.app { min-height: 100vh; min-height: 100dvh; }
/* La barra del costado empieza debajo de la barra superior: su alto es la pantalla menos esa barra (si no, "Todo" queda abajo, fuera de la vista). */
.lateral { height: calc(100vh - var(--alto-barra, 0px)); height: calc(100dvh - var(--alto-barra, 0px)); }
.ingreso { min-height: 100vh; min-height: 100dvh; }
dialog { max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); }
@media (max-height: 760px) and (min-width: 641px) { dialog { max-height: calc(100vh - 1rem); max-height: calc(100dvh - 1rem); } }

/* ---------- Desplazar hasta algo sin dejarlo bajo la barra de arriba ---------- */
html { scroll-padding-top: 1rem; }
@media (max-width: 640px) {
  html { scroll-padding-top: calc(4.5rem + env(safe-area-inset-top)); scroll-padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
}

/* ---------- Zonas seguras (notch) con el celular acostado ---------- */
@media (min-width: 641px) and (pointer: coarse) and (orientation: landscape) {
  .lateral { padding-left: max(.8rem, env(safe-area-inset-left)); }
  main { padding-right: max(1.5rem, env(safe-area-inset-right)); }
}

/* ---------- Avisos (toasts) en el celular ---------- */
/* Por encima de la barra de abajo y de la zona del gesto de inicio; con el teclado abierto, arriba, donde se ven. */
.toasts { right: max(1.25rem, env(safe-area-inset-right)); bottom: max(1.25rem, env(safe-area-inset-bottom)); }
@media (max-width: 640px) {
  .toasts { left: max(.75rem, env(safe-area-inset-left)); right: max(.75rem, env(safe-area-inset-right)); width: auto;
    bottom: calc(1rem + env(safe-area-inset-bottom)); }
  html.en-app .toasts { bottom: calc(5rem + env(safe-area-inset-bottom)); }
  html.con-teclado .toasts { top: max(.75rem, env(safe-area-inset-top)); bottom: auto; }
}

/* ---------- Panel de detalle como hoja en el celular ---------- */
/* Alto según lo que queda a la vista (el teclado del iPhone la tapa: se apoya encima), lugar para la zona del gesto de
   inicio y la hoja sigue al dedo cuando se la baja desde la manija o la cabecera (lib/panel-lateral.js). */
@media (max-width: 720px) {
  .panel-lateral { bottom: var(--teclado, 0px); height: min(92dvh, calc(var(--alto-visible, 100dvh) - .75rem));
    padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .panel-lateral.visible { transform: translateY(var(--pl-arrastre, 0px)); }
  .panel-lateral.arrastrando { transition: none; }
  .panel-lateral::before { pointer-events: none; }
  .pl-cab { touch-action: none; }
  .pl-cuerpo { padding-bottom: calc(1.6rem + env(safe-area-inset-bottom)); }
}

/* ---------- Página Sin conexión (sin-conexion.html, la abre el service worker) ---------- */
.sin-conexion-pagina { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 2rem max(1rem, env(safe-area-inset-right)) 2rem max(1rem, env(safe-area-inset-left)); }
.sc-tarjeta { width: min(420px, 100%); display: grid; justify-items: center; gap: .6rem; text-align: center; padding: 2.2rem 1.8rem 1.8rem;
  border-radius: var(--r-xl); background: var(--superficie); box-shadow: var(--sombra-3); position: relative; overflow: hidden; }
.sc-tarjeta::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--cinta); }
.sc-logo { width: 72px; height: 72px; margin-bottom: .4rem; }
.sc-tarjeta h1 { font-size: 1.6rem; }
.sc-tarjeta p { color: var(--texto-2); margin: 0; }
.sc-tarjeta .sc-auto { color: var(--texto-3); font-size: .94rem; margin-bottom: .8rem; }