/* Botones accesibles y feedback visual */
.btn, .btn-primary, .btn-outline-primary, .btn-secondary, .btn-outline-secondary {
  border-radius: 2rem;
  font-family: var(--font-ui);
  font-weight: 600;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  outline: none;
}
.btn:focus {
  box-shadow: 0 0 0 2px var(--color-teal-accent);
}
.btn-primary, .btn-outline-primary {
  background: var(--color-teal-accent);
  border-color: var(--color-teal-accent);
  color: #fff;
}
.btn-primary:hover, .btn-outline-primary:hover {
  background: var(--color-primary-hover);
  color: #FFFFFF;
}
.btn-secondary, .btn-outline-secondary {
  background: var(--color-coral-blush);
  border-color: var(--color-coral-blush);
  color: #FFFFFF;
  font-weight: 600;
}
.btn-secondary:hover, .btn-outline-secondary:hover {
  background: var(--color-teal-accent);
  color: #fff;
}
/* Cards y bloques */
.card, .modal-content {
  border-radius: 1.1rem;
  box-shadow: 0 2px 12px rgba(46,46,58,0.07);
  border: none;
}
.card-header {
  background: var(--color-soft-lavender-gray);
  border-radius: 1.1rem 1.1rem 0 0;
  font-family: var(--font-ui);
  font-weight: 600;
}
/* Formularios */
input, select, textarea {
  background: #fff;
  border: 1.5px solid var(--color-soft-lavender-gray);
  border-radius: 0.6rem;
  font-family: var(--font-ui);
  color: var(--color-deep-charcoal);
  padding: 0.5em 1em;
  transition: border-color 0.2s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--color-teal-accent);
  outline: none;
}
/* Dropdowns accesibles */
.dropdown-menu {
  border-radius: 1.1rem;
  box-shadow: 0 2px 12px rgba(46,46,58,0.07);
  font-family: var(--font-ui);
}

/* Animaciones para notificaciones */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-5px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(5px);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.bounce {
  animation: bounce 0.7s ease-in-out;
}

.shake {
  animation: shake 0.5s ease-in-out;
}

.pulse {
  animation: pulse 0.5s ease-in-out;
}

/* Badge de notificaciones */
#notificacionesCount {
  position: absolute !important;
  top: -8px !important;
  right: -8px !important;
  background: var(--color-coral-blush) !important;
  color: var(--color-deep-charcoal) !important;
  border-radius: 50% !important;
  min-width: 20px !important;
  height: 20px !important;
  font-size: 12px !important;
  font-weight: bold !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
  z-index: 1000 !important;
}

#notificacionesCount.bounce {
  background: var(--color-teal-accent) !important;
  color: white !important;
  transform: scale(1.2) !important;
}

/* Asegurar que el badge sea visible cuando no está oculto */
#notificacionesCount:not(.d-none) {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Override de Bootstrap para el badge */
.badge {
  position: relative !important;
}

/* Asegurar que nuestro badge tenga prioridad */
#notificacionesCount {
  position: absolute !important;
  top: -8px !important;
  right: -8px !important;
  background: #dc3545 !important;
  color: white !important;
  border-radius: 50% !important;
  min-width: 20px !important;
  height: 20px !important;
  font-size: 12px !important;
  font-weight: bold !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
  z-index: 1000 !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
  border: 2px solid white !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Forzar visibilidad cuando no está oculto */
#notificacionesCount:not(.d-none) {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
}

/* Cuando está oculto con d-none */
#notificacionesCount.d-none {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Override de Bootstrap para asegurar visibilidad */
.badge:not(.d-none) {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}