/* ============================================================================
   Apariencia — lo propio de esta pantalla.
   ----------------------------------------------------------------------------
   Solo la muestra de color. Lo reutilizable (el alto del selector dentro de un
   `input-group`, las reglas de las modales) vive en `personalizados.css`.
   ============================================================================ */

/* ── «Sin color» se ve, no se escribe ───────────────────────────────────────
   Un `<input type="color">` SIEMPRE muestra un color, así que hay que decir de
   alguna forma cuáles están en automático. Estuvo escrito al lado en texto
   —«automático», «#d8c1fb»— y Mario lo mandó sacar: con trece campos era una
   columna de hexadecimales que nadie lee.

   Ahora se ve en la propia muestra: la que está en automático va apagada y con
   una barra diagonal, que es como se marca «sin color» en cualquier herramienta
   de diseño. Y el botón de quitar se deshabilita, porque no hay nada que quitar
   — eso además contesta «¿está en automático?» sin leer nada. */
.ap-muestra {
  position: relative;
  display: inline-flex;
  line-height: 0;
}

.ap-muestra.sin-color input[type="color"] {
  opacity: .45;
  filter: grayscale(1);
}

.ap-muestra.sin-color::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;          /* la barra no puede robarle el clic al selector */
  border-radius: var(--ins-border-radius, 6px);
  background: linear-gradient(to top left,
              transparent calc(50% - 1px), var(--ins-danger, #f1556c) calc(50% - 1px),
              var(--ins-danger, #f1556c) calc(50% + 1px), transparent calc(50% + 1px));
}

/* ── Los siete colores del sistema, en una sola fila ────────────────────────
   Bootstrap reparte hasta seis columnas iguales (`row-cols-6`) y acá son SIETE:
   principal, secundario, éxito, peligro, aviso, información y oscuro. En vez de
   dejar el séptimo solo en una segunda fila, a partir de `xl` (1200 px) el ancho va
   a mano. Por debajo mandan las clases del grid —seis, cuatro, tres o dos por
   fila según el tamaño—, que es lo que hay que tocar si mañana son ocho. */
@media (min-width: 1200px) {
  .ap-paleta > [class*="col-"] {
    flex: 0 0 auto;
    width: 14.2857%;             /* 100 / 7 */
  }
}