/* Esteira — complementa o sabe-base.css do Sabe Gestão Web.
   Mantém a paleta e as fontes do sistema para não parecer outro produto. */

:root{
  --borda: #e2e6eb;
  --fundo: #f4f6f8;
  --texto-2: #5b6773;
  --ok: #2E7D32;
  --alerta: #C62828;
  --atencao: #F57F17;
}

body{ background: var(--fundo); font-family: var(--font-body, 'Open Sans', sans-serif); margin:0; }
.view{ display:none } .view.active{ display:block }

.marca{
  font-family: var(--font-head,'Raleway',sans-serif);
  font-weight:800; letter-spacing:-.02em; color: var(--primary,#1565C0); margin:0;
}
.login-header .marca{ font-size:30px }
.login-header p{ color:var(--texto-2); margin:2px 0 0 }
.erro{ color:var(--alerta); font-size:14px; margin:0 0 10px }

/* ---------- estrutura ---------- */
#view-app.active{ display:flex; min-height:100vh }
.sidebar{
  width:230px; flex:0 0 230px; background:#fff; border-right:1px solid var(--borda);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.sidebar-marca{ padding:18px 20px; border-bottom:1px solid var(--borda); display:flex; flex-direction:column }
.sidebar-marca .marca{ font-size:22px; line-height:1 }
.sidebar-marca small{ color:var(--texto-2); font-size:12px; letter-spacing:.08em; text-transform:uppercase }
.sidebar nav{ padding:10px 0; flex:1 }
.nav-item{
  display:flex; align-items:center; gap:12px; padding:11px 20px; cursor:pointer;
  color:#33404d; font-size:15px; border-left:3px solid transparent; text-decoration:none;
}
.nav-item i{ width:18px; text-align:center; color:var(--texto-2) }
.nav-item:hover{ background:#f7f9fb }
.nav-item.ativo{ background:#eaf2fb; border-left-color:var(--primary,#1565C0); color:var(--primary-dk,#0D47A1); font-weight:600 }
.nav-item.ativo i{ color:var(--primary,#1565C0) }
.sidebar-rodape{
  padding:14px 20px; border-top:1px solid var(--borda); display:flex; align-items:center;
  justify-content:space-between; gap:8px; font-size:13px; color:var(--texto-2);
}

.conteudo{ flex:1; padding:26px 30px 60px; min-width:0 }
.tela{ display:none } .tela.ativa{ display:block }
.cabecalho{ margin-bottom:20px }
.cabecalho h1{ font-family:var(--font-head,'Raleway',sans-serif); font-size:26px; margin:0 0 4px; color:#1d2733 }
.cabecalho .sub{ margin:0; color:var(--texto-2); font-size:14px }
.cabecalho select{ padding:6px 10px; border:1px solid var(--borda); border-radius:6px; font-size:14px }

/* ---------- números ---------- */
.numeros{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); margin-bottom:24px }
.num-card{
  background:#fff; border:1px solid var(--borda); border-radius:var(--radius,8px);
  padding:16px 18px; box-shadow:var(--shadow,0 2px 8px rgba(0,0,0,.06));
}
.num-card .v{ font-family:var(--font-head,'Raleway',sans-serif); font-weight:800; font-size:28px; color:#1d2733; line-height:1.1 }
.num-card .v.alerta{ color:var(--alerta) }
.num-card .v.ok{ color:var(--ok) }
.num-card .r{ color:var(--texto-2); font-size:13px; margin-top:4px }
.num-card .obs{ color:#8a94a0; font-size:12px; margin-top:6px }

/* ---------- blocos ---------- */
.bloco{
  background:#fff; border:1px solid var(--borda); border-radius:var(--radius,8px);
  padding:18px 20px; margin-bottom:20px; box-shadow:var(--shadow,0 2px 8px rgba(0,0,0,.06));
}
.bloco h2{ font-family:var(--font-head,'Raleway',sans-serif); font-size:16px; margin:0 0 14px; color:#1d2733 }
.tabela-rolagem{ overflow-x:auto }
table.data-table{ width:100%; border-collapse:collapse; font-size:14px }
table.data-table th, table.data-table td{ padding:9px 12px; border-bottom:1px solid var(--borda); text-align:left }
table.data-table th{ color:var(--texto-2); font-size:12px; text-transform:uppercase; letter-spacing:.05em }
table.data-table td.num, table.data-table th.num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap }
table.data-table tbody tr:hover{ background:#f7f9fb }

/* ---------- barras ---------- */
.barras{ display:flex; flex-direction:column; gap:7px }
.barra{ display:grid; grid-template-columns:64px 1fr auto; gap:12px; align-items:center; font-size:13px }
.barra .mes{ color:var(--texto-2); font-variant-numeric:tabular-nums }
.barra .trilho{ background:#eef1f4; border-radius:3px; height:16px; overflow:hidden }
.barra .trilho i{ display:block; height:100%; background:var(--primary-lt,#42A5F5) }
.barra .qtd{ font-variant-numeric:tabular-nums; color:#1d2733; font-weight:600; min-width:96px; text-align:right }

/* ---------- funil ---------- */
.funil{ display:flex; flex-direction:column; gap:6px }
.etapa{
  display:grid; grid-template-columns:1fr 120px 70px; gap:12px; align-items:center;
  background:#fff; border:1px solid var(--borda); border-radius:6px; padding:10px 14px; font-size:14px;
}
.etapa .nome{ color:#1d2733 }
.etapa .trilho{ background:#eef1f4; border-radius:3px; height:12px; overflow:hidden }
.etapa .trilho i{ display:block; height:100%; background:var(--primary-lt,#42A5F5) }
.etapa .qtd{ text-align:right; font-variant-numeric:tabular-nums; font-weight:600 }
.selo{
  font-size:11px; padding:2px 7px; border-radius:3px; background:#eaf2fb;
  color:var(--primary-dk,#0D47A1); text-transform:uppercase; letter-spacing:.05em; margin-left:8px;
}
.venceu{ color:var(--alerta); font-weight:600 }
.vazio{ color:var(--texto-2); padding:14px; font-size:14px }

@media (max-width:820px){
  #view-app.active{ flex-direction:column }
  .sidebar{ width:100%; flex:none; height:auto; position:static }
  .sidebar nav{ display:flex; overflow-x:auto }
  .nav-item{ border-left:none; border-bottom:3px solid transparent; white-space:nowrap }
  .nav-item.ativo{ border-left:none; border-bottom-color:var(--primary,#1565C0) }
  .conteudo{ padding:18px }
}

.nota{ color:var(--texto-2); font-size:13px; margin:10px 0 0 }
#sel-dias{ padding:4px 8px; border:1px solid var(--borda); border-radius:6px; font-size:14px }

.trilho.mini{ display:block; background:#eef1f4; border-radius:3px; height:10px; overflow:hidden }
.trilho.mini i{ display:block; height:100%; background:var(--primary-lt,#42A5F5) }
td.bom{ color:var(--ok); font-weight:600 }

.filtros{ display:grid; gap:12px 16px; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); align-items:end }
.filtros label{ display:flex; flex-direction:column; gap:5px; font-size:13px; color:var(--texto-2) }
.filtros label.check{ flex-direction:row; align-items:center; gap:8px; grid-column:span 2 }
.filtros input, .filtros select{ padding:7px 9px; border:1px solid var(--borda); border-radius:6px; font-size:14px; color:#1d2733 }
.acoes{ display:flex; gap:10px; margin-top:16px; flex-wrap:wrap }
.acoes .btn{ padding:9px 16px; border-radius:6px; border:1px solid var(--borda); background:#fff; cursor:pointer; font-size:14px }
.acoes .btn-primary{ background:var(--primary,#1565C0); color:#fff; border-color:var(--primary,#1565C0) }
.acoes .btn:disabled{ opacity:.5; cursor:not-allowed }
code{ background:#eef1f4; padding:1px 5px; border-radius:3px; font-size:.92em }

/* filtro por status — Lista do dia e Retomada (17/09) */
.filtros label.largo { grid-column: 1 / -1; }
.caixa-status { display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--borda, #dbe0dc); border-radius: 4px; padding: 8px 10px; background: #fff; }
.itens-status { display: flex; flex-wrap: wrap; gap: 4px 14px; max-height: 128px; overflow-y: auto; }
.atalhos-status { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--borda, #dbe0dc); padding-bottom: 8px; }
.atalhos-status .chip { border: 1px solid var(--borda, #dbe0dc); background: #f5f8fb; color: #1d2733;
  border-radius: 20px; padding: 3px 11px; font-size: 12px; cursor: pointer; }
.atalhos-status .chip:hover { background: var(--primary, #1565C0); color: #fff; border-color: var(--primary, #1565C0); }
.atalhos-status .chip.limpar { background: #fff; color: #77837f; }
.caixa-status label, .filtros .caixa-status label {
  display: flex; flex-direction: row; align-items: center; gap: 6px; font-size: 13px;
  font-weight: 400; white-space: nowrap; cursor: pointer; margin: 0; padding: 2px 0; }
.caixa-status label:hover { color: var(--primary, #1565C0); }
.caixa-status input, .filtros .caixa-status input { margin: 0; width: auto; padding: 0; flex: none; }
.caixa-status .qtd-mini { color: #77837f; font-size: 12px; }
.vazio-mini { color: #77837f; font-size: 13px; }
.dica { display: block; color: #77837f; font-size: 12px; margin-top: 4px; }