/* =============================================================================
   Quiz Geely — estilos do tablet (modo quiosque)

   Direção visual, a partir da identidade Geely:
   - Azul da marca ("borderless blue") nos painéis onde vive o logótipo branco;
     branco limpo onde se lê e responde. Estilo plano, quase sem contornos.
   - Saira, uma sans quadrada e mecânica como o lettering GEELY; o eixo de largura
     (font-stretch) dá aos títulos o ar alargado do logótipo.
   - Elemento marcante: a "bateria" de 10 células, irmã dos painéis do emblema.
     Mede o tempo de cada pergunta e esgota-se — liga o jogo ao universo elétrico
     da marca (e à pergunta sobre autonomia).
   Toda a paleta está nas variáveis abaixo: para afinar com o manual de marca,
   basta mudar os valores aqui.
   ========================================================================== */

@font-face {
    font-family: 'Saira';
    src: url('fonts/saira-latin-wdth-normal.woff2') format('woff2-variations'),
         url('fonts/saira-latin-wdth-normal.woff2') format('woff2');
    font-weight: 100 900;
    font-stretch: 50% 125%;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Paleta */
    --azul:          #0B3B8C;  /* azul da marca: painéis, botões sobre fundo claro */
    --azul-escuro:   #082C69;  /* estado premido / células apagadas */
    --ceu:           #79C6EF;  /* azul-céu histórico da Geely: carga da bateria e ação principal sobre azul */
    --branco:        #FFFFFF;
    --nevoa:         #F2F4F7;  /* superfícies sobre branco (opções, campos) */
    --nevoa-premida: #E3E8EF;
    --tinta:         #0F1B2D;  /* texto sobre fundo claro */
    --grafite:       #5A666E;  /* cinzento do logótipo Geely: texto secundário */
    --linha:         #C9D1DA;
    --alerta:        #FFB547;  /* últimos segundos */
    --certo:         #13804F;
    --certo-claro:   #DDF2E7;
    --certo-sobre-azul:  #8BE3B5;
    --errado:        #C4372E;
    --errado-sobre-azul: #FFB4A6;

    /* Tipografia e espaço */
    --fonte: 'Saira', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --margem: clamp(1.5rem, 4.5vw, 4rem);
    --raio: 12px;
}

/* -----------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    background: var(--azul);
}

body {
    margin: 0;
    min-height: 100dvh;
    font-family: var(--fonte);
    font-size: 1.125rem;
    line-height: 1.5;
    color: var(--tinta);
    background: var(--azul);
    /* Quiosque: sem realce azul ao tocar, sem zoom por duplo toque, sem "puxar" a página. */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    overscroll-behavior: none;
    -webkit-user-select: none;
    user-select: none;
}

/* O ecrã do formulário é branco: o fundo da página acompanha, para não aparecer azul ao fazer scroll. */
body[data-ecra="dados"] { background: var(--branco); }

input { -webkit-user-select: text; user-select: text; }
button { font: inherit; color: inherit; }
img { max-width: 100%; }
p { margin: 0; }

[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--ceu); outline-offset: 3px; }
.ecra--dados :focus-visible,
.painel--branco :focus-visible { outline-color: var(--azul); }
[tabindex="-1"]:focus { outline: none; }

.so-leitor {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* -----------------------------------------------------------------------------
   Estrutura dos ecrãs
   -------------------------------------------------------------------------- */

.ecra { min-height: 100dvh; }

/* Margens que respeitam o "notch" e as barras do sistema em ecrã inteiro. */
.ecra--inicio,
.ecra--aviso,
.painel {
    padding:
        max(var(--margem), env(safe-area-inset-top))
        max(var(--margem), env(safe-area-inset-right))
        max(var(--margem), env(safe-area-inset-bottom))
        max(var(--margem), env(safe-area-inset-left));
}

.ecra--dividido {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}

.painel { display: flex; flex-direction: column; }
.painel--azul   { background: var(--azul); color: var(--branco); }
.painel--branco { background: var(--branco); color: var(--tinta); }

/* Tablet ao alto ou ecrã estreito: os painéis empilham. */
@media (orientation: portrait), (max-width: 860px) {
    .ecra--dividido { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
}

/* -----------------------------------------------------------------------------
   Marca
   -------------------------------------------------------------------------- */

.marca {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    flex-wrap: wrap;
}

.marca__logo {
    display: block;
    height: clamp(1.75rem, 2.6vw, 2.375rem);
    width: auto;
}

.marca__evento {
    font-size: 1rem;
    font-weight: 500;
    color: rgb(255 255 255 / .78);
}

/* -----------------------------------------------------------------------------
   Tipografia
   -------------------------------------------------------------------------- */

.chamada {
    margin: 0;
    max-width: 11ch;
    font-size: clamp(3rem, 7.5vw, 6rem);
    font-weight: 800;
    font-stretch: 125%;
    line-height: .95;
    letter-spacing: -.01em;
    text-wrap: balance;
}

.descricao {
    max-width: 34ch;
    font-size: clamp(1.25rem, 2.2vw, 1.625rem);
    line-height: 1.35;
    color: rgb(255 255 255 / .86);
}

.titulo {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    font-stretch: 118%;
    line-height: 1.05;
    color: var(--azul);
    text-wrap: balance;
}

/* -----------------------------------------------------------------------------
   Botões
   -------------------------------------------------------------------------- */

.botao {
    appearance: none;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 4.5rem;
    padding: 0 2.75rem;
    border-radius: 999px;
    font-size: 1.375rem;
    font-weight: 700;
    font-stretch: 112%;
    transition: transform .12s ease, background-color .2s ease;
}
.botao:active { transform: scale(.97); }
.botao:disabled { opacity: .6; cursor: progress; transform: none; }

/* Sobre azul: azul-céu com texto azul. Sobre branco: azul com texto branco. */
.botao--principal { background: var(--ceu); color: var(--azul); }
.botao--escuro    { background: var(--azul); color: var(--branco); }
.botao--escuro:active { background: var(--azul-escuro); }

.botao-texto {
    appearance: none;
    background: none;
    border: 0;
    cursor: pointer;
    min-height: 44px;
    padding: .5rem .25rem;
    font-size: 1.0625rem;
    font-weight: 600;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: .22em;
}

/* -----------------------------------------------------------------------------
   Bateria (o temporizador)
   -------------------------------------------------------------------------- */

.bateria {
    display: flex;
    align-items: center;
    width: min(100%, 23rem);
}

.bateria__corpo {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 5px;
    height: 3.25rem;
    padding: 6px;
    border: 2px solid rgb(121 198 239 / .55);
    border-radius: 14px;
}

.bateria__polo {
    width: 7px;
    height: 1.25rem; /* em % não funcionaria: o contentor não tem altura definida */
    margin-left: 4px;
    border-radius: 0 4px 4px 0;
    background: rgb(121 198 239 / .55);
}

.bateria__celula {
    border-radius: 4px;
    background: var(--azul-escuro);
    transition: background-color .25s ease;
}
/* Cantos exteriores mais redondos, como os painéis do emblema Geely. */
.bateria__celula:first-child { border-radius: 8px 4px 4px 8px; }
.bateria__celula:last-child  { border-radius: 4px 8px 8px 4px; }

.bateria__celula--acesa { background: var(--ceu); }

.bateria--baixa .bateria__corpo { border-color: var(--alerta); }
.bateria--baixa .bateria__polo  { background: var(--alerta); }
.bateria--baixa .bateria__celula--acesa { background: var(--alerta); }

.bateria--grande { width: min(100%, 30rem); }
.bateria--grande .bateria__corpo { height: 4.25rem; gap: 7px; padding: 8px; border-radius: 18px; }
.bateria--grande .bateria__polo  { width: 9px; height: 1.625rem; }

@media (prefers-reduced-motion: no-preference) {
    /* Últimos segundos: as células restantes pulsam, para se notar sem ler o número. */
    .bateria--baixa .bateria__celula--acesa { animation: pulsar .9s ease-in-out infinite; }

    /* Ecrã inicial: a bateria está cheia e um impulso de carga percorre-a da esquerda para a direita.
       É o único movimento que não responde a um toque, pensado para chamar a atenção de quem passa. */
    .bateria--carregar .bateria__celula { animation: carregar 3.2s ease-in-out infinite; }
    .bateria--carregar .bateria__celula:nth-child(2)  { animation-delay: .09s; }
    .bateria--carregar .bateria__celula:nth-child(3)  { animation-delay: .18s; }
    .bateria--carregar .bateria__celula:nth-child(4)  { animation-delay: .27s; }
    .bateria--carregar .bateria__celula:nth-child(5)  { animation-delay: .36s; }
    .bateria--carregar .bateria__celula:nth-child(6)  { animation-delay: .45s; }
    .bateria--carregar .bateria__celula:nth-child(7)  { animation-delay: .54s; }
    .bateria--carregar .bateria__celula:nth-child(8)  { animation-delay: .63s; }
    .bateria--carregar .bateria__celula:nth-child(9)  { animation-delay: .72s; }
    .bateria--carregar .bateria__celula:nth-child(10) { animation-delay: .81s; }
}

@keyframes pulsar  { 50% { background: #FFE2A8; } }
@keyframes carregar {
    0%, 16%, 100% { background: var(--ceu); }
    8%            { background: #E4F5FE; }
}

/* -----------------------------------------------------------------------------
   Ecrã 1 — início
   -------------------------------------------------------------------------- */

.ecra--inicio {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 2rem;
    background: var(--azul);
    color: var(--branco);
}

.inicio__conteudo {
    align-self: center;
    display: grid;
    gap: clamp(1.25rem, 3vh, 2rem);
}

.inicio__carga {
    display: flex;
    align-items: center;
    gap: 1.25rem 1.75rem;
    flex-wrap: wrap;
    margin-top: clamp(.5rem, 2vh, 1.5rem);
}

.inicio__regras {
    font-size: 1.1875rem;
    font-weight: 500;
    color: rgb(255 255 255 / .86);
}

.inicio__rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    flex-wrap: wrap;
}

/* Fotografia opcional (assets/img/inicio.jpg): divide o ecrã inicial em texto + imagem. */
.ecra--inicio.ecra--com-foto {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    column-gap: var(--margem);
}
.ecra--com-foto > .marca,
.ecra--com-foto > .inicio__conteudo,
.ecra--com-foto > .inicio__rodape { grid-column: 1; }
.inicio__foto {
    grid-column: 2;
    grid-row: 1 / -1;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    border-radius: var(--raio);
}
@media (orientation: portrait), (max-width: 860px) {
    .ecra--inicio.ecra--com-foto { grid-template-columns: 1fr; }
    .inicio__foto { display: none; }
}

/* Indicador discreto para a promotora (participações guardadas sem rede). */
.pendentes {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .9375rem;
    font-weight: 500;
    color: rgb(255 255 255 / .78);
}
.pendentes::before {
    content: '';
    width: .625rem;
    height: .625rem;
    border-radius: 50%;
    background: var(--alerta);
}

/* -----------------------------------------------------------------------------
   Ecrã 2 — questão
   -------------------------------------------------------------------------- */

.questao__info { gap: clamp(1.5rem, 4vh, 2.5rem); }

.numero-questao {
    font-size: 1.125rem;
    font-weight: 600;
    color: rgb(255 255 255 / .78);
    font-variant-numeric: tabular-nums;
}

.pergunta {
    margin: auto 0; /* centra a pergunta na altura livre do painel */
    max-width: 24ch;
    font-size: clamp(1.75rem, 3.3vw, 2.875rem);
    font-weight: 700;
    font-stretch: 110%;
    line-height: 1.12;
    text-wrap: balance;
}

.relogio {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.relogio__segundos {
    min-width: 4ch;
    font-size: 2rem;
    font-weight: 700;
    font-stretch: 112%;
    font-variant-numeric: tabular-nums;
}
.relogio__unidade { font-size: .6em; font-weight: 600; }

.feedback {
    min-height: 3.2em;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.35;
}
.feedback--certo  { color: var(--certo-sobre-azul); }
.feedback--errado { color: var(--errado-sobre-azul); }

.questao__opcoes {
    justify-content: center;
    gap: 1rem;
}

/* Opções: superfícies planas, sem contorno — o estado é dado pela cor de fundo. */
.opcao {
    appearance: none;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    min-height: 5.5rem;
    padding: 1.25rem 1.5rem;
    border-radius: var(--raio);
    background: var(--nevoa);
    color: var(--tinta);
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
    transition: transform .12s ease, background-color .2s ease, color .2s ease;
}
.opcao:active:not(:disabled) { transform: scale(.985); background: var(--nevoa-premida); }
.opcao:disabled { cursor: default; }

/* Depois de responder, as opções que não interessam recuam. */
.opcao:disabled:not(.opcao--certa):not(.opcao--errada):not(.opcao--revelada) { opacity: .4; }

.opcao--certa  { background: var(--certo);  color: var(--branco); }
.opcao--errada { background: var(--errado); color: var(--branco); }
/* A resposta certa, quando o participante errou: realçada sem parecer escolhida. */
.opcao--revelada { background: var(--certo-claro); color: var(--tinta); box-shadow: inset 0 0 0 3px var(--certo); }

.opcao__sinal {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    font-size: 1.25rem;
    font-weight: 800;
}
.opcao--certa .opcao__sinal,
.opcao--errada .opcao__sinal { background: rgb(255 255 255 / .2); }
.opcao--revelada .opcao__sinal { background: var(--certo); color: var(--branco); }

/* -----------------------------------------------------------------------------
   Ecrã 3 — dados do participante
   -------------------------------------------------------------------------- */

.ecra--dados { background: var(--branco); }

/* Faixa azul com o logótipo: mantém a marca presente num ecrã que é, de resto, branco. */
.faixa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding:
        max(1rem, env(safe-area-inset-top))
        max(var(--margem), env(safe-area-inset-right))
        1rem
        max(var(--margem), env(safe-area-inset-left));
    background: var(--azul);
    color: var(--branco);
}
.faixa .marca__logo { height: clamp(1.5rem, 2.2vw, 2rem); }

.dados {
    max-width: 54rem;
    margin: 0 auto;
    padding:
        clamp(1.75rem, 4vh, 3rem)
        max(var(--margem), env(safe-area-inset-right))
        max(var(--margem), env(safe-area-inset-bottom))
        max(var(--margem), env(safe-area-inset-left));
}

.dados__intro {
    margin: .75rem 0 2rem;
    font-size: 1.25rem;
    color: var(--grafite);
}

.campos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 1.5rem;
}
@media (max-width: 640px) {
    .campos { grid-template-columns: 1fr; }
}

.campo label {
    display: block;
    margin-bottom: .375rem;
    font-size: 1.0625rem;
    font-weight: 600;
}

/* Campo "preenchido": fundo névoa + linha inferior com contraste suficiente para se perceber o limite. */
.campo input {
    width: 100%;
    min-height: 3.75rem;
    padding: 0 1rem;
    border: 0;
    border-bottom: 2px solid var(--grafite);
    border-radius: 10px 10px 0 0;
    background: var(--nevoa);
    color: var(--tinta);
    font: 500 1.25rem/1 var(--fonte);
}
.campo input:focus {
    outline: none;
    border-bottom-color: var(--azul);
    box-shadow: inset 0 -2px 0 var(--azul);
    background: #EAF2FB;
}
.campo input[aria-invalid="true"] {
    border-bottom-color: var(--errado);
    box-shadow: inset 0 -2px 0 var(--errado);
}

.campo__erro {
    margin-top: .375rem;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--errado);
}

.consentimentos {
    display: grid;
    gap: .75rem;
    margin: 2rem 0;
}

.consentimento {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    padding: 1.125rem 1.25rem;
    border-radius: var(--raio);
    background: var(--nevoa);
    font-size: 1rem;
    line-height: 1.5;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}
.consentimento input {
    width: 1.75rem;
    height: 1.75rem;
    margin: 0;
    accent-color: var(--azul);
}
.consentimento a {
    color: var(--azul);
    font-weight: 600;
    text-underline-offset: .18em;
}
.consentimento--invalido { box-shadow: inset 0 0 0 2px var(--errado); }
.consentimento__nota { color: var(--grafite); white-space: nowrap; }

.erro-geral {
    margin-bottom: 1.25rem;
    padding: .875rem 1rem;
    border-left: 4px solid var(--errado);
    background: #FBEAE8;
    font-weight: 600;
    color: var(--errado);
}

/* -----------------------------------------------------------------------------
   Ecrã 4 — resultado
   -------------------------------------------------------------------------- */

.resultado__numeros {
    margin: auto 0;
    display: grid;
    gap: .75rem;
}

.resultado__certas {
    font-size: clamp(3rem, 7.5vw, 5.75rem);
    font-weight: 800;
    font-stretch: 125%;
    line-height: .95;
    font-variant-numeric: tabular-nums;
}

.resultado__tempo {
    font-size: clamp(1.25rem, 2.4vw, 1.75rem);
    font-weight: 500;
    color: rgb(255 255 255 / .86);
    font-variant-numeric: tabular-nums;
}

/* Uma célula por pergunta: a bateria do jogo, agora como resumo. */
.celulas-resultado {
    display: grid;
    grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
    gap: .75rem;
    max-width: 30rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}
.celula-resultado { display: grid; gap: .375rem; }
.celula-resultado__barra {
    height: 1.125rem;
    border-radius: 5px;
    background: var(--azul-escuro);
}
.celula-resultado--certa  .celula-resultado__barra { background: var(--ceu); }
.celula-resultado--errada .celula-resultado__barra { background: var(--alerta); }
.celula-resultado__rotulo { font-size: .9375rem; color: rgb(255 255 255 / .78); }
.celula-resultado__tempo  { font-weight: 700; font-variant-numeric: tabular-nums; }
.celula-resultado__sinal  { display: inline-block; width: 1.25em; font-weight: 800; }
.celula-resultado--certa  .celula-resultado__sinal { color: var(--ceu); }
.celula-resultado--errada .celula-resultado__sinal { color: var(--alerta); }

.resultado__mensagem {
    justify-content: center;
    gap: 1.25rem;
}

.resultado__texto {
    max-width: 30ch;
    font-size: 1.3125rem;
    line-height: 1.45;
    color: var(--tinta);
}

.aviso-offline {
    max-width: 38ch;
    padding-left: .75rem;
    border-left: 4px solid var(--alerta);
    font-size: .9375rem;
    color: var(--grafite);
}

.resultado__acoes {
    display: flex;
    align-items: center;
    gap: 1rem 1.5rem;
    flex-wrap: wrap;
    margin-top: .5rem;
}
.contagem { font-size: 1rem; color: var(--grafite); font-variant-numeric: tabular-nums; }

/* -----------------------------------------------------------------------------
   Verificação da instalação (?verificar)
   -------------------------------------------------------------------------- */

.ecra--aviso {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: clamp(1.5rem, 5vh, 3rem);
    background: var(--azul);
    color: var(--branco);
}
.aviso__conteudo { align-self: center; display: grid; gap: 1.5rem; max-width: 52rem; }
.aviso__titulo {
    margin: 0;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    font-stretch: 118%;
    line-height: 1.05;
}
.aviso__ligacao { color: var(--ceu); font-weight: 600; text-underline-offset: .2em; }

.verificacao { display: grid; gap: .625rem; margin: 0; padding: 0; list-style: none; }
.verificacao__item {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: .75rem;
    align-items: start;
    padding: .625rem 1rem;
    border-radius: var(--raio);
    background: var(--azul-escuro);
    font-size: 1.0625rem;
    line-height: 1.45;
    -webkit-user-select: text;
    user-select: text; /* para se poder copiar uma mensagem de erro */
}
.verificacao__sinal {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    font-weight: 800;
}
.verificacao__item--ok    .verificacao__sinal { background: var(--ceu); color: var(--azul); }
.verificacao__item--falha .verificacao__sinal { background: var(--alerta); color: var(--azul); }

/* -----------------------------------------------------------------------------
   Tablet ao alto: títulos maiores e respostas logo abaixo da pergunta
   -------------------------------------------------------------------------- */

@media (orientation: portrait) {
    .chamada { font-size: clamp(3rem, 11vw, 6rem); }
    .pergunta { margin: clamp(1.5rem, 5vh, 3.5rem) 0; font-size: clamp(2rem, 5vw, 2.75rem); max-width: 26ch; }
    .questao__opcoes { justify-content: flex-start; }
    .feedback { min-height: 2.8em; }
    .resultado__mensagem { justify-content: flex-start; }
}

/* Tablet deitado com pouca altura (ex.: 1280×800): o formulário cabe sem scroll quando não há erros. */
@media (orientation: landscape) and (max-height: 820px) {
    .dados { padding-top: 1.5rem; }
    .titulo { font-size: clamp(2rem, 3.4vw, 2.625rem); }
    .dados__intro { margin: .5rem 0 1.5rem; }
    .consentimentos { margin: 1.5rem 0; }
    .consentimento { padding: .875rem 1.125rem; }
}

/* -----------------------------------------------------------------------------
   Movimento reduzido: tudo estático (a bateria do início fica carregada).
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
}