/* Identidade Aitree – kit oficial (krypta-identidade/marca/aitree-logo-final).
   Degradê da marca: escuro #22D3EE → #3B82F6 → #A855F7 · claro #0891B2 → #2563EB → #7C3AED · fundo #0D1418.
   Tipografia: Space Grotesk (títulos e números), Inter (texto), JetBrains Mono (rótulos técnicos).
   Tema claro e escuro: segue o sistema operacional ou a escolha do usuário (botão no topo). */
:root {
  --fundo: #F4F6F8;
  --superficie: #FFFFFF;
  --superficie-2: #F8FAFC;
  --borda: #DCE3EA;
  --tinta: #0F172A;
  --tinta-2: #334155;
  --tinta-3: #5B6B7E;
  --ciano: #0891B2;
  --acento: #2563EB;
  --violeta: #7C3AED;
  --acento-forte: #1D4ED8;
  --degrade: linear-gradient(135deg, #0891B2, #2563EB 55%, #7C3AED);
  --suave: rgba(37, 99, 235, .07);
  --suave-borda: rgba(37, 99, 235, .22);
  --suave-tinta: #1E40AF;
  --log-fundo: #0D1418;
  /* séries categóricas (ordem fixa; derivadas da marca + apoio para leitura) */
  --serie-1: #2563EB; --serie-2: #0891B2; --serie-3: #7C3AED; --serie-4: #059669; --serie-5: #D97706; --serie-6: #DB2777;
  --f-display: "Space Grotesk", system-ui, sans-serif;
  --f-corpo: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;
  --bs-primary: #2563EB; --bs-primary-rgb: 37, 99, 235; --bs-link-color: #2563EB; --bs-link-color-rgb: 37, 99, 235;
  --bs-link-hover-color: #1D4ED8; --bs-link-hover-color-rgb: 29, 78, 216;
  --bs-body-font-family: var(--f-corpo);
  --bs-body-color: var(--tinta);
  --bs-body-bg: var(--fundo);
  --bs-border-color: var(--borda);
  --bs-border-radius: .6rem;
  color-scheme: light;
}
[data-bs-theme="dark"] {
  --fundo: #080C0F;
  --superficie: #0F161A;
  --superficie-2: #131C21;
  --borda: #22303A;
  --tinta: #FFFFFF;
  --tinta-2: #CBD5E1;
  --tinta-3: #8A9AAE;
  --ciano: #22D3EE;
  --acento: #3B82F6;
  --violeta: #A855F7;
  --acento-forte: #60A5FA;
  --degrade: linear-gradient(135deg, #22D3EE, #3B82F6 55%, #A855F7);
  --suave: rgba(59, 130, 246, .12);
  --suave-borda: rgba(59, 130, 246, .32);
  --suave-tinta: #BFDBFE;
  --log-fundo: #05080A;
  --serie-1: #3B82F6; --serie-2: #22D3EE; --serie-3: #A855F7; --serie-4: #34D399; --serie-5: #FBBF24; --serie-6: #F472B6;
  --bs-primary: #3B82F6; --bs-primary-rgb: 59, 130, 246; --bs-link-color: #60A5FA; --bs-link-color-rgb: 96, 165, 250;
  --bs-link-hover-color: #93C5FD; --bs-link-hover-color-rgb: 147, 197, 253;
  --bs-body-color: var(--tinta-2);
  --bs-body-bg: var(--fundo);
  --bs-secondary-color: var(--tinta-3);
  --bs-tertiary-bg: var(--superficie-2);
  --bs-border-color: var(--borda);
  color-scheme: dark;
}

body { background: var(--fundo); color: var(--tinta); font-family: var(--f-corpo); font-size: .94rem; }
[data-bs-theme="dark"] body { color: var(--tinta-2); }
h1, h2, h3, h4, h5, h6, .titulo-cartao, .secao, .kpi .val, .modal-title { font-family: var(--f-display); letter-spacing: -.01em; }
[data-bs-theme="dark"] :is(h1, h2, h3, h4, h5, h6, .titulo-cartao, .modal-title, strong, b) { color: var(--tinta); }
.text-secondary { color: var(--tinta-3) !important; }
::selection { background: rgba(59, 130, 246, .3); }

/* ---------------------------------------------------------------- botões e formulários */
.btn-primary {
  --bs-btn-color: #fff; --bs-btn-bg: var(--acento); --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--acento-forte); --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: var(--acento-forte); --bs-btn-disabled-bg: var(--acento); --bs-btn-disabled-border-color: transparent;
  background-image: var(--degrade); font-weight: 500;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-outline-primary {
  --bs-btn-color: var(--acento); --bs-btn-border-color: var(--acento); --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--acento); --bs-btn-hover-border-color: var(--acento); --bs-btn-active-bg: var(--acento-forte);
  --bs-btn-active-border-color: var(--acento-forte);
}
.btn-outline-secondary { --bs-btn-color: var(--tinta-2); --bs-btn-border-color: var(--borda); --bs-btn-hover-bg: var(--superficie-2); --bs-btn-hover-color: var(--tinta); --bs-btn-hover-border-color: var(--tinta-3); }
.text-bg-primary { background: var(--degrade) !important; color: #fff !important; }
.text-primary { color: var(--acento) !important; }
.form-control, .form-select { background-color: var(--superficie); border-color: var(--borda); color: var(--tinta); }
.form-control::placeholder { color: var(--tinta-3); opacity: .8; }
.form-control:focus, .form-select:focus { background-color: var(--superficie); color: var(--tinta); border-color: var(--acento); box-shadow: 0 0 0 .2rem rgba(59, 130, 246, .22); }
.form-check-input:checked { background-color: var(--acento); border-color: var(--acento); }
.form-range::-webkit-slider-thumb { background: var(--acento); }
.form-range::-moz-range-thumb { background: var(--acento); }
.form-text { color: var(--tinta-3); }
.input-group-text { background: var(--superficie-2); border-color: var(--borda); color: var(--tinta-3); }
.progress { background: var(--borda); }
.progress-bar { background: var(--degrade); }
.spinner-border.text-primary { color: var(--ciano) !important; }

/* ---------------------------------------------------------------- topo (sempre no fundo da marca) */
.topo { background: #0D1418; color: #fff; position: sticky; top: 0; z-index: 1030; min-height: 56px; }
.topo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, #22D3EE, #3B82F6 55%, #A855F7); }
.topo .logo { height: 32px; width: auto; display: block; }
.topo .separador { width: 1px; height: 24px; background: #22303A; }
.topo .produto { font-family: var(--f-display); font-weight: 500; color: #CBD5E1; letter-spacing: .01em; }
.topo .badge-base { background: rgba(255, 255, 255, .06); border: 1px solid #22303A; color: #CBD5E1; border-radius: 999px; padding: .22rem .65rem; white-space: nowrap; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .02em; }
.topo .badge-base i { color: #22D3EE; }
.btn-tema { border: 1px solid #22303A; background: rgba(255, 255, 255, .04); color: #CBD5E1; border-radius: 999px; width: 32px; height: 32px; display: inline-grid; place-items: center; padding: 0; }
.btn-tema:hover { color: #fff; border-color: #3B82F6; }

.lateral { background: transparent; }
@media (min-width: 992px) { .lateral { position: sticky; top: 56px; height: calc(100vh - 56px); overflow-y: auto; } }

/* ---------------------------------------------------------------- cartões e KPIs */
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; padding: 16px; }
.titulo-cartao { font-size: 1rem; font-weight: 700; margin-bottom: 2px; color: var(--tinta); }
.nota { color: var(--tinta-3); font-size: .8rem; margin-bottom: 8px; }

.abas .nav-link { color: var(--tinta-2); white-space: nowrap; border-radius: 999px; padding: .4rem .95rem; font-family: var(--f-display); font-weight: 500; }
.abas .nav-link:hover { color: var(--acento); }
.abas .nav-link.active { background: var(--degrade); color: #fff; box-shadow: 0 4px 14px rgba(59, 130, 246, .25); }

.kpi { background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; padding: 12px 14px; height: 100%; }
.kpi .rot { color: var(--tinta-3); font: 500 .68rem var(--f-mono); text-transform: uppercase; letter-spacing: .1em; }
.kpi .val { font-size: 1.6rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--tinta); }
.kpi .sub { color: var(--tinta-3); font-size: .8rem; }
.kpi.destaque { background: var(--degrade); border: 0; color: #fff; box-shadow: 0 8px 24px rgba(59, 130, 246, .22); }
.kpi.destaque .val { color: #fff; }
.kpi.destaque .rot, .kpi.destaque .sub { color: rgba(255, 255, 255, .88); }

.grafico { position: relative; height: 280px; }
.grafico.alto { height: 400px; }
.grafico.baixo { height: 220px; }
.rolagem { max-height: 420px; overflow-y: auto; }

/* ---------------------------------------------------------------- tabelas */
.tabela { font-size: .86rem; font-variant-numeric: tabular-nums; margin-bottom: 0; --bs-table-bg: transparent; --bs-table-color: var(--tinta-2); --bs-table-border-color: var(--borda); --bs-table-hover-bg: var(--suave); --bs-table-hover-color: var(--tinta); }
.tabela thead th { color: var(--tinta-3); font: 500 .7rem var(--f-mono); text-transform: uppercase; letter-spacing: .08em; border-bottom: 2px solid transparent; border-image: var(--degrade) 1; white-space: nowrap; position: sticky; top: 0; background: var(--superficie); }
.tabela thead th[data-k] { cursor: pointer; }
.tabela thead th[data-k]:hover { color: var(--acento); }
.tabela td.n, .tabela th.n { text-align: right; white-space: nowrap; }
.tabela tbody tr.clicavel { cursor: pointer; }
.barra-score { height: 6px; border-radius: 3px; background: var(--degrade); margin-top: 2px; }
.accordion-header .form-check-input { width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0; }

/* ---------------------------------------------------------------- filtros e sugestões */
.chip { background: var(--suave); border: 1px solid var(--suave-borda); color: var(--suave-tinta); border-radius: 999px; padding: 2px 4px 2px 10px; font-size: .8rem; display: inline-flex; align-items: center; gap: 4px; }
.chip button { border: 0; background: transparent; color: inherit; padding: 0 4px; line-height: 1; }
.sugestoes { position: absolute; z-index: 1050; left: 0; right: 0; top: 100%; max-height: 360px; overflow-y: auto; }
.sugestoes .list-group-item { font-size: .9rem; }
.sugestoes .tipo { font: 500 .66rem var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-3); }
.list-group-item { background: var(--superficie); border-color: var(--borda); color: var(--tinta-2); }
.list-group-item-action:hover { background: var(--suave); color: var(--tinta); }

.accordion-button { padding: .45rem .25rem; font-size: .9rem; font-weight: 600; }
.accordion-button:not(.collapsed) { background: transparent; color: var(--acento); box-shadow: none; }
.accordion-body { padding: .25rem .25rem .5rem; }

/* ---------------------------------------------------------------- estados */
.carregando { color: var(--tinta-3); }
.status-sec { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--borda); margin-right: 2px; }
.status-sec.ok { background: var(--serie-4); }
.status-sec.erro { background: #EF4444; }
.status-sec.vazio { background: var(--tinta-3); }
.status-sec.carregando { background: var(--ciano); animation: pulso 1s infinite; }
@keyframes pulso { 50% { opacity: .3; } }
.ponto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--superficie); box-shadow: 0 0 0 1px var(--borda); vertical-align: middle; }
.vazio { color: var(--tinta-3); font-style: italic; text-align: center; padding: 28px 0; }
.aviso-base { background: var(--suave); border: 1px solid var(--suave-borda); border-radius: 12px; padding: 14px 16px; color: var(--suave-tinta); }
.aviso-base strong { color: inherit; }
.alert-danger { --bs-alert-bg: rgba(239, 68, 68, .08); --bs-alert-border-color: rgba(239, 68, 68, .3); --bs-alert-color: #B91C1C; }
[data-bs-theme="dark"] .alert-danger { --bs-alert-color: #FCA5A5; }
.carga { background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; padding: 10px 14px; }
.atualizando { opacity: .45; transition: opacity .2s; pointer-events: none; }
.log { font-family: var(--f-mono); font-size: .72rem; background: var(--log-fundo); color: #CBD5E1; border: 1px solid #22303A; border-radius: 8px; padding: 8px; max-height: 180px; overflow-y: auto; white-space: pre-wrap; }

/* ---------------------------------------------------------------- seções do panorama */
.secao { font-size: 1.2rem; font-weight: 700; margin: 8px 0 10px; scroll-margin-top: 76px; background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }
.secao i { -webkit-text-fill-color: var(--acento); }
.sumario-secoes { display: flex; flex-wrap: wrap; gap: 6px; position: sticky; top: 56px; z-index: 5; background: var(--fundo); padding: 6px 0; }
.sumario-secoes a { font-size: .8rem; padding: 3px 11px; border-radius: 999px; background: var(--suave); border: 1px solid var(--suave-borda); color: var(--suave-tinta); text-decoration: none; }
.sumario-secoes a:hover { background: var(--degrade); border-color: transparent; color: #fff; }
.tabela-larga th { font-size: .66rem; white-space: normal; min-width: 70px; vertical-align: bottom; }
.tabela-larga td:first-child, .tabela-larga th:first-child { position: sticky; left: 0; background: var(--superficie); z-index: 1; min-width: 170px; }
#abaPanorama .table-responsive:has(.tabela-larga) { max-height: 640px; }
.contexto { color: var(--tinta-2); margin: -.35rem 0 .9rem; font-size: .95rem; max-width: 70rem; }
.mini-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .6rem; }
.mini-kpis div { background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 8px; padding: .5rem .7rem; }
.mini-kpis b { display: block; font: 700 1.25rem var(--f-display); color: var(--tinta); }
#tabDoencas td:nth-child(3), #tabObitos td:nth-child(3) { min-width: 280px; }
#tabHospUso td:first-child, #tabConc td:first-child { min-width: 220px; }

/* ---------------------------------------------------------------- mapa */
#mapa { height: 460px; border-radius: 10px; border: 1px solid var(--borda); }
[data-bs-theme="dark"] #mapa .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.82) contrast(.9) saturate(.6); }
[data-bs-theme="dark"] .leaflet-container { background: #0D1418; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip, .leaflet-tooltip { background: var(--superficie); color: var(--tinta-2); border-color: var(--borda); }
.centro-perimetro { color: var(--acento); font-size: 28px; line-height: 1; text-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
#cartaoPerimetro .form-switch .form-check-input { cursor: pointer; }

/* ---------------------------------------------------------------- relatórios, modal, rodapé */
#previewDash { height: 1400px; }
.modal-content { background: var(--superficie); border-color: var(--borda); }
.modal-header { border-bottom: 1px solid var(--borda); }
.rodape { color: var(--tinta-3); font-size: .78rem; padding: 18px 0 26px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.rodape img { height: 18px; width: auto; }
.rodape .mono { font: 500 .68rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
.topo .slogan { font: 500 .62rem var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: #8A9AAE; }
.so-escuro { display: none; }
[data-bs-theme="dark"] .so-escuro { display: inline; }
[data-bs-theme="dark"] .so-claro { display: none; }