/* =============================================================================
   Ejemplo práctico funcionamiento de una central eléctrica virtual (VPP)
   Estático de iberdrola.com · scope #vppejemplo · clases ve_
   Diseño a 980 (el que se mide), 565 y 290 (cómo se recoloca).
   UN solo punto de cambio de disposición: @container ve (max-width: 459.98px) → el tramo de 290.
   Entre 565 y 980, lo que cambia se interpola con el ancho (clamp + cqi) y se topa en el valor de 980.
   Medidas: specs/ejemplo-practico-centrales-virtuales/design/ (Figma es la única fuente).
   Sin ninguna `transition` (A-003): los estados cambian de golpe, como las variantes de Figma.
   ============================================================================= */

/* ===== IberPangea + IberPangea Text (self-contained) ======================= */
@font-face{font-family:'IberPangea';src:url('/wcorp/gc/prod/es_ES/estaticos/ejemplo-practico-centrales-virtuales/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/ejemplo-practico-centrales-virtuales/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/ejemplo-practico-centrales-virtuales/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/ejemplo-practico-centrales-virtuales/fonts/IberPangeaText-SmBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}

/* ===== Tokens (design/tokens.json) ========================================= */
#vppejemplo{
  --ve-green1:#007F33;   /* Green 1: título, «+», paso pulsado, foco */
  --ve-green:#00A443;    /* Iberdrola Green: viñetas, borde del botón y del panel de las 14:00 */
  --ve-green4:#5BD38C;   /* Green 4: botón de las 14:00 al pasar y pulsado */
  --ve-forest:#00402A;   /* Iberdrola Forest: textos */
  --ve-sand:#FFF5EC;     /* Iberdrola Sand: tarjetas, pasos, «Sin una VPP» */
  --ve-sand1:#FFFEFF;    /* Sand 1: texto e iconos del paso pulsado */
  --ve-sand3:#D8CFC7;    /* Sand 3: marco de la pieza y del detalle */
  --ve-sky1:#007ACB;     /* Sky 1: botón de las 21:00 */
  --ve-sky:#0DA9FF;      /* Iberdrola Sky: borde del panel de las 21:00 */
  --ve-sky4:#6BDAFF;     /* Sky 4: borde del botón de las 21:00 al pasar */
  --ve-blanco:#FFFFFF;
}

/* ===== Raíz: contenedor CON NOMBRE y sin caja (el marco va en .ve_in, para que `cqi` mida la pieza) ===
   `margin:0 auto` SIN margen vertical: se incrusta y el sitio pone su espaciado. Como mucho 980, centrada (P4). */
#vppejemplo{
  container-name:ve; container-type:inline-size;
  width:100%; max-width:980px; margin:0 auto; padding:0; box-sizing:border-box;
  position:relative; background:transparent; border:0;
}

/* ===== Blindaje frente al theme de Liferay (F4) ============================ */
#vppejemplo *{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;}
#vppejemplo ul,#vppejemplo ol,#vppejemplo li{list-style:none;}
#vppejemplo li::marker{content:none;}
#vppejemplo li::before{content:'' !important; display:none !important; margin:0 !important;}
/* `#vppejemplo *` no alcanza a los pseudo-elementos: se blindan aparte y SIN `content`. */
#vppejemplo *::before,#vppejemplo *::after{margin:0; padding:0; text-indent:0;
  letter-spacing:inherit; text-transform:inherit;}
#vppejemplo button{cursor:pointer; appearance:none; -webkit-appearance:none; border-radius:0;
  width:auto; height:auto; line-height:inherit; outline:none; text-align:inherit;}
#vppejemplo img{border:0; max-width:none; max-height:none;}
#vppejemplo svg{overflow:visible;}
#vppejemplo strong{font-weight:600;}
/* La RAÍZ declara todo lo heredable: si no, hereda del portal y el `inherit` de arriba propaga el valor del theme. */
#vppejemplo{
  font-family:'IberPangea Text',sans-serif; font-size:16px; line-height:20px;
  font-weight:400; font-style:normal; color:var(--ve-forest);
  letter-spacing:normal; text-align:left; text-transform:none; white-space:normal;
  text-decoration:none; word-break:normal; overflow-wrap:break-word; font-synthesis:none;
}
/* Sólo-lector (el h3 de cada hora con JS, spec §7). Blindado: el theme no lo puede sacar a la vista. */
#vppejemplo .ve_sr,#vppejemplo[data-js] .ve_panel_h{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;}
/* Sin transiciones (A-003): el theme no puede añadirlas a los controles. */
#vppejemplo .ve_hora,#vppejemplo .ve_paso_fila,#vppejemplo .ve_mas,#vppejemplo .ve_pausa{transition:none !important; animation:none !important;}

/* `display` NO se hereda: elemento a elemento y con `!important`, con la dirección y el hueco de cada flex.
   Lo que cambia en el tramo móvil se reafirma allí. */
#vppejemplo{display:block !important;}
#vppejemplo .ve_in{display:flex !important; flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:32px;}
#vppejemplo .ve_cab{display:flex !important; flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:24px;}
#vppejemplo .ve_tit,#vppejemplo .ve_ent{display:block !important;}
#vppejemplo .ve_comp{display:flex !important; flex-direction:column; flex-wrap:nowrap; align-items:stretch;}
#vppejemplo .ve_datos{display:flex !important; flex-direction:row; flex-wrap:nowrap; align-items:stretch;}
#vppejemplo .ve_dato{display:flex !important; flex-direction:column; flex-wrap:nowrap; align-items:center; justify-content:center; gap:10px;}
#vppejemplo .ve_dato_txt{display:block !important;}
#vppejemplo .ve_cifra{display:block !important;}
#vppejemplo .ve_etq{display:inline !important;}
#vppejemplo .ve_ico{display:block !important;}
#vppejemplo .ve_ico_svg{display:block !important;}
#vppejemplo .ve_empresas{display:flex !important; flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:6px;}
#vppejemplo .ve_emp_cab{display:flex !important; flex-direction:row; flex-wrap:nowrap; align-items:center; gap:10px;}
#vppejemplo .ve_emp_tit{display:block !important;}
#vppejemplo .ve_vinetas{display:flex !important; flex-direction:column; flex-wrap:nowrap; align-items:stretch;}
#vppejemplo .ve_vin{display:flex !important; flex-direction:row; flex-wrap:nowrap; align-items:center; gap:10px;}
#vppejemplo .ve_vin_txt{display:block !important; flex:1 1 0;}
#vppejemplo .ve_escena{display:flex !important; flex-direction:column; flex-wrap:nowrap; align-items:stretch;}
#vppejemplo .ve_horas{display:none !important;}                 /* sin JS no hay nada que elegir (RF-09) */
#vppejemplo[data-js] .ve_horas{display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:16px; align-items:start;}
/* flex y arriba: un <button> centra su contenido en vertical, y en la pestaña (59) el texto va arriba, a 8. */
#vppejemplo .ve_hora{display:flex !important; flex-direction:row; flex-wrap:nowrap; align-items:flex-start; justify-content:center;}
#vppejemplo .ve_lienzo{display:block !important;}
#vppejemplo .ve_marco_ilus{display:block !important;}
#vppejemplo .ve_dib,#vppejemplo .ve_pts,#vppejemplo .ve_pts_svg{display:block !important;}
#vppejemplo .ve_paneles{display:flex !important; flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:32px;}
#vppejemplo[data-js] .ve_paneles{display:grid !important; grid-template-columns:minmax(0, 1fr); gap:0;}
#vppejemplo .ve_panel{display:flex !important; flex-direction:column; flex-wrap:nowrap; align-items:stretch; justify-content:flex-start; gap:16px;}
#vppejemplo .ve_panel_h{display:block !important;}
#vppejemplo .ve_txt{display:flex !important; flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:24px;}
#vppejemplo .ve_ctx{display:block !important;}
#vppejemplo .ve_bloque{display:flex !important; flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:16px;}
#vppejemplo .ve_sub{display:block !important;}
#vppejemplo .ve_pasos{display:flex !important; flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:8px;}
#vppejemplo .ve_paso{display:block !important;}
#vppejemplo .ve_paso_fila{display:flex !important; flex-direction:row; flex-wrap:nowrap; align-items:center; gap:10px;}
#vppejemplo .ve_paso_txt{display:block !important;}
#vppejemplo .ve_mas{display:block !important;}
#vppejemplo .ve_nota{display:flex !important; flex-direction:row; flex-wrap:nowrap; align-items:center; gap:10px;}
#vppejemplo .ve_nota_txt{display:block !important;}
#vppejemplo .ve_detalle{display:flex !important; flex-direction:column; flex-wrap:nowrap; align-items:stretch;}
#vppejemplo .ve_pausa{display:flex !important; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:center;}
#vppejemplo .ve_pausa_ico{display:block !important;}
/* UN solo mecanismo para ocultar: `hidden`. Sin esto el `display:… !important` de arriba lo anula.
   Antes de que `main.js` marque `data-listo`, los paneles ya salen cerrados (sin parpadeo). */
#vppejemplo .ve_paneles[hidden],#vppejemplo .ve_panel[hidden],#vppejemplo .ve_lienzo[hidden],
#vppejemplo .ve_detalle[hidden],#vppejemplo .ve_pausa[hidden],
#vppejemplo[data-js]:not([data-listo]) .ve_paneles{display:none !important;}
/* La hora no elegida se queda en la celda (mide lo mismo, D2/T-02) pero ni se ve, ni se enfoca, ni se lee (`inert`). */
#vppejemplo .ve_panel[inert]{visibility:hidden !important;}

/* ===== Marco y cabecera (RD-01, RD-02) ===================================== */
#vppejemplo .ve_in{padding:32px; background:var(--ve-blanco); border:1px solid var(--ve-sand3); border-radius:15px;}
#vppejemplo .ve_tit{font-family:'IberPangea',sans-serif; font-weight:400; font-size:32px; line-height:36px;
  color:var(--ve-green1) !important;}
#vppejemplo .ve_tit strong{font-weight:600;}
/* El salto antes del tramo en negrita (D13): en 980 y en el tramo móvil, sí; en 565, no. Se quita mientras la
   primera línea («…de una», 552 de ancho en ES) no cabe entera: es decir, por encima del corte y por debajo de 618. */
@container ve (min-width: 460px) and (max-width: 617.98px){ #vppejemplo .ve_tit br{display:none;} }
#vppejemplo .ve_ent{font-family:'IberPangea',sans-serif; font-weight:400; font-size:24px; line-height:28px; color:var(--ve-forest);}

/* ===== Composición (RD-03, RD-04) ==========================================
   De 565 a 980 (anchos de la pieza) cada valor sigue su recta y se topa en el de 980:
   v(W) = v565 + (v980 − v565)·(W − 565)/415, con W = 100cqi. Exacta en los dos extremos. */
#vppejemplo .ve_comp{gap:clamp(8px, calc(8px + 8 * (100cqi - 565px) / 415), 16px);}
#vppejemplo .ve_datos{gap:clamp(8px, calc(8px + 8 * (100cqi - 565px) / 415), 16px);}
#vppejemplo .ve_dato{flex:1 1 0; padding:16px clamp(0px, calc(8px - 8 * (100cqi - 565px) / 415), 8px);
  background:var(--ve-sand); border-radius:16px; text-align:center;}
#vppejemplo .ve_dato .ve_ico{flex:none;}
#vppejemplo .ve_dato_txt{font-size:16px; line-height:20px;}
#vppejemplo .ve_cifra{font-weight:600;
  font-size:clamp(16px, calc(16px + 3 * (100cqi - 565px) / 415), 19px); line-height:clamp(22px, calc(22px + 2 * (100cqi - 565px) / 415), 24px);}
#vppejemplo .ve_empresas{padding:16px; background:var(--ve-sand); border-radius:16px;}
#vppejemplo .ve_emp_cab .ve_ico{flex:none;}
#vppejemplo .ve_emp_tit{flex:1 1 0; font-weight:600;
  font-size:clamp(16px, calc(16px + 3 * (100cqi - 565px) / 415), 19px); line-height:clamp(19px, calc(19px + 3 * (100cqi - 565px) / 415), 22px);}
#vppejemplo .ve_emp_lista{gap:8px; padding-left:66px;}
/* Viñeta: círculo 7 por CSS. El blindaje apaga `li::before` (el theme pinta las suyas): se devuelve con más especificidad.
   Con su posición: en las páginas de contenido interior el theme pone `position:absolute` a `li::before` (P4). */
#vppejemplo .ve_vin::before{content:'' !important; display:block !important; position:static !important; flex:none; width:7px; height:7px;
  border-radius:50%; background:var(--ve-green);}

/* Iconos: la caja de Figma; el SVG la llena (el glifo ya viene centrado en su viewBox). */
#vppejemplo .ve_ico--53{width:53px; height:53px;}
#vppejemplo .ve_ico--40{width:40px; height:40px; flex:none;}
#vppejemplo .ve_ico_svg{width:100%; height:100%;}

/* ===== Botones de hora (RD-05) =============================================
   El borde, por dentro (sombra interior): el alto y el texto no se mueven entre estados. */
#vppejemplo .ve_hora{
  --ve-h-fondo:var(--ve-blanco); --ve-h-tinta:var(--ve-forest); --ve-h-borde:var(--ve-green);
  width:100%; min-height:44px; padding:8px; border-radius:15px;
  font-family:'IberPangea',sans-serif; font-weight:400; font-size:24px; line-height:28px; text-align:center;
  background:var(--ve-h-fondo); color:var(--ve-h-tinta) !important; box-shadow:inset 0 0 0 1px var(--ve-h-borde);}
#vppejemplo .ve_hora--noche{--ve-h-borde:var(--ve-sky1);}
/* Pulsado: pestaña unida al panel, sin borde, radio sólo arriba, 59 de alto y el texto arriba. */
#vppejemplo .ve_hora[aria-expanded="true"]{min-height:59px; border-radius:15px 15px 0 0; box-shadow:none; cursor:default;}
#vppejemplo .ve_hora--dia[aria-expanded="true"]{--ve-h-fondo:var(--ve-green4);}
#vppejemplo .ve_hora--noche[aria-expanded="true"]{--ve-h-fondo:var(--ve-sky1); --ve-h-tinta:var(--ve-blanco);}

/* ===== Ilustraciones (RD-08) ===============================================
   La caja guarda la proporción de Figma y no pasa de su tamaño de 980 (se centra). Cada dibujo, entero dentro de
   ella y sin recorte (D23): `overflow` declarado para que el theme no lo recorte. */
#vppejemplo .ve_lienzo{position:relative; width:100%; max-width:878px; aspect-ratio:878 / 608.144; align-self:center; overflow:visible;}
#vppejemplo .ve_lienzo--ini{max-width:914px; aspect-ratio:914 / 542.37; margin-top:32px;}
#vppejemplo .ve_marco_ilus{position:absolute; left:0; top:0; width:100%; height:auto; overflow:visible;}
/* Encuadre de cada SVG en su caja (design/ilustracion/context.md): donde lo pone Figma si cabe entero; si no, movido
   lo justo y, si no cabe de ancho, reducido (en Figma, cuatro se salen de su caja). Ancho del SVG / ancho de la caja
   y su desplazamiento; los que no salen aquí, a todo el ancho y arriba a la izquierda. */
#vppejemplo .ve_lienzo[data-ilus="inicio"] .ve_marco_ilus{width:99.976%;}
#vppejemplo .ve_lienzo[data-ilus="dia-inicio"] .ve_marco_ilus{left:0.8542%; top:8.1395%; width:99.2027%;}   /* 7,5 / 49,5: T18 */
#vppejemplo .ve_lienzo[data-ilus="dia-baterias"] .ve_marco_ilus{left:-0.2838%; top:-1.4385%; width:100.3405%;}
#vppejemplo .ve_lienzo[data-ilus="noche-baterias"] .ve_marco_ilus{top:-0.7163%;}
#vppejemplo .ve_lienzo[data-ilus="noche-coches"] .ve_marco_ilus{top:0.6291%; width:100.0563%;}
#vppejemplo .ve_lienzo[data-ilus="noche-fabricas"] .ve_marco_ilus{left:-0.2848%; width:100.3417%;}
#vppejemplo .ve_dib{width:100%; height:auto;}
#vppejemplo .ve_pts,#vppejemplo .ve_pts_svg{position:absolute; left:0; top:0; width:100%; height:100%;}

/* ===== Paneles (RD-07, RF-06) ==============================================
   Los dos en la misma celda: la celda mide el más alto y el más bajo se estira (el sobrante, abajo, dentro
   del borde). Contenido a 18 de los lados y 16 arriba y abajo, borde incluido. */
#vppejemplo[data-js] .ve_panel{grid-area:1 / 1; align-self:stretch;}
#vppejemplo .ve_panel{padding:15px 17px; border:1px solid var(--ve-green); border-radius:15px;}
#vppejemplo .ve_panel--noche{border-color:var(--ve-sky);}
#vppejemplo[data-js] .ve_panel--dia{border-top-left-radius:0;}
#vppejemplo[data-js] .ve_panel--noche{border-top-right-radius:0;}
#vppejemplo .ve_panel_h{font-family:'IberPangea',sans-serif; font-weight:400; font-size:24px; line-height:28px;
  color:var(--ve-forest) !important;}
#vppejemplo .ve_ctx{font-size:16px; line-height:20px;}
/* La frase de las 21:00: en Figma su caja mide 24 con una línea de 20 (98757, 176287); en 290, sus tres líneas (60). */
#vppejemplo .ve_panel--noche .ve_ctx{min-height:24px;}
#vppejemplo .ve_sub{font-family:'IberPangea',sans-serif; font-weight:400; font-size:24px; line-height:28px;
  color:var(--ve-forest) !important;}
#vppejemplo .ve_nota{padding:12px 10px; background:var(--ve-sand); border-radius:8px; font-size:16px; line-height:20px;}
#vppejemplo .ve_nota_txt{flex:1 1 0;}

/* ===== Pasos (RD-10) =======================================================
   Cada estado cambia unas variables en la fila; los hijos las leen. */
#vppejemplo .ve_paso_fila{
  --ve-p-fondo:var(--ve-sand); --ve-p-tinta:var(--ve-forest); --ve-p-borde:transparent;
  --ve-m-fondo:var(--ve-green1); --ve-m-cruz:var(--ve-sand1); --ve-m-borde:transparent; --ve-m-giro:0deg;
  width:100%; padding:10px; border-radius:8px; text-align:left; cursor:default;
  background:var(--ve-p-fondo); color:var(--ve-p-tinta) !important; box-shadow:inset 0 0 0 1px var(--ve-p-borde);
  font-family:'IberPangea Text',sans-serif; font-weight:400; font-size:18px; line-height:24px;}
#vppejemplo .ve_paso_btn{cursor:pointer;}
#vppejemplo .ve_paso_txt{flex:1 1 0;}
/* El «+»: círculo 32 y una cruz de 13,5 con trazo 1,5 de puntas redondas (Boton-mas de Figma), en CSS. */
#vppejemplo .ve_mas{position:relative; flex:none; width:32px; height:32px; border-radius:20px;
  background:var(--ve-m-fondo); box-shadow:inset 0 0 0 1px var(--ve-m-borde); transform:rotate(var(--ve-m-giro));}
#vppejemplo .ve_mas::before,#vppejemplo .ve_mas::after{content:''; position:absolute; left:50%; top:50%;
  width:13.5px; height:1.5px; margin:-0.75px 0 0 -6.75px; border-radius:0.75px; background:var(--ve-m-cruz);}
#vppejemplo .ve_mas::after{transform:rotate(90deg);}
/* Pulsado: verde, texto e iconos blancos, y el ✕ (la «+» girada) blanco. No cambia al pasar. Su borde verde de Figma
   va sin pintar: es del mismo verde que la fila, y pintado por dentro dejaba asomar el blanco del círculo en el borde
   curvo, una línea clara alrededor (ronda del 28 oct). */
#vppejemplo .ve_paso_btn[aria-pressed="true"],#vppejemplo .ve_paso_btn[aria-expanded="true"]{
  --ve-p-fondo:var(--ve-green1); --ve-p-tinta:var(--ve-sand1);
  --ve-m-fondo:var(--ve-sand1); --ve-m-cruz:var(--ve-green1); --ve-m-borde:transparent; --ve-m-giro:45deg;}
#vppejemplo .ve_paso_btn[aria-pressed="true"] .ve_ico_svg path:not([fill="none"]),
#vppejemplo .ve_paso_btn[aria-expanded="true"] .ve_ico_svg path:not([fill="none"]){fill:var(--ve-sand1) !important;}

/* ===== Detalle de la industria (RD-11) ===================================== */
/* El borde de Figma va por dentro: el contenido, a 16 arriba y a 24 de los lados y de abajo contando el borde. */
#vppejemplo .ve_detalle{gap:16px; padding:16px 23px 15px; background:var(--ve-blanco); border:1px solid var(--ve-sand3);
  border-top:0; border-radius:0 0 15px 15px;}
#vppejemplo .ve_detalle .ve_vin{align-items:flex-start; padding-left:19px; font-size:16px; line-height:20px;}
/* A la altura de la primera línea. Con !important: el blindaje de `li::before` pone su margen a 0. */
#vppejemplo .ve_detalle .ve_vin::before{margin-top:8px !important;}

/* ===== Pausa de la energía (A-004) =========================================
   Bloque reutilizable: el mismo botón irá en todas las piezas animadas (A3). Abajo a la derecha de la
   caja del dibujo; 32 de diámetro. «Pausar»: borde verde y barras verdes; «Reproducir»: fondo verde y
   triángulo blanco (pl 12 / pr 8). Al pasar: el de pausar se rellena de verde; el de reproducir, de Forest.
   Foco (variante «focus» de Figma): fondo verde, borde interior Sand 1 y anillo verde de 2. */
#vppejemplo .ve_pausa{
  --ve-z-fondo:transparent; --ve-z-tinta:var(--ve-green1); --ve-z-borde:var(--ve-green1);
  position:absolute; right:11px; bottom:10px; z-index:1; width:32px; height:32px; padding:8px; border-radius:50px;
  background:var(--ve-z-fondo); color:var(--ve-z-tinta) !important; box-shadow:inset 0 0 0 1px var(--ve-z-borde);}
#vppejemplo .ve_pausa[data-parada]{--ve-z-fondo:var(--ve-green1); --ve-z-tinta:var(--ve-blanco); padding:8px 8px 8px 12px;}
#vppejemplo .ve_pausa_ico{flex:none; width:20px; height:20px;}
#vppejemplo .ve_pausa .ve_pausa_ico--play{display:none !important;}
#vppejemplo .ve_pausa[data-parada] .ve_pausa_ico--pausa{display:none !important;}
#vppejemplo .ve_pausa[data-parada] .ve_pausa_ico--play{display:block !important;}
#vppejemplo .ve_pausa:focus-visible{--ve-z-fondo:var(--ve-green1); --ve-z-tinta:var(--ve-blanco); --ve-z-borde:var(--ve-sand1);
  box-shadow:inset 0 0 0 1px var(--ve-z-borde), 0 0 0 2px var(--ve-green1) !important; outline:2px solid transparent !important;}
/* Deshabilitada (variante de Figma; aquí no se da, pero es parte del bloque): Forest 3 #699282 y, en «reproducir», Forest 1. */
#vppejemplo .ve_pausa:disabled{--ve-z-fondo:transparent; --ve-z-tinta:#699282; --ve-z-borde:#699282; cursor:default;}
#vppejemplo .ve_pausa[data-parada]:disabled{--ve-z-fondo:#DCEBE1; --ve-z-borde:transparent;}

/* ===== Animación de la energía (A-001) =====================================
   Los recorridos y tiempos vienen horneados en cada SVG de puntos (su <style>); aquí, sólo parar. */
#vppejemplo .ve_quieto .ve_e,#vppejemplo.ve_pausada .ve_e,#vppejemplo .ve_panel[inert] .ve_e{animation-play-state:paused !important;}
@media (prefers-reduced-motion: reduce){
  #vppejemplo .ve_e{animation:none !important;}
  #vppejemplo .ve_pausa{display:none !important;}
}

/* ===== Foco (RD-15): sólo con teclado. El theme puede quitar el outline: se responde con !important. ===== */
#vppejemplo .ve_hora:focus-visible,#vppejemplo .ve_paso_btn:focus-visible{outline:2px solid var(--ve-green1) !important; outline-offset:2px !important;}

/* ===== Al pasar: sólo con ratón, y nunca en lo pulsado (RD-05, RD-10) ======= */
@media (hover:hover){
  #vppejemplo .ve_hora--dia:not([aria-expanded="true"]):hover{--ve-h-fondo:var(--ve-green4);}
  #vppejemplo .ve_hora--noche:not([aria-expanded="true"]):hover{--ve-h-fondo:var(--ve-sky1); --ve-h-tinta:var(--ve-blanco); --ve-h-borde:var(--ve-sky4);}
  #vppejemplo .ve_paso_btn:not([aria-pressed="true"]):not([aria-expanded="true"]):hover{--ve-p-borde:var(--ve-green1); --ve-m-fondo:var(--ve-forest);}
  #vppejemplo .ve_pausa:not([data-parada]):not(:disabled):hover{--ve-z-fondo:var(--ve-green1); --ve-z-tinta:var(--ve-blanco);}
  #vppejemplo .ve_pausa[data-parada]:not(:disabled):hover{--ve-z-fondo:var(--ve-forest);}
}

/* =============================================================================
   TRAMO MÓVIL (< 460) = el diseño de 290, estirado. El corte, medido (plan §3.5): los botones de hora en una
   línea a 24/28 necesitan 459 de pieza («A las 14:00 horas», 172,3 + 16 cada uno, + 16 + 66); las tres tarjetas
   en fila, 418 (su palabra más larga, «conectados.»). Manda el mayor.
   ============================================================================= */
@container ve (max-width: 459.98px){
  #vppejemplo .ve_in{padding:32px 24px;}
  #vppejemplo .ve_comp{gap:8px;}
  #vppejemplo .ve_datos{display:flex !important; flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:8px;}
  #vppejemplo .ve_dato{display:flex !important; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:flex-start;
    flex:none; gap:10px; padding:16px 8px; text-align:left;}
  #vppejemplo .ve_dato_txt{flex:1 1 0;}
  #vppejemplo .ve_cifra{font-size:16px; line-height:22px;}
  #vppejemplo .ve_ico--53{width:41px; height:41px;}
  #vppejemplo .ve_empresas{padding:16px 8px;}
  #vppejemplo .ve_emp_tit{font-size:16px; line-height:19px;}
  #vppejemplo .ve_emp_lista{padding-left:52px;}

  /* Horas en columna: la pulsada, abajo y pegada al panel. El azul arriba salvo con las 21:00 elegida (RD-06).
     Sólo orden visual: el DOM (y el Tab) no cambia. */
  #vppejemplo[data-js] .ve_horas{display:flex !important; flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:16px;}
  #vppejemplo .ve_hora{min-height:40px; font-size:21px; line-height:24px;}
  #vppejemplo .ve_hora[aria-expanded="true"]{min-height:40px;}
  #vppejemplo .ve_hora--dia{order:2;}
  #vppejemplo .ve_hora--noche{order:1;}
  #vppejemplo[data-hora="noche"] .ve_hora--dia{order:1;}
  #vppejemplo[data-hora="noche"] .ve_hora--noche{order:2;}
  /* La pestaña ocupa todo el ancho: las dos esquinas de arriba del panel, rectas. */
  #vppejemplo[data-js] .ve_panel--dia,#vppejemplo[data-js] .ve_panel--noche{border-radius:0 0 15px 15px;}

  /* Pasos: icono arriba, texto debajo y el botón a la derecha, centrado. */
  #vppejemplo .ve_paso_fila{display:grid !important; grid-template-columns:minmax(0, 1fr) auto; column-gap:0; row-gap:10px; align-items:center;}   /* sin hueco al botón (25883:185320) */
  #vppejemplo .ve_paso_fila .ve_ico{grid-column:1; grid-row:1;}
  #vppejemplo .ve_paso_fila .ve_paso_txt{grid-column:1; grid-row:2;}
  #vppejemplo .ve_paso_fila .ve_mas{grid-column:2; grid-row:1 / span 2;}
  /* «Sin una VPP»: icono centrado arriba y el texto a todo el ancho. */
  #vppejemplo .ve_nota{display:flex !important; flex-direction:column; flex-wrap:nowrap; align-items:center; gap:10px;}
  #vppejemplo .ve_nota_txt{flex:none; align-self:stretch;}
  #vppejemplo .ve_paneles[hidden],#vppejemplo .ve_panel[hidden],#vppejemplo .ve_pausa[hidden],
  #vppejemplo[data-js]:not([data-listo]) .ve_paneles{display:none !important;}
}

/* ===== Contraste forzado (Windows): sombras y fondos desaparecen; se devuelven con bordes y colores del sistema ===== */
@media (forced-colors: active){
  #vppejemplo .ve_hora,#vppejemplo .ve_pausa{border:1px solid ButtonText;}
  #vppejemplo .ve_paso_btn{border:1px solid ButtonText;}
  #vppejemplo .ve_paso_btn[aria-pressed="true"],#vppejemplo .ve_paso_btn[aria-expanded="true"],
  #vppejemplo .ve_hora[aria-expanded="true"]{outline:3px solid Highlight; outline-offset:-3px;}
  #vppejemplo .ve_mas{border:1px solid ButtonText;}
  #vppejemplo .ve_mas::before,#vppejemplo .ve_mas::after{background:ButtonText;}
  #vppejemplo .ve_vin::before{background:CanvasText;}
  #vppejemplo .ve_pausa:focus-visible,#vppejemplo .ve_hora:focus-visible,#vppejemplo .ve_paso_btn:focus-visible{outline:2px solid Highlight !important;}
}