/* ---------------------------------------------------------------------------
   Barra del editor, por grupos
   ---------------------------------------------------------------------------
   Trece botones iguales repartidos en tres filas obligan a leerlos todos para
   encontrar uno. Agrupados por lo que hacen —formato, insertar, Greb— la vista
   va al grupo antes que al botón, y la barra cabe en una fila.

   Cada grupo es una pastilla con un solo borde exterior y filetes finos por
   dentro: menos líneas en pantalla, y la pertenencia se ve sin leer. */
.cmr-toolbar {
  gap: .5rem;
  padding: .45rem .5rem;
}

.cmr-tb-grupo {
  display: inline-flex;
  align-items: stretch;
  background: var(--blanco);
  border: 1px solid var(--crema);
  border-radius: 4px;
  overflow: hidden;
}

/* Los botones de dentro pierden su borde y su radio: el grupo ya los tiene. */
.cmr-tb-grupo .cmr-tb-btn {
  border: 0;
  border-radius: 0;
  border-left: 1px solid var(--crema);
  min-width: auto;
}

.cmr-tb-grupo .cmr-tb-btn:first-child { border-left: 0; }

/* El formato va sin texto: cuadrado y del ancho del icono. */
.cmr-tb-btn.es-icono {
  padding: .4em .55em;
  gap: 0;
}

.cmr-tb-btn.es-html span {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78rem;
  letter-spacing: .02em;
}

/* Greb aparte: lo que propone una máquina conviene que no se confunda con lo
   que hace el botón que se pulsa. */
.cmr-tb-grupo.es-greb { border-color: var(--naranja); }

.cmr-tb-grupo.es-greb .cmr-tb-btn { border-left-color: var(--naranja); }

.cmr-tb-grupo.es-greb .cmr-tb-btn:hover { background: var(--naranja); color: var(--tinta); }

.cmr-tb-grupo.es-greb .cmr-tb-btn:hover .cmr-icon { color: var(--tinta); }

/* En táctil los blancos crecen y los grupos se reparten en las filas que
   hagan falta, pero cada grupo sigue entero. */
@media (pointer: coarse) {
  .cmr-tb-btn { padding: .55em .75em; }
  .cmr-tb-btn.es-icono { padding: .55em .7em; }
}