/* =========================================================
   OneMobile — Portal de pagos / Abonos
   Vuexy + paleta OneMobile
========================================================= */

:root {
  --om-primary: #0d6efd;
  --om-primary-dark: #0b5ed7;
  --om-primary-rgb: 13, 110, 253;
  --om-primary-soft: #eef3ff;
  --om-success: #17a35b;
  --om-success-soft: #eefaf3;
  --om-title: #243056;
  --om-text: #5f6888;
  --om-muted: #7b86a7;
  --om-border: #edf0fa;
  --om-border-strong: #dfe5f4;
  --om-card: #ffffff;
  --om-surface: #fbfcff;
  --om-black: #111111;
  --om-shadow: 0 12px 28px rgba(34, 51, 110, .055);
  --om-shadow-lg: 0 20px 52px rgba(34, 51, 110, .095);
}

body {
  background:
    radial-gradient(circle at 0% 0%, rgba(13, 110, 253, .065), transparent 34rem),
    radial-gradient(circle at 100% 8%, rgba(36, 48, 86, .045), transparent 34rem),
    #f4f5fd;
}

.icon-base,
.icon-base::before {
  color: currentColor !important;
  line-height: 1;
}

.om-abonos-page {
  min-height: calc(100vh - 10rem);
  padding-bottom: 1.5rem;
  color: var(--om-title);
}

/* =========================================================
   Base Vuexy
========================================================= */

.om-abonos-page .card {
  overflow: hidden;
  border: 1px solid var(--om-border);
  border-radius: var(--bs-border-radius-xl, 1.15rem);
  background: var(--om-card);
  box-shadow: var(--om-shadow);
}

.om-abonos-page .card-header {
  background: #ffffff;
}

.om-abonos-page .form-label {
  margin-bottom: .45rem;
  color: var(--om-title);
  font-size: .78rem;
  font-weight: 800;
}

.om-abonos-page .form-control,
.om-abonos-page .form-select {
  min-height: 2.7rem;
  border-color: var(--om-border-strong);
  color: var(--om-title);
  font-size: .87rem;
  font-weight: 650;
  box-shadow: none;
}

.om-abonos-page .form-control::placeholder {
  color: #a2abc4;
  font-weight: 550;
}

.om-abonos-page .form-control:focus,
.om-abonos-page .form-select:focus {
  border-color: rgba(var(--om-primary-rgb), .55);
  box-shadow: 0 0 0 .24rem rgba(var(--om-primary-rgb), .10);
}

.om-abonos-page .form-control[readonly] {
  background: #f8faff;
  color: #7580a2;
}

.om-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-height: 1.65rem;
  padding: .29rem .62rem;
  border-radius: 50rem;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .025em;
  line-height: 1;
}

.om-badge-primary {
  border: 1px solid #dce5ff;
  background: var(--om-primary-soft);
  color: var(--om-primary-dark);
}

.om-avatar-primary .avatar-initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--om-primary-soft) !important;
  color: var(--om-primary-dark) !important;
}

/* =========================================================
   Header
========================================================= */

.om-abonos-hero {
  margin-bottom: 1.25rem;
}

.om-abonos-hero > .card-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 8.25rem;
  padding: 1.25rem 1.4rem;
}

.om-abonos-hero-copy {
  min-width: 0;
}

.om-abonos-title {
  margin: .65rem 0 0;
  color: var(--om-title);
  font-size: clamp(1.45rem, 1.95vw, 2rem);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.1;
}

.om-abonos-subtitle {
  max-width: 45rem;
  margin: .5rem 0 0;
  color: var(--om-text);
  font-size: .88rem;
  line-height: 1.52;
}

.om-abonos-secure {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  min-width: 14rem;
  padding: .78rem .95rem;
  border: 1px solid #d8efe2;
  border-radius: .9rem;
  background: var(--om-success-soft);
}

.om-abonos-secure-icon,
.om-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.om-abonos-secure-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: .75rem;
  background: #ffffff;
  color: var(--om-success);
}

.om-abonos-secure strong {
  display: block;
  color: #16844c;
  font-size: .75rem;
  font-weight: 800;
  line-height: 1.2;
}

.om-abonos-secure small {
  display: block;
  margin-top: .18rem;
  color: #4d8d68;
  font-size: .68rem;
  font-weight: 650;
}

/* =========================================================
   Layout
========================================================= */

.om-abonos-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24.5rem;
  align-items: start;
  gap: 1.25rem;
}

.om-abonos-aside {
  position: sticky;
  top: 1rem;
  min-width: 0;
}

/* =========================================================
   Headers de card
========================================================= */

.om-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.35rem 1.4rem 1.2rem;
  border-bottom: 1px solid var(--om-border);
}

.om-section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .45rem;
  color: var(--om-primary);
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.om-card-header h2 {
  margin: 0;
  color: var(--om-title);
  font-size: clamp(1.2rem, 1.55vw, 1.48rem);
  font-weight: 800;
  letter-spacing: -.018em;
}

.om-card-header p {
  margin: .48rem 0 0;
  color: var(--om-text);
  font-size: .84rem;
  line-height: 1.5;
}

.om-card-icon {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: .85rem;
  background: var(--om-primary-soft);
  color: var(--om-primary);
  font-size: 1.15rem;
}

/* =========================================================
   Consulta de contrato
========================================================= */

.om-input-action {
  display: flex;
  gap: .55rem;
}

.om-input-action .om-input {
  flex: 1;
}

.om-mini-btn {
  width: 2.7rem;
  min-width: 2.7rem;
  min-height: 2.7rem;
  padding: 0;
  border: 1px solid var(--om-black) !important;
  border-radius: .72rem;
  background: var(--om-black) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 20px rgba(17, 17, 17, .14);
}

.om-mini-btn:hover,
.om-mini-btn:focus {
  border-color: #000 !important;
  background: #000 !important;
  color: #ffffff !important;
}

.om-mini-btn:disabled {
  opacity: .65;
  cursor: not-allowed;
}

.om-help-text {
  display: block;
  margin-top: .38rem;
  color: var(--om-muted);
  font-size: .69rem;
  font-weight: 600;
  line-height: 1.35;
}

.om-amount-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4.85rem;
  gap: .8rem;
  padding: .8rem .9rem;
  border: 1px solid rgba(var(--om-primary-rgb), .12);
  border-radius: .95rem;
  background: #f3f7ff;
}

.om-amount-input {
  width: 100%;
  min-height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--om-primary) !important;
  font-size: 1.42rem !important;
  font-weight: 900 !important;
  line-height: 1.1;
  box-shadow: none !important;
}

.om-amount-input:disabled {
  color: rgba(var(--om-primary-rgb), .54) !important;
}

.om-amount-box span:not(.om-amount-icon) {
  display: block;
  margin-top: .18rem;
  color: var(--om-muted);
  font-size: .69rem;
  font-weight: 650;
  line-height: 1.35;
}

.om-amount-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.45rem;
  height: 2.45rem;
  border-radius: .75rem;
  background: #ffffff;
  color: var(--om-primary);
  font-size: 1.1rem;
  flex: 0 0 auto;
}

.om-payment-divider {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1.4rem 0 1rem;
  color: var(--om-muted);
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.om-payment-divider::before,
.om-payment-divider::after {
  content: '';
  height: 1px;
  flex: 1;
  background: var(--om-border);
}

.om-payment-methods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  padding: .95rem;
  border: 1px solid var(--om-border);
  border-radius: 1rem;
  background: #fbfcff;
}

.om-payment-tab {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 4.45rem;
  gap: .8rem;
  padding: .78rem .88rem;
  border: 1px solid var(--om-border-strong);
  border-radius: .9rem;
  background: #ffffff;
  color: var(--om-title);
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease;
}

.om-payment-tab:hover {
  border-color: #cddaff;
  box-shadow: 0 7px 18px rgba(var(--om-primary-rgb), .08);
  transform: translateY(-1px);
}

.om-payment-tab.active {
  border-color: #8aabff;
  background: var(--om-primary-soft);
  box-shadow: inset 0 0 0 1px rgba(var(--om-primary-rgb), .08);
}

.om-method-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: .72rem;
  background: #f2f5ff;
  color: var(--om-primary);
  font-size: 1.05rem;
  flex: 0 0 auto;
}
.om-payment-tab.active .om-method-icon {
  background: var(--om-primary);
  color: #ffffff;
}
.om-method-copy {
  display: grid;
  min-width: 0;
  gap: .18rem;
}

.om-method-copy strong {
  color: var(--om-title);
  font-size: .84rem;
  font-weight: 800;
  line-height: 1.1;
}

.om-method-copy small {
  color: var(--om-muted);
  font-size: .68rem;
  font-weight: 650;
  line-height: 1.15;
}

.om-method-check {
  display: none;
  margin-left: auto;
  color: var(--om-primary);
  font-size: 1rem;
}

.om-payment-tab.active .om-method-check {
  display: inline-block;
}

.om-payment-panel {
  padding: 1.35rem 0 0;
  background: #ffffff;
}

.om-payment-panel[hidden] {
  display: none !important;
}

.om-panel-intro {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  margin-bottom: 1rem;
  padding: .9rem 1rem;
  border: 1px solid #e3e9fb;
  border-radius: .95rem;
  background: #f8faff;
}

.om-panel-intro-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: .72rem;
  background: var(--om-primary-soft);
  color: var(--om-primary);
  font-size: 1rem;
  flex: 0 0 auto;
}

.om-panel-intro-icon-success {
  background: var(--om-success-soft);
  color: var(--om-success);
}

.om-panel-intro h3 {
  margin: 0;
  color: var(--om-title);
  font-size: .9rem;
  font-weight: 800;
}

.om-panel-intro p {
  margin: .27rem 0 0;
  color: var(--om-text);
  font-size: .77rem;
  line-height: 1.48;
}
.om-card-preview-shell {
  min-width: 0;
}

.om-card-preview {
  position: relative;
  overflow: hidden;
  min-height: 13.45rem;
  padding: 1.15rem;
  border-radius: 1.1rem;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,255,255,.22), transparent 30%),
    radial-gradient(circle at 100% 100%, rgba(255,255,255,.16), transparent 30%),
    linear-gradient(135deg, #0f172f 0%, #243056 44%, #0d6efd 100%);
  color: #ffffff;
  box-shadow: 0 18px 42px rgba(18, 28, 61, .24);
}

.om-card-preview.is-visa {
  background:
    radial-gradient(circle at 0% 0%, rgba(255,255,255,.22), transparent 30%),
    radial-gradient(circle at 100% 100%, rgba(255,255,255,.16), transparent 30%),
    linear-gradient(135deg, #111b4d 0%, #193d8d 55%, #0d6efd 100%);
}

.om-card-preview.is-mastercard {
  background:
    radial-gradient(circle at 0% 0%, rgba(255,255,255,.22), transparent 30%),
    radial-gradient(circle at 100% 100%, rgba(255,255,255,.16), transparent 30%),
    linear-gradient(135deg, #2b183f 0%, #7e2553 45%, #eb5d3d 100%);
}

.om-card-preview.is-amex {
  background:
    radial-gradient(circle at 0% 0%, rgba(255,255,255,.22), transparent 30%),
    radial-gradient(circle at 100% 100%, rgba(255,255,255,.16), transparent 30%),
    linear-gradient(135deg, #0d3554 0%, #17678f 48%, #36a3c7 100%);
}

.om-card-preview-glow {
  position: absolute;
  top: -2.5rem;
  right: -2rem;
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
  background: rgba(255,255,255,.10);
}

.om-card-preview-top,
.om-card-preview-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .9rem;
}

.om-card-preview-chip {
  position: relative;
  display: inline-flex;
  width: 2.95rem;
  height: 2.1rem;
  border-radius: .55rem;
  background: linear-gradient(135deg, #f7d875 0%, #d9ab3d 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}

.om-card-preview-chip::before,
.om-card-preview-chip::after {
  content: '';
  position: absolute;
  left: .5rem;
  right: .5rem;
  height: 1px;
  background: rgba(80,56,0,.35);
}

.om-card-preview-chip::before { top: .72rem; }
.om-card-preview-chip::after { top: 1.28rem; }

.om-card-preview-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.8rem;
  padding: .25rem .7rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50rem;
  background: rgba(255,255,255,.14);
  color: #ffffff;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.om-card-preview-number {
  position: relative;
  z-index: 1;
  margin-top: 2.08rem;
  margin-bottom: 2rem;
  color: #ffffff;
  font-size: clamp(1.08rem, 2vw, 1.36rem);
  font-weight: 800;
  letter-spacing: .15em;
  line-height: 1.2;
}

.om-card-preview-bottom small {
  display: block;
  margin-bottom: .2rem;
  color: rgba(255,255,255,.72);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.om-card-preview-bottom strong {
  display: block;
  color: #ffffff;
  font-size: .77rem;
  font-weight: 800;
  letter-spacing: .03em;
}

.om-card-preview-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .75rem;
}

.om-card-preview-meta span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 1.75rem;
  padding: .3rem .6rem;
  border: 1px solid #e6ebfb;
  border-radius: 50rem;
  background: #ffffff;
  color: var(--om-text);
  font-size: .66rem;
  font-weight: 700;
}

.om-payment-preview-note {
  padding: .95rem 1rem;
  border: 1px solid var(--om-border);
  border-radius: 1rem;
  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
  box-shadow: inset 0 0 0 1px rgba(var(--om-primary-rgb), .03);
}

.om-payment-preview-note-success {
  background: linear-gradient(180deg, #ffffff 0%, #f7fcf9 100%);
}

.om-payment-preview-note-head {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
}

.om-payment-preview-note-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: .72rem;
  background: var(--om-primary-soft);
  color: var(--om-primary);
  flex: 0 0 auto;
}

.om-payment-preview-note-icon-success {
  background: var(--om-success-soft);
  color: var(--om-success);
}

.om-payment-preview-note-head strong {
  display: block;
  color: var(--om-title);
  font-size: .8rem;
  font-weight: 800;
}

.om-payment-preview-note-head small {
  display: block;
  margin-top: .15rem;
  color: var(--om-muted);
  font-size: .68rem;
  font-weight: 650;
  line-height: 1.45;
}

.om-payment-preview-list {
  display: grid;
  gap: .55rem;
  margin: .9rem 0 0;
  padding: 0;
  list-style: none;
}

.om-payment-preview-list li {
  display: flex;
  align-items: flex-start;
  gap: .48rem;
  color: var(--om-text);
  font-size: .72rem;
  font-weight: 650;
  line-height: 1.42;
}

.om-payment-preview-list li i {
  margin-top: .08rem;
  color: var(--om-primary);
  flex: 0 0 auto;
}

.om-payment-section-title {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding-top: .3rem;
  margin: 1.05rem 0 1rem;
  border-top: 1px solid var(--om-border);
}

.om-payment-section-title strong {
  display: block;
  color: var(--om-title);
  font-size: .82rem;
  font-weight: 800;
  line-height: 1.25;
}

.om-payment-section-title small {
  display: block;
  margin-top: .12rem;
  color: var(--om-muted);
  font-size: .68rem;
  font-weight: 600;
}

.om-card-fields-disabled {
  opacity: .74;
}

.om-card-number-wrap {
  position: relative;
}

.om-card-number-wrap .om-input {
  padding-right: 6rem;
}

.om-card-brand-pill {
  position: absolute;
  top: 50%;
  right: .6rem;
  display: inline-flex;
  align-items: center;
  min-height: 1.55rem;
  padding: 0 .52rem;
  border: 1px solid #dce5ff;
  border-radius: 50rem;
  background: var(--om-primary-soft);
  color: var(--om-primary-dark);
  font-size: .62rem;
  font-weight: 800;
  transform: translateY(-50%);
}

.om-cvv-wrap {
  position: relative;
}

.om-cvv-wrap input {
  padding-right: 2.4rem;
}

.om-cvv-wrap i {
  position: absolute;
  top: 50%;
  right: .9rem;
  color: var(--om-muted);
  pointer-events: none;
  transform: translateY(-50%);
}

.om-payment-note {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin-top: 1rem;
  padding: .8rem .9rem;
  border: 1px solid #dce5ff;
  border-radius: .82rem;
  background: var(--om-primary-soft);
  color: #4560a8;
  font-size: .75rem;
  font-weight: 650;
  line-height: 1.45;
}

.om-payment-note i {
  margin-top: .08rem;
  color: var(--om-primary);
  font-size: 1rem;
  flex: 0 0 auto;
}
/* =========================================================
   Acción
========================================================= */

.om-payment-action-wrap {
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid var(--om-border);
}

.om-pay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  width: 100%;
  min-height: 3rem;
  border: 1px solid var(--om-black) !important;
  border-radius: .72rem;
  background: var(--om-black) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 20px rgba(17,17,17,.14);
  font-size: .84rem;
  font-weight: 800;
}

.om-pay-btn:hover:not(:disabled),
.om-pay-btn:focus:not(:disabled) {
  border-color: #000 !important;
  background: #000 !important;
  color: #ffffff !important;
  box-shadow: 0 12px 24px rgba(17,17,17,.18);
}

.om-pay-btn:disabled {
  opacity: .68;
  cursor: not-allowed;
  box-shadow: none;
}

.om-action-help {
  display: block;
  margin-top: .55rem;
  color: var(--om-muted);
  font-size: .68rem;
  font-weight: 650;
  line-height: 1.35;
  text-align: center;
}

/* =========================================================
   Alertas
========================================================= */

.om-abonos-alert {
  margin-bottom: 1rem;
  padding: .78rem .9rem;
  border-radius: .82rem;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.45;
}

.om-abonos-alert.om-alert-success {
  border: 1px solid rgba(23,163,91,.18);
  background: rgba(23,163,91,.10);
  color: #17633f;
}

.om-abonos-alert.om-alert-warning {
  border: 1px solid rgba(217,119,6,.20);
  background: rgba(217,119,6,.10);
  color: #854d0e;
}

.om-abonos-alert.om-alert-error {
  border: 1px solid rgba(220,53,69,.18);
  background: rgba(220,53,69,.10);
  color: #991b1b;
}

/* =========================================================
   Resumen
========================================================= */

.om-contract-card > .card-body {
  padding: 1.2rem;
}

.om-contract-empty {
  min-height: 24rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.3rem;
  color: var(--om-muted);
  text-align: center;
  flex-direction: column;
}

.om-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.25rem;
  height: 4.25rem;
  margin-bottom: .95rem;
  border-radius: 1.25rem;
  background: var(--om-primary-soft);
  color: var(--om-primary);
  font-size: 1.8rem;
}

.om-contract-empty h3 {
  margin: 0 0 .35rem;
  color: var(--om-title);
  font-size: 1.05rem;
  font-weight: 900;
}

.om-contract-empty p {
  max-width: 20rem;
  margin: 0;
  color: var(--om-muted);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.45;
}

.om-contract-summary {
  display: grid;
  gap: .95rem;
}

.om-credit-profile,
.om-credit-product {
  display: flex;
  align-items: center;
  gap: .72rem;
  padding: .78rem;
  border: 1px solid #e2e8fa;
  border-radius: .88rem;
  background: #fbfcff;
}

.om-credit-profile > div,
.om-credit-product > div {
  min-width: 0;
}

.om-credit-profile small,
.om-credit-product small {
  display: block;
  overflow: hidden;
  color: var(--om-muted);
  font-size: .67rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.om-credit-profile strong,
.om-credit-product strong {
  display: -webkit-box;
  overflow: hidden;
  margin-top: .15rem;
  color: var(--om-title);
  font-size: .79rem;
  font-weight: 800;
  line-height: 1.28;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.om-summary-rows {
  display: grid;
  border-top: 1px solid var(--om-border);
}

.om-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 2.65rem;
  border-bottom: 1px solid var(--om-border);
}

.om-summary-row span {
  color: var(--om-muted);
  font-size: .69rem;
  font-weight: 700;
}

.om-summary-row strong {
  color: var(--om-title);
  font-size: .72rem;
  font-weight: 800;
  text-align: right;
}

.om-summary-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin-top: .1rem;
  padding: .82rem .85rem;
  border-radius: .85rem;
  background: var(--om-primary-soft);
}

.om-summary-main span {
  color: #4560a8;
  font-size: .72rem;
  font-weight: 800;
}

.om-summary-main strong {
  color: var(--om-primary-dark);
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -.02em;
  text-align: right;
}

.om-contract-note {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  padding: .8rem .85rem;
  border: 1px solid rgba(var(--om-primary-rgb), .10);
  border-radius: .82rem;
  background: var(--om-primary-soft);
  color: #4560a8;
  font-size: .7rem;
  font-weight: 650;
  line-height: 1.42;
}

.om-contract-note i {
  margin-top: .05rem;
  color: var(--om-primary);
  font-size: 1rem;
  flex: 0 0 auto;
}

.om-help-card {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-top: .85rem;
  padding: .7rem .8rem;
  border: 1px solid var(--om-border-strong);
  border-radius: .8rem;
  background: rgba(255,255,255,.72);
  color: var(--om-text);
  font-size: .7rem;
  font-weight: 650;
  line-height: 1.38;
}

.om-help-card i {
  color: var(--om-primary);
  font-size: 1rem;
  flex: 0 0 auto;
}

.om-help-card strong {
  color: var(--om-title);
}

/* =========================================================
   Responsive
========================================================= */

@media (max-width: 1199.98px) {
  .om-abonos-layout {
    grid-template-columns: minmax(0, 1fr) 21rem;
  }
}

@media (max-width: 991.98px) {
  .om-abonos-hero > .card-body {
    align-items: flex-start;
    flex-direction: column;
  }

  .om-abonos-layout {
    grid-template-columns: 1fr;
  }

  .om-abonos-aside {
    position: static;
  }

  .om-contract-card {
    max-width: 44rem;
  }
}

@media (max-width: 575.98px) {
  .om-abonos-page {
    padding-top: .75rem;
  }

  .om-abonos-hero > .card-body,
  .om-card-header,
  .om-abonos-payment-card > .card-body {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .om-abonos-secure {
    width: 100%;
  }

  .om-payment-methods {
    grid-template-columns: 1fr;
  }

  .om-card-header {
    align-items: center;
  }

  .om-card-header p {
    font-size: .78rem;
  }

  .om-card-icon {
    width: 2.45rem;
    height: 2.45rem;
  }

  .om-card-preview {
    min-height: 12.3rem;
    padding: 1rem;
  }

  .om-card-preview-number {
    margin-top: 1.75rem;
    font-size: 1rem;
    letter-spacing: .12em;
  }
.om-summary-row {
    align-items: flex-start;
    flex-direction: column;
    gap: .25rem;
    padding: .6rem 0;
  }

  .om-summary-row strong {
    text-align: left;
  }

  .om-contract-card > .card-body {
    padding: 1rem;
  }
}

@media print {
  .layout-navbar,
  .om-abonos-hero,
  .om-help-card,
  footer {
    display: none !important;
  }

  body {
    background: #ffffff !important;
  }

  .om-abonos-layout {
    display: block;
  }

  .om-abonos-aside {
    margin-top: 1rem;
  }
}


/* =========================================================
   Pago único con tarjeta
========================================================= */

.om-payment-method-single {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 1.15rem 1.4rem .15rem;
  padding: .9rem 1rem;
  border: 1px solid #8aabff;
  border-radius: .95rem;
  background: var(--om-primary-soft);
  box-shadow: inset 0 0 0 1px rgba(var(--om-primary-rgb), .06);
}

.om-payment-method-single .om-method-icon {
  background: var(--om-primary);
  color: #ffffff;
}

.om-payment-method-single .om-method-copy {
  min-width: 0;
}

.om-payment-method-single .om-method-copy strong {
  display: block;
  color: var(--om-title);
  font-size: .84rem;
  font-weight: 800;
}

.om-payment-method-single .om-method-copy small {
  display: block;
  margin-top: .14rem;
  color: #526cae;
  font-size: .69rem;
  font-weight: 650;
  line-height: 1.35;
}

.om-method-status {
  display: inline-flex;
  align-items: center;
  gap: .34rem;
  margin-left: auto;
  color: var(--om-primary-dark);
  font-size: .67rem;
  font-weight: 800;
  white-space: nowrap;
}

.om-method-status i {
  font-size: .9rem;
}

@media (max-width: 575.98px) {
  .om-payment-method-single {
    align-items: flex-start;
    flex-wrap: wrap;
    margin-right: 1rem;
    margin-left: 1rem;
  }

  .om-method-status {
    width: 100%;
    margin-left: 0;
    padding-left: 3.15rem;
  }
}
/* =========================================================
   ARMONÍA VISUAL PAGO TARJETA - ABONOS
   Tarjeta izquierda + formulario derecha en desktop
========================================================= */

.om-payment-panel {
  margin-top: 1.5rem;
}

.om-payment-panel.active {
  display: grid;
  grid-template-columns: 410px minmax(0, 1fr);
  gap: 1.75rem;
  align-items: flex-start;
  padding-top: 1.25rem;
}

.om-payment-preview-grid {
  display: block;
  margin: 0;
  width: 100%;
}

.om-card-preview-shell {
  width: 100%;
  max-width: 410px;
  margin: 0;
}

.om-card-preview {
  width: 100%;
  min-height: 240px;
  border-radius: 22px;
}

.om-card-preview-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .75rem;
}

#camposPagoPrueba {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#camposPagoPrueba .om-payment-section-title {
  margin-top: 0;
  padding-top: 0;
}

#camposPagoPrueba .row.g-3 {
  row-gap: 1rem;
}

.om-payment-note {
  margin-top: 1rem;
}

/* El botón debe ocupar todo abajo, no competir con la tarjeta */
.om-payment-action-wrap {
  margin-top: 1.5rem;
  border-top: 1px solid rgba(93, 106, 148, .14);
  padding-top: 1.25rem;
}

/* Cuando el panel está en grid, el botón queda después del panel */
.om-abonos-payment-card .card-body {
  overflow: visible;
}

/* Responsive: en pantallas medianas se apila bonito */
@media (max-width: 1199.98px) {
  .om-payment-panel.active {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .om-card-preview-shell {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }

  .om-card-preview {
    min-height: 230px;
  }
}

/* Celular */
@media (max-width: 575.98px) {
  .om-payment-panel {
    margin-top: 1rem;
  }

  .om-payment-panel.active {
    gap: 1rem;
  }

  .om-card-preview-shell {
    max-width: 100%;
  }

  .om-card-preview {
    min-height: 205px;
    border-radius: 18px;
  }

  .om-card-preview-meta {
    justify-content: center;
  }
}