:root{
  --bg:#0b0b0e;
  --panel:#111217;
  --panel-2:#0f1115;
  --text:#e7f9fb;
  --muted:#9bdbe0;
  --border:#1e2b31;
  --accent:#00f0ff;
  --accent-2:#27f7ff;

  --radius:18px;
  --maxw:1100px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }

body{
  color:var(--text);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Arial;
  background:
    url("/assets/background.png") center/cover fixed no-repeat,
    var(--bg);
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* ===== Shell (SPA) ===== */
.site-header{
  background:#111;
  padding:1rem 2rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  border-bottom:2px solid var(--accent);
}
.brand{
  margin:0;
  color:var(--accent);
  font-size:1.6rem;
  letter-spacing:.5px;
}

.site-nav{
  display:flex;
  gap:1.25rem;
  align-items:center;
  flex-wrap:wrap;
}
.site-nav a{
  color:#fff;
  text-decoration:none;
  font-weight:700;
}
.site-nav a:hover{ color:var(--accent); }
.site-nav a.active{
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset: 4px;
}

.site-main{
  flex:1;
  padding:2rem 1rem;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}

/* CLAVE SPA: el contenedor de vistas SIEMPRE ocupa ancho completo */
.site-main > #view{
  flex: 1 1 auto;
  width: 100%;
  transition: opacity .12s ease;
}

/* Contenedor reutilizable para vistas */
.page-wrap{
  width:100%;
  max-width: var(--maxw);
  margin:0 auto;
}
.page-card{
  background:var(--panel);
  border:2px solid var(--accent);
  border-radius:var(--radius);
  box-shadow:0 0 24px rgba(0,240,255,.08);
  overflow:hidden;
}

.site-footer{
  background:#111;
  color:#888;
  text-align:center;
  padding:1rem;
  border-top:2px solid var(--accent);
}

/* ===== Botones (UNIFICADOS, incluido Cerrar sesión) ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.6rem .9rem;
  border-radius:12px;
  border:2px solid var(--accent);
  color:var(--accent);
  background:transparent;
  font-weight:900;
  cursor:pointer;
  transition: transform .15s, box-shadow .15s, background .15s, opacity .15s;
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow:0 0 16px rgba(0,240,255,.25);
  background: rgba(0,240,255,.06);
}
.btn:disabled{ opacity:.6; cursor:not-allowed; transform:none; box-shadow:none; }

.btn-small{ padding:.55rem .8rem; font-size:.9rem; border-radius:10px; }
.btn-outline{
  border-color: rgba(255,255,255,.18);
  color:#fff;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}
.btn-danger{ border-color: rgba(255,59,59,.7); color:#ffd0d0; }
.btn-danger:hover{ box-shadow:0 0 18px rgba(255,59,59,.25); background: rgba(255,59,59,.08); }

/* Inputs base (para que no cambien por vista) */
.inpt{
  width:100%;
  padding:.85rem 1rem;
  border-radius:12px;
  color:var(--text);
  background:#0a0b0f;
  border:1px solid var(--border);
  outline:none;
}
.inpt:focus{ border-color: var(--accent); box-shadow:0 0 0 3px rgba(0,240,255,.12); }

@media (max-width: 720px){
  .site-header{ padding:1rem; }
  .site-nav{ gap:.9rem; }
}