/* ===================================================================
   OS.CSS — FractAIl Web · OS Overlay System
   Ventanas, dock, pulsar, window management
   =================================================================== */

/* ===== OS OVERLAY ===== */
.os-overlay{position:fixed;inset:0;z-index:400;display:none;pointer-events:none}
.os-overlay.visible{display:block}
.os-backdrop{position:absolute;inset:0;background:rgba(5,5,5,0.65);backdrop-filter:blur(14px);pointer-events:all;opacity:0;transition:opacity .3s}
.os-overlay.visible .os-backdrop{opacity:1}

/* ===== APP WINDOW ===== */
.app-window{
  position:absolute;pointer-events:all;
  background:var(--glass);border:1px solid rgba(255,255,255,0.07);
  border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 25px 70px rgba(0,0,0,0.6);
  min-width:400px;min-height:300px;
  opacity:0;transform:scale(0.92);
  transition:opacity .25s,transform .25s cubic-bezier(.34,1.56,.64,1);
}
.app-window.show{opacity:1;transform:scale(1)}
.app-window.active{box-shadow:0 30px 80px rgba(0,0,0,0.7),0 0 0 1px rgba(0,255,135,0.08)}
.app-window.minimized{transform:scale(0.1) translateY(400px);opacity:0;pointer-events:none}

/* Window titlebar */
.wt{
  height:42px;display:flex;align-items:center;padding:0 14px;gap:10px;
  background:rgba(10,10,14,0.95);border-bottom:1px solid rgba(255,255,255,0.05);
  cursor:grab;flex-shrink:0;
}
.wt:active{cursor:grabbing}
.wt-dots{display:flex;gap:7px}
.wt-d{width:12px;height:12px;border-radius:50%;cursor:pointer;transition:transform .15s}
.wt-d:hover{transform:scale(1.25)}
.dc{background:#FF5F57}
.dm{background:#FFBF2E}
.dx{background:#28C840}
.wt-title{flex:1;text-align:center;font-size:12px;font-weight:700;letter-spacing:1px;color:var(--dim);pointer-events:none}
.wt-badge{font-size:9px;font-weight:700;letter-spacing:1px;padding:3px 10px;border-radius:999px}

/* Window body */
.wb{flex:1;position:relative;overflow:hidden}
.wb iframe{width:100%;height:100%;border:none;background:#0a0a0e}

/* Window placeholder (native/planned apps) */
.w-placeholder{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;height:100%;padding:40px;gap:14px;
}
.w-placeholder .pi{font-size:48px}
.w-placeholder .pt{font-size:22px;font-weight:800}
.w-placeholder .pd{font-size:13px;color:var(--dim);max-width:340px;line-height:1.6}
.dl-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 28px;border-radius:999px;font-size:14px;font-weight:800;
  text-decoration:none;border:none;cursor:pointer;
  transition:transform .2s,box-shadow .2s;
}
.dl-btn:hover{transform:scale(1.05)}
.dl-green{background:var(--neon);color:#050505;box-shadow:0 0 20px rgba(0,255,135,0.3)}

/* Window resize handle */
.win-resize{position:absolute;bottom:0;right:0;width:18px;height:18px;cursor:nwse-resize}

/* ===== DOCK ===== */
.dock{
  position:fixed;bottom:12px;left:50%;transform:translateX(-50%);z-index:600;
  display:none;gap:3px;padding:7px 16px;
  background:rgba(10,10,14,0.8);backdrop-filter:blur(30px);
  border:1px solid rgba(255,255,255,0.07);border-radius:20px;
}
body.os-mode .dock{display:flex}
.dock-i{
  width:48px;height:48px;border-radius:12px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  cursor:pointer;position:relative;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),background .15s;
}
.dock-i:hover{transform:scale(1.3) translateY(-10px);background:rgba(255,255,255,0.06)}
.dock-i.open::after{content:'';position:absolute;bottom:1px;width:4px;height:4px;border-radius:50%;background:var(--neon)}
.dock-ic{font-size:22px}
.dock-tt{
  position:absolute;bottom:56px;white-space:nowrap;
  font-size:11px;font-weight:700;padding:5px 12px;
  border-radius:8px;background:rgba(20,20,25,0.97);
  border:1px solid rgba(255,255,255,0.08);color:#fff;
  opacity:0;transform:translateY(5px);
  transition:opacity .15s,transform .15s;pointer-events:none;
}
.dock-i:hover .dock-tt{opacity:1;transform:translateY(0)}
.dock-home{background:rgba(0,255,135,0.06)}
.dock-home:hover{background:rgba(0,255,135,0.14)!important}
.dock-sep{width:1px;height:28px;background:rgba(255,255,255,0.06);margin:0 4px;align-self:center}

/* ===== PULSAR ===== */
.pulsar{
  position:fixed;bottom:18px;left:18px;z-index:600;
  display:flex;align-items:center;gap:8px;cursor:pointer;
}
.pul-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--neon);box-shadow:0 0 10px rgba(0,255,135,0.5);
  animation:pg 2s ease-in-out infinite alternate;
}
.pul-txt{font-size:9px;font-weight:700;letter-spacing:3px;color:var(--dim);opacity:0;transition:opacity .2s}
.pulsar:hover .pul-txt{opacity:1}
@keyframes pg{0%{box-shadow:0 0 5px rgba(0,255,135,0.2)}100%{box-shadow:0 0 18px rgba(0,255,135,0.7)}}