html,
body {
    height: 100%;
}
.page-contentClass{
    flex: 1 0 auto;
}

#sticky-footer {
    flex-shrink: none;
}

.border-template{
    border: 0.5px solid #bdc3c7;
    border-radius: 2px;
}

/* color principal de fondo  */
.background-template-color{
    background-color: #37A398;
}

/* color secundario de fondo */
.background-template-color2{
    background-color: #63BBB2;
}

/* color de fondo segun el texto  */
.background-template-text{
    background-color: #1D635D;
}

/* color de texto segun el fondo */
.text-template-background{
    color: #1D635D;
}

/* color de texto principal */
.text-template-color{
    color:  #F5F3F3;
}

.progressBar{
  animation-name: loadProgress;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: alternate;
}

@keyframes loadProgress{
  from {
    width: 0%;
}
to {
    width: 100%;
}
}

.turnI{
    animation-name: rotation;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes rotation {
  0% {
    transform:rotate(0deg);
}
100% {
    transform:rotate(360deg);
}
}

@media (max-width: 1200px) {
  html, body{
    font-size:1rem;
  }
}

@media (max-width: 768px) {
  html, body{
    font-size:1rem;
  }
}

span.shortcut {
  display: block;
  font-size: x-small;
  /* width: 100px; */
  /* padding: 0 20px; */
  margin-bottom: -5px;
  /* margin: 0; */
  word-break: keep-all;
  text-align: center;
}

span.maintext {
  display: block;
  /* font-size: x-small; */
  margin-top: -7px;
  /* margin: 0; */
  word-break: keep-all;
  text-align: center;
}

.overflow-example {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  cursor: pointer;
}

.custom-text {
  display: block;
  width: 100%;
  height: calc(1.5em + 0.5rem + 2px);
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  font-size: .875rem;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}

.custom-thing {
  display: block;
  width: 100%;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  font-size: .875rem;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}


.cell-truncate {
  /* max-width: 250px; */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  display: block;
}

.mainText{
  font-size: medium;
  font-weight: bold;
}

.secondText{
  /* display: inline-block; */
  font-size: smaller;
}

.brand{
  /* display: inline-block; */
  font-size: smaller;
  font-weight: 600;
  line-height: 20px;
}

#tbodyProducts tr td, #tbodyServices tr td, #tbodyFeeServices tr td {
  vertical-align: middle !important;
}

tr.with-nothing td {
  padding-top: 15px;
  padding-bottom: 15px;
}

#tbodyServices tr.with-nothing td {
  padding-top: 11px;
  padding-bottom: 11px;
}

tr.with-brand-and-detail td {
  padding-top: 0px;
  padding-bottom: 0px;
}

#tbodyFeeServices tr td {
  padding-top: 3px;
  padding-bottom: 3px;
  border-top: 0 !important;
}

tr.with-name-and-desc td {
  padding-top: 3px;
  padding-bottom: 3px;
}

tr.with-brand-or-detail td, tr.with-name-or-desc td {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* tr.isStockAboveMinimum{
  background-color: rgba(0, 255, 0, 0.2);
} 
tr.isStockBelowMinimum {
  background-color: rgba(255, 0, 0, 0.2);
} */

/* .table-striped tbody tr.isStockBelowMinimum:nth-of-type(odd) {
  background-color: rgba(255, 0, 0, 0.2) !important;
}

.table-striped tbody tr.isStockBelowMinimum:nth-of-type(even) {
  background-color: rgba(255, 0, 0, 0.2) !important;
}

.table-striped tbody tr.isStockAboveMinimum:nth-of-type(odd) {
  background-color: rgba(0, 255, 0, 0.2) !important;
}

.table-striped tbody tr.isStockAboveMinimum:nth-of-type(even) {
  background-color: rgba(0, 255, 0, 0.2) !important;
} */

.isStockAboveMinimum td:nth-child(1) {
  box-shadow: inset 
    12px 0 0px 0px rgba(0, 255, 0, 0.3) !important;
}

.isStockBelowMinimum td:nth-child(1) {
  box-shadow: inset 
    12px 0 0px 0px rgba(255, 0, 0, 0.3) !important;
}

/* .selected:not(.row){
  box-shadow: inset 
    0px 0px 0px 3px rgba(0, 0, 0, 1) !important;
} */

tr.selected{
  border-radius: .25rem !important;
  border-color: #000000 !important;
  z-index: 1040;
  position: relative;
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.8);
}

div.selected.row {
  position: relative;
  background: white;
  z-index: 0;
}

div.selected.row::before {
  content: "";
  position: absolute;
  top: 0px;   /* igual al padding */
  left: 16px;
  right: 16px;
  bottom: 0px;
  height: calc(35px + .4rem);
  box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 1) !important;
  /* z-index: 1; */
  border-radius: .25rem; /* opcional */
}

/* #tbodyProducts tr td:nth-child(2) {
  max-width: 80px !important;
  min-width: 80px !important;
} */
/* .cell-truncate:hover::after {
  content: attr(data-full-text);
  position: absolute;
  left: 0;
  top: 100%;
  background-color: #fff;
  padding: 5px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 1000;
  white-space: normal;
  max-width: 300px;
  word-wrap: break-word;
} */

#tbodyClients tr td p, #tbodyProviders tr td p, #tbodyFeeServices tr td p{
  margin: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

#tbodyClients tr td, #tbodyProviders tr td {
  overflow: hidden;
}

.nav-item:hover{
  cursor: pointer;
}

/* @keyframes focusPulse {
  0% { box-shadow: 0px 0px 4px 2px #63BBB2; }
  50% { box-shadow: 0px 0px 8px 6px #63BBB2; }
  100% { box-shadow: 0px 0px 4px 2px #63BBB2; }
}

.focus-animation {
  animation: focusPulse 1.5s infinite;
} */
/* #selectTypeVoucher:focus{
  box-shadow: 0px 0px 4px 2px #63BBB2 !important;
} */


.input-group + .input-group {
  margin-top: .2rem;
}

.input-group.form-control {
  height: revert;
  padding-left: .2rem;
  left: -0.2rem;
}

.custom-file-label::after {
  content: "Seleccionar" !important;
}

#mobileNumbersContainer {
  height: auto;

}

.mobile-number-item, .email-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .2rem;
  cursor: pointer;
  position: relative;
}

.mobile-number-item:hover, .email-item:hover {
  background-color: #f0f0f0;
}

.number-text, .email-text {
  flex: 1;
}

.delete-btn {
  display: none;
  color: #dc3545;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  padding: 0 8px;
  line-height: 1;
}

.mobile-number-item:hover .delete-btn, .email-item:hover .delete-btn{
  display: block;
}

.copy-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  background-color: #28a745;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
  z-index: 1000;
  animation: fadeOut 2s forwards;
}

@keyframes fadeOut {
  0% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

.scrollSelect {
  min-height: 150px;
  overflow-y: auto;
}

.obligatorio::after{
  color: red;
  content: " ( * )";
}

#inputRemainingAmount{
  font-weight: bold;
  color: #F5F3F3;
} 
#inputPriceSaleModal{
  font-weight: bold;
  color: #000000;
}
#inputPriceSale{
  font-weight: bold;
  color: #000000;
}

.caja_cerrada{
  color: red;
  font-weight: 600;
}

.caja_abierta{
  color: green;
  font-weight: 600;
}

.form-control[data-banco] {
  position: relative;
}

.form-control[data-banco]:not([data-banco=""])::after {
  content: attr(data-banco);
  position: absolute;
  top: 1px;
  right: 1px;
  background: #007bff;
  color: white;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: bold;
}


/* Animación 1: Pulso continuo */
.card-pulse {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

/* Animación 2: Rotación suave */
.card-rotate {
  animation: rotate 3s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Animación 3: Bounce */
.card-bounce {
  animation: bounce 1.5s infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

/* Animación 4: Glow/Brillo */
.card-glow {
  animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
  from { 
      text-shadow: 0 0 10px #007bff, 0 0 20px #007bff, 0 0 30px #007bff;
      color: #007bff;
  }
  to { 
      text-shadow: 0 0 20px #28a745, 0 0 30px #28a745, 0 0 40px #28a745;
      color: #28a745;
  }
}

/* Animación 5: Slide horizontal */
.card-slide {
  animation: slide 2s ease-in-out infinite;
}

@keyframes slide {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(10px); }
}

/* Animación 6: Shake (para error o procesando) */
.card-shake {
  animation: shake 0.5s ease-in-out infinite;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* Contenedor centrado */
.payment-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

/* Estilo para el texto de estado */
.status-text {
  margin-top: 20px;
  font-size: 1.2rem;
  font-weight: 500;
}

/* Spinner de carga */
.loading-spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Animación de éxito */
.success-checkmark {
  animation: checkmark 0.6s ease-in-out;
}

@keyframes checkmark {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Colores personalizados */
.text-processing { color: #007bff; }
.text-success { color: #28a745; }
.text-error { color: #dc3545; }

/* Botones con efectos */
.btn-animated {
  transition: all 0.3s ease;
}

.btn-animated:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.error-animation {
  animation: errorPop 0.6s ease-in-out;
}

@keyframes errorPop {
  0% { transform: scale(0) rotate(0deg); opacity: 0; }
  50% { transform: scale(1.2) rotate(180deg); opacity: 1; }
  100% { transform: scale(1) rotate(180deg); opacity: 1; }
}

/* O una versión más dramática con shake */
.error-shake {
  animation: errorShake 0.6s ease-in-out;
}

@keyframes errorShake {
  0% { transform: scale(0); opacity: 0; }
  15% { transform: scale(1.1) translateX(-5px); opacity: 1; }
  30% { transform: scale(1.1) translateX(5px); opacity: 1; }
  45% { transform: scale(1.1) translateX(-5px); opacity: 1; }
  60% { transform: scale(1.1) translateX(5px); opacity: 1; }
  75% { transform: scale(1.1) translateX(-5px); opacity: 1; }
  90% { transform: scale(1.1) translateX(5px); opacity: 1; }
  100% { transform: scale(1) translateX(0); opacity: 1; }
}

#detailsPricesButton:hover{
  cursor: pointer;
  color: #007bff;
  font-weight: 600;
  width: 100%;
  text-align: end;
}

.movement-ingreso td:nth-child(1) {
  box-shadow: inset 
    12px 0 0px 0px rgba(0, 255, 0, 0.3) !important;
}

.movement-egreso td:nth-child(1) {
  box-shadow: inset 
    12px 0 0px 0px rgba(255, 0, 0, 0.3) !important;
}

.movement-snap {
  /* #37A398
  #63BBB2
  #1D635D */
  background-color: #37A398 !important;
  color: white !important;
  /* box-shadow: inset 
    12px 0 0px 0px #37A398 !important; */
}

/* MODAL SNAP CAJA */
.info-row {
  margin-bottom: 10px;
  padding: 8px;
  background-color: #eef7ff;
  border-radius: 4px;
}

.saldo-card {
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
}
.currency-section {
  background-color: #ffffff;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 10px;
}
.denomination-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
  border-bottom: 1px solid #f1f3f4;
}
.denomination-row:last-child {
  border-bottom: none;
}
.denomination-value {
  font-weight: 600;
  color: #495057;
}
.denomination-count {
  color: #6c757d;
}
.modal-title {
  font-size: 1.2rem;
  font-weight: 600;
}
.section-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #495057;
  margin-bottom: 10px;
}
/* .background-template-color {
  background-color: #007bff;
}
.text-template-color {
  color: white;
} */
/* MODAL SNAP CAJA */
/* MODAL MOVIMIENTO CAJA */
.info-row {
  margin-bottom: 12px;
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 6px;
  border-left: 4px solid #dee2e6;
}
.info-row.ingreso {
  border-left-color: #28a745;
  background-color: #f8fff9;
}
.info-row.egreso {
  border-left-color: #dc3545;
  background-color: #fff8f8;
}
.importe-card {
  border: 2px solid #dee2e6;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 1rem;
  text-align: center;
}
.importe-card.ingreso {
  border-color: #28a745;
  background-color: #f8fff9;
}
.importe-card.egreso {
  border-color: #dc3545;
  background-color: #fff8f8;
}
.importe-valor {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 5px;
}
.importe-valor.ingreso {
  color: #28a745;
}
.importe-valor.egreso {
  color: #dc3545;
}

.tipo-badge {
  font-size: 0.9rem;
  padding: 6px 12px;
  border-radius: 4px;
  font-weight: 600;
}
.tipo-badge.ingreso {
  background-color: #28a745;
  color: white;
}
.tipo-badge.egreso {
  background-color: #dc3545;
  color: white;
}
.medio-badge {
  background-color: #17a2b8;
  color: white;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.9rem;
}

.section-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #495057;
  border-bottom: 2px solid #e9ecef;
  padding-bottom: 5px;
}
.modal-title {
  font-size: 1.2rem;
  font-weight: 600;
}
.referencia-code {
  font-family: 'Courier New', monospace;
  background-color: #f8f9fa;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.9rem;
  word-break: break-all;
}
.icon-container {
  display: inline-block;
  width: 30px;
  text-align: center;
}
/* MODAL MOVIMIENTO CAJA */


.not-relevant-to-cash{
  background-color: #00000044 !important;
  color: #00000044 !important;
}

.not-relevant-to-cash td{
  padding-bottom: 0;
  padding-top: 0;
}

.input-ingreso {
  box-shadow: inset 
    12px 0 0px 0px rgba(0, 255, 0, 0.3) !important;
}

.input-egreso {
  box-shadow: inset 
    12px 0 0px 0px rgba(255, 0, 0, 0.3) !important;
}


/* Clase para hacer texto no seleccionable */
.no-select {
    -webkit-user-select: none;  /* Safari */
    -moz-user-select: none;     /* Firefox */
    -ms-user-select: none;      /* Internet Explorer/Edge */
    user-select: none;          /* Estándar */
}


.cheque-item {
    transition: all 0.2s ease;
    cursor: pointer;
    border: 2px solid #dee2e6 !important;
}

.cheque-item:hover {
    background-color: #f8f9fa !important;
    border-color: #6c757d !important;
}

.cheque-item.bg-light.border-primary {
    background-color: #e3f2fd !important;
    border-color: #007bff !important;
}

.cheque-checkbox {
    cursor: pointer;
    transform: scale(1.2);
}

.cheque-item .row {
    margin: 0;
}

.cheque-item .col-1,
.cheque-item .col-11,
.cheque-item .col-md-3,
.cheque-item .col-md-6 {
    padding-left: 5px;
    padding-right: 5px;
}


.CancelPOSPaymentLoader {
  width: 30px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 5px solid #17a2b8;
  border-right-color: #1D635D;
  animation: l2 1s infinite linear;
  margin-left: .3rem;
}
@keyframes l2 {to{transform: rotate(1turn)}}

.input-spinner {
    display: none;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    pointer-events: none;
    color: #1D635D;
}

.input-spinner i {
    font-size: 14px;
}

input:disabled {
    background-color: #f8f9fa !important;
    opacity: 0.4;
}

.quote-container {
    position: fixed;
    bottom: 80px;
    right: 20px;
    z-index: 1000;
    transition: all 0.3s ease;
}

.quote-container.minimized {
    right: -230px;
}

.quote-container .card {
    min-width: 230px;
    margin: 0;
}

.quote-toggle-btn {
    position: absolute;
    left: -40px;
    top: 27px;
    transform: translateY(-50%);
    width: 40px;
    height: 60px;
    border: none;
    border-radius: 5px 0 0 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    /* color: white; */
    font-size: 18px;
    box-shadow: -2px 2px 5px rgba(0,0,0,0.2);
}

.quote-toggle-btn:hover {
    background-color: var(--template-color2-hover, #13423e);
}

@media (max-width: 1154px) {
  #footerCompanyName {
    display: none;
  }
}