/* ============================================================
   components/EtiquetaChip.css
   ------------------------------------------------------------
   Componente compartido: "etq-chip" - etiqueta de entidad con
   colorimetria de paleta cerrada (ADR 0013). La clave de color
   persiste en BD (Etiquetas.EtiquetaColor) y se traduce aqui a
   un par fondo/texto con contraste AA. Fuente unica de verdad
   visual para el etiquetado (catalogo admin, expediente,
   listado de Personal y futuros contextos como Contratos).

   Las claves CSS deben mantenerse sincronizadas con
   Models/Helpers/EtiquetaPaleta.cs (20 colores).

   Estructura del marcado (ver shared/etiquetaChip.js):
     <span class="etq-chip etq-color-verde" title="...">
        <i class="bi bi-... etq-chip-icon"></i>   (opcional)
        <span class="etq-chip-text">BONO 2026</span>
        <button class="etq-chip-remove" ...>      (opcional)
            <i class="bi bi-x"></i>
        </button>
     </span>
   ============================================================ */

.etq-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--etq-border, rgba(0, 0, 0, 0.12));
    background: var(--etq-bg, #e9ecef);
    color: var(--etq-fg, #343a40);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    max-width: 100%;
    vertical-align: middle;
}

.etq-chip .etq-chip-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.etq-chip .etq-chip-icon {
    font-size: 0.8rem;
    line-height: 1;
}

/* Boton opcional para quitar la etiqueta (expediente/listado). */
.etq-chip .etq-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: inherit;
    opacity: 0.55;
    padding: 0;
    margin-left: 0.1rem;
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
}

.etq-chip .etq-chip-remove:hover {
    opacity: 1;
}

/* Chip interactivo (selector de filtro / catalogo). */
.etq-chip--selectable {
    cursor: pointer;
    user-select: none;
}

.etq-chip--selectable:hover {
    filter: brightness(0.96);
}

.etq-chip--selected {
    box-shadow: 0 0 0 2px var(--etq-fg, #343a40);
}

/* Version compacta para tarjetas del listado. */
.etq-chip--sm {
    font-size: 0.7rem;
    padding: 0.1rem 0.5rem;
}

/* Indicador de desbordamiento (+N) en tarjetas. */
.etq-chip--overflow {
    background: #f8f9fa;
    color: #495057;
    border-style: dashed;
    cursor: pointer;
}

/* Contenedor de fila de chips. */
.etq-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
}

/* Fila colapsada a una sola linea (expediente): el toggle "Ver todas" la
   expande cuando el contenido excede el ancho disponible. */
.etq-row--clamp {
    max-height: 1.85rem;
    overflow: hidden;
}

/* ------------------------------------------------------------
   Paleta cerrada: 20 pares fondo/texto (claves en MAYUSCULAS
   en BD; clases en minusculas). Contraste AA sobre fondo claro.
   ------------------------------------------------------------ */
.etq-color-gris      { --etq-bg: #e9ecef; --etq-fg: #343a40; --etq-border: #ced4da; }
.etq-color-pizarra   { --etq-bg: #dde3ea; --etq-fg: #2f3e4e; --etq-border: #c2ccd8; }
.etq-color-cafe      { --etq-bg: #e8ddd3; --etq-fg: #5d4037; --etq-border: #d3c2b2; }
.etq-color-terracota { --etq-bg: #f5ddd3; --etq-fg: #8d3f22; --etq-border: #e5c2b0; }
.etq-color-rojo      { --etq-bg: #f8d7da; --etq-fg: #842029; --etq-border: #f1aeb5; }
.etq-color-vino      { --etq-bg: #ecd4dd; --etq-fg: #6f1d3d; --etq-border: #d9b3c2; }
.etq-color-naranja   { --etq-bg: #ffe5d0; --etq-fg: #92400e; --etq-border: #fecba1; }
.etq-color-ambar     { --etq-bg: #ffe8c2; --etq-fg: #7c4a03; --etq-border: #f5d38a; }
.etq-color-amarillo  { --etq-bg: #fff3cd; --etq-fg: #664d03; --etq-border: #ffe69c; }
.etq-color-lima      { --etq-bg: #e8f5c8; --etq-fg: #3f5b0a; --etq-border: #d0e59a; }
.etq-color-verde     { --etq-bg: #d1e7dd; --etq-fg: #0f5132; --etq-border: #a3cfbb; }
.etq-color-esmeralda { --etq-bg: #c8ecdd; --etq-fg: #0b5c44; --etq-border: #99d6bd; }
.etq-color-turquesa  { --etq-bg: #ccf0ec; --etq-fg: #0f5a54; --etq-border: #9cdcd5; }
.etq-color-cian      { --etq-bg: #cff4fc; --etq-fg: #055160; --etq-border: #9eeaf9; }
.etq-color-cielo     { --etq-bg: #d4ecfb; --etq-fg: #114e75; --etq-border: #a9d7f4; }
.etq-color-azul      { --etq-bg: #cfe2ff; --etq-fg: #084298; --etq-border: #9ec5fe; }
.etq-color-indigo    { --etq-bg: #dcd9fb; --etq-fg: #3730a3; --etq-border: #bcb6f5; }
.etq-color-morado    { --etq-bg: #e6d9f7; --etq-fg: #59359a; --etq-border: #cdb4ee; }
.etq-color-fucsia    { --etq-bg: #f7d6f0; --etq-fg: #8f2d7e; --etq-border: #ecabdf; }
.etq-color-rosa      { --etq-bg: #fbd9e5; --etq-fg: #983b5e; --etq-border: #f5b2c9; }

/* ------------------------------------------------------------
   Selector de color (swatches) del CRUD admin de Etiquetas.
   ------------------------------------------------------------ */
.etq-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.etq-swatch {
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 50%;
    border: 1px solid var(--etq-border, rgba(0, 0, 0, 0.15));
    background: var(--etq-bg, #e9ecef);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--etq-fg, #343a40);
    font-size: 0.8rem;
    padding: 0;
}

.etq-swatch:hover {
    transform: scale(1.12);
}

.etq-swatch--selected {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--etq-fg, #343a40);
}