/* /iso-27001 composition only: the Annex A bar chart. Everything else comes from specialized-pages.css. */
.iso27001-bars{margin:1.5rem 0;padding:1rem 1.2rem;border:1px solid var(--udc-line);border-radius:var(--udc-radius-md);background:var(--udc-card)}
.iso27001-bars figcaption{margin:0 0 .85rem;color:var(--udc-text);font-weight:700}
.iso27001-bars ul{display:grid;gap:.65rem;max-width:44rem;margin:0;padding:0;list-style:none}
.iso27001-bars li{display:grid;grid-template-columns:minmax(8rem,10rem) minmax(0,1fr) 2.5rem;align-items:center;gap:.75rem}
.iso27001-bar{display:block;height:14px;width:var(--share);min-width:4px;border-radius:999px;background:var(--udc-orange)}
.iso27001-bars strong{color:var(--udc-text);font-variant-numeric:tabular-nums;text-align:right}
.iso27001-bars .sp-note{margin:.85rem 0 0}
@media(max-width:480px){
 .iso27001-bars li{grid-template-columns:1fr 2.5rem;row-gap:.3rem}
 .iso27001-bar{grid-column:1/-1;grid-row:2}
}
/* Inside an explorer panel the chart drops its own box to avoid three nested frames. */
.sp-panel .iso27001-bars{padding:0;border:0;background:none}
/* MSPI phases: titles reserve two lines on desktop so descriptions start aligned. */
@media(min-width:1024px){#mspi .sp-calendar>li>strong{min-height:2.6em}}
/* The service card without a "Más sobre" link keeps its button aligned with its neighbours. */
.iso27001-service-spacer{min-height:1.4em}
/* The shared box holds a short label, not prose like the other family pages: center it (Gabe, 3 oct 2026). */
.iso27001-shared p{text-align:center}
/* Both side boxes share one height; their content and the shared label stay vertically centred (Gabe, 3 oct 2026). */
.iso27001-articulation{align-items:stretch}
.iso27001-articulation .sp-system,.iso27001-articulation .sp-shared{display:flex;flex-direction:column;justify-content:center}
.iso27001-articulation .sp-system{align-items:center;gap:1.33rem}
.iso27001-articulation .sp-system>*{margin-block:0}