/* ==========================================================================
   CURATIO HMS — PANTALLA DE ACCESO
   Depende de: tokens.css → hms-core.css → login.css
   ========================================================================== */

/* El acceso mantiene los controles grandes: es pantalla de marca, no de datos. */
.login .hms-input,
.login .hms-btn { height: var(--hms-alto-campo-xl); }

.login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.32fr .68fr;
  background: var(--hms-light-bg);
}

/* ==========================================================================
   PANEL IZQUIERDO — visual institucional
   ========================================================================== */
.login__visual {
  position: relative;
  overflow: hidden;
  padding: var(--hms-sp-6) var(--hms-sp-7);
  display: flex;
  flex-direction: column;
  color: #fff;
  background:
    radial-gradient(circle at 77% 20%, rgba(40,167,255,.20), transparent 22%),
    radial-gradient(circle at 28% 78%, rgba(118,84,255,.17), transparent 25%),
    linear-gradient(140deg, #061426, #0A3158 58%, #086D9C);
}

/* Trama de puntos sutil */
.login__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .18;
  background-image: radial-gradient(circle, #B7F1FF 1px, transparent 1px);
  background-size: 58px 58px;
  pointer-events: none;
}

.login__visual > * { position: relative; z-index: 2; }

/* ---------- Mensaje principal ---------- */
.login__copy {
  width: min(570px, 92%);
  margin-top: clamp(var(--hms-sp-6), 7vh, 70px);
}
.login__titulo {
  font-size: clamp(2rem, 3.4vw, 2.875rem);
  font-weight: var(--hms-fw-bold);
  line-height: 1.06;
  margin-bottom: var(--hms-sp-4);
}
/* La marca va a extranegra aunque el resto del titular sea negrita: es el
   nombre del producto, no una palabra más de la frase. */
.login__titulo span {
  font-weight: var(--hms-fw-extrabold);
  letter-spacing: -.01em;
  background: linear-gradient(90deg, #59E5FF, #947DFF);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.login__lead {
  color: #D2E3EE;
  line-height: 1.7;
}

/* ---------- Beneficios 2×2 ---------- */
.login__beneficios {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--hms-sp-3);
  margin-top: var(--hms-sp-5);
}
.beneficio {
  display: flex;
  gap: var(--hms-sp-3);
  padding: var(--hms-sp-3);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--hms-radio-tarjeta);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(10px);
}
.beneficio__icono {
  width: 39px; height: 39px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(13,110,253,.35), rgba(124,58,237,.40));
  color: #A9F2FF;
}
.beneficio__titulo { display: block; font-size: var(--hms-fs-etiqueta); font-weight: var(--hms-fw-bold); }
.beneficio__texto  { display: block; margin-top: 3px; font-size: .625rem; line-height: 1.5; color: #B9D0DF; }

/* ---------- Edificio hospitalario ----------
   Marcador de posición geométrico. Sustituir por el render oficial:
   .login__hospital { background: url("../img/hospital.webp") center/contain no-repeat; }
   y eliminar el hijo .edificio.                                                  */
.login__hospital {
  position: absolute;
  right: 4%;
  bottom: -20px;
  width: 48%;
  height: 47%;
  opacity: .72;
}
.edificio {
  position: absolute;
  left: 7%; right: 9%; bottom: 0;
  height: 62%;
  border-radius: 18px 18px 4px 4px;
  background: linear-gradient(150deg, rgba(184,237,255,.15), rgba(92,169,209,.26));
  border: 1px solid rgba(141,230,255,.28);
  box-shadow: inset 0 0 48px rgba(84,214,255,.13);
}
.edificio::before {                       /* filas de ventanas */
  content: "";
  position: absolute;
  inset: 16% 9% 10%;
  background: repeating-linear-gradient(90deg, rgba(207,245,255,.30) 0 8px, transparent 8px 29px);
}
.edificio__letra {
  position: absolute;
  left: 45%; top: 21%;
  font-size: 3.6rem;
  font-weight: var(--hms-fw-bold);
  color: #BCF5FF;
}

/* ---------- Indicadores flotantes ---------- */
.metrica {
  position: absolute;
  z-index: 3;
  padding: var(--hms-sp-3) var(--hms-sp-3);
  border-radius: 14px;
  background: rgba(8,35,59,.80);
  border: 1px solid rgba(140,233,255,.22);
  backdrop-filter: blur(12px);
  box-shadow: var(--hms-sombra-md);
}
.metrica__valor  { display: block; font-size: 1.125rem; font-weight: var(--hms-fw-bold); }
.metrica__texto  { font-size: .5625rem; color: #BED3E1; }
.metrica--1 { right: 8%;  top: 26%; }
.metrica--2 { right: 38%; bottom: 17%; }
.metrica--3 { right: 7%;  bottom: 17%; }

/* ---------- Sello de confianza ---------- */
.login__sello {
  margin-top: auto;
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: var(--hms-sp-3);
  padding: var(--hms-sp-3) var(--hms-sp-4);
  border-radius: 13px;
  background: rgba(8,35,59,.85);
  border: 1px solid rgba(101,228,182,.27);
}
.login__sello i { color: #36DC96; }
.login__sello strong { display: block; font-size: .6875rem; }
.login__sello span   { font-size: .5625rem; color: #A9C3D5; }

/* ==========================================================================
   PANEL DERECHO — formulario
   ========================================================================== */
.login__formulario {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--hms-sp-6);
  background: var(--hms-light-bg);
}

.acceso {
  width: min(430px, 100%);
  color: var(--hms-light-text);
}

.acceso__logo {
  width: 62px; height: 62px;
  margin: 0 auto var(--hms-sp-5);
  display: grid; place-items: center;
  border-radius: 19px;
  background: var(--hms-grad-accion);
  color: #fff;
  font-size: 1.5rem;
  box-shadow: 0 15px 30px rgba(81,106,255,.24);
}
.acceso__titulo {
  text-align: center;
  font-size: var(--hms-fs-pantalla);
  font-weight: var(--hms-fw-bold);
}
.acceso__sub {
  text-align: center;
  color: var(--hms-light-muted);
  font-size: .8125rem;
  margin: var(--hms-sp-2) 0 var(--hms-sp-6);
}

.acceso__fila {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .75rem;
  color: var(--hms-light-muted);
  margin: var(--hms-sp-1) 0 var(--hms-sp-5);
}
.acceso__fila label { display: flex; align-items: center; gap: var(--hms-sp-2); cursor: pointer; }
.acceso__fila a     { color: var(--hms-primary); font-weight: var(--hms-fw-bold); }

.acceso__separador {
  display: flex;
  align-items: center;
  gap: var(--hms-sp-3);
  margin: var(--hms-sp-5) 0 var(--hms-sp-4);
  color: #98A5B4;
  font-size: .6875rem;
}
.acceso__separador::before,
.acceso__separador::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #E6EBF2;
}

.acceso__social {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--hms-sp-3);
}
.acceso__social .hms-btn { height: 45px; font-weight: var(--hms-fw-semibold); }

/* ---------- Firma del fabricante ----------
   La pantalla ya cerraba con una linea de copyright en texto plano; lo que se
   anade es el isotipo delante. Va al pie, sin caja ni fondo propio: es una
   firma, no un reclamo, y no debe competir con el boton de acceso ni tocar el
   bloque del formulario, que queda exactamente igual. */
.acceso__marca {
  display: flex; align-items: center; justify-content: center;
  gap: var(--hms-sp-3);
  margin-top: var(--hms-sp-6);
  padding-top: var(--hms-sp-5);
  border-top: 1px solid #E6EBF2;
}

/* El logo es apaisado (1,9:1), no casi cuadrado como la version anterior: a
   28px de ancho quedaba en 15px de alto y no se leia. `height: auto` mantiene
   la proporcion pase lo que pase con el archivo. */
.acceso__marca img { display: block; width: 40px; height: auto; }

.acceso__marca-txt { line-height: 1.3; text-align: left; }

.acceso__marca-txt strong {
  display: block;
  font-size: .6875rem;
  font-weight: var(--hms-fw-extrabold);
  letter-spacing: .05em;
  color: #3F4A5A;
}

/* El verde es el de la marca, no un color del sistema: el eslogan forma parte
   del logotipo y se compone con su propia paleta. Se usa #7DAF36 y no el
   #8CC63F del isotipo porque ese lima, en texto de 9px sobre fondo claro,
   baja de 3:1 de contraste; oscurecido cumple sin dejar de ser el mismo verde. */
.acceso__marca-txt span {
  display: block;
  font-size: .5625rem;
  font-weight: var(--hms-fw-semibold);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #7DAF36;
}

.acceso__pie {
  text-align: center;
  color: #A0ACBA;
  font-size: .625rem;
  margin-top: var(--hms-sp-3);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Tablet — se reduce el peso del panel visual */
@media (max-width: 1200px) {
  .login { grid-template-columns: 1fr .9fr; }
  .login__beneficios { grid-template-columns: 1fr; }
  .login__hospital { opacity: .45; }
}

/* Móvil — el panel visual se oculta, el formulario ocupa la pantalla */
@media (max-width: 980px) {
  .login { grid-template-columns: 1fr; }
  .login__visual { display: none; }
  .login__formulario { min-height: 100vh; padding: var(--hms-sp-5); }
}

@media (max-width: 420px) {
  .acceso__social { grid-template-columns: 1fr; }
}

/* Pantallas de poca altura — evita que el contenido se corte */
@media (max-height: 700px) {
  .login__copy { margin-top: var(--hms-sp-5); }
  .login__hospital { display: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   EL SÍMBOLO, YA COMO IMAGEN

   Antes era un `<i>` de FontAwesome dentro de un `<div>` con el degradado de
   fondo. Se veía bien, pero no era un logo: no se podía imprimir, ni guardar
   en la base de datos, ni mandar por correo, ni poner en la pestaña del
   navegador. Ahora es `marca-hms-simbolo.svg`.

   El contenedor SUELTA su fondo, su sombra y su radio: el SVG ya trae el
   cuadrado redondeado con su degradado dentro. Dejárselos pintaría un
   degradado encima de otro y un borde redondeado sobre otro ligeramente
   distinto — que es peor que cualquiera de los dos solo.
   ══════════════════════════════════════════════════════════════════════════ */
.acceso__logo--img {
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}
.acceso__logo--img img { width: 100%; height: 100%; display: block; }