/* {} Importaciones */

/* ! Encabezado */
@import url('./componentes/encabezado.css');

/* {} Diseño predeterminado */

body {
  grid-template-areas: 'header' 'nav' 'main' 'footer';
  grid-template-rows: auto auto 1fr auto
}

body > header {
  grid-area: header
}

body > nav {
  grid-area: nav
}

body > nav > div {
  grid-template-columns: repeat(auto-fit, minmax(116px, 1fr))
}

body > main {
  grid-area: main;
  grid-template-rows: auto 1fr
}

body > footer {
  grid-area: footer
}

body > main > .page-heading {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  border-bottom: 1px solid var(--bs-primary);
  padding: 5px 0
}

.row {
  --bs-gutter-x: 10px;
  --bs-gutter-y: 5px
}

.row > * {
  align-self: end
}

.modal[data-accion] .modal-body {
	padding: 10px 0 !important
}

.modal[data-accion] .modal-body .subtitle {
	font-size: 14px !important;
	text-align: center
}

.modal[data-accion] .modal-footer {
	justify-content: space-between !important
}

.modal[data-accion] .modal-footer button.d-none {
	display: block !important
}

.modal[data-accion="guardar"] .modal-header {
	background-color: var(--bs-success) !important
}

.modal[data-accion="limpiar"] .modal-header {
	background-color: var(--bs-warning) !important
}

.modal[data-accion="eliminar"] .modal-header {
	background-color: var(--bs-danger) !important
}

/* {} Pantalla de impresión */

/* ! */
@page {
  /* size: A4 portrait; */
  margin: 2.5mm
}

/* ! */
@media print {

  .print > .cabeza > div {
    border: 1px solid var(--bs-primary);
    border-top: 15px solid var(--bs-primary);
    border-radius: 5px;
    padding: 5px
  }

  .print > .cabeza > div > div.izquierda {
    border-right: 1px solid var(--bs-primary);
    align-self: center;
    padding: 5px
  }

  .print > .cabeza > div > .izquierda > img {
    width: auto;
    height: 34px;
    margin: 5px 0
  }

  .print > .cabeza > div > div.derecha {
    padding: 5px
  }

  .print > table > thead > tr > .espacio-cabeza {
    height: 151px
  }

  .print > table > tfoot > tr > .espacio-pie {
    height: 75px
  }

}

/* {} Tamaño de pantalla ampliada */
@media (-webkit-min-device-pixel-ratio: 2) {}

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

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

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

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

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