/* components/retro-window.css */
/* Usa tokens ya existentes: --line, --line-soft, --line-amber, --line-amber-strong,
   --font-display (Space Grotesk), --font-mono (JetBrains Mono) */

.retro-window{
  width: min(420px, 92vw);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(0,0,0,0.10);
  box-shadow: 0 18px 55px rgba(0,0,0,0.45);
  overflow: hidden;
}

/* Top bar */
.retro-titlebar{
  height: 44px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 0 12px;
  background: rgba(0,0,0,0.16);
  border-bottom: 1px solid var(--line);
}

.retro-title-left{
  display:flex;
  align-items:center;
  gap: 10px;
  font-family: var(--font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(230,228,223,0.88);
}

.retro-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(95,143,122,0.65);
  box-shadow: 0 0 0 3px rgba(95,143,122,0.14);
}

.retro-controls{ display:flex; gap: 8px; }
.retro-controls button{
  width: 34px;
  height: 22px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,0.12);
  color: rgba(230,228,223,0.85);
  font-family: var(--font-mono);
  font-size: 14px;
  cursor:pointer;
  transition: transform 160ms var(--ease-out), border-color 160ms var(--ease-out), background 160ms var(--ease-out);
}
.retro-controls button:hover{
  border-color: var(--line-amber-strong);
  background: rgba(0,0,0,0.18);
}
.retro-controls button:active{ transform: translateY(1px); }

/* Menu bar */
.retro-menubar{
  display:flex;
  gap: 16px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(0,0,0,0.10);
}

.retro-menubar a{
  font-family: var(--font-mono);
  color: rgba(230,228,223,0.88);
  letter-spacing: .10em;
  text-decoration: none;
  font-size: 14px;
}
.retro-menubar a:hover{ color: rgba(201,162,77,0.92); }

/* Content + fake scrollbar */
.retro-content{ display:grid; grid-template-columns: 1fr 42px; min-height: 460px; }
.retro-grid{
  padding: 18px;
  display:grid;
  grid-template-columns: repeat(2, minmax(130px, 1fr));
  gap: 22px 14px;
  align-content: start;
}

.retro-icon{
  border: 1px solid transparent;
  background: transparent;
  border-radius: 14px;
  padding: 10px 8px 12px;
  cursor:pointer;
  transition: transform 180ms var(--ease-out), border-color 180ms var(--ease-out), background 180ms var(--ease-out);
}
.retro-icon:hover{
  transform: translateY(-1px);
  border-color: rgba(201,162,77,0.30);
  background: rgba(0,0,0,0.10);
}
.retro-icon:focus-visible{
  outline: none;
  border-color: rgba(201,162,77,0.55);
  box-shadow: 0 0 0 3px rgba(201,162,77,0.12);
}

.retro-label{
  display:block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(230,228,223,0.86);
}

/* Folder icon (reutilizable) */
.retro-folder{ display:inline-block; width:72px; height:50px; position:relative; margin:0 auto; }
.retro-folder .body{
  position:absolute; inset: 10px 0 0 0;
  border:1px solid var(--line-amber);
  border-radius:12px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.04), rgba(0,0,0,0.22));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}
.retro-folder .tab{
  position:absolute; top:0; left:10px; width:28px; height:16px;
  border:1px solid var(--line-amber);
  border-bottom:none; border-radius:10px 10px 0 0;
  background: rgba(0,0,0,0.14);
}
.retro-folder.papers::after{
  content:""; position:absolute; right:8px; top:6px; width:22px; height:18px;
  border:1px solid var(--line); border-radius:6px; background: rgba(230,228,223,0.92);
  transform: rotate(-10deg); box-shadow:-8px 8px 0 rgba(230,228,223,0.92);
}

/* Fake scrollbar */
.retro-scrollbar{ border-left:1px solid var(--line); display:grid; grid-template-rows:44px 1fr 44px; background: rgba(0,0,0,0.08); }
.retro-scrollbtn{ display:grid; place-items:center; color: rgba(230,228,223,0.70); border-bottom:1px solid var(--line); font-family: var(--font-mono); }
.retro-scrollbar .retro-scrollbtn:last-child{ border-bottom:0; border-top:1px solid var(--line); }
.retro-track{ position:relative; }
.retro-thumb{ position:absolute; left:7px; right:7px; top:22px; height:92px; border:1px solid var(--line); border-radius:12px; background: rgba(0,0,0,0.12); }

/* Bottom bar */
.retro-statusbar{ height:54px; border-top:1px solid var(--line); background: rgba(0,0,0,0.10); display:grid; grid-template-columns:120px 1fr 120px; }
.retro-status-left{ border-right:1px solid var(--line); display:flex; align-items:center; gap:10px; padding:0 12px; }
.retro-navbtn{ width:34px; height:28px; border-radius:10px; border:1px solid var(--line); background: rgba(0,0,0,0.12); color: rgba(230,228,223,0.80); display:grid; place-items:center; font-family: var(--font-mono); cursor:pointer; user-select:none; transition: border-color 160ms var(--ease-out), background 160ms var(--ease-out); }
.retro-navbtn:hover{ border-color: var(--line-amber-strong); background: rgba(0,0,0,0.16); }
.retro-status-mid{ border-right:1px solid var(--line); }