/* PLAZZOLA VR · portal de clientes · marca plazzola (fondo negro degradado, reglas blancas finas, Montserrat + Share Tech Mono, solo oscuro) */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500&family=Share+Tech+Mono&display=swap");
:root {
  --bg: #0e0e0e; --fg: #ffffff; --mute: #9a9a9a; --dim: #5c5c5c;
  --line: rgba(255,255,255,.35); --line2: rgba(255,255,255,.14); --panel: rgba(255,255,255,.04); --panel2: rgba(255,255,255,.07);
  --ok: #8fd19e; --warn: #ffb070; --bad: #ff8a7a;
  --display: "Montserrat", "Helvetica Neue", Arial, sans-serif; --mono: "Share Tech Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: #0e0e0e; }
body { margin: 0; background: #0e0e0e url(img/bkg.jpg) center/cover fixed no-repeat; color: var(--fg); font: 300 15px/1.5 var(--display); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
.screen { min-height: 100vh; padding: env(safe-area-inset-top) max(16px, env(safe-area-inset-left)) env(safe-area-inset-bottom) max(16px, env(safe-area-inset-right)); }
[hidden] { display: none !important; }
h1 { font-weight: 200; font-size: clamp(26px, 4vw, 40px); line-height: 1.05; letter-spacing: .01em; margin: 0; }
h2 { font-weight: 300; font-size: 18px; margin: 0; }
.sub, .muted { color: var(--mute); font: 13px/1.5 var(--mono); }
.error { color: var(--bad); font: 13px var(--mono); }
.empty { color: var(--mute); padding: 8px 0; font-size: 14px; }
a { color: var(--fg); }

/* cabecera: título a la izquierda, calavera grande a la derecha (sin logo pequeño: owner 2026-11-06) */
header { max-width: 1180px; margin: 0 auto; padding: 26px 0 22px; border-bottom: 1px solid var(--line2); display: grid; grid-template-columns: 1fr auto; gap: 26px; align-items: start; }
.hright { display: grid; justify-items: end; gap: 10px; }
.hright img { height: 64px; width: auto; display: block; opacity: 1; filter: brightness(0) invert(1); }   /* calavera: contorno blanco puro #FFFFFF */
.eyebrow { font: 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); margin-bottom: 6px; }
.back { font: 12px var(--mono); color: var(--mute); text-decoration: none; display: inline-block; margin-bottom: 8px; }
.back:hover { color: var(--fg); }
main { max-width: 1180px; margin: 0 auto; padding-top: 18px; }
.foot { max-width: 1180px; margin: 56px auto 0; padding: 36px 0 36px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font: 12px var(--mono); color: var(--mute); border-top: 1px solid var(--line2); }

.card { background: var(--panel); border: 1px solid var(--line2); border-radius: 14px; padding: 18px; margin: 12px 0; }
.section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 10px; }
.section-head .grow { flex: 1; }
.section-title { margin: 18px 0 12px; font: 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }

/* entrada */
.login { max-width: 380px; margin: 14vh auto; display: flex; flex-direction: column; gap: 16px; padding: 30px 28px; }
.login .brand { display: flex; align-items: center; gap: 16px; }
.login .brand img { height: 56px; filter: brightness(0) invert(1); }
.login .brand .tagline { font: 12px var(--mono); letter-spacing: .06em; color: var(--mute); }
.login label { display: flex; flex-direction: column; gap: 6px; font: 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
input { font: 300 16px var(--display); padding: 12px; border-radius: 8px; border: 1px solid var(--line2); background: rgba(0,0,0,.45); color: var(--fg); }
input:focus, select:focus { outline: none; border-color: var(--fg); }
select { font: 300 15px var(--display); padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line2); background: rgba(0,0,0,.45); color: var(--fg); }
.asset-form { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line2); display: flex; flex-direction: column; gap: 10px; }
.asset-form label { display: flex; flex-direction: column; gap: 5px; font: 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.asset-form input { padding: 10px 12px; font-size: 15px; }
.asset-form .row { display: flex; gap: 8px; }
.pair-form { margin: 0 0 14px; padding-top: 0; border-top: 0; padding-bottom: 14px; border-bottom: 1px solid var(--line2); }
.pair-form .row { align-items: flex-end; }
.pair-form .row label { flex: 1; }
.pair-form .row #pairMsg { align-self: center; font: 12px var(--mono); }
.pair-hint { margin: 0; font-size: 13px; }
.pair-code { font: 22px var(--mono); letter-spacing: .25em; text-transform: uppercase; }

/* botones */
.btn { font: 400 14px var(--display); letter-spacing: .02em; padding: 12px 18px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--fg); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.btn:hover { background: var(--panel2); }
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--fg); color: #000; border-color: var(--fg); font-weight: 500; }
.btn.small { padding: 8px 14px; font-size: 13px; }
.btn:disabled { opacity: .35; cursor: default; }
.btn.cmd.busy { opacity: .85; }
.link { background: none; border: 0; color: var(--fg); font: 12px var(--mono); cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.link.danger { color: var(--mute); }
.upload-btn { display: inline-block; }

/* dashboard */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.grid.products { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.product { display: block; text-decoration: none; color: inherit; background: var(--panel); border: 1px solid var(--line2); border-radius: 14px; padding: 24px 20px; }
.product:hover { border-color: var(--line); }
.product .ptype { font: 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.product .pname { font: 200 30px/1.1 var(--display); margin: 8px 0 14px; }
.product .muted { color: var(--fg); }

/* producto */
.two-col { display: grid; grid-template-columns: 300px 1fr; gap: 12px; align-items: start; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }
.assets { list-style: none; margin: 0; padding: 0; }
.asset { border: 1px solid var(--line2); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; }
.asset.selected { border-color: var(--fg); }
.asset .an { font-weight: 400; font-size: 16px; }
.asset .actions, .dev .actions { margin-top: 8px; display: flex; gap: 14px; align-items: center; }
.tag { font: 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 2px 9px; border: 1px solid var(--fg); color: var(--fg); }
#serverStatus.conn.ok { color: var(--ok); } #serverStatus.conn.bad { color: var(--bad); } #serverStatus.conn.warn { color: var(--warn); }
.tag.ok { border-color: var(--ok); color: var(--ok); }
/* Versión activa: mismo tamaño que el botón Activate, en verde (owner) */
.btn.small.active-tag, .btn.small[data-activate] { min-width: 86px; text-align: center; box-sizing: border-box; }   /* Active y Activate: mismo ancho */
.btn.small.active-tag { border-color: var(--ok); color: var(--ok); cursor: default; display: inline-block; line-height: normal; }
.btn.small.active-tag:hover { background: transparent; }

.state-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; margin-bottom: 16px; }   /* selector ALL | INDIVIDUAL | CONFIGURATION centrado */
.state-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
@media (max-width: 760px) { .state-row { grid-template-columns: 1fr 1fr; } .state-left { grid-column: 1 / -1; } .mode { justify-self: start; } }
/* Botón CONFIGURATION pegado a la derecha, con engranaje de línea blanca (estilo calavera) */
.state-right { display: flex; justify-content: flex-end; }
.config-btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line2); border-radius: 8px; padding: 7px 14px; }
.config-btn .gear { display: block; stroke: #fff; }
.config-btn.on .gear { stroke: #000; }
/* Pestaña CONFIGURATION: muestra pantalla y versiones; oculta los mandos del show */
.config-only { display: none; }
body.config .config-only { display: block; }
#cmdInfo { font: 12px var(--mono); letter-spacing: .06em; color: var(--mute); text-align: center; margin: 18px 0 0; }   /* centrada bajo Begin/Play, mismo aire arriba y abajo */
.card.control { padding-bottom: 18px; }
#cmdInfo strong { color: var(--fg); font-weight: 400; }
body.config .sub-mode, body.config .buttons, body.config #progress, body.config #cmdInfo, body.config #modeHint, body.config .headsets-card { display: none; }
.asset-name { font: 200 26px/1 var(--display); white-space: nowrap; }
.badge { font: 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border: 1px solid var(--line); color: var(--mute); }
.badge.playing { border-color: var(--ok); color: var(--ok); } .badge.paused, .badge.pause { border-color: var(--warn); color: var(--warn); } .badge.holding { border-color: var(--fg); color: var(--fg); } .badge.finished { border-color: var(--ok); color: var(--ok); }
.buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }   /* Begin y Play del mismo ancho (owner) */
/* Begin y Play: mismo contorno blanco 1 px que la tarjeta del asset; oscuros salvo Play mientras reproduce (blanco). Sin destello al pulsar. */
.btn.cmd { padding: 22px 10px; display: flex; flex-direction: column; align-items: center; gap: 5px; font: 300 22px var(--display); background: transparent; color: var(--fg); border: 1px solid var(--fg); border-radius: 12px; transition: none; }   /* = .asset.selected: 1px solid #fff, radio 12px */
.btn.cmd small { font: 11px var(--mono); color: var(--mute); letter-spacing: .04em; }
.btn.cmd:hover { background: rgba(255,255,255,.06); }
.btn.cmd:active { transform: none; background: rgba(255,255,255,.1); }
.btn.cmd:focus, .btn.cmd:focus-visible { outline: none; }
.btn.cmd.pausing { background: var(--fg); color: #000; font-weight: 400; }
.btn.cmd.pausing small { color: #333; }
.btn.cmd.pausing:hover, .btn.cmd.pausing:active { background: #e6e6e6; }
.btn.cmd:disabled { opacity: .45; }
/* Cuenta atrás dentro del botón pulsado (arriba a la derecha); el botón se rellena de blanco mientras dura (owner 2026-11-07) */
.btn.cmd { position: relative; }
.btn.cmd .cd { position: absolute; top: 8px; right: 12px; font: 12px var(--mono); color: var(--warn); font-variant-numeric: tabular-nums; }
.btn.cmd .cd:empty { display: none; }
.btn.cmd.armed, .btn.cmd.armed:hover, .btn.cmd.armed:active, .btn.cmd.armed:disabled { background: var(--fg); color: #000; font-weight: 400; opacity: 1; }
.btn.cmd.armed small { color: #333; }
.progress { margin: 18px 0 4px; }
.progress .track { height: 4px; background: rgba(255,255,255,.18); border-radius: 2px; overflow: hidden; }
.progress .bar { height: 100%; width: 0; margin: 0; position: static; background: #fff; border-radius: 2px; transition: width .25s linear; }   /* margin/position anulan la regla genérica .bar (subidas), que la sacaba de la pista */
.progress.paused .bar { transition: none; opacity: .6; }
.progress .ptime { display: flex; justify-content: space-between; margin-top: 6px; font: 12px var(--mono); color: var(--mute); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .buttons { grid-template-columns: 1fr 1fr; } }

.dev { border: 1px solid var(--line2); border-radius: 12px; padding: 12px 14px; }
.dev .name { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bad); flex: none; }
.dot.online { background: var(--ok); } .dot.stale { background: var(--warn); }
.dev .meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 14px; margin-top: 4px; }
.dev .meta span { white-space: nowrap; }
.dev-head { flex-wrap: wrap; row-gap: 10px; }
.dev-head h2 { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.dev-head .count { font: 12px var(--mono); letter-spacing: .06em; color: var(--mute); margin-top: 5px; }
.head-actions { display: flex; gap: 8px; margin-left: auto; }
.head-actions .btn.small { height: 40px; display: inline-flex; align-items: center; }
.keep-row { display: flex; align-items: center; min-height: 24px; margin: -2px 0 14px; }
.keep-row[hidden] { display: none; }
.toggle { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--mute); font: 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.toggle .knob { position: relative; width: 34px; height: 18px; border: 1px solid var(--line); border-radius: 9px; transition: border-color .2s, background .2s; }
.toggle .knob::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--mute); transition: left .2s, background .2s; }
.toggle[aria-pressed="true"] { color: var(--fg); }
.toggle[aria-pressed="true"] .knob { border-color: var(--fg); background: var(--fg); }   /* ON = relleno blanco (owner), OFF = contorno */
.toggle[aria-pressed="true"] .knob::after { left: 18px; background: #111; }
.toggle:disabled { opacity: .5; cursor: default; }
.dev .keep { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line2); display: flex; }
.dev .vol { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line2); }
.dev .vol-head { display: flex; align-items: center; gap: 10px; font: 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.dev .vol-head output { color: var(--fg); font-variant-numeric: tabular-nums; }
.dev .vol-head .link { margin-left: auto; text-transform: none; letter-spacing: 0; }
.dev .ready { font: 11px var(--mono); margin-top: 4px; letter-spacing: .04em; }
.dev .ready.ok { color: var(--ok); } .dev .ready.no { color: var(--warn); }

.content { list-style: none; margin: 0; padding: 0; }
.content li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line2); }
.content li:first-child { border-top: 0; padding-top: 0; }
.content .info { flex: 1; min-width: 0; }
.content .info .n { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload { margin-bottom: 14px; }
.upload-name { display: flex; justify-content: space-between; font: 13px var(--mono); }
.bar { height: 1px; background: var(--line2); margin: 10px 0; position: relative; }
.bar div { position: absolute; left: 0; top: -1px; height: 3px; width: 0; background: var(--fg); transition: width .2s; }

/* modo Show / Individual */
.mode { margin-left: 0; justify-self: center; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--line2); border-radius: 8px; overflow: hidden; }   /* ambas mitades del mismo ancho (owner) */
.mode-btn { font: 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 7px 14px; text-align: center; background: transparent; color: var(--mute); border: 0; cursor: pointer; }
.mode-btn.on { background: var(--fg); color: #000; }
/* Pop-up de confirmación */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.7); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 50; }
.modal[hidden] { display: none; }
.modal-box { width: min(440px, 100%); background: #141414; border: 1px solid var(--fg); border-radius: 14px; padding: 26px 26px 22px; }
.modal-title { font: 200 26px/1.1 var(--display); margin-bottom: 12px; }
.modal-text { font: 300 15px/1.5 var(--display); color: var(--mute); margin: 0 0 22px; }
.modal-text strong { color: var(--fg); font-weight: 400; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
.btn.danger { background: var(--fg); color: #000; border-color: var(--fg); font-weight: 500; }
/* Pantalla (ajustes para todas las gafas) */
.sliders { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; }
.sliders label { display: flex; flex-direction: column; gap: 6px; font: 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.sliders label span { display: flex; justify-content: space-between; }
.sliders output { color: var(--fg); font-variant-numeric: tabular-nums; text-transform: none; }
.sliders .shape { grid-column: 1 / -1; display: flex; justify-content: center; margin-top: 6px; }   /* CURVED | DOME | 360 centrado bajo los sliders (owner) */
.sliders .shape .mode { margin-left: 0; }
.sliders .shape .mode-btn { padding: 9px 22px; }
.sliders .shape.stereo { flex-direction: column; align-items: center; gap: 8px; margin-top: 10px; }
.sliders .shape.stereo > span { text-transform: uppercase; letter-spacing: .08em; font-size: 12px; text-align: center; }
.sliders label.off { opacity: .35; pointer-events: none; }
.sliders label[hidden] { display: none; }
.save-bar { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line2); font: 12px var(--mono); letter-spacing: .04em; }
.save-bar[hidden] { display: none; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; padding: 0; border: 0; margin: 0; }
input[type=range]::-webkit-slider-runnable-track { height: 2px; background: rgba(255,255,255,.3); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--fg); margin-top: -8px; border: 0; }
input[type=range]::-moz-range-track { height: 2px; background: rgba(255,255,255,.3); }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--fg); border: 0; }
@media (max-width: 640px) { .sliders { grid-template-columns: 1fr; } }
.btn.cmd .lbl { font: 12px var(--mono); color: inherit; }
.btn.cmd .lbl:empty { display: none; }
.dev.selectable { cursor: pointer; }
.dev.selectable:hover { border-color: var(--line); }
.dev.selected { border-color: var(--fg); background: var(--panel2); }
#modeHint { margin: -6px 0 12px; }

.sub-mode { display: flex; justify-content: center; margin: -4px 0 16px; }   /* ALL | INDIVIDUAL dentro de CONTROL */
.main-tabs .mode-btn { padding-left: 26px; padding-right: 26px; }
.type-hint { font: 11px/1.5 var(--mono); margin: -4px 0 10px; }
.sliders .group-title { grid-column: 1 / -1; font: 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg); text-align: center; margin-top: 18px; }   /* FORMAT / POSITION / PLAYBACK (owner 2026-11-08) */
.sliders .group-title:first-child { margin-top: 0; }
/* Cada sección en 2 columnas (owner 2026-11-08): SHAPE | STEREO, DISTANCE | WIDTH, HEIGHT | ANCHOR, VOLUME | LOOP VIDEO */
.sliders .shape.stereo { grid-column: auto; margin-top: 0; align-self: center; }
.sliders .shape.stereo .mode-btn { padding: 9px 14px; }
.sliders .group-title { border-top: 1px solid #fff; padding-top: 14px; }   /* línea blanca antes de cada título de sección (owner 2026-11-08) */
/* Títulos de cada fila a la misma altura (owner 2026-11-08): selectores arriba, título con la misma letra que los sliders */
.sliders .shape.stereo { align-self: start; gap: 6px; }
.sliders .shape.stereo > span { font: 11px var(--mono); letter-spacing: .08em; line-height: normal; }