/*
 * Lamari Diarios · CEPAS · Efectos principales · espacio v1.40.860
 * Corrige el caso real donde un icono no ocupa layout y el autoplacement de Grid
 * desplaza nombre/barra/nivel una columna, dejando el nombre comprimido y el nivel enorme.
 */

/* Cada pieza conserva siempre su columna semántica, incluso si el icono no se renderiza. */
html:not(.kd-dark-mode) body:not(.kd-dark-mode) .kd-strain-detail-editorial-v140837 #efectos .kd-strain-effect-icon{
  grid-area:icon!important;
}
html:not(.kd-dark-mode) body:not(.kd-dark-mode) .kd-strain-detail-editorial-v140837 #efectos .kd-strain-effect-bar-row>b{
  grid-area:label!important;
  min-width:0!important;
  max-width:none!important;
  overflow:visible!important;
  text-overflow:clip!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  hyphens:none!important;
}
html:not(.kd-dark-mode) body:not(.kd-dark-mode) .kd-strain-detail-editorial-v140837 #efectos .kd-strain-effect-track{
  grid-area:bar!important;
  width:100%!important;
  max-width:150px!important;
}
html:not(.kd-dark-mode) body:not(.kd-dark-mode) .kd-strain-detail-editorial-v140837 #efectos .kd-strain-effect-bar-row>small{
  grid-area:level!important;
  width:100%!important;
  max-width:130px!important;
}

/* Escritorio: el espacio flexible pertenece al texto; barra y nivel quedan compactos. */
@container kd-effects (min-width:621px){
  html:not(.kd-dark-mode) body:not(.kd-dark-mode) .kd-strain-detail-editorial-v140837 #efectos .kd-strain-effect-bar-row{
    grid-template-columns:32px minmax(180px,1fr) minmax(110px,150px) minmax(100px,130px)!important;
    grid-template-areas:"icon label bar level"!important;
    column-gap:12px!important;
  }
}

/* Tablet: conserva el nombre completo arriba y usa la barra debajo. */
@container kd-effects (max-width:620px){
  html:not(.kd-dark-mode) body:not(.kd-dark-mode) .kd-strain-detail-editorial-v140837 #efectos .kd-strain-effect-track{
    max-width:none!important;
  }
  html:not(.kd-dark-mode) body:not(.kd-dark-mode) .kd-strain-detail-editorial-v140837 #efectos .kd-strain-effect-bar-row>small{
    max-width:88px!important;
  }
}

@container kd-effects (max-width:390px){
  html:not(.kd-dark-mode) body:not(.kd-dark-mode) .kd-strain-detail-editorial-v140837 #efectos .kd-strain-effect-bar-row>small{
    width:auto!important;
    max-width:none!important;
  }
}