/* ===== MinerOS Hub · capa de pulido (tooltips, avatar, microinteracciones) ===== */
:root{--pol-graphite:#1b1b1f;--pol-graphite-2:#24242a;--pol-ease:cubic-bezier(.16,.84,.44,1)}
[data-theme=light]{--pol-graphite:#22222a;--pol-graphite-2:#2c2c36}

/* ---------- TOOLTIPS (i) ---------- */
.mos-i{display:inline-grid;place-items:center;width:16px;height:16px;margin-left:6px;border-radius:50%;border:1px solid var(--border-gold);background:transparent;color:var(--gold);font-family:var(--mono);font-size:.62rem;font-weight:700;line-height:1;cursor:help;padding:0;flex:0 0 auto;vertical-align:middle;transition:transform .2s var(--pol-ease),background .2s,color .2s,border-color .2s,box-shadow .2s}
.mos-i:hover,.mos-i.on{background:var(--gold);color:#1a1407;border-color:var(--gold);transform:scale(1.12);box-shadow:0 0 0 4px var(--gold-glow)}
.mos-i.pinned{box-shadow:0 0 0 4px var(--gold-glow),0 0 0 1px var(--gold)}
.mos-ipop{position:absolute;z-index:9600;background:var(--pol-graphite);border:1px solid #33333c;border-radius:14px;padding:13px 15px;box-shadow:0 18px 44px -22px rgba(0,0,0,.85),0 2px 8px -4px rgba(0,0,0,.5);opacity:0;transform:translateY(-6px) scale(.985);transition:opacity .2s var(--pol-ease),transform .22s var(--pol-ease);pointer-events:none}
.mos-ipop.up{transform:translateY(6px) scale(.985)}
.mos-ipop.open{opacity:1;transform:none;pointer-events:auto}
.mos-ipop .ip-ar{position:absolute;top:-5px;width:10px;height:10px;background:var(--pol-graphite);border-left:1px solid #33333c;border-top:1px solid #33333c;transform:translateX(-50%) rotate(45deg);border-radius:2px}
.mos-ipop.up .ip-ar{top:auto;bottom:-5px;border:none;border-right:1px solid #33333c;border-bottom:1px solid #33333c}
.mos-ipop b{display:block;font-family:var(--display);font-size:.85rem;color:var(--gold);margin-bottom:5px;padding-right:14px;letter-spacing:0}
.mos-ipop p{font-size:.8rem;color:#c9c6bf;line-height:1.6;text-wrap:pretty}
.mos-ipop .ip-x{position:absolute;top:6px;right:8px;background:none;border:none;color:#6f6c66;font-size:1rem;line-height:1;cursor:pointer;padding:2px;opacity:0;transition:.2s}
.mos-ipop.pinned .ip-x{opacity:1}
.mos-ipop .ip-x:hover{color:var(--gold)}

/* ---------- AVATAR ---------- */
.pol-av{background-size:cover;background-position:center;overflow:hidden}
.pol-av.em{font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif}
.pol-ini-display{font-family:var(--display)!important}
.pol-ini-serif{font-family:Georgia,'Times New Roman',serif!important;font-weight:600!important}
.pol-ini-light{font-family:var(--font)!important;font-weight:300!important;letter-spacing:.06em}
.ac-av-wrap{cursor:pointer}
.ac-av-wrap .ac-av{transition:transform .25s var(--pol-ease),box-shadow .25s var(--pol-ease)}
.ac-av-wrap:hover .ac-av{transform:scale(1.035);box-shadow:0 18px 40px -16px #000,0 0 0 3px var(--gold-glow)}
.pol-avcam{position:absolute;right:-2px;top:-2px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--pol-graphite);border:1px solid var(--border-gold);color:var(--gold);font-size:.7rem;opacity:0;transform:scale(.7);transition:.22s var(--pol-ease);pointer-events:none}
.ac-av-wrap:hover .pol-avcam{opacity:1;transform:none}

/* menú flotante de personalización */
.pol-avmenu{position:absolute;top:calc(100% + 14px);left:-8px;width:268px;z-index:600;background:var(--pol-graphite);border:1px solid #33333c;border-radius:16px;padding:12px;box-shadow:0 26px 60px -26px #000;opacity:0;transform:translateY(-8px) scale(.97);transform-origin:top left;transition:opacity .2s var(--pol-ease),transform .24s var(--pol-ease);pointer-events:none;text-align:left}
.pol-avmenu.open{opacity:1;transform:none;pointer-events:auto}
.pol-avmenu .am-id{padding:6px 8px 11px;border-bottom:1px solid #33333c;margin-bottom:8px}
.pol-avmenu .am-id b{display:block;font-family:var(--display);font-size:.95rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pol-avmenu .am-id span{display:block;font-family:var(--mono);font-size:.66rem;color:var(--text-muted);margin-top:4px;letter-spacing:.03em}
.pol-avmenu button{display:flex;align-items:center;gap:10px;width:100%;background:none;border:none;color:var(--text-2);font-family:var(--font);font-size:.83rem;text-align:left;padding:9px 10px;border-radius:10px;cursor:pointer;transition:background .18s,color .18s,transform .18s var(--pol-ease)}
.pol-avmenu button i{font-style:normal;width:18px;text-align:center;font-size:.95rem;filter:grayscale(.15)}
.pol-avmenu button:hover{background:var(--pol-graphite-2);color:var(--text);transform:translateX(2px)}
.pol-avmenu button.danger:hover{color:var(--red)}

/* ---------- MODALES DE PERSONALIZACIÓN ---------- */
.pol-ov{position:fixed;inset:0;z-index:9800;background:rgba(6,6,8,.72);backdrop-filter:blur(6px);display:grid;place-items:center;padding:20px;opacity:0;transition:opacity .22s var(--pol-ease)}
.pol-ov.open{opacity:1}
.pol-sheet{width:100%;max-width:392px;background:var(--card);border:1px solid var(--border-gold);border-radius:20px;padding:22px;box-shadow:0 40px 90px -40px #000;transform:translateY(14px) scale(.97);transition:transform .26s var(--pol-ease);max-height:92vh;overflow:auto}
.pol-ov.open .pol-sheet{transform:none}
.pol-sheet h4{font-size:1.05rem;color:var(--text);margin-bottom:4px}
.pol-sheet .ps-sub{font-size:.78rem;color:var(--text-muted);margin-bottom:16px;line-height:1.5}
.pol-row{display:flex;gap:10px;margin-top:18px}
.pol-row .btn{flex:1;justify-content:center}
.pol-x{position:absolute;top:10px;right:12px}

/* recorte de foto */
.pol-crop{position:relative;width:250px;height:250px;margin:0 auto;border-radius:50%;overflow:hidden;background:var(--bg-2);cursor:grab;touch-action:none;box-shadow:0 0 0 1px var(--border),0 0 0 7px rgba(231,189,90,.1)}
.pol-crop:active{cursor:grabbing}
.pol-crop canvas{display:block;width:100%;height:100%}
.pol-zoom{display:flex;align-items:center;gap:10px;margin-top:16px}
.pol-zoom input[type=range]{flex:1;accent-color:var(--gold);height:3px}
.pol-zoom span{font-family:var(--mono);font-size:.66rem;color:var(--text-muted);width:34px;text-align:right}
.pol-drop{border:1px dashed var(--border-gold);border-radius:16px;padding:26px 18px;text-align:center;cursor:pointer;transition:.2s}
.pol-drop:hover,.pol-drop.hot{background:var(--gold-glow);border-color:var(--gold)}
.pol-drop b{display:block;font-family:var(--display);font-size:.9rem;color:var(--gold);margin-bottom:6px}
.pol-drop span{font-size:.76rem;color:var(--text-muted)}

/* emojis */
.pol-emgrid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;max-height:206px;overflow:auto;padding:4px 2px}
.pol-emgrid button{aspect-ratio:1;display:grid;place-items:center;font-size:1.15rem;background:none;border:1px solid transparent;border-radius:9px;cursor:pointer;transition:.16s var(--pol-ease)}
.pol-emgrid button:hover{background:var(--bg-3);transform:scale(1.14)}
.pol-emgrid button.sel{border-color:var(--gold);background:var(--gold-glow)}
.pol-prev{width:84px;height:84px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:1.9rem;background-size:cover;background-position:center}

/* colores */
.pol-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.pol-cols button{display:grid;gap:6px;justify-items:center;background:none;border:none;cursor:pointer;padding:4px 0;color:var(--text-muted);font-size:.62rem;font-family:var(--mono);letter-spacing:.02em}
.pol-cols i{width:38px;height:38px;border-radius:50%;box-shadow:0 6px 16px -8px #000;transition:transform .2s var(--pol-ease),box-shadow .2s}
.pol-cols button:hover i{transform:scale(1.1)}
.pol-cols button.sel i{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--gold)}
.pol-cols button.sel{color:var(--gold)}
.pol-styles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.pol-styles button{border:1px solid var(--border);background:var(--bg-2);border-radius:12px;padding:12px 8px;cursor:pointer;color:var(--text);font-size:1.15rem;transition:.18s var(--pol-ease)}
.pol-styles button:hover{border-color:var(--border-gold)}
.pol-styles button.sel{border-color:var(--gold);background:var(--gold-glow);color:var(--gold)}

/* ---------- MICROINTERACCIONES ---------- */
.btn,button.btn,a.btn{position:relative;overflow:hidden;transition:transform .2s var(--pol-ease),box-shadow .2s var(--pol-ease),background .2s,border-color .2s,color .2s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985)}
.pol-ripple{position:absolute;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.22);transform:translate(-50%,-50%) scale(0);animation:polRip .55s var(--pol-ease) forwards}
@keyframes polRip{to{transform:translate(-50%,-50%) scale(1);opacity:0}}
.ac-hs,.ac-hp,.ac-loyal,.card,.pcard{transition:transform .24s var(--pol-ease),box-shadow .24s var(--pol-ease),border-color .24s}
.ac-hs:hover,.card:hover,.pcard:hover{transform:translateY(-2px);box-shadow:0 20px 44px -26px #000}
[data-copy]{cursor:pointer;transition:color .18s,background .18s}
[data-copy]:hover{color:var(--gold)}

/* skeleton */
.pol-sk{position:relative;overflow:hidden;background:var(--bg-3);border-radius:8px;color:transparent!important}
.pol-sk::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.055),transparent);animation:polSk 1.15s infinite}
@keyframes polSk{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* toast */
.pol-toasts{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:9900;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.pol-toast{display:flex;align-items:center;gap:9px;background:var(--pol-graphite);border:1px solid #33333c;color:var(--text);font-size:.82rem;padding:10px 16px;border-radius:99px;box-shadow:0 20px 44px -22px #000;opacity:0;transform:translateY(10px) scale(.97);transition:opacity .22s var(--pol-ease),transform .26s var(--pol-ease)}
.pol-toast.on{opacity:1;transform:none}
.pol-toast i{font-style:normal;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:var(--green);color:#08210f;font-size:.62rem;font-weight:700;flex:0 0 auto}
.pol-toast.err i{background:var(--red);color:#2a0d0d}

/* animación de éxito */
@keyframes polPop{0%{transform:scale(.86)}55%{transform:scale(1.06)}100%{transform:scale(1)}}
.pol-saved{animation:polPop .45s var(--pol-ease)}

/* spinner de subida */
.pol-spin{width:15px;height:15px;border-radius:50%;border:2px solid rgba(231,189,90,.25);border-top-color:var(--gold);animation:polSpin .7s linear infinite;flex:0 0 auto}
@keyframes polSpin{to{transform:rotate(360deg)}}
.pol-bar{height:3px;border-radius:99px;background:var(--bg-3);overflow:hidden;margin-top:14px}
.pol-bar i{display:block;height:100%;width:30%;background:var(--gold);border-radius:99px;animation:polBar 1s var(--pol-ease) infinite}
@keyframes polBar{0%{margin-left:-32%}100%{margin-left:102%}}

/* estado vacío */
.pol-empty{text-align:center;padding:34px 20px;color:var(--text-muted)}
.pol-empty .pe-ic{width:52px;height:52px;margin:0 auto 14px;border-radius:16px;display:grid;place-items:center;background:var(--bg-3);border:1px solid var(--border);color:var(--gold);font-size:1.3rem}
.pol-empty b{display:block;font-family:var(--display);color:var(--text);font-size:.98rem;margin-bottom:6px}
.pol-empty p{font-size:.8rem;line-height:1.55;max-width:300px;margin:0 auto}

@media (prefers-reduced-motion:reduce){.pol-ripple,.pol-sk::after,.pol-bar i{animation:none!important}.btn:hover,.ac-hs:hover,.card:hover{transform:none}}
@media (max-width:640px){.pol-avmenu{width:calc(100vw - 48px);max-width:280px}.pol-crop{width:min(250px,72vw);height:min(250px,72vw)}.pol-emgrid{grid-template-columns:repeat(7,1fr)}}

/* ---- animación de cabecera por sección (assets/hero-fx.js) ---- */
.hfx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;
  mask-image:linear-gradient(to bottom,#000 0,#000 58%,transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 58%,transparent 100%)}
.hfx canvas{display:block;width:100%;height:100%}
.page-hero>.wrap,.rhero>.wrap{position:relative;z-index:1}
/* fichas de detalle: el lienzo va dentro del bloque y solo cubre su parte alta */
.hfx.hfx-inset{inset:0 0 auto 0;height:min(320px,100%);
  mask-image:linear-gradient(to bottom,#000 0,#000 46%,transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 46%,transparent 100%)}

/* ---- ficha de minero: escenario de imagen al estilo anatomía ---- */
.md-head{align-items:start;grid-template-columns:minmax(300px,clamp(300px,42%,520px)) minmax(0,1fr);gap:clamp(28px,3.4vw,46px)}
@media(max-width:1080px){.md-head{grid-template-columns:1fr;gap:30px}.md-stage{max-width:480px}}
.md-stage{display:flex;flex-direction:column;gap:10px}
.md-shot{position:relative;display:block;width:100%;padding:0;aspect-ratio:1/1;background:#000;border:1px solid var(--border);border-radius:18px;overflow:hidden;cursor:zoom-in;transition:border-color .28s,box-shadow .34s}
.md-shot img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.md-shot:hover{border-color:var(--border-gold);box-shadow:0 22px 48px -26px rgba(0,0,0,.7)}
.md-shot:hover img{transform:scale(1.045)}
.md-zoom{position:absolute;bottom:12px;right:12px;display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;background:rgba(10,10,12,.72);backdrop-filter:blur(8px);border:1px solid rgba(231,189,90,.35);color:var(--gold);font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;opacity:0;transform:translateY(6px);transition:opacity .26s,transform .26s}
.md-zoom svg{width:13px;height:13px}
.md-zoom em{font-style:normal}
.md-shot:hover .md-zoom,.md-shot:focus-visible .md-zoom{opacity:1;transform:none}
.md-badges{display:flex;flex-wrap:wrap;gap:7px}
.md-b{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:999px;border:1px solid var(--border);color:var(--text-2);background:var(--bg-2)}
.md-b.hyd{border-color:rgba(90,160,231,.4);color:#7fb4e8}

/* de un vistazo */
.md-glance{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin:12px 0 10px}
.md-glance>div{background:var(--card);padding:12px 14px}
.md-glance span{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px}
.md-glance b{font-size:1.02rem;font-weight:600}
.md-glance-note{font-size:.78rem;line-height:1.55;color:var(--text-muted);margin:0}
@media(max-width:520px){.md-glance{grid-template-columns:1fr}}

/* lupa a pantalla completa */
.md-lb{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;gap:14px;padding:5vmin;background:rgba(6,6,8,.94);backdrop-filter:blur(10px);opacity:0;transition:opacity .24s}
.md-lb.on{opacity:1}
.md-lb img{max-width:min(1100px,92vw);max-height:80vh;object-fit:contain;border-radius:14px;transform:scale(.97);transition:transform .3s cubic-bezier(.16,1,.3,1)}
.md-lb.on img{transform:none}
.md-lb-cap{font-family:var(--mono);font-size:.8rem;letter-spacing:.06em;color:var(--text-2)}
.md-lb-x{position:absolute;top:18px;right:20px;width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:var(--bg-2);color:var(--text);font-size:1.05rem;cursor:pointer;transition:border-color .2s,color .2s}
.md-lb-x:hover{border-color:var(--gold);color:var(--gold)}
@media(prefers-reduced-motion:reduce){.md-shot:hover img{transform:none}.md-lb img{transform:none}}