/* ===========================
   carrito.css · GLK
   Estilos base del carrito
=========================== */

:root{
  --bg-url: url('assets/fondo-cesta-bosque.jpg'); /* ← cambia aquí la ruta del fondo */
  --glass: rgba(0,0,0,.35);
  --stroke: rgba(255,255,255,.14);
  --text: #f2f2f2;
  --muted: #c9c9c9;
  --accent: #58c26b;   /* verde GLK */
  --accent-2: #ffd166; /* acento secundario */
  --danger: #ff6464;
  --shadow: 0 12px 40px rgba(0,0,0,.35);
  --radius: 16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body.page-carrito{
  margin:0;
  color:var(--text);
  font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #0b0f0c;
}

/* Fondo bosque con cesta */
.bg-layer{
  position: fixed; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.65)),
    var(--bg-url) center/cover no-repeat fixed;
  z-index: -1;
  filter: saturate(1.05);
}

/* Utilidades */
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.container{max-width:1100px; margin:40px auto; padding:0 16px}

/* Header */
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  max-width:1100px; margin:16px auto 0; padding:0 16px;
}
.site-header .logo{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:50%;
  background: rgba(255,255,255,.08);
  color:#fff; text-decoration:none; font-weight:700; letter-spacing:.5px;
  border:1px solid var(--stroke);
}
.crumbs{opacity:.9}
.crumbs a{color:#fff; text-decoration:none}
.crumbs span{color:var(--muted)}

/* Título */
#carrito-title{
  margin:18px 0 14px;
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing:.3px;
}

/* Acciones superiores */
.cart-actions{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin:12px 0 18px;
}

/* Botones */
.btn{
  appearance:none; border:1px solid var(--stroke); background:rgba(255,255,255,.08);
  color:#fff; padding:10px 14px; border-radius:10px; cursor:pointer;
  transition: transform .06s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{transform: translateY(-1px)}
.btn.primary{background:var(--accent); border-color:transparent; color:#0c260f; font-weight:700}
.btn.alt{background:var(--accent-2); border-color:transparent; color:#2b240a; font-weight:700}
.btn.ghost{background:transparent}

/* Tabla de carrito */
.cart{
  background: var(--glass);
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.cart-head{
  display:grid;
  grid-template-columns: 1.5fr .5fr .6fr .6fr .5fr;
  gap:0; padding:12px 14px;
  background: rgba(255,255,255,.06);
  border-bottom:1px solid var(--stroke);
  font-weight:600;
}
.cart-head .col{opacity:.9}

.cart-list{list-style:none; margin:0; padding:0}
.cart-item{
  display:grid;
  grid-template-columns: 1.5fr .5fr .6fr .6fr .5fr;
  gap:0; padding:12px 14px; align-items:center;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.cart-item:last-child{border-bottom:none}

.col.item{display:flex; gap:12px; align-items:center}
.thumb{
  width:64px; height:64px; object-fit:cover; border-radius:10px;
  border:1px solid var(--stroke); background:#0c0c0c;
}
.meta .title{margin:0 0 4px; font-size:15px}
.meta .desc{margin:0; opacity:.8; font-size:13px}
.badges .badge{
  display:inline-block; padding:2px 8px; font-size:12px; border-radius:999px;
  background: rgba(255,255,255,.08); border:1px solid var(--stroke);
}

.col.price, .col.subtotal{font-variant-numeric: tabular-nums}
.col.qty{display:flex; align-items:center; gap:8px}
.qty-input{
  width:86px; padding:8px 10px; border-radius:8px; border:1px solid var(--stroke);
  background: rgba(0,0,0,.25); color:#fff; outline:none;
}
.col.act .btn.remove{background:transparent; border-color:rgba(255,100,100,.35); color:#ffdede}
.col.act .btn.remove:hover{background:rgba(255,100,100,.15)}

/* Resumen */
.summary{
  margin-top:18px; padding:16px; border-radius:var(--radius);
  border:1px solid var(--stroke); background:rgba(255,255,255,.08);
  box-shadow: var(--shadow);
}
.summary h2{margin:0 0 10px}
.summary .row{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 0; border-bottom:1px dashed rgba(255,255,255,.12);
}
.summary .row:last-child{border-bottom:none}
.summary .row.total strong{font-size:20px}
.donation{
  display:flex; align-items:center; gap:6px;
  background: rgba(0,0,0,.25); padding:6px 10px; border-radius:10px; border:1px solid var(--stroke);
}

.buyer-info{
  margin-top:14px;
  display:flex; flex-direction:column; gap:8px;
}
.buyer-info input, .buyer-info textarea{
  padding:8px 10px; border-radius:8px;
  border:1px solid var(--stroke);
  background:rgba(0,0,0,.25); color:#fff; resize:vertical;
}

.donation input{
  width:120px; background:transparent; border:none; outline:none; color:#fff; text-align:right;
}
.donation .unit{opacity:.85}

/* CTA */
.cta{display:flex; gap:10px; margin:12px 0 4px; flex-wrap:wrap}

/* Pago BTC */
.btc{
  margin-top:14px; padding:14px; border-radius:12px;
  border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.25);
}
.btc h3{margin:0 0 8px}
/* ===== BTC + GKU estilos unificados ===== */

.btc-dest,
.gku-dest {
  display:flex;
  gap:8px;
  align-items:center;
  margin:8px 0;
}

#btc-address,
#gku-address {
  flex:1;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.25);
  color:#fff;
}.btc-qr img{display:block; width:160px; height:160px; object-fit:contain; border-radius:8px; border:1px solid var(--stroke); background:#fff}
.btc-amounts{margin:8px 0 0; opacity:.95}

/* Notas */
.notes{
  max-width:1100px; margin:18px auto; padding:0 16px;
}
.notes details{
  background: rgba(255,255,255,.08);
  border:1px solid var(--stroke); border-radius: 12px; padding:10px 12px;
}
.notes summary{cursor:pointer; font-weight:600}
.notes .content{opacity:.95}

/* Footer */
.site-footer{
  max-width:1100px; margin:20px auto 28px; padding:0 16px;
  opacity:.8; font-size:14px;
}

/* ===========================
   Responsive
=========================== */
@media (max-width: 900px){
  .cart-head{display:none}
  .cart-item{
    grid-template-columns: 1fr; gap:10px; padding:12px;
    border-bottom:1px solid rgba(255,255,255,.1);
  }
  .col.item{align-items:flex-start}
  .col.price, .col.qty, .col.subtotal, .col.act{
    display:flex; align-items:center; justify-content:space-between;
    background: rgba(255,255,255,.04);
    border:1px solid var(--stroke); border-radius:10px; padding:8px 10px;
  }
  .col.qty{gap:10px}
  .thumb{width:72px; height:72px}
  .summary{padding:14px}
}

/* Pequeños ajustes para pantallas muy altas: evita que todo quede muy arriba */
@media (min-height: 900px){
  .container{margin-top:56px}
}





/* ===========================
   Mejora móvil avanzada
=========================== */
@media (max-width: 768px){
  /* Fondo específico y más ligero para móvil */
  :root{ --bg-url: url('assets/fondo-cesta-bosque-mobile.jpg'); }

  /* Espaciado general */
  .container{ margin:24px auto; padding:0 12px; }

  /* Logo y migas más compactos */
  .site-header{ gap:10px; }
  .site-header .logo{ width:42px; height:42px; }
  .crumbs{ font-size:14px; }

  /* Tarjetas legibles y con buenos targets táctiles */
  .cart-item{ gap:12px; }
  .thumb{ width:80px; height:80px; }
  .btn, .qty-input, #btc-address, .donation input{
    min-height:48px; /* objetivo táctil recomendado */
    font-size:16px;  /* evita zoom en iOS */
  }

  /* Campos en filas con etiqueta a la izquierda y valor a la derecha */
  .col.price, .col.qty, .col.subtotal, .col.act{
    gap:10px;
  }

  /* Resumen pegajoso hacia el final para no perder las CTAs */
  .summary{
    position: sticky; bottom: 8px; z-index: 5;
    backdrop-filter: blur(6px);
  }

  /* Sección BTC: imagen QR adaptable */
  .btc-qr img{ width:140px; height:140px; }

  /* CTAs con 2 columnas en móvil */
  .cta{ display:grid; grid-template-columns: 1fr 1fr; }
  .cta .btn{ width:100%; }

  /* Notas colapsadas más contrastadas */
  .notes details{ padding:12px; }
}

/* Ultra-compacto (teléfonos pequeños) */
@media (max-width: 380px){
  .thumb{ width:72px; height:72px; }
  .cta{ grid-template-columns: 1fr; }
}

/* BTC proof */
.btc-proof{ margin-top:10px; display:flex; flex-direction:column; gap:8px; }
.btc-proof input[type="text"]{
  padding:8px 10px; border-radius:8px; border:1px solid var(--stroke);
  background: rgba(0,0,0,.25); color:#fff;
}
.btc-paid{ display:flex; align-items:center; gap:8px; opacity:.95; }
.btc-file input[type="file"]{ color:#ddd; }
.proof-preview{ margin-top:6px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.proof-preview img{ max-width:120px; max-height:120px; border-radius:8px; border:1px solid var(--stroke); background:#000; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none !important; }

/* ===== Fix móvil: evitar solapes en la cesta ===== */
@media (max-width: 768px){
  /* La tarjeta Resumen deja de ser sticky en móvil */
  .summary{
    position: static !important;
    z-index: auto !important;
    margin-top: 14px !important;
  }

  /* Que las acciones y etiquetas no se monten: permiten salto de línea */
  .cart-actions{ flex-wrap: wrap !important; gap: 8px 10px !important; }
  .tags{ flex-wrap: wrap !important; gap: 6px !important; }

  /* Separación entre bloques */
  .cart{ margin-bottom: 12px !important; }
  
  /* Campos fluidos para que no invadan otras columnas */
  .donation input,
  #btc-address,
  #btc-proof-input{
    width: 100% !important;
  }
}

/* =============================================
   Fondo general para la página del Carrito
   Usamos .bg-layer porque así lo pide tu HTML
============================================= */

.page-carrito .bg-layer{
  position: fixed;
  inset: 0;
  background: url("./fondo-cesta.png") center center / cover no-repeat;
  z-index: -1;
  opacity: 0.85; /* Ajustable */
}

/* Fondo para móvil */
@media (max-width: 768px){
  .page-carrito .bg-layer{
    background: url("./fondo-cesta-mobil.png") center center / cover no-repeat;
    opacity: 0.9; /* Ajustable */
  }
}

/* =============================================
   Logo GLK en header
============================================= */

.site-header .logo{
  display: inline-flex;
  align-items: center;
  justify-content: center;
width: 52px;
  height: 52px;
  padding: 0;
}

.site-header .logo-img{
   width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Logo más pequeño en móvil */
@media (max-width: 768px){
  .site-header .logo-img{
    width: 40px;
    height: 40px;
  }
}
.page-carrito .card, 
.page-carrito .summary,
.page-carrito .cart{
  backdrop-filter: blur(10px);
  background: rgba(0,0,0,0.25);
}

/* Acceso al Chat AON desde la cesta */
.aon-access{
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(255,255,255,.18);
  display:flex;
  flex-direction:column;
  gap:6px;
}

.aon-hint{
  font-size: 13px;
  opacity: .9;
}

@media (max-width: 768px){
  .aon-access .btn{
    width:100%;
    text-align:center;
  }
}

/* ===== Chat AON Circular Button ===== */

.aon-access{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(255,255,255,.18);

  display: flex;
  align-items: center;
  gap: 14px;
}

.aon-circle{
  width: 75px;
  height: 75px;
  border-radius: 50%;
  background: #ff3b30; /* rojo tipo Apple */
  border: 2px solid rgba(255,255,255,0.6);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  line-height: 1.15;
  padding: 8px 6px;
  cursor: pointer;
  transition: transform .2s ease, opacity .2s ease;
}

.aon-circle:disabled{
  opacity: .4;
  cursor: not-allowed;
}

.aon-circle:not(:disabled):hover{
  transform: scale(1.06);
}

.aon-hint{
  font-size: 13px;
  opacity: .85;
  flex: 1;
}

@media (max-width: 768px){
  .aon-access{
    flex-direction: row;
    align-items: center;
  }

  .aon-circle{
    width: 65px;
    height: 65px;
    font-size: 11px;
    padding: 6px;
  }
}

/* ====== PAGO GKU ====== */

.gku {
  margin-top: 24px;
  padding: 16px;
  border-radius: 12px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.15);
}

.gku h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

.gku-dest,
.gku-amounts {
  margin-top: 12px;
}

.gku-dest input {
  width: 100%;
  margin-top: 4px;
  padding: 6px 10px;
}

.gku .btn {
  margin-top: 8px;
}

.gku-amounts strong {
  font-size: 16px;
}