/* PlebHelp — componentes da identidade "Abrigo" (Bloco 3, base). Usa so os tokens de tokens.css.
   Prefixo .ph- para conviver com styles.css ate a etapa 2 (aplicacao nas telas). */

/* base dos componentes */
.ph,.ph *,.ph *::before,.ph *::after{box-sizing:border-box}
.ph{font-family:var(--fonte-ui);font-size:var(--texto-m);line-height:var(--altura-linha);color:var(--cor-texto);background:var(--cor-fundo);font-synthesis:none}
.ph-titulo-l,.ph-titulo-m,.ph-titulo-s{font-family:var(--fonte-titulo);font-weight:var(--peso-titulo);line-height:var(--altura-titulo);letter-spacing:-.01em;margin:0 0 var(--e-4);color:var(--cor-texto)}
.ph-titulo-l{font-size:var(--titulo-l)}
.ph-titulo-m{font-size:var(--titulo-m)}
.ph-titulo-s{font-size:var(--titulo-s)}
.ph-suave{color:var(--cor-texto-suave)}
.ph-link{color:var(--cor-link);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;display:inline-flex;align-items:center;min-height:var(--alvo-min)}
.ph-link:hover{text-decoration-thickness:2px}
.ph :focus-visible{outline:var(--foco-anel);outline-offset:var(--foco-recuo)}

/* botao: primario, secundario, texto */
.ph-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--e-2);min-height:var(--alvo-min);min-width:var(--alvo-min);padding:0 var(--e-5);border:2px solid transparent;border-radius:var(--raio-pilula);font-family:var(--fonte-ui);font-size:var(--texto-m);font-weight:var(--peso-forte);line-height:1.2;text-decoration:none;cursor:pointer;transition:background-color var(--duracao),border-color var(--duracao),color var(--duracao)}
.ph-btn--grande{min-height:var(--alvo-cta);padding:0 var(--e-6);font-size:var(--texto-l)}
.ph-btn--bloco{display:flex;width:100%}
.ph-btn--primario{background:var(--cor-acao);color:var(--cor-acao-texto)}
.ph-btn--primario:hover{background:var(--cor-acao-hover)}
.ph-btn--secundario{background:var(--cor-acao-2);color:var(--cor-acao-2-texto)}
.ph-btn--secundario:hover{background:var(--cor-acao-2-hover)}
.ph-btn--contorno{background:transparent;color:var(--cor-acao);border-color:var(--cor-acao)}
.ph-btn--contorno:hover{background:var(--cor-superficie-2)}
.ph-btn--texto{background:transparent;color:var(--cor-link);padding:0 var(--e-3);text-decoration:underline;text-underline-offset:3px}
.ph-btn--texto:hover{background:var(--cor-superficie-2)}
.ph-btn:disabled,.ph-btn[aria-disabled="true"]{background:var(--cor-desabilitado-fundo);color:var(--cor-desabilitado-texto);border-color:transparent;cursor:not-allowed;text-decoration:none}

/* campo */
.ph-campo{display:grid;gap:var(--e-2);align-content:start;margin:0 0 var(--e-5)}
.ph-campo__rotulo{font-weight:var(--peso-forte);color:var(--cor-texto)}
.ph-campo__ajuda{font-size:var(--texto-s);color:var(--cor-texto-suave);margin:0}
.ph-campo__entrada{width:100%;min-height:var(--alvo-min);padding:var(--e-2) var(--e-4);border:1.5px solid var(--cor-borda-forte);border-radius:var(--raio-s);background:var(--cor-superficie);color:var(--cor-texto);font-family:var(--fonte-ui);font-size:var(--texto-m);line-height:1.4}
textarea.ph-campo__entrada{min-height:7rem;resize:vertical}
.ph-campo__entrada::placeholder{color:var(--cor-texto-suave);opacity:1}
.ph-campo__entrada:focus-visible{outline:var(--foco-anel);outline-offset:var(--foco-recuo);border-color:var(--cor-foco)}
.ph-campo__entrada:disabled{background:var(--cor-desabilitado-fundo);color:var(--cor-desabilitado-texto);border-color:var(--cor-borda);cursor:not-allowed}
.ph-campo--erro .ph-campo__entrada,.ph-campo__entrada[aria-invalid="true"]{border-color:var(--cor-erro-borda);border-width:2px}
.ph-campo__erro{font-size:var(--texto-s);font-weight:var(--peso-forte);color:var(--cor-erro-texto);margin:0}

/* cartao de campanha */
.ph-cartao{display:flex;flex-direction:column;background:var(--cor-superficie);border:1px solid var(--cor-borda);border-radius:var(--raio-m);box-shadow:var(--sombra);overflow:hidden;color:var(--cor-texto)}
.ph-cartao__capa{aspect-ratio:16/9;background:var(--cor-trilho);display:block;width:100%;object-fit:cover}
.ph-cartao__corpo{display:grid;gap:var(--e-3);padding:var(--e-4) var(--e-5) var(--e-5)}
.ph-cartao__corpo>.ph-selo{justify-self:start}
.ph-cartao__titulo{font-family:var(--fonte-titulo);font-weight:var(--peso-titulo);font-size:var(--texto-l);line-height:var(--altura-titulo);margin:0}
.ph-cartao__titulo a{display:flex;align-items:center;min-height:var(--alvo-min);color:inherit;text-decoration:none}
.ph-cartao__titulo a:hover{text-decoration:underline}
.ph-cartao__meta{font-size:var(--texto-s);color:var(--cor-texto-suave);margin:0}
.ph-cartao__valores{display:flex;justify-content:space-between;gap:var(--e-3);font-size:var(--texto-s);color:var(--cor-texto-suave)}
.ph-cartao__valores strong{color:var(--cor-texto);font-weight:var(--peso-forte)}

/* barra de progresso */
.ph-progresso{display:block;width:100%;height:10px;border-radius:var(--raio-pilula);background:var(--cor-trilho);overflow:hidden}
.ph-progresso__barra{display:block;height:100%;border-radius:inherit;background:var(--cor-progresso);min-width:4px}

/* selo de estado */
.ph-selo{display:inline-flex;align-items:center;gap:var(--e-1);padding:var(--e-1) var(--e-3);border-radius:var(--raio-pilula);font-size:var(--texto-s);font-weight:var(--peso-forte);line-height:1.3;background:var(--cor-neutro-fundo);color:var(--cor-neutro-texto)}
.ph-selo--ok{background:var(--cor-ok-fundo);color:var(--cor-ok-texto)}
.ph-selo--espera{background:var(--cor-espera-fundo);color:var(--cor-espera-texto)}
.ph-selo--erro{background:var(--cor-erro-fundo);color:var(--cor-erro-texto)}

/* aviso */
.ph-aviso{display:grid;gap:var(--e-1);padding:var(--e-4) var(--e-5);border-radius:var(--raio-m);border-left:4px solid var(--cor-acao);background:var(--cor-superficie-2);color:var(--cor-texto)}
.ph-aviso__titulo{font-weight:var(--peso-forte);margin:0}
.ph-aviso p{margin:0}
.ph-aviso--ok{background:var(--cor-ok-fundo);color:var(--cor-ok-texto);border-left-color:var(--cor-ok-texto)}
.ph-aviso--espera{background:var(--cor-espera-fundo);color:var(--cor-espera-texto);border-left-color:var(--cor-espera-texto)}
.ph-aviso--erro{background:var(--cor-erro-fundo);color:var(--cor-erro-texto);border-left-color:var(--cor-erro-borda)}

/* cabecalho */
.ph-cabecalho{background:var(--cor-fundo);border-bottom:1px solid var(--cor-borda)}
.ph-cabecalho__faixa{display:flex;align-items:center;justify-content:space-between;gap:var(--e-4);max-width:var(--largura-max);margin:0 auto;padding:var(--e-2) var(--e-4);min-height:64px}
.ph-cabecalho__marca{display:inline-flex;align-items:center;min-height:var(--alvo-min);color:var(--cor-texto)}
.ph-cabecalho__marca img,.ph-cabecalho__marca svg{display:block;height:36px;width:auto}
.ph-cabecalho__nav{display:flex;align-items:center;gap:var(--e-2);flex-wrap:wrap}
.ph-cabecalho__nav a:not(.ph-btn){display:inline-flex;align-items:center;min-height:var(--alvo-min);padding:0 var(--e-3);border-radius:var(--raio-s);color:var(--cor-texto);text-decoration:none;font-weight:var(--peso-medio)}
.ph-cabecalho__nav a:not(.ph-btn):hover{background:var(--cor-superficie-2)}
@media (max-width:640px){.ph-cabecalho__nav .ph-oculto-mobile{display:none}}

/* rodape */
.ph-rodape{background:var(--cor-rodape-fundo);color:var(--cor-rodape-texto);padding:var(--e-7) var(--e-4) var(--e-6)}
.ph-rodape__grade{display:grid;gap:var(--e-6);grid-template-columns:repeat(auto-fit,minmax(180px,1fr));max-width:var(--largura-max);margin:0 auto}
.ph-rodape__titulo{font-family:var(--fonte-titulo);font-weight:var(--peso-titulo);font-size:var(--texto-l);margin:0 0 var(--e-2)}
.ph-rodape ul{list-style:none;margin:0;padding:0}
.ph-rodape a{display:inline-flex;align-items:center;min-height:var(--alvo-min);min-width:var(--alvo-min);color:var(--cor-rodape-texto);text-decoration:underline;text-underline-offset:3px}
.ph-rodape p,.ph-rodape__nota{color:var(--cor-rodape-suave);font-size:var(--texto-s);margin:0}
.ph-rodape :focus-visible{outline-color:var(--cor-rodape-texto)}

/* estado vazio e estado de erro */
.ph-vazio,.ph-estado-erro{display:grid;justify-items:center;gap:var(--e-3);text-align:center;padding:var(--e-7) var(--e-5);border-radius:var(--raio-l);color:var(--cor-texto)}
.ph-vazio{background:var(--cor-superficie-2);border:1.5px dashed var(--cor-borda-forte)}
.ph-estado-erro{background:var(--cor-erro-fundo);border:1.5px solid var(--cor-erro-borda)}
.ph-vazio__icone,.ph-estado-erro__icone{width:48px;height:48px;color:var(--cor-acao-2)}
.ph-estado-erro__icone{color:var(--cor-erro-texto)}
.ph-vazio__titulo,.ph-estado-erro__titulo{font-family:var(--fonte-titulo);font-weight:var(--peso-titulo);font-size:var(--titulo-s);line-height:var(--altura-titulo);margin:0}
.ph-estado-erro__titulo,.ph-estado-erro p{color:var(--cor-erro-texto)}
.ph-vazio p,.ph-estado-erro p{margin:0;max-width:44ch}
.ph-vazio p{color:var(--cor-texto-suave)}

/* barra fixa de doar (celular) */
.ph-barra-fixa{position:sticky;bottom:0;display:flex;gap:var(--e-3);padding:var(--e-3) var(--e-4);background:var(--cor-superficie);box-shadow:var(--sombra-fixa)}
@media (min-width:900px){.ph-barra-fixa{position:static;box-shadow:none;padding:0;background:transparent}}

/* utilitario de acessibilidade */
.ph-so-leitor{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}