/* Comentarios — paridad visual con el bloque del sitio React
   (cabecera «N Comentarios», selector de orden a la izquierda, formulario a la
   derecha, lista debajo con respuestas sangradas). */

.dl-coms{max-width:1000px;margin:0 auto}
.dl-coms-cab{font-size:.95rem;color:var(--slate,#212B38);font-weight:500}
.dl-coms-hr,.dl-com-hr{border:0;border-top:1px solid rgba(33,43,56,.12);margin:14px 0 26px}
.dl-coms-ok{background:#e8f4ea;border-left:3px solid #3f8f52;color:#245c33;padding:10px 14px;margin:0 0 20px;font-size:.9rem}
.dl-coms-vacio,.dl-coms-cerrado{color:var(--muted,#748D9E);font-weight:300}

.dl-coms-top{display:grid;grid-template-columns:minmax(180px,25%) 1fr;gap:24px;margin-bottom:34px;align-items:start}
.dl-coms-orden select{width:100%;padding:9px 10px;border:1px solid rgba(33,43,56,.18);border-radius:4px;
  background:#fff;font-family:inherit;font-size:.82rem;color:var(--slate,#212B38)}

.dl-coms-form{display:flex;flex-direction:column;gap:12px}
.dl-coms-form input[type=text],.dl-coms-form textarea{width:100%;padding:10px 12px;
  border:1px solid rgba(33,43,56,.18);border-radius:4px;background:#fff;
  font-family:inherit;font-size:.9rem;color:var(--slate,#212B38)}
.dl-coms-form textarea{resize:vertical;min-height:64px}
.dl-coms-form input:focus-visible,.dl-coms-form textarea:focus-visible,
.dl-coms-orden select:focus-visible{outline:2px solid var(--teal,#54AACB);outline-offset:2px}
.dl-coms-form .dl-cbtn{align-self:flex-start}

/* Campo trampa: fuera de pantalla, nunca display:none (algunos robots lo detectan). */
.dl-trampa{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

.dl-coms-respondiendo{display:flex;align-items:center;gap:10px;margin:0;font-size:.85rem;
  color:var(--muted,#748D9E);background:#eef3f6;padding:8px 12px;border-radius:4px}
.dl-coms-respondiendo button{background:none;border:0;color:var(--teal,#54AACB);
  font-family:inherit;font-size:.85rem;cursor:pointer;text-decoration:underline;padding:0}

/* ------------------------------------------------------------ la lista */

.dl-com{padding:0 0 4px}
.dl-com--hija{margin-left:44px;padding-left:16px;border-left:2px solid rgba(84,170,203,.35)}
.dl-com-cab{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;margin-bottom:6px}
.dl-com-nombre{font-size:1rem;font-weight:500;color:var(--slate,#212B38);overflow-wrap:anywhere}
.dl-com-fecha{font-size:.78rem;color:var(--muted,#748D9E);cursor:help}
.dl-com-texto{color:var(--slate,#212B38);font-weight:300;white-space:pre-wrap;overflow-wrap:anywhere}

.dl-com-acc{display:flex;align-items:center;gap:6px;margin:10px 0 18px}
.dl-voto{display:inline-flex;align-items:center;gap:5px;background:none;border:0;padding:4px 6px;
  color:var(--slate,#212B38);cursor:pointer;font-family:inherit;font-size:.85rem;border-radius:4px}
.dl-voto svg{width:20px;height:20px}
.dl-voto:hover{color:var(--teal,#54AACB);background:rgba(84,170,203,.10)}
.dl-voto.votado{color:var(--teal,#54AACB)}
.dl-voto[disabled]{opacity:.5;cursor:default}
.dl-voto:focus-visible,.dl-contestar:focus-visible{outline:2px solid var(--teal,#54AACB);outline-offset:2px}
.dl-voto .n{min-width:8px;font-variant-numeric:tabular-nums}
.dl-com-sep{color:rgba(33,43,56,.25)}
.dl-contestar{background:none;border:0;padding:4px 8px;margin-left:6px;color:var(--muted,#748D9E);
  font-family:inherit;font-size:.85rem;cursor:pointer;border-radius:4px}
.dl-contestar:hover{color:var(--teal,#54AACB)}

.dl-coms-mas{text-align:center;margin-top:10px}

@media(max-width:760px){
  .dl-coms-top{grid-template-columns:1fr;gap:16px}
  .dl-com--hija{margin-left:18px}
}