.access-pwa-bar{position:relative;z-index:5;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;width:min(90%,520px);margin:16px auto;padding:12px 16px calc(12px + env(safe-area-inset-bottom));box-sizing:border-box;border:0;border-radius:0;background:transparent;color:#756683;font:13px/1.6 system-ui,sans-serif}.access-pwa-bar[hidden],.access-pwa-bar [hidden]{display:none!important}.access-pwa-bar button{border:0;background:#f0eaf8;color:#462585;font:inherit;font-weight:600;border-radius:10px;padding:10px 16px;min-height:44px;cursor:pointer}.access-pwa-bar p{flex-basis:100%;margin:0;text-align:center}.access-pwa-bar span:empty{display:none}.access-offline{margin:0;background:#f6f3fa;color:#392948;font:16px/1.6 system-ui,sans-serif}.access-offline main{width:min(85%,440px);margin:max(8vh,env(safe-area-inset-top)) auto;padding:28px;background:white;border-radius:24px;box-sizing:border-box;text-align:center}.access-offline img{width:100%;height:auto}.access-offline h1{font-size:27px;line-height:1.2}.access-offline a{display:block;margin:20px 0;color:#462585}.access-offline .access-pwa-button{background:#462585;color:white;border-radius:12px;padding:12px;text-decoration:none}.access-offline-note{font-size:12px;color:#84718e}

.access-installed body{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);min-height:100dvh;overscroll-behavior-y:none}
.access-pwa-bar button.access-pwa-primary{background:#462585;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.access-pwa-bar button.access-pwa-primary:hover{background:#3a1f6e}
.access-pwa-bar button.access-pwa-primary:focus-visible{outline:3px solid rgba(70,37,133,.35);outline-offset:2px}
/* No box around the bar: any status or help text gets its own small readable pill. */
.access-pwa-bar>span:not(:empty),.access-pwa-bar>p{background:#fffffff2;border-radius:12px;padding:6px 12px;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.access-pwa-bar button:not(.access-pwa-primary){box-shadow:0 4px 12px rgba(0,0,0,.2)}

/* «Aplicación» section: install / update rows inside the screen's action list (access-pwa.js). Self-contained so it
   also looks right on the sign-in page, which does not load access.css. */
.access-app-section{display:flex;flex-direction:column;gap:.6rem;width:100%;margin-top:.9rem;box-sizing:border-box}
.access-app-section[hidden],.access-app-section [hidden]{display:none!important}
.access-section-title{display:flex;align-items:center;gap:.6rem;margin:.3rem 0 0;font-size:.7rem;font-weight:700;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;color:#8a7f99}
.access-section-title::after{content:"";flex:1;height:1px;background:#e8e1f1}
.access-app-section .access-quick-action{box-sizing:border-box;display:flex;align-items:center;gap:.8rem;width:100%;min-height:52px;padding:.85rem 1rem;border:1px solid #e8e1f1;border-radius:12px;background:#f8f5fc;color:#462585;font:inherit;font-size:.9rem;font-weight:650;text-align:left;cursor:pointer}
.access-app-section .access-quick-action .material-icons-round{font-size:1.25rem}
.access-app-section .access-pwa-update{background:#462585;border-color:#462585;color:#fff}
.access-app-status{margin:0;font-size:.8rem;line-height:1.5;color:#756683;text-align:left}
.access-app-status:empty{display:none}