/* Copy v15d (Carlos, 2026-09-27): office setup steps, configuration headline, 4th partner
   channel, checkout "Agregar/Agregado", confirmation detail and "Ver mi boleto".
   Loaded after the other stylesheets; timing-v15.js / handoff-v15.js drive the vars. */

/* ---------- #inicio: configuration headline (after the opening headline) ---------- */
#inicio .office-config-copy{position:absolute;z-index:4;left:clamp(25px,7vw,110px);top:clamp(92px,12vh,128px);max-width:min(940px,82vw);color:#fff;pointer-events:none;opacity:var(--office-config,0);transform:translateY(var(--office-config-y,0px))}
#inicio .office-config-copy h2{margin:0 0 12px;max-width:none;font-size:clamp(36px,3.7vw,58px);line-height:1;letter-spacing:-.06em}
#inicio .office-config-copy p{margin:0;font-size:clamp(17px,1.4vw,21px);line-height:1.35;font-weight:500}
@media(max-width:700px),(max-aspect-ratio:9/10){
  #inicio .office-config-copy{left:22px;right:22px;top:calc(max(64px,var(--progress-bottom,64px)) + 18px);max-width:none}
  #inicio .office-config-copy h2{font-size:clamp(32px,9vw,46px)}
  #inicio .office-config-copy p{font-size:16px;max-width:340px}
}

/* ---------- #inicio: store setup steps on the monitor (960x540 composition) ---------- */
#officeScreen .wl-steps{display:flex;gap:5px;margin:0 0 26px}
#officeScreen .wl-steps i{flex:1;height:4px;background:color-mix(in srgb,#17171a calc(var(--on,0) * 100%),#dad8d6)}
#officeScreen .wl-step{position:absolute;top:63px;left:24px;right:24px;opacity:var(--s,0);transform:translateY(calc(14px * (1 - var(--s,0))))}
#officeScreen .wl-step h3{margin:0 0 18px;font-size:25px;line-height:1.05;letter-spacing:-.045em;font-weight:700}
#officeScreen .wl-field{display:block;background:#fff;border:1px solid #ccc9cd;padding:13px 12px;font-size:17px;letter-spacing:-.03em}
#officeScreen .wl-step .wl-swatches{margin-top:0}
#officeScreen .wl-step .wl-swatches i{width:34px;height:34px}
#officeScreen .wl-processor{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #ccc9cd;padding:11px 12px;margin:0 0 16px}
#officeScreen .wl-processor i{width:30px;height:20px;background:linear-gradient(135deg,#27172f,#6b3b7a)}
#officeScreen .wl-processor span{flex:1;height:6px;background:#e4e0e3;box-shadow:0 10px 0 -1px #efecee}
#officeScreen .wl-processor b{width:22px;height:22px;display:grid;place-items:center;background:#d7ff3a;color:#17171a;font-size:12px}
#officeScreen .wl-step p{margin:0 0 6px;font-size:15px;line-height:1.3;font-weight:600;letter-spacing:-.02em}
#officeScreen .wl-step p+p{color:#6d6a70}
#officeScreen .wl-step-done b{display:grid;place-items:center;width:44px;height:44px;margin:0 0 18px;background:#17171a;color:#d7ff3a;font-size:22px}
#officeScreen .wl-step-done h3{font-size:30px;max-width:220px}
#officeScreen .wl-publish{transform:scale(calc(1 - .05 * var(--wl-publish-press,0)))}

/* Narrow screens: the flat editor (timing-v15.js) uses the same steps. */
@media(max-width:699px){
  .office-mobile-surface .oms-steps{display:flex;gap:5px;flex:none}
  .office-mobile-surface .oms-steps i{flex:1;height:4px;background:color-mix(in srgb,#17171a calc(var(--on,0) * 100%),#dad8d6)}
  .office-mobile-surface .oms-slot{height:clamp(170px,24vh,200px)}
  .office-mobile-surface .oms-step{position:absolute;inset:0;opacity:var(--s,0);transform:translateY(calc(12px * (1 - var(--s,0))))}
  .office-mobile-surface .oms-step h3{margin:0 0 14px;font-size:22px;line-height:1.05;letter-spacing:-.045em}
  .office-mobile-surface .oms-step>strong{display:block;background:#fff;border:1px solid #ccc9cd;padding:12px;font-size:17px;letter-spacing:-.03em}
  .office-mobile-surface .oms-step .oms-templates{height:calc(100% - 44px)}
  .office-mobile-surface .oms-processor{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #ccc9cd;padding:10px 12px;margin:0 0 12px}
  .office-mobile-surface .oms-processor i{width:28px;height:18px;background:linear-gradient(135deg,#27172f,#6b3b7a)}
  .office-mobile-surface .oms-processor span{flex:1;height:6px;background:#e4e0e3}
  .office-mobile-surface .oms-processor b{width:20px;height:20px;display:grid;place-items:center;background:#d7ff3a;color:#17171a;font-size:11px}
  .office-mobile-surface .oms-step p{margin:0 0 4px;font-size:14px;line-height:1.3;font-weight:600}
  .office-mobile-surface .oms-step p+p{color:#6d6a70}
  .office-mobile-surface .oms-done b{display:grid;place-items:center;width:40px;height:40px;margin:0 0 14px;background:#17171a;color:#d7ff3a;font-size:20px}
  .office-mobile-surface .oms-done h3{font-size:26px}
  .office-mobile-surface .oms-publish{transform:scale(calc(1 - .05 * var(--wl-publish-press,0)))}
}

/* ---------- #ciudad: 4th partner channel ---------- */
#ciudad .city-channel:nth-child(4) i{background:#b99cff;box-shadow:0 0 0 6px #b99cff25,0 0 19px #b99cffaa}

/* ---------- #transferir: checkout "Agregar / Agregado" ---------- */
#transferir .phone-checkout .phone-addon-option b{display:grid;width:auto;height:auto;min-height:26px;padding:0 9px;font-size:11px;font-weight:800;letter-spacing:-.01em;color:#fff}
#transferir .phone-addon-option b i{position:static;grid-area:1/1;display:grid;place-items:center}
#transferir .phone-addon-option b .done{font-size:11px}
@media(max-width:700px){
  #transferir .phone-checkout .phone-addon-option b{min-height:18px;padding:0 6px;font-size:9px}
  #transferir .phone-addon-option b .done{font-size:9px}
}

/* Confirmation: purchase detail and "Ver mi boleto". */
.phone-confirm .confirm-detail{font-size:10px;font-weight:800;color:#8f5a77;margin:4px 0 -6px}
.phone-confirm .confirm-cta,#transferir .transfer-view{display:grid;place-items:center;height:38px;background:#27172f;color:#fff;font-size:13px;font-weight:800;letter-spacing:-.02em}
.phone-confirm .confirm-cta{margin-top:auto}
/* Transfer: "Boleto enviado" → "Boleto recibido" + "Ver mi boleto". */
#transferir .ticket-transfer p{bottom:48px}
#transferir .transfer-view{position:absolute;left:0;right:0;bottom:0;opacity:var(--ticket-delivered,0)}
@media(max-width:700px){
  .phone-confirm .confirm-detail{font-size:9px;margin:2px 0 -4px}
  .phone-confirm .confirm-cta,#transferir .transfer-view{height:26px;font-size:10px}
  #transferir .ticket-transfer p{bottom:32px}
}