/************************************************************
 *  RESET + BASE
 ************************************************************/
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial, Helvetica, sans-serif;
  user-select:none;
  -webkit-user-select:none;
}

html,body{
  width:100%;
  height:100%;
  overflow:hidden;
  background:#020617;
  touch-action:manipulation;
}

/************************************************************
 *  FUNDO AMBIENTE
 ************************************************************/
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at 30% 20%, rgba(0,120,255,.15), transparent 60%),
    radial-gradient(circle at 70% 80%, rgba(0,90,255,.12), transparent 60%);
  pointer-events:none;
  animation:blueAmbient 12s linear infinite alternate;
}

@keyframes blueAmbient{
  from{ transform:translateY(-10px); }
  to  { transform:translateY(10px); }
}

/************************************************************
 *  LAYOUT PRINCIPAL
 ************************************************************/
.totem-container{
  width:100vw;
  height:100vh;
  position:relative;
  overflow:hidden;
}

.stage{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:90vh;
  overflow:hidden;
}

/************************************************************
 *  BARRA INFERIOR FIXA
 ************************************************************/
.bottom-bar{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:10vh;
  background:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 20px;
  gap:12px;
  z-index:50;
}

.bar-left{
  position:absolute;
  left:18px;
  display:flex;
  align-items:center;
  gap:10px;
}

.bar-right{
  position:absolute;
  right:18px;
  display:flex;
  align-items:center;
  gap:10px;
}

.bar-center{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  pointer-events:none;
}

.start-text{
  font-weight:bold;
  font-size:3vh;
  color:#000;
  letter-spacing:1px;
  transition:transform .25s ease, filter .25s ease;
  will-change:transform;
}

.start-text.pulse{ animation:softClick .45s ease; }

@keyframes softClick{
  0%   { transform:scale(1);   filter:brightness(1); }
  40%  { transform:scale(.94); filter:brightness(.92); }
  100% { transform:scale(1);   filter:brightness(1); }
}

.back-btn{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:bold;
  font-size:2.6vh;
  color:#000;
  letter-spacing:1px;
  padding:10px 14px;
  border-radius:18px;
  cursor:pointer;
  background:rgba(0,0,0,.06);
  transition:transform .2s ease, filter .2s ease, background .2s ease;
}

.exit-btn{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:bold;
  font-size:2.6vh;
  color:#000;
  letter-spacing:1px;
  padding:10px 14px;
  border-radius:18px;
  cursor:pointer;
  background:rgba(0,0,0,.06);
  transition:transform .2s ease, filter .2s ease, background .2s ease;
  user-select:none;
}


.exit-btn:active{
  transform:scale(.98);
}

.back-btn:active{
  transform:scale(.96);
  filter:brightness(.92);
}

.back-btn.hidden{
  opacity:0;
  pointer-events:none;
}

.exit-btn.hidden{
  opacity:0;
  pointer-events:none;
}

.back-icon,
.exit-icon{
  width:3.2vh;
  height:3.2vh;
  display:inline-block;
}

/************************************************************
 *  PRELOADER
 ************************************************************/
.preloader{
  position:fixed;
  inset:0;
  background:#020617;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:99999;
}

.loader{
  width:70px;
  height:70px;
  border-radius:50%;
  border:6px solid #3b82f6;
  border-top-color:transparent;
  animation:spin 1s linear infinite;
}

@keyframes spin{ to{ transform:rotate(360deg); } }

/************************************************************
 *  CARROSSEL
 ************************************************************/
.carousel{
  position:absolute;
  inset:0;
  overflow:hidden;
  transition:opacity .45s ease;
  opacity:1;
}

.carousel.hide{ opacity:0; }

.slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 1s ease;
}

.slide.active{ opacity:1; }

.slide img,.slide video{
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
}

/************************************************************
 *  TELAS
 ************************************************************/
.screen{
  position:absolute;
  inset:0;
  background:#030712;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
  display:flex;
  flex-direction:column;
}

.screen.active{
  opacity:1;
  pointer-events:auto;
}

.screen-header{
  display:none;
}


.screen-title{
  color:#e5e7eb;
  font-weight:bold;
  font-size:3vh;
  letter-spacing:.5px;
}

.screen-body{
  height:90vh;
  padding:26px;
  display:flex;
  flex-direction:column;
  gap:18px;
  overflow:hidden;
}

/* =========================
   PAGAMENTO - LAYOUT (DETALHES NO TOPO)
   ========================= */
.paymethod-body{ justify-content:flex-start; }
.paymethod-top{ padding-top:6px; }
.paymethod-mid{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.paymethod-grid{ margin-top:0; }

/************************************************************
 *  MENU GRID
 ************************************************************/
.menu-grid{
  width:100%;
  height:100%;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:22px;
}

/************************************************************
 *  CARDS
 ************************************************************/
.card{
  background:#0f172a;
  color:#e5e7eb;
  border-radius:22px;
  box-shadow:0 0 20px rgba(59,130,246,.15);
  cursor:pointer;
  transition:transform .2s ease, filter .2s ease;
  position:relative;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:18px;
  text-align:center;
}

.card:active{
  transform:scale(.96);
  filter:brightness(.92);
}

.card.clicked{
  animation:softClick .35s ease;
}

.card-icon{
  width:6.6vh;
  height:6.6vh;
  opacity:.82;
  filter:drop-shadow(0 0 8px rgba(59,130,246,.18));
}

.card-label{
  font-size:3vh;
  font-weight:bold;
  letter-spacing:.6px;
}

.card-sub{
  font-size:2.1vh;
  opacity:.75;
  margin-top:-6px;
}

/************************************************************
 *  SUBMENU PAGAR
 ************************************************************/
.question{
  color:#e5e7eb;
  font-weight:bold;
  font-size:3.1vh;
  letter-spacing:.5px;
  text-align:center;
  margin-top:4px;
}

.sub-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:22px;
  margin-top:8px;
}

/************************************************************
 *  CPF (teclado embutido)
 ************************************************************/
.cpf-wrap{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:6px;
  align-items:center;
}

.cpf-label{
  width:min(92vw, 720px);
  color:rgba(229,231,235,.92);
  font-size:2.4vh;
  font-weight:bold;
  text-align:left;
}

.cpf-input{
  width:min(92vw, 720px);
  height:7.5vh;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:#e5e7eb;
  font-size:3vh;
  font-weight:bold;
  padding:0 16px;
  outline:none;
  letter-spacing:2px;
}

.keypad{
  width:min(92vw, 720px);
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
}

.keypad.keypad-suppress{
  opacity:0 !important;
  visibility:hidden !important;
  transform: translateY(12px);
  pointer-events:none !important;
}

.key{
  height:8.6vh;
  border-radius:18px;
  background:#0f172a;
  color:#e5e7eb;
  font-size:3.2vh;
  font-weight:bold;
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:0 0 18px rgba(59,130,246,.12);
  transition:transform .18s ease, filter .18s ease;
}

.key:active{
  transform:scale(.96);
  filter:brightness(.92);
}

.key.action{
  background:rgba(59,130,246,.15);
  border:1px solid rgba(59,130,246,.22);
  font-size:2.4vh;
  letter-spacing:.5px;
}

.key.enter{
  background:rgba(34,197,94,.14);
  border:1px solid rgba(34,197,94,.22);
}

.key.wide{ grid-column:span 2; }

/************************************************************
 *  ✅ ANIMAÇÃO PROFISSIONAL DO MENU (fade + slide, 2 em 2)
 ************************************************************/
.menu-grid .card{
  opacity:0;
  transform:translateY(18px);
}

.menu-grid.animate-in .card{
  animation:menuIn .42s ease forwards;
}

@keyframes menuIn{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/************************************************************
 *  ✅ MODAL DO LEITOR (CÓDIGO DE BARRAS)
 ************************************************************/
.scan-modal{
  position:fixed;
  inset:0;
  background:rgba(2,6,23,.72);
  backdrop-filter: blur(8px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:99998;
  padding:20px;
}

.scan-modal.show{ display:flex; }

.scan-card{
  width:min(92vw, 760px);
  border-radius:26px;
  background:#0b1226;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 0 34px rgba(59,130,246,.18);
  padding:22px 22px 18px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.scan-title{
  color:#e5e7eb;
  font-size:3.2vh;
  font-weight:900;
  letter-spacing:.5px;
  text-align:center;
}

.scan-instructions{
  color:rgba(229,231,235,.85);
  font-size:2.3vh;
  text-align:center;
  line-height:1.35;
}

.scan-row{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:6px;
}

.scan-pill{
  padding:10px 14px;
  border-radius:999px;
  background:rgba(59,130,246,.14);
  border:1px solid rgba(59,130,246,.22);
  color:#e5e7eb;
  font-weight:800;
  font-size:2.2vh;
  letter-spacing:.4px;
}

/* input invisível que recebe a "digitação" do leitor */
.scan-input{
  position:absolute;
  left:-9999px;
  top:-9999px;
  opacity:0;
  width:1px;
  height:1px;
}

.scan-status{
  margin-top:4px;
  text-align:center;
  font-size:2.2vh;
  font-weight:800;
  color:#93c5fd;
  min-height:3.2vh;
  word-break:break-all;
}

.scan-actions{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:6px;
}

.scan-btn{
  border:0;
  border-radius:18px;
  padding:12px 16px;
  font-weight:900;
  font-size:2.3vh;
  cursor:pointer;
  transition:transform .18s ease, filter .18s ease;
}

.scan-btn:active{ transform:scale(.98); filter:brightness(.92); }

.scan-btn.cancel{
  background:rgba(255,255,255,.08);
  color:#e5e7eb;
  border:1px solid rgba(255,255,255,.10);
}

@media (max-height: 650px){
  .card-icon{ width:6vh; height:6vh; }
  .card-label{ font-size:2.7vh; }
  .key{ height:8vh; }
}


/* ==========================================================
 * FATURAS (LISTA - CONSULTA CPF)
 * ========================================================== */
.invoice-card{
  background:#0f172a;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:14px 14px;
  color:#e5e7eb;
  cursor:pointer;
  box-shadow:0 0 18px rgba(59,130,246,.10);
  transition:transform .18s ease, filter .18s ease;
}
.invoice-card:active{
  transform:scale(.98);
  filter:brightness(.92);
}


/* =========================
   ENTRADA SUAVE DAS FATURAS
   (fade + deslize)
   ========================= */
@keyframes invoiceEnter{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}
.invoice-card.invoice-anim{
  opacity:0;
  transform:translateY(14px);
}
.invoice-card.invoice-anim.is-in{
  animation:invoiceEnter .36s ease both;
}

/* =========================
   PIX - TEXTO "AGUARDANDO"
   pulso bem suave
   ========================= */
@keyframes softPulse{
  0%,100%{ opacity:.78; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.01); }
}
.pix-status-msg.is-waiting{
  animation:softPulse 1.6s ease-in-out infinite;
}

/* =========================
   BOTÃO CANCELAR (PIX)
   mais alto + touch feedback
   ========================= */
#pixCancelBtn{
  padding:16px 34px;
  min-height:64px;
  border-radius:18px;
  font-size:2.4vh;
  touch-action:manipulation;
}
#pixCancelBtn:active{
  transform:scale(.985);
  filter:brightness(.92);
}
.invoice-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.invoice-title{
  font-weight:bold;
  font-size:2.5vh;
}
.invoice-sub{
  opacity:.75;
  margin-top:4px;
  font-size:2.0vh;
}
.badge-open{
  padding:6px 10px;
  border-radius:999px;
  font-weight:bold;
  font-size:1.8vh;
  /* laranja chamativo (em aberto) */
  background:rgba(255,140,0,.50);
  border:1px solid rgba(255,140,0,1);
  color:#fff7ed;
}


.badge-late{
  padding:6px 10px;
  border-radius:999px;
  font-weight:bold;
  font-size:1.8vh;
  /* vermelho forte (vencida) */
  background:rgba(255,0,0,.45);
  border:1px solid rgba(255,0,0,1);
  color:#fff1f2;
}


/* ==========================================================
 * TOAST (mensagem no topo)
 * ========================================================== */
.toast-wrap{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:200000;
  pointer-events:none;
}


.toast{
  display:none;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:16px 18px;
  width:100%;
  border-radius:0 0 18px 18px;
  font-weight:800;
  letter-spacing:.2px;
  font-size:2.1vh;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
}


.toast.show{
  display:flex;
  animation: toastIn .18s ease-out;
}

/* quando o toast estiver visível, reserva espaço no topo para não cobrir textos */
html.toast-visible .screen-body{
  padding-top: 96px;
}

.toast.error{
  background:rgba(255,0,0,.28);
  border-color:rgba(255,0,0,.55);
  color:#fff;
}


@keyframes toastIn{
  from{ transform:translateY(-12px); opacity:0; }
  to{ transform:translateY(0); opacity:1; }
}

/* ==========================================================
 * CPF - AJUSTES DE "TOTEM"
 * - dica de uso
 * - teclado mais perto do rodapé (acima da barra fixa)
 * ========================================================== */
.cpf-hint{
  width:min(92vw, 720px);
  color:rgba(229,231,235,.78);
  font-size:2.0vh;
  line-height:1.25;
  text-align:left;
  margin-top:-6px;
}

.cpf-wrap{
  height:100%;
  justify-content:flex-start;
}

.keypad{
  margin-top:auto;      /* empurra teclado para baixo */
  padding-bottom:10px;  /* respiro */
}

/* ==========================================================
 * PRELOADER - texto "Aguarde..." + nome
 * ========================================================== */
.preloader-text{
  margin-top:18px;
  text-align:center;
  color:#e5e7eb;
  font-weight:bold;
  font-size:2.4vh;
  letter-spacing:.5px;
}
#preloaderSub{
  margin-top:8px;
  font-weight:normal;
  font-size:2.1vh;
  opacity:.8;
}


/* ==========================================================
 * CONSULTA - card fixo + rolagem somente nas faturas
 * ========================================================== */
.consult-body{
  gap:14px;
}

.client-card{
  background:#0f172a;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:16px;
  color:#e5e7eb;
  box-shadow:0 0 18px rgba(59,130,246,.10);
}

.invoice-scroll{
  flex:1;
  overflow-y:auto;
  padding-bottom:10px;
  touch-action: pan-y;
  overscroll-behavior: contain;
}

.invoice-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:10px;
}

.no-invoices{
  opacity:.75;
  margin-top:8px;
  display:none;
}

.invoices-title{
  margin-top:4px;
}

/* remove a barra, mas mantém rolagem */
.no-scrollbar{
  scrollbar-width:none; /* Firefox */
  -ms-overflow-style:none; /* IE/Edge antigo */
}
.no-scrollbar::-webkit-scrollbar{
  width:0;
  height:0;
}


/* ==========================================================
 * Layout ajustes: CPF e Pagamento (centralizar e evitar topo)
 * ========================================================== */

.cpf-screen{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding-top:90px; /* espaço para o toast */
  padding-bottom:110px; /* respiro da barra inferior */
}

.cpf-screen .cpf-wrap{
  margin-top:0;
}

.pay-screen{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:90px; /* espaço para o toast */
  padding-bottom:110px;
}

.back-btn:focus,
.exit-btn:focus{
  outline:none;
}


/* =========================
   PAGAMENTO - DETALHES
   ========================= */
.payment-details{
  width:min(740px, 92vw);
  margin:18px auto 10px;
  padding:16px 20px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:rgba(255,255,255,.04);
  text-align:left;
  font-size:2.0vh;
  line-height:1.35;
  color:#e5e7eb;
}
.payment-details b{ font-weight:800; }

/* reforço: nunca deixar texto preto no bloco */
.payment-details,
.payment-details *{ color:#e5e7eb; }

/* =========================
   PIX - QR SCREEN
   ========================= */
.pix-body{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:14px;
  color:#e5e7eb;
}

/* PIX FORCE WHITE */
#screenPixQr, #screenPixQr *{
  color:#e5e7eb;
}
#screenPixQr .pix-timer{ color:#ffffff; }
#screenPixQr .pix-qr-wrap{ color:initial; } /* não afeta área branca do QR */
.pix-invoice-info{
  width:min(740px, 92vw);
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:rgba(255,255,255,.04);
  text-align:left;
  font-size:2.0vh;
  line-height:1.35;
  color:#e5e7eb;
}
.pix-qr-wrap{
  width:min(340px, 78vw);
  aspect-ratio:1/1;
  border-radius:22px;
  background:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.pix-qr-img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.pix-copy-paste{
  width:min(740px, 92vw);
  word-break:break-all;
  opacity:.85;
  font-size:1.8vh;
  text-align:center;
  color:rgba(229,231,235,.9);
}
.pix-timer-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  opacity:.9;
  color:#e5e7eb;
}
.pix-timer-label{ color:rgba(229,231,235,.85); }
.pix-timer{
  font-weight:900;
  font-size:2.4vh;
  color:#ffffff;
}
.pix-status-msg{
  min-height:2.6vh;
  font-size:2.0vh;
  font-weight:800;
  opacity:.9;
  color:#e5e7eb;
}
.pix-actions{
  margin-top:6px;
}