*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}

html, body{
width:100%;
min-height:100%;
margin:0;
}

body{
background:#e6e6e6;
overflow-y:auto;
display:flex;
align-items:center;
justify-content:center;
padding:24px;
transition:background 0.2s ease, color 0.2s ease;
}

.theme-toggle-login{
position:fixed;
left:22px;
bottom:22px;
z-index:20;
width:46px;
height:46px;
display:inline-flex;
align-items:center;
justify-content:center;
padding:0;
border-radius:14px;
border:1px solid #d6e2f2;
background:rgba(255,255,255,0.92);
color:#1e3a5f;
font-size:12px;
font-weight:800;
line-height:1;
box-shadow:0 12px 24px rgba(16,24,40,0.14);
cursor:pointer;
transition:transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.theme-toggle-login:hover{
transform:translateY(-1px);
background:#eef5ff;
border-color:#bfd3ee;
}

.theme-toggle-login span:first-child{
display:inline-flex;
align-items:center;
justify-content:center;
width:26px;
height:26px;
border-radius:9px;
background:#eaf4ff;
color:#2563eb;
font-size:16px;
line-height:1;
}

.container{
width:min(1180px, 100%);
height:min(760px, calc(100svh - 48px));
display:grid;
grid-template-columns: 1.1fr 0.9fr;
background:white;
overflow:hidden;
border-radius:22px;
box-shadow:0 20px 40px rgba(16, 24, 40, 0.14);
}

/* LADO IZQUIERDO */
.left{
position:relative;
width:100%;
height:100%;
min-height:0;
}

.left img{
width:100%;
height:100%;
object-fit:cover;
object-position:center center;
display:block;
}

.left::after{
display:none;
}

/* LADO DERECHO */
.right{
min-height:0;
padding:48px 56px;
display:flex;
flex-direction:column;
justify-content:center;
background:rgba(255,255,255,0.96);
overflow-y:auto;
}

.logo{
color:#45a6db;
font-size:42px;
font-weight:700;
margin-bottom:8px;
}

.right h2{
font-size:32px;
margin-bottom:26px;
}

/* INPUTS */
.input-group{
margin-bottom:16px;
}

.input-group input{
width:100%;
padding:14px 18px;
border:none;
background:#e5e5e5;
border-radius:30px;
font-size:18px;
outline:none;
}

.password-field{
position:relative;
}

.password-field input{
padding-right:52px;
}

.password-toggle{
position:absolute;
top:50%;
right:16px;
transform:translateY(-50%);
display:flex;
align-items:center;
justify-content:center;
width:28px;
height:28px;
border:none;
background:transparent;
color:#5a5a5a;
cursor:pointer;
padding:0;
}

.password-toggle:focus-visible{
outline:2px solid #45a6db;
outline-offset:2px;
border-radius:50%;
}

.password-toggle svg{
width:20px;
height:20px;
}

.hidden{
display:none;
}

/* CHECKBOX */
.checkbox-row{
display:flex;
align-items:center;
gap:10px;
margin-top:4px;
}

.checkbox-row input{
width:18px;
height:18px;
}

.checkbox-row span{
font-size:14px;
color:#555;
}

/* LINK */
.forgot{
display:block;
margin-top:10px;
margin-bottom:20px;
color:#2a3cff;
text-decoration:underline;
}

/* BOTON */
.btn-login{
width:100%;
min-height:54px;
padding:16px 20px;
border:1px solid transparent;
border-radius:18px;
background:linear-gradient(135deg, #3f79d8 0%, #5d97f3 100%);
color:white;
font-size:20px;
font-weight:700;
letter-spacing:0.01em;
cursor:pointer;
box-shadow:0 18px 34px rgba(61, 120, 216, 0.24);
transition:transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

.btn-login:hover{
transform:translateY(-1px);
box-shadow:0 22px 38px rgba(61, 120, 216, 0.28);
filter:brightness(1.02);
}

/* RESPONSIVE */
@media (max-width: 1024px){
  .container{grid-template-columns: 1fr 1fr;}
  .right{padding:40px;}
}

@media (max-width: 900px){
  body{
    padding:0;
    align-items:stretch;
  }
  .container{
    width:100%;
    height:auto;
    min-height:100vh;
    min-height:100svh;
    grid-template-columns:1fr;
    grid-template-rows:45vh auto;
    border-radius:0;
    box-shadow:none;
  }
  .left{height:45vh;}
  .right{height:auto;padding:32px 28px;overflow:visible;}
  .left::after{display:none;}
}

@media (max-width: 520px){
  .container{grid-template-rows:35vh auto;}
  .right{padding:24px 20px;}
  .logo{font-size:34px;}
  .right h2{font-size:26px;margin-bottom:18px;}
  .input-group input{font-size:16px;padding:12px 16px;}
  .btn-login{font-size:20px;padding:14px;}
  .forgot{margin-bottom:14px;}
}

@media (max-height: 760px){
  .right{
    justify-content:flex-start;
    padding-top:32px;
    padding-bottom:32px;
  }
}

html.sysmed-dark body{
background:#08111f;
color:#eaf4ff;
}

html.sysmed-dark .container{
background:#0d1a2b;
box-shadow:0 24px 54px rgba(0,0,0,0.42);
}

html.sysmed-dark .right{
background:linear-gradient(180deg, rgba(17,29,47,0.98), rgba(12,22,37,0.98));
}

html.sysmed-dark .right h2{
color:#f8fbff;
}

html.sysmed-dark .logo{
color:#60a5fa;
}

html.sysmed-dark .input-group input{
background:#0b1626;
border:1px solid #2c4563;
color:#eaf4ff;
}

html.sysmed-dark .input-group input::placeholder{
color:#7189a8;
}

html.sysmed-dark .password-toggle{
color:#bfdbfe;
}

html.sysmed-dark .checkbox-row span{
color:#bfd3eb;
}

html.sysmed-dark .forgot{
color:#93c5fd;
}

html.sysmed-dark .theme-toggle-login{
background:#101d30;
border-color:#263b55;
color:#d7e8ff;
box-shadow:0 12px 24px rgba(0,0,0,0.26);
}

html.sysmed-dark .theme-toggle-login:hover{
background:#14243a;
border-color:#36577a;
}

html.sysmed-dark .theme-toggle-login span:first-child{
background:#1d4ed8;
color:#eff6ff;
}

html.sysmed-large-text body{
font-size:19px;
}

html.sysmed-large-text .input-group input,
html.sysmed-large-text .checkbox-row span,
html.sysmed-large-text .forgot{
font-size:1.12rem;
line-height:1.7;
}

html.sysmed-large-text .input-group input,
html.sysmed-large-text .btn-login{
min-height:62px;
}

html.sysmed-high-contrast .container,
html.sysmed-high-contrast .input-group input,
html.sysmed-high-contrast .btn-login{
border:2px solid #60a5fa;
box-shadow:none;
}

html.sysmed-high-contrast body{
background:#ffffff !important;
}

html.sysmed-high-contrast.sysmed-dark body{
background:#000000 !important;
}

html.sysmed-high-contrast .right h2,
html.sysmed-high-contrast .forgot{
text-decoration:underline;
text-underline-offset:4px;
}

html.sysmed-high-contrast input:focus,
html.sysmed-high-contrast button:focus-visible,
html.sysmed-high-contrast a:focus-visible{
outline:3px solid #60a5fa;
outline-offset:2px;
}

html.sysmed-reduce-motion *,
html.sysmed-reduce-motion *::before,
html.sysmed-reduce-motion *::after{
animation:none !important;
transition:none !important;
scroll-behavior:auto !important;
}

html.sysmed-color-deuteranopia .btn-login{
background:linear-gradient(135deg, #1d4ed8, #38bdf8);
}

html.sysmed-color-protanopia .btn-login{
background:linear-gradient(135deg, #0f766e, #2dd4bf);
}

html.sysmed-color-tritanopia .btn-login{
background:linear-gradient(135deg, #6d28d9, #c084fc);
}

html.sysmed-color-monochrome .container{
filter:grayscale(0.95);
}

@media (max-width: 520px){
  .theme-toggle-login{
    left:12px;
    bottom:12px;
    min-width:44px;
    height:44px;
    width:44px;
  }
}