/* Painel — ferramenta de trabalho da recepção, coordenação e diretoria.
   Ideia: cada área (Pessoas, Matrículas, Saúde, Projetos, Termos e contas, Site, Configurações)
   tem uma cor e um ícone. A cor diz onde você está: no trilho à esquerda, na faixa do alto e nas abas.
   Os botões principais usam sempre a cor da marca, para nunca competir com a cor da área. */

:root {
  /* marca (cada entidade troca no seu painel.css) */
  --marca: #0a2149; --marca-2: #143268; --marca-3: #22457f; --marca-texto: #fff;
  /* superfícies */
  --fundo: #f2f4f8; --superficie: #fff; --linha: #e1e6ee; --linha-forte: #c6cfdc;
  --tinta: #121a2c; --texto-2: #535f73; --texto-3: #7d8799;
  /* estados */
  --ok: #1f7a4d; --ok-claro: #e3f4ea; --erro: #b3261e; --erro-claro: #fdecea; --aviso: #7a5300; --aviso-claro: #fff3d6;
  /* áreas */
  --c-inicio: #3b4a66; --c-pessoas: #6747c7; --c-matriculas: #1878a8; --c-saude: #cf3a3a;
  --c-projetos: #c97a00; --c-termos: #1f7a4d; --c-site: #a8458a; --c-config: #5b6577; --c-relatorios: #0e7490;
  --c-turmas_prof: var(--c-matriculas); --c-agenda_prof: var(--c-saude);
  --f-titulo: "Barlow Condensed", "Bahnschrift SemiBold Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
  --f-texto: "Barlow", "Segoe UI", Arial, sans-serif;
  --raio: 10px; --raio-g: 16px;
  /* nomes antigos, ainda usados em algumas telas */
  --marinho: var(--marca); --marinho-2: var(--marca-2); --marinho-3: var(--marca-3);
  --gramado: #62d433; --verde: var(--ok); --verde-claro: var(--ok-claro); --giz: var(--fundo);
  --cor: var(--c-inicio);
}
.cor-inicio, .area-inicio { --cor: var(--c-inicio); }
.cor-pessoas, .area-pessoas { --cor: var(--c-pessoas); }
.cor-matriculas, .area-matriculas, .cor-turmas_prof, .area-turmas_prof { --cor: var(--c-matriculas); }
.cor-saude, .area-saude, .cor-agenda_prof, .area-agenda_prof { --cor: var(--c-saude); }
.cor-projetos, .area-projetos { --cor: var(--c-projetos); }
.cor-termos, .area-termos { --cor: var(--c-termos); }
.cor-site, .area-site { --cor: var(--c-site); }
.cor-config, .area-config { --cor: var(--c-config); }
.cor-relatorios, .area-relatorios { --cor: var(--c-relatorios); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 1rem/1.5 var(--f-texto); color: var(--tinta); background: var(--fundo); }
a { color: var(--marca-2); text-underline-offset: 2px; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--cor) 55%, transparent); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--f-titulo); font-weight: 700; color: var(--tinta); line-height: 1.1; margin: 0 0 .4em; }
h1 { font-size: 1.85rem; } h2 { font-size: 1.3rem; } h3 { font-size: 1.08rem; }
small { font-size: .85em; }
.pular { position: absolute; left: -9999px; top: 8px; z-index: 100; background: #fff; padding: 8px 12px; border-radius: 8px; }
.pular:focus { left: 8px; }
.oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { width: 22px; height: 22px; flex: none; }
[hidden] { display: none !important; }

/* ================================================================ casca */
.faixa-demo { background: repeating-linear-gradient(-45deg, #ffe9a8 0 14px, #fff2c9 14px 28px); color: #5b4100; text-align: center;
  font-size: .9rem; padding: 6px 12px; border-bottom: 1px solid #f0d27a; position: relative; z-index: 30; }
.casca { display: grid; grid-template-columns: 92px minmax(0, 1fr); min-height: 100vh; background: linear-gradient(90deg, var(--marca) 92px, transparent 92px); }
.trilho { background: var(--marca); position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 14px 8px 18px; display: flex; flex-direction: column; gap: 14px;
  scrollbar-width: none; }
.com-demo .trilho { height: calc(100vh - 33px); top: 0; }
.trilho-marca { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 4px; background: #fff; border-radius: 16px; }
.trilho-marca img { width: 36px; height: 36px; object-fit: contain; }
.trilho ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.area-link { display: grid; justify-items: center; gap: 4px; padding: 8px 2px 9px; border-radius: 14px; text-decoration: none; color: rgba(255,255,255,.78); }
.area-link .area-icone { background: transparent; color: inherit; }
.area-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.area-link.ativa { color: #fff; }
.area-link.ativa .area-icone { background: var(--cor); color: #fff; box-shadow: 0 6px 16px -8px var(--cor); }
.area-link.cor-inicio.ativa .area-icone { background: #fff; color: var(--marca); }
.area-nome { font-size: .74rem; font-weight: 600; line-height: 1.15; text-align: center; letter-spacing: .01em; }
.area-icone { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; flex: none;
  background: color-mix(in srgb, var(--cor) 13%, #fff); color: var(--cor); }
.ponto { position: absolute; top: -4px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px; background: #f5a300; color: #2a1b00;
  font: 700 .7rem/19px var(--f-texto); text-align: center; border: 2px solid var(--marca); }

.palco { min-width: 0; display: flex; flex-direction: column; }
.barra { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; min-height: 66px; padding: 10px clamp(16px, 3vw, 32px);
  background: var(--superficie); border-bottom: 1px solid var(--linha); box-shadow: inset 0 4px 0 var(--cor); }
.barra-logo { display: none; }
.chip-area { display: flex; align-items: center; gap: 10px; font: 700 1.25rem/1 var(--f-titulo); color: var(--tinta); white-space: nowrap; }
.chip-area .area-icone { width: 36px; height: 36px; border-radius: 11px; }
.chip-area .ico { width: 20px; height: 20px; }
.busca { position: relative; flex: 1 1 auto; max-width: 520px; margin-left: auto; }
.busca > .ico { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--texto-3); width: 20px; height: 20px; pointer-events: none; }
.busca input { width: 100%; font: inherit; height: 44px; padding: 0 14px 0 42px; border-radius: 12px; border: 1px solid transparent; background: var(--fundo); color: var(--tinta); }
.busca input::placeholder { color: var(--texto-3); }
.busca input:focus { outline: none; background: #fff; border-color: var(--cor); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cor) 16%, transparent); }
.busca-sugestoes { position: absolute; left: 0; right: 0; top: calc(100% + 8px); background: #fff; border: 1px solid var(--linha); border-radius: 14px;
  box-shadow: 0 22px 50px -24px rgba(16, 24, 40, .45); padding: 8px; max-height: min(70vh, 520px); overflow-y: auto; z-index: 40; }
.busca-sugestoes h4 { margin: 8px 10px 4px; font-size: .78rem; font-weight: 600; color: var(--texto-3); display: flex; align-items: center; gap: 8px; }
.busca-sugestoes a { display: grid; gap: 1px; padding: 8px 10px; border-radius: 10px; text-decoration: none; color: var(--tinta); }
.busca-sugestoes a small { color: var(--texto-2); }
.busca-sugestoes a:hover, .busca-sugestoes a.foco { background: var(--fundo); }
.busca-sugestoes .rodape-busca { border-top: 1px solid var(--linha); margin-top: 6px; padding-top: 6px; }
.busca-sugestoes p { margin: 8px 10px; color: var(--texto-2); }
.barra-acoes { display: flex; align-items: center; gap: 10px; margin-left: 4px; }
.busca + .barra-acoes { margin-left: 4px; }
.barra > .chip-area + .barra-acoes { margin-left: auto; }

.suspenso-menu { position: relative; }
.suspenso-menu > summary { list-style: none; cursor: pointer; }
.suspenso-menu > summary::-webkit-details-marker { display: none; }
.suspenso { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 250px; background: #fff; border: 1px solid var(--linha); border-radius: 14px;
  box-shadow: 0 22px 50px -24px rgba(16, 24, 40, .45); padding: 6px; display: grid; }
.suspenso a, .suspenso button { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; color: var(--tinta); text-decoration: none;
  font: inherit; background: none; border: 0; text-align: left; cursor: pointer; width: 100%; }
.suspenso a:hover, .suspenso button:hover { background: var(--fundo); }
.suspenso .ico { width: 18px; height: 18px; color: var(--texto-2); }
.suspenso form { margin: 0; border-top: 1px solid var(--linha); margin-top: 4px; padding-top: 4px; }
.suspenso .quem { margin: 0; padding: 8px 10px 10px; display: grid; border-bottom: 1px solid var(--linha); margin-bottom: 4px; }
.suspenso .quem span { font-size: .85rem; color: var(--texto-2); }
.avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--marca); color: #fff; font-weight: 700; font-size: .95rem; }
.menu-novo summary .ico { width: 18px; height: 18px; }
.bolinha { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--cor); flex: none; }

.abas-area { background: var(--superficie); border-bottom: 1px solid var(--linha); padding: 0 clamp(16px, 3vw, 32px); position: sticky; top: 66px; z-index: 15; }
.abas-trilho { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.abas-trilho::-webkit-scrollbar { display: none; }
.abas-trilho a { display: inline-flex; align-items: center; gap: 6px; padding: 13px 14px 12px; color: var(--texto-2); text-decoration: none; font-weight: 600;
  white-space: nowrap; border-bottom: 3px solid transparent; }
.abas-trilho a:hover { color: var(--tinta); }
.abas-trilho a.ativa { color: var(--tinta); border-bottom-color: var(--cor); }

.area { padding: 26px clamp(16px, 3vw, 32px) 72px; width: 100%; max-width: 1320px; }

/* ================================================================ cabeçalho das telas */
.cabeca { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; }
.cabeca h1 { margin-bottom: 6px; }
.cabeca p { margin: 0; color: var(--texto-2); max-width: 72ch; }
.trilha { font-size: .9rem; color: var(--texto-2); margin: 0 0 6px !important; }
.trilha a { color: var(--texto-2); }

/* ================================================================ botões */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 0 16px; border-radius: var(--raio);
  border: 1px solid transparent; font: 600 .97rem/1 var(--f-texto); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s; }
.botao-principal { background: var(--marca); color: var(--marca-texto); }
.botao-principal:hover { background: var(--marca-2); color: var(--marca-texto); }
.botao-sec { background: #fff; color: var(--tinta); border-color: var(--linha-forte); }
.botao-sec:hover { border-color: var(--tinta); }
.botao-verde { background: var(--gramado); color: var(--marca); }
.botao-perigo { background: #fff; color: var(--erro); border-color: #ebbcb8; }
.botao-perigo:hover { background: var(--erro-claro); }
.botao-pequeno { min-height: 34px; padding: 0 11px; font-size: .9rem; border-radius: 8px; }
.grupo-botoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
form.inline { display: inline; margin: 0; }

/* ================================================================ blocos */
.cartao, .painel-bloco { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-g); padding: 22px; }
.cartao + .cartao { margin-top: 16px; }
.cartao > h2:first-child, .painel-bloco > h2:first-child { margin-bottom: 14px; }
.duas { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.duas > .cartao, .duas > section.cartao + section.cartao { margin-top: 0; }
.duas > div > .cartao + .cartao { margin-top: 18px; }
@media (max-width: 1050px) { .duas { grid-template-columns: 1fr; } }

.mensagens { display: grid; gap: 8px; margin-bottom: 18px; }
.msg { padding: 12px 16px; border-radius: 12px; border: 1px solid; font-weight: 500; }
.msg-ok { background: var(--ok-claro); border-color: #b5ddc4; color: #14532d; }
.msg-erro { background: var(--erro-claro); border-color: #f2c1bd; color: #7d1a14; }
.msg-aviso { background: var(--aviso-claro); border-color: #f0d89c; color: var(--aviso); }

.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 24px; }
.indicadores a, .indicadores > div { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-g); padding: 16px 18px; text-decoration: none; color: inherit;
  display: grid; gap: 4px; align-content: start; }
.indicadores a:hover { border-color: var(--cor); }
.indicadores strong { display: block; font: 700 2rem/1 var(--f-titulo); color: var(--tinta); font-variant-numeric: tabular-nums; }
.indicadores strong small { font-size: 1rem; color: var(--texto-2); font-weight: 600; }
.indicadores span { font-size: .9rem; color: var(--texto-2); }

.alertas { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.alertas li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: var(--raio); border-left: 4px solid var(--linha-forte); background: var(--fundo); }
.alertas .erro { border-color: var(--erro); background: var(--erro-claro); }
.alertas .aviso { border-color: #d39e00; background: var(--aviso-claro); }
.alertas .info { border-color: var(--marca-3); }

/* ================================================================ tabelas */
.tabela { overflow-x: auto; background: #fff; border: 1px solid var(--linha); border-radius: 14px; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: .8rem; color: var(--texto-3); font-weight: 600; padding: 11px 14px; border-bottom: 1px solid var(--linha); white-space: nowrap; background: #fbfcfd; }
td { padding: 12px 14px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover td { background: #fafbfd; }
td.acoes-linha { white-space: nowrap; text-align: right; }
td small { color: var(--texto-2); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vazio { padding: 36px; text-align: center; color: var(--texto-2); }
.vazio-bloco { background: #fff; border: 1px dashed var(--linha-forte); border-radius: var(--raio-g); padding: 28px; text-align: center; display: grid; gap: 12px; justify-items: center; }
.vazio-bloco p { margin: 0; color: var(--texto-2); }

.selo { display: inline-block; font-size: .78rem; font-weight: 600; padding: 3px 9px; border-radius: 99px; border: 1px solid; white-space: nowrap; }
.selo-pub { background: var(--ok-claro); color: var(--ok); border-color: #b5ddc4; }
.selo-rasc { background: var(--aviso-claro); color: var(--aviso); border-color: #f0d89c; }
.selo-falta { background: var(--erro-claro); color: var(--erro); border-color: #f2c1bd; }
.selo-neutro { background: var(--fundo); color: var(--texto-2); border-color: var(--linha); }

/* ================================================================ formulários */
.form { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px 18px; }
.campo { grid-column: span 3; display: grid; gap: 6px; align-content: start; min-width: 0; }
.campo.inteira { grid-column: 1 / -1; }
.campo.terco { grid-column: span 2; }
@media (max-width: 760px) { .campo, .campo.terco { grid-column: 1 / -1; } }
.campo label, .campo legend { font-weight: 600; font-size: .94rem; }
.campo label .obrig { color: var(--erro); }
.campo input[type=text], .campo input[type=email], .campo input[type=password], .campo input[type=date], .campo input[type=time], .campo input[type=month],
.campo input[type=number], .campo input[type=tel], .campo input[type=search], .campo select, .campo textarea, .campo input[type=file] {
  font: inherit; min-height: 44px; padding: 9px 12px; border: 1px solid var(--linha-forte); border-radius: var(--raio); background: #fff; width: 100%; color: var(--tinta); }
.campo input:focus, .campo select:focus, .campo textarea:focus, .filtros-painel :is(input, select):focus, .linha-form :is(input, select):focus {
  outline: none; border-color: var(--cor); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cor) 16%, transparent); }
.campo textarea { min-height: 110px; resize: vertical; }
.campo .ajuda { font-size: .85rem; color: var(--texto-2); }
.campo.com-erro input, .campo.com-erro select, .campo.com-erro textarea { border-color: var(--erro); background: #fffafa; }
.campo .erro { color: var(--erro); font-size: .88rem; font-weight: 600; }
.campo .atual { font-size: .9rem; background: var(--fundo); padding: 8px 10px; border-radius: var(--raio); display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
fieldset.campo { border: 0; padding: 0; margin: 0; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; }
.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--marca); }
.rodape-form { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-top: 16px; border-top: 1px solid var(--linha); }
.publicacao { grid-column: 1 / -1; background: var(--fundo); border-radius: var(--raio); padding: 14px; }
.publicacao p { margin: 6px 0 0 30px; font-size: .9rem; color: var(--texto-2); }
.secao-form { grid-column: 1 / -1; font-size: 1.15rem; margin: 12px 0 0; padding-top: 18px; border-top: 1px solid var(--linha); }
.secao-form:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.secao-form small { font-family: var(--f-texto); font-size: .85rem; font-weight: 500; color: var(--texto-2); }

/* abas dentro de uma tela (ex.: abas da parceria) */
.abas { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: #e8ecf2; border-radius: 12px; margin: 22px 0 18px; }
.abas a { padding: 8px 14px; text-decoration: none; color: var(--texto-2); font-weight: 600; border-radius: 9px; }
.abas a:hover { color: var(--tinta); }
.abas a.ativa { color: var(--tinta); background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, .12); }
.abas a span { font-weight: 400; color: var(--texto-3); }

.resumo-parceria { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-g); }
.resumo-parceria div { padding: 16px 18px; border-left: 1px solid var(--linha); }
.resumo-parceria div:first-child { border-left: 0; }
.resumo-parceria strong { display: block; font: 700 1.5rem/1.1 var(--f-titulo); color: var(--tinta); font-variant-numeric: tabular-nums; }
.resumo-parceria span { font-size: .85rem; color: var(--texto-2); }
@media (max-width: 760px) { .resumo-parceria { grid-template-columns: 1fr 1fr; } .resumo-parceria div:nth-child(3) { border-left: 0; } }

.fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.foto-item { background: #fff; border: 1px solid var(--linha); border-radius: 14px; overflow: hidden; }
.foto-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.foto-item form { padding: 10px; display: grid; gap: 6px; }
.foto-item input { font: inherit; font-size: .88rem; padding: 6px 8px; border: 1px solid var(--linha-forte); border-radius: 6px; width: 100%; }
.foto-item .capa { font-size: .8rem; font-weight: 700; color: var(--ok); }
.historico td { font-size: .93rem; }
.paginas { display: flex; gap: 8px; margin-top: 16px; align-items: center; }

/* ================================================================ início */
.saudacao { margin-bottom: 20px; }
.saudacao h1 { font-size: 2.1rem; margin-bottom: 2px; }
.saudacao p { margin: 0; color: var(--texto-2); }
.atalhos { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 12px; margin-bottom: 22px; }
.atalho { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 14px 16px;
  background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-g); text-decoration: none; color: var(--tinta); }
.atalho .area-icone { grid-row: span 2; }
.atalho strong { font-weight: 700; line-height: 1.2; }
.atalho small { color: var(--texto-2); }
.atalho:hover { border-color: var(--cor); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor) 12%, transparent); }
.inicio-grade { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; align-items: start; margin-bottom: 22px; }
.inicio-grade > :only-child { grid-column: 1 / -1; }
@media (max-width: 1050px) { .inicio-grade { grid-template-columns: 1fr; } }
.lista-atencao { list-style: none; margin: 0; padding: 0; display: grid; }
.lista-atencao a { display: flex; align-items: center; gap: 12px; padding: 12px 6px; border-bottom: 1px solid var(--linha); text-decoration: none; color: var(--tinta); }
.lista-atencao li:last-child a { border-bottom: 0; }
.lista-atencao a span { flex: 1; }
.lista-atencao a:hover span { text-decoration: underline; }
.lista-atencao .seta, .lista-links .seta { width: 18px; height: 18px; color: var(--texto-3); }
.lista-atencao .nivel-erro span { font-weight: 600; }
.lista-atencao .nivel-erro .bolinha { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor) 25%, transparent); }
.tudo-certo { margin: 0; color: var(--texto-2); }
.hoje h3 { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 6px; }
.hoje h3 small { font: 600 .85rem var(--f-texto); color: var(--texto-3); }
.hoje h3 + .lista-hoje, .hoje h3 + p { margin-bottom: 14px; }
.lista-hoje { list-style: none; margin: 0; padding: 0; }
.lista-hoje a { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--linha); text-decoration: none; color: var(--tinta); }
.lista-hoje li:last-child a { border-bottom: 0; }
.lista-hoje .hora { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--texto-2); }
.lista-hoje strong { display: block; font-weight: 600; }
.lista-hoje small { color: var(--texto-2); }
.vazio-curto { color: var(--texto-2); margin: 0 0 14px; }
.mais { margin: 10px 0 0; }
.areas-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 22px; }
.area-cartao { display: grid; gap: 12px; align-content: start; padding: 18px; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-g);
  text-decoration: none; color: var(--tinta); border-top: 4px solid var(--cor); }
.area-cartao:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor) 14%, transparent); }
.area-cartao header { display: flex; align-items: center; gap: 10px; }
.area-cartao header h2 { margin: 0; font-size: 1.2rem; }
.area-cartao header .area-icone { width: 36px; height: 36px; border-radius: 11px; }
.area-cartao dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px; margin: 0; }
.area-cartao dl div { display: flex; flex-direction: column-reverse; }
.area-cartao dd { margin: 0; font: 700 1.5rem/1.1 var(--f-titulo); font-variant-numeric: tabular-nums; }
.area-cartao dt { font-size: .82rem; color: var(--texto-2); }
.area-cartao .ocupacao p { margin: 6px 0 0; font-size: .92rem; color: var(--texto-2); }
.area-cartao .ocupacao strong { color: var(--tinta); font-size: 1.05rem; }
.area-cartao .barra-ocup { height: 10px; }
.area-cartao .barra-ocup i { background: var(--cor); }
.area-cartao .valor { margin: 0; font: 700 1.6rem/1.1 var(--f-titulo); display: grid; }
.area-cartao .valor small { font: 400 .85rem var(--f-texto); color: var(--texto-2); }
.linha-tempo { list-style: none; margin: 0; padding: 0; }
.linha-tempo li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--linha); font-size: .94rem; }
.linha-tempo li:last-child { border-bottom: 0; }
.linha-tempo time { color: var(--texto-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.nota { color: var(--texto-2); }

/* busca */
.resultado-grupo { margin-bottom: 22px; }
.resultado-grupo h2 { display: flex; align-items: center; gap: 10px; }
.resultado-grupo h2 small { font: 600 .9rem var(--f-texto); color: var(--texto-3); }
.lista-links { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--linha); border-radius: 14px; overflow: hidden; }
.lista-links a { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--linha); text-decoration: none; color: var(--tinta); }
.lista-links li:last-child a { border-bottom: 0; }
.lista-links a:hover { background: #fafbfd; }
.lista-links span { flex: 1; display: grid; }
.lista-links small { color: var(--texto-2); }

/* ================================================================ entrada (login) */
.entrada { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; background: #fff; }
.entrada .lado { background: var(--marca); color: rgba(255,255,255,.8); padding: 48px; display: flex; flex-direction: column; justify-content: space-between; }
.entrada .lado img { width: 120px; }
.entrada .lado h1 { color: #fff; font-size: 2.6rem; max-width: 14ch; }
.entrada .caixa { display: grid; place-items: center; padding: 32px 20px; }
.entrada form { width: min(400px, 100%); display: grid; gap: 16px; }
.entrada .campo { grid-column: auto; }
.entrada .botao { min-height: 48px; justify-content: center; }
@media (max-width: 800px) { .entrada { grid-template-columns: 1fr; } .entrada .lado { padding: 28px 20px; } .entrada .lado img { width: 64px; } .entrada .lado h1 { font-size: 2rem; } }

/* ================================================================ atendimento */
.contador { display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 99px; background: #f5a300; color: #2a1b00; font-size: .76rem; font-weight: 700; text-align: center; line-height: 1.5; }
.filtros-painel { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-g); padding: 14px 16px; margin-bottom: 18px; }
.filtros-painel label { display: grid; gap: 4px; font-size: .83rem; color: var(--texto-2); font-weight: 600; }
.filtros-painel label.check { display: flex; color: var(--tinta); }
.filtros-painel select, .filtros-painel input[type=search], .filtros-painel input[type=text], .filtros-painel input[type=date], .filtros-painel input[type=month] {
  font: inherit; height: 42px; padding: 0 12px; border: 1px solid var(--linha-forte); border-radius: var(--raio); background: #fff; min-width: 160px; color: var(--tinta); }
.grupo-titulo { margin: 28px 0 10px; font-size: 1.3rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.grupo-titulo small { font-family: var(--f-texto); font-size: .9rem; font-weight: 500; color: var(--texto-2); }
.barra-ocup { height: 8px; background: #e8ecf2; border-radius: 99px; overflow: hidden; margin-bottom: 3px; }
.barra-ocup i { display: block; height: 100%; background: var(--c-matriculas); border-radius: 99px; }
.lista-simples { list-style: none; margin: 0; padding: 0; }
.lista-simples li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linha); flex-wrap: wrap; }
.lista-simples li:last-child { border-bottom: 0; }
.lista-simples small { color: var(--texto-2); }
.linha-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.linha-form input[type=text], .linha-form select, .linha-form input[type=month], .linha-form input[type=date] { font: inherit; height: 42px; padding: 0 12px; border: 1px solid var(--linha-forte); border-radius: var(--raio); background: #fff; max-width: 100%; }
.linha-form .ajuda { flex-basis: 100%; font-size: .85rem; color: var(--texto-2); }
.menu-acao { display: inline-block; position: relative; }
.menu-acao summary { list-style: none; cursor: pointer; }
.menu-acao summary::-webkit-details-marker { display: none; }
.menu-acao form { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; background: #fff; border: 1px solid var(--linha); border-radius: 14px; padding: 12px; display: grid; gap: 8px; width: 270px;
  box-shadow: 0 22px 50px -24px rgba(16, 24, 40, .45); text-align: left; white-space: normal; }
.menu-acao input { font: inherit; padding: 8px 10px; border: 1px solid var(--linha-forte); border-radius: var(--raio); }
tr.apagada td { color: var(--texto-2); background: #fafbfc; }
.mini-foto { width: 52px; }
.mini-foto img, .mini-foto span { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: color-mix(in srgb, var(--c-pessoas) 12%, #fff); color: var(--c-pessoas); font-weight: 700; }
.ficha-cabeca { align-items: center; }
.ficha-id { display: flex; gap: 18px; align-items: center; }
.ficha-foto { width: 96px; height: 120px; border-radius: 16px; overflow: hidden; background: color-mix(in srgb, var(--c-pessoas) 12%, #fff); display: grid; place-items: center;
  font: 700 2.4rem/1 var(--f-titulo); color: var(--c-pessoas); flex: none; }
.ficha-foto img { width: 100%; height: 100%; object-fit: cover; }
.ficha-cabeca p { margin: 4px 0 0; }
.dados { display: grid; gap: 0; margin: 0; }
.dados div { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--linha); }
.dados div:last-child { border-bottom: 0; }
.dados dt { color: var(--texto-2); font-size: .9rem; }
.dados dd { margin: 0; }
@media (max-width: 600px) { .dados div { grid-template-columns: 1fr; gap: 2px; } .ficha-id { align-items: flex-start; } }
.termo-registro { display: flex; gap: 14px; align-items: flex-start; background: var(--ok-claro); border-radius: 12px; padding: 12px; margin-top: 16px; }
.termo-registro img { width: 72px; height: 90px; object-fit: cover; border-radius: 8px; }
.termo-registro p { margin: 0; font-size: .92rem; }
.foto-cadastro { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.foto-caixa { width: 168px; height: 210px; border-radius: 16px; overflow: hidden; background: var(--fundo); border: 1px dashed var(--linha-forte); display: grid; place-items: center; flex: none; }
.foto-caixa img, .foto-caixa video { width: 100%; height: 100%; object-fit: cover; }
.foto-caixa .sem { color: var(--texto-2); font-size: .9rem; text-align: center; padding: 10px; }
.foto-acoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; max-width: 520px; }
.foto-acoes .ajuda { flex-basis: 100%; font-size: .88rem; color: var(--texto-2); }
.arquivo-botao { position: relative; overflow: hidden; }
.arquivo-botao input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.opcoes-linha { display: flex; flex-wrap: wrap; gap: 10px 24px; border: 0; padding: 0; margin: 0; }
.opcoes-linha legend { margin-bottom: 8px; }
.bloco-responsavel { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px 18px; padding: 0; border-radius: var(--raio-g); }
.bloco-responsavel.destacado { background: var(--aviso-claro); padding: 14px 16px 18px; }
@media (max-width: 760px) { .bloco-responsavel { grid-template-columns: 1fr; } }
.termo-texto { background: var(--fundo); border-radius: 12px; padding: 16px 18px; line-height: 1.6; }
.termo-texto p { margin: 0 0 8px; max-width: 80ch; }
.cartoes-turma { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.cartao-turma { margin: 0 !important; display: grid; gap: 8px; align-content: start; }
.cartao-turma.hoje { border-color: var(--c-matriculas); box-shadow: inset 0 4px 0 var(--c-matriculas); }
.cartao-turma h2 { margin: 0; font-size: 1.2rem; }
.cartao-turma p { margin: 0; color: var(--texto-2); }
.cartao-turma .botao { justify-content: center; min-height: 50px; }
.navega-dia { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.navega-dia form { display: flex; gap: 6px; }
.navega-dia input { font: inherit; height: 38px; padding: 0 10px; border: 1px solid var(--linha-forte); border-radius: var(--raio); }
.navega-dia strong { margin: 0 6px; }
.dia-chamada { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 1.1rem; }
.chamada-acoes { margin-bottom: 8px; }
.lista-chamada { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-g); counter-reset: aluno; }
.lista-chamada li { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--linha); counter-increment: aluno; }
.lista-chamada li:last-child { border-bottom: 0; }
.lista-chamada .aluno::before { content: counter(aluno) ". "; color: var(--texto-3); }
.lista-chamada .aluno { font-weight: 600; }
.opcoes-freq { display: flex; gap: 6px; }
.freq { position: relative; }
.freq input { position: absolute; opacity: 0; }
.freq span { display: inline-block; padding: 10px 12px; min-width: 46px; text-align: center; border: 1px solid var(--linha-forte); border-radius: 10px; font-weight: 600; font-size: .92rem; cursor: pointer; background: #fff; }
.freq input:focus-visible + span { outline: 3px solid var(--c-matriculas); outline-offset: 2px; }
.freq-P input:checked + span { background: var(--ok-claro); border-color: var(--ok); color: var(--ok); }
.freq-F input:checked + span { background: var(--erro-claro); border-color: var(--erro); color: var(--erro); }
.freq-J input:checked + span { background: var(--aviso-claro); border-color: #d39e00; color: var(--aviso); }
.justificativa { grid-column: 1 / -1; font: inherit; padding: 9px 12px; border: 1px solid var(--linha-forte); border-radius: var(--raio); }
@media (max-width: 640px) { .lista-chamada li { grid-template-columns: 1fr; } .freq span { padding: 12px 10px; } }
.barra-salvar { position: sticky; bottom: 0; background: linear-gradient(transparent, var(--fundo) 30%); padding: 18px 0 8px; }
.barra-salvar .botao { width: 100%; justify-content: center; min-height: 54px; font-size: 1.05rem; }
.grade-freq td, .grade-freq th { padding: 8px 6px; }
.marca-P { color: var(--ok); font-weight: 700; }
.marca-F { color: var(--erro); font-weight: 700; background: var(--erro-claro); }
.marca-J { color: var(--aviso); font-weight: 700; background: var(--aviso-claro); }
tr.hoje td { background: color-mix(in srgb, var(--c-matriculas) 8%, #fff); }

/* ================================================================ saúde */
.semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; }
.dia-semana { display: grid; gap: 2px; padding: 10px; border: 1px solid var(--linha); border-radius: 12px; background: #fff; text-decoration: none; color: var(--tinta); font-size: .9rem; }
.dia-semana span { color: var(--texto-2); font-size: .8rem; }
.dia-semana.atual { border-color: var(--c-saude); box-shadow: inset 0 3px 0 var(--c-saude); }
.dia-semana.hoje strong::after { content: " · hoje"; font-weight: 400; color: var(--texto-2); }
@media (max-width: 900px) { .semana { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.agenda-dia { list-style: none; margin: 0; padding: 0; }
.agenda-dia li { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linha); align-items: start; }
.agenda-dia li:last-child { border-bottom: 0; }
.agenda-dia .hora { font: 700 1.05rem/1.6 var(--f-titulo); color: var(--tinta); font-variant-numeric: tabular-nums; }
.agenda-dia li.livre .hora { color: var(--texto-3); font-weight: 600; }
.agendado { background: var(--fundo); border-radius: 12px; padding: 9px 12px; display: block; border-left: 4px solid var(--linha-forte); }
.agendado + .agendado { margin-top: 6px; }
.agendado .selo { margin-left: 6px; }
.agendado form.inline { display: inline-flex; gap: 4px; margin-left: 4px; flex-wrap: wrap; }
.situacao-agendado { border-left-color: var(--c-saude); background: color-mix(in srgb, var(--c-saude) 6%, #fff); }
.situacao-atendido { background: var(--ok-claro); border-left-color: var(--ok); }
.situacao-faltou { background: var(--erro-claro); border-left-color: var(--erro); }
.situacao-cancelado { opacity: .7; }
.agenda-dia.minha .agendado { padding: 12px 14px; }
.acoes-agend { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin-top: 8px; }
.encaminhar summary { list-style: none; cursor: pointer; }
.encaminhar summary::-webkit-details-marker { display: none; }
.encaminhar form { display: grid; gap: 6px; margin-top: 8px; padding: 12px; background: #fff; border: 1px solid var(--linha); border-radius: 12px; max-width: 420px; }
.encaminhar select, .encaminhar input[type=text] { font: inherit; padding: 8px 10px; border: 1px solid var(--linha-forte); border-radius: var(--raio); }
.encaminhar label { font-size: .88rem; font-weight: 600; }
.sugestao { color: var(--texto-2); margin: -4px 0 10px; }
.ajuda-livres { color: var(--texto-2); font-size: .9rem; margin-top: 12px; }
.opcoes-servicos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 18px; margin-top: 8px; }
.opcoes-servicos small { color: var(--texto-2); font-weight: 400; }
tr.editando td { background: var(--fundo); }
.link-discreto { font-size: .85rem; color: var(--texto-2); }

/* ================================================================ celular */
@media (max-width: 900px) {
  .casca { grid-template-columns: 1fr; background: none; padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
  .trilho { position: fixed; top: auto !important; bottom: 0; left: 0; right: 0; height: auto !important; z-index: 50; flex-direction: row; padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    overflow-x: auto; overflow-y: hidden; box-shadow: 0 -8px 24px -16px rgba(0,0,0,.5); }
  .trilho-marca { display: none; }
  .trilho ul { display: flex; gap: 2px; width: 100%; justify-content: space-around; }
  .trilho li { flex: 1 0 64px; }
  .area-link { padding: 4px 2px 5px; gap: 2px; }
  .area-icone { width: 38px; height: 34px; border-radius: 11px; }
  .area-link .ico { width: 21px; height: 21px; }
  .area-nome { font-size: .68rem; }
  .barra { gap: 10px; min-height: 60px; padding: 8px 14px; flex-wrap: wrap; }
  .barra-logo { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--fundo); }
  .barra-logo img { width: 28px; height: 28px; object-fit: contain; }
  .chip-area { font-size: 1.12rem; }
  .chip-area .area-icone { display: none; }
  .barra-acoes { margin-left: auto; }
  .busca { order: 5; flex-basis: 100%; max-width: none; margin: 0; }
  .busca input { height: 42px; }
  .menu-novo summary span { display: none; }
  .menu-novo summary { width: 42px; padding: 0; }
  .abas-area { top: 0; position: relative; padding: 0 8px; }
  .area { padding-top: 20px; }
  h1 { font-size: 1.6rem; }
  .saudacao h1 { font-size: 1.75rem; }
  .suspenso { position: fixed; left: 12px; right: 12px; top: auto; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); min-width: 0; }
}
@media (max-width: 520px) {
  .cartao, .painel-bloco { padding: 16px; border-radius: 14px; }
  .atalhos { grid-template-columns: 1fr 1fr; gap: 8px; }
  .atalho { grid-template-columns: 1fr; padding: 12px; row-gap: 8px; }
  .atalho .area-icone { grid-row: auto; width: 36px; height: 36px; }
  .atalho small { display: none; }
  .cabeca { align-items: flex-start; }
  .cabeca .grupo-botoes { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media print {
  .trilho, .barra, .abas-area, .faixa-demo { display: none !important; }
  .casca { display: block; }
  body { background: #fff; }
}

/* ================================================================ projetos em cartões */
.cartoes-projeto { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.cartao-projeto { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-g); overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.capa-projeto { display: block; aspect-ratio: 16/9; background: color-mix(in srgb, var(--c-projetos) 10%, #fff); }
.capa-projeto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.capa-projeto span { display: grid; place-items: center; height: 100%; color: var(--texto-2); }
.cartao-projeto .corpo { padding: 14px 16px 16px; display: grid; gap: 8px; align-content: start; }
.cartao-projeto h3 { margin: 0; font-size: 1.08rem; }
.cartao-projeto h3 a { color: var(--tinta); text-decoration: none; }
.cartao-projeto h3 a:hover { text-decoration: underline; }
.cartao-projeto p { margin: 0; color: var(--texto-2); }
.numeros-projeto { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .9rem; color: var(--texto-2); }
.numeros-projeto strong { color: var(--tinta); }
.cartao-projeto .grupo-botoes { margin-top: 4px; }
.nowrap { white-space: nowrap; }
/* quem usa uma área só (professor, profissional de saúde) não precisa do trilho */
.sem-trilho .trilho { display: none; }
.sem-trilho .casca { grid-template-columns: minmax(0, 1fr); background: none; padding-bottom: 0; }
.sem-trilho .barra-logo { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--fundo); }
.sem-trilho .barra-logo img { width: 28px; height: 28px; object-fit: contain; }
.sem-trilho .area { margin: 0 auto; }
.credito-painel { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--linha); font-size: .82rem; color: var(--texto-3); }
.entrada .credito { margin-top: 18px; font-size: .85rem; opacity: .7; }

/* ================================================================ relatórios */
.relatorio-rapido { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-g);
  padding: 16px 18px; margin-bottom: 8px; }
.relatorio-rapido > div { display: grid; flex: 1 1 220px; }
.relatorio-rapido small { color: var(--texto-2); }
.relatorio-rapido input[type=text] { font: inherit; height: 44px; padding: 0 12px; border: 1px solid var(--linha-forte); border-radius: var(--raio); width: 190px; }
.cartoes-relatorio { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.cartao-relatorio { display: grid; gap: 6px; align-content: start; padding: 16px 18px; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-g);
  border-left: 4px solid var(--cor); text-decoration: none; color: var(--tinta); }
.cartao-relatorio:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor) 14%, transparent); }
.cartao-relatorio span { color: var(--texto-2); font-size: .93rem; }
.atalhos-periodo { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .9rem; }
.filtros-texto { color: var(--texto-2); margin: -4px 0 14px; }
.tabelas-lado { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 0 20px; }
.tabela-relatorio .grupo-titulo { font-size: 1.15rem; }
tfoot td { background: #fbfcfd; border-top: 1px solid var(--linha); }
.indicadores strong.valor-texto { font-size: 1.15rem; line-height: 1.25; }

/* ================================================================ filtros */
.filtros-painel .campo-busca { flex: 1 1 260px; }
.filtros-painel .campo-busca input { width: 100%; }
.filtros-painel select { max-width: 260px; }
.mais-filtros { flex-basis: 100%; border-top: 1px solid var(--linha); padding-top: 10px; margin-top: 2px; }
.mais-filtros > summary { cursor: pointer; font-weight: 600; color: var(--tinta); list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.mais-filtros > summary::-webkit-details-marker { display: none; }
.mais-filtros > summary::before { content: "+"; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--fundo); font-weight: 700; }
.mais-filtros[open] > summary::before { content: "−"; }
.grupos-filtro { display: grid; gap: 16px; margin-top: 12px; }
.grupos-filtro fieldset { border: 0; padding: 14px 0 0; margin: 0; border-top: 1px dashed var(--linha); min-width: 0; }
.grupos-filtro fieldset:first-child { border-top: 0; padding-top: 0; }
.grupos-filtro legend { font: 700 .95rem var(--f-titulo); color: var(--tinta); padding: 0; float: left; width: 100%; margin-bottom: 8px; }
.grupos-filtro .campos { clear: both; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 14px; }
.grupos-filtro select, .grupos-filtro input { width: 100%; max-width: none; min-width: 0; }
.grupos-filtro .par { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.filtros-painel input[type=number] { font: inherit; height: 42px; padding: 0 12px; border: 1px solid var(--linha-forte); border-radius: var(--raio); background: #fff; }
.etiquetas-filtro { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: -6px 0 16px; }
.etiqueta { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 12px; border-radius: 99px; background: #fff; border: 1px solid var(--linha-forte);
  color: var(--tinta); text-decoration: none; font-size: .9rem; }
.etiqueta span { color: var(--texto-2); }
.etiqueta b { font-size: 1.05rem; line-height: 1; color: var(--texto-3); }
.etiqueta:hover { border-color: var(--erro); }
.etiqueta:hover b { color: var(--erro); }
.etiquetas-filtro .limpar { font-size: .9rem; margin-left: 4px; }
@media (max-width: 640px) { .filtros-painel label { flex: 1 1 100%; } .filtros-painel select { max-width: none; width: 100%; } }
.limpar-link { align-self: center; font-size: .92rem; }
.rodape-filtros { margin-top: 16px; }