:root {
    --khipu-primario: #009688; 
    --khipu-primario-oscuro: #00796b; /* para hover */ 
    --khipu-primario-border: #607d8b; /* para bordes */ 
    --khipu-sombra: 0, 150, 136; /* Color de la sombra para el foco (solo los valores RGB, sin el 'rgba()') */
}

.btn-primary {
    background-color: var(--khipu-primario) !important;
    border-color: var(--khipu-primario-border) !important;
}

.btn-primary:hover {
    background: var(--khipu-primario-oscuro) !important;
    /* background-color: var(--khipu-primario-oscuro) !important; */
    border-color: var(--khipu-primario-oscuro) !important;
}

.btn-primary:focus {
    /* El foco (cuando se selecciona con el teclado) */
    box-shadow: 0 0 0 0.25rem rgba(var(--khipu-sombra), 0.5) !important;
}

/* Anular el color de texto para enlaces primarios */
.text-primary {
    color: var(--khipu-primario) !important;
}

.chip {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid #ddd;
    margin: 0 6px 6px 0;
    cursor: pointer;
    text-decoration: none;
    color: #444;
    background: #fafafa;
    transition: 0.15s;
}

.chip:hover {
    background: #eaeaea;
}

.chip.active {
    background-color: var(--khipu-primario);
    color: white;
    border-color: var(--khipu-primario-border);
}
.chip.active:hover {
    background-color: var(--khipu-primario-oscuro);
}

/* 1. Definimos la transición suave */
.chevron-icon {
    transition: transform 0.3s ease-in-out;
}

/* 2. La rotación cuando está ABIERTO */
/* Bootstrap QUITA la clase .collapsed cuando se abre. */
/* Entonces: cuando .accordion-toggle NO tiene .collapsed, rotamos */
.accordion-toggle:not(.collapsed) .chevron-icon {
    transform: rotate(180deg);
}