/* ============================================================
   IvaniaPhoto · publico/assets/css/tienda.css
   Ocampo-Infra Agent System · autor Roberto Ocampo

   Vertiente D (Tienda/cotizador/checkout/carrito) — DECISIONES-PRODUCCION-
   20260908.md. Antes de este fichero la tienda no tenía hoja de estilos
   propia: heredaba el `<label>{font-size:11px;text-transform:uppercase}`
   del panel (_marco/estilo.php, marco_css()) y su h1 quedaba tapado bajo el
   header fijo del front público (.ip2-header{position:fixed}).
   Corregido en el gate tienda-vuelta1-20260908.md (bloqueante GRAVE «el
   horrible»). Usa los MISMOS tokens --ip-* de base.css (nunca --oro/--negro
   del panel) y las clases .boton/.boton--primario/.boton--fantasma del front
   público en vez de .ip-boton del panel, para que la tienda no sea "la otra
   paleta" del sitio.
   ============================================================ */

.ip2 .ip-tienda {
  max-width: 820px;
  margin: 0 auto;
  padding: calc(72px + 2rem) clamp(18px, 4vw, 32px) 4rem;
}
.ip2 .ip-tienda h1 { font-size: var(--fs-h2); margin-bottom: 1rem; }

/* ---------- Barra de pasos (checkout) ---------- */
.ip2 .ip-pasos {
  display: flex; flex-wrap: wrap; gap: .5rem 1.1rem;
  list-style: none; margin: 0 0 1.6rem; padding: 0 0 .9rem;
  border-bottom: 1px solid rgba(244, 238, 228, .14);
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ip-humo);
}
.ip2 .ip-pasos span { padding-bottom: .3rem; }
.ip2 .ip-pasos .ip-paso-actual { color: var(--ip-oro); border-bottom: 2px solid var(--ip-oro); }

/* ---------- Formularios de la tienda ---------- */
.ip2 .ip-tienda form { display: grid; gap: .9rem; max-width: 520px; }
.ip2 .ip-tienda label {
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ip-humo);
  display: block; margin: 0 0 .3rem;
}
.ip2 .ip-tienda input,
.ip2 .ip-tienda select,
.ip2 .ip-tienda textarea {
  font: 15px/1.4 var(--sans); color: var(--ip-marfil); background: rgba(244, 238, 228, .05);
  border: 1px solid rgba(244, 238, 228, .22); padding: .7rem .8rem; width: 100%;
}
.ip2 .ip-tienda input:focus,
.ip2 .ip-tienda select:focus,
.ip2 .ip-tienda textarea:focus { outline: 1px solid var(--ip-oro); border-color: var(--ip-oro); }
.ip2 .ip-tienda fieldset { border: 1px solid rgba(244, 238, 228, .18); padding: .9rem 1rem; margin: 0; display: grid; gap: .8rem; }
.ip2 .ip-tienda legend { padding: 0 .4rem; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ip-humo); }
.ip2 .ip-tienda .ip-fila-envio { display: grid; gap: .8rem; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 560px) { .ip2 .ip-tienda .ip-fila-envio { grid-template-columns: 1fr; } }

/* Radios de paquete/cantidad — NO heredan el label{} uppercase/11px del panel */
.ip2 .ip-tienda .ip-radio {
  display: flex; align-items: baseline; gap: .6rem; cursor: pointer;
  font: 15px/1.4 var(--sans); text-transform: none; letter-spacing: normal; color: var(--ip-marfil);
  margin: 0 0 .5rem;
}
.ip2 .ip-tienda .ip-radio input { width: auto; }

/* ---------- Resumen / totales (carrito, checkout) ---------- */
.ip2 .ip-tienda .ip-resumen {
  margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid rgba(244, 238, 228, .14);
}
.ip2 .ip-tienda .ip-resumen p { margin: .3rem 0; color: var(--ip-humo); }
.ip2 .ip-tienda .ip-total { font-size: 1.15rem; color: var(--ip-marfil); }
.ip2 .ip-tienda .ip-total strong { color: var(--ip-oro); }

/* Dos filetes seguidos sin nada entre medias — el borde de la última fila de
   la tabla y el borde superior del resumen quedaban a ~30px uno del otro
   (gate tienda-vuelta3-20260908.md, m-1). */
.ip2 .ip-tienda .ip-tabla-envoltorio + .ip-resumen { border-top: 0; margin-top: .6rem; }

/* Ayuda dentro de formularios de la tienda — hereda .ip-ayuda del panel
   (font-size:11px, color:var(--apagado)) pero aquí con tokens .ip2 propios
   (gate tienda-vuelta3-20260908.md, m-2). */
.ip2 .ip-tienda .ip-ayuda { font-size: .78rem; color: var(--ip-humo); margin: -.3rem 0 0; text-transform: none; letter-spacing: normal; }

/* ---------- Tabla del carrito/revisión — reutiliza .ip-tabla con tokens .ip2 ---------- */
.ip2 .ip-tienda table.ip-tabla {
  width: 100%; border-collapse: collapse; font-size: .92rem; margin: 1rem 0;
}
.ip2 .ip-tienda table.ip-tabla th,
.ip2 .ip-tienda table.ip-tabla td {
  border-bottom: 1px solid rgba(244, 238, 228, .14); padding: .6rem .5rem; text-align: left; vertical-align: top;
}
.ip2 .ip-tienda table.ip-tabla th {
  font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ip-humo);
}

/* ---------- Botón tenue (Quitar/Aplicar) — variante ghost pequeña ---------- */
.ip2 .ip-tienda .boton-tenue {
  background: transparent; color: var(--ip-humo); border: 1px solid rgba(244, 238, 228, .3);
  padding: .5rem 1rem; font-size: .78rem;
}
.ip2 .ip-tienda .boton-tenue:hover { color: var(--ip-oro-claro); border-color: var(--ip-oro); }

/* ---------- Errores/avisos dentro de la tienda (hereda .ip-error del panel,
   sólo se re-tiñe con los tokens del front público) ---------- */
.ip2 .ip-tienda .ip-error {
  background: rgba(224, 138, 118, .1); border: 1px solid rgba(224, 138, 118, .5);
  color: #f0c9bf; border-radius: 0; font-size: .9rem;
}
.ip2 .ip-tienda .ip-lema { color: var(--ip-humo); font: 1rem/1.5 var(--serif); }

/* Folio del pedido — nunca partido por el guion en el h1 (gate
   tienda-vuelta3-20260908.md, M-5). .ip-folio lo baja a sublínea (revisión);
   .ip-nowrap se usa donde el h1/strong entero ES el folio (confirmación,
   aviso de pago degradado). */
.ip2 .ip-tienda .ip-folio {
  white-space: nowrap; display: block; font-size: .6em; color: var(--ip-humo);
}
.ip2 .ip-tienda .ip-nowrap { white-space: nowrap; }

/* Enlace de reanudación (cotizador): dato útil, no debe forzar scroll horizontal
   ni ser el texto más pequeño de la página. */
.ip2 .ip-tienda .ip-enlace-guardar { font-size: .85rem; margin-top: 1rem; }
.ip2 .ip-tienda .ip-enlace-guardar code { overflow-wrap: anywhere; font-size: .85rem; }

/* Envoltorio de tablas (carrito/revisión): scroll horizontal en vez de
   desbordar el viewport en móvil (gate tienda-vuelta2-20260908.md, m-2). */
.ip2 .ip-tienda .ip-tabla-envoltorio { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* A 320px la tabla del carrito desborda su envoltorio (323px de contenido en
   284px útiles) y recorta la columna "Quitar" sin ninguna pista de que hay
   más contenido a la derecha (gate tienda-vuelta4-20260908.md, m-2). A 390px
   ya cabe entera (354/354, medido en el gate) — la máscara sólo se aplica
   bajo el ancho donde de verdad desborda, para no tapar el borde de una
   columna que a 390px+ ya es visible completa. Sin JS: no hay forma de
   tocar frente.js desde este alcance (d-tienda/tienda.css). */
@media (max-width: 360px) {
  .ip2 .ip-tienda .ip-tabla-envoltorio {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
  }
}

/* Input de cantidad del carrito — antes style="width:64px" en línea
   (gate tienda-vuelta2-20260908.md, m-3). */
.ip2 .ip-tienda .ip-input-cantidad { width: 64px; }

/* Avisos de pago (checkout degradado/confirmación) — antes color del panel
   en `style=` inline (gate tienda-vuelta2-20260908.md, M-6): mismos tokens
   del front público, sin CSS en línea. */
.ip2 .ip-tienda .ip-aviso-pendiente {
  background: rgba(201, 161, 94, .12); border: 1px solid var(--ip-oro);
  border-radius: 0; padding: 1rem 1.1rem; margin: 1rem 0; color: var(--ip-marfil); font-size: .95rem;
}
.ip2 .ip-tienda .ip-aviso-ok {
  display: inline-block; background: rgba(201, 161, 94, .12); border: 1px solid var(--ip-oro);
  color: var(--ip-marfil); font-size: 1rem; padding: .5rem .9rem; border-radius: 0; margin: .5rem 0;
}

@media (max-width: 560px) {
  .ip2 .ip-tienda { padding-top: calc(64px + 1.4rem); }
}

/* La cabecera con «Carrito (n)» y el pie anclado viven ahora en base.css
   (gate tienda-vuelta5: el defecto se veía también en /productos, que no carga
   tienda.css). Movido el 9/9/2026. */