/* ─────────────────────────────────────────────────────────────────────────
   quipu-mobile.css — Shell compartido de las vistas full-screen (Layout=null)
   Plan armonizacion #2 — 2026-06-13

   Primitivas que estaban duplicadas byte-a-byte en las pantallas mobile del
   Cliente y del Chofer (cada una repetia su propio <style> inline). Se cargan
   ACA una sola vez. Cada pagina sigue linkeando este archivo en <head> ANTES
   de su <style> inline, asi que cualquier override propio de la pagina sigue
   ganando por orden de cascada (regla de seguridad del refactor: solo se quito
   de cada pagina lo que era IDENTICO a lo de aca).

   Canonico tomado de Chofer/Historial (la version mas repetida). Las paginas
   con valores distintos (ej. ViajeActivo main:16px, PanelTurno topbar:12px)
   conservan su regla inline y no se tocaron.
   ───────────────────────────────────────────────────────────────────────── */

/* Reset + lienzo base de pantalla full-screen */
html, body {
    margin: 0; padding: 0; min-height: 100%;
    font-family: var(--qr-font-sans);
    background: var(--qr-bg);
    color: var(--qr-ink);
    -webkit-font-smoothing: antialiased;
}

/* Barra superior pegajosa con boton de volver / titulo / accion */
.qr-topbar {
    position: sticky; top: 0; z-index: 10;
    background: var(--qr-bg);
    border-bottom: 1px solid var(--qr-line);
    padding: 14px 16px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.qr-topbar h1 {
    margin: 0;
    font-size: 18px; font-weight: 700; letter-spacing: -0.01em;
}

/* Boton redondo de chrome (volver, toggle dia/noche). El min 44px lo aporta
   quipu-tokens.css (#4); aca va la piel. */
.qr-iconbtn {
    appearance: none;
    border: 1px solid var(--qr-line-2);
    background: var(--qr-surface);
    color: var(--qr-ink);
    width: 40px; height: 40px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; text-decoration: none;
}

/* Contenedor de contenido centrado (ancho de lectura comodo en mobile) */
main {
    padding: 18px 16px 28px;
    max-width: 720px;
    margin: 0 auto;
}
