/* ==========================================================================
   EXERGÍA V3 — páginas por pasos con barra lateral (mismo formato que las herramientas)
   El encabezado es el mismo de todo el sitio (v3-head.css): el logo vive arriba a la izquierda.
   La barra va debajo del encabezado y mide lo mismo que el logo; contraída mide lo que el hexágono.
   En celular se queda la línea horizontal de pasos.
   ========================================================================== */
body.pps-on{--pps-w:var(--v3-side-w);--pps-bg:color-mix(in srgb,var(--paper) 88%,var(--ink) 2%);padding-left:var(--pps-w);transition:padding-left .32s cubic-bezier(.22,1,.36,1)}
body.pps-on.pps-mini{--pps-w:var(--v3-side-mini)}
body.pps-on.pps-hidden{padding-left:0}
.pps-side{position:fixed;top:var(--v3-hdr-h);bottom:0;left:0;width:var(--pps-w);z-index:70;display:flex;flex-direction:column;background:var(--pps-bg);border-right:1px solid var(--linea);
  transition:width .32s cubic-bezier(.22,1,.36,1),transform .32s cubic-bezier(.22,1,.36,1);font-size:13px;color:var(--ink)}
body.pps-hidden .pps-side{transform:translateX(-100%)}
.pps-top{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:8px var(--v3-pad) 4px}
.pps-ttl{display:grid;gap:1px;min-width:0;padding-left:2px}
.pps-ttl b{font-size:13px;font-weight:650;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pps-ttl small{font-size:11px;color:var(--ink-soft)}
.pps-tg{flex:none;width:30px;height:30px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--ink);cursor:pointer}
.pps-tg:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.pps-tg svg{width:17px;height:17px}
.pps-ct{flex:1;min-height:0;overflow:auto;padding:2px var(--v3-pad) 12px;scrollbar-width:none}
.pps-ct::-webkit-scrollbar{display:none}
.pps-gl{height:26px;display:flex;align-items:center;padding:0 4px;font-size:11px;font-weight:600;color:var(--ink-soft);white-space:nowrap}
.pps-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.pps-list li{margin:0}
.pps-it{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr) 16px;align-items:center;gap:8px;width:100%;min-height:36px;padding:6px 6px;border:0;border-radius:9px;background:transparent;color:var(--ink);font:500 12.5px/1.25 var(--f-body);text-align:left;cursor:pointer;transition:background .15s}
.pps-it:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.pps-ico{width:22px;height:22px;display:grid;place-items:center;border-radius:7px;color:#fff;background:var(--c,var(--azul));box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.pps-ico svg{width:14px;height:14px}
.pps-it .pps-tx{overflow-wrap:anywhere}
.pps-it .pps-ck{width:16px;height:16px;border-radius:50%;display:none;place-items:center;font-size:10px;font-weight:700;color:#fff;background:var(--ok,#2B7A31)}
.pps-it.done .pps-ck{display:grid}
.pps-it.on{background:color-mix(in srgb,var(--c,var(--azul)) 14%,transparent);font-weight:650}
.pps-it.on::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--c,var(--azul))}
.pps-ft{padding:10px var(--v3-pad);border-top:1px solid var(--linea);font-size:11px;color:var(--ink-soft);line-height:1.4}
.pps-rail{position:absolute;top:0;bottom:0;right:-8px;width:16px;border:0;background:transparent;cursor:w-resize;z-index:2}
.pps-rail::after{content:"";position:absolute;top:0;bottom:0;left:7px;width:2px}
.pps-rail:hover::after{background:var(--linea)}
/* contraída: iconos de los pasos; el hexágono del encabezado conserva su tamaño y lugar */
body.pps-mini .pps-ttl,body.pps-mini .pps-ft,body.pps-mini .pps-gl{display:none}
body.pps-mini .pps-top{justify-content:center;padding:8px 0 4px}
body.pps-mini .pps-ct{padding:4px 7px}
body.pps-mini .pps-it{grid-template-columns:22px;justify-content:center;padding:6px 0;min-height:34px}
body.pps-mini .pps-it .pps-tx,body.pps-mini .pps-it .pps-ck{display:none}
body.pps-mini .pps-it.done::after{content:"";position:absolute;right:3px;top:3px;width:7px;height:7px;border-radius:50%;background:var(--ok,#2B7A31)}
/* pestaña para volver a abrir la barra cuando está oculta */
.pps-peek{position:fixed;left:0;top:calc(var(--v3-hdr-h) + 10px);z-index:70;width:26px;height:44px;display:none;place-items:center;border:1px solid var(--linea);border-left:0;border-radius:0 10px 10px 0;background:var(--pps-bg,var(--paper));color:var(--ink);cursor:pointer;box-shadow:0 6px 16px -8px rgba(13,36,56,.35)}
body.pps-on.pps-hidden .pps-peek{display:grid}
.pps-peek svg{width:15px;height:15px}
/* el contenido de la página baja lo que mide el encabezado nuevo */
body.pps-on .pp-hero{padding-top:calc(var(--v3-hdr-h) + 18px)}
body.pps-on .pp-hero h1{font-size:clamp(2.3rem,4.4vw,5rem);overflow-wrap:anywhere}
body.pps-on .pp-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
/* en celular: se queda la línea horizontal y sin barra */
@media (max-width:899px){
  body.pps-on,body.pps-on.pps-mini,body.pps-on.pps-hidden{padding-left:0}
  .pps-side,.pps-peek{display:none!important}
  body.pps-on .pp-hero{padding-top:calc(var(--hdr-real,var(--v3-hdr-h)) + 18px)}
}
@media (min-width:900px){body.pps-on .pp-steps{display:none!important}}
@media (prefers-reduced-motion:reduce){body.pps-on,.pps-side{transition:none!important}}

/* solo dos modos (abierta / contraída) y barrido suave: mismo ritmo que la barra de las herramientas (21-oct) */
.pps-peek{display:none!important}
body.pps-on{--pps-t:.42s;--pps-e:cubic-bezier(.32,.72,0,1);transition:padding-left var(--pps-t) var(--pps-e)}
.pps-side{overflow:hidden;transition:width var(--pps-t,.42s) var(--pps-e,ease)}
body.pps-on .v2-header .v2-logo{transition:width var(--pps-t) var(--pps-e)}
.pps-side>*:not(.pps-rail){transition:opacity .2s ease .14s}
body.pps-cambio .pps-side>*:not(.pps-rail){opacity:0;transition:opacity .08s linear}
body.pps-mini .pps-tg svg{transform:scaleX(-1)}
@media (prefers-reduced-motion:reduce){.pps-side>*{transition:none!important}}
/* arranque sin brinco (21-oct): el espacio de la barra se aparta desde el principio, sin animar la primera vez,
   y el contenido aparece ya acomodado (respaldo: 1.2 s) */
@media (min-width:900px){ body:has([data-pp]):not(.pps-on){padding-left:var(--v3-side-w)} }
body:has([data-pp]):not(.pps-listo){transition:none!important}
body:has([data-pp]):not(.pps-on) [data-pp]{opacity:0;animation:pps-ver 0s 1.2s forwards}
body.pps-on [data-pp]{animation:pps-entra .3s cubic-bezier(.22,1,.36,1) both}
@keyframes pps-ver{to{opacity:1}}
@keyframes pps-entra{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){body.pps-on [data-pp]{animation:none}}
/* (21-oct) las secciones no son pasos en orden: sin palomitas; la sección donde estamos se ilumina con un contorno de su color */
.pps-it .pps-ck,body.pps-mini .pps-it.done::after{display:none!important}
.pps-it{grid-template-columns:22px minmax(0,1fr)!important}
.pps-it.on{background:color-mix(in srgb,var(--c,var(--azul)) 12%,transparent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--c,var(--azul)) 70%,transparent),0 4px 14px -8px var(--c,var(--azul))}
.pps-it.on::before{display:none}
body.pps-mini .pps-it{grid-template-columns:22px!important}

/* herramientas de una sola página con barra por secciones (exg-secside.js); aquí porque esas páginas no cargan exg-ui.css */
body.xsec.pps-on{max-width:none!important;margin:0!important;padding-left:calc(var(--pps-w) + clamp(16px,2vw,32px))!important;padding-right:clamp(16px,2vw,32px)!important}
body.xsec .xbar{display:none!important}
body.xsec .foot{left:var(--pps-w);transition:left .42s cubic-bezier(.32,.72,0,1)}
body.xsec .pps-ft{display:none}
body.xsec .pps-ct .pps-gl:not(:first-child){margin-top:10px}
body.xsec .pps-list li[hidden]{display:none}
@media (max-width:899px){body.xsec.pps-on{padding-left:16px!important}body.xsec .foot{left:0}}
body.xsec-sinhead .pps-side{top:0!important}
body.xsec:not(.pps-listo){transition:none!important}
/* barra por secciones (exg-secside.js): lo que no está elegido se oculta; en modo por secciones todo va a una columna */
.xsec-off{display:none!important}
body.xsec-paged .grid.two{grid-template-columns:minmax(0,1fr)!important}
body.xsec-paged .grid.two>*{position:static!important}
/* los botones de archivo que ya están en la barra lateral no se repiten arriba (la barra los sigue usando) */
body.xsec #bNueva,body.xsec #bGuardar,body.xsec #bPdf,body.xsec #bLista,body.xsec #bPerfil,body.xsec #bVer,body.xsec #bHtml{display:none!important}