:root {
  --alraa: #14506e;
  --alraa-dark: #0e3a50;
  --bg: #f5f7f9;
}

/* ===================== Site público ===================== */
body.pub { background: var(--bg); }

.pub-header { background: #fff; border-bottom: 1px solid #e3e8ec; }
.pub-brand { display: flex; flex-direction: column; line-height: 1.1; }
.pub-brand-title { font-weight: 700; color: var(--alraa); font-size: 1.15rem; }
.pub-brand-sub { font-size: .72rem; color: #6b7b85; }

.pub-legbar { background: var(--alraa); }
.pub-legbar .text-muted { color: #cfe0ea !important; }
.pub-legbar .badge { font-size: .8rem; padding: .4rem .7rem; }

.pub-footer { background: #fff; border-top: 1px solid #e3e8ec; margin-top: 2rem; }

/* Cartões de deputados */
.dep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.dep-card { background: #fff; border: 1px solid #e3e8ec; border-radius: .6rem; overflow: hidden; transition: box-shadow .15s, transform .15s; }
.dep-card:hover { box-shadow: 0 6px 18px rgba(20,80,110,.12); transform: translateY(-2px); }
.dep-card a { text-decoration: none; color: inherit; display: block; }
.dep-photo { width: 100%; aspect-ratio: 3/4; object-fit: cover; background: #e9eef1; display: flex; align-items: center; justify-content: center; color: #9aa9b2; font-size: 2.5rem; }
.dep-photo img { width: 100%; height: 100%; object-fit: cover; }
.dep-body { padding: .65rem .8rem; }
.dep-name { font-weight: 600; color: var(--alraa); }
.dep-meta { font-size: .8rem; color: #6b7b85; }

/* Perfil */
.perfil-foto { width: 180px; aspect-ratio: 3/4; object-fit: cover; border-radius: .6rem; background: #e9eef1; }
.perfil-campo h6 { color: var(--alraa); margin-top: 1rem; }

/* ===================== Backoffice (sidebar) ===================== */
.layout { display: flex; min-height: 100vh; }
.sidebar { width: 15%; min-width: 150px; background: var(--alraa-dark); color: #dce7ed; display: flex; flex-direction: column; flex-shrink: 0; transition: width .15s ease; }

/* Sidebar colapsado (só ícones) */
.sidebar-toggle { font-size: 1.3rem; color: #44545e; line-height: 1; }
.sidebar-collapsed .sidebar { width: 64px; min-width: 0; }
.sidebar-collapsed .brand-text,
.sidebar-collapsed .nav-text,
.sidebar-collapsed .nav-section,
.sidebar-collapsed .sidebar-footer { display: none; }
.sidebar-collapsed .brand { justify-content: center; padding: 1rem .5rem; }
.sidebar-collapsed .nav-item { justify-content: center; gap: 0; padding: .6rem; }
.sidebar .brand { display: flex; gap: .6rem; align-items: center; padding: 1rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.brand-mark { width: 40px; height: 40px; background: #fff; border-radius: 6px; padding: 3px; }
.brand-title { font-weight: 700; color: #fff; }
.brand-sub { font-size: .72rem; color: #9fc0d2; }
.nav-list { flex: 1; padding: .5rem 0; overflow-y: auto; }
.nav-section { padding: .8rem 1rem .3rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: #7fa6bd; }
.nav-item { display: flex; align-items: center; gap: .6rem; padding: .55rem 1rem; color: #dce7ed; text-decoration: none; }
.nav-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-item.active { background: var(--alraa); color: #fff; border-left: 3px solid #fff; }
.sidebar-footer { padding: .8rem 1rem; border-top: 1px solid rgba(255,255,255,.1); }

.content { flex: 1; display: flex; flex-direction: column; background: var(--bg); min-width: 0; }
.topbar { display: flex; align-items: center; gap: 1rem; padding: .7rem 1.2rem; background: #fff; border-bottom: 1px solid #e3e8ec; }
.topbar-title { font-weight: 600; font-size: 1.1rem; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: .8rem; }
.user-chip { display: flex; align-items: center; gap: .5rem; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--alraa); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: .8rem; }
.user-meta { line-height: 1.1; }
.user-name { font-weight: 600; font-size: .85rem; }
.user-role { font-size: .72rem; color: #6b7b85; }
.page { padding: 1.5rem; }

/* ===================== Responsivo ===================== */
/* Backoffice em telemóvel: barra lateral só com ícones e topbar compacta. */
@media (max-width: 767.98px) {
  .sidebar { width: 56px !important; min-width: 0 !important; }
  .sidebar .brand-text,
  .sidebar .nav-text,
  .sidebar .nav-section,
  .sidebar-footer { display: none; }
  .sidebar .brand { justify-content: center; padding: .8rem .4rem; }
  .sidebar .nav-item { justify-content: center; gap: 0; padding: .6rem; }
  .topbar { padding: .6rem .8rem; gap: .5rem; }
  .topbar-title { font-size: 1rem; }
  .topbar-actions { gap: .5rem; }
  .user-meta { display: none; }   /* poupa espaço no topo */
  .page { padding: 1rem; }
}

/* Site público: em ecrãs pequenos, esconder o subtítulo longo do cabeçalho. */
@media (max-width: 575.98px) {
  .pub-brand-sub { display: none; }
}