.printCode {
  padding: 10px;
  z-index: 10;

}

.app-sidebar__user-avatar {
  width: 48px;
  background: gray;
  padding: 3px;
}

.app-sidebar__toggle {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 15pt;
}

.app-sidebar__toggle::before {
  display: none;
}

.headerRegister,
.header-primary {
  background: #964d00;
  color: #fff;
  text-shadow: 2px 2px 2px #000;
}

.headerUpdate,
.header-permisos,
.header-vista {
  background:#964d00;
  /* background:#52FFC7 ; */
  background: linear-gradient(90deg, rgb(150, 67, 0) 13%, rgb(199, 100, 47) 86%);
  color: #fff;
  text-shadow: 2px 2px 2px #000;

}

.close {
  background: transparent;
  border: 0 solid #fff;
  color: #fff;
  font-weight: 900;
}

.data-toggle-on {
  background: red;
}

.textcenter {
  text-align: center;
}

.textright {
  text-align: right;
}

.textleft {
  text-align: left;
}

.bootstrap-select>.dropdown-toggle {
  border: 1px solid #ccc;
}

/*============================================
============= estilos de login ===============
============================================*/
#divLoading {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  /* background: #009688; */
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(254, 255, 255, 0.65);
  z-index: 9999;
  display: none;
}

#divLoading img {
  width: 50px;
  height: 50px;
}

.required {
  color: #f00;
  font-size: 13pt;
  font-weight: bold;
}

/*============================================
== estilo de la imagen del modal categoria ===
============================================*/
.prevPhoto {
  display: flex;
  justify-content: space-between;
  width: 300px;
  height: 200px;
  border: 1px solid #CCC;
  position: relative;
  cursor: pointer;
  background: url(../images/uploads/portada_categoria.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  margin: auto;
}

.prevPhoto label {
  cursor: pointer;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.prevPhoto img {
  width: 100%;
  height: 100%;
}

.upimg,
.notblock {
  display: none !important;
}

.errorArchivo {
  font-size: 16px;
  font-family: arial;
  color: #cc0000;
  text-align: center;
  font-weight: bold;
  margin-top: 10px;
}

.delPhoto {
  color: #FFF;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  background: red;
  position: absolute;
  right: -10px;
  top: -10px;
  z-index: 10;
}

#tbl_list_productos img {
  width: 50px;
}

.imgProductoDelete {
  width: 175px;
}

#imgCategoria {
  text-align: center;
}

#imgCategoria img {
  width: 200px;
  margin: auto;
}

/* ============================================
============================================*/

/* ============================================
=== estilo de la imagen del modal productos ===
============================================ */
#containerImages {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

#containerImages>div {
  margin-right: 10px;
  margin-bottom: 8px;
}

.prevImage {
  border: 1px solid #ccc;
  width: 120px;
  height: 148px;
  display: flex;
  justify-content: center;
  align-items: center;
  object-fit: cover;
}

.prevImage img {
  width: 100%;
}

.inputUploadfile {
  display: none;
}

.btnUploadfile,
.btnDeleteImage {
  border: 0;
  background-color: #962f00;
  text-align: center;
  padding: 2px 3px;
  color: #fff;
  font-size: 9pt;
  cursor: pointer;
  width: 100%;
}

.btnDeleteImage {
  background-color: #dc3545;
}

.prevImage .loading {
  width: 30px;
  height: 30px;
}

#celFotos img {
  width: 150px;
  margin: 10px;
  aspect-ratio: 1 / 1;

}

.block2-pic img {
  aspect-ratio: 16 / 14;
  object-fit: cover;
}

/*TIENDA VIRTUAL*/
.divmetodpago label {
  width: 100%;
  display: flex;
}

.divmetodpago label input {
  margin-right: 15px;
}
.app-header{
  background: #962f00;
}
.app-sidebar{
  background: #962f00;
}

/* ================================================
=== Diseñamos el nuevo botón para subir imagen ===
================================================= */
 #imagen {
   display: none;
 }
.btn-personalizado {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #008080;
  /* Un verde agua/mar como la temática */
  color: rgba(255, 255, 255, 0.485);
  border-radius: 25px;
  cursor: pointer;
  font-family: 'Arial', sans-serif;
  transition: background 0.3s ease;
  border: 2px solid transparent;
}

.btn-personalizado:hover {
  background-color: #005f5f;
  border-color: #ffffff74;
}

/* la miniatura se resalte cuando pases el mouse por encima */
.img-click:hover {
  opacity: 0.8;
  transform: scale(1.05);
  transition: all 0.2s ease-in-out;
}

/* Contenedor principal del cuerpo del modal */
#modalViewImg .modal-body {
  position: relative;
  overflow: hidden;
  /* Mantiene el desenfoque dentro del div */
  padding: 0;
  /* Eliminamos padding para que el fondo llegue al borde */
  min-height: 300px;
  /* Altura mínima por si la imagen tarda en cargar */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* El div que tendrá la imagen de fondo borrosa */
#modalViewImg .bg-blur {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  filter: blur(15px) brightness(0.7);
  /* Desenfoca y oscurece el fondo */
  transform: scale(1.1);
  /* Evita bordes blancos por el desenfoque */
  z-index: 1;
  /* Fondo */
}

/* La imagen principal que va al frente */
#imgBig {
  position: relative;
  z-index: 2;
  /* Al frente */
  max-height: 80vh;
  /* No supera el 80% de la altura de la pantalla */
  box-shadow: 0 10px 30px rgb(255, 255, 255);
  /* Sombra para darle profundidad */
  border: 3px solid #f9fbfb41;
  /* Borde decorativo */
}
.modal-header {
  background: #962f00;
}

.img-modal{
  width: auto;
  height: auto;
  aspect-ratio: 10 / 14;
  object-fit: contain;
  width: 10rem;
  padding:10px 5px;
  border-radius: 10px;
  box-shadow: rgba(255, 145, 1, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.411) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(255, 254, 254, 0.975) 0px 4px 2px, rgba(255, 254, 254, 0.528) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}


/* Alinea el selector de registros y el buscador en la misma línea */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
  display: inline-block;
  vertical-align: middle;
}

.dataTables_wrapper .dataTables_filter {
  float: right;
  /* Mueve el buscador a la derecha */
}

/* En móviles, que vuelvan a estar uno arriba del otro para que no se amontonen */
@media (max-width: 767px) {
  .dataTables_wrapper .dataTables_filter {
    float: none;
    text-align: center;
  }
}
.dataTables_wrapper .row:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}

/* Ajuste para que el input del buscador no quede pegado al texto */
.dataTables_filter input {
  margin-left: 10px !important;
  display: inline-block;
  width: auto;
}





/* ==========================================================
   INTERRUPTORES TIPO LUZ - SOLO APARIENCIA DEL MODAL PERMISOS
   Los checkbox originales siguen siendo los que envían los datos.
   ========================================================== */
#modalPermisos .toggle-flip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 58px !important;
  height: 34px !important;
  margin: 0 auto !important;
}

#modalPermisos .toggle-flip label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  width: 54px !important;
  height: 30px !important;
  margin: 0 !important;
  cursor: pointer !important;
}

/* Ocultamos únicamente la representación visual nativa del checkbox. */
#modalPermisos .toggle-flip input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  pointer-events: none !important;
}

#modalPermisos .toggle-flip .flip-indecator {
  position: relative !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 54px !important;
  height: 30px !important;
  min-width: 54px !important;
  border-radius: 30px !important;
  background: #8b939b !important;
  border: 2px solid #737b84 !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.22), 0 2px 4px rgba(0,0,0,.15) !important;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

/* Botón físico del interruptor */
#modalPermisos .toggle-flip .flip-indecator::before {
  content: "" !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.16) !important;
  box-shadow: 0 2px 5px rgba(0,0,0,.35) !important;
  transform: translateX(0) !important;
  transition: transform .2s ease !important;
}

/* Texto pequeño ON/OFF dentro del interruptor */
#modalPermisos .toggle-flip .flip-indecator::after {
  content: "OFF" !important;
  position: absolute !important;
  right: 5px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #ffffff !important;
  font-size: 7px !important;
  font-weight: 800 !important;
  letter-spacing: .3px !important;
  line-height: 1 !important;
}

/* ENCENDIDO */
#modalPermisos .toggle-flip input[type="checkbox"]:checked + .flip-indecator {
  background: #22a447 !important;
  border-color: #168438 !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.12), 0 0 0 2px rgba(34,164,71,.15) !important;
}

#modalPermisos .toggle-flip input[type="checkbox"]:checked + .flip-indecator::before {
  transform: translateX(24px) !important;
}

#modalPermisos .toggle-flip input[type="checkbox"]:checked + .flip-indecator::after {
  content: "ON" !important;
  left: 7px !important;
  right: auto !important;
}

#modalPermisos .toggle-flip label:hover .flip-indecator {
  box-shadow: inset 0 2px 4px rgba(0,0,0,.18), 0 3px 7px rgba(0,0,0,.20) !important;
}

#modalPermisos .toggle-flip input[type="checkbox"]:focus-visible + .flip-indecator {
  outline: 3px solid rgba(0,123,255,.30) !important;
  outline-offset: 2px !important;
}

@media (max-width: 575.98px) {
  #modalPermisos .toggle-flip,
  #modalPermisos .toggle-flip label {
    width: 50px !important;
  }

  #modalPermisos .toggle-flip .flip-indecator {
    width: 50px !important;
    min-width: 50px !important;
    height: 28px !important;
  }

  #modalPermisos .toggle-flip .flip-indecator::before {
    width: 20px !important;
    height: 20px !important;
  }

  #modalPermisos .toggle-flip input[type="checkbox"]:checked + .flip-indecator::before {
    transform: translateX(22px) !important;
  }
}

/* =========================================================
   INTERRUPTORES VISUALES - MODAL PERMISOS
   Solo apariencia. Los checkbox originales siguen funcionando.
   ========================================================= */
#modalPermisos .permiso-switch {
  position: relative !important;
  display: inline-block !important;
  width: 58px !important;
  height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle !important;
  cursor: pointer !important;
}
#modalPermisos .permiso-switch input[type="checkbox"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  opacity: 0 !important;
}
#modalPermisos .permiso-slider {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 58px !important;
  height: 30px !important;
  box-sizing: border-box !important;
  border-radius: 30px !important;
  background: #737b84 !important;
  border: 2px solid #626a72 !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.22), 0 2px 4px rgba(0,0,0,.14) !important;
  transition: all .2s ease !important;
}
#modalPermisos .permiso-slider::before {
  content: "" !important;
  position: absolute !important;
  left: 3px !important;
  top: 3px !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.18) !important;
  box-shadow: 0 2px 5px rgba(0,0,0,.35) !important;
  transition: transform .2s ease !important;
}
#modalPermisos .permiso-on,
#modalPermisos .permiso-off {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #fff !important;
  font: 800 7px/1 Arial, sans-serif !important;
  letter-spacing: .2px !important;
}
#modalPermisos .permiso-off { right: 5px !important; }
#modalPermisos .permiso-on { left: 7px !important; display: none !important; }
#modalPermisos .permiso-switch input[type="checkbox"]:checked + .permiso-slider {
  background: #20a447 !important;
  border-color: #168438 !important;
}
#modalPermisos .permiso-switch input[type="checkbox"]:checked + .permiso-slider::before {
  transform: translateX(28px) !important;
}
#modalPermisos .permiso-switch input[type="checkbox"]:checked + .permiso-slider .permiso-off { display: none !important; }
#modalPermisos .permiso-switch input[type="checkbox"]:checked + .permiso-slider .permiso-on { display: block !important; }
#modalPermisos .permiso-switch input[type="checkbox"]:focus-visible + .permiso-slider {
  outline: 3px solid rgba(0,123,255,.3) !important;
  outline-offset: 2px !important;
}
#modalPermisos td { vertical-align: middle !important; }