/* client.css — estética de la landing de DrGrey: terminal verde, monoespaciada.
   Mismas variables que production/landing/index.html para que se sientan el mismo
   producto (mismo negro, mismo verde, mismas etiquetas con "//"). */
:root{
  --bg:#0a0e0a; --fg:#7dfca0; --dim:#3f6b4d; --amber:#ffb000; --red:#ff4040;
  --blue:#56b6c2; --border:#1c2a1c;
  --mono:"JetBrains Mono","Consolas","Courier New",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg); color:var(--fg); font-family:var(--mono);
  font-size:14px; line-height:1.7; min-height:100vh;
  background-image:repeating-linear-gradient(0deg,rgba(125,252,160,.022) 0 1px,transparent 1px 3px);
  padding:32px 16px;
}
a{color:var(--blue);text-decoration:none} a:hover{color:var(--fg)}
.wrap{max-width:620px;margin:0 auto}
.muted,.dim{color:var(--dim)}
.sm{font-size:12px}
.amber{color:var(--amber)} .red{color:var(--red)}
b{font-weight:400;color:var(--fg)}

/* ── cabecera ───────────────────────────────────────────────────────────── */
.hdr{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.hdr .logo{width:52px;height:auto;opacity:.95}
.hdr h1{font-size:19px;letter-spacing:4px;font-weight:400}
.hdr .tag{color:var(--dim);font-size:12px}
.hdr .status{margin-left:auto;font-size:11px;color:var(--dim);white-space:nowrap}
.dot{display:inline-block;width:7px;height:7px;border:1px solid var(--dim);margin-right:6px}
.dot.on{background:var(--fg);border-color:var(--fg)}
.dot.busy{background:var(--amber);border-color:var(--amber);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ── bloques (como la landing: separador + etiqueta con //) ──────────────── */
.card{border-top:1px solid var(--border);padding:18px 0}
.card h2{font-size:11px;letter-spacing:2px;color:var(--dim);text-transform:uppercase;
  font-weight:400;margin-bottom:10px}
.card h2::before{content:"// ";color:var(--fg)}
.card.center{text-align:center}
.big-icon{font-size:26px;color:var(--fg);margin-bottom:6px}
.card p{margin-bottom:10px}

/* ── botones ─────────────────────────────────────────────────────────────── */
.btn{font-family:var(--mono);font-size:13px;background:transparent;color:var(--fg);
  border:1px solid var(--border);padding:8px 16px;cursor:pointer;display:inline-block}
.btn:hover:not(:disabled){border-color:var(--fg)}
.btn:disabled{opacity:.4;cursor:default}
.btn.primary{border-color:var(--fg)}
.btn.primary:hover{background:rgba(125,252,160,.08)}
.btn.lg{padding:10px 22px}
.btn.ghost{color:var(--dim)}

/* ── modelo detectado ────────────────────────────────────────────────────── */
.model-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.model-name{font-size:19px;color:var(--fg);line-height:1.3}
.badge{display:inline-block;border:1px solid var(--border);padding:2px 9px;font-size:11px;
  color:var(--amber)}
.badge.ok{color:var(--fg);border-color:rgba(125,252,160,.35)}
.badge.warn{color:var(--amber);border-color:rgba(255,176,0,.3)}

/* ── opciones de calibración ─────────────────────────────────────────────── */
.options{display:flex;flex-direction:column;gap:8px}
.opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  font-family:var(--mono);font-size:13px;background:transparent;color:var(--fg);
  border:1px solid var(--border);padding:12px 14px;cursor:pointer}
.opt:hover:not(:disabled){border-color:var(--fg);background:rgba(125,252,160,.04)}
.opt:disabled{opacity:.4;cursor:default}
.opt .ic{color:var(--fg)}
.opt .t{flex:1}
.opt .t b{font-weight:400}
.opt .t div{color:var(--dim);font-size:12px}

/* ── listas y píldoras tipo landing ──────────────────────────────────────── */
ul.tick{list-style:none;font-size:13px}
ul.tick li{padding:2px 0 2px 18px;position:relative;color:var(--dim)}
ul.tick li::before{content:"›";position:absolute;left:0;color:var(--fg)}
.pill{display:inline-block;border:1px solid var(--border);padding:2px 8px;
  margin:2px 2px 2px 0;font-size:11px;color:var(--fg)}
.pill.basic{color:var(--dim)}
.pill.soon{color:var(--amber);border-color:rgba(255,176,0,.3)}
.sublabel{font-size:11px;letter-spacing:1px;color:var(--dim);text-transform:uppercase;margin:12px 0 4px}
.price{font-size:24px;color:var(--fg)}
.price small{font-size:12px;color:var(--dim)}

/* ── formulario ──────────────────────────────────────────────────────────── */
label{display:block;font-size:11px;letter-spacing:1px;color:var(--dim);
  text-transform:uppercase;margin-bottom:6px}
.row-inline{display:flex;gap:8px}
input[type=text]{flex:1;font-family:var(--mono);font-size:14px;background:transparent;
  color:var(--fg);border:1px solid var(--border);padding:8px 12px;letter-spacing:1px}
input[type=text]:focus{outline:none;border-color:var(--fg)}
input[type=text]::placeholder{color:var(--dim)}
.divider{text-align:center;color:var(--dim);font-size:11px;margin:14px 0}
.err{color:var(--red);font-size:12px;margin-top:8px;min-height:1em}
.note{border:1px solid rgba(255,176,0,.3);color:var(--amber);font-size:12px;
  padding:10px 12px;margin-top:12px}

/* ── progreso ────────────────────────────────────────────────────────────── */
.bar{height:6px;border:1px solid var(--border);margin:4px 0 10px}
.bar>div{height:100%;width:0;background:var(--fg);transition:width .25s}
.pstate{font-size:13px;color:var(--dim)}
.pstate.ok{color:var(--fg)} .pstate.err{color:var(--red)} .pstate.wait{color:var(--amber)}

/* ── log y pie ───────────────────────────────────────────────────────────── */
.log-wrap{margin-top:18px;border-top:1px solid var(--border);padding-top:12px}
.log-wrap summary{cursor:pointer;font-size:11px;letter-spacing:2px;color:var(--dim);
  text-transform:uppercase;list-style:none}
.log-wrap summary::before{content:"// ";color:var(--fg)}
.log{margin-top:10px;max-height:190px;overflow:auto;font-size:11px;color:var(--dim);
  white-space:pre-wrap;border:1px solid var(--border);padding:10px}
.foot{margin-top:22px;padding-top:14px;border-top:1px solid var(--border);
  font-size:11px;color:var(--dim);display:flex;justify-content:space-between;gap:10px}
.step{display:none} .step.active{display:block}

/* ── Aviso VISUAL de inclinar el dron a 90° (estado waiting_up90) ────────────── */
#up90{margin-top:16px;border:1px solid var(--amber);border-radius:6px;
  background:rgba(255,176,0,.05);padding:14px 12px;text-align:center;
  animation:up90pulse 1.6s ease-in-out infinite}
@keyframes up90pulse{0%,100%{border-color:rgba(255,176,0,.45)}50%{border-color:var(--amber)}}
.up90-title{color:var(--amber);font-size:14px;letter-spacing:1px;margin-bottom:8px}
.up90-svg{width:100%;max-width:280px;height:auto}
.up90-hint{color:var(--fg);font-size:13px;margin-top:6px;line-height:1.5}
.u-ground{stroke:var(--dim);stroke-width:1.5;stroke-dasharray:4 5}
.u-ghost{stroke:var(--dim);fill:none;stroke-width:2;opacity:.45}
.u-ghost rect{fill:rgba(63,107,77,.15)}
.u-gimbal{stroke-width:2}
.u-arrow{stroke:var(--amber);stroke-width:2.5}
.u-arrowhead{fill:var(--amber)}
.u-drone{stroke:var(--fg);fill:none;stroke-width:2.5;transform-box:fill-box;
  transform-origin:center;animation:u-stand 2.6s ease-in-out infinite}
.u-drone rect{fill:rgba(125,252,160,.12)}
.u-drone circle{fill:rgba(125,252,160,.15)}
.u-deg{fill:var(--fg);font-family:var(--mono);font-size:20px;font-weight:400}
/* el dron se "levanta": arranca acostado (-90°) y sube a vertical (0°), y repite */
@keyframes u-stand{0%,12%{transform:rotate(-88deg)}55%,100%{transform:rotate(0deg)}}