/* FinanceOps do Hotel Rotorua Inn. TODAS AS CORES FICAM AQUI EM CIMA.
   Identidade (19/10/2026, o logo novo da A THE ONE): verde escuro no menu e na entrada, o verde da marca nos botoes,
   links e destaques, o verde vivo sobre o escuro. As cores que dizem algo nos numeros nao mudaram: o laranja do que
   falta, o azul da tarja da planilha, as cores das empresas e o vermelho do teto. O verde do que entrou passou a ser o
   da marca (#0b7a50): contra o laranja, diferenca 16,6 para protan e 30,2 normal no validador de paleta.
   Contrastes: marca 5,4:1 com branco; tinta-3 5,6:1 sobre a pagina; verde vivo 9,1:1 sobre o menu.
   O verde e o laranja dos graficos sao separados por claridade (o par de antes de 16/10, #5f9e45/#ea7f2c, era igual
   para quem tem daltonismo vermelho-verde). */
@font-face { font-family: "Plus Jakarta Sans"; src: url("/static/fonte-jakarta.woff2") format("woff2");
  font-weight: 400 800; font-display: swap; }

:root {
  --menu: #05211a; --menu-escuro: #031510; --menu-texto: #eaf6f0; --menu-apagado: #a2c2b5;
  --menu-ativo: rgba(34, 215, 150, .14);
  --marca: #0b7a50; --marca-escuro: #075c3c;     /* o verde da marca sobre o claro: botao, link, destaque */
  --marca-viva: #22d796;                         /* o verde vivo sobre o escuro (menu, entrada) */
  --marca-clara: #a9d6c1;                        /* o verde claro das barras de apoio (os dias do robo) */
  --marca-fundo: #e7f2ec;                        /* o fundo verde bem claro da tarja de cada dia (tinta 14:1) */
  --pagina: #f2f6f4; --cartao: #ffffff; --cartao-2: #f6faf8; --linha: #e1e9e5; --linha-2: #cbd8d1;
  --tinta: #0e2219; --tinta-2: #4a5a52; --tinta-3: #56655e;   /* tinta-3: 5,6:1 sobre a pagina, 6,1:1 sobre branco */
  /* dinheiro */
  --entrou: #0b7a50;  --entrou-texto: #0b7a50;     /* 5,4:1 sobre branco */
  --falta: #ec9330;   --falta-texto: #9a4f0a;      /* texto 5,6:1 sobre branco */
  --taxa: #4a6fa5;    --taxa-texto: #34557f;
  /* empresas (validadas juntas: azul, verde-agua, violeta) */
  --rotorua: #2a78d6; --gw: #1baf7a; --yes7: #6250d6; --outro: #9aa5b1;
  /* situacoes: sempre com icone e palavra */
  --ok-texto: #166534;   --ok-fundo: #dcfce7;
  --erro-texto: #991b1b; --erro-fundo: #fee2e2;  --erro-forte: #c62828;
  --neutro-texto: #475569; --neutro-fundo: #eef2f6;
  --aviso-fundo: #fff4e5; --aviso-texto: #7a4100;
  /* gastos */
  --gasto: #123a63; --gasto-claro: #a9bdd6; --gasto-vermelho: #dc2626; --gasto-vermelho-claro: #f5a3a3;
  --gasto-maximo: #b91c1c; --gasto-maximo-claro: #ef8f8f;
  /* a tarja azul da planilha (TOTAL FATURADO), como ela aparece no A receber: texto branco 8,1:1 */
  --tarja: #1d4e89; --tarja-apagado: #c9d8ec; --tarja-ok: #9be7a7; --tarja-erro: #ffb4b4;
  --sombra: 0 1px 2px rgba(5, 33, 26, .06), 0 4px 16px rgba(5, 33, 26, .05);
  --raio: 16px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-size: 15px; color: var(--tinta);
  background: var(--pagina); -webkit-font-smoothing: antialiased; }
a { color: var(--marca); }
h1, h2, p { margin: 0; }
.icone { width: 20px; height: 20px; flex: none; }
.num, .numero-grande, .lc-valor, .ec-linha strong, .g-valor, td { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- moldura e menu */
.app { display: grid; grid-template-columns: 88px 1fr; min-height: 100vh; }
.menu { background: var(--menu); color: var(--menu-texto); position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; align-items: center; padding: 16px 8px; gap: 18px; }
.marca { text-decoration: none; }
.marca .logo-f { display: block; width: 46px; height: 46px; filter: drop-shadow(0 4px 12px rgba(34, 215, 150, .28)); }
.marca:hover .logo-f { filter: drop-shadow(0 4px 16px rgba(34, 215, 150, .45)); }
.nome-marca { font-weight: 800; letter-spacing: -.035em; white-space: nowrap; }
.nome-marca b { font-weight: 800; color: var(--marca); }
.menu-itens { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.menu-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 4px;
  border-radius: 12px; color: var(--menu-apagado); text-decoration: none; font-size: 11.5px; font-weight: 600;
  text-align: center; line-height: 1.2; }
.menu-item .icone { width: 22px; height: 22px; }
.menu-item:hover { color: var(--menu-texto); background: rgba(255, 255, 255, .06); }
.menu-item.ativo { color: #fff; background: var(--menu-ativo); }
.menu-item.ativo .icone:first-child { color: var(--marca-viva); }
.menu-cadeado { position: absolute; top: 6px; right: 14px; width: 13px !important; height: 13px !important; }
.menu-item:focus-visible, .menu-sair:focus-visible, .marca:focus-visible { outline: 2px solid var(--marca-viva); outline-offset: 2px; }
.menu-pe { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff;
  color: var(--menu); font-weight: 800; }
.menu-sair { display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: 0;
  color: var(--menu-apagado); font: inherit; font-size: 11px; cursor: pointer; padding: 4px; border-radius: 8px; }
.menu-sair:hover { color: #fff; }
.menu-sair .icone { width: 18px; height: 18px; }

.conteudo { padding: 22px 32px 48px; max-width: 1760px; width: 100%; min-width: 0; }   /* min-width: a tabela larga rola dentro do cartao, e nao a pagina */
.topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.topo h1 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.sub { color: var(--tinta-2); font-size: 14px; margin-top: 3px; display: flex; align-items: center; gap: 6px; }
.sub-cadeado { width: 15px; height: 15px; }
.topo-direita { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.mes { display: flex; align-items: center; gap: 4px; background: var(--cartao); border-radius: 999px; padding: 4px;
  box-shadow: var(--sombra); }
.mes strong { min-width: 170px; text-align: center; font-size: 15px; }
.mes-seta { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--tinta); }
.mes-seta:hover { background: var(--pagina); }
.mes-seta.desligada { color: var(--linha-2); }

.abas { display: flex; background: var(--cartao); border-radius: 999px; padding: 4px; box-shadow: var(--sombra); }
.aba { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; color: var(--tinta-2);
  text-decoration: none; font-weight: 600; font-size: 14px; }
.aba:hover { color: var(--tinta); }
.aba.ativa { background: var(--marca); color: #fff; }

/* ---------------------------------------------------------------- pecas */
.ponto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; margin-right: 6px;
  vertical-align: 0; }
.ponto.rotorua, .emp-rotorua, .serie-emp-rotorua { background: var(--rotorua); fill: var(--rotorua); }
.ponto.gw, .emp-gw, .serie-emp-gw { background: var(--gw); fill: var(--gw); }
.ponto.yes7, .emp-yes7, .serie-emp-yes7 { background: var(--yes7); fill: var(--yes7); }
.ponto.outro { background: var(--outro); }
.serie-entrou { background: var(--entrou); fill: var(--entrou); }
.serie-falta { background: var(--falta); fill: var(--falta); }
.serie-taxa { background: var(--taxa); fill: var(--taxa); }
.verde { color: var(--entrou-texto); }
.laranja { color: var(--falta-texto); }
.taxa { color: var(--taxa-texto); }

.cartao { background: var(--cartao); border-radius: var(--raio); padding: 20px 24px; box-shadow: var(--sombra); margin-top: 16px; }
.cartao-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cartao-cab h2 { font-size: 16px; font-weight: 700; }
.cab-nota { color: var(--tinta-3); font-size: 13px; }
.vazio { color: var(--tinta-2); padding: 18px 0; }

.selo { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px;
  font-weight: 700; white-space: nowrap; }
.selo .icone { width: 15px; height: 15px; }
.selo.ok { background: var(--ok-fundo); color: var(--ok-texto); }
.selo.erro { background: var(--erro-fundo); color: var(--erro-texto); }
.selo.neutro { background: var(--neutro-fundo); color: var(--neutro-texto); }
.selo.aviso { background: var(--aviso-fundo); color: var(--aviso-texto); }
.selo.maximo { background: var(--gasto-maximo); color: #fff; letter-spacing: .02em; animation: pulsa 1.6s ease-in-out infinite; }
@keyframes pulsa { 0%, 100% { box-shadow: 0 0 0 0 rgba(185, 28, 28, .45); } 50% { box-shadow: 0 0 0 6px rgba(185, 28, 28, 0); } }
@media (prefers-reduced-motion: reduce) { .selo.maximo { animation: none; } }

.trilho { position: relative; display: flex; height: 10px; border-radius: 999px; background: var(--neutro-fundo); }
.trilho i { display: block; height: 100%; }
.trilho i + i { margin-left: 2px; }
.trilho i:first-child { border-radius: 999px 0 0 999px; }
.trilho i:last-of-type { border-radius: 0 999px 999px 0; }
.trilho i:only-of-type { border-radius: 999px; }

.legenda { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--tinta-2); margin-bottom: 8px; align-items: center; }
.legenda span { display: inline-flex; align-items: center; }
.legenda .regra { margin-left: auto; color: var(--tinta-3); }

.aviso-leitura { display: flex; gap: 8px; align-items: center; background: var(--aviso-fundo); color: var(--aviso-texto);
  padding: 10px 14px; border-radius: 12px; font-size: 14px; margin-bottom: 12px; }
.aviso-leitura.erro { background: var(--erro-fundo); color: var(--erro-texto); }
.recado { display: flex; gap: 8px; align-items: center; background: var(--ok-fundo); color: var(--ok-texto);
  padding: 10px 14px; border-radius: 12px; font-size: 14px; font-weight: 600; margin-bottom: 12px; }

/* ---------------------------------------------------------------- numeros grandes */
.herois { display: grid; grid-template-columns: auto auto 1fr; gap: 12px 56px; align-items: end; margin: 6px 0 4px; }
.herois.um { grid-template-columns: 1fr; }
.rotulo { display: flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--tinta-2); margin-bottom: 2px; }
.rotulo .icone { width: 16px; height: 16px; margin-right: 6px; }
.numero-grande { display: inline-flex; align-items: baseline; font-weight: 800; letter-spacing: -.035em; line-height: 1.05;
  color: var(--tinta); white-space: nowrap; }
.ng-rs { font-size: 22px; color: var(--tinta-3); margin-right: 6px; letter-spacing: 0; }
.ng-reais { font-size: 54px; }
.ng-cents { font-size: 26px; }
.ng-sinal { font-size: 40px; margin-right: 4px; }
.numero-grande.verde, .numero-grande.verde .ng-rs { color: var(--entrou-texto); }
.numero-grande.laranja, .numero-grande.laranja .ng-rs { color: var(--falta-texto); }
.numero-grande.taxa, .numero-grande.taxa .ng-rs { color: var(--taxa-texto); }
.numero-grande .ng-rs { opacity: .75; }
.heroi-nota { color: var(--tinta-2); font-size: 13.5px; margin-top: 4px; }
.miudos { display: flex; gap: 28px; justify-content: flex-end; margin: 0; flex-wrap: wrap; align-self: end; padding-bottom: 22px; }
.miudos div { text-align: right; }
.miudos dt { font-size: 12.5px; color: var(--tinta-3); }
.miudos dd { margin: 2px 0 0; font-weight: 800; font-size: 16px; }
.miudos dd a { font-size: 12.5px; font-weight: 600; margin-left: 6px; color: var(--marca); }
.miudos small { font-weight: 600; color: var(--tinta-3); font-size: 12px; }

/* ---------------------------------------------------------------- atualizacao diaria (robo) */
.robo { display: flex; align-items: center; gap: 16px; background: var(--cartao); border-radius: var(--raio);
  padding: 14px 20px; box-shadow: var(--sombra); margin: 4px 0 18px; }
.robo-icone { width: 34px; height: 34px; padding: 6px; border-radius: 10px; background: var(--neutro-fundo); color: var(--marca); }
.robo-texto { flex: 1; font-size: 14px; }
.robo-titulo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 13px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--tinta-2); margin-bottom: 3px; }
.robo-lido { color: var(--tinta-3); font-size: 12.5px; margin-top: 2px; }
.mini { display: flex; gap: 6px; align-items: flex-end; }
.mini-dia { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 24px; height: 52px; gap: 3px; }
.mini-dia i { display: block; width: 14px; border-radius: 4px 4px 0 0; background: var(--marca-clara); }
.mini-dia:last-child i { background: var(--marca); }
.mini-dia b { font-size: 11px; color: var(--tinta-3); font-weight: 600; }
.faixa-alerta { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; margin-bottom: 14px;
  background: var(--erro-fundo); color: var(--erro-texto); text-decoration: none; font-size: 14.5px; }
.faixa-alerta.maximo { background: var(--gasto-maximo); color: #fff; }
.faixa-alerta span { flex: 1; }

/* ---------------------------------------------------------------- empresas */
.empresas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
.empresa-cartao { display: flex; flex-direction: column; gap: 8px; background: var(--cartao); border-radius: var(--raio);
  padding: 18px 20px; box-shadow: var(--sombra); color: var(--tinta); text-decoration: none; border: 1px solid transparent; }
a.empresa-cartao:hover { border-color: var(--linha-2); }
.empresa-cartao.apagado { opacity: .7; }
.ec-nome { display: flex; align-items: center; font-weight: 800; font-size: 16px; }
.ec-seta { margin-left: auto; color: var(--tinta-3); width: 18px; height: 18px; }
.ec-linha { display: flex; justify-content: space-between; font-size: 14px; color: var(--tinta-2); }
.ec-linha strong { font-size: 18px; }
.ec-total { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.ec-pe, .ec-vazio { font-size: 12.5px; color: var(--tinta-3); }
.outros { font-size: 13px; color: var(--tinta-2); margin-top: 12px; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.outros span { display: inline-flex; align-items: center; gap: 4px; }
.outros small { color: var(--tinta-3); }

/* ---------------------------------------------------------------- graficos */
.grafico { width: 100%; height: auto; display: block; }
.grafico .grade { stroke: var(--linha); stroke-width: 1; }
.grafico .base { stroke: var(--linha-2); stroke-width: 1; }
.grafico text { font-family: inherit; text-anchor: middle; }
.grafico .eixo { font-size: 11px; fill: var(--tinta-3); text-anchor: start; }
.grafico .valor { font-size: 12.5px; font-weight: 800; fill: var(--tinta); }
.grafico .rotulo { font-size: 12.5px; fill: var(--tinta-2); text-transform: none; letter-spacing: 0; }
.grafico .rotulo.forte { fill: var(--tinta); font-weight: 800; }
.grafico .destaque { fill: var(--cartao-2); stroke: var(--linha); }
.grafico [data-tip]:hover { opacity: .85; }

/* ---------------------------------------------------------------- a receber */
.quandos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; }
.quando { background: var(--cartao); border-radius: var(--raio); padding: 16px 18px; box-shadow: var(--sombra); border-top: 4px solid var(--linha-2); }
.quando p { font-size: 13px; color: var(--tinta-2); font-weight: 600; }
.quando strong { display: block; font-size: 22px; font-weight: 800; margin: 6px 0 2px; letter-spacing: -.02em; }
.quando small { font-size: 12px; color: var(--tinta-3); }
.quando.atrasado { border-top-color: var(--erro-forte); }
.quando.atrasado strong { color: var(--erro-texto); }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.duas > .cartao { margin-top: 16px; }
.lista-barras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lista-barras li { display: grid; grid-template-columns: minmax(120px, 210px) 1fr 150px; gap: 14px; align-items: center; font-size: 14px; }
.lista-barras li.diretas .lc-nome { font-weight: 800; }
.lc-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-valor { text-align: right; font-weight: 700; }
.lc-valor small { color: var(--tinta-3); font-weight: 600; margin-left: 4px; }

.tabela-rola { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3);
  font-weight: 700; padding: 8px 12px; border-bottom: 1px solid var(--linha); white-space: nowrap; }
.tabela td { padding: 10px 12px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela tbody tr:hover { background: var(--cartao-2); }
.tabela .num { text-align: right; white-space: nowrap; }
.tabela .forte { font-weight: 800; }
.tabela tfoot td { font-weight: 800; border-bottom: 0; border-top: 2px solid var(--linha-2); }
.tabela tr.apagada td { color: var(--tinta-2); }
.tabela .pct { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.tabela .pct .trilho { flex: 1; }
.tabela .pct span { width: 54px; text-align: right; font-weight: 700; }
.banco { display: inline-flex; align-items: center; font-weight: 700; }
.nota-tabela { font-size: 12.5px; color: var(--tinta-3); margin-top: 12px; }
details.mais, details.rodape { margin-top: 12px; }
details summary { cursor: pointer; color: var(--tinta-2); font-size: 14px; font-weight: 600; }
details summary .icone { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }
details.rodape { background: var(--cartao); border-radius: var(--raio); padding: 14px 20px; box-shadow: var(--sombra); margin-top: 16px; }
details.rodape p, details.rodape ul { font-size: 13.5px; color: var(--tinta-2); margin: 10px 0 0; }

/* ---------------------------------------------------------------- gastos e tetos */
.grupos { display: flex; flex-direction: column; }
.grupo { border-top: 1px solid var(--linha); border-radius: 12px; }
.grupo:first-child { border-top: 0; }
.grupo > summary { display: grid; grid-template-columns: 250px 1fr 200px 210px; gap: 8px 20px; align-items: center;
  padding: 16px 10px; cursor: pointer; list-style: none; border-radius: 12px; }
.grupo > summary::-webkit-details-marker { display: none; }
.grupo > summary:hover { background: var(--cartao-2); }
.grupo .trilho { height: 16px; }
.g-nome { display: flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 800; }
.g-seta { width: 18px; height: 18px; color: var(--tinta-3); transition: transform .15s; }
.grupo[open] .g-seta { transform: rotate(90deg); }
.g-valor { text-align: right; }
.g-valor strong { display: block; font-size: 17px; font-weight: 800; }
.g-valor small { color: var(--tinta-3); font-size: 12.5px; }
.g-situ { display: flex; justify-content: flex-start; }
.sem-teto { font-size: 13px; color: var(--tinta-3); border: 1px dashed var(--linha-2); border-radius: 999px; padding: 4px 14px; }
.g-aberto { display: grid; grid-template-columns: 1fr 330px; gap: 24px; padding: 4px 10px 20px 36px; align-items: start; }
.g-sem { font-size: 13px; color: var(--tinta-3); }
.g-cats select, .fora select { font: inherit; font-size: 13px; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--linha-2); background: #fff; }
.g-teto { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--cartao-2); border-radius: 12px; border: 1px solid var(--linha); }
.g-teto-titulo { font-weight: 800; font-size: 14px; }
.g-teto label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--tinta-2); font-weight: 600; }
.g-teto input { font: inherit; font-size: 16px; font-weight: 700; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--linha-2); }
.g-teto-botoes { display: flex; gap: 8px; }
.g-teto small { color: var(--tinta-3); font-size: 12px; line-height: 1.4; }
.grupo.nivel-vermelho { background: linear-gradient(90deg, rgba(254, 226, 226, .6), transparent 75%); }
.grupo.nivel-alerta { background: linear-gradient(90deg, rgba(254, 202, 202, .85), rgba(254, 226, 226, .35)); }
.grupo.nivel-vermelho .g-valor strong, .grupo.nivel-alerta .g-valor strong { color: var(--erro-texto); }
.gasto { background: var(--gasto); }
.gasto.claro { background: var(--gasto-claro); }
.gasto-vermelho { background: var(--gasto-vermelho); }
.gasto-vermelho.claro { background: var(--gasto-vermelho-claro); }
.gasto-maximo { background: var(--gasto-maximo); }
.gasto-maximo.claro { background: var(--gasto-maximo-claro); }
.ponto.gasto { background: var(--gasto); }
.ponto.gasto.claro { background: var(--gasto-claro); }
.marca-teto { position: absolute; top: -5px; bottom: -5px; width: 3px; margin-left: -1px; border-radius: 2px; background: var(--tinta); }
.marca-legenda { display: inline-block; width: 3px; height: 14px; background: var(--tinta); border-radius: 2px; margin-right: 6px; }
.a-confirmar { color: var(--aviso-texto); }
.cartao.fora summary { font-size: 14px; }

.botao { font: inherit; font-weight: 700; font-size: 14px; padding: 9px 16px; border-radius: 10px; border: 0; cursor: pointer;
  background: var(--marca); color: #fff; }
.botao:hover { background: var(--marca-escuro); }
.botao.fraco { background: transparent; color: var(--erro-texto); border: 1px solid var(--linha-2); }
.botao.neutro { background: transparent; color: var(--tinta-2); border: 1px solid var(--linha-2); text-decoration: none; }
.botao.grande { width: 100%; padding: 13px; font-size: 15px; }
button:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

/* ---------------------------------------------------------------- dica (tooltip) */
.dica { position: fixed; z-index: 50; background: var(--tinta); color: #fff; font-size: 13px; padding: 7px 11px;
  border-radius: 9px; pointer-events: none; max-width: 340px; box-shadow: 0 6px 20px rgba(5, 33, 26, .25); }

/* ---------------------------------------------------------------- entrar (tela nova em 18/10/2026) */
.tela-entrar { min-height: 100vh; background: var(--pagina); }
.entrar-tela { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(400px, .85fr); min-height: 100vh; }
.entrar-lado { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 26px; padding: 44px 56px;
  color: var(--menu-texto);
  background: radial-gradient(110% 80% at 100% 0%, rgba(34, 215, 150, .24), transparent 55%),
    radial-gradient(90% 70% at 0% 100%, rgba(12, 143, 93, .20), transparent 60%),
    linear-gradient(160deg, #04170f 0%, #020c08 100%); }
.entrar-lado::after { content: ""; position: absolute; right: -160px; bottom: -160px; width: 480px; height: 480px;
  border-radius: 50%; border: 64px solid rgba(34, 215, 150, .045); pointer-events: none; }
.entrar-lado > * { position: relative; z-index: 1; }
.entrar-marca { display: flex; align-items: center; gap: 16px; }
.entrar-marca .logo-f { width: 66px; height: 66px; flex: none; filter: drop-shadow(0 6px 22px rgba(34, 215, 150, .35)); }
.entrar-marca .nome-marca { display: block; font-size: 36px; line-height: 1; color: #fff; }
.entrar-marca .nome-marca b { color: var(--marca-viva); font-weight: 600; }
.entrar-marca small { display: block; margin-top: 9px; color: var(--menu-apagado); font-size: 11.5px; font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase; }
.entrar-marca small i { font-style: normal; color: var(--marca-viva); margin: 0 .55em; }
.entrar-lado h1 { margin-top: auto; font-size: clamp(30px, 3.3vw, 44px); line-height: 1.1; letter-spacing: -.03em;
  font-weight: 800; max-width: 14ch; }
.entrar-lado h1 em { font-style: normal; color: var(--marca-viva); }
.entrar-frase { font-size: 16px; line-height: 1.5; color: var(--menu-apagado); max-width: 42ch; }
.entrar-lista { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 12px; max-width: 500px; }
.entrar-lista li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 14px;
  background: rgba(34, 215, 150, .06); border: 1px solid rgba(34, 215, 150, .14); }
.entrar-lista .icone { width: 22px; height: 22px; color: var(--marca-viva); margin-top: 1px; }
.entrar-lista strong { display: block; font-size: 15px; margin-bottom: 2px; }
.entrar-lista span { font-size: 13.5px; line-height: 1.4; color: var(--menu-apagado); }
.entrar-rodape { margin-top: auto; font-size: 12.5px; color: var(--menu-apagado); }
.entrar-caixa { display: grid; place-items: center; padding: 40px 24px; }
.entrar { background: var(--cartao); border-radius: 20px; padding: 36px 34px; width: min(420px, 100%);
  box-shadow: var(--sombra); border: 1px solid var(--linha); }
.entrar h2 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.entrar-sub { color: var(--tinta-2); font-size: 14.5px; line-height: 1.45; margin: 6px 0 24px; }
.botao-google { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 13px 16px;
  border-radius: 12px; border: 1px solid var(--linha-2); background: #fff; color: var(--tinta); font-weight: 700;
  font-size: 15px; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.botao-google:hover { border-color: var(--marca); box-shadow: 0 4px 14px rgba(5, 33, 26, .12); }
.botao-google svg { width: 20px; height: 20px; flex: none; }
.entrar-seguro { display: flex; gap: 10px; align-items: flex-start; margin-top: 24px; padding-top: 18px;
  border-top: 1px solid var(--linha); font-size: 12.5px; line-height: 1.45; color: var(--tinta-3); }
.entrar-seguro .icone { width: 18px; height: 18px; }
.entrar form { display: flex; flex-direction: column; gap: 14px; }
.entrar label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--tinta-2); }
.entrar input { font: inherit; font-size: 15px; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--linha-2); }
.entrar-erro { background: var(--erro-fundo); color: var(--erro-texto); padding: 10px 12px; border-radius: 10px; font-size: 14px; }

/* ---------------------------------------------------------------- celular */
@media (max-width: 1100px) {
  .herois { grid-template-columns: 1fr 1fr; }
  .miudos { grid-column: 1 / -1; justify-content: flex-start; padding-bottom: 0; }
  .miudos div { text-align: left; }
  .grupo > summary { grid-template-columns: 1fr 160px; }
  .grupo > summary .trilho, .grupo > summary .sem-teto { grid-column: 1 / -1; grid-row: 2; }
  .g-situ { grid-column: 1 / -1; }
  .g-aberto { grid-template-columns: 1fr; padding-left: 10px; }
}
@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; }
  .menu { position: fixed; bottom: 0; top: auto; left: 0; right: 0; height: auto; flex-direction: row; padding: 6px 8px;
    z-index: 20; gap: 6px; }
  .marca, .menu-pe .avatar { display: none; }
  .menu-itens { flex-direction: row; justify-content: space-around; }
  .menu-item { flex: 1; font-size: 10.5px; padding: 6px 2px; }
  .menu-pe { margin: 0; }
  .conteudo { padding: 16px 16px 96px; }
  .herois { grid-template-columns: 1fr; gap: 14px; }
  .ng-reais { font-size: 40px; }
  .empresas, .quandos, .duas { grid-template-columns: 1fr; }
  .lista-barras li { grid-template-columns: 1fr 120px; }
  .lista-barras li .trilho { grid-column: 1 / -1; grid-row: 2; }
  .robo { flex-wrap: wrap; }
  .robo-icone { display: none; }
  .mes strong { min-width: 130px; }
  .legenda .regra { margin-left: 0; }
}
.entrar-google { display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 820px) {
  .entrar-tela { grid-template-columns: 1fr; min-height: 0; }
  .entrar-lado { padding: 26px 20px 30px; gap: 14px; }
  .entrar-lado h1 { margin-top: 10px; font-size: 28px; }
  .entrar-lista, .entrar-rodape { display: none; }
  .entrar-caixa { padding: 20px 16px 40px; }
  .entrar { padding: 28px 22px; }
}

/* o A receber por mes, cada mes com a tarja azul da aba (18/10/2026) */
.lista-barras.com-selo li { grid-template-columns: minmax(110px, 170px) 1fr 120px 104px; }
.lista-barras.com-selo .selo { justify-self: start; }
.lista-barras .lc-nome a { color: var(--tinta); font-weight: 700; }
.meses-receber li.atual { background: var(--cartao-2); border-radius: 10px; box-shadow: inset 3px 0 0 var(--marca); }
.meses-receber li.atual .lc-nome { font-weight: 800; }
.meses-receber li { padding: 4px 6px; }
.filtro-contas { display: inline-flex; margin-bottom: 12px; box-shadow: none; border: 1px solid var(--linha); }
.filtro-contas small { color: inherit; opacity: .75; margin-left: 2px; }
.tabela tr.recebida td { color: var(--tinta-2); }
.nota-meses { display: flex; gap: 8px; align-items: center; margin-top: 18px; font-size: 13.5px; color: var(--tinta-2); }
.nota-meses .icone { width: 18px; height: 18px; color: var(--tinta-3); }
.ancora { scroll-margin-top: 16px; }
.tarja { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 32px;
  background: var(--tarja); color: #fff; border-radius: 12px; padding: 12px 18px; margin-bottom: 14px; }
.tarja.nao-bate { box-shadow: inset 0 0 0 3px var(--erro-forte); }
.tarja.sem { background: var(--neutro-fundo); color: var(--neutro-texto); }
.tarja-cab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tarja-titulo { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tarja-apagado); }
.tarja.sem .tarja-titulo { color: inherit; text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 600; }
.tarja dl { display: flex; flex-wrap: wrap; gap: 6px 30px; margin: 0; }
.tarja dt { font-size: 12px; color: var(--tarja-apagado); }
.tarja dd { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; font-size: 17px; font-weight: 800;
  font-variant-numeric: tabular-nums; }
.tarja .tarja-ok { width: 18px; height: 18px; color: var(--tarja-ok); }
.tarja .tarja-erro { width: 18px; height: 18px; color: var(--tarja-erro); }
.tabela .inteiro { white-space: nowrap; }
.tabela .sem-taxa { color: var(--tinta-3); }
/* a forma de pagamento de cada reserva (19/10/2026): a palavra, o banco e o "cobrar no check-in" embaixo */
.tabela td.forma { white-space: nowrap; }
.tabela td.forma strong { font-weight: 700; }
.tabela td.forma small { display: block; font-size: 11.5px; font-weight: 600; color: var(--tinta-3); }
.tabela td.forma small.cobrar { color: var(--aviso-texto); }
.tabela td.forma small.cobrado { color: var(--ok-texto); }
.tabela tfoot td:first-child { color: var(--tinta-2); }
@media (max-width: 820px) {
  .lista-barras.com-selo li { grid-template-columns: 1fr auto auto; }
  .lista-barras.com-selo li .trilho { grid-column: 1 / -1; grid-row: 2; }
}

/* a conta do A receber: a ficha, a baixa e o vencimento (17/10/2026) */
.ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px 20px; margin: 0; }
.ficha dt { font-size: 12.5px; color: var(--tinta-3); }
.ficha dd { margin: 2px 0 0; font-weight: 700; font-size: 15px; }
.conta-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 16px 0; }
.g-teto select { font: inherit; font-size: 15px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--linha-2);
  background: var(--cartao); color: var(--tinta); }
.de-onde { font-size: 11.5px; font-weight: 700; color: var(--tinta-3); margin-left: 4px; }

/* a conta aberta embaixo da reserva, no A receber (19/10/2026). No celular a tabela rola de lado e o painel fica
   parado na largura da tela (sticky) */
.tabela a.abre-conta { font-weight: 700; }
/* as reservas do A receber com mais ar entre uma e outra (19/10/2026): mais altura em cada linha, os codigos que
   quebram em varias linhas com folga, e a linha divisoria um pouco mais firme */
.tabela.contas-receber th { padding: 10px 9px 12px; }
.tabela.contas-receber > tbody > tr:not(.painel-conta) > td { padding: 18px 9px; line-height: 1.45;
  border-bottom-color: var(--linha-2); }
/* para caber sem rolar de lado (19/10/2026): a forma de pagamento quebra em duas linhas quando precisa */
.tabela.contas-receber td.forma { white-space: normal; min-width: 110px; max-width: 160px; }
.tabela.contas-receber td.inteiro { white-space: normal; min-width: 96px; }
.tabela.contas-receber th { white-space: normal; }
.tabela.contas-receber td.num small.de-onde { display: block; margin: 2px 0 0; white-space: nowrap; }
.tabela.contas-receber td.data-ci { white-space: nowrap; font-weight: 700; }
/* a tarja de cada dia de check-in (19/10/2026): a data grande, o dia da semana, quantas reservas e o que falta */
.tabela.contas-receber > tbody > tr.dia-tarja > td { padding: 22px 0 8px; border-bottom: 0; background: none; }
.tabela.contas-receber > tbody > tr.dia-tarja:first-child > td { padding-top: 6px; }
.tabela.contas-receber > tbody > tr.dia-tarja:hover { background: none; }
.tarja-dia { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px;
  padding: 13px 18px; border-radius: 12px; background: var(--marca-fundo); box-shadow: inset 4px 0 0 var(--marca); }
.tarja-dia-data { display: flex; align-items: baseline; gap: 10px; }
.tarja-dia-data strong { font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: var(--tinta); }
.tarja-dia-data span { font-size: 13.5px; font-weight: 600; color: var(--tinta-2); }
.tarja-dia-somas { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 13px; color: var(--tinta-2); }
.tarja-dia-somas b { font-weight: 800; color: var(--tinta); font-variant-numeric: tabular-nums; }
.tarja-dia-somas b.laranja { color: var(--falta-texto); }
/* o bloco (a CVC primeiro, depois as outras reservas): a tarja escura, como o menu */
.tabela.contas-receber > tbody > tr.bloco-tarja > td { padding: 30px 0 4px; border-bottom: 0; background: none; }
.tabela.contas-receber > tbody > tr.bloco-tarja:first-child > td { padding-top: 6px; }
.tabela.contas-receber > tbody > tr.bloco-tarja:hover { background: none; }
.tabela.contas-receber > tbody > tr.bloco-tarja + tr.dia-tarja > td { padding-top: 10px; }
.tarja-bloco { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px;
  padding: 15px 20px; border-radius: 14px; background: var(--menu); color: var(--menu-texto); }
.tarja-bloco-nome { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.tarja-bloco-nome strong { font-size: 21px; font-weight: 800; letter-spacing: -.01em; color: #fff; }
.tarja-bloco-nome span { font-size: 13.5px; color: var(--menu-apagado); }
.tarja-bloco-somas { display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: 13px; color: var(--menu-apagado); }
.tarja-bloco-somas b { font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.tabela.contas-receber > tbody > tr.com-painel > td { border-bottom-color: transparent; }
.tabela.contas-receber td.forma small { margin-top: 3px; }
.tabela.contas-receber tfoot td { padding: 16px; }
.tabela tr.com-painel td { background: var(--cartao-2); border-bottom-color: transparent; }
.tabela tr.com-painel a.abre-conta { color: var(--tinta); }
.tabela tr.com-painel { scroll-margin-top: 16px; }
.tabela tr.painel-conta:hover { background: none; }
.tabela tr.painel-conta > td { padding: 0 8px 16px; background: var(--cartao-2); border-bottom: 1px solid var(--linha-2); }
.rola-contas { container-type: inline-size; }
.painel { position: sticky; left: 8px; max-width: calc(100vw - 260px); max-width: calc(100cqw - 16px); display: flex; flex-direction: column; gap: 14px;
  padding: 16px 18px; background: var(--cartao); border: 1px solid var(--linha-2); border-radius: 14px;
  box-shadow: var(--sombra); font-size: 14px; white-space: normal; }
.painel::before { content: ""; position: absolute; top: -7px; left: 26px; width: 12px; height: 12px; background: var(--cartao);
  border-left: 1px solid var(--linha-2); border-top: 1px solid var(--linha-2); transform: rotate(45deg); }
.painel-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.painel-nome { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); }
.painel-acoes { display: flex; align-items: center; gap: 14px; }
.painel-link { font-size: 13px; font-weight: 600; color: var(--tinta-2); }
.painel .recado { margin: 0; }
.painel .vazio { padding: 4px 0; }
.painel .conta-forms { margin: 0; }
.painel .tabela td, .painel .tabela th { background: none; }
.painel-baixas h3 { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinta-3); margin: 2px 0 6px; }
.painel-abrindo { color: var(--tinta-3); padding: 14px 6px 0; }
.painel-erro { background: var(--erro-fundo); color: var(--erro-texto); padding: 9px 12px; border-radius: 10px;
  font-size: 13.5px; font-weight: 600; margin: 0; }
.painel > .painel-fechar { align-self: flex-end; }
@media (max-width: 820px) {
  .painel { max-width: calc(100vw - 98px); max-width: calc(100cqw - 16px); padding: 14px; }
  .painel .ficha { grid-template-columns: 1fr 1fr; gap: 10px 14px; }
  .painel-acoes { width: 100%; justify-content: space-between; }
  /* no celular (e janela estreita) cada reserva vira um cartao: a data do check-in em cima, nada escondido de lado */
  .rola-contas { overflow-x: visible; }
  .tabela.contas-receber, .tabela.contas-receber > tbody, .tabela.contas-receber > tfoot { display: block; }
  .tabela.contas-receber > thead { display: none; }
  .tabela.contas-receber > tbody > tr:not(.painel-conta), .tabela.contas-receber > tfoot > tr { display: grid;
    grid-template-columns: 1fr 1fr; gap: 10px 14px; padding: 16px 4px; border-bottom: 1px solid var(--linha-2); }
  .tabela.contas-receber > tbody > tr:not(.painel-conta) > td, .tabela.contas-receber > tfoot > tr > td { display: block;
    padding: 0; border: 0; text-align: left; white-space: normal; max-width: none; }
  .tabela.contas-receber td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px;
    font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-3); }
  .tabela.contas-receber > tbody > tr.dia-tarja { display: block; }
  .tabela.contas-receber > tbody > tr.dia-tarja > td { display: block; padding: 18px 0 4px; }
  .tarja-dia { padding: 11px 14px; }
  .tabela.contas-receber > tbody > tr.bloco-tarja { display: block; }
  .tabela.contas-receber > tbody > tr.bloco-tarja > td { display: block; padding: 24px 0 4px; }
  .tarja-bloco { padding: 13px 15px; }
  .tarja-dia-data strong { font-size: 17px; }
  .tabela.contas-receber td.situ { grid-column: 1 / -1; }
  .tabela.contas-receber > tfoot > tr > td:first-child { grid-column: 1 / -1; }
  .tabela.contas-receber > tfoot > tr > td:empty { display: none; }
  .tabela.contas-receber > tbody > tr.painel-conta { display: block; }
  .tabela.contas-receber > tbody > tr.painel-conta > td { display: block; padding: 0 0 16px; }
  .tabela.contas-receber .painel { position: static; max-width: none; }
}

/* somar valores clicando neles (19/10/2026): o valor vira uma pilula, como os selos do sistema; a margem negativa
   segura o lugar do numero, e a tabela nao mexe quando marca */
.tabela td.somavel { cursor: pointer; }
.valor-somavel { display: inline-block; padding: 2px 9px; margin: -2px -9px; border-radius: 999px;
  transition: background-color .12s, box-shadow .12s, color .12s; }
.tabela td.somavel:hover .valor-somavel { background: var(--cartao-2); box-shadow: inset 0 0 0 1px var(--linha-2); }
.tabela td.somado .valor-somavel, .tabela td.somado:hover .valor-somavel { background: var(--ok-fundo);
  box-shadow: inset 0 0 0 1px rgba(11, 122, 80, .35); color: var(--ok-texto); font-weight: 800; }
.soma-barra { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 40; display: flex;
  align-items: center; gap: 16px; padding: 12px 14px 12px 20px; border-radius: 14px; background: var(--menu);
  color: var(--menu-texto); box-shadow: 0 10px 30px rgba(5, 33, 26, .35); font-size: 14px; white-space: nowrap; }
.soma-barra[hidden] { display: none; }
.soma-barra .soma-qtd { color: var(--menu-apagado); }
.soma-barra .soma-total { font-size: 18px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.soma-barra .soma-limpar { font: inherit; font-weight: 700; font-size: 13px; padding: 7px 12px; border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, .25); background: transparent; color: var(--marca-viva); cursor: pointer; }
.soma-barra .soma-limpar:hover { background: rgba(34, 215, 150, .12); }
@media (max-width: 820px) {
  .soma-barra { bottom: 84px; gap: 10px; padding: 10px 10px 10px 14px; font-size: 13px; }
  .soma-barra .soma-total { font-size: 16px; }
}