:root {
  /* Fondos (igual que el Cerebro anterior) */
  --bg-page: #020617;
  --bg-panel: #0f172a;
  --bg-panel-alt: #111827;
  --bg-elevado: #1e293b;
  --borde: #334155;
  --borde-suave: #475569;

  /* Texto */
  --texto-principal: #e5e7eb;
  --texto-secundario: #cbd5e1;
  --texto-tenue: #94a3b8;

  /* Verde -- activa / OK */
  --verde-oscuro: #15803d;
  --verde: #16a34a;
  --verde-claro: #22c55e;
  --verde-mas-claro: #86efac;
  --verde-fondo: #052e16;

  /* Azul -- primario / acciones */
  --azul-oscuro: #1d4ed8;
  --azul: #2563eb;
  --azul-claro: #93c5fd;

  /* Rojo -- bloqueada / peligro */
  --rojo-oscuro: #7f1d1d;
  --rojo: #b91c1c;
  --rojo-claro: #dc2626;
  --rojo-mas-claro: #ef4444;
  --rojo-suave: #fca5a5;
  --rojo-fondo: #fecaca;

  /* Amarillo -- prueba / aviso */
  --amarillo-oscuro: #a16207;
  --amarillo: #ca8a04;
  --amarillo-claro: #eab308;
  --amarillo-suave: #fde68a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--texto-principal);
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

a { color: var(--azul-claro); text-decoration: none; }
a:hover { text-decoration: underline; }

.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: 220px;
  background: var(--bg-panel);
  border-right: 1px solid var(--borde);
  padding: 24px 16px;
  flex-shrink: 0;
}

.sidebar h1 {
  font-size: 16px;
  color: var(--texto-principal);
  margin: 0 0 24px 0;
}

.sidebar nav a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--texto-secundario);
  margin-bottom: 4px;
}

.sidebar nav a:hover, .sidebar nav a.activo {
  background: var(--bg-elevado);
  color: var(--texto-principal);
  text-decoration: none;
}

.contenido { flex-grow: 1; padding: 28px 36px; }

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.topbar h2 { margin: 0; font-size: 22px; }

.btn {
  display: inline-block;
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid var(--borde);
  background: var(--bg-elevado);
  color: var(--texto-principal);
  cursor: pointer;
  font-size: 14px;
}

.btn:hover { border-color: var(--borde-suave); text-decoration: none; }

.btn-primario { background: var(--azul); border-color: var(--azul-oscuro); color: #fff; }
.btn-primario:hover { background: var(--azul-oscuro); }

.btn-peligro { background: var(--rojo-claro); border-color: var(--rojo-oscuro); color: #fff; }
.btn-peligro:hover { background: var(--rojo); }

.btn-exito { background: var(--verde-claro); border-color: var(--verde-oscuro); color: #052e16; }
.btn-exito:hover { background: var(--verde); }

.tarjeta {
  background: var(--bg-panel);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}

.grid-resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.resumen-numero { font-size: 28px; font-weight: 700; color: var(--texto-principal); }
.resumen-etiqueta { font-size: 13px; color: var(--texto-tenue); margin-top: 4px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; color: var(--texto-tenue); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--borde); }
td { padding: 10px 12px; border-bottom: 1px solid var(--bg-panel-alt); color: var(--texto-secundario); }
tr:hover td { background: var(--bg-panel-alt); }

.etiqueta {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.etiqueta-activa     { background: var(--verde-fondo); color: var(--verde-mas-claro); }
.etiqueta-prueba      { background: #422006; color: var(--amarillo-suave); }
.etiqueta-bloqueada   { background: var(--rojo-oscuro); color: var(--rojo-suave); }
.etiqueta-reembolsada { background: var(--bg-elevado); color: var(--texto-tenue); }
.etiqueta-expirada    { background: var(--bg-elevado); color: var(--texto-tenue); }

label { display: block; font-size: 13px; color: var(--texto-tenue); margin: 14px 0 6px; }

input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-panel-alt);
  border: 1px solid var(--borde);
  border-radius: 8px;
  color: var(--texto-principal);
  font-size: 14px;
}

input:focus, select:focus, textarea:focus { outline: none; border-color: var(--azul); }

.aviso {
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 18px;
  font-size: 14px;
}

.aviso-error { background: var(--rojo-oscuro); color: var(--rojo-suave); }
.aviso-ok { background: var(--verde-fondo); color: var(--verde-mas-claro); }

.login-caja {
  max-width: 360px;
  margin: 90px auto;
  background: var(--bg-panel);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 32px;
}

.texto-tenue { color: var(--texto-tenue); font-size: 13px; }

.fila-form { display: flex; gap: 16px; }
.fila-form > div { flex: 1; }