body {
font-family: 'Inter', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #f1f5f9;
}
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
vertical-align: middle;
}
.login-card-shadow {
box-shadow: 0px 4px 12px rgba(15, 23, 42, 0.08);
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(40px); }
to   { opacity: 1; transform: none; }
}
@keyframes scaleIn {
from { opacity: 0; transform: scale(0.95); }
to   { opacity: 1; transform: none; }
}
.anim-fade-up { animation: fadeInUp 0.8s cubic-bezier(0.16,1,0.3,1) backwards; }
.anim-scale   { animation: scaleIn 0.5s cubic-bezier(0.34,1.56,0.64,1) backwards; }
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.nv-input { transition: all 0.2s ease; }
.nv-input:focus {
outline: none;
border-color: #1f5fbf;
box-shadow: 0 0 0 4px rgba(31, 95, 191, 0.1);
}
.nv-input.error { border-color: #dc2626; }
.nv-input.error:focus { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1); }
.error-msg {
opacity: 0;
max-height: 0;
overflow: hidden;
transition: all 0.25s ease;
}
.error-msg.show {
opacity: 1;
max-height: 30px;
margin-top: 4px;
}
/* El atributo hidden siempre oculta (las clases .flex/.grid de Tailwind lo pisaban) */
[hidden] { display: none !important; }
/* Las animaciones de entrada usan fill "backwards": al terminar no dejan transform en la tarjeta
   (un transform fijo la volvía contenedor de los position:fixed, p. ej. la barra de botones del registro en el celular). */
@media (prefers-reduced-motion: reduce) {
  .anim-fade-up, .anim-scale { animation: none; opacity: 1; }
}
/* Contraseña: botón mostrar/ocultar (40px) y requisitos en vivo */
.pw-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 10px; color: #64748b; }
.pw-eye:hover { color: #0f172a; background: #f1f5f9; }
.pw-rules { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.pw-rules li { font-size: 11.5px; font-weight: 600; color: #64748b; background: #f1f5f9; padding: 3px 9px; border-radius: 999px; transition: .15s; }
.pw-rules li.ok { color: #15803d; background: #dcfce7; }
.pw-rules li.ok::before { content: '✓ '; }