:root{--navy:#0b1f38;--navy2:#163858;--blue:#176df2;--cyan:#2fc4de;--bg:#f3f6fa;--text:#172033;--muted:#667085;--line:#dde5ef;--white:#fff;--danger:#b42318}*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text)}button,input{font:inherit}.login-shell{min-height:100vh;display:grid;grid-template-columns:1.08fr .92fr}.brand{padding:clamp(42px,7vw,100px);background:linear-gradient(145deg,#0b1f38fa,#163858f2);color:#fff;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}.brand:after{content:"";position:absolute;width:480px;height:480px;border:1px solid #ffffff1f;border-radius:50%;right:-180px;bottom:-220px}.mark{width:70px;height:70px;display:grid;place-items:center;border-radius:18px;background:linear-gradient(135deg,var(--cyan),var(--blue));font-size:26px;font-weight:900;box-shadow:0 16px 38px #07142799;margin-bottom:46px}.tag{text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:800}.brand h1{font-size:clamp(38px,5vw,66px);line-height:1.04;max-width:720px;margin:14px 0 22px}.brand>p:not(.tag){font-size:18px;line-height:1.7;color:#cedbea;max-width:650px}.brand small{position:absolute;bottom:36px;letter-spacing:.12em;color:#9eb1c7}.form-side,.center{min-height:100vh;display:grid;place-items:center;padding:28px}.card{width:min(100%,450px);background:#fff;padding:clamp(28px,4vw,46px);border-radius:24px;box-shadow:0 24px 70px #1d2c471f}.blue{color:var(--blue)}h2{font-size:32px;margin:8px 0}.muted,.help{color:var(--muted);line-height:1.5}.help{text-align:center;font-size:13px;margin:24px 0 0}.alert,.success{padding:13px 15px;border-radius:10px;margin:20px 0;font-size:14px}.alert{background:#fef3f2;color:var(--danger)}.success{background:#ecfdf3;color:#067647}label{display:block;font-size:14px;font-weight:700;margin:21px 0 8px}input{width:100%;border:1px solid var(--line);border-radius:11px;padding:14px 15px;background:#fbfcfe;outline:none}input:focus{border-color:var(--blue);box-shadow:0 0 0 4px #176df21a}.pass{position:relative}.pass input{padding-right:70px}.pass button{position:absolute;right:9px;top:7px;border:0;background:transparent;color:var(--blue);padding:8px;cursor:pointer}.primary,.link-button{display:block;width:100%;border:0;border-radius:11px;background:linear-gradient(135deg,var(--blue),#0757c7);color:#fff;text-align:center;text-decoration:none;font-weight:800;padding:15px;margin-top:25px;cursor:pointer;box-shadow:0 12px 25px #176df238}.app{display:grid;grid-template-columns:260px 1fr;min-height:100vh}.app aside{background:var(--navy);color:#fff;padding:26px 18px}.side-brand{display:flex;align-items:center;gap:12px;padding:0 10px 30px}.side-brand span{width:42px;height:42px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(135deg,var(--cyan),var(--blue));font-weight:900}.app nav{display:grid;gap:7px}.app nav a{color:#b9c7d9;text-decoration:none;padding:13px 15px;border-radius:10px;font-weight:600}.app nav a:hover,.app nav a.active{background:#ffffff14;color:#fff}.content{padding:36px}.content header{display:flex;align-items:center;justify-content:space-between;gap:24px}.content h1{margin:6px 0;font-size:32px}.user{display:flex;align-items:center;gap:14px}.user>span{background:#e8f1ff;color:#0757c7;border-radius:99px;padding:8px 13px;font-size:13px;font-weight:800}.user button{border:1px solid var(--line);background:#fff;border-radius:9px;padding:9px 12px;cursor:pointer}.hero{margin-top:30px;padding:34px;background:linear-gradient(135deg,var(--navy),var(--navy2));border-radius:22px;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:22px}.hero h2{margin:0 0 10px}.hero p{color:#c4d2e2}.hero b{white-space:nowrap;background:#21c4a033;border:1px solid #56dbbe77;border-radius:99px;padding:9px 13px;font-size:13px}.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px}.tiles article{background:#fff;padding:26px;border-radius:18px;border:1px solid var(--line)}.tiles article>span{color:var(--blue);font-weight:900}.tiles h3{font-size:20px;margin:16px 0 8px}.tiles p{color:var(--muted)}@media(max-width:900px){.login-shell{grid-template-columns:1fr}.brand{min-height:38vh;padding:38px}.brand h1{font-size:38px}.brand small{display:none}.app{grid-template-columns:1fr}.app aside{display:none}.content{padding:22px}.tiles{grid-template-columns:1fr}.content header,.hero{align-items:flex-start;flex-direction:column}.user{width:100%;justify-content:space-between}}@media(max-width:520px){.brand{display:none}.form-side,.center{padding:17px}.card{padding:27px 22px;border-radius:18px}}
/* Identidad visual de JC Proyectos */

.brand-identity {
    width: fit-content;
    max-width: min(100%, 360px);
    margin-bottom: 42px;
    padding: 14px 20px;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 16px;
    box-shadow: 0 16px 38px rgba(7, 20, 39, .38);
    position: relative;
    z-index: 1;
}

.brand-logo {
    display: block;
    width: auto;
    max-width: 100%;
    height: 68px;
    object-fit: contain;
}

.login-logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    margin-bottom: 24px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(23, 109, 242, .14);
}

.login-logo {
    display: block;
    width: 100%;
    height: 100%;
    padding: 5px;
    object-fit: contain;
}

/* El antiguo cuadro con JC ya no se utiliza */
.mark {
    display: none;
}

@media (max-width: 900px) {
    .brand-identity {
        margin-bottom: 26px;
    }

    .brand-logo {
        height: 55px;
    }
}

@media (max-width: 520px) {
    .login-logo-container {
        width: 58px;
        height: 58px;
        margin-bottom: 18px;
    }
}