/*!
 * @package   AkeebaEngage
 * @copyright Copyright (c)2020-2025 Nicholas K. Dionysopoulos / Akeeba Ltd
 * @license   GNU General Public License version 3, or later
 *
 * Tema visual «Moderno» (0.6.23). Se carga SOLO si está elegido en Componentes > Engage > Opciones > Apariencia,
 * después de replies.css y comments.css. El tema «classic» (por defecto) no carga ninguna hoja.
 * Tarjetas blancas con sombra suave, cabecera clara, avatar redondo, botones en píldora, cita como etiqueta y hilo con guía vertical.
 *
 * Reglas del tema:
 *  - Cada tarjeta fija SIEMPRE fondo y color de texto (y el de enlaces, nombres, fechas, botones y cita), así que se lee
 *    sobre cualquier plantilla, clara u oscura. No hay texto que herede el color de la plantilla dentro de una tarjeta.
 *  - Todos los colores y medidas son variables --eg-* definidas en :root. Para cambiarlas, redefínalas DESPUÉS de esta hoja
 *    (CSS personalizado de su plantilla o ajuste «Cargar CSS personalizado»); la lista está en docs/TEMAS.md.
 *  - Los selectores van acotados a section.akengage-outer-container.akengage-theme--modern (clase que pone la plantilla
 *    de Engage en el contenedor) y no tocan nada fuera de los comentarios.
 *  - reply_indent y reply_show_quote no se tocan. reply_style: «line» usa la barra lateral del tema; «soft» y «none» las
 *    resuelve replies.css (más específico) y aquí solo se da un color opaco al fondo suave con --akengage-reply-bg.
 *  - Los !important son necesarios: las utilidades de Bootstrap (border-start, bg-light, text-muted, ps-2...) los llevan.
 */

:root {
	--eg-acento: #2563eb;  /* color de decoración: barra lateral, guía, foco */
	--eg-enlace: #1d4ed8;  /* enlaces y botones (contraste mínimo 4,5:1 con el fondo de la tarjeta) */
	--eg-enlace-hover: #1e3a8a;  /* enlaces y botón principal al pasar el ratón */
	--eg-sobre-boton: #ffffff;  /* texto sobre un botón relleno */
	--eg-sobre-boton-hover: #ffffff;  /* texto del botón principal al pasar el ratón */
	--eg-boton-solido-borde: #ffffff;  /* borde de los botones rellenos (los separa de una página oscura) */
	--eg-fondo: #ffffff;  /* fondo de la tarjeta */
	--eg-fondo-cabecera: #f5f7fb;  /* fondo de la cabecera de la tarjeta */
	--eg-fondo-respuesta: #f1f5fd;  /* fondo de las respuestas con reply_style = soft */
	--eg-fondo-boton: #ffffff;  /* fondo de los botones con borde */
	--eg-borde: #d5dce8;  /* bordes y separadores */
	--eg-texto: #1e293b;  /* texto principal */
	--eg-texto-suave: #475569;  /* fechas, IP, correo y textos secundarios */
	--eg-cita-fondo: #e8effd;  /* fondo de la etiqueta «En respuesta a» y de las citas */
	--eg-codigo-fondo: #eef2f7;  /* fondo de código */
	--eg-codigo-texto: #1e293b;  /* texto de código */
	--eg-ok: #15803d;  /* verde: nombre de usuario, «No es spam» */
	--eg-peligro: #b91c1c;  /* rojo: borrar, invitado */
	--eg-aviso: #92400e;  /* ámbar oscuro: moderador, «Posible spam» */
	--eg-spam: #d97706;  /* barra lateral de «Posible spam» */
	--eg-fondo-spam: #fffbeb;  /* fondo de la tarjeta de «Posible spam» */
	--eg-sinpublicar: #dc2626;  /* barra lateral de «Sin publicar» */
	--eg-fondo-sinpublicar: #fef2f2;  /* fondo de la tarjeta «Sin publicar» */
	--eg-banner-spam-fondo: #92400e;  /* franja «Posible spam»: fondo */
	--eg-banner-spam-texto: #ffffff;  /* franja «Posible spam»: texto */
	--eg-banner-sinpublicar-fondo: #b91c1c;  /* franja «Sin publicar»: fondo */
	--eg-banner-sinpublicar-texto: #ffffff;  /* franja «Sin publicar»: texto */
	--eg-guia: rgba(37, 99, 235, .22);  /* línea vertical del hilo de respuestas */
	--eg-foco: rgba(37, 99, 235, .25);  /* anillo de foco de los campos */
	--eg-input-fondo: #ffffff;  /* campos del formulario: fondo */
	--eg-input-texto: #1e293b;  /* campos del formulario: texto */
	--eg-input-borde: #94a3b8;  /* campos del formulario: borde */
	--eg-panel-fondo: transparent;  /* fondo del contenedor completo (transparente en este tema) */
	--eg-panel-texto: inherit;  /* texto del contenedor completo (el de la plantilla en este tema) */
	--eg-radio: 16px;  /* redondeo de la tarjeta */
	--eg-radio-boton: 999px;  /* redondeo de los botones */
	--eg-radio-cita: 999px;  /* redondeo de la etiqueta de cita */
	--eg-radio-aviso: 14px;  /* redondeo del aviso de Gravatar (caja de varias líneas: nunca el de píldora) */
	--eg-radio-avatar: 50%;  /* redondeo del avatar */
	--eg-avatar-movil: 40px;  /* tamaño del avatar por debajo de 576 px (opción «Avatar en móvil») */
	--eg-radio-campo: 8px;  /* redondeo de campos y código */
	--eg-sombra: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .06);  /* sombra de la tarjeta */
	--eg-sombra-hover: 0 2px 4px rgba(15, 23, 42, .08), 0 14px 32px rgba(15, 23, 42, .10);  /* sombra al pasar el ratón */
	--eg-sombra-respuesta: 0 1px 2px rgba(15, 23, 42, .05);  /* sombra de las respuestas */
	--eg-sombra-avatar: 0 0 0 3px #ffffff, 0 2px 8px rgba(15, 23, 42, .15);  /* sombra y aro del avatar */
	--eg-borde-ancho: 1px;  /* grosor del borde de la tarjeta */
	--eg-barra-ancho: 4px;  /* grosor de la barra lateral de estado */
	--eg-guia-ancho: 2px;  /* grosor de la guía del hilo */
	--eg-separacion: 1.1rem;  /* espacio entre comentarios */
	--eg-relleno: 1.2rem;  /* relleno horizontal del texto */
	--eg-relleno-cabecera: .85rem 1rem;  /* relleno de la cabecera */
	--eg-cita-relleno: .3rem .7rem;  /* relleno de la etiqueta de cita */
	--eg-boton-relleno: .2rem .8rem;  /* relleno de los botones de moderación */
	--eg-boton-responder-relleno: .3rem 1.1rem;  /* relleno del botón Responder */
	--eg-panel-relleno: 0;  /* relleno del contenedor completo */
	--eg-panel-radio: 0;  /* redondeo del contenedor completo */
	--eg-fuente: inherit;  /* tipografía (heredada de la plantilla) */
	--eg-fuente-tam: 1.02rem;  /* tamaño del texto del comentario */
	--eg-interlineado: 1.6;  /* interlineado del comentario */
	--eg-movimiento: box-shadow .2s ease, transform .2s ease, background-color .15s ease, color .15s ease;  /* transiciones */
	--akengage-reply-bg: var(--eg-fondo-respuesta);
}

/* Contenedor de los comentarios: transparente salvo en el tema oscuro, que lo convierte en un panel */
section.akengage-outer-container.akengage-theme--modern {
	background-color: var(--eg-panel-fondo);
	color: var(--eg-panel-texto);
	padding: var(--eg-panel-relleno);
	border-radius: var(--eg-panel-radio);
	font-family: var(--eg-fuente);
}
section.akengage-outer-container.akengage-theme--modern h3.akengage-title {
	border-bottom-color: var(--eg-borde) !important;
}


/* Blindaje de color: dentro de las tarjetas el texto es SIEMPRE el del tema, aunque la plantilla (p. ej. Helix en modo oscuro)
   fuerce un color a todos los elementos con !important. Después se restauran los colores propios (nombre, fecha, cita, botones...)
   con reglas igual de específicas y posteriores. */
section.akengage-outer-container.akengage-theme--modern .akengage-list-container :where(div, span, p, footer, small, strong, b, i, em, u, ul, ol, li, blockquote, pre, code, time, h1, h2, h3, h4, h5, h6, table, thead, tbody, tr, td, th) {
	color: var(--eg-texto) !important;
}

/* Paginación (comments.css, en modo oscuro del dispositivo, pinta los enlaces con !important) */
section.akengage-outer-container.akengage-theme--modern .akengage-pagination .page-link {
	background-color: var(--eg-fondo) !important;
	color: var(--eg-enlace) !important;
	border-color: var(--eg-borde) !important;
}
section.akengage-outer-container.akengage-theme--modern .akengage-pagination .active > .page-link,
section.akengage-outer-container.akengage-theme--modern .akengage-pagination .page-link.active,
section.akengage-outer-container.akengage-theme--modern .akengage-pagination .page-link:hover,
section.akengage-outer-container.akengage-theme--modern .akengage-pagination .page-link:focus-visible {
	background-color: var(--eg-enlace) !important;
	color: var(--eg-sobre-boton) !important;
	border-color: var(--eg-enlace) !important;
}
section.akengage-outer-container.akengage-theme--modern .akengage-pagination .disabled > .page-link {
	background-color: var(--eg-fondo) !important;
	color: var(--eg-texto-suave) !important;
}

/* Lista y separación entre comentarios */
section.akengage-outer-container.akengage-theme--modern ul.akengage-comment-list > li.akengage-comment-item {
	margin-bottom: var(--eg-separacion) !important;
}

/* Tarjeta de cada comentario (publicado) */
section.akengage-outer-container.akengage-theme--modern article[class*="akengage-comment--"] {
	background-color: var(--eg-fondo);
	color: var(--eg-texto) !important;
	border: var(--eg-borde-ancho) solid var(--eg-borde) !important;
	border-left: var(--eg-barra-ancho) solid var(--eg-acento) !important;
	border-radius: var(--eg-radio);
	padding: 0 !important;
	margin-top: 0 !important;
	overflow: hidden;
	box-shadow: var(--eg-sombra);
	transition: var(--eg-movimiento);
}
section.akengage-outer-container.akengage-theme--modern article[class*="akengage-comment--"]:hover {
	box-shadow: var(--eg-sombra-hover);
}
/* Estados: publicado, posible spam, sin publicar (borde y fondo propios, siempre con su texto) */
section.akengage-outer-container.akengage-theme--modern article.akengage-comment--primary {
	border-left-color: var(--eg-acento) !important;
}
section.akengage-outer-container.akengage-theme--modern article.akengage-comment--spam {
	background-color: var(--eg-fondo-spam) !important;
	border-left-color: var(--eg-spam) !important;
}
section.akengage-outer-container.akengage-theme--modern article.akengage-comment--unpublished {
	background-color: var(--eg-fondo-sinpublicar) !important;
	border-left-color: var(--eg-sinpublicar) !important;
}

/* Cabecera: avatar, nombre, fecha y botones */
section.akengage-outer-container.akengage-theme--modern .akengage-comment-properties {
	background-color: var(--eg-fondo-cabecera) !important;
	color: var(--eg-texto) !important;
	padding: var(--eg-relleno-cabecera) !important;
	margin: 0 !important;
	border-bottom: var(--eg-borde-ancho) solid var(--eg-borde) !important;
	gap: .9rem !important;
	align-items: center;
}
section.akengage-outer-container.akengage-theme--modern .akengage-commenter-avatar {
	border-radius: var(--eg-radio-avatar) !important;
	box-shadow: var(--eg-sombra-avatar) !important;
}
section.akengage-outer-container.akengage-theme--modern .akengange-commenter-name,
section.akengage-outer-container.akengage-theme--modern .akengange-commenter-name [itemprop="name"] {
	font-size: 1.05rem;
	color: var(--eg-texto) !important;
}
section.akengage-outer-container.akengage-theme--modern .akengage-commenter-ismoderator { color: var(--eg-aviso) !important; }
section.akengage-outer-container.akengage-theme--modern .akengage-commenter-isuser { color: var(--eg-texto-suave) !important; }
section.akengage-outer-container.akengage-theme--modern .akengage-commenter-username { color: var(--eg-ok) !important; }
section.akengage-outer-container.akengage-theme--modern .akengage-commenter-isguest { color: var(--eg-peligro) !important; }
section.akengage-outer-container.akengage-theme--modern .akengage-commenter-email { color: var(--eg-texto-suave) !important; }
section.akengage-outer-container.akengage-theme--modern .akengage-comment-permalink,
section.akengage-outer-container.akengage-theme--modern .akengage-comment-permalink a {
	color: var(--eg-texto-suave) !important;
	font-size: .85rem;
}
/* comments.css (su bloque prefers-color-scheme: dark) pinta la fecha con !important y un selector larguísimo: este lo repite con
   una clase más para que el tema (claro u oscuro) mande también cuando el dispositivo está en modo oscuro. */
section.akengage-outer-container.akengage-theme--modern div.akengage-list-container ul.akengage-comment-list li.akengage-comment-item article[class^="akengage-comment"] footer.akengage-comment-properties div.akengange-comment-head div.akengage-comment-info div.akengage-comment-permalink > a {
	color: var(--eg-texto-suave) !important;
}
section.akengage-outer-container.akengage-theme--modern .akengage-comment-ip,
section.akengage-outer-container.akengage-theme--modern .akengage-comment-ip a {
	color: var(--eg-texto-suave) !important;
}
section.akengage-outer-container.akengage-theme--modern .akengage-comment-ip a { text-decoration: underline; }

/* Aviso de «Posible spam» / «Sin publicar» */
section.akengage-outer-container.akengage-theme--modern .akengage-comment-publish-type {
	padding: .45rem var(--eg-relleno) !important;
	margin: 0 !important;
}
section.akengage-outer-container.akengage-theme--modern article.akengage-comment--spam .akengage-comment-publish-type {
	background-color: var(--eg-banner-spam-fondo) !important;
	color: var(--eg-banner-spam-texto) !important;
}
section.akengage-outer-container.akengage-theme--modern article.akengage-comment--unpublished .akengage-comment-publish-type {
	background-color: var(--eg-banner-sinpublicar-fondo) !important;
	color: var(--eg-banner-sinpublicar-texto) !important;
}

/* Cita «En respuesta a ...» */
section.akengage-outer-container.akengage-theme--modern .akengage-comment-replyto {
	margin: .85rem var(--eg-relleno) 0 !important;
	padding: var(--eg-cita-relleno);
	display: inline-block;
	background-color: var(--eg-cita-fondo) !important;
	color: var(--eg-texto-suave) !important;
	border-radius: var(--eg-radio-cita);
	font-size: .82rem;
}
section.akengage-outer-container.akengage-theme--modern .akengage-comment-replyto-link {
	color: var(--eg-enlace) !important;
	font-weight: 600;
	text-decoration: none;
}
section.akengage-outer-container.akengage-theme--modern .akengage-comment-replyto-link:hover,
section.akengage-outer-container.akengage-theme--modern .akengage-comment-replyto-link:focus-visible { text-decoration: underline; color: var(--eg-enlace-hover) !important; }

/* Texto del comentario */
section.akengage-outer-container.akengage-theme--modern .akengage-comment-body {
	padding: 1rem var(--eg-relleno) .4rem;
	font-size: var(--eg-fuente-tam);
	line-height: var(--eg-interlineado);
	color: var(--eg-texto) !important;
	background-color: transparent;
}
section.akengage-outer-container.akengage-theme--modern .akengage-comment-body p:last-child { margin-bottom: .4rem; }
section.akengage-outer-container.akengage-theme--modern .akengage-comment-body a {
	color: var(--eg-enlace) !important;
	text-decoration: underline;
}
section.akengage-outer-container.akengage-theme--modern .akengage-comment-body a:hover,
section.akengage-outer-container.akengage-theme--modern .akengage-comment-body a:focus-visible { color: var(--eg-enlace-hover) !important; }
section.akengage-outer-container.akengage-theme--modern .akengage-comment-body blockquote {
	margin: .8rem 0;
	padding: .6rem 1rem;
	border-left: 3px solid var(--eg-acento);
	background-color: var(--eg-cita-fondo);
	color: inherit;
	border-radius: 0 var(--eg-radio-cita) var(--eg-radio-cita) 0;
}
section.akengage-outer-container.akengage-theme--modern .akengage-comment-body pre,
section.akengage-outer-container.akengage-theme--modern .akengage-comment-body code {
	background-color: var(--eg-codigo-fondo);
	color: var(--eg-codigo-texto);
	border-radius: var(--eg-radio-campo);
}
section.akengage-outer-container.akengage-theme--modern .akengage-comment-body > div.text-muted {
	color: var(--eg-texto-suave) !important;
	border-top-color: var(--eg-borde) !important;
}

/* Botones (moderación, Responder, Cancelar) */
section.akengage-outer-container.akengage-theme--modern .akengage-list-container .akengage-comment-actions button.btn,
section.akengage-outer-container.akengage-theme--modern .akengage-list-container .akengage-comment-reply button.btn,
section.akengage-outer-container.akengage-theme--modern #akengage-comment-inreplyto-cancel {
	--eg-b: var(--eg-enlace);
	background-color: var(--eg-fondo-boton) !important;
	color: var(--eg-b) !important;
	border: 1px solid var(--eg-b) !important;
	border-radius: var(--eg-radio-boton);
	padding: var(--eg-boton-relleno);
	font-size: .8rem;
	font-weight: 600;
	margin: 0;
	transition: var(--eg-movimiento);
}
section.akengage-outer-container.akengage-theme--modern .akengage-list-container .btn.btn-outline-secondary { --eg-b: var(--eg-texto-suave); }
section.akengage-outer-container.akengage-theme--modern .akengage-list-container .btn.btn-outline-success { --eg-b: var(--eg-ok); }
section.akengage-outer-container.akengage-theme--modern .akengage-list-container .btn.btn-outline-danger,
section.akengage-outer-container.akengage-theme--modern #akengage-comment-inreplyto-cancel { --eg-b: var(--eg-peligro); }
section.akengage-outer-container.akengage-theme--modern .akengage-list-container .btn.btn-outline-warning { --eg-b: var(--eg-aviso); }
section.akengage-outer-container.akengage-theme--modern .akengage-list-container .akengage-comment-actions button.btn:hover,
section.akengage-outer-container.akengage-theme--modern .akengage-list-container .akengage-comment-actions button.btn:focus-visible,
section.akengage-outer-container.akengage-theme--modern .akengage-list-container .akengage-comment-actions button.btn:active,
section.akengage-outer-container.akengage-theme--modern .akengage-list-container .akengage-comment-reply button.btn:hover,
section.akengage-outer-container.akengage-theme--modern .akengage-list-container .akengage-comment-reply button.btn:focus-visible,
section.akengage-outer-container.akengage-theme--modern .akengage-list-container .akengage-comment-reply button.btn:active,
section.akengage-outer-container.akengage-theme--modern #akengage-comment-inreplyto-cancel:hover,
section.akengage-outer-container.akengage-theme--modern #akengage-comment-inreplyto-cancel:focus-visible {
	background-color: var(--eg-b) !important;
	color: var(--eg-sobre-boton) !important;
	border-color: var(--eg-b) !important;
}
section.akengage-outer-container.akengage-theme--modern .akengage-comment-reply { padding: .2rem var(--eg-relleno) .9rem; }
section.akengage-outer-container.akengage-theme--modern .akengage-list-container .akengage-comment-reply button.btn {
	padding: var(--eg-boton-responder-relleno);
	font-size: .9rem;
	margin-bottom: 0 !important;
}

/* Respuestas: hilo con guía vertical (sin desplazar la sangría de reply_indent) */
section.akengage-outer-container.akengage-theme--modern ul.akengage-comment-list ul.akengage-comment-list:not(.akengage-reply-indent--none) {
	margin-top: .2rem;
	box-shadow: inset var(--eg-guia-ancho) 0 0 0 var(--eg-guia);
}
section.akengage-outer-container.akengage-theme--modern ul.akengage-comment-list ul.akengage-comment-list article[class*="akengage-comment--"] {
	box-shadow: var(--eg-sombra-respuesta);
}
/* reply_style = soft: fondo opaco del tema (replies.css lo aplica a las respuestas publicadas) */
section.akengage-outer-container.akengage-theme--modern ul.akengage-reply-style--soft article.akengage-comment--primary {
	border-color: var(--eg-borde) !important;
}

/* Formulario de comentar */
section.akengage-outer-container.akengage-theme--modern #akengageCommentForm > div {
	border-top-color: var(--eg-borde) !important;
}
section.akengage-outer-container.akengage-theme--modern #akengageCommentForm .form-control,
section.akengage-outer-container.akengage-theme--modern #akengageCommentForm .form-select,
section.akengage-outer-container.akengage-theme--modern #akengageCommentForm textarea,
section.akengage-outer-container.akengage-theme--modern #akengageCommentForm input[type="text"],
section.akengage-outer-container.akengage-theme--modern #akengageCommentForm input[type="email"],
section.akengage-outer-container.akengage-theme--modern #akengageCommentForm input[type="url"] {
	background-color: var(--eg-input-fondo) !important;
	color: var(--eg-input-texto) !important;
	border: 1px solid var(--eg-input-borde) !important;
	border-radius: var(--eg-radio-campo);
}
section.akengage-outer-container.akengage-theme--modern #akengageCommentForm .form-control::placeholder,
section.akengage-outer-container.akengage-theme--modern #akengageCommentForm textarea::placeholder { color: var(--eg-texto-suave); opacity: 1; }
section.akengage-outer-container.akengage-theme--modern #akengageCommentForm .form-control:focus,
section.akengage-outer-container.akengage-theme--modern #akengageCommentForm .form-select:focus,
section.akengage-outer-container.akengage-theme--modern #akengageCommentForm textarea:focus {
	border-color: var(--eg-acento) !important;
	box-shadow: 0 0 0 3px var(--eg-foco);
	outline: 0;
}
section.akengage-outer-container.akengage-theme--modern #akengage-comment-inreplyto-wrapper {
	background-color: var(--eg-fondo-cabecera) !important;
	color: var(--eg-texto) !important;
	border: 1px solid var(--eg-borde);
	border-left: var(--eg-barra-ancho) solid var(--eg-acento);
	border-radius: var(--eg-radio-cita);
}
section.akengage-outer-container.akengage-theme--modern #akengage-comment-inreplyto-name { color: var(--eg-enlace) !important; }
section.akengage-outer-container.akengage-theme--modern #akengageCommentForm .akengage-comment-submit-btn,
section.akengage-outer-container.akengage-theme--modern .akengage-comment-hider .btn {
	background-color: var(--eg-enlace) !important;
	color: var(--eg-sobre-boton) !important;
	border: 2px solid var(--eg-boton-solido-borde) !important;
	border-radius: var(--eg-radio-boton);
	font-weight: 600;
	transition: var(--eg-movimiento);
}
section.akengage-outer-container.akengage-theme--modern #akengageCommentForm .akengage-comment-submit-btn:hover,
section.akengage-outer-container.akengage-theme--modern #akengageCommentForm .akengage-comment-submit-btn:focus-visible,
section.akengage-outer-container.akengage-theme--modern .akengage-comment-hider .btn:hover,
section.akengage-outer-container.akengage-theme--modern .akengage-comment-hider .btn:focus-visible {
	background-color: var(--eg-enlace-hover) !important;
	border-color: var(--eg-boton-solido-borde) !important;
	color: var(--eg-sobre-boton-hover) !important;
}

/* Aviso de Gravatar (plugin Gravatar en modo «preguntar») */
section.akengage-outer-container.akengage-theme--modern .akengage-gravatar-notice {
	background-color: var(--eg-fondo-cabecera) !important;
	color: var(--eg-texto) !important;
	border: 1px solid var(--eg-borde) !important;
	border-left: var(--eg-barra-ancho) solid var(--eg-acento) !important;
	border-radius: var(--eg-radio-aviso);
	padding: .75rem 1rem;
	min-width: 0;
	max-width: 100%;
	overflow-wrap: anywhere;
}
section.akengage-outer-container.akengage-theme--modern .akengage-gravatar-notice p { margin-bottom: .5rem; overflow-wrap: anywhere; }
section.akengage-outer-container.akengage-theme--modern .akengage-gravatar-notice :where(div, span, p, small, strong) { color: var(--eg-texto) !important; }
section.akengage-outer-container.akengage-theme--modern .akengage-gravatar-notice .btn-link {
	white-space: normal;
	text-align: left;
	overflow-wrap: anywhere;
	background-color: transparent !important;
	color: var(--eg-enlace) !important;
	border: 0 !important;
	text-decoration: underline;
}
section.akengage-outer-container.akengage-theme--modern .akengage-gravatar-notice .btn-link:hover,
section.akengage-outer-container.akengage-theme--modern .akengage-gravatar-notice .btn-link:focus-visible { color: var(--eg-enlace-hover) !important; background-color: transparent !important; }
section.akengage-outer-container.akengage-theme--modern .akengage-gravatar-notice .btn-primary {
	border-radius: var(--eg-radio-aviso);
	white-space: normal;
	max-width: 100%;
	text-align: center;
	overflow-wrap: anywhere;
	background-color: var(--eg-enlace) !important;
	color: var(--eg-sobre-boton) !important;
	border: 1px solid var(--eg-enlace) !important;
}
section.akengage-outer-container.akengage-theme--modern .akengage-gravatar-notice .btn-primary:hover,
section.akengage-outer-container.akengage-theme--modern .akengage-gravatar-notice .btn-primary:focus-visible {
	background-color: var(--eg-enlace-hover) !important;
	border-color: var(--eg-enlace-hover) !important;
	color: var(--eg-sobre-boton-hover) !important;
}

/* Iconos del nombre (moderador, usuario, invitado): dibujados con máscara SVG propia, no con la fuente Font Awesome de la plantilla (0.6.27).
   Así se ven siempre, también en móvil y en plantillas que no cargan Font Awesome o la cargan tarde. Heredan el color del tema (currentColor). */
section.akengage-outer-container.akengage-theme--modern .akengage-commenter-ismoderator,
section.akengage-outer-container.akengage-theme--modern .akengage-commenter-isuser,
section.akengage-outer-container.akengage-theme--modern .akengage-commenter-isguest {
	display: inline-block;
	flex: none;
	width: 1.1em;
	height: 1em;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask: var(--eg-icono) center / contain no-repeat;
	mask: var(--eg-icono) center / contain no-repeat;
}
section.akengage-outer-container.akengage-theme--modern .akengage-commenter-ismoderator::before,
section.akengage-outer-container.akengage-theme--modern .akengage-commenter-isuser::before,
section.akengage-outer-container.akengage-theme--modern .akengage-commenter-isguest::before { content: none !important; }
section.akengage-outer-container.akengage-theme--modern .akengage-commenter-ismoderator { --eg-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8l3.1 6.6 7.2.9-5.3 5 1.4 7.1L12 17.8l-6.4 3.6L7 14.3 1.7 9.3l7.2-.9z'/%3E%3C/svg%3E"); }
section.akengage-outer-container.akengage-theme--modern .akengage-commenter-isuser { --eg-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7' r='5'/%3E%3Cpath d='M2.5 22c0-5.2 4.2-9 9.5-9s9.500 3.800 9.500 9z'/%3E%3C/svg%3E"); }
section.akengage-outer-container.akengage-theme--modern .akengage-commenter-isguest { --eg-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='8' cy='8' r='4'/%3E%3Cpath d='M0.500 21c0-4.500 3.400-7.500 7.500-7.500s7.500 3 7.500 7.500z'/%3E%3Ccircle cx='17.500' cy='7' r='3.200'/%3E%3Cpath d='M16.500 12.500c4 0 7 2.600 7 6.500h-5.500c0-2.700-.8-4.800-1.500-6.500z'/%3E%3C/svg%3E"); }
/* Correo y nombre de usuario largos (sin espacios): se parten en vez de ensanchar la fila y empujar los iconos fuera de la cabecera en móvil */
section.akengage-outer-container.akengage-theme--modern .akengange-commenter-name > div { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
section.akengage-outer-container.akengage-theme--modern .akengage-commenter-email,
section.akengage-outer-container.akengage-theme--modern .akengage-commenter-username { overflow-wrap: anywhere; }

/* Móvil */
@media (max-width: 575.98px) {
	:root {
		--eg-relleno: .9rem;
		--eg-relleno-cabecera: .7rem .75rem;
	}
	section.akengage-outer-container.akengage-theme--modern .akengage-comment-body { padding-top: .8rem; padding-bottom: .3rem; }
	section.akengage-outer-container.akengage-theme--modern .akengage-comment-replyto { margin-top: .7rem !important; }
}

/* Accesibilidad: sin animaciones si el visitante lo prefiere */
@media (prefers-reduced-motion: reduce) {
	section.akengage-outer-container.akengage-theme--modern,
	section.akengage-outer-container.akengage-theme--modern * {
		transition: none !important;
		transform: none !important;
		animation: none !important;
	}
}

/* Moderno: las tarjetas se elevan un poco al pasar el ratón */
section.akengage-outer-container.akengage-theme--modern article[class*="akengage-comment--"]:hover { transform: translateY(-1px); }
section.akengage-outer-container.akengage-theme--modern .akengage-list-container .akengage-comment-actions button.btn:hover { transform: translateY(-1px); }
section.akengage-outer-container.akengage-theme--modern .akengage-list-container .akengage-comment-reply button.btn:hover { box-shadow: 0 6px 16px rgba(37, 99, 235, .30); }