/* Paleta de tags 0-11 (estilo Odoo, alineada con res.partner.category.color) */
.tag-chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.15rem 0.55rem; border-radius: 999px;
  font-size: 0.78rem; font-weight: 500; line-height: 1.4;
  border: 1px solid transparent;
  vertical-align: middle;
}
.tag-chip.tag-chip-sm { font-size: 0.7rem; padding: 0.1rem 0.45rem; }
.tag-chip-x {
  background: transparent; border: none; cursor: pointer;
  font-size: 1rem; line-height: 1; padding: 0 0.1rem;
  color: inherit; opacity: 0.6; font-weight: 700;
}
.tag-chip-x:hover { opacity: 1; }

.tag-chip[data-color="0"]  { background:#e8e8ee; color:#555;     border-color:#dadae0; }
.tag-chip[data-color="1"]  { background:#ffd6d6; color:#b40000;  border-color:#f5b5b5; }
.tag-chip[data-color="2"]  { background:#d9f7be; color:#1f7a1f;  border-color:#b8e890; }
.tag-chip[data-color="3"]  { background:#fff4d6; color:#8a6d00;  border-color:#f0deb0; }
.tag-chip[data-color="4"]  { background:#ffe7d4; color:#b15400;  border-color:#f5ccb0; }
.tag-chip[data-color="5"]  { background:#e3f0ff; color:#1e54b7;  border-color:#bdd6f5; }
.tag-chip[data-color="6"]  { background:#f0e3ff; color:#6a1eb7;  border-color:#d8bdf5; }
.tag-chip[data-color="7"]  { background:#ffe0f0; color:#b21260;  border-color:#f5b5d4; }
.tag-chip[data-color="8"]  { background:#d4f4ee; color:#126e5e;  border-color:#a8e0d5; }
.tag-chip[data-color="9"]  { background:#e9e9ff; color:#4a4ab2;  border-color:#c8c8f5; }
.tag-chip[data-color="10"] { background:#f5f0e1; color:#7a6b3a;  border-color:#dcd1ad; }
.tag-chip[data-color="11"] { background:#d5dee8; color:#2d4a6b;  border-color:#aebdce; }

.tag-chips-row {
  display: flex; flex-wrap: wrap; gap: 0.3rem;
  margin: 0.3rem 0;
}

/* TagSelector (widget para asignar tags) */
.tag-selector { width: 100%; }
.tag-selector .tag-chips-row { margin-bottom: 0.4rem; min-height: 1.2rem; }
.tag-input-wrap { position: relative; max-width: 100%; }
.ts-input {
  width: 100%; padding: 0.4rem 0.7rem; border: 1px dashed #c5c5cf;
  border-radius: 8px; font-size: 0.85rem; font-family: inherit;
  background: white; color: #555;
}
.ts-input:focus { outline: 2px solid #1a1a2e; border-style: solid; border-color: #1a1a2e; outline-offset: 0; color: #1a1a2e; }
.ts-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: white; border: 1px solid #ddd; border-radius: 8px;
  max-height: 240px; overflow-y: auto; z-index: 200;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.ts-item {
  padding: 0.45rem 0.7rem; cursor: pointer; font-size: 0.85rem;
  display: flex; align-items: center;
}
.ts-item:hover, .ts-item.active { background: #f0f8ff; }
.ts-item.ts-create { color: #1f7a1f; font-weight: 500; }
.ts-empty { padding: 0.6rem 0.7rem; color: #999; font-style: italic; font-size: 0.85rem; }

/* Color picker (página /tags) */
.color-picker { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.color-swatch {
  width: 28px; height: 28px; border-radius: 6px; cursor: pointer;
  border: 2px solid transparent; padding: 0;
}
.color-swatch.selected { border-color: #1a1a2e; box-shadow: 0 0 0 2px white inset; }
.color-swatch[data-color="0"]  { background:#e8e8ee; }
.color-swatch[data-color="1"]  { background:#ffd6d6; }
.color-swatch[data-color="2"]  { background:#d9f7be; }
.color-swatch[data-color="3"]  { background:#fff4d6; }
.color-swatch[data-color="4"]  { background:#ffe7d4; }
.color-swatch[data-color="5"]  { background:#e3f0ff; }
.color-swatch[data-color="6"]  { background:#f0e3ff; }
.color-swatch[data-color="7"]  { background:#ffe0f0; }
.color-swatch[data-color="8"]  { background:#d4f4ee; }
.color-swatch[data-color="9"]  { background:#e9e9ff; }
.color-swatch[data-color="10"] { background:#f5f0e1; }
.color-swatch[data-color="11"] { background:#d5dee8; }