/* ========================================================================== Carga bidireccional V2G — infografía interactiva Scope: #cbv2g · BEM cb_ · Figma: sección 17812:5954 (565x397 / 290x702) ========================================================================== */ @font-face{font-family:'IberPangea';src:url(/wcorp/gc/prod/es_ES/estaticos/carga-bidireccional-v2g/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/carga-bidireccional-v2g/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/carga-bidireccional-v2g/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/carga-bidireccional-v2g/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/carga-bidireccional-v2g/fonts/IberPangeaText-SmBold.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap;} /* ===== Tokens de Figma (get_variable_defs 17812:5954) ===== */ #cbv2g{ --cb-green1:#007F33; /* Green 1 */ --cb-green:#00A443; /* Iberdrola Green — thumb del scroll */ --cb-forest:#00402A; /* Iberdrola Forest */ --cb-forest1:#DCEBE1; /* Forest 1 — fondo de la ilustración */ --cb-sand:#FFF5EC; /* Iberdrola Sand — fondo de tarjeta */ --cb-sand1:#FFFEFF; /* Sand 1 */ --cb-sand3:#D8CFC7; /* Sand 3 — bordes */ --cb-sand7:#3A3735; /* Sand 7 — cuerpo de texto */ --cb-white:#FFFFFF; --cb-ico:url(/wcorp/gc/prod/es_ES/estaticos/carga-bidireccional-v2g/images/boton-mas.svg?t=001); } /* ===== Contenedor ===== El padding va en el WRAPPER INTERNO: @container no reestila su propio contenedor. `container-name` es obligatorio: sin nombre, cualquier descendiente con container-type se convierte en la referencia de las @container de dentro (lección de la 011). */ #cbv2g{ container-type:inline-size; container-name:cb; /* 980 es el máximo por si algún día va a ancho completo; el uso real es el contenido interior de Liferay, que mide 746. Al crecer NO cambia el alto: la ilustración se queda a su tamaño de diseño y el ancho extra se lo llevan los botones y el texto (D23). */ width:100%; max-width:980px; margin:0 auto; /* sin margen vertical: la pieza se incrusta */ box-sizing:border-box; position:relative; text-align:left; font-family:'IberPangea Text',Arial,sans-serif; font-size:16px; line-height:20px; color:var(--cb-sand7); background:var(--cb-white); border:1px solid var(--cb-sand3); border-radius:15px; overflow:hidden; } /* ===== Blindaje frente al CSS del sitio anfitrión (Liferay) ===== La HERENCIA pierde contra cualquier declaración directa del theme, aunque sea débil (`p{color:#5a5a5a}`, 0-0-1, sin !important). Todo lo que se herede en vez de declararse, el CMS lo pisa. Ver docs/VALIDACION.md → Puerta de aislamiento. */ #cbv2g *,#cbv2g *::before,#cbv2g *::after{box-sizing:border-box;} #cbv2g *{ 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; } /* `#cbv2g *` NO alcanza a los pseudo-elementos → se blindan aparte (sin `content`, para no crear pseudos donde no hay). El theme les mete margin negativo. */ #cbv2g *::before,#cbv2g *::after{ margin:0; padding:0; text-indent:0; letter-spacing:inherit; text-transform:inherit; } /* Listas: en el `li` además del `ul` (list-style se hereda y el theme lo declara directo); `::marker` aparte (un `content` en el marcador se pinta aun con list-style:none); y el `li::before` con !important porque el theme pinta ahí SU viñeta con !important. */ #cbv2g ul,#cbv2g ol,#cbv2g li{list-style:none;} #cbv2g li::marker{content:none;} #cbv2g li::before{content:'' !important; margin:0 !important;} #cbv2g img,#cbv2g svg{display:block; max-width:100%;} #cbv2g button{background:none; border:0; font:inherit; color:inherit; cursor:pointer;} /* -1px: el borde exterior no debe restar ancho de contenido (Figma: 517 en 565, 258 en 290) */ #cbv2g .cb__inner{ padding:23px; display:flex; flex-direction:column; gap:24px; } /* ===== B1 · Titular ===== */ #cbv2g .cb_title{ font-family:'IberPangea',Arial,sans-serif; font-weight:400; font-size:32px; line-height:36px; color:var(--cb-green1); } #cbv2g .cb_title_r{font-weight:400;} #cbv2g .cb_title_b{font-weight:600;} /* SmBold, como en Figma */ #cbv2g .cb_br290{display:none;} /* ===== Cuerpo: 2 columnas de 250.5 con gap 16 (517 de contenido) ===== */ /* `stretch`: manda el alto de la ILUSTRACIÓN (que lo saca de su proporción) y la columna de los botones se adapta a ella (D19). Con `start` y un alto fijo en el conmutador, en la franja previa al salto a móvil la imagen quedaba más baja que los botones. */ #cbv2g .cb_body{ display:grid; grid-template-columns:250.5px minmax(0,1fr); gap:16px; align-items:stretch; } /* ===== B4 · Ilustración (4 estados superpuestos) ===== El fondo verde y el radio los pinta el CONTENEDOR (Figma: bg Forest 1, radius 15, alto 253), así el SVG puede centrarse sin que aparezcan franjas de otro color. */ /* El recuadro toma la PROPORCIÓN del SVG (251x253) en vez de un alto fijo: así la ilustración lo llena siempre por completo y crece con él, sin que quede hueco dentro (D18). El alto sale solo: 253 en desktop (250,5 de ancho) y 260 en móvil (258). */ #cbv2g .cb_ill{ position:relative; height:100%; background:var(--cb-forest1); border-radius:15px; overflow:hidden; } #cbv2g .cb_ill_capa,#cbv2g .cb_ill_img{ position:absolute; inset:0; width:100%; height:100%; } #cbv2g .cb_ill_capa{opacity:0; visibility:hidden;} /* `cover` anclado a la DERECHA (D20): el recuadro se llena siempre —sin hueco— y lo que se recorta es el margen IZQUIERDO del dibujo, que es puramente decorativo (árbol y setos). Todo lo que explica la infografía —el coche, el cargador, la casa, la torre y las flechas de los tres estados— vive en el centro y a la derecha, así que no se pierde información. Verificado en los 4 estados al ancho más desfavorable. */ #cbv2g .cb_ill_capa img{width:100%; height:100%; object-fit:cover; object-position:right center;} #cbv2g[data-estado="0"] .cb_ill_capa--0, #cbv2g[data-estado="1"] .cb_ill_capa--1, #cbv2g[data-estado="2"] .cb_ill_capa--2, #cbv2g[data-estado="3"] .cb_ill_capa--3{opacity:1; visibility:visible;} /* ===== Conmutador: lista y paneles comparten el hueco (la pieza NO cambia de alto) ===== En desktop toma el alto de la fila (= el de la ilustración); en móvil, apilado, vale el 253 de Figma. */ #cbv2g .cb_switch{position:relative; height:253px;} /* ===== B2 · Lista de 3 tarjetas ===== */ #cbv2g .cb_list{ position:absolute; inset:0; display:flex; flex-direction:column; gap:16px; } #cbv2g .cb_list_i{display:flex; flex:1 1 0; min-height:0;} #cbv2g .cb_card{ flex:1 1 0; width:100%; min-height:0; display:flex; align-items:center; gap:8px; padding:16px; background:var(--cb-sand); border-radius:8px; text-align:left; } #cbv2g .cb_card_t{ flex:1 1 0; min-width:0; font-family:'IberPangea',Arial,sans-serif; font-size:16px; line-height:normal; color:var(--cb-forest); } #cbv2g .cb_r{font-weight:400;} #cbv2g .cb_b{font-weight:600;} /* hover/foco: Figma dibuja la 3ª tarjeta con borde Sand 3 y el botón en Forest (D06). box-shadow en vez de border: no altera el layout ni el padding de 16. */ #cbv2g .cb_card:hover,#cbv2g .cb_card:focus-visible{ box-shadow:inset 0 0 0 1px var(--cb-sand3); } #cbv2g .cb_card:hover .cb_ico,#cbv2g .cb_card:focus-visible .cb_ico{ background:var(--cb-forest); } #cbv2g .cb_card:focus-visible,#cbv2g .cb_close:focus-visible{ outline:2px solid var(--cb-green1); outline-offset:2px; } /* Icono +/x : un solo asset (13.5x13.5, Figma inset 28.91% de 32) usado como MÁSCARA, así el color se controla por CSS (blanco en la tarjeta, verde en el panel). */ #cbv2g .cb_ico{ flex:0 0 auto; width:32px; height:32px; border-radius:20px; background:var(--cb-green1); display:flex; align-items:center; justify-content:center; } #cbv2g .cb_ico::before{ content:''; width:13.5px; height:13.5px; background:var(--cb-sand1); -webkit-mask:var(--cb-ico) center/13.5px 13.5px no-repeat; mask:var(--cb-ico) center/13.5px 13.5px no-repeat; } /* ===== B3 · Panel abierto ===== */ #cbv2g .cb_panel{ position:absolute; inset:0; display:flex; flex-direction:column; gap:8px; padding:15px; /* 16 - 1 del borde */ background:var(--cb-white); border:1px solid var(--cb-sand3); border-radius:16px; opacity:0; visibility:hidden; } #cbv2g[data-estado="1"] #cbv2g-p1, #cbv2g[data-estado="2"] #cbv2g-p2, #cbv2g[data-estado="3"] #cbv2g-p3{opacity:1; visibility:visible;} #cbv2g:not([data-estado="0"]) .cb_list{opacity:0; visibility:hidden;} #cbv2g .cb_panel_head{display:flex; align-items:center; gap:8px;} #cbv2g .cb_panel_t{ flex:1 1 0; min-width:0; font-family:'IberPangea',Arial,sans-serif; font-size:18px; line-height:22px; color:var(--cb-green1); } #cbv2g .cb_close{ flex:0 0 auto; width:32px; height:32px; border-radius:20px; background:var(--cb-sand1); border:1px solid var(--cb-green1); display:flex; align-items:center; justify-content:center; } #cbv2g .cb_close .cb_ico{ width:auto; height:auto; background:none; border-radius:0; transform:rotate(-45deg); /* el "+" girado ES la "x" (variante Estado=Close) */ } #cbv2g .cb_close .cb_ico::before{background:var(--cb-green1);} /* Texto con scroll interno: el panel NO crece, la pieza mantiene su alto (D01) */ /* Desplazador PROPIO, como en Figma (nodo `desplazador`: barra de 4 px con el gap de 8). La barra nativa no sirve: en macOS es overlay (no se ve y no reserva hueco) y en Windows es clásica (sí reserva), así que el ancho del texto —y por tanto dónde rompen las líneas— cambiaría según el sistema. Medido: 215 con barra nativa frente a los 211 de Figma. */ #cbv2g .cb_panel_body{position:relative; flex:1 1 0; min-height:0; display:flex;} #cbv2g .cb_sb{ position:absolute; top:0; right:-2px; width:4px; height:100%; border-radius:2px; background:var(--cb-sand3); opacity:0; } #cbv2g .cb_sb_th{ position:absolute; left:0; width:4px; top:0; height:0; border-radius:2px; background:var(--cb-green); } #cbv2g .cb_panel_body[data-scroll] .cb_sb{opacity:1;} #cbv2g .cb_panel_text{ flex:1 1 0; min-width:0; overflow-y:auto; padding-right:8px; /* 218.5 - 8 = 210.5 de texto (Figma: 211) */ scrollbar-width:none; /* la barra la pintamos nosotros */ font-family:'IberPangea Text',Arial,sans-serif; font-weight:400; font-size:16px; line-height:20px; color:var(--cb-sand7); } #cbv2g .cb_panel_text b{font-weight:600;} #cbv2g .cb_panel_text::-webkit-scrollbar{display:none;} /* ===== Sin animaciones ===== El diseño no plantea motion (no hay prototipo en Figma) y el usuario decidió cambio instantáneo (D16): ni el panel ni la ilustración llevan transición. Al no haber transición tampoco hace falta retrasar `visibility`, que era lo que rompía el foco al abrir. */ /* ========================================================================== Móvil: apilado (Figma 290x702) — un solo punto de cambio de layout ========================================================================== */ @container cb (max-width:459px){ #cbv2g .cb__inner{padding:23px 15px;} #cbv2g .cb_body{grid-template-columns:minmax(0,1fr);} /* apilado: aquí el ancho manda, así que el recuadro toma la proporción del SVG y la imagen lo llena por completo (D18) */ #cbv2g .cb_ill{aspect-ratio:251/253; height:auto;} #cbv2g .cb_br290{display:inline;} } /* Sin JS: los 4 SVG no se inyectan → se ve el