:root{
  --roxo:#5c48d6; --roxo-2:#4a38bb; --roxo-luz:#efecff;
  --bg:#f4f4f7; --card:#ffffff; --borda:#e4e4ec;
  --txt:#1f1f2c; --txt-2:#6b6b80; --txt-3:#9a9aae;
  --ok:#12a150; --ok-bg:#e8f7ef;
  --alerta:#c98a00; --alerta-bg:#fdf3dd;
  --erro:#d92d4b; --erro-bg:#fdeaee;
  --raio:12px;
  --sombra:0 1px 2px rgba(20,20,40,.06),0 6px 18px rgba(20,20,40,.05);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:var(--roxo);text-decoration:none}
h1,h2,h3{margin:0;font-weight:600}

/* ---------- layout ---------- */
.app{display:flex;min-height:100vh}
.side{width:240px;flex:0 0 240px;background:#fff;border-right:1px solid var(--borda);
  padding:20px 14px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:4px}
.marca{display:flex;align-items:center;gap:10px;padding:6px 10px 20px}
.marca .bolha{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--roxo),#8a6cf0);
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:15px}
.marca b{display:block;font-size:14px;letter-spacing:-.2px}
.marca span{display:block;font-size:11px;color:var(--txt-2);line-height:1.4}
.nav{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;
  color:var(--txt-2);cursor:pointer;font-weight:500;border:none;background:none;width:100%;
  text-align:left;font-size:13.5px}
.nav:hover{background:#f6f5fb;color:var(--txt)}
.nav.on{background:var(--roxo-luz);color:var(--roxo-2);font-weight:600}
.nav .ic{width:18px;text-align:center;font-size:14px}
.nav .badge{margin-left:auto;background:var(--erro);color:#fff;border-radius:20px;
  font-size:10.5px;padding:1px 7px;font-weight:700}
.side .rodape{margin-top:auto;padding:12px;font-size:11px;color:var(--txt-3);line-height:1.5}
.rodape-sessao{margin-top:auto;padding-top:12px;border-top:1px solid var(--borda)}
.rodape-sessao #quemSou{display:block;padding:0 12px 8px;font-size:11px;color:var(--txt-3)}

.main{flex:1;min-width:0;padding:26px 32px 60px;max-width:1240px}
.trilha{font-size:12px;color:var(--txt-3);margin-bottom:6px}
.topo{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.topo h1{font-size:22px;letter-spacing:-.4px}
.topo p{margin:3px 0 0;color:var(--txt-2);font-size:13px}

/* ---------- cartoes/painel ---------- */
.painel{background:var(--card);border:1px solid var(--borda);border-radius:var(--raio);
  box-shadow:var(--sombra);overflow:hidden;margin-bottom:20px}
.painel > header{padding:14px 18px;border-bottom:1px solid var(--borda);display:flex;
  align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.painel > header h2{font-size:14.5px}
.painel > header .sub{font-size:12px;color:var(--txt-3);margin-top:2px}
.corpo{padding:18px}

.grade{display:grid;gap:14px;margin-bottom:20px}
.g5{grid-template-columns:repeat(5,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:1080px){.g5,.g4{grid-template-columns:repeat(2,1fr)}.g3,.g2{grid-template-columns:1fr}}
@media(max-width:760px){
  .app{flex-direction:column}
  .side{width:auto;flex:none;height:auto;position:sticky;top:0;z-index:20;
    flex-direction:row;overflow-x:auto;gap:6px;padding:10px 12px;
    border-right:none;border-bottom:1px solid var(--borda)}
  .side .marca,.side .rodape{display:none}
  .rodape-sessao{margin-top:0;padding-top:0;border-top:none;display:flex;align-items:center}
  .rodape-sessao #quemSou{display:none}
  .nav{width:auto;white-space:nowrap;padding:8px 12px}
  .main{padding:18px}
  .g5,.g4{grid-template-columns:1fr}
}

.kpi{background:var(--card);border:1px solid var(--borda);border-radius:var(--raio);
  padding:16px 18px;box-shadow:var(--sombra)}
.kpi .rot{font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--txt-3);font-weight:600}
.kpi .val{font-size:24px;font-weight:700;letter-spacing:-.6px;margin-top:6px}
.kpi .pe{font-size:12px;color:var(--txt-2);margin-top:4px}
.kpi.destaque{background:linear-gradient(135deg,#5c48d6,#7d5ce8);border-color:transparent;color:#fff}
.kpi.destaque .rot,.kpi.destaque .pe{color:rgba(255,255,255,.8)}

/* ---------- tabela ---------- */
.rolagem{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-weight:600;color:var(--txt-2);font-size:12px;padding:11px 14px;
  border-bottom:1px solid var(--borda);white-space:nowrap;background:#fafafc}
td{padding:12px 14px;border-bottom:1px solid #f1f1f6;vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:#fbfaff}
td .princ{font-weight:600}
td .sec{color:var(--txt-3);font-size:12px}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.vazio{padding:38px;text-align:center;color:var(--txt-3)}

/* ---------- selo ---------- */
.selo{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;
  font-size:11.5px;font-weight:600;white-space:nowrap}
.selo.ok{background:var(--ok-bg);color:var(--ok)}
.selo.alerta{background:var(--alerta-bg);color:var(--alerta)}
.selo.erro{background:var(--erro-bg);color:var(--erro)}
.selo.neutro{background:#f0f0f5;color:var(--txt-2)}
.selo.roxo{background:var(--roxo-luz);color:var(--roxo-2)}

/* ---------- botoes ---------- */
.btn{border:1px solid var(--borda);background:#fff;color:var(--txt);padding:7px 14px;
  border-radius:8px;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.btn:hover{background:#f7f7fb}
.btn.pri{background:var(--roxo);border-color:var(--roxo);color:#fff}
.btn.pri:hover{background:var(--roxo-2)}
.btn.perigo{color:var(--erro);border-color:#f3ccd5}
.btn.perigo:hover{background:var(--erro-bg)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.mini{padding:5px 10px;font-size:11.5px}
a.btn{display:inline-block;text-decoration:none;color:var(--txt)}
a.btn:hover{color:var(--txt)}
a.btn.pri,a.btn.pri:hover{color:#fff}

/* ---------- switch ---------- */
.sw{position:relative;display:inline-block;width:38px;height:21px;cursor:pointer}
.sw input{opacity:0;width:0;height:0}
.sw i{position:absolute;inset:0;background:#d3d3de;border-radius:20px;transition:.15s}
.sw i:before{content:"";position:absolute;width:15px;height:15px;left:3px;top:3px;background:#fff;
  border-radius:50%;transition:.15s}
.sw input:checked + i{background:var(--roxo)}
.sw input:checked + i:before{transform:translateX(17px)}

/* ---------- formularios ---------- */
label{display:block;font-size:12px;font-weight:600;color:var(--txt-2);margin-bottom:5px}
input,select{width:100%;padding:9px 11px;border:1px solid var(--borda);border-radius:8px;
  font-size:13.5px;font-family:inherit;background:#fff;color:var(--txt)}
input:focus,select:focus{outline:none;border-color:var(--roxo);box-shadow:0 0 0 3px rgba(92,72,214,.12)}
.campo{margin-bottom:14px}
.linha{display:grid;gap:12px}
.busca{position:relative;max-width:420px;flex:1}
.busca input{padding-left:32px}
.busca:before{content:"⌕";position:absolute;left:11px;top:8px;color:var(--txt-3);font-size:15px}

/* ---------- avisos ---------- */
.aviso{padding:12px 14px;border-radius:10px;font-size:13px;margin-bottom:14px;
  display:flex;gap:10px;align-items:flex-start;line-height:1.45}
.aviso.erro{background:var(--erro-bg);color:#8f1f36;border:1px solid #f6d3da}
.aviso.ok{background:var(--ok-bg);color:#0b6c37;border:1px solid #cbead9}
.aviso.info{background:var(--roxo-luz);color:var(--roxo-2);border:1px solid #ddd7ff}
.aviso.alerta{background:var(--alerta-bg);color:#8a6100;border:1px solid #f3e2b8}
.aviso b{display:block;margin-bottom:2px}

/* ---------- cartao visual ---------- */
.cartoes{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.cc{border:1px solid var(--borda);border-radius:12px;padding:16px;background:#fff;position:relative}
.cc.bloq{border-color:#f3ccd5;background:#fffafb}
.cc .band{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cc .marca-cc{font-weight:700;font-size:13px;letter-spacing:-.2px}
.cc .num{font-size:16px;letter-spacing:1px;font-weight:600;margin-bottom:10px;font-variant-numeric:tabular-nums}
.cc .meta{display:flex;gap:18px;font-size:11.5px;color:var(--txt-3)}
.cc .meta b{display:block;color:var(--txt);font-weight:600;font-size:12.5px;margin-top:1px}
.cc .acoes{display:flex;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid #f1f1f6}

/* ---------- modal ---------- */
.fundo{position:fixed;inset:0;background:rgba(20,20,40,.45);display:none;align-items:center;
  justify-content:center;padding:20px;z-index:50}
.fundo.on{display:flex}
.modal{background:#fff;border-radius:14px;width:100%;max-width:520px;max-height:90vh;overflow:auto;
  box-shadow:0 20px 60px rgba(20,20,40,.3)}
.modal header{padding:18px 20px;border-bottom:1px solid var(--borda);display:flex;
  align-items:center;justify-content:space-between}
.modal header h3{font-size:16px}
.modal .conteudo{padding:20px}
.modal footer{padding:14px 20px;border-top:1px solid var(--borda);display:flex;gap:10px;
  justify-content:flex-end;background:#fafafc}
.fechar{border:none;background:none;font-size:20px;color:var(--txt-3);cursor:pointer;line-height:1}

.paginacao{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;
  border-top:1px solid var(--borda);font-size:12.5px;color:var(--txt-2);gap:12px;flex-wrap:wrap}
.paginacao .btns{display:flex;gap:6px}
.nota{font-size:11.5px;color:var(--txt-3);line-height:1.5}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}

/* ============================================================
   BILHETE DE FATURA  (histórico de pagamentos)
   prefixo .blh-*  — nao colide com .btn .selo .painel .kpi .grade
   .modal .aviso .cc .sw .nav .side .main .topo .cartoes etc.
   ============================================================ */

/* grade responsiva de bilhetes ------------------------------ */
.blh-lista{display:grid;gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr))}
/* use esta classe quando a lista ficar DENTRO de um painel branco */
.blh-lista.blh-sobre-branco{--blh-fundo:var(--card)}

/* o bilhete -------------------------------------------------- */
.blh{
  /* cores locais, todas derivadas da paleta do :root */
  --blh-fundo:var(--bg);                 /* cor do papel ATRAS do bilhete (faz as mordidas) */
  --blh-cor:var(--roxo);                 /* acento do estado (traços e fitas) */
  --blh-cor-txt:var(--roxo-2);           /* mesma família, escurecida p/ texto (AA) */
  --blh-tinta:var(--roxo-luz);           /* fundo suave do canhoto */
  --blh-linha:rgba(92,72,214,.45);       /* --roxo com alfa: picote */
  --blh-grade:rgba(92,72,214,.10);       /* --roxo com alfa: grade animada */
  --blh-borda-erro:#f3ccd5;              /* mesma borda ja usada em .btn.perigo */
  position:relative;display:flex;align-items:stretch;min-width:0;
  background:var(--card);border:1px solid var(--borda);border-radius:var(--raio);
  box-shadow:var(--sombra);
  transition:transform .38s cubic-bezier(.2,.7,.3,1),box-shadow .38s ease,border-color .2s ease}

.blh.blh-pago{--blh-cor:var(--ok);--blh-tinta:var(--ok-bg);
  --blh-cor-txt:#0a7a3c;                              /* --ok escurecido: 5,0:1 no branco */
  --blh-linha:rgba(18,161,80,.42)}                    /* --ok com alfa */
.blh.blh-atrasado{--blh-cor:var(--erro);--blh-tinta:var(--erro-bg);
  --blh-cor-txt:#b31333;                              /* --erro escurecido: 5,6:1 no branco */
  --blh-linha:rgba(217,45,75,.50);                    /* --erro com alfa */
  border-color:var(--blh-borda-erro)}

/* fita superior: solida = pago / listrada = atraso */
.blh::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:1;
  pointer-events:none;border-radius:var(--raio) var(--raio) 0 0;background:var(--blh-cor)}
.blh.blh-atrasado::before{background-color:var(--blh-tinta);
  background-image:repeating-linear-gradient(115deg,var(--blh-cor) 0 5px,transparent 5px 11px)}

/* leve rotacao 3D no hover / foco por teclado */
.blh:hover,.blh:focus-within{
  transform:perspective(1000px) rotateX(1.4deg) rotateY(-2deg) translateY(-3px);
  box-shadow:0 2px 5px rgba(20,20,40,.07),0 18px 34px rgba(20,20,40,.13);z-index:2}
@media(hover:none){.blh:hover,.blh:focus-within{transform:none;box-shadow:var(--sombra)}
  .blh:hover .blh-luz::before,.blh:focus-within .blh-luz::before{transform:translateX(-190%) rotate(14deg)}}

/* brilho diagonal que atravessa no hover -------------------- */
.blh-luz{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none;
  border-radius:inherit}
.blh-luz::before{content:"";position:absolute;top:-40%;left:0;width:38%;height:180%;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(92,72,214,.11) 38%,
    rgba(255,255,255,.92) 50%,rgba(92,72,214,.11) 62%,rgba(255,255,255,0));
  transform:translateX(-190%) rotate(14deg);
  transition:transform .9s cubic-bezier(.25,.6,.3,1)}
.blh:hover .blh-luz::before,.blh:focus-within .blh-luz::before{
  transform:translateX(350%) rotate(14deg)}

/* corpo principal ------------------------------------------- */
.blh-corpo{position:relative;z-index:0;flex:1 1 auto;min-width:0;overflow:hidden;
  display:flex;flex-direction:column;gap:7px;
  padding:18px 15px 15px 16px;
  border-radius:var(--raio) 0 0 var(--raio)}
/* grade de fundo animada (translate3d = barato, roda na GPU) */
.blh-corpo::before{content:"";position:absolute;inset:-26px;pointer-events:none;
  background-image:
    repeating-linear-gradient(to right,var(--blh-grade) 0 1px,transparent 1px 22px),
    repeating-linear-gradient(to bottom,var(--blh-grade) 0 1px,transparent 1px 22px);
  -webkit-mask-image:linear-gradient(155deg,#000,rgba(0,0,0,.18) 70%,transparent);
  mask-image:linear-gradient(155deg,#000,rgba(0,0,0,.18) 70%,transparent);
  animation:blh-deriva 14s linear infinite}
@keyframes blh-deriva{from{transform:translate3d(0,0,0)}to{transform:translate3d(22px,22px,0)}}
.blh-corpo > *{position:relative;z-index:1}

.blh-cab{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.blh-ref{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;
  letter-spacing:.6px;color:var(--txt-2);background:#f7f7fb;border:1px solid var(--borda);
  border-radius:6px;padding:2px 7px;white-space:nowrap}

.blh-servico{font-size:15px;font-weight:600;letter-spacing:-.25px;line-height:1.25;
  overflow-wrap:anywhere;margin:0}
.blh-dominio{margin:0;font-size:12.5px;color:var(--txt-2);overflow-wrap:anywhere}
.blh-dominio:empty{display:none}
.blh-ass{margin:0;font-size:11px;color:var(--txt-3);overflow-wrap:anywhere;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.blh-ass:empty{display:none}

.blh-meta{margin:0;margin-top:auto;padding-top:11px;border-top:1px dashed var(--borda);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:8px 12px}
.blh-meta .blh-dado{min-width:0}
.blh-meta dt{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;
  color:var(--txt-2);font-weight:600}
.blh-meta dd{margin:3px 0 0;font-size:12.5px;font-weight:600;color:var(--txt);
  overflow-wrap:anywhere}

/* picote: linha tracejada + as duas mordidas semicirculares --- */
.blh-picote{position:relative;z-index:3;flex:0 0 1px;align-self:stretch;
  padding:14px 0;background-clip:content-box;
  background-image:repeating-linear-gradient(to bottom,
    var(--blh-linha) 0 5px,rgba(0,0,0,0) 5px 11px)}
.blh-picote::before,.blh-picote::after{content:"";position:absolute;left:50%;
  width:22px;height:11px;transform:translateX(-50%);
  background:var(--blh-fundo);border:1px solid var(--borda)}
.blh-picote::before{top:-1px;border-top:none;border-radius:0 0 999px 999px}
.blh-picote::after{bottom:-1px;border-bottom:none;border-radius:999px 999px 0 0}

/* canhoto destacavel ---------------------------------------- */
.blh-canhoto{position:relative;z-index:0;flex:0 0 152px;width:152px;
  display:flex;flex-direction:column;gap:7px;
  padding:18px 14px 15px 15px;
  border-radius:0 var(--raio) var(--raio) 0;
  background-image:linear-gradient(180deg,var(--blh-tinta),rgba(255,255,255,0) 68%)}
.blh-rot{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;
  color:var(--txt-2);font-weight:600}
.blh-valor{font-size:18px;font-weight:700;letter-spacing:-.5px;line-height:1.15;
  color:var(--blh-cor-txt);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;display:block}

/* codigo de barras: 3 repeating-linear-gradient sobrepostos --- */
.blh-codigo{margin-top:auto;padding-top:10px;display:block;text-align:center}
.blh-barras{display:block;height:34px;border-radius:3px;opacity:.82;
  background-color:var(--card);
  background-image:
    repeating-linear-gradient(90deg,var(--txt) 0 1px,rgba(0,0,0,0) 1px 4px),
    repeating-linear-gradient(90deg,var(--txt) 0 2px,rgba(0,0,0,0) 2px 9px),
    repeating-linear-gradient(90deg,var(--txt) 0 1px,rgba(0,0,0,0) 1px 7px)}
.blh-serie{display:block;margin-top:5px;font-size:10.5px;letter-spacing:1.2px;
  color:var(--txt-2);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  overflow-wrap:anywhere}

.blh-acoes{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.blh-acoes:empty{display:none}
.blh-acoes .btn{width:100%;text-align:center;padding-left:6px;padding-right:6px}

/* ---------- 1080px: caixa um pouco mais enxuta ---------- */
@media(max-width:1080px){
  .blh-lista{grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr))}
  .blh-canhoto{flex-basis:144px;width:144px}
}

/* ---------- 760px: bilhete empilhado, picote horizontal ---------- */
@media(max-width:760px){
  .blh-lista{gap:14px;grid-template-columns:1fr}
  .blh{flex-direction:column}
  .blh-corpo{border-radius:var(--raio) var(--raio) 0 0;padding:17px 15px 14px}

  .blh-picote{flex:0 0 1px;width:auto;align-self:auto;padding:0 15px;
    background-image:repeating-linear-gradient(to right,
      var(--blh-linha) 0 5px,rgba(0,0,0,0) 5px 11px)}
  .blh-picote::before,.blh-picote::after{left:auto;right:auto;top:50%;bottom:auto;
    width:11px;height:22px;transform:translateY(-50%);
    border:1px solid var(--borda)}
  .blh-picote::before{left:-1px;border-left:none;border-radius:0 999px 999px 0}
  .blh-picote::after{right:-1px;border-right:none;border-radius:999px 0 0 999px}

  .blh-canhoto{flex:0 0 auto;width:auto;padding:14px 15px 15px;
    border-radius:0 0 var(--raio) var(--raio);
    background-image:linear-gradient(90deg,var(--blh-tinta),rgba(255,255,255,0) 72%);
    display:grid;gap:2px 14px;align-items:start;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"rot acoes" "valor acoes" "codigo acoes"}
  .blh-rot{grid-area:rot}
  .blh-valor{grid-area:valor;font-size:20px}
  .blh-codigo{grid-area:codigo;margin-top:8px;padding-top:0;text-align:left}
  .blh-barras{height:30px}
  .blh-serie{text-align:left}
  .blh-acoes{grid-area:acoes;align-self:center;margin-top:0;min-width:126px}
}

/* ---------- acessibilidade: movimento reduzido ---------- */
@media(prefers-reduced-motion:reduce){
  .blh-corpo::before{animation:none}
  .blh{transition:box-shadow .2s ease,border-color .2s ease}
  .blh:hover,.blh:focus-within{transform:none}
  .blh-luz{display:none}
}

/* ---------- impressao do bilhete ---------- */
@media print{
  .blh{break-inside:avoid;box-shadow:none;transform:none}
  .blh-luz,.blh-acoes{display:none}
  .blh-corpo::before{animation:none;opacity:.35}
}
/* ==================================================================
   FACILITYHOST — tela de carregamento (splash)
   Prefixo exclusivo: .fh-splash / .fhs-*   |  keyframes: fhs*
   Sem fonte externa, sem @import, sem CDN. Só a stack do body.
   ================================================================== */

.fh-splash{
  /* cores novas, todas derivadas da paleta do :root — escopadas no componente */
  --fhs-roxo-3:#8a6cf0;          /* mesma luz do gradiente de .marca .bolha */
  --fhs-roxo-4:#b9a9ff;
  --fhs-anel-trilho:#e3ddf9;     /* --roxo-luz um passo mais escuro */
  --fhs-barra-trilho:#e6e2f7;
  --fhs-passo:.055s;             /* atraso entre as letras */

  position:fixed; inset:0; z-index:9999;      /* acima do modal(50) e do toast(99) */
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:
    radial-gradient(90% 70% at 50% -10%, var(--roxo-luz) 0%, rgba(239,236,255,0) 60%),
    radial-gradient(70% 55% at 50% 112%, #f0edff 0%, rgba(240,237,255,0) 65%),
    var(--bg);
  color:var(--txt);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  opacity:1;
  transition:opacity .42s ease;
  overscroll-behavior:contain;
}
.fh-splash.fhs-saindo{opacity:0;pointer-events:none}
.fh-splash[hidden]{display:none}
.fhs-travado{overflow:hidden}                 /* aplicada em <html> enquanto o splash existe */

.fhs-caixa{
  width:100%; max-width:560px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}

/* ---------- monograma + anel ---------- */
.fhs-marca{position:relative;width:118px;height:118px;display:grid;place-items:center;margin-bottom:26px}
.fhs-anel{position:absolute;inset:0;width:100%;height:100%}
.fhs-trilho{fill:none;stroke:var(--fhs-anel-trilho);stroke-width:4}
.fhs-arco{
  fill:none;
  stroke:url(#fhsGradAnel);
  stroke-width:4; stroke-linecap:round;
  stroke-dasharray:0 1 359 0;
  transform-box:fill-box; transform-origin:center;
  animation:
    fhsArcoTraco 2.6s ease-in-out infinite,
    fhsArcoDesl  2.6s linear infinite,
    fhsGiro      4s   cubic-bezier(.68,.02,.32,1) infinite;
}
@keyframes fhsArcoTraco{
  0%  {stroke-dasharray:0 1 359 0}
  50% {stroke-dasharray:0 359 1 0}
  100%{stroke-dasharray:359 1 0 0}
}
@keyframes fhsArcoDesl{from{stroke-dashoffset:365}to{stroke-dashoffset:5}}
@keyframes fhsGiro{
  0%  {transform:rotate(0deg)}
  25% {transform:rotate(270deg)}
  50% {transform:rotate(540deg)}
  75% {transform:rotate(810deg)}
  100%{transform:rotate(1080deg)}
}

.fhs-bolha{
  position:relative; width:58px; height:58px; border-radius:17px;
  background:linear-gradient(135deg,var(--roxo),var(--fhs-roxo-3));
  color:#fff; font-weight:700; font-size:26px; letter-spacing:-.5px;
  display:grid; place-items:center;
  box-shadow:0 10px 26px rgba(92,72,214,.28);
  animation:fhsPulso 2.6s ease-in-out infinite;
}
@keyframes fhsPulso{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}

/* ---------- wordmark FACILITYHOST ---------- */
.fhs-nome{display:block;width:100%;max-width:520px;height:auto;margin:0 auto}

/* paradas dos gradientes ligadas às variáveis do sistema
   (os atributos stop-color no markup são só fallback) */
.fhs-g1{stop-color:var(--fhs-roxo-3)}
.fhs-g2{stop-color:var(--roxo)}
.fhs-g3{stop-color:var(--roxo-2)}

.fhs-letras text,.fhs-masc-l{
  font-family:inherit; font-weight:700; font-size:64px;
  text-anchor:middle; white-space:pre;
}
.fhs-masc-l{fill:#fff;stroke:none}

.fhs-l{
  fill:url(#fhsGradFill); fill-opacity:0;
  stroke:url(#fhsGradTraco); stroke-width:1.8;
  stroke-linejoin:round; stroke-linecap:round;
  stroke-dasharray:340; stroke-dashoffset:340; stroke-opacity:0;
  paint-order:stroke fill markers;           /* traço por baixo, preenchimento por cima */
  animation:fhsLetra 1s cubic-bezier(.55,.1,.25,1) both;
  animation-delay:calc(var(--i,0) * var(--fhs-passo));
}
/* 340 é maior que o perímetro de qualquer contorno de letra a 64px,
   então o traço sempre fecha; no fim vai a 1200 para garantir o contorno inteiro. */
@keyframes fhsLetra{
  0%  {stroke-dasharray:340; stroke-dashoffset:340; stroke-opacity:0;  fill-opacity:0}
  10% {stroke-opacity:1}
  58% {stroke-dasharray:340; stroke-dashoffset:0;   fill-opacity:0}
  100%{stroke-dasharray:1200;stroke-dashoffset:0;   stroke-opacity:.5; fill-opacity:1}
}

/* brilho que corre por baixo do wordmark, recortado pela máscara das letras */
.fhs-brilho{
  opacity:0;
  animation:fhsVarre 3.4s ease-in-out 1.65s infinite;
}
@keyframes fhsVarre{
  0%      {transform:translateX(0) skewX(-14deg); opacity:0}
  6%      {opacity:1}
  48%     {opacity:1}
  55%,100%{transform:translateX(960px) skewX(-14deg); opacity:0}
}

/* ---------- textos ---------- */
.fhs-legenda{
  /* virou frase, não rótulo: caixa-alta com tracking largo ficaria gritado e
     quebraria feio no celular */
  margin:16px 0 0; font-size:12.5px; font-weight:500;
  letter-spacing:.2px; color:var(--txt-2);
  max-width:34ch; line-height:1.45;
}
.fhs-status{
  margin:16px 0 0; font-size:13px; color:var(--txt);
  min-height:19px; max-width:340px;
  animation:fhsRespira 2.4s ease-in-out infinite;
}
@keyframes fhsRespira{0%,100%{opacity:.88}50%{opacity:1}}

/* ---------- barra indeterminada ---------- */
.fhs-barra{
  position:relative; width:132px; height:3px; margin-top:16px;
  border-radius:3px; background:var(--fhs-barra-trilho); overflow:hidden;
}
.fhs-barra-cursor{
  position:absolute; top:0; left:0; height:100%; width:42%; border-radius:3px;
  background:linear-gradient(90deg,var(--roxo),var(--fhs-roxo-3));
  animation:fhsBarra 1.5s cubic-bezier(.65,.05,.36,1) infinite;
}
@keyframes fhsBarra{0%{transform:translateX(-115%)}100%{transform:translateX(345%)}}

/* ---------- responsivo (mesmos pontos de quebra do app) ---------- */
@media(max-width:1080px){
  .fhs-nome{max-width:480px}
}
@media(max-width:760px){
  .fhs-marca{width:98px;height:98px;margin-bottom:20px}
  .fhs-bolha{width:50px;height:50px;border-radius:15px;font-size:22px}
  .fhs-legenda{margin-top:14px;font-size:12px}
  .fhs-status{margin-top:14px;font-size:12.5px}
  .fhs-barra{width:118px}
}
@media(max-width:400px){
  .fh-splash{padding:18px}
  .fhs-marca{width:88px;height:88px;margin-bottom:18px}
  .fhs-bolha{width:46px;height:46px;border-radius:14px;font-size:20px}
  .fhs-legenda{font-size:11.5px}
  .fhs-status{font-size:12px}
}

/* ---------- movimento reduzido: nada de animação contínua ---------- */
@media(prefers-reduced-motion:reduce){
  .fhs-l{
    animation:none;
    stroke-dasharray:1200; stroke-dashoffset:0; stroke-opacity:.5; fill-opacity:1;
  }
  .fhs-arco{
    animation:none;
    stroke-dasharray:96 264; stroke-dashoffset:0;
  }
  .fhs-bolha,.fhs-status{animation:none}
  .fhs-status{opacity:1}
  .fhs-brilho-grupo{display:none}
  .fhs-barra-cursor{animation:none;width:100%;opacity:.45}
}
/* ==========================================================================
   FACILITYHOST · tela de entrada (login)   — prefixo .ent-
   Depende das variáveis do :root já existentes em style.css.
   Cole no fim de static/style.css.
   ========================================================================== */

/* --- correção necessária ---------------------------------------------------
   index.html traz <div class="app" id="app" hidden>, mas .app{display:flex}
   é regra de autor e vence a regra [hidden]{display:none} do navegador
   (autor > user-agent, independente de especificidade). Sem isto o painel
   aparece atrás do login. */
#app[hidden]{display:none !important}

/* ---------- palco ---------- */
.ent-tela{
  /* cores novas, todas derivadas da paleta do sistema */
  --ent-tinta:92,72,214;                  /* = var(--roxo)  #5c48d6 em RGB */
  --ent-tinta-erro:217,45,75;             /* = var(--erro)  #d92d4b em RGB */
  --ent-ameixa:#7a5bc8;                   /* roxo suavizado p/ o degradê    */
  --ent-claro:#fbfaff;                    /* var(--bg) puxado p/ o branco   */
  --ent-raio-cor:rgba(var(--ent-tinta),.55);
  --ent-vidro:rgba(255,255,255,.88);

  position:fixed;inset:0;z-index:60;
  display:flex;align-items:center;justify-content:center;
  padding:24px 18px;
  overflow-x:hidden;overflow-y:auto;
  color:var(--txt);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  background:
    radial-gradient(880px 620px at 50% -12%, var(--roxo-luz) 0%, rgba(239,236,255,0) 62%),
    radial-gradient(720px 540px at 90% 112%, rgba(122,91,200,.18) 0%, rgba(122,91,200,0) 60%),
    linear-gradient(180deg, var(--ent-claro) 0%, var(--bg) 100%);
}

/* ---------- anel decorativo (50 raios) ---------- */
.ent-palco{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.ent-anel{
  position:absolute;left:50%;top:50%;
  width:min(92vmin,660px);height:min(92vmin,660px);
  transform:translate(-50%,-50%);
  animation:ent-orbita 46s linear infinite;
}
.ent-anel::before{                      /* aro tênue, dá estrutura ao miolo */
  content:"";position:absolute;inset:12%;
  border-radius:50%;
  border:1px solid rgba(var(--ent-tinta),.10);
  box-shadow:inset 0 0 90px 26px rgba(var(--ent-tinta),.06);
}
.ent-raio{
  position:absolute;left:50%;top:0;
  width:3px;height:50%;margin-left:-1.5px;
  transform-origin:50% 100%;                       /* gira em torno do centro */
  transform:rotate(calc(var(--i) * 7.2deg));       /* 360 / 50 = 7.2          */
}
.ent-raio::before{                      /* só a ponta acende: anel vazado */
  content:"";position:absolute;top:0;left:0;
  width:100%;height:30px;border-radius:3px;
  background:linear-gradient(180deg,var(--ent-raio-cor),rgba(var(--ent-tinta),0));
  opacity:.14;
  transform-origin:50% 0;
  animation:ent-faisca 3s linear infinite;
  animation-delay:calc(var(--i) * -.06s);          /* onda que corre o anel */
}
@keyframes ent-orbita{
  from{transform:translate(-50%,-50%) rotate(0deg)}
  to  {transform:translate(-50%,-50%) rotate(360deg)}
}
@keyframes ent-faisca{
  0%  {opacity:.10;transform:scaleY(.55)}
  10% {opacity:.85;transform:scaleY(1.5)}
  45% {opacity:.14;transform:scaleY(.8)}
  100%{opacity:.10;transform:scaleY(.55)}
}

/* ---------- cartão ---------- */
.ent-cartao{
  position:relative;z-index:1;
  width:100%;max-width:392px;
  padding:30px 26px 20px;
  background:var(--ent-vidro);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--borda);border-radius:18px;
  box-shadow:0 1px 2px rgba(20,20,40,.05),0 24px 60px rgba(38,26,92,.14);
  animation:ent-surgir .45s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes ent-surgir{
  from{opacity:0;transform:translateY(14px) scale(.985)}
  to  {opacity:1;transform:none}
}

/* ---------- marca ---------- */
.ent-marca{display:flex;align-items:center;justify-content:center;gap:11px;margin-bottom:18px}
.ent-bolha{
  width:40px;height:40px;flex:none;border-radius:12px;
  background:linear-gradient(135deg,var(--roxo),#8a6cf0);
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:19px;
  box-shadow:0 6px 18px rgba(var(--ent-tinta),.34);
}
.ent-nome{font-size:16.5px;font-weight:700;letter-spacing:-.3px;line-height:1.15}
.ent-nome span{
  display:block;margin-top:3px;
  font-size:11.5px;font-weight:500;letter-spacing:.2px;color:var(--txt-2);
  line-height:1.4;
}

.ent-titulo{font-size:18px;font-weight:600;letter-spacing:-.3px;text-align:center}
.ent-sub{margin:5px 0 18px;text-align:center;font-size:12.5px;color:var(--txt-2)}

/* ---------- mensagem de erro ---------- */
.ent-msg{
  display:flex;gap:9px;align-items:flex-start;
  margin-bottom:14px;padding:10px 12px;
  border:1px solid #f6d3da;border-radius:10px;
  background:var(--erro-bg);color:#8f1f36;
  font-size:12.8px;line-height:1.45;
  animation:ent-msg-entra .22s ease both;
}
.ent-msg[hidden]{display:none}          /* display:flex anularia o atributo */
.ent-msg-ic{
  flex:none;width:17px;height:17px;margin-top:1px;border-radius:50%;
  background:var(--erro);color:#fff;
  display:grid;place-items:center;font-size:11px;font-weight:700;line-height:1;
}
@keyframes ent-msg-entra{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- campos com rótulo flutuante ---------- */
.ent-forma{margin:0}
.ent-campo{position:relative;margin-bottom:12px}
.ent-entrada{
  width:100%;height:52px;
  padding:20px 13px 6px;                /* espaço em cima para o rótulo subir */
  border:1px solid var(--borda);border-radius:10px;
  background:#fff;color:var(--txt);
  font-family:inherit;font-size:16px;line-height:1.2;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.ent-campo.ent-com-acao .ent-entrada{padding-right:46px}
.ent-entrada::placeholder{color:transparent}   /* placeholder=" " é só o gatilho */
.ent-entrada:hover{border-color:#d7d7e4}
.ent-entrada:focus{
  outline:none;border-color:var(--roxo);
  box-shadow:0 0 0 3px rgba(var(--ent-tinta),.16);
}
.ent-rot{
  position:absolute;left:14px;top:16px;
  display:block;margin:0;                       /* anula o label{} global */
  font-size:16px;font-weight:500;color:var(--txt-2);
  pointer-events:none;transform-origin:0 0;
  transition:transform .16s ease,color .16s ease;
}
/* o truque que funciona de verdade: foco OU campo preenchido */
.ent-entrada:focus + .ent-rot,
.ent-entrada:not(:placeholder-shown) + .ent-rot{
  transform:translateY(-9px) scale(.78);
  font-weight:600;color:var(--roxo-2);
}
.ent-entrada:not(:focus):not(:placeholder-shown) + .ent-rot{color:var(--txt-2)}

/* autofill: regras isoladas — em lista, um seletor desconhecido anularia tudo */
.ent-entrada:-webkit-autofill + .ent-rot{transform:translateY(-9px) scale(.78);font-weight:600}
.ent-entrada:autofill + .ent-rot{transform:translateY(-9px) scale(.78);font-weight:600}
.ent-entrada:-webkit-autofill{
  -webkit-text-fill-color:var(--txt);
  box-shadow:0 0 0 40px #fff inset;
}
.ent-entrada:-webkit-autofill:focus{
  box-shadow:0 0 0 40px #fff inset,0 0 0 3px rgba(var(--ent-tinta),.16);
}

.ent-campo.ent-invalido .ent-entrada{
  border-color:var(--erro);
  box-shadow:0 0 0 3px rgba(var(--ent-tinta-erro),.14);
}
.ent-campo.ent-invalido .ent-rot{color:var(--erro)}

/* mostrar/ocultar senha */
.ent-olho{
  position:absolute;right:7px;top:50%;transform:translateY(-50%);
  border:none;background:none;cursor:pointer;
  padding:8px;border-radius:8px;line-height:1;
  font-family:inherit;font-size:15px;color:var(--txt-3);
}
.ent-olho:hover{color:var(--roxo-2);background:#f5f4fb}
.ent-olho:focus-visible{outline:2px solid var(--roxo);outline-offset:1px}

/* ---------- manter conectado ---------- */
.ent-linha{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;flex-wrap:wrap;margin:14px 2px 18px;
}
.ent-manter{
  display:flex;align-items:center;gap:8px;margin:0;
  font-size:13px;font-weight:500;color:var(--txt-2);cursor:pointer;
  -webkit-user-select:none;user-select:none;
}
.ent-caixa{
  width:16px;height:16px;flex:none;margin:0;padding:0;
  accent-color:var(--roxo);cursor:pointer;
}
.ent-caixa:focus-visible{outline:2px solid var(--roxo);outline-offset:2px}
.ent-etiqueta{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:20px;
  background:var(--roxo-luz);color:var(--roxo-2);
  font-size:11px;font-weight:600;white-space:nowrap;
}

/* ---------- botão ---------- */
.ent-btn{
  width:100%;height:48px;border:none;border-radius:999px;
  background:linear-gradient(135deg,var(--roxo),#8a6cf0);
  color:#fff;font-family:inherit;font-size:14.5px;font-weight:700;letter-spacing:.2px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 22px rgba(var(--ent-tinta),.30);
  transition:filter .15s ease,transform .12s ease,box-shadow .15s ease;
}
.ent-btn:hover:not(:disabled){filter:brightness(1.06)}
.ent-btn:active:not(:disabled){transform:translateY(1px);box-shadow:0 4px 12px rgba(var(--ent-tinta),.26)}
.ent-btn:focus-visible{outline:3px solid rgba(var(--ent-tinta),.35);outline-offset:2px}
.ent-btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;filter:saturate(.7)}
.ent-btn-rot,
.ent-btn-carga{display:inline-flex;align-items:center;gap:9px}
.ent-btn-carga{display:none}
.ent-btn[data-estado="carregando"] .ent-btn-rot{display:none}
.ent-btn[data-estado="carregando"] .ent-btn-carga{display:inline-flex}
.ent-giro{
  width:15px;height:15px;flex:none;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:ent-girar .7s linear infinite;
}
@keyframes ent-girar{to{transform:rotate(360deg)}}

/* ---------- rodapé ---------- */
.ent-rodape{
  margin:18px 0 0;padding-top:14px;border-top:1px solid var(--borda);
  text-align:center;font-size:12px;line-height:1.55;color:var(--txt-2);
}
.ent-versao{display:block;margin-top:4px;color:var(--txt-2)}

/* ---------- responsivo (mesmos pontos de quebra do app) ---------- */
@media(max-width:1080px){
  .ent-anel{width:min(104vmin,600px);height:min(104vmin,600px)}
}
@media(max-width:760px){
  .ent-tela{align-items:flex-start;padding:8vh 14px 24px}
  .ent-cartao{padding:26px 20px 18px}
  .ent-anel{width:min(128vmin,540px);height:min(128vmin,540px)}
  .ent-raio::before{height:24px}
}
@media(max-width:400px){
  .ent-cartao{border-radius:16px;padding:24px 16px 16px}
  .ent-titulo{font-size:17px}
  .ent-linha{gap:8px}
  .ent-etiqueta{display:none}          /* prioriza o "Manter conectado" */
}
@media(max-height:620px){
  .ent-tela{align-items:flex-start;padding-top:20px}
  .ent-anel{width:min(150vmin,460px);height:min(150vmin,460px)}
}

/* ---------- movimento reduzido ---------- */
@media(prefers-reduced-motion:reduce){
  .ent-anel{animation:none}
  .ent-raio::before{animation:none;opacity:.20}    /* anel fica parado e visível */
  .ent-cartao,.ent-msg{animation:none}
  .ent-giro{display:none}                          /* o texto "Entrando…" já informa */
  .ent-entrada,.ent-rot,.ent-btn{transition:none}
}
/* ============================================================
   Cartão de crédito 3D — prefixo .fcc-  (FACILITYHOST)
   Depende só das variáveis já existentes no :root do style.css.
   ============================================================ */

.fcc{
  /* --- cores derivadas da paleta do sistema --- */
  --fcc-p1:#3b2a78;                 /* --roxo escurecido            */
  --fcc-p2:#261b52;                 /* ameixa (meio do gradiente)   */
  --fcc-p3:#150e2d;                 /* --txt puxado para o roxo     */
  --fcc-ouro:#e7c98f;               /* chip                          */
  --fcc-ouro-2:#a87f37;
  --fcc-lilas:#b9a9ff;              /* --roxo clareado               */
  --fcc-ok-luz:#7ce8ad;             /* --ok legível sobre escuro     */
  --fcc-alerta-luz:#f3cf7a;         /* --alerta legível sobre escuro */
  --fcc-erro-luz:#ff9aad;           /* --erro legível sobre escuro   */
  --fcc-tinta:#f5f3ff;
  --fcc-tinta-2:rgba(245,243,255,.68);
  --fcc-tinta-3:rgba(245,243,255,.34);
  --fcc-borda-luz:rgba(160,140,255,.28);
  --fcc-raio:16px;
  --fcc-dur:.55s;
  --fcc-ang:0deg;                   /* giro por clique/teclado */
  --fcc-ang-h:0deg;                 /* giro por hover          */

  position:relative;
  display:block;
  width:100%;
  max-width:420px;
  aspect-ratio:1.586 / 1;
  min-height:198px;
  margin:0;
  perspective:1400px;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.fcc:focus{outline:none}
.fcc:focus-visible{outline:2px solid var(--roxo);outline-offset:3px;border-radius:19px}

.fcc-giro{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  transform:rotateY(calc(var(--fcc-ang) + var(--fcc-ang-h)));
  transition:transform var(--fcc-dur) cubic-bezier(.22,.72,.24,1);
}
/* virado por clique / Enter / Espaço / foco no CVV */
.fcc--virado{--fcc-ang:180deg}
/* hover soma 180°: se já estava virado, o hover devolve para a frente (0+180 / 180+180=360) */
@media (hover:hover) and (pointer:fine){
  .fcc:hover{--fcc-ang-h:180deg}
  .fcc--previa:hover{--fcc-ang-h:0deg}   /* na prévia o hover atrapalha quem digita */
}

/* ---------- faces ---------- */
.fcc-face{
  --fcc-pad:clamp(13px,4.4vw,20px);
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  padding:var(--fcc-pad);
  border:1px solid var(--fcc-borda-luz);
  border-radius:var(--fcc-raio);
  overflow:hidden;
  color:var(--fcc-tinta);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  box-shadow:0 10px 26px rgba(21,14,45,.28),0 2px 6px rgba(21,14,45,.22);
}
.fcc-face > *{position:relative;z-index:1}
.fcc-face::before{                       /* véu por situação */
  content:"";position:absolute;inset:0;z-index:0;
  background:var(--fcc-veu,transparent);pointer-events:none;
}
.fcc-face::after{                        /* fio de acento no topo */
  content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:2;
  background:var(--fcc-acento,transparent);pointer-events:none;
}

.fcc-frente{
  transform:translateZ(1px);
  background:
    radial-gradient(120% 140% at 88% -12%,rgba(150,120,255,.42) 0%,rgba(150,120,255,0) 55%),
    radial-gradient(90% 120% at 0% 112%,rgba(231,201,143,.13) 0%,rgba(231,201,143,0) 60%),
    linear-gradient(135deg,var(--fcc-p1) 0%,var(--fcc-p2) 48%,var(--fcc-p3) 100%);
}
.fcc-verso{
  transform:rotateY(180deg) translateZ(1px);
  background:
    radial-gradient(100% 130% at 100% 0%,rgba(150,120,255,.24) 0%,rgba(150,120,255,0) 60%),
    linear-gradient(155deg,var(--fcc-p2) 0%,var(--fcc-p3) 72%);
}

/* brilho que passeia (parado em prefers-reduced-motion) */
.fcc-luz{
  position:absolute;top:-60%;left:0;width:42%;height:220%;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.13),rgba(255,255,255,0));
  transform:translateX(-120%) rotate(18deg);
  animation:fcc-varre 9s ease-in-out infinite;
}
@keyframes fcc-varre{
  0%,72%,100%{transform:translateX(-120%) rotate(18deg)}
  36%{transform:translateX(300%) rotate(18deg)}
}

/* ---------- topo da frente: chip, contactless, selos ---------- */
.fcc-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.fcc-hw{display:flex;align-items:center;gap:9px}
.fcc-chip{
  width:clamp(34px,10.5vw,44px);height:auto;flex:none;
  color:var(--fcc-ouro);
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.38));
}
.fcc-nfc{width:clamp(15px,4.6vw,20px);height:auto;flex:none;color:var(--fcc-tinta-2)}
.fcc-marcas{display:flex;flex-direction:column;align-items:flex-end;gap:5px;min-width:0}

.fcc-padrao{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 9px;border-radius:20px;
  font-size:9.5px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;
  color:#1b1233;background:linear-gradient(135deg,var(--fcc-ouro),#f6e3bb);
  box-shadow:0 1px 4px rgba(0,0,0,.32);white-space:nowrap;
}

.fcc-sit{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:20px;
  font-size:10.5px;font-weight:700;letter-spacing:.2px;white-space:nowrap;
  color:var(--fcc-tinta);
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(2px);
}
.fcc-pt{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.fcc-sit--ok{color:var(--fcc-ok-luz);background:rgba(18,161,80,.22);border-color:rgba(124,232,173,.32)}
.fcc-sit--analise{color:var(--fcc-alerta-luz);background:rgba(201,138,0,.24);border-color:rgba(243,207,122,.32)}
.fcc-sit--bloq{color:var(--fcc-erro-luz);background:rgba(217,45,75,.24);border-color:rgba(255,154,173,.32)}
.fcc-sit--neutro{color:var(--fcc-tinta-2)}
.fcc-sit--analise .fcc-pt{animation:fcc-pulsa 1.6s ease-in-out infinite}
@keyframes fcc-pulsa{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.65)}}

.fcc-dica{
  display:inline-flex;align-items:center;gap:4px;margin-top:1px;
  font-size:9.5px;font-weight:600;letter-spacing:.03em;color:var(--fcc-tinta-3);white-space:nowrap;
}

/* acentos e véus por situação */
.fcc[data-situacao="aprovado"]{--fcc-acento:linear-gradient(90deg,var(--ok),#5fd39a)}
.fcc[data-situacao="em_analise"],
.fcc[data-situacao="aguardando_documento"]{--fcc-acento:linear-gradient(90deg,var(--alerta),#f0c869)}
.fcc[data-situacao="recusado"]{
  --fcc-acento:linear-gradient(90deg,var(--erro),#ff8ea3);
  --fcc-veu:linear-gradient(160deg,rgba(217,45,75,.16),rgba(10,6,20,.36));
}

/* ---------- número ---------- */
.fcc-num{
  display:flex;flex-wrap:wrap;align-items:center;gap:2px 13px;
  margin:auto 0;
  font-size:clamp(15px,4.6vw,20px);font-weight:600;letter-spacing:.09em;
  font-variant-numeric:tabular-nums;
  text-shadow:0 1px 2px rgba(0,0,0,.4);
}
.fcc-num span{display:inline-block}
.fcc-num i{font-style:normal;color:var(--fcc-tinta-3)}

/* ---------- rodapé (frente e verso) ---------- */
.fcc-rod{display:flex;align-items:flex-end;gap:10px;margin-top:auto;min-width:0}
.fcc-dado{min-width:0}
.fcc-dado > span{
  display:block;margin-bottom:2px;
  font-size:8.5px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--fcc-tinta-3);
}
.fcc-dado > b{
  display:block;
  font-size:clamp(11px,3.2vw,13px);font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fcc-tit{flex:1 1 auto}
.fcc-val{flex:none}
.fcc-fraco{opacity:.5}

.fcc-band{
  display:flex;align-items:center;gap:6px;flex:none;margin-left:auto;
  color:var(--fcc-band-cor,var(--fcc-tinta-2));
}
.fcc-band-ic{width:26px;height:18px;flex:none}
.fcc-band-txt{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.fcc[data-bandeira="visa"],
.fcc[data-bandeira="amex"]{--fcc-band-cor:var(--fcc-lilas)}
.fcc[data-bandeira="master"],
.fcc[data-bandeira="elo"]{--fcc-band-cor:var(--fcc-ouro)}
.fcc[data-bandeira="generica"]{--fcc-band-cor:var(--fcc-tinta-3)}

/* ---------- verso ---------- */
.fcc-tarja{
  height:clamp(28px,7.5vw,40px);
  margin:4px calc(var(--fcc-pad) * -1) 12px;
  background:repeating-linear-gradient(90deg,#0b0718 0 7px,#191033 7px 14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -1px 0 rgba(0,0,0,.55);
}
.fcc-assin{display:flex;align-items:center;gap:8px;min-width:0}
.fcc-risco{
  flex:1 1 auto;min-width:0;
  display:flex;align-items:center;
  height:clamp(24px,6.2vw,32px);padding:0 9px;border-radius:5px;
  background:repeating-linear-gradient(135deg,#f2f1f8 0 9px,#e0dded 9px 18px);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
}
.fcc-assinatura{
  font-style:italic;font-size:clamp(11px,3vw,13px);letter-spacing:.02em;color:#2a2140;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fcc-cvv{
  flex:none;min-width:54px;text-align:center;
  padding:4px 9px;border-radius:6px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.15);
}
.fcc-cvv span{display:block;font-size:8px;font-weight:700;letter-spacing:1.1px;color:var(--fcc-tinta-3)}
.fcc-cvv b{display:block;font-size:13px;font-weight:700;letter-spacing:.22em}
.fcc-mini{
  margin:10px 0 0;
  font-size:9.5px;line-height:1.45;color:var(--fcc-tinta-3);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

/* leitor de tela */
.fcc-vox{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---------- contextos de uso ---------- */
.fcc-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.fcc-item{display:flex;flex-direction:column;gap:12px;min-width:0}
.fcc-palco{display:flex;justify-content:center;margin:0 0 18px}
.fcc-palco .fcc{max-width:340px}

/* ---------- responsivo (breakpoints do app) ---------- */
@media(max-width:1080px){
  .fcc-lista{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
}
@media(max-width:760px){
  .fcc-lista{grid-template-columns:1fr}
  .fcc{max-width:none}
  .fcc-palco .fcc{max-width:none}
}
@media(max-width:420px){
  .fcc-mini{-webkit-line-clamp:2}
  .fcc-dica{display:none}
  .fcc-band-txt{letter-spacing:.08em}
}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion:reduce){
  .fcc-giro{transition:none}
  .fcc-luz{animation:none;opacity:.28;transform:translateX(60%) rotate(18deg)}
  .fcc-sit--analise .fcc-pt{animation:none}
}
/* ---------- item da lista de formas de pagamento ---------- */
.cc-item{display:flex;flex-direction:column}
.cc-acoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.cc-doc{margin-top:8px;font-size:11.5px;color:var(--txt-3)}