/*
 * Tema Power (docs/08-estilo-visual.md, EV-04 a EV-06).
 * En prueba: solo aplica en las páginas con <html class="theme-power"> (home y guía de estilos).
 * Bootstrap viene por CDN sin Sass, así que se sobreescriben sus variables CSS (--bs-*).
 * El naranja de marca sobre blanco no llega a 4,5:1: en modo claro, el texto naranja usa
 * la variante oscura y los botones naranjas llevan texto negro.
 */

.theme-power,
.theme-power [data-bs-theme="light"] {
  --pw-orange: #e67817;
  --pw-orange-rgb: 230, 120, 23;
  --pw-orange-hover: #cf6c15;
  --pw-orange-active: #b86012;
  --pw-black: #000;
  --pw-white: #fff;
  --pw-control-checked: #a65611;
  --pw-focus-border: #f2bc8b;
  --pw-focus-shadow: 0 0 0 0.25rem rgb(230 120 23 / 25%);

  --bs-primary: #e67817;
  --bs-primary-rgb: 230, 120, 23;
  --bs-primary-text-emphasis: #8a480e;
  --bs-primary-bg-subtle: #fcf2e8;
  --bs-primary-border-subtle: #f5c9a2;
  --bs-link-color: #a65611;
  --bs-link-color-rgb: 166, 86, 17;
  --bs-link-hover-color: #8a480e;
  --bs-link-hover-color-rgb: 138, 72, 14;
  --bs-focus-ring-color: rgb(230 120 23 / 40%);
}

/* Modo oscuro: grises neutros (sin el tinte azul de Bootstrap), en línea con el negro de marca. */
.theme-power[data-bs-theme="dark"],
.theme-power [data-bs-theme="dark"] {
  --bs-body-bg: #121212;
  --bs-body-bg-rgb: 18, 18, 18;
  --bs-body-color: #e6e6e6;
  --bs-body-color-rgb: 230, 230, 230;
  --bs-emphasis-color: #fff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: #a3a3a3;
  --bs-secondary-color-rgb: 163, 163, 163;
  --bs-secondary-bg: #262626;
  --bs-secondary-bg-rgb: 38, 38, 38;
  --bs-tertiary-bg: #1c1c1c;
  --bs-tertiary-bg-rgb: 28, 28, 28;
  --bs-border-color: #3d3d3d;

  --bs-primary-text-emphasis: #f0ae74;
  --bs-primary-bg-subtle: #2e1805;
  --bs-primary-border-subtle: #8a480e;
  --bs-link-color: #eb9345;
  --bs-link-color-rgb: 235, 147, 69;
  --bs-link-hover-color: #f0ae74;
  --bs-link-hover-color-rgb: 240, 174, 116;
  --pw-focus-border: #b86012;
}

.theme-power .btn-primary {
  --bs-btn-color: #000;
  --bs-btn-bg: var(--pw-orange);
  --bs-btn-border-color: var(--pw-orange);
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: var(--pw-orange-hover);
  --bs-btn-hover-border-color: var(--pw-orange-hover);
  --bs-btn-focus-shadow-rgb: var(--pw-orange-rgb);
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: var(--pw-orange-active);
  --bs-btn-active-border-color: var(--pw-orange-active);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: var(--pw-orange);
  --bs-btn-disabled-border-color: var(--pw-orange);
}

.theme-power .btn-outline-primary {
  --bs-btn-color: var(--bs-link-color);
  --bs-btn-border-color: var(--pw-orange);
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: var(--pw-orange);
  --bs-btn-hover-border-color: var(--pw-orange);
  --bs-btn-focus-shadow-rgb: var(--pw-orange-rgb);
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: var(--pw-orange-hover);
  --bs-btn-active-border-color: var(--pw-orange-hover);
  --bs-btn-disabled-color: var(--bs-link-color);
  --bs-btn-disabled-border-color: var(--pw-orange);
}

.theme-power .form-control:focus,
.theme-power .form-select:focus,
.theme-power .form-check-input:focus {
  border-color: var(--pw-focus-border);
  box-shadow: var(--pw-focus-shadow);
}

.theme-power .form-check-input:checked {
  background-color: var(--pw-control-checked);
  border-color: var(--pw-control-checked);
}

.theme-power .pagination {
  --bs-pagination-focus-box-shadow: var(--pw-focus-shadow);
  --bs-pagination-active-color: #000;
  --bs-pagination-active-bg: var(--pw-orange);
  --bs-pagination-active-border-color: var(--pw-orange);
}

/* Bootstrap pone texto blanco sobre el primario: sobre el naranja no llega a 3:1. */
.theme-power .text-bg-primary {
  color: #000 !important;
}