* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #17171f;
  --panel: rgba(255, 255, 255, 0.04);
  --panel-solid: #12121a;
  --line: rgba(255, 255, 255, 0.08);
  --txt: #f2f2f5;
  --dim: #8b8b98;
  --acc: #b9ff3c;
  --acc2: #2ee6a8;
  --party: #ff4ecb;
  --dj: #ffb02e;
  --glow: 0 0 24px rgba(185, 255, 60, 0.35);
}
html { -webkit-text-size-adjust: 100%; height: 100%; overflow: hidden; }
body {
  background: var(--bg); color: var(--txt);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  font-size: 14px; min-height: 100vh;
  /* el scroll vive en #pageScroll: la cabecera ocupa todo el ancho y el
     scrollbar nace debajo de ella */
  display: flex; flex-direction: column; height: 100vh; height: var(--apph, 100dvh); overflow: hidden;
}
#pageScroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
body.noscroll #pageScroll { overflow: hidden; }
/* halo de ambiente */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 40% at 15% -5%, rgba(255, 78, 203, 0.14), transparent 70%),
    radial-gradient(55% 40% at 90% 0%, rgba(46, 230, 168, 0.12), transparent 70%),
    radial-gradient(70% 50% at 50% 110%, rgba(120, 80, 255, 0.10), transparent 70%);
}

/* ---------- barra superior (cabecera + filtros, alineada con el grid) ---------- */
.bar {
  position: relative; z-index: 20; flex: none; width: 100%;
  display: flex; flex-direction: column; gap: 10px;
  padding: 10px 16px;
  background: #000;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.bar[hidden] { display: none; }
.brandrow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.brandrow #apkBtn { margin-left: auto; }
.brandrow .chips { flex-wrap: nowrap; min-width: 0; }
@media (min-width: 721px) {
  /* géneros a la derecha del pin; userBtn al final */
  .brandrow .udwrap { margin-left: auto; }
  .brandrow #apkBtn { margin-left: 0; }
}
@media (max-width: 719px) {
  .brandrow #gridBtn, .brandrow #more { order: 20; }
  .brandrow .chips { order: 21; flex: 1 1 100%; }
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-sub { font-size: 11px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--dim); }
.logo .word {
  font-size: 24px; font-weight: 800; letter-spacing: -0.5px;
  background: linear-gradient(90deg, #f2f2f5, #b9ff3c);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sub { color: var(--dim); font-size: 9px; text-transform: uppercase; letter-spacing: 2px; transform: translateY(2px); }

.searchrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 8px; }
.searchrow .chips { flex: 0 0 auto; }

.searchbox {
  flex: 0 1 240px; min-width: 140px; display: flex; align-items: center; gap: 8px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  padding: 0 16px; color: var(--dim);
  transition: border-color .15s, box-shadow .15s;
}
.searchbox:focus-within { border-color: var(--acc); box-shadow: var(--glow); color: var(--acc); }
.searchbox input { flex: 1; min-width: 0; border: none; background: none; padding: 10px 0; }
.searchbox input:focus { outline: none; box-shadow: none; border: none; }
input[type="search"]::-webkit-search-cancel-button { display: none; }
.searchbox .x {
  display: none; width: 24px; height: 24px; flex: none; border: none; border-radius: 50%;
  background: none; color: var(--dim); cursor: pointer; align-items: center; justify-content: center;
  font-size: 13px; padding: 0;
}
.searchbox.has .x { display: flex; }
.searchbox .x:hover { color: var(--txt); background: var(--panel); }

input, button, select, textarea {
  background: var(--panel); color: var(--txt);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 14px; font: inherit; font-size: 14px;
  -webkit-appearance: none; appearance: none;
}
input::placeholder, textarea::placeholder { color: #5b5b68; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--acc); box-shadow: var(--glow); }
/* select con la flecha dibujada (appearance:none la quita) */
select {
  padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b8b98' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 15px;
}
select option { background: var(--panel-solid); color: var(--txt); }
#userBtn { white-space: nowrap; color: var(--dim); border-radius: 999px; padding: 10px 16px; display: flex; align-items: center; gap: 7px; cursor: pointer; }
#more {
  display: none; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0; border-radius: 12px;
  border: 1px solid var(--line); background: var(--panel); color: var(--dim); cursor: pointer;
}
#more.on { color: var(--acc); border-color: var(--acc); }
#gridBtn {
  display: none; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0; border-radius: 12px;
  border: 1px solid var(--line); background: var(--panel); color: var(--dim); cursor: pointer;
}
#gridBtn.on { color: var(--acc); border-color: var(--acc); }
#userBtn.logged { padding: 10px; border-radius: 50%; color: var(--acc); gap: 0; }
#userBtn.logged span:not(.ndot) { display: none; }

.extra { display: grid; gap: 8px; flex-basis: 100%; grid-template-columns: 1fr 1fr; align-items: center; }
.extra input { width: 100%; min-width: 0; }
/* fila del buscador + botones de vista/filtros (tamaño fijo, no cambia al abrir filtros) */
.searchrow2 { display: flex; gap: 8px; align-items: center; min-width: 0; }
.searchrow2 .searchbox { flex: 1 1 auto; min-width: 0; }
.viewbtns { display: flex; gap: 6px; align-items: center; flex: none; }
.viewbtns #gridBtn, .viewbtns #more { display: flex; width: 38px; height: 38px; }
.fld { position: relative; display: flex; }
.fld input { padding-right: 34px; }
.fld .x {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; padding: 0; border: none; border-radius: 50%;
  background: transparent; color: var(--dim); font-size: 12px; cursor: pointer;
  display: none; align-items: center; justify-content: center;
}
.fld.has .x { display: flex; }
.fld .x:hover { color: var(--txt); background: var(--panel); }

.chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; padding: 7px 15px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel);
  color: var(--dim); font-size: 12px; font-weight: 600;
  text-transform: uppercase; transition: all .15s;
}
.chip.on {
  border-color: transparent; color: #0a0a10;
  background: linear-gradient(90deg, var(--acc), var(--acc2));
}
.chip.fav.on { background: linear-gradient(90deg, var(--dj), #ff7b4e); color: #0a0a10; }
/* filtros tri-estado: "alguno" rojo / "los míos" en su color */
/* filtros tri-estado: favoritos any=rojo / going any=verde(.ibtn.on) · mine=azul */
#favChip.ibtn.any { border-color: transparent; color: #0a0a10; background: linear-gradient(135deg, #ff4d6d, #ff7a5c); }
#goingChip.ibtn.mine { border-color: transparent; color: #0a0a10; background: linear-gradient(135deg, #5bb7ff, #7be0ff); }
.chip.clear { color: #6d6d7a; border-style: dashed; }
.chip.clear:hover { color: var(--txt); border-color: var(--dim); }

/* botones-icono de la fila de filtros */
.iconbtns { display: flex; gap: 6px; align-items: center; }
.ibtn {
  width: 42px; height: 42px; padding: 0; border-radius: 12px;
  border: 1px solid var(--line); background: var(--panel);
  color: var(--dim); font-size: 15px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.ibtn:hover { border-color: var(--dim); color: var(--txt); }
.ibtn.on { border-color: transparent; background: linear-gradient(135deg, var(--acc), var(--acc2)); color: #0a0a10; }
#favChip { font-size: 21px; }
#favChip.ibtn.on { background: linear-gradient(135deg, var(--party), #a04cff); color: #0a0a10; }
#chipClear.ibtn { border-style: dashed; color: #6d6d7a; }
a.ibtn { text-decoration: none; }
#chipClear.ibtn:hover { color: var(--txt); border-color: var(--dim); }

/* ---------- pantalla de acceso ---------- */
#gate {
  position: fixed; top: 0; left: 0; right: 0; height: var(--apph, 100dvh); z-index: 45;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(7, 7, 12, .96); overflow-y: auto;
}
#gate[hidden] { display: none; }
.gate-msg { margin: 0; font-size: 14px; line-height: 1.55; color: var(--dim); }
.gate-msg b { color: var(--txt); }
.gate-note { margin: 4px 0 0; font-size: 11px; color: var(--dim); font-style: italic; }
.gate-bg { position: absolute; inset: -4%; z-index: 0; }
.gate-bg .slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.6s ease;
  filter: blur(2px) saturate(1.15);
  transform: scale(1.05);
}
.gate-bg .slide.on { opacity: 1; }
.gate-shade {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(8,8,14,.55), rgba(8,8,14,.82));
}
.gate-card {
  position: relative; z-index: 2;
  width: min(400px, 100%); display: grid; gap: 14px; justify-items: center; text-align: center;
  padding: 40px 32px; border-radius: 20px;
  background: rgba(12, 12, 20, .78); backdrop-filter: blur(14px);
  border: 1px solid var(--line);
}
.gate-card[hidden] { display: none; }
.gate-title {
  font-size: 30px; font-weight: 800; letter-spacing: -0.5px;
  background: linear-gradient(90deg, #f2f2f5, #b9ff3c);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gate-sub { color: var(--dim); font-size: 9px; text-transform: uppercase; letter-spacing: 2px; }
.gate-tag {
  position: absolute; z-index: 1; right: 12vw; top: 50%; transform: translateY(-50%);
  max-width: min(560px, 40vw); text-align: right;
  margin: 0; padding: 18px 26px;
  color: #f2f2f8; font-size: clamp(18px, 2.4vw, 30px); font-weight: 800;
  line-height: 1.2; letter-spacing: -0.5px; text-transform: uppercase;
  background: rgba(8, 8, 14, .45); backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px;
  transition: opacity .5s;
}
@media (max-width: 900px) {
  .gate-tag { display: none; }
}
.gate-card input { width: 100%; }
.gate-card .btn { width: 100%; margin-top: 4px; }
.passfld { position: relative; width: 100%; }
.passfld input { padding-right: 40px; }
.eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: var(--dim); font-size: 15px;
  cursor: pointer; padding: 6px;
}
.eye.on { color: var(--acc); }
.remember { font-size: 12px; color: var(--dim); display: flex; align-items: center; gap: 8px; cursor: pointer; }
.remember input {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; padding: 0; flex: 0 0 auto;
  border-radius: 50%; border: 2px solid var(--dim); background: transparent;
  cursor: pointer; transition: border-color .15s;
}
.remember input:checked {
  border-color: var(--acc);
  background: radial-gradient(circle, var(--acc) 0 46%, transparent 52%);
}
.remember input:focus { box-shadow: none; }
.linkbtn { background: none; border: 0; color: var(--dim); font-size: 11px; cursor: pointer; text-decoration: underline; }
.linkbtn:hover { color: var(--acc); }
.gate-note { color: var(--acc2); font-size: 11px; }

/* ---------- lightbox de evento ---------- */
.lightbox {
  position: fixed; top: 0; left: 0; right: 0; height: var(--apph, 100dvh); z-index: 60;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  overflow-y: auto; /* el contenido más alto que la pantalla hace scroll aquí */
  background: rgba(5, 5, 10, .6); backdrop-filter: blur(14px);
}
.lightbox[hidden] { display: none; }
.lb-box {
  position: relative; display: grid; grid-template-columns: 460px minmax(0, 560px);
  gap: 0; width: min(1040px, 100%); max-height: 94vh; overflow: hidden;
  background: var(--panel-solid); border: 1px solid rgba(185,255,60,.35); border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(185,255,60,.08), 0 0 42px rgba(185,255,60,.16), 0 0 90px rgba(255,47,180,.10);
}
.lb-flyer { position: relative; min-height: 0; background: #0c0c14; }
/* cover: el cartel llena su cuadro (recorta lo que sobre); clic → zoom completo */
.lb-flyer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; background: #0c0c14; cursor: zoom-in; }
/* zoom del cartel: por encima del lightbox de evento (z60) */
#imgModal { z-index: 1300; padding: 0; background: rgba(5,5,10,.92); }
#imgModal img { max-width: min(96vw, 1000px); max-height: calc(var(--apph, 100dvh) - 36px); object-fit: contain; border-radius: 10px; box-shadow: 0 10px 60px rgba(0,0,0,.65); cursor: zoom-out; }
.lb-flyer .ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--dim); }
.lb-flyer .ph i { font-style: normal; font-size: 30px; font-weight: 800; background: linear-gradient(90deg, var(--acc), var(--acc2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lb-flyer .ph b { font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: 2px; }
.lb-info { padding: 26px; display: flex; flex-direction: column; gap: 11px; overflow-y: auto; min-width: 0; }
.lb-info > * { min-width: 0; }
.lb-info h2 { margin: 0; font-size: 23px; line-height: 1.2; display: block; -webkit-line-clamp: unset; overflow: visible; }
.lb-info .when { font-size: 11.5px; }
.lb-info .where { font-size: 13px; white-space: normal; }
.lb-info .artists { font-size: 13px; white-space: normal; }
.lb-addr { color: var(--dim); font-size: 12px; }
.lb-addr:empty { display: none; }
.lb-desc {
  color: #b9b9c6; font-size: 13px; line-height: 1.55;
  max-height: 200px; overflow-y: auto;
  background: #14141d; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 13px;
}
.lb-desc:empty { display: none; }
.lb-actions { display: flex; gap: 8px; margin-top: 4px; }
.lb-actions .ibtn { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
#lbFav.on { border-color: transparent; background: linear-gradient(135deg, var(--party), #a04cff); color: #0a0a10; }
#lbGoingBtn.on { border-color: transparent; background: linear-gradient(135deg, var(--acc), var(--acc2)); color: #0a0a10; }
.lb-sharerow { display: flex; flex-wrap: wrap; gap: 6px; }
.lb-sharerow[hidden] { display: none; }
.lb-sharerow a, .lb-sharerow button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background: var(--panel); color: var(--txt);
  text-decoration: none; cursor: pointer;
}
.lb-media { display: grid; gap: 5px; }
.lb-media:empty { display: none; }

/* caja "Entradas": solo en móvil dentro del scroll (en PC el título se oculta y va plano en la barra) */
.lb-srcbox:empty { display: none; }
/* en PC la caja de fuentes tiene su propio título "ENTRADAS + INFO" */
.lb-scroll > .lb-srcbox {
  background: #14141d; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 13px;
}
.lb-scroll > .lb-srcbox .modal-links { display: grid; gap: 8px; }
.lb-scroll > .lb-srcbox .modal-links a { font-size: 15px; }

.help-list { margin: 0; padding-left: 18px; display: grid; gap: 7px; color: #b9b9c6; font-size: 12.5px; line-height: 1.5; }
.help-list b { color: var(--txt); }
#ocrOut, #scanOut { font-size: 12px; color: var(--dim); margin-top: 8px; line-height: 1.5; white-space: pre-line; }

/* descripción colapsada en PC: solo el título, clic abre el modal completo;
   el enlace "ver completa" va dentro de la fila del título, a la derecha */
.lb-desc.collapsed { cursor: pointer; overflow: hidden; max-height: none; }
.lb-desc.collapsed #lbDescTxt { display: none; }
.lb-desc .lb-sect { width: 100%; }
.lb-desc-more { margin-left: auto; color: var(--acc); font-size: 11px; font-weight: 700; text-transform: none; letter-spacing: .04em; }

/* ≥6 DJs: el scroll muestra 5 filas completas (44px c/u) y oculta el resto */
.lb-media.scrolldj .lb-art { height: 44px; }
@media (min-width: 721px) { .lb-media.scrolldj { height: 288px; flex: none; overflow-y: auto; padding-right: 6px; }
  .lb-media.scrolldj .lb-sect { position: sticky; top: -12px; background: #14141d; z-index: 2; padding: 2px 0; } }
.desc-modal-txt { color: #b9b9c6; font-size: 13.5px; line-height: 1.6; white-space: pre-line; max-height: 60vh; overflow-y: auto; }
.cand-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #8b8b98; margin: 12px 0 6px; }
.lb-art { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.lb-art span { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-art a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--panel); color: #ff5f5f;
}
.lb-art a:last-child { color: var(--acc2); }
.lb-art a:hover { border-color: var(--dim); }
.lb-sharerow a:hover, .lb-sharerow button:hover { border-color: var(--acc); color: var(--acc); }
.lb-fav { width: 18px; height: 18px; border-radius: 4px; flex: none; object-fit: contain; }
#lbLinks { display: flex; flex-wrap: wrap; gap: 8px; }
#lbLinks .lb-go { flex: 1 1 100%; margin-top: 4px; }
#lbLinks a {
  display: inline-flex; align-items: center; gap: 8px; width: auto;
  padding: 10px 16px; font-size: 13px;
}
.lb-go {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px; border-radius: 10px; margin-top: 6px;
  background: linear-gradient(90deg, var(--acc), var(--acc2));
  color: #0a0a10; font-weight: 700; text-decoration: none; font-size: 13px;
}
@media (max-width: 640px) {
  .lightbox { padding: 8px; }
  .lb-box { grid-template-columns: 1fr; width: 100%; max-height: calc(var(--apph, 100dvh) - 16px); overflow-y: auto; margin: auto; }
  .lb-flyer { min-height: 0; height: 42vh; }
}

/* ---------- chat del evento ---------- */
.lb-chat { border-top: 1px solid var(--line); padding-top: 12px; display: grid; gap: 8px; }
.lb-chat-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--dim); display: flex; align-items: center; gap: 7px; }
.lb-chat-title svg { flex: none; }
#lbComments { display: grid; gap: 10px; overflow-y: auto; padding-right: 4px; }
.cm-empty { color: var(--dim); font-size: 12px; }
.cm { font-size: 12.5px; }
.cm-head { display: flex; align-items: center; gap: 7px; }
.cm-head b { color: var(--acc); font-size: 12px; }
.cm-head i { color: var(--dim); font-size: 10.5px; font-style: normal; }
.cm-body { color: var(--txt); line-height: 1.45; word-break: break-word; }
.cm-body a { color: var(--acc2); }
.cm.kid { margin-left: 16px; margin-top: 8px; padding: 7px 10px; background: rgba(255,255,255,.035); border: 1px solid var(--line); border-left: 2px solid var(--acc2); border-radius: 8px; }
.cm-acts { margin-left: auto; display: inline-flex; gap: 2px; }
.cm-acts button {
  background: none; border: none; padding: 3px 5px; color: var(--dim);
  cursor: pointer; border-radius: 5px; display: inline-flex; align-items: center;
}
.cm-acts button:hover { color: var(--acc); background: rgba(185,255,60,.08); }
.lb-replyto {
  display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--dim);
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 5px 9px;
}
.lb-replyto b { color: var(--acc); }
.lb-replyto button { margin-left: auto; background: none; border: none; color: var(--dim); cursor: pointer; font-size: 11px; }
.lb-replyto button:hover { color: var(--txt); }
.lb-chatbox { display: flex; align-items: center; gap: 6px; }
.lb-emojis { display: flex; }
.lb-emojis button {
  background: none; border: none; padding: 3px; font-size: 15px; cursor: pointer;
  filter: grayscale(.4); transition: transform .1s;
}
.lb-emojis button:hover { filter: none; transform: scale(1.15); }
#lbChatIn {
  flex: 1; min-width: 0; padding: 9px 12px; font-size: 13px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; color: var(--txt);
}
#lbChatIn:focus { border-color: var(--acc); outline: none; }

/* ---------- calendario del perfil ---------- */
.cal { display: grid; gap: 8px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; }
.cal-head span { font-size: 13px; font-weight: 600; text-transform: capitalize; }
.cal-head button {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel); color: var(--txt); cursor: pointer; font-size: 16px; line-height: 1;
}
.cal-head button:hover { border-color: var(--acc); color: var(--acc); }
.cal-grid { display: grid; grid-template-columns: 30px repeat(7, 1fr); gap: 4px; }
.cal-grid i {
  font-style: normal; font-size: 9.5px; color: var(--dim); text-align: center;
  text-transform: uppercase; padding: 2px 0; align-self: center;
}
.cal-grid i.wk, .cal-grid i.wkhd { color: var(--dim); opacity: .65; font-size: 9px; }
.cal-grid i.wk { display: flex; align-items: center; justify-content: center; }
.cal-grid b {
  min-height: 62px; display: flex; align-items: flex-start; justify-content: flex-start;
  padding: 5px 7px; font-weight: 600; font-size: 11px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--panel); color: var(--txt);
}
.cal-grid b.off { border-style: dashed; opacity: .35; background: none; }
.cal-grid b.ev { cursor: pointer; border-color: var(--acc); }
.cal-grid b.today:not(.ev) { border-color: var(--acc); color: var(--acc); }
.cal-grid b.today.ev { outline: 2px solid var(--acc); }
.cal-list:empty { display: none; }
.cal-ev {
  padding: 7px 10px; margin-top: 6px; font-size: 12px; border-radius: 8px;
  background: var(--panel); border: 1px solid var(--line); cursor: pointer;
}
.cal-ev:hover { border-color: var(--acc); }
#myReplies { display: grid; gap: 8px; }
.rep { padding: 8px 11px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; font-size: 12px; }
.rep-head { color: var(--dim); font-size: 11px; }
.rep-head b { color: var(--acc); }
.rep-ev { color: var(--acc2); cursor: pointer; text-decoration: underline dotted; }
.rep-body { margin-top: 3px; }
.rep-body a { color: var(--acc2); }

/* ---------- modal fuentes ---------- */
.modal {
  position: fixed; top: 0; left: 0; right: 0; height: var(--apph, 100dvh); z-index: 50; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(5, 5, 10, 0.7); backdrop-filter: blur(6px);
}
.modal[hidden] { display: none; }
.modal-box {
  position: relative;
  width: min(580px, 100%); max-width: 100%; max-height: 92vh; overflow-y: auto; overflow-x: hidden;
  background: var(--panel-solid);
  border: 1px solid var(--line); border-radius: 16px; padding: 24px;
  display: grid; gap: 10px;
}
.modal-x {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--panel); color: var(--dim); cursor: pointer; font-size: 12px;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.modal-x:hover { color: var(--txt); border-color: var(--dim); }
.modal-box input { width: 100%; min-width: 0; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row2.url { grid-template-columns: 1fr auto; }
@media (max-width: 480px) { .row2 { grid-template-columns: 1fr; } }
.adminonly { display: grid; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.modal-sec { font-size: 10px; font-weight: 700; color: var(--dim); text-transform: uppercase; letter-spacing: 1.5px; margin-top: 6px; border-top: 1px solid var(--line); padding-top: 14px; }
.modal-sec:first-child { border-top: 0; padding-top: 0; }
.modal-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--dim); }

/* sub-pestañas del panel admin */
.atabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.atab { padding: 8px 16px; border-radius: 20px; border: 1px solid var(--line); background: transparent; color: var(--dim); font-size: 12px; font-weight: 700; cursor: pointer; }
.atab.on { background: var(--acc); border-color: var(--acc); color: #0b0b10; }
.apanel { display: flex; flex-direction: column; gap: 14px; }
.apanel .pgrid { margin: 0; }
.cand-in { width: 100%; }
.req-ev { flex: none; color: var(--acc); text-decoration: none; font-weight: 700; }
.msg-body { display: block; margin-top: 3px; color: #b9b9c6; font-weight: 400; white-space: pre-line; }
#djList { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#djList .cm-empty { grid-column: 1 / -1; }
@media (max-width: 720px) { #djList { grid-template-columns: 1fr; } }
.modal-links { display: grid; gap: 8px; }
.modal-links a {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--panel); color: var(--txt); text-decoration: none; font-size: 13px;
}
.modal-links a svg { flex: 0 0 auto; color: var(--acc); }
.modal-links a:hover { border-color: var(--acc); }
.modal-links a b { font-weight: 700; }
.modal-links a span { color: var(--dim); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-close {
  justify-self: end; padding: 8px 18px; border-radius: 999px;
  border: 1px solid var(--line); background: none; color: var(--dim); cursor: pointer;
}
.modal-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.modal-err { color: #ff6b7a; font-size: 12px; min-height: 14px; }
.btn {
  padding: 10px 18px; border-radius: 999px; border: none; cursor: pointer;
  background: linear-gradient(90deg, var(--acc), var(--acc2));
  color: #0a0a10; font-weight: 700; font-size: 13px;
}
.btn.warn { background: none; border: 1px solid rgba(255,107,122,.5); color: #ff6b7a; }

/* ---------- pull-to-refresh (móvil) ---------- */
#ptr {
  position: fixed; top: 60px; left: 50%; z-index: 55;
  width: 40px; height: 40px; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  background: var(--panel-solid); border: 1px solid var(--acc);
  color: var(--acc); box-shadow: var(--glow);
  transform: translateX(-50%) translateY(-52px);
}
#ptr.on { display: flex; }
#ptr.spin svg { animation: ptr-rot .7s linear infinite; }
@keyframes ptr-rot { to { transform: rotate(360deg); } }

/* ---------- toast ---------- */
#toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 60;
  background: var(--panel-solid); border: 1px solid var(--acc); border-radius: 999px;
  padding: 9px 20px; font-size: 12px; color: var(--txt);
  box-shadow: var(--glow);
}

/* ---------- eventos ---------- */
main {
  padding: 16px 16px calc(28px + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
main[hidden] { display: none; }
.loading, .empty { grid-column: 1 / -1; color: var(--dim); padding: 60px 0; text-align: center; }

.card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--panel-solid); border: 1px solid var(--line); border-radius: 16px;
  text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.card:active { transform: scale(.985); }

.flyer {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden;
  background: linear-gradient(135deg, #17171f, #101018);
}
.flyer img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.flyer::after { /* gradiente inferior para legibilidad */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(10, 10, 16, .75));
}
/* placeholder cuando no hay cartel */
.flyer .ph {
  position: absolute; inset: 0; display: none;
  align-items: center; justify-content: center; flex-direction: column; gap: 6px;
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,.03) 14px 28px),
    linear-gradient(160deg, #1a1a26, #0e0e16);
}
.flyer .ph i {
  font-style: normal; font-size: 26px; font-weight: 800; letter-spacing: 1px;
  background: linear-gradient(90deg, var(--acc), var(--acc2));
  -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .9;
}
.flyer .ph b { font-size: 9px; font-weight: 600; color: var(--dim); text-transform: uppercase; letter-spacing: 3px; }
.flyer.noimg img { display: none; }
.flyer.noimg .ph { display: flex; }

.star, .share, .goin {
  position: absolute; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line); padding: 0;
  background: rgba(10, 10, 16, 0.55); backdrop-filter: blur(6px);
  color: #c9c9d4; font-size: 17px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.star { top: 8px; right: 8px; }
.goin { top: 8px; right: 8px; font-size: 15px; }
.share { top: 8px; left: 8px; font-size: 15px; }
.star.on { color: var(--dj); border-color: rgba(255, 176, 46, .5); }
.goin.on { color: var(--acc2); border-color: rgba(46, 230, 168, .6); font-weight: 800; }
.share:hover { color: var(--acc); border-color: var(--acc); }
.goin:hover { color: var(--acc2); border-color: var(--acc2); }
.going { color: var(--acc2); font-size: 10px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.going:empty { display: none; }

.info { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.when {
  color: var(--acc); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.2px;
}
h2 {
  font-size: 13.5px; font-weight: 700; line-height: 1.3; text-transform: uppercase;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* club y DJ de la tarjeta: Verdana — claramente distinta del resto de la UI */
.card .where { font-family: Verdana, Geneva, "DejaVu Sans", sans-serif; letter-spacing: .2px; }
.card .artists { font-family: Georgia, "Times New Roman", serif; font-style: italic; letter-spacing: .3px; }
.where { color: var(--dim); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.artists { color: var(--txt); font-size: 11px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.artists:empty { display: none; }

.tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; padding-top: 5px; }
/* géneros en tarjetas y evento: misma fuente que los filtros de género (.chip) */
.tag {
  font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--dim); white-space: nowrap;
  text-transform: uppercase;
}
.tag.g { border-color: rgba(185, 255, 60, .4); color: var(--acc); }
.tag.p { border-color: rgba(255, 78, 203, .45); color: var(--party); }
.tag.price { border-color: rgba(46, 230, 168, .4); color: var(--acc2); }
.tag.scope-unknown { border-style: dashed; }
.tag.multi { border-color: rgba(143, 123, 255, .5); color: #b3a4ff; }

@media (max-width: 719px) {
  /* inputs a 16px evita el zoom automático de iOS al enfocar */
  input, button { font-size: 16px; }

  /* cabecera compacta */
  .bar { padding: 8px 12px; gap: 8px; }
  .logo .word { font-size: 18px; }
  .sub { display: none; }

  /* buscador + botón filtros en fila 1, chips en fila 2 */
  .searchbox { flex: 1 1 auto; min-width: 0; }
  .searchbox input { font-size: 16px; }
  .searchrow .chips { order: 3; flex: 1 1 100%; }
  #more { display: flex; }
  #gridBtn { display: flex; }
  #userBtn { font-size: 13px; }
  main.onecol { grid-template-columns: 1fr; }
  main.onecol .flyer { aspect-ratio: 16 / 9; }

  /* chips compactos para que quepan todos sin scroll */
  .chips { gap: 4px; }
  .chip { padding: 6px 11px; font-size: 11px; }

  /* buscador a todo lo ancho con botones de vista a su derecha; el resto tras "Filtros" */
  .extra { display: grid; }
  .searchrow2 { grid-column: 1 / -1; }
  .extra:not(.open) > :not(.searchrow2) { display: none; }
  .extra .iconcol { grid-column: 1 / -1; flex-direction: row; align-items: center; margin-top: 16px; }
  .extra .iconcol #evCount { left: 0; right: auto; }
  .extra .iconcol .iconbtns { justify-content: flex-end; }

  /* grid de eventos más denso; padding inferior generoso + safe-area para que la
     barra de navegación del sistema no tape el final de la página */
  main { padding: 12px 10px calc(64px + env(safe-area-inset-bottom)); gap: 10px; }
  .info { padding: 8px 10px 10px; }
  h2 { font-size: 12.5px; }
  .when { font-size: 9px; }

  /* lightbox casi a pantalla completa, con margen lateral para que respire */
  .lightbox { padding: 8px 12px; }
  .lb-box { border-radius: 14px; }
  .lb-info { padding: 16px; }

  /* login */
  #gate { justify-content: center; padding: 20px; }
  .gate-card { padding: 26px 20px; }
  .modal-box { padding: 16px; max-height: calc(var(--apph, 100dvh) - 20px); }

  #toast { max-width: 92vw; text-align: center; }
}
/* los 4 campos de filtro siempre en 2 columnas iguales en móvil */

/* ---------- desktop ---------- */
@media (min-width: 720px) {
  .bar { padding: 14px 40px 20px; }
  .bar > * { max-width: 1400px; width: 100%; margin-left: auto; margin-right: auto; }
  .sub { font-size: 10px; }
  .extra { display: grid; grid-template-columns: minmax(270px, 1.4fr) repeat(4, minmax(110px, 1fr)) auto; }
  /* vista/filtros solo en móvil: en PC los campos siempre visibles */
  .viewbtns { display: none; }
  main { padding: 24px 0; grid-template-columns: repeat(3, 1fr); column-gap: 26px; row-gap: 20px; width: min(1400px, calc(100% - 80px)); margin: 0 auto; }
  .flyer { aspect-ratio: 4 / 5; }
  .card:hover { border-color: rgba(185, 255, 60, .45); box-shadow: 0 8px 30px rgba(0,0,0,.45); }
  .card:hover .flyer img { transform: scale(1.04); } /* el zoom es solo del cartel, los datos no se mueven */
  h2 { font-size: 15px; }
}
@media (min-width: 1180px) {
  main { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- pestañas del perfil ---------- */
.ptabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.ptab {
  padding: 7px 14px; border-radius: 999px; border: 1px solid transparent;
  background: none; color: var(--dim); font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.ptab:hover { color: var(--txt); }
.ptab.on { background: var(--panel); border-color: var(--line); color: var(--acc); }
.ptab-panel { display: grid; gap: 10px; }
.ptab-panel[hidden] { display: none; }

/* ---------- scrollbars integradas ---------- */
* { scrollbar-width: thin; scrollbar-color: rgba(185,255,60,.3) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(185,255,60,.25); border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(185,255,60,.45); }

/* ---------- modal credenciales ---------- */
.cred-box {
  white-space: pre-line; font-size: 13px; line-height: 1.6;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; user-select: all;
}
.cred-box b { color: var(--acc); }

/* ---------- lightbox: sin salto ni scroll de fondo ---------- */
/* sin scrollbar-gutter en html: el scroll vive en #pageScroll y la reserva
   dejaba un hueco permanente a la derecha */
body.noscroll { overflow: hidden; }

/* ---------- gate: enlaces, registro y recuperación ---------- */
.gate-links { display: flex; justify-content: space-between; gap: 10px; }
.gate-note { display: grid; gap: 8px; width: 100%; }
.gate-note input { margin: 0; }
.gate-note p { margin: 0; color: var(--dim); font-size: 11px; }
#gate .gate-card + .gate-card { margin: 0; }

/* ---------- tabla de usuarios (admin) ---------- */
.utable { display: grid; gap: 2px; font-size: 12px; max-height: 300px; overflow-y: auto; }
.ut-row { display: grid; grid-template-columns: 1.2fr 1.2fr 2fr 1fr; gap: 8px; padding: 7px 10px; border-radius: 7px; align-items: center; }
.ut-row:nth-child(even) { background: var(--panel); }
.ut-head { color: var(--dim); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; }
.ut-row i { color: var(--acc2); font-style: normal; font-size: 10px; }
.ut-flag {
  display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10px;
  background: rgba(255,210,60,.15); color: #ffd23c; border: 1px solid rgba(255,210,60,.35);
}

/* ---------- vista mapa ---------- */
#mapWrap { display: flex; flex-direction: column; gap: 10px; padding: 4px 16px 18px; width: 100%; height: 100%; }
#mapWrap[hidden] { display: none; }
@media (min-width: 720px) {
  #mapWrap { width: min(1400px, calc(100% - 80px)); margin: 0 auto; padding: 4px 0 18px; }
}
.map-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.map-tools button, .map-tools input {
  background: var(--panel); border: 1px solid var(--line); border-radius: 9px;
  color: var(--txt); font-family: inherit; font-size: 13px; padding: 8px 12px; cursor: pointer;
}
.map-tools input[type="date"] { cursor: text; color-scheme: dark; }
.map-tools button:hover { border-color: var(--acc); color: var(--acc); }
#mapPrev, #mapNext { padding: 8px 13px; font-size: 16px; line-height: 1; }
#mapCount { color: var(--dim); font-size: 11.5px; margin-left: auto; }
#map {
  flex: 1 1 auto; min-height: 200px;
  border-radius: 14px; border: 1px solid var(--line); z-index: 1;
}
.leaflet-container { background: #0a0a10; font-family: inherit; }
.mk { border-radius: 50%; overflow: hidden; border: 2px solid var(--acc); background: #0c0c14; box-shadow: 0 2px 10px rgba(0,0,0,.7); }
.mk img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk i { font-style: normal; font-size: 13px; font-weight: 800; color: var(--acc); display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
#mapBtn { border-radius: 999px; padding: 10px 13px; display: flex; align-items: center; color: var(--dim); cursor: pointer; }
#mapBtn.on { color: var(--acc); border-color: rgba(185,255,60,.5); }
@media (max-width: 720px) {
  #mapWrap { padding: 4px 10px 14px; }
}

/* ---------- badge de comentarios nuevos: icono lima, círculo como las pills ---------- */
.cm-badge {
  position: absolute; top: 7px; left: 7px; z-index: 2;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,10,16,.78); border: 1px solid rgba(255,255,255,.12);
  color: var(--acc); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0,0,0,.55);
}
.cm-badge[hidden] { display: none; }

/* ---------- captcha ---------- */
.cap-row { display: flex; align-items: center; gap: 10px; width: 100%; flex-wrap: wrap; }
.cap-row span { font-size: 15px; font-weight: 700; color: var(--acc); white-space: nowrap; }
.cap-row input { flex: 1; min-width: 0; margin: 0; }
.cap-row .tsbox { flex: 1 1 100%; margin: 2px 0; }
/* login: ojo para ver la contraseña + switch "mantener sesión" */
.pass-wrap { position: relative; }
.pass-wrap input { width: 100%; padding-right: 40px; }
.pass-wrap button {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--dim); cursor: pointer;
  padding: 7px; display: flex; border-radius: 8px;
}
.pass-wrap button:hover, .pass-wrap button.on { color: var(--acc); }
.chk-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--dim); cursor: pointer; user-select: none; }
/* registro: selector de tipo de cuenta */
.kind-row { display: flex; gap: 6px; }
.kind { flex: 1; padding: 8px 4px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--dim); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; cursor: pointer; }
.kind.on { border-color: var(--acc); color: var(--acc); background: rgba(185,255,60,.12); }
.hint { font-size: 11px; color: var(--dim); line-height: 1.45; }
.hint b { color: var(--acc); }
/* comentario del dueño del evento */
.cm.owner { border-color: rgba(185,255,60,.5) !important; background: rgba(185,255,60,.06); }
.cm.owner .cm-head b::after { content: ' · organizador'; color: var(--acc); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
/* informe de estadísticas del evento */
.st-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin-bottom: 12px; }
.st-kpi { display: grid; gap: 2px; justify-items: center; text-align: center; padding: 12px 6px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.03); }
.st-kpi b { font-size: 22px; color: var(--acc); }
.st-kpi span { font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: .4px; }
.st-sec { font-size: 12px; color: var(--txt); margin-bottom: 10px; }
.st-sec > i { display: block; color: var(--dim); font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 5px; }
.st-users { display: flex; flex-wrap: wrap; gap: 5px; }
.st-u { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.04); font-size: 11px; }
.st-u img { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; }
.st-none { color: var(--dim); font-size: 11px; font-style: italic; margin-top: 4px; }
/* admin: fila de cuenta pendiente */
.ut-row.pending { border-color: rgba(255,180,60,.5); background: rgba(255,180,60,.05); }
.ut-kind { color: var(--acc2); font-style: normal; font-size: 10px; text-transform: uppercase; }
.ut-ok { background: rgba(185,255,60,.15); border: 1px solid var(--acc); color: var(--acc); border-radius: 8px; padding: 2px 8px; font-size: 10px; font-weight: 700; cursor: pointer; margin-left: 6px; }
/* Encuentra colegas: el botón solo existe en móvil (en PC no se muestra) */
@media (min-width: 1151px) { #findBtn { display: none; } }
.find-appnote { padding: 12px 14px; border: 1px solid rgba(185,255,60,.35); border-radius: 14px; background: rgba(185,255,60,.06); display: grid; gap: 10px; justify-items: start; }
.find-appnote p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--dim); }
.find-appnote p b { color: var(--txt); }
.app-download-help { margin: 0; max-width: 38rem; font-size: 12px; line-height: 1.45; color: var(--dim); }
.find-sec { margin: 14px 0 8px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--dim); }
.fg-card { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; background: rgba(255,255,255,.03); }
.fg-card.closed { opacity: .65; }
.fg-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fg-head b { font-size: 14px; }
.fg-st { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; padding: 2px 8px; border-radius: 999px; }
.fg-st.open { color: var(--acc); background: rgba(185,255,60,.12); }
.fg-st.closed { color: var(--dim); background: rgba(255,255,255,.06); }
.fg-meta { font-size: 11px; color: var(--dim); margin-top: 3px; }
.fg-members { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.fg-m { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); font-size: 11px; color: var(--dim); }
.fg-m.live { color: var(--acc); border-color: rgba(185,255,60,.4); }
.fg-m img { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; }
.fg-acts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fg-acts .ibtn { font-size: 11px; width: auto; height: auto; padding: 5px 10px; border-radius: 8px; }
#findNew { display: grid; gap: 10px; }
.fg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fg-lab { display: grid; gap: 4px; font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: .4px; }
.fg-mode { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--dim); }
.fg-mode .kind { padding: 6px 10px; font-size: 11px; }
.fg-pick { display: grid; gap: 4px; max-height: 160px; overflow-y: auto; }
.fg-f { font-size: 13px; }

/* ---------- anti-desbordamiento móvil ---------- */
.lb-media, .lb-chat, #lbLinks, .lb-sharerow { min-width: 0; }
#lbLinks a { max-width: 100%; }
#lbLinks a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-box > *, .ptab-panel > * { min-width: 0; }
.ptabs { overflow-x: auto; scrollbar-width: none; }
.ptabs::-webkit-scrollbar { display: none; }
.ut-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-head { flex-wrap: wrap; }
@media (max-width: 400px) {
  .lb-emojis { display: none; }
  .cm.kid { margin-left: 8px; padding: 6px 8px; }
}

/* ---------- calendario con carteles ---------- */
.cal-grid b.ev { position: relative; padding: 0; display: flex; gap: 1px; overflow: hidden; align-items: stretch; }
.cal-grid b.ev img, .cal-grid b.ev u { flex: 1; min-width: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cal-grid b.ev u { font-size: 11px; font-weight: 800; color: var(--acc); display: flex; align-items: center; justify-content: center; background: #0c0c14; }
.cal-grid b.ev n {
  position: absolute; bottom: 0; right: 0; font-size: 8.5px; font-weight: 700;
  background: rgba(10,10,16,.75); color: var(--acc); padding: 1px 4px; border-radius: 5px 0 0 0;
}
.cal-grid b.ev s {
  position: absolute; top: 0; right: 0; font-size: 8.5px; font-weight: 700;
  background: rgba(10,10,16,.75); color: var(--txt); padding: 1px 4px; border-radius: 0 0 0 5px;
}

/* ---------- retoques varios ---------- */
.lb-replyto[hidden] { display: none; }
/* chips de estilo con la misma tipografía del "en catalunya" de la cabecera */
.chips .chip { font-size: 10px; letter-spacing: 1.6px; font-weight: 700; }
.req { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; font-size: 12px; }
.req-url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.req button { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line); background: none; color: var(--dim); cursor: pointer; flex: none; }
.req button[data-ok="1"]:hover { color: var(--acc); border-color: var(--acc); }
.req button[data-ok="0"]:hover { color: #ff6b7a; border-color: #ff6b7a; }
/* luna del filtro noche: gris apagada, negra activada */
#chipNoche:not(.on) .moon { filter: grayscale(1) opacity(.55); }
#chipNoche.on .moon { filter: brightness(0); }

/* ---------- global hidden (inline display pisa al atributo) ---------- */
[hidden] { display: none !important; }

/* ---------- mapa oscuro sobre tiles OSM ---------- */
.leaflet-tile.mapdark { filter: invert(100%) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.7); }

/* ---------- solicitudes ---------- */
.req button { display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1; }
.myreq { display: flex; align-items: center; gap: 8px; padding: 6px 10px; margin-bottom: 5px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; font-size: 12px; }
.req-st { flex: none; font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 2px 8px; border-radius: 99px; letter-spacing: .4px; }
.req-st.pending { color: var(--dj); border: 1px solid var(--dj); }
.req-st.approved { color: var(--acc); border: 1px solid var(--acc); }
.req-st.rejected { color: #ff6b7a; border: 1px solid #ff6b7a; }
.sug-msg { margin: 8px 0 0; font-size: 12px; color: var(--mint); }

/* ---------- estadísticas ---------- */
.stat-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.stat-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; text-align: center; min-width: 88px; }
.stat-card b { display: block; font-size: 19px; color: var(--acc); }
.stat-card span { font-size: 11px; color: var(--dim); }
.stat-log { max-height: 240px; overflow-y: auto; }
.stat-row { display: flex; gap: 8px; align-items: baseline; padding: 5px 2px; font-size: 12px; border-bottom: 1px solid var(--line); }
.stat-row i { color: var(--dim); flex: none; font-style: normal; font-size: 11px; }
.stat-row b { color: var(--mint); flex: none; }
.stat-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-status { font-size: 12px; color: var(--dim); margin-bottom: 8px; line-height: 1.45; }
.ig-status b { color: var(--acc); }
.ig-status .err, .err { color: #ff6b7a; }
#igLog { margin-top: 8px; max-height: 180px; overflow-y: auto; }

/* ---------- página de evento: contenido en flujo, mismo fondo que las tarjetas ---------- */
.lightbox {
  position: static; display: block; padding: 0; overflow: visible;
  background: none; backdrop-filter: none; z-index: auto;
}
body.eventpage main#events, body.eventpage #mapWrap { display: none; }
.lb-box {
  display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr) minmax(0, 400px);
  grid-template-rows: auto auto 1fr;
  column-gap: 30px; row-gap: 14px; width: min(1400px, calc(100% - 80px)); margin: 0 auto; padding: 16px 0 20px;
  height: calc(var(--apph, 100dvh) - var(--navH, 64px) - 8px); box-sizing: border-box;
  /* la página de evento ya no es un modal: sin tope de altura ni scroll interno */
  max-height: none;
  overflow: visible; background: none; border: none; border-radius: 0; box-shadow: none;
}
.lb-left { display: flex; flex-direction: column; gap: 12px; min-height: 0; min-width: 0; }
.lb-left .tags { flex: none; }
.lb-left .going { flex: none; }
.lb-flyer {
  flex: 1 1 auto; min-height: 0;
  border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(185,255,60,.25); box-shadow: 0 0 50px rgba(185,255,60,.12);
}
.lb-info { padding: 6px 0; height: 100%; min-height: 0; overflow: hidden; }
.lb-scroll { display: flex; flex-direction: column; gap: 11px; min-width: 0; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 6px; }
.lb-info > .going { flex: none; } /* pie fijo de la columna: nunca queda cortado por el scroll */
.lb-info h2 { font-size: 27px; }
.lb-close {
  position: static; order: -2; flex: none;
  width: 38px; height: 38px; padding: 0; border-radius: 12px;
  background: rgba(10,10,16,.75); border: 1px solid var(--line);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: var(--txt); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.lb-close:hover { border-color: var(--acc); color: var(--acc); }

/* comentarios: columna/tarjeta separada del contenido del evento */
.lb-chat {
  margin-top: 0; border-top: none; padding-top: 0;
  position: static; align-self: stretch;
  display: flex; flex-direction: column; gap: 12px;
  height: auto; min-height: 0; max-height: none;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 16px; padding: 16px;
}
/* «Comentarios» usa el estilo de los demás títulos de sección (11px mayúsculas) */
.lb-chat-title svg { color: var(--acc); }
#lbComments { flex: 1; min-height: 60px; overflow-y: auto; display: grid; gap: 14px; align-content: start; padding-right: 4px; }
.cm { display: flex; gap: 10px; font-size: 13px; }
.cm-av {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #0a0a10;
  background: linear-gradient(135deg, var(--acc), var(--acc2));
}
.cm-main { flex: 1; min-width: 0; }
.cm-body {
  margin-top: 4px; padding: 9px 13px; width: fit-content; max-width: 100%;
  background: rgba(255,255,255,.05); border: 1px solid var(--line);
  border-radius: 4px 16px 16px 16px; line-height: 1.5;
}
.cm.kid { margin-left: 42px; margin-top: 12px; padding: 0; background: none; border: none; border-radius: 0; }
.cm.kid .cm-av { width: 26px; height: 26px; font-size: 11px; background: linear-gradient(135deg, var(--acc2), #4b7cff); }
.cm.kid .cm-body { border-left: 2px solid var(--acc2); border-radius: 4px 12px 12px 12px; }
.cm-acts button { opacity: 0; transition: opacity .15s; }
.cm:hover .cm-acts button { opacity: 1; }
.lb-chatbox {
  display: flex; align-items: center; gap: 8px; flex: none; z-index: 2;
  position: sticky; bottom: 10px; padding: 10px;
  background: #15151f; border: 1px solid rgba(185,255,60,.3);
  border-radius: 16px; box-shadow: 0 -8px 22px rgba(0,0,0,.45);
}
.lb-mention-suggest { position: absolute; left: 10px; right: 10px; bottom: calc(100% + 6px); z-index: 8; max-height: 190px; overflow: auto; background: var(--panel-solid); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.55); }
.lb-mention-suggest[hidden] { display: none; }
.lb-mention-suggest button { width: 100%; display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; color: var(--txt); background: transparent; border: 0; text-align: left; cursor: pointer; }
.lb-mention-suggest button:hover { background: rgba(185,255,60,.12); }
#lbChatIn {
  flex: 1; min-width: 0; padding: 9px 12px; font-size: 13px; font-family: inherit;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; color: var(--txt);
  resize: none; overflow: hidden; line-height: 1.4; max-height: 110px;
}
#lbChatIn:focus { border-color: var(--acc); outline: none; }
.lb-emojis { position: relative; display: flex; }
.lb-emojis > button { font-size: 18px; padding: 4px; background: none; border: none; cursor: pointer; }
.lb-em-pop {
  position: absolute; bottom: 44px; right: 0; z-index: 6;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; width: 216px;
  background: var(--panel-solid); border: 1px solid var(--line); border-radius: 12px;
  padding: 8px; box-shadow: 0 10px 34px rgba(0,0,0,.65);
}
.lb-em-pop[hidden] { display: none; }
.lb-em-pop button { font-size: 17px; padding: 5px; background: none; border: none; cursor: pointer; border-radius: 7px; }
.lb-em-pop button:hover { background: rgba(185,255,60,.14); }
/* ---------- enviar comentario: círculo pequeño, icono grande ---------- */
#lbChatGo {
  width: 30px; height: 30px; padding: 0; flex: 0 0 auto; border-radius: 50%; border: none;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--acc), var(--acc2));
  color: #0a0a10; cursor: pointer;
}
#lbChatGo svg { width: 19px; height: 19px; }

@media (min-width: 1151px) {
  .lb-box { padding-bottom: 20px; }
}
@media (max-width: 1150px) {
  .lb-box { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); grid-template-rows: none; height: auto; position: relative; padding: 16px 20px 20px; }
  /* en móvil/tablet el botón volver flota sobre el cartel como antes */
  .lb-close { position: absolute; top: 12px; left: 12px; right: auto; z-index: 5; }
  .lb-flyer { height: 56vh; flex: none; }
  .lb-right { grid-column: 1 / -1; }
  .lb-chat { grid-column: 1 / -1; position: static; height: auto; max-height: none; }
  #lbComments { overflow: visible; }
}
@media (min-width: 721px) { #apkBtn { display: none; } }
@media (max-width: 720px) {
  .logo-sub { display: none; }
  .subnav { display: none; }
  .lb-box { grid-template-columns: 1fr; grid-template-rows: none; gap: 20px; padding: 16px 26px calc(80px + env(safe-area-inset-bottom)); height: auto; }
  .lb-left { order: 1; }
  .lb-flyer { height: 46vh; }
  .lb-info { order: 2; height: auto; overflow-y: visible; padding-right: 0; }
  .lb-scroll { overflow: visible; flex: none; padding-right: 0; }
  .lb-chat { order: 4; max-height: none; }
  /* la caja de escribir no se solapa con los comentarios al hacer scroll */
  .lb-chatbox { position: static; }
  .lb-info { overflow-y: visible; height: auto; }
  .lb-info h2 { font-size: 21px; }
  .cm-acts button { opacity: .65; }
}

/* ---------- login más estrecho + recuperación ---------- */
#loginModal .modal-box { max-width: 330px; padding: 22px; }
#loginModal .modal-box.reg { max-width: 540px; }
.lm-logo { width: 58px; height: 58px; object-fit: cover; border-radius: 15px; margin: 0 auto -2px; display: block; }
.lm-title { justify-content: center; color: var(--txt); font-size: 14px; margin-bottom: 2px; }
.reg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .reg-grid { grid-template-columns: 1fr; } }
/* linkbtns del login: sin padding vertical extra para que no queden separados a doble espacio */
#lmLogin .linkbtn { padding: 0; }
#lmToReg { margin-bottom: -4px; }
#delAccModal .modal-box { max-width: 400px; }
#contactModal { z-index: 70; } /* por encima del login modal si se abre desde ahí */
#contactModal .modal-box { max-width: 460px; }
#contactModal textarea { resize: vertical; }
.delacc-txt { color: #b9b9c6; font-size: 13px; line-height: 1.55; margin: 0; }
.delacc-txt b { color: #fff; }
#delAccModal input { text-align: center; }
#delAccOk:disabled { opacity: .35; cursor: not-allowed; }
#delAccModal .ig-btns { display: flex; gap: 8px; }
#delAccModal .ig-btns .btn, #delAccModal .ig-btns .modal-close { flex: 1; width: auto; margin-top: 0; }
#lmRecBox { display: grid; gap: 10px; margin-top: 4px; }
#recMsg { margin: 0; font-size: 11.5px; color: var(--acc2); line-height: 1.4; }

/* ---------- edición de evento ---------- */
#editModal .modal-box { width: min(640px, 100%); gap: 10px; padding: 18px; }
#editModal .edit-grid { gap: 10px 14px; }
#editModal .edit-grid label { gap: 4px; }
#editModal .edit-grid textarea { min-height: 62px; }
#editModal input, #editModal textarea { padding: 8px 11px; }
#editModal .modal-title { display: flex; align-items: center; gap: 8px; color: var(--txt); font-size: 14px; }
#editModal .modal-title svg { color: var(--acc); }
.edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.edit-grid label { display: grid; gap: 6px; font-size: 11px; color: var(--dim); align-content: start; }
.ed-lab {
  display: flex; align-items: center; gap: 7px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--dim);
}
.ed-lab svg { color: var(--acc); flex: none; }
.edit-grid .full { grid-column: 1 / -1; }
.edit-grid textarea { resize: vertical; min-height: 90px; }
@media (max-width: 640px) { .edit-grid { grid-template-columns: 1fr; } }
#mapToday.on { border-color: var(--acc); color: var(--acc); }

/* ---------- subgeneros junto al genero (PC) / debajo (movil) ---------- */
/* subgéneros: una fila con scroll horizontal + flechas, a la derecha en PC y debajo en móvil */
.subwrap { display: flex; align-items: center; gap: 4px; flex: 1 1 0; min-width: 0; }
.subwrap[hidden] { display: none; }
.subchips { display: flex; gap: 4px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
.searchrow .subchips { flex: 1 1 0; min-width: 0; }
.subchips::-webkit-scrollbar { display: none; }
.subnav {
  width: 22px; height: 26px; flex: none; padding: 0; border-radius: 8px;
  border: 1px solid var(--line); background: var(--panel); color: var(--dim);
  font-size: 13px; cursor: pointer; line-height: 1;
}
.subnav:hover { color: var(--acc); border-color: var(--acc); }
.chip.mini { padding: 4px 11px; font-size: 9px !important; letter-spacing: 1.1px; font-weight: 700; }
@media (max-width: 719px) {
  .subwrap { order: 4; flex: 1 1 100%; }
  textarea { font-size: 16px; }
}

/* ---------- contador de eventos + filtro de fecha ---------- */
.iconcol { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; min-width: 0; position: relative; }
/* PC: el contador va junto a los géneros en la fila de marca; móvil: sobre los iconos */
#evCount {
  display: none; font-size: 10px; font-weight: 400; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--dim); white-space: nowrap; flex: none;
}
@media (min-width: 720px) { #evCount { display: inline; } }
#evCountM {
  position: absolute; top: -19px; right: 4px;
  font-size: 10px; font-weight: 400; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--dim); white-space: nowrap;
}
@media (min-width: 720px) { #evCountM { display: none; } }
#evCount:empty, #evCountM:empty { display: none !important; }
#dateChip { width: 42px; min-width: 42px; padding: 0; justify-content: center; gap: 7px; position: relative; display: flex; align-items: center; }
#dateChip.on { width: auto; padding: 0 11px; }
#dateTxt { font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
#dateIn { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; padding: 0; border: none; pointer-events: none; }

/* ---------- pagina de evento: datos grandes + scroll interno ---------- */
.lb-info .when { font-size: 14px; }
.lb-where { display: flex; align-items: center; gap: 9px; font-size: 15px; }
.lb-vlogo { width: 26px; height: 26px; flex: none; border-radius: 7px; overflow: hidden; background: #0c0c14; display: grid; place-items: center; }
/* si la imagen no cargó (data-rm la quitó), no dejar un cuadrado vacío */
.lb-vlogo:not(:has(img)) { display: none; }
.lb-vlogo img { width: 100%; height: 100%; object-fit: cover; }
.lb-addr { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.lb-maplink { color: var(--acc); display: grid; place-items: center; flex: none; }
.lb-maplink:hover { color: var(--txt); }
@media (min-width: 1151px) { .lb-info .lb-desc { max-height: 36vh; overflow-y: auto; padding-right: 6px; } }
/* móvil/tablet: la descripción muestra todo el contenido, sin scroll interno */
@media (max-width: 1150px) { .lb-info .lb-desc { max-height: none; overflow: visible; padding-right: 0; } }

/* filas de DJ: avatar | nombre | acciones alineadas a la derecha */
.lb-art { display: grid; grid-template-columns: 30px minmax(0,1fr) auto auto; align-items: center; gap: 10px; font-size: 14px; }
.lb-artname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-artav {
  position: relative; width: 30px; height: 30px; flex: none; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  font-size: 12px; font-weight: 800; color: #0a0a10;
  background: linear-gradient(135deg, var(--acc), var(--acc2));
}
.lb-artav img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lb-artav img, .lb-artav { cursor: zoom-in; }
.guser img { cursor: zoom-in; }

/* ---------- reacciones a comentarios ---------- */
.cm-reacts { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 6px; }
.rx {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px;
  font-size: 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--txt);
}
.rx i { font-style: normal; font-size: 10.5px; color: var(--dim); }
.rx:hover { border-color: var(--dim); }
.rx.on { border-color: var(--acc); background: rgba(185,255,60,.12); }
/* + de reaccionar: esquina inferior derecha del comentario; solo visible al hover en PC */
.cm { position: relative; }
.rx-add {
  position: absolute; right: 6px; bottom: 6px; z-index: 2;
  width: 22px; height: 22px; border-radius: 50%; padding: 0;
  display: none; align-items: center; justify-content: center;
  background: var(--panel-solid); border: 1px solid var(--line); color: var(--dim);
  font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer;
}
.rx-add:hover { color: var(--acc); border-color: var(--acc); }
@media (hover: hover) { .cm:hover > .rx-add { display: inline-flex; } }
.rx-pick { display: inline-flex; gap: 3px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-solid); }
.rx-pick[hidden] { display: none; }
.lb-chatbox { margin-top: auto; }

/* ---------- pagina de evento: sin buscador ni filtros ---------- */
body.eventpage .searchrow, body.eventpage .extra,
body.eventpage .brandrow .chips { display: none; }

/* ---------- asistentes con foto ---------- */
.guser { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; margin: 0 4px 4px 0; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; color: var(--txt); background: rgba(255,255,255,.03); }
.guser img, .guser b { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: none; }
.guser b { display: grid; place-items: center; font-size: 10px; background: linear-gradient(135deg, var(--acc), var(--acc2)); color: #0a0a10; }

/* ---------- tooltip de reacciones ---------- */
.rx-tip { position: fixed; z-index: 60; display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; background: var(--panel-solid); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.6); pointer-events: none; }
.rx-tu { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--txt); }
.rx-tu img, .rx-tu b { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex: none; }
.rx-tu b { display: grid; place-items: center; font-size: 9px; background: linear-gradient(135deg, var(--acc), var(--acc2)); color: #0a0a10; }

/* ---------- avatares en comentarios ---------- */
.cm-av { position: relative; overflow: hidden; flex: none; }
.cm-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cm-av b { position: relative; z-index: 0; font-weight: 800; }
.ut-av { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; vertical-align: -4px; margin-right: 6px; }
.ut-del { width: 24px; height: 24px; padding: 0; margin-left: 6px; border-radius: 7px; border: 1px solid var(--line); background: none; color: var(--dim); font-size: 11px; cursor: pointer; }
.ut-del:hover { color: #ff6b7a; border-color: #ff6b7a; }

/* ---------- foto de perfil en la cuenta ---------- */
.avrow { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.avprev { position: relative; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, var(--acc), var(--acc2)); flex: none; }
.avprev b { font-size: 20px; font-weight: 800; color: #0a0a10; }
.avprev img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.filebtn { cursor: pointer; display: inline-block; }
.ubtn-av { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--line); }
#userBtn.has-av { padding: 0; border-color: transparent; background: none; }
#userBtn.has-av:hover { border-color: transparent; }

/* ---------- iconos ---------- */
.lb-art { gap: 8px 10px; padding: 7px 0; }
.lb-maplink svg { width: 40px !important; height: 40px !important; }
.lb-fav { width: 24px; height: 24px; }
#lbLinks a { font-size: 14.5px; }

/* ---------- sugerencias de autocompletado ---------- */
.edit-grid label { position: relative; }
.sug { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; display: flex; flex-direction: column; background: var(--panel-solid, #17171f); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.6); }
.sug button { text-align: left; padding: 8px 12px; background: none; border: none; color: var(--txt); font-size: 13px; cursor: pointer; }
.sug button:hover { background: rgba(255,255,255,.06); color: var(--acc); }
.avbtns { display: flex; flex-wrap: wrap; gap: 8px; }
.avrow { display: flex; align-items: center; gap: 14px; }
@media (max-width: 720px) {
  .prof-panels .ptab-panel { gap: 10px; }
  .prof-panels .btn, .prof-panels input, .prof-panels select { padding: 8px 10px; font-size: 12.5px; }
  .prof-body .ptabs { padding-bottom: 6px; }
}

/* logo bf.png */
.logo-img { height: 64px; width: auto; display: block; }
@media (max-width: 720px) { .logo-img { height: 36px; } .brandrow { gap: 8px; } }

/* página de evento: cajas con fondo */
.lb-vbox {
  display: flex; flex-direction: column; gap: 9px;
  background: #14141d; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 13px;
}
.lb-where { font-size: 17px; font-weight: 700; letter-spacing: .3px; }
.lb-vlogo { width: 40px; height: 40px; border-radius: 9px; }
.lb-addr { font-size: 13.5px; }
.lb-sect {
  font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: #8b8b98; margin-bottom: 9px;
  display: flex; align-items: center; gap: 7px;
}
.lb-sect svg { flex: none; }
.lb-media {
  background: #14141d; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 13px;
}
.lb-media:empty { display: none; }

/* barra superior del evento: solo la fecha, centrada sobre la columna de datos */
.lb-foot { grid-column: 1 / -1; display: contents; }
.lb-whencol { grid-column: 2; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.lb-whencol .when { min-width: 0; font-size: 14px; }
@media (max-width: 1150px) { .lb-foot { display: none; } }
.lb-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lb-right .lb-actions { display: flex; gap: 8px; align-items: center; }
@media (min-width: 1151px) { .lb-scroll > .when { display: none; } }

/* comentarios: no cortar la lista */

/* calendario de la cabecera: icono centrado y picker oscuro */
#dateChip { gap: 0; }
#dateChip.on { gap: 7px; }
input[type="date"], input[type="datetime-local"] { color-scheme: dark; }

/* cartel: borde suave, sin resplandor lima */
.lb-flyer { box-shadow: 0 14px 36px rgba(0,0,0,.4); border-color: var(--line); }

/* género del filtro activo resaltado en tarjetas */
.tag.sel { background: rgba(185,255,60,.18); border-color: var(--acc); color: var(--acc); }

/* más aire entre bloques de la info del evento */
.lb-scroll > .when { margin-bottom: 2px; }
.lb-info h2 { margin-bottom: 4px; }
.lb-scroll > .lb-vbox, .lb-scroll > .lb-media { margin-top: 4px; }

/* móvil: layout del evento —
   fila 1: ‹ volver + acciones (me gusta, asistiré, compartir…) a la izquierda
   luego: cartel → info → géneros → asistentes → fuentes → comentarios
   (el reorden real lo hace layoutEventPage() moviendo los nodos) */
@media (max-width: 720px) {
  .lb-right { order: -1; display: flex; flex-wrap: wrap; justify-content: flex-start; margin-left: 0; margin-right: auto; }
  /* la caja de comentar no se pega al borde: no tapa nunca los últimos comentarios */
  .lb-chatbox { position: static; }
  .lb-actions .lb-close {
    position: static; width: 40px; height: 40px; border-radius: 10px; flex: none;
    background: var(--panel); border: 1px solid var(--line);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  #lbLinks .lb-go { flex: none; }
  .lb-info #lbLinks { margin-top: 10px; }
  .lb-info .tags { margin-top: 14px; }
  .lb-info .going { margin-bottom: 2px; }
}

/* perfil abierto estando en un evento: el evento queda detrás pero oculto */
body.profilepage #evModal { display: none; }

/* cabecera de páginas (evento/perfil): sin pin de mapa, "en catalunya" visible
   y el botón de usuario siempre a la derecha */
body.eventpage #mapBtn, body.profilepage #mapBtn { display: none; }
body.eventpage #userBtn, body.profilepage #userBtn { margin-left: auto; }
@media (max-width: 720px) {
  body.eventpage .logo-sub, body.profilepage .logo-sub { display: inline; }
}

/* pestañas del perfil: mismo estilo que los chips de géneros */
.ptab { font-size: 12px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; }

/* flechas del calendario centradas */
.cal-head button { display: flex; align-items: center; justify-content: center; padding: 0; }

/* perfil: botones guardar compactos, iconos de foto centrados, avatar grande,
   calendario sin provocar scroll de página */
.pageview .row2 { grid-template-columns: 1fr auto; }
.pageview .row2 .btn { padding: 9px 26px; }
.avbtns .ibtn, .avbtns .filebtn { width: 42px; height: 42px; padding: 0; display: flex; align-items: center; justify-content: center; }
.avprev { width: 96px; height: 96px; }
.avprev b { font-size: 34px; }
@media (max-width: 720px) { .avprev { width: 76px; height: 76px; } .avprev b { font-size: 26px; } }
.ptab-panel[data-panel="cal"] .cal { width: 100%; }
/* PC: el calendario llena el alto disponible — filas iguales, sin scroll */
@media (min-width: 721px) {
  .ptab-panel[data-panel="cal"] .pcard { height: calc(var(--apph, 100dvh) - 272px); min-height: 410px; grid-template-rows: auto minmax(0, 1fr); }
  .ptab-panel[data-panel="cal"] .cal { min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; }
  .ptab-panel[data-panel="cal"] .cal-grid { min-height: 0; grid-template-rows: auto; grid-auto-rows: minmax(0, 1fr); }
  .ptab-panel[data-panel="cal"] .cal-grid b { min-height: 0; }
}
.ptab-panel[data-panel="cal"] .cal-list { max-height: 180px; overflow-y: auto; }
.ut-count { color: var(--dim); font-size: 12px; margin-bottom: 4px; }
.ut-count::first-letter { font-weight: 700; }

/* centinela de carga perezosa */
.feed-sent { height: 1px; grid-column: 1 / -1; }

/* contador de eventos: no sale en página de evento ni de perfil;
   en móvil tampoco apk / vista / filtros en esas páginas */
body.eventpage #evCount, body.eventpage #evCountM,
body.eventpage #apkBtn, body.eventpage #gridBtn, body.eventpage #more,
body.profilepage #evCount, body.profilepage #evCountM,
body.profilepage #apkBtn, body.profilepage #gridBtn, body.profilepage #more { display: none; }

/* página de perfil (antes modal): dentro de #pageScroll */
body.profilepage main#events, body.profilepage #mapWrap { display: none; }
body.profilepage .searchrow, body.profilepage .extra,
body.profilepage .brandrow .chips { display: none; }
.pageview { width: min(1400px, calc(100% - 80px)); margin: 0 auto; padding: 16px 0 48px; }
@media (max-width: 720px) { .pageview { width: 100%; padding: 12px 12px calc(64px + env(safe-area-inset-bottom)); } }
.pageview[hidden] { display: none; }
#profBack { position: static; width: 38px; height: 38px; flex: none; }

/* cabecera: avatar + nombre + badge + acciones de foto + logout */
.prof-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.prof-top .avprev { width: 64px; height: 64px; flex: none; }
.prof-top .avprev b { font-size: 24px; }
.prof-name { font-size: 20px; font-weight: 800; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-width: 0; }
.prof-logout { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; }

/* cuerpo: sidebar de pestañas + paneles con tarjetas */
.prof-body { display: grid; grid-template-columns: 200px 1fr; gap: 22px; align-items: start; }
.prof-body .ptabs {
  flex-direction: column; align-items: stretch; border-bottom: 0; padding-bottom: 0;
  position: sticky; top: 12px; gap: 3px;
}
.prof-body .ptab {
  display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 10px 14px; border-radius: 10px; border: 1px solid transparent;
  font-size: 12px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase;
}
.prof-body .ptab svg { flex: none; opacity: .7; }
.prof-body .ptab.on svg { opacity: 1; }
.prof-panels { display: grid; min-width: 0; }
.ptab-panel { border-bottom: 0; padding-bottom: 0; }

/* tarjetas de sección */
.pgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 14px; }
.pcard-wide { grid-column: 1 / -1; }
.pcard-center { grid-column: 1 / -1; justify-items: center; text-align: center; }
.pcard-center .btn { justify-self: center; }
.pcard {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px; display: grid; gap: 10px; align-content: start; min-width: 0;
}
.pcard-h {
  display: flex; align-items: center; gap: 9px; margin: 0 0 2px;
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .9px; color: var(--dim);
}
.pcard-h svg { color: var(--acc); flex: none; }
.pcard-h .hint { text-transform: none; letter-spacing: 0; font-weight: 500; }
.pcard input, .pcard select { width: 100%; min-width: 0; }
.pcard > .btn { justify-self: start; }
.pcard-danger { border-color: rgba(255, 107, 122, .4); }
.pcard-danger .pcard-h { color: #ff8b98; }
.pcard-danger .pcard-h svg { color: #ff8b98; }
.phint { margin: -4px 0 0; font-size: 12px; color: var(--dim); }
.row2.two { grid-template-columns: 1fr 1fr; }
.ig-btns { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 720px) {
  .pageview { padding: 12px 12px calc(64px + env(safe-area-inset-bottom)); }
  .prof-body { display: block; }
  .prof-body .ptabs {
    flex-direction: row; border-bottom: 1px solid var(--line);
    padding-bottom: 8px; margin-bottom: 14px; position: static;
  }
  .prof-body .ptab { padding: 8px 13px; }
  .prof-top .avprev { width: 54px; height: 54px; }
  .prof-top .avprev b { font-size: 19px; }
  .prof-name { font-size: 16px; }
  /* logout pequeño y justo a la derecha del botón de borrar foto */
  .prof-logout { margin-left: 0; padding: 8px 9px; }
  .prof-logout span { display: none; }
  .row2.two { grid-template-columns: 1fr; }
  .cal-grid { grid-template-columns: 22px repeat(7, 1fr); gap: 3px; }
  .cal-grid b { min-height: 46px; padding: 4px 5px; font-size: 10px; }
}

/* foto de perfil: borde del color principal allá donde aparezca */
.ubtn-av { border: 2px solid var(--acc); }
.avprev { border: 2px solid var(--acc); }
.guser img, .guser b { border: 1.5px solid var(--acc); }
.cm-av { border: 1.5px solid var(--acc); }
.ut-av { border: 1.5px solid var(--acc); }

/* "asistirán": icono del tamaño de las fotos */
#lbGoing { display: flex; align-items: center; gap: 6px; }
#lbGoing .gnames { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
#lbGoing .guser { flex: none; margin: 0; white-space: nowrap; }
/* PC: asistentes en una sola línea; el resto tras "+N" (modal). Móvil: todos, en varias líneas */
@media (min-width: 721px) {
  #lbGoing { flex-wrap: nowrap; overflow: hidden; }
  #lbGoing .gnames { flex-wrap: nowrap; overflow: hidden; flex: 0 1 auto; }
}
.gmore {
  flex: none; border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px;
  font-size: 11px; font-weight: 800; color: var(--acc); background: rgba(185,255,60,.07); cursor: pointer;
}
.gmore:hover { border-color: var(--acc); }
.glist { display: flex; flex-wrap: wrap; gap: 8px; max-height: 60vh; overflow-y: auto; padding: 2px; }
.going-ic { flex: none; }
#lbGoing .going-ic { color: var(--acc); }
.avbtns .ibtn.warn { color: #ff6b6b; }

/* la página de evento no es un modal: nunca capada ni con scroll interno
   (reglas viejas de .lb-box quedaban ganando en móvil y cortaban comentarios) */
.lb-box { max-height: none; overflow: visible; margin: auto; } /* margin:auto: si sobrepasa, el top queda alcanzable con scroll */
@media (max-width: 640px) {
  .lb-box { max-height: none; overflow: visible; margin: auto; }
}

/* ---------- entradas locales (solo móvil) ---------- */
.lb-tickets {
  margin-top: 14px; display: grid; gap: 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 13px;
}
.lb-tickets[hidden] { display: none; }
.lb-tickets .lb-sect { margin-bottom: 0; }
.lb-tklist { display: flex; flex-wrap: wrap; gap: 8px; }
.lb-tklist:empty { display: none; }
.tk-item { display: inline-flex; align-items: center; gap: 2px; min-width: 0; }
.tk-doc {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  padding: 9px 12px; background: rgba(255,255,255,.05); border: 1px solid var(--line);
  border-radius: 10px; color: var(--txt); font-size: 12.5px; cursor: pointer; font-family: inherit;
}
.tk-doc svg { flex: none; color: var(--acc); }
.tk-doc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 170px; }
.tk-doc:hover { border-color: var(--acc); }
.tk-del {
  flex: none; width: 26px; height: 26px; border-radius: 8px; border: none; cursor: pointer;
  background: none; color: var(--dim); font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center;
}
.tk-del:hover { color: #ff6b6b; }
#lbTkAdd { justify-self: start; display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; }
/* en PC no tiene sentido guardar entradas para enseñarlas en la puerta */
@media (min-width: 721px) { .lb-tickets { display: none !important; } }

/* aviso primera vez + visor de entrada a pantalla completa */
.tk-note { margin: 0; font-size: 13px; color: var(--dim); line-height: 1.55; }
.tk-note b { color: var(--txt); }
#tkModal .modal-box { max-width: 340px; }
#tkModal .btn { justify-self: center; }
#tkView { padding: 0; background: rgba(5,5,10,.92); }
#tkView img { max-width: 96vw; max-height: 92vh; object-fit: contain; border-radius: 10px; }

/* nombre de la sala enlazado a su web */
.lb-vlink { color: inherit; text-decoration: none; border-bottom: 1px dashed rgba(185,255,60,.45); }
.lb-vlink:hover { color: var(--acc); border-bottom-color: var(--acc); }

/* botón añadir entrada: grande y con color de acento */
#lbTkAdd {
  justify-self: stretch; justify-content: center; gap: 9px;
  padding: 11px; border-radius: 10px; border: none;
  background: linear-gradient(90deg, var(--acc), var(--acc2));
  color: #0a0a10; font-weight: 700; font-size: 13px;
}
#lbGoing .gempty { color: var(--dim); font-size: 12px; margin-left: 4px; align-self: center; }
#lbTkAdd { width: auto; height: auto; }

/* ---------- banner de cookies + legal ---------- */
#ckBar {
  position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(560px, calc(100vw - 24px)); z-index: 1200;
  background: #14141c; border: 1px solid #2c2c38; border-radius: 14px;
  padding: 14px 16px; display: grid; gap: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,.6);
}
#ckBar .ck-txt { font-size: 13px; color: var(--dim); line-height: 1.45; }
#ckBar .ck-txt a { color: var(--acc); }
#ckBar .ck-btns { display: flex; gap: 10px; justify-content: flex-end; }
#ckBar .ck-btns .btn { padding: 8px 18px; font-size: 13px; }
.btn.ghost { background: none; border: 1px solid #3a3a48; color: var(--dim); }
.btn.danger { background: none; border: 1px solid rgba(255,107,122,.5); color: #ff6b7a; width: 100%; margin-top: 6px; }
.legal-check { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--dim); line-height: 1.4; }
.legal-check input { margin-top: 2px; accent-color: var(--acc); }
.legal-check .sw { margin-top: 0; }
.legal-check a, .legal-links a { color: var(--acc); }
.legal-links { font-size: 11px; color: var(--dim); text-align: center; margin-top: 4px; }
.legal-links a { text-decoration: none; }

/* tarjetas: icono + nombres de asistentes, "+N" cuando no caben */
.card .going {
  display: flex; align-items: center; gap: 5px;
  white-space: nowrap; overflow: hidden; color: var(--dim);
}
/* asistentes anclados al pie de la tarjeta, en la fila justo encima de los géneros */
.card .going:not(:empty) { margin-top: auto; }
.card .going:not(:empty) + .tags { margin-top: 0; }
.card .going .going-ic { flex: none; color: var(--acc); }
.card .going > span { overflow: hidden; text-overflow: ellipsis; }
.card .going .gtotal { color: var(--acc); font-size: 11px; flex: none; }

/* ---------- página de evento PC: fila del título ----------
   fila 1: fecha (sobre la columna central)
   fila 2: acciones ‹ ♥ 🎟 ↗ | título del evento | ENTRADAS+INFO + "Comentarios"
   fila 3: cartel | club+line-up+descripción | caja de comentarios
   → cartel y caja de comentarios arrancan a la altura del cuadro de club */
/* ---------- página de evento PC: 2 filas ----------
   fila 1: [acciones] | [fecha + título] | [ENTRADAS+INFO + fuentes]
   fila 2: [cartel + géneros + asistentes] | [club + line-up + descripción] | [comentarios]
   el cuadro de club es el ancla: todo arranca justo debajo del título */
@media (min-width: 1151px) {
  .lb-box { grid-template-rows: auto 1fr; }
  .lb-col1, .lb-col3 { display: contents; }
  /* fila 1 */
  /* acciones + géneros apilados, anclados abajo: si los géneros crecen empujan los botones hacia arriba */
  .lb-col1top {
    grid-column: 1; grid-row: 1; align-self: end; min-width: 0;
    display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
  }
  .lb-col1top .lb-right { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .lb-col1top .tags { flex: none; flex-wrap: wrap; max-width: 100%; } /* nunca más anchos que el cartel */
  .lb-col3top { grid-column: 3; grid-row: 1; align-self: end; min-width: 0;
    display: flex; flex-direction: column; gap: 6px; }
  /* fila 2: las tres cajas arrancan a la misma altura */
  .lb-left { grid-column: 1; grid-row: 2; }
  .lb-info { grid-column: 2; grid-row: 2; padding-top: 0; }
  .lb-chat { grid-column: 3; grid-row: 2; }
  /* título dentro de la columna de fecha: justo debajo de los géneros */
  .lb-head2 { display: none; } /* su h2 vive en .lb-whencol */
  .lb-whencol h2 {
    font-size: clamp(19px, 1.8vw, 25px); line-height: 1.15; margin: 4px 0 0;
    /* 1 línea → centrada en el espacio de 2; 2 líneas → las ocupa */
    display: flex; align-items: center; min-height: calc(1.15em * 2); overflow: hidden;
  }
  .lb-whencol h2 > span {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  /* ENTRADAS+INFO con su título encima de las fuentes (fila compacta con scroll-x) */
  .lb-srcbox { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
  .lb-srcbox .lb-sect { margin: 0; }
  .lb-srcbox .modal-links {
    display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto;
    min-width: 0; scrollbar-width: none;
    background: #14141d; border: 1px solid var(--line); border-radius: 12px;
    padding: 7px 8px;
  }
  .lb-srcbox .modal-links::-webkit-scrollbar { display: none; }
  /* fondo compacto: misma letra/logo, menos padding — incluso el CTA principal */
  .lb-srcbox .modal-links a, .lb-srcbox #lbLinks .lb-go {
    flex: none; width: auto; margin: 0; padding: 5px 9px; border-radius: 9px;
    font-size: 13px; font-weight: 600;
    background: var(--panel); color: var(--txt); border: 1px solid var(--line);
  }
  .lb-srcbox #lbLinks .lb-go { justify-content: flex-start; }
  .lb-srcbox .modal-links a:hover { border-color: var(--acc); }
  .lb-scroll > :first-child { margin-top: 0; } /* el cuadro de club arranca pegado arriba */
  /* volver con el mismo formato que el resto de acciones, antes del ♥ */
  .lb-actions .lb-close {
    order: 0; position: static; width: 40px; height: 40px; border-radius: 10px;
    background: var(--panel); border: 1px solid var(--line);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .lb-actions .lb-close:hover { border-color: var(--acc); color: var(--acc); }
}
@media (max-width: 1150px) {
  /* los wrappers desaparecen: sus hijos vuelven a ser items del grid móvil */
  .lb-col1, .lb-col1top, .lb-col3 { display: contents; }
  .lb-head2, .lb-col3top { display: none; } /* vacíos: su contenido va dentro del scroll/caja */
  .lb-box { width: 100%; }
  /* móvil: sin scroll interno — descripción y line-up muestran todo el contenido */
  .lb-scroll { overflow: visible; max-height: none; flex: none; }
}

/* (tamaño de #lbChatGo definido en su bloque único, ~línea 935) */

/* el botón me gusta del evento muestra el total de likes */
#lbFav { width: auto; min-width: 40px; padding: 0 10px; gap: 5px; }
#lbFav .favn { font-size: 12px; font-weight: 800; }

/* asistiré del evento: icono de personas + contador; verde si va gente, azul si voy yo */
#lbGoingBtn { width: auto; min-width: 40px; padding: 0 10px; gap: 5px; }
#lbGoingBtn .gn { font-size: 12px; font-weight: 800; }
#lbGoingBtn.any { border-color: transparent; color: #0a0a10; background: linear-gradient(135deg, var(--acc), var(--acc2)); }
#lbGoingBtn.mine { border-color: transparent; color: #0a0a10; background: linear-gradient(135deg, #5bb7ff, #7be0ff); }

/* ---------- tarjetas: likes + icono de asistentes sobre el cartel ---------- */
.fly-stats {
  position: absolute; top: 7px; right: 7px; z-index: 2;
  display: flex; gap: 5px;
}
.fly-stats[hidden] { display: none; }
.fs-pill {
  display: flex; align-items: center; gap: 4px;
  height: 26px; padding: 0 8px; border-radius: 999px;
  background: rgba(10,10,16,.78); border: 1px solid rgba(255,255,255,.12);
  color: var(--txt); font-size: 11px; font-weight: 700;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-sizing: border-box;
}
.fs-pill svg { flex: none; display: block; width: 15px; height: 15px; }
.fs-pill.fav { color: #ff5c8a; } /* rojo: le gusta a otros */
.fs-pill.fav.mine { color: #c07bff; } /* morado: me gusta a mí */
.fs-pill.fav b { color: var(--txt); font-size: 12px; }
.fs-pill.going {
  color: var(--acc); width: 26px; padding: 0;
  display: grid; place-items: center; gap: 0;
  border-radius: 50%; cursor: pointer;
}
.fs-pill.going svg { width: 14px; height: 14px; margin: 0; }
/* el icono hereda el color del pill: lima normal, azul .mine (como el ♥ del pill fav).
   La regla antigua .card .going .going-ic fijaba el icono a lima: la pill también lleva la clase .going. */
.card .fs-pill .going-ic { color: inherit; margin: 0; }
.fs-pill.going.mine { color: #5bb7ff; border-color: rgba(91,183,255,.45); } /* azul: yo voy */

/* icono de asistentes en la página del evento para anónimos */
#lbGoing .glock {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  color: var(--dim); font-size: 12px;
}
#lbGoing .glock svg { color: var(--acc); }
#lbGoing .glock:hover { color: var(--txt); }

/* subgéneros en naranja (las tarjetas solo muestran géneros que están en los filtros) */
.tag.sub { border-color: rgba(255, 158, 64, .45); color: #ffa14d; }

/* iconos de títulos de sección en verde */
.lb-sect svg { color: var(--acc); }
.pcard-h svg { color: var(--acc); }
.modal-title svg { color: var(--acc); }
.pcard-danger .pcard-h svg { color: var(--acc); }

/* modal "qué podrías hacer con cuenta" */
.nl-txt { margin: 0; font-size: 14px; line-height: 1.55; }
.nl-extra { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--dim); }

/* perfil: fila de foto/nombre encima del contenido, no de la lista de secciones */
@media (min-width: 721px) { .prof-top { margin-left: 222px; } }
/* logout solo icono */
.prof-logout { width: 38px; height: 38px; padding: 0; justify-content: center; flex: none; }
.prof-logout svg { flex: none; }

/* primera letra en mayúscula en botones y textos sueltos */
.btn::first-letter, .modal-close::first-letter, .linkbtn::first-letter,
.hint::first-letter, .phint::first-letter { text-transform: uppercase; }

/* ---------- amigos ---------- */
.fr-code {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.fr-code b {
  font-size: 20px; letter-spacing: 3px; color: var(--acc);
  background: var(--panel); border: 1px dashed var(--acc); border-radius: 10px;
  padding: 8px 14px; font-family: ui-monospace, monospace;
}
.fr-share { display: flex; gap: 6px; }
.fr-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.fr-row:last-child { border-bottom: 0; }
.fr-av {
  width: 34px; height: 34px; border-radius: 50%; flex: none; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--acc), var(--acc2));
  color: #0a0a10; font-weight: 800; font-size: 14px;
}
.fr-av img { width: 100%; height: 100%; object-fit: cover; }
.fr-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-vis { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--dim); cursor: pointer; white-space: nowrap; }
.fr-vis input:not(.sw) { accent-color: var(--acc); width: 15px; height: 15px; cursor: pointer; }
.fr-acts { display: flex; gap: 5px; }
.fr-acts .ibtn { width: 32px; height: 32px; padding: 0; }
.fr-empty { color: var(--dim); font-size: 12px; padding: 6px 0; }

/* ---------- switch (toggles tipo ve-mis-asistiré) ---------- */
input.sw { position: relative; width: 36px; height: 20px; padding: 0; flex: none; appearance: none; -webkit-appearance: none; cursor: pointer;
  background: rgba(255,255,255,.1); border: 1px solid var(--line); border-radius: 999px; transition: background .15s, border-color .15s;
  box-sizing: border-box; }
.sw::before { content: ""; position: absolute; top: 50%; left: 2px; transform: translateY(-50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: #8b8b98; transition: left .15s, background .15s; }
.sw:checked { background: rgba(185,255,60,.28); border-color: var(--acc); }
.sw:checked::before { left: 18px; background: var(--acc); }

/* punto de notificación en el botón de perfil y en la pestaña Amigos */
#userBtn { position: relative; }
#userBtn .ndot { position: absolute; top: -1px; right: -1px; z-index: 5; width: 11px; height: 11px; border-radius: 50%;
  background: #ff5c8a; box-shadow: 0 0 0 2.5px #0a0a10; }
.ptab { display: flex; align-items: center; }
.ptab .ndot { width: 9px; height: 9px; border-radius: 50%; flex: none; margin-left: 7px;
  background: #ff5c8a; box-shadow: 0 0 0 2px var(--bg, #0a0a10); }

/* ======================================================================
   REDISEÑO v2 — estética de app moderna
   Móvil: barra de navegación inferior (como la app instalada).
   PC: cabecera superior elegante + grid amplio centrado.
   ====================================================================== */
:root {
  --bg: #0a0a0e;
  --panel: rgba(255, 255, 255, 0.045);
  --panel-solid: #131318;
  --panel-2: #1a1a22;
  --line: rgba(255, 255, 255, 0.075);
  --txt: #f4f4f7;
  --dim: #9a9aa5;
  --r-lg: 20px;
  --r-md: 14px;
  --bnavH: 60px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .4);
}
body {
  font-family: ui-sans-serif, -apple-system, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .1px;
}
body::before {
  background:
    radial-gradient(50% 35% at 10% -5%, rgba(185, 255, 60, .07), transparent 70%),
    radial-gradient(45% 35% at 95% 0%, rgba(46, 230, 168, .06), transparent 70%),
    radial-gradient(60% 45% at 50% 110%, rgba(255, 78, 203, .06), transparent 70%);
}

/* ---------- cabecera ---------- */
.bar {
  background: rgba(10, 10, 14, .82);
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  padding: 12px 18px; gap: 12px;
  border-bottom: 1px solid var(--line);
}
.chip {
  border-radius: 999px; font-weight: 600; letter-spacing: 1.2px;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.chip:active { transform: scale(.95); }
.ibtn { border-radius: 12px; transition: all .15s; }
.searchbox { border-radius: 999px; background: var(--panel); transition: border-color .15s, box-shadow .15s; }
.fld input, .modal-box input, .modal-box textarea, #editModal input, #editModal textarea {
  border-radius: var(--r-md); background: var(--panel);
}
.btn { border-radius: 12px; letter-spacing: .4px; }

/* ---------- feed de tarjetas ---------- */
main { gap: 16px; }
.card {
  border-radius: var(--r-lg); background: var(--panel-solid);
  border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.card:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, .14); box-shadow: 0 14px 34px rgba(0, 0, 0, .45); }
.card:active { transform: scale(.985); }
.flyer img { transition: transform .35s ease; }
.card:hover .flyer img { transform: scale(1.04); }
.info { padding: 12px 14px 14px; gap: 5px; }
.card h2 { font-size: 15px; font-weight: 800; letter-spacing: -.2px; }
.when {
  display: inline-flex; align-items: center; width: fit-content;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(185, 255, 60, .1); border: 1px solid rgba(185, 255, 60, .28);
  color: var(--acc); font-size: 10px; letter-spacing: 1px;
}
.star, .share, .goin {
  border-radius: 50%; background: rgba(8, 8, 12, .62);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.tag { border-radius: 8px; font-size: 10.5px; padding: 3px 8px; letter-spacing: .6px; }

/* ---------- modales ---------- */
.modal { background: rgba(5, 5, 9, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.modal-box { border-radius: var(--r-lg); box-shadow: var(--shadow); background: #14141b; }
.modal-x { border-radius: 50%; }

/* ---------- navegación inferior (solo móvil) ---------- */
#bnav { display: none; }
@media (max-width: 840px) {
  #bnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: flex; align-items: stretch;
    height: calc(var(--bnavH) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: rgba(11, 11, 16, .88);
    backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3);
    border-top: 1px solid var(--line);
  }
  .bn {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    background: none; border: none; padding: 0; color: var(--dim); cursor: pointer;
    font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px;
    -webkit-tap-highlight-color: transparent; position: relative;
  }
  .bn:active { color: var(--acc); }
  .bn-new svg {
    background: linear-gradient(135deg, var(--acc), var(--acc2)); color: #0a0a10;
    border-radius: 14px; padding: 6px; box-shadow: 0 0 18px rgba(185, 255, 60, .4);
  }
  .bn .ndot { position: absolute; top: 8px; right: 50%; margin-right: -16px; width: 10px; height: 10px; border-radius: 50%;
    background: #ff5c8a; box-shadow: 0 0 0 2.5px #0b0b10; }

  /* la barra inferior queda para el futuro: de momento los botones viven arriba */
  body.eventpage #bnav, body.profilepage #bnav { display: none; }

  /* el feed no queda tapado por la barra */
  main { padding-bottom: calc(var(--bnavH) + env(safe-area-inset-bottom) + 24px) !important; }
  #pageScroll > .prof { padding-bottom: calc(var(--bnavH) + env(safe-area-inset-bottom) + 24px) !important; }
}

/* ---------- PC: grid amplio centrado ---------- */
@media (min-width: 1000px) {
  main {
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 20px; padding: 22px 32px 48px;
    max-width: 1560px; margin: 0 auto; width: 100%;
  }
  main.onecol { grid-template-columns: minmax(0, 720px); justify-content: center; }
  .flyer { aspect-ratio: 3 / 4; }
  .bar { padding: 14px 32px; }
  .logo .word { font-size: 26px; }
}

/* ---------- dropdown del botón de usuario (solo PC con ratón) ---------- */
.udwrap { position: relative; display: flex; align-items: center; }
#userDD { position: absolute; top: 100%; right: 0; padding-top: 10px; display: none; z-index: 70; }
#userDD[hidden] { display: none !important; }
#userDD .udd-box {
  min-width: 178px; padding: 6px; border-radius: 14px;
  background: #14141b; border: 1px solid var(--line); box-shadow: var(--shadow);
  display: grid; gap: 2px;
}
#userDD .udd-i {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: none; border-radius: 9px; padding: 9px 11px;
  color: var(--txt); font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; text-align: left;
}
#userDD .udd-i svg { color: var(--dim); flex: none; }
#userDD .udd-i:hover { background: var(--panel); color: var(--acc); }
#userDD .udd-i:hover svg { color: var(--acc); }
#userDD .udd-i.warn:hover { color: #ff5c8a; }
#userDD .udd-i.warn:hover svg { color: #ff5c8a; }
@media (hover: hover) and (min-width: 1151px) {
  .udwrap:hover #userDD:not([hidden]) { display: block; }
}