/* Estilos del checkout — extraídos del inline para poder aplicar la CSP
   sin 'unsafe-inline' en scripts (los atributos style= siguen permitidos
   vía style-src 'unsafe-inline': inyectar estilos no ejecuta código). */
/* ── Base (diseño v2: Plus Jakarta Sans, tinta #16143c sobre #f6f5fb) ── */
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html, body { min-height: 100%; }
    body { font-family: 'Plus Jakarta Sans', -apple-system, sans-serif; color: #16143c;
           background: radial-gradient(1100px 480px at 50% -140px, #e9e7f5 0%, rgba(246,245,251,0) 60%) #f6f5fb;
           -webkit-font-smoothing: antialiased; }
    input, select, button { font-family: inherit; }
    input:focus { outline: none; border-color: #16143c !important; box-shadow: 0 0 0 4px rgba(22,20,60,0.12); }
    input::placeholder { color: #9a98b5; font-weight: 400; }
    @keyframes spin { to { transform: rotate(360deg); } }
    @keyframes dash { to { stroke-dashoffset: 0; } }
    @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    @keyframes pulseDot { 0%, 100% { transform: scale(0.85); opacity: 0.6; } 50% { transform: scale(1); opacity: 1; } }
    /* Candado que se cierra: arco levantado (abierto) → cae con rebote → "clic" */
    @keyframes lockDrop { from { transform: translateY(-3px); } to { transform: translateY(0); } }
    @keyframes lockClick { 0% { transform: scale(1); } 45% { transform: scale(1.16); } 100% { transform: scale(1); } }
    .lock-anim { overflow: visible; animation: lockClick 0.4s ease 1.55s both; }
    .lock-anim .lock-shackle { animation: lockDrop 0.65s cubic-bezier(0.34,1.56,0.64,1) 0.9s both; }
    @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }

    /* ── Componentes compartidos (valores 1:1 del diseño) ── */
    .wrap { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; align-items: center; padding: 30px 20px 48px; min-height: 100dvh; }
    .card { background: #fff; border: 1px solid #e8e6f2; border-radius: 22px; padding: 32px 30px;
            box-shadow: 0 12px 34px rgba(35,28,105,0.09); animation: fadeUp 0.5s cubic-bezier(0.22,1,0.36,1) 0.06s both; }
    .navpill { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,0.75);
               backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(232,230,242,0.9);
               border-radius: 9999px; padding: 9px 16px; font-size: 12.5px; font-weight: 700; color: #4b4968;
               cursor: pointer; box-shadow: 0 6px 18px rgba(35,28,105,0.07); }
    .navpill:hover { color: #16143c; border-color: #cfcde4; }
    .cta { width: 100%; margin-top: 22px; padding: 15px 16px; background: #16143c; color: #fff; border: 0;
           border-radius: 9999px; font-size: 15.5px; font-weight: 700; cursor: pointer;
           box-shadow: 0 10px 26px rgba(22,20,60,0.26); transition: background 0.15s, transform 0.12s; font-feature-settings: 'tnum'; }
    .cta:hover { background: #0b0a26; }
    .cta:active { background: #0b0a26; transform: scale(0.99); }
    .in { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1.5px solid #e8e6f2; border-radius: 12px;
          background: #fbfbfe; font-size: 15px; font-weight: 500; color: #16143c;
          transition: border-color 0.15s, box-shadow 0.15s; font-feature-settings: 'tnum'; }
    .lbl { display: block; font-size: 13px; font-weight: 600; color: #4b4968; margin-bottom: 6px; }
    /* Select con el mismo look de los inputs (.in) + chevron propio del checkout */
    select.in { appearance: none; -webkit-appearance: none; cursor: pointer; font-family: inherit;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237d7b93' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
    /* Placeholder gris: el selector no muestra una elección todavía. Dos casos:
       en 'form', mientras no se sabe qué cuotas admite la tarjeta; y en la etapa
       de confirmación, cuando la cuota elegida no está disponible y se obliga a
       re-elegir ("Seleccione una opción") */
    select.in.placeholder { color: #a8a6c0; }
    /* Bloqueados: el selector de cuotas desde la carga hasta que la consulta
       responde por ESA tarjeta, y luego los campos + el selector desde que se
       presiona Pagar (la elección queda fija durante el 3DS); Pagar, hasta
       completar los datos */
    .in:disabled { opacity: 0.55; cursor: not-allowed; }
    .cta:disabled { opacity: 0.4; cursor: not-allowed; }
    /* Campos PCI en iframes de Basis Theory v3: el wrapper replica el look de .in
       (mismo alto, 46px) y el interior lo estila el tema de construirTema. El SDK
       fija él mismo la altura de su iframe (48px en el número, que dibuja su
       propio ícono de marca; 100% en vencimiento/CVC), así que el contenedor NO
       le impone alto ni padding vertical: lo centra como flex y recorta el
       sobrante. Antes (height 49px + padding 12px) el iframe desbordaba 26px
       por abajo y el texto quedaba descentrado. */
    .bt-field { box-sizing: border-box; height: 46px; padding: 0 14px; display: flex; align-items: center;
                overflow: hidden; border: 1.5px solid #e8e6f2; border-radius: 12px; background: #fbfbfe;
                transition: border-color 0.15s, box-shadow 0.15s; }
    .bt-field.focus { border-color: #16143c; box-shadow: 0 0 0 4px rgba(22,20,60,0.12); }
    .bt-field.disabled { opacity: 0.55; }
    .bt-field iframe { display: block; width: 100%; flex: none; border: 0; }
    .divisor { display: flex; align-items: center; gap: 14px; margin: 20px 0 16px; }
    .divisor .line { flex: 1; height: 1px; background: #e8e6f2; }
    .divisor span { font-size: 12px; font-weight: 600; color: #a8a6c0; }
    .ghostlink { background: transparent; border: 0; padding: 6px 2px; font-size: 12px; font-weight: 600; color: #a8a6c0; cursor: pointer; }
    .ghostlink:hover { color: #16143c; }
    .banner { display: none; align-items: center; gap: 9px; background: #fdeceb; color: #d92d20; border-radius: 12px;
              padding: 12px 14px; font-size: 13px; font-weight: 600; margin-top: 16px; text-align: left; }
    .banner.visible { display: flex; }
    .logpanel { display: none; background: #16143c; border-radius: 14px; padding: 16px; margin-top: 12px;
                font-family: ui-monospace, monospace; font-size: 11.5px; line-height: 1.55; max-height: 220px;
                overflow-y: auto; color: #e8e6f2; text-align: left; }
    .logpanel.open { display: block; }
    .trustchip { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #e8e6f2;
                 border-radius: 9999px; padding: 6px 13px; font-size: 11px; font-weight: 700; color: #4b4968; }
    .escenario { display: none; width: 100%; }
    .escenario.active { display: block; }
    /* Botón Apple Pay oficial estilizado como el diseño */
    apple-pay-button { --apple-pay-button-width: 100%; --apple-pay-button-height: 52px;
                       font-size: 16px;
                       --apple-pay-button-border-radius: 9999px; display: block; }
    #applePaySlotC apple-pay-button { --apple-pay-button-height: 56px; }
    .resbtn-primary { padding: 13px 26px; background: #16143c; color: #fff; border: 0; border-radius: 9999px;
                      font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 8px 20px rgba(22,20,60,0.24); }
    .resbtn-primary:hover { background: #0b0a26; }
    .resbtn-secondary { padding: 13px 26px; background: #fff; color: #16143c; border: 1.5px solid #d6d4e6;
                        border-radius: 9999px; font-size: 14px; font-weight: 700; cursor: pointer; }
    .resbtn-secondary:hover { border-color: #16143c; }
    .modalbtn { padding: 9px 18px; border-radius: 9999px; font-size: 13px; font-weight: 700; cursor: pointer; }