/* tienda.css · Carrito, checkout y cuenta.

   Va aparte de estilo.css a propósito: estilo.css lo toca `scripts/build_web.py`
   cada vez que se regenera el catálogo, y esto no tiene nada que ver con el
   catálogo. Usa las variables de color de estilo.css (--navy, --oro, --tinta…),
   así que si se cambia la paleta allí, esto la sigue solo. */

/* ---------------- botón del carrito en la cabecera ---------------- */
.boton.carrito{display:inline-flex;align-items:center;gap:7px;cursor:pointer;border:0}
.boton.carrito #cartN{
  display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;
  border-radius:10px;background:var(--oro-claro);color:var(--navy);
  font-size:11.5px;font-weight:700;line-height:1;
}
.boton.carrito #cartN.zero{display:none}

/* ---------------- botón «añadir» ---------------- */
.tarjeta{position:relative}
.tarjeta .anadir{
  position:absolute;right:10px;bottom:10px;opacity:0;transform:translateY(4px);
  transition:opacity .16s,transform .16s;cursor:pointer;border:0;
}
.tarjeta:hover .anadir,.tarjeta:focus-within .anadir{opacity:1;transform:none}
.anadir{cursor:pointer;border:0}
.anadir.done{background:var(--verde);color:#fff}
/* En táctil no hay hover: el botón se queda visible siempre. */
@media(hover:none){.tarjeta .anadir{opacity:1;transform:none}}

/* ---------------- panel lateral ---------------- */
.scrim{
  position:fixed;inset:0;background:rgba(19,28,48,.45);backdrop-filter:blur(2px);
  z-index:90;opacity:0;pointer-events:none;transition:.2s;
}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:406px;max-width:100vw;background:var(--panel);
  z-index:95;transform:translateX(102%);transition:transform .3s cubic-bezier(.3,.8,.3,1);
  display:flex;flex-direction:column;
}
.drawer.on{transform:none;box-shadow:-20px 0 60px rgba(19,28,48,.18)}
.dhead{display:flex;align-items:center;gap:10px;padding:18px 22px;border-bottom:1px solid var(--linea)}
.dhead b{font-family:Fraunces,Georgia,serif;font-size:18px}
.dhead .lbl{color:var(--tenue);font-size:12.5px}
.dhead .x{
  margin-left:auto;border:0;background:var(--fondo);width:32px;height:32px;border-radius:8px;
  font-size:20px;line-height:1;color:var(--suave);cursor:pointer;transition:.15s;
}
.dhead .x:hover{background:var(--linea2);color:var(--tinta)}

.dbody{flex:1;overflow-y:auto;padding:6px 22px}
.line{display:flex;gap:13px;padding:16px 0;border-bottom:1px solid var(--linea2)}
.line img{
  width:60px;height:60px;object-fit:contain;background:var(--fondo);
  border-radius:10px;padding:5px;flex:0 0 auto;
}
.line .ln{flex:1;min-width:0}
.line h4{margin:0 0 3px;font-size:13.5px;font-weight:600;line-height:1.3}
.line h4 a{color:var(--tinta)}
.line .m{font-size:11.5px;font-weight:600;color:var(--oro);text-transform:uppercase;letter-spacing:.04em}
.line .tope{margin-top:6px;font-size:11.5px;font-weight:600;color:var(--oro)}
.line .p{text-align:right;font-weight:700;font-size:14.5px;white-space:nowrap}

.qty{display:flex;align-items:center;gap:3px;margin-top:9px}
.qty button{
  width:27px;height:27px;border:1px solid var(--linea);background:var(--panel);
  border-radius:7px;font-size:15px;font-weight:700;line-height:1;
  display:grid;place-items:center;cursor:pointer;transition:.15s;
}
.qty button:hover:not(:disabled){border-color:var(--navy)}
.qty button:disabled{opacity:.35;cursor:not-allowed}
.qty span{min-width:30px;text-align:center;font-size:13.5px;font-weight:700}

.dfoot{border-top:1px solid var(--linea);padding:18px 22px 22px;background:var(--fondo)}
.sum{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px;
     font-size:13.5px;font-weight:500;color:var(--suave)}
.sum.tot{margin:11px 0 16px;font-size:15px;color:var(--tinta);font-weight:700}
.sum.tot b{font-family:Fraunces,Georgia,serif;font-size:25px}
.dfoot .boton{width:100%;justify-content:center;text-align:center}
.dnote{margin:12px 0 0;font-size:11.5px;line-height:1.5;color:var(--tenue);text-align:center}
.dempty{padding:72px 20px;text-align:center;color:var(--tenue)}
.dempty b{display:block;font-family:Fraunces,Georgia,serif;font-size:18px;color:var(--tinta);margin-bottom:8px}
.dempty span{font-size:13.5px}

@media(max-width:720px){.drawer{width:100%}}

/* ---------------- páginas de tienda (checkout, cuenta, pedido) ---------- */
.pag{max-width:1040px;margin:0 auto;padding:38px 28px 80px}
.pag>h1{font-family:Fraunces,Georgia,serif;font-size:34px;margin:6px 0 6px}
.pag>.sub{color:var(--suave);font-size:16px;margin:0 0 26px;max-width:60ch}
.migas{font-size:12.5px;color:var(--tenue)}
.migas a{color:var(--suave)}

.dos-col{display:grid;grid-template-columns:1fr 380px;gap:24px;align-items:start}
@media(max-width:900px){.dos-col{grid-template-columns:1fr}}
.resumen{position:sticky;top:88px}
@media(max-width:900px){.resumen{position:static}}

.bloque{
  background:var(--panel);border:1px solid var(--linea);border-radius:var(--radio);
  padding:22px 24px;margin-bottom:18px;box-shadow:var(--sombra);
}
.bloque h2{font-family:Fraunces,Georgia,serif;font-size:19px;margin:0 0 4px}
.bloque .desc{color:var(--suave);font-size:13.5px;margin:0}
.bloque-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:16px}

.campo{margin-bottom:14px}
.campo label{display:block;font-size:12.5px;font-weight:600;margin-bottom:5px;color:var(--suave)}
.campo input,.campo select,.campo textarea{
  width:100%;padding:11px 13px;border:1px solid var(--linea);border-radius:10px;
  background:var(--panel);font:inherit;font-size:14.5px;color:var(--tinta);transition:.15s;
}
.campo textarea{min-height:74px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:0;border-color:var(--navy);box-shadow:0 0 0 3px rgba(19,28,48,.08);
}
.campo input:invalid:not(:placeholder-shown){border-color:#b4443a}
.pista{font-size:12px;color:var(--tenue);margin-top:5px;line-height:1.5}
.pista a{color:var(--suave);text-decoration:underline}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fila-3{display:grid;grid-template-columns:.8fr 1.2fr 1.2fr;gap:14px}
@media(max-width:640px){.fila,.fila-3{grid-template-columns:1fr}}

.linea-art{display:flex;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--linea2)}
.linea-art img{width:48px;height:48px;object-fit:contain;background:var(--fondo);border-radius:8px;padding:4px}
.linea-art .n{flex:1;min-width:0}
.linea-art .n b{display:block;font-size:13.5px;font-weight:600;line-height:1.3}
.linea-art .n span{font-size:11.5px;color:var(--tenue)}
.linea-art .cifra{font-weight:700;font-size:14px;white-space:nowrap}

.totales{margin-top:16px;padding-top:14px;border-top:1px solid var(--linea)}
.totales div{display:flex;justify-content:space-between;align-items:baseline;
             margin-bottom:6px;font-size:13.5px;color:var(--suave)}
.totales .total{margin-top:12px;padding-top:12px;border-top:1px solid var(--linea);
                font-size:17px;font-weight:700;color:var(--tinta)}
.totales .total span:last-child{font-family:Fraunces,Georgia,serif;font-size:24px}

.aviso{padding:13px 16px;border-radius:12px;margin-bottom:20px;font-size:14px;line-height:1.55}
.aviso-mal{background:#fdf0ee;border:1px solid #f0cdc7;color:#8f3227}
.aviso-info{background:#eef3fb;border:1px solid #cfdcf0;color:#28456f}
.aviso-bien{background:#eef7f1;border:1px solid #c8e3d3;color:#14603c}

.boton.btn-ancho{width:100%;justify-content:center;text-align:center}
.boton:disabled{opacity:.45;cursor:not-allowed}

/* ---------------- estados de pedido ---------------- */
.estado{
  display:inline-block;padding:3px 10px;border-radius:20px;font-size:11.5px;
  font-weight:600;letter-spacing:.02em;
}
.e-pendiente_pago{background:#fbf1de;color:#8a6316}
.e-pagado,.e-preparando{background:#eef3fb;color:#28456f}
.e-enviado{background:#e9f2ec;color:#1a6f47}
.e-entregado{background:#e3efe8;color:#14603c}
.e-cancelado,.e-reembolsado{background:#f2f0ee;color:#6b6459}

.pedido-fila{
  display:flex;gap:16px;align-items:center;padding:15px 0;border-bottom:1px solid var(--linea2);
}
.pedido-fila:last-child{border-bottom:0}
.pedido-fila .num{font-weight:700;font-size:14.5px}
.pedido-fila .cuando{font-size:12.5px;color:var(--tenue)}
.pedido-fila .der{margin-left:auto;text-align:right}

.linea-tiempo{list-style:none;margin:18px 0 0;padding:0}
.linea-tiempo li{position:relative;padding:0 0 18px 24px;font-size:13.5px;color:var(--suave)}
.linea-tiempo li:before{
  content:'';position:absolute;left:0;top:5px;width:9px;height:9px;border-radius:50%;
  background:var(--linea);
}
.linea-tiempo li:after{
  content:'';position:absolute;left:4px;top:14px;bottom:0;width:1px;background:var(--linea);
}
.linea-tiempo li:last-child{padding-bottom:0}
.linea-tiempo li:last-child:after{display:none}
.linea-tiempo li.hecho:before{background:var(--verde)}
.linea-tiempo li b{display:block;color:var(--tinta);font-weight:600}

.vacio{padding:56px 20px;text-align:center;color:var(--tenue)}
.vacio b{display:block;font-family:Fraunces,Georgia,serif;font-size:19px;color:var(--tinta);margin-bottom:8px}

/* ---------------- pestañas y listas ----------------
   Los nombres de clase son los mismos que en klockshealth a propósito: los
   cuerpos y los scripts de estas páginas se copian de allí sin tocarlos, y
   renombrar clases solo serviría para introducir erratas. Lo que cambia es la
   paleta, que sale de las variables de estilo.css. */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--linea);margin-bottom:26px;
      overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{
  padding:11px 16px;border:0;background:0;font:inherit;font-size:14px;font-weight:600;
  color:var(--tenue);cursor:pointer;border-bottom:2px solid transparent;
  margin-bottom:-1px;white-space:nowrap;
}
.tabs button:hover{color:var(--tinta)}
.tabs button.on{color:var(--tinta);border-bottom-color:var(--oro)}

.panel{display:none}
.panel.on{display:block}

.lista{border:1px solid var(--linea);border-radius:14px;overflow:hidden;background:var(--panel)}
.lista .item{display:flex;align-items:center;gap:16px;padding:16px 18px;border-bottom:1px solid var(--linea2)}
.lista .item:last-child{border-bottom:0}
.lista .item:hover{background:var(--fondo)}
.item .principal{flex:1;min-width:0}
.item .principal b{display:block;font-size:14.5px}
.item .principal span{display:block;font-size:12.5px;color:var(--tenue);margin-top:2px}
.item .cifra{font-weight:700;font-size:14.5px;white-space:nowrap}

.hito{display:flex;gap:12px;padding:10px 0}
.hito i{width:9px;height:9px;border-radius:50%;background:var(--oro-claro);margin-top:6px;flex:0 0 auto}
.hito b{font-size:13.5px;display:block}
.hito span{font-size:12px;color:var(--tenue)}

.cargando{padding:44px 20px;text-align:center;color:var(--tenue);font-size:13.5px}
.pag-estrecha{max-width:720px}

/* Puente con los botones de klockshealth: allí son `.btn`, aquí `.boton`.
   Se estilan igual para no tener que reescribir los scripts copiados. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border:1px solid transparent;border-radius:11px;
  font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;transition:.16s;
  background:var(--navy);color:#fff;
}
.btn:hover:not(:disabled){background:var(--navy2)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-claro{background:var(--panel);color:var(--tinta);border-color:var(--linea)}
.btn-claro:hover:not(:disabled){background:var(--fondo);border-color:var(--navy)}
.btn-verde{background:var(--verde)}
.btn-verde:hover:not(:disabled){background:#15583a}
.btn-mini{padding:8px 14px;font-size:13px;border-radius:9px}
.btn-ancho{width:100%}