html[data-theme="blue"]{
  --theme-primary:#0d6efd;
  --theme-primary-dark:#0b5ed7;
  --theme-primary-light:#69adff;
  /* Canal RGB para Bootstrap */
  --theme-primary-rgb: 13,110,253;
}
html[data-theme="purple"]{
  --theme-primary:#6f42c1;
  --theme-primary-dark:#5a32a3;
  --theme-primary-light:#a98eda;
  --theme-primary-rgb: 111,66,193;
}
html[data-theme="teal"]{
  --theme-primary:#20c997;
  --theme-primary-dark:#1aa179;
  --theme-primary-light:#7be3c4;
  --theme-primary-rgb: 32,201,151;
}
html[data-theme="amber"]{
  --theme-primary:#f4b400;
  --theme-primary-dark:#d79d00;
  --theme-primary-light:#ffd45e;
  --theme-primary-rgb: 244,180,0;
}
html[data-theme="gray"]{
  --theme-primary:#6c757d;
  --theme-primary-dark:#545b62;
  --theme-primary-light:#a2a9ae;
  --theme-primary-rgb: 108,117,125;
}
html[data-theme="black"]{
  --theme-primary:#000000;
  --theme-primary-dark:#111111;
  --theme-primary-light:#4d4d4d;
  --theme-primary-rgb: 0,0,0;
}
html[data-theme="red"]{
  --theme-primary:#dc3545;
  --theme-primary-dark:#b02a37;
  --theme-primary-light:#f28b96;
  --theme-primary-rgb: 220,53,69;
}
html[data-theme="emerald"]{
  --theme-primary:#1C542D;
  --theme-primary-dark:#153F24;
  --theme-primary-light:#4FAE77;
  --theme-primary-rgb: 28,84,45;
}
html[data-theme="orange"]{
  --theme-primary:#fd7e14;
  --theme-primary-dark:#d96a10;
  --theme-primary-light:#ffad66;
  --theme-primary-rgb: 253,126,20;
}
html[data-theme="lime"]{
  --theme-primary:#84cc16;
  --theme-primary-dark:#65a30d;
  --theme-primary-light:#a3e635;
  --theme-primary-rgb: 132,204,22;
}
html[data-theme="navy"]{
  --theme-primary:#000080;
  --theme-primary-dark:#00006a;
  --theme-primary-light:#3333aa;
  --theme-primary-rgb: 0,0,128;
}
/* Puente a variables de Bootstrap y tokens de componentes */
html{
  /* Mapear las variables del tema a tokens de Bootstrap.  */
  --bs-primary: var(--theme-primary);
  --bs-primary-rgb: var(--theme-primary-rgb);
  --bs-link-color: var(--theme-primary);
  --bs-link-color-rgb: var(--theme-primary-rgb);
  --bs-link-hover-color: color-mix(in oklab, var(--theme-primary), black 12%);
  --bs-btn-bg: var(--theme-primary);
  --bs-btn-border-color: var(--theme-primary);
  --bs-btn-hover-bg: var(--theme-primary-dark);
  --bs-btn-hover-border-color: var(--theme-primary-dark);
  --bs-focus-ring-color: color-mix(in oklab, var(--theme-primary), white 70%);
}

/* Nota: No imponemos estilos globales de componentes. Bootstrap ya toma
   sus colores desde --bs-primary y --bs-link-color. Esto evita cambios
   visuales inesperados en páginas con estilos personalizados. */