/* =============================================================================
   Partes de un centro de transformación
   Estático de iberdrola.com. Hermana de hogar-electrificado-soluciones-eficiencia (022).
   Dos anchos de diseño: 565 y 290. Un solo punto de cambio de layout: @container 565.
   Medidas: specs/029-partes-centro-transformacion/design/
   ============================================================================= */

/* ===== IberPangea + IberPangea Text (self-contained) =========================
   Sin la fuente real cambia el ancho de línea, y con él el ancho de las cajas —que
   se ajustan a su contenido— y el número de líneas. Las medidas dejarían de cuadrar. */
@font-face{font-family:'IberPangea';src:url('/wcorp/gc/prod/es_ES/estaticos/partes-centro-transformacion/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/partes-centro-transformacion/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/partes-centro-transformacion/fonts/IberPangea-SmBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'IberPangea';src:url('/wcorp/gc/prod/es_ES/estaticos/partes-centro-transformacion/fonts/IberPangea-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'IberPangea Text';src:url('/wcorp/gc/prod/es_ES/estaticos/partes-centro-transformacion/fonts/IberPangeaText-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;}

#transformercenter{
  --tc-green1:#007F33;  --tc-forest:#00402A;  --tc-sand1:#FFFEFF;
  --tc-sand3:#D8CFC7;   --tc-sand7:#3A3735;   --tc-ibersand:#FFF5EC;
  --tc-foco:#0792E5;
}

/* ===== Marco =================================================================
   El trazo va como `box-shadow: inset`, NO como `border`: en Figma el trazo no consume
   layout (el frame mide 565 con padding 24 y el contenido 517 = 565−48, no 515).
   Igual para las cajas, las bolitas y el contador.
   `box-sizing` incluye la RAÍZ: `#scope *` no alcanza al propio scope, y por eso la 027
   midió 50 px de más durante semanas. */
#transformercenter,#transformercenter *,
#transformercenter *::before,#transformercenter *::after{box-sizing:border-box;}
#transformercenter{
  container-type:inline-size; container-name:tc;   /* el tramo lo decide el HUECO, no la ventana */
  width:100%; max-width:980px; margin:0 auto;
  background:#FFFFFF; border-radius:15px;
  box-shadow:inset 0 0 0 1px var(--tc-sand3);
  position:relative; text-align:left; overflow:hidden;
}

/* ===== Blindaje frente al theme de Liferay (docs/VALIDACION.md) ==============
   La herencia PIERDE contra cualquier declaración del theme, por débil que sea.
   `inherit` sí es una declaración: gana al theme y conserva el valor del padre, así que
   no cambia nada visualmente y no rompe el responsive.
   `font-size`/`line-height`/`letter-spacing` aparte del `font:` abreviado, porque en la
   025 un `strong{font-size}` del theme se coló por ahí y dejó las negritas más pequeñas. */
#transformercenter *{color:inherit; font:inherit; font-size:inherit; line-height:inherit;
  letter-spacing:inherit; text-align:inherit; text-transform:inherit; white-space:inherit;
  text-indent:0; text-decoration:none; margin:0; padding:0;}
#transformercenter ul,#transformercenter ol,#transformercenter li{list-style:none;}
#transformercenter li::marker{content:none;}
#transformercenter li::before{content:'' !important; display:none !important; margin:0 !important;}
/* `#transformercenter *` NO alcanza a los pseudo-elementos: se blindan aparte y SIN
   `content`, para no crear pseudos donde no hay. */
#transformercenter *::before,#transformercenter *::after{margin:0; padding:0; text-indent:0;
  letter-spacing:inherit; text-transform:inherit;}
#transformercenter img{display:block; max-width:100%;}
#transformercenter svg{display:block;}
#transformercenter button{font:inherit; cursor:pointer; border:0; background:transparent;
  color:inherit; appearance:none; -webkit-appearance:none;}
/* La RAÍZ tiene que declarar todo lo heredable: si no, hereda del portal y el `inherit`
   de arriba propaga fielmente el valor del theme hacia dentro. */
#transformercenter{
  font-family:'IberPangea',sans-serif; font-size:12px; line-height:1.1;
  font-weight:500; font-style:normal; color:var(--tc-forest);
  letter-spacing:normal; text-transform:none; white-space:normal; text-decoration:none;
}
/* `display` NO se hereda, así que `inherit` no vale: se declara elemento a elemento y con
   `!important`. Nada de esto cambia entre tramos, así que puede vivir fuera del
   @container sin comerse el responsive. */
#transformercenter{display:block !important;}
#transformercenter .tc_escena,#transformercenter .tc_arte{display:block !important;}
#transformercenter .tc_titulo{display:block !important;}
#transformercenter .tc_et{display:inline !important;}
#transformercenter .tc_fuerte{display:inline !important;}
/* El contador es UN solo item flex (`.tc_val`) con dos inlines dentro. Si se cuelgan del
   flex directamente, `display:inline` se blockifica, pasan a ser dos items y el navegador
   se come el espacio de " de 6" -> se lee "1de 6" (lección de la 022). */
#transformercenter .tc_val,#transformercenter .tc_cur{display:inline !important;}
/* En una caja flex no basta con `display` y `flex-direction`: el theme mete
   `div,ul{flex-direction:column-reverse; gap:0; align-items:flex-end;
   justify-content:flex-end; flex-wrap:nowrap}` y pisa lo que no declaremos.
   `align-items:stretch` y NUNCA `flex-start`: `flex-start` quita el estirado por defecto
   y encoge los hijos al ancho de su texto (así rompí la 027). */
#transformercenter .tc_inner{
  display:flex !important; flex-direction:column; flex-wrap:nowrap;
  align-items:stretch; justify-content:flex-start;}
#transformercenter .tc_caja{
  display:flex !important; flex-direction:row; flex-wrap:nowrap;
  align-items:center; justify-content:flex-start; gap:10px;}
#transformercenter .tc_pie{
  display:flex !important; flex-direction:row; flex-wrap:nowrap;
  align-items:center; justify-content:space-between; gap:8px;}
#transformercenter .tc_nav{
  display:flex !important; flex-direction:row; flex-wrap:nowrap;
  align-items:center; justify-content:flex-end; gap:16px;}
#transformercenter .tc_contador,#transformercenter .tc_num{
  display:flex !important; flex-direction:row; flex-wrap:nowrap;
  align-items:center; justify-content:center;}

/* =============================================================================
   TRAMO MÓVIL (base) — diseño de 290
   ============================================================================= */
#transformercenter .tc_inner{padding:24px 16px; gap:24px;}

#transformercenter .tc_titulo{font-weight:400; font-size:30px; line-height:34px;
  color:var(--tc-green1) !important;}
#transformercenter .tc_titulo b{font-weight:600;}
/* En móvil el título reflowa solo y da dos líneas; el salto forzado es sólo de desktop.
   Y al revés con la etiqueta 2: «Cables de media tensión» va en UNA línea a 565 y en DOS
   a 290 (nodos 21423:5611 y 21423:11064). Es la única etiqueta que parte distinto según
   el tamaño, y fija el ancho de su caja: 192 arriba y 128 abajo. */
#transformercenter .tc_salto{display:none !important;}
#transformercenter .tc_salto2{display:inline !important;}

/* ===== Escenario =============================================================
   El lienzo ESCALA con el hueco y las cajas NO (mismo criterio que la 019/022).
   El `aspect-ratio` es el del viewBox del SVG (259x269 y 517x476), no el del grupo de
   Figma: manda el espacio de coordenadas del SVG, que es lo que ancla los % de las cajas.
   Se topa en 517 para empalmar sin salto con el tramo desktop, que también mide 517.
   Se centra con `align-self`, no con `margin-inline:auto`: en un item flex el `auto` se
   resuelve en el layout y `getComputedStyle` lo devuelve unas veces sí y otras no, así que
   la puerta de aislamiento lo marcaba en rojo sin que nada estuviera mal (lección 022/027). */
#transformercenter .tc_escena{position:relative; width:100%; max-width:400px;
  align-self:center; aspect-ratio:259/269; container-type:inline-size;}

/* ===== El tope del escenario en móvil (decisión del usuario, 17 sep 2026) ====
   Topa el ESCENARIO y nada más: el título y el pie siguen a ancho completo, como en todas
   las demás piezas. El lienzo se topa en **400** y se centra; 400 es el contenido de una
   ventana de 432, o sea por encima de cualquier móvil real, así que de 290 a 432 no cambia
   nada y sólo se centra en el tramo intermedio. */

#transformercenter .tc_arte{position:absolute; inset:0;}
#transformercenter .tc_arte svg{width:100%; height:100%;}

/* ===== Ilustración conmutable ================================================
   Un solo SVG por tramo con seis partes. El JS sólo mueve `data-activa`; la opacidad la
   pone el CSS. El `opacity="0.2"` que traen los grupos en el fichero es un atributo de
   presentación: pierde contra estas reglas, y a cambio deja el SVG suelto siendo un
   estado 1 válido para el `<noscript>`.
   Las partes 2 y 6 viven DENTRO de la 1 y la 5, así que NO se etiqueta el padre —las
   opacidades anidadas se multiplican—: se etiquetan sus hermanos. Por eso la parte 1 son
   seis nodos y la 5 son nueve. Ver scripts/prep-svg-029.py. */
#transformercenter .tc_arte [data-parte]{opacity:.2; transition:opacity 200ms ease;}
#transformercenter[data-activa="1"] .tc_arte [data-parte="1"],
#transformercenter[data-activa="2"] .tc_arte [data-parte="2"],
#transformercenter[data-activa="3"] .tc_arte [data-parte="3"],
#transformercenter[data-activa="4"] .tc_arte [data-parte="4"],
#transformercenter[data-activa="5"] .tc_arte [data-parte="5"],
#transformercenter[data-activa="6"] .tc_arte [data-parte="6"]{opacity:1;}
@media (prefers-reduced-motion: reduce){
  #transformercenter .tc_arte [data-parte]{transition:none;}
}

/* ===== Cajas navegables ======================================================
   Tamaño FIJO (se ajustan a su contenido, con los saltos forzados del HTML) sobre un
   lienzo que escala. Por eso NO se anclan por una esquina en %, sino por el PUNTO DONDE
   LAS TOCA SU CONECTOR: el mismo % al que llega la línea, menos la distancia fija de ese
   punto al borde de la caja. Anclando por la esquina, en la 027 el desfase era de 0,5 px
   a 290 pero de 15 px a 520.
   La 1 la toca la línea por arriba, la 3 por la derecha y las otras cuatro por la
   izquierda. Valores en design/escenario/context.md. */
/* --- Por que el movil va en `cqi` y no en px --------------------------------------------
   Con las cajas en px fijos sobre un lienzo que escala, la composicion solo cuadra al ancho
   de diseno: a 400 el lienzo iba a 1,55x pero las cajas seguian midiendo lo mismo, asi que
   la caja 2 dejaba de llegar al borde derecho y quedaban 70 px muertos. Centrar el lienzo no
   arregla eso: lo que queda descentrado es la tinta, no la caja.
   Por eso en este tramo escala TODO por igual —dibujo, cajas, numeros y texto—: `1cqi` es el
   1 % del ancho del lienzo, y 1 px de diseno son 100/259 = 0,3861cqi. A 258 sale exactamente
   el diseno; a 400, el mismo diseno un 55 % mas grande, sin huecos.
   El escenario tiene `container-type` para esto, y el contenedor del tramo lleva NOMBRE (`tc`)
   para que las `@container tc` sigan resolviendo contra la raiz y no contra el escenario. */
#transformercenter .tc_caja{position:absolute; min-height:17.7606cqi;
  padding:3.8610cqi; gap:3.8610cqi; border-radius:5.7915cqi; background:#FFFFFF;
  box-shadow:inset 0 0 0 1px var(--tc-sand3); text-align:left;}
#transformercenter .tc_caja--1{left:calc(7.4498% - 7.0753cqi); top:77.7989%;}
#transformercenter .tc_caja--2{left:50.3073%;  top:calc(68.0591% - 8.6035cqi);}
#transformercenter .tc_caja--3{right:50.4649%; top:calc(9.0375% - 8.2714cqi);}
#transformercenter .tc_caja--4{left:48.6977%;  top:calc(48.6294% - 7.3842cqi);}
#transformercenter .tc_caja--5{left:53.7757%;  top:calc(26.2082% - 5.9452cqi);}
#transformercenter .tc_caja--6{left:53.7486%;  top:calc(13.9405% - 14.4788cqi);}

/* --- EN, y SÓLO en el tramo estrecho ---------------------------------------------------
   «Medium-voltage cables» no cabe en una línea en el lienzo de 259 (se salía 33 px del marco a
   290), así que abajo va en dos y su caja mide 140 en vez de los 128 del ES. Y la 3, «Medium-
   voltage switchgear», también mide 140 contra 128. Las dos llegan justas a un borde del lienzo
   —la 2 al derecho y la 3 al izquierdo—, así que esos 12 de más las sacaban ~2 px del marco en el
   punto más ancho del tramo. Se meten hacia dentro 2 y 3 unidades de diseño: el conector sigue
   entrando por el mismo borde —llega en diagonal y queda dentro de la caja igual—, y quedan 8 y
   2,6 px de margen.

   El `@container` NO es decorativo: `#scope:lang(en) .tc_caja--2` pesa más que
   `#scope .tc_caja--2`, así que fuera de aquí se colaría también en escritorio y movería la caja
   casi 60 unidades. Me pasó, y no lo vi porque estaba truncando la salida del arnés.
   Va con `:lang()`, nunca con `[lang="en"]`: el portal sirve `en-US` (lección de la 021). */
@container tc (max-width: 564px){
  #transformercenter:lang(en) .tc_caja--2{left:calc(50.3073% - 0.7722cqi);}
  #transformercenter:lang(en) .tc_caja--3{right:calc(50.4649% - 1.1583cqi);}
}

#transformercenter .tc_num{flex:0 0 auto; width:9.2664cqi; height:9.2664cqi;
  border-radius:20.4633cqi;
  background:var(--tc-sand1); box-shadow:inset 0 0 0 1px var(--tc-green1);
  font-weight:600; font-size:6.1776cqi; line-height:1.071; color:var(--tc-forest);
  text-align:center;}
#transformercenter .tc_et{white-space:nowrap; font-weight:500; font-size:4.6332cqi;
  line-height:1.1; color:var(--tc-forest);}
#transformercenter .tc_fuerte{font-weight:700;}

/* La CAJA tiene dos estados (componente `21417:35`): `default` y `hover`, y el comentario del
   diseño dice que el hover es el mismo que el activo. Fondo Iberdrola Sand y trazo Forest.
   El NÚMERO, en cambio, tiene TRES (componente `21417:30`): `white` por defecto, `green1`
   cuando su caja está activa y **`forest` en hover**. Son colores distintos a propósito, así
   que el hover no es «el activo» del todo: coinciden en la caja y no en la bolita. */
#transformercenter .tc_caja[aria-pressed="true"]{
  background:var(--tc-ibersand); box-shadow:inset 0 0 0 1px var(--tc-forest);}
#transformercenter .tc_caja[aria-pressed="true"] .tc_num{
  background:var(--tc-green1); box-shadow:none; color:var(--tc-sand1);}
@media (hover:hover){
  #transformercenter .tc_caja:hover{
    background:var(--tc-ibersand); box-shadow:inset 0 0 0 1px var(--tc-forest);}
  /* `:not([aria-pressed="true"])`: pasar por encima de la que ya está activa no la degrada
     a hover; sigue mandando su verde. */
  #transformercenter .tc_caja:not([aria-pressed="true"]):hover .tc_num{
    background:var(--tc-forest); box-shadow:none; color:var(--tc-sand1);}
}
#transformercenter .tc_caja:focus-visible{outline:3px solid var(--tc-foco); outline-offset:3px;}

/* ===== Pie ===================================================================
   El contador es bicolor dentro del mismo literal: el número en Green 1 y el " de 6"
   en Forest. */
#transformercenter .tc_pie{height:32px;}
#transformercenter .tc_contador{height:32px; padding:5px 16px; border-radius:24px;
  box-shadow:inset 0 0 0 1px var(--tc-forest);
  font-family:'IberPangea Text',serif; font-weight:400; font-style:italic;
  font-size:14px; line-height:18px; color:var(--tc-forest);}
#transformercenter .tc_cur{color:var(--tc-green1);}
#transformercenter .tc_flecha{width:32px; height:32px; background-repeat:no-repeat;
  background-position:center; background-size:32px 32px;}
#transformercenter .tc_prev{background-image:url('/wcorp/gc/prod/es_ES/estaticos/partes-centro-transformacion/images/ico-prev.svg');}
#transformercenter .tc_next{background-image:url('/wcorp/gc/prod/es_ES/estaticos/partes-centro-transformacion/images/ico-next.svg');}
/* El hover de las flechas no está en este Figma (sólo Default y Disabled); se toma del
   sistema de diseño tal como lo dejaron la 020 y la 022, sus hermanas. */
@media (hover:hover){
  #transformercenter .tc_prev:not(:disabled):hover{background-image:url('/wcorp/gc/prod/es_ES/estaticos/partes-centro-transformacion/images/ico-prev-hover.svg');}
  #transformercenter .tc_next:not(:disabled):hover{background-image:url('/wcorp/gc/prod/es_ES/estaticos/partes-centro-transformacion/images/ico-next-hover.svg');}
}
#transformercenter .tc_flecha:disabled{opacity:.5; cursor:default;}
#transformercenter .tc_flecha:focus-visible{outline:3px solid var(--tc-foco); outline-offset:3px;}

/* =============================================================================
   TRAMO DESKTOP — diseño de 565, hasta 980
   El escenario se topa en 517 y se centra: las cajas van ancladas en % sobre ese espacio
   de coordenadas, así que si creciera el dibujo saldría más grande que en Figma.
   ============================================================================= */
@container tc (min-width: 565px){
  #transformercenter .tc_inner{padding:32px 24px 24px;}

  #transformercenter .tc_titulo{font-size:32px; line-height:36px;}
  #transformercenter .tc_salto{display:inline !important;}
  #transformercenter .tc_salto2{display:none !important;}

  #transformercenter .tc_escena{max-width:517px; aspect-ratio:517/476;}

  /* Arriba el lienzo mide SIEMPRE 517 —su ancho de diseno—, asi que aqui los px son
     exactos y no hace falta escalar nada. */
  #transformercenter .tc_caja{min-height:52px; padding:10px; gap:10px; border-radius:15px;}
  #transformercenter .tc_num{border-radius:53px;}
  #transformercenter .tc_et{font-size:12px;}
  #transformercenter .tc_caja--1{left:calc(18.6182% - 95.903px); top:87.4172%;}
  #transformercenter .tc_caja--2{left:60.6083%;  top:calc(94.4288% - 26.258px);}
  #transformercenter .tc_caja--3{right:73.6944%; top:calc(7.4532% - 26.856px);}
  #transformercenter .tc_caja--4{left:72.9207%;  top:calc(82.2103% - 25.516px);}
  #transformercenter .tc_caja--5{left:73.4878%;  top:calc(53.7080% - 27.627px);}
  #transformercenter .tc_caja--6{left:74.1747%;  top:calc(7.8353% - 25.742px);}

  #transformercenter .tc_num{width:32px; height:32px; font-size:18px;}
  #transformercenter .tc_caja--1{left:calc(18.6182% - 95.903px); top:87.4172%;}
}

/* ===== Fallback sin JS =======================================================
   El `<noscript>` trae los dos tamaños; cada tramo enseña el suyo. Los ficheros conservan
   el `opacity="0.2"` de Figma, así que sin JS se ve el estado 1, que es el que sirve el
   HTML. Las cajas siguen encima, en su sitio. */
#transformercenter .tc_fb{position:absolute; inset:0; width:100%; height:100%;}
#transformercenter .tc_fb--desk{display:none;}
@container tc (min-width: 565px){
  #transformercenter .tc_fb--desk{display:block;}
  #transformercenter .tc_fb--mob{display:none;}
}