/* Central Santafe - mesmo "livro-caixa" da Conferencia (achromatic-ledger, seed 857620988):
   moldura sem cor, tinta sobre pedra, Poppins no texto e IBM Plex Mono em todo numero.
   O dourado da marca vai num dado so: o tempo que o cliente esta esperando a Santafe.

   Grade: barra lateral 240 + tela fluida com 32 de margem, vao unico de 16.
   Conversas: lista 380 + 16 + detalhe (1fr). Em 1440: 240 + 32 + 380 + 16 + 740 + 32 = 1440.
   Semana: quadro de 5 numeros (divisorias de 1px) e, embaixo, 2fr 1fr. */

@font-face { font-family: "Poppins"; src: url("/arquivos/Poppins-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/arquivos/Poppins-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/arquivos/Poppins-Light.ttf") format("truetype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/arquivos/Poppins-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

/* Tema Santafe "vidro dourado" (06/11/2026, pedido do Mattheus: "fria, sem cor,
   sem animacao"). Referencia: Admin Dashboard V5 do code.xr (fundo em degrade,
   cartoes claros translucidos, barras em pilula com uma em destaque, anel de
   progresso), traduzido pro preto e dourado da marca. Fundo escuro com brilho
   dourado; cartoes de vidro creme com tinta escura; o dourado em degrade marca
   o dado principal de cada cartao. */
:root {
  color-scheme: light;
  --ground: #120f0a;
  --surface: rgba(255, 252, 246, .94);
  --raised: rgba(255, 255, 255, .78);
  --active: rgba(201, 158, 70, .16);
  --border: rgba(255, 255, 255, .7);
  --rule: rgba(70, 52, 20, .1);
  --control: rgba(70, 52, 20, .2);
  --text: #1f1a12;
  --muted: #74695a;
  --primary: #c9a04a;
  --primary-ink: #1b150b;
  --gold: #c9a04a;
  --gold-ink: #8c6a1f;
  --gold-pale: rgba(227, 196, 126, .35);
  --degrade: linear-gradient(135deg, #f1d58f 0%, #d4a94f 45%, #a87a2a 100%);
  --brilho: 0 8px 24px rgba(201, 150, 50, .45);
  --negative: #c8402f;
  --grafico-base: rgba(70, 52, 20, .12);
  --sobre-fundo: #fbf3e2;
  --sobre-fundo-calmo: rgba(251, 243, 226, .74);
  --vidro-escuro: rgba(20, 16, 10, .58);
  --sombra-cartao: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 18px 40px -18px rgba(30, 20, 5, .55);
  --pill-positive-bg: rgba(201, 160, 74, .2); --pill-positive-ink: #7a5a14;
  --pill-negative-bg: rgba(200, 64, 47, .13); --pill-negative-ink: #a8301f;
  --pill-warning-bg: rgba(224, 138, 60, .16); --pill-warning-ink: #9a520f;
  --pill-neutral-bg: rgba(70, 52, 20, .08); --pill-neutral-ink: #5d5345;
  --bolha-cliente: rgba(255, 255, 255, .75);
  --bolha-nossa: #f3e4bf;

  --font: "Poppins", system-ui, "Segoe UI", sans-serif;
  --mono: "Poppins", system-ui, sans-serif;
  --fs-title: 24px; --fs-kpi: 24px; --fs-body: 14px; --fs-small: 12px;
  --sidebar: 240px; --pad: 32px; --gap: 16px;
  --radius-card: 22px; --radius-control: 999px; --radius-chip: 999px;
  --control-height: 44px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--text); font: 400 var(--fs-body)/20px var(--font); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; letter-spacing: 0; }
.muted { color: var(--muted); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: 4px; }

/* ---------------------------------------------------------------- controles */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--control-height); padding: 0 16px; border-radius: var(--radius-control); border: 1px solid var(--control); background: var(--surface); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background 150ms var(--ease), transform 120ms var(--ease); }
.botao:hover { background: var(--raised); }
.botao:active { transform: translateY(1px); }
.botao.primario { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); font-weight: 600; }
.botao.primario:hover { background: var(--gold-ink); }
.botao.fantasma { border-color: transparent; background: transparent; }
.botao.fantasma:hover { background: var(--active); }
.botao[disabled] { opacity: .5; cursor: default; }
select.campo, input.campo, textarea.campo { min-height: var(--control-height); border: 1px solid var(--control); border-radius: var(--radius-control); background: var(--surface); padding: 0 12px; }
textarea.campo { padding: 11px 12px; resize: vertical; line-height: 20px; }

.chip { flex: none; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--radius-chip); font-size: 12px; font-weight: 500; white-space: nowrap; }
.chip.bom { background: var(--pill-positive-bg); color: var(--pill-positive-ink); }
.chip.ruim { background: var(--pill-negative-bg); color: var(--pill-negative-ink); }
.chip.atencao { background: var(--pill-warning-bg); color: var(--pill-warning-ink); }
.chip.neutro { background: var(--pill-neutral-bg); color: var(--pill-neutral-ink); }

/* ---------------------------------------------------------------- entrada */
.entrada { min-height: 100svh; display: grid; place-items: center; padding: 24px 16px; }
.entrada-caixa { width: min(380px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 32px 28px; display: grid; gap: 14px; }
.entrada-caixa img { width: 180px; height: auto; margin-bottom: 8px; }
.entrada-caixa h1 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; }
.entrada-caixa p { margin: -8px 0 6px; }
.entrada-caixa label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.entrada-caixa input { min-height: var(--control-height); border: 1px solid var(--control); border-radius: var(--radius-control); padding: 0 12px; font-size: 16px; color: var(--text); background: var(--surface); }
.erro { color: var(--negative); margin: 0; min-height: 20px; }

/* ---------------------------------------------------------------- moldura */
.shell { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100vh; }
.lateral { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 24px 12px 16px; }
.lateral .marca { display: block; padding: 0 12px 6px; }
.lateral .marca img { width: 168px; height: auto; display: block; }
.lateral .escopo { padding: 0 12px; margin: 10px 0 28px; color: var(--muted); font-size: var(--fs-small); line-height: 16px; }
.nav { display: grid; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; border-radius: 8px; text-decoration: none; color: var(--muted); transition: background 150ms var(--ease), color 150ms; }
.nav a svg { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; }
.nav a:hover { background: var(--raised); color: var(--text); }
.nav a[aria-current="page"] { background: var(--active); color: var(--text); }
.nav .conta { margin-left: auto; font-family: var(--mono); font-size: var(--fs-small); color: var(--gold-ink); font-weight: 500; }
.nav .fora { margin-left: auto; font-size: 11px; color: var(--muted); }
.lateral .rodape { margin-top: auto; padding: 16px 12px 0; color: var(--muted); font-size: var(--fs-small); line-height: 17px; display: grid; gap: 2px; justify-items: start; }
.lateral .rodape b { color: var(--text); font-weight: 600; font-size: 13px; }
.link-sair { margin-top: 6px; min-height: 44px; padding: 0; background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; }
.tela { min-width: 0; padding: 32px var(--pad) 48px; }
.topo-celular, .menu-folha { display: none; }

/* ---------------------------------------------------------------- titulo */
.titulo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 20px; }
.titulo h1 { margin: 0; font-size: var(--fs-title); line-height: 32px; font-weight: 600; letter-spacing: -0.01em; }
.titulo .sub { margin: 4px 0 0; color: var(--text); font-size: 15px; line-height: 22px; max-width: 72ch; }
.titulo .sub .num { white-space: nowrap; font-family: var(--font); color: var(--gold-ink); font-weight: 600; }
.titulo .sub.calmo { color: var(--muted); }
.segmento { display: inline-flex; background: var(--active); border-radius: 8px; padding: 3px; gap: 2px; }
.segmento button { min-height: 38px; padding: 0 14px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; }
.segmento button[aria-pressed="true"] { background: var(--surface); color: var(--text); font-weight: 600; }
.alerta-fora { background: var(--pill-negative-bg); color: var(--pill-negative-ink); border-radius: var(--radius-card); padding: 12px 16px; margin-bottom: 16px; }

/* ---------------------------------------------------------------- conversas */
.caixa { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: var(--gap); align-items: start; }
.lista-painel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; position: sticky; top: 16px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; }
.filtros { display: flex; gap: 6px; padding: 12px; overflow-x: auto; scrollbar-width: none; flex: none; }
.filtros::-webkit-scrollbar { display: none; }
.filtros button { flex: none; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; white-space: nowrap; }
.filtros button[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.filtros button .num { margin-left: 6px; }
.busca { padding: 0 12px 12px; flex: none; }
.busca input { width: 100%; min-height: 40px; border: 1px solid var(--border); border-radius: var(--radius-control); padding: 0 12px; background: var(--raised); }
.linhas { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
.linha { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 16px; border-top: 1px solid var(--rule); cursor: pointer; text-align: left; width: 100%; background: none; border-left: 0; border-right: 0; border-bottom: 0; }
.linha:hover { background: var(--raised); }
.linha[aria-current="true"] { background: var(--active); }
.inicial { grid-row: span 2; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 13px; color: var(--text); }
.linha .nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha .quando { font-size: 12px; color: var(--muted); text-align: right; white-space: nowrap; }
.linha .quando.espera { color: var(--gold-ink); font-weight: 500; }
.linha .previa { grid-column: 2; color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha .marcas { grid-column: 3; display: flex; justify-content: flex-end; }
.vazio { padding: 32px 20px; color: var(--muted); text-align: center; }

.detalhe { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); min-height: 480px; display: flex; flex-direction: column; }
.detalhe-vazio { margin: 48px auto auto; padding: 48px 24px; text-align: center; color: var(--muted); max-width: 40ch; }
.cab { display: flex; gap: 12px 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; padding: 20px 20px 16px; border-bottom: 1px solid var(--rule); }
.cab h2 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; }
.cab .meta { margin: 2px 0 0; color: var(--muted); font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.cab .meta a { color: var(--text); display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; }
.espera-cab { color: var(--gold-ink); font-weight: 600; }
.voltar { display: none; }
.comandos { display: flex; flex-wrap: wrap; gap: 8px; }
.comandos label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }

.corpo { display: grid; grid-template-columns: minmax(0, 1fr) 300px; flex: 1; min-height: 0; }
.conversa { padding: 20px; display: flex; flex-direction: column; gap: 10px; min-width: 0; background: var(--raised); border-bottom-left-radius: var(--radius-card); }
.dia { align-self: center; font-size: 12px; color: var(--muted); margin: 6px 0; }
.bolha { max-width: 78%; padding: 10px 14px; border-radius: 10px; line-height: 21px; white-space: pre-wrap; overflow-wrap: anywhere; }
.bolha.cliente { align-self: flex-start; background: var(--bolha-cliente); border: 1px solid var(--border); }
.bolha.bot, .bolha.equipe { align-self: flex-end; background: var(--bolha-nossa); }
.bolha .autor { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.bolha .hora { display: block; font-size: 11px; color: var(--muted); text-align: right; margin-top: 4px; font-family: var(--mono); }
.responder { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: auto; padding-top: 12px; }
.responder textarea { min-height: 44px; max-height: 160px; }
.responder small { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }

.ficha { padding: 20px; border-left: 1px solid var(--rule); display: grid; gap: 20px; align-content: start; }
.ficha h3 { margin: 0 0 10px; font-size: 14px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.kv { margin: 0; display: grid; gap: 0; }
.kv div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-top: 1px solid var(--rule); }
.kv div:first-child { border-top: 0; }
.kv dt { color: var(--muted); font-size: 12px; line-height: 18px; }
.kv dd { margin: 0; font-size: 13px; line-height: 18px; overflow-wrap: anywhere; }
.kv .solto { grid-template-columns: 1fr; }
.resumo-acao { min-height: 36px; padding: 0 10px; font-size: 13px; }
.notas { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.notas li { font-size: 13px; line-height: 19px; }
.notas li.sistema { color: var(--muted); }
.notas .por { display: block; font-size: 11px; color: var(--muted); }
.nova-nota { display: grid; gap: 8px; }

/* ---------------------------------------------------------------- semana */
.quadro { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); margin-bottom: var(--gap); }
.quadro > div { padding: 18px 20px; border-left: 1px solid var(--border); min-width: 0; }
.quadro > div:first-child { border-left: 0; }
.quadro dt { color: var(--muted); font-size: 13px; margin-bottom: 6px; }
.quadro dd { margin: 0; font: 400 var(--fs-kpi)/30px var(--mono); font-variant-numeric: tabular-nums; }
.quadro dd small { font: 400 13px/18px var(--font); color: var(--muted); margin-left: 4px; }
.quadro .nota-kpi { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.semana-grade { display: grid; grid-template-columns: 2fr 1fr; gap: var(--gap); align-items: start; }
.painel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 20px; min-width: 0; }
.painel h2 { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.painel .sub { margin: 0 0 16px; color: var(--muted); font-size: 13px; }
.legenda { display: flex; gap: 16px; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.grafico svg { width: 100%; height: auto; display: block; }
.ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ranking li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
.ranking .barra { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--rule); overflow: hidden; }
.ranking .barra i { display: block; height: 100%; background: var(--gold); border-radius: 3px; }
.ranking .num { text-align: right; }
.conexoes { list-style: none; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--rule); display: grid; gap: 8px; }
.conexoes li { display: flex; justify-content: space-between; gap: 12px; align-items: center; }

/* ---------------------------------------------------------------- locacao
   Arranjo da Kenlo Locacao (menu por assunto, numeros no topo, lista em tabela,
   ficha do contrato em blocos), no livro-caixa da Central.
   Painel em 1440: canvas 1136 = 2fr (749) + 16 + 1fr (371); linha 2: 560 + 16 + 560. */
.grupo-nav { margin: 18px 12px 6px; font-size: 12px; color: var(--muted); }
.grupo-nav:first-child { margin-top: 0; }
.quadro-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.loc-grade { display: grid; grid-template-columns: 2fr 1fr; grid-template-areas: "rea seg" "gar pra"; gap: var(--gap); align-items: stretch; }
.loc-reajustes { grid-area: rea; }
.loc-grade > section:nth-child(2) { grid-area: seg; }
.loc-grade > section:nth-child(3) { grid-area: gar; }
.loc-grade > section:nth-child(4) { grid-area: pra; }
.painel-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.painel-cab h2 { margin: 0; }
.painel-cab a { flex: none; white-space: nowrap; color: var(--text); font-size: 13px; min-height: 44px; display: inline-flex; align-items: center; margin: -12px 0; }
.lista-pend { list-style: none; margin: 0; padding: 0; }
.lista-pend li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--rule); }
.lista-pend li:first-child { border-top: 0; }
.lista-pend a { text-decoration: none; min-width: 0; display: grid; min-height: 44px; align-content: center; }
.lista-pend a:hover .lin-titulo { text-decoration: underline; }
.lin-titulo { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lin-sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-pend .chip { max-width: 190px; overflow: hidden; text-overflow: ellipsis; }

.barra-filtros { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.barra-filtros .filtros { padding: 0; }
.barra-filtros .busca { padding: 0; flex: 0 1 360px; }
.barra-filtros .busca input { background: var(--surface); }
.painel-tabela { padding: 4px 0 0; }
.painel-tabela .painel-cab { padding: 16px 20px 0; }
.tabela-rolagem { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela th { text-align: left; font-weight: 400; font-size: 12px; color: var(--muted); padding: 10px 12px; white-space: nowrap; }
.tabela td { padding: 10px 12px; border-top: 1px solid var(--rule); vertical-align: top; }
.tabela th:first-child, .tabela td:first-child { padding-left: 20px; }
.tabela th:last-child, .tabela td:last-child { padding-right: 20px; }
.tabela .n { text-align: right; white-space: nowrap; }
.tabela td a { font-weight: 600; text-decoration: none; display: inline-flex; min-height: 24px; align-items: center; }
.tabela td a:hover { text-decoration: underline; }
.tabela tr[data-ir] { cursor: pointer; }
@media (hover: hover) { .tabela tr[data-ir]:hover td { background: var(--raised); } }
.sub-cel { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.tabela .n .sub-cel { text-align: right; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
/* Mesmas larguras em todas as tabelas de reajuste, pra os meses alinharem um embaixo do outro */
.tabela-reajuste { table-layout: fixed; }
.tabela-reajuste .c-data { width: 128px; }
.tabela-reajuste .c-ind { width: 150px; }
.tabela-reajuste .c-val { width: 150px; }
.tabela-reajuste td:first-child a, .tabela-reajuste td:first-child .sub-cel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.tabela-reajuste td:first-child a { display: block; }
.tabela-contratos td:first-child { min-width: 240px; }
.rodape-tabela { margin: 0; padding: 12px 20px 16px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 12px; }
.fonte { margin: 20px 0 0; color: var(--muted); font-size: 12px; max-width: 90ch; }
.tel { font-weight: 400 !important; }
.mes-reajuste { margin-bottom: var(--gap); }
.indices { display: flex; gap: 24px; margin: 0; }
.indices div { display: grid; gap: 2px; }
.indices dt { font-size: 12px; color: var(--muted); }
.indices dd { margin: 0; font-size: 16px; }

/* ---------------------------------------------------------------- painel de analise
   Ideia do Open Property (MIT): "o mes numa tela so". Em 1440: canvas 1136 =
   destaque 2fr (749) + 16 + atrasados 1fr (371); linha 2 = 3 x 368 + 2 x 16. */
.titulo-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.seletor-mes { display: inline-flex; align-items: center; gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-control); }
.seletor-mes .botao { min-width: 44px; padding: 0; font-size: 18px; }
.mes-nome { min-width: 150px; text-align: center; font-weight: 600; }
.analise { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); align-items: stretch; margin-bottom: 32px; }
.analise > .destaque { grid-column: span 2; }
.destaque { display: flex; flex-direction: column; gap: 14px; }
.destaque .regua { flex: 1; display: flex; flex-direction: column; }
.destaque .regua-pista { flex: 1; min-height: 72px; }
.botao.ouro-contorno { border-color: rgba(209, 173, 92, .55); color: var(--gold-ink); background: transparent; }
.botao.ouro-contorno:hover { background: var(--gold-pale); border-color: var(--gold); }
.destaque .painel-cab { margin-bottom: 0; }
.valor-grande { margin: 0; font-size: 40px; line-height: 48px; font-weight: 600; color: var(--gold-ink); letter-spacing: -0.01em; }
.barra-mes { height: 8px; border-radius: 4px; background: var(--active); overflow: hidden; }
.barra-mes i { display: block; height: 100%; width: 100%; background: var(--gold); border-radius: 4px; transform-origin: left; transform: scaleX(var(--p)); animation: crescer 1100ms var(--ease) both; }
.barra-mes.fina { height: 4px; margin-top: 12px; }
@keyframes crescer { from { transform: scaleX(0); } }
.trio { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 4px 0 0; }
.trio dt { color: var(--muted); font-size: 12px; line-height: 16px; }
.trio dd { margin: 4px 0 0; font-size: 17px; font-weight: 600; }
.neg { color: var(--negative) !important; }
.ouro { color: var(--gold-ink) !important; }
.titulo-secao { font-size: 16px; font-weight: 600; margin: 0 0 12px; }
.loc-grade-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); align-items: stretch; }

/* regua do mes: os vencimentos como pontos sobre os dias */
.regua { margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--rule); }
.regua-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.regua-cab h3 { margin: 0; font-size: 13px; font-weight: 600; }
.regua .legenda { margin: 0; flex-wrap: wrap; gap: 12px; }
.ponto-leg { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.regua-pista { position: relative; height: 72px; margin: 18px 6px 0; }
.coluna-dia { position: absolute; bottom: 1px; width: 12px; margin-left: -6px; display: flex; flex-direction: column-reverse; gap: 2px; text-decoration: none; transform-origin: bottom; animation: subir 700ms var(--ease) both; animation-delay: calc(var(--i) * 50ms + 150ms); }
.coluna-dia i { display: block; min-height: 3px; border-radius: 2px; }
.coluna-dia i.pago { background: var(--gold); }
.coluna-dia i.parcial { background: #d9823b; }
.coluna-dia i.atrasado { background: var(--negative); }
.coluna-dia i.aberto { background: var(--grafico-base); }
.coluna-dia::after { content: ""; position: absolute; inset: -8px -10px; }
.coluna-dia:hover i, .coluna-dia:focus-visible i { filter: brightness(1.25); }
.conta-dia { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 3px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.regua-linha { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--control); }
.ponto { position: absolute; width: 10px; height: 10px; margin: 0 0 4px -5px; border-radius: 50%; animation: cair 500ms var(--ease) both; animation-delay: calc(var(--i) * 40ms + 200ms); transition: transform 150ms var(--ease); }
.ponto::after { content: ""; position: absolute; inset: -12px; }
.ponto:hover, .ponto:focus-visible { transform: scale(1.5); }
.ponto.pago, .ponto-leg.pago { background: var(--gold); }
.ponto.parcial, .ponto-leg.parcial { background: #d9823b; }
.ponto.atrasado, .ponto-leg.atrasado { background: var(--negative); }
.ponto.aberto, .ponto-leg.aberto { background: var(--grafico-base); }
@keyframes cair { from { opacity: 0; transform: translateY(-12px); } }
.hoje { position: absolute; top: -6px; bottom: 0; width: 1px; background: var(--gold); }
.hoje b { position: absolute; top: -14px; left: 4px; font-size: 11px; font-weight: 500; color: var(--gold-ink); }
.regua-dias { position: relative; height: 18px; margin: 6px 6px 0; font-size: 11px; color: var(--muted); }
.regua-dias span { position: absolute; transform: translateX(-50%); }

/* recebido nos ultimos 6 meses */
.hist { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; align-items: end; height: 150px; }
.hist-col { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: 6px; text-align: center; }
.hist-trilho { align-self: end; position: relative; background: var(--active); border-radius: 3px 3px 0 0; min-height: 4px; overflow: hidden; }
.hist-trilho i { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background: var(--gold); transform-origin: bottom; transform: scaleY(var(--p)); animation: subir 900ms var(--ease) both; animation-delay: calc(var(--i) * 60ms); }
@keyframes subir { from { transform: scaleY(0); } }
.hist-col span { font-size: 11px; color: var(--muted); }
.nota-hist { font-size: 12px; margin: 10px 0 0; }

.linha-alu { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--rule); }
.linha-alu:first-of-type { border-top: 0; }
.linha-alu a { text-decoration: none; display: grid; min-width: 0; min-height: 44px; align-content: center; }
.linha-alu a:hover .lin-titulo { text-decoration: underline; }
.sub-bloco { margin: 16px 0 2px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 13px; font-weight: 600; color: var(--muted); }
.direita { text-align: right; display: grid; font-weight: 600; }
.direita .lin-sub { font-weight: 400; }
.kv-carteira div { grid-template-columns: minmax(0, 1fr) auto; }
.kv-carteira dd { text-align: right; }

/* ---------------------------------------------------------------- alugueis do mes */
.quadro-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.botao.pequeno { min-height: 36px; padding: 0 12px; font-size: 13px; }
.acao-alu { text-align: right; white-space: nowrap; }
.acao-alu .botao { margin-left: 4px; }
.tabela-alu td { vertical-align: middle; }
.tabela-alu td:first-child { min-width: 220px; }
.entra { animation: entrar 420ms var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes entrar { from { opacity: 0; transform: translateY(10px); } }
.mudou td { animation: brilho 1200ms var(--ease); }
@keyframes brilho { from { background: var(--gold-pale); } }

/* quadro de registrar pagamento (dialog nativo) */
.quadro-dialogo { width: min(560px, calc(100vw - 32px)); max-height: calc(100svh - 32px); overflow: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); padding: 24px; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
.quadro-dialogo[open] { animation: abrir 220ms var(--ease); }
.quadro-dialogo::backdrop { background: rgba(0, 0, 0, .62); }
@keyframes abrir { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.quadro-dialogo h2 { margin: 0 0 14px; font-size: 20px; }
.quadro-resumo { display: grid; gap: 4px; background: var(--raised); border-radius: 8px; padding: 14px 16px; margin-bottom: 16px; font-size: 13px; }
.quadro-resumo b { font-weight: 600; font-size: 14px; }
.form-quadro { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-quadro label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.form-quadro .campo { width: 100%; color: var(--text); font-size: 15px; }
.quadro-botoes { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.pagamentos { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; }
.pagamentos li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 13px; }
.pagamentos .num { font-weight: 600; }
.repasse-feito { font-size: 13px; color: var(--muted); }

.voltar-loc { margin: -8px 0 8px -12px; }
.pend-topo { display: flex; flex-wrap: wrap; gap: 6px; margin: -8px 0 16px; }
.ficha-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: stretch; }
.ficha-grade .kv div { grid-template-columns: 160px minmax(0, 1fr); }
.ficha-grade .painel h2, .obs h2 { margin-bottom: 10px; }
.pessoas { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.pessoa > b { display: block; margin-bottom: 6px; }
.obs { margin-top: var(--gap); }
.obs p { margin: 0; white-space: pre-wrap; }

/* ---------------------------------------------------------------- questionario
   Uma coluna de leitura (760) alinhada a esquerda do canvas, como um formulario de papel. */
.questionario { max-width: 760px; }
.q-estado { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.q-secao { margin-bottom: var(--gap); display: grid; gap: 20px; }
.q-secao > h2 { margin: 0; font-size: 18px; }
.q-secao > .sub { margin: -12px 0 0; }
.q { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.q legend { padding: 0; margin-bottom: 8px; display: grid; gap: 4px; }
.q-texto { font-weight: 600; font-size: 15px; line-height: 22px; }
.q-ajuda { color: var(--muted); font-size: 13px; line-height: 19px; font-weight: 400; }
.q .campo { width: 100%; font-size: 15px; }
.q textarea.campo { min-height: 88px; }
.q-opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.opcao { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border: 1px solid var(--control); border-radius: var(--radius-control); background: var(--surface); cursor: pointer; }
.opcao:has(input:checked) { border-color: var(--primary); background: var(--active); font-weight: 600; }
.opcao input { width: 18px; height: 18px; margin: 0; accent-color: var(--primary); }
.q-outro { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; margin-top: 8px; color: var(--muted); font-size: 13px; }
.q-lista { display: grid; gap: 12px; }
.q-linha { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.2fr auto; gap: 8px; align-items: end; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.q-linha label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); min-width: 0; }
.q-lista + .botao { justify-self: start; }
.q-contratos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.q-contratos li { padding: 16px 0; border-top: 1px solid var(--rule); }
.q-contratos li:first-child { border-top: 0; padding-top: 0; }
.q-contratos fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.q-contratos legend { display: grid; gap: 2px; padding: 0; margin-bottom: 10px; }
.q-fim { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 8px 0 24px; }
.q-fim p { margin: 0; }

/* ---------------------------------------------------------------- aviso */
.aviso { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px); background: var(--primary); color: var(--primary-ink); padding: 12px 18px; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity 200ms var(--ease), transform 200ms var(--ease); box-shadow: 0 6px 20px rgba(0,0,0,.14); max-width: calc(100vw - 32px); }
.aviso.ver { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------------------- tablet */
@media (max-width: 1280px) {
  .corpo { grid-template-columns: 1fr; }
  .ficha { border-left: 0; border-top: 1px solid var(--rule); order: -1; }
  .conversa { border-bottom-left-radius: var(--radius-card); border-bottom-right-radius: var(--radius-card); }
}
@media (max-width: 1100px) {
  .shell { grid-template-columns: 1fr; }
  .lateral { display: none; }
  .topo-celular { display: flex; position: sticky; top: 0; z-index: 5; height: 56px; align-items: center; justify-content: space-between; padding: 0 16px; background: var(--ground); border-bottom: 1px solid var(--border); }
  .topo-celular .marca { display: flex; align-items: center; min-height: 44px; }
  .topo-celular .marca img { width: 128px; height: auto; display: block; }
  .menu-folha:not([hidden]) { display: grid; gap: 8px; position: fixed; inset: 56px 0 0; z-index: 6; background: var(--ground); padding: 16px; align-content: start; }
  .tela { padding: 20px 20px 40px; }
  .caixa { grid-template-columns: 320px minmax(0, 1fr); }
  .quadro { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .quadro > div:nth-child(4) { border-left: 0; }
  .quadro > div:nth-child(n+4) { border-top: 1px solid var(--border); }
  .semana-grade { grid-template-columns: 1fr; }
  .quadro-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quadro-4 > div:nth-child(3) { border-left: 0; }
  .quadro-4 > div:nth-child(n+3) { border-top: 1px solid var(--border); }
  .quadro-4 > div:nth-child(4) { border-left: 1px solid var(--border); }
  .loc-grade { grid-template-columns: 1fr 1fr; grid-template-areas: "rea rea" "seg gar" "pra pra"; }
  .titulo .indices { width: 100%; }
  /* sem a barra lateral a tabela perde ~300px: saem as colunas que a ficha mostra */
  .tabela-contratos th:nth-child(3), .tabela-contratos td:nth-child(3),
  .tabela-contratos th:nth-child(5), .tabela-contratos td:nth-child(5),
  .tabela-pessoas th:nth-child(4), .tabela-pessoas td:nth-child(4) { display: none; }
  .tabela-contratos td:first-child { min-width: 0; }
  .tabela th, .tabela td { padding-left: 8px; padding-right: 8px; }
  .analise { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analise > .destaque { grid-column: 1 / -1; }
  .analise > section:nth-child(5) { grid-column: 1 / -1; }
  .loc-grade-3 { grid-template-columns: 1fr; }
  /* alugueis: botoes descem pra uma linha propria embaixo de cada aluguel */
  .tabela-alu thead { display: none; }
  .tabela-alu, .tabela-alu tbody, .tabela-alu tr, .tabela-alu td { display: block; }
  .tabela-alu tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 6px 20px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--rule); }
  .tabela-alu tr:first-child { border-top: 0; }
  .tabela-alu td, .tabela-alu td:first-child, .tabela-alu td:last-child { border: 0; padding: 0; }
  .tabela-alu .acao-alu { grid-column: 1 / -1; text-align: left; }
  .tabela-alu .acao-alu .botao:first-child { margin-left: 0; }
  .quadro-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .quadro-5 > div:nth-child(4) { border-left: 0; }
  .quadro-5 > div:nth-child(n+4) { border-top: 1px solid var(--border); }
}

/* ---------------------------------------------------------------- celular: um painel por vez */
@media (max-width: 760px) {
  .tela { padding: 16px 16px 32px; }
  .titulo h1 { font-size: 22px; }
  .titulo .segmento { width: 100%; }
  .titulo .segmento button { flex: 1; }
  .caixa { grid-template-columns: 1fr; }
  .lista-painel { position: static; max-height: none; }
  .caixa.aberta .lista-painel { display: none; }
  .caixa:not(.aberta) .detalhe { display: none; }
  .voltar { display: inline-flex; margin: 0 0 -4px -8px; }
  .cab { padding: 16px; }
  .comandos { width: 100%; }
  .comandos .botao, .comandos select { flex: 1 1 140px; }
  .comandos label { flex: 1 1 100%; }
  .comandos label select { flex: 1; }
  .conversa, .ficha { padding: 16px; }
  .bolha { max-width: 90%; }
  .quadro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quadro > div { border-left: 0; border-top: 1px solid var(--border); }
  .quadro > div:nth-child(-n+2) { border-top: 0; }
  .quadro > div:nth-child(even) { border-left: 1px solid var(--border); }
  .quadro > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .kv div { grid-template-columns: 96px minmax(0, 1fr); }

  /* locacao: cada linha da tabela vira um bloco, sem rolagem lateral */
  .loc-grade { grid-template-columns: 1fr; grid-template-areas: "rea" "seg" "gar" "pra"; }
  .ficha-grade { grid-template-columns: 1fr; }
  .barra-filtros .busca { flex: 1 1 100%; }
  .barra-filtros .filtros { width: 100%; flex-wrap: wrap; overflow: visible; }
  .quadro-4 dd { font-size: 19px; }
  .analise { grid-template-columns: 1fr; }
  .analise > section:nth-child(5) { grid-column: auto; }
  .valor-grande { font-size: 32px; line-height: 40px; }
  .trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .titulo-acoes { width: 100%; }
  .seletor-mes { flex: 1; justify-content: space-between; }
  .titulo-acoes > .botao { flex: 1; }
  .quadro-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quadro-5 > div { border-left: 0 !important; border-top: 1px solid var(--border); }
  .quadro-5 > div:nth-child(-n+2) { border-top: 0; }
  .quadro-5 > div:nth-child(even) { border-left: 1px solid var(--border) !important; }
  .quadro-5 > div:last-child { grid-column: 1 / -1; }
  .quadro-5 dd { font-size: 19px; }
  .tabela-alu td:first-child { min-width: 0; }
  .tabela-alu .acao-alu { grid-column: 1 / -1; text-align: left; white-space: normal; display: flex; flex-wrap: wrap; gap: 6px; }
  .tabela-alu .acao-alu .botao { margin: 0; flex: 1 1 auto; min-height: 44px; }
  .form-quadro { grid-template-columns: 1fr; }
  .quadro-dialogo { padding: 20px 16px; }
  .regua-dias span:nth-child(2), .regua-dias span:nth-child(4), .regua-dias span:nth-child(6) { display: none; }
  .q-linha { grid-template-columns: 1fr 1fr; }
  .q-linha .botao { grid-column: 1 / -1; justify-self: start; }
  .opcao { width: 100%; }
  .q-contratos .q-opcoes { display: grid; grid-template-columns: 1fr 1fr; }
  .q-contratos .opcao { padding: 8px 12px; line-height: 18px; }
  .quadro-4 > div { padding: 14px 16px; }
  .tabela thead { display: none; }
  .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; width: 100%; }
  .tabela tr { padding: 12px 16px; border-top: 1px solid var(--rule); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .tabela tr:first-child { border-top: 0; }
  .tabela td, .tabela td:first-child, .tabela td:last-child { border: 0; padding: 0; width: auto; }
  .tabela td:first-child { grid-column: 1 / -1; min-width: 0; }
  .tabela .n { text-align: left; }
  .tabela .n .sub-cel { text-align: left; }
  .tabela td:empty { display: none; }
  .tabela-contratos td:nth-child(2), .tabela-contratos td:nth-child(3), .tabela-contratos td:nth-child(5) { display: none; }
  .tabela-contratos td:nth-child(6) { text-align: right; }
  .tabela-contratos td:last-child { grid-column: 1 / -1; }
  .rodape-tabela { padding: 12px 16px; }
  .painel-tabela .painel-cab { padding: 16px 16px 0; }
  .indices { gap: 16px; flex-wrap: wrap; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .lista-painel { position: static; max-height: none; }
}

/* ================================================================ vidro dourado
   Camada do tema novo. Fundo: noite com dois brilhos dourados que respiram
   devagar. Barra lateral e topo do celular em vidro escuro; telas em cartoes de
   vidro creme. Numero de destaque: Poppins Bold, "R$" e centavos menores. */
body { background: var(--ground); min-height: 100svh; }
body::before { content: ""; position: fixed; inset: -20%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(50% 45% at 80% 8%, rgba(236, 192, 100, .85), transparent 70%),
    radial-gradient(45% 50% at 15% 95%, rgba(190, 125, 40, .7), transparent 70%),
    radial-gradient(40% 35% at 55% 50%, rgba(160, 110, 38, .5), transparent 70%),
    linear-gradient(160deg, #1b150c 0%, #120f0a 55%, #0d0b08 100%);
  animation: respirar 18s ease-in-out infinite alternate; }
@keyframes respirar { to { transform: translate3d(-3%, 2%, 0) scale(1.06); } }

.painel, .lista-painel, .detalhe, .quadro, .entrada-caixa, .quadro-dialogo {
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--sombra-cartao);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); }
.painel { border-radius: var(--radius-card); padding: 22px; transition: transform 260ms var(--ease), box-shadow 260ms var(--ease); }
@media (hover: hover) { .analise > .painel:hover, .loc-grade-3 > .painel:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 28px 50px -20px rgba(30, 20, 5, .65); } }
.painel h2 { font-size: 16px; letter-spacing: -0.01em; }

/* moldura escura */
.lateral { margin: 12px 0 12px 12px; height: calc(100vh - 24px); top: 12px; border-radius: 26px; background: var(--vidro-escuro); border: 1px solid rgba(255, 230, 180, .1);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: var(--sobre-fundo); }
.lateral .escopo, .grupo-nav, .lateral .rodape, .link-sair { color: var(--sobre-fundo-calmo); }
.lateral .rodape b { color: var(--sobre-fundo); }
.nav a { color: var(--sobre-fundo-calmo); border-radius: 999px; }
.nav a:hover { background: rgba(255, 240, 210, .08); color: var(--sobre-fundo); }
.nav a[aria-current="page"] { background: var(--degrade); color: var(--primary-ink); font-weight: 600; box-shadow: var(--brilho); }
.nav a[aria-current="page"] .fora, .nav a[aria-current="page"] .conta { color: var(--primary-ink); }
.nav .conta { color: #f1d58f; }
.nav .fora { color: var(--sobre-fundo-calmo); }
.grupo-nav { text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }

/* titulo sobre o fundo */
.titulo h1 { color: var(--sobre-fundo); font-size: 30px; line-height: 38px; font-weight: 700; letter-spacing: -0.02em; }
.titulo .sub, .titulo .sub.calmo { color: var(--sobre-fundo-calmo); }
.titulo .sub .num { color: #f1d58f; }
.titulo-secao { color: var(--sobre-fundo); font-size: 18px; font-weight: 700; margin-top: 8px; }
.fonte { color: var(--sobre-fundo-calmo); }
.alerta-fora { border-radius: 16px; }

/* controles */
.botao { border-color: var(--control); background: rgba(255, 255, 255, .55); color: var(--text); }
.botao:hover { background: rgba(255, 255, 255, .85); }
.botao.primario { background: var(--degrade); border-color: transparent; color: var(--primary-ink); box-shadow: var(--brilho); }
.botao.primario:hover { background: var(--degrade); filter: brightness(1.06); transform: translateY(-1px); }
.botao.fantasma { background: transparent; border-color: transparent; }
.botao.fantasma:hover { background: var(--active); }
.botao.ouro-contorno { border-color: rgba(168, 122, 42, .5); color: var(--gold-ink); background: rgba(255, 255, 255, .5); font-weight: 600; }
.botao.ouro-contorno:hover { background: var(--degrade); color: var(--primary-ink); border-color: transparent; }
.titulo .botao, .titulo-acoes .botao { min-height: 44px; }
.seletor-mes { background: rgba(255, 250, 240, .14); border: 1px solid rgba(255, 240, 210, .22); border-radius: 999px; color: var(--sobre-fundo); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.seletor-mes .botao { color: var(--sobre-fundo); border-radius: 999px; }
.seletor-mes .botao:hover { background: rgba(255, 240, 210, .12); }
select.campo, input.campo, textarea.campo, .busca input, .entrada-caixa input { background: rgba(255, 255, 255, .7); border-color: var(--control); border-radius: 14px; color: var(--text); }
.chip { height: 24px; padding: 0 10px; font-weight: 600; }
.filtros button { background: rgba(255, 250, 240, .14); border-color: rgba(255, 240, 210, .22); color: var(--sobre-fundo); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.filtros button[aria-pressed="true"] { background: var(--degrade); border-color: transparent; color: var(--primary-ink); font-weight: 600; box-shadow: var(--brilho); }
.lista-painel .filtros button { background: rgba(255, 255, 255, .6); border-color: var(--control); color: var(--muted); }
.lista-painel .filtros button[aria-pressed="true"] { background: var(--degrade); color: var(--primary-ink); }
.barra-filtros .busca input { background: rgba(255, 250, 240, .9); }

/* entrada: vidro escuro com a logo dourada */
.entrada-caixa { background: var(--vidro-escuro); border-color: rgba(255, 230, 180, .14); color: var(--sobre-fundo); border-radius: 26px; }
.entrada-caixa label, .entrada-caixa .muted { color: var(--sobre-fundo-calmo); }
.entrada-caixa .erro { color: #ff9a90; }

/* destaque: valor grande + anel */
.destaque-topo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.destaque-num { display: grid; gap: 8px; min-width: 0; }
.selo { justify-self: start; display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--active); color: var(--gold-ink); font-size: 12px; font-weight: 600; }
.valor-grande { font-size: 52px; line-height: 58px; font-weight: 700; letter-spacing: -0.03em; color: var(--text); white-space: nowrap; }
.valor-grande .rs { font-size: .42em; font-weight: 500; color: var(--gold-ink); margin-right: 6px; letter-spacing: 0; vertical-align: .55em; }
.valor-grande .cent { font-size: .5em; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.destaque-de { margin: 0; color: var(--muted); font-size: 13px; }
.destaque-de b { color: var(--text); }
.barra-mes { height: 10px; border-radius: 999px; background: var(--grafico-base); }
.barra-mes i { background: var(--degrade); border-radius: 999px; box-shadow: var(--brilho); }
.barra-mes.fina { height: 8px; }
.anel { position: relative; width: 148px; height: 148px; display: grid; place-content: center; text-align: center; }
.anel svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.anel circle { fill: none; stroke-width: 12; }
.anel-trilho { stroke: var(--grafico-base); }
.anel-fio { stroke: url(#g-anel); stroke-linecap: round; stroke-dashoffset: var(--alvo); filter: drop-shadow(0 4px 10px rgba(201, 150, 50, .55)); animation: desenhar 1400ms var(--ease) both 200ms; }
@keyframes desenhar { from { stroke-dashoffset: var(--c); } }
.anel b { font-size: 30px; line-height: 32px; font-weight: 700; letter-spacing: -0.02em; }
.anel span { font-size: 12px; color: var(--muted); }

/* blocos de numero (kpi), como os cartoes do V5: icone em circulo dourado */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpi { position: relative; display: grid; gap: 4px; align-content: start; padding: 16px; border-radius: 18px; background: var(--raised); border: 1px solid rgba(255, 255, 255, .8); min-width: 0; transition: transform 220ms var(--ease), box-shadow 220ms var(--ease); }
@media (hover: hover) { .kpi:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -14px rgba(30, 20, 5, .5); } }
.kpi .ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--degrade); box-shadow: 0 6px 14px rgba(201, 150, 50, .4); margin-bottom: 8px; }
.kpi .ico svg { width: 16px; height: 16px; fill: none; stroke: #1b150b; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.kpi-rot { font-size: 12px; color: var(--muted); line-height: 16px; }
.kpi-val { font-size: 21px; line-height: 28px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }
.kpi-val .rs { font-size: .6em; font-weight: 500; color: var(--muted); margin-right: 3px; }
.kpi-val .cent { font-size: .66em; font-weight: 600; color: var(--muted); }
.kpi-val small { font-size: 13px; font-weight: 400; color: var(--muted); }
.kpi.ruim .ico { background: linear-gradient(135deg, #f08a76, #c8402f); box-shadow: 0 6px 14px rgba(200, 64, 47, .35); }
.kpi.ruim .ico svg { stroke: #fff; }
.kpi.ruim .kpi-val { color: var(--negative); }
.kpi.ouro-kpi { background: var(--degrade); border-color: transparent; box-shadow: var(--brilho); }
.kpi.ouro-kpi .ico { background: #1b150b; box-shadow: none; }
.kpi.ouro-kpi .ico svg { stroke: #f1d58f; }
.kpi.ouro-kpi .kpi-rot, .kpi.ouro-kpi .rs, .kpi.ouro-kpi .cent { color: rgba(27, 21, 11, .72); }
.kpis-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 18px; }
.kpis-5 .kpi { background: var(--surface); border-color: var(--border); box-shadow: var(--sombra-cartao); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.kpis-5 .kpi.ouro-kpi { background: var(--degrade); }

/* quadros antigos (semana, contratos) no mesmo vidro */
.quadro { border-radius: var(--radius-card); overflow: hidden; }
.quadro > div { border-color: var(--rule) !important; }
.quadro dd { font-weight: 700; letter-spacing: -0.02em; }

/* regua: pilulas por dia */
.regua { border-top-color: var(--rule); }
.coluna-dia { width: 14px; margin-left: -7px; gap: 3px; }
.coluna-dia i { border-radius: 999px; min-height: 6px; }
.coluna-dia i.pago, .ponto-leg.pago { background: var(--degrade); }
.coluna-dia i.pago { box-shadow: 0 0 12px rgba(212, 169, 79, .7); }
.coluna-dia i.parcial, .ponto-leg.parcial { background: #e08a3c; }
.coluna-dia i.atrasado, .ponto-leg.atrasado { background: linear-gradient(180deg, #f08a76, #c8402f); box-shadow: 0 0 12px rgba(200, 64, 47, .45); }
.coluna-dia i.aberto, .ponto-leg.aberto { background: rgba(70, 52, 20, .18); }
.conta-dia { font-weight: 600; color: var(--text); }
.regua-linha { background: var(--rule); }
.hoje { background: var(--gold-ink); width: 2px; border-radius: 2px; }
.hoje b { color: #fff; background: #1b150b; padding: 1px 8px; border-radius: 999px; top: -20px; left: -18px; font-size: 10px; }

/* recebido nos ultimos 6 meses: pilulas, o mes atual em degrade com balao */
.hist { height: 190px; gap: 14px; padding-top: 30px; }
.hist-trilho { border-radius: 999px; background: rgba(201, 158, 70, .12); overflow: visible; }
.hist-trilho i { border-radius: 999px; background: linear-gradient(180deg, rgba(232, 198, 120, .75), rgba(201, 158, 70, .55)); }
.hist-col.atual .hist-trilho { background: rgba(212, 169, 79, .18); }
.hist-col.atual .hist-trilho i { background: var(--degrade); box-shadow: var(--brilho); animation: subir 900ms var(--ease) both, pulsar 2.6s ease-in-out 1.2s infinite; }
@keyframes pulsar { 50% { box-shadow: 0 8px 30px rgba(212, 169, 79, .8); } }
.balao { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: #1b150b; color: #f1d58f; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; animation: entrar 500ms var(--ease) both 700ms; }
.balao::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -4px; border: 4px solid transparent; border-top-color: #1b150b; }
.hist-col span { font-weight: 500; }
.hist-col.atual > span { color: var(--text); font-weight: 700; }

/* listas e tabelas dentro do vidro */
.linha-alu, .lista-pend li, .tabela td, .rodape-tabela, .sub-bloco { border-color: var(--rule); }
.direita.neg, .num.neg { color: var(--negative); }
.painel-cab a { color: var(--gold-ink); font-weight: 600; text-decoration: none; }
.painel-cab a:hover { text-decoration: underline; }
@media (hover: hover) { .tabela tr[data-ir]:hover td, .tabela-alu tbody tr:hover td { background: rgba(255, 255, 255, .55); } }
.painel-tabela { overflow: hidden; }
.quadro-resumo { background: rgba(255, 255, 255, .6); border-radius: 16px; }
.quadro-dialogo { border-radius: 26px; background: rgba(255, 250, 240, .96); }
.quadro-dialogo::backdrop { background: rgba(12, 9, 5, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.aviso { background: var(--degrade); border-radius: 999px; box-shadow: var(--brilho); font-weight: 600; }
.opcao { background: rgba(255, 255, 255, .6); border-radius: 14px; }
.opcao:has(input:checked) { background: var(--active); border-color: var(--gold); }
.conversa { background: rgba(255, 255, 255, .35); }
.inicial { color: #fff; }

@media (max-width: 1100px) {
  .topo-celular { background: var(--vidro-escuro); border-bottom: 1px solid rgba(255, 230, 180, .1); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
  .topo-celular .botao { color: var(--sobre-fundo); }
  .menu-folha:not([hidden]) { background: rgba(18, 14, 9, .94); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
  .menu-folha .botao { color: var(--sobre-fundo); }
  .kpis-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tabela-alu tr { border-color: var(--rule); }
}
@media (max-width: 760px) {
  .titulo h1 { font-size: 24px; line-height: 30px; }
  .painel { padding: 18px 16px; border-radius: 20px; }
  .destaque-topo { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  .valor-grande { font-size: 34px; line-height: 40px; }
  .anel { width: 96px; height: 96px; }
  .anel b { font-size: 20px; line-height: 22px; }
  .anel span { font-size: 10px; }
  .anel circle { stroke-width: 14; }
  .kpis, .kpis-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpis-5 > .kpi:last-child { grid-column: 1 / -1; }
  .kpi { padding: 14px; }
  .kpi .ico { width: 30px; height: 30px; margin-bottom: 4px; }
  .kpi-val { font-size: 18px; }
  .hist { height: 160px; gap: 8px; }
  .kv-carteira div { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (max-width: 400px) {
  .valor-grande { font-size: 30px; }
  .anel { width: 84px; height: 84px; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }