/* =============================================================================
   nueva-entrar.css — la entrada de la plataforma nueva (etapa 8) · Marca Personal
   -----------------------------------------------------------------------------
   Solo la carga nueva-entrar.html. La entrada actual (auth.html + styles.css) no la ve.

   LA REFERENCIA ES EL PROTOTIPO: tableros «Entrar», «Entrar-codigo», «Entrar-sin-conexion», «Entrar-sin-acceso»,
   «Entrar-confirmado», «Entrar-no-confirmado», «Registro», «Registro-avisos», «Registro-pendiente», «Recuperar»
   y «Recuperar-nueva», con sus «Movil-…». Cada medida sale de ahí y la comprueba el comparador
   (rediseno/herramientas/comparar.html?pagina=nueva-entrar.html…).

   En píxeles. Sin `aspect-ratio`. Nada en mayúsculas. Subtextos en la letra del sistema y nunca en coral;
   títulos en MuseoModerno y en minúscula.
   ============================================================================= */

.ne, .ne *, .ne *::before, .ne *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.ne { margin: 0; font-family: Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #F5F6F8; color: #0F1012; }
/* Por etiqueta y no por clase, como en los tableros: así cualquier clase de más abajo les gana sin trucos. Esta
   hoja solo la carga la página de entrada. */
a { color: #D94F40; }
button { font: inherit; cursor: pointer; }
input::placeholder { color: #858893; opacity: 1; }
/* El atributo no es una clase: una regla de `display` más abajo no puede devolverle la vida a lo escondido. */
[hidden] { display: none !important; }

/* ---------- La página: logotipo, tarjeta y pie ---------- */
.ne-pagina { min-height: 100vh; display: flex; flex-direction: column; background: #F5F6F8; }
.ne-col { flex-grow: 1; display: flex; flex-direction: column; align-items: center; padding: 52px 40px 40px; }
.ne-logo { display: flex; margin-bottom: 30px; }
.ne-logo img { height: 30px; width: auto; display: block; }
.ne-tarjeta { width: 440px; max-width: 100%; background: #FFFFFF; border: 1px solid rgba(15,16,18,.14); border-radius: 20px; padding: 32px 34px 30px; }
.ne-pantalla { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.ne-pie { margin: 22px 0 0; font-size: 12.5px; color: #5A5C66; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, sans-serif; }

/* ---------- Título y bajada ---------- */
.ne-titulo { margin: 0 0 6px; font-family: MuseoModerno, Raleway, sans-serif; font-size: 26px; font-weight: 600; line-height: 1.15; outline: none; }
.ne-sub { margin: 0 0 22px; font-size: 14px; line-height: 1.5; color: #5A5C66; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, sans-serif; overflow-wrap: anywhere; }
.ne-sub strong, .ne-sub b { font-weight: 700; color: #0F1012; }

/* ---------- Campos ---------- */
.ne-campo { display: block; min-width: 0; }
.ne-campo-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.ne-campo-cab > span { font-size: 13.5px; font-weight: 600; }
.ne-enlace { font-size: 13px; font-weight: 600; color: #0F1012; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, sans-serif; }
button.ne-enlace { background: none; border: 0; padding: 0; margin: 0; text-decoration: underline; line-height: normal; }
.ne-campo-caja { position: relative; display: block; }
.ne-campo input { width: 100%; height: 46px; border: 1px solid rgba(15,16,18,.14); background: #FFFFFF; border-radius: 12px; padding: 0 14px; margin: 0; font-size: 15px; color: #0F1012; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, sans-serif; outline: none; -webkit-appearance: none; appearance: none; }
.ne-campo input:focus { border-color: #0F1012; }
.ne-campo--ojo input { padding: 0 42px 0 14px; }
.ne-campo.es-mal input { border: 1.5px solid #B93226; }
.ne-ojo { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); display: flex; background: none; border: 0; padding: 0; margin: 0; line-height: 0; }
.ne-ojo:focus-visible, .ne-enlace:focus-visible, .ne-boton:focus-visible { outline: 2px solid #0F1012; outline-offset: 2px; }
/* Avisos bajo un campo: en negro los que frenan («Usa solo letras.»), en ámbar el que solo pregunta (la errata del correo). */
.ne-nota { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.4; color: #0F1012; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, sans-serif; overflow-wrap: anywhere; }
.ne-nota--duda { color: #7A4A00; }
.ne-nota--duda button { background: none; border: 0; padding: 0; margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; font-weight: 700; color: #7A4A00; text-decoration: underline; }
.ne-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }

/* ---------- Botones ---------- */
.ne-fila { margin: 0; }
.ne-fila--4 { margin-top: 4px; }
.ne-fila--6 { margin-top: 6px; }
.ne-fila--2 { margin-top: 2px; }
.ne-boton { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; height: 48px; margin: 0; padding: 0 12px; border-radius: 12px; font-family: inherit; font-size: 15px; font-weight: 700; line-height: normal; text-decoration: none; }
.ne-boton--coral { background: linear-gradient(90deg, #F26B5E, #D94F40); color: #FFFFFF; border: 1px solid #E55C4D; }
.ne-boton--blanco { background: #FFFFFF; color: #0F1012; border: 1px solid rgba(15,16,18,.14); }
.ne-boton[disabled] { opacity: .6; cursor: default; }
.ne-g { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #0F1012; display: grid; place-items: center; font-size: 11.5px; font-weight: 800; line-height: 1; }
.ne-o { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: #5A5C66; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, sans-serif; }
.ne-o > span { flex-grow: 1; height: 1px; background: rgba(15,16,18,.14); }
.ne-cambio { margin: 0; text-align: center; font-size: 14px; color: #5A5C66; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, sans-serif; }
.ne-cambio a { font-weight: 700; color: #0F1012; font-family: Raleway, sans-serif; }
.ne-centro { display: flex; justify-content: center; }
.ne-centro--2 { align-items: center; gap: 14px; }
.ne-punto { color: #5A5C66; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, sans-serif; }

/* ---------- El aviso coral (sin conexión, credenciales, «ya existe un perfil») ---------- */
.ne-aviso { display: flex; align-items: flex-start; gap: 10px; background: #FFE4DE; border: 1px solid #FFC9BF; border-radius: 12px; padding: 12px 14px; font-size: 13.5px; line-height: 1.45; color: #B93226; }
/* El icono no lleva `flex-shrink: 0`, como en el tablero: con un texto de dos renglones se estrecha («Entrar-sin-conexion»). */
.ne-aviso a, .ne-aviso button { font-weight: 700; color: #0F1012; text-decoration: underline; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, sans-serif; background: none; border: 0; padding: 0; margin: 0; font-size: inherit; line-height: inherit; }

/* ---------- El código de seis dígitos ---------- */
.ne-codigo { position: relative; display: flex; gap: 8px; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, sans-serif; }
.ne-codigo > span { flex: 1 1 0; height: 58px; border: 1px solid rgba(15,16,18,.14); border-radius: 12px; background: #FFFFFF; display: grid; place-items: center; font-size: 24px; font-weight: 700; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, sans-serif; }
.ne-codigo > span.es-aqui { border: 2px solid #0F1012; }
.ne-codigo > span > i { display: none; width: 1.5px; height: 24px; background: #0F1012; }
.ne-codigo > span.es-aqui > i { display: block; animation: ne-parpadeo 1.1s steps(1) infinite; }
.ne-codigo.es-mal > span { border: 1.5px solid #B93226; }
/* El campo de verdad va encima de las seis casillas, invisible: así sirven el teclado numérico, pegar el código y el
   autocompletado del teléfono («código de un solo uso»), que con seis campos sueltos se rompen. */
.ne-codigo input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: transparent; caret-color: transparent; font-size: 16px; opacity: 0; outline: none; }
@keyframes ne-parpadeo { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ne-codigo > span.es-aqui > i { animation: none; } }
.ne-porque { margin: 6px 0 0; padding-top: 16px; border-top: 1px solid rgba(15,16,18,.08); display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; line-height: 1.5; color: #5A5C66; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, sans-serif; }

/* ---------- Requisitos de la contraseña ---------- */
.ne-reqs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ne-reqs li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: #5A5C66; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, sans-serif; }
.ne-reqs li > span { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #9A9DA8; display: grid; place-items: center; flex-shrink: 0; }
.ne-reqs li > span svg { display: none; width: 10px; height: 10px; }
.ne-reqs li.ok { color: #0F1012; }
.ne-reqs li.ok > span { background: #12A150; border: 0; }
.ne-reqs li.ok > span svg { display: block; }
/* En «Crear perfil» van más chicos y en dos columnas (tablero «Registro-avisos»). */
.ne-reqs--dos { margin: -4px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 14px; }
.ne-reqs--dos li { gap: 8px; font-size: 12.5px; }
.ne-reqs--dos li > span { width: 16px; height: 16px; }
.ne-reqs--dos li > span svg { width: 9px; height: 9px; }
.ne-envio { margin: 4px 0 0; text-align: center; font-size: 13px; color: #5A5C66; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, sans-serif; overflow-wrap: anywhere; }
.ne-envio strong { font-weight: 700; color: #0F1012; }

/* ---------- Estados: un sello, un título, un texto y lo que se puede hacer ---------- */
.ne-sello { width: 52px; height: 52px; border-radius: 50%; background: #F5F6F8; display: grid; place-items: center; margin-bottom: 2px; }
.ne-sello--verde { background: #DCF7E6; }
.ne-sello--ambar { background: #FFF1C7; }
.ne-pasos { list-style: none; margin: 0; padding: 18px; border: 1px solid rgba(15,16,18,.14); border-radius: 14px; display: flex; flex-direction: column; gap: 14px; }
.ne-pasos li { display: flex; align-items: flex-start; gap: 12px; }
.ne-pasos li > i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-style: normal; font-size: 13px; }
.ne-pasos li.es-hecho > i { background: #12A150; }
.ne-pasos li.es-ahora > i { background: #0F1012; color: #FFFFFF; font-weight: 700; }
.ne-pasos li.es-luego > i { border: 1.5px solid #C4C7D0; color: #5A5C66; font-weight: 600; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, sans-serif; }
.ne-pasos li > span { min-width: 0; }
.ne-pasos b { display: block; font-size: 15px; font-weight: 700; color: #0F1012; }
.ne-pasos li.es-luego b { color: #5A5C66; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, sans-serif; }
.ne-pasos b + span { display: block; font-size: 13px; line-height: 1.45; color: #5A5C66; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, sans-serif; margin-top: 2px; overflow-wrap: anywhere; }

/* ---------- Teléfono (tableros «Movil-…») ---------- */
@media (max-width: 720px) {
  body.ne, .ne-pagina { background: #FFFFFF; }
  .ne-col { flex-grow: 0; align-items: stretch; padding: 26px 22px 30px; gap: 26px; }
  .ne-logo { margin-bottom: 0; }
  .ne-logo img { height: 24px; }
  .ne-tarjeta { width: auto; border: 0; border-radius: 0; padding: 0; background: none; }
  .ne-pie { display: none; }
  .ne-dos { grid-template-columns: 1fr; gap: 16px; }
  .ne-reqs--dos { grid-template-columns: 1fr; }
  /* En el teléfono los campos van a 16px: con menos, el iPhone acerca la pantalla al escribir (el tablero dice 15). */
  .ne-campo input { font-size: 16px; }
}