/* css/wallapop.css — Balapop, reskin inspirado en Wallapop */

.bp-app {
  --g:   #13c1ac;   /* verde Balapop */
  --gd:  #0fb0a0;   /* verde hover */
  --gl:  #e6f8f5;   /* verde tinte */
  --tx:  #2c2c3a;
  --tx2: #8b8b98;
  --bd:  #e9e9ee;
  --bg:  #f7f7f9;

  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  background: #fff;
  color: var(--tx);
  font: 13px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  overflow: hidden;
}
.bp-app button { font-family: inherit; }

/* ── Barra superior ── */
.bp-topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px; flex-shrink: 0;
  border-bottom: 1px solid var(--bd);
  background: #fff;
}
.bp-logo { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.bp-logo img { width: 26px; height: 26px; }
.bp-logo span { font-size: 17px; font-weight: 800; color: var(--g); letter-spacing: -.3px; }

.bp-search {
  flex: 1; display: flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 14px;
  background: var(--bg); border: 1px solid var(--bd);
  border-radius: 999px;
}
.bp-search:focus-within { border-color: var(--g); background: #fff; }
.bp-search-ico { color: var(--tx2); font-size: 13px; }
.bp-search input {
  flex: 1; border: 0; background: transparent; outline: none;
  font: inherit; color: var(--tx);
}

.bp-top-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.bp-top-link {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 4px 8px; border: 0; background: transparent; cursor: pointer;
  color: var(--tx2); font-size: 10px; border-radius: 8px;
}
.bp-top-link:hover { color: var(--tx); background: var(--bg); }
.bp-top-link b { font-size: 15px; line-height: 1; }
.bp-top-av {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--gl); display: flex; align-items: center; justify-content: center;
  font-size: 12px;
}
.bp-sell-btn {
  margin-left: 4px; padding: 8px 16px;
  background: var(--g); color: #fff; border: 0; border-radius: 999px;
  font-weight: 700; font-size: 12px; cursor: pointer;
  display: flex; align-items: center; gap: 5px;
}
.bp-sell-btn:hover { background: var(--gd); }

/* ── Tira de categorías (decorativa) ── */
.bp-cats {
  display: flex; gap: 20px; align-items: center;
  padding: 9px 18px; flex-shrink: 0;
  border-bottom: 1px solid var(--bd);
  font-size: 12px; color: var(--tx2);
  overflow-x: auto; white-space: nowrap;
}
.bp-cat { flex-shrink: 0; }
.bp-cat:first-child { color: var(--tx); font-weight: 600; }

/* ── Cuerpo: sidebar + main ── */
.bp-body { flex: 1; display: flex; min-height: 0; }

.bp-side {
  width: 210px; flex-shrink: 0;
  border-right: 1px solid var(--bd);
  padding: 16px 12px; overflow-y: auto;
  background: #fff;
}
.bp-side-user { text-align: center; padding: 6px 4px 14px; border-bottom: 1px solid var(--bd); margin-bottom: 10px; }
.bp-side-av {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--gl); display: inline-flex; align-items: center; justify-content: center;
  font-size: 24px; margin-bottom: 6px;
}
.bp-side-name { font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.bp-verified { color: var(--g); font-size: 11px; }
.bp-side-rating { font-size: 12px; color: var(--tx2); margin-top: 2px; }
.bp-side-rating small { color: var(--tx2); }
.bp-side-since { font-size: 10px; color: var(--tx2); margin-top: 3px; }

.bp-menu { display: flex; flex-direction: column; gap: 2px; }
.bp-menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border: 0; background: transparent; cursor: pointer;
  border-radius: 8px; font-size: 13px; color: var(--tx); text-align: left;
  border-left: 3px solid transparent;
}
.bp-menu-item i { font-style: normal; font-size: 15px; width: 18px; text-align: center; }
.bp-menu-item:hover { background: var(--bg); }
.bp-menu-item.active { background: var(--gl); color: #0a7a6e; font-weight: 700; border-left-color: var(--g); }

.bp-main {
  flex: 1; min-width: 0; overflow-y: auto;
  padding: 22px 26px; background: var(--bg);
}

/* ── Cabecera de sección ── */
.bp-head { margin-bottom: 16px; }
.bp-head h1 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.3px; }
.bp-head p  { margin: 3px 0 0; color: var(--tx2); font-size: 12.5px; }

.bp-strip { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.bp-pill-stat {
  padding: 6px 12px; background: #fff; border: 1px solid var(--bd);
  border-radius: 999px; font-size: 12px; color: var(--tx);
}

/* ── Botones ── */
.bp-btn {
  padding: 8px 16px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 700; font-size: 12px; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.bp-btn--primary { background: var(--g); color: #fff; }
.bp-btn--primary:hover { background: var(--gd); }
.bp-btn--primary:disabled { background: #cfcfd6; cursor: default; }
.bp-btn--ghost { background: #fff; color: var(--tx); border-color: var(--bd); }
.bp-btn--ghost:hover { border-color: var(--g); color: var(--g); }
.bp-btn--muted { background: var(--bg); color: var(--tx2); border-color: var(--bd); }
.bp-btn--muted:hover { color: #c0392b; border-color: #e6b3ab; }

/* ── Tabs ── */
.bp-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.bp-tabs span {
  padding: 6px 14px; border-radius: 999px; font-size: 12px; cursor: default;
  background: #fff; border: 1px solid var(--bd); color: var(--tx2);
}
.bp-tabs span.active { background: var(--tx); color: #fff; border-color: var(--tx); }

/* ── Rejilla de lotes ── */
.bp-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.bp-card {
  background: #fff; border: 1px solid var(--bd); border-radius: 14px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .1s, box-shadow .1s;
}
.bp-card:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(20,20,50,.10); }
.bp-card.is-disabled { opacity: .55; }
.bp-card.is-disabled:hover { transform: none; box-shadow: none; }
.bp-card-photo {
  height: 116px; display: flex; align-items: center; justify-content: center;
  font-size: 52px; background: var(--gl);
}
.bp-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.bp-card-title { font-weight: 700; font-size: 13.5px; }
.bp-card-desc  { font-size: 11.5px; color: var(--tx2); line-height: 1.45; flex: 1; }
.bp-card-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.bp-card-chips span {
  font-size: 10.5px; color: var(--tx2);
  background: var(--bg); border: 1px solid var(--bd); border-radius: 999px; padding: 2px 8px;
}
.bp-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.bp-price { font-size: 17px; font-weight: 800; }

/* ── Apertura de lote ── */
.bp-opening {
  max-width: 460px; margin: 10px auto; text-align: center;
  background: #fff; border: 1px solid var(--bd); border-radius: 16px; padding: 26px 24px;
}
.bp-opening-photo {
  width: 96px; height: 96px; margin: 0 auto 12px;
  border-radius: 20px; background: var(--gl);
  display: flex; align-items: center; justify-content: center; font-size: 46px;
}
.bp-opening h2 { margin: 0 0 2px; font-size: 18px; }
.bp-opening > p { margin: 0 0 16px; color: var(--tx2); font-size: 12px; }
.bp-progress {
  height: 8px; background: var(--bd); border-radius: 999px; overflow: hidden; margin-bottom: 8px;
}
.bp-progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #16d0b9, var(--g));
  transition: width .12s linear;
}
.bp-progress-label { font-size: 11.5px; color: var(--tx2); }

.bp-results { margin-top: 20px; text-align: left; }
.bp-results h3 { margin: 0 0 10px; font-size: 14px; }
.bp-result-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; margin-bottom: 8px;
  background: #fff; border: 1px solid var(--bd); border-radius: 12px;
  animation: bp-pop .25s ease;
}
.bp-result-row.rarity-legendario { background: linear-gradient(90deg,#fffdf0,#fff4c8); border-color: #f2cf5c; }
.bp-result-row.rarity-epico      { background: linear-gradient(90deg,#fff5ec,#ffe6d3); border-color: #f0b283; }
.bp-result-row.rarity-raro       { background: linear-gradient(90deg,#f4efff,#e7dcff); border-color: #b79ae8; }
.bp-result-thumb {
  width: 42px; height: 42px; border-radius: 10px; background: var(--gl);
  display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0;
}
.bp-result-info { flex: 1; min-width: 0; }
.bp-result-name { font-weight: 700; font-size: 12.5px; }
.bp-result-sub  { font-size: 11px; color: var(--tx2); margin-top: 2px; display: flex; gap: 5px; flex-wrap: wrap; }
.bp-result-val  { font-weight: 800; font-size: 14px; color: #0a7a6e; }

@keyframes bp-pop { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }

/* ── Lista de inventario ── */
.bp-list { background: #fff; border: 1px solid var(--bd); border-radius: 14px; overflow: hidden; }
.bp-list-head, .bp-list-row {
  display: grid; grid-template-columns: 1fr 120px 90px 96px; gap: 10px; align-items: center;
  padding: 11px 16px;
}
.bp-list-head { font-size: 11px; color: var(--tx2); text-transform: uppercase; letter-spacing: .4px; background: var(--bg); border-bottom: 1px solid var(--bd); }
.bp-list-row { border-bottom: 1px solid var(--bd); }
.bp-list-row:last-child { border-bottom: 0; }
.bp-list-row:hover { background: #fcfcfd; }
.bp-list-item { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bp-list-thumb {
  width: 44px; height: 44px; border-radius: 10px; background: var(--gl);
  display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0;
}
.bp-list-name { font-weight: 700; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-list-tags { display: flex; gap: 5px; margin-top: 3px; flex-wrap: wrap; }
.bp-list-price { font-weight: 800; font-size: 13.5px; }
.bp-list-actions { display: flex; justify-content: flex-end; }

/* ── Chips estado / rareza ── */
.bp-chip {
  font-size: 10px; padding: 2px 8px; border-radius: 999px; display: inline-block; font-weight: 600;
}
.bp-chip--nuevo { background: #e2f7e6; color: #1a7f37; }
.bp-chip--usado { background: #fef3d7; color: #8a5a00; }
.bp-chip--roto  { background: #fde2e2; color: #a3231f; }
.bp-chip--r-comun       { background: #eeeef2; color: #5a5a68; }
.bp-chip--r-poco_comun  { background: #dcefff; color: #0a5e94; }
.bp-chip--r-raro        { background: #ece0ff; color: #5a1fb0; }
.bp-chip--r-epico       { background: #ffe6cf; color: #8a4200; }
.bp-chip--r-legendario  { background: #fff0b8; color: #7a5a00; font-weight: 800; }

/* ── Negociación (Buzón) ── */
.bp-buzon { display: flex; gap: 16px; align-items: flex-start; }
.bp-chat {
  flex: 1; min-width: 0; background: #fff; border: 1px solid var(--bd);
  border-radius: 14px; overflow: hidden; display: flex; flex-direction: column;
}
.bp-chat-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--bd);
}
.bp-chat-av {
  width: 38px; height: 38px; border-radius: 50%; background: var(--gl);
  display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;
}
.bp-chat-name { font-weight: 700; font-size: 13px; }
.bp-chat-sub  { font-size: 11px; color: var(--tx2); }
.bp-chat-patience { margin-left: auto; font-size: 11px; letter-spacing: 1px; }

.bp-chat-thread {
  padding: 16px; display: flex; flex-direction: column; gap: 8px;
  max-height: 300px; overflow-y: auto; background: #f6f7f8;
}
.bp-bubble {
  max-width: 78%; padding: 8px 12px; border-radius: 14px; font-size: 12.5px; line-height: 1.4;
  position: relative;
}
.bp-bubble time { display: block; font-size: 9.5px; color: rgba(0,0,0,.35); margin-top: 3px; }
.bp-bubble--in  { align-self: flex-start; background: #fff; border: 1px solid var(--bd); border-bottom-left-radius: 4px; }
.bp-bubble--out { align-self: flex-end; background: var(--gl); border-bottom-right-radius: 4px; }
.bp-bubble--info {
  align-self: center; background: #fffbe8; border: 1px solid #f0e3b0; color: #6b5a1e;
  font-size: 11.5px; max-width: 92%; text-align: center; border-radius: 10px;
}
.bp-note {
  align-self: center; text-align: center; max-width: 92%;
  padding: 10px 14px; border-radius: 12px; font-size: 12.5px; font-weight: 600;
}
.bp-note--sold { background: #e2f7e6; color: #1a7f37; border: 1px solid #b6e6c1; }
.bp-note--gone { background: #fde2e2; color: #a3231f; border: 1px solid #f2c0be; }

.bp-chat-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 12px 16px; border-top: 1px solid var(--bd);
}
.bp-chat-actions .bp-btn { flex: 1; min-width: 130px; }

/* Panel del artículo (lado derecho) */
.bp-item-panel {
  width: 210px; flex-shrink: 0;
  background: #fff; border: 1px solid var(--bd); border-radius: 14px; overflow: hidden;
}
.bp-item-photo {
  height: 150px; background: var(--gl); position: relative;
  display: flex; align-items: center; justify-content: center; font-size: 60px;
}
.bp-item-badge {
  position: absolute; left: 10px; bottom: 10px;
  background: rgba(0,0,0,.72); color: #fff; font-size: 10px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px;
}
.bp-item-badge.sold { background: #1a7f37; }
.bp-item-name  { font-weight: 700; font-size: 12.5px; padding: 12px 14px 0; }
.bp-item-price { font-weight: 800; font-size: 17px; padding: 4px 14px 0; }
.bp-item-meta  { font-size: 11px; color: var(--tx2); padding: 4px 14px 14px; }
@media (max-width: 620px) { .bp-buzon { flex-direction: column; } .bp-item-panel { width: 100%; } }

/* ── Perfil ── */
.bp-profile { max-width: 520px; }
.bp-profile-hero {
  display: flex; gap: 16px; align-items: center;
  background: #fff; border: 1px solid var(--bd); border-radius: 16px; padding: 18px 20px;
}
.bp-profile-av {
  width: 66px; height: 66px; border-radius: 50%; background: var(--gl);
  display: flex; align-items: center; justify-content: center; font-size: 34px; flex-shrink: 0;
}
.bp-profile-name { font-size: 17px; font-weight: 800; display: flex; align-items: center; gap: 5px; }
.bp-profile-rating { color: var(--tx2); font-size: 13px; margin-top: 2px; }
.bp-profile-rating b { color: var(--tx); }
.bp-profile-norating { font-style: italic; }

/* Estrellas reales: relleno proporcional a la media (ver _stars en wallapop.js) */
.bp-stars { position: relative; display: inline-block; color: #d6d6dd; letter-spacing: 1px; white-space: nowrap; line-height: 1; }
.bp-stars-fg { position: absolute; left: 0; top: 0; overflow: hidden; color: #f5a623; white-space: nowrap; }

/* Valoraciones recibidas */
.bp-reviews { margin-top: 14px; }
.bp-reviews h2 { font-size: 14px; font-weight: 800; margin: 0 0 8px; }
.bp-review { background: #fff; border: 1px solid var(--bd); border-radius: 12px; padding: 10px 14px; margin-bottom: 8px; }
.bp-review-top { display: flex; align-items: center; gap: 6px; font-size: 12px; flex-wrap: wrap; }
.bp-review-top small { color: var(--tx2); }
.bp-review p { margin: 5px 0 0; font-size: 12.5px; color: var(--tx); }
.bp-review-empty { background: #fff; border: 1px dashed var(--bd); border-radius: 12px; padding: 14px; font-size: 12px; color: var(--tx2); text-align: center; }
.bp-profile-since { font-size: 11px; color: var(--tx2); margin-top: 3px; }
.bp-profile-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
.bp-profile-stats > div {
  background: #fff; border: 1px solid var(--bd); border-radius: 12px; padding: 12px 6px; text-align: center;
}
.bp-profile-stats b { display: block; font-size: 16px; font-weight: 800; }
.bp-profile-stats span { font-size: 10.5px; color: var(--tx2); }

/* ── Estados vacíos ── */
.bp-empty {
  text-align: center; color: var(--tx2); padding: 44px 20px;
  background: #fff; border: 1px dashed var(--bd); border-radius: 14px;
}
.bp-empty .bp-empty-ico { font-size: 34px; display: block; margin-bottom: 8px; }

/* ── Alta de cuenta dentro de la app ── */
.bp-signup {
  max-width: 380px; margin: 0 auto; padding: 34px 24px 40px; text-align: center;
}
.bp-signup-logo { width: 56px; height: 56px; margin-bottom: 12px; }
.bp-signup h2 { margin: 0 0 4px; font-size: 21px; font-weight: 800; }
.bp-signup > p { margin: 0 0 20px; color: var(--tx2); font-size: 13px; }
.bp-signup-form { text-align: left; display: flex; flex-direction: column; }
.bp-signup-form label { font-size: 12px; font-weight: 700; margin: 12px 0 4px; }
.bp-signup-form input {
  height: 40px; padding: 0 12px; font: inherit;
  border: 1px solid var(--bd); border-radius: 8px; outline: none;
}
.bp-signup-form input:focus { border-color: var(--g); box-shadow: 0 0 0 3px var(--gl); }
.bp-signup-form .bp-btn { margin-top: 20px; height: 42px; font-size: 14px; }
.bp-signup-err { color: #c0392b; font-size: 12.5px; margin-top: 12px; }

/* ══════════════════════════════════════════════════════════════
   Registro (tpl-wallapop-register)
══════════════════════════════════════════════════════════════ */
.bpr {
  --g: #13c1ac; --gd: #0fb0a0; --gl: #e6f8f5; --bd: #e9e9ee; --tx: #2c2c3a; --tx2: #8b8b98;
  height: 100%; overflow-y: auto; background: #fff;
  font: 13px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  color: var(--tx);
}
.bpr-brand {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 22px; background: var(--g); color: #fff;
}
.bpr-brand img { width: 24px; height: 24px; }
.bpr-brand span { font-size: 17px; font-weight: 800; letter-spacing: -.3px; }
.bpr-body { padding: 22px 24px 28px; max-width: 380px; }
.bpr-body h2 { margin: 0 0 3px; font-size: 20px; font-weight: 800; }
.bpr-sub { margin: 0 0 16px; color: var(--tx2); font-size: 12px; }
.bpr-label { display: block; font-size: 11.5px; font-weight: 700; color: var(--tx); margin: 12px 0 4px; }
.bpr-input {
  width: 100%; height: 38px; padding: 0 12px;
  border: 1px solid var(--bd); border-radius: 8px;
  font: inherit; outline: none;
}
.bpr-input:focus { border-color: var(--g); box-shadow: 0 0 0 3px var(--gl); }
.bpr-avatars { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.bpr-av {
  width: 42px; height: 42px; border-radius: 50%;
  border: 2px solid var(--bd); background: #fafafa;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; cursor: pointer; transition: border-color .1s, box-shadow .1s;
}
.bpr-av:hover { border-color: var(--g); }
.bpr-av.chosen { border-color: var(--g); box-shadow: 0 0 0 3px var(--gl); }
.bpr-error { color: #c0392b; font-size: 12px; margin-top: 12px; }
.bpr-submit {
  width: 100%; margin-top: 18px; height: 42px;
  background: var(--g); color: #fff; border: 0; border-radius: 999px;
  font-size: 14px; font-weight: 800; cursor: pointer;
}
.bpr-submit:hover { background: var(--gd); }
.bpr-terms { margin-top: 12px; font-size: 10.5px; color: var(--tx2); line-height: 1.5; }

.hidden { display: none !important; }