:root {
  /* Identidad alena tms */
  --color-orange-dark: #C2410C;
  --color-orange: #F97316;
  --color-orange-light: #FDBA24;
  --color-brand-bg: #FFF7ED;
  --gradient-brand: linear-gradient(135deg, var(--color-orange-dark), var(--color-orange-light));

  /* Neutros */
  --color-bg: #F8FAFC;
  --color-surface: #FFFFFF;
  --color-bg-secondary: #F1F5F9;
  --color-border: #E2E8F0;
  --color-border-strong: #CBD5E1;
  --color-text-primary: #0F172A;
  --color-text-secondary: #475569;
  --color-text-tertiary: #64748B;
  --color-text-disabled: #94A3B8;

  /* Roles de color de la interfaz (alias semánticos de la paleta de marca) */
  --color-primary: var(--color-orange);
  --color-primary-hover: var(--color-orange-dark);
  --color-primary-soft: var(--color-brand-bg);
  --color-secondary: var(--color-orange-light);
  --color-accent-dark: #1E293B;

  /* Semánticos (independientes del naranja) */
  --color-success: #16A34A;
  --color-warning: #D97706;
  --color-error: #DC2626;
  --color-info: #2563EB;
  --color-success-bg: #DCFCE7;
  --color-success-text: #15803D;
  --color-warning-bg: #FEF3C7;
  --color-warning-text: #B45309;
  --color-error-bg: #FEE2E2;
  --color-error-text: #B91C1C;
  --color-info-bg: #DBEAFE;
  --color-info-text: #1D4ED8;

  /* Radios */
  --radius-input: 8px;
  --radius-card: 12px;
  --radius-modal: 16px;

  /* Sombras suaves — casi imperceptibles, el orden visual lo da el espacio en blanco */
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);

  /* Tipografía */
  --font-sans: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Microinteracciones */
  --transition-fast: 160ms ease;
  --transition-base: all 0.2s ease;
  --shadow-hover: 0 6px 18px rgba(15, 23, 42, 0.10);

  /* Escala de tamaños y densidad. Valores de celular/tablet (cómodos para el
     dedo, inputs de 16px para que iOS no haga zoom al enfocar). En escritorio
     se sobreescriben más abajo con una versión compacta — un solo lugar para
     ajustar la densidad de toda la plataforma. */
  --font-root: 100%;
  --fs-h1: 1.625rem;
  --fs-h2: 1.25rem;
  --fs-h3: 1.0625rem;
  --control-py: 0.65rem;
  --control-px: 0.85rem;
  --btn-py: 0.65rem;
  --btn-px: 1.25rem;
  --card-pad: 1.75rem;
  --kpi-pad: 1.5rem;
  --kpi-valor: 2.125rem;
  --cell-py: 0.75rem;
  --cell-px: 1rem;
  --page-pad: 2rem;
}

/* Escritorio (laptops de 14"): base de 14px y espaciados más compactos. */
@media (min-width: 769px) {
  :root {
    --font-root: 87.5%;
    --fs-h1: 1.5rem;
    --fs-h2: 1.25rem;
    --fs-h3: 1.0625rem;
    --control-py: 0.5rem;
    --control-px: 0.75rem;
    --btn-py: 0.5rem;
    --btn-px: 1rem;
    --card-pad: 1.25rem;
    --kpi-pad: 1rem 1.15rem;
    --kpi-valor: 1.75rem;
    --cell-py: 0.5rem;
    --cell-px: 0.85rem;
    --page-pad: 1.5rem;
  }
}

* {
  box-sizing: border-box;
}

html {
  font-size: var(--font-root);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--color-text-primary);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-weight: 700;
  margin: 0 0 0.5em;
}

h1 { font-size: var(--fs-h1); line-height: 1.2; }
h2 { font-size: var(--fs-h2); line-height: 1.25; }
h3 { font-size: var(--fs-h3); line-height: 1.3; }

p {
  margin: 0 0 1em;
  color: var(--color-text-secondary);
}

a {
  color: var(--color-orange-dark);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}