/*  Los tres botones de NIVEL DE EXPERIENCIA del listado (modulos/niveles_listado/).
    Doc: docs/proyectos/NIVELES_EN_EL_LISTADO_2026-09-17.md · Boceto: docs/niveles_colores.jpg

    🔑 Los colores son los MISMOS de la ficha (.nivel-badge.nivel1|2|3 en css/style.css):
       Iniciación --color-verde · Medio --color-amarillo · Avanzado --color-fucsia. Se leen las
       variables; el valor detrás del coma es sólo el respaldo si alguna faltara.

    ⚠️ El texto va en BLANCO por decisión del dueño (2026-09-18). Antes iba en oscuro (#14202b),
       que pasa de 9:1 de contraste en los tres colores. En blanco, medido en navegador sobre los
       colores reales: verde 2,2:1 · amarillo (#ffb71b) 1,7:1 · fucsia 3,4:1 — los tres por debajo
       del 4,5:1 de WCAG AA. Si algún día se quiere recuperar la legibilidad sin perder el blanco,
       lo que habría que tocar es el amarillo, no este color.
       El estado APAGADO (.vv-niv-off) sigue en oscuro (#524b4b): su fondo es gris claro.

    ⚠️ Va EN LÍNEA (vv_niveles_css()), fuera del compilado de megaMetatags. */

.vv-niveles{
	display: flex;
	gap: 8px;
	margin: 0 0 10px 0;
}
/*  Son `<button class="cE">`, no enlaces (decisión del dueño: cero URL filtradas para Google).
    Por eso hay que apagarles el aspecto de botón del navegador —iOS les pone el suyo— y heredar
    la tipografía, que un <button> no hereda. */
.vv-niv{
	flex: 1 1 0;
	min-width: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 8px;
	/*  🔑 `margin-bottom: 0` (dueño, 2026-09-18, en TODOS los anchos): son `<button>`, y la regla
	    global de la linea 135 de css/style.css (`… input, button, select, textarea`) le pone 24 px
	    de hueco por debajo a todo boton. Bajo los tres niveles habia 34 px —esos 24 mas los 10 de
	    `.vv-niveles`—, no 10. Quien quite esta linea devuelve el hueco sin que nada de aqui cambie. */
	margin-bottom: 0;
	border: 2px solid transparent;
	border-radius: 10px;
	background-color: var(--vv-niv-c);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.15;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.vv-niv:hover,
.vv-niv:focus{
	color: #fff;
	text-decoration: none;
	filter: brightness(1.05);
}
.vv-niv1{ --vv-niv-c: var(--color-verde, #45c2b1); }
.vv-niv2{ --vv-niv-c: var(--color-amarillo, #ffb71b); }
.vv-niv3{ --vv-niv-c: var(--color-fucsia, #f04d98); }

.vv-niv-ico{
	flex: 0 0 auto;
	font-size: 12px;
	letter-spacing: -2px;
	opacity: .65;
}
.vv-niv-txt{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/*  El número de productos de ese nivel, detrás de la palabra y más flojo que ella: es un dato de
    apoyo, no un rótulo.
    🔴 `flex: 0 0 auto` y FUERA de .vv-niv-txt: si viajara dentro, cuando el botón se queda corto
       el recorte se lo come a él y el botón enseña un número falso («Iniciación 128…» por 1280).
       Así el que se acorta es el nombre y la cifra sale entera siempre. */
.vv-niv-n{
	flex: 0 0 auto;
	font-weight: 100;
	font-size: 12px;
}

/*  PULSADO: NADA. El botón del nivel que está puesto se queda exactamente igual que sin filtrar
    (dueño, 2026-09-19: *«vamos a anular que se vea marcado el botón de nivel si lo
    han pulsado, se queda normal el pulsado, sin X»*). Antes llevaba marco oscuro, relieve y una ✕;
    quien suelta ahora el filtro es la etiqueta gris con ✕ que sale JUSTO DEBAJO, junto a las de
    las demás especificaciones (modulos/filtros_aplicados).

    🔑 La clase `.vv-niv-on` SE SIGUE ESCRIBIENDO en el HTML aunque no pinte nada: es el estado
       (va con `aria-pressed="true"`) y de él cuelga el QA. No se le pone regla a propósito.

    Lo que dice cuál está puesto son los OTROS DOS: se apagan en gris y medio transparentes, así
    que de un vistazo sólo hay uno «encendido». */
.vv-niv-off{
	background-color: #e7e7e7;
	border-color: var(--vv-niv-c);
	color: #524b4b;
	font-weight: 400;
	opacity: .4;
}
/*  🔴 El apagado también al pasar por encima. `.vv-niv:hover` le pone `color: #fff`, y gana por
    especificidad (0,2,0 contra 0,1,0): sobre el gris claro el texto se quedaba casi invisible
    justo al apuntarlo con el ratón. Pasaba ya con el fondo blanco de antes. */
.vv-niv-off:hover,
.vv-niv-off:focus{
	color: #524b4b;
}
.vv-niv-off .vv-niv-ico{
	color: var(--vv-niv-c);
	opacity: 1;
}

/*  SIN PRODUCTOS: gris clarito, como desactivado (dueño, 2026-09-18).
    Sale cuando ese nivel no tiene ni un producto en el listado tal y como está filtrado; el PHP
    le quita ademas la clase `cE` y la URL, y le pone `disabled`, así que no navega a ninguna
    parte ni con ratón ni con teclado. Va DESPUÉS de .vv-niv-off a propósito: aunque nunca
    coinciden (el vacío sólo se pinta sin ningún nivel pulsado), si algún día coincidieran manda
    el gris. Contraste medido del texto #8a9199 sobre #f4f5f7: 3,3:1 — por debajo del 4,5:1 de
    WCAG AA, que es lo que se busca en un control apagado y lo que hace `:disabled` el navegador. */
.vv-niv-vacio,
.vv-niv-vacio:hover,
.vv-niv-vacio:focus{
	background-color: #f4f5f7;
	border-color: #e6e9ed;
	color: #8a9199;
	cursor: default;
	filter: none;
	box-shadow: none;
}
.vv-niv-vacio .vv-niv-ico{
	color: #c3c8ce;
	opacity: 1;
}

/*  Por debajo de 992 px las llamas estorban más de lo que aportan y se quitan.
    ⚠️ Medido con el CSS del disco, viendo si el texto se corta (scrollWidth > clientWidth):
       a 390 px «Avanzado» —tres llamas y ocho letras— salía «Avanz…»; a 768 px el botón son
       147 px (el aside ya está a la izquierda) y el pulsado, con su ✕, también se cortaba.
       Apretar letra y llamas no bastaba a 360 px. El nivel ya lo dicen el color y la palabra,
       así que manda la palabra. Desde 992 px el botón pasa de 200 px y vuelven las llamas.
       Comprobado sin recorte y sin desborde en 320, 360, 390, 768 y 1280. */
@media (max-width: 991px){
	.vv-niv-ico{ display: none; }
}
@media (max-width: 480px){
	.vv-niveles{ gap: 6px; }
	/*  ⚠️ Aqui NO va el `margin-bottom: 0`: esta en la regla base, que vale para todos los anchos
	    (dueño, 2026-09-18). Repetirlo aqui no cambiaria nada y daria a entender que es cosa del
	    movil, que es justo lo que se descarto. */
	.vv-niv{
		padding: 10px 4px;
		font-size: 13px;
		gap: 4px;
	}
	/*  El número, un punto más pequeño: medido a 320 px con el peor caso de verdad —«Iniciación»
	    con un contador de cuatro cifras, que es lo que sale en un listado de más de mil— el texto
	    se pasaba 7 px y el navegador cortaba el número («Iniciación 128…»). Con 11 px cabe. */
	.vv-niv-n{ font-size: 11px; }
}