/* Cobrada: fuentes propias y armado de la página. Los componentes están en cobros.css. */

/* Alojadas en el servidor: la política de seguridad de la app solo deja cargar recursos propios.
   Licencias en fuentes/OFL-*.txt. */
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("fuentes/atkinson-hyperlegible-next.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fuentes/barlow-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fuentes/barlow-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fuentes/barlow-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fuentes/barlow-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root { color-scheme: light dark; }
/* Tema elegido en Configuración (tema.js lo pone antes de pintar). Sin elegir, sigue al del sistema. */
:root[data-tema="claro"], :root[data-tema="claro"] .app { color-scheme: light; }
:root[data-tema="oscuro"], :root[data-tema="oscuro"] .app { color-scheme: dark; }
html, body { margin: 0; }
body { background: light-dark(#EDF0F4, #0E1522); }
/* La región que anuncia cambios al lector de pantalla no ocupa lugar ni agranda la página. */
#vivo { position: fixed; top: 0; left: 0; margin: 0; }

/* Celular y tablet: la página entera se desplaza; en una tablet el contenido no pasa de 600 px. */
.app[data-forma="telefono"] { min-height: 100dvh; }
.app[data-forma="telefono"] :is(.barra, .pantalla) { width: 100%; max-width: 600px; margin-inline: auto; }
.app[data-forma="telefono"] :is(.pestanas, .franja) { width: min(600px, 100% - 32px); margin-inline: auto; }

/* Mostrador (desde 1024 px): la app ocupa la ventana y cada panel se desplaza solo. */
.app[data-forma="escritorio"] { height: 100dvh; }

.app[data-pantalla="entrar"] { display: flex; flex-direction: column; height: auto; min-height: 100dvh; }
.app[data-forma="escritorio"] .entrar { width: 100%; max-width: 440px; margin: 0 auto; }

/* Configuración en el mostrador: una columna centrada que se desplaza sola. */
.app[data-forma="escritorio"] .ajustes { min-height: 0; overflow-y: auto; padding: var(--e-6) var(--e-6) var(--e-7); }
/* flex-shrink: 0: la columna tiene alto fijo y se desplaza; sin esto, una lista (overflow: hidden) se achica y recorta. */
.app[data-forma="escritorio"] .ajustes > * { width: 100%; max-width: 640px; margin-inline: auto; flex-shrink: 0; }

/* La confirmación de cancelar queda fija a la ventana: abajo en el celular, al centro en el mostrador. */
.app .velo, .app .hoja { position: fixed; }
.app[data-forma="telefono"] .hoja { max-width: 600px; margin-inline: auto; }
.app[data-forma="escritorio"] .hoja {
  left: 50%; right: auto; bottom: 50%; width: min(480px, calc(100% - 48px));
  transform: translate(-50%, 50%); border-radius: var(--r-cubo);
}

button.fila-enlace { width: 100%; border: 0; background: none; font: inherit; color: var(--tinta); font-weight: 700; text-align: left; cursor: pointer; }
.hoja .error { margin: 0; }