:root {
  /* Light theme (default) */
  --primary: #FAB713;
  --secondary: #000000;

  /* Neutros */
  --neutral-100: #F5F5F5;
  --neutral-200: #D9D9D9;
  --neutral-500: #808080;

  /* Estados y acciones */
  --danger: #FF5733;
  --success: #2ECC71;
  --info: #3498DB;

  /* Variantes y sombras */
  --primary-hover: #E5A912;
  --primary-active: #D19A11;

  /* Fondos y textos */
  --bg-primary: var(--neutral-100);
  --bg-secondary: var(--neutral-200);
  --text-primary: var(--secondary);
  --text-secondary: var(--neutral-500);
  --card-bg: #ffffff;
  --card-border: var(--neutral-200);
}

/* Dark theme */
[data-theme="dark"] {
  --bg-primary: #1a1a1a;
  --bg-secondary: #2d2d2d;
  --text-primary: #ffffff;
  --text-secondary: #b3b3b3;
  --card-bg: #2d2d2d;
  --card-border: #404040;
}

/* Estilos generales */
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Botones primarios */
.btn-primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--secondary) !important;
}

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

/* Navbar personalizado */
.navbar-custom {
  background-color: var(--secondary);
}

.navbar-custom .navbar-brand,
.navbar-custom .nav-link {
  color: var(--primary) !important;
}

.navbar-custom .nav-link:hover {
  color: var(--primary-hover) !important;
}

/* Ajustes para el toggler */
.navbar-custom .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(250, 183, 19, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-custom .navbar-toggler {
  border: none;
}

/* Menú móvil */
@media (max-width: 991.98px) {
  .mobile-menu-bottom {
    display: flex;
    align-items: center;
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .theme-toggle {
    margin-right: 1rem;
  }
}

/* Theme toggle icon color */
.theme-toggle i {
  color: #ffffff;
}

/* Cards y contenedores */
.card {
  background-color: var(--card-bg);
  border-color: var(--card-border);
  transition: background-color 0.3s ease;
}

.card-header {
  background-color: var(--bg-secondary);
  border-bottom-color: var(--card-border);
}

/* Dark mode specific text colors for cards */
[data-theme="dark"] .card {
  color: var(--text-primary);
}

[data-theme="dark"] .card-header {
  color: var(--text-primary);
}

[data-theme="dark"] .card-title,
[data-theme="dark"] .card-subtitle,
[data-theme="dark"] .card-text,
[data-theme="dark"] .card label {
  color: var(--text-primary);
}

[data-theme="dark"] .card .text-muted {
  color: var(--text-secondary) !important;
}

/* Alertas personalizadas */
.alert-success {
  background-color: #198754;
  border-color: transparent;
  color: white;
}

.alert-danger {
  background-color: var(--danger);
  border-color: transparent;
  color: white;
}

.alert-info {
  background-color: var(--info);
  border-color: transparent;
  color: white;
}

/* Badges personalizados */
.badge.bg-success {
  background-color: var(--success) !important;
}

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

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

/* Tables */
.table {
  --bs-table-hover-bg: var(--bg-secondary);
  color: var(--text-primary);
}

[data-theme="dark"] .table {
  --bs-table-bg: #2d2d2d;
  --bs-table-color: #ffffff;
  --bs-table-border-color: #404040;
}

/* List group items for dark mode */
[data-theme="dark"] .list-group-item {
  background-color: #2d2d2d;
  border-color: #404040;
  color: #ffffff;
}

[data-theme="dark"] .list-group-item:hover {
  background-color: #3d3d3d;
}

/* Additional styles for contact cards in dark mode */
[data-theme="dark"] .card .list-group-item {
  background-color: #2d2d2d;
  border-color: #404040;
}

[data-theme="dark"] .list-group {
  background-color: #2d2d2d;
  border-color: #404040;
}

/* Specific styles for campaigns page */
[data-theme="dark"] .table thead th {
  color: var(--primary);
  background-color: #1a1a1a;
  border-bottom-color: #404040;
}

[data-theme="dark"] .table tbody td {
  color: #ffffff;
}

[data-theme="dark"] .table tbody tr:hover {
  background-color: #404040;
}

/* Forms */
.form-control {
  background-color: var(--bg-secondary);
  border-color: var(--card-border);
  color: var(--text-primary);
}

.form-control:focus {
  background-color: var(--bg-secondary);
  border-color: var(--primary);
  box-shadow: 0 0 0 0.25rem rgba(250, 183, 19, 0.25);
  color: var(--text-primary);
}

/* Theme toggler */
.theme-toggle {
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}

.theme-toggle:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Text colors in dark mode */
[data-theme="dark"] .text-muted {
  color: #b3b3b3 !important;
}

/* Modal styles for dark mode */
[data-theme="dark"] .modal-content {
  background-color: #2d2d2d;
  border-color: #404040;
  color: #ffffff;
}

[data-theme="dark"] .modal-header {
  border-bottom-color: #404040;
}

[data-theme="dark"] .modal-footer {
  border-top-color: #404040;
}

[data-theme="dark"] .modal-title,
[data-theme="dark"] .modal label,
[data-theme="dark"] .modal .form-label,
[data-theme="dark"] .modal .form-text {
  color: #ffffff;
}

[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

[data-theme="dark"] small {
  color: #b3b3b3;
}

/* Transitions for smooth theme switching */
*, *::before, *::after {
  transition: background-color 0.3s ease,
              color 0.3s ease,
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}

/* Estilos para la previsualización de mensajes en campañas */
[data-theme="dark"] pre code {
  color: #f8f9fa;
  background-color: #2d2d2d;
  display: block;
  width: 100%;
}

[data-theme="dark"] .card pre {
  background-color: #2d2d2d;
  color: #f8f9fa;
  border-radius: 4px;
  padding: 0.5rem;
}

/* Estilos para los mensajes en modo claro */
pre code {
  background-color: #f8f9fa;
  color: #212529;
  display: block;
  width: 100%;
}

.card pre {
  background-color: #f8f9fa;
  border-radius: 4px;
  padding: 0.5rem;
}

/* Placeholders en modo oscuro */
[data-theme="dark"] textarea::placeholder,
[data-theme="dark"] input::placeholder {
  color: #b3b3b3 !important;
  opacity: 0.7;
}

[data-theme="dark"] textarea::-webkit-input-placeholder,
[data-theme="dark"] input::-webkit-input-placeholder {
  color: #b3b3b3 !important;
  opacity: 0.7;
}

[data-theme="dark"] textarea::-moz-placeholder,
[data-theme="dark"] input::-moz-placeholder {
  color: #b3b3b3 !important;
  opacity: 0.7;
}

[data-theme="dark"] textarea:-ms-input-placeholder,
[data-theme="dark"] input:-ms-input-placeholder {
  color: #b3b3b3 !important;
  opacity: 0.7;
}