:root{
    --bg:#0f172a; --card:#111827; --border:#1f2937; --text:#e5e7eb; --muted:#94a3b8;
    --ok:#22c55e; --err:#ef4444; --grad-a:#22c55e; --grad-b:#16a34a; --input:#0b1220;
    --shadow:0 10px 30px rgba(0,0,0,.35); --radius:12px;
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;background:var(--bg);color:var(--text);
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
    display:flex;justify-content:center;align-items:center;min-height:100vh;
  }
  .card{
    background:var(--card);padding:20px;border-radius:var(--radius);
    border:1px solid var(--border);width:420px;max-width:92vw;box-shadow:var(--shadow);
  }
  h2{margin:0 0 12px 0}
  label{font-size:12px;color:var(--muted);display:block;margin-top:8px}
  input{
    width:100%;padding:10px;margin-top:8px;border:1px solid var(--border);
    border-radius:10px;background:var(--input);color:#fff;outline:0;
    transition:border-color .15s, box-shadow .15s;
  }
  input::placeholder{color:#9ca3af}
  input:focus{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.25)}
  .row{display:flex;gap:8px;align-items:center}
  .toggle{cursor:pointer;font-size:14px;color:#cbd5e1;user-select:none;padding:0 6px}
  button{
    width:100%;padding:10px;border:0;border-radius:10px;margin-top:12px;
    background:linear-gradient(90deg,var(--grad-a),var(--grad-b));
    color:#041;font-weight:700;cursor:pointer;transition:transform .05s ease;
  }
  button:active{transform:scale(0.995)}
  .small{color:var(--muted);font-size:12px;margin-top:8px;text-align:center}
  .alert{
    border:1px solid #7f1d1d;background:#1f0b0b;color:#fca5a5;
    padding:10px;border-radius:10px;margin:10px 0;font-size:14px;
  }
  .notice{
    border:1px solid #2d3f5f;background:#0f172a;color:#93c5fd;
    padding:10px;border-radius:10px;margin:10px 0;font-size:14px;
  }
  .link{
    color:#93c5fd;text-decoration:none;border:1px solid var(--border);
    padding:8px 10px;border-radius:10px;display:inline-block;margin-top:8px;
  }
  .pass-wrapper{display:flex;align-items:center;gap:6px;margin-top:8px}
  .pass-wrapper input{flex:1}
  @media (max-width:380px){ .card{padding:16px} }


    /* Botón secundario como en admin_add_user (a.btn) */
  .actions{
    display:flex;
    justify-content:center;
    margin-top:12px;
  }
  .btn-secondary{
    display:inline-block;
    text-decoration:none;
    border:1px solid var(--border);
    padding:10px 12px;
    border-radius:10px;
    color:#e5e7eb;
    background:transparent;
    transition:background .15s,border-color .15s,transform .05s;
  }
  .btn-secondary:hover{
    background:rgba(255,255,255,0.03);
    border-color:#273449;
  }
  .btn-secondary:active{ transform:scale(0.995) }

  /* Pequeño footer con el botón “Ver Intro” centrado */
  .intro{
    display:flex;
    justify-content:center;
    margin-top:10px;
  }