body {
    margin: 1;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #121212; 
    color: #ffffff; 
}

.button-style {
    border-radius: 4px;
    display: inline-block;
    padding: 40px 40px; 
    margin: 10px 10px 10px 0; 
    background-color: #333; 
    color: rgb(0, 255, 242); 


    
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    border: #00000063;
    box-shadow: 5px 5px 8px rgba(0, 0, 0, 2.7); 
}

.button-style, .folder {
    margin: 4px; 
}

.button-style:hover {
    background-color: #555;
    
}

#fileInput {
    display: none;
}
#imagesContainer.image-view {
  column-count: 6;
  column-gap: 0.2rem;
  padding-bottom: 60px;
}

/* Estilos específicos para vista de carpetas */
#imagesContainer.folder-view {
  padding-bottom: 80px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  grid-template-rows: masonry;
}

.img-container {
  position: relative;
  display: inline-block;
  margin-bottom: 0px; 
}

.gallery-img {
  width: 100%;
  display: block;
  height: auto;
}

.image-checkbox {
  position: absolute;
  top: 1px;
  left: 0px;
  z-index: 10;
  transform: scale(1.6);
}

.file-name {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  color: white;
  text-align: center;
  padding: 2px;
  z-index: 2;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7); 
  font-size: 10pt;
}

.file-namev {
  background-color: rgb(0, 247, 255);
  position: absolute;
  top: 0;
  margin-left: 18px;
  width: 100%;
  color: rgb(0, 0, 0);
  text-align: left;
  padding: 0px;
  z-index: -2000;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 9pt;
  max-width: 90%;
  font-weight: bold;

}

.uploadButton {
  background-image: url('icons/upload.png');
  background-size: cover; 
  background-position: center;

  font-size: 40pt;
  align-items: center; /* Centra el contenido verticalmente */
  justify-content: center;
  padding: 0;
  background-color: #2b2b2b;
  transition: background-color 0.3s ease; /* Rojo */
  min-width: 80px;
  height: 100px;
  line-height: 20px;
}

.upload-button {
  
  font-size: 46pt;
  align-items: center; /* Centra el contenido verticalmente */
  justify-content: center;
  padding: 0;
  background-color: #2b2b2b;
  transition: background-color 0.3s ease; /* Rojo */
  height: 80px;
  line-height: 20px;
}

.download-button {
  background-image: url('icons/download.png');
  background-size: cover; 
  background-position: center;
  font-size: 46pt;
  align-items: center; /* Centra el contenido verticalmente */
  justify-content: center;
  padding: 0;
  background-color: #2b2b2b;
  transition: background-color 0.3s ease; /* Verde */
  min-width: 80px;
  height: 100px;
  line-height: 20px;
}


.renameImageButton {
  background-image: url('icons/rename.png');
  background-size: cover; 
  background-position: center;
  font-size: 46pt;
  align-items: center; /* Centra el contenido verticalmente */
  justify-content: center;
  padding: 0;
  background-color: #2b2b2b;
  transition: background-color 0.3s ease; /* Verde */
  min-width: 80px;
  height: 100px;
  line-height: 20px;
}


.delete-button {
  background-image: url('icons/delete.png');
  background-size: cover; 
  background-position: center;
  font-size: 46pt;
  align-items: center; /* Centra el contenido verticalmente */
  justify-content: center;
  padding: 0;
  background-color: #2b2b2b;
  transition: background-color 0.3s ease; 
  min-width: 80px;
  height: 100px;
  line-height: 20px;
}

.reloadImages {
  background-image: url('icons/update.png');
  background-size: cover; 
  background-position: center;
  font-size: 46pt;
  align-items: center; /* Centra el contenido verticalmente */
  justify-content: center;
  padding: 0;
  background-color: #2b2b2b;
  transition: background-color 0.3s ease;   
/* Ancho del botón */
  height: 100px;
  min-width: 80px;
  line-height: 20px;
}

.toggleButtons2 {
  background-image: url('icons/menu.png');
  background-size: cover; 
  background-position: center;

  font-size: 40pt;
  align-items: center; /* Centra el contenido verticalmente */
  justify-content: center;
  padding: 0;
  background-color: #2b2b2b;
  transition: background-color 0.3s ease;   
/* Ancho del botón */
  height: 100px;
  min-width: 80px;
  line-height: 20px;
}

.showAllFolders2 {
  background-image: url('icons/folder.png');
  background-size: cover; 
  background-position: center;

  align-items: center; /* Centra el contenido verticalmente */
  justify-content: center;
  padding: 0;
  font-size: 46pt;
  background-color: #2b2b2b;
  transition: background-color 0.3s ease;   
/* Ancho del botón */
  height: 100px;
  min-width: 80px;
  line-height: 20px;
}

.selectallimage {
  background-image: url('icons/select.png');
  background-size: cover; 
  background-position: center;

  align-items: center; /* Centra el contenido verticalmente */
  justify-content: center;
  padding: 0;
  font-size: 46pt;
  background-color: #2b2b2b;
  transition: background-color 0.3s ease;   
/* Ancho del botón */
  height: 100px;
  min-width: 80px;
  line-height: 20px;
}

.moveImagesButton {
  background-image: url('icons/move.png');
  background-size: cover; 
  background-position: center;
  align-items: center; /* Centra el contenido verticalmente */
  justify-content: center;
  padding: 0;
  font-size: 46pt;
  background-color: #2b2b2b;
  transition: background-color 0.3s ease;   
/* Ancho del botón */
  height: 100px;
  min-width: 80px;
  line-height: 20px;
}

/* ---------------------------------------------------- */
.showAllFolders {
  background-image: url('icons/folder.png');
  background-size: cover; 
  background-position: center;

  background-color: #222222; 
  font-size: 30pt;
  color: rgb(0, 255, 242);
  z-index: 1000; 
  width: 50px; 
  height: 50px; 
  padding: 5px; 
  line-height: 20px;
  
  box-shadow: none;
}

.button-style:first-child {
   /* margin-left: 20px; */
    text-align: center;
}
.text-large {
  font-size: 20px; 
}

#buttonsAndFoldersContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-bottom: 8px;
}

/* Asegúrate de que estas reglas existan, pero no necesitas modificarlas si ya lo hiciste */
@keyframes fadeInAnimation {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOutAnimation {
  from { opacity: 1; }
  to { opacity: 0; }
}

.fade-in {
  animation: fadeInAnimation ease 1s;
  animation-fill-mode: forwards;
}

.fade-out {
  animation: fadeOutAnimation ease 1s;
  animation-fill-mode: forwards;
}


#buttonContainer {
  display: none; 
  opacity: 0;

  position: fixed; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -54%) scale(0.8); 
  z-index: 100; 
  flex-direction: row; 
  flex-wrap: wrap; 
  justify-content: center;
  align-items: center; 
  max-width: 250px; 
  padding: 10px;
}

#buttonContainer > * { /* Selecciona todos los elementos hijos directos de #buttonContainer */
  box-sizing: border-box; /* Incluye padding y bordes en el cálculo del ancho */
  width: calc(50% - 10px); /* Ajusta este valor según el margen que quieras entre botones */
  margin: 5px; /* Añade un pequeño margen entre los elementos */
}


#folderSelectContainer {
    margin: 8px;

  }
  
#folderSelect {
  
    padding: 13px;
    background-color: #333;
    color: white;
    border: #00000063;
    border-radius: 5px;
    
  }

#scrollButton {
  background-image: url('icons/scroll.png');
  background-size: cover; 
  background-position: center;

    transition: background-color 0.3s ease;
    background-color: #222222; 
    font-size: 20pt;
    color: rgb(0, 255, 242);
    z-index: 1000; 
    width: 50px; 
    height: 50px; 
    padding: 5px; 
    line-height: 20px; 
    text-align: center;
    border: #00000063;
    box-shadow: none;
}



#backToToporbottom {
  background-image: url('icons/up.png');
  background-size: cover; 
  background-position: center;

    transition: background-color 0.3s ease;
    background-color: #222222; 
    font-size: 20pt;
    color: rgb(0, 255, 242);
    z-index: 1000; 
    width: 50px; 
    height: 50px; 
    padding: 5px; 
    line-height: 20px; 
    text-align: center;
    border: #00000063;
    box-shadow: none;
}

#toggleButtons {
  background-image: url('icons/menu.png');
  background-size: cover; 
  background-position: center;

  transition: background-color 0.3s ease;
  background-color: #222222; 
  font-size: 20pt;
  color: rgb(0, 255, 242);
  z-index: 101; 
  width: 50px;
  height: 50px;
  padding: 5px; 
  line-height: 20px; 
  text-align: center;
  border: #00000063;
  box-shadow: none;
}

#bottomRightContainer {
  padding: 8px;
  gap: 12px;
  position: fixed;
  left: 50%; /* Centrado horizontal */
  bottom: 10px; /* Distancia desde la parte inferior */
  display: flex;
  flex-direction: row; /* Ajusta según necesites */
  align-items: center;
  z-index: 100;
  transform: translateX(-50%) scale(0.75); /* Ajusta para centrar y escalar */
  transform-origin: bottom center; /* Origen de transformación */
}

@media screen and (max-width: 1150px) {

  .button-style {
    font-size:46px; 
  }

  .text-large {
    font-size: 46px;
  }
  .file-name {
    font-size: 8pt; /* Tamaño más pequeño para pantallas más pequeñas */
    padding: 2px; /* Opcional: ajusta el padding para dispositivos móviles */
  }
  .file-namev {
    font-size: 8pt; /* Tamaño más pequeño para pantallas más pequeñas */
    padding: 2px; /* Opcional: ajusta el padding para dispositivos móviles */
  }
  #imagesContainer.image-view {
    column-count: 3 !important;
  }
  #imagesContainer.folder-view {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  }

}


@media screen and (max-width: 768px) {

  .button-style {
    font-size:46px; 
  }

  .text-large {
    font-size: 46px;
  }
  .file-name {
    font-size: 8pt; /* Tamaño más pequeño para pantallas más pequeñas */
    padding: 2px; /* Opcional: ajusta el padding para dispositivos móviles */
  }
  .file-namev {
    font-size: 8pt; /* Tamaño más pequeño para pantallas más pequeñas */
    padding: 2px; /* Opcional: ajusta el padding para dispositivos móviles */
  }
  #imagesContainer.image-view {
    column-count: 2 !important;
  }
  #imagesContainer.folder-view {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  }

}




#moveImagesContainer {
  
  display: none; /* Inicialmente oculto, JavaScript cambiará esto */
  gap: 10px;
  background-color: rgb(0, 255, 252);
  border: #00000063;
  border-radius: 5px;
  padding: 13px;
  margin: 10px;
  box-shadow: 5px 5px 8px rgba(0, 0, 0, 2.7); 
  z-index: 100; /* Asegurarse de que esté por encima de otros elementos */
  justify-content: center; /* Centrar el contenido horizontalmente */
  align-items: center;
  min-width: 360px;

}

.moveSelectedImages {
  background-image: url('icons/move2.png');
  background-size: cover; 
  background-position: center;

  font-size: 40pt;
  align-items: center; /* Centra el contenido verticalmente */
  justify-content: center;
  padding: 0;
  background-color: #2b2b2b;
  transition: background-color 0.3s ease;  
  box-shadow: none;  
/* Ancho del botón */
  height: 60px;
  min-width: 60px;
  line-height: 20px;
}

.folder-select{

padding: 13px;
background-color: #333;
color: white;
border: #00000063;
border-radius: 5px;

}

#closeMoveImagesContainer {
  
  background-image: url('icons/close.png');
  background-size: cover; 
  background-position: center;

  font-size: 40pt;
  align-items: center; /* Centra el contenido verticalmente */
  justify-content: center;
  padding: 0;
  background-color: #2b2b2b;
  transition: background-color 0.3s ease;  
  box-shadow: none;  
/* Ancho del botón */
  height: 60px;
  min-width: 60px !important;
  line-height: 20px;
}


.close-button {
  height: 10px;
  padding: 0;
  font-size: 8px;
  line-height: 10px;
  overflow: hidden;
}


.fancybox-slide {
  padding: 4px !important;
}

.fancybox-caption {
  padding: 75px max(44px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(44px, env(safe-area-inset-left)) !important;

  background: none!important;
  font-size: 12px!important;
}


.fancybox-toolbar {
  right: 0;
  bottom: 0 !important;
}

.fancybox__caption {
  align-self: center;
  max-width: 100%;
  flex-shrink: 0;
  margin: 0;
  padding: 0px 0 0px 0 !important;
  position: fixed;

  bottom: 4px; 
  z-index: 10000;
}


video::-webkit-media-controls {
  zoom: 0.8;
  opacity: 0.3 !important; /* Reducir el tamaño al 75% */
}


video::-webkit-media-controls-play-button {
  zoom: 0.8;
}


.fade-in2 {
  animation: fadeInEffect 0.4s forwards; /* Ajusta la duración según sea necesario */
}

.fade-out2 {
  animation: fadeOutEffect 0.4s forwards; /* Ajusta la duración según sea necesario */
}

@keyframes fadeInEffect {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOutEffect {
  from { opacity: 1; }
  to { opacity: 0; }
}