/* Integración de todos los asistentes de NextBlog en el scroll del documento.
   La pantalla disponible es un mínimo: preguntas, opciones y campos deciden
   la altura real. No se limita el contenido ni se crea un scroll interior. */
body.nb-resource-page {
  --nb-resource-header-height: var(--base-nav-height, 0px);
  height: auto;
  max-height: none;
  /* clip recorta las bandas a 100vw (con barra de scroll clásica son más anchas
     que la ventana) sin crear un contenedor de scroll que suelte la barra sticky. */
  overflow-x: clip;
  overflow-y: visible;
}

/* Los !important de la capa prevalecen sobre el firewall del embed, sin copiar
   sus IDs ni aumentar la especificidad en cada web. El gráfico SVG de respaldo
   no puede superponerse al anillo CSS (el círculo negro/doble de los informes). */
@layer nb-resource-report {
  .checklist-score-ring svg,
  .checklist-block-summary-chart svg { display: none !important; }

  .checklist-score-ring,
  .checklist-block-summary-chart { box-shadow: none !important; }
  .checklist-score-ring::after,
  .checklist-block-summary-chart::after {
    background: var(--checklist-bg, #fff) !important;
    box-shadow: none !important;
  }

  .thank-you-shell[data-thankyou-mode="checklist"] {
    min-height: 0 !important;
    padding-block: clamp(24px, 4vw, 48px) !important;
  }
  .thank-you-shell[data-thankyou-mode="checklist"] .thank-you-card {
    width: min(1180px, calc(100% - 40px)) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  .checklist-result-card {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: clamp(20px, 3vw, 36px) !important;
    background: var(--checklist-bg, #fff) !important;
    border: 1px solid color-mix(in srgb, currentColor 14%, transparent) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }
  .checklist-result-hero {
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 24px !important;
    align-items: center !important;
  }
  .checklist-result-title { font-size: clamp(1.55rem, 2.4vw, 2rem) !important; line-height: 1.25 !important; }
  .checklist-result-priority { white-space: normal !important; border-radius: 12px !important; }
  .checklist-result-panel { min-width: 0 !important; padding: 24px 0 !important; background: transparent !important; box-shadow: none !important; }
  .checklist-result-panel--charts .checklist-block-chart-list {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)) !important;
    gap: 16px !important;
    align-items: stretch !important;
  }
  .checklist-block-chart-item { min-width: 0 !important; padding: 20px 12px !important; box-shadow: none !important; }
  .checklist-block-chart-top { height: 100% !important; justify-content: start !important; }
  .checklist-block-chart-title { min-height: 2.7em !important; margin: 0 !important; overflow-wrap: anywhere !important; }
  .checklist-block-summary-chart { width: 88px !important; height: 88px !important; flex-basis: 88px !important; }
  .checklist-block-summary-chart-value { font-size: 1.55rem !important; }
  .checklist-block-state-row { margin-top: auto !important; }

  @media (max-width: 600px) {
    .checklist-result-hero { grid-template-columns: minmax(0, 1fr) !important; text-align: left !important; }
    .checklist-score-ring { margin-inline: 0 !important; }
    .checklist-result-priority { justify-self: start !important; }
    .checklist-result-stats,
    .checklist-state-summary { grid-template-columns: minmax(0, 1fr) !important; }
    .checklist-result-card { padding: 20px 16px !important; }
    .checklist-block-answer-main { grid-template-columns: minmax(0, 1fr) !important; }
  }
}

.nb-resource-actions {
  display: flex;
  justify-content: flex-end;
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto 20px;
}
.thank-you-shell:not(.results-ready) .nb-resource-actions { display: none; }
.nb-resource-restart {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid currentColor;
  border-radius: 10px;
  color: var(--landing-accent, currentColor);
  background: var(--landing-bg, #fff);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.nb-resource-restart:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* Una sola recomendación conserva el tamaño de tarjeta de NextBlog: auto-fit
   con 1fr la estiraba a todo el informe y convertía la miniatura en un hero. */
@layer nb-resource-related {
  .thank-you-shell .thank-you-related-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 320px)) !important;
    gap: 12px !important;
    justify-content: start !important;
    align-items: start !important;
  }
  .thank-you-shell .thank-you-related-card {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 320px !important;
    min-width: 0 !important;
  }
  .thank-you-shell .thank-you-related-media {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
  }
  .thank-you-shell .thank-you-related-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* Las reglas importantes de esta capa también resisten el aislamiento CSS
   de WordPress y del renderizador, sin depender de la especificidad del host. */
@layer nb-resource-layout {
/* overflow-x:hidden convierte overflow-y:visible en auto: crea otro contenedor
   de scroll y hace que la barra sticky se ancle al embed en vez de la ventana.
   Así quedaba atravesada entre el número de bloque y su título. */
body.nb-resource-page :is(#nextblogLandingEmbed, [data-nb-resource-root]) {
  overflow: visible !important;
}
html:has(body.nb-resource-framed),
body.nb-resource-framed,
body.nb-resource-framed #landingContentWrapper {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}
body.nb-resource-framed .thank-you-shell { min-height: 0 !important; }
body.nb-resource-page :is(.checklist-fullscreen, .diagnostic-fullscreen, .nbi-stage) {
  position: relative !important;
  inset: auto !important;
  height: auto !important;
  min-height: max(0px, calc(100vh - var(--nb-resource-header-height))) !important;
  min-height: max(0px, calc(var(--nb-resource-viewport-height, 100svh) - var(--nb-resource-header-height))) !important;
  max-height: none !important;
  overflow: visible !important;
}

body.nb-resource-page :is(.checklist-body, .diagnostic-body, .nbi-body) {
  flex: 1 0 auto !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  padding-block: clamp(28px, 5svh, 56px) !important;
}

/* Con altura libre, estos pasos nunca se contraen ni se centran por encima de
   la zona visible. Los saltos de línea también admiten palabras o URLs largas. */
body.nb-resource-page :is(.checklist-step, .diagnostic-step, .nbi-step) {
  flex-shrink: 0;
  min-width: 0;
  max-height: none;
  overflow-wrap: anywhere;
}

/* La barra de progreso acompaña a la pregunta bajo el menú de la web, si el menú se queda
   arriba; si se va con el scroll, al borde (resource_runtime.js, --nb-resource-sticky-top). */
body.nb-resource-page :is(.checklist-header, .diagnostic-header, .nbi-header) {
  position: sticky !important;
  inset: auto !important;
  top: var(--nb-resource-sticky-top, var(--nb-resource-header-height)) !important;
  flex: 0 0 auto;
  z-index: 10;
}

/* Las flechas ocupan su propio espacio. Ni un pie fijo ni uno superpuesto
   pueden tapar la última opción, el botón de continuar o los campos de contacto. */
body.nb-resource-page :is(.checklist-footer, .diagnostic-footer, .nbi-footer) {
  position: relative !important;
  inset: auto !important;
  flex: 0 0 auto;
  height: auto;
  max-height: none;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}

@media (min-width: 821px) {
  body.nb-resource-page .nbi-stage[data-nbi-layout="panel"]:not([data-nbi-show-result="1"]) .nbi-footer {
    margin-left: 38%;
  }
}
}