/* ================= BASE ================= */

.rp-wrap{
  background:#03070e;
  color:#fff;
  padding:0;
  font-family:Montserrat;
}

/* ================= GRID DESKTOP ================= */

.rp-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:16px;
  padding:16px;
}

/* ================= HEADER ================= */

.rp-top{
  display:flex;
  justify-content:space-between;
  margin-bottom:20px;
  padding:0 16px;
}

.rp-status{
  font-size:14px;
  color:#4fd8ff;
  display:flex;
  align-items:center;
  gap:6px;
}

.rp-badges span{
  margin-left:10px;
  background:#0a2a3a;
  padding:6px 10px;
  border-radius:20px;
}

/* ================= CARDS ================= */

.rp-card{
  background:#08121c;
  border-radius:18px;
  padding:16px;
  box-shadow:
    0 10px 30px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.03);
}

/* CARD GRANDE */

.rp-card.big{
  position:relative;
}

.rp-card.big::after{
  content:"Live";
  position:absolute;
  top:12px;
  right:14px;
  font-size:9px;
  color:#4fd8ff;
  opacity:0.7;
}

.rp-card.big .rp-title{
  padding-right:40px;
}

/* ================= TEXTOS ================= */

.rp-title{
  font-size:13px;
  opacity:.6;
  margin-bottom:10px;
}

.rp-main{
  font-size:52px;
  font-weight:700;
  
  margin: 10px 0 16px;
  line-height:1;

}

.rp-card.big .rp-title{
  margin-bottom:6px;
}



.rp-note{
  font-size:13px;
  color:rgba(255,255,255,0.6);
  margin-bottom:12px;
  line-height:1.4;
}

/* ================= KPIs ================= */

.rp-kpis{
  display:flex;
  gap:10px;
}

.rp-kpis div{
  flex:1;
  background:rgba(255,255,255,0.03);
  padding:12px;
  border-radius:10px;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

.rp-kpis b{
  font-size:14px;
  white-space:nowrap;
}

.rp-kpis span{
  font-size:10px;
  opacity:0.6;
}

/* ================= MAPA ================= */

#rpMap{
  height:260px;
  border-radius:12px;
}

/* ================= EVENTOS ================= */

#rpTicker{
  display:flex;
  flex-direction:column;
  gap:8px;
}

#rpTicker div{
  background:rgba(255,255,255,0.03);
  padding:10px;
  border-radius:10px;
  font-size:12px;
}

/* ================= MOBILE ================= */

@media (max-width:768px){

  /* 👉 limpiar Betheme */
  .section_wrapper,
  .content_wrapper,
  .mcb-wrap-inner,
  .column,
  .column_wrap,
  .mcb-column-inner{
    padding:0 !important;
    max-width:100% !important;
  }

  /* 👉 layout vertical limpio */
  .rp-grid{
    display:flex;
    flex-direction:column;
    gap:14px;
    padding:12px;
  }

  /* 👉 orden lógico */
  .rp-nodes-panel{ order:1; }
  .rp-card.big{ order:2; }
  .rp-line-panel{ order:3; }
  .ticker{ order:4; }

  /* 👉 header */
  .rp-top{
    flex-direction:column;
    gap:10px;
    padding:0 12px;
  }

  /* 👉 cards */
  .rp-card{
    width:100%;
  }

  /* 👉 KPIs */
  .rp-kpis{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
  }

  /* 👉 mapa */
  #rpMap{
    height:200px !important;
  }

}