/*
 * Onelead — tema monocromático do portal do cliente.
 * Carregado DEPOIS de theme.css (Dashkit) para sobrescrever por cascata.
 * Não altera nenhuma classe/estrutura usada por lógica de negócio — só
 * redefine cores, tipografia, espaçamento, sombras e a navegação lateral.
 */

/* Dashkit define as cores do tema via --primary/--font no seletor `*`.
   Repetir aqui, na mesma especificidade, é o único jeito confiável de
   sobrescrever (custom properties: valor especificado sempre vence o
   herdado, então --primary teria que ser redeclarada em `*` também). */
* {
    --primary: var(--graphite);
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

:root {
    --background: #f4f4f5;
    --surface: #ffffff;
    --surface-soft: #fafafa;
    --black: #111214;
    --black-soft: #18191c;
    --charcoal: #1e2023;
    --graphite: #2b2d31;
    --text-primary: #111214;
    --text-secondary: #71717a;
    --text-muted: #a1a1aa;
    --border: rgba(17, 18, 20, 0.08);
    --border-dark: rgba(255, 255, 255, 0.10);
    --sidebar-width: 80px;

    /* Escala de espaçamento (base 8px) — usar estas variáveis em vez de
       valores soltos sempre que uma regra nova precisar de um espaçamento. */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* Raio e altura padronizados (repetição) */
    --radius-card: 20px;
    --radius-btn: 10px;
    --btn-height: 40px;
    --icon-size: 20px;

    /* Transição curta única — nada de animação contínua ou de entrada */
    --transition-fast: 140ms ease;
}

/* Rede de segurança: nada no portal deve gerar scroll horizontal na
   página — qualquer elemento que vaze fica cortado, nunca cria barra. */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

body {
    background: var(--background);
    color: var(--text-primary);
    font-family: var(--font);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.header-title { font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; }
/* Título do post na tela de aprovação: 2rem ficava grande demais no mobile
   ao lado do badge de status. Só nessa página, só no mobile — o resto dos
   títulos (Dashboard, Calendário etc.) usa .header-title sem alteração. */
@media (max-width: 767.98px) {
    .approval-page .header-title { font-size: 1.5rem; }
}
.header-pretitle { color: var(--text-muted); font-weight: 600; letter-spacing: .04em; }

/* Abas Bootstrap (nav-tabs) — usadas no módulo Ads. O padrão do Bootstrap
   fixa fundo branco/texto escuro na aba ativa e cor de texto própria nas
   inativas, o que quebra no tema escuro (virava caixa branca sólida). Reusa
   os tokens do tema em vez das cores fixas do Bootstrap, em ambos os temas. */
.nav-tabs { border-bottom-color: var(--border); }
.nav-tabs .nav-link {
    color: var(--text-secondary);
    background: transparent;
    border-color: transparent;
}
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
    border-color: var(--border) var(--border) var(--border);
    color: var(--text-primary);
}
.nav-tabs .nav-link.active {
    color: var(--text-primary);
    background: var(--surface);
    border-color: var(--border) var(--border) var(--surface);
}
.card-header-title { font-size: 1rem; font-weight: 600; }
small, .small { color: var(--text-secondary); }

/* Cabeçalho da página (identificador + título + subtítulo + divisória)
   mais perto do topo — o padding-top do .container-fluid (32px) já é
   o respiro principal; o Dashkit soma mais 24px próprios ao header-body,
   dobrando a folga. Reduz para não duplicar margem superior. */
.header { margin-bottom: 2rem; }
.header-body { padding-top: 6px; }

/* Ícones: tamanho único em toda a interface (repetição) */
/* O glifo das fontes de ícone (Uicons/Feather) é desenhado no topo do quadrado
   da fonte, então na baseline fica ~0.15em acima do centro do texto. Descemos
   os ícones para alinhar o centro do glifo com o centro do texto (medido). */
.fe, .fi { font-size: var(--icon-size); line-height: 1; vertical-align: -0.15em; }
/* Ícone + texto: 8px de respiro (proximidade), não o "gap" solto do Bootstrap */
.header-pretitle .fe, small .fe, .badge .fe, .header-pretitle .fi, small .fi, .badge .fi { font-size: 1em; margin-right: var(--space-2); }

/* Título + informação secundária logo abaixo: 12px, não a margem default do <p>/<h*> */
.header-body h1, .card-title, .fw-bold.d-block { margin-bottom: var(--space-3) !important; }

/* ---------- Limite de linhas (reticências) — utilitário reutilizável ----------
   Evita que textos longos (títulos de post etc.) estourem o layout, invadam a
   coluna vizinha ou "fiquem no meio": o texto pode descer até N linhas e o
   excesso vira "…". Usar em qualquer título/legenda do portal. Precisa de uma
   largura limitada no elemento (ou pai com min-width:0) para calcular a quebra. */
.text-clamp-1, .text-clamp-2, .text-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere; /* quebra palavras/URLs enormes sem vazar */
    white-space: normal;     /* vence o nowrap herdado de pais .text-truncate */
}
.text-clamp-1 { -webkit-line-clamp: 1; line-clamp: 1; }
.text-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.text-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }

/* ---------- Tabela "Campanhas ativas" (Ads) — nome legível (31/08/2026) ----------
   .text-clamp-1 sozinho não fazia nada útil aqui: precisa de largura LIMITADA
   no elemento pra calcular a quebra (ver comentário acima), e uma <td> em
   tabela de layout automático (sem table-layout:fixed) não tem largura fixa —
   com a tabela ficando mais larga (12 colunas, depois da coluna de Resultado/
   Custo por resultado), o nome da campanha ficava espremido e quebrava em 2
   linhas feias em vez de cortar com "…". Corta numa linha só, largura fixa,
   nome completo disponível no title (tooltip nativo do navegador). */
.ads-campaign-name {
    display: block;
    max-width: 200px;
    min-width: 140px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ---------- Cards: raio único, borda discreta, sombra quase imperceptível ---------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    /* O Dashkit arredonda .card-header/.list-group-item/.table com valores
       fixos (ex.: .375rem) que não acompanham --radius-card (20px) — o
       fundo sólido desses filhos "vazava" nos cantos do card, expondo
       quinas retas. overflow:hidden corta qualquer filho na curva real do
       card, na origem, sem precisar corrigir o raio de cada filho um por
       um (cabeçalhos, listas, tabelas — em todas as páginas). */
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(17, 18, 20, .04);
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.card.bg-light { background: var(--surface-soft) !important; }
.card-body { padding: var(--space-6); }
.card-header { padding: var(--space-4) var(--space-6); }
/* Cartões clicáveis (linhas de tarefa, aprovação) ganham leve elevação —
   no máximo 1px, sem sombra pesada nem "salto" de hover exagerado. */
a.card:hover, .card-hover:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(17, 18, 20, .07);
    border-color: var(--text-muted);
}

/* Empilhamento de seções na página (proximidade/repetição): 32px entre
   blocos irmãos dentro do conteúdo, 16px entre cards vizinhos de uma grade. */
.container-fluid > .card + .card,
.container-fluid > .row + .card,
.container-fluid > .card + .row,
.container-fluid > .row + .row {
    margin-top: var(--space-8);
}
.row.g-cards { --bs-gutter-x: var(--space-4); --bs-gutter-y: var(--space-4); }

/* ---------- Botões: preto/grafite no lugar do azul; altura/raio únicos ---------- */
.btn {
    border-radius: var(--radius-btn);
    font-weight: 500;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
    /* Ícone + rótulo centralizados no mesmo eixo, com respiro único (gap) —
       sem isto o ícone caía na baseline do texto e parecia desalinhado. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}
/* Ícone dentro do botão acompanha o tamanho do texto (proporcional), em vez
   do 20px global — corrige o ícone "grande demais" em botões pequenos. O
   seletor `.btn.btn` eleva a especificidade para vencer regras de container
   (ex.: `.approval-schedule .fi`) e valer em qualquer botão. */
/* Botões com ícone + texto (qualquer ordem): dimensões exatas do "Extended
   Fab" pedidas pelo usuário — altura 48px, raio 14px, padding 12px do lado
   do ícone e 18px do lado do texto (mais respiro pro texto "respirar").
   Não entra em botões só-ícone (.attachment-button) nem sem ícone nenhum.
   .btn-icon-end inverte o padding pros poucos casos de ícone DEPOIS do
   texto (ex.: paginação "Agosto ›"). */
.btn.btn:has(> .fi):not(.attachment-button):not(.mobile-approve-button),
.btn.btn:has(> .fe):not(.attachment-button):not(.mobile-approve-button),
.btn.btn:has(> .btn-label > .fi):not(.attachment-button):not(.mobile-approve-button),
.btn.btn:has(> .btn-label > .fe):not(.attachment-button):not(.mobile-approve-button) {
    min-height: 48px !important;
    border-radius: 14px;
    padding-left: 12px;
    padding-right: 18px;
}
.btn.btn.btn-icon-end:has(> .fi):not(.attachment-button):not(.mobile-approve-button),
.btn.btn.btn-icon-end:has(> .fe):not(.attachment-button):not(.mobile-approve-button) {
    padding-left: 18px;
    padding-right: 12px;
}
.btn.btn > .fi, .btn.btn > .fe, .btn.btn > .btn-label > .fi, .btn.btn > .btn-label > .fe {
    font-size: 1.1em;
    line-height: 1;
    margin: 0;
    flex-shrink: 0;
}
.btn:not(.btn-sm):not(.btn-lg) { min-height: var(--btn-height); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible, .nav-link:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, button:focus-visible {
    outline: 2px solid var(--black);
    outline-offset: 2px;
}
.btn-primary, .btn-success {
    color: #fff !important;
    background-color: var(--black) !important;
    border-color: var(--black) !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-success:hover, .btn-success:focus {
    background-color: var(--charcoal) !important;
    border-color: var(--charcoal) !important;
    box-shadow: 0 0 0 .15rem rgba(17, 18, 20, .15) !important;
}
.btn-outline-primary, .btn-outline-danger, .btn-outline-secondary {
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
    background-color: var(--surface) !important;
}
.btn-outline-primary:hover, .btn-outline-danger:hover, .btn-outline-secondary:hover {
    background-color: var(--surface-soft) !important;
    color: var(--text-primary) !important;
    border-color: var(--text-muted) !important;
}
/* O Dashkit original dá um anel de foco VERMELHO pro outline-danger (cor
   de "perigo" do tema base) — nunca sobrescrito até agora porque ninguém
   clicava tanto nesses botões. Mesmo tratamento neutro que .btn-success/
   .btn-primary já têm (linha acima) — o portal é monocromático, nenhum
   anel de foco deveria vir colorido. */
.btn-outline-primary:focus, .btn-outline-danger:focus, .btn-outline-secondary:focus {
    box-shadow: 0 0 0 .15rem rgba(17, 18, 20, .15) !important;
}


/* ---------- Status: nunca por cor — por preenchimento, borda e peso ----------
   1) Resolvido/positivo (aprovado, publicado, pago): preenchido em preto.
   2) Precisa da sua ação (aguardando aprovação): contorno preto, sem
      preenchimento — "vazio" chama mais atenção que um tom neutro.
   3) Alerta (ajuste solicitado, vencido): preenchido em grafite + negrito.
   4) Informativo/neutro (agendado, cancelado etc.): cinza claro, texto
      secundário — nenhuma ênfase, é só um rótulo de estado passado. */
.badge {
    border-radius: 999px;
    font-weight: 500;
    padding: .35em .75em;
    border: 1px solid transparent;
}
.badge-soft-success {
    background-color: var(--black) !important;
    color: #fff !important;
}
.badge-soft-warning {
    background-color: transparent !important;
    color: var(--text-primary) !important;
    border-color: var(--black) !important;
    font-weight: 600;
}
.badge-soft-danger {
    background-color: var(--graphite) !important;
    color: #fff !important;
    font-weight: 600;
}
.badge-soft-primary, .badge-soft-secondary, .badge-soft-info,
.badge-soft-light, .badge-soft-dark {
    background-color: var(--surface-soft) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border) !important;
}

a { color: var(--text-primary); }
a:hover { color: var(--black); }
.text-primary { color: var(--text-primary) !important; }

/* ---------- Sidebar desktop: pílula escura vertical, só ícones ----------
   Mesma linguagem visual da pílula do topo do mobile/tablet — fundo
   escuro translúcido com blur, ícones claros, item ativo em destaque.
   Em mobile E tablet a sidebar fica completamente oculta (não só
   recolhida) para nunca aparecer junto com a pílula do topo. */
#sidebar {
    display: none;
    width: var(--sidebar-width);
    background: transparent !important; /* vence o bg-white/navbar-light do Bootstrap */
    border-right: none !important;
    box-shadow: none !important;
    align-items: center;
    justify-content: center;
}
@media (min-width: 992px) {
    #sidebar { display: flex; }
}
/* A pílula em si: envolve marca, ícones e "sair", centrada na vertical.
   !important porque o Dashkit fixa min-height/width no container do
   navbar-vertical com regras próprias. */
#sidebar > .container-fluid {
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: center; /* marca e ícones centralizados no mesmo eixo */
    flex: 0 0 auto;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    margin: auto 0 !important;
    width: 64px !important;
    min-width: 64px;
    padding: 8px 8px !important;
    border-radius: 32px;
    background: rgba(17, 18, 20, .88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: none;
}
#sidebar > .container-fluid::-webkit-scrollbar { display: none; }
/* Logo Onelead (quadrada) no topo, acima dos ícones. A área tem altura
   própria (não mexe na largura da pílula) e a folga inferior mantém
   distância até o primeiro ícone. */
#sidebar .navbar-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    flex-shrink: 0;
    overflow: visible;
    /* padding-top maior afasta o logo da borda superior da pílula (respiro
       no topo); a folga inferior mantém distância até o primeiro ícone. */
    padding: 16px 0 var(--space-4);
    margin: 0;
    width: 100%;
}
/* Logo quadrada, sem rotação. object-fit contain + height auto preservam a
   proporção original — sem esticar. Largura alinhada à coluna de ícones. */
#sidebar .brand-logo-img {
    display: block;
    width: 35px !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important; /* remove o cap global do tema que deformava */
    flex-shrink: 0;
    object-fit: contain;
}
/* O Dashkit dá padding lateral de 1rem ao .navbar-collapse e min-width:100%
   ao .navbar-nav — regras pensadas pra barra horizontal no topo. Numa
   coluna de 44px de conteúdo (pílula 56px − padding), esse padding some
   com o espaço e o flexbox (min-width:auto por padrão) recusa encolher
   abaixo do conteúdo, alargando a coluna inteira e criando scrollbar
   horizontal. Zerar padding e permitir encolher em toda a cadeia. */
#sidebar .navbar-collapse,
#sidebar .navbar-nav,
#sidebar .nav-item {
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    max-width: 100%;
    flex: 0 1 auto;
}
#sidebar .navbar-nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    gap: 10px; /* mais respiro entre os ícones (estilo da referência) */
}
#sidebar .nav-item {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}
#sidebar .nav-link {
    width: 40px !important; height: 40px;
    min-width: 40px; max-width: 40px;
    display: flex !important; align-items: center !important; justify-content: center !important;
    border-radius: 999px;
    color: rgba(255, 255, 255, .55);
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
    padding-left: 0 !important;
    left: 0 !important;
    transform: none !important;
    text-align: center;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
/* O tema base soma padding-bottom só embaixo do ícone (pensado para
   ícone+texto lado a lado) — aqui o ícone fica sozinho e centralizado,
   então essa folga assimétrica empurra o glifo para cima. Zerar. */
#sidebar .nav-link .fe, #sidebar .nav-link .fi { font-size: 1.05rem; margin: 0; padding-bottom: 0; }
#sidebar .nav-link:hover { background: rgba(255, 255, 255, .08); color: #fff; }
/* O Dashkit desenha uma barrinha de 2px à esquerda do item ativo
   (::before, cor grafite) — aparece como uma "reta" sobre a cápsula
   branca. Removida só aqui na sidebar. */
#sidebar .nav-link::before { display: none !important; content: none !important; }
/* Item ativo: cápsula de VIDRO FOSCO (frosted glass) integrada ao menu —
   branco translúcido com degradê sutil, blur no fundo, borda clara fina e
   sombra muito suave. Ícone branco p/ contraste. Mesmo eixo dos demais. */
#sidebar .nav-link.active,
#sidebar .nav-link.active:hover {
    width: 46px !important; min-width: 46px; max-width: 46px;
    height: 44px;
    border-radius: 16px;
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.09));
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
}
/* Notificação em cima do ícone (canto superior), sem alargar o item */
#sidebar .nav-link .badge {
    position: absolute; top: -3px; right: -3px;
    min-width: 15px; height: 15px;
    display: flex; align-items: center; justify-content: center;
    font-size: .58rem; line-height: 1; padding: 0 4px;
    background: #fff !important; color: var(--black) !important;
    border: 2px solid rgba(17, 18, 20, .88);
    z-index: 1;
}
/* O item ativo agora é translúcido (não mais cápsula branca sólida), então
   o badge branco padrão continua visível — sem inversão. */
#sidebar .navbar-heading { display: none; } /* trilho de ícones não usa rótulos de seção */
#sidebar .sidebar-bottom {
    margin-top: var(--space-8); /* separa bem o grupo inferior (perfil/sair) */
    display: flex; flex-direction: column; align-items: center;
    width: 100%;
    gap: 10px; padding-bottom: 0;
}

/* Tooltip com o nome da página (Bootstrap tooltip, ativado via JS) */
#sidebar [data-bs-toggle="tooltip"] { cursor: pointer; }
/* Tooltips do portal: fundo preto, texto branco, cantos arredondados —
   consistente com a pílula escura. --bs-tooltip-bg colore também a seta. */
.tooltip { --bs-tooltip-bg: #121214; --bs-tooltip-color: #fff; --bs-tooltip-opacity: 1; }
.tooltip .tooltip-inner {
    background: #121214 !important;
    color: #fff !important;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: .78rem;
}
#sidebar { overflow-x: hidden; align-items: center; justify-content: center; }

/* Layout principal: sem recuo em mobile/tablet (a sidebar está oculta);
   só abre espaço para o trilho de ícones a partir do desktop (992px).
   Especificidade alta necessária para vencer as regras do Dashkit
   (.navbar-vertical.navbar-expand-md.fixed-left + .main-content). */
.navbar-vertical.fixed-left + .main-content,
.main-content {
    margin-left: 0 !important;
}
@media (min-width: 992px) {
    .navbar-vertical.fixed-left + .main-content,
    .main-content {
        margin-left: var(--sidebar-width) !important;
    }
}
.main-content .container-fluid {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
    padding: var(--space-8) var(--space-10) !important;
}

/* Card de "Próxima publicação" — único card escuro da página (ênfase) */
.next-publication-card {
    border-radius: var(--radius-card);
    border: none;
    min-height: 240px;
    color: #fff;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.09), transparent 34%),
        linear-gradient(145deg, #2b2d31 0%, #1e2023 48%, #111214 100%);
}
.next-publication-card .badge {
    background: #fff !important;
    color: var(--black) !important;
}
/* Duas colunas no desktop/tablet largo: texto à esquerda, arte à
   direita (nunca embaixo) — em mobile empilha, arte abaixo do texto. */
.next-publication-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    align-items: center;
    gap: 32px;
}
.next-publication-image { display: flex; align-items: center; }
.next-publication-image img {
    width: 100%;
    max-width: 260px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    /* A classe Bootstrap "rounded-3" no blade não tem efeito (o CSS do
       Bootstrap não é carregado no projeto, só o JS) — arredondamento
       explícito aqui. */
    border-radius: 16px;
}
@media (max-width: 768px) {
    .next-publication-content {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .next-publication-image { width: 100%; }
    .next-publication-image img { max-width: none; }
}

/* ---------- Quadro "Em andamento": 3 colunas lado a lado (kanban) ---------- */
.tasks-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    align-items: start;
}
.tasks-column {
    min-height: 380px;
    display: flex;
    flex-direction: column;
}
.tasks-column .card-body {
    padding: var(--space-4);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.tasks-column-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.tasks-column-heading .card-header-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* O tema estica badges e o próprio card-header (flex:1) dentro de card
   flex; aqui o cabeçalho tem altura fixa e o contador é uma pílula
   compacta à direita — quem cresce é só o corpo. */
.tasks-column .card-header { flex: 0 0 auto; }
.tasks-column .card-header .badge { flex: 0 0 auto; }
.tasks-column-icon {
    width: 34px; height: 34px;
    border-radius: 10px;
    background: var(--surface-soft);
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}
/* Somente leitura: o quadro é acompanhamento, não ação — cursor neutro,
   nenhum hover que sugira clique, sem menu nem botão. */
.task-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    cursor: default;
}
.task-card-thumb {
    width: 52px; height: 52px; border-radius: 10px; object-fit: cover; flex-shrink: 0;
    background: var(--surface-soft);
}
.task-card-thumb-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 18px;
}
.task-card-title {
    display: block;
    font-weight: 700;
    font-size: .9375rem;
    color: var(--text-primary);
    line-height: 1.3;
}
.task-card-meta { color: var(--text-secondary); }
.task-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 4px;
    padding: var(--space-6);
    color: var(--text-secondary);
}
.task-empty-icon {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--surface-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 6px;
}
.task-empty-title {
    font-weight: 600;
    font-size: .875rem;
    color: var(--text-primary);
}
@media (max-width: 991.98px) {
    .tasks-grid { grid-template-columns: 1fr; }
}

/* ---------- StatusBar: fluxo do conteúdo (calendário) ----------
   Centralizada, uma linha só, ícone antes do texto, separadores cinza-claro.
   Sem space-between; no mobile rola na horizontal. */
.status-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;          /* quebra em várias linhas quando não cabe, em vez de cortar */
    gap: 8px 16px;            /* row-gap 8px entre linhas / column-gap 16px entre chips */
    min-height: 40px;
    padding: 6px var(--space-4);
}
.status-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .8125rem;
    color: var(--text-primary);
    flex-shrink: 0;
}
.status-icon {
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
}
.status-icon-orange { color: #FF7900; }
.status-icon-green { color: #63AD55; }
.status-icon-red { color: #e5484d; }
/* Separadores desativados: a barra agora quebra em várias linhas (flex-wrap)
   quando estreita, e traços entre chips ficariam soltos no fim/início das
   linhas. O espaçamento entre chips fica por conta do gap da .status-bar. */
.status-sep { display: none; }
/* Legenda clicável (filtro por status/perfil no calendário e aprovações;
   .ads-tab reusa o mesmo padrão de pílula p/ trocar de aba no módulo Ads). */
button.status-filter,
button.profile-filter,
button.ads-tab {
    background: none;
    border: 0;
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
}
button.status-filter:hover,
button.profile-filter:hover,
button.ads-tab:hover { background: #f4f4f5; }
button.status-filter.active,
button.profile-filter.active,
button.ads-tab.active {
    background: var(--black);
    color: #fff;
}
/* Logo da plataforma ao lado do texto nas abas Meta Ads / Google Ads —
   PNG com fundo removido (chroma key no branco), sem borda/box atrás.
   Tamanhos diferentes por pedido: Google um pouco maior que Meta (os
   logos não têm a mesma "massa" visual no mesmo tamanho — o Google Ads
   parece menor que é por ter mais espaço vazio dentro do próprio ícone). */
.ads-platform-icon {
    object-fit: contain;
}
.ads-platform-icon-meta {
    width: 18px;
    height: 18px;
}
.ads-platform-icon-google {
    width: 22px;
    height: 22px;
}

/* ---------- Módulo Ads: card de métrica com selo de ícone ----------
   Um único acento azul discreto (não um arco-íris por métrica) — o resto
   do portal usa badges monocromáticos (grafite/preto) de propósito;
   aqui é a exceção, restrita a este módulo, porque o pedido era
   reproduzir o visual de um dashboard de anúncios de referência. */
/* Bug real achado 02/09/2026 ("os blocos estão juntos"): a build do
   Bootstrap compilada pro tema (Dashkit) não inclui os utilitários de
   gutter VERTICAL (`--bs-gutter-y`/`.g-4` não define nada aqui — só o
   gutter HORIZONTAL padrão de `.col-*` existe). Resultado: ao quebrar de
   linha (2/3/4 cards por linha conforme a largura), as linhas de cards
   ficavam coladas verticalmente (0px de espaço), só com respiro nas
   laterais. `.g-4` não é usado em nenhum outro lugar do portal, então o
   fix é local: `row-gap` no flex do Bootstrap (`.row` já é
   `display:flex;flex-wrap:wrap`) resolve só o espaço ENTRE linhas, sem
   mexer no gutter horizontal já correto. */
.ads-metrics-row {
    row-gap: 24px;
}
.ads-metric-card {
    --ads-badge-bg: #e8f1fc;
    --ads-badge-icon: #2a78d6;
}
/* Selo de plataforma no card (pedido do usuário, 02/09/2026: logo do
   Meta/Google indicando de onde vem aquele número) — inline junto do
   rótulo, não flutuante: o card já tem o ícone colorido da categoria no
   canto (.ads-metric-icon), um segundo selo absoluto colidiria com ele. */
img.ads-metric-platform-badge {
    width: 13px;
    height: 13px;
    object-fit: contain;
    border-radius: 3px;
    flex-shrink: 0;
}
.ads-metric-card .card-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ads-metric-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: 2px;
}
.ads-metric-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.ads-metric-label .fi { font-size: .8em; cursor: help; }
.ads-metric-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--ads-badge-bg);
    color: var(--ads-badge-icon);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

/* ---------- Página de aprovação: Legenda | Conteúdo | Decisão ---------- */
.approval-grid {
    display: grid;
    grid-template-areas: "caption content decision";
    grid-template-columns: minmax(240px, .8fr) minmax(480px, 1.45fr) minmax(320px, 1fr);
    gap: 24px;
    align-items: start;
}
/* Descrição continua acompanhando a altura do card central (rola por
   dentro) — stretch só nela. */
.approval-caption { grid-area: caption; display: flex; flex-direction: column; align-self: stretch; }
.approval-content { grid-area: content; }
/* Painel de decisão: altura própria, sempre alinhado ao topo — o tamanho
   da mídia central não estica nem desloca essa coluna. */
.approval-decision { grid-area: decision; align-self: start; }
/* Post sem mídia utilizável: o card de postagem não é renderizado e o
   grid reorganiza para duas colunas — nada de coluna vazia no meio. */
.approval-grid.no-media {
    grid-template-areas: "caption decision";
    grid-template-columns: minmax(0, 1.3fr) minmax(320px, .8fr);
}
/* Legenda: rola por dentro quando o texto passa da altura disponível.
   No desktop, height:0 + min-height:100% impede o card de "esticar" a
   linha do grid — a altura de referência é a do card central. */
/* Cabeçalho fixo no topo: o tema dá flex:1 ao .card-header (pensado para
   card horizontal) — num card em coluna ele cresce e centraliza o título
   no meio do bloco. Aqui ele nunca estica: o espaço é todo do conteúdo. */
.approval-caption > .card-header {
    flex: 0 0 auto;
    min-height: 0;
    padding: 24px 24px 18px; /* não usar --space-5: não existe no tema */
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.approval-caption-body { flex: 1; min-height: 0; overflow-y: auto; text-align: left; }
@media (min-width: 992px) {
    .approval-caption { height: 0; min-height: 100%; }
}
/* Tablet: conteúdo + decisão lado a lado, legenda na largura toda abaixo */
@media (min-width: 768px) and (max-width: 991.98px) {
    .approval-grid {
        grid-template-areas:
            "content decision"
            "caption caption";
        grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
    }
    .approval-grid.no-media {
        grid-template-areas: "caption decision";
        grid-template-columns: minmax(0, 1.3fr) minmax(280px, .8fr);
    }
}
/* Mobile: coluna única — conteúdo, legenda, decisão */
@media (max-width: 767.98px) {
    .approval-grid {
        grid-template-areas:
            "content"
            "caption"
            "decision";
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }
    .approval-grid.no-media {
        grid-template-areas:
            "caption"
            "decision";
        grid-template-columns: minmax(0, 1fr);
    }
    /* Reserva espaço no fim da página para o botão flutuante nunca
       cobrir o último bloco (aviso, "Solicitar ajuste" ou legenda). */
    .main-content .container-fluid.approval-page { padding-bottom: 104px !important; }
}
/* "Pedir ajuste": botão de texto ocupa o resto da linha, clipe fixo */
.adjust-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    gap: 10px;
    align-items: stretch;
}
/* Toque mínimo de 44px nos dois botões da linha (o seletor composto vence
   o min-height genérico de .btn:not(.btn-sm):not(.btn-lg) definido acima) */
.adjust-actions .btn.btn { min-height: 44px; }
.attachment-button {
    display: grid;
    place-items: center;
    padding: 0;
}
.attachment-button .fe, .attachment-button .fi { margin: 0; font-size: 1rem; }
/* Lista compacta de anexos escolhidos ([hidden] = não reserva espaço) */
.adjust-file-list {
    list-style: none;
    margin: var(--space-3) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.adjust-file-list li {
    display: flex; align-items: center; gap: 8px;
    min-width: 0;
    font-size: .8125rem;
    background: var(--surface-soft);
    border-radius: 8px;
    padding: 6px 10px;
}
.adjust-file-list .file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adjust-file-list .file-size { color: var(--text-secondary); flex-shrink: 0; }
.adjust-file-list .file-remove {
    border: 0; background: transparent;
    padding: 2px 6px; line-height: 1; border-radius: 6px;
    font-size: 1rem;
    color: var(--text-secondary); cursor: pointer;
}
.adjust-file-list .file-remove:hover { color: var(--text-primary); background: rgba(17, 18, 20, .06); }

/* Fechar dos alertas: × minimalista. O tema não traz o SVG do .btn-close
   do Bootstrap 5 — sem isto o botão vira um bloco escuro com um traço,
   parecendo "minimizar". */
.btn-close {
    background: transparent !important;
    border: 0;
    width: auto;
    height: auto;
    padding: 0 4px;
    font-size: 1.25rem;
    line-height: 1;
    color: currentColor;
    opacity: .75;
    box-shadow: none !important;
}
.btn-close::before { content: "\00d7"; }
.btn-close:hover { opacity: 1; }
.alert-dismissible { position: relative; padding-right: 3rem; }
.alert-dismissible .btn-close {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
}

/* Cabeçalho do card de mídia (aprovação):
   [avatar] [nome / ícones de plataforma]        [Programado para / data]
   Tudo centralizado verticalmente; a coluna de informações empilha nome
   e plataformas com respiro fixo — sem plataforma, nada é renderizado e
   o nome centraliza sozinho no eixo do avatar. */
.approval-media-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
}
.approval-media-header .header-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.approval-media-header .header-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-width: 0;
}
.approval-media-header .header-info strong {
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.approval-media-header .header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    text-align: right;
    line-height: 1.35;
    flex-shrink: 0;
}

/* Ícones de plataforma (componente <x-platform-icons>) — só ícones,
   lado a lado, mesmo tamanho; nada é renderizado sem plataforma. */
.platform-icons {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
    vertical-align: -0.125em;
}
.platform-icons .fe, .platform-icons .fi { font-size: 16px; margin: 0; padding: 0; line-height: 1; }
.platform-icons svg { width: 15px; height: 15px; display: block; }

/* Cabeçalho dos cards Descrição e Documento: ícone + título alinhados,
   com o mesmo respiro entre ícone e texto. */
.approval-caption .card-header-title,
.approval-document .card-header-title {
    display: flex;
    align-items: center;
    gap: 9px;
}
.approval-caption .card-header-title .fe, .approval-caption .card-header-title .fi,
.approval-document .card-header-title .fe, .approval-document .card-header-title .fi {
    font-size: 16px;
    margin: 0;
    padding: 0;
    line-height: 1;
}

/* Botões do painel de decisão: ícone e texto centrados, sem baseline
   torta — o tema posiciona o .fe com deslocamentos pensados para links */
.approval-decision .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.approval-decision .btn .fe, .approval-decision .btn .fi,
.mobile-approve-button .fe, .mobile-approve-button .fi {
    margin: 0;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
    transform: none;
}

/* Animação de envio nos botões de decisão (Aprovar postagem/Resolvido/
   Solicitar ajuste/Responder — pedido do usuário, 03/09/2026, a partir de
   um componente React/framer-motion enviado como referência): rótulo
   some (1200ms) → "Enviando..." aparece (1800ms) → barra de progresso
   carrega, CINZA (1900-3400ms) → barra preenche o botão inteiro, VERDE,
   + check desenhado + "Concluído" (3400ms) → formulário enviado de
   verdade (4300ms). Recriada em CSS puro (o portal é Blade, sem React).
   IDÊNTICA em todos os botões de decisão — variante normal (Aprovar
   postagem/Solicitar ajuste, e o botão flutuante do mobile) e de
   pendência (Resolvido/Responder) — pedido do usuário, 03/09/2026: "o
   botão de pendência do cliente ficou ótimo, deixa o de aprovações
   igual". No "Solicitar ajuste", se o cliente tentar enviar sem escrever
   nada e sem anexar nada (mesma regra do backend, `required_without:
   files`), a animação de envio NUNCA roda — o botão pisca CINZA (nunca
   vermelho: a cor de erro ficava destoante do resto do card) mostrando
   "Escreva ou anexe algo" (rótulo escondido, `.btn-status.is-invalid` no
   lugar) e o mesmo aviso aparece no rodapé do card — nada é enviado (ver
   `flashInvalid()`). "Aprovar postagem"/"Resolvido" não têm essa
   validação. Verde/cinza são intencionais e pontuais pra esse feedback —
   não mudam a cor de repouso dos botões (.btn-success/.btn-outline-
   danger/.btn-outline-secondary continuam pretos/neutros, o resto do
   portal continua monocromático); o verde reaproveita o que já existe no
   theme.css original (Dashkit, #00d97e), só escondido atrás do tema mono
   — não é cor nova na paleta. */
.js-approve-btn, .js-adjust-btn {
    position: relative;
    overflow: hidden;
    min-height: 48px !important;
    border-radius: 14px;
}
.js-approve-btn .btn-label,
.js-adjust-btn .btn-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 2;
    transition: opacity .2s ease, color .2s ease;
}
.is-text-hidden .btn-label.js-idle {
    opacity: 0;
}
.btn-status {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1);
    z-index: 2;
    pointer-events: none;
}
.btn-status.is-uploading.is-visible { opacity: 1; transform: translateY(0); }
.btn-status.is-uploading.is-leaving {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity .3s cubic-bezier(.16,1,.3,1) .5s, transform .3s cubic-bezier(.16,1,.3,1) .5s;
}
.btn-status.is-done { transform: translateY(20px); }
.btn-status.is-done.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .4s cubic-bezier(.16,1,.3,1) .6s, transform .4s cubic-bezier(.16,1,.3,1) .6s;
}
.btn-status.is-done svg path {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    transition: stroke-dashoffset .4s ease-out .9s;
}
.btn-status.is-done.is-visible svg path { stroke-dashoffset: 0; }
.btn-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 5px;
    z-index: 1;
    transition: width 1.5s cubic-bezier(.7,0,.2,1);
}
.is-loading .btn-progress {
    width: 100%;
    background: var(--text-secondary); /* carregando = cinza */
}
.is-fill .btn-progress {
    width: 100%;
    height: 100%;
    background: #00d97e; /* concluído = verde */
    transition: height .9s cubic-bezier(.7,0,.2,1);
}
.is-fill .btn-label, .is-fill .btn-status.is-done {
    color: #fff; /* legível sobre o verde, mesmo nos botões outline */
}
/* Cinza instantâneo (sem sweep) quando falta texto e anexo — nunca
   vermelho: o mesmo aviso também aparece no card, embaixo do botão (ver
   #decision-notice-text no JS), mas dentro do botão precisa continuar
   dizendo alguma coisa (pedido do usuário, 03/09/2026 — ficava estranho
   só mudar de cor com o rótulo antigo "Solicitar ajuste" ainda escrito). */
.is-error .btn-progress {
    width: 100%;
    height: 100%;
    background: var(--graphite);
    transition: opacity .15s ease;
}
.is-error .btn-label {
    opacity: 0;
}
.is-error .btn-status.is-invalid {
    opacity: 1;
    transform: translateY(0);
    color: #fff;
    transition: opacity .2s ease;
}
@media (prefers-reduced-motion: reduce) {
    .js-approve-btn .btn-label, .js-adjust-btn .btn-label, .btn-status, .btn-status svg path, .btn-progress {
        transition: none;
    }
}

/* Conteúdo de aprovação embutido (iframe: Google Doc, vídeo etc.). É o
   conteúdo principal — ocupa a área central; a Descrição fica ao lado
   quando existe texto (sem texto, .no-caption tira a coluna). */
.approval-document { grid-area: content; display: flex; flex-direction: column; }
.approval-grid.document-mode.no-caption {
    grid-template-areas: "content decision";
    grid-template-columns: minmax(0, 1.6fr) minmax(320px, .8fr);
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .approval-grid.document-mode.no-caption {
        grid-template-areas: "content decision";
        grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
    }
}
@media (max-width: 767.98px) {
    .approval-grid.document-mode.no-caption {
        grid-template-areas:
            "content"
            "decision";
        /* Sem isto, as 2 colunas da regra acima persistiam no mobile e
           espremiam o conteúdo (coluna fantasma vazia ao lado). */
        grid-template-columns: minmax(0, 1fr);
    }
}
/* Utilities de gap do Bootstrap 5 — o theme.css (Dashkit) não as inclui,
   e várias views usam d-flex + gap-N esperando o espaçamento padrão
   (sem isto, os itens ficam colados: ícone grudado no título etc.). */
.gap-2 { gap: 8px !important; }
.gap-3 { gap: 16px !important; }
.gap-4 { gap: 24px !important; }

/* Ícone de câmera de vídeo do card compacto (post com link no campo
   Documento/Vídeo) — mesmo padrão do retângulo do quadro Em andamento. */
.doc-card-icon {
    width: 52px; height: 52px;
    border-radius: 12px;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.doc-card-video-icon { width: 24px; height: 24px; }

/* Cabeçalho independente "Programado para" (data/hora fora da mídia):
   pílula centralizada acima do vídeo/post. */
.approval-schedule {
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 999px;
}
.approval-schedule .card-body {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 26px;
    white-space: nowrap;
}
.approval-schedule .fe, .approval-schedule .fi { font-size: 16px; }
.approval-schedule strong { font-size: 1.0625rem; }
.approval-document-frame {
    position: relative;
    width: 100%;
    height: 70vh;
    min-height: 420px;
    background: var(--surface-soft);
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    overflow: hidden;
}
.approval-document-frame iframe,
.approval-document-frame video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.approval-document-frame video {
    object-fit: contain;
    background: #000;
}

/* Aviso informativo do painel de decisão */
.approval-note {
    display: flex; align-items: flex-start; gap: var(--space-2);
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: 12px;
    background: var(--surface-soft);
    color: var(--text-secondary);
    font-size: .8125rem;
}
.approval-note .fe, .approval-note .fi { flex-shrink: 0; margin-top: 2px; }
/* Botão flutuante de aprovação — só existe abaixo de 768px (d-md-none).
   Seletor repetido para vencer o min-height genérico de .btn:not(...):not(...) */
.mobile-approve-button.mobile-approve-button.mobile-approve-button {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 1040; /* acima da pílula do topo (1030) */
    min-height: 48px;
    padding: 0 18px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    box-shadow: 0 8px 24px rgba(17, 18, 20, .28);
}
/* Indicador discreto de carregamento (aprovação em andamento) */
.btn-spinner {
    display: inline-block;
    width: 1em; height: 1em;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    vertical-align: -.15em;
    animation: btn-spin .7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* Preview de post estilo Instagram (aprovação) */
.insta-card { width: 100%; overflow: hidden; }
.insta-media { width: 100%; height: auto; display: block; }
/* "Palco" da mídia — respiro entre a borda do card e a foto/vídeo/
   carrossel, com cantos arredondados na mídia em si (pedido do usuário,
   03/09/2026: "manter esse espaço... com borda arredondada... se
   adaptando aos formatos"). Mesmo espaço nos três casos (imagem única,
   vídeo, carrossel) — só o conteúdo de dentro muda. */
.insta-media-stage { padding: var(--space-4); }
.insta-media-stage .insta-media,
.insta-media-stage .video-preview,
.insta-media-stage .insta-frame {
    border-radius: 14px;
    overflow: hidden;
}
/* Vídeos: mostrar o arquivo inteiro na proporção original (vertical,
   horizontal ou quadrado), centralizado sobre fundo preto — nunca cortar
   (object-fit: contain), nunca esticar, sem overflow. O teto de altura
   evita que um 1080x1920 passe da dobra e "corte" pelo viewport. */
.video-preview {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #000;
}
.video-preview video {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: calc(100vh - 190px);
    object-fit: contain;
    background: #000;
}
/* Efeito 3D na foto única (sem carrossel) — pedido do usuário
   (03/09/2026), a partir do componente CardContainer/CardBody/CardItem
   (Aceternity UI) enviado como referência: o card inclina em direção ao
   cursor (perspective + rotateX/rotateY calculados pela posição do
   mouse, ver JS) e a própria foto "sobe" na direção da tela
   (translateZ), com a sombra crescendo junto — a mesma ideia do
   `CardItem translateZ="100"` do original, portada pra CSS/JS puro (o
   portal é Blade, sem React). Só na imagem única: com carrossel, o
   efeito competiria com as setas/bolinhas de navegação. */
.tilt-wrap { perspective: 900px; }
.tilt-inner {
    position: relative;
    transition: transform .2s ease-linear, box-shadow .3s ease;
    transform-style: preserve-3d;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(17, 18, 20, .04);
}
.tilt-inner.is-hovering { box-shadow: 0 22px 45px rgba(17, 18, 20, .22); }
.tilt-inner .insta-media {
    transition: transform .2s ease-linear;
    transform: translateZ(0px);
    will-change: transform;
}
.tilt-inner.is-hovering .insta-media { transform: translateZ(40px); }
@media (prefers-reduced-motion: reduce) {
    .tilt-inner, .tilt-inner .insta-media { transition: none !important; }
}
.insta-frame { position: relative; background: var(--surface-soft); }
/* Setas flutuantes sobre a própria foto (pedido do usuário, 03/09/2026:
   "algo mais minimalista" no lugar da régua lateral reservada que existia
   antes) — círculo translúcido com blur, sem faixa dedicada; a imagem
   ocupa a largura toda do "palco" (.insta-media-stage). Mesmo tratamento
   em claro/escuro, já que fica por cima da mídia, não do fundo do tema. */
.insta-frame .carousel-control-prev, .insta-frame .carousel-control-next {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(17, 18, 20, .42);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 1;
    transition: background-color .2s ease;
}
.insta-frame .carousel-control-prev:hover, .insta-frame .carousel-control-next:hover {
    background: rgba(17, 18, 20, .62);
}
.insta-frame .carousel-control-prev { left: 10px; }
.insta-frame .carousel-control-next { right: 10px; }
.insta-frame .carousel-control-prev-icon, .insta-frame .carousel-control-next-icon {
    filter: none; /* ícone já nasce branco (pensado pra ficar sobre fundo
                     escuro) — antes precisava escurecer pra aparecer na
                     régua clara; agora o próprio círculo é escuro. */
    width: 1rem; height: 1rem;
}
/* Contador "1/N": canto superior direito da arte, flutuando sobre a foto —
   mesmo espírito das setas. */
#mediaCounter {
    top: 12px;
    right: 12px;
    margin: 0 !important; /* anula o m-2 do markup, que deslocava o cálculo */
    font-size: .625rem;
    padding: 3px 6px;
    letter-spacing: 0;
    pointer-events: none; /* cliques atravessam para a seta do carrossel */
    background: rgba(17, 18, 20, .55) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.insta-dots { position: static; margin: var(--space-3) auto 0; display: flex; justify-content: center; gap: 5px; }
.insta-dots [data-bs-target] {
    width: 6px; height: 6px; border-radius: 50%; border: 0; padding: 0;
    /* cinza visível sobre o card branco (--border-dark é branco 10%,
       pensado para a pílula escura — aqui sumia) */
    background: #c9ced6; opacity: 1; margin: 0; text-indent: -9999px;
    transition: background var(--transition-fast);
}
.insta-dots .active { background: var(--black); transform: scale(1.15); }
.insta-actions { font-size: 1.55rem; }
.insta-actions .fe, .insta-actions .fi { font-size: 1em; margin-right: 0; cursor: default; }

/* Barra flutuante no topo (mobile/tablet) — logo NOVV4 à esquerda +
   ícones, pílula escura ancorada à esquerda, com blur por baixo. */
.mobile-tabbar {
    position: fixed; top: max(var(--space-3), env(safe-area-inset-top));
    left: 50%; transform: translateX(-50%);
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: rgba(17, 18, 20, .88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 999px;
    padding: 6px;
    box-shadow: 0 8px 24px rgba(17, 18, 20, .18);
    max-width: calc(100vw - 24px);
}
/* Logo à esquerda dentro da pílula, com um respiro até o primeiro ícone */
.mobile-tabbar .tabbar-brand {
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    width: auto; /* libera o width:40px de .mobile-tabbar a */
    height: 40px;
    padding: 0 6px 0 16px; /* respiro à esquerda p/ a logo não colar na borda */
    margin-right: 12px; /* respiro entre a logo e o primeiro ícone */
}
.mobile-tabbar .tabbar-brand img {
    display: block;
    height: 26px;
    width: auto;
    max-height: none !important; /* vence o cap global de img do tema */
}
.mobile-tabbar a {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border-radius: 999px;
    color: rgba(255, 255, 255, .55);
    text-decoration: none;
    flex-shrink: 0;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
.mobile-tabbar a .fe, .mobile-tabbar a .fi { font-size: 1.05rem; margin-right: 0; padding-bottom: 0; }
.mobile-tabbar a.active { background: rgba(255, 255, 255, .14); color: #fff; }
/* Grupo dos ícones principais (espaçamento uniforme) */
.mobile-tabbar .tabbar-icons {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}
/* Colapso (definido por largura via ResizeObserver): só logo + "⋯"; os
   ícones principais somem da barra e reaparecem dentro do menu "⋯". */
.tabbar-menu-primary { display: none; }
.mobile-tabbar.is-collapsed .tabbar-icons { display: none; }
.mobile-tabbar.is-collapsed .tabbar-more-menu .tabbar-menu-primary { display: block; }
.mobile-tabbar a .badge {
    position: absolute; top: 2px; right: 2px;
    min-width: 15px; height: 15px;
    display: flex; align-items: center; justify-content: center;
    font-size: .58rem; line-height: 1; padding: 0 2px;
    background: #fff !important; color: var(--black) !important;
    border: 0;
}
/* ===== Menu MOBILE (somente ≤767.98px) — NÃO afeta tablet nem desktop.
   A pílula ocupa a largura disponível e distribui os itens por igual (logo à
   esquerda, "⋯" à direita, ícones espaçados uniformemente por space-between).
   O colapso para (logo + "⋯") continua por ResizeObserver quando não couber.
   Tablet (768–991px) e desktop seguem com as regras-base inalteradas. ===== */
@media (max-width: 767.98px) {
    .mobile-tabbar {
        width: calc(100vw - 24px);
        max-width: 520px;
        gap: 0;                          /* o espaçamento vem do space-between */
        padding: 6px 18px;               /* padding lateral (afasta da borda) */
        justify-content: space-between;
    }
    /* logo levemente maior (30px), proporção preservada, afastada da borda
       e com respiro extra até o primeiro ícone */
    .mobile-tabbar .tabbar-brand {
        height: 40px;
        padding: 0;
        margin-right: 8px;
    }
    .mobile-tabbar .tabbar-brand img { height: 30px; }
    /* Os 4 ícones viram filhos diretos da pílula (display:contents), então o
       space-between os distribui uniformemente junto do logo e do "⋯". Ao
       colapsar, `.is-collapsed .tabbar-icons{display:none}` (regra base, mais
       específica) esconde o grupo e os ícones passam para o menu "⋯". */
    .mobile-tabbar .tabbar-icons { display: contents; }
}

/* Botão "⋯" (três pontos) da tabbar — mesmo formato dos ícones */
.mobile-tabbar .tabbar-more-wrap { display: flex; }
.mobile-tabbar .tabbar-more {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border-radius: 999px;
    border: 0; background: transparent; cursor: pointer;
    color: rgba(255, 255, 255, .55);
    flex-shrink: 0;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
.mobile-tabbar .tabbar-more .fi { font-size: 1.05rem; }
.mobile-tabbar .tabbar-more:hover,
.mobile-tabbar .tabbar-more.active,
.mobile-tabbar .tabbar-more[aria-expanded="true"] {
    background: rgba(255, 255, 255, .14); color: #fff;
}
.mobile-tabbar .tabbar-more .badge {
    position: absolute; top: 2px; right: 2px;
    min-width: 15px; height: 15px;
    display: flex; align-items: center; justify-content: center;
    font-size: .58rem; line-height: 1; padding: 0 2px;
    background: #fff !important; color: var(--black) !important;
    border: 0;
}
/* Menu do "⋯" — popover escuro combinando com a pílula da tabbar */
.tabbar-more-menu {
    /* Ancorado ao topo-direito da tela (a tabbar é fixa/centralizada, então
       posicionar relativo ao botão transbordava). Fica sempre visível,
       logo abaixo da pílula. */
    position: fixed;
    top: 64px;
    right: 12px;
    left: auto;
    margin: 0;
    z-index: 1031;
    min-width: 210px;
    max-width: calc(100vw - 24px);
    padding: 6px;
    background: rgba(17, 18, 20, .96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
    box-shadow: 0 20px 26px rgba(17, 18, 20, .16);
}
.tabbar-more-menu .dropdown-item {
    /* Reseta o estilo de "ícone circular 40px" que `.mobile-tabbar a` aplica
       (os itens do menu são <a> dentro de .mobile-tabbar) — aqui são linhas
       de largura total, alinhadas à esquerda. */
    width: auto; height: auto;
    min-width: 0; max-width: none;
    justify-content: flex-start;
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 9px;
    font-size: .9rem;
    color: rgba(255, 255, 255, .82);
}
.tabbar-more-menu .dropdown-item .fi { font-size: 1.05rem; width: 20px; text-align: center; }
.tabbar-more-menu .dropdown-item:hover,
.tabbar-more-menu .dropdown-item:focus { background: rgba(255, 255, 255, .10); color: #fff; }
.tabbar-more-menu .dropdown-item.active { background: rgba(255, 255, 255, .16); color: #fff; }
.tabbar-more-menu .dropdown-item .badge {
    /* Reseta o position:absolute herdado de `.mobile-tabbar a .badge`
       (que é para o pontinho nos ícones) — aqui o badge fica em linha, à
       direita do texto. */
    position: static;
    top: auto; right: auto;
    margin-left: auto;
    border: 0;
    background: #fff !important; color: var(--black) !important;
    font-size: .62rem; padding: 2px 7px; border-radius: 999px;
}
.tabbar-more-menu .dropdown-divider { border-color: rgba(255, 255, 255, .12); margin: 6px 4px; }

/* Rótulos do toggle de tema no menu "⋯" (o ícone segue as regras .theme-toggle-moon/sun) */
.theme-toggle-label-light { display: none; }
html.dark .theme-toggle-label-dark { display: none; }
html.dark .theme-toggle-label-light { display: inline; }

/* A barra do topo só existe em mobile/tablet — some no desktop, onde
   a sidebar assume a navegação. */
@media (min-width: 992px) {
    .mobile-tabbar { display: none; }
}

@media (max-width: 767.98px) {
    .main-content { padding-top: 68px; }
    .main-content .container-fluid { padding: var(--space-4) 16px !important; }
    .next-publication-card { min-height: 0; }
    .card-body { padding: var(--space-4); }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .main-content { padding-top: 76px; }
    .main-content .container-fluid { padding: var(--space-8) var(--space-6) !important; }
}

/* ---------- Pendência do cliente: linha horizontal limpa (card branco) ----------
   Selo + título + texto auxiliar à esquerda; botões "Responder"/"Resolvido"
   à direita. Uma embaixo da outra, com bastante respiro. */
.pendency-row {
    display: flex;
    flex-direction: row; /* .card do Bootstrap é column por padrão */
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding: var(--space-6) var(--space-8);
}
.pendency-row__main { min-width: 0; flex: 1; }
.pendency-row__title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 4px;
    overflow-wrap: anywhere;
}
.pendency-row__sub { color: var(--text-secondary); font-size: .9rem; margin: 0; }
.pendency-row__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.pendency-row__actions form { margin: 0; }
.pendency-row__actions .btn { min-width: 132px; }
/* Mobile: empilha o conteúdo e os botões ocupam a largura toda */
@media (max-width: 575.98px) {
    .pendency-row { flex-direction: column; align-items: stretch; gap: var(--space-4); }
    .pendency-row__actions { width: 100%; }
    .pendency-row__actions .btn { flex: 1; min-width: 0; }
    .pendency-row__actions form { flex: 1; display: flex; }
    .pendency-row__actions form .btn { width: 100%; }
}

/* Alterar data da postagem (tela de aprovação) */
.approval-schedule-wrap { display: flex; flex-direction: column; align-items: center; }
.approval-schedule .approval-date-toggle { margin-left: 10px; }
.approval-date-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
    margin-top: 12px;
    max-width: 360px;
}
.approval-date-form .form-control { max-width: 230px; }

/* ---------- Aprovações: lista horizontal minimalista (sem card branco) ----------
   Referência pedida pelo cliente: filtros de perfil em linha sobre fundo limpo
   e a lista "Aguardando você" em colunas alinhadas (Status | Data e hora |
   Perfil | Conteúdo | Ação), separadas apenas por linhas finas. Mesma
   informação de antes — sem card, sem sombra, sem caixa de fundo. */

/* Filtro de perfis: sem retângulo branco, ancorado à esquerda, divisória fina */
.approval-filter {
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-6);
}
.approval-filter__bar {
    justify-content: flex-start;
    padding-left: 0;
    padding-right: 0;
    height: auto;
    padding-bottom: var(--space-4);
}

.approval-section-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: var(--space-4);
}

/* Grid compartilhado por cabeçalho e linhas — colunas sempre alinhadas */
.approval-table { width: 100%; position: relative; }
.approval-table__head,
.approval-row {
    display: grid;
    grid-template-columns: 200px 180px 170px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
}

/* Cabeçalhos pequenos e discretos */
.approval-table__head {
    padding: 0 var(--space-3) var(--space-3);
    border-bottom: 1px solid var(--border);
}
.approval-col {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Cada aprovação em uma única linha — pedido do usuário (03/09/2026, a
   partir do componente HoverEffect/card-hover-effect enviado): a risca
   divisória embaixo deu lugar a um destaque arredondado que desliza pra
   trás da linha sob o mouse (.approval-row-highlight, ver JS em
   index.blade.php) — por isso o z-index (o conteúdo precisa ficar acima
   do destaque) e o padding lateral (respiro entre o texto e o canto
   arredondado). No mobile (sem hover) a risca volta, ver media query. */
.approval-row {
    position: relative;
    z-index: 1;
    padding: var(--space-4) var(--space-3);
    border-radius: 12px;
}
.approval-row__cell { min-width: 0; }

.approval-datetime,
.approval-profile {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .875rem;
    color: var(--text-secondary);
}

/* Conteúdo: ícone do documento + título (com mais destaque) + plataformas */
.approval-row .approval-col--content {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.approval-content-meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.approval-content-title {
    font-weight: 600;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

/* Ação: botão preto + seta discreta, sempre juntos e à direita */
.approval-col--action { text-align: right; }
.approval-row .approval-col--action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
}
.approval-row .approval-col--action .btn { flex-shrink: 0; }
.approval-row__chevron {
    color: var(--text-muted);
    display: inline-flex;
    font-size: 1rem;
    flex-shrink: 0;
}
.approval-row__chevron:hover { color: var(--black); }

/* Destaque deslizante ao passar o mouse (pedido do usuário, 03/09/2026,
   a partir do componente HoverEffect/card-hover-effect enviado —
   framer-motion `layoutId` portado pra CSS/JS puro: o JS mede a posição
   da linha sob o mouse e anima até lá, ver index.blade.php). Um único
   elemento, escondido atrás de todas as linhas — nunca aparece sem
   JS/mouse (ex.: touch), então nunca fica "preso" visível à toa. */
.approval-row-highlight {
    position: absolute;
    left: 0;
    right: 0;
    border-radius: 12px;
    background: var(--surface-soft);
    opacity: 0;
    z-index: 0;
    pointer-events: none;
    transition: transform .25s cubic-bezier(.22, 1, .36, 1), height .25s cubic-bezier(.22, 1, .36, 1), opacity .15s ease;
}
.approval-row-highlight.is-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .approval-row-highlight { transition: none !important; }
}

/* Estado vazio: sem card, apenas um aviso discreto */
.approval-empty {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-6) 0;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
}

/* ---------- Mobile: cada linha vira bloco vertical (mesma informação) ---------- */
@media (max-width: 767.98px) {
    .approval-table__head { display: none; }
    .approval-row {
        grid-template-columns: 1fr;
        gap: var(--space-3);
        padding: var(--space-6) 0;
        border-radius: 0;
        /* Sem mouse (touch), o destaque deslizante nunca aparece — a
           risca divisória volta aqui pra continuar separando as linhas
           visualmente. */
        border-bottom: 1px solid var(--border);
    }
    .approval-row-highlight { display: none; }
    /* Rótulo da coluna acima de cada dado */
    .approval-row__cell[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: .625rem;
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--text-muted);
        margin-bottom: 4px;
    }
    .approval-row .approval-col--action {
        justify-content: flex-start;
    }
    .approval-row .approval-col--action .btn { flex: 1; }
    .approval-row__chevron { display: none; }
}

/* ---------- Cápsula de data "Hoje é ..." (calendário) ----------
   Ícone + textos numa única linha, centro perfeitamente alinhado. */
.date-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border: 1px solid #E4E7EC;
    border-radius: 999px;
    background: #FFFFFF;
    white-space: nowrap;
}
.date-pill-icon {
    font-size: 18px;
    line-height: 1;
    color: #94A3B8; /* azul/cinza suave */
    flex-shrink: 0;
    margin: 0;
}
.date-pill-text {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    line-height: 1;
}
.date-prefix { color: #94A3B8; font-weight: 400; }
.date-value  { color: #111214; font-weight: 600; }
/* Mobile: reduz levemente fonte e padding, mantendo o alinhamento */
@media (max-width: 575.98px) {
    .date-pill { padding: 6px 12px; gap: 8px; white-space: normal; }
    .date-pill-icon { font-size: 16px; }
    .date-prefix, .date-value { font-size: .875rem; }
}

/* ---------- Select em formato de pílula (módulo Ads: Período/Comparar) ----------
   Mesmo padrão visual do .date-pill acima (borda clara, 999px, fundo branco)
   — antes eram .form-select puros do Bootstrap, com cantos quase retos,
   fora do padrão arredondado usado no resto do portal. Mantém .form-select
   só pela seta nativa (background-image); o resto é sobrescrito aqui. */
.ads-filter-select {
    border: 1px solid #E4E7EC !important;
    border-radius: 999px !important;
    background-color: #FFFFFF;
    padding: 8px 32px 8px 16px !important;
    font-weight: 600;
    color: #111214;
    box-shadow: none !important;
}
.ads-filter-select:focus {
    border-color: var(--black) !important;
    box-shadow: none !important;
}
html.dark .ads-filter-select {
    background-color: var(--surface);
    border-color: var(--border) !important;
    color: var(--text-primary);
}

/* Card do seletor Visão geral/Meta Ads/Google Ads (módulo Ads): encolhe
   pro tamanho do conteúdo e alinha à esquerda — antes herdava o .card
   genérico (largura total) + .status-bar centralizado, então a pílula
   ficava esticada pela página inteira. Escopado só aqui: .status-bar
   sozinho (Calendário/Aprovações) continua centralizado e full-width. */
.ads-tabs-card {
    display: inline-block;
    width: auto;
}
.ads-tabs-card .status-bar {
    justify-content: flex-start;
}

/* Linhas do modal "Organizar" (portal) — arraste ⠿ pra reordenar, mesmo
   modelo do "Organizar" do admin (drag-and-drop, não setas ▲▼). Sem
   divisória entre linhas — espaçamento generoso + hover sutil já deixa
   cada linha separada visualmente, fica mais limpo/organizado que a
   borda fina de antes. */
.organize-item {
    padding: 10px 8px;
    border-radius: 8px;
    cursor: grab;
    transition: background-color .15s ease;
}
.organize-item:hover {
    background: var(--surface-soft, #f4f4f5);
}
.organize-item-dragging {
    opacity: 0.4;
}
.organize-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    color: var(--text-muted);
    flex-shrink: 0;
}
html.dark .organize-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* Catálogo de métricas do modal "Organizar" (admin e portal) — lista com
   scroll próprio (não estica o modal inteiro) + cabeçalho de categoria
   fixo no topo do grupo, mesmo padrão visual dos dois lados. */
.organize-catalog {
    max-height: 340px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px 12px;
}
/* Seção por PLATAFORMA (Geral/Meta Ads/Google Ads — pedido do usuário,
   02/09/2026: "separasse entre métricas Facebook e métricas Google"),
   um nível acima da categoria — título maior + logo da plataforma
   (mesmo ícone das abas), separada por uma linha das seções vizinhas. */
.organize-platform-group {
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.organize-platform-group:first-child {
    padding-top: 0;
    border-top: none;
}
.organize-platform-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-primary);
}
.organize-catalog-group-title {
    text-transform: uppercase;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    margin-top: 12px;
    margin-bottom: 4px;
}
.organize-catalog-group:first-child .organize-catalog-group-title {
    margin-top: 8px;
}
.organize-catalog-item {
    padding-top: 4px;
    padding-bottom: 4px;
}

/* ==================== Seletor de "Período" do Ads (portal) ====================
   Substitui o <select> nativo por um botão + painel flutuante: atalhos em
   2 colunas (Hoje, Ontem... / Últimos 90 dias... Mês atual) + calendário de
   2 meses lado a lado, clicável pra intervalo personalizado (1º clique =
   início, 2º = fim, aplica sozinho). Todo o grid do calendário é montado
   via JS (sem lib externa) — aqui só o visual. */
.ads-period-field {
    position: relative;
}
.ads-period-trigger {
    text-align: left;
}
.ads-period-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 1000;
    width: 560px;
    max-width: 90vw;
    background: var(--surface, #fff);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(17, 18, 20, 0.16);
    padding: 16px;
}
.ads-period-presets {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
}
.ads-period-preset {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 0.875rem;
    color: var(--text-primary, #111214);
    cursor: pointer;
}
.ads-period-preset:hover {
    background: var(--surface-soft, #f4f4f5);
}
.ads-period-preset.active {
    font-weight: 700;
}
.ads-period-calendar-months {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.ads-period-nav-btn {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface, #fff);
    color: var(--text-muted);
    cursor: pointer;
}
.ads-period-nav-btn:hover {
    background: var(--surface-soft, #f4f4f5);
}
.ads-period-month {
    flex: 1 1 0;
    min-width: 0;
}
.ads-period-month-title {
    text-align: center;
    font-weight: 700;
    font-size: 0.875rem;
    margin-bottom: 8px;
}
.ads-period-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.ads-period-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.ads-period-day {
    border: 0;
    background: none;
    padding: 6px 0;
    font-size: 0.8rem;
    border-radius: 999px;
    color: var(--text-primary, #111214);
    cursor: pointer;
}
.ads-period-day:hover {
    background: var(--surface-soft, #f4f4f5);
}
.ads-period-day-outside {
    color: var(--text-muted);
    opacity: 0.5;
}
.ads-period-day-today {
    font-weight: 700;
    box-shadow: inset 0 0 0 1px var(--border);
}
.ads-period-day-selected {
    background: var(--black);
    color: #fff;
}
.ads-period-day-in-range {
    background: var(--surface-soft, #f4f4f5);
    border-radius: 0;
}
.ads-period-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
html.dark .ads-period-day-selected {
    background: #f4f4f5;
    color: #17181b;
}
@media (max-width: 576px) {
    .ads-period-panel { width: calc(100vw - 48px); }
    .ads-period-presets { grid-template-columns: 1fr; }
    .ads-period-calendar-months { flex-wrap: wrap; }
    .ads-period-nav-btn:first-child { order: -1; flex-basis: 100%; margin: 0 auto 8px; }
    .ads-period-nav-btn:last-child { order: 1; flex-basis: 100%; margin: 8px auto 0; }
    .ads-period-month { flex-basis: 100%; }
}

/* "Comparar com" (portal) — mesmo gatilho em pílula do Período, mas o
   painel é busca + lista simples (pedido pra ficar igual a uma referência
   de conta/busca: campo de busca no topo, opções alinhadas embaixo). */
.ads-dropdown-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 1000;
    width: 100%;
    min-width: 220px;
    background: var(--surface, #fff);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(17, 18, 20, 0.16);
    padding: 8px;
}
.ads-dropdown-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    margin-bottom: 6px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-muted);
}
.ads-dropdown-search input {
    border: 0;
    outline: none;
    background: none;
    flex: 1 1 auto;
    font-size: 0.875rem;
    color: var(--text-primary, #111214);
}
.ads-dropdown-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 220px;
    overflow-y: auto;
}
.ads-dropdown-option {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 0.875rem;
    color: var(--text-primary, #111214);
    cursor: pointer;
}
.ads-dropdown-option:hover {
    background: var(--surface-soft, #f4f4f5);
}
.ads-dropdown-option.active {
    font-weight: 700;
}

/* ==================== BOTÃO DE ALTERNÂNCIA DE TEMA (sidebar) ====================
   Fica no eixo dos demais ícones (herda .nav-link). Lua no tema claro, sol
   no escuro. Reset do <button> para parecer um nav-link. */
#sidebar button.theme-toggle {
    border: 0;
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.theme-toggle .theme-toggle-sun { display: none; }
html.dark .theme-toggle .theme-toggle-moon { display: none; }
html.dark .theme-toggle .theme-toggle-sun { display: inline-flex; }

/* ==================== TEMA ESCURO DO PORTAL ====================
   Ativado pela classe .dark no <html> (toggle no rodapé da sidebar, salvo em
   localStorage). Remapeia os TOKENS de cor — a maioria do portal já usa
   estas variáveis — e ajusta os poucos componentes que o tema base (Dashkit)
   fixa em claro. Só o portal do cliente carrega este arquivo; o admin
   (Filament) não é afetado. Cores semânticas (erro/aprovação/alerta e a
   paleta do calendário) são preservadas. */
html.dark {
    --background: #17181b;   /* grafite suave — nunca preto absoluto */
    --surface: #202226;      /* cards um tom acima do fundo */
    --surface-soft: #26282d;
    --text-primary: #f4f4f5;
    --text-secondary: #a1a1aa;
    --text-muted: #8b8b93;
    --border: rgba(255, 255, 255, 0.10);
}

/* Texto/títulos e superfícies que o Dashkit fixa em claro */
html.dark body { color: var(--text-primary); }
html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6,
html.dark .header-title, html.dark .card-title, html.dark .card-header-title,
html.dark strong, html.dark b { color: var(--text-primary); }
html.dark .card, html.dark .card-header {
    background-color: var(--surface);
    border-color: var(--border);
    color: var(--text-primary);
}
html.dark .card.bg-light { background: var(--surface-soft) !important; }
html.dark hr, html.dark .dropdown-divider { border-color: var(--border); }
html.dark .dropdown-menu { background-color: var(--surface); border-color: var(--border); }
html.dark .dropdown-item { color: var(--text-primary); }
html.dark .dropdown-item:hover, html.dark .dropdown-item:focus {
    background-color: var(--surface-soft); color: var(--text-primary);
}
html.dark small, html.dark .small, html.dark .text-muted, html.dark .text-secondary {
    color: var(--text-secondary) !important;
}

/* Formulários */
html.dark .form-control, html.dark .form-select, html.dark textarea, html.dark input {
    background-color: var(--surface-soft);
    border-color: var(--border);
    color: var(--text-primary);
}
html.dark .form-control::placeholder, html.dark textarea::placeholder { color: var(--text-muted); }
html.dark .form-control:focus, html.dark .form-select:focus, html.dark textarea:focus {
    background-color: var(--surface-soft);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.25);
}

/* Tabelas (inclui o cabeçalho claro fixo do Dashkit em .card-table) */
html.dark .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-primary);
    color: var(--text-primary);
}
html.dark .table > :not(caption) > * > * {
    border-color: var(--border);
    background-color: transparent;
    color: var(--text-primary);
}
html.dark .table thead th,
html.dark .card-table thead th {
    background-color: transparent !important;
    color: var(--text-secondary);
    border-color: var(--border);
}

/* Botão primário/aprovar: invertido (claro sobre fundo escuro) — mantém a
   identidade monocromática com alto contraste. Outline segue os tokens. */
html.dark .btn-primary, html.dark .btn-success {
    background-color: #f4f4f5 !important;
    border-color: #f4f4f5 !important;
    color: #17181b !important;
}
html.dark .btn-primary:hover, html.dark .btn-primary:focus,
html.dark .btn-success:hover, html.dark .btn-success:focus {
    background-color: #e4e4e7 !important; border-color: #e4e4e7 !important;
}
html.dark .btn-outline-primary, html.dark .btn-outline-secondary, html.dark .btn-outline-danger {
    background-color: transparent !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}
html.dark .btn-outline-primary:hover, html.dark .btn-outline-secondary:hover, html.dark .btn-outline-danger:hover {
    background-color: var(--surface-soft) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
}

/* Badges monocromáticos (status objetivo dos posts) */
html.dark .badge-soft-success { background-color: #f4f4f5 !important; color: #17181b !important; }
html.dark .badge-soft-warning {
    background-color: transparent !important;
    color: var(--text-primary) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
}
html.dark .badge-soft-primary, html.dark .badge-soft-secondary, html.dark .badge-soft-info,
html.dark .badge-soft-light, html.dark .badge-soft-dark {
    background-color: var(--surface-soft) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border) !important;
}

/* Cápsula de data "Hoje é" + separador da legenda */
html.dark .date-pill { background: var(--surface); border-color: var(--border); }
html.dark .date-value { color: var(--text-primary); }

/* Listas e utilitários que o Dashkit/Bootstrap fixam em claro (senão ficam
   blocos brancos no escuro — ex.: linhas do dashboard). */
html.dark .list-group, html.dark .list-group-item {
    background-color: transparent;
    border-color: var(--border);
    color: var(--text-primary);
}
html.dark .list-group-item-action:hover { background-color: var(--surface-soft); }
html.dark .bg-light { background-color: var(--surface-soft) !important; }
html.dark .bg-white { background-color: var(--surface) !important; }

/* Selo de ícone do módulo Ads no escuro: a mesma pílula pastel clara vira
   uma mancha branca sem contexto — troca p/ um wash translúcido do próprio
   azul sobre a superfície escura do card. */
html.dark .ads-metric-card {
    --ads-badge-bg: rgba(57, 135, 229, 0.16);
    --ads-badge-icon: #6badf0;
}

/* Filtros (legenda de status / perfil): hover e ativo adaptados ao escuro —
   o hover fixo em #f4f4f5 virava uma pílula branca com texto invisível; o
   ativo escuro sumia no fundo. No escuro: hover translúcido claro e ativo
   invertido (pílula clara com texto escuro), bem visível. */
html.dark button.status-filter:hover,
html.dark button.profile-filter:hover,
html.dark button.ads-tab:hover { background: rgba(255, 255, 255, 0.10); }
html.dark button.status-filter.active,
html.dark button.profile-filter.active,
html.dark button.ads-tab.active { background: #f4f4f5; color: #17181b; }

/* Preview estilo Instagram: as setas agora flutuam sobre a própria foto
   (círculo translúcido, ver .insta-frame acima) — funcionam iguais em
   claro/escuro, sem precisar de ajuste aqui. Só os pontos embaixo da
   foto (sobre o fundo do CARD, esse sim muda de cor) e o avatar-inicial
   continuam precisando de ajuste no escuro. */
html.dark .insta-dots [data-bs-target] { background: rgba(255, 255, 255, 0.28); }
html.dark .insta-dots .active { background: #f4f4f5; }
html.dark .avatar-title { background-color: var(--surface-soft); color: var(--text-primary); }

/* Links neutros */
html.dark a { color: var(--text-primary); }
html.dark a:hover { color: #fff; }

/* Transição discreta ao trocar de tema (respeita reduced-motion) */
@media (prefers-reduced-motion: no-preference) {
    body, .card, .card-header, .form-control, .form-select, .date-pill {
        transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease;
    }
}

/* ==================== SCROLLBAR DO PORTAL (paleta do sistema) ====================
   Estilo único para qualquer área com rolagem — vertical e HORIZONTAL (arrastar
   para o lado no mobile): calendário, filtros de perfil, descrição, tabelas.
   Fina, arredondada, monocromática (grafite no claro / cinza-claro no escuro),
   trilho transparente. O trilho de ícones da sidebar segue com scrollbar oculta. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #3a3d42, #1e2023);
    border: 2px solid transparent;      /* respiro: afina o thumb dentro do trilho */
    background-clip: padding-box;
    border-radius: 100px;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #2b2d31, #111214);
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-corner { background: transparent; }
/* Firefox (herda para os contêineres internos) */
html { scrollbar-width: thin; scrollbar-color: #2b2d31 transparent; }

/* Escuro: thumb claro sobre o fundo grafite */
html.dark ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.20));
    border: 2px solid transparent;
    background-clip: padding-box;
}
html.dark ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.30));
    border: 2px solid transparent;
    background-clip: padding-box;
}
html.dark { scrollbar-color: rgba(255, 255, 255, 0.35) transparent; }

/* O menu (sidebar do desktop + tabbar/menu do mobile) mantém a MESMA cor
   original em ambos os temas — trilho escuro do tema claro. Sem inversão para
   claro no tema escuro (removido a pedido). */

/* Moldura de modal (Bootstrap puro do Dashkit nunca foi tokenizada aqui
   — fundo #fff fixo, borda azul-acinzentada solta e raio de .5rem, sem
   NENHUM ajuste pro tema escuro). Achado real ao redesenhar o modal de
   criativos (02/09/2026, pedido do usuário: "o layout... não está
   acompanhando o layout do portal, tudo iniciante"): valia pra QUALQUER
   modal do portal, não só o de criativos — corrigido aqui uma vez só.
   Mesma receita do `.card` (raio, borda, fundo, overflow:hidden pra
   cortar o header na curva); sem `!important` porque carrega DEPOIS do
   Dashkit e tem a mesma especificidade — vence por ordem, igual .card. */
.modal-content {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    overflow: hidden;
}
.modal-header,
.modal-footer {
    border-color: var(--border);
}
.modal-header {
    border-top-left-radius: var(--radius-card);
    border-top-right-radius: var(--radius-card);
}
.modal-footer {
    border-bottom-left-radius: var(--radius-card);
    border-bottom-right-radius: var(--radius-card);
}
/* --surface/--border já trocam de valor sozinhos em html.dark (ver
   :root/html.dark no topo deste arquivo) — nenhuma regra dark dedicada
   precisa existir aqui, só usar var(...) já resolve os dois temas. */

/* Criativos por campanha (Meta Ads) — botão na tabela de campanhas +
   cards dentro do modal (05/08/2026). Usa os mesmos tokens de cor do
   resto do portal, funciona em claro e escuro sem regra dedicada. */
.creatives-btn {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: 8px;
    white-space: nowrap;
}
.creatives-btn:hover { background: var(--surface); }

.creatives-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-4);
}

/* Raio/sombra/borda IGUAIS ao `.card` do resto do portal (achado real ao
   redesenhar, 02/09/2026: estava com raio de 12px torto — o padrão do
   portal inteiro é --radius-card, 20px — e sem a sombra sutil que todo
   card tem). Continua com classe própria (não literalmente `.card`)
   porque a JS que monta esses cards fica em ads.blade.php, mas replica
   a receita exata: mesma borda, mesmo fundo, mesma sombra. */
.creative-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    overflow: hidden;
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(17, 18, 20, .04);
    display: flex;
    flex-direction: column;
}

.creative-preview {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--surface-soft);
}
.creative-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.creative-preview-empty {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-secondary);
    font-size: 1.75rem;
}

.creative-play-badge {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.18);
    color: #fff;
    font-size: 2rem;
    pointer-events: none;
}

.creative-type-badge {
    position: absolute; left: 8px; bottom: 8px;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 100px;
}

.creative-body { padding: var(--space-4); }
.creative-name { font-weight: 600; margin-bottom: 6px; }

.creative-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
    margin-top: 8px;
}
.creative-metric { display: flex; flex-direction: column; }
.creative-metric span { font-size: 0.72rem; color: var(--text-secondary); }

/* Checklist ao vivo das regras de senha (pedido do usuário, 04/09/2026) —
   reset de senha, "meu perfil" e os dois campos de senha do admin
   (usuário/agência e login por cliente). Ícone cinza/neutro por padrão
   (antes do JS rodar), vermelho quando falta a regra, verde quando
   satisfeita — ver public/assets/js/password-policy.js. Duas colunas
   pra caber as 6 regras num espaço compacto, igual à referência do
   usuário; empilha em 1 coluna no mobile. */
.password-requirements {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px var(--space-4);
    margin-top: var(--space-2);
}
@media (max-width: 420px) {
    .password-requirements { grid-template-columns: 1fr; }
}
.password-requirement {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .75rem;
    color: var(--text-muted);
    transition: color var(--transition-fast);
}
.password-requirement-icon {
    display: inline-flex;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: color var(--transition-fast);
}
.password-requirement.is-met { color: var(--text-secondary); }
.password-requirement.is-met .password-requirement-icon { color: #00d97e; } /* mesmo verde já reaproveitado na animação de envio das Aprovações */
/* Campo vazio (ainda não digitou nada): ícone fica neutro (cinza), não
   vermelho — vermelho só depois que o cliente começa a digitar e uma
   regra continua faltando (.password-requirements ganha .is-touched no
   JS assim que o campo deixa de estar vazio). Mesmo vermelho do Dashkit
   original por trás do tema mono (.text-danger). */
.password-requirements.is-touched .password-requirement:not(.is-met) .password-requirement-icon { color: #e63757; }
.creative-metric strong { font-size: 0.85rem; color: var(--text-primary); }