/* Apps instalables (9/10-oct-2026): «Instalar app», campana «App y notificaciones», panel, avisos de versión y de push, y
   la pantalla «Sin conexión» (assets/pw-app.js). Consolas: lenguaje ORION con las variables de admin/admin.css. Portal
   del cliente (html.pwa-cliente, al final): el tema claro de portal.css. Todo toque mide al menos 44 px en el teléfono. */

/* ---------------- Barra superior ---------------- */
.pwa-top{display:inline-flex;align-items:center;gap:8px;flex:none}
.pwa-inst{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.pwa-inst svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5}
.pwa-campana{display:inline-grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid var(--line2);background:rgb(var(--c-acc) / .06);color:var(--cyan2);cursor:pointer;
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);transition:border-color .2s,background .2s}
.pwa-campana:hover{border-color:var(--cyan);background:rgb(var(--c-acc) / .14)}
.pwa-campana svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}

/* ---------------- Panel ---------------- */
.pwa-dlg{padding:0;border:1px solid var(--line3);border-radius:4px;width:calc(100% - 24px);max-width:560px;max-height:calc(100dvh - 24px);overflow:auto;
  background:#061426;color:var(--text);box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 40px rgb(var(--c-acc) / .12)}
.pwa-dlg::backdrop{background:rgb(var(--c-scrim) / .72);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.pwa-dlg-in{padding:20px 22px 22px}
.pwa-dlg-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:6px}
.pwa-dlg-hd h2{font-size:20px;margin:0}
.pwa-dlg-hd .eyebrow{margin-bottom:4px}
.pwa-x{flex:none;width:36px;height:36px;display:inline-grid;place-items:center;border:1px solid var(--line2);background:transparent;color:var(--soft);font-size:20px;line-height:1;cursor:pointer;padding:0}
.pwa-x:hover{border-color:var(--cyan);color:var(--cyan2)}
.pwa-sec{border-top:1px solid var(--line);padding-top:14px;margin-top:14px}
.pwa-sec h3{font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan2);margin:0 0 10px}
.pwa-sec p{margin:0 0 10px;color:var(--soft)}
.pwa-sec .note{margin:0 0 12px}
.pwa-sec h4{margin:16px 0 8px}
.pwa-sec .hint{margin:12px 0 0;line-height:1.5}
.pwa-ok{color:var(--good)!important;display:flex;align-items:center;gap:8px}
.pwa-ok::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 8px var(--good);flex:none}
.pwa-acc{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.pwa-pasos{margin:0 0 10px;padding-left:20px;color:var(--soft)}
.pwa-pasos li{margin:0 0 6px}
.pwa-ico{display:inline-grid;place-items:center;width:20px;height:20px;border:1px solid var(--line2);vertical-align:-4px;margin:0 2px}
.pwa-ico svg{width:12px;height:12px;fill:none;stroke:var(--cyan2);stroke-width:1.5}
.pwa-disp{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pwa-disp li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--line);background:rgb(var(--c-pn) / .5)}
.pwa-disp li>div{min-width:0}
.pwa-disp b{font-weight:600}
.pwa-disp small{display:block;color:var(--faint);font:400 11.5px/1.4 var(--mono);margin-top:3px}
.pwa-disp .chip{font-size:10.5px;padding:1px 7px;margin-left:4px;vertical-align:1px}

/* ---------------- Aviso de versión nueva ---------------- */
.pwa-version{position:fixed;z-index:80;left:50%;transform:translateX(-50%);bottom:18px;display:flex;align-items:center;gap:12px;padding:10px 10px 10px 16px;
  width:max-content;max-width:calc(100% - 24px);box-shadow:0 14px 40px rgba(0,0,0,.55),0 0 24px rgb(var(--c-acc) / .2);font-size:13.5px}
.pwa-version b{color:var(--cyan2)}
.pwa-version .pwa-x{width:32px;height:32px;font-size:18px}

/* ---------------- Aviso de push dentro de la app (y la notificación simulada) ---------------- */
.pwa-aviso{position:fixed;z-index:85;top:calc(var(--top) + 12px);right:16px;width:min(360px,calc(100% - 24px));padding:12px 14px 14px;background:#0A2338;
  border:1px solid var(--line3);border-left:3px solid var(--cyan);box-shadow:0 16px 44px rgba(0,0,0,.6),0 0 26px rgb(var(--c-acc) / .2);animation:pwaEntra .35s var(--ease)}
.pwa-aviso-hd{display:flex;align-items:center;gap:8px;margin-bottom:6px;font:500 11px/1.2 var(--mono);color:var(--muted);letter-spacing:.06em}
.pwa-aviso-hd svg{width:11px;height:18px;flex:none}
.pwa-aviso-hd span{flex:1;min-width:0;text-transform:uppercase}
.pwa-aviso-hd .pwa-x{width:30px;height:30px;font-size:17px}
.pwa-aviso>b{display:block;font:600 15px/1.3 var(--hud);color:var(--text);letter-spacing:.02em}
.pwa-aviso>p{margin:4px 0 10px;color:var(--soft);font-size:13.5px;line-height:1.45}
@keyframes pwaEntra{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ---------------- Sin conexión ---------------- */
.pwa-off{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:24px 16px;background:radial-gradient(900px 520px at 72% -12%,rgb(var(--c-blue) / .2),transparent 60%),rgb(2 8 15 / .96)}
.pwa-off-box{width:min(420px,100%);padding:28px 24px 22px;text-align:center}
.pwa-off-box>svg{width:26px;height:42px;filter:drop-shadow(0 0 8px rgb(var(--c-blue) / .6));margin-bottom:12px}
.pwa-off-box h2{font-size:22px;margin:0 0 8px}
.pwa-off-box p{color:var(--soft)}
.pwa-off-box .btn{min-height:44px;padding:10px 24px}
.pwa-off-box .hint{margin:14px 0 0}

/* ---------------- Teléfono (app instalada): toques de 44 px y barra compacta ---------------- */
@media (max-width:600px){
  /* Con «Instalar app» y la campana, la barra del teléfono no alcanza para el rótulo «ORION en línea»: queda el punto. */
  .top .top-sys{gap:8px}
  .top .top-on>span{display:none}
  .pwa-inst span{display:none}
  .pwa-inst{width:44px;height:44px;padding:0;justify-content:center}
  .pwa-inst svg{width:18px;height:18px}
  .pwa-campana{width:44px;height:44px}
  .pwa-dlg{width:calc(100% - 16px);max-height:calc(100dvh - 16px)}
  .pwa-dlg-in{padding:16px 16px 18px}
  .pwa-x{width:44px;height:44px}
  .pwa-acc .btn{flex:1 1 100%;min-height:44px}
  .pwa-disp li .btn{min-height:44px;min-width:76px}
  .pwa-version{left:12px;right:12px;transform:none;width:auto;bottom:12px}
  .pwa-version .btn{min-height:44px}
  .pwa-version .pwa-x{width:44px;height:44px}
  .pwa-aviso{right:12px;top:12px}
  .pwa-aviso .btn{min-height:44px;min-width:96px}
  .pwa-aviso-hd .pwa-x{width:44px;height:44px}
}
@media (prefers-reduced-motion:reduce){.pwa-aviso{animation:none}}

/* ---------------- Portal del cliente (fase 2, 10-oct-2026): bloque «App y avisos» de «Mi cuenta», tema claro ---------------- */
.pwa-cli-sec:empty{display:none}
.pwa-cli .pwa-sec:first-child{border-top:0;margin-top:0;padding-top:0}
.pwa-cli .pwa-sec h3{font:600 12.5px/1.3 var(--hud);letter-spacing:.14em;color:var(--cyan2)}
.pwa-cli .pwa-sec p,.pwa-cli .pwa-pasos{color:var(--text)}
.pwa-cli .pwa-sec .hint{color:var(--faint)}
.pwa-cli .pwa-sec h4{margin:16px 0 8px}
.pwa-cli .pwa-disp li{background:var(--bg);border-radius:8px}
.pwa-cli .note.info{color:var(--cyan2)}
.pwa-cli .note.bad{color:var(--bad)}
.pwa-cli .pwa-ico{border-radius:4px}
.pwa-cli .pwa-ico svg{stroke:var(--cyan2)}
html.pwa-cliente .pwa-off{background:radial-gradient(900px 520px at 72% -12%,rgb(var(--c-blue) / .14),transparent 60%),rgb(244 245 247 / .97)}
html.pwa-cliente .pwa-off-box{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 50px rgba(16,24,40,.12)}
html.pwa-cliente .pwa-off-box h2{color:var(--cyan2)}
html.pwa-cliente .pwa-off-box p{color:var(--text)}
html.pwa-cliente .pwa-aviso{top:16px;background:#fff;color:var(--text);border:1px solid var(--line2);border-left:3px solid var(--cyan);border-radius:10px;box-shadow:0 16px 44px rgba(16,24,40,.18)}
html.pwa-cliente .pwa-aviso>b{color:var(--cyan2)}
html.pwa-cliente .pwa-aviso>p{color:var(--text)}
html.pwa-cliente .pwa-version{background:#fff;color:var(--text);border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 40px rgba(16,24,40,.16)}
html.pwa-cliente .pwa-version b{color:var(--cyan2)}
html.pwa-cliente .pwa-x{border-color:var(--line2);color:var(--muted);border-radius:8px}