/* =========================================================================
   PUENTE: TOKENS -> BOOTSTRAP 5.3
   =========================================================================
   Bootstrap se carga primero, este archivo después.

   ADVERTENCIA IMPORTANTE
   Sobrescribir --bs-primary NO retematiza los botones. En Bootstrap 5.3 el
   color de .btn-primary está fijado al compilar dentro de --bs-btn-bg, y
   --bs-primary solo afecta a utilidades como .text-primary y .bg-primary.

   Como el proyecto no tiene paso de compilación (sin npm, sin Sass), el único
   camino viable es redirigir las variables POR COMPONENTE hacia los tokens.
   Eso es lo que hace este archivo.

   Por eso la versión tiene que ser 5.3 o superior: las variables por componente
   y el atributo data-bs-theme llegaron recién en esa versión. Es un requisito
   duro, no una preferencia.

   El puente funciona por HERENCIA de propiedades personalizadas, no por
   sobrescritura de reglas, así que no hay pelea de especificidad ni hace falta
   una sola declaración !important.
   ========================================================================= */

:root {
  /* ---------- Globales ---------- */
  --bs-primary:            var(--tk-primary);
  --bs-primary-rgb:        var(--tk-primary-rgb);
  --bs-body-bg:            var(--tk-surface);
  --bs-body-color:         var(--tk-text);
  --bs-emphasis-color:     var(--tk-text-strong);
  --bs-secondary-color:    var(--tk-text-muted);
  --bs-tertiary-bg:        var(--tk-surface-sunken);
  --bs-border-color:       var(--tk-border);
  --bs-border-width:       var(--tk-border-width);
  --bs-border-radius:      var(--tk-radius-md);
  --bs-border-radius-sm:   var(--tk-radius-sm);
  --bs-border-radius-lg:   var(--tk-radius-lg);
  --bs-border-radius-pill: var(--tk-radius-pill);

  --bs-body-font-family:   var(--tk-font-body);
  --bs-body-font-size:     var(--tk-fs-base);
  --bs-body-line-height:   var(--tk-lh-base);

  --bs-link-color:         var(--tk-primary-ink);
  --bs-link-color-rgb:     var(--tk-primary-rgb);
  --bs-link-hover-color:   var(--tk-primary-hover);

  --bs-focus-ring-color:   color-mix(in oklab, var(--tk-focus-ring) 25%, transparent);
  --bs-focus-ring-width:   4px;

  --bs-success:            var(--tk-success);
  --bs-danger:             var(--tk-danger);
  --bs-warning:            var(--tk-warning);
  --bs-info:               var(--tk-info);
}

/* ---------- Botones ----------
   Acá está el meollo. Sin estas líneas, cambiar el color de marca no cambia
   un solo botón del sitio. */
.btn-primary {
  --bs-btn-bg:                  var(--tk-primary);
  --bs-btn-border-color:        var(--tk-primary);
  --bs-btn-color:               var(--tk-on-primary);
  --bs-btn-hover-bg:            var(--tk-primary-hover);
  --bs-btn-hover-border-color:  var(--tk-primary-hover);
  --bs-btn-hover-color:         var(--tk-on-primary);
  --bs-btn-active-bg:           var(--tk-primary-active);
  --bs-btn-active-border-color: var(--tk-primary-active);
  --bs-btn-active-color:        var(--tk-on-primary);
  --bs-btn-disabled-bg:         var(--tk-primary-subtle);
  --bs-btn-disabled-border-color: var(--tk-primary-border);
  --bs-btn-disabled-color:      var(--tk-text-disabled);
  --bs-btn-focus-shadow-rgb:    var(--tk-primary-rgb);
  --bs-btn-border-radius:       var(--tk-radius-md);
  --bs-btn-font-weight:         var(--tk-weight-semi);
}

.btn-outline-primary {
  --bs-btn-color:               var(--tk-primary-ink);
  --bs-btn-border-color:        var(--tk-primary);
  --bs-btn-hover-bg:            var(--tk-primary);
  --bs-btn-hover-border-color:  var(--tk-primary);
  --bs-btn-hover-color:         var(--tk-on-primary);
  --bs-btn-active-bg:           var(--tk-primary-active);
  --bs-btn-active-border-color: var(--tk-primary-active);
  --bs-btn-active-color:        var(--tk-on-primary);
  --bs-btn-focus-shadow-rgb:    var(--tk-primary-rgb);
  --bs-btn-border-radius:       var(--tk-radius-md);
  --bs-btn-font-weight:         var(--tk-weight-semi);
}

.btn-secondary {
  --bs-btn-bg:                  var(--tk-surface-inset);
  --bs-btn-border-color:        var(--tk-border-strong);
  --bs-btn-color:               var(--tk-text-strong);
  --bs-btn-hover-bg:            var(--tk-border);
  --bs-btn-hover-border-color:  var(--tk-border-strong);
  --bs-btn-hover-color:         var(--tk-text-strong);
  --bs-btn-border-radius:       var(--tk-radius-md);
}

/* El hover solo puede cambiar la LUMINOSIDAD, nunca el matiz ni el rol.
   El tema viejo tenía un botón que al pasar el mouse quedaba con texto blanco
   sobre fondo casi blanco, y otro rojo que se volvía verde. Los dos venían de
   no tener esta regla. */
.btn-success  { --bs-btn-bg: var(--tk-success); --bs-btn-border-color: var(--tk-success); --bs-btn-color: var(--tk-on-success); }
.btn-danger   { --bs-btn-bg: var(--tk-danger);  --bs-btn-border-color: var(--tk-danger);  --bs-btn-color: var(--tk-on-success); }

/* ---------- Tarjetas ---------- */
.card {
  --bs-card-bg:            var(--tk-surface-raised);
  --bs-card-color:         var(--tk-text);
  --bs-card-border-color:  var(--tk-border);
  --bs-card-border-radius: var(--tk-radius-md);
  --bs-card-cap-bg:        var(--tk-surface-sunken);
}

/* ---------- Formularios ---------- */
.form-control, .form-select {
  --bs-border-radius: var(--tk-radius-sm);
  background-color: var(--tk-surface);
  border-color: var(--tk-border-strong);
  color: var(--tk-text);
}
.form-control::placeholder { color: var(--tk-text-muted); }
.form-control:focus, .form-select:focus {
  border-color: var(--tk-focus-ring);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--tk-focus-ring) 25%, transparent);
}

/* ---------- Navegación, insignias, alertas ---------- */
.nav-link {
  --bs-nav-link-color:       var(--tk-text);
  --bs-nav-link-hover-color: var(--tk-primary-ink);
}
.badge { --bs-badge-border-radius: var(--tk-radius-xs); }

.alert-success { --bs-alert-bg: var(--tk-success-subtle); --bs-alert-border-color: var(--tk-success-border); --bs-alert-color: var(--tk-success); }
.alert-danger  { --bs-alert-bg: var(--tk-danger-subtle);  --bs-alert-border-color: var(--tk-danger-border);  --bs-alert-color: var(--tk-danger); }
.alert-warning { --bs-alert-bg: var(--tk-warning-subtle); --bs-alert-border-color: var(--tk-warning-border); --bs-alert-color: var(--tk-warning); }
.alert-info    { --bs-alert-bg: var(--tk-info-subtle);    --bs-alert-border-color: var(--tk-primary-border); --bs-alert-color: var(--tk-info); }

/* ---------- Paginación, desplegables, ventanas ---------- */
.pagination {
  --bs-pagination-color:             var(--tk-text);
  --bs-pagination-bg:                var(--tk-surface);
  --bs-pagination-border-color:      var(--tk-border);
  --bs-pagination-hover-bg:          var(--tk-surface-inset);
  --bs-pagination-hover-color:       var(--tk-primary-ink);
  --bs-pagination-active-bg:         var(--tk-primary);
  --bs-pagination-active-border-color: var(--tk-primary);
  --bs-pagination-active-color:      var(--tk-on-primary);
  --bs-pagination-disabled-color:    var(--tk-text-disabled);
  --bs-pagination-border-radius:     var(--tk-radius-sm);
}
.dropdown-menu {
  --bs-dropdown-bg:           var(--tk-surface-raised);
  --bs-dropdown-color:        var(--tk-text);
  --bs-dropdown-border-color: var(--tk-border);
  --bs-dropdown-border-radius: var(--tk-radius-md);
  --bs-dropdown-link-hover-bg: var(--tk-surface-inset);
  --bs-dropdown-link-active-bg: var(--tk-primary-subtle);
  --bs-dropdown-link-active-color: var(--tk-primary-ink);
}
.modal-content, .offcanvas {
  --bs-modal-bg: var(--tk-surface-raised);
  --bs-modal-color: var(--tk-text);
  --bs-modal-border-color: var(--tk-border);
  --bs-modal-border-radius: var(--tk-radius-lg);
  --bs-offcanvas-bg: var(--tk-surface-raised);
  --bs-offcanvas-color: var(--tk-text);
  --bs-offcanvas-border-color: var(--tk-border);
}
.toast {
  --bs-toast-bg: var(--tk-surface-raised);
  --bs-toast-color: var(--tk-text);
  --bs-toast-border-color: var(--tk-border);
  --bs-toast-border-radius: var(--tk-radius-md);
}

/* ---------- Foco visible ----------
   Anillo doble: funciona sobre cualquier fondo, incluso sobre el propio primario. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--tk-focus-width) solid var(--tk-focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--tk-focus-ring) 25%, transparent);
}

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