/* grid-contenedor-panel-lateral-menu */

@supports(display: grid ) {

  .grid-contenedor-panel-lateral-menu {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "navegacion-logo-menu"
                         "migas-menu"
                         "navegacion-menu"
                         "configuracion-menu";
  }

  .navegacion-logo-menu {
    grid-area: navegacion-logo-menu;
  }

  .migas-menu {
    grid-area: migas-menu;
  }

  .navegacion-menu {
    grid-area: navegacion-menu;
  }

  .configuracion-menu {
    grid-area: configuracion-menu;
  }
}

/* -> grid-contenedor-panel-lateral-menu */


/* grid-contenedor-navegacion-menu */

@supports(display: grid ) {

  .grid-contenedor-navegacion-menu {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "titulo-modulos-menu"
                         "modulos-menu";
  }

  .titulo-modulos-menu {
    grid-area: titulo-modulos-menu;
  }

  .modulos-menu {
    grid-area: modulos-menu;
  }
}

/* -> grid-contenedor-navegacion-nuevas-opciones */


/* grid-contenedor-modulos-menu */

@supports(display: grid ) {

  .grid-contenedor-modulos-menu {
    display: grid;
    grid-template-columns: auto;
    grid-auto-flow: row;
  }

}

/* -> grid-contenedor-navegacion-nuevas-opciones */


/* grid-contenedor-navegacion-logo-menu */

@supports(display: grid ) {

  .grid-contenedor-navegacion-logo-menu {
    display: grid;
    grid-template-columns: auto 84px;
    grid-template-areas: "logo-sns-menu icono-boton-cerrar-menu";
    grid-column-gap: 10px;
  }

  .icono-boton-cerrar {
    grid-area: icono-boton-cerrar-menu;
  }

  .logo-sns-menu {
    grid-area: logo-sns-menu;
  }
}

/* -> grid-contenedor-navegacion-logo-menu */


/* grid-contenedor-opcion-menu */

@supports(display: grid ) {

  .grid-contenedor-opcion-menu {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 40px auto 40px;
    grid-template-areas: "imagen-opcion-menu titulo-opcion-menu ver-mas-opcion-menu";
  }

  @media screen and (min-width: 576px) {

    .grid-contenedor-opcion-menu {
      grid-gap: 13px;
      grid-template-columns: 50px auto 50px;
    }
  }

  .imagen-opcion-menu {
    grid-area: imagen-opcion-menu;
  }

  .titulo-opcion-menu {
    grid-area: titulo-opcion-menu;
  }

  .ver-mas-opcion-menu {
    grid-area: ver-mas-opcion-menu;
  }

}

/* -> grid-contenedor-opcion-menu */