/* NasLan Nexus — interface do provedor. Tema claro/escuro via <html data-tema="..."> */

:root {
  --verde: #37A52E;
  --verde-forte: #2b8424;
  --verde-suave: #e8f5e6;

  --fundo: #f4f6f5;
  --superficie: #ffffff;
  --superficie-2: #f0f3f1;
  --borda: #e1e7e3;
  --borda-forte: #c9d3cd;
  --texto: #18211d;
  --texto-2: #56645d;
  --texto-3: #8a968f;

  --ok-fundo: #e4f4e1;   --ok-texto: #1f6b19;
  --alerta-fundo: #fcf1d8; --alerta-texto: #855400;
  --perigo-fundo: #fce6e6; --perigo-texto: #a32d2d;
  --neutro-fundo: #eceeed; --neutro-texto: #56645d;

  --lateral: #1e2723;
  --lateral-texto: #b9c7bf;
  --lateral-ativo: rgba(55, 165, 46, .18);

  --raio: 8px;
  --sombra: 0 1px 2px rgba(16, 24, 20, .06), 0 4px 16px rgba(16, 24, 20, .06);
  color-scheme: light;
}

[data-tema="escuro"] {
  --verde-suave: rgba(55, 165, 46, .16);
  --fundo: #111614;
  --superficie: #182019;
  --superficie-2: #1f2822;
  --borda: #2a352e;
  --borda-forte: #3a473f;
  --texto: #e5ece7;
  --texto-2: #a5b3ab;
  --texto-3: #74827a;
  --ok-fundo: rgba(55, 165, 46, .18);  --ok-texto: #7fd176;
  --alerta-fundo: rgba(230, 160, 20, .16); --alerta-texto: #f0c062;
  --perigo-fundo: rgba(226, 75, 74, .16); --perigo-texto: #f29a99;
  --neutro-fundo: #252f29; --neutro-texto: #a5b3ab;
  --lateral: #0c110e;
  --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .25);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  background: var(--fundo);
  color: var(--texto);
}
a { color: var(--verde-forte); text-decoration: none; }
[data-tema="escuro"] a { color: #6cc663; }
a:hover { text-decoration: underline; }
h1 { font-size: 20px; font-weight: 600; margin: 0; }
h2 { font-size: 15px; font-weight: 600; margin: 0 0 12px; }
.ic { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.mudo { color: var(--texto-2); }
.fraco { color: var(--texto-3); font-size: 12px; }

/* --- Estrutura ------------------------------------------------------------ */
.app { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }

.lateral {
  background: var(--lateral);
  color: var(--lateral-texto);
  padding: 16px 12px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column;
}
.lateral .marca { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; color: #fff; text-decoration: none; }
.marca img { height: 40px; }
.marca small { display: block; font-size: 11px; color: var(--lateral-texto); }
.nome-sistema { font-weight: 600; font-size: 15px; letter-spacing: .01em; }
.nome-sistema em { font-style: italic; font-weight: 500; }
.provedor { padding: 0 8px 14px; margin-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.provedor strong { display: block; color: #fff; font-size: 14px; }
/* Logo do provedor: fundo branco, pois a maioria dos logos é feita para fundo claro */
.provedor-logo { background: #fff; border-radius: var(--raio); padding: 8px 10px; display: flex; justify-content: center; }
.provedor-logo img { max-height: 52px; max-width: 100%; object-fit: contain; display: block; }
.menu a, .menu span {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; margin-bottom: 2px; border-radius: var(--raio);
  color: var(--lateral-texto); text-decoration: none;
}
.menu a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.menu a.ativo { background: var(--lateral-ativo); color: #fff; box-shadow: inset 3px 0 0 var(--verde); }
.menu span { opacity: .55; cursor: default; }

/* Grupos com submenu (ex.: Cadastro) */
.menu .grupo summary {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; margin-bottom: 2px; border-radius: var(--raio);
  color: var(--lateral-texto); cursor: pointer; list-style: none; user-select: none;
}
.menu .grupo summary::-webkit-details-marker { display: none; }
.menu .grupo summary:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.menu .grupo .seta { margin-left: auto; width: 16px; height: 16px; transition: transform .15s ease; }
.menu .grupo[open] .seta { transform: rotate(90deg); }
.menu .grupo[open] summary { color: #fff; }
.menu .submenu { margin: 0 0 4px 19px; padding-left: 8px; border-left: 1px solid rgba(255, 255, 255, .1); }
.menu .submenu a { padding: 7px 10px; font-size: 13.5px; }
.menu .fase { margin-left: auto; font-size: 10px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 10px; padding: 0 6px; }
.menu hr { border: 0; border-top: 1px solid rgba(255, 255, 255, .08); margin: 10px 0; }
.lateral .rodape { margin-top: auto; padding: 12px 8px 0; font-size: 11px; color: var(--texto-3); }

.topo {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 24px; background: var(--superficie);
  border-bottom: 1px solid var(--borda);
  position: sticky; top: 0; z-index: 20;
}
.busca { position: relative; flex: 1; max-width: 560px; }
.busca .ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--texto-3); }
.busca input { width: 100%; padding-left: 36px; }
.busca-resultados {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  box-shadow: var(--sombra); overflow: hidden;
}
.busca-resultados:empty { display: none; }
.busca-resultados a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; color: var(--texto); text-decoration: none; border-bottom: 1px solid var(--borda); }
.busca-resultados a:last-child { border-bottom: 0; }
.busca-resultados a:hover, .busca-resultados a:focus { background: var(--superficie-2); outline: none; }
.busca-resultados .vazio { padding: 12px; color: var(--texto-2); }
.topo .acoes { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.btn-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--raio);
  border: 0; background: transparent; color: var(--texto-2); cursor: pointer;
}
.btn-icone:hover { background: var(--superficie-2); color: var(--texto); }
.usuario { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: var(--raio); color: var(--texto); }
.usuario:hover { background: var(--superficie-2); text-decoration: none; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--verde-suave); color: var(--verde-forte);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 12px; flex-shrink: 0;
}
[data-tema="escuro"] .avatar { color: #7fd176; }
.avatar.grande { width: 48px; height: 48px; font-size: 16px; }
.menu-mobile { display: none; }

.conteudo { padding: 24px; max-width: 1280px; }
.cabecalho { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.cabecalho .acoes { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.voltar { display: inline-flex; align-items: center; gap: 4px; color: var(--texto-2); font-size: 13px; margin-bottom: 8px; }

/* --- Componentes ---------------------------------------------------------- */
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; padding: 18px; }
.grade { display: grid; gap: 14px; }
.grade-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade-2-1 { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }

.indicador { background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; padding: 16px 18px; }
.indicador .rotulo { display: flex; align-items: center; gap: 8px; color: var(--texto-2); font-size: 13px; }
.indicador .valor { font-size: 26px; font-weight: 600; margin-top: 6px; letter-spacing: -.01em; }
.indicador .valor.perigo { color: var(--perigo-texto); }

.etiqueta { display: inline-block; font-size: 12px; font-weight: 500; padding: 2px 9px; border-radius: 20px; white-space: nowrap; }
.etiqueta.ok { background: var(--ok-fundo); color: var(--ok-texto); }
.etiqueta.alerta { background: var(--alerta-fundo); color: var(--alerta-texto); }
.etiqueta.perigo { background: var(--perigo-fundo); color: var(--perigo-texto); }
.etiqueta.neutro { background: var(--neutro-fundo); color: var(--neutro-texto); }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 14px; border-radius: var(--raio);
  border: 1px solid var(--borda-forte); background: var(--superficie); color: var(--texto);
  font: inherit; font-weight: 500; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--superficie-2); text-decoration: none; }
.btn.primario { background: var(--verde); border-color: var(--verde); color: #fff; }
.btn.primario:hover { background: var(--verde-forte); border-color: var(--verde-forte); }

input, select, textarea {
  font: inherit; color: var(--texto);
  background: var(--superficie); border: 1px solid var(--borda-forte); border-radius: var(--raio);
  height: 36px; padding: 0 10px; width: 100%;
}
textarea { height: auto; padding: 8px 10px; resize: vertical; }
input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--verde); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(55, 165, 46, .18); }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.filtros input { max-width: 340px; }
.filtros select { width: auto; min-width: 160px; }

/* Tabela */
.tabela-caixa { background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; overflow-x: auto; }
table.tabela { width: 100%; border-collapse: collapse; }
.tabela th { text-align: left; font-weight: 500; font-size: 12px; color: var(--texto-3); padding: 10px 16px; border-bottom: 1px solid var(--borda); white-space: nowrap; }
.tabela td { padding: 11px 16px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr.clicavel { cursor: pointer; }
.tabela tbody tr.clicavel:hover { background: var(--superficie-2); }
.tabela .nome { display: flex; align-items: center; gap: 10px; color: var(--texto); font-weight: 500; }
.tabela .num { text-align: right; white-space: nowrap; }
.vazio-caixa { padding: 40px 16px; text-align: center; color: var(--texto-2); }
.paginacao { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-top: 1px solid var(--borda); font-size: 13px; color: var(--texto-2); }
.paginacao .btn { height: 30px; padding: 0 10px; }

/* Ficha */
.ficha-topo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ficha-topo .info { flex: 1; min-width: 220px; }
.ficha-topo h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ficha-topo .dados { display: flex; gap: 16px; flex-wrap: wrap; color: var(--texto-2); font-size: 13px; margin-top: 4px; }
.ficha-topo .dados span { display: inline-flex; align-items: center; gap: 5px; }
.ficha-topo .dados .ic { width: 15px; height: 15px; }
.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); margin: 18px 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.abas::-webkit-scrollbar { display: none; }
.abas a {
  padding: 10px 12px; color: var(--texto-2); border-bottom: 2px solid transparent;
  margin-bottom: -1px; white-space: nowrap; text-decoration: none;
}
.abas a:hover { color: var(--texto); }
.abas a.ativa { color: var(--texto); border-color: var(--verde); font-weight: 500; }
.lista-dados { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 8px 12px; margin: 0; }
.lista-dados dt { color: var(--texto-2); }
.lista-dados dd { margin: 0; }
.em-breve { text-align: center; padding: 48px 16px; color: var(--texto-2); }
.em-breve .ic { width: 36px; height: 36px; color: var(--texto-3); margin-bottom: 8px; }
.linha-tempo { list-style: none; margin: 0; padding: 0; }
.linha-tempo li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borda); }
.linha-tempo li:last-child { border-bottom: 0; }
.linha-tempo .quando { width: 130px; flex-shrink: 0; color: var(--texto-3); font-size: 12px; }

pre.codigo {
  margin: 0; padding: 14px; border-radius: var(--raio); overflow-x: auto;
  background: #10170f; color: #cfe8cb; font: 12.5px/1.6 ui-monospace, "Cascadia Code", Consolas, monospace;
  white-space: pre;
}
code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 12.5px; }

/* Gráfico de barras simples */
.barras { display: flex; align-items: flex-end; gap: 12px; height: 150px; padding-top: 10px; }
.barras .coluna { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
.barras .barra { width: 100%; max-width: 46px; background: var(--verde); border-radius: 5px 5px 2px 2px; opacity: .85; }
.barras .coluna:last-child .barra { opacity: 1; }
.barras .total { font-size: 12px; color: var(--texto-2); }
.barras .mes { font-size: 12px; color: var(--texto-3); }

/* Formulários */
.form-secao { margin-bottom: 18px; }
.form-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px 16px; }
.campo label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 5px; }
.campo.largo { grid-column: 1 / -1; }
.campo .ajuda { font-size: 12px; color: var(--texto-3); margin-top: 4px; }
.campo .erro, .erros-gerais { color: var(--perigo-texto); font-size: 12px; margin-top: 4px; }
.campo.com-erro input, .campo.com-erro select { border-color: var(--perigo-texto); }
.erros-gerais { background: var(--perigo-fundo); padding: 10px 12px; border-radius: var(--raio); margin-bottom: 14px; font-size: 13px; }
.form-acoes { display: flex; gap: 8px; justify-content: flex-end; position: sticky; bottom: 0; padding: 12px 0; background: var(--fundo); }

/* Mensagens */
.mensagens { margin-bottom: 16px; }
.mensagem { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--raio); background: var(--ok-fundo); color: var(--ok-texto); margin-bottom: 8px; }
.mensagem.error { background: var(--perigo-fundo); color: var(--perigo-texto); }

/* --- Login ---------------------------------------------------------------- */
body.pagina-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; background: #0d1310; }
.login-caixa { position: relative; z-index: 1; width: 100%; max-width: 380px; background: var(--superficie); border-radius: 14px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(55, 165, 46, .25); }
.login-caixa .logo { background: #1e2723; padding: 22px; text-align: center; }
.login-caixa .logo img { height: 58px; }
.login-caixa .logo .nome-sistema { color: #fff; font-size: 18px; margin-top: 6px; }
.login-caixa form { padding: 24px; display: grid; gap: 14px; }
.login-caixa .btn { width: 100%; justify-content: center; height: 40px; }
.login-caixa .provedor-nome { text-align: center; color: var(--texto-2); font-size: 13px; margin: -4px 0 0; }
.provedor-logo-login { display: flex; justify-content: center; background: #fff; border-radius: var(--raio); padding: 6px; }
.provedor-logo-login img { max-height: 90px; max-width: 100%; object-fit: contain; display: block; }

/* --- Responsivo ----------------------------------------------------------- */
@media (max-width: 1100px) {
  .grade-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade-2-1 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: fixed; left: 0; top: 0; z-index: 50; width: 260px; transform: translateX(-100%); transition: transform .2s ease; }
  body.menu-aberto .lateral { transform: none; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .45); }
  .menu-mobile { display: inline-flex; }
  .topo { padding: 10px 12px; }
  .conteudo { padding: 16px; }
  .grade-3 { grid-template-columns: minmax(0, 1fr); }
  .usuario .nome-usuario { display: none; }
}
@media (max-width: 520px) {
  .grade-4 { grid-template-columns: minmax(0, 1fr); }
  .lista-dados { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .lista-dados dd { margin-bottom: 8px; }
  .esconder-celular { display: none; }
}