/**
 * 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/.
   "!important" es necesario aquí: muchos temas/page builders traen su propia
   regla de "imágenes responsive" para el contenido (del tipo
   ".entry-content img { max-width: 100%; height: auto }"), con más
   especificidad (clase + etiqueta) que esta única clase -y por tanto capaz
   de imponerse-, lo que hace que el icono se estire al tamaño de la imagen
   en vez de quedarse en 16px. */
.reglia-badge-icon {
	display: block !important;
	height: 16px !important;
	width: auto !important;
	max-width: none !important;
}

/* Modo "pie de imagen" aplicado a un fondo CSS (sin <img> ni <figure> de por
   medio): nota de texto justo después del elemento con el fondo. */
.reglia-bg-caption {
	margin-top: 0.4em;
	margin-bottom: 0;
}

/* Aviso de CONTENIDO (shortcode [reglia_contenido]): mismo estilo discreto
   que .reglia-caption, para que imágenes y contenido se vean de la misma
   familia visual. Es un <span> porque el shortcode se puede colocar en
   cualquier sitio de una plantilla (a veces junto a otro texto en línea). */
.reglia-content-notice {
	font-size: 0.8125em;
	line-height: 1.4;
	color: #6b7280;
	font-style: normal;
}

@media (prefers-color-scheme: dark) {
	.reglia-content-notice {
		color: #9ca3af;
	}
}