/**
 * Checkout de Pagos (plugin Pagos): columnas del checkout, títulos, campos y selector de métodos de pago. Los usan la
 * página /checkout/{operación} y el componente <x-payments::checkout> que el dueño de la deuda inserta en su pantalla
 * (p. ej. el checkout de una tienda). Lo publica PluginAssetPublisher y llega al <head> del tema por `storefrontStylesheets` solo con Pagos activo.
 */
.checkout-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
}
@media (min-width: 1024px) {
    .checkout-layout {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
        gap: 2rem;
    }
}
@media (min-width: 1024px) {
    .checkout-order-col {
        position: sticky;
        top: 5.5rem;
        border-left: 1px solid rgba(163, 163, 163, 0.45);
        padding-left: 2rem;
    }
}
.checkout-col-title {
    margin: 0 0 1.25rem;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    color: #171717;
}
.checkout-subtitle {
    margin: 2rem 0 0.75rem;
    font-size: 1.0625rem;
    font-weight: 600;
    color: #171717;
}
.checkout-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #171717;
}
.checkout-payment-title {
    margin: 1.5rem 0 0.75rem;
    font-size: 1.0625rem;
    font-weight: 600;
    color: #171717;
}
.checkout-payment-picker { width: 100%; }
.checkout-payment-carousel {
    position: relative;
    margin-inline: -0.25rem;
    padding-inline: 0.25rem;
}
.checkout-payment-carousel__track {
    display: flex;
    gap: 0.625rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0.375rem;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding: 0.25rem 0.375rem;
    scrollbar-width: none;
}
.checkout-payment-carousel__track::-webkit-scrollbar { display: none; }
/* ≤3 métodos (o sin overflow): alinear al inicio, sin flechas ni padding de carril */
.checkout-payment-carousel--compact .checkout-payment-carousel__track {
    justify-content: flex-start;
    overflow-x: visible;
    scroll-snap-type: none;
    padding-inline: 0.25rem;
}
.checkout-payment-carousel--compact .checkout-payment-carousel__arrow {
    display: none !important;
}
/* >3 métodos o overflow real: reservar espacio y mostrar flechas en desktop */
.checkout-payment-carousel--scrollable .checkout-payment-carousel__track {
    justify-content: flex-start;
}
@media (min-width: 1024px) {
    .checkout-payment-carousel--scrollable .checkout-payment-carousel__track {
        padding: 0.25rem 2.75rem;
    }
}
.checkout-payment-carousel__arrow {
    display: none;
    position: absolute;
    top: 50%;
    z-index: 2;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(163, 163, 163, 0.65);
    border-radius: 9999px;
    background: #fff;
    color: #262626;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.2s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.checkout-payment-carousel__arrow:hover {
    border-color: #171717;
    background: #fafafa;
}
.checkout-payment-carousel__arrow--prev { left: 0; }
.checkout-payment-carousel__arrow--next { right: 0; }
@media (min-width: 1024px) {
    .checkout-payment-carousel--scrollable:hover .checkout-payment-carousel__arrow,
    .checkout-payment-carousel--scrollable:focus-within .checkout-payment-carousel__arrow {
        display: flex;
        opacity: 1;
    }
}
/* Skeleton ligero mientras la pasarela monta sus campos alojados */
.checkout-card-skeleton-bar {
    display: block;
    height: 52px;
    width: 100%;
    border-radius: 0.375rem;
    background: linear-gradient(90deg, #ececec 0%, #f7f7f7 45%, #ececec 100%);
    background-size: 200% 100%;
    animation: checkout-card-shimmer 1.15s ease-in-out infinite;
}
.checkout-card-fields--loading [data-payments-gateway-submit] { display: none; }
@keyframes checkout-card-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .checkout-card-skeleton-bar { animation: none; }
}
.checkout-payment-card {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 7.25rem;
    min-height: 6.25rem;
    padding: 0.875rem 0.5rem;
    border: 1px solid rgba(163, 163, 163, 0.55);
    border-radius: 0.875rem;
    background: #fff;
    cursor: pointer;
    text-align: center;
    scroll-snap-align: start;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.checkout-payment-card:hover {
    border-color: #737373;
    background: #fafafa;
}
.checkout-payment-card--selected,
.checkout-payment-card:has(:checked) {
    border-color: #171717;
    outline: 1px solid #171717;
    outline-offset: -1px;
    background: #fafafa;
}
.checkout-payment-card__input {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.checkout-payment-card__icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    background: #f5f5f5;
    flex-shrink: 0;
}
.checkout-payment-card__icon-img {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: contain;
}
.checkout-payment-card__icon-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: #404040;
}
.checkout-payment-card__icon-fallback svg { width: 100%; height: 100%; }
.checkout-payment-card__title {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
    color: #171717;
}
.checkout-payment-detail {
    width: 100%;
    margin: 0.375rem 0 0;
    padding: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #525252;
    white-space: pre-line;
}
.checkout-payment-detail[hidden] { display: none !important; }

/* Página de Pagos y su componente (clases payments-*), independientes del tema comercial. */
.payments-checkout { max-width:1100px; margin:0 auto; gap:32px; color:#172b2a; }
.payments-checkout *, .payments-checkout *::before, .payments-checkout *::after,
.payments-checkout-component *, .payments-checkout-component *::before, .payments-checkout-component *::after { box-sizing:border-box; }
.payments-checkout [hidden], .payments-checkout-component [hidden] { display:none!important; }
.payments-checkout .checkout-col-title { margin-bottom:16px; font-size:21px; }
.payments-checkout .checkout-order-col { position:static; padding:24px; border:1px solid #dce4e3; border-radius:18px; background:#fff; box-shadow:0 8px 28px #122c2408; }
.payments-summary { border:1px solid #dce4e3; border-radius:14px; background:#fff; padding:6px 20px; }
.payments-summary__row { display:flex; justify-content:space-between; gap:20px; padding:13px 0; font-size:14px; border-bottom:1px solid #edf1f0; }
.payments-summary__row:last-child { border:0; font-weight:600; }
.payments-summary__row > :last-child { text-align:right; overflow-wrap:anywhere; }
.payments-adjust { margin-top:18px; padding:16px 18px; border:1px solid #dce4e3; border-radius:14px; background:#f7faf9; display:grid; gap:12px; }
.payments-adjust__title { margin:0; font-size:15px; font-weight:650; color:#172b2a; }
.payments-adjust .payments-field select { width:100%; min-height:44px; border:1px solid #bdcbc6; border-radius:8px; padding:10px 12px; background:#fff; color:#172b2a; font:inherit; font-weight:400; }
.payments-adjust .payments-field select:focus { outline:3px solid #0070ba30; border-color:#0070ba; box-shadow:none; --tw-ring-color:transparent; }
.payments-adjust__option { display:flex; align-items:flex-start; gap:10px; margin:0; padding:12px 14px; border:1px solid #d5e3df; border-radius:12px; background:#fff; cursor:pointer; transition:border-color .15s, background .15s; }
.payments-adjust__option:hover,
.payments-adjust__option.is-checked,
.payments-adjust__option:has(input:checked) {
  border-color:#0f766e;
  background:#edf8f5;
}
.payments-adjust__option input { margin-top:4px; flex:none; accent-color:#087c70; }
.payments-adjust__option-body { display:flex; flex-direction:column; gap:4px; min-width:0; font-size:13px; line-height:1.45; color:#365c54; }
.payments-adjust__option strong { color:#172b2a; font-weight:650; }
.payments-adjust__option em { font-style:normal; color:#087c70; font-weight:600; }
.payments-adjust__option small { color:#58716c; font-size:12px; line-height:1.45; }
.payments-adjust__option-badge {
  align-self:flex-start; display:inline-flex; align-items:center; justify-content:center;
  margin-bottom:2px; padding:3px 9px; border-radius:6px;
  background:#0f766e; color:#fff; font-size:11px; font-weight:700; letter-spacing:.02em;
  line-height:1.2; white-space:nowrap;
}
.payments-adjust__option-badge--pulse {
  box-shadow:0 0 0 0 rgba(15,118,110,.45);
  animation: payments-setup-badge-pulse 2.2s ease-in-out infinite;
}
.payments-adjust__option.is-checked .payments-adjust__option-badge--pulse,
.payments-adjust__option:has(input:checked) .payments-adjust__option-badge--pulse {
  animation:none;
}
@keyframes payments-setup-badge-pulse {
  0%, 100% { box-shadow:0 0 0 0 rgba(15,118,110,.4); transform:scale(1); }
  50% { box-shadow:0 0 0 5px rgba(15,118,110,.0); transform:scale(1.04); }
}
@media (prefers-reduced-motion:reduce) {
  .payments-adjust__option-badge--pulse { animation:none; }
}
.payments-total-breakdown p { margin:0; }
.payments-adjust__note { margin:0; font-size:13px; line-height:1.5; color:#365c54; }
.payments-button--secondary { background:#234c41; }
.payments-button--secondary:hover { background:#1a3b33; }
.payments-security { display:flex; gap:10px; margin-top:20px; color:#58716c; font-size:13px; line-height:1.6; }
.payments-security svg { width:18px; height:18px; flex:none; margin-top:2px; }
.payments-checkout .checkout-payment-title { margin:24px 0 12px; font-size:15px; }
.payments-checkout-component .checkout-payment-carousel { margin:0; padding:0; }
.payments-checkout-component .checkout-payment-carousel__track { display:flex; flex-wrap:wrap; overflow:visible; gap:8px; padding:2px; }
.payments-checkout-component .checkout-payment-carousel__arrow { display:none!important; }
.payments-checkout-component .checkout-payment-card { position:relative; display:flex; flex-direction:row; flex:1 1 120px; align-items:center; justify-content:flex-start; gap:9px; width:auto; min-width:0; max-width:none; min-height:54px; height:auto; margin:0; padding:11px 12px; border:1px solid #d8e1df; border-radius:10px; background:#fff; box-shadow:none; cursor:pointer; transition:border-color .15s, background .15s; }
.payments-checkout-component .checkout-payment-card:hover { border-color:#6d8d85; background:#f7faf9; }
.payments-checkout-component .checkout-payment-card--selected { border-color:#007c70; background:#edf8f5; box-shadow:inset 0 0 0 1px #007c70; }
.payments-checkout-component .checkout-payment-card:focus-within { outline:3px solid #0070ba55; outline-offset:2px; }
.payments-checkout-component .checkout-payment-card__icon-wrap { width:26px; height:26px; min-width:26px; padding:0; background:transparent; border-radius:0; }
.payments-checkout-component .checkout-payment-card__icon-wrap svg,.payments-checkout-component .checkout-payment-card__icon-img { width:25px; height:25px; object-fit:contain; color:#365c54; }
.payments-checkout-component .checkout-payment-card__title { margin:0; font-size:13px; line-height:1.3; text-align:left; }
.payments-checkout-component .checkout-payment-detail { margin:12px 0; font-size:13px; color:#586b67; line-height:1.6; }
.payments-checkout-component [data-payments-message] { font-size:13px; line-height:1.6; color:#586b67; }
/* Contenedor del panel que aporta cada pasarela (PaymentGatewayCheckoutUi); .payments-card-panel/-heading/-row y el
   skeleton son piezas que cualquier pasarela de tarjeta puede usar. */
.payments-gateway { margin:18px 0 0; display:grid; gap:14px; }
.payments-gateway[hidden] { display:none; }
.payments-gateway__currency { margin:0; font-size:13px; line-height:1.6; color:#586b67; }
.payments-gateway .payments-card-panel { margin-top:0; }
.payments-card-panel,.payments-manual { margin:18px 0 0; padding:0; border:0; background:transparent; display:grid; gap:14px; }
.payments-card-panel p,.payments-manual p { margin:0; font-size:13px; line-height:1.6; color:#586b67; overflow-wrap:anywhere; }
.payments-manual h4 { margin:0; font-size:15px; }
.payments-card-heading { display:flex; align-items:center; gap:8px; font-size:15px; }
.payments-card-heading svg { width:22px; height:22px; color:#0070ba; }
.payments-field { display:grid; gap:7px; font-size:13px; font-weight:600; min-width:0; }
.payments-field span,.payments-field small { font-weight:400; }
.payments-field small { color:#687974; line-height:1.5; }
.payments-field input { width:100%; min-width:0; min-height:44px; border:1px solid #bdcbc6; border-radius:8px; padding:10px 12px; background:#fff; color:#172b2a; font:inherit; font-weight:400; }
.payments-field input:focus { outline:3px solid #0070ba30; border-color:#0070ba; box-shadow:none; --tw-ring-color:transparent; }
.payments-field input[type=file] { padding:8px; background:#f7faf9; font-size:12px; }
.payments-field input::file-selector-button { border:0; border-radius:6px; background:#e2eeea; padding:8px 10px; margin-right:8px; color:#234c41; cursor:pointer; font-weight:600; }
.payments-card-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; min-width:0; }
/* Los campos de tarjeta de una pasarela son iframes (300 px de ancho propio): con 1fr no se encogían y el segundo se
   cortaba en una columna angosta (checkout de la Central a 1024 px). Toman el ancho de su campo. */
.payments-card-panel [data-card-field] { min-width:0; max-width:100%; }
.payments-card-panel [data-card-field] iframe { width:100%; max-width:100%; }
.payments-button { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:46px; margin-top:4px; padding:12px 16px; border:0; border-radius:9px; background:#087c70; color:#fff; font:inherit; font-size:14px; font-weight:600; line-height:1.3; cursor:pointer; }
.payments-button svg { width:18px; height:18px; flex:none; }
.payments-button:hover { background:#076457; }
.payments-button:focus-visible { outline:3px solid #0070ba66; outline-offset:3px; }
.payments-button:disabled { opacity:.55; cursor:wait; }
.payments-manual img { display:block; margin:auto; background:#fff; padding:10px; border:1px solid #e2e8e6; border-radius:12px; }
.payments-notice { padding:14px 16px; margin:14px 0; border:1px solid #b8d7cb; border-radius:10px; background:#f0f8f4; font-size:14px; line-height:1.6; }
.payments-notice p { margin:4px 0; }
.payments-notice--error { background:#fff5f5; border-color:#efc9c9; color:#9c2828; }
@media(min-width:1024px) { .payments-checkout { grid-template-columns:minmax(0,1fr) minmax(350px,430px); } }
@media(max-width:600px) { .payments-checkout { gap:24px; } .payments-checkout .checkout-order-col { padding:18px; border-radius:14px; } .payments-summary { padding:4px 14px; } .payments-summary__row { gap:12px; } }
@media(prefers-reduced-motion:reduce) { .payments-checkout * { transition:none!important; scroll-behavior:auto!important; } }
/* Varias cuentas (QR o transferencia) y código de pago para la glosa (2026-10-19). */
.payments-manual [hidden] { display:none!important; }
.payments-accounts-picker { margin:0; padding:0; border:0; display:grid; gap:8px; min-width:0; }
.payments-accounts-picker__legend { margin:0 0 6px; padding:0; font-size:13px; font-weight:600; color:#172b2a; }
.payments-accounts-picker__option { display:flex; align-items:center; gap:10px; min-height:44px; padding:10px 12px; border:1px solid #bdcbc6; border-radius:8px; background:#fff; font-size:13px; color:#172b2a; cursor:pointer; }
.payments-accounts-picker__option:has(input:checked) { border-color:#087c70; box-shadow:0 0 0 1px #087c70; }
.payments-accounts-picker__option input { width:18px; height:18px; flex:none; accent-color:#087c70; }
.payments-accounts-picker__option small { color:#687974; }
.payments-account-detail { display:grid; gap:10px; min-width:0; }
.payments-code-box { display:grid; gap:6px; padding:12px 14px; border:1px dashed #9fbdb3; border-radius:10px; background:#f7faf9; }
.payments-manual .payments-code-box__label { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:#586b67; }
.payments-manual .payments-code-box__row { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.payments-code-box__code { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:20px; font-weight:700; letter-spacing:.08em; color:#172b2a; user-select:all; overflow-wrap:anywhere; }
.payments-button.payments-code-box__copy { width:auto; min-height:36px; margin:0; padding:6px 12px; font-size:13px; }
.payments-manual .payments-code-box__hint { font-size:13px; color:#172b2a; }