/* ===== Espaço Criativo • Tema Toastr ===== */
:root {
    /* Cores/base do site */
    --ec-brand: #3a2e85;
    --ec-brand-2: #8c7ae6; /* roxo claro p/ gradiente */
    --ec-bg: #ffffff;
    --ec-fg: #2b2b2b;
    --ec-muted: #6b7280;

    --ec-success: #22c55e;
    --ec-error: #ef4444;
    --ec-warning: #f59e0b;
    --ec-info: #4f46e5; /* roxo azulado p/ info */

    --ec-border: #e9defc;
    --ec-shadow: 0 14px 34px rgba(58, 46, 133, .12);
    --ec-radius: 16px;

    /* Posição (ajuste se quiser afastar mais do header) */
    --ec-offset-x: 16px;
    --ec-offset-y: 16px;
}

/* Dark mode automático */
@media (prefers-color-scheme: dark) {
    :root {
        --ec-bg: #141722;
        --ec-fg: #e5e7eb;
        --ec-muted: #9ca3af;
        --ec-border: rgba(255, 255, 255, .08);
        --ec-shadow: 0 18px 40px rgba(0, 0, 0, .5);
    }
}

/* Container no topo da pilha */
#toast-container {
    position: fixed;
    z-index: 2147483647;
    pointer-events: none;
}

/* Posição: canto superior esquerdo */
.toast-top-left {
    top: var(--ec-offset-y);
    left: var(--ec-offset-x);
}

.toast-top-right,
.toast-bottom-right,
.toast-bottom-left,
.toast-top-center,
.toast-bottom-center,
.toast-top-full-width,
.toast-bottom-full-width {
    inset: auto;
}

/* Cartão base */
#toast-container > div {
    pointer-events: auto;
    position: relative;
    overflow: hidden;

    width: min(380px, calc(100vw - 32px));
    margin: 0 0 10px;
    padding: 14px 16px 14px 56px;

    border-radius: var(--ec-radius);
    background: var(--ec-bg) !important;
    color: var(--ec-fg) !important;
    border: 1px solid var(--ec-border);
    box-shadow: var(--ec-shadow);

    /* remove sprites antigos */
    background-image: none !important;
    opacity: 1 !important;

    /* micro-anim */
    transform: translateX(-6px) scale(.985);
    animation: ec-toast-in .22s ease-out forwards;
}

#toast-container > div:hover {
    transform: translateX(0) scale(1);
}

/* Ícone circular à esquerda (muda por tipo) */
#toast-container > div::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
}

/* Título/mensagem */
#toast-container .toast-title {
    margin: 0 0 2px;
    font-weight: 700;
    letter-spacing: .2px;
}

#toast-container .toast-message {
    margin: 0;
    color: var(--ec-muted);
    line-height: 1.45;
    white-space: pre-line;
}

/* Botão fechar */
#toast-container .toast-close-button {
    position: absolute;
    top: 6px;
    right: 6px;
    float: none;
    font-size: 16px;
    line-height: 1;
    color: var(--ec-muted) !important;
    text-shadow: none;
    opacity: .9;
    background: transparent;
    border: 0;
    transition: transform .12s ease, opacity .12s ease, color .12s ease;
}

#toast-container .toast-close-button:hover {
    opacity: 1;
    color: var(--ec-fg) !important;
    transform: scale(1.05);
}

/* Tipos — borda lateral + ícone com gradiente/pílula */
#toast-container .toast-success {
    border-left: 4px solid var(--ec-success);
    box-shadow: var(--ec-shadow), 0 0 0 1px rgba(34, 197, 94, .06) inset;
}

#toast-container .toast-success::before {
    content: "✓";
    background: var(--ec-success);
}

#toast-container .toast-error {
    border-left: 4px solid var(--ec-error);
    box-shadow: var(--ec-shadow), 0 0 0 1px rgba(239, 68, 68, .06) inset;
}

#toast-container .toast-error::before {
    content: "✕";
    background: var(--ec-error);
}

#toast-container .toast-warning {
    border-left: 4px solid var(--ec-warning);
    box-shadow: var(--ec-shadow), 0 0 0 1px rgba(245, 158, 11, .08) inset;
}

#toast-container .toast-warning::before {
    content: "!";
    background: var(--ec-warning);
}

#toast-container .toast-info {
    border-left: 4px solid var(--ec-brand);
    /* “bolinha” com gradiente do teu roxo */
    box-shadow: var(--ec-shadow), 0 0 0 1px rgba(58, 46, 133, .06) inset;
}

#toast-container .toast-info::before {
    content: "i";
    background: linear-gradient(135deg, var(--ec-brand), var(--ec-brand-2));
}

/* Barra de progresso slim */
#toast-container .toast-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    opacity: .95;
    background: var(--ec-brand);
}

#toast-container .toast-success .toast-progress {
    background: var(--ec-success);
}

#toast-container .toast-error .toast-progress {
    background: var(--ec-error);
}

#toast-container .toast-warning .toast-progress {
    background: var(--ec-warning);
}

/* Responsivo */
@media (max-width: 480px) {
    #toast-container > div {
        width: calc(100vw - 20px);
        padding: 12px 12px 12px 52px;
    }

    #toast-container .toast-title {
        font-size: .95rem;
    }

    #toast-container .toast-message {
        font-size: .9rem;
    }
}

/* Animação */
@keyframes ec-toast-in {
    from {
        opacity: 0;
        transform: translateX(-10px) scale(.985);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* Limpa heranças do CSS original que conflitam */
.toast {
    background-color: var(--ec-bg) !important;
}

#toast-container > .toast-info,
#toast-container > .toast-success,
#toast-container > .toast-warning,
#toast-container > .toast-error {
    background-image: none !important;
}