/* SejaV+ — UI compartilhada: foco-visível, toast, modal de confirmação, empty state. */

/* foco-visível global (acessibilidade) — nunca remover outline */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--brand, #0c7a45);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ===== toast ===== */
#ui-toasts { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px; z-index: 2000; pointer-events: none; width: min(92vw, 420px); }
.ui-toast { pointer-events: auto; background: #16181d; color: #fff; border-radius: var(--r, 9px);
  padding: 11px 15px; font: 450 13px/1.4 "Inter", system-ui, sans-serif;
  box-shadow: 0 10px 24px -12px rgba(17,18,22,.45); display: flex; align-items: center; gap: 10px;
  animation: uiToastIn .18s ease-out; }
.ui-toast.sucesso { background: var(--brand, #006938); } .ui-toast.erro { background: var(--danger, #b3261e); } .ui-toast.info { background: #16181d; }
.ui-toast b { font-weight: 600; }
@keyframes uiToastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ===== modal de confirmação ===== */
.ui-modal { position: fixed; inset: 0; z-index: 2100; display: grid; place-items: center;
  background: rgba(17,18,22,.42); padding: 20px; animation: uiFade .15s ease-out; }
.ui-modal__card { background: var(--panel, #fff); color: var(--ink, #16181d); border: 1px solid var(--line, rgba(17,18,22,.08)); border-radius: 12px;
  padding: 22px; width: min(94vw, 400px); box-shadow: var(--shadow-float, 0 18px 48px -16px rgba(17,18,22,.28)); }
.ui-modal__msg { font-size: 14px; line-height: 1.5; color: var(--ink-2, #3c3f46); }
.ui-modal__row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.ui-btn { font: 550 13px/1 "Inter", system-ui, sans-serif; border-radius: var(--r-sm, 6px); padding: 9px 13px; min-height: 34px;
  cursor: pointer; border: 1px solid var(--line-2, rgba(17,18,22,.13)); background: var(--panel, #fff); color: var(--ink-2, #3c3f46); }
.ui-btn:hover { background: color-mix(in srgb, var(--ink, #16181d) 3%, transparent); color: var(--ink, #16181d); }
.ui-btn--primary { background: var(--brand, #006938); border-color: var(--brand, #006938); color: #fff; }
.ui-btn--danger { background: var(--danger, #b3261e); border-color: var(--danger, #b3261e); color: #fff; }
@keyframes uiFade { from { opacity: 0; } to { opacity: 1; } }

/* ===== empty state ===== */
.ui-empty { text-align: center; padding: 42px 20px; color: var(--mut, #62656e); }
.ui-empty__ic { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  margin: 0 auto 14px; background: color-mix(in srgb, var(--brand, #006938) 10%, var(--panel, #fff)); color: var(--brand, #006938); }
.ui-empty h3 { font-size: 16px; font-weight: 650; letter-spacing: -.015em; color: var(--ink, #16181d); margin: 0 0 6px; }
.ui-empty p { font-size: 13px; color: var(--mut, #62656e); max-width: 40ch; margin: 0 auto 16px; line-height: 1.5; }
.ui-empty__act { font: 550 13px/1 "Inter", system-ui, sans-serif; border: 1px solid var(--brand, #006938); border-radius: var(--r-sm, 6px); min-height: 36px;
  padding: 9px 15px; cursor: pointer; background: var(--brand, #006938); color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }

@media (prefers-reduced-motion: reduce) {
  .ui-toast, .ui-modal { animation: none; }
}