:root {
  --verde: #2e7d32;
  --amarelo: #f9a825;
  --vermelho: #c62828;
  --cinza: #757575;
  --bg: #f4f6f8;
  --card-bg: #ffffff;
  --texto: #1f2937;
  --borda: #e0e0e0;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--texto);
}

header {
  background: #1a237e;
  color: white;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header h1 { font-size: 18px; margin: 0; }
header nav a { color: white; margin-left: 16px; text-decoration: none; font-size: 14px; }
header nav a:hover { text-decoration: underline; }

main { padding: 24px; max-width: 1400px; margin: 0 auto; }
body.pagina-analises main {
  max-width: 1720px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.card {
  background: var(--card-bg);
  border-radius: 8px;
  padding: 16px;
  border: 1px solid var(--borda);
  text-align: center;
}

.card .valor { font-size: 28px; font-weight: 700; }
.card .label { font-size: 12px; color: #666; margin-top: 4px; }

.card.verde .valor { color: var(--verde); }
.card.amarelo .valor { color: var(--amarelo); }
.card.vermelho .valor { color: var(--vermelho); }
.card.cinza .valor { color: var(--cinza); }

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  background: var(--card-bg);
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--borda);
}

.filtros select, .filtros input, .filtros button {
  padding: 8px;
  border-radius: 6px;
  border: 1px solid var(--borda);
  font-size: 13px;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card-bg);
  border-radius: 8px;
  overflow: hidden;
}

th, td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--borda);
  font-size: 13px;
}

th { background: #eceff1; position: sticky; top: 0; }

tr.status-em_atraso { background: #ffebee; }
tr.status-proximo_do_prazo { background: #fff8e1; }
tr.status-dentro_do_prazo { background: #e8f5e9; }
tr.status-dados_insuficientes { background: #f5f5f5; }

.bolinha {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
}
.bolinha.em_atraso { background: var(--vermelho); }
.bolinha.proximo_do_prazo { background: var(--amarelo); }
.bolinha.dentro_do_prazo { background: var(--verde); }
.bolinha.dados_insuficientes { background: var(--cinza); }

a.link-kommo { color: #1565c0; text-decoration: none; font-size: 12px; }

button.primario {
  background: #1a237e;
  color: white;
  border: none;
  cursor: pointer;
}
button.primario:hover { background: #283593; }

.login-box {
  max-width: 360px;
  margin: 80px auto;
  background: var(--card-bg);
  padding: 32px;
  border-radius: 8px;
  border: 1px solid var(--borda);
}
.login-box input {
  width: 100%;
  padding: 10px;
  margin-bottom: 12px;
  border: 1px solid var(--borda);
  border-radius: 6px;
}
.erro { color: var(--vermelho); font-size: 13px; margin-bottom: 8px; }

.secao-incompletos {
  margin-top: 32px;
}

table.config-matriz input {
  width: 80px;
  padding: 4px;
}


/* ─── Módulo de análises documentais ───────────────────────────── */
.status-chip {
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
}
.status-chip.neutro { background:#eceff1; color:#546e7a; }
.status-chip.ok { background:#e8f5e9; color:#1b5e20; }
.status-chip.aviso { background:#fff8e1; color:#8d6e00; }
.status-chip.erro { background:#ffebee; color:#b71c1c; }
.status-chip.processando { background:#e3f2fd; color:#0d47a1; }

.analises-toolbar {
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  background:#fff;
  border:1px solid var(--borda);
  border-radius:8px;
  padding:12px;
  margin-bottom:16px;
}
.analises-toolbar input,
.analises-toolbar select {
  min-height:36px;
  border:1px solid var(--borda);
  border-radius:6px;
  padding:7px 10px;
  background:#fff;
  font-size:13px;
}
.analises-toolbar input { flex:1; min-width:230px; }

.btn-doc {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-height:30px;
  padding:5px 9px;
  border-radius:6px;
  border:1px solid #cfd3dc;
  background:#fff;
  color:#1a237e;
  text-decoration:none;
  cursor:pointer;
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
  line-height:1.15;
}
.btn-doc:hover { background:#e8eaf6; }
.btn-doc.primario { background:#1a237e; color:#fff; border-color:#1a237e; }
.btn-doc.primario:hover { background:#283593; }
.btn-doc:disabled { opacity:.55; cursor:wait; }

.tabela-scroll { width:100%; overflow-x:auto; border-radius:8px; }
#tabelaAnalises { min-width:1500px; }
#tabelaAnalises td { vertical-align:middle; }

.mensagem-pagina {
  display:none;
  margin-bottom:12px;
  padding:10px 12px;
  border-radius:7px;
  font-size:13px;
}
.mensagem-pagina.ok { display:block; background:#e8f5e9; color:#1b5e20; border:1px solid #a5d6a7; }
.mensagem-pagina.erro { display:block; background:#ffebee; color:#b71c1c; border:1px solid #ef9a9a; }
.mensagem-pagina.info { display:block; background:#e3f2fd; color:#0d47a1; border:1px solid #90caf9; }

@media (max-width: 768px) {
  header { align-items:flex-start; gap:10px; flex-direction:column; }
  header nav { display:flex; flex-wrap:wrap; gap:8px; }
  header nav a { margin-left:0; }
  .analises-toolbar { align-items:stretch; }
  .analises-toolbar input,
  .analises-toolbar select,
  .analises-toolbar button { width:100%; }
}


/* ─── Ajustes do painel de análises: cache, filtros e cabeçalho fixo ─── */
.analises-titulo-linha {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.analises-titulo-linha h2 {
  margin:0 0 4px;
  font-size:32px;
}
#ultimaAtualizacao {
  font-size:12px;
  color:#777;
}

.analises-cards {
  grid-template-columns:repeat(6, minmax(0, 1fr));
}

.analises-toolbar {
  position:sticky;
  top:68px;
  z-index:2600;
  display:grid;
  grid-template-columns:58px minmax(190px,1fr) minmax(180px,1fr) minmax(150px,.8fr) minmax(320px,2fr) 88px 96px;
  gap:9px;
  align-items:center;
  margin-bottom:16px;
  padding:12px 14px;
  background:#fff;
  border:1px solid var(--borda);
  border-radius:10px;
  box-shadow:0 5px 16px rgba(0,0,0,.08);
}

.analises-toolbar select,
.analises-toolbar input,
.analises-toolbar button {
  width:100%;
  height:42px;
  min-width:0;
  border-radius:7px;
  box-sizing:border-box;
  font-size:13px;
}

.analises-toolbar select,
.analises-toolbar input {
  border:1px solid #d6d9df;
  background:#fff;
  padding:8px 12px;
}

.btn-atualizar-analises {
  border:1px solid #d6d9df;
  background:#fff;
  cursor:pointer;
  font-size:23px !important;
  line-height:1;
}
.btn-atualizar-analises:hover { background:#f4f6fb; }
.btn-atualizar-analises.girando {
  animation:girarAtualizacao 1s linear infinite;
}
@keyframes girarAtualizacao {
  from { transform:rotate(0deg); }
  to { transform:rotate(360deg); }
}

.btn-filtrar-analises {
  border:none;
  background:#1a237e;
  color:#fff;
  cursor:pointer;
  font-weight:800;
}
.btn-filtrar-analises:hover { background:#283593; }

.btn-limpar-analises {
  border:1px solid #d6d9df;
  background:#f7f7f7;
  color:#333;
  cursor:pointer;
  font-weight:700;
}
.btn-limpar-analises:hover { background:#ededed; }

.analises-tabela-wrap {
  overflow-x:auto;
  overflow-y:visible;
  max-width:100%;
  border:1px solid var(--borda);
  background:#fff;
  scrollbar-gutter:stable both-edges;
}

#tabelaAnalises {
  width:100%;
  min-width:1360px;
  table-layout:fixed;
  border-collapse:separate;
  border-spacing:0;
  border-radius:0;
  overflow:visible;
}
#tabelaAnalises .col-lead { width:80px; }
#tabelaAnalises .col-cliente { width:235px; }
#tabelaAnalises .col-drive { width:88px; }
#tabelaAnalises .col-documentos { width:135px; }
#tabelaAnalises .col-sync { width:120px; }
#tabelaAnalises .col-ultima-sync { width:108px; }
#tabelaAnalises .col-analise { width:260px; }
#tabelaAnalises .col-ultima-analise { width:112px; }
#tabelaAnalises .col-acoes { width:230px; }

#tabelaAnalises th,
#tabelaAnalises td {
  overflow-wrap:anywhere;
}

#tabelaAnalises thead th {
  position:sticky;
  top:136px;
  z-index:2500;
  background:#eceff1;
  box-shadow:0 2px 5px rgba(0,0,0,.06);
}

#tabelaAnalises th.sortable {
  cursor:pointer;
  user-select:none;
}
#tabelaAnalises th.sortable:hover {
  background:#e1e5e8;
}
.sort-indicador {
  font-size:12px;
  margin-left:3px;
  color:#34495e;
}

.acoes-analise {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:6px;
  align-items:stretch;
  width:100%;
}
.acoes-analise .btn-doc {
  width:100%;
  min-width:0;
  min-height:32px;
  padding:6px 7px;
  white-space:normal;
  text-align:center;
}
.sem-vinculo {
  color:#999;
}
.erro-resumo {
  color:#b71c1c;
  font-size:10px;
  margin-top:4px;
  max-width:180px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

@media (max-width: 1250px) {
  .analises-toolbar {
    grid-template-columns:56px repeat(3, minmax(150px,1fr));
  }
  .analises-toolbar input {
    grid-column:1 / -3;
  }
  .analises-cards {
    grid-template-columns:repeat(3, minmax(0,1fr));
  }
  #tabelaAnalises thead th {
    top:194px;
  }
  #tabelaAnalises {
    min-width:1220px;
  }
  #tabelaAnalises .col-cliente { width:210px; }
  #tabelaAnalises .col-documentos { width:125px; }
  #tabelaAnalises .col-analise { width:230px; }
  #tabelaAnalises .col-acoes { width:220px; }
}

@media (max-width: 768px) {
  .analises-titulo-linha h2 { font-size:25px; }
  .analises-cards {
    display:flex !important;
    overflow-x:auto;
  }
  .analises-toolbar {
    position:static;
    display:grid;
    grid-template-columns:54px 1fr;
  }
  .analises-toolbar select,
  .analises-toolbar input {
    grid-column:1 / -1;
  }
  .analises-toolbar .btn-filtrar-analises,
  .analises-toolbar .btn-limpar-analises {
    grid-column:auto;
  }
  .analises-tabela-wrap {
    overflow-x:auto;
  }
  #tabelaAnalises thead th {
    position:static;
  }
}


/* ─── Correção definitiva do cabeçalho fixo em Análises ───────── */
:root {
  --analises-header-top: 76px;
  --analises-thead-top: 142px;
}

header {
  position: sticky !important;
  top: 0 !important;
  z-index: 4000 !important;
  width: 100%;
}

#analisesToolbar {
  position: sticky !important;
  top: var(--analises-header-top) !important;
  z-index: 3900 !important;
}

/* Desativa o sticky nativo dos TH, que estava sobrepondo as linhas. */
#tabelaAnalises thead,
#tabelaAnalises thead th {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}

#stickyAnalisesHeader {
  position: fixed;
  display: none;
  z-index: 3800;
  pointer-events: none;
}

#stickyAnalisesHeader .sticky-analises-table {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  margin: 0;
  background: #eceff1;
  box-shadow: 0 4px 12px rgba(0,0,0,.10);
}

#stickyAnalisesHeader th {
  box-sizing: border-box;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--borda);
  background: #eceff1 !important;
  color: var(--texto);
  font-size: 13px;
  font-weight: 700;
  white-space: normal;
  vertical-align: middle;
}

#stickyAnalisesHeader th.sortable {
  cursor: pointer;
  user-select: none;
}

#stickyAnalisesHeader th.sortable:hover {
  background: #e1e5e8 !important;
}

.analises-tabela-wrap {
  position: relative;
  overflow-x: auto;
  overflow-y: visible;
}

@media (max-width: 768px) {
  #analisesToolbar {
    position: static !important;
  }

  #stickyAnalisesHeader {
    display: none !important;
  }
}
