/**
 * Checkout — Clases migradas desde los `style=` estáticos de la vista.
 * Regla aplicada: solo se migra lo decorativo/estático. Las propiedades de ESTADO
 * controladas por JS (`display` toggled, `width:0%` de barras de progreso) se
 * conservan inline porque terminos-modal.js / cupones-wallet.js / checkout.min.js
 * leen y escriben `element.style.display`/`width`.
 * Se carga DESPUÉS de checkout-tech/blanc/modal → gana la cascada sin conflictos.
 */

/* ── Región superior (alertas, datos, mapa, pagos) ── */
.cko-err-alert        { margin: 20px 0; border-radius: 15px; border-left: 5px solid #dc3545; }
.cko-perfil-loaded    { color: #28a745; font-size: 0.75rem; font-weight: normal; margin-left: 10px; }
.cko-hint-warn        { color: #f39c12; margin-top: 5px; }
.cko-hint-ok          { color: #28a745; margin-top: 5px; font-size: 12px; }
.cko-map-canvas       { cursor: crosshair; }
.cko-grad-green       { background: linear-gradient(135deg, #28a745, #20c997); }
.cko-pdf-sel          { margin-top: 10px; font-weight: 600; color: #333; }
.cko-pdf-fname        { font-size: 0.9rem; color: #666; }
.cko-resize-v         { resize: vertical; }

/* ── Términos (checkbox + nota) ── */
.cko-check-row-start  { display: flex; align-items: flex-start; gap: 0.8rem; padding-left: 0; }
.cko-check-row        { display: flex; align-items: center; gap: 0.8rem; padding-left: 0; }
.cko-check-input      { width: 20px; height: 20px; border-radius: 4px; margin-top: 2px; position: relative; z-index: 10; cursor: pointer; }
.cko-check-input-2    { width: 20px; height: 20px; border-radius: 4px; margin: 0; position: relative; z-index: 10; }
.cko-check-label      { font-weight: 500; color: var(--checkout-text); margin: 0; line-height: 1.6; cursor: pointer; }
.cko-check-label-2    { font-weight: 500; color: var(--checkout-text); margin: 0; }
.cko-i-danger         { color: #dc3545; }
.cko-i-success        { color: #28a745; }
.cko-tc-link          { color: var(--checkout-accent); font-weight: 600; border-bottom: 2px solid var(--checkout-accent); }
.cko-tc-link-u        { color: var(--checkout-accent); font-weight: 600; text-decoration: underline; cursor: pointer; }
.cko-tc-note          { background: linear-gradient(135deg, rgba(23, 162, 184, 0.1), rgba(23, 162, 184, 0.05)); border: 2px solid #17a2b8; border-radius: 12px; padding: 12px 16px; }
.cko-tc-note-text     { color: #0c5460; font-weight: 600; }

/* ── Resumen / carrito vacío ── */
.cko-cart-empty-ico   { color: var(--checkout-accent); opacity: 0.5; }
.cko-text-main        { color: var(--checkout-text); }
.cko-text-sec         { color: var(--checkout-text-secondary); }
.cko-empty-btn        { display: inline-flex; width: auto; padding: 0.75rem 1.5rem; font-size: 0.875rem; }

/* ── Aviso multipaquete ── */
.cko-multipack        { margin-bottom: 0.75rem; padding: 0.85rem 1rem; background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(29, 78, 216, 0.08)); border: 1.5px solid rgba(59, 130, 246, 0.25); border-radius: 12px; animation: fadeIn 0.4s ease; }
.cko-multipack-head   { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.cko-multipack-ico    { color: #3b82f6; font-size: 1.1rem; }
.cko-multipack-title  { font-weight: 700; color: var(--checkout-text, #0f172a); font-size: 0.9rem; }
.cko-multipack-desc   { color: var(--checkout-text-secondary, #64748b); font-size: 0.8rem; margin: 0 0 0.5rem 0; }
.cko-multipack-list   { display: flex; flex-direction: column; gap: 0.25rem; }

/* ── Wallet cashback ── */
.cko-cashback-wrap    { margin-bottom: .75rem; background: linear-gradient(135deg, rgba(245,158,11,.08), rgba(251,191,36,.04)); border: 1px solid rgba(245,158,11,.3); border-radius: 10px; padding: .75rem 1rem; }
.cko-cashback-head    { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.cko-cashback-label   { color: #fbbf24; font-size: .85rem; font-weight: 700; }
.cko-cashback-bal     { color: #34d399; font-size: 1rem; font-weight: 800; }
.cko-cashback-row     { align-items: center; gap: .5rem; flex-wrap: wrap; }
.cko-cashback-usar    { color: #94a3b8; font-size: .8rem; }
.cko-cashback-inputbox{ display: flex; align-items: center; background: #0c1322; border: 1px solid rgba(255,255,255,.1); border-radius: 7px; overflow: hidden; }
.cko-cashback-sol     { padding: 0 .5rem; color: #94a3b8; font-size: .85rem; }
.cko-cashback-input   { width: 80px; padding: .45rem .3rem; background: transparent; border: 0; color: #e2e8f0; font-size: .9rem; font-weight: 600; }
.cko-cashback-btn     { padding: .45rem 1.1rem; background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; border: 0; border-radius: 7px; font-size: .82rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.cko-cashback-nocanje { color: #94a3b8; font-size: .78rem; margin-top: .35rem; }

/* ── Wallet cupones ── */
.cko-cupon-wrap       { margin-bottom: .75rem; }
.cko-cupon-wrap-title { font-size: .8rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 1px; margin-bottom: .4rem; }
.cko-cupon-list       { display: flex; flex-direction: column; gap: .4rem; }
.cko-cupon-applied-wrap { margin-bottom: .75rem; }
.cko-cupon-input-row  { display: flex; gap: .4rem; }
.cko-cupon-input      { flex: 1; padding: .55rem .75rem; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: #0c1322; color: #e2e8f0; text-transform: uppercase; font-family: monospace; }
.cko-cupon-btn        { padding: .55rem 1.1rem; background: #3b82f6; color: #fff; border: 0; border-radius: 8px; font-weight: 600; cursor: pointer; }
.cko-cupon-slots      { margin-top: .4rem; font-size: .75rem; color: #94a3b8; }

/* ── Líneas de totales ── */
.cko-i-blue           { color: #60a5fa; }
.cko-desc-label       { color: #34d399; }
.cko-desc-val         { color: #34d399; font-weight: 700; }
.cko-i-accent         { color: var(--checkout-accent); }
.cko-text-ok          { color: var(--checkout-success); }
.cko-total-grad       { background: linear-gradient(135deg, var(--checkout-accent), var(--checkout-purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 1.5rem; font-weight: 800; }
.cko-pos-rel          { position: relative; }

/* ── Políticas / garantías ── */
.cko-garantias-grid   { display: grid; gap: 0.75rem; }
.cko-policy-link      { color: var(--checkout-accent); text-decoration: none; font-weight: 600; font-size: 0.9rem; margin-top: 1rem; display: inline-flex; align-items: center; gap: 0.5rem; }
.cko-fs-08            { font-size: 0.8rem; }
.cko-fs-09            { font-size: 0.9rem; }

/* ── Modal de Términos (visor PDF) ── */
.cko-tcm-overlay      { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1055; background: rgba(0,0,0,0.7); }
.cko-tcm-container    { width: 100%; height: 100%; display: flex; flex-direction: column; background: #0f172a; overflow: hidden; }
.cko-tcm-header       { background: linear-gradient(135deg, #0f172a, #1e293b); border-bottom: 2px solid #3b82f6; padding: 0.625rem 1rem; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.cko-tcm-header-l     { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; }
.cko-tcm-header-ico   { color: #3b82f6; font-size: 0.9rem; flex-shrink: 0; }
.cko-tcm-title        { color: #f1f5f9; font-weight: 700; font-size: 0.95rem; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cko-tcm-header-r     { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.cko-tcm-download     { display: inline-flex; align-items: center; gap: 0.4rem; background: #3b82f6; color: #fff; border: 1px solid #3b82f6; font-size: 0.78rem; font-weight: 600; line-height: 1; padding: 0 0.7rem; height: 36px; border-radius: 6px; text-decoration: none; white-space: nowrap; transition: background 0.15s ease; }
.cko-tcm-download:hover { background: #2563eb; border-color: #2563eb; color: #fff; }
.cko-tcm-download i   { font-size: 0.85rem; }
.cko-tcm-close        { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: #94a3b8; width: 36px; height: 36px; border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
@media (max-width: 480px) { .cko-tcm-download { font-size: 0.72rem; padding: 0 0.55rem; } }
.cko-tcm-body         { padding: 0; position: relative; background: #f8f9fa; display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.cko-tcm-progress     { background: #fff; padding: 8px 14px; border-bottom: 1px solid #dee2e6; flex-shrink: 0; }
.cko-tcm-progress-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.cko-tcm-progress-lbl { color: #6c757d; font-weight: 600; font-size: 0.72rem; }
.cko-tcm-progress-pct { color: #2563eb; font-weight: 700; font-size: 0.8rem; }
.cko-tcm-progress-track { background: #e9ecef; border-radius: 10px; height: 6px; overflow: hidden; }
.cko-tcm-progress-fill { background: linear-gradient(90deg, #3b82f6, #1d4ed8); height: 100%; transition: width 0.3s ease; }
.cko-tcm-scroll       { flex: 1; overflow-y: auto; overflow-x: hidden; background: white; position: relative; -webkit-overflow-scrolling: touch; min-height: 0; }
.cko-tcm-loading      { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 10; }
.cko-mb-15            { margin-bottom: 15px; }
.cko-spin-ico         { font-size: 3rem; color: #3b82f6; }
.cko-tcm-loading-txt  { color: #6c757d; font-weight: 600; margin: 0; }
.cko-tcm-error        { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 10; padding: 20px; max-width: 400px; }
.cko-err-ico          { font-size: 3rem; color: #dc3545; }
.cko-err-title        { color: #2C3E50; margin-bottom: 15px; }
.cko-err-desc         { color: #6c757d; margin-bottom: 20px; }
.cko-btn-grad-blue    { background: linear-gradient(135deg, #3b82f6, #2563eb); border: 2px solid #3b82f6; color: #ffffff; font-weight: 600; padding: 12px 24px; border-radius: 10px; text-decoration: none; display: inline-block; }
.cko-btn-retry        { padding: 10px 20px; border-radius: 8px; }
.cko-tcm-iframe       { width: 100%; height: 3000px; border: none; background: white; overflow: hidden; pointer-events: none; }
.cko-tcm-iframe-mobile{ width: 100%; height: 3000px; border: none; background: white; }
.cko-tcm-pdfjs        { width: 100%; background: #525659; }
/* Altura la fija el JS (= alto total del PDF) para que scrollee el contenedor externo.
   pointer-events:none deja que la rueda del mouse llegue al contenedor (visor no interactivo).
   max-width limita el ancho a tamaño de página legible (centrado), si no se ve gigante. */
.cko-tcm-pdf-iframe   { width: 100%; max-width: 820px; margin: 0 auto; height: 3000px; border: none; background: #525659; display: block; pointer-events: none; }
.cko-tcm-fallback     { padding: 30px; text-align: center; }
.cko-tcm-fallback-box { background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(29, 78, 216, 0.1)); border: 2px solid #3b82f6; border-radius: 16px; padding: 30px; max-width: 400px; margin: 0 auto; }
.cko-fallback-ico     { font-size: 4rem; color: #3b82f6; margin-bottom: 20px; }
.cko-fallback-title   { color: #2C3E50; margin-bottom: 15px; font-weight: 700; }
.cko-fallback-desc    { color: #6c757d; margin-bottom: 25px; font-size: 0.95rem; }
.cko-btn-grad-blue-lg { background: linear-gradient(135deg, #3b82f6, #2563eb); border: none; color: #ffffff; font-weight: 700; padding: 15px 35px; border-radius: 12px; text-decoration: none; display: inline-block; box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3); }
.cko-fallback-note    { color: #28a745; margin-top: 20px; font-size: 0.85rem; font-weight: 600; }
.cko-btn-retry-2      { padding: 10px 25px; border-radius: 10px; }
.cko-tcm-img          { width: 100%; height: auto; }
.cko-tcm-unsupported  { padding: 40px; text-align: center; }
.cko-err-ico-mb       { font-size: 3rem; color: #dc3545; margin-bottom: 20px; }
.cko-tcm-scrollind    { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #2563eb, #1d4ed8); color: white; padding: 12px 24px; border-radius: 30px; font-weight: 700; font-size: 15px; box-shadow: 0 6px 20px rgba(37,99,235,0.5); animation: bounce 2s infinite; z-index: 10; cursor: pointer; }
.cko-tcm-footer       { background: #fff; border-top: 2px solid #3b82f6; padding: 0.625rem 1rem; padding-bottom: max(0.625rem, env(safe-area-inset-bottom, 0.625rem)); flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 0.5rem; }
.cko-tcm-foot-wait    { align-items: center; gap: 0.5rem; width: 100%; justify-content: center; }
.cko-foot-wait-ico    { color: #94a3b8; font-size: 0.85rem; }
.cko-foot-wait-txt    { color: #64748b; font-weight: 600; font-size: 0.78rem; }
.cko-tcm-foot-ready   { align-items: center; justify-content: space-between; width: 100%; gap: 0.5rem; flex-wrap: nowrap; }
.cko-foot-ready-l     { display: flex; align-items: center; gap: 0.375rem; flex: 1; min-width: 0; }
.cko-foot-ready-ico   { color: #10b981; font-size: 0.85rem; flex-shrink: 0; }
.cko-foot-ready-txt   { color: #065f46; font-weight: 700; font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cko-foot-ready-btns  { display: flex; gap: 0.375rem; flex-shrink: 0; }
.cko-tcm-cancel       { background: transparent; border: 1px solid #cbd5e1; color: #475569; padding: 0.4rem 0.75rem; font-size: 0.8rem; font-weight: 600; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.cko-tcm-accept       { background: linear-gradient(135deg, #10b981, #059669); color: white; padding: 0.4rem 1rem; font-size: 0.8rem; font-weight: 700; border-radius: 7px; border: none; cursor: pointer; white-space: nowrap; box-shadow: 0 2px 8px rgba(16,185,129,0.35); }
.cko-tcm-accept:disabled { background: #cbd5e1; color: #f1f5f9; cursor: not-allowed; box-shadow: none; }
.cko-tcm-confirm      { cursor: pointer; }
.cko-tcm-confirm .cko-foot-ready-txt { color: #1e293b; white-space: normal; }
.cko-tcm-confirm-chk  { width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; accent-color: #10b981; margin: 0; }

/* Email solo-lectura (proviene de la cuenta del usuario; se edita desde el perfil) */
.cko-input-readonly        { background: rgba(148,163,184,0.12) !important; cursor: not-allowed; }
.cko-input-readonly:focus  { box-shadow: none !important; }
.cko-email-lock            { font-size: 0.72em; margin-left: 0.35rem; color: #94a3b8; }
.cko-email-nota            { display: block; margin-top: 0.35rem; font-size: 0.78rem; color: #94a3b8; }
.cko-email-nota a          { color: #3b82f6; text-decoration: underline; }