:root {
  color-scheme: light;
  --gi-blue-950: #06234a;
  --gi-blue-900: #073763;
  --gi-blue-800: #0a4f93;
  --gi-blue-700: #0f68bf;
  --gi-blue-600: #1683e2;
  --gi-sky-500: #24b6ee;
  --gi-sky-400: #47cdf8;
  --gi-sky-100: #e6f8ff;
  --gi-blue-100: #e7f1ff;
  --gi-blue-50: #f4f9ff;
  --gi-ink: #142033;
  --gi-muted: #667085;
  --gi-line: #dce8f6;
  --gi-bg: #f6fbff;
  --gi-surface: #ffffff;
  --gi-surface-2: #f9fcff;
  --gi-danger: #c24136;
  --gi-danger-soft: #fff0ee;
  --gi-success: #178a4f;
  --gi-success-soft: #e9f8ef;
  --gi-warning: #a86500;
  --gi-warning-soft: #fff6df;
  --shadow-sm: 0 6px 20px rgba(6, 35, 74, .08);
  --shadow-md: 0 18px 42px rgba(6, 35, 74, .12);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --font-sans: "SF Pro Text", "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Roboto, Arial, sans-serif;
  --speed: 180ms;
  --sidebar-width: 286px;
  --border: var(--gi-line);
  --ink: var(--gi-ink);
  --muted: var(--gi-muted);
  --primary: var(--gi-blue-800);
  --sky: var(--gi-sky-500);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================
   EMTEL Design System v2.2.38
   Fuente canonica para tipografias, colores, espacios y tamanos.
   Modificar primero aqui antes de tocar archivos visuales especificos.
   ========================================================== */
:root {
  /* Tipografia */
  --font-display: var(--font-sans);
  --text-xs: .72rem;
  --text-sm: .82rem;
  --text-md: .92rem;
  --text-base: 1rem;
  --text-lg: 1.12rem;
  --text-xl: clamp(1.22rem, 1.4vw, 1.5rem);
  --text-2xl: clamp(1.45rem, 2vw, 2.15rem);
  --text-3xl: clamp(1.8rem, 2.6vw, 2.65rem);
  --leading-tight: 1.12;
  --leading-title: 1.18;
  --leading-body: 1.52;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 900;

  /* Colores semanticos */
  --color-text: var(--gi-ink);
  --color-heading: var(--gi-blue-950);
  --color-muted: var(--gi-muted);
  --color-primary: var(--gi-blue-800);
  --color-primary-strong: var(--gi-blue-900);
  --color-primary-soft: var(--gi-blue-100);
  --color-accent: var(--gi-sky-500);
  --color-border: var(--gi-line);
  --color-border-soft: rgba(148, 163, 184, .22);
  --color-surface: var(--gi-surface);
  --color-surface-soft: #f8fafc;
  --color-surface-blue: var(--gi-blue-50);
  --text: var(--color-text);
  --surface-muted: var(--color-surface-soft);

  /* Espaciado y radios */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --radius-control: 12px;
  --radius-card: 22px;
  --radius-panel: 26px;
  --radius-table: 18px;

  /* Controles */
  --control-height-sm: 38px;
  --control-height-md: 44px;
  --control-height-lg: 50px;
  --control-pad-x: .9rem;
  --control-pad-y: .72rem;

  /* Botones */
  --btn-height-sm: 34px;
  --btn-height-md: 42px;
  --btn-height-lg: 50px;
  --btn-radius: 13px;
  --btn-weight: var(--weight-bold);
  --btn-shadow: 0 12px 24px rgba(15, 104, 191, .18);

  /* Tablas */
  --table-font-size: .84rem;
  --table-header-size: .72rem;
  --table-row-height: 52px;
  --table-cell-y: .72rem;
  --table-cell-x: .82rem;
  --table-header-bg: #f8fafc;
  --table-row-alt: #fbfdff;
  --table-row-hover: #f0f7ff;

  /* Iconografia */
  --icon-size-xs: .9rem;
  --icon-size-sm: 1rem;
  --icon-size-md: 1.15rem;
  --icon-size-lg: 1.35rem;
  --icon-button-size: 38px;
}