/* =====================================================================
   Avaliação de Reação — Daterra Farmácia de Manipulação | RH
   Formulário público — mobile first
   ===================================================================== */

:root {
    --turquesa:        #2DB9CA;
    --turquesa-escuro: #208591;
    --turquesa-tinta:  #14535A;
    --limao:           #A5C62D;
    --limao-escuro:    #768E20;

    --tinta:      #143C41;
    --texto:      #35494C;
    --texto-suave:#6C8085;
    --linha:      #DCE7E9;
    --fundo:      #F4F8F9;
    --branco:     #FFFFFF;

    --serif: Georgia, "Times New Roman", "Nimbus Roman", serif;
    --sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --raio:   14px;
    --raio-sm: 10px;
    --sombra: 0 1px 2px rgba(20, 83, 90, .06), 0 8px 24px rgba(20, 83, 90, .07);
    --sombra-sutil: 0 1px 3px rgba(20, 83, 90, .07);
    --max: 720px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55;
    color: var(--texto);
    background: var(--fundo);
    background-image:
        radial-gradient(1100px 420px at 50% -180px, rgba(45,185,202,.13), transparent 70%);
    background-repeat: no-repeat;
    -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- topo */
.topo {
    background: var(--branco);
    border-bottom: 1px solid var(--linha);
    padding: 18px 20px 16px;
    text-align: center;
}

.topo__logo {
    display: block;
    width: 84px;
    height: auto;
    margin: 0 auto 10px;
}

.topo__org {
    font-family: var(--serif);
    font-size: .84rem;
    letter-spacing: .04em;
    color: var(--turquesa-escuro);
    margin: 0;
}

.topo__setor {
    font-size: .72rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--texto-suave);
    margin: 3px 0 0;
}

/* ------------------------------------------------------------ estrutura */
.envelope {
    max-width: var(--max);
    margin: 0 auto;
    padding: 22px 16px 64px;
}

.cartao {
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 24px 20px;
}

h1 {
    font-family: var(--serif);
    font-size: 1.42rem;
    line-height: 1.28;
    color: var(--tinta);
    margin: 0 0 6px;
    letter-spacing: -.01em;
}

h2 {
    font-family: var(--serif);
    font-size: 1.16rem;
    line-height: 1.3;
    color: var(--tinta);
    margin: 0 0 4px;
}

.sub {
    font-size: .82rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--turquesa-escuro);
    font-weight: 600;
    margin: 0 0 18px;
}

p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }

/* ------------------------------------------------- ficha do treinamento */
.ficha {
    border-left: 3px solid var(--limao);
    background: #FAFCF5;
    border-radius: 0 var(--raio-sm) var(--raio-sm) 0;
    padding: 14px 16px;
    margin: 0 0 20px;
}

.ficha__linha {
    display: flex;
    gap: 8px;
    font-size: .9rem;
    padding: 3px 0;
    flex-wrap: wrap;
}

.ficha__rotulo {
    color: var(--texto-suave);
    min-width: 92px;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding-top: 2px;
}

.ficha__valor { font-weight: 600; color: var(--tinta); flex: 1 1 180px; }

/* --------------------------------------------------------- aviso/nota */
.nota {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: #F0FAFB;
    border: 1px solid #CDE9ED;
    border-radius: var(--raio-sm);
    padding: 13px 15px;
    font-size: .88rem;
    color: var(--turquesa-tinta);
    margin: 0 0 18px;
}

.nota strong { color: var(--turquesa-tinta); }
.nota__icone { flex: 0 0 auto; margin-top: 1px; }

/* ------------------------------------------------------------ progresso */
.progresso { margin: 0 0 20px; }

.progresso__topo {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: .78rem;
    color: var(--texto-suave);
    margin-bottom: 7px;
    letter-spacing: .03em;
}

.progresso__etapa { font-weight: 600; color: var(--turquesa-escuro); }

.progresso__trilha {
    height: 7px;
    background: #E7EFF1;
    border-radius: 99px;
    overflow: hidden;
}

.progresso__barra {
    height: 100%;
    width: 0;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--turquesa) 0%, var(--limao) 100%);
    transition: width .35s cubic-bezier(.4, 0, .2, 1);
}

/* ---------------------------------------------------------------- etapas */
.etapa { display: none; }
.etapa.ativa { display: block; animation: entra .28s ease both; }

@keyframes entra {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .etapa.ativa { animation: none; }
    .progresso__barra { transition: none; }
}

/* -------------------------------------------------------------- escolhas */
.escolhas { display: grid; gap: 10px; margin: 0 0 18px; }

.escolha {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border: 1.5px solid var(--linha);
    border-radius: var(--raio-sm);
    padding: 14px 15px;
    cursor: pointer;
    background: var(--branco);
    transition: border-color .15s, background .15s, box-shadow .15s;
}

.escolha:hover { border-color: #B9D7DB; }

.escolha input { margin: 2px 0 0; accent-color: var(--turquesa); width: 18px; height: 18px; flex: 0 0 auto; }

.escolha:has(input:checked) {
    border-color: var(--turquesa);
    background: #F3FBFC;
    box-shadow: 0 0 0 3px rgba(45, 185, 202, .12);
}

.escolha__texto { font-size: .95rem; }
.escolha__dica { display: block; font-size: .82rem; color: var(--texto-suave); margin-top: 2px; }

/* ---------------------------------------------------------------- campos */
.campo { margin: 0 0 18px; }

.campo__rotulo {
    display: block;
    font-weight: 600;
    color: var(--tinta);
    font-size: .95rem;
    margin-bottom: 7px;
}

.campo__rotulo .opc {
    font-weight: 400;
    color: var(--texto-suave);
    font-size: .84rem;
}

input[type="text"], textarea {
    width: 100%;
    font-family: inherit;
    font-size: 1rem;
    color: var(--texto);
    background: var(--branco);
    border: 1.5px solid var(--linha);
    border-radius: var(--raio-sm);
    padding: 11px 13px;
    transition: border-color .15s, box-shadow .15s;
}

textarea { min-height: 88px; resize: vertical; line-height: 1.5; }

input[type="text"]:focus, textarea:focus {
    outline: none;
    border-color: var(--turquesa);
    box-shadow: 0 0 0 3px rgba(45, 185, 202, .16);
}

.campo--erro input[type="text"],
.campo--erro textarea { border-color: #D97C6A; background: #FEF8F6; }

.erro-msg {
    display: none;
    font-size: .82rem;
    color: #B4543D;
    margin-top: 6px;
}

.campo--erro .erro-msg,
.item--erro .erro-msg,
.grupo--erro .erro-msg { display: block; }

/* --------------------------------------------------------------- legenda */
.legenda {
    background: #F7FAF0;
    border: 1px solid #E3EDC7;
    border-radius: var(--raio-sm);
    padding: 14px 16px;
    margin: 0 0 20px;
}

.legenda__titulo {
    font-size: .78rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--limao-escuro);
    font-weight: 700;
    margin: 0 0 9px;
}

.legenda__lista { list-style: none; margin: 0 0 10px; padding: 0; }

.legenda__lista li {
    display: flex;
    gap: 9px;
    align-items: baseline;
    font-size: .88rem;
    padding: 2px 0;
}

.legenda__num {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--branco);
    border: 1.5px solid var(--linha);
    color: var(--turquesa-escuro);
    font-weight: 700;
    font-size: .78rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.legenda__extremo { color: var(--texto-suave); font-size: .82rem; }

.legenda__regra {
    font-size: .87rem;
    color: var(--turquesa-tinta);
    margin: 0;
    padding-top: 9px;
    border-top: 1px dashed #DDE7C4;
}

/* ----------------------------------------------------------- itens likert */
.itens { display: grid; gap: 12px; }

.item {
    border: 1px solid var(--linha);
    border-radius: var(--raio-sm);
    padding: 14px 15px 12px;
    background: var(--branco);
    transition: border-color .15s;
}

.item--erro { border-color: #D97C6A; background: #FEF8F6; }
.item--respondido { border-color: #CFE6EA; background: #FCFEFE; }

.item__texto {
    display: block;
    font-size: .94rem;
    line-height: 1.45;
    color: var(--tinta);
    margin-bottom: 11px;
}

.item__num {
    display: inline-block;
    min-width: 20px;
    color: var(--turquesa);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.escala { display: flex; gap: 6px; }

.escala__opcao { flex: 1 1 0; position: relative; }

.escala__opcao input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.escala__caixa {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-height: 48px;
    border: 1.5px solid var(--linha);
    border-radius: var(--raio-sm);
    background: var(--branco);
    color: var(--texto-suave);
    font-weight: 700;
    font-size: 1rem;
    transition: all .15s;
    cursor: pointer;
    user-select: none;
}

.escala__mini {
    font-size: .58rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    line-height: 1;
    opacity: .75;
}

.escala__opcao input:hover + .escala__caixa { border-color: #B9D7DB; }

.escala__opcao input:focus-visible + .escala__caixa {
    box-shadow: 0 0 0 3px rgba(45, 185, 202, .3);
}

.escala__opcao input:checked + .escala__caixa {
    background: var(--turquesa);
    border-color: var(--turquesa-escuro);
    color: var(--branco);
}

.escala__opcao input:checked + .escala__caixa .escala__mini { opacity: .9; }

/* Escala com valor 5 (melhor resposta) ganha destaque verde-limão */
.escala__opcao--top input:checked + .escala__caixa {
    background: var(--limao);
    border-color: var(--limao-escuro);
}

/* ------------------------------------------------------------ checkboxes */
.grupo-check { display: grid; gap: 8px; margin-bottom: 4px; }

.check {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    border: 1.5px solid var(--linha);
    border-radius: var(--raio-sm);
    padding: 12px 14px;
    background: var(--branco);
    cursor: pointer;
    font-size: .93rem;
    transition: border-color .15s, background .15s;
}

.check:hover { border-color: #B9D7DB; }

.check input { margin: 2px 0 0; width: 18px; height: 18px; accent-color: var(--turquesa); flex: 0 0 auto; }

.check:has(input:checked) { border-color: var(--turquesa); background: #F3FBFC; }

.check--nenhuma:has(input:checked) { border-color: var(--limao-escuro); background: #F9FCEF; }

/* --------------------------------------------------------------- destaque */
.destaque {
    border: 1.5px solid var(--limao);
    background: linear-gradient(180deg, #FBFDF3 0%, var(--branco) 100%);
    border-radius: var(--raio-sm);
    padding: 18px 16px;
}

.destaque__selo {
    display: inline-block;
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--limao-escuro);
    background: #F0F6DC;
    border-radius: 99px;
    padding: 4px 11px;
    margin-bottom: 10px;
}

/* ------------------------------------------------------------ navegação */
.navegacao {
    display: flex;
    gap: 10px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--linha);
}

.botao {
    flex: 1 1 auto;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--raio-sm);
    padding: 14px 20px;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: filter .15s, background .15s, border-color .15s;
    min-height: 50px;
}

.botao--primario {
    background: var(--turquesa);
    color: var(--branco);
    box-shadow: var(--sombra-sutil);
}

.botao--primario:hover { filter: brightness(1.06); }

.botao--enviar { background: var(--limao-escuro); }

.botao--secundario {
    background: var(--branco);
    color: var(--turquesa-escuro);
    border-color: var(--linha);
    flex: 0 0 auto;
    min-width: 108px;
}

.botao--secundario:hover { border-color: var(--turquesa); }

.botao:disabled { opacity: .6; cursor: progress; }

.botao:focus-visible { outline: 3px solid rgba(45, 185, 202, .4); outline-offset: 2px; }

/* ------------------------------------------------------------- alertas */
.alerta {
    border-radius: var(--raio-sm);
    padding: 13px 15px;
    font-size: .9rem;
    margin: 0 0 18px;
    border: 1px solid;
}

.alerta--erro  { background: #FEF6F4; border-color: #EFC7BC; color: #9C4630; }
.alerta--aviso { background: #FFFBEF; border-color: #EFE0B5; color: #8A6C22; }

.alerta ul { margin: 8px 0 0; padding-left: 20px; }
.alerta li { margin: 2px 0; }

/* --------------------------------------------------------- agradecimento */
.obrigada { text-align: center; padding: 34px 22px 30px; }

.obrigada__marca { width: 118px; height: auto; margin: 0 auto 18px; display: block; }

.obrigada__selo {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #F1F8DE;
    border: 2px solid var(--limao);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
}

.obrigada h1 { font-size: 1.5rem; }

.obrigada__texto {
    font-size: 1.02rem;
    color: var(--texto);
    max-width: 460px;
    margin: 12px auto 0;
    line-height: 1.6;
}

.obrigada__rodape {
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid var(--linha);
    font-size: .84rem;
    color: var(--texto-suave);
}

/* ---------------------------------------------------------------- rodapé */
.rodape {
    text-align: center;
    font-size: .78rem;
    color: var(--texto-suave);
    padding: 22px 16px 8px;
}

.rodape a { color: var(--turquesa-escuro); text-decoration: none; }

.oculto { display: none !important; }

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

/* ------------------------------------------------------ telas maiores */
@media (min-width: 560px) {
    .envelope { padding: 34px 24px 72px; }
    .cartao { padding: 32px 34px; }
    h1 { font-size: 1.62rem; }
    .topo__logo { width: 96px; }
    .escala { gap: 8px; }
    .escala__caixa { min-height: 52px; font-size: 1.05rem; }
    .escala__mini { font-size: .62rem; }
    .navegacao { justify-content: flex-end; }
    .botao--primario { flex: 0 0 auto; min-width: 190px; }
}