:root{
  --bg:#0a0b0f; --panel:#11131a; --card:#141826; --text:#e8ecf1; --muted:#a3aab8;
  --accent:#8a2be2; --accent-2:#4b0082; --radius:16px; --shadow:0 12px 40px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(138,43,226,.15), transparent 40%),
    radial-gradient(900px 600px at -10% 20%, rgba(75,0,130,.12), transparent 40%),
    var(--bg);
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{width:min(1200px, 92vw); margin-inline:auto}

header.site-header{
  position:sticky; top:0; z-index:10;
  background:linear-gradient(180deg, rgba(10,11,15,.9), rgba(10,11,15,.6));
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0}
.brand{display:flex; align-items:center; gap:12px}
.brand img{height:clamp(56px, 9vw, 110px); width:auto; filter:drop-shadow(0 2px 8px rgba(138,43,226,.35))}
.links{display:flex; gap:18px; align-items:center; font-size:14.5px; color:var(--muted)}
.links a{padding:8px 10px; border-radius:10px; transition:120ms ease-in-out background}
.links a:hover{background:rgba(255,255,255,.06); color:var(--text)}

/* === "← Volver" al margen derecho === */
header.site-header .nav{
  justify-content: flex-start;
}
header.site-header .nav .links{
  order: 99;            /* aparece último */
  margin-left: auto;    /* empuja hacia el borde derecho */
  margin-right: 14px;   /* espacio con el borde */
}
header.site-header .nav .actions{
  margin-left: 0;
}

.btn{
  padding:9px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.12);
  color:var(--text); background:#0e111a; box-shadow:0 12px 40px rgba(0,0,0,.35);
  display:inline-flex; align-items:center; gap:8px; cursor:pointer
}
.btn:hover{border-color:rgba(138,43,226,.45); box-shadow:0 0 0 3px rgba(138,43,226,.15)}
.btn.primary{background:linear-gradient(135deg, var(--accent), var(--accent-2)); border:none}
.btn-full{width:100%; justify-content:center}
.btn-gap{margin-top:10px}

main{display:grid; place-items:center; min-height:calc(100vh - 70px); padding:24px}
.card{width:min(560px, 92vw); background:#141826; border:1px solid rgba(255,255,255,.08); border-radius:18px; box-shadow:0 12px 40px rgba(0,0,0,.35);}
.panel{padding:16px 16px 22px}

form label{display:block; margin:6px 0}
input[type="email"], input[type="password"], input[type="text"]{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.16); background:#0f1422; color:#e8ecf1
}

#message{font-weight:700; margin:10px 16px}
.muted{color:#a3aab8; font-size:13px}

/* Cartel superior */
.tab-banner{
  margin:12px 16px 0;
  padding:10px 12px;
  border-radius:10px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  text-align:center;
  font-weight:700;
  letter-spacing:.2px;
}

/* Ojo de contraseña (un solo icono; violeta con foco o si hay texto) */
.password-field{ position:relative; }
.password-field input{ padding-right:44px; }
.pw-toggle{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  background:transparent; border:0; cursor:pointer; padding:6px; border-radius:8px;
  color: var(--muted);
  transition: color .15s ease, box-shadow .15s ease;
}
.pw-toggle:hover{ box-shadow:0 0 0 3px rgba(138,43,226,.15); }
.icon-eye{ width:22px; height:22px; display:block; }
.password-field.has-value .pw-toggle,
.password-field:focus-within .pw-toggle{
  color: var(--accent);
}