/* Estilos Generales */
body {
  background-color: #ecf3f7; /* Un gris azulado claro y suave */
  color: #333333; /* Un color oscuro para el texto, ofreciendo un buen contraste */
  font-family: 'Lucida Grande', sans-serif;
  font-size: 16px; /* Tamaño de letra aumentado */
}

/* Barra de Navegación */
.navbar-custom {
  background-color:  #6756e4; /* Un azul brillante y minimalista */
  color: white;
  margin: 0 auto; /* Centra el nav horizontalmente */
}

.navbar-brand {
  background-color: transparent;
  padding: 5px 10px;
  color: white;
  border-radius: 5px;
  text-transform: uppercase; /* Texto en mayúsculas */
  
}

.navbar-nav .nav-link {
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  
}

.navbar-nav .nav-link:hover, .navbar-nav .nav-link:active {
  color: #B3D4FF; /* Un azul más claro para el hover */
}

/* Botones y Modales */
.btn-dark {
  background-color: #6756e4; /* Botones en azul */
  color: white;
}

.modal-content {
  background-color: #F0F6FC; /* Un fondo gris azulado claro para los modales */
}

/* Formularios y Campos de Entrada */
.form-control {
  border: 1px solid #ced4da; /* Un borde suave para los campos de entrada */
  color: #495057; /* Color oscuro para el texto de entrada */
}

.form-label {
  color: #333333; /* Color oscuro para las etiquetas */
}

/* Elementos Adicionales */
.list-group-item-action:hover {
  background-color: white; /* Azul más claro para hover en listas */
}

.drop-zone {
  border: 2px dashed #007BFF; /* Borde azul para zonas de arrastre */
}

/*para la carga de rchivos*/
.drop-zone {
  max-width: 400px;
  height: 200px;
  padding: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  border: 2px dashed #007BFF;
  border-radius: 10px;
  cursor: pointer;
}

.drop-zone--over {
  border-style: solid;
}

.icono-play {
  color: #6756e4;
    /* Tu color preferido */;
  /* Aquí también puedes usar valores de colores hexadecimales, RGB, RGBA, HSL, etc. */
}

.icono-stop {
  color: red;
  /* Aquí también puedes usar valores de colores hexadecimales, RGB, RGBA, HSL, etc. */
}



.btn-custom {
  font-size: 15px; /* Tamaño de letra */
  padding: 5px 10px; /* Espaciado interno */
  border-radius: 10px; /* Redondeo de bordes */
  color: white;
  background-color: #6756e4
}

.title-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.icono-color {
  color: #56abe4; /* Tu color preferido */
}

.btn-subir {
  width: 100%; /* Hace que el botón sea tan ancho como su contenedor padre */
  margin: 0 auto; /* Centra el botón horizontalmente */
  display: block; /* Asegura que el botón se trate como un bloque, necesario para el centrado */
  /* Agrega cualquier otro estilo que necesites, como padding, bordes, etc. */
}

textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical; /* Permite al usuario ajustar verticalmente el tamaño de la caja de texto */
}

/* Estilos para dispositivos con un ancho máximo de 768px */
@media only screen and (max-width: 768px) {
  #gestion-archivos {
      max-height: 300px; /* Ajusta la altura máxima para pantallas pequeñas */
      overflow-y: scroll; /* Habilita el desplazamiento vertical */
  }
}


.nombre-archivo {
  word-wrap: break-word;
  /* Permite que las palabras largas se rompan y pasen a la siguiente línea */
  max-width: 180px;
  /* Establece un ancho máximo para el texto, ajustalo según el ancho de tu tabla/celda */
  overflow-wrap: break-word;
  /* Alternativa a word-wrap, más moderna y con mejor soporte */
}


.item-container{
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1.3;
  background-color: #fff;
  padding: 0.65rem 0.6rem;
  color: #1f1e1e;
  border-bottom: 0.1rem solid #ccc;
  border-radius: 0.9rem;
  margin-bottom: 0.7rem;
  word-wrap: break-word;
  cursor: pointer;
}



    .item-container {
      display: flex;
      /* Esto asegura que los elementos estén en línea */
      align-items: center;
      /* Centra los elementos verticalmente */
    }
  
    .item-name {
      cursor: pointer;
      /* Cambia el cursor para indicar que es clickeable */
    }