/* Selector Blanco / Negro de los kits Ajax propios (respuesta de Teo N7, 02-11-2026).
   Hoja page-only: la cargan /marcas/ajax/ y las cuatro landings de kit (alarma-ajax-*.html); la
   portada no, que no cabe en su presupuesto de peso. Los botones los pinta el build
   (tools/kit_variants.py) con el id y el color de cada variante; src/static/js/kit-color.js cambia la tarjeta al elegir.
   Rejilla: la etiqueta y un botón por color a partes iguales, así cabe en la tarjeta más
   estrecha (las cuatro de /marcas/ajax/ en escritorio) sin partir el grupo en dos líneas. */
.kit-color {
    display: grid; grid-auto-flow: column; grid-template-columns: auto; grid-auto-columns: minmax(0, 1fr);
    align-items: stretch; gap: 8px; max-width: 340px; margin: 0 0 16px;
}
.kit-color-label { align-self: center; color: var(--text-muted); font-size: 13px; font-weight: 700; }
.kit-color-opt {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 6px 10px;
    border: 1.5px solid var(--border); border-radius: 999px;
    background: var(--bg-card); color: var(--text);
    font: inherit; font-size: 14px; font-weight: 600; line-height: 1.15; cursor: pointer;
}
.kit-color-opt[aria-pressed="true"] { border-color: var(--primary); box-shadow: inset 0 0 0 1.5px var(--primary); }
.kit-color-opt:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* La muestra de color, decorativa: la pinta la hoja para no repetir un <span> por botón. */
.kit-color-opt::before { content: ""; flex: none; width: 18px; height: 18px; border: 1px solid rgba(0,0,0,.28); border-radius: 50%; }
.kit-color-opt--blanco::before { background: #fff; }
.kit-color-opt--negro::before { background: #1d2022; }
.kit-color-name { min-width: 0; text-align: left; }
/* «sin sirena», «faltan piezas» o «agotado» bajo el nombre: lo pone kit-oferta.js tras la carga. En
   las tarjetas estrechas de /marcas/ajax/ (dos o cuatro por fila) se parte en dos líneas: el botón
   ya tiene ese alto, para que nada se mueva al aparecer (CLS). */
.kit-color-out { display: block; color: var(--text-muted); font-size: 12px; font-weight: 500; }
@media (min-width: 640px) { .ajax-kit .kit-color-opt { min-height: 58px; } }

/* Cabecera oscura de las landings de kit. */
.hero-kit .kit-color { margin: -8px 0 20px; }
.hero-kit .kit-color-label { color: rgba(255,255,255,.8); }
.hero-kit .kit-color-opt { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.08); color: #fff; }
.hero-kit .kit-color-opt[aria-pressed="true"] { border-color: #8fe3df; box-shadow: inset 0 0 0 1.5px #8fe3df; }
.hero-kit .kit-color-opt:focus-visible { outline-color: #8fe3df; }
.hero-kit .kit-color-opt::before { border-color: rgba(255,255,255,.55); }
.hero-kit .kit-color-out { color: rgba(255,255,255,.72); }