/* ===================== SIDEBAR LADY TAP (CÓDIGO FINAL VERSIÓN 4) ===================== */

/* Variables de ancho y color (reutiliza los de style.css) */
:root{
  --sb-width-closed: 70px; /* Más compacto */
  --sb-width-open: 240px;
  --sb-bg-1: var(--lt-bg1, #1c0f2a);
  --sb-bg-2: var(--lt-bg2, #10071a);
  --sb-accent: var(--lt-accent, #b164f7);
  --sb-border: var(--lt-border, #9b5de5);
  --sb-text: var(--lt-text, #f3e9ff);
  --sb-text-dim: var(--lt-text-dim, #d6c5ff);
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--sb-width-closed); /* Cerrado por defecto en desktop */
  background: linear-gradient(180deg, var(--sb-bg-1) 0%, var(--sb-bg-2) 100%);
  border-right: 1px solid rgba(155,93,229,.35);
  padding: 16px 0;
  transition: width 0.3s ease;
  z-index: 2000;
  overflow-y: auto; 
  overflow-x: hidden;
  box-shadow: 4px 0 10px rgba(0,0,0,0.5);
}

/* Estado Abierto */
.sidebar.is-open {
  width: var(--sb-width-open);
}

/* === Logo y Header Superior === */
.sidebar-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 8px 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
}

.logo-link {
  display: block;
  text-decoration: none;
  margin-bottom: 12px;
}
.logo-container {
    height: 48px; 
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
}

/* Logo Compacto (Cerrado) */
.logo-icon {
  width: 48px;
  height: auto;
  opacity: 1;
  transition: opacity 0.3s ease;
  position: static;
}

/* Logo Completo (Abierto) */
.logo-full {
  width: 100%;
  max-width: 180px;
  height: auto;
  opacity: 0;
  position: absolute;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Intercambio de logos en estado abierto */
.sidebar.is-open .logo-full {
  opacity: 1;
  position: static;
  pointer-events: auto;
}
.sidebar.is-open .logo-icon {
  opacity: 0;
  position: absolute;
  pointer-events: none;
}

/* === Botón de Hamburguesa (Estilo Discreto) === */
.menu-toggle-btn {
  /* Estilo más discreto, similar al borde */
  background: rgba(28,15,42,.85); 
  border: 1px solid rgba(155,93,229,.45);
  color: var(--sb-text);
  /* Tamaño más pequeño */
  width: 40px; 
  height: 40px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.2rem;
  transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  display: flex;
  justify-content: center;
  align-items: center;
}
.menu-toggle-btn:hover {
  background: rgba(155,93,229,.15);
  box-shadow: 0 0 8px rgba(155,93,229,.5);
}

/* FIX: Posición del Botón Toggle en Desktop (debajo del logo) */
.sidebar > .sidebar-header > .menu-toggle-btn {
    position: static;
    transform: none;
    margin-top: 10px;
}
/* El botón de X/hamburguesa ahora es parte del flujo normal en desktop */
.sidebar.is-open .menu-toggle-btn {
    position: static; 
}

/* === Navegación Principal === */
.sidebar-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-item {
  position: relative;
  margin-bottom: 4px;
}

.nav-link {
  display: flex;
  align-items: center;
  padding: 12px 8px; /* Ajuste para el nuevo ancho */
  margin: 0 8px;
  color: var(--sb-text-dim);
  text-decoration: none;
  /* FIX: Permitimos que el texto se envuelva en el link principal de herramientas */
  white-space: normal; 
  border-radius: 8px;
  transition: background 0.2s, color 0.2s;
}
/* El resto de links que no tienen dropdown pueden seguir nowrap para el tooltip */
.sidebar:not(.nav-dropdown) > .nav-link {
    white-space: nowrap;
}


.nav-link:hover, .nav-link.is-active {
  background: rgba(155,93,229,.15);
  color: var(--sb-text);
}

.nav-link i {
  font-size: 1.25rem;
  width: 30px; 
  text-align: center;
  margin-right: 12px;
  color: var(--sb-accent);
}

/* Ocultar texto de enlace en estado cerrado */
.nav-link span {
  opacity: 0;
  visibility: hidden;
  max-width: 0;
  transition: opacity 0.2s ease, max-width 0.3s ease;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.sidebar.is-open .nav-link span {
  opacity: 1;
  visibility: visible;
  max-width: 200px;
}

/* --- Submenú (Herramientas de Tibia) --- */
.nav-dropdown .nav-link i.fa-tools {
    color: var(--sb-text-dim);
}

.dropdown-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
  background-color: rgba(0,0,0,.15);
  border-radius: 0 0 8px 8px;
  margin: 0 8px;
}

.nav-dropdown.is-open .dropdown-menu {
  max-height: 300px;
}

.dropdown-menu .nav-link {
  /* FIX: Eliminamos el nowrap y ajustamos el padding para el texto largo */
  white-space: normal; 
  padding: 8px 10px 8px 50px; 
  font-size: 0.95em;
  font-weight: 400;
  color: var(--sb-text-dim);
  border-radius: 0;
  margin: 0;
}

.dropdown-menu .nav-link i {
  font-size: 1rem;
  width: 20px;
  margin-right: 8px;
  color: var(--sb-accent);
}


/* === TOOLTIP (BURBUJA DE TEXTO) AL MINIMIZAR === */
.tooltip-text {
    position: absolute;
    left: calc(var(--sb-width-closed) + 5px); /* Posición al lado del sidebar */
    top: 50%;
    transform: translateY(-50%);
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(22, 10, 35, 0.9); /* Fondo semi-transparente del tema */
    border: 1px solid var(--sb-border);
    color: var(--sb-text);
    font-size: 0.9rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 2005;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}

.sidebar:not(.is-open) .nav-link:hover .tooltip-text {
    opacity: 1;
    transform: translateY(-50%) translateX(0); /* Muestra el tooltip */
}


/* === Desktop: Ajuste de Contenido de la Página === */
@media (min-width: 769px) {
    body > .lady-tap-section,
    body > .cta-section,
    body > .site-footer,
    main {
        margin-left: var(--sb-width-closed);
        width: calc(100% - var(--sb-width-closed));
        transition: margin-left 0.3s ease, width 0.3s ease;
        padding-top: 24px !important; 
        margin-right: auto;
    }
    
    .sidebar.is-open ~ .lady-tap-section,
    .sidebar.is-open ~ .cta-section,
    .sidebar.is-open ~ .site-footer,
    .sidebar.is-open ~ main {
        margin-left: var(--sb-width-open);
        width: calc(100% - var(--sb-width-open));
    }

    .lady-tap-section {
        margin-top: 24px;
    }
}


/* === RESPONSIVE: Modo Móvil (< 769px) FIX FINAL === */
@media (max-width: 768px) {
  .sidebar {
    width: 0; 
    padding: 0;
    z-index: 2000;
    left: 0; 
  }

  .sidebar.is-open {
    width: var(--sb-width-open); 
    padding: 16px 0;
    box-shadow: 0 0 30px rgba(0,0,0,0.8);
  }

  /* FIX: Eliminamos el botón externo (debe estar ya eliminado del HTML) */
  .mobile-toggle-btn-outside {
      display: none !important;
  }
  
  /* Botón de Cierre (dentro del Sidebar, se convierte en X) */
  .sidebar-header .menu-toggle-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    /* FIX: Aseguramos que el botón sea visible y con el ícono correcto */
    width: 40px; 
    height: 40px;
    background: transparent;
    border: none;
    color: var(--sb-text-dim);
    box-shadow: none;
    font-size: 1.8rem; /* Tamaño de X */
    cursor: pointer;
  }
  
  /* Botón de Hamburguesa flotante en la esquina superior izquierda cuando está cerrado (solo en móvil) */
  .sidebar:not(.is-open) .sidebar-header .menu-toggle-btn {
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 2001;
    /* Restaurar el estilo de botón visible y compacto */
    width: 40px; 
    height: 40px;
    background: rgba(28,15,42,.85); 
    border: 1px solid rgba(155,93,229,.45);
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    color: var(--sb-text);
    font-size: 1.2rem;
  }
  
  /* FIX: Al abrir el sidebar en móvil, el botón vuelve a su posición de X en la esquina superior derecha */
  .sidebar.is-open .sidebar-header .menu-toggle-btn {
      right: 10px;
      left: unset;
  }

  /* Ajuste de padding-top al contenido */
  .lady-tap-section, .cta-section {
    padding-top: 74px !important; 
  }
  
  .lady-tap-section {
    margin-top: 0 !important;
  }
}