/* ══════════════════════════════════════════════════════════════════════════
   Paso "Confirma tu intercambio" (confirmación de asistencia escalonada,
   EXCHANGES_PUSH_CONFIRM_ENABLED). Diseño APROBADO: un paso más del asistente
   de PBC Exchanges (templates/exchanges/landing.html): fondo gris #F4F5F9,
   cabecera "PBC Exchanges", barra de progreso amarilla, tarjetas blancas
   redondeadas con sombra suave, tipografía negra gruesa y botones grandes
   redondeados azul #1266EF. Overlay a pantalla completa sobre la rejilla.
   ══════════════════════════════════════════════════════════════════════════ */
.xc{ position:fixed; inset:0; z-index:12000; background:#F4F5F9; overflow-y:auto;
  -webkit-overflow-scrolling:touch; color:#1c2430; line-height:1.45;
  font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.xc[hidden]{ display:none; }
.xc, .xc *{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
.xc-wrap{ max-width:520px; margin:0 auto; min-height:100%; display:flex;
  flex-direction:column; padding:0 18px 28px; }

/* Cabecera del asistente: marca + cerrar */
.xc-head{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 2px 8px; }
.xc-brand{ font-weight:800; font-size:18px; color:#1266EF; letter-spacing:-.4px; }
.xc-brand small{ font-weight:600; font-size:12px; color:#667085; margin-inline-start:6px; }
.xc .xc-x{ width:34px !important; height:34px; border:none; border-radius:10px; background:#fff;
  color:#667085; font-size:16px; cursor:pointer; box-shadow:0 2px 10px rgba(0,40,90,.07);
  line-height:1; flex:0 0 auto; margin-bottom:0 !important; display:inline-block !important; }

/* Barra de progreso amarilla (mismo dibujo que el asistente de Exchanges) */
.xc-progress{ display:flex; gap:6px; margin:10px 2px 20px; }
.xc-progress span{ flex:1; height:8px; background:#e6e9f0; border-radius:6px; }
.xc-progress span.on{ background:#e8de21; }

.xc-title{ margin:0 0 4px; font-size:26px; font-weight:800; letter-spacing:-.5px; color:#1c2430; }
.xc-sub{ margin:0 0 18px; font-size:15px; font-weight:600; color:#667085; }

/* Tarjetas blancas redondeadas con sombra suave */
.xc-card{ background:#fff; border-radius:18px; box-shadow:0 2px 10px rgba(0,40,90,.07);
  padding:18px; margin-bottom:14px; }

/* Tarjeta resumen: banderas A ↔ B, idiomas, fecha·hora y "Con {nombre}" */
.xc-summary{ text-align:center; }
.xc-flags{ display:flex; align-items:center; justify-content:center; gap:14px; margin:4px 0 10px; }
.xc-flags .xc-flag{ width:44px; height:33px; border-radius:8px; box-shadow:0 2px 6px rgba(0,40,90,.18);
  background-size:cover; display:inline-block; }
.xc-arrows{ font-size:22px; font-weight:800; color:#667085; }
.xc-langs{ font-size:19px; font-weight:800; color:#1c2430; }
.xc-when{ font-size:14px; font-weight:600; color:#667085; margin-top:4px; }
.xc-with{ display:flex; align-items:center; justify-content:center; gap:9px; margin-top:12px;
  font-size:15px; font-weight:700; color:#1c2430; }
.xc-avatar{ width:34px; height:34px; border-radius:50%; background:#e7f0ff; color:#1266EF;
  font-size:15px; font-weight:800; display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 auto; overflow:hidden; }

/* Tarjeta principal: campana + activar notificaciones */
.xc-push{ text-align:center; }
.xc-ico{ width:72px; height:72px; object-fit:contain; display:block; margin:2px auto 8px; }
.xc-h2{ margin:0 0 6px; font-size:19px; font-weight:800; color:#1c2430; }
.xc-p{ margin:0 0 14px; font-size:15px; font-weight:600; color:#667085; }

/* Botones enormes redondeados azules */
.xc .xc-btn{ display:block; width:100% !important; border:none; border-radius:16px; padding:16px;
  font:inherit; font-size:17px; font-weight:800; cursor:pointer; color:#fff; background:#1266EF;
  box-shadow:0 4px 14px rgba(18,102,239,.28); margin-bottom:0 !important; }
.xc .xc-btn:active{ transform:translateY(1px); }
.xc .xc-btn[disabled]{ background:#c3cbd7; color:#fff; box-shadow:none; cursor:default; transform:none; }
.xc .xc-btn.is-done{ background:#12B76A; box-shadow:0 4px 14px rgba(18,183,106,.28); cursor:default; }

.xc-strong{ margin:12px 0 0; font-size:14.5px; font-weight:800; color:#1c2430; }
.xc-err{ display:none; margin:12px 0 0; font-size:13.5px; font-weight:700; color:#c0392b; }
.xc-err.show{ display:block; }

.xc-save-hint{ margin:8px 2px 16px; text-align:center; font-size:13px; font-weight:600; color:#667085; }
.xc-save-wrap{ margin-top:4px; }

/* Tarjeta inferior: reloj, "1 h antes" y el botoncito ilustrativo "Sí, voy" */
.xc-clock{ display:flex; align-items:flex-start; gap:14px; }
.xc-clock .xc-ico{ margin:0; flex:0 0 auto; }
.xc-clock-txt{ flex:1; min-width:0; }
.xc-clock-txt b{ display:block; font-size:13px; font-weight:800; text-transform:uppercase;
  letter-spacing:.04em; color:#1266EF; }
.xc-clock-q{ margin:3px 0 10px; font-size:17px; font-weight:800; color:#1c2430; }
.xc-mini-btn{ display:inline-block; background:#1266EF; color:#fff; font-size:14px; font-weight:800;
  border-radius:12px; padding:9px 18px; box-shadow:0 3px 10px rgba(18,102,239,.28); }
.xc-small{ margin:10px 0 0; font-size:13px; font-weight:600; color:#667085; }