/* static/css/pwa.css — modo app: barra inferior, hoja de agentes, avisos */
:root { --bottom-nav-h: 56px; }

.bottom-nav { display: none; }
.pwa-instalar { display: none; }

/* Aviso de versión nueva: visible en cualquier pantalla (en escritorio también hay caché) */
.pwa-aviso {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 1031;
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  background: var(--bg, #fff); color: var(--text, #0f172a);
  border: 1px solid var(--primary-light, #E0F2FE); border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .12); font-size: .9rem;
}
.pwa-aviso[hidden] { display: none; }

@media (max-width: 576px), (display-mode: standalone) {
  .bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    display: grid; grid-template-columns: repeat(4, 1fr);
    height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--bg, #fff); border-top: 1px solid var(--primary-light, #E0F2FE);
  }
  .bottom-nav__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    color: var(--text-muted, #64748b); text-decoration: none; font-size: 11px; line-height: 1;
    background: none; border: 0; padding: 6px 0; font-family: inherit;
  }
  .bottom-nav__item.is-active { color: var(--primary, #0EA5E9); }
  .bottom-nav__item:focus-visible { outline: 2px solid var(--primary, #0EA5E9); outline-offset: -2px; }
  .bottom-nav__icon { position: relative; font-size: 22px; line-height: 1; }
  .nav-badge {
    position: absolute; top: -4px; right: -10px; min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 8px; background: #dc2626; color: #fff; font-size: 10px; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .nav-badge[hidden] { display: none; }

  /* Con sesión, la barra superior se queda con la marca; sin sesión «Entrar / Registrarse» siguen arriba */
  .con-sesion .app-topbar .top-actions { display: none; }

  /* El chat es una columna flex de altura fija: se acorta en la barra, sin desplazar el composer */
  .chat-container { height: calc(100vh - 56px - var(--bottom-nav-h)); }
  .chat-container.safe-bottom { height: calc(100vh - 56px - var(--bottom-nav-h) - env(safe-area-inset-bottom, 0px)); }
  .chat-layout { height: calc(100vh - 56px - var(--bottom-nav-h)); }

  /* El resto de páginas deja hueco bajo la barra */
  body.con-sesion:not(.chat-page) { padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px)); }

  .pwa-aviso { bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 12px); }
  .pwa-instalar {
    position: fixed; left: 12px; right: 12px; z-index: 1031;
    bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 12px);
    display: flex; align-items: center; gap: 12px; padding: 10px 14px;
    background: var(--bg, #fff); color: var(--text, #0f172a);
    border: 1px solid var(--primary-light, #E0F2FE); border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .12); font-size: .9rem;
  }
  .pwa-instalar[hidden] { display: none; }
}

@media (prefers-reduced-motion: reduce) { .bottom-nav, .pwa-aviso, .pwa-instalar { transition: none; } }

/* Hoja de agentes (también vale en escritorio) */
.agent-switch { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.agent-switch h2 { margin: 0; }
.agent-switch:focus-visible { outline: 2px solid var(--primary, #0EA5E9); outline-offset: 2px; border-radius: 4px; }
.hoja-agentes { border: 0; border-radius: 16px 16px 0 0; padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  width: 100%; max-width: 100%; margin: auto 0 0; max-height: 75vh; background: var(--bg, #fff); color: var(--text, #0f172a); }
.hoja-agentes::backdrop { background: rgba(15, 23, 42, .45); }
.hoja-agentes__asa { width: 36px; height: 4px; border-radius: 2px; background: #cbd5e1; margin: 0 auto 10px; }
.hoja-agentes__cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.hoja-agentes__lista { list-style: none; margin: 8px 0 0; padding: 0; overflow-y: auto; max-height: 55vh; }
.hoja-agentes__item { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-radius: 10px; color: inherit; text-decoration: none; }
.hoja-agentes__item.is-active { background: var(--primary-light, #E0F2FE); }
.hoja-agentes__item:focus-visible { outline: 2px solid var(--primary, #0EA5E9); }
.hoja-agentes__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--primary, #0EA5E9); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; overflow: hidden; flex: 0 0 40px; }
.hoja-agentes__avatar img { width: 100%; height: 100%; object-fit: cover; }
.hoja-agentes__txt { display: flex; flex-direction: column; line-height: 1.2; }
.hoja-agentes__txt small { color: var(--text-muted, #64748b); }
@media (min-width: 577px) { .hoja-agentes { max-width: 420px; margin: auto; border-radius: 16px; } }

/* Mensaje en cola sin conexión */
.message.pendiente .bubble { opacity: .7; font-style: italic; }