/* Capa visual transversal: menos marcos, mejor jerarquía y más aire. */
body.app-redesign {
  --color-primary: #e2664d;
  --color-primary-hover: #f0785e;
  --color-primary-strong: #bd4938;
  --color-primary-gradient: linear-gradient(135deg, #ee795b, #c74636);
  --color-accent: #efb85f;
  --color-background: #111210;
  --color-surface: #191a17;
  --color-surface-raised: #20211d;
  --color-surface-hover: #292a25;
  --color-input: #151613;
  --color-text-primary: #f6f3eb;
  --color-text-secondary: #c4c4b9;
  --color-text-muted: #92948a;
  --color-border: #30312b;
  --color-border-strong: #44463d;
  --radius-md: .7rem;
  --radius-lg: .9rem;
  --radius-xl: 1.1rem;
}

body:not(.dark-mode).app-redesign {
  --color-background: #f5f4f0;
  --color-surface: #fffefa;
  --color-surface-raised: #f8f7f2;
  --color-surface-hover: #f3eee5;
  --color-input: #fffefa;
  --color-text-primary: #25251f;
  --color-text-secondary: #55564f;
  --color-text-muted: #77796f;
  --color-border: #e7e4dc;
  --color-border-strong: #d4d0c6;
}

body.app-redesign .main-content {
  background: var(--color-background);
  min-height: calc(100vh - 8rem);
}

body.app-redesign [hidden] { display: none !important; }

body.app-redesign .header-nav-dropdown { background: transparent; }
body.app-redesign .header-nav-dropdown { border-top: 0; }
body.app-redesign .nav-menu-toggle {
  min-height: 2.45rem;
  padding: .35rem .1rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body.app-redesign .nav-menu-toggle:hover,
body.app-redesign .nav-menu-toggle:focus-visible {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  transform: none;
}
body.app-redesign .nav-menu-toggle-copy strong { color: var(--color-text-primary); }
body.app-redesign .nav-menu-toggle-copy small { color: var(--color-text-muted); }
body.app-redesign .header-nav-dropdown .nav-tabs {
  border-color: var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}
body:not(.dark-mode).app-redesign .header-nav-dropdown { background: transparent; }
body:not(.dark-mode).app-redesign .nav-menu-toggle {
  border: 0;
  background: transparent;
  box-shadow: none;
}
body:not(.dark-mode).app-redesign .nav-menu-toggle-copy strong { color: var(--color-text-primary); }
body:not(.dark-mode).app-redesign .header-nav-dropdown .nav-tabs {
  border-color: var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}

body.app-redesign .tab-panel.active {
  width: min(100%, 1480px);
  margin-inline: auto;
}

/* Una tarjeta interior deja de dibujar otro marco dentro de su contenedor. */
body.app-redesign .ui-card .ui-card {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

/* Operación: el encabezado de cuentas y el catálogo comparten el lienzo. */
body.app-redesign #tab-pos .ui-pos-accounts-card {
  padding: .25rem 0 1rem;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.app-redesign #tab-pos .ui-pos-products-card {
  margin-top: 1.25rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.app-redesign #tab-pos .open-accounts-scroll .account-chip {
  box-shadow: none;
}
body.app-redesign #tab-pos .pos-sales-compact-card {
  border-color: transparent;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: none;
}
body.app-redesign #tab-pos .pos-sales-compact-card:hover,
body.app-redesign #tab-pos .pos-sales-compact-card:focus-visible {
  border-color: transparent;
  background: var(--color-surface-raised);
}

/* Las secciones amplias ya tienen jerarquía por título y contenido. */
body.app-redesign #tab-inventory .inventory-availability-panel.ui-card {
  border-color: var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: none;
}
body.app-redesign #tab-inventory #inventoryVisualTable[data-display-mode="list"] .inventory-view-list-row {
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body.app-redesign #tab-inventory #inventoryVisualTable[data-display-mode="list"] .inventory-view-list-row:hover {
  background: color-mix(in srgb, var(--color-surface-raised) 55%, transparent);
}

body.app-redesign #tab-expenses .expense-entry-card {
  border-color: var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: none;
}

body.app-redesign #tab-expenses .purchase-line-card {
  border-color: var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  box-shadow: none;
}

body.app-redesign #tab-expenses .expenses-history-card {
  border-color: var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: none;
}

/* Auditoría: evita que la pantalla se lea como una colección de paneles pesados. */
body.app-redesign #tab-audit .audit-card {
  border-color: var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: none;
}

body.app-redesign .section-title,
body.app-redesign .accounts-main-heading,
body.app-redesign .audit-hero h2 {
  letter-spacing: -.035em;
}

body.app-redesign :where(.ui-card, .expense-entry-card, .audit-card) {
  transition: border-color .18s ease, background-color .18s ease;
}

@media (max-width: 640px) {
  body.app-redesign .tab-panel.active { padding-inline: .1rem; }
  body.app-redesign #tab-pos .ui-pos-accounts-card { padding-bottom: .8rem; }
  body.app-redesign #tab-pos .ui-pos-products-card { margin-top: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  body.app-redesign :where(.ui-card, .expense-entry-card, .audit-card) { transition: none; }
}

/* Composición editorial: estructura por ritmo y separadores, no por marcos. */
body.app-redesign .ui-card,
body.app-redesign .ui-card--raised {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.app-redesign .ui-card .ui-card,
body.app-redesign .ui-card [class$="-card"] {
  border-color: transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.app-redesign #tab-expenses .expense-entry-card,
body.app-redesign #tab-expenses .expenses-history-card,
body.app-redesign #tab-reports .business-analytics-card,
body.app-redesign #tab-reports .drawer-cuadre-card,
body.app-redesign #tab-reports .expenses-list-card,
body.app-redesign #tab-audit.audit-panel,
body.app-redesign #tab-audit .audit-card,
body.app-redesign #tab-history .hist-analytics,
body.app-redesign #tab-qr .qr-admin-shell,
body.app-redesign #tab-settings .config-card,
body.app-redesign #tab-whatsapp .whatsapp-card,
body.app-redesign #tab-calendar .calendar-card,
body.app-redesign #tab-calendar .calendar-auth-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.app-redesign #tab-reports .business-analytics-header,
body.app-redesign #tab-reports .reports-live-status,
body.app-redesign #tab-reports .reports-manager-brief,
body.app-redesign #tab-reports .reports-chart-card,
body.app-redesign #tab-reports .analytics-kpi,
body.app-redesign #tab-reports .stat-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.app-redesign #tab-reports .business-analytics-header,
body.app-redesign #tab-reports .reports-live-status,
body.app-redesign #tab-reports .reports-manager-brief,
body.app-redesign #tab-reports .reports-chart-card,
body.app-redesign #tab-reports .drawer-cuadre-card,
body.app-redesign #tab-reports .expenses-list-card {
  border-bottom: 1px solid var(--color-border);
}

body.app-redesign #tab-reports .business-analytics-header { padding-inline: 0; }
body.app-redesign #tab-reports .reports-live-status,
body.app-redesign #tab-reports .reports-manager-brief,
body.app-redesign #tab-reports .reports-chart-card { padding-inline: 0; }
body.app-redesign #tab-reports .analytics-kpi-grid { gap: 0; }
body.app-redesign #tab-reports .analytics-kpi { padding: .9rem 1rem .9rem 0; }
body.app-redesign #tab-reports .analytics-kpi + .analytics-kpi { padding-left: 1rem; border-left: 1px solid var(--color-border); }
body.app-redesign #tab-reports .stats-cards-grid { gap: 0; }
body.app-redesign #tab-reports .stat-card { padding: 1rem; }
body.app-redesign #tab-reports .stat-card + .stat-card { border-left: 1px solid var(--color-border); }
body.app-redesign #tab-reports .reports-manager-brief-kpi,
body.app-redesign #tab-reports .reports-manager-brief-message { border-color: var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); }

body.app-redesign #tab-audit.audit-panel { padding: 0; }
body.app-redesign #tab-audit .audit-shell { display: grid; gap: 1.4rem; }
body.app-redesign #tab-audit .audit-hero { padding: 0 0 1.1rem; border-bottom: 1px solid var(--color-border); }
body.app-redesign #tab-audit .audit-workspace { gap: 1.25rem; }
body.app-redesign #tab-audit .audit-queue-card,
body.app-redesign #tab-audit .audit-detail-card,
body.app-redesign #tab-audit .audit-count-card { padding: 1.1rem 0; }
body.app-redesign #tab-audit .audit-queue-item { border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: none; }

body.app-redesign #tab-history .hist-analytics {
  max-width: 1280px;
  padding: 0;
}
body.app-redesign #tab-history .hist-analytics-card,
body.app-redesign #tab-history .hist-analytics-kpi {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body.app-redesign #tab-history .hist-analytics-card { padding-inline: 0; border-bottom: 1px solid var(--color-border); }
body.app-redesign #tab-history .hist-analytics-kpis { gap: 0; }
body.app-redesign #tab-history .hist-analytics-kpi { padding: 1rem; }
body.app-redesign #tab-history .hist-analytics-kpi + .hist-analytics-kpi { border-left: 1px solid var(--color-border); }
body.app-redesign #tab-history .hist-analytics-hero h2 span,
body.app-redesign #tab-history .hist-analytics-eyebrow,
body.app-redesign #tab-history .hist-card-overline { color: var(--color-primary-hover); }
body.app-redesign #tab-history .hist-analytics-kpi-highlight strong { color: var(--color-primary-hover); }
body.app-redesign #tab-history .hist-analytics-grid { gap: 1.5rem; }
body.app-redesign #tab-history .hist-donut > div { background: var(--color-background); }

body.app-redesign #tab-whatsapp .whatsapp-card,
body.app-redesign #tab-calendar .calendar-card,
body.app-redesign #tab-calendar .calendar-auth-card,
body.app-redesign #tab-settings .config-card { padding-inline: 0; }
body.app-redesign #tab-whatsapp .whatsapp-card + .whatsapp-card,
body.app-redesign #tab-settings .config-card { border-bottom: 1px solid var(--color-border); }
body.app-redesign #tab-whatsapp .whatsapp-card-heading,
body.app-redesign #tab-calendar .calendar-card-heading { padding-bottom: .85rem; }
body.app-redesign #tab-calendar .calendar-layout > .calendar-card + .calendar-card { border-left: 1px solid var(--color-border); padding-left: 1.25rem; }
body.app-redesign #tab-qr .qr-admin-shell { padding: 0; }

body:not(.dark-mode).app-redesign #tab-history .hist-analytics-kpi strong,
body:not(.dark-mode).app-redesign #tab-history .hist-analytics-hero h2,
body:not(.dark-mode).app-redesign #tab-history .hist-analytics-card h3 { color: var(--color-text-primary); }
body:not(.dark-mode).app-redesign #tab-history .hist-analytics-hero p,
body:not(.dark-mode).app-redesign #tab-history .hist-analytics-kpi > span,
body:not(.dark-mode).app-redesign #tab-history .hist-analytics-kpi small { color: var(--color-text-muted); }

@media (max-width: 760px) {
  body.app-redesign #tab-reports .analytics-kpi { padding: .7rem .55rem .7rem 0; }
  body.app-redesign #tab-reports .analytics-kpi + .analytics-kpi { padding-left: .55rem; }
  body.app-redesign #tab-reports .stat-card { padding: .8rem .45rem; }
  body.app-redesign #tab-reports .stat-card + .stat-card { border-left: 0; }
  body.app-redesign #tab-history .hist-analytics-kpi { padding: .8rem .45rem; }
  body.app-redesign #tab-history .hist-analytics-kpi + .hist-analytics-kpi { border-left: 0; }
  body.app-redesign #tab-calendar .calendar-layout > .calendar-card + .calendar-card { border-left: 0; padding-left: 0; }
}