:root {
  --theme-color: white;
  --primary-color: #D5137F;
  --secundary-color: #610B21;
  --text-color-inverse: white;
  --text-color: rgb(29, 28, 28);
  --navbar-shallow-color: rgb(122, 111, 111);
  --navbar-shadowmenu-color: #f8f9fa;
  --menu-mobile-background-color: #610B38;

  --profile-suave-color: #F2F2F2;
  --profile-border-color: #E6E6E6;

  --fondo-azul-color: #610B21;
  --letra-colorside: #ddd;

  --color-suave1: #EEEBDD;
  --color-suave2: #D8B6A4;
  --color-cafe: #630000;
  --color-negro: #000000;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/******scroll************/
/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #D8B6A4;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #630000;
}

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

html {
  height: 100%;
}

body {
  font-family: "Public Sans", sans-serif;
  font-size: 1.2rem;
  min-height: 100%;
}

.grid-container>* {
  /*box-shadow: -1px 1px 7px 0px rgba(0, 0, 0, 0.75);*/
  /*border-radius: 4px;*/
  padding: 10px;
  text-align: center;
}

.header {
  grid-area: header;

}

.navbarmenu {
  grid-area: navbarmenu;
  box-shadow: 2px 0px 5px 0px rgba(0, 0, 0, 0.75);

  z-index: 1000;

}

.sidebar {
  grid-area: sidebar;
  /*background-color: var(--fondo-azul-color);*/

  /*box-shadow: -1px 1px 7px 0px rgba(0, 0, 0, 0.75);*/
  border-radius: 0 4px 0 0;

  background-color: var(--color-cafe);


  overflow: hidden;
  left: -270px;
  transition: all 0.3s ease;
  overflow-y: auto;

}

.main {
  grid-area: main;
  /* background-color: #f5f5f5;*/
}

.footer {
  grid-area: footer;
  background-color: var(--color-cafe);
  color: var(--color-suave2);
}

.grid-container {
  display: grid;
  gap: 0px;
  /*separacion entre cada elem grid*/
  grid-template:
    "header" 0
    "navbarmenu" 50px
    "sidebar" auto
    "main" 0 "footer" 100px;

  /*"header"  0
    "navbarmenu"  50px
    "sidebar" 200px
    "main"    auto     
    "footer"  100px;*/
}

.mapa-container {
  display: none;
}


.side-list-active {
  /*background-color: var(--color-suave2);*/
  color: var(--color-cafe);
}

.side-list-active a {
  /*background-color: var(--color-suave2);*/
  color: #eb53a1;
}





@media (min-width: 600px) {
  .grid-container {
    /* grid-template-columns: 200px auto;
    grid-template-rows: 100px 50px auto 100px;
    grid-template-areas: 
    "header  header"
    "navbar  navbar"
    "sidebar main"
    "footer  footer"; */

    grid-template:
      "header  header" 100px
      "navbarmenu  navbarmenu" 50px
      "sidebar main" auto
      "footer  footer" 100px /
      200px auto;
  }

  .mapa-container {
    display: block;
  }

  .side-cont{
    margin-top: 18px;
    height: 600px;
    overflow-y: auto; 
    overflow-x: hidden;
  }


}

@media (min-width: 900px) {
  .grid-container {
    grid-template:
      "header  header" 100px
      "navbarmenu  navbarmenu" 50px
      "sidebar main" auto
      "sidebar footer" 50px /
      20% auto;

  }

  .mapa-container {
    display: block;
  }

  .side-cont{
    margin-top: 18px;
    height: 600px;
    overflow-y: auto; 
    overflow-x: hidden;
  }


  .navbarmenu {
    display: flex;
    justify-content: space-between;

  }
}