/* ==========================================================================
   Escala do totem por resolução (única fonte de verdade do zoom)

   O CSS das telas é todo em px. Em vez de reescrever cada tela, ajustamos o
   `zoom` do <html> pela ALTURA real da viewport, que é o que limita um
   totem/monitor 16:9: zoom ≈ altura / 900, ou seja, o layout enxerga sempre
   algo próximo de 900px de altura "lógica" (cabe o card de 550px + cabeçalho
   com folga) e o texto não encolhe abaixo de ~10px efetivos.

   Faixas (landscape)               zoom   viewport efetiva
   769+ de largura, até 660 de alt.
     1024x600                       0.70   1463x857
   661–800: 1280x720, 1366x768,
     1280x800                       0.85   até 1607x941
   801–1000: 1440x900, 1600x900     1.00   sem escala
   1001–1300: 1920x1080, 1920x1200  1.20   1600x900
   1301–1799: 2560x1440 (DPR 1)     1.60   1600x900
   1800+: 3840x2160 (DPR 1)         2.25   1707x960
   Retrato 1000+ x 1700+: 1080x1920 1.25   864x1536

   Decisões:
   - As media queries de largura enxergam a viewport REAL, não a efetiva.
     Por isso a escala abaixo de 1081px de largura só existe para telas
     muito baixas (<= 800px de altura) e a ampliação só em telas grandes,
     onde o layout tablet/desktop do index2.css continua válido.
   - `vh`/`dvh` dentro de um elemento com zoom encolhem junto: por isso cada
     shell de tela divide por --kiosk-zoom para continuar ocupando a tela.
   - Telas de câmera/reconhecimento facial (face-api) NÃO carregam este
     arquivo: o canvas usa coordenadas reais do vídeo.
   - Requer Chrome 128+ (zoom padronizado); em versões anteriores o
     getBoundingClientRect diverge do visual.
   ========================================================================== */

:root {
    --kiosk-zoom: 1;
}

/* Totem/tablet Android: a escala vem do viewport (partials/_viewport.html);
   o zoom por resolução de desktop se somaria a ela. */
html.is-totem {
    --kiosk-zoom: 1;
}

@media (min-width: 769px) and (orientation: landscape) and (max-height: 660px) {
    :root { --kiosk-zoom: 0.7; }
}

@media (min-width: 769px) and (orientation: landscape) and (min-height: 661px) and (max-height: 800px) {
    :root { --kiosk-zoom: 0.85; }
}

@media (min-width: 1081px) and (orientation: landscape) and (min-height: 1001px) and (max-height: 1300px) {
    :root { --kiosk-zoom: 1.2; }
}

@media (min-width: 2200px) and (orientation: landscape) and (min-height: 1301px) and (max-height: 1799px) {
    :root { --kiosk-zoom: 1.6; }
}

@media (min-width: 3200px) and (orientation: landscape) and (min-height: 1800px) {
    :root { --kiosk-zoom: 2.25; }
}

/* Totem em pé (1080x1920): amplia para o toque ficar confortável */
@media (min-width: 1000px) and (orientation: portrait) and (min-height: 1700px) {
    :root { --kiosk-zoom: 1.25; }
}

/* Em retrato o conteúdo ficava colado no topo, com 60% da tela vazia */
@media (min-width: 1000px) and (orientation: portrait) and (min-height: 1700px) {
    .index3-layout.content,
    .index1-layout.content {
        align-self: center;
        margin-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

@media (min-width: 769px) {
    html {
        zoom: var(--kiosk-zoom);
    }

    /* O fundo em gradiente é pintado no tamanho do <html>: sem altura mínima
       ele repete e aparece uma faixa na metade da tela. O :not(#...) sobe a
       especificidade para vencer `body.<classe-da-tela>`. */
    html,
    body:not(#kiosk-scale) {
        min-height: calc(100vh / var(--kiosk-zoom));
        min-height: calc(100dvh / var(--kiosk-zoom));
    }

    /* Shells de cada tela: compensam o zoom para preencher a viewport */
    .index3-shell,
    .kiosk-shell,
    .carteira-shell,
    .prenatal-shell,
    .phone-shell,
    .token-shell,
    .assinatura-shell,
    .cadastro-shell,
    .leitor-shell,
    .login-shell,
    .result-shell,
    .verification-shell,
    .add-convenio-shell,
    .risc-page-container {
        min-height: calc(100vh / var(--kiosk-zoom));
        min-height: calc(100dvh / var(--kiosk-zoom));
    }

    .add-convenio-shell {
        width: calc(100vw / var(--kiosk-zoom));
    }

    .add-convenio-layout {
        min-height: calc(100vh / var(--kiosk-zoom) - 110px);
    }

    .result-page {
        min-height: calc(100vh / var(--kiosk-zoom) - 16px);
    }

    /* Gaveta da agenda fixa na lateral */
    .index3-agenda.is-collapsed {
        height: calc(100vh / var(--kiosk-zoom));
        height: calc(100dvh / var(--kiosk-zoom));
    }
}