/* ============================================================
   INBOX · el drawer de triaje de comentarios y DMs
   Calcado de metricas.css: mismo drawer, misma cabecera, mismo pie.

   Lo propio de esta pantalla es `.cm-promover`: el bloque donde el comentario viene
   pre-llenado y hay que reescribirlo. Tiene borde y fondo propios porque es un cambio de
   modo —se pasa de leer a decidir— y porque el hint que dice "esto sigue siendo el
   comentario pegado" tiene que verse mientras se escribe, no después de mandar.

   Solo tokens de /tokens.css — cero hex hardcodeado.
   `.on` para "seleccionado", nunca `.sel`.
   ============================================================ */

.cm-abrir .cm-dot{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--turquesa); margin-right:7px; vertical-align:middle;
}

:root{ --cm-ancho: 490px; }

.cm-panel{
  position:fixed; top:0; right:0; height:100vh; width:min(var(--cm-ancho), 100vw);
  background:var(--s1); border-left:1px solid var(--line); box-shadow:var(--shadow);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .22s ease;
  /* Mismo escalón que cta.css y publicar.css: por encima de --z-drawer-alto para no quedar
     tapado por conocimiento/métricas, y empatado con los otros dos drawers de Zernio, que
     se cierran entre ellos por el evento `tr3bol:drawer-abierto`. */
  z-index:calc(var(--z-drawer-alto) + 1);
}
.cm-panel.abierto{ transform:translateX(0); }
@media (prefers-reduced-motion: reduce){ .cm-panel{ transition:none; } }
@media (max-width: 520px){ .cm-panel{ width:100vw; } }

.cm-head{
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-6) var(--gut); border-bottom:1px solid var(--line);
}
.cm-head h3{ margin:0; font-size:var(--fs-base); }
.cm-head button{ font-size:var(--fs-xs); padding:4px 9px; }
/* .spacer se define una sola vez en /base.css. */
.cm-body{ flex:1; overflow-y:auto; padding:var(--sp-6) var(--gut); }
.cm-pie{
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-5) var(--gut); border-top:1px solid var(--line);
  min-height:18px;
}

/* Que lo que se lista NO es solo de esta pieza tiene que estar arriba de todo: el botón se
   apretó desde una pieza y la expectativa por defecto es la contraria. */
.cm-alcance{
  font-size:10.5px; color:var(--ink-3); line-height:1.45; margin-bottom:var(--sp-5);
  border-left:2px solid var(--line); padding-left:var(--sp-4);
}

/* ---------- filtros ---------- */

.cm-filtros{ display:flex; flex-direction:column; gap:var(--sp-2); margin-bottom:var(--sp-5); }
.cm-grupo{ display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
.cm-grupo-tit{
  font-size:var(--fs-micro); letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); min-width:46px;
}
.cm-chip{
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--s2);
  color:var(--ink-2); padding:4px 9px; font-size:var(--fs-xs); cursor:pointer;
}
.cm-chip:hover{ color:var(--ink); border-color:var(--line-soft); }
.cm-chip.on{
  background:var(--turquesa-dim); border-color:var(--turquesa-line); color:var(--ink);
  font-weight:600;
}

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

.cm-lista{ display:flex; flex-direction:column; gap:var(--sp-3); }
.cm-item{
  border:1px solid var(--line-soft); border-radius:var(--r-sm); background:var(--s2);
  padding:9px var(--sp-4); font-size:var(--fs-sm);
}
/* Lo ya triado se apaga pero no se esconde: sirve para no volver a mirarlo y para encontrar
   a qué idea fue a parar un comentario. */
.cm-item.cm-promovido,
.cm-item.cm-descartado{ opacity:.62; }
.cm-item-top{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.cm-red{
  font-family:var(--f-mono); font-size:var(--fs-micro); text-transform:uppercase;
  letter-spacing:.05em; color:var(--turquesa-ink);
}
.cm-tipo{ font-size:var(--fs-micro); color:var(--ink-3); }
.cm-cuando{ font-size:var(--fs-micro); color:var(--ink-3); font-family:var(--f-mono); }
/* El texto del comentario se muestra entero y con sus saltos: recortarlo obligaría a abrirlo
   en la red para decidir, que es la fricción que este panel existe para sacar. */
.cm-texto{
  margin-top:var(--sp-2); color:var(--ink); line-height:var(--lh-base);
  white-space:pre-wrap; word-break:break-word;
}
.cm-acciones{ display:flex; gap:var(--sp-2); flex-wrap:wrap; align-items:center; margin-top:var(--sp-3); }
.cm-acciones button{ font-size:var(--fs-xs); padding:4px 9px; }
.cm-ya{ font-size:var(--fs-xs); color:var(--ink-3); }
.cm-link{ color:var(--turquesa-ink); font-size:var(--fs-xs); }

.cm-nota{
  margin-top:var(--sp-6); border-left:2px solid var(--line); padding-left:var(--sp-4);
  font-size:10.5px; color:var(--ink-3); line-height:1.4;
}
.cm-nota-fila{ margin-top:var(--sp-1); white-space:pre-line; }

/* ---------- convertir en idea ---------- */

/* El bloque donde el comentario viene pre-llenado. Se separa del resto con borde propio
   porque acá se pasa de leer a decidir, y porque es el único lugar del panel donde lo que
   se escribe entra al banco. */
.cm-promover{
  margin-top:var(--sp-6); border:1px solid var(--turquesa-line); border-radius:var(--r-sm);
  background:var(--s2); padding:var(--sp-5) var(--sp-6);
}
.cm-promover[hidden]{ display:none; }
.cm-promover-tit{ font-size:var(--fs-md); color:var(--ink); font-weight:600; }
.cm-promover p{
  margin:var(--sp-2) 0 var(--sp-5); font-size:10.5px; color:var(--ink-2);
  line-height:var(--lh-base);
}
.cm-promover textarea{ font-family:var(--f-ui); font-size:var(--fs-sm); line-height:var(--lh-base); }

/* El hint cambia de color mientras se escribe: es el aviso de "esto sigue siendo el
   comentario pegado" y tiene que verse antes de mandar, no después del rebote del server. */
.cm-mal{ color:var(--rojo-ink); }
.cm-bien{ color:var(--turquesa-ink); }

/* ---------- avisos ---------- */

.cm-aviso{
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--s2);
  padding:9px var(--sp-5); font-size:var(--fs-sm); color:var(--ink-2);
  margin-bottom:var(--sp-5); line-height:1.45; white-space:pre-line;
}
.cm-aviso.err{ border-color:var(--rojo); color:var(--ink); }
.cm-aviso.ok{ border-color:var(--turquesa-line); color:var(--ink); }
.cm-aviso[hidden]{ display:none; }

/* "Todavía no está enchufado" no es un error: es un estado esperado mientras los endpoints
   se enchufan por tandas. Gris punteado, no rojo. */
.cm-pendiente{
  border:1px dashed var(--line); border-radius:var(--r-sm); background:transparent;
  padding:9px var(--sp-5); font-size:var(--fs-xs); color:var(--ink-3); line-height:1.45;
}