@import url("ArrieroNav.css");

@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 400;
  src: url("../img/UbuntuFont.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Maven Pro";
  font-style: normal;
  font-weight: 900;
  src: url("../img/MavenProFont.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root{
  --verde-arriero: #00a339;
  --verde-arriero-transp: #00a33977;
  --verde-arriero-claro: #3ccf70;
  --verde-arriero-oscuro: #007f2d;
  --gris-bg: #dfdfdf;
  --gris-claro: #ebebeb;
  --gris-oscuro: #404040;
  --gris-oscuro2: #b0b0b0;
  --negro: #000;
  --negro-transp: #0006;
  --blanco: #fff;
  --blanco-transp: #fff5;
  --texto-oscuro: #000;
  --texto-claro: #fff;
  --width-desk: 950px;
  --font-arriero-titulo: 'Maven Pro', sans-serif;
  --azul-btn: #0087bd;
  --rojo-btn: crimson;
  --text-shadow-titulo1: 1px 1px 3px var(--negro);
}

iframe, img {
  max-width: 100%;
  border: 0;
}
.EdicionFrame {
  width: 100%;
  height: 85vh;
}

body {
  border: 0;
  font-family: Ubuntu, sans-serif;
  font-size: 1em;
  margin: 0;
  padding: 0;
  background: var(--verde-arriero) url("../img/texture.jpg");
  display: grid;
  gap: 1em;
  grid-template-areas: 
    "header"
    "nav"
    "main"
    "aside"
    "footer";
  /* 
    grid-template-columns:
    */
}

.Arriero_SFHeader {
  grid-area: header;
}

.Arriero_SFNav {
  grid-area: nav;
}

.Arriero_SFMain {
  grid-area: main;
}

.Arriero_SFAside {
  grid-area: aside;
}

.Arriero_SFFooter {
  grid-area: footer;
}


.ArrieroTitulo {
  font-family: 'Maven Pro', sans-serif;
  font-size: 1.5em;
  margin: 0;
  padding: 0.2em;
  color: var(--blanco);
  background-color: #000;
}

h1 {
  font-family: 'Maven Pro', sans-serif;
  text-wrap-style: balance;
}
h2 {
  font-family: 'Maven Pro', sans-serif;
  text-wrap-style: balance;
}

h3 {
  text-wrap-style: balance;
}

a {
  color: var(--verde-arriero);
  text-decoration: none;
  text-decoration-line: underline;
}

a:hover {
  color: var(--verde-arriero-claro);
}

h1 a {
  text-decoration: none;
  color: var(--blanco);
}
h1 a:hover {
  text-decoration: underline;
  color: var(--blanco);
}

main {
  margin: 0 auto;
}

main.container {
  margin: 0 1em;
}

main section {
  margin: 1em 0;
  box-shadow: 0 0 1em rgba(0, 0, 0, 0.4);
  border-radius: 0.25em;
}

main section h1 {
  background: #000;
  color: var(--blanco);
  text-align: center;
}

main section h2 {
  color: var(--verde-arriero);
}

footer {
  background: #000;
  border: 0;
  color: var(--blanco);
  margin: 0;
  padding: 0;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
}

footer .Titulo {
  font-size: 1.5em;
  font-weight: bold;
  text-wrap-style: balance;
}

footer .InfoBox {
  text-align: center;
  display: grid;
  grid-template-columns: 1fr;
}

footer .LogoArrieroFooter {
  max-height: 10em;
  display: block;
  margin: 0 auto;
  padding: 0.5em;
}
footer .InfoBox .InfoContain {
  padding: 0.5em;
}
footer .InfoBox .InfoContain > div {
  padding: 0.25em;
}

footer .InfoMenu .RedesBox,
footer .InfoMenu .AcercaMenu {
  padding: 0.5em;
}
footer .InfoMenu .AcercaMenu a {
  display: block;
  margin: 0.5em;
  text-wrap-style: balance;
}





/* ----------------------------- */

.MenuBoxFloatBlack {
  background-color:rgba(0, 0, 0, 0.5);
  z-index: 55;
  backdrop-filter: blur(10px);
}

.MenuBoxFloat {
  z-index: 56;
  width: 100%;
  max-width: 16em;
  text-align: left;
  background-color: #dfdfdf;
}
.MenuBoxFloat ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.MenuBoxFloat .MenuArrieroBotonFloat {
  position: absolute;
  padding: 0.5em;
  color: var(--blanco);
  background-color: #000;
}
.MenuBoxFloat .MenuArrieroInfoFloat {
  padding: 0.5em;
  font-size: 0.8em;
  text-align: center;
  background-color: var(--verde-arriero);
  color: var(--blanco);

}
.MenuBoxFloat .MenuArrieroFloat .topMenuHover > a {
  display: block;
  padding: 0.5em;
  text-decoration: none;
  border-left: 5px solid #000;
  font-family: 'Maven Pro', sans-serif;
  color: var(--blanco);
  background-color: #000;
}
.MenuBoxFloat .MenuArrieroFloat .topMenuHover:hover > a {
  border-left: 10px solid #000;
  
}
.MenuBoxFloat .MenuArrieroFloat .topMenuHover .subMenu a {
  display: block;
  padding-left: 1.5em;
  text-decoration: none;
  padding: 0.5em;
}
.MenuBoxFloat .MenuArrieroFloat .topMenuHover .subMenu a:hover {
  text-decoration: underline;
  color: #007f2d;
}

/* ------------------------ */

.breadWalk {
  background: rgba(0, 0, 0, 0.5);
  text-align: left;
  padding: 0.5em;
  margin: 0;
}

.breadWalk li {
  display: inline-block;
  color: var(--blanco);
  margin: 0.5em 0.2em;
}

.breadWalk li a {
  color: var(--blanco);
}

.breadWalk li:after {
  content: " /";
}

.breadWalk li:first-child:before {
  content: " » ";
}

.breadWalk li:last-child:after {
  content: "";
}



/* ************************************************* */
.ClasificadoArrieroBox {
  position: relative;
  margin: 1em 0;
  border-radius: 0.5em;
}
.ClasificadoArrieroBox .ClasificadoBox_Header {
  text-align: right;
  color: var(--blanco);
  font-size: 8pt;
}

.ClasificadoArrieroBox .NoBanner {
  background-color: #6274aa;
  padding: 0.5em;
  position: relative;
  overflow: hidden;
  text-align: left;
  height: 250px;
}
.ClasificadoArrieroBox .NoBanner img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
}
.ClasificadoArrieroBox .NoBanner div,
.ClasificadoArrieroBox .NoBanner span {
  position: absolute;
  padding: 0.25em;
  background: #fff5;
  backdrop-filter: blur(5px);
}
.ClasificadoArrieroBox .NoBanner span {
  background-color: var(--verde-arriero-transp);
  color: var(--blanco);
}
.ClasificadoArrieroBox .NoBanner div {
  bottom: 0;
  right: 0;
  color: var(--blanco);
  text-shadow: 1px 1px 2px #000;
  font-size: 16pt;
  font-family: var(--font-arriero-titulo);
}

.ArrieroTitulo {
  color: var(--blanco);
  background-color: var(--negro);
  padding: 0.5em;
}

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

.headerMunicipio {
  height: 23em;
  overflow: hidden;
  position: relative;
}
.headerMunicipio img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tituloMunicipio {
  background: rgba(0, 0, 0, 0.5);
  color: var(--blanco);
  width: 100%;
  position: absolute;
}
.tituloMunicipio h1,
.tituloMunicipio h2 {
  margin: 0px;
}
.tituloMunicipio h1 {
  font-size: 2em;
}
.generalidadesMunicipioList li:hover {
  background: var(--blanco);
}
.generalidadesMunicipioList li p {
  display: inline-block;
}

/* ************************************************************************************** */
.ComentariosFormNK_BoxForm {
  background-image: url("bg_comentario_form.jpg");
}
.ComentariosFormNK_BoxForm form {
  width: 60%;
  text-align: center;
  margin: 0.5em auto;
}
.ComentariosFormNK_BoxForm input[type=text],
.ComentariosFormNK_BoxForm input[type=submit] {
  display: block;
  width: 90%;
  margin: 0.5em auto;
}
.ComentariosFormNK_BoxForm input[type=text] {
  border: 0;
  padding: 0.5em;
  /*background-color: #dfdfdf;*/
  background-color: var(--blanco);
}
.ComentariosFormNK_TextarearichHeader {
  background-color: #000;
  color: var(--blanco);
}
.ComentariosFormNK_Textarearich {
  padding: 1em;
  background-color: #c5c5c5;
}
.ComentariosFormNK_BoxComentarios .ControlsComentarios {
  text-align: right;
}
.ComentariosFormNK_BoxComentarios .ControlsComentarios li {
  display: inline-block;
  padding: 0.2em;
}
.ComentariosFormNK_BoxComentarios .ControlsComentarios li:hover {
  background-color: #000;
  color: var(--blanco);
}
.ComentariosFormNK_BoxComentarios .ItemComentario {
  margin: 0.5em;
}
.ComentariosFormNK_BoxComentarios .ItemComentario:hover {
  background-color: var(--blanco);
}
.ComentariosFormNK_BoxComentarios .ItemComentario b {
  text-align: left;
  font-family: 'Maven Pro', sans-serif;
  font-size: 1.5em;
  display: block;
}
.ComentariosFormNK_BoxComentarios .ItemComentario time {
  font-size: 0.7em;
  text-align: right;
  background-color: #969696;
  padding: 0 0.5em;
  display: block;

}
/* *********************************************************** */

pre {
  text-align: left;
  display: block;
  background-color: var(--blanco);
  max-width: 100%;
  overflow: auto;
}

/* ------------------- */

button,
.boton,
input[type=submit] {
  display: inline-block;
  position: relative;
  padding: 0.5em 1em;
  margin: 0.25em;
  transition: 0.5s;
  overflow: hidden;
  border:0;
  border-bottom: 3px solid var(--verde-arriero);
  border-radius: 0.5em;
}
button::before,
.boton::before,
input[type=submit]::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(80deg, transparent, var(--blanco), transparent);
  transition: 0.5s;
}
button:hover::before,
button:focus::before,
.boton:hover::before,
.boton:focus::before,
input[type=submit]:hover::before,
input[type=submit]:focus::before {
  left: 100%;
}
button:disabled,
.boton:disabled {
  background-color: #979797;
  cursor: default;
}
button.activo,
.boton.activo {
  background-color: var(--verde-arriero);
  color: var(--blanco);
  border-bottom: 3px solid var(--negro);
}

.AdminModeBox {
  padding: 1em;
  background-color:rgb(255, 230, 0);
}
.btVerde {
  background-color: #007f2d;
  color: var(--blanco);
  text-decoration: none;
  border: 1px solid #000;
}

.ImgMaximize {
  background-color: #fff7;
  backdrop-filter: blur(5px);
  z-index: 50;;
}
.ImgMaximize .ImgMaximizeClose {
  position: absolute;
  right: 0;
  padding: 0.75em;
  z-index: 51;
  background-color: #b10002;
  cursor: pointer;
}
.ImgMaximize .ImgMaximizeCaption {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0.5em;
  text-align: center;
  background: #000;
  color: var(--blanco);
  z-index: 51;
  letter-spacing: 3px;
}

main header {
  height: 8em;
}

main header .logoP {
  /*width: 42.875em;*/
  height: 8em;
}
/*------------------------*/
/* Aside ArrieroInfo */
main {
  margin: 0px auto;
}

aside :first-child {
  margin-top: 0 !important;
}
/* ------------------------- */
.MenuArriero {
  height: 1px;
  overflow: hidden;
  border-bottom: 1em solid #000;
}


/* ------------------ ------------------------ */

.edicionesFisicas {
  grid-template-columns: 1fr;
}

.edicionesFisicas li  img {
  max-height: 25em;
}

/* ------------------ ------------------------ */
.edicionesFisicasMin {
  margin: 1em 0;
}

.edicionesFisicasMin span.prev {
  left: 0px;
  position: absolute;
  top: 10em;
  display: block;
  width: 2em;
  height: 2em;
  line-height: 2em;
  z-index: 1;
}

.edicionesFisicasMin span.next {
  right: 0px;
  position: absolute;
  top: 10em;
  display: block;
  width: 2em;
  height: 2em;
  line-height: 2em;
  z-index: 1;
}


.edicionesFisicasMin div.preview {
  position: relative;
}

.edicionesFisicasMin div.preview img {
  max-height: 15em;
}


.NK_ImgMaximize_Box {
  backdrop-filter: blur(50px);
}
.NK_ImgMaximize_Box .NK_ImgMaximize_Close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.5em;
  color: var(--blanco);
  background-color: crimson;
  cursor: pointer;
}
.NK_ImgMaximize_Box .NK_ImgMaximize_Close:hover {
  background-color: var(--blanco);

}
.NK_ImgMaximize_Box .NK_ImgMaximize_Caption {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  backdrop-filter: blur(10px);
  padding: 0.5em;
  border-radius: 0.5em;
}

table thead {
  background-color: var(--negro);
  color: var(--blanco);
  padding: 0.25em;
}


/*  Estilo tablet */
@media only screen and (min-width: 400px) {

  /* Aside ArrieroInfo */
  main {
      margin: 0 auto;
  }
  
  .edicionesFisicasMin {
      margin: 1em 0;
  }

  .edicionesFisicasMin span.prev {
      left: 0px;
      position: absolute;
      top: 10em;
      display: block;
      width: 2em;
      height: 2em;
      line-height: 2em;
      z-index: 1;
  }

  .edicionesFisicasMin span.next {
      right: 0px;
      position: absolute;
      top: 10em;
      display: block;
      width: 2em;
      height: 2em;
      line-height: 2em;
      z-index: 1;
  }


  .edicionesFisicasMin div.preview {
      float: left;
      position: relative;
      width: 50%;
      padding: 0.5em;
  }

  .edicionesFisicasMin div.preview img {
      max-height: 18em;
      margin: 0 auto;
  }

  /* -------------------------------------------------------------------- */
  .edicionesFisicas {
      grid-template-columns: 1fr 1fr;
  }

  footer {
    grid-template-columns: 1fr 1fr;
  }
  footer .InfoBox {
    text-align: left;
    grid-template-columns: 1fr;
  }
  footer .InfoBox .InfoContain {
    text-align: center;
  }
}

/*  Estilo Desktop */
@media only screen and (min-width: 768px) {

  /*------------------------*/
  /* Aside ArrieroInfo */
  main {
    margin: 0px auto;
  }
  /*-------------------------*/



  /*-----------------------*/

  .edicionesFisicasMin span.prev {
    left: 0px;
    position: absolute;
    top: 10em;
    display: block;
    width: 2em;
    height: 2em;
    color: var(--blanco);
    line-height: 2em;
    cursor: pointer;
  }

  .edicionesFisicasMin span.next {
    right: 0px;
    position: absolute;
    top: 10em;
    display: block;
    width: 2em;
    height: 2em;
    background: rgba(0, 0, 0, 0.4);
    color: var(--blanco);
    line-height: 2em;
    cursor: pointer;
  }

  .edicionesFisicasMin div.preview img {
    max-height: 100%;
    max-width: 100%;
  }

  .edicionesFisicasMin div.content b {
    display: block;
  }

  /* -------------------------------------------------------------------- */
  .edicionesFisicas {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  
  .TiendaVirtualNK .TiendaNK_Productos {
    grid-template-columns: 1fr 1fr 1fr;
  }

  footer {
    grid-template-columns: 1fr 15em;
  }
  footer .InfoBox {
    text-align: left;
    grid-template-columns: 17em 1fr;
  }
  footer .InfoBox .InfoContain {
    text-align: left;
  }

}


#Mapa {
  width: 100%;
  height: 80vh;
}

/* -------------Seccion ContainerAside------------------ */

.containerAside {
  display: grid;
  gap: 1em;
  grid-template-columns: 1fr;
  max-width: 95%;
  margin: 0 auto;
}

/*  Estilo tablet */
@media only screen and (min-width: 550px) {

  body {
    grid-template-areas: 
      "header header"
      "nav main"
      "aside aside"
      "footer footer";
    grid-template-columns: 50px 1fr;
  }

  .containerAside {
    grid-template-columns: 1fr 250px;
  }
}
/*  Estilo Desktop */
@media only screen and (min-width: 768px) {
  
  body {
    grid-template-areas: 
      "header header header"
      "nav main aside"
      "footer footer footer";
    grid-template-columns: 100px 1fr 250px;
  }
  
  .containerAside {
    grid-template-columns: 1fr 250px;

  }
}