/**
 * Estilos del pie de imagen "generada por IA".
 * Discretos y neutros para integrarse con cualquier tema.
 */

.reglia-figure {
	margin: 0 0 1em;
	display: table;
	max-width: 100%;
}

.reglia-caption,
.reglia-disclosure {
	font-size: 0.8125em;
	line-height: 1.4;
	color: #6b7280;
	font-style: normal;
}

.reglia-caption {
	display: block;
	margin-top: 0.4em;
}

/* Cuando el aviso se añade a una leyenda ya existente. */
.reglia-disclosure {
	display: inline;
}

@media (prefers-color-scheme: dark) {
	.reglia-caption,
	.reglia-disclosure {
		color: #9ca3af;
	}
}

/* Modo "distintivo superpuesto" (alternativa al pie de imagen).
   "display: block" es el valor por defecto más seguro: si la imagen llevaba
   clases del tema/builder que fijan su propio tamaño (p. ej. "width: 100%;
   height: 100%" para rellenar un contenedor flex), esas reglas -copiadas
   también al envoltorio- tienen mayor especificidad y prevalecen sobre esto. */
.reglia-badge-wrap {
	position: relative;
	display: block;
	max-width: 100%;
}

.reglia-badge-wrap > img {
	display: block;
	max-width: 100%;
}

/* Esquina superior izquierda, no inferior derecha: cuando un tema aplica
   "object-fit: contain" a la imagen (para encajarla en una caja de alto
   máximo fijo, p. ej. en el contenido de una entrada), el contenido visible
   suele anclarse arriba-izquierda ("object-position: 0% 0%", el valor más
   habitual cuando un tema lo fija explícitamente) y el hueco que deja ese
   ajuste aparece abajo/derecha. Un badge en esa esquina inferior quedaría
   dentro de la CAJA pero fuera de los píxeles realmente visibles de la
   imagen. Arriba-izquierda es la esquina más robusta frente a ese caso —
   aunque no es una solución universal para cualquier "object-position". */
.reglia-badge-overlay {
	position: absolute;
	left: 0.5em;
	top: 0.5em;
	display: flex;
	align-items: center;
	max-width: calc(100% - 1em);
	padding: 4px 8px;
	border-radius: 4px;
	pointer-events: none;
	/* Estas tres propiedades solo se usan si el SVG del icono aún no está en
	   la carpeta del plugin y se cae de vuelta al texto (ver apply_badge()). */
	color: #fff;
	font-size: 0.75em;
	line-height: 1.4;
	font-style: normal;
}

/* Icono del distintivo: sustituye al texto cuando el SVG correspondiente
   (ai-generated.svg / ai-modified.svg) está presente en assets/icons/. */
.reglia-badge-icon {
	display: block;
	height: 16px;
	width: auto;
}