/* ============================================================
   Oasis Omnicanal · avisos en el celular (Web Push) · prefijo av-
   Tarjeta discreta para activarlos y ventana "Avisos en este dispositivo" (js/avisos.js)
   ============================================================ */

/* ---------------- tarjeta flotante ---------------- */
.av-tarjeta {
  position: fixed; z-index: 40; left: calc(var(--rail-w) + 16px + env(safe-area-inset-left, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: min(360px, calc(100vw - var(--rail-w) - 32px - env(safe-area-inset-left, 0px)));
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 14px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radio-l);
  box-shadow: var(--sombra-l); animation: av-sube .22s ease-out;
}
.av-tarjeta-ico {
  flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--olivo-50); color: var(--olivo);
}
.av-tarjeta-txt { min-width: 0; }
.av-tarjeta h2 { font-size: 14px; font-weight: 600; color: var(--ink); margin: 1px 0 2px; }
.av-tarjeta p { font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.av-tarjeta-acc { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
@keyframes av-sube { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------------- ventana "Avisos en este dispositivo" ---------------- */
.av-panel { display: flex; flex-direction: column; gap: 14px; padding-bottom: 6px; }
.av-estado { display: flex; gap: 12px; align-items: center; }
.av-estado-ico {
  flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--olivo-50); color: var(--olivo);
}
.av-estado b { font-size: 14px; font-weight: 600; }
.av-estado-sub { margin-top: 3px; }
.av-intro { color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.av-intro b { color: var(--ink); }
.av-int { align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: var(--radio); background: var(--bg); }
.av-int .o-int-pista { margin-top: 1px; flex: none; }
.av-int > span:last-child { display: flex; flex-direction: column; gap: 2px; font-weight: 500; }
.av-int small { font-size: 12px; font-weight: 400; color: var(--ink-3t); }
.av-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.av-nota { margin-top: -6px; }
.av-pasos { font-size: 14px; }
.av-pasos b { color: var(--ink); }
.av-quien { border-top: 1px solid var(--line-2); padding-top: 12px; }
.av-quien h3 { font-size: 12px; font-weight: 600; color: var(--ink-3t); text-transform: none; margin-bottom: 8px; }
.av-quien ul { display: flex; flex-direction: column; gap: 7px; }
.av-quien li { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.av-quien li .o-ico { color: var(--olivo); margin-top: 1px; }
.av-quien li b { color: var(--ink); font-weight: 600; }

/* ---------------- celular ---------------- */
@media (max-width: 759px) {
  .av-tarjeta {
    left: calc(12px + env(safe-area-inset-left, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); width: auto;
    bottom: calc(var(--barra-movil-h) + 12px + env(safe-area-inset-bottom));
  }
  .av-tarjeta-acc .o-btn { height: 44px; flex: 1; font-size: 14px; }
  /* con una conversación abierta el compositor va abajo: la tarjeta no lo tapa */
  #app.enfoque ~ .av-tarjeta, #app.con-conv ~ .av-tarjeta { display: none; }
  .av-acciones .o-btn { width: 100%; height: 44px; }
  .av-int { padding: 12px 10px; }
}

@media (prefers-reduced-motion: reduce) { .av-tarjeta { animation: none; } }
@media print { .av-tarjeta { display: none !important; } }