/* Celosía — puente con Bootstrap (Fase B, Tarea 2.3: solo la sección de foco).
La sección de variables --bs-* := var(--ce-*) y los grupos de componentes
con literales (botones, paginación, acordeón...) llegan en la Tarea 4b,
que hace crecer este mismo fichero. No tocar ese orden: el , checkbox/radio, el botón de menú y los controles
del carrusel. No es un fallo WCAG (2.4.7/2.4.11 hablan de foco de
teclado), pero es azul de Bootstrap de fábrica en un sitio verde, así
que se cierra también. Los campos de texto siempre cumplen
:focus-visible con clic de ratón, así que la regla de arriba ya los
cubre; esta sección es solo para los elementos que no. */
.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; }
/* Tarea 3 (spike R3): icono chevron del acordeón, re-autorado como
mask-image + background-color en lugar del stroke hexadecimal fijo de
Bootstrap (%23212529 cerrado, %23052c65 abierto — ninguno de los dos
puede referenciar un token --ce-*). Verificado con Playwright/Edge real
contra .claude/celosia — no solo en teoría: la forma exacta del chevron
se conserva, la rotación heredada de --bs-accordion-btn-icon-transform
sigue funcionando (mask-image no toca transform), y el color procede de
background-color, que SÍ puede ser un var(--ce-*) por preset.
Funciona aquí porque .accordion-button::after es un pseudo-elemento
dedicado cuyo único contenido visual ES el icono (sin texto, sin fondo
propio que proteger) — mask-image reduce su caja a la silueta con
seguridad. Ver más abajo por qué esta misma técnica NO se extiende al
icono de .form-select. */
.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);
}
/* Tarea 3 (spike R3): fallback deliberado y documentado para
--bs-form-select-bg-img (stroke fijo %23343a40, la variante
[data-bs-theme=dark] con %23dee2e6 es inerte porque este sitio nunca
pone data-bs-theme). Se probó activamente la misma técnica de máscara
sobre .form-select y NO funciona: a diferencia del acordeón, el icono
de es una de las DOS capas de background-image del propio
elemento (la otra es su superficie real, background-color: var(--bs-body-bg)
más borde y texto de la opción). mask-image no puede aislar una sola
capa de background — enmascara TODA la caja del elemento, así que el
control entero (borde, fondo, texto de la opción) desaparece y solo
queda visible el pequeño recorte del chevron. Confirmado visualmente
con Playwright: con mask-image en .form-select, "Opción A" y el borde
dejan de renderizarse por completo. Arreglarlo requeriría envolver el
en un contenedor con un pseudo-elemento propio — cambio de
marcado explícitamente fuera de alcance en este cambio (no hay
migración a componentes .ce-* en esta fase). Por eso el icono de
.form-select se deja con el stroke literal de Bootstrap sin tocar; es
una desviación deliberada de la regla dura 1 ("nada de valores
literales"), documentada aquí y en apply-progress, no un hueco
silencioso. */
/* ============================================================
Tarea 4b — el puente: --bs-* := var(--ce-*) (design §1a/§1b/§1c)
Toda la tabla de abajo se verificó línea a línea contra el fichero
vendored real public/assets/vendor/bootstrap/css/bootstrap.min.css
(v5.3.8) en esta misma sesión, no de memoria ni del documento de
diseño a ciegas. Debe ir DESPUÉS del