/* ==========================================================================
   PRB Base - Comentarios

   El formulario se estila desde .comment-respond, no desde .comment-form.
   Motivo: el argumento class_form de comment_form() SUSTITUYE la clase del
   formulario, asi que cualquiera puede dejarlo sin ella sin darse cuenta.
   En cambio, el contenedor .comment-respond lo genera siempre WordPress y
   no se puede cambiar. Es un punto de anclaje que no se rompe.
   ========================================================================== */

.prb-comments {
	margin-top: var(--prb-space-2xl);
	padding-top: var(--prb-space-l);
	border-top: 1px solid var(--prb-color-border);
	scroll-margin-top: calc(var(--prb-header-height) + var(--prb-space-m));
}

.prb-comments-title {
	margin-bottom: var(--prb-space-l);
	font-size: var(--prb-text-l);
}

/* --------------------------------------------------------------------------
   Listado
   -------------------------------------------------------------------------- */
.prb-comment-list,
.prb-comment-list .children {
	margin: 0;
	padding: 0;
	list-style: none;
}

.prb-comment-list > li + li {
	margin-top: var(--prb-space-m);
	padding-top: var(--prb-space-m);
	border-top: 1px solid var(--prb-color-border);
}

/* Respuestas anidadas: se sangran poco en movil para no comerse el ancho. */
.prb-comment-list .children {
	margin-top: var(--prb-space-m);
	padding-left: var(--prb-space-s);
	border-left: 2px solid var(--prb-color-border);
}

@media (min-width: 48em) {
	.prb-comment-list .children { padding-left: var(--prb-space-l); }
}

.prb-comment-list .children > li + li {
	margin-top: var(--prb-space-m);
	padding-top: var(--prb-space-m);
	border-top: 1px solid var(--prb-color-border);
}

.prb-comment-list .comment-meta,
.prb-comment-list .comment-author {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--prb-space-2xs);
}

.prb-comment-list .comment-author img,
.prb-comment-list .avatar {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	object-fit: cover;
}

.prb-comment-list .fn {
	font-family: var(--prb-font-heading);
	font-style: normal;
	font-weight: 600;
	color: var(--prb-color-primary);
}

.prb-comment-list .says { display: none; }

.prb-comment-list .comment-metadata {
	font-size: var(--prb-text-s);
	color: var(--prb-color-muted);
}

.prb-comment-list .comment-metadata a {
	color: inherit;
	text-decoration: none;
}

.prb-comment-list .comment-metadata a:hover { text-decoration: underline; }

.prb-comment-list .comment-content {
	margin-top: var(--prb-space-2xs);
	overflow-wrap: break-word;
}

.prb-comment-list .comment-content > * + * { margin-top: var(--prb-space-s); }

/* A partir de tablet, el texto se alinea bajo el nombre del autor en vez de
   volver al margen. Se deja fuera del movil porque ahi el ancho es oro.
   Si desactivas los avatares en Ajustes -> Comentarios, quita este bloque. */
@media (min-width: 36em) {
	.prb-comment-list .comment-content,
	.prb-comment-list .reply {
		padding-left: calc(2.75rem + var(--prb-space-2xs));
	}
}

.prb-comment-list .comment-awaiting-moderation {
	display: inline-block;
	margin-top: var(--prb-space-2xs);
	padding: 0.2em 0.7em;
	background: var(--prb-color-surface);
	border-radius: 100px;
	font-size: var(--prb-text-s);
	color: var(--prb-color-muted);
}

.prb-comment-list .reply {
	margin-top: var(--prb-space-2xs);
	font-size: var(--prb-text-s);
}

.prb-comment-list .comment-reply-link {
	display: inline-block;
	padding: 0.25em 0.9em;
	border: 1px solid var(--prb-color-border);
	border-radius: 100px;
	text-decoration: none;
	transition: background var(--prb-transition), color var(--prb-transition), border-color var(--prb-transition);
}

.prb-comment-list .comment-reply-link:hover {
	background: var(--prb-color-primary);
	border-color: var(--prb-color-primary);
	color: var(--prb-color-bg);
}

.prb-comments-closed {
	margin-top: var(--prb-space-m);
	padding: var(--prb-space-s);
	background: var(--prb-color-surface);
	border-radius: var(--prb-radius);
	font-size: var(--prb-text-s);
	color: var(--prb-color-muted);
	text-align: center;
}

/* --------------------------------------------------------------------------
   Formulario
   -------------------------------------------------------------------------- */
.comment-respond {
	margin-top: var(--prb-space-xl);
	padding-top: var(--prb-space-l);
	border-top: 1px solid var(--prb-color-border);
}

.comment-reply-title {
	margin-bottom: var(--prb-space-2xs);
	font-size: var(--prb-text-l);
}

.comment-reply-title small {
	display: inline-block;
	margin-left: var(--prb-space-2xs);
	font-size: var(--prb-text-s);
	font-weight: 400;
}

.prb-comment-notes,
.comment-respond .comment-notes,
.comment-respond .logged-in-as {
	margin-bottom: var(--prb-space-m);
	font-size: var(--prb-text-s);
	color: var(--prb-color-muted);
}

.comment-respond form p { margin-bottom: var(--prb-space-s); }

.comment-respond label {
	display: block;
	margin-bottom: 0.3em;
	font-size: var(--prb-text-s);
	font-weight: 600;
	color: var(--prb-color-primary);
}

.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond input[type="url"],
.comment-respond textarea {
	display: block;
	width: 100%;
	padding: 0.7em 1em;
	background: var(--prb-color-bg);
	border: 1px solid var(--prb-color-border);
	border-radius: var(--prb-radius);
	font-size: var(--prb-text-base);
	line-height: 1.5;
}

.comment-respond textarea {
	resize: vertical;
	min-height: 9rem;
}

.comment-respond input:focus,
.comment-respond textarea:focus {
	outline: none;
	border-color: var(--prb-color-primary);
	box-shadow: 0 0 0 3px var(--prb-color-primary-soft);
}

.comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: var(--prb-space-2xs);
}

.comment-form-cookies-consent input {
	width: auto;
	margin-top: 0.35em;
	flex-shrink: 0;
}

.comment-form-cookies-consent label {
	margin: 0;
	font-weight: 400;
	font-size: var(--prb-text-s);
	color: var(--prb-color-muted);
}

/* En escritorio, nombre y correo comparten fila.
   Se hace con flex y no con inline-block: dos cajas al 50% mas un margen
   mas el espacio en blanco que HTML mete entre elementos en linea suman
   mas del 100% y acaban bajando una debajo de la otra. */
@media (min-width: 48em) {

	.comment-respond form {
		display: flex;
		flex-wrap: wrap;
		gap: 0 var(--prb-space-s);
	}

	.comment-respond form > * { flex: 1 1 100%; }

	.comment-respond .comment-form-author,
	.comment-respond .comment-form-email {
		flex: 1 1 calc(50% - var(--prb-space-s) / 2);
	}
}