/* ============================================================
   Botones base, focus states y scrollbar webkit
   Extraído de custom.css (líneas originales 14–97)
   ============================================================ */

/*
 * Gradiente corporativo "azul Coexphal". Coincide con el avatar del chip de
 * usuario en topbar (.header-user-avatar). Se usa como background sólido en
 * .btn-primary y como hover-fill en .btn-outline-primary para mantener un
 * lenguaje visual coherente en toda la UI.
 *
 * Las variables de Bootstrap (--bs-btn-*) se mantienen para que el browser
 * tenga un color fallback correcto cuando el gradiente no aplique (focus
 * rings, contraste accesible, modo print que descarta backgrounds, etc.).
 */
:root {
    --coexphal-btn-gradient: linear-gradient(135deg, #5a8fd0, #2f6aa3);
    --coexphal-btn-gradient-hover: linear-gradient(135deg, #2f6aa3, #1f4a78);
}

.btn-outline-primary {
    --bs-btn-color: #3d7ebb;
    --bs-btn-border-color: #3d7ebb;
    --bs-btn-hover-bg: #3d7ebb;
    --bs-btn-hover-border-color: #3d7ebb;
    --bs-btn-active-bg: #3d7ebb;
    --bs-btn-active-border-color: #3d7ebb;
    --bs-btn-disabled-color: #3d7ebb;
    --bs-btn-disabled-border-color: #3d7ebb;
}

/* Cuando el outline se rellena (hover / focus / active), reutilizamos el
 * mismo gradiente que .btn-primary para que el "estado relleno" no rompa
 * la coherencia visual con el resto de botones primarios. */
.btn-outline-primary:hover,
.btn-outline-primary:focus-visible,
.btn-outline-primary:active,
.btn-outline-primary.active {
    background: var(--coexphal-btn-gradient) !important;
    color: #fff !important;
    border-color: #2f6aa3 !important;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #3d7ebb;
    --bs-btn-border-color: #3d7ebb;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #3d7ebb;
    --bs-btn-hover-border-color: #3d7ebb;
    --bs-btn-focus-shadow-rgb: none !important;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #3d7ebb;
    --bs-btn-active-border-color: #3d7ebb;
    --bs-btn-active-shadow: none !important;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #3d7ebb;
    --bs-btn-disabled-border-color: #3d7ebb;
    background: var(--coexphal-btn-gradient) !important;
    border: 1px solid rgba(0, 0, 0, 0.125);
}

.bg-primary {
    background-color: #3d7ebb !important;
}

.btn-outline-white:hover {
    color: #3d7ebb !important;
}

.text-warning {
    color: rgb(231 181 44) !important;
}

.bg-header-admin {
    background-color: #ebeef4 !important;
}

.btn:focus,
.btn:focus-visible,
.btn-check:focus+.btn {
    outline: none !important;
    box-shadow: none !important;
}

.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover {
    background: var(--coexphal-btn-gradient-hover) !important;
    box-shadow: none !important;
}

/* ─── .btn-group con .btn-primary: gradiente continuo ────────────────────
 *
 * Por defecto cada .btn-primary pinta su propio gradiente (claro→oscuro) en
 * su caja, así que en un grupo de varios botones se ven "saltos" de tono
 * entre el final de uno y el principio del siguiente. Para que el grupo
 * parezca un solo chip dividido, dejamos que el contenedor .btn-group sea
 * quien pinte el gradiente completo y volvemos los botones internos
 * transparentes — son ventanas al gradiente común.
 *
 * Hover/focus/active SÍ recupera el gradiente más oscuro del botón
 * individual, para que el feedback de interacción siga siendo visible.
 */
.btn-group:has(> .btn-primary) {
    background: var(--coexphal-btn-gradient);
    border-radius: var(--bs-btn-border-radius, 0.25rem);
    overflow: hidden;
}

.btn-group > .btn-primary {
    background: transparent !important;
    border-color: transparent;
}

.btn-group > .btn-primary:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.25);
}

.btn-group > .btn-primary:hover,
.btn-group > .btn-primary:focus,
.btn-group > .btn-primary:active,
.btn-group > .btn-primary.active {
    background: var(--coexphal-btn-gradient-hover) !important;
    border-color: transparent;
}

.text-primary {
    color: var(--bs-primary) !important;
}

.text-muted {
    color: var(--bs-dark-border-subtle) !important;
}

*::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-thumb {
    background-color: rgba(19, 21, 22, 0.2);
    border-radius: 10px;
    border: 2px solid #fff;
}

*::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #fff;
}