/* El comentario sobre una pregunta. Discreto por diseño: el simbolo no
   compite con la pregunta, y solo se enciende cuando lo tocas. */

/* El color se HEREDA, no se fija. Se probó con una variable de gris y
   se perdió: el mismo boton vive sobre la ficha clara de la pregunta y
   sobre el fondo oscuro de la revelacion, y las dos pantallas llaman
   `--n2` a grises distintos -- en la calibracion era blanco al 40% y el
   simbolo quedaba INVISIBLE sobre papel. Heredando y bajando opacidad
   es discreto sobre cualquiera de los dos. */
.cm-btn{background:none;border:0;padding:6px;margin:0;cursor:pointer;
  color:inherit;opacity:.5;line-height:0;border-radius:2px;
  display:inline-flex;align-items:center;gap:7px}
.cm-btn:hover,.cm-btn:focus-visible{opacity:1;color:var(--laton-texto,#D9B877)}
/* Area de toque de 36px sin engordar el dibujo: en el telefono el icono
   mide 15px y un dedo no acierta 15px. */
.cm-btn .cm-svg{display:block;width:15px;height:15px}
.cm-btn:not(.cm-btn-txt){min-width:36px;min-height:36px;justify-content:center}
/* Con palabra al lado solo donde hay sitio para leerla (la ficha).
   En la pantalla de la pregunta va el simbolo solo. */
.cm-btn-txt{font:400 12px var(--sans,sans-serif);line-height:1.2;
  letter-spacing:.02em;padding:8px 4px}
.cm-btn-txt span{color:inherit}

.cm-capa{position:fixed;inset:0;background:rgba(21,36,42,.82);z-index:80;
  display:flex;padding:20px;overflow-y:auto;overscroll-behavior:contain}
.cm-capa>*{margin:auto}
.cm-modal{background:var(--vitrina,#15242a);border:1px solid var(--n3,#2b4048);
  border-radius:4px;max-width:460px;width:100%;padding:20px 22px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.85)}
.cm-tit{color:var(--laton-texto,#D9B877);font-family:var(--mono,monospace);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}
.cm-motivos{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.cm-chip{background:none;border:1px solid var(--n3,#2b4048);border-radius:2px;
  color:var(--hueso,#e8e2d5);font:400 13.5px var(--sans,sans-serif);
  padding:10px 13px;cursor:pointer;text-align:left}
.cm-chip:hover{border-color:var(--laton-texto,#D9B877)}
.cm-chip.sel{border-color:var(--laton-texto,#D9B877);background:rgba(176,133,66,.14)}
.cm-texto{width:100%;box-sizing:border-box;background:rgba(0,0,0,.18);
  border:1px solid var(--n3,#2b4048);border-radius:2px;color:var(--hueso,#e8e2d5);
  font:400 13.5px/1.5 var(--sans,sans-serif);padding:10px 12px;resize:vertical}
.cm-texto:focus{outline:none;border-color:var(--laton-texto,#D9B877)}
.cm-pie{color:var(--n2,#6f8189);font-size:11.5px;line-height:1.5;margin:10px 0 0}
.cm-pie.cm-fallo{color:var(--alfiler,#9e2b2b)}
.cm-gracias{font-family:var(--serif,serif);font-size:26px;margin:14px 0 2px}
.cm-acciones{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
.cm-cancelar,.cm-enviar{background:none;border:1px solid var(--n3,#2b4048);
  border-radius:2px;color:var(--hueso,#e8e2d5);font:600 13px var(--sans,sans-serif);
  padding:10px 18px;cursor:pointer}
.cm-cancelar:hover,.cm-enviar:hover:not(:disabled){border-color:var(--laton-texto,#D9B877)}
.cm-enviar:disabled{color:var(--n2,#6f8189);cursor:default}

/* YA COMENTADA. La burbuja se rellena: misma forma, sin ambigüedad.
   No lleva número ni color de aviso -- no es un logro ni un error, solo
   una señal de "aquí ya dijiste algo" para no repetirse sin saberlo. */
.cm-hecho{opacity:.85;color:var(--laton-texto,#D9B877)}
.cm-hecho .cm-svg path{fill:currentColor;fill-opacity:.22}
.cm-ya{color:var(--laton-texto,#D9B877);font-size:12px;line-height:1.5;margin:0 0 12px}

/* El rótulo del hueco de escribir. "Otra cosa" dejó de ser una opción y
   pasó a ser lo que siempre fue: el nombre de la caja. */
.cm-rot{font:400 12px var(--sans,sans-serif);letter-spacing:.02em;
  color:var(--n2,#6f8189);opacity:.85;margin:2px 0 5px}