/* Sistema final de producto: centraliza ritmo, legibilidad y superficies sin
   cambiar IDs, selectores de estado ni contratos de interacción existentes. */
:root {
  --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --line-tight: 1.15;
  --line-normal: 1.45;
  --line-relaxed: 1.6;
  --control-height-sm: 2.25rem;
  --control-height-md: 2.75rem;
  --control-height-lg: 3rem;
  --icon-size-sm: 1rem;
  --icon-size-md: 1.25rem;
  --icon-size-lg: 1.5rem;
  --shadow-card: 0 4px 16px rgb(0 0 0 / .14);
}

body.app-redesign {
  --color-primary: #df6249;
  --color-primary-hover: #ed765b;
  --color-primary-strong: #b84335;
  --color-primary-gradient: linear-gradient(135deg, #e66e50, #bd4938);
  --color-accent: #f0b85f;
  --color-success: #45c18e;
  --color-warning: #edb452;
  --color-danger: #e76c68;
  --color-info: #72a9e7;
  --color-background: #121310;
  --color-surface: #1b1c18;
  --color-surface-raised: #23241f;
  --color-surface-hover: #2c2d27;
  --color-input: #151612;
  --color-text-primary: #f6f2e9;
  --color-text-secondary: #c7c4b9;
  --color-text-muted: #a3a196;
  --color-border: #35362f;
  --color-border-strong: #505147;
  --color-focus: #f4c56d;
  --radius-sm: .5rem;
  --radius-md: .75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --shadow-sm: 0 2px 8px rgb(0 0 0 / .14);
  --shadow-md: 0 10px 24px rgb(0 0 0 / .2);
  --shadow-lg: 0 18px 42px rgb(0 0 0 / .26);
  font-family: var(--font-ui);
  line-height: var(--line-normal);
  overflow-x: hidden;
}
html { overflow-x: clip; }

body:not(.dark-mode).app-redesign {
  --color-primary: #bc4f3e;
  --color-primary-hover: #a83f32;
  --color-primary-strong: #8f342c;
  --color-primary-gradient: linear-gradient(135deg, #cc5b45, #a83f32);
  --color-accent: #9a5b12;
  --color-success: #19754f;
  --color-warning: #8d570a;
  --color-danger: #b83734;
  --color-info: #245da0;
  --color-background: #f5f3ed;
  --color-surface: #fffefa;
  --color-surface-raised: #faf8f1;
  --color-surface-hover: #f3eee2;
  --color-input: #fffefa;
  --color-text-primary: #24241e;
  --color-text-secondary: #505149;
  --color-text-muted: #68695f;
  --color-border: #e2dfd5;
  --color-border-strong: #cac6ba;
  --color-focus: #8a4c00;
  --shadow-sm: 0 2px 8px rgb(48 40 22 / .06);
  --shadow-md: 0 10px 24px rgb(48 40 22 / .09);
  --shadow-lg: 0 18px 42px rgb(48 40 22 / .14);
}

body.app-redesign :where(h1, h2, h3, h4, p) { overflow-wrap: anywhere; }
body.app-redesign :where(.section-title, .accounts-main-heading, .audit-hero h2, .ui-page-header h1) {
  color: var(--color-text-primary);
  line-height: var(--line-tight);
  letter-spacing: -.025em;
}
body.app-redesign :where(.section-subtitle, .section-heading-copy > p, .ui-page-header p) {
  color: var(--color-text-muted);
  font-size: .9375rem;
  line-height: var(--line-relaxed);
}

/* Controles con alturas y focos predecibles en todas las áreas. */
body.app-redesign :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea, .ui-input, .ui-select, .ui-textarea) {
  min-width: 0;
  border-radius: var(--radius-md);
  font: inherit;
  font-size: .9375rem;
}
body.app-redesign :where(input:not([type="checkbox"]):not([type="radio"]), select, .ui-input, .ui-select) { min-height: var(--control-height-md); }
body.app-redesign :where(button, [role="button"], input[type="button"], input[type="submit"]) {
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  line-height: 1.25;
  touch-action: manipulation;
}
body.app-redesign :where(button, [role="button"], input[type="button"], input[type="submit"]):focus-visible,
body.app-redesign :where(input, select, textarea):focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
body.app-redesign :where(.ui-button, .btn-primary, .btn-secondary) { min-height: var(--control-height-md); }
body.app-redesign :where(.ui-button--sm, .btn-sm) { min-height: var(--control-height-sm); }
body.app-redesign :where(.ui-button--lg, .btn-lg) { min-height: var(--control-height-lg); }
body.app-redesign :where(.tab-icon, .history-icon, .inventory-icon) { width: var(--icon-size-md); height: var(--icon-size-md); flex: 0 0 auto; }

/* Las superficies vuelven a tener una jerarquía calmada y común; la tarjeta
   principal queda diferenciada de sus filas interiores. */
body.app-redesign :where(.ui-card, .ui-card--raised, .config-card, .whatsapp-card, .calendar-card, .calendar-auth-card, .qr-admin-shell, .expense-entry-card, .expenses-history-card, .audit-card, .inventory-availability-panel, .modal-card) {
  border-color: var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
body.app-redesign :where(.ui-card, .config-card, .whatsapp-card, .calendar-card, .calendar-auth-card, .expense-entry-card, .expenses-history-card, .audit-card, .inventory-availability-panel) {
  padding: clamp(1rem, 2vw, 1.5rem);
}
body.app-redesign :where(.ui-card, .config-card, .whatsapp-card, .calendar-card, .expense-entry-card, .expenses-history-card, .audit-card) :where(h2, h3, .card-title) {
  color: var(--color-text-primary);
  font-size: 1.125rem;
  line-height: 1.3;
}
body.app-redesign :where(.ui-badge, .status-badge, .inventory-status-badge) { min-height: 1.75rem; line-height: 1.2; }

/* Navigation controls remain part of the shared shell, not page content. */
body.app-redesign .header-nav-dropdown { padding: 0 clamp(1rem, 2.5vw, 2rem) .55rem; }
body.app-redesign .nav-menu-toggle { min-height: 2.75rem; padding: .4rem .75rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: none; }
body.app-redesign .nav-menu-toggle-copy small { color: var(--color-text-muted); font-size: .7rem; }
body.app-redesign .nav-menu-toggle-copy strong { color: var(--color-text-primary); font-size: .95rem; }
body.app-redesign .nav-menu-toggle-icon span { background: var(--color-accent); }
body.app-redesign .nav-menu-toggle:hover { border-color: var(--color-border-strong); background: var(--color-surface-raised); }
body.app-redesign .header-nav-dropdown .nav-tabs { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-md); }
body.app-redesign .tab-btn { min-height: 2.75rem; padding-inline: .85rem; border-radius: var(--radius-md); font-size: .875rem; font-weight: 700; }
body.app-redesign .tab-btn .tab-icon { width: 1.15rem; height: 1.15rem; font-size: 1rem; }
@media (max-width: 900px) {
  body.app-redesign .header-nav-dropdown { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .65rem; }
  body.app-redesign .header-nav-dropdown .nav-menu-toggle { min-width: 10rem; }
}
@media (max-width: 600px) {
  body.app-redesign .header-nav-dropdown { display: block; padding: 0 .75rem .55rem; }
  body.app-redesign .header-nav-dropdown .nav-menu-toggle { width: 100%; min-height: 2.65rem; }
  body.app-redesign .main-content { padding-top: .75rem; }
  body.app-redesign .tab-panel.active { padding-inline: 0; }
  body.app-redesign :where(.history-tabs-pills, .history-view-switcher, .audit-page-tabs) { gap: .3rem; }
  body.app-redesign :where(.history-tabs-pills, .history-view-switcher, .audit-page-tabs) button { flex: 1 1 auto; min-width: 8.5rem; }
  body.app-redesign :where(.analytics-kpi-grid, .stats-cards-grid, .hist-analytics-kpis) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.app-redesign :where(.analytics-kpi, .stat-card, .hist-analytics-kpi) { padding: .75rem .55rem; }
  body.app-redesign :where(.audit-filters, .audit-filter-bar) > * { min-width: min(100%, 9rem); flex: 1 1 9rem; }
}
@media (max-width: 370px) {
  body.app-redesign .nav-menu-toggle-copy small { display: none; }
}

/* Barras de vistas y filtros de Historial/Auditoría: permiten el wrap natural
   sin superponer los títulos ni reducir los controles a microtexto. */
body.app-redesign :where(.history-tabs-pills, .history-toolbar, .hist-toolbar, .audit-page-tabs, .audit-filter-bar, .audit-filters, .filter-bar) { min-width: 0; }
body.app-redesign :where(.history-tabs-pills, .history-view-switcher, .audit-page-tabs) button {
  min-height: 2.75rem;
  padding: .55rem .8rem;
  font-size: .875rem;
  line-height: 1.25;
}
body.app-redesign :where(.history-tabs-pills, .history-view-switcher, .audit-page-tabs) { flex-wrap: wrap; gap: .5rem; }
body.app-redesign :where(.audit-filters, .audit-filter-bar) { align-items: end; gap: .75rem; }
body.app-redesign :where(.audit-filters, .audit-filter-bar) label { font-size: .8125rem; line-height: 1.35; }
body.app-redesign :where(.hist-analytics-eyebrow, .hist-card-overline, .audit-eyebrow, .audit-page-header .eyebrow, .service-eyebrow) { font-size: .75rem; letter-spacing: .08em; }
body.app-redesign :where(.hist-analytics, .hist-analytics-grid, .hist-analytics-kpis, .analytics-kpi-grid, .stats-cards-grid, .audit-kpis, .audit-workspace) > * { min-width: 0; }
body.app-redesign :where(.hist-analytics-kpi, .analytics-kpi, .stat-card, .audit-kpis > div) { overflow-wrap: anywhere; }
body.app-redesign :where(.hist-analytics-kpi strong, .analytics-kpi strong, .stat-card strong) { font-variant-numeric: tabular-nums; }

/* Tablas grandes conservan su lectura y avisan del desplazamiento dentro de
   su contenedor, sin ampliar el viewport completo. */
body.app-redesign :where(.ui-table-wrap, .table-responsive, .history-table-wrap, .data-table-wrap, .audit-table-wrap) {
  max-width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-md);
  scrollbar-color: var(--color-border-strong) transparent;
  -webkit-overflow-scrolling: touch;
}
body.app-redesign :where(.ui-table, table) { font-variant-numeric: tabular-nums; }
body.app-redesign :where(.ui-table th, .ui-table td) { padding: .75rem .9rem; line-height: 1.4; }
body.app-redesign :where(.ui-table th) { color: var(--color-text-secondary); font-size: .75rem; }

/* Diálogos y mensajes de estado comparten la misma escala y la misma salida
   responsive para textos y acciones largas. */
body.app-redesign .modal-card { border: 1px solid var(--color-border-strong); border-radius: var(--radius-xl); background: var(--color-surface-raised); box-shadow: var(--shadow-lg); }
body.app-redesign :where(.modal-title, .modal-header h2, .ui-modal__title) { font-size: clamp(1.125rem, 2vw, 1.375rem); line-height: 1.25; }
body.app-redesign :where(.modal-footer, .modal-actions, .form-actions, .ui-modal__footer) { gap: .5rem; }
body.app-redesign .employee-pay-modal-kicker { font-size: .75rem; }
body.app-redesign .employee-pay-modal-header p { font-size: .875rem; line-height: 1.45; }
body.app-redesign .employee-pay-modal-body .emp-method-pill { min-height: 2.75rem; font-size: .875rem; }
body.app-redesign .employee-pay-modal-body .btn-pay-employee { min-height: 2.75rem; font-size: .9375rem; }
body.app-redesign :where(.ui-state, .empty-state, .error-state, [role="alert"]) { line-height: var(--line-relaxed); }

/* El catálogo POS comparte la misma tarjeta en móvil, tablet y escritorio.
   Los selectores móviles heredados quedan fuera de la vista actual. */
body.app-redesign[data-active-tab="pos"] #tab-pos .product-lockscreen-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: .65rem;
  min-width: 0;
  min-height: 5.75rem;
  height: auto;
  padding: .72rem .8rem;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 13px;
  background: linear-gradient(145deg, var(--color-surface-raised), var(--color-surface));
  box-shadow: 0 2px 7px rgb(0 0 0 / .16);
  transition: border-color .16s ease, background-color .16s ease, transform .12s ease;
}
body.app-redesign[data-active-tab="pos"] #tab-pos .product-lockscreen-card:hover {
  border-color: var(--color-border-strong);
  transform: translateY(-1px);
}
body.app-redesign[data-active-tab="pos"] #tab-pos .product-lockscreen-card:active { transform: scale(.985); }
body.app-redesign[data-active-tab="pos"] #tab-pos .product-lockscreen-card[data-category] { border-left-width: 1px; }
body.app-redesign[data-active-tab="pos"] #tab-pos .product-lockscreen-card .product-card-top {
  display: flex;
  align-items: flex-start;
  width: 100%;
  min-width: 0;
}
body.app-redesign[data-active-tab="pos"] #tab-pos .product-lockscreen-card .product-clean-name {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--color-text-primary);
  font-size: .9rem;
  font-weight: 760;
  line-height: 1.3;
  white-space: normal;
}
body.app-redesign[data-active-tab="pos"] #tab-pos .product-lockscreen-card .product-card-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: .5rem;
  width: 100%;
  min-width: 0;
  margin-top: auto;
}
body.app-redesign[data-active-tab="pos"] #tab-pos .product-lockscreen-card .product-price-wrap {
  flex: 0 0 auto;
  min-width: max-content;
}
body.app-redesign[data-active-tab="pos"] #tab-pos .product-lockscreen-card .product-clean-price {
  display: block;
  color: var(--color-accent);
  font-size: .98rem;
  font-weight: 850;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-shadow: none;
}
body.app-redesign[data-active-tab="pos"] #tab-pos .product-lockscreen-card .pos-product-add-action {
  display: grid;
  place-items: center;
  flex: 0 0 2.75rem;
  width: 2.75rem;
  height: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--color-primary) 42%, var(--color-border));
  border-radius: 11px;
  background: color-mix(in srgb, var(--color-primary) 13%, var(--color-surface));
  color: var(--color-primary-hover);
  font: inherit;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
body.app-redesign[data-active-tab="pos"] #tab-pos .product-lockscreen-card .pos-product-add-action:hover {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 22%, var(--color-surface));
}
body.app-redesign[data-active-tab="pos"] #tab-pos .product-lockscreen-card .pos-product-add-action:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
body.app-redesign[data-active-tab="pos"] #tab-pos .product-lockscreen-card.in-cart {
  border-color: color-mix(in srgb, var(--color-accent) 48%, var(--color-border));
  background: color-mix(in srgb, var(--color-accent) 7%, var(--color-surface-raised));
  box-shadow: 0 2px 7px rgb(0 0 0 / .18);
}
body.app-redesign[data-active-tab="pos"] #tab-pos .pos-desktop-product-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 185px), 1fr));
  align-items: stretch;
  gap: .55rem;
}
body.app-redesign[data-active-tab="pos"] #tab-pos .pos-desktop-catalog-toolbar label,
body.app-redesign[data-active-tab="pos"] #tab-pos .account-picker-search-wrap { min-height: 2.75rem; }
body.app-redesign[data-active-tab="pos"] #tab-pos .pos-desktop-category-filters {
  flex-wrap: wrap;
  gap: .35rem;
  overflow: visible;
}
body.app-redesign[data-active-tab="pos"] #tab-pos .pos-desktop-category-filters button {
  min-height: 2.75rem;
  height: auto;
  max-height: none;
  padding: .45rem .72rem;
  font-size: .76rem;
}

/* Resumen de Auditoría: etiquetas y valores centrados en cada métrica. */
body.app-redesign #tab-audit .audit-summary-grid > div {
  min-width: 0;
  align-content: center;
  justify-items: center;
  text-align: center;
}
body.app-redesign #tab-audit .audit-summary-grid > div > span,
body.app-redesign #tab-audit .audit-summary-grid > div > strong {
  max-width: 100%;
  text-align: center;
  overflow-wrap: anywhere;
}
body.app-redesign #tab-audit .audit-summary-grid > div > strong {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}