/*
 * Móvil de verdad. Spec 040.
 *
 * Estas cuatro reglas son lo que hace que el sistema se pueda usar de pie, con
 * una mano y en el teléfono que traiga el guardia.
 *
 * ── Por qué un archivo y no el <style> del <head> ───────────────────────────
 *
 * Porque hay DOS <head> en este sistema: el común de `includes/header.php` y el
 * propio de `login.php`, que declara su paleta aparte y no pasa por él. Ponerlo
 * en los dos sería el mismo CSS escrito dos veces, que es el principio 4 roto
 * en el sitio donde más barato es evitarlo. La ruta es absoluta y funciona
 * porque cada sistema es la raíz de su subdominio, igual que el favicon.
 *
 * ── La altura ───────────────────────────────────────────────────────────────
 *
 * `100vh` en iOS es el viewport GRANDE: el que habría si la barra del navegador
 * no estuviera. Con la barra puesta, un elemento fijo mide más que lo visible y
 * su pie queda fuera de pantalla, sin scroll que lo rescate. Así es como un
 * guardia se quedó sin poder cerrar sesión en un iPhone 12 Pro Max, encontrado
 * a ojo en producción el 2026-09-08.
 *
 * Las dos declaraciones van en este orden a propósito: un navegador que no
 * entienda `dvh` se queda con la primera y no empeora respecto a hoy; uno que
 * sí, la pisa. Esa degradación es lo que hace innecesario detectar capacidades.
 *
 * NO se usa `h-dvh` de Tailwind: el bundle que sirve cdn.tailwindcss.com no
 * contiene `dvh`, así que la clase no existiría y quedaría sin efecto EN
 * SILENCIO, que es la peor forma de fallar.
 *
 * ── Las áreas seguras ───────────────────────────────────────────────────────
 *
 * En un iPhone con notch y barra inferior, lo que se pega a un borde queda
 * debajo del hardware. `env()` solo devuelve algo distinto de cero si el
 * viewport declara `viewport-fit=cover`, y por eso eso tiene su propio guardián:
 * sin él, estas dos reglas parecerían puestas sin hacer absolutamente nada.
 */

.alto-pantalla     { height: 100vh; height: 100dvh; }
.min-alto-pantalla { min-height: 100vh; min-height: 100dvh; }
.seguro-abajo      { padding-bottom: env(safe-area-inset-bottom, 0px); }
.seguro-arriba     { padding-top: env(safe-area-inset-top, 0px); }

/*
 * El espejo de la cámara frontal. Spec 058, copiado de vigilancia (spec 041).
 *
 * Solo en la vista en vivo: uno se encuadra mejor viéndose como en un espejo.
 * La foto tomada se enseña y se guarda SIN reflejar, y no hace falta nada más
 * para eso: un transform de CSS no afecta a drawImage(), que lee el fotograma
 * del video y no cómo se pinta. Mismo nombre que en vigilancia, para que quien
 * conoce una demo lo reconozca en la otra.
 */
.espejo { transform: scaleX(-1); }
