:root{
  --hospital-green:#00843D;
  --hospital-green-light:#E6F4EC;
  --hospital-green-dark:#006b32;
  --text-dark:#0f3d3f;
  --text-muted:#6b6f7a;
  --border-input:#cfd8dc;
  --radius-card:16px;
  --radius-input:8px;
  --focus-ring:rgba(0,132,61,.2);
  --shadow-card:0 20px 40px rgba(0,0,0,.08);
  --shadow-btn:0 10px 20px rgba(0,0,0,.15);
}

/* Todo bajo .login-page para no tocar otras pantallas */
.login-page{
  min-height:100vh;
  background:#f8fafc;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:20px;
  color:var(--text-dark);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

/* IMPORTANTE: No pisar Font Awesome */
.login-page .fa,
.login-page .fa-solid,
.login-page .fa-regular { font-family:"Font Awesome 6 Free" !important; }
.login-page .fa-brands { font-family:"Font Awesome 6 Brands" !important; }
.login-page .fa-solid { font-weight:900 !important; }
.login-page .fa-regular { font-weight:400 !important; }

/* (antes teníamos .login-page * { font-family: Inter; } — eliminado) */

.login-page .header{
  width:100%;
  max-width:1100px;
  margin-bottom:30px;
  text-align:center;
  padding:0 20px;
}

.login-page .hospital-name{
  font-size:clamp(20px,4vw,32px);
  font-weight:700;
  color:var(--hospital-green);
  line-height:1.2;
  margin-bottom:8px;
}

.login-page .hospital-subtitle{
  font-size:clamp(14px,2.5vw,18px);
  font-weight:500;
  color:var(--text-muted);
}

.login-page .card-wrapper{
  width:100%;
  max-width:1100px;
  background:#fff;
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
  border:1px solid rgba(0,0,0,.06);
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:500px;
}

.login-page .panel-left{
  background:#fff;
  padding:50px 40px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.login-page .panel-left-inner{
  max-width:380px;
  width:100%;
  display:flex;
  flex-direction:column;
  gap:30px;
}

.login-page .brand-block{
  display:flex;
  flex-direction:column;
  line-height:1.3;
  color:var(--text-dark);
  gap:6px;
  margin-bottom:10px;
}

.login-page .brand-title{
  font-size:24px;
  font-weight:700;
  color:var(--hospital-green);
}

.login-page .brand-sub{
  font-size:16px;
  font-weight:400;
  color:var(--text-muted);
  line-height:1.5;
}

.login-page .login-form{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.login-page .field-block{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.login-page .field-label{
  font-size:15px;
  font-weight:500;
  color:var(--text-dark);
}

.login-page .input-row{
  position:relative;
  width:100%;
}

.login-page .text-input{
  width:100%;
  height:50px;
  border-radius:var(--radius-input);
  border:1px solid var(--border-input);
  padding:0 16px 0 48px;
  font-size:15px;
  color:var(--text-dark);
  outline:0;
  background:#fff;
  transition:all .15s;
}

.login-page .text-input:focus{
  border-color:var(--hospital-green);
  box-shadow:0 0 0 3px var(--focus-ring);
}

.login-page .input-icon{
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  color:var(--text-muted);
  font-size:18px;
}

.login-page .toggle-pass{
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  width:24px;
  height:24px;
  background:transparent;
  border:0;
  border-radius:4px;
  color:var(--text-muted);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
}

.login-page .toggle-pass:hover{ background:#f1f5f9; }

.login-page .btn-login{
  width:100%;
  height:50px;
  border-radius:var(--radius-input);
  border:0;
  background:var(--hospital-green);
  color:#fff;
  font-size:16px;
  font-weight:600;
  text-align:center;
  cursor:pointer;
  box-shadow:var(--shadow-btn);
  transition:background .15s ease;
  margin-top:10px;
}

.login-page .btn-login:hover{ background:var(--hospital-green-dark); }

.login-page .terms{
  margin-top:20px;
  font-size:14px;
  color:var(--text-muted);
  text-align:center;
  line-height:1.5;
  padding:0 10px;
}

.login-page .developed-row{
  font-size:13px;
  color:var(--text-muted);
  line-height:1.4;
  margin-top:30px;
  text-align:center;
}

.login-page .dev-brand{ font-weight:600; color:var(--hospital-green); }

.login-page .panel-right{
  background:var(--hospital-green-light);
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.login-page .hospital-image{
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  background-image:url('../img/login.webp');
  background-size:cover;
  background-position:center;
}

.login-page .hospital-image::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.4) 0%, transparent 50%);
}

.login-page .alert-error{
  margin:8px 0 2px;
  background:#fee2e2;
  border:1px solid #fecaca;
  color:#991b1b;
  padding:10px 12px;
  border-radius:10px;
  font-weight:600;
  font-size:14px;
}

/* Responsivo */
@media (max-width:900px){
  .login-page{ padding:16px; justify-content:flex-start; min-height:100vh; height:auto; }
  .login-page .header{ margin-bottom:20px; padding:0 10px; }
  .login-page .card-wrapper{ grid-template-columns:1fr; max-width:500px; min-height:auto; }
  .login-page .panel-right{ order:1; height:200px; }
  .login-page .panel-left{ order:2; padding:30px 25px; }
  .login-page .panel-left-inner{ max-width:100%; gap:25px; }
}

@media (max-width:600px){
  .login-page .header{ margin-bottom:15px; }
  .login-page .hospital-name{ font-size:20px; }
  .login-page .hospital-subtitle{ font-size:14px; }
  .login-page .panel-left{ padding:25px 20px; }
  .login-page .brand-title{ font-size:20px; }
  .login-page .brand-sub{ font-size:14px; }
}

@media (max-width:400px){
  .login-page{ padding:10px; }
  .login-page .hospital-name{ font-size:18px; }
  .login-page .hospital-subtitle{ font-size:13px; }
  .login-page .panel-left{ padding:20px 15px; }
}

@media (max-height:700px) and (min-width:901px){
  .login-page{ padding:10px; }
  .login-page .header{ margin-bottom:15px; }
  .login-page .card-wrapper{ min-height:450px; }
  .login-page .panel-left{ padding:30px; }
}