/* ==========================================================================
   Indicadores do painel do gestor (/gestao/?secao=indicadores): cartões, gráficos em SVG/HTML, tabelas.
   Classes com prefixo "ind-". Dentro de .saae-app (herda as cores e as fontes do painel). Porte de indicadores.css da Prefeitura
   de Cruz do Espírito Santo, na identidade do SAAE: verdes e branco, âmbar só em avisos, nenhum azul.
   ========================================================================== */
.ind {
  --ind-ink: var(--app-ink, #15301f);
  --ind-muted: var(--app-muted, #4b6253);
  --ind-line: var(--app-line, #d6e6da);
  --ind-paper: var(--app-paper, #f2f8f3);
  --ind-deep: var(--app-deep, #083820);
  --ind-green: var(--app-green, #007030);
  --ind-primary: var(--app-primary, #0a6f3a);
  --ind-mint: var(--app-mint, #8bcf9b);
  --ind-tint: var(--app-tint, #dff3e5);
  --ind-focus: var(--app-focus, #128040);
  --ind-font-display: var(--app-font-display, "Montserrat", "Segoe UI", system-ui, sans-serif);
  --ind-font-body: var(--app-font-body, "Source Sans 3", "Segoe UI", system-ui, sans-serif);
  container-type: inline-size;
  container-name: indmain;
  color: var(--ind-ink);
}
.ind * { box-sizing: border-box; }
.ind a { color: var(--ind-green); }
.ind a:hover, .ind a:focus-visible { color: var(--ind-deep); }
.ind > * + * { margin-top: 1.25rem; }

/* ---- cabeçalho, botões, campos ---- */
.ind-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; }
.ind-head h3 { margin: .25rem 0 0; color: var(--ind-ink); font-family: var(--ind-font-display); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; line-height: 1.15; }
.ind-lead { max-width: 66ch; margin: .5rem 0 0; color: var(--ind-muted); font-size: 1.02rem; line-height: 1.55; }
.ind-head-actions { display: flex; flex: none; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .7rem; }
.ind-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 44px; padding: .5rem 1.15rem; border: 2px solid var(--ind-primary); border-radius: 999px; background: var(--ind-primary); color: #fff !important; font: 800 .95rem/1.2 var(--ind-font-body); text-decoration: none !important; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.ind-btn:hover, .ind-btn:focus-visible { border-color: var(--ind-deep); background: var(--ind-deep); color: #fff !important; }
.ind-btn.is-light { border-color: var(--ind-line); background: #fff; color: var(--ind-primary) !important; }
.ind-btn.is-light:hover, .ind-btn.is-light:focus-visible { border-color: var(--ind-green); background: var(--ind-paper); color: var(--ind-green) !important; }
.ind-btn.is-small { min-height: 38px; padding: .3rem .9rem; font-size: .9rem; }
.ind-btn svg { flex: none; width: 18px; height: 18px; }
.ind-field { display: grid; gap: .3rem; color: var(--ind-muted); font-size: .875rem; font-weight: 800; }
.ind-field select, .ind-field input { min-width: 150px; min-height: 44px; padding: .45rem .75rem; border: 1.5px solid #abc3b0; border-radius: 12px; background: #fff; color: var(--ind-ink); font: 600 .95rem var(--ind-font-body); }
.ind-field input { min-width: 180px; }
.ind-updated { margin-left: auto; color: var(--ind-muted); font-size: .875rem; line-height: 1.4; }

/* ---- barra do período ---- */
.ind-periodbar { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; margin: 0; padding: .8rem 1.1rem; border: 1px solid var(--ind-line); border-radius: 18px; background: var(--ind-paper); }
.ind-periodbar-title { display: inline-flex; align-items: center; gap: .45rem; color: var(--ind-muted); font-size: .95rem; font-weight: 800; }
.ind-periodbar-title svg { width: 16px; height: 16px; color: var(--ind-green); }
.ind-periodbar-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; }
.ind-periodbar .ind-field select { min-width: 130px; min-height: 42px; }
.ind-stepbox { display: inline-flex; align-items: flex-end; gap: .35rem; }
.ind-step { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border: 2px solid var(--ind-line); border-radius: 12px; background: #fff; color: var(--ind-deep); font-size: 1.5rem; line-height: 1; text-decoration: none !important; }
a.ind-step:hover, a.ind-step:focus-visible { border-color: var(--ind-green); background: var(--ind-tint); color: var(--ind-deep); }
.ind-step.is-off { opacity: .3; }
.ind-periodbar-closed { display: flex; flex: 1 1 100%; align-items: flex-start; gap: .45rem; margin: 0; padding-top: .55rem; border-top: 1px dashed var(--ind-line); color: var(--ind-ink); font-size: .9375rem; line-height: 1.45; }
.ind-periodbar-closed svg { flex: none; width: 16px; height: 16px; margin-top: .15rem; color: var(--ind-green); }

/* ---- atalhos das seções ---- */
.ind-secchips { display: flex; flex-wrap: wrap; gap: .45rem; }
.ind .ind-secchips a { display: inline-flex; align-items: center; gap: .4rem; min-height: 38px; padding: .3rem .9rem; border: 1px solid var(--ind-line); border-radius: 999px; background: #fff; color: var(--ind-ink) !important; font-size: .95rem; font-weight: 700; text-decoration: none !important; }
.ind .ind-secchips a:hover, .ind .ind-secchips a:focus-visible { border-color: var(--ind-primary); }
.ind .ind-secchips a.is-active { border-color: var(--ind-primary); background: var(--ind-primary); color: #fff !important; }
.ind .ind-secchips a.is-home { border-color: #cfe5d6; background: var(--ind-tint); color: var(--ind-primary) !important; }
.ind-secchips svg { width: 18px; height: 18px; }
.ind-secmenu { display: grid; gap: 1.2rem; }
.ind ul.ind-secgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: .8rem; margin: 0; padding: 0; list-style: none; }
@container indmain (min-width: 960px) { .ind ul.ind-secgrid.has-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ind ul.ind-secgrid > li { margin: 0; padding: 0; }
.ind a.ind-sec { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-areas: "i b" "s s"; grid-template-rows: 1fr auto; gap: .7rem .85rem; height: 100%; padding: 1rem 2.6rem 1rem 1rem; border: 1px solid var(--ind-line); border-top: 4px solid #cfe0d4; border-radius: 16px; background: #fff; color: var(--ind-ink) !important; text-decoration: none !important; box-shadow: 0 4px 14px rgba(8, 56, 32, .04); transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
.ind a.ind-sec:hover, .ind a.ind-sec:focus-visible { border-color: var(--ind-mint); box-shadow: 0 12px 26px rgba(8, 56, 32, .11); transform: translateY(-2px); }
.ind-sec-ico { grid-area: i; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px 14px 14px 5px; background: var(--ind-tint); color: var(--ind-primary); }
.ind-sec-ico svg { width: 24px; height: 24px; }
.ind-sec-body { grid-area: b; display: grid; align-content: start; gap: .2rem; min-width: 0; }
.ind-sec-name { font-family: var(--ind-font-display); font-size: 1.05rem; font-weight: 800; line-height: 1.25; }
.ind-sec-desc { color: var(--ind-muted); font-size: .95rem; font-weight: 500; line-height: 1.4; }
.ind-sec-sig { grid-area: s; display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .55rem; padding-top: .65rem; border-top: 1px dashed var(--ind-line); color: var(--ind-muted); font-size: .95rem; font-weight: 500; line-height: 1.4; }
.ind-sec-sig em { flex: none; padding: .1rem .55rem; border-radius: 999px; background: #eef4f0; color: var(--ind-ink); font-size: .875rem; font-style: normal; font-weight: 800; }
.ind-sec-sig b { color: var(--ind-ink); font-family: var(--ind-font-display); font-size: 1.1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ind-sec-go { position: absolute; top: 1.05rem; right: .95rem; color: #7a9a86; }
.ind-sec-go svg { width: 18px; height: 18px; }
.ind a.ind-sec.is-ok { border-top-color: var(--ind-focus); }
.ind a.ind-sec.is-ok .ind-sec-sig em { background: var(--ind-tint); color: #0b5a2b; }
.ind a.ind-sec.is-warn { border-top-color: #f2b01e; }
.ind a.ind-sec.is-warn .ind-sec-sig em { background: #fff1d6; color: #7a4f00; }
.ind a.ind-sec.is-bad { border-top-color: #c0392b; }
.ind a.ind-sec.is-bad .ind-sec-sig em { background: #fde8e4; color: #9a2d1b; }
.ind a.ind-sec.is-info { border-top-color: var(--ind-mint); }
.ind a.ind-sec.is-info .ind-sec-sig em { background: var(--ind-paper); color: var(--ind-deep); }

/* ---- cartões de indicador ---- */
.ind-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 225px), 1fr)); gap: .9rem; }
.ind-kpi { position: relative; display: flex; flex-direction: column; gap: .3rem; min-width: 0; padding: 1.05rem 1.15rem 1.1rem; border: 1px solid var(--ind-line); border-top: 5px solid #cfe0d4; border-radius: 18px; background: #fff; box-shadow: 0 8px 22px rgba(8, 56, 32, .05); }
.ind-kpi.is-ok { border-top-color: var(--ind-focus); }
.ind-kpi.is-warn { border-top-color: #f2b01e; }
.ind-kpi.is-bad { border-top-color: #c0392b; }
.ind-kpi.is-info { border-top-color: var(--ind-mint); }
.ind-kpi-label { margin: 0; color: var(--ind-muted); font-size: .875rem; font-weight: 800; letter-spacing: .02em; line-height: 1.3; }
.ind-kpi-value { margin: 0; color: var(--ind-ink); font-family: var(--ind-font-display); font-size: clamp(1.5rem, 2.2vw, 1.9rem); font-weight: 800; line-height: 1.1; overflow-wrap: anywhere; }
.ind-kpi-sub { margin: 0; color: var(--ind-muted); font-size: .9rem; line-height: 1.4; }
.ind-kpi-delta { margin: .15rem 0 0; font-size: .875rem; line-height: 1.35; }
.ind-delta { display: inline-block; padding: .08rem .5rem; border-radius: 999px; background: #eef3ef; color: #43554a; font-weight: 800; }
.ind-delta.is-good { background: #e0f6e6; color: #0b5a2b; }
.ind-delta.is-bad { background: #fde8e4; color: #9a2d1b; }
.ind-delta-label { color: var(--ind-muted); }
.ind-kpi-spark { margin-top: auto; padding-top: .5rem; }
.ind-spark { display: block; width: 100%; height: 34px; }
.ind-kpi-link { display: inline-flex; align-items: center; gap: .3rem; margin-top: .45rem; font-size: .9rem; font-weight: 800; text-decoration: none; }
.ind-kpi-link svg { width: 15px; height: 15px; }
@container indmain (min-width: 1150px) { .ind-kpis.is-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ---- cartões-seção ---- */
.ind-card { min-width: 0; margin: 0; padding: 1.25rem 1.35rem 1.35rem; border: 1px solid var(--ind-line); border-radius: 20px; background: #fff; box-shadow: 0 8px 22px rgba(8, 56, 32, .04); container-type: inline-size; container-name: indcard; }
.ind-card-accent { border-top: 5px solid var(--ind-primary); }
.ind-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin: 0 0 .9rem; }
.ind .ind-card-head h4 { margin: 0; color: var(--ind-ink); font-family: var(--ind-font-display); font-size: 1.12rem; font-weight: 800; line-height: 1.25; }
.ind-card-head p { margin: .3rem 0 0; max-width: 70ch; color: var(--ind-muted); font-size: .9rem; line-height: 1.5; }
.ind-card-actions { flex: none; display: flex; flex-wrap: wrap; gap: .5rem; }
.ind-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; }
.ind-grid-2 > .ind-card { margin: 0; }
.ind-empty { margin: 0; padding: 1rem; border-radius: 12px; background: var(--ind-paper); color: var(--ind-muted); }
.ind-hint { margin: .7rem 0 0; color: var(--ind-muted); font-size: .875rem; line-height: 1.55; }
.ind-hint-top { margin: 0; }
.ind-chip { display: inline-block; padding: .2rem .65rem; border-radius: 999px; background: #eef3ef; color: #43554a; font-size: .8rem; font-weight: 800; white-space: nowrap; }
.ind-chip.is-ok { background: #e0f6e6; color: #0b5a2b; }
.ind-chip.is-warn { background: #fff1d6; color: #7a4f00; }
.ind-chip.is-bad { background: #fde8e4; color: #9a2d1b; }
.ind-chip.is-info { background: var(--ind-paper); color: var(--ind-deep); }
.ind-facts { display: grid; gap: .3rem; margin: 0; }
.ind-facts > div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid #edf3ee; }
.ind-facts > div:last-child { border-bottom: 0; }
.ind-facts dt { color: var(--ind-muted); font-size: .92rem; }
.ind-facts dd { margin: 0; font-weight: 800; text-align: right; }
.ind-facts dd small { display: block; margin-top: .1rem; color: var(--ind-muted); font-size: .85rem; font-weight: 600; }
.ind-facts dd.ind-pos { color: #0b5a2b; }
.ind-facts dd.ind-neg, .ind .ind-neg { color: #9a2d1b; }
.ind-cell-sub { display: block; margin-top: .15rem; color: var(--ind-muted); font-size: .85rem; font-weight: 500; line-height: 1.35; }
.ind-sub-note { margin: .6rem 0 0; color: var(--ind-muted); font-size: .9rem; line-height: 1.45; }

/* ---- alertas ---- */
.ind-alerts { display: grid; gap: .6rem; }
.ind-alert { display: flex; align-items: flex-start; gap: .75rem; margin: 0; padding: .85rem 1rem; border: 1px solid var(--ind-line); border-left-width: 5px; border-radius: 14px; background: var(--ind-paper); color: var(--ind-ink); font-size: .95rem; line-height: 1.55; }
.ind-alert-ico { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: #fff; color: var(--ind-green); }
.ind-alert-ico svg { width: 18px; height: 18px; }
.ind-alert > div { min-width: 0; }
.ind-alert.is-warn { border-color: #f2d28a; background: #fffaf0; }
.ind-alert.is-warn .ind-alert-ico { color: #a56b00; }
.ind-alert.is-bad { border-color: #efb4aa; background: #fff4f2; }
.ind-alert.is-bad .ind-alert-ico { color: #b73a26; }
.ind-alert.is-info { border-color: var(--ind-mint); background: #f4faf6; }
.ind-alert.is-info .ind-alert-ico { color: var(--ind-deep); }
.ind-alert.is-ok { border-color: #a9d9b5; background: #f1faf3; }

/* ---- gráficos ---- */
.ind-chart-scroll { margin: .3rem 0 0; overflow-x: auto; overscroll-behavior-x: contain; }
.ind-chart-svg { display: block; width: 100%; min-width: 480px; height: auto; }
.ind-tick { fill: #4b6253; font: 600 12px var(--ind-font-body); }
.ind-chart-svg.is-compact { min-width: 0; }
.ind-chart-svg.is-compact .ind-tick { font-size: 13px; }
.ind-grid { stroke: #e4ede6; stroke-width: 1; }
.ind-axis-zero { stroke: #9db3a4; stroke-width: 1.5; }
.ind ul.ind-legend { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin: 0 0 .3rem; padding: 0; list-style: none; color: var(--ind-ink); font-size: .9rem; font-weight: 600; }
.ind ul.ind-legend > li { margin: 0; padding: 0; }
.ind-dot { display: inline-block; width: 12px; height: 12px; margin-right: .4rem; border-radius: 4px; background: var(--c, #8a9a8f); vertical-align: -1px; }
.ind-dot.is-line { width: 20px; height: 4px; border-radius: 2px; vertical-align: 3px; }
.ind-donut { display: grid; grid-template-columns: minmax(150px, 210px) minmax(0, 1fr); gap: 1.2rem; align-items: center; }
.ind-donut-svg, .ind-pie-svg { display: block; width: 100%; max-width: 210px; height: auto; margin: 0 auto; }
.ind-donut-center { fill: #15301f; font: 800 17px var(--ind-font-display); }
.ind-donut-sub { fill: #4b6253; font: 600 11px var(--ind-font-body); }
.ind ul.ind-donut-legend { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.ind ul.ind-donut-legend > li { display: grid; grid-template-columns: auto minmax(9ch, 1fr) auto; align-items: baseline; gap: .55rem; margin: 0; padding: 0; font-size: .9rem; line-height: 1.35; }
.ind-donut-legend .ind-dot { margin: 0; }
.ind-donut-name { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.ind-donut-val { text-align: right; font-weight: 800; white-space: nowrap; }
.ind-donut-val small { display: block; color: var(--ind-muted); font-size: .85rem; font-weight: 600; }
.ind-pie-label { font: 800 13px var(--ind-font-display); }
.ind-pie-total { margin: .7rem 0 0; padding-top: .55rem; border-top: 1px solid #edf3ee; color: var(--ind-muted); font-size: .9375rem; }
.ind-pie-total strong { color: var(--ind-ink); }
@container indcard (max-width: 480px) { .ind-donut { grid-template-columns: minmax(0, 1fr); } .ind-donut-fig { display: flex; justify-content: center; } }
.ind ol.ind-hbars { display: grid; gap: .85rem; margin: 0; padding: 0; list-style: none; }
.ind ol.ind-hbars > li { margin: 0; padding: 0; }
.ind-hbar-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: .92rem; line-height: 1.35; }
.ind-hbar-name { min-width: 0; overflow-wrap: anywhere; font-weight: 700; }
.ind-hbar-val { flex: none; font-weight: 800; white-space: nowrap; text-align: right; }
.ind-hbar-val small { display: block; color: var(--ind-muted); font-size: .8rem; font-weight: 600; }
.ind-hbar-track { position: relative; height: 12px; margin-top: .3rem; border-radius: 999px; background: #edf3ee; }
.ind-hbar-fill { display: block; height: 100%; min-width: 3px; border-radius: 999px; background: var(--c, #3fae6a); }
.ind-hbar-mark { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1px; border-radius: 2px; background: #15301f; }
.ind ol.ind-rank { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.ind ol.ind-rank > li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: .6rem; margin: 0; padding: 0; }
.ind-rank-pos { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--ind-paper); color: var(--ind-muted); font-size: .8rem; font-weight: 800; }
.ind-rank-body { min-width: 0; }
.ind-rank-name { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--ind-ink); font-size: .92rem; font-weight: 700; line-height: 1.3; text-decoration: none; }
.ind-rank-track { display: block; height: 6px; margin-top: .3rem; border-radius: 999px; background: #edf3ee; }
.ind-rank-track span { display: block; height: 100%; border-radius: 999px; background: var(--ind-green); }
.ind-rank-val { font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ind-rank-val small { display: block; color: var(--ind-muted); font-size: .8rem; font-weight: 600; text-align: right; }

/* ---- resultado do ano ---- */
.ind-result-sum { margin: 0 0 .6rem; padding: .8rem 1rem; border-left: 5px solid var(--ind-focus); border-radius: 12px; background: #eefaf2; }
.ind-result-sum.is-bad { border-left-color: #c0392b; background: #fdf0ee; }
.ind-result-kicker { margin: 0; color: var(--ind-ink); font-size: .9375rem; font-weight: 700; }
.ind-result-big { margin: .1rem 0 0; color: var(--ind-green); font: 800 2rem/1.15 var(--ind-font-display); font-variant-numeric: tabular-nums; }
.ind-result-sum.is-bad .ind-result-big { color: #b3261e; }
.ind-result-sub { margin: .25rem 0 0; color: var(--ind-muted); font-size: .9375rem; }
.ind-result-fig { max-width: 520px; margin: 0 auto; }
.ind-result-svg { display: block; width: 100%; height: auto; }
.ind-result-val { fill: #15301f; font: 800 17px var(--ind-font-display); }
.ind-result-name { fill: #4b6253; font: 700 14px var(--ind-font-body); }
.ind-result-diff-name { font: 800 12px var(--ind-font-body); letter-spacing: .04em; text-transform: uppercase; }
.ind-result-diff { font: 800 16px var(--ind-font-display); }

/* ---- tabelas ---- */
.ind-table-wrap { position: relative; overflow-x: auto; }
.ind table.ind-table { width: 100%; margin: 0; border-collapse: collapse; font-size: .92rem; }
.ind .ind-table th { padding: .6rem .55rem; border-bottom: 2px solid var(--ind-line); color: var(--ind-muted); font-size: .8rem; font-weight: 800; letter-spacing: .04em; line-height: 1.3; text-align: left; text-transform: uppercase; white-space: normal; }
.ind .ind-table td, .ind .ind-table tbody th { padding: .65rem .55rem; border-bottom: 1px solid #edf3ee; color: var(--ind-ink); font-size: .92rem; font-weight: 500; letter-spacing: 0; text-align: left; text-transform: none; vertical-align: top; }
.ind .ind-table tbody tr:last-child td, .ind .ind-table tbody tr:last-child th { border-bottom: 0; }
.ind .ind-table tfoot td { border-top: 2px solid var(--ind-deep); background: var(--ind-paper); font-weight: 800; }
.ind .ind-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ind .ind-table td.num { white-space: nowrap; }
/* tabela equivalente ao gráfico: mais enxuta, para caber nos cartões de meia largura */
.ind .ind-table-data th { padding: .45rem .4rem; font-size: .72rem; }
.ind .ind-table-data td, .ind .ind-table-data tbody th { padding: .45rem .4rem; font-size: .86rem; }
.ind-data { margin-top: .8rem; }
.ind-data summary { cursor: pointer; color: var(--ind-green); font-size: .9rem; font-weight: 800; }
.ind-data[open] summary { margin-bottom: .6rem; }
.ind-exc { display: inline-grid; justify-items: end; line-height: 1.2; }
.ind-exc small { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.ind-exc.is-pos { color: #0b5a2b; }
.ind-exc.is-neg { color: #9a2d1b; }
.ind-exc.is-zero { color: var(--ind-muted); }

/* ---- situação das fichas e consolidado ---- */
.ind ul.ind-sitgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: .7rem; margin: 0; padding: 0; list-style: none; }
.ind ul.ind-sitgrid > li { margin: 0; padding: .8rem .95rem; border: 1px solid var(--ind-line); border-left: 5px solid #cfe0d4; border-radius: 14px; background: #fff; }
.ind-sitgrid b { display: block; color: var(--ind-ink); font-family: var(--ind-font-display); font-size: 1.6rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ind-sitgrid strong { display: block; margin-top: .1rem; color: var(--ind-ink); font-size: .95rem; }
.ind-sitgrid small { display: block; margin-top: .25rem; color: var(--ind-muted); font-size: .85rem; line-height: 1.35; }
.ind ul.ind-sitgrid > li.is-bad { border-left-color: #c0392b; }
.ind ul.ind-sitgrid > li.is-warn { border-left-color: #f2b01e; }
.ind ul.ind-sitgrid > li.is-ok { border-left-color: var(--ind-focus); }
.ind ul.ind-sitgrid > li.is-info { border-left-color: var(--ind-mint); }
.ind-consol { display: grid; gap: 1rem; }
.ind-consol-head { display: grid; gap: .15rem; padding: 1rem 1.15rem; border-left: 5px solid var(--ind-focus); border-radius: 14px; background: #eef8f1; }
.ind-consol-head.is-bad { border-left-color: #c0392b; background: #fdf0ed; }
.ind-consol-head span { color: var(--ind-ink); font-size: .95rem; font-weight: 800; }
.ind-consol-head strong { color: #0b5a2b; font-family: var(--ind-font-display); font-size: 2rem; font-weight: 800; line-height: 1.1; }
.ind-consol-head.is-bad strong { color: #b3261e; }
.ind-consol-head small { color: var(--ind-muted); font-size: .9rem; line-height: 1.4; }
.ind-consol-bar { display: flex; height: 22px; overflow: hidden; border-radius: 999px; background: #e7efe9; }
.ind-consol-bar span { display: block; height: 100%; }
.ind-consol-bar .is-cov { background: var(--ind-focus); }
.ind-consol-bar .is-gap { background: #c0392b; }
.ind-consol-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: .7rem 1.1rem; margin: 0; }
.ind-consol-list > div { margin: 0; }
.ind-consol-list dt { display: flex; align-items: center; gap: .45rem; color: var(--ind-ink); font-size: .92rem; font-weight: 800; }
.ind-consol-list dt i { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 3px; }
.ind-consol-list dt i.is-need { background: #c0392b; }
.ind-consol-list dt i.is-cov { background: var(--ind-focus); }
.ind-consol-list dd { margin: .15rem 0 0; font-size: 1.1rem; font-weight: 800; }
.ind-consol-list dd small { display: block; color: var(--ind-muted); font-size: .85rem; font-weight: 600; }

/* ---- Portal e transparência: audiência e publicações ---- */
.ind-periodbar.is-static { padding-block: .7rem; }
.ind-periodbar-note { color: var(--ind-ink); font-size: .95rem; }
.ind-range { display: inline-flex; gap: .3rem; margin: 0 0 .6rem; padding: .25rem; border: 1px solid var(--ind-line); border-radius: 999px; background: var(--ind-paper); }
.ind .ind-range a { display: inline-flex; align-items: center; min-height: 38px; padding: .2rem .9rem; border-radius: 999px; color: var(--ind-ink) !important; font-size: .9rem; font-weight: 800; text-decoration: none !important; }
.ind .ind-range a.is-active { background: var(--ind-deep); color: #fff !important; }
.ind .ind-facts.ind-facts-visits { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: .75rem; margin: .3rem 0 1rem; }
.ind .ind-facts.ind-facts-visits > div { display: block; padding: .75rem .9rem; border: 1px solid #e3ede6; border-radius: 12px; background: #f7fbf8; }
.ind .ind-facts.ind-facts-visits dd { margin-top: .2rem; font-size: 1.35rem; line-height: 1.2; text-align: left; font-variant-numeric: tabular-nums; }
.ind-visits { padding: .3rem 0 0; }
.saae-visits-chart { display: block; width: 100%; height: 170px; }
.saae-visits-chart rect { fill: var(--ind-green); }
.saae-visits-chart rect:hover { fill: var(--ind-deep); }
.saae-visits-axis { fill: #4b6253; font-size: 11px; }
.ind-rank-foot { margin: .6rem 0 0; color: var(--ind-muted); font-size: .875rem; }
.ind-stack { display: grid; align-content: start; gap: 1.25rem; min-width: 0; }
.ind-secgroup + .ind-secgroup { margin-top: .2rem; }
.ind .ind-secgroup-title { margin: 0 0 .6rem; color: var(--ind-muted); font-family: var(--ind-font-display); font-size: .875rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.ind ul.ind-secgrid.has-1 { grid-template-columns: minmax(0, 1fr); }
@container indmain (min-width: 700px) { .ind ul.ind-secgrid.has-1 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- saldo inicial (Caixa) ---- */
.ind-saldo-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .7rem; margin: 0; }
.ind-saldo-form .ind-field { flex: 1 1 220px; }
.ind-saldo-form .ind-field input { width: 100%; }

/* ---- observações ---- */
.ind-notes { padding: 1.05rem 1.25rem; border-left: 5px solid var(--ind-primary); border-radius: 0 16px 16px 0; background: var(--ind-paper); }
.ind .ind-notes h4 { margin: 0 0 .5rem; color: var(--ind-ink); font-size: .95rem; font-weight: 800; }
.ind .ind-notes ul { display: grid; gap: .45rem; margin: 0; padding-left: 1.1rem; color: var(--ind-muted); font-size: .9rem; line-height: 1.55; }

/* ---- telas estreitas ---- */
@container indmain (max-width: 880px) { .ind-grid-2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .ind-head { flex-direction: column; align-items: flex-start; gap: .8rem; }
  .ind-head-actions { width: 100%; }
  .ind-head-actions .ind-btn { width: 100%; }
  .ind-periodbar-fields { width: 100%; }
  .ind-periodbar-fields > .ind-field { flex: 1 1 100%; }
  .ind-periodbar .ind-field select { width: 100%; }
  .ind-stepbox { display: flex; width: 100%; }
  .ind-stepbox .ind-field { flex: 1 1 auto; }
  .ind-periodbar .ind-btn { width: 100%; }
  .ind-updated { margin-left: 0; flex: 1 1 100%; }
  .ind-card { padding: 1.05rem 1rem 1.15rem; border-radius: 18px; }
  .ind-card-head { flex-direction: column; }
  .ind-result-big { font-size: 1.7rem; }
  .ind .ind-table-resp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .ind .ind-table-resp, .ind .ind-table-resp tbody, .ind .ind-table-resp tfoot, .ind .ind-table-resp tr, .ind .ind-table-resp td { display: block; width: 100%; }
  .ind .ind-table-resp tr { padding: .55rem 0; border-bottom: 2px solid var(--ind-line); }
  .ind .ind-table-resp tbody tr:last-child { border-bottom: 0; }
  .ind .ind-table-resp td { display: grid; grid-template-columns: minmax(104px, .45fr) minmax(0, 1fr); gap: .7rem; padding: .3rem .1rem; border: 0; text-align: left; white-space: normal; }
  .ind .ind-table-resp td::before { content: attr(data-label); color: var(--ind-muted); font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
  .ind .ind-table-resp td.num { text-align: left; }
  .ind .ind-table-resp tfoot td { border-top: 0; }
  .ind-exc { justify-items: start; }
}
@media (prefers-reduced-motion: reduce) { .ind a.ind-sec { transition: none; } .ind a.ind-sec:hover { transform: none; } }

/* ---- impressão: só o conteúdo dos indicadores ---- */
@media print {
  .ind-secchips, .ind-periodbar, .ind-head-actions, .ind-btn, .ind-kpi-link, .ind-saldo-form { display: none !important; }
  .ind > * + * { margin-top: 10px; }
  .ind-card, .ind-kpi, .ind-alert, .ind-notes { break-inside: avoid; box-shadow: none !important; }
  .ind-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ind-chart-svg { min-width: 0; }
  .ind-data > summary { display: none; }
  .ind-data:not([open]) > .ind-table-wrap { display: none; }
  .ind a { color: inherit !important; text-decoration: none !important; }
}

/* ---- respiro entre os blocos (16/10/2026): a regra ".ind > * + *" perdia para ".ind-card { margin: 0 }", ".ind-alert { margin: 0 }" e
   ".ind-periodbar { margin: 0 }" (mesma força, declaradas depois) e não valia dentro de .ind-body: cartões, tabelas e demonstrativos
   ficavam colados. Aqui, com mais força e no fim do arquivo. ---- */
.saae-app .ind > * + *, .saae-app .ind .ind-body > * + * { margin-top: 1.5rem; }
.saae-app .ind-card > * + :is(.ind-table-wrap, .ind-data, .ind-facts, .ind-alert, .ind-sitgrid, .ind-consol, .ind-donut, .ind-hbars, .ind-rank, .ind-saldo-form) { margin-top: 1rem; }
@media (max-width: 720px) { .saae-app .ind > * + *, .saae-app .ind .ind-body > * + * { margin-top: 1.15rem; } }

/* ---- tela Relatórios (16/10/2026, modelo da Prefeitura): escolha das seções, encerramento, listas de documentos e planilhas ---- */
.ind-report-form { margin: 0; }
.ind-report-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.ind-report-form legend { margin: 0 0 .6rem; padding: 0; color: var(--ind-ink); font-size: .95rem; font-weight: 800; }
.ind-check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: .5rem; } /* as seis seções em 3 + 3 no notebook */
.ind-check { display: flex; align-items: center; gap: .6rem; min-height: 48px; margin: 0; padding: .4rem .85rem; border: 2px solid var(--ind-line); border-radius: 13px; background: #fff; color: var(--ind-ink); font-size: .95rem; font-weight: 700; cursor: pointer; }
.ind-check:has(input:checked) { border-color: var(--ind-green); background: #f1faf3; }
.ind-check:has(input:focus-visible) { outline: 3px solid var(--ind-focus); outline-offset: 2px; }
.ind-check input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--ind-green); }
.ind-check svg { width: 18px; height: 18px; margin-right: .35rem; color: var(--ind-green); vertical-align: -3px; }
.ind-report-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 1rem; }
.ind-report-actions .ind-hint { margin: 0; max-width: 56ch; }
.ind ul.ind-report-list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.ind ul.ind-report-list > li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: .9rem; margin: 0; padding: .75rem .9rem; border: 1px solid var(--ind-line); border-radius: 14px; background: #fff; }
.ind-report-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px 13px 13px 5px; background: var(--ind-tint); color: var(--ind-primary); }
.ind-report-ico svg { width: 22px; height: 22px; }
.ind-report-list strong { display: block; color: var(--ind-ink); font-size: .98rem; line-height: 1.3; }
.ind-report-list small { display: block; margin-top: .1rem; color: var(--ind-muted); font-size: .875rem; line-height: 1.45; }
.ind-enc-form .ind-enc-grid { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem; margin: 0 0 .8rem; }
.ind-enc-form .ind-field-grow { flex: 1 1 320px; }
.ind-enc-form .ind-field-grow input { width: 100%; }
.ind-enc-form .ind-field-wide { display: grid; margin: 0 0 .8rem; }
.ind-enc-form textarea { width: 100%; min-height: 96px; padding: .6rem .75rem; border: 1.5px solid #abc3b0; border-radius: 12px; background: #fff; color: var(--ind-ink); font: 500 .95rem/1.5 var(--ind-font-body); resize: vertical; }
.saae-app-hello > .ind-btn { flex: none; }
@media (max-width: 720px) {
  .ind ul.ind-report-list > li { grid-template-columns: 44px minmax(0, 1fr); }
  .ind ul.ind-report-list > li > .ind-btn { grid-column: 1 / -1; width: 100%; }
  .ind-report-actions .ind-btn, .saae-app-hello > .ind-btn { width: 100%; }
}
