/* PCLAU_190 · Rediseño del modal de acceso único (login.php vive en el modal
   inyectado por nv_render_auth_modal(), helpers.php).
   Objetivo: separar visualmente ACCEDER / RECUPERAR / CONFIRMACIÓN, que antes
   compartían un único bloque plano (.nv-auth-modal-body{display:grid;gap:4px}
   sin cabeceras propias por panel).
   Este fichero se carga DESPUÉS de style.css (ver nv_layout_header en
   helpers.php) y usa selectores prefijados con #nv-auth-modal para ganar
   especificidad sin tocar ni una regla del CSS global existente (label,
   input, .nv-auth-modal-body, .nv-auth-panel, .nv-auth-switch, .nv-pass-field,
   .nv-pass-toggle siguen intactos en style.css; aquí solo se sobrescriben
   propiedades puntuales de forma aislada). No se usa !important salvo que sea
   estrictamente necesario para ganar a alguna regla táctil de style.css. */

#nv-auth-modal .nv-auth-modal-card{padding-bottom:2px;width:min(480px,94vw)}

/* Cabecera: kicker + título, más aire para el bloque de pestañas debajo */
#nv-auth-modal .nv-auth-modal-head{align-items:flex-start;gap:14px}
#nv-auth-modal .nv-auth-modal-head-text{display:grid;gap:2px;min-width:0}
#nv-auth-modal .nv-auth-modal-kicker{font-size:.66rem;font-weight:900;text-transform:uppercase;letter-spacing:.09em;color:rgba(242,255,239,.78)}
#nv-auth-modal .nv-auth-modal-head h3{margin:0;font-size:1.1rem;line-height:1.2}

/* Pestañas superiores: ACCEDER / RECUPERAR / CONFIRMACIÓN.
   Reutilizan el mecanismo ya existente data-nv-auth-switch (sin JS nuevo
   salvo el resaltado de la pestaña activa, ver PCLAU_190 en app.js). */
#nv-auth-modal .nv-auth-tabs{display:flex;flex-wrap:wrap;gap:6px;padding:12px 16px 0;background:#eef7e5}
#nv-auth-modal .nv-auth-tab{flex:1 1 auto;min-width:92px;display:flex;align-items:center;justify-content:center;gap:5px;border:1px solid #d7ecd0;border-bottom:0;background:#e3f0d9;color:#3a5b3f;font:inherit;font-weight:800;font-size:.78rem;padding:9px 6px;border-radius:14px 14px 0 0;cursor:pointer;transition:background .15s ease,color .15s ease;white-space:nowrap}
#nv-auth-modal .nv-auth-tab-ico{font-size:.9rem;line-height:1}
#nv-auth-modal .nv-auth-tab:hover{background:#f1faea}
#nv-auth-modal .nv-auth-tab.is-active{background:#f8fff3;color:#173d1d;position:relative}
#nv-auth-modal .nv-auth-tab.is-active::after{content:"";position:absolute;left:12%;right:12%;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:linear-gradient(90deg,#2f8f3a,#57b957)}

/* Cuerpo: cada panel (form) es autocontenido, con su propia cabecera de
   icono + título + descripción, en vez del bloque único anterior. */
#nv-auth-modal .nv-auth-modal-body{padding:18px 18px 20px;display:block}
#nv-auth-modal .nv-auth-modal-msg{display:flex;align-items:flex-start;gap:8px}
/* PCLAU_194 · Mismo fallo que en PCLAU_191: display:flex (autor) gana siempre
   a [hidden]{display:none} (hoja por defecto del navegador), así que el
   aviso quedaba visible vacío (solo el icono) aunque tuviera el atributo
   hidden. Se fuerza aquí con mayor especificidad. */
#nv-auth-modal .nv-auth-modal-msg[hidden]{display:none}
#nv-auth-modal .nv-auth-modal-msg::before{content:"✅";flex:0 0 auto;font-size:.88rem;line-height:1.35}
#nv-auth-modal .nv-auth-modal-msg.is-bad::before{content:"⚠️"}
#nv-auth-modal .nv-auth-modal-msg.is-warn::before{content:"⏳"}

#nv-auth-modal .nv-auth-panel{display:grid;gap:0;animation:nv-auth-panel-in .18s ease}
/* PCLAU_191 · FIX crítico: [hidden] tiene la misma especificidad que
   .nv-auth-panel{display:grid} (ya existente en style.css), y una regla de
   autor SIEMPRE gana a la hoja de estilos por defecto del navegador que
   aplica [hidden]{display:none}. Resultado: los 4 formularios quedaban
   visibles a la vez, apilados, y el modal-card (max-height:90vh;
   overflow:auto) hacía scroll hasta el input enfocado del panel "activo",
   dando la sensación de "modal enorme" al cambiar de pestaña. Esta regla,
   más específica (#id + .clase + [attr]), obliga a ocultar de verdad los
   paneles no activos. */
#nv-auth-modal .nv-auth-panel[hidden]{display:none}
@keyframes nv-auth-panel-in{from{opacity:0;transform:translateY(6px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}

#nv-auth-modal .nv-auth-panel-head{display:flex;gap:12px;align-items:flex-start;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid #dcefd4}
#nv-auth-modal .nv-auth-panel-ico{flex:0 0 auto;width:42px;height:42px;display:grid;place-items:center;border-radius:14px;font-size:1.15rem;background:linear-gradient(160deg,#eafbe2,#cdeec0);border:1px solid #bfe3af}
#nv-auth-modal .nv-auth-panel-ico-forgot,#nv-auth-modal .nv-auth-panel-ico-reset{background:linear-gradient(160deg,#fff3df,#ffe1ad);border-color:#f0cd82}
#nv-auth-modal .nv-auth-panel-ico-resend{background:linear-gradient(160deg,#e3f1ff,#c3e2ff);border-color:#a9cdf0}
#nv-auth-modal .nv-auth-panel-ico-register{background:linear-gradient(160deg,#eafbe2,#b9e8a0);border-color:#8fd177}

/* PCLAU_192 · "Crear cuenta" tiene su propia transición de aparición (efecto
   "brote", con ligero rebote) en vez del fade+deslizamiento genérico del
   resto de pestañas, para reforzar que es una acción distinta (dar de alta,
   no acceder). Más específica que la regla general de arriba, así que solo
   afecta a este panel. */
#nv-auth-modal .nv-auth-panel[data-nv-auth-panel="register"]{animation:nv-auth-panel-in-register .32s cubic-bezier(.34,1.56,.64,1)}
@keyframes nv-auth-panel-in-register{
  0%{opacity:0;transform:scale(.9) translateY(10px)}
  60%{opacity:1;transform:scale(1.015) translateY(-1px)}
  100%{opacity:1;transform:scale(1) translateY(0)}
}
#nv-auth-modal .nv-auth-panel-head-text{min-width:0}
#nv-auth-modal .nv-auth-panel-head-text strong{display:block;font-size:.98rem;color:#173d1d}
#nv-auth-modal .nv-auth-panel-head-text p{margin:3px 0 0;font-size:.8rem;color:#5b6b61;line-height:1.35}
#nv-auth-modal .nv-auth-panel-step{display:inline-block;margin:2px 0 0;font-size:.66rem;font-weight:900;color:#a35c16;background:#fff1da;border:1px solid #f0cd82;padding:1px 8px;border-radius:999px}

/* Ajustes finos de los campos dentro del modal (no toca label/input global) */
#nv-auth-modal label{margin:0 0 12px}
#nv-auth-modal .nv-auth-captcha-q{display:block;margin-top:4px;font-weight:700;color:#2a4a2f;font-size:.86rem}
#nv-auth-modal .nv-pass-field{margin-top:6px}
#nv-auth-modal .nv-auth-submit{width:100%;margin-top:6px;padding:12px 16px;font-size:.94rem}

#nv-auth-modal .nv-auth-switch{margin:14px 0 0;text-align:center}
#nv-auth-modal .nv-auth-switch-links{display:flex;flex-direction:column;gap:6px}
#nv-auth-modal .nv-auth-switch a{font-weight:800;color:#1f5d28;text-decoration:none}
#nv-auth-modal .nv-auth-switch a:hover{text-decoration:underline}
#nv-auth-modal .nv-auth-footnote{margin:14px 0 0;padding-top:12px;border-top:1px solid #dcefd4;text-align:center;font-size:.85rem;color:#5b6b61}
#nv-auth-modal .nv-auth-footnote a{font-weight:900;color:#1f5d28;text-decoration:none}
#nv-auth-modal .nv-auth-footnote a:hover{text-decoration:underline}

@media (max-width:560px){
  #nv-auth-modal .nv-auth-tabs{padding:9px 10px 0;gap:4px}
  #nv-auth-modal .nv-auth-tab{min-width:70px;font-size:.68rem;padding:7px 3px}
  #nv-auth-modal .nv-auth-tab-ico{display:none}
  #nv-auth-modal .nv-auth-modal-body{padding:16px 14px 18px}
  #nv-auth-modal .nv-auth-panel-ico{width:36px;height:36px;font-size:1.02rem}
}