/**
 * Diseño Compacto — extras por sección (full-bleed + headers centrados).
 * Activo solo con body.manto-layout-ceba-bleed. Default OFF = Clásico.
 *
 * Rollout: Animales (Leche+Ceba) → resto sección a sección.
 * El bulk del ensayo Ceba vive en carne/pesaje/partos-mejora-visual.css (ENSAYO).
 */

/* ══════════════════════════════════════════════════════════════
   ANIMALES (#pg-ani) — Leche + Ceba
   Lista/Mosaico vive en .ani-serio-hint-row (como Partos).
   ══════════════════════════════════════════════════════════════ */

html body.manto-layout-ceba-bleed #pg-ani.mejora-visual,
html body.light.manto-layout-ceba-bleed #pg-ani.mejora-visual {
  padding-top: calc(48px + env(safe-area-inset-top, 0px)) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: #ffffff !important;
}

html body.manto-layout-ceba-bleed #pg-ani.mejora-visual > .section,
html body.manto-layout-ceba-bleed #pg-ani.mejora-visual > .section > .section-body,
html body.manto-layout-ceba-bleed #pg-ani.mejora-visual > .section > .section-body > .section-content {
  gap: 0 !important;
  row-gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.manto-layout-ceba-bleed #pg-ani.mejora-visual :is(
  .ani-serio-panel,
  .section-header.ani-serio-panel
) {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: 1px solid var(--mv-line-strong, #64748b) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

/* Header de bloque: solo título centrado (sin icono / rayita) */
html body.manto-layout-ceba-bleed #pg-ani.mejora-visual .ani-serio-panel-h {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0 !important;
  background: var(
    --manto-newmodal-h-bg-light,
    linear-gradient(168deg, #f1f5f9 0%, #e2e8f0 55%, #dbe2ea 100%)
  ) !important;
  border-bottom: 1px solid var(--manto-newmodal-h-border-color-light, #94a3b8) !important;
  border-left: none !important;
}

html body.manto-layout-ceba-bleed #pg-ani.mejora-visual .ani-serio-panel-h .pes-serio-panel-htit-wrap {
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: 100% !important;
  justify-content: center !important;
}

html body.manto-layout-ceba-bleed #pg-ani.mejora-visual .ani-serio-panel-h .serio-v1-icon-box.header-bloque {
  display: none !important;
}

html body.manto-layout-ceba-bleed #pg-ani.mejora-visual .ani-serio-panel-h .serio-v1-title-box--header-bloque {
  padding: 0 !important;
  flex: 0 1 auto !important;
  justify-content: center !important;
}

html body.manto-layout-ceba-bleed #pg-ani.mejora-visual .ani-serio-panel-h .serio-v1-title-box--header-bloque::before {
  content: none !important;
  display: none !important;
}

html body.manto-layout-ceba-bleed #pg-ani.mejora-visual .ani-serio-panel-htit {
  display: inline-block !important;
  text-align: center !important;
  width: auto !important;
  padding: 0 2px 5px !important;
  border-bottom: 2px solid var(--gris-400, #94a3b8) !important;
  border-radius: 0 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--texto-fuerte, #0f172a) !important;
}

/* Fila hint + Lista/Mosaico (fuera del header) */
html body.manto-layout-ceba-bleed #pg-ani.mejora-visual .ani-serio-hint-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  margin: 0 !important;
  background: var(--mv-inner-canvas, #f8fafc) !important;
  border-bottom: 1px solid var(--mv-line, #cbd5e1) !important;
  box-sizing: border-box !important;
}

html body.manto-layout-ceba-bleed #pg-ani.mejora-visual .ani-serio-hint-row .ani-serio-panel-hint-below-h {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

html body.manto-layout-ceba-bleed #pg-ani.mejora-visual .ani-serio-hint-row .ani-serio-seg {
  flex: 0 0 auto !important;
  margin: 0 0 0 auto !important;
  order: unset !important;
  width: auto !important;
  max-width: none !important;
  position: static !important;
}

html body.manto-layout-ceba-bleed #pg-ani.mejora-visual .ani-serio-panel--main > .ani-serio-panel-body {
  padding-top: 8px !important;
}

/* ══════════════════════════════════════════════════════════════
   DESCARTES (#pg-desc) — solo Ceba por ahora (seg aún en header)
   ══════════════════════════════════════════════════════════════ */

html body.manto-layout-ceba-bleed.manto-piel-carne #pg-desc.mejora-visual,
html body.manto-layout-ceba-bleed.manto-perfil-carne #pg-desc.mejora-visual,
html body.manto-layout-ceba-bleed[data-perfil="carne"] #pg-desc.mejora-visual,
html body.light.manto-layout-ceba-bleed.manto-piel-carne #pg-desc.mejora-visual,
html body.light.manto-layout-ceba-bleed.manto-perfil-carne #pg-desc.mejora-visual,
html body.light.manto-layout-ceba-bleed[data-perfil="carne"] #pg-desc.mejora-visual {
  padding-top: calc(48px + env(safe-area-inset-top, 0px)) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: #ffffff !important;
}

html body.manto-layout-ceba-bleed.manto-piel-carne #pg-desc.mejora-visual > .section,
html body.manto-layout-ceba-bleed.manto-perfil-carne #pg-desc.mejora-visual > .section,
html body.manto-layout-ceba-bleed[data-perfil="carne"] #pg-desc.mejora-visual > .section,
html body.manto-layout-ceba-bleed.manto-piel-carne #pg-desc.mejora-visual > .section > .section-body,
html body.manto-layout-ceba-bleed.manto-perfil-carne #pg-desc.mejora-visual > .section > .section-body,
html body.manto-layout-ceba-bleed[data-perfil="carne"] #pg-desc.mejora-visual > .section > .section-body,
html body.manto-layout-ceba-bleed.manto-piel-carne #pg-desc.mejora-visual > .section > .section-body > .section-content,
html body.manto-layout-ceba-bleed.manto-perfil-carne #pg-desc.mejora-visual > .section > .section-body > .section-content,
html body.manto-layout-ceba-bleed[data-perfil="carne"] #pg-desc.mejora-visual > .section > .section-body > .section-content {
  gap: 0 !important;
  row-gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.manto-layout-ceba-bleed.manto-piel-carne #pg-desc.mejora-visual :is(
  .desc-serio-panel,
  .section-header.desc-serio-panel
),
html body.manto-layout-ceba-bleed.manto-perfil-carne #pg-desc.mejora-visual :is(
  .desc-serio-panel,
  .section-header.desc-serio-panel
),
html body.manto-layout-ceba-bleed[data-perfil="carne"] #pg-desc.mejora-visual :is(
  .desc-serio-panel,
  .section-header.desc-serio-panel
) {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: 1px solid var(--mv-line-strong, #64748b) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

html body.manto-layout-ceba-bleed.manto-piel-carne #pg-desc.mejora-visual .desc-serio-panel-h,
html body.manto-layout-ceba-bleed.manto-perfil-carne #pg-desc.mejora-visual .desc-serio-panel-h,
html body.manto-layout-ceba-bleed[data-perfil="carne"] #pg-desc.mejora-visual .desc-serio-panel-h {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  row-gap: 8px !important;
  column-gap: 0 !important;
  background: var(
    --manto-newmodal-h-bg-light,
    linear-gradient(168deg, #f1f5f9 0%, #e2e8f0 55%, #dbe2ea 100%)
  ) !important;
  border-bottom: 1px solid var(--manto-newmodal-h-border-color-light, #94a3b8) !important;
  border-left: none !important;
}

html body.manto-layout-ceba-bleed.manto-piel-carne #pg-desc.mejora-visual .desc-serio-panel-h .serio-v1-icon-box.header-bloque,
html body.manto-layout-ceba-bleed.manto-perfil-carne #pg-desc.mejora-visual .desc-serio-panel-h .serio-v1-icon-box.header-bloque,
html body.manto-layout-ceba-bleed[data-perfil="carne"] #pg-desc.mejora-visual .desc-serio-panel-h .serio-v1-icon-box.header-bloque {
  display: none !important;
}

html body.manto-layout-ceba-bleed.manto-piel-carne #pg-desc.mejora-visual .desc-serio-panel-h .serio-v1-title-box--header-bloque::before,
html body.manto-layout-ceba-bleed.manto-perfil-carne #pg-desc.mejora-visual .desc-serio-panel-h .serio-v1-title-box--header-bloque::before,
html body.manto-layout-ceba-bleed[data-perfil="carne"] #pg-desc.mejora-visual .desc-serio-panel-h .serio-v1-title-box--header-bloque::before {
  content: none !important;
  display: none !important;
}

html body.manto-layout-ceba-bleed.manto-piel-carne #pg-desc.mejora-visual .desc-serio-panel-htit,
html body.manto-layout-ceba-bleed.manto-perfil-carne #pg-desc.mejora-visual .desc-serio-panel-htit,
html body.manto-layout-ceba-bleed[data-perfil="carne"] #pg-desc.mejora-visual .desc-serio-panel-htit {
  display: inline-block !important;
  text-align: center !important;
  width: 100% !important;
  padding: 0 2px 5px !important;
  border-bottom: 2px solid var(--gris-400, #94a3b8) !important;
  border-radius: 0 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--texto-fuerte, #0f172a) !important;
}

html body.manto-layout-ceba-bleed.manto-piel-carne #pg-desc.mejora-visual .desc-serio-panel-h .pes-serio-panel-htit-wrap,
html body.manto-layout-ceba-bleed.manto-perfil-carne #pg-desc.mejora-visual .desc-serio-panel-h .pes-serio-panel-htit-wrap,
html body.manto-layout-ceba-bleed[data-perfil="carne"] #pg-desc.mejora-visual .desc-serio-panel-h .pes-serio-panel-htit-wrap {
  flex: 1 1 100% !important;
  justify-content: center !important;
  order: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
}

html body.manto-layout-ceba-bleed.manto-piel-carne #pg-desc.mejora-visual .desc-serio-seg,
html body.manto-layout-ceba-bleed.manto-perfil-carne #pg-desc.mejora-visual .desc-serio-seg,
html body.manto-layout-ceba-bleed[data-perfil="carne"] #pg-desc.mejora-visual .desc-serio-seg {
  order: 2 !important;
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  margin: 0 0 2px !important;
}

/* ══════════════════════════════════════════════════════════════
   PESAJE CEBA — CTA ranking no monta sobre título
   ══════════════════════════════════════════════════════════════ */

html body.manto-layout-ceba-bleed.manto-piel-carne #pg-pesaje-carne.mejora-visual .pes-serio-panel-h--toolbar,
html body.manto-layout-ceba-bleed.manto-perfil-carne #pg-pesaje-carne.mejora-visual .pes-serio-panel-h--toolbar,
html body.manto-layout-ceba-bleed[data-perfil="carne"] #pg-pesaje-carne.mejora-visual .pes-serio-panel-h--toolbar {
  flex-wrap: wrap !important;
  row-gap: 8px !important;
}

html body.manto-layout-ceba-bleed.manto-piel-carne #pg-pesaje-carne.mejora-visual .pes-serio-stats-cta-slot,
html body.manto-layout-ceba-bleed.manto-perfil-carne #pg-pesaje-carne.mejora-visual .pes-serio-stats-cta-slot,
html body.manto-layout-ceba-bleed[data-perfil="carne"] #pg-pesaje-carne.mejora-visual .pes-serio-stats-cta-slot,
html body.manto-layout-ceba-bleed.manto-piel-carne #pg-pesaje-carne.mejora-visual #pesaje-kpis-head-cta,
html body.manto-layout-ceba-bleed.manto-perfil-carne #pg-pesaje-carne.mejora-visual #pesaje-kpis-head-cta,
html body.manto-layout-ceba-bleed[data-perfil="carne"] #pg-pesaje-carne.mejora-visual #pesaje-kpis-head-cta {
  order: 3 !important;
  flex: 1 1 100% !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  margin: 0 !important;
}

/* ══════════════════════════════════════════════════════════════
   PARTOS — hint-row ya tiene el seg
   ══════════════════════════════════════════════════════════════ */

html body.manto-layout-ceba-bleed.manto-piel-carne #pg-nac.mejora-visual .partos-serio-hint-row,
html body.manto-layout-ceba-bleed.manto-perfil-carne #pg-nac.mejora-visual .partos-serio-hint-row,
html body.manto-layout-ceba-bleed[data-perfil="carne"] #pg-nac.mejora-visual .partos-serio-hint-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  margin: 0 !important;
}

html body.manto-layout-ceba-bleed.manto-piel-carne #pg-nac.mejora-visual .partos-serio-hint-row .partos-serio-seg,
html body.manto-layout-ceba-bleed.manto-perfil-carne #pg-nac.mejora-visual .partos-serio-hint-row .partos-serio-seg,
html body.manto-layout-ceba-bleed[data-perfil="carne"] #pg-nac.mejora-visual .partos-serio-hint-row .partos-serio-seg {
  flex: 0 0 auto !important;
  margin-left: auto !important;
}