/* Layout based on the supplied Caja login, using the Lectora portal palette. */
:root { --auth-primary:#23485f; --auth-dark:#16364b; --auth-ink:#203544; --auth-muted:#617582; --auth-border:#d6e1e9; }
* { box-sizing:border-box; }
html { min-height:100%; background:#f3f6f8; }
body.auth-page { margin:0; min-height:100vh; background:#f3f6f8; color:var(--auth-ink); font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; line-height:1.5; -webkit-font-smoothing:antialiased; }
.auth-page::before { content:''; position:fixed; inset:0 auto 0 0; width:8px; background:var(--auth-primary); opacity:.12; pointer-events:none; }
.wrapper { display:flex; justify-content:center; align-items:center; min-height:100vh; min-height:100dvh; padding:32px 16px; width:100%; }
#formContent { width:100%; max-width:460px; background:#fff; border:1px solid var(--auth-border); border-left:6px solid var(--auth-primary); border-radius:10px; box-shadow:0 18px 44px #16364b1f; overflow:hidden; transition:transform .18s ease,box-shadow .18s ease; }
.auth-brand { text-align:center; padding:32px 32px 22px; border-bottom:1px solid #edf1f4; }
.auth-brand .logo { display:inline-flex; align-items:center; text-decoration:none; }
.auth-brand img { height:74px; width:auto; max-width:100%; object-fit:contain; }
.card-title-sign { padding:24px 32px 0; }
.card-title-sign .title { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--auth-border); border-radius:999px; background:#edf3f7; color:var(--auth-dark); font-size:.82rem; font-weight:800; line-height:1; padding:9px 14px; margin:0; text-transform:uppercase; }
.card-title-sign .title i { font-size:1.2rem; color:var(--auth-primary); }
.card-body { padding:20px 32px 24px; }
.form-label { font-size:.83rem; font-weight:700; margin-bottom:7px; }
.form-control { min-width:0; background:#fff; color:var(--auth-ink); border:1px solid var(--auth-border); border-radius:8px; font-size:1rem; min-height:52px; padding:12px 14px; }
.form-control::placeholder { color:#8a9aa5; }
.form-control:focus { border-color:var(--auth-primary); box-shadow:0 0 0 .2rem #23485f1f; }
.input-group-text { background:#fff; border-color:var(--auth-border); border-radius:8px; min-width:52px; justify-content:center; color:var(--auth-muted); font-size:1.25rem; }
.input-group:focus-within .input-group-text { border-color:var(--auth-primary); }
#togglePassword { cursor:pointer; }
#togglePassword:hover { background:#edf3f7; color:var(--auth-dark); }
.auth-form-footer { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:22px; }
.auth-status { font-size:.8rem; color:var(--auth-muted); }
.btn-primary { border-radius:999px; background:var(--auth-primary); border-color:var(--auth-primary); padding:12px 26px; font-weight:700; box-shadow:0 8px 20px #23485f26; }
.btn-primary:hover, .btn-primary:focus { background:var(--auth-dark); border-color:var(--auth-dark); }
.btn-primary:disabled { opacity:.7; }
.auth-footer { margin:0; padding:0 24px 22px; color:var(--auth-muted); font-size:.78rem; text-align:center; }
.alert { font-size:.88rem; border-radius:8px; }
:focus-visible { outline:3px solid #63899f; outline-offset:3px; }
.fadeInDown { animation:authEnter .4s ease-out; }
.shake { animation:authShake .3s ease-in-out; }
@keyframes authEnter { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes authShake { 0%,100% { transform:translateX(0); } 25%,75% { transform:translateX(-7px); } 50% { transform:translateX(7px); } }
@media(hover:hover) { #formContent:hover { transform:translateY(-1px); box-shadow:0 22px 54px #16364b24; } }
@media(max-width:576px) { .wrapper { align-items:flex-start; padding:18px 10px; } #formContent { border-left-width:4px; } .auth-brand { padding:24px 20px 18px; } .auth-brand img { height:62px; } .card-title-sign { padding:20px 20px 0; } .card-body { padding:18px 20px 24px; } .auth-form-footer { flex-direction:column; align-items:stretch; text-align:center; } .auth-form-footer .btn { width:100%; } .auth-status:empty { display:none; } }
@media(max-width:360px) { .wrapper { padding:10px 8px; } .auth-brand { padding:20px 16px 14px; } .auth-brand img { height:56px; } .card-title-sign, .card-body { padding-left:16px; padding-right:16px; } }
@media(orientation:landscape) and (max-height:600px) { .wrapper { align-items:flex-start; padding:14px; } .auth-brand { padding:18px 24px 12px; } .auth-brand img { height:56px; } .card-title-sign { padding-top:16px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } #formContent:hover { transform:none; } }