:root {
  --fondo: #0f1115; --panel: #171a21; --borde: #262b36;
  --texto: #e6e8ec; --tenue: #98a0b0; --acento: #4f8cff;
  --bien: #38b26a; --mal: #e0524a; --espera: #d9a441;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 15px/1.55 "Segoe UI", system-ui, sans-serif;
}
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }

header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .8rem 1.4rem; border-bottom: 1px solid var(--borde);
  background: var(--panel);
}
.marca { font-weight: 700; font-size: 1.15rem; color: var(--texto); }
.marca span {
  display: block; font-size: .68rem; font-weight: 400; color: var(--tenue);
  letter-spacing: .12em; text-transform: uppercase;
}
nav { display: flex; align-items: center; gap: 1.1rem; }
.quien { color: var(--tenue); }
.salir { color: var(--tenue); }
.chip {
  display: inline-block; margin-left: .35rem; padding: 0 .4rem;
  background: var(--acento); color: #fff; border-radius: 999px; font-size: .75rem;
}

main { max-width: 1000px; margin: 0 auto; padding: 1.4rem; }
.tarjeta {
  background: var(--panel); border: 1px solid var(--borde); border-radius: 12px;
  padding: 1.2rem 1.4rem; margin-bottom: 1.2rem;
}
.estrecha { max-width: 420px; margin: 3rem auto; }
h1 { font-size: 1.35rem; margin: 0 0 .9rem; }
h2 { font-size: 1.05rem; margin: 0 0 .7rem; }
.columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 800px) { .columnas { grid-template-columns: 1fr; } }

label { display: block; margin-bottom: .8rem; color: var(--tenue); }
input, textarea, select {
  width: 100%; margin-top: .3rem; padding: .55rem .7rem;
  background: #0d0f14; color: var(--texto);
  border: 1px solid var(--borde); border-radius: 8px; font: inherit;
}
textarea { font-family: ui-monospace, Consolas, monospace; font-size: .88rem; }
input:focus, textarea:focus { outline: 2px solid var(--acento); border-color: transparent; }

button, .boton {
  display: inline-block; padding: .55rem 1rem; border: 0; border-radius: 8px;
  background: var(--acento); color: #fff; font: inherit; font-weight: 600;
  cursor: pointer;
}
button:disabled { background: #2a3140; color: var(--tenue); cursor: not-allowed; }
.pequeno { padding: .3rem .6rem; font-size: .82rem; }
.tenue-boton { background: #2a3140; }
.linea { display: flex; align-items: flex-end; gap: .6rem; flex-wrap: wrap; }
.linea label { margin-bottom: 0; }
.linea form { display: contents; }

table { width: 100%; border-collapse: collapse; margin-top: .4rem; }
th { text-align: left; font-weight: 600; color: var(--tenue); font-size: .82rem; }
th, td { padding: .5rem .5rem .5rem 0; border-bottom: 1px solid var(--borde); }
tr:last-child td { border-bottom: 0; }
.tenue { color: var(--tenue); }
.acciones { display: flex; gap: .4rem; justify-content: flex-end; }

.estado { font-weight: 600; }
.estado.hecho, .estado.activo { color: var(--bien); }
.estado.error, .estado.inactivo { color: var(--mal); }
.estado.trabajando, .estado.en-cola, .estado.pendiente { color: var(--espera); }
.hecho { color: var(--bien); }
.pendiente { color: var(--tenue); }
.aviso-celda { color: var(--espera); }

.aviso {
  background: #3a2020; border: 1px solid #5c2c2c; color: #ffb4ae;
  padding: .6rem .8rem; border-radius: 8px;
}
.bien {
  background: #16301f; border: 1px solid #27563a; color: #a8e6bf;
  padding: .6rem .8rem; border-radius: 8px;
}
.trabajando {
  background: #302a16; border: 1px solid #5c4d27; color: #f0d79a;
  padding: .6rem .8rem; border-radius: 8px;
}
.vacio { color: var(--tenue); font-style: italic; }
.miga { color: var(--tenue); margin-top: 0; }
.pie { color: var(--tenue); font-size: .9rem; margin-bottom: 0; }

.pasos { margin: 0; padding-left: 1.1rem; }
.pasos li { margin-bottom: .9rem; }
.pasos form { display: inline-block; margin-right: .6rem; }

pre {
  background: #0d0f14; border: 1px solid var(--borde); border-radius: 8px;
  padding: .8rem; overflow-x: auto; font-size: .82rem; color: var(--tenue);
  max-height: 340px;
}
video { width: 100%; max-width: 320px; border-radius: 10px; background: #000; }
code { background: #0d0f14; padding: .1rem .35rem; border-radius: 5px; }
details summary { cursor: pointer; color: var(--tenue); }