:root{
  /* colores y tema */
  --bg: #0f1724;
  --card: #0b1220;
  --text: #e6eef8;
  --muted: #98a0b3;
  --accent: #0b76ef;
  --primary: var(--accent);

  /* landing / gradients */
  --grad-a: #0ea5e9;
  --grad-b: #22c55e;

  /* panel / surfaces */
  --panel: rgba(255,255,255,0.04);
  --stroke: rgba(255,255,255,0.08);

  /* acciones / estado */
  --danger: #ef4444;

  /* layout */
  --gap: 16px;
  --radius: 8px;
  --max-width: 1100px;

  /* sombras */
  --shadow-sm: 0 4px 18px rgba(0,0,0,0.45);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.3);

  /* accesibilidad / misc */
  --muted-2: rgba(255,255,255,0.06);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial;color:var(--text);background:var(--bg);}
a{color:var(--accent);text-decoration:none}
main.wrap{max-width:var(--max-width);margin:20px auto;padding:16px;flex: 1 0 auto}

/* header */
.site-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);border-bottom:1px solid rgba(255,255,255,0.03);}
.site-brand{display:flex;align-items:center;gap:10px}
.site-brand .logo{font-size:20px}
.site-nav a{margin-left:10px;padding:8px 12px;border-radius:6px;background:transparent;color:var(--text);font-weight:600}
.site-nav a.active{background:rgba(11,118,239,0.12);color:var(--accent)}

/* cards and common components */
.card{background:var(--card);border-radius:var(--radius);padding:12px;margin-bottom:12px;box-shadow:0 4px 18px rgba(0,0,0,0.45);}
.top-actions{display:flex;gap:8px;align-items:center}
.btn{display:inline-block;padding:8px 12px;border-radius:6px;background:rgba(255,255,255,0.03);color:var(--text);border:1px solid rgba(255,255,255,0.03);cursor:pointer}
.btn.ghost{background:transparent}
.btn.danger{background:rgba(255,50,50,0.08);color:#ffb3b3}

/* footer */
.site-footer{margin-top:auto;padding:18px;background:linear-gradient(180deg, transparent, rgba(255,255,255,0.02));border-top:1px solid rgba(255,255,255,0.03);color:var(--muted);font-size:0.9rem;display:flex;justify-content:space-between;align-items:center;gap:12px}
.site-footer a{color:var(--muted)}

/* responsive */
@media (max-width:720px){
  .site-nav{display:none}
  main.wrap{padding:12px;margin:12px}
}

/* Asegurar layout de columna para que el footer pueda quedarse abajo */
html, body {
  height: 100%;
  margin: 0;
}

body {
  min-height: 100vh;
}

/* El main debe crecer para empujar el footer hacia abajo cuando sea necesario */
main.wrap {
  height: calc(100% - var(--header-height) - var(--footer-height));
  flex: 1 0 auto ;
}

/* Footer se sitúa al final del flujo cuando hay espacio */
.site-footer {
  margin-top: auto !important;
}