/* ============================================================================
   ALERTA BNMP — área logada do cliente (consulta).
   Direção A (clara, data-first) + modo escuro. Inter em toda a UI, inclusive dados/números.
   Acento = vermelho do logo. Card = espelho do alerta do bot.
   Documento próprio (app_base.html) — independente do site.css escuro da landing.
   ========================================================================== */

/* Fonte auto-hospedada — servida de /static/fonts, sem CDN externo. Subconjunto latin cobre PT-BR. */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/static/fonts/inter-variable.woff2) format('woff2')}

:root{
  --red:#E01218; --red-ink:#B00910; --red-soft:rgba(224,18,24,.08); --red-soft-2:rgba(224,18,24,.14);
  --bg:#F4F7FB; --surface:#FFFFFF; --panel:#EDF1F7; --rail:#FFFFFF;
  --line:#E2E8F0; --line-2:#CBD5E1;
  --text:#0F172A; --text-2:#475569; --text-3:#8A97A8;
  --amber-bg:#FEF3C7; --amber-bd:#F1C475; --amber-ink:#92590A;
  --green-bg:#DCFCE7; --green-bd:#86E0A6; --green-ink:#15803D;
  --slate-bg:#EEF2F7; --slate-bd:#D9E1EC; --slate-ink:#475569;
  --shadow:0 1px 2px rgba(15,23,42,.04), 0 8px 24px -16px rgba(15,23,42,.22);
  --shadow-card:0 1px 0 rgba(15,23,42,.03);
  --r:11px; --r-sm:8px;
}
[data-theme="dark"]{
  --red:#FF4147; --red-ink:#FF6166; --red-soft:rgba(255,65,71,.12); --red-soft-2:rgba(255,65,71,.18);
  --bg:#0A0E16; --surface:#121826; --panel:#0E1420; --rail:#0E1420;
  --line:#1F2A3A; --line-2:#314056;
  --text:#E7ECF4; --text-2:#9AA8BC; --text-3:#5F6E83;
  --amber-bg:rgba(245,158,11,.13); --amber-bd:rgba(245,158,11,.34); --amber-ink:#FBD24E;
  --green-bg:rgba(34,197,94,.13); --green-bd:rgba(34,197,94,.34); --green-ink:#56DD8B;
  --slate-bg:rgba(148,163,184,.10); --slate-bd:rgba(148,163,184,.22); --slate-ink:#9AA8BC;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 30px -18px rgba(0,0,0,.7);
  --shadow-card:0 1px 0 rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
.mono{font-family:'Inter',system-ui,-apple-system,sans-serif;font-variant-numeric:tabular-nums}
.ic{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic-sm{width:15px;height:15px}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}

/* ── Shell ─────────────────────────────────────────────── */
.app{display:grid;grid-template-columns:78px 1fr;min-height:100vh}
.rail{background:var(--rail);border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 0;position:sticky;top:0;height:100vh}
.brand-badge{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;margin-bottom:10px;overflow:hidden;box-shadow:0 6px 16px -8px var(--red)}
.brand-logo{width:100%;height:100%;object-fit:cover}
.nav-item{width:58px;padding:9px 0 7px;border-radius:11px;display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--text-3);font-size:10px;font-weight:500;position:relative;transition:.15s;text-align:center}
.nav-item:hover{color:var(--text);background:var(--panel)}
.nav-item.on{color:var(--red);background:var(--red-soft)}
.nav-item.on::before{content:"";position:absolute;left:-1px;top:11px;bottom:11px;width:3px;border-radius:0 3px 3px 0;background:var(--red)}
.nav-item.soon{color:var(--text-3);opacity:.55;cursor:default}
.nav-item.soon:hover{background:transparent;color:var(--text-3)}
.nav-item .soon-tag{font-size:8px;letter-spacing:.04em;text-transform:uppercase;opacity:.8}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;padding:13px 26px}
.tb-title h1{margin:0;font-size:18px;font-weight:700;letter-spacing:-.01em}
.tb-title span{font-size:12px;color:var(--text-3);font-weight:500}
.tb-title .mono{font-weight:600;color:var(--text-2)}
.tb-sp{flex:1}
.icon-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--text-2);display:grid;place-items:center;transition:.15s}
.icon-btn:hover{color:var(--text);border-color:var(--line-2)}
.content{padding:24px 26px 60px;max-width:1100px}

/* ── Botões / chips ────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 16px;border-radius:10px;font-size:13.5px;font-weight:600;border:1px solid transparent;transition:.15s;white-space:nowrap}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 6px 16px -10px var(--red)}
.btn-primary:hover{background:var(--red-ink)}
.btn-ghost{background:var(--surface);color:var(--text);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--line-2)}
.btn-soft{background:var(--red-soft);color:var(--red-ink);border-color:transparent}
.btn-soft:hover{background:var(--red-soft-2)}
.btn-sm{height:32px;padding:0 12px;font-size:12.5px;border-radius:8px}
.btn-lg{height:44px;padding:0 22px;font-size:15px}
.btn-detalhe{gap:6px}
.btn-detalhe .chev-forward{transform:rotate(-90deg);transition:transform .15s;margin-left:-2px}
.btn-detalhe:hover{background:var(--red);color:#fff;box-shadow:0 6px 16px -10px var(--red)}
.btn-detalhe:hover .chev-forward{transform:rotate(-90deg) translateX(3px)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.pill{display:inline-flex;align-items:center;gap:5px;min-height:23px;padding:2px 9px;border-radius:12px;font-size:11.5px;font-weight:600;line-height:1.3;border:1px solid var(--line);background:var(--panel);color:var(--text-2);max-width:100%}
.pill-dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.amber{background:var(--amber-bg);border-color:var(--amber-bd);color:var(--amber-ink)}
.pill.green{background:var(--green-bg);border-color:var(--green-bd);color:var(--green-ink)}
.pill.slate{background:var(--slate-bg);border-color:var(--slate-bd);color:var(--slate-ink)}
.pill.red{background:var(--red-soft);border-color:var(--red-soft-2);color:var(--red-ink)}
.pill .ic{width:12px;height:12px;flex:none}

/* ── Conteúdo: títulos e estados ───────────────────────── */
.app-h2{font-weight:700;font-size:17px;margin:26px 0 10px}
.lead{color:var(--text-2);font-size:14.5px;margin:0 0 22px}
.lead b{color:var(--text);font-weight:600}
.empty{color:var(--text-2);background:var(--surface);border:1px dashed var(--line-2);border-radius:var(--r);padding:34px 28px;text-align:center;margin:6px 0 22px;display:flex;flex-direction:column;align-items:center;gap:10px}
.empty .ic{width:30px;height:30px;color:var(--text-3);stroke-width:1.6}
.fine{color:var(--text-3);font-size:12.5px;margin:12px 0 0}
.page-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ── Cidades ───────────────────────────────────────────── */
.cidades{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:10px}
.cidade{display:flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-card);padding:14px 16px;position:relative;overflow:hidden}
.cidade::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--red)}
.cidade .city-ic{width:36px;height:36px;border-radius:9px;background:var(--red-soft);color:var(--red);display:grid;place-items:center;flex:none}
.cidade .city-ic .ic{width:18px;height:18px}
.cidade-nome{font-size:16px;font-weight:700;letter-spacing:-.01em}
.cidade-uf{color:var(--text-3);font-weight:500}
.cidade form{margin-left:auto}
.btn-rm{background:var(--surface);border:1px solid var(--line);color:var(--text-2);border-radius:8px;height:34px;padding:0 13px;font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;gap:6px;transition:.15s}
.btn-rm:hover{color:var(--red-ink);border-color:var(--red-soft-2);background:var(--red-soft)}

/* ── Card = alerta do bot ──────────────────────────────── */
.cards{display:grid;gap:12px}
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-card);overflow:hidden;transition:.15s}
.card:hover{border-color:var(--line-2)}
.card[open]{box-shadow:var(--shadow)}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent;z-index:1}
.card.cumpr::before{background:var(--green-bd)}
.card-sum{list-style:none;display:flex;align-items:flex-start;gap:11px;padding:15px 17px 15px 20px;cursor:pointer}
.card-sum::-webkit-details-marker{display:none}
.card-photo-wrap{flex:none}
.card-photo,.card-photo-avatar{width:76px;height:76px;border-radius:12px;object-fit:cover}
.card-photo{border:1px solid var(--line)}
.card-photo-avatar{border:1px dashed var(--line-2);background:var(--panel);display:grid;place-items:center;color:var(--text-3)}
.card-photo-avatar .ic{width:32px;height:32px;stroke-width:1.6}

/* ── Foto: gestos nativos do aparelho ──────────────────────────────────────
   O deterrente de cópia (app_base.html) é escopado para NÃO valer aqui, e as
   propriedades abaixo garantem que o long-press do iOS/Android mostre o menu
   nativo (Salvar no App Fotos / Compartilhar / Copiar). A foto não é link:
   o clique continua alternando o card, como sempre foi. */
.card-photo,.det-foto{-webkit-touch-callout:default;-webkit-user-drag:auto}

/* ── Campos copiáveis (CPF, RG, nome, filiação, nº do mandado) ──────────── */
.copiavel{cursor:pointer;-webkit-user-select:text;user-select:text;-webkit-touch-callout:default;
  border-radius:5px;transition:background .12s}
.copiavel:active{opacity:.6}
.copiavel.copiado{background:var(--panel);box-shadow:0 0 0 4px var(--panel)}

/* Aviso de cópia: fixo no rodapé. Um selo junto ao campo não cabe — os valores
   vivem num grid de 2 colunas e o selo invadiria a célula vizinha. */
.copiado-aviso{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:60;
  transform:translate(-50%,8px);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;
  font-size:13px;font-weight:600;padding:9px 16px;border-radius:999px;
  background:var(--text);color:var(--bg);box-shadow:0 6px 20px rgba(0,0,0,.18)}
.copiado-aviso.on{opacity:1;transform:translate(-50%,0)}
.card-name{font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.card-chev{align-self:center;color:var(--text-3);transition:.2s}
.card[open] .card-chev{transform:rotate(180deg)}
.cs-main{flex:1;min-width:0}
.cs-name-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cs-side{display:flex;align-items:flex-start;gap:11px;flex:none;padding-top:2px}
.cs-grid{display:grid;grid-template-columns:84px 1fr;gap:5px 14px;margin-top:11px}
.cs-grid .l{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-3);padding-top:2px}
.cs-grid .v{font-size:13px;color:var(--text-2);line-height:1.45}
.cs-grid .v b{color:var(--text);font-weight:600}
.cs-grid .v .mono{color:var(--text);font-weight:500}
.cs-grid .v .strong{color:var(--text);font-weight:500}
.cs-grid .v .muted{color:var(--text-3)}
.cs-grid .v .sep{color:var(--text-3);margin:0 7px}
.card-body{padding:0 17px 16px 20px}

.eyebrow{display:flex;align-items:center;gap:9px;margin:15px 0 9px;font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line)}
.eyebrow .ic{width:13px;height:13px;color:var(--text-2)}
/* Mesmo tratamento que `.filtros-grupo .eyebrow` dá na Busca, mas reusável:
   usado no separador de cidade da aba Início, onde o cinza sumia. */
.eyebrow--red{color:var(--red)}
.eyebrow--red .ic{color:var(--red)}
.eyebrow--red::after{background:var(--red-soft-2)}
.kv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px 16px}
.kv{display:flex;flex-direction:column;gap:1px;min-width:0}
.kv .k{font-size:10px;color:var(--text-3);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.kv .v{font-size:13px;color:var(--text);word-break:break-word}
.kv.wide{grid-column:span 3}
.kv.span2{grid-column:span 2}
.addr-list{display:grid;gap:8px}
.addr-line{display:flex;gap:10px;font-size:13px}
.addr-line .pin{width:26px;height:26px;border-radius:7px;background:var(--red-soft);color:var(--red);display:grid;place-items:center;flex:none}
.addr-line .pin .ic{width:14px;height:14px}
.addr-line .a-main{font-weight:500}
.addr-line .a-sub{color:var(--text-3);font-size:11.5px;margin-top:1px;display:flex;gap:12px;flex-wrap:wrap}
.addr-line .a-sub .mono{color:var(--text-2)}
.contato{margin-top:9px;font-size:12.5px;color:var(--text-2);display:flex;align-items:center;gap:7px}
.contato .ic{width:14px;height:14px;color:var(--text-3)}
.proc-line{display:flex;flex-direction:column;gap:5px;font-size:13px}
.proc-line .pl{display:flex;gap:9px;align-items:baseline}
.proc-line .pl .k{color:var(--text-3);font-size:11px;text-transform:uppercase;letter-spacing:.03em;font-weight:600;min-width:74px}
.card-foot{display:flex;align-items:center;gap:12px;margin-top:16px;padding-top:13px;border-top:1px solid var(--line)}
.card-acts{margin-left:auto;display:flex;gap:8px}
.fresh{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-3);font-weight:500}
.processing{display:flex;align-items:center;gap:8px;margin:2px 0 0;padding:10px 12px;border-radius:9px;background:var(--slate-bg);border:1px solid var(--slate-bd);color:var(--slate-ink);font-size:12px;font-weight:500}
.processing .ic{width:15px;height:15px}

/* ── Login ─────────────────────────────────────────────── */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:40px 20px;background:radial-gradient(680px 420px at 50% -10%,var(--red-soft-2),transparent 60%),var(--bg)}
.auth-card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:34px 30px;text-align:center}
.auth-badge{width:54px;height:54px;border-radius:14px;display:inline-grid;place-items:center;margin-bottom:14px;background:linear-gradient(160deg,var(--red),var(--red-ink));color:#fff;box-shadow:0 10px 24px -12px var(--red)}
.auth-badge .ic{stroke:#fff;width:28px;height:28px;stroke-width:2}
.auth-title{font-weight:700;font-size:22px;margin:0 0 6px;letter-spacing:-.01em}
.auth-sub{color:var(--text-2);font-size:14px;margin:0 0 22px;line-height:1.5}
.auth-erro{background:var(--red-soft);border:1px solid var(--red-soft-2);color:var(--red-ink);border-radius:10px;padding:10px 12px;font-size:13px;margin:0 0 18px}
.auth-widget{display:flex;justify-content:center;min-height:48px}
.auth-note{color:var(--text-3);font-size:13px;line-height:1.5;margin:0 0 18px}
/* Texto legal com link DENTRO da frase. Não usar .auth-note aqui: o alvo de
   toque de 44px dela (ver media query no fim do arquivo) é para link solto e,
   aplicado a link inline, abre um vão em volta das palavras e joga a pontuação
   para longe. Link em prosa continua inline. */
.auth-legal{color:var(--text-3);font-size:12.5px;line-height:1.6;margin:14px 0 0}
.auth-dev{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.auth-dev input{background:var(--bg);border:1px solid var(--line);border-radius:10px;color:var(--text);font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:13.5px;padding:12px 14px}
.auth-dev input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.auth-dev .btn{width:100%;justify-content:center}
.auth-form{display:flex;flex-direction:column;gap:10px;margin-top:18px;text-align:left}
.auth-form input[type="text"],.auth-form input[type="email"],.auth-form input[type="password"]{background:var(--bg);border:1px solid var(--line);border-radius:10px;color:var(--text);font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:13.5px;padding:12px 14px}
.auth-form input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.auth-form .btn{width:100%;justify-content:center}
.auth-check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2);text-align:left}
.auth-check a{color:var(--text)}

/* ── Inativo ───────────────────────────────────────────── */
.inativo{text-align:center;max-width:460px;margin:48px auto;display:flex;flex-direction:column;align-items:center;gap:8px}
.inativo .ic{width:38px;height:38px;color:var(--text-3);stroke-width:1.6;margin-bottom:6px}
.inativo .btn{margin-top:14px}

/* ── Busca nacional (Fase 3) ───────────────────────────── */
.filtros{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);
         box-shadow:var(--shadow-card);padding:18px 18px 16px;margin:2px 0 18px}
.filtros .fg{display:grid;grid-template-columns:repeat(12,1fr);gap:13px 12px}
/* min-width:0 é obrigatório: item de grid tem min-width:auto por padrão e o
   min-content de input[type=date] no iOS é maior que a coluna -> estoura a grade
   (campo saindo da tela e vizinho sobreposto). */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field.c2{grid-column:span 2}.field.c3{grid-column:span 3}
.field.c4{grid-column:span 4}.field.c5{grid-column:span 5}.field.c6{grid-column:span 6}
.field.c8{grid-column:span 8}.field.c12{grid-column:span 12}
.field label{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;color:var(--text)}
.field input,.field select{background:var(--panel);border:1.5px solid var(--line-2);border-radius:var(--r-sm);
  color:var(--text);font-family:inherit;font-size:14.5px;font-weight:500;height:42px;padding:0 13px;width:100%;transition:.15s}
.field input::placeholder{color:var(--text-3);font-weight:400}
.field input:hover,.field select:hover{border-color:#9AABC2}
.field input:focus,.field select:focus{background:var(--surface);outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.field .mono,.field input.mono{font-family:'Inter',system-ui,-apple-system,sans-serif}
/* iOS renderiza date com chrome proprio e largura minima propria; normalizar. */
.field input[type="date"]{-webkit-appearance:none;appearance:none;min-width:0;
  max-width:100%;line-height:normal;text-align:left}
.filtros-grupo{margin-top:16px;border-top:1px dashed var(--line-2);padding-top:15px}
.filtros-grupo:first-of-type{margin-top:0;border-top:none;padding-top:0}
.filtros-grupo .eyebrow{margin:0 0 11px;color:var(--red)}
.filtros-grupo .eyebrow .ic{color:var(--red)}
.filtros-grupo .eyebrow::after{background:var(--red-soft-2)}
.check-label{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--text);cursor:pointer;font-weight:600}
.check-label input[type="checkbox"]{width:18px;height:18px;accent-color:var(--red);cursor:pointer}
.filtros-acoes{display:flex;align-items:center;gap:10px;margin-top:13px}
.res-head{display:flex;align-items:baseline;gap:8px;margin:0 0 12px}
.res-head .n{font-size:15px;font-weight:700;color:var(--text)}
.res-head .q{font-size:12.5px;color:var(--text-3)}
.warn{display:flex;align-items:center;gap:9px;background:var(--amber-bg);border:1px solid var(--amber-bd);
      color:var(--amber-ink);border-radius:var(--r-sm);padding:11px 13px;font-size:13px;margin:0 0 16px}
.pager{display:flex;align-items:center;justify-content:center;gap:14px;margin:18px 0 4px;color:var(--text-2);font-size:13px}
.pager .btn-sm[aria-disabled="true"]{opacity:.4;pointer-events:none}

/* ── Responsivo: rail vira barra inferior no mobile ────── */
@media(max-width:768px){
  .app{grid-template-columns:1fr}
  .rail{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;height:auto;
        flex-direction:row;justify-content:space-around;gap:0;
        border-right:none;border-top:1px solid var(--line);z-index:50;
        /* safe-area: sem isso a barra fica sob o indicador de home do iPhone. */
        padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));
        box-shadow:0 -6px 20px -16px rgba(15,23,42,.4)}
  .rail .brand-badge{display:none}
  .nav-item{width:auto;flex:1;padding:6px 0}
  .nav-item.on::before{left:50%;top:-7px;bottom:auto;transform:translateX(-50%);width:24px;height:3px;border-radius:0 0 3px 3px}
  .content{padding:18px 16px calc(90px + env(safe-area-inset-bottom,0px))}
  .topbar{padding:12px 16px}
  .kv-grid{grid-template-columns:repeat(2,1fr)}
  .kv.wide,.kv.span2{grid-column:span 2}
  .filtros{padding:15px 14px 14px}
  .filtros .fg{grid-template-columns:repeat(2,1fr);gap:12px 10px}
  .field.c2,.field.c3,.field.c4,.field.c5,.field.c6,.field.c8{grid-column:span 1}
  .field.c12{grid-column:span 2}
  /* Opt-in por campo: m-full ocupa a linha toda, m-half divide ao meio.
     Vem depois das regras cN de proposito -- mesma especificidade, ganha por ordem. */
  .field.m-full{grid-column:span 2}
  .field.m-half{grid-column:span 1}
  /* 16px evita o zoom automatico do iOS ao focar; 46px = alvo de toque. */
  .field input,.field select{font-size:16px;height:46px}
  .filtros-acoes{margin-top:14px}
  .filtros-acoes .btn{height:44px}
  .filtros-acoes .btn-primary{flex:1;justify-content:center}
}
@media(max-width:520px){
  .cs-grid{grid-template-columns:74px 1fr}
  .kv-grid{grid-template-columns:1fr 1fr}
}

/* ── Painel de estatísticas (Fase 6) ───────────────────── */
.page-hint{font-size:12.5px;color:var(--text-3);text-align:center;margin:6px 0 0;padding:0 4px}
.page-hint a{color:var(--red)}

.painel-kpi-row{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px}
.painel-kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
            box-shadow:var(--shadow-card);padding:14px 20px;display:flex;flex-direction:column;gap:2px;min-width:120px}
.pk-n{font-size:24px;font-weight:700;color:var(--text);line-height:1}
.pk-l{font-size:11.5px;color:var(--text-3);font-weight:500}

.painel-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.painel-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
             box-shadow:var(--shadow-card);padding:18px 18px 14px}
.painel-card--wide{grid-column:span 2}
.painel-title{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
              color:var(--text-3);margin:0 0 14px}

.tip-search{background:var(--panel);border:1.5px solid var(--line-2);border-radius:var(--r-sm);
  color:var(--text);font-family:inherit;font-size:14.5px;font-weight:500;height:40px;padding:0 13px;
  width:100%;margin:0 0 12px;transition:.15s}
.tip-search::placeholder{color:var(--text-3);font-weight:400}
.tip-search:focus{background:var(--surface);outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}

.tip-table-wrap{max-height:420px;overflow-y:auto;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-sm)}
.tip-table{width:100%;border-collapse:collapse;font-size:13.5px}
.tip-table thead th{position:sticky;top:0;background:var(--panel);color:var(--text-3);
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);user-select:none}
.tip-table tbody td{padding:8px 12px;border-bottom:1px solid var(--line);color:var(--text)}
.tip-table tbody tr:last-child td{border-bottom:none}
.tip-th-num,.tip-td-num{text-align:right;font-variant-numeric:tabular-nums}
.tip-th-sortable{cursor:pointer}
.tip-th-sortable:hover{color:var(--text)}

.tip-table thead th.tip-th-num{text-align:right}

.tip-td-pct{position:relative}
.tip-bar{position:absolute;top:4px;bottom:4px;right:0;background:var(--red-soft);
  border-radius:4px 0 0 4px;width:var(--pct);z-index:0}
.tip-pct-valor{position:relative;z-index:1}

@media(max-width:768px){
  .painel-grid{grid-template-columns:1fr}
  .painel-card--wide{grid-column:span 1}
  .painel-kpi-row{gap:8px}
}

/* ── Paywall ──────────────────────────────────────────────────────────────────
   Tela de venda contextual (portal/paywall.py). Usa os tokens do tema, então
   acompanha claro/escuro sem regra extra. O bloco .pw-esqueleto é decorativo:
   representa o VOLUME de registros, nunca o conteúdo — dado pessoal não chega
   ao HTML. */
.pw{max-width:620px;margin:32px auto;display:flex;flex-direction:column;gap:26px}
.pw-prova{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-card);padding:26px 24px;text-align:center}
.pw-eyebrow{margin:0 0 6px;font-size:12px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--text-3)}
.pw-numero{margin:0;font-size:52px;line-height:1.05;font-weight:700;color:var(--red);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.pw-legenda{margin:6px 0 0;font-size:15px;color:var(--text-2)}

.pw-lista{list-style:none;margin:20px 0 0;padding:14px 0 0;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:9px}
.pw-lista li{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14px}
.pw-lista span{color:var(--text-2);text-align:left}
.pw-lista b{color:var(--text);font-variant-numeric:tabular-nums}

.pw-esqueleto{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:7px}
.pw-sk{height:12px;border-radius:6px;background:var(--panel)}
.pw-sk:nth-child(3n){width:88%}
.pw-sk:nth-child(3n+1){width:96%}
.pw-sk:nth-child(3n+2){width:78%}
.pw-nota-sk{margin:14px 0 0;display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:12.5px;color:var(--text-3)}
.pw-nota-sk .ic{color:var(--text-3)}

.pw-cta{display:flex;flex-direction:column;align-items:center;gap:10px}
.pw-cta .btn-lg{min-width:280px}
.pw-nota{margin:0;font-size:13px;color:var(--text-3)}

/* Explica por que a tela está fechada (ex.: trial vigente, que cobre só os
   alertas). Precisa de mais peso que .pw-nota: é informação que evita a
   sensação de ter sido enganado, não rodapé. */
.pw-nota-situacao{display:flex;align-items:flex-start;gap:8px;max-width:440px;
  margin:0 auto 16px;padding:11px 13px;border-radius:10px;text-align:left;
  background:var(--panel);color:var(--text-2);font-size:13px;line-height:1.45}
.pw-nota-situacao .ic{flex:none;margin-top:1px;color:var(--text-3)}

@media (max-width:560px){
  .pw{margin:18px auto}
  .pw-numero{font-size:42px}
  .pw-cta .btn-lg{min-width:0;width:100%}
}

/* ── Tela de assinatura ─────────────────────────────────────────────────────── */
.assinar-card{max-width:440px}
.metodos{display:flex;flex-direction:column;gap:16px;margin:22px 0 6px}
.metodo{display:flex;flex-direction:column;align-items:center;gap:6px}
.metodo .btn{width:100%;justify-content:center}
.metodo-nota{font-size:12.5px;color:var(--text-3);text-align:center}

/* ── Toast de confirmação (compartilhado) ───────────────────────────────────
   Estava duplicado num <style> local de app_cidades.html; promovido para cá
   quando o Perfil passou a usar o mesmo padrão. Um único jeito de confirmar
   ação em toda a área logada — antes o Perfil usava .lead cinza para "sucesso",
   que não parecia sucesso nenhum. */
.toast{border-radius:var(--r);padding:10px 14px;font-size:13px;font-weight:600;margin-bottom:16px}
.toast-ok{background:var(--green-bg);border:1px solid var(--green-bd);color:var(--green-ink)}
.toast-err{background:var(--amber-bg);border:1px solid var(--amber-bd);color:var(--amber-ink)}

/* ── Perfil ─────────────────────────────────────────────────────────────────
   Antes esta tela era <h2> + .auth-form solta no fundo — .auth-form é do card
   de login de 400px (inputs e botão em width:100%), então no .content de
   1100px tudo esticava. Agora são cards no mesmo padrão do resto do app. */
.perfil-cards{display:grid;gap:12px;max-width:620px}
.pf-card{padding:15px 16px}
.pf-card .eyebrow{margin:0 0 12px}

/* Assinatura: faixa lateral colorida pelo estado, como .cidade/.card fazem */
.pf-plano{position:relative;overflow:hidden;padding-left:19px}
.pf-plano::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--line-2)}
.pf-plano--ativo::before{background:var(--green-bd)}
.pf-plano--vencendo::before{background:var(--amber-bd)}
.pf-plano--vencido::before{background:var(--red)}
.pf-plano-topo{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pf-plano-nome{font-size:16px;font-weight:700;letter-spacing:-.01em;text-transform:capitalize}
.pf-plano-baixo{display:flex;align-items:flex-end;justify-content:space-between;
  gap:12px;margin-top:12px;flex-wrap:wrap}
.pf-plano-prazo{font-size:12.5px;color:var(--text-2)}
.pf-plano-prazo b{color:var(--text);font-variant-numeric:tabular-nums;font-weight:600}

/* Campos: reusa .field (label + input) da Busca, em coluna única até 620px */
.pf-campos{display:grid;gap:11px}
.pf-acoes{display:flex;justify-content:flex-end;margin-top:13px}
.pf-card .auth-erro{margin-bottom:12px}

/* Trocar senha colapsado — a queixa original era este bloco sempre aberto */
.pf-senha{margin-top:13px;border-top:1px solid var(--line);padding-top:12px}
.pf-senha summary{list-style:none;display:flex;align-items:center;gap:9px;cursor:pointer;
  font-size:13.5px;font-weight:600;color:var(--text-2);padding:7px 0}
.pf-senha summary::-webkit-details-marker{display:none}
.pf-senha summary:hover{color:var(--text)}
.pf-senha summary:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:6px}
.pf-chev{margin-left:auto;color:var(--text-3);transition:transform .2s}
.pf-senha[open] .pf-chev{transform:rotate(180deg)}
.pf-senha-corpo{padding-top:12px}

/* Telegram */
.pf-tg{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pf-tg-ic{width:38px;height:38px;border-radius:10px;background:var(--red-soft);
  color:var(--red);display:grid;place-items:center;flex:none}
.pf-tg-txt{min-width:0;flex:1;display:flex;flex-direction:column}
.pf-tg-user{font-size:14.5px;font-weight:600;word-break:break-word}
.pf-tg-sub{font-size:12px;color:var(--text-3)}
.pf-card .pf-tg + .fine{margin-top:11px}

/* Preferência de alerta */
.pf-pref{display:flex;align-items:flex-start;gap:12px;cursor:pointer}
.pf-pref input[type="checkbox"]{width:22px;height:22px;accent-color:var(--red);
  flex:none;margin-top:1px;cursor:pointer}
.pf-pref-txt{min-width:0;display:flex;flex-direction:column;gap:3px}
.pf-pref-nome{font-size:14px;font-weight:600}
.pf-pref-desc{font-size:12.5px;color:var(--text-3);line-height:1.45}

/* Rodapé: termos + sair */
.pf-rodape{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;max-width:620px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.pf-rodape .fine{margin:0}
.pf-rodape a{color:var(--text-2);text-decoration:underline;text-underline-offset:2px}
.pf-sair{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;
  border:1px solid var(--line);border-radius:8px;color:var(--text-2);
  font-size:12.5px;font-weight:600;text-decoration:none;transition:.15s}
.pf-sair:hover{color:var(--red-ink);border-color:var(--red-soft-2);background:var(--red-soft)}
.pf-sair:focus-visible{outline:2px solid var(--red);outline-offset:2px}

@media(max-width:560px){
  /* 16px evita o zoom automático do iOS ao focar o campo — mesmo motivo da
     regra equivalente nas telas de auth, logo abaixo. */
  .pf-campos .field input{font-size:16px;height:46px}
  .pf-acoes .btn{width:100%;justify-content:center;height:44px;font-size:14.5px}
  .pf-plano-baixo .btn{width:100%;justify-content:center;height:42px}
  .pf-rodape{flex-direction:column;align-items:stretch;gap:12px}
  .pf-sair{justify-content:center;height:44px}
  .pf-senha summary{padding:11px 0}
}

/* ── Toque no celular (login/cadastro) ──────────────────────────────────────
   Quase todo acesso é por celular. No dedo, os alvos das telas de auth ficavam
   abaixo do mínimo de ~44px: o botão primário tinha 38px e os links de apoio
   ("Esqueci minha senha", "Já tem conta? Entrar", "Termos de Uso") apenas 16px,
   colados no botão vermelho — errar o toque e enviar o formulário era fácil. */
@media (max-width:560px){
  .auth-card{padding:28px 20px}
  .auth-form input[type="text"],
  .auth-form input[type="email"],
  .auth-form input[type="password"]{padding:14px;font-size:16px} /* 16px evita o zoom automático do iOS ao focar */
  .auth-form .btn{height:48px;font-size:15px;width:100%;justify-content:center}
  .auth-form{gap:12px}
  /* Respiro entre o botão e os links, e área de toque real nos links. */
  .auth-note{margin-top:16px}
  .auth-note a{display:inline-block;padding:12px 6px} /* → 44px de altura */
  .auth-check{align-items:flex-start;gap:12px;padding:6px 0;font-size:14px;line-height:1.45}
  .auth-check input[type="checkbox"]{width:22px;height:22px;flex:none;margin-top:1px}
}

/* ── Modal de confirmação (confirmar.js) ───────────────────────────────
   Substitui o confirm()/prompt() nativo do navegador. Card centralizado,
   mesmo comportamento em celular e desktop. O <dialog> nativo dá Esc,
   trava de foco e camada superior de graça — nada disso em JS.
   ELEMENTO ESPELHADO: o mesmo componente existe em web/static/app.css com
   os tokens do CRM. Mudou aqui, olhe lá. */
.cf-dlg{
  border:0;padding:0;background:transparent;color:var(--text);
  width:100%;max-width:min(360px,calc(100vw - 32px));margin:auto;
}
.cf-dlg::backdrop{background:rgba(15,23,42,.45)}
[data-theme="dark"] .cf-dlg::backdrop{background:rgba(0,0,0,.62)}
.cf-card{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 24px 50px -20px rgba(15,23,42,.45);padding:18px;
  display:flex;flex-direction:column;
  animation:cf-entrada .2s cubic-bezier(.22,1,.36,1);
}
[data-theme="dark"] .cf-card{box-shadow:0 24px 50px -18px rgba(0,0,0,.75)}
@keyframes cf-entrada{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}
.cf-seal{
  width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:var(--red-soft);color:var(--red);margin-bottom:11px;
}
.cf-seal[hidden]{display:none}
.cf-seal svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* text-transform/color explícitos: o CRM tem um `h2` global uppercase+cinza e
   o componente é espelhado lá. Fixar aqui também mantém os dois idênticos. */
.cf-title{margin:0;font-size:15.5px;font-weight:700;letter-spacing:-.012em;line-height:1.3;
  text-transform:none;color:var(--text)}
.cf-msg{margin:6px 0 0;font-size:13px;color:var(--text-2);line-height:1.5}
.cf-msg[hidden]{display:none}
.cf-campo{display:flex;flex-direction:column;gap:5px;margin-top:13px;font-size:12.5px;
  font-weight:600;color:var(--text-2)}
.cf-campo[hidden]{display:none}
.cf-campo textarea{
  font:inherit;font-size:14px;font-weight:400;color:var(--text);resize:vertical;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 11px;
}
/* Mesmo anel de foco dos outros campos do portal (.field, .auth-form): borda
   vermelha + halo suave. O outline duro de 2px lia como estado de erro. */
.cf-campo textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.cf-acts{display:flex;gap:8px;margin-top:16px}
.cf-btn{
  flex:1;appearance:none;font:inherit;font-size:13.5px;font-weight:650;
  border:1px solid transparent;border-radius:10px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 14px;transition:.15s;
}
.cf-btn:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.cf-cancel{background:var(--surface);color:var(--text);border-color:var(--line-2)}
.cf-cancel:hover{background:var(--panel)}
/* Neutro = escuro; destrutivo = vermelho da marca. O vermelho perde o peso
   se for usado também em "enviar mensagem" ou "solicitar saque". */
.cf-ok{background:var(--text);color:var(--surface)}
.cf-ok:hover{opacity:.88}
.cf-ok.destrutivo{background:var(--red);color:#fff;box-shadow:0 6px 16px -10px var(--red)}
.cf-ok.destrutivo:hover{background:var(--red-ink)}
@media (max-width:520px){
  .cf-btn{min-height:48px} /* alvo de toque no celular */
}
@media (prefers-reduced-motion:reduce){
  .cf-card{animation:none}
}

/* ── Indicador de envio (enviando.js) ──────────────────────────────────
   O ícone vira spinner e o texto fica: "Buscar" continua "Buscar", só a
   lupa gira. Todo ícone de botão é .ic-sm (15px), então o spinner tem o
   mesmo tamanho e a largura do botão não muda. Botão sem ícone ganha o
   spinner antes do texto. */
.btn[data-enviando],.btn-rm[data-enviando]{cursor:progress}
.btn[data-enviando][disabled],.btn-rm[data-enviando][disabled]{opacity:1}
.btn[data-enviando] .ic,.btn-rm[data-enviando] .ic{display:none}
.btn[data-enviando]::before,.btn-rm[data-enviando]::before{
  content:'';width:15px;height:15px;flex:none;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;
  animation:env-girar .7s linear infinite}
@keyframes env-girar{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .btn[data-enviando]::before,.btn-rm[data-enviando]::before{
    animation:env-pulsar 1s ease-in-out infinite}
}
@keyframes env-pulsar{50%{opacity:.35}}

/* ── Âncora dos resultados da busca ────────────────────────────────────
   O form GET aponta para #resultados: a página recarregada aterrissa na
   lista em vez do topo. A .topbar é sticky (~52px), então sem a margem o
   cabeçalho do resultado ficaria escondido atrás dela. */
#resultados{scroll-margin-top:64px}