/* =====================================================================
   Fiscalizador de Agencias Mercado Livre
   Folha de estilo unica. Sem CDN, sem framework: carrega rapido e
   funciona offline no servidor.
   ===================================================================== */

:root {
  color-scheme: light dark;

  --azul-900: #0b1b34;
  --azul-800: #12294a;
  --azul-700: #1b3a63;
  --azul-600: #24568f;
  --azul-500: #2f6fb8;
  --azul-100: #e8f0fa;

  --verde-600: #12805c;
  --verde-100: #e2f6ee;
  --ambar-600: #9a6300;
  --ambar-100: #fdf3dc;
  --vermelho-600: #b3261e;
  --vermelho-100: #fce8e6;
  --roxo-600: #6b3fa0;
  --roxo-100: #f1e9fb;

  --fundo: #f4f6fa;
  --superficie: #ffffff;
  --superficie-2: #fafbfd;
  --borda: #dfe4ec;
  --borda-forte: #c6cedb;
  --texto: #16202f;
  --texto-2: #5a6678;
  --texto-3: #8a94a4;

  --sombra-1: 0 1px 2px rgba(16, 30, 54, .06), 0 1px 3px rgba(16, 30, 54, .04);
  --sombra-2: 0 4px 12px rgba(16, 30, 54, .08);
  --sombra-3: 0 12px 32px rgba(16, 30, 54, .12);

  --raio: 10px;
  --raio-sm: 6px;
  --lateral: 248px;

  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0e1420;
    --superficie: #151d2c;
    --superficie-2: #1a2333;
    --borda: #26314528;
    --borda: #273145;
    --borda-forte: #35425a;
    --texto: #e6ebf3;
    --texto-2: #9fabbf;
    --texto-3: #74819a;
    --azul-100: #17293f;
    --verde-100: #10291f;
    --ambar-100: #2b2110;
    --vermelho-100: #2d1614;
    --roxo-100: #221a33;
    --sombra-1: 0 1px 2px rgba(0, 0, 0, .3);
    --sombra-2: 0 4px 12px rgba(0, 0, 0, .35);
    --sombra-3: 0 12px 32px rgba(0, 0, 0, .45);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--azul-500); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0 0 .5rem; line-height: 1.25; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }

/* ---------------- Layout ---------------- */

.app { display: flex; min-height: 100vh; }

.lateral {
  width: var(--lateral);
  flex: 0 0 var(--lateral);
  background: var(--azul-900);
  color: #cfdaea;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.lateral__marca {
  padding: 1.1rem 1.15rem;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.lateral__marca strong { color: #fff; display: block; font-size: .95rem; letter-spacing: -.01em; }
.lateral__marca span { color: #7e93b0; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }

.lateral__menu { padding: .6rem .6rem 1rem; flex: 1; }
.lateral__grupo {
  color: #64789a;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .9rem .6rem .35rem;
  font-weight: 600;
}
.lateral a.item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .65rem;
  border-radius: var(--raio-sm);
  color: #cfdaea;
  font-size: .875rem;
  margin-bottom: 1px;
  transition: background .12s, color .12s;
}
.lateral a.item:hover { background: rgba(255, 255, 255, .07); color: #fff; text-decoration: none; }
.lateral a.item.ativo { background: var(--azul-600); color: #fff; font-weight: 550; }
.lateral a.item .ico { width: 16px; text-align: center; opacity: .85; flex: 0 0 16px; }
.lateral a.item .contador {
  margin-left: auto;
  background: rgba(255, 255, 255, .14);
  border-radius: 20px;
  padding: 0 .45rem;
  font-size: .7rem;
  font-weight: 600;
}
.lateral a.item.ativo .contador { background: rgba(255, 255, 255, .25); }

.lateral__rodape {
  padding: .8rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: .78rem;
  color: #7e93b0;
}
.lateral__rodape a { color: #a9bcd6; }

.conteudo { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topo {
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
  padding: .75rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 20;
}
.topo h1 { margin: 0; font-size: 1.05rem; }
.topo__dir { margin-left: auto; display: flex; align-items: center; gap: .75rem; }

.principal { padding: 1.5rem; flex: 1; max-width: 1600px; width: 100%; }

/* ---------------- Cartoes ---------------- */

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-1);
}
.cartao__cabecalho {
  padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--borda);
  display: flex;
  align-items: center;
  gap: .75rem;
}
.cartao__cabecalho h2, .cartao__cabecalho h3 { margin: 0; font-size: .95rem; }
.cartao__cabecalho .dir { margin-left: auto; display: flex; gap: .5rem; align-items: center; }
.cartao__corpo { padding: 1.1rem; }
.cartao__corpo--tabela { padding: 0; }

.grade { display: grid; gap: 1rem; }
/* Grade que se ajusta a qualquer quantidade de cartoes sem deixar
   um cartao solitario na ultima linha. */
.grade--metricas { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.grade--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade--2-1 { grid-template-columns: 2fr 1fr; }

@media (max-width: 1200px) {
  .grade--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade--2-1, .grade--3 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .grade--4, .grade--2 { grid-template-columns: 1fr; }
  .lateral { position: fixed; transform: translateX(-100%); z-index: 100; transition: transform .2s; }
  .lateral.aberta { transform: none; }
  .principal { padding: 1rem; }
  .topo { padding: .65rem 1rem; }
}

/* ---------------- Indicadores ---------------- */

.indicador {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: .95rem 1.05rem;
  box-shadow: var(--sombra-1);
  position: relative;
  overflow: hidden;
}
.indicador__rotulo {
  font-size: .74rem;
  color: var(--texto-2);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
  margin-bottom: .35rem;
}
.indicador__valor {
  font-size: 1.75rem;
  font-weight: 680;
  letter-spacing: -.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.indicador__nota { font-size: .76rem; color: var(--texto-3); margin-top: .25rem; }
.indicador--destaque { border-color: var(--azul-500); }
.indicador--destaque .indicador__valor { color: var(--azul-500); }
.indicador--alerta { border-color: #e0b062; }
.indicador--alerta .indicador__valor { color: var(--ambar-600); }
.indicador--ok .indicador__valor { color: var(--verde-600); }
.indicador--erro { border-color: #e3a09b; }
.indicador--erro .indicador__valor { color: var(--vermelho-600); }

/* ---------------- Selos ---------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .16rem .5rem;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.5;
}
.badge--nova { background: var(--azul-100); color: var(--azul-600); }
.badge--ativa { background: var(--verde-100); color: var(--verde-600); }
.badge--alerta { background: var(--ambar-100); color: var(--ambar-600); }
.badge--inativa { background: var(--vermelho-100); color: var(--vermelho-600); }
.badge--reapareceu { background: var(--roxo-100); color: var(--roxo-600); }
.badge--baseline { background: var(--superficie-2); color: var(--texto-2); border: 1px solid var(--borda); }
.badge--neutro { background: var(--superficie-2); color: var(--texto-2); border: 1px solid var(--borda); }
.badge--info { background: var(--azul-100); color: var(--azul-600); }
.badge--andamento { background: var(--ambar-100); color: var(--ambar-600); }
.badge--quente { background: var(--roxo-100); color: var(--roxo-600); }

.selo-novo {
  background: var(--azul-500);
  color: #fff;
  font-size: .66rem;
  font-weight: 700;
  padding: .1rem .4rem;
  border-radius: 4px;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* ---------------- Tabelas ---------------- */

.tabela-wrap { overflow-x: auto; }
table.tabela { width: 100%; border-collapse: collapse; font-size: .855rem; }
table.tabela th {
  text-align: left;
  padding: .6rem .8rem;
  background: var(--superficie-2);
  border-bottom: 1px solid var(--borda);
  color: var(--texto-2);
  font-weight: 600;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  position: sticky;
  top: 0;
}
table.tabela td { padding: .6rem .8rem; border-bottom: 1px solid var(--borda); vertical-align: top; }
table.tabela tbody tr:hover { background: var(--superficie-2); }
table.tabela tbody tr:last-child td { border-bottom: none; }
table.tabela .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.tabela .nowrap { white-space: nowrap; }
.tabela--compacta td, .tabela--compacta th { padding: .4rem .6rem; }

.vazio { padding: 2.5rem 1rem; text-align: center; color: var(--texto-3); }
.vazio strong { display: block; color: var(--texto-2); margin-bottom: .25rem; font-size: .95rem; }

/* ---------------- Formularios ---------------- */

label { display: block; font-size: .78rem; font-weight: 600; color: var(--texto-2); margin-bottom: .3rem; }

input[type="text"], input[type="email"], input[type="password"], input[type="date"],
input[type="number"], input[type="search"], input[type="url"], select, textarea {
  width: 100%;
  padding: .48rem .6rem;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-sm);
  background: var(--superficie);
  color: var(--texto);
  font-family: inherit;
  font-size: .875rem;
  transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--azul-500);
  box-shadow: 0 0 0 3px rgba(47, 111, 184, .15);
}
textarea { resize: vertical; min-height: 76px; }
select { cursor: pointer; }

.campo { margin-bottom: .85rem; }
.campo__dica { font-size: .74rem; color: var(--texto-3); margin-top: .25rem; }
.campo-inline { display: flex; align-items: center; gap: .5rem; }
.campo-inline label { margin: 0; font-weight: 500; color: var(--texto); }
.campo-inline input[type="checkbox"] { width: auto; }

.filtros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .75rem;
  align-items: end;
}
.filtros .acoes { display: flex; gap: .5rem; }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
  padding: .3rem .7rem;
  border: 1px solid var(--borda-forte);
  border-radius: 20px;
  font-size: .78rem;
  color: var(--texto-2);
  background: var(--superficie);
  cursor: pointer;
}
.chip:hover { border-color: var(--azul-500); color: var(--azul-500); text-decoration: none; }
.chip.ativo { background: var(--azul-500); border-color: var(--azul-500); color: #fff; font-weight: 600; }

/* ---------------- Botoes ---------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .48rem .85rem;
  border-radius: var(--raio-sm);
  border: 1px solid var(--borda-forte);
  background: var(--superficie);
  color: var(--texto);
  font-size: .845rem;
  font-weight: 550;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s, transform .06s;
}
.btn:hover { background: var(--superficie-2); border-color: var(--azul-500); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--primario { background: var(--azul-500); border-color: var(--azul-500); color: #fff; }
.btn--primario:hover { background: var(--azul-600); border-color: var(--azul-600); }
.btn--perigo { background: var(--vermelho-600); border-color: var(--vermelho-600); color: #fff; }
.btn--perigo:hover { background: #96201a; border-color: #96201a; }
.btn--sucesso { background: var(--verde-600); border-color: var(--verde-600); color: #fff; }
.btn--pequeno { padding: .3rem .6rem; font-size: .78rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------------- Avisos ---------------- */

.aviso {
  padding: .7rem .95rem;
  border-radius: var(--raio-sm);
  margin-bottom: 1rem;
  font-size: .865rem;
  border: 1px solid transparent;
  display: flex;
  gap: .6rem;
  align-items: flex-start;
}
.aviso--sucesso { background: var(--verde-100); color: var(--verde-600); border-color: #a9dcc8; }
.aviso--erro { background: var(--vermelho-100); color: var(--vermelho-600); border-color: #eab5b1; }
.aviso--atencao { background: var(--ambar-100); color: var(--ambar-600); border-color: #e6ca8e; }
.aviso--info { background: var(--azul-100); color: var(--azul-600); border-color: #b9d3ee; }

/* ---------------- Graficos ---------------- */

.grafico { width: 100%; height: 220px; display: block; }
.grafico text { font-family: var(--fonte); font-size: 10px; fill: var(--texto-3); }
.grafico .barra { fill: var(--azul-500); transition: fill .12s; }
.grafico .barra:hover { fill: var(--azul-600); }
.grafico .grade-linha { stroke: var(--borda); stroke-width: 1; }
.grafico .rotulo-valor { fill: var(--texto-2); font-weight: 600; font-size: 9px; }

.ranking { display: flex; flex-direction: column; gap: .55rem; }
.ranking__item { display: flex; align-items: center; gap: .65rem; font-size: .845rem; }
.ranking__uf { width: 34px; font-weight: 700; color: var(--texto-2); flex: 0 0 34px; }
.ranking__barra { flex: 1; height: 8px; background: var(--superficie-2); border-radius: 4px; overflow: hidden; border: 1px solid var(--borda); }
.ranking__barra i { display: block; height: 100%; background: var(--azul-500); border-radius: 4px; }
.ranking__valor { width: 44px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

.progresso { height: 8px; background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 4px; overflow: hidden; }
.progresso i { display: block; height: 100%; background: var(--azul-500); transition: width .3s; }
.progresso--sucesso i { background: var(--verde-600); }

/* ---------------- Funil ---------------- */

.funil { display: flex; flex-direction: column; gap: .35rem; }
.funil__linha {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .3rem .5rem;
  border-radius: var(--raio-sm);
  font-size: .83rem;
}
.funil__linha:hover { background: var(--superficie-2); text-decoration: none; }
.funil__nome { flex: 1; color: var(--texto); }
.funil__valor { font-weight: 650; font-variant-numeric: tabular-nums; }

/* ---------------- Logs ---------------- */

.logs {
  font-family: var(--fonte-mono);
  font-size: .78rem;
  background: var(--azul-900);
  color: #c9d6e8;
  border-radius: var(--raio-sm);
  padding: .75rem;
  max-height: 480px;
  overflow-y: auto;
  line-height: 1.65;
}
.logs .linha { display: flex; gap: .6rem; padding: .05rem 0; white-space: pre-wrap; word-break: break-word; }
.logs .hora { color: #6b7f9e; flex: 0 0 auto; }
.logs .nivel { flex: 0 0 62px; font-weight: 700; }
.log--info .nivel { color: #6fb0ea; }
.log--warn .nivel { color: #e8b866; }
.log--error .nivel { color: #ef8a80; }
.log--debug .nivel { color: #7d8ba1; }
.logs .msg { flex: 1; }

/* ---------------- Detalhe da agencia ---------------- */

.abas { display: flex; gap: .25rem; border-bottom: 1px solid var(--borda); margin-bottom: 1rem; flex-wrap: wrap; }
.abas a {
  padding: .55rem .9rem;
  color: var(--texto-2);
  font-size: .87rem;
  font-weight: 550;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.abas a:hover { color: var(--azul-500); text-decoration: none; }
.abas a.ativa { color: var(--azul-500); border-bottom-color: var(--azul-500); }

.dados { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .9rem 1.4rem; }
.dado__rotulo { font-size: .72rem; color: var(--texto-3); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; margin-bottom: .12rem; }
.dado__valor { font-size: .9rem; color: var(--texto); word-break: break-word; }
.dado__valor--mono { font-family: var(--fonte-mono); font-size: .82rem; }

.linha-tempo { position: relative; padding-left: 1.35rem; }
.linha-tempo::before { content: ''; position: absolute; left: 5px; top: .4rem; bottom: .4rem; width: 2px; background: var(--borda); }
.linha-tempo__item { position: relative; padding-bottom: .95rem; }
.linha-tempo__item::before {
  content: '';
  position: absolute;
  left: -1.35rem;
  top: .35rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--superficie);
  border: 2px solid var(--azul-500);
  margin-left: 1px;
}
.linha-tempo__data { font-size: .74rem; color: var(--texto-3); }
.linha-tempo__texto { font-size: .855rem; }
.linha-tempo__texto del { color: var(--vermelho-600); text-decoration: line-through; opacity: .8; }
.linha-tempo__texto ins { color: var(--verde-600); text-decoration: none; font-weight: 550; }

.json-bruto {
  font-family: var(--fonte-mono);
  font-size: .76rem;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  padding: .75rem;
  max-height: 380px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--texto-2);
}

/* ---------------- Paginacao ---------------- */

.paginacao { display: flex; align-items: center; gap: .35rem; padding: .8rem 1.1rem; flex-wrap: wrap; }
.paginacao__info { color: var(--texto-2); font-size: .82rem; margin-right: auto; }
.paginacao a, .paginacao span {
  padding: .3rem .6rem;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-sm);
  font-size: .82rem;
  color: var(--texto-2);
  min-width: 32px;
  text-align: center;
}
.paginacao a:hover { border-color: var(--azul-500); color: var(--azul-500); text-decoration: none; }
.paginacao .atual { background: var(--azul-500); border-color: var(--azul-500); color: #fff; font-weight: 600; }
.paginacao .desabilitado { opacity: .4; pointer-events: none; }

/* ---------------- Login ---------------- */

.login-tela {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, var(--azul-900) 0%, var(--azul-700) 100%);
  padding: 1.5rem;
}
.login-caixa {
  width: 100%;
  max-width: 390px;
  background: var(--superficie);
  border-radius: 14px;
  box-shadow: var(--sombra-3);
  padding: 2rem;
}
.login-caixa h1 { font-size: 1.3rem; margin-bottom: .2rem; }
.login-caixa p.sub { color: var(--texto-2); font-size: .85rem; margin: 0 0 1.4rem; }
.login-caixa .btn { width: 100%; padding: .6rem; margin-top: .4rem; }

/* ---------------- Diversos ---------------- */

.texto-2 { color: var(--texto-2); }
.texto-3 { color: var(--texto-3); }
.pequeno { font-size: .78rem; }
.mono { font-family: var(--fonte-mono); font-size: .82rem; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; }
.flex { display: flex; gap: .5rem; align-items: center; }
.flex-entre { display: flex; gap: .5rem; align-items: center; justify-content: space-between; }
.flex-fim { margin-left: auto; }
.flex-wrap { flex-wrap: wrap; }
.oculto { display: none; }
.ponto { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 8px; }
.ponto--ativo { background: var(--verde-600); box-shadow: 0 0 0 3px var(--verde-100); }
.ponto--parado { background: var(--texto-3); }
.ponto--erro { background: var(--vermelho-600); box-shadow: 0 0 0 3px var(--vermelho-100); }

.pulsando { animation: pulsar 1.6s ease-in-out infinite; }
@keyframes pulsar { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

.menu-botao { display: none; background: none; border: none; font-size: 1.3rem; cursor: pointer; color: var(--texto); }
@media (max-width: 760px) { .menu-botao { display: block; } }

.divisor { height: 1px; background: var(--borda); margin: 1rem 0; border: none; }

/* ---------------- Rodapé ---------------- */

.rodape {
  padding: 1rem 1.5rem 1.5rem;
  color: var(--texto-3);
  font-size: .76rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--borda);
  margin-top: 1.5rem;
}
.rodape__sep { opacity: .5; }

/* ---------------- Alerta de fonte ---------------- */

.alerta-fonte {
  border-left: 4px solid var(--vermelho-600);
  background: var(--vermelho-100);
  color: var(--vermelho-600);
  padding: .85rem 1.1rem;
  border-radius: var(--raio-sm);
  margin-bottom: 1rem;
}
.alerta-fonte strong { display: block; margin-bottom: .2rem; }

details.bloco { border: 1px solid var(--borda); border-radius: var(--raio-sm); padding: .6rem .8rem; background: var(--superficie-2); }
details.bloco summary { cursor: pointer; font-weight: 600; font-size: .85rem; color: var(--texto-2); }
details.bloco[open] summary { margin-bottom: .6rem; }