/* comentarios */
body#comentarios{
}

.comment-form{
	display:grid;
	place-items:center;
	min-height:100dvh;
	padding:8vw;
}

.comment-form article{
	display:grid;
	gap:2rem;
	width:min(100%,680px);
}

.comment-form header{
	display:grid;
	gap:.8rem;
}

.comment-form .lead,
.comment-form h1,
.comment-form header p{
	margin:0;
}

.comment-form form{
	display:grid;
	gap:1rem;
}

.comment-form label{
	display:grid;
	gap:.45rem;
}

.comment-form label span{
	display:block;
}

.comment-form input,
.comment-form textarea,
.comment-form button{
	width:100%;
	font:inherit;
}

.comment-form input,
.comment-form textarea{
	padding:1rem;
	border:1px solid currentColor;
	outline:none;
	background:transparent;
	color:inherit;
}

.comment-form textarea{
	min-height:11rem;
	resize:vertical;
}

.comment-form small{
	opacity:.65;
}

.comment-form .comment-msg{
	padding:1rem;
	border:1px solid currentColor;
}

.comment-form .hp{
	position:absolute;
	left:-9999px;
	opacity:0;
	pointer-events:none;
}

/* validar comentarios */
body#validar-comentarios{
}

.comentarios-admin{
	display:flex;
	flex-direction:column;
	min-height:100dvh;
	padding:4rem;
}

.comentarios-admin header{
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:2rem;
	margin-bottom:3rem;
}

.comentarios-admin header div{
	width:min(100%,46rem);
}

.comentarios-admin .lead{
	margin:0 0 .8rem;
}

.comentarios-admin h1{
	margin:0;
}

.comentarios-admin header p{
	margin:1rem 0 0;
	opacity:.68;
}

.comentarios-admin nav{
	display:flex;
	flex-wrap:wrap;
	justify-content:flex-end;
	gap:.6rem;
}

.comentarios-admin nav a{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:.65rem 1rem;
	border:1px solid currentColor;
	border-radius:999px;
	color:inherit;
	text-decoration:none;
}

.comentarios-admin nav a.active{
	outline:2px solid currentColor;
	outline-offset:2px;
}

.comentarios-grid{
	display:flex;
	flex-direction:column;
	gap:1rem;
}

.comentario-card{
	display:flex;
	flex-direction:column;
	gap:1.2rem;
	padding:1.4rem;
	border:1px solid currentColor;
}

.comentario-top{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:1rem;
}

.comentario-card h2{
	margin:0;
}

.comentario-meta{
	margin:.5rem 0 0;
	opacity:.55;
}

.comentario-texto{
	margin:0;
	overflow-wrap:anywhere;
}

.comentario-status{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:.4rem .7rem;
	border:1px solid currentColor;
	border-radius:999px;
}

.comentario-actions{
	display:flex;
	flex-wrap:wrap;
	gap:.5rem;
	margin-top:auto;
}

.comentario-actions button{
	padding:.7rem .9rem;
	border:1px solid currentColor;
	background:transparent;
	color:inherit;
	font:inherit;
	cursor:pointer;
}

.comentarios-empty{
	opacity:.55;
}

/* comentarios públicos como tarjetas */
section.comentarios-publicos .cards-track dd p{
	white-space:pre-line;
}

section.comentarios-publicos .cards-track dd small{
	display:block;
	margin-top:1rem;
	opacity:.55;
}

section.comentarios-publicos .cards-track dd .icon-text{
	display:block;
	margin-bottom:1rem;
}

section.comentarios-publicos .cards-track dd .artxt-toggle{
	display:none;
}

/* comentarios mobile */
@media (max-width:767px){
	.comment-form{
		place-items:start stretch;
		padding:3rem 1.25rem;
	}

	.comment-form article{
		gap:1.5rem;
	}

	.comentarios-admin{
		padding:2rem 1rem;
	}

	.comentarios-admin header{
		flex-direction:column;
		align-items:stretch;
		gap:1.5rem;
		margin-bottom:2rem;
	}

	.comentarios-admin nav{
		justify-content:flex-start;
	}

	.comentario-card{
		min-width:0;
		padding:1rem;
	}

	.comentario-top{
		flex-direction:column;
	}

	.comentario-status{
		align-self:flex-start;
	}

	.comentario-actions button{
		flex:1 1 auto;
	}
}