/* ════════════════════════════════════════════════════════════════════
   Control móvil de escenas OBS — botonera remota (/remote)
   Mismos tokens del panel del operador, en versión standalone.
   ════════════════════════════════════════════════════════════════════ */
:root {
  --base:  #090E1A;
  --s1:    #0F1624;
  --s2:    #162030;
  --s3:    #1D2A3E;
  --bdr-s: rgba(255,255,255,0.08);
  --bdr-d: rgba(255,255,255,0.12);
  --bdr-st:rgba(255,255,255,0.20);
  --amber: #D4A84B;
  --amb-tx:#F0CB7C;
  --amb-bg:rgba(212,168,75,0.07);
  --amb-rg:rgba(212,168,75,0.18);
  --t1: #F0F4FA;
  --t2: #8A9AB8;
  --t3: #4E6080;
  --green: #34D399;
  --red:   #F87171;
  --live:  #F8504B;
  --live-bg: rgba(248,80,75,0.10);
  --live-bdr:rgba(248,80,75,0.30);
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 12px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--base);
  color: var(--t1);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; cursor: pointer; }

.rm-wrap {
  min-height: 100dvh;
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: calc(14px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom));
}
.rm-wrap [hidden] { display: none !important; }

/* ── Cabecera ── */
.rm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.rm-church { font-size: 15px; font-weight: 700; }
.rm-sub {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--t3);
  margin-top: 2px;
}
.rm-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--t3);
  border: 1px solid var(--bdr-s);
  border-radius: 14px;
  padding: 4px 11px;
  white-space: nowrap;
  transition: color 0.3s, border-color 0.3s;
}
.rm-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--t3);
  flex-shrink: 0;
  transition: background 0.3s;
}
.rm-pill.on { color: var(--green); border-color: rgba(52,211,153,0.25); }
.rm-pill.on .rm-dot { background: var(--green); box-shadow: 0 0 5px var(--green); }
.rm-pill.err { color: var(--red); border-color: rgba(248,113,113,0.25); }
.rm-pill.err .rm-dot { background: var(--red); }

/* ── Botonera ── */
.rm-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  align-content: start;
}
@media (min-width: 520px) { .rm-grid { grid-template-columns: repeat(3, 1fr); } }

.rm-btn {
  min-height: 92px;
  background: var(--s2);
  border: 1px solid var(--bdr-s);
  border-radius: var(--r-lg);
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
  color: var(--t1);
  transition: border-color 0.13s, background 0.13s, transform 0.1s;
  user-select: none;
  -webkit-user-select: none;
}
.rm-btn:active { transform: scale(0.96); }
.rm-btn.switching { border-color: var(--amber); background: var(--amb-bg); }
.rm-btn.is-live { border-color: var(--live-bdr); background: var(--live-bg); }
.rm-btn-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 22px;
}
.rm-key {
  width: 22px;
  height: 22px;
  border-radius: var(--r-sm);
  background: var(--amb-bg);
  border: 1px solid var(--amb-rg);
  color: var(--amb-tx);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.rm-key.empty { visibility: hidden; } /* conserva la alineación */
.rm-live-badge {
  display: none;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.10em;
  color: var(--live);
  white-space: nowrap;
}
.rm-btn.is-live .rm-live-badge { display: inline-flex; }
.rm-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 6px var(--live);
  animation: rm-pulse 1.6s ease-in-out infinite;
}
@keyframes rm-pulse { 0%,100%{opacity:1} 50%{opacity:0.45} }
.rm-switch-note {
  display: none;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amb-tx);
  white-space: nowrap;
}
.rm-btn.switching .rm-switch-note { display: inline; }
.rm-btn.switching .rm-live-badge { display: none; }
.rm-name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* ── Estados vacíos ── */
.rm-empty {
  font-size: 13px;
  color: var(--t3);
  text-align: center;
  padding: 40px 20px;
  line-height: 1.6;
}
.rm-offline {
  background: var(--s1);
  border: 1px solid var(--bdr-s);
  border-radius: var(--r-lg);
  padding: 30px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  margin-top: 20px;
}
.rm-offline-icon { color: var(--t3); }
.rm-offline-title { font-size: 15px; font-weight: 700; }
.rm-offline-text { font-size: 12.5px; color: var(--t2); line-height: 1.6; max-width: 380px; }
.rm-offline-text strong { color: var(--t1); font-weight: 600; }

/* ── Pie ── */
.rm-foot { margin-top: auto; text-align: center; padding-top: 10px; }
.rm-back {
  font-size: 12px;
  color: var(--t3);
  text-decoration: none;
  transition: color 0.13s;
}
.rm-back:hover { color: var(--t2); }