:root {
    --bg: #f6f7fb;
    --card: #ffffff;
    --text: #111;
    --muted: #777;
    --primary: #0aa37a;
}

body.dark {
    --bg: #0f172a;
    --card: #020617;
    --text: #e5e7eb;
    --muted: #9ca3af;
    --primary: #10b981;
}

* {
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
}

.layout {
    display: flex;
    height: 100vh;
}

/* SIDEBAR */
.sidebar {
    width: 260px;
    background: var(--card);
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.logo img {
    max-width: 180px;
}

.user {
    display: flex;
    gap: 10px;
    margin: 20px 0;
}

.avatar {
    width: 36px;
    height: 36px;
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.user small {
    color: var(--muted);
    font-size: 10px;
}

.user span {
    color: var(--primary);
    font-size: 12px;
}

nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 8px;
    color: var(--text);
    text-decoration: none;
    margin-bottom: 6px;
}

nav a.active,
nav a:hover {
    background: rgba(16,185,129,.15);
}

.sidebar-footer {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sidebar-footer button {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text);
}

.logout {
    color: #ef4444;
    text-decoration: none;
    display: flex;
    gap: 6px;
    align-items: center;
}

/* CONTENT */
.content {
    flex: 1;
    padding: 40px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}




.sub {
    color: var(--muted);
}

.card {
    background: var(--card);
    max-width: 420px;
    padding: 22px;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

label {
    font-size: 11px;
    font-weight: bold;
    color: var(--muted);
}

.valor {
    display: flex;
    align-items: center;
    border-bottom: 2px solid #ddd;
    margin-bottom: 20px;
}

.valor span {
    font-size: 26px;
    margin-right: 6px;
}

.valor input {
    font-size: 32px;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text);
}

input {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #ddd;
    margin-bottom: 12px;
    background: transparent;
    color: var(--text);
}

/* BOTÃO */
.btn-gerar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    cursor: pointer;
}

#resultado {
    margin-top: 20px;
    text-align: center;
}

.pdv-wrapper {
    width: 100%;
    max-width: 460px;
    margin-top: 80px; /* ajuste fino aqui */
}

.pix-result {
    margin-top: 20px;
    text-align: center;
}

.pix-qrcode {
    width: 220px;
    max-width: 100%;
    margin: 0 auto 15px;
    display: block;
}

.pix-code {
    width: 100%;
    min-height: 90px;
    padding: 10px;
    font-size: 13px;
    border-radius: 8px;
    border: 1px solid #ccc;
    resize: none;
}
.btn-copiar {
    margin-top: 10px;
    width: 100%;
    padding: 10px;
    background: #00a650;
    border: none;
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
}
.toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: #22c55e;
    color: #fff;
    padding: 12px 20px;
    border-radius: 999px;
    font-size: 14px;
    box-shadow: 0 8px 25px rgba(0,0,0,.2);
    opacity: 0;
    pointer-events: none;
    transition: all .3s ease;
    z-index: 9999;
}

.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
/* LOGIN */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(
        circle at top,
        rgba(16,185,129,0.15),
        transparent 40%
    );
}

.login-card {
    background: var(--card);
    width: 100%;
    max-width: 420px;
    padding: 40px;
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
    text-align: center;
}

.login-logo img {
    max-width: 280px;
    margin-bottom: 20px;
}

.login-card h2 {
    margin-bottom: 6px;
}

.login-card .sub {
    margin-bottom: 25px;
}

.input-icon {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 15px;
}

.input-icon span {
    color: var(--muted);
}

.input-icon input {
    border: none;
    outline: none;
    background: transparent;
    color: var(--text);
    font-size: 15px;
}

.login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0 20px;
    font-size: 13px;
}

.checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
}

.forgot {
    color: var(--primary);
    text-decoration: none;
}

.btn-login {
    margin-top: 10px;
    font-size: 16px;
}

/* Ajusta o "edit" (input) para não ficar alto demais */
.input-icon {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 12px;
    padding: 10px 12px;          /* menor altura */
    margin-bottom: 14px;
    background: rgba(255,255,255,0.02);
}

.input-icon input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text);
    font-size: 15px;
    padding: 2px 0;              /* tira “altura falsa” */
    line-height: 20px;           /* centraliza a letra */
}

/* Ícones dentro do input */
.input-icon .material-icons {
    font-size: 20px;
    color: var(--muted);
}

/* Botão "olhinho" */
.toggle-pass {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
}

.toggle-pass:hover {
    color: var(--text);
}

/* Checkbox alinhado e juntinho */
.login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 8px 0 18px;
    font-size: 13px;
}

.checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;                    /* aproxima texto */
    color: var(--muted);
    user-select: none;
}

.checkbox input {
    width: 16px;
    height: 16px;
    margin: 0;                   /* remove afastamento */
    accent-color: var(--primary); /* checkbox verdinho */
}

/* Botão com hover bonito */
.btn-login,
.btn-gerar.btn-login {
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.btn-login:hover,
.btn-gerar.btn-login:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 30px rgba(16,185,129,.25);
    filter: brightness(1.05);
}

.btn-login:active,
.btn-gerar.btn-login:active {
    transform: translateY(0px);
    box-shadow: none;
}
.input-icon:focus-within {
    border-color: rgba(16,185,129,0.55);
    box-shadow: 0 0 0 4px rgba(16,185,129,0.12);
}
/* Centraliza verticalmente texto do input */
.input-icon {
    height: 52px;               /* define altura fixa bonita */
    padding: 0 12px;            /* remove padding vertical */
}

.input-icon input {
    height: 100%;
    padding: 0;                 /* remove padding vertical do input */
    line-height: 52px;          /* força centralização */
    display: block;
}
.toggle-pass {
    width: 40px;
    height: 40px;
    border-radius: 10px;
}
.toggle-pass:hover {
    background: rgba(255,255,255,0.05);
}
/* LOGIN - centralização vertical (forçado) */
.login-card .input-icon{
    height: 52px !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center !important;
}

.login-card .input-icon input{
    height: 52px !important;
    line-height: 52px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}
/* ===== EXTRATO (layout tabela) ===== */
.content .card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}

.content .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.content .card-title {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
}

.content .subinfo {
  font-size: 12px;
  opacity: .75;
  margin-top: 3px;
}

.content .search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 280px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.02);
}

.content .search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 12px;
}

.content table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* evita quebrar tudo */
}

.content thead th {
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .05em;
  opacity: .7;
  padding: 12px 18px;
  text-align: left;
}

.content tbody td {
  padding: 14px 18px;
  border-top: 1px solid rgba(0,0,0,.05);
  font-size: 12px;
  vertical-align: middle;
}

.content .col-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  opacity: .85;
  word-break: break-all; /* id pode ser longo */
}

.content .col-amount {
  text-align: right;
  font-weight: 700;
}

.content .muted { opacity: .7; }
.content .nowrap { white-space: nowrap; }

.content .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
}

.content .badge-pending { background: #fff3cd; color: #9a6b00; }

.content .empty {
  padding: 18px;
  text-align: center;
  opacity: .7;
  font-size: 12px;
}
/* ===== EXTRATO: evitar corte e garantir EXPIRA EM ===== */
.content .card {
  max-width: 100%;
}

.content .card table {
  min-width: 980px;            /* força espaço mínimo p/ colunas */
}

.content .card {
  overflow: hidden;
}

.content .card .table-wrap {
  overflow-x: auto;            /* cria scroll horizontal se precisar */
  -webkit-overflow-scrolling: touch;
}

.content thead th,
.content tbody td {
  white-space: nowrap;         /* evita quebrar data/expira em linhas */
}

.content thead th:nth-child(1) { width: 32%; }  /* ID menor */
.content thead th:nth-child(2) { width: 18%; }  /* DATA mais próxima */
.content thead th:nth-child(3) { width: 10%; }  /* STATUS */
.content thead th:nth-child(4) { width: 10%; }  /* VALOR */
.content thead th:nth-child(5) { width: 8%;  }  /* VALIDADE */
.content thead th:nth-child(6) { width: 22%; }  /* EXPIRA EM maior */

/* ===== EXTRATO sem scroll: compactar datas e ID ===== */
.content .table-wrap { overflow: hidden; } /* garante sem scroll */

.content table { table-layout: fixed; width: 100%; }

.content thead th:nth-child(1) { width: 34%; } /* ID */
.content thead th:nth-child(2) { width: 18%; } /* DATA */
.content thead th:nth-child(3) { width: 10%; } /* STATUS */
.content thead th:nth-child(4) { width: 10%; } /* VALOR */
.content thead th:nth-child(5) { width: 8%; }  /* VALIDADE */
.content thead th:nth-child(6) { width: 20%; } /* EXPIRA EM */

.content .col-id {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;  /* corta com ... */
  max-width: 100%;
  display: block;
}

.content .dt2 {
  line-height: 1.15;
}
.content .dt2 .d { display:block; }
.content .dt2 .t { display:block; opacity: .75; font-size: 11px; }

.content td, .content th { overflow: hidden; }
.content .badge-paid { background: #d1fae5; color: #046c4e; }
.content .badge-expired { background: #fee2e2; color: #991b1b; }
/* ===== BADGES DE STATUS ===== */

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
}

/* PENDING (amarelo) */
.badge-pending {
  background: #fff3cd;
  color: #9a6b00;
}

/* PAID (verde / sucesso) */
.badge-paid {
  background: #d1fae5;   /* verde claro */
  color: #065f46;        /* verde escuro */
}

/* EXPIRED (vermelho / erro) */
.badge-expired {
  background: #fee2e2;
  color: #991b1b;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #10b981;
  color: #fff;
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

.btn-primary:hover {
  background: #059669;
}
.btn-link {
  background: none;
  border: none;
  color: #10b981;
  font-weight: 600;
  cursor: pointer;
  margin-right: 12px;
}

.btn-link.danger {
  color: #ef4444;
}
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal.hidden {
  display: none;
}

.modal-content {
  background: #fff;
  padding: 24px;
  border-radius: 16px;
  width: 420px;
  text-align: center;
}
/* ===== USER CARD (Sidebar) ===== */
.user-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 12px;
  margin:10px 12px 14px;
  border-radius:14px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(16,24,40,0.06);
  box-shadow: 0 10px 24px rgba(16,24,40,0.06);
  backdrop-filter: blur(8px);
}

body.dark .user-card{
  background: rgba(20,20,20,0.55);
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
}

/* Avatar circular de verdade (nunca oval) */
.user-avatar{
  position:relative;
  width:44px;
  height:44px;
  min-width:44px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-weight:800;
  letter-spacing:0.5px;
  color:#0B1220;
  user-select:none;

  /* visual premium: gradiente + “anel” */
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0.35)) ,
              linear-gradient(135deg, rgba(16,185,129,0.35), rgba(59,130,246,0.30));
  border:1px solid rgba(16,24,40,0.08);
  box-shadow: 0 10px 18px rgba(16,24,40,0.12);
}

body.dark .user-avatar{
  color:#EAF0FF;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.10), rgba(255,255,255,0.02)) ,
              linear-gradient(135deg, rgba(16,185,129,0.40), rgba(59,130,246,0.35));
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 12px 22px rgba(0,0,0,0.35);
}

/* Pontinho de status (opcional, fica muito “app”) */
.user-dot{
  position:absolute;
  right:-1px;
  bottom:-1px;
  width:11px;
  height:11px;
  border-radius:50%;
  background:#22c55e;
  border:2px solid rgba(255,255,255,0.95);
  box-shadow: 0 6px 10px rgba(34,197,94,0.35);
}

body.dark .user-dot{
  border-color: rgba(20,20,20,0.95);
}

/* Textos */
.user-meta{ min-width:0; }
.user-kicker{
  font-size:10px;
  letter-spacing:0.12em;
  font-weight:700;
  opacity:0.65;
  margin-bottom:2px;
}
.user-name{
  font-size:14px;
  font-weight:800;
  line-height:1.1;
  color:#0B1220;
}
.user-email{
  font-size:12px;
  margin-top:3px;
  opacity:0.78;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 180px;
}

/* Ajustes para dark */
body.dark .user-name{ color:#EAF0FF; }
body.dark .user-email{ opacity:0.80; }
/* Alinhamento fino do user-card com o menu */
.sidebar .user-card{
  margin-left: 6px;   /* antes estava “centralizado” */
  margin-right: 6px;
}
/* ===== Menu premium: item ativo ===== */
.sidebar nav a{
  position: relative;
}

/* barra vertical no item ativo */
.sidebar nav a.active::before{
  content: "";
  position: absolute;
  left: 0;
  top: 12%;
  width: 3px;
  height: 76%;
  background: #10B981;
  border-radius: 3px;
}

/* ícone do item ativo em verde */
.sidebar nav a.active .material-icons{
  color: #10B981;
}

/* opcional: texto do item ativo um pouco mais forte */
.sidebar nav a.active{
  font-weight: 700;
}
/* ===== Sidebar com profundidade (premium) ===== */
.sidebar{
  border-right: 1px solid rgba(0,0,0,0.06);
  box-shadow: 10px 0 30px rgba(16,24,40,0.04);
  background: #fff;
}

/* se você usa modo dark, mantém consistente */
body.dark .sidebar{
  border-right: 1px solid rgba(255,255,255,0.08);
  box-shadow: 10px 0 30px rgba(0,0,0,0.25);
  background: #0f0f10;
}
/* ===== Home (Visão Geral) ===== */
.home-wrap{ max-width: 920px; }
.home-title{ font-size: 28px; margin: 6px 0 4px; }
.home-sub{ opacity: .7; margin-bottom: 18px; }

.home-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:12px;
  margin-bottom: 14px;
}

.home-card{
  background:#fff;
  border:1px solid rgba(0,0,0,0.06);
  border-radius:14px;
  padding:14px;
  box-shadow: 0 10px 24px rgba(16,24,40,0.06);
}

.home-label{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.65;
}

.home-value{
  font-size:22px;
  font-weight:800;
  margin-top:8px;
  color:#0B1220;
}

.home-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin: 6px 0 16px;
}

.home-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,0.06);
  background: rgba(16,185,129,0.10);
  color:#0B1220;
  text-decoration:none;
  font-weight:700;
}

.home-btn .material-icons{ font-size:20px; color:#10B981; }

.home-table{ padding: 14px; }
.home-empty{ opacity:.7; padding: 10px 0; }

.home-list{ display:flex; flex-direction:column; gap:10px; }
.home-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 12px;
  border-radius:12px;
  background: rgba(0,0,0,0.02);
  border:1px solid rgba(0,0,0,0.04);
}
.home-row-id{ font-weight:800; }
.home-row-sub{ font-size:12px; opacity:.7; margin-top:2px; }
.home-row-right{ font-weight:800; }

@media (max-width: 900px){
  .home-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
/* ===== KPIs Home ===== */
.home-kpis{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:12px;
  margin-bottom:18px;
}

.kpi-card{
  background:#fff;
  border:1px solid rgba(0,0,0,0.06);
  border-radius:14px;
  padding:14px;
  box-shadow: 0 10px 24px rgba(16,24,40,0.06);
}

.kpi-label{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  opacity:.65;
}

.kpi-value{
  font-size:22px;
  font-weight:800;
  margin-top:8px;
  color:#0B1220;
}

.kpi-highlight{
  background: linear-gradient(135deg, rgba(16,185,129,0.12), rgba(16,185,129,0.04));
  border-color: rgba(16,185,129,0.35);
}

@media (max-width: 900px){
  .home-kpis{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}
/* ===== Mini gráfico (7 dias) ===== */
.home-chart{
  margin-bottom: 14px;
}

.home-chart-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 12px;
}

.home-chart-total{
  font-weight: 800;
  opacity: .9;
}

.chart-bars{
  height: 140px;
  display:grid;
  grid-template-columns: repeat(7, minmax(0,1fr));
  gap:10px;
  align-items:end;
  padding: 10px 6px 6px;
  border-radius: 14px;
  background: rgba(0,0,0,0.02);
  border: 1px solid rgba(0,0,0,0.04);
}

.bar-col{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}

.bar{
  width: 100%;
  max-width: 22px;
  min-height: 6px; /* aparece mesmo quando é baixo */
  border-radius: 10px;
  background: rgba(16,185,129,0.85);
  box-shadow: 0 10px 20px rgba(16,185,129,0.16);
}

.bar-label{
  font-size: 11px;
  opacity: .65;
}
/* ===== Status badges (Home) ===== */
.status-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
}

.badge-paid{
  background: rgba(16,185,129,0.12);
  color: #10B981;
  border: 1px solid rgba(16,185,129,0.25);
}

.badge-pending{
  background: rgba(245,158,11,0.12);
  color: #F59E0B;
  border: 1px solid rgba(245,158,11,0.25);
}

.badge-expired{
  background: rgba(107,114,128,0.12);
  color: #6B7280;
  border: 1px solid rgba(107,114,128,0.22);
}
/* ===== FIX GRÁFICO 7 DIAS ===== */
.home-chart{
  display:block;
}

.chart-bars{
  display:grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  align-items:end !important;
  gap:10px !important;

  height:140px !important;
  padding:12px 8px !important;

  background:#f8fafc !important;
  border:1px solid rgba(0,0,0,0.06) !important;
  border-radius:14px !important;
}

.bar-col{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-end !important;
  height:100% !important;
}

.bar{
  width:18px !important;
  min-height:8px !important; /* ← ISSO FAZ APARECER MESMO COM ZERO */
  border-radius:8px !important;

  background:#10B981 !important;
  box-shadow:0 6px 14px rgba(16,185,129,0.35) !important;
}

.bar-label{
  margin-top:6px !important;
  font-size:11px !important;
  opacity:0.7 !important;
  text-align:center !important;
}
.bar-off{
  background: rgba(107,114,128,0.35) !important;
  box-shadow: none !important;
}
.bar-on{
  background: #10B981 !important;
  box-shadow: 0 6px 14px rgba(16,185,129,0.35) !important;
}
.bar-col{ position: relative !important; }

.bar-col:hover::after{
  content: attr(data-tip);
  position: absolute;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(17,24,39,0.92);
  color: #fff;
  box-shadow: 0 14px 30px rgba(0,0,0,0.18);
  pointer-events: none;
  z-index: 5;
}
.home-chart-total{
  font-size: 14px;
  font-weight: 800;
  opacity: .85;
}
.content{
  scrollbar-width: thin;
  scrollbar-color: rgba(16,185,129,0.6) transparent;
}

/* ===== FIX SCROLL DASHBOARD ===== */
html, body{
  height: 100%;
  overflow: hidden; /* body não rola */
}

.layout{
  height: 100vh;
  display: flex;
}

.content{
  flex: 1;
  overflow-y: auto;   /* ← scroll fica AQUI */
  overflow-x: hidden;
  padding-bottom: 40px; /* respiro no final */
}
/* ===== PDV Premium (mesma linha da Visão Geral) ===== */
.pdv-wrapper{ max-width: 920px; margin: 0 auto; }
.pdv-head h1{ margin:0; }
.pdv-head .sub{ margin: 6px 0 18px; color:#6b7280; }

.pdv-card{ padding: 18px; }

.pdv-kpi-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px;
  margin: 0 0 16px 0;
}
.pdv-kpi-card{
  background:#fff;
  border-radius:14px;
  padding:14px 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.05);
  border:1px solid rgba(0,0,0,.04);
}
.pdv-kpi-label{
  font-size:12px;
  letter-spacing:.12em;
  color:#7a7a7a;
}
.pdv-kpi-value{
  margin-top:6px;
  font-size:20px;
  font-weight:800;
  color:#0f172a;
}
.pdv-kpi-highlight{
  background: linear-gradient(90deg, rgba(16,185,129,.08), rgba(59,130,246,.06));
  border-color: rgba(16,185,129,.25);
}

.pdv-label{ display:block; margin: 10px 0 6px; font-size:12px; letter-spacing:.12em; color:#7a7a7a; }
.pdv-input{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  outline:none;
}
.pdv-input:focus{ border-color: rgba(16,185,129,.45); }

.pdv-valor input{ width:100%; }

.pdv-quick-amounts{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin: 10px 0 0 0;
}
.pdv-chip{
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  padding:8px 12px;
  border-radius:999px;
  cursor:pointer;
  font-weight:700;
}
.pdv-chip:hover{ transform: translateY(-1px); }

.pdv-row{ display:flex; gap:12px; margin-top: 10px; }
.pdv-col{ flex:1; }

.pdv-divider{
  height:1px;
  background: rgba(0,0,0,.06);
  margin: 14px 0;
}

.pdv-btn{ width:100%; margin-top: 14px; }

.pdv-result{ margin-top: 14px; }

.pdv-loading{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  padding:14px;
}
.pdv-loading-title{ font-weight:800; color:#0f172a; }
.pdv-loading-sub{ margin-top:6px; color:#6b7280; font-size:13px; }

.pdv-error{
  background: rgba(239,68,68,.08);
  border:1px solid rgba(239,68,68,.22);
  border-radius:14px;
  padding:12px;
  font-weight:700;
  color:#991b1b;
}

.pdv-success{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  padding:14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.05);
}
.pdv-success-title{ font-weight:900; color:#0f172a; }
.pdv-success-sub{ margin-top:6px; color:#6b7280; font-size:13px; }

.pdv-qr-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-top:12px;
}
.pdv-qr-box, .pdv-line-box{
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  padding:12px;
}
.pdv-qr-label{
  font-size:12px;
  letter-spacing:.12em;
  color:#7a7a7a;
  margin-bottom:8px;
}
.pdv-qr-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 220px;
  background: rgba(0,0,0,.02);
  border-radius:12px;
}
.pdv-qr-wrap img{ max-width: 220px; width: 100%; height: auto; }

.pdv-textarea{
  width:100%;
  min-height:120px;
  resize: none;
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
}

.pdv-actions-row{ margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; }

.pdv-btn-secondary{
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:800;
}

.pdv-after-actions{
  margin-top:12px;
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  padding:12px;
  background: linear-gradient(90deg, rgba(16,185,129,.06), rgba(59,130,246,.05));
}
.pdv-after-title{ font-weight:900; color:#0f172a; margin-bottom:8px; }
.pdv-after-buttons{ display:flex; gap:10px; flex-wrap:wrap; }
.pdv-after-hint{ margin-top:8px; color:#6b7280; font-size:12px; }

@media (max-width: 820px){
  .pdv-kpi-grid{ grid-template-columns: 1fr; }
  .pdv-qr-grid{ grid-template-columns: 1fr; }
  .pdv-row{ flex-direction: column; }
}
/* ===== PDV Premium ===== */
.pdv-wrapper{ max-width: 920px; margin: 0 auto; }
.pdv-card{ padding: 18px; }

.pdv-label{
  display:block;
  margin: 10px 0 6px;
  font-size:12px;
  letter-spacing:.12em;
  color:#7a7a7a;
}

.pdv-input{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  outline:none;
}
.pdv-input:focus{ border-color: rgba(16,185,129,.45); }

.pdv-quick-amounts{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin: 10px 0 0 0;
}
.pdv-chip{
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  padding:8px 12px;
  border-radius:999px;
  cursor:pointer;
  font-weight:700;
}
.pdv-chip:hover{ transform: translateY(-1px); }

.pdv-row{ display:flex; gap:12px; margin-top: 10px; }
.pdv-col{ flex:1; }

.pdv-divider{
  height:1px;
  background: rgba(0,0,0,.06);
  margin: 14px 0;
}

.pdv-btn{ width:100%; margin-top: 14px; }
.pdv-result{ margin-top: 14px; }

.pdv-loading{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  padding:14px;
}
.pdv-loading-title{ font-weight:800; color:#0f172a; }
.pdv-loading-sub{ margin-top:6px; color:#6b7280; font-size:13px; }

.pdv-error{
  background: rgba(239,68,68,.08);
  border:1px solid rgba(239,68,68,.22);
  border-radius:14px;
  padding:12px;
  font-weight:700;
  color:#991b1b;
}

.pdv-success{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  padding:14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.05);
}
.pdv-success-title{ font-weight:900; color:#0f172a; }
.pdv-success-sub{ margin-top:6px; color:#6b7280; font-size:13px; }

.pdv-qr-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-top:12px;
}
.pdv-qr-box, .pdv-line-box{
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  padding:12px;
}
.pdv-qr-label{
  font-size:12px;
  letter-spacing:.12em;
  color:#7a7a7a;
  margin-bottom:8px;
}
.pdv-qr-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 220px;
  background: rgba(0,0,0,.02);
  border-radius:12px;
}
.pdv-qr-wrap img{ max-width: 220px; width: 100%; height: auto; }

.pdv-textarea{
  width:100%;
  min-height:120px;
  resize: none;
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
}

.pdv-actions-row{ margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; }

.pdv-btn-secondary{
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:800;
}

.pdv-after-actions{
  margin-top:12px;
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  padding:12px;
  background: linear-gradient(90deg, rgba(16,185,129,.06), rgba(59,130,246,.05));
}
.pdv-after-title{ font-weight:900; color:#0f172a; margin-bottom:8px; }
.pdv-after-buttons{ display:flex; gap:10px; flex-wrap:wrap; }
.pdv-after-hint{ margin-top:8px; color:#6b7280; font-size:12px; }

@media (max-width: 820px){
  .pdv-qr-grid{ grid-template-columns: 1fr; }
  .pdv-row{ flex-direction: column; }
}
.pdv-hint{
  margin-top: -2px;
  margin-bottom: 8px;
  font-size: 12px;
  color:#6b7280;
}
.pdv-hint strong{ color:#0f172a; }
/* ===== Refinamento do resultado do PDV (pós-geração) ===== */
.pdv-success{
  padding: 18px;
}

.pdv-success-head{
  text-align:center;
  margin-bottom: 12px;
}

.pdv-qr-grid{
  display:grid;
  grid-template-columns: 340px 1fr;
  gap:16px;
  align-items: start;
}

.pdv-qr-box, .pdv-line-box{
  padding:16px;
  border-radius:16px;
}

.pdv-qr-wrap{
  min-height: 260px;
  padding: 14px;
}

.pdv-qr-wrap img{
  max-width: 240px;
  border-radius: 12px;
}

.pdv-textarea{
  min-height: 170px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  line-height: 1.35;
}

.pdv-actions-row{
  justify-content: flex-end;
}

.pdv-after-actions{
  margin-top: 16px;
  padding: 14px 16px;
}

.pdv-after-title{
  text-align:center;
  margin-bottom: 10px;
}

/* Botão único (bonito, igual padrão do sistema) */
.pdv-btn-primary{
  width: 100%;
  border: 0;
  cursor: pointer;
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 900;
  background: #10b981;
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  box-shadow: 0 10px 24px rgba(16,185,129,.22);
}
.pdv-btn-primary:hover{ transform: translateY(-1px); }

.pdv-btn-secondary{
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 800;
}

/* Responsivo */
@media (max-width: 980px){
  .pdv-qr-grid{ grid-template-columns: 1fr; }
}
/* ===== FORÇA o botão principal do PDV ficar verde ===== */
button.pdv-btn-primary,
.pdv-after-actions button.pdv-btn-primary {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  font-weight: 900 !important;
  font-size: 15px !important;
  cursor: pointer !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  box-shadow: 0 12px 28px rgba(16,185,129,.35) !important;
}

button.pdv-btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(16,185,129,.45) !important;
}
/* ===== Forçar botão verde do PDV (Downloads) ===== */
.pdv-after-actions #btnDownloadBoth{
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  font-weight: 900 !important;
  font-size: 15px !important;
  cursor: pointer !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  box-shadow: 0 12px 28px rgba(16,185,129,.35) !important;
}

.pdv-after-actions #btnDownloadBoth:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(16,185,129,.45) !important;
}

.pdv-after-actions #btnDownloadBoth .material-icons{
  font-size: 20px;
  line-height: 1;
}
button#btnDownloadBoth{
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #fff !important;
}
/* =========================================================
   FORÇA TOTAL – BOTÃO DOWNLOAD PDV (IGNORA CSS ANTIGO)
   ========================================================= */
.pdv-after-actions button#btnDownloadBoth,
.pdv-after-actions button#btnDownloadBoth:visited,
.pdv-after-actions button#btnDownloadBoth:active,
.pdv-after-actions button#btnDownloadBoth:focus {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 16px 18px !important;
  font-weight: 900 !important;
  font-size: 15px !important;
  cursor: pointer !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  box-shadow: 0 12px 30px rgba(16,185,129,.45) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.pdv-after-actions button#btnDownloadBoth:hover {
  background: linear-gradient(135deg, #14c68a 0%, #059669 100%) !important;
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(16,185,129,.55) !important;
}

.pdv-after-actions button#btnDownloadBoth .material-icons {
  color: #ffffff !important;
  font-size: 20px;
}
/* Botão COPIAR (verde com ícone) */
.pdv-actions-row .pdv-btn-copy{
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color:#fff !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  box-shadow: 0 10px 22px rgba(16,185,129,.25) !important;
}

.pdv-actions-row .pdv-btn-copy:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(16,185,129,.35) !important;
}

.pdv-actions-row .pdv-btn-copy .material-icons{
  color:#fff !important;
  font-size: 18px;
}
/* =========================================================
   FORÇA TOTAL – BOTÃO COPIAR LINHA (PDV)
   ========================================================= */
.pdv-actions-row button,
.pdv-actions-row button.pdv-btn-secondary,
.pdv-actions-row button:visited,
.pdv-actions-row button:active,
.pdv-actions-row button:focus {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 12px 16px !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 10px 22px rgba(16,185,129,.35) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.pdv-actions-row button:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(16,185,129,.45) !important;
}
/* =========================
   LOGIN PREMIUM (Light + Dark)
   ========================= */

:root{
  --login-bg: #f6f8fb;
  --login-card: rgba(255,255,255,.86);
  --login-card-border: rgba(15,23,42,.08);
  --login-text: #0f172a;
  --login-muted: #64748b;
  --login-input: rgba(255,255,255,.95);
  --login-input-border: rgba(15,23,42,.12);
  --login-shadow: 0 30px 80px rgba(2, 6, 23, .12);
  --login-glow: 0 18px 40px rgba(16,185,129,.22);
}

/* Dark mode se você usar body.dark */
body.dark{
  --login-bg: #070b14;
  --login-card: rgba(10, 15, 26, .78);
  --login-card-border: rgba(148,163,184,.14);
  --login-text: #e5e7eb;
  --login-muted: rgba(226,232,240,.72);
  --login-input: rgba(2,6,23,.35);
  --login-input-border: rgba(148,163,184,.18);
  --login-shadow: 0 40px 100px rgba(0,0,0,.55);
  --login-glow: 0 18px 40px rgba(16,185,129,.18);
}

.login-page{
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 42px 16px;
  background:
    radial-gradient(1200px 650px at 20% 10%, rgba(16,185,129,.16), transparent 52%),
    radial-gradient(900px 520px at 80% 0%, rgba(59,130,246,.12), transparent 55%),
    var(--login-bg);
  color: var(--login-text);
}

.login-card{
  width: min(460px, 100%);
  border-radius: 26px;
  background: var(--login-card);
  border: 1px solid var(--login-card-border);
  box-shadow: var(--login-shadow);
  backdrop-filter: blur(14px);
  padding: 28px;
  position: relative;
  overflow: hidden;
}

.login-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(620px 240px at 20% 0%, rgba(16,185,129129,.22), transparent 60%);
  pointer-events:none;
}

.login-header{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 10px;
  margin-bottom: 16px;
}

.login-logo{
  width: 190px;
  height: auto;
  filter: drop-shadow(0 16px 36px rgba(0,0,0,.14));
}

body.dark .login-logo{
  filter: drop-shadow(0 20px 46px rgba(0,0,0,.58));
}

.login-title{
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 6px 0 0 0;
  text-align:center;
}

.login-subtitle{
  margin: 0;
  text-align:center;
  color: var(--login-muted);
  font-size: 13px;
}

.login-form{
  position:relative;
  margin-top: 18px;
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.login-field{
  display:flex;
  flex-direction:column;
  gap: 7px;
}

.login-label{
  font-size: 12px;
  letter-spacing: .10em;
  color: var(--login-muted);
  text-transform: uppercase;
}

.login-input-wrap{
  position:relative;
}

.login-input{
  width: 100%;
  padding: 14px 44px 14px 42px;
  border-radius: 14px;
  border: 1px solid var(--login-input-border);
  background: var(--login-input);
  color: var(--login-text);
  outline:none;
  transition: .15s ease;
}

.login-input::placeholder{
  color: rgba(100,116,139,.75);
}
body.dark .login-input::placeholder{
  color: rgba(226,232,240,.45);
}

.login-input:focus{
  border-color: rgba(16,185,129,.55);
  box-shadow: 0 0 0 4px rgba(16,185,129,.16);
}

.login-icon{
  position:absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(100,116,139,.9);
  font-size: 20px;
}
body.dark .login-icon{ color: rgba(226,232,240,.65); }

.login-eye{
  position:absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: rgba(100,116,139,.9);
  cursor:pointer;
  padding: 6px;
  border-radius: 10px;
}
.login-eye:hover{ background: rgba(15,23,42,.05); }
body.dark .login-eye:hover{ background: rgba(226,232,240,.06); }

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

.login-remember{
  display:flex;
  align-items:center;
  gap: 10px;
  color: var(--login-muted);
  font-size: 13px;
}

.login-remember input{
  width: 16px;
  height: 16px;
  accent-color: var(--accent-primary, #10b981);
}

.login-link{
  color: var(--accent-primary, #10b981);
  font-weight: 900;
  text-decoration:none;
  font-size: 13px;
}
.login-link:hover{ text-decoration: underline; }

.login-btn{
  margin-top: 12px;
  width: 100%;
  border: 0;
  border-radius: 16px;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--accent-primary, #10b981), #059669);
  color: #fff;
  font-weight: 900;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  box-shadow: var(--login-glow);
  transition: .15s ease;
}
.login-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 22px 44px rgba(16,185,129,.28);
}

.login-foot{
  margin-top: 14px;
  text-align:center;
  color: var(--login-muted);
  font-size: 12px;
}
/* =========================================================
   LOGIN – FIX DEFINITIVO DE ALINHAMENTO (vencer CSS antigo)
   Cole no FINAL do style.css
   ========================================================= */

.login-page { display:flex !important; align-items:center !important; justify-content:center !important; }
.login-card { padding: 28px !important; }

/* Não centralizar labels no meio: alinhamento à esquerda */
.login-form { text-align: left !important; }
.login-field { width:100% !important; }
.login-label { text-align:left !important; align-self:flex-start !important; margin-left: 2px !important; }

/* Inputs com altura idêntica e alinhamento perfeito */
.login-input-wrap{
  position: relative !important;
  width: 100% !important;
  display:flex !important;
  align-items:center !important;
}

.login-input{
  width: 100% !important;
  height: 50px !important;
  padding-left: 44px !important;
  padding-right: 44px !important; /* garante igual no email e senha */
  border-radius: 14px !important;
  box-sizing: border-box !important;
}

/* Ícone da esquerda centralizado */
.login-icon{
  position:absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width: 20px !important;
  height: 20px !important;
}

/* Botão do olho: mesmo centro vertical */
.login-eye{
  position:absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  height: 34px !important;
  width: 40px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* Linha lembrar/esqueci: alinhamento perfeito */
.login-row{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap: 12px !important;
  margin-top: 8px !important;
}

.login-remember{
  display:flex !important;
  align-items:center !important;
  gap: 10px !important;
  line-height: 1 !important;
  user-select: none;
}

.login-remember input{
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  transform: translateY(0) !important;
}

/* Mantém link alinhado no mesmo baseline */
.login-link{
  display:inline-flex !important;
  align-items:center !important;
  line-height: 1 !important;
}

/* Deixa a card mais “premium” e destaca o logo */
.login-logo{
  width: 200px !important;
  margin-bottom: 4px !important;
}
/* Fundo mais premium */
.login-page{
  background:
    radial-gradient(1100px 600px at 18% 8%, rgba(16,185,129,.18), transparent 54%),
    radial-gradient(900px 520px at 80% 0%, rgba(59,130,246,.14), transparent 55%),
    radial-gradient(700px 420px at 50% 100%, rgba(16,185,129,.10), transparent 55%),
    var(--login-bg) !important;
}

/* Glow sutil atrás do logo */
.login-header{
  position: relative;
}
.login-header::after{
  content:"";
  position:absolute;
  width: 280px;
  height: 120px;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(16,185,129,.20), transparent 65%);
  filter: blur(10px);
  z-index: 0;
}
.login-header > *{ position:relative; z-index: 1; }
@keyframes loginPop {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.login-card{
  animation: loginPop .45s ease-out both;
}
/* =========================================================
   LOGIN FIX ULTRA (vence CSS antigo)
   ========================================================= */

.login-page { display:flex !important; align-items:center !important; justify-content:center !important; }
.login-card { width:min(460px, 100%) !important; }

/* Labels sempre em cima e alinhados à esquerda */
.login-form { text-align:left !important; }
.login-field { width:100% !important; }
.login-label{
  display:block !important;
  text-align:left !important;
  margin: 0 0 6px 2px !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
}

/* Inputs com altura igual e alinhamento perfeito */
.login-input-wrap{
  position:relative !important;
  width:100% !important;
}

.login-input{
  height: 50px !important;
  width: 100% !important;
  padding: 14px 44px 14px 44px !important; /* mesma margem direita/esquerda */
  box-sizing: border-box !important;
  border-radius: 14px !important;
}

/* Ícone esquerda centralizado */
.login-icon{
  position:absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 20px !important;
  height: 20px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* Botão olho alinhado e sem “puxar” o input */
.login-eye{
  position:absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  height: 34px !important;
  width: 40px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius: 12px !important;
}

/* Row lembrar/esqueci 100% alinhado */
.login-row{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap: 12px !important;
}

.login-remember{
  display:flex !important;
  align-items:center !important;
  gap: 10px !important;
  line-height: 1 !important;
}

.login-remember input{
  margin: 0 !important;
  width: 16px !important;
  height: 16px !important;
}
@keyframes loginPop {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.login-card{ animation: loginPop .45s ease-out both; }
.login-page{
  background:
    radial-gradient(1100px 600px at 18% 8%, rgba(16,185,129,.18), transparent 54%),
    radial-gradient(900px 520px at 80% 0%, rgba(59,130,246,.14), transparent 55%),
    radial-gradient(700px 420px at 50% 100%, rgba(16,185,129,.10), transparent 55%),
    var(--login-bg) !important;
}

.login-header{
  position: relative;
}
.login-header::after{
  content:"";
  position:absolute;
  width: 280px;
  height: 120px;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(16,185,129,.20), transparent 65%);
  filter: blur(10px);
  z-index: 0;
}
.login-header > *{ position:relative; z-index: 1; }
/* ===== LOGIN POLISH FINAL ===== */

/* Aproxima labels dos inputs e alinha sempre à esquerda */
.login-field { gap: 6px !important; }
.login-label{
  text-align: left !important;
  margin: 0 0 6px 2px !important;
  letter-spacing: .14em !important;
  font-size: 11px !important;
  opacity: .95 !important;
}

/* Ajuste de largura e espaçamentos internos para ficar mais “fintech” */
.login-card{
  padding: 30px !important;
  border-radius: 28px !important;
}

/* Inputs mais “premium” */
.login-input{
  height: 52px !important;
  border-radius: 16px !important;
  padding-left: 46px !important;
  padding-right: 46px !important;
}

/* Ícones perfeitamente centralizados */
.login-icon{
  left: 16px !important;
  font-size: 21px !important;
}

.login-eye{
  right: 12px !important;
  height: 36px !important;
  width: 44px !important;
  border-radius: 12px !important;
}

/* Linha lembrar/esqueci com baseline perfeita */
.login-row{
  margin-top: 10px !important;
  align-items: center !important;
}

.login-remember{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  line-height: 1 !important;
}

.login-remember input{
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  transform: translateY(-1px) !important; /* corrige baseline visual */
}

.login-link{
  transform: translateY(-1px);
}

/* Logo com mais destaque (sem estourar) */
.login-logo{
  width: 210px !important;
  filter: drop-shadow(0 14px 34px rgba(0,0,0,.12)) !important;
}

/* Botão mais premium */
.login-btn{
  border-radius: 18px !important;
  padding: 15px 18px !important;
  font-size: 15px !important;
}

/* Animação mais elegante */
@keyframes loginPopPro {
  0%   { opacity: 0; transform: translateY(18px) scale(.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.login-card{ animation: loginPopPro .50s cubic-bezier(.2,.9,.2,1) both !important; }
/* ===== FIX: texto centralizado dentro dos inputs do login ===== */
.login-input{
  height: 52px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 52px !important;   /* força central vertical */
  font-size: 14px !important;
}

/* Evita que o navegador “mexa” em inputs */
.login-input{
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Se em algum lugar você tiver input { line-height: ... } isso garante aqui */
.login-input::placeholder{
  line-height: 52px !important;
}
/* ===== FIX REAL: centralizar texto no input (sem line-height) ===== */
.login-input-wrap{
  display: flex !important;
  align-items: center !important;
}

.login-input{
  height: 52px !important;
  line-height: normal !important;     /* remove herança */
  padding-top: 14px !important;       /* centralização real */
  padding-bottom: 14px !important;
  font-size: 14px !important;
  box-sizing: border-box !important;
}

/* Placeholder também alinhado */
.login-input::placeholder{
  line-height: normal !important;
}
/* ===== FIX: ícones do login com contraste ===== */
.login-icon,
.login-eye,
.login-eye .material-icons{
  opacity: 1 !important;
  color: rgba(100,116,139,.95) !important;
}

body.dark .login-icon,
body.dark .login-eye,
body.dark .login-eye .material-icons{
  color: rgba(226,232,240,.80) !important;
}
/* ===== LOGIN: alinhar ícones com flex (sem top:50%) ===== */

.login-input-wrap{
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

/* ícone da esquerda */
.login-icon{
  position: absolute !important;
  left: 16px !important;
  top: auto !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 52px !important;          /* mesma altura do input */
  width: 20px !important;
}

/* botão do olho (direita) */
.login-eye{
  position: absolute !important;
  right: 10px !important;
  top: auto !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 52px !important;          /* mesma altura do input */
  width: 44px !important;
  padding: 0 !important;
}

/* garante que o texto do input não bate no olho */
.login-input{
  padding-left: 46px !important;
  padding-right: 54px !important;   /* espaço extra para o botão do olho */
  height: 52px !important;
}

/* ===== LOGIN: CENTRALIZAÇÃO REAL DO TEXTO NO INPUT ===== */
.login-input{
  height: 52px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 52px !important;   /* texto no centro */
  font-size: 14px !important;
}

/* Placeholder também */
.login-input::placeholder{
  line-height: 52px !important;
}

/* =========================================================
   LOGIN RESET TOTAL (mata conflitos do CSS global)
   Cole no FINAL do style.css
   ========================================================= */

.login-page, .login-page *{
  box-sizing: border-box !important;
}

/* remove qualquer opacity global que esteja afetando ícones/inputs */
.login-page .material-icons,
.login-page .login-icon,
.login-page .login-eye,
.login-page .login-eye .material-icons{
  opacity: 1 !important;
  filter: none !important;
}

/* força tipografia consistente */
.login-page{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}

/* inputs: centralização garantida por flex + height */
.login-page .login-input-wrap{
  position: relative !important;
  height: 52px !important;
  display: flex !important;
  align-items: center !important;
}

/* input ocupa a altura inteira e centraliza (sem line-height hack) */
.login-page input.login-input{
  height: 52px !important;
  width: 100% !important;
  padding: 0 52px 0 46px !important;  /* esquerda p/ ícone, direita p/ olho */
  line-height: 52px !important;       /* consistente */
  border-radius: 16px !important;
  vertical-align: middle !important;
  background: var(--login-input) !important;
  color: var(--login-text) !important;
  border: 1px solid var(--login-input-border) !important;
  outline: none !important;
  margin: 0 !important;
}

/* placeholder no meio também */
.login-page input.login-input::placeholder{
  line-height: 52px !important;
  opacity: .75 !important;
}

/* ícone esquerdo travado no centro */
.login-page .login-icon{
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 20px !important;
  color: rgba(100,116,139,.95) !important;
}

/* botão do olho travado no centro */
.login-page button.login-eye{
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  height: 36px !important;
  width: 44px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor: pointer !important;
  opacity: 1 !important;
}
.login-page button.login-eye .material-icons{
  font-size: 20px !important;
  color: rgba(100,116,139,.95) !important;
  opacity: 1 !important;
}

/* labels sempre à esquerda */
.login-page .login-label{
  display:block !important;
  text-align:left !important;
  margin: 0 0 6px 2px !important;
}

/* checkbox alinhado perfeito */
.login-page .login-row{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
}
.login-page .login-remember{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}
.login-page .login-remember input{
  width:16px !important;
  height:16px !important;
  margin:0 !important;
  opacity:1 !important;
}
/* Fundo suave atrás do logo — estilo login */
/* Logo: glass + glow suave (só aqui) */
/* A faixa do topo (área vermelha) */
.sidebar .logo{
  position: relative;
  padding: 14px 12px 18px; /* dá altura pra faixa */
  border-radius: 0;        /* não vira card */
  background: transparent; /* sem bloco sólido */
  box-shadow: none;
  border: 0;
  overflow: visible;
}

/* Fundo suave ocupando a faixa toda atrás do logo */
.sidebar .logo::before{
  content: "";
  position: absolute;
  left: -18px;            /* “passa” um pouco das bordas internas */
  right: -18px;
  top: -18px;
  bottom: -18px;          /* define a altura da faixa */

  border-radius: 18px;    /* canto suave como no login */
  background:
    radial-gradient(140% 120% at 25% 20%,
      rgba(16,185,129,0.14) 0%,
      rgba(16,185,129,0.07) 45%,
      rgba(16,185,129,0.00) 75%
    ),
    linear-gradient(180deg,
      rgba(255,255,255,0.65),
      rgba(255,255,255,0.35)
    );

  /* deixa bem “ar”, nada chapado */
  filter: blur(10px);
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}

/* Conteúdo do logo por cima */
.sidebar .logo img{
  position: relative;
  z-index: 1;
  display: block;
}
/* Últimas cobranças: lista com rolagem */
.home-table .home-list{
  max-height: 410px;      /* ajuste como quiser */
  overflow-y: auto;
  padding-right: 6px;     /* evita cortar conteúdo pela scrollbar */
}

/* Scrollbar mais premium (Chrome/Edge) */
.home-table .home-list::-webkit-scrollbar{
  width: 10px;
}
.home-table .home-list::-webkit-scrollbar-thumb{
  background: rgba(15, 23, 42, 0.12);
  border-radius: 10px;
  border: 3px solid rgba(255,255,255,0.75);
}
.home-table .home-list::-webkit-scrollbar-track{
  background: transparent;
}

/* Firefox */
.home-table .home-list{
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 23, 42, 0.18) transparent;
}
/* ===== Tooltip premium do gráfico (sem JS) ===== */
.chart-bars .bar-col{
  position: relative;
}

/* Tooltip (caixa) */
.chart-bars .bar-col::after{
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(6px);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;

  padding: 8px 10px;
  border-radius: 12px;

  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(15, 23, 42, 0.10);
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.12);

  color: rgba(15, 23, 42, 0.92);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2px;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transition: opacity 140ms cubic-bezier(.2,.8,.2,1),
              transform 140ms cubic-bezier(.2,.8,.2,1);
  z-index: 20;
}

/* Setinha */
.chart-bars .bar-col::before{
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 2px);
  transform: translateX(-50%) translateY(6px) rotate(45deg);
  width: 10px;
  height: 10px;

  background: rgba(255,255,255,0.92);
  border-left: 1px solid rgba(15, 23, 42, 0.10);
  border-top: 1px solid rgba(15, 23, 42, 0.10);

  opacity: 0;
  pointer-events: none;

  transition: opacity 140ms cubic-bezier(.2,.8,.2,1),
              transform 140ms cubic-bezier(.2,.8,.2,1);
  z-index: 19;
}

/* Aparecer no hover e no foco (acessível) */
.chart-bars .bar-col:hover::after,
.chart-bars .bar-col:focus-within::after,
.chart-bars .bar-col:hover::before,
.chart-bars .bar-col:focus-within::before{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* No mobile, evita tooltip “fantasma” no toque */
@media (hover: none){
  .chart-bars .bar-col::after,
  .chart-bars .bar-col::before{
    display: none;
  }
}
/* Tooltip do gráfico não pode ser cortado */
.home-card.home-chart{ overflow: visible; }
.chart-bars{ overflow: visible; }
.home-wrap{ overflow: visible; }
/* ===== Micro animações premium ===== */

/* Cards */
.home-card,
.kpi-card{
  transition:
    transform 160ms cubic-bezier(.2,.8,.2,1),
    box-shadow 160ms cubic-bezier(.2,.8,.2,1);
}

.home-card:hover,
.kpi-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(15,23,42,0.08);
}
.home-btn,
.login-btn,
.pdv-btn-primary{
  transition:
    transform 120ms cubic-bezier(.2,.8,.2,1),
    box-shadow 120ms cubic-bezier(.2,.8,.2,1),
    filter 120ms ease;
}

.home-btn:hover,
.login-btn:hover,
.pdv-btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(16,185,129,0.25);
}

.home-btn:active,
.login-btn:active,
.pdv-btn-primary:active{
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(16,185,129,0.18);
  filter: brightness(0.98);
}
.home-row,
.extrato-row,
table tbody tr{
  transition: background-color 120ms ease;
}

.home-row:hover,
.extrato-row:hover,
table tbody tr:hover{
  background: rgba(15,23,42,0.025);
}
.bar{
  transition:
    height 240ms cubic-bezier(.2,.8,.2,1),
    filter 120ms ease;
}

.bar-on:hover{
  filter: brightness(1.08);
}
/* ===== Loader global (premium) ===== */
.page-loader{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 9999;
}

body.is-loading .page-loader{
  display: flex;
}

.page-loader-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(15,23,42,0.10);
  box-shadow: 0 20px 60px rgba(15,23,42,0.14);
}

.page-loader-spin{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(15,23,42,0.18);
  border-top-color: rgba(16,185,129,0.95);
  animation: spin 700ms linear infinite;
}

.page-loader-text{
  font-weight: 700;
  font-size: 13px;
  color: rgba(15,23,42,0.78);
  letter-spacing: .2px;
}

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

/* ===== Botão Gerar Cobrança (PDV) — premium ===== */
button.pdv-btn.btn-gerar{
  position: relative;
  overflow: hidden;
  transition:
    transform 160ms cubic-bezier(.2,.8,.2,1),
    box-shadow 160ms cubic-bezier(.2,.8,.2,1),
    filter 160ms ease;
  will-change: transform;
}

/* Hover: levanta e ganha sombra */
button.pdv-btn.btn-gerar:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(16,185,129,0.35);
}

/* Clique: “press” */
button.pdv-btn.btn-gerar:active{
  transform: translateY(0);
  box-shadow: 0 8px 18px rgba(16,185,129,0.25);
  filter: brightness(0.97);
}

/* Brilho passando (hover) */
button.pdv-btn.btn-gerar::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,0.35) 50%,
    transparent 100%
  );
  transform: translateX(-120%);
  transition: transform 420ms ease;
  pointer-events: none;
}

button.pdv-btn.btn-gerar:hover::after{
  transform: translateX(120%);
}

/* Ícone dá um “passinho” */
button.pdv-btn.btn-gerar .material-icons{
  transition: transform 160ms ease;
}

button.pdv-btn.btn-gerar:hover .material-icons{
  transform: translateX(2px);
}
/* ===== Notificações laterais (premium) ===== */
.notify-stack{
  position: fixed;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9998;
}

.notify{
  width: 380px; /* antes ~320 */
  max-width: calc(100vw - 36px);
  border-radius: 18px;
  padding: 16px 18px;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(15,23,42,0.12);
  box-shadow: 0 22px 70px rgba(15,23,42,0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  display: flex;
  gap: 14px;
  align-items: center;

  transform: translateY(12px);
  opacity: 0;
  animation: notifyIn 220ms cubic-bezier(.2,.8,.2,1) forwards;
}


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

.notify .ico{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg,
    rgba(16,185,129,0.22),
    rgba(16,185,129,0.08)
  );
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
}

.notify .ico img{
  width: 26px;
  height: 26px;
}


.notify .txt{
  flex: 1;
  min-width: 0;
}

.notify .title{
  font-weight: 800;
  font-size: 14px;
  color: rgba(15,23,42,0.95);
}

.notify .sub{
  margin-top: 4px;
  font-size: 13px;
  color: rgba(15,23,42,0.70);
}

.notify.paid .ico{ background: rgba(16,185,129,0.14); }
.notify.canceled .ico{ background: rgba(239,68,68,0.12); }
.notify.pending .ico{ background: rgba(245,158,11,0.14); }
.notify .title{
  font-weight: 700;
  letter-spacing: .2px;
}

.notify.paid .title{
  color: #065f46; /* verde escuro */
}

.notify.pending .title{
  color: #92400e; /* âmbar elegante */
}

.notify.canceled .title{
  color: #7f1d1d; /* vermelho sóbrio */
}
/* Toast clicável (premium e discreto) */
.toast-clickable { cursor: pointer; }

.toast-clickable:hover{
  filter: brightness(1.06);
}

.toast-clickable:active{
  transform: scale(0.99);
}

/* ===== Modal Detalhes Pix (premium) ===== */
.pixmodal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 9999;
}

.pixmodal{
  width: min(920px, 96vw);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 60px rgba(2,6,23,0.25);
  overflow: hidden;
}

body.dark .pixmodal{
  background: rgba(15, 23, 42, 0.92);
  box-shadow: 0 18px 60px rgba(0,0,0,0.45);
}

.pixmodal-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(15,23,42,0.08);
}

body.dark .pixmodal-head{
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.pixmodal-title{
  font-weight: 800;
  letter-spacing: .2px;
}

.pixmodal-close{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,0.12);
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

body.dark .pixmodal-close{
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.92);
}

.pixmodal-body{ padding: 16px; }

.pixmodal-grid{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
}

@media (max-width: 840px){
  .pixmodal-grid{ grid-template-columns: 1fr; }
}

.pixmodal-label{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .25px;
  opacity: .75;
  margin-bottom: 8px;
}

.pixmodal-qrbox{
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(15,23,42,0.02);
  padding: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 260px;
}

body.dark .pixmodal-qrbox{
  border-color: rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
}

.pixmodal-qrbox img{
  width: 220px;
  height: 220px;
  image-rendering: auto;
}

.pixmodal-empty{
  opacity: .75;
  font-weight: 700;
}

.pixmodal-textarea{
  width: 100%;
  min-height: 180px;
  border-radius: 16px;
  padding: 12px 12px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(15,23,42,0.02);
  resize: none;
  outline: none;
}

body.dark .pixmodal-textarea{
  border-color: rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.92);
}

.pixmodal-actions{
  display:flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.pixmodal-btn{
  border-radius: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(15,23,42,0.12);
  background: #fff;
  cursor: pointer;
  font-weight: 800;
}

body.dark .pixmodal-btn{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.92);
}

.pixmodal-hint{
  margin-top: 10px;
  opacity: .7;
  font-size: 12px;
}

/* botões pequenos na tabela */
.btn-mini{
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,0.12);
  background: #fff;
  font-weight: 800;
  cursor: pointer;
}

.btn-mini-primary:hover{ filter: brightness(1.04); }

.btn-mini-disabled{
  opacity: .45;
  cursor: not-allowed;
}
/* ===== Botões premium do modal ===== */
.pixmodal-btn{
  border-radius: 14px;
  padding: 10px 14px;
  border: 1px solid rgba(15,23,42,0.12);
  background: #fff;
  cursor: pointer;
  font-weight: 800;
  transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease;
}

.pixmodal-btn:active{
  transform: scale(0.99);
}

/* Botão principal (verde) */
.pixmodal-btn-primary{
  border: 1px solid rgba(16,185,129,0.22);
  background: linear-gradient(135deg, rgba(16,185,129,0.95), rgba(16,185,129,0.78));
  color: #fff;
  box-shadow: 0 10px 26px rgba(16,185,129,0.18);
}

.pixmodal-btn-primary:hover{
  filter: brightness(1.03);
}

/* Botão secundário (soft) */
.pixmodal-btn-soft{
  background: rgba(15,23,42,0.03);
}

body.dark .pixmodal-btn{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.92);
}

body.dark .pixmodal-btn-soft{
  background: rgba(255,255,255,0.07);
}

body.dark .pixmodal-btn-primary{
  border-color: rgba(16,185,129,0.25);
  box-shadow: 0 10px 26px rgba(0,0,0,0.30);
}
/* ===== Botões do modal (ajuste final premium) ===== */
.pixmodal-btn{
  border-radius: 14px;
  padding: 11px 16px;
  border: 1px solid rgba(15,23,42,0.14);
  background: #fff;
  cursor: pointer;
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  transition: 
    transform 120ms ease,
    filter 120ms ease,
    box-shadow 120ms ease,
    background-color 120ms ease;
}

.pixmodal-btn:active{
  transform: scale(0.98);
}

/* Botão principal (verde) */
.pixmodal-btn-primary{
  border: 1px solid rgba(16,185,129,0.35);
  background: linear-gradient(
    135deg,
    rgba(16,185,129,0.98),
    rgba(16,185,129,0.82)
  );
  color: #fff;
  box-shadow: 0 10px 28px rgba(16,185,129,0.22);
}

.pixmodal-btn-primary:hover{
  filter: brightness(1.04);
}

/* Botão secundário (Copiar linha) */
.pixmodal-btn-soft{
  background: rgba(15,23,42,0.04);
  border: 1px solid rgba(15,23,42,0.14);
  color: rgba(15,23,42,0.92);
}

.pixmodal-btn-soft:hover{
  background: rgba(15,23,42,0.07);
}

/* Dark mode */
body.dark .pixmodal-btn{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.92);
}

body.dark .pixmodal-btn-soft{
  background: rgba(255,255,255,0.10);
}

body.dark .pixmodal-btn-soft:hover{
  background: rgba(255,255,255,0.14);
}

body.dark .pixmodal-btn-primary{
  border-color: rgba(16,185,129,0.35);
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}
/* ===== Ajuste final do botão "Copiar linha" ===== */

/* garante mesma altura e largura visual */
.pixmodal-actions{
  display: flex;
  gap: 12px;
  align-items: center;
}

.pixmodal-btn{
  min-height: 44px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
}

/* botão secundário (Copiar linha) */
.pixmodal-btn-soft{
  background: rgba(15,23,42,0.05);
  border: 1px solid rgba(15,23,42,0.16);
  color: rgba(15,23,42,0.92);
}

.pixmodal-btn-soft:hover{
  background: rgba(15,23,42,0.08);
}

/* dark mode */
body.dark .pixmodal-btn-soft{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.95);
}

body.dark .pixmodal-btn-soft:hover{
  background: rgba(255,255,255,0.16);
}
/* Modal Pix — espaçamento do bloco do QR */
.pixmodal-qr{
  display: flex;
  flex-direction: column;
}

/* garante “respiro” entre o QR e o botão verde */
.pixmodal-qrbox{
  margin-bottom: 14px;
}

/* botão verde ocupa largura do bloco e fica bem alinhado */
#pixBtnDownloadBoth{
  width: 100%;
}
/* Força o estilo do "Copiar linha" (secundário) */
.pixmodal .pixmodal-actions .pixmodal-btn-soft{
  background: rgba(15,23,42,0.05);
  border: 1px solid rgba(15,23,42,0.16);
  color: rgba(15,23,42,0.92);
}

.pixmodal .pixmodal-actions .pixmodal-btn-soft:hover{
  background: rgba(15,23,42,0.08);
}
body.dark .pixmodal .pixmodal-actions .pixmodal-btn-soft{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.95);
}

body.dark .pixmodal .pixmodal-actions .pixmodal-btn-soft:hover{
  background: rgba(255,255,255,0.16);
}
/* ===============================
   Modal Pix — refinamento FINAL
   =============================== */

/* bloco do QR com respiro */
.pixmodal-qr{
  display: flex;
  flex-direction: column;
}

.pixmodal-qrbox{
  margin-bottom: 16px;
}

/* botão verde ocupa largura e respira */
#pixBtnDownloadBoth{
  width: 100%;
}

/* === FORÇA botão "Copiar linha" === */
.pixmodal .pixmodal-actions #pixBtnCopy{
  min-height: 44px;
  padding: 0 18px;
  border-radius: 14px;

  background: rgba(15,23,42,0.05);
  border: 1px solid rgba(15,23,42,0.16);
  color: rgba(15,23,42,0.92);

  font-weight: 800;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  transition:
    background-color 120ms ease,
    filter 120ms ease,
    transform 120ms ease;
}

.pixmodal .pixmodal-actions #pixBtnCopy:hover{
  background: rgba(15,23,42,0.08);
}

.pixmodal .pixmodal-actions #pixBtnCopy:active{
  transform: scale(0.98);
}

/* Dark mode */
body.dark .pixmodal .pixmodal-actions #pixBtnCopy{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.95);
}

body.dark .pixmodal .pixmodal-actions #pixBtnCopy:hover{
  background: rgba(255,255,255,0.16);
}
/* FIX definitivo: Copiar linha não ficar branco */
.pixmodal .pixmodal-actions #pixBtnCopy{
  background: rgba(15,23,42,0.05) !important;
  border: 1px solid rgba(15,23,42,0.16) !important;
  color: rgba(15,23,42,0.92) !important;
}

.pixmodal .pixmodal-actions #pixBtnCopy:hover{
  background: rgba(15,23,42,0.08) !important;
}

body.dark .pixmodal .pixmodal-actions #pixBtnCopy{
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.18) !important;
  color: rgba(255,255,255,0.95) !important;
}

body.dark .pixmodal .pixmodal-actions #pixBtnCopy:hover{
  background: rgba(255,255,255,0.16) !important;
}
/* Modal Pix — usar botões do PDV com layout bonito */
.pixmodal-qrbox{ margin-bottom: 16px; }

#pixBtnDownloadBoth{
  width: 100%;
}

.pixmodal-actions{
  margin-top: 12px;
}
/* ===== Modal Pix — ajuste final de hierarquia ===== */

/* ações do bloco de código Pix */
.pixmodal-line-actions{
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

/* garante que o botão copiar tenha peso visual correto */
/* Copiar linha deve ficar abaixo do textarea, alinhado à esquerda */
.pixmodal-line-actions{
  display: flex;
  justify-content: flex-start; /* volta pra esquerda */
  margin-top: 12px;
}


/* botão verde continua forte, mas alinhado */
#pixBtnDownloadBoth{
  width: 100%;
  margin-top: 8px;
}
/* Deixar o botão Copiar soft dentro do modal (sem borda pesada) */
.pixmodal-line-actions #pixBtnCopy{
  border: 1px solid rgba(15,23,42,0.14);
  background: rgba(15,23,42,0.04);
  color: rgba(15,23,42,0.92);
  box-shadow: none;
}

.pixmodal-line-actions #pixBtnCopy:hover{
  background: rgba(15,23,42,0.07);
}
body.dark .pixmodal-line-actions #pixBtnCopy{
  border-color: rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.95);
}

body.dark .pixmodal-line-actions #pixBtnCopy:hover{
  background: rgba(255,255,255,0.12);
}
/* ===== Modal Pix — botão copiar definitivo ===== */

.pixmodal-line{
  display: flex;
  flex-direction: column;
}

.pixmodal-line .pix-copy-btn{
  margin-top: 12px;
  align-self: flex-start;

  min-height: 44px;
  padding: 0 18px;
  border-radius: 14px;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  font-weight: 700;
  font-size: 14px;

  background: rgba(15,23,42,0.04);
  border: 1px solid rgba(15,23,42,0.14);
  color: rgba(15,23,42,0.92);

  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease;
}

.pixmodal-line .pix-copy-btn:hover{
  background: rgba(15,23,42,0.07);
}

.pixmodal-line .pix-copy-btn:active{
  transform: scale(0.98);
}

/* Dark mode */
body.dark .pixmodal-line .pix-copy-btn{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.95);
}

body.dark .pixmodal-line .pix-copy-btn:hover{
  background: rgba(255,255,255,0.12);
}
/* Botão primário verde */
.pix-btn-primary{
  min-height: 48px;
  padding: 0 18px;
  width: 100%;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  border-radius: 14px;
  font-weight: 700;
  font-size: 14px;

  background: linear-gradient(
    135deg,
    rgba(16,185,129,0.98),
    rgba(16,185,129,0.82)
  );
  color: #fff;
  border: none;

  box-shadow: 0 10px 28px rgba(16,185,129,0.22);
  cursor: pointer;

  transition: filter 120ms ease, transform 120ms ease;
}

.pix-btn-primary:hover{
  filter: brightness(1.04);
}

.pix-btn-primary:active{
  transform: scale(0.98);
}

/* Dark mode ok */
body.dark .pix-btn-primary{
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}
/* ===== FORÇA Copiar linha igual ao botão verde ===== */
#pixBtnCopy{
  width: 100%;
  min-height: 48px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  border-radius: 14px;
  font-weight: 700;
  font-size: 14px;

  background: linear-gradient(
    135deg,
    rgba(16,185,129,0.98),
    rgba(16,185,129,0.82)
  ) !important;

  color: #fff !important;
  border: none !important;

  box-shadow: 0 10px 28px rgba(16,185,129,0.22) !important;
  cursor: pointer;

  transition: filter 120ms ease, transform 120ms ease;
}

#pixBtnCopy:hover{
  filter: brightness(1.04);
}

#pixBtnCopy:active{
  transform: scale(0.98);
}

/* Dark mode */
body.dark #pixBtnCopy{
  box-shadow: 0 10px 28px rgba(0,0,0,0.35) !important;
}
#pixBtnCopy{
  margin-top: 18px;
}
/* ===== Usuários (polish) ===== */
.content table tbody tr td { vertical-align: middle; }
.content table tbody tr:hover { background: rgba(15,23,42,0.025); }
.btn-mini { display:inline-flex; align-items:center; gap:6px; }
/* ===== Modal (polish premium) ===== */
.modal{
  background: rgba(15,23,42,.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal-content{
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 18px 60px rgba(2,6,23,0.22);
}
/* ===== Usuários: botões de ação padronizados ===== */
.users-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.users-actions .btn-mini {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
}
/* ===== Usuários: ações padronizadas (mesmo tamanho) ===== */
.users-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

/* força tamanhos iguais */
.users-actions .btn-mini{
  min-height: 38px;
  padding: 0 14px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
}

/* ícones alinhados */
.users-actions .btn-mini .material-icons{
  font-size: 18px;
  line-height: 1;
}

/* botão toggle verde padrão GetX */
.btn-user-toggle{
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color:#fff !important;
  border: none !important;
  box-shadow: 0 10px 22px rgba(16,185,129,.25) !important;
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}
.btn-user-toggle:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(16,185,129,.35) !important;
  filter: brightness(1.03);
}
.btn-user-toggle:active{
  transform: translateY(0);
  box-shadow: 0 8px 18px rgba(16,185,129,.18) !important;
}
/* ===== Usuários: ações padronizadas (vence CSS antigo) ===== */
.content td.users-actions{
  display:flex !important;
  gap:10px !important;
  flex-wrap:wrap !important;
  align-items:center !important;
}

/* força tamanho igual para os dois botões */
.content td.users-actions .btn-mini,
.content td.users-actions form .btn-mini{
  min-height: 40px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  white-space: nowrap !important;
}

/* ícones alinhados */
.content td.users-actions .btn-mini .material-icons{
  font-size: 18px !important;
  line-height: 1 !important;
}

/* botão toggle VERDE padrão GetX */
.content td.users-actions .btn-user-toggle{
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color:#fff !important;
  border: none !important;
  box-shadow: 0 10px 22px rgba(16,185,129,.25) !important;
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease !important;
}

.content td.users-actions .btn-user-toggle:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 16px 30px rgba(16,185,129,.35) !important;
  filter: brightness(1.03) !important;
}

.content td.users-actions .btn-user-toggle:active{
  transform: translateY(0) !important;
  box-shadow: 0 8px 18px rgba(16,185,129,.18) !important;
}
/* =========================================================
   USERS UI (premium + consistente)
   ========================================================= */

.users-actions{
  display:flex !important;
  gap:10px !important;
  flex-wrap:wrap !important;
  align-items:center !important;
}

.users-actions .btn-mini,
.users-actions form .btn-mini{
  min-height: 40px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  white-space: nowrap !important;
}

.users-actions .btn-mini .material-icons{
  font-size: 18px !important;
  line-height: 1 !important;
}

.btn-user-toggle{
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color:#fff !important;
  border: none !important;
  box-shadow: 0 10px 22px rgba(16,185,129,.25) !important;
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease !important;
}

.btn-user-toggle:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 16px 30px rgba(16,185,129,.35) !important;
  filter: brightness(1.03) !important;
}

.btn-user-toggle:active{
  transform: translateY(0) !important;
  box-shadow: 0 8px 18px rgba(16,185,129,.18) !important;
}

.users-create-box{
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  padding:14px;
  background: rgba(0,0,0,.02);
}

.users-grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}

@media (max-width: 860px){
  .users-grid-2{ grid-template-columns: 1fr; }
}

.users-select{
  width:100%;
  padding:12px;
  border-radius:8px;
  border:1px solid #ddd;
  background:transparent;
  color: var(--text);
}

.users-create-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:12px;
  flex-wrap:wrap;
}

.users-actions-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.users-check{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  color: var(--muted);
  font-weight:700;
}

.users-check input{
  width:16px;
  height:16px;
  margin:0;
}

.users-inline{ display:inline; }

.users-modal{
  width:min(720px, 96vw);
  text-align:left;
  border-radius:18px;
}

.users-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.users-modal-title{
  font-weight:900;
  font-size:16px;
}

.users-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:14px;
  flex-wrap:wrap;
}

/* ===== Usuários: botão EDITAR verde (blindado) ===== */
.btn-user-edit{
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color:#fff !important;
  border: none !important;
  box-shadow: 0 10px 22px rgba(16,185,129,.18) !important;
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease !important;
}
.btn-user-edit:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 16px 30px rgba(16,185,129,.28) !important;
  filter: brightness(1.03) !important;
}
.btn-user-edit:active{
  transform: translateY(0) !important;
  box-shadow: 0 8px 18px rgba(16,185,129,.16) !important;
}
/* ===== USERS: botões de ação com tamanho 100% igual ===== */

.users-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

/* botão base */
.users-actions .btn-mini{
  height: 44px;                /* ALTURA FIXA */
  padding: 0 18px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  box-sizing: border-box;

  white-space: nowrap;
}

/* ícone alinhado */
.users-actions .btn-mini .material-icons{
  font-size: 18px;
  line-height: 1;
}

/* remove influência do form */
.users-actions form{
  margin: 0;
}

/* força form não interferir */
.users-actions form .btn-mini{
  height: 44px;
}
/* ===== TOAST (Global) ===== */
#toast{
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 999999;
  width: auto;
  max-width: 360px;
  min-width: 260px;

  padding: 14px 16px;
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0,0,0,.22);

  font-weight: 600;
  font-size: 14px;
  line-height: 1.35;

  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;

  transition: opacity .25s ease, transform .25s ease;
}

/* visível */
#toast.show{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* tipos */
#toast.success{ background: #16a34a; color: #fff; }
#toast.error{ background: #dc2626; color: #fff; }
#toast.info{ background: #2563eb; color: #fff; }
#toast.warn{ background: #f59e0b; color: #111; }
/* ===== Extrato: tabela responsiva + alinhamento de valores ===== */
.table-wrap{
  overflow-x: auto;
}

.table-wrap table{
  width: 100%;
  min-width: 980px; /* evita “quebra” feia em janela restaurada */
}

th, td{
  vertical-align: middle;
}

.col-amount{
  text-align: right;
  white-space: nowrap;
}

/* opcional: deixa STATUS e AÇÃO mais consistentes */
.nowrap{ white-space: nowrap; }