/* ============================================================
   SisSCP — Sistema Premium de Modais Customizados
   Substitui confirm(), alert() e prompt() nativos
   ============================================================ */

:root {
  --sm-bg:          rgba(87, 52, 37, 0.98);
  --sm-border:      rgba(210, 141, 14, 0.15);
  --sm-text:        #ffffff;
  --sm-muted:       #c4b8b2;
  --sm-radius:      12px;
  --sm-shadow:      0 8px 32px rgba(0,0,0,0.5);
  --sm-backdrop:    rgba(0, 0, 0, 0.6);
  --sm-ease-in:     cubic-bezier(0.34, 1.06, 0.64, 1);
  --sm-ease-out:    cubic-bezier(0.4, 0, 1, 1);
  --sm-success:     #68d391;
  --sm-success-bg:  rgba(104,211,145,0.10);
  --sm-error:       #fc8181;
  --sm-error-bg:    rgba(252,129,129,0.10);
  --sm-warning:     #f6e05e;
  --sm-warning-bg:  rgba(246,224,94,0.10);
  --sm-info:        #63b3ed;
  --sm-info-bg:     rgba(99,179,237,0.10);
  --sm-danger:      #fc8181;
  --sm-danger-bg:   rgba(252,129,129,0.10);
  --sm-accent:      #d28d0e;
  --sm-accent-bg:   rgba(210,141,14,0.10);
}

/* ── Overlay ── */
.sm-overlay {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  background: var(--sm-backdrop);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; transition: opacity 180ms ease;
  overflow-y: auto;
}
.sm-overlay.sm-visible { opacity: 1; }

/* ── Caixa ── */
.sm-box {
  position: relative; width: 100%; max-width: 440px;
  background: var(--sm-bg); border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius); box-shadow: var(--sm-shadow);
  overflow: hidden; outline: none;
  transform: scale(0.90) translateY(12px); opacity: 0;
  transition: transform 240ms var(--sm-ease-in), opacity 200ms ease;
}
.sm-box.sm-visible { transform: scale(1) translateY(0); opacity: 1; }

/* ── Barra de acento ── */
.sm-accent-bar { height: 3px; width: 100%; }
.sm-accent-bar.success { background: var(--sm-success); }
.sm-accent-bar.error,
.sm-accent-bar.danger   { background: var(--sm-error); }
.sm-accent-bar.warning  { background: var(--sm-warning); }
.sm-accent-bar.info     { background: var(--sm-info); }
.sm-accent-bar.question { background: var(--sm-accent); }

/* ── Corpo ── */
.sm-body { padding: 1.75rem 1.75rem 0; }

/* ── Ícone ── */
.sm-icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem; flex-shrink: 0;
}
.sm-icon svg { width: 24px; height: 24px; }
.sm-icon.success { background: var(--sm-success-bg); color: var(--sm-success); }
.sm-icon.error,
.sm-icon.danger  { background: var(--sm-error-bg);   color: var(--sm-error);   }
.sm-icon.warning { background: var(--sm-warning-bg); color: var(--sm-warning); }
.sm-icon.info    { background: var(--sm-info-bg);    color: var(--sm-info);    }
.sm-icon.question{ background: var(--sm-accent-bg);  color: var(--sm-accent);  }

/* ── Título e mensagem ── */
.sm-title {
  font-size: 1.05rem; font-weight: 700; color: var(--sm-text);
  margin: 0 0 .5rem; line-height: 1.3;
  font-family: 'Outfit', -apple-system, sans-serif;
}
.sm-message {
  font-size: 0.875rem; color: var(--sm-muted); margin: 0;
  line-height: 1.65; white-space: pre-wrap;
  font-family: 'Outfit', -apple-system, sans-serif;
}

/* ── Input (prompt) ── */
.sm-input-wrap { margin-top: 1.25rem; }
.sm-input {
  width: 100%; padding: .75rem 1rem; box-sizing: border-box;
  background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px; color: var(--sm-text); font-size: .9rem;
  font-family: 'Outfit', -apple-system, sans-serif;
  outline: none; transition: border-color .2s, box-shadow .2s;
}
.sm-input:focus {
  border-color: var(--sm-accent);
  box-shadow: 0 0 0 3px rgba(210, 141, 14, 0.15);
}

/* ── Rodapé ── */
.sm-footer {
  display: flex; gap: .625rem; justify-content: flex-end;
  padding: 1.5rem 1.75rem; flex-wrap: wrap;
}

/* ── Botões ── */
.sm-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .6rem 1.25rem; border-radius: 8px; border: 1px solid transparent;
  font-size: .875rem; font-weight: 600; cursor: pointer;
  font-family: 'Outfit', -apple-system, sans-serif;
  transition: all .15s ease; letter-spacing: .01em; min-width: 80px;
  justify-content: center; white-space: nowrap; touch-action: manipulation;
  position: relative; overflow: hidden; outline: none;
}
.sm-btn:focus-visible { box-shadow: 0 0 0 3px rgba(255,255,255,0.2); }
.sm-btn:active        { transform: scale(0.97); }

.sm-btn-cancel { background: rgba(255,255,255,0.05); color: var(--sm-muted); border-color: rgba(255,255,255,0.10); }
.sm-btn-cancel:hover   { background: rgba(255,255,255,0.09); color: var(--sm-text); border-color: rgba(255,255,255,0.16); }

.sm-btn-success        { background: var(--sm-success); color: #0d2012; border-color: var(--sm-success); }
.sm-btn-success:hover  { filter: brightness(1.08); }

.sm-btn-danger,
.sm-btn-error          { background: var(--sm-error); color: #2d0000; border-color: var(--sm-error); }
.sm-btn-danger:hover   { filter: brightness(1.1); }

.sm-btn-warning        { background: var(--sm-warning); color: #2d2600; border-color: var(--sm-warning); }
.sm-btn-warning:hover  { filter: brightness(1.1); }

.sm-btn-info           { background: var(--sm-info); color: #002b4d; border-color: var(--sm-info); }
.sm-btn-info:hover     { filter: brightness(1.1); }

.sm-btn-question       { background: var(--sm-accent); color: #120c0a; border-color: var(--sm-accent); }
.sm-btn-question:hover { filter: brightness(1.08); }

/* Spinner */
.sm-spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.2); border-top-color: currentColor;
  animation: sm-spin .65s linear infinite; display: none; flex-shrink: 0;
}
.sm-btn.sm-loading .sm-spinner { display: block; }
.sm-btn.sm-loading .sm-btn-label { opacity: .7; }
@keyframes sm-spin { to { transform: rotate(360deg); } }

/* ── Toast Container ── */
#sm-toast-container {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 99998;
  display: flex; flex-direction: column-reverse; gap: .625rem;
  pointer-events: none;
  width: clamp(280px, calc(100vw - 2rem), 360px);
}

.sm-toast {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .875rem 1rem; pointer-events: all; cursor: pointer;
  background: rgba(87, 52, 37, 0.98); border: 1px solid rgba(210, 141, 14, 0.15);
  border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transform: translateX(120%); opacity: 0; overflow: hidden; position: relative;
  transition: transform 300ms var(--sm-ease-in), opacity 250ms ease;
}
.sm-toast.sm-visible { transform: translateX(0); opacity: 1; }
.sm-toast.sm-hiding  {
  transform: translateX(120%); opacity: 0;
  transition: transform 240ms var(--sm-ease-out), opacity 200ms ease;
}

.sm-toast-ico { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.sm-toast-ico svg { width: 100%; height: 100%; }
.sm-toast-content { flex: 1; min-width: 0; }
.sm-toast-title { font-size: .83rem; font-weight: 700; color: #ffffff; margin: 0 0 2px; font-family: 'Outfit', -apple-system, sans-serif; }
.sm-toast-msg   { font-size: .78rem; color: #c4b8b2; margin: 0; line-height: 1.45; font-family: 'Outfit', -apple-system, sans-serif; word-break: break-word; }

.sm-toast-bar {
  position: absolute; bottom: 0; left: 0; height: 2px;
  animation: sm-bar-shrink linear forwards;
}
@keyframes sm-bar-shrink { from { width: 100%; } to { width: 0; } }

.sm-toast.success { border-left: 3px solid var(--sm-success); }
.sm-toast.success .sm-toast-ico, .sm-toast.success .sm-toast-bar { color: var(--sm-success); background: var(--sm-success); }
.sm-toast.error   { border-left: 3px solid var(--sm-error); }
.sm-toast.error   .sm-toast-ico, .sm-toast.error   .sm-toast-bar { color: var(--sm-error);   background: var(--sm-error);   }
.sm-toast.warning { border-left: 3px solid var(--sm-warning); }
.sm-toast.warning .sm-toast-ico, .sm-toast.warning .sm-toast-bar { color: var(--sm-warning); background: var(--sm-warning); }
.sm-toast.info    { border-left: 3px solid var(--sm-info); }
.sm-toast.info    .sm-toast-ico, .sm-toast.info    .sm-toast-bar { color: var(--sm-info);    background: var(--sm-info);    }
.sm-toast.danger  { border-left: 3px solid var(--sm-danger); }
.sm-toast.danger  .sm-toast-ico, .sm-toast.danger  .sm-toast-bar { color: var(--sm-danger);  background: var(--sm-danger);  }

/* ── Mobile ── */
@media (max-width: 520px) {
  .sm-overlay { align-items: flex-end; padding: 0; }
  .sm-box { max-width: 100%; border-radius: 16px 16px 0 0; }
  .sm-footer { flex-direction: column-reverse; }
  .sm-btn { width: 100%; justify-content: center; }
  #sm-toast-container { bottom: 1rem; right: .75rem; left: .75rem; width: auto; }
}