/* =============================================================================
   Beneficio Neto Ajustado · estático de iberdrola.com · scope #adjnetprofit · clases adjnetprofit_
   Diseño a 290, 565 y 980 (Figma 16810:176, 16810:221, 16811:579). Medidas: specs/beneficio-neto-ajustado/design/.
   Tres composiciones por el ancho de la PIEZA (@container), no del navegador (spec RF-04):
     estrecha < 543 ≤ media < 953 ≤ ancha.
   El gráfico es un dibujo de tamaño fijo por composición, centrado en la caja blanca con el desplazamiento de
   Figma; el título, la entradilla, la nota, la caja blanca y el eje son fluidos (RF-05).
   ============================================================================= */

/* ===== IberPangea + IberPangea Text (propias, ruta absoluta) =============== */
@font-face{font-family:'IberPangea';src:url('/wcorp/gc/prod/es_ES/estaticos/beneficio-neto-ajustado/fonts/IberPangea-SmBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'IberPangea Text';src:url('/wcorp/gc/prod/es_ES/estaticos/beneficio-neto-ajustado/fonts/IberPangeaText-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'IberPangea Text';src:url('/wcorp/gc/prod/es_ES/estaticos/beneficio-neto-ajustado/fonts/IberPangeaText-SmBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'IberPangea Text';src:url('/wcorp/gc/prod/es_ES/estaticos/beneficio-neto-ajustado/fonts/IberPangeaText-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;}

/* ===== Tokens (design/tokens.json) ========================================= */
#adjnetprofit{
  --adjnetprofit-sand:#FFF5EC;    /* Iberdrola Sand: fondo de la pieza */
  --adjnetprofit-sand1:#FFFEFF;   /* Sand 1: caja del gráfico */
  --adjnetprofit-sand3:#D8CFC7;   /* Sand 3: eje */
  --adjnetprofit-sand7:#3A3735;   /* Sand 7: unidad, cifras, años, nota */
  --adjnetprofit-forest:#00402A;  /* Iberdrola Forest: entradilla */
  --adjnetprofit-green1:#007F33;  /* Green 1: título, texto del crecimiento */
  --adjnetprofit-green2:#008C39;  /* Green 2: barra de 2030e */
  --adjnetprofit-green3:#26BF64;  /* Green 3: barras de 2025 y 2028e (D01), borde de «> 10%» */
  --adjnetprofit-white:#FFFFFF;   /* fondo de «> 10%» (sin token en Figma) */
}

/* ===== Raíz: contenedor con nombre, sin padding (los cortes miden la pieza) ======
   `margin:0 auto` SIN margen vertical: se incrusta y el sitio pone su espaciado. Como mucho 980, centrada (P4). */
#adjnetprofit{
  container-name:adjnetprofit; container-type:inline-size;
  width:100%; max-width:980px; margin:0 auto; padding:0; box-sizing:border-box;
  position:relative; border:0; border-radius:15px; background:var(--adjnetprofit-sand);
}

/* ===== Blindaje frente al theme de Liferay (F4) ============================ */
#adjnetprofit *{color:inherit; font:inherit; letter-spacing:inherit; text-align:inherit;
  text-transform:inherit; white-space:inherit; text-indent:0; text-decoration:none;
  margin:0; padding:0; box-sizing:border-box; border:0; background:transparent;
  float:none; min-width:0; max-width:none; min-height:0; box-shadow:none; opacity:1;
  font-synthesis:none;}
#adjnetprofit ul,#adjnetprofit ol,#adjnetprofit li{list-style:none;}
#adjnetprofit li::marker{content:none;}
#adjnetprofit li::before{content:'' !important; display:none !important; margin:0 !important;}
/* `#adjnetprofit *` no alcanza a los pseudo-elementos: se blindan aparte y SIN `content`. */
#adjnetprofit *::before,#adjnetprofit *::after{margin:0; padding:0; text-indent:0;
  letter-spacing:inherit; text-transform:inherit;}
/* La RAÍZ declara todo lo heredable: si no, hereda del portal y el `inherit` de arriba propaga el valor del theme. */
#adjnetprofit{
  font-family:'IberPangea Text',sans-serif; font-size:16px; line-height:20px;
  font-weight:400; font-style:normal; color:var(--adjnetprofit-sand7);
  letter-spacing:normal; text-align:left; text-transform:none; white-space:normal;
  text-decoration:none; word-break:normal; overflow-wrap:normal; font-synthesis:none;
}
/* Sólo-lector («más de» delante de cada «>»). Blindado: el theme no lo puede sacar a la vista. */
#adjnetprofit .adjnetprofit_sr{position:absolute !important; width:1px !important; height:1px !important;
  margin:-1px !important; padding:0 !important; overflow:hidden !important; clip:rect(0 0 0 0) !important;
  clip-path:inset(50%) !important; white-space:nowrap !important; border:0 !important;}

/* `display` NO se hereda: elemento a elemento y con `!important`, con la dirección y el hueco de cada flex.
   Ninguno cambia entre composiciones. */
#adjnetprofit{display:block !important;}
#adjnetprofit .adjnetprofit_wrap{display:flex !important; flex-direction:column; flex-wrap:nowrap; align-items:stretch; justify-content:flex-start; gap:0;}
#adjnetprofit .adjnetprofit_title,#adjnetprofit .adjnetprofit_description,#adjnetprofit .adjnetprofit_note{display:block !important;}
#adjnetprofit .adjnetprofit_content{display:block !important;}
#adjnetprofit .adjnetprofit_content_label,#adjnetprofit .adjnetprofit_axis{display:block !important;}
#adjnetprofit .adjnetprofit_chart,#adjnetprofit .adjnetprofit_arrow{display:block !important;}
#adjnetprofit .adjnetprofit_bars{display:flex !important; flex-direction:row; flex-wrap:nowrap; align-items:flex-end; justify-content:space-between; gap:0;}
#adjnetprofit .adjnetprofit_bar{display:flex !important; flex-direction:column; flex-wrap:nowrap; align-items:center; justify-content:flex-end; gap:16px;}
#adjnetprofit .adjnetprofit_bar_year,#adjnetprofit .adjnetprofit_bar_value,#adjnetprofit .adjnetprofit_bar_block{display:block !important;}
#adjnetprofit .adjnetprofit_growth,#adjnetprofit .adjnetprofit_growth_text{display:block !important;}
#adjnetprofit .adjnetprofit_growth_value{display:flex !important; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:center; gap:0;}
/* El texto de «> 10%», en un solo hijo: en una caja flex, cada trozo suelto es un elemento y pierde el espacio de «> 10%». */
#adjnetprofit .adjnetprofit_growth_num{display:block !important;}
#adjnetprofit .adjnetprofit_bar_value>span,#adjnetprofit .adjnetprofit_growth_num>span,#adjnetprofit .adjnetprofit_note>span{display:inline !important;}

/* ===== Composición estrecha (290: design/mob) ============================== */
#adjnetprofit .adjnetprofit_wrap{padding:24px 16px;}

#adjnetprofit .adjnetprofit_title{
  font-family:'IberPangea',sans-serif; font-weight:600; font-size:30px; line-height:34px;
  color:var(--adjnetprofit-green1) !important;
}
#adjnetprofit .adjnetprofit_description{
  margin-top:16px; font-size:18px; line-height:22px; color:var(--adjnetprofit-forest);
}
#adjnetprofit .adjnetprofit_note{margin-top:24px; font-style:italic; color:var(--adjnetprofit-sand7);}

/* Caja del gráfico: alto de Figma; todo lo de dentro, absoluto. */
#adjnetprofit .adjnetprofit_content{
  position:relative; margin-top:24px; height:369px;
  border-radius:15px; background:var(--adjnetprofit-sand1);
}
/* Hasta donde empieza el crecimiento (estrecha y media) o la caja «> 10%» (ancha): en reposo cabe en una línea en los
   tres idiomas; si el texto crece (1.4.12), baja a otra línea en vez de pisarlo. */
#adjnetprofit .adjnetprofit_content_label{
  position:absolute; z-index:1; left:20px; top:14px; max-width:calc(50% - 2px); color:var(--adjnetprofit-sand7);
}
/* Eje: el trazo de 1 de Figma cubre su y ± 0,5 (y = alto − 60). */
#adjnetprofit .adjnetprofit_axis{
  position:absolute; left:14px; right:12.21px; bottom:59.5px; height:1px;
  border-radius:.5px; background:var(--adjnetprofit-sand3);
}
/* El dibujo: ancho = lo que ocupa en Figma; centrado con su desplazamiento. Sus hijos, en su x/y de Figma menos
   el origen del dibujo (x 19,87 de la caja). */
#adjnetprofit .adjnetprofit_chart{position:absolute; top:0; bottom:0; width:234.95px; left:calc(50% - 109.13px);}
#adjnetprofit .adjnetprofit_arrow{
  position:absolute; left:18.13px; top:64.14px; width:156.5px; height:62.86px;
  background:url('/wcorp/gc/prod/es_ES/estaticos/beneficio-neto-ajustado/images/flecha-mob.svg?t=1534') no-repeat 0 0;
  background-size:100% 100%;
}
#adjnetprofit .adjnetprofit_bars{position:absolute; left:0; bottom:24px; width:218.58px;}
#adjnetprofit .adjnetprofit_bar{width:58px;}
#adjnetprofit .adjnetprofit_bar_value{order:1; width:100%; font-weight:600; text-align:center; white-space:nowrap;}
#adjnetprofit .adjnetprofit_bar_block{order:2; width:58px; border-radius:15px 15px 0 0; height:var(--adjnetprofit-h); transition:height .5s ease;}
#adjnetprofit .adjnetprofit_bar_year{order:3; width:100%; text-align:center; white-space:nowrap;}
#adjnetprofit .adjnetprofit_bar-1{--adjnetprofit-h:122px;}
#adjnetprofit .adjnetprofit_bar-2{--adjnetprofit-h:154px;}
#adjnetprofit .adjnetprofit_bar-3{--adjnetprofit-h:218px;}
#adjnetprofit .adjnetprofit_bar-1 .adjnetprofit_bar_block,
#adjnetprofit .adjnetprofit_bar-2 .adjnetprofit_bar_block{background:var(--adjnetprofit-green3);}
#adjnetprofit .adjnetprofit_bar-3 .adjnetprofit_bar_block{background:var(--adjnetprofit-green2);}

/* Anotación del crecimiento: capa del tamaño del dibujo; caja «> 10%» y texto, absolutos dentro. */
#adjnetprofit .adjnetprofit_growth{position:absolute; left:0; top:0; width:100%; height:100%; font-weight:600;}
/* Con el fondo de la caja: si el texto crece (1.4.12, otro idioma) y alcanza la punta de la flecha, la tapa en vez de
   cruzarse con las letras. Sin cruce, no se ve. */
#adjnetprofit .adjnetprofit_growth_text{
  position:absolute; left:127.13px; top:14px; width:min(107.82px, 50cqi - 37px);
  font-size:12px; line-height:15px; text-align:center; color:var(--adjnetprofit-green1);
  background:var(--adjnetprofit-sand1);
}
/* El tamaño, el mínimo de Figma; el relleno sólo es el suelo si el texto crece (1.4.12): en reposo no manda. */
#adjnetprofit .adjnetprofit_growth_value{
  position:absolute; left:12.13px; top:65px; min-width:92px; min-height:36px; padding:4px 12px;
  border:2px solid var(--adjnetprofit-green3); border-radius:8px; background:var(--adjnetprofit-white);
  white-space:nowrap; color:var(--adjnetprofit-sand7);
}

/* ===== Las barras crecen al llegar (A-001) ================================= */
#adjnetprofit[data-js]:not(.adjnetprofit--on) .adjnetprofit_bar_block{height:0;}
@media (prefers-reduced-motion:reduce), print{
  #adjnetprofit .adjnetprofit_bar_block{height:var(--adjnetprofit-h) !important; transition:none !important;}
}

/* ===== Composición media (565: design/tablet) ============================== */
@container adjnetprofit (min-width: 543px){
  #adjnetprofit .adjnetprofit_wrap{padding:32px;}
  #adjnetprofit .adjnetprofit_title{font-size:32px; line-height:36px;}
  #adjnetprofit .adjnetprofit_description{margin-top:24px;}
  #adjnetprofit .adjnetprofit_content{height:461px;}
  #adjnetprofit .adjnetprofit_content_label{left:25px; top:25px; max-width:calc(50% - 103.5px);}
  #adjnetprofit .adjnetprofit_axis{left:14px; right:12.5px;}
  /* Origen del dibujo: x 25 de la caja. */
  #adjnetprofit .adjnetprofit_chart{width:452px; left:calc(50% - 225.5px);}
  #adjnetprofit .adjnetprofit_arrow{
    left:57.5px; top:105.24px; width:315.5px; height:87.26px;
    background-image:url('/wcorp/gc/prod/es_ES/estaticos/beneficio-neto-ajustado/images/flecha-tablet.svg?t=1534');
  }
  #adjnetprofit .adjnetprofit_bars{width:452px;}
  #adjnetprofit .adjnetprofit_bar{width:119px;}
  #adjnetprofit .adjnetprofit_bar-1{width:117px; --adjnetprofit-h:151px;}
  #adjnetprofit .adjnetprofit_bar-2{--adjnetprofit-h:205px;}
  #adjnetprofit .adjnetprofit_bar-3{--adjnetprofit-h:256px;}
  #adjnetprofit .adjnetprofit_bar_block{width:117px;}
  #adjnetprofit .adjnetprofit_bar-2 .adjnetprofit_bar_block,
  #adjnetprofit .adjnetprofit_bar-3 .adjnetprofit_bar_block{align-self:flex-start;}
  /* Encima de la caja «> 10%» y anclado por abajo (y 85 de la caja): si otro idioma da otra línea, crece hacia arriba. */
  #adjnetprofit .adjnetprofit_growth_text{
    left:147px; top:auto; bottom:376px; width:133px; font-size:16px; line-height:20px;
  }
  #adjnetprofit .adjnetprofit_growth_value{left:158px; top:93px; min-width:114px; min-height:52px;}
}

/* ===== Composición ancha (980: design/desk) ================================ */
@container adjnetprofit (min-width: 953px){
  #adjnetprofit .adjnetprofit_content{height:377px;}
  #adjnetprofit .adjnetprofit_content_label{max-width:calc(50% - 203px);}
  #adjnetprofit .adjnetprofit_axis{left:37px; right:35.5px;}
  /* Origen del dibujo: x 118 de la caja. */
  #adjnetprofit .adjnetprofit_chart{width:749px; left:calc(50% - 340px);}
  #adjnetprofit .adjnetprofit_arrow{
    left:67.02px; top:29.76px; width:536px; height:81.24px;
    background-image:url('/wcorp/gc/prod/es_ES/estaticos/beneficio-neto-ajustado/images/flecha-desk.svg?t=1534');
  }
  #adjnetprofit .adjnetprofit_bars{width:749px;}
  #adjnetprofit .adjnetprofit_bar-2{--adjnetprofit-h:211px;}
  #adjnetprofit .adjnetprofit_bar-2 .adjnetprofit_bar_block{align-self:center;}
  /* Debajo de la caja «> 10%», entre las barras de 2025 y 2028e: crece hacia abajo. */
  #adjnetprofit .adjnetprofit_growth_text{left:137px; top:89px; bottom:auto; width:139px;}
  #adjnetprofit .adjnetprofit_growth_value{left:162px; top:30px; min-width:80px; min-height:50px;}
}