/* ===================================================================
   FastPay – Global Styles (ported from Angular styles.css)
   =================================================================== */

:root {
  /* ===== Colors ===== */
  --finesa-color-1: #00a9e0;
  --finesa-color-2: #eb5757;
  --finesa-color-3: #003087;
  --finesa-color-4: #333333;
  --finesa-color-5: #ffffff;
  --finesa-color-6: #313131;
  --finesa-color-7: #f2f2f2;
  --finesa-color-8: #ffc845;
  --finesa-color-9: #31313120;
  --finesa-color-10: #e0e0e0;
  --finesa-color-11: #4f4f4f;
  --finesa-color-12: #D0D0CE;
  --finesa-color-13: #E0E0E0;

  /* ===== Fonts ===== */
  --finesa-font-family-1: 'Mulish', sans-serif;
  --bs-body-line-height: 1.2;

  /* ===== Borders ===== */
  --finesa-border-radius-1: .25rem;
  --finesa-border-radius-2: .5rem;
}

/* ===== Tags ===== */

html,
body {
  background-color: var(--finesa-color-5);
  color: var(--finesa-color-6);
  font-family: var(--finesa-font-family-1);
  font-size: 0.96rem;
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* prevent horizontal scroll from Bootstrap .row negative margins */
}

button,
div,
footer,
h4,
input,
p,
label,
span {
  font-family: var(--finesa-font-family-1);
}

select,
input {
  padding: 8px 9px !important;
}

.label {
  margin-bottom: 0px;
}

/* ===== Buttons ===== */

#btnLogin,
#btnBack,
.btnPrimary {
  background-color: var(--finesa-color-1);
  border: 2px solid var(--finesa-color-1);
  border-radius: 50px;
  box-shadow: 0px 1px 2px rgb(0 0 0 / 10%);
  color: var(--finesa-color-5);
  font-size: 16px;
  font-weight: bolder;
  padding: 12px 22px;
  width: auto;
}

#btnBack {
  background-color: var(--finesa-color-12);
  border: 2px solid var(--finesa-color-12);
  color: var(--finesa-color-3);
}

#btnLogin:hover,
#btnBack:hover,
.btnPrimary:hover {
  background: var(--finesa-color-5);
  border: 2px solid var(--finesa-color-1);
  box-shadow: 0 1px 2px #00000020;
  color: var(--finesa-color-1);
}

#btnBack:hover {
  background: var(--finesa-color-3);
  border: 2px solid var(--finesa-color-3);
  color: var(--finesa-color-12);
}

#btnPagarFacturaBottom {
  border: var(--finesa-color-8);
  border-radius: 50px;
  background-color: var(--finesa-color-8);
  box-shadow: 0px 1px 2px rgb(0 0 0 / 10%);
  color: var(--finesa-color-3);
  display: none;
  font-size: 16px;
  font-weight: bolder;
  padding: 12px 22px;
  width: auto;
}

#btnPagarFacturaBottom:hover {
  background: var(--finesa-color-5);
  border: 2px solid var(--finesa-color-3);
  box-shadow: 0 1px 2px #00000020;
  color: var(--finesa-color-3);
}

#btnPagarFactura {
  background-color: var(--finesa-color-8);
  border: 2px solid var(--finesa-color-8);
  border-radius: 50px;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  color: var(--finesa-color-3);
  font-family: var(--finesa-font-family-1);
  font-size: 16px;
  font-weight: bolder;
  padding: 12px 22px;
}

#btnPagarFactura:hover {
  background: var(--finesa-color-5);
  border: 2px solid var(--finesa-color-3);
  box-shadow: 0 1px 2px #00000020;
  color: var(--finesa-color-3);
}

#btnIngresarPortal {
  background-color: var(--finesa-color-3);
  border: 2px solid var(--finesa-color-3);
  border-radius: 50px;
  box-shadow: 0px 1px 2px rgb(0 0 0 / 10%);
  color: var(--finesa-color-5);
  font-family: var(--finesa-font-family-1);
  font-size: 16px;
  font-weight: bolder;
  padding: 12px 22px;
}

#btnIngresarPortal:hover {
  background-color: var(--finesa-color-1);
  border: 2px solid var(--finesa-color-1);
}

#login-container,
#first-payment-container {
  align-items: center;
  height: 100%;
  margin: auto;
  padding-top: 40px;
  width: 1200px;
  min-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px;
}

#btnIngresarPortal,
#finesaLogo {
  cursor: pointer;
}

#contBtnPagar {
  display: flex;
  justify-content: right;
  width: 100%;
}

#contBtnIngresarPortal {
  display: none;
}

#contImg {
  display: flex;
  justify-content: left;
  width: 100%;
}

#contImg img {
  height: auto;
  max-width: 300px;
}

/* ===== Classes ===== */

.background-one {
  background-image: url('../img/bg-autent-01.png');
  background-position: 0% 100%;
  background-repeat: no-repeat;
}

.background-two {
  background-image: url('../img/bg-autent-02.png');
  background-position: 100% 0%;
  background-repeat: no-repeat;
}

.contenedor {
  align-items: center;
  display: flex;
  padding-left: 0px;
  justify-content: center;
  flex-direction: row;
  width: 100%;
  max-width: 1200px;
}

.espacio-blanco {
  height: 40px;
}

.title,
.sub-title {
  color: var(--finesa-color-3);
  font-size: 24px;
  font-weight: bold;
}

.sub-title {
  font-weight: 100;
}

.cont-sec {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
}

.cursor-pointer {
  cursor: pointer;
}

.error-border {
  border-bottom: 1px solid var(--finesa-color-2) !important;
}

.error-text {
  color: var(--finesa-color-2);
  font-size: 12px;
  margin-top: 4px;
  text-align: left;
}

.focusedInput {
  box-shadow: none !important;
}

.form-signin {
  background-color: var(--finesa-color-7);
  border-radius: var(--finesa-border-radius-2);
  box-shadow: 0px 2px 8px rgb(0 0 0 / 14%);
  max-width: 460px;
  margin: auto;
}

.grecaptcha-badge {
  bottom: 40px !important;
}

.offcanvas-backdrop {
  pointer-events: all !important;
}

.textClient {
  color: var(--finesa-color-4);
  font-size: 15px;
  font-weight: bold;
}

.textActivate {
  color: var(--finesa-color-1);
  cursor: pointer;
  font-size: 15px;
  font-weight: bold;
  text-decoration: underline;
}

.modal-header {
  border: none;
  justify-content: flex-end;
  height: 50px;
}

.modal-header span {
  color: var(--finesa-color-3);
  margin: 10px 10px 0px 10px;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
}

.main-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 40px 0px;
}

.buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.input-web {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
}

/* ===== NGX-UI-Loader replica (ballSpinClockwise, blur:6, pbColor:#00a9e0) ===== */

#loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  background-color: rgba(40, 40, 40, 0.8);
  /* Blur the content behind the overlay without touching the DOM layout.
     Using backdrop-filter instead of filter on #app-content avoids the
     stacking-context side-effect that was breaking position:fixed elements. */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

/* Disable interaction with page content while overlay is visible */
#app-content.ngx-blurred {
  pointer-events: none;
  user-select: none;
}

/* Progress bar — fixed at top of overlay */
.ngx-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  overflow: hidden;
}

.ngx-progress-bar-inner {
  height: 4px;
  width: 0%;
  background-color: #00a9e0;
  animation: ngx-pb-fill 10s cubic-bezier(0.1, 0.4, 0.7, 1) forwards;
}

@keyframes ngx-pb-fill {
  0%   { width: 0%;  }
  40%  { width: 70%; }
  70%  { width: 85%; }
  100% { width: 92%; }
}

/* Loader text */
.ngx-loader-text {
  color: #ffffff;
  font-size: 15px;
  text-align: center;
}

/* ---- Ball spin clockwise (loaders.css port) ---- */
/* Container: 70×70px, orbit radius: 27.5px, ball: 15×15px */
.ball-spin-clockwise {
  position: relative;
  width: 70px;
  height: 70px;
}

.ball-spin-clockwise > div {
  background-color: #00a9e0;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  position: absolute;
  animation: ball-spin-anim 1s linear infinite;
  animation-fill-mode: both;
}

/* 8 positions (θ clockwise from 12 o'clock, r=27.5, center=35,35, offset=7.5) */
.ball-spin-clockwise > div:nth-child(1) { top:  0px; left: 28px; animation-delay:  0s;      }
.ball-spin-clockwise > div:nth-child(2) { top:  8px; left: 47px; animation-delay: -0.875s;  }
.ball-spin-clockwise > div:nth-child(3) { top: 28px; left: 55px; animation-delay: -0.75s;   }
.ball-spin-clockwise > div:nth-child(4) { top: 47px; left: 47px; animation-delay: -0.625s;  }
.ball-spin-clockwise > div:nth-child(5) { top: 55px; left: 28px; animation-delay: -0.5s;    }
.ball-spin-clockwise > div:nth-child(6) { top: 47px; left:  8px; animation-delay: -0.375s;  }
.ball-spin-clockwise > div:nth-child(7) { top: 28px; left:  0px; animation-delay: -0.25s;   }
.ball-spin-clockwise > div:nth-child(8) { top:  8px; left:  8px; animation-delay: -0.125s;  }

@keyframes ball-spin-anim {
  0%,  100% { opacity: 0.1; transform: scale(0.75); }
  50%        { opacity: 1;   transform: scale(1);    }
}

.container {
  margin: 60px auto 120px auto !important;
}

/* ===== Media queries ===== */

@media screen and (max-width: 767px) {
  #btnPagarFacturaBottom {
    display: inline-block;
    width: auto;
  }

  #contBtnIngresarPortal {
    display: flex;
    justify-content: center;
  }

  #sidebar-container {
    display: none;
  }

  #contBtnPagar {
    display: none;
  }

  .main-container {
    align-items: center;
    height: 100%;
    margin: 0px;
  }

  .contenedor {
    margin-bottom: 0px;
  }

  #login-container,
  #first-payment-container {
    padding: 40px;
    gap: 30px;
    min-height: calc(100vh - 160px);
  }

  .container {
    width: 90% !important;
    margin-top: 90px;
    padding: 40px 0px;
    margin: 0px auto !important;
  }

  .accordion-item {
    padding: 15px !important;
    gap: 15px !important;
    text-align: right;
  }

  .info-text {
    text-align: center !important;
    padding: 0px !important;
  }

  .accordion-header>div {
    padding: 6px 10px !important;
    max-height: 50px;
    gap: 10px;
  }

  .accordion-header span {
    cursor: pointer;
    height: 100%;
    display: flex;
    overflow: hidden;
    align-items: flex-start;
  }

  .accordion-header span {
    text-align: left !important;
  }

  .accordion-header .cont-but {
    width: 50% !important;
  }

  .cont-but {
    display: flex;
    align-items: flex-end !important;
    gap: 10px;
    font-size: 14px;
    flex-direction: column;
  }

  .cont-but span {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
  }

  .accordion-body {
    gap: 15px !important;
  }

  .product-card-total-input .cursor-pointer,
  .product-card-column .cursor-pointer,
  .product-card-column input {
    padding: 0px !important;
  }
}

@media screen and (max-width: 1200px) {
  #sidebar-container {
    display: none;
  }
}

@media screen and (min-width: 1200px) {
  .form-signin {
    width: 460px;
  }

  .main-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
}