/* ============================================================
   STARSEED · VISOR HD — visor.css
   Lightbox de archivos del Drive (imágenes HD, PDF, Docs, vídeo).
   Estética: cristal líquido + filo art-déco dorado + neón suave.
   Autocontenido: SOLO clases .vsr-*; usa tokens de tokens.css
   con fallback seguro (funciona incluso sin tokens.css).
   ============================================================ */

/* ---------------- Overlay ---------------- */
.vsr-overlay{
  position:fixed; inset:0; z-index:1400;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(10px,3vw,36px);
  font-family:var(--sans,'Space Grotesk',system-ui,sans-serif);
}
.vsr-overlay[hidden]{display:none}

.vsr-backdrop{
  position:absolute; inset:0; cursor:pointer;
  background:
    radial-gradient(110% 80% at 50% 0%, rgba(159,232,112,.06), transparent 55%),
    radial-gradient(90% 70% at 80% 100%, rgba(201,168,255,.07), transparent 60%),
    rgba(6,10,6,.74);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
  backdrop-filter:blur(16px) saturate(1.15);
  opacity:0;
  transition:opacity .35s var(--ease-glide,cubic-bezier(.16,1,.3,1));
}
[data-theme="light"] .vsr-backdrop{
  background:
    radial-gradient(110% 80% at 50% 0%, rgba(63,122,42,.07), transparent 55%),
    rgba(44,33,19,.48);
}
.vsr-overlay.vsr-on .vsr-backdrop{opacity:1}

/* ---------------- Panel (cristal + doble filo dorado art-déco) ---------------- */
.vsr-panel{
  position:relative; z-index:1;
  display:flex; flex-direction:column;
  width:min(92vw,1180px); max-width:92vw; max-height:90vh;
  background:var(--glass-strong,rgba(20,30,20,.85));
  border:1px solid var(--stroke,rgba(159,232,112,.22));
  border-radius:var(--r-card,22px);
  box-shadow:
    0 34px 90px rgba(0,0,0,.55),
    0 0 0 1px rgba(233,196,106,.10),
    0 0 44px rgba(159,232,112,.07),
    inset 0 1px 0 rgba(255,255,255,.09);
  -webkit-backdrop-filter:blur(22px) saturate(1.2);
  backdrop-filter:blur(22px) saturate(1.2);
  overflow:hidden;
  opacity:0; transform:scale(.94) translateY(14px); filter:blur(9px);
  transition:
    opacity .35s var(--ease-glide,cubic-bezier(.16,1,.3,1)),
    transform .35s var(--ease-organic,cubic-bezier(.22,1,.36,1)),
    filter .35s var(--ease-glide,cubic-bezier(.16,1,.3,1));
}
.vsr-overlay.vsr-on .vsr-panel{opacity:1; transform:scale(1) translateY(0); filter:blur(0)}

/* segundo filo dorado interior (marco doble) */
.vsr-panel::before{
  content:""; position:absolute; inset:5px; z-index:7; pointer-events:none;
  border:1px solid rgba(233,196,106,.20);
  border:1px solid color-mix(in srgb, var(--oro,#E9C46A) 24%, transparent);
  border-radius:calc(var(--r-card,22px) - 4px);
}
/* línea prismática superior (cristal líquido) */
.vsr-panel::after{
  content:""; position:absolute; top:0; left:8%; right:8%; height:1px; z-index:7;
  background:linear-gradient(90deg,transparent,var(--neon-cyan,#6FE6D6),var(--neon-lav,#C9A8FF),var(--oro,#E9C46A),transparent);
  opacity:.55; pointer-events:none;
}

/* esquinas doradas art-déco */
.vsr-corner{position:absolute; z-index:8; width:16px; height:16px; pointer-events:none; opacity:.9}
.vsr-c-tl{top:9px; left:9px;  border-top:2px solid var(--oro,#E9C46A);    border-left:2px solid var(--oro,#E9C46A);  border-top-left-radius:10px}
.vsr-c-tr{top:9px; right:9px; border-top:2px solid var(--oro,#E9C46A);    border-right:2px solid var(--oro,#E9C46A); border-top-right-radius:10px}
.vsr-c-bl{bottom:9px; left:9px;  border-bottom:2px solid var(--oro,#E9C46A); border-left:2px solid var(--oro,#E9C46A);  border-bottom-left-radius:10px}
.vsr-c-br{bottom:9px; right:9px; border-bottom:2px solid var(--oro,#E9C46A); border-right:2px solid var(--oro,#E9C46A); border-bottom-right-radius:10px}

/* ---------------- Cabecera ---------------- */
.vsr-head{
  display:flex; align-items:flex-start; gap:14px;
  padding:15px 20px 12px;
  border-bottom:1px solid var(--stroke-soft,rgba(255,255,255,.08));
  background:linear-gradient(180deg,rgba(255,255,255,.045),transparent);
}
.vsr-headtxt{flex:1; min-width:0}
.vsr-title{
  margin:0; display:flex; align-items:baseline; gap:9px;
  font-family:var(--serif,'Fraunces',Georgia,serif);
  font-size:clamp(17px,2.3vw,22px); font-weight:600; line-height:1.2;
  color:var(--ink,#eef3e6); letter-spacing:.01em;
}
.vsr-star{flex:none; color:var(--oro,#E9C46A); font-size:.8em; text-shadow:0 0 14px rgba(233,196,106,.65)}
.vsr-title-txt{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.vsr-desc{
  margin:4px 0 0; font-size:13px; line-height:1.45;
  color:var(--ink-soft,#aeb9a4);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.vsr-desc[hidden]{display:none}
.vsr-chip{
  flex:none; margin-top:3px; white-space:nowrap;
  font-family:var(--mono,'Space Mono',monospace);
  font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ambar,#F6A21E);
  background:rgba(246,162,30,.10);
  border:1px solid rgba(246,162,30,.32);
  padding:5px 12px; border-radius:999px;
}
.vsr-x{
  flex:none; width:34px; height:34px; margin-top:1px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; cursor:pointer;
  background:var(--glass,rgba(28,40,28,.5));
  border:1px solid var(--stroke,rgba(159,232,112,.22));
  color:var(--ink-soft,#aeb9a4); font-size:14px; line-height:1; padding:0;
  transition:transform .25s var(--ease-organic,cubic-bezier(.22,1,.36,1)), color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.vsr-x:hover{color:var(--ink,#eef3e6); border-color:rgba(233,196,106,.55); transform:rotate(90deg); box-shadow:0 0 16px rgba(233,196,106,.25)}
.vsr-x:focus-visible{outline:2px solid var(--neon-lav,#C9A8FF); outline-offset:2px}

/* ---------------- Cuerpo ---------------- */
.vsr-body{
  position:relative; display:flex; flex-direction:column;
  min-height:200px; overflow:hidden;
  background:rgba(0,0,0,.22);
}
.vsr-stage{display:flex; min-height:0}

/* loader: barra shimmer iridiscente */
.vsr-loader{
  position:absolute; inset:0; z-index:6;
  display:flex; flex-direction:column; gap:13px;
  align-items:center; justify-content:center;
  pointer-events:none;
}
.vsr-loader[hidden]{display:none}
.vsr-shimmer{
  width:min(46%,280px); height:3px; border-radius:999px;
  background:linear-gradient(90deg,transparent,var(--neon-lime,#9FE870) 35%,var(--neon-cyan,#6FE6D6) 50%,var(--neon-lav,#C9A8FF) 65%,transparent);
  background-size:220% 100%;
  animation:vsr-shimmer 1.3s linear infinite;
}
@keyframes vsr-shimmer{
  from{background-position:200% 0}
  to{background-position:-120% 0}
}
.vsr-loadtxt{font-family:var(--mono,'Space Mono',monospace); font-size:11.5px; letter-spacing:.07em; color:var(--ink-mute,#7e8a74)}
/* modo discreto: píldora en la esquina mientras la miniatura local ya se ve */
.vsr-loader.vsr-mini{
  inset:auto; right:16px; bottom:16px;
  flex-direction:row; gap:9px; padding:7px 13px;
  background:var(--glass-strong,rgba(20,30,20,.85));
  border:1px solid var(--stroke,rgba(159,232,112,.22));
  border-radius:999px;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.vsr-loader.vsr-mini .vsr-shimmer{width:34px; height:2px}

/* nota: HD no disponible */
.vsr-note{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%); z-index:6;
  margin:0; padding:7px 14px; border-radius:999px; white-space:nowrap;
  font-family:var(--mono,'Space Mono',monospace); font-size:11.5px;
  color:var(--ambar,#F6A21E);
  background:rgba(20,16,8,.78);
  border:1px solid rgba(246,162,30,.4);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.vsr-note[hidden]{display:none}

/* ---------------- Imagen HD (crossfade local → HD, zoom 1:1) ---------------- */
.vsr-imgwrap{
  position:relative; flex:1;
  height:min(76vh, calc(90vh - 170px));
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; cursor:zoom-in;
}
.vsr-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; padding:16px; box-sizing:border-box;
}
.vsr-img-local{filter:saturate(.96)}
.vsr-img-hd{
  opacity:0;
  transition:opacity .5s var(--ease-glide,cubic-bezier(.16,1,.3,1));
}
.vsr-imgwrap.vsr-ready .vsr-img-hd{opacity:1}
.vsr-imgwrap.vsr-broken::before{
  content:"✦"; font-size:40px; line-height:1;
  color:var(--ink-mute,#7e8a74); opacity:.55;
}
/* zoom 1:1: tamaño natural + paneo con scroll */
.vsr-imgwrap.vsr-zoom{display:block; overflow:auto; cursor:zoom-out; text-align:center}
.vsr-imgwrap.vsr-zoom .vsr-img{
  position:static; width:auto; height:auto;
  max-width:none; max-height:none; padding:0;
  margin:0 auto; display:inline-block;
}
.vsr-imgwrap.vsr-zoom.vsr-ready .vsr-img-local{display:none}

/* ---------------- Iframe (PDF · Doc · vídeo) ---------------- */
.vsr-frame{
  display:block; width:100%; border:0;
  background:rgba(0,0,0,.25);
  height:74vh;                 /* fallback */
  height:min(78vh, 860px);
}
.vsr-kind-doc .vsr-stage{display:block; overflow:auto}
.vsr-kind-doc .vsr-frame{max-width:940px; margin:0 auto}
@supports (aspect-ratio: 16/9){
  .vsr-kind-video .vsr-frame{height:auto; aspect-ratio:16/9; max-height:78vh}
}

/* ---------------- Pie: botones píldora (cristal) ---------------- */
.vsr-foot{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:13px 18px;
  border-top:1px solid var(--stroke-soft,rgba(255,255,255,.08));
  background:linear-gradient(0deg,rgba(255,255,255,.035),transparent);
}
.vsr-foot::before{
  content:"✦ ✦ ✦"; margin-right:auto;
  color:rgba(233,196,106,.4); font-size:10px; letter-spacing:8px;
}
.vsr-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 18px; border-radius:var(--r-pill,999px);
  font-family:var(--sans,'Space Grotesk',system-ui,sans-serif);
  font-size:13.5px; font-weight:700; letter-spacing:.01em;
  color:var(--ink,#eef3e6); text-decoration:none; cursor:pointer;
  background:var(--glass,rgba(28,40,28,.5));
  border:1px solid var(--stroke,rgba(159,232,112,.22));
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:transform .22s var(--ease-organic,cubic-bezier(.22,1,.36,1)), border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.vsr-btn:hover{transform:translateY(-2px); border-color:rgba(233,196,106,.5); box-shadow:0 10px 26px rgba(0,0,0,.35)}
.vsr-btn:active{transform:translateY(0) scale(.98)}
.vsr-btn:focus-visible{outline:2px solid var(--neon-lav,#C9A8FF); outline-offset:2px}
.vsr-btn[hidden]{display:none}
.vsr-drive{color:var(--oro,#E9C46A); border-color:rgba(233,196,106,.42)}
.vsr-drive:hover{box-shadow:0 10px 26px rgba(0,0,0,.35), 0 0 18px rgba(233,196,106,.22)}
.vsr-down{color:var(--neon-lime,#9FE870)}
.vsr-arrow{font-size:.9em; opacity:.85}

/* ---------------- Responsive ---------------- */
@media (max-width:640px){
  /* centrado REAL en móvil: dvh (alto visible de verdad) + margen simétrico */
  .vsr-overlay{padding:10px; align-items:center; justify-content:center}
  .vsr-panel{
    width:calc(100vw - 20px); max-width:calc(100vw - 20px);
    max-height:94vh; max-height:calc(100dvh - 20px);
    margin:auto;
  }
  .vsr-chip{display:none}
  .vsr-head{padding:13px 14px 10px}
  .vsr-foot{padding:11px 12px; justify-content:center}
  .vsr-foot::before{display:none}
  .vsr-btn{padding:8px 14px; font-size:12.5px}
  .vsr-imgwrap{height:min(68vh, calc(100dvh - 170px))}
  .vsr-frame{height:min(70vh, calc(100dvh - 175px))}
}

/* ---------------- Movimiento reducido ---------------- */
@media (prefers-reduced-motion: reduce){
  .vsr-backdrop, .vsr-panel, .vsr-img-hd, .vsr-btn, .vsr-x{transition:none}
  .vsr-shimmer{animation:none}
  .vsr-panel{transform:none; filter:none}
}