<?php declare(strict_types=1); ?>
<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title><?= htmlspecialchars($title ?? 'Sistema Académico Unificado') ?></title>

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">

  <style>
    :root{
      --brand-blue:#0d6efd;
      --brand-yellow:#FCCB07;
      --brand-dark:#0b1220;
    }

    body{
      background:#f5f7fb;
      color:var(--brand-dark);
    }

    /* ==============================
       HEADER PRO (IMPACTANTE)
       ============================== */
    .topbar{
      position: relative;
      z-index: 50; /* clave: no se tapa el click */
      background:
        linear-gradient(135deg, var(--brand-blue) 0%, #084298 40%, var(--brand-yellow) 100%);
      padding: 18px 0;
      box-shadow: 0 18px 40px rgba(0,0,0,.18);
      overflow: hidden;
    }

    /* brillos (no deben capturar clicks) */
    .topbar::before{
      content:"";
      position:absolute;
      width:460px;
      height:460px;
      top:-180px;
      right:-140px;
      background: radial-gradient(circle, rgba(255,255,255,.40), transparent 70%);
      opacity:.45;
      pointer-events:none;
    }
    .topbar::after{
      content:"";
      position:absolute;
      width:520px;
      height:520px;
      bottom:-220px;
      left:-220px;
      background: radial-gradient(circle, rgba(255,255,255,.22), transparent 70%);
      opacity:.35;
      pointer-events:none;
    }

    .brand-container{
      display:flex;
      align-items:center;
      gap:28px;
    }

    .logos-wrap{
      display:flex;
      align-items:center;
      gap:18px;
    }

    .brand-logo{
      height:96px;
      width:auto;
      border-radius:18px;
      background:#fff;
      padding:10px;
      box-shadow:
        0 14px 34px rgba(0,0,0,.28),
        0 0 0 3px rgba(255,255,255,.42);
      transition:transform .18s ease, box-shadow .18s ease;
    }
    .brand-logo:hover{
      transform:scale(1.05);
      box-shadow:
        0 18px 40px rgba(0,0,0,.30),
        0 0 0 3px rgba(255,255,255,.48);
    }

    @media (max-width: 992px){
      .brand-logo{ height:74px; border-radius:16px; padding:8px; }
    }

    .brand-text{ color:#fff; }
    .brand-title{
      font-size:1.75rem;
      font-weight:950;
      letter-spacing:.3px;
      line-height:1.05;
      text-shadow: 0 8px 18px rgba(0,0,0,.22);
    }
    .brand-sub{
      font-size:.95rem;
      opacity:.95;
      font-weight:600;
      text-shadow: 0 6px 14px rgba(0,0,0,.18);
    }

    .pill-user{
      background:rgba(255,255,255,.18);
      border:1px solid rgba(255,255,255,.35);
      color:#fff;
      padding:.45rem .8rem;
      border-radius:999px;
      font-weight:700;
      backdrop-filter:blur(8px);
      box-shadow: 0 10px 22px rgba(0,0,0,.18);
    }

    .btn-logout{
      background:#fff;
      color:#084298;
      font-weight:900;
      border-radius:12px;
      padding:8px 14px;
      border:none;
      box-shadow:0 12px 26px rgba(0,0,0,.20);
      transition: transform .12s ease, filter .12s ease;
    }
    .btn-logout:hover{
      filter: brightness(.97);
      transform: translateY(-1px);
    }

    /* BOTÓN MENÚ MÓVIL */
    .btn-menu{
      background: rgba(255,255,255,.16);
      border: 1px solid rgba(255,255,255,.30);
      color:#fff;
      font-weight:900;
      border-radius:12px;
      box-shadow: 0 10px 22px rgba(0,0,0,.16);
    }
    .btn-menu:hover{ background: rgba(255,255,255,.22); color:#fff; }

    /* OFFCANVAS */
    .offcanvas{
      background:linear-gradient(180deg, var(--brand-blue), #084298);
      color:#fff;
    }
    .offcanvas .list-group-item{
      background:transparent;
      border:none;
      color:#fff;
      font-weight:700;
      border-radius:12px;
      margin-bottom:6px;
    }
    .offcanvas .list-group-item:hover{
      background:rgba(255,255,255,.12);
    }
  </style>
</head>

<body>

<nav class="topbar">
  <div class="container-fluid d-flex justify-content-between align-items-center position-relative" style="z-index:1;">

    <div class="brand-container">

      <button class="btn btn-menu d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#menu" aria-controls="menu">
        <i class="bi bi-list"></i>
      </button>

      <a class="text-decoration-none d-flex align-items-center gap-4" href="/Comercio/public/dashboard.php" style="color:inherit;">
        <div class="logos-wrap">
          <!-- Logo Comercio -->
          <img class="brand-logo" src="/Comercio/public/assets/logo.png" alt="Escuela Nacional de Comercio">
          <!-- Logo Caazapá -->
          <img class="brand-logo" src="/Comercio/public/assets/logo_caazapa.png" alt="Colegio Nacional Prof. Carlos A. Ramírez F.">
        </div>

        <div class="brand-text d-none d-sm-block">
          <div class="brand-title">Sistema Académico Unificado</div>
          <div class="brand-sub">Escuela Nacional de Comercio · Colegio Nacional Prof. Carlos A. Ramírez F. · Caazapá</div>
        </div>
      </a>

    </div>

    <div class="d-flex align-items-center gap-3">
      <?php if (!empty($_SESSION['uid'])): ?>
        <span class="pill-user d-none d-md-inline">
          <i class="bi bi-person-circle me-1"></i>
          <?= htmlspecialchars($_SESSION['username'] ?? '') ?>
        </span>

        <!-- Salir (con cache-bust para evitar que vuelva por cache) -->
        <a class="btn btn-logout" href="/Comercio/public/logout.php?ts=<?= time() ?>">
          <i class="bi bi-box-arrow-right me-1"></i>Salir
        </a>
      <?php endif; ?>
    </div>

  </div>
</nav>

<!-- MENÚ MÓVIL -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="menu" aria-labelledby="menuLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="menuLabel">Menú</h5>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Cerrar"></button>
  </div>
  <div class="offcanvas-body">
    <div class="list-group">
      <a class="list-group-item" href="/Comercio/public/dashboard.php"><i class="bi bi-speedometer2 me-2"></i>Dashboard</a>
      <a class="list-group-item" href="/Comercio/public/asistencia/reporte_diario.php"><i class="bi bi-clipboard-data me-2"></i>Reporte diario</a>
      <a class="list-group-item" href="/Comercio/public/asistencia/importar_marcaciones.php"><i class="bi bi-cloud-arrow-up me-2"></i>Importar marcaciones</a>
      <a class="list-group-item" href="/Comercio/public/asistencia/generar_asistencia.php"><i class="bi bi-magic me-2"></i>Generar asistencia</a>
      <a class="list-group-item" href="/Comercio/public/admin/usuarios.php"><i class="bi bi-people me-2"></i>Usuarios</a>
      <a class="list-group-item" href="/Comercio/public/admin/vinculos.php"><i class="bi bi-link-45deg me-2"></i>Vínculos</a>
    </div>
  </div>
</div>

<main class="container py-4">