.conecta-pwa-panel {
  position: fixed;
  z-index: 2147483647;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  width: min(460px, calc(100vw - 40px));
  padding: 14px;
  color: #17324D;
  background: #FFFFFF;
  border: 1px solid #DDE7F0;
  border-radius: 16px;
  box-shadow: 0 14px 32px rgba(23, 50, 77, 0.18);
  font: 500 14px/1.35 Arial, sans-serif;
}

.conecta-pwa-panel::before {
  width: 10px;
  height: 10px;
  margin-right: -18px;
  content: '';
  background: #137FEC;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

.conecta-pwa-copy { margin: 0; }

.conecta-pwa-action,
.conecta-pwa-dismiss {
  min-height: 38px;
  padding: 8px 11px;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.conecta-pwa-action { color: #FFFFFF; background: #0757A6; }
.conecta-pwa-dismiss { color: #0757A6; background: transparent; }
.conecta-pwa-action:hover { background: #064982; }
.conecta-pwa-action:focus-visible,
.conecta-pwa-dismiss:focus-visible { outline: 3px solid #17324D; outline-offset: 3px; }

.conecta-pwa-offline {
  width: min(560px, calc(100vw - 40px));
  margin: 14vh auto;
  padding: 28px;
  color: #17324D;
  background: #FFFFFF;
  border: 1px solid #DDE7F0;
  border-radius: 16px;
  box-shadow: 0 14px 32px rgba(23, 50, 77, 0.14);
  font: 500 16px/1.5 Arial, sans-serif;
}

.conecta-pwa-offline h1 { margin-top: 0; color: #0757A6; }

@media (max-width: 560px) {
  .conecta-pwa-panel { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: calc(100vw - 24px); grid-template-columns: 1fr auto; }
  .conecta-pwa-panel::before { display: none; }
  .conecta-pwa-copy { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .conecta-pwa-panel,
  .conecta-pwa-action,
  .conecta-pwa-dismiss { transition: none; animation: none; }
}