), e por isso ja nasce full-bleed sem
precisar de gambiarra com 100vw. */
.hero { background: var(--slate-900); color: #fff; padding: 3.5rem 0; text-align: center; }
@media (min-width: 768px) { .hero { padding: 4.5rem 0; } }
/* Paginas sem CTA no hero (formulario, consulta, sucesso) recebem uma faixa
mais baixa: la o que importa e o campo, nao a chamada, e o hero cheio
empurrava o primeiro passo para fora da primeira tela. */
.hero--curto { padding: 2.5rem 0; }
@media (min-width: 768px) { .hero--curto { padding: 3rem 0; } }
.hero--curto h1 { font-size: clamp(1.75rem, 3.6vw, 2.75rem); }
.hero--curto .hero__sub { margin-bottom: 0; }
.hero__in { max-width: 56rem; margin: 0 auto; }
.hero h1 {
color: #fff; font-size: clamp(2rem, 5vw, 3.75rem); line-height: 1.1;
letter-spacing: -.02em; margin: 0 0 1.25rem;
}
.hero h1 em { color: var(--marca); font-style: normal; }
.hero__sub {
color: var(--slate-300); margin: 0 auto 2rem; max-width: 42rem;
font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.6;
}
.hero__cta { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.hero__cta--centro { justify-content: center; margin-top: 1.4rem; }
/* Contorno branco translucido: o segundo CTA do site nos fundos escuros. */
.hero .btn--secundario { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
.hero .btn--secundario:hover { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.5); }
.hero .btn--primario:hover { background: var(--marca-escura); }
/* ---------- Texto institucional ----------
Coluna de leitura estreita sobre branco, sem moldura de cartao: a pagina do
Codigo de Conduta trata texto normativo assim, e este texto e o par dele. */
.institucional { max-width: var(--max-texto); margin: 0 auto; font-size: 1.03rem; }
.institucional p { margin: 0 0 1.15rem; color: #334155; }
/* O rotulo mono e um dentro de .institucional, e `.institucional p` tem
especificidade maior que `.ds-label`: sem esta linha o rotulo sairia cinza,
nao laranja. Mesma armadilha de ordem/especificidade que apareceu no
sumario do Codigo de Conduta. */
.institucional .ds-label { color: var(--marca); margin-bottom: 1.5rem; }
.institucional strong { color: var(--texto); }
.institucional__nota { font-weight: 700; color: var(--marca-escura); }
/* Unico bloco com moldura: o aviso de que o envio nao e anonimo de verdade.
Se tudo tivesse destaque, isso passaria batido, e e justamente o paragrafo
que a pessoa precisa ler antes de decidir se envia. */
.institucional__aviso {
background: var(--surface-2); border: 1px solid var(--borda); border-left: 3px solid var(--marca);
border-radius: var(--raio-sm); padding: 1.1rem 1.3rem; margin: 1.6rem 0 !important;
}
/* ---------- Formulários ---------- */
/* Cartao no padrao do site: borda slate-100 (quase invisivel) e sombra baixa,
deixando o conteudo carregar o peso visual, nao a moldura. */
.form-wrap { background: var(--surface); border: 1px solid var(--borda-suave); border-radius: var(--raio); padding: 2rem; box-shadow: var(--sombra); max-width: 860px; margin: 0 auto; }
.form-wrap--estreito { max-width: 560px; }
.form label { display: block; margin: 0 0 1rem; font-weight: 600; }
.form input, .form select, .form textarea {
width: 100%; margin-top: .35rem; padding: .65rem .7rem; font: inherit; font-weight: 400;
border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--surface);
color: var(--texto);
}
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--marca-clara); outline-offset: 1px; border-color: var(--marca); }
.sel-cor { transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.form textarea { resize: vertical; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
fieldset { border: 1px solid var(--borda); border-radius: var(--raio-sm); padding: .8rem 1rem; margin: 0 0 1rem; }
legend { font-weight: 700; padding: 0 .4rem; }
.radios { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.radios label { font-weight: 500; display: flex; align-items: center; gap: .35rem; margin: 0; }
.radios input { width: auto; margin: 0; }
.check { display: flex; gap: .6rem; align-items: flex-start; font-weight: 500; }
.check input { width: auto; margin-top: .25rem; }
.declaracao { background: var(--surface-2); }
.form-acoes { display: flex; gap: .8rem; align-items: center; margin-top: .5rem; }
.erro-campo { display: block; color: var(--vermelho); font-weight: 600; font-size: .85rem; margin-top: .25rem; }
.contador { display: block; margin-top: .25rem; font-size: .8rem; font-weight: 600; }
.contador--ok { color: var(--marca-escura); }
.desc-rodape { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-top: .4rem; }
.desc-rodape .contador { margin-top: 0; }
.btn-ditar { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .9rem; border: 1px solid var(--marca); background: var(--surface); color: var(--marca-escura); border-radius: var(--raio-sm); font: inherit; font-weight: 600; cursor: pointer; transition: .15s; }
.btn-ditar:hover { background: var(--surface-2); }
.btn-ditar.is-gravando { background: #fdeceb; color: #b3261e; border-color: #b3261e; animation: ditar-pulsa 1.2s infinite; }
@keyframes ditar-pulsa { 0%,100% { box-shadow: 0 0 0 0 rgba(179,38,30,.45); } 50% { box-shadow: 0 0 0 7px rgba(179,38,30,0); } }
.ditar-dica { display: block; margin-top: .35rem; font-size: .8rem; }
.hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.consulta-form { display: flex; gap: .8rem; align-items: flex-end; flex-wrap: wrap; }
.consulta-form label { flex: 1 1 220px; margin: 0; }
/* ---------- Assistente passo a passo ---------- */
.wizard-wrap { max-width: 720px; }
.wizard-intro { font-size: 1.02rem; }
.wiz-progress { margin: 1rem 0 1.4rem; }
.wiz-progress[hidden] { display: none; }
/* Trilho visivel atras da barra: sem ele nao se ve quanto falta, so quanto
andou. A barra em si e laranja; o trilho, slate-200. */
.wiz-progress__bar { height: 6px; background: var(--marca); border-radius: 999px; width: 16%; transition: width .35s ease; box-shadow: 0 0 0 0 transparent; }
.wiz-progress { position: relative; }
.wiz-progress::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--borda); border-radius: 999px; }
.wiz-progress__bar { position: relative; z-index: 1; }
/* "PASSO 2 DE 6" em mono caixa-alta: o mesmo tratamento que o site da aos
rotulos de secao (.ds-label). */
.wiz-progress__txt { display: block; margin-top: .6rem; font-family: var(--mono); font-size: .7rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-suave); }
.wiz-step.is-hidden { display: none; }
.wiz-pergunta { font-size: 1.4rem; margin: .2rem 0 .3rem; }
.wiz-pergunta--mt { margin-top: 1.8rem; }
.wiz-ajuda { color: var(--texto-suave); margin: 0 0 1rem; }
.sub-bloco { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px dashed var(--borda); }
.opt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; margin: .4rem 0; }
.opt-grid--2 { grid-template-columns: 1fr 1fr; }
.opt-grid--3 { grid-template-columns: repeat(3, 1fr); }
.opt-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: .35rem; text-align: center; padding: 1.1rem .7rem; border: 2px solid var(--borda); border-radius: var(--raio);
background: var(--surface); cursor: pointer; font-weight: 600; transition: .15s ease; min-height: 96px; }
.opt-card:hover { border-color: var(--marca-clara); background: var(--surface-2); transform: translateY(-1px); }
.opt-card input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.opt-card__ic { color: var(--marca); line-height: 0; display: inline-flex; }
.opt-card__ic .ico { width: 30px; height: 30px; }
.opt-card:has(input:checked) .opt-card__ic { color: var(--marca-escura); }
.opt-card__txt { font-size: .95rem; }
.opt-card:has(input:checked) { border-color: var(--marca); background: rgba(235,102,8,.10); box-shadow: 0 0 0 3px rgba(235,102,8,.18); }
.opt-card:has(input:checked)::after { content: "✓"; position: absolute; top: .4rem; right: .55rem; color: var(--marca); font-weight: 800; }
.opt-card input:focus-visible + .opt-card__ic { outline: 2px solid var(--marca); outline-offset: 4px; border-radius: 4px; }
.mais-detalhes { margin: 1rem 0; border: 1px solid var(--borda); border-radius: var(--raio-sm); padding: .3rem .9rem; background: var(--surface-2); }
.mais-detalhes summary { cursor: pointer; font-weight: 600; color: var(--marca-escura); padding: .5rem 0; }
.upload-label { display: block; background: var(--surface-2); border: 1px dashed var(--marca-clara); border-radius: var(--raio-sm); padding: 1rem; font-weight: 600; }
.declaracao-box { background: var(--surface-2); border-radius: var(--raio-sm); padding: 1rem; margin-top: 1.2rem; font-weight: 500; }
.aviso-retorno { background: #fff4d6; color: #7a5a08; border: 1px solid #ecdba6; border-radius: var(--raio-sm); padding: .7rem .9rem; }
html[data-tema="escuro"] .aviso-retorno { background: #322a12; color: #e6c870; border-color: #574a1e; }
.wiz-nav { display: flex; align-items: center; gap: .8rem; margin-top: 1.8rem; }
.wiz-nav [data-wiz-proximo], .wiz-nav [data-wiz-enviar] { margin-left: auto; }
.btn--grande { padding: .85rem 1.6rem; font-size: 1.05rem; }
.btn.is-enviando, button.is-enviando, input.is-enviando { opacity: .65; cursor: progress; }
/* Botao desabilitado tinha o atributo disabled mas nenhum estilo: continuava
laranja e com cara de clicavel, o que faz a pessoa clicar e achar que a
tela travou. Perde a cor, a sombra e o gesto de hover. */
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; filter: grayscale(.6); box-shadow: none; }
.btn:disabled:hover, .btn[disabled]:hover { transform: none; box-shadow: none; }
/* ---------- Flash ---------- */
.flash { padding: .8rem 1rem; border-radius: var(--raio-sm); margin: 0 0 1.2rem; font-weight: 600; border: 1px solid; }
.flash--sucesso { background: #e7f5ec; color: #176b39; border-color: #b6dcc4; }
.flash--erro { background: #fdeceb; color: #9a2b22; border-color: #f1c4c0; }
.flash--aviso { background: #fdf6e3; color: #8a6d11; border-color: #ecdba6; }
html[data-tema="escuro"] .flash--sucesso { background: #14301f; color: #7fdba1; border-color: #2c5a3c; }
html[data-tema="escuro"] .flash--erro { background: #361a18; color: #f1a8a1; border-color: #5e2a26; }
html[data-tema="escuro"] .flash--aviso { background: #322a12; color: #e6c870; border-color: #574a1e; }
/* ---------- Sucesso / protocolo ---------- */
.sucesso { background: var(--surface); border: 1px solid var(--borda-suave); border-radius: var(--raio); padding: 2.5rem 2rem; text-align: center; max-width: 620px; margin: 0 auto; box-shadow: var(--sombra); }
.sucesso__icone { width: 72px; height: 72px; margin: 0 auto 1rem; border-radius: 50%; background: var(--marca); color: #fff; font-size: 2.2rem; display: grid; place-items: center; }
.protocolo-box { background: var(--surface-2); border: 1px dashed var(--marca); border-radius: var(--raio); padding: 1.2rem; margin: 1.5rem 0; }
.protocolo-box__rotulo { display: flex; align-items: center; justify-content: center; gap: .4rem; font-family: var(--mono); font-size: .7rem; font-weight: 500; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .12em; }
.protocolo-box__rotulo .ico { width: 14px; height: 14px; }
/* Protocolo e PIN em JetBrains Mono: no design system do site a mono e a fonte
de dado, e o protocolo e exatamente isso. De quebra, mono e a fonte em que
se copia um codigo sem confundir 0 com O nem 1 com l. */
.protocolo-box__num { display: block; font-size: 1.8rem; font-weight: 700; font-family: var(--mono); letter-spacing: .04em; color: var(--marca); margin: .4rem 0 .9rem; }
.salvo-aviso { background: #e7f5ec; color: #176b39; border: 1px solid #b6dcc4; border-radius: var(--raio-sm); padding: .7rem 1rem; }
html[data-tema="escuro"] .salvo-aviso { background: #14301f; color: #7fdba1; border-color: #2c5a3c; }
.meus-protocolos { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--borda); }
.meus-protocolos h2 { font-size: 1.05rem; margin: 0 0 .2rem; }
.meus-protocolos__lista { display: flex; flex-direction: column; gap: .5rem; margin-top: .6rem; }
.proto-chip { display: flex; flex-direction: column; border: 1px solid var(--borda); border-radius: var(--raio-sm); overflow: hidden; background: var(--surface); }
.proto-chip.is-aberto { border-color: var(--marca); box-shadow: 0 0 0 2px rgba(235,102,8,.15); }
.proto-chip__row { display: flex; align-items: stretch; }
.proto-chip__res { padding: .85rem 1rem; border-top: 1px solid var(--borda); background: var(--surface-2); }
.proto-res__dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; margin: 0 0 .6rem; }
.proto-res__dl dt { font-weight: 600; color: var(--texto-suave); }
.proto-res__dl dd { margin: 0; }
.proto-chip__btn { flex: 1; text-align: left; background: transparent; border: 0; padding: .6rem .9rem; cursor: pointer; font: inherit; color: var(--texto); display: flex; flex-direction: column; gap: .1rem; }
.proto-chip__btn.is-carregando { opacity: .6; }
/* ----- Avaliação 5 estrelas (consulta) ----- */
.aval { margin-top: 1rem; padding-top: .8rem; border-top: 1px dashed var(--borda); }
.aval__label { font-weight: 600; display: block; margin-bottom: .35rem; }
.aval__estrelas { display: inline-flex; gap: .1rem; line-height: 1; }
.aval__star { background: none; border: 0; padding: 0 .06rem; cursor: pointer; color: #d6dbd6;
font-size: 1.7rem; line-height: 1; transition: color .12s ease, transform .12s ease; font-family: inherit; }
.aval__star.is-on { color: #f5b301; }
.aval button.aval__star:hover { transform: scale(1.18); }
span.aval__star { cursor: default; }
.aval__coment { display: block; width: 100%; margin-top: .55rem; }
.aval__msg { margin-top: .55rem; font-weight: 600; color: var(--marca-escura); }
/* ----- Avaliação no painel ----- */
.dash-star { color: #d6dbd6; font-size: 1.2rem; letter-spacing: 1px; }
.dash-star.is-on { color: #f5b301; }
.aval-resumo { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center; }
.aval-media { text-align: center; }
.aval-media__num { display: block; font-family: var(--mono); font-size: 2.4rem; font-weight: 700; color: var(--texto); line-height: 1; letter-spacing: -.02em; }
.aval-media__estrelas .dash-star { font-size: 1.4rem; }
.aval-dist { list-style: none; margin: 0; padding: 0; flex: 1 1 240px; display: flex; flex-direction: column; gap: .35rem; }
.aval-dist li { display: flex; align-items: center; gap: .6rem; }
.aval-dist .gb-trilho { flex: 1; }
.aval-dist__n { width: 2.2rem; font-weight: 600; color: var(--texto-suave); font-size: .9rem; }
.aval-dist__c { width: 2rem; text-align: right; color: var(--texto-suave); font-size: .9rem; }
.aval-coments { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .8rem; }
.aval-coments li { border: 1px solid var(--borda); border-radius: var(--raio-sm); padding: .7rem .9rem; }
.aval-coments__top { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .85rem; margin-bottom: .3rem; }
.aval-coments p { margin: 0; }
.proto-chip__btn:hover { background: var(--surface-2); }
.proto-chip__btn strong { color: var(--marca-escura); letter-spacing: .03em; }
.proto-chip__btn small { color: var(--texto-suave); font-size: .78rem; }
.proto-chip__rm { background: transparent; border: 0; border-left: 1px solid var(--borda); padding: 0 .9rem; cursor: pointer; color: var(--texto-suave); font-size: 1rem; }
.proto-chip__rm:hover { background: #fdeceb; color: #b3261e; }
.protocolo-box--codigo { border-color: var(--amarelo); }
.protocolo-box--codigo .protocolo-box__num { color: var(--amarelo); letter-spacing: .18em; }
.codigo-aviso { margin: .8rem 0 0; font-size: .88rem; color: var(--texto-suave); }
.resposta-ouvidoria { margin-top: 1.2rem; background: #e7f1fb; border: 1px solid #bcd6f2; border-left: 4px solid var(--azul); border-radius: var(--raio-sm); padding: 1rem 1.1rem; }
.resposta-ouvidoria h3 { margin: 0 0 .4rem; color: #1d4ed8; font-size: 1rem; }
.resposta-ouvidoria p { margin: 0; }
.resposta-ouvidoria__data { margin-top: .5rem !important; font-size: .8rem; }
html[data-tema="escuro"] .resposta-ouvidoria { background: #122237; border-color: #284164; }
html[data-tema="escuro"] .resposta-ouvidoria h3 { color: #7fb0f5; }
.campo-publico { background: #eef7f0; border: 1px solid #bfe0c8; border-radius: var(--raio-sm); padding: .8rem; }
.campo-publico small { display: block; margin: .1rem 0 .3rem; font-weight: 400; }
html[data-tema="escuro"] .campo-publico { background: #15281c; border-color: #2c4a36; }
.respostas-anteriores { display: flex; flex-direction: column; gap: .6rem; margin: .5rem 0 1rem; }
.resposta-anterior { background: var(--surface); border: 1px solid var(--borda); border-left: 3px solid var(--marca); border-radius: var(--raio-sm); padding: .6rem .8rem; }
.resposta-anterior__cab { display: flex; gap: .6rem; justify-content: space-between; flex-wrap: wrap; font-size: .85rem; margin-bottom: .3rem; }
.resposta-anterior__texto { font-size: .92rem; }
/* Ícone de manifestação anônima (estilo "janela anônima") */
.ico-anon { display: inline-flex; align-items: center; gap: .25rem; color: var(--texto-suave); vertical-align: middle; }
.ico-anon svg { display: block; }
.resultado-consulta { margin-top: 1.5rem; background: var(--surface-2); border-radius: var(--raio); padding: 1.4rem; border: 1px solid var(--borda); }
.resultado-consulta dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; margin: .5rem 0; }
.resultado-consulta dt { font-weight: 700; color: var(--texto-suave); }
.resultado-consulta dd { margin: 0; }
.andamento { font-size: 1.05rem; }
/* ---------- Footer público ----------
Mesmo desenho do rodape do site: slate-900 em colunas, titulo de coluna com
o tracinho laranja, e uma barra slate-950 mais escura embaixo com o
copyright. Fica escuro nos dois temas: no site ele e escuro sempre, e um
rodape que muda de cor com o tema quebraria o reconhecimento. */
.pub-footer {
background: var(--slate-900); color: var(--slate-300);
margin-top: 4rem; padding: 3.5rem 0 0; border-top: 1px solid var(--slate-800);
text-align: left;
}
.pub-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2.5rem; padding-bottom: 3rem; }
.pub-footer h3 {
color: #fff; font-size: 1.05rem; margin: 0 0 1.6rem;
position: relative; display: inline-block;
}
.pub-footer h3::after { content: ''; position: absolute; left: 0; bottom: -.5rem; width: 2rem; height: 3px; background: var(--marca); border-radius: 999px; }
.pub-footer p { margin: 0 0 .8rem; font-size: .875rem; line-height: 1.65; color: var(--slate-400); }
.pub-footer__logo { height: 40px; width: auto; margin-bottom: 1.2rem; display: block; }
.pub-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .8rem; }
.pub-footer ul a, .pub-footer p a { display: inline-flex; align-items: center; gap: .5rem; color: var(--slate-300); text-decoration: none; font-size: .875rem; font-weight: 600; transition: color .15s ease; }
.pub-footer ul a:hover, .pub-footer p a:hover { color: var(--marca); }
.pub-footer ul a .ico { width: 16px; height: 16px; color: var(--marca); flex-shrink: 0; }
.pub-footer__sigilo { display: flex; gap: .7rem; align-items: flex-start; background: rgba(30,41,59,.5); border: 1px solid rgba(51,65,85,.5); border-radius: var(--raio-sm); padding: 1rem; }
.pub-footer__sigilo .ico { width: 20px; height: 20px; color: var(--marca); flex-shrink: 0; margin-top: .15rem; }
.pub-footer__sigilo p { margin: 0; }
.pub-footer__barra { background: var(--slate-950); border-top: 1px solid rgba(30,41,59,.5); padding: 1.5rem 0; }
.pub-footer__barra .container { display: flex; flex-direction: column; gap: .5rem; align-items: center; justify-content: space-between; font-size: .75rem; color: #64748b; }
@media (min-width: 768px) { .pub-footer__barra .container { flex-direction: row; } }
.pub-footer__barra p { margin: 0; font-size: .75rem; color: #64748b; }
.pub-footer__barra strong { color: var(--slate-300); font-weight: 600; }
.adm-credito { margin: .7rem 0 0; font-size: .66rem; line-height: 1.35; opacity: .6; text-align: center; }
.adm-credito strong { font-weight: 600; }
.adm-credito { margin: .7rem 0 0; font-size: .66rem; line-height: 1.35; opacity: .6; text-align: center; }
.adm-credito strong { font-weight: 600; }
/* ---------- Badges ---------- */
.badge { display: inline-block; padding: .2rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 700; border: 1px solid transparent; white-space: nowrap; }
.st-nova { background:#e6effd; color:#1d4ed8; }
.st-analise { background:#fff4d6; color:#92710c; }
.st-apuracao { background:#ede3fb; color:#6b30c2; }
.st-aguardando { background:#fde9d6; color:#9a560b; }
.st-resolvida { background:#e2f6e8; color:#176b39; }
.st-arquivada { background:#eceff1; color:#546069; }
.pr-baixa { background:#eceff1; color:#546069; }
.pr-media { background:#e6effd; color:#1d4ed8; }
.pr-alta { background:#fde9d6; color:#9a560b; }
.pr-urgente { background:#fdeceb; color:#b3261e; }
.badge--perfil { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.35); }
.tag-anon { font-size: .7rem; color: var(--texto-suave); font-style: italic; }
/* ---------- Login ----------
Fundo slate-900 chapado, o mesmo do hero das paginas internas do site, no
lugar do gradiente laranja. O laranja fica para o botao Entrar: quando ele e
a superficie inteira, nada consegue se destacar nele. */
.login-body { min-height: 100vh; display: grid; place-items: center; background: var(--slate-900); padding: 1rem; }
.login-card { background: var(--surface); border-radius: var(--raio); padding: 2.2rem; width: 100%; max-width: 420px; box-shadow: 0 20px 50px rgba(2,6,23,.55); }
.login-card__brand { text-align: center; margin-bottom: 1.6rem; }
/* Logo do site em tamanho de assinatura, sobre o cartao branco (onde a palavra
"iphosting", que e escura, aparece direito). */
.login-card__brand img { height: 44px; width: auto; margin: 0 auto .9rem; display: block; }
.login-card__brand h1 { margin: 0; font-size: 1.3rem; }
.login-card__brand p { margin: .25rem 0 0; color: var(--texto-suave); font-size: .9rem; }
.login-card__voltar { text-align: center; margin: 1.2rem 0 0; }
.login-card__voltar a { font-size: .875rem; font-weight: 600; }
/* ---------- Admin shell ----------
A barra lateral era laranja chapada (heranca do canal do Clube Campestre).
Agora e slate-900 com o laranja como ACENTO: e a divisao que o site faz
entre superficie escura e destaque, e o item ativo volta a ser legivel. */
.adm { background: var(--surface-2); }
.adm-shell { display: flex; min-height: 100vh; }
.adm-side { width: 250px; background: var(--slate-900); color: var(--slate-300); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; border-right: 1px solid var(--slate-800); }
.adm-menu-toggle { display: none; position: fixed; top: .6rem; left: .6rem; z-index: 40; background: var(--slate-900); color: #fff; border: 0; border-radius: var(--raio-sm); width: 44px; height: 44px; font-size: 1.4rem; cursor: pointer; box-shadow: var(--sombra); }
.adm-side__brand { padding: 1.4rem 1.3rem; border-bottom: 1px solid var(--slate-800); }
/* Sem logotipo aqui, pelo mesmo motivo do rodape publico: a arte tem a palavra
"iphosting" em tom escuro e sumia no slate-900. Antes havia uma placa branca
atras dela para contornar isso, o que parecia remendo. */
.adm-side__brand strong { display: block; font-family: var(--serif); font-weight: 700; font-size: 1.15rem; color: #fff; line-height: 1.15; }
.adm-side__brand small { display: block; font-family: var(--mono); font-size: .68rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--marca); margin-top: .3rem; }
.adm-menu { display: flex; flex-direction: column; padding: .8rem 0; flex: 1; }
.adm-menu a { display: flex; align-items: center; gap: .7rem; color: var(--slate-300); text-decoration: none; padding: .65rem 1.3rem; font-weight: 600; font-size: .9rem; border-left: 3px solid transparent; transition: background-color .15s ease, color .15s ease; }
.adm-menu a .ico { width: 18px; height: 18px; color: #64748b; flex-shrink: 0; transition: color .15s ease; }
.adm-menu a:hover { background: rgba(30,41,59,.7); color: #fff; }
.adm-menu a:hover .ico { color: var(--marca); }
.adm-menu a.is-ativo { background: rgba(235,102,8,.14); color: #fff; border-left-color: var(--marca); }
.adm-menu a.is-ativo .ico { color: var(--marca); }
.adm-side__rodape { padding: 1rem 1.3rem; border-top: 1px solid var(--slate-800); display: flex; flex-direction: column; gap: .7rem; }
.adm-side__rodape .tema-btn { width: 100%; text-align: left; display: flex; align-items: center; gap: .5rem; color: var(--slate-400); border: 1px solid var(--slate-800); background: transparent; padding: .5rem .7rem; font-size: .85rem; font-weight: 600; }
.adm-side__rodape .tema-btn:hover { color: #fff; background: rgba(30,41,59,.7); }
/* "Sair" em tom avermelhado: e a unica acao da barra que interrompe o
trabalho, e vale ela nao se confundir com um item de navegacao. */
.adm-side__rodape .sair { display: flex; align-items: center; gap: .5rem; color: #fca5a5; text-decoration: none; font-weight: 600; font-size: .875rem; }
.adm-side__rodape .sair:hover { color: #f87171; }
.adm-side__rodape .sair .ico { width: 16px; height: 16px; }
.adm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* Barra de titulo igual ao cabecalho publico e ao nav do site: branco
translucido com desfoque e borda de 1px em slate-100. */
.adm-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 1.6rem; min-height: 72px; background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--borda-suave); position: sticky; top: 0; z-index: 5; }
.adm-top h1 { margin: 0; font-size: 1.35rem; }
.adm-top__user { display: flex; align-items: center; gap: .6rem; font-weight: 600; text-decoration: none; color: inherit; }
.adm-top__user:hover .adm-top__nome { color: var(--marca); }
/* ----- Avatar (foto de perfil) ----- */
.avatar { display: inline-grid; place-items: center; border-radius: 50%; object-fit: cover;
background: var(--marca); color: #fff; font-family: var(--serif); font-weight: 700;
overflow: hidden; flex-shrink: 0; line-height: 1; }
.avatar--sm { width: 34px; height: 34px; font-size: .95rem; }
.avatar--lg { width: 120px; height: 120px; font-size: 2.6rem; box-shadow: var(--sombra); }
.perfil-foto { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-bottom: .4rem; }
.perfil-foto__acoes { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.upload-label--foto { display: inline-flex; align-items: center; gap: .5rem; width: auto; cursor: pointer; }
.perfil-foto__nome { font-weight: 400; color: var(--texto-suave); font-size: .9rem; }
.perfil-foto__remover { display: flex; align-items: center; gap: .4rem; font-weight: 500; }
.perfil-foto__remover input { width: auto; }
.user-cell { display: inline-flex; align-items: center; gap: .55rem; }
/* ----- Usuários: layout em cartões (não estoura a tela) ----- */
.usuarios-grid { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 1.2rem; align-items: start; }
.user-list { display: flex; flex-direction: column; gap: .8rem; }
.user-row { border: 1px solid var(--borda); border-radius: var(--raio-sm); padding: .9rem 1rem; background: var(--surface); }
.user-row__main { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.user-row__id { display: flex; flex-direction: column; min-width: 0; }
.user-row__id strong { line-height: 1.2; }
.user-row__id .muted { font-size: .85rem; word-break: break-all; }
.user-row__main .badge { margin-left: auto; }
.user-row__meta { display: flex; align-items: center; gap: .6rem 1.2rem; flex-wrap: wrap; margin-top: .7rem; }
.user-row__perfil { display: inline-flex; align-items: center; gap: .4rem; margin: 0; font-weight: 600; }
.user-row__perfil select { width: auto; }
.user-row__acesso { font-size: .85rem; }
.user-row__catnota { margin: .7rem 0 0; font-size: .88rem; }
.user-row__cats { margin-top: .7rem; }
.user-row__cats summary { cursor: pointer; font-weight: 600; color: var(--marca-escura); }
.cat-form--row { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: .6rem; align-items: center; }
.cat-form--row .btn { flex-basis: 100%; align-self: flex-start; width: auto; margin-top: .3rem; }
.user-row__acoes { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .7rem; align-items: center; }
.chk-inline { display: flex; align-items: center; gap: .45rem; font-weight: 500; }
.chk-inline input { width: auto; margin: 0; }
.btn--perigo { color: var(--vermelho); }
.btn--perigo:hover { background: rgba(192,57,43,.1); }
@media (max-width: 860px) { .usuarios-grid { grid-template-columns: 1fr; } }
.adm-content { padding: 1.6rem; }
/* ---------- Cards dashboard ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 1rem; margin-bottom: 1.6rem; }
.card-num { background: var(--surface); border: 1px solid var(--borda-suave); border-radius: var(--raio); padding: 1.2rem; text-decoration: none; color: var(--texto); box-shadow: var(--sombra); border-top: 4px solid var(--marca); transition: .15s; }
.card-num:hover { transform: translateY(-2px); }
/* Valor em JetBrains Mono e rotulo em mono caixa-alta: no design system do
site a mono e a fonte de numero e de rotulo, e um painel de contagens e
exatamente isso. De quebra, mono alinha os digitos entre os cartoes.
A cor da borda de cima FICA: ela codifica o status e e a mesma dos badges,
entao e informacao, nao enfeite. */
.card-num__valor { display: block; font-size: 2rem; font-weight: 700; font-family: var(--mono); letter-spacing: -.02em; line-height: 1.1; }
.card-num__rotulo { display: block; margin-top: .5rem; color: var(--texto-suave); font-family: var(--mono); font-size: .64rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; line-height: 1.45; }
.c-total { border-top-color: var(--marca); }
.c-nova { border-top-color: #1d4ed8; }
.c-analise { border-top-color: #92710c; }
.c-apuracao { border-top-color: #6b30c2; }
.c-aguardando { border-top-color: #9a560b; }
.c-resolvida { border-top-color: #176b39; }
.c-arquivada { border-top-color: #546069; }
.c-urgente { border-top-color: #b3261e; }
.painel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.metricao { font-size: 2.1rem; font-weight: 700; color: var(--marca); margin: .3rem 0; font-family: var(--mono); letter-spacing: -.02em; display: flex; align-items: baseline; gap: .45rem; }
.metricao__un { font-family: var(--sans); font-size: .95rem; font-weight: 600; color: var(--texto-suave); letter-spacing: 0; }
.mini-tab { width: 100%; border-collapse: collapse; }
.mini-tab td { padding: .35rem 0; border-bottom: 1px solid var(--borda); }
.mini-tab td.num { text-align: right; font-weight: 700; }
/* ---------- Gráficos do dashboard ---------- */
.painel-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.4rem; align-items: start; }
.card--destaque { border-top: 4px solid var(--marca); }
.pico-frase { background: var(--surface-2); border-radius: var(--raio-sm); padding: .6rem .8rem; margin: 0 0 1rem; }
.pico-frase strong { color: var(--marca-escura); }
.grafico-barras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.grafico-barras li { display: grid; grid-template-columns: 130px 1fr 34px; align-items: center; gap: .6rem; font-size: .88rem; }
.gb-rotulo { color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gb-trilho { background: var(--surface-2); border-radius: 999px; height: 16px; overflow: hidden; }
.gb-barra { display: block; height: 100%; border-radius: 999px; background: var(--marca); min-width: 3px; transition: width .5s ease; }
.gb-valor { text-align: right; font-weight: 700; }
.grafico-barras li.is-pico .gb-barra { background: var(--marca); box-shadow: 0 0 0 2px rgba(235,102,8,.25); }
.grafico-barras li.is-pico .gb-rotulo { color: var(--marca-escura); font-weight: 700; }
.grafico-colunas { display: flex; align-items: flex-end; gap: .5rem; height: 180px; padding-top: .5rem; }
.gc-item { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.gc-trilho { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.gc-col { width: 70%; max-width: 46px; background: #fbc79b; border-radius: 6px 6px 0 0; position: relative; display: flex; justify-content: center; min-height: 4px; transition: height .5s ease; }
.gc-col.is-pico { background: var(--marca); }
.gc-valor { position: absolute; top: -1.2rem; font-size: .78rem; font-weight: 700; color: var(--texto-suave); }
.gc-rotulo { margin-top: .35rem; font-size: .75rem; color: var(--texto-suave); }
/* Envio e listagem das notas internas. */
.form-notas { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; margin: 1rem 0 .4rem; }
.upload-label--notas { display: inline-flex; align-items: center; gap: .5rem; width: auto;
cursor: pointer; margin: 0; font-size: .9rem; }
.upload-label--notas .ico { width: 18px; height: 18px; color: var(--marca); }
/* O seletor de arquivo do navegador nao encolhe sozinho: com o rotulo ao lado,
ele media 420px e estourava a tela em 375px (medido). max-width e min-width:0
fazem ele caber, e no celular o rotulo empilha em vez de disputar a linha. */
.upload-label--notas input[type=file] { display: block; margin-top: .4rem; font-size: .85rem;
width: 100%; max-width: 100%; min-width: 0; }
.upload-label--notas { flex-direction: column; align-items: flex-start; max-width: 100%; min-width: 0; }
@media (min-width: 640px) { .upload-label--notas { max-width: 30rem; } }
.form-notas { max-width: 100%; }
.notas-titulo { font-size: .95rem; margin: 1.6rem 0 .6rem; color: var(--texto) !important; }
.lista-notas { list-style: none; margin: 0 0 1.2rem; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.lista-notas li { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
border: 1px solid var(--borda-suave); border-radius: var(--raio-sm); padding: .6rem .8rem; background: var(--surface); }
.lista-notas__nome { font-family: var(--mono); font-size: .82rem; font-weight: 500; flex: 1 1 200px; min-width: 0;
display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; word-break: break-all; }
.lista-notas__meta { font-family: var(--mono); font-size: .7rem; color: var(--texto-suave); white-space: nowrap; }
.notas-vazia { margin: 1rem 0 1.2rem; }
/* Aviso da pasta de notas. Vermelho porque o erro aqui nao da para desfazer:
o que entra na pasta pode sair numa resposta enviada ao manifestante. */
.aviso-notas { display: flex; gap: .8rem; align-items: flex-start;
background: #fdeceb; border: 1px solid #f1c4c0; border-radius: var(--raio-sm);
padding: 1rem 1.1rem; margin: 1rem 0; font-size: .9rem; line-height: 1.6; color: #7f2018; }
.aviso-notas .ico { width: 20px; height: 20px; color: #b3261e; flex-shrink: 0; margin-top: .15rem; }
.aviso-notas strong { display: block; margin-bottom: .2rem; }
html[data-tema="escuro"] .aviso-notas { background: #361a18; border-color: #5e2a26; color: #f1a8a1; }
.caminho-notas { margin: .2rem 0 1rem; font-size: .85rem; }
.caminho-notas code { word-break: break-all; }
/* Caixa que explica o modo de busca da memoria. Cinza (neutra) porque o modo
palavra-chave nao e erro nem aviso: e uma escolha com um limite conhecido. */
.modo-memoria { background: var(--surface-2); border: 1px solid var(--borda);
border-left: 3px solid var(--marca); border-radius: var(--raio-sm);
padding: 1rem 1.2rem; margin: 0 0 1.4rem; }
.modo-memoria .ds-label { margin-bottom: .7rem; }
.modo-memoria p { margin: 0 0 .6rem; font-size: .9rem; line-height: 1.6; }
.modo-memoria p:last-child { margin-bottom: 0; }
/* Pagina da Memoria da IA: uma coluna so. Estava usando .detalhe-grid, de duas
colunas, e sobrava metade da tela vazia com os tres numeros quebrando 2+1. */
.ia-wrap { max-width: 900px; }
/* ---------- Cards genéricos ---------- */
.card { background: var(--surface); border: 1px solid var(--borda-suave); border-radius: var(--raio); padding: 1.4rem; box-shadow: var(--sombra); margin-bottom: 1.4rem; }
.card--estreito { max-width: 480px; margin-left: auto; margin-right: auto; }
.card h2 { margin-top: 0; font-size: 1.1rem; }
.card h3 { font-size: 1rem; margin: 1.2rem 0 .4rem; color: var(--marca); }
/* ---------- Filtros ---------- */
.filtros__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .6rem 1rem; }
.filtros label { display: block; font-size: .82rem; font-weight: 600; color: var(--texto-suave); }
.filtros input, .filtros select { width: 100%; margin-top: .25rem; padding: .5rem; border: 1px solid var(--borda); border-radius: 8px; background: var(--surface); color: var(--texto); font: inherit; }
.filtros__acoes { display: flex; align-items: center; gap: .8rem; margin-top: 1rem; flex-wrap: wrap; }
/* ---------- Tabelas ---------- */
.tabela-wrap { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabela th, .tabela td { padding: .6rem .6rem; text-align: left; border-bottom: 1px solid var(--borda-suave); white-space: nowrap; }
.tabela th { color: var(--texto-suave); font-family: var(--mono); font-size: .68rem; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; }
.tabela tbody tr:hover { background: var(--surface-2); }
/* Protocolo e data em JetBrains Mono: sao as duas colunas que a pessoa varre
de cima a baixo procurando um registro, e a mono alinha os digitos, deixando
a coluna legivel como bloco. E a mesma fonte do protocolo na tela publica. */
.link-proto { font-family: var(--mono); font-weight: 700; font-size: .85rem; text-decoration: none; letter-spacing: -.01em; }
.tabela td[data-rotulo="Enviada"] { font-family: var(--mono); font-size: .8rem; color: var(--texto-suave); }
.acoes-cel { display: flex; gap: .3rem; }
.inline-form { display: inline; }
.paginacao { display: flex; gap: .3rem; flex-wrap: wrap; }
.paginacao a { padding: .4rem .7rem; border: 1px solid var(--borda); border-radius: 8px; text-decoration: none; background: var(--surface); }
.paginacao a.is-ativo { background: var(--marca); color: #fff; border-color: var(--marca); font-weight: 700; }
/* ---------- Detalhe ---------- */
.detalhe-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.detalhe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; align-items: start; }
.dados { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; }
.dados dt { font-weight: 700; color: var(--texto-suave); }
.dados dd { margin: 0; }
.texto-longo { background: var(--surface-2); padding: .8rem 1rem; border-radius: var(--raio-sm); white-space: pre-wrap; word-break: break-word; }
.anexos { list-style: none; padding: 0; margin: 0; }
.anexos li { padding: .4rem 0; border-bottom: 1px solid var(--borda); }
.anexos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 1rem; }
/* O card é o próprio quadro: a imagem ocupa 100% e o nome fica sobreposto. */
.anexo-card { position: relative; display: block; aspect-ratio: 4 / 3; border: 1px solid var(--borda); border-radius: var(--raio-sm); overflow: hidden; text-decoration: none; background: var(--surface-2); transition: .15s; }
.anexo-card:hover { border-color: var(--marca); box-shadow: var(--sombra); }
.anexo-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.anexo-ico { position: absolute; inset: 0; display: grid; place-items: center; font-size: 3.6rem; color: var(--texto-suave); background: var(--surface-2); }
.anexo-legenda { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; gap: .05rem; padding: 1.5rem .55rem .45rem; background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.4) 55%, transparent); }
.anexo-nome { color: #fff; font-size: .8rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anexo-meta { color: rgba(255,255,255,.85); font-size: .72rem; }
.anexos-dica { margin: .6rem 0 0; font-size: .82rem; }
.anexo-card--ausente { opacity: .9; border-style: dashed; cursor: default; }
.anexo-card--ausente:hover { box-shadow: none; border-color: var(--borda); }
.anexo-card--ausente .anexo-meta { color: #ffd2cc; }
.historico { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--borda); }
.historico li { padding: .6rem 0 .6rem 1rem; position: relative; }
.historico li::before { content: ""; position: absolute; left: -7px; top: 1rem; width: 10px; height: 10px; border-radius: 50%; background: var(--marca); }
.historico__cab { display: flex; gap: .6rem; justify-content: space-between; flex-wrap: wrap; }
.historico__desc { color: var(--texto-suave); font-size: .9rem; margin-top: .2rem; }
.auditoria { margin-top: 1.2rem; border: 1px solid var(--borda); border-radius: var(--raio-sm); padding: .4rem .8rem; background: var(--surface-2); }
.auditoria summary { cursor: pointer; font-weight: 700; color: var(--texto-suave); padding: .3rem 0; }
.auditoria .dados { margin-top: .6rem; }
.ua-txt { word-break: break-word; font-family: ui-monospace, monospace; font-size: .82rem; }
/* ---------- Responsivo ---------- */
@media (max-width: 860px) {
.grid-2, .detalhe-grid, .painel-charts { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
.grafico-barras li { grid-template-columns: 96px 1fr 28px; font-size: .8rem; }
}
/* Tablets / telas médias */
@media (max-width: 760px) {
/* Este bloco e o antigo responsivo do canal do Clube Campestre e vinha
desfazendo o layout novo por vir DEPOIS no arquivo: reimpunha altura de
44px na logo (o botao subia por cima dela em 375px), padding lateral no
.pub-main (que agora e do .container) e padding de cartao no hero e no
texto institucional, que nao sao mais cartoes. As linhas que sobraram
sao as que ainda descrevem o layout atual. */
.pub-main { padding: 2rem 0 3rem; }
.form-wrap { padding: 1.3rem; }
.hero__cta .btn { flex: 1 1 100%; }
.detalhe-top { flex-direction: column; align-items: stretch; }
.detalhe-top .btn { width: 100%; }
/* Admin: sidebar off-canvas */
.adm-menu-toggle { display: block; }
.adm-shell { flex-direction: column; }
.adm-side {
position: fixed; top: 0; left: 0; height: 100vh; width: 250px; z-index: 35;
transform: translateX(-100%); transition: transform .25s ease;
}
.adm-side.is-open { transform: translateX(0); box-shadow: 0 0 0 100vmax rgba(0,0,0,.45); }
.adm-main { width: 100%; }
.adm-top { padding-left: 4rem; }
.adm-top h1 { font-size: 1.1rem; }
.adm-content { padding: 1rem; }
.cards { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .7rem; }
}
/* Celulares */
@media (max-width: 480px) {
/* Header e hero saem daqui: o tamanho deles agora vem do clamp() e do bloco
de 640px, e estas regras (do layout antigo) reduziam o H1 a 1.35rem e
achatavam o cabecalho. */
.cards { grid-template-columns: 1fr 1fr; }
.card-num__valor { font-size: 1.7rem; }
.radios { flex-direction: column; gap: .5rem; }
.filtros__grid { grid-template-columns: 1fr 1fr; }
.adm-top__user span:not(.badge) { display: none; }
.protocolo-box__num { font-size: 1.5rem; }
.login-card { padding: 1.5rem; }
/* Tabelas viram cartões legíveis no celular */
.tabela thead { display: none; }
.tabela, .tabela tbody, .tabela tr, .tabela td { display: block; width: 100%; }
.tabela tr { border: 1px solid var(--borda); border-radius: var(--raio-sm); margin-bottom: .7rem; padding: .3rem .2rem; }
.tabela td { border: 0; white-space: normal; padding: .35rem .6rem; display: flex; justify-content: space-between; gap: 1rem; }
.tabela td::before { content: attr(data-rotulo); font-weight: 700; color: var(--texto-suave); font-size: .8rem; }
.tabela td:empty { display: none; }
}
/* ----- Botão "Sugerir resposta com IA" -----
O texto de explicação (small) sempre ocupa a linha inteira, embaixo dos
botões — "flex: 1 1 100%" força a quebra de linha ANTES dele, sempre,
independente da largura que os botões tenham no momento. Sem isso, o
texto explicativo entrava na mesma linha (ou não) dependendo de quanto os
botões encolhem durante o carregamento (troca de rótulo/ícone por
"Gerando…"), fazendo o texto "pular" de lugar visivelmente ao clicar. */
.ia-acao { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin: -.3rem 0 .6rem; }
.ia-acao small { display: block; flex: 1 1 100%; margin: 0; }
/* ----- Permissões de categoria (usuários) ----- */
.cat-fieldset { border: 1px solid var(--borda); border-radius: var(--raio-sm); padding: .5rem .8rem; margin: .2rem 0; min-width: 0; }
.cat-fieldset legend { font-weight: 600; font-size: .9rem; padding: 0 .3rem; }
.cat-chk { display: flex; align-items: center; gap: .4rem; font-weight: 500; margin: .25rem 0; }
.cat-chk input { width: auto; margin: 0; }
.cat-form { display: flex; flex-direction: column; gap: .15rem; align-items: flex-start; }
.cat-form .btn { margin-top: .35rem; }
.btn--ia { display: inline-flex; align-items: center; gap: .4rem; min-width: 12rem; justify-content: center; }
.btn--ia .ico { width: 18px; height: 18px; }
.btn--ia.is-carregando { opacity: .7; cursor: progress; }
/* =====================================================================
Microinterações — botões e ícones com vida (identidade da ipHosting: campestre).
Profundidade, brilho que varre, elevação no hover, "pop" ao escolher
e um botão de IA que respira. Tudo neutralizado em prefers-reduced-motion.
===================================================================== */
/* Base: transicao e foco. O brilho diagonal que varria o botao no hover saiu:
e um efeito que o site nao tem, e era ele que fazia o botao parecer de
outro produto mesmo estando na cor certa. */
.btn { position: relative; isolation: isolate;
transition: transform .18s cubic-bezier(.2,.8,.25,1), box-shadow .18s ease,
background-color .18s ease, border-color .18s ease, color .18s ease; }
.btn > * { position: relative; z-index: 1; }
.btn:active { transform: translateY(1px) scale(.985); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--marca); }
.btn .ico { transition: transform .2s cubic-bezier(.2,.8,.25,1); }
/* Primario: laranja CHAPADO com halo laranja e leve crescimento no hover, que
e o gesto dos botoes do site (hover:scale-105 + shadow-orange-500/30). O
gradiente diagonal que estava aqui vinha do canal do Clube Campestre. */
.btn--primario { background: var(--marca);
box-shadow: 0 10px 15px -3px rgba(235,102,8,.3), 0 4px 6px -4px rgba(235,102,8,.3); }
.btn--primario:hover { background: var(--marca-escura);
transform: scale(1.03); box-shadow: 0 14px 24px -6px rgba(235,102,8,.45), 0 6px 10px -6px rgba(235,102,8,.35); }
.btn--primario:active { box-shadow: 0 6px 10px -3px rgba(235,102,8,.3); }
/* Secundário: preenche suave e eleva */
.btn--secundario:hover { transform: scale(1.02); }
.hero .btn--secundario:hover { background: rgba(255,255,255,.1); }
.btn--grande:hover { transform: scale(1.03); }
/* Botão "mágico" de IA: respira na cor da marca, convidando ao clique */
.btn--ia { background: var(--surface); color: var(--marca-escura); border: 1px solid var(--marca-clara);
animation: ia-respira 3s ease-in-out infinite; }
@keyframes ia-respira {
0%,100% { box-shadow: 0 0 0 0 rgba(235,102,8,0), 0 2px 8px rgba(194,84,10,.12); }
50% { box-shadow: 0 0 14px 2px rgba(235,102,8,.38), 0 2px 8px rgba(194,84,10,.18); }
}
.btn--ia:hover { transform: translateY(-2px); border-color: var(--marca); animation-play-state: paused;
box-shadow: 0 0 16px 3px rgba(235,102,8,.45), 0 8px 20px rgba(194,84,10,.25); }
.btn--ia .ico { color: var(--marca); animation: ia-cintila 2.4s ease-in-out infinite; }
@keyframes ia-cintila { 0%,100% { transform: scale(1); } 50% { transform: scale(1.16); } }
.btn--ia.is-carregando { animation: none; }
.btn--ia.is-carregando .ico { animation: none; }
/* Cartões de opção do formulário: mais vivos ao passar e ao escolher */
.opt-card { transition: transform .18s cubic-bezier(.2,.8,.25,1), box-shadow .18s ease,
border-color .18s ease, background-color .18s ease; }
.opt-card:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(194,84,10,.14); }
.opt-card__ic .ico { transition: transform .2s cubic-bezier(.2,.8,.25,1); }
.opt-card:hover .opt-card__ic .ico { transform: scale(1.14) translateY(-1px); }
.opt-card:has(input:checked) { transform: translateY(-2px);
box-shadow: 0 0 0 3px rgba(235,102,8,.22), 0 10px 22px rgba(194,84,10,.16); }
.opt-card:has(input:checked) .opt-card__ic { animation: opt-pop .32s cubic-bezier(.2,1.3,.4,1); }
@keyframes opt-pop { 0% { transform: scale(.8); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
/* o selo ✓ vira um chip na cor da marca, redondo, com pop */
.opt-card:has(input:checked)::after { content: "✓"; top: .45rem; right: .45rem;
width: 1.25rem; height: 1.25rem; display: grid; place-items: center; border-radius: 50%;
background: var(--marca); color: #fff; font-size: .8rem; font-weight: 800; line-height: 1;
box-shadow: 0 2px 6px rgba(194,84,10,.35); animation: opt-pop .32s cubic-bezier(.2,1.3,.4,1); }
/* Botões utilitários do admin também ganham resposta tátil */
.adm-menu-toggle:active, .tema-btn:active { transform: scale(.94); }
.tema-btn { transition: transform .15s ease, color .15s ease; }
.tema-btn:hover { color: var(--marca); }
/* ----- Ícones dos cartões: chip colorido, maiores, com neon ao escolher ----- */
/* maior especificidade que ".form label { display:block }" — recentraliza o cartão */
.opt-grid .opt-card { display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; margin: 0; min-height: 116px; }
.opt-card__txt { width: 100%; text-align: center; }
.opt-card__ic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto;
background: rgba(235,102,8,.12); color: var(--marca); line-height: 0;
transition: background-color .2s ease, color .2s ease, box-shadow .25s ease, transform .2s cubic-bezier(.2,.8,.25,1); }
.opt-card__ic .ico { width: 32px; height: 32px; }
.opt-card:hover .opt-card__ic { background: rgba(235,102,8,.22); }
.opt-card:has(input:checked) .opt-card__ic {
background: var(--marca); color: #fff;
box-shadow: 0 0 0 4px rgba(235,102,8,.25), 0 0 16px 3px rgba(246,162,106,.7);
animation: opt-pop .32s cubic-bezier(.2,1.3,.4,1), neon-pulse 1.9s ease-in-out .32s infinite; }
.opt-card:has(input:checked) .opt-card__ic .ico { filter: drop-shadow(0 0 4px rgba(255,255,255,.55)); }
@keyframes neon-pulse {
0%,100% { box-shadow: 0 0 0 4px rgba(235,102,8,.22), 0 0 14px 2px rgba(246,162,106,.55); }
50% { box-shadow: 0 0 0 4px rgba(235,102,8,.32), 0 0 26px 6px rgba(246,162,106,.95); }
}
/* Acessibilidade: respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
.btn, .btn .ico, .btn--ia, .btn--ia .ico,
.opt-card, .opt-card__ic, .opt-card__ic .ico { transition: none !important; animation: none !important; }
.btn:hover, .btn--primario:hover, .btn--secundario:hover, .btn--grande:hover,
.btn--ia:hover, .opt-card:hover, .opt-card:has(input:checked),
.opt-card:hover .opt-card__ic .ico { transform: none !important; }
}