/* ============================================================
   TABLÓN DE EVENTOS — hoja de estilo
   Underground / cartel de battle. Móvil primero.
   ============================================================ */

:root{
  --bg:#0a0a0b;
  --card:#141416;
  --card-2:#1b1b1e;
  --line:#2a2a30;
  --txt:#f4f4f2;
  --dim:#83838c;
  --acid:#d9ff00;
  --hot:#ff2d95;

  --f-1x1:#ff3b30;
  --f-2x2:#00e5ff;
  --f-3x3:#d9ff00;
  --f-crew:#ff2d95;
  --f-mixto:#ffb300;

  --pad:16px;
  --r:3px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}

/* Sin esto, un display: explícito (flex, grid…) le gana al atributo hidden
   y los paneles saldrían abiertos. */
[hidden]{display:none !important}

body{
  background:var(--bg);
  color:var(--txt);
  font-family:'Barlow Condensed',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;
  line-height:1.3;
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}

/* grano de fotocopia sobre todo */
.grain{
  position:fixed; inset:-50%;
  pointer-events:none; z-index:9999;
  opacity:.07;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
}

h1,h2,h3{margin:0;font-weight:400}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
img{display:block;max-width:100%}

/* ===================== CABECERA ===================== */
.top{
  position:sticky; top:0; z-index:50;
  background:rgba(10,10,11,.93);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.top-in{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:12px; padding:14px var(--pad) 10px;
  max-width:1180px; margin:0 auto;
}
.brand{display:flex; flex-direction:column; line-height:.82}
.brand-1{
  font-family:'Anton',Impact,sans-serif;
  font-size:32px; letter-spacing:-.02em;
  text-transform:uppercase;
}
.brand-2{
  font-family:'Space Mono',monospace;
  font-size:10px; letter-spacing:.34em;
  color:var(--acid); margin-top:5px;
}
.btn-add{
  font-family:'Anton',sans-serif; font-size:15px; letter-spacing:.05em;
  background:var(--acid); color:#000;
  padding:10px 16px; border-radius:var(--r);
  display:flex; align-items:center; gap:7px;
  transform:rotate(-1.2deg);
  box-shadow:3px 3px 0 #000, 0 0 0 1px var(--acid);
  transition:transform .12s, box-shadow .12s;
  white-space:nowrap;
}
.btn-add span{font-size:19px; line-height:0}
.btn-add:active{transform:rotate(-1.2deg) translate(3px,3px); box-shadow:0 0 0 1px var(--acid)}

/* pestañas */
.tabs{
  display:flex; gap:4px; align-items:center;
  padding:0 var(--pad) 0; max-width:1180px; margin:0 auto;
  overflow-x:auto; scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  font-family:'Space Mono',monospace;
  font-size:11px; letter-spacing:.14em;
  color:var(--dim); padding:11px 12px 12px;
  border-bottom:2px solid transparent;
  white-space:nowrap; text-transform:uppercase;
}
.tab b{color:#5c5c66; font-weight:700; margin-left:3px}
.tab.is-on{color:var(--txt); border-bottom-color:var(--acid)}
.tab.is-on b{color:var(--acid)}
.tab-me{margin-left:auto; color:var(--acid); max-width:42vw; overflow:hidden; text-overflow:ellipsis}

/* en móvil estrecho las cuatro pestañas no caben: se aprietan */
@media(max-width:440px){
  .tab{padding:11px 7px 12px; letter-spacing:.07em}
  .tab-me{max-width:28vw}
}

/* ===================== LISTA ===================== */
.list{
  max-width:1180px; margin:0 auto;
  padding:18px var(--pad) 90px;
  display:grid; gap:18px;
  grid-template-columns:1fr;
}
@media(min-width:720px){ .list{grid-template-columns:1fr 1fr; gap:20px} }
@media(min-width:1080px){ .list{grid-template-columns:1fr 1fr 1fr} }

/* ===================== TARJETA ===================== */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  display:flex; flex-direction:column;
  position:relative;
  animation:pop .28s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.poster{
  position:relative; background:#000;
  border-bottom:1px solid var(--line);
}
.poster img{
  width:100%; aspect-ratio:4/5; max-height:40vh; object-fit:cover;
  filter:contrast(1.06) saturate(.94);
}
.poster.no-img{
  aspect-ratio:16/7;
  display:grid; place-items:center;
  background:repeating-linear-gradient(45deg,#141416 0 11px,#0f0f11 11px 22px);
}
.poster.no-img span{
  font-family:'Anton',sans-serif; font-size:34px;
  color:#2e2e35; letter-spacing:.04em;
}

/* pegatina de formato */
.fmt{
  position:absolute; top:11px; left:11px;
  font-family:'Anton',sans-serif; font-size:15px; letter-spacing:.06em;
  color:#000; padding:5px 11px 4px;
  transform:rotate(-3.5deg);
  box-shadow:2px 2px 0 rgba(0,0,0,.75);
  border-radius:2px;
}
.fmt[data-f="1x1"]{background:var(--f-1x1); color:#fff}
.fmt[data-f="2x2"]{background:var(--f-2x2)}
.fmt[data-f="3x3"]{background:var(--f-3x3)}
.fmt[data-f="CREW"]{background:var(--f-crew); color:#fff}
.fmt[data-f="MIXTO"]{background:var(--f-mixto)}
.fmt[data-f="?"]{background:#e9e9ec; color:#000; font-size:17px; padding:4px 13px 3px}

/* cuenta atrás */
.when{
  position:absolute; right:11px; bottom:11px;
  font-family:'Space Mono',monospace; font-weight:700;
  font-size:11px; letter-spacing:.1em;
  background:rgba(0,0,0,.82); backdrop-filter:blur(4px);
  color:var(--acid); padding:5px 9px; border-radius:2px;
  border:1px solid rgba(217,255,0,.32);
}
.when.soon{color:#fff; background:var(--f-1x1); border-color:var(--f-1x1)}
.when.past{color:var(--dim); border-color:var(--line)}

.body{padding:13px 14px 14px; display:flex; flex-direction:column; gap:9px; flex:1}
.date{
  font-family:'Space Mono',monospace; font-size:11px;
  letter-spacing:.17em; color:var(--dim); text-transform:uppercase;
}
.name{
  font-family:'Anton',sans-serif;
  font-size:26px; line-height:1.0; letter-spacing:-.005em;
  text-transform:uppercase; word-break:break-word;
}
/* enlace al cartel original (Instagram casi siempre) */
.fuente{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:7px;
  font-family:'Anton',sans-serif; font-size:12.5px; letter-spacing:.08em;
  color:var(--acid); text-decoration:none;
  border:1.5px solid rgba(217,255,0,.42); border-radius:var(--r);
  padding:9px 14px 8px;
  transition:.13s;
}
.fuente i{font-style:normal; font-size:13px; line-height:0}
.fuente:hover{background:rgba(217,255,0,.1); border-color:var(--acid)}
.fuente:active{transform:scale(.97)}
.card.past .fuente{color:var(--dim); border-color:var(--line)}
.where{font-size:15.5px; color:#b8b8bf; display:flex; gap:6px; align-items:baseline}
.where i{color:var(--acid); font-style:normal}

/* botones VOY / ME MOLA / NO PUEDO */
.acts{display:flex; gap:6px; margin-top:2px}
.stamp{
  flex:1; min-width:0;
  font-family:'Anton',sans-serif; font-size:13px; letter-spacing:.04em;
  padding:11px 5px 10px;
  border:1.5px solid var(--line); border-radius:var(--r);
  color:var(--dim); background:var(--card-2);
  white-space:nowrap;
  transition:.13s;
}
.stamp b{
  font-family:'Space Mono',monospace; font-size:10px;
  margin-left:4px; opacity:.72; font-weight:700;
}
.stamp:active{transform:scale(.96)}
.stamp[data-s="going"].on{background:var(--acid); border-color:var(--acid); color:#000}
.stamp[data-s="maybe"].on{background:var(--hot); border-color:var(--hot); color:#fff}
.stamp[data-s="out"].on{background:#3d3d47; border-color:#565663; color:#d2d2dc}
.stamp:not(.on):hover{color:var(--txt); border-color:#43434c}

/* quién va */
.who-row{display:flex; flex-wrap:wrap; gap:5px; align-items:center; min-height:4px}
.who-chip{
  font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:.05em;
  padding:3px 7px; border-radius:2px; text-transform:uppercase;
}
.who-chip.going{background:rgba(217,255,0,.13); color:var(--acid); border:1px solid rgba(217,255,0,.3)}
.who-chip.maybe{background:rgba(255,45,149,.13); color:#ff7ab8; border:1px solid rgba(255,45,149,.3)}
.who-chip.out{background:rgba(255,255,255,.04); color:#6d6d78; border:1px solid #34343c; text-decoration:line-through}
.who-chip.me{outline:1px solid currentColor; outline-offset:1px}
.who-none{font-family:'Space Mono',monospace; font-size:10.5px; color:#4d4d57; letter-spacing:.1em}

/* pie de tarjeta */
.card-foot{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  border-top:1px solid var(--line); padding:7px 14px;
  font-family:'Space Mono',monospace; font-size:10px;
  letter-spacing:.09em; color:#4d4d57; text-transform:uppercase;
}
.card-foot span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.card-foot button{
  color:#4d4d57; font-family:inherit; font-size:10px; letter-spacing:.09em;
  white-space:nowrap;
  /* Sin esto el boton mide 13 px de alto y se falla el toque. El margen
     negativo compensa el relleno para que el pie no crezca. */
  padding:10px 6px; margin:-10px -6px;
}
.card-foot button:hover{color:var(--f-1x1)}
/* COMPARTIR es el que mantiene vivo esto: que se vea que es un boton. */
.card-foot button[data-act="share"]{color:#9a9aa3}
.card-foot button[data-act="share"]:hover{color:var(--acid)}

/* pasados */
.card.past .poster img{filter:grayscale(1) contrast(.9) brightness(.55)}
.card.past .name{color:#83838c}
.card.past .fmt{filter:grayscale(1); opacity:.7}

/* ===================== RADAR ===================== */
.tab-radar::before{content:"◎ "}

.radar{max-width:1180px; margin:0 auto; padding:14px var(--pad) 90px}
.radar-intro{
  font-size:15px; color:var(--dim); margin:0 0 16px;
  border-left:2px solid #34343c; padding-left:11px; line-height:1.45;
}
.radar-intro b{color:#b8b8bf; font-weight:600}

#radar-lista{display:grid; gap:11px; grid-template-columns:1fr}
@media(min-width:720px){ #radar-lista{grid-template-columns:1fr 1fr} }
@media(min-width:1080px){ #radar-lista{grid-template-columns:1fr 1fr 1fr} }

.ficha{
  background:var(--card); border:1px solid var(--line);
  border-left:2px solid #3f3f4a; border-radius:var(--r);
  padding:12px 13px 13px;
  display:flex; flex-direction:column; gap:7px;
  animation:pop .22s cubic-bezier(.2,.9,.3,1) both;
}
.ficha-cab{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.ficha-fecha{
  font-family:'Space Mono',monospace; font-size:10.5px;
  letter-spacing:.15em; color:var(--dim); text-transform:uppercase;
}
.ficha-cuenta{
  font-family:'Space Mono',monospace; font-weight:700; font-size:10px;
  letter-spacing:.1em; color:var(--acid); white-space:nowrap;
}
.ficha-cuenta.soon{color:var(--f-1x1)}
.ficha-nombre{
  font-family:'Anton',sans-serif; font-size:20px; line-height:1.03;
  letter-spacing:-.005em; text-transform:uppercase; word-break:break-word;
}
.ficha-lugar{font-size:15px; color:#b8b8bf}
.ficha-lugar i{color:#5a5a66; font-style:normal; margin-right:6px}
.ficha-pie{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  font-family:'Space Mono',monospace; font-size:9.5px;
  letter-spacing:.09em; color:#4d4d57; text-transform:uppercase;
}
.ficha-pie a{color:#6d6d7a; text-decoration:none; white-space:nowrap}
.ficha-pie a:hover{color:var(--acid)}

.ficha-acts{display:flex; gap:7px; margin-top:3px; justify-content:flex-end}
.ficha-fuera{
  font-family:'Space Mono',monospace; font-size:9.5px; letter-spacing:.12em;
  color:#4d4d57; border:1px solid var(--line); border-radius:var(--r);
  padding:10px 12px;
}
.ficha-fuera:hover{color:var(--f-1x1); border-color:var(--f-1x1)}

/* ya pasada al tablón: se queda para que nadie la repita */
.ficha.ya{opacity:.5; border-left-color:var(--acid)}
.ficha.ya .ficha-nombre{text-decoration:line-through}
.ficha-ya{
  font-family:'Space Mono',monospace; font-size:9.5px; letter-spacing:.12em;
  color:var(--acid); margin-top:3px;
}

/* ===================== VACÍO / CARGANDO ===================== */
.empty{
  text-align:center; padding:60px 24px 90px;
  color:var(--dim);
  font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.16em;
}
.empty p{margin:0 0 20px}
.empty-tag{
  display:inline-block; font-family:'Anton',sans-serif; font-size:20px;
  letter-spacing:.1em; color:#000; background:var(--dim);
  padding:4px 12px; transform:rotate(-3deg); margin-bottom:18px;
}
.empty .btn-ghost{max-width:280px; margin:0 auto}

/* ===================== PANELES ===================== */
.sheet{
  position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,.82); backdrop-filter:blur(6px);
  display:flex; align-items:flex-end; justify-content:center;
  overflow-y:auto; padding:0;
}
@media(min-width:700px){ .sheet{align-items:center; padding:24px} }
.sheet-box{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); width:100%; max-width:480px;
  padding:22px 18px calc(22px + env(safe-area-inset-bottom));
  animation:up .22s cubic-bezier(.2,.9,.3,1) both;
}
.sheet-box-lg{max-width:520px; max-height:92dvh; overflow-y:auto}
@keyframes up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.sheet-top{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px}
.sheet-h{
  font-family:'Anton',sans-serif; font-size:27px;
  letter-spacing:.01em; text-transform:uppercase;
}
.sheet-p{font-size:15.5px; color:var(--dim); margin:6px 0 16px}
.x{font-size:30px; line-height:.7; color:var(--dim); padding:2px 6px}
.x:hover{color:var(--txt)}

.lb{
  display:block; font-family:'Space Mono',monospace;
  font-size:10px; letter-spacing:.19em; color:var(--dim);
  margin:15px 0 6px; text-transform:uppercase;
}
.lb i{color:#4d4d57; font-style:normal; text-transform:none; letter-spacing:.08em}
.fld{
  width:100%; background:#0d0d0f; color:var(--txt);
  border:1.5px solid var(--line); border-radius:var(--r);
  padding:12px; font-family:'Barlow Condensed',sans-serif; font-size:18px;
}
.fld::placeholder{color:#4d4d57}
.fld:focus{outline:0; border-color:var(--acid)}
input[type=date].fld{color-scheme:dark}
.fld-area{resize:vertical; min-height:84px; line-height:1.38; font-size:16px}
.cuenta{
  font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.1em;
  color:#4d4d57; text-align:right; margin-top:5px;
}

/* la letra pequeña del cartel: precio, premios, jueces, DJ… */
.notas{
  font-size:14.5px; line-height:1.44; color:#a9a9b3;
  background:rgba(255,255,255,.03);
  border-left:2px solid rgba(217,255,0,.45);
  padding:8px 11px; border-radius:0 var(--r) var(--r) 0;
  white-space:pre-wrap; word-break:break-word;
}
.card.past .notas{border-left-color:#3a3a44; color:#75757e}

/* selector de formato */
.fmts{display:flex; flex-wrap:wrap; gap:7px}
.fmt-op{
  font-family:'Anton',sans-serif; font-size:15px; letter-spacing:.05em;
  padding:9px 14px 8px; border-radius:2px;
  border:1.5px solid var(--line); background:#0d0d0f; color:var(--dim);
  transition:.12s;
}
.fmt-op.on{color:#000; border-color:transparent; transform:rotate(-2deg)}
.fmt-op.on[data-f="1x1"]{background:var(--f-1x1); color:#fff}
.fmt-op.on[data-f="2x2"]{background:var(--f-2x2)}
.fmt-op.on[data-f="3x3"]{background:var(--f-3x3)}
.fmt-op.on[data-f="CREW"]{background:var(--f-crew); color:#fff}
.fmt-op.on[data-f="MIXTO"]{background:var(--f-mixto)}
.fmt-op.on[data-f="?"]{background:#e9e9ec; color:#000}

/* subida de cartel */
.drop{
  display:block; position:relative; cursor:pointer;
  border:1.5px dashed #3a3a44; border-radius:var(--r);
  background:#0d0d0f; overflow:hidden; min-height:150px;
}
.drop:hover{border-color:var(--acid)}
.drop img{width:100%; max-height:340px; object-fit:contain; background:#000}
.drop-in{padding:34px 16px; text-align:center; color:var(--dim)}
.drop-ico{font-size:30px; color:#3a3a44; line-height:1}
.drop-t{font-family:'Anton',sans-serif; font-size:19px; letter-spacing:.09em; margin-top:8px; color:#9a9aa3}
.drop-s{font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:.1em; margin-top:5px; color:#4d4d57}
.poster-x{
  position:absolute; top:8px; right:8px;
  background:rgba(0,0,0,.8); color:#fff; border:1px solid var(--line);
  width:30px; height:30px; border-radius:2px; font-size:19px; line-height:1;
}

/* botones grandes */
.btn-go{
  width:100%; margin-top:20px;
  font-family:'Anton',sans-serif; font-size:17px; letter-spacing:.06em;
  background:var(--acid); color:#000; padding:14px; border-radius:var(--r);
  box-shadow:3px 3px 0 #000;
  transition:.12s;
}
.btn-go:active{transform:translate(3px,3px); box-shadow:none}
.btn-go[disabled]{opacity:.45; pointer-events:none}
.btn-ghost{
  width:100%; margin-top:9px;
  font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.16em;
  color:var(--dim); padding:11px; border:1px solid var(--line); border-radius:var(--r);
}
.btn-ghost:hover{color:var(--txt); border-color:#43434c}

.chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:11px}
.chip{
  font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.06em;
  padding:6px 10px; border:1px solid var(--line); border-radius:2px;
  color:var(--dim); text-transform:uppercase;
}
.chip:hover{border-color:var(--acid); color:var(--acid)}

.err{
  color:#ff6b60; font-size:15px; margin:14px 0 0;
  border-left:2px solid #ff6b60; padding-left:10px;
}

.share-txt{
  font-family:'Space Mono',monospace; font-size:12.5px; line-height:1.65;
  background:#0d0d0f; border:1px solid var(--line); border-radius:var(--r);
  padding:13px; margin:0; white-space:pre-wrap; word-break:break-word;
  color:#c8c8d0; max-height:190px; overflow-y:auto;
}

/* aviso flotante */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  z-index:900; background:var(--acid); color:#000;
  font-family:'Anton',sans-serif; font-size:14px; letter-spacing:.06em;
  padding:11px 18px; border-radius:var(--r); box-shadow:3px 3px 0 #000;
  animation:up .2s both; max-width:88vw; text-align:center;
}
.toast.bad{background:var(--f-1x1); color:#fff}

/* ===================== CANCELADO =====================
   Va al FINAL del fichero a propósito: las reglas de .card.past están
   repartidas en cuatro sitios (la chapa, el enlace, el bloque de pasados y
   las notas). Puestas aquí ganan siempre, sin pelearse con el orden. */

.when.cancel{
  color:#fff; background:var(--f-1x1); border-color:var(--f-1x1);
}

.card.cancel .poster img{filter:grayscale(1) brightness(.4) contrast(.9)}
.card.cancel .fmt{filter:grayscale(1); opacity:.55}
.card.cancel .name{color:#8d8d97; text-decoration:line-through; text-decoration-thickness:2px}
.card.cancel .notas{opacity:.55}

/* el aviso, que es lo que de verdad hay que leer */
.cancel-aviso{
  display:flex; flex-direction:column; gap:4px;
  border-left:3px solid var(--f-1x1);
  background:rgba(255,59,48,.09);
  padding:9px 11px; border-radius:0 var(--r) var(--r) 0;
}
.cancel-aviso b{
  font-family:'Anton',sans-serif; font-size:14px; letter-spacing:.08em;
  color:#ff6b60; font-weight:400;
}
.cancel-aviso span{font-size:15px; color:#c8c8d0; line-height:1.4}
.cancel-aviso i{
  font-family:'Space Mono',monospace; font-size:9.5px; letter-spacing:.1em;
  color:#6d6d7a; font-style:normal; text-transform:uppercase;
}

/* los que ya se habían marcado se quedan, pero apagados: la competi se cayó */
.card.cancel .who-chip{filter:grayscale(1); opacity:.5}

/* ===================== CUENTA DE INSTAGRAM EN EL RADAR =====================
   Ojo: .ficha-cuenta es la cuenta ATRÁS, no esta. Por eso se llama .ficha-ig. */
.ficha-ig{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:6px;
  font-family:'Anton',sans-serif; font-size:13px; letter-spacing:.05em;
  color:var(--acid); text-decoration:none;
  border:1.5px solid rgba(217,255,0,.42); border-radius:var(--r);
  padding:9px 13px 8px; margin-top:2px;
  transition:.13s;
}
.ficha-ig i{font-style:normal; font-size:12px; line-height:0}
.ficha-ig:hover{background:rgba(217,255,0,.1); border-color:var(--acid)}
.ficha-ig:active{transform:scale(.97)}
.ficha.ya .ficha-ig{color:var(--dim); border-color:var(--line)}

/* En una tarjeta cancelada, RECUPERAR es la salida: no puede ir tan apagado
   como el resto del pie, que es gris casi invisible a propósito. */
.card.cancel .card-foot button[data-act="cancel"]{color:#ff9d95}
.card.cancel .card-foot button[data-act="cancel"]:hover{color:#fff}
.card.cancel .notas{opacity:.7}