/* COMPONENTES COMUNS — carregar depois de temas.css. Sem paleta própria. */
/* Títulos */
.tta,.ttb {display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; width:100%; color:var(--link); border-bottom:1px solid var(--link); gap:12px; padding-bottom:8px; margin-bottom:20px}
.tta {border-bottom-width:3px; padding-bottom:12px; margin-bottom:40px}
.tta h2,.ttb h2 {display:flex; align-items:center; gap:8px; margin:0; color:inherit; font:500 20px/1.2 Roboto,sans-serif}
.tta h2 {font-size:28px}
.ttrotulo {display:inline-flex; align-items:center; gap:8px; margin-bottom:14px; color:var(--link); font:700 12px/1.4 Roboto,sans-serif; letter-spacing:.12em; text-transform:uppercase}
.ttrotulo:before {content:""; width:3px; height:17px; background:currentColor}
.ttmax {margin:0; max-width:780px; color:var(--titulo); font:500 clamp(30px,4.2vw,58px)/1.1 Roboto,sans-serif; letter-spacing:-.035em}
/* Botões e cards */
.btn-comum,.tta > a,.tta > button,.ttb > a,.ttb > button {display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; border:0; border-radius:7px; color:var(--botao-texto); background:var(--botao-fundo); font:700 13px/1.4 Roboto,sans-serif; text-decoration:none; text-align:center; cursor:pointer}
.tta > a,.tta > button,.ttb > a,.ttb > button {padding:8px 12px; font-size:12px}
.btn-card {display:flex; align-items:center; gap:14px; min-height:78px; padding:17px; border:1px solid var(--card-linha); border-radius:12px; color:var(--card-texto); background:var(--card-fundo); text-decoration:none}
.btn-card i,.icone-box {width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; border-radius:9px; color:var(--botao-texto); background:var(--botao-fundo)}
.btn-card strong {font:600 13px/1.4 Roboto,sans-serif}
.icone-box svg {width:22px; height:22px}
.texto-suave {display:block; color:var(--texto-suave); font:400 12px/1.45 Roboto,sans-serif}
.btn-comum svg {width:17px; height:17px}

.btn-card,.hover-ampliar:not(img):not(.acordion-links a) {transition:box-shadow .22s ease}
.btn-comum,.tta > a,.tta > button,.ttb > a,.ttb > button,.acordion > summary,.acordion-light > summary,.acordion-links a,.abas-tab,.hover-links > a {transition:background-color .22s ease}

@media(hover:hover) and (pointer:fine) {
 .btn-card:hover,.hover-ampliar:not(img):not(.acordion-links a):hover {box-shadow:var(--card-sombra)}
 .btn-comum:hover,.tta > a:hover,.tta > button:hover,.ttb > a:hover,.ttb > button:hover,.abas-tab.active:hover {background:var(--botao-hover)}
 .acordion > summary:hover,.acordion-light > summary:hover,.acordion-links a:hover,.abas-tab:not(.active):hover {background:var(--fundo-destaque)}
 .hover-links > a:hover {--atalho-fundo:var(--fundo-suave); background:var(--fundo-suave)}
}
.btn-comum:focus-visible,.btn-card:focus-visible,.hover-ampliar:focus-visible,.campo:focus-visible,.acordion > summary:focus-visible,.acordion-light > summary:focus-visible,.abas-tab:focus-visible {outline:2px solid var(--link); outline-offset:3px}
/* Grids: alinhamento vertical só quando solicitado com .grid-centro. */
.grid-2,.grid-3 {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-items:start}
.grid-3 {grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-centro {align-items:center}
/* Campos */
.campo {min-width:0; min-height:42px; padding:10px 12px; border:1px solid var(--campo-linha); border-radius:7px; color:var(--campo-texto); background:var(--campo-fundo); font:400 13px/1.4 Roboto,sans-serif}
.campo::placeholder {color:var(--campo-placeholder)}
/* Entrada das sections: conteúdo fica visível se o JS não carregar. */
.sections-anime.anime-ativa {opacity:0; transform:translateY(22px); transition:opacity .65s ease,transform .65s cubic-bezier(.22,.61,.36,1)}
.sections-anime.anime-ativa.anime-visivel {opacity:1; transform:none}
/* Acordeões: details com summary e .acordion-conteudo como filhos diretos. */
.acordion,.acordion-light {min-width:0; border:1px solid var(--linha); border-radius:12px; color:var(--texto); background:var(--card-fundo)}
.acordion > summary,.acordion-light > summary {display:flex; align-items:center; gap:14px; padding:18px; list-style:none; cursor:pointer}
.acordion > summary::-webkit-details-marker,.acordion-light > summary::-webkit-details-marker {display:none}
.acordion-titulo {min-width:0; flex:1}
.acordion-titulo h3 {margin:0 0 4px; color:var(--titulo); font:600 17px/1.35 Roboto,sans-serif}
.acordion-seta {width:20px; height:20px; flex:0 0 20px; color:var(--link); transition:transform .25s}
.acordion[open]:not(.is-closing) .acordion-seta,.acordion-light[open]:not(.is-closing) .acordion-seta {transform:rotate(180deg)}
.acordion-conteudo {padding:0 18px 18px}
.acordion-grade {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:18px; position:relative}
.acordion-light {position:relative}
.acordion-light[open] {z-index:2}
.acordion-light > .acordion-conteudo {position:absolute; top:calc(100% + 8px); left:-1px; right:-1px; padding:18px; max-height:60vh; overflow:auto; overscroll-behavior:contain; border:1px solid var(--linha); border-radius:12px; background:var(--card-fundo); box-shadow:var(--card-sombra)}
.acordion-links {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.acordion-links a {display:flex; align-items:center; padding:9px 10px; border:1px solid var(--linha); border-radius:6px; color:var(--texto); background:var(--fundo-suave); text-decoration:none; overflow-wrap:anywhere; font:400 13px/1.4 Roboto,sans-serif}
/* Abas: cada .abas é independente. */
.abas-menu {display:flex; flex-wrap:wrap; gap:10px; padding-bottom:20px; border-bottom:1px solid var(--linha)}
.abas-tab {display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:10px 18px; border:1px solid var(--linha); border-radius:8px; color:var(--texto); background:var(--card-fundo); font:600 13px/1.4 Roboto,sans-serif; cursor:pointer}
.abas-tab svg {width:18px; height:18px}
.abas-tab.active {color:var(--botao-texto); background:var(--botao-fundo); border-color:var(--botao-fundo)}
.abas[data-abas-ativa] > .abas-painel:not(.active) {display:none}

/* Tabela responsiva: cada célula deve ter data-label. */
.tabela-wrap {overflow:auto}
.tabela {width:100%; border-collapse:collapse; color:var(--texto)}
.tabela th {padding:14px 16px; color:var(--texto-suave); text-align:left; font:700 11px/1.4 Roboto,sans-serif; text-transform:uppercase}
.tabela td {padding:16px; border-top:1px solid var(--linha); font:400 13px/1.5 Roboto,sans-serif; vertical-align:top}
.tabela .tabela-vazio {text-align:center; color:var(--texto-suave)}
/* Modal nativo: abertura por data-dialog="ID". */
.dialog-comum {width:min(680px,calc(100% - 30px)); max-width:calc(100% - 30px); max-height:90vh; padding:0; border:1px solid var(--linha); border-radius:14px; color:var(--modal-texto); background:var(--modal-fundo); box-shadow:var(--card-sombra)}
.dialog-comum[open] {display:flex; flex-direction:column}
.dialog-comum::backdrop {background:rgba(0,0,0,.55)}
.dialog-topo {display:flex; flex:none; justify-content:space-between; align-items:center; gap:12px; padding:14px 24px; border-bottom:1px solid var(--linha)}
.dialog-topo img {height:46px; width:auto}
.dialog-topo form {margin:0}
.dialog-fechar {width:38px; height:38px; border:0; border-radius:6px; color:var(--modal-texto); background:var(--fundo-destaque); font-size:26px; cursor:pointer}
.dialog-scroll {overflow:auto; min-height:0; padding:24px}
.dialog-scroll h3 {margin:0 0 18px; color:var(--titulo); font:600 22px/1.3 Roboto,sans-serif}
.dialog-rodape {flex:none; padding:12px 24px; border-top:1px solid var(--linha); color:var(--texto-suave); font-size:12px; text-align:center}
body.dialog-aberto {overflow:hidden}
.lista-numeros {margin:0; padding:0; list-style:none}
.lista-numeros li {display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--linha); font:400 13px/1.5 Roboto,sans-serif}
.lista-numeros li:last-child {border:0}
.lista-numeros li span {min-width:0; overflow-wrap:anywhere}
.lista-numeros li strong {flex:none; color:var(--link)}
@media(max-width:900px) {.grid-2 {grid-template-columns:1fr}}
@media(max-width:1120px) {.acordion-links {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px) {.acordion-grade,.acordion-links {grid-template-columns:1fr}}
@media(max-width:620px) {
 .grid-3 {grid-template-columns:1fr}
 .tta h2 {font-size:22px} .ttb h2 {font-size:18px} .ttrotulo {font-size:11px}
 .abas-tab {flex:1 1 calc(50% - 10px)}
 .tabela,.tabela tbody {display:block} .tabela thead {display:none}
 .tabela tr {display:block; margin-bottom:12px; padding:8px 12px; border:1px solid var(--linha); border-radius:8px; background:var(--card-fundo)}
 .tabela td {display:grid; grid-template-columns:minmax(80px,105px) minmax(0,1fr); gap:10px; padding:9px 0; overflow-wrap:anywhere}
 .tabela td:first-child {border:0} .tabela td:before {content:attr(data-label); color:var(--texto-suave); font-size:10px; text-transform:uppercase}
 .tabela td.tabela-vazio {display:block} .tabela td.tabela-vazio:before {content:none}
}
@media(prefers-reduced-motion:reduce) {
 .sections-anime.anime-ativa {opacity:1; transform:none; transition:none}
 .btn-card,.hover-ampliar,.btn-comum,.acordion > summary,.acordion-light > summary,.acordion-seta,.tta > a,.tta > button,.ttb > a,.ttb > button {transition:none}
}

.acordion-seta svg {width:100%; height:100%}
.acordion > .acordion-conteudo {overflow:hidden}
[hidden] {display:none!important}

.dialog-fechar:focus-visible {outline:2px solid var(--link); outline-offset:3px}

.acordion-seta i {font-size:16px}