/* reconnect.css Estilos para overlay de reconexión / pre-carga y helpers UI pequeños. Diseñado para importarse desde base.css (o desde style.css si lo prefieres). */ /* Variables locales (usamos las del :root definidas en base.css) */ :root { --reconnect-overlay-bg: rgba(6,6,6,0.72); --reconnect-box-bg: #0f1720; --reconnect-text: #e6eef8; --reconnect-muted: #9ca3af; --reconnect-action-bg: #111827; --reconnect-action-color: #f3f4f6; --reconnect-radius: 12px; } /* Overlay principal (oculto por defecto) */ .reconnect-overlay { position: fixed; inset: 0; background: var(--reconnect-overlay-bg); display: none; /* se mostrará por JS (display:flex) */ align-items: center; justify-content: center; z-index: 9999; backdrop-filter: blur(3px); } /* Caja centrada */ .reconnect-box { width: min(560px, 92%); background: var(--reconnect-box-bg); color: var(--reconnect-text); padding: 20px; border-radius: var(--reconnect-radius); text-align: center; border: 1px solid rgba(255,255,255,0.04); box-shadow: 0 12px 40px rgba(2,6,23,0.55); } /* Spinner circular */ .reconnect-spinner { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; border: 5px solid rgba(255,255,255,0.08); border-top-color: rgba(255,255,255,0.9); animation: reconnect-spin 1s linear infinite; } @keyframes reconnect-spin { to { transform: rotate(360deg); } } /* Textos */ .reconnect-box h2 { margin: 6px 0 6px; font-size: 20px; font-weight: 600; line-height: 1.15; font-family: inherit; } .reconnect-box p { margin: 0; color: var(--reconnect-muted); font-size: 14px; } .reconnect-box small { display: block; margin-top: 10px; font-size: 12px; color: rgba(255,255,255,0.45); } /* Acciones */ .reconnect-actions { margin-top: 14px; display: flex; gap: 8px; justify-content: center; align-items: center; } .reconnect-actions button { padding: 8px 12px; border-radius: 8px; background: var(--reconnect-action-bg); color: var(--reconnect-action-color); cursor: pointer; border: none; min-width: 110px; box-shadow: 0 8px 20px rgba(2,6,23,0.3); } .reconnect-actions button:hover { opacity: 0.95; } .reconnect-actions button.secondary { background: transparent; color: var(--reconnect-muted); border: 1px solid rgba(255,255,255,0.04); } /* Info adicional (contador / intento) */ #reconnectInfo { margin-top: 8px; display: inline-block; font-size: 12px; color: rgba(255,255,255,0.5); } /* Utility: mostrar u ocultar overlay (clase alternativa) */ .reconnect-overlay.visible { display: flex !important; } /* Desactivar inputs (clase aplicada al o contenedor para UX) */ .body-reconnect-disabled #messageInput, .body-reconnect-disabled #sendBtn, .body-reconnect-disabled .emoji-toggle-btn { pointer-events: none; opacity: 0.6; } /* Responsive tweaks */ @media (max-width: 520px) { .reconnect-box { padding: 16px; } .reconnect-spinner { width: 48px; height: 48px; border-width: 4px; } .reconnect-actions button { min-width: 90px; padding: 7px 10px; } }