/* ============================================================
   Appetity Design System — Components v2 (SUB-FRENTE E2)
   Mobile-first absoluto · namespace .dsv-* (não colide com .ds-* nem .vqen-*)
   ----------------------------------------------------------------
   Depende de tokens-v2.css carregado antes.
   ============================================================ */

/* ============================================================
   BOTÕES — 1 base + 5 variantes semânticas + 5 tamanhos
   ============================================================ */
.dsv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  min-width: var(--touch-min);
  padding: var(--space-2) var(--space-4);
  font-family: inherit;
  font-size: var(--font-base);
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  cursor: pointer;
  user-select: none;
  transition: background var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast),
              box-shadow var(--transition-fast),
              transform 100ms ease;
  white-space: nowrap;
  text-decoration: none;
}
.dsv-btn:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}
.dsv-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.dsv-btn:active:not(:disabled) { transform: translateY(1px); }

.dsv-btn--primary {
  background: var(--brand-primary);
  color: #ffffff;
}
.dsv-btn--primary:hover:not(:disabled) { background: var(--brand-primary-hover); }
.dsv-btn--primary:active:not(:disabled) { background: var(--brand-primary-active); }

.dsv-btn--secondary {
  background: #ffffff;
  color: var(--neutral-800);
  border-color: var(--neutral-300);
}
.dsv-btn--secondary:hover:not(:disabled) {
  background: var(--neutral-50);
  border-color: var(--neutral-400);
}

.dsv-btn--ghost {
  background: transparent;
  color: var(--neutral-700);
}
.dsv-btn--ghost:hover:not(:disabled) { background: var(--neutral-100); }

.dsv-btn--danger {
  background: #ffffff;
  color: var(--danger-fg);
  border-color: var(--danger-border);
}
.dsv-btn--danger:hover:not(:disabled) { background: var(--danger-bg); }

.dsv-btn--danger-solid {
  background: var(--danger-border);
  color: #ffffff;
}
.dsv-btn--danger-solid:hover:not(:disabled) { filter: brightness(0.95); }

.dsv-btn--success {
  background: var(--success-border);
  color: #ffffff;
}
.dsv-btn--success:hover:not(:disabled) { filter: brightness(0.95); }

.dsv-btn--dark {
  background: var(--brand-dark);
  color: #ffffff;
}
.dsv-btn--dark:hover:not(:disabled) { background: var(--brand-dark-hover); }

/* Tamanhos */
.dsv-btn--xs { min-height: 32px; padding: 4px 10px; font-size: var(--font-xs); }
.dsv-btn--sm { min-height: 36px; padding: 6px 12px; font-size: var(--font-sm); }
.dsv-btn--lg { min-height: var(--touch-lg); padding: 14px 24px; font-size: var(--font-md); }
.dsv-btn--icon { min-width: var(--touch-min); width: var(--touch-min); padding: var(--space-2); }
.dsv-btn--block { width: 100%; }

/* Em mouse-precise devices, alivia o min-height */
@media (hover: hover) and (pointer: fine) {
  .dsv-btn { min-height: 36px; padding: 6px 14px; }
  .dsv-btn--lg { min-height: 44px; }
  .dsv-btn--xs { min-height: 28px; }
}

/* ============================================================
   INPUTS / SELECT / TEXTAREA
   ============================================================ */
.dsv-input,
.dsv-select,
.dsv-textarea {
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--space-3) var(--space-4);
  font-family: inherit;
  font-size: var(--font-md);  /* >=16px previne zoom iOS */
  line-height: 1.4;
  color: var(--neutral-900);
  background: #ffffff;
  border: 1px solid var(--neutral-300);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  appearance: none;
}
.dsv-input:focus,
.dsv-select:focus,
.dsv-textarea:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(124, 58, 237,0.15);
}
.dsv-input:disabled,
.dsv-select:disabled,
.dsv-textarea:disabled {
  background: var(--neutral-100);
  color: var(--neutral-500);
  cursor: not-allowed;
}
.dsv-input::placeholder { color: var(--neutral-400); }
.dsv-input--invalid,
.dsv-select--invalid,
.dsv-textarea--invalid {
  border-color: var(--danger-border);
}
.dsv-input--invalid:focus { box-shadow: 0 0 0 3px rgba(220,38,38,0.15); }
.dsv-textarea {
  min-height: 88px;
  resize: vertical;
  line-height: var(--leading-base);
}

/* Em mouse-precise, inputs ficam mais compactos */
@media (hover: hover) and (pointer: fine) {
  .dsv-input, .dsv-select, .dsv-textarea {
    min-height: 36px;
    padding: 6px 12px;
    font-size: var(--font-base);
  }
}

/* ============================================================
   FIELD GROUP — label + input + help/error
   ============================================================ */
.dsv-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.dsv-field__label {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--neutral-700);
}
.dsv-field__label--required::after {
  content: " *";
  color: var(--danger-border);
}
.dsv-field__help {
  font-size: var(--font-xs);
  color: var(--neutral-500);
}
.dsv-field__error {
  font-size: var(--font-xs);
  color: var(--danger-fg);
}

/* ============================================================
   MODAL UNIVERSAL — bottom-sheet mobile, centered desktop
   ============================================================ */
.dsv-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.6);
  z-index: var(--z-modal-backdrop);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  animation: dsvFadeIn 200ms ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
@keyframes dsvFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.dsv-modal {
  width: 100%;
  max-height: 92vh;
  background: #ffffff;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: var(--z-modal);
  animation: dsvSlideUp 250ms ease;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: var(--shadow-modal);
}
@keyframes dsvSlideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* Modal stacking (filho/neto) */
.dsv-modal-backdrop--child {
  z-index: var(--z-modal-child);
  background: rgba(15,23,42,0.35);
}
.dsv-modal-backdrop--child .dsv-modal { z-index: calc(var(--z-modal-child) + 100); }
.dsv-modal-backdrop--grandchild {
  z-index: var(--z-modal-grandchild);
  background: rgba(15,23,42,0.25);
}
.dsv-modal-backdrop--grandchild .dsv-modal { z-index: calc(var(--z-modal-grandchild) + 100); }

@media (min-width: 768px) {
  .dsv-modal-backdrop {
    align-items: center;
    padding: var(--space-4);
  }
  .dsv-modal {
    max-width: 560px;
    max-height: 85vh;
    border-radius: var(--radius-xl);
    animation: dsvFadeInScale 200ms ease;
  }
  @keyframes dsvFadeInScale {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
  }
  .dsv-modal--sm { max-width: 400px; }
  .dsv-modal--lg { max-width: 800px; }
  .dsv-modal--xl { max-width: 1100px; }
  .dsv-modal--full { max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); }
}

.dsv-modal__header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--neutral-200);
  background: #ffffff;
  position: sticky;
  top: 0;
  z-index: 10;
}
.dsv-modal__title {
  margin: 0;
  font-size: var(--font-lg);
  font-weight: 700;
  color: var(--neutral-900);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dsv-modal__subtitle {
  font-size: var(--font-xs);
  color: var(--neutral-500);
  margin: 2px 0 0;
}

/* Botão fechar = TEXTO "Fechar", não × */
.dsv-modal__close {
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: 1px solid var(--neutral-300);
  border-radius: var(--radius-md);
  color: var(--neutral-700);
  font-family: inherit;
  font-size: var(--font-sm);
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}
.dsv-modal__close:hover { background: var(--neutral-100); }
.dsv-modal__close:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}

.dsv-modal__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: var(--space-5);
}

.dsv-modal__footer {
  flex-shrink: 0;
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--neutral-200);
  background: #ffffff;
}
@media (max-width: 599px) {
  .dsv-modal__footer { flex-direction: column-reverse; }
  .dsv-modal__footer .dsv-btn { width: 100%; }
}

/* ============================================================
   CARD UNIVERSAL
   ============================================================ */
.dsv-card {
  background: #ffffff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.dsv-card:hover { border-color: var(--neutral-300); box-shadow: var(--shadow-sm); }
.dsv-card--clickable { cursor: pointer; }
.dsv-card--clickable:active { transform: scale(0.99); }
.dsv-card--selected {
  border-color: var(--brand-primary);
  background: var(--brand-primary-soft);
}

/* Card horizontal compacto (padrão view-clientes) */
.dsv-card--row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
}
@media (min-width: 481px) {
  .dsv-card--row { grid-template-columns: 56px 1fr auto; gap: var(--space-3); }
}
.dsv-card--row:hover {
  border-color: var(--brand-primary);
  background: var(--brand-primary-soft);
}

/* ============================================================
   GRID RESPONSIVO
   ============================================================ */
.dsv-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}
.dsv-grid--compact {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
}
.dsv-grid--wide {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
}
/* Para listas tipo Clientes — UMA coluna, full-width compacto */
.dsv-grid--list {
  grid-template-columns: 1fr;
}

/* ============================================================
   LIST CONTAINER (scroll funcional)
   ============================================================ */
.dsv-list-container {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.dsv-list-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: var(--space-3);
}
.dsv-list-scroll > * + * { margin-top: var(--space-2); }

/* ============================================================
   BOTÃO DELETE INLINE (substitui × vermelho gigante)
   ============================================================ */
.dsv-btn-delete-inline {
  min-width: 36px;
  min-height: 36px;
  width: 36px;
  height: 36px;
  padding: var(--space-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--neutral-500);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}
.dsv-btn-delete-inline:hover {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger-fg);
}
.dsv-btn-delete-inline:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}
@media (pointer: coarse) {
  .dsv-btn-delete-inline {
    min-width: var(--touch-min);
    min-height: var(--touch-min);
    width: var(--touch-min);
    height: var(--touch-min);
  }
}

/* ============================================================
   KPI CARDS (gradient padrão Cliente)
   ============================================================ */
.dsv-kpi-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin-bottom: var(--space-4);
}
.dsv-kpi {
  color: #ffffff;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  min-height: 76px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.dsv-kpi__label {
  font-size: var(--font-xs);
  opacity: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-weight: 600;
}
.dsv-kpi__value {
  font-size: var(--font-2xl);
  font-weight: 800;
  line-height: 1.1;
  margin-top: 2px;
}
.dsv-kpi--brand    { background: linear-gradient(135deg, var(--brand-dark), var(--brand-dark-hover)); }
.dsv-kpi--success  { background: linear-gradient(135deg, #10b981, #059669); }
.dsv-kpi--warning  { background: linear-gradient(135deg, #f59e0b, #d97706); }
.dsv-kpi--accent   { background: linear-gradient(135deg, #7c3aed, #5b21b6); }
.dsv-kpi--danger   { background: linear-gradient(135deg, #dc2626, #991b1b); }
.dsv-kpi--info     { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.dsv-kpi--gold     { background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-active)); }

/* ============================================================
   PILL FILTROS (padrão Cliente)
   ============================================================ */
.dsv-pill-row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.dsv-pill {
  padding: 7px 12px;
  min-height: 36px;
  border: 1.5px solid var(--neutral-300);
  background: #ffffff;
  color: var(--neutral-800);
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--transition-fast);
}
.dsv-pill:hover { border-color: var(--brand-primary); }
.dsv-pill.dsv-pill--active {
  background: var(--brand-dark);
  color: #ffffff;
  border-color: var(--brand-dark);
}
@media (pointer: coarse) {
  .dsv-pill { min-height: var(--touch-min); padding: 10px 14px; }
}

/* ============================================================
   TOOLBAR (busca + filtros + ordem em card branco)
   ============================================================ */
.dsv-toolbar {
  background: #ffffff;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3);
  border: 1px solid var(--neutral-200);
}
.dsv-toolbar__row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
}
.dsv-toolbar .dsv-input,
.dsv-toolbar .dsv-select {
  flex: 1 1 180px;
  min-width: 0;
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.dsv-empty {
  text-align: center;
  padding: var(--space-12) var(--space-4);
  color: var(--neutral-500);
}
.dsv-empty__icon {
  font-size: 48px;
  opacity: 0.5;
  margin-bottom: var(--space-3);
}
.dsv-empty__title {
  margin: 0 0 var(--space-2);
  font-size: var(--font-lg);
  color: var(--neutral-900);
}
.dsv-empty__desc {
  margin: 0 0 var(--space-4);
  font-size: var(--font-sm);
}

/* ============================================================
   TOAST
   ============================================================ */
.dsv-toast {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom) + 20px);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  min-width: 240px;
  max-width: calc(100% - 32px);
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  animation: dsvToastIn 200ms ease;
  background: var(--neutral-900);
  color: #ffffff;
}
@keyframes dsvToastIn {
  from { opacity: 0; transform: translate(-50%, 20px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.dsv-toast--success { background: var(--success-border); }
.dsv-toast--danger  { background: var(--danger-border); }
.dsv-toast--warning { background: var(--warning-border); color: var(--warning-fg); }
.dsv-toast--info    { background: var(--info-border); }

/* ============================================================
   SAFE-AREA UTILITIES
   ============================================================ */
.dsv-safe-top    { padding-top: env(safe-area-inset-top); }
.dsv-safe-bottom { padding-bottom: env(safe-area-inset-bottom); }
.dsv-safe-x {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.dsv-header-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-fixed);
  background: #ffffff;
  padding-top: env(safe-area-inset-top);
  border-bottom: 1px solid var(--neutral-200);
}
.dsv-footer-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-fixed);
  background: #ffffff;
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid var(--neutral-200);
}

/* ============================================================
   VIEW SHELL — container com scroll vertical funcional
   ============================================================ */
.dsv-view {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.dsv-view__header {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: #ffffff;
  border-bottom: 1px solid var(--neutral-200);
}
.dsv-view__title {
  margin: 0;
  font-size: var(--font-2xl);
  font-weight: 700;
  color: var(--neutral-900);
  flex: 1;
  min-width: 0;
}
.dsv-view__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
@media (max-width: 480px) {
  .dsv-view__actions { width: 100%; }
  .dsv-view__actions .dsv-btn { flex: 1 1 auto; }
}
.dsv-view__content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: var(--space-4);
}

/* ============================================================
   ACESSIBILIDADE: screen-reader only
   ============================================================ */
.dsv-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   FIX-INPUTS — Inputs em modais com altura profissional
   Padrão Stripe/Linear/Notion: 36-38px desktop, 42px mobile.
   Sobrescreve inline style="min-height:44px" e similares.
   ============================================================ */

/* Modal containers conhecidos do projeto */
.modal-bg-padrao input[type="text"],
.modal-bg-padrao input[type="email"],
.modal-bg-padrao input[type="tel"],
.modal-bg-padrao input[type="number"],
.modal-bg-padrao input[type="password"],
.modal-bg-padrao input[type="date"],
.modal-bg-padrao input[type="time"],
.modal-bg-padrao input[type="search"],
.modal-bg-padrao input[type="url"],
.modal-bg-padrao select,
.cpg-modal-box .cpg-input,
.ui-modal-body input,
.ui-modal-body select,
.modal-pro input,
.modal-pro select {
  min-height: 36px;
  height: 36px;
  padding: 7px 11px;
  font-size: 14px;
  line-height: 1.4;
}

.modal-bg-padrao textarea,
.cpg-modal-box textarea.cpg-input,
.ui-modal-body textarea,
.modal-pro textarea {
  min-height: 70px;
  padding: 8px 11px;
  font-size: 14px;
  line-height: 1.4;
}

/* Mobile: bump pra touch-friendly + font 16px previne zoom iOS */
@media (max-width: 600px) {
  .modal-bg-padrao input[type="text"],
  .modal-bg-padrao input[type="email"],
  .modal-bg-padrao input[type="tel"],
  .modal-bg-padrao input[type="number"],
  .modal-bg-padrao input[type="password"],
  .modal-bg-padrao input[type="date"],
  .modal-bg-padrao input[type="time"],
  .modal-bg-padrao input[type="search"],
  .modal-bg-padrao input[type="url"],
  .modal-bg-padrao select,
  .cpg-modal-box .cpg-input,
  .ui-modal-body input,
  .ui-modal-body select,
  .modal-pro input,
  .modal-pro select {
    min-height: 42px;
    height: 42px;
    font-size: 16px;
  }
  .modal-bg-padrao textarea,
  .cpg-modal-box textarea.cpg-input,
  .ui-modal-body textarea,
  .modal-pro textarea {
    font-size: 16px;
  }
}

/* Reduz espaçamento entre grupos de campos em modais */
.modal-bg-padrao .modal-body > div > div,
.modal-bg-padrao [style*="grid"] {
  /* mantém grid existente, só garante gap consistente */
}
.modal-bg-padrao label[style*="font-size:11px"] {
  margin-bottom: 3px !important;
}

/* Override do uiPadrao inline padding:9px 11px → 7px 11px */
.modal-bg-padrao input[style*="min-height:44px"],
.modal-bg-padrao input[style*="min-height:36px"],
.modal-bg-padrao textarea[style*="min-height:80px"],
.modal-bg-padrao textarea[style*="min-height:70px"] {
  padding: 7px 11px !important;
}

/* ════════════════════════════════════════════════════════════
   FIX-FORMS — Padronização profissional forms admin Appetity
   Inspirado: Anota AI / iFood Gestor / Saipos / TecFood.
   Densidade alta, hierarquia visual, mobile-first responsivo.
   ════════════════════════════════════════════════════════════ */

/* ---------- Form section (agrupa campos relacionados) ---------- */
.dsv-form-section {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.dsv-form-section:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
.dsv-form-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #0f172a);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dsv-form-section-subtitle {
  font-size: 11px;
  color: var(--text-secondary, #64748b);
  font-weight: 400;
  margin-left: 4px;
}
/* Versão colapsável */
.dsv-form-section.dsv-form-collapse,
details.dsv-form-section {
  padding-bottom: 12px;
}
details.dsv-form-section > summary.dsv-form-section-title {
  cursor: pointer;
  user-select: none;
  margin-bottom: 0;
  padding: 4px 0;
  list-style: none;
}
details.dsv-form-section > summary.dsv-form-section-title::-webkit-details-marker { display: none; }
details.dsv-form-section > summary.dsv-form-section-title::after {
  content: '▾';
  margin-left: auto;
  font-size: 10px;
  color: var(--text-secondary, #64748b);
  transition: transform 150ms;
}
details.dsv-form-section[open] > summary.dsv-form-section-title::after { transform: rotate(180deg); }
details.dsv-form-section[open] > summary.dsv-form-section-title { margin-bottom: 12px; }

/* ---------- Form group (label + input) ---------- */
.dsv-form-group {
  margin-bottom: 12px;
  min-width: 0; /* importante pra grid não overflow */
}
.dsv-form-group:last-child { margin-bottom: 0; }
.dsv-form-group > label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary, #1e293b);
  margin-bottom: 4px;
  text-transform: none;
}
.dsv-required {
  color: var(--danger, #dc2626);
  margin-left: 2px;
  font-weight: 600;
}
.dsv-optional {
  color: var(--text-tertiary, #94a3b8);
  font-weight: 400;
  margin-left: 4px;
  font-size: 11px;
}
.dsv-form-help {
  font-size: 11px;
  color: var(--text-tertiary, #94a3b8);
  margin-top: 3px;
  display: block;
}
.dsv-form-error {
  font-size: 12px;
  color: var(--danger, #dc2626);
  margin-top: 4px;
}

/* ---------- Inputs com padding/altura profissional ---------- */
.dsv-form-group input[type="text"],
.dsv-form-group input[type="email"],
.dsv-form-group input[type="tel"],
.dsv-form-group input[type="number"],
.dsv-form-group input[type="password"],
.dsv-form-group input[type="date"],
.dsv-form-group input[type="time"],
.dsv-form-group input[type="datetime-local"],
.dsv-form-group input[type="search"],
.dsv-form-group input[type="url"],
.dsv-form-group select,
.dsv-form-group textarea {
  width: 100%;
  height: 38px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-primary, #0f172a);
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #cbd5e1);
  border-radius: 6px;
  transition: border-color 150ms, box-shadow 150ms;
  box-sizing: border-box;
  font-family: inherit;
}
.dsv-form-group textarea {
  height: auto;
  min-height: 72px;
  padding: 8px 12px;
  resize: vertical;
  line-height: 1.5;
}
.dsv-form-group select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748b'%3e%3cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  padding-right: 36px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.dsv-form-group input:focus,
.dsv-form-group select:focus,
.dsv-form-group textarea:focus {
  outline: none;
  border-color: var(--brand-primary, #7c3aed);
  box-shadow: 0 0 0 3px rgba(124, 58, 237,0.14);
}
.dsv-form-group input:disabled,
.dsv-form-group select:disabled,
.dsv-form-group textarea:disabled {
  background: var(--surface-disabled, #f1f5f9);
  color: var(--text-disabled, #94a3b8);
  cursor: not-allowed;
}
.dsv-form-group input::placeholder,
.dsv-form-group textarea::placeholder {
  color: var(--text-tertiary, #94a3b8);
  font-weight: 400;
}
.dsv-form-group.has-error input,
.dsv-form-group.has-error select,
.dsv-form-group.has-error textarea {
  border-color: var(--danger, #dc2626);
}

/* ---------- Grids responsivos ---------- */
.dsv-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.dsv-form-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.dsv-form-row-endereco {
  display: grid;
  grid-template-columns: 1fr 110px;
  gap: 12px;
  margin-bottom: 12px;
}
.dsv-form-row-cidade {
  display: grid;
  grid-template-columns: 1fr 1fr 70px;
  gap: 12px;
  margin-bottom: 12px;
}
.dsv-form-row-cep {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

/* Garante que .dsv-form-group dentro de grid não duplique margin-bottom */
.dsv-form-row > .dsv-form-group,
.dsv-form-row-3 > .dsv-form-group,
.dsv-form-row-endereco > .dsv-form-group,
.dsv-form-row-cidade > .dsv-form-group,
.dsv-form-row-cep > .dsv-form-group { margin-bottom: 0; }

/* ---------- Width inteligente ---------- */
.dsv-input-small  { max-width: 100px; }
.dsv-input-medium { max-width: 200px; }
.dsv-input-uf     { max-width: 70px; text-transform: uppercase; }
.dsv-input-cep    { max-width: 130px; }
.dsv-input-numero { max-width: 100px; }
.dsv-input-cnpj   { max-width: 190px; }
.dsv-input-cpf    { max-width: 160px; }
.dsv-input-fone   { max-width: 170px; }

/* ---------- Modal body padding consistente ---------- */
.dsv-modal-body {
  padding: 20px;
  max-height: calc(90vh - 130px);
  overflow-y: auto;
}
.dsv-modal-subtitle {
  font-size: 12px;
  color: var(--text-secondary, #64748b);
  margin: 4px 0 0;
}

/* ---------- Responsivo mobile ---------- */
@media (max-width: 600px) {
  .dsv-form-row,
  .dsv-form-row-3,
  .dsv-form-row-endereco,
  .dsv-form-row-cidade,
  .dsv-form-row-cep {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .dsv-form-row > .dsv-form-group,
  .dsv-form-row-3 > .dsv-form-group,
  .dsv-form-row-endereco > .dsv-form-group,
  .dsv-form-row-cidade > .dsv-form-group,
  .dsv-form-row-cep > .dsv-form-group { margin-bottom: 12px; }

  .dsv-form-group input[type="text"],
  .dsv-form-group input[type="email"],
  .dsv-form-group input[type="tel"],
  .dsv-form-group input[type="number"],
  .dsv-form-group input[type="password"],
  .dsv-form-group input[type="date"],
  .dsv-form-group input[type="time"],
  .dsv-form-group input[type="datetime-local"],
  .dsv-form-group select {
    height: 42px;
    font-size: 16px;
  }
  .dsv-form-group textarea { font-size: 16px; }

  .dsv-input-small,
  .dsv-input-medium,
  .dsv-input-uf,
  .dsv-input-cep,
  .dsv-input-numero,
  .dsv-input-cnpj,
  .dsv-input-cpf,
  .dsv-input-fone { max-width: 100%; }

  .dsv-modal-body { padding: 16px; max-height: calc(100vh - 110px); }
}

/* ════════════════════════════════════════════════════════════
   LEGACY OVERRIDE — força altura 38px em modais antigos
   .modal / .modal-pro / .ui-modal
   ════════════════════════════════════════════════════════════ */
.modal input[type="text"],
.modal input[type="email"],
.modal input[type="tel"],
.modal input[type="number"],
.modal input[type="password"],
.modal input[type="date"],
.modal input[type="time"],
.modal input[type="search"],
.modal select,
.modal-pro input,
.modal-pro select,
.ui-modal input,
.ui-modal select {
  height: 38px;
  padding: 8px 12px;
  font-size: 14px;
}
.modal textarea,
.modal-pro textarea,
.ui-modal textarea {
  min-height: 72px;
  padding: 8px 12px;
  font-size: 14px;
}
@media (max-width: 600px) {
  .modal input[type="text"],
  .modal input[type="email"],
  .modal input[type="tel"],
  .modal input[type="number"],
  .modal input[type="password"],
  .modal input[type="date"],
  .modal select,
  .modal-pro input,
  .modal-pro select,
  .ui-modal input,
  .ui-modal select {
    height: 42px;
    font-size: 16px;
  }
  .modal textarea,
  .modal-pro textarea,
  .ui-modal textarea { font-size: 16px; }
}

/* ════════════════════════════════════════════════════════════
   FIX-VISUAL — Form Sections estilo Linear/Vercel/Notion
   .dsv-fs: cada seção tem header com ícone+título+subtítulo
   .dsv-modal-body-grouped: background sutil contrasta seções brancas
   Substitui .dsv-form-section quando quer agrupamento mais forte.
   ════════════════════════════════════════════════════════════ */

.dsv-modal-body-grouped {
  background: var(--bg, #f8fafc);
  padding: 0 !important;
  /* uiPadrao.abrirModal wrapper tem padding:24px inline — esticar lateral + bottom */
  margin: 0 -24px -24px;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  overflow: hidden;
}
@media (max-width: 600px) {
  .dsv-modal-body-grouped { margin: 0 -18px -18px; }
}

/* GOLD STANDARD: quando .modal-content tem header gold, o padding já é 0
   (ver fix de scroll). Margem negativa do body-grouped puxava conteúdo
   pra fora → clipping lateral esquerda. Zerar margem nesse caso. */
body > .modal > .modal-content:has(> .dsv-modal-header) > .dsv-modal-body-grouped,
body > .modal > .modal-content:has(> .dsv-modal-header) form.dsv-modal-body-grouped,
#app > .modal > .modal-content:has(> .dsv-modal-header) > .dsv-modal-body-grouped,
#app > .modal > .modal-content:has(> .dsv-modal-header) form.dsv-modal-body-grouped,
.admin-main > .modal > .modal-content:has(> .dsv-modal-header) > .dsv-modal-body-grouped,
.admin-main > .modal > .modal-content:has(> .dsv-modal-header) form.dsv-modal-body-grouped {
  margin: 0;
  border-radius: 0;
}

.dsv-fs {
  background: var(--surface, #ffffff);
  padding: 20px 24px;
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.dsv-fs:first-child { border-top: 0; }
.dsv-fs:last-child { border-bottom: 0; }

.dsv-fs-header {
  margin-bottom: 14px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.dsv-fs-icon {
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}
.dsv-fs-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #0f172a);
  margin: 0;
  letter-spacing: -0.01em;
}
.dsv-fs-subtitle {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-tertiary, #94a3b8);
  margin: 0;
}

/* Espaçamento interno entre form-groups da MESMA seção */
.dsv-fs > .dsv-form-group + .dsv-form-group,
.dsv-fs > .dsv-form-row + .dsv-form-group,
.dsv-fs > .dsv-form-group + .dsv-form-row,
.dsv-fs > .dsv-form-row + .dsv-form-row,
.dsv-fs > .dsv-form-row-cep + .dsv-form-row-endereco,
.dsv-fs > .dsv-form-row-endereco + .dsv-form-row-cidade {
  margin-top: 12px;
}

/* Footer do modal grouped sticky */
.dsv-modal-footer-grouped {
  position: sticky;
  bottom: 0;
  background: var(--surface, #ffffff);
  border-top: 1px solid var(--border, #e2e8f0);
  padding: 14px 24px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  z-index: 5;
}

/* Mobile */
@media (max-width: 600px) {
  .dsv-fs { padding: 16px; }
  .dsv-fs-header { margin-bottom: 12px; }
  .dsv-modal-footer-grouped { padding: 12px 16px; }
}

/* ════════════════════════════════════════════════════════════
   FIX-PADRAO — Grid 2 colunas desktop / 1 mobile
   Responsivo sério: iPhone SE 375 / Android 360 / Tablet 768 / Desktop 1024+
   .dsv-form-grid > .dsv-form-group (sem wrapper extra)
   ════════════════════════════════════════════════════════════ */

.dsv-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}
.dsv-form-grid > .dsv-form-group {
  margin-bottom: 0;  /* gap do grid já espaça */
}
.dsv-form-grid > .dsv-full {
  grid-column: 1 / -1;
}

/* Mobile: 1 coluna */
@media (max-width: 767px) {
  .dsv-form-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* Bottom sheet em mobile (uiPadrao wrapper) */
@media (max-width: 767px) {
  /* uiPadrao.abrirModal usa inline style padding:16px overflow-y:auto na overlay */
  /* Força bottom-sheet alignment */
  .modal-bg-padrao {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .modal-bg-padrao > div {
    border-radius: 16px 16px 0 0 !important;
    max-height: 95vh !important;
    margin-bottom: env(safe-area-inset-bottom, 0px);
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Handle visual top */
  .modal-bg-padrao > div::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: #cbd5e1;
    border-radius: 2px;
    margin: 6px auto 8px;
    flex-shrink: 0;
  }
  /* Footer (botões Cancelar + Cadastrar) stack 100% width mobile */
  .modal-bg-padrao > div > div:last-child[style*="border-top"] {
    flex-direction: column-reverse !important;
    gap: 8px !important;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    margin: 0 -18px -18px !important;
    background: #fff !important;
  }
  .modal-bg-padrao > div > div:last-child[style*="border-top"] > button {
    width: 100%;
    min-height: 44px;
    font-size: 15px;
  }
  /* Inputs touch + anti-zoom iOS */
  .modal-bg-padrao .dsv-form-group input[type="text"],
  .modal-bg-padrao .dsv-form-group input[type="email"],
  .modal-bg-padrao .dsv-form-group input[type="tel"],
  .modal-bg-padrao .dsv-form-group input[type="number"],
  .modal-bg-padrao .dsv-form-group input[type="password"],
  .modal-bg-padrao .dsv-form-group input[type="date"],
  .modal-bg-padrao .dsv-form-group input[type="time"],
  .modal-bg-padrao .dsv-form-group select {
    height: 44px;
    font-size: 16px;
  }
  .modal-bg-padrao .dsv-form-group textarea {
    font-size: 16px;
    min-height: 88px;
  }
}

/* Tablet (768-1023): 2 col com mais respiro */
@media (min-width: 768px) and (max-width: 1023px) {
  .dsv-form-grid { gap: 16px 20px; }
}

/* ════════════════════════════════════════════════════════════
   COMPACT-FORN — .dsv-fs colapsável (details/summary)
   Permite seção .dsv-fs virar <details> com chevron animado.
   ════════════════════════════════════════════════════════════ */

details.dsv-fs {
  padding: 14px 24px;
}

details.dsv-fs > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  /* Garante mesmo visual do .dsv-fs-header normal */
}
details.dsv-fs > summary::-webkit-details-marker { display: none; }
details.dsv-fs > summary::before {
  content: '▶';
  font-size: 10px;
  color: #94a3b8;
  transition: transform 200ms ease;
  flex-shrink: 0;
}
details.dsv-fs[open] > summary::before { transform: rotate(90deg); }
details.dsv-fs[open] > summary { margin-bottom: 12px; }

details.dsv-fs > summary .dsv-fs-icon { font-size: 18px; line-height: 1; }
details.dsv-fs > summary .dsv-fs-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
  margin: 0;
  letter-spacing: -0.01em;
}
.dsv-fs-subtitle-inline {
  font-size: 12px;
  color: var(--text-tertiary, #94a3b8);
  font-weight: 400;
  margin-left: auto;
}

/* COMPACT-FORN — Compactar padding pra eliminar scroll desnecessário */
.dsv-fs { padding: 14px 24px; }
.dsv-fs-subtitle { margin: 0 0 10px; }
.dsv-form-grid { gap: 10px 14px; }

@media (max-width: 600px) {
  .dsv-fs { padding: 12px 16px; }
  details.dsv-fs { padding: 12px 16px; }
}

/* ════════════════════════════════════════════════════════════
   PADRAO-TOTAL — Fix modais órfãos (sem overlay parent)
   Bug Marcos: Combo/Promoção abrem no canto esquerdo top.
   Root cause: <div class="modal" id="modal-X"> direct child do body
   sem wrapper .modal-overlay. .modal era só conteúdo branco no flow.
   ════════════════════════════════════════════════════════════ */

/* Força .modal direct child do body virar overlay full-screen centralizado */
body > .modal,
#app > .modal,
.admin-main > .modal {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  max-width: none !important;
  max-height: none !important;
  height: 100vh !important;
  background: rgba(15, 23, 42, 0.55) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10000;
  padding: 20px;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  animation: none !important;
  overflow: hidden auto;
  flex-direction: row !important;
}

/* O conteúdo branco vira o card centralizado */
body > .modal > .modal-content,
#app > .modal > .modal-content,
.admin-main > .modal > .modal-content {
  background: #ffffff !important;
  border-radius: 12px !important;
  max-width: 720px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ════════════════════════════════════════════════════════════
   GOLD STANDARD scroll fix — Modais com .dsv-modal-header + footer:
   - .modal-content vira flex column SEM padding/scroll próprio
   - Header e footer flex-shrink:0 (não scrollam)
   - Body interno (.dsv-modal-body-grouped) tem scroll único e suave
   Elimina o scroll duplo que causava "barra sem precisão" no Combo
   ════════════════════════════════════════════════════════════ */
body > .modal > .modal-content:has(> .dsv-modal-header),
#app > .modal > .modal-content:has(> .dsv-modal-header),
.admin-main > .modal > .modal-content:has(> .dsv-modal-header) {
  padding: 0 !important;
  overflow: hidden !important;
}
body > .modal > .modal-content > .dsv-modal-header,
#app > .modal > .modal-content > .dsv-modal-header,
.admin-main > .modal > .modal-content > .dsv-modal-header {
  flex-shrink: 0;
}
body > .modal > .modal-content > .dsv-modal-body,
body > .modal > .modal-content > form.dsv-modal-body,
body > .modal > .modal-content > form.dsv-modal-body-grouped,
#app > .modal > .modal-content > .dsv-modal-body,
#app > .modal > .modal-content > form.dsv-modal-body,
#app > .modal > .modal-content > form.dsv-modal-body-grouped,
.admin-main > .modal > .modal-content > .dsv-modal-body,
.admin-main > .modal > .modal-content > form.dsv-modal-body,
.admin-main > .modal > .modal-content > form.dsv-modal-body-grouped {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: none !important;
  /* Scrollbar customizada — menos visual ruído */
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
/* Webkit scrollbar */
.modal-content > .dsv-modal-body-grouped::-webkit-scrollbar,
.modal-content > form.dsv-modal-body-grouped::-webkit-scrollbar,
.modal-content > .dsv-modal-body::-webkit-scrollbar { width: 8px; }
.modal-content > .dsv-modal-body-grouped::-webkit-scrollbar-track,
.modal-content > form.dsv-modal-body-grouped::-webkit-scrollbar-track,
.modal-content > .dsv-modal-body::-webkit-scrollbar-track { background: transparent; }
.modal-content > .dsv-modal-body-grouped::-webkit-scrollbar-thumb,
.modal-content > form.dsv-modal-body-grouped::-webkit-scrollbar-thumb,
.modal-content > .dsv-modal-body::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
.modal-content > .dsv-modal-body-grouped::-webkit-scrollbar-thumb:hover,
.modal-content > form.dsv-modal-body-grouped::-webkit-scrollbar-thumb:hover,
.modal-content > .dsv-modal-body::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Footer fora do scroll: fica sticky no fim do form (body) */
body > .modal > .modal-content > .dsv-modal-footer,
body > .modal > .modal-content > form > .dsv-modal-footer,
#app > .modal > .modal-content > .dsv-modal-footer,
#app > .modal > .modal-content > form > .dsv-modal-footer,
.admin-main > .modal > .modal-content > .dsv-modal-footer,
.admin-main > .modal > .modal-content > form > .dsv-modal-footer {
  flex-shrink: 0;
}

/* Botão close .btn-close-modal-ds dentro do .modal órfão posicionado top-right */
body > .modal > .modal-content > .modal-close.btn-close-modal-ds,
.admin-main > .modal > .modal-content > .modal-close.btn-close-modal-ds {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
}

/* Mobile: bottom sheet */
@media (max-width: 767px) {
  body > .modal,
  #app > .modal,
  .admin-main > .modal {
    padding: 0;
    align-items: flex-end !important;
  }
  body > .modal > .modal-content,
  #app > .modal > .modal-content,
  .admin-main > .modal > .modal-content {
    max-width: 100%;
    width: 100%;
    max-height: 95vh;
    border-radius: 16px 16px 0 0 !important;
    padding: 18px;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }
}

/* ════════════════════════════════════════════════════════════
   PADRAO-TOTAL — Botões fininhos no Modal Equipe (vqenAbrirModalSimples)
   .btn-primary / .btn-secondary dentro de modais usam altura padrão.
   ════════════════════════════════════════════════════════════ */

.modal .btn-primary,
.modal .btn-secondary,
body > .modal .btn-primary,
body > .modal .btn-secondary,
.modal-bg-padrao .btn-primary,
.modal-bg-padrao .btn-secondary {
  min-height: 40px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
}

@media (max-width: 767px) {
  .modal .btn-primary,
  .modal .btn-secondary,
  body > .modal .btn-primary,
  body > .modal .btn-secondary {
    min-height: 44px;
    font-size: 15px;
  }
}

/* ════════════════════════════════════════════════════════════
   FIX-FECHAR — Botão "Fechar" padronizado em modais legacy
   Root cause: modal-pro.css:53-78 forçava .modal-close 40x40px
   border-radius 50% (pill circular). Sobrescreve com specificity
   maior + !important pra unificar todos modais com mesmo visual
   retangular do Fornecedor.
   ════════════════════════════════════════════════════════════ */

.modal[id^="modal-"] .modal-close.btn-close-modal-ds,
.modal[id^="modal-"] .modal-close,
body > .modal .modal-close {
  /* Reset do pill circular legacy */
  width: auto !important;
  height: auto !important;
  border-radius: 6px !important;
  background: transparent !important;
  border: 1px solid var(--border, #d1d5db) !important;
  padding: 6px 14px !important;
  min-width: auto !important;
  min-height: 32px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-primary, #1e293b) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  box-shadow: none !important;
  line-height: 1.2 !important;
  font-family: inherit !important;
  /* Position top-right dentro do .modal-content (já tinha em PADRAO-TOTAL-CSS) */
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 5 !important;
}

.modal[id^="modal-"] .modal-close.btn-close-modal-ds:hover,
.modal[id^="modal-"] .modal-close:hover,
body > .modal .modal-close:hover {
  background: var(--surface-subtle, #f1f5f9) !important;
  border-color: var(--text-secondary, #475569) !important;
  transform: none !important;
}

/* Active state (substitui scale(0.95) legacy) */
.modal[id^="modal-"] .modal-close.btn-close-modal-ds:active,
.modal[id^="modal-"] .modal-close:active {
  background: var(--surface-subtle, #f1f5f9) !important;
  transform: none !important;
}

/* Garante padding-top no modal-content pra não sobrepor o close button */
body > .modal > .modal-content {
  padding-top: 56px !important;
}

@media (max-width: 767px) {
  .modal[id^="modal-"] .modal-close.btn-close-modal-ds,
  .modal[id^="modal-"] .modal-close,
  body > .modal .modal-close {
    min-height: 36px !important;
    top: 12px !important;
    right: 12px !important;
  }
}

/* ════════════════════════════════════════════════════════════
   VIEWS-LISTAGEM — Padrão SaaS profissional pra views de lista
   Inspirado: Anota AI / iFood Gestor / Goomer admin.
   Componentes: header + toolbar busca/filtro + chips + grid cards
   ════════════════════════════════════════════════════════════ */

/* Header da view */
.dsv-list-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px 24px 12px;
  gap: 16px;
  flex-wrap: wrap;
}
.dsv-list-header h1,
.dsv-list-header h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.02em;
}
.dsv-list-stats {
  font-size: 13px;
  color: var(--text-secondary, #64748b);
  margin: 4px 0 0;
  line-height: 1.4;
}
.dsv-list-stats strong {
  color: var(--text-primary, #0f172a);
  font-weight: 600;
}

/* Toolbar busca + filtros */
.dsv-list-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 0 24px 12px;
}

.dsv-search-input {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #d1d5db);
  border-radius: 8px;
  padding: 8px 12px;
  flex: 1;
  min-width: 200px;
  max-width: 360px;
  height: 38px;
  box-sizing: border-box;
}
.dsv-search-input input {
  border: none;
  background: transparent;
  flex: 1;
  outline: none;
  font-size: 14px;
  min-width: 0;
}
.dsv-search-input svg {
  width: 16px;
  height: 16px;
  color: var(--text-tertiary, #94a3b8);
  flex-shrink: 0;
}

.dsv-list-select {
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #d1d5db);
  border-radius: 8px;
  padding: 0 32px 0 12px;
  font-size: 13px;
  cursor: pointer;
  height: 38px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748b'%3e%3cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  appearance: none;
  -webkit-appearance: none;
  color: var(--text-primary, #0f172a);
  font-family: inherit;
  min-width: 140px;
}

/* Chips filtro */
.dsv-list-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 24px 16px;
  scrollbar-width: thin;
}
.dsv-list-chips::-webkit-scrollbar { height: 4px; }
.dsv-list-chips::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }

.dsv-chip {
  padding: 6px 12px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 999px;
  background: var(--surface, #ffffff);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 150ms;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-secondary, #475569);
  font-family: inherit;
  flex-shrink: 0;
}
.dsv-chip:hover:not(.ativo) {
  border-color: var(--brand-primary, #7c3aed);
  color: var(--brand-primary, #7c3aed);
}
.dsv-chip.ativo {
  background: var(--brand-primary, #7c3aed);
  color: white;
  border-color: var(--brand-primary, #7c3aed);
}
.dsv-chip-count {
  font-size: 11px;
  opacity: 0.7;
  margin-left: 2px;
}

/* Grid de cards — A.6: spec Sprint Combo (2/3/4 colunas iFood-pattern)
   Default = auto-fill mais denso. Breakpoints específicos abaixo. */
.dsv-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  padding: 8px 24px 24px;
}

/* Card */
.dsv-card {
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: all 150ms;
  position: relative;
  display: flex;
  flex-direction: column;
}
.dsv-card:hover {
  border-color: var(--brand-primary, #7c3aed);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  transform: translateY(-1px);
}
.dsv-card.inativo { opacity: 0.6; }

.dsv-card-img {
  /* FIX 4.C: aspect 16/10 muito wide cortava lateral (zoom feio). 4/3 = padrão
     fotografia produto, mantém ratio do original sem cortar pesado. */
  aspect-ratio: 4/3;
  background: var(--surface-subtle, #f8fafc);
  background-size: cover;
  background-position: center;
  width: 100%;
  position: relative;
}
.dsv-card-img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: var(--text-tertiary, #94a3b8);
  height: 100%;
}
.dsv-card-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 8px;
  background: rgba(15,23,42,0.7);
  color: white;
  font-size: 10px;
  font-weight: 600;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dsv-card-badge.inativo { background: var(--danger, #dc2626); }
.dsv-card-badge.promo   { background: var(--brand-primary, #7c3aed); }

.dsv-card-body {
  padding: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dsv-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #0f172a);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
}
.dsv-card-subtitle {
  font-size: 12px;
  color: var(--text-secondary, #64748b);
  margin: 0;
}
.dsv-card-preco {
  font-size: 16px;
  font-weight: 700;
  color: var(--brand-primary, #7c3aed);
  margin-top: 4px;
}
.dsv-card-actions {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  border-top: 1px solid var(--border-subtle, #f1f5f9);
  background: var(--surface-subtle, #f8fafc);
}
.dsv-card-actions button {
  flex: 1;
  padding: 6px 8px;
  font-size: 12px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  border-radius: 4px;
  color: var(--text-secondary, #475569);
  transition: all 150ms;
  font-weight: 500;
  font-family: inherit;
  min-height: 30px;
}
.dsv-card-actions button:hover {
  background: var(--surface, #fff);
  color: var(--text-primary, #0f172a);
  border-color: var(--border, #e2e8f0);
}
.dsv-card-actions button.danger:hover {
  background: var(--danger, #dc2626);
  color: white;
  border-color: var(--danger, #dc2626);
}

/* Empty state */
.dsv-empty-state {
  text-align: center;
  padding: 60px 24px;
  color: var(--text-secondary, #64748b);
}
.dsv-empty-state-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.6;
}
.dsv-empty-state h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #0f172a);
  margin: 0 0 8px;
}
.dsv-empty-state p {
  font-size: 14px;
  margin: 0 0 16px;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}

/* Badge genérico (combos / cupons / status) */
.dsv-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* Mobile — A.6 expandido pra 767px (cobre 360/375/414) */
@media (max-width: 767px) {
  .dsv-list-header {
    padding: 14px 12px 8px;
    flex-direction: column;
    align-items: stretch;
  }
  .dsv-list-header > div:first-child { width: 100%; }
  .dsv-list-toolbar {
    padding: 0 12px 10px;
  }
  .dsv-search-input { max-width: 100%; }
  .dsv-list-select { flex: 1; min-width: 0; }
  .dsv-list-chips { padding: 4px 12px 12px; }
  .dsv-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 8px 12px 16px;
  }
  /* A.6: foto card mais quadrada em mobile pra cards menos altos */
  .dsv-card-img { aspect-ratio: 4/3; }
  .dsv-card-body { padding: 10px; }
  .dsv-card-title { font-size: 13px; }
  .dsv-card-preco { font-size: 14px; }
}

/* Tablet 768-1023: 3 colunas */
@media (min-width: 768px) and (max-width: 1023px) {
  .dsv-cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Desktop pequeno 1024-1279: 4 colunas */
@media (min-width: 1024px) and (max-width: 1279px) {
  .dsv-cards-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Desktop médio 1280-1599: 5 colunas (FIX 4.C: density up — antes 4 ficavam grandes) */
@media (min-width: 1280px) and (max-width: 1599px) {
  .dsv-cards-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
  }
}

/* Desktop largo ≥1600: 6 colunas */
@media (min-width: 1600px) {
  .dsv-cards-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
  }
}

/* ════════════════════════════════════════════════════════════
   PADRONIZAR-MODAIS — auxiliares pra cadastro
   .dsv-radio-cards: tipo combo Fixo/Montável
   .dsv-upload-area: foto produto
   .dsv-combo-item: linha produto+qtd+delete em combo
   ════════════════════════════════════════════════════════════ */

.dsv-radio-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.dsv-radio-card {
  border: 2px solid var(--border, #e2e8f0);
  border-radius: 10px;
  padding: 14px;
  cursor: pointer;
  transition: all 150ms;
  display: block;
  background: var(--surface, #ffffff);
}
.dsv-radio-card:hover { border-color: var(--brand-primary, #7c3aed); }
.dsv-radio-card:has(input:checked) {
  border-color: var(--brand-primary, #7c3aed);
  background: rgba(124, 58, 237, 0.05);
}
.dsv-radio-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.dsv-radio-card-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dsv-radio-card-icon {
  font-size: 22px;
  line-height: 1;
}
.dsv-radio-card strong {
  font-size: 14px;
  color: var(--text-primary, #0f172a);
  font-weight: 600;
}
.dsv-radio-card small {
  font-size: 12px;
  color: var(--text-secondary, #64748b);
  line-height: 1.4;
}
@media (max-width: 600px) {
  .dsv-radio-cards { grid-template-columns: 1fr; }
}

.dsv-upload-area {
  border: 2px dashed var(--border, #cbd5e1);
  border-radius: 10px;
  padding: 24px 16px;
  text-align: center;
  cursor: pointer;
  transition: all 150ms;
  background: var(--surface-subtle, #f8fafc);
}
.dsv-upload-area:hover {
  border-color: var(--brand-primary, #7c3aed);
  background: rgba(124, 58, 237, 0.04);
}
.dsv-upload-placeholder {
  font-size: 32px;
  line-height: 1;
}
.dsv-upload-placeholder + p {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--text-secondary, #64748b);
}
.dsv-upload-preview {
  max-width: 200px;
  max-height: 200px;
  border-radius: 8px;
  margin: 0 auto;
  display: block;
  object-fit: cover;
}

.dsv-combo-item {
  display: grid;
  grid-template-columns: 1fr 90px 40px;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.dsv-combo-item select,
.dsv-combo-item input {
  height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  background: var(--surface, #ffffff);
  color: var(--text-primary, #0f172a);
  box-sizing: border-box;
}
.dsv-combo-item select:focus,
.dsv-combo-item input:focus {
  outline: none;
  border-color: var(--brand-primary, #7c3aed);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}

/* Checkbox label inline em form-group */
.dsv-form-group label.dsv-check-row {
  display: flex !important;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  margin-bottom: 0;
  font-weight: 500;
}
.dsv-form-group label.dsv-check-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--brand-primary, #7c3aed);
}

/* ════════════════════════════════════════════════════════════
   FIX-CHK — Checkbox padronizado em card inline
   Resolve "checkbox solta no centro + label solta na esquerda"
   ════════════════════════════════════════════════════════════ */

.dsv-checkbox-field {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  background: var(--surface-subtle, #f8fafc) !important;
  border: 1px solid var(--border, #e2e8f0) !important;
  border-radius: 8px !important;
  cursor: pointer;
  transition: all 150ms;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  flex-direction: row !important;
  writing-mode: horizontal-tb !important;
}
.dsv-checkbox-field:hover {
  border-color: var(--brand-primary, #7c3aed) !important;
  background: rgba(124, 58, 237, 0.04) !important;
}
.dsv-checkbox-field:has(input:checked) {
  border-color: var(--brand-primary, #7c3aed) !important;
  background: rgba(124, 58, 237, 0.06) !important;
}
.dsv-checkbox-field input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  cursor: pointer;
  margin: 1px 0 0 0 !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  accent-color: var(--brand-primary, #7c3aed);
  appearance: auto;
  -webkit-appearance: checkbox;
}
.dsv-checkbox-field-content {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.dsv-checkbox-field-label {
  display: block !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text-primary, #0f172a) !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  writing-mode: horizontal-tb !important;
  width: auto !important;
}
.dsv-checkbox-field-help {
  display: block !important;
  font-size: 12px !important;
  color: var(--text-secondary, #64748b) !important;
  margin-top: 2px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  writing-mode: horizontal-tb !important;
  width: auto !important;
}

/* Variante compacta: pra grids densos (ex: dias semana, lista opções).
   Sem padding generoso, sem background — só inline checkbox + texto. */
.dsv-checkbox-field--compact {
  padding: 6px 8px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  gap: 8px !important;
}
.dsv-checkbox-field--compact:hover {
  background: var(--surface-subtle, #f8fafc) !important;
  border-color: var(--border, #e2e8f0) !important;
}
.dsv-checkbox-field--compact:has(input:checked) {
  background: rgba(124, 58, 237, 0.06) !important;
  border-color: var(--brand-primary, #7c3aed) !important;
}
.dsv-checkbox-field--compact .dsv-checkbox-field-label {
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* Variante simples: 1 linha só, sem card/background — pra usos inline
   genéricos (ex: "Lembrar de mim", "Aceito termos"). */
.dsv-checkbox-simple {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  font-size: 13px !important;
  color: var(--text-primary, #0f172a) !important;
  user-select: none;
  line-height: 1.4 !important;
}
.dsv-checkbox-simple input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  accent-color: var(--brand-primary, #7c3aed);
  margin: 0 !important;
}
.dsv-checkbox-simple > span,
.dsv-checkbox-simple > .dsv-checkbox-simple-label {
  flex: 1 1 auto;
  min-width: 0;
}

/* ════════════════════════════════════════════════════════════
   FIX-CHK — Tags coloridas pra status badges em tabelas
   ════════════════════════════════════════════════════════════ */

.dsv-tag-success {
  background: rgba(16, 185, 129, 0.1);
  color: rgb(5, 150, 105);
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  display: inline-block;
}
.dsv-tag-warn {
  background: rgba(245, 158, 11, 0.1);
  color: rgb(180, 83, 9);
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  display: inline-block;
}
.dsv-tag-danger {
  background: rgba(239, 68, 68, 0.1);
  color: rgb(185, 28, 28);
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  display: inline-block;
}
.dsv-tag-neutral {
  background: var(--surface-subtle, #f1f5f9);
  color: var(--text-secondary, #64748b);
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 4px;
  display: inline-block;
}

/* Info banner (header de view de lista — "Arraste pra reordenar" etc) */
.dsv-info-banner {
  background: rgba(124, 58, 237, 0.08);
  border-left: 3px solid var(--brand-primary, #7c3aed);
  padding: 10px 14px;
  margin: 0 24px 12px;
  font-size: 13px;
  color: var(--text-secondary, #475569);
  border-radius: 4px;
}
@media (max-width: 600px) {
  .dsv-info-banner { margin: 0 12px 10px; }
}

/* ════════════════════════════════════════════════════════════
   FIX-PROMO — Botões padrão sistema (.dsv-btn-*) + .dsv-modal-close
   Classes referenciadas em markup mas faltavam definição CSS.
   ════════════════════════════════════════════════════════════ */

.dsv-modal-close {
  background: transparent;
  border: 1px solid var(--border, #d1d5db);
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  color: var(--text-primary, #1e293b);
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 150ms;
  font-family: inherit;
  line-height: 1.2;
}
.dsv-modal-close:hover {
  background: var(--surface-subtle, #f1f5f9);
  border-color: var(--text-secondary, #475569);
}
.dsv-modal-close:focus-visible {
  outline: 2px solid var(--brand-primary, #7c3aed);
  outline-offset: 2px;
}

/* ════════════════════════════════════════════════════════════
   MODAL PATTERN UNIVERSAL — botão ✕ discreto + footer + ESC/backdrop
   Gold standard Combo: header(ícone+título+subtítulo) + body(.dsv-fs) +
   footer(border-top, Cancelar+Primary).
   ════════════════════════════════════════════════════════════ */

.dsv-modal-close-x {
  background: transparent;
  border: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  color: #94a3b8;
  font-size: 22px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: inherit;
  transition: background 150ms, color 150ms;
  flex-shrink: 0;
}
.dsv-modal-close-x:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.dsv-modal-close-x:focus-visible {
  outline: 2px solid var(--brand-primary, #7c3aed);
  outline-offset: 2px;
}

.dsv-modal-footer {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  padding: 14px 20px !important;
  border-top: 1px solid #e2e8f0 !important;
  background: #fff !important;
  position: sticky !important;
  bottom: 0 !important;
  z-index: 2 !important;
}

@media (max-width: 767px) {
  .dsv-modal-footer {
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important;
  }
  .dsv-modal-footer .dsv-btn-secondary,
  .dsv-modal-footer .dsv-btn-primary {
    flex: 1 !important;
    min-height: 44px !important;
  }
}

/* ════════════════════════════════════════════════════════════
   DESIGN SYSTEM BOTÕES (consolidação 2026-05-21 — sub-frente 4.3)
   Padrão Stripe Dashboard / Linear / WCAG 2.5.8.
   Pesquisa: Stripe 2026 (primary 16x24 / secondary 12x20 / focus ring 3px),
            Linear (primary filled / secondary outline / destructive vermelho).
   Backward compat via seletor agrupado — classes locais (cpg-btn-*, crc-btn-*,
   fin-btn-*, .btn.btn-*) herdam estilo do .dsv-btn-* automaticamente.
   ════════════════════════════════════════════════════════════ */

/* PRIMARY — ação principal (CTA, Salvar, Confirmar) */
.dsv-btn-primary,
.cpg-btn-primary,
.crc-btn-primary,
.fin-btn-primary,
.btn.btn-primary {
  background: var(--brand-primary, #7c3aed);
  color: #fff;
  border: 1px solid var(--brand-primary, #7c3aed);
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 150ms;
  font-family: inherit;
  line-height: 1.2;
  box-shadow: 0 1px 2px rgba(124, 58, 237, 0.18);
  text-decoration: none;
}
.dsv-btn-primary:hover,
.cpg-btn-primary:hover,
.crc-btn-primary:hover,
.fin-btn-primary:hover,
.btn.btn-primary:hover {
  background: var(--brand-dark, #6d28d9);
  border-color: var(--brand-dark, #6d28d9);
  color: #fff;
}
.dsv-btn-primary:disabled,
.cpg-btn-primary:disabled,
.crc-btn-primary:disabled,
.fin-btn-primary:disabled,
.btn.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* SECONDARY — ação alternativa (Cancelar, Voltar, Detalhes) */
.dsv-btn-secondary,
.cpg-btn-secondary,
.crc-btn-secondary,
.fin-btn-secondary,
.btn.btn-secondary {
  background: var(--surface, #ffffff);
  color: var(--text-primary, #1e293b);
  border: 1px solid var(--border, #d1d5db);
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 150ms;
  font-family: inherit;
  line-height: 1.2;
  text-decoration: none;
}
.dsv-btn-secondary:hover,
.cpg-btn-secondary:hover,
.crc-btn-secondary:hover,
.fin-btn-secondary:hover,
.btn.btn-secondary:hover {
  background: var(--surface-subtle, #f8fafc);
  border-color: var(--text-secondary, #475569);
}

/* DANGER — ação destrutiva (Excluir, Cancelar comanda) */
.dsv-btn-danger,
.cpg-btn-danger,
.crc-btn-danger,
.fin-btn-danger,
.btn.btn-danger {
  background: #dc2626;
  color: #fff;
  border: 1px solid #dc2626;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 150ms;
  font-family: inherit;
  line-height: 1.2;
  box-shadow: 0 1px 2px rgba(220, 38, 38, 0.18);
  text-decoration: none;
}
.dsv-btn-danger:hover,
.cpg-btn-danger:hover,
.crc-btn-danger:hover,
.fin-btn-danger:hover,
.btn.btn-danger:hover {
  background: #b91c1c;
  border-color: #b91c1c;
  color: #fff;
}

/* SUCCESS — confirmação (Pagar, Finalizar, Receber) */
.dsv-btn-success,
.btn.btn-success {
  background: #10b981;
  color: #fff;
  border: 1px solid #10b981;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 150ms;
  font-family: inherit;
  line-height: 1.2;
  box-shadow: 0 1px 2px rgba(16, 185, 129, 0.18);
  text-decoration: none;
}
.dsv-btn-success:hover,
.btn.btn-success:hover {
  background: #059669;
  border-color: #059669;
  color: #fff;
}

/* Modificador SM — botões compactos em tabelas e ações inline */
.dsv-btn-sm,
.btn.btn-sm {
  padding: 6px 12px !important;
  font-size: 12px !important;
  min-height: 32px !important;
  gap: 4px;
}

/* Modificador LG — botões grandes (CTAs primários) */
.dsv-btn-lg,
.btn.btn-lg {
  padding: 14px 28px !important;
  font-size: 16px !important;
  min-height: 52px !important;
}

/* FOCUS RING — WCAG 2.4.7 + Stripe pattern */
.dsv-btn-primary:focus-visible,
.dsv-btn-secondary:focus-visible,
.dsv-btn-danger:focus-visible,
.dsv-btn-success:focus-visible,
.cpg-btn-primary:focus-visible,
.cpg-btn-secondary:focus-visible,
.cpg-btn-danger:focus-visible,
.crc-btn-primary:focus-visible,
.crc-btn-secondary:focus-visible,
.crc-btn-danger:focus-visible,
.fin-btn-primary:focus-visible,
.fin-btn-secondary:focus-visible,
.btn.btn-primary:focus-visible,
.btn.btn-secondary:focus-visible,
.btn.btn-danger:focus-visible,
.btn.btn-success:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.4);
}

/* MOBILE — tap target 44px WCAG 2.5.8 (Apple/Google) */
@media (max-width: 600px) {
  .dsv-btn-primary,
  .dsv-btn-secondary,
  .dsv-btn-danger,
  .dsv-btn-success,
  .cpg-btn-primary,
  .cpg-btn-secondary,
  .cpg-btn-danger,
  .crc-btn-primary,
  .crc-btn-secondary,
  .crc-btn-danger,
  .fin-btn-primary,
  .fin-btn-secondary,
  .btn.btn-primary,
  .btn.btn-secondary,
  .btn.btn-danger,
  .btn.btn-success {
    min-height: 44px;
    padding: 12px 20px;
    font-size: 15px;
  }
  .dsv-btn-sm,
  .btn.btn-sm {
    min-height: 36px !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
  }
}

/* ════════════════════════════════════════════════════════════
   DASH-FIX — KPI cards padrão (header de view de listagem)
   ════════════════════════════════════════════════════════════ */

.dsv-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 0 24px 16px;
}
@media (max-width: 900px) {
  .dsv-kpi-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .dsv-kpi-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0 12px 12px;
  }
}

.dsv-kpi-card {
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  padding: 14px 16px;
  position: relative;
  transition: all 150ms;
  min-width: 0;
}
.dsv-kpi-card:hover {
  border-color: var(--brand-primary, #7c3aed);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.dsv-kpi-card.success { border-left: 3px solid #10b981; }
.dsv-kpi-card.warn    { border-left: 3px solid #f59e0b; }
.dsv-kpi-card.danger  { border-left: 3px solid #dc2626; }
.dsv-kpi-card.info    { border-left: 3px solid #3b82f6; }

.dsv-kpi-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary, #94a3b8);
  margin-bottom: 4px;
}
.dsv-kpi-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
  line-height: 1.1;
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dsv-kpi-value small {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary, #64748b);
}
.dsv-kpi-icon {
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 20px;
  opacity: 0.4;
}

/* ════════════════════════════════════════════════════════════
   DASH-FIX — Padding modal mais enxuto (header + body fs)
   ════════════════════════════════════════════════════════════ */

.dsv-modal-body .dsv-fs,
.modal-bg-padrao .dsv-fs {
  padding: 14px 20px;
}
.dsv-modal-header {
  padding: 16px 20px 14px;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  background: #fff;
}
.dsv-modal-title {
  font-size: 17px;
  font-weight: 700;
  margin: 0;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dsv-modal-subtitle { margin: 3px 0 0; font-size: 12px; color: #64748b; font-weight: 400; }

/* ════════════════════════════════════════════════════════════
   DASH-FIX — Combo item LIXEIRA INLINE (não embaixo)
   Grid 3 cols: select expand + qtd 80px + lixeira 40px
   ════════════════════════════════════════════════════════════ */

.dsv-combo-item .dsv-btn-delete-inline {
  height: 38px;
  width: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border, #e2e8f0);
  color: var(--danger, #dc2626);
  border-radius: 6px;
  cursor: pointer;
}
.dsv-combo-item .dsv-btn-delete-inline:hover {
  background: var(--danger, #dc2626);
  color: white;
  border-color: var(--danger);
}
.dsv-combo-item .dsv-btn-delete-inline svg {
  width: 16px;
  height: 16px;
}
@media (max-width: 600px) {
  .dsv-combo-item {
    grid-template-columns: 1fr 70px 40px;
    gap: 6px;
  }
}

/* ════════════════════════════════════════════════════════════
   TABLE-PRO — tabela densa profissional (Linear/Stripe/Notion)
   Desktop: linhas 48px sticky header, hover, sort.
   Mobile:  vira "lista linha compacta" 72px (grid 2 linhas).
   ════════════════════════════════════════════════════════════ */

.dsv-table-pro-wrap {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  margin: 0 24px 24px;
  /* 2026-05-21 (v5 fix definitivo): REMOVIDO overflow:hidden + touch-action.
     Causa raiz REAL (Marcos: "grid arrasta sozinho mesmo sem precisar"):
     overflow:hidden + ancestral .admin-main com min-height:100vh fazia o
     browser detectar o wrap como "container scrollable potencial" em mobile,
     mesmo sem overflow real. Resultado: gesto touch capturado dentro do wrap
     em vez de bubble pro body.
     Fix: SEM overflow (deixa fluxo natural). border-radius preservado via
     overflow das CELLs da tabela (que tem padding interno) — visual idêntico.
     Ref: MDN touch-action — touch-action em containers individuais sinaliza
     "eu gerencio o gesto"; melhor aplicar no body inteiro. */
}

.dsv-table-pro {
  width: 100%;
  /* 2026-05-21: border-collapse:collapse + position:sticky no thead th é bug
     conhecido Chromium #702927 (scroll jitter/flicker). Mudou pra separate
     com border-spacing: 0 — visual identico, scroll suave.
     Ref: https://bugs.chromium.org/p/chromium/issues/detail?id=702927 */
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  font-size: 14px;
  /* touch-action: pan-y REMOVIDO (v5) — touch-action no body é melhor (ver
     regra @media abaixo). Aqui em desktop fluxo natural funciona. */
}

.dsv-table-pro thead {
  background: #f8fafc;
}

.dsv-table-pro thead th {
  text-align: left;
  padding: 10px 14px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
  font-weight: 600;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
  user-select: none;
  position: sticky;
  top: 0;
  z-index: 2;
  /* 2026-05-21 (v5): removido will-change + backface-visibility — em mobile
     onde thead é display:none, essas otimizações inúteis criavam stacking
     context fantasma que confundia o browser na detecção do gesto touch.
     Background opaco preservado (necessário pra sticky não ver tbody atrás). */
  background: #f8fafc;
}

.dsv-table-pro thead th.sortable { cursor: pointer; }
.dsv-table-pro thead th.sortable:hover {
  color: #0f172a;
  background: rgba(0,0,0,0.02);
}
.dsv-table-pro thead th.sortable::after {
  content: '↕';
  margin-left: 4px;
  opacity: 0.4;
}
.dsv-table-pro thead th.sort-asc::after  { content: '↑'; opacity: 1; color: var(--brand-primary, #7c3aed); }
.dsv-table-pro thead th.sort-desc::after { content: '↓'; opacity: 1; color: var(--brand-primary, #7c3aed); }

.dsv-table-pro tbody tr {
  border-bottom: 1px solid #f1f5f9;
  /* 2026-05-21: transition movida pro :hover (era no tr base, disparava em
     todos os rows durante scroll rápido = jitter de repaint).
     Ref: https://css-tricks.com/avoid-css-jitter/ */
}
.dsv-table-pro tbody tr.clickable {
  cursor: pointer;
  /* 2026-05-21 (v4 — fix definitivo touch bug Marcos): user-select none + tap-highlight
     transparente. Antes: tocar+arrastar em texto de row disparava text-selection drag
     (sintoma "tenta arrastar so o grid"). Row clicável NÃO precisa permitir seleção
     de texto — interação esperada é click pra abrir detalhe. Scroll passa pro body
     sem competir com gesto de seleção.
     Ref: GSAP forum "Select text on Draggable" — user-select:none resolve. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
.dsv-table-pro tbody tr.clickable:hover {
  background: #f8fafc;
  transition: background 100ms;
}
.dsv-table-pro tbody tr:last-child { border-bottom: 0; }

.dsv-table-pro tbody td {
  padding: 12px 14px;
  vertical-align: middle;
  color: #0f172a;
  font-size: 14px;
}

.dsv-table-pro tbody td.tc-primary {
  font-weight: 600;
}
.dsv-table-pro tbody td.tc-meta {
  color: #64748b;
  font-size: 13px;
}
.dsv-table-pro tbody td.tc-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.dsv-table-pro tbody td.tc-num-inline input[type="number"] {
  width: 80px;
  height: 32px;
  padding: 4px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 14px;
  text-align: right;
  background: #fff;
}
.dsv-table-pro tbody td.tc-num-inline input[type="number"]:focus {
  outline: 0;
  border-color: var(--brand-primary, #7c3aed);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.12);
}
.dsv-table-pro tbody td.tc-actions {
  text-align: right;
  white-space: nowrap;
}
.dsv-table-pro tbody td.tc-actions button {
  background: transparent;
  border: 1px solid transparent;
  padding: 4px 8px;
  cursor: pointer;
  color: #64748b;
  border-radius: 6px;
  font-size: 14px;
  height: 32px;
  min-width: 32px;
  margin-left: 2px;
}
.dsv-table-pro tbody td.tc-actions button:hover {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #e2e8f0;
}
.dsv-table-pro tbody td.tc-actions button.danger:hover {
  background: rgba(220,38,38,0.08);
  color: #dc2626;
  border-color: rgba(220,38,38,0.2);
}

/* Status dot inline */
.dsv-status-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.dsv-status-dot::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dsv-status-dot.ok::before      { background: #10b981; }
.dsv-status-dot.warn::before    { background: #f59e0b; }
.dsv-status-dot.danger::before  { background: #dc2626; }
.dsv-status-dot.neutral::before { background: #94a3b8; }
.dsv-status-dot.ok      { color: #059669; }
.dsv-status-dot.warn    { color: #b45309; }
.dsv-status-dot.danger  { color: #b91c1c; }
.dsv-status-dot.neutral { color: #64748b; }

/* ─── Mobile: tabela vira lista linha compacta 72px ─── */
/* FIX-CSS-CASCADE 2026-05-19: !important defensivo + zera resíduos do
   legacy .admin-main table (border-radius, margin, ::before injetado).
   Mesmo se algum CSS antigo voltar a casar, table-pro vence. */
@media (max-width: 767px) {
  .dsv-table-pro-wrap { margin: 0 12px 16px !important; }

  table.dsv-table-pro,
  .dsv-table-pro {
    display: block !important;
    width: 100% !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  .dsv-table-pro thead { display: none !important; }

  .dsv-table-pro tbody {
    display: block !important;
    width: 100% !important;
  }

  .dsv-table-pro tbody tr {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto !important;
    gap: 2px 8px !important;
    padding: 12px 14px !important;
    min-height: 60px !important;
    /* 2026-05-21: removido max-height 84px — foto 36x36 + nome + meta
       estava ultrapassando, causando clipping vertical no scroll. Sem max-
       height, row cresce até o conteúdo natural. */
    border-bottom: 1px solid #f1f5f9 !important;
    /* zera resíduos do legacy admin-main table */
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
    align-items: center !important;
    padding-bottom: 12px !important;
  }

  .dsv-table-pro tbody td {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    width: auto !important;
    font-size: 14px !important;
    white-space: normal !important;
    flex-wrap: nowrap !important;
    justify-content: initial !important;
    text-align: left !important;
  }

  /* Anula data-label ::before do legacy */
  .dsv-table-pro tbody td::before {
    content: none !important;
    display: none !important;
  }

  .dsv-table-pro tbody td.tc-primary {
    grid-column: 1 !important;
    grid-row: 1 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #0f172a !important;
    overflow: hidden !important;
    /* 2026-05-21: removido nowrap+ellipsis que conflitava com .est-prod-cell
       flex (foto + nome). Agora o overflow:hidden no pai + ellipsis no .est-
       prod-nome (filho span) preserva ambos: foto inline + nome cortado se longo. */
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
  }
  .dsv-table-pro tbody td.tc-meta {
    grid-column: 1 !important;
    grid-row: 2 !important;
    font-size: 12px !important;
    color: #64748b !important;
  }
  .dsv-table-pro tbody td.tc-num,
  .dsv-table-pro tbody td.tc-status {
    grid-column: 2 !important;
    grid-row: 1 !important;
    text-align: right !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums;
  }
  .dsv-table-pro tbody td.tc-actions {
    grid-column: 2 !important;
    grid-row: 2 !important;
    font-size: 12px !important;
    text-align: right !important;
  }
  .dsv-table-pro tbody td.tc-actions button {
    height: 28px !important;
    min-width: 28px !important;
    padding: 2px 6px !important;
  }
  .dsv-table-pro tbody td.tc-hide-mobile { display: none !important; }
}

/* ════════════════════════════════════════════════════════════
   DRAWER lateral / bottom sheet mobile
   ════════════════════════════════════════════════════════════ */

.dsv-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.4);
  z-index: 9990;
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  animation: dsv-fade-in 150ms ease;
}
@keyframes dsv-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.dsv-drawer {
  background: #fff;
  width: min(480px, 100vw);
  height: 100%;
  overflow-y: auto;
  box-shadow: -10px 0 30px rgba(0,0,0,0.12);
  animation: dsv-slide-in 220ms ease;
  display: flex;
  flex-direction: column;
}
@keyframes dsv-slide-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

.dsv-drawer .dsv-modal-header {
  border-bottom: 1px solid #e2e8f0;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 2;
}
.dsv-drawer .dsv-drawer-body { flex: 1; padding: 0; }
.dsv-drawer .dsv-drawer-footer {
  padding: 12px 20px;
  border-top: 1px solid #e2e8f0;
  background: #fff;
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

@media (max-width: 767px) {
  .dsv-drawer-overlay {
    align-items: flex-end;
  }
  .dsv-drawer {
    width: 100%;
    height: 88vh;
    border-radius: 16px 16px 0 0;
    animation: dsv-slide-up 220ms ease;
  }
  @keyframes dsv-slide-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
}

/* ════════════════════════════════════════════════════════════
   KPI compactos mobile — esconde ícone, valor menor
   ════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
  .dsv-kpi-card {
    padding: 10px 12px;
  }
  .dsv-kpi-label {
    font-size: 10px;
    margin-bottom: 2px;
  }
  .dsv-kpi-value {
    font-size: 20px;
    line-height: 1.1;
  }
  .dsv-kpi-icon { display: none; }
}

/* ════════════════════════════════════════════════════════════
   Sparkline inline (estoque 30d)
   ════════════════════════════════════════════════════════════ */

.dsv-sparkline {
  display: inline-block;
  height: 28px;
  width: 80px;
  vertical-align: middle;
}
.dsv-sparkline path {
  fill: none;
  stroke: var(--brand-primary, #7c3aed);
  stroke-width: 1.5;
}
.dsv-sparkline .area {
  fill: rgba(124,58,237,0.08);
  stroke: none;
}

/* ════════════════════════════════════════════════════════════
   ANTI-AUTOFILL iOS Safari + Chrome
   - Esconde "yellow fill" do autofill em inputs não-password
   - Combina com autocomplete="off" + data-1p-ignore + fake hidden fields
   ════════════════════════════════════════════════════════════ */

input:not([type="password"]):-webkit-autofill,
input:not([type="password"]):-webkit-autofill:hover,
input:not([type="password"]):-webkit-autofill:focus,
input:not([type="password"]):-webkit-autofill:active,
input[autocomplete="off"]:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
  -webkit-text-fill-color: #0f172a !important;
  transition: background-color 5000s ease-in-out 0s;
  caret-color: #0f172a;
}

/* ════════════════════════════════════════════════════════════
   DYNAMIC VIEWPORT HEIGHT — Safari toolbar adapta automaticamente
   - Browsers modernos (iOS 15.4+ / Chrome 108+): 100dvh nativo
   - Browsers antigos: JS fallback atualiza --vh-real via visualViewport API
   ════════════════════════════════════════════════════════════ */

:root {
  --vh-real: 100vh; /* fallback inicial */
}
@supports (height: 100dvh) {
  :root {
    --vh-real: 100dvh;
  }
}

/* ════════════════════════════════════════════════════════════
   MOBILE SCROLL SAFETY — body/views rolam até o fim,
   bottom-nav fica acima da toolbar Safari (dvh já ajusta)
   ════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  html, body {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  /* Padding-bottom defensivo: 96px bottom-nav + safe-area iOS.
     Não precisa compensar Safari toolbar — dvh/--vh-real já ajusta */
  .admin-main {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: calc(100dvh - 60px);
    min-height: calc(var(--vh-real) - 60px);
  }
  /* Views (todas) garantir overflow visible — scroll pertence ao body */
  .admin-main > .view,
  .admin-main > [id^="view-"] {
    overflow-y: visible !important;
    overflow-x: hidden;
    /* Margem extra no fim da view pra última linha não ficar atrás do nav */
    padding-bottom: 24px;
    min-height: calc(100dvh - 140px);
    min-height: calc(var(--vh-real) - 140px);
  }
  /* Bottom-nav fica no fundo REAL do viewport (dvh ajusta com toolbar) */
  .vqen-nav-v2-bottomnav,
  .bottom-nav-mobile,
  nav[class*="bottom"] {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
}

/* ════════════════════════════════════════════════════════════
   MODAIS bottom-sheet mobile — altura via dvh
   Footer Cancelar/Cadastrar SEMPRE visível acima da Safari toolbar
   ════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .dsv-modal-overlay,
  .erp-modal-bg,
  .cpg-modal-bg,
  .modal-bg-padrao,
  body > .modal[id^="modal-"] {
    height: 100dvh !important;
    height: var(--vh-real) !important;
    max-height: 100dvh !important;
    max-height: var(--vh-real) !important;
  }
  .erp-modal-box,
  .cpg-modal-box,
  .modal-bg-padrao-inner {
    max-height: 92dvh !important;
    max-height: calc(var(--vh-real) * 0.92) !important;
  }
  /* .modal-content gold já tinha max-height:90vh via cascade fix — atualiza pra dvh */
  body > .modal > .modal-content,
  body > .modal > .modal-content:has(> .dsv-modal-header) {
    max-height: 92dvh !important;
    max-height: calc(var(--vh-real) * 0.92) !important;
  }
}

/* ════════════════════════════════════════════════════════════
   SCROLL CHAINING — quando modal aberto, body NÃO rola atrás
   ════════════════════════════════════════════════════════════ */

body.modal-open {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
  /* top é setado via JS (preserva scroll Y atual) */
}

/* FIX-BODY-RESIDUAL — defensivo: sem .modal-open, body DEVE rolar.
   Mesmo se algum JS deixou style.position:fixed inline residual,
   essa regra com !important + :not(.modal-open) força scroll OK. */
body:not(.modal-open) {
  position: static !important;
  overflow: visible !important;
  overflow-y: auto !important;
  height: auto !important;
  width: auto !important;
  top: auto !important;
}
html {
  overflow-x: hidden;
  overflow-y: auto;
  height: auto;
}
@media (max-width: 767px) {
  body:not(.modal-open), html {
    -webkit-overflow-scrolling: touch !important;
  }
}

/* Overscroll containment — scroll do modal não escoa pro body */
.modal,
.dsv-modal-overlay,
.dsv-drawer-overlay {
  overscroll-behavior: contain;
}
.modal-content,
.modal-content > .dsv-modal-body,
.modal-content > form.dsv-modal-body,
.modal-content > form.dsv-modal-body-grouped,
.dsv-modal-body,
.dsv-drawer {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

/* iOS Safari específico */
@supports (-webkit-touch-callout: none) {
  .modal-content > .dsv-modal-body,
  .modal-content > form.dsv-modal-body,
  .modal-content > form.dsv-modal-body-grouped,
  .dsv-modal-body,
  .dsv-drawer {
    overscroll-behavior-y: contain;
  }
}

/* ════════════════════════════════════════════════════════════
   <details> dentro de modal — scroll pra ver conteúdo expandido
   ════════════════════════════════════════════════════════════ */

.modal-content details[open] {
  padding-bottom: 8px;
}
.modal-content details > summary {
  scroll-margin-top: 12px;
}

/* F3.2 defensivo: garante que conteúdo do <details> dentro de modais
   é sempre visível quando open (proteção contra CSS legacy que esconda) */
details.dsv-fs[open] > *:not(summary),
.modal details[open] > *:not(summary),
.modal-content details[open] > *:not(summary),
.modal-bg-padrao details[open] > *:not(summary) {
  display: revert;
  visibility: visible;
}

/* ════════════════════════════════════════════════════════════
   TABLE-EDIT — tabela densa com edição inline em lote
   Inspirado: Airtable grid view, Notion table inline, Google Sheets
   Estende .dsv-table-pro: mesma estrutura, células com inputs ao
   invés de texto estático. Foco vira border-bottom brand. Dirty rows
   ganham indicator amarelo na lateral esquerda.
   ════════════════════════════════════════════════════════════ */

.dsv-table-edit tbody tr {
  position: relative;
}
.dsv-table-edit tbody tr.dirty::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #f59e0b;
}

.dsv-table-edit tbody td {
  padding: 6px 12px;
}

.dsv-table-edit tbody td input[type="text"],
.dsv-table-edit tbody td input[type="number"] {
  width: 100%;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  padding: 6px 0;
  font-size: 14px;
  color: #0f172a;
  font-family: inherit;
  box-sizing: border-box;
}
.dsv-table-edit tbody td input::placeholder { color: #cbd5e1; }
.dsv-table-edit tbody td input:hover {
  border-bottom-color: #e2e8f0;
}
.dsv-table-edit tbody td input:focus {
  outline: 0;
  border-bottom-color: var(--brand-primary, #7c3aed);
}
.dsv-table-edit tbody td input[type="number"] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Toggle switch compact pra coluna Ativo */
.dsv-toggle-mini {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  vertical-align: middle;
}
.dsv-toggle-mini input { opacity: 0; width: 0; height: 0; }
.dsv-toggle-mini .slider {
  position: absolute;
  inset: 0;
  background: #cbd5e1;
  border-radius: 20px;
  cursor: pointer;
  transition: background 150ms;
}
.dsv-toggle-mini .slider::before {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 150ms;
}
.dsv-toggle-mini input:checked + .slider { background: #10b981; }
.dsv-toggle-mini input:checked + .slider::before { transform: translateX(16px); }

/* Sticky save bar (aparece quando há rows dirty) */
.dsv-save-bar {
  position: sticky;
  bottom: 0;
  margin: 0 24px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px 10px 0 0;
  border-bottom: 0;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.06);
  z-index: 5;
}
.dsv-save-bar .dsv-save-counter {
  font-size: 13px;
  color: #64748b;
}
.dsv-save-bar .dsv-save-counter strong {
  color: #f59e0b;
  font-weight: 700;
}

@media (max-width: 767px) {
  .dsv-save-bar {
    margin: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
}

/* Mobile: na tabela edit, label cada célula visível */
@media (max-width: 767px) {
  .dsv-table-edit tbody td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
  }
  .dsv-table-edit tbody tr.dirty::before {
    width: 4px;
  }
}