/* =====================================================================
   Zona del cliente (ingresar / crear cuenta, carrito, finalizar pedido,
   Mi cuenta). Diseño aprobado el 2026-10-02. Clases con prefijo "zc-".
   ===================================================================== */
:root {
  --zc-azul: #0067ff; --zc-boton: #1E90FF; --zc-boton-h: #1873cc; --zc-osc: #1f3366; --zc-marca: #39539C; --zc-precio: #004aad;
  --zc-celeste: #dbe8ff; --zc-celeste-2: #eef4ff; --zc-fondo: #f4f6f8; --zc-borde: #e2e8f0; --zc-texto: #334155; --zc-suave: #8a94a6;
  --zc-verde: #16a34a; --zc-wa: #25d366; --zc-rojo: #dc2626;
}
.zc-titulo { font-family: 'Barlow Semi Condensed', sans-serif; color: var(--zc-osc); font-weight: 600; letter-spacing: .02em; }
.zc-monto { font-family: 'Barlow Semi Condensed', sans-serif; color: var(--zc-precio); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zc-contenedor { max-width: 1200px; margin: 0 auto; padding: 32px 20px 60px; color: var(--zc-texto); }

.zc-boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 10px; border: 0; font: 700 14px Lato, sans-serif; cursor: pointer; text-transform: uppercase; letter-spacing: .03em; text-decoration: none; transition: background .15s; }
.zc-boton.primario { background: var(--zc-boton); color: #fff; }
.zc-boton.primario:hover { background: var(--zc-boton-h); color: #fff; }
.zc-boton.claro { background: #fff; color: var(--zc-osc); border: 1px solid #cbd5e1; }
.zc-boton.claro:hover { border-color: var(--zc-boton); color: var(--zc-osc); }
.zc-boton.wa { background: var(--zc-wa); color: #fff; }
.zc-boton.chico { height: 38px; font-size: 12px; padding: 0 14px; }
.zc-boton.ancho { width: 100%; }
.zc-boton:disabled { opacity: .6; cursor: default; }
.zc-tarjeta { background: #fff; border: 1px solid var(--zc-borde); border-radius: 14px; }
.zc-campo { margin-bottom: 14px; }
.zc-campo label { display: block; font-size: 13px; font-weight: 700; color: #475569; margin-bottom: 6px; }
.zc-campo input, .zc-campo select, .zc-campo textarea { width: 100%; height: 46px; padding: 0 14px; border: 1px solid #cbd5e1; border-radius: 10px; font: 15px Lato, sans-serif; color: #1e293b; background: #fff; }
.zc-campo textarea { height: 90px; padding: 12px 14px; resize: vertical; }
.zc-campo input:focus, .zc-campo select:focus, .zc-campo textarea:focus { outline: 2px solid #bfdbfe; border-color: var(--zc-boton); }
.zc-campo .zc-nota { font-size: 12px; color: var(--zc-suave); margin-top: 5px; }
.zc-campo .zc-error { font-size: 13px; color: var(--zc-rojo); margin-top: 5px; }
.zc-campo.con-error input, .zc-campo.con-error select { border-color: #fca5a5; }
.zc-fila2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.zc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.zc-chip.rol { background: #e0edff; color: var(--zc-osc); }
.zc-aviso { border-radius: 10px; padding: 12px 14px; font-size: 14px; line-height: 1.5; margin-bottom: 18px; }
.zc-aviso.ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.zc-aviso.error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.zc-aviso.info { background: var(--zc-celeste-2); border: 1px solid #c7dbff; color: var(--zc-osc); }
.zc-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Ingresar / Crear cuenta ---------- */
.zc-acceso { max-width: 980px; margin: 40px auto; display: grid; grid-template-columns: 1fr 1.1fr; border-radius: 18px; overflow: hidden; box-shadow: 0 20px 50px rgba(15,23,42,.12); background: #fff; }
.zc-acceso-marca { background: linear-gradient(160deg, #1f3366 0%, #39539C 55%, #1E90FF 130%); color: #fff; padding: 44px 40px; display: flex; flex-direction: column; }
.zc-acceso-marca img { width: 130px; filter: brightness(0) invert(1); margin-bottom: 30px; }
.zc-acceso-marca h2 { font-family: 'Barlow Semi Condensed', sans-serif; font-size: 34px; line-height: 1.05; margin: 0 0 14px; font-weight: 600; color: #fff; }
.zc-acceso-marca p { color: #cfe0ff; line-height: 1.6; margin: 0 0 26px; }
.zc-beneficio { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; font-size: 15px; }
.zc-beneficio i { flex: 0 0 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; font-style: normal; }
.zc-beneficio i svg { width: 18px; height: 18px; color: #fff; }
.zc-beneficio span { color: #cfe0ff; }
/* Contraseña con "ojito" para verla */
.zc-clave { position: relative; }
.zc-clave input { padding-right: 48px; }
.zc-ojo { position: absolute; right: 6px; top: 6px; width: 34px; height: 34px; border: 0; border-radius: 8px; background: none; color: #94a3b8; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.zc-ojo:hover { color: #1f3366; background: #f1f5f9; }
.zc-ojo svg { width: 20px; height: 20px; }
.zc-ojo.viendo { color: #1E90FF; }
.zc-acceso-marca .zc-pie { margin-top: auto; font-size: 13px; color: #cfe0ff; }
.zc-acceso-form { padding: 40px 44px; }
.zc-tabs { display: flex; background: var(--zc-fondo); border-radius: 12px; padding: 4px; margin-bottom: 26px; }
.zc-tabs a { flex: 1; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 9px; font: 700 14px Lato, sans-serif; color: #64748b; }
.zc-tabs a.activa { background: #fff; color: var(--zc-osc); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.zc-acceso-form h1 { font-size: 30px; margin: 0 0 6px; }
.zc-acceso-form .zc-sub { color: var(--zc-suave); margin: 0 0 22px; font-size: 14px; }
.zc-linea-o { display: flex; align-items: center; gap: 10px; color: var(--zc-suave); font-size: 12px; margin: 18px 0; }
.zc-linea-o::before, .zc-linea-o::after { content: ""; flex: 1; border-top: 1px solid var(--zc-borde); }
.zc-recordar { display: flex; justify-content: space-between; align-items: center; margin: -2px 0 20px; font-size: 13px; }
.zc-recordar label { display: flex; gap: 6px; align-items: center; }
.zc-listo { text-align: center; padding: 10px 0; }
.zc-listo .icono { width: 74px; height: 74px; border-radius: 50%; background: #dcfce7; color: var(--zc-verde); font-size: 36px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }

/* ---------- Carrito lateral ---------- */
.zc-fondo-cajon { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 100000; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.zc-fondo-cajon.abierto { opacity: 1; visibility: visible; }
.zc-cajon { position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 100%; background: #fff; display: flex; flex-direction: column; box-shadow: -10px 0 30px rgba(0,0,0,.2); z-index: 100001; transform: translateX(100%); transition: transform .3s ease; color: var(--zc-texto); }
.zc-cajon.abierto { transform: translateX(0); }
body.zc-cajon-abierto { overflow: hidden; }
.zc-cajon-cab { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--zc-borde); }
.zc-cajon-cab h3 { margin: 0; font-size: 24px; }
.zc-cajon-cab button { background: var(--zc-fondo); border: 0; width: 36px; height: 36px; border-radius: 50%; font-size: 20px; cursor: pointer; color: #475569; }
.zc-cajon-cuerpo { flex: 1; overflow: auto; padding: 8px 22px; }
.zc-cajon-vacio { text-align: center; padding: 50px 10px; color: var(--zc-suave); }
.zc-cajon-vacio .icono { font-size: 44px; }
.zc-item { display: grid; grid-template-columns: 70px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid #eef1f5; }
.zc-item img { width: 70px; height: 70px; object-fit: contain; border: 1px solid var(--zc-borde); border-radius: 10px; background: #fff; }
.zc-item h4 { margin: 0 0 3px; font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 600; color: var(--zc-osc); font-size: 17px; text-transform: uppercase; letter-spacing: .02em; line-height: 1.15; }
.zc-item h4 a { color: inherit; }
.zc-cod { font-size: 12px; color: var(--zc-suave); }
.zc-item .abajo { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; gap: 10px; }
.zc-item .zc-monto { font-size: 19px; }
.zc-item .acciones { display: flex; gap: 14px; margin-top: 8px; font-size: 12px; }
.zc-item .acciones button, .zc-enlace { background: none; border: 0; padding: 0; color: #64748b; cursor: pointer; font: inherit; font-size: 12px; }
.zc-item .acciones button:hover, .zc-enlace:hover { color: var(--zc-azul); }
.zc-no-disponible { font-size: 12px; color: var(--zc-rojo); font-weight: 700; margin-top: 6px; }
.zc-cant { display: inline-flex; align-items: center; border: 1px solid #cbd5e1; border-radius: 999px; height: 34px; background: #fff; }
.zc-cant button { width: 32px; height: 100%; border: 0; background: none; font-size: 16px; color: var(--zc-osc); cursor: pointer; }
.zc-cant input { width: 38px; border: 0; text-align: center; font: 700 14px Lato, sans-serif; color: #1e293b; -moz-appearance: textfield; background: transparent; }
.zc-cant input::-webkit-outer-spin-button, .zc-cant input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.zc-cajon-pie { border-top: 1px solid var(--zc-borde); padding: 18px 22px; background: #fbfcfe; }
.zc-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.zc-total .zc-monto { font-size: 28px; }
.zc-cajon-pie .zc-nota { font-size: 12px; color: var(--zc-suave); margin: 0 0 14px; }
.zc-cajon-pie .botones { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.zc-cargando { opacity: .55; pointer-events: none; }

/* Ícono del carrito en el encabezado */
.zc-icono-carrito { position: relative; display: inline-flex; width: 40px; height: 40px; border-radius: 50%; background: #fff; align-items: center; justify-content: center; font-size: 18px; box-shadow: 0 1px 3px rgba(0,0,0,.08); cursor: pointer; border: 0; }
.zc-icono-carrito .n { position: absolute; top: -4px; right: -4px; background: var(--zc-rojo); color: #fff; font-size: 11px; font-weight: 900; border-radius: 999px; min-width: 19px; height: 19px; padding: 0 4px; display: flex; align-items: center; justify-content: center; }
.zc-icono-carrito .n[hidden] { display: none; }

/* Íconos dibujados (antes eran emojis): ver tienda/partials/icono */
.icono-linea { width: 14px; height: 14px; flex: none; margin-right: 5px; vertical-align: -2px; }
.zc-boton .icono-linea, .zc-mini-boton .icono-linea { margin-right: 0; }
.zc-icono-carrito .icono-linea { width: 20px; height: 20px; margin: 0; color: #1f3366; }
.zc-mini-boton .icono-estrella, .zc-item .acciones .icono-estrella { color: #f59e0b; fill: #fde68a; }
.zc-item .acciones .icono-linea { width: 12px; height: 12px; margin-right: 3px; }
.zc-resumen .info .icono-linea { width: 15px; height: 15px; color: #1E90FF; margin-right: 4px; vertical-align: -3px; }
.zc-cajon-vacio .icono .icono-linea { width: 44px; height: 44px; margin: 0; color: #cbd5e1; stroke-width: 1.6; }
.zc-vacio .icono .icono-linea { width: 54px; height: 54px; margin: 0; color: #cbd5e1; stroke-width: 1.6; }
.zc-menu .zc-menu-ic { display: inline-flex; }
.zc-menu .zc-menu-ic .icono-linea { width: 18px; height: 18px; margin: 0; }
.cuenta-menu .icono-linea, .menu-celular .icono-linea { width: 15px; height: 15px; margin-right: 8px; vertical-align: -3px; }
.zc-proximamente .icono-linea { width: 18px; height: 18px; vertical-align: -3px; }
.zc-confirmado li .icono-linea { width: 16px; height: 16px; color: #1E90FF; margin-right: 6px; vertical-align: -3px; }

/* Aviso flotante ("Agregado al carrito") */
.zc-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 30px); background: #0f172a; color: #fff; padding: 12px 20px; border-radius: 10px; font-size: 14px; font-weight: 700; z-index: 100002; opacity: 0; transition: all .25s; pointer-events: none; }
.zc-toast.visible { opacity: 1; transform: translate(-50%, 0); }
.zc-toast.error { background: var(--zc-rojo); }

/* ---------- Pasos ---------- */
.zc-pasos { display: flex; margin: 0 auto 30px; max-width: 640px; }
.zc-paso { flex: 1; text-align: center; position: relative; font-size: 13px; font-weight: 700; color: var(--zc-suave); }
.zc-paso b { display: flex; margin: 0 auto 6px; width: 34px; height: 34px; border-radius: 50%; background: #e2e8f0; color: #64748b; align-items: center; justify-content: center; position: relative; z-index: 1; }
.zc-paso::before { content: ""; position: absolute; top: 17px; left: -50%; right: 50%; border-top: 2px solid #e2e8f0; }
.zc-paso:first-child::before { display: none; }
.zc-paso.hecho b, .zc-paso.actual b { background: var(--zc-boton); color: #fff; }
.zc-paso.hecho::before, .zc-paso.actual::before { border-color: var(--zc-boton); }
.zc-paso.actual { color: var(--zc-osc); }

/* ---------- Página del carrito ---------- */
.zc-carrito { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; }
.zc-lista { padding: 6px 24px; }
.zc-acciones-fila { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.zc-mini-boton { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid #cbd5e1; background: #fff; color: var(--zc-osc); font: 700 12px Lato, sans-serif; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.zc-mini-boton:hover { border-color: var(--zc-boton); background: var(--zc-celeste-2); }
.zc-mini-boton.quitar { color: #b91c1c; border-color: #fecaca; }
.zc-mini-boton.quitar:hover { background: #fef2f2; border-color: #f87171; }
.zc-acciones-carrito { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding: 12px 0 10px; border-top: 1px solid #eef1f5; }
/* "Vaciar carrito": enlace discreto al pie de la lista (no compite con los botones de cada artículo) */
.zc-vaciar { border: 0; background: none; padding: 4px 2px; font: 700 13px Lato, sans-serif; color: #94a3b8; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.zc-vaciar:hover { color: #b91c1c; }
/* "Guardados para después": color propio (crema + borde punteado) para que se note que no es parte del pedido */
.zc-carrito .zc-guardados { background: #fffbeb; border: 1.5px dashed #f5c451; }
.zc-carrito .zc-guardados .zc-mini { border-bottom-color: #f3e2b0; }
.zc-carrito .zc-guardados .zc-mini:last-child { border-bottom: 0; }
.zc-fila { display: grid; grid-template-columns: 90px 1fr 130px 130px; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid #eef1f5; }
.zc-fila:last-child { border-bottom: 0; }
.zc-fila img { width: 90px; height: 90px; object-fit: contain; border: 1px solid var(--zc-borde); border-radius: 12px; background: #fff; }
.zc-fila h4 { margin: 0 0 4px; font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 600; color: var(--zc-osc); font-size: 19px; text-transform: uppercase; line-height: 1.15; }
.zc-fila h4 a { color: inherit; }
.zc-fila .zc-enlace { font-size: 13px; margin-top: 8px; color: var(--zc-azul); }
.zc-fila > .zc-monto { font-size: 21px; text-align: right; }
.zc-quitar { background: none; border: 0; color: #94a3b8; font-size: 18px; cursor: pointer; }
.zc-quitar:hover { color: var(--zc-rojo); }
.zc-resumen { padding: 24px; position: sticky; top: 20px; }
.zc-resumen h3 { margin: 0 0 18px; font-size: 24px; }
.zc-resumen .linea { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 10px; }
.zc-resumen .linea span:last-child { font-weight: 700; color: #1e293b; }
.zc-resumen .zc-total { border-top: 1px dashed #cbd5e1; padding-top: 14px; margin: 14px 0 18px; }
.zc-resumen .info { background: var(--zc-celeste-2); border-radius: 10px; padding: 12px 14px; font-size: 13px; line-height: 1.5; margin-bottom: 16px; color: #334155; }
.zc-guardados { margin-top: 24px; padding: 20px 24px; }
.zc-guardados h3 { margin: 0 0 4px; font-size: 22px; }
.zc-vacio { text-align: center; padding: 60px 20px; }
.zc-vacio .icono { font-size: 54px; }

/* ---------- Finalizar pedido ---------- */
.zc-checkout { display: grid; grid-template-columns: 1fr 380px; gap: 24px; align-items: start; }
.zc-bloque { padding: 26px 28px; margin-bottom: 18px; }
.zc-bloque h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 22px; }
.zc-bloque h3 i { font-style: normal; width: 30px; height: 30px; border-radius: 50%; background: var(--zc-celeste); color: var(--zc-osc); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-family: Lato, sans-serif; font-weight: 900; }
.zc-opcion { display: flex; gap: 12px; align-items: flex-start; border: 2px solid var(--zc-boton); background: var(--zc-celeste-2); border-radius: 12px; padding: 14px 16px; }
.zc-opcion .punto { width: 20px; height: 20px; border-radius: 50%; border: 6px solid var(--zc-boton); background: #fff; flex-shrink: 0; margin-top: 2px; }
.zc-opcion strong { display: block; color: var(--zc-osc); }
.zc-opcion span { font-size: 13px; color: #64748b; }
.zc-mini { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid #eef1f5; font-size: 14px; }
.zc-mini img { width: 48px; height: 48px; object-fit: contain; border: 1px solid var(--zc-borde); border-radius: 8px; background: #fff; }
.zc-mini div { flex: 1; min-width: 0; }
.zc-mini small { color: var(--zc-suave); display: block; }

/* ---------- Pedido confirmado ---------- */
.zc-confirmado { max-width: 680px; margin: 0 auto; text-align: center; padding: 44px 40px; }
.zc-check { width: 84px; height: 84px; border-radius: 50%; background: #dcfce7; color: var(--zc-verde); font-size: 42px; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.zc-confirmado h1 { font-size: 38px; margin: 0 0 8px; }
.zc-numero { display: inline-block; background: var(--zc-celeste-2); color: var(--zc-osc); font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 700; font-size: 22px; padding: 6px 18px; border-radius: 999px; margin: 6px 0 20px; }
.zc-que-sigue { text-align: left; background: var(--zc-fondo); border-radius: 12px; padding: 18px 22px 18px 40px; margin: 10px 0 24px; }
.zc-que-sigue li { margin-bottom: 8px; line-height: 1.5; }

/* ---------- Mi cuenta ---------- */
.zc-cuenta { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: start; }
/* Las columnas no se estiran más que la pantalla (si no, en el celular la página se corre a los costados) */
.zc-cuenta > *, .zc-carrito > *, .zc-checkout > * { min-width: 0; }
.zc-tabla { display: table; }
.zc-bloque-cuenta { overflow-x: auto; }
.zc-menu { padding: 18px 12px; position: sticky; top: 20px; }
.zc-perfil { display: flex; gap: 12px; align-items: center; padding: 6px 10px 18px; border-bottom: 1px solid var(--zc-borde); margin-bottom: 10px; }
.zc-avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #39539C, #1E90FF); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 18px; flex-shrink: 0; }
.zc-perfil strong { display: block; color: #1e293b; }
.zc-menu a, .zc-menu button { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; color: #475569; font-weight: 700; font-size: 14px; width: 100%; background: none; border: 0; font-family: inherit; cursor: pointer; text-align: left; }
.zc-menu a:hover, .zc-menu button:hover { background: var(--zc-fondo); color: #475569; }
.zc-menu a.activa { background: var(--zc-celeste-2); color: var(--zc-osc); }
.zc-menu .num { margin-left: auto; background: var(--zc-boton); color: #fff; font-size: 11px; border-radius: 999px; padding: 2px 8px; }
.zc-menu form { margin: 8px 0 0; border-top: 1px solid var(--zc-borde); padding-top: 6px; }
.zc-menu .salir { color: var(--zc-rojo); }
.zc-saludo { padding: 26px 28px; background: linear-gradient(120deg, #1f3366, #39539C); color: #fff; border: 0; margin-bottom: 18px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.zc-saludo h2 { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 600; font-size: 32px; margin: 0 0 4px; color: #fff; }
.zc-saludo p { margin: 0; color: #cfe0ff; }
.zc-indicadores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
.zc-indicador { padding: 18px 20px; }
.zc-indicador small { color: var(--zc-suave); font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: .08em; }
.zc-indicador strong { display: block; font-family: 'Barlow Semi Condensed', sans-serif; font-size: 34px; color: var(--zc-osc); font-weight: 600; margin-top: 4px; }
.zc-indicador a { font-size: 13px; }
.zc-bloque-cuenta { padding: 22px 24px; margin-bottom: 18px; }
.zc-bloque-cuenta .cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.zc-bloque-cuenta h3 { margin: 0; font-size: 22px; }
.zc-estado { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; display: inline-block; }
.zc-e-nuevo { background: #e0edff; color: #1d4ed8; }
.zc-e-confirmado { background: #ede9fe; color: #6d28d9; }
.zc-e-preparacion { background: #fef3c7; color: #92400e; }
.zc-e-facturado { background: #cffafe; color: #155e75; }
.zc-e-listo, .zc-e-despachado { background: #dcfce7; color: #166534; }
.zc-e-completado { background: #f1f5f9; color: #475569; }
.zc-e-cancelado { background: #fee2e2; color: #991b1b; }
.zc-tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.zc-tabla th { text-align: left; color: var(--zc-suave); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; padding: 10px 8px; border-bottom: 1px solid var(--zc-borde); }
.zc-tabla td { padding: 14px 8px; border-bottom: 1px solid #eef1f5; }
.zc-tabla td .zc-monto { font-size: 18px; }
.zc-tabla tr:last-child td { border-bottom: 0; }
.zc-tiempo { display: flex; margin: 20px 0 6px; }
.zc-hito { flex: 1; text-align: center; position: relative; font-size: 12px; font-weight: 700; color: var(--zc-suave); }
.zc-hito b { display: flex; width: 28px; height: 28px; margin: 0 auto 6px; border-radius: 50%; background: #e2e8f0; align-items: center; justify-content: center; color: #fff; font-size: 13px; position: relative; z-index: 1; }
.zc-hito::before { content: ""; position: absolute; top: 14px; left: -50%; right: 50%; border-top: 3px solid #e2e8f0; }
.zc-hito:first-child::before { display: none; }
.zc-hito.hecho b { background: var(--zc-verde); }
.zc-hito.hecho::before { border-color: var(--zc-verde); }
.zc-hito.actual b { background: var(--zc-boton); box-shadow: 0 0 0 5px #dbeafe; }
.zc-hito.actual::before { border-color: var(--zc-verde); }
.zc-hito.actual { color: var(--zc-osc); }
.zc-hito small { display: block; font-weight: 400; color: var(--zc-suave); }
.zc-ayuda-wa { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; background: #f0fdf4; border: 1px solid #bbf7d0; }
.zc-ayuda-wa p { margin: 0; color: #166534; font-weight: 700; }
.zc-ayuda-wa small { display: block; color: #15803d; font-weight: 400; }
.zc-grilla-guardados { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.zc-guardado { padding: 14px; text-align: center; display: flex; flex-direction: column; }
.zc-guardado img { width: 100%; height: 120px; object-fit: contain; }
.zc-guardado h4 { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 600; color: var(--zc-osc); font-size: 17px; margin: 8px 0 2px; text-transform: uppercase; }
.zc-guardado .zc-monto { font-size: 20px; display: block; margin: 6px 0 10px; }
.zc-guardado .acciones { margin-top: auto; display: grid; gap: 6px; }
.zc-proximamente { border: 2px dashed #cbd5e1; border-radius: 14px; padding: 40px; text-align: center; color: #64748b; background: #fff; }
.zc-detalle-items { margin-top: 10px; }

@media (max-width: 860px) {
  .zc-acceso { grid-template-columns: 1fr; margin: 0; border-radius: 0; }
  /* En el celular: primero el formulario, después el panel de beneficios (sin repetir el logo del menú) */
  .zc-acceso-form { order: -1; }
  .zc-acceso-marca { padding: 26px 22px; }
  .zc-acceso-marca img { display: none; }
  .zc-acceso-marca h2 { font-size: 24px; margin-bottom: 8px; }
  .zc-acceso-marca p { margin-bottom: 18px; }
  .zc-acceso-marca .zc-pie { margin-top: 10px; }
  .zc-acceso-form { padding: 26px 20px; }
  .zc-contenedor { padding: 20px 12px 40px; }
  .zc-carrito, .zc-checkout, .zc-cuenta { grid-template-columns: 1fr; }
  .zc-lista { padding: 4px 14px; }
  /* Carrito en el celular: foto + datos arriba; debajo, la cantidad (tamaño justo) y el importe a la derecha, en un mismo renglón */
  .zc-fila { grid-template-columns: 70px auto 1fr; gap: 10px 14px; }
  .zc-fila img { width: 70px; height: 70px; align-self: start; }
  .zc-fila > div:not(.zc-cant):not(.zc-monto) { grid-column: 2 / -1; min-width: 0; }
  .zc-fila > div:empty { display: none; }
  /* La cantidad va alineada con el nombre, más compacta, y el importe a su derecha
     (probado a 360 px con importes de ocho cifras: entra entero dentro de la tarjeta) */
  .zc-fila > .zc-cant { grid-column: 2; justify-self: start; height: 32px; }
  .zc-fila > .zc-cant button { width: 28px; }
  .zc-fila > .zc-cant input { width: 30px; }
  .zc-fila > .zc-monto { grid-column: 3; text-align: right; font-size: 18px; white-space: nowrap; min-width: 0; }
  /* Orden en el celular: artículos → Resumen (total y "Continuar") → Guardados para después */
  .zc-carrito > div:first-child { display: contents; }
  .zc-carrito .zc-lista { order: 1; }
  .zc-carrito .zc-resumen { order: 2; }
  .zc-carrito .zc-guardados { order: 3; margin-top: 0; }
  .zc-fila .zc-quitar { display: none; }
  /* Menú de Mi cuenta en el celular: las 6 opciones a la vista, en grilla de 3 x 2 (ícono arriba, nombre debajo) */
  .zc-menu { position: static; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px; }
  .zc-menu .zc-perfil { display: none; }
  .zc-menu a, .zc-menu button { position: relative; flex-direction: column; justify-content: center; gap: 4px; padding: 10px 4px; font-size: 12.5px; line-height: 1.15; text-align: center; width: 100%; height: 100%; min-height: 58px; }
  .zc-menu .zc-menu-ic { font-size: 18px; line-height: 1; }
  .zc-menu .zc-menu-ic .icono-linea { width: 20px; height: 20px; }
  .zc-menu .num { position: absolute; top: 4px; right: 6px; margin: 0; padding: 1px 6px; }
  .zc-menu form { margin: 0; border: 0; padding: 0; }
  .zc-grilla-guardados { grid-template-columns: 1fr 1fr; }
  /* Resumen de Mi cuenta en el celular: las 3 tarjetas en una fila, compactas (antes 2 + 1 con un hueco) */
  .zc-indicadores { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .zc-indicador { padding: 12px 10px; display: flex; flex-direction: column; }
  .zc-indicador small { font-size: 9.5px; letter-spacing: .04em; line-height: 1.25; min-height: 2.5em; }
  .zc-indicador strong { font-size: 28px; margin-top: 2px; line-height: 1.1; }
  .zc-indicador a { font-size: 10.5px; line-height: 1.25; margin-top: 4px; white-space: nowrap; }
  .zc-fila2 { grid-template-columns: 1fr; }
  .zc-saludo { flex-direction: column; align-items: flex-start; }
  .zc-tabla .ocultar-movil { display: none; }
  .zc-ayuda-wa { flex-direction: column; align-items: flex-start; }
  .zc-bloque { padding: 20px 16px; }
  .zc-confirmado { padding: 30px 18px; }
  .zc-hito { font-size: 10px; }
  .zc-resumen { position: static; }
  /* Guardados para después (carrito): el nombre arriba a todo el ancho; precio y botón debajo */
  .zc-guardados .zc-mini { display: grid; grid-template-columns: auto 1fr auto; column-gap: 12px; row-gap: 8px; align-items: center; }
  .zc-guardados .zc-mini img { grid-row: 1 / span 2; align-self: start; }
  .zc-guardados .zc-mini > div { grid-column: 2 / -1; min-width: 0; }
  .zc-guardados .zc-mini .zc-monto { grid-column: 2; }
  .zc-guardados .zc-mini .zc-boton { grid-column: 3; }
}