/* STREAMING_CHUNK:Definiendo variables y resets... */:root {--color-primary: #3b82f6;--color-primary-hover: #2563eb;--color-bg-main: #0f172a;--color-bg-surface: #1e293b;--color-text-main: #f8fafc;--color-text-muted: #94a3b8;--color-border: #334155;--font-family: 'Inter', sans-serif;--radius-lg: 1rem;--radius-md: 0.5rem;}{ box-sizing: border-box; margin: 0; padding: 0; }body {font-family: var(--font-family);background-color: var(--color-bg-main);color: var(--color-text-main);min-height: 100vh;display: flex;align-items: center;justify-content: center;}/* STREAMING_CHUNK:Configurando contenedores y paneles... */.auth-wrapper {display: flex;width: 100%;min-height: 100vh;background-color: var(--color-bg-main);overflow: hidden;}.brand-panel {display: none; /* Oculto en móvil por defecto */flex: 1.2;background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);padding: 4rem;flex-direction: column;justify-content: center;align-items: center;text-align: center;border-right: 1px solid var(--color-border);position: relative;}.brand-panel::before {content: '';position: absolute;top: 0; left: 0; right: 0; bottom: 0;background: radial-gradient(circle at top left, rgba(59, 130, 246, 0.1), transparent 40%);pointer-events: none;}/* STREAMING_CHUNK:Estilizando branding interno... */.brand-logo-container {margin-bottom: 2.5rem;background: rgba(255, 255, 255, 0.03);padding: 1.5rem 2.5rem;border-radius: var(--radius-lg);border: 1px solid rgba(255, 255, 255, 0.05);}.brand-logo-container img {max-width: 220px;height: auto;filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));}.brand-title {font-size: 2.2rem;font-weight: 700;margin-bottom: 1rem;letter-spacing: -0.5px;display: flex;align-items: center;gap: 0.75rem;}.brand-subtitle {color: var(--color-text-muted);font-size: 1.1rem;max-width: 400px;line-height: 1.6;}/* STREAMING_CHUNK:Configurando el panel del formulario... */.form-panel {flex: 1;display: flex;flex-direction: column;justify-content: center;padding: 2rem;background-color: var(--color-bg-main);}.form-container {width: 100%;max-width: 420px;margin: 0 auto;background: var(--color-bg-surface);padding: 3rem 2.5rem;border-radius: var(--radius-lg);box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.3);border: 1px solid var(--color-border);}.mobile-header {display: block;text-align: center;margin-bottom: 2rem;}.mobile-header img {max-width: 160px;margin-bottom: 1.5rem;}.mobile-header h2 { font-size: 1.5rem; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }.mobile-header p { color: var(--color-text-muted); font-size: 0.9rem; margin-top: 0.5rem; }/* STREAMING_CHUNK:Elementos interactivos del formulario... */.form-group { margin-bottom: 1.5rem; }.form-group label {display: block;margin-bottom: 0.5rem;font-size: 0.85rem;font-weight: 500;color: #cbd5e1;}.input-wrapper { position: relative; }.input-wrapper i {position: absolute;left: 1rem;top: 50%;transform: translateY(-50%);color: var(--color-text-muted);}.form-group input {width: 100%;padding: 0.85rem 1rem 0.85rem 2.75rem;border-radius: var(--radius-md);border: 1px solid var(--color-border);background-color: #0b1120;color: var(--color-text-main);font-size: 1rem;font-family: var(--font-family);transition: all 0.2s ease;}.form-group input:focus {outline: none;border-color: var(--color-primary);box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);}/* STREAMING_CHUNK:Botón de submit y alertas... */.btn-submit {width: 100%;padding: 0.85rem;background-color: var(--color-primary);color: white;border: none;border-radius: var(--radius-md);font-size: 1rem;font-weight: 600;cursor: pointer;transition: background-color 0.2s ease, transform 0.1s ease;display: flex;justify-content: center;align-items: center;gap: 0.5rem;margin-top: 1rem;}.btn-submit:hover { background-color: var(--color-primary-hover); }.btn-submit:active { transform: scale(0.98); }.error-box {background-color: rgba(239, 68, 68, 0.1);color: #fca5a5;padding: 1rem;border-radius: var(--radius-md);margin-bottom: 1.5rem;font-size: 0.9rem;border: 1px solid rgba(239, 68, 68, 0.2);display: flex;align-items: center;gap: 0.75rem;}/* STREAMING_CHUNK:Animaciones y Responsive... */@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }@keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }.anim-up { animation: fadeInUp 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) forwards; opacity: 0; }.anim-down { animation: fadeInDown 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) forwards; opacity: 0; }.delay-1 { animation-delay: 0.1s; }.delay-2 { animation-delay: 0.2s; }.delay-3 { animation-delay: 0.3s; }@media (min-width: 992px) {.brand-panel { display: flex; }.mobile-header { display: none; }.form-container {border: none;box-shadow: none;background: transparent;padding: 0;}}/* CSS Document */