/*
  Lilium Flower Boutique · estilos de la tienda v2 (portada, compra, pedido especial y consulta).
  Usa los tokens de index.html (--piedra, --basalto, --terracota, --f-titulo…).
*/

/* ───────── barra de anuncio ───────── */

.anuncio {
  background: var(--basalto);
  color: var(--cal);
  text-align: center;
  font-size: .82rem;
  letter-spacing: .04em;
  padding: 8px var(--margen);
}
.anuncio p { margin: 0; max-width: var(--ancho); margin-inline: auto; }

/* ───────── botón de consulta en la barra ───────── */

.btn-consulta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; min-width: 44px; padding: 0 12px;
  border: 1px solid var(--linea); background: var(--piedra-clara); color: var(--basalto);
  text-decoration: none; font-size: .9rem; font-weight: 500; letter-spacing: .02em;
  transition: border-color .2s var(--ease);
}
.btn-consulta:hover { border-color: var(--basalto); }
.btn-consulta svg { width: 20px; height: 20px; }
.btn-consulta-texto { display: none; }
@media (min-width: 720px) { .btn-consulta-texto { display: inline; } }
.barra-fila { gap: 12px; }
@media (min-width: 960px) { .barra-fila { gap: 20px; } }
/* en teléfonos angostos la palabra "Pedido" se oculta a la vista (no al lector de pantalla) para que quepa la marca */
@media (max-width: 430px) {
  .btn-pedido-texto {
    display: inline; position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .btn-pedido { padding: 0 10px; }
}

/* ───────── portada ───────── */

.portada { border-bottom: 1px solid var(--linea); }
.portada-interior {
  display: grid; gap: 22px;
  max-width: var(--ancho); margin: 0 auto;
  padding: 26px var(--margen) 20px;
}
.portada-sobre {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 10px; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--basalto-suave);
}
.portada-sobre::before { content: ""; width: 28px; height: 2px; background: var(--terracota); flex: none; }
.portada-titulo {
  font-size: clamp(2.6rem, 11vw, 5.4rem);
  line-height: .88;
  max-width: 13ch;
  text-wrap: balance;
}
.portada-sub { margin: 14px 0 0; max-width: 34em; font-size: 1.05rem; color: var(--basalto-suave); }
.portada-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 22px; }
.portada-acciones .btn-accion { width: auto; flex: 1 1 100%; padding: 0 22px; }
.portada-acciones .btn-accion svg { width: 20px; height: 20px; }
@media (min-width: 480px) { .portada-acciones .btn-accion { flex: none; } }

.portada-cupon {
  display: flex; align-items: center; gap: 10px;
  margin: 16px 0 0; padding: 10px 14px;
  border: 1px dashed var(--terracota); color: var(--terracota-honda);
  font-size: .92rem; width: fit-content; max-width: 100%;
}
.portada-cupon svg { width: 20px; height: 20px; flex: none; }
.portada-cupon b { letter-spacing: .08em; }

.portada-buscar { margin-top: 20px; max-width: 460px; }
.portada-buscar label { position: relative; display: block; }
.portada-buscar svg {
  position: absolute; left: 14px; top: 50%; width: 19px; height: 19px;
  transform: translateY(-50%); color: var(--basalto-suave); pointer-events: none;
}
.portada-buscar input {
  width: 100%; min-height: 50px; padding: 12px 14px 12px 44px;
  border: 1px solid var(--piedra-honda); border-radius: 0; background: var(--cal); color: var(--basalto);
}
.portada-buscar input:focus { border-color: var(--basalto); outline: none; }
.portada-buscar input:focus-visible { outline: 2px solid var(--terracota); outline-offset: 1px; }

/* en el teléfono la portada va al grano: la promo destacada es la primera de la losa que sigue */
@media (max-width: 719px) {
  .portada-foto, .portada-ventajas { display: none !important; }
  .portada-interior { padding-top: 22px; padding-bottom: 14px; gap: 0; }
  .portada-sub { font-size: 1rem; }
  .portada-acciones { margin-top: 18px; }
  .portada-buscar { margin-top: 16px; }
}
.portada-ventajas { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 6px; font-size: .92rem; }
.portada-ventajas li { display: flex; align-items: center; gap: 10px; }
.portada-ventajas svg { width: 20px; height: 20px; color: var(--terracota); flex: none; }

/* la foto destacada: en el teléfono es una ficha horizontal; en escritorio, una foto grande con marco de barro */
.portada-foto { position: relative; margin: 0; display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 14px;
  padding: 10px; background: var(--piedra-clara); border: 1px solid var(--linea); }
.portada-foto a { display: block; }
.portada-foto a::after { content: ""; position: absolute; inset: 0; }
.portada-foto img { width: 96px; height: 120px; object-fit: cover; }
.portada-foto figcaption { display: flex; flex-direction: column; gap: 4px; }
.portada-chip {
  align-self: flex-start; background: var(--terracota); color: var(--cal);
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; padding: 3px 7px;
}
.portada-nombre { font-family: var(--f-titulo); font-size: 1.5rem; text-transform: uppercase; line-height: .95; }
.portada-precio { font-size: 1.1rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.portada-precio s { color: var(--basalto-suave); font-weight: 400; margin-right: 6px; }
.portada-foto:hover { border-color: var(--basalto-suave); }
.portada-foto:focus-within { outline: 2px solid var(--terracota); outline-offset: 3px; }
.portada-foto a:focus-visible { outline: none; }

@media (min-width: 900px) {
  .portada-interior { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; align-items: center; padding-top: 40px; padding-bottom: 34px; }
  .portada-foto {
    display: block; padding: 0; background: none; border: 0;
    margin: 0 18px 18px 0;
  }
  .portada-foto::before {
    content: ""; position: absolute; inset: 18px -18px -18px 18px;
    background: var(--terracota); z-index: -1;
  }
  .portada-foto img { width: 100%; height: auto; aspect-ratio: 4 / 5; max-height: 560px; }
  .portada-foto figcaption {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 18px 20px 20px;
    background: linear-gradient(to top, rgba(28, 27, 26, .86), rgba(28, 27, 26, 0));
    color: var(--cal);
  }
  .portada-nombre { font-size: 2rem; }
  .portada-precio s { color: rgba(243, 239, 233, .7); }
  .portada-foto:hover { border: 0; }
  .portada-foto:hover img { filter: saturate(1.08); }
  .portada-ventajas { display: flex; flex-wrap: wrap; gap: 8px 24px; }
}

/* ocasiones */
.ocasiones { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen) 20px; }
.ocasiones-titulo { margin: 0 0 10px; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--basalto-suave); }
.ocasiones-lista {
  list-style: none; margin: 0 calc(var(--margen) * -1); padding: 0 var(--margen) 4px;
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
  scroll-padding-inline: var(--margen);
}
.ocasiones-lista::-webkit-scrollbar { display: none; }
.ocasiones-lista li { flex: none; scroll-snap-align: start; }
.ocasion {
  display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px;
  border: 1px solid var(--piedra-honda); background: var(--piedra-clara); color: var(--basalto);
  text-decoration: none; font-size: .92rem; font-weight: 500; white-space: nowrap;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.ocasion:hover { border-color: var(--basalto); }
.ocasion[aria-current="true"] { background: var(--basalto); border-color: var(--basalto); color: var(--cal); }
@media (min-width: 900px) {
  .ocasiones { display: flex; align-items: center; gap: 18px; }
  .ocasiones-titulo { margin: 0; flex: none; }
  .ocasiones-lista { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
}

/* ───────── vitrina (búsqueda u ocasión) ───────── */

.vitrina { max-width: var(--ancho); margin: 0 auto; padding: 26px var(--margen) 30px; border-bottom: 1px solid var(--linea); scroll-margin-top: 80px; }
.vitrina-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 18px; }
.vitrina-sobre { flex-basis: 100%; margin: 0; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--basalto-suave); }
.vitrina-cab h2 { font-size: clamp(2.2rem, 8vw, 3.4rem); }
.vitrina-cab h2:focus { outline: none; }
.vitrina-quitar { margin-left: auto; font-size: .95rem; }
.vitrina-quitar svg { width: 16px; height: 16px; }
.vitrina-vacia { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 12px 0 6px; }
.vitrina-vacia p { margin: 0; max-width: 32em; font-size: 1.05rem; }
.vitrina-vacia .btn-accion { width: auto; }
.vitrina-pie { margin: 18px 0 0; }

/* ───────── agotados y precios en bolívares ───────── */

.marca-agotado {
  position: absolute; top: 10px; left: 10px;
  background: var(--basalto); color: var(--cal);
  font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; padding: 4px 8px;
}
.pieza--agotada .pieza-foto img, .promo--agotada .promo-foto img { filter: grayscale(.6); opacity: .75; }
.btn-mas--agotado { opacity: .55; }
.promo-foto { position: relative; }
.precio-bs { display: block; flex-basis: 100%; margin-top: 4px; font-size: .9rem; color: var(--basalto-suave); font-variant-numeric: tabular-nums; }
.detalle-agotado { margin: 0; padding: 12px 14px; border-left: 3px solid var(--basalto); background: var(--piedra-clara); }
.detalle-agotado-acciones { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 8px; }
.detalle-agotado-acciones svg { width: 18px; height: 18px; }
.detalle-compartir { align-self: flex-start; font-size: .95rem; }
.detalle-compartir svg { width: 18px; height: 18px; }

/* ───────── textos y botones compartidos ───────── */

.btn-texto {
  padding: 4px 0; border: 0; background: none; color: var(--basalto);
  font-size: .92rem; font-weight: 500; text-decoration: underline; text-underline-offset: .22em;
}
.btn-texto:hover { color: var(--terracota-honda); }
.btn-texto--peligro { color: var(--terracota-honda); }
.btn-accion--peligro { background: var(--basalto); }
.btn-accion--peligro:hover { background: #000; }
.campo-ayuda { font-size: .82rem; color: var(--basalto-suave); }
.campo select {
  width: 100%; min-height: 48px; padding: 10px 40px 10px 14px;
  border: 1px solid var(--piedra-honda); border-radius: 0; background: var(--cal); color: var(--basalto);
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath d='M5 9l7 7 7-7' fill='none' stroke='%232B2926' stroke-width='2.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.campo select:focus { border-color: var(--basalto); outline: none; }
.campo select:focus-visible { outline: 2px solid var(--terracota); outline-offset: 1px; }
.campo input[type="date"] { font-variant-numeric: tabular-nums; }
.campo-doble { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 440px) { .campo-doble { grid-template-columns: 1fr 1fr; } }
.campo .cedula { display: flex; }
.campo .cedula select {
  flex: none; width: 64px; min-height: 48px; padding: 0 22px 0 12px;
  border: 1px solid var(--piedra-honda); border-right: 0; border-radius: 0; background-color: var(--piedra-clara);
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24'%3E%3Cpath d='M5 9l7 7 7-7' fill='none' stroke='%232B2926' stroke-width='2.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; font-weight: 500;
}
.campo .cedula input { flex: 1; min-width: 0; }
.vivo { position: absolute; }

/* ───────── diálogo del pedido: la compra ───────── */

@media (min-width: 720px) { .pedido { width: 540px; } }
.pedido .pedido-interior { padding-bottom: 0; }
.pedido-cab h2 { font-size: 2.4rem; }
.pedido-cab h2:focus { outline: none; }
.pasos--compra {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px;
  list-style: none; margin: 12px 0 4px; padding: 0;
}
.pasos--compra button { font-size: .82rem; gap: 5px; }
.pasos--compra .pasos-n { flex: none; }
@media (max-width: 400px) {
  .pasos--compra button { flex-direction: column; align-items: flex-start; gap: 0; min-height: 44px; font-size: .75rem; line-height: 1.15; }
}
.compra { display: flex; flex-direction: column; flex: 1; }
.compra[hidden] { display: none; }
.compra-paso { display: flex; flex-direction: column; gap: 18px; padding: 18px 0 24px; }
.compra-paso[hidden] { display: none; }
.compra-h { font-size: 2rem; }
.compra-h:focus { outline: none; }
.compra-ayuda { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: .92rem; color: var(--basalto-suave); }
.compra-ayuda svg { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--basalto); }
.compra-ayuda a { color: var(--basalto); }
.compra-alerta { margin: 0; padding: 12px 14px; border-left: 3px solid var(--terracota); background: var(--cal-suave); color: var(--terracota-honda); font-weight: 500; }
.compra-especial { align-self: flex-start; font-size: .95rem; }
.compra-especial svg { width: 18px; height: 18px; }

/* líneas del pedido */
.linea--agotada { opacity: .75; }
.linea-agotado { display: inline-block; margin-left: 6px; padding: 1px 6px; background: var(--basalto); color: var(--cal); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; vertical-align: 2px; }
.linea-antes { color: var(--basalto-suave); font-weight: 400; margin-right: 4px; }
.linea-promo-nota { grid-column: 2 / -1; margin: 0; font-size: .82rem; color: var(--terracota-honda); }
.linea-especial { grid-row: 1 / span 3; display: grid; place-items: center; width: 64px; height: 80px; background: var(--piedra-clara); border: 1px dashed var(--piedra-honda); color: var(--terracota); }
.linea-especial svg { width: 34px; height: 34px; }
.linea-cant-fija { font-size: .88rem; color: var(--basalto-suave); }

/* cupón */
.cupon { display: flex; flex-direction: column; gap: 8px; }
.cupon-fila { display: flex; }
.cupon-fila input {
  flex: 1; min-width: 0; min-height: 48px; padding: 10px 14px;
  border: 1px solid var(--piedra-honda); border-right: 0; border-radius: 0; background: var(--cal); color: var(--basalto);
  text-transform: uppercase; letter-spacing: .08em;
}
.cupon-fila input::placeholder { text-transform: none; letter-spacing: 0; color: #6E685F; }
.cupon-fila input:focus { border-color: var(--basalto); outline: none; }
.cupon-fila input:focus-visible { outline: 2px solid var(--terracota); outline-offset: 1px; }
.cupon-fila input[readonly] { background: var(--piedra-clara); }
.btn-cupon { flex: none; min-width: 96px; padding: 0 16px; border: 1px solid var(--basalto); background: var(--basalto); color: var(--cal); font-weight: 500; }
.btn-cupon:hover { background: #000; }
.btn-cupon:disabled { opacity: .7; cursor: progress; }
.btn-cupon[hidden] { display: none; }
.cupon-estado { margin: 0; font-size: .9rem; }
.cupon-estado:empty { display: none; }
.cupon-estado--ok { color: #3F5A2E; font-weight: 500; }
.cupon-estado--ok svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }
.cupon-estado--mal { color: var(--terracota-honda); }

/* desglose */
.desglose, .repaso-bloque--cuentas { display: flex; flex-direction: column; gap: 6px; }
.cuentas { margin: 0; display: grid; gap: 4px; }
.cuentas > div { display: flex; justify-content: space-between; gap: 12px; font-size: .95rem; }
.cuentas dt { color: var(--basalto-suave); }
.cuentas dd { margin: 0; font-variant-numeric: tabular-nums; }
.cuentas .ahorro dd { color: #3F5A2E; font-weight: 500; }
.total-bs { margin: -2px 0 0; text-align: right; font-size: .9rem; color: var(--basalto-suave); font-variant-numeric: tabular-nums; }
.total-bs span { font-size: .8rem; }
.ahorro-total { margin: 0; align-self: flex-end; font-size: .88rem; color: #3F5A2E; font-weight: 500; }
.ahorro-total svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }

/* tus datos */
.cliente-estado:empty { display: none; }
.cliente-nota { margin: 0; padding: 10px 14px; background: var(--piedra-clara); border-left: 3px solid var(--piedra-honda); font-size: .92rem; }
.cliente-nota p { margin: 0 0 6px; }
.cliente-nota p:last-child { margin: 0; }
.cliente-nota--ok { border-left-color: #56643F; color: #3F5A2E; font-weight: 500; }
.cliente-nota--ok svg { width: 18px; height: 18px; vertical-align: -4px; margin-right: 6px; }
.cliente-nota--mal { border-left-color: var(--terracota); background: var(--cal-suave); }
.cliente-nota--mal a { color: var(--terracota-honda); font-weight: 500; }
.cliente-nota .btn-linea { min-height: 40px; }
.cliente-nota .btn-linea svg { width: 16px; height: 16px; }
.extra--grande { min-height: 54px; font-weight: 500; }
.extra--grande span { display: inline-flex; align-items: center; gap: 10px; }
.extra--grande svg { width: 20px; height: 20px; color: var(--terracota); }
.regalo { display: flex; flex-direction: column; gap: 14px; padding: 14px; border: 1px solid var(--linea); background: var(--piedra-clara); margin-top: -10px; }
.regalo[hidden] { display: none; }
.regalo .extra { background: var(--cal); }

/* entrega */
.compra .entrega span { gap: 8px; display: flex; align-items: center; justify-content: center; }
.compra .entrega svg { width: 20px; height: 20px; flex: none; }
.compra .entrega label[hidden] { display: none; }
.domicilio { display: flex; flex-direction: column; gap: 14px; }
.domicilio[hidden] { display: none; }
.guardadas { display: flex; flex-wrap: wrap; gap: 8px; }
.guardadas[hidden] { display: none; }
.guardadas .campo-etiqueta { flex-basis: 100%; margin: 0; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  min-height: 42px; padding: 6px 12px;
  border: 1px solid var(--piedra-honda); background: var(--piedra-clara); color: var(--basalto);
  font-size: .9rem; text-align: left;
}
.chip svg { width: 16px; height: 16px; flex: none; }
.chip:hover { border-color: var(--basalto); }
.elegir { display: flex; flex-direction: column; gap: 10px; }
.elegir[hidden] { display: none; }
.elegir legend { margin-bottom: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-radio { position: relative; }
.chip-radio input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip-radio span {
  display: flex; flex-direction: column; justify-content: center; min-height: 44px; padding: 6px 14px;
  border: 1px solid var(--piedra-honda); background: var(--piedra-clara); font-size: .92rem; font-weight: 500;
}
.chip-radio small { font-weight: 400; font-size: .75rem; color: var(--basalto-suave); }
.chip-radio input:checked + span { background: var(--basalto); border-color: var(--basalto); color: var(--cal); }
.chip-radio input:focus-visible + span { outline: 2px solid var(--terracota); outline-offset: 2px; }
.chip-radio:hover input:not(:disabled) + span { border-color: var(--basalto); }
.chip-radio--no span { opacity: .55; text-decoration: none; }
.chip-radio--no input { cursor: not-allowed; }
.elegir .campo-error { margin-top: -2px; }

/* pago */
.metodos { display: flex; flex-direction: column; gap: 8px; }
.metodos legend { margin-bottom: 10px; }
#p-metodos { display: flex; flex-direction: column; gap: 8px; }
.metodo {
  position: relative; display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px 12px 44px; border: 1px solid var(--linea); background: var(--piedra-clara); cursor: pointer;
}
.metodo input { position: absolute; left: 14px; top: 14px; width: 18px; height: 18px; margin: 0; accent-color: var(--terracota); }
.metodo-nombre { font-weight: 500; }
.metodo-nombre small { font-weight: 400; color: var(--basalto-suave); margin-left: 4px; }
.metodo-datos { font-size: .85rem; color: var(--basalto-suave); white-space: pre-line; }
.metodo:has(input:checked) { border-color: var(--basalto); background: var(--cal); }
.repaso { display: flex; flex-direction: column; gap: 10px; }
.repaso-bloque { padding: 14px; border: 1px solid var(--linea); background: var(--piedra-clara); }
.repaso-bloque p { margin: 4px 0 0; font-size: .92rem; }
.repaso-bloque p svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; color: var(--terracota); }
.repaso-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.repaso-cab h4 { margin: 0; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--basalto-suave); font-weight: 500; }
.repaso-lista { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font-size: .92rem; }
.repaso-lista li { display: flex; justify-content: space-between; gap: 12px; }
.repaso-lista li span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.compra-fallo { padding: 14px; border: 1px solid var(--terracota); background: var(--cal-suave); display: flex; flex-direction: column; gap: 12px; }
.compra-fallo[hidden] { display: none; }
.compra-fallo p { margin: 0; }
.compra-fallo-acciones { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.compra-fallo-acciones .btn-accion { width: auto; }

/* pie fijo del paso a paso */
.compra-pie {
  position: sticky; bottom: 0; z-index: 3;
  margin: auto calc(var(--margen) * -1) 0; padding: 10px var(--margen) calc(10px + env(safe-area-inset-bottom));
  background: var(--piedra); border-top: 1px solid var(--linea);
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 14px;
}
@media (min-width: 720px) { .compra-pie { margin-inline: -32px; padding-inline: 32px; } }
.compra-pie[hidden] { display: none; }
.compra-error { grid-column: 1 / -1; margin: 0; color: var(--terracota-honda); font-weight: 500; font-size: .92rem; }
.compra-error:empty { display: none; }
.compra-cuentas { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.pie-total-etiqueta { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--basalto-suave); }
.pie-total { font-size: 1.45rem; font-weight: 500; }
.pie-total-bs { font-size: .8rem; color: var(--basalto-suave); font-variant-numeric: tabular-nums; }
.compra-botones { display: flex; align-items: center; gap: 8px; }
.compra-botones .btn-accion { width: auto; padding: 0 18px; min-height: 52px; }
.compra-botones .btn-accion svg { width: 20px; height: 20px; }
.compra-botones .btn-accion:disabled { opacity: .75; cursor: progress; }
.compra-botones .btn-icono[hidden] { display: none; }

/* listo */
.compra-listo { align-items: flex-start; text-align: left; }
.listo-sello { width: 64px; height: 64px; display: grid; place-items: center; background: var(--terracota); color: var(--cal); }
.listo-sello svg { width: 40px; height: 40px; }
.listo-codigo { margin: 0; font-size: 1.05rem; }
.listo-codigo strong { font-family: var(--f-titulo); font-size: 2.6rem; font-weight: 400; letter-spacing: .08em; display: block; line-height: 1; }
.listo-texto { margin: 0; font-size: 1.02rem; }
#listo { display: flex; flex-direction: column; gap: 16px; width: 100%; }
#listo .btn-accion { width: 100%; }
.listo-nota { margin: -8px 0 0; font-size: .85rem; color: var(--basalto-suave); }
.listo-datos { margin: 0; display: grid; gap: 8px; padding: 14px; border: 1px solid var(--linea); background: var(--piedra-clara); }
.listo-datos > div { display: grid; grid-template-columns: 5.5rem 1fr; gap: 10px; font-size: .95rem; }
.listo-datos dt { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--basalto-suave); padding-top: .2em; }
.listo-datos dd { margin: 0; }
.listo-pago { display: block; font-size: .88rem; color: var(--basalto-suave); white-space: pre-line; }
.listo-consulta { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-left: 3px solid var(--basalto); background: var(--cal); }
.listo-consulta svg { width: 20px; height: 20px; flex: none; }
.listo-consulta p { margin: 0; font-size: .95rem; }
.listo-acciones { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.listo-acciones svg { width: 18px; height: 18px; }

/* ───────── hojas: pedido especial y consulta ───────── */

.hoja { width: 100%; height: 100%; margin: 0; }
.hoja[open] { animation: entra-lado .45s var(--ease); }
.hoja-interior {
  display: flex; flex-direction: column; gap: 18px; min-height: 100%;
  padding: 0 var(--margen) calc(28px + env(safe-area-inset-bottom));
}
.hoja-cab {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0 14px; background: var(--piedra); border-bottom: 1px solid var(--linea);
}
.hoja-cab h2 { font-size: 2.4rem; }
.hoja-texto { margin: 0; font-size: 1rem; color: var(--basalto-suave); }
.hoja-pie { margin-top: auto; }
@media (min-width: 720px) {
  .hoja { width: 480px; margin: 0 0 0 auto; border-left: 1px solid var(--linea); }
  .hoja--ancha { width: 600px; }
  .hoja-interior { padding-inline: 32px; }
}

/* consulta */
.consulta-form { display: flex; flex-direction: column; gap: 16px; }
.consulta-form[hidden] { display: none; }
.consulta-ayuda { margin: 0; font-size: .9rem; color: var(--basalto-suave); }
.consulta-ayuda a { color: var(--basalto); font-weight: 500; }
.consulta-resultado { display: flex; flex-direction: column; gap: 16px; }
.consulta-resultado[hidden] { display: none; }
.consulta-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.consulta-hola { margin: 0; font-family: var(--f-titulo); font-size: 1.9rem; text-transform: uppercase; }
.consulta-hola:focus { outline: none; }
.consulta-cab-acciones { display: flex; gap: 16px; }
.consulta-pedido { display: flex; flex-direction: column; gap: 14px; padding: 18px; border: 1px solid var(--linea); background: var(--piedra-clara); }
.consulta-pedido-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.consulta-pedido-cab h3 { font-family: var(--f-texto); font-size: 1.15rem; font-weight: 500; text-transform: none; letter-spacing: .04em; margin-right: auto; }
.consulta-fecha { flex-basis: 100%; margin: 0; font-size: .85rem; color: var(--basalto-suave); }
.consulta-estado-texto { margin: 0; font-size: 1rem; }
.estado-chip { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; padding: 4px 10px; background: var(--basalto); color: var(--cal); }
.estado-chip--nuevo { background: var(--terracota); }
.estado-chip--listo, .estado-chip--en_camino { background: #56643F; }
.estado-chip--entregado { background: var(--piedra-media); color: var(--basalto); }
.estado-chip--cancelado { background: none; border: 1px solid var(--piedra-honda); color: var(--basalto-suave); }
.consulta-cancelado { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--basalto-suave); }
.consulta-cancelado svg { width: 18px; height: 18px; }

/* línea de tiempo */
.tiempo { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.tiempo li { position: relative; display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; min-height: 34px; color: var(--basalto-suave); }
.tiempo li::before { content: ""; position: absolute; left: 10px; top: -8px; bottom: 50%; width: 2px; background: var(--piedra-honda); }
.tiempo li:first-child::before { display: none; }
.tiempo li.hecho::before, .tiempo li.ahora::before { background: var(--basalto); }
.tiempo-punto { position: relative; z-index: 1; width: 14px; height: 14px; margin-left: 4px; border: 2px solid var(--piedra-honda); background: var(--piedra-clara); border-radius: 50%; }
.tiempo li.hecho .tiempo-punto { background: var(--basalto); border-color: var(--basalto); }
.tiempo li.ahora .tiempo-punto { background: var(--terracota); border-color: var(--terracota); box-shadow: 0 0 0 4px rgba(163, 74, 40, .18); }
.tiempo li.hecho, .tiempo li.ahora { color: var(--basalto); }
.tiempo li.ahora .tiempo-nombre { font-weight: 500; }
.tiempo-cuando { font-size: .8rem; color: var(--basalto-suave); font-variant-numeric: tabular-nums; }

.consulta-datos { margin: 0; display: grid; gap: 6px; }
.consulta-datos > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 10px; font-size: .95rem; }
.consulta-datos dt { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--basalto-suave); padding-top: .2em; }
.consulta-datos dd { margin: 0; overflow-wrap: anywhere; }
.pago-chip { display: inline-block; padding: 2px 8px; font-size: .78rem; font-weight: 500; background: var(--cal); border: 1px solid var(--piedra-honda); }
.pago-chip--pagado, .pago-chip--ok { background: #56643F; border-color: #56643F; color: var(--cal); }
.pago-chip--por_verificar, .pago-chip--parcial { border-color: var(--basalto); }
.pago-chip--pendiente { border-color: var(--terracota); color: var(--terracota-honda); }
.pago-chip--aprobado { background: #56643F; border-color: #56643F; color: var(--cal); }
.pago-chip--rechazado { border-color: var(--terracota); color: var(--terracota-honda); }
.consulta-pagos li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.consulta-pagos li > span:first-child { margin-right: auto; }
.pago-captura { display: inline-flex; align-items: center; gap: 4px; font-size: .82rem; color: var(--basalto-suave); white-space: nowrap; }
.pago-captura svg { width: 15px; height: 15px; }
.pago-motivo { flex-basis: 100%; font-size: .85rem; color: var(--terracota-honda); }
.pago-nota { display: block; margin-top: 4px; font-size: .85rem; color: var(--basalto-suave); }
.pago-form-datos { margin: 0; padding: 10px 12px; background: var(--piedra-clara); font-size: .92rem; overflow-wrap: anywhere; }

/* captura del pago */
.captura { display: grid; gap: 8px; }
.captura-elegir {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 10px 16px;
  border: 1px dashed var(--basalto); background: var(--piedra-clara); font-weight: 500; cursor: pointer; text-align: center;
}
.captura-elegir:hover { border-style: solid; }
.captura-elegir:focus-within { outline: 2px solid var(--terracota); outline-offset: 2px; }
.captura-elegir svg { width: 24px; height: 24px; flex: none; }
.captura-elegir input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.captura-vista { display: flex; align-items: center; gap: 12px; }
.captura-vista[hidden] { display: none; }
.captura-vista img { width: 64px; height: 88px; object-fit: cover; object-position: top; border: 1px solid var(--piedra-honda); background: #fff; flex: none; }
.captura-nombre { flex: 1; min-width: 0; font-size: .88rem; color: var(--basalto-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pago-form .compra-error a { color: inherit; font-weight: 500; }
.consulta-lineas { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--linea); display: grid; gap: 8px; font-size: .95rem; }
.consulta-lineas li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; }
.consulta-lineas li span:nth-child(2) { font-variant-numeric: tabular-nums; }
.consulta-lineas small { grid-column: 1 / -1; color: var(--basalto-suave); font-size: .85rem; }
.consulta-total { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 4px 16px; padding-top: 8px; border-top: 1px solid var(--linea); font-size: .9rem; color: var(--basalto-suave); }
.consulta-total strong { color: var(--basalto); font-size: 1.15rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.consulta-pagos h4 { margin: 0 0 6px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--basalto-suave); font-weight: 500; }
.consulta-pagos ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .92rem; }
.consulta-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.consulta-acciones svg { width: 18px; height: 18px; }
.consulta-accion:empty { display: none; }
.pago-form, .confirmar { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid var(--basalto); background: var(--cal); }
.pago-form h4 { margin: 0; font-size: 1rem; font-weight: 500; }
.confirmar p { margin: 0; }
.pago-form-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.pago-form-botones .btn-accion { width: auto; min-height: 48px; padding: 0 18px; }

@media (prefers-reduced-motion: reduce) {
  .hoja[open] { animation: none; }
}