:root{
  --navy:#10284d;
  --navy-deep:#0b1d38;
  --ink:#142033;
  --cream:#eef3f8;
  --paper:#fff;
  --line:#dfe6ef;
  --blue:#234d87;
  --gold:#f4c20d;
  --muted:#5c6a7d;
}

body.aso-fenomeno-nino{
  background:#eef3f8;
  color:var(--ink);
  font-family:Inter,Archivo,Arial,sans-serif;
}

.aso-fenomeno-nino::before{
  opacity:.34;
  background-image:linear-gradient(rgba(35,77,135,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(35,77,135,.045) 1px,transparent 1px);
}

.aso-fenomeno-nino .dashboard{
  max-width:1480px;
  padding:24px;
}

.aso-fenomeno-nino .dashboard-head{display:none!important}

.aso-fenomeno-nino .report-stage,
.aso-fenomeno-nino .report-stage:not(.showing-page){
  grid-template-columns:210px minmax(430px,.9fr) minmax(420px,1.12fr);
  overflow:hidden;
  min-height:calc(100vh - var(--aso-shell-height) - 48px);
  border:1px solid #d8e2ee;
  border-radius:18px;
  background:#fff;
  box-shadow:0 18px 44px rgba(14,40,77,.12);
}

.aso-fenomeno-nino .report-stage.showing-page{
  grid-template-columns:210px minmax(0,1fr);
  min-height:calc(100vh - var(--aso-shell-height) - 48px);
}

.aso-fenomeno-nino .report-stage:not(.showing-page)::before{
  top:20px;
  left:238px;
  color:#2c6bb0;
}

.aso-fenomeno-nino .report-nav{
  position:relative;
  padding:28px 20px;
  background:linear-gradient(160deg,#0b1d38 0%,#102f59 58%,#173c70 100%);
  color:#fff;
}

.aso-fenomeno-nino .report-nav::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:4px;
  background:linear-gradient(90deg,#f4c20d 0 50%,#2c6bb0 50% 75%,#c1121f 75%);
}

.aso-fenomeno-nino .report-nav::after{
  border-color:rgba(255,255,255,.12);
}

.aso-fenomeno-nino .logo-lockup{
  min-height:46px;
  padding:6px 8px;
  border-radius:9px;
  background:#fff;
}

.aso-fenomeno-nino .logo-lockup img{
  display:block;
  width:100%;
  max-height:34px;
  object-fit:contain;
  filter:none;
}

.aso-fenomeno-nino .report-nav h2{
  margin:38px 0 46px;
  color:#fff;
  font-size:23px;
}

.aso-fenomeno-nino .report-nav nav{gap:10px}

.aso-fenomeno-nino .report-nav a{
  min-height:48px;
  padding:9px 8px;
  border:1px solid transparent;
  border-radius:10px;
  color:#dce6f2;
}

.aso-fenomeno-nino .report-nav a:hover{
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.07);
  color:#fff;
}

.aso-fenomeno-nino .report-nav a.active{
  margin-left:0;
  border-color:#fff;
  background:#fff;
  color:#173c70;
  box-shadow:0 9px 22px rgba(4,19,39,.24);
}

.aso-fenomeno-nino .report-content{
  padding:76px 30px 26px;
  background:linear-gradient(145deg,#fff 0%,#f8fbff 100%);
}

.aso-fenomeno-nino .report-content::before{
  background:linear-gradient(90deg,#2c6bb0,#f4c20d);
}

.aso-fenomeno-nino .intro-copy p{border-left-color:#2c6bb0}
.aso-fenomeno-nino .intro-copy strong{color:#234d87}

.aso-fenomeno-nino .page-area{
  padding:28px;
  background:linear-gradient(145deg,#fff 0%,#f4f7fb 100%);
}

.aso-fenomeno-nino .page-area::before{
  height:150px;
  background:radial-gradient(ellipse at 72% 0,rgba(44,107,176,.09),transparent 58%);
}

.aso-fenomeno-nino .module-head{border-bottom-color:#dfe6ef}
.aso-fenomeno-nino .module-head h2{color:#10284d}
.aso-fenomeno-nino .module-head>span{
  border-color:#d6e2ef;
  background:#fff;
  color:#5c6a7d;
  box-shadow:none;
}

.aso-fenomeno-nino .eyebrow{color:#2c6bb0}

.aso-fenomeno-nino .basic-row,
.aso-fenomeno-nino .territory-card,
.aso-fenomeno-nino .panel,
.aso-fenomeno-nino .tracking-card,
.aso-fenomeno-nino .visual-panel,
.aso-fenomeno-nino .alerts-rebuild{
  box-shadow:0 8px 24px rgba(14,40,77,.07);
}

.aso-fenomeno-nino .territory-tabs button.active,
.aso-fenomeno-nino .topic-tabs button.active{
  border-color:#234d87;
  background:#234d87;
}

.aso-fenomeno-nino button:focus-visible,
.aso-fenomeno-nino select:focus-visible,
.aso-fenomeno-nino input:focus-visible,
.aso-fenomeno-nino .report-nav a:focus-visible{
  outline:3px solid #f4c20d;
  outline-offset:2px;
}

.aso-fenomeno-nino .module{scroll-margin-top:calc(var(--aso-shell-height) + 16px)}

@media(max-width:1050px){
  .aso-fenomeno-nino .report-stage,
  .aso-fenomeno-nino .report-stage:not(.showing-page){grid-template-columns:180px minmax(0,1fr)}
  .aso-fenomeno-nino .report-stage.showing-page{grid-template-columns:180px minmax(0,1fr)}
  .aso-fenomeno-nino .report-stage:not(.showing-page)::before{left:208px}
}

@media(max-width:700px){
  .aso-fenomeno-nino .dashboard{padding:12px}
  .aso-fenomeno-nino .report-stage,
  .aso-fenomeno-nino .report-stage:not(.showing-page),
  .aso-fenomeno-nino .report-stage.showing-page{
    display:grid;
    grid-template-columns:1fr;
    min-height:0;
    border-radius:14px;
  }
  .aso-fenomeno-nino .report-nav{padding:18px}
  .aso-fenomeno-nino .logo-lockup{display:none}
  .aso-fenomeno-nino .report-nav h2{margin:5px 0 17px;font-size:18px}
  .aso-fenomeno-nino .report-nav nav{display:flex;gap:8px;overflow-x:auto}
  .aso-fenomeno-nino .report-nav a{flex:0 0 145px;min-height:44px}
  .aso-fenomeno-nino .report-content{padding:29px 19px}
  .aso-fenomeno-nino .page-area{padding:15px}
}