:root {
  --azul: #1f5f8b;
  --azul-escuro: #15425f;
  --verde: #2f9e6f;
  --cinza: #f4f6f8;
  --borda: #e2e8f0;
  --texto: #1f2933;
  --suave: #6b7280;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--texto);
  background: var(--cinza);
}

/* ---- Cabeçalho ---- */
.topbar {
  background: linear-gradient(90deg, var(--azul-escuro), var(--azul));
  color: #fff;
  padding: 0 24px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.topbar .marca { font-weight: 600; font-size: 18px; letter-spacing: .3px; }
.topbar .marca small { font-weight: 400; opacity: .8; }
.topbar .usuario { font-size: 14px; display: flex; align-items: center; gap: 14px; }
.topbar a.sair { color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.5);
  padding: 5px 12px; border-radius: 6px; font-size: 13px; }
.topbar a.sair:hover { background: rgba(255,255,255,.15); }

/* ---- Conteúdo ---- */
.container { max-width: 1100px; margin: 26px auto; padding: 0 20px; }
h1 { font-size: 22px; margin: 0 0 4px; }
.sub { color: var(--suave); font-size: 14px; margin: 0 0 18px; }

.card { background: #fff; border: 1px solid var(--borda); border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04); overflow: hidden; }

/* ---- Busca ---- */
.busca { display: flex; gap: 8px; padding: 16px; border-bottom: 1px solid var(--borda); }
.busca input[type=text] {
  flex: 1; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 8px; font-size: 14px;
}
.busca button {
  background: var(--azul); color: #fff; border: 0; padding: 10px 18px; border-radius: 8px;
  font-size: 14px; cursor: pointer;
}
.busca button:hover { background: var(--azul-escuro); }
.busca a.limpar { align-self: center; color: var(--suave); font-size: 13px; text-decoration: none; }

/* ---- Tabela ---- */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 14px; text-align: left; font-size: 14px; }
thead th { background: #f8fafc; color: var(--suave); font-weight: 600; text-transform: uppercase;
  font-size: 12px; letter-spacing: .4px; border-bottom: 1px solid var(--borda); }
tbody tr { border-bottom: 1px solid #eef1f4; }
tbody tr:hover { background: #f9fbfd; }
td.mono { font-family: "Consolas", monospace; color: var(--azul-escuro); }
.reduzido { font-weight: 600; }

/* ---- Rodapé / paginação ---- */
.rodape { display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; font-size: 13px; color: var(--suave); }
.paginacao a, .paginacao span { display: inline-block; padding: 6px 12px; border-radius: 6px;
  border: 1px solid var(--borda); text-decoration: none; color: var(--texto); margin-left: 6px; }
.paginacao a:hover { background: var(--cinza); }
.paginacao .desativado { opacity: .4; pointer-events: none; }

/* ---- Aviso ---- */
.aviso { background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; border-radius: 8px;
  padding: 10px 14px; font-size: 13px; margin: 0 0 16px; }

/* ---- Login ---- */
.login-wrap { display: flex; min-height: 100vh; align-items: center; justify-content: center; }
.login-card { background: #fff; border: 1px solid var(--borda); border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,.08); width: 340px; padding: 28px; }
.login-card h1 { text-align: center; color: var(--azul-escuro); }
.login-card .sub { text-align: center; }
.login-card label { display: block; font-size: 13px; color: var(--suave); margin: 12px 0 4px; }
.login-card input { width: 100%; padding: 10px 12px; border: 1px solid var(--borda);
  border-radius: 8px; font-size: 14px; }
.login-card button { width: 100%; margin-top: 18px; background: var(--azul); color: #fff;
  border: 0; padding: 11px; border-radius: 8px; font-size: 15px; cursor: pointer; }
.login-card button:hover { background: var(--azul-escuro); }
.erro { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; border-radius: 8px;
  padding: 9px 12px; font-size: 13px; margin-top: 14px; text-align: center; }

/* ---- Empresa aberta (topbar) ---- */
.topbar .empresa-atual { flex: 1; text-align: center; line-height: 1.1; }
.topbar .empresa-atual .nome { font-weight: 600; font-size: 15px; }
.topbar .empresa-atual small { display: block; opacity: .75; font-size: 12px; }
.topbar .link-claro { color: #fff; text-decoration: none; font-size: 13px; opacity: .9; }
.topbar .link-claro:hover { text-decoration: underline; }
.topbar .sair { background: transparent; color: #fff; cursor: pointer;
  border: 1px solid rgba(255,255,255,.5); padding: 5px 12px; border-radius: 6px; font-size: 13px; }
.topbar .sair:hover { background: rgba(255,255,255,.15); }

/* ---- Layout com menu lateral ---- */
.layout { display: flex; align-items: flex-start; }
.sidebar { width: 210px; min-height: calc(100vh - 56px); background: #fff;
  border-right: 1px solid var(--borda); padding: 16px 0; flex-shrink: 0; }
.sidebar .grupo { font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--suave); padding: 10px 20px 6px; }
.sidebar .item { display: flex; align-items: center; justify-content: space-between;
  gap: 6px; padding: 9px 20px; font-size: 14px; color: var(--texto); text-decoration: none; }
.sidebar a.item:hover { background: var(--cinza); }
.sidebar .item.ativo { background: #eaf2f8; color: var(--azul-escuro); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--azul); }
.sidebar .item.disabled { color: #9aa5b1; cursor: default; }
.layout .container { flex: 1; margin: 26px auto; }

/* ---- Badges ---- */
.badge { background: #eef2f7; color: #64748b; font-size: 10px; text-transform: uppercase;
  letter-spacing: .4px; padding: 2px 7px; border-radius: 10px; }

/* ---- Lista de empresas ---- */
.cabecalho-lista { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 16px; }
.link-forte { color: var(--azul); text-decoration: none; font-weight: 600; }
.link-forte:hover { text-decoration: underline; }
td.acoes { display: flex; gap: 6px; }
.botao { background: var(--azul); color: #fff; text-decoration: none; border: 0; cursor: pointer;
  padding: 10px 16px; border-radius: 8px; font-size: 14px; display: inline-block; }
.botao:hover { background: var(--azul-escuro); }
.botao.claro { background: #fff; color: var(--texto); border: 1px solid var(--borda); }
.botao-mini { font-size: 12px; padding: 5px 10px; border-radius: 6px; text-decoration: none;
  border: 1px solid var(--borda); color: var(--texto); background: #fff; cursor: pointer; }
.botao-mini:hover { background: var(--cinza); }
.botao-mini.claro { color: var(--azul); }
.botao-mini.perigo { color: #b91c1c; border-color: #fecaca; }
.botao-mini.perigo:hover { background: #fef2f2; }

/* ---- Formulário ---- */
.rotulo { display: block; font-size: 13px; color: var(--suave); margin-bottom: 4px; }
.campo { width: 100%; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 8px; font-size: 14px; }
.dica { font-size: 12px; color: var(--suave); margin: 6px 0 0; }

/* ---- Cards de menu (home da empresa) ---- */
.secao { font-size: 14px; text-transform: uppercase; letter-spacing: .5px; color: var(--suave);
  margin: 24px 0 10px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.menu-card { display: block; background: #fff; border: 1px solid var(--borda); border-radius: 10px;
  padding: 16px; text-decoration: none; color: var(--texto); position: relative; }
.menu-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,.06); border-color: #cdd7e1; }
.menu-card h3 { margin: 0 0 6px; font-size: 15px; color: var(--azul-escuro); }
.menu-card p { margin: 0; font-size: 13px; color: var(--suave); }
.menu-card.disabled { opacity: .65; }
.menu-card.disabled .badge { position: absolute; top: 12px; right: 12px; }

/* ---- Formulários de parâmetros (criar/editar) ---- */
.form-param { display: flex; flex-wrap: wrap; gap: 12px 16px; padding: 14px 16px 16px; align-items: flex-end; }
.form-param label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--suave);
  font-weight: 600; letter-spacing: .2px; }
.form-param label.cresce { flex: 1; min-width: 240px; }
.form-param label.check-inline { flex-direction: row; align-items: center; gap: 6px; font-size: 13px; color: var(--texto); }
.form-param input[type=text], .form-param input[type=number], .form-param select {
  padding: 9px 11px; border: 1px solid var(--borda); border-radius: 8px; font-size: 14px; background: #fff; font-weight: 400; color: var(--texto); }
.form-param input[type=number] { width: 110px; }
.form-acoes { display: flex; gap: 8px; align-items: center; }

/* ---- Painel "testar regra" ---- */
.painel-teste { border-left: 3px solid var(--azul); margin-bottom: 16px; }
.titulo-painel { padding: 12px 16px 0; font-weight: 600; color: var(--azul-escuro); }
.linha-teste { display: flex; gap: 8px; padding: 12px 16px; flex-wrap: wrap; }
.linha-teste input[type=text] { padding: 9px 12px; border: 1px solid var(--borda); border-radius: 8px; font-size: 14px; }
.linha-teste .cresce { flex: 1; min-width: 280px; }
.linha-teste select { padding: 9px 10px; border: 1px solid var(--borda); border-radius: 8px; font-size: 14px; background: #fff; }
.linha-teste button { background: var(--azul); color: #fff; border: 0; padding: 9px 18px; border-radius: 8px; cursor: pointer; }
.linha-teste button:hover { background: var(--azul-escuro); }
.resultado-teste { margin: 0 16px 16px; }
.resultado-teste .casou { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534;
  border-radius: 8px; padding: 12px 14px; font-size: 14px; }
.resultado-teste .nao-casou { background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412;
  border-radius: 8px; padding: 12px 14px; font-size: 14px; }
.resultado-teste .par { margin-top: 6px; }
.busca select { padding: 10px 12px; border: 1px solid var(--borda); border-radius: 8px; font-size: 14px; background: #fff; }

/* ---- Upload + pré-visualização ---- */
.upload { display: flex; gap: 10px; align-items: center; padding: 16px; }
.upload input[type=file] { flex: 1; font-size: 14px; }
.upload button { background: var(--azul); color: #fff; border: 0; padding: 10px 18px;
  border-radius: 8px; font-size: 14px; cursor: pointer; }
.upload button:hover { background: var(--azul-escuro); }
.preview-wrap { overflow: auto; max-height: 460px; border-top: 1px solid var(--borda); }
table.preview { border-collapse: collapse; font-size: 12px; white-space: nowrap; }
table.preview th, table.preview td { border: 1px solid #eef1f4; padding: 4px 8px;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
table.preview thead th { position: sticky; top: 0; background: #f1f5f9; color: var(--azul-escuro);
  font-weight: 600; text-align: center; z-index: 1; }
table.preview td.num, table.preview th.num { position: sticky; left: 0; background: #f8fafc;
  color: var(--suave); text-align: center; font-weight: 600; }
table.preview thead th.num { z-index: 2; }
table.preview tbody tr:hover td { background: #f9fbfd; }
.col-label { display: block; font-size: 9px; font-weight: 700; color: #1f2933; margin-top: 2px; }

/* ---- Descritor ---- */
.descritor { padding: 16px; border-top: 1px solid var(--borda); }
.d-linha { margin-bottom: 14px; }
.d-linha .rotulo { font-weight: 600; color: var(--texto); margin-bottom: 6px; }
.d-linha .radio { display: inline-flex; align-items: center; gap: 5px; margin-right: 18px;
  font-size: 14px; color: var(--texto); font-weight: 400; }
.campo.curto { width: 120px; }
.mapa { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.campo-map { display: flex; align-items: center; gap: 6px; background: #f8fafc;
  border: 1px solid var(--borda); border-radius: 8px; padding: 6px 10px; }
.campo-map .tag { font-size: 12px; font-weight: 600; color: #1f2933; padding: 2px 8px; border-radius: 6px; }
.campo-map select { padding: 6px 8px; border: 1px solid var(--borda); border-radius: 6px;
  font-size: 13px; background: #fff; min-width: 56px; }
.campo-map .mais { color: var(--suave); font-weight: 700; }

/* ---- Grade de conferência ---- */
tr.sem-regra td { background: #fff7ed; }
tr.sem-regra:hover td { background: #ffedd5; }