/* ==========================================================================
   Preshh — Rotinas Financeiras
   CSS puro para Thymeleaf. Sem build, sem Sass, sem dependência nenhuma.
   Substitui o Bootstrap 5.3 e o conciliador.css, que sairam de cena no redesign —
   nenhum template os carrega mais.
   Handoff do Claude Design (projeto "Preshh Financeiro"), aplicado sem alteração
   de valores. As fontes Outfit são servidas localmente de /fonts.
   ========================================================================== */

@font-face { font-family: "Outfit"; src: url("/fonts/Outfit-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("/fonts/Outfit-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("/fonts/Outfit-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("/fonts/Outfit-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  /* Marca */
  --preshh-blue: #0b4395;
  --preshh-cyan: #009fe3;
  --preshh-blue-light: #7fcff5;
  --preshh-purple: #6b2383;
  --preshh-red: #e41e12;
  --preshh-orange: #ee7202;
  --preshh-yellow: #fed138;
  --preshh-green-dark: #2e8d2d;
  --preshh-green: #63b32e;

  /* Neutros derivados */
  --ink: #12224a;
  --ink-soft: #4a5a80;
  --surface-page: #f2f8fd;
  --surface-tint: #eef6fd;
  --border-soft: #cfe3f4;

  /* Papéis semânticos do app */
  --sev-critico: var(--preshh-red);
  --sev-atencao: var(--preshh-orange);
  --sev-neutro: var(--ink-soft);
  --empresa-aluguel: var(--preshh-purple);   /* Preshh Aluguel */
  --empresa-bar: var(--preshh-green-dark);   /* Preshh Bar */

  --font-brand: "Outfit", "Segoe UI", system-ui, sans-serif;
  --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-pill: 999px;
  --shadow-card: 0 4px 16px rgba(11, 67, 149, .10);
  --shadow-pop: 0 10px 32px rgba(11, 67, 149, .18);
  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* --- base ---------------------------------------------------------------- */
body { margin: 0; font-family: var(--font-brand); color: var(--ink); background: var(--surface-page); }
* { box-sizing: border-box; }
:focus-visible { outline: 3px solid var(--preshh-cyan); outline-offset: 2px; border-radius: 4px; }
a { color: var(--preshh-blue); text-underline-offset: 2px; }
a:hover { color: var(--preshh-cyan); }
h1, h2, h3 { letter-spacing: -.02em; line-height: 1.2; margin: 0; }
.p-prosa { font-size: 21px; line-height: 1.55; max-width: 1100px; text-wrap: pretty; }
.num { font-variant-numeric: tabular-nums; text-align: right; }
.nowrap { white-space: nowrap; }

/* --- botões -------------------------------------------------------------- */
.px-btn { font-family: var(--font-brand); font-size: 16px; font-weight: 600; padding: 13px 26px;
  border-radius: var(--radius-pill); border: 2px solid transparent; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; line-height: 1.2;
  transition: filter 150ms var(--ease), box-shadow 150ms var(--ease), transform 150ms var(--ease); }
.px-btn--primary { background: var(--preshh-blue); color: #fff; }
.px-btn--grava { background: var(--preshh-red); color: #fff; }   /* usar quando gravação real está ligada */
.px-btn--outline { background: #fff; color: var(--preshh-blue); border-color: var(--preshh-blue); }
.px-btn--quiet { background: #fff; color: var(--preshh-blue); border-color: var(--border-soft); }
.px-btn--sm { font-size: 13px; font-weight: 700; padding: 8px 16px; }
.px-btn:hover:not(:disabled) { filter: brightness(1.08); box-shadow: var(--shadow-card); }
.px-btn:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.px-btn:disabled { opacity: .45; cursor: not-allowed; }

/* --- superfícies --------------------------------------------------------- */
.px-card { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-6); }
.px-card--flat { border-radius: var(--radius-md); padding: var(--space-5); }
.px-card--prosa { border-left: 8px solid var(--preshh-cyan); }

/* --- indicadores (contagens) -------------------------------------------- */
.px-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-4); }
.px-kpi { background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 20px 22px; border-top: 5px solid var(--border-soft); }
.px-kpi__n { font-size: 40px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.px-kpi__t { font-size: 15px; font-weight: 700; margin-top: 4px; }
.px-kpi__h { font-size: 13px; color: var(--ink-soft); line-height: 1.45; margin-top: 2px; }
.px-kpi--ok    { border-top-color: var(--preshh-green); } .px-kpi--ok .px-kpi__n { color: var(--preshh-green-dark); }
.px-kpi--acao  { border-top-color: var(--preshh-red); }   .px-kpi--acao .px-kpi__n { color: var(--preshh-red); }
.px-kpi--aviso { border-top-color: var(--preshh-orange); }.px-kpi--aviso .px-kpi__n { color: var(--preshh-orange); }
.px-kpi--neutro .px-kpi__n { color: var(--ink-soft); }

/* --- cartões de valor ---------------------------------------------------
   Eram uma laje unica com grade de 1px (fundo do container aparecendo entre as
   celulas). Com 6 cartoes numa linha de 5, a celula que sobrava deixava um bloco
   AZUL VAZIO do lado do ultimo valor — e todos os numeros na mesma cor tornavam a
   leitura plana. Agora sao cartoes separados, com faixa de cor por significado:
   uma sobra vira espaco em branco, nao um bloco colorido. Mesma linguagem visual
   dos .px-kpi logo acima, que ja funcionava. */
.px-valores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.px-valor { background: #fff; padding: 18px 20px; border-radius: var(--radius-md);
  box-shadow: var(--shadow-card); border-top: 5px solid var(--border-soft); }
.px-valor__l { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.px-valor__v { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 6px; color: var(--preshh-blue); }

/* Cor por PAPEL do valor, nao por estética: azul = o total de referência;
   verde = dinheiro que entrou/entra; laranja = dinheiro parado esperando alguém;
   cinza = registro, sem ação. */
.px-valor--principal { border-top-color: var(--preshh-blue); }
.px-valor--ok      { border-top-color: var(--preshh-green); }
.px-valor--ok      .px-valor__v { color: var(--preshh-green-dark); }
.px-valor--acao    { border-top-color: var(--preshh-orange); }
.px-valor--acao    .px-valor__v { color: var(--preshh-orange); }
.px-valor--neutro  .px-valor__v { color: var(--ink-soft); }

@media (max-width: 1100px) { .px-valores { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .px-valores { grid-template-columns: 1fr; } }

/* --- tabelas ------------------------------------------------------------- */
.px-tabela-wrap { overflow-x: auto; border-top: 1px solid var(--border-soft); }
.px-tabela { border-collapse: collapse; width: 100%; }
.px-tabela th { text-align: left; padding: 11px 14px; background: #fbfdff; font-size: 11px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.px-tabela td { padding: 13px 14px; font-size: 14px; border-top: 1px solid var(--border-soft); }
.px-tabela th:first-child, .px-tabela td:first-child { padding-left: 22px; }
.px-tabela th:last-child, .px-tabela td:last-child { padding-right: 22px; }
.px-tabela tbody tr:hover { background: var(--surface-tint); }
.px-tabela td.num, .px-tabela th.num { font-variant-numeric: tabular-nums; text-align: right; }
.px-tabela .antigo { text-decoration: line-through; color: var(--ink-soft); }
.px-tabela select { font-family: var(--font-brand); font-size: 14px; padding: 8px 12px; min-width: 230px;
  border: 2px solid var(--border-soft); border-radius: var(--radius-sm); background: #fff; color: var(--ink); }
.px-pager { display: flex; align-items: center; gap: 14px; padding: 13px 22px; background: #fbfdff;
  border-top: 1px solid var(--border-soft); font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.px-pager__spacer { flex: 1; }

/* --- agrupamento por severidade ----------------------------------------- */
.px-grupo { background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  overflow: hidden; border-left: 8px solid var(--sev-neutro); }
.px-grupo--critico { border-left-color: var(--sev-critico); }
.px-grupo--atencao { border-left-color: var(--sev-atencao); }
.px-grupo--resolve { border-left-color: var(--preshh-cyan); }
.px-grupo__head { width: 100%; text-align: left; background: none; border: 0; padding: 18px 22px;
  cursor: pointer; font-family: var(--font-brand); display: flex; gap: var(--space-4); align-items: flex-start; }
.px-grupo__icone { width: 30px; height: 30px; border-radius: 50%; flex: none; color: #fff; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; background: var(--sev-neutro); }
.px-grupo--critico .px-grupo__icone { background: var(--sev-critico); }
.px-grupo--atencao .px-grupo__icone { background: var(--sev-atencao); }
.px-grupo--resolve .px-grupo__icone { background: var(--preshh-cyan); }
.px-grupo__titulo { font-size: 19px; font-weight: 700; }
.px-grupo__explica { font-size: 15px; line-height: 1.5; color: var(--ink-soft); margin: 6px 0 0; max-width: 900px; }
.px-grupo__acao { font-size: 14px; font-weight: 700; color: var(--preshh-blue); margin-top: 8px; display: inline-block; }
.px-grupo__acao span { font-weight: 500; color: var(--ink); }

/* --- pílulas ------------------------------------------------------------- */
.px-pill { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 12px; border-radius: var(--radius-pill); background: var(--ink-soft); color: #fff; }
.px-pill--critico { background: var(--sev-critico); }
.px-pill--atencao { background: var(--sev-atencao); }
.px-pill--ok { background: var(--preshh-green); }
.px-pill--resolve { background: var(--preshh-cyan); }
.px-pill--vazio { background: transparent; color: var(--ink-soft); border: 1px dashed var(--border-soft); font-weight: 600; }

/* --- alertas ------------------------------------------------------------- */
.px-alerta { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: var(--radius-md);
  background: var(--surface-tint); border-left: 6px solid var(--preshh-cyan); font-size: 15px; line-height: 1.5; }
.px-alerta--atencao { background: #fff4e6; border-left-color: var(--preshh-orange); }
.px-alerta--critico { background: #fdecea; border-left-color: var(--preshh-red); }
.px-alerta__icone { width: 24px; height: 24px; border-radius: 50%; flex: none; color: #fff; font-weight: 700;
  font-size: 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--preshh-cyan); }
.px-alerta--atencao .px-alerta__icone { background: var(--preshh-orange); }
.px-alerta--critico .px-alerta__icone { background: var(--preshh-red); }
.px-alertas { display: flex; flex-direction: column; gap: 10px; }

/* --- barra de risco (sempre visível) ------------------------------------ */
.px-topbar { position: sticky; top: 0; z-index: 40; background: #fff; border-bottom: 1px solid var(--border-soft);
  padding: 12px 24px; display: flex; align-items: center; gap: 18px; }
.px-modo { display: inline-flex; align-items: center; gap: 10px; border-radius: var(--radius-pill);
  padding: 7px 18px 7px 14px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: #fff; color: var(--preshh-blue); border: 2px solid var(--border-soft); }
.px-modo__nota { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-soft); }
.px-modo__dot { width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--preshh-cyan); }
.px-modo--real { background: var(--preshh-red); color: #fff; border-color: transparent; padding: 9px 18px 9px 14px; }
.px-modo--real .px-modo__nota { color: rgba(255,255,255,.9); }
.px-modo--real .px-modo__dot { background: #fff; border: 0; }

/* Sinalizacao de gravacao real: PRESENTE, mas sem gritar (ajuste do dono, 30/07/2026).
   Saiu a faixa vermelha de 5px colada no topo da janela e saiu o pulsar do ponto — os dois
   ficavam berrando a tela inteira, o tempo todo, mesmo enquanto o operador so lia numeros.
   O que FICA: o selo vermelho solido na barra (leitura instantanea do modo) e a borda
   vermelha na barra de acao, ou seja, exatamente onde mora o botao que grava. O sinal
   passou de ambiente para pontual — nao foi removido. Se um dia alguem quiser suavizar
   mais, o piso e este: tem que sobrar ALGO que distinga simulacao de gravacao real sem
   precisar clicar. */
body.gravacao-real .px-acoes { border: 2px solid var(--preshh-red); }

/* Empresa ativa: nunca só cor — sempre cor + nome + ícone juntos. */
.px-empresa { display: flex; align-items: center; gap: 9px; border-radius: var(--radius-pill);
  border: 2px solid var(--border-soft); background: #fff; padding: 6px 14px 6px 8px; cursor: pointer; font-family: var(--font-brand); }
.px-empresa__icone { width: 30px; height: 30px; border-radius: 50%; color: #fff; font-weight: 700; flex: none;
  display: inline-flex; align-items: center; justify-content: center; }
.px-empresa__rot { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.px-empresa__nome { display: block; font-size: 15px; font-weight: 700; }
.px-empresa--aluguel .px-empresa__icone { background: var(--empresa-aluguel); }
.px-empresa--aluguel .px-empresa__nome { color: var(--empresa-aluguel); }
.px-empresa--bar .px-empresa__icone { background: var(--empresa-bar); }
.px-empresa--bar .px-empresa__nome { color: var(--empresa-bar); }

/* --- menu hambúrguer (colapsado em toda largura) ------------------------ */
.px-hamburguer { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--border-soft); background: #fff;
  cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; flex: none; }
.px-hamburguer span { width: 18px; height: 2.5px; border-radius: 2px; background: var(--preshh-blue); }
.px-drawer { position: fixed; inset: 0; z-index: 60; display: flex; }
.px-drawer[hidden] { display: none; }
.px-drawer__nav { width: 372px; max-width: 88vw; height: 100%; overflow-y: auto; background: #fff;
  padding: 22px; display: flex; flex-direction: column; gap: 22px; box-shadow: var(--shadow-pop); }
.px-drawer__scrim { flex: 1; border: 0; background: rgba(18,34,74,.44); cursor: pointer; }
.px-menu-item { width: 100%; text-align: left; padding: 14px; border-radius: var(--radius-sm);
  border: 2px solid var(--border-soft); background: #fff; cursor: pointer; font-family: var(--font-brand);
  display: flex; gap: 12px; align-items: flex-start; }
.px-menu-item:hover { border-color: var(--preshh-cyan); background: var(--surface-tint); }
.px-menu-item--futuro { border: 1px dashed var(--border-soft); background: #fbfdff; cursor: default; color: var(--ink-soft); }
.px-menu-grupo__rot { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; }

/* --- upload (arrastar-e-soltar de verdade) ------------------------------ */
.px-upload { width: 100%; border: 2px dashed var(--border-soft); background: var(--surface-tint);
  border-radius: var(--radius-md); padding: 42px 24px; cursor: pointer; font-family: var(--font-brand);
  display: flex; flex-direction: column; align-items: center; gap: 10px; }
.px-upload:hover, .px-upload.is-dragover { border-color: var(--preshh-cyan); background: #e6f4fd; }
.px-upload__icone { width: 52px; height: 52px; border-radius: 50%; border: 3px solid var(--preshh-cyan);
  color: var(--preshh-cyan); font-size: 24px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }

/* --- progresso ----------------------------------------------------------- */
.px-progresso { height: 14px; border-radius: var(--radius-pill); background: var(--surface-tint); overflow: hidden; }
.px-progresso__barra { height: 100%; border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #0b4395 0%, #009fe3 100%); transition: width 700ms linear; }
.px-progresso--indeterminado .px-progresso__barra { width: 34%; animation: px-slide 1.5s infinite linear; }
@keyframes px-slide { from { transform: translateX(-100%) } to { transform: translateX(300%) } }

/* --- barra de ação fixa + modal de confirmação -------------------------- */
.px-acoes { position: sticky; bottom: 0; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-pop);
  padding: 18px 24px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.px-acoes__texto { flex: 1; min-width: 280px; font-size: 15px; line-height: 1.5; }
.px-modal { position: fixed; inset: 0; z-index: 80; background: rgba(18,34,74,.5);
  display: flex; align-items: center; justify-content: center; padding: 24px; }
.px-modal[hidden] { display: none; }
.px-modal__box { width: 100%; max-width: 560px; background: #fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop); overflow: hidden; }
.px-modal__head { padding: 24px 28px; border-bottom: 1px solid var(--border-soft); display: flex; gap: 14px; align-items: flex-start; }
.px-modal__body { padding: 24px 28px; display: flex; flex-direction: column; gap: 18px; }
.px-modal__foot { padding: 20px 28px; border-top: 1px solid var(--border-soft); background: #fbfdff;
  display: flex; gap: 12px; justify-content: flex-end; }
.px-resumo { border-radius: var(--radius-md); background: var(--surface-tint); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.px-resumo__linha { display: flex; justify-content: space-between; gap: 16px; }
.px-resumo__linha span { color: var(--ink-soft); }
.px-toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 90;
  background: var(--preshh-green-dark); color: #fff; border-radius: var(--radius-pill); padding: 15px 26px;
  box-shadow: var(--shadow-pop); display: flex; align-items: center; gap: 14px; font-size: 16px; font-weight: 600; }
/* BUG REAL (30/07/2026): sem esta linha o aviso ficava PERMANENTEMENTE na tela, cobrindo a
   barra de acoes. O `display:flex` acima e regra de AUTOR e vence o `[hidden]{display:none}`
   da folha do NAVEGADOR — o atributo hidden do HTML virava decoracao. Todo componente com
   display proprio + atributo hidden precisa deste par (px-drawer e px-modal ja tinham). */
.px-toast[hidden] { display: none; }

/* --- layout -------------------------------------------------------------- */
.px-main { max-width: 1560px; width: 100%; margin: 0 auto; padding: 32px 24px 80px; }
.px-main--estreito { max-width: 900px; }
.px-stack { display: flex; flex-direction: column; gap: 28px; }
.px-grid-rotinas { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }

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

/* ==========================================================================
   Complementos da implementacao (nao vieram no handoff)
   ========================================================================== */

/* A empresa ativa vem da CONFIGURACAO (contaazul.accounts.<chave>.cor), nao de
   duas classes fixas: o sistema aceita N empresas. A cor entra por --acct, e o
   nome e a inicial continuam presentes — a regra "nunca so cor" vale igual. */
.px-empresa { --acct: var(--ink-soft); max-width: 260px; }
.px-empresa__icone { background: var(--acct); }
/* Nome de empresa e configuravel e pode ser longo ("Aluguel (PRESHH MAQUINAS)"):
   corta com reticencias em vez de vazar para fora da barra. */
.px-empresa__nome { color: var(--acct); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* Rotina em uso, no painel lateral. */
.px-menu-item--ativo { border-color: var(--preshh-cyan); background: var(--surface-tint); }

/* Linha de identificador copiavel. */
.px-copiar { border: 0; background: none; cursor: pointer; color: var(--preshh-blue);
  font-family: var(--font-brand); font-size: 13px; padding: 2px 6px; border-radius: 6px; }
.px-copiar:hover { background: var(--surface-tint); }

/* Estado vazio positivo — "nao ha nada para conferir" e uma boa noticia. */
.px-vazio-bom { display: flex; align-items: center; gap: 14px; padding: 20px 22px;
  border-radius: var(--radius-md); background: #eef8ea; border-left: 6px solid var(--preshh-green);
  font-size: 16px; line-height: 1.5; }

/* Linha de empresa no cartao de conexoes. */
.px-linha-empresa { display: flex; align-items: center; gap: 12px; padding: 14px 0;
  border-top: 1px solid var(--border-soft); }
.px-linha-empresa__dados { flex: 1; min-width: 0; }
.px-linha-empresa__nome { display: block; font-weight: 700; font-size: 15px; }

/* Cartao de empresa na tela de envio. A ativa ganha borda na cor propria — o
   contorno mais forte e o sinal de "e aqui que a baixa cai".

   DUAS LINHAS FIXAS (identidade em cima, conexao embaixo). A versao anterior era um
   unico flex com wrap: o COMPRIMENTO DO NOME decidia o layout, entao "Vendas (PRESHH
   BAR)" e "Aluguel (PRESHH MAQUINAS)" produziam cartoes de alturas e arranjos
   diferentes lado a lado. Com as linhas fixas, qualquer nome cai no mesmo desenho. */
.px-empresas-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 14px; align-items: stretch; }
.px-empresa-cartao { --acct: var(--ink-soft); display: flex; flex-direction: column;
  border-radius: var(--radius-md); border: 1px solid var(--border-soft); background: #fff; overflow: hidden; }
.px-empresa-cartao--ativa { border: 2px solid var(--acct); }

/* Linha 1. E um <button> quando a empresa esta INATIVA (o cartao inteiro troca de
   empresa) e um <div> quando ja esta ativa (nao ha para onde ir). O reset de
   aparencia vale para os dois para que fiquem visualmente identicos. */
.px-empresa-cartao__troca { margin: 0; display: flex; flex: 1; }
.px-empresa-cartao__alvo { flex: 1; width: 100%; display: flex; align-items: center; gap: 14px;
  padding: 18px; text-align: left; background: none; border: 0; color: inherit;
  font-family: var(--font-brand); font-size: 15px; }
button.px-empresa-cartao__alvo { cursor: pointer; }
button.px-empresa-cartao__alvo:hover { background: var(--surface-tint); }
button.px-empresa-cartao__alvo:hover .px-empresa-cartao__usar { color: var(--preshh-cyan); }

.px-empresa-cartao__dados { flex: 1; min-width: 0; }
.px-empresa-cartao__nome { display: block; font-size: 17px; font-weight: 700; color: var(--acct); }
.px-empresa-cartao__status { display: block; font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
/* Diz o que o clique faz. Sem este rotulo o cartao seria um alvo silencioso — e o que
   ele dispara e a escolha de EM QUAL EMPRESA a baixa cai. */
.px-empresa-cartao__usar { font-size: 13px; font-weight: 700; color: var(--preshh-blue); white-space: nowrap; }

/* Linha 2 — sempre presente, mesmo vazia, para as linhas casarem entre os cartoes. */
.px-empresa-cartao__acoes { display: flex; gap: 10px; flex-wrap: wrap; padding: 0 18px 16px; min-height: 16px; }

/* Alerta tingido pela cor da empresa (linha de seguranca do envio). */
.px-alerta--empresa { border-left-color: var(--acct, var(--preshh-cyan)); }
.px-alerta--empresa .px-alerta__icone { background: var(--acct, var(--preshh-cyan)); }

/* Cabecalho de secao. */
.px-secao__rot { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 10px; }
.px-secao__titulo { font-size: 24px; font-weight: 700; margin: 0 0 4px; }

/* Campo de busca. */
.px-busca { width: 100%; max-width: 420px; font-family: var(--font-brand); font-size: 15px;
  padding: 11px 16px; border: 2px solid var(--border-soft); border-radius: var(--radius-pill);
  background: #fff; color: var(--ink); }
.px-busca:focus { border-color: var(--preshh-cyan); outline: none; }

/* --- campos de formulario ------------------------------------------------ */
.px-rotulo { display: block; font-size: 13px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.px-campo { width: 100%; font-family: var(--font-brand); font-size: 17px; padding: 14px 16px;
  border: 2px solid var(--border-soft); border-radius: var(--radius-sm); background: #fff; color: var(--ink); }
.px-campo:focus { border-color: var(--preshh-cyan); outline: none; }

/* Senha com o botao "Mostrar" DENTRO do campo. O padding a direita reserva o espaco
   para o botao nao cobrir o que esta sendo digitado. */
.px-campo-senha { position: relative; }
.px-campo-senha .px-campo { padding-right: 104px; }
.px-campo-senha__ver { position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; cursor: pointer; font-family: var(--font-brand); font-size: 13px;
  font-weight: 700; color: var(--preshh-blue); padding: 8px 12px; border-radius: var(--radius-sm); }
.px-campo-senha__ver:hover { background: var(--surface-tint); }

/* --- tela de entrada ------------------------------------------------------ */
/* Sem barra de topo: antes do login nao existe empresa ativa nem modo de gravacao. */
.px-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.px-login__caixa { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 18px; }
.px-login__card { display: flex; flex-direction: column; gap: 22px; }
.px-login__marca { display: flex; flex-direction: column; gap: 10px; }
.px-login__sub { margin: 0; font-size: 20px; font-weight: 700; color: var(--ink); }
.px-login__form { display: flex; flex-direction: column; gap: 18px; }
.px-login__quem { margin: 0; font-size: 15px; color: var(--ink-soft); }
.px-login__rodape { margin: 0; padding: 0 6px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }

/* Sair. Discreto DE PROPOSITO, nunca vermelho: sair nao destroi nada — nada se perde
   e basta entrar de novo. O vermelho da paleta esta reservado para gravacao real e
   severidade critica; gastar ele aqui diluiria o unico sinal que precisa ser inequivoco.
   O rotulo acompanha o icone em TODA largura (ver o comentario no layout). */
.px-logout-form { margin: 0; }
.px-btn--sair { flex: none; gap: 9px; padding: 10px 20px 10px 16px; font-size: 15px; }
.px-btn--sair:hover { border-color: var(--preshh-cyan); background: var(--surface-tint); }

/* ==========================================================================
   Renomear comissoes de franqueado (Frente 4)
   Bloco ADITIVO: o que veio do handoff desta tela, em oito familias de classe
   (.px-grupo--gravado/--simulado/--ok com .px-grupo__enum, .px-pill--gravado,
   .px-depara, .px-formato, .px-interrompido e .px-sinais) — o numero de
   SELETORES e maior, porque cada familia traz tambem os seus elementos BEM
   (.px-depara__de, .px-interrompido__grid etc.) e o recorte responsivo. O resto
   do arquivo nao foi tocado — o handoff e um retrato ANTIGO da folha (64 classes
   contra 76 aqui), e sobrescreve-lo apagaria a tela de login inteira, os
   cartoes de empresa e as variantes de .px-valor.
   ========================================================================== */

/* Severidade propria desta tela. `gravado` existe porque
   RENOMEADO_SEM_CONFIRMACAO nao e erro nem sucesso: a escrita ACONTECEU e so a
   conferencia falhou. Precisa ser visualmente distinto de ERRO_API — onde nada
   foi gravado e reprocessar e a verificacao — porque as acoes sao opostas.
   Regra: em .px-grupo--gravado NUNCA renderize um botao de reprocessar. */
.px-grupo--gravado { border-left-color: var(--preshh-purple); }
.px-grupo--gravado .px-grupo__icone { background: var(--preshh-purple); }
.px-pill--gravado { background: var(--preshh-purple); }
.px-grupo--simulado { border-left-color: var(--preshh-cyan); }
.px-grupo--simulado .px-grupo__icone { background: var(--preshh-cyan); }
.px-grupo--ok { border-left-color: var(--preshh-green); }
.px-grupo--ok .px-grupo__icone { background: var(--preshh-green); }

/* Rotulo tecnico do status, sob o titulo em prosa. E a MESMA palavra que sai na
   coluna "Status" do XLSX — quem cruza a planilha com a tela acha pelo texto. */
.px-grupo__enum { display: block; margin-top: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; letter-spacing: .04em; color: var(--ink-soft); }

/* Celula de -> para: duas linhas, monoespacado, alvo em negrito.
   Duas colunas largas seriam ilegiveis em 1.100 linhas. */
.px-depara { min-width: 340px; }
.px-depara__de { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
  color: var(--ink-soft); line-height: 1.45; }
.px-depara__para { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px;
  font-weight: 700; color: var(--ink); line-height: 1.45; margin-top: 3px; }

/* Previa do formato do nome, na escolha de competencia. */
.px-formato { border-radius: var(--radius-md); background: var(--surface-tint); padding: 18px 20px; }
.px-formato__rot { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 10px; }
.px-formato code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }

/* Lote interrompido: moldura do relatorio inteiro, nao um item de lista.
   Sem ela, um lote parado no meio parece um lote completo. */
.px-interrompido { background: #fdecea; border: 2px solid var(--preshh-red);
  border-radius: var(--radius-lg); padding: 26px 28px; display: flex; gap: 20px; align-items: flex-start; }
.px-interrompido__icone { width: 44px; height: 44px; border-radius: 50%; background: var(--preshh-red);
  color: #fff; font-size: 22px; font-weight: 700; flex: none;
  display: inline-flex; align-items: center; justify-content: center; }
.px-interrompido__titulo { font-size: 24px; font-weight: 700; color: var(--preshh-red); margin-bottom: 8px; }
/* 3 colunas fixas: sao 3 contagens, e uma linha orfa num auto-fit exporia a cor
   da divisoria (o gap de 1px sobre fundo rosa) como uma laje vazia.
   Carimbo de hora fica na prosa acima — e timestamp, nao contagem. */
.px-interrompido__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: #f5c9c5; border-radius: var(--radius-md); overflow: hidden; }
.px-interrompido__grid > div { background: #fff; padding: 16px 18px; }

/* Sinais que nao se leem nas contagens: lote interrompido (acima),
   listagem truncada e alerta de volume. Sempre acima da lista, nunca dentro. */
.px-sinais { display: flex; flex-direction: column; gap: 10px; }

@media (max-width: 620px) {
  .px-interrompido { flex-direction: column; }
  .px-interrompido__grid { grid-template-columns: 1fr; }
}

/* A barra de topo encolhe com elegancia em tela estreita. */
@media (max-width: 720px) {
  .px-topbar { padding: 10px 14px; gap: 10px; flex-wrap: wrap; }
  .px-modo__nota { display: none; }
  .px-empresa__rot { display: none; }
  .px-main { padding: 20px 14px 60px; }
}