/* AMELIAPOS_PAYMENT_TERMINAL_UI_R16_5R19_7_3
 * Visual refinement over R19.7.2 structural/stability fix.
 * CSS ONLY. No payment logic, no payload, no event handlers.
 */

#paymentOverlay{
  --pt-navy:#0f2b4f;
  --pt-navy-deep:#0a2340;
  --pt-orange:#ef7429;
  --pt-orange-soft:#fff7f1;
  --pt-border:#d9e3ea;
  --pt-border-strong:#c6d4de;
  --pt-muted:#718292;
  --pt-text:#142a3f;
  --pt-green:#2e8b49;
  --pt-green-soft:#f1f9f2;
  --pt-red:#bd4338;
  --pt-red-soft:#fff4f3;
  --pt-panel:#ffffff;
  --pt-page:#eef3f6;
  --pt-soft:#f7f9fb;
}

#paymentOverlay,
#paymentOverlay *{
  box-sizing:border-box!important;
}

/* =========================================================
   APP CANVAS
   ========================================================= */

#paymentOverlay .payment-workspace{
  background:var(--pt-page)!important;
}

#paymentOverlay .payment-stage{
  display:grid!important;
  grid-template-columns:minmax(0,2.18fr) minmax(360px,.96fr)!important;
  gap:16px!important;
  align-items:stretch!important;
  min-width:0!important;
  padding:16px 20px 18px!important;
}

/* =========================================================
   LEFT: PAYMENT TERMINAL
   ========================================================= */

#paymentOverlay .payment-entry-panel{
  display:grid!important;
  grid-template-columns:minmax(320px,1fr) minmax(390px,1.08fr)!important;
  grid-template-areas:
    "step1 step1"
    "methods methods"
    "step2 step2"
    "amount tip"
    "received preview"
    "cash cash"
    "submit submit"!important;
  grid-template-rows:
    auto
    116px
    auto
    158px
    92px
    198px
    78px!important;
  gap:14px 16px!important;
  align-content:start!important;
  min-width:0!important;
  padding:18px!important;
  overflow:hidden!important;
  border:1px solid var(--pt-border)!important;
  border-radius:18px!important;
  background:var(--pt-panel)!important;
  box-shadow:0 4px 18px rgba(21,48,68,.045)!important;
}

#paymentOverlay .payment-entry-panel>.payment-step:first-of-type{
  grid-area:step1!important;
}

#paymentOverlay .payment-method-grid{
  grid-area:methods!important;
}

#paymentOverlay .payment-step--amount{
  grid-area:step2!important;
}

#paymentOverlay .payment-entry-panel>label[aria-label="Monto a aplicar"]{
  grid-area:amount!important;
}

#paymentOverlay #paymentTipPanel{
  grid-area:tip!important;
}

#paymentOverlay #receivedWrap{
  grid-area:received!important;
}

#paymentOverlay #cashChangePreview{
  grid-area:preview!important;
}

#paymentOverlay #cashShortcuts{
  grid-area:cash!important;
}

#paymentOverlay #addPayment{
  grid-area:submit!important;
}

/* STEP TITLES */

#paymentOverlay .payment-step{
  min-width:0!important;
  margin:0!important;
  display:flex!important;
  align-items:flex-start!important;
  gap:10px!important;
}

#paymentOverlay .payment-step>span{
  flex:0 0 30px!important;
  width:30px!important;
  height:30px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:10px!important;
  background:#fff1e6!important;
  color:var(--pt-orange)!important;
  font-size:16px!important;
  line-height:1!important;
  font-weight:950!important;
}

#paymentOverlay .payment-step strong{
  color:var(--pt-text)!important;
  font-size:14px!important;
  line-height:1.15!important;
  font-weight:900!important;
  letter-spacing:-.01em!important;
}

#paymentOverlay .payment-step small{
  color:var(--pt-muted)!important;
  font-size:10px!important;
  line-height:1.3!important;
}

/* PAYMENT METHODS */

#paymentOverlay .payment-method-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
  min-width:0!important;
  height:116px!important;
}

#paymentOverlay .payment-method-grid>button{
  width:100%!important;
  min-width:0!important;
  height:116px!important;
  min-height:116px!important;
  margin:0!important;
  padding:14px 12px!important;
  border:1px solid var(--pt-border)!important;
  border-radius:15px!important;
  background:#fff!important;
  color:#2c4053!important;
  box-shadow:none!important;
  transform:none!important;
  transition:background .12s ease,border-color .12s ease,box-shadow .12s ease!important;
}

#paymentOverlay .payment-method-grid>button:hover{
  border-color:#b9c9d4!important;
  background:#fbfcfd!important;
}

#paymentOverlay .payment-method-grid>button.active,
#paymentOverlay .payment-method-grid>button[aria-pressed="true"]{
  border:1px solid var(--pt-navy)!important;
  background:linear-gradient(180deg,var(--pt-navy) 0%,var(--pt-navy-deep) 100%)!important;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(15,43,79,.16)!important;
  transform:none!important;
}

#paymentOverlay .payment-method-icon{
  width:34px!important;
  height:30px!important;
  margin-bottom:8px!important;
}

#paymentOverlay .payment-method-grid>button strong,
#paymentOverlay .payment-method-grid>button b{
  font-size:13px!important;
  font-weight:900!important;
}

/* MONEY FIELDS */

#paymentOverlay .payment-money-field{
  display:flex!important;
  flex-direction:column!important;
  min-width:0!important;
  margin:0!important;
}

#paymentOverlay .payment-money-field>span{
  display:block!important;
  margin:0 0 9px!important;
  color:#5c7080!important;
  font-size:10px!important;
  line-height:1.1!important;
  font-weight:900!important;
  letter-spacing:.055em!important;
  text-transform:uppercase!important;
}

#paymentOverlay .payment-money-input{
  display:grid!important;
  grid-template-columns:38px minmax(0,1fr)!important;
  align-items:center!important;
  width:100%!important;
  min-width:0!important;
  height:82px!important;
  min-height:82px!important;
  padding:0 16px!important;
  overflow:hidden!important;
  border:1px solid var(--pt-border-strong)!important;
  border-radius:15px!important;
  background:#fff!important;
  box-shadow:0 1px 2px rgba(17,40,58,.025)!important;
}

#paymentOverlay .payment-money-input i{
  color:#607486!important;
  font-size:20px!important;
  font-style:normal!important;
  font-weight:900!important;
}

#paymentOverlay .payment-money-input input{
  width:100%!important;
  min-width:0!important;
  height:78px!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  color:#10273d!important;
  text-align:right!important;
  font-size:31px!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:-.025em!important;
  box-shadow:none!important;
}

#paymentOverlay #receivedWrap .payment-money-input{
  border-color:#8fabc0!important;
  background:#fff!important;
  box-shadow:0 0 0 2px rgba(45,91,125,.06)!important;
}

#paymentOverlay #receivedAmount.input-invalid{
  color:var(--pt-red)!important;
}

/* TIP */

#paymentOverlay .payment-tip-panel{
  width:100%!important;
  min-width:0!important;
  height:158px!important;
  min-height:158px!important;
  margin:0!important;
  padding:14px!important;
  overflow:hidden!important;
  border:1px solid #f0ceb8!important;
  border-radius:15px!important;
  background:#fffcf9!important;
  box-shadow:none!important;
}

#paymentOverlay .payment-tip-head{
  min-height:31px!important;
  margin:0 0 10px!important;
}

#paymentOverlay .payment-tip-head>span{
  color:var(--pt-text)!important;
  font-size:15px!important;
  font-weight:900!important;
}

#paymentOverlay .payment-tip-head>strong{
  color:var(--pt-orange)!important;
  font-size:18px!important;
  font-weight:950!important;
}

#paymentOverlay .payment-tip-actions{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:9px!important;
  width:100%!important;
  min-width:0!important;
  height:64px!important;
}

#paymentOverlay .payment-tip-actions>button,
#paymentOverlay .payment-tip-actions>label{
  width:100%!important;
  min-width:0!important;
  height:64px!important;
  min-height:64px!important;
  margin:0!important;
  padding:8px!important;
  overflow:hidden!important;
  border:1px solid var(--pt-border)!important;
  border-radius:11px!important;
  background:#fff!important;
  color:#20364a!important;
  box-shadow:none!important;
  transform:none!important;
}

#paymentOverlay .payment-tip-actions>button.active{
  border-color:var(--pt-orange)!important;
  background:#fff5ed!important;
  color:#bd591d!important;
  box-shadow:inset 0 0 0 1px rgba(239,116,41,.12)!important;
}

#paymentOverlay .payment-tip-input,
#paymentOverlay .payment-tip-input input{
  min-width:0!important;
  width:100%!important;
}

#paymentOverlay .payment-tip-panel>small{
  display:block!important;
  margin-top:9px!important;
  color:#728493!important;
  font-size:9px!important;
  line-height:1.3!important;
}

/* CHANGE / MISSING SLOT
   Always reserves the same 92 px. Hidden means invisible, not removed.
*/

#paymentOverlay #cashChangePreview{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  width:100%!important;
  min-width:0!important;
  height:92px!important;
  min-height:92px!important;
  margin:0!important;
  padding:0 18px!important;
  overflow:hidden!important;
  border:1px solid #dbe5ea!important;
  border-radius:15px!important;
  background:#f8fafb!important;
  box-shadow:none!important;
  transition:none!important;
}

#paymentOverlay #cashChangePreview.hidden{
  display:grid!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

#paymentOverlay #cashChangePreview:not(.hidden){
  visibility:visible!important;
  opacity:1!important;
}

#paymentOverlay #cashChangePreview span{
  min-width:0!important;
  color:#536a7c!important;
  font-size:14px!important;
  line-height:1.15!important;
  font-weight:900!important;
}

#paymentOverlay #cashChangePreview strong{
  color:#173047!important;
  font-size:26px!important;
  line-height:1!important;
  font-weight:950!important;
  white-space:nowrap!important;
}

#paymentOverlay #cashChangePreview.is-short{
  border-color:#edcfcc!important;
  background:var(--pt-red-soft)!important;
}

#paymentOverlay #cashChangePreview.is-short span,
#paymentOverlay #cashChangePreview.is-short strong{
  color:var(--pt-red)!important;
}

#paymentOverlay #cashChangePreview.is-exact,
#paymentOverlay #cashChangePreview.is-change{
  border-color:#c5dfcc!important;
  background:linear-gradient(180deg,#f8fff9 0%,var(--pt-green-soft) 100%)!important;
}

#paymentOverlay #cashChangePreview.is-exact span,
#paymentOverlay #cashChangePreview.is-exact strong,
#paymentOverlay #cashChangePreview.is-change span,
#paymentOverlay #cashChangePreview.is-change strong{
  color:var(--pt-green)!important;
}

/* FAST CASH */

#paymentOverlay .cash-shortcuts{
  width:100%!important;
  min-width:0!important;
  height:198px!important;
  min-height:198px!important;
  margin:0!important;
  padding:13px!important;
  overflow:hidden!important;
  border:1px solid var(--pt-border)!important;
  border-radius:15px!important;
  background:#fbfcfd!important;
  box-shadow:none!important;
}

#paymentOverlay .cash-shortcuts-head{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:12px!important;
  align-items:center!important;
  height:28px!important;
  margin:0 0 10px!important;
}

#paymentOverlay .cash-shortcuts-head strong{
  color:#20364b!important;
  font-size:12px!important;
  font-weight:900!important;
}

#paymentOverlay .cash-shortcuts-head span{
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#748695!important;
  font-size:9px!important;
}

#paymentOverlay .cash-denominations{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  grid-auto-rows:66px!important;
  gap:9px!important;
  width:100%!important;
  min-width:0!important;
  height:141px!important;
}

#paymentOverlay .cash-denomination{
  position:relative!important;
  width:100%!important;
  min-width:0!important;
  height:66px!important;
  min-height:66px!important;
  margin:0!important;
  padding:8px 7px!important;
  overflow:hidden!important;
  border:1px solid #cfdae2!important;
  border-radius:12px!important;
  background:#fff!important;
  color:#1d3348!important;
  box-shadow:none!important;
  transform:none!important;
  transition:background .1s ease,border-color .1s ease,box-shadow .1s ease!important;
}

#paymentOverlay .cash-denomination:hover{
  border-color:#aebfca!important;
  background:#fff!important;
  box-shadow:0 2px 6px rgba(18,45,64,.04)!important;
}

#paymentOverlay .cash-denomination:active,
#paymentOverlay .cash-denomination.active{
  border:1px solid var(--pt-navy)!important;
  background:#f4f8fb!important;
  box-shadow:inset 0 0 0 1px rgba(15,43,79,.1)!important;
  transform:none!important;
}

#paymentOverlay .cash-denomination:disabled{
  opacity:.47!important;
  transform:none!important;
}

#paymentOverlay .cash-denomination__icon{
  height:22px!important;
  min-height:22px!important;
  margin:0 0 4px!important;
  line-height:22px!important;
  color:#bd7229!important;
}

#paymentOverlay .cash-denomination b{
  display:block!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:inherit!important;
  font-size:11px!important;
  line-height:1.05!important;
  font-weight:900!important;
}

#paymentOverlay .cash-denomination--clear{
  background:#fff9f8!important;
  color:#a95950!important;
  border-color:#ead5d2!important;
}

/* CTA */

#paymentOverlay #addPayment{
  width:100%!important;
  min-width:0!important;
  height:78px!important;
  min-height:78px!important;
  margin:0!important;
  border:0!important;
  border-radius:15px!important;
  background:#d8e0e6!important;
  color:#728391!important;
  font-size:17px!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:-.01em!important;
  box-shadow:none!important;
  transform:none!important;
}

#paymentOverlay #addPayment:not(:disabled){
  background:
    linear-gradient(90deg,
      var(--pt-navy) 0%,
      var(--pt-navy) 88%,
      var(--pt-orange) 88%,
      var(--pt-orange) 100%)!important;
  color:#fff!important;
  box-shadow:0 6px 15px rgba(15,43,79,.12)!important;
}

/* =========================================================
   RIGHT: COBRO ACTUAL
   ========================================================= */

#paymentOverlay .payment-ledger{
  display:flex!important;
  flex-direction:column!important;
  min-width:0!important;
  min-height:100%!important;
  padding:18px!important;
  overflow:hidden!important;
  border:1px solid var(--pt-border)!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:0 4px 18px rgba(21,48,68,.04)!important;
}

#paymentOverlay .payment-ledger>header{
  flex:0 0 auto!important;
  min-height:68px!important;
  margin:0!important;
  padding:0 0 13px!important;
  border-bottom:1px solid #e5ebef!important;
}

#paymentOverlay .payment-ledger>header small{
  color:var(--pt-orange)!important;
  font-size:9px!important;
  font-weight:950!important;
  letter-spacing:.12em!important;
}

#paymentOverlay .payment-ledger h3{
  margin-top:5px!important;
  color:#172d42!important;
  font-size:20px!important;
  line-height:1.1!important;
  font-weight:950!important;
  letter-spacing:-.015em!important;
}

#paymentOverlay .payment-coverage-badge{
  flex:0 0 auto!important;
  min-width:76px!important;
  padding:7px 11px!important;
  border-radius:999px!important;
  background:#fff0e4!important;
  color:#9f5e2b!important;
  font-size:9px!important;
  font-weight:900!important;
  text-align:center!important;
}

#paymentOverlay .payment-coverage-badge.complete{
  background:#eaf7ed!important;
  color:var(--pt-green)!important;
}

#paymentOverlay .payment-charge-summary{
  flex:0 0 auto!important;
  margin:14px 0 0!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid #dfe7ec!important;
  border-radius:14px!important;
  background:#fff!important;
}

#paymentOverlay .payment-charge-summary>div{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:12px!important;
  min-height:56px!important;
  padding:11px 14px!important;
  border-bottom:1px solid #e8edf0!important;
}

#paymentOverlay .payment-charge-summary>div>span{
  color:#5a6f80!important;
  font-size:11px!important;
  line-height:1.15!important;
  font-weight:850!important;
}

#paymentOverlay .payment-charge-summary>div>strong{
  color:#162f46!important;
  font-size:17px!important;
  line-height:1!important;
  font-weight:950!important;
  white-space:nowrap!important;
}

#paymentOverlay .payment-charge-summary>.payment-charge-total{
  min-height:74px!important;
  padding:14px!important;
  border-bottom:1px solid #f1d3c0!important;
  background:linear-gradient(180deg,#fffaf6 0%,var(--pt-orange-soft) 100%)!important;
}

#paymentOverlay .payment-charge-total>span{
  color:#bd591d!important;
  font-size:12px!important;
  font-weight:950!important;
}

#paymentOverlay .payment-charge-total>strong{
  color:#df681f!important;
  font-size:27px!important;
  font-weight:950!important;
  letter-spacing:-.02em!important;
}

/* Recibido / vuelto */

#paymentOverlay .payment-charge-cash{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-rows:48px 78px!important;
  gap:0 12px!important;
  min-height:126px!important;
  padding:0 14px!important;
  border-bottom:0!important;
  background:#fff!important;
}

#paymentOverlay .payment-charge-cash.hidden{
  display:none!important;
}

#paymentOverlay .payment-charge-cash>span,
#paymentOverlay .payment-charge-cash>strong{
  align-self:center!important;
}

#paymentOverlay .payment-charge-cash>span{
  color:#597082!important;
  font-size:11px!important;
  font-weight:850!important;
}

#paymentOverlay .payment-charge-cash>strong{
  color:#173047!important;
  font-size:17px!important;
  font-weight:950!important;
  white-space:nowrap!important;
}

#paymentOverlay .payment-charge-cash>span:nth-of-type(2){
  align-self:stretch!important;
  display:flex!important;
  align-items:center!important;
  margin:0 -14px!important;
  padding:0 14px!important;
  border-top:1px solid #dce9df!important;
  background:var(--pt-green-soft)!important;
  color:var(--pt-green)!important;
  font-size:14px!important;
  font-weight:950!important;
}

#paymentOverlay #paymentChargeChange{
  align-self:stretch!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  margin:0 -14px 0 0!important;
  padding:0 14px!important;
  border-top:1px solid #dce9df!important;
  background:var(--pt-green-soft)!important;
  color:var(--pt-green)!important;
  font-size:28px!important;
  font-weight:950!important;
  letter-spacing:-.02em!important;
}

#paymentOverlay #paymentChargeChange.short{
  border-top-color:#efd8d5!important;
  background:var(--pt-red-soft)!important;
  color:var(--pt-red)!important;
}

#paymentOverlay #paymentChargeChange.short~*{
  color:var(--pt-red)!important;
}

#paymentOverlay .payment-ledger-section-title{
  flex:0 0 auto!important;
  min-height:46px!important;
  margin-top:16px!important;
  padding:10px 0!important;
  border-bottom:1px solid #e7ecef!important;
}

#paymentOverlay .payment-ledger-section-title strong{
  color:#1e354a!important;
  font-size:12px!important;
  font-weight:900!important;
}

#paymentOverlay .payment-ledger-section-title small{
  color:#7b8c99!important;
  font-size:9px!important;
}

#paymentOverlay .payment-list{
  flex:1 1 auto!important;
  min-height:150px!important;
  padding-top:12px!important;
  overflow:auto!important;
}

#paymentOverlay .payment-ledger-bottom{
  flex:0 0 auto!important;
  margin-top:auto!important;
  padding-top:14px!important;
  border-top:1px solid #e3e9ed!important;
}

#paymentOverlay .ledger-total{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  min-height:58px!important;
}

#paymentOverlay .ledger-total span{
  color:#435d71!important;
  font-size:16px!important;
  font-weight:900!important;
}

#paymentOverlay .ledger-total strong{
  color:#172d42!important;
  font-size:19px!important;
  font-weight:950!important;
  white-space:nowrap!important;
}

/* =========================================================
   RESPONSIVE, WITHOUT CHANGING PAYMENT BEHAVIOUR
   ========================================================= */

@media(max-width:1400px) and (min-width:1081px){
  #paymentOverlay .payment-stage{
    grid-template-columns:minmax(0,2fr) minmax(340px,.92fr)!important;
    gap:14px!important;
    padding:14px!important;
  }

  #paymentOverlay .payment-entry-panel{
    grid-template-columns:minmax(290px,1fr) minmax(350px,1.05fr)!important;
    padding:16px!important;
  }

  #paymentOverlay .cash-denominations{
    gap:7px!important;
  }
}

@media(max-width:1080px){
  #paymentOverlay .payment-stage{
    grid-template-columns:1fr!important;
    overflow:auto!important;
  }

  #paymentOverlay .payment-entry-panel{
    grid-template-columns:1fr!important;
    grid-template-areas:
      "step1"
      "methods"
      "step2"
      "amount"
      "tip"
      "received"
      "preview"
      "cash"
      "submit"!important;
    grid-template-rows:auto 116px auto auto 158px 92px 92px 198px 78px!important;
  }
}