/* Página de instalación de VJS Command Center. Paleta VJS. */
:root {
  --negro: #111820;
  --negro-2: #1b2430;
  --amarillo: #f4c400;
  --amarillo-hover: #ffd21f;
  --fondo: #f3f5f8;
  --tarjeta: #ffffff;
  --texto: #1d2733;
  --texto-suave: #5b6778;
  --borde: #e1e6ed;
  --alerta-fondo: #fff7d6;
  --alerta-borde: #e6c200;
  --enlace: #0b5cad;
  --fuente: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0c1117;
    --tarjeta: #161e28;
    --texto: #eef2f7;
    --texto-suave: #a9b4c2;
    --borde: #283343;
    --alerta-fondo: #2a2410;
    --alerta-borde: #8a7300;
    --enlace: #7cb8ff;
  }
}

[hidden] { display: none !important; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.55;
}
a { color: var(--enlace); }

/* ---------- cabecera ---------- */
.cabeza {
  background: var(--negro);
  color: #fff;
  text-align: center;
  padding: calc(34px + env(safe-area-inset-top)) 20px 64px;
}
.cabeza-logo { width: 104px; height: auto; display: block; margin: 0 auto 14px; }
.cabeza h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: .2px; }
.cabeza-sub { margin: 10px auto 0; max-width: 560px; color: #b8c2cf; font-size: 15.5px; }

/* ---------- contenido ---------- */
.contenido { max-width: 680px; margin: -40px auto 0; padding: 0 16px 32px; }

.selector {
  display: flex; gap: 4px;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 14px;
  box-shadow: 0 8px 22px rgba(8, 12, 18, .12);
}
.selector button {
  flex: 1;
  min-height: 42px;
  border: 0; border-radius: 9px;
  background: transparent;
  color: var(--texto-suave);
  font: 600 14px var(--fuente);
  cursor: pointer;
  padding: 6px 8px;
}
.selector button:hover { color: var(--texto); }
.selector button[aria-pressed="true"] { background: var(--negro); color: #fff; }
.selector button:focus-visible { outline: 2px solid var(--amarillo); outline-offset: 1px; }

/* Solo se ve la tarjeta del sistema elegido. */
.tarjeta { display: none; }
html[data-sistema="android"] [data-panel="android"],
html[data-sistema="iphone"] [data-panel="iphone"],
html[data-sistema="pc"] [data-panel="pc"] { display: block; }

.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 16px;
  padding: 24px 24px 20px;
  box-shadow: 0 8px 22px rgba(8, 12, 18, .08);
}
.tarjeta-cabeza h2 { margin: 0; font-size: 21px; }
.tarjeta-cabeza p { margin: 4px 0 18px; color: var(--texto-suave); font-size: 14.5px; }

.btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  min-height: 52px;
  border-radius: 12px;
  font: 700 16.5px var(--fuente);
  text-decoration: none;
  cursor: pointer;
  border: 0;
  padding: 12px 18px;
}
.btn-primario { background: var(--amarillo); color: var(--negro); }
.btn-primario:hover { background: var(--amarillo-hover); }
.btn-secundario { background: var(--negro); color: #fff; min-height: 46px; font-size: 15px; margin-top: 10px; }
.btn:focus-visible { outline: 3px solid var(--enlace); outline-offset: 2px; }

.pasos { list-style: none; counter-reset: paso; margin: 22px 0 0; padding: 0; }
.pasos li {
  counter-increment: paso;
  position: relative;
  padding: 0 0 16px 46px;
  font-size: 15px;
  color: var(--texto-suave);
}
.pasos li strong { color: var(--texto); font-weight: 600; }
.pasos li::before {
  content: counter(paso);
  position: absolute; left: 0; top: -1px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--negro);
  color: var(--amarillo);
  font-weight: 700; font-size: 14px;
}
@media (prefers-color-scheme: dark) {
  .pasos li::before { background: var(--amarillo); color: var(--negro); }
  .selector button[aria-pressed="true"] { background: var(--amarillo); color: var(--negro); }
  .btn-secundario { background: #2a3544; }
}

.alerta {
  background: var(--alerta-fondo);
  border: 1px solid var(--alerta-borde);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 14.5px;
}
.dir { font-family: Consolas, "SF Mono", monospace; font-weight: 600; }

.otra-forma {
  border-top: 1px solid var(--borde);
  margin-top: 6px;
  padding-top: 14px;
  font-size: 14.5px;
  color: var(--texto-suave);
}
.otra-forma summary { cursor: pointer; color: var(--texto); font-weight: 600; }
.otra-forma p { margin: 8px 0 0; }

.ya-instalada { text-align: center; font-size: 14.5px; color: var(--texto-suave); margin: 22px 0 0; }

.pie {
  text-align: center;
  font-size: 13.5px;
  color: var(--texto-suave);
  padding: 8px 16px calc(28px + env(safe-area-inset-bottom));
}

@media (max-width: 480px) {
  .cabeza { padding-top: calc(26px + env(safe-area-inset-top)); }
  .cabeza h1 { font-size: 23px; }
  .tarjeta { padding: 20px 16px 14px; }
  .selector button { font-size: 13px; padding: 6px 4px; }
}

/* 23-sep-2026: Android se instala desde Chrome */
.alerta-ok { background: #e7f6ec; border-color: #b9e2c7; color: #14532d; }
.tecla { display: inline-block; min-width: 22px; padding: 0 6px; border: 1px solid var(--borde); border-radius: 6px; text-align: center; font-weight: 700; line-height: 20px; }
#and-btn { margin-bottom: 4px; }
@media (prefers-color-scheme: dark) { .alerta-ok { background: #0f2a1a; border-color: #1f5a36; color: #bfe8cc; } }