/* =============================================================================
   checkout.css — CAPA 3 de 3: LAYOUT DE CHECKOUT
   Checkout de una sola página, como invitado, recorrible en ~90 segundos.
   Carga después de base.css y shop.css.
   -----------------------------------------------------------------------------
   INVARIANTE: no redefine ningún selector YA DEFINIDO en base.css o shop.css
   (los dos NO EDITAR que se cargan en toda página de tienda). Se comprueba con:

     grep -nE '^\.(btn|nav|topbar|iconbtn|tools|logo|sucrow|sacts|pcard|chip-f|
                    ann|foot|scrim|cart|cmdk|news|cofstrip|prods|toast|sk|stock|
                    branchsel|wafab|empty|reveal|band-|sr-only|skip|eyebrow|
                    sec-head|linkmore|imgwrap|ic|wrap|shipbar)\b' checkout.css

   Debe devolver CERO líneas (comprobado; ver reporte de entrega).

   Esta página NO usa el patrón `.hero` de home.css: es transaccional y debe
   recorrerse rápido, así que la cabecera es una franja compacta con el título
   y el paso actual, sin fotografía. Reutiliza `.sucrow`/`.sinfo`/`.sacts` de
   base.css TAL CUAL para las tarjetas de sucursal de "Recoger en tienda" (misma
   razón que agendar.css: heredar su apariencia ya resuelta sin redefinirla) y
   `.empty` de shop.css TAL CUAL para el estado de carrito vacío.
   ============================================================================= */

/* ---------- CABECERA COMPACTA ---------- */
.cktitle{ background:var(--surface); border-bottom:1px solid var(--line); padding:var(--s6) 0; }
.cktitle h1{ font-size:clamp(24px,3vw,32px); }
.cktitle p{ color:var(--ink-muted); margin-top:6px; font-size:13.5px; }

/* ---------- LAYOUT PRINCIPAL ---------- */
.ckmain-wrap{ padding:var(--s7) 0 var(--s9); }
.ckgrid{ display:grid; grid-template-columns:1.6fr 1fr; gap:var(--s6); align-items:start; }
@media(max-width:960px){ .ckgrid{ grid-template-columns:1fr; } }

.ckcol{ display:flex; flex-direction:column; gap:var(--s5); }

/* Tarjeta genérica de sección — nombre nuevo, no colisiona con `.e1/.e2` de base.css
   (esos son utilidades de elevación sin layout; aquí se fija además el padding). */
.cksection{
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:var(--s5) var(--s5) var(--s6);
}
.cksection h2{ font-size:17px; margin-bottom:4px; }
.cksection .cksub{ font-size:12.5px; color:var(--ink-muted); margin-bottom:var(--s4); }
.ckstepno{
  display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%;
  background:var(--primary); color:#fff; font-family:var(--font-display); font-size:12px; font-weight:700;
  margin-right:8px; vertical-align:middle;
}

/* ---------- CONTACTO / DIRECCIÓN — formulario ---------- */
.ckform{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); }
.ckform .field{ display:flex; flex-direction:column; gap:6px; }
.ckform .field.full{ grid-column:1/-1; }
.ckform label{ font-size:12.5px; font-weight:600; color:var(--ink-muted); }
.ckform input, .ckform select{
  font:inherit; font-size:14px; padding:12px 14px; border-radius:var(--radius-sm);
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);
}
.ckform input:focus, .ckform select:focus{ border-color:var(--accent); }
.ckform .ckerr{ font-size:12px; color:var(--error); min-height:15px; }
@media(max-width:640px){ .ckform{ grid-template-columns:1fr; } }

/* ---------- ELECCIÓN DE ENTREGA — arriba de todo, nunca al final ---------- */
.ckmethod{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); margin-bottom:var(--s5); }
@media(max-width:640px){ .ckmethod{ grid-template-columns:1fr; } }
.ckmethod .opt{
  display:flex; gap:12px; align-items:flex-start; text-align:left; cursor:pointer;
  padding:14px 16px; border-radius:var(--radius); border:1.5px solid var(--line-strong);
  background:var(--surface); font:inherit; color:inherit; width:100%;
}
.ckmethod .opt .rd{
  width:19px; height:19px; border-radius:50%; border:1.5px solid var(--line-strong); flex:none; margin-top:2px;
  display:grid; place-items:center;
}
.ckmethod .opt.on{ border-color:var(--accent); background:var(--accent-tint); }
.ckmethod .opt.on .rd{ border-color:var(--accent); }
.ckmethod .opt.on .rd::after{ content:""; width:10px; height:10px; border-radius:50%; background:var(--accent); }
.ckmethod .opt b{ display:block; font-family:var(--font-display); font-size:14.5px; }
.ckmethod .opt span.d{ display:block; font-size:12.5px; color:var(--ink-muted); margin-top:2px; }
.ckmethod .opt .price{ margin-left:auto; font-family:var(--font-display); font-weight:700; font-size:13.5px; white-space:nowrap; }

/* Panel de cada método (se muestra el que corresponda) */
.ckpanel[hidden]{ display:none; }

/* ---------- BOPIS: sucursales ---------- */
.ckbranches{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); }
@media(max-width:760px){ .ckbranches{ grid-template-columns:1fr; } }
.ckbrcard{ display:flex; flex-direction:column; cursor:pointer; }
.ckbrcard .sucrow{ flex:1; }
.ckbrcard.selected .sucrow{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint); }
.ckbrcard-pick{ display:flex; align-items:center; gap:8px; margin-top:8px; font-family:var(--font-display); font-weight:600; font-size:12.5px; color:var(--accent); }
.ckstockrow{ margin-top:12px; padding-top:12px; border-top:1px dashed var(--line); display:flex; flex-direction:column; gap:6px; }
.ckstockitem{ display:flex; justify-content:space-between; gap:10px; font-size:12.5px; }
.ckstockitem .name{ color:var(--ink-muted); }

/* ---------- CHOCHITO CARD ---------- */
.ckloyalty{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--accent-tint); border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  border-radius:var(--radius); padding:14px 16px; margin-top:var(--s5);
}
.ckloyalty .pts{ font-family:var(--font-display); font-weight:800; font-size:20px; color:var(--accent); }
.ckloyalty .txt{ font-size:12.5px; color:var(--ink-muted); flex:1; min-width:180px; }
.ckredeem{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; margin-left:auto; }
.ckredeem input{ width:auto; }

/* ---------- PAGO ---------- */
.ckpaymethods{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:var(--s4); }
.ckpm{
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:var(--radius-sm);
  border:1.5px solid var(--line-strong); background:var(--surface); cursor:pointer;
  font-family:var(--font-display); font-weight:700; font-size:12.5px; color:var(--ink);
}
.ckpm.on{ border-color:var(--accent); background:var(--accent-tint); color:var(--accent); }
.ckcard{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); }
.ckcard .field{ display:flex; flex-direction:column; gap:6px; }
.ckcard .field.full{ grid-column:1/-1; }
.ckcard label{ font-size:12.5px; font-weight:600; color:var(--ink-muted); }
.ckcard input{
  font:inherit; font-size:14px; padding:12px 14px; border-radius:var(--radius-sm);
  border:1px solid var(--line-strong); background:var(--sunken); color:var(--ink-muted);
}
@media(max-width:640px){ .ckcard{ grid-template-columns:1fr; } }
.ckdemo{
  display:flex; gap:10px; align-items:flex-start; font-size:12.5px; color:var(--warning);
  background:color-mix(in srgb,var(--warning) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--warning) 30%,transparent);
  border-radius:var(--radius-sm); padding:12px 14px; margin:var(--s4) 0;
}
.ckaltpay{ font-size:13px; color:var(--ink-muted); background:var(--sunken); border-radius:var(--radius-sm); padding:14px; }

/* ---------- CONSENTIMIENTO — nunca premarcado, mismo peso que el envío ---------- */
.ckconsent{ display:flex; gap:10px; align-items:flex-start; font-size:12.5px; color:var(--ink-muted); margin-top:var(--s4); }
.ckconsent input{ margin-top:3px; width:auto; flex:none; }

/* ---------- RESUMEN DE PEDIDO — sticky en escritorio ---------- */
.cksummary{
  position:sticky; top:calc(var(--header-h) + 38px + var(--s5));
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius);
  box-shadow:var(--shadow-md); padding:var(--s5);
}
@media(max-width:960px){ .cksummary{ position:static; } }
.cksummary h2{ font-size:16.5px; margin-bottom:var(--s4); }
.cklines{ display:flex; flex-direction:column; gap:12px; max-height:320px; overflow:auto; margin-bottom:var(--s4); }
.ckline{ display:flex; gap:10px; align-items:flex-start; }
.ckline .th{ width:48px; height:56px; flex:none; border-radius:var(--radius-sm); overflow:hidden; background:var(--sunken); }
.ckline .th img{ width:100%; height:100%; object-fit:cover; }
.ckline .info{ flex:1; min-width:0; font-size:12.5px; }
.ckline .info b{ display:block; font-family:var(--font-display); font-size:13.5px; font-weight:600; }
.ckline .price{ font-family:var(--font-display); font-weight:700; font-size:13px; white-space:nowrap; }
.cktotals{ border-top:1px solid var(--line); padding-top:var(--s4); display:flex; flex-direction:column; gap:8px; font-size:13.5px; }
.cktotals .row{ display:flex; justify-content:space-between; gap:10px; }
.cktotals .muted-row{ color:var(--ink-muted); }
.cktotals .grand{ font-family:var(--font-display); font-weight:800; font-size:19px; border-top:1px solid var(--line); padding-top:10px; margin-top:2px; }
.ckplace{ margin-top:var(--s5); }

/* ---------- ESTADO VACÍO (envuelve .empty de shop.css) ---------- */
.ckemptywrap{ padding:var(--s9) 0; }

/* ---------- CONFIRMACIÓN ---------- */
.ckdone{ display:flex; flex-direction:column; gap:16px; align-items:flex-start; max-width:640px; }
.ckdone-icon{ width:56px; height:56px; border-radius:50%; background:var(--success); color:#fff; display:grid; place-items:center; }
.ckdone dl{ display:grid; grid-template-columns:auto 1fr; gap:6px 16px; font-size:13.5px; width:100%; }
.ckdone dt{ color:var(--ink-muted); }
.ckdone dd{ font-weight:600; font-family:var(--font-display); }
.ckdone-items{ width:100%; border-top:1px solid var(--line); padding-top:14px; display:flex; flex-direction:column; gap:8px; }
.ckdone-actions{ display:flex; gap:12px; flex-wrap:wrap; }