/* ════════════════════════════════════════════════════════════════
   ADVANCED TOOLS PANEL — DarkMuse
   Infraestructura aislada. Todos los selectores usan prefijo .atp-
   para evitar colisiones con los estilos existentes.
   ════════════════════════════════════════════════════════════════ */

/* ── Botón hamburguesa en topbar ─────────────────────────────── */
/* Reutiliza el aspecto de .btn-icon pero con un selector propio
   para poder ajustarlo sin tocar los demás botones del topbar.   */
.atp-hamburger{
  width:30px;height:30px;
  border-radius:5px;
  border:1px solid var(--border2);
  background:transparent;
  color:var(--text2);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;line-height:1;
  transition:background .15s, color .15s, border-color .15s, transform .15s;
  position:relative;
  flex-shrink:0;
}
.atp-hamburger:hover{
  background:var(--bg4);
  color:var(--gold2);
  border-color:var(--gold);
}
.atp-hamburger.atp-active{
  background:rgba(232,184,75,.12);
  color:var(--gold2);
  border-color:var(--gold);
}
.atp-hamburger svg{
  width:16px;height:16px;
  stroke:currentColor;
  stroke-width:1.8;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ── Backdrop ────────────────────────────────────────────────── */
.atp-backdrop{
  position:fixed;
  inset:0;
  background:rgba(8,8,12,.45);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
  z-index:1150;
}
.atp-backdrop.atp-open{
  opacity:1;
  pointer-events:auto;
}

/* ── Contenedor del panel ────────────────────────────────────── */
.atp-panel{
  position:fixed;
  top:0;
  right:0;
  height:100vh;
  width:360px;
  max-width:92vw;
  background:var(--bg2);
  border-left:1px solid var(--border2);
  box-shadow:-20px 0 60px rgba(0,0,0,.55);
  display:flex;
  flex-direction:column;
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
  z-index:1160;
  font-family:var(--ff-crimson);
  color:var(--text);
  /* Visible siempre en el DOM (para que las transiciones funcionen);
     el translate fuera de pantalla lo oculta efectivamente.        */
  will-change:transform;
}
.atp-panel.atp-open{
  transform:translateX(0);
}

/* Scrollbar minimal dentro del panel */
.atp-panel ::-webkit-scrollbar{width:4px;height:4px}
.atp-panel ::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
.atp-panel ::-webkit-scrollbar-thumb:hover{background:var(--gold)}

/* ── Header ──────────────────────────────────────────────────── */
.atp-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 18px 14px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.atp-header-title{
  font-family:var(--ff-cinzel);
  font-size:12px;
  letter-spacing:3px;
  color:var(--gold2);
  text-transform:uppercase;
  display:flex;align-items:center;gap:8px;
}
.atp-header-count{
  font-family:var(--ff-mono);
  font-size:10px;
  color:var(--text3);
  background:var(--bg3);
  border:1px solid var(--border2);
  padding:2px 6px;
  border-radius:3px;
  letter-spacing:0;
}
.atp-close-btn{
  width:26px;height:26px;
  border-radius:4px;
  border:1px solid var(--border2);
  background:transparent;
  color:var(--text3);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;line-height:1;
  transition:.15s;
}
.atp-close-btn:hover{
  background:var(--bg4);
  color:var(--text);
  border-color:var(--gold);
}

/* ── Cuerpo del panel ────────────────────────────────────────── */
.atp-body{
  flex:1;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
}

/* Navegación de submenús */
.atp-nav{
  display:flex;
  flex-direction:column;
  padding:8px 10px;
  gap:2px;
}
.atp-nav-item{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:11px 12px;
  border-radius:6px;
  border:1px solid transparent;
  background:transparent;
  cursor:pointer;
  transition:background .15s, border-color .15s, transform .12s;
  text-align:left;
  width:100%;
  color:var(--text2);
  font-family:inherit;
}
.atp-nav-item:hover{
  background:var(--bg3);
  border-color:var(--border2);
}
.atp-nav-item:active{
  transform:scale(.985);
}
.atp-nav-item.atp-selected{
  background:rgba(232,184,75,.08);
  border-color:rgba(232,184,75,.35);
}
.atp-nav-item.atp-selected .atp-nav-title{color:var(--gold2)}
.atp-nav-item.atp-selected .atp-nav-icon{color:var(--gold2)}

.atp-nav-icon{
  flex-shrink:0;
  width:30px;height:30px;
  border-radius:5px;
  background:var(--bg3);
  border:1px solid var(--border2);
  display:flex;align-items:center;justify-content:center;
  color:var(--text2);
  font-size:14px;
  transition:.15s;
}
.atp-nav-item:hover .atp-nav-icon{
  color:var(--gold2);
  border-color:var(--gold);
}

.atp-nav-text{
  flex:1;
  min-width:0;
}
.atp-nav-title{
  font-family:var(--ff-cinzel);
  font-size:12px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--text);
  line-height:1.2;
  margin-bottom:3px;
  transition:color .15s;
}
.atp-nav-desc{
  font-family:var(--ff-crimson);
  font-size:12px;
  color:var(--text3);
  line-height:1.35;
}

/* Separador entre nav y placeholder */
.atp-sep{
  height:1px;
  background:var(--border);
  margin:8px 14px;
  flex-shrink:0;
}

/* ── Placeholder de contenido ────────────────────────────────── */
.atp-placeholder{
  padding:14px 18px 20px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.atp-placeholder-label{
  font-family:var(--ff-cinzel);
  font-size:9px;
  letter-spacing:2px;
  color:var(--text3);
  text-transform:uppercase;
}
.atp-placeholder-card{
  background:var(--bg3);
  border:1px dashed var(--border2);
  border-radius:8px;
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  gap:8px;
  transition:border-color .2s;
}
.atp-placeholder-card:hover{
  border-color:var(--gold);
}
.atp-placeholder-title{
  font-family:var(--ff-cinzel);
  font-size:14px;
  letter-spacing:2px;
  color:var(--gold2);
  text-transform:uppercase;
}
.atp-placeholder-desc{
  font-family:var(--ff-crimson);
  font-size:13px;
  color:var(--text2);
  line-height:1.45;
}
.atp-placeholder-hint{
  margin-top:6px;
  font-family:var(--ff-mono);
  font-size:10px;
  color:var(--text3);
  letter-spacing:.5px;
  padding-top:8px;
  border-top:1px dashed var(--border2);
}
.atp-placeholder-hint::before{
  content:"⚙ ";
  color:var(--gold);
}

/* ── Footer ──────────────────────────────────────────────────── */
.atp-footer{
  padding:10px 14px;
  border-top:1px solid var(--border);
  flex-shrink:0;
  display:flex;
  justify-content:flex-end;
}
.atp-footer-btn{
  padding:6px 14px;
  border-radius:4px;
  border:1px solid var(--border2);
  background:transparent;
  color:var(--text2);
  font-family:var(--ff-cinzel);
  font-size:10px;
  letter-spacing:2px;
  text-transform:uppercase;
  cursor:pointer;
  transition:.15s;
}
.atp-footer-btn:hover{
  background:var(--bg4);
  color:var(--text);
  border-color:var(--gold);
}

/* ── Animación de entrada del contenido del placeholder ──────── */
@keyframes atpFadeSlide{
  from{opacity:0;transform:translateY(6px)}
  to  {opacity:1;transform:translateY(0)}
}
.atp-placeholder{
  animation:atpFadeSlide .25s ease forwards;
}

/* ── Responsivo / ventanas estrechas (Electron resize) ───────── */
@media (max-width: 720px){
  .atp-panel{width:88vw}
}

/* ── Soporte de tema claro (si la app cambia a light) ────────── */
/* La app principal usa data-theme="light" sobre body en su toggle */
body[data-theme="light"] .atp-backdrop{background:rgba(220,220,225,.5)}
body[data-theme="light"] .atp-panel{box-shadow:-20px 0 60px rgba(0,0,0,.15)}

/* ── Accesibilidad: respetar prefers-reduced-motion ──────────── */
/* Si el SO/navegador del usuario pide menos movimiento, anulamos
   transiciones y animaciones dentro del panel y sus módulos.    */
@media (prefers-reduced-motion: reduce){
  .atp-panel,
  .atp-panel *,
  .atp-backdrop,
  .atpm,
  .atpm *,
  .atpm-toast{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}