/* Plantilla de estilo personalizado: FILEBROWSER by Christian Puntín */

/* Pagina para escanear y convertir colores a HEX: https://imagecolorpicker.com/ Ej. El color blanco es igual a #FFFFFF y negro es igual a #000000. */

/* ************************** TEMPORAL ****************************** */

/* TEMP: Mensaje Flotante 23hs */
@media (min-width: 1025px) {
  body::after {
      visibility: hidden; /* USAR PARA ACTIVAR O DESACTIVAR - visible/hidden */
      content: "¡Servicio disponible hasta las 23hs Arg.!";
      position: fixed;
      bottom: 2em;
      left: 50%;
      transform: translateX(-50%);
      width: auto; /* Ajusta automáticamente el ancho según el contenido */
      height: 2em;
      padding: 20px; /* Espaciado interno */
      background-color: var(--red);
      color: #fff; /* Color del texto - blanco */
      text-align: center;
      z-index: 9999; /* Asegura que esté por encima de otros elementos */
      border-radius: 6px; /* Bordes redondeados */
      display: flex; /* Flexbox para centrar verticalmente */
      align-items: center; /* Centra verticalmente */
      justify-content: center; /* Centra horizontalmente */
      opacity: 0; /* Inicia con opacidad 0 */
      animation: slide-up 2s ease-in-out, wait 10s linear 2s forwards, slide-down 2s ease-in-out 12s forwards, fade-in 2s ease-in-out, fade-out 2s ease-in-out 12s forwards; /* Concatenacion de animaciones */
  }
}
@media (min-width: 601px) and (max-width: 1024px) and (min-height: 401px) {
  main::after {
      visibility: hidden; /* USAR PARA ACTIVAR O DESACTIVAR - visible/hidden */
      content: "¡Servicio disponible hasta las 23hs Arg.!";
      position: fixed;
      bottom: 2em;
      left: 50%;
      transform: translateX(-50%);
      width: auto; /* Ajusta automáticamente el ancho según el contenido */
      height: 2em;
      padding: 20px; /* Espaciado interno */
      background-color: var(--red);
      color: #fff; /* Color del texto - blanco */
      text-align: center;
      z-index: 9999; /* Asegura que esté por encima de otros elementos */
      border-radius: 6px; /* Bordes redondeados */
      display: flex; /* Flexbox para centrar verticalmente */
      align-items: center; /* Centra verticalmente */
      justify-content: center; /* Centra horizontalmente */
      opacity: 0; /* Inicia con opacidad 0 */
      animation: slide-up 2s ease-in-out, wait 10s linear 2s forwards, slide-down 2s ease-in-out 12s forwards, fade-in 2s ease-in-out, fade-out 2s ease-in-out 12s forwards; /* Concatenacion de animaciones */
  }
}
@media (max-width: 600px), (max-height: 400px) {
  main::after {
      visibility: hidden; /* USAR PARA ACTIVAR O DESACTIVAR - visible/hidden */
      content: "¡Servicio disponible hasta las 23hs Arg.!";
      position: fixed;
      bottom: 0.5em;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      height: 2em;
      padding: 20px; /* Espaciado interno */
      background-color: var(--red);
      color: #fff; /* Color del texto - blanco */
      text-align: center;
      font-weight: bold; /* Hace el texto en negrita */
      z-index: 9999; /* Asegura que esté por encima de otros elementos */
      border-radius: 6px; /* Bordes redondeados */
      display: flex; /* Flexbox para centrar verticalmente */
      align-items: center; /* Centra verticalmente */
      justify-content: center; /* Centra horizontalmente */
      opacity: 0; /* Inicia con opacidad 0 */
      animation: slide-up_mobile 2s ease-in-out, wait 20s linear 2s forwards, slide-down_mobile 2s ease-in-out 12s forwards, fade-in 2s ease-in-out, fade-out 2s ease-in-out 12s forwards; /* Concatenacion de animaciones */
  }
}

/* TEMP: Mensaje Disponibilidad Servidor en panel izquierdo - Zona Creditos LINEA 1: */
.credits::before {
  visibility: hidden; /* USAR PARA ACTIVAR O DESACTIVAR - visible/hidden */
  content: "Servicio disponible de 7 a 23 hs (Arg.)";
  position: absolute;
  top: 0;
  left: 0;
  /* Copia las propiedades de estilo del texto original */
  color: var(--red); /* Ajusta según el color original */
  font-size: 1.2em;
  font-weight: bold; /* Hace el texto en negrita */
  line-height: inherit; /* Asegura que el interlineado sea el mismo */
}

/* ******************************************************************** */

/* Ocultar creditos de Filebrowser en panel izquierdo: */
.credits {
  visibility: hidden; /* Oculta el texto original */
  position: relative; /* Permite posicionar los pseudo-elementos */
}
/* Reemplazo creditos Filebrowser en panel izquierdo - Zona Creditos LINEA 2: */
.credits::after {
  content: "2024 AnaPaula TV - Cloud Storage Producción.";
  visibility: visible; /* USAR PARA ACTIVAR O DESACTIVAR - visible/hidden */
  position: absolute;
  top: 1.5em; /* Ajusta según el espacio necesario entre las dos líneas */
  left: 0;
  /* Copia las propiedades de estilo del texto original */
  color: var(--textPrimary); /* Ajusta según el color original */
  font-size: inherit;
  font-weight: inherit; /* Texto normal */
  line-height: inherit; /* Asegura que el interlineado sea el mismo */
}

/* LOGIN - Eliminar TITULO original de Filebrowser: */
#login h1 {
  text-align: center;
  font-size: 0em;
  margin: 0em 0 0em;
  visibility: hidden;
}
/* LOGIN - Imagen:*/
#login form img {
    content: url("./img/login.svg");
    width: 20em;
    height: auto;
    margin: 0 auto;
    display: block;
}
/* LOGIN - Agregar creditos pie de pantalla del login */
#login::after {
  content: "2024 Producción AnaPaula TV - Cloud Storage";
  display: block;
  position: fixed;
  bottom: 10px; /* Distancia desde el borde inferior */
  left: 0;
  width: 100%;
  text-align: center; /* Alineación centrada del texto */
  font-size: 0.7em; /* Tamaño de fuente */
}

:root {
/*    --background: #FFFFFF;
    --surfacePrimary: #FFFFFF;
    --surfaceSecondary: #FFFFFF;
    --surfaceHover: #383d51;
    --surfaceSelect: #4c5374;*/

/* Color de texto items y barra de direcciones: */    
    --textPrimary: #546E7A;
/* Color de titulo Login y textos generales de opciones: */
    --textSecondary: #373737;
    --radius: 0.7rem;
/* Color BASE Botones y otros - CLARO: */
    --blue: #CBA4B8;
/* Color SECUNDARIO Botones y otros - Igual a color logotipo: */
    --dark-blue: #C703A7;
/* Color fondo box mensajes de ERROR y otros */
    --red: #EF5076; /* Original es #ff5252 */
    --dark-red: #EF5076; /* Original es #EF5350 */
/* Color SPINNER de carga items de la lista del directorio o miniaturas */    
    --icon-blue: #C703A7;
}
/* Color Checkboxs en panel opciones */ 
input[type="checkbox"] {
  accent-color: #C703A7;
}

/* Espaciado o relleno entre items de la lista de archivos */
#listing.list .item {
    padding: 0.5em;
}
/* iconos carpetas y archivos - color ICONO items SIN seleccionar */
#listing .item[aria-selected="false"] div i {
        color: #CBA4B8;
}
/* iconos carpetas y archivos - color items SELECCIONADOS: normalmente blanco */
:root {
    --iconSecondary: #FFFFFF;
}

/* Barra progreso superior: ESPESOR: */
.progress {
  height: 5px;
}
/* Barra progreso superior: COLOR: */
.progress div {
  background-color: #C703A7;
}
/* Tarjeta flotante - carga de archivos: COLOR Barra progreso: */
.upload-files .file .file-progress div {
  background-color: #CBA4B8;
}

/* Pagina de visita a Link compartido - DESCARGA: Color de Icono GRANDE CENTRO: */
.share__box__icon i {
  font-size: 10em;
  color: #CBA4B8;
}

/* ************************** MOBILE ****************************** */

/* No compatible: Bloquear dispositivos con ancho o alto menor a 350px */
@media (max-width: 350px), (max-height: 350px) {
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-color: white;
    }
    body > * {
        display: none;
    }
    body::before {
        content: '❗️Resolución de pantalla no compatible';
        font-size: 1em; /* Ajusta el tamaño de fuente según sea necesario */
        color: #373737;
        display: inline;
        font-weight: bold;
        text-align: center;
        white-space: nowrap;
    }
}

/* MOBILE - Configuraciones generales: */

@media (max-width: 1024px) {
  main {
    width: calc(100% - 13em);
  }
  body {
    padding-bottom: 5em;
  }
  #listing.list .item .size {
    display: none;
  }
  #listing.list .item .name {
    width: 60%;
  }
  #more {
    display: inherit;
  }
  header .overlay {
    width: 100%;
    height: 100%;
    background-color: var(--borderPrimary);
  }
  #dropdown {
    position: fixed;
    top: 1em;
    right: 2em;
    display: block;
    background: var(--surfaceSecondary);
    box-shadow: 0 0 5px var(--borderPrimary);
    transform: scale(0);
    transition: 0.1s ease-in-out transform;
    transform-origin: top right;
    z-index: 99999;
  }
  html[dir="rtl"] #dropdown {
    right: unset;
    left: 1em;
    transform-origin: top left;
  }
  #dropdown > div {
    display: block;
  }
  #dropdown.active {
    transform: scale(1);
  }
  #dropdown .action {
    display: flex;
    align-items: center;
    border-radius: 0;
    width: 100%;
  }
  #dropdown .action span:not(.counter) {
    display: inline-block;
    padding: 0.4em;
  }
  #dropdown .counter {
    left: 2.25em;
  }
  #file-selection {
    position: fixed;
    bottom: 6em;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    background: var(--surfaceSecondary);
    box-shadow:
      rgba(0, 0, 0, 0.06) 0px 1px 3px,
      rgba(0, 0, 0, 0.12) 0px 1px 2px;
    width: 95%;
    max-width: 20em;
    z-index: 1;
  }
  #file-selection .action {
    border-radius: 50%;
    width: auto;
  }
  #file-selection > span {
    display: inline-block;
    margin-left: 1em;
    color: var(--textPrimary);
    margin-right: auto;
  }
  #file-selection .action span {
    display: none;
  }
  nav {
    top: 0;
    z-index: 99999;
    background: var(--surfaceSecondary);
    height: 100%;
    width: 16em;
    box-shadow: 0 0 5px var(--borderPrimary);
    transition: 0.1s ease left;
    left: -17em;
  }
  html[dir="rtl"] nav {
    left: unset;
    right: -17em;
  }
  nav.active {
    left: 0;
  }
  html[dir="rtl"] nav.active {
    left: unset;
    right: 0;
  }
  .shell__divider {
    height: 12px;
  }
  header .search-button,
  header .menu-button {
    display: inherit;
  }
  header img {
    display: block !important;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
  }
  #listing {
    margin-bottom: 5em;
  }
  html[dir="rtl"] #listing {
    margin-right: unset;
  }
  html[dir="rtl"] .breadcrumbs {
    transform: translateX(16em);
  }
  html[dir="rtl"] #nav .wrapper {
    margin-right: unset;
  }
  html[dir="rtl"] .dashboard .row {
    margin-right: unset;
  }
  main {
    margin: 0 1em;
    width: calc(100% - 2em);
  }
  #search {
    display: none;
  }
  #search.active {
    display: block;
  }
}
@media (max-width: 450px) {
  #listing.list .item .modified {
    display: none;
  }
  #listing.list .item .name {
    width: 100%;
  }
}

/* ******************************************************************** */

/* ANIMACIONES GENERICAS PARA TARJETAS DE INFORMACION */
/* Animación de espera */
@keyframes wait {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}
/* Animación de deslizamiento hacia arriba */
@keyframes slide-up {
    0% {
        bottom: -5em; /* Inicia fuera de la pantalla */
    }
    75% {
        bottom: -5em; /* Inicia fuera de la pantalla */
    }
    90% {
        bottom: 3em;
    }
    100% {
        bottom: 2em; /* Termina en la posición deseada */
    }
}
@keyframes slide-up_mobile {
    0% {
        bottom: -5em; /* Inicia fuera de la pantalla */
    }
    75% {
        bottom: -5em; /* Inicia fuera de la pantalla */
    }
    90% {
        bottom: 1.5em;
    }
    100% {
        bottom: 0.5em; /* Termina en la posición deseada */
    }
}
/* Animación de deslizamiento hacia abajo */
@keyframes slide-down {
    0% {
        bottom: 2em; /* Comienza en la posición visible */
    }
    10% {
        bottom: 3em;
    }
    25% {
        bottom: -5em; /* Termina fuera de la pantalla */
    }
    100% {
        bottom: -5em; /* Permanece fuera de la pantalla */
    }
}
@keyframes slide-down_mobile {
    0% {
        bottom: 0.5em; /* Comienza en la posición visible */
    }
    10% {
        bottom: 1.5em;
    }
    25% {
        bottom: -5em; /* Termina fuera de la pantalla */
    }
    100% {
        bottom: -5em; /* Permanece fuera de la pantalla */
    }
}
/* Animación de aumento de opacidad */
@keyframes fade-in {
    0% {
        opacity: 0; /* Inicia con opacidad 0 */
    }
    100% {
        opacity: 1; /* Termina con opacidad 100 */
    }
}
/* Animación de disminución de opacidad */
@keyframes fade-out {
    0% {
        opacity: 1; /* Inicia con opacidad 100 */
    }
    100% {
        opacity: 0; /* Termina con opacidad 0 */
    }
}

/* ******************************************************************** */

/* SETTINGS: */

/* Ocultar el selector de idioma */
h3 {
    display: none;
}
select[name="selectLanguage"] {
    display: none;
}

/* CORRECCION: Agregar texto faltante en menu opciones de version ESPAÑOL - "Hide DotFiles" */
/* Apuntar al input específico y agregar el texto descriptivo después */
input[name="hideDotfiles"]::after {
    content: "Hide '.dotfiles'";
    color: var(--textSecondary);
    display: inline;
    margin-left: 1.08em;
    vertical-align: middle;
    white-space: nowrap;
    position: relative;
    top: -1px;
}
input[name="hideDotfiles"] {
    display: inline-block;
    vertical-align: middle;
}