:root {
    --color-kapta-rojo: #FF3562;
    --color-kapta-gris: #5E5E5D;
    --color-kapta-verde: #01B0B7;
    --color-kapta-rojo--shade-20: #cc2a4e;
}

.color-kapta-rojo {
    color: var(--color-kapta-rojo);
}
.color-kapta-gris {
    color: var(--color-kapta-gris);
}

.bg-kapta-rojo {
    background-color: var(--color-kapta-rojo);
}
.bg-kapta-gris {
    background-color: var(--color-kapta-gris);
}

.btn-kapta-rojo {
    background-color: var(--color-kapta-rojo);
    border-color: var(--color-kapta-rojo);
    color: white;
    font-weight: 600;
    transition: all 0.3s ease-in-out;
}
.btn-kapta-rojo:hover {
    background-color: var(--color-kapta-rojo--shade-20);
    border-color: var(--color-kapta-rojo--shade-20);
    color: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Sobrescritura directa de Bootstrap 5 Checkbox */
.form-check-input.check-kapta-verde {
    --check-input-base-color: var(--color-kapta-verde); /* <--- Cambia solo este color */
    border-color: color-mix(in srgb, var(--check-input-base-color), white 60%);
}
.form-check-input.check-kapta-verde:checked {
    background-color: var(--check-input-base-color);
    border-color: var(--check-input-base-color);
}
.form-check-input.check-kapta-verde:focus {
    border-color: color-mix(in srgb, var(--check-input-base-color), white 50%);
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--check-input-base-color), white 75%);
}
.form-check-input.check-kapta-verde:checked:focus {
    border-color: color-mix(in srgb, var(--check-input-base-color), black 20%);
    background-color: var(--check-input-base-color);
}
.form-check-input.check-kapta-verde:indeterminate {
    background-color: var(--check-input-base-color);
    border-color: var(--check-input-base-color);
}
.form-check-input.check-kapta-verde:disabled {
    filter: grayscale(1);
    opacity: 0.5;
}