:root{
  --sx-navy:#071844;
  --sx-navy-2:#0b2a67;
  --sx-blue:#3557f6;
  --sx-violet:#693cf1;
  --sx-cyan:#14c8ee;
  --sx-teal:#18d7c2;
  --sx-ink:#0a1d50;
  --sx-muted:#63708d;
  --sx-line:#d7e2f2;
  --sx-surface:#f5f8fd;
}

body.loginVisibleV011{
  margin:0!important;
  min-height:100dvh!important;
  overflow:auto!important;
  background:var(--sx-surface)!important;
  color:var(--sx-ink)!important;
}

#login.loginA62{
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(390px,37.5%) minmax(0,62.5%)!important;
  width:100%!important;
  min-height:100dvh!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  overflow:hidden!important;
  background:#f8faff!important;
  box-shadow:none!important;
  font-family:"Segoe UI",Inter,Arial,sans-serif!important;
}

#login.loginA62.hidden{display:none!important}

.loginA62__access{
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  min-height:100dvh;
  padding:clamp(28px,4.2vh,48px) clamp(34px,4.4vw,68px) 28px;
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(circle at 18% 9%,rgba(39,93,255,.34),transparent 30%),
    linear-gradient(155deg,rgba(5,23,65,.98) 0%,rgba(9,34,89,.98) 58%,rgba(14,78,133,.94) 100%);
  box-sizing:border-box;
}

.loginA62__access::before{
  content:"";
  position:absolute;
  z-index:-2;
  inset:auto 0 0;
  height:45%;
  background:url("/assets/branding/sinergia/hospital-san-francisco-login.webp?v=908") center 39%/cover no-repeat;
  filter:saturate(.94) contrast(1.04);
}

.loginA62__access::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:
    linear-gradient(180deg,rgba(5,22,65,0) 45%,rgba(6,28,74,.38) 61%,rgba(5,20,57,.28) 100%),
    radial-gradient(circle at 0 100%,rgba(104,54,244,.42),transparent 34%),
    linear-gradient(90deg,rgba(7,28,73,.18),rgba(7,28,73,.02));
  pointer-events:none;
}

.loginA62__brand{
  display:block;
  width:min(100%,420px);
  margin:0 auto;
  padding-bottom:20px;
  border-bottom:1px solid rgba(52,218,224,.45);
}

.loginA62__brand img{
  display:block;
  width:min(100%,390px);
  height:auto;
  max-height:112px;
  margin:0 auto;
  object-fit:contain;
  filter:drop-shadow(0 10px 28px rgba(0,0,0,.18));
}

.loginA62__form{
  width:min(100%,420px);
  margin:18px auto 0;
}

.loginA62__heading{margin:0 0 18px;color:#fff!important;font-size:clamp(22px,2vw,31px);font-weight:350;letter-spacing:-.02em}
.loginA62__heading strong{font-weight:850;color:#fff!important}
.loginA62__eyebrow{display:block;margin:0 0 8px;color:#bcd4ff!important;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}

.loginA62__years{margin:0 0 20px}
.loginA62__yearsLabel{display:block;margin:0 0 9px;color:#e9f1ff!important;font-size:11px;font-weight:800;letter-spacing:.06em;text-align:center;text-transform:uppercase}
.loginA62__yearGrid{display:grid;grid-template-columns:repeat(3,1fr);overflow:visible;border:1px solid rgba(99,170,255,.42);border-radius:13px;background:rgba(11,37,91,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.loginA62__year{
  position:relative;
  min-height:50px;
  padding:0 10px;
  border:0;
  border-right:1px solid rgba(123,171,244,.22);
  background:transparent;
  color:#dce8ff;
  font:800 16px/1 "Segoe UI",Arial,sans-serif;
  cursor:pointer;
  transition:transform .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease;
}
.loginA62__year:last-child{border-right:0}
.loginA62__year:hover,.loginA62__year:focus-visible{z-index:1;background:rgba(80,106,246,.22);color:#fff;outline:2px solid rgba(69,223,226,.7);outline-offset:2px}
.loginA62__year.is-selected{
  z-index:2;
  color:#fff;
  background:linear-gradient(125deg,#4b4cf1 0%,#3466f2 46%,#18d3c3 100%);
  border-radius:11px;
  box-shadow:0 10px 24px rgba(41,83,241,.34),inset 0 1px 0 rgba(255,255,255,.3);
  transform:translateY(-2px);
}
.loginA62__year.is-selected::before{
  content:"✓";
  position:absolute;
  top:-10px;
  left:50%;
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  transform:translateX(-50%);
  border:2px solid #fff;
  border-radius:50%;
  background:#4c59ef;
  color:#fff;
  font-size:12px;
}

.loginA62__credentials{display:grid;gap:13px}
#login .loginA62__field{
  position:relative;
  display:flex;
  align-items:center;
  min-height:54px;
  padding:0 15px;
  border:1px solid rgba(151,188,246,.58)!important;
  border-radius:11px!important;
  background:rgba(4,24,68,.48)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
  box-sizing:border-box;
}
#login .loginA62__field:focus-within{border-color:#3ee3db!important;background:rgba(7,33,84,.74)!important;box-shadow:0 0 0 3px rgba(27,216,201,.13)!important}
.loginA62__fieldIcon{display:grid;place-items:center;width:22px;height:22px;margin-right:11px;color:#e8efff;flex:0 0 22px}
.loginA62__fieldIcon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#login #usuario.loginA62__input,#login #password.loginA62__input{
  width:100%!important;
  min-width:0!important;
  height:52px!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  box-shadow:none!important;
  font:650 14px/1 "Segoe UI",Arial,sans-serif!important;
  caret-color:#42e7df!important;
}
/* Chrome/Edge/Safari pintan de claro las credenciales guardadas. Se cubre ese
   color nativo con la superficie del acceso para evitar el rectángulo blanco. */
#login #usuario.loginA62__input:-webkit-autofill,
#login #usuario.loginA62__input:-webkit-autofill:hover,
#login #usuario.loginA62__input:-webkit-autofill:focus,
#login #usuario.loginA62__input:-webkit-autofill:active,
#login #password.loginA62__input:-webkit-autofill,
#login #password.loginA62__input:-webkit-autofill:hover,
#login #password.loginA62__input:-webkit-autofill:focus,
#login #password.loginA62__input:-webkit-autofill:active{
  border:0!important;
  border-radius:0!important;
  -webkit-text-fill-color:#fff!important;
  caret-color:#42e7df!important;
  box-shadow:0 0 0 1000px #092557 inset!important;
  -webkit-box-shadow:0 0 0 1000px #092557 inset!important;
  background-color:#092557!important;
  transition:background-color 9999s ease-out 0s!important;
}
#login #usuario.loginA62__input:autofill,
#login #password.loginA62__input:autofill{
  color:#fff!important;
  background:#092557!important;
  box-shadow:0 0 0 1000px #092557 inset!important;
}
#login .loginA62__input::placeholder{color:#aebad3!important;-webkit-text-fill-color:#aebad3!important}
.loginA62__passwordToggle{
  display:grid!important;
  place-items:center!important;
  width:38px!important;
  height:38px!important;
  flex:0 0 38px!important;
  padding:0!important;
  border:0!important;
  border-radius:9px!important;
  background:transparent!important;
  color:#c6d3ed!important;
  cursor:pointer!important;
}
.loginA62__passwordToggle:hover,.loginA62__passwordToggle:focus-visible{background:rgba(255,255,255,.1)!important;color:#fff!important;outline:1px solid #4de0dc!important}
.loginA62__passwordToggle svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

#login #loginBtn.loginA62__submit{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  width:100%!important;
  min-height:56px!important;
  margin:17px 0 0!important;
  padding:0 18px!important;
  border:1px solid rgba(117,245,235,.75)!important;
  border-radius:10px!important;
  background:linear-gradient(118deg,#4d46f5 0%,#2e75ee 48%,#1dd4c0 100%)!important;
  color:#fff!important;
  box-shadow:0 14px 32px rgba(32,94,229,.34),inset 0 1px 0 rgba(255,255,255,.28)!important;
  font:850 15px/1 "Segoe UI",Arial,sans-serif!important;
  letter-spacing:.035em!important;
  text-transform:uppercase!important;
  cursor:pointer!important;
}
#login #loginBtn.loginA62__submit:hover,#login #loginBtn.loginA62__submit:focus-visible{filter:brightness(1.08)!important;transform:translateY(-1px)!important;outline:2px solid rgba(255,255,255,.65)!important;outline-offset:2px!important}
#login #loginBtn.loginA62__submit svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#loginStatusV812{min-height:18px!important;margin:8px 2px 0!important;color:#ffd0d6!important;text-align:center!important;font:750 11px/1.35 "Segoe UI",Arial,sans-serif!important}
#loginStatusV812.ok{color:#8ff8e8!important}
.loginA62__security{display:flex;align-items:center;justify-content:center;gap:8px;margin:15px 0 0;color:#dbe6fb;font-size:11px;font-weight:600;text-align:center}
.loginA62__security svg{width:17px;height:17px;fill:none;stroke:#cde4ff;stroke-width:1.8}
.loginA62__version{margin:auto auto 0;width:min(100%,420px);padding-top:20px;color:rgba(223,235,255,.75);font-size:10px;font-weight:650;text-align:center}

.loginA62__institution{
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  min-height:100dvh;
  overflow:auto;
  background:
    radial-gradient(circle at 79% 13%,rgba(51,104,243,.1),transparent 26%),
    radial-gradient(circle at 20% 84%,rgba(83,58,226,.07),transparent 28%),
    #f8faff;
}
#login.loginA62 .loginA62__institution :is(h2,p,strong,b,span,small){opacity:1!important;filter:none!important;text-shadow:none!important}
.loginA62__content{width:min(100%,980px);margin:0 auto;padding:clamp(32px,6vh,64px) clamp(28px,5vw,74px) 28px;box-sizing:border-box}
body.loginVisibleV011 #login.loginA62 h2.loginA62__sectionTitle{display:inline-flex;flex-direction:column;gap:8px;margin:0 0 20px;color:#0a1d50!important;-webkit-text-fill-color:#0a1d50!important;font-size:clamp(18px,1.55vw,25px);font-weight:900;letter-spacing:.03em}
.loginA62__sectionTitle::after{content:"";width:86px;height:4px;border-radius:9px;background:linear-gradient(90deg,var(--sx-violet),var(--sx-cyan),var(--sx-teal))}

.loginA62__carousel{
  position:relative;
  display:grid;
  grid-template-columns:52px minmax(0,1fr) 52px;
  align-items:center;
  gap:12px;
}
.loginA62__institutionCard{
  position:relative;
  min-height:250px;
  overflow:hidden;
  border:1px solid #bed2f1;
  border-radius:24px;
  background:rgba(255,255,255,.82);
  box-shadow:0 18px 48px rgba(34,66,122,.09);
}
.loginA62__institutionCard::before{content:"";position:absolute;inset:auto -8% -80px -8%;height:190px;background:linear-gradient(145deg,transparent 22%,rgba(47,104,244,.045) 23% 43%,rgba(21,204,220,.05) 44% 60%,transparent 61%);transform:skewY(-7deg)}
.loginA62__slide{position:absolute;inset:0;display:grid;grid-template-columns:minmax(180px,.9fr) 1px minmax(230px,1.05fr);align-items:center;gap:clamp(24px,4vw,52px);padding:clamp(34px,5vw,64px);opacity:0;visibility:hidden;transform:translateX(16px);transition:opacity .35s ease,transform .35s ease,visibility .35s;box-sizing:border-box}
.loginA62__slide.is-active{opacity:1;visibility:visible;transform:none}
body.loginVisibleV011 #login.loginA62 .loginA62__sigla{display:grid;place-items:center;color:#080808!important;-webkit-text-fill-color:#080808!important;font-size:clamp(40px,4.5vw,68px);font-weight:950;letter-spacing:-.06em;text-align:center}
body.loginVisibleV011 #login.loginA62 .loginA62__sigla small{display:block;margin-top:4px;color:#43516a!important;-webkit-text-fill-color:#43516a!important;font-size:10px;font-weight:650;letter-spacing:0}
.loginA62__divider{width:1px;height:142px;background:#9baac3}
body.loginVisibleV011 #login.loginA62 .loginA62__slideCopy h2{margin:0 0 10px;color:#0a1d50!important;-webkit-text-fill-color:#0a1d50!important;font-size:clamp(23px,2.2vw,34px);line-height:1.05;font-weight:900;letter-spacing:-.025em}
body.loginVisibleV011 #login.loginA62 .loginA62__slideCopy p{margin:0;color:#30416a!important;-webkit-text-fill-color:#30416a!important;font-size:clamp(14px,1.25vw,19px);line-height:1.35}
.loginA62__arrow{display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:#fff;color:#4d4cf2;font-size:34px;line-height:1;box-shadow:0 10px 28px rgba(33,61,110,.14);cursor:pointer}
.loginA62__arrow:hover,.loginA62__arrow:focus-visible{color:#11aeb5;transform:translateY(-1px);outline:2px solid #4c58ee;outline-offset:2px}
.loginA62__dots{display:flex;justify-content:center;gap:15px;margin:20px 0 34px}
.loginA62__dot{width:13px;height:13px;padding:0;border:0;border-radius:50%;background:#d9deea;cursor:pointer}
.loginA62__dot.is-active{background:linear-gradient(135deg,#5b45ee,#16c9c2);box-shadow:0 0 0 4px rgba(80,75,236,.1)}

body.loginVisibleV011 #login.loginA62 .loginA62__scheduleTitle,body.loginVisibleV011 #login.loginA62 .loginA62__scheduleTitle span{display:flex;align-items:center;gap:15px;margin:0 0 17px;color:#0a1d50!important;-webkit-text-fill-color:#0a1d50!important;font-size:16px;font-weight:900;letter-spacing:.025em;text-transform:uppercase}
#login .loginA62__scheduleTitle>span:last-child{display:block;margin:0}
.loginA62__scheduleIcon{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:linear-gradient(145deg,#7144ef,#355cf5);color:#fff;box-shadow:0 11px 25px rgba(79,72,239,.2)}
.loginA62__scheduleIcon svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.loginA62__scheduleLine{width:54px;height:3px;margin-top:7px;border-radius:4px;background:linear-gradient(90deg,#6248ef,#1bd2c4)}
.loginA62__scheduleCard{display:grid;grid-template-columns:175px 1px minmax(0,1fr);align-items:center;gap:clamp(32px,5vw,58px);min-height:170px;padding:28px 42px;border:1px solid #e0e6f0;border-radius:24px;background:rgba(255,255,255,.94);box-shadow:0 17px 44px rgba(42,59,96,.11);box-sizing:border-box}
.loginA62__calendarArt{display:grid;place-items:center;width:128px;height:128px;margin:auto;border-radius:50%;background:linear-gradient(145deg,#eef0ff,#f5f7ff);color:#5d50ee}
.loginA62__calendarArt svg{width:74px;height:74px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.loginA62__scheduleDivider{width:1px;height:112px;background:#d3dbea}
body.loginVisibleV011 #login.loginA62 .loginA62__scheduleCopy strong{display:block;margin-bottom:10px;color:#0a1d50!important;-webkit-text-fill-color:#0a1d50!important;font-size:19px}
body.loginVisibleV011 #login.loginA62 .loginA62__scheduleCopy p{margin:0;color:#344471!important;-webkit-text-fill-color:#344471!important;font-size:17px;line-height:1.45}

.loginA62__footer{padding:25px 34px 28px;border-top:2px solid transparent;border-image:linear-gradient(90deg,#6546ef,#2784f1,#15d0c1) 1;background:rgba(248,250,255,.86);color:#21335e;text-align:center}
body.loginVisibleV011 #login.loginA62 .loginA62__footer b,body.loginVisibleV011 #login.loginA62 .loginA62__footer span{display:block;color:#21335e!important;-webkit-text-fill-color:#21335e!important;opacity:1!important;font-size:12px;line-height:1.7;letter-spacing:.025em}
.loginA62__footer b{font-weight:900}

@media(max-width:1100px){
  #login.loginA62{grid-template-columns:minmax(350px,43%) minmax(0,57%)!important}
  .loginA62__access{padding-left:34px;padding-right:34px}
  .loginA62__content{padding-left:28px;padding-right:28px}
  .loginA62__carousel{grid-template-columns:42px minmax(0,1fr) 42px;gap:8px}
  .loginA62__arrow{width:40px;height:40px}
  .loginA62__slide{grid-template-columns:1fr;padding:35px;text-align:center;gap:16px}
  .loginA62__divider{display:none}
  .loginA62__sigla{font-size:44px}
}

@media(max-width:780px){
  #login.loginA62{display:block!important;overflow:auto!important}
  .loginA62__access{min-height:100dvh;padding:28px 24px 24px}
  .loginA62__access::before{height:38%;opacity:.58}
  .loginA62__brand,.loginA62__form,.loginA62__version{width:min(100%,440px)}
  .loginA62__brand{justify-content:center}
  .loginA62__brand img{width:min(100%,360px);height:auto;max-height:104px}
  .loginA62__heading{text-align:center}
  .loginA62__eyebrow{text-align:center}
  .loginA62__institution{min-height:auto}
  .loginA62__content{padding:36px 18px 28px}
  .loginA62__institutionCard{min-height:310px}
  .loginA62__carousel{grid-template-columns:34px minmax(0,1fr) 34px;gap:5px}
  .loginA62__arrow{width:34px;height:34px;font-size:26px}
  .loginA62__scheduleCard{grid-template-columns:1fr;gap:18px;padding:27px;text-align:center}
  .loginA62__scheduleDivider{width:80%;height:1px;margin:auto}
  .loginA62__calendarArt{width:108px;height:108px}
}

@media(max-width:430px){
  .loginA62__access{padding-left:18px;padding-right:18px}
  .loginA62__year{min-height:46px;font-size:14px}
  .loginA62__slide{padding:26px 18px}
  .loginA62__slideCopy h2{font-size:23px}
  .loginA62__scheduleCard{padding:23px 18px}
}

@media(max-height:850px) and (min-width:781px){
  .loginA62__access{padding-top:16px;padding-bottom:12px}
  .loginA62__brand{padding-bottom:10px}
  .loginA62__brand img{width:min(100%,330px);max-height:72px}
  .loginA62__form{margin-top:8px}
  .loginA62__eyebrow{margin-bottom:4px;font-size:9px}
  .loginA62__heading{margin-bottom:9px;font-size:21px}
  .loginA62__years{margin-bottom:10px}
  .loginA62__yearsLabel{margin-bottom:6px;font-size:9px}
  .loginA62__year{min-height:42px}
  .loginA62__credentials{gap:8px}
  #login .loginA62__field{min-height:45px}
  #login #usuario.loginA62__input,#login #password.loginA62__input{height:43px!important}
  #login #loginBtn.loginA62__submit{min-height:47px!important;margin-top:10px!important}
  .loginA62__security{margin-top:8px;font-size:10px}
  .loginA62__version{padding-top:8px;font-size:9px}
  .loginA62__content{padding-top:18px;padding-bottom:12px}
  body.loginVisibleV011 #login.loginA62 h2.loginA62__sectionTitle{margin-bottom:12px;font-size:18px}
  .loginA62__institutionCard{min-height:185px}
  .loginA62__slide{padding-top:22px;padding-bottom:22px}
  .loginA62__dots{margin:10px 0 14px}
  body.loginVisibleV011 #login.loginA62 .loginA62__scheduleTitle,body.loginVisibleV011 #login.loginA62 .loginA62__scheduleTitle span{margin-bottom:10px;font-size:14px}
  .loginA62__scheduleIcon{width:38px;height:38px}
  .loginA62__scheduleCard{min-height:120px;padding-top:14px;padding-bottom:14px}
  .loginA62__calendarArt{width:82px;height:82px}
  .loginA62__calendarArt svg{width:50px;height:50px}
  .loginA62__scheduleDivider{height:82px}
  .loginA62__footer{padding-top:10px;padding-bottom:11px}
  body.loginVisibleV011 #login.loginA62 .loginA62__footer b,body.loginVisibleV011 #login.loginA62 .loginA62__footer span{font-size:10px;line-height:1.55}
}

@media(prefers-reduced-motion:reduce){
  #login.loginA62 *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}