/* ============================================================
   Carrito (carrito.html) y páginas legales (privacidad.html,
   terminos.html). El selector de cantidad es el componente .qty compartido
   (css/09). Acento de foco e inválido: --glow-dk / un rojo (#C0392B, el
   mismo del precio provisional) — el coral sigue reservado al instalador.
   Precios, cantidades, subtotales y número de pedido en IBM Plex Mono.
   ============================================================ */

/* ---------- encabezado y rejilla ---------- */
/* Carrito con productos: menos aire arriba, para que en 1440×900 toda la
   página (incluido el pie y el botón de enviar) quepa sin scroll. */
body.pg-cart-lleno .sec.sec-top{padding-top:26px}
.cart-h1{font-size:clamp(26px,3.4vw,36px);font-weight:700;margin:0 0 16px}
.cart-grid{display:grid;grid-template-columns:1fr 330px;gap:36px;align-items:start}
@media(max-width:880px){.cart-grid{grid-template-columns:1fr;gap:24px}}
.cart-sub-h{font-size:17px;font-weight:700;margin:0 0 12px}

/* ---------- lista de renglones ---------- */
.cart-list{list-style:none;margin:0 0 26px;padding:0;border-bottom:1px solid var(--line)}
.cart-item{display:grid;align-items:center;gap:10px 16px;padding:14px 0;border-top:1px solid var(--line);
  grid-template-columns:auto 1fr auto auto auto;grid-template-areas:"thumb id qty sub rm"}
/* Miniatura: mismo marcador que la tarjeta de producto (bloqueIdentidad),
   sin foto de relleno; a escala de 72px. */
.cart-it-thumb{grid-area:thumb;width:72px;height:72px;border-radius:5px;overflow:hidden;flex:0 0 auto;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;padding:6px;
  text-align:center;color:var(--stone);
  background:linear-gradient(160deg,var(--ink) 0%,var(--deep-2) 55%,var(--deep-3) 100%)}
.cart-it-thumb .prod-vis-top{position:static;inset:auto;font-family:'IBM Plex Mono',monospace;font-size:8px;
  letter-spacing:.05em;text-transform:uppercase;color:rgba(235,233,226,.68);max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cart-it-thumb .prod-vis-big{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:22px;
  line-height:.95;color:var(--glow);letter-spacing:-.01em}
.cart-it-thumb .prod-vis-big small{font-size:.42em;font-weight:500;margin-left:.1em;color:var(--stone)}
.cart-it-thumb .prod-vis-name{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:12px;
  line-height:1.1;color:var(--glow);max-width:100%;overflow:hidden}
.cart-it-thumb .prod-vis-foot{display:none}
.cart-it-id{grid-area:id;min-width:0}
.cart-it-name{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:16px;font-weight:700;
  color:var(--ink);letter-spacing:-.01em;line-height:1.2}
.cart-it-med{font-family:'IBM Plex Mono',monospace;font-size:12.5px;font-weight:500;color:var(--ink-mid)}
.cart-it-meta{display:block;font-size:12.5px;color:var(--ink-mid);margin-top:2px}
.cart-it-unit{display:block;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-mid);margin-top:4px}
.cart-item .qty{grid-area:qty}
.cart-it-sub{grid-area:sub;font-family:'IBM Plex Mono',monospace;font-size:15.5px;font-weight:600;
  color:var(--ink);text-align:right;min-width:92px}
.cart-it-rm{grid-area:rm;background:none;border:none;cursor:pointer;font-size:13px;color:var(--ink-mid);
  text-decoration:underline;padding:4px}
.cart-it-rm:hover{color:#C0392B}
/* Precio provisional en el carrito: mismo rojo que la ficha, sin notas extra. */
.cart-it-unit.precio-provisional,.cart-it-sub.precio-provisional{color:#C0392B}
@media(max-width:560px){
  .cart-item{grid-template-columns:64px 1fr auto;
    grid-template-areas:"thumb id id" "thumb qty sub" "thumb rm rm";gap:8px 14px}
  .cart-it-thumb{width:64px;height:64px;align-self:start}
  .cart-it-sub{align-self:center}
  .cart-it-rm{justify-self:start;padding-left:0}
}

/* ---------- formulario de entrega (compacto) ---------- */
.cart-form{margin-top:2px}
.cf-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px 14px}
.cff-nombre,.cff-correo,.cff-tel{grid-column:span 2}
.cff-calle,.cff-colonia{grid-column:span 3}
.cff-cp,.cff-ciudad,.cff-estado{grid-column:span 2}
.cff-ref{grid-column:span 6}
.cf-field label{display:block;font-size:12px;font-weight:600;color:var(--ink-mid);margin-bottom:4px}
.cf-opt{font-weight:400;color:var(--ink-mid);opacity:.8}
.cf-field input,.cf-field textarea{width:100%;padding:9px 11px;border:1px solid rgba(10,36,34,.2);
  border-radius:6px;background:#fff;color:var(--ink);font:inherit;font-size:14.5px;
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.cf-field textarea{resize:vertical;min-height:46px;line-height:1.45}
.cf-field input::placeholder,.cf-field textarea::placeholder{color:rgba(10,36,34,.35)}
.cf-mono input{font-family:'IBM Plex Mono',monospace;font-size:14px;letter-spacing:.02em}
.cf-field input:focus,.cf-field textarea:focus{outline:none;border-color:var(--glow-dk);
  box-shadow:0 0 0 3px rgba(79,227,193,.22)}
.cf-field.cf-invalid input,.cf-field.cf-invalid textarea{border-color:#C0392B}
.cf-msg{display:none;font-size:11.5px;color:#C0392B;margin-top:4px;font-weight:600}
.cf-field.cf-invalid .cf-msg{display:block}
@media(max-width:560px){
  .cf-grid{grid-template-columns:1fr 1fr}
  .cf-field{grid-column:span 2}
  .cff-cp,.cff-estado{grid-column:span 1}
  .cff-ciudad{order:1}
  .cff-ref{order:2}
}

/* ---------- resumen, aceptación y cierre (columna lateral fija) ---------- */
.cart-side{position:sticky;top:calc(var(--top-h, 70px) + 14px);display:flex;flex-direction:column;gap:14px}
@media(max-width:880px){.cart-side{position:static}}
.cart-sum{background:#fff;border:1px solid var(--line);border-radius:8px;padding:18px 18px 15px}
.cart-sum .cart-sub-h{margin-bottom:10px}
.cart-sum-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  font-size:14px;color:var(--ink-mid);padding:5px 0}
.cart-sum-row b{font-family:'IBM Plex Mono',monospace;font-weight:600;color:var(--ink)}
.cart-incl{font-family:'IBM Plex Sans',sans-serif!important;font-size:12.5px;color:var(--glow-aa)!important;font-weight:600}
.cart-sum-total{border-top:1px solid var(--line);margin-top:5px;padding-top:12px;font-size:15px;color:var(--ink)}
.cart-sum-total b{font-size:20px}
.cart-iva{font-size:12px;color:var(--ink-mid);margin:8px 0 0}
/* Nota de instalación (León, CP 37xxx): discreta, no compite con el
   resumen ni con el botón de pago — mismo tono que .cart-aviso-simple,
   sobre --stone-2 para distinguirla del blanco del resumen. [hidden] la
   quita sin transición, igual que .cart-nowa/.cart-pago-msg. */
.cart-instala{background:var(--stone-2);border-radius:8px;padding:12px 14px}
.cart-instala p{font-size:12.5px;line-height:1.5;color:var(--ink-mid);margin:0}
.cart-instala p b{color:var(--ink)}
.cart-instala a{color:var(--glow-aa-2);font-weight:600}
.cart-acc{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--ink);line-height:1.45}
.cart-acc input{flex:0 0 auto;width:18px;height:18px;margin-top:1px;accent-color:var(--glow-dk)}
.cart-acc a{color:var(--glow-aa);font-weight:600}
.cart-acc-msg{margin:-6px 0 0}
.cart-acc-msg.is-shown{display:block}
.cart-aviso-simple{font-size:11.5px;line-height:1.5;color:var(--ink-mid);margin:0}
.cart-aviso-simple a{color:var(--glow-aa);font-weight:600}
.cart-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:50px;border:none;
  cursor:pointer;background:var(--glow-dk);color:var(--ink);font-weight:600;font-size:15.5px;border-radius:4px;
  text-decoration:none;transition:opacity var(--t-fast) var(--ease)}
.cart-btn:hover{opacity:.9}
.cart-btn[disabled]{opacity:.55;cursor:default}
/* WhatsApp secundario: menos peso que el pago, contorno en vez de relleno.
   Verde glow-dk (no coral), consistente con el acento del carrito. */
.cart-btn-sec{background:transparent;border:1px solid var(--glow-dk);color:var(--glow-aa);min-height:46px;font-size:14.5px}
.cart-btn-sec:hover{opacity:1;background:rgba(15,169,140,.08)}
/* Mensaje de error del cobro (no bloquea; nunca expone detalle del servidor). */
.cart-pago-msg{font-size:13px;color:#C0392B;font-weight:600;line-height:1.45;margin:0}
.cart-nowa{font-size:13.5px;color:var(--ink-mid);line-height:1.5;margin:0}
.cart-pedido{background:var(--deep);color:var(--stone);border-radius:8px;padding:18px}
.cart-pedido-num{font-size:14.5px;margin:0 0 8px;color:rgba(235,233,226,.85)}
.cart-pedido-num b{font-family:'IBM Plex Mono',monospace;font-size:18px;color:var(--glow);letter-spacing:.02em}
.cart-pedido p{font-size:13.5px;color:rgba(235,233,226,.75);line-height:1.5;margin:0 0 14px}
.cart-pedido .cart-btn{color:var(--ink)}

/* ---------- barra fija de celular (total + enviar) ---------- */
.cart-barra{display:none}
@media(max-width:880px){
  /* En celular, la acción principal vive en la barra fija de abajo: se oculta
     solo el botón principal del panel (no el WhatsApp secundario, que queda a
     la vista en la columna apilada). */
  .cart-side #cartSubmit{display:none}
  .cart-barra{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;align-items:center;gap:12px;
    background:var(--deep);padding:10px 16px;box-shadow:0 -6px 20px rgba(0,0,0,.18)}
  .cart-barra b{font-family:'IBM Plex Mono',monospace;color:var(--stone);font-size:18px;flex:0 0 auto}
  .cart-barra-add{margin-left:auto;background:var(--glow-dk);color:var(--ink);font-weight:600;font-size:15px;
    min-height:46px;padding:0 24px;display:inline-flex;align-items:center;border-radius:4px;border:none;
    cursor:pointer;white-space:nowrap}
  body.pg-cart-lleno .foot{padding-bottom:84px}
}

/* ============================================================
   Páginas legales (privacidad.html, terminos.html): borrador visible.
   Lectura cómoda (~70ch), franja de borrador arriba, índice de secciones y
   corchetes [ASÍ] resaltados para que nadie los pase por alto.
   ============================================================ */
.legal{max-width:72ch}
.legal-draft{display:flex;gap:12px;align-items:flex-start;background:#FFF4D6;border:1px solid #E7C65A;
  border-radius:8px;padding:14px 18px;margin:0 0 26px;font-size:14px;line-height:1.5;color:#5C4600}
.legal-draft b{font-weight:700}
.legal h1{font-size:clamp(28px,4vw,40px);font-weight:700;margin:0 0 6px}
.legal-fecha{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--ink-mid);margin:0 0 26px}
.legal-index{background:#fff;border:1px solid var(--line);border-radius:8px;padding:16px 20px;margin:0 0 30px}
.legal-index h2{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-mid);margin:0 0 10px}
.legal-index ol{margin:0;padding-left:20px;columns:2;column-gap:28px}
@media(max-width:560px){.legal-index ol{columns:1}}
.legal-index li{margin-bottom:6px;break-inside:avoid}
.legal-index a{color:var(--glow-aa);text-decoration:none;font-size:14px}
.legal-index a:hover{text-decoration:underline}
.legal h2.legal-sec{font-size:clamp(19px,2.2vw,23px);font-weight:700;margin:30px 0 10px;scroll-margin-top:90px}
.legal p,.legal li{color:var(--ink);font-size:15.5px;line-height:1.65}
.legal p{margin:0 0 14px}
.legal ul{margin:0 0 16px;padding-left:22px}
.legal li{margin-bottom:6px}
.legal strong{font-weight:700}
.legal a{color:var(--glow-aa);font-weight:600}
/* Corchetes pendientes: resaltados en ámbar, mono, imposibles de pasar por
   alto. Mismo estilo en el aviso simplificado del carrito. */
.legal-blank{background:#FFE39A;color:#5C4600;padding:1px 5px;border-radius:3px;font-weight:600;
  font-family:'IBM Plex Mono',monospace;font-size:.9em}

/* ============================================================
   Pantalla de pago SPEI (reemplaza el carrito tras generar la referencia).
   ============================================================ */
/* Móvil (<=880px): una sola columna centrada; el markup ya viene en orden de
   lectura (aviso, título, tarjeta, pasos, notas, botón). */
.pago{max-width:560px;margin-inline:auto}
.pago .cart-h1{margin-bottom:18px}
/* Escritorio (>=881px): DOS COLUMNAS BALANCEADAS (iguales), alineadas arriba y
   de la misma altura, al ancho del sitio (lo acota .wrap). Izquierda: título,
   pasos y notas; derecha: la tarjeta de datos (área "card"), que ocupa la
   columna completa. El botón "Seguir comprando" (área "boton") va en su propia
   fila al fondo: la fila 1fr antes de él absorbe el sobrante y lo pega al borde
   inferior de la tarjeta. El aviso SIMULADO (área "sim") cruza las dos columnas
   arriba para usar el mismo ancho; si no hay simulado, esa fila queda vacía. */
@media(min-width:881px){
  .pago{max-width:none;margin:0;display:grid;gap:0 56px;align-items:stretch;
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto auto auto 1fr auto;
    grid-template-areas:
      "sim   sim"
      "head  card"
      "pasos card"
      "notas card"
      ".     card"
      "boton card"}
  .pago-sim{grid-area:sim}
  .pago-head{grid-area:head}
  .pago-card{grid-area:card;margin:0;align-self:stretch}
  .pago-pasos{grid-area:pasos}
  .pago-foot{grid-area:notas}
  .pago-seguir{grid-area:boton;align-self:end;margin:0}
}
.pago-sim{background:#C0392B;color:#fff;font-weight:700;text-align:center;letter-spacing:.04em;
  padding:10px 16px;border-radius:6px;margin:0 0 20px;font-family:'IBM Plex Mono',monospace;font-size:13.5px}
/* Pasos numerados: círculo con el número (en mono, como todo dato) a la
   izquierda. Al ser un <ol> con counter, si el paso de la referencia no se
   dibuja los demás se renumeran solos. */
.pago-pasos{list-style:none;margin:0 0 24px;padding:0;counter-reset:paso}
.pago-pasos li{counter-increment:paso;position:relative;padding:3px 0 3px 46px;
  margin:0 0 16px;min-height:32px;color:var(--ink);font-size:15px;line-height:1.5}
.pago-pasos li:last-child{margin-bottom:0}
.pago-pasos li::before{content:counter(paso);position:absolute;left:0;top:0;
  width:32px;height:32px;border-radius:50%;background:var(--glow-aa);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:15px}
.pago-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 20px;margin:0 0 24px}
.pago-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;
  border-top:1px solid var(--line)}
.pago-row:first-child,.pago-clabe:first-child{border-top:none}
.pago-row span{color:var(--ink-mid);font-size:14px}
.pago-row b{color:var(--ink);font-weight:600;text-align:right}
.mono{font-family:'IBM Plex Mono',monospace}
.pago-monto b{font-size:22px;color:var(--glow-aa)}
/* Referencia SPEI (el campo `reference` de Stripe): es un número largo, así que la
   fila lo deja caer a su propio renglón, a todo el ancho, en mono y alineado a
   la izquierda para leerlo y dictarlo sin que choque con la etiqueta. El
   "(ponla en el concepto)" va en gris, más chico, como aclaración. */
.pago-ref{flex-wrap:wrap}
.pago-ref span small{font-weight:400;color:var(--ink-mid)}
.pago-ref b{flex:1 0 100%;margin-top:4px;text-align:left;font-size:16px;word-break:break-all}
.pago-clabe{padding:14px 0;border-top:1px solid var(--line)}
.pago-clabe > span{display:block;color:var(--ink-mid);font-size:14px;margin-bottom:6px}
.pago-clabe-fila{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* El tamaño de la CLABE se adapta al ancho con clamp: a 360px da ~15px, con
   lo que el número (18 dígitos) y el botón "Copiar" caben en el mismo renglón
   (antes a 20px el botón bajaba a una segunda línea). Topa en 20px en pantalla
   ancha, donde sobra espacio. Interletrado un poco menor (.04em) para ayudar al
   ajuste sin perder legibilidad al dictarla. */
.pago-clabe-fila b{font-size:clamp(15px,4.2vw,20px);letter-spacing:.04em;color:var(--ink);word-break:break-all}
.pago-copiar{flex:0 0 auto;background:var(--glow-dk);color:var(--ink);border:none;cursor:pointer;
  font-weight:600;font-size:13px;padding:8px 16px;border-radius:4px;min-height:40px;
  transition:opacity var(--t-fast) var(--ease)}
.pago-copiar:hover{opacity:.9}
.pago-nota{font-size:13.5px;color:var(--ink-mid);line-height:1.55;margin:0 0 8px}
/* "Seguir comprando": botón secundario que no ocupa todo el ancho. */
.pago-seguir{width:auto;display:inline-flex;padding:0 24px;margin-top:16px}