@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

/* A FONTE DA TELA ROSA (06/10/2026). O Victor viu o desenho — geometrico, arredondado,
   com negrito forte — e propos uma fonte amigavel para quem vai usar: uma jovem de 21
   anos. Comparadas lado a lado (Inter, Nunito, Quicksand, Poppins, Plus Jakarta Sans,
   Outfit, DM Sans, Fredoka), a Plus Jakarta Sans foi a mais proxima do desenho e e
   menos "infantil" que a Nunito e menos larga que a Poppins — numero de dinheiro nao
   pode ocupar a coluna inteira. Trocar de fonte e mudar ESTA LINHA e o @import.
   Vale so em `body.modo-rosa`: o caixa continua na Inter, como sempre.
   A CSP ja libera fonts.googleapis.com (CSS) e fonts.gstatic.com (arquivo). */
:root{--fonte:'Plus Jakarta Sans','Inter',system-ui,sans-serif}

/* ══════════════════════════════════════════════════════════════════════════
   CONTROLE DA BEBÊ IANNY — o tema rosa claro e branco (05/10/2026).

   Esta pagina nao e do caixa e nao tem a cara dele: pedido do Victor, "algo mais
   pessoal para ela". Quando a Ianny abre a aba, `body.modo-rosa` liga e a tela
   INTEIRA troca — barra lateral junto, porque ela e feita dos mesmos tokens.

   NAO e o `body.light` do base.css. Aquele e o tema claro roxo do TecGorila, e
   pintar por cima dele seria reescrever a mesma lista de tokens duas vezes.
   Aqui os tokens sao redefinidos de uma vez, com o mesmo contrato do
   `marca.css`: cor sempre por token, nunca cravada na regra.

   ── O que o rosa NAO pode ser ────────────────────────────────────────────
   - Entrada e saida nao dependem da cor. Tem sinal (+ / −), seta e palavra:
     o vinho e o verde so reforcam. Rosa e vinho sao vizinhos e NAO se leem por
     reflexo como o laranja e o vermelho da tabela do caixa.
   - O rosa de TEXTO e mais escuro que o rosa de BOTAO. #C2275F com texto branco
     da 5,60; #A81E51 como texto sobre branco da 7,07. Um rosa so nao serve aos
     dois papeis: o claro o bastante para ser "rosa" nao tem contraste de texto.

   Contrastes medidos (WCAG, sobre branco/pagina): texto 15,1 · text-2 8,9 ·
   text-3 6,3 · rosa de texto 7,1 · verde 6,4 · vinho 8,0 · botao 5,6.
   ══════════════════════════════════════════════════════════════════════════ */

body.modo-rosa{
  --bg:#FFF4F8; --bg2:#FFFFFF; --bg3:#FFF0F5; --bg4:#FDE3EC; --bg5:#FDE3EC;
  --border:rgba(168,30,81,.13); --border2:rgba(168,30,81,.26);
  --elev:0 1px 2px rgba(168,30,81,.06), 0 12px 28px -16px rgba(168,30,81,.30);

  /* "Acao/ativo" do projeto inteiro e `--purple` (no GV e o amarelo da marca;
     aqui e o rosa). `--marca` e o que o menu e os componentes do caixa leem. */
  --purple:#C2275F; --purple-d:#A81E51; --purple-l:#A81E51; --purple-ll:#8A1F4E;
  --purple-bg:rgba(194,39,95,.10); --purple-bd:rgba(194,39,95,.34);
  --purple-glow:0 4px 14px -4px rgba(194,39,95,.45);
  --purple-num:#A81E51;
  --marca:#C2275F; --marca-d:#A81E51; --sobre-marca:#FFFFFF;
  --preto:#FFE9F1;
  --grade:rgba(194,39,95,.025);

  --text:#3B1C2B; --text-2:#6B3A52; --text-3:#85506A;
  --red:#9F1239; --red-bg:rgba(159,18,57,.09); --red-bd:rgba(159,18,57,.30);
  --green:#0F6B5C; --green-bg:rgba(15,107,92,.10); --green-bd:rgba(15,107,92,.30);

  background:var(--bg);
  font-family:var(--fonte);
  /* A Plus Jakarta Sans fecha o espaco entre palavras ("R$1.418,80", "Salario· "): um
     toque de word-spacing devolve o respiro, e o espaco depois do R$ e o que faz o
     valor ler como dinheiro. */
  word-spacing:.12em;
}
/* Botao, campo e etiqueta cravam 'Inter' na regra do base.css/tela.css; na tela rosa
   eles seguem a fonte dela. (0,2,1) empata com o `input:not(...)` do base e ganha por
   vir depois. */
body.modo-rosa :is(button,input,select,textarea,.btn,.tab,.cfm-btn,label){font-family:var(--fonte)}
body.modo-rosa label{text-transform:none;letter-spacing:0}

/* ── Barra lateral rosa ────────────────────────────────────────────────────
   O menu, os cartoes e o pe da barra cravam `rgba(255,255,255,…)` e `#fff`
   porque o fundo deles e sempre preto. Sobre rosa claro isso some: cada um e
   refeito aqui, e e a UNICA lista do tema que precisa ser mantida a mao. */
.modo-rosa .lateral{background:var(--preto);border-right:1px solid var(--border)}
.modo-rosa .menu button{color:#7A3A58;font-weight:700}
.modo-rosa .menu button:hover{color:var(--purple-d);background:rgba(194,39,95,.08)}
.modo-rosa .menu button.ativa{color:#fff;background:var(--marca)}
.modo-rosa .lat-pe{border-top-color:var(--border)}
.modo-rosa .cartao-loja,.modo-rosa .cartao-user{background:#fff;border-color:var(--border);color:var(--text)}
.modo-rosa .cartao-user:hover,.modo-rosa .cartao-loja:not(:disabled):hover{background:var(--bg3);border-color:var(--border2)}
.modo-rosa .cl-txt b,.modo-rosa .cu-txt b{color:var(--text)}
.modo-rosa .cl-estado,.modo-rosa .cu-txt i{color:var(--text-2)}
.modo-rosa .cl-ic{background:var(--bg4);color:var(--purple-d)}
.modo-rosa .cl-seta,.modo-rosa .cu-sair{color:var(--text-2)}
.modo-rosa .cu-av{background:var(--bg4);color:var(--purple-d)}

/* A logo da loja e branca e amarela: sobre rosa claro ela some. No lugar entra o
   nome da tela, porque o que a barra diz aqui e "onde voce esta". */
.lat-rosa{display:none}
.modo-rosa .lat-marca .marca-img{display:none}
.modo-rosa .lat-rosa{display:flex;align-items:center;gap:11px;padding:2px 4px}
.lat-rosa-porco{display:block;flex:0 0 auto;width:52px;height:auto}
.lat-rosa-txt{display:flex;flex-direction:column;font-size:13px;font-weight:600;line-height:1.15;color:var(--text-2)}
.lat-rosa-txt b{font-size:19px;font-weight:800;letter-spacing:-.4px;color:var(--purple-d)}

/* O item da barra tem o nome INTEIRO da tela, que e maior que a coluna: quebra
   em duas linhas em vez de cortar. (No celular entra a regra do `.so-largo`.) */
.menu button.longo{white-space:normal;line-height:1.2}

/* ── Cabeca ────────────────────────────────────────────────────────────── */
.pes-cabeca{display:flex;align-items:flex-end;justify-content:space-between;
  flex-wrap:wrap;gap:12px 16px;margin-bottom:16px}
.pes-eyebrow{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:700;
  letter-spacing:.01em;color:var(--purple-l)}
.pes-mes{font-size:34px;font-weight:800;letter-spacing:-.9px;line-height:1.1;margin:2px 0 0;color:var(--text)}
.pes-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pes-chip{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 16px;
  border-radius:999px;border:1px solid var(--border2);background:var(--bg2);color:var(--purple-l);
  font:600 14.5px var(--fonte);cursor:pointer;transition:.15s}
.pes-chip:hover{background:var(--bg4)}
.pes-chip[aria-expanded="true"]{background:var(--purple-bg);border-color:var(--purple-bd)}
.pes-seta{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--border2);background:var(--bg2);color:var(--purple-l);cursor:pointer;transition:.15s}
.pes-seta:hover{background:var(--bg4)}
.pes-chip:focus-visible,.pes-seta:focus-visible,.pes-tipo-btn:focus-visible,
.pes-guardar:focus-visible,.pes-acao:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.sem-lia .pes-lia{display:none !important}

.pes-aviso{display:flex;align-items:center;gap:8px;margin:0 0 14px;padding:10px 14px;border-radius:14px;
  background:var(--bg4);color:var(--purple-ll);font-size:14.5px;font-weight:500}
#pes-conv-slot .conv{max-width:none;margin:0 0 14px;border-radius:20px;padding:14px 16px;box-shadow:var(--elev)}

/* ── Os tres placares ──────────────────────────────────────────────────── */
.pes-placares{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:14px}
.pes-card{background:var(--bg2);border:1px solid var(--border);border-radius:20px;
  box-shadow:var(--elev);padding:18px 20px;min-width:0}
.pes-card h2{font-size:17px;margin:0 0 12px}
.pes-card h2 .ic{color:var(--purple-l)}
.pes-placar{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:14px}
.pes-placar-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
/* O SELO: circulo com gradiente e o icone em branco. `background-color` SOLIDO por
   baixo do gradiente de proposito: e o que o auditor de contraste le (ele nao enxerga
   `background-image`) e o que aparece se o gradiente falhar. */
.pes-selo{display:grid;place-items:center;flex:0 0 auto;width:48px;height:48px;border-radius:50%;
  color:#fff;background-color:#C2275F;background-image:linear-gradient(135deg,#F0508C,#C2275F);
  box-shadow:0 6px 14px -6px rgba(194,39,95,.65)}
.pes-selo .ic{width:24px;height:24px;stroke-width:2.1}
.pes-entrou .pes-selo{background-color:#0F6B5C;background-image:linear-gradient(135deg,#27A483,#0F6B5C);box-shadow:0 6px 14px -6px rgba(15,107,92,.6)}
.pes-sobra.negativa .pes-selo{background-color:#9F1239;background-image:linear-gradient(135deg,#D6336C,#9F1239)}
.pes-sobra{background:#FFEAF2;border-color:var(--border2)}
.pes-entrou{background:#E8F6F2;border-color:var(--green-bd)}
.pes-rot{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--text-2)}
.pes-num{font-size:30px;font-weight:800;letter-spacing:-.6px;line-height:1.15;
  font-variant-numeric:tabular-nums;color:var(--purple-d);margin-top:2px}
.pes-entrou .pes-num{color:var(--green)}
.pes-saiu .pes-num{color:var(--red)}
.pes-sobra.negativa .pes-num{color:var(--red)}
.pes-sub{font-size:13.5px;line-height:1.4;color:var(--text-2);min-height:19px}
.pes-barra{display:block;height:9px;border-radius:5px;background:rgba(194,39,95,.16);margin-top:9px;overflow:hidden}
.pes-barra i{display:block;height:100%;border-radius:5px;background:var(--purple);width:0}
.pes-sobra.negativa .pes-barra i{background:var(--red)}

/* ── Formulario e lista ────────────────────────────────────────────────── */
.pes-palco{display:grid;grid-template-columns:minmax(0,408px) minmax(0,1fr);gap:14px;align-items:start}
.pes-form{position:sticky;top:16px}
.pes-form label{display:flex;align-items:center;gap:6px;margin-top:14px;color:var(--text-2);font-family:inherit;font-size:14px;
  font-weight:600;letter-spacing:0;text-transform:none}
.pes-form label:first-of-type{margin-top:16px}
/* O campo do valor e o numero que ela confere antes de guardar: grande. */
.pes-form .campo-moeda input.campo-valor{font-size:22px;padding:12px 14px 12px 64px;color:var(--text)}
.pes-form .moeda-sufixo{background:var(--bg4);color:var(--purple-ll);
  /* O R$ fica a ESQUERDA do valor (pedido do Victor): e onde o olho le "R$ 38,00". O
     elemento continua `.moeda-sufixo` (o nome vem do caixa, onde ele e sufixo); aqui
     so muda o lado. */
  right:auto;left:1px;border-left:0;border-right:1px solid var(--border);border-radius:11px 0 0 11px;width:50px}
.pes-form input:not([type=checkbox]):not([type=radio]){width:100%;background:var(--bg2);border:1.5px solid var(--border2);
  border-radius:12px;color:var(--text)}
.pes-form input::placeholder{color:#7C4A63;opacity:1}
.pes-form input:not([type=checkbox]):not([type=radio]):focus{border-color:var(--purple);
  box-shadow:0 0 0 3px rgba(194,39,95,.18);outline:0}
.pes-form .moeda-sufixo{pointer-events:none}
.pes-tipo{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pes-tipo-btn .ic{width:21px;height:21px}
.pes-tipo-btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;
  border-radius:14px;border:1.5px solid var(--border2);background:var(--bg3);color:var(--purple-ll);
  font:600 16px var(--fonte);cursor:pointer;transition:.15s}
.pes-tipo-btn:hover{background:var(--bg4)}
.pes-tipo-btn.ativa{background-color:var(--purple);background-image:linear-gradient(135deg,#E8447F,#C2275F);border-color:var(--purple-d);color:#fff;box-shadow:var(--purple-glow)}
.pes-guardar{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:54px;
  margin-top:18px;border:0;border-radius:16px;background-color:var(--purple);background-image:linear-gradient(135deg,#E8447F,#C2275F);color:#fff;
  font:700 17px var(--fonte);cursor:pointer;box-shadow:var(--purple-glow);transition:.15s}
.pes-guardar:hover:not(:disabled){background-image:linear-gradient(135deg,#D63A78,#A81E51)}
.pes-guardar:disabled{opacity:.6;cursor:default}
.pes-cancelar{display:block;width:100%;margin-top:8px;min-height:44px;border-radius:14px;
  border:1.5px solid var(--border2);background:var(--bg2);color:var(--purple-ll);
  font:600 15px var(--fonte);cursor:pointer}
.pes-form.editando{border-color:var(--purple);box-shadow:0 0 0 3px rgba(194,39,95,.14),var(--elev)}

.pes-direita{display:flex;flex-direction:column;gap:14px;min-width:0}
.pes-lista-topo{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:4px}
.pes-lista-topo h2{margin:0}
.pes-conta{font-size:13.5px;color:var(--text-3)}
.pes-dia{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin-top:14px;padding-bottom:6px;font-size:14px;font-weight:700;color:var(--purple-ll)}
.pes-dia:first-child{margin-top:6px}
.pes-dia .pes-hoje{margin-left:7px;padding:2px 9px;border-radius:999px;background:var(--purple);
  color:#fff;font-size:12px;font-weight:700;vertical-align:1px}
.pes-dia-total{font-weight:600;color:var(--text-3);font-variant-numeric:tabular-nums}
.pes-linha{display:grid;grid-template-columns:42px minmax(0,1fr) auto auto;align-items:center;
  gap:6px 12px;padding:10px 0;border-top:1px solid var(--border)}
/* A BOLHA TEM COR POR CATEGORIA, como no desenho: rosa, lilas, ceu, pessego e o
   verde so do que ENTRA. A cor ajuda a achar de relance; quem identifica e o
   desenho e a palavra ao lado (cor sozinha nunca identifica). Fundo claro + traco
   escuro da mesma familia, todos acima de 5,5 de contraste. */
.pes-bolha{display:grid;place-items:center;flex:0 0 auto;width:42px;height:42px;border-radius:50%;
  background:#FDE3EC;color:#A81E51}
.pes-bolha.b-lilas{background:#EEE6FB;color:#5B2FA0}
.pes-bolha.b-ceu{background:#E1EFFD;color:#1D5A9C}
.pes-bolha.b-pessego{background:#FFE8D5;color:#9A4310}
.pes-bolha.b-verde{background:#DDF3EC;color:#0F6B5C}
.pes-desc{min-width:0}
.pes-desc b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
  font-weight:700;font-size:15.5px;line-height:1.3;color:var(--text);overflow:hidden;overflow-wrap:anywhere}
.pes-desc i{display:block;font-style:normal;font-size:13.5px;color:var(--text-3)}
.pes-valor{text-align:right;font-weight:700;font-size:16px;font-variant-numeric:tabular-nums;white-space:nowrap}
.pes-linha.gasto .pes-valor{color:var(--red)}
.pes-linha.receita .pes-valor{color:var(--green)}
.pes-valor small{display:block;font-size:12px;font-weight:600;color:var(--text-3)}
.pes-acoes{display:flex;gap:2px}
.pes-acao{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;border:0;
  background:none;color:var(--text-2);cursor:pointer}
.pes-acao:hover{background:var(--bg4);color:var(--purple-d)}
.pes-acao.apagar:hover{color:var(--red);background:var(--red-bg)}
.pes-secao{margin:16px 0 0;padding:6px 12px;border-radius:10px;background:var(--bg3);
  font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--purple-ll)}
.pes-secao:first-child{margin-top:4px}
.pes-vazio{padding:22px 6px 12px;text-align:center;color:var(--text-2);font-size:15px;line-height:1.5}
.pes-vazio b{display:block;color:var(--text);font-size:16.5px;margin-bottom:3px}


/* Fora do expediente: so a tela dela. O menu perde as abas do caixa e a barra
   perde o cartao da loja — nada que o caixa trancado ofereceria. */
.so-pessoal .menu button:not([data-pagina="pessoal"]){display:none}
.so-pessoal #combo-loja{display:none}

/* ── Telas estreitas ───────────────────────────────────────────────────── */
@media (max-width:1100px){
  .pes-palco{grid-template-columns:minmax(0,1fr)}
  .pes-form{position:static}
}
@media (max-width:900px){
  /* Faixa no topo, como o resto do sistema: o rosa dela continua e a logo vira
     o nome da tela, mais curto. */
  .modo-rosa .lateral{border-bottom:1px solid var(--border)}
  .lat-rosa-porco{width:40px}
  .lat-rosa-txt{font-size:11.5px}
  .lat-rosa-txt b{font-size:16px}
}
@media (max-width:640px){
  .pes-mes{font-size:28px}
  /* A fonte nova e um pouco mais larga: chips mais justos mantem "Hoje" e as setas na
     mesma fileira em 390px. */
  .pes-chip{padding:0 12px;font-size:13.5px;gap:6px}
  .pes-nav{gap:6px}
  .pes-seta{width:40px;height:40px}
  .pes-placares{grid-template-columns:minmax(0,1fr);gap:10px}
  /* Os tres placares empilhados ocupariam uma tela inteira antes do formulario.
     Entrou e saiu dividem uma fileira; a sobra, que e o numero que ela quer,
     fica em cima sozinha. */
  .pes-sobra{grid-column:1 / -1}
  .pes-placares{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pes-card{padding:14px 15px;border-radius:18px}
  .pes-num{font-size:25px}
  /* Nos dois placares de meia largura o selo vai ACIMA do texto: ao lado, "R$ 2.350,00"
     nao cabe em 25px. */
  .pes-entrou.pes-placar,.pes-saiu.pes-placar{grid-template-columns:minmax(0,1fr);row-gap:8px}
  /* O numero ENCOLHE com a tela: "R$ 12.350,00" nao cabia em meia largura a 25px
     (medido: estourava o card em 360 e 320). Ate 5,4vw, sem passar de 25px. */
  .pes-entrou .pes-num,.pes-saiu .pes-num{font-size:clamp(18px,5.4vw,25px)}
  .pes-entrou .pes-selo,.pes-saiu .pes-selo{width:38px;height:38px}
  .pes-entrou .pes-selo .ic,.pes-saiu .pes-selo .ic{width:20px;height:20px}
  .pes-palco{gap:12px}
  .pes-linha{grid-template-columns:42px minmax(0,1fr) auto;padding:8px 0;row-gap:0}
  .pes-bolha{grid-row:1 / span 2}
  .pes-desc{grid-row:1 / span 2}
  .pes-valor{grid-column:3}
  .pes-acoes{grid-column:3;grid-row:2;justify-self:end;margin:-2px -6px 0 0}
  /* 42px: editar e apagar ficam lado a lado, e o alvo de 34 errava para o vizinho. */
  .pes-acao{width:42px;height:42px}
}
@media (prefers-reduced-motion:reduce){
  .pes-chip,.pes-seta,.pes-guardar,.pes-tipo-btn{transition:none}
}


/* A linha em que a IA conta o que fez no texto. Reserva a altura (min-height) para
   o formulario nao pular quando ela aparece ou some. */
.pes-ia{min-height:22px;margin:6px 2px 0;font-size:13.5px;line-height:1.4;color:var(--purple-ll)}
.pes-ia:empty::before{content:'\00a0'}

/* O icone do lancamento sai da CATEGORIA que a IA escolheu (`visualDoLancamento`) e
   e so reforco: a palavra e o sinal (+/-) ja dizem o que e. */
.pes-bolha .ic{width:22px;height:22px}

/* ── Pra onde foi: o resumo por categoria ─────────────────────────────────── */
.pes-onde-l{display:grid;grid-template-columns:34px minmax(0,150px) minmax(0,1fr) 96px;align-items:center;
  gap:10px;padding:7px 0}
.pes-onde-l .pes-bolha{width:34px;height:34px}
.pes-onde-l .pes-bolha .ic{width:18px;height:18px}
.pes-onde-n{min-width:0}
.pes-onde-n b{display:block;font-size:14.5px;font-weight:600;color:var(--text)}
.pes-onde-n i{display:block;font-style:normal;font-size:12.5px;color:var(--text-3)}
.pes-onde-l .pes-barra{margin:0;height:10px}
.pes-onde-v{font-weight:700;font-size:14.5px;font-variant-numeric:tabular-nums;color:var(--text);text-align:right}
@media (max-width:640px){
  .pes-onde-l{grid-template-columns:34px minmax(0,1fr) auto;row-gap:2px}
  .pes-onde-l .pes-barra{grid-column:2 / -1;grid-row:2}
}

/* Titulo de card com o icone num QUADRADINHO rosa, como em "Hoje" e "Pra onde foi" do
   desenho. O padding faz o quadrado; o icone herda a cor. */
.pes-card h2{display:flex;align-items:center;gap:10px;font-weight:800}
.pes-card h2 > .ic{box-sizing:content-box;width:19px;height:19px;padding:8px;border-radius:12px;
  background:#FDE3EC;color:#A81E51}
/* O numero que ela confere antes de salvar: forte, como no desenho. */
.pes-form .campo-moeda input.campo-valor{font-weight:800}
.pes-tipo-btn,.pes-guardar{font-weight:800}

/* Telas de 380px para baixo (o Galaxy de 360 que as lojas vendem e os de 320): ate os tres
   placares em UMA coluna. Dois lado a lado deixam ~130px para o valor, e uma entrada ou
   saida de cinco digitos ("R$ 12.350,00") passa disso. Custa ~90px de altura. */
@media (max-width:380px){
  .pes-placares{grid-template-columns:minmax(0,1fr)}
  .pes-entrou .pes-num,.pes-saiu .pes-num{font-size:25px}
}

/* ── Seletor de categoria (so na correcao de um gasto) ────────────────────── */
.pes-catedit{margin-top:2px}
/* DUAS colunas: em tres, "Transporte" e "Presentes" quebravam no meio da palavra (medido). */
.pes-cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.pes-cat{display:flex;align-items:center;gap:8px;min-height:48px;padding:6px 8px;border-radius:14px;
  border:1.5px solid var(--border);background:var(--bg3);color:var(--text-2);text-align:left;
  font-size:13px;font-weight:700;line-height:1.2;cursor:pointer;transition:.12s}
.pes-cat:hover{background:var(--bg4);color:var(--text)}
.pes-cat:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.pes-cat .pes-bolha{width:30px;height:30px}
.pes-cat .pes-bolha .ic{width:17px;height:17px}
.pes-cat > span:last-child{min-width:0;overflow-wrap:break-word}
/* A escolhida: borda e fundo rosa fortes + a palavra em negrito; a bolha segue a cor da
   categoria. Cor sozinha nao marca ninguem — `aria-pressed` diz o mesmo ao leitor de tela. */
.pes-cat.ativa{border-color:var(--purple);background:var(--bg4);color:var(--purple-ll);
  box-shadow:0 0 0 2px rgba(194,39,95,.18)}
@media (prefers-reduced-motion:reduce){.pes-cat{transition:none}}
/* 320px: "Assinaturas" nao cabia na coluna e quebrava no meio. Bolha e letra um pouco menores. */
@media (max-width:344px){
  .pes-cat{font-size:11.5px;gap:6px;padding:6px}
  .pes-cat .pes-bolha{width:26px;height:26px}
}

/* ── A TRAVA DO BALCAO (06/10/2026) ────────────────────────────────────────
   No computador, com o caixa aberto, as contas dela pedem o PIN. E o MESMO teclado
   da entrada (bolinhas + 3x4 + apagar), vestido de rosa: o gesto e o que elas ja
   fazem toda manha. Com `.travada` na secao, so a trava aparece — o resto da pagina
   nem e desenhado (e o JS ainda tira os numeros do DOM). */
.pes-trava{display:none}
#pag-pessoal.travada > :not(.pes-trava){display:none}
#pag-pessoal.travada > .pes-trava{display:flex;justify-content:center;padding:28px 0 40px}
.pes-trava-card{width:100%;max-width:380px;background:var(--bg2);border:1px solid var(--border);
  border-radius:28px;box-shadow:var(--elev);padding:30px 28px 22px;text-align:center}
.pes-trava-porco{display:block;width:92px;height:auto;margin:0 auto 10px}
.pes-trava-titulo{font-size:26px;font-weight:800;letter-spacing:-.6px;margin:0;color:var(--text)}
.pes-trava-quem{font-size:15.5px;font-weight:600;color:var(--text-2);margin:8px 0 20px}
.pes-trava-quem b{color:var(--purple-l);font-weight:800}
.pes-pontos{display:flex;justify-content:center;gap:13px;margin-bottom:20px}
.pes-pontos i{width:15px;height:15px;border-radius:50%;background:var(--bg4);border:1.5px solid var(--border2);transition:.12s}
.pes-pontos i.cheio{background-color:var(--purple);background-image:linear-gradient(135deg,#F0508C,#C2275F);
  border-color:var(--purple-d);transform:scale(1.08)}
.pes-teclado{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pes-teclado button{min-height:58px;border-radius:18px;border:1px solid var(--border);background:var(--bg3);
  font:700 23px var(--fonte);color:var(--text);cursor:pointer;transition:.12s}
.pes-teclado button:hover{background:var(--bg4);border-color:var(--border2)}
.pes-teclado button:active{background-color:var(--purple);background-image:linear-gradient(135deg,#E8447F,#C2275F);
  border-color:var(--purple-d);color:#fff}
.pes-teclado button:focus-visible,.pes-trava-voltar:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.pes-teclado .apagar{font-size:15px;color:var(--purple-l)}
.pes-trava-erro{min-height:22px;margin:14px 0 6px;font-size:14.5px;font-weight:700;color:var(--red)}
.pes-trava-voltar{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 18px;border-radius:999px;
  border:1px solid var(--border2);background:var(--bg2);color:var(--purple-l);font:700 14.5px var(--fonte);cursor:pointer}
.pes-trava-voltar:hover{background:var(--bg4)}
@media (max-width:640px){
  #pag-pessoal.travada > .pes-trava{padding:8px 0 24px}
  .pes-trava-card{padding:24px 18px 18px;border-radius:24px}
  .pes-trava-porco{width:76px}
}