/* Neue Montreal (Pangram Pangram). Sem Semibold: 600 cai no Medium. Versão de teste: licença comercial antes de publicar. */
@font-face{font-family:"Neue Montreal";src:url("../fonts/neuemontreal-light.woff2") format("woff2");font-weight:300 399;font-style:normal;font-display:swap}
@font-face{font-family:"Neue Montreal";src:url("../fonts/neuemontreal-regular.woff2") format("woff2");font-weight:400 499;font-style:normal;font-display:swap}
@font-face{font-family:"Neue Montreal";src:url("../fonts/neuemontreal-medium.woff2") format("woff2");font-weight:500 649;font-style:normal;font-display:swap}
@font-face{font-family:"Neue Montreal";src:url("../fonts/neuemontreal-bold.woff2") format("woff2");font-weight:650 900;font-style:normal;font-display:swap}
/* Fregu — base compartilhada por painel, login, páginas legais e painel do dono.
   Um caderno noturno, uma caneta laranja: preto tinta, superfícies em três camadas separadas por filetes,
   Geist 500 nos títulos, uma única ação laranja por tela; seleção (abas, filtros) é branca sobre preto. */

@font-face { font-family: "Geist"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/geist-400.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/geist-500.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/geist-600.woff2") format("woff2"); }

:root {
  /* superfícies: página → cartão → campo/controle */
  --fundo: #161316;
  --fundo-2: #1b1719;
  --fundo-3: #211c1f;
  --cartao: #261f22;
  --linha: #2e2629;        /* filete padrão (~8% de branco sobre o preto) */
  --linha-2: #3d3236;      /* filete em hover ou em destaque */
  --texto: #faf6f2;
  --texto-2: #bababa;
  --texto-3: #8f8789;
  --marca: #ff6d29;
  --marca-clara: #ff9a5c;
  --ok: #4ade80;
  --aviso: #f5b84a;
  --perigo: #ff6b6b;
  --perigo-claro: #ff9a9a;
  /* raios em três degraus */
  --r-ctl: 12px;
  --r-card: 16px;
  --r-dlg: 20px;
  --raio: var(--r-card);
  /* movimento: um só tempo e uma só curva */
  --t: .18s;
  --curva: cubic-bezier(.2, 0, 0, 1);
  /* aliases para páginas antigas */
  --borda: var(--linha); --borda-forte: var(--linha-2); --acento: var(--marca); --acento-claro: var(--marca-clara); --campo: var(--fundo-3); --erro: var(--perigo-claro);
  font-family: "Neue Montreal", "Geist", Arial, system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--fundo); color: var(--texto); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
h1, h2, h3 { font-weight: 500; letter-spacing: -.02em; line-height: 1.2; margin: 0; }
h1 { font-size: 1.45rem; letter-spacing: -.025em; }
h2 { font-size: 1.05rem; }
h3 { font-size: .95rem; }
small { font-size: .82rem; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--marca-clara); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
::selection { background: rgba(255, 109, 41, .45); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.num, .tab { font-variant-numeric: tabular-nums; }

/* ---------- ícones (sprite inline ou svg solto) ---------- */
.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.i.mini { width: 14px; height: 14px; }

/* ---------- logo ---------- */
.logo { display: inline-flex; align-items: center; font-weight: 600; font-size: 1.4rem; letter-spacing: -.05em; line-height: 1; color: var(--texto); text-decoration: none; }
.logo .moeda { display: inline-grid; place-items: center; width: .92em; height: .92em; margin: .06em .01em 0 .03em; border-radius: 50%; background: var(--marca); }
.logo .moeda svg { width: .7em; height: .7em; }

/* ---------- botões ----------
   .btn        ação principal da tela (laranja; só uma por tela)
   .btn.sec    ação secundária (superfície + filete)
   .btn.suave  ação discreta (sem fundo até o hover)
   .btn.mini   versão compacta para dentro de listas
   .btn-ic     só ícone, redondo */
.btn, .botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 1px solid transparent; border-radius: 100vw; background: var(--marca); color: #161316; font-weight: 500; font-size: .92rem; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background var(--t) var(--curva), border-color var(--t) var(--curva), color var(--t) var(--curva), opacity var(--t); }
.btn:hover { background: #ff8247; }
.btn:active { background: #cc4c10; }
.btn.sec, .botao { background: var(--fundo-3); border-color: var(--linha-2); color: var(--texto); }
.btn.sec:hover, .botao:hover { background: var(--cartao); border-color: #3a3a42; }
.btn.suave { background: transparent; border-color: transparent; color: var(--texto-2); }
.btn.suave:hover { background: var(--fundo-3); color: var(--texto); }
.btn.perigo, .botao.perigo { background: transparent; border-color: rgba(255, 107, 107, .35); color: var(--perigo-claro); }
.btn.perigo:hover, .botao.perigo:hover { background: rgba(255, 107, 107, .1); }
.btn.mini, .botao { min-height: 36px; padding: 0 14px; font-size: .84rem; }
.btn.mini { gap: 6px; }
.botao.primario { background: var(--marca); border-color: transparent; color: #161316; }
.botao.primario:hover { background: #e85a18; }
.botao.ativo { background: var(--texto); border-color: var(--texto); color: var(--fundo); }
.btn .i { width: 16px; height: 16px; }
.btn[disabled], .botao[disabled] { opacity: .5; cursor: default; pointer-events: none; }
.btn-ic { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--linha); border-radius: 50%; background: var(--fundo-2); color: var(--texto); cursor: pointer; transition: background var(--t), border-color var(--t); }
.btn-ic:hover { background: var(--fundo-3); border-color: var(--linha-2); }
.btn-ic .i { width: 18px; height: 18px; }
/* link em texto: cinza em repouso, branco no hover; laranja só em texto corrido de ajuda */
.link-btn, .link { border: 0; background: none; padding: 8px 0; color: var(--texto-2); font-weight: 500; font-size: .86rem; cursor: pointer; text-decoration: none; transition: color var(--t); }
.link-btn:hover, .link:hover { color: var(--texto); text-decoration: underline; text-underline-offset: 3px; }
.link.perigo { color: var(--perigo-claro); }
.link-btn.mini { font-size: .78rem; color: var(--texto-3); padding: 6px 0 0; }
.btn-peq { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 1px solid var(--linha-2); border-radius: 100vw; background: transparent; color: var(--texto-2); font-size: .8rem; font-weight: 500; cursor: pointer; white-space: nowrap; transition: border-color var(--t), color var(--t), background var(--t); }
.btn-peq:hover { border-color: #3a3a42; color: var(--texto); background: var(--fundo-3); }
.btn-peq.feito { border-color: var(--linha); color: var(--texto-3); }

/* ---------- segmentado (abas de filtro e de seção): branco sobre preto ---------- */
.abas, .fin-abas { display: inline-flex; gap: 2px; max-width: 100%; padding: 3px; border: 1px solid var(--linha); border-radius: 100vw; background: var(--fundo-2); overflow-x: auto; scrollbar-width: none; }
.abas::-webkit-scrollbar, .fin-abas::-webkit-scrollbar { display: none; }
.abas button, .fin-abas button { flex: none; min-height: 36px; padding: 0 14px; border: 0; border-radius: 100vw; background: none; color: var(--texto-2); font-size: .86rem; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background var(--t) var(--curva), color var(--t) var(--curva); }
.fin-abas button { min-height: 40px; padding: 0 16px; }
.abas button:hover:not([aria-pressed=true]):not([aria-selected=true]), .fin-abas button:hover:not([aria-selected=true]) { color: var(--texto); background: rgba(255, 255, 255, .05); }
.abas button[aria-pressed=true], .abas button[aria-selected=true], .fin-abas button[aria-selected=true] { background: var(--texto); color: var(--fundo); box-shadow: none; }
.abas button:focus-visible, .fin-abas button:focus-visible { outline-offset: -2px; }
.abas button span { margin-left: 5px; color: var(--texto-3); font-variant-numeric: tabular-nums; font-weight: 400; }
.abas button[aria-pressed=true] span { color: rgba(9, 9, 11, .6); }
.abas.pequenas button { min-height: 32px; padding: 0 12px; font-size: .8rem; }

/* ---------- campos ---------- */
.campo-txt, .modal input:not([type=radio]):not([type=checkbox]), .modal select, .modal textarea, .campo input, .campo select, .campo textarea, .busca input, .busca select { width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid var(--linha-2); border-radius: var(--r-ctl); background: var(--fundo-3); color: var(--texto); font-size: .95rem; transition: border-color var(--t), background var(--t); }
.modal textarea, .campo textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.modal input::placeholder, .campo input::placeholder, textarea::placeholder { color: var(--texto-3); }
.modal input:focus, .modal select:focus, .modal textarea:focus, .campo input:focus, .campo select:focus, .campo textarea:focus, .busca input:focus, .busca select:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px rgba(255, 109, 41, .22); }
.modal input[aria-invalid=true], .campo input[aria-invalid=true] { border-color: var(--perigo); }
.modal label, .campo { display: grid; gap: 6px; font-size: .82rem; font-weight: 500; color: var(--texto-2); }
select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a1a1aa' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px !important; }
input[type=checkbox], input[type=radio] { accent-color: var(--marca); }

/* ---------- cartão ---------- */
.card, .painel-card { background: var(--fundo-2); border: 1px solid var(--linha); border-radius: var(--r-card); padding: 20px; min-width: 0; }
.card > h2, .card-topo h2 { font-size: .95rem; font-weight: 500; color: var(--texto-2); letter-spacing: 0; }
.card > h2 { margin: 0 0 14px; }
.card-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.card-topo h2 { margin: 0; }
.card .card { background: var(--fundo-3); }

/* ---------- cabeçalho de página ---------- */
.topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; row-gap: 10px; margin-bottom: 18px; }
.topo h1 { margin: 0 auto 0 0; }
.topo-txt { margin-right: auto; }
.topo-txt h1 { margin: 0; }
.sub-topo { margin: 2px 0 0; color: var(--texto-3); font-size: .9rem; }

/* ---------- navegação de mês ---------- */
.mes-nav { display: inline-flex; align-items: center; border: 1px solid var(--linha); border-radius: 100vw; background: var(--fundo-2); }
.mes-nav strong { min-width: 150px; text-align: center; font-size: .9rem; font-weight: 500; }
.mes-nav strong::first-letter { text-transform: uppercase; }
.mes-nav button { width: 42px; height: 42px; border: 0; background: none; color: var(--texto-2); font-size: 1.3rem; cursor: pointer; border-radius: 50%; transition: background var(--t), color var(--t); }
.mes-nav button:hover { background: var(--fundo-3); color: var(--texto); }
.mes-nav button[disabled] { opacity: .35; cursor: default; }

/* ---------- etiquetas e chips de estado ---------- */
.etiqueta, .tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border: 1px solid var(--linha-2); border-radius: 100vw; font-size: .74rem; font-weight: 500; color: var(--texto-2); white-space: nowrap; line-height: 1.5; }
.etiqueta.marca { border-color: rgba(255, 109, 41, .45); color: var(--marca-clara); }
.etiqueta.ok { border-color: rgba(74, 222, 128, .35); color: var(--ok); }
.etiqueta.ruim { border-color: rgba(255, 107, 107, .35); color: var(--perigo-claro); }
.etiqueta.espera { border-color: rgba(245, 184, 74, .4); color: var(--aviso); }
.breve-tag { display: inline-flex; align-items: center; padding: 1px 8px; border: 1px solid var(--linha-2); border-radius: 100vw; color: var(--texto-3); font-size: .72rem; font-weight: 500; }

/* ---------- faixas de estado (informação, atenção, ok) ---------- */
.faixa, .faixa-estado, .fa-aviso, .imp-novos, .modo { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--linha-2); border-left: 3px solid var(--texto-3); border-radius: var(--r-ctl); background: var(--fundo-2); color: var(--texto-2); font-size: .88rem; line-height: 1.45; }
.faixa.atencao, .faixa-estado:not(.ok), .fa-aviso, .modo { border-left-color: var(--aviso); color: var(--texto-2); }
.faixa.ok, .faixa-estado.ok { border-left-color: var(--ok); }
.faixa.marca, .imp-novos { border-left-color: var(--marca); }
.faixa strong { color: var(--texto); font-weight: 500; }

/* ---------- vazio: título, uma frase e a próxima ação ---------- */
.vazio { display: grid; justify-items: center; gap: 6px; text-align: center; color: var(--texto-2); padding: 36px 20px; border: 1px dashed var(--linha-2); border-radius: var(--r-card); }
.vazio h2 { margin: 0; font-size: 1.1rem; color: var(--texto); }
.vazio p { margin: 0 auto; max-width: 40ch; font-size: .92rem; }
.vazio .btn, .vazio .btn-peq { margin-top: 10px; }
.vazio-p, .vazio-lista { color: var(--texto-3); font-size: .9rem; margin: 6px 0; }
.vazio-lista { text-align: center; padding: 28px 10px; }
.vazio-lista .btn { margin-top: 10px; }
.dica { color: var(--texto-3); font-size: .82rem; margin: 10px 0 0; }

/* ---------- diálogo ---------- */
dialog.modal, dialog.paleta, .admin dialog { border: 1px solid var(--linha-2); border-radius: var(--r-dlg); background: var(--fundo-2); color: var(--texto); padding: 0; margin: auto; width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .7); }
dialog::backdrop { background: rgba(3, 3, 6, .7); backdrop-filter: blur(4px); }
dialog.modal[open], .admin dialog[open] { animation: dlg-entra .22s var(--curva); }
@keyframes dlg-entra { from { opacity: 0; transform: translateY(8px) scale(.985); } }
.modal form, .dlg-corpo, .admin dialog form { display: grid; gap: 14px; padding: 22px; }
.modal h2, .modal .dlg-corpo h2, .admin dialog h3 { margin: 0 0 2px; font-size: 1.15rem; letter-spacing: -.02em; color: var(--texto); }
.acoes { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.acoes span { flex: 1; }
.admin .acoes { justify-content: flex-end; }

/* ---------- tabela ---------- */
.tabela { overflow-x: auto; margin: 0 -4px; }
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--linha); color: var(--texto-3); font-size: .74rem; font-weight: 500; letter-spacing: .02em; white-space: nowrap; }
td { padding: 12px 10px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: rgba(255, 255, 255, .025); }
td.num, th.num { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
td small { display: block; color: var(--texto-3); font-size: .76rem; }

/* ---------- aviso rápido (toast) ---------- */
.aviso-toast, .toast, .aviso.ver, .aviso[data-toast] { position: fixed; left: 50%; bottom: 24px; z-index: 60; }
.toast { translate: -50% 0; display: none; padding: 10px 18px; border: 1px solid var(--linha-2); border-radius: 100vw; background: var(--cartao); color: var(--texto); font-size: .9rem; font-weight: 500; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .8); }

/* ---------- interruptor ---------- */
.sw { display: flex; align-items: center; gap: 12px; flex: 1; min-height: 44px; cursor: pointer; font-size: .92rem; }
.sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sw-b, .interruptor { position: relative; flex: none; width: 42px; height: 24px; padding: 0; border: 1px solid transparent; border-radius: 100vw; background: #3a3a42; transition: background var(--t); cursor: pointer; }
.sw-b::after, .interruptor::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: translate var(--t) var(--curva), transform var(--t) var(--curva); }
.sw input:checked + .sw-b, .interruptor[aria-checked=true] { background: var(--marca); }
.sw input:checked + .sw-b::after, .interruptor[aria-checked=true]::after { translate: 18px 0; }
.sw input:focus-visible + .sw-b { outline: 2px solid var(--marca-clara); outline-offset: 2px; }

/* ---------- ícone em quadrado (categoria, conta, lançamento) ---------- */
.tile { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--r-ctl); color: color-mix(in srgb, var(--cor, var(--texto-2)) 55%, #fff); background: color-mix(in srgb, var(--cor, var(--texto-2)) 22%, var(--fundo)); border: 1px solid color-mix(in srgb, var(--cor, var(--texto-2)) 40%, transparent); }

/* ---------- barras de progresso (um só traço) ---------- */
.barra-fina { display: block; height: 6px; border-radius: 100vw; background: rgba(255, 255, 255, .08); overflow: hidden; }
.barra-fina i { display: block; height: 100%; border-radius: inherit; background: var(--cor, var(--marca)); }

/* ---------- faixa de números: um cartão só, dividido por filetes (substitui a grade de azulejos) ---------- */
.rot { display: block; color: var(--texto-3); font-size: .82rem; margin-bottom: 4px; }
.nums-faixa { display: flex; border: 1px solid var(--linha); border-radius: var(--r-card); background: var(--fundo-2); overflow-x: auto; scrollbar-width: none; }
.nums-faixa::-webkit-scrollbar { display: none; }
.nums-item { flex: 1 1 0; min-width: 124px; display: grid; align-content: start; gap: 3px; padding: 14px 18px; color: inherit; text-decoration: none; border-left: 1px solid var(--linha); transition: background var(--t); }
.nums-item:first-child { border-left: 0; }
a.nums-item:hover { background: var(--fundo-3); }
.nums-item .rot, .nums-item > span:first-child { display: block; margin: 0; color: var(--texto-3); font-size: .78rem; font-weight: 500; }
.nums-item strong { font-size: 1.35rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.nums-item strong em { font-style: normal; color: var(--texto-3); font-size: .95rem; }
.nums-item small { color: var(--texto-3); font-size: .78rem; }
@media (max-width: 600px) { .nums-item { padding: 12px 14px; min-width: 108px; } .nums-item strong { font-size: 1.15rem; } }

/* ---------- lista de linhas separadas por filete ---------- */
.linhas > * + * { border-top: 1px solid var(--linha); }

/* ---------- carregando: três linhas que pulsam, em vez de texto solto ---------- */
.esqueleto { display: grid; gap: 10px; }
.esqueleto i { display: block; height: 14px; border-radius: 7px; background: var(--fundo-3); animation: pulsa 1.2s ease-in-out infinite; }
.esqueleto i:nth-child(1) { width: 40%; height: 22px; } .esqueleto i:nth-child(2) { width: 100%; } .esqueleto i:nth-child(3) { width: 70%; }
@keyframes pulsa { 50% { opacity: .45; } }

/* ---------- movimento ---------- */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* acento do logo: o "e" com o chevron laranja, como no Freguês */
.logo .ac, .pb-logo .ac { position: relative; display: inline-block; }
.logo .ac::before, .pb-logo .ac::before { content: ""; position: absolute; left: 50%; top: .13em; width: .21em; height: .21em; border-top: .085em solid var(--marca, var(--acento)); border-left: .085em solid var(--marca, var(--acento)); transform: translateX(-50%) rotate(45deg); border-radius: .02em; }

/* superfícies do navegador que também levam a marca */
html { scrollbar-color: var(--linha-2) transparent; scrollbar-width: thin; }
input, textarea, select { caret-color: var(--marca); accent-color: var(--marca); }

/* laranja vivo: o degradê da marca gira devagar na ação principal */
@keyframes laranja-vivo { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.btn:not(.sec):not(.suave):not(.perigo):not(.mini) { background: linear-gradient(115deg, #c43a0c, #ff6d29 30%, #ffa86e 50%, #ff6d29 70%, #c43a0c); background-size: 300% 100%; animation: laranja-vivo 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .btn:not(.sec):not(.suave):not(.perigo):not(.mini) { animation: none; background-position: 50% 50%; } }

/* "assistente" pequeno ao lado do nome: a marca Fregu vai ter outros produtos */
.logo .logo-sub { align-self: flex-end; margin: 0 0 .14em .34em; font-size: .44em; font-weight: 500; letter-spacing: -.005em; line-height: 1; color: var(--texto-3); }