/**
 * MARF Comentarios — estilos del front.
 *
 * Tres ideas de fondo:
 *
 * 1. No imponemos tipografía ni tamaño: se heredan del sitio salvo que se
 *    definan a mano en los ajustes.
 * 2. La paleta se deriva de `currentColor`, o sea del color de texto que ya
 *    tenga la sección, así el bloque encaja sobre una foto o sobre blanco.
 * 3. Todo va prefijado con `.marf-c` y con reset propio, porque los temas y
 *    Elementor pisan `button`, `input` y `select` sin piedad.
 */

/* ---------------------------------------------------------- 1. Paleta */

.marf-c {
	--marf-c-accent: #0d55c9;
	--marf-c-accent-contrast: #fff;
	--marf-c-radius: 10px;
	--marf-c-avatar: 40px;
	--marf-c-avatar-radius: 50%;
	--marf-c-gap: 18px;
	--marf-c-indent: 26px;
	--marf-c-width: 100%;
	--marf-c-panel-pad: 22px;
	--marf-c-panel-veil: .3;

	/* Reserva para navegadores sin color-mix. */
	--marf-c-bg: transparent;
	--marf-c-text: inherit;
	--marf-c-muted: rgba(128, 128, 128, .95);
	--marf-c-surface: rgba(128, 128, 128, .12);
	--marf-c-border: rgba(128, 128, 128, .32);
}

/* Modo heredado: la sección manda. */
@supports (color: color-mix(in srgb, red 50%, transparent)) {
	.marf-c--mode-inherit {
		--marf-c-bg: transparent;
		--marf-c-text: inherit;
		--marf-c-muted: color-mix(in srgb, currentColor 62%, transparent);
		--marf-c-surface: color-mix(in srgb, currentColor 9%, transparent);
		--marf-c-border: color-mix(in srgb, currentColor 17%, transparent);
	}
}

/* ---------------------------------------------------------- 2. Raíz */

.marf-c {
	background: var(--marf-c-bg);
	box-sizing: border-box;
	color: var(--marf-c-text);
	/* Sin valor definido en los ajustes, se hereda todo del sitio. */
	font-family: var(--marf-c-font, inherit);
	font-size: var(--marf-c-font-size, inherit);
	line-height: 1.55;
	margin-inline: auto;
	max-width: var(--marf-c-width);
	width: 100%;
}

.marf-c *,
.marf-c *::before,
.marf-c *::after {
	box-sizing: border-box;
}

.marf-c [hidden] {
	display: none !important;
}

/* Reset: los temas estilan estos elementos globalmente. */
.marf-c button,
.marf-c input,
.marf-c textarea,
.marf-c select {
	background-image: none;
	box-shadow: none;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	letter-spacing: normal;
	line-height: 1.5;
	margin: 0;
	max-width: 100%;
	text-transform: none;
	-webkit-appearance: none;
	appearance: none;
}

.marf-c button {
	background: none;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	font-weight: inherit;
	min-height: 0;
	padding: 0;
	text-decoration: none;
	width: auto;
}

.marf-c .marf-c-icon {
	display: block;
	flex: none;
}

.marf-c a {
	box-shadow: none;
}

/* ---------------------------------------------------------- 3. Cabecera */

.marf-c-head {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 16px;
	justify-content: space-between;
	margin-bottom: calc(var(--marf-c-gap) * 0.9);
}

.marf-c .marf-c-title {
	color: inherit;
	font-size: 1.15em;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.3;
	margin: 0;
	padding: 0;
}

.marf-c .marf-c-order select {
	background: var(--marf-c-surface);
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 15px) center, calc(100% - 10px) center;
	background-repeat: no-repeat;
	background-size: 5px 5px, 5px 5px;
	border: 1px solid var(--marf-c-border);
	border-radius: 999px;
	cursor: pointer;
	font-size: 0.85em;
	height: auto;
	padding: 6px 32px 6px 14px;
}

/* ---------------------------------------------------------- 4. Editor */

.marf-c-composer {
	margin-bottom: calc(var(--marf-c-gap) * 1.2);
}

/* Mismo esqueleto que un comentario: avatar a la izquierda. */
.marf-c .marf-c-form {
	align-items: flex-start;
	display: flex;
	gap: 12px;
	margin: 0;
	padding: 0;
}

.marf-c-form-avatar {
	flex: none;
	padding-top: 2px;
}

.marf-c-form-main {
	flex: 1;
	min-width: 0;
}

.marf-c-form-context {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	margin-bottom: 8px;
}

.marf-c-form-mode {
	color: var(--marf-c-muted);
	font-size: 0.85em;
	font-weight: 600;
}

.marf-c .marf-c-cancel {
	color: var(--marf-c-accent);
	font-size: 0.85em;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* La caja: una sola pieza redondeada, como la de Facebook. */
.marf-c-editor {
	background: var(--marf-c-surface);
	border: 1px solid var(--marf-c-border);
	border-radius: 20px;
	position: relative;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.marf-c--glass .marf-c-editor {
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.marf-c-editor:focus-within {
	border-color: var(--marf-c-accent);
}

@supports (color: color-mix(in srgb, red 50%, transparent)) {
	.marf-c-editor:focus-within {
		box-shadow: 0 0 0 3px color-mix(in srgb, var(--marf-c-accent) 20%, transparent);
	}
}

.marf-c-editor.is-dragover {
	border-color: var(--marf-c-accent);
	border-style: dashed;
}

.marf-c .marf-c-textarea {
	background: none;
	border: 0;
	border-radius: 0;
	display: block;
	line-height: 1.55;
	max-height: 420px;
	min-height: 0;
	outline: none;
	overflow-y: auto;
	padding: 12px 18px 4px;
	resize: none;
	width: 100%;
}

.marf-c .marf-c-textarea::placeholder {
	color: var(--marf-c-muted);
	opacity: 1;
}

/* Barra inferior: emoji, GIF, foto… y publicar. */
.marf-c-actionsbar {
	align-items: center;
	display: flex;
	gap: 8px;
	justify-content: space-between;
	padding: 4px 8px 8px 10px;
}

.marf-c-actionsbar-left {
	align-items: center;
	display: flex;
	gap: 2px;
	min-width: 0;
}

.marf-c .marf-c-tool {
	align-items: center;
	border-radius: 50%;
	color: var(--marf-c-muted);
	display: inline-flex;
	justify-content: center;
	padding: 9px;
	transition: background-color .12s ease, color .12s ease;
}

/* Los iconos del editor son el punto de entrada a emojis y GIF: se ven. */
.marf-c .marf-c-tool .marf-c-icon {
	height: 24px;
	width: 24px;
}

.marf-c .marf-c-tool:hover,
.marf-c .marf-c-tool:focus-visible,
.marf-c .marf-c-tool[aria-expanded="true"] {
	color: var(--marf-c-accent);
}

@supports (color: color-mix(in srgb, red 50%, transparent)) {
	.marf-c .marf-c-tool:hover,
	.marf-c .marf-c-tool:focus-visible,
	.marf-c .marf-c-tool[aria-expanded="true"] {
		background: color-mix(in srgb, currentColor 14%, transparent);
	}
}

.marf-c-counter {
	color: var(--marf-c-muted);
	font-size: 0.78em;
	font-variant-numeric: tabular-nums;
	margin-left: 6px;
	white-space: nowrap;
}

.marf-c-counter.is-over {
	color: #e5484d;
	font-weight: 700;
}

/* Botones */

.marf-c .marf-c-btn {
	align-items: center;
	border: 1px solid transparent;
	border-radius: 999px;
	display: inline-flex;
	font-size: 0.92em;
	font-weight: 600;
	justify-content: center;
	line-height: 1.2;
	padding: 8px 20px;
	transition: filter .15s ease, transform .06s ease, border-color .15s ease, color .15s ease;
}

.marf-c .marf-c-btn:active {
	transform: translateY(1px);
}

.marf-c .marf-c-btn[disabled] {
	cursor: not-allowed;
	opacity: .55;
}

.marf-c .marf-c-btn--primary {
	background: var(--marf-c-accent);
	color: var(--marf-c-accent-contrast);
}

.marf-c .marf-c-btn--primary:hover:not([disabled]) {
	filter: brightness(1.08);
}

.marf-c .marf-c-btn--ghost {
	border-color: var(--marf-c-border);
	color: inherit;
	padding: 10px 22px;
	width: 100%;
}

.marf-c .marf-c-btn--ghost:hover {
	border-color: var(--marf-c-accent);
	color: var(--marf-c-accent);
}

/* Identidad del invitado */

.marf-c-identity {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	margin-top: 12px;
}

.marf-c .marf-c-field label {
	color: var(--marf-c-muted);
	display: block;
	font-size: 0.78em;
	font-weight: 600;
	margin-bottom: 5px;
	text-transform: none;
}

.marf-c .marf-c-field input {
	background: var(--marf-c-surface);
	border: 1px solid var(--marf-c-border);
	border-radius: 999px;
	font-size: 0.92em;
	height: auto;
	padding: 9px 16px;
	width: 100%;
}

.marf-c .marf-c-field input:focus {
	border-color: var(--marf-c-accent);
	outline: none;
}

.marf-c .marf-c-field small {
	color: var(--marf-c-muted);
	display: block;
	font-size: 0.74em;
	margin-top: 4px;
	opacity: .85;
	padding-left: 4px;
}

.marf-c-hp {
	height: 1px;
	left: -9999px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
}

.marf-c-error,
.marf-c-notice {
	border-radius: calc(var(--marf-c-radius) * 0.7);
	font-size: 0.88em;
	padding: 10px 13px;
}

.marf-c-error {
	background: rgba(229, 72, 77, .14);
	color: #e5484d;
	margin: 12px 0 0;
}

.marf-c-notice {
	background: var(--marf-c-surface);
	border: 1px solid var(--marf-c-border);
	margin-bottom: var(--marf-c-gap);
}

/* ---------------------------------------------------------- 5. Adjuntos */

.marf-c-attachments {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 8px 14px 2px;
}

.marf-c-attachments:empty {
	display: none;
}

.marf-c-thumb {
	background: var(--marf-c-surface);
	border: 1px solid var(--marf-c-border);
	border-radius: 12px;
	height: 74px;
	overflow: hidden;
	position: relative;
	width: 74px;
}

.marf-c-thumb img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.marf-c-thumb.is-loading {
	color: var(--marf-c-muted);
	display: grid;
	font-size: 0.66em;
	place-items: center;
	text-align: center;
}

.marf-c .marf-c-thumb-remove {
	align-items: center;
	background: rgba(0, 0, 0, .68);
	border-radius: 50%;
	color: #fff;
	display: flex;
	font-size: 14px;
	height: 20px;
	justify-content: center;
	line-height: 1;
	position: absolute;
	right: 4px;
	top: 4px;
	width: 20px;
}

/* ---------------------------------------------------------- 6. Desplegables */

/* Menciones: van sobre lo que haya, cristal esmerilado fuerte para que se
   lean igual en una sección clara que sobre una fotografía. */
.marf-c-mentions {
	-webkit-backdrop-filter: blur(22px) saturate(1.5);
	backdrop-filter: blur(22px) saturate(1.5);
	background: rgba(125, 125, 125, .3);
	border: 1px solid var(--marf-c-border);
	border-radius: 16px;
	bottom: calc(100% + 8px);
	box-shadow: 0 16px 40px rgba(0, 0, 0, .3);
	left: 6px;
	position: absolute;
	z-index: 40;
}

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
	.marf-c-mentions {
		background: rgba(122, 122, 122, .94);
	}
}

/* Emojis y GIF: panel sólido que cuelga dentro del editor, debajo de la barra
   de herramientas. Al estar en el flujo empuja el contenido en vez de taparlo. */
.marf-c-popover {
	--marf-c-muted: rgba(28, 30, 33, .6);
	--marf-c-border: rgba(0, 0, 0, .12);
	--marf-c-surface: rgba(0, 0, 0, .05);

	background: #fff;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 14px;
	box-shadow: 0 10px 26px rgba(0, 0, 0, .16);
	color: #1c1e21;
	display: flex;
	flex-direction: column;
	margin: 0 10px 10px;
	max-height: 330px;
	padding: 10px;
	position: relative;
	width: auto;
	z-index: 5;
}

.marf-c .marf-c-popover-search {
	background: rgba(128, 128, 128, .18);
	border: 1px solid var(--marf-c-border);
	border-radius: 999px;
	flex: none;
	font-size: 0.88em;
	margin-bottom: 8px;
	padding: 8px 14px;
	width: 100%;
}

.marf-c .marf-c-popover-search:focus {
	border-color: var(--marf-c-accent);
	outline: none;
}

.marf-c-popover-note {
	color: var(--marf-c-muted);
	font-size: 0.85em;
	margin: 0;
	padding: 16px 4px;
	text-align: center;
}

.marf-c-emoji-body {
	overflow-y: auto;
	scrollbar-width: thin;
}

.marf-c-emoji-title {
	color: var(--marf-c-muted);
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: .04em;
	margin: 6px 0 4px;
	text-transform: uppercase;
}

.marf-c-emoji-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
	gap: 2px;
}

.marf-c .marf-c-emoji {
	align-items: center;
	border-radius: 8px;
	display: flex;
	font-size: 25px;
	height: 40px;
	justify-content: center;
	line-height: 1;
}

.marf-c .marf-c-emoji:hover,
.marf-c .marf-c-emoji:focus-visible {
	background: rgba(0, 0, 0, .07);
}

.marf-c-gif-grid {
	columns: 2;
	column-gap: 6px;
	overflow-y: auto;
	scrollbar-width: thin;
}

.marf-c .marf-c-gif-item {
	border-radius: 10px;
	break-inside: avoid;
	display: block;
	margin-bottom: 6px;
	overflow: hidden;
	width: 100%;
}

.marf-c .marf-c-gif-item img {
	display: block;
	height: auto;
	width: 100%;
}

.marf-c .marf-c-gif-item:hover img,
.marf-c .marf-c-gif-item:focus-visible img {
	opacity: .8;
}

.marf-c-mentions {
	max-height: 260px;
	min-width: 230px;
	overflow-y: auto;
	padding: 5px;
	width: min(320px, calc(100vw - 40px));
}

.marf-c-mention-item {
	align-items: center;
	border-radius: 10px;
	cursor: pointer;
	display: flex;
	font-size: 0.88em;
	gap: 9px;
	padding: 7px 9px;
}

.marf-c-mention-item.is-active,
.marf-c-mention-item:hover {
	background: rgba(128, 128, 128, .22);
}

@supports (color: color-mix(in srgb, red 50%, transparent)) {
	.marf-c-mention-item.is-active,
	.marf-c-mention-item:hover {
		background: color-mix(in srgb, var(--marf-c-accent) 18%, transparent);
	}
}

.marf-c-mention-item img {
	border-radius: 50%;
	flex: none;
	height: 26px;
	width: 26px;
}

.marf-c-mention-item span {
	display: block;
	font-weight: 600;
}

.marf-c-mention-item small {
	color: var(--marf-c-muted);
	display: block;
	font-size: 0.78em;
}

/* ---------------------------------------------------------- 7. Panel de la lista */

.marf-c-panel {
	border-radius: 20px;
	padding: var(--marf-c-panel-pad);
	position: relative;
}

/* Misma familia visual que el editor y los campos de nombre/email: borde
   claro y fondo apenas un punto distinto para leerse como otra sección. */
.marf-c--fondo-dark .marf-c-panel,
.marf-c--fondo-light .marf-c-panel {
	background: var(--marf-c-surface);
	border: 1px solid var(--marf-c-border);
}

.marf-c--fondo-dark .marf-c-panel {
	box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, calc(var(--marf-c-panel-veil) * 0.22));
}

.marf-c--fondo-light .marf-c-panel {
	box-shadow: inset 0 0 0 100vmax rgba(255, 255, 255, calc(var(--marf-c-panel-veil) * 0.22));
}

.marf-c--fondo-none .marf-c-panel {
	background: none;
	border: 0;
	box-shadow: none;
	padding: 0;
}

.marf-c--glass.marf-c--fondo-dark .marf-c-panel,
.marf-c--glass.marf-c--fondo-light .marf-c-panel {
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.marf-c-panel.is-empty {
	padding-block: calc(var(--marf-c-panel-pad) * 0.6);
}

/* ---------------------------------------------------------- 8. Lista */

.marf-c-list {
	display: flex;
	flex-direction: column;
	gap: var(--marf-c-gap);
}

.marf-c-list:empty {
	display: none;
}

.marf-c-item {
	display: flex;
	gap: 12px;
	scroll-margin-top: 90px;
}

.marf-c-item-avatar {
	flex: none;
}

.marf-c-avatar {
	background: var(--marf-c-surface);
	border-radius: var(--marf-c-avatar-radius);
	display: block;
	height: var(--marf-c-avatar);
	overflow: hidden;
	width: var(--marf-c-avatar);
}

.marf-c-avatar img {
	border-radius: inherit;
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.marf-c-item-main {
	flex: 1;
	min-width: 0;
}

.marf-c-item-head {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 9px;
	margin-bottom: 2px;
}

.marf-c-author {
	font-weight: 650;
}

.marf-c .marf-c-author a {
	color: inherit;
	text-decoration: none;
}

.marf-c .marf-c-author a:hover {
	text-decoration: underline;
}

.marf-c-badge {
	background: rgba(128, 128, 128, .2);
	border-radius: 20px;
	color: var(--marf-c-accent);
	font-size: 0.68em;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.7;
	padding: 1px 8px;
	text-transform: uppercase;
	white-space: nowrap;
}

@supports (color: color-mix(in srgb, red 50%, transparent)) {
	.marf-c-badge {
		background: color-mix(in srgb, var(--marf-c-accent) 16%, transparent);
	}

	.marf-c-badge--admin {
		background: color-mix(in srgb, #e5484d 16%, transparent);
	}
}

.marf-c-badge--admin {
	color: #e5484d;
}

.marf-c .marf-c-date,
.marf-c-edited,
.marf-c-pending {
	color: var(--marf-c-muted);
	font-size: 0.79em;
	text-decoration: none;
	white-space: nowrap;
}

.marf-c .marf-c-date:hover {
	color: var(--marf-c-accent);
}

.marf-c-pending {
	background: rgba(219, 166, 23, .2);
	border-radius: 20px;
	color: #d3a015;
	padding: 1px 8px;
}

/* Contenido */

.marf-c-body {
	overflow-wrap: anywhere;
}

.marf-c-body > *:first-child {
	margin-top: 0;
}

.marf-c-body > *:last-child {
	margin-bottom: 0;
}

.marf-c-body p {
	margin: 0 0 .55em;
}

.marf-c .marf-c-link {
	color: var(--marf-c-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.marf-c-plainlink {
	opacity: .85;
	word-break: break-all;
}

.marf-c-quote {
	border-left: 3px solid var(--marf-c-border);
	color: var(--marf-c-muted);
	font-style: normal;
	margin: .5em 0;
	padding: 2px 0 2px 13px;
}

.marf-c .marf-c-list li {
	margin-left: 1.15em;
}

.marf-c-code,
.marf-c-pre {
	background: rgba(128, 128, 128, .16);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.marf-c-code {
	border-radius: 4px;
	font-size: 0.87em;
	padding: 1px 5px;
}

.marf-c-pre {
	border-radius: 10px;
	font-size: 0.85em;
	margin: .6em 0;
	overflow-x: auto;
	padding: 12px 14px;
}

.marf-c-pre code {
	background: none;
	padding: 0;
}

.marf-c-spoiler {
	background: currentColor;
	border-radius: 3px;
	cursor: pointer;
	transition: color .15s ease;
}

.marf-c-spoiler.is-open {
	background: rgba(128, 128, 128, .16);
	color: inherit;
	cursor: auto;
}

.marf-c .marf-c-mention {
	color: var(--marf-c-accent);
	font-weight: 600;
	text-decoration: none;
}

.marf-c .marf-c-mention:hover {
	text-decoration: underline;
}

.marf-c-removed {
	color: var(--marf-c-muted);
	font-style: italic;
}

.marf-c-embed {
	margin: .7em 0;
	max-width: 640px;
}

.marf-c-embed--ratio iframe {
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: 10px;
	display: block;
	height: auto;
	width: 100%;
}

.marf-c-embed--image img {
	border-radius: 10px;
	display: block;
	height: auto;
	max-width: 100%;
}

.marf-c-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 9px;
}

.marf-c-gallery-item {
	border: 1px solid var(--marf-c-border);
	border-radius: 12px;
	display: block;
	max-width: 200px;
	overflow: hidden;
}

.marf-c-gallery-item img {
	display: block;
	height: auto;
	width: 100%;
}

/* Acciones */

.marf-c-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin-top: 7px;
}

.marf-c .marf-c-action {
	color: var(--marf-c-muted);
	font-size: 0.81em;
	font-weight: 600;
	text-decoration: none;
}

.marf-c .marf-c-action:hover {
	color: var(--marf-c-accent);
}

.marf-c .marf-c-action--danger:hover {
	color: #e5484d;
}

.marf-c .marf-c-action--muted {
	font-weight: 500;
	opacity: .7;
}

.marf-c-slot {
	margin-top: 14px;
}

.marf-c-slot:empty {
	display: none;
}

/* Hilos */

.marf-c-replies {
	display: flex;
	flex-direction: column;
	gap: var(--marf-c-gap);
	margin-top: var(--marf-c-gap);
	padding-left: var(--marf-c-indent);
	position: relative;
}

.marf-c--lines .marf-c-replies::before {
	background: var(--marf-c-border);
	border-radius: 2px;
	bottom: 4px;
	content: "";
	left: calc(var(--marf-c-indent) / 2 - 1px);
	position: absolute;
	top: 0;
	width: 2px;
}

.marf-c-item.is-pending {
	opacity: .8;
}

.marf-c-item.is-new {
	animation: marf-c-in .4s ease;
}

@keyframes marf-c-in {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}

/* Estado vacío: al final del bloque y centrado. */
.marf-c-empty {
	color: var(--marf-c-muted);
	margin: 0;
	padding: 6px 0;
	text-align: center;
}

.marf-c-list:not(:empty) + .marf-c-more + .marf-c-empty {
	margin-top: 5px;
}

.marf-c-closed,
.marf-c .marf-c-login {
	color: var(--marf-c-muted);
	margin: 0;
}

.marf-c .marf-c-login a {
	color: var(--marf-c-accent);
}

.marf-c-more {
	margin-top: var(--marf-c-gap);
}

.marf-c-more:has(> [hidden]) {
	display: none;
}

.marf-c-editor-note {
	background: var(--marf-c-surface);
	border: 1px dashed var(--marf-c-border);
	border-radius: var(--marf-c-radius);
	color: var(--marf-c-muted);
	font-size: 0.85em;
	margin-bottom: 12px;
	padding: 10px 14px;
}

/* ---------------------------------------------------------- 9. Variantes */

.marf-c--card .marf-c-item-main,
.marf-c--bubble .marf-c-item-main {
	background: var(--marf-c-surface);
	border-radius: var(--marf-c-radius);
	padding: 12px 16px;
}

.marf-c--card .marf-c-item-main {
	border: 1px solid var(--marf-c-border);
}

.marf-c--bubble .marf-c-item-main {
	border-radius: 18px;
	border-top-left-radius: 5px;
}

.marf-c--divided .marf-c-item {
	border-bottom: 1px solid var(--marf-c-border);
	padding-bottom: var(--marf-c-gap);
}

.marf-c--divided .marf-c-replies .marf-c-item:last-child,
.marf-c--divided .marf-c-list > .marf-c-item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

/* ---------------------------------------------------------- 10. Accesibilidad */

.marf-c .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.marf-c :focus-visible {
	outline: 2px solid var(--marf-c-accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.marf-c *,
	.marf-c *::before,
	.marf-c *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

/* ---------------------------------------------------------- 11. Móvil */

@media (max-width: 782px) {
	.marf-c {
		--marf-c-indent: 16px;
		--marf-c-panel-pad: 16px;
	}
}

@media (max-width: 480px) {
	.marf-c {
		--marf-c-avatar: 32px;
		--marf-c-indent: 10px;
		--marf-c-panel-pad: 12px;
	}

	.marf-c-item {
		gap: 9px;
	}

	.marf-c .marf-c-textarea {
		padding-inline: 14px;
	}

	.marf-c .marf-c-btn--primary {
		padding-inline: 16px;
	}

	.marf-c-popover {
		left: 0;
		right: 0;
		width: auto;
	}
}