<script setup>
import Sidebar from './components/Sidebar.vue'
import { tema, alternarTema } from './lib/tema.js'
import { menuAbierto } from './lib/ui.js'
</script>

<template>
  <div class="min-h-screen flex">
    <Sidebar />
    <main class="flex-1 min-w-0 flex flex-col">
      <header class="h-14 shrink-0 flex items-center gap-1 px-4 sm:px-6 border-b border-borde">
        <!-- Solo en móvil: en escritorio el sidebar está siempre visible. -->
        <button
          class="btn-ghost !px-2 !py-1.5 md:hidden"
          aria-label="Abrir menú"
          @click="menuAbierto = true"
        >
          <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
        </button>
        <span class="flex-1"></span>
        <button
          class="btn-ghost !px-2.5 !py-1.5"
          :title="tema === 'oscuro' ? 'Cambiar a claro' : 'Cambiar a oscuro'"
          @click="alternarTema"
        >
          <span class="text-base leading-none">{{ tema === 'oscuro' ? '☀️' : '🌙' }}</span>
        </button>
      </header>
      <div class="flex-1 max-w-5xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8 animate-aparecer">
        <router-view />
      </div>
    </main>
  </div>
</template>
