/* ============================================================
   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}
.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).
   ============================================================ */
.pago{max-width:520px}
.pago .cart-h1{margin-bottom:10px}
.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}
.pago-intro{color:var(--ink-mid);font-size:15px;line-height:1.6;margin:0 0 20px}
.pago-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 20px;margin:0 0 18px}
.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)}
.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}
.pago-clabe-fila b{font-size:20px;letter-spacing:.06em;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}
