/* Manuais de produto (ex. SmartRecycle) — isolado do tema do Core */

.sr-manual-wrap {
  --sr-blue: #1769e0;
  --sr-blue-dark: #0d4fae;
  --sr-blue-soft: #edf4ff;
  --sr-ink: #101828;
  --sr-text: #344054;
  --sr-muted: #667085;
  --sr-border: #e4e7ec;
  --sr-surface: #ffffff;
  --sr-soft: #f8fafc;
  --sr-green: #087443;
  --sr-green-soft: #ecfdf3;
  --sr-amber: #946200;
  --sr-amber-soft: #fffaeb;
  --sr-red: #b42318;
  --sr-red-soft: #fef3f2;

  width: 100% !important;
  max-width: 1050px !important;
  margin: 0 auto !important;
  padding: 8px 0 30px !important;
  color: var(--sr-text) !important;
  font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.72 !important;
  letter-spacing: normal !important;
}

.sr-manual-wrap *,
.sr-manual-wrap *::before,
.sr-manual-wrap *::after {
  box-sizing: border-box !important;
  font-family: inherit !important;
}

.sr-manual-wrap .section {
  position: relative !important;
  overflow: hidden !important;
  background: var(--sr-surface) !important;
  border: 1px solid rgba(16, 24, 40, .07) !important;
  border-radius: 22px !important;
  box-shadow:
    0 1px 2px rgba(16, 24, 40, .03),
    0 10px 34px rgba(16, 24, 40, .075) !important;
  padding: 36px 40px 38px !important;
  margin: 0 0 28px !important;
}

.sr-manual-wrap .section::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 4px !important;
  background: linear-gradient(90deg, var(--sr-blue), #63a0ff) !important;
}

.sr-manual-wrap .section-kicker {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  margin: 0 0 13px !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  background: var(--sr-blue-soft) !important;
  color: var(--sr-blue-dark) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .11em !important;
}

.sr-manual-wrap .section h2 {
  margin: 0 0 18px !important;
  padding: 0 !important;
  border: 0 !important;
  color: var(--sr-ink) !important;
  font-size: clamp(27px, 3vw, 34px) !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  letter-spacing: -.035em !important;
}

.sr-manual-wrap .section h3 {
  margin: 32px 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
  color: var(--sr-ink) !important;
  font-size: 21px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  letter-spacing: -.015em !important;
}

.sr-manual-wrap .section h4 {
  color: var(--sr-ink) !important;
  font-weight: 700 !important;
}

.sr-manual-wrap p {
  margin: 0 0 16px !important;
  color: var(--sr-text) !important;
  font-size: 16px !important;
  line-height: 1.72 !important;
}

.sr-manual-wrap strong {
  color: var(--sr-ink) !important;
  font-weight: 700 !important;
}

.sr-manual-wrap em {
  font-style: italic !important;
}

.sr-manual-wrap a {
  color: var(--sr-blue) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

.sr-manual-wrap a:hover {
  text-decoration: underline !important;
}

.sr-manual-wrap code {
  display: inline-block !important;
  background: #eef2f6 !important;
  border: 1px solid #e1e6ed !important;
  color: #27364b !important;
  padding: 2px 7px !important;
  border-radius: 7px !important;
  font-family: Consolas, "SFMono-Regular", "Liberation Mono", monospace !important;
  font-size: .92em !important;
}

.sr-manual-wrap .requirements {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin: 22px 0 0 !important;
}

.sr-manual-wrap .req {
  position: relative !important;
  min-height: 112px !important;
  background: linear-gradient(180deg, #fbfcfe 0%, #f7f9fc 100%) !important;
  border: 1px solid var(--sr-border) !important;
  border-radius: 16px !important;
  padding: 20px 18px !important;
  box-shadow: 0 2px 8px rgba(16, 24, 40, .025) !important;
}

.sr-manual-wrap .req::before {
  content: "" !important;
  display: block !important;
  width: 28px !important;
  height: 4px !important;
  margin-bottom: 14px !important;
  border-radius: 99px !important;
  background: var(--sr-blue) !important;
}

.sr-manual-wrap .req strong {
  display: block !important;
  margin: 0 0 6px !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
}

.sr-manual-wrap .req span {
  color: var(--sr-muted) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.sr-manual-wrap .callout {
  position: relative !important;
  margin: 22px 0 !important;
  padding: 20px 22px 20px 58px !important;
  border-radius: 16px !important;
  border: 1px solid transparent !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}

.sr-manual-wrap .callout::before {
  position: absolute !important;
  left: 18px !important;
  top: 19px !important;
  width: 27px !important;
  height: 27px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

.sr-manual-wrap .callout strong {
  display: block !important;
  margin: 0 0 5px !important;
  font-size: 15px !important;
}

.sr-manual-wrap .callout.info {
  background: linear-gradient(135deg, #edf4ff 0%, #e8f1ff 100%) !important;
  border-color: #c8dcff !important;
}

.sr-manual-wrap .callout.info::before {
  content: "i" !important;
  color: #fff !important;
  background: var(--sr-blue) !important;
}

.sr-manual-wrap .callout.ok {
  background: var(--sr-green-soft) !important;
  border-color: #b7e4cb !important;
}

.sr-manual-wrap .callout.ok::before {
  content: "✓" !important;
  color: #fff !important;
  background: var(--sr-green) !important;
}

.sr-manual-wrap .callout.warn {
  background: var(--sr-amber-soft) !important;
  border-color: #f1d78b !important;
}

.sr-manual-wrap .callout.warn::before {
  content: "!" !important;
  color: #fff !important;
  background: #d89b00 !important;
}

.sr-manual-wrap .callout.danger {
  background: var(--sr-red-soft) !important;
  border-color: #f1b9b4 !important;
}

.sr-manual-wrap .callout.danger::before {
  content: "!" !important;
  color: #fff !important;
  background: var(--sr-red) !important;
}

.sr-manual-wrap .steps {
  counter-reset: sr-step !important;
  list-style: none !important;
  margin: 22px 0 6px !important;
  padding: 0 !important;
}

.sr-manual-wrap .steps li {
  counter-increment: sr-step !important;
  position: relative !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 3px 0 23px 52px !important;
  color: var(--sr-text) !important;
  font-size: 15px !important;
  line-height: 1.62 !important;
  list-style: none !important;
}

.sr-manual-wrap .steps li::before {
  content: counter(sr-step) !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 34px !important;
  height: 34px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 11px !important;
  background: linear-gradient(135deg, var(--sr-blue), #4c91f6) !important;
  color: #fff !important;
  box-shadow: 0 6px 14px rgba(23, 105, 224, .2) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.sr-manual-wrap .steps .manual-image,
.sr-manual-wrap .steps .code-box {
  margin-top: 12px !important;
}

.sr-manual-wrap .figure-card {
  margin: 26px 0 !important;
  padding: 14px !important;
  background: #f8fafc !important;
  border: 1px solid var(--sr-border) !important;
  border-radius: 18px !important;
  box-shadow: 0 6px 20px rgba(16, 24, 40, .04) !important;
  overflow: hidden !important;
}

.sr-manual-wrap .manual-image {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: none !important;
  cursor: zoom-in;
}

.sr-manual-wrap .figure-card figcaption {
  margin: 11px 4px 1px !important;
  color: var(--sr-muted) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  text-align: center !important;
}

.sr-manual-wrap .config-table {
  width: 100% !important;
  margin: 22px 0 10px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 1px solid var(--sr-border) !important;
  border-radius: 16px !important;
  font-size: 14px !important;
  box-shadow: 0 4px 14px rgba(16, 24, 40, .035) !important;
}

.sr-manual-wrap .config-table thead th {
  background: #f2f6fb !important;
  color: #344054 !important;
  font-weight: 700 !important;
}

.sr-manual-wrap .config-table th,
.sr-manual-wrap .config-table td {
  padding: 14px 16px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--sr-border) !important;
  text-align: left !important;
  vertical-align: top !important;
  line-height: 1.55 !important;
}

.sr-manual-wrap .config-table tbody tr:last-child td {
  border-bottom: 0 !important;
}

.sr-manual-wrap .config-table tbody tr:hover td {
  background: #fbfdff !important;
}

.sr-manual-wrap .config-table td:first-child {
  width: 31% !important;
  color: var(--sr-ink) !important;
  font-weight: 700 !important;
}

.sr-manual-wrap .two-col {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin: 20px 0 6px !important;
}

.sr-manual-wrap .mini-card {
  position: relative !important;
  background: linear-gradient(180deg, #fbfcfe 0%, #f7f9fc 100%) !important;
  border: 1px solid var(--sr-border) !important;
  border-radius: 17px !important;
  padding: 20px !important;
  box-shadow: 0 3px 12px rgba(16, 24, 40, .035) !important;
}

.sr-manual-wrap .mini-card::before {
  content: "" !important;
  display: block !important;
  width: 34px !important;
  height: 4px !important;
  margin-bottom: 14px !important;
  border-radius: 99px !important;
  background: linear-gradient(90deg, var(--sr-blue), #63a0ff) !important;
}

.sr-manual-wrap .mini-card h4 {
  margin: 0 0 8px !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
}

.sr-manual-wrap .mini-card p {
  margin: 0 !important;
  color: var(--sr-muted) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.sr-manual-wrap .checklist {
  list-style: none !important;
  padding: 0 !important;
  margin: 18px 0 0 !important;
  border: 1px solid var(--sr-border) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

.sr-manual-wrap .checklist li {
  position: relative !important;
  margin: 0 !important;
  padding: 13px 16px 13px 48px !important;
  border-bottom: 1px solid var(--sr-border) !important;
  background: #fff !important;
  color: var(--sr-text) !important;
  line-height: 1.5 !important;
  list-style: none !important;
}

.sr-manual-wrap .checklist li:last-child {
  border-bottom: 0 !important;
}

.sr-manual-wrap .checklist li::before {
  content: "✓" !important;
  position: absolute !important;
  left: 16px !important;
  top: 13px !important;
  width: 22px !important;
  height: 22px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: var(--sr-green-soft) !important;
  color: var(--sr-green) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.sr-manual-wrap .code-box {
  margin: 18px 0 22px !important;
  padding: 16px 18px !important;
  overflow-x: auto !important;
  border: 1px solid rgba(255, 255, 255, .06) !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #101828, #1d2939) !important;
  color: #f8fafc !important;
  box-shadow: 0 8px 20px rgba(16, 24, 40, .12) !important;
  font-family: Consolas, "SFMono-Regular", monospace !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

.sr-manual-wrap ul:not(.checklist),
.sr-manual-wrap ol:not(.steps) {
  margin: 14px 0 18px !important;
  padding-left: 24px !important;
}

.sr-manual-wrap ul:not(.checklist) li,
.sr-manual-wrap ol:not(.steps) li {
  margin: 7px 0 !important;
  color: var(--sr-text) !important;
  line-height: 1.6 !important;
}

@media (max-width: 760px) {
  .sr-manual-wrap {
    padding: 4px 0 20px !important;
    font-size: 15px !important;
  }

  .sr-manual-wrap .section {
    padding: 27px 22px 28px !important;
    border-radius: 18px !important;
    margin-bottom: 20px !important;
  }

  .sr-manual-wrap .section h2 {
    font-size: 27px !important;
  }

  .sr-manual-wrap .requirements,
  .sr-manual-wrap .two-col {
    grid-template-columns: 1fr !important;
  }

  .sr-manual-wrap .config-table {
    display: block !important;
    overflow-x: auto !important;
  }

  .sr-manual-wrap .config-table th,
  .sr-manual-wrap .config-table td {
    min-width: 170px !important;
  }

  .sr-manual-wrap .callout {
    padding-left: 54px !important;
  }
}