/* ═══════════════════════════════════════════════════
   LEVEL CONCILIA — CSS central
   Design System Level One · versão 08/2026
   ═══════════════════════════════════════════════════ */

/* ── 1. Tokens ──────────────────────────────────── */
:root {
  /* Azul Level (âncora) */
  --lo-blue-50:  #EBF6FC;
  --lo-blue-100: #D3ECF8;
  --lo-blue-300: #74C2E8;
  --lo-blue-500: #0F91CF;
  --lo-blue-600: #0C7AB0;
  --lo-blue-700: #0A648F;

  /* Grafite (neutros) */
  --lo-gray-50:  #F7F7F7;
  --lo-gray-200: #DFDFE0;
  --lo-gray-300: #C6C7C8;
  --lo-gray-400: #9A9B9C;
  --lo-gray-500: #6F7071;
  --lo-gray-700: #434444;
  --lo-gray-800: #323333;
  --lo-gray-900: #232424;

  /* Semânticas */
  --lo-success-text: #157A52; --lo-success-bg: #E6F6EF; --lo-success-border: #A7DCBD;
  --lo-warning-text: #A66C12; --lo-warning-bg:  #FCF3E2; --lo-warning-border: #F0CFA0;
  --lo-danger-text:  #A32F2F; --lo-danger-bg:   #FBEAEA; --lo-danger-border:  #F5B5B5;
  --lo-info-text:    var(--lo-blue-700); --lo-info-bg: var(--lo-blue-50);

  /* Superfícies */
  --lo-canvas:  #F5F7FA;
  --lo-surface: #FFFFFF;
  --lo-border:  #DFDFE0;

  /* Forma */
  --lo-radius:    10px;
  --lo-radius-sm: 8px;
  --lo-shadow:    0 1px 3px rgba(16,42,67,.08);

  /* Fontes */
  --lo-font-titulo: 'Sora', system-ui, sans-serif;
  --lo-font-corpo:  'Inter', system-ui, sans-serif;
  --lo-font-mono:   'JetBrains Mono', 'Fira Code', monospace;

  /* Aliases internos */
  --primary:  var(--lo-blue-500);
  --primary-h: var(--lo-blue-600);
  --dark:     var(--lo-gray-900);
  --gray:     var(--lo-gray-800);
  --gray-lt:  var(--lo-gray-500);
  --border:   var(--lo-border);
  --bg:       var(--lo-canvas);
}

/* ── 2. Reset ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; }
body {
  font-family: var(--lo-font-corpo);
  background: var(--lo-canvas);
  color: var(--lo-gray-800);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-h); }

/* ── 3. Layout principal — Rail + Topbar ──────── */
.layout {
  display: flex;
  min-height: 100vh;
}

/* RAIL (sidebar de ícones) */
.rail {
  width: 64px;
  background: var(--lo-surface);
  border-right: 1px solid var(--lo-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  padding: 14px 0 20px;
  gap: 2px;
}
.rail-logo {
  width: 40px; height: 40px;
  background: var(--lo-blue-500);
  border-radius: var(--lo-radius-sm);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  flex-shrink: 0;
}
.rail-logo svg { width: 22px; height: 22px; fill: #fff; }
.rail-sep {
  width: 32px; height: 1px;
  background: var(--lo-border);
  margin: 8px 0;
}
.rail-item {
  position: relative;
  width: 48px; height: 48px;
  border-radius: var(--lo-radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--lo-gray-500);
  transition: background .15s, color .15s;
  cursor: pointer;
  text-decoration: none;
}
.rail-item:hover {
  background: var(--lo-blue-50);
  color: var(--lo-blue-700);
}
.rail-item.ativo {
  background: var(--lo-blue-50);
  color: var(--lo-blue-700);
}
.rail-item.ativo::before {
  content: '';
  position: absolute;
  left: 0; top: 10px; bottom: 10px;
  width: 3px;
  background: var(--lo-blue-500);
  border-radius: 0 3px 3px 0;
  transform: skewY(-18deg);
}
.rail-item svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Tooltip */
.rail-item .tip {
  position: absolute;
  left: 56px;
  background: var(--lo-gray-900);
  color: #fff;
  font-size: 12px;
  font-family: var(--lo-font-corpo);
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  z-index: 200;
}
.rail-item:hover .tip { opacity: 1; }

/* TOPBAR */
.topbar {
  position: fixed;
  top: 0; left: 64px; right: 0;
  height: 56px;
  background: var(--lo-surface);
  border-bottom: 1px solid var(--lo-border);
  display: flex; align-items: center;
  padding: 0 28px;
  z-index: 90;
  gap: 14px;
}
.topbar-marca {
  font-family: var(--lo-font-titulo);
  font-size: 13px; font-weight: 700;
  color: var(--lo-blue-500);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.topbar-sep { color: var(--lo-gray-300); }
.topbar-titulo {
  font-family: var(--lo-font-corpo);
  font-size: 14px; font-weight: 600;
  color: var(--lo-gray-800);
}
.topbar-usuario {
  margin-left: auto;
  display: flex; align-items: center; gap: 12px;
  font-size: 12.5px; color: var(--lo-gray-500);
}
.topbar-usuario a { color: var(--lo-gray-700); font-weight: 500; }
.topbar-usuario a:hover { color: var(--lo-blue-600); }

/* CONTEÚDO */
.pagina {
  margin-left: 64px;
  margin-top: 56px;
  padding: 28px 28px 48px;
  min-height: calc(100vh - 56px);
}

/* ── 4. Tipografia ──────────────────────────────── */
h1 {
  font-family: var(--lo-font-titulo);
  font-size: 18px; font-weight: 700;
  color: var(--lo-gray-900);
  margin-bottom: 20px;
}
h2 {
  font-family: var(--lo-font-corpo);
  font-size: 15px; font-weight: 600;
  color: var(--lo-gray-800);
  margin-bottom: 14px;
}
.form-secao {
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--lo-gray-500);
  margin: 22px 0 10px;
}
.form-secao:first-of-type { margin-top: 0; }

/* ── 5. Flash (mensagens) ───────────────────────── */
.flashes { margin-bottom: 18px; display: flex; flex-direction: column; gap: 8px; }
.flash {
  padding: 11px 16px;
  border-radius: var(--lo-radius-sm);
  border-left: 4px solid transparent;
  font-size: 13.5px;
}
.flash.success, .flash.ok {
  background: var(--lo-success-bg);
  border-color: #1FA971;
  color: var(--lo-success-text);
}
.flash.danger, .flash.erro {
  background: var(--lo-danger-bg);
  border-color: #D64545;
  color: var(--lo-danger-text);
}
.flash.warning {
  background: var(--lo-warning-bg);
  border-color: #DE9426;
  color: var(--lo-warning-text);
}

/* ── 6. Cards (KPIs) ────────────────────────────── */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}
/* Poucos cards com bastante texto (ex.: Minha conta) — colunas mais largas
   pra não abrir vãos vazios com auto-fill quando sobra espaço na linha. */
.cards--largas { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.card {
  background: var(--lo-surface);
  border: 1px solid var(--lo-border);
  border-radius: var(--lo-radius);
  padding: 18px 20px;
  box-shadow: var(--lo-shadow);
}
.card .rotulo {
  font-size: 12px; font-weight: 500;
  color: var(--lo-gray-500);
  margin-bottom: 6px;
}
.card .valor {
  font-family: var(--lo-font-titulo);
  font-size: 28px; font-weight: 800;
  color: var(--lo-gray-900);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.card.destaque { border-left: 3px solid var(--lo-blue-500); }
.card.pendente  .valor { color: var(--lo-warning-text); }
.card.sugerido  .valor { color: var(--lo-blue-700); }
.card.confirmado .valor { color: var(--lo-success-text); }

/* ── 7. Painel ──────────────────────────────────── */
.painel {
  background: var(--lo-surface);
  border: 1px solid var(--lo-border);
  border-radius: var(--lo-radius);
  padding: 20px 22px;
  box-shadow: var(--lo-shadow);
  margin-bottom: 20px;
}
.painel h2 { margin-top: 0; }
.painel--estreito { max-width: 520px; }
.lista-passos { margin: 12px 0 0 18px; line-height: 2; }

/* Cabeçalho de seção de página */
.cabecalho-pagina {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.cabecalho-pagina h2 { margin: 0; }

/* ── 8. Tabela ──────────────────────────────────── */
.tabela-envelope {
  border: 1px solid var(--lo-border);
  border-radius: var(--lo-radius);
  max-height: 60vh;
  overflow-x: auto;
  overflow-y: auto;
  background: var(--lo-surface);
}
table.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
table.tbl thead th {
  position: sticky; top: 0; z-index: 10;
  background: var(--lo-gray-900);
  color: #fff;
  font-family: var(--lo-font-corpo);
  font-size: 12px; font-weight: 600;
  text-align: left;
  padding: 9px 12px;
  white-space: nowrap;
}
table.tbl thead tr.filtros th {
  top: 36px;
  background: var(--lo-gray-50);
  padding: 5px 8px;
}
table.tbl tbody td {
  padding: 9px 12px;
  border-top: 1px solid var(--lo-border);
  vertical-align: middle;
}
table.tbl tbody tr:hover td { background: var(--lo-blue-50); }
table.tbl tbody tr.linha-confirmada td { background: var(--lo-success-bg); }
table.tbl .dir { text-align: right; }
table.tbl .cen { text-align: center; }

/* Filtros da tabela */
.filtro {
  width: 100%; min-width: 60px;
  padding: 4px 7px;
  border: 1px solid var(--lo-gray-300);
  border-radius: 5px;
  font-size: 12px;
  font-family: var(--lo-font-corpo);
  background: var(--lo-surface);
}
.filtro:focus { outline: none; border-color: var(--lo-blue-300); box-shadow: 0 0 0 3px var(--lo-blue-50); }

/* Filtro por coluna — ícone no cabeçalho + popover (padrão do grupo, ver
   skill level-one-ui/componentes.md — formalizado no Level Emit). A linha
   .filtros fica escondida (JS move os campos pra dentro do popover). */
tr.filtros.oculta { display: none; }
.th-filtro {
  border: none; background: transparent; color: inherit;
  opacity: .55;
  padding: 1px 4px; margin-left: 4px;
  cursor: pointer; font-size: 10px; line-height: 1;
  vertical-align: middle;
  border-radius: 4px;
}
.th-filtro:hover { opacity: 1; background: rgba(255,255,255,.15); }
.th-filtro.ativo { opacity: 1; color: var(--lo-blue-300); }
.th-filtro-pop {
  display: none;
  position: fixed;
  z-index: 200;
  background: var(--lo-surface);
  border: 1px solid var(--lo-border);
  border-radius: var(--lo-radius-sm);
  box-shadow: var(--lo-shadow);
  padding: 8px;
}
.th-filtro-pop.aberto { display: block; }
.th-filtro-pop .filtro { width: 200px; }

/* Valores monetários na tabela */
.mono { font-family: var(--lo-font-mono); font-variant-numeric: tabular-nums; }
.entrada { color: var(--lo-success-text); font-weight: 600; }
.saida   { color: var(--lo-danger-text);  font-weight: 600; }
.nowrap { white-space: nowrap; }
.celula-truncada { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Paginação (ex.: Administração > Auditoria) */
.paginacao {
  display: flex; align-items: center; gap: 14px;
  margin-top: 14px; font-size: 13px; color: var(--lo-gray-500);
}
.paginacao a { color: var(--lo-blue-600); font-weight: 500; }
.paginacao .atual { color: var(--lo-gray-500); }

/* Estado vazio */
.vazio {
  text-align: center;
  padding: 36px 20px;
  color: var(--lo-gray-500);
  font-size: 13px;
}

/* ── 9. Badges ───────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 12px; font-weight: 600;
  white-space: nowrap;
  line-height: 1.5;
}
.badge.verde   { background: var(--lo-success-bg); color: var(--lo-success-text); }
.badge.amarelo { background: var(--lo-warning-bg); color: var(--lo-warning-text); }
.badge.vermelho{ background: var(--lo-danger-bg);  color: var(--lo-danger-text); }
.badge.azul    { background: var(--lo-blue-50);    color: var(--lo-blue-700); }
.badge.cinza   { background: var(--lo-gray-50);    color: var(--lo-gray-500); border: 1px solid var(--lo-gray-200); }

/* ── 10. Botões ─────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--lo-blue-500);
  color: #fff;
  border: none;
  border-radius: var(--lo-radius-sm);
  padding: 8px 16px;
  font-family: var(--lo-font-corpo);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s;
  white-space: nowrap;
  line-height: 1.4;
}
.btn:hover { background: var(--lo-blue-600); color: #fff; }
.btn.secundario {
  background: var(--lo-surface);
  color: var(--lo-gray-800);
  border: 1px solid var(--lo-gray-300);
}
.btn.secundario:hover { background: var(--lo-gray-50); }
.btn.perigo { background: #D64545; }
.btn.perigo:hover { background: #A32F2F; }
.btn.pequeno { padding: 5px 11px; font-size: 12px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.inline { display: inline; }

/* ── 11. Formulários (grade v2) ─────────────────── */
label {
  display: block;
  font-size: 12px; font-weight: 500;
  color: var(--lo-gray-700);
  margin-bottom: 4px;
}
input[type=text], input[type=date], input[type=number],
input[type=email], input[type=password], input[type=file],
select, textarea {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--lo-gray-300);
  border-radius: var(--lo-radius-sm);
  font-family: var(--lo-font-corpo);
  font-size: 13px;
  color: var(--lo-gray-800);
  background: var(--lo-surface);
  transition: border-color .15s, box-shadow .15s;
}
input[type=text]:focus, input[type=date]:focus, input[type=number]:focus,
select:focus, textarea:focus {
  outline: none;
  border-color: var(--lo-blue-300);
  box-shadow: 0 0 0 3px var(--lo-blue-50);
}
input[type=file] { padding: 5px 10px; cursor: pointer; }

/* Grade 12 colunas */
.form-grade {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px 18px;
  align-items: start;
}
.form-grade .campo  { grid-column: span 12; }
.form-grade .campo--2 { grid-column: span 2; }
.form-grade .campo--3 { grid-column: span 3; }
.form-grade .campo--4 { grid-column: span 4; }
.form-grade .campo--6 { grid-column: span 6; }
.form-grade .campo--8 { grid-column: span 8; }
.form-grade .campo--9 { grid-column: span 9; }

/* Linha de filtros (atalho para forms horizontais sem grade) */
.linha-filtros {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end;
  margin-bottom: 16px;
}
.linha-filtros .campo { min-width: 130px; }
.linha-filtros .campo--auto { flex: 1; min-width: 140px; }

.campo-ajuda { font-size: 11.5px; color: var(--lo-gray-400); line-height: 1.4; display: block; margin-top: 3px; }
.campo-com-botao { display: flex; gap: 8px; align-items: stretch; }
.campo-com-botao input { flex: 1; min-width: 0; }
.campo-com-botao .btn { flex-shrink: 0; }

.campo-check label {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 500; color: var(--lo-gray-800); cursor: pointer;
}
.campo-check input[type="checkbox"] { width: auto; }
.campo-check--alinhado { align-self: center; }

.lista-checkbox {
  border: 1px solid var(--lo-border);
  border-radius: var(--lo-radius-sm);
  max-height: 260px;
  overflow-y: auto;
  background: var(--lo-canvas);
}
.lista-checkbox-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  font-size: 13.5px; color: var(--lo-gray-800); cursor: pointer;
  border-bottom: 1px solid var(--lo-border);
}
.lista-checkbox-item:last-child { border-bottom: none; }
.lista-checkbox-item:hover { background: var(--lo-surface); }
.lista-checkbox-item input[type="checkbox"] { width: auto; flex-shrink: 0; }
.lista-checkbox-todas {
  background: var(--lo-surface);
  border-bottom: 1px solid var(--lo-border);
}

.acoes-form {
  display: flex; gap: 10px;
  margin-top: 22px; padding-top: 16px;
  border-top: 1px solid var(--lo-border);
}
.rodape-pagina { margin-top: 32px; }
.nota {
  font-size: 12.5px;
  color: var(--lo-gray-500);
  margin-top: 10px;
  line-height: 1.5;
}

/* Campos mini para inline dentro da tabela de conciliação */
.mini { padding: 4px 8px; font-size: 12px; }
.mini-input {
  width: 90px; padding: 4px 7px;
  border: 1px solid var(--lo-gray-300);
  border-radius: 5px;
  font-size: 12px;
}
.mini-input.hist { width: 180px; }
.mini-input:focus { outline: none; border-color: var(--lo-blue-300); }

/* ── 12. Utilitários ────────────────────────────── */
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-8  { margin-top: 8px !important; }
.mt-12 { margin-top: 12px !important; }
.mt-14 { margin-top: 14px !important; }
.mb-12 { margin-bottom: 12px !important; }
.mb-14 { margin-bottom: 14px !important; }
.mb-28 { margin-bottom: 28px !important; }
.flex-gap { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.texto-suave { font-size: 12.5px; color: var(--lo-gray-500); line-height: 1.5; }
.texto-centro { text-align: center; }

/* Telas fora do rail (login, MFA) — sem sessão ainda */
.tela-login {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: var(--lo-canvas);
  padding: 24px;
}
.caixa-login {
  width: 100%; max-width: 380px;
  background: var(--lo-surface);
  border: 1px solid var(--lo-border);
  border-radius: var(--lo-radius);
  box-shadow: var(--lo-shadow);
  padding: 32px 28px;
}
.caixa-login .marca {
  font-family: var(--lo-font-titulo); font-weight: 800; font-size: 20px;
  color: var(--lo-gray-900); text-align: center;
}
.caixa-login .marca span { color: var(--lo-blue-500); }
.caixa-login .subtitulo {
  text-align: center; font-size: 12.5px; color: var(--lo-gray-500);
  margin-bottom: 20px;
}
.caixa-login .campo { margin-bottom: 12px; }
.caixa-login .campo label {
  display: block; font-size: 12px; font-weight: 500;
  color: var(--lo-gray-700); margin-bottom: 4px;
}
.caixa-login .btn { display: block; width: 100%; text-align: center; margin-top: 6px; }
.caixa-login .codigo-mfa {
  text-align: center; font-size: 20px; letter-spacing: 6px;
  font-family: var(--lo-font-mono);
}

.qr-mfa { display: flex; justify-content: center; margin: 18px 0; }
.qr-mfa svg { width: 220px; height: 220px; }

/* ── 13. Responsividade ─────────────────────────── */
@media (max-width: 720px) {
  .form-grade { grid-template-columns: 1fr; }
  .form-grade .campo, .form-grade [class*="campo--"] { grid-column: 1 / -1; }
  .pagina { padding: 16px; }
  .topbar { left: 0; }
  .rail { display: none; }
  .pagina { margin-left: 0; }
}