/* PLANET · Listas de regalo (lista-regalo.html, mis-listas.html) */
:root {
  --planet-purple: #7B2FBE;
  --yellow: #FFC612;
  --pink: #FF6B9D;
  --teal: #0EC4B8;
  --green: #4CAF50;
  --orange: #FF8C42;
  --light-purple: #F3E8FF;
  --dark: #1A1035;
  --text: #2D2040;
  --muted: #6b6480;
  --pv-purple: #511F74;
}
* { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth }
body { font-family:'Nunito',sans-serif; background:#FFFBF0; color:var(--text); overflow-x:hidden; line-height:1.5 }
h1,h2,h3 { font-family:'Baloo 2',cursive; font-weight:800; line-height:1.1 }
[hidden] { display:none !important }

/* ─── NAV (igual a planet.html) ─── */
.nav { position:sticky; top:0; z-index:60; background:rgba(255,255,255,.94); backdrop-filter:blur(8px); box-shadow:0 2px 18px rgba(123,47,190,.12) }
.nav-inner { max-width:1100px; margin:0 auto; padding:10px 18px; display:flex; align-items:center; gap:16px; justify-content:space-between }
.nav-brand { display:flex; align-items:center; gap:10px; text-decoration:none }
.nav-brand img { width:34px; height:34px }
.nav-brand b { font-family:'Baloo 2',cursive; font-weight:800; color:var(--planet-purple); font-size:1.1rem; letter-spacing:.5px }
.nav-links { display:flex; gap:6px; flex-wrap:wrap; align-items:center; justify-content:flex-end }
.nav-links a { text-decoration:none; color:var(--text); font-weight:800; font-size:.85rem; padding:8px 12px; border-radius:16px; text-align:center; line-height:1.25; transition:background .2s,color .2s }
.nav-links a small { display:block }
.nav-links a:hover { background:var(--light-purple); color:var(--planet-purple) }
.nav-links a.to-pv { background:var(--pv-purple); color:#fff }
.nav-links a.to-pv small { color:rgba(255,255,255,.85) }

/* ─── BOTONES ─── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:'Baloo 2',cursive; font-weight:800; font-size:1rem; padding:12px 24px; border-radius:50px; text-decoration:none; border:none; cursor:pointer; transition:transform .2s, box-shadow .2s, filter .2s }
.btn:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.18) }
.btn[disabled] { opacity:.5; cursor:not-allowed; transform:none; box-shadow:none }
.btn-yellow { background:var(--yellow); color:var(--planet-purple) }
.btn-purple { background:var(--planet-purple); color:#fff }
.btn-green { background:#25D366; color:#fff }
.btn-pink { background:var(--pink); color:#fff }
.btn-ghost { background:#fff; color:var(--planet-purple); border:2px solid var(--planet-purple) }
.btn-sm { font-size:.88rem; padding:8px 16px }

/* ─── HERO DE LA LISTA ─── */
.gl-hero {
  position:relative; overflow:hidden; text-align:center; color:#fff; padding:56px 20px 70px;
  background: radial-gradient(circle at 15% 15%, #9B5DE5 0%, transparent 42%), linear-gradient(135deg,#511F74 0%,#7B2FBE 55%,#FF6B9D 140%);
}
.gl-hero.babyshower { background: radial-gradient(circle at 85% 10%, #7FE3DB 0%, transparent 40%), linear-gradient(135deg,#7B2FBE 0%,#0EC4B8 120%) }
.gl-hero .gl-emoji { font-size:3rem; display:block; margin-bottom:6px; animation:bob 3s ease-in-out infinite }
@keyframes bob { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-8px) } }
.gl-pill { display:inline-block; background:var(--yellow); color:var(--planet-purple); font-weight:900; font-size:.78rem; letter-spacing:1.5px; text-transform:uppercase; border-radius:50px; padding:6px 16px }
.gl-hero h1 { font-size:clamp(2rem,6vw,3.2rem); margin:14px auto 8px; max-width:820px; text-shadow:0 3px 0 rgba(0,0,0,.15) }
.gl-meta { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; font-weight:800 }
.gl-meta span { background:rgba(255,255,255,.16); border:2px solid rgba(255,255,255,.35); border-radius:50px; padding:6px 14px; font-size:.9rem }
.gl-hero-actions { margin-top:22px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap }

/* ─── CONTENIDO ─── */
.gl-main { max-width:1140px; margin:-36px auto 0; padding:0 18px 60px; position:relative; z-index:2 }
.gl-card { background:#fff; border-radius:24px; padding:22px; box-shadow:0 8px 30px rgba(123,47,190,.12) }
.gl-guest { display:grid; grid-template-columns:1fr auto; gap:16px; align-items:end }
.gl-guest h2 { color:var(--planet-purple); font-size:1.35rem }
.gl-guest p { color:var(--muted); font-weight:600; font-size:.92rem }
.field label { display:block; font-weight:900; font-size:.75rem; text-transform:uppercase; letter-spacing:1.4px; color:var(--planet-purple); margin-bottom:6px }
.field input, .field select { width:100%; border:2px solid #EDE0FF; border-radius:16px; padding:12px 16px; font:inherit; font-weight:700; outline:none; background:#faf7ff; color:var(--text) }
.field input:focus, .field select:focus { border-color:var(--planet-purple); background:#fff }
.gl-guest .field { min-width:260px }

.gl-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:22px 0 }
.gl-stat { background:#fff; border-radius:20px; padding:14px; text-align:center; box-shadow:0 4px 18px rgba(123,47,190,.08); border-bottom:4px solid var(--c, var(--planet-purple)) }
.gl-stat b { display:block; font-family:'Baloo 2',cursive; font-size:1.8rem; line-height:1; color:var(--c, var(--planet-purple)) }
.gl-stat span { font-size:.78rem; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:1px }

.chips { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:20px }
.chip { border:2px solid #E6D9FF; background:#fff; color:var(--planet-purple); font-family:'Nunito',sans-serif; font-weight:800; font-size:.85rem; border-radius:50px; padding:8px 16px; cursor:pointer; transition:all .18s }
.chip:hover { border-color:var(--planet-purple) }
.chip.active { background:var(--planet-purple); color:#fff; border-color:var(--planet-purple) }

/* ─── TARJETAS DE REGALO (estilo .product de planet.html) ─── */
.gifts-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:20px }
.gift { position:relative; background:#fff; border-radius:22px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 4px 20px rgba(123,47,190,.09); border:2px solid transparent; transition:transform .22s, box-shadow .22s, border-color .22s }
.gift:hover { transform:translateY(-4px); box-shadow:0 14px 34px rgba(123,47,190,.18); border-color:var(--yellow) }
.gift.is-out { opacity:.78 }
.gift.is-out .gift-img { filter:grayscale(.7) }
.gift-img { background:#fff; aspect-ratio:1/1; display:block; width:100%; object-fit:contain; padding:10px }
.gift-body { padding:4px 16px 18px; display:flex; flex-direction:column; gap:8px; flex:1 }
.gift h3 { font-size:1.05rem; color:var(--dark); line-height:1.25 }
.gift p { font-size:.83rem; color:var(--muted); line-height:1.45; flex:1 }
.badge { position:absolute; top:12px; left:12px; font-size:.7rem; font-weight:900; letter-spacing:.6px; text-transform:uppercase; border-radius:50px; padding:5px 11px; color:#fff; background:var(--green); box-shadow:0 4px 10px rgba(0,0,0,.12) }
.badge.apartado { background:var(--orange) }
.badge.comprado { background:var(--planet-purple) }
.mine { position:absolute; top:12px; right:12px; background:var(--yellow); color:var(--planet-purple); font-size:.7rem; font-weight:900; border-radius:50px; padding:5px 10px }
.price { align-self:flex-start; background:var(--yellow); color:#6B4A00; font-family:'Baloo 2',cursive; font-weight:800; border-radius:50px; padding:4px 12px; font-size:.86rem }
.progress { height:10px; border-radius:10px; background:#F0E8FB; overflow:hidden; display:flex }
.progress i { display:block; height:100% }
.progress .p-comprado { background:var(--planet-purple) }
.progress .p-apartado { background:var(--orange) }
.progress-txt { font-size:.78rem; font-weight:800; color:var(--muted) }
.gift-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:space-between }
.gift-actions .buy { font-size:.75rem; font-weight:800; color:#1da851; text-decoration:none }
.gift-actions .buy:hover { text-decoration:underline }

/* ─── ESTADOS ─── */
.gl-state { text-align:center; padding:60px 20px; max-width:620px; margin:40px auto }
.gl-state .big { font-size:3.4rem; display:block }
.gl-state h1, .gl-state h2 { color:var(--planet-purple); font-size:clamp(1.6rem,5vw,2.2rem); margin:10px 0 }
.gl-state p { color:var(--muted); font-weight:600 }
.gl-state .btn { margin-top:20px }
.empty { text-align:center; color:var(--muted); padding:40px; font-weight:700 }
.spinner { width:46px; height:46px; border-radius:50%; border:5px solid var(--light-purple); border-top-color:var(--planet-purple); animation:spin 1s linear infinite; margin:0 auto 14px }
@keyframes spin { to { transform:rotate(360deg) } }

/* ─── MODAL ─── */
.modal { position:fixed; inset:0; z-index:100; background:rgba(26,16,53,.6); display:flex; align-items:center; justify-content:center; padding:18px }
.modal-box { background:#fff; border-radius:26px; padding:26px; width:100%; max-width:440px; box-shadow:0 30px 70px rgba(0,0,0,.35); max-height:92vh; overflow:auto }
.modal-box h2 { color:var(--planet-purple); font-size:1.5rem }
.modal-box .sub { color:var(--muted); font-weight:700; margin-bottom:14px }
.modal-box .field { margin-top:14px }
.seg { display:flex; background:var(--light-purple); border-radius:16px; padding:4px; gap:4px }
.seg button { flex:1; border:0; background:transparent; border-radius:12px; padding:11px 6px; font:inherit; font-weight:900; cursor:pointer; color:var(--planet-purple) }
.seg button.on { background:var(--planet-purple); color:#fff }
.modal-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:20px; flex-wrap:wrap }
.form-err { color:#E8452C; font-weight:800; font-size:.88rem; min-height:1.2em; margin-top:10px }

.toast { position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:120; background:var(--dark); color:#fff; font-weight:800; border-radius:50px; padding:12px 22px; box-shadow:0 10px 30px rgba(0,0,0,.3); max-width:92vw; text-align:center }

.gl-footer { text-align:center; padding:30px 20px 40px; color:var(--muted); font-weight:700; font-size:.88rem }
.gl-footer a { color:var(--planet-purple) }

@media (max-width: 720px) {
  .nav-links a small { display:none }
  .gl-guest { grid-template-columns:1fr }
  .gl-guest .field { min-width:0 }
  .gl-summary { grid-template-columns:repeat(2,1fr) }
  .gifts-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px }
  .gift-body { padding:4px 12px 14px }
}

/* ═══ MIS LISTAS (panel del creador) ═══ */
.ml-hero { text-align:center; color:#fff; padding:40px 20px 64px; background: radial-gradient(circle at 15% 15%, #9B5DE5 0%, transparent 42%), linear-gradient(135deg,#511F74 0%,#7B2FBE 55%,#FF6B9D 140%) }
.ml-hero h1 { font-size:clamp(1.9rem,5vw,2.8rem); margin-top:10px }
.ml-hero p { max-width:620px; margin:8px auto 0; font-weight:700; opacity:.92 }
.ml-user { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:18px }
.ml-user b { color:var(--planet-purple); font-family:'Baloo 2',cursive; font-size:1.2rem }
.ml-auth { display:flex; justify-content:center; padding:10px 0 20px }
.ml-section-title { color:var(--planet-purple); font-size:1.4rem; margin:26px 0 12px }
.ml-form { display:grid; grid-template-columns:2fr 1fr 1fr auto; gap:12px; align-items:end }
.ml-form h2 { grid-column:1/-1; color:var(--planet-purple); font-size:1.3rem }
.lists-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px }
.list-card { background:#fff; border-radius:22px; padding:20px; box-shadow:0 4px 20px rgba(123,47,190,.09); display:flex; flex-direction:column; gap:10px; border-top:5px solid var(--yellow) }
.list-card.babyshower { border-top-color:var(--teal) }
.list-card h3 { font-size:1.25rem; color:var(--dark) }
.list-card .lc-meta { font-size:.85rem; font-weight:700; color:var(--muted) }
.list-card .lc-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:auto }
.link-box { display:flex; gap:8px; align-items:center; background:var(--light-purple); border-radius:14px; padding:6px 6px 6px 12px }
.link-box code { flex:1; font-size:.8rem; font-weight:700; color:var(--planet-purple); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ml-err-detail { font-size:.8rem; color:#6b6b80; word-break:break-word; max-width:560px; margin:0 auto 14px; font-family:monospace }
.ml-back { background:none; border:0; color:#fff; font:inherit; font-weight:900; cursor:pointer; padding:6px 0; margin-bottom:8px }
.ml-detail-head { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:flex-start }
.ml-detail-head h2 { color:var(--planet-purple); font-size:clamp(1.5rem,4vw,2rem) }
.ml-detail-head .actions { display:flex; gap:8px; flex-wrap:wrap }
.ml-edit { margin-top:16px }
.ml-items { display:flex; flex-direction:column; gap:12px }
.ml-item { display:grid; grid-template-columns:72px 1fr auto; gap:14px; align-items:center; background:#fff; border-radius:18px; padding:12px; box-shadow:0 3px 14px rgba(123,47,190,.07) }
.ml-item img { width:72px; height:72px; object-fit:contain; border-radius:12px; background:#fff }
.ml-item h4 { font-family:'Baloo 2',cursive; font-size:1.02rem; color:var(--dark); line-height:1.2 }
.ml-item .who { font-size:.8rem; color:var(--muted); font-weight:700; margin-top:4px }
.ml-item .progress { margin-top:6px; max-width:320px }
.ml-item-side { display:flex; flex-direction:column; align-items:flex-end; gap:8px }
.stepper { display:inline-flex; align-items:center; border:2px solid #EDE0FF; border-radius:50px; overflow:hidden; background:#fff }
.stepper button { border:0; background:transparent; width:34px; height:34px; font-size:1.1rem; font-weight:900; color:var(--planet-purple); cursor:pointer }
.stepper button:disabled { opacity:.35; cursor:not-allowed }
.stepper span { min-width:28px; text-align:center; font-weight:900 }
.link-danger { background:none; border:0; color:#E8452C; font:inherit; font-size:.8rem; font-weight:800; cursor:pointer }
.link-danger:hover { text-decoration:underline }
.cat-toolbar { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px }
.cat-toolbar input { flex:1 1 240px; border:2px solid #EDE0FF; border-radius:50px; padding:11px 18px; font:inherit; font-weight:700; outline:none; background:#fff }
.cat-toolbar input:focus { border-color:var(--planet-purple) }
.cat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; max-height:720px; overflow:auto; padding:4px }
.cat-item { background:#fff; border-radius:18px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 3px 14px rgba(123,47,190,.08); border:2px solid transparent }
.cat-item.in-list { border-color:var(--green) }
.cat-item img { aspect-ratio:1/1; width:100%; object-fit:contain; padding:8px; background:#fff }
.cat-item .ci-body { padding:2px 12px 12px; display:flex; flex-direction:column; gap:6px; flex:1 }
.cat-item h4 { font-family:'Baloo 2',cursive; font-size:.92rem; line-height:1.2; color:var(--dark); flex:1 }
.cat-item .ci-foot { display:flex; gap:6px; align-items:center; justify-content:space-between }
.cat-item select { border:2px solid #EDE0FF; border-radius:12px; padding:5px 6px; font:inherit; font-weight:800 }
.ml-two { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start }

@media (max-width: 900px) {
  .ml-two { grid-template-columns:1fr }
  .ml-form { grid-template-columns:1fr 1fr }
  .ml-form .field:first-of-type { grid-column:1/-1 }
}
@media (max-width: 520px) {
  .ml-form { grid-template-columns:1fr }
  .ml-item { grid-template-columns:56px 1fr; }
  .ml-item img { width:56px; height:56px }
  .ml-item-side { grid-column:1/-1; flex-direction:row; justify-content:space-between; align-items:center }
  .cat-grid { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)) }
}

/* ─── Panel de administración (admin.html) ─── */
.ad-toolbar { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:18px }
.ad-toolbar .chips { margin:0 }
.ad-toolbar input { flex:1; min-width:200px; border:2px solid #e6dcf3; border-radius:50px; padding:9px 16px; font:inherit; font-weight:700; color:var(--text); background:#fff; outline:none }
.ad-toolbar input:focus { border-color:var(--planet-purple) }
.ad-tools { display:flex; gap:8px; flex-wrap:wrap }
.ad-lists { display:grid; gap:16px }
.ad-list { border-left:6px solid var(--planet-purple) }
.ad-list.babyshower { border-left-color:var(--teal) }
.ad-list-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:8px }
.ad-list h3 { font-size:1.35rem; color:var(--dark); margin:6px 0 2px }
.ad-list .lc-meta { font-size:.86rem; font-weight:700; color:var(--muted); word-break:break-word }
.ad-list .lc-meta a { color:var(--planet-purple) }
.ad-list .lc-meta code { font-size:.75rem }
.ad-when { color:var(--planet-purple) }
.ad-when.soon { color:#d6336c }
.ad-when.past { color:var(--muted) }
.ad-none { color:var(--muted); font-weight:700; font-size:.9rem; margin-top:8px }
.ad-table-wrap { overflow-x:auto; margin-top:12px }
.ad-table { width:100%; border-collapse:collapse; font-size:.9rem }
.ad-table th { text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:1px; color:var(--muted); padding:6px 8px; border-bottom:2px solid #eee4f7 }
.ad-table td { padding:9px 8px; border-bottom:1px solid #f2ecf8; vertical-align:middle }
.ad-table tr.is-done td { opacity:.55 }
.ad-badge { display:inline-block; border-radius:50px; padding:2px 10px; font-size:.75rem; font-weight:900; color:#fff; background:var(--orange) }
.ad-badge.comprado { background:var(--pv-purple) }
.ad-check { display:inline-flex; align-items:center; gap:6px; font-weight:800; cursor:pointer; white-space:nowrap }
.ad-check input { width:20px; height:20px; accent-color:var(--green); cursor:pointer }
#ad-grant-sql { white-space:normal; word-break:break-all; font-family:monospace }
@media (max-width: 720px) {
  .ad-list-head { flex-direction:column }
  .ad-table thead { display:none }
  .ad-table, .ad-table tbody, .ad-table tr, .ad-table td { display:block; width:100% }
  .ad-table tr { border:1px solid #eee4f7; border-radius:14px; padding:6px 10px; margin-bottom:10px }
  .ad-table td { border:0; padding:4px 0; display:flex; justify-content:space-between; gap:12px; text-align:right }
  .ad-table td::before { content:attr(data-label); font-size:.72rem; font-weight:900; text-transform:uppercase; letter-spacing:1px; color:var(--muted); text-align:left }
}