/* ── AID Design System — Tokens ──────────────────────────────
   Fonte: Avanço Style Guide (Frontify, 04/09/2025)
──────────────────────────────────────────────────────────── */
:root {
  /* Destaque — Primária */
  --primary:               #0005AA;
  --on-primary:            #FFFFFF;
  --primary-container:     #E0E0FF;
  --on-primary-container:  #00026C;

  /* Destaque — Secundária */
  --secondary:               #5C5D72;
  --on-secondary:            #FFFFFF;
  --secondary-container:     #E1E0F9;
  --on-secondary-container:  #191A2C;

  /* Destaque — Terciária */
  --tertiary:               #566500;
  --on-tertiary:            #FFFFFF;
  --tertiary-container:     #D7EE69;
  --on-tertiary-container:  #181E00;

  /* Superfícies */
  --surface:        #FCF8FD;
  --surf-lowest:    #FFFFFF;
  --surf-low:       #F6F2F7;
  --surf-base:      #F0EDF1;
  --surf-high:      #EAE7EC;
  --surf-highest:   #E5E1E6;
  --on-surface:     #1B1B1F;
  --on-surface-var: #46464F;

  /* Contornos */
  --outline:     #777680;
  --outline-var: #C7C5D0;

  /* Erro */
  --error:           #B3261E;
  --error-container: #F9DEDC;
  --on-error:        #FFFFFF;

  /* Formas */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   28px;
  --r-full: 9999px;

  /* Elevações (duas camadas sobrepostas conforme AID) */
  --ev1: 0px 1px 2px rgba(0,0,0,.30), 0px 1px 3px 1px rgba(0,0,0,.15);
  --ev2: 0px 1px 2px rgba(0,0,0,.30), 0px 2px 6px 2px rgba(0,0,0,.15);
  --ev3: 0px 1px 3px rgba(0,0,0,.30), 0px 4px 8px 3px rgba(0,0,0,.15);
  --ev4: 0px 2px 3px rgba(0,0,0,.30), 0px 6px 10px 4px rgba(0,0,0,.15);
  --ev5: 0px 4px 4px rgba(0,0,0,.30), 0px 8px 12px 6px rgba(0,0,0,.15);

  /* Tipografia */
  --font-brand: 'Titillium Web', system-ui, sans-serif;
  --font-plain: 'Open Sans',     system-ui, sans-serif;
}

/* ── Reset & base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-plain);
  background: var(--surface);
  color: var(--on-surface);
  min-height: 100vh;
}

.hidden { display: none !important; }

/* ── Pages ────────────────────────────────────────────────── */
.page { min-height: 100vh; display: flex; flex-direction: column; }

#page-app { height: 100vh; overflow: hidden; }

/* ── Auth screens (login / trocar-senha) ──────────────────── */
.auth-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: var(--surface);
}

/* Dialog-like → Extragrande (28px) */
.auth-card {
  background: var(--surf-lowest);
  border-radius: var(--r-xl);
  padding: 2.5rem;
  width: 100%;
  max-width: 400px;
  box-shadow: var(--ev3);
  overflow: hidden;
}

.auth-logo { text-align: center; margin-bottom: 2rem; }

.auth-logo-img {
  display: block;
  margin: 0 auto 1.25rem;
  width: 96px;
  height: 96px;
  border-radius: 20px;
  max-width: 100%;
}

.auth-logo h1 {
  font-family: var(--font-brand);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.01em;
}

.auth-logo p {
  font-size: 0.875rem;
  color: var(--on-surface-var);
  margin-top: 0.25rem;
}

/* ── Form elements ────────────────────────────────────────── */
.field {
  margin-bottom: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.field label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--on-surface);
}

/* Extrapequeno (4px) para campos de texto */
.field input, .field select, .field textarea {
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--outline-var);
  border-radius: var(--r-xs);
  font-family: var(--font-plain);
  font-size: 0.9375rem;
  color: var(--on-surface);
  background: var(--surf-lowest);
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}

.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,5,170,.12);
}

.error-msg {
  font-size: 0.875rem;
  color: var(--error);
  margin-bottom: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--error-container);
  border-radius: var(--r-xs);
  border: 1px solid rgba(179,38,30,.25);
}

/* ── Buttons — Cheio (9999px) por spec AID ────────────────── */
.btn {
  font-family: var(--font-plain);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem 1.4rem;
  border-radius: var(--r-full);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, box-shadow 0.15s, opacity 0.15s;
  white-space: nowrap;
}

.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-primary {
  background: var(--primary);
  color: var(--on-primary);
}
.btn-primary:hover:not(:disabled) { background: #0004CC; box-shadow: var(--ev1); }

.btn-secondary {
  background: var(--surf-lowest);
  color: var(--primary);
  border-color: var(--primary);
}
.btn-secondary:hover:not(:disabled) { background: var(--primary-container); }

.btn-ghost {
  background: transparent;
  color: var(--on-primary);
  border-color: rgba(255,255,255,.4);
}
.btn-ghost:hover:not(:disabled) { background: rgba(255,255,255,.15); }

.btn-full  { width: 100%; }
.btn-sm    { padding: 0.3rem 0.875rem; font-size: 0.8125rem; }

.btn-danger {
  background: var(--error-container);
  color: var(--error);
  border-color: rgba(179,38,30,.3);
}
.btn-danger:hover:not(:disabled) { background: rgba(179,38,30,.15); }

/* ── App header — Top app bar (Elevação 2) ────────────────── */
.app-header {
  background: var(--primary);
  color: var(--on-primary);
  padding: 0 1.5rem;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--ev2);
  flex-shrink: 0;
}

/* Manchete Pequena — Titillium Web */
.app-header h1 {
  font-family: var(--font-brand);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.header-left { display: flex; align-items: center; gap: 0.75rem; }

.header-brand { display: flex; flex-direction: column; gap: 1px; }

.header-empresa {
  font-size: 0.6875rem;
  color: rgba(255,255,255,0.72);
  font-family: var(--font-plain);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 340px;
}

.header-logo {
  height: 36px;
  width: auto;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}

.header-user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
}

/* Badge — Cheio (9999px) por spec AID */
.badge {
  background: rgba(255,255,255,.2);
  padding: 0.2rem 0.65rem;
  border-radius: var(--r-full);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
}

.btn-icon {
  padding: 0.35rem 0.875rem;
  font-size: 0.8125rem;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.btn-icon .material-symbols-outlined { font-size: 18px; }

/* ── Progress bar ─────────────────────────────────────────── */
.progress-bar-wrap {
  background: var(--surf-highest);
  border-radius: var(--r-full);
  height: 10px;
  overflow: hidden;
  margin: 0.5rem 0;
}
.progress-bar {
  background: var(--primary);
  height: 100%;
  border-radius: var(--r-full);
  transition: width 0.3s ease;
}

/* ── App main ─────────────────────────────────────────────── */
.app-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.placeholder-msg {
  color: var(--on-surface-var);
  font-style: italic;
  text-align: center;
  margin-top: 4rem;
}

/* ── Views ────────────────────────────────────────────────── */
.view {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* ── Menu grid — Cards (Médio 12px) ───────────────────────── */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1.25rem;
  max-width: 920px;
  margin: 2rem auto 0;
  padding: 0 0.5rem;
}

.menu-card {
  background: var(--surf-lowest);
  border: 1px solid var(--outline-var);
  border-radius: var(--r-md);
  padding: 2rem 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  box-shadow: var(--ev1);
  transition: box-shadow 0.15s, transform 0.12s, border-color 0.15s, background 0.15s;
}

.menu-card:hover {
  box-shadow: var(--ev3);
  border-color: var(--primary);
  background: var(--primary-container);
  transform: translateY(-2px);
}

.menu-card:active { transform: translateY(0); box-shadow: var(--ev1); }

.menu-icon {
  color: var(--primary);
  font-size: 2.5rem;
  line-height: 1;
}

/* Ícones Material Symbols no menu */
.menu-icon.material-symbols-outlined {
  font-size: 48px;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;
}

/* Título do card — Título Grande (Titillium Web 22px → adaptado para card) */
.menu-label {
  font-family: var(--font-brand);
  font-size: 1rem;
  font-weight: 600;
  color: var(--on-surface);
}

/* Descrição — Corpo Médio (Open Sans 14px) */
.menu-desc {
  font-size: 0.8125rem;
  color: var(--on-surface-var);
  line-height: 1.5;
}

/* ── Filter bar ───────────────────────────────────────────── */
.filter-bar {
  background: var(--surf-lowest);
  border-bottom: 1px solid var(--outline-var);
  padding: 0.75rem 1.5rem 0.9rem;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.filter-shortcuts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.shortcuts-label {
  font-size: 0.75rem;
  color: var(--on-surface-var);
  font-weight: 500;
  margin-right: 0.2rem;
  white-space: nowrap;
}

/* Filter chips — Pequeno (8px) por spec AID */
.btn-shortcut {
  font-family: var(--font-plain);
  padding: 0.25rem 0.875rem;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--outline-var);
  background: var(--surf-lowest);
  color: var(--on-surface-var);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  line-height: 1.5;
}
.btn-shortcut:hover { border-color: var(--primary); color: var(--primary); }
.btn-shortcut.active {
  background: var(--primary-container);
  border-color: var(--primary);
  color: var(--on-primary-container);
  font-weight: 600;
}

.filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
}

.filter-group .field { margin-bottom: 0; }

/* Botão imprimir PDF — ícone circular */
.btn-print {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--r-full);
  border: 1.5px solid var(--primary);
  background: var(--surf-lowest);
  color: var(--primary);
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
  flex-shrink: 0;
  align-self: flex-end;
}
.btn-print:hover { background: var(--primary-container); box-shadow: var(--ev1); }
.btn-print .material-symbols-outlined { font-size: 20px; }

/* Botão print inline nas barras de filtro */
.btn-print-icon {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0 12px; height: 36px; border-radius: var(--r-sm);
  border: 1.5px solid var(--primary); background: var(--surf-lowest);
  color: var(--primary); font-size: .8rem; font-weight: 600;
  cursor: pointer; transition: background .15s, box-shadow .15s;
  flex-shrink: 0;
}
.btn-print-icon:hover { background: var(--primary-container); box-shadow: var(--ev1); }
.btn-print-icon .material-symbols-outlined { font-size: 18px; }
/* Versão menor para dentro das ranking-title-row */
.btn-print-icon.btn-print-sm {
  padding: 0; width: 30px; height: 28px; justify-content: center;
  border-radius: var(--r-sm); font-size: .7rem;
}
.btn-print-icon.btn-print-sm .material-symbols-outlined { font-size: 16px; }

/* ── Modal prévia Telegram ─────────────────────────────────────── */
.tg-preview-card {
  border-radius: var(--r-md); overflow: hidden;
  box-shadow: var(--ev1); border: 1px solid var(--outline-var);
}
.tg-preview-card-header {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; background: var(--primary);
  color: #fff; font-size: .82rem; font-weight: 600;
}
.tg-preview-card-header .tg-icon { font-size: 18px; }
.tg-preview-card-meta {
  padding: 6px 14px; background: var(--surf-low);
  font-size: .75rem; color: var(--on-surf-var);
  border-bottom: 1px solid var(--outline-var);
  display: flex; align-items: center; gap: 6px;
}
.tg-preview-card-meta .tag-exemplo {
  background: #f59e0b; color: #fff; border-radius: 3px;
  padding: 1px 6px; font-size: .7rem; font-weight: 700;
}
.tg-preview-bubble {
  background: #1e2a3a; color: #e8f4fd;
  padding: 12px 16px;
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: .83rem; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word;
}
.tg-preview-bubble b { font-weight: 700; color: #fff; }
.tg-preview-card-footer {
  padding: 6px 14px; background: var(--surf-low);
  border-top: 1px solid var(--outline-var);
  font-size: .75rem; display: flex; gap: 8px; flex-wrap: wrap;
}
.tg-send-ok   { color: #22c55e; font-weight: 600; }
.tg-send-err  { color: #ef4444; font-weight: 600; }
.tg-preview-loading {
  display: flex; align-items: center; gap: 10px;
  padding: 20px; color: var(--on-surf-var); font-size: .9rem;
}
.tg-preview-loading .material-symbols-outlined { animation: spin .8s linear infinite; }

/* Grade de checkboxes de tipos de monitoramento (Telegram / configurações) */
.notif-tipos-grid {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px;
}
.notif-tipo-check {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--r-sm);
  border: 1.5px solid var(--outline-var); background: var(--surf-low);
  cursor: pointer; user-select: none; font-size: .85rem; font-weight: 500;
  color: var(--on-surf); transition: border-color .15s, background .15s;
  flex: 1; min-width: 140px;
}
.notif-tipo-check:hover { border-color: var(--primary); background: var(--primary-container); }
.notif-tipo-check:has(input:checked) {
  border-color: var(--primary); background: var(--primary-container);
  color: var(--primary); font-weight: 600;
}
.notif-tipo-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }
.notif-tipo-check .material-symbols-outlined { font-size: 18px; }

/* Agrupa checkbox "Analítico" + botão imprimir no cabeçalho de modais */
.modal-print-controls {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.print-analitico-label {
  display: flex; align-items: center; gap: 5px;
  font-size: .8rem; font-weight: 600; color: var(--primary);
  cursor: pointer; user-select: none; white-space: nowrap;
}
.print-analitico-label input[type="checkbox"] {
  width: 15px; height: 15px; cursor: pointer; accent-color: var(--primary);
}

/* ── Data table — Cards (Médio 12px) ──────────────────────── */
.table-wrapper {
  flex: 1;
  overflow: auto;
  padding: 1.25rem 1.5rem;
}
.table-wrapper.has-float { padding-bottom: 5rem; }

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-plain);
  font-size: 0.875rem;
  background: var(--surf-lowest);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--ev1);
}

/* Etiqueta Pequena — Open Sans uppercase */
.data-table th {
  background: var(--surf-low);
  color: var(--on-surface-var);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--outline-var);
  white-space: nowrap;
}

/* Corpo Médio — Open Sans 14px */
.data-table td {
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--surf-base);
  color: var(--on-surface);
  white-space: nowrap;
}

.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--surf-low); }

/* Linha autenticada usa cor terciária (positivo) */
.row-autenticada td { background: var(--tertiary-container); }
.row-autenticada:hover td { background: #c8dc55; }

.valor-cell { font-weight: 600; color: var(--primary); text-align: right; }

/* Badges de status — Cheio (9999px) por spec AID */
.badge-auth {
  background: var(--tertiary-container);
  color: var(--on-tertiary-container);
  padding: 0.2rem 0.65rem;
  border-radius: var(--r-full);
  font-size: 0.75rem;
  font-weight: 600;
}

.badge-inativo {
  background: var(--error-container);
  color: var(--error);
  padding: 0.2rem 0.65rem;
  border-radius: var(--r-full);
  font-size: 0.75rem;
  font-weight: 600;
}

/* ── View toolbar ─────────────────────────────────────────── */
.view-toolbar {
  padding: 1rem 1.5rem 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* ── Dashboard de cancelados ──────────────────────────────── */
.dashboard-wrapper {
  flex: 1;
  overflow: auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.resumo-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Cards de resumo usam cor primária para destaque */
.resumo-card {
  background: var(--primary-container);
  border-radius: var(--r-md);
  padding: 1.1rem 1.4rem;
  flex: 1;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  box-shadow: var(--ev1);
}

/* Variantes de destaque nos cards de resumo */
.resumo-card--positivo { background: #dcfce7; }
.resumo-card--positivo .resumo-label { color: #166534; }
.resumo-card--positivo .resumo-valor { color: #166534; }
.resumo-card--negativo { background: #fee2e2; }
.resumo-card--negativo .resumo-label { color: #991b1b; }
.resumo-card--negativo .resumo-valor { color: #991b1b; }
@media (prefers-color-scheme: dark) {
  .resumo-card--positivo { background: #14532d; }
  .resumo-card--positivo .resumo-label, .resumo-card--positivo .resumo-valor { color: #bbf7d0; }
  .resumo-card--negativo { background: #7f1d1d; }
  .resumo-card--negativo .resumo-label, .resumo-card--negativo .resumo-valor { color: #fecaca; }
}

/* Variantes de destaque nos KPIs de modal */
.vd-modal-kpi--positivo { background: #dcfce7; }
.vd-modal-kpi--positivo .vd-modal-kpi-label,
.vd-modal-kpi--positivo .vd-modal-kpi-value { color: #166534; }
.vd-modal-kpi--negativo { background: #fee2e2; }
.vd-modal-kpi--negativo .vd-modal-kpi-label,
.vd-modal-kpi--negativo .vd-modal-kpi-value { color: #991b1b; }
@media (prefers-color-scheme: dark) {
  .vd-modal-kpi--positivo { background: #14532d; }
  .vd-modal-kpi--positivo .vd-modal-kpi-label,
  .vd-modal-kpi--positivo .vd-modal-kpi-value { color: #bbf7d0; }
  .vd-modal-kpi--negativo { background: #7f1d1d; }
  .vd-modal-kpi--negativo .vd-modal-kpi-label,
  .vd-modal-kpi--negativo .vd-modal-kpi-value { color: #fecaca; }
}

/* Célula de resultado nas tabelas de ranking */
td.vd-positivo { color: #166534 !important; font-weight: 700; }
td.vd-negativo { color: #991b1b !important; font-weight: 700; }
@media (prefers-color-scheme: dark) {
  td.vd-positivo { color: #86efac !important; }
  td.vd-negativo { color: #fca5a5 !important; }
}

/* Etiqueta Pequena — Open Sans uppercase */
.resumo-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--on-primary-container);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.8;
}

/* Exibição Pequena — Titillium Web */
.resumo-valor {
  font-family: var(--font-brand);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--on-primary-container);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.resumo-sub {
  font-size: 0.8125rem;
  color: var(--on-primary-container);
  opacity: 0.75;
}

.rankings-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
.ranking-card-full { grid-column: 1 / -1; }

/* Cards de ranking — Cards (Médio 12px) */
.ranking-card {
  background: var(--surf-lowest);
  border-radius: var(--r-md);
  padding: 1.25rem;
  box-shadow: var(--ev1);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Título Médio — Titillium Web 16px */
.ranking-title {
  font-family: var(--font-brand);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--on-surface);
}

.ranking-hint {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--primary);
}

.ranking-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

/* Botão expandir — Cheio (9999px) por spec AID */
.btn-ranking-expand {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--r-full);
  border: 1.5px solid var(--primary);
  background: var(--surf-lowest);
  color: var(--primary);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s;
}
.btn-ranking-expand:hover { background: var(--primary-container); }

.row-clickable { cursor: pointer; }
.row-clickable:hover td { background: var(--primary-container) !important; }

.th-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.th-sortable:hover { color: var(--primary); }
.th-sort-active { color: var(--primary); font-weight: 700; }

/* ── Settings layout ──────────────────────────────────────── */
.settings-wrapper {
  padding: 1.5rem 1.5rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  overflow: auto;
  flex: 1;
}

/* Seções de config — Cards (Médio 12px) */
.settings-section {
  background: var(--surf-lowest);
  border-radius: var(--r-md);
  padding: 1.75rem 2rem;
  box-shadow: var(--ev1);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

/* Título Médio — Titillium Web */
.section-title {
  font-family: var(--font-brand);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--on-surface);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--outline-var);
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Badge de seção — Cheio + cor secundária */
.section-badge {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--secondary-container);
  color: var(--on-secondary-container);
  border-radius: var(--r-full);
  padding: 0.15rem 0.6rem;
}

.field small {
  font-size: 0.75rem;
  color: var(--on-surface-var);
  margin-top: 0.2rem;
}

.warning-text { color: #7C4A00; }

/* ── Test row ─────────────────────────────────────────────── */
.test-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

.test-result {
  font-size: 0.875rem;
  padding: 0.3rem 0.875rem;
  border-radius: var(--r-sm);
}
.test-result.ok    { background: var(--tertiary-container); color: var(--on-tertiary-container); }
.test-result.error { background: var(--error-container);    color: var(--error); }

/* ── Chat ID / WA number list ─────────────────────────────── */
.chatid-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.chatid-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surf-low);
  border: 1px solid var(--outline-var);
  border-radius: var(--r-sm);
  padding: 0.4rem 0.75rem;
  font-family: monospace;
  font-size: 0.875rem;
  color: var(--on-surface);
}

.chatid-item button {
  background: none;
  border: none;
  color: var(--error);
  cursor: pointer;
  font-size: 1rem;
  padding: 0 0.25rem;
  line-height: 1;
}

.chatid-add { display: flex; gap: 0.5rem; }
.chatid-add input { flex: 1; }

/* ── Filiais (multi-loja) ─────────────────────────────────── */
.filiais-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.filiais-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surf-low);
  border: 1px solid var(--outline-var);
  border-radius: var(--r-sm);
  padding: 0.5rem 0.75rem;
}

.filiais-item-info { flex: 1; min-width: 0; }

.filiais-item-loja {
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--primary);
  margin-right: 4px;
}

.filiais-item-desc {
  font-size: 0.82rem;
  color: var(--on-surface-var);
}

.filiais-item-token {
  font-size: 0.75rem;
  color: var(--on-surface-var);
  font-family: monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 260px;
}

.filiais-item-badge-inativo {
  font-size: 0.7rem;
  background: var(--surf-highest);
  color: var(--on-surface-var);
  border-radius: var(--r-full);
  padding: 1px 8px;
  flex-shrink: 0;
}

.filiais-item-badge-padrao {
  font-size: 0.7rem;
  background: var(--primary-container);
  color: var(--primary);
  border-radius: var(--r-full);
  padding: 1px 8px;
  flex-shrink: 0;
  font-weight: 600;
}

.filiais-item button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--on-surface-var);
  padding: 3px 5px;
  border-radius: var(--r-xs);
  font-size: 0.78rem;
  flex-shrink: 0;
}

.filiais-item button:hover { color: var(--primary); background: var(--primary-container); }

.filiais-add { margin-top: 0.25rem; }

/* Seletor de loja em etiquetas */
.etq-loja-block { display: flex; align-items: center; gap: 6px; }
.etq-loja-label { font-size: 0.78rem; color: var(--on-surface-var); font-weight: 500; }
.etq-loja-select { min-width: 140px; font-size: 0.82rem; }

/* ── Toggle switch — Cheio (9999px) por spec AID ─────────── */
.field-inline {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.toggle {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  flex-shrink: 0;
}

.toggle input { opacity: 0; width: 0; height: 0; }

.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--outline);
  border-radius: var(--r-full);
  transition: background 0.2s;
}

.toggle-slider::before {
  content: "";
  position: absolute;
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background: var(--surf-lowest);
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: var(--ev1);
}

.toggle input:checked + .toggle-slider { background: var(--primary); }
.toggle input:checked + .toggle-slider::before { transform: translateX(22px); }

/* ── Help block — Pequeno (8px) ───────────────────────────── */
.help-block {
  border: 1px solid var(--outline-var);
  border-radius: var(--r-sm);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--on-surface);
}

.help-block summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--primary);
  user-select: none;
}

.help-block ol { margin: 0.75rem 0 0 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.help-block ul { margin: 0.3rem 0 0 1.25rem; display: flex; flex-direction: column; gap: 0.3rem; }
.help-block code { background: var(--surf-low); padding: 0.1rem 0.35rem; border-radius: var(--r-xs); font-size: 0.8rem; }

/* ── Settings actions ─────────────────────────────────────── */
.settings-actions { display: flex; align-items: center; gap: 1rem; justify-content: flex-end; }

/* ── Modal — Extragrande (28px) por spec AID ──────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

.modal-box {
  background: var(--surf-lowest);
  border-radius: var(--r-xl);
  padding: 1.75rem 2rem 1.5rem;
  width: 100%;
  max-width: 440px;
  box-shadow: var(--ev5);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1rem;
}

/* Dois seletores necessários para sobrescrever max-width de .modal-box */
.modal-box.modal-wide { max-width: min(1080px, 96vw); }

/* Manchete Pequena — Titillium Web */
.modal-title {
  font-family: var(--font-brand);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--on-surface);
}

.modal-info {
  font-size: 0.9rem;
  color: var(--on-surface-var);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

/* ── Drill-down table — Pequeno (8px) ─────────────────────── */
.drill-table-wrapper {
  max-height: 420px;
  overflow: auto;
  border: 1px solid var(--outline-var);
  border-radius: var(--r-sm);
}

/* ── Observação: contador de caracteres + célula da tabela ─ */
.char-counter {
  display: block;
  text-align: right;
  font-size: 0.75rem;
  color: var(--on-surface-var);
  margin-top: 2px;
}
.char-counter.limit-near  { color: #e67e00; }
.char-counter.limit-reached { color: var(--error); font-weight: 600; }

/* ── Tabela de sangrias: layout fixo para controlar larguras ── */
#tabela-sangrias { table-layout: fixed; width: 100%; }
#tabela-sangrias th:nth-child(1) { width: 70px; }
#tabela-sangrias th:nth-child(2) { width: 150px; }
#tabela-sangrias th:nth-child(3) { width: 60px; }
#tabela-sangrias th:nth-child(4) { width: 90px; }
#tabela-sangrias th:nth-child(5) { width: 80px; }
#tabela-sangrias th:nth-child(6) { width: 95px; }
/* th:nth-child(7) = Observação — ocupa o espaço restante */
#tabela-sangrias th:nth-child(8) { width: 130px; }
#tabela-sangrias th:nth-child(9) { width: 115px; }

.td-obs { overflow: hidden; }

.obs-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  max-width: 100%;
  line-height: 1.4;
}
.obs-text:hover { text-decoration: underline dotted var(--primary); }
.obs-text.expanded {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  word-break: break-word;
}

/* ── Painel flutuante de resumo de sangrias ────────────── */
.sangrias-float {
  position: fixed;
  bottom: 1.25rem;
  right: 1.5rem;
  left: 1.5rem;
  z-index: 300;
  background: #fff;
  border: 1.5px solid var(--primary);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,170,0.13), 0 1px 4px rgba(0,0,0,0.07);
  padding: 0.55rem 1.1rem;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}
.sangrias-float.hidden { display: none !important; }

.sf-title {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-right: 1rem;
  border-right: 1.5px solid var(--outline-var);
  margin-right: 0;
  white-space: nowrap;
}
.sf-title .material-symbols-outlined { font-size: 0.95rem; }

.sf-divider {
  width: 1px;
  height: 1.4rem;
  background: var(--outline-var);
  margin: 0 0.85rem;
  flex-shrink: 0;
}

.sf-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--on-surface-var);
  white-space: nowrap;
  padding: 0.2rem 0;
}
.sf-row span { font-size: 0.78rem; }
.sf-row strong { color: var(--on-surface); font-weight: 600; font-size: 0.82rem; }

.sf-dot { color: var(--outline-var); font-size: 0.9rem; margin: 0 0.1rem; }

.sf-auth strong { color: #2d6a00; }
.sf-pend strong  { color: #9a1b1b; }

.sf-total-row span  { font-weight: 600; color: var(--on-surface); }
.sf-total-row strong {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--primary);
}

/* ══════════════════════════════════════════════════════════════
   FECHAMENTO DE CAIXA +
══════════════════════════════════════════════════════════════ */

/* Barra de progresso (Tela 1) */
.fec-prog-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--surf-low);
  border: 1px solid var(--outline-var);
  border-radius: var(--r-md);
  padding: 0.75rem 1rem;
  margin: 0.75rem 1.5rem 0.25rem;
  font-size: 0.875rem;
}
.fec-prog-icon { color: var(--primary); font-size: 20px; }
.fec-prog-track {
  flex: 1;
  height: 8px;
  background: var(--surf-highest);
  border-radius: var(--r-full);
  overflow: hidden;
}
.fec-prog-fill {
  height: 100%;
  background: var(--primary);
  border-radius: var(--r-full);
  transition: width 0.4s ease;
}
.fec-prog-pct { font-weight: 600; color: var(--primary); min-width: 2.5rem; text-align: right; }

/* Badges de status */
.fec-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--r-full);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.fec-badge-pendente  { background: var(--surf-highest); color: var(--on-surface-var); }
.fec-badge-conferido { background: #d4edda; color: #155724; }
.fec-badge-quebra    { background: #f8d7da; color: #721c24; }
.fec-badge-sobra     { background: #fff3cd; color: #856404; }

/* Footer da lista */
.fec-lista-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.5rem 1.25rem;
  flex-wrap: wrap;
}
.fec-status-legend { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.fec-cache-info {
  font-size: 0.78rem;
  color: var(--on-surface-var);
  padding: 0.3rem 1.5rem 0;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.fec-cache-info .link-btn {
  background: none;
  border: none;
  color: var(--primary);
  cursor: pointer;
  font-size: inherit;
  padding: 0;
  text-decoration: underline;
}

/* Células de moeda */
.col-money { text-align: right; }
td.fec-money { text-align: right; font-variant-numeric: tabular-nums; }
.fec-diff-neg { color: #9a1b1b; font-weight: 600; }
.fec-diff-pos { color: #2d6a00; font-weight: 600; }
.fec-diff-zero { color: var(--on-surface-var); }

/* Mini barra de progresso nas linhas da tabela */
.fec-row-prog {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--on-surface-var);
}
.fec-row-prog-track {
  width: 60px;
  height: 5px;
  background: var(--surf-highest);
  border-radius: var(--r-full);
  overflow: hidden;
}
.fec-row-prog-fill {
  height: 100%;
  background: var(--primary);
  border-radius: var(--r-full);
}

/* Cabeçalho fixo da conferência (Tela 2) */
.fec-conf-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surf-lowest);
  border-bottom: 1px solid var(--outline-var);
  box-shadow: var(--ev2);
}
.fec-conf-header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  flex-wrap: wrap;
}
.fec-btn-back {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
  flex-shrink: 0;
  color: var(--primary) !important;
  border-color: var(--primary) !important;
  background: transparent !important;
}
.fec-btn-back:hover:not(:disabled) {
  background: var(--primary-container) !important;
}
.fec-conf-info {
  flex: 1;
  min-width: 120px;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.fec-conf-label { font-size: 0.75rem; color: var(--on-surface-var); text-transform: uppercase; letter-spacing: .04em; }
.fec-conf-titulo { font-size: 1rem; font-weight: 700; color: var(--on-surface); font-family: var(--font-brand); }
.fec-conf-stats {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.fec-conf-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.fec-conf-stat-label { font-size: 0.7rem; color: var(--on-surface-var); text-transform: uppercase; letter-spacing: .04em; }
.fec-conf-stat-val { font-size: 0.95rem; font-weight: 700; color: var(--on-surface); font-variant-numeric: tabular-nums; }

/* Corpo das seções */
.fec-conf-body {
  padding: 1.25rem 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Cards de seção */
.fec-section-card {
  border: 1px solid var(--outline-var);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surf-lowest);
}
.fec-section-card.fec-secao-done { border-color: #a3d9a5; }
.fec-section-card.fec-secao-locked { opacity: 0.55; pointer-events: none; }

.fec-section-hdr {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--surf-low);
  border-bottom: 1px solid var(--outline-var);
  cursor: pointer;
  user-select: none;
}
.fec-section-card.fec-secao-done .fec-section-hdr { background: #eaf6ea; border-color: #a3d9a5; }
.fec-section-card.fec-secao-locked .fec-section-hdr { cursor: default; }

.fec-section-num {
  width: 26px;
  height: 26px;
  border-radius: var(--r-full);
  background: var(--primary-container);
  color: var(--on-primary-container);
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fec-secao-done .fec-section-num { background: #a3d9a5; color: #155724; }
.fec-secao-locked .fec-section-num { background: var(--surf-highest); color: var(--on-surface-var); }

.fec-section-title {
  flex: 1;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--on-surface);
}
.fec-section-meta {
  font-size: 0.78rem;
  color: var(--on-surface-var);
  white-space: nowrap;
}
.fec-lock-icon { color: var(--outline); font-size: 18px; }
.fec-check-icon { color: #155724; font-size: 18px; }
.fec-chevron { color: var(--outline); font-size: 20px; transition: transform .2s; }
.fec-section-card.fec-collapsed .fec-chevron { transform: rotate(-90deg); }

.fec-section-body {
  padding: 0;
}
.fec-section-card.fec-collapsed .fec-section-body { display: none; }

/* Tabela dentro de seção */
.fec-section-body .data-table { margin: 0; border-radius: 0; }
.fec-section-body .data-table th,
.fec-section-body .data-table td { font-size: 0.8rem; padding: 0.45rem 0.75rem; }

/* Linha de autenticação */
.fec-auth-row td { background: var(--surf-lowest); }
.fec-auth-row.fec-row-autenticada td { background: #f6fff6; }
.fec-lib-pdv-row { cursor: pointer; }
.fec-lib-pdv-row:hover td { filter: brightness(0.96); }
.fec-lib-pdv-chevron { font-size: 1rem; vertical-align: middle; color: var(--on-surface-var); transition: transform .2s; }
.fec-lib-pdv-items-wrap td { background: var(--surface) !important; padding: 0 !important; }
.fec-lib-pdv-items-table { border-top: 1px solid var(--border-color); table-layout: fixed; width: 100%; }
.fec-lib-pdv-items-table th, .fec-lib-pdv-items-table td { font-size: 0.77rem !important; }
.fec-lib-pdv-items-table th.col-money { text-align: right; }
.fec-lib-pdv-items-table th:nth-child(3),
.fec-lib-pdv-items-table td:nth-child(3) { width: 80px; text-align: right; }
.fec-lib-pdv-items-table th:nth-child(4),
.fec-lib-pdv-items-table td:nth-child(4) { width: 100px; text-align: right; }
.fec-lib-pdv-items-table th:nth-child(5),
.fec-lib-pdv-items-table td:nth-child(5) { width: 160px; }
.fec-lib-pdv-item td { background: var(--surf-low) !important; }
.fec-lib-pdv-item-desc { padding-left: 1.75rem !important; color: var(--on-surface-var); font-style: italic; }
.fec-auth-cell {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  justify-content: flex-end;
}
.fec-auth-btn {
  font-size: 0.72rem;
  padding: 0.2rem 0.55rem;
  border-radius: var(--r-full);
  border: 1px solid var(--primary);
  background: transparent;
  color: var(--primary);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.fec-auth-btn:hover { background: var(--primary); color: var(--on-primary); }
.fec-auth-done {
  font-size: 0.72rem;
  color: #155724;
  display: flex;
  align-items: center;
  gap: 0.2rem;
}
.fec-auth-done .material-symbols-outlined { font-size: 14px; }

/* Botão de observação */
.fec-obs-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--on-surface-var);
  padding: 0.1rem 0.2rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.fec-obs-btn:hover { color: var(--primary); }
.fec-obs-btn .material-symbols-outlined { font-size: 16px; }

/* Linha de observação */
.fec-obs-row td {
  padding: 0.3rem 0.75rem 0.5rem 1.5rem !important;
  background: var(--surf-low) !important;
  font-size: 0.78rem;
  color: var(--on-surface-var);
  font-style: italic;
}
.fec-obs-row.hidden { display: none; }

/* Input numérico inline (cartão POS, fechamento caixa) */
.fec-num-input {
  width: 110px;
  padding: 0.2rem 0.4rem;
  border: 1px solid var(--outline-var);
  border-radius: var(--r-xs);
  font-size: 0.8rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-plain);
  background: var(--surf-low);
}
.fec-num-input:focus { outline: none; border-color: var(--primary); background: var(--surf-lowest); }
.fec-num-input:disabled { background: var(--surf-highest); color: var(--on-surface-var); }

/* Totalizador footer dentro de seção */
.fec-section-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 1rem;
  background: var(--surf-low);
  border-top: 1px solid var(--outline-var);
  flex-wrap: wrap;
}
.fec-section-total {
  font-size: 0.82rem;
  color: var(--on-surface-var);
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.fec-section-total strong { color: var(--on-surface); font-weight: 700; }
.fec-conferir-btn {
  font-size: 0.8rem;
  padding: 0.35rem 0.9rem;
  border-radius: var(--r-full);
  border: none;
  background: var(--primary);
  color: var(--on-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  transition: opacity .15s;
}
.fec-conferir-btn:disabled { opacity: 0.45; cursor: default; }
.fec-conferir-btn .material-symbols-outlined { font-size: 16px; }

/* ── Overlay durante autenticação ───────────────────────────── */
.fec-auth-loading {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .42);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.fec-auth-loading-box {
  background: var(--surf);
  border-radius: var(--r-xl);
  padding: 2.2rem 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  box-shadow: 0 8px 32px rgba(0,0,0,.22);
  min-width: 220px;
  animation: fec-auth-pop .18s ease-out;
}
@keyframes fec-auth-pop {
  from { transform: scale(.88); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.fec-auth-loading-ring {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--primary-container);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fec-auth-loading-msg {
  font-size: .95rem;
  font-weight: 600;
  color: var(--on-surf);
  text-align: center;
  min-width: 10ch;
}

/* ── Loader de progresso ─────────────────────────────────────── */
.fec-loader-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3.5rem 2rem 3rem;
  gap: 1.1rem;
  min-height: 260px;
}
.fec-loader-ring {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--primary-container);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 0 rgba(17,68,119,.15);
  animation: fec-ring-pulse 2s ease-in-out infinite;
}
@keyframes fec-ring-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(17,68,119,.15); }
  50%      { box-shadow: 0 0 0 12px rgba(17,68,119,.0); }
}
.fec-loader-spin {
  font-size: 30px;
  color: var(--primary);
  animation: fec-spin 1.1s linear infinite;
}
@keyframes fec-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.fec-loader-label {
  font-size: .95rem;
  font-weight: 600;
  color: var(--on-surf);
  text-align: center;
  min-height: 1.5em;
  transition: opacity .3s;
  max-width: 320px;
}
.fec-loader-track {
  width: 100%;
  max-width: 380px;
  height: 12px;
  background: var(--surf-highest);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.fec-loader-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary) 0%, #4da8ff 100%);
  border-radius: 999px;
  transition: width .38s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: hidden;
}
.fec-loader-fill::after {
  content: '';
  position: absolute;
  right: -20px;
  top: 0;
  width: 40px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: fec-shimmer 1.4s ease-in-out infinite;
}
@keyframes fec-shimmer {
  0%   { opacity: 0; transform: translateX(-20px); }
  50%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(20px); }
}
.fec-loader-pct {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  min-width: 4.5ch;
  text-align: center;
  letter-spacing: -.02em;
  transition: all .2s;
}

.fec-inp-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}
.fec-assumir-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--primary);
  cursor: pointer;
  opacity: 0.45;
  transition: opacity .15s, background .15s;
  flex-shrink: 0;
}
.fec-assumir-btn:hover { opacity: 1; background: var(--primary-container); }
.fec-assumir-btn .material-symbols-outlined { font-size: 16px; }

.fec-desfazer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--error, #b91c1c);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity .15s, background .15s;
  flex-shrink: 0;
}
.fec-desfazer-btn:hover { opacity: 1; background: rgba(185,28,28,.1); }
.fec-desfazer-btn .material-symbols-outlined { font-size: 16px; }

.fec-reabrir-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .8rem;
  padding: .35rem .9rem;
  border-radius: var(--r-full);
  border: 1.5px solid #b45309;
  background: transparent;
  color: #b45309;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.fec-reabrir-btn:hover { background: #fef3c7; }
.fec-reabrir-btn .material-symbols-outlined { font-size: 15px; }

.fec-auth-todos-btn {
  font-size: 0.8rem;
  padding: 0.35rem 0.9rem;
  border-radius: var(--r-full);
  border: 1.5px solid var(--primary);
  background: transparent;
  color: var(--primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  transition: background .15s, color .15s;
}
.fec-auth-todos-btn:hover { background: var(--primary-container); }
.fec-auth-todos-btn .material-symbols-outlined { font-size: 16px; }

.fec-valor-edit-wrap { display: flex; flex-direction: column; gap: 2px; }
.fec-valor-edit {
  width: 110px;
  padding: 0.2rem 0.4rem;
  border: 1.5px solid var(--outline-var);
  border-radius: var(--r-sm);
  font-size: 0.875rem;
  text-align: right;
  background: var(--surf);
  color: var(--on-surf);
  transition: border-color .15s;
}
.fec-valor-edit:focus { outline: none; border-color: var(--primary); }
.fec-valor-edit.fec-valor-editado { border-color: var(--warning, #f59e0b); background: #fffbeb; }
.fec-valor-original { font-size: 0.7rem; color: var(--on-surf-var); text-align: right; }
.fec-money-val { font-variant-numeric: tabular-nums; }

/* Aviso de nenhum registro */
.fec-empty {
  padding: 1rem;
  text-align: center;
  font-size: 0.82rem;
  color: var(--on-surface-var);
}

/* ── Consolidado (Tela 3) ── */
.fec-cons-hdr {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem 0.75rem;
  border-bottom: 1px solid var(--outline-var);
  background: var(--surf-lowest);
}
.fec-cons-titulo {
  font-family: var(--font-brand);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--on-surface);
  margin: 0;
}
#fec-cons-content {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.fec-cons-block {
  border: 1px solid var(--outline-var);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surf-lowest);
}
.fec-cons-block-hdr {
  padding: 0.6rem 1rem;
  background: var(--primary-container);
  color: var(--on-primary-container);
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.fec-cons-block-hdr .material-symbols-outlined { font-size: 18px; }
.fec-cons-table {
  width: 100%;
  border-collapse: collapse;
}
.fec-cons-table th,
.fec-cons-table td {
  padding: 0.5rem 1rem;
  font-size: 0.82rem;
  text-align: left;
  border-bottom: 1px solid var(--outline-var);
}
.fec-cons-table tr:last-child td { border-bottom: none; }
.fec-cons-table th { background: var(--surf-low); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: .04em; }
.fec-cons-table td.fec-money { text-align: right; font-variant-numeric: tabular-nums; }
.fec-cons-table td.fec-money-pos { color: #155724; }
.fec-cons-table td.fec-money-neg { color: #9a1b1b; }
.fec-cons-total-row td { font-weight: 700; background: var(--surf-low); }

/* Aviso de consolidado bloqueado */
.fec-cons-locked {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--on-surface-var);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.fec-cons-locked .material-symbols-outlined { font-size: 48px; color: var(--outline); }

/* ── Formas de Pagamento por Seção (Configurações) ──────── */
.section-desc {
  font-size: 0.85rem;
  color: var(--on-surface-var);
  margin-bottom: 1rem;
  line-height: 1.5;
}
.formas-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
@media (max-width: 640px) { .formas-grid { grid-template-columns: 1fr; } }

.formas-grupo {
  border: 1px solid var(--outline-var);
  border-radius: var(--r-md);
  overflow: hidden;
}
.formas-grupo-hdr {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  background: var(--surf-low);
  font-weight: 700;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--outline-var);
}
.formas-grupo-hdr .material-symbols-outlined { font-size: 20px; color: var(--primary); }
.formas-grupo-desc {
  font-size: 0.78rem;
  color: var(--on-surface-var);
  padding: 0.4rem 1rem;
  border-bottom: 1px solid var(--outline-var);
  background: var(--surf-lowest);
}
.formas-checklist {
  padding: 0.5rem 0;
  max-height: 260px;
  overflow-y: auto;
}
.formas-checklist-vazio {
  padding: 1rem;
  font-size: 0.82rem;
  color: var(--on-surface-var);
  text-align: center;
}
.forma-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 1rem;
  cursor: pointer;
  transition: background 0.12s;
}
.forma-item:hover { background: var(--surf-low); }
.forma-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
}
.forma-item-label {
  font-size: 0.875rem;
  flex: 1;
}
.forma-item-badge {
  font-size: 0.7rem;
  padding: 1px 6px;
  border-radius: 99px;
  background: var(--secondary-container);
  color: var(--on-secondary-container);
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════
   ETIQUETAS A4
   ═══════════════════════════════════════════════════════ */
#view-etiquetas {
  height: calc(100vh - 64px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Layout principal (coluna: topbar + body) */
.etq-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* ── Barra superior ─── */
.etq-topbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--surf-low);
  border-bottom: 1px solid var(--outline-var);
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* Bloco de busca (tipo tabs + input + buscar) com dropdown relativo */
.etq-search-block {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Dropdown flutuante de resultados */
.etq-resultados-drop {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 340px;
  max-width: 480px;
  max-height: 260px;
  overflow-y: auto;
  background: var(--surf-lowest);
  border: 1px solid var(--outline-var);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,.14);
  z-index: 200;
  padding: 8px;
  font-size: 0.83rem;
}
.etq-resultados-drop.open { display: block; }

/* Separadores verticais */
.etq-topbar-sep {
  width: 1px;
  height: 36px;
  background: var(--outline-var);
  margin: 0 0.25rem;
  flex-shrink: 0;
}

/* Bloco de checkboxes */
.etq-cfg-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Bloco de modelos (radio) */
.etq-modelo-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Bloco posição + imprimir */
.etq-pos-print {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}
.etq-pos-label { font-size: 0.82rem; white-space: nowrap; }

/* tipo tabs */
.etq-tipo-tabs {
  display: flex;
  gap: 3px;
  background: var(--surf-container);
  border-radius: 7px;
  padding: 2px;
}
.etq-tab {
  flex: 1;
  padding: 4px 10px;
  border: none;
  border-radius: 5px;
  background: transparent;
  font-size: 0.78rem;
  cursor: pointer;
  color: var(--on-surface-var);
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.etq-tab.active {
  background: var(--primary);
  color: #fff;
  font-weight: 600;
}

/* busca */
.etq-search-row {
  display: flex;
  gap: 5px;
}
.etq-search-row input {
  width: 220px;
  padding: 5px 10px;
  border: 1px solid var(--outline-var);
  border-radius: 7px;
  font-size: 0.83rem;
  background: var(--surf-lowest);
  color: var(--on-surface);
}
.etq-search-row input:focus { outline: none; border-color: var(--primary); }

/* resultados internos */
.etq-hint { font-size: 0.8rem; color: var(--on-surface-var); padding: 2px 0; }
.etq-res-list { display: flex; flex-direction: column; gap: 2px; }
.etq-res-item {
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 1px;
  transition: background .12s;
}
.etq-res-item:hover { background: var(--primary-container); }
.etq-res-desc { font-size: 0.82rem; font-weight: 600; color: var(--on-surface); }
.etq-res-ean  { font-size: 0.72rem; color: var(--on-surface-var); }

/* seleção de produto */
.etq-selecao {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  background: var(--surf-container);
  border-radius: 8px;
}
.etq-sel-desc  { font-size: 0.85rem; font-weight: 700; }
.etq-sel-meta  { display: flex; flex-direction: column; gap: 2px; font-size: 0.78rem; color: var(--on-surface-var); }
.etq-sel-promo { font-size: 0.78rem; color: var(--primary); font-weight: 600; }
.etq-sel-qty   { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.etq-sel-qty label { font-size: 0.8rem; }
.etq-sel-qty input { width: 54px; padding: 4px 8px; border: 1px solid var(--outline-var); border-radius: 6px; font-size: 0.83rem; background: var(--surf-lowest); color: var(--on-surface); }

/* checkboxes / radios */
.etq-chk-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  cursor: pointer;
}
.etq-chk-label input { accent-color: var(--primary); width: 14px; height: 14px; }
.etq-radio-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  cursor: pointer;
}
.etq-radio-label input { accent-color: var(--primary); }
.etq-pos-input {
  width: 52px;
  padding: 4px 8px;
  border: 1px solid var(--outline-var);
  border-radius: 6px;
  font-size: 0.83rem;
  background: var(--surf-lowest);
  color: var(--on-surface);
}
.etq-pos-input:focus { outline: none; border-color: var(--primary); }

/* ── Corpo (preview + lista) ─── */
.etq-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.etq-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

#etq-preview-area,
.etq-preview-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--surf-container);
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* wrapper para escala — uma por folha */
.etq-a4-wrap {
  transform-origin: top center;
  flex-shrink: 0;
}

/* ── Painel direito: lista de etiquetas ─── */
.etq-right-panel {
  width: 320px;
  flex-shrink: 0;
  border-left: 1px solid var(--outline-var);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.etq-right-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--outline-var);
  flex-shrink: 0;
  background: var(--surf-low);
}
.etq-section-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--on-surface-var);
}
.etq-counter { font-size: 0.78rem; color: var(--on-surface-var); }

#etq-lista,
.etq-lista {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.etq-li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 7px;
  background: var(--surf-container);
  border-radius: 8px;
  font-size: 0.8rem;
}
.etq-li-info { display: flex; flex-direction: column; gap: 1px; overflow: hidden; }
.etq-li-desc { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etq-li-ean  { font-size: 0.7rem; color: var(--on-surface-var); }
.etq-li-controls { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.etq-li-controls .etq-qty-inp {
  width: 36px; padding: 2px 4px; border: 1px solid var(--outline-var);
  border-radius: 6px; font-size: 0.82rem; text-align: center;
  background: var(--surf-lowest); color: var(--on-surface);
  -moz-appearance: textfield;
}
.etq-li-controls .etq-qty-inp::-webkit-inner-spin-button,
.etq-li-controls .etq-qty-inp::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.etq-qty-btn {
  width: 24px; height: 24px;
  border: 1px solid var(--outline-var); border-radius: 6px;
  background: var(--surf-lowest); color: var(--on-surface);
  cursor: pointer; font-size: 1rem; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, border-color .12s;
  flex-shrink: 0;
}
.etq-qty-btn:hover { background: var(--primary-container); border-color: var(--primary); color: var(--on-primary-container); }
.etq-qty-btn:active { transform: scale(.92); }
.etq-remove {
  width: 24px; height: 24px;
  border: none; border-radius: 50%;
  background: transparent;
  color: var(--error);
  cursor: pointer;
  font-size: 0.8rem;
  display: flex; align-items: center; justify-content: center;
  opacity: 0.55;
  transition: opacity .15s, background .12s;
  margin-left: 2px;
}
.etq-remove:hover { opacity: 1; background: var(--error-container); }

/* folha A4 preview */
.etq-sheet {
  width: 794px;        /* 210mm a 96dpi */
  min-height: 1122px;  /* 297mm */
  background: #fff;
  box-shadow: 0 2px 16px rgba(0,0,0,.18);
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

/* ── Etiqueta Normal 105×30mm ─── */
.etq-normal {
  width: 396px;   /* 105mm ≈ 396px */
  height: 113px;  /* 30mm ≈ 113px */
  border: 0.5px dashed #ccc;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  color: #111;
  font-family: Arial, Helvetica, sans-serif;
  background: #fff;
}

/* ── Etiqueta Reduzida 50×30mm ─── */
.etq-reduzida {
  width: 189px;   /* 50mm ≈ 189px */
  height: 113px;
  border: 0.5px dashed #ccc;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  color: #111;
  font-family: Arial, Helvetica, sans-serif;
  background: #fff;
}

.etq-empty { background: rgba(0,0,0,.02); }

/* descrição — fixa no topo, z-index alto para sobrepor o preço */
.etq-normal .etq-desc {
  position: absolute;
  top: 4px;
  left: 6px;
  right: 6px;
  font-size: 16pt;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.15;
  z-index: 2;
  background: rgba(255,255,255,0.92);
}
.etq-reduzida .etq-desc {
  position: absolute;
  top: 4px;
  left: 5px;
  right: 5px;
  font-size: 11pt;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.15;
  z-index: 2;
  background: rgba(255,255,255,0.92);
}

/* parte inferior: barcode + preço — fixa na base */
.etq-normal .etq-bottom {
  position: absolute;
  bottom: 3px;
  left: 6px;
  right: 6px;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4px;
}
.etq-reduzida .etq-bottom {
  position: absolute;
  bottom: 3px;
  left: 5px;
  right: 5px;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3px;
}

/* barcode */
.etq-barcode-col { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; align-self: flex-end; }
.etq-barcode { display: flex; flex-direction: column; align-items: flex-start; }
.etq-ean-num { font-size: 6pt; letter-spacing: .03em; margin-top: 1px; color: #333; }
.etq-barcode-v { align-self: stretch; display: flex; align-items: flex-end; flex-shrink: 0; }

/* preços */
.etq-price-col { display: flex; flex-direction: column; align-items: flex-end; gap: 0; flex: 1; }
.etq-normal .etq-price-main { font-size: 43pt; font-weight: 900; line-height: 1; white-space: nowrap; }
.etq-reduzida .etq-price-main { font-size: 26pt; font-weight: 900; line-height: 1; white-space: nowrap; }
.etq-normal .etq-price-strike { font-size: 11pt; text-decoration: line-through; color: #555; text-align: right; }
.etq-reduzida .etq-price-strike { font-size: 8pt; text-decoration: line-through; color: #555; text-align: right; }

/* tag promoção — absoluta no topo direito (etiqueta normal), z-index 3 */
.etq-promo-tag {
  position: absolute;
  top: 4px; right: 6px;
  z-index: 3;
  font-size: 6pt; font-weight: 900;
  background: #111; color: #fff;
  padding: 1px 4px; border-radius: 2px;
  letter-spacing: .05em; text-transform: uppercase;
}
/* ═══════════════════════════════════════════════════════════
   Painel de Vendas por PDV
   ═══════════════════════════════════════════════════════════ */

/* Status de carregamento */
.vd-status {
  font-size: 0.82rem; color: var(--on-surface-var);
  margin-left: 0.5rem; align-self: center;
}

/* Chips de período rápido — view Vendas */
.vd-chip {
  padding: 3px 12px; border-radius: 20px; font-size: 0.78rem; font-weight: 500;
  border: 1.5px solid var(--outline-var); background: transparent;
  color: var(--on-surface-var); cursor: pointer; transition: all .15s;
  white-space: nowrap;
}
.vd-chip:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-container); }
.vd-chip.active { border-color: var(--primary); background: var(--primary); color: #fff; }

/* Barra de progresso indeterminada (legado) */
.vd-progress-wrap {
  padding: 0.75rem 1.5rem;
  display: flex; flex-direction: column; gap: 6px;
  background: var(--surf-low);
  border-bottom: 1px solid var(--outline-var);
}
.vd-progress-track {
  width: 100%; height: 4px;
  background: var(--outline-var); border-radius: 99px; overflow: hidden; position: relative;
}
.vd-progress-fill {
  position: absolute; height: 100%; width: 40%;
  background: var(--primary); border-radius: 99px;
  animation: vd-indeterminate 1.4s ease-in-out infinite;
}
@keyframes vd-indeterminate {
  0%   { left: -45%; }
  100% { left: 105%; }
}
.vd-progress-msg { font-size: 0.78rem; color: var(--on-surface-var); }

/* Título de seção dentro do dashboard */
.vd-section-title {
  font-family: var(--font-brand);
  font-size: 0.9rem; font-weight: 600;
  color: var(--on-surface-var);
  text-transform: uppercase; letter-spacing: .06em;
  display: flex; align-items: center; gap: 6px;
}

/* Grid de cards de PDV */
.vd-pdv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.875rem;
}

.vd-pdv-card {
  background: var(--surf-lowest);
  border: 1.5px solid var(--outline-var);
  border-top: 3px solid var(--primary);
  border-radius: var(--r-md);
  padding: 1rem 1.2rem;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color .15s, box-shadow .15s, transform .12s;
  box-shadow: var(--ev1);
}
.vd-pdv-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 16px rgba(17,68,119,.15);
  transform: translateY(-2px);
}
.vd-pdv-card-title {
  font-family: var(--font-brand); font-size: 0.85rem; font-weight: 700;
  color: var(--primary); display: flex; align-items: center; gap: 5px;
  text-transform: uppercase; letter-spacing: .04em;
}
.vd-pdv-card-valor {
  font-size: 1.25rem; font-weight: 800; color: var(--on-surface);
  font-family: var(--font-brand);
}
.vd-pdv-card-meta {
  font-size: 0.73rem; color: var(--on-surface-var);
  display: flex; gap: 10px; padding-top: 4px;
  border-top: 1px solid var(--outline-var);
}

/* Campo de busca dentro de ranking card */
.ranking-search-wrap {
  display: flex; align-items: center; gap: 6px;
  background: var(--surf-low);
  border: 1.5px solid var(--outline-var);
  border-radius: var(--r-sm);
  padding: 0.3rem 0.65rem;
  transition: border-color .15s;
}
.ranking-search-wrap:focus-within { border-color: var(--primary); }
.ranking-search-wrap .material-symbols-outlined { font-size: 16px; color: var(--on-surface-var); flex-shrink: 0; }
.ranking-search-wrap input {
  border: none; background: transparent; outline: none;
  font-size: 0.82rem; color: var(--on-surface); width: 100%;
}
.ranking-search-wrap input::placeholder { color: var(--on-surface-var); opacity: .7; }
.ranking-no-results {
  text-align: center; padding: 1rem; color: var(--on-surface-var);
  font-size: 0.82rem; font-style: italic;
}

/* ── Rankings ─────────────────────────────────────────────── */
.vd-rankings {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.vd-ranking-full { grid-column: 1 / -1; }

/* Tabela de ranking com scroll */
.ranking-scroll {
  overflow-y: auto;
  max-height: 340px;
  border-radius: 0 0 var(--r-md) var(--r-md);
  scrollbar-width: thin;
  scrollbar-color: var(--outline-var) transparent;
}
.ranking-scroll::-webkit-scrollbar { width: 5px; }
.ranking-scroll::-webkit-scrollbar-thumb { background: var(--outline-var); border-radius: 99px; }

/* Tabela */
.ranking-table {
  width: 100%; border-collapse: collapse;
  font-size: 0.82rem;
}
.ranking-table thead {
  position: sticky; top: 0; z-index: 1;
  background: var(--surf-low);
}
.ranking-table thead th {
  padding: 0.45rem 0.75rem;
  text-align: left; font-weight: 700;
  color: var(--on-surface-var);
  font-size: 0.73rem; text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 2px solid var(--outline-var);
  white-space: nowrap;
}
.ranking-table thead th.num { text-align: right; }
.ranking-table tbody tr {
  border-bottom: 1px solid var(--outline-var);
  transition: background .1s;
}
.ranking-table tbody tr:last-child { border-bottom: none; }
.ranking-table tbody tr:hover { background: var(--primary-container); }
.ranking-table tbody tr:nth-child(even) { background: var(--surf-low); }
.ranking-table tbody tr:nth-child(even):hover { background: var(--primary-container); }
.ranking-table td {
  padding: 0.5rem 0.75rem;
  color: var(--on-surface);
  vertical-align: middle;
}
.ranking-table td.num {
  text-align: right; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--primary); white-space: nowrap;
}
.ranking-table td.rank-pos {
  width: 28px; font-weight: 800; color: var(--outline);
  font-size: 0.7rem; padding-right: 0;
}
.ranking-table td.rank-name { font-weight: 500; }

/* Card de ranking — ícone de categoria colorido */
.ranking-card-icon {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.ranking-card-icon.blue   { background: #e8f0fa; color: #114477; }
.ranking-card-icon.green  { background: #e6f4ea; color: #1e7e44; }
.ranking-card-icon.orange { background: #fff3e0; color: #e65100; }
.ranking-card-icon.purple { background: #f3e5f5; color: #7b1fa2; }

/* Título de ranking com ícone */
.ranking-title-row {
  display: flex; align-items: center; gap: 0.6rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--outline-var);
  margin-bottom: 0;
}
.ranking-title-row .ranking-title {
  flex: 1;
  font-family: var(--font-brand); font-size: 0.9rem; font-weight: 700;
  color: var(--on-surface);
}
.ranking-badge {
  font-size: 0.68rem; font-weight: 700;
  background: var(--primary-container);
  color: var(--on-primary-container);
  padding: 2px 8px; border-radius: 99px;
  white-space: nowrap;
}

/* ── Modal PDV ─────────────────────────────────────────────── */
.vd-modal-pdv {
  max-width: min(1240px, 96vw) !important;
  max-height: 92vh !important;
  display: flex; flex-direction: column;
  padding: 0 !important;
  overflow: hidden;
}
.vd-modal-header {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 1.25rem 1.75rem;
  background: var(--primary);
  border-radius: var(--r-md) var(--r-md) 0 0;
  flex-shrink: 0;
}
.vd-modal-header .vd-modal-icon {
  background: rgba(255,255,255,.18);
  border-radius: var(--r-sm);
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 22px;
}
.vd-modal-header h3 {
  flex: 1; margin: 0;
  font-family: var(--font-brand); font-size: 1.2rem; font-weight: 700;
  color: #fff;
}
.vd-modal-header .vd-modal-close {
  background: rgba(255,255,255,.18); border: none; border-radius: var(--r-sm);
  width: 34px; height: 34px; cursor: pointer; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; transition: background .15s;
}
.vd-modal-header .vd-modal-close:hover { background: rgba(255,255,255,.32); }
.vd-modal-header .vd-modal-print {
  background: rgba(255,255,255,.18); border: none; border-radius: var(--r-sm);
  width: 34px; height: 34px; cursor: pointer; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; transition: background .15s; margin-right: 4px;
}
.vd-modal-header .vd-modal-print:hover { background: rgba(255,255,255,.32); }

.vd-modal-cards-row {
  padding: 1rem 1.75rem 0.75rem;
  background: var(--surf-lowest);
  border-bottom: 1px solid var(--outline-var);
  display: flex; gap: 0.75rem; flex-wrap: wrap;
  flex-shrink: 0;
}
.vd-modal-kpi {
  flex: 1; min-width: 110px;
  background: var(--primary-container);
  border-radius: var(--r-md);
  padding: 0.65rem 1rem;
  display: flex; flex-direction: column; gap: 2px;
}
.vd-modal-kpi-label {
  font-size: 0.68rem; font-weight: 700;
  color: var(--on-primary-container);
  text-transform: uppercase; letter-spacing: .05em; opacity: .8;
}
.vd-modal-kpi-value {
  font-family: var(--font-brand); font-size: 1.1rem; font-weight: 800;
  color: var(--on-primary-container);
  white-space: nowrap;
}

/* Tabs pill */
.vd-tabs {
  display: flex; gap: 6px; padding: 0.75rem 1.75rem;
  background: var(--surf-low);
  border-bottom: 1px solid var(--outline-var);
  flex-shrink: 0;
}
.vd-tab {
  padding: 0.4rem 1.1rem;
  border: 1.5px solid var(--outline-var);
  border-radius: 99px;
  background: transparent;
  font-size: 0.82rem; font-weight: 600; cursor: pointer;
  color: var(--on-surface-var);
  transition: all .15s;
}
.vd-tab:hover { border-color: var(--primary); color: var(--primary); }
.vd-tab.active {
  background: var(--primary); border-color: var(--primary);
  color: #fff;
}

.vd-modal-body {
  flex: 1; overflow-y: auto; min-height: 0;
  padding: 1.25rem 1.75rem;
}

/* Resumo compacto dentro dos modais */
.vd-resumo-sm { gap: 0.6rem; }
.vd-resumo-sm .resumo-card { padding: 0.65rem 1rem; min-width: 120px; }
.vd-resumo-sm .resumo-valor { font-size: 1.1rem; }

/* Tabela dentro do modal */
.vd-modal-body .ranking-table td { padding: 0.55rem 0.75rem; }
.vd-modal-body .ranking-scroll { max-height: calc(92vh - 300px); }

/* ── Painel de Tributação Estadual — grupos por alíquota ──── */
.trb-group-card {
  background: var(--surf-lowest);
  border: 1.5px solid var(--outline-var);
  border-top: 3px solid var(--primary);
  border-radius: var(--r-md);
  box-shadow: var(--ev1);
  margin-bottom: 1rem;
  overflow: hidden;
}
.trb-group-header {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem 1.5rem;
  padding: 0.85rem 1.2rem;
  background: var(--primary-container);
}
.trb-group-aliquota {
  font-family: var(--font-brand); font-size: 1.05rem; font-weight: 800;
  color: var(--on-primary-container);
  display: flex; align-items: center; gap: 8px;
}
.trb-badge-st {
  background: var(--error);
  color: #fff;
  font-size: 0.68rem; font-weight: 700;
  padding: 0.15rem 0.55rem;
  border-radius: var(--r-full);
  letter-spacing: .03em;
}
.trb-group-metrics {
  display: flex; flex-wrap: wrap; gap: 1.2rem;
  margin-left: auto;
  font-size: 0.8rem;
}
.trb-group-metrics span { color: var(--on-primary-container); opacity: .85; }
.trb-group-metrics strong { color: var(--on-primary-container); font-weight: 700; }
.trb-total-row td {
  font-weight: 800;
  background: var(--surf-low);
  border-top: 2px solid var(--outline-var);
  color: var(--on-surface);
}
.trb-total-row td.num { color: var(--primary); }

.trb-widgets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.trb-widget-card {
  background: var(--surf-lowest);
  border: 1.5px solid var(--outline-var);
  border-left: 4px solid var(--primary);
  border-radius: var(--r-md);
  box-shadow: var(--ev1);
  padding: 0.75rem 0.9rem;
}
.trb-widget-card.trb-widget-st { border-left-color: var(--error); }
.trb-widget-aliquota {
  font-family: var(--font-brand); font-weight: 800; font-size: 0.95rem;
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 0.5rem;
}
.trb-widget-row {
  display: flex; justify-content: space-between; gap: 0.5rem;
  font-size: 0.78rem; color: var(--on-surface-var);
  padding: 0.1rem 0;
}
.trb-widget-row strong { color: var(--on-surface); font-weight: 700; }

/* Drill overlay sobre o modal PDV */
.vd-drill-overlay { z-index: 300; }

/* Modal drill  */
.vd-drill-modal {
  max-width: min(1080px, 96vw) !important;
  max-height: 90vh !important;
  display: flex; flex-direction: column;
  padding: 0 !important;
  overflow: hidden;
}
.vd-drill-modal .vd-modal-header { border-radius: var(--r-md) var(--r-md) 0 0; }
.vd-drill-modal .vd-modal-body { padding: 1.25rem 1.75rem; }

/* tag acima do código de barras (etiqueta normal) */
.etq-promo-tag-bar {
  position: static;
  font-size: 6pt; font-weight: 900;
  background: #111; color: #fff;
  padding: 1px 4px; border-radius: 2px;
  letter-spacing: .05em; text-transform: uppercase;
}
/* tag inline na coluna de preço (etiqueta reduzida) */
.etq-promo-tag-inline {
  position: static;
  font-size: 5.5pt; font-weight: 900;
  background: #111; color: #fff;
  padding: 1px 3px; border-radius: 2px;
  letter-spacing: .05em; text-transform: uppercase;
  align-self: flex-end; margin-bottom: 1px;
}

/* ── Log de Atividade ─────────────────────────────────────── */
.section-header-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.section-header-row .section-title { margin-bottom: 0; flex: 1; }

.logs-filters {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.logs-filters select {
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--outline);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--on-surface);
  font-size: 0.875rem;
  cursor: pointer;
}

.logs-container {
  max-height: 420px;
  overflow-y: auto;
  border: 1px solid var(--outline-variant);
  border-radius: var(--r-md);
  background: var(--surface-variant);
}

.log-entry {
  display: grid;
  grid-template-columns: 9rem 6rem 7rem 1fr;
  gap: 0.25rem 0.75rem;
  align-items: baseline;
  padding: 0.45rem 0.875rem;
  border-bottom: 1px solid var(--outline-variant);
  font-size: 0.8125rem;
  line-height: 1.4;
}
.log-entry:last-child { border-bottom: none; }

.log-ts   { color: var(--on-surface-variant); font-variant-numeric: tabular-nums; }
.log-nivel { font-weight: 600; text-transform: uppercase; font-size: 0.725rem; letter-spacing: .04em; }
.log-modulo { color: var(--on-surface-variant); font-size: 0.8rem; }
.log-msg  { }

.log-nivel-sucesso { color: #1a7f41; }
.log-nivel-info    { color: #1565c0; }
.log-nivel-aviso   { color: #e65100; }
.log-nivel-erro    { color: #b71c1c; }

@media (prefers-color-scheme: dark) {
  .log-nivel-sucesso { color: #4caf50; }
  .log-nivel-info    { color: #64b5f6; }
  .log-nivel-aviso   { color: #ffb74d; }
  .log-nivel-erro    { color: #ef9a9a; }
}
:root[data-theme="dark"] .log-nivel-sucesso { color: #4caf50; }
:root[data-theme="dark"] .log-nivel-info    { color: #64b5f6; }
:root[data-theme="dark"] .log-nivel-aviso   { color: #ffb74d; }
:root[data-theme="dark"] .log-nivel-erro    { color: #ef9a9a; }

/* ── Liberações PDV ───────────────────────────────────── */

/* Modal header com título + botão de impressão */
.modal-header-row {
  display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem;
}
.modal-header-row .modal-title { flex: 1; margin: 0; }
.modal-subtitle {
  font-size: 0.875rem; color: var(--on-surface-variant);
  margin: 0 0 0.875rem 0;
}

/* Liberações — linha expansível */
.lib-row-expand { cursor: pointer; }
.lib-row-expand:hover td { background: var(--primary-container); }
.lib-row-detail td { padding: 0; background: var(--surface-variant); }
.lib-detail-inner {
  overflow: hidden; max-height: 0; transition: max-height .25s ease;
}
.lib-detail-inner.open { max-height: 800px; }
.lib-detail-table {
  width: 100%; font-size: 0.8125rem; border-collapse: collapse;
  margin: 0;
}
.lib-detail-table th,
.lib-detail-table td {
  padding: 0.3rem 0.875rem;
  border-bottom: 1px solid var(--outline-variant);
  text-align: left;
}
.lib-detail-table th {
  font-size: 0.75rem; font-weight: 600;
  color: var(--on-surface-variant); text-transform: uppercase; letter-spacing: .04em;
  background: var(--surface-variant);
}
.lib-detail-table td.num,
.lib-detail-table th.num { text-align: right; }
.lib-expand-icon { transition: transform .2s; display: inline-block; font-size: 0.7rem; }
.lib-expand-icon.open { transform: rotate(90deg); }

/* Clickable rank rows */
.lib-rank-row-clickable { cursor: pointer; }
.lib-rank-row-clickable:hover td { background: var(--primary-container) !important; }

/* Painel de Cancelamentos — linha do tempo por hora */
.pc-timeline {
  display: flex; align-items: flex-end; gap: 0.5rem;
  height: 200px; padding: 0.5rem 0.25rem 0;
}
.pc-tl-col {
  display: flex; flex-direction: column; align-items: center;
  flex: 1; min-width: 0; gap: 0.15rem;
}
.pc-tl-bar {
  width: 100%; min-height: 3px;
  background: var(--primary); border-radius: 3px 3px 0 0;
  transition: height .3s;
}
.pc-tl-label { font-size: 0.65rem; color: var(--on-surface-variant); white-space: nowrap; }
.pc-tl-qtd   { font-size: 0.7rem;  font-weight: 600; color: var(--on-surface); }

/* Célula de itens no modal drill */
.pc-drill-itens { font-size: 0.78rem; color: var(--on-surface-variant); }

/* ── Painel Cancelamentos: Lista completa ───────────────────────────────── */
.pc-lista-wrap { margin-top: 1.5rem; }
.pc-lista-header {
    display: flex; align-items: center; gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.pc-lista-header h3 { font-size: 0.95rem; font-weight: 600; margin: 0; }
.pc-lista-count { font-size: 0.78rem; color: var(--on-surface-variant); }

.pc-lista-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.pc-lista-table th {
    text-align: left; padding: 0.45rem 0.6rem;
    background: var(--surface-variant); font-weight: 600;
    position: sticky; top: 0; z-index: 1;
}
.pc-lista-table th.num, .pc-lista-table td.num { text-align: right; }
.pc-lista-table td { padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--border-color); vertical-align: middle; }
.pc-lista-row:last-child td { border-bottom: none; }
.pc-lista-row.pc-row-expand { cursor: pointer; }
.pc-lista-row.pc-row-expand:hover { background: var(--hover-bg); }

.pc-expand-cell { width: 2rem; text-align: center; }
.pc-expand-icon { font-size: 1.1rem; color: var(--on-surface-variant); vertical-align: middle; }

.pc-motivo { max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pc-badge {
    display: inline-block; padding: 0.1rem 0.45rem; border-radius: 4px;
    background: var(--surface-variant); font-size: 0.73rem;
    white-space: nowrap;
}

.pc-itens-row td { background: var(--surface-variant); padding: 0 !important; }
.pc-itens-inner { padding: 0.5rem 1rem 0.75rem 2.5rem; }
.pc-itens-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.pc-itens-table th {
    text-align: left; padding: 0.3rem 0.5rem;
    font-weight: 600; border-bottom: 1px solid var(--border-color);
}
.pc-itens-table th.num, .pc-itens-table td.num { text-align: right; }
.pc-itens-table td { padding: 0.28rem 0.5rem; }
.pc-itens-table tr:not(:last-child) td { border-bottom: 1px solid var(--border-color); }

/* Print */
@media print {
  .no-print, .app-header, .menu-grid, #page-login, #page-troca-senha,
  .filter-bar { display: none !important; }
  .modal-box { box-shadow: none !important; border: none !important; }
  .lib-detail-inner { max-height: none !important; }
}