/* LummiNotify - toasts, dialogos e baloes. Par de public/assets/js/lummi-notify.js */

:root {
  --lummi-notify-ink: #17231f;
  --lummi-notify-muted: #5f6d67;
  --lummi-notify-surface: #ffffff;
  --lummi-notify-line: #e3e8e5;
  --lummi-notify-shadow: 0 18px 42px rgba(22, 44, 37, .16), 0 3px 10px rgba(22, 44, 37, .07);
  --lummi-notify-success: #2f7868;
  --lummi-notify-success-soft: #e6f3ee;
  --lummi-notify-error: #c0453f;
  --lummi-notify-error-soft: #fdecea;
  --lummi-notify-warning: #b8741a;
  --lummi-notify-warning-soft: #fff3e0;
  --lummi-notify-info: #3f6f93;
  --lummi-notify-info-soft: #e8f1f8;
  --lummi-notify-ease: cubic-bezier(.21, 1.02, .73, 1);
}

/* ---------------- Toasts ---------------- */

.lummi-toast-region {
  position: fixed;
  inset: 16px 16px auto auto;
  z-index: 2147483000;
  display: flex;
  flex-direction: column-reverse;
  align-items: stretch;
  gap: 10px;
  width: min(390px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  color: inherit;
  pointer-events: none;
}

.lummi-toast-region:empty { display: none; }

.lummi-toast {
  --lummi-toast-accent: var(--lummi-notify-info);
  --lummi-toast-soft: var(--lummi-notify-info-soft);
  --lummi-toast-drag: 0px;
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 26px;
  align-items: start;
  gap: 12px;
  padding: 13px 12px 14px 13px;
  overflow: hidden;
  border: 1px solid var(--lummi-notify-line);
  border-radius: 14px;
  background: var(--lummi-notify-surface);
  box-shadow: var(--lummi-notify-shadow);
  color: var(--lummi-notify-ink);
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  pointer-events: auto;
  touch-action: pan-y;
  opacity: 0;
  transform: translate3d(calc(24px + var(--lummi-toast-drag)), -8px, 0) scale(.97);
  transition: transform .34s var(--lummi-notify-ease), opacity .28s ease, max-height .26s ease, margin .26s ease, padding .26s ease;
  max-height: 260px;
}

.lummi-toast::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--lummi-toast-accent);
}

.lummi-toast.is-visible { opacity: 1; transform: translate3d(var(--lummi-toast-drag), 0, 0) scale(1); }
.lummi-toast.is-dragging { transition: none; cursor: grabbing; }
.lummi-toast.is-stacked { display: none; }
.lummi-toast.is-leaving { opacity: 0; transform: translate3d(calc(40px + var(--lummi-toast-drag)), 0, 0) scale(.96); max-height: 0; margin-top: -10px; padding-top: 0; padding-bottom: 0; }
.lummi-toast.is-swiped-left.is-leaving { transform: translate3d(-120%, 0, 0); }
.lummi-toast.is-swiped-right.is-leaving { transform: translate3d(120%, 0, 0); }
.lummi-toast:focus-visible { outline: 3px solid color-mix(in srgb, var(--lummi-toast-accent) 30%, transparent); outline-offset: 2px; }

.lummi-toast.is-success { --lummi-toast-accent: var(--lummi-notify-success); --lummi-toast-soft: var(--lummi-notify-success-soft); }
.lummi-toast.is-error { --lummi-toast-accent: var(--lummi-notify-error); --lummi-toast-soft: var(--lummi-notify-error-soft); }
.lummi-toast.is-warning { --lummi-toast-accent: var(--lummi-notify-warning); --lummi-toast-soft: var(--lummi-notify-warning-soft); }
.lummi-toast.is-loading { --lummi-toast-accent: var(--lummi-notify-success); --lummi-toast-soft: var(--lummi-notify-success-soft); }

.lummi-toast__icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 11px;
  background: var(--lummi-toast-soft);
  color: var(--lummi-toast-accent);
}

.lummi-toast__icon svg { width: 19px; height: 19px; }
.lummi-toast.is-visible .lummi-toast__icon svg { animation: lummi-notify-pop .42s var(--lummi-notify-ease) both .06s; }

.lummi-toast__body { display: grid; gap: 3px; min-width: 0; padding-top: 1px; }
.lummi-toast__title { font-size: 13px; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }
.lummi-toast__message { margin: 0; color: var(--lummi-notify-muted); font-size: 12px; font-weight: 550; line-height: 1.5; overflow-wrap: anywhere; }
.lummi-toast__title[hidden], .lummi-toast__message[hidden], .lummi-toast__actions[hidden] { display: none; }
.lummi-toast__title + .lummi-toast__message:not([hidden]) { margin-top: 1px; }

.lummi-toast__actions { display: flex; gap: 8px; margin-top: 7px; }
.lummi-toast__action {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--lummi-toast-accent) 30%, transparent);
  border-radius: 8px;
  background: var(--lummi-toast-soft);
  color: var(--lummi-toast-accent);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: background .16s ease, transform .16s ease;
}
.lummi-toast__action:hover { background: color-mix(in srgb, var(--lummi-toast-soft) 60%, var(--lummi-toast-accent) 14%); transform: translateY(-1px); }

.lummi-toast__close {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #8a958f;
  cursor: pointer;
  opacity: .7;
  transition: background .16s ease, color .16s ease, opacity .16s ease;
}
.lummi-toast__close svg { width: 15px; height: 15px; }
.lummi-toast:hover .lummi-toast__close, .lummi-toast__close:focus-visible { opacity: 1; }
.lummi-toast__close:hover { background: #f0f3f1; color: var(--lummi-notify-ink); }
.lummi-toast__close:focus-visible { outline: 2px solid var(--lummi-toast-accent); outline-offset: 1px; }

.lummi-toast__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--lummi-toast-accent);
  opacity: 0;
  transform-origin: left center;
}
.lummi-toast.has-timer .lummi-toast__progress { opacity: .38; animation-name: lummi-notify-progress; animation-timing-function: linear; animation-fill-mode: forwards; }
.lummi-toast.is-paused .lummi-toast__progress { animation-play-state: paused; }

.lummi-notify-spinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid color-mix(in srgb, var(--lummi-toast-accent) 22%, transparent);
  border-top-color: var(--lummi-toast-accent);
  border-radius: 50%;
  animation: lummi-notify-spin .75s linear infinite;
}

/* ---------------- Dialogos ---------------- */

.lummi-dialog {
  width: min(430px, calc(100vw - 28px));
  max-width: none;
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  color: var(--lummi-notify-ink);
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.lummi-dialog::backdrop {
  background: rgba(16, 30, 25, .42);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .2s ease;
}

.lummi-dialog.is-visible::backdrop { opacity: 1; }
.lummi-dialog.is-leaving::backdrop { opacity: 0; }

.lummi-dialog__card {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 28px 28px 22px;
  border: 1px solid var(--lummi-notify-line);
  border-radius: 20px;
  background: var(--lummi-notify-surface);
  box-shadow: 0 28px 70px rgba(16, 42, 34, .26);
  text-align: center;
  opacity: 0;
  transform: translateY(14px) scale(.96);
  transition: transform .3s var(--lummi-notify-ease), opacity .2s ease;
}

.lummi-dialog.is-visible .lummi-dialog__card { opacity: 1; transform: none; }
.lummi-dialog.is-leaving .lummi-dialog__card { opacity: 0; transform: translateY(8px) scale(.97); }

.lummi-dialog__icon {
  display: grid;
  width: 58px;
  height: 58px;
  margin-bottom: 6px;
  place-items: center;
  border-radius: 18px;
  background: var(--lummi-notify-info-soft);
  color: var(--lummi-notify-info);
}
.lummi-dialog__icon svg { width: 27px; height: 27px; }
.lummi-dialog.is-visible .lummi-dialog__icon svg { animation: lummi-notify-pop .45s var(--lummi-notify-ease) both .08s; }
.lummi-dialog__icon.is-success, .lummi-dialog__icon.is-question { background: var(--lummi-notify-success-soft); color: var(--lummi-notify-success); }
.lummi-dialog__icon.is-error, .lummi-dialog__icon.is-danger { background: var(--lummi-notify-error-soft); color: var(--lummi-notify-error); }
.lummi-dialog__icon.is-warning { background: var(--lummi-notify-warning-soft); color: var(--lummi-notify-warning); }

.lummi-dialog__title { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
.lummi-dialog__text { margin: 0; color: var(--lummi-notify-muted); font-size: 13px; line-height: 1.65; white-space: pre-line; overflow-wrap: anywhere; }

.lummi-dialog__input {
  width: 100%;
  min-height: 44px;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid #d5ddd9;
  border-radius: 10px;
  background: #fbfcfb;
  color: inherit;
  font: inherit;
  font-size: 13px;
  text-align: left;
  resize: vertical;
}
textarea.lummi-dialog__input { min-height: 96px; }
.lummi-dialog__input:focus { outline: 3px solid rgba(47, 120, 104, .18); border-color: var(--lummi-notify-success); }
.lummi-dialog__error { margin: 0; color: var(--lummi-notify-error); font-size: 12px; font-weight: 700; }
.lummi-dialog__error[hidden] { display: none; }

.lummi-dialog__actions { display: flex; justify-content: center; gap: 10px; width: 100%; margin-top: 14px; }

.lummi-dialog__btn {
  flex: 1 1 0;
  min-height: 44px;
  max-width: 190px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 11px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.lummi-dialog__btn:hover { transform: translateY(-1px); }
.lummi-dialog__btn:active { transform: none; }
.lummi-dialog__btn:focus-visible { outline: 3px solid rgba(47, 120, 104, .25); outline-offset: 2px; }
.lummi-dialog__btn.is-ghost { border-color: #d9e0dc; background: #fff; color: #3f4d47; }
.lummi-dialog__btn.is-ghost:hover { background: #f4f7f5; }
.lummi-dialog__btn.is-primary { background: linear-gradient(135deg, #2f7f69, #22604f); color: #fff; box-shadow: 0 9px 20px rgba(35, 96, 79, .22); }
.lummi-dialog__btn.is-danger { background: linear-gradient(135deg, #c8514a, #a83a35); color: #fff; box-shadow: 0 9px 20px rgba(168, 58, 53, .22); }
.lummi-dialog__btn.is-warning { background: linear-gradient(135deg, #c98524, #a8661a); color: #fff; box-shadow: 0 9px 20px rgba(168, 102, 26, .22); }
.lummi-dialog__btn.is-danger:focus-visible { outline-color: rgba(192, 69, 63, .3); }

/* ---------------- Baloes (tooltips) ---------------- */

.lummi-tooltip {
  position: fixed;
  inset: auto;
  top: 0;
  left: 0;
  z-index: 2147483001;
  max-width: min(280px, calc(100vw - 12px));
  margin: 0;
  padding: 7px 10px;
  overflow: visible;
  border: 0;
  border-radius: 8px;
  background: #17231f;
  box-shadow: 0 10px 26px rgba(10, 22, 18, .24);
  color: #f4f8f6;
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px) scale(.96);
  transition: opacity .14s ease, transform .18s var(--lummi-notify-ease);
}
.lummi-tooltip.is-bottom { transform: translateY(-4px) scale(.96); }
.lummi-tooltip.is-left { transform: translateX(4px) scale(.96); }
.lummi-tooltip.is-right { transform: translateX(-4px) scale(.96); }
.lummi-tooltip.is-visible { opacity: 1; transform: none; }

.lummi-tooltip::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background: inherit;
  transform: rotate(45deg);
}
.lummi-tooltip.is-top::after { bottom: -4px; left: calc(var(--lummi-tip-arrow, 50%) - 4px); }
.lummi-tooltip.is-bottom::after { top: -4px; left: calc(var(--lummi-tip-arrow, 50%) - 4px); }
.lummi-tooltip.is-left::after { right: -4px; top: calc(50% - 4px); }
.lummi-tooltip.is-right::after { left: -4px; top: calc(50% - 4px); }

/* ---------------- Alertas inline ---------------- */

[data-lummi-alert] { position: relative; }
[data-lummi-alert]:not([data-lummi-alert-static]) { padding-right: 40px !important; }
.lummi-inline-alert-enter { animation: lummi-notify-slide-in .38s var(--lummi-notify-ease) both; }
.lummi-inline-alert-leave { animation: lummi-notify-slide-out .22s ease forwards; }
.lummi-inline-alert-close {
  position: absolute;
  top: 50%;
  right: 8px;
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: inherit;
  opacity: .6;
  cursor: pointer;
  transform: translateY(-50%);
}
.lummi-inline-alert-close:hover { background: rgba(0, 0, 0, .06); opacity: 1; }
.lummi-inline-alert-close svg { width: 15px; height: 15px; }

/* Com JavaScript ativo o flash inline vira toast; sem JS ele continua visivel. */
.lummi-js [data-lummi-flash] { display: none !important; }

/* ---------------- Animacoes ---------------- */

@keyframes lummi-notify-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes lummi-notify-spin { to { transform: rotate(360deg); } }
@keyframes lummi-notify-pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@keyframes lummi-notify-slide-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes lummi-notify-slide-out { to { opacity: 0; transform: translateY(-6px); } }

@media (max-width: 640px) {
  .lummi-toast-region { inset: auto 10px 10px 10px; width: auto; flex-direction: column; }
  .lummi-toast { transform: translate3d(var(--lummi-toast-drag), 16px, 0) scale(.97); }
  .lummi-toast.is-leaving { transform: translate3d(var(--lummi-toast-drag), 16px, 0) scale(.96); margin-top: 0; margin-bottom: -10px; }
  .lummi-dialog__card { padding: 24px 20px 18px; }
  .lummi-dialog__actions { flex-direction: column-reverse; }
  .lummi-dialog__btn { max-width: none; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .lummi-toast, .lummi-dialog__card, .lummi-tooltip, .lummi-dialog::backdrop { transition: none !important; }
  .lummi-toast__icon svg, .lummi-dialog__icon svg, .lummi-inline-alert-enter { animation: none !important; }
}

@media print {
  .lummi-toast-region, .lummi-tooltip, .lummi-dialog { display: none !important; }
}