/**
 * TACTUS · Estilos compartilhados
 *
 * Tokens e componentes extraídos dos protótipos aprovados, para que as 13 telas
 * parem de repetir o mesmo CSS e não divirjam visualmente com o tempo.
 */

:root {
  --bg: #F5F6F8;
  --panel: #FFFFFF;
  --line: #E4E7EC;
  --line-forte: #C7CCDA;
  --text: #14171F;
  --text-dim: #6B7280;
  --text-faint: #9CA3AF;

  --gold: #FF5500;
  --gold-bg: #FFEDE3;
  --green: #1D9A6C;
  --green-bg: #E7F7F0;
  --red: #D14343;
  --red-bg: #FBEAEA;
  --blue: #2D6FE0;
  --blue-bg: #EAF1FE;
  --purple: #7C4FE0;
  --purple-bg: #F1EAFB;

  --sidebar: #14171F;
  --sidebar-hover: #1E222C;
  --sidebar-ativo: #262B37;
  --sidebar-texto: #C7CCDA;
  --sidebar-dim: #9AA3B5;
  --sidebar-linha: #262B37;

  --sans: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* O atributo `hidden` esconde via `display:none` da folha do navegador, que
   perde para qualquer `display` declarado aqui (um `.barra-salvar{display:flex}`
   fazia a barra aparecer mesmo com hidden). Esta regra devolve a precedência. */
[hidden] { display: none !important; }

/* O navegador centraliza um <dialog> aberto com showModal() usando
   `margin: auto`. O `* { margin: 0 }` acima anulava isso e os modais colavam
   no canto superior esquerdo da tela. */
dialog {
  margin: auto;
  /* Modal alto não pode passar da tela: o conteúdo rola por dentro. */
  max-height: calc(100dvh - 48px);
}

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

.mono { font-family: var(--mono); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ==================== estrutura ==================== */

.app { display: flex; min-height: 100vh; }

.sidebar {
  width: 236px;
  background: var(--sidebar);
  color: #fff;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #2A3040 transparent;
}

.side-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px; }

/* ---------- menu recolhido (só ícones) ---------- */

.btn-recolher {
  margin-left: auto; width: 24px; height: 24px; flex-shrink: 0;
  display: grid; place-items: center;
  background: none; border: 1px solid var(--sidebar-linha); border-radius: 7px;
  color: var(--sidebar-dim); cursor: pointer; font-size: 11px; line-height: 1;
}
.btn-recolher:hover { color: #fff; border-color: #3A4354; }
.btn-recolher:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

.sidebar { transition: width .18s ease, padding .18s ease; }

.app.recolhido .sidebar { width: 68px; padding-inline: 10px; }
.app.recolhido .side-brand { justify-content: center; padding-inline: 0; }
.app.recolhido .side-brand .txt,
.app.recolhido .nav-group .grouplabel,
.app.recolhido .nav-item span:not(.ic),
.app.recolhido .side-foot .who,
.app.recolhido .side-foot .role { display: none; }

.app.recolhido .nav-item { justify-content: center; padding-inline: 0; }
.app.recolhido .nav-item .ic { width: auto; font-size: 16px; }
.app.recolhido .side-foot { justify-content: center; flex-direction: column; gap: 8px; }
.app.recolhido .side-foot .eu { justify-content: center; }

/* O botão vira uma faixa própria quando não há título ao lado dele. */
.app.recolhido .btn-recolher { margin: 8px auto 0; }
.app.recolhido .side-brand { flex-direction: column; gap: 0; }

/* Separador entre grupos, já que os rótulos somem no modo recolhido. */
.app.recolhido .nav-group + .nav-group {
  border-top: 1px solid var(--sidebar-linha); margin-top: 8px; padding-top: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}

/* Em tela estreita a barra já vira horizontal; recolher ali não faz sentido. */
@media (max-width: 900px) {
  .btn-recolher { display: none; }
  .app.recolhido .sidebar { width: 100%; padding-inline: 16px; }
  .app.recolhido .nav-item span:not(.ic),
  .app.recolhido .side-foot .who,
  .app.recolhido .side-foot .role { display: block; }
}
.side-brand .mark {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--gold); color: #14171F;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 700; font-size: 13px; flex-shrink: 0;
}
.side-brand .txt { font-weight: 700; font-size: 15px; }
.side-brand .txt small { display: block; font-weight: 400; font-size: 11px; color: var(--sidebar-dim); }

.nav-group { margin-top: 9px; }
.nav-group .grouplabel {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em;
  color: #6B7488; padding: 3px 10px; margin-top: 5px;
}

.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; border-radius: 8px;
  color: var(--sidebar-texto); font-size: 13.5px;
  cursor: pointer; text-decoration: none;
}
.nav-item .ic { width: 16px; text-align: center; flex-shrink: 0; }
.nav-item:hover { background: var(--sidebar-hover); color: #fff; }
.nav-item.active { background: var(--sidebar-ativo); color: #fff; font-weight: 600; }
.nav-item.active .ic { color: var(--gold); }
.nav-item:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

.side-foot {
  margin-top: auto; padding: 10px;
  border-top: 1px solid var(--sidebar-linha);
  display: flex; align-items: center; gap: 10px;
}
.side-foot .av {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--gold); color: #14171F; font-weight: 700;
  font-family: var(--mono); display: flex; align-items: center;
  justify-content: center; font-size: 12px; flex-shrink: 0;
}
.side-foot .eu {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: inherit; border-radius: 8px;
  padding: 4px; margin: -4px; min-width: 0;
}
.side-foot .eu:hover { background: var(--sidebar-hover); }
.side-foot .eu:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.side-foot .who { font-size: 12.5px; font-weight: 600; }
.side-foot .role { font-size: 10.5px; color: var(--sidebar-dim); }
.side-foot .sair {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--sidebar-dim); font-size: 15px; padding: 4px;
}
.side-foot .sair:hover { color: #fff; }

/* Sem max-width: o sistema ocupa a tela toda. Em monitor largo, sobrar espaço
   vazio dos dois lados não ajuda ninguém numa ferramenta de trabalho. */
.main { flex: 1; padding: 22px 28px 60px; min-width: 0; }

/* Campo de dinheiro: o "R$" fixo à esquerda evita ler 15000 como 150,00.
   O seletor duplica a classe (.input.input-moeda) de propósito: `.input` define
   `background` e `padding` como atalho e, tendo a mesma especificidade, venceria
   esta regra por vir depois no arquivo — apagando o prefixo e o recuo. */
.input.input-moeda,
.input-moeda {
  text-align: right;
  padding-left: 36px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='16'%3E%3Ctext x='1' y='12' font-family='monospace' font-size='12' font-weight='700' fill='%236B7280'%3ER$%3C/text%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 11px center;
}

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px; flex-wrap: wrap; gap: 12px;
}
.topbar h1 { font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.topbar .sub { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ==================== controles ==================== */

.btn {
  font-family: var(--sans); font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--line); background: #fff;
  padding: 8px 14px; border-radius: 8px; cursor: pointer; color: var(--text);
}
.btn:hover { border-color: var(--line-forte); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.primary { background: var(--sidebar); color: #fff; border-color: var(--sidebar); }
.btn.primary:hover { background: #20242F; }
.btn.danger { color: var(--red); border-color: #F0C4C4; }
.btn.sm { padding: 5px 10px; font-size: 11.5px; }

.select, .input {
  font-family: var(--sans); font-size: 13px; color: var(--text);
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 9px; padding: 8px 12px;
}
.select {
  cursor: pointer; appearance: none; -webkit-appearance: none; padding-right: 30px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0L5 6L10 0' fill='%239CA3AF'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center;
}
.input:focus, .select:focus { outline: 2px solid var(--gold); outline-offset: -1px; border-color: transparent; }

label.campo { display: block; }
label.campo .rotulo {
  display: block; font-size: 11px; font-weight: 600; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 5px;
}
label.campo .input, label.campo .select { width: 100%; }
label.campo.erro .input, label.campo.erro .select { border-color: var(--red); }
label.campo .msg-erro { display: none; font-size: 11px; color: var(--red); margin-top: 4px; }
label.campo.erro .msg-erro { display: block; }

/* ==================== superfícies ==================== */

.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 18px 20px;
}

.section-title { display: flex; align-items: center; justify-content: space-between; margin: 24px 0 12px; }
.section-title h2 {
  font-size: 14px; font-weight: 700; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.03em;
}

.note {
  font-size: 12px; color: var(--text-dim); background: #FAFBFC;
  border: 1px dashed var(--line); border-radius: 8px;
  padding: 10px 12px; margin: 14px 0 20px;
}
.note b { color: var(--text); }
.note.alerta { background: var(--gold-bg); border-color: #F0DBAF; color: #9A6B12; }
.note.alerta b { color: #7A5410; }

.tabela-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); max-width: 100%; }

/* Item de grid/flex tem `min-width: auto`, então não encolhe abaixo da largura
   mínima do conteúdo: uma tabela larga empurra a coluna inteira para fora da
   tela e o overflow-x da .tabela-wrap nunca chega a agir. Deixar os filhos
   encolherem é o que devolve a rolagem para dentro da tabela. */
.grid-2 > *, .painel-triplo > *, .cols > * { min-width: 0; }
table.dados { width: 100%; border-collapse: collapse; font-size: 13px; }
table.dados th {
  text-align: left; font-size: 10.5px; font-weight: 700; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 11px 14px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.dados td { padding: 11px 14px; border-bottom: 1px solid #F1F3F5; }
table.dados tr:last-child td { border-bottom: none; }
table.dados tbody tr:hover { background: #FAFBFC; }
table.dados td.num, table.dados th.num { text-align: right; }

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px;
}
.pill.ok { background: var(--green-bg); color: var(--green); }
.pill.alerta { background: var(--gold-bg); color: #9A6B12; }
.pill.ruim { background: var(--red-bg); color: var(--red); }
.pill.info { background: var(--blue-bg); color: var(--blue); }
.pill.neutro { background: #F1F3F5; color: var(--text-dim); }

.vazio { padding: 40px 20px; text-align: center; color: var(--text-faint); font-size: 13px; }

/* ==================== estados ==================== */

.carregando { position: relative; min-height: 80px; }
.carregando::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(245, 246, 248, 0.6);
  backdrop-filter: blur(1px);
  border-radius: inherit;
}

.esqueleto {
  background: linear-gradient(90deg, #EDEFF2 25%, #F5F6F8 50%, #EDEFF2 75%);
  background-size: 200% 100%;
  animation: esqueleto 1.2s ease-in-out infinite;
  border-radius: 6px; color: transparent !important;
}
@keyframes esqueleto { to { background-position: -200% 0; } }

.tactus-aviso {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
  background: var(--sidebar); color: #fff; font-size: 13px; font-weight: 500;
  padding: 12px 18px; border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,0.22);
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
  z-index: 999; max-width: min(520px, calc(100vw - 32px));
}
.tactus-aviso.visivel { opacity: 1; transform: translateX(-50%) translateY(0); }
.tactus-aviso[data-tipo="erro"] { background: var(--red); }
.tactus-aviso[data-tipo="ok"] { background: var(--green); }
.tactus-aviso[data-tipo="aviso"] { background: #9A6B12; }

/* ==================== notificações ==================== */

.sino { position: relative; background: none; border: none; cursor: pointer; font-size: 17px; padding: 6px; }
.sino .contador {
  position: absolute; top: 0; right: 0;
  background: var(--red); color: #fff; font-family: var(--mono);
  font-size: 9px; font-weight: 700; min-width: 15px; height: 15px;
  border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.notif-pop {
  position: absolute; top: 40px; right: 0; width: min(360px, calc(100vw - 32px));
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(20,23,31,0.14); z-index: 50; overflow: hidden;
}
.notif-pop header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--line);
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-dim);
}
.notif-item {
  display: flex; gap: 10px; padding: 11px 14px;
  border-bottom: 1px solid #F1F3F5; font-size: 12.5px; cursor: pointer;
}
.notif-item:hover { background: #FAFBFC; }
.notif-item.nao-lida { background: var(--gold-bg); }
.notif-item .quando { font-size: 10.5px; color: var(--text-faint); margin-top: 3px; }

/* ==================== responsivo ==================== */

/* Botão de menu: só existe no celular. */
.btn-menu {
  display: none;
  width: 38px; height: 38px; flex-shrink: 0;
  place-items: center;
  background: none; border: 1px solid var(--sidebar-linha); border-radius: 9px;
  color: #fff; cursor: pointer; font-size: 17px; line-height: 1;
}
.btn-menu:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

/* ---------- celular ----------
   Com 13 itens, a barra empilhada ocupava 386px num aparelho de 812 — quase
   metade da tela antes de aparecer qualquer número. Aqui ela vira uma faixa
   de ~58px com o botão de menu, e os itens só descem quando alguém pede. */
@media (max-width: 900px) {
  .app { flex-direction: column; }

  .sidebar {
    width: 100%; height: auto;
    position: sticky; top: 0; z-index: 40;
    flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: 10px; padding: 10px 16px;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
  }

  .side-brand { padding: 0; flex: 1 1 auto; }
  .side-brand .txt { font-size: 14px; }
  .side-brand .txt small { font-size: 10px; }

  .btn-menu { display: grid; }
  .btn-recolher { display: none; }

  /* Fechado: a faixa mostra só marca e botão. */
  .sidebar .nav-group,
  .sidebar .side-foot { display: none; }

  /* Aberto: os grupos descem, agora com rótulo — no celular há espaço
     vertical de sobra, e o rótulo ajuda a achar o item. */
  .app.menu-aberto .sidebar {
    max-height: 100dvh; overflow-y: auto;
  }
  .app.menu-aberto .sidebar .nav-group { display: block; width: 100%; margin-top: 2px; }
  .app.menu-aberto .sidebar .grouplabel { display: block; }
  .app.menu-aberto .sidebar .nav-item { padding: 10px; font-size: 14.5px; }
  .app.menu-aberto .sidebar .side-foot {
    display: flex; width: 100%; margin-top: 10px;
    border-top: 1px solid var(--sidebar-linha);
  }

  /* No celular o menu recolhido não faz sentido: quem manda é o botão. */
  .app.recolhido .sidebar { width: 100%; padding-inline: 16px; }
  .app.recolhido .nav-item span:not(.ic),
  .app.recolhido .side-foot .who,
  .app.recolhido .side-foot .role,
  .app.recolhido .side-brand .txt { display: block; }
  .app.recolhido .side-brand { flex-direction: row; }
  .app.recolhido .nav-item { justify-content: flex-start; padding: 10px; }

  .main { padding: 18px 16px 48px; }
}