:root { --azul-950:#071b2e; --azul-900:#0b2a47; --azul-700:#123c64; --cian:#1fa6c9; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
       font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif; color:var(--azul-950);
       background: radial-gradient(120% 140% at 15% 10%, var(--azul-700) 0%, var(--azul-900) 55%, var(--azul-950) 100%); }
.tarjeta { width:100%; max-width:410px; background:#fff; border-radius:18px; padding:34px 30px; box-shadow:0 24px 60px rgba(0,0,0,.35); }
.tarjeta h1 { font-size:1.4rem; margin:0 0 6px; }
.tarjeta > p { color:#6b7785; margin:0 0 22px; font-size:.92rem; line-height:1.5; }
label { display:block; font-size:.82rem; font-weight:600; margin-bottom:6px; }
input[type=text], input[type=password], input[type=email] { width:100%; padding:13px 14px; border:1.5px solid #e1e6ec; border-radius:11px;
       font-size:.95rem; font-family:inherit; background:#fbfcfd; margin-bottom:16px; }
input:focus { outline:none; border-color:var(--cian); box-shadow:0 0 0 4px rgba(31,166,201,.12); background:#fff; }
button { width:100%; padding:14px; border:none; border-radius:11px; cursor:pointer; color:#fff; font-size:.96rem; font-weight:600;
         font-family:inherit; background:linear-gradient(135deg, var(--cian), var(--azul-700)); }
.alerta, .aviso { border-radius:10px; padding:12px 14px; font-size:.86rem; margin-bottom:18px; line-height:1.45; }
.alerta { background:#fdecea; color:#9a2f28; border:1px solid #f6c9c4; }
.aviso  { background:#e8f6ee; color:#1d6b3f; border:1px solid #bfe3cd; }
.volver { text-align:center; margin:20px 0 0; font-size:.86rem; }
.volver a { color:var(--azul-700); text-decoration:none; font-weight:600; }
.volver a:hover { text-decoration:underline; }