/**
 * Filtro de operadores por registro en el SII — homepage.
 *
 * Las reglas que dependen de la lista de marcas se generan en PHP
 * (gdm_css_filtro_licencias) para no duplicar la clasificación en dos sitios.
 * Aquí va sólo lo que no cambia con la lista.
 */

/* ---------- Barra de filtros ---------- */

.gdm-filtro {
	margin: 0 0 28px;
}

.gdm-filtro__botones {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* El estado normal es el de papel blanco, y el oscuro se declara aparte bajo el atributo
   del plugin. Estaba al revés —blanco translúcido de base y un `prefers-color-scheme:
   light` para recuperarlo—, y ese media query mira al sistema operativo, no al interruptor
   del sitio: con el sistema en oscuro y el sitio en claro no se aplicaba, y los botones se
   quedaban con filo blanco sobre fondo blanco, es decir sin filo. */
.gdm-filtro__btn {
	appearance: none;
	border: 1px solid rgba(0, 0, 0, .18);
	background: rgba(0, 0, 0, .03);
	color: inherit;
	font: inherit;
	font-size: 15px;
	line-height: 1.2;
	padding: 11px 18px;
	border-radius: 999px;
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.gdm-filtro__btn:hover,
.gdm-filtro__btn:focus-visible {
	background: rgba(0, 0, 0, .07);
	border-color: rgba(0, 0, 0, .32);
}

html[data-wp-dark-mode-active] .gdm-filtro__btn {
	border-color: rgba(255, 255, 255, .22);
	background: rgba(255, 255, 255, .05);
}

html[data-wp-dark-mode-active] .gdm-filtro__btn:hover,
html[data-wp-dark-mode-active] .gdm-filtro__btn:focus-visible {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .4);
}

.gdm-filtro__btn[aria-pressed="true"] {
	background: #318f57;
	border-color: #318f57;
	color: #fff;
	font-weight: 600;
}

.gdm-filtro__btn .gdm-filtro__n {
	opacity: .7;
	margin-left: 6px;
	font-size: .9em;
}

/* Secundario por color, no por opacidad. Con `opacity: .72` el texto se aclaraba contra el
   fondo gris de la caja del filtro y caía a 3,2:1 —es el párrafo que explica por qué
   clasificamos por el SII, o sea justo el que no conviene que se pierda—. La variable ya
   está calibrada para los dos modos y aquí da 5,9:1. */
.gdm-filtro__nota {
	margin: 14px 0 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--gdm-tenue, rgba(18, 32, 48, .70));
	max-width: 78ch;
}

.gdm-filtro__vacio {
	margin: 24px 0;
	font-size: 15px;
	opacity: .8;
}

/* ---------- Distintivos por fila ---------- */

/* Se inserta justo debajo del nombre del operador, encima de las estrellas.
   La columna mide unos 146 px en escritorio: el bloque se limita a ese ancho
   para no montarse sobre la columna de características. */
.gdm-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	box-sizing: border-box;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.3;
	padding: 4px 9px;
	border-radius: 999px;
	white-space: normal;
	letter-spacing: .01em;
}

/* Los tres colores de texto se eligieron sobre papel blanco y aquí van sobre el relleno
   tintado de la propia píldora, que sube el fondo y se come el contraste: daban 3,46:1,
   4,41:1 y 3,68:1 sobre su propio fondo, los tres por debajo del mínimo legible. Se
   oscurecen sólo en modo claro; las variantes oscuras están más abajo y no cambian. */

.gdm-badge--si {
	background: rgba(49, 143, 87, .16);
	color: #1c6b3d;
	border: 1px solid rgba(49, 143, 87, .38);
}

.gdm-badge--no {
	background: rgba(120, 120, 120, .14);
	color: #585858;
	border: 1px solid rgba(120, 120, 120, .32);
}

.gdm-badge--ret {
	background: rgba(190, 90, 40, .14);
	color: #8a4718;
	border: 1px solid rgba(190, 90, 40, .34);
}

/* ---------- Cinta de estado ----------
 *
 * Última línea de la tarjeta, a lo ancho completo. Es el ÚNICO sitio de la fila
 * donde se puede añadir contenido sin romper nada, y conviene no olvidar por qué:
 *
 *   · las columnas interiores de Bricks tienen altura fija (98 px) o son columnas
 *     flex con `flex-wrap:wrap`, donde lo que no cabe salta de lado en vez de
 *     seguir hacia abajo — y descuadra la fila entera;
 *   · la fila, en cambio, es un flex horizontal con wrap, así que un hijo con
 *     `flex-basis:100%` cae en una línea propia y deja las columnas intactas.
 *
 * La lleva toda fila, inscrita o no, para que la tabla mantenga un único ritmo
 * vertical y ninguna fila parezca rota al lado de las demás.
 */
.gdm-fila-nota {
	flex: 0 0 100%;
	width: 100%;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 7px 12px;
	border-radius: 8px;
	font-size: 12.5px;
	line-height: 1.45;
}

.gdm-fila-nota__txt {
	flex: 1 1 240px;
	min-width: 0;
}

/* Mismo verde que la píldora: a 4,6:1 se quedaba justo en el borde del mínimo, y esta
   cinta es texto corrido y largo, no una etiqueta de dos palabras. */
.gdm-fila-nota--si {
	background: rgba(49, 143, 87, .08);
	color: #1c6b3d;
}

.gdm-fila-nota--no {
	background: rgba(120, 120, 120, .09);
	color: #61656d;
}

.gdm-fila-nota--ret {
	background: rgba(190, 90, 40, .08);
	color: #8a5227;
}

/* Bajo el atributo del plugin, no bajo `prefers-color-scheme`: el modo lo manda el
   interruptor del sitio, no la preferencia del sistema operativo. */
html[data-wp-dark-mode-active] .gdm-fila-nota--si {
	color: #6cc48c;
}

html[data-wp-dark-mode-active] .gdm-fila-nota--no {
	color: #a6abb4;
}

html[data-wp-dark-mode-active] .gdm-fila-nota--ret {
	color: #d59158;
}

/* ---------- Atenuación de las no recomendadas ----------
 *
 * El atenuado NO se define aquí: se genera en PHP (gdm_css_filtro_licencias)
 * como una regla de atributo con la lista de inscritos negada. Así el efecto
 * funciona aunque el JS no llegue a ejecutarse, y la clasificación vive en un
 * único sitio en vez de duplicarse entre PHP y CSS.
 */

.gdm-oculto {
	display: none !important;
}

/* Quien haya pedido menos movimiento no necesita la transición. */
@media (prefers-reduced-motion: reduce) {
	.table-wrapper[brand] .brand-img,
	.gdm-filtro__btn {
		transition: none;
	}
}