/**
 * Design tokens — KLINEA Portal de Aplicaciones
 * Fuente: Figma «PORTAL-APLICACIONES-KINEA» — paleta brand / gray / semánticos
 * https://www.figma.com/design/1T6nT8w3pHJuRqAimlArMK/PORTAL-APLICACIONES-KINEA
 */

:root {
  /* ─── brand/klinea (primario) — derivado del logo ─── */
  --klinea-50: #f1eeff;
  --klinea-100: #e0d9ff;
  --klinea-200: #c2b3ff;
  --klinea-300: #a38dff;
  --klinea-400: #855fff;
  --klinea-500: #1a00ff; /* BRAND */
  --klinea-600: #1500cc;
  --klinea-700: #100099;
  --klinea-800: #0b0066;
  --klinea-900: #060033;

  /* ─── neutral/gray (escala de grises) ─── */
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;

  /* ─── semánticos (estados §13 PATRONES) ─── */
  --success: #10b981;
  --success-bg: #d1fae5;
  --warning: #f59e0b;
  --warning-bg: #fef3c7;
  --error: #ef4444;
  --error-hover: #dc2626;
  --error-pressed: #b91c1c;
  --error-bg: #fee2e2;
  --info: #3b82f6;
  --info-bg: #dbeafe;

  /* ─── Aliases de aplicación (mapeo a tokens Figma) ─── */
  --kl-primary: var(--klinea-500);
  --kl-primary-hover: var(--klinea-600);
  --kl-primary-pressed: var(--klinea-700);
  --kl-primary-50: var(--klinea-50);
  --kl-primary-100: var(--klinea-100);
  --kl-primary-200: var(--klinea-200);
  --kl-primary-600: var(--klinea-600);
  --kl-on-primary: #ffffff;

  --kl-bg: var(--gray-50);
  --kl-bg-subtle: var(--gray-100);
  --kl-surface: #ffffff;
  --kl-surface-raised: #ffffff;
  --kl-overlay: rgba(15, 23, 42, 0.45);

  --kl-text: var(--gray-900);
  --kl-text-secondary: var(--gray-700);
  --kl-muted: var(--gray-500);
  --kl-text-disabled: var(--gray-400);
  --kl-text-inverse: #ffffff;

  --kl-border: var(--gray-200);
  --kl-border-strong: var(--gray-300);
  --kl-border-focus: var(--klinea-500);

  --kl-success: var(--success);
  --kl-success-bg: var(--success-bg);
  --kl-success-border: #a7f3d0;

  --kl-inactive: var(--gray-500);
  --kl-inactive-bg: var(--gray-100);
  --kl-inactive-border: var(--gray-200);

  --kl-warning: var(--warning);
  --kl-warning-bg: var(--warning-bg);
  --kl-warning-border: #fde68a;

  --kl-danger: var(--error);
  --kl-danger-hover: var(--error-hover);
  --kl-danger-pressed: var(--error-pressed);
  --kl-danger-bg: var(--error-bg);
  --kl-danger-border: #fecaca;
  --kl-on-danger: var(--kl-text-inverse);

  --kl-info: var(--info);
  --kl-info-bg: var(--info-bg);
  --kl-info-border: #bfdbfe;

  --kl-badge-available-bg: var(--success-bg);
  --kl-badge-available-fg: var(--success);
  --kl-badge-inactive-bg: var(--kl-inactive-bg);
  --kl-badge-inactive-fg: var(--gray-600);
  --kl-badge-category-bg: var(--klinea-50);
  --kl-badge-category-fg: var(--klinea-500);

  /* Iconos de aplicación (catálogo / admin) */
  --kl-app-icon-violet-bg: #f3e8ff;
  --kl-app-icon-violet-fg: #7c3aed;
  --kl-app-icon-blue-bg: #dbeafe;
  --kl-app-icon-blue-fg: #2563eb;
  --kl-app-icon-indigo-bg: #e0e7ff;
  --kl-app-icon-indigo-fg: #4f46e5;
  --kl-app-icon-emerald-bg: #d1fae5;
  --kl-app-icon-emerald-fg: #059669;
  --kl-app-icon-amber-bg: #fef3c7;
  --kl-app-icon-amber-fg: #d97706;
  --kl-app-icon-rose-bg: #ffe4e6;
  --kl-app-icon-rose-fg: #e11d48;
  --kl-app-icon-slate-bg: var(--gray-100);
  --kl-app-icon-slate-fg: var(--gray-600);

  /* ─── tipografía — Inter (Figma; pendiente confirmación cliente) ─── */
  --font-family-base: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-family-mono: ui-monospace, "Cascadia Code", "Consolas", monospace;

  /* Display — título principal «Klinea Portal» */
  --type-display-size: 3.5rem; /* 56px */
  --type-display-weight: 700;
  --type-display-line: 1.1;
  --type-display-tracking: -0.02em;

  /* Headings */
  --type-h1-size: 2.5rem; /* 40px */
  --type-h1-weight: 700;
  --type-h1-line: 1.2;

  --type-h2-size: 2rem; /* 32px */
  --type-h2-weight: 700;
  --type-h2-line: 1.25;

  --type-h3-size: 1.5rem; /* 24px */
  --type-h3-weight: 600;
  --type-h3-line: 1.3;

  --type-h4-size: 1.25rem; /* 20px */
  --type-h4-weight: 600;
  --type-h4-line: 1.35;

  /* Body */
  --type-body-l-size: 1rem; /* 16px — párrafos, texto largo */
  --type-body-l-weight: 400;
  --type-body-l-line: 1.5;

  --type-body-m-size: 0.875rem; /* 14px — tablas, formularios */
  --type-body-m-weight: 400;
  --type-body-m-line: 1.5;

  --type-body-s-size: 0.75rem; /* 12px — auxiliar, labels pequeños */
  --type-body-s-weight: 400;
  --type-body-s-line: 1.45;

  /* Caption — microcopy, ayuda contextual */
  --type-caption-size: 0.6875rem; /* 11px */
  --type-caption-weight: 500;
  --type-caption-line: 1.4;

  /* Aliases legacy (--kl-* en app.css) */
  --kl-font-family: var(--font-family-base);
  --kl-font-mono: var(--font-family-mono);
  --kl-font-size-xs: var(--type-caption-size);
  --kl-font-size-sm: var(--type-body-s-size);
  --kl-font-size-base: var(--type-body-m-size);
  --kl-font-size-md: var(--type-body-l-size);
  --kl-font-size-lg: var(--type-h4-size);
  --kl-font-size-xl: var(--type-h2-size);
  --kl-font-size-2xl: var(--type-h1-size);
  --kl-font-weight-regular: 400;
  --kl-font-weight-medium: 500;
  --kl-font-weight-semibold: 600;
  --kl-font-weight-bold: 700;
  --kl-line-height-tight: 1.25;
  --kl-line-height-normal: 1.5;
  --kl-line-height-relaxed: 1.65;
  --kl-letter-spacing-tight: -0.02em;
  --kl-letter-spacing-normal: 0;
  --kl-letter-spacing-wide: 0.04em;

  /* ─── spacing scale (base 4) — paddings, gaps, márgenes ─── */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* ─── border radius — contenedores, cards, inputs, botones ─── */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ─── shadows / elevation ─── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); /* cards */
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08); /* dropdowns, diálogos */
  --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.12); /* modales */
  --shadow-focus: 0 0 0 3px rgba(26, 0, 255, 0.2);
  --shadow-focus-danger: 0 0 0 3px color-mix(in srgb, var(--error) 28%, transparent);

  /* Aliases legacy (--kl-* en app.css) */
  --kl-space-1: var(--space-xxs);
  --kl-space-2: var(--space-xs);
  --kl-space-3: var(--space-sm);
  --kl-space-4: var(--space-md);
  --kl-space-5: 20px;
  --kl-space-6: var(--space-lg);
  --kl-space-8: var(--space-xl);
  --kl-space-10: var(--space-2xl);
  --kl-radius-xs: var(--radius-sm);
  --kl-radius-sm: var(--radius-md);
  --kl-radius: var(--radius-lg);
  --kl-radius-lg: var(--radius-xl);
  --kl-radius-full: var(--radius-full);
  --kl-shadow-xs: var(--shadow-sm);
  --kl-shadow: var(--shadow-sm);
  --kl-shadow-md: var(--shadow-md);
  --kl-shadow-lg: var(--shadow-lg);
  --kl-shadow-focus: var(--shadow-focus);

  /* ─── iconografía — Lucide Icons ─── */
  --icon-stroke: 1.75;
  --icon-color: var(--klinea-500);
  --icon-size-xs: 14px;
  --icon-size-sm: 16px;
  --icon-size-md: 20px;
  --icon-size-lg: 24px;
  --icon-tile-bg: var(--klinea-50);
  --icon-tile-radius: var(--radius-md);

  /* Logo cliente — ratio 545:152 (klinea-logo-new.png) */
  --logo-ratio: 545 / 152;
  --logo-width-header: 136px;
  --logo-width-login: 180px;

  /* ─── Layout ─── */
  --kl-sidebar-width: 240px;
  --kl-topbar-height: 64px;
  --kl-content-max-width: 1280px;
  --kl-offcanvas-width: 600px;

  --kl-transition-fast: 150ms ease;
  --kl-transition-base: 200ms ease;

  /* Legacy */
  --kl-font: var(--kl-font-family);
  --kl-success-fg: var(--kl-success);
  --kl-inactive-fg: var(--kl-inactive);
  --kl-warning-fg: var(--kl-warning);
}

html {
  font-family: var(--font-family-base);
  font-size: 16px;
  color: var(--kl-text);
  -webkit-font-smoothing: antialiased;
}

body {
  font-size: var(--type-body-l-size);
  font-weight: var(--type-body-l-weight);
  line-height: var(--type-body-l-line);
}

/* Escala tipográfica (utilidades) */
.type-display {
  font-size: var(--type-display-size);
  font-weight: var(--type-display-weight);
  line-height: var(--type-display-line);
  letter-spacing: var(--type-display-tracking);
  color: var(--kl-text);
}

.type-h1,
h1.type-h1 {
  font-size: var(--type-h1-size);
  font-weight: var(--type-h1-weight);
  line-height: var(--type-h1-line);
  letter-spacing: var(--kl-letter-spacing-tight);
  color: var(--kl-text);
}

.type-h2,
h2.type-h2 {
  font-size: var(--type-h2-size);
  font-weight: var(--type-h2-weight);
  line-height: var(--type-h2-line);
  color: var(--kl-text);
}

.type-h3,
h3.type-h3 {
  font-size: var(--type-h3-size);
  font-weight: var(--type-h3-weight);
  line-height: var(--type-h3-line);
  color: var(--kl-text);
}

.type-h4,
h4.type-h4 {
  font-size: var(--type-h4-size);
  font-weight: var(--type-h4-weight);
  line-height: var(--type-h4-line);
  color: var(--kl-text);
}

.type-body-l {
  font-size: var(--type-body-l-size);
  font-weight: var(--type-body-l-weight);
  line-height: var(--type-body-l-line);
}

.type-body-m {
  font-size: var(--type-body-m-size);
  font-weight: var(--type-body-m-weight);
  line-height: var(--type-body-m-line);
}

.type-body-s {
  font-size: var(--type-body-s-size);
  font-weight: var(--type-body-s-weight);
  line-height: var(--type-body-s-line);
}

.type-caption {
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-line);
  color: var(--kl-muted);
}

/* Mapeo semántico en vistas sin clases extra */
.page-header h1 {
  font-size: var(--type-h1-size);
  font-weight: var(--type-h1-weight);
  line-height: var(--type-h1-line);
}

.page-header .subtitle {
  font-size: var(--type-body-m-size);
  font-weight: var(--type-body-m-weight);
  line-height: var(--type-body-m-line);
  color: var(--kl-muted);
}

.login-card .h4 {
  font-size: var(--type-h3-size);
  font-weight: var(--type-h3-weight);
}

.kl-table thead th {
  font-size: var(--type-body-s-size);
  font-weight: var(--type-body-s-weight);
}

.kl-table tbody td {
  font-size: var(--type-body-m-size);
}

.form-label {
  font-size: var(--type-body-s-size);
  font-weight: var(--type-body-s-weight);
}

.form-control,
.form-select {
  font-size: var(--type-body-m-size);
}

.admin-sidebar-nav .nav-link {
  font-size: var(--type-body-m-size);
}

.badge-kl-success,
.badge-kl-inactive,
.badge-kl-category {
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
}

/* Lucide — tamaños y color corporativo */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--icon-color);
  vertical-align: middle;
  flex-shrink: 0;
}

.icon svg {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  stroke: currentColor;
}

.icon-xs svg,
svg.lucide.icon-xs {
  width: var(--icon-size-xs) !important;
  height: var(--icon-size-xs) !important;
}

.icon-sm svg,
svg.lucide.icon-sm {
  width: var(--icon-size-sm) !important;
  height: var(--icon-size-sm) !important;
}

.icon-lg svg,
svg.lucide.icon-lg {
  width: var(--icon-size-lg) !important;
  height: var(--icon-size-lg) !important;
}

svg.lucide.icon:not(.icon-xs):not(.icon-sm):not(.icon-lg) {
  width: var(--icon-size-md) !important;
  height: var(--icon-size-md) !important;
}

.icon-muted {
  color: var(--kl-muted);
}

.icon-brand {
  color: var(--kl-primary);
  flex-shrink: 0;
}

.icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--icon-tile-bg);
  border-radius: var(--icon-tile-radius);
  padding: var(--space-sm);
  color: var(--icon-color);
}

.icon-tile svg {
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
}

/* Logo Klinea — PNG oficial (ratio 545:152); no recortar ni recolorear */
.brand-logo-link {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
}

.brand-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

.brand-logo--mono {
  filter: brightness(0) invert(1);
}

/* Topbar catálogo / usuario (altura topbar 64px) */
.brand-logo--header {
  height: 28px;
  width: auto;
  max-height: 28px;
  max-width: min(140px, 42vw);
}

/* Sidebar admin */
.brand-logo--sidebar {
  height: 24px;
  width: auto;
  max-height: 24px;
  max-width: 110px;
}

/* Pantalla login centrada */
.brand-logo--login {
  width: min(var(--logo-width-login), 85vw);
  height: auto;
  max-height: 50px;
}