/* ============================================================
   SHOWLY · Estética del logo: negro, blanco y verde lima.
   ============================================================ */
:root{
  --bg:#0a0a0a;
  --bg2:#101010;
  --panel:#161616;
  --panel2:#1d1d1d;
  --lima:#c8ff00;
  --lima-dim:#a3cf00;
  --blanco:#f4f4f0;
  --gris:#9b9b93;
  --line:#282828;
  --danger:#e0563f;
  --danger-soft:#2e1712;
  --shadow:0 12px 34px rgba(0,0,0,.55);
  --r:16px;

  /* Puente para el cancionero heredado: usa estos nombres (venían de la paleta
     verde oliva de Tributeros). Apuntándolos al lima de Showly, todo el
     repertorio, el setlist y el modo escenario se pintan con esta identidad
     sin tocar una línea de cancionero.css. */
  --olive:#6f8c12;
  --olive-lite:var(--lima);
  --olive-soft:#2d3a0c;
  --cream:var(--blanco);
  --cream-dim:var(--gris);
  --cerati:var(--lima);
  --soda:#c9b458;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:radial-gradient(900px 500px at 50% -240px, rgba(200,255,0,.10), transparent 60%), var(--bg);
  background-attachment:fixed;
  color:var(--blanco);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  min-height:100vh;
  -webkit-tap-highlight-color:transparent;
}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:'Oswald',sans-serif;font-weight:600;letter-spacing:.02em;margin:0}
code{font-family:ui-monospace,Consolas,monospace;font-size:.9em;background:var(--panel2);padding:1px 5px;border-radius:5px;color:var(--lima-dim)}
.wrap{max-width:1000px;margin:0 auto;padding:20px 16px 70px}
.muted{color:var(--gris);font-size:14px;margin:6px 0 0}
.mini{font-size:12px;color:var(--gris)}
.group-h{font-family:'Oswald';text-transform:uppercase;letter-spacing:.06em;font-size:14px;color:var(--lima);margin:22px 0 10px}

/* ---------- cabecera ---------- */
.top{display:flex;align-items:center;gap:16px;padding:12px 18px;border-bottom:1px solid var(--line);background:rgba(10,10,10,.92);backdrop-filter:blur(8px);position:sticky;top:0;z-index:50;flex-wrap:wrap}
.brand img{height:30px;display:block}
.nav{display:flex;gap:4px;flex-wrap:wrap}
.nav a{padding:7px 13px;border-radius:9px;font-family:'Oswald';text-transform:uppercase;font-size:13px;letter-spacing:.04em;color:var(--gris)}
.nav a:hover{color:var(--blanco)}
.nav a.active{background:var(--lima);color:#111}
.who{margin-left:auto;display:flex;align-items:center;gap:10px}
.who select{background:var(--panel);border:1px solid var(--line);color:var(--blanco);border-radius:9px;padding:7px 10px;font:inherit;font-size:13px}
.avatar{width:32px;height:32px;border-radius:50%;border:2px solid var(--lima)}

/* ---------- portada / acceso ---------- */
.portada{max-width:520px;margin:8vh auto;text-align:center}
.logo-grande{width:100%;max-width:420px;margin-bottom:6px}
.claim{color:var(--gris);font-size:16px;margin:0 0 30px}
.btn-google{display:inline-flex;align-items:center;gap:12px;background:#fff;color:#1f1f1f;border:none;border-radius:12px;padding:13px 22px;font-family:'Oswald';text-transform:uppercase;letter-spacing:.04em;font-size:15px;cursor:pointer;box-shadow:var(--shadow)}
.btn-google:hover{background:#eee}
.btn-google:disabled{opacity:.6;cursor:default}
.portada-nota{margin-top:22px;line-height:1.7}
.expulsado{text-align:left;margin:0 0 26px}
.expulsado p{margin:8px 0 0;font-size:13.5px;color:var(--gris)}
.expulsado b{color:var(--blanco)}

/* ---------- botones ---------- */
.btn{font-family:'Oswald';text-transform:uppercase;letter-spacing:.04em;font-size:13px;border:1px solid transparent;border-radius:10px;padding:10px 16px;cursor:pointer;transition:.15s;display:inline-block}
.btn-primary{background:var(--lima);color:#111;font-weight:600}
.btn-primary:hover{background:#d8ff3a}
.btn-ghost{background:var(--panel);color:var(--blanco);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--lima-dim)}
.btn-danger{background:var(--danger-soft);color:#f0b3a6;border-color:#5a2a20}
.btn.sm{padding:6px 11px;font-size:12px}
.btn-round{width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:var(--panel);color:var(--blanco);cursor:pointer;font-size:14px;line-height:1}
.btn-round:hover{border-color:var(--lima-dim)}
.qr-chip{font-size:12px;padding:6px 12px;border-radius:20px;border:1px solid var(--line);background:var(--panel);color:var(--gris);cursor:pointer;font-family:'Oswald';text-transform:uppercase}
.qr-chip:hover{border-color:var(--lima);color:var(--blanco)}
.volver{font-family:'Oswald';text-transform:uppercase;font-size:12px;letter-spacing:.06em;color:var(--gris)}
.volver:hover{color:var(--lima)}
/* el de la portada del espacio: va suelto encima del titulo, y se come el
   margen de arriba de .page-head para no separar el nombre del grupo */
.volver-esp{display:inline-block;margin:18px 0 -14px}

/* ---------- cabecera de página ---------- */
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin:22px 0 18px;flex-wrap:wrap}
.page-head h2{font-family:'Anton';font-size:32px;text-transform:uppercase;letter-spacing:.01em}
.head-actions{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- tarjetas ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--shadow)}
.card h3{font-family:'Oswald';text-transform:uppercase;letter-spacing:.03em;font-size:16px}
.card .big{font-family:'Anton';font-size:40px;color:var(--lima);margin:6px 0 0;line-height:1}
.card.link:hover,.espacio-card:hover{border-color:var(--lima);transform:translateY(-2px);transition:.15s}
.espacio-card{text-align:left;cursor:pointer;font:inherit;color:inherit;width:100%}
.esp-tipo{font-family:'Oswald';text-transform:uppercase;font-size:10px;letter-spacing:.1em;color:var(--lima);margin-bottom:4px}
.vacio-card{text-align:center;padding:40px 24px}
.vacio-card .btn{margin-top:14px}
.next-card{margin-top:16px;border-style:dashed}
.plan-tag{display:inline-block;margin-top:10px;font-family:'Oswald';text-transform:uppercase;font-size:10px;letter-spacing:.05em;padding:3px 10px;border-radius:20px;border:1px solid var(--line);color:var(--gris)}
.plan-tag.activo{background:var(--lima);color:#111;border-color:var(--lima)}
.plan-tag.prueba{border-color:var(--lima-dim);color:var(--lima)}
.plan-tag.caducado{border-color:#5a2a20;color:#f0b3a6}

/* ---------- planes, topes y uso ---------- */
.grid-2{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.nota-cupo a{color:var(--lima);margin-left:6px}
.uso-card h3{margin-bottom:12px}
.uso-barra{display:block;height:8px;border-radius:20px;background:var(--fondo2,#151515);border:1px solid var(--line);overflow:hidden}
.uso-barra i{display:block;height:100%;background:var(--lima);transition:width .3s}
.uso-barra.casi i{background:var(--soda,#c9b458)}
.uso-barra.lleno i{background:var(--danger)}
.uso-num{display:block;margin-top:6px;font-family:'Oswald';font-size:13px;color:var(--gris)}
.uso-libre{font-family:'Anton';font-size:22px;color:var(--lima);text-transform:uppercase}
.planes-grid{align-items:stretch}
.plan-card{position:relative;display:flex;flex-direction:column;gap:8px}
.plan-card.plan-actual{border-color:var(--lima)}
.plan-badge{position:absolute;top:-9px;right:14px;background:var(--lima);color:#111;font-family:'Oswald';text-transform:uppercase;font-size:10px;letter-spacing:.06em;padding:2px 9px;border-radius:20px}
.plan-precio{font-family:'Anton';font-size:34px;color:var(--lima);line-height:1;margin:4px 0}
.plan-precio small{font-family:'Oswald';font-size:12px;color:var(--gris);text-transform:uppercase;margin-left:5px}
.plan-tramos{color:var(--gris);line-height:1.7}
.plan-lista{list-style:none;padding:0;margin:6px 0 0;display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--gris)}
.plan-card .plan-lista{margin-top:auto;padding-top:10px;border-top:1px solid var(--line)}
.plan-lista b{color:var(--blanco)}
.plan-pago{margin-top:16px}
.plan-pago .head-actions{margin:12px 0 10px}
.nivel-tag{font-family:'Oswald';text-transform:uppercase;font-size:10px;letter-spacing:.05em;padding:3px 9px;border-radius:20px;border:1px solid var(--line);color:var(--gris);white-space:nowrap}
.nivel-tag.nivel-banda{border-color:var(--lima-dim);color:var(--lima)}
.nivel-tag.nivel-pro{background:var(--lima);color:#111;border-color:var(--lima)}
.equipo-cupo{display:flex;gap:16px;flex-wrap:wrap;align-items:center;font-family:'Oswald';font-size:13px;color:var(--gris);margin:0 0 12px}
.equipo-cupo b{color:var(--blanco)}
.equipo-cupo a{color:var(--lima);text-transform:uppercase;letter-spacing:.05em}
.rol-sel{background:var(--panel);color:var(--blanco);border:1px solid var(--line);border-radius:20px;padding:5px 10px;font-family:'Oswald';font-size:12px;text-transform:uppercase;letter-spacing:.04em;cursor:pointer}
.rol-sel:hover{border-color:var(--lima)}
.ayuda-roles{margin-top:16px}
.ayuda-roles .plan-lista{font-size:13px;line-height:1.6}
.note.ok{border-left-color:var(--lima)}

/* ---------- listas ---------- */
.lista{display:flex;flex-direction:column;gap:8px}
.fila{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.fila-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.fila-main b{font-family:'Oswald';font-size:15px}
.fila-main small{color:var(--gris);font-size:12px}
.punto{width:12px;height:12px;border-radius:50%;background:var(--c,var(--lima));flex-shrink:0}
.rol-tag{font-family:'Oswald';text-transform:uppercase;font-size:10px;letter-spacing:.05em;color:var(--gris);border:1px solid var(--line);border-radius:20px;padding:2px 9px}
.show-fecha{width:46px;text-align:center;flex-shrink:0}
.show-fecha b{display:block;font-family:'Anton';font-size:22px;color:var(--lima);line-height:1}
.show-fecha span{font-family:'Oswald';text-transform:uppercase;font-size:10px;color:var(--gris)}
.admin-fila .plan-tag{margin:0}

/* ---------- avisos ---------- */
.note{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--lima);border-radius:10px;padding:12px 14px;font-size:14px;margin:14px 0}
.note.bad{border-left-color:var(--danger);color:#f0b3a6}
.cargando{display:flex;align-items:center;gap:10px;justify-content:center;padding:60px 0;color:var(--gris);font-family:'Oswald';text-transform:uppercase;letter-spacing:.06em}
.spin{width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--lima);border-radius:50%;animation:g .8s linear infinite}
@keyframes g{to{transform:rotate(360deg)}}

/* ---------- formularios ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:flex;flex-direction:column;gap:5px}
.field.wide{grid-column:1/-1}
.field>span{font-family:'Oswald';text-transform:uppercase;font-size:11px;letter-spacing:.05em;color:var(--gris)}
.field input,.field select,.field textarea{background:var(--panel2);border:1px solid var(--line);border-radius:9px;color:var(--blanco);padding:10px 12px;font:inherit;font-size:14px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--lima)}
.segmented{display:inline-flex;background:var(--panel2);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg{background:none;border:none;color:var(--gris);padding:9px 16px;font-family:'Oswald';text-transform:uppercase;font-size:12px;cursor:pointer}
.seg.on{background:var(--lima);color:#111}
.ens-quick{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}

/* ---------- modal ---------- */
.modal-back{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.72);backdrop-filter:blur(4px);display:flex;align-items:flex-start;justify-content:center;padding:24px 14px;overflow-y:auto}
.modal{background:var(--bg2);border:1px solid var(--line);border-radius:18px;width:100%;max-width:480px;box-shadow:var(--shadow)}
.modal-wide{max-width:760px}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}
.modal-head h3{font-family:'Oswald';text-transform:uppercase;font-size:16px}
.modal-x{background:none;border:none;color:var(--gris);font-size:26px;line-height:1;cursor:pointer}
.modal-body{padding:18px}
.modal-foot{display:flex;justify-content:flex-end;gap:9px;padding:14px 18px;border-top:1px solid var(--line)}

/* ---------- toast ---------- */
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--lima);color:#111;font-family:'Oswald';text-transform:uppercase;font-size:13px;padding:11px 20px;border-radius:30px;opacity:0;pointer-events:none;transition:.2s;z-index:300;box-shadow:var(--shadow)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- barra del proyecto (secciones del cancionero) ---------- */
.proy-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 16px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.proy-bar .volver{flex-shrink:0}
.proy-nombre{font-family:'Anton';font-size:20px;text-transform:uppercase;letter-spacing:.01em;flex-shrink:0}
.proy-nav{display:flex;gap:3px;flex-wrap:wrap}
.proy-nav a{padding:6px 12px;border-radius:8px;font-family:'Oswald';text-transform:uppercase;font-size:12.5px;letter-spacing:.04em;color:var(--gris)}
.proy-nav a:hover{color:var(--blanco);background:var(--panel)}
.proy-nav a.active{background:var(--lima);color:#111}
.proy-acts{margin-left:auto;display:flex;align-items:center;gap:8px}
.soy{display:flex;align-items:center;gap:7px;font-family:'Oswald';text-transform:uppercase;font-size:11px;letter-spacing:.05em;color:var(--gris)}
.soy select{background:var(--panel);border:1px solid var(--line);color:var(--blanco);border-radius:8px;padding:6px 9px;font:inherit;font-size:12px}
@media(max-width:640px){
  .proy-bar{gap:8px}
  .proy-nombre{font-size:17px}
  .proy-nav{order:3;width:100%}
  .proy-acts{margin-left:0}
}

/* ---------- aviso de sin conexión ---------- */
#sin-red{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:250;display:flex;align-items:center;gap:9px;background:rgba(22,22,22,.97);border:1px solid #6a5a12;color:#e8d98a;font-family:'Oswald';text-transform:uppercase;font-size:11px;letter-spacing:.04em;padding:9px 16px;border-radius:30px;box-shadow:var(--shadow);max-width:calc(100vw - 24px);text-align:center}
.sr-punto{width:9px;height:9px;border-radius:50%;background:#e8c14a;flex-shrink:0;animation:srp 1.6s infinite}

/* ---------- tarjeta de instalar la app ---------- */
#btn-instalar{
  position:fixed;z-index:240;
  right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));
  width:min(360px,calc(100vw - 32px));
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);
  opacity:0;transform:translateY(14px);
  transition:opacity .25s ease,transform .25s ease;
}
#btn-instalar.show{opacity:1;transform:none}
.ins-icono{width:40px;height:40px;border-radius:10px;flex-shrink:0;background:#000}
.ins-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.ins-txt strong{font-family:'Oswald';text-transform:uppercase;letter-spacing:.04em;font-size:14px;color:var(--blanco);font-weight:600}
.ins-txt span{font-size:11.5px;line-height:1.3;color:var(--gris)}
.ins-ok{
  flex-shrink:0;border:0;cursor:pointer;
  background:var(--lima);color:#111;
  font-family:'Oswald';text-transform:uppercase;letter-spacing:.04em;font-size:13px;
  padding:9px 15px;border-radius:10px;
}
.ins-ok:hover{background:var(--lima-dim)}
.ins-no{
  position:absolute;top:-9px;right:-9px;
  width:24px;height:24px;line-height:1;padding:0;
  border:1px solid var(--line);border-radius:50%;
  background:var(--panel2);color:var(--gris);
  font-size:15px;cursor:pointer;
}
.ins-no:hover{color:var(--blanco);border-color:#3a3a3a}
@media(max-width:520px){
  #btn-instalar{left:16px;right:16px;width:auto}
  .ins-ok{padding:9px 13px;font-size:12px}
}
@keyframes srp{0%,100%{opacity:1}50%{opacity:.25}}

/* ---------- pie ---------- */
.foot{text-align:center;color:#555;font-size:11px;padding:26px 16px;border-top:1px solid var(--line);font-family:'Oswald';text-transform:uppercase;letter-spacing:.08em;
      display:flex;flex-direction:column;align-items:center;gap:10px}
.foot-legal{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px}
.foot-legal a{color:#777;text-decoration:none;border-bottom:1px solid transparent}
.foot-legal a:hover{color:var(--lima);border-bottom-color:currentColor}
.foot-marca{color:#3d3d3d;font-size:10px;letter-spacing:.12em}

@media(max-width:640px){
  .wrap{padding:14px 12px 60px}
  .page-head h2{font-size:26px}
  .form-grid{grid-template-columns:1fr}
  .top{gap:10px;padding:10px 12px}
  .nav{order:3;width:100%}
  .who{margin-left:auto}
}

/* ---------- Entradas y cuentas ---------- */
.tq-resumen{margin-bottom:6px}
.tq-dato .big{font-size:30px}
.tq-dato.tq-ok .big{color:var(--lima)}
.tq-dato.tq-mal .big{color:var(--danger)}
.tq-aforo{margin:6px 0 14px}
.tq-barra{height:10px;border-radius:20px;border:1px solid var(--line);overflow:hidden;background:#141414}
.tq-barra i{display:block;height:100%;background:var(--lima)}
.tq-aforo .mini{margin-top:6px}
.tq-equilibrio{margin:10px 0 20px}
.group-h .gh-acts{float:right;display:flex;gap:6px}
.tq-n{font-family:'Anton';font-size:20px;min-width:34px;text-align:right}
/* el 1 se ve siempre (antes se omitía y parecía que faltaba el dato). Todos los
   números de las filas van en blanco: el color queda para el total de la lista,
   que es lo único que hay que distinguir */
.tq-n.una,.tq-n.varias{color:var(--blanco)}
/* el total de la lista, al final y grande: es lo que se apunta en la puerta */
.tq-lista-pie{display:flex;align-items:baseline;justify-content:flex-end;gap:7px;margin:10px 4px 0;
  font-family:'Oswald';text-transform:uppercase;font-size:11px;letter-spacing:.06em;color:var(--gris)}
.tq-lista-pie b{font-family:'Anton';font-size:30px;line-height:1;color:var(--c,var(--lima));letter-spacing:0}
.tq-pie-imp{margin-right:auto;font-size:13px;color:var(--c,var(--lima));text-transform:none;letter-spacing:0}
.tq-imp{font-family:'Oswald';font-size:15px;min-width:92px;text-align:right;white-space:nowrap}
.tq-imp.gasto{color:#f0b3a6}
.tq-imp.ingreso{color:var(--lima)}
.tq-mov .tq-punto{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.tq-mov.gasto .tq-punto{background:var(--danger)}
.tq-mov.ingreso .tq-punto{background:var(--lima)}
.tq-detalle{margin-top:10px}
.tq-detalle summary{cursor:pointer;color:var(--gris);font-family:'Oswald';font-size:13px;text-transform:uppercase;letter-spacing:.04em}
.tq-detalle .lista{margin-top:10px}
.tq-explica{margin:0 0 12px;line-height:1.6}
.tq-partes{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--gris);font-family:'Oswald';text-transform:uppercase}
.tq-partes input{width:74px;background:#141414;color:var(--blanco);border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-family:'Oswald';text-align:right}
.tq-reparto.pagado{opacity:.62}
.tq-pagado.on{background:var(--lima);color:#111;border-color:var(--lima)}
.tq-sobra{color:var(--soda,#c9b458)}
.tq-falta{color:var(--danger)}
.tq-porquien{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.tq-porquien .mchip.pasado{border-color:var(--danger);color:#f0b3a6}
.tq-check{width:30px;height:30px;flex-shrink:0;border-radius:8px;border:1.5px solid var(--line);background:transparent;color:#111;
  font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.tq-check.on{background:var(--c,var(--lima));border-color:var(--c,var(--lima))}
/* a medias: han llegado algunos de la mesa, no todos */
.tq-check.parcial{border-color:var(--c,var(--lima));color:var(--c,var(--lima));font-family:'Anton';font-size:15px}
.tq-menos{width:30px;height:30px;flex-shrink:0;font-size:16px}
.tq-inv.a-medias{border-color:var(--c,var(--lima))}
.tq-n i{font-style:normal;color:var(--gris);font-size:15px}
.tq-inv.entro .fila-main b{text-decoration:line-through;opacity:.6}
.tq-edit-inv,.tq-edit-venta{cursor:pointer}
.tq-devuelta .tq-imp,.tq-devuelta .fila-main b{color:var(--danger)}
.tq-quitar-venta{font-size:18px;line-height:1}
/* el número que de verdad se mira: cuánta gente va a entrar en total */
.tq-asistentes{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--lima);
  border-radius:10px;padding:11px 14px;margin:0 0 18px;font-size:13px;color:var(--gris)}
.tq-asistentes b{font-family:'Anton';font-size:26px;color:var(--lima);margin-right:6px;vertical-align:-2px}
/* cada lista de la puerta (invitados, 2x1, mesas…) es su propio bloque, con su
   color: el título en blanco se confundía con el de la lista de al lado */
.tq-lista-bloque{border-left:3px solid var(--c,var(--lima));padding:2px 0 2px 14px;margin-bottom:22px}
.tq-lista-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:2px}
.tq-lista-h h4{font-family:'Oswald';text-transform:uppercase;font-size:16px;letter-spacing:.04em;color:var(--c,var(--lima))}
.tq-lista-acts{display:flex;align-items:center;gap:10px;margin-left:auto}
/* la cabecera entera abre y cierra la lista */
.tq-plegar{display:flex;align-items:center;gap:8px;background:none;border:0;padding:4px 0;cursor:pointer;color:inherit;font:inherit;text-align:left}
.tq-flecha{color:var(--c,var(--lima));font-size:13px;line-height:1;transition:transform .15s}
.tq-lista-bloque.plegada .tq-flecha{transform:rotate(-90deg)}
.tq-lista-bloque.plegada .tq-lista-cuerpo{display:none}
.tq-lista-bloque.plegada{margin-bottom:12px}
.tq-editar-lista{font-size:13px}
.tq-tag{background:var(--c,var(--lima));color:#111;border-radius:6px;padding:2px 7px;font-size:10px;letter-spacing:.06em;vertical-align:middle}
.tq-tag.hueco{background:transparent;color:var(--gris);border:1px solid var(--line)}
.tq-listas-edit{display:flex;flex-direction:column;gap:10px;margin:8px 0 12px}
.tq-lista-fila{border:1px solid var(--line);border-left:3px solid var(--c,var(--lima));border-radius:12px;
  padding:10px 12px;display:flex;flex-direction:column;gap:10px}
.l-colores{display:flex;gap:7px;flex-wrap:wrap}
.l-color{width:22px;height:22px;border-radius:50%;background:var(--c);border:2px solid transparent;cursor:pointer;padding:0}
.l-color.on{border-color:var(--blanco);box-shadow:0 0 0 2px #000 inset}
.tq-lista-arriba{display:flex;gap:8px;align-items:center}
.tq-lista-arriba .l-nombre{flex:1;background:#141414;color:var(--blanco);border:1px solid var(--line);border-radius:9px;
  padding:10px 12px;font-family:'Oswald';font-size:15px}
.tq-lista-abajo{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.l-campo{flex:0 0 130px}
.l-campo input{text-align:right}
.l-campo input:disabled{opacity:.35}
.l-cobra{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--gris);font-family:'Oswald';
  text-transform:uppercase;white-space:nowrap;padding-bottom:11px;cursor:pointer}
.l-fija{opacity:.35;display:inline-flex;align-items:center;justify-content:center;font-size:12px}
.l-nosuma{padding:0;border-top:1px solid var(--line);padding-top:9px}
.tq-lista-fila.no-suma{border-left-color:var(--line)}
.tq-lista-fila.no-suma .tq-lista-abajo{opacity:.45}
.tq-tipos-edit{display:flex;flex-direction:column;gap:8px;margin:8px 0 12px}
.tq-tipo-fila{display:flex;gap:8px;align-items:center}
.tq-tipo-fila input{flex:1;background:#141414;color:var(--blanco);border:1px solid var(--line);border-radius:8px;padding:9px 10px}
.tq-tipo-fila input[type=number]{flex:0 0 90px;text-align:right}
.mini-h{font-family:'Oswald';text-transform:uppercase;font-size:12px;letter-spacing:.06em;color:var(--gris);margin:14px 0 4px}
@media (max-width:640px){
  .tq-imp{min-width:74px;font-size:14px}
  .group-h .gh-acts{float:none;margin-top:8px}
}

/* ---------- pase de puerta (visto desde la app) ---------- */
.tq-puerta{margin-bottom:10px}
.tq-codigo{font-family:'Anton';font-size:40px;letter-spacing:.16em;color:var(--lima);margin:10px 0 6px}
.tq-url{width:100%;background:#101010;border:1px solid var(--line);border-radius:10px;color:var(--gris);
  padding:9px 11px;font-size:12px;margin-bottom:10px}

/* ---------- MODO PUERTA ----------
   Se usa de pie, a oscuras y con prisa: todo grande y con mucho margen para el
   dedo. Sin cabecera ni menús: quien está aquí no tiene por qué ver más. */
.pt{max-width:620px;margin:0 auto;padding:10px 2px 40px}
.pt-caja{max-width:520px;margin:12vh auto;padding:0 16px}
.pt-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:16px}
.pt-evento{font-family:'Anton';font-size:24px;text-transform:uppercase;line-height:1.1}
.pt-sub{color:var(--gris);font-size:12px;margin-top:3px}
.pt-dentro{text-align:right;flex-shrink:0}
.pt-dentro b{display:block;font-family:'Anton';font-size:40px;color:var(--lima);line-height:1}
.pt-dentro span{font-size:11px;color:var(--gris);text-transform:uppercase;letter-spacing:.06em}
.pt-contador{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;text-align:center;margin-bottom:14px}
.pt-etiqueta{font-family:'Oswald';text-transform:uppercase;font-size:12px;letter-spacing:.08em;color:var(--gris)}
.pt-mas-menos{display:flex;align-items:center;justify-content:center;gap:22px;margin:10px 0 6px}
.pt-mas-menos b{font-family:'Anton';font-size:46px;min-width:80px}
.pt-btn-grande{width:64px;height:64px;border-radius:50%;border:1px solid var(--line);background:#101010;
  color:var(--blanco);font-size:32px;line-height:1;cursor:pointer;touch-action:manipulation}
.pt-btn-grande:active{background:var(--lima);color:#111}
.pt-buscador input{width:100%;background:#101010;border:1px solid var(--line);border-radius:12px;color:var(--blanco);
  padding:14px 16px;font-size:16px}
.pt-lista{display:flex;flex-direction:column;gap:8px;margin-top:12px}
/* una fila de varias personas se cuenta de a una: el botón grande suma y el
   «−» de al lado resta */
.pt-fila{display:flex;gap:8px;align-items:stretch}
.pt-fila .pt-inv{flex:1;min-width:0}
.pt-menos{flex:0 0 58px;border-radius:12px;border:1px solid var(--line);background:#101010;color:var(--blanco);
  font-size:26px;line-height:1;cursor:pointer;touch-action:manipulation}
.pt-menos:disabled{opacity:.3}
.pt-menos:active{background:var(--c,var(--lima));color:#111}
.pt-inv.media{border-color:var(--c,var(--lima))}
.pt-inv.media .pt-check{border-color:var(--c,var(--lima));color:var(--c,var(--lima))}
/* el contador «4 de 9» necesita más sitio que un ✓, y en blanco: el negro del
   check solo vale cuando el fondo ya está encendido */
.pt-fila.grupo .pt-inv{grid-template-columns:58px 1fr}
.pt-fila.grupo .pt-check{width:58px;flex-direction:column;gap:1px;line-height:1}
.pt-check b{font-family:'Anton';font-size:22px;line-height:1;display:block;color:var(--blanco)}
.pt-check i{font-style:normal;font-size:10px;letter-spacing:.02em;display:block;text-transform:uppercase;color:var(--gris)}
.pt-inv.media .pt-check b{color:var(--c,var(--lima))}
.pt-inv.on .pt-check b,.pt-inv.on .pt-check i{color:#111}
.pt-inv{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;gap:2px 12px;align-items:center;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;
  text-align:left;color:inherit;font:inherit;touch-action:manipulation}
.pt-check{grid-row:1/3;width:44px;height:44px;border-radius:10px;border:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:22px;color:#111}
.pt-inv.on{border-color:var(--c,var(--lima));background:#141a02}
.pt-inv.on .pt-check{background:var(--c,var(--lima));border-color:var(--c,var(--lima))}
.pt-inv.on .pt-nombre{text-decoration:line-through;opacity:.65}
.pt-nombre{font-family:'Oswald';font-size:18px}
.pt-nombre i{color:var(--lima);font-style:normal;font-size:14px}
.pt-parte{font-size:12px;color:var(--gris)}
.pt-vacio{color:var(--gris);text-align:center;padding:26px 0}
.pt-pie{color:var(--gris);font-size:11px;text-align:center;margin-top:20px;line-height:1.6}
/* varias listas a la vez: los chips filtran y cada grupo lleva su título */
.pt-chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 10px;-webkit-overflow-scrolling:touch}
.pt-chip{flex:0 0 auto;background:#101010;border:1px solid var(--line);border-radius:999px;color:var(--gris);
  padding:9px 14px;font-family:'Oswald';font-size:13px;text-transform:uppercase;letter-spacing:.03em;
  cursor:pointer;touch-action:manipulation;white-space:nowrap}
.pt-chip i{font-style:normal;color:var(--blanco);margin-left:5px}
.pt-chip::after{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c);margin-left:7px;vertical-align:middle}
.pt-chip[data-lista=""]::after{display:none}
.pt-chip.on{border-color:var(--c,var(--lima));color:var(--c,var(--lima))}
.pt-chip.on i{color:var(--c,var(--lima))}
.pt-chip.cobra::before{content:"€ ";color:var(--c,var(--lima))}
.pt-grupo{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.pt-grupo-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-family:'Oswald';text-transform:uppercase;font-size:13px;letter-spacing:.06em;color:var(--c,var(--lima));margin-top:6px}
.pt-grupo-h span{color:var(--gris);font-size:11px;letter-spacing:.03em}
.pt-grupo-h span b{color:var(--blanco);font-weight:400}
.pt-etiq-lista{color:var(--lima);font-weight:400}
.pt-inv.cobra{grid-template-columns:44px 1fr auto}
.pt-cobrar{grid-row:1/3;grid-column:3;font-family:'Oswald';font-size:17px;color:var(--c,var(--lima));white-space:nowrap}
.pt-inv.on .pt-cobrar{opacity:.55}

/* quien ya entró alguna vez ve "Entrar", en verde de marca: no se le vuelve a
   vender un registro que ya hizo */
.btn-entrar{display:inline-flex;align-items:center;gap:12px;background:var(--lima);color:#111;border:none;
  border-radius:12px;padding:13px 26px;font-family:'Oswald';text-transform:uppercase;letter-spacing:.04em;
  font-size:16px;font-weight:600;cursor:pointer;box-shadow:0 8px 26px rgba(200,255,0,.22)}
.btn-entrar:hover{background:#d8ff3a}
.btn-entrar:disabled{opacity:.6;cursor:default}
.btn-entrar svg{background:#fff;border-radius:50%;padding:2px}

/* el mensaje listo para mandarle al músico invitado */
.inv-msg{background:#101010;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:12px 0;
  white-space:pre-wrap;font-size:13px;line-height:1.6;color:var(--gris);max-height:240px;overflow:auto}

/* El nombre del espacio en grande repetía la tarjeta de debajo cuando el
   proyecto se llama igual. El título dice qué es la pantalla; el nombre del
   espacio baja a la línea de detalle. */
.page-head h2.h-lima{color:var(--lima)}

/* ---------- invitación pendiente ---------- */
.invita{max-width:520px;margin:7vh auto;text-align:center;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:34px 26px 28px;box-shadow:var(--shadow)}
.invita-logo{width:180px;max-width:60%;margin:0 auto 18px;display:block;mix-blend-mode:screen}
.invita-eyebrow{font-family:'Oswald';text-transform:uppercase;font-size:11px;letter-spacing:.14em;color:var(--lima)}
.invita-titulo{font-family:'Anton';font-size:clamp(22px,5vw,30px);text-transform:uppercase;line-height:1.15;margin:8px 0 10px}
.invita-titulo span{color:var(--lima);display:block}
.invita-rol{max-width:38ch;margin:0 auto}
.invita-acciones{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:22px 0 14px}
.invita-acciones .btn{padding:13px 22px;font-size:14px}
.invita-nota{line-height:1.6;max-width:42ch;margin:0 auto}

/* Cuánto falta para el show: en una banda es la pregunta de cada semana */
.cuenta{margin-top:8px;font-family:'Oswald';font-size:13px;color:var(--gris);
  border-left:3px solid var(--line);padding-left:10px}
.cuenta b{color:var(--blanco);text-transform:uppercase;letter-spacing:.04em}
.cuenta.cerca{border-left-color:var(--lima)}
.cuenta.cerca b{color:var(--lima)}
.cuenta.hoy{border-left-color:var(--lima);background:rgba(200,255,0,.07);padding:6px 10px;border-radius:0 8px 8px 0}
.cuenta.hoy b{color:var(--lima);font-size:15px}
.cuenta.pasado{opacity:.65}

/* QR del pase: se escanea y entras, sin dictar el código */
.tq-qr-fila{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin:12px 0}
.tq-qr{width:132px;height:132px;background:#fff;border-radius:10px;padding:6px;flex-shrink:0}
.tq-qr svg{display:block;width:100%;height:100%}
.tq-qr-fila .tq-codigo{margin:0}

/* Entrar a la puerta escribiendo el código: el QR falla más de lo que parece
   (cámara vieja, poca luz, o te lo dictaron por teléfono) */
.pt-logo{width:170px;max-width:60%;margin:0 auto 20px;display:block;mix-blend-mode:screen}
.pt-h{font-family:'Anton';font-size:26px;text-transform:uppercase;text-align:center}
.pt-p{color:var(--gris);text-align:center;margin:8px 0 18px;line-height:1.6}
.pt-input-codigo{width:100%;background:#101010;border:1px solid var(--line);border-radius:14px;color:var(--blanco);
  padding:18px 14px;font-family:'Anton';font-size:34px;letter-spacing:.28em;text-align:center;text-transform:uppercase}
.pt-input-codigo:focus{outline:none;border-color:var(--lima)}
.pt-input-codigo.mal{border-color:var(--danger);animation:tiembla .3s}
@keyframes tiembla{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.pt-entrar{width:100%;margin:14px 0 12px;padding:16px;font-size:15px}
.pt-caja .mini{text-align:center;line-height:1.6}
.lp-puerta{margin-top:14px}
.lp-puerta a{color:var(--lima)}

/* «¿Ya tienes cuenta? Entrar»: con Google, entrar y registrarse son la misma
   puerta, pero quien ya es usuario necesita verlo escrito o cree que se está
   registrando otra vez. Hace falta sobre todo al estrenar dominio: el rastro de
   «este dispositivo ya conoce Showly» se guarda por dominio y no viaja. */
.lp-ya{margin-top:10px}
.lp-link{background:none;border:none;color:var(--lima);font:inherit;font-size:12px;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;padding:4px}
.lp-link:hover{color:var(--blanco)}

/* ---------- acceso con correo ---------- */
.ac-form{display:flex;flex-direction:column;gap:12px}
.ac-lab{display:flex;flex-direction:column;gap:5px;font-family:'Oswald';text-transform:uppercase;letter-spacing:.05em;font-size:12px;color:var(--gris)}
.ac-form .input{
  width:100%;background:#141414;border:1px solid var(--line);border-radius:10px;
  color:var(--blanco);padding:11px 12px;font:inherit;font-size:16px; /* 16px: menos y iOS hace zoom al enfocar */
}
.ac-form .input:focus{outline:none;border-color:var(--lima-dim)}
.ac-error{margin:0;color:#ff8f7a;font-size:13px;background:var(--danger-soft);border:1px solid #4a2018;border-radius:9px;padding:9px 11px}
.ac-enviar{width:100%;justify-content:center}
.ac-pie{text-align:center;margin:2px 0 0;color:var(--gris)}
.ac-pie .lp-link{font-size:12px}
.portada-o{margin:12px 0 8px;color:#555;text-transform:uppercase;letter-spacing:.14em;font-size:11px}
.ios-pasos{margin:14px 0 10px;padding-left:20px;display:flex;flex-direction:column;gap:10px;font-size:14px;line-height:1.45}
.ios-pasos li::marker{color:var(--lima);font-family:'Oswald';font-weight:600}
.ios-pasos b{color:var(--blanco)}
.ios-pasos svg{vertical-align:-3px;color:var(--lima);margin:0 1px}

/* ---------- enlace de solo ver ---------- */
.ver-wrap{max-width:1000px;margin:0 auto;padding:0 0 40px}
.ver-top{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);
  background:rgba(10,10,10,.94);backdrop-filter:blur(8px);position:sticky;top:0;z-index:50}
.ver-marca{height:26px;flex-shrink:0}
.ver-tit{display:flex;flex-direction:column;min-width:0;flex:1}
.ver-tit b{font-family:'Oswald';text-transform:uppercase;letter-spacing:.03em;font-size:15px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ver-tit span{font-size:11.5px;color:var(--gris);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ver-chip{flex-shrink:0;font-family:'Oswald';text-transform:uppercase;font-size:10px;letter-spacing:.08em;
  color:var(--gris);border:1px solid var(--line);border-radius:20px;padding:4px 10px}
.ver-nav{display:flex;gap:4px;padding:12px 16px 0}
.ver-nav a{padding:7px 13px;border-radius:9px;font-family:'Oswald';text-transform:uppercase;
  font-size:13px;letter-spacing:.04em;color:var(--gris)}
.ver-nav a.on{background:var(--lima);color:#111}
.ver-canc{padding:0 16px}
.ver-pie{margin-top:34px;padding:22px 16px;border-top:1px solid var(--line);text-align:center}
.ver-pie .mini{margin:0 0 12px;color:var(--gris)}
.ver-aviso{text-align:center;padding:70px 20px;display:flex;flex-direction:column;align-items:center;gap:12px}
.ver-logo{width:170px;margin-bottom:8px}

/* ---------- compartir el enlace ---------- */
.ev-url{margin:14px 0 12px}
.ev-url input{width:100%;background:#141414;border:1px solid var(--line);border-radius:10px;
  color:var(--lima);padding:11px 12px;font-family:ui-monospace,Consolas,monospace;font-size:13px}
.ev-btns{display:flex;gap:8px;flex-wrap:wrap}
.ev-nota{margin-top:16px}
.ev-nota p{margin:6px 0 0;font-size:13px;color:var(--gris)}
.ev-cerrar{display:block;margin:16px auto 0;color:var(--danger)}
@media(max-width:560px){ .ev-btns .btn{flex:1;justify-content:center} }

/* ============================================================
   LOGO DEL GRUPO
   Cuando no hay imagen van las iniciales: un hueco vacío haría todas las
   tarjetas iguales, que es justo lo que el logo viene a arreglar.
   ============================================================ */
.esp-logo{width:44px;height:44px;border-radius:12px;flex-shrink:0;display:inline-flex;
  align-items:center;justify-content:center;overflow:hidden;background:var(--panel2);
  border:1px solid var(--line)}
.esp-logo img{width:100%;height:100%;object-fit:cover;display:block}
.esp-logo.sin-logo{font-family:'Anton';font-size:17px;letter-spacing:.02em;color:var(--lima);
  background:linear-gradient(150deg,#1f2607,#141414)}
.esp-logo.chico{width:30px;height:30px;border-radius:9px;font-size:12px}
.esp-logo.grande{width:64px;height:64px;border-radius:16px;font-size:24px}
.esp-cab{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.esp-cab-txt{min-width:0}
.esp-cab h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.espacio-card{position:relative}
.esp-marca-btn{margin-top:12px}
.marca-esp{display:flex;align-items:center}
.marca-esp .esp-logo{transition:.15s}
.marca-esp:hover .esp-logo{border-color:var(--lima)}
.cab-grupo{display:flex;align-items:center;gap:14px;min-width:0}
.marca-boton{position:relative;background:none;border:0;padding:0;cursor:pointer;line-height:0}
.marca-boton .marca-lapiz{position:absolute;right:-4px;bottom:-4px;width:22px;height:22px;
  border-radius:50%;background:var(--lima);color:#111;font-size:11px;display:flex;
  align-items:center;justify-content:center;opacity:0;transition:.15s}
.marca-boton:hover .marca-lapiz,.marca-boton:focus-visible .marca-lapiz{opacity:1}
.marca-boton:hover .esp-logo{border-color:var(--lima)}
.logo-modal{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.logo-previa .esp-logo{width:96px;height:96px;border-radius:20px;font-size:34px}
.logo-txt{flex:1;min-width:220px}
.logo-txt .muted{margin-top:0}
.logo-btns{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}

/* ---------- la ficha de una fecha ---------- */
.show-link{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.show-link:hover .fila-main b{color:var(--lima)}

/* ---------- la agenda: una tarjeta por cada vez que se toca ----------
   No es un enlace: lleva dentro sus propios botones, y un enlace dentro de otro
   no es HTML válido —el navegador lo desmonta—. De ahí el cursor y el :hover. */
.grid-fechas{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.fecha-card,.proyecto-card{cursor:pointer;display:flex;flex-direction:column;gap:5px}
.fecha-card:hover,.proyecto-card:hover{border-color:var(--lima);transform:translateY(-2px);transition:.15s}
.fecha-card{border-left:3px solid var(--lima)}
.fecha-card.hoy{background:rgba(200,255,0,.06);border-color:var(--lima)}
/* el aire lo pone el gap de la tarjeta, no el margen de cada párrafo: con los
   dos, una tarjeta con notas se estiraba el doble que la de al lado */
.fecha-card>p{margin:0}
.fc-cab{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.fc-cab h3{flex:1;min-width:0;line-height:1.25}
/* `capitalize` ponía mayúscula en cada palabra —«Jueves, 10 De Octubre De
   2026»—; la fecha larga lleva una sola, la primera */
.fc-cuando{font-family:'Oswald';font-size:15px;color:var(--blanco)}
.fc-cuando::first-letter{text-transform:uppercase}
.fc-donde{color:var(--gris);font-size:14px}
.fc-notas{color:var(--gris);font-size:13px;font-style:italic}
.fecha-card .cuenta{margin-top:4px}
.fecha-card .sin-fecha{margin-top:2px;padding:6px 10px;font-size:13px}
.fc-acts{display:flex;gap:8px;margin-top:auto;padding-top:12px;flex-wrap:wrap}
/* Lo ya tocado se ve, pero no compite con lo que viene: sin barra lima y un
   punto más apagado. Sigue siendo legible —es la memoria del grupo—. */
.ya-tocados .fecha-card{border-left-color:var(--line);opacity:.72}
.ya-tocados .fecha-card:hover{opacity:1}
.ya-tocados .show-fecha b{color:var(--gris)}
.proyecto-card .muted{margin:0}
.sin-fecha{color:var(--gris);border:1px dashed var(--line);border-radius:10px;padding:8px 10px;margin-top:6px}
.proy-fecha-btn{align-self:flex-start;margin-top:8px}

/* ============================================================
   GALERÍA DE FOTOS Y VÍDEOS
   ============================================================ */
.media{margin-top:26px}
.media-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.media-head .group-h{margin:22px 0 10px}
.media-btns{display:flex;gap:8px}
.media.med-drop{outline:2px dashed var(--lima);outline-offset:6px;border-radius:12px}
.media-vacio{margin-top:6px}
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.med-it{position:relative;aspect-ratio:1;border:1px solid var(--line);border-radius:12px;
  overflow:hidden;background:var(--panel2);padding:0;cursor:pointer;transition:.15s}
.med-it:hover{border-color:var(--lima);transform:translateY(-2px)}
.med-it img{width:100%;height:100%;object-fit:cover;display:block}
.med-icono{display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  font-size:30px;color:var(--lima)}
.med-play{position:absolute;top:8px;left:8px;width:26px;height:26px;border-radius:50%;
  background:rgba(0,0,0,.6);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center}
.med-tag{position:absolute;top:8px;right:8px;font-family:'Oswald';text-transform:uppercase;
  font-size:9px;letter-spacing:.06em;background:rgba(0,0,0,.66);color:var(--lima);
  border-radius:20px;padding:3px 8px}
.med-pie{position:absolute;left:0;right:0;bottom:0;padding:14px 8px 7px;font-size:11.5px;
  color:#fff;text-align:left;background:linear-gradient(transparent,rgba(0,0,0,.82));
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.med-sube{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:12px}
.med-sube-tit{font-size:13px;color:var(--gris);margin-bottom:8px}
.med-barra{height:6px;background:#222;border-radius:20px;overflow:hidden}
.med-barra span{display:block;height:100%;background:var(--lima);width:0;transition:width .2s}

/* ---------- visor a pantalla completa ---------- */
.sin-scroll{overflow:hidden}
.visor{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.94);display:flex;
  align-items:center;justify-content:center;padding:56px 16px 84px}
.visor-cuerpo{max-width:1100px;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.visor-cuerpo img,.visor-cuerpo video{max-width:100%;max-height:100%;border-radius:10px;display:block}
.visor-cuerpo iframe{width:100%;aspect-ratio:16/9;max-height:100%;border:0;border-radius:10px}
.visor-fuera{text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center}
.visor-x{position:absolute;top:12px;right:14px;width:40px;height:40px;border-radius:12px;
  border:1px solid var(--line);background:rgba(20,20,20,.9);color:var(--blanco);font-size:22px;cursor:pointer}
.visor-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:64px;
  border:1px solid var(--line);background:rgba(20,20,20,.8);color:var(--blanco);font-size:30px;
  border-radius:12px;cursor:pointer;line-height:1}
.visor-prev{left:10px} .visor-next{right:10px}
.visor-nav:hover,.visor-x:hover{border-color:var(--lima);color:var(--lima)}
.visor-pie{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;
  justify-content:space-between;gap:12px;padding:12px 16px;background:rgba(10,10,10,.92);
  border-top:1px solid var(--line);flex-wrap:wrap}
.visor-info{display:flex;flex-direction:column;min-width:0}
.visor-info b{font-family:'Oswald';font-size:14px}
.visor-info small{color:var(--gris);font-size:11.5px}
.visor-acc{display:flex;align-items:center;gap:8px}
@media(max-width:560px){
  .visor{padding:52px 8px 92px}
  .visor-nav{width:38px;height:52px;font-size:24px}
  .media-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
}

/* la marca del grupo en las pantallas que abre gente de fuera */
.ver-marca-grupo{height:34px;width:34px;object-fit:cover;border-radius:9px;border:1px solid var(--line)}
.pt-logo-grupo{width:44px;height:44px;object-fit:cover;border-radius:11px;border:1px solid var(--line);flex-shrink:0}
.tv-logo-grupo{width:180px;height:180px;object-fit:contain;border-radius:20px}

/* ---------- almacenamiento en el panel de administración ---------- */
.alm{margin-bottom:8px}
.alm-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.alm-cab .big{margin:0}
.alm-acc{display:flex;gap:8px;flex-wrap:wrap}
.alm-barra{height:8px;background:#222;border-radius:20px;overflow:hidden;margin:14px 0 8px}
.alm-barra span{display:block;height:100%;background:var(--lima);border-radius:20px}
.alm-barra.medio span{background:#e0b23f}
.alm-barra.bad span{background:var(--danger)}
.alm-lista{margin-top:14px;border-top:1px solid var(--line);padding-top:10px;display:flex;flex-direction:column;gap:6px}
.alm-fila{display:flex;align-items:center;gap:12px;font-size:13px}
.alm-nom{flex:1;font-family:'Oswald';text-transform:uppercase;letter-spacing:.03em;font-size:14px}
.alm-fila b{color:var(--lima);font-family:'Oswald'}
.field.check{flex-direction:row;align-items:center;gap:10px}
.field.check input{width:18px;height:18px;padding:0;accent-color:var(--lima);flex:none}
.field.check>span{font-size:13px;text-transform:none;letter-spacing:0;color:var(--blanco);font-family:inherit}

/* ---- aviso de versión de prueba en la portada ---------------------------
   Una píldora chica arriba a la derecha, no una banda que empuje la portada
   hacia abajo: el hero es lo primero que se ve y no puede empezar tapado.
   Va FIJA y por encima del fondo animado (que está en z-index:-1), pero con
   pointer-events sueltos donde no hay píldora, para no robarle un clic al
   botón de entrar — el mismo cuidado que ya tenía el canvas. */
.lp-beta{position:fixed;top:14px;right:14px;z-index:5;max-width:min(340px,calc(100vw - 28px));
  display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none}
.lp-beta>*{pointer-events:auto}
.lp-beta-pill{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  padding:6px 12px;border-radius:999px;border:1px solid #6b5a10;background:rgba(28,24,6,.82);
  backdrop-filter:blur(6px);color:#e8d78a;font:inherit;font-size:12px;letter-spacing:.02em;
  text-transform:uppercase;font-family:'Oswald',system-ui,sans-serif;line-height:1}
.lp-beta-pill:hover{border-color:#a8901f;color:#f4e08a}
.lp-beta-dot{width:7px;height:7px;border-radius:50%;background:#d9b52a;flex:none}
.lp-beta-txt{margin:0;padding:11px 14px;border-radius:12px;border:1px solid #6b5a10;
  background:rgba(28,24,6,.95);backdrop-filter:blur(6px);
  color:#f0e2a4;font-size:12.5px;line-height:1.5;text-align:left;box-shadow:var(--shadow)}
/* En el teléfono la píldora comparte sitio con el logo: se queda arriba a la
   derecha pero el texto, al abrirse, ocupa el ancho para poder leerse. */
@media(max-width:560px){
  .lp-beta{top:10px;right:10px;left:10px;align-items:flex-end;max-width:none}
  .lp-beta-txt{width:100%}
}

/* ---- editor de la web pública (Admin -> La web) -------------------------- */
.web-sws{margin-bottom:18px}
.web-sw{align-items:flex-start;margin-top:10px}
.web-sw small{font-weight:400;line-height:1.45;display:block;margin-top:2px}
.web-grupos{margin-bottom:96px}
.web-grupo summary{cursor:pointer;font-family:'Oswald';text-transform:uppercase;
  letter-spacing:.05em;font-size:14px;color:var(--lima)}
.web-grupo summary .count{color:var(--gris);margin-left:6px;font-size:12px}
.web-campo{padding:14px 0;border-bottom:1px solid var(--line)}
.web-campo:last-child{border-bottom:0;padding-bottom:0}
.web-campo textarea{resize:vertical;min-height:64px;font:inherit;font-size:14px;line-height:1.5}
.web-marca{color:var(--lima);font-size:11px;text-transform:uppercase;letter-spacing:.05em}
/* «Volver al texto original» solo aparece si ese campo está cambiado: en un
   formulario de 58 campos, 58 botones inertes son ruido. */
.web-restaurar{display:none;margin-top:6px;font-size:12px}
.web-campo.tocado .web-restaurar{display:inline}
/* La barra de guardar se queda pegada abajo: con los grupos abiertos el botón
   quedaba a dos pantallas de scroll de lo que acabas de escribir. */
.web-barra{position:sticky;bottom:0;display:flex;flex-wrap:wrap;gap:10px;
  align-items:center;justify-content:space-between;
  padding:12px 0;background:var(--bg);border-top:1px solid var(--line)}
@media(max-width:520px){.web-barra .lp-cta{width:100%}.web-barra .btn{flex:1}}

/* ---------- papelera ----------
   Lo borrado tiene que verse, pero no competir con lo vivo: la fila va
   apagada y con el borde punteado, que es lo que dice "esto ya no está". */
.fila.borrada{justify-content:space-between;flex-wrap:wrap;border-style:dashed;opacity:.72}
.fila.borrada:hover{opacity:1}
.fila.borrada b{font-family:'Oswald';font-size:15px}
.fila-acts{display:flex;gap:6px;flex-shrink:0}
.btn.peligro{color:#ff6b6b}
.btn.peligro:hover{border-color:#ff6b6b}
.pap-tipo{font-family:'Oswald';text-transform:uppercase;font-size:10px;letter-spacing:.08em;
  color:var(--negro);background:var(--gris);border-radius:5px;padding:2px 6px;margin-right:8px;vertical-align:1px}
.papelera-bloque{margin-top:38px;padding-top:22px;border-top:1px solid var(--line)}
.papelera-bloque .group-h .count{color:var(--gris);font-size:13px;margin-left:6px}
.papelera-bloque .mini{margin:-6px 0 12px}

/* el botón de la demo en la portada: alternativa, no oferta principal */
.lp-demo{display:inline-block}

/* ---------- buscador global (Ctrl+K) ----------
   Va por encima de todo menos del escenario, donde ni se abre. */
.bs-back{position:fixed;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(3px);
  z-index:200;display:flex;justify-content:center;align-items:flex-start;padding:12vh 16px 16px}
.bs-caja{width:100%;max-width:620px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;max-height:72vh}
.bs-input{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;
  color:var(--blanco);font:inherit;font-size:17px;padding:18px 20px;outline:none}
.bs-input::placeholder{color:var(--gris)}
.bs-lista{overflow:auto;padding:6px}
.bs-vacio{color:var(--gris);font-size:13.5px;padding:22px 16px;margin:0;text-align:center}
.bs-fila{display:flex;align-items:baseline;gap:10px;width:100%;text-align:left;background:transparent;
  border:0;border-radius:10px;padding:11px 14px;cursor:pointer;color:inherit;font:inherit}
.bs-fila:hover,.bs-fila.on{background:var(--panel2)}
.bs-fila.on{box-shadow:inset 3px 0 0 var(--lima)}
.bs-tipo{font-family:'Oswald';text-transform:uppercase;font-size:9.5px;letter-spacing:.08em;
  color:var(--gris);flex:0 0 66px}
.bs-t{font-family:'Oswald';font-size:15px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bs-d{font-size:12px;color:var(--gris);flex-shrink:0;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bs-pie{display:flex;gap:16px;justify-content:center;border-top:1px solid var(--line);
  padding:9px;font-size:11px;color:var(--gris)}
@media (max-width:560px){
  .bs-back{padding-top:6vh}
  .bs-tipo{display:none}
  .bs-d{max-width:40%}
}

/* ---------- directorio compartido ---------- */
.dir-buscar{width:100%;margin-bottom:14px}
.dir-lista{gap:10px}
.dir-card{padding:0}
.dir-card summary{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:14px 16px;cursor:pointer;list-style:none}
.dir-card summary::-webkit-details-marker{display:none}
.dir-card summary::before{content:"▸";color:var(--gris);font-size:12px}
.dir-card[open] summary::before{content:"▾"}
.dir-card summary:hover{background:var(--panel2)}
.dir-t{font-family:'Oswald';font-size:16px}
.dir-a{color:var(--gris);font-size:13px;flex:1;min-width:0}
.dir-m{font-size:12px;color:var(--gris);font-family:ui-monospace,Consolas,monospace}
.dir-prev{margin:0;padding:0 16px 12px;font-family:ui-monospace,Consolas,monospace;font-size:12px;
  line-height:1.7;color:var(--blanco);white-space:pre-wrap;max-height:280px;overflow:auto}
.dir-pie{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding:11px 16px}

/* ---------- la demo: barra de salir y guía por pasos ---------- */
.demo-barra{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px;
  padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.demo-barra .mini{flex:1;min-width:150px}
.demo-pill{font-family:'Oswald';text-transform:uppercase;font-size:10px;letter-spacing:.08em;
  background:var(--lima);color:#111;border-radius:20px;padding:3px 10px}
.demo-guia{position:fixed;inset:auto 0 0 0;z-index:180;display:flex;justify-content:center;padding:16px;pointer-events:none}
.demo-caja{pointer-events:auto;width:100%;max-width:460px;background:var(--panel);border:1px solid var(--lima-dim);
  border-radius:var(--r);box-shadow:var(--shadow);padding:18px 20px}
.demo-caja h3{font-family:'Oswald';text-transform:uppercase;font-size:16px;margin-bottom:6px}
.demo-caja p{color:var(--gris);font-size:13.5px;line-height:1.6;margin:0 0 14px}
.demo-pasos{display:flex;gap:6px;margin-bottom:12px}
.demo-pasos i{width:22px;height:3px;border-radius:2px;background:var(--line)}
.demo-pasos i.on{background:var(--lima)}
.demo-acts{display:flex;justify-content:space-between;align-items:center;gap:10px}
/* lo que no viaja en el enlace compartido: se apaga en vez de llevar a ningún sitio */
.ver-off{opacity:.45;cursor:default;pointer-events:none}

/* El foco de la guía: aro lima y todo lo demás apagado. El apagado es la
   PROPIA sombra del elemento con un spread enorme, no una capa por encima —
   así la página sigue siendo pulsable y se puede decir «púlsalo». */
.guia-foco{position:relative;z-index:170;border-radius:12px;
  box-shadow:0 0 0 3px var(--lima), 0 0 0 9999px rgba(0,0,0,.66);
  transition:box-shadow .25s}
/* la caja se sube cuando lo señalado está abajo, para no taparlo */
.demo-guia.arriba{inset:0 0 auto 0;align-items:flex-start}

/* ---------- herramientas sueltas (sin cuenta): afinador, metrónomo, acordes ----------
   Cabecera propia, no la de la app: aquí no hay espacios ni proyectos. */
.hr-wrap{max-width:1000px;margin:0 auto}
.hr-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 0 12px;border-bottom:1px solid var(--line)}
.hr-logo img{height:30px;display:block}
.hr-nav{display:flex;gap:4px;flex:1;flex-wrap:wrap}
.hr-nav a{padding:8px 14px;border-radius:9px;font-family:'Oswald';text-transform:uppercase;
  font-size:13px;letter-spacing:.04em;color:var(--gris)}
.hr-nav a:hover{color:var(--blanco)}
.hr-nav a.on{background:var(--lima);color:#111}
.hr-pie-txt{color:var(--gris);font-size:13.5px;margin:12px 0 16px}
.hr-cierre{margin-top:34px;padding-top:20px;border-top:1px solid var(--line);text-align:center}
.hr-cierre .mini{max-width:560px;margin:0 auto 14px;line-height:1.7}
.hr-cierre-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
/* La pantalla de acordes es larga: al llegar al final la cabecera queda muy
   arriba, así que la salida se repite abajo. */
.hr-volver{flex-shrink:0}
@media (max-width:640px){
  /* en el teléfono el «Volver» se queda solo en su fila, con el logo: el
     desplegable de herramientas baja debajo y no hay que apretar nada */
  .hr-nav{order:3;flex-basis:100%;justify-content:center}
}

/* ---------- el metrónomo suelto ---------- */
.mtr{max-width:620px;margin:0 auto}
.mtr-caja{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 18px;text-align:center;box-shadow:var(--shadow)}
.mtr-tempo{justify-content:center;align-items:center;gap:18px}
.mtr .mt-bpm b{font-family:'Anton';font-size:56px;line-height:1;color:var(--lima);display:block}
.mtr .mt-bpm span{font-family:'Oswald';text-transform:uppercase;font-size:11px;letter-spacing:.1em;color:var(--gris)}
/* Los puntos del compás: en el escenario son 13 px apagados casi negros porque
   comparten sitio con la letra. Aquí son el centro de la pantalla y hay que
   verlos de lejos, apoyando el móvil en el atril. */
.mtr .mt-luz{justify-content:center;margin:20px 0 22px;margin-left:auto;margin-right:auto}
.mtr .mt-luz i{width:20px;height:20px;background:#252a1a;border:1px solid var(--line)}
.mtr .mt-luz i.on{background:var(--blanco);border-color:var(--blanco)}
.mtr .mt-luz.acento i.on{background:var(--lima);border-color:var(--lima);box-shadow:0 0 16px var(--lima)}
.mtr-play{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.mtr-ajustes{margin-top:16px;justify-content:center;flex-wrap:wrap;gap:12px}
.mtr-tip{margin-top:14px;text-align:center;line-height:1.7}
@media (max-width:560px){
  .mtr .mt-bpm b{font-size:46px}
  .hr-nav a{padding:7px 11px;font-size:12px}
}
/* ---------- las tres herramientas libres, en la portada ----------
   Eran tres enlaces de texto seguidos y parecían una nota al pie. Son la
   puerta de quien todavía no tiene banda a la que convencer, así que se ven —
   pero por debajo del botón de entrar, que sigue siendo la oferta. */
.lp-libres{margin-top:26px}
.lp-libres-t{display:block;font-family:'Oswald';text-transform:uppercase;font-size:10.5px;
  letter-spacing:.16em;color:var(--gris);margin-bottom:10px}
.lp-libres-t::before,.lp-libres-t::after{content:"";display:inline-block;width:26px;height:1px;
  background:var(--line);vertical-align:middle;margin:0 10px}
.lp-libres-fila{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.lp-herr{display:flex;align-items:center;gap:10px;padding:9px 15px 9px 12px;
  border:1px solid var(--line);border-radius:14px;background:rgba(22,22,22,.72);
  backdrop-filter:blur(2px);transition:.16s;text-align:left}
.lp-herr:hover{border-color:var(--lima);transform:translateY(-2px);background:var(--panel)}
.lp-herr-ico{width:22px;height:22px;flex-shrink:0;color:var(--gris);transition:color .16s}
.lp-herr-ico svg{width:100%;height:100%;display:block}
.lp-herr:hover .lp-herr-ico{color:var(--lima)}
.lp-herr-txt{display:flex;flex-direction:column;line-height:1.15}
.lp-herr-txt b{font-family:'Oswald';font-size:13.5px;letter-spacing:.02em;color:var(--blanco)}
.lp-herr-txt i{font-style:normal;font-size:10.5px;color:var(--gris)}
@media (max-width:480px){
  .lp-libres-fila{gap:8px}
  .lp-herr{padding:8px 12px 8px 10px;gap:8px}
  .lp-herr-txt i{display:none}
}

/* el pie de cada campo del editor de la web: restaurar y, en las preguntas,
   quitarla de la portada */
.web-pie{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:6px}
.web-quitar{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--gris);cursor:pointer}
.web-quitar input{accent-color:var(--lima)}
.web-campo.quitada .web-in{opacity:.45;text-decoration:line-through}