/* ============================================================================ AUTH STYLES - Portal Estudiantil FUP ============================================================================ Estilos compartidos para las páginas de autenticación. ============================================================================ */ /* Evita scroll a nivel de documento en páginas de autenticación. Extensiones del navegador inyectan elementos en que generan espacio en blanco debajo del layout. Con esto el body queda fijo al viewport y el scroll ocurre solo dentro de cada panel (overflow-y-auto). */ html, body { height: 100%; overflow: hidden; } /* Estilos del fondo de imagen del campus */ .bg-campus { background-size: cover; background-position: left center; background-repeat: no-repeat; min-height: 100%; } .bg-campus-login { background-image: url('/images/fondos/fondo sires (1).webp'); } .bg-campus-2fa { background-image: url('/images/fondos/fondo sires (2).webp'); } .bg-campus-email { background-image: url('/images/fondos/fondo sires (3).webp'); } /* ========== LOADING OVERLAY STYLES ========== */ .loading-overlay { position: fixed; inset: 0; background: rgba(255, 255, 255, 0.97); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 9999; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .loading-overlay.active { opacity: 1; visibility: visible; } /* Spinner principal */ .loading-spinner { width: 56px; height: 56px; position: relative; } .loading-spinner::before, .loading-spinner::after { content: ''; position: absolute; border-radius: 50%; } .loading-spinner::before { inset: 0; border: 3px solid #e5e7eb; } .loading-spinner::after { inset: 0; border: 3px solid transparent; border-top-color: #005790; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Progreso de pasos */ .loading-steps { display: flex; align-items: center; gap: 8px; margin-top: 32px; } .step-indicator { display: flex; align-items: center; gap: 8px; } .step-dot { width: 10px; height: 10px; border-radius: 50%; background: #e5e7eb; transition: all 0.3s ease; } .step-dot.active { background: #005790; box-shadow: 0 0 0 4px rgba(0, 87, 144, 0.2); } .step-dot.completed { background: #10b981; } .step-line { width: 40px; height: 2px; background: #e5e7eb; transition: background 0.3s ease; } .step-line.active { background: #1c63af; } /* Texto de estado */ .loading-text { margin-top: 24px; text-align: center; } .loading-title { font-size: 1.125rem; font-weight: 600; color: #111827; margin-bottom: 4px; } .loading-subtitle { font-size: 0.875rem; color: #6b7280; } /* Pulse animation para el logo */ .logo-pulse { animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(0.98); } } /* ========== 2FA DIGIT BOX STYLES ========== */ .digit-box { width: 48px; height: 56px; text-align: center; font-size: 1.5rem; font-weight: 700; border: 2px solid #e5e7eb; border-radius: 12px; background: #f9fafb; transition: all 0.2s; } .digit-box:focus { outline: none; border-color: #005790; background: white; box-shadow: 0 0 0 3px rgba(0, 87, 144, 0.1); } .digit-box.filled { border-color: #005790; background: white; } .digit-box.error { border-color: #ef4444; background: #fef2f2; }