/* Safadeza UX Clarity 2691 — Council competitive */
:root {
  --sf-ux-ctx-h: 34px;
}
.sf-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 9999;
  background: #831843; color: #fff; padding: 0.55rem 1rem; border-radius: 0 0 10px 0;
  font-weight: 700; text-decoration: none;
}
.sf-skip-link:focus { left: 0; }
.sf-ux-context {
  position: sticky;
  top: calc(var(--sf-header-h, 56px) + env(safe-area-inset-top, 0px));
  z-index: 280;
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  min-height: var(--sf-ux-ctx-h);
  padding: 0.35rem 0.85rem;
  background: linear-gradient(90deg, #fff1f2 0%, #fdf2f8 55%, #fff 100%);
  border-bottom: 1px solid rgba(225, 29, 72, 0.12);
  font-size: 0.78rem; color: #9f1239; font-weight: 600;
}
.sf-ux-context b { color: #831843; font-weight: 800; }
.sf-ux-context a {
  color: #be185d; font-weight: 700; text-decoration: none; white-space: nowrap;
  min-height: 48px; display: inline-flex; align-items: center; padding: 0 0.5rem;
  touch-action: manipulation;
}
/* Safa: subbar abaixo do contexto (2713) */
body.safa .safa-subbar {
  top: calc(var(--sf-header-h, 56px) + var(--sf-ux-ctx-h, 34px) + env(safe-area-inset-top, 0px));
}
.sf-ux-tip {
  position: fixed; left: 0.75rem; right: 0.75rem;
  bottom: calc(var(--sf-ia-dock-h, 58px) + 12px + env(safe-area-inset-bottom, 0px));
  z-index: 95; max-width: 420px; margin: 0 auto;
  background: #fff; border: 1.5px solid #fecdd3; border-radius: 16px;
  box-shadow: 0 12px 36px rgba(15, 10, 20, 0.14);
  padding: 0.85rem 1rem; color: #881337; font-size: 0.8rem; line-height: 1.4;
}
.sf-ux-tip strong { display: block; margin-bottom: 0.25rem; font-size: 0.88rem; color: #831843; }
.sf-ux-tip-actions { display: flex; gap: 0.5rem; margin-top: 0.65rem; }
.sf-ux-tip button {
  flex: 1; border: 0; border-radius: 999px; padding: 0.55rem 0.8rem;
  min-height: 48px; font-weight: 800; cursor: pointer; font-size: 0.78rem;
  touch-action: manipulation;
}
.sf-ux-tip .ok { background: linear-gradient(145deg, #e11d48, #db2777); color: #fff; }
.sf-ux-tip .ghost { background: #fff1f2; color: #9f1239; }
@media (min-width: 768px) {
  .sf-ux-tip { bottom: 1.25rem; right: 1.25rem; left: auto; }
}
.sf-empty-human {
  text-align: center; padding: 1.5rem 1rem; color: #9f1239; font-size: 0.92rem; line-height: 1.45;
}
.sf-empty-human a { color: #be185d; font-weight: 800; }
/* focus visível — compreensão teclado */
.sf-topnav-btn:focus-visible,
.sf-ia-dock a:focus-visible,
.sf-ux-context a:focus-visible {
  outline: 2px solid #7c3aed; outline-offset: 2px;
}