---
// Barra lateral colapsable con la navegación principal y el estado de sesión.
---

<!-- SECCIÓN 1: SIDEBAR COLAPSABLE -->
<aside
  id="sidebar"
  class="flex-shrink-0 bg-stone-900 text-stone-200 flex flex-col z-30 border-r border-stone-800 h-full"
>
  <div class="p-4 border-b border-stone-800 flex items-center justify-between">
    <div class="flex items-center gap-2 overflow-hidden">
      <i class="fa-solid fa-seedling text-emerald-500 text-2xl shrink-0"></i>
      <div class="sidebar-text">
        <h1 class="text-lg font-bold text-emerald-500 tracking-wide">AgroVisión</h1>
      </div>
    </div>
    <button
      id="btn-sidebar-toggle"
      class="text-stone-500 hover:text-white p-1"
      title="Alternar Sidebar"
    >
      <i class="fa-solid fa-bars" id="toggle-icon"></i>
    </button>
  </div>

  <nav class="flex-1 p-4 space-y-2 overflow-y-auto" id="main-nav">
    <button data-tab="tab-resumen" class="nav-btn nav-btn-active w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-semibold text-stone-400 hover:bg-stone-800 hover:text-white transition-all">
      <i class="fa-solid fa-house w-5 text-center"></i>
      <span class="sidebar-text">Resumen</span>
    </button>
    <button data-tab="tab-satelite" class="nav-btn w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-semibold text-stone-400 hover:bg-stone-800 hover:text-white transition-all">
      <i class="fa-solid fa-satellite-dish w-5 text-center"></i>
      <span class="sidebar-text">Teledetección</span>
    </button>
    <button data-tab="tab-weather" class="nav-btn w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-semibold text-stone-400 hover:bg-stone-800 hover:text-white transition-all">
      <i class="fa-solid fa-cloud w-5 text-center"></i>
      <span class="sidebar-text">Meteorología</span>
    </button>
    <button data-tab="tab-analysis" class="nav-btn w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-semibold text-stone-400 hover:bg-stone-800 hover:text-white transition-all">
      <i class="fa-solid fa-chart-line w-5 text-center"></i>
      <span class="sidebar-text">Análisis Cruzado</span>
    </button>
    <button data-tab="tab-vision" class="nav-btn w-full flex items-center justify-between gap-3 px-4 py-3 rounded-lg text-sm font-semibold text-stone-400 hover:bg-stone-800 hover:text-white transition-all">
      <span class="flex items-center gap-3"><i class="fa-solid fa-helicopter w-5 text-center"></i><span class="sidebar-text">Conteo</span></span>
      <span class="bg-amber-500/10 text-amber-400 text-[8px] font-bold px-1.5 py-0.5 rounded border border-amber-500/20 uppercase sidebar-text shrink-0">Standby</span>
    </button>
  </nav>

  <!-- Footer plegable -->
  <div class="border-t border-stone-800 bg-stone-950/50 relative">
    <button id="btn-footer" class="w-full flex items-center justify-between px-4 py-2 text-[10px] text-stone-500 uppercase tracking-widest">
      <span>Estado de sesión</span><i id="footer-chevron" class="fa-solid fa-chevron-up"></i>
    </button>
    <div id="footer-body" class="p-4 pt-0">
      <div id="btn-profile-menu" class="flex items-center gap-3 cursor-pointer hover:bg-stone-800/50 p-1.5 rounded-lg transition-all">
        <div class="w-8 h-8 rounded-full bg-emerald-700 flex items-center justify-center text-xs font-bold text-white shrink-0" id="avatar-circle">AG</div>
        <div class="truncate">
          <h5 class="text-xs font-semibold text-stone-200" id="user-display-name">Agrónomo</h5>
          <p class="text-[9px] text-stone-500" id="user-session-mode">Sesión efímera (BYOK)</p>
        </div>
        <i class="fa-solid fa-ellipsis-vertical text-stone-500 ml-auto"></i>
      </div>

      <!-- Menu Dropdown de Perfil -->
      <div id="profile-dropdown" class="hidden absolute bottom-full left-4 right-4 mb-2 bg-stone-900 border border-stone-800 rounded-xl shadow-xl z-50 p-2 space-y-1">
        <button data-action="tab-settings" class="dropdown-btn w-full text-left flex items-center gap-2.5 px-3 py-2 rounded-lg text-xs font-semibold text-stone-300 hover:bg-stone-800 hover:text-white transition-all">
          <i class="fa-solid fa-user-gear text-stone-500 w-4"></i> Ajustes de Perfil
        </button>
        <button data-action="tab-config" class="dropdown-btn w-full text-left flex items-center gap-2.5 px-3 py-2 rounded-lg text-xs font-semibold text-stone-300 hover:bg-stone-800 hover:text-white transition-all">
          <i class="fa-solid fa-sliders text-stone-500 w-4"></i> Credenciales & APIs
        </button>
        <button data-action="tab-data" class="dropdown-btn w-full text-left flex items-center gap-2.5 px-3 py-2 rounded-lg text-xs font-semibold text-stone-300 hover:bg-stone-800 hover:text-white transition-all">
          <i class="fa-solid fa-database text-stone-500 w-4"></i> Explorador de Datos
        </button>
        <button id="dropdown-telemetry" class="w-full text-left flex items-center gap-2.5 px-3 py-2 rounded-lg text-xs font-semibold text-stone-300 hover:bg-stone-800 hover:text-white transition-all">
          <i class="fa-solid fa-chart-line text-stone-500 w-4"></i> Telemetría de UI
        </button>
        <hr class="border-stone-800 my-1" />
        <button id="dropdown-logout" class="w-full text-left flex items-center gap-2.5 px-3 py-2 rounded-lg text-xs font-semibold text-red-400 hover:bg-red-950/20 hover:text-red-300 transition-all">
          <i class="fa-solid fa-right-from-bracket w-4"></i> Cerrar Sesión
        </button>
      </div>

      <div class="mt-3 flex items-center gap-2 text-[10px]" id="db-status">
        <span class="relative flex h-2 w-2">
          <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-stone-500 opacity-75"></span>
          <span class="relative inline-flex rounded-full h-2 w-2 bg-stone-500"></span>
        </span>
        <span id="db-status-text" class="text-stone-400">Conectando al backend…</span>
        <button id="btn-telemetry" class="ml-auto text-stone-500 hover:text-emerald-400 transition-colors" title="Ver telemetría">
          <i class="fa-solid fa-chart-line text-[10px]"></i>
        </button>
      </div>
    </div>
  </div>
</aside>