/* La hoja (dialog.hoja): abajo en celular, centrada en computadora; cabecera con el color de la marca (--noche), cerrar
   de 44 px y contenido con su propio scroll. La abren abrirHoja() (hojas-app.js) y confirmar() (apps-rol.js).
   Salió de apps-marca.css para que el sitio público use la MISMA hoja que las apps: se carga después de
   apps-marca.css en cada app y sola en las páginas del sitio. Solo tokens (tokens.css); una página puede
   cambiar el color redefiniendo --noche en dialog.hoja. */
dialog.hoja{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%;margin:0;display:grid;align-items:end;justify-items:center}
dialog.hoja::backdrop{background:color-mix(in srgb,var(--noche) 55%,transparent);backdrop-filter:blur(3px)}
.hoja-caja{width:min(100%,460px);display:grid;gap:12px;padding:12px 22px max(22px,env(safe-area-inset-bottom));border-radius:28px 28px 0 0;background:var(--tarjeta);color:var(--tinta);font-family:var(--apps-sans);
  box-shadow:0 -20px 50px -20px color-mix(in srgb,var(--noche) 60%,transparent)}
.hoja-asa{justify-self:center;width:42px;height:5px;border-radius:5px;background:color-mix(in srgb,var(--tinta) 18%,transparent)}
.hoja-caja h2{margin:4px 0 0;font-size:1.35rem;line-height:1.2;letter-spacing:-.015em}
.hoja-caja p{margin:0;color:var(--tinta-2);line-height:1.5;white-space:pre-line}
.hoja-pantalla .hoja-caja{padding:0;gap:0;overflow:hidden;max-height:min(92dvh,860px);grid-template-rows:auto minmax(0,1fr)}
.hoja-cab{position:relative;display:flex;align-items:center;gap:12px;min-height:64px;padding:18px 12px 14px 22px;background:var(--noche);color:var(--sobre-noche)}
.hoja-cab .hoja-asa{position:absolute;left:50%;top:7px;transform:translateX(-50%);background:color-mix(in srgb,var(--sobre-noche) 40%,transparent)}
.hoja-cab h2{flex:1;min-width:0;margin:0;color:var(--sobre-noche);font-size:1.3rem;line-height:1.2;letter-spacing:-.015em}
.hoja-cerrar{display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid color-mix(in srgb,var(--sobre-noche) 38%,transparent);background:transparent;color:var(--sobre-noche);cursor:pointer}
.hoja-cerrar:focus-visible{outline:3px solid var(--sobre-noche);outline-offset:2px}
.hoja-cuerpo{display:grid;gap:12px;align-content:start;overflow-y:auto;overscroll-behavior:contain;padding:18px 22px max(22px,env(safe-area-inset-bottom))}
.hoja-cuerpo > section{display:grid;gap:12px}
dialog.hoja:not(.hoja-pantalla) .hoja-caja{padding-top:0}
dialog.hoja:not(.hoja-pantalla) .hoja-asa{position:relative;z-index:1;margin:8px 0 -25px;background:color-mix(in srgb,var(--sobre-noche) 40%,transparent)}
dialog.hoja:not(.hoja-pantalla) .hoja-caja h2{margin:0 -22px 4px;padding:26px 22px 16px;border-radius:28px 28px 0 0;background:var(--noche);color:var(--sobre-noche)}
@media (min-width:640px){dialog.hoja{align-items:center}.hoja-caja{border-radius:28px}}