/* Identidad de jrndm.com: negro (void), texto claro (paper), Manrope + JetBrains Mono + Orbitron,
   mucho aire y tracking ancho. Acento: "signal" #ff2a6d. */
:root {
  --void: #050505;
  --noise: #121212;
  --paper: #f2f0eb;
  --tenue: rgba(242, 240, 235, 0.55);
  --linea: rgba(242, 240, 235, 0.16);
  --signal: #ff2a6d;
  --vidrio: rgba(5, 5, 5, 0.72);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--void); color: var(--paper); overflow: hidden; }
body { font-family: Manrope, system-ui, sans-serif; font-weight: 300; -webkit-font-smoothing: antialiased;
  touch-action: none; user-select: none; -webkit-user-select: none; }
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 300; letter-spacing: 0.18em; }
button { font: inherit; color: inherit; }

#escena { position: fixed; inset: 0; width: 100%; height: 100%; display: block; outline: none; }

/* --- Entrada --- */
#intro { position: fixed; inset: 0; z-index: 10; background: var(--void); display: grid; place-items: center;
  transition: opacity 1.2s ease; }
#intro.fuera { opacity: 0; pointer-events: none; }
.intro-centro { text-align: center; padding: 0 16px; }
.logo { font-family: Orbitron, sans-serif; font-weight: 400; font-size: clamp(48px, 12vw, 120px);
  letter-spacing: 0.3em; margin: 0 0 0 0.3em; }
.subtitulo { font-family: "JetBrains Mono", monospace; letter-spacing: 0.6em; font-size: 12px; color: var(--tenue);
  margin: 12px 0 56px 0.6em; }
.carga { width: min(280px, 70vw); height: 1px; background: var(--linea); margin: 0 auto; }
#carga-barra { height: 1px; width: 0; background: var(--paper); transition: width 0.3s; }
#carga-texto { font-size: 10px; color: var(--tenue); margin: 14px 0 40px; }
#entrar { background: none; border: 1px solid var(--linea); padding: 16px 52px; letter-spacing: 0.5em;
  font-family: Orbitron, sans-serif; font-size: 13px; cursor: pointer; transition: border-color 0.4s, color 0.4s; }
#entrar:not([disabled]):hover { border-color: var(--signal); color: var(--signal); }
#entrar[disabled] { opacity: 0.3; cursor: default; }
.nota { font-size: 11px; color: var(--tenue); margin-top: 28px; letter-spacing: 0.08em; }

/* --- HUD --- */
#marca { position: fixed; top: 18px; left: 20px; z-index: 2; display: flex; gap: 12px; align-items: baseline;
  font-size: 10px; color: var(--tenue); pointer-events: none; }
.logo-chico { font-family: Orbitron, sans-serif; letter-spacing: 0.3em; color: var(--paper); font-size: 13px; }
a.logo-chico { text-decoration: none; pointer-events: auto; }
a.logo-chico:hover { opacity: 0.6; }
/* Instrucciones: abajo al medio, arriba de la pestaña del mixer (suben con él); la tecla M las oculta */
#ayuda { position: absolute; left: 50%; bottom: calc(100% + 42px); transform: translateX(-50%); margin: 0;
  width: max-content; max-width: min(640px, calc(100vw - 40px)); text-align: center; font-size: 10px;
  color: var(--tenue); line-height: 1.7; pointer-events: none; transition: opacity 0.4s; }
#ayuda.oculta { opacity: 0; }
#etiqueta { position: fixed; z-index: 3; pointer-events: none; font-size: 11px; padding: 6px 10px;
  background: var(--vidrio); border: 1px solid var(--linea); transform: translate(-50%, -140%); white-space: nowrap; }
#etiqueta small { color: var(--tenue); }
/* Sentado: girar el sillón hacia las bandejas o la proyección */
#acciones-sillon { position: fixed; top: 48px; right: 20px; z-index: 3; display: flex; gap: 8px; flex-wrap: wrap;
  justify-content: flex-end; max-width: calc(100vw - 40px); }
#acciones-sillon[hidden] { display: none; }
#girar-sillon, #trago { height: 32px; padding: 0 16px; font-size: 10px;
  letter-spacing: 0.15em; color: var(--paper); background: var(--vidrio); border: 1px solid var(--linea); cursor: pointer;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
#girar-sillon:hover, #trago:hover { border-color: var(--paper); }
#medidor { position: fixed; top: 18px; right: 20px; z-index: 2; font-size: 10px; color: var(--tenue);
  text-align: right; line-height: 1.6; pointer-events: none; }

/* --- Mixer --- */
#mixer { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 4; width: min(860px, 100vw);
  background: var(--vidrio); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--linea); border-bottom: 0; touch-action: auto; }
#mixer-abrir { position: absolute; left: 50%; top: -29px; transform: translateX(-50%); height: 29px; padding: 0 22px;
  background: var(--vidrio); border: 1px solid var(--linea); border-bottom: 0; cursor: pointer; font-size: 10px; }
#mixer.cerrado .mixer-cuerpo { display: none; }
.mixer-cuerpo { display: grid; grid-template-columns: 1fr 180px 1fr; gap: 18px; padding: 16px 20px 18px; }
.canal { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.canal-cabeza { display: flex; gap: 10px; align-items: baseline; min-width: 0; }
.letra { font-family: Orbitron, sans-serif; font-size: 18px; }
.titulo { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tema, .tiempo { font-size: 10px; color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.canal.sonando .letra { color: var(--signal); }
.botones { display: flex; gap: 6px; flex-wrap: wrap; }
.botones button, .destino button { background: none; border: 1px solid var(--linea); padding: 6px 10px; cursor: pointer;
  font-size: 10px; min-width: 36px; }
.botones button:hover, .destino button:hover { border-color: var(--paper); }
.botones button.activo, .destino button.activo { border-color: var(--signal); color: var(--signal); }
.tempo { display: flex; gap: 8px; align-items: center; min-width: 0; }
.pulso { width: 7px; height: 7px; border: 1px solid var(--linea); flex: none; }
.pulso.golpe { background: var(--signal); border-color: var(--signal); }
.pulso.golpe.uno { background: var(--paper); border-color: var(--paper); }
.tempo .bpm { background: none; border: 0; padding: 0; cursor: pointer; font-size: 15px; letter-spacing: 0.04em; }
.tempo .bpm:hover { color: var(--signal); }
.bpm-tema { font-size: 9px; color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.tempo .sync, .loops button { background: none; border: 1px solid var(--linea); padding: 4px 7px; cursor: pointer;
  font-size: 9px; }
.tempo .sync:hover, .loops button:hover { border-color: var(--paper); }
.tempo .sync.activo, .loops button.activo { border-color: var(--signal); color: var(--signal); }
.tempo .sync.error { border-color: var(--signal); color: var(--tenue); }
.loops { display: flex; gap: 4px; align-items: center; font-size: 9px; color: var(--tenue); }
.loops span { margin-right: 2px; }
.loops button { flex: 1; min-width: 0; padding: 4px 0; }
.loops button:disabled { opacity: 0.35; cursor: default; border-color: var(--linea); }
.loops button.esperando { border-color: var(--signal); color: var(--paper); border-style: dashed; }
.fx { margin-top: 4px; }
.fx .rev { touch-action: none; user-select: none; -webkit-user-select: none; }
.control { display: flex; flex-direction: column; gap: 4px; font-size: 9px; color: var(--tenue); }
.control b { font-weight: 400; color: var(--paper); }
.eq { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.eq label { display: flex; flex-direction: column; gap: 4px; font-size: 9px; color: var(--tenue); }
.centro { display: flex; flex-direction: column; gap: 10px; justify-content: center; text-align: center; font-size: 9px;
  color: var(--tenue); }
.centro p { margin: 0; }
.destino { display: flex; gap: 6px; justify-content: center; }
.cross { margin-top: 16px; }

input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 18px; background: none; margin: 0;
  cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 1px; background: var(--linea); }
input[type=range]::-moz-range-track { height: 1px; background: var(--linea); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 16px; margin-top: -8px;
  background: var(--paper); border: 0; }
input[type=range]::-moz-range-thumb { width: 10px; height: 16px; background: var(--paper); border: 0; border-radius: 0; }
input[type=range]:active::-webkit-slider-thumb { background: var(--signal); }

.sin-js { position: fixed; inset: 0; display: grid; place-items: center; color: var(--paper); }
.sin-js a { color: var(--signal); }

@media (max-width: 720px) {
  .mixer-cuerpo { grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 16px 16px; }
  .centro { grid-column: 1 / -1; grid-row: 2; }
  #ayuda { max-width: calc(100vw - 40px); }
  #medidor { display: none; }
}

/* --- Bienvenida (25 s al entrar, en el centro) --- */
#bienvenida { position: fixed; inset: 0; z-index: 5; display: grid; place-items: center; pointer-events: none;
  padding: 16px; background: radial-gradient(ellipse at center, rgba(5, 5, 5, 0.72) 0%, rgba(5, 5, 5, 0.35) 55%, transparent 80%);
  opacity: 1; transition: opacity 1.2s; }
#bienvenida[hidden] { display: none; }
#bienvenida.fuera { opacity: 0; }
#bienvenida .caja { max-width: 640px; text-align: center; }
#bienvenida h2 { font-family: Orbitron, sans-serif; font-weight: 700; letter-spacing: 0.35em; font-size: clamp(16px, 2.4vw, 22px);
  margin: 0 0 22px; }
#bienvenida ul { list-style: none; margin: 0; padding: 0; }
#bienvenida li { font-family: Manrope, sans-serif; font-weight: 700; font-size: clamp(14px, 1.9vw, 19px); line-height: 1.55;
  margin: 0 0 10px; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.9); }
#bienvenida .tiempo { height: 1px; background: rgba(242, 240, 235, 0.15); margin: 24px auto 0; width: 160px; }
#bienvenida .tiempo span { display: block; height: 100%; background: var(--paper); transform-origin: left;
  animation: bienvenida-tiempo 25s linear forwards; }
@keyframes bienvenida-tiempo { from { transform: scaleX(1); } to { transform: scaleX(0); } }
#ayuda.esperando { opacity: 0; }

/* --- Idioma: EN / ES arriba a la derecha (también sobre la pantalla de entrada) --- */
#idiomas { position: fixed; top: 14px; right: 20px; z-index: 11; display: flex; gap: 6px; align-items: center;
  font-size: 11px; color: var(--tenue); }
#idiomas button { background: none; border: 0; padding: 4px 2px; color: var(--tenue); cursor: pointer;
  font: inherit; letter-spacing: 0.15em; }
#idiomas button:hover { color: var(--paper); }
#idiomas button.activo { color: var(--paper); font-weight: 400; }