/* ==========================================================================
   Canal Fale com o RH — páginas públicas (acesso pelo QR Code)
   Mobile-first: o colaborador chega pelo celular, muitas vezes no canteiro,
   com luva, sol na tela e 4G fraco. Alvos de toque de 48 px, fonte de 16 px nos
   campos (abaixo disso o iOS dá zoom ao focar) e nenhuma dependência externa.
   Carregado depois de canal.css, que traz as variáveis da marca.
   ========================================================================== */
body.publico{background:var(--ground);}

header.pub{background:var(--azul); color:#fff;}
header.pub .dentro{max-width:600px; margin:0 auto; padding:12px 16px; display:flex; align-items:center; gap:12px;}
header.pub img{height:34px; width:auto; flex:none;}
header.pub .nome{font-size:17px; font-weight:700; line-height:1.15;}
header.pub .sub{font-size:12px; opacity:.88;}
header.pub a{color:inherit; text-decoration:none; display:flex; align-items:center; gap:12px;}

main.folha{max-width:600px; margin:0 auto; padding:16px 16px 28px;}
.cartao-pub{
  background:var(--surface); border:1px solid var(--linha); border-radius:12px;
  box-shadow:var(--sombra); padding:18px 16px 20px; margin-bottom:14px;
}
.cartao-pub h2{margin:0 0 6px; font-size:20px; color:var(--azul); line-height:1.25;}
.cartao-pub .intro{margin:0 0 4px; color:var(--txt2); font-size:14.5px; line-height:1.55;}

fieldset{border:none; margin:0; padding:0; min-width:0;}
.bloco{margin-top:20px;}
.bloco > legend, .bloco > .titulo-bloco{
  font-size:15px; font-weight:700; color:var(--txt); margin-bottom:10px; padding:0;
}
.obrig{color:var(--vermelho); font-weight:700;}
.dica{font-size:13px; color:var(--txt2); margin:6px 0 0; line-height:1.5;}

/* --- categorias: quatro alvos grandes ----------------------------------- */
.categorias{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.tile{position:relative; display:block; cursor:pointer;}
.tile input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer;}
.tile .cara{
  display:flex; flex-direction:column; gap:6px; height:100%; min-height:104px;
  border:1.5px solid #c3d4da; border-radius:10px; padding:12px; background:var(--surface);
}
.tile svg{width:26px; height:26px; color:var(--azul);}
.tile .n{font-weight:700; font-size:15.5px;}
.tile .d{font-size:12px; color:var(--txt2); line-height:1.35;}
.tile input:checked + .cara{border:2px solid var(--azul); background:var(--azul-fraco); padding:11.5px;}
.tile input:checked + .cara .n::after{content:" ✓"; color:var(--azul);}
.tile input:focus-visible + .cara{outline:2px solid var(--azul2); outline-offset:2px;}

/* --- anônimo × identificado: escolha explícita -------------------------- */
/* Os radios ficam antes dos blocos, irmãos deles: `:checked ~` mostra o bloco certo
   sem depender de JavaScript. Visualmente ocultos, mas focáveis pelo teclado. */
.radio-modo{position:absolute; opacity:0; width:1px; height:1px; margin:0;}
.modo{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.modo .cara{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-height:64px; border:1.5px solid #c3d4da; border-radius:10px; background:var(--surface);
  font-weight:700; font-size:15px; text-align:center; padding:8px; cursor:pointer;
}
.modo .cara small{font-weight:400; font-size:12px; color:var(--txt2);}
#modoAnonimo:checked ~ .modo #rotAnonimo,
#modoIdentificado:checked ~ .modo #rotIdentificado{background:var(--azul); border-color:var(--azul); color:#fff;}
#modoAnonimo:checked ~ .modo #rotAnonimo small,
#modoIdentificado:checked ~ .modo #rotIdentificado small{color:#e3eef1;}
#modoAnonimo:focus-visible ~ .modo #rotAnonimo,
#modoIdentificado:focus-visible ~ .modo #rotIdentificado{outline:2px solid var(--azul2); outline-offset:2px;}
.so-anonimo, .so-identificado{display:none;}
#modoAnonimo:checked ~ .so-anonimo, #modoIdentificado:checked ~ .so-identificado{display:block;}

.garantia{
  margin-top:12px; background:var(--azul-fraco); border:1px solid #c5dde4; border-radius:10px;
  padding:12px 14px; font-size:13.5px; color:#21414b; line-height:1.55;
}
.garantia b{color:var(--azul);}
.garantia ul{margin:6px 0 0; padding-left:18px;}

/* --- campos ------------------------------------------------------------- */
.campo{display:flex; flex-direction:column; gap:5px; margin-top:12px;}
.campo.sem-topo{margin-top:0;}
.campo label{font-size:14px; font-weight:600;}
.campo input[type=text], .campo input[type=email], .campo textarea, .codigo-input{
  font-family:inherit; font-size:16px; color:var(--txt); width:100%;
  padding:12px; border:1.5px solid #c3d4da; border-radius:9px; background:var(--surface);
}
.campo input{height:48px;}
.campo textarea{min-height:170px; resize:vertical; line-height:1.55;}
.campo input:focus, .campo textarea:focus, .codigo-input:focus{border-color:var(--azul); outline:none; box-shadow:0 0 0 3px rgba(27,143,168,.2);}
[aria-invalid="true"]{border-color:var(--vermelho) !important;}
.contador{font-size:12px; color:var(--txt3); text-align:right; font-variant-numeric:tabular-nums;}
.contador.perto{color:#b56f00;} .contador.estourou{color:var(--vermelho); font-weight:600;}
.erro-campo{color:#b23347; font-size:13px; font-weight:600; margin:2px 0 0;}
.erro-campo::before{content:"⚠ ";}
.alerta-texto{font-size:13px; color:#8a5a12; background:#fff5e6; border:1px solid #f0dcb4; border-radius:8px; padding:8px 10px; margin-top:6px;}
.ciente{display:flex; gap:10px; align-items:flex-start; margin-top:14px; font-size:13.5px; line-height:1.45; cursor:pointer;}
.ciente input{width:22px; height:22px; flex:none; margin:0; accent-color:var(--azul);}
.opcional{font-weight:400; color:var(--txt3); font-size:12.5px;}

/* --- anexos -------------------------------------------------------------- */
.anexar{
  display:flex; align-items:center; justify-content:center; gap:8px; min-height:52px;
  border:1.5px dashed #9fbac3; border-radius:10px; color:var(--azul); font-weight:700;
  font-size:15px; cursor:pointer; background:#f7fafb; position:relative;
}
.anexar input{position:absolute; inset:0; opacity:0; cursor:pointer;}
.anexar svg{width:20px; height:20px;}
.anexar:focus-within{outline:2px solid var(--azul2); outline-offset:2px;}
.lista-anexos{list-style:none; padding:0; margin:8px 0 0; display:flex; flex-direction:column; gap:6px;}
.lista-anexos li{display:flex; align-items:center; gap:10px; font-size:13px; background:#f7fafb; border:1px solid var(--linha); border-radius:8px; padding:6px 8px;}
.lista-anexos img{width:40px; height:40px; object-fit:cover; border-radius:5px;}
.lista-anexos .pdf{width:40px; height:40px; border-radius:5px; background:var(--azul-fraco); color:var(--azul); display:grid; place-items:center; font-size:11px; font-weight:700;}
.lista-anexos .tam{color:var(--txt3); margin-left:auto; font-variant-numeric:tabular-nums;}

/* --- botões -------------------------------------------------------------- */
.btn-grande{
  font-family:inherit; width:100%; min-height:52px; border-radius:10px; border:none;
  background:var(--azul); color:#fff; font-size:16.5px; font-weight:700; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px; margin-top:22px; text-decoration:none;
}
.btn-grande:hover{background:var(--azul2);}
.btn-grande[disabled]{opacity:.6; cursor:wait;}
.btn-grande.sec{background:var(--surface); color:var(--azul); border:1.5px solid #b7cdd4;}
.btn-grande.sec:hover{background:var(--azul-fraco);}
.btn-grande svg{width:20px; height:20px;}
.link-sec{display:block; text-align:center; margin-top:14px; color:var(--azul); font-weight:600; font-size:14.5px;}
.armadilha{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

/* --- resumo de erros ----------------------------------------------------- */
.resumo-erros{background:#fdeef0; border:1px solid #f0c2c9; border-left:4px solid var(--vermelho); border-radius:10px; padding:12px 14px; margin-bottom:14px; color:#7a2a36; font-size:14px;}
.resumo-erros ul{margin:6px 0 0; padding-left:18px;}
.ok-msg{background:#eaf7ef; border:1px solid #bfe4cd; border-left:4px solid var(--verde); border-radius:10px; padding:12px 14px; margin-bottom:14px; color:#1f5a37; font-size:14px;}

/* --- tela de sucesso ----------------------------------------------------- */
.sucesso{text-align:center;}
.sucesso .check{width:64px; height:64px; border-radius:50%; background:#eaf7ef; color:var(--verde); display:grid; place-items:center; margin:4px auto 10px;}
.sucesso .check svg{width:34px; height:34px;}
.codigo-box{
  margin:16px 0 10px; border:2px dashed var(--azul); border-radius:12px; background:var(--azul-fraco);
  padding:16px 10px;
}
.codigo-box .rot{display:block; margin-bottom:6px;}
.codigo{
  font-family:Consolas,"Cascadia Mono","Roboto Mono",monospace; font-size:clamp(20px,6.4vw,28px);
  font-weight:700; letter-spacing:1.5px; color:var(--txt); user-select:all; word-break:break-all;
}
.protocolo{font-size:13px; color:var(--txt2); margin-top:8px;}
.botoes-codigo{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.botoes-codigo .btn-grande{margin-top:0;}
.alerta-guarde{
  text-align:left; background:#fff5e6; border:1px solid #f0dcb4; border-left:4px solid var(--laranja);
  border-radius:10px; padding:12px 14px; font-size:13.5px; color:#5c4a2a; line-height:1.55; margin-top:14px;
}
.alerta-guarde b{color:#8a5a12;}

/* --- consulta ------------------------------------------------------------ */
.codigo-input{
  font-family:Consolas,"Cascadia Mono","Roboto Mono",monospace; text-transform:uppercase;
  letter-spacing:1.5px; height:52px; font-size:18px; text-align:center;
}
.situacao{display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; margin:8px 0 2px;}
.situacao .pill{font-size:13px; padding:4px 12px;}
.linha-meta{font-size:13px; color:var(--txt2);}
.tl-pub{list-style:none; margin:14px 0 0; padding:0;}
.tl-pub li{border-left:3px solid var(--linha); padding:2px 0 14px 14px; position:relative;}
.tl-pub li.rh{border-left-color:var(--azul);}
.tl-pub .tt{font-weight:700; font-size:14px;}
.tl-pub .qd{font-size:12px; color:var(--txt3); font-variant-numeric:tabular-nums;}
.tl-pub .tx{white-space:pre-wrap; word-wrap:break-word; margin-top:6px; background:#f7fafb; border:1px solid var(--linha); border-radius:9px; padding:10px 12px; font-size:14.5px; line-height:1.55;}
.tl-pub li.rh .tx{background:var(--azul-fraco); border-color:#c5dde4;}

/* --- privacidade --------------------------------------------------------- */
.texto-longo h3{font-size:16px; color:var(--azul); margin:18px 0 6px;}
.texto-longo p, .texto-longo li{font-size:14.5px; line-height:1.6; color:var(--txt);}
.texto-longo ul{padding-left:20px;}

footer.pub{max-width:600px; margin:0 auto; padding:0 16px 28px; text-align:center; font-size:12.5px; color:var(--txt3); line-height:1.7;}
footer.pub a{color:var(--txt2);}

@media (min-width:640px){
  main.folha{padding-top:24px;}
  .cartao-pub{padding:24px 26px 26px;}
  .categorias{grid-template-columns:repeat(4,1fr);}
}