/* SpaMaster 360 v72.3 — Typography Variable Authority
   Plus Jakarta Sans: interface voice
   Inter: dense and numeric data
*/

/* v72.3: compatibilidad con las variables tipográficas históricas del Design System.
   Cualquier hoja que todavía use Manrope, General Sans o aliases antiguos resolverá
   ahora a Plus Jakarta Sans e Inter sin tener que reescribir cada módulo. */
:root,
html,
body {
  --font-ui: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  --font-data: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  --font-display: var(--font-ui) !important;
  --font-body: var(--font-ui) !important;
  --font-sans: var(--font-ui) !important;
  --font-heading: var(--font-ui) !important;
  --font-primary: var(--font-ui) !important;
  --font-secondary: var(--font-data) !important;
  --sc-font-display: var(--font-ui) !important;
  --sc-font-body: var(--font-ui) !important;
  --sc-font-ui: var(--font-ui) !important;
  --sc-font-sans: var(--font-ui) !important;
  --sc-font-heading: var(--font-ui) !important;
  --sc-font-data: var(--font-data) !important;
  --sm360-font-ui: var(--font-ui) !important;
  --sm360-font-data: var(--font-data) !important;
  --sm360-font-display: var(--font-ui) !important;
  --sm360-font-body: var(--font-ui) !important;
}

:root {
  --font-ui: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-data: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --weight-normal: 500;
  --weight-label: 600;
  --weight-title: 700;

  --text-xs: 11px;
  --text-sm: 12px;
  --text-md: 13px;
  --text-base: 14px;
  --text-lg: 15px;
  --text-xl: 16px;
  --text-2xl: 18px;
  --text-3xl: 22px;
  --text-kpi: clamp(24px, 2.1vw, 34px);
}

html, body,
button, input, select, textarea, option,
label, legend, summary,
nav, aside, header, footer, main, section, article,
dialog, [role="dialog"], [role="button"], [role="tab"], [role="menuitem"] {
  font-family: var(--font-ui) !important;
}

body {
  font-weight: var(--weight-normal);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Brand, module titles and primary hierarchy */
.logo, .brand, .brand-name, .sidebar-logo,
.module-title, .page-title, .view-title,
.dashboard-title, .section-title,
.card-title, .modal-title,
h1, h2, h3,
.kpi-title, .kpi-label,
[class*="module-title"], [class*="page-title"], [class*="dashboard-title"] {
  font-family: var(--font-ui) !important;
  font-weight: 700 !important;
}

/* Sidebar and topbar */
.sidebar, #sideNav, .side-nav, .topbar,
.sidebar button, .sidebar a, #sideNav button, #sideNav a,
.topbar button, .topbar a,
[class*="sidebar"] [class*="menu"],
[class*="sidebar"] [class*="nav"] {
  font-family: var(--font-ui) !important;
}

.sidebar button, .sidebar a, #sideNav button, #sideNav a,
.topbar button, .topbar a,
.nav, .menu-item, .sc-menu-item {
  font-weight: 600 !important;
}

.sidebar .active, #sideNav .active,
.sidebar [aria-current="page"], #sideNav [aria-current="page"] {
  font-weight: 700 !important;
}

/* Buttons, tabs and labels */
button, .btn, [class*="-btn"], [role="button"] {
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

label, legend, .label, .field-label,
.form-label, [class*="field-label"], [class*="form-label"],
.tabs button, .tab, [role="tab"] {
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

/* Form values and descriptive text */
input, textarea, select, option,
p, span, small, li, dd, dt,
.card p, .modal p, .description, .helper, .hint {
  font-weight: 500;
}

input::placeholder, textarea::placeholder {
  font-family: var(--font-ui) !important;
  font-weight: 500 !important;
  opacity: .72;
}

/* Dense data: money, dates, time, ids and numeric values */
.money, .currency, .amount, .price, .total, .balance,
.time, .date, .datetime, .percent, .percentage,
.number, .numeric, .id, .badge-id,
[data-money], [data-currency], [data-amount], [data-price],
[data-time], [data-date], [data-datetime], [data-id], [data-number],
[class*="money"], [class*="amount"], [class*="price"],
[class*="currency"], [class*="datetime"], [class*="date-value"],
[class*="time-value"], [class*="id-value"] {
  font-family: var(--font-data) !important;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

input[type="number"], input[inputmode="numeric"], input[inputmode="decimal"],
input[type="date"], input[type="time"], input[type="datetime-local"] {
  font-family: var(--font-data) !important;
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums lining-nums;
}

input[type="number"], input[inputmode="numeric"], input[inputmode="decimal"] {
  font-weight: 500 !important;
}

/* Tables retain UI identity, numeric cells gain data precision */
table, thead, tbody, tfoot, tr, th, td {
  font-family: var(--font-ui) !important;
}

thead th, table th, .table-head, [role="columnheader"] {
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

tbody td, tfoot td, [role="cell"], [role="gridcell"] {
  font-weight: 500 !important;
}

td.money, td.currency, td.amount, td.price, td.total,
td.time, td.date, td.datetime, td.percent, td.number, td.numeric, td.id,
td[data-type="money"], td[data-type="number"], td[data-type="date"], td[data-type="time"],
[role="cell"].money, [role="gridcell"].money,
[role="cell"][data-type="number"], [role="gridcell"][data-type="number"] {
  font-family: var(--font-data) !important;
  font-variant-numeric: tabular-nums lining-nums;
}

/* Detect common numeric table columns without converting narrative content */
td[class*="value"], td[class*="total"], td[class*="amount"], td[class*="balance"],
td[class*="date"], td[class*="time"], td[class*="id"],
.table-value, .table-date, .table-time, .table-id {
  font-family: var(--font-data) !important;
  font-variant-numeric: tabular-nums lining-nums;
}

/* KPI values */
.kpi-number, .kpi-value, .metric-value, .stat-value,
[class*="kpi-number"], [class*="kpi-value"],
[class*="metric-value"], [class*="stat-value"] {
  font-family: var(--font-data) !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: -.025em !important;
}

/* Financial and POS numbers */
#view-pos .money, #view-pos .amount, #view-pos .price,
#view-pos [class*="total"], #view-pos [class*="balance"],
#view-finance .money, #view-finance .amount,
#view-finance [class*="total"], #view-finance [class*="balance"],
#view-finances .money, #view-finances .amount,
#view-finances [class*="total"], #view-finances [class*="balance"] {
  font-family: var(--font-data) !important;
  font-variant-numeric: tabular-nums lining-nums;
}

/* Agenda: UI labels in Jakarta, time grid and date data in Inter */
#view-agenda [class*="time"],
#view-agenda [data-time],
#view-agenda .fc-timegrid-slot-label,
#view-agenda .fc-event-time,
#view-agenda time,
.agenda-grid [class*="hour"],
.agenda-grid [class*="time"] {
  font-family: var(--font-data) !important;
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums lining-nums;
}

/* Money values should be emphatic but not overpowering */
.money, .currency, .amount, .price,
[class*="money"], [class*="amount"], [class*="price"] {
  font-weight: 600 !important;
}

.kpi-number.money, .kpi-value.money,
.kpi-number.currency, .kpi-value.currency,
.metric-value.money, .stat-value.money {
  font-weight: 700 !important;
}

/* IDs and metadata */
.id, .badge-id, code[data-id], [data-record-id], [class*="record-id"] {
  font-family: var(--font-data) !important;
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums lining-nums;
}

/* Charts and SVG text */
svg text, .chart text, [class*="chart"] text,
.apexcharts-text, .apexcharts-legend-text,
.apexcharts-xaxis-label, .apexcharts-yaxis-label {
  font-family: var(--font-data) !important;
  font-weight: 500 !important;
}

.chart-title, .apexcharts-title-text, .apexcharts-subtitle-text {
  font-family: var(--font-ui) !important;
  font-weight: 700 !important;
}

/* Mobile keeps the same typographic identity */
@media (max-width: 900px) {
  :root {
    --text-base: 13px;
    --text-lg: 14px;
    --text-xl: 15px;
    --text-2xl: 17px;
    --text-3xl: 20px;
    --text-kpi: clamp(22px, 7vw, 30px);
  }

  button, .btn, [class*="-btn"] {
    font-weight: 700 !important;
  }
}


/* Autoridad final para componentes que todavía declaran fuentes históricas. */
html body .app-shell,
html body .workspace,
html body #sideNav,
html body .topbar,
html body .modal,
html body [role="dialog"] {
  font-family: var(--font-ui) !important;
}

html body h1, html body h2, html body h3, html body h4,
html body h5, html body h6,
html body .brand-text strong,
html body .app-logo,
html body .nav,
html body .nav-link-direct,
html body .btn,
html body button,
html body .kpi-card strong,
html body .report-metric strong,
html body .panel,
html body .panel-head h3,
html body .modal-title,
html body .sc-spa-card__name {
  font-family: var(--font-ui) !important;
}

/* Los controles exclusivos de móvil nunca deben aparecer en escritorio. */
@media (min-width: 901px) {
  html body .mobile-top,
  html body > .mobile-top,
  html body .mobile-menu-toggle,
  html body .mobile-menu-btn,
  html body .mobile-nav-trigger,
  html body .sm360-mobile-menu-button,
  html body #mobileMenuToggle,
  html body #sm360MobileMenuToggle,
  html body [data-mobile-menu-toggle],
  html body button[aria-label="Menú"],
  html body button[aria-label="Menu"],
  html body button[title="Menú"],
  html body button[title="Menu"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}