:root{
  --primary-color: #773ec7;
  --secondary-color: #000;
  --third-color: #2D2D2D;
  --contrast-color: #FFF;
  --focus-color: #4b267e;
  --gray-color: #7B7B7B;
  --primary-light-color: #b691e2;
}

::selection {
  background: var(--primary-color); /* color de fondo */
  color: var(--contrast-colors); /* color del texto */
}

a{
  color: var(--contrast-color)
}

body{
  min-height: 100vh;
  background: linear-gradient(135deg, var(--secondary-color) 60%, var(--primary-color) 120%);
  color: var(--contrast-color) !important;
}

.bg-primary{
  background-color: var(--primary-color) !important;
}

.card{
  color: var(--contrast-color);
  background-color: var(--third-color);
}

.card.p-1.bg-light {
  display: flex;
  flex-direction: column;
  height: 370px;
}


.glass-card {
  background: rgba(255, 255, 255, 0.2); /* Fondo semitransparente */
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3); /* Borde sutil */
  backdrop-filter: blur(8px); /* El efecto "glass" */
  -webkit-backdrop-filter: blur(10px); /* Safari */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); /* Sombras suaves */
  position: relative;
  overflow: visible;
}

.glass-card.dropdown-open {
  z-index: 2000;
}

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

a.btn.btn-primary, button.btn.btn-primary {
  background: var(--primary-color) !important;
  color: var(--contrast-color) !important;
  border-color: var(--primary-color) !important;
}

a.btn.btn-primary:hover, button.btn.btn-primary:hover {
  background: var(--focus-color) !important;
  border-color: var(--focus-color) !important;
}

a.btn.btn-primary:active, button.btn.btn-primary:active {
  background-color: var(--focus-color) !important;
  color: var(--contrast-color) !important;
  border-color: var(--focus-color) !important;
  box-shadow: none;
}

a.btn.btn-outline-primary,
button.btn.btn-outline-primary {
  background-color: transparent !important;
  color: var(--primary-light-color) !important;
  border-color: var(--primary-color) !important;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

a.btn.btn-outline-primary:hover,
button.btn.btn-outline-primary:hover {
  background-color: var(--primary-color) !important;
  color: var(--contrast-color) !important;
  border-color: var(--primary-color) !important;
}

a.btn.btn-outline-primary:focus,
button.btn.btn-outline-primary:focus,
a.btn.btn-outline-primary:focus-visible,
button.btn.btn-outline-primary:focus-visible {
  background-color: transparent !important;
  color: var(--focus-color) !important;
  border-color: var(--focus-color) !important;
  box-shadow: 0 0 0 0.25rem rgba(119, 62, 199, 0.25);
}

a.btn.btn-outline-primary:active,
button.btn.btn-outline-primary:active {
  background-color: var(--primary-color) !important;
  color: var(--contrast-color) !important;
  border-color: var(--focus-color) !important;
  box-shadow: none;
}

.form-range{
  background-color: rgba(255, 255, 255, 0) !important;
}

.form-range::-webkit-slider-thumb {
  background: var(--primary-color);
  border: 1px solid var(--contrast-color);
}

.form-range::-moz-range-thumb {
  background: var(--primary-color);
  border: 2px solid var(--contrast-color);
}

.form-range::-ms-thumb {
  background: var(--primary-color);
  border: 2px solid var(--contrast-color);
}

.checkbox-purple {
  accent-color: var(--primary-color) !important;
}

/* Checkbox Bootstrap personalizado en morado */
.form-check-input.checkbox-purple:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

hr{
  color: #FFF;
}

/* Darker "glass" inputs to match glass-card but more opaque/darker with white text */
.form-control,
.form-select {
  background: rgba(0, 0, 0, 0.30) !important; /* más oscuro que .glass-card */
  color: var(--contrast-color) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important; /* sutil borde claro */
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: none !important;
}

.form-control::placeholder,
.form-select::placeholder {
  color: rgba(255,255,255,0.75) !important;
  opacity: 1; /* en algunos navegadores el placeholder tiene menos opacidad */
}

.form-control:focus,
.form-select:focus {
  background: rgba(0, 0, 0, 0.28) !important; /* ligeramente más claro en focus */
  color: var(--contrast-color) !important;
  border-color: var(--primary-color) !important;
  outline: none !important;
  box-shadow: 0 0 0 0.2rem rgba(119, 62, 199, 0.18) !important;
}

.form-control[disabled],
.form-select[disabled],
.form-control:disabled,
.form-select:disabled {
  opacity: 0.7 !important;
  background: rgba(0,0,0,0.24) !important;
  color: rgba(255,255,255,0.85) !important;
}

/* Small adjustment for number inputs inside form-control to keep text white */
input[type="number"].form-control {
  color: var(--contrast-color) !important;
}


/* For nav-tab */
.nav-link.active {
  background-color: var(--primary-color) !important;
  color: var(--contrast-color) !important;
  border: none !important;
}

/* Non-active nav links should be subtle (white-ish) to match the glass background. .active keeps the purple background + white text. */
.nav-link:not(.active) {
  color: rgba(255,255,255,0.85) !important;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.nav-link:not(.active):hover {
  color: var(--primary-light-color) !important;
}

.animation{
  width: auto;
  height: 300px;
}

.training-image-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  transition: max-height 0.25s ease, opacity 0.25s ease, margin-top 0.25s ease;
}

.training-image-wrapper.image-visible {
  max-height: 420px;
  opacity: 1;
  margin-top: 1rem;
}

.training-image-wrapper.image-hidden {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
}

.training-image-wrapper img {
  width: 100%;
  height: auto;
  max-width: 420px;
}

.popover-header {
  background-color: var(--contrast-color);
  color: var(--primary-color);
}

.popover-body {
  color: var(--secondary-color);
}

/* Pantallas medianas (tablets) */
@media (min-width: 577px) and (max-width: 1400px) {
  .inicial-image{
    height: auto;
    width: 27rem;
  }
}