/* ============================================================
   duqe — bloque de comentarios
   ------------------------------------------------------------
   Hasta septiembre de 2026 el tema no tenía NI UNA regla para los
   comentarios. No es una exageración: buscando "comment" en toda la
   carpeta assets/ solo aparecía en un comentario de base.css. Lo que se
   veía en pantalla era, literalmente, el navegador: bordes 3D grabados,
   un ancho por campo (heredado del size="30" que mete WordPress) y las
   etiquetas pegadas al campo porque <label> es inline por defecto. El
   blog de 2026 con el WordPress de 2010 debajo.

   POR QUÉ ESTE ARCHIVO VA APARTE
   Podría vivir al final de blog.css. No lo hace por dos motivos: los
   comentarios solo existen en las entradas (así se encola donde hacen
   falta y no en las otras 40 páginas), y porque este bloque es un
   sistema completo —lista, monogramas, formulario— que conviene poder
   leer de una sentada.

   NO INVENTA UN FORMULARIO NUEVO
   La web ya tenía un lenguaje de formulario decidido y bonito: el de
   Contact Form 7 en /ayuda/ (help.css). Etiqueta encima en Montserrat
   600 de 14px, borde de 1,5px, radio de 14px y un foco que oscurece el
   borde hasta la tinta. Aquí se reproduce ese mismo lenguaje con clases
   propias, sin depender de que help.css esté encolado en las entradas.
   Si algún día se cambia el aspecto de los formularios del sitio, hay
   que cambiarlo en los dos sitios: es el precio de no acoplar el blog a
   la hoja de una página concreta.

   LA DOSIS DE ROJO
   Acento quirúrgico: menos de 200 px² por pantalla. En todo este bloque
   el rojo aparece en tres sitios y ninguno es una superficie grande:
     · el anillo del monograma de quien firma el blog (una forma),
     · el filo de una cita dentro de un comentario (un filete),
     · los estados: campo inválido, comentario pendiente, obligatorio.
   El botón "Publicar el comentario" se queda NEGRO. Montserrat de 16px
   en blanco sobre #E8382A da 4,17:1 y no llega al 4,5:1 que pide WCAG;
   además un botón rojo grita, y esta marca no grita. El negro es el
   activo; el rojo es solo el acento.
   ============================================================ */

.comments {
  /* Ancho de lectura: el mismo que .prose (720px). Si el bloque acaba
     dentro de una columna más estrecha, este máximo no hace nada. */
  max-width: 720px;
  margin: var(--sec) auto 0;
  padding-top: clamp(30px, 3.5vw, 44px);
  border-top: 1px solid var(--line-strong);
  /* Para que al llegar desde un enlace #comments el título no quede
     debajo de la cabecera pegajosa. */
  scroll-margin-top: 96px;
}

/* "3 COMENTARIOS". Mismo tono que los antetítulos del resto del sitio:
   es una etiqueta de sección, no un titular que compita con el del
   artículo. Por eso va en 13px y no en 32px, aunque sea un <h2>: la
   etiqueta la pone la semántica, el peso visual lo pone el CSS. */
.comments__eyebrow {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.2;
  margin: 0 0 clamp(24px, 3vw, 34px);
}

.comments__closed {
  font-size: 15px;
  color: var(--muted);
  background: var(--paper-2);
  border-radius: var(--r-md);
  padding: 16px 20px;
  margin: 0;
}

/* ------------------------------------------------------------
   LA LISTA
   Sin cajas, sin sombras y sin fondos alternos: separadores de 1px,
   como el resto del sitio. Una conversación es texto; enmarcar cada
   intervención en una tarjeta la convierte en una bandeja de entrada.
   ------------------------------------------------------------ */

.comments__list {
  list-style: none;
  margin: 0 0 clamp(40px, 5vw, 64px);
  padding: 0;
}
.comments__list .comment { list-style: none; }

.comments__list > .comment { padding: clamp(22px, 2.4vw, 30px) 0; }
.comments__list > .comment:first-child { padding-top: 0; }
.comments__list > .comment + .comment { border-top: 1px solid var(--line); }

.comment__body { display: block; }

.comment__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

/* Monograma local: la inicial en un círculo negro. Sustituye al avatar
   de Gravatar, que enviaba a un tercero el hash del correo de quien
   comenta y la IP de cada visitante que abría el artículo. Es el mismo
   círculo que ya usa el autor de la entrada en .article__meta .av, así
   que la página entera sigue hablando el mismo idioma. */
.comment__av {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  user-select: none;
}

/* Cuando quien comenta es el autor del blog, el monograma lleva un
   anillo rojo separado por un hilo de papel. Es un ANILLO y no un
   círculo rojo relleno a propósito: una letra blanca de 14px sobre
   #E8382A da 4,17:1 y no pasa el listón de WCAG. Así el rojo hace lo
   que sabe hacer —marcar un filo— y la letra conserva sus 18:1. */
.comment--mine .comment__av {
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--red);
}

.comment__who {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  min-width: 0;
}
.comment__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* Etiqueta "Autor". Va en --red-ink (5,63:1) y no en --red porque es
   texto de 10,5px: aquí el rojo de marca no llega. */
.comment__badge {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--red-ink);
  background: var(--red-wash);
  border: 1px solid var(--red-line);
  border-radius: 100px;
  padding: 2px 8px;
}

.comment__date {
  font-size: 13px;
  font-weight: 600;
  color: var(--faint);
  transition: color .2s var(--ease);
}
.comment__date:hover { color: var(--muted); }

/* Estado: comentario a la espera de moderación. Es un aviso, no un
   error del lector, así que lleva el tinte suave y no el rojo pleno. */
.comment__pending {
  font-size: 14px;
  line-height: 1.5;
  color: var(--red-ink);
  background: var(--red-wash);
  border-left: 2px solid var(--red);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 10px 14px;
  margin: 0 0 12px;
}

.comment__text {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
  /* Un comentario puede traer una URL de 90 caracteres sin un espacio;
     sin esto, esa URL ensancharía la página entera en móvil. */
  overflow-wrap: break-word;
}
.comment__text > * + * { margin-top: 0.9em; }
.comment__text a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.comment__text a:hover { text-decoration-color: var(--red); }
/* La cita dentro de un comentario: el filo en el tinte rojo suave. Es el
   único adorno que se permite aquí — la cita grande de .prose no aplica,
   un comentario no tiene voz de artículo. */
.comment__text blockquote {
  margin: 1em 0;
  padding-left: 16px;
  border-left: 2px solid var(--red-line);
  color: var(--muted);
}
.comment__text ul,
.comment__text ol { padding-left: 22px; margin: 0.9em 0; }
.comment__text code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.9em;
  background: var(--paper-2);
  border-radius: 5px;
  padding: 2px 6px;
}
.comment__text pre {
  background: var(--paper-2);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  overflow-x: auto;
}
.comment__text pre code { background: none; padding: 0; }

.comment__foot {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.comment__reply a,
.comment__edit a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--muted);
  transition: color .2s var(--ease);
}
.comment__reply a:hover,
.comment__edit a:hover { color: var(--ink); }

/* Respuestas anidadas: una línea vertical a la izquierda y nada más. La
   sangría dice de quién cuelga cada respuesta sin necesidad de dibujar
   una caja dentro de otra caja. */
.comments__list .children {
  list-style: none;
  margin: 22px 0 0;
  padding: 0 0 0 clamp(18px, 2vw, 30px);
  border-left: 1px solid var(--line);
}
.comments__list .children > .comment { padding: 18px 0; }
.comments__list .children > .comment:first-child { padding-top: 0; }
.comments__list .children > .comment + .comment { border-top: 1px solid var(--line); }
/* Del tercer nivel para abajo se sangra menos: en un móvil de 375px,
   cuatro sangrías de 30px dejan el texto en una columna de dos palabras. */
.comments__list .children .children { padding-left: clamp(12px, 1.4vw, 20px); }

/* Pingbacks y trackbacks: avisos entre servidores, no conversación. */
.comment--ping .comment__ping { font-size: 14px; color: var(--muted); margin: 0; }
.comment--ping .comment__ping a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================================
   EL FORMULARIO
   ============================================================ */

#respond { scroll-margin-top: 96px; }

.cform__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 10px;
}
/* "Cancelar" cuando se está respondiendo a alguien: es un enlace dentro
   del titular, así que se le quita el peso del titular a mano. */
.cform__cancel { font-family: var(--font-body); font-size: 14px; font-weight: 600; }
.cform__cancel a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cform__cancel a:hover { color: var(--ink); }

.cform__notes {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 58ch;
  margin: 0 0 26px;
}

/* Rejilla del formulario: nombre y correo a la par, todo lo demás a lo
   ancho. La regla se escribe al revés de lo que parece natural —primero
   "todo ocupa las dos columnas" y luego la excepción— porque en un
   formulario de WordPress pueden aparecer hijos que no hemos escrito
   nosotros (Akismet, un plugin antispam, el aviso de "has iniciado
   sesión como"). Así, lo desconocido siempre cae a lo ancho en vez de
   colarse en media columna. */
.cform {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
}
.cform > * { grid-column: 1 / -1; }
.cform > .cfield--author,
.cform > .cfield--email { grid-column: span 1; }
.cform input[type="hidden"] { display: none; }

@media (max-width: 620px) {
  .cform { grid-template-columns: 1fr; }
  .cform > .cfield--author,
  .cform > .cfield--email { grid-column: 1 / -1; }
}

.cfield { margin: 0; display: flex; flex-direction: column; }

.cfield label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 8px;
}
/* El asterisco de obligatorio, en el rojo que sí vale para letra. */
.cfield__req { color: var(--red-ink); font-weight: 700; }

.cfield input[type="text"],
.cfield input[type="email"],
.cfield textarea {
  width: 100%;
  /* 16px no es un capricho tipográfico: por debajo de 16px, iOS hace
     zoom al enfocar el campo y descoloca la página entera. */
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 13px 17px;
  transition: border-color .2s var(--ease);
  /* Mata el borde grabado que Safari y Chrome pintan por su cuenta. */
  -webkit-appearance: none;
  appearance: none;
}
.cfield textarea { min-height: 170px; resize: vertical; border-radius: 18px; }

.cfield input:hover,
.cfield textarea:hover { border-color: var(--faint); }

/* Al enfocar solo se oscurece el borde. NO se toca el outline: el anillo
   rojo de teclado lo pone la regla global de base.css, y escribir aquí
   un "outline: none" —como hacía el CSS de CF7— lo borraría y dejaría
   otra vez sin rastro visible a quien navega con el tabulador. */
.cfield input:focus,
.cfield textarea:focus { border-color: var(--ink); }

/* Estado de error. :user-invalid (no :invalid) porque solo debe marcarse
   en rojo el campo que la persona ha dejado mal DESPUÉS de intentarlo;
   :invalid pintaría de rojo un formulario recién abierto y vacío, que es
   la forma más rápida de que alguien se dé la vuelta. Si el navegador no
   conoce el selector, simplemente ignora la regla: por eso va suelta y no
   agrupada con las de arriba. */
.cfield input:user-invalid,
.cfield textarea:user-invalid { border-color: var(--red); }

.cfield input::placeholder,
.cfield textarea::placeholder { color: var(--faint); }

.cfield__hint {
  font-size: 13px;
  line-height: 1.45;
  color: var(--faint);
  margin-top: 7px;
}

/* Casilla de cookies. Solo aparece si se activa la opción en Ajustes →
   Comentarios; hoy está desactivada y por eso el blog no pone cookies de
   comentarios. El CSS se queda escrito para el día que se active. */
/* Se escribe "label.cfield__check" y no solo ".cfield__check" porque este
   elemento ES un <label> y la regla de arriba (.cfield label) tiene más
   especificidad que una clase suelta: sin el elemento en el selector, la
   casilla se quedaría con los 8px de separación y el peso 600 de una
   etiqueta de campo, que aquí no tocan. */
.cfield label.cfield__check {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 0;
}
.cfield__check input {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 2px;
  accent-color: var(--ink);
}
.cfield__check span {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink-2);
}

.cform__actions {
  margin: 6px 0 0;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.cform__submit { font-size: 16px; padding: 14px 30px; }
/* El anillo de foco global redondea a 4px el elemento que enfoca, y este
   botón es una cápsula de 100px: sin esta línea, al llegar con el
   tabulador el botón cambia de forma. Solo se corrige el radio; el color
   y el grosor del anillo siguen siendo los de base.css. */
.cform__submit:focus-visible { border-radius: 100px; }

.logged-in-as {
  font-size: 14.5px;
  color: var(--muted);
  margin: 0 0 18px;
}
.logged-in-as a,
.must-log-in a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.must-log-in { font-size: 15px; color: var(--muted); margin: 0; }

/* Cuando comment-reply.js mueve el formulario dentro de un comentario
   para responder, hay que separarlo de la conversación o parece parte
   del comentario al que se responde. */
.comment #respond {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.comment #respond .cform__title { font-size: 19px; }
.comment #respond .cform__notes { margin-bottom: 20px; }