/*
 * 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/tema.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 previsualización. Spec 041.
 *
 * Se pone en el <video> solo cuando la cámara es frontal, y decidido con el modo
 * que la cámara DEVUELVE, no con el que se pidió: un teléfono sin cámara trasera
 * cae a la frontal y también hay que reflejarlo.
 *
 * Y esto es todo lo que hace falta para que la foto guardada NO salga reflejada:
 * un transform de CSS no afecta a `ctx.drawImage()`, que lee el fotograma del
 * elemento de vídeo y no su representación en pantalla. Así el guardia se ve
 * como en un espejo para encuadrarse, y la evidencia se guarda como la ve el
 * mundo: si detrás hay un rótulo o el número de una caseta, se lee.
 */
.espejo { transform: scaleX(-1); }
