/* ============================================================
   REDES.LAB ON · Responder um formulário
   Tela longa, de preenchimento, feita para ser abandonada no meio
   e retomada depois. Por isso o que mais aparece aqui não é o
   campo: é o sinal de que ficou guardado.
   ============================================================ */

.rp{max-width:780px;margin:0 auto;padding-bottom:60px;}
.rp-carga{padding:26px;font-size:14px;line-height:1.6;color:var(--body);}

.rp-topo{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap;}
.rp-titulo .h-md{font-size:21px;line-height:1.25;}

/* A promessa fica antes da primeira pergunta porque é o que decide se
   a pessoa começa. Descobrir depois que dava para sair não adianta. */
.rp-promessa{display:flex;gap:11px;align-items:flex-start;
  background:var(--surface-sunk);border:1px solid var(--rule-soft);border-radius:16px;
  padding:14px 16px;font-size:13.5px;line-height:1.6;color:var(--body);margin-bottom:14px;}
.rp-promessa svg{flex:0 0 auto;margin-top:2px;color:var(--verde-mata,#1F6B4A);}

.rp-barra{margin-bottom:20px;}
.rp-barra-tri{height:7px;border-radius:99px;background:var(--surface-sunk);overflow:hidden;}
.rp-barra-tri i{display:block;height:100%;border-radius:99px;background:var(--magenta-vivo);
  transition:width .3s ease;}
.rp-barra-txt{margin-top:7px;font-family:var(--mono);font-size:11.5px;color:var(--body-soft);
  font-variant-numeric:tabular-nums;}
.rp-barra-txt b{color:var(--ink);}
.rp-barra-txt .ok{color:var(--verde-mata,#1F6B4A);}

.rp-entregue{display:flex;gap:11px;align-items:flex-start;
  background:#E8F4ED;border:1px solid #BFE0CE;color:#164F37;border-radius:16px;
  padding:13px 16px;font-size:13.5px;line-height:1.6;margin-bottom:18px;}
.rp-entregue svg{flex:0 0 auto;margin-top:2px;}

.rp-bloco{padding:20px 22px;margin-bottom:16px;}
.rp-bloco-nome{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--body-soft);padding-bottom:12px;margin-bottom:16px;
  border-bottom:1px solid var(--rule-soft);}

.rp-q{padding:16px 0;border-bottom:1px solid var(--rule-soft);}
.rp-q:last-child{border-bottom:none;padding-bottom:0;}
.rp-q-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:9px;}
.rp-q-enun{font-size:14.5px;font-weight:600;line-height:1.5;color:var(--ink);flex:1;min-width:0;}
.rp-opcional{margin-left:8px;font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;color:var(--body-soft);}
.rp-ajuda{font-size:12.5px;line-height:1.55;color:var(--body-soft);margin-bottom:9px;}
.rp-aviso{margin-top:8px;font-size:12.5px;line-height:1.55;color:var(--body-soft);}

/* O selo é o coração da tela: é ele que autoriza a pessoa a ir embora. */
.rp-selo{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.05em;
  color:var(--body-soft);white-space:nowrap;padding-top:2px;}
.rp-selo.ok{color:var(--verde-mata,#1F6B4A);}
.rp-selo.erro{color:var(--magenta-vivo);}

.rp-campo-linha{display:flex;gap:9px;align-items:flex-start;flex-wrap:wrap;}
.rp-campo{flex:1;min-width:0;width:100%;border:1px solid var(--rule-soft);border-radius:13px;
  background:var(--surface);color:var(--ink);font:inherit;font-size:14px;line-height:1.5;
  padding:10px 13px;transition:border-color .14s ease;}
.rp-campo:focus{outline:none;border-color:var(--magenta-vivo);}
textarea.rp-campo{resize:vertical;min-height:88px;}
.rp-numero{max-width:170px;flex:0 0 auto;}
.rp-data{max-width:210px;}
.rp-unidade{font-family:var(--mono);font-size:12px;color:var(--body-soft);padding-top:12px;}

.rp-mic{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
  border:1px solid var(--rule-soft);background:var(--surface);color:var(--body-soft);
  font-family:var(--mono);font-size:11.5px;font-weight:700;padding:10px 13px;border-radius:13px;
  transition:all .14s ease;}
.rp-mic:hover{color:var(--ink);border-color:var(--rule);}
.rp-mic.gravando{background:var(--magenta-vivo);border-color:var(--magenta-vivo);color:#fff;}
.rp-mic:disabled{opacity:.6;}

.rp-opcoes{display:flex;flex-wrap:wrap;gap:8px;}
.rp-opcao{border:1px solid var(--rule-soft);background:var(--surface);color:var(--body);
  font:inherit;font-size:13.5px;padding:9px 15px;border-radius:99px;text-align:left;
  transition:all .14s ease;}
.rp-opcao:hover{border-color:var(--rule);color:var(--ink);}
.rp-opcao.on{background:var(--magenta-vivo);border-color:var(--magenta-vivo);color:#fff;font-weight:600;}

.rp-escala{display:flex;gap:8px;}
.rp-nota{width:46px;height:46px;border-radius:14px;border:1px solid var(--rule-soft);
  background:var(--surface);color:var(--body);font-family:var(--mono);font-size:15px;font-weight:700;
  transition:all .14s ease;}
.rp-nota:hover{border-color:var(--rule);color:var(--ink);}
.rp-nota.on{background:var(--magenta-vivo);border-color:var(--magenta-vivo);color:#fff;}

.rp-fim{padding:22px 2px 0;}
.rp-fim .muted{font-size:13.5px;line-height:1.6;}
.rp-recado{margin-top:12px;font-size:13px;line-height:1.6;color:var(--body);}

@media (max-width:560px){
  .rp-bloco{padding:16px 15px;}
  .rp-q-cab{flex-direction:column;gap:5px;}
  .rp-selo{padding-top:0;}
  .rp-escala{gap:6px;}
  .rp-nota{width:100%;height:44px;}
  .rp-fim .row{flex-direction:column;align-items:stretch;}
}