/* Banner de cookies: igualar "Aceptar" y "Rechazar" sin que se descuadre.
 *
 * Tal y como venia de CookieYes, "Aceptar todo" medía 386 px y estaba relleno en
 * dorado, mientras que "Rechazar todo" medía 189 px y era transparente: la mitad
 * de ancho y sin fondo. La AEPD considera patron de diseño engañoso presentar la
 * aceptacion mas destacada que el rechazo; ambas opciones deben estar al mismo
 * nivel en tamaño, color y posicion.
 *
 * CookieYes escribe los colores en el atributo `style` de cada boton, asi que la
 * unica forma de igualarlos desde fuera es con `!important`.
 *
 * QUE FALLABA (23-08-2026)
 *
 * Para igualarlos se usaba `flex: 1 1 0` con `min-width: 0`. Eso reparte la fila
 * a partes iguales, pero `min-width: 0` deja que cada boton quede mas estrecho
 * que su propia etiqueta, y entonces el texto se sale del rectangulo. Dentro de
 * la caja del banner, que en escritorio mide 440 px fijos, los tres botones en
 * fila tocaban a 113 px cuando "Rechazar todo" necesita 143.
 *
 * El `@media (max-width: 600px)` que los apilaba no lo arreglaba, porque miraba
 * el ancho de la PANTALLA y lo que aprieta aqui es el ancho de la CAJA, que es
 * el mismo a 1280 px que a 640. Por eso se veia mal en escritorio igual que en
 * tablet: no era un caso raro, estaba roto en todos los anchos por encima del
 * punto de ruptura.
 *
 * COMO SE ARREGLA
 *
 * Sin ningun punto de ruptura fijo. Los botones se recolocan segun el espacio
 * que de verdad tienen, asi que el mismo CSS vale dentro de la caja de 440 px
 * del escritorio y a pantalla completa en un movil, hoy y si mañana se cambia
 * el ancho del banner desde el panel de CookieYes.
 */

/* La caja nunca mas ancha que la pantalla.
 *
 * A partir de 440 px CookieYes le pone `width: 100%`, y el 100% de un elemento
 * `position: fixed` se mide contra el viewport, que en algunos navegadores
 * incluye la barra de desplazamiento. Cuando pasa eso el banner sobresale unos
 * pixeles y aparece scroll horizontal en toda la web. */
.cky-consent-container,
.cky-modal .cky-preference-center {
	max-width: 100vw !important;
	box-sizing: border-box !important;
}

/* Movil apaisado: el banner puede ser mas alto que la pantalla y dejar los
 * botones fuera, sin forma de llegar a ellos. Que se pueda desplazar por dentro
 * en vez de desbordar. Es un maximo: mientras quepa, no cambia nada. */
.cky-consent-container .cky-consent-bar,
.cky-modal .cky-preference-center {
	max-height: 100vh;
	max-height: 100dvh;
	overflow-y: auto;
}

/* `flex-direction: row` a la fuerza. Por debajo de 440 px CookieYes lo pone en
 * `column`, y en una columna la base de un elemento flexible deja de ser el
 * ancho y pasa a ser el ALTO: los botones salian de 176 px de alto. Aqui el
 * apilado no lo hace la direccion, lo hace el `flex-wrap`, asi que la fila tiene
 * que mandar siempre. */
.cky-notice-btn-wrapper {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
}

/* CookieYes separa los botones con `margin-right`. Con `gap` ya no hace falta, y
 * si se deja descuadra la ultima columna de cada fila. */
.cky-notice-btn-wrapper .cky-btn {
	margin: 0 !important;
	max-width: 100% !important;

	/* Ultima red de seguridad: si alguna vez una etiqueta no cabe ni estando
	 * sola en su fila (un idioma mas largo, un texto reescrito desde el panel),
	 * que parta linea en lugar de salirse del boton. */
	white-space: normal !important;
}

/* Aceptar y rechazar: misma fila, mismo ancho, mismo color.
 *
 * Los dos tienen la misma base (11rem) y el mismo `grow`, asi que acaban
 * exactamente igual de anchos, que es lo que pide la AEPD. Los 11rem son el
 * ancho por debajo del cual las dos ya no caben juntas: a partir de ahi el
 * `flex-wrap` manda cada una a su propia linea y las dos pasan a ocupar todo el
 * ancho, siguiendo iguales entre si.
 *
 * No se pone `min-width: 0`: el valor de fabrica en un elemento flexible es
 * `auto`, que impide encogerlo por debajo de su contenido. Ese es justo el freno
 * que evita el desborde, y ponerlo a cero era la causa del fallo. */
.cky-notice-btn-wrapper .cky-btn-accept,
.cky-notice-btn-wrapper .cky-btn-reject {
	flex: 1 1 11rem !important;
	min-width: auto !important;

	background-color: #b59953 !important;
	border-color: #b59953 !important;
	color: #101010 !important;

	font-weight: 700 !important;
}

.cky-notice-btn-wrapper .cky-btn-accept:hover,
.cky-notice-btn-wrapper .cky-btn-reject:hover {
	background-color: #e7df9f !important;
	border-color: #e7df9f !important;
	color: #101010 !important;
}

/* "Personalizar" no es la alternativa al aceptar, es una tercera via: se queda
 * en segundo plano, pero perfectamente legible. Ocupa su propia fila para no
 * competir por el hueco con los otros dos, que son los que tienen que salir
 * emparejados. Sigue leyendose como secundario porque va sin relleno. */
.cky-notice-btn-wrapper .cky-btn-customize {
	flex: 1 1 100% !important;
	background-color: transparent !important;
	border-color: #b59953 !important;
	color: #e7df9f !important;
}

.cky-notice-btn-wrapper .cky-btn-customize:hover {
	border-color: #e7df9f !important;
	color: #e7df9f !important;
}

/* Foco visible: el banner se puede recorrer con el teclado. */
.cky-notice-btn-wrapper .cky-btn:focus-visible {
	outline: 2px solid #e7df9f !important;
	outline-offset: 2px !important;
}

/* El panel de "Personalizar" tiene sus propios botones, con el mismo problema:
 * en cuanto el panel se estrecha, "Guardar mis preferencias" no cabe. Mismo
 * criterio que arriba. */
.cky-prefrence-btn-wrapper {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
}

.cky-prefrence-btn-wrapper .cky-btn {
	flex: 1 1 11rem !important;
	min-width: auto !important;
	margin: 0 !important;
	max-width: 100% !important;
	white-space: normal !important;
}