:root {
    --color-primario: #0d6efd;
    --color-primario-hover: #3d8bfd;
    --color-secundario: #adb5bd;
    --color-fondo: #121212;
    --color-texto: #f8f9fa;
    --color-light: #1e1e1e;
    --color-borde-card: #333;
    --color-shadow: rgba(0, 0, 0, 0.5);
  
    --bs-primary: var(--color-primario);
    --bs-bg-opacity: 1;
    --bs-primary-rgb: 13, 110, 253;
  }
  
  /* Modo oscuro general */
  body {
    background-color: var(--color-fondo);
    color: var(--color-texto);
  }
  
  /* Tarjetas y modales */
  .card,
  .modal-content,
  .formulario__login,
  .formulario__register {
    background-color: var(--color-light);
    color: var(--color-texto);
    border: 1px solid var(--color-borde-card);
  }
  
  /* Tarjeta flip */
  .cardFlip-front {
    background-color: var(--color-primario);
    color: #fff;
  }
  
  .cardFlip-back {
    background-color: var(--color-light);
    color: var(--color-texto);
    border: 1px solid var(--color-borde-card);
  }
  
  /* Alerts */
  .alert {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--color-texto);
    border: 1px solid var(--color-borde-card);
  }
  
  /* Inputs y selects */
  input,
  select,
  textarea {
    background-color: #1c1c1c;
    color: var(--color-texto);
    border: 1px solid var(--color-borde-card);
  }
  
  input::placeholder,
  select option {
    color: #bbb;
  }
  
  /* Botón cerrar personalizado */
  .alert .btn-close-custom {
    color: #fff;
  }
  
  /* Toggle y links */
  .toggle-label.selected {
    background-color: var(--color-primario);
    color: #fff;
  }
  
  a,
  .alert-link {
    color: var(--color-primario);
  }
  
  a:hover {
    color: var(--color-primario-hover);
  }
  
  /* Paginación */
  .pagination .active a {
    background-color: var(--color-primario);
    color: #fff;
  }