/* componentes/dialogos.css — Diálogos (dialog), lightbox, zona de soltar arquivos, lista de arquivos, barra de progresso e animação de sucesso. */
dialog { border: 0; border-radius: var(--raio-lg); padding: 0; background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-3); width: min(560px, calc(100vw - 32px)); }
dialog::backdrop { background: rgba(18,18,18,.5); backdrop-filter: blur(3px); }
dialog[open] { animation: abrir .28s var(--ease-out); }
@keyframes abrir { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.dlg-cab { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px 0; }
.dlg-cab h3 { font-size: 17px; }
.dlg-corpo { padding: 16px 22px 20px; display: grid; gap: 14px; }
.dlg-rodape { display: flex; justify-content: flex-end; gap: 8px; padding: 0 22px 22px; }
.fechar { border: 0; background: transparent; cursor: pointer; color: var(--cinza); padding: 6px; border-radius: 8px; display: grid; place-items: center; }
.fechar:hover { background: var(--fundo); color: var(--tinta); }
dialog.lightbox { width: min(980px, calc(100vw - 32px)); background: #121212; }
.lb-corpo { display: grid; place-items: center; min-height: 380px; padding: 16px; }
.lb-corpo img, .lb-corpo svg { max-width: 100%; max-height: 70vh; border-radius: 8px; }
.lb-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 16px 16px; color: #fff; font-size: 13px; }
.lb-barra .btn { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.2); }
.dropzone { border: 2px dashed var(--borda-forte); border-radius: var(--raio-md); padding: 24px; text-align: center; color: var(--cinza); transition: border-color .2s, background .2s, transform .2s var(--ease-out); cursor: pointer; display: grid; justify-items: center; gap: 4px; }
.dropzone .ico { width: 28px; height: 28px; color: var(--cinza-claro); transition: color .2s, transform .2s; }
.dropzone b { display: block; color: var(--tinta); }
.dropzone:hover { border-color: var(--tinta); }
.dropzone.sobre { border-color: var(--verde-escuro); background: var(--verde-claro); transform: scale(1.015); color: var(--tinta); }
.dropzone.sobre .ico { color: var(--verde-escuro); transform: translateY(-3px); }
.arquivos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.arquivos li { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; font-size: 13px; padding: 8px 10px; background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 10px; }
.arquivos li .mini { width: 40px; height: 30px; border-radius: 5px; object-fit: cover; background: var(--fundo); display: grid; place-items: center; color: var(--cinza); font-size: 10px; font-weight: 700; overflow: hidden; }
.arquivos li .mini img { width: 100%; height: 100%; object-fit: cover; }
.arquivos small { color: var(--cinza); display: block; }
.progresso { height: 8px; background: var(--fundo); border-radius: 4px; overflow: hidden; }
.progresso i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--verde-escuro), var(--verde)); border-radius: 4px; }
.progresso-rotulo { font-size: 12px; color: var(--cinza); display: flex; justify-content: space-between; }
.sucesso-anim { display: grid; place-items: center; padding: 20px 0 4px; }
.sucesso-anim svg { width: 84px; height: 84px; }
.sucesso-anim circle { fill: var(--verde-claro); stroke: var(--verde-escuro); stroke-width: 3; stroke-dasharray: 260; stroke-dashoffset: 260; animation: desenha-svg .6s var(--ease-out) forwards; }
.sucesso-anim path { stroke: var(--verde-escuro); stroke-width: 5; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: desenha-svg .45s .35s var(--ease-out) forwards; }