/* Pantalla de acceso del portal (portada sin sesión). Independiente de mockup.css: esta página no
   monta el armazón de la SPA, así que se queda con lo justo y los mismos tokens de marca. */
@font-face{font-family:Poppins;font-weight:400;font-display:swap;src:url(assets/fonts/Poppins-Regular.woff2) format('woff2')}
@font-face{font-family:Poppins;font-weight:500;font-display:swap;src:url(assets/fonts/Poppins-Medium.woff2) format('woff2')}
@font-face{font-family:Poppins;font-weight:600;font-display:swap;src:url(assets/fonts/Poppins-SemiBold.woff2) format('woff2')}

:root{--brand:#055a5b;--brand-dark:#044546;--ink:#1c1e1e;--paper:#fbfbfb;--line:#e6e6e6;
      --muted:#626b6b;--tint:#edf4f3;--radius:14px}

*{box-sizing:border-box}
html,body{height:100%}
body.nv-login{margin:0;font-family:Poppins,-apple-system,Segoe UI,Arial,sans-serif;color:var(--ink);
  background:var(--paper);display:grid;grid-template-columns:1fr minmax(380px,42%);min-height:100dvh}

/* ── Columna del formulario ── */
.nv-panel{display:flex;align-items:center;justify-content:center;padding:48px 32px}
.nv-form-wrap{width:100%;max-width:392px}
.nv-logo{display:block;height:35px;width:auto;margin-bottom:44px}

.nv-login h1{font-size:28px;line-height:1.2;letter-spacing:-.6px;font-weight:600;margin:0 0 10px}
.nv-sub{margin:0 0 30px;color:var(--muted);font-size:14px;line-height:1.6}

.nv-login label{display:block;font-size:12px;font-weight:600;margin-bottom:7px}
.nv-login input[type=email],.nv-login input[type=password],.nv-login input[type=text]{
  width:100%;min-height:46px;padding:0 14px;font:400 15px Poppins,Arial,sans-serif;color:var(--ink);
  background:#fff;border:1px solid #d3d7d7;border-radius:10px;margin-bottom:18px;transition:border-color .15s,box-shadow .15s}
.nv-login input:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px #055a5b22}

/* El campo de contraseña lleva el ojo dentro, así que el margen lo pone el contenedor. */
.nv-pass{position:relative;margin-bottom:18px}
.nv-pass input{margin-bottom:0;padding-right:46px}
.nv-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;
  border:0;background:transparent;border-radius:8px;cursor:pointer;display:grid;place-items:center}
.nv-eye::before{content:"";width:19px;height:19px;background:var(--muted);
  -webkit-mask:var(--ojo) center/contain no-repeat;mask:var(--ojo) center/contain no-repeat}
.nv-eye[aria-pressed=true]::before{background:var(--brand)}
.nv-eye:hover{background:var(--tint)}
:root{--ojo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}

.nv-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.nv-login .nv-check{display:flex;align-items:center;gap:9px;margin:0;font-size:13px;font-weight:400;color:var(--muted);cursor:pointer}
.nv-check input{width:17px;height:17px;accent-color:var(--brand);margin:0;cursor:pointer}
.nv-link{color:var(--brand);font-size:13px;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s}
.nv-link:hover{border-bottom-color:var(--brand)}

.nv-submit{width:100%;min-height:48px;border:0;border-radius:10px;background:var(--brand);color:#fff;
  font:600 15px Poppins,Arial,sans-serif;cursor:pointer;transition:background .15s}
.nv-submit:hover{background:var(--brand-dark)}
.nv-submit:focus-visible{outline:3px solid var(--brand);outline-offset:2px}

.nv-help{margin:26px 0 0;font-size:12.5px;color:var(--muted);line-height:1.6}
.nv-help a{color:var(--brand)}

/* Aviso y error: mismo sitio y mismo tamaño, para que la página no salte al fallar. */
.nv-alert,.nv-note{margin:0 0 22px;padding:13px 15px;border-radius:10px;font-size:13.5px;line-height:1.55}
.nv-alert{background:#fdf4f2;border:1px solid #e7c4bf;color:#8a3324}
.nv-note{background:var(--tint);border:1px solid #cddacf;color:#2f4a44}

/* ── Columna de marca ── */
.nv-brand{background:var(--brand);color:#fff;padding:52px 48px;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:center;position:relative;overflow:hidden}
/* Un halo muy suave para que el verde plano no quede muerto. */
.nv-brand::after{content:"";position:absolute;width:560px;height:560px;right:-190px;bottom:-230px;
  border-radius:50%;background:radial-gradient(circle,#ffffff1f 0%,#ffffff00 68%);pointer-events:none}
.nv-claim{position:relative;margin:0;font-size:38px;line-height:1.16;letter-spacing:-1px;font-weight:500}
.nv-foot{position:absolute;left:48px;bottom:52px;font-size:12px;color:#ffffffa8}

/* ── En pantallas estrechas la marca pasa a ser una banda arriba ── */
@media (max-width:900px){
  body.nv-login{grid-template-columns:1fr}
  .nv-brand{display:none}         /* sin logo que mostrar, la banda solo robaba altura */
  .nv-panel{padding:40px 24px}
  .nv-login h1{font-size:25px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}