/**
 * InfoAsphalt — el enlace «Compartir» del menú de anclas.
 */

/* El item es un botón y no un enlace: sin esto saldría con el relleno, el borde
   y la tipografía del navegador. Lo demás —color, icono, rótulo que se abre— lo
   pone la hoja del nav donde vive, que lo trata como a cualquier otro item.

   Los estados van escritos uno a uno y con `!important` en lo que pinta: el tema
   viste cada `button:hover` con su fondo, su sombra y su borde de botón, y esas
   reglas pesan más que una clase suelta. El color no se toca, que es el que da
   la hoja del nav al pasar por encima. */
.ia-anclas .ia-ancla--compartir,
.iat-anclas .iat-ancla--compartir,
.ia-anclas .ia-ancla--compartir:hover,
.iat-anclas .iat-ancla--compartir:hover,
.ia-anclas .ia-ancla--compartir:focus,
.iat-anclas .iat-ancla--compartir:focus,
.ia-anclas .ia-ancla--compartir:active,
.iat-anclas .iat-ancla--compartir:active {
	margin: 0;
	padding: 0;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	text-shadow: none;
	font: inherit;
	line-height: inherit;
	cursor: pointer;
	appearance: none;
}

/* El aro de foco sólo con teclado, que es cuando hace falta. */
.ia-anclas .ia-ancla--compartir:focus:not(:focus-visible),
.iat-anclas .iat-ancla--compartir:focus:not(:focus-visible) {
	outline: 0;
}

/* El nav que se monta cuando la página no lleva ninguno. En lugar de empujar el
   contenido hacia abajo para hacerse sitio, se mete en el hueco que sube: su
   alto —3,1rem— se lo devuelve a lo de abajo con un margen negativo, igual que
   hace la ficha de coche. Así la página no se mueve al cargar el script. */
.ia-anclas.ia-anclas--solo {
	margin-bottom: -3.1rem;
	margin-right: 1rem;
}

/* El panel de qué compartir y a dónde. Cuelga del propio menú de anclas —el
   script lo mete dentro— y se abre justo debajo, pegado a su borde derecho: el
   botón de compartir es siempre el último, así que es de donde sale. Al estar
   dentro del menú, que es `sticky`, lo acompaña mientras se desplaza la
   página.

   Vive dentro de una plantilla, y las plantillas ponen a cero los márgenes, los
   rellenos y los párrafos de todo lo que llevan dentro. Por eso cada regla se
   escribe con el atributo del panel delante —pesa más que cualquier reseteo de
   una plantilla— y dice todo lo que le importa, sin fiarse de lo heredado. */
.ia-compartir-panel[data-ia-compartir-panel] {
	position: absolute;
	z-index: 30;
	top: calc( 100% + .5rem );
	right: 0;
	box-sizing: border-box;
	width: max-content;
	min-width: min( 240px, calc( 100vw - 2rem ) );
	max-width: min( 320px, calc( 100vw - 2rem ) );
	margin: 0;
	padding: 1rem;
	border: 1px solid rgba( 220, 132, 255, .25 );
	border-radius: 14px;
	background: #17001d;
	color: #fff;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	box-shadow: 0 12px 28px rgba( 0, 0, 0, .45 );
}

.ia-compartir-panel[data-ia-compartir-panel][hidden] {
	display: none;
}

/* En el móvil, centrado bajo el menú y a su mismo ancho. Con un menú más
   estrecho que el panel —el de un solo botón— el panel no baja de lo que
   necesita para leerse, y se centra igualmente. */
@media ( max-width: 600px ) {
	.ia-compartir-panel[data-ia-compartir-panel] {
		right: auto;
		left: 50%;
		width: max( 100%, 240px );
		max-width: calc( 100vw - 2rem );
		transform: translateX( -50% );
	}
}

.ia-compartir-panel[data-ia-compartir-panel] .ia-compartir-panel__titulo {
	margin: 0 0 .75rem;
	padding: 0;
	color: #fff;
	font-size: .8rem;
	font-weight: 900;
	line-height: 1.3;
	text-transform: uppercase;
}

.ia-compartir-panel[data-ia-compartir-panel] .ia-compartir-panel__elegido {
	margin: 0 0 .6rem;
	padding: 0;
	color: #dc84ff;
	font-size: .75rem;
	font-weight: 700;
	line-height: 1.3;
	text-transform: none;
}

.ia-compartir-panel[data-ia-compartir-panel] .ia-compartir-panel__aviso {
	margin: .6rem 0 0;
	padding: 0;
	color: #dc84ff;
	font-size: .75rem;
	font-weight: 400;
	line-height: 1.3;
	text-transform: none;
}

/* Primer paso: lo que se puede compartir. */
.ia-compartir-panel[data-ia-compartir-panel] .ia-compartir-panel__opciones {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	margin: 0;
	padding: 0;
}

.ia-compartir-panel[data-ia-compartir-panel] .ia-compartir-panel__opcion {
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: .5rem .8rem;
	border: 1px solid rgba( 220, 132, 255, .25 );
	border-radius: 10px;
	background: transparent;
	box-shadow: none;
	color: #fff;
	font: inherit;
	font-size: .8rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	cursor: pointer;
}

/* Segundo paso: a dónde. */
.ia-compartir-panel[data-ia-compartir-panel] .ia-compartir-panel__destinos {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0;
	padding: 0;
}

.ia-compartir-panel[data-ia-compartir-panel] .ia-compartir-panel__destino {
	display: inline-block;
	margin: 0;
	padding: .45rem .8rem;
	border: 1px solid rgba( 220, 132, 255, .25 );
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	color: #fff;
	font: inherit;
	font-size: .78rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: normal;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
}

.ia-compartir-panel[data-ia-compartir-panel] .ia-compartir-panel__opcion:hover,
.ia-compartir-panel[data-ia-compartir-panel] .ia-compartir-panel__opcion:focus-visible,
.ia-compartir-panel[data-ia-compartir-panel] .ia-compartir-panel__destino:hover,
.ia-compartir-panel[data-ia-compartir-panel] .ia-compartir-panel__destino:focus-visible {
	border-color: #d355ff;
	background: rgba( 211, 85, 255, .15 );
	box-shadow: none;
	color: #fff;
}

.ia-compartir-panel[data-ia-compartir-panel] .ia-compartir-panel__volver {
	display: inline-block;
	margin: .6rem 0 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: #dc84ff;
	font: inherit;
	font-size: .75rem;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
}

/* Tercer paso: la imagen. */
.ia-compartir-panel[data-ia-compartir-panel] .ia-compartir-panel__vista {
	display: block;
	max-width: 100%;
	max-height: 220px;
	margin: 0 0 .6rem;
	padding: 0;
	border: 1px solid rgba( 220, 132, 255, .25 );
	border-radius: 8px;
	object-fit: contain;
}

.ia-compartir-panel[data-ia-compartir-panel] [hidden] {
	display: none;
}

/* El mensaje de «Enlace copiado al portapapeles». Sale abajo y centrado, un
   momento, y se va solo. Cuelga del `body`, fuera de cualquier plantilla. */
.ia-compartir-toast[data-ia-compartir-toast] {
	position: fixed;
	z-index: 100000;
	left: 50%;
	bottom: 1.5rem;
	box-sizing: border-box;
	max-width: calc( 100vw - 2rem );
	margin: 0;
	padding: .65rem 1.2rem;
	border: 1px solid rgba( 220, 132, 255, .35 );
	border-radius: 999px;
	background: #17001d;
	color: #fff;
	font-size: .85rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	box-shadow: 0 12px 28px rgba( 0, 0, 0, .45 );
	opacity: 0;
	pointer-events: none;
	transform: translate( -50%, .75rem );
	transition: opacity .25s ease, transform .25s ease;
}

.ia-compartir-toast[data-ia-compartir-toast].is-visible {
	opacity: 1;
	transform: translate( -50%, 0 );
}

@media ( prefers-reduced-motion: reduce ) {
	.ia-compartir-toast[data-ia-compartir-toast] {
		transition: none;
	}
}