/* DIAD — visual institucional IFRN (verde/branco), responsivo */
:root {
  --verde: #2f9e41;
  --verde-escuro: #1b5e20;
  --verde-claro: #e8f5e9;
  --fundo: #f4f6f4;
  --texto: #212a21;
  --borda: #d9e2da;
  --card: #ffffff;
  --raio: 10px;
  --sombra: 0 1px 4px rgba(20, 40, 20, .08);
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--fundo); color: var(--texto); min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }

/* ---------- topo ---------- */
.topo { background: var(--verde-escuro); color: #fff; box-shadow: var(--sombra); }
.topo-inner { max-width: 1200px; margin: 0 auto; padding: .7rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.marca { color: #fff; text-decoration: none; display: flex; flex-direction: column; line-height: 1.15; }
.marca-logo { font-size: 1.4rem; font-weight: 800; letter-spacing: .06em; }
.marca-sub { font-size: .72rem; opacity: .85; }
.usuario { display: flex; align-items: center; gap: .8rem; }
.usuario-info { text-align: right; line-height: 1.2; display: flex; flex-direction: column; }
.usuario-info small { opacity: .8; font-size: .72rem; }

.rodape { text-align: center; font-size: .75rem; color: #7a887b; padding: 1rem; }

/* abas principais de navegação (Relatórios / Enviar) */
.nav-abas { background: var(--verde); display: flex; gap: .2rem; padding: 0 max(1rem, calc((100% - 1200px) / 2 + 1rem)); }
.nav-abas a { color: #eaf6ec; text-decoration: none; padding: .55rem 1.1rem; font-size: .88rem; border-bottom: 3px solid transparent; }
.nav-abas a:hover { background: rgba(255, 255, 255, .12); }
.nav-abas a.ativa { border-bottom-color: #fff; font-weight: 700; color: #fff; }

.container-estreito { max-width: 720px; }
.texto-apoio { color: #61705f; font-size: .9rem; }
.texto-apoio a { color: var(--verde-escuro); }
.lista-dicas { padding-left: 1.2rem; }
.lista-dicas li { margin: .3rem 0; }

/* ---------- componentes ---------- */
.container { max-width: 1200px; margin: 0 auto; padding: 1rem; }
.carregando { text-align: center; padding: 3rem 1rem; color: #7a887b; }
.vazio { color: #7a887b; text-align: center; padding: 2rem; }
.erro-msg { color: #b71c1c; background: #fdecea; border: 1px solid #f5c6c0; border-radius: var(--raio); padding: 1rem; }

.btn { display: inline-block; padding: .5rem 1rem; border-radius: 6px; border: 0; background: var(--verde); color: #fff; font-size: .9rem; cursor: pointer; text-decoration: none; text-align: center; }
.btn:hover { filter: brightness(1.08); }
.btn-borda { background: transparent; color: inherit; border: 1px solid currentColor; opacity: .9; }
.btn-mini { padding: .25rem .6rem; font-size: .78rem; }
.btn-perigo { color: #b71c1c; border-color: #b71c1c; background: transparent; }
.btn-suap { background: var(--verde); font-size: 1.05rem; padding: .8rem 2rem; margin: 1rem 0 .5rem; }
.btn[disabled] { opacity: .4; cursor: default; }

.aviso { position: fixed; right: 1rem; bottom: 1rem; z-index: 50; background: #b71c1c; color: #fff; padding: .8rem 1.2rem; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.25); max-width: min(420px, 90vw); transition: opacity .5s; }
.aviso-ok { background: var(--verde-escuro); }
.aviso.some { opacity: 0; }

.tag { display: inline-block; font-size: .68rem; padding: .1rem .5rem; border-radius: 99px; background: #eceff1; color: #546e7a; }
.tag-mec { background: var(--verde-claro); color: var(--verde-escuro); font-weight: 600; }

/* ---------- login ---------- */
.login-card { max-width: 420px; margin: 8vh auto; background: var(--card); border-radius: var(--raio); box-shadow: var(--sombra); padding: 2.5rem 2rem; text-align: center; }
.login-card h1 { color: var(--verde-escuro); letter-spacing: .08em; margin: 0 0 .5rem; }
.login-card small { color: #7a887b; display: block; }
.login-form { display: flex; flex-direction: column; gap: .6rem; margin: 1.2rem 0 .8rem; }
.login-form input { padding: .65rem .8rem; border: 1px solid var(--borda); border-radius: 6px; font-size: 1rem; }
.login-form .btn-suap { margin: .4rem 0 0; }

/* ---------- upload ---------- */
.upload-zona { border: 2px dashed var(--verde); border-radius: var(--raio); background: var(--verde-claro); padding: 1.6rem; text-align: center; cursor: pointer; margin-bottom: 1.5rem; position: relative; }
.upload-zona.arrastando { background: #d3ecd6; }
.upload-icone { font-size: 1.6rem; color: var(--verde-escuro); }
.upload-progresso { margin-top: .8rem; }
.upload-barra { height: 6px; background: var(--verde); border-radius: 3px; width: 0; transition: width .2s; margin-bottom: .3rem; }

/* ---------- tabelas ---------- */
.tabela-scroll { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; background: var(--card); font-size: .87rem; }
.tabela th, .tabela td { padding: .55rem .7rem; border-bottom: 1px solid var(--borda); text-align: left; white-space: nowrap; }
.tabela th { background: var(--verde-claro); color: var(--verde-escuro); position: sticky; top: 0; }
.tabela th.ordenavel { cursor: pointer; user-select: none; }
.tabela td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela tfoot td { font-weight: 700; background: #f1f6f1; }
.tabela-compacta th, .tabela-compacta td { padding: .35rem .55rem; font-size: .8rem; }
.linha-rel { cursor: pointer; }
.linha-rel:hover { background: #f1f6f1; }
.paginacao { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: .8rem; font-size: .85rem; }

/* ---------- painel ---------- */
.painel-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.painel-cab h1 { margin: 0; font-size: 1.35rem; color: var(--verde-escuro); }
.painel-cab small { color: #61705f; }

.card { background: var(--card); border-radius: var(--raio); box-shadow: var(--sombra); padding: 1rem; margin-bottom: 1rem; }
.card h3 { margin: 0 0 .6rem; font-size: .95rem; color: var(--verde-escuro); }
.card-cab { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.card-cab h3 { margin: 0; }
.card-acoes { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.card-acoes input[type="search"] { padding: .35rem .6rem; border: 1px solid var(--borda); border-radius: 6px; }

/* filtros (segmentadores) */
.filtros { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; align-items: center; }
.ms { position: relative; }
.ms-botao { padding: .45rem .9rem; border: 1px solid var(--borda); background: var(--card); border-radius: 99px; cursor: pointer; font-size: .85rem; }
.ms-botao.ativo { border-color: var(--verde); background: var(--verde-claro); color: var(--verde-escuro); font-weight: 600; }
.ms-lista { position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; background: var(--card); border: 1px solid var(--borda); border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.15); max-height: 280px; overflow-y: auto; min-width: 230px; padding: .4rem; }
.ms-item { display: flex; gap: .5rem; align-items: center; padding: .3rem .5rem; border-radius: 5px; cursor: pointer; font-size: .85rem; }
.ms-item:hover { background: var(--verde-claro); }

/* KPIs */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.kpi { background: var(--card); border-radius: var(--raio); box-shadow: var(--sombra); padding: .9rem 1rem; display: flex; flex-direction: column; gap: .2rem; border-top: 3px solid var(--borda); }
.kpi small { color: #61705f; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
.kpi strong { font-size: 1.15rem; color: var(--texto); font-variant-numeric: tabular-nums; }
.kpi-verde { border-top-color: var(--verde); }
.kpi-verde strong { color: var(--verde-escuro); }
.kpi-claro { border-top-color: #90a4ae; }

/* gauges e gráfico */
.gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.gauge-card h3 { text-align: center; font-size: .85rem; }
.gauge-box { position: relative; height: 130px; }
.grafico-box { position: relative; height: 320px; }

/* abas */
.abas { display: flex; gap: .3rem; margin-bottom: -1px; flex-wrap: wrap; }
.aba { padding: .55rem 1.1rem; border: 1px solid var(--borda); border-bottom: 0; background: #eef2ee; border-radius: 8px 8px 0 0; cursor: pointer; font-size: .88rem; color: #5b695c; }
.aba.ativa { background: var(--card); color: var(--verde-escuro); font-weight: 700; }

/* modo genérico */
.grade-tabelas { display: grid; grid-template-columns: 270px 1fr; gap: 1rem; align-items: start; }
.lista-tabelas { display: flex; flex-direction: column; gap: .4rem; }
.item-tabela { text-align: left; padding: .6rem .8rem; border: 1px solid var(--borda); border-radius: 8px; background: var(--card); cursor: pointer; display: flex; flex-direction: column; gap: .15rem; }
.item-tabela.ativa { border-color: var(--verde); background: var(--verde-claro); }
.item-tabela small { color: #7a887b; font-size: .72rem; }
.medida pre { background: #f4f6f4; border-radius: 6px; padding: .7rem; overflow-x: auto; font-size: .8rem; }
.lista-visuais { margin: 0; padding-left: 1.2rem; font-size: .88rem; }
.lista-visuais li { margin: .25rem 0; }
.lista-visuais code { background: var(--verde-claro); color: var(--verde-escuro); padding: .05rem .4rem; border-radius: 4px; font-size: .78rem; }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ---------- responsivo ---------- */
@media (max-width: 760px) {
  .marca-sub { display: none; }
  .grade-tabelas, .grade-2 { grid-template-columns: 1fr; }
  .usuario-info small { display: none; }
  .painel-cab { flex-direction: column; }
  .grafico-box { height: 260px; }
}