/* La rueda incrustable (18/09/2026): una sola pieza para el blog, para /embed/rueda.html y para
   cualquier WordPress ajeno. Colores y nombres de las areas: los de la aplicacion (js/areas.js,
   idioma-*.js). Todo lo tocable mide 44 px de alto: el control de la rueda de la aplicacion media
   9x16 px en el telefono (arnes, 18/09/2026) y aqui no se repite.
   Desde el 11/10/2026 la forma la decide el ancho de la PIEZA, no el de la pantalla (container
   queries): con @media (620 px) un iframe de 656 en un portatil ponia la rueda al lado y dejaba
   los botones en 12 px. La base, sin consultas, es la del telefono (una columna, filas apiladas) y
   vale en cualquier navegador; los cortes estan medidos con ops/development/mide_rueda_embebida.py
   (botones de 28 px o mas y ningun nombre cortado, en es/en/fr y en las nueve ruedas). */
.hp-emb{--hp-emb-azul:#004fa0;--hp-emb-azul2:#0a6fd6;--hp-emb-tinta:#0f172a;--hp-emb-apagado:#52677f;
  --hp-emb-linea:#dbe5ef;--hp-emb-fondo:#fff;--hp-emb-suave:#f3f7fc;--hp-emb-radio:14px;
  font:16px/1.45 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--hp-emb-tinta);
  background:var(--hp-emb-fondo);border:1px solid var(--hp-emb-linea);border-radius:var(--hp-emb-radio);
  padding:18px 18px 16px;box-sizing:border-box;margin:0;-webkit-text-size-adjust:100%;container:hpemb/inline-size}
@media (max-width:420px){.hp-emb{padding:14px 10px 12px}}
.hp-emb *{box-sizing:border-box}
.hp-emb-cab{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.hp-emb-cab h2{font-size:1.15rem;line-height:1.25;margin:0;font-weight:800;letter-spacing:-.01em}
.hp-emb-cab p{margin:2px 0 0;color:var(--hp-emb-apagado);font-size:.92rem}
.hp-emb-logo{width:36px;height:36px;border-radius:10px;background:var(--hp-emb-azul);color:#fff;
  display:grid;place-items:center;font-weight:900;font-size:18px;flex:0 0 auto}
.hp-emb-cuerpo{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
/* La rueda al lado solo cuando la lista que queda al otro lado aun da botones de 28 px o mas. */
@container hpemb (min-width:580px){.hp-emb-cuerpo{grid-template-columns:minmax(220px,29%) minmax(0,1fr);align-items:center;gap:26px}}
.hp-emb-rueda{display:grid;place-items:center}
.hp-emb-rueda svg{width:100%;max-width:340px;height:auto;display:block;touch-action:none}
.hp-emb-ico-rueda{pointer-events:none}
.hp-emb-cuna{cursor:pointer;transition:opacity .12s}
.hp-emb-cuna:hover{opacity:.85}
.hp-emb-pista{margin:8px 0 0;text-align:center;color:var(--hp-emb-apagado);font-size:.82rem}
/* La lista mide su propio ancho (hpareas): de el dependen el tamano de los botones y si el nombre
   cabe en la misma linea que ellos. */
.hp-emb-lista{container:hpareas/inline-size;min-width:0}
.hp-emb-areas{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.hp-emb-area{display:grid;grid-template-columns:minmax(0,1fr) 34px;grid-template-areas:"nombre valor" "control control";
  gap:4px 8px;align-items:center;padding:6px 0 4px;border-bottom:1px solid var(--hp-emb-linea)}
.hp-emb-area:last-child{border-bottom:0}
.hp-emb-nombre{grid-area:nombre;position:relative;display:flex;align-items:center;gap:8px;font-weight:600;font-size:.95rem;min-width:0}
/* El nombre nunca se corta con puntos suspensivos: si no cabe, pasa a una segunda linea. En la lista
   estrecha la letra baja a .84rem (13,4 px) y a 338 px solo se parte un nombre de las nueve ruedas
   en los tres idiomas («Communication and living together»; antes cinco); a .82rem seguia partido. */
.hp-emb-nom{min-width:0;line-height:1.25;overflow-wrap:break-word}
.hp-emb-ico{width:26px;height:26px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;color:#fff;font-size:13px}
.hp-emb-glifo{font-family:FontAwesome;font-style:normal;line-height:1}
.hp-emb-valor{grid-area:valor;text-align:right;font-weight:800;font-variant-numeric:tabular-nums;color:var(--hp-emb-azul)}
.hp-emb-valor.vacio{color:var(--hp-emb-apagado);font-weight:500}
.hp-emb-seg{grid-area:control;display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:2px;
  touch-action:pan-y;user-select:none;-webkit-user-select:none}
.hp-emb-seg button{appearance:none;border:1px solid var(--hp-emb-linea);background:var(--hp-emb-suave);
  color:var(--hp-emb-apagado);min-height:44px;padding:0;font:inherit;font-size:.85rem;font-weight:600;
  border-radius:6px;cursor:pointer;line-height:1}
.hp-emb-seg button.on{background:var(--hp-emb-color,var(--hp-emb-azul));border-color:var(--hp-emb-color,var(--hp-emb-azul));color:#fff}
.hp-emb-seg button.actual{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--hp-emb-color,var(--hp-emb-azul))}
.hp-emb-seg button:focus-visible{outline:3px solid var(--hp-emb-azul2);outline-offset:2px}
/* Lista estrecha (telefono, 338 px de iframe): los once botones pegados, como un control
   segmentado; sin los 20 px de separacion cada boton gana casi 2 px de ancho. Dos filas de
   botones romperian la escala y el arrastre, y alargarian la pieza unos 400 px. */
@container hpareas (max-width:379.98px){
  .hp-emb-seg{gap:0}
  .hp-emb-seg button{border-radius:0;border-left-width:0}
  .hp-emb-seg button:first-child{border-left-width:1px;border-radius:6px 0 0 6px}
  .hp-emb-seg button:last-child{border-radius:0 6px 6px 0}
  .hp-emb-seg button.actual,.hp-emb-seg button:focus-visible{position:relative;z-index:1}
  .hp-emb-nombre{font-size:.84rem}
}
/* Lista ancha: nombre, botones y nota en la misma linea. La columna del nombre se ajusta al nombre
   mas largo de la rueda (subgrid), con tope; los cortes de vida y de las subruedas son distintos
   porque sus nombres lo son. */
@container hpareas (min-width:620px){
  .hp-emb:not(.hp-emb-sub) .hp-emb-areas{grid-template-columns:fit-content(42%) minmax(0,1fr) 30px;gap:4px 12px}
  .hp-emb:not(.hp-emb-sub) .hp-emb-area{grid-column:1/-1;grid-template-columns:minmax(150px,30%) minmax(0,1fr) 30px;
    grid-template-columns:subgrid;grid-template-areas:none;gap:0 12px;padding:0;border-bottom:0}
  .hp-emb:not(.hp-emb-sub) .hp-emb-nombre{grid-area:1/1;font-size:.92rem}
  .hp-emb:not(.hp-emb-sub) .hp-emb-seg{grid-area:1/2;gap:3px}
  .hp-emb:not(.hp-emb-sub) .hp-emb-valor{grid-area:1/3}
}
/* Subruedas (12/10/2026): en linea desde 620 px de lista, no desde 760; en la tableta de Pedro
   (iframe de unos 1120 px, lista de 743) iban apiladas y la pieza medía 970 px. La columna del
   nombre deja siempre 392 px a los once botones (28 px y 3 de separacion) y la nota; el nombre
   que no cabe pasa a dos lineas, que caben en los 44 px de la fila. */
@container hpareas (min-width:620px){
  .hp-emb-sub .hp-emb-areas{grid-template-columns:fit-content(45%) minmax(0,1fr) 30px;
    grid-template-columns:fit-content(min(45%,calc(100% - 392px))) minmax(0,1fr) 30px;gap:6px 12px}
  .hp-emb-sub .hp-emb-area{grid-column:1/-1;grid-template-columns:minmax(170px,34%) minmax(0,1fr) 30px;
    grid-template-columns:subgrid;grid-template-areas:none;gap:0 12px;padding:0;border-bottom:0}
  .hp-emb-sub .hp-emb-nombre{grid-area:1/1;font-size:.92rem}
  .hp-emb-sub .hp-emb-seg{grid-area:1/2;gap:3px}
  .hp-emb-sub .hp-emb-valor{grid-area:1/3}
}
/* Subruedas (10/10/2026; 11/10/2026): la pregunta de cada aspecto (la de la aplicacion) ya no ocupa
   sitio bajo el nombre: va en un aviso que abre el boton «i» con toque, clic, teclado o raton
   encima (rueda-embebida.js). El circulo se ve de 22 px; la zona que se toca mide 44x44. */
.hp-emb-info{flex:none;position:relative;width:24px;height:24px;margin:0;padding:0;border-radius:50%;
  border:1px solid var(--hp-emb-linea);background:var(--hp-emb-fondo);color:var(--hp-emb-apagado);
  font:italic 700 14px/1 Georgia,"Times New Roman",serif;display:grid;place-items:center;cursor:pointer}
.hp-emb-info::before{content:"";position:absolute;inset:-10px}
.hp-emb-info:hover,.hp-emb-info[aria-expanded="true"]{background:var(--hp-emb-azul);border-color:var(--hp-emb-azul);color:#fff}
.hp-emb-info:focus-visible{outline:3px solid var(--hp-emb-azul2);outline-offset:2px}
.hp-emb-sub .hp-emb-area{row-gap:10px}
.hp-emb-tip{position:absolute;z-index:5;left:0;top:calc(100% + 8px);width:max-content;max-width:320px;
  max-width:min(340px,100cqw);margin:0;padding:10px 12px;border-radius:10px;background:var(--hp-emb-tinta);
  color:#fff;font-size:.86rem;font-weight:500;line-height:1.4;white-space:normal;box-shadow:0 10px 28px -8px rgba(15,23,42,.45)}
.hp-emb-tip.arriba{top:auto;bottom:calc(100% + 8px)}
.hp-emb-tip[hidden]{display:none}
.hp-emb-pie{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:16px}
.hp-emb-guardar{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;
  border-radius:999px;background:var(--hp-emb-azul);color:#fff;font-weight:700;text-decoration:none;font-size:1rem;
  border:0;cursor:pointer;transition:background .18s,transform .18s}
.hp-emb-guardar:hover{background:var(--hp-emb-azul2);transform:translateY(-1px)}
.hp-emb-guardar[aria-disabled="true"]{background:#9db4cf;cursor:not-allowed;transform:none}
.hp-emb-guardar:focus-visible{outline:3px solid var(--hp-emb-azul2);outline-offset:3px}
.hp-emb-nota{margin:0;color:var(--hp-emb-apagado);font-size:.9rem}
.hp-emb-nota a{color:var(--hp-emb-azul)}
.hp-emb-aviso{margin:10px 0 0;color:#b42318;font-size:.92rem;min-height:1.3em}
.hp-emb-aviso.lista{color:#1f6f3f;font-weight:600}
@media (prefers-reduced-motion:reduce){.hp-emb-guardar{transition:none}}
.hp-emb-lectura{margin-top:14px;padding:12px 14px;border-radius:10px;background:var(--hp-emb-suave);
  border-left:4px solid var(--hp-emb-area,var(--hp-emb-azul))}
.hp-emb-lectura[hidden]{display:none}
.hp-subl-p{margin:0 0 6px;font-size:.92rem}
.hp-subl-q{margin:8px 0 0;font-weight:600;color:var(--hp-emb-azul)}
/* La pagina /embed/ va a pantalla completa del iframe: sin margen y sin borde propio. */
body.hp-emb-pagina{margin:0;background:transparent}
body.hp-emb-pagina .hp-emb{border-radius:0;border:0}