/* =============================================================================
   LOGIN · RED NATURA
   -----------------------------------------------------------------------------
   Hoja propia de la pantalla de entrada. Ninguna vista lleva estilos dentro.
   Los tokens son los mismos de la tienda, de modo que la marca se cambia en un
   único sitio en cada hoja y las dos pantallas siguen coincidiendo.

   Sin CDN y sin fuente de iconos: los iconos van en SVG dentro de la vista y
   el modal usa <dialog> nativo. En cPanel, una CDN caída no puede dejar a
   nadie fuera del sistema.
   ============================================================================= */

:root {
  --rn-marca:        #1f3d89;   /* Evolución · principal */
  --rn-marca-fuerte: #172e68;
  --rn-marca-medio:  #2859a6;   /* Tecnología */
  --rn-marca-claro:  #5e8dc9;   /* Salud */
  --rn-naturaleza:   #cdeafc;   /* Naturaleza */
  --rn-marca-tenue:  #e8eefa;
  --rn-marca-borde:  #c3d1ea;

  --rn-lienzo:       #FFFFFF;
  --rn-fondo:        #F5F7FB;
  --rn-hueso:        #EDF1F8;
  --rn-borde:        #D9E0EC;

  --rn-tinta:        #131C33;
  --rn-tinta-2:      #465066;
  --rn-tinta-3:      #6B7690;

  --rn-error:        #8f2753;
  --rn-error-fondo:  #edd5df;
  --rn-ok:           #34705a;
  --rn-ok-fondo:     #def1ea;

  --rn-fuente: 'Montserrat', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --rn-r:      14px;
  --rn-r-sm:   9px;
  --rn-r-pill: 999px;
}

*, *::before, *::after { box-sizing: border-box; }

body.rn-login {
  margin: 0;
  min-height: 100vh;
  background: var(--rn-fondo);
  color: var(--rn-tinta);
  font-family: var(--rn-fuente);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body.rn-login img { max-width: 100%; display: block; }
body.rn-login a { color: var(--rn-marca); text-decoration: none; }
body.rn-login a:hover { text-decoration: underline; }
body.rn-login h1, body.rn-login h2 { margin: 0; font-weight: 600; letter-spacing: -.02em; line-height: 1.16; }

:focus-visible { outline: 2px solid var(--rn-marca); outline-offset: 3px; border-radius: 5px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* -----------------------------------------------------------------------------
   Estructura
   -------------------------------------------------------------------------- */
.rn-login__shell { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 100vh; }
@media (max-width: 980px) { .rn-login__shell { grid-template-columns: 1fr; } }

/* --- Panel de marca --- */
.rn-login__marca {
  position: relative; overflow: hidden;
  background: var(--rn-marca);
  color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 56px 60px;
}
@media (max-width: 980px) { .rn-login__marca { padding: 34px 26px 30px; } }

/* Decoración: la hoja del isotipo, muy tenue, como marca de agua. */
.rn-login__agua {
  position: absolute; right: -90px; bottom: -120px;
  width: 520px; opacity: .07; pointer-events: none;
}
.rn-login__brillo {
  position: absolute; top: -180px; left: -120px;
  width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(94,141,201,.5) 0%, rgba(31,61,137,0) 70%);
  pointer-events: none;
}

.rn-login__logo { position: relative; z-index: 1; }
.rn-login__logo img { height: 54px; width: auto; }
@media (max-width: 980px) { .rn-login__logo img { height: 40px; } }

.rn-login__pitch { position: relative; z-index: 1; max-width: 30ch; }
.rn-login__pitch h1 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); letter-spacing: -.03em; text-wrap: balance; }
.rn-login__pitch p { margin: 16px 0 0; font-size: 1.04rem; color: rgba(255,255,255,.84); max-width: 42ch; }
@media (max-width: 980px) {
  .rn-login__pitch { max-width: none; margin-top: 26px; }
  .rn-login__pitch p { font-size: .95rem; }
}

.rn-login__puntos { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; margin-top: 40px; }
@media (max-width: 980px) { .rn-login__puntos { display: none; } }
.rn-login__punto { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; }
.rn-login__punto svg { width: 34px; height: 34px; opacity: .95; }
.rn-login__punto b { display: block; font-weight: 600; font-size: .96rem; }
.rn-login__punto span { font-size: .88rem; color: rgba(255,255,255,.72); }

.rn-login__pie { position: relative; z-index: 1; font-size: .8rem; color: rgba(255,255,255,.55); }
@media (max-width: 980px) { .rn-login__pie { display: none; } }

/* --- Panel del formulario --- */
.rn-login__form {
  background: var(--rn-lienzo);
  display: flex; align-items: center; justify-content: center;
  padding: 48px 40px;
}
@media (max-width: 980px) { .rn-login__form { padding: 34px 22px 48px; } }
.rn-login__caja { width: 100%; max-width: 396px; }

.rn-login__cab { margin-bottom: 28px; }
.rn-login__cab h2 { font-size: 1.6rem; }
.rn-login__cab p { margin: 8px 0 0; color: var(--rn-tinta-2); font-size: .95rem; }

/* -----------------------------------------------------------------------------
   Campos
   -------------------------------------------------------------------------- */
.rn-campo { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.rn-campo__fila { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rn-campo label { font-size: .82rem; font-weight: 600; color: var(--rn-tinta-2); }
.rn-campo__caja { position: relative; display: flex; align-items: center; }

.rn-login input[type="email"], .rn-login input[type="password"], .rn-login input[type="text"] {
  width: 100%; font-family: inherit; font-size: 16px; color: var(--rn-tinta);
  background: var(--rn-lienzo); border: 1px solid var(--rn-borde);
  border-radius: var(--rn-r-sm); padding: 13px 15px; min-height: 48px;
}
.rn-login input::placeholder { color: var(--rn-tinta-3); }
.rn-login input:focus {
  outline: none; border-color: var(--rn-marca);
  box-shadow: 0 0 0 3px rgba(31,61,137,.15);
}
.rn-campo__caja--pass input { padding-right: 48px; }
.rn-campo__ojo {
  position: absolute; right: 6px; width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; color: var(--rn-tinta-3);
  border-radius: var(--rn-r-sm);
}
.rn-campo__ojo:hover { color: var(--rn-marca); background: var(--rn-hueso); }
.rn-enlace-suave { font-size: .82rem; color: var(--rn-marca); font-weight: 500; }

/* -----------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */
.rn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; font-family: inherit; font-size: .96rem; font-weight: 600;
  padding: 15px 22px; border-radius: var(--rn-r-pill); border: 1px solid transparent;
  cursor: pointer; transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.rn-btn--p { background: var(--rn-marca); color: #fff; }
.rn-btn--p:hover { background: var(--rn-marca-fuerte); color: #fff; text-decoration: none; }
.rn-btn--s { background: transparent; color: var(--rn-tinta-2); border-color: var(--rn-borde); margin-top: 10px; }
.rn-btn--s:hover { border-color: var(--rn-marca); color: var(--rn-marca); text-decoration: none; }

/* -----------------------------------------------------------------------------
   Avisos
   -------------------------------------------------------------------------- */
.rn-aviso {
  display: flex; gap: 10px; align-items: flex-start;
  border-radius: var(--rn-r-sm); padding: 13px 15px; font-size: .88rem;
  border: 1px solid transparent; margin-bottom: 20px;
}
.rn-aviso--error { background: var(--rn-error-fondo); color: var(--rn-error); border-color: rgba(143,39,83,.25); }
.rn-aviso--ok    { background: var(--rn-ok-fondo);    color: var(--rn-ok);    border-color: rgba(52,112,90,.25); }
.rn-aviso ul { margin: 0; padding-left: 18px; }

/* -----------------------------------------------------------------------------
   Modal de recuperación · <dialog> nativo, sin librerías
   -------------------------------------------------------------------------- */
.rn-modal {
  border: 0; padding: 0; width: min(440px, calc(100vw - 32px));
  border-radius: var(--rn-r); background: var(--rn-lienzo); color: var(--rn-tinta);
  box-shadow: 0 24px 64px -24px rgba(19,28,51,.45);
}
.rn-modal::backdrop { background: rgba(19,28,51,.55); backdrop-filter: blur(2px); }
.rn-modal__cuerpo { padding: 34px 32px 30px; position: relative; }
.rn-modal__cerrar {
  position: absolute; top: 14px; right: 14px; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; color: var(--rn-tinta-3); border-radius: var(--rn-r-sm);
}
.rn-modal__cerrar:hover { background: var(--rn-hueso); color: var(--rn-tinta); }
.rn-modal__icono {
  width: 52px; height: 52px; border-radius: 50%; margin-bottom: 18px;
  background: var(--rn-marca-tenue); color: var(--rn-marca);
  display: flex; align-items: center; justify-content: center;
}
.rn-modal h2 { font-size: 1.25rem; }
.rn-modal__sub { margin: 9px 0 22px; color: var(--rn-tinta-2); font-size: .92rem; }

.rn-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* -----------------------------------------------------------------------------
   Aviso flotante del sistema (msjSistema)
   Sustituye a toastr, que obligaba a cargar jQuery y once archivos más.
   -------------------------------------------------------------------------- */
.rn-aviso--flotante {
  position: fixed; top: 20px; right: 20px; z-index: 100;
  max-width: min(400px, calc(100vw - 40px));
  margin: 0; align-items: center; gap: 12px;
  box-shadow: 0 12px 32px -18px rgba(19,28,51,.5);
  animation: rn-entra .22s ease-out;
}
.rn-aviso__x {
  margin-left: auto; flex-shrink: 0;
  width: 26px; height: 26px; border: 0; background: none; cursor: pointer;
  color: currentColor; opacity: .6; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
}
.rn-aviso__x:hover { opacity: 1; }

@keyframes rn-entra {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 560px) {
  .rn-aviso--flotante { top: 12px; right: 12px; left: 12px; max-width: none; }
}

/* El icono alterno del ojo se oculta con el atributo hidden; se declara
   explícitamente porque dentro del botón flex el valor por defecto del
   navegador no siempre se impone sobre el SVG. */
.rn-campo__ojo svg[hidden] { display: none; }

.rn-soporte {
  display: flex; align-items: center; gap: 14px;
  padding: 16px; margin-bottom: 14px;
  border: 1px solid var(--rn-borde); border-radius: var(--rn-r, 14px);
  background: var(--rn-marca-tenue);
}
.rn-soporte__avatar {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--rn-marca); color: #fff; font-weight: 700; font-size: 1.05rem;
}
.rn-soporte__datos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rn-soporte__datos strong { font-size: 1.05rem; color: var(--rn-tinta); overflow-wrap: anywhere; }
.rn-soporte__datos span { font-size: .86rem; color: var(--rn-tinta-2); overflow-wrap: anywhere; }
.rn-soporte__nota { margin: 0 0 20px; font-size: .84rem; color: var(--rn-tinta-3); }
.rn-soporte__cancelar { display: flex; }