/* =======================
   Estilos Generales
   ======================= */

/* Reset básico (opcional) */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Fuente base (puedes cambiar a la que más te guste) */
body {
  font-family: "Helvetica", "Arial", sans-serif;
  color: #ffffff;
  background-color: #000000; /* Fondo negro */
  min-height: 100vh;
}

/* Links globales */
a {
  color: #BE1622;
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: #ffffff; /* Cambia a blanco al pasar el ratón */
  text-decoration: underline;
}

/* =======================
   Encabezado y Footer
   ======================= */
.header, .footer {
  background-color: #121212;
  color: #ffffff;
  padding: 15px;
}

/* =======================
   Sidebar (Menú Lateral)
   ======================= */
.sidebar {
  background-color: #000;       /* o #121212, si prefieres */
  min-height: 100vh;           /* Para que ocupe la pantalla completa en altura */
}

.sidebar a {
  display: block;
  color: #fff;
  padding: 10px 0;
  text-align: center;
  border-bottom: 1px solid #333; 
  transition: background-color 0.3s ease, color 0.3s ease;
}

.sidebar a .bi {
  font-size: 1.8rem; /* Tamaño de los íconos */
}

.sidebar a:hover {
  background-color: #BE1622;
  color: #fff !important;
}

/* Clases generales para el sidebar */
.sidebar-link {
  display: block;
  padding: 10px 0;
  text-align: center;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Estilo cuando la opción está "activa" */
.sidebar-link.active-item {
  background-color: #BE1622; /* tu color principal */
  color: #fff !important;
}


/* =======================
   Botones
   ======================= */

/* Ajusta el color base de los botones de Bootstrap si lo deseas */
.btn {
  border: none;
  background-color: #BE1622;
  color: #fff;
  transition: background-color 0.3s ease;
}

.btn:hover,
.btn:focus {
  background-color: #a5121d; /* Un poco más oscuro para hover */
  color: #fff;
  outline: none;
  box-shadow: none;
}

/* =======================
   Tablas y DataTables
   ======================= */

/* Sobre-escribimos estilos de .table-dark de Bootstrap, 
   y dejamos un estripeado más evidente en modo oscuro */
.table-dark.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #181818;
}
.table-dark.table-striped > tbody > tr:nth-of-type(even) {
  background-color: #212121;
}
.table-dark thead th {
  background-color: #BE1622;
  color: #ffffff;
  border-color: #BE1622;
}

/* Podemos ajustar el color del hover en las filas si se desea */
.table-dark tbody tr:hover {
  background-color: #333333;
}

/* =======================
   Badges (etiquetas)
   ======================= */
.badge {
  font-size: 90%;
  padding: 0.5em 0.6em;
}

/* Si quieres personalizar aún más la 'badge-danger' o 'badge-success' 
   en vez de usar .bg-danger/.bg-success de Bootstrap, podrías hacer: 
   .badge-danger { background-color: #d9534f; } 
   .badge-success { background-color: #5cb85c; } 
   Pero aquí dejamos la configuración por defecto de Bootstrap. */

/* =======================
   Cards, Formularios, etc.
   ======================= */

.card {
  background-color: #1E1E1E; /* Fondo de la card un poco más claro que el body */
  border: none;             /* Quita bordes que vengan por defecto */
}

/* Título de la card en color principal */
.card .card-title,
.card-header {
  color: #BE1622;
}

.form-control {
  background-color: #111;
  color: #fff;
  border: 1px solid #333;
  transition: border-color 0.2s ease;
}

.form-control:focus {
  border-color: #BE1622 !important;
  box-shadow: none;  /* Evitamos sombras azules de Bootstrap */
  outline: 0;        /* Evitamos outline */
}

/* =======================
   Login o Vistas Centradas
   ======================= */
.full-height {
  min-height: 100vh;
}

/* Contenedor para centrar vertical/horizontal */
.centered-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* Ejemplo de card central en login */
.login-card {
  background-color: #1E1E1E;
  border: 1px solid #2c2c2c;
}

/* =======================
   Animaciones (Opcional)
   ======================= */

/* Transición suave para elementos que cambian color, hover, etc. */
.transition-all {
  transition: all 0.3s ease;
}


.sidebar-link.active-item {
  background-color: #BE1622;
  border-radius: 8px;
}
.sidebar-link:hover {
  text-decoration: none;
  opacity: 0.8;
}