:root {
  --bg: #0f1720;
  --panel: #182430;
  --panel2: #1f2e3d;
  --texto: #e6edf3;
  --sub: #93a4b3;
  --borde: #2a3b4c;
  --acento: #2f81f7;
  --ok: #2ea043;
  --error: #f85149;
  --radio: 10px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg);
  color: var(--texto);
}
.centro { min-height: 100vh; display: grid; place-items: center; padding: 20px; }

.barra {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px; background: var(--panel); border-bottom: 1px solid var(--borde);
}
.crece { flex: 1; }
.usuario { color: var(--sub); font-size: 14px; }

.contenido { max-width: 900px; margin: 24px auto; padding: 0 16px; display: grid; gap: 20px; }

.tarjeta {
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 20px;
}
.tarjeta h1, .tarjeta h2 { margin: 0 0 4px; }
.sub { color: var(--sub); margin: 0 0 16px; font-size: 14px; }

.login { width: 340px; max-width: 100%; }
.login h1 { text-align: center; }
.login .sub { text-align: center; }

label { display: block; margin-bottom: 12px; font-size: 13px; color: var(--sub); }
input {
  width: 100%; margin-top: 4px; padding: 10px 12px;
  background: var(--panel2); border: 1px solid var(--borde); border-radius: 8px;
  color: var(--texto); font-size: 14px;
}
input:focus { outline: 2px solid var(--acento); border-color: var(--acento); }

button {
  padding: 10px 16px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--acento); color: #fff; font-size: 14px; font-weight: 600;
}
button:disabled { opacity: .6; cursor: default; }
button.secundario { background: transparent; border: 1px solid var(--borde); color: var(--texto); }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid .acciones { grid-column: 1 / -1; }
.grid .ancho { grid-column: 1 / -1; }
@media (max-width: 560px) { .grid { grid-template-columns: 1fr; } }
.nota { color: var(--sub); font-size: 12px; margin: 12px 0 0; }

.fila-titulo { display: flex; align-items: center; justify-content: space-between; }

.estado { margin-top: 14px; padding: 12px; border-radius: 8px; font-size: 14px; }
.estado.trabajando { background: #10233b; color: #9ecbff; }
.estado.ok { background: #10261a; color: #7ee787; }
.estado.error { background: #2d1618; color: #ff9d97; }

.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th, .tabla td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--borde); }
.tabla th { color: var(--sub); font-weight: 500; }
.tabla a { color: var(--acento); text-decoration: none; }
.vacio { color: var(--sub); text-align: center; padding: 20px; }

.error { color: var(--error); font-size: 13px; margin-top: 8px; }