/* =============================================================
   ZAFIROX SPLASH CSS - v8.2.1
   Cacheado por SW → se sirve instantáneo sin FOUC
   ============================================================= */

/* ── PROGRESS BAR ─────────────────────────────────────────── */
.zfx-progress-bar {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 3px;
  z-index: 1000000;
  background: rgba(0,0,0,.06);
  overflow: hidden;
}
.zfx-progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg,#4145b3,#6366f1,#8b5cf6);
  border-radius: 0 2px 2px 0;
  transition: width .6s cubic-bezier(.4,0,.2,1);
  position: relative;
}
.zfx-progress-fill::after {
  content:'';
  position: absolute; top:0; right:0;
  width:80px; height:100%;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.4));
  animation: zfxShimmerBar 1.5s ease-in-out infinite;
}
@keyframes zfxShimmerBar {
  0%   { opacity:0; transform:translateX(-100%); }
  50%  { opacity:1; }
  100% { opacity:0; transform:translateX(100%); }
}
.zfx-progress-bar.zfx-indeterminate .zfx-progress-fill {
  width:30% !important;
  animation: zfxIndeterminate 1.8s ease-in-out infinite;
}
@keyframes zfxIndeterminate {
  0%   { transform:translateX(-100%); }
  100% { transform:translateX(400%); }
}

/* ── LOADING OVERLAY ──────────────────────────────────────── */
.zafirox-loading-overlay {
  position: fixed; top:0; left:0;
  width:100vw; height:100vh;
  background: linear-gradient(160deg,#ffffff 0%,#f5f3ff 40%,#eff1f3 100%);
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  z-index: 999999;
  font-family: 'Inter','Roboto',-apple-system,BlinkMacSystemFont,sans-serif;
  user-select: none;
  opacity:1; visibility:visible;
  transition: opacity .6s cubic-bezier(.4,0,.2,1),
              visibility .6s cubic-bezier(.4,0,.2,1),
              transform .6s cubic-bezier(.4,0,.2,1);
  will-change: opacity, visibility, transform;
}
.zafirox-loading-overlay.zafirox-initially-hidden {
  opacity:0; visibility:hidden; transform:scale(1.03);
  transition:none;
}
.zafirox-loading-overlay.zafirox-show-loader {
  opacity:1; visibility:visible; transform:scale(1);
  transition: opacity .4s cubic-bezier(.4,0,.2,1),
              transform .4s cubic-bezier(.4,0,.2,1);
}
.zafirox-loading-overlay.zafirox-fade-out {
  opacity:0; visibility:hidden; transform:scale(.97);
  transition: opacity .5s cubic-bezier(.4,0,.2,1),
              visibility .5s cubic-bezier(.4,0,.2,1),
              transform .5s cubic-bezier(.4,0,.2,1);
}

/* ── CONNECTION BADGE ─────────────────────────────────────── */
.zfx-conn-badge {
  position:absolute; top:1.5rem; left:1.5rem;
  display:flex; align-items:center; gap:.5rem;
  padding:6px 14px; border-radius:20px;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(0,0,0,.06);
  font-size:.75rem; font-weight:500; color:#6b7280;
  opacity:0; transform:translateY(-8px);
  animation:zfxBadgeIn .5s ease-out .8s forwards;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  transition:background .3s, border-color .3s, color .3s;
}
.zfx-conn-badge[data-state="online"]  { color:#059669; border-color:rgba(5,150,105,.15); }
.zfx-conn-badge[data-state="slow"]    { color:#d97706; border-color:rgba(217,119,6,.15); }
.zfx-conn-badge[data-state="offline"] { color:#dc2626; border-color:rgba(220,38,38,.15); background:rgba(254,242,242,.9); }
.zfx-conn-dot {
  width:7px; height:7px; border-radius:50%;
  background:#10b981; flex-shrink:0;
  animation:zfxDotPulse 2s ease-in-out infinite;
}
.zfx-conn-badge[data-state="online"]  .zfx-conn-dot { background:#10b981; }
.zfx-conn-badge[data-state="slow"]    .zfx-conn-dot { background:#f59e0b; }
.zfx-conn-badge[data-state="offline"] .zfx-conn-dot { background:#ef4444; animation:none; }
@keyframes zfxBadgeIn { to { opacity:1; transform:translateY(0); } }
@keyframes zfxDotPulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%     { opacity:.5; transform:scale(.8); }
}

/* ── SPLASH CONTENT ───────────────────────────────────────── */
.zfx-splash-content {
  display:flex; flex-direction:column; align-items:center;
  gap:0; max-width:380px; width:90%;
}
.zafirox-logo {
  width:200px; height:auto; max-width:70vw;
  margin-bottom:2rem;
  animation:zfxLogoIn 1s cubic-bezier(.22,1,.36,1);
  filter:drop-shadow(0 12px 32px rgba(65,69,179,.08));
  will-change:transform;
  image-rendering:-webkit-optimize-contrast;
  image-rendering:crisp-edges;
}
@keyframes zfxLogoIn {
  0%   { transform:scale(.7) translateY(20px); opacity:0; filter:blur(8px); }
  100% { transform:scale(1)  translateY(0);    opacity:1; filter:blur(0); }
}
.zfx-status-text {
  font-size:.9rem; color:#6b7280; text-align:center;
  min-height:1.4em; opacity:0;
  animation:zfxFadeUp .5s ease-out .6s forwards;
  transition:opacity .3s, transform .3s;
  font-weight:400; letter-spacing:-.01em;
}
.zfx-status-text.zfx-text-swap { opacity:0; transform:translateY(6px); }
@keyframes zfxFadeUp {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}
.zfx-spinner {
  margin-top:1.5rem;
  width:32px; height:32px;
  border:2.5px solid rgba(65,69,179,.12);
  border-top-color:#4145b3;
  border-radius:50%;
  animation:zfxSpin .8s linear infinite, zfxFadeUp .4s ease-out 1s backwards;
}
@keyframes zfxSpin { to { transform:rotate(360deg); } }

/* ── SKELETON ─────────────────────────────────────────────── */
.zfx-skeleton-group {
  margin-top:2.5rem; width:100%;
  display:flex; flex-direction:column; gap:10px;
  opacity:0; animation:zfxFadeUp .5s ease-out 1.2s forwards;
}
.zfx-skeleton {
  height:10px; border-radius:5px;
  background:linear-gradient(90deg,#e5e7eb 0%,#f3f4f6 40%,#e5e7eb 80%);
  background-size:200% 100%;
  animation:zfxShimmer 1.8s ease-in-out infinite;
}
.zfx-skeleton:nth-child(1) { width:100%; }
.zfx-skeleton:nth-child(2) { width:80%; }
.zfx-skeleton:nth-child(3) { width:60%; }
@keyframes zfxShimmer {
  0%   { background-position:200% 0; }
  100% { background-position:-200% 0; }
}

/* ── OFFLINE / TIMEOUT PANELS ─────────────────────────────── */
.zfx-offline-panel,.zfx-timeout-panel {
  display:none; flex-direction:column; align-items:center;
  gap:1rem; text-align:center;
  animation:zfxFadeUp .5s ease-out;
}
.zfx-offline-panel.zfx-visible,.zfx-timeout-panel.zfx-visible { display:flex; }
.zfx-timeout-icon  { width:100px; height:100px; opacity:.85; }
.zfx-timeout-title { font-size:1.15rem; font-weight:600; color:#1f2937; margin:0; letter-spacing:-.02em; }
.zfx-timeout-desc  { font-size:.82rem; color:#6b7280; margin:0; line-height:1.6; max-width:340px; }
.zfx-timeout-actions { display:flex; gap:.75rem; margin-top:.5rem; flex-wrap:wrap; justify-content:center; }
.zfx-retry-alt-btn {
  padding:10px 24px; border:1.5px solid #d1d5db; border-radius:24px;
  background:transparent; color:#4b5563; font-size:.82rem; font-weight:500;
  cursor:pointer; transition:all .2s ease; font-family:inherit;
}
.zfx-retry-alt-btn:hover { border-color:#9ca3af; background:rgba(0,0,0,.03); }
.zfx-offline-icon  { width:120px; height:120px; opacity:.7; }
.zfx-offline-title { font-size:1.2rem; font-weight:600; color:#1f2937; margin:0; letter-spacing:-.02em; }
.zfx-offline-desc  { font-size:.85rem; color:#9ca3af; margin:0; line-height:1.5; max-width:300px; }

/* ── BOTÓN RETRY ──────────────────────────────────────────── */
.zfx-retry-btn {
  margin-top:.5rem; padding:10px 28px;
  border:none; border-radius:24px;
  background:linear-gradient(135deg,#4145b3,#6366f1);
  color:#fff; font-size:.85rem; font-weight:600;
  cursor:pointer; pointer-events:auto; letter-spacing:.01em;
  transition:transform .2s, box-shadow .2s, opacity .2s;
  box-shadow:0 4px 14px rgba(65,69,179,.3);
  position:relative; overflow:hidden;
}
.zfx-retry-btn:hover  { transform:translateY(-1px) scale(1.03); box-shadow:0 6px 20px rgba(65,69,179,.4); }
.zfx-retry-btn:active { transform:scale(.97); box-shadow:0 2px 8px rgba(65,69,179,.3); }
.zfx-retry-btn.zfx-retrying { pointer-events:none; opacity:.7; }
.zfx-retry-btn::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
  transform:translateX(-100%);
}
.zfx-retry-btn:hover::after { animation:zfxBtnShine .6s ease-out; }
@keyframes zfxBtnShine { to { transform:translateX(100%); } }

/* ── SLOW HINT ────────────────────────────────────────────── */
.zfx-slow-hint {
  display:none; margin-top:1rem; padding:10px 16px;
  border-radius:10px; background:rgba(251,191,36,.08);
  border:1px solid rgba(251,191,36,.2);
  font-size:.78rem; color:#92400e;
  text-align:center; line-height:1.5;
  animation:zfxFadeUp .4s ease-out;
}
.zfx-slow-hint.zfx-visible { display:block; }

/* ── VERSION TAG ──────────────────────────────────────────── */
.zfx-version {
  position:absolute; bottom:1.2rem; right:1.5rem;
  font-size:.65rem; color:#d1d5db; font-weight:500;
  letter-spacing:.04em; opacity:0;
  animation:zfxFadeUp .5s ease-out 1.5s forwards;
}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width:768px) {
  .zafirox-logo  { width:160px; margin-bottom:1.5rem; }
  .zfx-conn-badge { top:1rem; left:1rem; font-size:.7rem; padding:5px 12px; }
  .zfx-offline-icon { width:100px; height:100px; }
  .zfx-version { bottom:.8rem; right:1rem; }
}
@media (max-width:480px) {
  .zafirox-logo     { width:140px; margin-bottom:1rem; }
  .zfx-status-text  { font-size:.82rem; }
  .zfx-skeleton-group { margin-top:2rem; }
  .zfx-offline-icon { width:80px; height:80px; }
  .zfx-offline-title { font-size:1.05rem; }
}
@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi) {
  .zafirox-logo { image-rendering:-webkit-optimize-contrast; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}
@media print {
  .zafirox-loading-overlay,.zfx-progress-bar { display:none !important; }
}