@charset "utf-8";
/* ============================================================
   Cart · Rediseño UX/UI estilo Apple (consistente con el sitio).
   Se carga DESPUÉS de mainStyles.css.
   ============================================================ */

:root{
  --ap-bg:#f5f5f7;
  --ap-card:#ffffff;
  --ap-ink:#1d1d1f;
  --ap-muted:#6e6e73;
  --ap-line:#e3e3e6;
  --ap-blue:#1E90FF;
  --ap-blue-d:#0a6fe0;
  --ap-red:#e5484d;
  --ap-font:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
}

*{ font-family:var(--ap-font); }
body{ background:var(--ap-bg); color:var(--ap-ink); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

/* ---------- Header / navegación ---------- */
#header{ background:rgba(255,255,255,.9) !important; backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px); box-shadow:none !important; border-bottom:1px solid var(--ap-line) !important; }
#top{ background:var(--ap-card) !important; border-bottom:1px solid var(--ap-line) !important; }
.nameLogotype{ color:var(--ap-ink) !important; font-weight:600 !important; letter-spacing:-.5px; }
a.dropbtn{ color:var(--ap-ink) !important; font-weight:500 !important; }
/* Menú de productos (topBottom): íconos + texto, carrusel horizontal
   con la barra de scroll oculta pero funcional (swipe/drag/wheel). */
.bottomHeader{ background:transparent !important; }
.menuIcons{
  display:flex !important;
  overflow-x:auto !important;
  -ms-overflow-style:none;        /* IE/Edge */
  scrollbar-width:none;           /* Firefox */
  -webkit-overflow-scrolling:touch;
}
.menuIcons::-webkit-scrollbar{ display:none !important; width:0 !important; height:0 !important; }  /* Chrome/Safari */
.menuIconsBox{ display:flex !important; flex:0 0 auto; }
a.menuIconsItem{
  display:flex !important;
  flex-direction:column;
  align-items:center;
  gap:5px;
  min-width:78px;
  padding:8px 12px !important;
  color:var(--ap-muted) !important;
  text-decoration:none;
  border-radius:12px;
  transition:background .2s ease, color .2s ease;
}
a.menuIconsItem:hover{ color:var(--ap-blue) !important; background:var(--ap-bg) !important; }
.menuIconsItem img{ width:36px !important; height:36px !important; object-fit:contain; }
.menuIconsItem p{ margin:0 !important; font-size:12px !important; font-weight:500 !important; white-space:nowrap; text-align:center; }
.topHeaderItem{ background:var(--ap-card) !important; border:1px solid var(--ap-line) !important; box-shadow:none !important; border-radius:12px !important; }
.topHeaderItem p{ color:var(--ap-ink) !important; }

/* ---------- Contenedor del carrito ---------- */
.cart{ background:transparent !important; padding:34px 0 64px !important; }
.cartInside{
  max-width:1080px !important;
  width:92% !important;
  margin:0 auto !important;
  display:grid !important;
  grid-template-columns:1fr 340px;
  gap:24px;
  align-items:start;
}
.cartTitle p{
  color:var(--ap-ink) !important;
  font-weight:600 !important;
  font-size:26px !important;
  letter-spacing:-.5px !important;
  margin:0 0 18px 0 !important;
}

/* ---------- Item del carrito ---------- */
/* El contenedor de items deja de tener fondo/ancho fijo del CSS viejo */
.cartItems{ width:auto !important; background:transparent !important; margin:0 !important; padding:0 !important; }
.cartItem{
  background:var(--ap-card) !important;
  border:1px solid var(--ap-line) !important;
  border-radius:18px !important;
  box-shadow:0 8px 26px rgba(0,0,0,.05) !important;
  padding:18px !important;
  margin:0 0 16px 0 !important;
  width:auto !important;
}
.cartItemDetails{ display:flex !important; gap:16px; align-items:flex-start; border-top:none !important; }
.cartItemImg{ flex:0 0 auto; width:auto !important; padding:0 !important; }
.cartItemImg img{
  width:118px !important; height:88px !important;
  object-fit:cover !important; border-radius:12px !important; display:block;
}
.cartItemData{ flex:1 1 auto !important; min-width:0 !important; width:auto !important; padding:0 !important; }
.titleItem,.cartItemData .title{
  color:var(--ap-ink) !important;
  font-weight:600 !important;
  font-size:17px !important;
  letter-spacing:-.2px !important;
  margin:0 0 6px 0 !important;
}
.cartItemData .text{ color:var(--ap-ink) !important; font-weight:600 !important; font-size:15px !important; line-height:1.55 !important; letter-spacing:-.1px; overflow-wrap:anywhere; word-break:normal; }
.cartItemPrice{
  flex:0 0 auto;
  width:auto !important;
  padding:0 !important;
  color:var(--ap-ink) !important;
  font-weight:700 !important;
  font-size:18px !important;
  letter-spacing:-.3px !important;
  white-space:nowrap;
  align-self:center;
}

/* Botones del item */
.buttons{ margin-top:12px; display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.buttons br{ display:none; }
.toggleBtn{
  background:#fff !important;
  color:var(--ap-blue) !important;
  border:1px solid var(--ap-line) !important;
  border-radius:980px !important;
  padding:8px 18px !important;
  font-size:14px !important; font-weight:500 !important; cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}
.toggleBtn:hover{ background:var(--ap-bg) !important; }
.toggleBtn.is-open{ background:var(--ap-bg) !important; color:var(--ap-ink) !important; }
.btnDelete{
  background:#fff !important;
  color:var(--ap-red) !important;
  border:1px solid #f2c9ca !important;
  border-radius:980px !important;
  padding:8px 18px !important;
  font-size:14px !important; font-weight:500 !important; cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}
.btnDelete:hover{ background:#fdeaea !important; border-color:var(--ap-red) !important; }

/* Acordeón de detalles (lo controla el JS por height) */
.detalles{ height:0; overflow:hidden; transition:height .35s cubic-bezier(.4,0,.2,1); width:100%; order:2; background:transparent !important; }
.detalles .text{ background:var(--ap-bg); border-radius:12px; padding:14px 16px; margin-top:10px; color:var(--ap-ink) !important; font-weight:600 !important; font-size:15px !important; line-height:1.6; }

/* Cupón */
.cartItemData a.dropbtn{
  display:inline-flex !important; align-items:center; justify-content:center;
  text-align:center; line-height:1; margin-top:10px;
  background:var(--ap-blue) !important; color:#fff !important;
  border-radius:980px !important; padding:12px 24px !important;
  font-weight:600 !important; font-size:14px !important; text-decoration:none !important;
}
.cartItemData a.dropbtn:hover{ background:var(--ap-blue-d) !important; }

/* ---------- Resumen / total ---------- */
.cartPrice{
  background:var(--ap-card) !important;
  border:1px solid var(--ap-line) !important;
  border-radius:18px !important;
  box-shadow:0 8px 26px rgba(0,0,0,.05) !important;
  padding:22px !important;
  width:auto !important;
  height:auto !important;
  box-sizing:border-box;
  position:sticky; top:90px;
}
/* Fila superior: Subtotal | nº productos */
.cartPriceInside{ width:auto !important; }
.cartPrice .cartPriceInside:first-child{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  border-bottom:1px solid var(--ap-line); padding-bottom:12px; margin-bottom:14px;
}
.cartPrice h3{ color:var(--ap-muted) !important; font-weight:500 !important; font-size:15px !important; margin:0 !important; }
.cartPrice h5{ color:var(--ap-muted) !important; font-weight:400 !important; font-size:14px !important; margin:0 !important; text-align:right; }
.cartPrice h2{ color:var(--ap-ink) !important; font-weight:700 !important; font-size:24px !important; letter-spacing:-.5px !important; margin:0 0 14px 0 !important; }
/* Botón "Proceder al pago" a todo el ancho, debajo del total */
.cartPrice a{
  display:block !important; width:100% !important; box-sizing:border-box;
  text-align:center; margin:0 !important; float:none !important;
  background:var(--ap-blue) !important; color:#fff !important;
  border-radius:980px !important; padding:14px 20px !important; height:auto !important;
  font-weight:600 !important; font-size:16px !important; text-decoration:none !important;
  transition:background .25s ease, transform .2s ease;
}
.cartPrice a:hover{ background:var(--ap-blue-d) !important; transform:translateY(-1px); }

/* ---- Latido suave del CTA (halo que respira · estilo Apple) ---- */
@keyframes aakBtnGlow{
  0%   { box-shadow:0 8px 22px rgba(0,128,128,.20), 0 0 0 0 rgba(0,168,168,.45); }
  50%  { box-shadow:0 16px 38px rgba(0,128,128,.26), 0 0 0 13px rgba(0,168,168,0); transform:translateY(-2px) scale(1.02); }
  100% { box-shadow:0 8px 22px rgba(0,128,128,.20), 0 0 0 0 rgba(0,168,168,0); }
}
@keyframes aakBtnGlowGold{
  0%   { box-shadow:0 8px 22px rgba(212,175,55,.30), 0 0 0 0 rgba(232,200,90,.5); }
  50%  { box-shadow:0 16px 38px rgba(212,175,55,.38), 0 0 0 13px rgba(232,200,90,0); transform:translateY(-2px) scale(1.02); }
  100% { box-shadow:0 8px 22px rgba(212,175,55,.30), 0 0 0 0 rgba(232,200,90,0); }
}
.cartPrice a{ animation:aakBtnGlow 2.6s ease-in-out infinite; }
.cartPrice a:hover{ animation-play-state:paused; }
@media (prefers-reduced-motion:reduce){ .cartPrice a{ animation:none !important; } }

/* ---------- Estado vacío ---------- */
.delete{
  background:var(--ap-card) !important;
  border:1px solid var(--ap-line) !important;
  border-radius:20px !important;
  box-shadow:0 8px 26px rgba(0,0,0,.05) !important;
  text-align:center; padding:44px 28px !important;
}
.delete h1{ color:var(--ap-ink) !important; font-weight:600 !important; font-size:24px !important; letter-spacing:-.4px; }
.delete img{ width:96px !important; height:auto !important; opacity:.8; margin:14px auto; }
.delete p{ color:var(--ap-muted) !important; font-size:15px !important; }
.delete a{
  display:inline-block; margin-top:8px;
  width:auto !important; height:auto !important;
  background:var(--ap-blue) !important; color:#fff !important;
  border-radius:980px !important; padding:12px 30px !important;
  font-weight:600 !important; text-decoration:none !important;
}
.delete a:hover{ background:var(--ap-blue-d) !important; }

/* ---------- Footer ---------- */
.footer{ background:var(--ap-bg) !important; border:1px solid var(--ap-line); border-radius:18px !important; }
.box_footer_son .title{ color:var(--ap-ink) !important; font-weight:600 !important; }
.box_footer_son a{ color:var(--ap-blue) !important; }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .cartInside{ grid-template-columns:1fr; padding-bottom:170px; }

  /* Resumen como barra fija al fondo de la ventana */
  .cartPrice{
    position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important; top:auto !important;
    width:100% !important; border-radius:16px 16px 0 0 !important;
    box-shadow:0 -6px 22px rgba(0,0,0,.16) !important;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom)) !important;
    z-index:60; display:flex !important; flex-direction:column; gap:8px !important;
  }
  .cartPrice .cartPriceInside{ width:auto !important; }
  /* Fila 1: Subtotal | nº productos (compacta, sin borde) */
  .cartPrice .cartPriceInside:first-child{
    border-bottom:none !important; padding-bottom:0 !important; margin-bottom:0 !important;
    display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  }
  /* Fila 2: total | botón, alineados en una sola línea */
  .cartPrice .cartPriceInside:last-child{
    display:flex !important; align-items:center; justify-content:space-between; gap:14px;
  }
  .cartPrice h2{ margin:0 !important; font-size:21px !important; white-space:nowrap; }

  /* Botón "Proceder al pago": amarillo → dorado, texto negro */
  .cartPrice a{
    display:inline-flex !important; align-items:center; justify-content:center;
    width:auto !important; flex:0 0 auto; margin:0 !important;
    padding:13px 26px !important;
    background:linear-gradient(180deg,#ffe14d,#d4af37) !important;
    color:#1a1a1a !important;
    animation-name:aakBtnGlowGold !important;   /* glow dorado para el botón dorado */
  }
  .cartPrice a:hover{
    background:linear-gradient(180deg,#ffd21a,#c69f2f) !important;
    color:#1a1a1a !important; transform:translateY(-1px);
  }
}
@media (max-width:560px){
  .cartItemDetails{ flex-wrap:wrap; }
  .cartItemImg img{ width:100% !important; height:180px !important; }
  .cartItemPrice{ align-self:flex-start; }
}

/* ============================================================
   Modal "Eliminar servicio" (rediseño estilo Apple).
   Reemplaza la ventana antigua boxDelete.php: ahora es un
   overlay dentro de la misma página del carrito.
   ============================================================ */
.ap-modal{
  position:fixed; inset:0; z-index:1000;
  display:none; align-items:center; justify-content:center;
  padding:20px;
}
.ap-modal.is-open{ display:flex; }
.ap-modal__backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  animation:apFade .25s ease;
}
.ap-modal__card{
  position:relative; z-index:1;
  background:var(--ap-card);
  border:1px solid var(--ap-line);
  border-radius:22px;
  padding:30px 26px 24px;
  width:100%; max-width:380px;
  text-align:center;
  box-shadow:0 24px 70px rgba(0,0,0,.28);
  animation:apModalIn .28s cubic-bezier(.2,.8,.2,1);
}
.ap-modal__icon{
  width:60px; height:60px; margin:0 auto 16px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#fdeaea; color:var(--ap-red);
}
.ap-modal__icon svg{ width:28px; height:28px; }
.ap-modal__card h3{
  color:var(--ap-ink) !important;
  font-weight:600 !important; font-size:20px !important;
  letter-spacing:-.3px; margin:0 0 8px !important;
}
.ap-modal__card p{
  color:var(--ap-muted) !important;
  font-size:15px !important; line-height:1.5 !important;
  margin:0 0 22px !important;
}
.ap-modal__actions{ display:flex; gap:10px; }
.ap-btn{
  flex:1 1 0; min-width:0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:980px; padding:13px 18px;
  font-size:15px; font-weight:600; cursor:pointer;
  text-decoration:none; border:1px solid transparent;
  transition:background .2s ease, border-color .2s ease, transform .15s ease;
}
.ap-btn--ghost{ background:#fff; color:var(--ap-ink); border-color:var(--ap-line); }
.ap-btn--ghost:hover{ background:var(--ap-bg); }
.ap-btn--danger{ background:var(--ap-red); color:#fff; }
.ap-btn--danger:hover{ background:#c9383d; transform:translateY(-1px); }

@keyframes apModalIn{
  from{ opacity:0; transform:translateY(12px) scale(.96); }
  to{ opacity:1; transform:none; }
}
@keyframes apFade{ from{ opacity:0; } to{ opacity:1; } }

@media (max-width:400px){
  .ap-modal__actions{ flex-direction:column-reverse; }
}