/* ****************************************************************************
** CSS  that makes magic ;-) With a lot of stolen code. Some places are...   **
** https://developer.mozilla.org/es/docs/Web/CSS/Using_CSS_custom_properties **
**   Examples and basics about variables.                                    **
** https://css-tricks.com/a-complete-guide-to-calc-in-css/                   **
**   Examples and basics about CSS Calc()                                    **
**************************************************************************** */
:root {
  /* *** COLORES *** */
  --C1 : #DDDDDD;    /* color habitual de primer plano; notar que on hover lo normal es que lo cambie por el de segundo plano */
  --C1B: white;      /* color de primer plano Brillante (para negritas o textos resaltados o yo qué sé)*/
  --C2 : black;      /* color habital de fondo; on hover bla bla */
  --C2S: #00000077;  /* color habital de fondo *S*emitransparente (este es el normal, casi nunca lo pondremos sólido) */
  --C2O: #000000DD;  /* color poco habital de fondo semitransparente *O*scuro (lo usaré en tablas alternado con el C2S ) */
  --C2T: #272727;    /* Para fondos oscuros donde haya que leer mucho texto como libros y tal, el contraste no daña tanto la vista */
  --CH : white;      /* color de "halo". una sombra normalente clarita */
  --CS : black;      /* color de las sombras */
  --CB : var(--C1);  /* color de los bordes; normalmente lo mismo que el color del texto */
  --CB2: var(--C2S); /* color de los bordes cuando se invierten los colores... on hover, vaya */

  --C1dark : #DDDDDD; /* este no se va a cambiar. Lo voy a usar par aun botón que cambie el estilo, pero no se aplica a nada */
  /*OJO que no puedes meter el var, que luego el getvalue no hace lo que necesito */

  /* VARIANTES que luego se elegirán por menú. a futuro, personalizables. De momento, claro y oscuro*/
  /* Claro: fondos tirando a blancos y textos oscuros */
  --C-oscuro-1 : #DDDDDD;    /* color habitual de primer plano; notar que on hover lo normal es que lo cambie por el de segundo plano */
  --C-oscuro-1B: white;      /* color de primer plano Brillante (para negritas o textos resaltados o yo qué sé)*/
  --C-oscuro-2 : black;      /* color habital de fondo; on hover bla bla */
  --C-oscuro-2S: #00000077;  /* color habital de fondo *S*emitransparente (este es el normal, casi nunca lo pondremos sólido) */
  --C-oscuro-2O: #000000DD;  /* color poco habital de fondo semitransparente *O*scuro (lo usaré en tablas alternado con el C2S ) */
  --C-oscuro-2T: #272727;    /* Para fondos oscuros donde haya que leer mucho texto como libros y tal, el contraste no daña tanto la vista */
  --C-oscuro-H : white;      /* color de "halo". una sombra normalente clarita */
  --C-oscuro-S : black;      /* color de las sombras */
  --C-oscuro-B : var(--C1);  /* color de los bordes; normalmente lo mismo que el color del texto */
  --C-oscuro-B2: var(--C2S); /* color de los bordes cuando se invierten los colores... on hover, vaya */
  --C-oscuro-1dark : #DDDDDD; /* este no se va a cambiar. Lo voy a usar par aun botón que cambie el estilo, pero no se aplica a nada */
  /* oscuro: fondos tirando a negro y textos claros */
  --C-claro-1 : #333333;    /* color habitual de primer plano; notar que on hover lo normal es que lo cambie por el de segundo plano */
  --C-claro-1B: black;      /* color de primer plano Brillante (para negritas o textos resaltados o yo qué sé)*/
  --C-claro-2 : white;      /* color habital de fondo; on hover bla bla */
  --C-claro-2S: #ffffff77;  /* color habital de fondo *S*emitransparente (este es el normal, casi nunca lo pondremos sólido) */
  --C-claro-2O: #ffffffDD;  /* color poco habital de fondo semitransparente *O*scuro (lo usaré en tablas alternado con el C2S ) */
  --C-claro-2T: #cdcdcd;    /* Para fondos oscuros donde haya que leer mucho texto como libros y tal, el contraste no daña tanto la vista */
  --C-claro-H : black;      /* color de "halo". una sombra normalente clarita */
  --C-claro-S : white;      /* color de las sombras */
  --C-claro-B : var(--C1);  /* color de los bordes; normalmente lo mismo que el color del texto */
  --C-claro-B2: var(--C2S); /* color de los bordes cuando se invierten los colores... on hover, vaya */
  --C-claro-1dark : #333333; /* este no se va a cambiar. Lo voy a usar par aun botón que cambie el estilo, pero no se aplica a nada */
  /* verde: para jugar, de momento rollo verde matrix */
  --C-verde-1 : #99FF99;    /* color habitual de primer plano; notar que on hover lo normal es que lo cambie por el de segundo plano */
  --C-verde-1B: #BBFFBB;      /* color de primer plano Brillante (para negritas o textos resaltados o yo qué sé)*/
  --C-verde-2 : black;      /* color habital de fondo; on hover bla bla */
  --C-verde-2S: #00770077;  /* color habital de fondo *S*emitransparente (este es el normal, casi nunca lo pondremos sólido) */
  --C-verde-2O: #007700DD;  /* color poco habital de fondo semitransparente *O*scuro (lo usaré en tablas alternado con el C2S ) */
  --C-verde-2T: #277727;    /* Para fondos oscuros donde haya que leer mucho texto como libros y tal, el contraste no daña tanto la vista */
  --C-verde-H : green;      /* color de "halo". una sombra normalente clarita */
  --C-verde-S : black;      /* color de las sombras */
  --C-verde-B : var(--C1);  /* color de los bordes; normalmente lo mismo que el color del texto */
  --C-verde-B2: var(--C2S); /* color de los bordes cuando se invierten los colores... on hover, vaya */
  --C-verde-1dark : #99Ff99; /* este no se va a cambiar. Lo voy a usar par aun botón que cambie el estilo, pero no se aplica a nada */

  /* ** Dimensiones ** */
  /* Magic: vamos a usar porcentajes del área visible...
    dvw, dvh	1% of the dynamic viewport's width and height, respectively.
    vmin	1% of the viewport's smaller dimension.
    vmax	1% of the viewport's larger dimension.
    más info: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
  */
  /* --TNumElemsXX --> Número de elementos a lo ancho en modo XX*/  
  --TNumElemsHorizontal: 5; /* en modo horizontal pondremos filas de este número de carpetas/ficheros */
  --TNumElemsVertical: 2; /* en modo vertical pondremos filas de este número de carpetas/ficheros */
  
  /* aquí los redefino de manera independiente. Nótese que muchos elementos siguen siendo proporcionales al TBaseTexto
    pero son sobretodo los padding y las curvas */
  --TBaseTexto: 0.85vmax; /* un 0.8%  del máximo... en 1080 serán 15px (y aún es grande) y en 4k 31. */
  --TMaxElemento: calc(1vmax * (100 / var(--TNumElemsHorizontal))); 
  
  --hueco: var(--TBaseTexto);
  --huecomini: calc(var(--TBaseTexto) / 4); /* Usado en menú superior para espaciados pequeños */
  --curvas: var(--huecomini);   /* para redondear esquinas */
  --veloanim: 0.3s; /* velocidad de las animaciones */

  --padding:  var(--hueco);
  --paddingh: var(--huecomini);
  --tamanyo:  var(--TMaxElemento);
  --difufondo: 5px; /* radio de difuminado de los fondos semitransparentes */
  }

/* tips & tricks 
  * https://macarthur.me/posts/hide-stuff-in-the-browser/
    hidden="until-found" --> el elemento estará hidden pero si se busca con el CTRL+F del navegador... dejará de ser hidden.
    
*/

@media (monochrome) {
  /* WTF monocromo??? pozí... para el kindle. A ver si chuta :)*/
  /* pal debug, color */
  :root {
    --C1 : black;    /* color habitual de primer plano; notar que on hover lo normal es que lo cambie por el de segundo plano */
    --C1B: black;      /* color de primer plano Brillante (para negritas o textos resaltados o yo qué sé)*/
    --C2 : white;      /* color habital de fondo; on hover bla bla */
    --C2S: white;  /* color habital de fondo *S*emitransparente (este es el normal, casi nunca lo pondremos sólido) */
    --C2O: white;  /* color poco habital de fondo semitransparente *O*scuro (lo usaré en tablas alternado con el C2S ) */
    --C2T: white;    /* Para fondos oscuros donde haya que leer mucho texto como libros y tal, el contraste no daña tanto la vista */
    --CH : white;      /* color de "halo". una sombra normalente clarita */
    --CS : black;      /* color de las sombras */
    --CB : var(--C1);  /* color de los bordes; normalmente lo mismo que el color del texto */
    --CB2: var(--C2S); /* color de los bordes cuando se invierten los colores... on hover, vaya */
    --C1dark : black; /* este no se va a cambiar. Lo voy a usar par aun botón que cambie el estilo, pero no se aplica a nada */
    }
  * {
    filter: none !important;
    backdrop-filter: none !important;
    background-image: none !important;
    }
  }


@media screen and (orientation: portrait) {
  :root {
    --TMaxElemento: calc(1vmax * (100 / var(--TNumElemsVertical))); 
    --TBaseTexto: 3vmin; 
    --padding:  var(--hueco);
    --paddingh: var(--huecomini);
    --tamanyo:  var(--TMaxElemento);
    }
  div.contenedor {
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    align-content: flex-start;    
    }
  .pie {
    width: 96% !important;
    left: 2% !important;
    font-size: calc(var(--TBaseTexto) / 1.25) !important;
    }
  .login {
    zoom: 2;
    }
  .loginocultable {
    /* en vertical asumo es móvil y no enseño el QR de login */
    display: none !important;
    }
}

html, body { 
  height: 100%; 
  overflow: auto; 
  font-size: var(--TBaseTexto);
  font-family: "Ubuntu Mono", monospace;
  font-weight: 400;
  font-style: normal;
  /* pointer related / aka you didn't want specific css for IE, then you have this for iOS 13+ */
  /*  touch-action: manipulation;  /* Allow zoom and pan, nothing else */
  line-height: 1.25; /* bootstrap lo pone a 1.5, y a mí no me gusta. */
  }

hr {
  max-height: 1px;
  height: 1px;
  min-height: 1px;
  margin: 0;
  padding: 0;
}

a p {
  padding: 1px;
/*  border-radius: 3px;
  background-color: var(--C2S);*/
  text-overflow: ellipsis;
}

a {
  color: var(--C1);
  text-decoration: none; 
  }

a:hover { 
  text-decoration: none; 
  color: var(--C1B);
  }

a > img, span > img, span > picture > img, a > picture > img  {
  max-height: calc(var(--TMaxElemento));
  padding: 0;
  }

h1 {
  display: block;
  width: 100%;
  overflow: none;
  margin-top: calc(1rem + var(--hueco));
  font-weight: 600;
  filter: drop-shadow(0px 0px 5px var(--CS));
  color: var(--C1);
  }

.izquierda {
  text-indent: 2em;
  text-align: justify !important;
  text-align-last: left !important;
}

.claro {
  color: var(--C1);
  }

/* *** FONDO *** */
.fondo {
  position: absolute;
  top:      0;
  left:     0;
  width:  100%;
  height: 100%;
  border:   0;
  margin:   0;
  padding:  0;
  background-repeat: no-repeat;
  background-attachment: fixed; 
  background-size: cover;
  z-index: -10;
}

/* *** Logo de la productora *** */
.producerlogo {
  position: absolute;
  top:      0;
  right:    0;
  max-width:  128px;
  max-height: 128px;
  border:   0;
  margin:   0;
  padding:  16px;
  z-index: 5;
}

/* *** Logo de la serie/peli/directorio *** */
.clearlogo {
  min-width: 99vw;
  max-width: 99vw;
  max-height: 192px;
  border:   0;
  margin:   0;
  margin-top: 1em;
  padding:  0;
  background-repeat: no-repeat;
  background-attachment: fixed; 
  object-fit: contain;
  filter: drop-shadow(0px 0px 5px var(--CH));
  z-index: 5;
}

/* *** CUERPO *** */ 
body {
  text-align: center;
  color: var(--C1);
}


/* *** Contenedor */
div.contenedor {
  width: 100% !important;
  min-height: 100% !important;
  overflow-y: visible; 
  overflow-x: clip; 
  text-align: center;
  background-color: var(--C2S);
  backdrop-filter: blur(3px);
  padding:0;
  margin: 0;
  /* for flex view https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
  display: flex; 
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;   /* alinear la parte superior de póster e información/ficheros*/
  align-content: center;
  /* THIS is an issue when you set display = none for the items, because gap is kept
     so we move this to the DIVs margin 
     hummm really not an issue; i wss hiding the child elements isntead of parents, due
     to the selecyor used; with div.directorio:has(> a...) works fine. */
  gap: 0 var(--padding);  /* 0 vertical padding, but i want side to side. Folders are usually less than vertical*/
  }


/* *** Página de entrada*/
div.entrada {
  padding: var(--padding) var(--padding) 0 var(--padding);
  width: var(--TMaxElemento);
  height: calc(var(--TMaxElemento) * 1.0);
  flex: 1 auto; 
  display: flex; 
  flex-wrap: wrap;
  justify-content: center;
  align-items: center; 
  align-content: center;
  gap:  var(--padding);
  }


@media only screen and not (hover: none){
  /* aplica sólo en NOT móviles, quiero mostrar las carpetas on hover
     con javascript se hace onclick, para moviles, pero en PC quiero
     ahorrar tiempo y que me las saque al pasar por encima     */
  /* NO ACABA DE GUSTARME 
  .entrada:hover > .carpetas {
    transform:  scaleY(1);
    opacity: 1;
    visibility: visible;
    transition: all var(--veloanim);
    z-index: 99;
    }
  */
}

.carpetas {
  position: absolute;
  border: 0;
  top: 13%;
  left: 13%;
  color: var(--C1);
  background-color: var(--C2S);
  backdrop-filter: blur(5px);
  width: 75%;
  height: 75%;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center; 
  align-content: center;
  border-radius: var(--curvas);
  margin: var(--curvas);
  padding: var(--curvas);
  transition: all var(--veloanim);
  display: flex;
  gap:  calc(3 * var(--padding));
  overflow: visible;
  transform:  scaleY(0);
  opacity: 0;
  visibility: hidden;
  flex-wrap: wrap;
  float: left; 
  clear: both;
}
.carpetas > div {
  flex: 1 auto; 
  justify-content: center;
  align-items: center; 
  align-content: center;
  }

.entrada .carpetas {
  transform: scaleY(0);
  opacity: 0;
  visibility: hidden;  
  }

@media screen and (orientation: portrait) {
  div.entrada, .entrada > span > img {
    flex-direction: column;
    padding: var(--padding);
    max-width: calc(var(--TMaxElemento) * 0.90);
    width: auto;
    max-height: calc(var(--TMaxElemento) * 0.90);
    height: auto;
    gap:  var(--padding);
    }
  .carpetas {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    gap:  calc(1 * var(--padding));
    }
}

.directorioraiz {
  flex-wrap: wrap;
  justify-content: center;
  align-items: center; 
  align-content: center;
  z-index: 5;
  }

.directorio {
  max-width: calc(var(--TMaxElemento) - 2 * var(--padding));
  /*display: flex;*/
  flex-wrap: wrap;
  justify-content: center;
  align-items: center; 
  align-content: center;
  z-index: 5;
  margin-bottom: -2em; /* this is here because folders are being painted with text under it, and the p element is raised by 2em because the folder icons are really not square, so gap is filled with folder name. For folders having lower part painted is not so nice, but on 99% of cases it is. This caused a gap of 2em to appear under the directorio items, and, as folders have also plenty space in the upper part, visual gap was huge. This reduced them to appealing visuals. */
  }

.directorioraiz > a > img, .directorio > a > img {
  height: calc(var(--TMaxElemento) - 2 * var(--padding));
  max-width: calc(var(--TMaxElemento) - 2 * var(--padding));
  object-fit: contain;
  transition: all var(--veloanim);
  padding: 0;
  z-index: 10;
  }

.directorio:hover {
  transform:  scale(1.25);
  transition: all var(--veloanim);
  z-index: 99;
  }

.directorio > a > p  {
  flex: 1 auto; 
  position: relative;
  top: -1em;
  width: calc(var(--TMaxElemento) - 2 * var(--padding));
  max-width: calc(var(--TMaxElemento) - 2 * var(--padding));
  /* display: block; /* NOTE. We can center text vertically on fixed height paragraph trating the paragraph as a table cell
                        BEWARE: it modifies a bit the overall distribution around it */
  display: table-cell;      /* these two rows go together in replacement of previous display: block; */
  vertical-align: middle;   /* these two rows go together in replacement of previous display: block; */
  margin: 0; 
  /*background-color: var(--C2S);*/
  border-radius: var(--huecomini);
  word-wrap: break-word;
  overflow: overlay; /* or hidden; with overlay it shows a small scrollbar */
  height: 3.4em;
  line-height: 1.6em;
  /* text-overflow: ellipsis; /* does NOT work unless white-space is nowrap and then it is only a single line)*/
  /* white-space: pre-wrap; unuseful*/
  }

.directorio:hover, .selected {
  transition: all var(--veloanim);
  filter: drop-shadow(0px 0px 1px var(--CS)) drop-shadow(0px 0px 3px var(--CH)) ;
  }

.archivo{
  /*min-width: calc(var(--TMaxElemento) - 2 * var(--padding));*/
  Width: calc(100% / var(--TNumElemsHorizontal) - var(--padding) - var(--padding) / var(--TNumElemsHorizontal));
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  align-items: center; 
  align-content: left; */
  z-index: 5;
  }

.archivo > a {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  align-content: baseline;
  }

.archivo > a > img  {
  width: 100%;
  object-fit: contain;
  transition: all var(--veloanim);
  padding: 0;
  z-index: 1;
  display: inline-block;
  }

.archivo:hover {
  transform:  scale(1.25);
  transition: all var(--veloanim);
  z-index: 99;
  }

.archivo > a > p {
  width: 100%;
  /*max-width: calc(var(--TMaxElemento) - 2 * var(--padding) - 4em);
  display: block; /* NOTE. We can center text vertically on fixed height paragraph trating the paragraph as a table cell
                        BEWARE: it modifies a bit the overall distribution around it */
  display: table-cell;      /* these two rows go together in replacement of previous display: block; */
  vertical-align: middle;   /* these two rows go together in replacement of previous display: block; */
  background-color: var(--C2S);
  border-radius: var(--huecomini);
  word-wrap: break-word;
  overflow: overlay; /* or hidden; with overlay it shows a small scrollbar */
  /*min-height: 3em;
  max-height: 3em;*/
  height: 3em;
  line-height: 1.5em;
  /* text-overflow: ellipsis; /* does NOT work unless white-space is nowrap and then it is only a single line)*/
  /* white-space: pre-wrap; unuseful*/
  }

.archivo:hover{
  transition: all var(--veloanim);
  filter: drop-shadow(0px 0px 1px var(--CS)) drop-shadow(0px 0px 3px var(--CH)) ;
  }
  
@media screen and (orientation: portrait) {
  /* En vertical, que típicamente es el móvil, un archivo por línea; en tablets, para navegar para video, asumo que voy a estar en horizontal... si pillo libros.... me da igual, el texto se adapta bien.*/
  /* 25292 - redefino el estilo. Hay NumElementos ARCHIVOS en horizontal, pero NumeElementos + 1 DIRECTORIOS; esto es para revisar, probablemnte acabe haciendo que archivos sean NumElementos -1 y directorios NumElementos*/
  .archivo{
    /* Hay n elementos en un 100%; entre cada uno de ellos hay un padding, y aparte un padding extra a cada lado. 
      O sea, cada elemento tiene un padding + 1/n trozos de padding*/
    width: calc((100% / var(--TNumElemsVertical)) - ( var(--padding) ) - ( var(--padding) / var(--TNumElemsVertical)));
    min-width: unset;
    }
  .directorio {
    /* Hay n elementos en un 100%; entre cada uno de ellos hay un padding, y aparte un padding extra a cada lado. 
      O sea, cada elemento tiene un padding + 1/n trozos de padding*/
    width: calc((100% / (var(--TNumElemsVertical) + 1)) - ( var(--padding) ) - ( var(--padding) / var(--TNumElemsVertical)));
    margin-bottom: 0.5em;
    }
  .archivo > a , .directorio > a{
    /*width: calc(vmin - 2 * var(--padding));*/
    width: unset;
    max-width: unset;
    }
  .directorio > a{
    display: flex;
    flex-direction: column;
    align-content: stretch;
    justify-content: space-around;
    align-items: center;    
    }
  .archivo > a > p {
    top: 0;
    width: calc(100% - 3em - ( 3 * var(--padding)) );
    max-width: unset;
    float: right;
    flex: 1 auto; 
    position: relative;
    }
  .directorio > a > p {
    top: 0;
    width: 100%;
    }
  .archivo > a > img {
    height: 3em;
    min-width: 3em;
    max-width: 3em;
    }
  .directorio > a > img {
    height: auto;
    width: 100%;
    }
  }



video {
  width: 75%; 
  }
  
/* *** TABLAS *** */
table.Tabla {
  text-align: left;
  border-radius: 10px;
    border-collapse: separate;
    border-spacing: 0;
    border: 3px solid var(--CB);
    padding: 0px;
}
table.Tabla td, table.Tabla th {
  border-bottom: 1px dotted var(--CB2);
  border-left: 1px dotted var(--CB2);
  padding: 5px;
}
table.Tabla tr td:first-child {
  border-left: 0;
}
table.Tabla tr td:last-child {
  border-right: 0;
}
table.Tabla tr th {
  background-color: var(--C2);
}
table.Tabla tr:nth-child(even) {
  background: var(--C2S);
}
table.Tabla tr:nth-child(odd) {
  background: var(--C2O);
}
table.Tabla tr:first-of-type th:first-child {
  border-radius: 10px 0 0 0;
}
table.Tabla tr:first-of-type th:last-child {
  border-radius: 0 10px 0 0;
}
table.Tabla tr:last-of-type td:first-child {
  border-radius: 0 0 0 10px;
}
table.Tabla tr:last-of-type td:last-child {
  border-radius: 0 0 10px 0;
}

.ok {
  background-color: rgba(150, 255, 150);
}
.leve {
  background-color: rgba(255, 255, 150);
}
.grave {
  background-color: rgba(255, 200, 150);
}
.muygrave {
  background-color: rgba(255, 150, 150);
}
.ERROR {
  background-color: blue;
}

.ayuda {
  border-radius: 1em;
  width: 94% !important;
  min-height: 94% !important;
  overflow-y: visible; 
  overflow-x: clip; 
  background-color: var(--C2S);
  backdrop-filter: blur(5px);
  padding: 1em;
  margin: 3%;
  display: flex; 
  flex-wrap: wrap;
  /*justify-content: center;*/
  align-items: center; 
  align-content: center;
  gap:  var(--padding);
  }



/**** *** LOGIN *** ****/
/* SEE https://codepen.io/davinci/pen/YxwwWd */
.loginocultable {
  /* en vertical se oculta */
}
.login {
  overflow: hidden;
  background-color: var(--C2S);
  padding: 30px;
  border-radius: 10px;
  filter: drop-shadow(0px 0px 2px #000);
}
.login > input {
  font-family: "Ubuntu Mono", sans-serif;
  display: block;
  border-radius: 5px;
  font-size: 16px;
  background: var(--C1);
  color:  var(--C2S);
  border: 2px solid var(--C2S);
  padding: 10px;
  margin: 15px;
}
.login > button {
  font-family: "Ubuntu Mono", sans-serif;
  cursor: pointer;
  color: #fff;
  font-size: 16px;
  text-transform: uppercase;
  width: 80px;
  padding: 10px 0;
  border-radius: 5px;
  background-color: #5b7769;
}
.login > button:hover {
  background-color: #669977;
}



/* *** *** *** *** SCROLLBARS *** *** *** *** */
:root {
  --SBGordo : 7px;  
}
/* Scrollbar Styling */
::-webkit-scrollbar {
    width: var(--SBGordo);
    pointer-events: all;
}
 
::-webkit-scrollbar-track {
  background-color: rgba(0,0,0,0.25);
  -webkit-border-radius: var(--SBGordo);
  border-radius: var(--SBGordo);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb {
  -webkit-border-radius: var(--SBGordo);
  border-radius: var(--SBGordo);
  background-color: #ffffff88;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #ff888888;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #88ff8888;
}

body:not(:has(.contenedor:hover)):hover::-webkit-scrollbar-thumb, 
 .contenedor:hover::-webkit-scrollbar-thumb{
    background: rgba(220, 220, 255, 0.9);
}


.overlay {
  margin: -12px;
  margin-top: calc(-1 * var(--TMaxElemento) / 1.5);
  width: 24px;
  height: 24px;
  z-index: 999;
  top: 0;
  right: 0px;
  filter: drop-shadow(0px 0px 1px rgb(0, 0, 0)) drop-shadow(0px 0px 3px rgb(255, 255, 255)) ;
}

.capabusqueda {
  display: none;
}

.capabusqueda{
  position: absolute;
  top: 2em;
  left: 50%;
  margin-left: -150px;
  margin-top: -1em;
}

.cuadrobusqueda {
  border-radius: var(--curvas);
  border: 2px solid var(--C1);
  filter: drop-shadow(0px 0px 2px var(--CS));
  /*position: absolute;*/
  width: 400px;
  height: 2em;
  background-color: var(--C2S);
  color: var(--C1);
  font-size: 2em;
  display: flex;
  transition: all var(--veloanim);
  }

input {
  border-radius: var(--curvas);
  border: 2px solid var(--C1);
  filter: drop-shadow(0px 0px 2px var(--CS));
  width: auto;
  background-color: var(--C2S);
  color: var(--C1);
  display: flex;
  transition: all var(--veloanim);
  }

.cuadrobusquedaamagat {
  transform-origin: top;
  transform : scaleY(0);
  opacity   : 0;
  visibility: hidden; 
  transition: all var(--veloanim);
  position: absolute;
  top: calc(var(--hueco)* 3);
}
  
.busquedacentro {
  position: relative;
}  

.stats {
  color: white;
}


.login > .errormessage {
  font-family: "Ubuntu Mono", sans-serif;
  display: block;
  border-radius: 5px;
  font-size: 16px;
  background: #A22;
  filter: drop-shadow(0px 0px 2px #000);
  color: white;
  text-align: justify;
  text-wrap: break-word;
  max-width: 100%;
  min-width: 100%;
  border: 0;
  padding: 10px;
  margin: -20px -10px 10px -10px;
}

.novisto {
  
}

.vistodeltodo {
  filter: brightness(25%) saturate(0);
}

.vistoparcialmente {
  filter: drop-shadow(0px 0px 10px #fff);
}

/* OJO: en el html hay que añadir a pinrel  style="--pct: 100%;" */
.vistoparcialmente > a > p {
  background: linear-gradient(to right, 
                              var(--C2)  var(--pct), 
                              var(--C2S) var(--pct));
}


a.estrecho {
  width: 16px !important;
  max-width: 16px !important;
  min-width: 16px !important;
  display: block;
  flex-direction: column;
  
}

a.ancho {
  width: calc(100%-16px) !important;
  max-width: calc(100%-16px) !important;
  min-width: calc(100%-16px) !important;
  display: flex;
  flex-direction: column;
}
a.ancho > span, a.estrecho > span {
  background-color: #0006;
  color: white;
  padding: 4px;
  border-radius: 4px;
}

/*** If we flash an element with flashflask (it will show a small bar with info) hide ir automatically after X seconds* ***/
#flaskflash {
  animation: cssAnimation 7s forwards;
  position: absolute; 
  z-index: 7500; 
  margin: 20px;
  color: black;
  border-color: 2px solid black;
}
#flaskflash > button {
  padding: 0 0 0 20px; 
  margin-top: -10px; 
  margin-right: -10px;
}
@keyframes cssAnimation {
    0%   {opacity: 1;}
    90%  {opacity: 1; transform: scale(1);}
    100% {opacity: 0; transform: scale(0);}
}

hr {
  width: 100%;
  opacity: 0;  
}

.favorito {
  position: absolute;
  display: block;
  right: 0;
  font-size: 2em;
  /*width:24px;
  height:24px;
  border: 2px dotted red;*/
}


.producerlogo, .clearlogo {
  /* La idea es que lo OCULTAMOS por defecto, y un javascript en la página dice que si se carga el fichero de imagen entonces lo muestra */
  display: none;
}



.pie {
  width: 50%;
  left: 25%;
  bottom: 0;
  position: absolute;
  font-size: calc(var(--TBaseTexto) / 1.5);
  text-align: justify;
  background-color: var(--C2S);
  color: var(--C1);
  padding: 0 var(--hueco);
  border-radius: var(--hueco) var(--hueco) 0 0 ;
}

.pie > img {
  margin-top: -40px; /* es la mitad de lo que ocupa la imagen de las galletitas, ojalá pudiera sacarla automáticamente... */
}

.pie > p {
  margin: 0;
}

.ejcondios {
  position: absolute !important;
  top: -999999px !important;
  display: none !important;
}



/* side bar with small icons for opening filter box, sorting, etc*/
.minibarralateral {
  position: fixed;
  top: calc(var(--hueco)*5);
  left: calc(var(--huecomini) * -1);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--C2O);
  background-color: var(--C2S);
  border-radius: 0 var(--hueco) var(--hueco) 0;
  z-index: 1000;
}

.minibarralateral > div{
  padding: var(--huecomini) 0;
}

.filtro {
  position: fixed;
  top: calc(var(--hueco)*5);
  left: calc(var(--hueco) * 2);
  z-index: 1000;
  filter: drop-shadow(0px 0px 2px var(--CS));
  /*position: absolute;*/
  background-color: var(--C2S);
  color: var(--C1);
  font-size: 2em;
  display: flex;
  transition: all var(--veloanim);
  transform: scaleY(0);
  opacity: 0;
  visibility: hidden;      
  border-radius: var(--curvas);
  }

input.filtro{
  width: 40%;
  border: 2px solid var(--C1);
  border-radius: var(--curvas);
}

.filtro > i:before {
  margin-top: 0;
  padding-left: calc((var(--hueco) + var(--huecomini)*2));
  }

.video-js, video {
  border-radius: 1vmax !important;
  }

.vjs-menu {
  border-radius: 0.5vmax !important;
  width: 20vmax !important;
  margin-left: -10vmax !important;
}

input:invalid {
  border-color: red;
}

.nodisponible {
  background-color: red;
  border: 2px solid red;
  opacity: 40%;
  filter: blur(0.1rem) grayscale(1) ;
}
  
table tbody tr td {
  padding: 0.5vmin 1vmin;  
}