navegável via JS,
para permitir
reais de link nos comunicados sem aninhar
dentro de ). Mantém o cursor de link e sem sublinhado. */
.com-dash-texto-link {
display: block;
color: inherit;
text-decoration: none;
cursor: pointer;
}
.com-dash-texto-link:hover .comunicado-destaque-titulo {
color: var(--primary);
transition: color .15s;
}
/* Área de mídia abaixo do texto */
.com-dash-media {
margin-top: 8px;
}
/* Wrapper da mídia principal */
.com-dash-principal {
border-radius: 8px;
overflow: hidden;
background: #000;
}
/* Imagem principal: altura livre, proporção original */
.com-dash-principal-img {
display: block;
width: 100%;
height: auto;
max-height: 360px;
object-fit: contain;
background: #000;
}
/* ── Vídeo com controles overlay ──────────────────────────── */
.com-dash-video-wrap {
position: relative;
border-radius: 8px;
overflow: hidden;
background: #000;
}
.com-dash-video {
display: block;
width: 100%;
height: auto; /* preserva a proporção original do vídeo */
max-height: 400px;
}
/* Overlay clicável sobre o vídeo — toggle play/pause */
.com-dash-video-overlay {
position: absolute;
inset: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
/* Ícone de play mostrado quando o vídeo está pausado */
.com-dash-play-icon {
display: none; /* visível via JS quando pausado */
width: 56px;
height: 56px;
background: rgba(0, 0, 0, .55);
border-radius: 50%;
align-items: center;
justify-content: center;
color: #fff;
font-size: 20px;
pointer-events: none;
padding-left: 4px; /* ajuste visual do triângulo */
}
/* Botão de mute/unmute — canto inferior direito, sempre visível */
.com-dash-mute-btn {
position: absolute;
bottom: 10px;
right: 10px;
background: rgba(0, 0, 0, .55);
color: #fff;
border: none;
border-radius: 50%;
width: 36px;
height: 36px;
min-height: 36px;
min-width: 36px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
transition: background .15s;
}
.com-dash-mute-btn:hover { background: rgba(0, 0, 0, .82); }
/* ── Galeria de thumbnails (quando há 2+ mídias) ──────────── */
.com-dash-galeria {
display: flex;
gap: 6px;
margin-top: 6px;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: 2px; /* espaço para scrollbar mobile */
-webkit-overflow-scrolling: touch;
}
/* oculta scrollbar no webkit mas mantém funcionalidade */
.com-dash-galeria::-webkit-scrollbar { height: 3px; }
.com-dash-galeria::-webkit-scrollbar-thumb { background: var(--cor-borda-padrao); border-radius: 4px; }
.com-dash-galeria-item {
flex-shrink: 0;
width: 72px;
height: 72px;
border-radius: 6px;
overflow: hidden;
cursor: pointer;
border: 2px solid transparent;
position: relative;
scroll-snap-align: start;
transition: border-color .15s, opacity .15s;
}
.com-dash-galeria-item:hover { opacity: .82; }
.com-dash-galeria-item.ativo {
border-color: var(--primary);
opacity: 1;
}
.com-dash-galeria-item img,
.com-dash-galeria-item video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
pointer-events: none;
}
/* Ícone de play sobre thumbnails de vídeo na galeria */
.com-dash-galeria-play-icon {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, .28);
color: #fff;
font-size: 20px;
pointer-events: none;
}
/* ── Lightbox de comunicados no dashboard ─────────────────── */
#com-dash-lightbox {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,.92);
z-index: 9999;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 16px;
}
#com-dash-lightbox.open { display: flex; }
#com-dash-lb-media {
display: flex;
align-items: center;
justify-content: center;
max-width: 92vw;
max-height: 62vh;
}
#com-dash-lb-media img {
max-width: 92vw;
max-height: 62vh;
border-radius: 8px;
object-fit: contain;
}
#com-dash-lb-media video {
max-width: 92vw;
max-height: 62vh;
border-radius: 8px;
background: #000;
}
.com-dash-lb-close {
position: absolute;
top: 16px;
right: 20px;
background: none;
border: none;
color: #fff;
font-size: 28px;
cursor: pointer;
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
.com-dash-lb-nav {
display: flex;
gap: 12px;
margin-top: 16px;
flex-wrap: wrap;
justify-content: center;
}
.com-dash-lb-nav button {
background: rgba(255,255,255,.18);
border: none;
color: #fff;
padding: 12px 26px;
border-radius: 10px;
cursor: pointer;
font-size: 16px;
font-weight: 600;
min-height: 48px;
min-width: 100px;
touch-action: manipulation;
}
.com-dash-lb-nav button:hover { background: rgba(255,255,255,.32); }
.com-dash-lb-nav button:disabled { opacity: .32; cursor: default; }
.com-dash-lb-filmstrip {
display: flex;
gap: 8px;
overflow-x: auto;
max-width: 92vw;
padding: 12px 8px 4px;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,.25) transparent;
}
.com-dash-lb-filmstrip::-webkit-scrollbar { height: 4px; }
.com-dash-lb-filmstrip::-webkit-scrollbar-thumb {
background: rgba(255,255,255,.25);
border-radius: 4px;
}
.com-dash-lb-thumb {
flex-shrink: 0;
width: 64px;
height: 64px;
border-radius: 6px;
object-fit: cover;
cursor: pointer;
border: 2px solid transparent;
opacity: .65;
transition: opacity .15s, border-color .15s;
}
.com-dash-lb-thumb:hover { opacity: .9; }
.com-dash-lb-thumb.ativo {
border-color: var(--primary);
opacity: 1;
}
/* Cursor de lupa na imagem principal — indica que é clicável */
.com-dash-principal-img { cursor: zoom-in; }
/* ── Reordenar mídias no modal (comunicados.html) ─────────── */
.midia-ord-lista {
display: flex;
flex-direction: column;
gap: 6px;
}
.midia-ord-item {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
border-radius: 8px;
background: var(--cor-fundo-pagina);
border: 1px solid var(--cor-borda-padrao);
font-size: 13px;
}
.midia-ord-controles {
display: flex;
flex-direction: column;
gap: 2px;
flex-shrink: 0;
}
.btn-ord {
background: none;
border: 1px solid var(--cor-borda-padrao);
border-radius: 4px;
width: 22px;
height: 22px;
min-height: 22px;
font-size: 10px;
cursor: pointer;
color: var(--cor-texto-secundario);
display: flex;
align-items: center;
justify-content: center;
padding: 0;
line-height: 1;
}
.btn-ord:hover { background: var(--gray-100); }
.midia-ord-nome {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.badge-principal {
font-size: 10px;
font-weight: 700;
background: var(--cor-sucesso-bg);
color: var(--cor-sucesso-texto-sobre-bg);
border-radius: 4px;
padding: 2px 5px;
white-space: nowrap;
flex-shrink: 0;
}
/* ── Classes legadas mantidas por compatibilidade ─────────── */
.comunicado-destaque-thumb { display: none; }
.comunicado-destaque-video { display: none; }
/* ── GERAR SEMANA: chips de loja agrupados por cidade ────────
Cada cidade tem um label em negrito acima dos seus chips. */
.gerar-lojas-grupo {
width: 100%;
margin-bottom: 8px;
}
.gerar-lojas-cidade {
display: block;
font-size: 11px;
font-weight: 700;
color: var(--cor-texto-secundario);
text-transform: uppercase;
letter-spacing: .04em;
margin-bottom: 5px;
}
.gerar-lojas-chips-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
/* ── SELECT DE LOJA (formulário de usuários) ─────────────────
font-size: 16px no mobile evita o zoom automático do iOS
ao focar no campo. Herda o estilo base do select global. */
.campo-loja-usuario {
font-size: 16px;
width: 100%;
}
@media (min-width: 768px) {
.campo-loja-usuario {
font-size: 14px;
}
}
/* ════════════════════════════════════════════════════════════
EDITOR RICO — Campo de descrição da tarefa (Fase 17)
Substitui o