/*
 * Portes no incluidos (inc/portes.php): el aviso y su ventana.
 *
 * - El aviso es un enlace de texto pequeño, sin caja: gris, subrayado fino y el icono «i» de
 *   Themify detrás, como «Guardar en una lista» de la ficha. El icono va fuera del flujo para
 *   que el subrayado se quede en el texto. Es un <button>: el kit del tema pisa todos los
 *   botones (píldora, texto blanco, rosa al foco) y Sils Addons los reinicia dentro del
 *   resumen de la ficha con peso 0,2,1; por eso sus estados van aquí con peso 0,3,0.
 * - La ventana: velo, caja blanca de esquinas rectas con línea fina, título, texto y la equis.
 *   Entra y sale con un fundido de 0,2 s.
 * - Las medidas van con las variables del sistema también en las páginas de CheckoutWC: allí
 *   quita las hojas de Bricks, pero no su estilo en línea, que trae las variables y deja la
 *   raíz a 10 px como en el resto de la web (medido el 19-oct-2026 en el pago).
 */

/* ── El aviso ────────────────────────────────────────────────────────────── */

.sils-portes.sils-portes[data-sils-portes],
.sils-portes.sils-portes[data-sils-portes]:focus,
.sils-portes.sils-portes[data-sils-portes]:active {
	position: relative;
	display: inline-block;
	width: auto;
	min-width: 0;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0 1.45em 0 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--sils-secundario);
	font-family: var(--sils-fuente-thoren);
	font-size: var(--sils-txt-3xs);
	font-weight: 300;
	line-height: 1.4;
	letter-spacing: 0.1em;
	text-align: inherit;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}

.sils-portes.sils-portes[data-sils-portes]:hover,
.sils-portes.sils-portes[data-sils-portes]:focus-visible {
	background: transparent;
	color: var(--sils-texto);
}

.sils-portes.sils-portes[data-sils-portes]:focus:not(:focus-visible) {
	outline: none;
}

.sils-portes.sils-portes[data-sils-portes]:focus-visible {
	outline: 1px solid var(--sils-texto);
	outline-offset: 0.2em;
}

/* El subrayado, solo en el texto: el icono va fuera del flujo, a la derecha. */
.sils-portes.sils-portes[data-sils-portes] {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

.sils-portes .ti-info-alt {
	position: absolute;
	top: 50%;
	right: 0;
	font-size: 1.05em;
	line-height: 1;
	transform: translateY(-50%);
}

/* Carrito de WooCommerce: la línea de envío solo lleva el aviso (sin «Enviando a…»). */
.woocommerce-shipping-totals .woocommerce-shipping-destination {
	display: none;
}

/* ── La ventana ──────────────────────────────────────────────────────────── */

html.sils-portes-abierta {
	overflow: hidden;
}

.sils-portes-ventana {
	position: fixed;
	inset: 0;
	z-index: 1000000; /* sobre el carrito lateral de CheckoutWC (999999) */
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: var(--sils-margen-seguridad);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.sils-portes-ventana[hidden] {
	display: none;
}

.sils-portes-ventana.is-abierta {
	opacity: 1;
}

.sils-portes-ventana__velo {
	position: absolute;
	inset: 0;
	background-color: color-mix(in srgb, var(--sils-texto) 50%, transparent);
}

.sils-portes-ventana__caja {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 44rem;
	max-height: 100%;
	overflow-y: auto;
	padding: var(--sils-esp-l) var(--sils-esp-m) var(--sils-esp-m);
	border: 1px solid var(--sils-linea);
	border-radius: 0;
	background-color: var(--sils-blanco);
	color: var(--sils-texto);
	font-family: var(--sils-fuente-thoren);
	text-align: left;
	transform: translateY(0.8rem);
	transition: transform 0.2s ease-out;
}

.sils-portes-ventana.is-abierta .sils-portes-ventana__caja {
	transform: none;
}

.sils-portes-ventana__caja:focus {
	outline: none;
}

.sils-portes-ventana .sils-portes-ventana__titulo {
	margin: 0 0 var(--sils-esp-xs);
	padding: 0 var(--sils-esp-l) 0 0;
	color: var(--sils-principal);
	font-family: var(--sils-fuente-thoren);
	font-size: var(--sils-txt-l);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.05rem;
	text-transform: uppercase;
}

.sils-portes-ventana .sils-portes-ventana__texto {
	color: var(--sils-texto);
	font-family: var(--sils-fuente-thoren);
	font-size: var(--sils-txt-2xs);
	font-weight: 300;
	line-height: 1.6;
	letter-spacing: var(--sils-ls-texto, 0.12rem);
}

.sils-portes-ventana .sils-portes-ventana__texto p {
	margin: 0 0 var(--sils-esp-2xs);
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
}

.sils-portes-ventana .sils-portes-ventana__texto p:last-child {
	margin-bottom: 0;
}

.sils-portes-ventana .sils-portes-ventana__texto a {
	color: var(--sils-principal);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

/* La equis: sin caja, gris, a 44 px de lado para el dedo. */
.sils-portes-ventana .sils-portes-ventana__cerrar,
.sils-portes-ventana .sils-portes-ventana__cerrar:focus,
.sils-portes-ventana .sils-portes-ventana__cerrar:active {
	position: absolute;
	top: 0.8rem;
	right: 0.8rem;
	display: grid;
	place-items: center;
	width: 4.4rem;
	height: 4.4rem;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--sils-secundario);
	font-size: var(--sils-txt-2xs, 1.4rem);
	line-height: 1;
	cursor: pointer;
	transition: color 0.2s ease;
}

.sils-portes-ventana .sils-portes-ventana__cerrar:hover,
.sils-portes-ventana .sils-portes-ventana__cerrar:focus-visible {
	background: transparent;
	color: var(--sils-texto);
}

.sils-portes-ventana .sils-portes-ventana__cerrar:focus:not(:focus-visible) {
	outline: none;
}

.sils-portes-ventana .sils-portes-ventana__cerrar:focus-visible {
	outline: 1px solid var(--sils-texto);
	outline-offset: -0.4rem;
}

@media (prefers-reduced-motion: reduce) {
	.sils-portes-ventana,
	.sils-portes-ventana__caja,
	.sils-portes.sils-portes[data-sils-portes] {
		transition: none;
	}
}

/* ── Totales del pago (CheckoutWC) ────────────────────────────────────────
   CheckoutWC da a los botones de sus totales el color de sus botones secundarios con
   !important: el aviso, con el suyo. */

.cfw-totals-list .sils-portes.sils-portes[data-sils-portes] {
	color: var(--sils-secundario) !important;
}

.cfw-totals-list .sils-portes.sils-portes[data-sils-portes]:hover,
.cfw-totals-list .sils-portes.sils-portes[data-sils-portes]:focus-visible {
	color: var(--sils-texto) !important;
}