/* ==========================================================================
   Flujo de compra (carrito, finalizar compra, mis compras) con la estética
   del panel de control (dashboard.css): fondo crema, bordes finos, tarjetas
   de 12px, Sora para títulos, Public Sans para texto e IBM Plex Mono para
   importes. El color de la tienda entra solo como acento (--ck-brand), lo
   define GEN_flujoCompra_head.tpl; sin tienda queda el azul de CyShops.
   Todo con prefijo ck- para no chocar con el CSS de cada plantilla.
   ========================================================================== */

:root{
  --ck-brand:#303198;
  --ck-brand-ink:#ffffff;
  --ck-brand-soft:color-mix(in srgb, var(--ck-brand) 9%, #fff);
  --ck-brand-line:color-mix(in srgb, var(--ck-brand) 35%, #fff);
  --ck-canvas:#f7f6f3;
  --ck-surface:#ffffff;
  --ck-surface-2:#fbfaf8;
  --ck-line:#e6e2d9;
  --ck-line-2:#efece6;
  --ck-text:#211f1b;
  --ck-muted:#726d64;
  --ck-good:#1a7f55;
  --ck-good-soft:#e3f3ea;
  --ck-warn:#b45309;
  --ck-warn-soft:#fbead2;
  --ck-bad:#b3261e;
  --ck-bad-soft:#fbe4e1;
  --ck-shadow:0 1px 2px rgba(20,23,31,.04), 0 8px 24px -12px rgba(20,23,31,.12);
  --ck-r:12px;
  --ck-r-sm:9px;
}

.ck-page{
  max-width:1120px;
  margin:0 auto;
  padding:26px 20px 64px;
  font-family:'Public Sans', 'Segoe UI', sans-serif;
  font-size:14px;
  line-height:1.45;
  color:var(--ck-text);
}
.ck-page, .ck-page *{ box-sizing:border-box; }
.ck-page h1, .ck-page h2, .ck-page h3, .ck-sora{ font-family:'Sora', 'Segoe UI', sans-serif; margin:0; }
.ck-page p{ margin:0; }
.ck-mono{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums; }
.ck-muted{ color:var(--ck-muted); }
/* :where() = especificidad 0, para no pisar el peso/tamaño de .ck-btn */
.ck-page :where(button){ font:inherit; cursor:pointer; }
/* la página toma el fondo del panel aunque la plantilla tenga otro */
body:has(.ck-page:not(.ck-in-dashboard)){ background:var(--ck-canvas); }

/* ---------- encabezado ---------- */
.ck-head{ margin-bottom:18px; }
.ck-back{
  display:inline-flex; align-items:center; gap:6px; margin-bottom:8px;
  font-size:13px; font-weight:600; color:var(--ck-brand); text-decoration:none;
}
.ck-back:hover{ text-decoration:underline; color:var(--ck-brand); }
.ck-head h1{ font-size:22px; font-weight:700; color:var(--ck-text); }
.ck-head p{ color:var(--ck-muted); font-size:13px; margin-top:2px; }

.ck-card{ background:var(--ck-surface); border:1px solid var(--ck-line); border-radius:var(--ck-r); box-shadow:var(--ck-shadow); }

.ck-alert{
  display:flex; gap:10px; align-items:flex-start; padding:12px 14px; margin-bottom:16px;
  border-radius:var(--ck-r-sm); background:var(--ck-bad-soft); color:var(--ck-bad); font-size:13.5px;
}
.ck-alert svg{ flex-shrink:0; margin-top:1px; }
.ck-alert-warn{ background:var(--ck-warn-soft); color:var(--ck-warn); }

/* ---------- layout de 2 columnas: contenido + rail ---------- */
.ck-grid{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:20px; align-items:start; }
.ck-rail{ position:sticky; top:20px; display:flex; flex-direction:column; gap:14px; }

/* ---------- botones ---------- */
.ck-btn{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  border:0; border-radius:10px; padding:13px 16px; font-weight:700; font-size:14.5px;
  text-decoration:none; transition:filter .15s ease;
}
.ck-btn-brand{ background:var(--ck-brand); color:var(--ck-brand-ink); }
.ck-btn-brand:hover{ filter:brightness(.93); color:var(--ck-brand-ink); text-decoration:none; }
.ck-btn-brand:disabled{ opacity:.5; cursor:not-allowed; filter:none; }
.ck-btn-ghost{ background:#fff; border:1px solid var(--ck-line); color:var(--ck-text); }
.ck-btn-ghost:hover{ border-color:var(--ck-brand-line); color:var(--ck-brand); }
.ck-btn-inline{ width:auto; display:inline-flex; padding:10px 18px; }

/* ===================== CARRITO ===================== */
.ck-table{ overflow:hidden; }
.ck-tr{
  display:grid; grid-template-columns:56px minmax(0,1fr) 128px 116px 36px;
  gap:14px; align-items:center; padding:12px 18px; border-bottom:1px solid var(--ck-line-2);
}
.ck-tr:last-child{ border-bottom:0; }
.ck-th{
  font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ck-muted);
  background:var(--ck-surface-2); border-bottom:1px solid var(--ck-line);
}
.ck-tr.is-warn{ background:#fffaf3; }
.ck-thumb{
  width:56px; height:56px; border-radius:10px; object-fit:cover; display:block;
  background:var(--ck-brand-soft); color:var(--ck-brand);
}
.ck-thumb-ph{ display:grid; place-items:center; }
.ck-thumb-ph svg{ width:24px; height:24px; }
.ck-name{ font-weight:600; color:var(--ck-text); text-decoration:none; }
.ck-name:hover{ color:var(--ck-brand); text-decoration:underline; }
.ck-chips{ display:flex; flex-wrap:wrap; gap:4px; margin-top:5px; }
.ck-chip{
  font-size:11.5px; padding:2px 8px; border-radius:999px;
  background:var(--ck-canvas); border:1px solid var(--ck-line); color:var(--ck-muted);
}
.ck-unit{ font-size:12px; color:var(--ck-muted); margin-top:4px; }
.ck-unit s{ margin-right:4px; }
.ck-lowstock{ font-size:12px; color:var(--ck-warn); font-weight:600; margin-top:4px; }
.ck-item-alert{ font-size:12px; color:var(--ck-bad); font-weight:600; margin-top:4px; }
.ck-sub{ text-align:right; font-weight:600; }

.ck-qty{ font-weight:600; color:var(--ck-text); }

.ck-remove{ margin:0; }
.ck-icon-btn{
  width:32px; height:32px; border-radius:8px; border:1px solid transparent; background:none;
  color:var(--ck-muted); display:grid; place-items:center;
}
.ck-icon-btn:hover{ border-color:var(--ck-line); color:var(--ck-bad); background:#fff; }

.ck-table-foot{
  display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px 18px; background:var(--ck-surface-2); border-top:1px solid var(--ck-line);
  font-size:13px; color:var(--ck-muted);
}
.ck-table-foot a{ color:var(--ck-brand); font-weight:600; text-decoration:none; }

/* tarjeta "total" tipo KPI del panel */
.ck-kpi{ padding:18px; }
.ck-kpi-label{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ck-muted); }
.ck-kpi-total{ font-size:30px; font-weight:600; margin:4px 0 2px; color:var(--ck-text); line-height:1.15; }
.ck-kpi-note{ font-size:12.5px; color:var(--ck-muted); }
.ck-rows{ border-top:1px dashed var(--ck-line); margin-top:14px; padding-top:12px; display:grid; gap:7px; font-size:13px; }
.ck-rows > div{ display:flex; justify-content:space-between; gap:10px; }
.ck-kpi .ck-btn{ margin-top:14px; }
.ck-trust{ display:flex; gap:10px; align-items:flex-start; padding:12px 16px; font-size:12.5px; color:var(--ck-muted); }
.ck-trust svg{ flex-shrink:0; color:var(--ck-brand); margin-top:1px; }

/* vacío */
.ck-empty{ max-width:460px; margin:40px auto; padding:36px 28px; text-align:center; }
.ck-empty svg{ width:52px; height:52px; color:var(--ck-brand); margin-bottom:12px; }
.ck-empty h2{ font-size:19px; margin-bottom:6px; }
.ck-empty p{ color:var(--ck-muted); margin-bottom:18px; }

/* carrito general (sin tienda): un bloque por tienda */
.ck-store-block{ margin-bottom:20px; }
.ck-store-head{ display:flex; align-items:center; gap:10px; padding:12px 18px; border-bottom:1px solid var(--ck-line); }
.ck-store-head img{ width:30px; height:30px; border-radius:8px; object-fit:cover; }
.ck-store-head strong{ font-family:'Sora', sans-serif; }
.ck-store-head a{ margin-left:auto; font-size:13px; font-weight:600; color:var(--ck-brand); text-decoration:none; }

/* ===================== FINALIZAR COMPRA ===================== */
.ck-steps{ display:flex; flex-direction:column; gap:12px; }
.ck-step{ overflow:hidden; transition:border-color .15s ease; }
.ck-step.is-open{ border-color:var(--ck-brand-line); }
.ck-step-h{
  display:flex; align-items:center; gap:14px; width:100%; padding:16px 18px;
  background:none; border:0; text-align:left; color:var(--ck-text);
}
.ck-step-n{
  width:28px; height:28px; border-radius:50%; flex-shrink:0; display:grid; place-items:center;
  font-family:'Sora', sans-serif; font-weight:600; font-size:13px;
  border:1.5px solid var(--ck-line); color:var(--ck-muted); background:#fff;
}
.ck-step.is-done .ck-step-n{ background:var(--ck-good); border-color:var(--ck-good); color:#fff; }
.ck-step.is-open .ck-step-n{ background:var(--ck-brand); border-color:var(--ck-brand); color:var(--ck-brand-ink); }
.ck-step-t{ display:block; font-family:'Sora', sans-serif; font-weight:600; font-size:15px; }
.ck-step-s{ display:block; font-size:12.5px; color:var(--ck-muted); margin-top:1px; }
.ck-step-edit{ margin-left:auto; font-size:12.5px; color:var(--ck-brand); font-weight:600; display:none; }
.ck-step.is-done:not(.is-open) .ck-step-edit{ display:inline; }
.ck-step-b{ display:none; padding:0 18px 18px 60px; }
.ck-step.is-open .ck-step-b{ display:block; }
.ck-step-next{ margin-top:16px; }

.ck-fields{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ck-field label{ display:block; font-size:12px; font-weight:600; margin-bottom:5px; color:var(--ck-text); }
.ck-field input, .ck-field select, .ck-field textarea{
  width:100%; border:1px solid var(--ck-line); border-radius:var(--ck-r-sm);
  padding:10px 12px; font:inherit; font-size:14px; background:#fff; color:var(--ck-text);
}
.ck-field input:focus, .ck-field select:focus, .ck-field textarea:focus{
  outline:2px solid var(--ck-brand-line); border-color:var(--ck-brand);
}
.ck-field.is-full{ grid-column:1 / -1; }
.ck-field small{ display:block; font-size:12px; color:var(--ck-muted); margin-top:4px; }
.ck-field .ck-invalid, .ck-field input:invalid.ck-touched{ border-color:var(--ck-bad); }

/* opciones de radio (entrega y pago): una sola elegida por grupo */
.ck-opts{ display:grid; gap:10px; }
.ck-opts.is-two{ grid-template-columns:1fr 1fr; }
.ck-opt{
  display:flex; gap:12px; align-items:flex-start; width:100%; padding:14px; text-align:left;
  border:1.5px solid var(--ck-line); border-radius:10px; background:#fff; color:var(--ck-text);
}
.ck-opt:hover{ border-color:var(--ck-brand-line); }
.ck-opt[aria-checked="true"]{ border-color:var(--ck-brand); background:var(--ck-brand-soft); }
.ck-radio{
  width:18px; height:18px; border-radius:50%; flex-shrink:0; margin-top:2px;
  border:1.5px solid #c9c4b9; display:grid; place-items:center; background:#fff;
}
.ck-opt[aria-checked="true"] .ck-radio{ border-color:var(--ck-brand); }
.ck-opt[aria-checked="true"] .ck-radio::after{ content:""; width:9px; height:9px; border-radius:50%; background:var(--ck-brand); }
.ck-opt-body{ flex:1; min-width:0; }
.ck-opt-t{ display:block; font-weight:600; }
.ck-opt-s{ display:block; font-size:12.5px; color:var(--ck-muted); margin-top:2px; }
.ck-opt-price{ margin-left:auto; font-weight:600; white-space:nowrap; }

.ck-sub-panel{ margin-top:14px; }
.ck-horarios{ margin-top:10px; font-size:12.5px; }
.ck-horarios summary{ color:var(--ck-brand); font-weight:600; cursor:pointer; }
.ck-horarios table{ margin-top:8px; border-collapse:collapse; width:100%; max-width:360px; }
.ck-horarios td{ padding:4px 8px; border-bottom:1px solid var(--ck-line-2); }
.ck-horarios td:first-child{ font-weight:600; text-transform:capitalize; }

.ck-pay-panel{ margin-top:12px; border:1px dashed var(--ck-line); border-radius:10px; padding:14px; background:var(--ck-surface-2); display:none; }
.ck-pay-panel.is-on{ display:block; }
.ck-copy-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px;
  background:#fff; border:1px solid var(--ck-line); border-radius:var(--ck-r-sm); padding:10px 12px;
}
.ck-copy-row small{ display:block; color:var(--ck-muted); font-size:11px; text-transform:uppercase; letter-spacing:.05em; }
.ck-copy-row b{ word-break:break-all; }
.ck-copy{
  border:1px solid var(--ck-line); background:#fff; border-radius:7px; padding:6px 10px;
  font-size:12px; font-weight:600; color:var(--ck-brand); flex-shrink:0;
}
.ck-drop{
  position:relative; display:block; margin-top:10px; padding:16px; text-align:center; cursor:pointer;
  border:1.5px dashed var(--ck-brand-line); border-radius:10px; background:#fff; color:var(--ck-muted);
}
.ck-drop b{ color:var(--ck-brand); }
.ck-drop input[type=file]{ position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; }
.ck-drop.has-file{ border-style:solid; border-color:var(--ck-good); color:var(--ck-good); background:var(--ck-good-soft); }
.ck-drop.is-invalid{ border-color:var(--ck-bad); color:var(--ck-bad); }

/* campos de Mercado Pago (iframes del SDK) */
.ck-mp-field{
  height:42px; border:1px solid var(--ck-line); border-radius:var(--ck-r-sm); padding:0 12px; background:#fff;
}
.ck-mp-progress{ width:100%; height:4px; margin-top:10px; border:0; border-radius:99px; overflow:hidden; background:var(--ck-line); }
.ck-mp-progress::-webkit-progress-bar{ background:var(--ck-line); }
.ck-mp-progress::-webkit-progress-value{ background:var(--ck-brand); }
.ck-mp-progress::-moz-progress-bar{ background:var(--ck-brand); }

/* resumen tipo ticket con perforación */
.ck-ticket{ padding:18px; }
.ck-ticket h3{ font-size:14px; font-weight:600; margin-bottom:10px; }
.ck-t-item{ display:flex; gap:10px; align-items:flex-start; padding:8px 0; border-bottom:1px solid var(--ck-line-2); font-size:13px; }
.ck-t-q{
  width:22px; height:22px; border-radius:6px; flex-shrink:0; display:grid; place-items:center;
  background:var(--ck-canvas); font-size:11.5px; font-weight:600;
}
.ck-t-name{ flex:1; min-width:0; }
.ck-t-name small{ display:block; color:var(--ck-muted); font-size:12px; }
.ck-t-price{ white-space:nowrap; }
.ck-perf{
  height:14px; margin:12px -18px; border-top:1px dashed var(--ck-line);
  background:
    radial-gradient(circle at 0 50%, var(--ck-canvas) 7px, transparent 7.5px) left / 14px 14px no-repeat,
    radial-gradient(circle at 100% 50%, var(--ck-canvas) 7px, transparent 7.5px) right / 14px 14px no-repeat;
}
.ck-t-total{ display:flex; justify-content:space-between; align-items:baseline; margin-top:10px; }
.ck-t-total b{ font-size:24px; }
.ck-ticket .ck-btn{ margin-top:14px; }
.ck-ticket-note{ font-size:12px; color:var(--ck-muted); text-align:center; margin-top:8px; }

/* tienda cerrada */
.ck-closed{ max-width:460px; margin:50px auto; padding:30px; text-align:center; }
.ck-closed svg{ color:var(--ck-warn); margin-bottom:10px; }
.ck-closed h2{ font-size:19px; margin-bottom:6px; }
.ck-closed p{ color:var(--ck-muted); margin-bottom:16px; }

/* ===================== MIS COMPRAS ===================== */
.ck-orders{ display:grid; gap:14px; }
.ck-order{ display:grid; grid-template-columns:minmax(0,1fr) 260px; overflow:hidden; }
.ck-o-main{ padding:18px; min-width:0; }
.ck-o-top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ck-o-store{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:var(--ck-text); font-weight:600; }
.ck-o-store img{ width:26px; height:26px; border-radius:7px; object-fit:cover; }
.ck-o-code{ font-family:'Sora', sans-serif; font-weight:600; }
.ck-o-meta{ font-size:13px; color:var(--ck-muted); }
.ck-badge{ font-size:12px; font-weight:600; padding:3px 10px; border-radius:999px; background:var(--ck-canvas); color:var(--ck-muted); }
.ck-badge.is-prog{ background:var(--ck-warn-soft); color:var(--ck-warn); }
.ck-badge.is-good{ background:var(--ck-good-soft); color:var(--ck-good); }
.ck-badge.is-bad{ background:var(--ck-bad-soft); color:var(--ck-bad); }

.ck-tl{ display:flex; margin:18px 0 4px; padding:0; list-style:none; }
.ck-tl li{ flex:1; position:relative; text-align:center; font-size:11.5px; color:var(--ck-muted); padding:22px 2px 0; line-height:1.25; }
.ck-tl li::before{
  content:""; position:absolute; top:5px; left:50%; width:12px; height:12px; margin-left:-6px;
  border-radius:50%; background:#fff; border:2px solid var(--ck-line); z-index:1;
}
.ck-tl li::after{ content:""; position:absolute; top:10px; left:-50%; width:100%; height:2px; background:var(--ck-line); }
.ck-tl li:first-child::after{ display:none; }
.ck-tl li.is-done::before{ background:var(--ck-brand); border-color:var(--ck-brand); }
.ck-tl li.is-done::after{ background:var(--ck-brand); }
.ck-tl li.is-current{ color:var(--ck-text); font-weight:600; }

.ck-o-note{ display:flex; gap:8px; align-items:flex-start; margin-top:12px; font-size:13px; color:var(--ck-muted); }
.ck-o-note svg{ flex-shrink:0; color:var(--ck-brand); margin-top:1px; }
.ck-o-note strong{ color:var(--ck-text); }
.ck-o-toggle{ background:none; border:0; padding:0; color:var(--ck-brand); font-weight:600; font-size:12.5px; margin-left:4px; }

.ck-o-items{ margin-top:12px; border-top:1px solid var(--ck-line-2); }
.ck-o-item{ display:flex; gap:10px; align-items:flex-start; padding:8px 0; border-bottom:1px solid var(--ck-line-2); font-size:13px; }
.ck-o-item:last-child{ border-bottom:0; }
.ck-o-item a{ color:var(--ck-text); text-decoration:none; font-weight:600; }
.ck-o-item a:hover{ color:var(--ck-brand); text-decoration:underline; }
.ck-o-item .ck-t-price{ margin-left:auto; }

.ck-o-side{ background:var(--ck-surface-2); border-left:1px solid var(--ck-line); padding:18px; display:flex; flex-direction:column; gap:10px; }
.ck-o-side .ck-kpi-total{ font-size:22px; }
.ck-o-side .ck-rows{ margin-top:0; padding-top:0; border-top:0; font-size:12.5px; }
.ck-o-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; }
.ck-o-actions a{
  flex:1 1 auto; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:8px 10px; border-radius:8px; border:1px solid var(--ck-line); background:#fff;
  color:var(--ck-text); font-size:12.5px; font-weight:600; text-decoration:none; white-space:nowrap;
}
.ck-o-actions a:hover{ border-color:var(--ck-brand-line); color:var(--ck-brand); }
.ck-o-actions a.is-pri{ background:var(--ck-brand); border-color:var(--ck-brand); color:var(--ck-brand-ink); }
.ck-o-contact{ font-size:12.5px; color:var(--ck-muted); display:grid; gap:3px; }
.ck-o-contact a{ color:var(--ck-muted); text-decoration:none; word-break:break-all; }
.ck-o-contact a:hover{ color:var(--ck-brand); }

/* Mis compras dentro del panel: sin márgenes propios */
/* sin tope de ancho: ocupa todo el contenido del panel */
.ck-page.ck-in-dashboard{ padding:0; max-width:none; width:100%; margin:0; }

/* ---------- barra fija mobile ---------- */
.ck-mbar{ display:none; }

@media (max-width: 860px){
  .ck-page{ padding:20px 16px 40px; }
  .ck-grid{ grid-template-columns:1fr; }
  .ck-rail{ position:static; }
  .ck-th{ display:none; }
  /* 3ra columna "auto": ahí van el tacho (arriba) y el subtotal (abajo) */
  .ck-tr{
    grid-template-columns:56px minmax(0,1fr) auto;
    grid-template-areas:"img info del" "img step sub";
    row-gap:10px;
  }
  .ck-tr > .ck-c-img{ grid-area:img; align-self:start; }
  .ck-tr > .ck-c-info{ grid-area:info; }
  .ck-tr > .ck-c-qty{ grid-area:step; justify-self:start; }
  .ck-tr > .ck-c-sub{ grid-area:sub; align-self:center; justify-self:end; white-space:nowrap; }
  .ck-tr > .ck-c-del{ grid-area:del; align-self:start; justify-self:end; }
  .ck-step-b{ padding:0 16px 16px; }
  .ck-opts.is-two, .ck-fields{ grid-template-columns:1fr; }
  .ck-order{ grid-template-columns:1fr; }
  .ck-o-side{ border-left:0; border-top:1px solid var(--ck-line); }
  .ck-tl li{ font-size:10.5px; }
  /* el botón principal pasa a la barra fija de abajo */
  .ck-rail .ck-hide-mobile{ display:none; }
  .ck-mbar{
    display:flex; position:sticky; bottom:0; z-index:40; gap:12px; align-items:center;
    margin:16px -16px -40px; padding:10px 16px;
    background:#fff; border-top:1px solid var(--ck-line); box-shadow:0 -6px 18px rgba(20,23,31,.08);
  }
  .ck-mbar .ck-btn{ width:auto; flex:1; }
  .ck-mbar small{ display:block; color:var(--ck-muted); font-size:11px; }
  .ck-mbar b{ font-size:16px; }
}

/* Dentro del panel: toma los colores del dashboard (claro u oscuro) */
.ck-page.ck-in-dashboard{
  --ck-brand: var(--accent, #303198);
  --ck-brand-ink: var(--accent-ink, #fff);
  --ck-canvas: var(--canvas, #f7f6f3);
  --ck-surface: var(--surface, #fff);
  --ck-surface-2: var(--canvas, #fbfaf8);
  --ck-line: var(--line, #e6e2d9);
  --ck-line-2: var(--line, #efece6);
  --ck-text: var(--text, #211f1b);
  --ck-muted: var(--text-muted, #726d64);
  --ck-brand-soft: var(--accent-soft, #e6e6f5);
}
.ck-in-dashboard .ck-o-actions a,
.ck-in-dashboard .ck-tl li::before{ background:var(--ck-surface); }
.ck-in-dashboard .ck-o-actions a.is-pri{ background:var(--ck-brand); }
.ck-in-dashboard .ck-tl li.is-done::before{ background:var(--ck-brand); }
.ck-in-dashboard .ck-t-q{ background:var(--ck-canvas); color:var(--ck-text); }

/* QR de billetera en el checkout */
/* responsive: el QR toma el ancho DISPONIBLE (no el de la pantalla) con un
   tope, y es siempre cuadrado -nunca genera scroll horizontal- */
.ck-qr-panel.is-on{ display:flex; gap:20px; align-items:center; min-width:0; }
.ck-qr-panel > div:last-child{ min-width:0; overflow-wrap:anywhere; }
.ck-qr-img{
  /* compu: hasta 280px pero nunca más de 55% del panel (el resto es el texto) */
  width:min(280px, 55%); aspect-ratio:1 / 1; height:auto; flex:0 0 auto; box-sizing:border-box;
  background:#fff center / contain no-repeat; background-origin:content-box;
  border:1px solid var(--ck-line); border-radius:12px; padding:10px;
  /* que no se pueda seleccionar, arrastrar ni guardar con pulsación larga */
  -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; -webkit-user-drag:none;
}
@media (max-width: 860px){
  .ck-qr-panel.is-on{ flex-direction:column; text-align:center; }
  /* en el celu ocupa todo el ancho del panel, hasta 380px */
  .ck-qr-img{ width:100%; max-width:380px; flex:none; }
}