/* OC-06 fase 3 · app clienti VERA: via la cornice del telefono e tutto ciò che serviva solo alla prova. */
html, body { height: 100%; background: var(--bg); }
body { overscroll-behavior: none; }
.stage { display: block; min-height: 100%; padding: 0; }
.side, .mobile-var, .card-panel, #mobileVar, #cardPanelM { display: none !important; }
.phone { width: 100%; max-width: 520px; height: 100vh; height: 100dvh; margin: 0 auto; padding: 0; border-radius: 0; background: var(--bg); box-shadow: none; zoom: 1 !important; }
.phone::before { display: none; }
.screen { border-radius: 0; }
.statusbar { display: none !important; }
.vsw, .demo, .esm { display: none !important; }        /* tasti delle versioni, suggerimenti e «esempio» della prova */
.scroll { padding-top: env(safe-area-inset-top); }
.tabbar2 { bottom: calc(12px + env(safe-area-inset-bottom)); }
.cartbar { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }

/* pezzi nuovi dell'app vera (stessi colori e forme della prova) */
.ocIn { width: 100%; height: 52px; border: 1px solid var(--border); border-radius: 14px; padding: 0 14px; font-size: 17px; background: #fff; color: var(--text); }
.ocIn:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.ocLab { display: block; font-weight: 500; margin: 14px 0 6px; }
.ocErr { color: #B42318; margin-top: 10px; min-height: 20px; }
.ocNota { color: var(--muted); margin-top: 10px; font-size: 13px; line-height: 18px; }
.ocCod { position: relative; }
.ocCod input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; }
.ocVuoto { text-align: center; padding: 28px 8px; color: var(--muted); }
.ocVuoto b { display: block; color: var(--text); font-size: 17px; margin-bottom: 6px; }
.ocStato { font-weight: 700; font-size: 13px; }
.ocStato.ok { color: var(--success); }
.ocStato.in { color: var(--warning); }
.ocStato.no { color: var(--muted); }
.ocCarica { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--muted); }
