/* ══════════════════════════════════════════════════════════════════════════
   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; }
/* Ocultar de verdad (Guille 21/08/2026): al pasar al paso 4 el JS pone hidden
   a las tarjetas del paso 3, pero .xc-clock declara display:flex y ganaba al
   [hidden] del navegador; la tarjeta del reloj seguia saliendo debajo del
   "You're in!". */
.xc [hidden]{ display:none !important; }
.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; }
/* Se llama "xc-face" y NO "xc-avatar" a proposito (Guille 21/08/2026): una
   regla global de mobile-responsive.css estira a lo ancho cualquier clase que
   lleve "avatar" o "image" en el nombre (`[class*="avatar"]{ width:100%
   !important }` en <=768px). Con el nombre viejo la bolita salia como un ovalo
   de punta a punta y empujaba "With {nombre}" fuera de la tarjeta. Mismo
   motivo por el que las tarjetas de tandems.css usan "photo". */
.xc-face{ width:34px !important; height:34px !important; 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; }
/* El nombre se encoge y parte por palabras antes que salirse de la tarjeta. */
.xc-with > span:last-child{ min-width:0; overflow-wrap:anywhere; }

/* Tarjeta de nivel de fiabilidad (Guille 21/08/2026): misma info que la
   cabecera de "My exchanges" del dashboard, condensada para este paso. Pill
   de color por nivel + rayitas + frase; reutiliza el esquema ámbar/morado/
   teal/azul del dashboard. Solo se pinta si exchange_tier existe. */
.xc-streak{ text-align:center; }
.xc-streak-pill{ display:inline-flex; align-items:center; padding:3px 10px;
  border-radius:999px; font-size:11.5px; font-weight:800; margin-bottom:10px; }
.xc-streak-pill.is-member{ background:#fef3c7; color:#92400e; }
.xc-streak-pill.is-veteran{ background:#f3e8ff; color:#6b21a8; }
.xc-streak-pill.is-reliable{ background:#ccfbf1; color:#115e59; }
.xc-streak-pill.is-new{ background:#dbeafe; color:#1e40af; }
.xc-streak-bars{ display:flex; align-items:center; justify-content:center; gap:5px; margin-bottom:10px; }
.xc-streak-bar{ height:6px; width:22px; border-radius:6px; background:#e6e9f0; }
.xc-streak-bar.on.is-member{ background:#f59e0b; }
.xc-streak-bar.on.is-veteran{ background:#a855f7; }
.xc-streak-bar.on.is-reliable{ background:#14b8a6; }
.xc-streak-txt{ margin:0; font-size:14px; font-weight:700; color:#1c2430; }

/* Tarjeta principal: campana + activar notificaciones */
.xc-push{ text-align:center; }
/* !important A PROPOSITO (Guille 21/08/2026): viewport-fix.css fuerza
   `img{ width:auto !important; height:auto !important }` en <=768px, asi que la
   campana y el reloj (PNG de 256x256) salian a tamano natural: se comian la
   tarjeta y dejaban el texto del reloj en una columna de dos letras
   ("1 H BEFO RE"). Mismo caso que .medal-mini-img en tandem-schedule.html. */
.xc-ico{ width:72px !important; height:72px !important; 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; }

/* "Ahora no" del paso suelto de avisos: salida clara pero secundaria, para que
   nadie se sienta atrapado con la plaza ya guardada (Guille 21/08/2026). */
.xc .xc-later{ display:block; width:100%; min-height:48px; margin:10px 0 0; padding:12px;
  border:none; background:transparent; font:inherit; font-size:15.5px; font-weight:700;
  color:#667085; cursor:pointer; }
.xc .xc-later[hidden]{ display:none; }

.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; }
/* La regla estricta se dice, pero mas bajito que el resto de la tarjeta
   (Guille 21/08/2026): sigue ahi antes de reservar, sin gritar. */
.xc-rule{ margin-top:8px; font-size:12px; color:#8a94a6; }

/* Paso 4: "estás dentro" (Guille 21/08/2026). Mismo dibujo del asistente,
   ahora con el check verde en vez de la campana; sustituye al resto del
   overlay tras guardar, no se apila con él. */
.xc-done{ text-align:center; padding-top:6px; }
.xc-done-check{ width:64px; height:64px; margin:4px auto 14px; border-radius:50%;
  background:#e8f9f1; color:#12B76A; display:flex; align-items:center; justify-content:center; }
.xc-done-check svg{ width:32px !important; height:32px !important; }
.xc-done-title{ margin:0 0 18px; font-size:24px; font-weight:800; color:#1c2430; letter-spacing:-.4px; }
/* Menos texto y mas aire (Guille 21/08/2026): la tarjeta ya no lleva frases,
   solo el dia y la hora en grande; debajo, una sola linea gris. */
.xc-done-card{ text-align:center; padding:20px 18px; }
.xc-done-when{ margin:0; font-size:20px; font-weight:800; color:#1c2430; letter-spacing:-.3px; }
.xc-done-tz{ margin:4px 0 0; font-size:13px; font-weight:600; color:#667085; }
.xc-done-tz:empty{ display:none; }
.xc-done-note{ margin:2px 2px 18px; text-align:center; font-size:14px; font-weight:600; color:#667085; }