/* =======================
   CUSTOM 2026 THEME
   Sobrescribe Bootstrap + estilos personalizados
======================= */

:root {
  /* ====== Colores Base ====== */
  --bs-primary: #6256b4;
  --bs-primary-rgb: 98, 86, 180;

  --bs-secondary: #b33dd1;
  --bs-secondary-rgb: 179, 61, 209;

  --bs-success: #398365; /* Ajustado */
  --bs-success-rgb: 57, 131, 101;

  --bs-info: #339bb0;
  --bs-info-rgb: 51, 155, 176;

  --bs-warning: #e88f23;
  --bs-warning-rgb: 232, 143, 35;

  --bs-danger: #b03733;
  --bs-danger-rgb: 176, 55, 51;

  --bs-light: #f8f9fa;
  --bs-light-rgb: 248, 249, 250;

  --bs-dark: #212529;
  --bs-dark-rgb: 33, 37, 41;

  /* ====== Hovers y Activos ====== */
  --bs-primary-hover: #4c4291;
  --bs-primary-active: #393274;

  --bs-secondary-hover: #8e30a7;
  --bs-secondary-active: #6c2480;

  --bs-success-hover: #2f6c53;
  --bs-success-active: #22503c;

  --bs-info-hover: #277c8d;
  --bs-info-active: #1d5f6c;

  --bs-warning-hover: #b6701b;
  --bs-warning-active: #8a5414;

  --bs-danger-hover: #872b28;
  --bs-danger-active: #651f1e;
}

/* =======================
   BOTONES
======================= */

/* Primary */
.btn-primary {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--bs-primary-hover) !important;
  border-color: var(--bs-primary-hover) !important;
}
.btn-primary:active {
  background-color: var(--bs-primary-active) !important;
  border-color: var(--bs-primary-active) !important;
}

/* Secondary con gradiente */
.btn-secondary {
  background: linear-gradient(135deg, var(--bs-primary), #851d9f) !important;
  border: none !important;
  color: #fff !important;
}
.btn-secondary:hover,
.btn-secondary:focus {
  background: linear-gradient(135deg, #4c4291, #6c2480) !important;
}
.btn-secondary:active {
  background: linear-gradient(135deg, #393274, #54175f) !important;
}

/* Success */
.btn-success {
  background-color: var(--bs-success) !important;
  border-color: var(--bs-success) !important;
  color: #fff !important;
}
.btn-success:hover,
.btn-success:focus {
  background-color: var(--bs-success-hover) !important;
  border-color: var(--bs-success-hover) !important;
}
.btn-success:active {
  background-color: var(--bs-success-active) !important;
  border-color: var(--bs-success-active) !important;
}

/* Info */
.btn-info {
  background-color: var(--bs-info) !important;
  border-color: var(--bs-info) !important;
  color: #fff !important;
}
.btn-info:hover,
.btn-info:focus {
  background-color: var(--bs-info-hover) !important;
  border-color: var(--bs-info-hover) !important;
}
.btn-info:active {
  background-color: var(--bs-info-active) !important;
  border-color: var(--bs-info-active) !important;
}

/* Warning */
.btn-warning {
  background-color: var(--bs-warning) !important;
  border-color: var(--bs-warning) !important;
  color: #fff !important;
}
.btn-warning:hover,
.btn-warning:focus {
  background-color: var(--bs-warning-hover) !important;
  border-color: var(--bs-warning-hover) !important;
}
.btn-warning:active {
  background-color: var(--bs-warning-active) !important;
  border-color: var(--bs-warning-active) !important;
}

/* Danger */
.btn-danger {
  background-color: var(--bs-danger) !important;
  border-color: var(--bs-danger) !important;
  color: #fff !important;
}
.btn-danger:hover,
.btn-danger:focus {
  background-color: var(--bs-danger-hover) !important;
  border-color: var(--bs-danger-hover) !important;
}
.btn-danger:active {
  background-color: var(--bs-danger-active) !important;
  border-color: var(--bs-danger-active) !important;
}

/* =======================
   ALERTAS (versión clarita)
======================= */
.alert-primary {
  background-color: rgba(var(--bs-primary-rgb), 0.15) !important;
  border: 1px solid rgba(var(--bs-primary-rgb), 0.3) !important;
  color: var(--bs-primary) !important;
}
.alert-secondary {
  background-color: rgba(var(--bs-secondary-rgb), 0.15) !important;
  border: 1px solid rgba(var(--bs-secondary-rgb), 0.3) !important;
  color: var(--bs-secondary) !important;
}
.alert-success {
  background-color: rgba(var(--bs-success-rgb), 0.15) !important;
  border: 1px solid rgba(var(--bs-success-rgb), 0.3) !important;
  color: var(--bs-success) !important;
}
.alert-info {
  background-color: rgba(var(--bs-info-rgb), 0.15) !important;
  border: 1px solid rgba(var(--bs-info-rgb), 0.3) !important;
  color: var(--bs-info) !important;
}
.alert-warning {
  background-color: rgba(var(--bs-warning-rgb), 0.15) !important;
  border: 1px solid rgba(var(--bs-warning-rgb), 0.3) !important;
  color: var(--bs-warning) !important;
}
.alert-danger {
  background-color: rgba(var(--bs-danger-rgb), 0.15) !important;
  border: 1px solid rgba(var(--bs-danger-rgb), 0.3) !important;
  color: var(--bs-danger) !important;
}

/* =======================
   BADGES
======================= */
.badge-primary { background-color: var(--bs-primary) !important; }
.badge-secondary { background-color: var(--bs-secondary) !important; }
.badge-success { background-color: var(--bs-success) !important; }
.badge-info { background-color: var(--bs-info) !important; }
.badge-warning { background-color: var(--bs-warning) !important; }
.badge-danger { background-color: var(--bs-danger) !important; }

.badge.bg-light-primary { background-color: rgba(var(--bs-primary-rgb), 0.2) !important; color: var(--bs-primary) !important; }
.badge.bg-light-secondary { background-color: rgba(var(--bs-secondary-rgb), 0.2) !important; color: var(--bs-secondary) !important; }
.badge.bg-light-success { background-color: rgba(var(--bs-success-rgb), 0.2) !important; color: var(--bs-success) !important; }
.badge.bg-light-info { background-color: rgba(var(--bs-info-rgb), 0.2) !important; color: var(--bs-info) !important; }
.badge.bg-light-warning { background-color: rgba(var(--bs-warning-rgb), 0.2) !important; color: var(--bs-warning) !important; }
.badge.bg-light-danger { background-color: rgba(var(--bs-danger-rgb), 0.2) !important; color: var(--bs-danger) !important; }

/* =======================
   TOOLTIPS
======================= */
.tooltip-inner {
  background-color: var(--bs-dark) !important;
  color: #fff !important;
  border-radius: 6px !important;
  padding: 0.4rem 0.7rem !important;
  font-weight: 500 !important;
}
.tooltip.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: var(--bs-dark) !important;
}
.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: var(--bs-dark) !important;
}
.tooltip.bs-tooltip-start .tooltip-arrow::before {
  border-left-color: var(--bs-dark) !important;
}
.tooltip.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: var(--bs-dark) !important;
}


/* =======================
   EFECTO HOVER MÁS GRANDE
======================= */

/* Clase adicional para aplicar el efecto */
.btn-hover-effect {
  transition: all 0.35s ease-in-out !important;
  transform-origin: center !important;
}

.btn-hover-effect:hover {
  transform: translateY(-5px) scale(1.07) !important; /* Más elevación y escala */
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25) !important; /* Sombra más grande */
}

.btn-hover-effect:active {
  transform: translateY(0px) scale(0.95) !important; /* Efecto de "hundimiento" */
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18) !important;
}

/* =======================
   BTN-SECONDARY CON EFECTO GRADIENTE POTENTE
======================= */
.btn-secondary-gradient {
  background: linear-gradient(135deg, var(--bs-primary), #851d9f) !important;
  border: none !important;
  color: #fff !important;
  transition: all 0.4s ease-in-out !important;
  background-size: 200% 200% !important;
  position: relative !important;
  overflow: hidden !important;
}

.btn-secondary-gradient:hover {
  background-position: 100% 0 !important;
  transform: translateY(-6px) scale(1.1) !important;
  box-shadow: 0 14px 32px rgba(133, 29, 159, 0.45) !important;
}

.btn-secondary-gradient:active {
  transform: translateY(0px) scale(0.94) !important;
  box-shadow: 0 6px 18px rgba(133, 29, 159, 0.35) !important;
}