.app{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:248px 1fr;
  min-height:100vh;
}

/* ---------- Sidebar ---------- */
.sidebar{
  background:linear-gradient(180deg, rgba(13,20,32,0.92), rgba(8,12,19,0.94));
  border-right:1px solid var(--border);
  padding:22px 16px 18px;
  display:flex;
  flex-direction:column;
  gap:4px;
  position:sticky;
  top:0;
  height:100vh;
  backdrop-filter:blur(16px);
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:4px 8px;
  margin-bottom:22px;
}
.brand-mark{
  width:36px;height:36px;border-radius:10px;
  background:var(--gradient-brand);
  display:flex;align-items:center;justify-content:center;
  color:#04120e;
  box-shadow:0 6px 18px rgba(22,200,164,0.35);
}
.brand-name{
  font-family:var(--font-head);
  font-size:19px;
  font-weight:700;
  letter-spacing:0.3px;
}
.nav{display:flex;flex-direction:column;gap:3px;}
.navitem{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 12px;
  border-radius:10px;
  cursor:pointer;
  color:var(--text-dim);
  font-size:14.5px;
  font-weight:500;
  border:1px solid transparent;
  background:none;
  text-align:left;
  width:100%;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.navitem .ic{width:19px;height:19px;flex:none;}
.navitem:hover{color:var(--text);background:var(--glass);}
.navitem.active{
  color:var(--text);
  background:var(--glass-strong);
  border-color:var(--border-strong);
  position:relative;
}
.navitem.active::before{
  content:"";
  position:absolute;
  left:-16px;top:8px;bottom:8px;width:3px;border-radius:3px;
  background:var(--gradient-brand);
}
.navitem.active .ic{color:var(--accent);}
.sidebar .spacer{flex:1;}
.reportbtn{
  margin-top:14px;
  background:linear-gradient(135deg, var(--risk-high), #c0233f);
  color:#fff0f2;
  font-weight:600;
  border:none;
  border-radius:11px;
  padding:12px;
  font-size:13.5px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  box-shadow:0 10px 24px rgba(244,63,94,0.25);
  transition:transform .15s ease, box-shadow .15s ease;
}
.reportbtn:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(244,63,94,0.32);}
.sidebar-legal{
  font-size:11px;
  color:var(--text-faint);
  line-height:1.5;
  margin:14px 4px 0;
}

/* ---------- Main ---------- */
.main{display:flex;flex-direction:column;min-height:100vh;}
.topbar{
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px 28px;
  border-bottom:1px solid var(--border);
  background:rgba(8,12,19,0.55);
  backdrop-filter:blur(14px);
  position:sticky;
  top:0;
  z-index:5;
}
.searchbox{
  flex:1;
  max-width:520px;
  display:flex;
  align-items:center;
  gap:9px;
  background:var(--glass);
  border:1px solid var(--border);
  border-radius:999px;
  padding:10px 16px;
  color:var(--text-dim);
  transition:border-color .15s ease;
}
.searchbox:focus-within{border-color:var(--border-strong);}
.searchbox .ic{width:16px;height:16px;flex:none;}
.searchbox input{
  background:none;border:none;outline:none;color:var(--text);
  font-family:var(--font-body);font-size:14px;width:100%;
}
.topbar .spacer{flex:1;}
.content{padding:28px 32px 20px;flex:1;}
.view{display:none;}
.view.active{display:block;animation:viewfade .25s ease;}
@keyframes viewfade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

.viewhead{margin-bottom:22px;}
.viewhead h1{font-size:23px;margin-bottom:5px;letter-spacing:0.1px;}
.viewhead p{color:var(--text-dim);font-size:14px;}

.layout-2col{display:grid;grid-template-columns:1fr 300px;gap:22px;align-items:start;}
/*
  Variante para "Mapa de alertas por país": el panel derecho necesita más
  ancho que el genérico de 300px (usado para asides de tips), porque aquí
  muestra una ficha de estadísticas completa o un resumen global, no una
  lista corta de puntos.
*/
.layout-2col.paiseslayout{grid-template-columns:1fr 360px;}
.stack{display:flex;flex-direction:column;gap:16px;}

.pagefoot{
  text-align:center;
  color:var(--text-faint);
  font-size:12px;
  padding:30px 10px 6px;
  line-height:1.7;
}
.pagefoot-legal{max-width:560px;margin:4px auto 0;color:var(--text-faint);}