/* visor.css — visor de webs (computadora / tablet / teléfono), heredado del portafolio con la piel de Sitio Élite. */
.chip-btn{height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--glass-border);background:var(--glass-fill);display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;transition:.25s;color:#fff}
.chip-btn:hover{border-color:var(--glass-border-strong);filter:brightness(1.2)}
.icon-btn{width:40px;padding:0;justify-content:center}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags span{font-size:12px;padding:6px 12px;border-radius:999px;border:1px solid var(--glass-border);background:var(--glass-fill);color:var(--gray-300);white-space:nowrap}
.kicker{font:500 11px/1.4 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px;display:flex;flex-wrap:wrap;gap:4px 10px}
.kicker b{font-weight:500;color:var(--elite-cyan-300)}
.acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.act{position:relative;height:42px;padding:0 18px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;border:1px solid var(--glass-border);background:var(--glass-fill-strong);color:#fff;transition:.25s}
.act.primary{background:#fff;color:var(--ink-0);border-color:#fff}
.act:hover{transform:translateY(-2px)}
.act.primary:hover{color:var(--ink-0);box-shadow:0 0 28px rgba(0,153,255,.45)}
.act[aria-disabled="true"],.is-off-btn{opacity:.6;cursor:default;transform:none!important}
.pend{color:#ffb347;font-weight:500}
.seg{position:relative;display:flex;background:rgba(255,255,255,.04);border-radius:999px;padding:4px;border:1px solid var(--glass-border)}
.seg button{position:relative;z-index:1;height:36px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:500;color:var(--gray-300);display:flex;align-items:center;gap:7px;transition:color var(--dur-fast)}
.seg button[aria-pressed="true"]{color:var(--ink-0)}
.seg .pill{position:absolute;z-index:0;top:4px;bottom:4px;left:0;width:0;border-radius:999px;background:#fff;transition:transform var(--dur-base) var(--ease-out),width var(--dur-base)}
.viewer{position:fixed;inset:0;z-index:100;background:var(--bg);display:flex;flex-direction:column;
  clip-path:circle(0 at var(--cx,50%) var(--cy,50%));visibility:hidden;transition:clip-path .75s var(--ease-in-out),visibility 0s .75s}
.viewer.open{clip-path:circle(150% at var(--cx,50%) var(--cy,50%));visibility:visible;transition:clip-path .75s var(--ease-in-out)}
.vbar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.vtitle{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.vtitle .dot{width:12px;height:12px;border-radius:50%;background:var(--tint,var(--accent));flex-shrink:0}
.vtitle strong{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vtitle small{color:var(--muted);font-size:13px;white-space:nowrap}
.vpages{display:flex;gap:6px}
.vpages button{height:32px;padding:0 12px;border-radius:99px;border:1px solid var(--line);font-size:13px}
.vpages button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}
.vbody{flex:1;display:flex;min-height:0;position:relative}
.vcanvas{flex:1;position:relative;overflow:hidden;background:radial-gradient(60% 70% at 50% 40%,color-mix(in srgb,var(--tint,var(--accent)) 14%,var(--bg-2)),var(--bg-2))}
.vdevice{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--s,1));transition:transform .6s var(--ease-out)}
.vdevice.swap{animation:devSwap .6s var(--ease-out)}
@keyframes devSwap{from{opacity:0;transform:translate(-50%,-46%) scale(calc(var(--s,1) * .96))}}
.vscreen{position:relative;overflow:hidden;background:#0d0d0f;box-sizing:content-box}
.vscreen iframe{display:block;border:0;width:100%;height:100%;background:#0d0d0f}
/* computadora */
.vdevice.desk .vscreen{width:1440px;height:900px;border:18px solid #111114;border-bottom-width:26px;border-radius:22px 22px 6px 6px;box-shadow:0 60px 120px -50px rgba(0,0,0,.9)}
.vdevice.desk .vstand{display:block;width:300px;height:110px;margin:0 auto;background:linear-gradient(#2a2a30,#17171b);clip-path:polygon(32% 0,68% 0,78% 88%,100% 88%,100% 100%,0 100%,0 88%,22% 88%)}
/* tablet */
.vdevice.tablet .vscreen{width:820px;height:1180px;border:22px solid #111114;border-radius:44px;box-shadow:0 60px 120px -50px rgba(0,0,0,.9)}
/* teléfono */
.vdevice.movil .vscreen{width:390px;height:844px;border:14px solid #0d0d0f;border-radius:58px;box-shadow:0 60px 120px -50px rgba(0,0,0,.9)}
.vdevice.movil .vscreen::before{content:"";position:absolute;z-index:3;left:50%;top:10px;width:110px;height:30px;margin-left:-55px;border-radius:20px;background:#0d0d0f;pointer-events:none}
.vdevice:not(.desk) .vstand{display:none}
.vhint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);font-size:12px;color:var(--muted);background:var(--bg);border:1px solid var(--line);padding:6px 12px;border-radius:99px;pointer-events:none;white-space:nowrap}
.vloader{position:absolute;inset:0;display:grid;place-items:center;background:var(--bg-2);color:var(--muted);font-size:14px;transition:opacity .4s;z-index:2}
.vloader.off{opacity:0;pointer-events:none}
.vpaused{position:absolute;inset:0;z-index:2;background:#0d0d0f;overflow:hidden}
.vpaused[hidden]{display:none}
.vpaused img{width:100%;height:auto;display:block}
.vpaused p{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);width:max-content;max-width:86%;text-align:center;padding:10px 16px;border-radius:14px;background:rgba(5,7,13,.86);color:#eef2ff;font-size:15px;line-height:1.4;border:1px solid rgba(150,175,255,.2)}
.vdevice.desk .vpaused p{font-size:20px}
.is-off-btn{opacity:.6;cursor:default}
.vloader i{display:block;width:36px;height:36px;margin:0 auto 12px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);animation:spin .8s linear infinite}
.vinfo{width:360px;border-left:1px solid var(--line);padding:26px 22px;overflow:auto;flex-shrink:0;background:var(--bg);transition:margin .45s var(--ease-out)}
.vinfo.closed{margin-right:-360px}
.vinfo .k{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:22px 0 8px}
.vinfo h2{font-size:28px;letter-spacing:-.03em;line-height:1.1;font-weight:600}
.vinfo p{color:var(--muted);font-size:15px}
.vinfo ul{list-style:none;display:grid;gap:8px}
.vinfo li{font-size:14px;display:flex;gap:10px}
.vinfo li::before{content:"";width:6px;height:6px;margin-top:8px;border-radius:50%;background:var(--accent-fill);flex-shrink:0}
.vinfo .tags{justify-content:flex-start;max-width:none;margin-top:10px}
.vinfo .acts{margin-top:22px}
@media (max-width:900px){
  .vinfo{position:absolute;right:0;top:0;bottom:0;z-index:5;width:min(360px,92vw)}
  .vinfo.closed{margin-right:calc(-1 * min(360px,92vw))}
  .seg button span{display:none}
  .vbar .hide-sm{display:none}
}
/* teléfono: con el visor abierto, la página de fondo no se mueve ni rebota; solo se desplaza el panel de detalles */
html.viewer-open,html.viewer-open body{overflow:hidden;overscroll-behavior:none}
.viewer{overscroll-behavior:contain;touch-action:none}
.viewer .vinfo{touch-action:pan-y;overscroll-behavior:contain}
.viewer .vbar{touch-action:pan-x}