/* site.css — estilos compartidos del portal DataLogger por USB. */
:root {
  color-scheme: dark;
  --bg: #0f1115;
  --card: #171a21;
  --line: #262b36;
  --fg: #e7e9ee;
  --dim: #9aa3b2;
  --accent: #3b82f6;
  --ok: #34d399;
  --warn: #fbbf24;
  --err: #f87171;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg); color: var(--fg); line-height: 1.5;
}
.wrap { max-width: 860px; margin: 0 auto; padding: 32px 20px 64px; }
.wrap.narrow { max-width: 620px; }

h1 { font-size: 1.5rem; margin: 0 0 6px; }
h2 { font-size: 1.05rem; margin: 0 0 12px; }
.sub { color: var(--dim); margin: 0 0 28px; }
a { color: var(--accent); }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 22px; margin-bottom: 18px;
}

button, .btn {
  font: inherit; cursor: pointer; border: 0; border-radius: 10px;
  padding: 12px 20px; background: var(--accent); color: #fff; font-weight: 600;
  text-decoration: none; display: inline-block;
}
button:hover, .btn:hover { background: #2f6fe0; }
button:disabled { background: #394050; color: #8a91a0; cursor: default; }
button.ghost { background: #2a303c; }
button.ghost:hover { background: #333b4a; }

input[type=password], input[type=text], select {
  font: inherit; background: #0f1115; color: var(--fg);
  border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; width: 100%;
}
label.inline { display: flex; align-items: center; gap: 9px; color: var(--dim); font-size: .92rem; }
label.inline input { width: auto; }

.ok { color: var(--ok); } .warn { color: var(--warn); } .err { color: var(--err); }
.muted { color: var(--dim); font-size: .88rem; }
code {
  background: #0f1115; border: 1px solid var(--line);
  border-radius: 5px; padding: 1px 5px; font-size: .85em;
}

/* Landing: grilla de destinos */
.tiles { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.tile {
  display: block; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 22px; transition: border-color .15s, transform .15s;
}
.tile:hover { border-color: var(--accent); transform: translateY(-2px); }
.tile .ico { font-size: 1.7rem; }
.tile h3 { margin: 10px 0 6px; font-size: 1.05rem; }
.tile p { margin: 0; color: var(--dim); font-size: .9rem; }
.tile.off { opacity: .5; pointer-events: none; }

/* Pasos */
ol.steps { list-style: none; padding: 0; margin: 0 0 4px; }
ol.steps li {
  display: flex; gap: 10px; align-items: baseline;
  padding: 5px 0; color: var(--dim); font-size: .93rem;
}
ol.steps li::before {
  content: "○"; width: 1.1em; flex: none; text-align: center;
}
ol.steps li[data-state=doing] { color: var(--fg); }
ol.steps li[data-state=doing]::before { content: "◐"; color: var(--warn); }
ol.steps li[data-state=done] { color: var(--fg); }
ol.steps li[data-state=done]::before { content: "●"; color: var(--ok); }
ol.steps li[data-state=fail] { color: var(--err); }
ol.steps li[data-state=fail]::before { content: "✕"; color: var(--err); }

/* Tabla clave/valor del device */
.kv { display: grid; grid-template-columns: minmax(140px, auto) 1fr; gap: 6px 16px; font-size: .93rem; }
.kv .k { color: var(--dim); }
.kv .v { word-break: break-word; }

/* Barra de progreso */
#progress-wrap { margin-top: 16px; }
.barbg { background: #0f1115; border: 1px solid var(--line); border-radius: 8px; height: 12px; overflow: hidden; }
.barbg > div { height: 100%; width: 0; background: var(--accent); transition: width .15s; }
#progress-label { color: var(--dim); font-size: .86rem; margin-top: 7px; min-height: 1.2em; }

/* Log */
#log {
  margin-top: 14px; max-height: 260px; overflow-y: auto;
  background: #0f1115; border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 13px; font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: .82rem; line-height: 1.65;
}
#log:empty { display: none; }
.logline { white-space: pre-wrap; word-break: break-word; }

.spin {
  display: inline-block; width: .9em; height: .9em; margin-right: .4em;
  border: 2px solid #ffffff55; border-top-color: #fff; border-radius: 50%;
  animation: sp .7s linear infinite; vertical-align: -2px;
}
@keyframes sp { to { transform: rotate(360deg); } }

.note {
  border-left: 3px solid var(--warn); background: #1d1a12;
  padding: 12px 15px; border-radius: 0 9px 9px 0; font-size: .9rem;
}
.note.info { border-left-color: var(--accent); background: #131a26; }

/* ── Shell del portal ─────────────────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 20px; font-weight: 600;
}
.topbar.fixed {
  position: sticky; top: 0; z-index: 9; margin: 0;
  background: #1f2530; border-bottom: 1px solid var(--line);
  padding: 7px 12px; font-size: .9rem;
}
button.small { padding: 6px 13px; font-size: .88rem; }

/* Los destinos del menu son botones, no links: el puerto ya esta abierto y no
   se puede navegar sin perderlo. */
button.tile {
  display: block; width: 100%; text-align: left; font: inherit; font-weight: 400;
  color: inherit; background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 22px; cursor: pointer;
  transition: border-color .15s, transform .15s;
}
button.tile:hover { background: var(--card); border-color: var(--accent); transform: translateY(-2px); }
button.tile h3 { margin: 10px 0 6px; font-size: 1.05rem; font-weight: 600; }
button.tile p { margin: 0; color: var(--dim); font-size: .9rem; }

iframe#spa { display: block; border: 0; width: 100%; height: calc(100vh - 40px); background: #fff; }

.logbox {
  margin-top: 16px; max-height: 260px; overflow-y: auto;
  background: #0f1115; border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 13px; font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: .82rem; line-height: 1.65;
}
.logbox:empty { display: none; }