/* ---------------------------------------- */
/*            FONTS                         */
/* ---------------------------------------- */


@import url(../fontawesome-5/css/all.css);

@import url(../fontawesome-6/css/all.css);

@import url(../fontawesome-5/js/all.js);

@import url(../fontawesome-6/js/all.js);

/* import fonts from fonts.css file */ 
@import url(./fonts.css);

/* @import url("https://fonts.googleapis.com/css2?family=Public+Sans&display=swap"); */
@import url("https://fonts.googleapis.com/css2?family=Public+Sans&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');

/* --- FIN END FONTS AREA --- */


/* ---------------------------------------- */
/*      MODULOS CSS   PERSONALIZADOS        */
/* ---------------------------------------- */

/* css variables */ 
@import url(./partials/_variables.css);

/* import global styling */ 
@import url(./core/css/partials/_global.css);



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


* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* font-size: 0.7rem; */
}


/* --------- Area de Html --------- */

html {
  box-sizing: border-box;
  height: 100%; 
  
}


body {
  font-size: 0.9rem;
  min-height: 100%; /* Indicamos que ocupe todo el ancho del html */
  /* font-family: "Public Sans", sans-serif; */
  
}

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

.header {
  grid-area: header;
  background: var(--fondo-principal);
  /* background-color: #85aedd; */
  /* background: var(--background-header); */
  /* background: var(--title-color); */
}

.navbar {
  grid-area: navbar;
  /* background-color: #afd6af; */
  
}

.sidebar {
  grid-area: sidebar;
  background-color: #fdcfcf;
}

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

.footer {
  grid-area: footer;
  background-color: #8c96a0;
  background: var(--fondo-principal);
  /* background: var(--color-grisPlus); */
  
}

/* Config Plantilla */
.grid-container {
  display: grid;
  gap: 10px;
  grid-template:
    "header"  40px
    "navbar"  auto
    "main"    auto
    /* "sidebar" 100px */
    "footer"  auto;
}



@media (min-width: 576px) {
  .grid-container {
    grid-template:
      "header  header header"  50px
      "navbar  navbar navbar" auto
      "main    main   main"   auto
      /* "sidebar  sidebar   sidebar" auto */
      "footer  footer footer"  auto /
      200px    auto   200px;
  }
}


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

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

#scrollUp {
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  /* background: url(./../../core/images/flecha.jpg); */
  background: url(./core/flecha.jpg);
  
}


/* Image style */
#scrollUp {
  /* background-image: url("../../img/top.png"); */
  background: url(./../../core/images/top.png); 
  bottom: 20px;
  right: 20px;
  width: 38px;    /* Width of image */
  height: 38px;   /* Height of image */
}