/* Os anexos das atividades, ao jeito dos anexos de um email: fichas pequenas e
   discretas numa so' linha, que cabem no corpo de uma denuncia ou de um email sem
   lhe roubar o espaco. Quem quer ver mais abre "Ver todos". As cores das familias
   (PDF vermelho, Word azul, Excel verde) sao as habituais, mas so' no icone. */

.i9-anexos { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.i9-anexos-linha { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }

/* Uma linha de fichas; o resto fica escondido ate' se abrir. */
.i9-anexos-cartoes {
    display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0;
    max-height: 40px; overflow: hidden;
}
.i9-anexos.aberto .i9-anexos-cartoes { max-height: none; }

.i9-anexos-erro { color: var(--i9-danger-text, #b3261e); font-size: 12px; }
.i9-anexos-vazio { color: var(--i9-muted, #8a94a0); font-size: 12px; line-height: 40px; }

.i9-anexo {
    position: relative; display: flex; align-items: center;
    width: 208px; height: 40px; border: 1px solid #e3e6ea; border-radius: 4px;
    background: #fff; overflow: hidden; transition: background-color .12s, border-color .12s;
}
.i9-anexo:hover { background: #f6f8fa; border-color: #d3d8de; }
.i9-anexo.novo { border-style: dashed; }

.i9-anexo-abrir {
    all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px;
    flex: 1; min-width: 0; height: 100%; padding: 0 4px 0 8px; cursor: pointer;
}
.i9-anexo-abrir:disabled { cursor: default; }
.i9-anexo-abrir:focus-visible { outline: 2px solid #0f6cbd; outline-offset: -2px; }

/* O icone tem forma de folha, com a extensao por baixo, como no Office. */
.i9-anexo-icone {
    flex: none; position: relative; display: inline-flex; align-items: flex-end; justify-content: center;
    width: 22px; height: 26px; border-radius: 2px 6px 2px 2px;
    background: #7a8694; color: #fff; padding-bottom: 3px;
    font: 700 7px/1 "Segoe UI", system-ui, sans-serif; letter-spacing: .2px;
}
.i9-anexo-icone::before {
    content: ""; position: absolute; top: 0; right: 0; width: 7px; height: 7px;
    background: linear-gradient(225deg, #fff 50%, rgba(255, 255, 255, .45) 50%); border-radius: 0 0 0 2px;
}
.i9-anexo-icone.grande { width: 56px; height: 68px; font-size: 13px; padding-bottom: 8px; }
.i9-anexo-icone.grande::before { width: 16px; height: 16px; }
.i9-anexo-icone.pdf { background: #d13438; }
.i9-anexo-icone.texto { background: #2b579a; }
.i9-anexo-icone.folha { background: #217346; }
.i9-anexo-icone.apresentacao { background: #c43e1c; }
.i9-anexo-icone.imagem { background: #8764b8; }
.i9-anexo-icone.media { background: #0078d4; }
.i9-anexo-icone.arquivo { background: #986f0b; }
.i9-anexo-icone.email { background: #0f6cbd; }
.i9-anexo-icone.dados { background: #5c6970; }
.i9-anexo-mais { background: #0f6cbd; font-size: 16px; font-weight: 400; align-items: center; padding: 0; border-radius: 3px; }
.i9-anexo-mais::before { display: none; }

.i9-anexo-miniatura { flex: none; width: 26px; height: 26px; border-radius: 3px; object-fit: cover; background: #eef1f5; }

.i9-anexo-texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.i9-anexo-nome { font-size: 12px; color: #242424; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.i9-anexo-detalhe { font-size: 11px; color: #707a85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.i9-anexo-por-gravar { color: #986f0b; }
.i9-anexo-tipo { margin-left: 4px; }
.i9-anexo-renomear { width: 100%; font-size: 12px; padding: 0 3px; border: 1px solid #9fb4cc; border-radius: 3px; }

/* O menu das acoes, como a seta dos anexos do Outlook. */
.i9-anexo-seta {
    all: unset; box-sizing: border-box; flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 100%; color: #707a85; cursor: pointer;
}
.i9-anexo-seta:hover { color: #242424; background: #eceff2; }
.i9-anexo-seta::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); }

.i9-anexos-menu-fundo { position: fixed; inset: 0; z-index: 1049; }
.i9-anexos-menu {
    position: absolute; z-index: 1050; top: 38px; right: 0; min-width: 160px; padding: 4px 0;
    background: #fff; border: 1px solid #e3e6ea; border-radius: 4px; box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}
.i9-anexos-menu button, .i9-anexos-menu a {
    all: unset; box-sizing: border-box; display: block; width: 100%; padding: 6px 12px;
    font-size: 12px; color: #242424; cursor: pointer;
}
.i9-anexos-menu button:hover, .i9-anexos-menu a:hover { background: #f3f5f7; }
.i9-anexos-menu .perigo { color: #b3261e; }
/* O menu sai do cartao: o cartao nao pode cortar por cima dele. */
.i9-anexo.com-menu { overflow: visible; z-index: 2; }

/* O "juntar": uma ficha pequena, sempre a primeira, que tambem e' zona de largar. */
.i9-anexo-juntar { width: auto; padding: 0 10px 0 8px; gap: 6px; border-style: dashed; border-color: #c8d1db; background: #fafbfc; cursor: pointer; color: #0f6cbd; font-size: 12px; }
.i9-anexo-juntar input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.i9-anexo-juntar:hover { background: #f0f6fc; border-color: #9fb4cc; }

.i9-anexos-ver-todos {
    all: unset; flex: none; height: 40px; padding: 0 6px; font-size: 12px; color: #0f6cbd; cursor: pointer; white-space: nowrap;
}
.i9-anexos-ver-todos:hover { text-decoration: underline; }

.i9-anexos-iframe { width: 100%; height: 100%; border: 0; background: #f3f4f6; }
.i9-anexos-visor .dxbl-modal-body { padding: 0; }
.i9-anexos-sem-visor { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; height: 100%; color: var(--i9-muted, #6b7785); }

/* O carrossel das imagens ocupa a janela toda, com fundo escuro para as fotografias. */
.i9-anexos-galeria { background: #1f2328; }