/* ===================================================================
   NATIVEL ADMIN — estilos.css
   Paleta y tipografía derivadas de la landing final (negro profundo,
   plateado, dorado, acento azul con glow, serif Cinzel + sans Montserrat).
   Variables en :root para que cualquier pantalla nueva (login, panel,
   lo que sea) herede lo mismo sin repetir valores sueltos.
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Montserrat:wght@300;400;500;600&display=swap');

:root {
  /* Paleta */
  --nv-negro:        #020203;   /* fondo base, igual a la landing */
  --nv-negro-suave:  #0e0f13;   /* tarjetas / superficies elevadas */
  --nv-superficie:   #191b20;   /* inputs, campos */
  --nv-borde:        #2a2d34;   /* bordes sutiles */
  --nv-plata:        #eceae6;   /* texto principal ("N" del monograma) */
  --nv-oro:          #c99e32;   /* acento cálido ("L" del monograma) */
  --nv-oro-claro:    #e6c050;   /* hover/detalle sobre oro */
  --nv-azul:         #2b7fff;   /* acento frío, foco, links activos, glow */
  --nv-azul-glow:    #0088ff;
  --nv-texto-muted:  #a0a7b0;   /* texto secundario */
  --nv-texto-tenue:  #6b7178;   /* texto terciario, casi invisible */
  --nv-error:        #d97757;

  /* Tipografía */
  --nv-font-display: 'Cinzel', Georgia, serif;
  --nv-font-texto:   'Montserrat', -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Radios y espaciados usados en toda la UI */
  --nv-radio: 6px;
  --nv-radio-chico: 4px;
}

* { margin:0; padding:0; box-sizing:border-box; }

html, body {
  height:100%;
  background:var(--nv-negro);
  color:var(--nv-plata);
  font-family:var(--nv-font-texto);
}

/* --- Tipografía de marca --- */

.nv-titulo {
  font-family:var(--nv-font-display);
  font-weight:600;
  letter-spacing:0.14em;
  color:var(--nv-plata);
}

.nv-subtitulo {
  font-family:var(--nv-font-texto);
  font-size:0.85rem;
  letter-spacing:0.06em;
  color:var(--nv-texto-muted);
}

.nv-acento-oro   { color:var(--nv-oro); }
.nv-acento-azul  { color:var(--nv-azul); }

/* --- Monograma NL reutilizable: tipografía real con degradé de texto,
   no paths dibujados a mano — así es una N y una L de verdad, nítidas
   a cualquier tamaño. Mismo criterio en landing y login. --- */

.nv-monograma {
  display:flex;
  align-items:flex-start; /* misma altura arriba para las dos letras */
  line-height:0.8;
  font-family:var(--nv-font-display);
  font-weight:500; /* más fino, como en el logo original */
}

.nv-monograma .nv-letra-n,
.nv-monograma .nv-letra-l {
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
}

.nv-monograma .nv-letra-n {
  background-image:linear-gradient(135deg, #ffffff 0%, #cfd3d8 45%, #70757d 100%);
}

.nv-monograma .nv-letra-l {
  background-image:linear-gradient(135deg, #ffee99 0%, var(--nv-oro) 50%, #78500f 100%);
  margin-left:var(--nv-solape-nl, -0.34em); /* cerca, afinando un poco más */
  /* misma altura de arranque que la N (align-items:flex-start ya la deja
     igual arriba); el estiramiento es SOLO hacia abajo, con transform
     anclado en el borde superior — no agranda la letra, la alarga. */
  transform:scaleY(var(--nv-estiramiento-l, 1.12));
  transform-origin:top;
  position:relative;
  z-index:1; /* la L queda encima de la N, como en el logo real */
}

/* --- Tarjetas (login, formularios, paneles) --- */

.nv-tarjeta {
  background:var(--nv-negro-suave);
  border:1px solid var(--nv-borde);
  border-radius:var(--nv-radio);
  padding:32px 26px;
}

/* --- Campos de formulario --- */

.nv-label {
  display:block;
  font-size:0.75rem;
  color:var(--nv-texto-muted);
  letter-spacing:0.04em;
  margin-bottom:6px;
  margin-top:16px;
}

.nv-input {
  width:100%;
  background:var(--nv-superficie);
  border:1px solid var(--nv-borde);
  border-radius:var(--nv-radio-chico);
  padding:11px 12px;
  color:var(--nv-plata);
  font-family:var(--nv-font-texto);
  font-size:0.95rem;
  outline:none;
  transition:border-color 0.15s ease;
}

.nv-input:focus {
  border-color:var(--nv-azul);
  box-shadow:0 0 0 3px rgba(43,127,255,0.15);
}

/* --- Botones --- */

.nv-btn-primario {
  width:100%;
  margin-top:24px;
  padding:12px;
  background:var(--nv-azul);
  color:#ffffff;
  border:none;
  border-radius:var(--nv-radio-chico);
  font-family:var(--nv-font-texto);
  font-size:0.92rem;
  font-weight:600;
  letter-spacing:0.02em;
  cursor:pointer;
  transition:background 0.15s ease, opacity 0.15s ease;
}

.nv-btn-primario:hover   { background:var(--nv-azul-glow); }
.nv-btn-primario:disabled { opacity:0.5; cursor:default; }

/* Link discreto, tipo "acceder" en la landing o "cancelar" en modales */
.nv-link-tenue {
  color:var(--nv-texto-tenue);
  text-decoration:none;
  letter-spacing:0.08em;
  font-size:0.78rem;
  transition:color 0.15s ease;
}
.nv-link-tenue:active,
.nv-link-tenue:hover { color:var(--nv-oro); }

/* --- Mensajes de estado --- */

.nv-mensaje {
  margin-top:14px;
  font-size:0.82rem;
  text-align:center;
  min-height:1.2em;
}
.nv-mensaje.nv-error  { color:var(--nv-error); }
.nv-mensaje.nv-ok     { color:#8fbf7f; }

/* --- Divisor tipo "línea con brillo azul al centro", como en la imagen --- */

.nv-divisor {
  height:1px;
  width:220px;
  margin:20px auto;
  background:linear-gradient(90deg, transparent, var(--nv-azul), transparent);
  opacity:0.6;
}