:root{
  --card-bg:#f8f8f8; --card-bd:#dcdcdc; --muted:#5b5b5b;
  --green:#1b8a3b; --red:#b00020;
}

/* =============== Base anti-desbordes y tipografía =============== */
html, body{
  width:100%;
  max-width:100vw;
  overflow-x:hidden;
  margin:0;
  padding:0;
  box-sizing:border-box;
}
*,*::before,*::after{ box-sizing:inherit; }

body{
  background:#f4f5f6;
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  color:#222;
  line-height:1.35;
}

/* Medios escalables dentro del panel */
img, canvas, svg, video{ max-width:100%; height:auto; display:block; }

/* =============== Wrapper principal =============== */
/* Con ancho controlado para conservar el “look” ancho original */
.ci-wrap{
  max-width: 1400px;             /* <- ancho de trabajo como antes */
  margin:0 auto;
  padding:24px 28px 80px;
}

/* Título y fórmula */
h1{ font-size:2.1rem; margin:0 0 6px; font-weight:700; }
.formula{ margin-bottom:8px; color:#333; }

/* Toggle */
.info-toggle{ display:inline-flex; align-items:center; gap:8px; font-weight:600; color:#223; margin:8px 0 14px 6px; }
.info-toggle input[type="checkbox"]{ accent-color:#007bff; width:16px; height:16px; }
.info-toggle span{ cursor:pointer; user-select:none; font-size:.95rem; color:#222; }

/* =================== Info grid (cajas pequeñas) =================== */
.info-grid{
  display:grid;
  gap:14px;
  grid-template-columns:1fr;
  margin-bottom:16px;
}
@media (min-width: 900px){ .info-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width: 1300px){ .info-grid{ grid-template-columns:1fr 1fr 1fr; } }

.ibox{
  background:#f7f7f7;
  border:1px solid #ddd;
  border-radius:6px;
  font-size:.95rem;
  padding:12px 14px;
  color:#2a2a2a;
  min-width:0;
}
.ibox-title{ font-weight:600; margin:0 0 6px; }
.ibox ul{ margin:6px 0 0 18px; padding:0; }

/* =================== Main grid =================== */
/* Mantiene tarjetas anchas. No se “aprietan”: min 420px por panel. */
.grid{
  display:grid;
  gap:32px;
  grid-template-columns:1fr;                  /* móvil / zoom muy alto */
  align-items:start;
  justify-content:center;                     /* centra cuando hay 1 o 2 cols */
}
@media (min-width: 980px){
  .grid{ grid-template-columns: repeat(2, minmax(420px, 1fr)); }
}
@media (min-width: 1320px){
  .grid{ grid-template-columns: repeat(3, minmax(420px, 1fr)); }
}

.col{ display:flex; flex-direction:column; gap:28px; min-width:0; }

/* =================== Cards =================== */
.card{
  background:#fff;
  border:1px solid #d8d8d8;
  border-radius:6px;
  box-shadow:none;
  padding:22px 26px;               /* padding normal, no reducido */
  min-width:0;
}
.card-tall{ min-height:390px; }
.card-tall.small{ min-height:160px; }
.card-title{ font-weight:600; margin-bottom:12px; font-size:1.05rem; }
.bold{ font-weight:700; }

/* =================== Labels + badges =================== */
.lbl{ font-weight:600; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.lbl-wide span:first-child{ flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.badge{
  background:#fff; border:1px solid #ddd; border-radius:7px;
  padding:3px 10px; min-width:55px; text-align:center; font-weight:700;
}

/* =================== Sliders / noUi =================== */
.slider{ margin:14px 0 32px; }
.noUi-connect{ background:#4a90e2 !important; }
.noUi-handle{ border-color:#4a90e2 !important; box-shadow:none; }
.noUi-pips{ margin-top:6px; }
.noUi-value{ font-size:11px; color:#666; }
.noUi-tooltip{
  font-size:.8rem;
  bottom:auto !important; top:120% !important; left:50% !important;
  transform:translate(-50%,4px) !important;
  background:#fff; border:1px solid #ccc; color:#222; padding:2px 6px;
  border-radius:4px; box-shadow:0 1px 2px rgba(0,0,0,.15); z-index:5;
}
input[type="range"]{ width:100%; max-width:100%; }

/* =================== Lists / messages =================== */
.bullets{ margin:8px 0 0 22px; padding:0; }
.bullets li{ margin:6px 0; }
.warn{ display:none; margin-top:14px; color:var(--red); font-weight:700; }

/* =================== Equations / rows =================== */
.hr{ height:1px; background:#ddd; margin:18px 0; }
.eqrow{
  display:grid;
  grid-template-columns:auto minmax(72px, 140px);
  align-items:baseline;
  gap:10px;
  margin-top:12px;
}
.eq{ color:#222; }
.val{ font-weight:700; overflow-wrap:anywhere; }
.meta{ margin-top:8px; color:#222; }
.meta.top-z{ text-align:right; margin-top:-4px; margin-bottom:6px; font-size:1rem; color:#333; }

/* =================== Plots =================== */
.plot-lg{ height:300px; margin-top:10px; }
.plot-tall{ height:190px; margin-bottom:18px; }
/* contenedores fluidos */
.plot, .plot-area, .figure, .chart, .gaussian, #bell-curve{ max-width:100%; }

/* =================== Ajustes extra =================== */
@media (max-width: 700px){
  .ci-wrap{ padding:18px 16px 60px; }
  .card{ padding:18px; }
  .plot-lg{ height:260px; }
}

/* Evitar cortes de textos largos en títulos/labels durante zoom */
h1, h2, h3, p, .text, .label{ overflow-wrap:anywhere; }