/* ============================================================
   Pestaña "ROAS mínimo". Fondo blanco como el resto de la
   aplicación; el color solo se usa para separar lo que compra
   cliente nuevo de lo que no, y para marcar lo que falla.
   ============================================================ */

#sec-roas .sub {
  margin: 26px 0 10px;
  font-size: 15px;
  font-weight: 650;
  color: #0f172a;
  letter-spacing: -.01em;
}

/* ── Bloque de supuestos ───────────────────────────────────── */
.rm-sup {
  border: 1px solid #e3e8ef;
  border-top: 3px solid #7c5cff;
  border-radius: 12px;
  padding: 16px 18px 14px;
  background: #fff;
}
.rm-sup-t {
  font-size: 14px;
  font-weight: 650;
  color: #0f172a;
  margin-bottom: 12px;
}
.rm-sup-t span {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.55;
  color: #5b6577;
}
.rm-sup-t b { color: #0f172a; font-weight: 650; }

.rm-incs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 8px 22px;
}
.rm-inc {
  display: grid;
  grid-template-columns: 1fr 108px 44px;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid #f2f4f8;
}
.rm-inc-l { font-size: 12.5px; color: #38414f; }
.rm-inc input[type=range] { width: 108px; accent-color: #7c5cff; cursor: pointer; }
.rm-inc output {
  font-size: 12.5px;
  font-weight: 650;
  color: #0f172a;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.rm-sup-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid #eef1f6;
}
.rm-chk { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #38414f; cursor: pointer; }
.rm-chk input { accent-color: #7c5cff; }

.rm-medir {
  margin: 12px 0 0;
  padding: 10px 12px;
  background: #f8f9fc;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.6;
  color: #5b6577;
}
.rm-medir b { color: #0f172a; }

/* ── Tablas ────────────────────────────────────────────────── */
.rmtabla {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
}
.rmtabla th,
.rmtabla td {
  padding: 9px 11px;
  border-bottom: 1px solid #eef1f6;
  text-align: left;
  vertical-align: middle;
}
.rmtabla thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fbfcfe;
  border-bottom: 1px solid #e3e8ef;
  font-size: 11.5px;
  font-weight: 650;
  color: #38414f;
  line-height: 1.35;
  cursor: help;
}
.rmtabla .r { text-align: right; font-variant-numeric: tabular-nums; }
.rmtabla tbody tr:last-child td { border-bottom: 0; }
.rmtabla tbody tr:hover td { background: #fcfcfe; }

.rm-th-sub {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 400;
  color: #8b93a3;
  text-transform: none;
}

.rmtabla td.rm-m, .rmtabla th.rm-m { text-align: left; min-width: 170px; }
.rm-m b { font-size: 13px; color: #0f172a; }
.rm-m-sub {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: #8b93a3;
  font-variant-numeric: tabular-nums;
}

/* La columna que compra cliente nuevo va marcada: es la que puede
   pagar más porque cuenta con que el cliente vuelve. */
.rmtabla .rm-cap { background: #f4fbf7; }
.rmtabla thead th.rm-cap { background: #eef9f3; }

.rm-v { cursor: help; }
.rm-num { font-size: 14px; font-weight: 650; color: #0f172a; }
.rm-base {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  color: #98a0af;
  font-weight: 400;
}
.rm-warn { color: #b45309; cursor: help; }

.rmtabla.eco .rm-num { font-size: 13px; }

/* ── Contraste con las campañas reales ─────────────────────── */
.rm-contr { margin-top: 28px; }
.rm-alerta, .rm-ok {
  margin: 0 0 12px;
  padding: 10px 13px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.55;
}
.rm-alerta { background: #fff5f5; border: 1px solid #fbdcdc; color: #7f1d1d; }
.rm-alerta b { color: #991b1b; }
.rm-ok { background: #f2fbf6; border: 1px solid #d4eee0; color: #14532d; }

.rmtabla.contr .rm-tipo { color: #5b6577; font-size: 11.5px; }
.rmtabla.contr tr.rm-mal td { background: #fffbfb; }
.rmtabla.contr tr.rm-mal:hover td { background: #fff6f6; }
.rm-dif { font-weight: 650; }
.rm-dif .ok { color: #15803d; }
.rm-dif .bad { color: #b91c1c; }

/* ── Cómo se lee ───────────────────────────────────────────── */
.rm-leer { margin-top: 30px; }
.rm-leer h3 {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 650;
  color: #0f172a;
}
.rm-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 12px;
}
.rm-card {
  border: 1px solid #e3e8ef;
  border-left: 3px solid #22d3ee;
  border-radius: 10px;
  padding: 13px 15px;
  background: #fff;
}
.rm-card h4 {
  margin: 0 0 6px;
  font-size: 12.5px;
  font-weight: 650;
  color: #0f172a;
}
.rm-card p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.62;
  color: #5b6577;
}
.rm-card b { color: #0f172a; font-weight: 600; }

.rm-vacio {
  padding: 20px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 10px;
  font-size: 13px;
  color: #78350f;
}
.rm-vacio code { background: #fff; padding: 1px 5px; border-radius: 4px; font-size: 12px; }

#sec-roas .hint code {
  background: #f4f6fa;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11.5px;
}