/*
 * A TV que ainda não foi autorizada.
 *
 * Lida a três, quatro metros: tudo em proporção da tela (vw/vh), com piso para
 * não sumir num monitor pequeno. Uma cor de destaque só — o azul do clube —,
 * e o QR num cartão branco, porque câmera de celular lê melhor preto no
 * branco do que qualquer combinação bonita.
 */
:root {
    --dispositivo-fundo: #eef2f7;
    --dispositivo-cartao: #ffffff;
    --dispositivo-tinta: #14213d;
    --dispositivo-suave: #51607a;
    --dispositivo-linha: #d3dbe6;
    --dispositivo-acento: #1d4e89;
    --dispositivo-ok: #1f7a4d;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body.dispositivo-conectar {
    background: var(--dispositivo-fundo);
    color: var(--dispositivo-tinta);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.dispositivo-conectar__quadro {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
    gap: 6vw;
    min-height: 100vh;
    padding: 6vh 7vw;
}

.dispositivo-conectar__texto {
    display: flex;
    flex-direction: column;
    gap: 2.2vh;
}

.dispositivo-conectar__marca {
    display: flex;
    align-items: center;
    gap: 1vw;
    color: var(--dispositivo-suave);
    font-size: clamp(13px, 1.2vw, 20px);
    font-weight: 600;
}

.dispositivo-conectar__marca img {
    height: clamp(32px, 4.2vh, 56px);
    width: auto;
}

/* O nome da tela como num quadro de embarque: caixa alta, espaçado. */
.dispositivo-conectar__tela {
    margin: 2vh 0 0;
    color: var(--dispositivo-acento);
    font-size: clamp(14px, 1.3vw, 22px);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.dispositivo-conectar h1 {
    margin: 0;
    font-size: clamp(28px, 3.6vw, 64px);
    line-height: 1.08;
    font-weight: 750;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.dispositivo-conectar__passos {
    margin: 1vh 0 0;
    padding: 0;
    list-style: none;
    counter-reset: passo;
    display: flex;
    flex-direction: column;
    gap: 1.4vh;
    font-size: clamp(17px, 1.7vw, 30px);
    line-height: 1.3;
}

.dispositivo-conectar__passos li {
    counter-increment: passo;
    display: flex;
    align-items: baseline;
    gap: 0.8em;
}

.dispositivo-conectar__passos li::before {
    content: counter(passo);
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 1.6em;
    height: 1.6em;
    border-radius: 50%;
    background: var(--dispositivo-acento);
    color: #fff;
    font-size: 0.8em;
    font-weight: 700;
    transform: translateY(-0.1em);
}

.dispositivo-conectar__alternativa {
    margin: 2vh 0 0;
    color: var(--dispositivo-suave);
    font-size: clamp(15px, 1.35vw, 24px);
}

.dispositivo-conectar__alternativa strong {
    color: var(--dispositivo-tinta);
}

.dispositivo-conectar__codigo {
    margin: 0;
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
    font-size: clamp(40px, 6vw, 112px);
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.dispositivo-conectar__prazo {
    margin: 0;
    color: var(--dispositivo-suave);
    font-size: clamp(14px, 1.2vw, 21px);
}

.dispositivo-conectar__estado {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    margin: 1vh 0 0;
    color: var(--dispositivo-suave);
    font-size: clamp(14px, 1.2vw, 21px);
    font-weight: 600;
}

.dispositivo-conectar__estado.is-ok {
    color: var(--dispositivo-ok);
}

.dispositivo-conectar__pulso {
    width: 0.7em;
    height: 0.7em;
    border-radius: 50%;
    background: var(--dispositivo-acento);
    animation: dispositivo-pulso 1.6s ease-in-out infinite;
}

.is-ok .dispositivo-conectar__pulso {
    background: var(--dispositivo-ok);
    animation: none;
}

@keyframes dispositivo-pulso {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.8); }
}

@media (prefers-reduced-motion: reduce) {
    .dispositivo-conectar__pulso {
        animation: none;
    }
}

.dispositivo-conectar__qr {
    justify-self: center;
    margin: 0;
    padding: 3vh;
    background: var(--dispositivo-cartao);
    border: 1px solid var(--dispositivo-linha);
    border-radius: 28px;
    box-shadow: 0 20px 50px -24px rgba(20, 33, 61, 0.35);
}

.dispositivo-conectar__qr svg {
    display: block;
    width: min(56vh, 34vw);
    height: auto;
}

/* Aberta num celular por engano: uma coluna. */
@media (max-width: 760px) {
    .dispositivo-conectar__quadro {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 28px 22px;
    }

    .dispositivo-conectar__qr svg {
        width: min(72vw, 320px);
    }
}

/* A tela sem QR (escala não aberta): uma coluna só, na largura de leitura. */
.dispositivo-conectar__quadro--unico {
    grid-template-columns: minmax(0, 1fr);
    max-width: 1100px;
}