@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&family=Fraunces:wght@500;700&display=swap');

:root { --ink:#0f253a; --ink-soft:#274860; --card:rgba(255,255,255,.88); --edge:rgba(95,136,168,.55); --accent:#1e5b8f; --accent-strong:#17466f; --danger:#c4302b; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; display:grid; place-items:center; padding:24px; position:relative; color:var(--ink); font-family:'Space Grotesk',sans-serif; background-image:linear-gradient(135deg,rgba(8,26,46,.28),rgba(53,130,197,.12)),url('/static/img/fondo_login.jpg'); background-size:cover; background-position:center; }
.login-shell { width:min(1180px,100%); display:grid; grid-template-columns:1.35fr 1fr; gap:22px; margin:auto; }
.brand-panel,.form-panel { padding:26px 24px; background:var(--card); border:1px solid var(--edge); border-radius:18px; backdrop-filter:blur(8px); box-shadow:0 14px 32px rgba(12,31,49,.2); }
.brand-panel { min-height:530px; display:flex; flex-direction:column; }
.brand-top { display:flex; gap:14px; align-items:center; margin-bottom:30px; }
.brand-logo { width:72px; height:72px; object-fit:contain; padding:8px; background:rgba(255,255,255,.76); border:1px solid rgba(127,163,188,.55); border-radius:12px; }
.brand-copy h1 { margin:0; font-family:'Fraunces',serif; font-size:38px; letter-spacing:.2px; }
.brand-tagline { display:inline-flex; width:fit-content; margin:8px 0 0; padding:6px 11px; color:var(--accent-strong); font-size:13px; font-weight:700; background:linear-gradient(135deg,rgba(53,130,197,.16),rgba(255,255,255,.74)); border:1px solid rgba(53,130,197,.3); border-radius:999px; }
.eyebrow { margin:0 0 8px; color:var(--accent-strong); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.brand-body h2,.form-panel h2 { margin:0; font-family:'Fraunces',serif; }
.brand-body h2 { max-width:600px; font-size:34px; }
.brand-body>p:not(.eyebrow) { color:var(--ink-soft); font-size:16px; }
.brand-bullets { margin:18px 0 0; padding-left:20px; display:grid; gap:9px; color:#12324a; }
.brand-footer { margin:auto 0 0; color:#35607e; font-size:13px; font-weight:600; }
.form-panel h2 { font-size:34px; }
.hint { margin:6px 0 20px; color:var(--ink-soft); }
label { display:grid; gap:7px; margin-bottom:14px; color:var(--ink); font-size:15px; font-weight:600; }
input,button { font:inherit; font-size:16px; }
input { width:100%; padding:11px 12px; color:var(--ink); background:rgba(255,255,255,.96); border:1px solid var(--edge); border-radius:10px; outline:none; }
input:focus { border-color:var(--accent); box-shadow:0 0 0 4px rgba(53,130,197,.14); }
button { width:100%; padding:12px 16px; color:#fff; font-weight:700; background:var(--accent); border:0; border-radius:10px; cursor:pointer; transition:.18s ease; }
button:hover { background:var(--accent-strong); }
button:disabled { cursor:progress; opacity:.72; }
.error { min-height:22px; margin:10px 0 4px; color:var(--danger); font-size:14px; }
.support-note { margin:0; color:#335b78; font-size:13px; }
.alternate-access { display:inline-block; margin-top:14px; color:var(--accent-strong); font-size:13px; font-weight:700; }
.login-legal-links { display:flex; flex-wrap:wrap; gap:8px 12px; margin-top:18px; padding-top:12px; border-top:1px solid rgba(95,136,168,.28); font-size:12px; }
.login-legal-links a { color:var(--accent-strong); font-weight:700; text-decoration:none; }
.login-legal-links a:hover,.alternate-access:hover { text-decoration:underline; }
@media(max-width:860px){ body{padding:14px}.login-shell{grid-template-columns:1fr}.brand-panel{min-height:auto}.brand-copy h1{font-size:30px}.brand-body h2,.form-panel h2{font-size:29px}.brand-footer{margin-top:26px} }