/* {} Importaciones */

/* ! Barra lateral */
@import url('./componentes/barraLateral.css');

/* {} Diseño predeterminado */

/* ! Contenedor aplicación */
#main {
  padding: 0
}

/* ! Encabezado aplicación */
header {
  padding: 5px;
  background-color: var(--colorPrimario)
}

/* ! Contenedor contenido encabezado aplicación */
header > .row {
  height: 34px;
  align-items: center;
  justify-content: space-between
}

/* ! */
header > .row > div > a {
  width: 22px;
  text-align: center
}

/* ! Contenedor icono abrir menú */
header .contenedorBotonMenu {
  width: auto
}

/* ! Icono abrir menú */
header .contenedorBotonMenu .burger-btn i {
  font-size: 22px;
  color: #fff;
  line-height: 0
}

/* ! Contenedor título encabezado aplicación */
header .contenedorTituloSeccion {
  width: auto
}

/* ! Contenedor título encabezado aplicación */
header .contenedorBotonOpciones {
  width: auto
}

/* ! Icono opciones */
header .contenedorBotonOpciones a i {
  font-size: 22px;
  color: #fff;
}

/* ! Contenedor encabezado aplicación  */
header .contenedorTituloSeccion {
  text-align: center
}

/* ! Título encabezado aplicación */
header .contenedorTituloSeccion h1 {
  color: #fff
}

/* ! Contenido del encabezado de la sección */
.page-heading {
  margin: 0;
  padding: 5px;
  flex-grow: 0
}

/* ! Contenido de la sección */
.page-content {
  padding: 5px;
  flex: 1
}

/* ! Pie de la página de la aplicación */
footer {
  padding: 5px
}

/* {} 576px ancho */
@media (min-width: 576px) {

  /* ! Contenedor de la barra lateral cerrada */
  #sidebar:not(.active) .sidebar-wrapper {
    left: -300px
  }

  /* ! Contenedor barra lateral */
  .sidebar-wrapper {
    width: 300px
  }

}

/* {} 768px ancho */
@media (min-width: 768px) {}

/* {} 992px ancho */
@media (min-width: 992px) {}

/* {} 1200px ancho */
@media (min-width: 1200px) {}

/* {} 1400px ancho */
@media (min-width: 1400px) {}