@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&display=swap');

/* ============================================
   VARIÁVEIS
   ============================================ */
:root {
  /* Fundos — preto absoluto luxury */
  --bg-deep:      #0A0A0A;
  --bg-base:      #121212;
  --surface-1:    #1A1A1A;
  --surface-2:    #1E1E1E80;
  --surface-2s:   #1E1E1E;
  --surface-3:    #242424;
  --border:       #2A2A2A;
  --border-hover: #3A3A3A;

  /* Textos */
  --text-primary:   #FFFFFF;
  --text-secondary: #B3B3B3;
  --text-muted:     #6B6B6B;

  /* Dourado — identidade premium */
  --purple:        #D4AF37;   /* alias mantido para compatibilidade de classes */
  --purple-dark:   #B8860B;
  --purple-light:  #FFD700;
  --purple-glow:   rgba(212, 175, 55, 0.20);
  --purple-subtle: rgba(212, 175, 55, 0.08);

  /* Dourado explícito */
  --gold:          #D4AF37;
  --gold-bright:   #FFD700;
  --gold-dark:     #B8860B;
  --gold-glow:     rgba(212, 175, 55, 0.20);
  --gold-subtle:   rgba(212, 175, 55, 0.08);

  /* Status */
  --green:         #22C55E;
  --green-subtle:  rgba(34, 197, 94, 0.10);
  --red:           #EF4444;
  --red-subtle:    rgba(239, 68, 68, 0.10);
  --info:          #3B82F6;
  --warning:       #F59E0B;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;

  --shadow-sm: 0 1px 4px rgba(0,0,0,0.6);
  --shadow-md: 0 4px 24px rgba(0,0,0,0.7);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.8);
  --shadow-purple: 0 0 32px rgba(212, 175, 55, 0.22);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --transition: all 0.2s var(--ease);
}

/* ============================================
   RESET
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  background-color: var(--bg-deep);
  background-image:
    radial-gradient(ellipse 70% 40% at 50% -5%, rgba(212, 175, 55, 0.06), transparent),
    radial-gradient(ellipse 50% 30% at 90% 110%, rgba(184, 134, 11, 0.04), transparent);
  color: var(--text-primary);
  min-height: 100vh;
  line-height: 1.6;
  padding: 0 0 60px;
}

/* ============================================
   LAYOUT
   ============================================ */
.app-wrapper {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ============================================
   HEADER
   ============================================ */
@keyframes goldShimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

.app-header {
  padding: 44px 24px 0;
  text-align: center;
  position: relative;
}

.app-header::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--gold-dark) 15%,
    var(--gold-bright) 40%,
    var(--gold) 50%,
    var(--gold-bright) 60%,
    var(--gold-dark) 85%,
    transparent 100%
  );
  z-index: 10000;
  pointer-events: none;
}

/* Remove qualquer h1 genérico que possa sobrar */
h1 {
  font-size: 1.8rem;
  font-weight: 700;
}

.app-brand {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
  user-select: none;
  -webkit-user-select: none;
}

.brand-icon {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  object-fit: contain;
  flex-shrink: 0;
}

.brand-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 700;
  letter-spacing: 0.5px;
  position: relative;
  background: linear-gradient(
    90deg,
    var(--gold-dark) 0%,
    var(--gold-bright) 25%,
    var(--gold) 50%,
    var(--gold-bright) 75%,
    var(--gold-dark) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: goldShimmer 5s linear infinite;
}

.brand-name::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  border-radius: 0;
}

.brand-divider {
  display: block;
  width: 1px;
  height: 28px;
  background: linear-gradient(180deg, transparent, var(--gold-dark), transparent);
  border-radius: 1px;
  flex-shrink: 0;
}

.brand-sub {
  font-size: clamp(0.68rem, 1.2vw, 0.78rem);
  font-weight: 500;
  color: var(--gold-dark);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ============================================
   NAV
   ============================================ */
nav {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 2px;
  padding: 5px;
  margin: 0 auto 28px;
  max-width: 1300px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}

nav button {
  flex: 1;
  padding: 9px 14px;
  font-size: 0.85rem;
  font-weight: 500;
  font-family: inherit;
  border-radius: var(--radius-lg);
  cursor: pointer;
  background: transparent;
  color: var(--text-secondary);
  border: none;
  transition: var(--transition);
  letter-spacing: 0.1px;
  text-align: center;
}

nav button:hover {
  background: var(--surface-2s);
  color: var(--text-primary);
}

nav button.active {
  background: var(--gold);
  color: #0A0A0A;
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.25);
  font-weight: 700;
}

nav button a {
  color: inherit;
  text-decoration: none;
}

/* ============================================
   SEÇÕES
   ============================================ */
section {
  display: none;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 36px;
  box-shadow: var(--shadow-md);
  animation: fadeUp 0.22s var(--ease);
}

section.active {
  display: block;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

section h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
  text-align: left;
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.2px;
}

section h2::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 20px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-dark));
  border-radius: 2px;
  flex-shrink: 0;
}

section h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 28px 0 12px;
}

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 28px 0;
}

/* ============================================
   FORMULÁRIOS
   ============================================ */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
}

.form-group {
  margin-bottom: 4px;
}

label {
  display: block;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

input[type="hidden"],
input[type="file"],
input[type="checkbox"],
input[type="radio"] {
  all: unset;
  display: none !important;
}

input[type="text"],
input[type="number"],
input[type="date"],
input[type="password"],
input[type="email"],
input[type="search"],
textarea,
select {
  width: 100%;
  padding: 11px 14px;
  margin-bottom: 16px;
  font-size: 0.9rem;
  font-family: inherit;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2s);
  color: var(--text-primary);
  transition: var(--transition);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  border-color: var(--gold);
  background: var(--surface-3);
  box-shadow: 0 0 0 3px var(--gold-glow);
}

input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
  font-size: 0.875rem;
}

textarea {
  min-height: 88px;
  line-height: 1.5;
  resize: vertical;
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23D4AF37' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}

select option {
  background: var(--surface-2);
}

input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.6) sepia(1) hue-rotate(10deg) saturate(1.5);
  cursor: pointer;
}

input[type="file"] {
  display: none;
}

/* ============================================
   BOTÕES
   ============================================ */
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 18px;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.2px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  cursor: pointer;
  background: var(--surface-2);
  color: var(--text-secondary);
  transition: var(--transition);
  white-space: nowrap;
}

button:hover {
  background: var(--surface-3);
  color: var(--text-primary);
  border-color: var(--border-hover);
}

button:active {
  transform: scale(0.98);
}

/* Botão primário */
.btn-primary {
  background: var(--gold);
  color: #0A0A0A;
  border-color: var(--gold);
  font-weight: 700;
}
.btn-primary:hover {
  background: var(--gold-bright);
  border-color: var(--gold-dark);
  box-shadow: 0 0 24px rgba(212, 175, 55, 0.30);
  color: #0A0A0A;
}

/* Botão de perigo */
.btn-danger {
  background: var(--red-subtle);
  color: var(--red);
  border-color: rgba(239, 68, 68, 0.25);
}
.btn-danger:hover {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}

/* Botão ghost */
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
}
.btn-ghost:hover {
  background: var(--surface-2);
  color: var(--text-primary);
}

#btnSalvarCrediario {
  background: var(--gold);
  color: #0A0A0A;
  border-color: var(--gold);
  font-weight: 700;
}
#btnSalvarCrediario:hover {
  background: var(--gold-bright);
  border-color: var(--gold-dark);
  box-shadow: 0 0 24px rgba(212, 175, 55, 0.30);
  color: #0A0A0A;
}

/* ============================================
   DESCRIÇÃO DE SEÇÃO
   ============================================ */
.section-desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 24px;
  padding: 14px 18px;
  background: var(--surface-2s);
  border-left: 3px solid var(--purple);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ============================================
   FORM CARD
   ============================================ */
.form-card {
  background: var(--surface-2s);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px 28px 10px;
  margin-bottom: 32px;
}

.form-group--action {
  display: flex;
  align-items: flex-end;
  padding-bottom: 14px;
}

.btn-full {
  width: 100%;
}

.input-hint {
  display: block;
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: -12px;
  margin-bottom: 16px;
  line-height: 1.4;
}

/* ============================================
   BUSCA DE ESTOQUE
   ============================================ */
.estoque-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.estoque-header h3 {
  margin: 0;
}

.busca-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-2s);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 12px;
  transition: var(--transition);
  flex: 1;
  max-width: 320px;
}

.busca-wrapper:focus-within {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px var(--purple-glow);
}

.busca-icon {
  font-size: 0.85rem;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.busca-input {
  flex: 1 !important;
  border: none !important;
  background: transparent !important;
  padding: 9px 4px !important;
  font-size: 0.875rem !important;
  color: var(--text-primary) !important;
  outline: none !important;
  margin: 0 !important;
  margin-bottom: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  box-shadow: none !important;
}

.busca-input::placeholder {
  color: var(--text-muted);
}

.busca-input:focus {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.busca-contador {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Badge de estoque baixo */
.badge-estoque-baixo {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-xl);
  background: var(--red-subtle);
  color: var(--red);
  border: 1px solid rgba(239, 68, 68, 0.25);
  letter-spacing: 0.3px;
  margin-left: 6px;
  vertical-align: middle;
}

/* Linha de estoque zero */
tr.estoque-zerado td {
  color: var(--text-muted);
}

/* ============================================
   TABELAS
   ============================================ */
.table-wrapper {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  margin-top: 12px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  color: var(--text-primary);
}

th {
  padding: 11px 14px;
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  background: var(--surface-2s);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

tr:last-child td {
  border-bottom: none;
}

tbody tr:hover {
  background: var(--purple-subtle);
}

td input[type="date"] {
  margin-bottom: 0;
  padding: 6px 10px;
  font-size: 0.8rem;
}

td select {
  margin-bottom: 0;
  padding: 6px 32px 6px 10px;
  font-size: 0.8rem;
}

td button {
  padding: 5px 11px;
  font-size: 0.78rem;
  margin: 2px 2px 2px 0;
}

td small {
  color: var(--text-muted);
  font-size: 0.75rem;
}

/* ============================================
   CARDS DE CREDIÁRIO
   ============================================ */
.crediario-card {
  background: var(--surface-2s);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  margin: 12px 0;
  transition: var(--transition);
}

.crediario-card:hover {
  border-color: var(--border-hover);
}

.crediario-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px 20px;
  margin-bottom: 16px;
}

.crediario-card p {
  font-size: 0.875rem;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.6;
}

.crediario-card strong {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 3px;
}

.card-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-xl);
  background: var(--purple-subtle);
  color: var(--purple-light);
  border: 1px solid rgba(212, 175, 55, 0.20);
}

.card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* ============================================
   PRODUTO SEARCH DROPDOWN
   ============================================ */
.produto-search-group {
  position: relative;
}

.produto-search-wrapper {
  position: relative;
}

.produto-search-input {
  margin-bottom: 0 !important;
  padding-right: 36px !important;
}

.produto-search-input.tem-selecao {
  border-color: var(--purple);
  background: var(--surface-3);
}

.produto-selecionado-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 10px 14px;
  background: var(--purple-subtle);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}

.produto-selecionado-nome {
  font-weight: 600;
  color: var(--text-primary);
}

.produto-selecionado-preco {
  font-weight: 700;
  color: var(--gold);
  margin-left: auto;
  white-space: nowrap;
}

.produto-selecionado-marca {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.produto-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--surface-3);
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  overflow: hidden;
  max-height: 320px;
  overflow-y: auto;
}

.produto-dropdown::-webkit-scrollbar {
  width: 4px;
}
.produto-dropdown::-webkit-scrollbar-track { background: transparent; }
.produto-dropdown::-webkit-scrollbar-thumb {
  background: var(--border-hover);
  border-radius: 2px;
}

.produto-dropdown-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s ease;
}

.produto-dropdown-item:last-child {
  border-bottom: none;
}

.produto-dropdown-item:hover,
.produto-dropdown-item.ativo {
  background: var(--purple-subtle);
}

.produto-dropdown-nome {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  grid-column: 1;
  grid-row: 1;
}

.produto-dropdown-meta {
  font-size: 0.75rem;
  color: var(--text-secondary);
  grid-column: 1;
  grid-row: 2;
}

.produto-dropdown-preco {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold);
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  text-align: right;
}

.produto-dropdown-estoque {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: var(--radius-xl);
  margin-left: 6px;
  vertical-align: middle;
}

.produto-dropdown-estoque.ok {
  background: var(--green-subtle);
  color: var(--green);
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.produto-dropdown-estoque.baixo {
  background: var(--red-subtle);
  color: var(--red);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.produto-dropdown-vazio {
  padding: 24px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.875rem;
}

/* ============================================
   LAYOUT DE VENDA (form + carrinho lado a lado)
   ============================================ */
.venda-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.venda-form {
  display: flex;
  flex-direction: column;
}

/* ============================================
   CARRINHO PANEL
   ============================================ */
.carrinho-panel {
  background: var(--surface-2s);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  min-height: 380px;
}

.carrinho-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.carrinho-panel-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}

.carrinho-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-xl);
  background: var(--purple-subtle);
  color: var(--purple-light);
  border: 1px solid rgba(212, 175, 55, 0.22);
}

.carrinho-lista {
  flex: 1;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  max-height: 320px;
}

.carrinho-vazio {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 48px 20px;
  color: var(--text-muted);
}

.carrinho-vazio-icon {
  font-size: 2rem;
  opacity: 0.35;
}

.carrinho-vazio p {
  font-size: 0.875rem;
  margin: 0;
}

/* Item do carrinho */
.carrinho-item {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
}

.carrinho-item-nome {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  grid-column: 1;
  grid-row: 1;
}

.carrinho-item-detalhe {
  font-size: 0.78rem;
  color: var(--text-secondary);
  grid-column: 1;
  grid-row: 2;
}

.carrinho-item-subtotal {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--purple-light);
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  text-align: right;
  white-space: nowrap;
}

.carrinho-item-remover {
  grid-column: 1 / -1;
  grid-row: 3;
  justify-self: start;
  margin-top: 6px;
  padding: 4px 10px;
  font-size: 0.75rem;
}

/* Footer do carrinho */
.carrinho-footer {
  border-top: 1px solid var(--border);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.carrinho-footer-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.carrinho-footer-total span:first-child {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.carrinho-footer-valor {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--green);
  letter-spacing: -0.5px;
}

.btn-finalizar {
  width: 100%;
  padding: 13px;
  font-size: 0.95rem;
  font-weight: 700;
  background: var(--gold);
  color: #0A0A0A;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
  letter-spacing: 0.4px;
}

.btn-finalizar:hover {
  background: var(--gold-bright);
  color: #0A0A0A;
  box-shadow: 0 0 28px rgba(212, 175, 55, 0.35);
}

@media (max-width: 860px) {
  .venda-layout { grid-template-columns: 1fr; }
  .carrinho-panel { min-height: auto; }
}

/* ============================================
   NUVEM
   ============================================ */
.sync-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--green-subtle);
  border: 1px solid rgba(0, 214, 143, 0.2);
  border-radius: var(--radius-md);
  margin-bottom: 20px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--green);
}

.sync-card::before {
  content: '✓';
  font-size: 1.1rem;
  font-weight: 700;
}

#ultimaDataBackup {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 24px;
}

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

/* ============================================
   PAINEL — KPI CARDS
   ============================================ */
.painel-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

.kpi-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  background: var(--surface-2s);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  border-radius: 0;
}

.kpi-verde::before  { background: var(--green); }
.kpi-roxo::before   { background: var(--purple); }
.kpi-azul::before   { background: #3B82F6; }
.kpi-laranja::before { background: #F59E0B; }

.kpi-card:hover { border-color: var(--border-hover); }

.kpi-icon {
  font-size: 1rem;
  font-weight: 800;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: -0.5px;
}

.kpi-icon svg { width: 22px; height: 22px; }

.kpi-verde  .kpi-icon { background: rgba(34,197,94,0.12);  color: var(--green); }
.kpi-roxo   .kpi-icon { background: var(--purple-subtle);  color: var(--purple-light); }
.kpi-azul   .kpi-icon { background: rgba(59,130,246,0.12); color: #3B82F6; }
.kpi-laranja .kpi-icon { background: rgba(245,158,11,0.12); color: #F59E0B; }

.kpi-body { min-width: 0; }

.kpi-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 4px;
}

.kpi-valor {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================
   PAINEL — FILTROS
   ============================================ */
.painel-filtros {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  padding: 18px 20px;
  background: var(--surface-2s);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 20px;
}

.filtro-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 140px;
  flex: 1;
  max-width: 220px;
}

.filtro-group label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
}

.filtro-group input[type="date"],
.filtro-group select {
  margin-bottom: 0;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.85rem;
  padding: 9px 12px;
  width: 100%;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s;
  cursor: pointer;
  font-family: inherit;
}

.filtro-group input[type="date"]:focus,
.filtro-group select:focus {
  border-color: var(--gold-dark);
  box-shadow: 0 0 0 3px var(--gold-subtle);
}

.filtro-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23B8860B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
}

.filtro-group select option {
  background: var(--surface-1);
  color: var(--text-primary);
}

.filtro-group input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7) sepia(1) saturate(2) hue-rotate(5deg);
  cursor: pointer;
  opacity: 0.7;
}

.filtro-actions {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* ============================================
   PAINEL — TOTAIS POR FORMA
   ============================================ */
#totaisPorForma {
  margin-bottom: 20px;
}

#totaisPorForma ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
}

#totaisPorForma li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 500;
  border: 1px solid var(--border);
}

.forma-badge-dinheiro   { background: rgba(34,197,94,0.10); color: var(--green);  border-color: rgba(34,197,94,0.25) !important; }
.forma-badge-pix        { background: rgba(59,130,246,0.10); color: #3B82F6; border-color: rgba(59,130,246,0.25) !important; }
.forma-badge-debito     { background: var(--purple-subtle);  color: var(--purple-light); border-color: rgba(212,175,55,0.22) !important; }
.forma-badge-credito    { background: rgba(245,158,11,0.10); color: #F59E0B; border-color: rgba(245,158,11,0.25) !important; }
.forma-badge-crediario  { background: rgba(239,68,68,0.10); color: var(--red);  border-color: rgba(239,68,68,0.25) !important; }
.forma-badge-outro      { background: var(--surface-2s);     color: var(--text-secondary); }

.forma-badge-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.forma-badge-valor {
  font-weight: 700;
  margin-left: 4px;
}

/* ============================================
   PAINEL — BADGE DE PAGAMENTO NA TABELA
   ============================================ */
.badge-pagamento {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-xl);
  white-space: nowrap;
}

.badge-pagamento.dinheiro  { background: rgba(34,197,94,0.12); color: var(--green); }
.badge-pagamento.pix       { background: rgba(59,130,246,0.12); color: #3B82F6; }
.badge-pagamento.debito    { background: var(--purple-subtle);  color: var(--purple-light); }
.badge-pagamento.credito   { background: rgba(245,158,11,0.12); color: #F59E0B; }
.badge-pagamento.crediario { background: rgba(239,68,68,0.12); color: var(--red); }

/* ============================================
   PAINEL — GRÁFICO
   ============================================ */
.painel-grafico {
  background: var(--surface-2s);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px;
  margin-top: 24px;
}

.painel-grafico-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.painel-grafico-topo h3 {
  margin: 0;
  font-size: 0.95rem;
}

.grafico-controls {
  display: flex;
  gap: 4px;
  background: var(--surface-3);
  padding: 4px;
  border-radius: var(--radius-sm);
}

.grafico-btn {
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
}

.grafico-btn:hover { color: var(--text-primary); background: transparent; }
.grafico-btn.ativo { background: var(--surface-1); color: var(--text-primary); box-shadow: var(--shadow-sm); }

canvas {
  border-radius: var(--radius-sm);
  max-height: 280px;
}

/* Responsivo */
@media (max-width: 900px) {
  .painel-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .painel-kpis { grid-template-columns: 1fr 1fr; }
  .kpi-valor { font-size: 1.1rem; }
  .painel-filtros { flex-direction: column; }
  .filtro-group { max-width: 100%; }
}

/* ── Histórico: coluna de ações ────────────────────────────── */
.hist-acoes {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.hist-acoes-select {
  padding: 4px 28px 4px 8px;
  font-size: 0.75rem;
  margin-bottom: 0;
}

.hist-acoes-btn {
  padding: 4px 10px;
  font-size: 0.75rem;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .hist-acoes {
    flex-direction: column;
    gap: 5px;
    align-items: stretch;
  }

  .hist-acoes-select {
    width: 100%;
    font-size: 0.8rem;
    padding: 7px 8px;
  }

  .hist-acoes-btn {
    width: 100%;
    padding: 8px 6px;
    font-size: 0.8rem;
    text-align: center;
  }
}

/* ============================================
   CALCULADORA
   ============================================ */
#calculadora {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px;
  margin-top: 8px;
}

#resultado {
  margin-top: 16px;
  padding: 14px 18px;
  background: var(--surface-3);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  color: var(--text-secondary);
}

#resultado h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--green);
  margin: 0 0 8px;
}

#resultado ul {
  padding-left: 0;
  list-style: none;
}

#resultado li {
  padding: 3px 0;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

/* ============================================
   CHANGELOG
   ============================================ */
.changelog-container {
  max-width: 820px;
  margin: 48px auto 0;
  padding: 0 24px 48px;
}

.changelog-container > h1 {
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
  color: var(--text-primary);
  margin-bottom: 32px;
  -webkit-text-fill-color: var(--text-primary);
  background: none;
}

.changelog-container > h1::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background: var(--purple);
  border-radius: 2px;
  margin: 10px auto 0;
}

.changelog-entry {
  position: relative;
  margin-bottom: 16px;
  padding: 22px 24px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-left: 3px solid var(--purple);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  transition: var(--transition);
}

.changelog-entry:hover {
  border-color: var(--border-hover);
  border-left-color: var(--purple-light);
}

.changelog-entry h3 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--purple-light);
  margin-bottom: 4px;
}

.changelog-entry .changelog-date {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin: 6px 0 0;
}

.changelog-entry .changelog-header {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-top: 16px !important;
  margin-bottom: 0;
}

.changelog-entry .update-list {
  list-style: none;
  padding: 0;
  margin-top: 8px;
}

.changelog-entry .update-list li {
  position: relative;
  padding: 4px 0 4px 14px;
  font-size: 0.875rem;
  color: var(--text-primary);
  line-height: 1.55;
}

.changelog-entry .update-list li::before {
  content: '›';
  position: absolute;
  left: 0;
  color: var(--purple);
  font-weight: 700;
}

/* ============================================
   MODAL DE SENHA
   ============================================ */
.senha-modal-inner {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg), var(--shadow-purple) !important;
  padding: 36px 32px !important;
  text-align: center;
  width: 90%;
  max-width: 320px;
}

.senha-modal-inner h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 20px;
}

.senha-modal-inner input {
  margin-bottom: 16px;
}

.senha-modal-inner .modal-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* ============================================
   INDICADOR DE SYNC
   ============================================ */
.sync-status {
  position: fixed;
  top: 16px;
  right: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  padding: 6px 14px;
  border-radius: var(--radius-xl);
  z-index: 9999;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s var(--ease);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-secondary);
  opacity: 0;
  transform: translateY(-4px);
}

.sync-status.sync-saving {
  opacity: 1;
  transform: translateY(0);
  color: var(--purple-light);
  border-color: var(--purple);
  background: var(--purple-subtle);
}

.sync-status.sync-success {
  opacity: 1;
  transform: translateY(0);
  color: var(--green);
  border-color: rgba(0, 214, 143, 0.35);
  background: var(--green-subtle);
}

.sync-status.sync-error {
  opacity: 1;
  transform: translateY(0);
  color: var(--red);
  border-color: rgba(239, 68, 68, 0.35);
  background: var(--red-subtle);
}

.sync-status.sync-info {
  opacity: 1;
  transform: translateY(0);
  color: var(--text-secondary);
}

/* No mobile, os estados ativos devem preservar o translateX(-50%) */
@media (max-width: 768px) {
  .sync-status.sync-saving,
  .sync-status.sync-success,
  .sync-status.sync-error,
  .sync-status.sync-info {
    transform: translateX(-50%) translateY(0);
  }
}

/* ============================================
   RESPONSIVO
   ============================================ */
@media (max-width: 768px) {
  body { padding-bottom: 40px; }
  section { padding: 24px 20px; }

  .form-grid { grid-template-columns: 1fr; gap: 0; }

  .filtro-row { flex-direction: column; align-items: stretch; }
  .filtro-row input[type="date"] { max-width: 100%; }

  .totais-header { flex-direction: column; align-items: flex-start; }
  .manual-actions { flex-direction: column; }

  .changelog-container { padding: 0 12px 40px; }
}

@media (max-width: 520px) {
  .app-wrapper { padding: 0 14px; }

  nav {
    gap: 3px;
    padding: 4px;
    border-radius: var(--radius-lg);
  }
  nav button {
    padding: 8px 12px;
    font-size: 0.78rem;
    flex: 1 1 calc(50% - 6px);
  }

  .card-actions { gap: 6px; }
  .card-actions button { flex: 1 1 auto; font-size: 0.78rem; }

  .carrinho-item { flex-direction: column; align-items: flex-start; gap: 8px; }

}

/* ============================================
   DASHBOARD EXECUTIVO
   ============================================ */

.dash-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
}

.dash-header-row h2 {
  border: none;
  padding: 0;
  margin: 0;
}

.dash-subtitle {
  font-size: 0.78rem;
  color: var(--text-muted);
  display: block;
  margin-top: 2px;
}

.dash-alertas-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(239,68,68,0.07);
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
  font-size: 0.82rem;
  color: var(--red);
}

.dash-banner-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(239,68,68,0.12);
  padding: 5px 12px;
  border-radius: var(--radius-xl);
  border: 1.5px solid rgba(239,68,68,0.35);
  font-weight: 600;
  white-space: nowrap;
}

.dash-banner-icon {
  flex: none;
  color: var(--red);
}

.dash-banner-close {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  opacity: 0.6;
  color: var(--red);
  transition: opacity 0.15s;
}

.dash-banner-close:hover {
  opacity: 1;
}

.dash-module-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  margin: 24px 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dash-module-label::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 11px;
  background: var(--purple);
  border-radius: 2px;
  flex-shrink: 0;
}

.kpi-periodo-data {
  font-size: 0.6rem;
  font-weight: 600;
  color: rgba(255,255,255,0.35);
  margin-left: 6px;
  letter-spacing: 0.3px;
  text-transform: none;
}

.dash-module-badge {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  background: rgba(255,255,255,0.07);
  color: var(--text-muted);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 2px 8px;
  border-radius: 20px;
}

.dash-ia-badge {
  font-size: 0.6rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold-bright));
  color: #0A0A0A;
  padding: 2px 7px;
  border-radius: var(--radius-xl);
  letter-spacing: 0.5px;
}

/* KPI Row */
.dash-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}

.dash-kpi-card {
  background: var(--surface-2s);
  border: 1px solid transparent;
  border-top: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.dash-kpi-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 2px;
  border-radius: 0;
}

.dash-kpi-card.kpi-verde::after  { background: var(--green); }
.dash-kpi-card.kpi-roxo::after   { background: var(--purple); }
.dash-kpi-card.kpi-azul::after   { background: #3B82F6; }
.dash-kpi-card.kpi-laranja::after { background: #F59E0B; }

.dash-kpi-card:hover { border-top-color: var(--border-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }

.dash-kpi-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
}
.dash-kpi-head .dash-kpi-label { margin-bottom: 0; }

.dash-kpi-ico {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dash-kpi-ico svg { width: 17px; height: 17px; }

.dash-kpi-card.kpi-verde   .dash-kpi-ico { background: rgba(34,197,94,0.12);  color: var(--green); }
.dash-kpi-card.kpi-azul    .dash-kpi-ico { background: rgba(59,130,246,0.12); color: #3B82F6; }
.dash-kpi-card.kpi-roxo    .dash-kpi-ico { background: var(--purple-subtle);  color: var(--purple-light); }
.dash-kpi-card.kpi-laranja .dash-kpi-ico { background: rgba(245,158,11,0.12); color: #F59E0B; }

.dash-kpi-label {
  font-size: 0.67rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 5px;
}

.dash-kpi-val {
  font-size: clamp(1rem, 1.8vw, 1.4rem);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.5px;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-kpi-val.positivo { color: var(--green); }
.dash-kpi-val.negativo { color: var(--red); }

.dash-kpi-val.kpi-lucro-split {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: nowrap;
}

.kpi-lucro-base {
  color: var(--text-muted);
  font-size: 0.85em;
  font-weight: 600;
}

.kpi-lucro-sep {
  color: var(--text-muted);
  font-size: 0.75em;
  opacity: 0.5;
}

.kpi-lucro-liq {
  font-weight: 800;
}

.kpi-lucro-liq.positivo { color: var(--green); }
.kpi-lucro-liq.negativo { color: var(--red); }

.dash-kpi-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* KPI Operacional com ícone */
.dash-kpi-op-card {
  background: var(--surface-2s);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  min-width: 0;
}

.dash-kpi-op-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 2px;
  border-radius: 0;
}

.dash-kpi-op-card.kpi-verde::after  { background: var(--green); }
.dash-kpi-op-card.kpi-azul::after   { background: #3B82F6; }
.dash-kpi-op-card.kpi-roxo::after   { background: var(--purple); }
.dash-kpi-op-card.kpi-laranja::after { background: #F59E0B; }

.dash-kpi-op-card:hover { border-color: var(--border-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }

.dash-kpi-op-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dash-kpi-op-icon.kpi-verde  { background: rgba(34,197,94,0.12);  color: var(--green); }
.dash-kpi-op-icon.kpi-azul   { background: rgba(59,130,246,0.12); color: #3B82F6; }
.dash-kpi-op-icon.kpi-roxo   { background: rgba(212,175,55,0.12); color: var(--gold); }
.dash-kpi-op-icon.kpi-laranja { background: rgba(245,158,11,0.12); color: #F59E0B; }

.dash-kpi-op-body {
  flex: 1;
  min-width: 0;
}

.dash-kpi-op-val {
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.5px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-kpi-op-label {
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Metas */
.dash-metas-panel {
  background: var(--surface-2s);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  margin-bottom: 10px;
}

.dash-module-label-inner {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dash-meta-edit-btn {
  font-size: 0.72rem;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
}

.dash-metas-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 32px;
}

.dash-meta-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.dash-meta-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.dash-meta-sublabel {
  font-size: 0.6rem;
  font-weight: 500;
  color: var(--gold-dark);
  background: var(--gold-subtle);
  border: 1px solid rgba(212,175,55,0.2);
  border-radius: 4px;
  padding: 1px 5px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.dash-meta-pct {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-xl);
}

.meta-atingida { background: rgba(34,197,94,0.14); color: var(--green); }
.meta-ok       { background: rgba(59,130,246,0.14); color: #3B82F6; }
.meta-alerta   { background: rgba(245,158,11,0.14); color: #F59E0B; }
.meta-critica  { background: rgba(239,68,68,0.14); color: var(--red); }

.dash-meta-bar-bg {
  height: 5px;
  background: var(--surface-3);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 5px;
}

.dash-meta-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s var(--ease);
}
.dash-meta-bar-fill.meta-atingida { background: var(--green); }
.dash-meta-bar-fill.meta-ok       { background: #3B82F6; }
.dash-meta-bar-fill.meta-alerta   { background: #F59E0B; }
.dash-meta-bar-fill.meta-critica  { background: var(--red); }

.dash-meta-footer {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* Charts */
.dash-charts-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 14px;
  margin-bottom: 14px;
}

.dash-chart-panel {
  background: var(--surface-2s);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
}

.dash-chart-full {
  margin-bottom: 14px;
}

.dash-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-primary);
  flex-wrap: wrap;
  gap: 8px;
}

.dash-donut-legenda {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.dash-legenda-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.dash-legenda-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dash-legenda-val {
  font-weight: 700;
  color: var(--text-primary);
}

/* Estoque Indicadores */
.dash-estoque-indicadores {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}

.dash-indicator {
  background: var(--surface-2s);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.dash-indicator.ind-critico { border-color: rgba(239,68,68,0.4); background: rgba(239,68,68,0.05); }
.dash-indicator.ind-alerta  { border-color: rgba(245,158,11,0.4); background: rgba(245,158,11,0.05); }
.dash-indicator.ind-ok      { border-color: rgba(34,197,94,0.25); }

.ind-val {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}
.ind-critico .ind-val { color: var(--red); }
.ind-alerta .ind-val  { color: #F59E0B; }
.ind-ok .ind-val      { color: var(--green); }

.ind-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  text-align: center;
}

/* Alertas box */
.dash-alertas-box {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 14px;
}

.dash-alerta-item {
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  line-height: 1.55;
}

.alerta-amarelo  { background: rgba(212,175,55,0.06);  border: 1px solid rgba(212,175,55,0.2);   color: var(--gold-bright); }
.alerta-laranja  { background: rgba(245,158,11,0.07); border: 1px solid rgba(245,158,11,0.25); color: #F59E0B; }
.alerta-vermelho { background: var(--red-subtle);     border: 1px solid rgba(239,68,68,0.25); color: var(--red); }

/* Rankings */
.dash-rankings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.dash-ranking-panel {
  background: var(--surface-2s);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
}

.dash-rank-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.dash-rank-item:last-child { border-bottom: none; }

.dash-rank-pos {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--surface-3);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.68rem; font-weight: 700;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.dash-rank-info {
  flex: 1;
  min-width: 0;
}

.dash-rank-nome {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-rank-bar-bg {
  height: 3px;
  background: var(--surface-3);
  border-radius: 2px;
  margin-top: 4px;
  overflow: hidden;
}

.dash-rank-bar {
  height: 100%;
  background: var(--purple);
  border-radius: 2px;
  transition: width 0.5s var(--ease);
}

.dash-rank-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}

.dash-rank-val {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
}

.dash-rank-qtd {
  font-size: 0.68rem;
  color: var(--text-muted);
}

.dash-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.82rem;
  padding: 20px;
}

/* Comparativos */
.dash-comparativos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.dash-comp-card {
  background: var(--surface-2s);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}

.dash-comp-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.dash-comp-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.dash-comp-sub {
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-bottom: 3px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.dash-comp-metric {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
}

.comp-arrow { font-size: 0.88rem; font-weight: 700; }
.comp-val { font-size: 0.75rem; font-weight: 600; color: var(--text-primary); }
.comp-pct { font-size: 0.68rem; font-weight: 700; padding: 1px 5px; border-radius: var(--radius-xl); }

.comp-up .comp-arrow   { color: var(--green); }
.comp-up .comp-pct     { background: rgba(34,197,94,0.12); color: var(--green); }
.comp-down .comp-arrow { color: var(--red); }
.comp-down .comp-pct   { background: rgba(239,68,68,0.12); color: var(--red); }

/* Previsões */
.dash-prev-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}

.dash-prev-card {
  background: var(--surface-2s);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px;
  text-align: center;
  transition: var(--transition);
}

.dash-prev-card:hover { border-color: var(--gold); box-shadow: 0 0 20px rgba(212,175,55,0.18); }

.dash-prev-icon { font-size: 1.4rem; margin-bottom: 6px; }
.dash-prev-label { font-size: 0.68rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.dash-prev-val { font-size: 1.2rem; font-weight: 800; color: var(--gold); letter-spacing: -0.3px; }
.dash-prev-sub { font-size: 0.68rem; color: var(--text-muted); margin-top: 3px; }

/* Rupturas */
.dash-rupturas {
  background: var(--surface-2s);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.dash-ruptura-item {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 6px 14px;
  align-items: center;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  font-size: 0.8rem;
}

.ruptura-critica { border-color: rgba(239,68,68,0.35); background: rgba(239,68,68,0.05); }
.ruptura-alerta  { border-color: rgba(245,158,11,0.35); background: rgba(245,158,11,0.05); }
.ruptura-ok      { border-color: rgba(34,197,94,0.25);  background: rgba(34,197,94,0.03); }

.ruptura-nome    { font-weight: 600; color: var(--text-primary); }
.ruptura-dias    { font-weight: 700; white-space: nowrap; }
.ruptura-critica .ruptura-dias { color: var(--red); }
.ruptura-alerta  .ruptura-dias { color: #F59E0B; }
.ruptura-ok      .ruptura-dias { color: var(--green); }
.ruptura-info    { color: var(--text-muted); white-space: nowrap; font-size: 0.72rem; }
.ruptura-sugestao { color: var(--purple-light); font-size: 0.72rem; white-space: nowrap; }

/* Dashboard full-width (fora do .app-wrapper) */
#dashboard {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 28px 40px 40px;
  margin-top: 0;
  width: 100%;
  box-sizing: border-box;
}

.dash-inner {
  max-width: 1600px;
  margin: 0 auto;
}

/* Dashboard Responsive */
@media (max-width: 1100px) {
  .dash-kpi-row { grid-template-columns: repeat(2, 1fr); }
  .dash-charts-grid { grid-template-columns: 1fr; }
  .dash-comparativos-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .dash-rankings-grid { grid-template-columns: 1fr; }
  .dash-estoque-indicadores { grid-template-columns: repeat(2, 1fr); }
  .dash-metas-grid { grid-template-columns: 1fr; }
  .dash-prev-grid { grid-template-columns: 1fr; }
  .dash-ruptura-item { grid-template-columns: 1fr auto; }
  .ruptura-info, .ruptura-sugestao { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .dash-kpi-row { grid-template-columns: 1fr 1fr; }
  .dash-comparativos-grid { grid-template-columns: 1fr; }
  .dash-kpi-val { font-size: 1rem; }
}

/* ============================================
   GESTÃO DE ESTOQUE — PREMIUM
   ============================================ */

.est-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}

.est-status-row {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.est-status-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 12px 16px;
  background: var(--surface-2s);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition);
  flex: 1;
  min-width: 90px;
  text-align: center;
}
.est-status-item:hover { border-color: var(--border-hover); transform: translateY(-1px); }

.est-status-val { font-size: 1.6rem; font-weight: 800; line-height: 1; }
.est-status-lbl { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); }

.est-status-normal  { border-color: rgba(34,197,94,0.2); } .est-status-normal  .est-status-val { color: var(--green); }
.est-status-baixo   { border-color: rgba(212,175,55,0.2); } .est-status-baixo   .est-status-val { color: var(--gold-bright); }
.est-status-critico { border-color: rgba(245,158,11,0.2); } .est-status-critico .est-status-val { color: #F59E0B; }
.est-status-falta   { border-color: rgba(239,68,68,0.2); } .est-status-falta   .est-status-val { color: var(--red); }
.est-status-parado  .est-status-val { color: var(--text-secondary); }
/* 90d: capital realmente encalhado — mais grave que o de 30d */
.est-status-parado90 { border-color: rgba(139,92,246,0.22); }
.est-status-parado90 .est-status-val { color: #A78BFA; }

/* Alertas */
.est-alertas-container {
  background: var(--surface-2s);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 14px;
  overflow: hidden;
}
.est-alertas-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; font-size: 0.8rem; font-weight: 700; color: var(--text-primary);
  border-bottom: 1px solid var(--border);
}
.est-alertas-count {
  background: var(--red-subtle); color: var(--red);
  font-size: 0.68rem; font-weight: 700; padding: 2px 8px;
  border-radius: var(--radius-xl); border: 1px solid rgba(239,68,68,0.25);
}
.est-alertas-list { display: flex; flex-direction: column; }
.est-alerta-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 16px; font-size: 0.8rem; line-height: 1.5;
  border-bottom: 1px solid var(--border); color: var(--text-secondary);
}
.est-alerta-row:last-child { border-bottom: none; }
.est-alerta-icon { flex-shrink: 0; }
.est-alerta-critico { color: var(--red); }
.est-alerta-alerta  { color: #F59E0B; }
.est-alerta-aviso   { color: #3B82F6; }
.est-alerta-margem  { color: var(--text-secondary); }

/* Controls */
.est-controles { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.est-filtro-select { width: auto !important; margin-bottom: 0 !important; padding: 9px 32px 9px 12px !important; font-size: 0.8rem !important; }

/* Table cells */
.est-prod-cell { display: flex; align-items: center; gap: 10px; }
.est-prod-inicial {
  width: 32px; height: 32px; border-radius: var(--radius-sm); flex-shrink: 0;
  background: var(--purple-subtle); color: var(--purple-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 800;
}
.est-prod-nome { font-size: 0.875rem; font-weight: 600; color: var(--text-primary); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.est-prod-meta { font-size: 0.7rem; color: var(--text-muted); margin-top: 1px; white-space: nowrap; }

.est-badge { display: inline-flex; align-items: center; font-size: 0.65rem; font-weight: 700; padding: 3px 8px; border-radius: var(--radius-xl); letter-spacing: 0.3px; white-space: nowrap; }
.est-badge-normal  { background: rgba(34,197,94,0.12); color: var(--green);  border: 1px solid rgba(34,197,94,0.25); }
.est-badge-baixo   { background: rgba(212,175,55,0.1);  color: #e6c200;        border: 1px solid rgba(212,175,55,0.3); }
.est-badge-critico { background: rgba(245,158,11,0.12); color: #F59E0B;       border: 1px solid rgba(245,158,11,0.3); }
.est-badge-falta   { background: var(--red-subtle);    color: var(--red);     border: 1px solid rgba(239,68,68,0.25); }

.est-qtd { font-weight: 700; }
.est-qtd-zero { color: var(--red); }

/* Overlay + Drawer */
.est-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55);
  z-index: 1000; opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease; backdrop-filter: blur(3px);
}
.est-overlay.ativo { opacity: 1; pointer-events: all; }

.est-drawer {
  position: fixed; top: 0; right: 0; width: 440px; max-width: 96vw;
  height: 100vh; background: var(--surface-1); border-left: 1px solid var(--border);
  z-index: 1001; transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
  display: flex; flex-direction: column; overflow: hidden;
}
.est-drawer.ativo { transform: translateX(0); box-shadow: -8px 0 48px rgba(0,0,0,0.45); }

.est-drawer-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 22px 24px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.est-drawer-title { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); }
.est-drawer-sub   { font-size: 0.74rem; color: var(--text-muted); margin-top: 2px; }

/* Form tabs */
.est-tabs { display: flex; padding: 0 24px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.est-tab {
  padding: 10px 16px; font-size: 0.8rem; font-weight: 600;
  background: transparent; border: none; border-bottom: 2px solid transparent;
  color: var(--text-muted); cursor: pointer; transition: var(--transition); margin-bottom: -1px;
}
.est-tab:hover { color: var(--text-primary); background: transparent; }
.est-tab.ativo  { color: var(--gold); border-bottom-color: var(--gold); background: transparent; }

.est-tab-body { flex: 1; overflow-y: auto; padding: 20px 24px; }
.est-tab-body::-webkit-scrollbar { width: 4px; }
.est-tab-body::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 2px; }

.est-tab-panel { display: none; }
.est-tab-panel.ativo { display: block; }

/* Margin preview */
.est-margem-preview {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px; margin-top: 6px; padding: 14px;
  background: var(--surface-2s); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.est-margem-item { display: flex; flex-direction: column; gap: 3px; }
.est-margem-item span { font-size: 0.62rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; }
.est-margem-item strong { font-size: 0.88rem; font-weight: 700; color: var(--text-primary); }

/* Drawer footer */
.est-drawer-footer { display: flex; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--border); flex-shrink: 0; }

/* Product drawer content */
.est-drawer-content { flex: 1; overflow-y: auto; padding: 20px 24px; }
.est-drawer-content::-webkit-scrollbar { width: 4px; }
.est-drawer-content::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 2px; }

.prod-drawer-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 20px; }
.prod-drawer-kpi { background: var(--surface-2s); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; }
.prod-drawer-kpi-label { font-size: 0.62rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; display: block; margin-bottom: 4px; }
.prod-drawer-kpi-val { font-size: 1rem; font-weight: 800; color: var(--text-primary); display: block; }

.prod-drawer-section { margin-bottom: 18px; }
.prod-drawer-sec-title { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: var(--text-muted); margin-bottom: 8px; }
.prod-drawer-info-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 0.8rem; color: var(--text-secondary); }
.prod-drawer-info-row:last-child { border-bottom: none; }
.prod-drawer-info-row span:last-child { color: var(--text-primary); font-weight: 500; text-align: right; }
.prod-drawer-venda-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 0.78rem; color: var(--text-secondary); gap: 8px; }
.prod-drawer-venda-row:last-child { border-bottom: none; }
.prod-drawer-venda-data { color: var(--text-muted); font-size: 0.7rem; flex-shrink: 0; }

/* Responsive */
@media (max-width: 900px) { .est-kpi-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .est-drawer { width: 100vw; } .est-kpi-row { grid-template-columns: 1fr 1fr; } .est-status-row { display: grid; grid-template-columns: repeat(3, 1fr); } }

/* ============================================================
   PDV — PONTO DE VENDA
   ============================================================ */

.pdv-stats-bar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

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

.pdv-left { display:flex; flex-direction:column; gap:12px; min-width: 0; }

/* Search */
.pdv-search-area { position:relative; }

.pdv-search-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-2s);
  border: 2px solid var(--purple);
  border-radius: var(--radius-md);
  padding: 4px 16px;
  box-shadow: 0 0 0 4px var(--purple-glow), var(--shadow-md);
  transition: var(--transition);
}
.pdv-search-bar:focus-within {
  border-color: var(--purple-light);
  box-shadow: 0 0 0 6px rgba(212,175,55,0.12), var(--shadow-md);
}

.pdv-search-icon { font-size:1.3rem; color:var(--gold); flex-shrink:0; }

.pdv-search-input {
  flex: 1;
  border: none !important;
  background: transparent !important;
  font-size: 1rem !important;
  color: var(--text-primary) !important;
  outline: none !important;
  padding: 14px 0 !important;
  margin: 0 !important;
  font-weight: 500;
  box-shadow: none !important;
}
.pdv-search-input::placeholder { color:var(--text-muted); font-size:0.88rem; }
.pdv-search-input:focus { background:transparent !important; box-shadow:none !important; border:none !important; }

.pdv-search-hint {
  font-size: 0.7rem;
  color: var(--text-muted);
  background: var(--surface-3);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Browse button */
.pdv-browse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background: rgba(212,175,55,0.10);
  border: 1.5px solid var(--gold-dark);
  border-radius: var(--radius-sm);
  color: var(--gold) !important;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 0 0 0 rgba(212,175,55,0);
}

.pdv-browse-btn:hover,
.pdv-browse-btn.ativo {
  border-color: var(--gold-dark);
  color: var(--gold);
  background: var(--gold-subtle);
}

.pdv-browse-btn svg {
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.pdv-browse-btn.ativo svg {
  transform: rotate(180deg);
}

/* Browse panel — lista completa de produtos */
.pdv-browse-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--surface-3);
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  max-height: 380px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.pdv-browse-search {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.pdv-browse-search input {
  width: 100%;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.82rem;
  padding: 7px 10px;
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s;
}

.pdv-browse-search input:focus {
  border-color: var(--gold-dark);
  box-shadow: 0 0 0 3px var(--gold-subtle);
}

.pdv-browse-list {
  overflow-y: auto;
  flex: 1;
}

.pdv-browse-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s;
}

.pdv-browse-item:last-child { border-bottom: none; }
.pdv-browse-item:hover { background: var(--gold-subtle); }

.pdv-browse-item-nome {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pdv-browse-item-meta {
  font-size: 0.7rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.pdv-browse-item-preco {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gold);
  white-space: nowrap;
  flex-shrink: 0;
}

.pdv-browse-item-stock {
  font-size: 0.68rem;
  padding: 2px 6px;
  border-radius: 10px;
  flex-shrink: 0;
}

.pdv-browse-item-stock.ok   { background: rgba(34,197,94,0.1);  color: var(--green); }
.pdv-browse-item-stock.zero { background: rgba(239,68,68,0.1);  color: var(--red);   }
.pdv-browse-item-stock.baixo{ background: rgba(245,158,11,0.1); color: var(--warning);}

/* Dropdown */
.pdv-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--surface-3);
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  max-height: 320px;
  overflow-y: auto;
}
.pdv-dropdown::-webkit-scrollbar { width:4px; }
.pdv-dropdown::-webkit-scrollbar-thumb { background:var(--border-hover); border-radius:2px; }

.pdv-drop-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
  align-items: center;
}
.pdv-drop-item:last-child { border-bottom:none; }
.pdv-drop-item:hover { background:var(--purple-subtle); }

.pdv-drop-nome { font-size:0.88rem; font-weight:600; color:var(--text-primary); }
.pdv-drop-meta { font-size:0.7rem; color:var(--text-muted); margin-top:2px; }
.pdv-drop-preco { font-size:1rem; font-weight:800; color:var(--gold); }
.pdv-drop-stock { font-size:0.65rem; padding:1px 6px; border-radius:10px; display:inline-block; margin-left:6px; }
.pdv-drop-stock.ok  { background:rgba(34,197,94,0.12); color:var(--green); }
.pdv-drop-stock.low { background:var(--red-subtle); color:var(--red); }

/* Feedback */
.pdv-feedback {
  margin-top: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.84rem;
  font-weight: 500;
}
.pdv-feedback.err  { background:var(--red-subtle); border:1px solid rgba(239,68,68,0.3); color:var(--red); }
.pdv-feedback.ok   { background:var(--green-subtle); border:1px solid rgba(34,197,94,0.3); color:var(--green); }
.pdv-feedback.warn { background:rgba(245,158,11,0.08); border:1px solid rgba(245,158,11,0.3); color:#F59E0B; }

/* Quick Add Panel */
.pdv-quick-add {
  background: var(--surface-2s);
  border: 1px solid var(--purple);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.pdv-prod-info {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px 14px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.pdv-prod-avatar {
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  background: var(--purple-subtle);
  color: var(--purple-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 800; flex-shrink: 0;
}

.pdv-prod-nome { font-size:0.95rem; font-weight:700; color:var(--text-primary); }
.pdv-prod-sub  { font-size:0.72rem; color:var(--text-muted); margin-top:2px; }
.pdv-prod-preco { font-size:1.15rem; font-weight:800; color:var(--gold); white-space:nowrap; }

.pdv-controls-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  flex-wrap: wrap;
}

.pdv-qty-group {
  display: flex;
  align-items: center;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.pdv-qty-btn {
  width: 36px; height: 36px;
  font-size: 1.1rem; font-weight: 700;
  background: transparent; border: none;
  color: var(--text-secondary);
  cursor: pointer; transition: var(--transition); padding: 0;
}
.pdv-qty-btn:hover { background:var(--surface-2s); color:var(--text-primary); }

.pdv-qty-input {
  width: 52px !important;
  text-align: center !important;
  border: none !important;
  background: transparent !important;
  font-size: 0.95rem !important; font-weight: 700 !important;
  margin: 0 !important; padding: 8px 4px !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}
.pdv-qty-input:focus { box-shadow:none !important; border:none !important; background:transparent !important; }

.pdv-desc-group { display:flex; align-items:center; gap:6px; }
.pdv-desc-group label { font-size:0.7rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.4px; margin:0; white-space:nowrap; }
.pdv-desc-input { width:64px !important; text-align:center !important; margin:0 !important; padding:8px !important; font-size:0.85rem !important; }

.pdv-add-btn { margin-left:auto; padding:9px 20px !important; font-size:0.88rem !important; white-space:nowrap; }

/* Payment */
.pdv-payment-section {
  background: var(--surface-2s);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}

.pdv-section-label {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.pdv-formas-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }

.pdv-forma {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 8px; font-size: 1.1rem; font-weight: 600;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface-3); color: var(--text-secondary);
  cursor: pointer; transition: var(--transition);
}
.pdv-forma:hover { border-color:var(--border-hover); color:var(--text-primary); }
.pdv-forma.ativo { background:var(--purple-subtle); border-color:var(--purple); color:var(--purple-light); box-shadow:0 0 0 2px var(--purple-glow); }
.pdv-forma span { font-size:0.7rem; }
.pdv-forma-img  { width: 28px; height: 28px; display: block; flex-shrink: 0; }

/* Quick access section */
.pdv-quick-section {
  background: var(--surface-2s);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}

.pdv-section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }

.pdv-quick-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; align-items: start; }

.pdv-quick-card {
  padding: 10px 12px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
  min-width: 0;
  overflow: hidden;
}
.pdv-quick-card:hover { border-color:var(--purple); background:var(--purple-subtle); }

.pdv-quick-card-nome  { font-size:0.76rem; font-weight:600; color:var(--text-primary); margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.pdv-quick-card-preco { font-size:0.84rem; font-weight:800; color:var(--gold); }
.pdv-quick-card-stock { font-size:0.65rem; color:var(--text-muted); margin-top:1px; }

/* CART PANEL */
.pdv-right {
  position: sticky;
  top: 20px;
  min-width: 0;
}

.pdv-cart-panel {
  background: var(--surface-2s);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  height: calc(100vh - 180px);
  max-height: 700px;
  min-height: 300px;
  overflow: hidden;
}

.pdv-cart-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.pdv-cart-title { font-size:0.95rem; font-weight:700; color:var(--text-primary); }

.pdv-cart-lista {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 200px;
}
.pdv-cart-lista::-webkit-scrollbar { width:3px; }
.pdv-cart-lista::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

.pdv-cart-empty {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 20px;
  text-align: center;
  color: var(--text-muted);
}
.pdv-cart-empty p    { font-size:0.875rem; margin:0 0 4px; }
.pdv-cart-empty small { font-size:0.72rem; }
.pdv-cart-empty kbd  { background:var(--surface-3); border:1px solid var(--border); padding:1px 5px; border-radius:3px; font-size:0.68rem; }

/* Cart items */
.pdv-cart-item {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 10px;
  transition: var(--transition);
}
.pdv-cart-item:hover { border-color:var(--border-hover); }

.pdv-ci-nome  { font-size:0.84rem; font-weight:600; color:var(--text-primary); grid-column:1; }
.pdv-ci-total { font-size:0.96rem; font-weight:800; color:var(--gold); grid-column:2; grid-row:1/3; align-self:center; white-space:nowrap; }
.pdv-ci-sub   { font-size:0.7rem; color:var(--text-muted); grid-column:1; }
.pdv-ci-rm    { grid-column:1/-1; margin-top:3px; }
.pdv-ci-rm button { font-size:0.67rem; padding:2px 8px; }

/* Cart footer */
.pdv-cart-footer {
  border-top: 1px solid var(--border);
  padding: 14px 16px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pdv-summary-rows { display:flex; flex-direction:column; gap:4px; }

.pdv-sum-row { display:flex; justify-content:space-between; font-size:0.8rem; color:var(--text-secondary); padding:2px 0; }
.pdv-sum-row span:last-child { font-weight:600; }
.pdv-sum-desc span:last-child { color:var(--red); }
.pdv-sum-divider { height:1px; background:var(--border); margin:4px 0; }
.pdv-sum-lucro span:last-child { color:var(--green); }
.pdv-sum-margem { font-size:0.72rem; opacity:0.8; }
.pdv-sum-margem span:last-child { color:var(--green); }

.pdv-total-block {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 2px;
}

.pdv-total-label { font-size:0.6rem; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:var(--text-muted); }

.pdv-total-val { font-size:2.1rem; font-weight:900; color:var(--text-primary); letter-spacing:-1px; line-height:1; }

.pdv-btn-finalizar {
  width: 100%;
  padding: 14px;
  font-size: 0.95rem; font-weight: 700;
  background: var(--gold);
  color: #0A0A0A;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  letter-spacing: 0.5px;
}
.pdv-btn-finalizar:hover { background: var(--gold-bright); box-shadow: 0 0 32px rgba(212,175,55,0.35); color:#0A0A0A; }
.pdv-btn-finalizar kbd { background:rgba(0,0,0,0.2); padding:2px 6px; border-radius:3px; font-size:0.7rem; color:inherit; }

/* Keyboard hints bar */
.pdv-kbd-hints {
  display: flex; gap: 16px; flex-wrap: wrap;
  justify-content: center;
  margin-top: 12px;
  font-size: 0.72rem;
  color: var(--text-muted);
}
.pdv-kbd-hints span { display:flex; align-items:center; gap:4px; }
.pdv-kbd-hints kbd { background:var(--surface-2s); border:1px solid var(--border); padding:1px 5px; border-radius:3px; font-size:0.67rem; color:var(--text-secondary); }

/* Responsive */
@media (max-width: 960px) {
  .pdv-layout { grid-template-columns:1fr; }
  .pdv-right  { position:static; }
  .pdv-cart-panel { min-height:auto; max-height:none; }
  .pdv-quick-grid { grid-template-columns:repeat(4,1fr); }
}
@media (max-width: 600px) {
  .pdv-formas-grid { grid-template-columns:repeat(2,1fr); }
  .pdv-quick-grid  { grid-template-columns:repeat(3,1fr); }
  .pdv-controls-row { flex-wrap:wrap; }
  .pdv-total-val { font-size:1.6rem; }
}

/* ── Estoque + Histórico: listas mobile (ocultas no desktop) ── */
#estoqueMobileList   { display: none; }
#historicoMobileList { display: none; }

/* ── Histórico: lista mobile ── */
.hist-mobile-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.hist-mobile-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  cursor: pointer;
  transition: background 0.15s;
}
.hist-mobile-card:active { background: var(--surface-3); }

.hist-mobile-left  { flex: 1; min-width: 0; }
.hist-mobile-data  { font-size: 0.68rem; color: var(--text-muted); margin-bottom: 2px; }
.hist-mobile-nome  { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hist-mobile-forma { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }

.hist-mobile-right { flex-shrink: 0; text-align: right; }
.hist-mobile-total { font-size: 0.95rem; font-weight: 700; color: var(--green); }

.hist-mobile-empty {
  text-align: center; padding: 48px 20px;
  color: var(--text-muted); font-size: 0.875rem;
}

/* ── Drawer detalhe de venda ── */
#vendaDetalheDrawer { display: flex; flex-direction: column; }
#vendaDrawerContent { display: flex; flex-direction: column; flex: 1; overflow: hidden; }

.venda-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px 8px;
}

.venda-drawer-footer {
  padding: 12px 20px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--surface-1);
}

.venda-drawer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
}
.venda-drawer-row span { color: var(--text-muted); }
.venda-drawer-row .vend-mini-nome { color: var(--text-primary); font-weight: 600; }

/* ── Mini-perfil do vendedor ──────────────────────────────── */
.vend-mini {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  vertical-align: middle;
}
.vend-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1;
  border: 1px solid transparent;
  letter-spacing: -0.3px;
}
.vend-avatar-vazio {
  background: var(--surface-3);
  color: var(--text-muted);
  border-color: var(--border);
}
.vend-mini-nome {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vend-mini-vazio .vend-mini-nome { color: var(--text-muted); font-weight: 500; }
.vend-mini-compact .vend-avatar { width: 22px; height: 22px; font-size: 0.7rem; }
.vend-mini-compact .vend-mini-nome { font-size: 0.8rem; }

.est-mobile-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.est-mobile-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.est-mobile-card:active { background: var(--surface-3); }

.est-mobile-info {
  flex: 1;
  min-width: 0;
}
.est-mobile-nome {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.est-mobile-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.est-mobile-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
}
.est-mobile-preco {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
}
.est-mobile-qtd {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.est-mobile-chevron {
  color: var(--text-muted);
  flex-shrink: 0;
}

.est-mobile-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.8;
}

/* ============================================================
   CREDIÁRIO — Sistema Profissional
   ============================================================ */

.crd-kpi-row       { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }

.crd-charts-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.crd-donut-legenda { margin-top:10px; display:flex; flex-direction:column; gap:5px; }
.crd-don-row       { display:flex; align-items:center; gap:6px; font-size:0.78rem; color:var(--text-secondary); }
.crd-don-row strong { margin-left:auto; color:var(--text-primary); }
.crd-don-dot       { width:8px; height:8px; border-radius:50%; flex-shrink:0; }

/* Table section */
.crd-table-section {
  background: var(--surface-2s);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.crd-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.crd-busca-input {
  padding: 7px 12px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.82rem;
  width: 200px;
  transition: var(--transition);
}
.crd-busca-input:focus { outline:none; border-color:var(--purple); box-shadow:0 0 0 2px var(--purple-glow); }

/* Drawer */
.crd-drawer-wide { width:480px; max-width:98vw; }

.crd-cliente-header {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}

.crd-kpi-mini-row { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:12px; }

.crd-kpi-mini {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}
.crd-kpi-mini div      { font-size:0.6rem; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-muted); margin-bottom:3px; }
.crd-kpi-mini strong   { font-size:0.82rem; font-weight:800; color:var(--text-primary); }
.crd-kpi-mini-green strong { color:var(--green); }
.crd-kpi-mini-red strong   { color:var(--red); }

.crd-parcelas-label {
  font-size: 0.63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  margin: 12px 0 8px;
}

.crd-parcelas-list { display:flex; flex-direction:column; gap:6px; }

.crd-parcela-item {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 4px 10px;
  align-items: center;
  transition: var(--transition);
}
.crd-parcela-item:hover { border-color:var(--border-hover); }
.crd-parcela-paga      { opacity: 0.5; }

.crd-parcela-num    { font-size:0.68rem; color:var(--text-muted); }
.crd-parcela-val    { font-size:0.92rem; font-weight:800; color:var(--text-primary); }
.crd-parcela-status { grid-column:3; grid-row:1/3; }
.crd-parcela-pay    { grid-column:1/-1; margin-top:6px; display:flex; gap:6px; align-items:center; }

.crd-forma-sel {
  font-size: 0.72rem;
  padding: 5px 8px;
  background: var(--surface-2s);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  flex: 1;
}

/* Form drawer */
.crd-form-section-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-muted);
}

.crd-parcelas-preview {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  max-height: 280px;
  overflow-y: auto;
}
.crd-parcelas-preview::-webkit-scrollbar { width:3px; }
.crd-parcelas-preview::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

.crd-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--purple-light);
  background: var(--purple-subtle);
  position: sticky;
  top: 0;
}

.crd-preview-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.crd-preview-row:last-child { border-bottom:none; }
.crd-preview-row span:nth-child(2) { margin-left:auto; }

/* Responsive */
@media (max-width: 960px) {
  .crd-charts-grid { grid-template-columns:1fr; }
}
@media (max-width: 600px) {
  .crd-kpi-mini-row { grid-template-columns:repeat(2,1fr); }
  .crd-busca-input  { width:100%; }
}

/* ============================================================
   CREDIÁRIO v2 — Centro de Cobrança Profissional
   ============================================================ */

.crd-header-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
  flex-wrap: wrap;
}

/* 4 BIG KPI CARDS */
.crd-kpi-main {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.crd-kpi-main-card {
  border-radius: var(--radius-md);
  padding: 20px 22px;
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  transition: var(--transition);
}
.crd-kpi-main-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}

.crd-kmain-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.crd-kmain-head .crd-kmain-label { margin-bottom: 0; }
.crd-kmain-ico {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.crd-kmain-ico svg { width: 16px; height: 16px; }
.crd-kmain-blue   .crd-kmain-ico { background: rgba(59,130,246,0.14); color: #3B82F6; }
.crd-kmain-red    .crd-kmain-ico { background: rgba(239,68,68,0.14);  color: var(--red); }
.crd-kmain-orange .crd-kmain-ico { background: rgba(245,158,11,0.14); color: #F59E0B; }
.crd-kmain-green  .crd-kmain-ico { background: rgba(34,197,94,0.14);  color: var(--green); }

.crd-kmain-blue   { background: rgba(59,130,246,0.07); border-color: rgba(59,130,246,0.18); }
.crd-kmain-blue::before   { background: #3B82F6; }
.crd-kmain-red    { background: rgba(239,68,68,0.07); border-color: rgba(239,68,68,0.2); }
.crd-kmain-red::before    { background: var(--red); }
.crd-kmain-orange { background: rgba(245,158,11,0.07); border-color: rgba(245,158,11,0.2); }
.crd-kmain-orange::before { background: #F59E0B; }
.crd-kmain-green  { background: rgba(34,197,94,0.07); border-color: rgba(34,197,94,0.18); }
.crd-kmain-green::before  { background: var(--green); }

.crd-kmain-label {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.crd-kmain-val {
  font-size: 1.75rem;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: 5px;
}

.crd-kmain-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* FILTER TABS */
.crd-filter-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.crd-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.crd-tab:hover { background: var(--surface-3); color: var(--text-primary); }
.crd-tab.ativo { background: var(--surface-3); border-color: var(--border); color: var(--text-primary); }

.crd-tab-ct {
  background: var(--red-subtle);
  color: var(--red);
  font-size: 0.65rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}
.crd-tab-ct:empty, .crd-tab-ct[textContent="0"] { display: none; }

/* CLIENT FEED */
.crd-client-feed {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.crd-feed-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
  background: var(--surface-2s);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

/* CLIENT CARD */
.crd-client-card {
  background: var(--surface-2s);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
}
.crd-client-card:hover { border-color: var(--border-hover); box-shadow: var(--shadow-md); transform: translateY(-1px); }

/* left urgency bar */
.crd-card-urgbar {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4px;
  border-radius: 4px 0 0 4px;
}
.urg-atrasado .crd-card-urgbar { background: var(--red); }
.urg-hoje     .crd-card-urgbar { background: #F59E0B; }
.urg-semana   .crd-card-urgbar { background: #3B82F6; }
.urg-emdia    .crd-card-urgbar { background: var(--green); }
.urg-quitado  .crd-card-urgbar { background: var(--border); }

.urg-atrasado { border-color: rgba(239,68,68,0.25); }
.urg-hoje     { border-color: rgba(245,158,11,0.25); }

.crd-card-body {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 16px 18px 12px 20px;
}

/* Avatar */
.crd-card-av {
  width: 42px; height: 42px;
  border-radius: var(--radius-sm);
  background: var(--purple-subtle);
  color: var(--purple-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem; font-weight: 800;
  flex-shrink: 0;
}
.urg-atrasado .crd-card-av { background: rgba(239,68,68,0.12); color: var(--red); }
.urg-hoje     .crd-card-av { background: rgba(245,158,11,0.12); color: #F59E0B; }

/* Main info */
.crd-card-main { min-width: 0; }

.crd-card-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.crd-card-meta {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.crd-card-urg-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.crd-urg-tag {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 2px 7px;
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
}
.crd-urg-tag.urg-atrasado { background: var(--red-subtle);  color: var(--red); }
.crd-urg-tag.urg-hoje     { background: rgba(245,158,11,0.12); color: #F59E0B; }
.crd-urg-tag.urg-semana   { background: rgba(59,130,246,0.1);  color: #3B82F6; }
.crd-urg-tag.urg-emdia    { background: var(--green-subtle); color: var(--green); }
.crd-urg-tag.urg-quitado  { background: var(--surface-3); color: var(--text-muted); }

.crd-card-parcela-info {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.crd-card-prods {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 400px;
}

/* Right: value */
.crd-card-right {
  text-align: right;
  flex-shrink: 0;
  min-width: 120px;
}

.crd-card-val-main {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--text-primary);
  letter-spacing: -0.3px;
  line-height: 1;
}
.crd-val-red { color: var(--red); }

.crd-card-val-sub {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin: 3px 0 8px;
}

.crd-prog-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: flex-end;
}

.crd-prog-bar {
  width: 60px; height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.crd-prog-fill { height: 100%; background: var(--green); border-radius: 2px; transition: width 0.3s; }
.urg-atrasado .crd-prog-fill { background: var(--red); }
.urg-hoje     .crd-prog-fill { background: #F59E0B; }

.crd-prog-txt { font-size: 0.65rem; color: var(--text-muted); }

/* Action bar */
.crd-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px 10px 20px;
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,0.015);
}

.crd-btn-wpp {
  padding: 5px 12px;
  font-size: 0.74rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(37,211,102,0.3);
  background: rgba(37,211,102,0.06);
  color: #25d366;
  cursor: pointer;
  transition: var(--transition);
}
.crd-btn-wpp:hover { background: rgba(37,211,102,0.14); }

.crd-btn-receive {
  padding: 5px 14px;
  font-size: 0.74rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--gold);
  color: #0A0A0A;
  cursor: pointer;
  transition: var(--transition);
  letter-spacing: 0.2px;
}
.crd-btn-receive:hover { background: var(--gold-bright); box-shadow: 0 0 16px var(--gold-glow); color: #0A0A0A; }

.crd-btn-detail {
  padding: 5px 12px;
  font-size: 0.74rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
  margin-left: auto;
}
.crd-btn-detail:hover { background: var(--surface-3); color: var(--text-primary); }

/* Responsive */
@media (max-width: 900px) {
  .crd-kpi-main { grid-template-columns: repeat(2, 1fr); }
  .crd-card-body { grid-template-columns: auto 1fr; }
  .crd-card-right { display: none; }
}
@media (max-width: 600px) {
  .crd-kpi-main { grid-template-columns: 1fr 1fr; }
  .crd-kmain-val { font-size: 1.3rem; }
  .crd-filter-tabs { gap: 3px; }
  .crd-tab { padding: 5px 10px; font-size: 0.72rem; }
}

/* ============================================================
   MODAL DE METAS — Premium Dialog
   ============================================================ */

.metas-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease);
}

.metas-overlay.ativo {
  opacity: 1;
  pointer-events: all;
}

.metas-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -48%) scale(0.97);
  width: 100%;
  max-width: 420px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-top: 2px solid var(--gold);
  border-radius: var(--radius-lg);
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, 0.08),
    var(--shadow-lg),
    0 0 60px rgba(212, 175, 55, 0.08);
  z-index: 2001;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  overflow: hidden;
}

.metas-modal.ativo {
  opacity: 1;
  pointer-events: all;
  transform: translate(-50%, -50%) scale(1);
}

.metas-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 24px 24px 20px;
  border-bottom: 1px solid var(--border);
}

.metas-modal-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px;
  letter-spacing: 0.2px;
}

.metas-modal-sub {
  font-size: 0.74rem;
  color: var(--text-muted);
  margin: 0;
  letter-spacing: 0.2px;
}

.metas-close-btn {
  padding: 4px 8px;
  font-size: 0.9rem;
  flex-shrink: 0;
  margin-top: -2px;
  color: var(--text-muted);
}

.metas-modal-body {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.metas-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.metas-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.69rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  margin: 0;
}

.metas-label-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 0.65rem;
  font-weight: 800;
  background: var(--gold-subtle);
  color: var(--gold);
  border-radius: 4px;
  flex-shrink: 0;
}

.metas-input {
  width: 100%;
  padding: 12px 16px;
  margin: 0 !important;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  transition: var(--transition);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.metas-input:focus {
  border-color: var(--gold);
  background: var(--surface-3);
  box-shadow: 0 0 0 3px var(--gold-glow);
}

.metas-input::placeholder {
  color: var(--text-muted);
  font-weight: 400;
  font-size: 0.9rem;
}

.metas-hint {
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.1px;
}

.metas-field-destaque {
  border-top: 1px solid var(--border);
  padding-top: 16px;
  margin-top: 4px;
}

.metas-field-destaque .metas-hint {
  color: var(--gold-dark);
}

.metas-modal-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 16px 24px 20px;
  border-top: 1px solid var(--border);
}

.metas-save-btn {
  padding: 10px 24px;
  font-size: 0.88rem;
  letter-spacing: 0.3px;
}

@media (max-width: 480px) {
  .metas-modal {
    max-width: calc(100vw - 32px);
  }
}

/* ============================================================
   HOME — Página Inicial Premium
   ============================================================ */

/* ── Layout desktop do home (3 colunas) ──
   #inicio (vendedor) usa exatamente a mesma estrutura de #home; só os
   dados mudam. Por isso os dois compartilham todas as regras .home-*. */
section#home,
section#inicio {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 48px 40px 64px;
  max-width: 1400px;
  margin: 0 auto;
}

/* display só quando ativa — não sobrescreve section { display:none } */
section#home.active,
section#inicio.active {
  display: grid;
  grid-template-columns: 240px 1fr 240px;
  grid-template-areas: "left center right";
  gap: 40px;
  align-items: start;
}

.home-d-left       { grid-area: left;   display: flex; flex-direction: column; gap: 10px; padding-top: 0; }
.home-center-col   { grid-area: center; min-width: 0; max-width: 680px; margin: 0 auto; width: 100%; }
.home-d-right      { grid-area: right;  display: flex; flex-direction: column; gap: 10px; padding-top: 0; }
.home-d-right-btns { display: flex; flex-direction: column; gap: 10px; }

/* desktop: botões de ação restaurados */
.home-action-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition);
  text-align: left;
  width: 100%;
  color: var(--text-primary);
}
.home-action-card:hover {
  border-color: var(--gold-dark);
  background: var(--surface-2s);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.home-action-primary {
  background: var(--gold);
  border-color: var(--gold);
  color: #0A0A0A;
}
.home-action-primary:hover {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
  color: #0A0A0A;
  box-shadow: 0 8px 40px rgba(212,175,55,0.30);
}
.home-action-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}
.home-action-text  { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.home-action-name  { font-size: 0.92rem; font-weight: 700; }
.home-action-desc  { font-size: 0.7rem; opacity: 0.65; }

/* desktop: CTA oculto no mobile, visível no desktop */
.home-d-cta { display: flex; margin-top: 4px; }

/* desktop: stat-trio via pills restyled */
.home-stats-pills {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 20px;
  padding: 28px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.home-stat-pill {
  flex: 1;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.home-stat-pill + .home-stat-pill {
  border-left: 1px solid var(--border-hover);
}
.home-stat-pill-top   { display: flex; align-items: center; gap: 4px; }
.home-stat-pill-arrow { display: none; } /* oculta setas no desktop */
.home-stat-pill-lbl {
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  text-align: center;
}
.home-stat-pill-val {
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
  text-align: center;
}
/* no desktop, lucros ficam na cor padrão (como era antes) */
.home-stat-pill-green { color: var(--text-primary); }

/* label de despesas abaixo da 3ª métrica */
.home-stat-desp-label {
  font-size: 0.68rem;
  color: var(--red, #ef4444);
  text-align: center;
  margin-top: 2px;
}

/* no Início do vendedor a 3ª métrica traz a contagem de vendas do mês,
   que não é um alerta — o vermelho de despesa não cabe aqui */
#inicio .home-stat-desp-label { color: var(--text-muted); }

/* labels duplos: mobile=curto, desktop=completo */
.lbl-mobile  { display: none; }
.lbl-desktop { display: inline; }

/* desktop: grade mobile oculta */
.home-quick-grid  { display: none; }
/* desktop: divider dourado oculto */
.home-gold-divider { display: none; }
/* desktop: hero centralizado como original */
.home-hero        { margin-bottom: 40px; text-align: center; }
/* desktop: progress */
.home-progress-wrap { margin-bottom: 48px; }
.home-progress-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0; }
.home-progress-track { margin-top: 8px; height: 3px; background: var(--surface-3); border-radius: 2px; overflow: hidden; }
/* desktop: live bar */
.home-live-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 56px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }

/* desktop: estoque card */
.home-estoque-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.home-estoque-card:empty { display: none; }

/* desktop: formas card title */
.home-formas-card-title { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-muted); margin-bottom: 10px; }

/* alertas */
#homeAlerts,
#vendAlerts { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }

/* Alertas de estoque (ocultos no novo layout) */
.home-estoque-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.home-estoque-card:empty {
  display: none;
}

.home-estoque-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.home-estoque-item:last-of-type {
  border-bottom: none;
}

.home-estoque-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.home-estoque-zerado .home-estoque-dot { background: var(--red); }
.home-estoque-baixo  .home-estoque-dot { background: #F59E0B; }

.home-estoque-nome {
  flex: 1;
  font-size: 0.73rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-estoque-qtd {
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}

.home-estoque-zerado .home-estoque-qtd { color: var(--red); }
.home-estoque-baixo  .home-estoque-qtd { color: #F59E0B; }

.home-estoque-extra {
  font-size: 0.62rem;
  color: var(--text-muted);
  text-align: center;
  padding-top: 2px;
  opacity: 0.7;
}

/* classes legadas não mais usadas */
.home-section-label { display: none; }
.home-actions-grid  { display: none; }

/* Responsive home legado (mantido vazio — novo layout no final do arquivo) */

/* Eye toggle button (legado — substituído no novo CSS) */

/* ============================================================
   ALERT MODAL GLOBAL
   ============================================================ */

.alert-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
  z-index: 9000;
}

.alert-overlay.ativo { display: block; }

.alert-modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -48%) scale(0.94);
  z-index: 9001;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px 24px;
  width: min(360px, 90vw);
  text-align: center;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6);
  opacity: 0;
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), opacity 0.18s ease;
}

.alert-modal.ativo {
  display: block;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.alert-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}

.alert-icon-wrap.tipo-erro    { background: rgba(239,68,68,0.12);  border: 1px solid rgba(239,68,68,0.3);  color: var(--red); }
.alert-icon-wrap.tipo-aviso   { background: rgba(212,175,55,0.12); border: 1px solid rgba(212,175,55,0.3); color: var(--gold); }
.alert-icon-wrap.tipo-sucesso { background: rgba(34,197,94,0.10);  border: 1px solid rgba(34,197,94,0.28); color: var(--green); }

.alert-msg {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 24px;
}

.alert-ok-btn {
  width: 100%;
  padding: 11px;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
}

/* Confirm modal */
.confirm-btns {
  display: flex;
  gap: 10px;
}

.confirm-cancel-btn,
.confirm-ok-btn {
  flex: 1;
  padding: 11px;
  font-size: 0.85rem;
  letter-spacing: 0.3px;
}

/* Produto drawer — ID em destaque */
.prod-drawer-codigos-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--gold-subtle);
  border: 1px solid rgba(212,175,55,0.22);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 20px;
}

.prod-drawer-codigo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.prod-drawer-codigo-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--gold-dark);
  text-transform: uppercase;
  flex-shrink: 0;
}

.prod-drawer-codigo-val {
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.8px;
  background: rgba(212,175,55,0.08);
  border: 1px solid rgba(212,175,55,0.18);
  border-radius: 4px;
  padding: 2px 8px;
}

/* home-live-right: relógio + olho agrupados */
.home-live-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Botões de período — Histórico de Vendas */
.hist-periodo-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 24px;
}

.hist-periodo-btn {
  padding: 6px 14px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--surface-2s);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
  letter-spacing: 0.2px;
}

.hist-periodo-btn:hover {
  border-color: var(--gold-dark);
  color: var(--gold);
}

.hist-periodo-btn.ativo {
  background: var(--gold-subtle);
  border-color: var(--gold-dark);
  color: var(--gold);
}

#filtroData.filtro-data-ativo {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(212,175,55,0.2);
  color: var(--gold);
}

/* ── Modal de Sucesso de Venda ─────────────────────────── */
@keyframes vsOverlayIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes vsModalIn {
  0%   { opacity: 0; transform: scale(0.82) translateY(24px); }
  60%  { transform: scale(1.04) translateY(-4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes vsCheckCircle {
  0%   { stroke-dashoffset: 160; }
  100% { stroke-dashoffset: 0; }
}
@keyframes vsCheckTick {
  0%   { stroke-dashoffset: 50; }
  100% { stroke-dashoffset: 0; }
}
@keyframes vsGoldPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,175,55,0.0); }
  50%       { box-shadow: 0 0 0 24px rgba(212,175,55,0.0); }
}
@keyframes vsShimmerBg {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.venda-sucesso-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.88);
  animation: vsOverlayIn 0.25s ease;
  backdrop-filter: blur(6px);
}

.venda-sucesso-modal {
  background: #111;
  border: 1px solid rgba(212,175,55,0.30);
  border-radius: 20px;
  padding: 40px 36px 32px;
  width: 360px;
  max-width: 90vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  animation: vsModalIn 0.45s cubic-bezier(.34,1.56,.64,1) both;
  position: relative;
  overflow: hidden;
}

.venda-sucesso-modal::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(212,175,55,0.06) 0%, transparent 60%);
  pointer-events: none;
}

.venda-sucesso-check {
  width: 80px;
  height: 80px;
  margin-bottom: 20px;
}

.venda-sucesso-check svg {
  width: 100%;
  height: 100%;
}

.venda-sucesso-circle {
  stroke: var(--gold);
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
  animation: vsCheckCircle 0.5s 0.2s cubic-bezier(.65,0,.45,1) forwards;
}

.venda-sucesso-tick {
  stroke: var(--gold);
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: vsCheckTick 0.35s 0.65s ease forwards;
}

.venda-sucesso-label {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.04em;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.venda-sucesso-valor {
  font-size: 2.6rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #fff;
  background: linear-gradient(90deg, #D4AF37 0%, #FFD700 40%, #D4AF37 60%, #B8860B 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: vsShimmerBg 2s linear infinite 0.8s;
  margin-bottom: 6px;
}

.venda-sucesso-forma {
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.venda-sucesso-itens {
  width: 100%;
  background: rgba(212,175,55,0.05);
  border: 1px solid rgba(212,175,55,0.12);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 140px;
  overflow-y: auto;
}

.venda-sucesso-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.venda-sucesso-item-nome {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}

.venda-sucesso-item-val {
  color: var(--gold);
  font-weight: 600;
  font-size: 0.78rem;
  white-space: nowrap;
}

.venda-sucesso-btns {
  display: flex;
  gap: 10px;
  width: 100%;
}

.venda-sucesso-btn-comp,
.venda-sucesso-btn-nova {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px 10px;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  border: none;
  letter-spacing: 0.02em;
}

.venda-sucesso-btn-comp {
  background: rgba(212,175,55,0.12);
  border: 1px solid rgba(212,175,55,0.35);
  color: var(--gold);
}
.venda-sucesso-btn-comp:hover {
  background: rgba(212,175,55,0.22);
  border-color: var(--gold);
}

.venda-sucesso-btn-nova {
  background: var(--gold);
  color: #111;
}
.venda-sucesso-btn-nova:hover {
  background: var(--gold-bright);
}

/* ═══════════════════════════════════════════════════════════
   AUTENTICAÇÃO — Tela de Login
   ═══════════════════════════════════════════════════════════ */
@keyframes authOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes authCardIn {
  from { opacity: 0; transform: translateY(28px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
@keyframes authShimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
@keyframes authOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.04); }
}

.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 60% 40%, #1a1400 0%, #0a0a0a 70%);
  animation: authOverlayIn 0.35s ease;
}

.auth-overlay.auth-saindo {
  animation: authOut 0.45s ease forwards;
  pointer-events: none;
}

/* Enquanto verifica sessão: esconde o formulário, mostra spinner */
.auth-overlay.auth-verificando .auth-shimmer-line,
.auth-overlay.auth-verificando .auth-field-group,
.auth-overlay.auth-verificando .auth-erro,
.auth-overlay.auth-verificando .auth-btn-entrar,
.auth-overlay.auth-verificando .auth-hint {
  display: none !important;
}

.auth-loading-state {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 24px 0 8px;
}

.auth-overlay.auth-verificando .auth-loading-state {
  display: flex;
}

.auth-loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255,255,255,0.1);
  border-top-color: var(--purple, #a78bfa);
  border-radius: 50%;
  animation: authSpinnerGiro 0.7s linear infinite;
}

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

.auth-loading-txt {
  font-size: 0.8rem;
  color: var(--text-muted, #666);
  letter-spacing: 0.03em;
}

.auth-card {
  background: #111;
  border: 1px solid rgba(212,175,55,0.25);
  border-radius: 18px;
  padding: 44px 40px 36px;
  width: 380px;
  max-width: 92vw;
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: authCardIn 0.45s cubic-bezier(.34,1.3,.64,1) 0.1s both;
  box-shadow: 0 32px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(212,175,55,0.08);
  position: relative;
  overflow: hidden;
}

.auth-card::before {
  content: '';
  position: absolute;
  top: -60px; left: -60px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(212,175,55,0.07) 0%, transparent 70%);
  pointer-events: none;
}

.auth-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
}

.auth-logo-img {
  max-width: 220px;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: brightness(1.05);
}

.auth-logo-text {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: linear-gradient(90deg, #B8860B 0%, #FFD700 45%, #D4AF37 60%, #B8860B 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: authShimmer 3s linear infinite;
}

.auth-logo-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.auth-shimmer-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.4), transparent);
  margin: -6px 0 2px;
}

.auth-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 7px;
}

.auth-field-group { display: flex; flex-direction: column; }

.auth-input {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.9rem;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.auth-input:focus {
  border-color: var(--gold-dark);
  box-shadow: 0 0 0 3px rgba(212,175,55,0.12);
}

.auth-senha-wrap {
  position: relative;
  /* flex em vez de block: como <input> é inline-block, o bloco criava
     uma linha com espaço de descendente embaixo, deixando o wrapper
     alguns px mais alto que o campo. O top:50% do botão media essa
     altura maior e caía abaixo do centro real do input. */
  display: flex;
  align-items: center;
}

/* vale para os dois campos: .auth-input no login, .cfg-input nas
   configurações — sem isso o texto passava por baixo do olho */
.auth-senha-wrap .auth-input,
.auth-senha-wrap .cfg-input {
  flex: 1;
  min-width: 0;
  padding-right: 42px;
  /* o flex conta a margin box: um margin-bottom de 16px no campo
     esticava o wrapper para 60px contra 44px do input, e o top:50%
     do botão media essa altura maior — era a queda de 8px */
  margin-bottom: 0;
}

.auth-eye-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  /* zera a altura de linha herdada, que empurrava o SVG para baixo
     dentro da caixa do botão */
  line-height: 0;
  transition: color 0.2s, background 0.15s;
}

.auth-eye-btn svg { display: block; }
.auth-eye-btn:hover { color: var(--gold); }

.auth-erro {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(220,50,50,0.1);
  border: 1px solid rgba(220,50,50,0.3);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.82rem;
  color: #ff6b6b;
  margin: -4px 0;
}

.auth-erro::before { content: '⚠'; font-size: 0.9rem; flex-shrink: 0; }

.auth-btn-entrar {
  width: 100%;
  padding: 14px;
  background: var(--gold);
  color: #111;
  border: none;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
  box-shadow: 0 4px 20px rgba(212,175,55,0.25);
  margin-top: 4px;
}

.auth-btn-entrar:hover:not(:disabled) {
  background: var(--gold-bright);
  box-shadow: 0 6px 28px rgba(212,175,55,0.4);
}

.auth-btn-entrar:active:not(:disabled) { transform: scale(0.98); }

.auth-btn-entrar:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.auth-hint {
  text-align: center;
  font-size: 0.68rem;
  color: rgba(255,255,255,0.2);
  margin: -6px 0 0;
  letter-spacing: 0.04em;
}

/* ── Badge do usuário no header ──────────────────────────── */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.auth-user-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 14px 6px 10px;
  background: rgba(212,175,55,0.06);
  border: 1px solid rgba(212,175,55,0.18);
  border-radius: 20px;
}

.auth-user-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}

.auth-user-nome {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.auth-user-role {
  font-size: 0.65rem;
  color: var(--gold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.auth-logout-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  background: none;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.auth-logout-btn:hover {
  border-color: #ff6b6b;
  color: #ff6b6b;
}

/* ── Nav items com restrição de role ─────────────────────── */
nav button[data-role].role-bloqueado {
  display: none;
}

/* ── Wizard de produto ───────────────────────────────────── */
@keyframes wizardShake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}

.input-erro-wizard {
  border-color: #ff6b6b !important;
  box-shadow: 0 0 0 3px rgba(255,107,107,0.18) !important;
  animation: wizardShake 0.4s ease;
}

#prodWizardBtn.wizard-pronto {
  background: var(--gold);
  box-shadow: 0 4px 20px rgba(212,175,55,0.35);
}

/* ═══════════════════════════════════════════════════════════
   PREVIEW COMPROVANTE
   ═══════════════════════════════════════════════════════════ */
.cp-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,0.82);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.cp-modal {
  background: #111;
  border: 1px solid rgba(212,175,55,0.25);
  border-radius: 16px;
  width: 340px;
  max-width: 95vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,0.7);
  animation: authCardIn 0.3s cubic-bezier(.34,1.3,.64,1) both;
}

.cp-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}

.cp-modal-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cp-close-btn {
  font-size: 1rem;
  padding: 4px 8px;
  line-height: 1;
}

.cp-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 20px 20px 12px;
  display: flex;
  justify-content: center;
}

.cp-scroll::-webkit-scrollbar { width: 3px; }
.cp-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ── Cupom HTML ───────────────────────────────────────────── */
.cp-cupom {
  width: 240px;
  background: #0f0f0f;
  border: 1px solid rgba(212,175,55,0.15);
  border-radius: 4px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 10px;
  color: #ccc;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}

.cp-header {
  background: var(--gold);
  padding: 14px 10px 12px;
  text-align: center;
}

.cp-logo {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-weight: 700;
  color: #111;
  letter-spacing: 0.08em;
}

.cp-sub {
  font-size: 7px;
  color: #3a2a00;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: 1px;
}

.cp-end {
  font-size: 7px;
  color: #4a3800;
  margin-top: 2px;
  font-family: 'Courier New', monospace;
}

.cp-dashes {
  border-top: 1px dashed rgba(212,175,55,0.25);
  margin: 7px 8px;
}

.cp-meta {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  font-size: 8px;
  color: #888;
}

.cp-ref {
  text-align: center;
  font-size: 7px;
  color: #555;
  padding: 2px 10px 0;
  letter-spacing: 0.05em;
}

.cp-col-head {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  font-size: 8px;
  color: #B8860B;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cp-item {
  padding: 5px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.cp-item-nome {
  font-size: 9.5px;
  font-weight: 700;
  color: #eee;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cp-item-vals {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2px;
}

.cp-item-qtd {
  font-size: 8px;
  color: #777;
}

.cp-desc-tag {
  background: rgba(255,100,50,0.15);
  color: #ff7755;
  font-size: 7px;
  border-radius: 3px;
  padding: 0 3px;
  margin-left: 4px;
}

.cp-item-sub {
  font-size: 9px;
  font-weight: 700;
  color: var(--gold);
}

.cp-resumo {
  padding: 0 10px 4px;
}

.cp-resumo-row {
  display: flex;
  justify-content: space-between;
  font-size: 8.5px;
  color: #888;
  margin-top: 3px;
}

.cp-neg { color: #ff7755; }

.cp-total-block {
  background: rgba(212,175,55,0.08);
  border-top: 1px solid rgba(212,175,55,0.2);
  border-bottom: 1px solid rgba(212,175,55,0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  margin: 4px 0;
}

.cp-total-label {
  font-size: 9px;
  font-weight: 700;
  color: #B8860B;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cp-total-val {
  font-size: 16px;
  font-weight: 900;
  color: var(--gold);
  font-family: 'Inter', sans-serif;
}

.cp-footer {
  text-align: center;
  padding: 4px 10px;
  font-size: 8px;
  color: #888;
  font-style: italic;
}

.cp-footer-sub {
  padding-bottom: 12px;
  color: #555;
}

/* ── Botões do modal ─────────────────────────────────────── */
.cp-modal-footer {
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

.cp-btn-wpp {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px 10px;
  background: #075e54;
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}

.cp-btn-wpp:hover { background: #128c7e; }

.cp-btn-wpp-full { flex: 1; }

.cp-btn-baixar {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px 10px;
  background: rgba(212,175,55,0.1);
  border: 1.5px solid rgba(212,175,55,0.35);
  border-radius: 10px;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}

.cp-btn-baixar:hover {
  background: rgba(212,175,55,0.2);
  border-color: var(--gold);
}

/* ── Step WhatsApp ───────────────────────────────────────── */
.cp-wpp-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px 20px;
}

.cp-wpp-icon { opacity: 0.9; }

.cp-wpp-desc {
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
  max-width: 220px;
}

.cp-wpp-field {
  display: flex;
  align-items: center;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  transition: border-color 0.2s;
}

.cp-wpp-field:focus-within {
  border-color: #25D366;
  box-shadow: 0 0 0 3px rgba(37,211,102,0.12);
}

.cp-wpp-ddi {
  padding: 12px 10px 12px 14px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #25D366;
  border-right: 1px solid var(--border);
  flex-shrink: 0;
}

.cp-wpp-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  padding: 12px 14px;
  font-size: 0.9rem;
  color: var(--text-primary);
}

.cp-wpp-erro {
  font-size: 0.76rem;
  color: #ff6b6b;
  text-align: center;
}

/* ── Botão Concluído na tela de venda ─────────────────────── */
.venda-sucesso-btn-concluido {
  width: 100%;
  padding: 11px;
  background: none;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  margin-top: 4px;
  letter-spacing: 0.04em;
}

.venda-sucesso-btn-concluido:hover {
  border-color: rgba(255,255,255,0.2);
  color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE-FIRST RESPONSIVE — iOS-INSPIRED EXPERIENCE
   Mantém desktop intacto · Adapta mobile como app nativo iPhone
   ═══════════════════════════════════════════════════════════════ */

/* ── Variáveis mobile ────────────────────────────────────────── */
:root {
  --mobile-nav-h: 60px;
  --mob-tab-cinza: rgba(255, 255, 255, 0.42);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

/* ═══════════════════════════════════════════════════════════════
   BOTTOM TAB BAR — iOS style
   ═══════════════════════════════════════════════════════════════ */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 900;
  background: rgba(14, 14, 14, 0.97);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-bottom: var(--safe-bottom);
}

.mobile-bottom-nav-inner {
  display: flex;
  align-items: stretch;
  height: var(--mobile-nav-h);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.mobile-bottom-nav-inner::-webkit-scrollbar { display: none; }

.mob-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 1;
  min-width: 52px;
  padding: 6px 4px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: color 0.18s ease, transform 0.12s ease;
  border-radius: 0;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  letter-spacing: 0;
  font-weight: 400;
  min-height: unset;
}

.mob-tab svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  stroke: currentColor;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mob-tab span {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  line-height: 1;
}

.mob-tab:active {
  color: var(--gold);
  transform: scale(0.94);
}

.mob-tab:active svg {
  transform: scale(0.88);
}

/* Bloqueio de role no bottom nav */
.mob-tab[data-role].role-bloqueado {
  display: none !important;
}

/* ── Active state via :has() — sem JS ───────────────────────── */
body:has(#inicio.active)    .mob-tab[data-section="inicio"],
body:has(#home.active)      .mob-tab[data-section="home"],
body:has(#vendas.active)    .mob-tab[data-section="vendas"],
body:has(#estoque.active)   .mob-tab[data-section="estoque"],
body:has(#crediario.active) .mob-tab[data-section="crediario"],
body:has(#dashboard.active) .mob-tab[data-section="dashboard"],
body:has(#historico.active) .mob-tab[data-section="historico"],
body:has(#resumos.active)   .mob-tab[data-section="resumos"] {
  color: var(--gold);
}

body:has(#inicio.active)    .mob-tab[data-section="inicio"] svg,
body:has(#home.active)      .mob-tab[data-section="home"] svg,
body:has(#vendas.active)    .mob-tab[data-section="vendas"] svg,
body:has(#estoque.active)   .mob-tab[data-section="estoque"] svg,
body:has(#crediario.active) .mob-tab[data-section="crediario"] svg,
body:has(#dashboard.active) .mob-tab[data-section="dashboard"] svg,
body:has(#historico.active) .mob-tab[data-section="historico"] svg,
body:has(#resumos.active)   .mob-tab[data-section="resumos"] svg {
  transform: scale(1.1);
}

/* Indicador superior (traço dourado no tab ativo) */
body:has(#inicio.active)    .mob-tab[data-section="inicio"]::before,
body:has(#home.active)      .mob-tab[data-section="home"]::before,
body:has(#vendas.active)    .mob-tab[data-section="vendas"]::before,
body:has(#estoque.active)   .mob-tab[data-section="estoque"]::before,
body:has(#crediario.active) .mob-tab[data-section="crediario"]::before,
body:has(#dashboard.active) .mob-tab[data-section="dashboard"]::before,
body:has(#historico.active) .mob-tab[data-section="historico"]::before,
body:has(#resumos.active)   .mob-tab[data-section="resumos"]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 2.5px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-bright), var(--gold-dark));
  border-radius: 0 0 3px 3px;
}

/* ═══════════════════════════════════════════════════════════════
   BREAKPOINT PRINCIPAL: ≤ 768px — MOBILE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Mostra bottom nav, esconde top nav */
  .mobile-bottom-nav { display: flex; flex-direction: column; }
  .app-top-nav { display: none !important; }

  /* Padding extra no body para não sobrepor bottom nav */
  body {
    padding-bottom: calc(var(--mobile-nav-h) + var(--safe-bottom) + 4px);
  }

  /* ── Header mobile ─────────────────────────────────────────── */
  .app-header {
    padding: 16px 16px 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .app-brand {
    margin-bottom: 16px;
    gap: 8px;
    flex-shrink: 1;
    min-width: 0;
  }

  .brand-name {
    font-size: 1.35rem;
  }

  .brand-divider {
    height: 18px;
  }

  .brand-sub {
    font-size: 0.58rem;
    letter-spacing: 1.2px;
    display: none; /* Remove no mobile para economizar espaço */
  }

  .auth-user-badge {
    padding: 5px 10px 5px 8px;
    gap: 8px;
    flex-shrink: 0;
  }

  .auth-user-nome {
    max-width: 90px;
    font-size: 0.74rem;
  }

  .auth-user-role {
    font-size: 0.6rem;
  }

  .auth-logout-btn {
    padding: 5px 8px;
    font-size: 0.7rem;
    gap: 4px;
  }

  .auth-logout-btn svg {
    width: 13px;
    height: 13px;
  }

  /* ── Wrapper e seções ──────────────────────────────────────── */
  .app-wrapper {
    padding: 0 10px;
  }

  /* No mobile o fundo da tela é preto: a section vira só um container invisível.
     O cinza (surface) fica exclusivamente nos elementos — cards, métricas, grids. */
  section {
    padding: 18px 14px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  section h2 {
    font-size: 1.05rem;
    margin-bottom: 14px;
    padding-bottom: 10px;
  }

  section h3 {
    font-size: 0.92rem;
    margin: 20px 0 10px;
  }

  .dash-header-row {
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
  }

  .dash-header-row h2 {
    font-size: 1rem;
  }

  .dash-subtitle {
    font-size: 0.72rem;
  }

  /* ── Botões touch-friendly ─────────────────────────────────── */
  button {
    min-height: 40px;
  }

  .btn-primary,
  .btn-ghost,
  .btn-danger {
    min-height: 42px;
    padding: 10px 16px;
  }

  /* ── Inputs — font-size 16px evita zoom no iOS ─────────────── */
  input[type="text"],
  input[type="number"],
  input[type="date"],
  input[type="password"],
  input[type="email"],
  input[type="search"],
  select,
  .auth-input,
  .metas-input,
  .crd-busca-input {
    font-size: 16px !important;
  }

  /* ── Tabelas ───────────────────────────────────────────────── */
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-sm);
  }

  table {
    min-width: 480px;
  }

  th {
    padding: 9px 10px;
    font-size: 0.65rem;
  }

  td {
    padding: 9px 10px;
    font-size: 0.78rem;
  }

  td button {
    padding: 6px 10px;
    font-size: 0.73rem;
    min-height: 32px;
  }

  /* ── Formulários ───────────────────────────────────────────── */
  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 0;
  }

  .form-card {
    padding: 16px 14px 6px;
  }

  /* ── DRAWERS → Bottom Sheets ───────────────────────────────── */
  .est-overlay {
    background: rgba(0, 0, 0, 0.65);
  }

  .est-drawer {
    width: 100vw !important;
    max-width: 100vw !important;
    top: auto !important;
    bottom: 0 !important;
    right: 0 !important;
    height: 94vh;
    max-height: 94vh;
    border-left: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 22px 22px 0 0 !important;
    transform: translateY(105%) !important;
    transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .est-drawer.ativo {
    transform: translateY(0) !important;
    box-shadow: 0 -12px 60px rgba(0, 0, 0, 0.55) !important;
  }

  /* Drag handle nos drawers */
  .est-drawer-header {
    padding-top: 32px !important;
    position: relative;
  }

  .est-drawer-header::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 38px;
    height: 4px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 2px;
  }

  .crd-drawer-wide {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  /* ── Dashboard: headers de gráfico empilham no mobile ──────── */
  .dash-chart-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .grafico-controls {
    width: 100%;
    justify-content: flex-start;
  }

  .grafico-controls .grafico-btn {
    flex: 1;
    text-align: center;
  }

  /* ── Estoque: filtro de status vai abaixo da busca ──────────── */
  .est-controles {
    flex-direction: column;
    align-items: stretch;
  }

  .est-filtro-select {
    width: 100% !important;
    flex: 1 !important;
  }

  /* ── Dashboard KPIs ────────────────────────────────────────── */
  .dash-kpi-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 8px;
  }

  .dash-kpi-card {
    padding: 12px 14px;
    border: 1px solid var(--border);
  }

  .dash-kpi-val {
    font-size: 1.05rem;
  }

  .dash-kpi-label {
    font-size: 0.62rem;
  }

  .dash-kpi-sub {
    font-size: 0.63rem;
  }

  .dash-kpi-op-card {
    padding: 12px 14px;
    gap: 12px;
  }

  .dash-kpi-op-icon {
    width: 38px;
    height: 38px;
  }

  .dash-kpi-op-val {
    font-size: 1.05rem;
  }

  .dash-kpi-op-label {
    font-size: 0.6rem;
  }

  .dash-charts-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .dash-rankings-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .dash-metas-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .dash-comparativos-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .dash-prev-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .dash-estoque-indicadores {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .dash-module-label {
    font-size: 0.66rem;
    margin: 16px 0 6px;
  }

  .dash-chart-panel {
    padding: 14px 14px;
  }

  .dash-ruptura-item {
    grid-template-columns: 1fr auto;
    font-size: 0.75rem;
  }

  .ruptura-info,
  .ruptura-sugestao {
    grid-column: 1 / -1;
    font-size: 0.68rem;
  }

  /* ── Estoque ───────────────────────────────────────────────── */
  /* Padrão (gerente/admin/owner): layout original em 2 colunas. */
  .est-kpi-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  /* Vendedor: card único ocupa a largura toda da tela, dando
     espaço para o minigráfico se estender à direita. */
  body[data-role="vendedor"] .est-kpi-row {
    grid-template-columns: 1fr;
  }

  .est-status-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }

  .est-status-item {
    min-width: unset;
    padding: 10px 8px;
  }

  .est-status-val {
    font-size: 1.3rem;
  }

  .est-status-lbl {
    font-size: 0.58rem;
  }

  .estoque-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .estoque-header h3 {
    font-size: 0.9rem;
  }

  .est-controles {
    width: 100%;
    flex-wrap: nowrap;
    gap: 8px;
  }

  .busca-wrapper {
    max-width: 100% !important;
    flex: 1 !important;
  }

  .est-filtro-select {
    flex: 0 0 auto;
    width: auto !important;
    font-size: 0.78rem !important;
    padding: 9px 28px 9px 10px !important;
  }

  .est-prod-nome {
    max-width: 140px;
    font-size: 0.8rem;
  }

  .est-prod-meta {
    font-size: 0.65rem;
  }

  /* ── PDV — Ponto de Venda ──────────────────────────────────── */
  .pdv-layout {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .pdv-left {
    gap: 10px;
  }

  .pdv-right {
    position: static;
    order: 10;
  }

  .pdv-cart-panel {
    height: auto;
    max-height: none;
    min-height: auto;
  }

  .pdv-cart-lista {
    max-height: 45vh;
    min-height: 80px;
  }

  .pdv-total-val {
    font-size: 1.9rem;
  }

  .pdv-btn-finalizar {
    padding: 15px;
    font-size: 0.95rem;
    border-radius: var(--radius-md);
    letter-spacing: 0.3px;
  }

  .pdv-btn-finalizar kbd {
    display: none;
  }

  /* Formas de pagamento: grade 3 colunas × 2 linhas */
  .pdv-payment-section {
    padding: 12px 14px;
  }

  .pdv-formas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    overflow-x: unset;
    padding-bottom: 0;
  }

  .pdv-forma {
    flex-shrink: unset;
    min-width: unset;
    padding: 12px 6px;
    font-size: 1.5rem;
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }

  .pdv-forma span {
    font-size: 0.72rem;
  }

  /* Quick grid 2 colunas no mobile (2×2 = 4 itens maiores) */
  .pdv-quick-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pdv-quick-card:nth-child(n+5) {
    display: none;
  }

  .pdv-quick-card {
    padding: 12px 10px;
  }

  .pdv-quick-card-nome {
    font-size: 0.75rem;
  }

  .pdv-quick-card-preco {
    font-size: 0.85rem;
  }

  .pdv-quick-card-stock {
    font-size: 0.65rem;
  }

  /* Esconder hints de teclado no mobile */
  .pdv-kbd-hints { display: none; }
  .pdv-search-hint { display: none; }

  /* Search bar */
  .pdv-search-bar {
    padding: 4px 12px;
    box-shadow: 0 0 0 3px var(--purple-glow), var(--shadow-sm);
  }

  .pdv-search-input {
    font-size: 16px !important;
    padding: 12px 0 !important;
  }

  .pdv-search-icon {
    font-size: 1.1rem;
  }

  .pdv-browse-btn {
    width: 36px;
    height: 36px;
  }

  /* Quick add panel */
  .pdv-quick-add {
    border-radius: var(--radius-md);
  }

  .pdv-controls-row {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
  }

  .pdv-add-btn {
    flex: 1;
    min-width: 100%;
    margin: 4px 0 0;
  }

  .pdv-qty-btn {
    width: 40px;
    height: 40px;
  }

  /* Cart head */
  .pdv-cart-head {
    padding: 12px 14px;
  }

  .pdv-cart-title {
    font-size: 0.9rem;
  }

  /* Cart footer */
  .pdv-cart-footer {
    padding: 12px 14px;
    gap: 10px;
  }

  .pdv-total-block {
    padding: 12px 14px;
  }

  /* Cart empty state */
  .pdv-cart-empty {
    padding: 32px 16px;
  }

  /* ── Crediário ─────────────────────────────────────────────── */
  .crd-header-bar {
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
  }

  .crd-kpi-main {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .crd-kpi-main-card {
    padding: 14px 14px;
  }

  .crd-kmain-val {
    font-size: 1.3rem;
  }

  .crd-kmain-label {
    font-size: 0.6rem;
  }

  .crd-kmain-sub {
    font-size: 0.65rem;
  }

  /* Filter tabs: grid 3 colunas no mobile */
  .crd-filter-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    gap: 6px;
    padding-bottom: 0;
    overflow: visible;
    align-items: stretch;
  }

  .crd-filter-tabs > div[style*="flex:1"] { display: none; }

  .crd-tab {
    flex-shrink: unset;
    padding: 8px 6px;
    font-size: 0.7rem;
    min-height: 36px;
    justify-content: center;
    border: 1px solid var(--border);
    background: var(--surface-2s);
  }

  .crd-busca-input {
    grid-column: 1 / -1;
    width: 100% !important;
    font-size: 16px !important;
    padding: 8px 12px;
    box-sizing: border-box;
  }

  /* Card body compacto */
  .crd-card-body {
    gap: 10px;
    padding: 13px 14px 10px 17px;
  }

  .crd-card-right {
    min-width: 90px;
  }

  .crd-card-val-main {
    font-size: 1.1rem;
  }

  .crd-card-name {
    font-size: 0.9rem;
  }

  .crd-card-meta {
    font-size: 0.66rem;
  }

  .crd-card-actions {
    padding: 7px 14px 9px 17px;
    gap: 6px;
    flex-wrap: wrap;
  }

  .crd-btn-wpp,
  .crd-btn-receive,
  .crd-btn-detail {
    padding: 6px 12px;
    font-size: 0.72rem;
    min-height: 34px;
  }

  .crd-kpi-mini-row {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  /* ── Histórico / Painel ────────────────────────────────────── */
  .painel-kpis {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
  }

  .kpi-card {
    padding: 14px 12px;
    gap: 10px;
  }

  .kpi-valor {
    font-size: 1.1rem;
  }

  .kpi-icon {
    width: 36px;
    height: 36px;
    font-size: 0.85rem;
  }

  .painel-filtros {
    flex-direction: column;
    align-items: stretch;
    padding: 14px;
    gap: 10px;
  }

  .filtro-group {
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }

  .filtro-group input[type="date"],
  .filtro-group select {
    width: 100%;
    font-size: 16px !important;
  }

  .filtro-actions {
    width: 100%;
  }

  .filtro-actions button {
    width: 100%;
    justify-content: center;
  }

  .hist-periodo-bar {
    gap: 4px;
    margin-bottom: 16px;
  }

  .hist-periodo-btn {
    padding: 5px 10px;
    font-size: 0.7rem;
  }

  /* ── Home page (admin) e Início (vendedor) ─────────────────── */
  section#home,
  section#inicio {
    padding: 28px 14px 48px;
    max-width: 100%;
  }

  .home-live-bar {
    margin-bottom: 28px;
    padding-bottom: 12px;
  }

  .home-hero {
    margin-bottom: 20px;
  }

  .home-amount-value {
    font-size: clamp(2.8rem, 14vw, 5rem);
    letter-spacing: -1px;
  }

  .home-stat-trio {
    margin-bottom: 28px;
    padding: 18px 0;
  }

  .home-stat-val {
    font-size: clamp(1rem, 3.5vw, 1.4rem);
  }

  .home-progress-wrap {
    margin-bottom: 32px;
  }

  .home-actions-grid {
    gap: 8px;
    margin-bottom: 20px;
  }

  .home-action-card {
    padding: 14px 16px;
    gap: 12px;
  }

  .home-action-name {
    font-size: 0.88rem;
  }

  .home-action-desc {
    font-size: 0.67rem;
  }

  .home-formas-hoje {
    gap: 6px;
  }

  .home-forma-pill {
    padding: 4px 10px;
    font-size: 0.72rem;
  }

  /* ── Modais ────────────────────────────────────────────────── */
  .alert-modal {
    width: min(340px, 92vw);
    padding: 24px 18px 20px;
    border-radius: var(--radius-lg);
  }

  .metas-modal {
    max-width: calc(100vw - 20px);
    max-height: 92vh;
    overflow-y: auto;
  }

  .metas-modal-header {
    padding: 20px 18px 16px;
  }

  .metas-modal-body {
    padding: 14px 18px;
    gap: 12px;
  }

  .metas-modal-footer {
    padding: 12px 18px 16px;
  }

  .metas-input {
    padding: 11px 14px;
  }

  /* Modal venda sucesso */
  .venda-sucesso-modal {
    width: 95vw;
    padding: 28px 20px 22px;
    border-radius: 18px;
  }

  .venda-sucesso-valor {
    font-size: 2.1rem;
  }

  .venda-sucesso-btn-comp,
  .venda-sucesso-btn-nova {
    padding: 11px 8px;
    font-size: 0.76rem;
    min-height: 44px;
  }

  .venda-sucesso-btn-concluido {
    min-height: 40px;
  }

  /* Comprovante */
  .cp-modal {
    width: 96vw;
    max-height: 92vh;
    border-radius: 16px;
  }

  /* ── Sync status ───────────────────────────────────────────── */
  .sync-status {
    top: auto;
    bottom: calc(var(--mobile-nav-h) + var(--safe-bottom) + 10px);
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.67rem;
    padding: 5px 14px;
    white-space: nowrap;
  }

} /* fim @media ≤ 768px */

/* ═══════════════════════════════════════════════════════════════
   BREAKPOINT: ≤ 480px — TELEFONES MENORES (iPhone SE, etc.)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  section {
    padding: 14px 12px;
  }

  .app-wrapper {
    padding: 0 8px;
  }

  .app-header {
    padding: 12px 10px 0;
  }

  .brand-name {
    font-size: 1.2rem;
  }

  /* Bottom nav: labels menores */
  .mob-tab {
    min-width: 46px;
  }

  .mob-tab span {
    font-size: 9px;
  }

  .mob-tab svg {
    width: 20px;
    height: 20px;
  }

  /* KPIs */
  .dash-kpi-val {
    font-size: 0.95rem;
  }

  .crd-kmain-val {
    font-size: 1.1rem;
  }

  /* PDV */
  .pdv-quick-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pdv-forma {
    min-width: unset;
    padding: 11px 4px;
    font-size: 1.4rem;
  }

  /* Dashboard comparativos: 1 coluna */
  .dash-comparativos-grid {
    grid-template-columns: 1fr;
  }

  .dash-prev-grid {
    grid-template-columns: 1fr;
  }

  /* Crediário */
  .crd-kpi-main {
    grid-template-columns: 1fr 1fr;
  }

  .crd-kmain-card {
    padding: 12px 10px;
  }

  /* Auth */
  .auth-card {
    padding: 32px 24px 28px;
  }

  .auth-logo-text {
    font-size: 1.75rem;
  }

  /* Modais */
  .venda-sucesso-modal {
    padding: 24px 16px 18px;
  }

  .venda-sucesso-valor {
    font-size: 1.85rem;
  }

}

/* ═══════════════════════════════════════════════════════════════
   iOS PWA / Standalone mode
   ═══════════════════════════════════════════════════════════════ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width: 768px) {
    .mobile-bottom-nav {
      padding-bottom: env(safe-area-inset-bottom);
    }

    body {
      padding-bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom) + 4px);
    }
  }
}

/* ═══════════════════════════════════════════════════════════════
   PREFERS REDUCED MOTION — acessibilidade
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.1ms !important;
  }

  .brand-name,
  .home-amount-value,
  .auth-logo-text,
  .venda-sucesso-valor {
    animation: none !important;
    background-position: 0 center !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   DESKTOP REFORÇO — garante que bottom nav nunca aparece
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  .mobile-bottom-nav {
    display: none !important;
  }

  .app-top-nav {
    display: flex !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PATCH — Reset: impede que nav/nav button contaminem o bottom nav
   O seletor genérico "nav" e "nav button" afetam TODOS os <nav>,
   incluindo .mobile-bottom-nav. Estes overrides corrigem isso.
   ═══════════════════════════════════════════════════════════════ */

/* Reset do container bottom nav */
.mobile-bottom-nav {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: rgba(14, 14, 14, 0.97) !important;
  border: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 0 !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  flex-direction: column !important;
}

/* Reset dos botões do bottom nav */
.mob-tab,
.mobile-bottom-nav button {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  min-width: 52px !important;
  padding: 6px 4px !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  color: rgba(255, 255, 255, 0.35) !important;
  box-shadow: none !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  white-space: nowrap !important;
  transition: color 0.18s ease !important;
  min-height: unset !important;
}

/* Hover reset (não deve ter background dourado no bottom nav) */
.mob-tab:hover,
.mobile-bottom-nav button:hover {
  background: none !important;
  border-color: transparent !important;
  color: rgba(255, 255, 255, 0.6) !important;
  box-shadow: none !important;
}

/* Active reset (JS adiciona .active; não deve aplicar estilo desktop) */
.mob-tab.active,
.mobile-bottom-nav button.active {
  background: none !important;
  color: var(--gold) !important;
  box-shadow: none !important;
}

/* Active via :has() — mantém cor dourada nos ícones/textos */
body:has(#inicio.active)    .mob-tab[data-section="inicio"],
body:has(#home.active)      .mob-tab[data-section="home"],
body:has(#vendas.active)    .mob-tab[data-section="vendas"],
body:has(#estoque.active)   .mob-tab[data-section="estoque"],
body:has(#crediario.active) .mob-tab[data-section="crediario"],
body:has(#dashboard.active) .mob-tab[data-section="dashboard"],
body:has(#historico.active) .mob-tab[data-section="historico"] {
  color: var(--gold) !important;
}

/* SVGs dentro dos mob-tabs */
.mob-tab svg,
.mobile-bottom-nav button svg {
  width: 22px !important;
  height: 22px !important;
  flex-shrink: 0 !important;
  stroke: currentColor !important;
  fill: none !important;
  display: block !important;
}

.mob-tab span,
.mobile-bottom-nav button span {
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  display: block !important;
}

/* ── Fix: brand-divider não deve aparecer sem brand-sub ──────── */
@media (max-width: 768px) {
  .brand-divider {
    display: none !important;
  }

  /* Header mais compacto — o topo respeita a barra de status (notch / status bar).
     max() garante um respiro mínimo mesmo onde env(safe-area-inset-top) = 0px
     (Android, navegador desktop emulando mobile, iPhones sem notch). */
  .app-header {
    padding: calc(12px + max(var(--safe-top), var(--mobile-status-gap))) 14px 0 !important;
  }

  /* Remove margem excedente da brand no layout mobile */
  .app-brand {
    margin-bottom: 14px !important;
  }

  /* ── Carrinho: layout normal no mobile, sem full-bleed ─────── */
  .pdv-right {
    position: static !important;
    order: 10 !important;
    margin-left:  0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  .pdv-cart-panel {
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--border) !important;
  }

  .pdv-total-block {
    border-radius: var(--radius-sm) !important;
  }

  .pdv-btn-finalizar {
    border-radius: var(--radius-md) !important;
  }
}

/* ============================================================
   PWA INSTALL PROMPT — iOS
   ============================================================ */

.pwa-overlay {
  position: fixed;
  inset: 0;
  z-index: 99998;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}

.pwa-overlay.pwa-visivel {
  opacity: 1;
}

.pwa-overlay.pwa-saindo {
  opacity: 0;
}

.pwa-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Sheet desliza de baixo para cima */
.pwa-sheet {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  max-height: 92dvh;
  overflow-y: auto;
  background: #111;
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-bottom: none;
  border-radius: 22px 22px 0 0;
  padding: 0 0 env(safe-area-inset-bottom, 16px);
  box-shadow: 0 -8px 48px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(212, 175, 55, 0.06);
  transform: translateY(100%);
  transition: transform 0.4s var(--ease);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.pwa-overlay.pwa-visivel .pwa-sheet {
  transform: translateY(0);
}

.pwa-overlay.pwa-saindo .pwa-sheet {
  transform: translateY(100%);
}

/* Scrollbar do sheet */
.pwa-sheet::-webkit-scrollbar { display: none; }

/* Pill de arraste no topo */
.pwa-pill {
  width: 40px;
  height: 4px;
  background: var(--border-hover);
  border-radius: 2px;
  margin: 12px auto 0;
}

/* Header */
.pwa-header {
  padding: 20px 24px 0;
  text-align: center;
}

.pwa-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  background: transparent;
  border: none;
  border-radius: 18px;
  margin: 16px auto 14px;
  overflow: hidden;
}

.pwa-logo-img {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  object-fit: cover;
  display: block;
}

.pwa-icon {
  font-size: 1.8rem;
  line-height: 1;
}

.pwa-titulo {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}

.pwa-subtitulo {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0;
}

/* Corpo */
.pwa-corpo {
  padding: 20px 20px 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Card de benefícios */
.pwa-info-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
}

.pwa-info-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 0;
  line-height: 1.35;
}
.pwa-info-row + .pwa-info-row {
  border-top: 1px solid rgba(255,255,255,0.05);
}

.pwa-info-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: var(--gold-bright);
  background: linear-gradient(135deg, rgba(212,175,55,0.16), rgba(212,175,55,0.04));
  border: 1px solid rgba(212,175,55,0.26);
}
.pwa-info-icon svg { width: 18px; height: 18px; }
.pwa-info-txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.pwa-info-txt strong {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.1px;
}
.pwa-info-txt span {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 1px;
}

.pwa-obs {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-align: center;
  margin: 0;
  padding: 0 8px;
}

/* Botões */
.pwa-acoes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0 8px;
}

.pwa-btn-primary {
  width: 100%;
  padding: 14px;
  background: var(--gold);
  color: #000;
  font-size: 0.9rem;
  font-weight: 700;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: var(--transition);
}

.pwa-btn-primary:active {
  background: var(--gold-bright);
  transform: scale(0.98);
}

.pwa-btn-secondary {
  width: 100%;
  padding: 12px;
  background: var(--surface-3);
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition);
}

.pwa-btn-secondary:active {
  background: var(--surface-1);
}

.pwa-btn-ghost {
  width: 100%;
  padding: 10px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.78rem;
  border: none;
  cursor: pointer;
  transition: color 0.2s;
}

.pwa-btn-ghost:active {
  color: var(--text-secondary);
}

/* Tutorial */
.pwa-tutorial {
  padding: 16px 20px 8px;
}

.pwa-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 20px;
}

.pwa-step {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  position: relative;
}

.pwa-step:last-child {
  border-bottom: none;
}

/* Linha conectora entre steps */
.pwa-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 15px;
  top: 42px;
  bottom: -1px;
  width: 2px;
  background: linear-gradient(to bottom, var(--gold-subtle), transparent);
}

.pwa-step-num {
  width: 32px;
  height: 32px;
  min-width: 32px;
  background: var(--gold-subtle);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gold);
  flex-shrink: 0;
}

.pwa-step-num-ok {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.35);
  color: var(--green);
  font-size: 0.9rem;
}

.pwa-step-final {
  background: rgba(34, 197, 94, 0.04);
  border-radius: var(--radius-sm);
  padding: 14px 10px;
  margin-top: 4px;
}

.pwa-step-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 4px;
}

.pwa-step-body strong {
  font-size: 0.88rem;
  color: var(--text-primary);
  font-weight: 600;
}

.pwa-step-body span {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.45;
}

/* Ícone do botão compartilhar do Safari */
.pwa-step-icon-safari {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: #007AFF;
  border-radius: 10px;
  color: #fff;
  margin-top: 8px;
}

/* Badge visual "Adicionar à Tela de Início" */
.pwa-step-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 12px;
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 6px;
  width: fit-content;
}

.pwa-step-img {
  width: 100%;
  max-width: 280px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  margin-top: 10px;
  display: block;
  object-fit: cover;
}

/* ============================================
   CONFIGURAÇÕES
   ============================================ */

/* ══════════ Banner de cabeçalho reutilizável (desktop) ══════════ */
.page-banner {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  padding: 22px 26px;
  border-radius: 16px;
  margin-bottom: 20px;
  background:
    linear-gradient(120deg, rgba(212,175,55,0.12), rgba(212,175,55,0.02) 45%, transparent),
    var(--surface-1);
  border: 1px solid rgba(212,175,55,0.28);
}
.page-banner::after {
  content: '';
  position: absolute;
  top: -60%; right: -8%;
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(212,175,55,0.16), transparent 70%);
  pointer-events: none;
}
.page-banner-ico {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 15px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1A1A1A;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-dark));
  box-shadow: 0 6px 20px rgba(212,175,55,0.4), inset 0 1px 2px rgba(255,255,255,0.5);
}
.page-banner-ico svg { width: 26px; height: 26px; }
.page-banner-text { position: relative; min-width: 0; }
.page-banner-text h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0;
  padding: 0;
  border-bottom: none;
}
.page-banner-text h2::before { display: none; }
.page-banner-text .dash-subtitle { color: var(--text-secondary); margin-top: 3px; }
.page-banner-actions {
  position: relative;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  /* No mobile o banner some visualmente — só os botões de ação permanecem */
  .page-banner {
    background: none;
    border: none;
    padding: 0;
    border-radius: 0;
    margin-bottom: 16px;
  }
  .page-banner::after,
  .page-banner-ico,
  .page-banner-text { display: none; }
  /* Histórico não tem botões de ação — some por completo no mobile */
  #historico .page-banner { display: none; }

  /* Ações ocupam a largura toda e alinham com os cards abaixo:
     ícone quadrado à esquerda, ação principal preenchendo o resto. */
  .page-banner-actions {
    margin-left: 0;
    width: 100%;
    gap: 10px;
  }
  .page-banner-actions .btn-ghost {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    line-height: 1;
    border-radius: 12px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    color: var(--text-secondary);
  }
  .page-banner-actions .btn-ghost:active {
    background: var(--surface-3);
    color: var(--gold);
  }
  .page-banner-actions .btn-primary {
    flex: 1;
    height: 46px;
    padding: 0;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.cfg-header {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 26px;
  border-radius: 16px;
  margin-bottom: 20px;
  background:
    linear-gradient(120deg, rgba(212,175,55,0.12), rgba(212,175,55,0.02) 45%, transparent),
    var(--surface-1);
  border: 1px solid rgba(212,175,55,0.28);
}
.cfg-header::after {
  content: '';
  position: absolute;
  top: -60%; right: -10%;
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(212,175,55,0.18), transparent 70%);
  pointer-events: none;
}

.cfg-header-icon {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 15px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1A1A1A;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-dark));
  box-shadow: 0 6px 20px rgba(212,175,55,0.4), inset 0 1px 2px rgba(255,255,255,0.5);
}
.cfg-header-icon svg { width: 26px; height: 26px; }

.cfg-header > div { position: relative; }

.cfg-header h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0;
  padding: 0;
  border-bottom: none;
}
.cfg-header h2::before { display: none; }
.cfg-header .dash-subtitle { color: var(--text-secondary); margin-top: 3px; }

@media (max-width: 540px) {
  .cfg-header { padding: 20px 18px; gap: 14px; }
  .cfg-header-icon { width: 46px; height: 46px; border-radius: 13px; }
  .cfg-header-icon svg { width: 23px; height: 23px; }
  .cfg-header h2 { font-size: 1.4rem; }
}

/* ══════════ HERO: Perfil + Plano ══════════ */
.cfg-hero {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 760px) {
  .cfg-hero { grid-template-columns: 1fr; }
}

.cfg-profile-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 22px;
  border-radius: var(--radius-md);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(212,175,55,0.10), transparent 60%),
    var(--surface-1);
  border: 1px solid rgba(212,175,55,0.22);
}
.cfg-profile-glow {
  position: absolute;
  top: -40%; right: -20%;
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(212,175,55,0.16), transparent 70%);
  pointer-events: none;
}
.cfg-avatar-xl {
  position: relative;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 800;
  color: #1A1A1A;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-dark));
  box-shadow: 0 6px 22px rgba(212,175,55,0.35), inset 0 1px 2px rgba(255,255,255,0.4);
  letter-spacing: -1px;
}
.cfg-profile-info { position: relative; min-width: 0; }
.cfg-profile-nome {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cfg-profile-email {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 2px 0 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cfg-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px 4px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--gold-bright);
  background: rgba(212,175,55,0.12);
  border: 1px solid rgba(212,175,55,0.35);
}
.cfg-role-badge svg { width: 13px; height: 13px; }

/* Card de plano */
.cfg-plan-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px;
  border-radius: var(--radius-md);
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(212,175,55,0.10), transparent 55%),
    var(--surface-1);
  border: 1px solid rgba(212,175,55,0.22);
}
.cfg-plan-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.cfg-plan-head { display: flex; align-items: center; gap: 12px; }
.cfg-plan-ico {
  width: 42px; height: 42px;
  border-radius: 11px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-bright);
  background: linear-gradient(135deg, rgba(212,175,55,0.18), rgba(212,175,55,0.05));
  border: 1px solid rgba(212,175,55,0.3);
}
.cfg-plan-ico svg { width: 22px; height: 22px; }
.cfg-plan-nome {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.2px;
}
.cfg-plan-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  margin-top: 3px;
}
.cfg-plan-dot {
  width: 7px; height: 7px; border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
}
.cfg-plan-green  .cfg-plan-status { color: var(--green); }
.cfg-plan-orange .cfg-plan-status { color: var(--warning); }
.cfg-plan-red    .cfg-plan-status { color: var(--red); }
.cfg-plan-gold   .cfg-plan-status { color: var(--gold); }
.cfg-plan-gray   .cfg-plan-status { color: var(--text-muted); }
.cfg-plan-green  .cfg-plan-dot { background: var(--green); }
.cfg-plan-orange .cfg-plan-dot { background: var(--warning); }
.cfg-plan-red    .cfg-plan-dot { background: var(--red); }
.cfg-plan-gold   .cfg-plan-dot { background: var(--gold); }
.cfg-plan-gray   .cfg-plan-dot { background: var(--text-muted); box-shadow: none; }

.cfg-plan-edit {
  width: 30px; height: 30px;
  flex-shrink: 0;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
}
.cfg-plan-edit:hover { color: var(--gold); border-color: rgba(212,175,55,0.4); background: rgba(212,175,55,0.08); }
.cfg-plan-edit svg { width: 15px; height: 15px; }

.cfg-plan-venc {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}
.cfg-plan-venc-lbl {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  margin-bottom: 3px;
}
.cfg-plan-venc-data {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}
.cfg-plan-dias {
  font-size: 0.78rem;
  font-weight: 700;
  padding-bottom: 2px;
}
.cfg-plan-green  .cfg-plan-dias { color: var(--green); }
.cfg-plan-orange .cfg-plan-dias { color: var(--warning); }
.cfg-plan-red    .cfg-plan-dias { color: var(--red); }
.cfg-plan-gold   .cfg-plan-dias { color: var(--gold); }
.cfg-plan-gray   .cfg-plan-dias { color: var(--text-muted); }

/* Vitalício: vencimento "NUNCA" em dourado, sem cara de data */
.cfg-plan-gold .cfg-plan-venc-data {
  color: var(--gold);
  letter-spacing: 0.06em;
}

.cfg-plan-bar {
  height: 7px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}
.cfg-plan-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.5s var(--ease);
}
.cfg-plan-green  .cfg-plan-bar-fill { background: linear-gradient(90deg, var(--green), #16A34A); }
.cfg-plan-orange .cfg-plan-bar-fill { background: linear-gradient(90deg, var(--warning), #D97706); }
.cfg-plan-red    .cfg-plan-bar-fill { background: linear-gradient(90deg, var(--red), #B91C1C); }
.cfg-plan-gold   .cfg-plan-bar-fill { background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-bright)); }
.cfg-plan-gray   .cfg-plan-bar-fill { background: var(--border-hover); }

.cfg-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 20px 22px;
  margin-bottom: 16px;
  transition: border-color 0.2s var(--ease);
}
.cfg-card:hover { border-color: rgba(212,175,55,0.22); }

.cfg-card-head {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}
.cfg-card-ico {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  background: linear-gradient(135deg, rgba(212,175,55,0.14), rgba(212,175,55,0.04));
  border: 1px solid rgba(212,175,55,0.24);
}
.cfg-card-ico svg { width: 20px; height: 20px; }
.cfg-card-ico-danger {
  color: var(--red);
  background: rgba(239,68,68,0.10);
  border-color: rgba(239,68,68,0.28);
}

.cfg-input-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.cfg-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
  letter-spacing: 0.01em;
}

.cfg-card-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 0;
  line-height: 1.5;
}

.cfg-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}

@media (max-width: 540px) {
  .cfg-field-row { grid-template-columns: 1fr; }
}

.cfg-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 5px;
  display: block;
}

.cfg-input {
  width: 100%;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.88rem;
  padding: 9px 12px;
  outline: none;
  transition: border-color 0.15s;
}

.cfg-input:focus {
  border-color: var(--gold);
}

.cfg-input-locked {
  opacity: 0.55;
  cursor: not-allowed;
  user-select: none;
}

.cfg-save-btn {
  white-space: nowrap;
  flex-shrink: 0;
  padding: 9px 16px;
  font-size: 0.85rem;
}

.cfg-senha-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}

.cfg-erro {
  background: var(--red-subtle);
  border: 1px solid rgba(239,68,68,0.25);
  border-radius: var(--radius-sm);
  color: var(--red);
  font-size: 0.8rem;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Zona de perigo */
.cfg-card-danger {
  border-color: rgba(239,68,68,0.22);
  background: rgba(239,68,68,0.04);
}

.cfg-danger-title {
  color: var(--red);
}

.cfg-danger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
}

.cfg-danger-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 3px;
}

.cfg-danger-desc {
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.cfg-danger-btn {
  white-space: nowrap;
  flex-shrink: 0;
  padding: 9px 16px;
  font-size: 0.85rem;
}

/* ── Modal limpar estoque com countdown ── */
.cfg-limpar-modal {
  text-align: center;
  padding: 28px 24px 22px;
  max-width: 340px;
}

.cfg-limpar-icon {
  font-size: 2rem;
  color: var(--red);
  margin-bottom: 8px;
  line-height: 1;
}

.cfg-limpar-titulo {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.cfg-limpar-msg {
  font-size: 0.83rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 20px;
}

.cfg-limpar-msg strong {
  color: var(--text-primary);
}

.cfg-limpar-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 16px;
  min-height: 18px;
}

/* Anel de countdown */
.cfg-countdown-wrap {
  position: relative;
  width: 60px;
  height: 60px;
  margin: 0 auto 12px;
}

.cfg-countdown-ring {
  width: 60px;
  height: 60px;
  transform: rotate(-90deg);
}

.cfg-countdown-track {
  fill: none;
  stroke: var(--surface-3);
  stroke-width: 3;
}

.cfg-countdown-fill {
  fill: none;
  stroke: var(--red);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 113.1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.9s linear;
}

.cfg-countdown-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--red);
}

#cfgLimparOkBtn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.cfg-danger-divider {
  border: none;
  border-top: 1px solid rgba(239,68,68,0.15);
  margin: 16px 0;
}

#cfgHistoricoOkBtn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════
   SELETOR DE LOJA (owner)
   ═══════════════════════════════════════════════════ */

.loja-overlay {
  position: fixed;
  inset: 0;
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 60% 40%, #1a1400 0%, #0a0a0a 70%);
  animation: authOverlayIn 0.35s ease;
}

.loja-overlay.loja-saindo {
  animation: authOut 0.4s ease forwards;
  pointer-events: none;
}

.loja-card {
  background: #111;
  border: 1px solid rgba(212,175,55,0.25);
  border-radius: 18px;
  padding: 44px 40px 36px;
  width: 420px;
  max-width: 92vw;
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: authCardIn 0.45s cubic-bezier(.34,1.3,.64,1) 0.05s both;
  box-shadow: 0 32px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(212,175,55,0.08);
  position: relative;
  overflow: hidden;
}

.loja-card::before {
  content: '';
  position: absolute;
  top: -60px; left: -60px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(212,175,55,0.07) 0%, transparent 70%);
  pointer-events: none;
}

.loja-logo {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.loja-logo-text {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  background: linear-gradient(135deg, #D4AF37 0%, #f5d878 50%, #b8962e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.loja-logo-sub {
  font-size: 0.72rem;
  color: rgba(212,175,55,0.6);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.loja-saudacao {
  font-size: 0.95rem;
  color: #e0e0e0;
  margin: 0;
  font-weight: 600;
}

.loja-instrucao {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.45);
  margin: 0;
}

.loja-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 360px;
  overflow-y: auto;
}

.loja-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(212,175,55,0.15);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.18s, border-color 0.18s, transform 0.12s;
  color: inherit;
}

.loja-item:hover {
  background: rgba(212,175,55,0.08);
  border-color: rgba(212,175,55,0.4);
}

.loja-item:active {
  transform: scale(0.98);
}

.loja-item-icone {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.loja-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.loja-item-nome {
  font-size: 0.95rem;
  font-weight: 700;
  color: #f0f0f0;
}

.loja-item-id {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.35);
  font-family: monospace;
  letter-spacing: 0.04em;
}

.loja-item-arrow {
  color: rgba(212,175,55,0.5);
  flex-shrink: 0;
}

.loja-vazia {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.35);
  text-align: center;
  padding: 20px 0;
  margin: 0;
}

/* ============================================================
   MÓDULO DESPESAS
   ============================================================ */

/* Header */
.desp-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
  flex-wrap: wrap;
}

/* KPIs */
.desp-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
@media (max-width: 640px) {
  .desp-kpi-row { grid-template-columns: repeat(2, 1fr); }
}

.desp-kpi-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.desp-kpi-val {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.desp-kpi-lbl {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.desp-kpi-card.kpi-gold  .desp-kpi-val { color: var(--gold); }
.desp-kpi-card.kpi-warn  .desp-kpi-val { color: var(--warning); }
.desp-kpi-card.kpi-red   .desp-kpi-val { color: var(--red); }
.desp-kpi-card.kpi-green .desp-kpi-val { color: var(--green); }

.desp-kpi-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
.desp-kpi-ico {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.desp-kpi-ico svg { width: 16px; height: 16px; }
.desp-kpi-card.kpi-gold  .desp-kpi-ico { background: rgba(212,175,55,0.12); color: var(--gold); }
.desp-kpi-card.kpi-warn  .desp-kpi-ico { background: rgba(245,158,11,0.12); color: var(--warning); }
.desp-kpi-card.kpi-red   .desp-kpi-ico { background: rgba(239,68,68,0.12);  color: var(--red); }
.desp-kpi-card.kpi-green .desp-kpi-ico { background: rgba(34,197,94,0.12);  color: var(--green); }
.desp-kpi-head .desp-kpi-lbl { margin: 0; }

/* Alerta de vencimentos */
.desp-alerta-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 0.85rem;
  color: var(--red);
  margin-bottom: 14px;
}
.desp-alerta-icon { font-size: 1rem; }

/* Filter tabs */
.desp-filter-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.desp-tab {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 7px 12px;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.desp-tab:hover { border-color: var(--gold); color: var(--text-primary); }
.desp-tab.ativo {
  background: var(--gold-subtle);
  border-color: var(--gold);
  color: var(--gold);
}
.desp-tab-ct {
  background: var(--red);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 99px;
  padding: 1px 6px;
  min-width: 18px;
  text-align: center;
}
.desp-select-cat {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.8rem;
  padding: 7px 10px;
  cursor: pointer;
  outline: none;
}
.desp-select-cat:focus { border-color: var(--gold); }

/* Feed */
.desp-feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Card de despesa */
.desp-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: border-color 0.2s;
}
.desp-card:hover { border-color: var(--border-hover); }
.desp-card.desp-card-atrasado { border-color: rgba(239,68,68,0.35); }

.desp-card-icone {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.desp-card-body { flex: 1; min-width: 0; }
.desp-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.desp-card-nome {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.desp-card-valor {
  font-size: 1rem;
  font-weight: 800;
  color: var(--gold);
  white-space: nowrap;
}
.desp-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.desp-cat-tag {
  font-size: 0.7rem;
  font-weight: 700;
  border: 1px solid;
  border-radius: 99px;
  padding: 2px 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.desp-card-venc {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.desp-rec-badge {
  font-size: 0.7rem;
  color: var(--info);
  background: rgba(59,130,246,0.1);
  border-radius: 99px;
  padding: 2px 7px;
}
.desp-card-obs {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
  width: 100%;
}

/* Ações do card */
.desp-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.desp-status-badge {
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 99px;
  padding: 3px 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.desp-st-pago     { background: var(--green-subtle);           color: var(--green);   }
.desp-st-pendente { background: rgba(245,158,11,0.12);         color: var(--warning); }
.desp-st-atrasado { background: var(--red-subtle);             color: var(--red);     }
.desp-st-hoje     { background: rgba(59,130,246,0.12);         color: var(--info);    }

.desp-btn-pagar {
  background: var(--green-subtle);
  color: var(--green);
  border: 1px solid rgba(34,197,94,0.3);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition);
}
.desp-btn-pagar:hover { background: rgba(34,197,94,0.2); }

.desp-btn-edit {
  background: var(--surface-3);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  padding: 4px 9px;
  cursor: pointer;
  transition: var(--transition);
}
.desp-btn-edit:hover { color: var(--gold); border-color: var(--gold); }

.desp-btn-del {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  padding: 4px 9px;
  cursor: pointer;
  transition: var(--transition);
}
.desp-btn-del:hover { color: var(--red); border-color: var(--red); }

/* Empty state */
.desp-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}
.desp-empty-icon {
  font-size: 2.5rem;
  opacity: 0.3;
  margin-bottom: 12px;
}
.desp-empty p { font-size: 0.9rem; margin-bottom: 6px; }
.desp-empty small { font-size: 0.78rem; }

/* Toggle recorrente */
.desp-recorrente-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.desp-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.desp-toggle-wrap input[type="checkbox"] { display: none; }
.desp-toggle-track {
  width: 38px;
  height: 22px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 99px;
  position: relative;
  transition: background 0.2s;
}
.desp-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  background: var(--text-muted);
  border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
}
.desp-toggle-wrap input:checked ~ .desp-toggle-track { background: var(--gold-subtle); border-color: var(--gold); }
.desp-toggle-wrap input:checked ~ .desp-toggle-track .desp-toggle-thumb { transform: translateX(16px); background: var(--gold); }
.desp-toggle-label { font-size: 0.85rem; color: var(--text-secondary); }

/* Responsivo */
@media (max-width: 520px) {
  .desp-card { flex-direction: column; }
  .desp-card-actions { flex-direction: row; justify-content: flex-start; }
  .desp-card-top { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   HOME — MOBILE (≤768px): layout em coluna única, dois mundos
   ============================================================ */

/* Estilos base usados em ambos os layouts */
.home-date { font-size: 0.8rem; font-weight: 600; color: var(--gold); letter-spacing: 0.3px; text-transform: capitalize; }
.home-live-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0; box-shadow: 0 0 0 0 rgba(34,197,94,0.4); animation: homePulseGreen 2s ease-out infinite; }
@keyframes homePulseGreen { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); } 70% { box-shadow: 0 0 0 7px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
.home-live-right { display: flex; align-items: center; gap: 6px; }
.home-clock { font-size: 0.8rem; font-weight: 600; color: var(--gold); letter-spacing: 1.5px; font-variant-numeric: tabular-nums; }
.home-eye-btn { background: none; border: none; padding: 4px 6px; cursor: pointer; color: var(--text-muted); line-height: 0; border-radius: 6px; transition: color 0.15s, background 0.15s; flex-shrink: 0; }
.home-eye-btn:hover { color: var(--gold); background: var(--gold-subtle); }
.home-eye-btn.oculto { color: var(--gold-dark); }

.home-hero-eyebrow { font-size: 0.62rem; font-weight: 700; letter-spacing: 3px; color: var(--gold-dark); text-transform: uppercase; margin-bottom: 12px; }
.home-hero-amount { display: inline-flex; align-items: flex-start; gap: 6px; line-height: 1; margin-bottom: 12px; }
.home-amount-prefix { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.1rem, 2.5vw, 1.6rem); font-weight: 600; color: var(--gold-dark); margin-top: clamp(0.5rem, 1.2vw, 1rem); }
.home-amount-value { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(3.2rem, 9vw, 6.5rem); font-weight: 700; letter-spacing: -2px; line-height: 1; background: linear-gradient(90deg, var(--gold-dark) 0%, var(--gold-bright) 30%, var(--gold) 50%, var(--gold-bright) 70%, var(--gold-dark) 100%); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: goldShimmer 5s linear infinite; }
.home-hero-label { font-size: 0.72rem; font-weight: 500; letter-spacing: 1.5px; color: var(--text-muted); text-transform: uppercase; }
.home-progress-pct { font-size: 0.7rem; font-weight: 700; color: var(--gold); }
.home-progress-meta { font-size: 0.7rem; color: var(--text-muted); letter-spacing: 0.2px; }
.home-progress-fill { height: 100%; background: linear-gradient(90deg, var(--gold-dark), var(--gold-bright)); border-radius: 2px; transition: width 1s cubic-bezier(0.16,1,0.3,1); }

.home-formas-card { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; margin-top: 4px; }
.home-formas-hoje { display: flex; flex-direction: column; gap: 0; }
.home-formas-vazio { font-size: 0.72rem; color: var(--text-muted); opacity: 0.6; text-align: center; padding: 4px 0; }
.home-forma-pill { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.04); background: none; border-left: none; border-top: none; border-right: none; border-radius: 0; font-size: 0.8rem; }
.home-forma-pill:last-child { border-bottom: none; padding-bottom: 0; }
.home-forma-pill-vazio { opacity: 0.35; }
.home-forma-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.home-forma-nome { flex: 1; color: var(--text-secondary); font-weight: 500; font-size: 0.78rem; }
.home-forma-val { color: var(--gold); font-weight: 700; font-size: 0.78rem; white-space: nowrap; }
.home-forma-val-zero { color: var(--text-muted) !important; font-weight: 500; }

/* Grade de ações rápidas — 4 botões em linha (mobile only, display definido no media query) */
.home-quick-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 20px;
  justify-items: center;
}
/* estilo app de banco: só o ícone-quadrado + label, sem fundo externo */
.home-qbtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px 2px;
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
  min-height: unset;
}
.home-qbtn:active { transform: scale(0.92); opacity: 0.75; }

/* quadrado arredondado — o "ícone de app" */
.home-qbtn-icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: #1C1C1C;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.home-qbtn-icon svg { stroke: var(--gold); }

/* primário (Vender): fundo dourado */
.home-qbtn-primary .home-qbtn-icon {
  background: var(--gold);
  box-shadow: 0 4px 18px rgba(212,175,55,0.35);
}
.home-qbtn-primary .home-qbtn-icon svg { stroke: #0A0A0A; }
.home-qbtn-primary .home-qbtn-label { color: var(--gold); font-weight: 700; }

.home-qbtn-label { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1px; color: #fff; text-align: center; }

@media (max-width: 768px) {
  /* MOBILE: propriedades de layout (não display) */
  section#home,
  section#inicio {
    flex-direction: column;
    align-items: stretch;
    grid-template-columns: unset;
    grid-template-areas: unset;
    gap: 0;
    /* o body já reserva a altura da bottom nav em padding-bottom;
       repetir 90px aqui criava ~154px de rolagem vazia no fim */
    padding: 20px 16px 8px;
    max-width: 100%;
    margin: 0;
  }
  /* display só quando ativa — anula o grid do desktop */
  section#home.active,
  section#inicio.active {
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
  }

  /* sidebars no mobile */
  .home-d-left {
    display: flex !important;   /* visível — mas só para o card de alertas */
    flex-direction: column;
    padding-top: 0;
    order: 12;                  /* aparece depois de PAGAMENTOS */
    gap: 0;
  }
  /* esconde os botões de ação da sidebar esquerda */
  .home-d-left > .home-action-card { display: none !important; }

  .home-d-right-btns { display: none !important; }
  .home-d-cta        { display: none !important; }

  /* sidebar direita: só mostra o card de pagamentos, sem padding-top de desktop */
  .home-d-right {
    display: block;
    padding-top: 0;
    order: 10;
  }

  /* ── SALDO CARD (estilo app de banco) ── */

  /* header do card: live bar vira topo do card */
  .home-live-bar {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    background: #1A1A1A;
    border-radius: 18px 18px 0 0;
    border-bottom: none !important;
    border: 1px solid rgba(212,175,55,0.18);
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding: 14px 16px 12px !important;
    position: relative;
    overflow: hidden;
  }
  /* glow dourado no canto superior direito do header */
  .home-live-bar::after {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 110px;
    height: 110px;
    background: radial-gradient(circle, rgba(212,175,55,0.22) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
  }
  /* título "FATURADO HOJE" injetado via pseudo — data e clock ficam ocultos */
  .home-live-bar::before {
    content: 'FATURADO HOJE';
    flex: 1 1 0;
    min-width: 0;
    order: 1;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    color: var(--text-muted);
    text-transform: uppercase;
  }
  /* No Início do vendedor o valor em destaque é o que ELE vendeu,
     não o caixa da loja — o título do card precisa dizer isso. */
  #inicio .home-live-bar::before { content: 'VOCÊ VENDEU HOJE'; }

  .home-date  { display: none !important; }
  .home-clock { display: none !important; }
  .home-live-right { order: 2; }

  /* badge "• ativa" — anula width/height da bolinha base */
  .home-live-pulse {
    order: 3;
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    background: rgba(34,197,94,0.1);
    border-radius: 20px !important;
    padding: 3px 9px 3px 7px;
    animation: none;
    box-shadow: none;
    flex-shrink: 0;
    width: auto !important;
    height: auto !important;
  }
  .home-live-pulse::after {
    content: 'Conta ativa';
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--green);
    white-space: nowrap;
  }

  /* corpo do card: data wrap com glows */
  #homeDataWrap,
  #vendDataWrap {
    background: radial-gradient(ellipse at 10% 90%, rgba(212,175,55,0.10) 0%, #1A1A1A 55%),
                radial-gradient(ellipse at 90% 10%, rgba(212,175,55,0.06) 0%, transparent 50%),
                #1A1A1A;
    border-radius: 0 0 18px 18px;
    border: 1px solid rgba(212,175,55,0.18);
    border-top: none;
    padding: 4px 16px 18px;
    margin-bottom: 18px;
    position: relative;
    overflow: hidden;
    box-shadow:
      0 12px 40px rgba(212,175,55,0.10),
      0 4px 16px rgba(0,0,0,0.4);
  }
  /* glow de canto inferior esquerdo */
  #homeDataWrap::before,
  #vendDataWrap::before {
    content: '';
    position: absolute;
    bottom: -30px;
    left: -30px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(212,175,55,0.18) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
  }
  /* linha decorativa dourada no topo do corpo */
  #homeDataWrap::after,
  #vendDataWrap::after {
    content: '';
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212,175,55,0.35) 30%, rgba(212,175,55,0.55) 50%, rgba(212,175,55,0.35) 70%, transparent);
    pointer-events: none;
  }
  /* garantir que conteúdo fique sobre os glows */
  .home-hero, .home-progress-wrap, .home-gold-divider { position: relative; z-index: 1; }

  /* hero: alinhado à esquerda, sem eyebrow/label */
  .home-hero { text-align: left !important; margin-bottom: 12px !important; }
  .home-hero-eyebrow { display: none !important; }
  .home-hero-label   { display: none !important; }
  .home-amount-prefix { font-size: 1.2rem !important; margin-top: 0.9rem !important; color: var(--gold-dark); }
  .home-amount-value  { font-size: clamp(2.8rem, 12vw, 4.5rem); }

  /* sem o divider dourado — card já tem estrutura própria */
  .home-gold-divider { display: none !important; }

  /* progresso mobile */
  .home-progress-wrap { margin-bottom: 0; }
  .home-progress-info { margin-bottom: 7px; }
  .home-progress-track { height: 3px; background: var(--surface-3); border-radius: 2px; overflow: hidden; margin-top: 0; }

  /* grade de ações mobile */
  .home-quick-grid { display: grid; margin-bottom: 14px; }

  /* pills de estatísticas mobile */
  .home-stats-pills {
    display: flex !important;
    gap: 10px;
    margin-bottom: 14px;
    padding: 0;
    border-top: none;
    border-bottom: none;
  }
  .home-stat-pill {
    flex: 1;
    min-width: 0;
    background: #1C1C1C !important;
    border: none !important;
    border-radius: 16px !important;
    border-left: none !important;
    padding: 16px 12px !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .home-stat-pill + .home-stat-pill { border-left: none !important; }
  .home-stat-pill-top   { display: flex; }
  .home-stat-pill-arrow {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 0.6rem;
    font-weight: 900;
    line-height: 1;
    flex-shrink: 0;
  }
  .home-stat-pill-up   { background: rgba(212,175,55,0.18); color: var(--gold); }
  .home-stat-pill-down { background: rgba(34,197,94,0.18);  color: var(--green); }
  .home-stat-pill-lbl  { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.5px; }
  .home-stat-pill-val  { font-size: clamp(1.05rem, 3.8vw, 1.3rem) !important; color: var(--text-primary) !important; text-align: left !important; }
  .home-stat-pill-green { color: var(--green) !important; }
  .home-stat-desp-label { display: none; } /* oculto no mobile — pill já é compacto */
  .lbl-mobile  { display: inline; }
  .lbl-desktop { display: none; }

  /* card de pagamentos mobile */
  .home-formas-card { margin-top: 0; }
  .home-formas-card-title { font-size: 0.6rem; font-weight: 700; letter-spacing: 1.5px; margin-bottom: 12px; }

  /* brand compacto no mobile */
  .brand-icon  { width: 36px; height: 36px; }
  .app-brand   { gap: 8px; margin-bottom: 0; }

  /* alertas de estoque no mobile — aparece após PAGAMENTOS.
     Sem card externo: o cinza fica só nos itens, igual a
     Movimentações e Pagamentos de hoje. */
  #homeEstoqueCard,
  #vendEstoqueCard {
    width: 100%;
    margin-top: 0;
    background: none;
    border: none;
    border-radius: 0;
    padding: 4px 0 12px;
    box-sizing: border-box;
  }
  #homeEstoqueCard:empty,
  #vendEstoqueCard:empty { display: none; }

  /* ── Títulos de seção ocultos no mobile ── */
  #crediario    .crd-header-bar > div:first-child { display: none !important; }
  #dashboard    .dash-header-row > div:first-child { display: none !important; }
  #historico    > h2                              { display: none !important; }
  #configuracoes .cfg-header                      { display: none !important; }

  /* ── Estoque mobile ── */
  #estoque .dash-header-row > div:first-child { display: none !important; }
  #estoque .table-wrapper { display: none !important; }
  #estoqueMobileList      { display: block; }

  /* ── Histórico mobile ── */
  #historico .table-wrapper { display: none !important; }
  #historicoMobileList      { display: block; }

  /* ── PDV Acesso Rápido mobile ── */
  #vendas .pdv-section-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 10px;
  }
  /* label inline, sem margin-bottom */
  #vendas .pdv-quick-section .pdv-section-label {
    margin-bottom: 0 !important;
  }
  /* anula o width:100% global do .grafico-controls no mobile */
  #vendas .pdv-quick-section .grafico-controls {
    width: auto !important;
    justify-content: flex-end !important;
    padding: 3px;
    gap: 2px;
  }
  #vendas .pdv-quick-section .grafico-btn {
    flex: none;
    padding: 5px 10px;
    font-size: 0.72rem;
  }
  /* botão ativo: dourado */
  #vendas .pdv-quick-section .grafico-btn.ativo {
    background: rgba(212,175,55,0.15) !important;
    color: var(--gold) !important;
    box-shadow: none;
  }

  /* ── PDV mobile ── */
  #vendas {
    /* bottom nav já reservada pelo padding-bottom do body */
    padding: 16px 14px 8px !important;
    border-radius: var(--radius-md);
  }
  /* esconde o título "Ponto de Venda" no mobile */
  #vendas .dash-header-row { display: none !important; }

  /* layout preenche toda a largura */
  #vendas .pdv-layout {
    grid-template-columns: 1fr !important;
    gap: 10px;
    /* A regra base usa align-items: start para o layout de 2 colunas do
       desktop. Aqui o flex é em coluna, então align-items passa a valer no
       eixo horizontal e "start" encolhia .pdv-left até o conteúdo — daí a
       sobra à direita, que sumia quando o carrinho crescia. */
    align-items: stretch !important;
  }

  #vendas .pdv-left,
  #vendas .pdv-right {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* busca: largura total, sem padding excessivo */
  #vendas .pdv-search-bar {
    padding: 6px 12px;
  }

  /* formas de pagamento: 3 colunas (cabe bem em mobile) */
  #vendas .pdv-formas-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* acesso rápido: 4 colunas em telas ≥360px */
  #vendas .pdv-quick-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  /* cart panel: encosta embaixo, sem margem extra */
  #vendas .pdv-right { margin-top: 0; }
  #vendas .pdv-cart-panel {
    min-height: auto;
    max-height: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE DASHBOARD — visível só em ≤768px, desktop sempre oculto
   ═══════════════════════════════════════════════════════════════ */

/* Oculta o bloco mobile em desktop */
.mob-dash { display: none; }

@media (min-width: 769px) {
  .desk-dash-only { display: block; }
}

@media (max-width: 768px) {
  /* Dashboard desktop: mostra no mobile mas esconde seções duplicadas pelo mob-dash */
  .desk-dash-only {
    display: block !important;
    padding: 0 14px 100px;
  }
  .desk-dash-only .dash-inner { max-width: 100%; }
  .desk-dash-only .dash-header-row  { display: none !important; }
  .desk-dash-only #dashAlertasBanner { display: none !important; }
  .desk-dash-only #dashModLabelFat  { display: none !important; }
  .desk-dash-only #dashKpiFaturamento { display: none !important; }
  .desk-dash-only #dashModLabelLuc  { display: none !important; }
  .desk-dash-only #dashKpiLucro     { display: none !important; }
  .desk-dash-only #dashKpiOp        { display: none !important; }
  .desk-dash-only #dashMetas        { display: none !important; }

  /* Remove padding do section#dashboard no mobile (mob-dash tem o seu próprio) */
  #dashboard {
    padding: 0 !important;
  }

  /* Container principal */
  .mob-dash {
    display: block;
    padding: 14px 14px 0;
    background: var(--bg-deep);
  }

  /* ── Fade ao trocar período ── */
  .mob-dash-content {
    transition: opacity 0.18s ease;
  }
  .mob-dash-content.mob-fading {
    opacity: 0;
  }

  /* ── Tabs de período ── */
  .mob-dash-tabs {
    display: flex;
    gap: 4px;
    background: var(--surface-1);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 14px;
  }
  .mob-dash-tab {
    flex: 1;
    padding: 9px 4px;
    border-radius: 9px;
    border: none;
    background: none;
    color: rgba(255,255,255,0.45);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    font-family: inherit;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-dash-tab.active {
    background: var(--gold);
    color: #0A0A0A;
  }

  /* ── Card principal de faturamento ── */
  .mob-dash-fat-card {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 18px 20px 20px;
    margin-bottom: 12px;
  }
  .mob-dash-fat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .mob-dash-fat-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.10em;
    color: var(--gold);
    text-transform: uppercase;
  }
  .mob-dash-fat-badge {
    background: rgba(34,197,94,0.15);
    color: var(--green);
    border-radius: 20px;
    padding: 3px 11px;
    font-size: 12px;
    font-weight: 600;
  }
  .mob-dash-fat-val {
    font-size: 2.7rem;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: -1px;
    line-height: 1;
  }

  /* ── Row 2: Lucro + Ticket ── */
  .mob-dash-row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
  }
  .mob-dash-metric-card {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 14px;
    position: relative;
    overflow: hidden;
  }
  .mob-dash-lucro {
    border-left: 3px solid var(--green);
  }
  .mob-dash-metric-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.09em;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .mob-dash-metric-val {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
  }
  .mob-dash-metric-sub {
    font-size: 11px;
    color: var(--green);
    margin-top: 4px;
    font-weight: 500;
  }
  .mob-dash-metric-sub.neutral {
    color: var(--text-muted);
  }

  /* ── Grid 2x2 de ícones ── */
  .mob-dash-grid4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
  }
  .mob-dash-icon-card {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .mob-dash-icon-wrap {
    width: 42px;
    height: 42px;
    background: rgba(212,175,55,0.12);
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--gold);
  }
  .mob-dash-icon-body {
    flex: 1;
    min-width: 0;
  }
  .mob-dash-icon-val {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mob-dash-icon-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-top: 2px;
  }

  /* ── Metas do Mês ── */
  .mob-dash-metas {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px 16px 18px;
  }
  .mob-dash-metas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
  }
  .mob-dash-metas-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
  }
  .mob-dash-metas-edit {
    background: none;
    border: none;
    color: var(--gold);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .mob-dash-meta-item {
    margin-bottom: 16px;
  }
  .mob-dash-meta-item:last-child {
    margin-bottom: 0;
  }
  .mob-dash-meta-row1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 7px;
  }
  .mob-dash-meta-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .mob-dash-meta-badge {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--gold);
    background: rgba(212,175,55,0.12);
    border-radius: 4px;
    padding: 2px 6px;
    text-transform: uppercase;
  }
  .mob-dash-meta-pct {
    font-size: 13px;
    font-weight: 700;
  }
  .mob-dash-meta-pct.meta-atingida { color: var(--green); }
  .mob-dash-meta-pct.meta-ok       { color: var(--gold); }
  .mob-dash-meta-pct.meta-alerta   { color: var(--warning); }
  .mob-dash-meta-pct.meta-critica  { color: var(--red); }

  .mob-dash-meta-bar-bg {
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin-bottom: 5px;
    overflow: hidden;
  }
  .mob-dash-meta-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.4s ease;
    background: var(--gold);
  }
  .mob-dash-meta-bar-fill.meta-atingida { background: var(--green); }
  .mob-dash-meta-bar-fill.meta-ok       { background: var(--gold); }
  .mob-dash-meta-bar-fill.meta-alerta   { background: var(--warning); }
  .mob-dash-meta-bar-fill.meta-critica  { background: var(--red); }

  .mob-dash-meta-footer {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-muted);
  }

  /* Separador visual entre mob-dash e os gráficos do desktop */
  .desk-dash-only {
    border-top: 1px solid var(--border);
    margin-top: 14px;
  }
}

/* ============================================
   BLOQUEIO POR FALTA DE PAGAMENTO
   Ativado só quando plano.status === "BLOQUEADO"
   ============================================ */
body.painel-bloqueado .app-wrapper,
body.painel-bloqueado .sync-status {
  filter: grayscale(1) brightness(0.45) blur(3px);
  pointer-events: none;
  user-select: none;
}

body.painel-bloqueado {
  overflow: hidden;
}

.bloqueio-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: radial-gradient(ellipse at 50% 40%, #1a0a0a 0%, #0a0a0a 70%);
  animation: authOverlayIn 0.35s ease;
}

.bloqueio-card {
  background: #111;
  border: 1px solid rgba(239, 68, 68, 0.28);
  border-radius: 18px;
  padding: 40px 38px 32px;
  width: 460px;
  max-width: 92vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(239, 68, 68, 0.08);
  animation: authCardIn 0.45s cubic-bezier(.34, 1.3, .64, 1) 0.05s both;
}

.bloqueio-icone {
  width: 66px;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--red);
  background: rgba(239, 68, 68, 0.10);
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.bloqueio-titulo {
  font-size: 1.45rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  letter-spacing: -0.02em;
}

.bloqueio-texto {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

.bloqueio-detalhe {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0;
  font-style: italic;
}

.bloqueio-detalhe:empty {
  display: none;
}

.bloqueio-btn {
  margin-top: 8px;
  width: 100%;
  padding: 12px 18px;
  border: 1px solid var(--border-hover);
  border-radius: 10px;
  background: var(--surface-3);
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.bloqueio-btn:hover {
  background: var(--surface-1);
  border-color: var(--red);
}

/* ============================================
   BUSCA + FILTRO DE ESTOQUE — acabamento dourado
   ============================================ */
.busca-wrapper {
  background:
    linear-gradient(180deg, rgba(212,175,55,0.06), rgba(212,175,55,0.01)),
    var(--surface-1);
  border: 1px solid rgba(212,175,55,0.30);
  border-radius: 12px;
  box-shadow:
    0 4px 16px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

.busca-wrapper:hover {
  border-color: rgba(212,175,55,0.55);
  box-shadow:
    0 0 14px rgba(212,175,55,0.10),
    0 4px 16px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

.busca-wrapper:focus-within {
  border-color: var(--gold);
  box-shadow:
    0 0 0 3px var(--gold-glow),
    0 0 22px rgba(212,175,55,0.28),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

.busca-icon {
  opacity: 0.75;
  transition: var(--transition);
}
.busca-wrapper:focus-within .busca-icon { opacity: 1; }

.busca-input {
  font-weight: 500 !important;
}
.busca-input::placeholder {
  color: var(--text-muted);
  letter-spacing: 0.01em;
}

/* ── Filtro de status ───────────────────────────────────────── */
.est-filtro-select {
  border-radius: 12px !important;
  border: 1px solid rgba(212,175,55,0.28) !important;
  background-color: var(--surface-1) !important;
  background-image:
    linear-gradient(180deg, rgba(212,175,55,0.06), rgba(212,175,55,0.01)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23D4AF37' d='M5 6L0 0h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: center, right 12px center !important;
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  box-shadow:
    0 4px 16px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.04) !important;
  transition: var(--transition) !important;
}

.est-filtro-select:hover {
  border-color: rgba(212,175,55,0.55) !important;
  box-shadow:
    0 0 14px rgba(212,175,55,0.10),
    0 4px 16px rgba(0,0,0,0.35) !important;
}

.est-filtro-select:focus {
  border-color: var(--gold) !important;
  box-shadow:
    0 0 0 3px var(--gold-glow),
    0 0 22px rgba(212,175,55,0.28) !important;
}

/* Opções do dropdown */
.est-filtro-select option {
  background: #131313 !important;
  color: var(--text-secondary) !important;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 12px 14px;
}

.est-filtro-select option:hover,
.est-filtro-select option:focus {
  background: var(--surface-3) !important;
  color: var(--gold) !important;
}

.est-filtro-select option:checked {
  background: linear-gradient(90deg, var(--gold-dark), var(--gold)) !important;
  color: #101010 !important;
  font-weight: 700;
}

/* ============================================
   SELECT CUSTOM — filtro de status do estoque
   (o <select> nativo fica oculto; a lista é nossa)
   ============================================ */
.sel-nativo-oculto {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sel-custom {
  position: relative;
  flex: 0 0 auto;
}

.sel-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-width: 150px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(212,175,55,0.28);
  background:
    linear-gradient(180deg, rgba(212,175,55,0.06), rgba(212,175,55,0.01)),
    var(--surface-1);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 4px 16px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
}

.sel-trigger:hover {
  border-color: rgba(212,175,55,0.55);
  box-shadow: 0 0 14px rgba(212,175,55,0.10), 0 4px 16px rgba(0,0,0,0.35);
}

.sel-custom.aberto .sel-trigger {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-glow), 0 0 22px rgba(212,175,55,0.28);
}

/* Filtro ativo (≠ Todos) ganha destaque dourado */
.sel-custom.sel-filtrando .sel-trigger {
  border-color: rgba(212,175,55,0.6);
  color: var(--gold);
}

.sel-caret {
  color: var(--gold);
  flex-shrink: 0;
  transition: transform 0.22s var(--ease);
}
.sel-custom.aberto .sel-caret { transform: rotate(180deg); }

/* ── Lista de opções ─────────────────────────────────────────── */
.sel-opts {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 950;
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  border-radius: 14px;
  background: #131313;
  border: 1px solid rgba(212,175,55,0.30);
  box-shadow:
    0 18px 44px rgba(0,0,0,0.65),
    0 0 26px rgba(212,175,55,0.10),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

.sel-custom.aberto .sel-opts {
  display: flex;
  animation: selOptsIn 0.18s var(--ease);
}

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

.sel-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.sel-opt:hover {
  background: var(--surface-3);
  color: var(--text-primary);
}

.sel-opt.ativo {
  background: linear-gradient(90deg, rgba(212,175,55,0.16), rgba(212,175,55,0.04));
  color: var(--gold);
}

.sel-opt-txt { flex: 1; }

.sel-check {
  opacity: 0;
  color: var(--gold);
  flex-shrink: 0;
  transition: opacity 0.15s ease;
}
.sel-opt.ativo .sel-check { opacity: 1; }

/* Bolinha de status por opção */
.sel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 8px currentColor;
}
.sel-dot-todos   { background: var(--text-muted); box-shadow: none; }
.sel-dot-normal  { background: var(--green);  color: var(--green); }
.sel-dot-baixo   { background: var(--gold);   color: var(--gold); }
.sel-dot-critico { background: var(--warning); color: var(--warning); }
.sel-dot-falta   { background: var(--red);    color: var(--red); }
.sel-dot-parado  { background: var(--text-muted); box-shadow: none; }

@media (max-width: 768px) {
  .sel-custom { width: 100%; }
  .sel-trigger { min-width: 0; padding: 12px 14px; font-size: 0.85rem; }
  .sel-opt { padding: 13px 12px; font-size: 0.88rem; }
}

/* Opção "Sem Giro 90d" no dropdown custom */
.sel-dot-parado90 { background: #A78BFA; color: #A78BFA; }

/* ============================================
   CARD DE STATUS ATIVO — assume a cor do próprio status
   ============================================ */
.est-status-item {
  position: relative;
  overflow: hidden;
}

.est-status-ativo {
  transform: translateY(-1px);
}

/* Barra de acento no topo do card ativo */
.est-status-ativo::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}

.est-status-ativo .est-status-lbl { color: currentColor; opacity: 0.9; }
.est-status-ativo .est-status-val { color: currentColor; }

.est-status-normal.est-status-ativo {
  color: var(--green);
  background: linear-gradient(180deg, rgba(34,197,94,0.18), rgba(34,197,94,0.04));
  border-color: var(--green);
  box-shadow: 0 0 0 1px rgba(34,197,94,0.35), 0 0 22px rgba(34,197,94,0.28);
}
.est-status-baixo.est-status-ativo {
  color: var(--gold-bright);
  background: linear-gradient(180deg, rgba(212,175,55,0.20), rgba(212,175,55,0.04));
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(212,175,55,0.4), 0 0 22px rgba(212,175,55,0.30);
}
.est-status-critico.est-status-ativo {
  color: #F59E0B;
  background: linear-gradient(180deg, rgba(245,158,11,0.20), rgba(245,158,11,0.04));
  border-color: #F59E0B;
  box-shadow: 0 0 0 1px rgba(245,158,11,0.4), 0 0 22px rgba(245,158,11,0.30);
}
.est-status-falta.est-status-ativo {
  color: var(--red);
  background: linear-gradient(180deg, rgba(239,68,68,0.20), rgba(239,68,68,0.04));
  border-color: var(--red);
  box-shadow: 0 0 0 1px rgba(239,68,68,0.4), 0 0 22px rgba(239,68,68,0.28);
}
.est-status-parado.est-status-ativo {
  color: var(--text-secondary);
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
  border-color: var(--border-hover);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.14), 0 0 18px rgba(255,255,255,0.10);
}
.est-status-parado90.est-status-ativo {
  color: #A78BFA;
  background: linear-gradient(180deg, rgba(167,139,250,0.20), rgba(167,139,250,0.04));
  border-color: #A78BFA;
  box-shadow: 0 0 0 1px rgba(167,139,250,0.4), 0 0 22px rgba(167,139,250,0.30);
}

/* ============================================
   BOTTOM NAV — ênfase forte na section ativa
   ============================================ */
@media (max-width: 768px) {
  /* Barra opaca: com fundo translúcido, o conteúdo da página vazava por trás
     dos cantos arredondados do realce. */
  .mobile-bottom-nav {
    background: #0E0E0E !important;
  }

  .mob-tab {
    position: relative;
    background: none !important;
    box-shadow: none !important;
    transition: color 0.2s var(--ease) !important;
  }

  /* O realce é uma camada interna (inset), nunca encosta nas bordas da nav —
     é isso que impede o vazamento de 1px no topo. */
  body:has(#inicio.active)        .mob-tab[data-section="inicio"]::after,
  body:has(#home.active)          .mob-tab[data-section="home"]::after,
  body:has(#vendas.active)        .mob-tab[data-section="vendas"]::after,
  body:has(#estoque.active)       .mob-tab[data-section="estoque"]::after,
  body:has(#crediario.active)     .mob-tab[data-section="crediario"]::after,
  body:has(#dashboard.active)     .mob-tab[data-section="dashboard"]::after,
  body:has(#historico.active)     .mob-tab[data-section="historico"]::after,
  body:has(#despesas.active)      .mob-tab[data-section="despesas"]::after,
  body:has(#configuracoes.active) .mob-tab[data-section="configuracoes"]::after {
    content: '';
    position: absolute;
    inset: 6px 5px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(212,175,55,0.20), rgba(212,175,55,0.03));
    box-shadow: inset 0 0 0 1px rgba(212,175,55,0.30);
    pointer-events: none;
    z-index: 0;
  }

  /* Barra de acento — dentro do pill, alinhada ao topo dele */
  body:has(#inicio.active)        .mob-tab[data-section="inicio"]::before,
  body:has(#home.active)          .mob-tab[data-section="home"]::before,
  body:has(#vendas.active)        .mob-tab[data-section="vendas"]::before,
  body:has(#estoque.active)       .mob-tab[data-section="estoque"]::before,
  body:has(#crediario.active)     .mob-tab[data-section="crediario"]::before,
  body:has(#dashboard.active)     .mob-tab[data-section="dashboard"]::before,
  body:has(#historico.active)     .mob-tab[data-section="historico"]::before,
  body:has(#despesas.active)      .mob-tab[data-section="despesas"]::before,
  body:has(#configuracoes.active) .mob-tab[data-section="configuracoes"]::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold-bright), var(--gold-dark));
    box-shadow: 0 0 12px rgba(212,175,55,0.7);
    pointer-events: none;
    z-index: 2;
  }

  /* Conteúdo acima do realce */
  .mob-tab svg,
  .mob-tab span {
    position: relative;
    z-index: 1;
  }

  body:has(#inicio.active)        .mob-tab[data-section="inicio"],
  body:has(#home.active)          .mob-tab[data-section="home"],
  body:has(#vendas.active)        .mob-tab[data-section="vendas"],
  body:has(#estoque.active)       .mob-tab[data-section="estoque"],
  body:has(#crediario.active)     .mob-tab[data-section="crediario"],
  body:has(#dashboard.active)     .mob-tab[data-section="dashboard"],
  body:has(#historico.active)     .mob-tab[data-section="historico"],
  body:has(#despesas.active)      .mob-tab[data-section="despesas"],
  body:has(#configuracoes.active) .mob-tab[data-section="configuracoes"] {
    color: var(--gold-bright) !important;
  }

  body:has(#inicio.active)        .mob-tab[data-section="inicio"] span,
  body:has(#home.active)          .mob-tab[data-section="home"] span,
  body:has(#vendas.active)        .mob-tab[data-section="vendas"] span,
  body:has(#estoque.active)       .mob-tab[data-section="estoque"] span,
  body:has(#crediario.active)     .mob-tab[data-section="crediario"] span,
  body:has(#dashboard.active)     .mob-tab[data-section="dashboard"] span,
  body:has(#historico.active)     .mob-tab[data-section="historico"] span,
  body:has(#despesas.active)      .mob-tab[data-section="despesas"] span,
  body:has(#configuracoes.active) .mob-tab[data-section="configuracoes"] span {
    font-weight: 700 !important;
  }
}

/* ============================================
   HISTÓRICO — filtros de Data / Pagamento
   ============================================ */
.hist-filtros-wrap {
  display: block;
}

/* Rótulos DATA / PAGAMENTO */
.painel-filtros .filtro-group label {
  color: var(--text-muted);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

/* Campos de data e pagamento — acabamento dourado próprio */
.painel-filtros .filtro-group input[type="date"],
.painel-filtros .filtro-group select {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(212,175,55,0.28);
  background-color: var(--surface-1);
  background-image: linear-gradient(180deg, rgba(212,175,55,0.06), rgba(212,175,55,0.01));
  color: var(--text-primary);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
  transition: var(--transition);
}

.painel-filtros .filtro-group input[type="date"]:hover,
.painel-filtros .filtro-group select:hover {
  border-color: rgba(212,175,55,0.55);
  box-shadow: 0 0 14px rgba(212,175,55,0.10), 0 4px 16px rgba(0,0,0,0.35);
}

.painel-filtros .filtro-group input[type="date"]:focus,
.painel-filtros .filtro-group select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-glow), 0 0 22px rgba(212,175,55,0.28);
}

/* Seta do select de pagamento */
.painel-filtros .filtro-group select {
  background-image:
    linear-gradient(180deg, rgba(212,175,55,0.06), rgba(212,175,55,0.01)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23D4AF37' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: center, right 14px center;
  padding-right: 38px;
}

.painel-filtros .filtro-group select option {
  background: #131313;
  color: var(--text-secondary);
  font-weight: 600;
}
.painel-filtros .filtro-group select option:checked {
  background: linear-gradient(90deg, var(--gold-dark), var(--gold));
  color: #101010;
  font-weight: 700;
}

/* Ícone do calendário em dourado */
.painel-filtros .filtro-group input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(72%) sepia(60%) saturate(500%) hue-rotate(2deg) brightness(95%);
  cursor: pointer;
  opacity: 0.9;
}

/* Botão Limpar */
.painel-filtros .filtro-actions button {
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-2s);
  color: var(--text-secondary);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: var(--transition);
}
.painel-filtros .filtro-actions button:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: var(--surface-3);
}

@media (max-width: 768px) {
  /* Totais por forma sobem para cima da barra de filtros */
  .hist-filtros-wrap {
    display: flex;
    flex-direction: column-reverse;
    gap: 14px;
  }

  .painel-filtros {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: end;
    margin-bottom: 0;
  }

  /* Limpar ocupa a linha inteira abaixo dos dois campos */
  .painel-filtros .filtro-actions {
    grid-column: 1 / -1;
  }

  .hist-filtros-wrap #totaisPorForma {
    margin: 0;
  }
}

/* ============================================
   CALENDÁRIO CUSTOM + menu de pagamento
   ============================================ */
.data-custom {
  position: relative;
  width: 100%;
}

.data-trigger {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(212,175,55,0.28);
  background:
    linear-gradient(180deg, rgba(212,175,55,0.06), rgba(212,175,55,0.01)),
    var(--surface-1);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 4px 16px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
}

.data-trigger:hover {
  border-color: rgba(212,175,55,0.55);
  box-shadow: 0 0 14px rgba(212,175,55,0.10), 0 4px 16px rgba(0,0,0,0.35);
}

.data-custom.aberto .data-trigger {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-glow), 0 0 22px rgba(212,175,55,0.28);
}

.data-custom.data-preenchida .data-trigger { color: var(--gold); }
.data-ico { color: var(--gold); flex-shrink: 0; }
.data-trigger-txt { flex: 1; }

/* ── Popover do calendário ───────────────────────────────────── */
.data-pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 960;
  display: none;
  width: 290px;
  max-width: calc(100vw - 32px);
  padding: 12px;
  border-radius: 16px;
  background: #131313;
  border: 1px solid rgba(212,175,55,0.30);
  box-shadow:
    0 20px 50px rgba(0,0,0,0.7),
    0 0 26px rgba(212,175,55,0.10),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

.data-custom.aberto .data-pop {
  display: block;
  animation: selOptsIn 0.18s var(--ease);
}

.data-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.data-mes {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}

.data-nav {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--surface-2s);
  color: var(--gold);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: var(--transition);
}
.data-nav:hover {
  border-color: var(--gold);
  background: var(--surface-3);
}

.data-sem {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
}
.data-sem span {
  text-align: center;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 4px 0;
}

.data-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.data-dia {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}
.data-dia.vazio { pointer-events: none; }
.data-dia:hover { background: var(--surface-3); color: var(--text-primary); }

.data-dia.hoje {
  box-shadow: inset 0 0 0 1px rgba(212,175,55,0.45);
  color: var(--gold);
}

.data-dia.ativo {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  color: #101010;
  font-weight: 800;
  box-shadow: 0 0 14px rgba(212,175,55,0.45);
}

.data-pop-foot {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.data-acao {
  flex: 1;
  padding: 9px 10px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--surface-2s);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}
.data-acao:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: var(--surface-3);
}

/* Bolinhas das formas de pagamento no menu custom */
.sel-dot-dinheiro       { background: var(--green);  color: var(--green); }
.sel-dot-pix            { background: #3B82F6;       color: #3B82F6; }
.sel-dot-cartao-debito  { background: #22D3EE;       color: #22D3EE; }
.sel-dot-cartao-credito { background: var(--gold);   color: var(--gold); }
.sel-dot-crediario      { background: var(--red);    color: var(--red); }

/* Menu de pagamento ocupa a largura do grupo de filtro */
.filtro-group .sel-custom { width: 100%; }
.filtro-group .sel-trigger {
  min-width: 0;
  padding: 12px 14px;
  font-size: 0.88rem;
}

/* Reset: o `button` global (padding 9px 18px, min-width, etc.) estourava a
   grade do calendário para fora do popover. */
.data-pop button {
  padding: 0 !important;
  min-width: 0 !important;
  width: auto !important;
  gap: 0 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
}

.data-pop .data-nav {
  width: 30px !important;
  height: 30px !important;
  flex: 0 0 30px;
}

.data-pop .data-acao {
  padding: 9px 10px !important;
  width: 100% !important;
}

.data-pop {
  box-sizing: border-box;
  overflow: hidden;
}

.data-grid,
.data-sem {
  width: 100%;
  min-width: 0;
}

.data-dia {
  min-width: 0 !important;
  width: 100% !important;
}

/* ============================================
   CREDIÁRIO — tabs de filtro + busca
   ============================================ */
.crd-filter-tabs {
  gap: 8px;
  margin-bottom: 16px;
}

.crd-tab {
  position: relative;
  overflow: hidden;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-2s);
  color: var(--text-muted);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.crd-tab:hover {
  background: var(--surface-3);
  border-color: var(--border-hover);
  color: var(--text-primary);
  transform: translateY(-1px);
}

/* Barra de acento no topo da tab ativa */
.crd-tab.ativo::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}

.crd-tab.ativo {
  color: var(--gold);
  background: linear-gradient(180deg, rgba(212,175,55,0.18), rgba(212,175,55,0.03));
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(212,175,55,0.3), 0 0 20px rgba(212,175,55,0.22);
  transform: translateY(-1px);
}

/* Cada filtro carrega a cor do que representa quando ativo */
#crdBatrasado.ativo {
  color: var(--red);
  background: linear-gradient(180deg, rgba(239,68,68,0.20), rgba(239,68,68,0.04));
  border-color: var(--red);
  box-shadow: 0 0 0 1px rgba(239,68,68,0.35), 0 0 20px rgba(239,68,68,0.25);
}
#crdBhoje.ativo {
  color: #F59E0B;
  background: linear-gradient(180deg, rgba(245,158,11,0.20), rgba(245,158,11,0.04));
  border-color: #F59E0B;
  box-shadow: 0 0 0 1px rgba(245,158,11,0.35), 0 0 20px rgba(245,158,11,0.25);
}
#crdBsemana.ativo {
  color: var(--gold-bright);
  background: linear-gradient(180deg, rgba(212,175,55,0.20), rgba(212,175,55,0.04));
  border-color: var(--gold);
}
#crdBemdia.ativo,
#crdBquitado.ativo {
  color: var(--green);
  background: linear-gradient(180deg, rgba(34,197,94,0.18), rgba(34,197,94,0.04));
  border-color: var(--green);
  box-shadow: 0 0 0 1px rgba(34,197,94,0.35), 0 0 20px rgba(34,197,94,0.25);
}
#crdBtodos.ativo {
  color: var(--text-primary);
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02));
  border-color: var(--border-hover);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12), 0 0 18px rgba(255,255,255,0.08);
}

/* Contador dentro da tab */
.crd-tab-ct {
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 800;
  background: rgba(239,68,68,0.15);
  color: var(--red);
  box-shadow: inset 0 0 0 1px rgba(239,68,68,0.28);
}

#crdBhoje .crd-tab-ct {
  background: rgba(245,158,11,0.15);
  color: #F59E0B;
  box-shadow: inset 0 0 0 1px rgba(245,158,11,0.28);
}
#crdBsemana .crd-tab-ct {
  background: rgba(212,175,55,0.15);
  color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(212,175,55,0.28);
}

/* Busca de cliente — mesmo acabamento dourado do resto do sistema */
.crd-busca-input {
  padding: 12px 14px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(212,175,55,0.28) !important;
  background:
    linear-gradient(180deg, rgba(212,175,55,0.06), rgba(212,175,55,0.01)),
    var(--surface-1) !important;
  color: var(--text-primary) !important;
  font-weight: 500 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04) !important;
  transition: var(--transition) !important;
}

.crd-busca-input::placeholder {
  color: var(--text-muted);
  letter-spacing: 0.01em;
}

.crd-busca-input:hover {
  border-color: rgba(212,175,55,0.55) !important;
}

.crd-busca-input:focus {
  outline: none !important;
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px var(--gold-glow), 0 0 22px rgba(212,175,55,0.28) !important;
}

@media (max-width: 768px) {
  .crd-filter-tabs {
    gap: 8px;
  }
  .crd-tab {
    padding: 11px 6px;
    font-size: 0.72rem;
    min-height: 42px;
  }
  .crd-busca-input {
    margin-top: 2px;
  }
}

/* ============================================
   SAFE AREA DO TOPO (notch / Dynamic Island)
   env(safe-area-inset-top) é 0px no Android e em iPhones sem notch,
   então o layout deles fica exatamente como está hoje.
   ============================================ */
/* Padrão: sem gap extra — no navegador a barra do Chrome/Safari já ocupa o topo. */
:root {
  --mobile-status-gap: 0px;
}

/* Só no app instalado (standalone) a barra de status sobrepõe o conteúdo
   (apple-mobile-web-app-status-bar-style: black-translucent). Aí sim
   reservamos um mínimo, para o caso de env(safe-area-inset-top) = 0px
   (Android, iPhones sem notch). Ajuste o valor aqui para calibrar. */
@media (max-width: 768px) and (display-mode: standalone) {
  :root {
    --mobile-status-gap: 34px;
  }
}

@media (max-width: 768px) {
  /* A linha dourada desce para abaixo da barra de status e fica ancorada
     ao topo da página: com `fixed` ela grudava na viewport e seguia o
     scroll. `absolute` a prende ao .app-header (que é position: relative),
     então ela sai de vista junto com o cabeçalho. No desktop segue fixed. */
  .app-header::before {
    position: absolute;
    top: max(var(--safe-top), var(--mobile-status-gap));
    /* absolute mede a partir do padding box do header (14px laterais);
       isto devolve o sangramento de ponta a ponta que o fixed tinha. */
    left: 50%;
    right: auto;
    width: 100vw;
    transform: translateX(-50%);
  }

  /* O padding-top do header vive na regra de "Header mais compacto"
     (padding shorthand com !important), por isso não é redefinido aqui. */
}

/* ═══════════════════════════════════════════════════════════
   MOVIMENTAÇÕES — card na Home + modal "Ver tudo"
   Mobile only: no desktop o card fica oculto (o grid da Home
   tem 3 áreas fixas e este bloco não pertence a nenhuma).
   ═══════════════════════════════════════════════════════════ */

.home-movs-card { display: none; }

.movs-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(0,0,0,0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.movs-modal {
  width: 100%;
  max-width: 520px;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 18px 18px 0 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.movs-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border);
}

.movs-modal-title { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); }
.movs-close-btn   { font-size: 1rem; line-height: 1; padding: 6px 10px; }

.movs-modal-scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Linha de movimentação (usada no card e no modal) ─────── */
.movs-item {
  display: flex;
  align-items: center;
  gap: 11px;
  background: #141414;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 13px;
}

.movs-item-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.movs-icon-venda     { background: rgba(0,196,140,0.14);  color: #00C48C; }
.movs-icon-crediario { background: rgba(212,175,55,0.16); color: var(--gold); }
.movs-icon-despesa   { background: rgba(255,82,82,0.14);  color: #FF5252; }

.movs-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.movs-item-titulo {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.movs-item-quando { font-size: 0.68rem; color: var(--text-muted); }

.movs-item-valor {
  flex-shrink: 0;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}

.movs-val-pos { color: #00C48C; }
.movs-val-neg { color: #FF5252; }

.movs-vazio {
  font-size: 0.75rem;
  color: var(--text-muted);
  padding: 10px 2px;
}

@media (max-width: 768px) {
  /* Aparece antes de PAGAMENTOS (order 10) e dos alertas (order 12) */
  /* Sem card externo: o fundo/borda cinza fica só nas linhas (.movs-item) */
  .home-movs-card {
    display: block;
    order: 9;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
    padding: 4px 0 12px;
  }

  .home-movs-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 11px;
  }

  .home-movs-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
  }

  .home-movs-vertudo,
  .home-estoque-vertudo {
    background: none;
    border: none;
    padding: 4px 2px;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--gold);
    cursor: pointer;
  }

  .home-movs-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
}

/* ═══════════════════════════════════════════════════════════
   PAGAMENTOS DE HOJE — tiles
   O JS monta esta marcação em qualquer viewport, então o estilo
   não pode ficar preso a media query (senão o desktop fica cru).
   As regras .home-forma-pill acima seguem valendo no desktop.
   ═══════════════════════════════════════════════════════════ */
.home-formas-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.home-formas-head .home-formas-card-title { margin-bottom: 0; }

.home-formas-hoje { display: block; gap: 0; }

.home-formas-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* ── Tile de meio à vista ─────────────────────────────────── */
.home-forma-tile {
  --forma-cor: var(--text-muted);
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon nome"
    "val  val"
    "bar  bar";
  align-items: center;
  gap: 6px 8px;
  padding: 10px 11px 9px;
  background: #141414;
  border: 1px solid var(--border);
  border-radius: 13px;
}

.home-forma-tile-icon {
  grid-area: icon;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--forma-cor);
  background: color-mix(in srgb, var(--forma-cor) 16%, transparent);
}

.home-forma-tile-nome {
  grid-area: nome;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-forma-tile-val {
  grid-area: val;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* Barra de proporção: fatia deste meio no total recebido hoje */
.home-forma-tile-bar {
  grid-area: bar;
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}

.home-forma-tile-fill {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--forma-cor);
  transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Maior entrada do dia */
.home-forma-tile-top {
  border-color: color-mix(in srgb, var(--forma-cor) 45%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--forma-cor) 9%, #141414) 0%, #141414 62%);
}

.home-forma-tile-vazio {
  background: transparent;
  border-style: dashed;
  border-color: rgba(255,255,255,0.07);
}
.home-forma-tile-vazio .home-forma-tile-nome,
.home-forma-tile-vazio .home-forma-tile-val { color: var(--text-muted); }
.home-forma-tile-vazio .home-forma-tile-val { font-weight: 600; }
.home-forma-tile-vazio .home-forma-tile-icon { background: rgba(255,255,255,0.05); color: var(--text-muted); }
.home-forma-tile-vazio .home-forma-tile-bar  { visibility: hidden; }

/* ── Crediário: linha à parte, não é dinheiro em caixa ────── */
.home-forma-cred {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 13px;
  background: rgba(255,152,0,0.07);
  border: 1px solid rgba(255,152,0,0.22);
}

.home-forma-cred-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FF9800;
  background: rgba(255,152,0,0.15);
}

.home-forma-cred-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.home-forma-cred-nome { font-size: 0.76rem; font-weight: 600; color: var(--text-primary); }
.home-forma-cred-sub  { font-size: 0.64rem; color: var(--text-muted); }

.home-forma-cred-val {
  font-size: 0.86rem;
  font-weight: 700;
  color: #FF9800;
  white-space: nowrap;
}

.home-forma-cred-vazio {
  background: transparent;
  border-color: rgba(255,255,255,0.07);
  border-style: dashed;
}
.home-forma-cred-vazio .home-forma-cred-icon { background: rgba(255,255,255,0.05); color: var(--text-muted); }
.home-forma-cred-vazio .home-forma-cred-val  { color: var(--text-muted); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .home-forma-tile-fill { transition: none; }
}

/* Mobile: sem card externo em PAGAMENTOS DE HOJE — mesmo tratamento
   dado a Movimentações. O cinza fica só nos tiles/faixa de crediário. */
@media (max-width: 768px) {
  .home-formas-card {
    background: none;
    border: none;
    border-radius: 0;
    padding: 4px 0 12px;
    margin-top: 0;
  }

  /* cabeçalho alinhado com o de Movimentações */
  .home-formas-head { margin-bottom: 11px; }

  .home-formas-head .home-formas-card-title {
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-primary);
  }

}

/* ═══════════════════════════════════════════════════════════
   SKELETON das movimentações — mostrado com o olho fechado
   ═══════════════════════════════════════════════════════════ */
.movs-skel {
  display: flex;
  align-items: center;
  gap: 11px;
  background: #141414;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 13px;
}

.movs-skel-icon,
.movs-skel-linha,
.movs-skel-val {
  display: block;
  border-radius: 6px;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.05) 0%,
    rgba(255,255,255,0.11) 50%,
    rgba(255,255,255,0.05) 100%);
  background-size: 200% 100%;
  animation: movsSkelShimmer 1.4s ease-in-out infinite;
}

.movs-skel-icon { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; }

.movs-skel-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.movs-skel-linha-lg { height: 9px; width: 62%; }
.movs-skel-linha-sm { height: 7px; width: 34%; }

.movs-skel-val { width: 64px; height: 10px; flex-shrink: 0; }

/* Escalona o brilho para não pulsarem em bloco */
.movs-skel:nth-child(2) .movs-skel-icon,
.movs-skel:nth-child(2) .movs-skel-linha,
.movs-skel:nth-child(2) .movs-skel-val { animation-delay: 0.12s; }
.movs-skel:nth-child(3) .movs-skel-icon,
.movs-skel:nth-child(3) .movs-skel-linha,
.movs-skel:nth-child(3) .movs-skel-val { animation-delay: 0.24s; }
.movs-skel:nth-child(4) .movs-skel-icon,
.movs-skel:nth-child(4) .movs-skel-linha,
.movs-skel:nth-child(4) .movs-skel-val { animation-delay: 0.36s; }

@keyframes movsSkelShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .movs-skel-icon,
  .movs-skel-linha,
  .movs-skel-val { animation: none; background: rgba(255,255,255,0.07); }
}

/* ═══════════════════════════════════════════════════════════
   ALERTAS DE ESTOQUE — tiles (MOBILE ONLY)
   No desktop o card antigo segue valendo (.home-estoque-item
   dentro de #homeEstoqueCard com fundo), então tudo aqui está
   preso ao breakpoint.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .home-estoque-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 11px;
  }

  .home-estoque-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
  }


  .home-estoque-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .home-estoque-item {
    display: flex;
    align-items: center;
    gap: 11px;
    background: #141414;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 11px 13px;
  }

  .home-estoque-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .home-estoque-zerado .home-estoque-icon { background: rgba(255,82,82,0.14); color: #FF5252; }
  .home-estoque-baixo  .home-estoque-icon { background: rgba(255,152,0,0.14); color: #FF9800; }

  .home-estoque-nome {
    flex: 1;
    min-width: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .home-estoque-qtd {
    flex-shrink: 0;
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
  }

  .home-estoque-zerado .home-estoque-qtd { color: #FF5252; }
  .home-estoque-baixo  .home-estoque-qtd { color: #FF9800; }

  .home-estoque-extra {
    font-size: 0.7rem;
    color: var(--text-muted);
    padding: 2px 4px;
  }

  /* o ponto colorido antigo deu lugar ao ícone */
  .home-estoque-dot { display: none; }

  /* skeleton de uma linha só (alertas não têm subtítulo) */
  .movs-skel-compacto .movs-skel-linha-lg { width: 48%; }
  .movs-skel-compacto .movs-skel-val      { width: 48px; }
}

/* ═══════════════════════════════════════════════════════════
   ALERTAS DE ESTOQUE — desktop volta ao formato de lista
   O JS passou a emitir .home-estoque-head e .home-estoque-icon
   para o layout mobile; no desktop o cabeçalho vira o título
   discreto de sempre e o ícone volta a ser o ponto de 6px.
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  .home-estoque-head { display: block; margin-bottom: 10px; }

  .home-estoque-title {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-muted);
  }

  /* o "Ver tudo" é do card mobile — no desktop o menu já leva ao estoque */
  .home-estoque-vertudo { display: none; }

  .home-estoque-list { display: block; }

  /* o span do ícone vira o ponto colorido */
  .home-estoque-icon {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
  }
  .home-estoque-icon svg { display: none; }

  .home-estoque-zerado .home-estoque-icon { background: var(--red); }
  .home-estoque-baixo  .home-estoque-icon { background: #F59E0B; }
}

/* ═══════════════════════════════════════════════════════════
   BOTTOM NAV — estado ativo enxuto (MOBILE)
   Substitui o realce anterior (pill dourado + barra com glow).
   Inativo: tudo cinza. Ativo: só o ícone fica dourado e um
   pouco maior; o rótulo não muda de cor nem de peso.
   Vem depois dos blocos antigos de propósito — é o que vence.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* desliga pill de fundo, barra de acento e o glow */
  .mob-tab::before,
  .mob-tab::after {
    content: none !important;
    background: none !important;
    box-shadow: none !important;
  }

  /* botão e rótulo: cinza sempre, inclusive na seção ativa */
  .mob-tab,
  .mobile-bottom-nav button,
  body:has(#inicio.active) .mob-tab[data-section="inicio"],
  body:has(#home.active) .mob-tab[data-section="home"],
  body:has(#vendas.active) .mob-tab[data-section="vendas"],
  body:has(#estoque.active) .mob-tab[data-section="estoque"],
  body:has(#crediario.active) .mob-tab[data-section="crediario"],
  body:has(#dashboard.active) .mob-tab[data-section="dashboard"],
  body:has(#historico.active) .mob-tab[data-section="historico"],
  body:has(#despesas.active) .mob-tab[data-section="despesas"],
  body:has(#configuracoes.active) .mob-tab[data-section="configuracoes"],
  body:has(#inicio.active) .mob-tab[data-section="inicio"] span,
  body:has(#home.active) .mob-tab[data-section="home"] span,
  body:has(#vendas.active) .mob-tab[data-section="vendas"] span,
  body:has(#estoque.active) .mob-tab[data-section="estoque"] span,
  body:has(#crediario.active) .mob-tab[data-section="crediario"] span,
  body:has(#dashboard.active) .mob-tab[data-section="dashboard"] span,
  body:has(#historico.active) .mob-tab[data-section="historico"] span,
  body:has(#despesas.active) .mob-tab[data-section="despesas"] span,
  body:has(#configuracoes.active) .mob-tab[data-section="configuracoes"] span {
    color: var(--mob-tab-cinza) !important;
    font-weight: 500 !important;
    background: none !important;
    box-shadow: none !important;
  }

  .mob-tab svg {
    transition: color 0.18s ease,
                transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1) !important;
  }

  /* ativo: só o ícone muda */
  body:has(#inicio.active) .mob-tab[data-section="inicio"] svg,
  body:has(#home.active) .mob-tab[data-section="home"] svg,
  body:has(#vendas.active) .mob-tab[data-section="vendas"] svg,
  body:has(#estoque.active) .mob-tab[data-section="estoque"] svg,
  body:has(#crediario.active) .mob-tab[data-section="crediario"] svg,
  body:has(#dashboard.active) .mob-tab[data-section="dashboard"] svg,
  body:has(#historico.active) .mob-tab[data-section="historico"] svg,
  body:has(#despesas.active) .mob-tab[data-section="despesas"] svg,
  body:has(#configuracoes.active) .mob-tab[data-section="configuracoes"] svg {
    color: var(--gold) !important;
    stroke: var(--gold) !important;
    transform: scale(1.18);
  }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .mob-tab svg { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   Marca clicável — logo + nome levam ao início
   O <button> existe só para dar semântica e área de toque; ele
   não pode introduzir caixa própria, senão desalinha o header.
   ═══════════════════════════════════════════════════════════ */
.brand-home-btn {
  display: inline-flex;
  align-items: center;
  gap: inherit;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  min-height: 0;
  min-width: 0;
  box-shadow: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s ease;
}

.brand-home-btn:hover   { background: none; opacity: 0.82; }
.brand-home-btn:active  { opacity: 0.65; }

.brand-home-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: 6px;
}

/* ═══════════════════════════════════════════════════════════
   PAGAMENTOS DE HOJE — duas marcações, uma por breakpoint
   Desktop usa a lista de pills (ordem e rótulos próprios);
   mobile usa os tiles. Não dá para servir as duas com o mesmo
   HTML porque a ordem e os textos diferem.
   ═══════════════════════════════════════════════════════════ */
.home-formas-mobile { display: none; }

@media (max-width: 768px) {
  .home-formas-desktop { display: none; }
  .home-formas-mobile  { display: block; }
}

/* ═══════════════════════════════════════════════════════════
   SCROLLBAR OCULTA — app instalado e mobile
   Só esconde: a rolagem continua funcionando normalmente, por
   toque, roda do mouse, teclado e barra de espaço. O desktop no
   navegador mantém a barra, onde ela serve de referência.
   ═══════════════════════════════════════════════════════════ */
@media (display-mode: standalone), (max-width: 768px) {
  html {
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;    /* Edge legado */
  }

  html::-webkit-scrollbar,
  body::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;               /* Chrome, Safari */
  }

  /* Contêineres com rolagem própria */
  .movs-modal-scroll,
  .est-tab-body,
  .cp-scroll,
  .hist-mobile-list {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .movs-modal-scroll::-webkit-scrollbar,
  .est-tab-body::-webkit-scrollbar,
  .cp-scroll::-webkit-scrollbar,
  .hist-mobile-list::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   PDV MOBILE — sem cards externos
   Mesmo tratamento da Home: o cinza fica só nos elementos que
   são de fato botão/item (.pdv-forma, .pdv-quick-card,
   .pdv-cart-item, .pdv-total-block), que já trazem fundo e
   borda próprios. Os contêineres viram apenas agrupamento.
   Nada aqui vaza para o desktop.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .pdv-payment-section,
  .pdv-cart-panel {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* Cabeçalhos: mesmo tratamento dos títulos da Home */
  .pdv-section-label,
  .pdv-cart-title {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--text-primary) !important;
  }

  .pdv-payment-section .pdv-section-label,
  .pdv-section-header {
    margin-bottom: 11px;
  }

  /* Sem moldura, as divisórias do carrinho perdem a função */
  .pdv-cart-head {
    padding: 0 0 11px !important;
    border-bottom: none !important;
  }

  .pdv-cart-footer {
    padding: 12px 0 0 !important;
    border-top: none !important;
  }

  .pdv-cart-lista {
    padding: 0 !important;
  }

  /* Espaçamento entre os blocos, já que não há mais cards */
  .pdv-left { gap: 22px !important; }
  .pdv-right { margin-top: 22px; }
}

/* ═══════════════════════════════════════════════════════════
   PDV MOBILE — formas de pagamento em 3 + 2
   Com 5 botões numa grade de 3 colunas, a segunda linha deixava
   um vão que parecia forma faltando. Base de 6 colunas: os três
   de cima ocupam 2 faixas cada (3×2=6) e os dois de baixo
   ocupam 3 cada (2×3=6), então as duas linhas fecham.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Escopado em #vendas de propósito: existe um
     `#vendas .pdv-formas-grid { ... !important }` em main.css:8776.
     Com !important dos dois lados, quem ganha é a especificidade —
     um seletor só de classe perderia, e o grid ficaria em 3 colunas
     com os botões ocupando 2 cada, ou seja, um por linha. */
  #vendas .pdv-formas-grid {
    display: grid !important;
    /* minmax(0,...): com `1fr` puro o mínimo é min-content e a
       largura do rótulo estoura as faixas. */
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  #vendas .pdv-forma {
    grid-column: span 2 !important;
    min-width: 0 !important;
  }

  #vendas .pdv-forma span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Crédito e Crediário — a linha de baixo */
  #vendas #pdvfCredito,
  #vendas #pdvfCrediario {
    grid-column: span 3 !important;
  }
}

/* Acesso Rápido: só no desktop. No mobile a busca já resolve, e a
   grade de produtos empurrava o carrinho para muito longe do topo. */
@media (max-width: 768px) {
  #vendas .pdv-quick-section {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   PDV — BUSCA EM TELA CHEIA (MOBILE)
   A barra do overlay usa exatamente as mesmas classes da barra
   da página (.pdv-search-bar / -icon / -input) e o overlay mora
   dentro de #vendas, então herda os mesmos overrides. Nada de
   estilo próprio para o campo — é o que garante que ele fique
   idêntico antes e depois do toque.
   ═══════════════════════════════════════════════════════════ */
.pdv-so { display: none; }
.pdv-scan-btn { display: none; }

@media (max-width: 768px) {
  /* no mobile o botão de listar dá lugar ao scanner */
  #vendas #pdvBrowseBtn { display: none !important; }

  /* Só na barra da página — o overlay não tem scanner. */
  .pdv-scan-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    padding: 0;
    border: none;
    background: none;
    color: var(--gold);
    cursor: pointer;
  }
  .pdv-scan-btn:active { transform: scale(0.92); }

  /* ── Overlay ─────────────────────────────────────────────── */
  .pdv-so.pdv-so-aberto {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 9600;
    /* mesmo fundo do body — antes era #000 puro e destoava do app */
    background-color: var(--bg-deep);
    background-image:
      radial-gradient(ellipse 70% 40% at 50% -5%, rgba(212, 175, 55, 0.06), transparent),
      radial-gradient(ellipse 50% 30% at 90% 110%, rgba(184, 134, 11, 0.04), transparent);
    flex-direction: column;
    padding-top: calc(env(safe-area-inset-top, 0px) + var(--mobile-status-gap, 0px));
  }

  /* Recuo lateral igual ao da barra na página (8px do .app-wrapper
     + 14px do #vendas), com o voltar ocupando a esquerda. */
  .pdv-so-topo {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 6px;
    /* --so-offset é medido no JS para a barra cair exatamente onde
       ela estava na página. Sem isso o campo "pula" ao abrir. */
    padding: calc(10px + var(--so-offset, 0px)) 22px 0;
    transition: padding-top 0s;
  }

  .pdv-so-titulo {
    flex: 1;
    min-width: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
  }

  /* flex-basis 100% força a barra para a linha de baixo */
  .pdv-so-topo .pdv-search-bar { flex: 0 0 100%; min-width: 0; }

  .pdv-so-voltar {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -11px;  /* alinha o ícone à margem, não a caixa do botão */
    padding: 0;
    border: none;
    background: none;
    color: var(--text-primary);
    cursor: pointer;
  }
  .pdv-so-voltar:active { transform: scale(0.92); }

  .pdv-so-barra-info {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 22px 10px;
  }

  .pdv-so-contagem { font-size: 0.72rem; color: var(--text-muted); }

  /* ── Lista de produtos ───────────────────────────────────── */
  .pdv-so-lista {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 22px calc(16px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .pdv-so-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 66px;
    text-align: left;
    padding: 14px 14px;
    background: #141414;
    border: 1px solid var(--border);
    border-radius: 12px;
    color: inherit;
    font: inherit;
    cursor: pointer;
  }
  .pdv-so-item:active { background: #1b1b1b; }

  .pdv-so-item-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }

  .pdv-so-item-nome {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .pdv-so-item-meta { font-size: 0.68rem; color: var(--text-muted); }

  .pdv-so-item-dir {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
  }

  .pdv-so-item-preco { font-size: 0.88rem; font-weight: 700; color: var(--gold); }

  .pdv-so-item-estoque { font-size: 0.66rem; font-weight: 600; }
  .pdv-so-item-estoque.ok    { color: var(--text-muted); }
  .pdv-so-item-estoque.baixo { color: #FF9800; }
  .pdv-so-item-estoque.zero  { color: #FF5252; }

  .pdv-so-item-zero { opacity: 0.5; cursor: not-allowed; }

  .pdv-so-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 48px 20px;
    text-align: center;
  }
  .pdv-so-vazio-titulo { font-size: 0.86rem; font-weight: 600; color: var(--text-secondary); }
  .pdv-so-vazio-sub    { font-size: 0.74rem; color: var(--text-muted); }
}

/* ═══════════════════════════════════════════════════════════
   CABEÇALHO CONTEXTUAL (MOBILE)
   Em seções fora da barra inferior, "← Nome da seção" ocupa o
   lugar da marca e do badge de usuário. Desktop nunca muda.
   ═══════════════════════════════════════════════════════════ */
.app-header-ctx { display: none; }

@media (max-width: 768px) {
  body.secao-secundaria .app-brand,
  body.secao-secundaria #authUserBadge {
    display: none !important;
  }

  body.secao-secundaria .app-header-ctx {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }

  .app-ctx-voltar {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -10px;   /* alinha o ícone à margem, não a caixa do botão */
    padding: 0;
    border: none;
    background: none;
    color: var(--text-primary);
    cursor: pointer;
  }
  .app-ctx-voltar:active { transform: scale(0.92); }

  .app-ctx-titulo {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
}

/* Barra inferior some nas seções secundárias — lá a navegação é o
   "←" do cabeçalho. Sem a barra, o espaço que o body reservava para
   ela viraria rolagem vazia no fim, então some junto. */
@media (max-width: 768px) {
  body.secao-secundaria .mobile-bottom-nav {
    display: none !important;
  }

  body.secao-secundaria {
    padding-bottom: calc(var(--safe-bottom) + 8px) !important;
  }

  /* o aviso de sync se apoiava na altura da barra */
  body.secao-secundaria .sync-status {
    bottom: calc(var(--safe-bottom) + 14px);
  }
}

/* ═══════════════════════════════════════════════════════════
   PDV — abertura da busca (MOBILE)
   A barra já fica pinada na mesma posição da página, então ela
   é tratada como elemento compartilhado: NÃO anima. O que anima
   é o painel, que desdobra a partir da faixa da própria barra
   (--so-top / --so-bottom, medidos no JS), e o conteúdo novo,
   que entra escalonado depois.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .pdv-so.pdv-so-aberto {
    --so-top: 70px;
    --so-bottom: 70%;
    animation: pdvSoDesdobrar 420ms cubic-bezier(0.32, 0.72, 0, 1) both;
    will-change: clip-path;
  }

  @keyframes pdvSoDesdobrar {
    from { clip-path: inset(var(--so-top) 0 var(--so-bottom) 0 round 14px); }
    to   { clip-path: inset(0 0 0 0 round 0); }
  }

  .pdv-so.pdv-so-fechando {
    animation: pdvSoRecolher 280ms cubic-bezier(0.4, 0, 0.7, 0.2) both;
  }

  @keyframes pdvSoRecolher {
    from { clip-path: inset(0 0 0 0 round 0); }
    to   { clip-path: inset(var(--so-top) 0 var(--so-bottom) 0 round 14px); }
  }

  /* A barra não anima: é o mesmo objeto que estava na tela.
     Qualquer fade ou deslocamento nela quebraria a continuidade. */
  .pdv-so.pdv-so-aberto .pdv-search-bar { animation: none; }

  /* Seta e título são novos na tela — entram, mas discretos. */
  .pdv-so.pdv-so-aberto .pdv-so-voltar,
  .pdv-so.pdv-so-aberto .pdv-so-titulo {
    animation: pdvSoSurgir 260ms 120ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  @keyframes pdvSoSurgir {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: none; }
  }

  .pdv-so.pdv-so-aberto .pdv-so-barra-info {
    animation: pdvSoSubir 280ms 150ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  /* Escalonamento dos resultados: dá a leitura de lista sendo
     preenchida, não de bloco que apareceu de uma vez. O limite de
     8 evita atraso perceptível em catálogo grande. */
  .pdv-so.pdv-so-aberto .pdv-so-item {
    animation: pdvSoSubir 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .pdv-so.pdv-so-aberto .pdv-so-item:nth-child(1) { animation-delay: 180ms; }
  .pdv-so.pdv-so-aberto .pdv-so-item:nth-child(2) { animation-delay: 218ms; }
  .pdv-so.pdv-so-aberto .pdv-so-item:nth-child(3) { animation-delay: 252ms; }
  .pdv-so.pdv-so-aberto .pdv-so-item:nth-child(4) { animation-delay: 282ms; }
  .pdv-so.pdv-so-aberto .pdv-so-item:nth-child(5) { animation-delay: 308ms; }
  .pdv-so.pdv-so-aberto .pdv-so-item:nth-child(6) { animation-delay: 330ms; }
  .pdv-so.pdv-so-aberto .pdv-so-item:nth-child(7) { animation-delay: 348ms; }
  .pdv-so.pdv-so-aberto .pdv-so-item:nth-child(n+8) { animation-delay: 360ms; }

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

  /* Ao fechar, nada de escalonar: sair tem que ser imediato. */
  .pdv-so.pdv-so-fechando .pdv-so-voltar,
  .pdv-so.pdv-so-fechando .pdv-so-titulo,
  .pdv-so.pdv-so-fechando .pdv-so-barra-info,
  .pdv-so.pdv-so-fechando .pdv-so-item {
    animation: none;
  }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .pdv-so.pdv-so-aberto,
  .pdv-so.pdv-so-fechando,
  .pdv-so.pdv-so-aberto .pdv-so-voltar,
  .pdv-so.pdv-so-aberto .pdv-so-titulo,
  .pdv-so.pdv-so-aberto .pdv-so-barra-info,
  .pdv-so.pdv-so-aberto .pdv-so-item {
    animation: none;
    clip-path: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   SCANNER DE CÓDIGO DE BARRAS (MOBILE)
   Oculto por padrão. A condição inclui "landscape com pouca
   altura" porque o telefone deitado passa de 768px de largura —
   sem isso o scanner sumiria justamente ao girar o aparelho.
   Desktop não entra em nenhuma das duas condições.
   ═══════════════════════════════════════════════════════════ */
.pdv-scan { display: none; }

@media (max-width: 768px), (orientation: landscape) and (max-height: 520px) {
  .pdv-scan.pdv-scan-aberto {
    display: block;
    position: fixed;
    inset: 0;
    /* abaixo do #alertOverlay (9000) para os avisos aparecerem
       sobre a câmera sem precisar fechá-la */
    z-index: 8000;
    background: #000;
  }

  .pdv-scan-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
  }

  .pdv-scan-ui {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: calc(env(safe-area-inset-top, 0px) + var(--mobile-status-gap, 0px));
    /* escurece as bordas e destaca o centro */
    background: radial-gradient(ellipse 78% 34% at 50% 44%, transparent 0%, rgba(0,0,0,0.62) 100%);
  }

  .pdv-scan-topo {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    flex-shrink: 0;
  }

  .pdv-scan-fechar {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -10px;
    padding: 0;
    border: none;
    background: none;
    color: #fff;
    cursor: pointer;
  }

  .pdv-scan-titulo {
    font-size: 1.02rem;
    font-weight: 700;
    color: #fff;
  }

  /* Moldura de mira — as medidas mudam com a orientação, ver abaixo */
  .pdv-scan-alvo {
    position: relative;
    margin: auto 0;
    border: 2px solid rgba(255,255,255,0.85);
    border-radius: 14px;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.28);
  }

  .pdv-scan-linha {
    position: absolute;
    left: 8px;
    right: 8px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
    box-shadow: 0 0 10px rgba(212,175,55,0.8);
    animation: pdvScanVarrer 2s ease-in-out infinite;
  }

  @keyframes pdvScanVarrer {
    0%, 100% { top: 12px; }
    50%      { top: calc(100% - 14px); }
  }

  .pdv-scan-status {
    margin: 0 0 auto;
    padding: 18px 24px calc(28px + env(safe-area-inset-bottom, 0px));
    font-size: 0.86rem;
    font-weight: 500;
    color: rgba(255,255,255,0.92);
    text-align: center;
    text-shadow: 0 1px 6px rgba(0,0,0,0.8);
  }

  @media (prefers-reduced-motion: reduce) {
    .pdv-scan-linha { animation: none; top: 50%; }
  }
}

/* ═══════════════════════════════════════════════════════════
   SCANNER — animações de abertura, fechamento e leitura OK
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px), (orientation: landscape) and (max-height: 520px) {
  /* ── Abertura ────────────────────────────────────────────── */
  .pdv-scan.pdv-scan-aberto { animation: pdvScanEntrar 260ms ease both; }

  @keyframes pdvScanEntrar {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* A imagem da câmera assenta com um leve zoom-out, como um
     visor focando. */
  .pdv-scan.pdv-scan-aberto .pdv-scan-video {
    animation: pdvScanVisor 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  @keyframes pdvScanVisor {
    from { transform: scale(1.08); opacity: 0.4; }
    to   { transform: scale(1);    opacity: 1; }
  }

  /* Moldura entra depois da imagem, para não competir com ela */
  .pdv-scan.pdv-scan-aberto .pdv-scan-alvo {
    animation: pdvScanMira 380ms 140ms cubic-bezier(0.34, 1.3, 0.64, 1) both;
  }

  @keyframes pdvScanMira {
    from { opacity: 0; transform: scale(0.88); }
    to   { opacity: 1; transform: scale(1); }
  }

  .pdv-scan.pdv-scan-aberto .pdv-scan-topo,
  .pdv-scan.pdv-scan-aberto .pdv-scan-status {
    animation: pdvScanTexto 300ms 200ms ease both;
  }

  @keyframes pdvScanTexto {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* ── Fechamento ──────────────────────────────────────────── */
  .pdv-scan.pdv-scan-fechando {
    animation: pdvScanSair 200ms ease both;
  }

  @keyframes pdvScanSair {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.97); }
  }

  /* ── Leitura reconhecida ─────────────────────────────────── */
  .pdv-scan-check {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00C48C;
    opacity: 0;
    transform: scale(0.5);
  }

  /* moldura confirma em verde e dá um pulso */
  .pdv-scan-ok .pdv-scan-alvo {
    border-color: #00C48C;
    animation: pdvScanPulso 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  @keyframes pdvScanPulso {
    0%   { transform: scale(1);    box-shadow: 0 0 0 9999px rgba(0,0,0,0.28), 0 0 0 0 rgba(0,196,140,0.55); }
    45%  { transform: scale(1.04); box-shadow: 0 0 0 9999px rgba(0,0,0,0.28), 0 0 0 14px rgba(0,196,140,0); }
    100% { transform: scale(1);    box-shadow: 0 0 0 9999px rgba(0,0,0,0.28), 0 0 0 0 rgba(0,196,140,0); }
  }

  /* a linha de varredura para; o check assume */
  .pdv-scan-ok .pdv-scan-linha { animation: none; opacity: 0; }

  .pdv-scan-ok .pdv-scan-check {
    animation: pdvScanCheck 420ms cubic-bezier(0.34, 1.45, 0.64, 1) both;
  }

  @keyframes pdvScanCheck {
    from { opacity: 0; transform: scale(0.5); }
    60%  { opacity: 1; transform: scale(1.12); }
    to   { opacity: 1; transform: scale(1); }
  }

  .pdv-scan-ok .pdv-scan-status {
    color: #00C48C;
    font-weight: 700;
    animation: pdvScanTexto 240ms ease both;
  }

  @media (prefers-reduced-motion: reduce) {
    .pdv-scan.pdv-scan-aberto,
    .pdv-scan.pdv-scan-aberto .pdv-scan-video,
    .pdv-scan.pdv-scan-aberto .pdv-scan-alvo,
    .pdv-scan.pdv-scan-aberto .pdv-scan-topo,
    .pdv-scan.pdv-scan-aberto .pdv-scan-status,
    .pdv-scan.pdv-scan-fechando,
    .pdv-scan-ok .pdv-scan-alvo,
    .pdv-scan-ok .pdv-scan-check { animation: none; }
    .pdv-scan-ok .pdv-scan-check { opacity: 1; transform: none; }
  }
}

/* ═══════════════════════════════════════════════════════════
   CARRINHO DO PDV — redesenho (MOBILE)
   Problema do layout anterior: tudo tinha o mesmo peso visual.
   O badge dourado, o "Limpar" vermelho, o preço e o total
   disputavam atenção, e o item tinha o preço solto à direita
   com um link vermelho flutuando embaixo.
   Aqui a hierarquia é explícita: total > preço do item > nome >
   metadados > ações. Nada disso vaza para o desktop.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Cabeçalho ───────────────────────────────────────────── */
  #vendas .pdv-cart-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
  }

  #vendas #pdvCartCount.carrinho-badge {
    padding: 0 !important;
    border: none !important;
    background: none !important;
    border-radius: 0 !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    color: var(--gold) !important;
  }

  #vendas .pdv-cart-head .btn-ghost {
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    padding: 4px 2px !important;
    color: var(--red) !important;
    background: none !important;
    border: none !important;
  }

  /* ── Item do carrinho ────────────────────────────────────── */
  #vendas .pdv-cart-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "icone nome  acao"
      "icone sub   total";
    align-items: center;
    gap: 6px 12px;
    padding: 13px 14px;
    background: #141414;
    border: 1px solid var(--border);
    border-radius: 12px;
  }

  /* marca visual de "já está no carrinho" — ocupa as duas linhas,
     então fica centralizado em relação ao bloco de texto */
  #vendas .pdv-ci-icone {
    grid-area: icone;
    align-self: center;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(0, 196, 140, 0.14);
    color: #00C48C;
    flex-shrink: 0;
  }

  #vendas .pdv-ci-nome {
    grid-area: nome;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.25;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* "1× R$ 119,90" — contexto do cálculo, não protagonista */
  #vendas .pdv-ci-sub {
    grid-area: sub;
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
  }

  #vendas .pdv-ci-total {
    grid-area: total;
    justify-self: end;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: -0.02em;
    white-space: nowrap;
  }

  /* remover vira ✕ compacto no canto: o texto vermelho competia
     com o preço logo abaixo dele */
  #vendas .pdv-ci-rm {
    grid-area: acao;
    justify-self: end;
    display: flex;
  }

  #vendas .pdv-ci-rm .btn-ghost {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border: none !important;
    border-radius: 9px !important;
    background: rgba(255, 82, 82, 0.12) !important;
    /* zera o rótulo "✕ remover" e desenha só o ícone */
    font-size: 0 !important;
    color: var(--red) !important;
    line-height: 1;
  }

  #vendas .pdv-ci-rm .btn-ghost::before {
    content: '✕';
    font-size: 13px;
    line-height: 1;
  }

  #vendas .pdv-ci-rm .btn-ghost:active {
    background: rgba(255, 82, 82, 0.24) !important;
  }

  /* ── Resumo ──────────────────────────────────────────────── */
  #vendas .pdv-cart-footer { gap: 0 !important; }

  #vendas .pdv-summary-rows {
    gap: 0;
    padding: 14px 2px 0;
  }

  /* só espaçamento — cor e peso ficam com as regras base, que já
     pintam desconto de vermelho e lucro/margem de verde */
  #vendas .pdv-sum-row {
    padding: 7px 0;
    font-size: 0.83rem;
  }

  #vendas .pdv-sum-divider {
    margin: 10px 0;
    background: var(--border);
  }

  /* ── Total: o ponto de chegada da tela ───────────────────── */
  #vendas .pdv-total-block {
    margin-top: 14px;
    padding: 14px 0 0 !important;
    background: none !important;
    border: none !important;
    border-top: 1px solid var(--border) !important;
    border-radius: 0 !important;
    gap: 4px;
  }

  #vendas .pdv-total-label {
    font-size: 0.64rem;
    letter-spacing: 1.4px;
    color: var(--text-muted);
  }

  #vendas .pdv-total-val {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -1.5px;
    line-height: 1;
  }

  /* ── Finalizar ───────────────────────────────────────────── */
  #vendas .pdv-btn-finalizar {
    margin-top: 16px;
    padding: 16px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    border-radius: 14px !important;
    letter-spacing: 0.2px !important;
  }

  /* ── Carrinho vazio ──────────────────────────────────────── */
  #vendas .pdv-cart-empty {
    padding: 34px 18px !important;
    background: #141414;
    border: 1px dashed rgba(255,255,255,0.09);
    border-radius: 12px;
  }
  #vendas .pdv-cart-empty p {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text-secondary);
  }
  #vendas .pdv-cart-empty small { font-size: 0.72rem; color: var(--text-muted); }
  #vendas .pdv-cart-empty kbd { display: none; }
}

/* O ícone de item no carrinho é do layout mobile; o desktop
   mantém a lista como estava. */
@media (min-width: 769px) {
  .pdv-ci-icone { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   SCANNER — orientação
   Código de barras é largo. Com o telefone em pé a área útil
   é estreita, então a mira fica vertical: para encaixar o
   código nela o usuário naturalmente gira o aparelho. Deitado,
   a mira acompanha e o aviso some.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) and (orientation: portrait) {
  .pdv-scan-alvo {
    width: min(52vw, 210px);
    height: min(56vh, 400px);
  }

  /* a varredura acompanha o eixo maior: cruza na horizontal */
  .pdv-scan-linha {
    top: 8px;
    bottom: 8px;
    left: 12px;
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, transparent, var(--gold-bright), transparent);
    animation: pdvScanVarrerH 2s ease-in-out infinite;
  }

  @keyframes pdvScanVarrerH {
    0%, 100% { left: 12px; }
    50%      { left: calc(100% - 14px); }
  }

  .pdv-scan-girar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 22px 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gold);
    text-align: center;
    text-shadow: 0 1px 6px rgba(0,0,0,0.8);
  }

  .pdv-scan-girar svg {
    flex-shrink: 0;
    animation: pdvScanGirar 2.4s ease-in-out infinite;
  }

  @keyframes pdvScanGirar {
    0%, 55%, 100% { transform: rotate(0deg); }
    75%, 90%      { transform: rotate(-90deg); }
  }
}

/* Deitado: mira larga, sem aviso — é a posição certa */
@media (orientation: landscape) and (max-height: 520px) {
  .pdv-scan-alvo {
    width: min(72vw, 460px);
    height: min(46vh, 190px);
  }

  .pdv-scan-girar { display: none; }

  .pdv-scan-ui { padding-top: env(safe-area-inset-top, 0px); }
  .pdv-scan-topo { padding: 6px 16px; }
  .pdv-scan-status { padding: 10px 24px calc(12px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .pdv-scan-girar svg { animation: none; }
}

/* ═══════════════════════════════════════════════════════════
   CONFIGURAÇÕES — Dados do Recibo
   Grid de 2 colunas no desktop, 1 no mobile.
   ═══════════════════════════════════════════════════════════ */
.cfg-recibo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

/* o endereço é o campo mais longo: ocupa a linha inteira */
.cfg-recibo-campo-largo { grid-column: 1 / -1; }

.cfg-recibo-grid .form-group { margin: 0; min-width: 0; }
.cfg-recibo-grid .cfg-input  { width: 100%; box-sizing: border-box; }

/* ── Prévia do cupom ─────────────────────────────────────── */
.cfg-recibo-preview {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cfg-recibo-prev-label {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
}

/* fundo dourado igual ao cabeçalho impresso, para a prévia
   mostrar o resultado real e não uma aproximação */
.cfg-recibo-papel {
  background: var(--gold);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  text-align: center;
  color: #141414;
  overflow-wrap: anywhere;
}

.cfg-recibo-nome {
  font-family: 'Helvetica', Arial, sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1.1;
}

.cfg-recibo-linha {
  margin-top: 5px;
  font-size: 0.66rem;
  line-height: 1.35;
  color: #2a2000;
}

@media (max-width: 768px) {
  .cfg-recibo-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .cfg-recibo-campo-largo { grid-column: auto; }
  .cfg-recibo-nome  { font-size: 1.1rem; }
  .cfg-recibo-papel { padding: 12px 14px; }
}

/* ═══════════════════════════════════════════════════════════
   ESTOQUE — situação e minigráficos
   O JS passou a emitir um cabeçalho, um wrapper .est-status-grade
   e ícones. Nada disso pode alterar o desktop, então lá:
     • o cabeçalho e os ícones somem;
     • o wrapper vira display:contents, fazendo os itens voltarem
       a ser filhos efetivos do flex de .est-status-row.
   Resultado: desktop renderiza exatamente como antes.
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  .est-status-head  { display: none; }
  .est-status-ico   { display: none; }
  .est-status-grade { display: contents; }
  .est-spark-wrap   { display: none; }
}

/* ───────────────────────── MOBILE ───────────────────────── */
@media (max-width: 768px) {
  /* card único, como na referência */
  #estoque .est-status-row {
    display: block;
    padding: 14px 14px 12px;
    background: #131313;
    border: 1px solid var(--border);
    border-radius: 14px;
    margin-bottom: 14px;
  }

  .est-status-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
  }

  .est-status-titulo {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    color: var(--text-secondary);
  }

  /* 6 colunas numa linha só — é o formato da referência */
  .est-status-grade {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
  }

  #estoque .est-status-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* a regra base usa justify-content:center; com "Sem giro 30d"
       quebrando em duas linhas, o item ficava mais alto e o ícone
       era empurrado para cima. Ancorar no topo alinha os seis. */
    justify-content: flex-start;
    gap: 5px;
    padding: 0;
    min-width: 0;
    background: none;
    border: none;
    border-radius: 0;
    transform: none;
  }
  #estoque .est-status-item:hover { transform: none; border: none; }

  /* círculo contornado na cor do status */
  .est-status-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
  }
  .est-status-ico svg { width: 14px; height: 14px; }

  #estoque .est-status-val {
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1;
  }

  #estoque .est-status-lbl {
    font-size: 0.53rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.15;
    text-align: center;
    color: var(--text-muted);
    /* altura de duas linhas em todos: os rótulos curtos ocupam o
       mesmo espaço dos longos, mantendo a régua igual */
    min-height: calc(0.53rem * 1.15 * 2);
  }

  /* cores por status: o ícone herda, o número acompanha */
  .est-status-normal   .est-status-ico { color: #22C55E; }
  .est-status-baixo    .est-status-ico { color: var(--gold-bright); }
  .est-status-critico  .est-status-ico { color: #F59E0B; }
  .est-status-falta    .est-status-ico { color: #EF4444; }
  .est-status-parado   .est-status-ico { color: #6366F1; }
  .est-status-parado90 .est-status-ico { color: #A855F7; }

  #estoque .est-status-normal   .est-status-val { color: #22C55E; }
  #estoque .est-status-baixo    .est-status-val { color: var(--gold-bright); }
  #estoque .est-status-critico  .est-status-val { color: #F59E0B; }
  #estoque .est-status-falta    .est-status-val { color: #EF4444; }
  #estoque .est-status-parado   .est-status-val { color: #6366F1; }
  #estoque .est-status-parado90 .est-status-val { color: #A855F7; }

  /* filtro ativo: destaca sem reintroduzir caixa */
  #estoque .est-status-item.est-status-ativo .est-status-ico {
    background: currentColor;
  }
  #estoque .est-status-item.est-status-ativo .est-status-ico svg { stroke: #0E0E0E; }

  /* ── Minigráficos nos cards de métrica ─────────────────── */
  #estoque .est-kpi-row .dash-kpi-card {
    position: relative;
    overflow: hidden;
  }

  /* Padrão (cards em 2 colunas): gráfico no tamanho original. */
  .est-spark-wrap {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 52%;
    height: 46px;
    pointer-events: none;
    /* esmaece à esquerda para o gráfico não brigar com o texto */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 42%);
    mask-image: linear-gradient(90deg, transparent, #000 42%);
  }

  /* Vendedor (card em largura total): gráfico maior, estendido à
     direita e preenchendo toda a altura do card. */
  body[data-role="vendedor"] .est-spark-wrap {
    top: 0;
    width: 62%;
    height: auto;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 38%);
    mask-image: linear-gradient(90deg, transparent, #000 38%);
  }

  .est-spark { width: 100%; height: 100%; display: block; }

  /* o valor precisa continuar legível por cima do gráfico */
  #estoque .est-kpi-row .dash-kpi-val,
  #estoque .est-kpi-row .dash-kpi-sub { position: relative; z-index: 1; }
}

/* Paleta dos KPIs de estoque — MOBILE apenas.
   Total de produtos passa a amarelo e Lucro potencial a laranja;
   investido (azul) e mercado (verde) ficam como estavam.
   As classes kpi-roxo/kpi-laranja seguem intactas no desktop. */
@media (max-width: 768px) {
  #estoque .est-kpi-row .dash-kpi-card.kpi-roxo::after { background: #EAB308; }
  #estoque .est-kpi-row .dash-kpi-card.kpi-roxo .dash-kpi-ico {
    background: rgba(234, 179, 8, 0.14);
    color: #EAB308;
  }

  #estoque .est-kpi-row .dash-kpi-card.kpi-laranja::after { background: #F59E0B; }
  #estoque .est-kpi-row .dash-kpi-card.kpi-laranja .dash-kpi-ico {
    background: rgba(245, 158, 11, 0.14);
    color: #F59E0B;
  }
}

/* ═══════════════════════════════════════════════════════════
   ESTOQUE — busca, filtro e título (MOBILE)
   Task 1: barra e filtro no estilo da referência.
   Task 2: contador em dourado, alinhado à direita.
   Task 3: busca/filtro primeiro, título depois, produtos por último.
   Tudo preso ao breakpoint — desktop intocado.
   ═══════════════════════════════════════════════════════════ */

/* a lupa em traço só existe no mobile */
.busca-icon-svg { display: none; }

@media (max-width: 768px) {
  /* ── Task 3: inverte a ordem visual sem mexer no DOM ────── */
  #estoque .estoque-header {
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 12px;
  }

  /* ── Task 1: busca e filtro lado a lado ─────────────────── */
  #estoque .est-controles {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    width: 100%;
  }

  #estoque .busca-wrapper {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none !important;
    gap: 10px;
    height: 44px;
    padding: 0 14px;
    background: #141414;
    border: 1px solid var(--border);
    border-radius: 12px;
  }

  #estoque .busca-wrapper:focus-within {
    border-color: var(--gold);
    box-shadow: none;
  }

  /* emoji sai, traço entra */
  #estoque .busca-icon { display: none; }
  #estoque .busca-icon-svg {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--text-muted);
  }

  #estoque .busca-input {
    padding: 0 !important;
    /* 16px é o mínimo que impede o zoom automático do Safari no iOS
       ao focar o campo. Abaixo disso ele amplia a página sozinho. */
    font-size: 16px !important;
  }

  /* filtro: pilha com ícone dourado à esquerda */
  #estoque .est-controles .sel-custom {
    flex: 0 0 auto;
    width: auto !important;
  }

  #estoque .est-controles .sel-trigger {
    min-width: 0;
    height: 44px;
    padding: 0 12px;
    gap: 8px;
    border-radius: 12px;
    background: #141414;
    border: 1px solid var(--border);
    box-shadow: none;
    font-size: 0.82rem;
    font-weight: 600;
  }

  /* ícone de filtro desenhado em CSS: evita mexer na marcação
     compartilhada com o desktop */
  #estoque .est-controles .sel-trigger::before {
    content: '';
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    background: var(--gold);
    -webkit-mask: var(--ico-filtro) center / contain no-repeat;
    mask: var(--ico-filtro) center / contain no-repeat;
  }

  #estoque .est-controles .sel-custom.aberto .sel-trigger,
  #estoque .est-controles .sel-custom.sel-filtrando .sel-trigger {
    border-color: rgba(212,175,55,0.55);
    box-shadow: none;
  }

  /* o select nativo continua oculto pelo componente custom */
  #estoque .est-filtro-select { display: none !important; }

  /* ── Task 2: título à esquerda, contador dourado à direita ─ */
  #estoque .estoque-titulo-linha {
    width: 100%;
    justify-content: space-between;
  }

  #estoque .estoque-header h3 {
    font-size: 0.95rem;
    font-weight: 700;
  }

  #estoque .busca-contador {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--gold);
  }
}

:root {
  /* funil usado como máscara no botão de filtro */
  --ico-filtro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='7' x2='20' y2='7'/%3E%3Cline x1='7' y1='12' x2='17' y2='12'/%3E%3Cline x1='10' y1='17' x2='14' y2='17'/%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════════════════════
   ESTOQUE — ajustes de topo e do menu de filtro (MOBILE)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* ── Task 1: opções do filtro vazavam do gatilho ──────────
     .sel-opts é ancorado com left:0/right:0, então herdava a
     largura do botão. "Sem giro 30d" e "Em falta" não cabiam.
     Solta a borda direita e deixa o menu crescer pelo conteúdo,
     alinhado à direita para não sair da tela. */
  #estoque .est-controles .sel-opts {
    left: auto;
    right: 0;
    min-width: 100%;
    width: max-content;
    max-width: min(76vw, 260px);
  }

  #estoque .est-controles .sel-opt {
    white-space: nowrap;
  }

  /* ── Task 2: sem botão de atualizar; "Novo Produto" menor,
     encostado à direita ─────────────────────────────────── */
  #estoque .page-banner-actions .btn-ghost { display: none; }

  #estoque .page-banner-actions {
    justify-content: flex-end;
  }

  #estoque .page-banner-actions .btn-primary {
    flex: 0 0 auto;
    width: auto;
    height: 40px;
    padding: 0 16px;
    font-size: 0.86rem;
  }
}

/* ═══════════════════════════════════════════════════════════
   HISTÓRICO — formas de pagamento em rosca + legenda (MOBILE)
   No desktop o card é transparente (display:contents), a rosca
   some e as badges continuam exatamente como eram.
   ═══════════════════════════════════════════════════════════ */
.hist-formas-card   { display: contents; }
.hist-formas-titulo { display: none; }
.hist-formas-rosca  { display: none; }

@media (max-width: 768px) {
  .hist-formas-card {
    display: grid;
    grid-template-columns: minmax(0, 118px) minmax(0, 1fr);
    grid-template-areas:
      "titulo titulo"
      "rosca  legenda";
    align-items: center;
    column-gap: 14px;
    padding: 14px 14px 16px;
    margin-bottom: 16px;
    background: #131313;
    border: 1px solid var(--border);
    border-radius: 14px;
  }

  .hist-formas-titulo {
    grid-area: titulo;
    display: block;
    margin-bottom: 12px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-muted);
  }

  /* caixa própria: o Chart.js mede a largura do elemento pai,
     então a rosca precisa deste contêiner para caber na coluna */
  .hist-formas-rosca {
    grid-area: rosca;
    display: block;
    position: relative;
    min-width: 0;
  }

  .hist-formas-rosca #histChartFormas {
    max-height: 118px !important;
  }

  .hist-formas-ico {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    pointer-events: none;
  }

  /* ── Badges viram linhas de legenda ───────────────────────── */
  #totaisPorForma {
    grid-area: legenda;
    min-width: 0;
    margin-bottom: 0;
  }

  #totaisPorForma ul {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 9px;
    margin: 0;
  }

  /* sem cápsula: fundo e borda saem, sobra o texto */
  #totaisPorForma li {
    padding: 0;
    border: none !important;
    background: none !important;
    border-radius: 0;
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--text-secondary);
    min-width: 0;
  }

  /* o ponto mantém a cor do método (currentColor da badge),
     por isso a cor original é reaplicada só nele e no valor */
  .forma-badge-dinheiro  .forma-badge-dot,
  .forma-badge-dinheiro  .forma-badge-valor { color: #22C55E; }
  .forma-badge-pix       .forma-badge-dot,
  .forma-badge-pix       .forma-badge-valor { color: #3B82F6; }
  .forma-badge-debito    .forma-badge-dot,
  .forma-badge-debito    .forma-badge-valor { color: #A78BFA; }
  .forma-badge-credito   .forma-badge-dot,
  .forma-badge-credito   .forma-badge-valor { color: #F59E0B; }
  .forma-badge-crediario .forma-badge-dot,
  .forma-badge-crediario .forma-badge-valor { color: #EF4444; }
  .forma-badge-outro     .forma-badge-dot,
  .forma-badge-outro     .forma-badge-valor { color: var(--text-secondary); }

  #totaisPorForma .forma-badge-dot { background: currentColor; }

  #totaisPorForma .forma-badge-valor {
    margin-left: auto;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
  }
}

/* ═══════════════════════════════════════════════════════════════
   RETROSPECTIVAS — Galeria (HUD) + Player "Wrapped"
   Todas as classes são novas (.retro-* / .nav-resumos-*).
   Nada aqui altera seletores pré-existentes.
   ═══════════════════════════════════════════════════════════════ */

/* ── Badge "novas" no nav desktop ─────────────────────────── */
.nav-btn-resumos { position: relative; }
.nav-resumos-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin-left: 6px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: #0A0A0A;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  border-radius: 999px;
  vertical-align: middle;
}
/* Ícone do tab Resumos — wrapper relativo p/ ancorar o contador sobre o SVG */
.mob-tab-ico {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
/* Contador "novas" EM CIMA do ícone (estilo notificação) */
.mob-tab-resumos-badge {
  position: absolute;
  top: -6px;
  right: -9px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  color: #0A0A0A;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  border-radius: 999px;
  box-shadow: 0 0 0 2px var(--bg-base);
  pointer-events: none;
  animation: retroBadgePop 0.3s var(--ease) both;
}
@keyframes retroBadgePop {
  0%   { transform: scale(0); }
  70%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* ── HUD / galeria ────────────────────────────────────────── */
/* No mobile o banner (ícone + título + subtítulo) fica oculto —
   aparece só no desktop, como as demais seções. */
@media (max-width: 768px) {
  #resumos .page-banner { display: none; }
}

.retro-filtros {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
#resumos .retro-filtro-btn {
  padding: 7px 16px;
  min-height: 0;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  cursor: pointer;
  transition: var(--transition);
}
#resumos .retro-filtro-btn:hover { border-color: var(--border-hover); color: var(--text-primary); background: var(--surface-1); }
#resumos .retro-filtro-btn.active {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  border-color: transparent;
  color: #0A0A0A;
}

.retro-secao-titulo {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin: 0 0 12px;
}
.retro-previas { margin-bottom: 28px; }

/* Destaques do topo: resumo da semana + mês em andamento na MESMA linha.
   auto-fit faz 2 itens dividirem a linha e, se só houver 1, ele preenche tudo. */
.retro-destaques {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  align-items: start;
}
.retro-destaque-col { min-width: 0; }

/* Grid preenche a largura toda (auto-fit colapsa colunas vazias) */
.retro-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-bottom: 4px;
}

/* Cartão — sobrescreve por completo o estilo global de <button> */
#resumos .retro-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  min-width: 0;
  position: relative;
  text-align: left;
  white-space: normal;
  letter-spacing: normal;
  font-weight: 400;
  font-family: inherit;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 18px 16px 22px;
  cursor: pointer;
  overflow: hidden;
  color: var(--text-primary);
  background:
    radial-gradient(140% 120% at 100% 0%, rgba(212,175,55,0.10), transparent 55%),
    var(--surface-1);
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s var(--ease), border-color 0.22s var(--ease), box-shadow 0.22s var(--ease);
}
#resumos .retro-card::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 5px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-dark));
}
#resumos .retro-card-semanal {
  background:
    radial-gradient(140% 120% at 100% 0%, rgba(124,58,237,0.16), transparent 55%),
    var(--surface-1);
}
#resumos .retro-card-semanal::before {
  background: linear-gradient(180deg, #A855F7, #DB2777);
}
#resumos .retro-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-lg);
  background:
    radial-gradient(140% 120% at 100% 0%, rgba(212,175,55,0.14), transparent 55%),
    var(--surface-1);
  color: var(--text-primary);
}
#resumos .retro-card-semanal:hover {
  background:
    radial-gradient(140% 120% at 100% 0%, rgba(124,58,237,0.22), transparent 55%),
    var(--surface-1);
}
#resumos .retro-card:active { transform: translateY(-1px) scale(0.995); }

/* Não vistas: realce sutil para mostrar quais faltam abrir */
#resumos .retro-card-unseen {
  border-color: rgba(212, 175, 55, 0.55);
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.35), var(--shadow-md);
}
#resumos .retro-card-unseen.retro-card-semanal {
  border-color: rgba(168, 85, 247, 0.55);
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.35), var(--shadow-md);
}

.retro-card-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  margin-bottom: 14px;
}
.retro-card-tag {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 9px;
  border-radius: 999px;
  color: var(--gold-bright);
  background: var(--gold-subtle);
}
.retro-card-semanal .retro-card-tag {
  color: #D8B4FE;
  background: rgba(124, 58, 237, 0.16);
}
.retro-card-novo {
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 9px;
  border-radius: 999px;
  color: #0A0A0A;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
}
.retro-card-live {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.01em;
}
.retro-card-periodo {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.retro-card-fat {
  font-size: 27px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--text-primary);
}
.retro-card-fat-lbl {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}
.retro-card-liq {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  width: 100%;
  margin: 16px 0 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-secondary);
}
.retro-card-liq strong { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.retro-card-liq.pos strong { color: var(--green); }
.retro-card-liq.neg strong { color: var(--red); }
.retro-card-play {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold-bright);
  letter-spacing: 0.01em;
}
.retro-card-semanal .retro-card-play { color: #D8B4FE; }

.retro-vazio {
  text-align: center;
  padding: 52px 24px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}
.retro-vazio-ico { font-size: 42px; margin-bottom: 14px; }
.retro-vazio-titulo { font-size: 17px; font-weight: 700; margin-bottom: 8px; color: var(--text-primary); }
.retro-vazio-txt {
  font-size: 13px;
  color: var(--text-secondary);
  max-width: 400px;
  margin: 0 auto;
  line-height: 1.55;
}

@media (max-width: 768px) {
  .retro-grid { grid-template-columns: 1fr; gap: 12px; }
  #resumos .retro-card { padding: 16px 16px 15px 20px; }
  .retro-card-fat { font-size: 25px; }
}

/* ══════════════════ PLAYER "WRAPPED" ══════════════════ */
body.retro-lock { overflow: hidden; }

.retro-player {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: none;
  background: #000;
  overscroll-behavior: contain;
}
.retro-player.ativo { display: block; }

.retro-progress {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 6;
  display: flex;
  gap: 4px;
  padding: calc(10px + var(--safe-top)) 12px 8px;
}
.retro-prog-track {
  flex: 1;
  height: 3px;
  border-radius: 3px;
  background: rgba(255,255,255,0.28);
  overflow: hidden;
}
.retro-prog-fill {
  height: 100%;
  width: 0%;
  background: #fff;
  border-radius: 3px;
}

.retro-close {
  position: absolute;
  top: calc(24px + var(--safe-top));
  right: 14px;
  z-index: 7;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,0.28);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(4px);
}
.retro-close svg { width: 20px; height: 20px; }

.retro-hint {
  position: absolute;
  bottom: calc(18px + var(--safe-bottom));
  left: 0; right: 0;
  z-index: 6;
  text-align: center;
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  pointer-events: none;
  letter-spacing: 0.02em;
}

.retro-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 72px 28px 64px;
  overflow: hidden;
  color: #fff;
  text-align: center;
  background-size: 200% 200%;
  animation: retroBgShift 12s ease infinite;
}
@keyframes retroBgShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Gradientes vibrantes por slide (estilo Wrapped) */
.retro-bg-0 { background-image: linear-gradient(135deg, #1DB954, #0F5132, #064E3B); }
.retro-bg-1 { background-image: linear-gradient(135deg, #F59E0B, #EF4444, #7C2D12); }
.retro-bg-2 { background-image: linear-gradient(135deg, #8B5CF6, #EC4899, #4C1D95); }
.retro-bg-3 { background-image: linear-gradient(135deg, #06B6D4, #3B82F6, #1E3A8A); }
.retro-bg-4 { background-image: linear-gradient(135deg, #F43F5E, #A21CAF, #4A044E); }
.retro-bg-5 { background-image: linear-gradient(135deg, #10B981, #0EA5E9, #075985); }
.retro-bg-6 { background-image: linear-gradient(135deg, #64748B, #334155, #0F172A); }
.retro-bg-7 { background-image: linear-gradient(135deg, #FBBF24, #F59E0B, #B45309); }
.retro-bg-final     { background-image: linear-gradient(135deg, #FFD700, #D4AF37, #7C6410, #1a1400); }
.retro-bg-final-neg { background-image: linear-gradient(135deg, #EF4444, #991B1B, #450A0A); }

/* Textura de brilho suave por cima */
.retro-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 40% at 20% 15%, rgba(255,255,255,0.18), transparent 60%),
    radial-gradient(50% 40% at 85% 90%, rgba(255,255,255,0.10), transparent 60%);
  pointer-events: none;
}

.retro-slide {
  position: relative;
  z-index: 2;
  max-width: 520px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  animation: retroSlideIn 0.55s var(--ease) both;
}
@keyframes retroSlideIn {
  0%   { opacity: 0; transform: translateY(24px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.retro-kicker {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.85);
  animation: retroPop 0.5s var(--ease) both;
}
.retro-line-top {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  animation: retroPop 0.5s 0.05s var(--ease) both;
}
.retro-hero-title {
  font-size: clamp(34px, 9vw, 58px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-shadow: 0 4px 30px rgba(0,0,0,0.25);
  animation: retroPop 0.6s 0.1s var(--ease) both;
}
.retro-hero-title-sm {
  font-size: clamp(26px, 6vw, 38px);
  font-weight: 800;
  letter-spacing: -0.02em;
  animation: retroPop 0.6s 0.1s var(--ease) both;
}
.retro-hero-sub {
  font-size: 15px;
  color: rgba(255,255,255,0.85);
  font-weight: 500;
  animation: retroPop 0.5s 0.2s var(--ease) both;
}
.retro-bignum {
  font-size: clamp(46px, 13vw, 84px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  text-shadow: 0 6px 40px rgba(0,0,0,0.28);
  animation: retroPop 0.6s 0.12s var(--ease) both;
}
.retro-bignum-final {
  background: linear-gradient(180deg, #fff, rgba(255,255,255,0.75));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.retro-line {
  font-size: 17px;
  font-weight: 500;
  color: rgba(255,255,255,0.92);
  animation: retroPop 0.5s 0.25s var(--ease) both;
}
.retro-line strong { font-weight: 800; }
.retro-emoji {
  font-size: 44px;
  margin-top: 4px;
  animation: retroBounce 0.7s 0.3s var(--ease) both;
}
@keyframes retroPop {
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes retroBounce {
  0%   { opacity: 0; transform: scale(0.4); }
  60%  { transform: scale(1.2); }
  100% { opacity: 1; transform: scale(1); }
}

.retro-destaque {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 26px;
  border-radius: var(--radius-lg);
  background: rgba(0,0,0,0.22);
  backdrop-filter: blur(4px);
  animation: retroPop 0.5s 0.3s var(--ease) both;
}
.retro-destaque strong { font-size: 28px; font-weight: 900; }
.retro-destaque span { font-size: 13px; color: rgba(255,255,255,0.8); }

.retro-line-multi {
  display: flex;
  gap: 12px;
  margin-top: 6px;
}
.retro-line-multi > div {
  flex: 1;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: rgba(0,0,0,0.22);
  backdrop-filter: blur(4px);
  animation: retroPop 0.5s 0.3s var(--ease) both;
}
.retro-line-multi span { display: block; font-size: 12px; color: rgba(255,255,255,0.8); margin-bottom: 4px; }
.retro-line-multi strong { font-size: 18px; font-weight: 800; }

/* Formas de pagamento (barras) */
.retro-formas {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}
.retro-forma-row { animation: retroPop 0.5s var(--ease) both; }
.retro-forma-head {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 5px;
}
.retro-forma-bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.25);
  overflow: hidden;
}
.retro-forma-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #fff, rgba(255,255,255,0.7));
  animation: retroGrow 0.9s var(--ease) both;
  transform-origin: left;
}
@keyframes retroGrow { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } }

/* Top produtos */
.retro-top {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.retro-top-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  background: rgba(0,0,0,0.22);
  backdrop-filter: blur(4px);
  animation: retroSlideRight 0.5s var(--ease) both;
}
@keyframes retroSlideRight {
  0% { opacity: 0; transform: translateX(-18px); }
  100% { opacity: 1; transform: translateX(0); }
}
.retro-top-pos {
  width: 26px; height: 26px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 13px; font-weight: 800;
  color: #0A0A0A;
  background: #fff;
}
.retro-top-nome { flex: 1; text-align: left; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.retro-top-qtd { font-size: 14px; font-weight: 800; }

/* Margem + resumo final */
.retro-margem {
  font-size: 16px;
  color: rgba(255,255,255,0.92);
  animation: retroPop 0.5s 0.35s var(--ease) both;
}
.retro-margem strong { font-weight: 900; }
.retro-resumo-mini {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  width: 100%;
  max-width: 420px;
  animation: retroPop 0.5s 0.45s var(--ease) both;
}
.retro-resumo-mini > div {
  flex: 1;
  padding: 12px 8px;
  border-radius: var(--radius-md);
  background: rgba(0,0,0,0.28);
  backdrop-filter: blur(4px);
}
.retro-resumo-mini span { display: block; font-size: 11px; color: rgba(255,255,255,0.75); margin-bottom: 4px; }
.retro-resumo-mini strong { font-size: 14px; font-weight: 800; }
.retro-resumo-mini strong.pos { color: #86EFAC; }
.retro-resumo-mini strong.neg { color: #FCA5A5; }

/* Respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  .retro-stage,
  .retro-slide,
  .retro-kicker, .retro-line-top, .retro-hero-title, .retro-hero-title-sm,
  .retro-hero-sub, .retro-bignum, .retro-line, .retro-emoji,
  .retro-destaque, .retro-line-multi > div, .retro-forma-row,
  .retro-forma-fill, .retro-top-row, .retro-margem, .retro-resumo-mini {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Ajustes mobile do player */
@media (max-width: 768px) {
  .retro-stage { padding: 80px 22px 72px; }
  .retro-line-multi { flex-direction: row; }
}

/* ═══════════════════════════════════════════════════════════════
   POPUP DE SAUDAÇÃO (pós-login)
   ═══════════════════════════════════════════════════════════════ */
.sd-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9200;
  opacity: 0;
  transition: opacity 0.28s ease;
  touch-action: none;
}
.sd-overlay.ativo { display: block; opacity: 1; }

/* Trava o fundo enquanto o popup está aberto: sem scroll, sem interação */
body.sd-lock { overflow: hidden !important; }

.sd-modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -46%) scale(0.94);
  z-index: 9201;
  width: min(400px, 92vw);
  max-height: 88vh;
  overflow-y: auto;
  background:
    radial-gradient(120% 60% at 50% -8%, rgba(212,175,55,0.16), transparent 60%),
    linear-gradient(180deg, #221D12 0%, #1B160F 45%, var(--surface-1) 100%);
  border: 1px solid rgba(212,175,55,0.28);
  border-radius: var(--radius-xl);
  padding: 26px 24px 22px;
  box-shadow:
    0 32px 80px rgba(0,0,0,0.6),
    0 0 60px rgba(212,175,55,0.12),
    inset 0 1px 0 rgba(255,215,0,0.14);
  opacity: 0;
  transition: transform 0.32s cubic-bezier(0.34,1.56,0.64,1), opacity 0.22s ease;
  scrollbar-width: none;
}
.sd-modal::-webkit-scrollbar { display: none; }
.sd-modal.ativo {
  display: block;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Acento superior */
.sd-accent {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 110px; height: 3px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
  box-shadow: 0 0 16px 2px rgba(255,215,0,0.55);
}

.sd-head {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 20px;
}
.sd-head-ico {
  width: 46px; height: 46px;
  flex-shrink: 0;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 25%, rgba(255,215,0,0.42), rgba(212,175,55,0.12));
  border: 1px solid rgba(255,215,0,0.5);
  color: var(--gold-bright);
  box-shadow: 0 0 18px rgba(212,175,55,0.35), inset 0 0 12px rgba(255,215,0,0.18);
}
.sd-head-ico svg { width: 24px; height: 24px; }
.sd-head-txt { min-width: 0; }
.sd-greeting {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.5px;
  line-height: 1.15;
}
.sd-nome {
  font-size: 0.86rem;
  color: var(--gold);
  font-weight: 600;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hero de faturamento */
.sd-hero {
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(255,215,0,0.14), transparent 70%),
    linear-gradient(180deg, rgba(212,175,55,0.14), rgba(212,175,55,0.05));
  border: 1px solid rgba(212,175,55,0.34);
  border-radius: var(--radius-lg);
  padding: 18px 18px 16px;
  text-align: center;
  margin-bottom: 16px;
  box-shadow: 0 0 30px rgba(212,175,55,0.10), inset 0 1px 0 rgba(255,215,0,0.12);
}
.sd-hero-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gold);
  font-weight: 700;
}
.sd-hero-valor {
  font-size: 2.05rem;
  font-weight: 800;
  color: var(--gold-bright);
  letter-spacing: -1px;
  margin: 4px 0 8px;
  line-height: 1;
  text-shadow: 0 0 22px rgba(255,215,0,0.45);
}
.sd-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 999px;
  line-height: 1;
}
.sd-hero-badge svg { width: 14px; height: 14px; flex-shrink: 0; }
.sd-hero-badge.up   { background: var(--green-subtle); color: var(--green); border: 1px solid rgba(34,197,94,0.28); }
.sd-hero-badge.down { background: var(--red-subtle);   color: var(--red);   border: 1px solid rgba(239,68,68,0.28); }
.sd-hero-badge.flat { background: var(--surface-3);    color: var(--text-secondary); border: 1px solid var(--border); }
.sd-hero-badge:empty { display: none; }
.sd-hero-sub {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 8px;
  line-height: 1.45;
}
.sd-hero-sub:empty { display: none; }

/* Banner de meta batida */
.sd-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 0.82rem;
  line-height: 1.4;
}
.sd-meta.batida {
  background: linear-gradient(90deg, rgba(34,197,94,0.16), rgba(212,175,55,0.14));
  border: 1px solid rgba(34,197,94,0.32);
  color: var(--text-primary);
}
.sd-meta.pendente {
  background: linear-gradient(90deg, rgba(212,175,55,0.14), rgba(212,175,55,0.05));
  border: 1px solid rgba(212,175,55,0.3);
  color: var(--text-secondary);
}
.sd-meta-ico {
  width: 34px; height: 34px;
  flex-shrink: 0;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sd-meta-ico svg { width: 19px; height: 19px; }
.sd-meta.batida  .sd-meta-ico { background: rgba(34,197,94,0.18);  color: var(--green); }
.sd-meta.pendente .sd-meta-ico { background: var(--gold-subtle);    color: var(--gold); }
.sd-meta strong { color: var(--text-primary); font-weight: 700; }

/* Rótulo de seção */
.sd-secao {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-weight: 700;
  color: var(--gold);
  margin: 4px 2px 10px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.sd-secao::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(212,175,55,0.35), transparent);
}

/* Lista de insights */
.sd-insights { display: flex; flex-direction: column; gap: 9px; margin-bottom: 18px; }
.sd-insights:empty { display: none; }
.sd-row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 13px;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(212,175,55,0.07), rgba(212,175,55,0.025));
  border: 1px solid rgba(212,175,55,0.18);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-secondary);
}
.sd-row strong { color: var(--text-primary); font-weight: 700; }
.sd-row-ico {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sd-row-ico svg { width: 18px; height: 18px; }
.sd-row-warn   .sd-row-ico { background: rgba(245,158,11,0.14); color: var(--warning); }
.sd-row-danger .sd-row-ico { background: var(--red-subtle);     color: var(--red); }
.sd-row-info   .sd-row-ico { background: rgba(212,175,55,0.2); color: var(--gold-bright); box-shadow: inset 0 0 8px rgba(255,215,0,0.15); }
.sd-row-pos    .sd-row-ico { background: var(--green-subtle);   color: var(--green); }
.sd-row-danger { border-color: rgba(239,68,68,0.22); }
.sd-row-pos    { border-color: rgba(34,197,94,0.22); }

.sd-cta {
  width: 100%;
  padding: 13px;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  box-shadow: 0 6px 22px rgba(212,175,55,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
}
.sd-mudo {
  display: block;
  width: 100%;
  margin-top: 9px;
  padding: 8px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.18s ease;
}
.sd-mudo:hover { color: var(--text-secondary); text-decoration: underline; }

@media (max-width: 480px) {
  .sd-modal { padding: 22px 18px 18px; border-radius: var(--radius-lg); }
  .sd-greeting { font-size: 1.32rem; }
  .sd-hero-valor { font-size: 1.75rem; }
  .sd-head-ico { width: 42px; height: 42px; }
}

/* Desktop: popup maior e mais respirado */
@media (min-width: 769px) {
  .sd-modal { width: min(500px, 92vw); padding: 34px 34px 28px; }
  .sd-greeting { font-size: 1.62rem; }
  .sd-nome { font-size: 0.98rem; }
  .sd-head { gap: 15px; margin-bottom: 20px; }
  .sd-head-ico { width: 54px; height: 54px; }
  .sd-hero { padding: 22px 22px 20px; margin-bottom: 20px; }
  .sd-hero-valor { font-size: 2.5rem; }
  .sd-hero-sub { font-size: 0.82rem; }
  .sd-row { padding: 13px 15px; font-size: 0.88rem; }
  .sd-row-ico { width: 34px; height: 34px; }
  .sd-insights { gap: 10px; }
  .sd-cta { padding: 15px; font-size: 0.95rem; }
}

/* ============================================
   LOJA ONLINE — administração da vitrine

   A aba "Loja online" do formulário de produto, o acervo de
   fotos e os sinais que dizem, na lista do estoque, quais peças
   estão no ar em usestylo.com.br.
   ============================================ */

/* ---- Selo na lista do estoque ---- */

.loja-tag {
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: 7px; padding: 2px 7px;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.4px;
  border-radius: var(--radius-xl);
  background: var(--gold-subtle); color: var(--gold);
  border: 1px solid rgba(212,175,55,0.28);
  vertical-align: middle;
}

/* Peça com a ficha pronta, esperando a decisão de publicar */
.loja-tag-espera {
  background: transparent; color: var(--text-muted);
  border: 1px dashed var(--border-hover);
}

/* Botão de publicar/tirar do site, direto na linha da tabela */
.loja-btn-on { color: var(--gold); border-color: rgba(212,175,55,0.35); background: var(--gold-subtle); }

/* ---- Barra de resumo, acima da lista ---- */

.loja-resumo {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; margin-bottom: 14px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.loja-resumo-ico { display: flex; color: var(--gold); flex-shrink: 0; }
.loja-resumo-barra {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 0.78rem; color: var(--text-secondary);
}
.loja-resumo-item strong { color: var(--text-primary); font-weight: 700; }
.loja-resumo-fraco  { color: var(--text-muted); }
.loja-resumo-pronta { color: var(--info); font-weight: 600; }
.loja-resumo-alerta { color: var(--warning); font-weight: 600; }
.loja-resumo-sep    { color: var(--border-hover); }

/* ---- Interruptor "exibir na loja" ---- */

.loja-interruptor-bloco {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px; margin-bottom: 18px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.loja-interruptor {
  display: flex; align-items: flex-start; gap: 11px;
  flex: 1; cursor: pointer;
}
.loja-interruptor input { position: absolute; opacity: 0; width: 0; height: 0; }

.loja-interruptor-marca {
  position: relative; flex-shrink: 0;
  width: 40px; height: 22px; margin-top: 2px;
  background: var(--surface-3); border: 1px solid var(--border-hover);
  border-radius: var(--radius-xl);
  transition: var(--transition);
}
.loja-interruptor-marca::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--text-muted);
  transition: var(--transition);
}
.loja-interruptor input:checked + .loja-interruptor-marca {
  background: var(--gold-subtle); border-color: var(--gold);
}
.loja-interruptor input:checked + .loja-interruptor-marca::after {
  left: 21px; background: var(--gold);
}
.loja-interruptor input:focus-visible + .loja-interruptor-marca {
  box-shadow: 0 0 0 3px var(--gold-glow);
}

.loja-interruptor-texto { display: flex; flex-direction: column; gap: 3px; }
.loja-interruptor-texto strong { font-size: 0.86rem; color: var(--text-primary); font-weight: 600; }
.loja-interruptor-texto small  { font-size: 0.72rem; color: var(--text-muted); line-height: 1.45; }

.loja-selo {
  flex-shrink: 0; padding: 4px 10px;
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.3px;
  border-radius: var(--radius-xl); white-space: nowrap;
}
.loja-selo-on  { background: var(--gold-subtle); color: var(--gold); border: 1px solid rgba(212,175,55,0.3); }
.loja-selo-off { background: var(--surface-3);   color: var(--text-muted); border: 1px solid var(--border); }

/* Com a peça fora da loja, os campos continuam editáveis — quem
   prepara a ficha antes de publicar não deve esbarrar numa trava.
   Só o contraste cai, para dizer que nada dali está no ar. */
.loja-campos { transition: opacity 0.25s var(--ease); }
.loja-campos-off { opacity: 0.5; }

.loja-aviso {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 11px 13px; margin-bottom: 16px;
  font-size: 0.76rem; line-height: 1.5;
  color: var(--warning);
  background: rgba(245,158,11,0.08);
  border: 1px solid rgba(245,158,11,0.25);
  border-radius: var(--radius-sm);
}

.loja-nota-ativa { color: var(--green) !important; }
.loja-nota-ativa s { color: var(--text-muted); }

/* Rodapé do formulário: o que o botão Salvar vai causar */
.est-drawer-footer--loja { flex-direction: column; align-items: stretch; gap: 10px; }
.est-drawer-footer-botoes { display: flex; gap: 10px; }

.loja-nota-salvar {
  font-size: 0.72rem; line-height: 1.4; color: var(--text-muted); text-align: center;
}
.loja-nota-salvar.is-publicando { color: var(--gold); font-weight: 600; }

/* ---- Fotos da peça, dentro do formulário ---- */

.loja-fotos-grade + .input-hint { margin-top: 6px; }

.loja-fotos-grade {
  display: grid; gap: 8px; margin-top: 8px;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
}

.loja-foto {
  position: relative; aspect-ratio: 3 / 4;
  border-radius: var(--radius-sm); overflow: hidden;
  background: var(--surface-3); border: 1px solid var(--border);
}
.loja-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.loja-foto-capa { border-color: var(--gold); }

.loja-foto-selo {
  position: absolute; top: 5px; left: 5px;
  padding: 2px 6px; font-size: 0.56rem; font-weight: 700; letter-spacing: 0.4px;
  background: var(--gold); color: #0A0A0A; border-radius: var(--radius-xs);
}

.loja-foto-acoes {
  position: absolute; inset: auto 0 0 0;
  display: flex; justify-content: center; gap: 3px; padding: 5px;
  background: linear-gradient(transparent, rgba(0,0,0,0.85));
}
.loja-foto-acoes button {
  width: 22px; height: 22px; padding: 0; line-height: 1;
  font-size: 0.85rem; font-weight: 700;
  color: #fff; background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.25); border-radius: var(--radius-xs);
  cursor: pointer; transition: var(--transition);
}
.loja-foto-acoes button:hover { background: rgba(255,255,255,0.2); }

.loja-foto-nova {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 8px;
  font-size: 0.66rem; text-align: center; line-height: 1.3;
  color: var(--text-muted); cursor: pointer;
  border-style: dashed; border-color: var(--border-hover);
  transition: var(--transition);
}
.loja-foto-nova:hover { color: var(--gold); border-color: var(--gold); background: var(--gold-subtle); }
.loja-foto-mais { font-size: 1.4rem; line-height: 1; }

/* ---- Tamanhos ---- */

.loja-tam-lista { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }

.loja-tam {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 11px; font-size: 0.74rem; font-weight: 600;
  color: var(--text-muted); background: var(--surface-3);
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  cursor: pointer; user-select: none; transition: var(--transition);
}
.loja-tam:hover { color: var(--text-primary); border-color: var(--border-hover); }
.loja-tam-on {
  color: var(--gold); background: var(--gold-subtle);
  border-color: rgba(212,175,55,0.35);
}
.loja-tam-x { font-size: 0.9rem; line-height: 1; opacity: 0.7; }
.loja-tam-input { font-size: 0.8rem; }

/* ---- Marcações ---- */

.loja-marcadores { display: flex; flex-direction: column; gap: 9px; margin-top: 6px; }
.loja-marcador {
  display: flex; align-items: center; gap: 9px;
  font-size: 0.79rem; color: var(--text-secondary); cursor: pointer;
}
.loja-marcador input { width: 16px; height: 16px; accent-color: var(--gold); cursor: pointer; }

/* ---- Acervo de fotos ---- */

.loja-acervo-drawer { display: flex; flex-direction: column; }

.loja-acervo-topo {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 24px; border-bottom: 1px solid var(--border);
}
.loja-acervo-enviar { cursor: pointer; margin: 0; }
.loja-acervo-conta { font-size: 0.76rem; color: var(--text-muted); }

.loja-acervo-aviso {
  padding: 10px 24px; font-size: 0.76rem; line-height: 1.5;
  color: var(--text-secondary); background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.loja-acervo-aviso-ok      { color: var(--green);   background: var(--green-subtle); }
.loja-acervo-aviso-atencao { color: var(--warning); background: rgba(245,158,11,0.08); }
.loja-acervo-aviso-erro    { color: var(--red);     background: var(--red-subtle); }

.loja-acervo-grade {
  display: grid; gap: 9px;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
}

.loja-acervo-foto {
  position: relative; aspect-ratio: 3 / 4; padding: 0;
  border-radius: var(--radius-sm); overflow: hidden; cursor: pointer;
  background: var(--surface-3); border: 2px solid var(--border);
  transition: var(--transition);
}
.loja-acervo-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.loja-acervo-foto:hover { border-color: var(--border-hover); }
.loja-acervo-foto.is-marcada { border-color: var(--gold); }

.loja-acervo-marca {
  position: absolute; top: 6px; right: 6px;
  display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%;
  font-size: 0.7rem; font-weight: 700;
  color: transparent; background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.3);
  transition: var(--transition);
}
.loja-acervo-foto.is-marcada .loja-acervo-marca {
  color: #0A0A0A; background: var(--gold); border-color: var(--gold);
}

/* Quanto falta para o Worker apagar a foto por falta de uso */
.loja-acervo-prazo {
  position: absolute; bottom: 6px; left: 6px;
  padding: 2px 6px; font-size: 0.56rem; font-weight: 600;
  color: var(--text-secondary); background: rgba(0,0,0,0.72);
  border-radius: var(--radius-xs);
}
.loja-acervo-prazo.is-urgente { color: var(--red); }

.loja-acervo-usada {
  position: absolute; top: 6px; left: 6px;
  padding: 2px 6px; font-size: 0.54rem; font-weight: 600;
  color: var(--text-secondary); background: rgba(0,0,0,0.72);
  border-radius: var(--radius-xs);
}

.loja-acervo-peso {
  position: absolute; bottom: 6px; right: 6px;
  font-size: 0.54rem; color: var(--text-muted);
  background: rgba(0,0,0,0.72); padding: 2px 5px; border-radius: var(--radius-xs);
}

.loja-acervo-vazio {
  grid-column: 1 / -1; padding: 40px 20px;
  text-align: center; font-size: 0.82rem; color: var(--text-muted);
}

/* ---- Bloco da loja no drawer de detalhe ---- */

.loja-drawer-desc {
  margin: 10px 0; padding: 10px 12px;
  font-size: 0.78rem; line-height: 1.55; color: var(--text-secondary);
  background: var(--surface-2); border-radius: var(--radius-sm);
  white-space: pre-wrap;
}

.loja-drawer-fotos {
  display: grid; gap: 6px; margin: 10px 0;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
}
.loja-drawer-foto {
  aspect-ratio: 3 / 4; border-radius: var(--radius-xs); overflow: hidden;
  border: 1px solid var(--border); background: var(--surface-3);
}
.loja-drawer-foto.is-capa { border-color: var(--gold); }
.loja-drawer-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.loja-drawer-semfoto {
  margin: 10px 0; padding: 14px; text-align: center;
  font-size: 0.76rem; color: var(--text-muted);
  background: var(--surface-2); border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
}

.loja-drawer-espera {
  margin: 10px 0; padding: 9px 12px;
  font-size: 0.74rem; line-height: 1.5; color: var(--text-secondary);
  background: var(--surface-2); border: 1px dashed var(--border-hover);
  border-radius: var(--radius-sm);
}

.loja-drawer-alerta {
  margin: 10px 0; padding: 9px 12px;
  font-size: 0.74rem; line-height: 1.5; color: var(--warning);
  background: rgba(245,158,11,0.08);
  border: 1px solid rgba(245,158,11,0.25);
  border-radius: var(--radius-sm);
}

.loja-drawer-btn { width: 100%; margin-top: 12px; }

@media (max-width: 640px) {
  .loja-interruptor-bloco { flex-direction: column; gap: 10px; }
  .loja-acervo-topo { padding: 12px 16px; }
  .loja-acervo-aviso { padding: 10px 16px; }
  .loja-fotos-grade   { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
  .loja-acervo-grade  { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
}