/* EA2FMO v557 · corrección localizada.
   - PC: banner estable con la proporción real 1536x484, sin encogerse tras cargar.
   - Mantiene las cuatro tarjetas de PC en una sola línea.
   - Barra Publicaciones/Publicar: misma altura, dos mitades diferenciadas por color.
   - Móvil y tablet: no modifica el banner ni la distribución de las cuatro tarjetas. */

/* BARRA PUBLICACIONES: fina y siempre debajo de las tarjetas. */
body.dondominioReplica .hubLevels{
  position:relative!important;
  margin-bottom:46px!important;
}
body.dondominioReplica .hubLevels > .ea2fmoPublishStrip{
  box-sizing:border-box!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:-42px!important;
  z-index:3!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:38px!important;
  min-height:38px!important;
  max-height:38px!important;
  margin:0!important;
  padding:0!important;
  gap:6px!important;
  overflow:visible!important;
  border:0!important;
  border-radius:10px!important;
  background:transparent!important;
  box-shadow:none!important;
}
body.dondominioReplica .hubLevels > .ea2fmoPublishStrip::before,
body.dondominioReplica .hubLevels > .ea2fmoPublishStrip::after{
  content:none!important;
  display:none!important;
}
body.dondominioReplica .hubLevels > .ea2fmoPublishStrip > a{
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  width:100%!important;
  min-width:0!important;
  height:38px!important;
  min-height:38px!important;
  max-height:38px!important;
  margin:0!important;
  padding:5px 10px!important;
  text-decoration:none!important;
  border-radius:9px!important;
  box-shadow:inset 0 0 15px rgba(255,255,255,.015)!important;
  font:800 9px/1 system-ui,sans-serif!important;
  letter-spacing:.065em!important;
  text-transform:uppercase!important;
}
/* Dos “carpetas” con colores distintos, pero sutiles y del mismo tamaño. */
body.dondominioReplica .hubLevels > .ea2fmoPublishStrip > a.ea2fmoViewPublications,
body.dondominioReplica .hubLevels > .ea2fmoPublishStrip > a:first-child{
  color:#8fefff!important;
  border:1px solid rgba(35,197,225,.44)!important;
  background:linear-gradient(90deg,rgba(12,86,108,.34),rgba(7,45,59,.24))!important;
}
body.dondominioReplica .hubLevels > .ea2fmoPublishStrip > a.ea2fmoCreatePublication,
body.dondominioReplica .hubLevels > .ea2fmoPublishStrip > a:last-child{
  color:#c8a6ff!important;
  border:1px solid rgba(157,105,242,.48)!important;
  background:linear-gradient(90deg,rgba(71,39,116,.30),rgba(38,24,69,.24))!important;
}
body.dondominioReplica .hubLevels > .ea2fmoPublishStrip > a:hover,
body.dondominioReplica .hubLevels > .ea2fmoPublishStrip > a:focus-visible{
  filter:brightness(1.18)!important;
  outline:none!important;
}
body.dondominioReplica .hubLevels > .ea2fmoPublishStrip .ea2fmoPublishIcon{
  display:inline!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  color:inherit!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  font-size:11px!important;
  line-height:1!important;
  opacity:.9!important;
}

/* PC: cuatro tarjetas en una sola línea y banner FIJO en su geometría buena. */
@media (min-width:1101px){
  body.dondominioReplica .hubLevels{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    width:calc(100% - 24px)!important;
    max-width:1340px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    margin-bottom:46px!important;
  }

  /* El banner usa exactamente la proporción de la imagen aprobada (1536x484).
     Se fuerza al final de la cascada para impedir el encogimiento después de cargar. */
  html body.dondominioReplica .stationBannerStrip{
    box-sizing:border-box!important;
    display:block!important;
    position:relative!important;
    width:calc(100% - 32px)!important;
    max-width:1600px!important;
    aspect-ratio:1536 / 484!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:18px auto 0!important;
    padding:0!important;
    overflow:hidden!important;
    border-radius:20px!important;
  }
  html body.dondominioReplica .stationBannerStrip > img.stationBannerDark,
  html body.dondominioReplica .stationBannerStrip > img.stationBannerLight{
    box-sizing:border-box!important;
    position:absolute!important;
    inset:0!important;
    display:block!important;
    width:100%!important;
    min-width:100%!important;
    max-width:100%!important;
    height:100%!important;
    min-height:100%!important;
    max-height:100%!important;
    margin:0!important;
    padding:0!important;
    object-fit:fill!important;
    object-position:center center!important;
    transform:none!important;
  }
  html[data-theme="dark"] body.dondominioReplica .stationBannerStrip > img.stationBannerDark{opacity:1!important;}
  html[data-theme="dark"] body.dondominioReplica .stationBannerStrip > img.stationBannerLight{opacity:0!important;}
  html[data-theme="light"] body.dondominioReplica .stationBannerStrip > img.stationBannerDark{opacity:0!important;}
  html[data-theme="light"] body.dondominioReplica .stationBannerStrip > img.stationBannerLight{opacity:1!important;}
}

/* Tablet y móvil: banner y tarjetas se quedan como estaban. */
@media (max-width:700px){
  body.dondominioReplica .hubLevels{margin-bottom:42px!important;}
  body.dondominioReplica .hubLevels > .ea2fmoPublishStrip{
    bottom:-38px!important;
    height:34px!important;
    min-height:34px!important;
    max-height:34px!important;
    gap:5px!important;
  }
  body.dondominioReplica .hubLevels > .ea2fmoPublishStrip > a{
    height:34px!important;
    min-height:34px!important;
    max-height:34px!important;
    padding:4px 6px!important;
    font-size:7.5px!important;
    letter-spacing:.035em!important;
  }
}


/* v557 · acabado visual de publicaciones + modo claro.
   No altera tamaños ni geometría del banner. */

/* PC: quitamos la pastilla flotante CENTRO PERSONAL que pisa visualmente el icono.
   La tarjeta Mi panel conserva sus textos y color verde. */
@media (min-width:1101px){
  body.dondominioReplica .hubLevels .panelLevel::before{
    content:none!important;
    display:none!important;
  }
}

/* PUBLICACIONES: misma altura y ancho de v556, pero con más presencia y un icono compacto. */
body.dondominioReplica .hubLevels > .ea2fmoPublishStrip > a{
  position:relative!important;
  overflow:hidden!important;
  font-weight:850!important;
  letter-spacing:.055em!important;
  transition:filter .16s ease,transform .16s ease,border-color .16s ease!important;
}
body.dondominioReplica .hubLevels > .ea2fmoPublishStrip > a::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  background:linear-gradient(115deg,rgba(255,255,255,.08),transparent 28%,transparent 72%,rgba(255,255,255,.035))!important;
}
body.dondominioReplica .hubLevels > .ea2fmoPublishStrip > a.ea2fmoViewPublications,
body.dondominioReplica .hubLevels > .ea2fmoPublishStrip > a:first-child{
  color:#8df2ff!important;
  border-color:rgba(34,211,238,.78)!important;
  background:radial-gradient(circle at 15% 50%,rgba(0,210,255,.24),transparent 38%),linear-gradient(100deg,rgba(5,92,119,.72),rgba(5,41,58,.88))!important;
  box-shadow:inset 0 0 18px rgba(34,211,238,.10),0 0 12px rgba(34,211,238,.055)!important;
}
body.dondominioReplica .hubLevels > .ea2fmoPublishStrip > a.ea2fmoCreatePublication,
body.dondominioReplica .hubLevels > .ea2fmoPublishStrip > a:last-child{
  color:#d8b6ff!important;
  border-color:rgba(174,107,255,.78)!important;
  background:radial-gradient(circle at 15% 50%,rgba(153,77,255,.24),transparent 38%),linear-gradient(100deg,rgba(79,43,133,.72),rgba(42,25,74,.90))!important;
  box-shadow:inset 0 0 18px rgba(168,85,247,.11),0 0 12px rgba(168,85,247,.055)!important;
}
body.dondominioReplica .hubLevels > .ea2fmoPublishStrip .ea2fmoPublishIcon{
  display:grid!important;
  place-items:center!important;
  flex:0 0 22px!important;
  width:22px!important;
  height:22px!important;
  border-radius:7px!important;
  font-size:12px!important;
  font-weight:900!important;
  border:1px solid currentColor!important;
  background:rgba(255,255,255,.055)!important;
  box-shadow:inset 0 0 10px rgba(255,255,255,.05)!important;
  opacity:1!important;
}
body.dondominioReplica .hubLevels > .ea2fmoPublishStrip > a:hover,
body.dondominioReplica .hubLevels > .ea2fmoPublishStrip > a:focus-visible{
  transform:translateY(-1px)!important;
  filter:brightness(1.14)!important;
}

/* MODO CLARO: mismos colores identificativos, pero limpios y legibles. */
html[data-theme="light"] body.dondominioReplica .hubLevels > .ea2fmoPublishStrip > a.ea2fmoViewPublications,
html[data-theme="light"] body.dondominioReplica .hubLevels > .ea2fmoPublishStrip > a:first-child{
  color:#066f89!important;
  border-color:#55bfd4!important;
  background:radial-gradient(circle at 15% 50%,rgba(26,188,220,.20),transparent 42%),linear-gradient(100deg,#e4f8fc,#f7fdff)!important;
  box-shadow:inset 0 1px #fff,0 5px 14px rgba(30,116,137,.10)!important;
}
html[data-theme="light"] body.dondominioReplica .hubLevels > .ea2fmoPublishStrip > a.ea2fmoCreatePublication,
html[data-theme="light"] body.dondominioReplica .hubLevels > .ea2fmoPublishStrip > a:last-child{
  color:#7543a6!important;
  border-color:#ad83d5!important;
  background:radial-gradient(circle at 15% 50%,rgba(154,99,214,.18),transparent 42%),linear-gradient(100deg,#f1e8fb,#fcf9ff)!important;
  box-shadow:inset 0 1px #fff,0 5px 14px rgba(102,67,141,.10)!important;
}
html[data-theme="light"] body.dondominioReplica .hubLevels > .ea2fmoPublishStrip .ea2fmoPublishIcon{
  background:rgba(255,255,255,.62)!important;
  box-shadow:inset 0 0 8px rgba(255,255,255,.7)!important;
}

@media (max-width:700px){
  body.dondominioReplica .hubLevels > .ea2fmoPublishStrip .ea2fmoPublishIcon{
    flex-basis:19px!important;
    width:19px!important;
    height:19px!important;
    border-radius:6px!important;
    font-size:10px!important;
  }
}