/* Hospital MIT · la guía de la demostración. Todo bajo el prefijo mg- y fijo a la
   ventana: se quita el archivo y el panel queda como estaba. La barra sustituye en
   pantalla al aviso de arriba; en papel manda el aviso. */
html.con-guia{--aviso-h:0px;--mg-barra:44px}
@media screen{
  html.con-guia .aviso{display:none}
  html.con-guia .area{padding-bottom:calc(var(--mg-barra) + 28px)}
  html.con-guia .brindis{bottom:calc(var(--mg-barra) + 16px)}
}
.mg-barra{position:fixed;left:0;right:0;bottom:0;z-index:44;display:flex;align-items:center;flex-wrap:wrap;gap:6px 16px;padding:7px 16px calc(7px + env(safe-area-inset-bottom));background:var(--tinta);color:#dbe9ef;font-size:13px;line-height:1.35}
.mg-barra p{margin:0}
.mg-barra-t{flex:1 1 320px;min-width:0}
.mg-corto{display:none}
.mg-paso{flex:0 1 auto;color:#fff;font-weight:700}
.mg-paso[hidden]{display:none}
.mg-sig{background:none;border:0;padding:2px 0;color:var(--cielo);font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.mg-abre{flex:none;min-height:30px;padding:5px 12px;border:1px solid var(--cielo);border-radius:6px;background:none;color:#fff;font:inherit;font-weight:700;cursor:pointer}
.mg-abre:hover{background:rgba(255,255,255,.1)}
.mg-barra :focus-visible,.mg-cab :focus-visible{outline:2px solid var(--cielo);outline-offset:2px}

.mg-guia{position:fixed;right:18px;bottom:calc(var(--mg-barra) + 12px);z-index:50;width:340px;max-width:calc(100vw - 32px);max-height:calc(100vh - var(--mg-barra) - 32px);display:flex;flex-direction:column;background:var(--papel);border:1px solid var(--linea);border-radius:10px;box-shadow:0 18px 44px rgba(11,53,65,.28);overflow:hidden;color:var(--tinta);font-size:14px;line-height:1.4}
.mg-guia[hidden]{display:none!important}
.mg-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:12px 14px;background:var(--noche);color:#fff}
.mg-t{margin:0;font:700 19px/1.15 var(--display);color:#fff}
.mg-av{margin:3px 0 0;font-size:13px;color:var(--cielo-2)}
.mg-cierra{flex:none;width:32px;height:32px;margin:-4px -6px 0 0;border:0;border-radius:6px;background:none;color:#fff;font-size:22px;line-height:1;cursor:pointer}
.mg-cierra:hover{background:rgba(255,255,255,.14)}
.mg-prog{flex:none;height:4px;background:var(--bruma)}
.mg-prog i{display:block;height:100%;width:0;background:var(--acero-2);transition:width .25s ease}
.mg-prog i.lleno{background:var(--verde)}
.mg-lista{flex:1 1 auto;min-height:0;margin:0;padding:4px 6px;list-style:none;overflow-y:auto;-webkit-overflow-scrolling:touch}
.mg-o+.mg-o{border-top:1px solid var(--linea)}
.mg-o button{display:flex;gap:10px;align-items:flex-start;width:100%;padding:9px 8px;border:0;border-radius:6px;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.mg-o button:hover,.mg-o button[aria-current]{background:var(--bruma)}
.mg-marca{flex:none;position:relative;width:18px;height:18px;margin-top:1px;border:2px solid var(--suave);border-radius:50%;background:var(--papel)}
.mg-o.visto .mg-marca{border-color:var(--acero-2)}
.mg-o.visto .mg-marca::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--acero-2)}
.mg-o.hecho .mg-marca{border-color:var(--verde);background:var(--verde)}
.mg-o.hecho .mg-marca::after{content:"";position:absolute;left:4px;top:0;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.mg-tx{min-width:0;display:block}
.mg-tx b{display:block;font-weight:700}
.mg-tx span:not(.vh){display:block;margin-top:1px;font-size:13px;color:var(--texto)}
.mg-tx em{display:block;margin-top:4px;font-size:13px;font-style:normal;font-weight:700;color:var(--acero-2)}
.mg-pie{flex:none;padding:9px 14px 11px;border-top:1px solid var(--linea);background:var(--bruma);font-size:13px;color:var(--texto)}
@media screen and (min-width:1041px){
  html.con-guia .lado{height:calc(100vh - var(--mg-barra))}
}
@media (max-width:1040px){
  .mg-barra{bottom:calc(60px + env(safe-area-inset-bottom));padding-bottom:7px}
  @media screen{
    html.con-guia .area{padding-bottom:calc(var(--mg-barra) + 96px)}
    html.con-guia .brindis{bottom:calc(var(--mg-barra) + 76px)}
  }
  .mg-guia{left:16px;right:16px;width:auto;max-width:none;bottom:calc(68px + var(--mg-barra) + env(safe-area-inset-bottom));max-height:calc(100dvh - var(--mg-barra) - 88px)}
}
@media (max-width:640px){
  .mg-largo{display:none}
  .mg-corto{display:inline}
  .mg-barra{font-size:12px}
  .mg-barra-t{flex-basis:200px}
  .mg-barra.con-paso .mg-barra-t{flex-basis:100%}
  .mg-barra.con-paso .mg-paso{flex:1 1 0;min-width:0}
}
@media (prefers-reduced-motion:reduce){.mg-prog i{transition:none}}
@media print{.mg-barra,.mg-guia{display:none!important}}