/* Tokens globales del sistema y temas */
:root {
  /* Tipografía global: Plus Jakarta Sans */
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-heading: 'Plus Jakarta Sans', var(--font-sans);
  --font-family: var(--font-sans);

  /* Colores principales */
  --color-primary: #22c7a9;
  --color-primary-hover: #16a88e;
  --color-primary-soft: #e9fbf7;

  --color-secondary: #102a56;
  --color-secondary-soft: #eef5ff;

  /* Fondos */
  --color-bg: #f6f9fc;
  --color-bg-soft: #f9fbfd;
  --color-surface: #ffffff;
  --color-surface-soft: #f4fcfa;

  /* Textos */
  --color-text: #102a56;
  --color-muted: #7b8ba8;
  --color-muted-light: #a6b3c9;

  /* Bordes */
  --color-border: #e3eaf3;
  --color-border-soft: #eef3f8;

  /* Estados */
  --color-success: #22c55e;
  --color-success-soft: #ecfdf5;

  --color-danger: #ef4444;
  --color-danger-soft: #fff1f2;

  --color-warning: #f59e0b;
  --color-warning-soft: #fffbeb;

  --color-info: #2563eb;
  --color-info-soft: #eff6ff;

  /* Radios */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-full: 999px;

  /* Sombras suaves */
  --shadow-xs: 0 4px 12px rgba(16, 42, 86, 0.04);
  --shadow-sm: 0 10px 28px rgba(16, 42, 86, 0.06);
  --shadow-md: 0 18px 45px rgba(16, 42, 86, 0.08);
  --shadow-primary: 0 12px 28px rgba(34, 199, 169, 0.22);

  /* Transiciones */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;

  /* Focus */
  --focus-primary: rgba(34, 199, 169, 0.16);

  /* Charts */
  --chart-1: #22c7a9;
  --chart-2: #2563eb;
  --chart-3: #8b5cf6;
  --chart-4: #f59e0b;
}

/* Tema oscuro */
:root[data-theme="dark"] {
  --color-bg: #0f172a;
  --color-bg-soft: #111827;
  --color-surface: #111827;
  --color-surface-soft: #152033;

  --color-text: #e5edf8;
  --color-muted: #94a3b8;
  --color-muted-light: #64748b;

  --color-border: #243247;
  --color-border-soft: #1f2937;

  --color-primary: #35e0c0;
  --color-primary-hover: #22c7a9;
  --color-primary-soft: rgba(34, 199, 169, 0.14);

  --color-secondary: #e5edf8;
  --color-secondary-soft: rgba(37, 99, 235, 0.12);

  --shadow-xs: 0 4px 12px rgba(0, 0, 0, 0.24);
  --shadow-sm: 0 12px 32px rgba(0, 0, 0, 0.32);
  --shadow-md: 0 20px 55px rgba(0, 0, 0, 0.42);

  --focus-primary: rgba(53, 224, 192, 0.18);
}

/* Valores compartidos de páginas durante la migración.
   Se mantienen explícitos para conservar la apariencia actual. */
@layer tokens {
  :root {
    --page-bg-body: #f6f9fc;
    --page-bg-card: #ffffff;
    --page-bg-soft: #f4fcfa;
    --page-bg-input: #f8fbfd;
    --page-text-main: #102a56;
    --page-text-secondary: #7b8ba8;
    --page-text-placeholder: #a6b3c9;
    --page-color-blue: #2563eb;
    --page-color-blue-soft: #eff6ff;
    --page-color-green: #22c55e;
    --page-color-green-soft: #ecfdf5;
    --page-color-orange: #f59e0b;
    --page-color-orange-soft: #fffbeb;
    --page-color-purple: #8b5cf6;
    --page-color-purple-soft: #f3efff;
    --page-color-red: #ef4444;
    --page-color-red-soft: #fff1f2;
    --page-border-soft: #b6c2cf;
    --page-border-light: #cbd5e1;
    --page-shadow-soft: 0 14px 35px rgba(16, 42, 86, 0.06);
    --page-shadow-hover: 0 20px 48px rgba(16, 42, 86, 0.10);
    --page-shadow-focus: 0 0 0 4px rgba(34, 199, 169, 0.16);
    --page-shadow-primary: 0 12px 26px rgba(34, 199, 169, 0.22);
    --page-radius-xl: 28px;
    --page-radius-l: 20px;
    --page-radius-m: 16px;
    --page-radius-s: 12px;
    --page-radius-round: 999px;
    --page-text-muted: #64748b;
  }
}

/* Texto secundario compartido; alias de compatibilidad para vistas pendientes. */
:root {
  --text-muted: var(--page-text-muted);


/* Compatibilidad para componentes y vistas que aún usan los nombres anteriores.
   Estos valores antes procedían del :root de configuracion.css. */
  --bg-body: var(--page-bg-body);
  --bg-card: var(--page-bg-card);
  --bg-soft: var(--page-bg-soft);
  --bg-input: var(--page-bg-input);
  --text-main: var(--page-text-main);
  --text-secondary: var(--page-text-secondary);
  --text-placeholder: var(--page-text-placeholder);
  --color-blue: var(--page-color-blue);
  --color-blue-soft: var(--page-color-blue-soft);
  --color-green: var(--page-color-green);
  --color-green-soft: var(--page-color-green-soft);
  --color-orange: var(--page-color-orange);
  --color-orange-soft: var(--page-color-orange-soft);
  --color-purple: var(--page-color-purple);
  --color-purple-soft: var(--page-color-purple-soft);
  --color-red: var(--page-color-red);
  --color-red-soft: var(--page-color-red-soft);
  --border-soft: var(--page-border-soft);
  --border-light: var(--page-border-light);
  --shadow-soft: var(--page-shadow-soft);
  --shadow-hover: var(--page-shadow-hover);
  --shadow-focus: var(--page-shadow-focus);
  --shadow-primary: var(--page-shadow-primary);
  --radius-xl: var(--page-radius-xl);
  --radius-l: var(--page-radius-l);
  --radius-m: var(--page-radius-m);
  --radius-s: var(--page-radius-s);
  --radius-round: var(--page-radius-round);
}

/* Contrato compartido de formularios: valores efectivos de la base existente. */
@layer tokens {
  :root {
    --field-base-min-height: 50px;
    --field-base-padding: 12px 15px;
    --field-textarea-min-height: 110px;
    --field-hover-border: #cfd9e8;
    --field-focus-ring-width: 4px;
    --field-disabled-bg: #eef3f8;
    --field-choice-size: 20px;
  }
}

/* Valores por defecto del componente de tablas. Densidad y variantes mantienen sus prioridades. */
@layer tokens {
  :root {
    --table-cell-padding: 14px 16px;
    --table-header-text-color: #158c78;
    --table-row-hover-background: rgba(34, 199, 169, 0.045);
  }
}

/* Dimensiones compartidas de acciones en modales. */
@layer tokens {
  :root {
    --modal-action-height: 38px;
    --modal-action-radius: 8px;
  }
}

/* Colores compartidos de acciones deshabilitadas de Servicios. */
@layer tokens {
  :root {
    --service-action-disabled-bg: #94a3b8;
    --service-action-disabled-text: #f1f5f9;
  }
}