/* ==========================================================================
   safety.css  -  tema 1xpanel
   --------------------------------------------------------------------------
   Reparacion minima del CSS base que antes servia el CDN del proveedor
   (cdn.mypanel.link, hoy fuera de servicio). NO cambia el diseno: reproduce
   lo que Bootstrap y la plantilla ya daban por hecho.

     1. box-sizing: el tema se construyo sobre el "reset" de Bootstrap.
     2. Guardas del menu lateral en movil (evitaba que asomase unos pixeles).
     3. Utilidades de la version anterior de Bootstrap que las plantillas
        del tema siguen usando (mr-, ml-, pr-, pl-, text-right, btn-block...).
   ========================================================================== */

/* 1. reset basico de Bootstrap -------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* 2. menu lateral: cerrado del todo fuera de pantalla en movil ------------ */
@media screen and (max-width: 991px) {
  .sidebar,
  aside.sidebar,
  aside.sidebar.passive,
  aside.sidebar.passive.d-flex {
    left: -300px !important;
  }

  .sidebar.menu-open,
  .sidebar.active,
  .sidebar.show,
  aside.sidebar.active,
  aside.sidebar.show {
    left: 0 !important;
  }
}
/* 4. un display:none escrito en el propio elemento manda ------------------ */
/* Lo pone la plantilla (`style="display: none;"`) o jQuery al hacer .hide().
   Hay que forzarlo porque las utilidades de Bootstrap 5 llevan !important
   (.d-grid/.d-flex/.d-block...) y, sin esto, un elemento con esas clases se
   veia aunque el codigo lo ocultara: era el caso del boton "Realizar pedido"
   (#submit_button_wrapper tiene class="d-grid"), que salia siempre.          */
[style*="display: none"],
[style*="display:none"] {
  display: none !important;
}



/* 3. utilidades heredadas (equivalencias de Bootstrap 4) ------------------ */
.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: .25rem !important; }
.mr-2 { margin-right: .5rem !important; }
.mr-3 { margin-right: 1rem !important; }
.mr-4 { margin-right: 1.5rem !important; }
.mr-5 { margin-right: 3rem !important; }
.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: .25rem !important; }
.ml-2 { margin-left: .5rem !important; }
.ml-3 { margin-left: 1rem !important; }
.ml-4 { margin-left: 1.5rem !important; }
.ml-5 { margin-left: 3rem !important; }
.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: .25rem !important; }
.pr-2 { padding-right: .5rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.pr-5 { padding-right: 3rem !important; }
.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: .25rem !important; }
.pl-2 { padding-left: .5rem !important; }
.pl-3 { padding-left: 1rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.pl-5 { padding-left: 3rem !important; }

.text-right { text-align: right !important; }
.text-left { text-align: left !important; }
.float-right { float: right !important; }
.float-left { float: left !important; }

.btn-block {
  display: block;
  width: 100%;
}

/* formularios en linea (el tema los usa en varias paginas) */
.form-inline {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}

.form-inline .form-group {
  display: flex;
  flex: 0 0 auto;
  flex-flow: row wrap;
  align-items: center;
  margin-bottom: 0;
}

.form-inline .form-control {
  display: inline-block;
  width: auto;
  vertical-align: middle;
}

/* grupos de entrada (input-group-prepend / append) */
.input-group-prepend {
  display: flex;
  margin-right: -1px;
}

.input-group-append {
  display: flex;
  margin-left: -1px;
}