.configuracion-modulos {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 20px !important;
  margin-top: 20px !important;
}

/* Y también para los elementos internos */
.configuracion-modulos > .col-lg-4 {
  flex: 50 !important;
}
.modulo {
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  height: 100%;
  flex: 1;
}
.modulo-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  font-size: 18px;
  font-weight: bold;
}
.modulo-header i {
  font-size: 24px;
  margin-right: 10px;
}
.modulo.token {
  border: 1px solid #e74c3c;
}
.modulo.token .modulo-header {
  color: #e74c3c;
}
.modulo.logo {
  border: 1px solid #2ea4cc;
}
.modulo.logo .modulo-header {
  color: #2ecc71;
}
.modulo.avanzado {
  border: 1px solid #f39c12;
}
.modulo.avanzado .modulo-header {
  color: #f39c12;
}
.modulo-lista {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.modulo-lista li {
  padding: 8px 0;
  cursor: pointer;
  color: #000000;
  transition: color 0.2s ease-in-out;
}
.modulo-lista li:hover {
  color: #000;
  font-weight: 500;
}
body.modo-oscuro {
  background-color: #121212;
  color: #e0e0e0;
}
body.modo-oscuro .modulo {
  background-color: #1e1e1e;
  border-color: #0c0c0cff;
}
body.modo-oscuro .modulo-lista li {
  color: #e0e0e0;
}
body.modo-oscuro .modulo-lista li:hover {
  color: #fff;
}
body.modo-oscuro #contenedor-token {
  background-color: #1e1e1e !important;
  border-color: #333;
}
/* Estilos para el menú lateral */
body.modo-oscuro .pc-sidebar {
    background-color: #1e1e1e;
    color: #e0e0e0;
}

body.modo-oscuro .pc-sidebar a,
body.modo-oscuro .pc-sidebar a:hover {
    color: #e0e0e0;
}

/* Estilos para el encabezado (barra superior) */
body.modo-oscuro .pc-header {
    background-color: #1e1e1e;
    border-bottom: 1px solid #333;
}

/* Estilos para el título de la página */
body.modo-oscuro .page-header-title h5,
body.modo-oscuro .page-header-title p {
    color: #e0e0e0;
}
.firma-linea {
  border-bottom: 1px solid #000;
  width: 80%;
  margin: 0 auto 10px auto;
}

/* Estilos de Modal para Modo Oscuro */
body.modo-oscuro .modal-content {
    background-color: #1e1e1e;
    color: #e0e0e0;
    border: 1px solid #444;
}

body.modo-oscuro .modal-header {
    border-bottom: 1px solid #444;
}

body.modo-oscuro .modal-header .modal-title {
    color: #e0e0e0;
}

body.modo-oscuro .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

body.modo-oscuro .modal-body {
    background-color: #1e1e1e;
    color: #e0e0e0;
}

body.modo-oscuro .modal-footer {
    border-top: 1px solid #444;
}

/* ESTILOS CORREGIDOS PARA MEJOR VISIBILIDAD DE INPUTS Y LABELS */
body.modo-oscuro .modal-body .form-control {
    background-color: #444;
    color: #FFFFFF;
    border: 1px solid #666;
}

body.modo-oscuro .modal-body label {
    color: #e0e0e0;
}

body.modo-oscuro .firma-linea {
    border-bottom: 1px solid #aaa;
}

/* ESTILOS PARA EL PIE DE PÁGINA EN MODO OSCURO */
body.modo-oscuro .pc-footer .m-0,
body.modo-oscuro .pc-footer .m-0 a {
    color: #e0e0e0;
}
/*
 * Corrección de la tabla para modo oscuro
 * Sobrescribe el color de fondo de las filas verdes de Bootstrap
 */
body.modo-oscuro .table-success,
body.modo-oscuro .table-success > th,
body.modo-oscuro .table-success > td {
    background-color: #3cb0d4 !important; /* Un tono de verde oscuro */
    color: #93c47d !important;         /* Un tono de verde claro para el texto */
}

/*
 * Corrección para el texto de toda la tabla
 * Asegura que el texto general de la tabla sea visible
 */
body.modo-oscuro .table,
body.modo-oscuro .table th,
body.modo-oscuro .table td {
    color: #ffffff !important;
}