/* Contenedor principal */


.contgrup{
    max-height: 200px;
    align-items: center; max-width: 800px;
}

/* Hacer el scrollbar invisible */
.table-responsive {
    overflow-y: scroll; /* Asegura que haya scroll */
}

.table-responsive::-webkit-scrollbar {
    width: 0px;  /* Elimina el ancho del scrollbar */
    height: 0px; /* En el caso de que haya un scrollbar horizontal */
}

.table-responsive::-webkit-scrollbar-thumb {
    background: transparent;  /* Opcional, si quieres que el "thumb" sea invisible */
}

.table-responsive::-webkit-scrollbar-track {
    background: transparent;  /* Opcional, si quieres que la pista sea invisible */
}

/* LOGIN */
/* Estilo para todo el body */
.blogin {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
  background-color: rgb(236, 231, 245);
  background-size: cover;
  background-position: center;
}

/* Estilo del contenedor de login */
.login {
  width: 500px;
 
  padding: 40px;
  background-color: rgba(255, 255, 255, 0.8);
  border: 5px solid #200020;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.5s ease;
}

.login:hover {
  box-shadow: 10px 3px 10px #da0081;
}
.btneye{
  border-color: #364f6b !important;
  background-color: #350335 !important;
  
}
.btneye:hover{
  background-color: #da0081 !important;

}
.botn{
    width: 100%;
    font-size: 16px;
    font-weight: bold;
    border-radius: 15px;
    padding: 5px;
    background-color: #da0081;
    cursor: pointer;
    transition: .5s ease;
    color:#ffffff;
    border-color: #200020;
   
    
  }
  .botn:hover{
    background: #c00174;
    color: #fff;
  }

  .botngrup{
    width: 80px;
    font-size: 16px;
    border-radius: 15px;
    padding: 5px;
    background-color: #da0081;
    cursor: pointer;
    transition: .5s ease;
    color:#ffffff;
    border-color: #200020;
  }
  .botngrup:hover{
    background: #c00174;
    color: #fff;
    font-weight: 600;
  }
  .botnew{
    margin: 2px;
    width: 80px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 5px;
    padding: 3px;
    background-color: #ffffff;
    cursor: pointer;
    color:#200020;
    border: 2px solid #200020;
    text-decoration: none;
  }
  .botnew:hover{
    background: #200020;
    color: #fff;
    font-weight: 600;
  }
  .btnindexver{
    margin: 2px;
    width: 130px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 5px;
    padding: 3px;
    background-color: #ffffff;
    cursor: pointer;
    color:#200020;
    border: 2px solid #200020;
    text-decoration: none;
  }
  .btnindexver:hover{
    background: #200020;
    color: #fff;
    font-weight: 600;
  }
  .btnindexag{
    margin: 2px;
    width: 150px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 5px;
    padding: 3px;
    background-color: #ffffff;
    cursor: pointer;
    color:#200020;
    border: 2px solid #200020;
    text-decoration: none;
  }
  .btnindexag:hover{
    background: #200020;
    color: #fff;
    font-weight: 600;
  }
  .btnindexed{
    margin: 2px;
    width: 115px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 5px;
    padding: 3px;
    background-color: #ffffff;
    cursor: pointer;
    color:#200020;
    border: 2px solid #200020;
    text-decoration: none;
  }
  .btnindexed:hover{
    background: #200020;
    color: #fff;
    font-weight: 600;
  }
  .btnindexdel{
    margin: 2px;
    width: 115px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 5px;
    padding: 3px;
    background-color: #da0081;
    cursor: pointer;
    color:#ffffff;
    border: 2px solid #200020;
    text-decoration: none;
  }
  .btnindexdel:hover{
    background: #c00174;
    color: #fff;
    font-weight: 600;
  }
  /* Para todos los inputs */
input.form-control.custom-input:focus {
  border-color: #da0081 !important;
  outline: none !important;
  /* halo rosa semitransparente del mismo tono */
  box-shadow: 0 0 0 0.2rem rgba(218, 0, 129, 0.25) !important;
}
.form-check-input:focus {
  border: 2px solid #da0081 !important;   /* tu borde rosa */
  outline: none !important;               /* quita outline nativo */
  box-shadow: none !important;            /* elimina resplandor azul */
}
.form-check-input {
  /* Define el color principal del checkbox (tilde y fondo cuando está marcado) */
  accent-color: #da0081 !important;
}
/* Checkbox marcado */
.form-check-input:checked {
  background-color: #da0081 !important;
  border-color: #da0081 !important;
}

/* Si quieres además quitar cualquier halo residual al hacer foco */
.form-check-input:focus {
  box-shadow: none !important;
}


 
/* Vista Dispersion*/
.bodyDisp{
    margin-left: 120px;
    margin-right: 120px;
}
.bodyContact{
    margin:0 80px 50px 80px;
}
.tTDis{
    align-items: center;
    text-align: center;
}

.faq-container {    
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra los elementos horizontalmente */
}

details { 
    background-color: #f6f8fa;
    width: 100%; 
    margin-bottom: 1rem;   
    border-radius: 8px;  
    border: 1px solid #d8e0e9;
    color: #364f6b;
    position: relative;  
  }
  summary{
    text-align: center;
  }
  details summary {  
    font-weight: 400;
    font-size: 1.25rem;
    padding: 1rem;
    cursor: pointer;
    list-style: none;
  }
  details p {
    padding: 1rem;
    margin: 0 1rem 1rem 1rem;
    background: #f6f8fa;
    border-left: 2px solid #364f6b;
  }
  
  details:hover,
  details[open] {
    box-shadow: 5px 5px 15px #d9d9d9;
  }
  
  details[open] {
    background: #ffffff;
  }
  
  details[open] summary {
    font-weight: 600;
  }
  
  details summary::before {
    position: absolute;
      content: "👇";    
      font-size: 1.75rem;
      top: 10px;
      right: 16px;  
  }
  
  details[open] summary::before {
    -webkit-animation: rotate 0.6s ease-in-out both;
            animation: rotate-emoji 0.6s ease-in-out both;
  }
  
  @keyframes rotate-emoji {
    0% {
      -webkit-transform: rotate(0);
              transform: rotate(0);
    }
    100% {
      -webkit-transform: rotate(180deg);
              transform: rotate(180deg);
    }
  }
  
  .spns{
   
    margin: 10px;
  text-align: start;
  font-weight:bold; 
  font-size: 20px; 
  color: #000000;
  
  }
  
  .spnn{
    text-align: center; 
    margin: 10px;
  font-family: roboto; 
  font-weight:bold; 
  font-size: 70px; 
  color: #bb6338;
  }
  

  /* Modo oscuro*/
/* Estilos generales en modo claro */
body {
  background-color: #ffffff;
  color: #200020;
  transition: background-color 0.3s, color 0.3s;
}

/* Estilos en modo oscuro */
.dark-mode {
  background-color: #200020;
  color: #ffffff;
}

/* Navbar en modo oscuro */
.dark-mode .navbar {
  background-color: #da0081 !important;
  color: #ffffff !important;
}

.dark-mode .salirSesion {
  color: #f5f2f2 !important;
  
}
.dark-mode .logoutDark{
  background-color: #333232;
  border-color: #b3b3b3;
}
.dark-mode .logoutDark:hover{
  background-color: #1e1e1e;
}

.dark-mode .salirSesion:hover{
  background-color: #1e1e1e;
  
}
.dark-mode .sidebar ul li a {
  text-decoration: none;
  color: #ffffff;
  display: block;
  
}

.dark-mode .sidebar a:hover {
 background-color: #da0081;
 border-radius: 10px;
}

.dark-mode button{
  color: #d9d9d9;
  border-color: #d0d0d0;
}

.dark-mode .btnDark:hover{
  color: #d9d9d9;
  border-color: #d0d0d0;
  background-color: #da0081 !important;
}
.btnDark:hover{
  background-color: #200020 !important;
}
/* Sidebar en modo oscuro */
.dark-mode .sidebar {
  background: #390639;
}

/* Links en modo oscuro */
.dark-mode a {
  color: #ffffff;
  
}

.dark-mode a:hover {
  color: #e9e5e5;
}
.dark-mode a:active{
  color: #ffffff !important;
}
.dark-mode-navbar {
  background-color: #1e1e1e !important;
  color: #fff !important;
}

.dark-mode .linkcard{
  text-decoration: none;
  color: #200020;
}
.dark-mode .txtcard{
  color: #ffffff;
}
.dark-mode .botnew{
  background-color: #da0081;
  color: #fff;
  border-color: #ffffff;
}
.dark-mode .botnew:hover{
  background-color: #200020;
  color: #fff;
  border-color: #200020;
}

.dark-mode .btnindexver{
  background-color: #200020;
  color: #ffffff;
  border-color: #fff;
}
.dark-mode .btnindexed{
  background-color: #200020;
  color: #ffffff;
  border-color: #fff;
}
.dark-mode .btnindexag{
  background-color: #200020;
  color: #ffffff;
  border-color: #fff;
}

.dark-mode .btnindexver:hover{
  background-color: #200020;
  color: #ffffff;
  border-color: #fff;
  font-weight: 800;
}
.dark-mode .btnindexed:hover{
  background-color: #200020;
  color: #ffffff;
  border-color: #fff;
  font-weight: 800;
  width: 125px;
}
.dark-mode .btnindexag:hover{
  background-color: #200020;
  color: #ffffff;
  border-color: #fff;
  font-weight: 800;
  width: 170px;
 
}
.dark-mode .card{
  background-color: #da0081;
  border-color: #fff;
}
/* .dark-mode .conshow{
  color: #200020;
} */

.dark-mode .carbody{
  background-color: #200020 !important;
}

.dark-mode .inpdark{
  background-color: #f1bfda;
  font-weight: 600;
}
.dark-mode .tdark{
  color: #fff;
}

.dark-mode .tdark:hover{
  color: #fff;
  font-weight: 700;
}
.dark-mode .botnRev{
  color: #200020;
}

.dark-mode .botnRev:hover{
  color: #200020;
  font-weight: 700;
}
.dark-mode .labdis{
  color: #fff;
}
body.dark-mode .destinatario-item {
  background-color: #200020; 
  border-color: #666;     /* Un borde un poco más claro */
  color: #f1f1f1;         /* <-- COLOR DE TEXTO PREDETERMINADO (CASI BLANCO) */
}

/* Asegurar que el SPAN con nombre/teléfono use el color claro */
/* Normalmente la regla anterior es suficiente, pero esto añade especificidad si es necesario */
body.dark-mode .destinatario-item span {
 color: inherit; /* Hereda el color claro del padre (.destinatario-item) */
 /* O puedes forzarlo: */
 /* color: #f1f1f1 !important; */ /* Usa !important solo si es estrictamente necesario */
}

/* Estilos para los INPUTS dentro del item en modo oscuro */
body.dark-mode .destinatario-item input.form-control {
  background-color: #200020; /* Fondo un poco más claro para inputs */
  color: #f1f1f1;         /* Texto claro */
  border-color: #777;      /* Borde */
}

/* Color del placeholder en los inputs en modo oscuro */
body.dark-mode .destinatario-item input.form-control::placeholder {
 color: #aaa; /* Placeholder grisáceo */
}

/* Estilos para otros textos en esa sección en modo oscuro */
body.dark-mode #destinatarios-con-monto + div span { /* Para "Total Selección Manual: COP X" */
   color: #f1f1f1; /* Texto claro */
}
body.dark-mode #no-destinatarios.text-muted { /* Para "Aún no has seleccionado..." */
   color: #fff !important; /* Un gris claro, !important por si text-muted es muy fuerte */
}
body.dark-mode #destinatarios-con-monto ~ h5 { /* Título "Destinatarios Seleccionados..." */
   color: #f1f1f1;
}

/* ============================================================ */
/* Estilos Modo Oscuro para Listas de Selección (Usuarios/Grupos) */
/* ============================================================ */

/* Contenedor principal del <details> en modo oscuro */
body.dark-mode details.deta.carbody {
  background-color: #1a1a1a; /* Un fondo oscuro base para el contenedor */
  border-color: #444;
}

/* El texto del <summary> en modo oscuro */
body.dark-mode details.deta.carbody summary.spns.labdis {
  color: #e0e0e0; /* Texto claro para el título del desplegable */
}

/* Fondo general de las listas UL en modo oscuro */
body.dark-mode .list-group.lista-seleccionable {
  background-color: #1c1c1c; /* Fondo ligeramente diferente para la lista */
  border-color: #444;
}

/* Estilo para CADA item (li) de las listas en modo oscuro */
body.dark-mode .list-group.lista-seleccionable .list-group-item {
  background-color: #200020; /* TU COLOR DE FONDO */
  color: #ffffff;            /* TU COLOR DE TEXTO */
  border-color: #440044;     /* Borde púrpura oscuro separador */
   /* Quitar bordes laterales y superior, dejar solo inferior */
  border-width: 0 0 1px 0;
  border-radius: 0; /* Quitar redondeo si lo hereda del list-group */
}

/* Estilo para el último item de la lista (para quitar el último borde inferior) */
body.dark-mode .list-group.lista-seleccionable .list-group-item:last-child {
  border-bottom-width: 0;
}

/* Estilo al pasar el mouse (hover) sobre los items */
body.dark-mode .list-group.lista-seleccionable .list-group-item:hover {
  background-color: #440044; /* Fondo púrpura más claro en hover */
  color: #ffffff;
}

/* Estilo para los items SELECCIONADOS (cuando están en la lista derecha) */
/* Se usa la clase .selected que tu JS añade */
body.dark-mode .list-group.lista-seleccionable .list-group-item.selected {
  background-color: #770077; /* Un púrpura más brillante */
  color: #ffffff;
  font-weight: bold;
  border-color: #990099 !important; /* Borde más notorio, !important por si acaso */
  /* Asegurar que no tenga borde inferior si es el último */
  /* border-bottom-width: 0; */ /* Podría necesitarse si el borde !important interfiere */
}
/* Quitar borde inferior explícitamente si es el último Y está seleccionado */
body.dark-mode .list-group.lista-seleccionable .list-group-item.selected:last-child {
  border-bottom-width: 0;
}


/* Estilos para buscador y títulos dentro de la sección en modo oscuro */
body.dark-mode .bodyContact label.labdis,
body.dark-mode .bodyContact h5.labdis {
  color: #e0e0e0; /* Texto claro para labels y títulos */
}

body.dark-mode .bodyContact input#buscador.form-control {
  background-color: #200020;
  color: #f1f1f1;
  border-color: #fff;
}
body.dark-mode .bodyContact input#buscador.form-control::placeholder {
  color: #888;
}
/* ============================================================ */
/* Estilos Modo Oscuro para Input de Archivo CSV              */
/* ============================================================ */

/* Estilo para el label "Seleccionar Archivo CSV" */
body.dark-mode label[for="csv_file"].form-label {
  color: #e0e0e0; /* Texto claro */
}

/* Estilo para el input de tipo 'file' con clase 'form-control' */
body.dark-mode input[type="file"].form-control#csv_file {
  background-color: #200020; /* Fondo oscuro para el input */
  color: #ccc;             /* Color del texto (ej: "Ningún archivo seleccionado") */
  border-color: #555;      /* Borde oscuro */
}

/* Estilo para el *botón* interno del input 'file' (puede variar entre navegadores) */
/* Usamos el pseudo-elemento ::file-selector-button */
body.dark-mode input[type="file"].form-control#csv_file::file-selector-button {
  background-color: #350335; /* Fondo gris oscuro para el botón */
  color: #f1f1f1;         /* Texto claro para el botón ("Examinar...", "Choose File", etc.) */
  border-color: #6c757d;  /* Borde del botón */
  /* Otros estilos opcionales para el botón */
  padding: 0.375rem 0.75rem;
  margin: -0.375rem -0.75rem; /* Ajuste común para integrarlo */
  margin-inline-end: 0.75rem;
  border-inline-end-width: 1px;
  transition: background-color .15s ease-in-out, border-color .15s ease-in-out; /* Transición suave */
}

/* Estilo hover para el botón interno */
body.dark-mode input[type="file"].form-control#csv_file::file-selector-button:hover {
  background-color: #200020; /* Un poco más claro al pasar el mouse */
  color: #fff;
  border-color: #888;
}

/* Opcional: Ajustar el color del texto de ayuda y el `code` en modo oscuro */
body.dark-mode .card-body.carbody .card-text {
  color: #ccc; /* Texto de ayuda más claro */
}

body.dark-mode .card-body.carbody code {
  color: #f1a7ff; /* Un color lila/rosa claro para el código */
  background-color: #200020; /* Fondo semi-transparente */
  padding: 2px 4px;
  border-radius: 3px;
}

.dark-mode .btonlim{
  background-color: #da0081;
  border-radius: 5px;
}
.dark-mode .btonlim:hover{
  background-color: #da0081;
  border-radius: 5px;
  font-weight: 600;
}
.dark-mode .psmall{
  color: #fff !important;
}
.psmall{
  color: #200020;
}
/* HOME */
.Homecontainer {
  display: flex;           /* Activa Flexbox */
  width: 98%;            /* Ocupa todo el ancho */
  height: 100%;           /* Ocupa toda la altura */
  margin: 12px
}

/* Cada sección ocupa 1/3 del ancho */
.section {
  flex: 1;                 /* Todas las secciones tienen el mismo tamaño */
  display: flex;           /* Activa Flexbox */
  flex-direction: column;  /* Contenido en cada columna se apila verticalmente */
  align-items: center;     /* Centra el contenido */
  padding: 20px;
 
}

/* Estilos de los contenidos */
.content {
 
  padding: 10px;
  margin: 5px;
  width: 80%;
  text-align: center;
  border-radius: 5px;
  
}



.cardhome{
  display: grid;
  justify-items: center;
  margin-top: 50px;
  width: 280px;
  height: 400px;
  background-color: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0px 0px 25px #ef93ff;
}

.icono{
  margin-top: 40px;
  
  width: 60%;
  
  object-fit: scale-down;
}

.cardhome p{
  text-align: center;
}

.cardhome p:nth-child(3){
  color: grey;
  margin-top: -60px;
  font-size: 20px;
}

.cardhome p:nth-child(2){
  margin-top: 20px;
  font-weight: 600;
  font-size: 30px;
  color: #da0081;
}

.cardhome #boton{
  color: #ffffff;
  font-size: 25px;
  width: 100%;
  background-color: #da0081;
  text-align: center;
  padding-top: 40px;
}

.linkcard{
  text-decoration: none;
  color: #200020;
}




.txtcard{
  font-size: 22px;
  font-weight: 500;
}


/* ========================================== */
/* Estilos Personalizados Paginador       */
/* ========================================== */

/* Color principal para enlaces inactivos (números, flechas) */
.pagination .page-link {
  color: #da0081;
 
}

/* Estilo al pasar el mouse (hover) sobre enlaces inactivos */
.pagination .page-link:hover {
  color: #a10061; /* Un tono más oscuro de tu color */
  background-color: #fceaf5; /* Un fondo rosa muy pálido */
  border-color: #f8c6e4; /* Un borde rosa pálido */
}

/* Estilo para el número de la página ACTIVA */
.pagination .page-item.active .page-link {
  z-index: 3; /* Mantenido de Bootstrap */
  color: #fff; /* Texto blanco para contraste */
  background-color: #da0081; /* TU COLOR PRINCIPAL */
  border-color: #da0081;     /* TU COLOR PRINCIPAL */
}

/* Estilo para el foco (cuando se navega con teclado, por ejemplo) */
.pagination .page-link:focus {
color: #a10061;
/* Sombra de foco con tu color */
box-shadow: 0 0 0 0.25rem rgba(218, 0, 129, 0.25);
}

/* Estilo para los elementos deshabilitados (flechas prev/sig cuando no hay más páginas) */
.pagination .page-item.disabled .page-link {
  color: #e8a4ce; /* Un tono rosa/grisáceo pálido */
  
}