@import url('/css/fontes.css');

:root {
  --sgi-fonte: Inter, "Segoe UI", system-ui, sans-serif;
  --sgi-azul: #2472d6;
  --sgi-azul-fundo: #1c5fc0;
  --sgi-azul-claro: #eaf3fd;
  --sgi-azul-texto: #1c5fc0;
  --sgi-tinta: #111c2d;
  --sgi-texto: #33415c;
  --sgi-fraco: #5a6a85;
  --sgi-linha: #e8eef7;
  --sgi-chao: #f3f7fc;
  --sgi-sombra: 0 2px 4px -1px rgba(175, 182, 201, .28);
  --sgi-r-card: 12px;
  --sgi-r-campo: 8px;
  --sgi-verde: #15763a;
  --sgi-vermelho: #b03a2e;
}

[hidden] { display: none !important; }

body {
  font-family: var(--sgi-fonte);
  background: var(--sgi-chao);
  font-size: 14px;
  line-height: 1.5;
}
h1, h2, h3, h4, h5 {
  font-family: var(--sgi-fonte);
  color: var(--sgi-tinta);
  letter-spacing: -0.01em;
}

html:not(.pele-compacta) h1 { font-size: 20px; font-weight: 600; }
html:not(.pele-compacta) h2 { font-size: 18px; font-weight: 600; }
html:not(.pele-compacta) h3 { font-size: 16px; font-weight: 600; }
html:not(.pele-compacta) table { font-size: 14px; }
html:not(.pele-compacta) th {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .4px; color: var(--sgi-fraco);
}
html:not(.pele-compacta) code, html:not(.pele-compacta) pre, .mono {
  font-family: ui-monospace, Consolas, monospace; font-size: 13px;
}

html:not(.pele-compacta) small { font-size: 12px; }

html:not(.pele-compacta) .card .rotulo,
html:not(.pele-compacta) .campo label,
html:not(.pele-compacta) th {
  font-family: var(--sgi-fonte);
  font-size: 12px; font-weight: 600; letter-spacing: .4px;
  text-transform: uppercase; color: var(--sgi-fraco);
}

html:not(.pele-compacta) .card .valor {
  font-family: var(--sgi-fonte);
  font-size: 22px; font-weight: 700; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
html:not(.pele-compacta) .painel h2 { font-size: 18px; font-weight: 600; }
html:not(.pele-compacta) .painel .sub { font-size: 13px; color: var(--sgi-fraco); }

html:not(.pele-compacta) table, html:not(.pele-compacta) td { font-size: 13px; }
html:not(.pele-compacta) .badge { font-size: 12px; font-weight: 600; }

html:not(.pele-compacta) #quem { font-size: 12px; }

html:not(.pele-compacta) .kpi b,
html:not(.pele-compacta) .card .val {
  font-family: var(--sgi-fonte); font-size: 22px; font-weight: 700;
  letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
}
html:not(.pele-compacta) .kpi .n { font-size: 22px; }

html:not(.pele-compacta) .kpi span,
html:not(.pele-compacta) .card .rot,
html:not(.pele-compacta) .field label,
html:not(.pele-compacta) .loc {
  font-family: var(--sgi-fonte); font-size: 12px; font-weight: 600;
  letter-spacing: .4px; color: var(--sgi-fraco);
}

html:not(.pele-compacta) .vazio,
html:not(.pele-compacta) .nota,
html:not(.pele-compacta) .erro,
html:not(.pele-compacta) .card .pe,
html:not(.pele-compacta) .selo,
html:not(.pele-compacta) .chip,
html:not(.pele-compacta) header .sub,
html:not(.pele-compacta) header h1 small { font-size: 12px; }

html:not(.pele-compacta) .abas button,
html:not(.pele-compacta) #segH button,
html:not(.pele-compacta) nav button { font-size: 13px; }

html:not(.pele-compacta) .num { font-size: 14px; }
html:not(.pele-compacta) .decisoes h2 { font-size: 16px; }
html:not(.pele-compacta) .decisoes a,
html:not(.pele-compacta) .tabm { font-size: 13px; }
html:not(.pele-compacta) .decisoes .mod,
html:not(.pele-compacta) .grupo h3 a { font-size: 12px; }

.c, .kpi, .dcard, .cal, .tl, .card, .painel {
  border-radius: var(--sgi-r-card);
  border: 0;
  background: #fff;
  box-shadow: var(--sgi-sombra);
}

.stat { border-radius: var(--sgi-r-campo); background: #f7fafd; }

html:not(.pele-compacta) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html:not(.pele-compacta) select,
html:not(.pele-compacta) textarea,
html:not(.pele-compacta) button { border-radius: var(--sgi-r-campo); }
#aviso, #erro, .aviso-priv, .cartao, .rolagem, .rol, .dlg, .bom {
  border-radius: var(--sgi-r-card);
}

.kpi { padding: 20px; }
.kpi .n {
  font-size: 22px; font-weight: 700; color: var(--sgi-tinta); letter-spacing: -0.01em;
}
.kpi .l {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .4px; color: var(--sgi-fraco);
}

header { border-bottom: 1px solid var(--sgi-linha); box-shadow: none; }
header h1 { font-size: 20px; font-weight: 600; }

header h1, header h2, header h3,
.topo h1, .topo h2, .topo h3,
.capa h1, .capa h2, .capa h3,
.contato h1, .contato h2, .contato h3 { color: inherit; }

html:not(.pele-compacta) .btn:not([class*="btn-"]):not(.ghost) {
  border-radius: 999px;
  background: var(--sgi-azul);
  color: #fff;
  box-shadow: none;
  padding: 9px 24px;
  font-size: 14px;
  font-weight: 500;
  transition: background-color .15s;
}
html:not(.pele-compacta) .btn:not([class*="btn-"]):not(.ghost):hover {
  background: var(--sgi-azul-fundo);
}

html:not(.pele-compacta) .btn.ghost {
  border-radius: 999px; background: var(--sgi-azul-claro); color: var(--sgi-azul-texto);
  box-shadow: none; font-size: 14px; font-weight: 500;
}
nav button { border-radius: 999px; }
html:not(.pele-compacta) .chip, html:not(.pele-compacta) .tag {
  border-radius: 999px; font-size: 12px; font-weight: 600;
}

html:not(.pele-compacta) button.principal {
  border-radius: 999px; background: var(--sgi-azul); color: #fff;
  box-shadow: none; padding: 9px 24px; font-size: 14px; font-weight: 500;
  transition: background-color .15s;
}
html:not(.pele-compacta) button.principal:hover { background: var(--sgi-azul-fundo); }

html:not(.pele-compacta) button.suave:not(.perigo):not(.verde) {
  border-radius: 999px; background: var(--sgi-azul-claro); color: var(--sgi-azul-texto);
  border-color: transparent; font-size: 13px; font-weight: 500;
}
html:not(.pele-compacta) button.suave.perigo,
html:not(.pele-compacta) button.suave.verde { border-radius: 999px; font-size: 13px; }

nav#nav, div#abas, #nav, #abas {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0;
  overflow: visible; padding: 4px 22px 0; background: transparent; border: 0;
}

div#abas { gap: 0 !important; }
#nav a[data-view], #abas .tabm {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 11px 5px; margin: 0;
  border: 0; border-bottom: 2px solid #e6ebf2; border-radius: 0;
  background: transparent; box-shadow: none;
  color: var(--sgi-fraco); text-decoration: none;
  font-family: var(--sgi-fonte); font-size: 10.5px; font-weight: 500; line-height: 1.3;
  text-transform: none; letter-spacing: 0; white-space: nowrap; cursor: pointer;
  transition: color .13s, border-color .13s;
}
#nav a[data-view]:hover, #abas .tabm:hover {
  color: var(--sgi-tinta); border-bottom-color: #c9d2df; background: transparent;
}
#nav a[data-view].ativo, #nav a[data-view].on, #nav a[data-view].active,
#abas .tabm.on, #abas .tabm.ativo, #abas .tabm.active {
  color: var(--sgi-tinta); border-bottom-color: var(--sgi-tinta); font-weight: 600;
  background: transparent; box-shadow: none;
}
#nav a[data-view] svg, #abas .tabm svg { width: 12px; height: 12px; opacity: .7; flex: none; }
#nav a[data-view].ativo svg, #nav a[data-view].on svg, #nav a[data-view].active svg,
#abas .tabm.on svg { opacity: 1; }

#nav a[data-view]:focus-visible, #abas .tabm:focus-visible { outline-offset: -2px; }

input:not([type=checkbox]):not([type=radio]), select, textarea {
  border-radius: var(--sgi-r-campo);
  font-family: var(--sgi-fonte);
}
html:not(.pele-compacta) input:not([type=checkbox]):not([type=radio]),
html:not(.pele-compacta) select,
html:not(.pele-compacta) textarea { font-size: 14px; }
.bar input, .bar select { border-color: var(--sgi-linha); }

dialog {
  border: 0;
  border-radius: var(--sgi-r-card);
  color: var(--sgi-texto);
  font-family: var(--sgi-fonte);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
  max-height: 85vh;
  overscroll-behavior: contain;
}
dialog::backdrop { background: rgba(8, 16, 30, .5); }
html:not(.pele-compacta) dialog { font-size: 14px; }
html:not(.pele-compacta) dialog h2 { font-size: 18px; font-weight: 600; }
html:not(.pele-compacta) dialog h3 { font-size: 16px; font-weight: 600; }

@media (max-width: 480px) {
  html:not(.pele-compacta) button,
  html:not(.pele-compacta) .btn,
  html:not(.pele-compacta) input[type="submit"],
  html:not(.pele-compacta) input[type="button"],
  html:not(.pele-compacta) a.botao, html:not(.pele-compacta) a.suave { min-height: 44px; }
  html:not(.pele-compacta) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  html:not(.pele-compacta) select,
  html:not(.pele-compacta) textarea { font-size: 16px; }
}

@media (prefers-reduced-motion: no-preference) {
  dialog[open] { animation: sgiModalEntra .16s ease-out; }
  @keyframes sgiModalEntra { from { opacity: 0; transform: translateY(6px); } }
}

@media print {
  nav, .filtros, .bar, .sgibar, #aviso, dialog { display: none !important; }
  body { padding-left: 0 !important; }

  body { background: #fff !important; color: #000 !important; }
  .c, .kpi, .dcard, .cal, .tl, .card, .painel {
    box-shadow: none !important; border: 1px solid #ccc !important;
    break-inside: avoid; page-break-inside: avoid;
  }
  header { position: static !important; box-shadow: none !important; }

  header, .topo, .capa, .contato, .hero {
    background: none !important; background-image: none !important;
  }
  header, .topo, .capa, .hero { border-bottom: 1px solid #ccc !important; }
  header *, .topo *, .capa *, .contato *, .hero *,
  header, .topo, .capa, .contato, .hero { color: #000 !important; }

  button, .btn, input[type="submit"], input[type="button"] {
    background: none !important; background-image: none !important; color: #000 !important;
    border: 1px solid #ccc !important; box-shadow: none !important;
  }

  tr, .lista tr { break-inside: avoid; page-break-inside: avoid; }
  thead { display: table-header-group; }
  a { text-decoration: none; color: #000; }
}

:focus-visible {
  outline: 2px solid var(--brand, var(--sgi-azul)); outline-offset: 2px;
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--brand, var(--sgi-azul)); outline-offset: 2px;
}