/* ============================================================
   Panel de Blackstar Club — mismo idioma visual que la web,
   pero pensado para trabajar: mucho contraste y nada de adornos.
   ============================================================ */

@font-face{
  font-family:'Anton';
  src:url('/tipos/anton-latin.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('/tipos/inter-latin.woff2') format('woff2');
  font-weight:300 800; font-style:normal; font-display:swap;
}

:root{
  --negro:#08080a;
  --humo:#101014;
  --carbon:#17171d;
  --alto:#1e1e26;
  --blanco:#f5f5f7;
  --gris:#9a9aa6;
  --flojo:#6b6b76;
  --magenta:#ff1e8e;
  --cian:#19e3ff;
  --acido:#c8ff2a;
  --rojo:#ff5252;
  --borde:rgba(245,245,247,.13);
  --display:'Anton',Impact,sans-serif;
  --texto:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{color-scheme:dark; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--negro); color:var(--blanco);
  font-family:var(--texto); font-size:15px; line-height:1.55;
  touch-action:manipulation;
}
img{display:block; max-width:100%; height:auto}
h1,h2,h3{margin:0; font-weight:400}
p{margin:0}
a{color:inherit; text-decoration:none}

:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline:2px solid var(--acido); outline-offset:2px;
}
::selection{background:var(--magenta); color:#fff}

/* ---------- botones ---------- */

.bot{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  min-height:42px; padding:.55rem 1.1rem;
  border:1px solid var(--borde); background:transparent; color:var(--blanco);
  font-family:var(--texto); font-size:.74rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.14em;
  cursor:pointer; white-space:nowrap;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.bot:hover{background:rgba(245,245,247,.08); border-color:var(--blanco)}
.bot:active{transform:translateY(1px)}
.bot[disabled]{opacity:.5; cursor:progress}
.bot-ppal{background:var(--magenta); border-color:var(--magenta); color:#fff}
.bot-ppal:hover{background:#fff; border-color:#fff; color:#000}
.bot-flojo{color:var(--gris)}
.bot-mas{margin-top:.9rem; color:var(--cian); border-color:rgba(25,227,255,.35)}
.bot-mas:hover{background:rgba(25,227,255,.1); border-color:var(--cian)}
.bot-quita{
  min-height:34px; padding:.3rem .7rem; font-size:.66rem;
  color:var(--flojo); border-color:transparent;
}
.bot-quita:hover{color:var(--rojo); border-color:var(--rojo); background:transparent}

/* ---------- campos ---------- */

.campo{display:flex; flex-direction:column; gap:.35rem; min-width:0; margin-bottom:1rem}
.campo label{
  font-size:.66rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.17em; color:var(--gris); cursor:pointer;
}
.campo input,
.campo textarea,
.campo select{
  width:100%; min-height:44px; padding:.6rem .75rem;
  background:#06060a; color:var(--blanco);
  border:1px solid var(--borde); border-radius:0;
  font-family:var(--texto); font-size:.95rem;
  transition:border-color .18s ease;
}
.campo textarea{min-height:88px; resize:vertical; line-height:1.5}
.campo input::placeholder,.campo textarea::placeholder{color:#4e4e59}
.campo input:hover,.campo textarea:hover,.campo select:hover{border-color:rgba(245,245,247,.28)}
.campo input:focus-visible,.campo textarea:focus-visible{border-color:var(--magenta); outline-offset:0}
.campo input[readonly]{color:var(--gris); background:#0b0b10}
.ayuda{font-size:.76rem; color:var(--flojo)}

.dos{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:0 1.1rem}

.palanca{
  display:flex; align-items:center; gap:.7rem;
  padding:.8rem 0 1.1rem; cursor:pointer;
  font-size:.9rem;
}
.palanca input{width:20px; height:20px; accent-color:var(--magenta); cursor:pointer}

/* ---------- entrada ---------- */

/* el atributo hidden manda sobre cualquier display de aqui */
[hidden]{display:none !important}

.entrada{
  min-height:100svh; display:grid; place-items:center;
  padding:1.5rem;
  background:
    radial-gradient(120% 80% at 50% 0%,rgba(255,30,142,.12),transparent 60%),
    var(--negro);
}
.entrada-caja{
  width:min(420px,100%);
  background:var(--humo); border:1px solid var(--borde);
  padding:clamp(1.5rem,5vw,2.5rem);
}
.entrada-logo{width:160px; margin-bottom:1.6rem}
.entrada-tit{font-family:var(--display); font-size:2rem; line-height:1.05; text-transform:uppercase}
.entrada-txt{color:var(--gris); font-size:.86rem; margin-bottom:1.6rem}
.entrada-mal{
  color:#ff8a8a; font-size:.85rem; margin-bottom:.9rem;
  border-left:2px solid var(--rojo); padding-left:.7rem;
}
.entrada-caja .bot{width:100%; min-height:48px}

/* ---------- cabecera ---------- */

.cabeza{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:.85rem clamp(1rem,3vw,2rem);
  padding-top:max(.85rem,env(safe-area-inset-top));
  background:rgba(8,8,10,.94); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--borde);
}
.cabeza-marca{display:flex; align-items:center; gap:.8rem}
.cabeza-marca img{width:118px}
.cabeza-etiqueta{
  font-size:.6rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--magenta); border:1px solid var(--magenta); padding:.15rem .45rem;
}
.cabeza-der{display:flex; align-items:center; gap:.5rem; margin-left:auto; flex-wrap:wrap}
.estado{font-size:.74rem; color:var(--gris); min-width:0}
.estado[data-bien="si"]{color:var(--acido)}
.estado[data-bien="no"]{color:#ff8a8a}

/* ---------- cuerpo ---------- */

.cuerpo{display:grid; grid-template-columns:220px minmax(0,1fr); gap:0; align-items:start}
.lado{
  position:sticky; top:72px;
  display:flex; flex-direction:column;
  padding:1.5rem 0 3rem;
  border-right:1px solid var(--borde);
  max-height:calc(100svh - 72px); overflow-y:auto;
}
.lado-enl{
  display:flex; align-items:baseline; gap:.6rem;
  padding:.6rem clamp(1rem,2vw,1.6rem);
  font-size:.82rem; color:var(--gris);
  border-left:2px solid transparent;
  transition:color .18s ease,background-color .18s ease,border-color .18s ease;
}
.lado-enl span{font-size:.62rem; font-weight:700; letter-spacing:.12em; color:var(--flojo)}
.lado-enl:hover{color:var(--blanco); background:rgba(245,245,247,.04); border-left-color:var(--magenta)}

.obra{padding:clamp(1rem,3vw,2.2rem) clamp(1rem,3vw,2.2rem) 7rem; display:grid; gap:1.4rem}

@media (max-width:900px){
  .cuerpo{grid-template-columns:1fr}
  .lado{
    position:static; max-height:none; flex-direction:row; overflow-x:auto;
    border-right:none; border-bottom:1px solid var(--borde); padding:.4rem 0;
  }
  .lado-enl{border-left:none; border-bottom:2px solid transparent; white-space:nowrap}
  .lado-enl span{display:none}
}

/* ---------- tarjetas ---------- */

.tarjeta{
  background:var(--humo); border:1px solid var(--borde);
  padding:clamp(1.1rem,3vw,2rem);
  scroll-margin-top:84px;
}
.tarjeta-tit{
  font-family:var(--display); font-size:clamp(1.4rem,3.5vw,2rem);
  line-height:1.08; text-transform:uppercase;
}
.tarjeta-pista{color:var(--gris); font-size:.85rem; margin:.3rem 0 1.5rem; max-width:62ch}
.sub{
  font-family:var(--display); font-size:1.2rem; text-transform:uppercase;
  margin:1.8rem 0 .9rem; padding-top:1.2rem; border-top:1px solid var(--borde);
}
.aviso-caja{
  margin-top:1rem; font-size:.8rem; color:var(--gris);
  border-left:2px solid var(--cian); padding-left:.8rem;
}

/* ---------- listas repetibles ---------- */

.lista{display:grid; gap:.6rem}
.fila{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.6rem;
  align-items:start;
  background:var(--carbon); border:1px solid var(--borde); padding:.7rem;
}
.fila .campo{margin-bottom:0}
.fila-dos{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,2fr); gap:.6rem; min-width:0}
@media (max-width:620px){ .fila-dos{grid-template-columns:1fr} }

.rejilla{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:.6rem}

/* ---------- subir ficheros ---------- */

.soltar{
  border:1px dashed rgba(245,245,247,.25);
  background:#06060a;
  padding:1.6rem 1rem; text-align:center; cursor:pointer;
  transition:border-color .18s ease,background-color .18s ease;
}
.soltar:hover,.soltar[data-encima="si"]{border-color:var(--magenta); background:rgba(255,30,142,.06)}
.soltar-fino{padding:1.1rem 1rem; margin-top:.4rem}
.soltar strong{font-size:.9rem}

/* los logos que ya salen en «Con quien trabajamos» por ser de un evento
   de la casa: aqui solo se ensenan, no se tocan */
.marcas-casa{
  display:flex; flex-wrap:wrap; gap:.5rem; margin:.5rem 0 .7rem;
}
.marca-casa{
  display:grid; place-items:center;
  width:116px; height:64px; padding:.5rem;
  background:#06060a; border:1px solid var(--borde);
}
.marca-casa img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; opacity:.85}

/* el cuadro de echar ficheros dentro de un evento: se le suelta
   encima o se pulsa, las dos cosas valen */
.soltar-cuadro{
  display:grid; place-content:center; gap:.3rem;
  margin-top:.6rem; padding:1rem .8rem; max-width:320px; min-height:104px;
}
.soltar-cuadro p{margin:0}
.soltar-cuadro:focus-visible{outline:2px solid var(--magenta); outline-offset:2px}
.cuadro-logo{max-width:none; min-height:0; padding:.5rem; margin-top:0}
.cuadro-logo img{border:0; padding:0; margin-bottom:.4rem}
.cuadro-logo .vacio{border:0; background:none; aspect-ratio:3/2}
.residente-foto[data-encima="si"]{border-color:var(--magenta); background:rgba(255,30,142,.12)}

.escucha{width:100%; margin-top:.9rem; filter:invert(1) hue-rotate(180deg) saturate(.6)}

/* ---------- galería de fotos ---------- */

.galeria{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));
  gap:.8rem; margin-top:1.2rem;
}
.foto{background:var(--carbon); border:1px solid var(--borde); display:flex; flex-direction:column}
.foto img{width:100%; aspect-ratio:4/3; object-fit:cover; background:#000}
.foto .campo{margin:0; padding:.55rem}
.foto .campo input{min-height:38px; font-size:.85rem}
.foto-pie{display:flex; justify-content:space-between; align-items:center; padding:0 .55rem .55rem; gap:.4rem}
.foto-orden{display:flex; gap:.2rem}
.foto-orden button{
  width:30px; height:30px; display:grid; place-items:center;
  background:none; border:1px solid var(--borde); color:var(--gris); cursor:pointer;
  font-size:.8rem;
}
.foto-orden button:hover{color:var(--blanco); border-color:var(--blanco)}

/* ---------- eventos ---------- */

.eventos{display:grid; gap:.9rem}
.evento{
  background:var(--carbon); border:1px solid var(--borde);
  padding:.9rem;
  display:grid; grid-template-columns:150px minmax(0,1fr); gap:1rem;
}
.evento[data-destacada="si"]{border-color:var(--magenta)}
.evento[data-oculta="si"]{opacity:.55}
.evento-flyer{display:flex; flex-direction:column; gap:.4rem}
.evento-flyer img{
  width:100%; aspect-ratio:1350/1920; object-fit:contain;
  background:#06060a; border:1px solid var(--borde);
}
.evento-flyer .vacio{
  width:100%; aspect-ratio:1350/1920; display:grid; place-items:center;
  background:#06060a; border:1px dashed rgba(245,245,247,.2);
  color:var(--flojo); font-size:.72rem; text-align:center; cursor:pointer; padding:.5rem;
}
.evento-datos{display:grid; gap:0 .8rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr)); min-width:0}
.evento-datos .campo{margin-bottom:.7rem}
.evento-ancho{grid-column:1/-1}
.evento-pie{
  grid-column:1/-1; display:flex; justify-content:space-between; align-items:center;
  gap:.8rem; flex-wrap:wrap; border-top:1px solid var(--borde); padding-top:.7rem;
}
.evento-marcas{display:flex; gap:1.1rem; flex-wrap:wrap}
.evento-marcas label{display:flex; align-items:center; gap:.4rem; font-size:.78rem; color:var(--gris); cursor:pointer}
.evento-marcas input{width:17px; height:17px; accent-color:var(--magenta); cursor:pointer}
@media (max-width:620px){
  .evento{grid-template-columns:1fr}
  .evento-flyer img,.evento-flyer .vacio{aspect-ratio:16/9}
}

/* ---------- eventos de la casa ---------- */

.fiestas{display:grid; gap:.9rem; margin-top:1.2rem}
.fiesta-ed{
  background:var(--carbon); border:1px solid var(--borde);
  padding:.9rem;
  display:grid; grid-template-columns:170px minmax(0,1fr); gap:1rem;
}
.fiesta-ed[data-pagina="si"]{border-left:3px solid var(--magenta)}
.fiesta-ed-logo{display:flex; flex-direction:column; gap:.4rem}
.fiesta-ed-logo img{
  width:100%; aspect-ratio:3/2; object-fit:contain;
  background:#06060a; border:1px solid var(--borde); padding:.6rem;
}
.fiesta-ed-logo .vacio{
  width:100%; aspect-ratio:3/2; display:grid; place-items:center;
  background:#06060a; border:1px dashed rgba(245,245,247,.2);
  color:var(--flojo); font-size:.72rem; text-align:center; cursor:pointer; padding:.5rem;
}
.fiesta-ed-datos{
  display:grid; gap:0 .8rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));
  min-width:0;
}
.fiesta-ed-datos .campo{margin-bottom:.7rem}
.fiesta-ancho{grid-column:1/-1}
.fiesta-sub{
  font-size:.74rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.14em; color:var(--gris);
  margin:.4rem 0 .5rem;
}
.fiesta-sub .ayuda{display:inline; text-transform:none; letter-spacing:0; font-weight:400}

/* cada residente: su foto redonda a la izquierda y su nombre */
.residentes{display:grid; gap:.6rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

/* «esta noche se repite», dentro de la ficha de cada fecha */
.evento-repe{border-top:1px solid var(--borde); padding-top:.8rem}
.repe-llave{display:flex; align-items:center; gap:.5rem; cursor:pointer; font-size:.85rem}
.repe-caja{margin-top:.8rem; background:var(--negro); border:1px solid var(--borde); padding:.9rem}
.repe-caja .ayuda{margin-top:.6rem}
.repe-dicho{margin-top:.7rem}
.repe-cuantas{font-size:.8rem; color:var(--blanco); font-weight:700}
.repe-lista{
  list-style:none; margin:.5rem 0 .7rem; padding:0;
  display:flex; flex-wrap:wrap; gap:.35rem;
}
.repe-lista li{
  border:1px solid var(--borde); background:var(--humo);
  padding:.25rem .55rem; font-size:.75rem; text-transform:uppercase; letter-spacing:.06em;
}
.residente-ed{
  display:grid; grid-template-columns:72px minmax(0,1fr); gap:.7rem;
  align-items:center; background:var(--humo); border:1px solid var(--borde); padding:.6rem;
}
.residente-foto{
  width:72px; height:72px; border-radius:50%; overflow:hidden; cursor:pointer;
  background:var(--negro); border:1px solid var(--borde);
  display:flex; align-items:center; justify-content:center;
}
.residente-foto img{width:100%; height:100%; object-fit:cover; display:block}
.residente-foto .vacio{font-size:.6rem; text-align:center; line-height:1.2; color:var(--gris)}
.residente-foto:hover{border-color:var(--magenta)}
.residente-ed .campo{margin-bottom:0}
.residente-botones{grid-column:1 / -1; display:flex; gap:.4rem; flex-wrap:wrap}
.fiesta-pagina{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .9rem;
  border:1px solid var(--borde); background:var(--humo);
  padding:.6rem .7rem; margin-bottom:.8rem;
}
.fiesta-llave{display:flex; align-items:center; gap:.5rem; font-size:.82rem; cursor:pointer}
.fiesta-llave input{width:17px; height:17px; accent-color:var(--magenta); cursor:pointer}
.fiesta-ver{color:var(--magenta); font-size:.78rem; font-weight:600}
.fiesta-ver:hover{color:var(--blanco)}
.fiesta-dir{color:var(--flojo); font-size:.74rem; font-family:ui-monospace,Consolas,monospace}
.fiesta-pie{
  grid-column:1/-1; display:flex; justify-content:space-between; align-items:center;
  gap:.8rem; flex-wrap:wrap; border-top:1px solid var(--borde); padding-top:.7rem;
}
/* quien monta la noche, en el calendario */
.evento-promo{display:flex; flex-wrap:wrap; gap:.4rem; align-items:center}
.evento-promo select{flex:1 1 11rem; min-width:0}
.evento-promo input{flex:1 1 11rem; min-width:0}
@media (max-width:620px){
  .fiesta-ed{grid-template-columns:1fr}
}

/* ---------- barrita de guardar ---------- */

.barrita{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.8rem clamp(1rem,3vw,2rem);
  padding-bottom:max(.8rem,env(safe-area-inset-bottom));
  background:rgba(255,30,142,.14); backdrop-filter:blur(12px);
  border-top:1px solid var(--magenta);
  font-size:.82rem;
}
.barrita[hidden]{display:none}

.cargando{
  position:fixed; inset:0; display:grid; place-items:center;
  background:var(--negro); color:var(--gris); font-size:.85rem;
  letter-spacing:.1em; text-transform:uppercase; z-index:50;
}
.cargando[hidden]{display:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.001ms !important; animation-duration:.001ms !important}
}

/* ---------- consultas recibidas ---------- */

.consulta{
  background:var(--carbon); border:1px solid var(--borde);
  padding:.9rem 1rem; margin-bottom:.6rem;
}
.consulta-cab{
  display:flex; justify-content:space-between; gap:.8rem; flex-wrap:wrap;
  padding-bottom:.4rem; margin-bottom:.5rem; border-bottom:1px solid var(--borde);
}
.consulta-cab strong{font-size:1rem}
.consulta-cab span{font-size:.74rem; color:var(--flojo); font-variant-numeric:tabular-nums}
.consulta-datos{font-size:.85rem; color:var(--gris)}
.consulta-txt{margin-top:.6rem; white-space:pre-wrap; font-size:.9rem}
.enl{color:var(--cian); border-bottom:1px solid rgba(25,227,255,.35)}
.enl:hover{border-color:var(--cian)}

/* ---------- repetir fechas ---------- */

.repe{background:var(--carbon); border:1px solid var(--borde); padding:1rem}
.repe fieldset{border:none; margin:0 0 1rem; padding:0}
.repe legend{
  font-size:.66rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.17em; color:var(--gris); padding:0 0 .5rem;
}
.dias{display:flex; flex-wrap:wrap; gap:.4rem}
.dias label{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:46px; min-height:42px; padding:0 .5rem;
  border:1px solid var(--borde); cursor:pointer;
  font-size:.78rem; font-weight:700; color:var(--gris);
  transition:border-color .18s ease,color .18s ease,background-color .18s ease;
}
.dias label:hover{color:var(--blanco); border-color:var(--blanco)}
.dias input{position:absolute; opacity:0; width:0; height:0}
.dias input:focus-visible + span{outline:2px solid var(--acido); outline-offset:3px}
.dias label:has(input:checked){background:var(--magenta); border-color:var(--magenta); color:#fff}
.repe-dicho{margin-top:.8rem; font-size:.85rem; color:var(--acido)}

.foto-marca img{
  aspect-ratio:3/1.6; object-fit:contain;
  background:#06060a; padding:.8rem;
}

/* ---------- avisos ---------- */

.chapa{
  margin-left:auto; min-width:1.35rem; padding:.05rem .32rem;
  border-radius:999px; background:var(--alto); color:var(--blanco);
  font-size:.62rem; font-weight:700; text-align:center;
  font-variant-numeric:tabular-nums; line-height:1.5;
}
.chapa[data-grave="si"]{background:var(--rojo); color:#1a0505}

.aviso-dia{
  margin:1.1rem 0 .35rem; font-size:.68rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--flojo);
}
.aviso-dia:first-child{margin-top:.6rem}

.aviso-fila{
  display:grid; grid-template-columns:4.2rem minmax(0,1fr) minmax(0,1.1fr);
  gap:.2rem .8rem; align-items:baseline;
  padding:.5rem .7rem; margin:0 0 2px;
  background:var(--carbon); border-left:2px solid var(--borde);
  font-size:.82rem;
}
.aviso-fila[data-grave="si"]{border-left-color:var(--rojo); background:rgba(255,82,82,.07)}
.aviso-fila[data-nuevo="si"] .aviso-que{font-weight:600}
.aviso-hora{color:var(--flojo); font-variant-numeric:tabular-nums; font-size:.76rem}
.aviso-que em{color:var(--rojo); font-style:normal; font-size:.76rem}
.aviso-mas{color:var(--gris); font-size:.76rem; word-break:break-word}

@media (max-width:700px){
  .aviso-fila{grid-template-columns:4.2rem minmax(0,1fr)}
  .aviso-mas{grid-column:2}
}