/* ===== 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;
}