/*
 * Tema SIAP — reproduz no navegador a identidade do app Android de coleta (Material 3,
 * paleta terracota definida em siap8/ui/theme/Color.kt).
 *
 * A tela é usada majoritariamente no celular pelo próprio respondente: layout de coluna única,
 * uma pergunta por vez, com cabeçalho e rodapé fixos e apenas o miolo rolando.
 */

html {
    /* primaryLight / onPrimaryLight / surfaceLight do app */
    --siap-primary: #8F4C34;
    --siap-on-primary: #FFFFFF;
    --siap-primary-container: #FFDBCF;
    --siap-surface: #FFF8F6;
    --siap-on-surface: #231A17;
    /* surfaceVariantLight: fundo das linhas em destaque (zebra das opções) */
    --siap-zebra: #F5DED7;
    --siap-outline: #D8C2BB;

    --lumo-primary-color: var(--siap-primary);
    --lumo-primary-text-color: var(--siap-primary);
    --lumo-primary-color-50pct: rgba(143, 76, 52, 0.5);
    --lumo-primary-color-10pct: rgba(143, 76, 52, 0.1);
    --lumo-base-color: var(--siap-surface);
    --lumo-body-text-color: var(--siap-on-surface);
    --lumo-border-radius-m: 8px;
    --lumo-font-family: "Roboto", "Segoe UI", system-ui, sans-serif;

    background: var(--siap-surface);
}

/* ---------- Estrutura da tela de entrevista ---------- */

.entrevista-view {
    height: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 0;
    gap: 0;
    background: var(--siap-surface);
}

.entrevista-cabecalho {
    background: var(--siap-primary);
    color: var(--siap-on-primary);
    padding: var(--lumo-space-s) var(--lumo-space-m);
    width: 100%;
    flex: 0 0 auto;
}

.entrevista-cabecalho .titulo-pesquisa {
    font-weight: 700;
    line-height: 1.2;
}

.entrevista-cabecalho .empresa {
    font-size: var(--lumo-font-size-xs);
    opacity: 0.85;
}

/* Ícone "Sobre este Aplicativo" — abre o site do Siap em nova aba. */
.entrevista-cabecalho .sobre-app {
    color: var(--siap-on-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Alvo de toque confortável no celular, mesmo com o ícone pequeno. */
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    opacity: 0.9;
}

.entrevista-cabecalho .sobre-app:hover {
    opacity: 1;
}

/* Miolo: única área rolável, para o rodapé de navegação ficar sempre alcançável. */
.entrevista-corpo {
    flex: 1 1 auto;
    overflow-y: auto;
    width: 100%;
    padding: var(--lumo-space-s) var(--lumo-space-m);
}

.entrevista-rodape {
    flex: 0 0 auto;
    width: 100%;
    border-top: 1px solid var(--siap-outline);
    padding: var(--lumo-space-xs) var(--lumo-space-m) var(--lumo-space-s);
    background: var(--siap-surface);
}

.entrevista-rodape .observacao {
    font-size: var(--lumo-font-size-xs);
    font-weight: 600;
    color: var(--siap-primary);
}

/* ---------- Enunciado da pergunta ---------- */

.pergunta-grupo {
    font-size: var(--lumo-font-size-xs);
    font-weight: 700;
    color: #FF9800;
    text-align: center;
    width: 100%;
}

.pergunta-titulo {
    font-size: var(--lumo-font-size-l);
    font-weight: 700;
    line-height: 1.3;
    margin: var(--lumo-space-xs) 0 var(--lumo-space-s);
}

/* ---------- Opções de resposta ---------- */

/* Zebra das opções, como no app (linhas ímpares com fundo terracota claro). */
vaadin-radio-group[theme~="siap-opcoes"] vaadin-radio-button:nth-child(odd),
vaadin-checkbox-group[theme~="siap-opcoes"] vaadin-checkbox:nth-child(odd),
.linha-opcao:nth-child(odd) {
    background: var(--siap-zebra);
}

vaadin-radio-group[theme~="siap-opcoes"],
vaadin-checkbox-group[theme~="siap-opcoes"] {
    width: 100%;
}

/*
 * Opções em lista (LOCALIDADE, OPCAO_UNICA, OPCAO_MULTIPLA, OPCAO_MULTIPLA_ORDEM): o rótulo é texto
 * corrido, então fica SEMPRE à esquerda, colado no botão — só a escala numérica é centralizada.
 * O alinhamento é declarado explicitamente (inclusive no ::part(label), que vive no shadow DOM do
 * componente) para não depender do que o Lumo herda do contexto.
 */
vaadin-radio-group[theme~="siap-opcoes"] vaadin-radio-button,
vaadin-checkbox-group[theme~="siap-opcoes"] vaadin-checkbox {
    padding: var(--lumo-space-xs) var(--lumo-space-s);
    min-height: 44px; /* alvo de toque confortável no celular */
    align-items: center;      /* centraliza na vertical: o texto continua começando à esquerda */
    justify-content: flex-start;
    text-align: left;
}

vaadin-radio-group[theme~="siap-opcoes"] vaadin-radio-button::part(label),
vaadin-checkbox-group[theme~="siap-opcoes"] vaadin-checkbox::part(label) {
    text-align: left;
    justify-content: flex-start;
    width: 100%;
}

.linha-opcao {
    width: 100%;
    padding: var(--lumo-space-xs) var(--lumo-space-s);
    align-items: center;
    justify-content: flex-start;
    text-align: left;
}

/* Linha da OPCAO_MULTIPLA_ESCALA: enunciado em cima, escala numérica embaixo. */
.linha-escala {
    width: 100%;
    padding: var(--lumo-space-xs) var(--lumo-space-s);
}

.linha-escala .rotulo {
    font-weight: 600;
}

/*
 * A escala ocupa TODA a largura da tela: as opções se distribuem em colunas de igual tamanho, cada
 * uma com o número acima do círculo. Sem isso, as notas ficavam amontoadas à esquerda e o alvo de
 * toque no celular era pequeno demais.
 */
.linha-escala vaadin-radio-group {
    width: 100%;
    display: flex;
}

.linha-escala vaadin-radio-group::part(group-field) {
    display: flex;
    width: 100%;
}

/* Único caso centralizado: cada nota fica no meio da sua coluna. */
.linha-escala vaadin-radio-button {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin: 0;
    text-align: center;
}

.linha-escala vaadin-radio-button::part(label) {
    margin: 0;
    padding: 0 0 0 var(--lumo-space-xs);
    font-weight: 600;
    text-align: center;
}

/* Ordem de prioridade (OPCAO_MULTIPLA_ORDEM): selo com a posição escolhida. */
.selo-ordem {
    background: var(--siap-primary);
    color: var(--siap-on-primary);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--lumo-font-size-xs);
    font-weight: 700;
    flex: 0 0 auto;
}

/* Escala numérica (ESCALA_NUMERICO): slider nativo, que funciona bem em toque. */
.escala-slider {
    width: 100%;
    accent-color: var(--siap-primary);
    height: 32px;
}

.escala-valor {
    font-size: var(--lumo-font-size-xxl);
    font-weight: 700;
    color: var(--siap-primary);
    text-align: center;
    width: 100%;
}

.escala-limites {
    width: 100%;
    font-size: var(--lumo-font-size-xs);
    color: var(--siap-on-surface);
    opacity: 0.7;
}

/* Pergunta de GPS: status da coleta e coordenadas registradas. */
.gps-status {
    margin-top: var(--lumo-space-m);
    color: var(--siap-on-surface);
}

.gps-coordenadas {
    margin: var(--lumo-space-s) 0;
    font-weight: 700;
    color: var(--siap-primary);
}

/* Pergunta de foto (MEDIA_IMAGEM): status, miniatura da foto registrada e botão de captura. */
.foto-status {
    margin-top: var(--lumo-space-m);
    color: var(--siap-on-surface);
}

.foto-miniatura {
    margin: var(--lumo-space-s) 0;
    max-width: 100%;
    max-height: 45vh;
    border-radius: var(--lumo-border-radius-m);
    box-shadow: var(--lumo-box-shadow-s);
}

/* ---------- Telas de aviso e de conclusão ---------- */

.tela-aviso {
    height: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: var(--lumo-space-l);
    align-items: center;
    justify-content: center;
    text-align: center;
}

.tela-aviso .icone {
    font-size: 48px;
    line-height: 1;
}

.tela-aviso .titulo {
    font-size: var(--lumo-font-size-xl);
    font-weight: 700;
    color: var(--siap-primary);
}

/* Contagem para levar o respondente ao site do Siap depois do encerramento. */
.aviso-redirecionamento {
    font-size: var(--lumo-font-size-s);
    opacity: 0.75;
    margin-top: var(--lumo-space-m);
}

/* Contagem regressiva do aviso de inatividade. */
.contador-inatividade {
    font-size: var(--lumo-font-size-xxl);
    font-weight: 700;
    color: var(--siap-primary);
}