/**
 * Tokens de marca Silerni (alineados con docs/DESIGN.md y silerni-web :root).
 * Cargar después de Bootstrap; tenant_theme puede sobrescribir --primary / --primary-dark.
 */
:root {
  /* Marca */
  --primary: #2c2f74;
  --primary-600: #3d4194;
  --primary-700: #1f2258;
  --primary-50: #eceef9;
  --primary-100: #d9dcf2;
  --primary-dark: #1f2258;
  --accent: #7db8e5;
  --accent-soft: #d4e9f8;
  --accent-deep: #4a86b8;
  /** RGB del acento profundo (utilidades Bootstrap .bg-primary / opacidad) */
  --accent-deep-rgb: 74, 134, 184;

  --ink: #15102e;
  --ink-2: #2e2851;
  --muted: #6f6a8c;
  --line: rgba(44, 47, 116, 0.1);
  --line-strong: rgba(44, 47, 116, 0.18);
  --bg: #fbfaff;
  --paper: #ffffff;
  --paper-2: #f6f4fc;

  /* Superficies hover/active en sidebar (siguen al --primary del tenant) */
  --primary-tint-08: color-mix(in srgb, var(--primary) 8%, white);
  --primary-tint-05: color-mix(in srgb, var(--primary) 5%, white);
  --primary-tint-04: color-mix(in srgb, var(--primary) 4%, white);

  /* Compatibilidad con plantillas que usan nombres legacy del shell */
  --secondary: #6b7280;
  --success: #10b981;
  --danger: #ef4444;
  --warning: #f59e0b;
  --info: #4a86b8;
  --light: var(--paper-2);
  --dark: var(--ink-2);
  --white: #ffffff;

  /* Radios (escala DESIGN) */
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;

  /* Tipografía (misma familia que silerni-web; cargar Poppins en la plantilla) */
  --font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Sombras suaves índigo */
  --shadow-brand-1: 0 1px 0 rgba(44, 47, 116, 0.04), 0 1px 2px rgba(44, 47, 116, 0.06);
  --shadow-brand-2: 0 6px 16px -8px rgba(44, 47, 116, 0.18), 0 2px 6px rgba(44, 47, 116, 0.06);

  /* Puente Bootstrap 5.3 (CDN) */
  --bs-primary: var(--primary);
  --bs-primary-rgb: 44, 47, 116;
  --bs-link-color: var(--primary-600);
  --bs-link-hover-color: var(--primary-700);
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--ink-2);
  --bs-border-color: var(--line);
  --bs-border-radius: 0.5rem;
  --bs-secondary-color: var(--muted);
}

/* Fallback si color-mix no está disponible (tintes con primario por defecto) */
@supports not (background: color-mix(in srgb, red 50%, white)) {
  :root {
    --primary-tint-08: rgba(44, 47, 116, 0.08);
    --primary-tint-05: rgba(44, 47, 116, 0.05);
    --primary-tint-04: rgba(44, 47, 116, 0.04);
  }
}

/**
 * Fondos utilitarios: azul secundario de marca (--accent-deep).
 * --bs-primary (enlaces, outline, etc.) sigue siendo índigo.
 */
.bg-primary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--accent-deep-rgb), var(--bs-bg-opacity, 1)) !important;
}

.text-bg-primary {
  color: #fff !important;
  background-color: rgba(var(--accent-deep-rgb), var(--bs-bg-opacity, 1)) !important;
}

/**
 * Botón sólido principal: base en --accent-deep; hover/active acercan al índigo.
 * Compatible con Bootstrap 5.3 (--bs-btn-* en .btn).
 */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--accent-deep);
  --bs-btn-border-color: var(--accent-deep);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--primary-600);
  --bs-btn-hover-border-color: var(--primary-600);
  --bs-btn-focus-shadow-rgb: 125, 184, 229;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--primary-700);
  --bs-btn-active-border-color: var(--primary-700);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--accent-deep);
  --bs-btn-disabled-border-color: var(--accent-deep);
}