/* Instalar como aplicación: botón de la barra, botón del ingreso y aviso de abajo. Mismo archivo en archive/ y vault/. */

/* Barra superior: se ve o no desde el primer pintado (data-pwa lo pone pwa.js en el <head>). */
.pwa-cab{display:none;align-items:center;gap:7px;height:36px;padding:0 12px;margin-left:12px;flex:0 0 auto;
  font:inherit;font-size:13px;font-weight:600;color:#d71920;background:transparent;
  border:1px solid color-mix(in srgb,#d71920 35%,#fff);border-radius:8px;cursor:pointer;white-space:nowrap}
.pwa-cab:hover{background:#d71920;color:#fff}
.pwa-cab:focus-visible{outline:2px solid #d71920;outline-offset:2px}
:root[data-pwa="ofrecer"] .pwa-cab{display:inline-flex}
.pwa-cab--apagado{visibility:hidden}
@media(max-width:820px){
  /* Solo el ícono, a la izquierda de la hamburguesa. */
  :root[data-pwa="ofrecer"] .pwa-cab{width:44px;height:44px;padding:0;justify-content:center;margin-left:auto;order:2}
  .pwa-cab span{display:none}
  :root[data-pwa="ofrecer"] .topbar .hamb{margin-left:4px;order:3}
}

/* Pantallas de ingreso: debajo del formulario, sin competir con «Entrar». */
.card .pwa-ingreso,.auth .pwa-ingreso{display:block;min-height:44px;width:100%;margin-top:12px;padding:11px 20px;line-height:1.2;font:inherit;font-size:14px;font-weight:600;
  color:#d71920;background:transparent;border:1px solid color-mix(in srgb,#d71920 35%,#fff);border-radius:8px;box-shadow:none;cursor:pointer}
.card .pwa-ingreso:hover,.auth .pwa-ingreso:hover{background:#fdf1f1}
.card .pwa-ingreso[hidden],.auth .pwa-ingreso[hidden]{display:none}

/* Aviso de abajo. Sale cuando el navegador dice que se puede instalar (o en el iPhone, donde nunca lo dice). */
.pwa-banda{position:fixed;z-index:59;left:20px;bottom:20px;width:min(420px,calc(100vw - 32px));
  display:flex;align-items:center;gap:12px;padding:14px 14px 14px 16px;
  background:#fff;color:#1a1a1a;border:1px solid #d8d4cb;border-radius:12px;
  box-shadow:0 8px 28px rgba(20,28,46,.12);font-size:14px;line-height:1.4;
  opacity:0;transform:translateY(16px);transition:opacity .25s,transform .3s}
.pwa-banda--visible{opacity:1;transform:none}
.pwa-banda--quieta{transition:none}
.pwa-banda__icono{width:44px;height:44px;flex:0 0 44px;border-radius:10px}
.pwa-banda__texto{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.pwa-banda__texto strong{font-size:14px}
.pwa-banda__texto span{font-size:12.5px;color:#5b5f6b}
.pwa-banda__acciones{flex:0 0 auto;display:flex;flex-direction:column;gap:6px}
.pwa-btn{min-height:36px;padding:0 14px;font:inherit;font-size:13px;font-weight:600;color:#3a3f4b;background:#fff;
  border:1px solid #d8d4cb;border-radius:8px;cursor:pointer;white-space:nowrap}
.pwa-btn:hover{border-color:#1a1a1a;color:#1a1a1a}
.pwa-btn--primario{color:#fff;background:#d71920;border-color:#d71920}
.pwa-btn--primario:hover{background:#a81219;border-color:#a81219;color:#fff}
.pwa-btn:focus-visible{outline:2px solid #d71920;outline-offset:2px}
@media(max-width:600px){
  .pwa-banda{left:12px;right:12px;width:auto;bottom:calc(env(safe-area-inset-bottom) + 12px)}
  @media(pointer:coarse){.pwa-btn{min-height:40px}}
}
/* «Volver arriba» sube por encima del aviso mientras se vea. */
.pwa-con-banda .totop{bottom:116px}
@media(max-width:600px){.pwa-con-banda .totop{bottom:calc(env(safe-area-inset-bottom) + 128px)}}
@media (prefers-reduced-motion: reduce){.pwa-banda{transition:none}}
@media print{.pwa-banda,.pwa-cab,.pwa-ingreso{display:none!important}}