/* AXKAN /pedidos — lo mínimo que el kit no trae, solo para esta página (prefijo .pg-).
   El kit (kit.css) es el mismo de la maqueta aprobada y no se toca. */

/* pantallas: todas en el DOM, una visible */
.step[hidden] { display: none; }

/* ═══ ① Datos ═══ */
.pg-space { height: 28px; }
.pg-logo { display: block; width: 196px; height: auto; margin: 14px auto; }
.pg-center { text-align: center; }
.pg-hint { margin: var(--s-3) 0 0; }
.field .req { color: var(--danger); }
.input.bad { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(229, 36, 33, .12); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* "Ordenar" → dos botones (flex: se anima en Chrome y en iOS Safari) */
.pg-cta { display: flex; justify-content: center; gap: 0; margin-top: var(--s-5); transition: gap .22s var(--ease); }
.pg-cta #btn-ordenar { flex: 0 0 220px; transition: flex-basis .22s var(--ease), flex-grow .22s var(--ease); }
.pg-cta #btn-ver-pedidos {
  flex: 0 0 0px; opacity: 0; min-width: 0; padding: 0; border-width: 0; overflow: hidden; white-space: nowrap;
  transition: flex-basis .22s var(--ease), flex-grow .22s var(--ease), opacity .18s var(--ease) .06s, padding .22s var(--ease), border-width .22s;
}
.pg-cta.dos { gap: 10px; }
.pg-cta.dos #btn-ordenar { flex: 1 1 0px; }
.pg-cta.dos #btn-ver-pedidos { flex: 1 1 0px; opacity: 1; padding: 0 20px; border-width: 1.5px; }

/* ═══ ② Dirección ═══ */
.pg-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ═══ ③ Productos ═══ */
.pg-prod { display: grid; gap: 10px; }
.pg-prod .hd { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; }
.pg-prod .ph { width: 56px; height: 56px; border-radius: var(--r-ctl); background: var(--soft); border: 1px solid var(--box-border); display: grid; place-items: center; font-weight: 700; color: var(--ink-3); overflow: hidden; }
.pg-prod .ph img { width: 100%; height: 100%; object-fit: cover; }
.pg-prod .hd b { display: block; font-weight: 600; }
.pg-prod .hd span { font-size: 13px; color: var(--ink-2); }
.pg-prod .act { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pg-empty { color: var(--ink-2); text-align: center; padding: 24px 0; }

/* línea del carrito: cantidad | producto | precio | quitar (la 4.ª celda existe siempre) */
.line-card { grid-template-columns: 56px 1fr auto 28px; }
.line-card .rm { border: 0; background: none; color: var(--ink-3); cursor: pointer; width: 44px; height: 44px; margin: -12px -8px -12px -8px; font-size: 18px; line-height: 1; }
.line-card .rm:hover { color: var(--danger); }
.line-card .rm-hueco { display: block; width: 28px; }

/* ═══ ④ Review — qué falta para poder pagar, justo encima de los botones ═══ */
.pg-falta { margin: 0 0 8px; color: var(--pend); font-weight: 500; }
.pg-falta[hidden] { display: none; }

/* ═══ ④b Efectivo — pestañas y filas del banco ═══ */
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 var(--s-3); }
.tab { height: 40px; border-radius: var(--r-pill); border: 1.5px solid var(--box-border); background: #fff; font: inherit; font-size: 14px; font-weight: 500; color: var(--ink-2); cursor: pointer; }
.tab.on { border-color: var(--acc); background: var(--acc-tint); color: var(--acc-ink); }
.pg-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.pg-row:last-child { border-bottom: 0; padding-bottom: 0; }
.pg-row > div > span { display: block; font-size: 12px; font-weight: 500; color: var(--ink-2); }
.pg-row b { font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.pg-safe { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px 0 0; }

/* ═══ Listo ═══ */
.pg-hero { text-align: center; padding: 4px 0; }
.pg-jag { width: 112px; height: 112px; margin: 14px auto 10px; border-radius: 50%; background: #fff; box-shadow: var(--box-shadow-lift); display: grid; place-items: center; }
.pg-jag img { width: 80px; height: 80px; object-fit: contain; }
.pg-hero h1 { font-size: 30px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.pg-hero .num { font-size: 18px; font-weight: 700; color: var(--pink); }
.pg-hero p { margin: 6px 0 0; }
.pg-tag { margin: 18px 0 14px; display: flex; align-items: center; gap: 12px; }
.pg-tag .band { flex: 1; }
.pg-tag span { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.pg-box { border-color: rgba(9, 173, 194, .35); }

/* el logo negro se vuelve de color con un barrido tipo agua; completo a los 3 s (0.4 + 2.6) */
.pg-word { position: relative; width: 172px; aspect-ratio: 2490 / 608; margin: 0 auto 6px; }
.pg-word i { position: absolute; inset: 0; display: block; background-repeat: no-repeat; background-size: 100% auto; }
.pg-word .k { background-image: url("/pedidos-v2/assets/letters-black.png"); }
.pg-word .c {
  background-image: url("/pedidos-v2/assets/letters-color.png");
  -webkit-mask-image: linear-gradient(90deg, #000 0 45%, rgba(0,0,0,0) 55% 100%);
          mask-image: linear-gradient(90deg, #000 0 45%, rgba(0,0,0,0) 55% 100%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
}
.pg-word .h {
  background-image: linear-gradient(90deg, rgba(255,255,255,0) 0 44%, rgba(255,255,255,.85) 49%, rgba(255,255,255,0) 54% 100%);
  background-size: 300% 100%; background-position: 100% 0;
  -webkit-mask-image: url("/pedidos-v2/assets/letters-black.png"); mask-image: url("/pedidos-v2/assets/letters-black.png");
  -webkit-mask-size: 100% auto; mask-size: 100% auto;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  opacity: 0;
}
.pg-word.go .c { animation: sweep 2.6s cubic-bezier(.45, 0, .2, 1) .4s forwards; }
.pg-word.go .h { animation: shine 2.6s cubic-bezier(.45, 0, .2, 1) .35s forwards; }
@keyframes sweep { to { -webkit-mask-position: 0% 0; mask-position: 0% 0; } }
@keyframes shine {
  0%   { background-position: 100% 0; opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { background-position: 0% 0; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pg-word .k, .pg-word .h { display: none; }
  .pg-word .c { -webkit-mask: none; mask: none; }
}

/* ═══════════ ③ Productos: rejilla por familia (rondas 9–12, aprobada por Ivan 2026-09-21) ═══════════ */

.fam-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fam-list .pg-empty { grid-column: 1 / -1; }
.fam { border: 1px solid var(--box-border); border-radius: var(--r-box); background: #fff; box-shadow: var(--box-shadow); overflow: hidden; }
.fam.open { grid-column: 1 / -1; border-color: var(--acc); }
.fam-h { width: 100%; border: 0; background: none; padding: 0; text-align: left; cursor: pointer; font: inherit; color: inherit; display: block; }
.fam-h .ph { position: relative; display: block; aspect-ratio: 1; background: #fff; border-bottom: 1px solid var(--line); }
.fam.open .fam-h .ph { aspect-ratio: auto; height: 170px; }
.fam-h .ph img { width: 100%; height: 100%; object-fit: contain; display: block; }
.fam-h .ph .fam-pz { position: absolute; top: 8px; right: 8px; background: #fff; box-shadow: var(--box-shadow); }
.fam-h .ttl { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; padding: 10px 10px 12px 12px; }
.fam-h b { display: block; font-weight: 600; font-size: 15px; line-height: 1.25; }
.fam.open .fam-h b { font-size: 18px; }
.fam-h .s { font-size: 13px; color: var(--ink-2); }
.nuevo { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--pink); margin: 2px 0 0; }
.chev2 { width: 20px; height: 20px; color: var(--ink-3); transition: transform .28s var(--ease); flex: none; }
.fam.open .chev2 { transform: rotate(180deg); color: var(--acc-ink); }
.fam-pz { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px;
          background: var(--acc-tint); color: var(--acc-ink); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fam-pz[hidden] { display: none; }
.fam-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--ease); }
.fam-body > .in { overflow: hidden; padding: 0 14px; }
.fam.open .fam-body { grid-template-rows: 1fr; }
.fam.open .fam-body > .in { padding: 0 14px 14px; }

/* un renglón por tamaño: precio primero (la C que eligió Ivan) */
.op { display: grid; grid-template-columns: 66px 1fr auto; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.op:first-child { border-top: 0; }
.op .pr { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; line-height: 1; color: var(--ink); }
.op .pr small { display: block; font-size: 11px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; margin-top: 4px; }
.op .pr.may-on, .op .pr.may-on small { color: #1e9e3e; }             /* mayoreo alcanzado: verde que se nota */
.op .pr.may-on small { font-weight: 700; }
.op .n b { display: block; font-size: 15px; font-weight: 600; }
.op .n span { font-size: 13px; color: var(--ink-2); }
.op .qty { grid-template-columns: 40px 56px 40px; height: 42px; }
.op .qty input { cursor: text; }
.op .qty input:focus { outline: none; background: #fff; }
.op.on .qty { border-color: var(--acc); background: var(--acc-tint); }
.pie { margin: 10px 0 0; font-size: 13px; color: var(--ink-2); }

/* "También te puede interesar": circulitos debajo de los resultados */
.upsell { margin: 22px 0 6px; }
.upsell-t { margin: 0 0 12px; font-size: 16px; font-weight: 600; }
.circles { display: flex; gap: 14px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 8px;
           scroll-snap-type: x proximity; scroll-padding-inline: 16px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.circles::-webkit-scrollbar { display: none; }
.circ { flex: none; width: 86px; display: grid; justify-items: center; align-content: start; gap: 6px; border: 0; background: none; padding: 0; cursor: pointer;
        font: inherit; color: inherit; scroll-snap-align: start; -webkit-tap-highlight-color: transparent; }
.circ .c { width: 68px; height: 68px; border-radius: 50%; overflow: hidden; border: 1.5px solid var(--box-border); background: #fff;
           box-shadow: var(--box-shadow); display: grid; place-items: center; transition: transform .18s var(--ease), border-color .18s; }
.circ .c img { width: 88%; height: 88%; object-fit: contain; }
.circ span:last-child { font-size: 12px; font-weight: 500; text-align: center; line-height: 1.25; color: var(--ink-2); width: 86px; overflow-wrap: anywhere; }
.circ:active .c { transform: scale(.95); border-color: var(--acc); }

/* Aviso "las fotos son de muestra": naranja, se cierra para siempre */
.aviso { overflow: hidden; display: grid; grid-template-rows: 1fr; margin: 0 0 14px;
         transition: grid-template-rows .36s var(--ease), opacity .28s var(--ease), margin .36s var(--ease); }
.aviso[hidden] { display: none; }
.aviso > .in { min-height: 0; display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 14px; border-radius: var(--r-pill);
               background: rgba(243, 146, 35, .14); color: #b0461c; font-size: 13px; line-height: 1.35; }
.aviso > .in span { flex: 1; }
.aviso > .in b { font-weight: 600; }
.aviso.bye { grid-template-rows: 0fr; opacity: 0; margin: 0; }
.aviso .x { flex: none; width: 32px; height: 32px; margin: -4px -2px; border: 0; background: none; border-radius: 50%;
            display: grid; place-items: center; color: #b0461c; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.aviso .x svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }
.aviso .x:active { background: rgba(243, 146, 35, .18); }

/* Botón principal de una sola acción: 60 % del ancho (40 % más chico) y centrado */
.bar .btn.cta { width: 60%; justify-self: center; margin: 0 auto; }

/* Brillo metálico: franja de luz a 45° que cruza el botón, al 50 % (Ivan). Dice "toca aquí". */
.btn.sheen { position: relative; overflow: hidden; isolation: isolate; }
.btn.sheen::after {
  content: ""; position: absolute; top: -60%; left: -80%; width: 45%; height: 220%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.18) 30%, rgba(255,255,255,.75) 50%, rgba(255,255,255,.18) 70%, rgba(255,255,255,0) 100%);
  transform: rotate(45deg); pointer-events: none; z-index: 1; opacity: .5;
  animation: sheen 3.2s cubic-bezier(.4, 0, .2, 1) infinite;
}
.btn.sheen[disabled]::after { animation: none; opacity: 0; }
@keyframes sheen { 0% { left: -80%; } 45% { left: 135%; } 100% { left: 135%; } }
@media (prefers-reduced-motion: reduce) { .btn.sheen::after { animation: none; opacity: 0; } }

/* ═══════════ ②a Tus direcciones guardadas (ronda 13, versión C — aprobada 2026-09-22) ═══════════ */
.hola { margin: 0 0 4px; font-size: 14px; color: var(--ink-2); }
.guard-t { margin: 18px 0 10px; font-size: 13px; font-weight: 600; letter-spacing: .03em; color: var(--ink-3); text-transform: uppercase; }
.dcard { position: relative; border: 1.5px solid var(--box-border); border-radius: var(--r-box); background: #fff; box-shadow: var(--box-shadow);
         transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease); }
.dcard + .dcard { margin-top: 10px; }
.dcard.on { border-color: var(--acc); background: linear-gradient(0deg, var(--acc-tint), var(--acc-tint)), #fff; box-shadow: 0 0 0 3px var(--acc-ring); }
.dcard .pick { display: grid; grid-template-columns: 24px 1fr; gap: 12px; width: 100%; padding: 12px 48px 12px 12px; border: 0; background: none;
               text-align: left; font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dcard .dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--box-border); margin-top: 1px; display: grid; place-items: center; transition: border-color .2s; }
.dcard.on .dot { border-color: var(--acc); }
.dcard.on .dot::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--acc); }
.dcard b { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
.dcard .l { display: block; font-size: 14px; color: var(--ink-2); line-height: 1.4; margin-top: 2px; }
.dcard .ref { display: block; font-size: 13px; color: var(--ink-3); margin-top: 4px; }
.tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .03em; color: var(--acc-ink); background: var(--acc-tint);
       border-radius: 999px; padding: 2px 8px; margin-left: 6px; vertical-align: 2px; }
.dcard .ed-ico { position: absolute; top: 6px; right: 6px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: none; color: var(--ink-3);
                 display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dcard .ed-ico svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dcard .ed-ico:active { background: var(--soft); }
.vacio { text-align: center; color: var(--ink-3); font-size: 14px; padding: 18px 0; }
.nueva { margin-top: 14px; }
.nueva .btn { width: 100%; }

/* hoja que sube desde abajo para corregir una dirección */
.sheet-bg { position: fixed; inset: 0; background: rgba(28, 26, 23, .35); opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); z-index: 30; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 31; background: #fff; border-radius: 20px 20px 0 0; box-shadow: 0 -10px 40px rgba(0, 0, 0, .15);
         max-height: 88vh; overflow: auto; transform: translateY(105%); transition: transform .34s var(--ease); padding: 10px 16px calc(16px + var(--safe-b)); }
.sheet .grab { width: 40px; height: 4px; border-radius: 4px; background: var(--line); margin: 0 auto 12px; }
.sheet h2 { font-size: 18px; margin: 0 0 12px; }
.edit-acts { display: flex; gap: 10px; margin-top: 4px; }
.edit-acts .btn { flex: 1; height: 44px; }
.sheet-open .sheet { transform: none; }
.sheet-open .sheet-bg { opacity: 1; pointer-events: auto; }
@media (min-width: 520px) { .sheet { max-width: 480px; margin: 0 auto; } }


/* ═══════════════ Ver pedidos (ronda 15, aprobado por Ivan 2026-09-22) ═══════════════
   Lo más grande es el número AXK y la fecha. Sin abrir nada ya se ve si está pagado o
   cuánto falta, con su botón. Entregados y cancelados se archivan abajo: contorno gris,
   apagados; los activos llevan contorno verde. Los pagos NO son otra tabla igual a la de
   productos — son sellos. */

.o { border: 1.5px solid var(--acc); border-radius: var(--r-box); background: #fff; box-shadow: var(--box-shadow); overflow: hidden; }
.o + .o { margin-top: 12px; }
.o.arch { border-color: var(--box-border); border-width: 1px; background: var(--soft); box-shadow: none; }

.o-h { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; width: 100%;
       padding: 16px 16px 12px; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
       -webkit-tap-highlight-color: transparent; }
.o-num { display: block; font-size: 24px; font-weight: 700; letter-spacing: -.01em; line-height: 1.05; }
.o-fecha { display: block; font-size: 13px; color: var(--ink-3); margin-top: 3px; }
.o.arch .o-num { font-size: 19px; color: var(--ink-2); }
.o.arch .o-fecha { font-size: 12px; color: var(--ink-3); }
.o-der { display: flex; align-items: center; gap: 8px; }
.chev2 { width: 20px; height: 20px; color: var(--ink-3); transition: transform .28s var(--ease); flex: none; }
.o.open .chev2 { transform: rotate(180deg); color: var(--acc-ink); }

/* el dinero, visible SIN abrir la tarjeta */
.o-pago { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 0 16px 16px; }
.o-pago .txt { font-size: 15px; }
.o-pago .txt b { display: block; font-size: 15px; font-weight: 600; }
.o-pago .txt .s { display: block; font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.falta { color: var(--pend); }
.pagado { color: var(--ok); }
/* Al abrir la tarjeta el botón chico se va con un fundido y deja solo el grande de abajo.
   Curva pareja (no la del kit, que se apaga de golpe al inicio) y cede su ancho poco a
   poco para que la línea no dé un brinco. */
.o-pago .btn { flex: none; max-width: 200px; overflow: hidden; white-space: nowrap;
               transition: opacity .5s cubic-bezier(.4, 0, .2, 1), transform .5s cubic-bezier(.4, 0, .2, 1),
                           max-width .5s cubic-bezier(.4, 0, .2, 1), padding .5s cubic-bezier(.4, 0, .2, 1); }
.o.open .o-pago .btn { opacity: 0; transform: scale(.94); max-width: 0; padding: 0; pointer-events: none; border-width: 0; }
@media (prefers-reduced-motion: reduce) { .o-pago .btn { transition: none; } }

/* cuerpo desplegable */
.o-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--ease); }
.o-body > .in { overflow: hidden; }
.o.open .o-body { grid-template-rows: 1fr; }
.o.open .o-body > .in { padding: 14px 16px 16px; border-top: 1px solid var(--line); }

.sub-t { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--ink-3); text-transform: uppercase; }
.reng { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; }
.reng:first-of-type { border-top: 0; }
.reng b { font-weight: 600; }
.reng .s { display: block; font-size: 13px; color: var(--ink-3); margin-top: 1px; }
.reng .n { font-variant-numeric: tabular-nums; white-space: nowrap; }

.total-box { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
             margin: 12px 0 0; padding: 12px 0 0; border-top: 2px solid var(--ink); }
.total-box .k { font-size: 14px; font-weight: 600; }
.total-box .v { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

.archivo-t { margin: 26px 0 10px; font-size: 13px; font-weight: 600; letter-spacing: .03em; color: var(--ink-3); text-transform: uppercase; }

/* los pagos como sellos: verde el confirmado, naranja el que sigue en revisión */
.sellos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sello { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 12px; border-radius: 999px;
         background: var(--ok-bg); color: var(--ok); font-size: 13px; font-weight: 600; }
.sello.rev { background: var(--pend-bg); color: var(--pend); }
.sello svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none; }