/* Chip seleccionable: servicio, descuento, filtro de empleado, medio de
   pago — cualquier picker de una sola opción entre varias. Ver chips.js
   para el toggle entre hermanos (radio-like). */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.95rem;
    border-radius: 999px;
    border: 1.5px solid var(--borde_tarjeta_interna);
    background: var(--tarjeta_interna);
    color: var(--texto_menor_enfasis);
    font: 700 0.78rem "Ubuntu", sans-serif;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}

.chip:hover { transform: translateY(-1px); }
.chip:active { transform: scale(0.95); }

.chip.seleccionada {
    background: color-mix(in oklch, var(--base) 16%, var(--tarjeta_interna));
    border-color: var(--base);
    color: var(--texto);
}

.chip_avatar {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--texto_menor_enfasis);
    color: var(--tarjeta_interna);
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 0.6rem sans-serif;
    flex-shrink: 0;
}

.chip.seleccionada .chip_avatar { background: var(--base); color: var(--base_clara); }

.chip_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}