/* ── Variables ─────────────────────────────────────────── */
:root {
  --blue:     #2563EB;
  --dk-blue:  #1D4ED8;
  --red:      #DC2626;
  --green:    #16A34A;
  --bg:       #F0F4F8;
  --white:    #FFFFFF;
  --border:   #CBD5E1;
  --text:     #1E293B;
  --muted:    #64748B;
  --sidebar-w: 232px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body { font-family: 'Segoe UI', Arial, sans-serif; background: var(--bg); color: var(--text); }

.app { display: flex; min-height: 100vh; }

/* Sidebar */
.sidebar {
  width: var(--sidebar-w); min-height: 100vh;
  background: var(--blue);
  display: flex; flex-direction: column; align-items: center;
  padding: 24px 0; color: white;
  position: fixed; top: 0; left: 0; z-index: 100;
}
.main-content { margin-left: var(--sidebar-w); flex: 1; min-height: 100vh; }

.avatar { width:72px;height:72px;border-radius:50%;background:#93C5FD;display:flex;align-items:center;justify-content:center; }
.avatar svg { width:46px;height:46px; }
.avatar-sm { width:44px;height:44px;border-radius:50%;background:#BFDBFE;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.avatar-sm svg { width:28px;height:28px; }
.avatar-md { width:56px;height:56px;border-radius:50%;background:#BFDBFE;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.avatar-md svg { width:36px;height:36px; }

.sidebar-title { font-weight:900;font-size:22px;margin-top:10px;margin-bottom:14px; }
.sidebar-divider { width:85%;height:1px;background:rgba(255,255,255,0.3); }
.nav-item { width:100%;display:flex;align-items:center;gap:10px;padding:14px 22px;cursor:pointer;font-weight:bold;font-size:15px;color:white;text-decoration:none;transition:background 0.15s; }
.nav-item:hover { background:rgba(255,255,255,0.15); }
.nav-item.active { background:rgba(255,255,255,0.20); }
.nav-icon { font-size:18px; }
.sidebar-spacer { flex:1; }
.logout-btn { background:white;border:2px solid var(--red);border-radius:25px;padding:10px 20px;color:var(--red);font-weight:bold;font-size:14px;cursor:pointer;display:flex;align-items:center;gap:8px;font-family:inherit;text-decoration:none;margin-bottom:8px; }

/* Page */
.page-header { background:var(--dk-blue);padding:14px 24px;color:white;font-weight:bold;font-size:18px;text-align:center; }
.page-body { padding:24px; }

/* Buttons */
.btn { border:none;border-radius:25px;padding:9px 22px;cursor:pointer;font-weight:bold;font-size:14px;display:inline-flex;align-items:center;gap:6px;font-family:inherit;transition:opacity 0.15s; }
.btn:hover { opacity:0.88; }
.btn-blue { background:var(--blue);color:white; }
.btn-large { padding:10px 32px;font-size:15px; }
.btn-outline-blue { background:white;border:2px solid var(--blue);color:var(--blue);border-radius:25px;padding:8px 18px;cursor:pointer;font-weight:bold;font-size:14px;display:inline-flex;align-items:center;gap:6px;font-family:inherit; }
.btn-outline-red { background:white;border:2px solid var(--red);color:var(--red);border-radius:25px;padding:8px 18px;cursor:pointer;font-weight:bold;font-size:14px;display:inline-flex;align-items:center;gap:6px;font-family:inherit; }
.btn-row { display:flex;gap:12px;margin-bottom:20px; }

/* Back link */
.back-link { display:flex;align-items:center;gap:8px;margin-bottom:16px; }
.back-link a, .back-link span { color:var(--red);font-weight:bold;font-size:15px;text-decoration:none;cursor:pointer; }
.back-arrow { color:var(--red);font-size:18px; }

/* Card */
.card { background:white;border-radius:12px;padding:24px;box-shadow:0 2px 8px rgba(0,0,0,0.08); }
.card-lg { background:white;border-radius:16px;padding:28px;box-shadow:0 2px 8px rgba(0,0,0,0.08); }

/* Util */
.hidden { display:none !important; }
.flex-center { display:flex;justify-content:center; }
.mt-16 { margin-top:16px; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE
══════════════════════════════════════════════════════════ */

/* Hamburger button (hidden on desktop) */
.hamburger {
  display: none;
  position: fixed;
  top: 10px; left: 10px;
  z-index: 400;
  background: var(--blue);
  color: white;
  border: none;
  border-radius: 8px;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* Dark overlay behind open sidebar */
.sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 250;
}
.sidebar-overlay.visible { display: block; }

@media (max-width: 768px) {
  /* Show hamburger */
  .hamburger { display: flex; }

  /* Sidebar slides in from left */
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.28s ease;
  }
  .sidebar.open { transform: translateX(0); }

  /* Content fills full width */
  .main-content { margin-left: 0; }

  /* Leave space for hamburger in header */
  .page-header { padding-left: 64px; }

  /* Cards scroll horizontally if content overflows */
  .card, .card-lg { overflow-x: auto; }

  /* Stack perfil layout */
  .perfil-layout { flex-direction: column; }
  .perfil-data-card, .perfil-stats-card { flex: none; width: 100%; }

  /* Stack cert selection layout */
  .cert-sel-layout { flex-direction: column; }
  .grade-panel, .notes-panel { flex: none; width: 100%; }

  /* Nav arrow moves inline */
  .nav-arrow-btn { position: static; margin-top: 12px; }

  /* Preview top bar */
  .preview-topbar { flex-wrap: wrap; gap: 6px; }
  .preview-topbar-title { font-size: 15px; }
  .preview-action-row { flex-direction: column; gap: 12px; align-items: flex-start; }
  .preview-btns { flex-wrap: wrap; gap: 6px; }

  /* Back link wraps */
  .back-link { flex-wrap: wrap; }

  /* Button rows wrap */
  .btn-row { flex-wrap: wrap; gap: 8px; }
}

@media (max-width: 480px) {
  .page-header { font-size: 15px; }
  .card, .card-lg { padding: 16px; }
}