:root {
  --verde: #95d600;
  --verde-osc: #6ea300;
  --negro: #0b0b0b;
  --gris: #1a1a1a;
  --texto: #f2f2f2;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--negro);
  color: var(--texto);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
header.brand {
  padding: 18px 20px 10px;
  text-align: center;
}
header.brand img { max-width: 220px; width: 60%; }
main {
  flex: 1;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 16px 20px 40px;
}
h1 {
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--verde);
  margin-bottom: 8px;
}
p.sub { color: #b5b5b5; margin-bottom: 20px; line-height: 1.45; }
.btn {
  display: block;
  width: 100%;
  padding: 15px 18px;
  margin: 10px 0;
  background: var(--verde);
  color: #0b0b0b;
  font-weight: 800;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: none;
  border-radius: 12px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.btn:active { background: var(--verde-osc); }
.btn.secundario { background: var(--gris); color: var(--texto); border: 1px solid #333; }
.card {
  background: var(--gris);
  border: 1px solid #2a2a2a;
  border-radius: 14px;
  padding: 16px;
  margin: 12px 0;
}
label { display: block; font-size: 0.85rem; color: #b5b5b5; margin: 12px 0 4px; }
input {
  width: 100%;
  padding: 13px 14px;
  background: #101010;
  border: 1px solid #333;
  border-radius: 10px;
  color: var(--texto);
  font-size: 1rem;
}
input:focus { outline: 2px solid var(--verde); border-color: var(--verde); }
.puntos-big {
  font-size: 3.2rem;
  font-weight: 900;
  color: var(--verde);
  text-align: center;
  line-height: 1;
}
.puntos-label { text-align: center; color: #b5b5b5; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.1em; margin-bottom: 4px; }
.estado { padding: 12px 14px; border-radius: 10px; margin: 12px 0; font-weight: 600; line-height: 1.4; }
.estado.ok { background: #10310a; color: #b7f36b; border: 1px solid #3f7a1f; }
.estado.err { background: #3a0f0f; color: #ff9d9d; border: 1px solid #7a2020; }
.estado.warn { background: #3a2f0d; color: #ffe08a; border: 1px solid #7a641c; }
.detalle { font-size: 0.85rem; color: #9c9c9c; }
.detalle td { padding: 3px 8px 3px 0; vertical-align: top; }
.loader {
  border: 4px solid #2a2a2a;
  border-top-color: var(--verde);
  border-radius: 50%;
  width: 42px; height: 42px;
  margin: 18px auto;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.hidden { display: none !important; }
footer { text-align: center; color: #555; font-size: 0.75rem; padding: 14px; }