<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{{ config('app.name') }}</title>
    {{-- App assets (si existieran Tailwind/Vite, se mantienen) --}}
    @vite(['resources/css/app.css', 'resources/js/app.js'])

    {{-- Bootstrap 5 + AOS para animaciones --}}
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css" rel="stylesheet">
    <style>
      body {
        min-height: 100vh;
        background: linear-gradient(to right, #E3F2FD, #CFEBF9);
      }
    </style>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container-fluid">
        <a class="navbar-brand d-flex align-items-center gap-2" href="#">
          <img src="{{ asset('img/logo_left.png') }}" alt="Logo 1" height="28" class="d-inline-block align-text-top">
          <span>{{ config('app.name', 'Gestión de Viáticos') }}</span>
          <img src="{{ asset('img/logo_right.png') }}" alt="Logo 2" height="28" class="d-none d-md-inline-block align-text-top">
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#topnav" aria-controls="topnav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="topnav">
          <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
            <li class="nav-item"><a href="{{ route('viaticos.tareas') }}" class="nav-link">Viáticos</a></li>
            <li class="nav-item"><form method="POST" action="{{ route('logout') }}">@csrf <button class="btn btn-outline-light btn-sm ms-lg-3" type="submit">Salir</button></form></li>
          </ul>
        </div>
      </div>
    </nav>

    <main class="container-fluid py-3" data-aos="fade-up">
      @yield('content')
    </main>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>
    <script>
      AOS.init({ duration: 450, easing: 'ease-out-quart', once: true });
    </script>
  </body>
</html>
