/* Los tres selectores de color de los marcadores — js/ui-fmt-colors-panel.js.
   Archivo propio, y no una sección de css/sheet.css, por la misma razón por la
   que el JS se partió: estas reglas describen el INTERIOR del bloque y viajan
   con él. Mientras vivieron en la hoja de las modales funcionaban por
   coincidencia de carga —sheet.css se linkea siempre, así que el bloque se veía
   bien estuviera donde estuviera—, y esa coincidencia se rompe el día que
   alguien deje de cargar una hoja que ya no le hace falta.

   Lo que NO está acá es la clase del CONTENEDOR, y la 2.11.0 lo confirmó en la
   práctica: mientras el bloque colgaba de la hoja de marcadores, esa clase era
   `.markers-panel__colors` y su `border-top` no decía nada del bloque —decía
   «hay una tabla de sintaxis arriba de mí y me separo de ella»—. Es una COSTURA
   con un hermano, y el hermano lo elige el host. Al mudarse el bloque a
   #ajustes, la regla se fue de css/sheet.css sin que estas de acá se tocaran, y
   la costura de allá (`.ajustes__colors`) resultó no necesitar ninguna: el
   bloque abre su propia tarjeta y el gap de `.card` ya separa.

   Lo carga toda página que monte el panel: index.html —por #ajustes— y
   tests/{sheets,ajustes,desktop,i18n}.test.html. */

/* Gemela de `.markers-panel__note` (css/sheet.css), no compartida a propósito:
   una clase común volvería a atar los dos módulos por el CSS justo después de
   haberlos separado en el JS, y tres declaraciones repetidas son más baratas
   que esa atadura. */
.fmt-colors__note {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-hint);
  line-height: 1.45;
}

.fmt-colors__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.fmt-colors__swatch {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-hint);
  color: var(--color-text-muted);
}

.fmt-colors__swatch input[type="color"] {
  width: 40px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: none;
}