/* =============================================================
   TOOLTIP
   ============================================================= */


.enlace-texto {
	display: inline-flex;
	align-items: left;
	gap: 0.25rem;

	text-decoration: none !important;
	color: #1B1E24;
	border-block: 1px dashed #4f8cff;
	padding: 0 3px 2px;
	border-left: 1px dashed transparent;
	border-right: 1px dashed transparent;
}

.enlace-texto:hover {
	background-color: #f5f7fb;
	border-left: 1px dashed #4f8cff;
	border-right: 1px dashed #4f8cff;
	color: navy;
}

:root {
	--Desplazar-tooltip: 0px;
	--Altura-flecha: 15px;
	--display-comic-link: '';
}
.comic-link { position: relative; cursor: pointer; }

.comic-link::before {
	display:var(--display-comic-link);
	content: attr(data-tooltip);
	position: absolute;
	
	/* Fallback si calc con variables falla: un valor fijo aproximado */
	bottom: 45px;
	bottom: calc(100% + 15px + var(--Desplazar-tooltip) + var(--Altura-flecha));
	
	left: 50%;
	transform: translateX(-50%) translateY(6px);
	background: #f5f7fb; color: #1e3a8a;
	font-family: "Comic Sans MS", "Comic Neue", cursive;
	
	/* Fallback para clamp() */
	font-size: 1rem;
	font-size: clamp(.9rem, 2vw, 1.1rem); 
	line-height: 1.4;
	padding: 10px 14px;
	border: 3px solid #207332;
	border-radius: 12px;
	box-shadow: 16px 26px 12px rgba(0,0,0,.15);
	width: max-content; 
	
	/* Fallback para min() */
	max-width: 220px;
	max-width: min(220px, 80vw);
	
	white-space: normal; text-align: center;
	opacity: 0; visibility: hidden;
	transition: opacity .18s ease, transform .18s ease;
	pointer-events: none; z-index: 10;
}

.comic-link::after {
	display:var(--display-comic-link);
	content: ""; position: absolute;
	
	/* Fallback si calc con variables falla */
	bottom: 0px;
	bottom: calc(100% + var(--Desplazar-tooltip));
	
	left: 50%;
	transform: translateX(-50%);
	width: 0; height: 0;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	
	/* Fallback para el borde con calc */
	border-top: 33px solid #207332;
	border-top: calc(18px + var(--Altura-flecha)) solid #207332;
	
	opacity: 0; visibility: hidden;
	transition: opacity .18s ease, transform .18s ease;
	pointer-events: none; z-index: 10;
}

/* 1. Regla exclusiva para Hover (Segura para navegadores antiguos) */
.comic-link:hover::before,
.comic-link:hover::after {
	opacity: 1; visibility: visible;
	transform: translateX(-50%) translateY(0);
}

/* 2. Regla separada para Focus (Si el navegador no la entiende, solo ignora esta parte) */
.comic-link:focus-visible::before,
.comic-link:focus-visible::after {
	opacity: 1; visibility: visible;
	transform: translateX(-50%) translateY(0);
}