/* ===========================================================================
   Métricas crediticias ajustadas — 1S 2026
   Figma: A7xWq9jgrrMdgQZ0BHY8TM · 16620:98616 (565-ES) · 16620:98556 (290-ES)
                                 · 16620:98788 (565-EN) · 16620:98842 (290-EN)

   Cambios frente a la versión de 1T 2026:
   - Desaparece la columna «Proforma»: quedan 1S 2026 y 1S 2025 reexpresado.
   - UNA sola tabla en lugar de dos. Antes se usaban dos tablas (actual y
     anterior) con `height` fijo por fila para que cuadrasen entre sí. El nuevo
     diseño hace que el alto de fila dependa del contenido (alto de la etiqueta
     + 16) y ese alto YA NO es igual en ES y EN, ni entre breakpoints:
        565-ES 60/60/60 · 565-EN 60/60/38 · 290-ES 70/88/52 · 290-EN 88/70/52
     Con una tabla las filas se alinean solas y las alturas las manda el texto,
     sin CSS por idioma. Fijar píxeles por frame era el antipatrón.
   - El hueco entre la columna de 1S 2026 y la de 1S 2025 se hace con
     `border-left` transparente + `background-clip:padding-box`, no con una
     columna separadora: la pastilla gris arranca dentro de su propia celda y
     la tabla se queda en 3 columnas reales, sin celdas vacías de relleno.
   =========================================================================== */

@font-face{font-family:'IberPangea';src:url(/wcorp/gc/prod/es_ES/estaticos/ratios-crediticios/fonts/IberPangea-Regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'IberPangea';src:url(/wcorp/gc/prod/es_ES/estaticos/ratios-crediticios/fonts/IberPangea-Medium.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'IberPangea';src:url(/wcorp/gc/prod/es_ES/estaticos/ratios-crediticios/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/ratios-crediticios/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/ratios-crediticios/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/ratios-crediticios/fonts/IberPangeaText-Italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap;}

/* ===== Tokens ===== */
#creditm{
  --cm-forest:#00402A;   /* Iberdrola Forest — texto principal */
  --cm-white:#FFFFFF;
  --cm-sand1:#FFFEFF;    /* Sand 1 — texto sobre verde */
  --cm-sand3:#D8CFC7;    /* Sand 3 — bordes */
  --cm-sand7:#3A3735;    /* Sand 7 — notas y pastillas grises */
  --cm-green1:#007F33;   /* Green 1 — cabecera y volados */
  --cm-forest1:#DCEBE1;  /* Forest 1 — filas del periodo actual */
  --cm-forest2:#A2BCB1;  /* Forest 2 — pastillas del periodo anterior */
}

/* ===========================================================================
   Aislamiento frente al theme de Liferay.
   La HERENCIA pierde contra cualquier declaración del theme, por débil que sea:
   todo lo que se herede en vez de declararse, el CMS lo pisa. `inherit` ES una
   declaración, así que gana al theme y conserva el valor del padre → cero
   cambio visual. Nuestras reglas `#creditm .clase` (1-1-0) siguen ganando a
   esta (1-0-0).
   OJO: aquí NO va `font-family:… !important` (el reset que traía la pieza
   antigua): su `!important` ganaría a todo el CSS de abajo.
   =========================================================================== */
#creditm *{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;}
#creditm ul,#creditm ol,#creditm li{list-style:none;}
#creditm li::marker{content:none;}
#creditm li::before{content:'' !important; display:none !important; margin:0 !important;}
/* `#creditm *` no alcanza a los pseudo-elementos → se blindan aparte, sin
   `content` para no crear pseudos donde no los hay. */
#creditm *::before,#creditm *::after{margin:0; padding:0; text-indent:0;
                                     letter-spacing:inherit; text-transform:inherit;}
/* El theme pinta las tablas a su manera (th centrado y en negrita, colapsadas). */
#creditm table{border-collapse:separate; border-spacing:0; width:100%;}
#creditm th,#creditm td{background:none; border:0; vertical-align:middle;}
#creditm caption{caption-side:top;}
#creditm img{display:block; max-width:100%;}
#creditm sup{vertical-align:baseline;}

/* ===== Raíz ===== */
#creditm{
  box-sizing:border-box;
  width:100%;
  max-width:980px;
  margin:20px auto;               /* se conserva el de producción (D07) */
  background:var(--cm-white);
  border-radius:15px;
  /* El borde de Figma va DENTRO del frame y no consume layout → inset shadow */
  box-shadow:inset 0 0 0 1px var(--cm-sand3);
  font-family:'IberPangea',Arial,sans-serif;
  font-weight:400;
  font-style:normal;
  color:var(--cm-forest);
  text-align:left;
  container-type:inline-size;
  container-name:cm;
}
#creditm *{box-sizing:border-box;}

/* `@container` NO reestila su propio contenedor → el padding vive aquí dentro */
#creditm .creditm_in{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:16px;
}

/* ===== Entradilla ===== */
#creditm .creditm_lead{
  font-family:'IberPangea',Arial,sans-serif;
  font-weight:400;
  font-size:18px;
  line-height:22px;
  color:var(--cm-forest);
}
#creditm .creditm_lead strong{font-weight:600;}

/* ===== Caja ===== */
#creditm .creditm_box{
  border-radius:16px;
  /* `outline`, no `box-shadow:inset`: el inset se pinta DEBAJO del fondo de los
     hijos y la cabecera verde y el cuerpo blanco lo tapaban entero. El outline
     se pinta el último, por encima de los descendientes, y con offset negativo
     queda dentro de la caja sin consumir layout. */
  outline:1px solid var(--cm-sand3);
  outline-offset:-1px;
  overflow:hidden;
}

#creditm .creditm_head{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 16px;
  background:var(--cm-green1);
}
#creditm .creditm_head_i{width:23.12px; height:25.403px; flex:0 0 auto;}
#creditm .creditm_head_t{
  flex:1 1 auto;
  font-family:'IberPangea',Arial,sans-serif;
  font-weight:500;
  font-size:18px;
  line-height:22px;
  text-align:center;
  /* En móvil el theme pinta los títulos con color:#427314 !important */
  color:var(--cm-sand1) !important;
}

/* `display:flex` no es decorativo: el `margin-block:-8px` de la tabla
   COLAPSARÍA con el margen del cuerpo (padding-top 0) y se lo llevaría 8px
   hacia arriba, metiéndolo por debajo de la cabecera verde. Un contenedor flex
   no colapsa márgenes con sus hijos. */
#creditm .creditm_body{
  display:flex;
  flex-direction:column;
  background:var(--cm-white);
  padding:8px;
}

/* ===========================================================================
   Tabla
   El hueco de 8px entre filas se hace con `border-spacing`, que también añade 8
   arriba y abajo de la tabla: se compensa con `margin-block:-8px`.
   La fila de encabezados va DENTRO del mismo `tbody` (marcada con
   `.creditm_hrow`), no en un `<thead>`: `border-spacing` mete 16px en la
   frontera entre grupos de filas —el hueco de fila MÁS el de grupo— y eso
   dejaba la primera pastilla 8px por debajo de donde la pone Figma.
   `scope="col"` es lo que asocia cada cifra con su periodo.
   El alto de fila NO se fija: sale del alto de la etiqueta + 16 (8 de padding
   arriba y abajo), que es exactamente la regla que sigue Figma en los 4 frames.
   =========================================================================== */
#creditm .creditm_t{
  table-layout:fixed;
  border-spacing:0 8px;
  margin-block:-8px;
}

/* --- Fila de encabezados ---
   Los rótulos van POSICIONADOS EN ABSOLUTO dentro de su celda, no en el flujo.
   Motivo: no caben en su columna («1S 2026» mide ~53 a 16px y ~60 a 18px, y la
   caja de contenido son 43 / 132) y `text-align:right` NO sirve para anclar
   texto que desborda: reparte el espacio SOBRANTE, y con espacio negativo
   Chromium deja la línea pegada al borde de inicio y la desborda por la
   derecha. En absoluto, la caja se ajusta al texto y `right` fija su borde
   derecho exacto, desbordando hacia la izquierda sobre la columna de
   etiquetas — que es justo lo que hace el diseño (en Figma la fila de
   encabezados es un flex propio, ajeno a la rejilla de las columnas).
   El alto de la fila lo da el `height` de la celda, así que sacar el rótulo
   del flujo no la descuadra. `top` es la coordenada del centro del texto en
   Figma (20 en móvil, 30 en escritorio). */
#creditm .creditm_hrow th{
  position:relative;
  font-family:'IberPangea',Arial,sans-serif;
  font-weight:500;
  color:var(--cm-forest);
}
#creditm .creditm_th_a{position:absolute; white-space:nowrap;}
#creditm .creditm_th_v .creditm_th_a{transform:translateY(-50%);}
#creditm .creditm_th_p .creditm_th_a{left:50%; transform:translate(-50%,-50%);}

/* --- Filas de datos --- */
/* Etiqueta: mitad izquierda de la pastilla verde. */
#creditm .creditm_t tbody tr:not(.creditm_hrow) th{
  font-family:'IberPangea',Arial,sans-serif;
  font-weight:500;
  color:var(--cm-forest);
  text-align:left;
  background:var(--cm-forest1);
  border-radius:8px 0 0 8px;
  padding-top:8px;
  padding-bottom:8px;
  padding-left:8px;
  padding-right:0;
}
#creditm .creditm_lbl{display:block;}

/* Valor del periodo actual: mitad derecha de la misma pastilla. Alineado a la
   DERECHA (en Figma la cifra no está centrada en su columna: su borde derecho
   queda fijo y es el encabezado el que se centra sobre ella). */
#creditm .creditm_v{
  font-family:'IberPangea Text',Arial,sans-serif;
  font-weight:600;
  font-size:16px;
  line-height:20px;
  color:var(--cm-forest);
  text-align:right;
  white-space:nowrap;
  background:var(--cm-forest1);
  border-radius:0 8px 8px 0;
  padding-top:8px;
  padding-bottom:8px;
}

/* Valor del periodo anterior: pastilla gris propia.
   El hueco respecto a la pastilla verde es un `border-left` TRANSPARENTE. Hace
   falta `background-clip:padding-box` porque, por defecto, el fondo se pinta
   también bajo el borde y el hueco desaparecería. Así la celda ocupa hueco +
   pastilla y la tabla no necesita una columna separadora vacía. */
#creditm .creditm_p{
  font-family:'IberPangea Text',Arial,sans-serif;
  font-weight:600;
  font-size:16px;
  line-height:20px;
  color:var(--cm-sand7);
  text-align:center;
  white-space:nowrap;
  background:var(--cm-forest2);
  background-clip:padding-box;
  /* El radio se aplica a la caja de BORDE, pero el fondo se recorta a la de
     padding: el radio interior es (radio − ancho de borde). Con 8 de radio y el
     borde-hueco de la izquierda (8 en móvil, 16 a 565) las dos esquinas
     izquierdas de la pastilla salían a 0, es decir en pico. Se le suma el hueco
     al radio HORIZONTAL de la izquierda para que el interior vuelva a 8; el
     radio vertical se queda en 8 porque el borde de arriba y abajo es 0 (si se
     sumara también, la esquina saldría elíptica en vez de redonda). */
  border-radius:calc(8px + var(--cm-gap)) 8px 8px calc(8px + var(--cm-gap)) / 8px;
  padding:8px;
}

/* Volados: `<sup>` real, nunca los caracteres ¹²³ (los lectores los omiten).
   `0.645em` es la proporción exacta del diseño (11,61/18 = 10,32/16 = 9,03/14),
   así que escala sola con cada tamaño de texto y no hay que declararla tres
   veces. El desplazamiento va por `position:relative`, NO por
   `vertical-align:super`: `super` levanta la caja de línea y engorda la fila. */
#creditm .creditm_ref{
  font-size:0.645em;
  line-height:0;
  vertical-align:baseline;
  position:relative;
  top:-0.5em;
}

/* ===== Notas ===== */
#creditm .creditm_notes{
  display:flex;
  flex-direction:column;
  gap:4px;
}
#creditm .creditm_note{
  display:flex;
  align-items:flex-start;
  gap:4px;
}
#creditm .creditm_note_n{
  flex:0 0 auto;
  font-family:'IberPangea Text',Arial,sans-serif;
  font-weight:400;
  font-style:italic;
  font-size:9.03px;
  line-height:18px;
  color:var(--cm-green1);
}
#creditm .creditm_note_t{
  flex:1 1 auto;
  min-width:0;
  font-family:'IberPangea Text',Arial,sans-serif;
  font-weight:400;
  font-style:italic;
  font-size:14px;
  line-height:18px;
  color:var(--cm-sand7);
}

/* ===========================================================================
   MÓVIL (por defecto) — frame de 290. Interior 258, cuerpo 242.
   Columnas: etiqueta 116 · valor 56 · (8 hueco + 62 pastilla) = 70
   La etiqueta se mide desde su contenido: 116 - 8 de padding = 108, que es lo
   que ocupa «Apalancamiento» en una línea. Las dos primeras etiquetas se acotan
   a 80 (su ancho en Figma) para que rompan donde rompen en el diseño.
   =========================================================================== */
/* El hueco entre la pastilla verde y la gris. Vive en la tabla y no en
   `#creditm` porque `@container` no reestila su propio contenedor. */
#creditm .creditm_t{--cm-gap:8px;}
#creditm .creditm_c1{width:auto;}
#creditm .creditm_c2{width:69px;}
#creditm .creditm_c3{width:70px;}

#creditm .creditm_hrow th{height:40px;}
#creditm .creditm_th_v{font-size:16px; line-height:22px;}
#creditm .creditm_th_p{font-size:18px; line-height:22px;
                       border-left:var(--cm-gap) solid transparent;}
#creditm .creditm_th_v .creditm_th_a{top:20px; right:13px;}
#creditm .creditm_th_p .creditm_th_a{top:20px;}

#creditm .creditm_t tbody tr:not(.creditm_hrow) th{font-size:14px; line-height:18px;}
#creditm .creditm_v{padding-left:0; padding-right:16px;}
#creditm .creditm_p{border-left:var(--cm-gap) solid transparent;}

/* La etiqueta DESBORDA su columna (108 declarados sobre 95 de caja), tal cual
   el diseño: en Figma la etiqueta de «Apalancamiento» mide 108 y se solapa 13px
   con la caja del valor (`mr:-13`). Se hace así, y no estrechando el valor,
   porque el valor sí tiene que quedar anclado: su columna mide 53 justos para
   que las tres cifras alineen el borde derecho en 180 sin desbordar (con la
   columna más estrecha, `text-align:right` no las anclaría — ver la nota de la
   fila de encabezados). Las dos primeras etiquetas se acotan a 80, su ancho en
   Figma, para que rompan donde rompen en el diseño. */
#creditm .creditm_lbl{width:108px;}
#creditm .creditm_lbl1,
#creditm .creditm_lbl2{max-width:80px;}
/* El EN usa el mismo ancho (105) en las tres filas. */
#creditm.creditm-en .creditm_lbl{width:105px;}
#creditm.creditm-en .creditm_lbl1,
#creditm.creditm-en .creditm_lbl2{max-width:none;}

/* ===========================================================================
   ESCRITORIO — frame de 565. Interior 501, cuerpo 501.
   El cuerpo lleva el inset lateral de 16 (que en Figma va en los dos grupos)
   → tabla de 469. Columnas: etiqueta 183 · valor 184 · (16 hueco + 86) = 102.
   En EN la pastilla del periodo anterior mide 88 en vez de 86 (su encabezado
   `H1 2025²` es 2px más ancho que `1S 2025²`) y la etiqueta absorbe la
   diferencia, porque es la columna sin ancho declarado.
   =========================================================================== */
@container cm (min-width: 520px){

  #creditm .creditm_in{padding:24px 32px;}

  #creditm .creditm_head{padding:10px;}
  #creditm .creditm_head_t{flex:0 0 auto; white-space:nowrap;}

  #creditm .creditm_body{padding:0 16px 16px;}

  #creditm .creditm_t{--cm-gap:16px;}
  #creditm .creditm_c2{width:184px;}
  #creditm .creditm_c3{width:102px;}
  #creditm.creditm-en .creditm_c2{width:184px;}
  #creditm.creditm-en .creditm_c3{width:104px;}

  #creditm .creditm_hrow th{height:52px;}
  #creditm .creditm_th_v{font-size:18px; line-height:22px;}
  #creditm .creditm_th_p{border-left:var(--cm-gap) solid transparent;}
  #creditm .creditm_th_v .creditm_th_a{top:30px; right:29.5px;}
  #creditm .creditm_th_p .creditm_th_a{top:30px;}

  #creditm .creditm_t tbody tr:not(.creditm_hrow) th{font-size:18px; line-height:22px;}
  #creditm .creditm_v{padding-left:16px; padding-right:36px;}
  #creditm .creditm_p{border-left:var(--cm-gap) solid transparent;}

  /* Figma acota la etiqueta de la primera fila (155 en ES, 161 en EN) y en EN
     también la de la segunda (155); el resto ocupa la columna completa. */
  /* Ojo con la especificidad: la regla de móvil del EN es `#creditm.creditm-en`
     (1-2-0) y `@container` no aporta especificidad, así que hay que resetear el
     ancho también en la variante EN o el 105 del móvil se cuela aquí. */
  #creditm .creditm_lbl,
  #creditm.creditm-en .creditm_lbl{width:auto;}
  #creditm .creditm_lbl1{max-width:155px;}
  #creditm .creditm_lbl2{max-width:none;}
  #creditm.creditm-en .creditm_lbl1{max-width:161px;}
  #creditm.creditm-en .creditm_lbl2{max-width:155px;}

  /* Los saltos duros del móvil no existen en el frame de 565. */
  #creditm .creditm_bm{display:none;}
}