.input-group.vert {
  display: flex;
  flex-direction: column;
}

.modal-body {
  position: relative !important;
}

select,
select option {
  font-family: "Public Sans", serif !important;
}

html[data-bs-theme="light"] .navigation.pagingapp li .table-highlightable {
  background-color: white !important;
}

html[data-bs-theme="dark"] .navigation.pagingapp li .table-highlightable {
  background-color: #1c1d27 !important;
}

html[data-bs-theme="light"]
  .table-striped
  > tbody
  > tr:nth-of-type(2n + 1):not(.tickets-highlight):not(.inactive-item):not(.override-color)
  > * {
  background-color: #f7f9fb !important;
  --ct-table-bg-type: #f7f9fb !important;
  --ct-table-color-type: #4c4c5c !important;
  color: #4c4c5c !important;
}

html[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(2n + 1) > * {
  background-color: #252631 !important;
  --ct-table-bg-type: #252631 !important;
  --ct-table-color-type: #f7f9fb !important;
  color: #f7f9fb !important;
}

.tr-inactive, .tr-inactive td, .tr-inactive th {
  opacity: 1 !important;
  pointer-events: none !important;
  background-color: #f8d7da !important;
}

html[data-bs-theme="dark"] .logo-light .logo-sm img {
  filter: brightness(0) invert(1);
}

.table-highlightable thead tr th {
  background-color: #188ae2 !important;
  color: #ffffff;
}

.table-pointer tr,
.table-pointer tr td {
  cursor: pointer !important;
}

html[data-bs-theme="light"]
  .table-highlightable
  > tbody
  > tr:not(.tickets-highlight):hover
  td {
  background-color: #d1e6f6 !important;
  --ct-table-bg-state: #d1e6f6 !important;
  color: #4c4c5c !important;
  cursor: pointer;
}

html[data-bs-theme="dark"]
  .table-highlightable
  > tbody
  > tr:not(.tickets-highlight):hover
  td {
  background-color: #f7f9fb !important;
  --ct-table-bg-state: #f7f9fb !important;
  color: #1c1d27 !important;
  cursor: pointer;
}

.table-highlightable > tbody > tr:hover td,
.table-highlightable > tbody > tr:hover td i {
  color: #4c4c5c !important;
}

.modal {
  transform: none !important;
}

.modal-body {
  overflow-y: auto;
  max-height: 70vh;
}

#tbl-ticket-detalle tr td:not(.description-cell) {
  width: min-content;
}

.tickets-highlight td {
  animation: flash-shadow 1.5s ease-out forwards;
}

@keyframes flash-shadow {
  0% {
    box-shadow: inset 0 0 0 0px #ffcc00;
  }
  30% {
    box-shadow: inset 0 0 0 1000px #ffcc00;
  }
  100% {
    box-shadow: inset 0 0 0 0px #ffcc00;
  }
}

.table-ticket,
.tabla-ticket-extradata {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* usa colgroup */
}

.ticket-table th,
.ticket-table td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.table-ticket th,
.table-ticket td,
.tabla-ticket-extradata th,
.tabla-ticket-extradata td {
  padding: 8px;
  /* border: 1px solid #ccc; */
  text-align: center;
}

.tt-col-codigo,
.tt-col-cantidad,
.tt-col-precio-unitario,
.tt-col-subtotal,
.tte-col-tipo,
.tte-col-mode,
.tte-col-valor,
.tte-col-resultante {
  white-space: nowrap; /* evita que se rompa en varias líneas */
  width: 10%; /* ayuda a que ocupen el mínimo posible */
  text-align: right; /* para alinear números */
}

.tt-col-descripcion,
.tte-col-descripcion {
  width: auto; /* ocupa el espacio sobrante */
}

.tt-col-codigo input,
.tt-col-cantidad input,
.tt-col-precio-unitario input,
.tt-col-subtotal input,
.tt-col-descripcion input,
.tte-col-tipo input,
.tte-col-descripcion input,
.tte-col-mode input,
.tte-col-valor input,
.tte-col-resultante input {
  text-align: center;
}

/* FIX BLUR DROPZONE CROPPER */

/* Elimina el fondo gris/blanco del modal */
/* Quitar fondo gris o blanco que simula el desenfoque */
.cropper-modal {
  background-color: transparent !important;
}

/* Evitar que el recuadro del crop tenga color de fondo */
.cropper-face {
  background-color: transparent !important;
}

/* Opcional: marcar claramente el área visible */
.cropper-view-box {
  outline: 2px solid #2196f3 !important;
  box-shadow: none !important;
}

.dropzone .dz-preview:hover .dz-image img {
  filter: none !important;
  -webkit-filter: none !important;
  -moz-filter: none !important;
  -o-filter: none !important;
}

.cropper-view-box {
  border: 2px solid #2196f3 !important;
  box-shadow: none !important;
  background-color: RGBA(
    255,
    255,
    255,
    0.5
  ) !important; /* Fondo semitransparente */
}
.cropper-view-box img {
  display: none !important; /* Oculta la imagen dentro del cropper */
}

img[data-dz-thumbnail] {
  width: 100% !important;
}

.avatar-list {
  border-radius: 100%;
  width: 38px;
  height: 38px;
  border: 1px solid #ccc;
}

.avatar-detail {
  border-radius: 100%;
  width: 128px;
  height: 128px;
  border: 1px solid #ccc;
}

.qr-reader {
  border: 2px dashed rgb(24, 138, 226);
  width: 100%;
  min-height: 500px;
}

/* FAB BUTTON */

.fab {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background-color: #3f51b5; /* color tipo Material */
  color: white;
  font-size: 24px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}

.fab i {
  font-size: 24px;
}

.fab:hover {
  background-color: #303f9f;
}

.fab:active {
  background-color: #283593;
}

.sidenav-menu.active {
  /* overflow-y: auto !important; */
}

.pointer-none {
  pointer-events: none !important;
}

.ti-preload {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.sidenav-menu {
  display: flex !important;
  flex-direction: column !important;
  height: 100dvh !important;
}

ul.side-nav {
  flex: 1 1 auto !important; /* ocupa el espacio disponible entre header y footer */
  min-height: 0 !important; /* IMPORTANTÍSIMO para que overflow funcione en flex */
  overflow: auto !important; /* agrega scroll si hace falta */
  overscroll-behavior: contain !important; /* evita rebotes raros en mobile */
}

html[data-sidenav-size="condensed"]:not([data-layout="topnav"]) .sidenav-menu {
  position: absolute;
  width: 75px !important;
  /* width: calc(var(--ct-sidenav-width-sm)-10) !important; */
}

.cursor-pointer {
  cursor: pointer !important;
}

.cursor-default {
  cursor: default !important;
}

.cursor-pointer:not(.bg-secondary):hover {
  -webkit-transition-duration: 700ms;
  -moz-transition-duration: 700ms;
  -o-transition-duration: 700ms;
  transition-duration: 700ms;
  opacity:.6;
}

.card-img-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;        /* podés cambiar la proporción */
    overflow: hidden;
    background-color: #f2f2f2; /* fallback si no hay imagen */
}

.card-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;         /* <-- equivalente a background-size: cover */
    object-position: center;   /* centra la imagen */
    display: block;
}

.card.template-card {
    height: 100%;
}

.btn-ui-list:not(.active) {
  background-color: white !important;
}

@media screen and (max-width: 768px) {
  .table-responsive {
    overflow-x: auto !important;
  }
  
}
.table-responsive {
  overflow-x: hidden !important;
}

.card-hover:hover {
  opacity: 0.7;
  cursor:pointer;
  -webkit-transition-duration: 700ms;
  -moz-transition-duration: 700ms;
  -o-transition-duration: 700ms;
  transition-duration: 700ms;
}

.spx-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 1050; /* arriba del modal backdrop si hace falta ajustar */
}

.spx-focus-panel{
  position: relative;
  z-index: 1060; /* por encima del overlay */
  background: #fff; /* por si el panel hereda algo */
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.spx-focus-copy {
  border:2px solid #010203 !important;
}

.spx-copy-mode .modal-dialog{
  /* opcional: si querés bloquear scroll raro */
}

.variant-selectable { cursor: pointer; }
.variant-selected { outline: 2px solid #0d6efd; }

.btn-drag {
  cursor: move !important;
}

.spx-dragging { 
  opacity: .7; 
}

.spx-dragging .gu-mirror {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.drag-item {
  width:100%;
}

.spx-saving { opacity: .6; pointer-events: none; }

tr.gu-mirror {
    opacity: 0.8 !important;
}

tr..gu-transit {
    opacity: 0.4 !important;
}

tr.gu-transit td {
    background: #e9f2ff;
}

@keyframes ticketHighlight {
    0% {
        background-color: #e6fffa;
        box-shadow: inset 0 0 0 2px #20c997;
        transform: scale(1);
    }

    25% {
        background-color: #99f6e4;
        box-shadow: inset 0 0 0 2px #20c997;
        transform: scale(1.01);
    }

    50% {
        background-color: #e6fffa;
        box-shadow: inset 0 0 0 2px #20c997;
        transform: scale(1);
    }

    75% {
        background-color: #99f6e4;
        box-shadow: inset 0 0 0 2px #20c997;
        transform: scale(1.01);
    }

    100% {
        background-color: transparent;
        box-shadow: none;
        transform: scale(1);
    }
}

.ticket-row-highlight {
    animation: ticketHighlight 1.4s ease-in-out;
}

html[data-sidenav-size="condensed"] .sidenav-sucursal {
  display: none !important;
}

#auth-login-copyright {
  position: fixed;
  bottom: 0px;
  left:0px;
  padding:10px;
  box-shadow: 1px 1px 21px 0px rgba(255,255,255,0.75);
  -webkit-box-shadow: 1px 1px 21px 0px rgba(255,255,255,0.75);
  -moz-box-shadow: 1px 1px 21px 0px rgba(255,255,255,0.75);
  font-weight: 700;
  border-radius: 0 10px 0 0;
}

.grid-stack-item-content {
  border: dashed 1px gray !important;
}

#modulo-dashboard .grid-stack-item-content {
  border: none !important;
  background-color: white !important;
  padding:10px;
}

.avatar-xl, .avatar-xs, .avatar-sm, .avatar-md {
  object-fit: cover !important;
}