* { box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  margin: 0;
  background: #f5f6f8;
  color: #1f2430;
}

.hidden { display: none !important; }

.login-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.login-box {
  background: #fff;
  padding: 32px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  text-align: center;
  width: 320px;
}
.login-box input, #modal-filtro {
  width: 100%;
  padding: 10px;
  margin: 12px 0;
  border: 1px solid #ccc;
  border-radius: 6px;
}
.login-box button, header button, #modal button {
  background: #2f6feb;
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}
.login-box button:hover, header button:hover { background: #2456b8; }
.error-text { color: #c0392b; font-size: 13px; }

.app { max-width: 1250px; margin: 0 auto; padding: 24px; }

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
header h1 { font-size: 20px; margin: 0; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.header-actions input[type="month"], .header-actions select {
  padding: 8px; border: 1px solid #ccc; border-radius: 6px;
}
.header-actions button.secundario {
  background: #fff;
  color: #2f6feb;
  border: 1px solid #2f6feb;
}
.header-actions button.secundario:hover { background: #eef3fd; }

.form-empresa { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.form-empresa input { padding: 8px; border: 1px solid #ccc; border-radius: 6px; width: 100%; }
.form-empresa label { font-size: 12px; color: #555; display: block; margin-bottom: 2px; }
.lista-empresas { border-top: 1px solid #eee; margin-top: 12px; padding-top: 8px; }
.empresa-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 1px solid #eee; font-size: 13px;
}
.empresa-item button {
  background: none; border: 1px solid #2f6feb; color: #2f6feb;
  padding: 4px 8px; border-radius: 6px; cursor: pointer; font-size: 12px;
}
.aviso-nao-classificado {
  background: #fff4e0; color: #a5670c; padding: 10px 14px; border-radius: 8px;
  margin-bottom: 12px; font-size: 13px;
}

.pastas-mes {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.pasta-card {
  background: #fff;
  border-radius: 10px;
  padding: 10px 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  flex: 1;
  min-width: 220px;
  font-size: 13px;
}
.pasta-card .titulo { font-weight: 700; margin-bottom: 4px; }
.pasta-card .nome { color: #444; }
.pasta-card .nome.nao-config { color: #a5670c; }
.pasta-card button {
  margin-top: 6px;
  background: none;
  border: 1px solid #2f6feb;
  color: #2f6feb;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
}

.resumo {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.resumo .card {
  background: #fff;
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  flex: 1;
  min-width: 110px;
  text-align: center;
}
.resumo .card .num { font-size: 20px; font-weight: 700; }
.resumo .card.ok .num { color: #1e8e3e; }
.resumo .card.dispensado .num { color: #7a7a7a; }
.resumo .card.pendente .num { color: #c0392b; }

.status-msg { margin-bottom: 12px; font-size: 14px; color: #555; }

.barra-selecao {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #eaf1ff;
  border: 1px solid #b9d0f7;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 13px;
}
.barra-selecao select {
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid #ccc;
}
.barra-selecao.hidden { display: none; }

.filtro-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 13px;
}
.filtro-status select {
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid #ccc;
}
.filtro-status.hidden { display: none; }

table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
th, td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid #eee;
  font-size: 13px;
  vertical-align: top;
}
th { background: #fafafa; font-weight: 600; }
th.ordenavel { cursor: pointer; user-select: none; white-space: nowrap; }
th.ordenavel:hover { background: #f0f0f0; }

tbody tr:nth-child(even) { background: #f4f6f9; }
tbody tr:hover { background: #eaf1ff; }

.badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.badge.ok { background: #e5f6ea; color: #1e8e3e; }
.badge.dispensado { background: #eee; color: #7a7a7a; }
.badge.pendente { background: #fdeaea; color: #c0392b; }
.badge.nao_pago { background: #fff4e0; color: #a5670c; }
.badge.nao_aplicavel { background: #eef2fb; color: #35528c; }

.doc-cell { display: flex; flex-direction: column; gap: 4px; }
.doc-cell .acoes { display: flex; gap: 6px; align-items: center; }
.doc-cell .acoes.nota { font-size: 11px; color: #666; font-style: italic; }
.link-btn {
  background: none;
  border: 1px solid #2f6feb;
  color: #2f6feb;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
}
.doc-cell label {
  font-size: 11px;
  color: #666;
  display: flex;
  align-items: center;
  gap: 4px;
}
.doc-cell a { font-size: 12px; }

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-content {
  background: #fff;
  padding: 24px;
  border-radius: 12px;
  width: 500px;
  max-height: 75vh;
  overflow-y: auto;
}
.file-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
  gap: 8px;
}
.file-option span { word-break: break-word; }
.badge-ext {
  display: inline-block;
  background: #e4e9f2;
  color: #445;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
  margin-right: 4px;
  vertical-align: middle;
}
.file-option button {
  background: #2f6feb;
  color: #fff;
  border: none;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
}