/* LANGRIS — redesenho da operação: ícone no lugar de palavra, Radar sem * estouro, Agenda com conta e estado visíveis, composição com prévia fiel * à rede, prova recolhida. Carrega por último: só sobrepõe. */ /* Utilidades ------------------------------------------------------------- */ .op-vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .op-icone{display:inline-block;vertical-align:-.2em;flex:none} button>.op-icone:not(:only-child),a>.op-icone:not(:only-child),summary>.op-icone:not(:only-child){margin-right:6px} .op-botao-icone{display:inline-grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--exp-muted);cursor:pointer} .op-botao-icone:hover{background:var(--surface-soft);color:var(--exp-ink)} .op-botao-icone>.op-icone{margin:0} /* Barra superior ---------------------------------------------------------- */ .produto-operacional[data-op-tema] .op-sidebar{grid-template-columns:auto minmax(0,1fr) auto} .produto-operacional[data-op-tema] .op-sidebar nav button i{display:inline-flex;align-items:center;font-size:0} .produto-operacional[data-op-tema] .op-sidebar nav button i:empty{display:none} .produto-operacional[data-op-tema] .op-sidebar .op-company-chip{grid-column:2;grid-row:1;justify-self:start;display:inline-flex;align-items:center;justify-content:flex-start;gap:8px;min-width:0;max-width:300px;margin:0;padding:6px 10px;border:1px solid var(--exp-line);border-bottom:1px solid var(--exp-line);border-radius:10px;background:var(--exp-surface);color:var(--exp-ink);font-size:13px} .produto-operacional[data-op-tema] .op-sidebar .op-company-chip i{display:inline-flex;color:var(--exp-muted)} .produto-operacional[data-op-tema] .op-sidebar .op-company-chip strong{color:var(--exp-ink);font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .produto-operacional[data-op-tema] .op-sidebar .op-company-chip select{width:auto;max-width:220px;min-height:0;padding:2px 22px 2px 2px;border:0;background:transparent;color:var(--exp-ink);font:inherit;font-size:13px;font-weight:600} .produto-operacional[data-op-tema] .op-sidebar__fim{gap:4px} .produto-operacional[data-op-tema] .op-founder-link{display:inline-flex;align-items:center;gap:6px;max-width:none;padding:6px 8px;border-radius:8px;font-size:12px;text-decoration:none} .produto-operacional[data-op-tema] .op-founder-link:hover{background:var(--surface-soft)} .produto-operacional[data-op-tema] #op-sair{padding:0} @media (max-width:720px){ .produto-operacional .op-sidebar .op-company-chip{display:none} /* Sete itens (até "Você") sempre visíveis, só com ícone; o nome fica no title e no texto escondido. * "Vídeo" e "Imagem" entraram no lugar de "Studio"; desde 25/09/2026 a aba Radar saiu do ar. */ .produto-operacional .op-sidebar nav{grid-template-columns:repeat(7,minmax(40px,1fr));overflow:visible;gap:2px} .produto-operacional .op-sidebar nav button{min-height:52px;padding:6px 0;gap:0} .produto-operacional .op-sidebar nav button:has(i:not(:empty))>span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} } /* Cabeçalhos: sem frase de apoio, ações alinhadas ------------------------- */ .produto-operacional[data-op-tema] .op-head{align-items:center;gap:14px 24px;margin-bottom:20px} .produto-operacional[data-op-tema] .op-head h1{margin:0} .produto-operacional[data-op-tema] .op-head__actions{flex:1 1 auto;min-width:0;align-items:center;justify-content:flex-end} .produto-operacional[data-op-tema] .op-link,.produto-operacional[data-op-tema] .op-outline,.produto-operacional[data-op-tema] .op-primary{display:inline-flex;align-items:center;justify-content:center;gap:6px} .produto-operacional[data-op-tema] .op-social-account__details>summary{display:inline-flex;align-items:center;gap:6px} /* O ícone de três pontos já marca o controle: sem o "+" antigo ao lado. */ .produto-operacional .op-social-account__details>summary::after{content:none} /* Avatar do Instagram em Redes: o mesmo círculo com inicial das prévias, não uma letra solta. */ .produto-operacional .op-social-avatar>.pv-avatar{width:56px;height:56px;--pv-av:56px} /* Radar: abas com ícone, nunca maiores que a pílula ----------------------- */ .produto-operacional[data-op-tema] .op-radar-tabs{display:flex;flex-wrap:wrap;gap:6px;max-width:100%;margin:0;padding:0;border:0;background:transparent} .produto-operacional[data-op-tema] .op-radar-tabs button{display:inline-flex;align-items:center;gap:8px;min-width:0;height:38px;padding:0 14px;border:1px solid var(--exp-line);border-radius:10px;background:transparent;color:var(--exp-muted);font-family:inherit;font-size:13px;font-weight:500;line-height:1;letter-spacing:0;text-transform:none;white-space:nowrap;box-shadow:none} .produto-operacional[data-op-tema] .op-radar-tabs button i{display:inline-flex} .produto-operacional[data-op-tema] .op-radar-tabs button i:empty{display:none} .produto-operacional[data-op-tema] .op-radar-tabs button:hover{color:var(--exp-ink);background:var(--surface-soft)} .produto-operacional[data-op-tema] .op-radar-tabs button.ativo{background:var(--exp-accent-soft);border-color:transparent;color:var(--exp-accent-text)} @media (max-width:980px){ .produto-operacional[data-op-tema] .op-radar-tabs button i:not(:empty)+span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .produto-operacional[data-op-tema] .op-radar-tabs button:has(i:not(:empty)){width:44px;justify-content:center;padding:0} } /* Agenda: quem, quando e em que estado, sem legenda escrita --------------- */ .produto-operacional[data-op-tema] .op-month-summary{display:flex;flex-wrap:wrap;gap:18px;align-items:center} .produto-operacional[data-op-tema] .op-month-summary span{display:inline-flex;align-items:center;gap:6px;color:var(--exp-muted);font-size:13px} .produto-operacional[data-op-tema] .op-month-summary span b{color:var(--exp-ink);font-weight:600} .produto-operacional[data-op-tema] .op-month-summary span.alerta,.produto-operacional[data-op-tema] .op-month-summary span.alerta b{color:#d05a4e} .op-agenda-contas{display:inline-flex;align-items:center;gap:4px;padding:4px;border:1px solid var(--exp-line);border-radius:12px} /* Conta não filtrada: borda transparente, nunca opacidade (a inicial e o selo ficam legíveis). */ .op-agenda-conta{display:inline-grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--exp-muted);cursor:pointer;transition:background .15s,border-color .15s} .op-agenda-conta:hover{background:var(--surface-soft)} .op-agenda-conta.ativo{background:var(--exp-accent-soft);color:var(--exp-accent-text)} .op-agenda-conta.ativo .pv-avatar{box-shadow:0 0 0 2px var(--exp-accent)} /* O seletor de conta do cartão de formato. Mesma ideia do filtro da Agenda, mas com o @ escrito por extenso: aqui não há avatar no que o servidor devolve, e inventar inicial faria duas contas parecidas virarem a mesma letra. */ .op-formato__contas{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 10px} .op-formato__conta{padding:4px 10px;border:1px solid var(--exp-line);border-radius:999px;background:transparent;color:var(--exp-muted);font:inherit;font-size:13px;cursor:pointer;transition:background .15s,border-color .15s,color .15s} .op-formato__conta:hover{background:var(--surface-soft)} .op-formato__conta.ativo{background:var(--exp-accent-soft);border-color:var(--exp-accent);color:var(--exp-accent-text)} .produto-operacional[data-op-tema] .op-month-event{display:grid;gap:4px;min-width:0;padding:6px 8px;border-left:3px solid var(--exp-accent);border-radius:6px;background:var(--exp-surface);color:var(--exp-ink);text-align:left} .produto-operacional[data-op-tema] .op-month-event.ok{border-left-color:#3ab26e} .produto-operacional[data-op-tema] .op-month-event.erro{border-left-color:#d05a4e} .produto-operacional[data-op-tema] .op-month-event.ativo{border-left-color:#d3a74f} .produto-operacional[data-op-tema] .op-month-event strong{margin:0;color:var(--exp-ink);font-size:12px;font-weight:500;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .produto-operacional[data-op-tema] button.op-month-event:hover,.produto-operacional[data-op-tema] button.op-month-event:focus-visible{background:var(--surface-soft);color:var(--exp-ink);border-color:var(--exp-accent)} .op-evento__topo{display:flex;align-items:center;gap:6px;min-width:0} .produto-operacional[data-op-tema] .op-evento__topo time{color:var(--exp-muted);font-family:inherit;font-size:11px;font-variant-numeric:tabular-nums} .op-evento__topo .pv-avatar{flex:none} .op-evento__estado{display:inline-flex;margin-left:auto;color:var(--exp-muted)} .op-evento__estado--ok{color:#3ab26e} .op-evento__estado--erro{color:#d05a4e} .op-evento__estado--ativo{color:#d3a74f} /* Tema claro: verde e âmbar escurecidos (≥ 3:1 sobre o fundo azul-claro do cartão), também na borda. */ body.produto-operacional[data-op-tema="claro"] .op-evento__estado--ok{color:oklch(.45 .13 150)} body.produto-operacional[data-op-tema="claro"] .op-evento__estado--ativo{color:oklch(.5 .13 60)} body.produto-operacional[data-op-tema="claro"] .op-evento__estado--erro,body.produto-operacional[data-op-tema="claro"] .op-month-summary span.alerta,body.produto-operacional[data-op-tema="claro"] .op-month-summary span.alerta b{color:oklch(.5 .2 25)} body.produto-operacional[data-op-tema="claro"] .op-month-event.ok{border-left-color:oklch(.45 .13 150)} body.produto-operacional[data-op-tema="claro"] .op-month-event.ativo{border-left-color:oklch(.5 .13 60)} body.produto-operacional[data-op-tema="claro"] .op-month-event.erro{border-left-color:oklch(.5 .2 25)} .op-evento__midia,.op-rede-marca{display:inline-flex;align-items:center;color:var(--exp-muted);font-style:normal;font-size:12px} /* Composição: formulário à esquerda, o post como a rede mostra à direita -- */ .produto-operacional .modal__caixa--agendar{width:min(1120px,calc(100vw - 32px));max-width:1120px} .produto-operacional .modal__caixa--agendar .op-schedule-dialog{width:100%} .op-agendar{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,440px);gap:24px;align-items:start;margin-top:14px} .op-agendar__form{min-width:0} .op-agendar__previa{position:sticky;top:0;display:grid;gap:16px;justify-items:center;max-height:72vh;padding:16px;overflow:auto;border:1px solid var(--exp-line);border-radius:14px;background:var(--surface-soft)} .op-agendar__vazio{display:grid;place-items:center;gap:8px;min-height:220px;color:var(--exp-muted);font-size:13px} .produto-operacional .op-media-origins{margin-top:14px} .produto-operacional .op-destinos{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:12px;border:1px solid var(--exp-line);border-radius:12px;background:transparent} .produto-operacional .op-destinos legend{padding:0 6px;color:var(--exp-muted);font-size:12px;letter-spacing:.06em;text-transform:uppercase} .produto-operacional .op-destinos small{flex-basis:100%;color:var(--exp-muted);font-size:12px} .produto-operacional .op-destino{position:relative;display:inline-flex;align-items:center;gap:8px;margin:0;padding:6px 12px 6px 6px;border:1px solid var(--exp-line);border-radius:999px;background:transparent;color:var(--exp-muted);font-size:13px;cursor:pointer;transition:background .15s,color .15s,border-color .15s} .produto-operacional .op-destino input{position:absolute;width:1px;height:1px;margin:0;opacity:0} .produto-operacional .op-destino:has(input:checked){background:var(--exp-accent-soft);border-color:transparent;color:var(--exp-accent-text)} .produto-operacional .op-destino:has(input:focus-visible){outline:2px solid var(--exp-accent);outline-offset:2px} .produto-operacional .op-destino:has(input:checked) .pv-avatar{box-shadow:0 0 0 2px var(--exp-accent)} .produto-operacional .op-caption-editor>span,.produto-operacional .op-agendar__midia>span,.produto-operacional .op-agendar__quando>span{display:flex;align-items:center;justify-content:flex-start;gap:6px} .produto-operacional .op-caption-editor>span>b{margin-left:auto} @media (max-width:900px){ .op-agendar{grid-template-columns:1fr} .op-agendar__previa{position:static;max-height:none} } /* Detalhe da publicação: o post primeiro, a prova recolhida --------------- */ .op-previa-post{display:grid;justify-items:center;margin:12px 0 16px} .produto-operacional .op-dialog h2.op-previa-titulo{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .op-prova{margin-top:14px;border:1px solid var(--exp-line);border-radius:12px} .op-prova>summary{display:flex;align-items:center;gap:8px;padding:10px 14px;color:var(--exp-muted);font-size:13px;cursor:pointer;list-style:none} .op-prova>summary::-webkit-details-marker{display:none} .op-prova>summary .op-prova__seta{margin:0 0 0 auto;transition:transform .15s} .op-prova[open]>summary .op-prova__seta{transform:rotate(180deg)} .op-prova[open]>summary{border-bottom:1px solid var(--exp-line);color:var(--exp-ink)} .op-prova .op-proof-grid{margin:0;border:0} /* Gráficos: onde há métrica, há linha ------------------------------------ */ .op-graficos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px;margin:16px 0} .op-graficos:empty{display:none} .op-grafico-bloco{min-width:0;padding:12px 14px 6px;border:1px solid var(--exp-line);border-radius:12px;background:var(--exp-paper)} .op-grafico-bloco__nome{display:block;margin-bottom:6px;color:var(--exp-muted);font-size:12px} /* Ajustes após a primeira foto do app integrado ------------------------- */ /* o chip da empresa vive no canto direito, entre a navegação e o sair */ .produto-operacional[data-op-tema] .op-sidebar .op-company-chip{grid-column:auto;grid-row:auto;justify-self:auto} /* avisos de estado legíveis nos dois temas */ body.produto-operacional[data-op-tema] .op-guard{border-radius:10px;background:transparent;border:1px solid var(--exp-line);border-left:3px solid #d05a4e} body.produto-operacional[data-op-tema] .op-guard strong{color:var(--exp-ink)} body.produto-operacional[data-op-tema] .op-guard p{color:var(--exp-muted)} body.produto-operacional[data-op-tema] .op-guard.sucesso{border-left-color:#3ab26e} body.produto-operacional[data-op-tema] .op-guard.sucesso strong{color:#3ab26e} body.produto-operacional[data-op-tema] .op-guard.neutra{border-left-color:var(--exp-accent)} body.produto-operacional[data-op-tema] .op-dialog__nota{background:transparent;border:1px solid var(--exp-line);border-radius:10px;color:var(--exp-muted)} body.produto-operacional[data-op-tema] .op-dialog__nota strong{color:var(--exp-ink)} /* O cartão de conexão de rede tem fundo claro FIXO (experiencia.css), que não acompanha o tema. No tema escuro `--exp-ink` é quase branco, e a nota sumia dentro do próprio cartão — "Só publica o que você aprovar." ficava invisível. Aqui a tinta volta a ser escura porque o papel, ali, é sempre claro. */ body.produto-operacional[data-op-tema] .op-network-fields .op-dialog__nota{color:#5b5f70;border-color:#dedee5} body.produto-operacional[data-op-tema] .op-network-fields .op-dialog__nota strong{color:#242635} /* celular: resumo do mês em linha e chip da empresa curto */ @media (max-width:720px){ .produto-operacional[data-op-tema] .op-month-summary{display:flex;flex-direction:row;flex-wrap:wrap;gap:14px} .produto-operacional[data-op-tema] .op-sidebar .op-company-chip{display:inline-flex;max-width:150px;padding:4px 8px} .produto-operacional[data-op-tema] .op-sidebar .op-company-chip i{display:none} .produto-operacional[data-op-tema] .op-sidebar .op-company-chip select{max-width:120px;font-size:12px} } @media (max-width:720px){ .produto-operacional[data-op-tema] .op-month-summary span{min-width:0;padding:10px 14px 10px 0} } /* Edição antes de sair: o lápis na Agenda; o diálogo é o da composição ---- */ .op-evento__editavel{display:inline-flex;color:var(--exp-muted)} .produto-operacional[data-op-tema] button.op-month-event:hover .op-evento__editavel,.produto-operacional[data-op-tema] button.op-month-event:focus-visible .op-evento__editavel{color:var(--exp-accent-text)} /* Sem a faixa de origens por cima, a grade encosta no título como na composição. */ .op-editar-x .op-dialog__grid,.op-revisar-ig .op-dialog__grid{margin-top:0} .op-revisar-ig>p{margin-bottom:4px} /* Texto e fio num só bloco, como no editor do X da composição. */ .produto-operacional .op-editar-x .op-x-editor{padding:12px;border:1px solid var(--exp-line);border-radius:12px} .produto-operacional .op-editar-x .op-fio:empty{display:none} .produto-operacional .op-editar-x .op-dialog__nota{margin-top:2px} /* Revisão do Instagram no desktop: a legenda cresce até a altura da prévia * (o reel 9:16 é alto), em vez de deixar a coluna do formulário acabar na * metade. As duas colunas se esticam; a legenda é a linha que sobra. */ @media (min-width:901px){ .op-revisar-ig .op-agendar{align-items:stretch} .op-revisar-ig .op-agendar__form{display:flex;flex-direction:column;min-height:0} .op-revisar-ig .op-agendar__form .op-dialog__grid{flex:1;grid-template-rows:auto minmax(0,1fr);align-content:stretch;margin-bottom:0} .produto-operacional .op-revisar-ig .op-caption-editor{grid-template-rows:auto minmax(0,1fr) auto;min-height:0} .produto-operacional .op-revisar-ig .op-caption-editor textarea{height:100%;min-height:150px;box-sizing:border-box} } /* Celular: o post do fio ocupa a linha inteira; contador e Remover descem. */ @media (max-width:720px){ .produto-operacional .op-editar-x .op-fio-item{grid-template-columns:1fr auto} .produto-operacional .op-editar-x .op-fio-item textarea{grid-column:1/-1} .produto-operacional .op-editar-x .op-fio-item b{padding-top:0;align-self:center} } /* ── Vídeo e Imagem: o grupo voltou, agora como menu ────────────────────── * * Os quatro destinos de criação moravam numa sub-barra embaixo da página, * sem nome que os reunisse e sem uma palavra sobre cada um: "Langris Clip" e * "Editor" não se explicam para quem chega. Agora são dois grupos na barra — * Vídeo e Imagem —, e cada entrada tem ícone, nome e uma linha do que faz. * * A BARRA É HORIZONTAL, no topo (`operacao-unificada.css` transforma a * `.op-sidebar` numa faixa `sticky` e o `nav` num flex em linha). Por isso o * menu DESCE do botão, como o "▾" promete — e não voa para o lado. * * Nada de `style=` inline em lugar nenhum: a CSP da casa é style-src 'self' * sem unsafe-inline. Quem abre e fecha é a classe `aberto` e o `hidden`. */ .produto-operacional[data-op-tema] .op-sidebar .op-grupo{position:relative;flex:none} .produto-operacional[data-op-tema] .op-sidebar nav .op-grupo__botao{width:100%} .produto-operacional[data-op-tema] .op-sidebar nav .op-grupo__seta{ display:inline-flex;align-items:center;margin-left:2px; color:var(--exp-muted);transition:transform .15s; } .produto-operacional[data-op-tema] .op-sidebar nav .op-grupo.aberto .op-grupo__seta{transform:rotate(180deg)} .produto-operacional[data-op-tema] .op-sidebar nav .op-grupo.aberto > .op-grupo__botao{ background:var(--surface-soft);color:var(--exp-ink); } /* O `nav` rola na horizontal quando os oito itens não cabem — e um contêiner * que rola RECORTA o que sai dele, inclusive para baixo. Enquanto um menu * está aberto ele para de recortar; fechado, volta a rolar como antes. */ .produto-operacional[data-op-tema] .op-sidebar nav:has(.op-grupo.aberto){overflow:visible} .produto-operacional[data-op-tema] .op-sidebar .op-grupo__menu{ position:absolute;top:calc(100% + 8px);left:0;z-index:60; width:340px;max-width:calc(100vw - 32px);padding:7px; border:1px solid var(--exp-line);border-radius:12px; background:var(--exp-surface); box-shadow:0 20px 48px rgba(0,0,0,.45); } .produto-operacional[data-op-tema] .op-sidebar .op-grupo__menu[hidden]{display:none} .produto-operacional[data-op-tema] .op-sidebar .op-grupo__menu:not([hidden]){display:grid;gap:3px} /* A entrada: ladrilho do ícone à esquerda, nome em cima, explicação embaixo. * `align-items:start` impede que o ícone deslize para o meio quando a linha * de explicação quebra em duas. `justify-items:start` (26/09/2026): no celular * o `place-items:center` de experiencia.css vazava para cá e cada entrada saía * com o texto centralizado, desalinhado da de cima (é grade, vale nos dois temas). */ .produto-operacional[data-op-tema] .op-sidebar nav .op-grupo__menu button{ display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;align-items:start;justify-items:start; /* `height:auto` desfaz os 38px fixos que a barra impõe a TODO botão do * `nav`: aqui a entrada tem duas linhas (nome e explicação) e precisa * crescer com o texto, senão a segunda linha escapa por baixo da caixa. */ width:100%;height:auto;min-height:0;padding:9px 10px;border:1px solid transparent;border-radius:9px; background:transparent;text-align:left; } .produto-operacional[data-op-tema] .op-sidebar nav .op-grupo__menu button > i{ display:grid;place-items:center;width:34px;height:34px; border:1px solid var(--exp-line);border-radius:8px; background:var(--surface-soft);color:var(--exp-muted);font-size:15px; } .produto-operacional[data-op-tema] .op-sidebar nav .op-grupo__menu button > span{display:grid;gap:2px;min-width:0} .produto-operacional[data-op-tema] .op-sidebar nav .op-grupo__menu button strong{ color:var(--exp-ink);font-size:14px;font-weight:600;line-height:1.25; } .produto-operacional[data-op-tema] .op-sidebar nav .op-grupo__menu button small{ color:var(--exp-muted);font-size:12px;font-weight:400;line-height:1.35;white-space:normal; } .produto-operacional[data-op-tema] .op-sidebar nav .op-grupo__menu button:hover, .produto-operacional[data-op-tema] .op-sidebar nav .op-grupo__menu button:focus-visible{ background:var(--surface-soft); } .produto-operacional[data-op-tema] .op-sidebar nav .op-grupo__menu button:hover > i, .produto-operacional[data-op-tema] .op-sidebar nav .op-grupo__menu button:focus-visible > i{color:var(--exp-ink)} /* A aba aberta fica marcada dentro do menu. */ .produto-operacional[data-op-tema] .op-sidebar nav .op-grupo__menu button.ativo{ background:var(--surface-soft);border-color:var(--exp-line); } .produto-operacional[data-op-tema] .op-sidebar nav .op-grupo__menu button.ativo strong{color:var(--exp-ink)} @media (max-width:720px){ /* Na tela estreita a barra continua no TOPO, só com ícones e rolando na * horizontal. Um menu de 340px pendurado no seu botão sairia pela direita, * então ele deixa de se ancorar no grupo e passa a se ancorar na barra * inteira: uma folha que atravessa a tela, logo abaixo dela. `position: * static` no grupo é o que empurra a âncora para a `.op-sidebar`. */ .produto-operacional[data-op-tema] .op-sidebar .op-grupo{position:static} .produto-operacional[data-op-tema] .op-sidebar .op-grupo__menu{ top:calc(100% - 4px);left:8px;right:8px;width:auto;max-width:none; } /* A barra esconde o nome dos itens de primeiro nível para caber só o ícone. * Dentro do menu o nome É o conteúdo: essa regra não pode alcançá-lo. */ .produto-operacional[data-op-tema] .op-sidebar nav .op-grupo__menu button:has(i:not(:empty))>span{ position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal; } .produto-operacional[data-op-tema] .op-sidebar nav .op-grupo__menu button{min-height:56px} } /* ── Agenda: conclusão (26/09/2026) ─────────────────────────────────────── * * Estados honestos no calendário (o rascunho não parece agendado, o adiado * diz a hora nova, o que não saiu diz que não saiu), o resumo com rótulo à * vista, o aviso da Agenda vazia no alto, a linha de estado do detalhe, a * caixa "Não saiu" escura no tema escuro, as mídias com miniatura no * "Agendar publicação" e, até 640px, a LISTA do dia no lugar da grade de 7 * colunas. Tudo por classe: a CSP da página não aceita atributo de estilo. * A media query do celular é a MESMA string de `CELULAR` em radar-pauta.js * e de operacao-radar-pauta.css — um teste cobra as três. operacao-cobalto.css * carrega depois: onde ele define a mesma propriedade, a regra daqui é mais * específica. */ /* O calendário: rascunho tracejado e apagado, adiado âmbar, rótulo escrito nos que pedem atenção. */ body.produto-operacional[data-op-tema] .op-month-event.rascunho{border-left-style:dashed;border-left-color:var(--exp-muted);background:transparent} body.produto-operacional[data-op-tema] .op-month-event.rascunho strong{color:var(--exp-muted)} body.produto-operacional[data-op-tema] .op-month-event.adiado{border-left-color:#d3a74f} body.produto-operacional[data-op-tema="claro"] .op-month-event.adiado{border-left-color:oklch(.5 .13 60)} .op-evento__estado--rascunho,.op-evento__estado--cancelada{color:var(--exp-muted)} body.produto-operacional[data-op-tema] .op-evento__rotulo{display:block;min-width:0;overflow:hidden;color:var(--exp-muted);font-size:11px;font-weight:500;line-height:1.2;white-space:nowrap;text-overflow:ellipsis} body.produto-operacional[data-op-tema] .op-month-event.erro .op-evento__rotulo{color:#d05a4e} body.produto-operacional[data-op-tema="claro"] .op-month-event.erro .op-evento__rotulo{color:oklch(.5 .2 25)} body.produto-operacional[data-op-tema] .op-month-event.adiado .op-evento__rotulo{color:#d3a74f} body.produto-operacional[data-op-tema="claro"] .op-month-event.adiado .op-evento__rotulo{color:oklch(.5 .13 60)} /* O selo do rascunho no detalhe: tracejado, sem cor de "vai sair". */ body.produto-operacional[data-op-tema] .op-status.rascunho{border:1px dashed var(--exp-line);background:transparent;color:var(--exp-muted)} /* O resumo do mês: "13 agendados · 5 publicados · 2 rascunhos · 3 com problema". */ body.produto-operacional[data-op-tema] .op-month-summary.op-resumo{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px} body.produto-operacional[data-op-tema] .op-month-summary.op-resumo .op-resumo__item{min-width:0;padding:12px 0;gap:6px;color:var(--exp-muted);font-size:13px;text-transform:none} body.produto-operacional[data-op-tema] .op-month-summary.op-resumo .op-resumo__item b{margin:0;color:var(--exp-ink)} body.produto-operacional[data-op-tema] .op-month-summary.op-resumo .op-resumo__item.alerta, body.produto-operacional[data-op-tema] .op-month-summary.op-resumo .op-resumo__item.alerta b{color:#d05a4e} body.produto-operacional[data-op-tema="claro"] .op-month-summary.op-resumo .op-resumo__item.alerta, body.produto-operacional[data-op-tema="claro"] .op-month-summary.op-resumo .op-resumo__item.alerta b{color:oklch(.5 .2 25)} body.produto-operacional[data-op-tema] .op-month-summary.op-resumo .op-resumo__sep{min-width:0;padding:0;color:var(--exp-muted)} /* A Agenda vazia: o aviso no ALTO do painel do mês, com o próximo passo. */ body.produto-operacional[data-op-tema] .op-agenda-vazia{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:16px 28px 0;padding:14px 16px;border:1px solid var(--exp-accent);border-radius:12px;background:var(--exp-accent-soft);color:var(--exp-ink)} body.produto-operacional[data-op-tema] .op-agenda-vazia strong{color:var(--exp-ink);font-size:15px;font-weight:600} body.produto-operacional[data-op-tema] .op-agenda-vazia p{flex:1 1 16em;margin:0;color:var(--exp-muted);font-size:13px;line-height:1.45} body.produto-operacional[data-op-tema] .op-agenda-vazia button{flex:none} /* A lista do dia existe sempre no HTML e só aparece no celular. */ .op-agenda-lista{display:none} body.produto-operacional[data-op-tema] .op-agenda-lista__secao h3{margin:0 0 8px;color:var(--exp-ink);font-size:15px;font-weight:600;letter-spacing:-.01em} body.produto-operacional[data-op-tema] .op-agenda-lista__secao h4{margin:12px 0 6px;color:var(--exp-muted);font-size:12px;font-weight:600} body.produto-operacional[data-op-tema] .op-agenda-lista__secao--problema h3{color:#d05a4e} body.produto-operacional[data-op-tema="claro"] .op-agenda-lista__secao--problema h3{color:oklch(.5 .2 25)} .op-agenda-lista__itens{display:grid;gap:6px} body.produto-operacional[data-op-tema] .op-agenda-linha{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:10px;width:100%;min-width:0;min-height:52px;margin:0;padding:8px 10px;border:1px solid var(--exp-line);border-left:3px solid var(--exp-accent);border-radius:10px;background:var(--exp-surface);color:var(--exp-ink);font:inherit;text-align:left;cursor:pointer} body.produto-operacional[data-op-tema] div.op-agenda-linha{cursor:default} body.produto-operacional[data-op-tema] button.op-agenda-linha:hover,body.produto-operacional[data-op-tema] button.op-agenda-linha:focus-visible{background:var(--surface-soft)} body.produto-operacional[data-op-tema] .op-agenda-linha time{color:var(--exp-muted);font-size:13px;font-variant-numeric:tabular-nums} .op-agenda-linha .pv-avatar{flex:none} .op-agenda-linha__corpo{display:grid;gap:2px;min-width:0} body.produto-operacional[data-op-tema] .op-agenda-linha__estado{color:var(--exp-muted);font-size:11px;font-weight:600} body.produto-operacional[data-op-tema] .op-agenda-linha__texto{overflow:hidden;color:var(--exp-ink);font-size:13px;line-height:1.3;white-space:nowrap;text-overflow:ellipsis} body.produto-operacional[data-op-tema] .op-agenda-linha--ok{border-left-color:#3ab26e} body.produto-operacional[data-op-tema] .op-agenda-linha--ativo{border-left-color:#d3a74f} body.produto-operacional[data-op-tema] .op-agenda-linha--erro{border-left-color:#d05a4e} body.produto-operacional[data-op-tema] .op-agenda-linha--erro .op-agenda-linha__estado{color:#d05a4e} body.produto-operacional[data-op-tema] .op-agenda-linha--rascunho{border-left-style:dashed;border-left-color:var(--exp-muted)} body.produto-operacional[data-op-tema="claro"] .op-agenda-linha--erro{border-left-color:oklch(.5 .2 25)} body.produto-operacional[data-op-tema="claro"] .op-agenda-linha--erro .op-agenda-linha__estado{color:oklch(.5 .2 25)} body.produto-operacional[data-op-tema="claro"] .op-agenda-linha--ok{border-left-color:oklch(.45 .13 150)} body.produto-operacional[data-op-tema] .op-agenda-lista__vazio{margin:0;color:var(--exp-muted);font-size:13px} body.produto-operacional[data-op-tema] .op-agenda-lista__agendar{margin-top:8px} @media (max-width: 640px) { /* A grade de 7 colunas (e os dias da semana, que moram nela) some; a lista toma o lugar. */ body.produto-operacional .op-month-panel .op-month-scroll{display:none} body.produto-operacional .op-month-panel .op-agenda-lista{display:grid;gap:18px;padding:14px 16px 18px} body.produto-operacional[data-op-tema] .op-month-panel .op-month-toolbar{padding:18px 16px 14px} body.produto-operacional[data-op-tema] .op-month-summary.op-resumo{padding:0 16px} body.produto-operacional[data-op-tema] .op-agenda-vazia{margin:14px 16px 0} body.produto-operacional[data-op-tema] .op-agenda-vazia button{width:100%} /* O detalhe a 390px: o selo e a hora quebram linha em vez de cobrir o nome. */ body.produto-operacional[data-op-tema] .op-publication-state{flex-wrap:wrap} } /* A linha de estado do detalhe: o selo UMA vez e, ao lado, a hora em português. */ body.produto-operacional[data-op-tema] .op-publication-state{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:14px 0 6px} body.produto-operacional[data-op-tema] .op-publication-state .op-publication-state__quando{color:var(--exp-ink);font-size:14px;font-weight:600} body.produto-operacional[data-op-tema] .op-publication-motivo{margin:0 0 14px;color:var(--exp-muted);font-size:13px;line-height:1.45} body.produto-operacional[data-op-tema] .op-publication-state+.op-guard,body.produto-operacional[data-op-tema] .op-publication-state+.op-publication-error{margin-top:12px} .op-reagendar__aviso{margin:4px 0 0;color:var(--exp-muted);font-size:13px;line-height:1.5} .pv-x__conf--nao-saiu{color:#d05a4e} /* "Não saiu": a caixa de erro ESCURA no diálogo escuro (a clara de experiencia.css passava por cima da versão escura). No claro, continua clara. */ body.produto-operacional[data-op-tema="escuro"] .op-publication-error{border:1px solid #7a3b35;border-radius:10px;background:#2a1614;color:#f3c1b9} body.produto-operacional[data-op-tema="escuro"] .op-publication-error p{color:#e6b0a8} body.produto-operacional[data-op-tema="escuro"] .op-publication-error strong{color:#ff9e92} body.produto-operacional[data-op-tema] .op-publication-error{margin-top:14px;padding:12px 14px;border-radius:10px} body.produto-operacional[data-op-tema] .op-publication-error strong{display:block;font-size:13px} body.produto-operacional[data-op-tema] .op-publication-error p{margin:4px 0 0;font-size:13px;line-height:1.5} /* "Agendar publicação": cada mídia com miniatura e nome, num grupo de rádio. */ body.produto-operacional[data-op-tema] .op-agendar__midias{min-width:0;margin:0;padding:10px 12px 12px;border:1px solid var(--exp-line);border-radius:12px} body.produto-operacional[data-op-tema] .op-agendar__midias legend{display:flex;align-items:center;gap:6px;padding:0 6px;color:var(--exp-muted);font-size:12px;letter-spacing:.06em;text-transform:uppercase} .op-midias{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;max-height:252px;overflow:auto;overscroll-behavior:contain} body.produto-operacional[data-op-tema] .op-midias .op-midia{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);align-items:center;gap:10px;min-width:0;margin:0;padding:6px;border:1px solid var(--exp-line);border-radius:10px;background:transparent;color:var(--exp-ink);text-transform:none;letter-spacing:0;cursor:pointer} body.produto-operacional[data-op-tema] .op-midias .op-midia input[type="radio"]{position:absolute;width:1px;height:1px;min-height:0;margin:0;padding:0;border:0;opacity:0} body.produto-operacional[data-op-tema] .op-midias .op-midia:has(input:checked){border-color:var(--exp-accent);background:var(--exp-accent-soft)} body.produto-operacional[data-op-tema] .op-midias .op-midia:has(input:focus-visible){outline:2px solid var(--exp-accent);outline-offset:2px} .op-midia__miniatura{display:grid;place-items:center;width:56px;height:56px;overflow:hidden;border-radius:8px;background:var(--surface-soft);color:var(--exp-muted)} .op-midia__miniatura img{display:block;width:100%;height:100%;object-fit:cover} .op-midia__miniatura--video{align-content:center;gap:2px} .op-midia__miniatura--video small{font-size:11px;font-variant-numeric:tabular-nums} .op-midia__texto{display:grid;gap:2px;min-width:0} body.produto-operacional[data-op-tema] .op-midia__texto strong{overflow:hidden;color:var(--exp-ink);font-size:13px;font-weight:600;white-space:nowrap;text-overflow:ellipsis} body.produto-operacional[data-op-tema] .op-midia__texto small{color:var(--exp-muted);font-size:12px} body.produto-operacional[data-op-tema] .op-agendar__aviso{margin:8px 0 0;color:#d05a4e;font-size:13px;line-height:1.45} body.produto-operacional[data-op-tema="claro"] .op-agendar__aviso{color:oklch(.5 .2 25)} .op-agendar__aviso[hidden]{display:none} .op-agendar__sem-midia{display:grid;gap:8px} .op-agendar__caminhos{display:flex;flex-wrap:wrap;gap:8px} /* O selo da linha de estado no diálogo escuro: escuro também (o claro de experiencia.css passava por cima). */ body.produto-operacional[data-op-tema="escuro"] .op-publication-state .op-status{border:1px solid #3a3f4d;background:#1a1d26;color:#c9cdd8} body.produto-operacional[data-op-tema="escuro"] .op-publication-state .op-status.ok{border-color:#2f5e43;background:#12261b;color:#8fd9ad} body.produto-operacional[data-op-tema="escuro"] .op-publication-state .op-status.erro{border-color:#7a3b35;background:#2a1614;color:#ff9e92} body.produto-operacional[data-op-tema="escuro"] .op-publication-state .op-status.espera{border-color:#6b5426;background:#241c0c;color:#f0c46e} body.produto-operacional[data-op-tema="escuro"] .op-publication-state .op-status.ativo{border-color:#4b3f7a;background:#1b1730;color:#c3b6ff} body.produto-operacional[data-op-tema="escuro"] .op-publication-state .op-status.rascunho{border:1px dashed #4a4f5e;background:transparent;color:#a9aebb} @media (max-width: 640px) { /* O resumo no celular: sem o ponto separador solto no começo da linha, e mais junto. */ body.produto-operacional[data-op-tema] .op-month-summary.op-resumo{gap:0 16px;padding-top:6px;padding-bottom:6px} body.produto-operacional[data-op-tema] .op-month-summary.op-resumo .op-resumo__item{padding:6px 0} body.produto-operacional[data-op-tema] .op-month-summary.op-resumo .op-resumo__sep{display:none} } /* Agenda: conclusão, volta 2 — o "Já reagendado" do detalhe não cola na caixa do "Não saiu". */ body.produto-operacional[data-op-tema] .op-publication-detail .op-publication-reagendado{margin-top:10px} /* Pele Pulso — casca (rebranding de 26/09/2026, pedido do dono: "fazer o rebranding em todas as abas, pra se * adaptar às novas fontes e cores"). As classes COMPARTILHADAS vestem a identidade do Início (css/inicio-pulso.css) * com os tokens --lg-* de operacao-unificada.css. Só no escuro: toda regra começa pelo prefixo * body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) (0,3,1), que vence o acabamento cobalto * (operacao-cobalto.css, 0,2,1 + classe) sem editá-lo; o claro fica como estava. * Posse: aqui só classe compartilhada e com o menor peso possível (prefixo + uma classe). As abas qualificam pelo * contêiner (.rp-lateral, .op-voce, .clip[data-clip]…) e vencem estas receitas. As exclusões vão em :where() * (peso zero): o protótipo aprovado do Vídeo (.op-video) guarda o cabeçalho, os links discretos e os raios dele; * o CTA em degradê de Criar vídeo (.cv-cta) não vira pílula limão. */ /* 1. Barra: fundo da página, um fio só, ativo em tinta com ícone limão e o sublinhado do protótipo. */ body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-sidebar {background:var(--lg-fundo);border-bottom-color:var(--lg-linha);box-shadow:none} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-sidebar nav > button, body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-sidebar nav > .op-grupo > .op-grupo__botao {color:var(--lg-apoio)} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-sidebar nav > button > i, body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-sidebar nav > .op-grupo > .op-grupo__botao > i, body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-sidebar nav .op-grupo__seta {color:inherit} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-sidebar nav > button:is(:hover,:focus-visible), body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-sidebar nav > .op-grupo > .op-grupo__botao:is(:hover,:focus-visible) {border-color:transparent;background:transparent;color:var(--lg-tinta);box-shadow:none} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-sidebar nav > button.ativo, body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-sidebar nav > .op-grupo > .op-grupo__botao.ativo {position:relative;border-color:transparent;background:transparent;color:var(--lg-tinta);box-shadow:none} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-sidebar nav > button.ativo > i, body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-sidebar nav > .op-grupo > .op-grupo__botao.ativo > i {color:var(--lg-limao)} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-sidebar nav > button.ativo::after, body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-sidebar nav > .op-grupo > .op-grupo__botao.ativo::after {content:'';display:block;position:absolute;inset:auto 12px 0;width:auto;height:2px;border-radius:2px;background:var(--lg-sublinhado);box-shadow:0 0 14px color-mix(in srgb,var(--lg-rosa) 50%,transparent);opacity:1;transform:none;pointer-events:none} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-sidebar nav > .op-grupo.aberto > .op-grupo__botao {background:var(--lg-realce);color:var(--lg-tinta)} /* O nav rola na horizontal e recorta o anel que passa da altura dele: no item, o anel limão vai para dentro. */ body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-sidebar nav > button:focus-visible, body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-sidebar nav > .op-grupo > .op-grupo__botao:focus-visible {outline-offset:-3px} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-sidebar .op-company-chip {border-color:var(--lg-linha);border-radius:11px;background:var(--lg-trilho)} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-sidebar #op-sair {flex:none;border-color:var(--lg-linha);color:var(--lg-apoio)} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-sidebar #op-sair:hover {color:var(--lg-tinta)} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-founder-link {color:var(--lg-limao)} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-founder-link:hover {background:var(--lg-realce);color:var(--lg-limao-hover)} /* Celular: o Sair virou o círculo de 40px e, com o seletor de empresa e o «Fundador», a ponta da barra passava da * borda (página com 391px a 390 e o círculo cortado). Até 700px o «Fundador» fica só com o escudo, no mesmo círculo * de 40px do Sair; o nome continua no link para leitor de tela (recorte visual) e no title. Quem não vê o link não * muda nada. */ @media (max-width:700px) { body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-sidebar .op-founder-link {position:relative;flex:none;justify-content:center;width:40px;max-width:none;height:40px;padding:0;border-radius:50%} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-sidebar .op-founder-link > span {position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} } /* 2. Menus Vídeo e Imagem: caixa de diálogo, ladrilho do ícone pela cor do papel (data-aba), a entrada aberta em limão. */ body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-sidebar .op-grupo__menu {border-color:var(--lg-linha);border-radius:18px;background:var(--lg-dialogo);box-shadow:var(--lg-sombra-menu)} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-sidebar nav .op-grupo__menu button {border-radius:var(--lg-raio-botao)} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-sidebar nav .op-grupo__menu button > i {border-color:var(--lg-linha);border-radius:10px;background:var(--lg-trilho);color:var(--lg-tinta-2)} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-sidebar nav .op-grupo__menu button strong {color:var(--lg-tinta);font-weight:620} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-sidebar nav .op-grupo__menu button small {color:var(--lg-apoio)} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-sidebar nav .op-grupo__menu button:is(:hover,:focus-visible) {background:var(--lg-realce)} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-sidebar nav .op-grupo__menu button:is(:hover,:focus-visible) > i {color:var(--lg-tinta)} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-sidebar nav .op-grupo__menu button[data-aba="studio"] > i {border-color:color-mix(in srgb,var(--lg-rosa) 33%,transparent);background:color-mix(in srgb,var(--lg-rosa) 7%,transparent);color:var(--lg-rosa)} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-sidebar nav .op-grupo__menu button[data-aba="editor"] > i {border-color:color-mix(in srgb,var(--lg-amarelo) 33%,transparent);background:color-mix(in srgb,var(--lg-amarelo) 7%,transparent);color:var(--lg-amarelo)} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-sidebar nav .op-grupo__menu button[data-aba="montagem-ia"] > i {border-color:color-mix(in srgb,var(--lg-limao) 33%,transparent);background:color-mix(in srgb,var(--lg-limao) 7%,transparent);color:var(--lg-limao)} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-sidebar nav .op-grupo__menu button[data-aba="montagem"] > i {border-color:color-mix(in srgb,var(--lg-violeta) 33%,transparent);background:color-mix(in srgb,var(--lg-violeta) 7%,transparent);color:var(--lg-violeta-texto)} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-sidebar nav .op-grupo__menu button.ativo {border-color:transparent;background:color-mix(in srgb,var(--lg-limao) 5%,transparent)} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-sidebar nav .op-grupo__menu button.ativo > i {border-color:color-mix(in srgb,var(--lg-limao) 33%,transparent);background:color-mix(in srgb,var(--lg-limao) 7%,transparent);color:var(--lg-limao)} /* 3. Cabeçalho (.op-head, um construtor só em operacao.js): título na escala do Início, sem palavra em degradê * (só o Início tem). Ação alinhada pela base; no celular tudo à esquerda. O Vídeo segue o protótipo dele. */ body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-head:where(:not(.op-video *)) {align-items:flex-end} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-head:where(:not(.op-video *)) h1 {font-family:var(--lg-fonte);font-size:var(--lg-titulo-tela);font-weight:var(--lg-titulo-peso);line-height:var(--lg-titulo-altura);letter-spacing:var(--lg-titulo-tracking);color:var(--lg-tinta)} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-head:where(:not(.op-video *)) > div > p {max-width:64ch;color:var(--lg-subtitulo);font-size:15px;line-height:1.45} @media (max-width:1250px) { body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-head:where(:not(.op-video *)) > div > p {font-size:14px} } @media (max-width:720px) { body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-head:where(:not(.op-video *)) {align-items:stretch} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-head:where(:not(.op-video *)) .op-head__actions {justify-content:flex-start} } /* 4. Botões. Principal: pílula limão com tinta escura (nunca branco). Secundário: contorno, raio 12. Ícone: círculo * de 40px. Link: limão sublinhado, sem caixa alta nem monoespaçada. O hover do principal pesa (0,6,1), acima do * hover cobalto (0,5,1). Os botões do Clip têm regra própria mais pesada e ficam com ela. */ body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :is(.op-primary,.op-btn-primary):where(:not(.cv-cta)), body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-network-fields .op-primary {border-color:var(--lg-limao);border-radius:var(--lg-raio-pilula);background:var(--lg-limao);color:var(--lg-sobre-limao);font-weight:700;letter-spacing:-.01em;box-shadow:var(--lg-brilho-limao)} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :is(.op-primary,.op-btn-primary):where(:not(.cv-cta)):hover:not(:disabled) {border-color:var(--lg-limao-hover);background:var(--lg-limao-hover);color:var(--lg-sobre-limao)} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :is(.op-outline,.op-upload) {border-color:var(--lg-linha-forte);background:transparent;color:var(--lg-tinta-2);box-shadow:none} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :is(.op-outline,.op-upload):where(:not(.op-video *)) {border-radius:var(--lg-raio-botao)} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :is(.op-outline,.op-upload):hover:not(:disabled) {border-color:var(--lg-linha-forte);background:var(--lg-realce);color:var(--lg-tinta)} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-botao-icone {width:40px;height:40px;border:1px solid var(--lg-linha);border-radius:50%;background:var(--lg-realce);color:var(--lg-apoio)} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-botao-icone:hover:not(:disabled) {border-color:var(--lg-linha-forte);background:var(--lg-realce-2);color:var(--lg-tinta)} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-library-more {border-color:var(--lg-linha);border-radius:var(--lg-raio-item);background:transparent;color:var(--lg-apoio)} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-library-more:hover {border-color:var(--lg-linha-forte);background:var(--lg-realce);color:var(--lg-tinta)} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-link:where(:not(.op-video *)) {color:var(--lg-limao);font:650 13px/1.4 var(--lg-fonte);letter-spacing:0;text-transform:none;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-link:where(:not(.op-video *)):hover {color:var(--lg-limao-hover)} /* 5. Abas internas (Empresa, Resultados): o seletor segmentado do Início, trilho em pílula e ativo em pílula clara. */ body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :is(.op-subnav,.op-radar-tabs) {width:fit-content;max-width:100%;gap:4px;padding:4px;border:1px solid var(--lg-linha);border-radius:var(--lg-raio-pilula);background:var(--lg-trilho)} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :is(.op-subnav,.op-radar-tabs) button {height:32px;min-height:32px;padding:0 14px;border-color:transparent;border-radius:var(--lg-raio-pilula);background:transparent;color:var(--lg-apoio);font-size:13px;font-weight:650;line-height:1;box-shadow:none} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :is(.op-subnav,.op-radar-tabs) button:hover {background:transparent;color:var(--lg-tinta)} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :is(.op-subnav,.op-radar-tabs) button.ativo {border-color:transparent;background:var(--lg-pilula-ativa);color:var(--lg-sobre-pilula);box-shadow:none} /* O trilho rola na horizontal e recorta o que passa do recheio de 4px: o anel limão fica a 1px, dentro dele. */ body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :is(.op-subnav,.op-radar-tabs) button:focus-visible {outline-offset:1px} /* 6. Superfícies: a mesma lista de operacao-cobalto.css, como coluna do Início. Um contorno por nível: uma * superfície dentro de outra vira cartão (linha suave), não caixa dentro de caixa. */ body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :is( .op-panel, .op-stat, .op-agenda, .op-company-context, .op-company-context-intro, .op-radar-intro, .op-radar-new, .op-radar-count, .op-studio-storage, .op-studio-accounts, .op-social-account, .op-network-card, .op-network-fields, .op-networks, .op-instagram-profissional, .op-social-slot, .op-social-network, .op-demography-card, .op-demography-hero, .op-demography-pending, .op-pub-account-hero, .op-pub-kpis, .op-pub-observed, .op-voce__cartao, .op-grafico-bloco ) {border-color:var(--lg-linha);border-radius:var(--lg-raio-secao);background:var(--lg-coluna);box-shadow:none} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :where( .op-panel, .op-stat, .op-agenda, .op-company-context, .op-company-context-intro, .op-radar-intro, .op-radar-new, .op-radar-count, .op-studio-storage, .op-studio-accounts, .op-social-account, .op-network-card, .op-network-fields, .op-networks, .op-instagram-profissional, .op-social-slot, .op-social-network, .op-demography-card, .op-demography-hero, .op-demography-pending, .op-pub-account-hero, .op-pub-kpis, .op-pub-observed, .op-voce__cartao, .op-grafico-bloco ) :is( .op-panel, .op-stat, .op-agenda, .op-company-context, .op-company-context-intro, .op-radar-intro, .op-radar-new, .op-radar-count, .op-studio-storage, .op-studio-accounts, .op-social-account, .op-network-card, .op-network-fields, .op-networks, .op-instagram-profissional, .op-social-slot, .op-social-network, .op-demography-card, .op-demography-hero, .op-demography-pending, .op-pub-account-hero, .op-pub-kpis, .op-pub-observed, .op-voce__cartao, .op-grafico-bloco ) {border-color:var(--lg-linha-suave);border-radius:var(--lg-raio-cartao);background:var(--lg-cartao)} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :is(.op-section-title h2,.op-panel > h2,.op-panel > h3) {font-family:var(--lg-fonte);font-size:var(--lg-titulo-secao);font-weight:640;letter-spacing:-.01em;color:var(--lg-tinta)} /* 7. Rótulo de seção: kicker do Início em --lg-apoio com o ponto limão de 7px (sem contador: exigiria dado). */ body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :is(.op-kicker,.op-section-title span) {color:var(--lg-apoio);font-family:var(--lg-fonte);font-size:var(--lg-kicker);font-weight:var(--lg-kicker-peso);letter-spacing:var(--lg-kicker-tracking)} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :is(.op-kicker,.op-section-title > div > span)::before {content:'';display:inline-block;width:7px;height:7px;margin:0 8px 0 0;border-radius:50%;background:var(--lg-limao);box-shadow:0 0 10px var(--lg-limao);vertical-align:1px} /* 8. Selos: pílula de 11px; as variantes no tingido do Início (33% na borda, 7% no fundo). Sobre a miniatura da * publicação o selo ganha o vidro, para o texto não ficar sobre a imagem crua. */ body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :is(.op-status,.etiqueta) {padding:2px 8px;border-color:var(--lg-linha-selo);border-radius:var(--lg-raio-pilula);background:transparent;color:var(--lg-tinta-2);font:650 11px/1.3 var(--lg-fonte);letter-spacing:.02em} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :is(.op-status.ok,.etiqueta--publicado) {border-color:color-mix(in srgb,var(--lg-limao) 33%,transparent);background:color-mix(in srgb,var(--lg-limao) 7%,transparent);color:var(--lg-limao)} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :is(.op-status.ativo,.etiqueta--agendado,.etiqueta--enviando,.etiqueta--servico) {border-color:color-mix(in srgb,var(--lg-violeta) 33%,transparent);background:color-mix(in srgb,var(--lg-violeta) 7%,transparent);color:var(--lg-violeta-texto)} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :is(.op-status.espera,.etiqueta--aprovacao,.etiqueta--atencao) {border-color:color-mix(in srgb,var(--lg-ambar) 33%,transparent);background:color-mix(in srgb,var(--lg-ambar) 7%,transparent);color:var(--lg-ambar)} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :is(.op-status.erro,.etiqueta--falhou) {border-color:color-mix(in srgb,var(--lg-erro) 33%,transparent);background:color-mix(in srgb,var(--lg-erro) 7%,transparent);color:var(--lg-erro-texto)} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-pub-tile__media > .op-status {background-color:var(--lg-vidro);backdrop-filter:blur(12px)} /* 9. Avisos: sem o filete de 3px; contorno fino, raio 14 e o ponto na cor do estado (erro, sucesso, neutra). */ body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :is(.op-guard,.op-notice,.op-dialog__notice) {position:relative;padding-left:36px;border:1px solid var(--lg-linha);border-radius:var(--lg-raio-item);background:var(--lg-realce)} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :is(.op-guard,.op-notice,.op-dialog__notice)::before {content:'';position:absolute;top:calc(14px + .5lh - 4px);left:16px;width:8px;height:8px;border-radius:50%;background:var(--lg-erro);box-shadow:0 0 10px var(--lg-erro)} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-guard.sucesso::before {background:var(--lg-limao);box-shadow:0 0 10px var(--lg-limao)} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) :is(.op-guard.neutra,.op-notice,.op-dialog__notice)::before {background:var(--lg-apoio);box-shadow:none} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-guard strong {color:var(--lg-tinta)} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-guard p {color:var(--lg-apoio)} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-dialog__nota {border-color:var(--lg-linha);border-radius:var(--lg-raio-item);background:var(--lg-realce);color:var(--lg-apoio)} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-dialog__nota strong {color:var(--lg-tinta)} /* 10. Vazio: tracejado do Início; o de erro no par rosado. */ body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-empty {border:1px dashed var(--lg-linha-vazia);border-radius:var(--lg-raio-cartao);background:var(--lg-vazio-fundo);color:var(--lg-apoio)} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-empty strong {color:var(--lg-tinta)} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-empty.op-empty--erro {border-style:solid;border-color:color-mix(in srgb,var(--lg-erro) 33%,transparent);background:color-mix(in srgb,var(--lg-erro) 7%,transparent);color:var(--lg-erro-texto)} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-empty.op-empty--erro :is(strong,small) {color:var(--lg-erro-texto)} /* 11. Diálogos (L.ui.modal pendura .modal no ; o `>` deixa de fora o do Início): * caixa do Início, véu preto com desfoque, kicker limão sem ponto e o fechar redondo de 40px. As prévias pv-* ficam * de fora; o título longo do detalhe da publicação (.op-previa-titulo) mantém os 16px com reticências. */ body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) > .modal {background:var(--lg-veu);backdrop-filter:blur(8px)} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .modal__caixa {border-color:var(--lg-linha-dialogo);border-radius:var(--lg-raio-dialogo);background:var(--lg-dialogo);box-shadow:var(--lg-sombra-dialogo);color:var(--lg-tinta)} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-dialog > h2:where(:not(.op-previa-titulo)) {font-family:var(--lg-fonte);font-size:var(--lg-titulo-dialogo);font-weight:640;line-height:1.1;letter-spacing:-.04em;color:var(--lg-tinta)} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-dialog > h2.op-previa-titulo {font-weight:640;letter-spacing:-.01em;color:var(--lg-tinta)} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-dialog > .op-kicker {color:var(--lg-limao);letter-spacing:.15em} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-dialog > .op-kicker::before {content:none} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-dialog__x {width:40px;height:40px;border:1px solid var(--lg-linha);border-radius:50%;background:var(--lg-realce);color:var(--lg-tinta);font-size:22px;line-height:1} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-dialog__x:hover {border-color:var(--lg-linha-forte);background:var(--lg-realce-2)} @media (max-width:640px) { body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .modal__caixa {border-radius:20px} } /* 12. Aviso rápido: o toast do Início. */ body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-toast {border:1px solid var(--lg-linha-selo);border-radius:var(--lg-raio-botao);background:var(--lg-aviso-fundo);color:var(--lg-tinta);font-size:13px;box-shadow:var(--lg-sombra-aviso)} body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-toast.erro {border-color:color-mix(in srgb,var(--lg-erro) 33%,transparent);color:var(--lg-erro-texto)} /* 13. Campos genéricos: raio 10 e o preenchimento do Início. O contorno continua o de campo (--line-strong, #777, * 4,2:1), do trabalho de contraste. Caixa de seleção e rádio em limão. Os protótipos (Vídeo, Clip, Gerar com IA) * e as telas de entrada ficam de fora. O seletor de empresa da barra também: o chip carrega .op-workspace-bar e o