/* public/assets/css/styles.css - Archivo principal que importa los demás módulos CSS */

@import './variables.css';

@import './main.css';
@import './chat.css';
@import './sessions.css';
@import './auth.css';
@import './toast.css';
/* conversation-manager.css y settings.css se cargan solo en head.ejs cuando hace falta (manage, settings, profile, admin) para evitar duplicados */
@import './dark-theme.css';

.hidden {
  display: none !important;
}

.animate-fade-in {
  animation: fade-in var(--transition-medium);
}

.animate-slide-up {
  animation: slide-up var(--transition-medium);
}

.animate-pulse {
  animation: pulse 2s infinite;
}

.cursor-pointer {
  cursor: pointer;
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.no-transition {
  transition: none !important;
}

.code-block {
  font-family: var(--font-family-code);
  background: var(--color-background-dark);
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-sm);
  white-space: pre-wrap;
}

.rounded-custom {
  border-radius: var(--border-radius-md);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.btn {
	align-items: center;
	display: inline-flex;
	gap: 5px;
	margin-left: 5px;
	justify-content: center;
}

.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-secondary {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.btn-success {
  background-color: var(--color-success);
  border-color: var(--color-success);
}

.btn-danger {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
}

.btn-warning {
  background-color: var(--color-warning);
  border-color: var(--color-warning);
}

.btn-info {
  background-color: var(--color-info);
  border-color: var(--color-info);
}

.btn-light {
  background-color: var(--color-light);
  border-color: var(--color-light);
}

.btn-dark {
  background-color: var(--color-dark);
  border-color: var(--color-dark);
}

.btn-outline-primary {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-outline-primary:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

@media (max-width: 767px) {
  h1 {
    font-size: calc(var(--font-size-xl) * 1.2);
  }
  
  h2 {
    font-size: calc(var(--font-size-lg) * 1.2);
  }
  
  h3 {
    font-size: var(--font-size-lg);
  }
  
  h4, h5, h6 {
    font-size: var(--font-size-md);
  }
}