/* dist/css/midia.css — aba Mídia: biblioteca da unidade (v2.12.0) e da rede (v2.13.0) para a extensão do WhatsApp. */
#tab-midia .md-cabecalho { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: .75rem 1.5rem; margin-bottom: .75rem; }
#tab-midia .md-titulo { font-size: calc(1.35rem * var(--aia-text-scale, 1)); font-weight: 700; margin: 0; letter-spacing: -.01em; }
#tab-midia .md-subtitulo { color: var(--tblr-secondary); font-size: calc(.85rem * var(--aia-text-scale, 1)); margin-top: .15rem; max-width: 52rem; }
#tab-midia .md-uso { min-width: 14rem; }
#tab-midia .md-uso-txt { font-size: calc(.78rem * var(--aia-text-scale, 1)); color: var(--tblr-secondary); text-align: right; margin-bottom: .25rem; }
#tab-midia .md-uso-barra { height: .4rem; border-radius: 1rem; background: var(--tblr-border-color); overflow: hidden; }
#tab-midia .md-uso-fill { height: 100%; background: var(--tblr-primary); border-radius: 1rem; }
#tab-midia .md-uso-fill.cheio { background: var(--tblr-danger); }
#tab-midia .md-abas { margin-bottom: 1rem; }

/* fonte: da unidade ou da rede */
#tab-midia .md-fontes { display: inline-flex; gap: .2rem; padding: .2rem; margin-bottom: .85rem; border-radius: .6rem; background: var(--tblr-bg-surface-secondary); border: 1px solid var(--tblr-border-color); }
#tab-midia .md-fonte { border: 0; background: transparent; color: var(--tblr-secondary); font-size: calc(.82rem * var(--aia-text-scale, 1)); font-weight: 600; padding: .3rem .85rem; border-radius: .45rem; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; }
#tab-midia .md-fonte:hover { color: var(--tblr-body-color); }
#tab-midia .md-fonte.ativa { background: var(--tblr-bg-surface); color: var(--tblr-body-color); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
#tab-midia .md-novas { font-size: calc(.68rem * var(--aia-text-scale, 1)); font-weight: 700; color: #fff; background: var(--tblr-azure); padding: .05rem .4rem; border-radius: 1rem; }
#tab-midia .md-novo { font-size: calc(.62rem * var(--aia-text-scale, 1)); vertical-align: middle; margin-left: .2rem; }
#tab-midia .md-marca { margin: .25rem 0 0; font-size: calc(.8rem * var(--aia-text-scale, 1)); min-height: 0; }
#tab-midia .md-marca .form-check-input { cursor: pointer; }
#tab-midia .md-item.marcado { border-color: var(--tblr-green); box-shadow: inset 0 0 0 1px var(--tblr-green-lt); }
#tab-midia .md-n { font-size: calc(.72rem * var(--aia-text-scale, 1)); color: var(--tblr-secondary); margin-left: .2rem; }
#tab-midia .md-aviso { padding: .5rem .75rem; font-size: calc(.85rem * var(--aia-text-scale, 1)); margin-bottom: .75rem; }
#tab-midia .md-vazio { color: var(--tblr-secondary); font-size: calc(.9rem * var(--aia-text-scale, 1)); padding: 1.25rem 0; }
#tab-midia .md-rodape { color: var(--tblr-secondary); font-size: calc(.75rem * var(--aia-text-scale, 1)); margin-top: 1.25rem; max-width: 60rem; }

/* subir: arrastar ou escolher */
#tab-midia .md-soltar { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; margin-bottom: 1rem; cursor: pointer;
  border: 1.5px dashed var(--tblr-border-color); border-radius: .75rem; background: var(--tblr-bg-surface); transition: border-color .15s, background .15s; }
#tab-midia .md-soltar:hover, #tab-midia .md-soltar.sobre { border-color: var(--tblr-primary); background: var(--tblr-primary-lt); }
#tab-midia .md-soltar-ico { font-size: calc(1.3rem * var(--aia-text-scale, 1)); color: var(--tblr-primary); }
#tab-midia .md-soltar-sub { display: block; font-size: calc(.78rem * var(--aia-text-scale, 1)); color: var(--tblr-secondary); margin-top: .1rem; }
#tab-midia .md-enviando { display: grid; gap: .3rem; margin-bottom: 1rem; }
#tab-midia .md-env { display: flex; justify-content: space-between; gap: 1rem; font-size: calc(.8rem * var(--aia-text-scale, 1)); padding: .35rem .6rem; border-radius: .5rem; background: var(--tblr-bg-surface-secondary); }
#tab-midia .md-env.ok { color: var(--tblr-success); }
#tab-midia .md-env.erro { color: var(--tblr-danger); }

/* texto da equipe */
#tab-midia .md-form-texto { display: grid; gap: .5rem; padding: .9rem; margin-bottom: 1rem; border: 1px solid var(--tblr-border-color); border-radius: .75rem; background: var(--tblr-bg-surface); }
#tab-midia .md-linha2 { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }

/* grade de itens */
#tab-midia .md-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .9rem; }
#tab-midia .md-grade.textos { grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); }
#tab-midia .md-item { display: flex; flex-direction: column; border: 1px solid var(--tblr-border-color); border-radius: .75rem; overflow: hidden; background: var(--tblr-bg-surface); }
#tab-midia .md-item.editando .md-info { gap: .45rem; }
#tab-midia .md-capa { position: relative; height: 9.5rem; display: grid; place-items: center; overflow: hidden; background: var(--tblr-bg-surface-secondary); font-size: calc(2rem * var(--aia-text-scale, 1)); }
/* A miniatura preenche a capa e fica dentro dela. Antes (até 2.13.0), foto ou vídeo em pé crescia além da capa e,
   como a capa é posicionada, era pintado por cima do resto do cartão: cobria o título e o "Mostrar na extensão". */
#tab-midia .md-capa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Em pé (vídeo de celular, story): o quadro inteiro, com faixas dos lados, em vez de um recorte do meio. */
#tab-midia .md-capa.em-pe img { object-fit: contain; }
#tab-midia .md-capa.audio { height: 5rem; grid-auto-flow: column; gap: .6rem; font-size: calc(1.6rem * var(--aia-text-scale, 1)); }
#tab-midia .md-capa.audio b { font-size: calc(.9rem * var(--aia-text-scale, 1)); font-weight: 600; color: var(--tblr-secondary); }
#tab-midia .md-play { position: absolute; left: .5rem; bottom: .5rem; font-size: calc(.72rem * var(--aia-text-scale, 1)); font-weight: 600; color: #fff; background: rgba(0, 0, 0, .6); padding: .1rem .45rem; border-radius: 1rem; }
#tab-midia .md-info { display: flex; flex-direction: column; gap: .25rem; padding: .7rem .8rem .55rem; flex: 1; }
#tab-midia .md-nome { font-weight: 600; font-size: calc(.9rem * var(--aia-text-scale, 1)); overflow-wrap: anywhere; }
#tab-midia .md-quando { font-size: calc(.78rem * var(--aia-text-scale, 1)); color: var(--tblr-secondary); }
#tab-midia .md-texto { font-size: calc(.82rem * var(--aia-text-scale, 1)); white-space: pre-wrap; max-height: 7.5rem; overflow: auto; padding: .4rem .5rem; border-radius: .4rem; background: var(--tblr-bg-surface-secondary); }
#tab-midia .md-meta { font-size: calc(.72rem * var(--aia-text-scale, 1)); color: var(--tblr-secondary); margin-top: auto; }
#tab-midia .md-acoes { display: flex; gap: .25rem; flex-wrap: wrap; margin-top: .2rem; }
#tab-midia .md-ia { margin-top: 1.25rem; }
#tab-midia .md-ia > summary { cursor: pointer; font-size: calc(.85rem * var(--aia-text-scale, 1)); font-weight: 600; margin-bottom: .75rem; }
#tab-midia .md-ia-nota { font-weight: 400; color: var(--tblr-secondary); font-size: calc(.78rem * var(--aia-text-scale, 1)); margin-left: .35rem; }
body.role-leitor #tab-midia .md-soltar, body.role-leitor #tab-midia .md-form-texto { display: none; }

/* A IA pode enviar (v2.28.0): vídeo da unidade que a IA manda no WhatsApp */
#tab-midia .md-item.na-ia { border-color: var(--tblr-purple); box-shadow: inset 0 0 0 1px var(--tblr-purple-lt); }
#tab-midia .md-ia-resumo { display: grid; gap: .15rem; font-size: calc(.78rem * var(--aia-text-scale, 1)); color: var(--tblr-secondary); }
#tab-midia .md-ia-resumo b { color: var(--tblr-body-color); font-weight: 600; }
#tab-midia .md-ia-link a { overflow-wrap: anywhere; }
#tab-midia .md-ia-form { display: grid; gap: .4rem; padding: .55rem; margin-top: .2rem; border-radius: .5rem; background: var(--tblr-bg-surface-secondary); }
#tab-midia .md-ia-rotulo { display: grid; gap: .15rem; font-size: calc(.75rem * var(--aia-text-scale, 1)); font-weight: 600; color: var(--tblr-secondary); }
#tab-midia .md-ia-previa { font-size: calc(.72rem * var(--aia-text-scale, 1)); }
#tab-midia .md-ia-previa code { display: block; white-space: pre-wrap; overflow-wrap: anywhere; margin-top: .15rem; padding: .35rem .45rem; border-radius: .35rem; background: var(--tblr-bg-surface); color: var(--tblr-body-color); }
#tab-midia .md-rodape-ia { margin-top: .4rem; }

/* ver / ouvir */
.md-previa { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; background: rgba(15, 23, 42, .6); padding: 1.5rem; }
.md-previa-caixa { background: var(--tblr-bg-surface); border-radius: .75rem; max-width: min(56rem, 100%); max-height: 100%; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 1rem 3rem rgba(0, 0, 0, .3); }
.md-previa-cab { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem 1rem; border-bottom: 1px solid var(--tblr-border-color); }
.md-previa-corpo { padding: 1rem; display: grid; place-items: center; min-width: 18rem; min-height: 6rem; overflow: auto; }
.md-previa-corpo img, .md-previa-corpo video { max-width: 100%; max-height: 72vh; border-radius: .4rem; }
.md-previa-corpo audio { width: min(28rem, 80vw); }
@media (max-width: 640px) { #tab-midia .md-linha2 { grid-template-columns: 1fr; } }