/**
 * Jardín Plaza Operations UI — Design System
 * JPO-UI Professional Operations
 * Fuente única de tokens. Cargar ANTES de jp-ui.css / styles.css.
 */
:root {
  /* —— Brand (uso moderado: primaria, éxito, nav profunda) —— */
  --jp-primary: #0A5C2C;
  --jp-secondary: #0C903C;
  --jp-accent: #90C018;
  --jp-green: var(--jp-primary);
  --jp-green-deep: #0c2f1c;
  --jp-green-soft: #e6f3ea;
  --jp-green-mid: var(--jp-secondary);
  --jp-white: #ffffff;

  /* —— Surfaces (neutros fríos, sin tint verde excesivo) —— */
  --jp-bg: #f3f4f3;
  --jp-surface: #ffffff;
  --jp-surface-muted: #e9ebe9;
  --jp-surface-hover: #f6f7f6;
  --jp-border: #d8dcd9;
  --jp-border-strong: #b4bbb6;
  --jp-divider: color-mix(in srgb, var(--jp-border) 85%, transparent);

  /* —— Text —— */
  --jp-text: #121816;
  --jp-text-muted: #3f4843;
  /* ≥4.5:1 sobre --jp-bg (#f3f4f3) y --jp-surface; tipografía secundaria/hint KPI */
  --jp-text-faint: #454e49;
  --jp-text-inverse: #f5f7f5;

  /* —— Semantic —— */
  --jp-info: #1a6494;
  --jp-info-soft: #e7f2f9;
  --jp-warn: #8a6a00;
  --jp-warn-soft: #fff6d6;
  --jp-danger: #b11b1b;
  --jp-danger-soft: #fbe4e1;
  --jp-success: var(--jp-green);
  --jp-success-soft: var(--jp-green-soft);

  /* —— Type: jerarquía rigurosa —— */
  --jp-font: "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", ui-sans-serif, system-ui, sans-serif;
  --jp-font-display: "Segoe UI Variable Display", "Segoe UI", "Helvetica Neue", ui-sans-serif, system-ui, sans-serif;
  --jp-font-mono: "Cascadia Mono", "Segoe UI Mono", ui-monospace, Consolas, monospace;
  --jp-display: clamp(1.875rem, 1.65rem + 0.7vw, 2.125rem); /* ~30–34 */
  --jp-title-page: clamp(1.375rem, 1.28rem + 0.35vw, 1.625rem); /* 22–26 topbar */
  --jp-title-section: 1.125rem; /* 18 */
  --jp-title-card: 0.9375rem; /* 15 component */
  --jp-body: 0.9375rem; /* 15 */
  --jp-body-lg: 1rem; /* 16 inputs */
  --jp-body-sm: 0.8125rem; /* 13 secondary */
  --jp-label: 0.75rem; /* 12 */
  --jp-caption: 0.6875rem; /* 11 */
  --jp-kpi-num: clamp(1.75rem, 1.55rem + 0.55vw, 2.125rem); /* números KPI */
  --jp-weight-regular: 400;
  --jp-weight-medium: 500;
  --jp-weight-semibold: 600;
  --jp-weight-bold: 700;
  --jp-leading: 1.5;
  --jp-leading-tight: 1.22;
  --jp-tracking-label: 0.05em;

  /* —— Spacing rhythm —— */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-section: var(--space-7);
  --space-group: var(--space-5);
  --space-tight: var(--space-2);

  /* —— Radii —— */
  --jp-radius-sm: 6px;
  --jp-radius: 8px;
  --jp-radius-lg: 12px;
  --jp-radius-pill: 999px;

  /* —— Elevation (mínima) —— */
  --jp-shadow: 0 1px 0 rgba(18, 24, 22, 0.04);
  --jp-shadow-float: 0 10px 30px rgba(18, 24, 22, 0.1);
  --jp-shadow-none: none;

  /* —— Shell —— */
  --sidebar-width-expanded: 220px;
  --sidebar-width-collapsed: 64px;
  --sidebar-width-current: var(--sidebar-width-expanded);
  --topbar-h: 52px;
  --content-max: 1120px;
  --touch-min: 44px;
  --jp-focus-ring: 0 0 0 2px var(--jp-surface), 0 0 0 4px color-mix(in srgb, var(--jp-green) 70%, #fff);

  /* —— Z-index —— */
  --z-base: 1;
  --z-sticky: 20;
  --z-dropdown: 40;
  --z-popover: 40;
  --z-drawer: 60;
  --z-modal: 80;
  --z-toast: 100;
  --z-ribbon: 120;

  /* —— Motion —— */
  --dur-fast: 140ms;
  --dur-normal: 220ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* —— Legacy aliases —— */
  --brand-green: var(--jp-green);
  --brand-green-deep: var(--jp-green-deep);
  --brand-green-light: var(--jp-green-soft);
  --brand-green-medium: var(--jp-green-mid);
  --brand-white: var(--jp-white);
  --brand-red: #e42424;
  --brand-red-dark: var(--jp-danger);
  --brand-red-light: var(--jp-danger-soft);
  --brand-yellow: #f0c000;
  --brand-yellow-dark: var(--jp-warn);
  --brand-yellow-light: var(--jp-warn-soft);
  --surface-base: var(--jp-bg);
  --surface-raised: var(--jp-surface);
  --surface-soft: var(--jp-surface-muted);
  --text-primary: var(--jp-text);
  --text-secondary: var(--jp-text-muted);
  --border-soft: var(--jp-border);
  --on-deep: #ffffff;
  --on-deep-muted: #a8b8ad;
  --on-medium: #ffffff;
  --color-principal: var(--jp-green);
  --color-principal-oscuro: var(--jp-green-deep);
  --color-principal-claro: var(--jp-green-soft);
  --fondo-general: var(--jp-bg);
  --fondo-elevado: var(--jp-surface);
  --fondo-sutil: var(--jp-surface-muted);
  --texto-principal: var(--jp-text);
  --texto-secundario: var(--jp-text-muted);
  --borde: var(--jp-border);
  --exito: var(--jp-success);
  --exito-fondo: var(--jp-success-soft);
  --advertencia: var(--jp-warn);
  --advertencia-fondo: var(--jp-warn-soft);
  --error: var(--jp-danger);
  --error-fondo: var(--jp-danger-soft);
  --informacion: var(--jp-info);
  --informacion-fondo: var(--jp-info-soft);
  --font: var(--jp-font);
  --title: var(--jp-title-page);
  --title-sm: var(--jp-title-section);
  --text: var(--jp-body);
  --text-sm: var(--jp-body-sm);
  --radio: var(--jp-radius);
  --radio-sm: var(--jp-radius-sm);
  --radio-lg: var(--jp-radius-lg);
  --sombra-ligera: var(--jp-shadow);
  --sombra-elevada: var(--jp-shadow-float);
  --altura-tactil: var(--touch-min);
  --ancho-max-contenido: var(--content-max);
  --espacio: var(--space-4);
  --space: var(--space-4);
  --radius: var(--jp-radius);
  --muted: var(--jp-text-muted);
  --bg: var(--jp-bg);
  --card: var(--jp-surface);
  --line: var(--jp-border);
  --ink: var(--jp-text);
  --brand: var(--jp-green);
  --brand2: var(--jp-green-deep);
  --shadow: var(--jp-shadow);
  --good: var(--jp-success);
  --warn: var(--jp-warn);
  --bad: var(--jp-danger);
  --dur-rapida: var(--dur-fast);
  --dur-lenta: 320ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-normal: 1ms;
    --dur-lenta: 1ms;
  }
}

html {
  font-family: var(--jp-font);
  font-size: 16px;
  line-height: var(--jp-leading);
  color: var(--jp-text);
  background: var(--jp-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--jp-font);
  font-size: var(--jp-body);
  font-weight: var(--jp-weight-regular);
  color: var(--jp-text);
  background: var(--jp-bg);
}

.jp-num,
.kpi-value,
.reports-kpi-value,
.ops-metrics .kpi-value {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: -0.03em;
}