/* ===== Swatches de color (T2P) — prioridad máxima ===== */

/* Contenedor: filas y saltos correctos */
.af-inline-colors{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px 10px !important;
  padding:0 !important;
  margin:0 !important;
  list-style:none !important;
}

/* Ítems limpios */
.af-inline-colors > li{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}

/* Etiqueta clicable sin que cambie el tamaño al seleccionar */
.af-inline-colors .af-color-label{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  line-height:0 !important;
  gap:0 !important;
}

/* Oculta nombre/contador si molestan el flujo (opcional) */
.af-inline-colors .af-color-label .name,
.af-inline-colors .af-color-label .count{
  display:none !important;
}

/* Círculo base: tamaño fijo, SIEMPRE redondo, sin “resaltos” */
.af-inline-colors .af-color-label .af-color-box{
  --t2p-sz: 20px;
  width:var(--t2p-sz) !important;
  height:var(--t2p-sz) !important;
  border-radius:9999px !important;    /* círculo perfecto */
  aspect-ratio:1/1 !important;        /* evita óvalos */
  display:inline-block !important;
  box-sizing:border-box !important;
  margin:0 !important;
  padding:0 !important;
  border:1px solid #d1d5db !important; /* borde fino constante */
  overflow:hidden !important;
  position:relative !important;
  background:#ccc !important;          /* color por defecto si no hay mapeo */
  transition:box-shadow .15s ease, outline-color .15s ease !important;
}

/* Evita pseudo-elementos del tema que ensanchan el chip */
.af-inline-colors .af-color-label .af-color-box::before,
.af-inline-colors .af-color-label .af-color-box::after{
  content:none !important;
}

/* Input ocupa todo el círculo pero no altera layout */
.af-inline-colors .af-color-label .af-color-box input[type="checkbox"]{
  position:absolute !important;
  inset:0 !important;
  opacity:0 !important;
  cursor:pointer !important;
  margin:0 !important;
  padding:0 !important;
}

/* Hover/Focus: aro dorado SIN cambiar tamaño */
.af-inline-colors .af-color-label:hover .af-color-box,
.af-inline-colors .af-color-label:focus-within .af-color-box{
  outline:2px solid #c3a461 !important;
  outline-offset:2px !important;
}

/* Seleccionado: aro dorado — no toca el borde (no altera ancho) */
.af-inline-colors .af-color-label.checked .af-color-box,
.af-inline-colors .af-color-label[aria-checked="true"] .af-color-box,
.af-inline-colors .af-color-label:has(input:checked) .af-color-box{
  outline:2px solid #c3a461 !important;
  outline-offset:2px !important;
  box-shadow:0 0 0 2px rgba(195,164,97,.15) !important; /* leve glow */
}

/* ===== Mapeo de colores por title — gana al inline style (#FFFFFF) ===== */
.af-inline-colors .af-color-label[title="Black"]      .af-color-box{background:#000 !important;}
.af-inline-colors .af-color-label[title="Blanco"],
.af-inline-colors .af-color-label[title="White"]      .af-color-box{background:#fff !important;}
.af-inline-colors .af-color-label[title="Blue"]       .af-color-box{background:#1e90ff !important;}
.af-inline-colors .af-color-label[title="Blue aqua"]  .af-color-box{background:#17c0eb !important;}
.af-inline-colors .af-color-label[title="Coral"]      .af-color-box{background:#ff6f61 !important;}
.af-inline-colors .af-color-label[title="CYAN"]       .af-color-box{background:#00bcd4 !important;}
.af-inline-colors .af-color-label[title="Fuchsia"]    .af-color-box{background:#e91e63 !important;}
.af-inline-colors .af-color-label[title="Green"]      .af-color-box{background:#2e7d32 !important;}
.af-inline-colors .af-color-label[title="Grey"],
.af-inline-colors .af-color-label[title="Gris"]       .af-color-box{background:#9e9e9e !important;}
.af-inline-colors .af-color-label[title="Indefinido"] .af-color-box{background:#bdbdbd !important;}
.af-inline-colors .af-color-label[title="Lilac"]      .af-color-box{background:#b39ddb !important;}
.af-inline-colors .af-color-label[title="Navy"]       .af-color-box{background:#0b2a4a !important;}
.af-inline-colors .af-color-label[title="Orange"]     .af-color-box{background:#ff9800 !important;}
.af-inline-colors .af-color-label[title="Pink"]       .af-color-box{background:#ff4081 !important;}
.af-inline-colors .af-color-label[title="Red"]        .af-color-box{background:#e53935 !important;}
.af-inline-colors .af-color-label[title="Unknow"]     .af-color-box{background:#bdbdbd !important;}
.af-inline-colors .af-color-label[title="Yellow"]     .af-color-box{background:#fdd835 !important;}

/* Para chips blancos: aro gris suave para que se vea el borde */
.af-inline-colors .af-color-label[title="Blanco"] .af-color-box,
.af-inline-colors .af-color-label[title="White"]  .af-color-box{
  border-color:#c7c7c7 !important;
}


/* Variante: sin límites ni scroll, pero con un pequeño espaciado */
:root .af_filter ul{
  max-height: none !important;
  overflow: visible !important;
  overflow-y: visible !important;
  padding: 0 0 6px 0 !important;
  margin: 0 !important;
}