/* Aluca · checkout y estado del pedido. Se suma después de aluca.css y reutiliza su lenguaje (tarjetas, pastillas, campos con la etiqueta adentro). */

.migas { margin: clamp(4px, .6vw, 10px) var(--g) clamp(10px, 1vw, 16px); }
.migas ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0 calc(var(--g) * 1.2); list-style: none; font-size: var(--t-xs); color: var(--suave); }
.migas li + li::before { content: '/'; margin-right: 6px; opacity: .5; }
.migas a { text-decoration: underline; text-underline-offset: 3px; }
.migas a:hover { color: var(--acento); }

.ck { margin-top: clamp(20px, 3vw, 60px); }
.ck__cabeza { display: grid; gap: 10px; padding: 0 calc(var(--g) * 1.2); margin-bottom: clamp(16px, 2vw, 36px); }
.ck__vacio { display: grid; justify-items: start; gap: 16px; padding: clamp(20px, 3vw, 48px); border-radius: var(--r); background: var(--tarjeta); transition: background-color .6s; }
.ck__vacio[hidden], .ck__grilla[hidden] { display: none; }

.ck__grilla { display: grid; gap: var(--g); align-items: start; }
.ck__col { display: grid; gap: var(--g); }
.ck__caja { margin: 0; min-width: 0; padding: clamp(16px, 1.8vw, 32px); border: 0; border-radius: var(--r); background: var(--tarjeta); transition: background-color .6s; }
.ck__legend { float: left; width: 100%; display: flex; align-items: center; gap: 10px; padding: 0; margin-bottom: 14px; font: 600 var(--t-l)/1.1 'Manrope', sans-serif; letter-spacing: -.02em; }
.ck__legend span { display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--acento); color: #fff; font: 700 .55em/1 'Manrope', sans-serif; }

/* campos: la etiqueta va adentro (placeholder), igual que el formulario de Empresas */
.ck__campos { display: grid; grid-template-columns: 1fr; gap: 10px; }
.ck-campo { display: grid; gap: 6px; align-content: start; min-width: 0; }
.ck-campo input { width: 100%; padding: 1em 1.2em; border-radius: calc(var(--r) * .8); border: 1px solid transparent; background: var(--fondo); color: var(--texto); font: 500 var(--t-m)/1.3 'Manrope', sans-serif; outline: 0; transition: border-color .3s, background-color .6s; }
.ck-campo input::placeholder { color: var(--suave); opacity: .7; }
.ck-campo input:focus { border-color: var(--acento); }
.ck-campo [aria-invalid="true"] { border-color: var(--acento); }
.ck-error { color: var(--acento); font-size: var(--t-xs); }
.ck-error:empty { display: none; }
.ck__legend + * { clear: both; }
.ck__campos--dir { grid-template-columns: 1fr 1fr; }
.ck__campos--dir .ck-campo--calle { grid-column: 1 / -1; }
.ck__campos--dir.ck--oculto { display: none; }

.ck__ayuda { margin: 12px 0 0; color: var(--suave); font-size: var(--t-s); line-height: 1.45; }
.ck__ayuda:empty { display: none; }
.ck__ayuda--ok { color: var(--acento); font-weight: 600; }

/* opciones de envío: radios con forma de tarjeta */
.ck__opciones { display: grid; gap: 8px; margin-top: 12px; }
.ck__opciones:empty { display: none; }
.ck-op { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 14px 16px; border-radius: calc(var(--r) * .8); background: var(--fondo); border: 1px solid transparent; cursor: pointer; transition: border-color .3s, background-color .6s; }
.ck-op:has(input:checked) { border-color: var(--acento); }
.ck-op:has(input:focus-visible) { outline: 2px solid var(--acento); outline-offset: 2px; }
.ck-op input { width: 18px; height: 18px; accent-color: var(--acento); margin: 0; }
.ck-op b { display: block; font-weight: 700; font-size: var(--t-s); }
.ck-op small { display: block; color: var(--suave); font-size: var(--t-xs); line-height: 1.4; }
.ck-op__precio { font: 700 var(--t-s)/1 'Manrope', sans-serif; white-space: nowrap; }
.ck-op__precio--gratis { color: var(--acento); }

.ck__cupon { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: start; }
.ck__cupon .pastilla { padding: 1.05em 1.6em; }

/* resumen */
.ck__resumen { display: grid; gap: 14px; padding: clamp(16px, 1.8vw, 32px); border-radius: var(--r); background: var(--tarjeta); transition: background-color .6s; }
.ck__resumen-titulo { margin: 0; font: 600 var(--t-l)/1.1 'Manrope', sans-serif; letter-spacing: -.02em; }
.ck__items { list-style: none; margin: 0; padding: 0; display: grid; }
.ck-item { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.ck-item img { width: 56px; height: 56px; border-radius: 8px; background: var(--fondo); object-fit: contain; object-position: 50% 0; }
.ck-item strong { display: block; font-weight: 700; font-size: var(--t-s); }
.ck-item small { color: var(--suave); font-size: var(--t-xs); }
.ck-item b { font-size: var(--t-s); white-space: nowrap; }
.ck__totales { margin: 0; display: grid; gap: 8px; }
.ck__totales div { display: flex; justify-content: space-between; gap: 12px; font-size: var(--t-s); }
.ck__totales div[hidden] { display: none; }
.ck__totales dt { color: var(--suave); }
.ck__totales dd { margin: 0; font-weight: 600; text-align: right; }
.ck__total { padding-top: 12px; border-top: 1px solid var(--linea); font: 700 var(--t-m)/1 'Manrope', sans-serif; }
.ck__total dt { color: var(--texto); }
.ck__total dd { font-weight: 700; }
.ck__aviso { margin: 0; padding: 12px 14px; border-radius: calc(var(--r) * .8); background: var(--fondo); border: 1px solid var(--acento); color: var(--texto); font-size: var(--t-s); line-height: 1.45; }
.ck__aviso[hidden] { display: none; }
.ck__aviso a { color: var(--acento); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.ck__link { padding: 0; border: 0; background: none; color: var(--acento); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ck__nota a { color: var(--acento); text-decoration: underline; text-underline-offset: 3px; }
.ck__nota { margin: 0; color: var(--suave); font-size: var(--t-xs); line-height: 1.5; }
.ck__resumen .confianza { margin: 0; }
.ck [data-ck-pagar][disabled] { opacity: .55; pointer-events: none; }

@media (min-width: 960px) {
  .ck__grilla { grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); }
  .ck__resumen { position: sticky; top: calc(var(--g) * 4); }
  .ck__campos { grid-template-columns: 1fr 1fr; }
  .ck__campos > .ck-campo:first-child { grid-column: 1 / -1; }
  .ck__campos--dir { grid-template-columns: repeat(12, 1fr); }
  .ck__campos--dir .ck-campo { grid-column: span 4; }
  .ck__campos--dir .ck-campo--calle { grid-column: span 6; }
  .ck__campos--dir .ck-campo:nth-child(2), .ck__campos--dir .ck-campo:nth-child(3) { grid-column: span 3; }
}
@media (max-width: 560px) {
  .ck-campo input { font-size: 16px; }
  .ck__cupon { grid-template-columns: 1fr; }
}

/* estado del pedido */
.pd { display: grid; gap: var(--g); margin: clamp(20px, 3vw, 60px) var(--g) 0; }
.pd__estado { display: grid; justify-items: start; gap: clamp(12px, 1.4vw, 22px); padding: clamp(24px, 4vw, 80px); border-radius: var(--r); background: var(--tarjeta); transition: background-color .6s; }
.pd__estado--ok { background: var(--acento); color: #fff; }
.pd__estado--ok .etiqueta { color: rgba(255,255,255,.8); }
.pd__estado--ok .parrafo { color: rgba(255,255,255,.85); }
.pd__estado .titulo { max-width: 14em; }
.pd__detalle { padding: clamp(16px, 1.8vw, 32px); border-radius: var(--r); background: var(--tarjeta); transition: background-color .6s; }
.pd__detalle h2 { margin: 0 0 8px; font: 600 var(--t-l)/1.1 'Manrope', sans-serif; letter-spacing: -.02em; }
.pd__acciones { display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 960px) { .pd { grid-template-columns: 1.2fr 1fr; align-items: start; } }
.pd .ck-item { grid-template-columns: 1fr auto; }

/* ---------- estado del pedido: línea de avance ---------- */
.pd__pasos { --paso: var(--acento); --paso-off: var(--suave); --paso-texto: var(--texto); --paso-fondo: var(--tarjeta);
  display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; margin: clamp(12px, 1.6vw, 28px) 0 clamp(16px, 2vw, 36px); padding: 0; list-style: none; }
.pd__estado--ok .pd__pasos { --paso: #fff; --paso-off: rgba(255, 255, 255, .55); --paso-texto: #fff; --paso-fondo: var(--acento); }
.pd__pasos li { position: relative; display: grid; justify-items: start; gap: 14px; color: var(--paso-off); font-size: var(--t-s); font-weight: 600; }
.pd__pasos li span { position: relative; z-index: 1; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; background: var(--paso-fondo); }
.pd__pasos li::before { content: ''; position: absolute; top: 6px; left: 0; right: 0; height: 2px; background: var(--paso-off); opacity: .5; }
.pd__pasos li:last-child::before { right: auto; width: 14px; }
.pd__pasos li.hecho, .pd__pasos li.actual { color: var(--paso-texto); }
.pd__pasos li.hecho span, .pd__pasos li.actual span { border-color: var(--paso); background: var(--paso); }
.pd__pasos li.hecho::before { background: var(--paso); opacity: 1; }
.pd__seguimiento { margin: 0 0 clamp(16px, 2vw, 36px); }
.pd__seguimiento strong { font-weight: 700; letter-spacing: .02em; user-select: all; }
.pd__pasos li.actual span { box-shadow: 0 0 0 4px color-mix(in srgb, var(--paso) 30%, transparent); }
@media (max-width: 560px) { .pd__pasos li { font-size: 11px; } }

/* ---------- seguí tu pedido ---------- */
.sg { margin: clamp(20px, 3vw, 60px) var(--g) 0; }
.sg__caja { max-width: 760px; margin-inline: auto; justify-items: center; text-align: center; gap: clamp(16px, 1.8vw, 28px); padding-block: clamp(40px, 5vw, 96px); }
.sg__caja .parrafo { margin-inline: auto; }
.sg__form { display: grid; gap: 12px; width: 100%; max-width: 480px; margin-top: clamp(8px, 1vw, 16px); }
.sg__form .ck-campo input { text-align: center; }
.sg__boton { justify-self: center; margin-top: 6px; border: 0; cursor: pointer; font: inherit; }
.sg__boton:disabled { opacity: .6; cursor: wait; }
.sg__error { text-align: center; }
.sg__ayuda { max-width: 42ch; margin: clamp(8px, 1vw, 16px) 0 0; color: var(--suave); font-size: var(--t-s); line-height: 1.55; }
.sg__ayuda a { color: var(--acento); }

/* ---------- estado del pedido: transferencia pendiente y retiro ---------- */
.pd__transf { display: grid; justify-items: start; gap: 12px; width: 100%; max-width: 560px; padding: clamp(16px, 2vw, 28px); border-radius: calc(var(--r) * .8); background: var(--fondo); }
.pd__transf-etiqueta { margin: 0; color: var(--suave); font-size: var(--t-s); font-weight: 600; }
.pd__transf-total { margin: -6px 0 0; font: 700 clamp(40px, 6vw, 72px)/1 'Manrope', sans-serif; letter-spacing: -.03em; }
.pd__datos { display: grid; gap: 0; width: 100%; margin: 4px 0 0; }
.pd__datos > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--linea); }
.pd__datos dt { color: var(--suave); font-size: var(--t-s); }
.pd__datos dd { display: flex; align-items: center; gap: 10px; margin: 0; min-width: 0; font-weight: 700; font-size: var(--t-s); text-align: right; }
.pd__datos dd span { overflow-wrap: anywhere; user-select: all; }
.pd__copiar { flex: none; padding: .5em 1em; border: 1px solid var(--linea); border-radius: 999px; background: var(--tarjeta); color: var(--texto); font: 600 var(--t-xs)/1 'Manrope', sans-serif; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.pd__copiar:hover, .pd__copiar:focus-visible { border-color: var(--acento); color: var(--acento); }
.pd__copiar--ok { background: var(--acento); border-color: var(--acento); color: #fff; }
.pd__transf-nota { margin: 0; color: var(--suave); font-size: var(--t-s); line-height: 1.5; }
.pd__retiro { display: grid; gap: 4px; margin-top: 14px; padding: 14px 16px; border-radius: calc(var(--r) * .8); background: var(--fondo); font-size: var(--t-s); line-height: 1.45; }
.pd__retiro span { color: var(--suave); }
@media (max-width: 560px) { .pd__datos > div { flex-wrap: wrap; } .pd__datos dd { flex: 1 1 100%; justify-content: space-between; text-align: left; } }