/* screen - ficha */
#transp {
  display:none; position:fixed; top: 0; right: 0; bottom:0; left: 0; z-index:751; background-color: #FFFFFF;
  width: 90vh; max-width: 100%; margin: 0 auto;
}
.ficha {overflow: auto; position: relative; height: calc(100% - 1px);}
.ficha .ficha-fondo {
  position:fixed; height: 100%; width: 90vh;background-image: url(/app/img/terminal/ficha/capture-d-e-cran-2021-01-19-a--18-22-02-10@1x.png); 
  background-size: 97px; opacity: 0.2;
}
.ficha .fondo {height: 45vh; width: 90vh; max-width: 100%; position: fixed; top: 0;}
.ficha .image{height: 45vh; width: 100%; background-color: darkgrey; background-position: center; background-size: cover;}
.ficha .fondo ul{top: calc(45vh - 45px);}
.ficha .fondo li{margin: 0;}
.ficha .virtual{position: fixed; top: calc(45vh - 68px); width: 90vh; max-width: 100%; display: flex; justify-content: center;}
.ficha .virtual div{background-color: #fff; border-radius: 15px; color:#D86835; padding: 3px 5px; font-weight: 500; margin: 0 2px; cursor: pointer;}
.ficha .group-ficha {position: relative; top: calc(45vh - 15px); width: 92%; margin: 0 auto;}
.ficha .group-info-recurso {
  background-color: #ffffff; position: relative; padding: 8%; border-radius: 10px; box-shadow: 0px 3px 20px #0000001C; 
  font-family: 'Montserrat', Helvetica, Arial, serif;
}
.ficha .clase {color: var(--black); font-size: 14px; font-weight: 400; opacity: 0.8; padding-top: 1.7%; text-transform: uppercase;}
.ficha .nombre-recurso {color: #000000; font-size: 15px; font-weight: 600; padding: 5.1% 0 8.5%; text-transform: uppercase;}
.ficha .tipo-turismo {line-height: 35px;}
.ficha .tipo-turismo span {color: rgba(46,46,46,1.0); font-size: 14px; background-color: rgba(240,240,240,1.0); border-radius: 10px; padding: 7px; margin: 3px;}
.ficha .botonera {display: table; width: 100%; text-align: center; font-size: 12px; padding: 6.8% 0 9%; margin: 0 auto;}
.ficha .botonera-row {display: table-row;}
.ficha .botonera-cell {display: table-cell; vertical-align: middle; line-height: 10px; width: 25%;}
.ficha .botonera-cell i{padding: 13px; border-radius: 50px; box-shadow: 0px 3px 6px #0000000b; cursor: pointer;}
.ficha .botonera-cell div{padding-top: 10px;}
.ficha .ruta i{background-color: rgba(216,104,53,1.0); border-radius: 50px; color: #fff; box-shadow: 0px 3px 6px #0000001A;}
.ficha .ruta div{color: rgba(216,104,53,1.0);}
.ficha .direccion {font-size: 14px; font-weight: 600}
.ficha .coord {font-size: 14px;}
.ficha .separador {background-color: #707070; height: 1px; opacity: 0.5; margin: 7% 0;}
.ficha .descripcion-recurso {font-size: 14px; font-weight: 400;}
.ficha .read-more {cursor:pointer; font-size:12px; font-weight:500; letter-spacing:1.25px; color:#D86835}
.ficha .info-adicional {color: #050505; font-size: 20px; font-weight: 700; letter-spacing: 0.15px; padding-left: 5px;}
.ficha .carpeta {
  border: 1px solid #050505; border-radius: 8px; font-size: 16px; font-weight: 400; color: #050505; padding: 16px; cursor: pointer; margin: 8px 0; 
  letter-spacing: 0.5px; display: flex; align-items: center; justify-content: space-between; text-decoration: none;
}
.ficha .carpeta div{display: flex; align-items: center;} .ficha .carpeta div img{width: 24px; height: 24px; margin-right: 15px; transform: unset;}
.ficha .carpeta img{width: 24px; height: 24px; transform: rotate(270deg); padding-top: 8px;}
.ficha .book {
  position: fixed; bottom: 0; left: 0; right: 0; width: 90vh; height: 77px; display: flex; align-items: center; background-color: #fff; 
  box-shadow: 0 1.212px 4.85px 0 #00000026; max-width: 100%; margin: 0 auto;
}
.ficha .book div{
  display: flex; align-items: center; color: #fff; font-size: 10px; font-weight: 500; letter-spacing: 1.25px; text-transform: uppercase;
  background-color: #D86835; border-radius: 8px; min-width: 161px; height: 44px; position: relative; margin: 0 auto; cursor: pointer;
}
.ficha .book div p{padding-right: 16px;}
.ficha .book div img{padding: 0 16px;}
.ficha .headerR {
  position: fixed; top: 0; width: 90vh; max-width: 100%; display: flex; align-items: center; justify-content: space-between; height: 11.5%;
}
.ficha .group-ficha svg {position: absolute; right: 8%; top: -35px; width: 60px; height: auto; border-radius: 5px; padding: 5px; background-color:#FFF;}
#share_m {position: absolute; right: 8%; top: -30px; width: 50px; height: 50px; border-radius: 50px; padding: 5px; background-color:#FFF; display: flex;}
.ficha .header-rec {left: 4%; cursor: pointer; position: relative;}
.ficha .header-rec img{
  width: 44px; background-color: #ffffff4d; backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); 
  border-radius: 50px; box-shadow: 0px 3px 20px #00000058;
}
.ficha #nombreRecH {display: none; font-size: 15px; font-weight: 600; overflow: hidden; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; padding: 0 30px; text-transform: uppercase;}
.ficha .close-button {position: relative; right: 4%; cursor: pointer;}
.ficha .close-button i{
  background-color: #ffffff4d; backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); color: #ffffff; border-radius: 50px; padding: 10px; 
  box-shadow: 0px 3px 20px #00000058;font-size: 24px;
}
.ficha .map-button {right: 7%; position: fixed; top: 3.3%; cursor: pointer;}
.ficha .map-button i{
  background-color: #ffffff4d; backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); color: #ffffff; border-radius: 50px; padding: 10px; 
  box-shadow: 0px 3px 20px #00000058; font-size: 24px;
}
.fecha-table {display: table; width: 100%;}
.fecha-row {display: table-row;}
.fecha-cell {display: table-cell;}
.fecha-fecha {font-size: 13px; font-weight: 600;}
.fecha-hora {font-size: 10px;}

@media (max-height: 640px), (max-width: 300px){
  .ficha .clase {font-size: 11px;}
  .ficha .nombre-recurso {font-size: 14px;}
  .ficha .tipo-turismo span {font-size: 11px;}
  .ficha .botonera {font-size: 9px;}
  .ficha .direccion {font-size: 11px;}
  .ficha .coord {font-size: 11px;}
  .ficha .descripcion-recurso {font-size: 11px;}
  .ficha .read-more {font-size: 9px;}
  .ficha .book div{font-size: 9px;}
  #share_m {top: -25px; width: 40px; height: 40px;}
  .ficha .header-rec img{width: 40px;}
  .ficha #nombreRecH {font-size: 14px;}
  .ficha .close-button i {font-size: 20px;}
  .ficha .map-button i {font-size: 20px;}
  .fecha-fecha {font-size: 12px;}
  .fecha-hora {font-size: 9px;}
}
@media (min-height: 901px) {
  .ficha .fondo ul{top: calc(45vh - 50px);}
  .ficha .virtual{top: calc(45vh - 75px);}
  .ficha .virtual div{font-size: 17px;}
  .ficha .group-ficha {top: calc(45vh - 18px);}
  .ficha .group-info-recurso {border-radius: 13px; padding: 5% 6%;}
  .ficha .clase {font-size: 17px;}
  .ficha .nombre-recurso {font-size: 20px; padding-bottom: 7%;}
  .ficha .tipo-turismo {line-height: 49px;}
  .ficha .tipo-turismo span {font-size: 17px; padding: 9px; margin: 4px; border-radius: 13px;}
  .ficha .botonera {font-size: 15px;}
  .ficha .botonera-cell i{font-size: 29px; padding: 14px;}
  .ficha .direccion {font-size: 17px;}
  .ficha .coord {font-size: 17px;}
  .ficha .descripcion-recurso {font-size: 17px;}
  .ficha .read-more {font-size: 15px;}
  .ficha .book div{font-size: 15px;}
  .ficha .group-ficha svg {top: -50px; width: 90px;}
  #share_m {top: -35px; width: 60px; height: 60px;}
  .ficha .header-rec img{width: 62px;}
  .ficha #nombreRecH {font-size: 20px;}
  .ficha .close-button i{font-size: 34px; padding: 14px;}
  .ficha .map-button i{font-size: 34px; padding: 14px;}
  .fecha-fecha {font-size: 19px;}
  .fecha-hora {font-size: 16px;}
}
@media (min-height: 1250px) {
  .ficha .fondo ul{top: calc(45vh - 55px);}
  .ficha .virtual{top: calc(45vh - 90px);}
  .ficha .virtual div{font-size: 22px;}
  .ficha .group-ficha {top: calc(45vh - 20px);}
  .ficha .group-info-recurso {border-radius: 15px; padding: 5% 6%;}
  .ficha .clase {font-size: 22px;}
  .ficha .nombre-recurso {font-size: 25px; padding-bottom: 7%;}
  .ficha .tipo-turismo {line-height: 57px;}
  .ficha .tipo-turismo span {font-size: 22px; padding: 10px; margin: 5px; border-radius: 15px;}
  .ficha .botonera {font-size: 20px;}
  .ficha .botonera-cell i{font-size: 34px; padding: 15px;}
  .ficha .direccion {font-size: 22px;}
  .ficha .coord {font-size: 22px;}
  .ficha .descripcion-recurso {font-size: 22px;}
  .ficha .read-more {font-size: 20px;}
  .ficha .book div{font-size: 20px;}
  .ficha .group-ficha svg {top: -55px; width: 100px;}
  #share_m {top: -40px; width: 70px; height: 70px;}
  .ficha .header-rec img{width: 84px;}
  .ficha #nombreRecH {font-size: 25px;}
  .ficha .close-button i{font-size: 42px; padding: 21px;}
  .ficha .map-button i{font-size: 42px; padding: 21px;}
  .fecha-fecha {font-size: 24px;}
  .fecha-hora {font-size: 18px;}
}
@media (orientation: landscape) and (max-height: 350px){
  .ficha .map-button i{padding: 12px;}
}