/* =========================================================
   AVISOS GLOBAIS / TOASTS
   ========================================================= */
#system-toast-stack{
    position:fixed;
    z-index:2147483000;
    top:max(14px,env(safe-area-inset-top));
    left:50%;
    width:min(calc(100% - 24px),460px);
    transform:translateX(-50%);
    display:grid;
    gap:9px;
    pointer-events:none;
}

.system-toast{
    --toast-accent:#2563eb;
    display:grid;
    grid-template-columns:38px minmax(0,1fr) 28px;
    align-items:center;
    gap:10px;
    width:100%;
    padding:11px 10px 11px 11px;
    border:1px solid color-mix(in srgb,var(--toast-accent) 28%,#e2e8f0);
    border-left:4px solid var(--toast-accent);
    border-radius:16px;
    background:rgba(255,255,255,.98);
    color:#0f172a;
    box-shadow:0 18px 48px rgba(15,23,42,.24);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    pointer-events:auto;
    overflow:hidden;
    animation:systemToastIn .22s ease-out both;
}

.system-toast.success{--toast-accent:#16a34a}
.system-toast.error{--toast-accent:#dc2626}
.system-toast.warning{--toast-accent:#d97706}
.system-toast.info{--toast-accent:#2563eb}

.system-toast-icon{
    width:36px;
    height:36px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    background:color-mix(in srgb,var(--toast-accent) 12%,#fff);
    color:var(--toast-accent);
    font-size:18px;
    font-weight:900;
}

.system-toast-content{
    min-width:0;
}

.system-toast-title{
    display:block;
    margin:0 0 2px;
    font-size:13px;
    font-weight:900;
    line-height:1.2;
}

.system-toast-message{
    display:block;
    font-size:12px;
    line-height:1.35;
    color:#475569;
    overflow-wrap:anywhere;
}

.system-toast-close{
    width:28px;
    height:28px;
    border:0;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f1f5f9;
    color:#64748b;
    cursor:pointer;
    font-size:17px;
    line-height:1;
    padding:0;
}

.system-toast-progress{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:3px;
    transform-origin:left center;
    background:var(--toast-accent);
    opacity:.72;
    animation:systemToastProgress var(--toast-duration,4200ms) linear forwards;
}

.system-toast.leaving{
    animation:systemToastOut .18s ease-in both;
}

@keyframes systemToastIn{
    from{opacity:0;transform:translateY(-14px) scale(.98)}
    to{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes systemToastOut{
    from{opacity:1;transform:translateY(0) scale(1)}
    to{opacity:0;transform:translateY(-8px) scale(.98)}
}

@keyframes systemToastProgress{
    from{transform:scaleX(1)}
    to{transform:scaleX(0)}
}

@media(max-width:480px){
    #system-toast-stack{
        top:max(10px,env(safe-area-inset-top));
        width:calc(100% - 16px);
    }

    .system-toast{
        grid-template-columns:34px minmax(0,1fr) 26px;
        gap:8px;
        border-radius:14px;
        padding:9px;
    }

    .system-toast-icon{
        width:32px;
        height:32px;
        border-radius:10px;
    }
}

/* Campo inválido destacado sem depender do balão nativo do navegador */
.system-field-invalid{
    border-color:#ef4444!important;
    box-shadow:0 0 0 3px rgba(239,68,68,.12)!important;
}

.system-field-valid-pulse{
    animation:systemFieldPulse .45s ease;
}

@keyframes systemFieldPulse{
    0%,100%{box-shadow:inherit}
    50%{box-shadow:0 0 0 4px rgba(34,197,94,.12)}
}

/* =========================================================
   UPLOAD MODERNO
   ========================================================= */
.system-file-upload{
    display:block;
    position:relative;
    width:100%;
}

.system-file-upload input[type="file"]{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    opacity:0!important;
    pointer-events:none!important;
    overflow:hidden!important;
}

.system-file-drop{
    position:relative;
    display:grid;
    grid-template-columns:52px minmax(0,1fr) auto;
    align-items:center;
    gap:12px;
    width:100%;
    min-height:76px;
    padding:12px 14px;
    border:1.5px dashed #cbd5e1;
    border-radius:16px;
    background:linear-gradient(180deg,#fff,#f8fafc);
    cursor:pointer;
    transition:border-color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease;
    user-select:none;
}

.system-file-drop:hover,
.system-file-drop.dragging{
    border-color:var(--primary,#2563eb);
    background:color-mix(in srgb,var(--primary,#2563eb) 6%,#fff);
    box-shadow:0 0 0 4px color-mix(in srgb,var(--primary,#2563eb) 10%,transparent);
}

.system-file-drop:active{
    transform:scale(.995);
}

.system-file-icon{
    width:50px;
    height:50px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:color-mix(in srgb,var(--primary,#2563eb) 10%,#fff);
    color:#0f172a;
    font-size:24px;
    border:1px solid color-mix(in srgb,var(--primary,#2563eb) 18%,#e2e8f0);
}

.system-file-copy{
    min-width:0;
}

.system-file-title{
    display:block;
    margin-bottom:3px;
    color:#0f172a;
    font-size:13px;
    font-weight:900;
}

.system-file-hint{
    display:block;
    color:#64748b;
    font-size:11px;
    line-height:1.35;
}

.system-file-button{
    min-height:34px;
    padding:8px 11px;
    border:1px solid #dbe3ee;
    border-radius:11px;
    background:#fff;
    color:#111827;
    font-size:11px;
    font-weight:900;
    white-space:nowrap;
}

.system-file-preview{
    display:none;
    margin-top:9px;
    padding:10px;
    border:1px solid #e2e8f0;
    border-radius:16px;
    background:#fff;
}

.system-file-preview.show{
    display:block;
}

.system-file-preview-inner{
    display:grid;
    grid-template-columns:92px minmax(0,1fr) auto;
    align-items:center;
    gap:12px;
}

.system-file-preview-image{
    width:92px;
    height:92px;
    object-fit:cover;
    border-radius:13px;
    border:1px solid #e2e8f0;
    background:#f8fafc;
}

.system-file-preview-generic{
    width:92px;
    height:72px;
    border-radius:13px;
    border:1px solid #e2e8f0;
    background:#f8fafc;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
}

.system-file-preview-name{
    display:block;
    color:#0f172a;
    font-size:12px;
    font-weight:900;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.system-file-preview-meta{
    display:block;
    margin-top:4px;
    color:#64748b;
    font-size:11px;
}

.system-file-remove{
    border:0;
    border-radius:11px;
    background:#fef2f2;
    color:#b91c1c;
    padding:8px 10px;
    font-size:11px;
    font-weight:900;
    cursor:pointer;
}

@media(max-width:520px){
    .system-file-drop{
        grid-template-columns:46px minmax(0,1fr);
        padding:11px;
    }

    .system-file-icon{
        width:44px;
        height:44px;
    }

    .system-file-button{
        grid-column:1/-1;
        width:100%;
    }

    .system-file-preview-inner{
        grid-template-columns:76px minmax(0,1fr);
    }

    .system-file-preview-image,
    .system-file-preview-generic{
        width:76px;
        height:76px;
    }

    .system-file-remove{
        grid-column:1/-1;
        width:100%;
    }
}


/* =========================================================
   REFINO VISUAL DO UPLOAD
   Evita textos/botão encavalados em celulares e campos estreitos.
   ========================================================= */
.system-file-drop{
    grid-template-columns:52px minmax(0,1fr);
    grid-template-areas:
        "icon copy"
        "button button";
    align-items:center;
    gap:10px 12px;
    padding:13px 14px;
}

.system-file-icon{
    grid-area:icon;
}

.system-file-copy{
    grid-area:copy;
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
    padding:1px 0;
}

.system-file-title{
    margin:0 0 5px;
    line-height:1.25;
}

.system-file-hint{
    line-height:1.45;
    white-space:normal;
    overflow-wrap:anywhere;
}

.system-file-button{
    grid-area:button;
    justify-self:start;
    width:auto;
    min-width:138px;
    margin-top:1px;
    padding:9px 14px;
}

@media(min-width:700px){
    .system-file-drop{
        grid-template-columns:52px minmax(0,1fr) auto;
        grid-template-areas:"icon copy button";
        gap:12px 14px;
    }

    .system-file-button{
        justify-self:end;
        margin-top:0;
    }
}

@media(max-width:420px){
    .system-file-drop{
        grid-template-columns:46px minmax(0,1fr);
        grid-template-areas:
            "icon copy"
            "button button";
        padding:11px 12px;
        gap:9px 10px;
    }

    .system-file-title{
        font-size:13px;
        margin-bottom:4px;
    }

    .system-file-hint{
        font-size:11px;
        line-height:1.4;
    }

    .system-file-button{
        width:100%;
        min-width:0;
        justify-self:stretch;
        text-align:center;
    }
}


/* =========================================================
   UPLOAD DE IMAGEM — MESMO PADRÃO DO ANEXO DE ARQUIVO
   ========================================================= */
.system-file-drop{
    grid-template-columns:62px minmax(0,1fr) auto!important;
    grid-template-areas:"icon copy button"!important;
    align-items:center!important;
    gap:14px!important;
    min-height:96px!important;
    padding:16px 18px!important;
}

.system-file-icon{
    grid-area:icon!important;
    width:62px!important;
    height:62px!important;
    border-radius:16px!important;
    font-size:28px!important;
}

.system-file-copy{
    grid-area:copy!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    min-width:0!important;
    padding:0!important;
}

.system-file-title{
    display:block!important;
    margin:0 0 5px!important;
    font-size:14px!important;
    line-height:1.25!important;
    font-weight:900!important;
}

.system-file-hint{
    display:block!important;
    margin:0!important;
    font-size:12px!important;
    line-height:1.45!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    color:#64748b!important;
}

.system-file-button{
    grid-area:button!important;
    justify-self:end!important;
    align-self:center!important;
    width:auto!important;
    min-width:156px!important;
    min-height:42px!important;
    margin:0!important;
    padding:10px 16px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:12px!important;
    font-size:12px!important;
}

@media(max-width:640px){
    .system-file-drop{
        grid-template-columns:54px minmax(0,1fr)!important;
        grid-template-areas:
            "icon copy"
            "button button"!important;
        gap:11px 12px!important;
        min-height:0!important;
        padding:14px!important;
    }

    .system-file-icon{
        width:54px!important;
        height:54px!important;
        font-size:24px!important;
    }

    .system-file-button{
        width:100%!important;
        min-width:0!important;
        justify-self:stretch!important;
        margin-top:2px!important;
    }
}


/* =========================================================
   REFINO DEFINITIVO DOS CAMPOS DE UPLOAD
   Produto, logo, entregadores e demais imagens
   ========================================================= */

/* O título já existe dentro do componente novo. */
.field > .system-file-original-label{
    display:none!important;
}

/*
 * Em desktop, mesmo quando o upload está dentro de grid-2,
 * mantém exatamente o padrão do "Adicionar arquivo":
 * ícone | texto | botão.
 */
.field > .system-file-upload > .system-file-drop,
.grid-2 .field > .system-file-upload > .system-file-drop{
    display:grid!important;
    grid-template-columns:62px minmax(180px,1fr) 158px!important;
    grid-template-areas:"icon copy button"!important;
    align-items:center!important;
    column-gap:16px!important;
    row-gap:0!important;
    min-height:104px!important;
    padding:16px 18px!important;
}

.field > .system-file-upload .system-file-icon{
    grid-area:icon!important;
    align-self:center!important;
}

.field > .system-file-upload .system-file-copy{
    grid-area:copy!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:center!important;
    min-width:0!important;
    overflow:visible!important;
}

.field > .system-file-upload .system-file-title{
    position:static!important;
    display:block!important;
    width:100%!important;
    margin:0 0 5px!important;
    padding:0!important;
    font-size:14px!important;
    line-height:1.25!important;
    white-space:normal!important;
}

.field > .system-file-upload .system-file-hint{
    position:static!important;
    display:block!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    font-size:12px!important;
    line-height:1.4!important;
    white-space:normal!important;
    overflow:visible!important;
}

.field > .system-file-upload .system-file-button{
    grid-area:button!important;
    align-self:center!important;
    justify-self:end!important;
    width:158px!important;
    min-width:158px!important;
    margin:0!important;
}

/* A imagem/documento atual fica bem separado do novo campo. */
.field > .system-file-upload + img,
.field > .system-file-upload + a,
.field > .system-file-upload + .small{
    margin-top:10px!important;
}

/* Celular: texto ao lado do ícone e botão embaixo, sem sobreposição. */
@media(max-width:680px){
    .field > .system-file-upload > .system-file-drop,
    .grid-2 .field > .system-file-upload > .system-file-drop{
        grid-template-columns:54px minmax(0,1fr)!important;
        grid-template-areas:
            "icon copy"
            "button button"!important;
        column-gap:12px!important;
        row-gap:12px!important;
        min-height:0!important;
        padding:14px!important;
    }

    .field > .system-file-upload .system-file-button{
        width:100%!important;
        min-width:0!important;
        justify-self:stretch!important;
    }
}