/* App da pesquisadora no Material 3. Cores, letras, formas, fonte e ícones vêm de tema-m3.css (gerado por
   material/build.sh). Os componentes são os oficiais (vendor/m3.js). Aqui fica só a montagem das telas,
   sempre com os papéis de cor e as medidas do Material. */
*{box-sizing:border-box}
html,body{margin:0;height:100%}
html{scroll-padding-top:180px;scroll-padding-bottom:110px}
h1,h2,p{margin:0}
h1:focus{outline:none}
body{background:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface);font-family:var(--md-ref-typeface-plain);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
#app{max-width:480px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;background:var(--md-sys-color-surface)}
[hidden]{display:none!important}
md-icon{flex:none}

/* barra superior pequena: 64 de altura, ícone de voltar, título em title-large */
.barra-sup{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:4px;min-height:64px;padding:8px 4px;background:var(--md-sys-color-surface)}
.barra-sup h1{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:12px}
.barra-sup h1.so{padding-left:12px}
/* na pergunta: barra, progresso e a pergunta compacta ficam juntos presos no topo */
.cabeca{position:sticky;top:0;z-index:2;background:var(--md-sys-color-surface);padding-bottom:4px}
.cabeca .barra-sup{position:static}
.barra-sup .n{color:var(--md-sys-color-on-surface-variant);padding-right:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.compacta{position:absolute;top:100%;left:0;right:0;padding:8px 16px 12px;background:var(--md-sys-color-surface)}
.compacta div{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);border-radius:var(--md-sys-shape-corner-medium);padding:12px 16px}
.compacta b{font-weight:500}
.barra-sup md-icon-button{--md-icon-button-icon-color:var(--md-sys-color-on-surface);--md-icon-button-hover-icon-color:var(--md-sys-color-on-surface);--md-icon-button-pressed-icon-color:var(--md-sys-color-on-surface);--md-icon-button-focus-icon-color:var(--md-sys-color-on-surface)}

/* indicador de progresso linear: 4 de altura, trilho separado do indicador e ponto de parada no fim */
.progresso{display:flex;align-items:center;gap:4px;height:4px;margin:0 16px}
.progresso .ativo{flex:none;height:4px;border-radius:2px;background:var(--md-sys-color-primary)}
.progresso .trilho{flex:1;position:relative;height:4px;border-radius:2px;background:var(--md-sys-color-secondary-container)}
.progresso .trilho::after{content:"";position:absolute;right:0;top:0;width:4px;height:4px;border-radius:2px;background:var(--md-sys-color-primary)}

.corpo{flex:1;padding:16px;display:flex;flex-direction:column;gap:16px}
.corpo.centro{justify-content:center;align-items:center;text-align:center}
.rodape{position:sticky;bottom:0;z-index:1;padding:12px 16px calc(16px + env(safe-area-inset-bottom));background:var(--md-sys-color-surface);display:flex;flex-direction:column;gap:8px}
/* botões de ação da tela: tamanho médio do Material (56 de altura, rótulo title-medium), largura toda */
.rodape md-filled-button,.rodape md-filled-tonal-button,.rodape md-outlined-button{width:100%;
  --md-filled-button-container-height:56px;--md-filled-button-label-text-size:var(--md-sys-typescale-title-medium-size);--md-filled-button-label-text-line-height:var(--md-sys-typescale-title-medium-line-height);--md-filled-button-label-text-weight:var(--md-sys-typescale-title-medium-weight);--md-filled-button-icon-size:24px;--md-filled-button-leading-space:24px;--md-filled-button-trailing-space:24px;--md-filled-button-with-leading-icon-leading-space:24px;
  --md-filled-tonal-button-container-height:56px;--md-filled-tonal-button-label-text-size:var(--md-sys-typescale-title-medium-size);--md-filled-tonal-button-label-text-line-height:var(--md-sys-typescale-title-medium-line-height);--md-filled-tonal-button-label-text-weight:var(--md-sys-typescale-title-medium-weight);
  --md-outlined-button-container-height:56px;--md-outlined-button-label-text-size:var(--md-sys-typescale-title-medium-size);--md-outlined-button-label-text-line-height:var(--md-sys-typescale-title-medium-line-height);--md-outlined-button-label-text-weight:var(--md-sys-typescale-title-medium-weight)}
.rodape md-text-button{align-self:center}

/* cartão do texto que a pesquisadora lê: primary com on-primary (branco), o par de mais contraste do Material,
   para ler no sol (10,4 contra 4,6 do primary container) */
md-filled-card.leia{--md-filled-card-container-color:var(--md-sys-color-primary);--md-filled-card-container-shape:var(--md-sys-shape-corner-large);color:var(--md-sys-color-on-primary);padding:16px 20px 20px;gap:8px}
.leia .rot{display:flex;align-items:center;gap:8px}
.leia .rot md-icon,.leia .como md-icon{--md-icon-size:20px}
.leia .rot .cod{margin-left:auto;font-variant-numeric:tabular-nums}
.leia .como{display:flex;align-items:center;gap:8px;margin-top:4px}
.voce{display:flex;align-items:center;gap:12px;color:var(--md-sys-color-on-surface-variant)}
.voce md-icon{color:var(--md-sys-color-primary)}
.papel{color:var(--md-sys-color-on-surface-variant)}

/* opções: lista segmentada do Material, a escolhida em secondary container */
.opcoes{display:flex;flex-direction:column;gap:2px}
.opcao{position:relative;display:flex;align-items:center;gap:16px;min-height:56px;padding:8px 16px;background:var(--md-sys-color-surface-container-low);color:var(--md-sys-color-on-surface);border-radius:var(--md-sys-shape-corner-extra-small);cursor:pointer;overflow:hidden}
.opcoes .opcao:first-child{border-top-left-radius:var(--md-sys-shape-corner-large);border-top-right-radius:var(--md-sys-shape-corner-large)}
.opcoes .opcao:last-child{border-bottom-left-radius:var(--md-sys-shape-corner-large);border-bottom-right-radius:var(--md-sys-shape-corner-large)}
.opcao md-radio,.opcao md-checkbox{flex:none} /* nas opções longas a caixa encolhia e entortava o texto */
/* marcada: secondary container com texto on-surface (o on-secondary-container deste tema sai mais apagado que a linha sem marcar) */
.opcao.on{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-surface);border-radius:var(--md-sys-shape-corner-large)}
/* recusa: última linha, separada, com contorno */
.recusa{display:flex;flex-direction:column;gap:12px}
.recusa .opcao{background:transparent;border:1px solid var(--md-sys-color-outline-variant);border-radius:var(--md-sys-shape-corner-large);color:var(--md-sys-color-on-surface-variant);outline:none}
.recusa .opcao md-icon{margin:0 2px}
.recusa .opcao.on{background:var(--md-sys-color-secondary-container);border-color:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-surface)}

md-outlined-text-field{width:100%}

/* avisos: cartão preenchido com ícone. Neutro, de erro (error container) ou de confirmação (secondary container) */
md-filled-card.aviso{flex-direction:row;align-items:flex-start;gap:12px;padding:16px;--md-filled-card-container-shape:var(--md-sys-shape-corner-medium);color:var(--md-sys-color-on-surface)}
.aviso md-icon{color:var(--md-sys-color-on-surface-variant)}
.aviso .tx{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left}
md-filled-card.aviso.erro{--md-filled-card-container-color:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container)}
.aviso.erro md-icon{color:var(--md-sys-color-on-error-container)}
md-filled-card.aviso.ok{--md-filled-card-container-color:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}
.aviso.ok md-icon{color:var(--md-sys-color-on-secondary-container)}
.aviso md-text-button{margin-left:-12px}

.contadores{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.contadores md-filled-card{padding:12px 16px 16px;--md-filled-card-container-shape:var(--md-sys-shape-corner-medium)}
.contadores span{color:var(--md-sys-color-on-surface-variant)}
md-outlined-card.cartao{padding:16px;gap:4px;--md-outlined-card-container-shape:var(--md-sys-shape-corner-medium)}
.cartao .det{color:var(--md-sys-color-on-surface-variant)}
.cartao .acoes{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.cartao md-text-button.perigo{--md-text-button-label-text-color:var(--md-sys-color-error);--md-text-button-hover-label-text-color:var(--md-sys-color-error);--md-text-button-pressed-label-text-color:var(--md-sys-color-error);--md-text-button-focus-label-text-color:var(--md-sys-color-error)}

/* listas da revisão e de "minhas entrevistas" */
md-list{--md-list-container-color:transparent;padding:0}
md-list-item{--md-list-item-leading-space:0;--md-list-item-trailing-space:0}
.secao{color:var(--md-sys-color-primary);padding:16px 0 4px}
.avatar{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--md-sys-color-surface-container-highest);color:var(--md-sys-color-on-surface-variant)}
.avatar.ok{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}

.marca{display:flex;flex-direction:column;align-items:center;gap:8px;margin:32px 0 16px;text-align:center}
.marca img{width:64px;height:64px;margin-bottom:8px}
.marca p{color:var(--md-sys-color-on-surface-variant)}
.selo{--md-icon-size:96px;color:var(--md-sys-color-primary);font-variation-settings:'FILL' 1;margin-bottom:8px}
.dica{color:var(--md-sys-color-on-surface-variant)}
.centro{text-align:center}