/* Celosía — puente con Bootstrap: variables --bs-* := var(--ce-*) y overrides
   de foco/componentes. Debe cargar DESPUÉS de celosia.css (usa sus tokens) y
   ANTES de site.css (ver inc_menu.php). Detalle y porqués: docs/adr/. */

/* Especificidad (0,4,0): repetir el selector 4 veces gana a Bootstrap sin !important. */
:focus-visible:focus-visible:focus-visible:focus-visible {
  outline: var(--ce-size-focus-ring) solid var(--ce-color-focus-ring);
  outline-offset: 2px;
}

.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--ce-color-semantic-action);
  box-shadow: 0 0 0 var(--ce-size-focus-ring) var(--ce-color-brand-100);
}
.nav-link:focus-visible { box-shadow: none; }
.navbar-toggler:focus { box-shadow: none; }
.carousel-control-prev:focus, .carousel-control-next:focus { box-shadow: none; }

.accordion-button::after {
  background-image: none;
  -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: var(--bs-accordion-btn-icon-width);
  mask-size: var(--bs-accordion-btn-icon-width);
  background-color: var(--ce-color-semantic-text-primary);
}
.accordion-button:not(.collapsed)::after {
  background-color: var(--ce-color-brand-800);
}
/* .form-select conserva el stroke fijo de Bootstrap: mask-image no aísla su icono sin romper el resto del control (probado, no funciona). */

:root {
  --bs-font-sans-serif: var(--ce-font-family-sans);
  --bs-font-monospace: var(--ce-font-family-mono);
  --bs-body-font-size: var(--ce-font-size-md);
  --bs-body-line-height: var(--ce-font-leading-normal);
  --bs-body-color: var(--ce-color-semantic-text-primary);
  --bs-body-color-rgb: var(--ce-color-neutral-900-rgb);
  --bs-body-bg: var(--ce-color-semantic-surface);
  --bs-emphasis-color: var(--ce-color-neutral-900);
  --bs-emphasis-color-rgb: var(--ce-color-neutral-900-rgb);
  --bs-secondary-color: var(--ce-color-semantic-text-secondary);
  --bs-secondary-bg: var(--ce-color-semantic-surface-sunken);
  --bs-tertiary-color: var(--ce-color-semantic-text-secondary);
  --bs-tertiary-bg: var(--ce-color-semantic-surface-sunken);
  --bs-link-color: var(--ce-color-semantic-link);
  --bs-link-color-rgb: var(--ce-color-semantic-link-rgb);
  --bs-link-hover-color: var(--ce-color-semantic-action-hover);
  --bs-link-hover-color-rgb: var(--ce-color-brand-700-rgb);
  --bs-border-color: var(--ce-color-semantic-border);
  --bs-border-color-translucent: var(--ce-color-semantic-border-subtle);
  --bs-border-width: var(--ce-size-border-width);
  --bs-border-radius: var(--ce-size-radius-md);
  --bs-border-radius-sm: var(--ce-size-radius-sm);
  --bs-border-radius-lg: var(--ce-size-radius-md);
  --bs-focus-ring-width: var(--ce-size-focus-ring);
  --bs-focus-ring-opacity: 1;
  --bs-focus-ring-color: var(--ce-color-focus-outer);
  --bs-primary: var(--ce-color-semantic-action);
  --bs-primary-rgb: var(--ce-color-brand-600-rgb);
  --bs-code-color: var(--ce-color-state-danger);
  --bs-highlight-bg: var(--ce-color-focus-inner);
}

.btn-primary {
  --bs-btn-color: var(--ce-color-semantic-text-on-brand);
  --bs-btn-bg: var(--ce-color-semantic-action);
  --bs-btn-border-color: var(--ce-color-semantic-action);
  --bs-btn-hover-color: var(--ce-color-semantic-text-on-brand);
  --bs-btn-hover-bg: var(--ce-color-semantic-action-hover);
  --bs-btn-hover-border-color: var(--ce-color-semantic-action-hover);
  --bs-btn-focus-shadow-rgb: var(--ce-color-brand-600-rgb);
  --bs-btn-active-color: var(--ce-color-semantic-text-on-brand);
  --bs-btn-active-bg: var(--ce-color-brand-800);
  --bs-btn-active-border-color: var(--ce-color-brand-800);
  --bs-btn-disabled-color: var(--ce-color-semantic-text-on-brand);
  --bs-btn-disabled-bg: var(--ce-color-semantic-action);
  --bs-btn-disabled-border-color: var(--ce-color-semantic-action);
}
.btn-outline-primary {
  --bs-btn-color: var(--ce-color-semantic-action);
  --bs-btn-border-color: var(--ce-color-semantic-action);
  --bs-btn-hover-color: var(--ce-color-semantic-text-on-brand);
  --bs-btn-hover-bg: var(--ce-color-semantic-action);
  --bs-btn-hover-border-color: var(--ce-color-semantic-action);
  --bs-btn-focus-shadow-rgb: var(--ce-color-brand-600-rgb);
  --bs-btn-active-color: var(--ce-color-semantic-text-on-brand);
  --bs-btn-active-bg: var(--ce-color-semantic-action);
  --bs-btn-active-border-color: var(--ce-color-semantic-action);
  --bs-btn-disabled-color: var(--ce-color-semantic-action);
}
.btn-secondary {
  --bs-btn-color: var(--ce-color-semantic-text-on-brand);
  --bs-btn-bg: var(--ce-color-neutral-700);
  --bs-btn-border-color: var(--ce-color-neutral-700);
  --bs-btn-hover-color: var(--ce-color-semantic-text-on-brand);
  --bs-btn-hover-bg: var(--ce-color-neutral-800);
  --bs-btn-hover-border-color: var(--ce-color-neutral-800);
  --bs-btn-active-color: var(--ce-color-semantic-text-on-brand);
  --bs-btn-active-bg: var(--ce-color-neutral-800);
  --bs-btn-active-border-color: var(--ce-color-neutral-800);
  --bs-btn-disabled-color: var(--ce-color-semantic-text-on-brand);
  --bs-btn-disabled-bg: var(--ce-color-neutral-700);
  --bs-btn-disabled-border-color: var(--ce-color-neutral-700);
}
.btn-danger {
  /* Usa action-danger (no state-danger): en oscuro necesitan divergir, ver bloque @media más abajo. */
  --bs-btn-color: var(--ce-color-semantic-text-on-brand);
  --bs-btn-bg: var(--ce-color-semantic-action-danger);
  --bs-btn-border-color: var(--ce-color-semantic-action-danger);
  --bs-btn-hover-color: var(--ce-color-semantic-text-on-brand);
  --bs-btn-hover-bg: var(--ce-color-semantic-action-danger);
  --bs-btn-hover-border-color: var(--ce-color-semantic-action-danger);
  --bs-btn-active-color: var(--ce-color-semantic-text-on-brand);
  --bs-btn-active-bg: var(--ce-color-semantic-action-danger);
  --bs-btn-active-border-color: var(--ce-color-semantic-action-danger);
  --bs-btn-disabled-color: var(--ce-color-semantic-text-on-brand);
  --bs-btn-disabled-bg: var(--ce-color-semantic-action-danger);
  --bs-btn-disabled-border-color: var(--ce-color-semantic-action-danger);
}
.btn-link {
  --bs-btn-color: var(--ce-color-semantic-link);
  --bs-btn-hover-color: var(--ce-color-semantic-action-hover);
  --bs-btn-active-color: var(--ce-color-semantic-action-hover);
}
.pagination {
  --bs-pagination-active-bg: var(--ce-color-semantic-action);
  --bs-pagination-active-border-color: var(--ce-color-semantic-action);
  --bs-pagination-focus-box-shadow: 0 0 0 var(--ce-size-focus-ring) var(--ce-color-focus-outer);
}
.accordion {
  --bs-accordion-btn-focus-box-shadow: 0 0 0 var(--ce-size-focus-ring) var(--ce-color-focus-outer);
  --bs-accordion-active-color: var(--ce-color-brand-800);
  --bs-accordion-active-bg: var(--ce-color-brand-50);
}
.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--ce-color-semantic-action);
}
.list-group {
  --bs-list-group-active-bg: var(--ce-color-semantic-action);
  --bs-list-group-active-border-color: var(--ce-color-semantic-action);
}
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--ce-color-semantic-action);
}
.progress {
  --bs-progress-bar-bg: var(--ce-color-semantic-action);
}
.form-check-input:checked {
  background-color: var(--ce-color-semantic-action);
  border-color: var(--ce-color-semantic-action);
}

.btn, .page-link, .form-control, .form-select {
  min-height: var(--ce-size-touch-comfortable);
}

/* No cubre utilidades (.text-primary, .bg-primary-subtle...) ni .alert-*/.badge-*/.table-*: sin uso hoy en public/. */

@media (prefers-color-scheme: dark) {
  .form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: 0 0 0 var(--ce-size-focus-ring) var(--ce-color-brand-700);
  }

  /* action-danger no se aclara en oscuro (a diferencia de state-danger): el botón necesita seguir saturado, así que el texto pasa a blanco explícito aquí. */
  .btn-danger {
    --bs-btn-color: var(--ce-color-neutral-0);
    --bs-btn-hover-color: var(--ce-color-neutral-0);
    --bs-btn-active-color: var(--ce-color-neutral-0);
    --bs-btn-disabled-color: var(--ce-color-neutral-0);
  }

  /* brand-tint es propio de cada preset-*.css (carga antes que este fichero): solo se puede reapuntar aquí, no en celosia.css. */
  :root {
    --ce-color-brand-tint: var(--ce-color-brand-900);
  }
}