/* ==========================================================================
   ÁREA DO CLIENTE · MAYALLE FERNANDES
   Identidade: Manual de Marca 2026 (mesma base da landing page)
   · Petróleo = campo da marca (menu, login, destaques)
   · Alabaster = tela de leitura
   · Champagne só sobre petróleo/grafite; em fundo claro, Ouro Tinta
   · Sem gradientes, sem sombras decorativas. Cards 14px, pílulas 9999px.
   ========================================================================== */
:root {
  --mf-css: 26;
  --petroleo: #2A4850;
  --petroleo-profundo: #223B42;
  --petroleo-claro: #E6ECED;
  --champagne: #DDBF9B;
  --champagne-claro: #E8D2B6;
  --alabaster: #F4F4F2;
  --grafite: #202126;
  --ouro-tinta: #7A5D39;
  --ouro-fundo: #F3ECE2;
  --texto-suave: #4E5058;
  --no-petroleo-suave: #C9D2D4;
  --marcador: #6A6C73;
  --erro: #8A2A2A;
  --erro-fundo: #F6E9E9;
  --branco: #FFFFFF;

  --linha: rgba(32, 33, 38, 0.12);
  --linha-forte: rgba(32, 33, 38, 0.28);
  --linha-escuro: rgba(244, 244, 242, 0.16);
  --linha-escuro-forte: rgba(244, 244, 242, 0.5);

  --fonte-titulo: 'Cormorant Unicase', 'Cormorant Garamond', Georgia, serif;
  --fonte-texto: 'Area Normal', 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --raio-card: 14px;
  --raio-campo: 10px;
  --raio-pilula: 9999px;
  --lateral: 264px;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--alabaster);
  color: var(--grafite);
  font-family: var(--fonte-texto);
  font-size: 15.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ouro-tinta); outline-offset: 2px; border-radius: 4px; }
.escuro :focus-visible { outline-color: var(--champagne); }
::selection { background: var(--champagne); color: var(--grafite); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ic-cheio { fill: currentColor; stroke: none; }
.ic-sm { width: 15px; height: 15px; }
.ic-lg { width: 24px; height: 24px; }

/* ---------- Tipografia ---------- */
.rotulo { display: inline-block; font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ouro-tinta); line-height: 1.4; }
.escuro .rotulo { color: var(--champagne); }
.titulo { font-family: var(--fonte-titulo); font-weight: 600; color: var(--petroleo); line-height: 1.08; letter-spacing: .005em; }
.escuro .titulo { color: var(--alabaster); }
.t-xl { font-size: clamp(30px, 3.4vw, 42px); }
.t-lg { font-size: 26px; }
.t-md { font-size: 21px; }
.suave { color: var(--texto-suave); }
.pequeno { font-size: 13.5px; }
.filete::after { content: ""; display: block; width: 48px; height: 2px; background: var(--ouro-tinta); margin-top: 16px; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 22px;
  border-radius: var(--raio-pilula); border: 1.5px solid transparent;
  font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; background: none; white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primario { background: var(--petroleo); border-color: var(--petroleo); color: var(--alabaster); }
.btn-primario:hover:not(:disabled) { background: var(--petroleo-profundo); border-color: var(--petroleo-profundo); }
.escuro .btn-primario { background: var(--champagne); border-color: var(--champagne); color: var(--grafite); }
.escuro .btn-primario:hover:not(:disabled) { background: var(--champagne-claro); border-color: var(--champagne-claro); }
.btn-linha { color: var(--petroleo); border-color: var(--petroleo); }
.btn-linha:hover:not(:disabled) { background: var(--petroleo-claro); }
.escuro .btn-linha { color: var(--alabaster); border-color: var(--linha-escuro-forte); }
.escuro .btn-linha:hover:not(:disabled) { border-color: var(--champagne); color: var(--champagne); background: transparent; }
.btn-perigo { color: var(--erro); border-color: rgba(138, 42, 42, .45); }
.btn-perigo:hover:not(:disabled) { background: var(--erro-fundo); }
.btn-sm { min-height: 36px; padding: 6px 14px; font-size: 11.5px; letter-spacing: .1em; }
.btn-bloco { width: 100%; }
.btn-texto { background: none; border: 0; padding: 6px 2px; color: var(--petroleo); font-weight: 600; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--linha-forte); display: inline-flex; align-items: center; gap: 6px; }
.btn-texto:hover { text-decoration-color: currentColor; }
.btn-icone { width: 38px; height: 38px; display: inline-grid; place-items: center; border-radius: 50%; border: 1px solid var(--linha); background: var(--branco); color: var(--petroleo); flex: none; }
.btn-icone:hover { border-color: var(--petroleo); }
.btn-icone.perigo { color: var(--erro); }

/* ---------- Selos de status (sempre com texto) ---------- */
.selo { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--raio-pilula); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; white-space: nowrap; border: 1px solid transparent; }
.selo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.selo-ok { background: var(--petroleo-claro); color: var(--petroleo); }
.selo-espera { background: var(--ouro-fundo); color: var(--ouro-tinta); }
.selo-alerta { background: var(--erro-fundo); color: var(--erro); }
.selo-neutro { background: transparent; color: var(--texto-suave); border-color: var(--linha-forte); }
.escuro .selo-ok { background: rgba(244,244,242,.12); color: var(--alabaster); }

/* ---------- Campos ---------- */
.campo { display: grid; gap: 7px; }
.campo > label, .campo .legenda { font-size: 13.5px; font-weight: 600; color: var(--grafite); }
.campo .ajuda { font-size: 12.5px; color: var(--texto-suave); font-weight: 400; }
.entrada, .campo input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .campo select, .campo textarea {
  width: 100%; min-height: 46px; padding: 11px 15px;
  background: var(--branco); color: var(--grafite);
  border: 1px solid var(--linha-forte); border-radius: var(--raio-campo);
  font-size: 15px; transition: border-color .2s;
}
.campo textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.campo select { -webkit-appearance: none; appearance: none; padding-right: 42px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A4850' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--marcador); }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { outline: 2px solid var(--petroleo); outline-offset: 0; border-color: var(--petroleo); }
.campo-senha { position: relative; }
.campo-senha input { padding-right: 48px !important; }
.campo-senha button { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: none; color: var(--texto-suave); border-radius: 8px; }
.grade-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grade-campos .inteiro { grid-column: 1 / -1; }
.grade-campos.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .grade-campos, .grade-campos.tres { grid-template-columns: 1fr; } }
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.check { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--linha-forte); border-radius: var(--raio-pilula); font-size: 13.5px; cursor: pointer; user-select: none; background: var(--branco); }
.check input { accent-color: var(--petroleo); width: 16px; height: 16px; margin: 0; }
.check:has(input:checked) { border-color: var(--petroleo); background: var(--petroleo-claro); color: var(--petroleo); font-weight: 600; }
.acoes-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 20px; }

/* ==========================================================================
   TELAS DE ENTRADA (login e carregando)
   ========================================================================== */
.entrada-tela { min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: 1.05fr 1fr; }
.entrada-marca { background: var(--petroleo); color: var(--alabaster); padding: clamp(32px, 5vw, 64px); display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.entrada-marca .logo { width: 210px; }
.entrada-marca h1 { font-family: var(--fonte-titulo); font-weight: 500; font-size: clamp(44px, 5.6vw, 76px); line-height: .95; color: var(--alabaster); margin-top: 48px; }
.entrada-marca h1::after { content: ""; display: block; width: 64px; height: 2px; background: var(--champagne); margin-top: 28px; }
.entrada-marca p { color: var(--no-petroleo-suave); max-width: 420px; margin-top: 22px; font-size: 16.5px; }
.entrada-marca .marca-dagua { position: absolute; right: -80px; bottom: -70px; width: 520px; max-width: none; filter: brightness(0) invert(1); opacity: .08; pointer-events: none; }
.entrada-marca .rodape-marca { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--no-petroleo-suave); position: relative; }
.entrada-form { display: grid; place-items: center; padding: clamp(28px, 5vw, 64px) 20px; }
.entrada-caixa { width: 100%; max-width: 400px; }
.entrada-caixa .titulo { margin: 12px 0 8px; }
.entrada-caixa form { display: grid; gap: 18px; margin-top: 32px; }
.lembrar { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--texto-suave); }
.lembrar input { accent-color: var(--petroleo); width: 17px; height: 17px; margin: 0; }
.erro-msg { background: var(--erro-fundo); color: var(--erro); border-radius: var(--raio-campo); padding: 12px 14px; font-size: 14px; display: flex; gap: 10px; align-items: flex-start; }
.entrada-ajuda { margin-top: 28px; font-size: 14px; color: var(--texto-suave); }
.entrada-ajuda a { color: var(--petroleo); font-weight: 600; }
@media (max-width: 860px) {
  .entrada-tela { grid-template-columns: 1fr; }
  .entrada-marca { min-height: auto; padding: 28px 20px 36px; }
  .entrada-marca h1 { font-size: 44px; margin-top: 32px; }
  .entrada-marca p { font-size: 15px; }
  .entrada-marca .rodape-marca { display: none; }
  .entrada-marca .marca-dagua { width: 300px; right: -70px; bottom: -50px; }
  .entrada-form { place-items: start center; }
}

.carregando { min-height: 100vh; display: grid; place-items: center; background: var(--petroleo); }
.carregando img { width: 96px; animation: respirar 1.6s ease-in-out infinite; }
@keyframes respirar { 50% { opacity: .45; } }

/* ==========================================================================
   APLICAÇÃO
   ========================================================================== */
.app { display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr); min-height: 100vh; }
.lateral { align-self: start; background: var(--petroleo); color: var(--alabaster); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 28px 18px 20px; overflow-y: auto; }
.lateral .logo { width: 176px; margin: 0 8px 32px; }
.nav { display: grid; gap: 4px; }
.nav-titulo { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--champagne); padding: 18px 12px 8px; }
.nav-item { text-decoration: none; display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border: 0; background: none; color: var(--no-petroleo-suave); border-radius: 10px; font-size: 14.5px; text-align: left; transition: background-color .2s, color .2s; position: relative; }
.nav-item:hover { background: rgba(244,244,242,.06); color: var(--alabaster); }
.nav-item[aria-current="page"] { background: rgba(244,244,242,.1); color: var(--alabaster); font-weight: 600; }
.nav-item[aria-current="page"]::before { content: ""; position: absolute; left: -18px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--champagne); }
.nav-item .contador { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--champagne); color: var(--grafite); font-size: 11.5px; font-weight: 700; display: grid; place-items: center; }
.nav-item.bloqueado { opacity: .55; }
.nav-item.bloqueado .cadeado { margin-left: auto; }
.lateral-rodape { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--linha-escuro); display: grid; gap: 4px; }
.perfil { display: flex; align-items: center; gap: 12px; padding: 4px 12px 14px; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--champagne); color: var(--grafite); display: grid; place-items: center; font-weight: 700; font-size: 13px; letter-spacing: .04em; flex: none; }
.avatar.claro { background: var(--petroleo-claro); color: var(--petroleo); }
.perfil-nome { font-weight: 600; font-size: 14px; color: var(--alabaster); line-height: 1.3; }
.perfil-plano { font-size: 12px; color: var(--no-petroleo-suave); line-height: 1.3; }

.topo-movel { display: none; }
.abas-movel { display: none; }

.principal { min-width: 0; display: flex; flex-direction: column; }
.faixa-aviso { display: flex; align-items: center; gap: 12px; padding: 12px clamp(20px, 4vw, 48px); font-size: 14px; }
.faixa-aviso.alerta { background: var(--erro-fundo); color: var(--erro); }
.faixa-aviso.preview { background: var(--ouro-fundo); color: var(--ouro-tinta); }
.faixa-aviso.offline { background: var(--grafite); color: var(--alabaster); }
.faixa-aviso .btn-texto { color: inherit; margin-left: auto; }
.conteudo { padding: clamp(24px, 4vw, 48px); max-width: 1240px; width: 100%; }

.cabeca-pagina { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 32px; }
.cabeca-pagina .rotulo { margin-bottom: 10px; }
.cabeca-pagina p { margin-top: 10px; max-width: 640px; color: var(--texto-suave); }
.cabeca-acoes { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Cards ---------- */
.card { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio-card); padding: clamp(20px, 2.4vw, 28px); min-width: 0; }
.card.escuro { background: var(--petroleo); border-color: var(--petroleo); color: var(--alabaster); }
.card-cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.card-cabeca p { font-size: 13.5px; color: var(--texto-suave); margin-top: 4px; }
.escuro .card-cabeca p { color: var(--no-petroleo-suave); }
.grade { display: grid; gap: 20px; }
.grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.grade-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.grade-lado { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1100px) { .grade-lado, .grade-3 { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .grade-2 { grid-template-columns: 1fr; } }

.vazio { text-align: center; padding: 36px 20px; color: var(--texto-suave); font-size: 14.5px; }
.vazio .ic { margin: 0 auto 12px; width: 28px; height: 28px; color: var(--ouro-tinta); }
.vazio strong { display: block; color: var(--grafite); font-size: 15.5px; margin-bottom: 4px; }

/* Destaque de boas-vindas */
.boas-vindas { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; position: relative; overflow: hidden; }
.boas-vindas .titulo { font-size: clamp(28px, 3vw, 38px); }
.boas-vindas p { color: var(--no-petroleo-suave); margin-top: 10px; max-width: 520px; }
.boas-vindas .marca-dagua { position: absolute; right: -40px; bottom: -60px; width: 300px; filter: brightness(0) invert(1); opacity: .07; pointer-events: none; }
@media (max-width: 760px) { .boas-vindas { grid-template-columns: 1fr; } }

/* Lista de pendências */
.pendencias { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.grade > * { min-width: 0; }
.pendencia { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--linha); border-radius: 12px; background: var(--branco); text-align: left; width: 100%; transition: border-color .2s; }
.pendencia:hover { border-color: var(--petroleo); }
.pendencia .icone { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--ouro-fundo); color: var(--ouro-tinta); flex: none; }
.pendencia strong { display: block; font-size: 14.5px; }
.pendencia span { font-size: 13px; color: var(--texto-suave); }
.pendencia .ic-seta { margin-left: auto; color: var(--petroleo); }

/* Itens de informação */
.info-lista { display: grid; gap: 14px; }
.info { padding-left: 14px; border-left: 2px solid var(--champagne); }
.info dt { font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ouro-tinta); }
.info dd { margin: 4px 0 0; font-size: 15px; }
.servicos-lista { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* Documentos */
.docs { display: grid; gap: 10px; }
.doc { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--linha); border-radius: 12px; }
.doc .icone { width: 40px; height: 40px; border-radius: 10px; background: var(--petroleo-claro); color: var(--petroleo); display: grid; place-items: center; flex: none; }
.doc-texto { min-width: 0; flex: 1; }
.doc-texto strong { display: block; font-size: 14.5px; }
.doc-texto span { font-size: 12.5px; color: var(--texto-suave); }
.doc-acoes { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* Cronograma */
.etapas { position: relative; display: grid; gap: 4px; }
.etapa { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; width: 100%; text-align: left; background: none; border: 0; padding: 10px 0; position: relative; }
.etapa:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 44px; bottom: -8px; width: 2px; background: var(--linha); }
.etapa.feita:not(:last-child)::after { background: var(--petroleo); }
.etapa-ponto { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--linha-forte); background: var(--branco); display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--texto-suave); position: relative; z-index: 1; }
.etapa.feita .etapa-ponto { background: var(--petroleo); border-color: var(--petroleo); color: var(--alabaster); }
.etapa.atual .etapa-ponto { border-color: var(--ouro-tinta); color: var(--ouro-tinta); border-width: 2px; }
.etapa.atual .etapa-ponto::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--champagne); }
.etapa h4 { font-size: 15px; font-weight: 600; }
.etapa p { font-size: 13.5px; color: var(--texto-suave); margin-top: 2px; }
.etapa .data { font-size: 12.5px; font-weight: 600; color: var(--ouro-tinta); margin-top: 4px; display: block; }
.etapa:hover h4 { color: var(--petroleo); text-decoration: underline; text-underline-offset: 3px; }

/* Upload */
.zona-upload { border: 1.5px dashed var(--linha-forte); border-radius: 12px; padding: 22px; text-align: center; background: var(--alabaster); cursor: pointer; transition: border-color .2s, background-color .2s; display: block; }
.zona-upload:hover, .zona-upload.arrastando { border-color: var(--petroleo); background: var(--petroleo-claro); }
.zona-upload .ic { margin: 0 auto 8px; width: 26px; height: 26px; color: var(--petroleo); }
.zona-upload strong { display: block; font-size: 14.5px; }
.zona-upload span { font-size: 12.5px; color: var(--texto-suave); }
.anexo { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; background: var(--petroleo-claro); color: var(--petroleo); border-radius: 10px; font-size: 13.5px; }
.anexo button { margin-left: auto; }

/* Cofre */
.cofre-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--linha); border-radius: 12px; }
.cofre-item + .cofre-item { margin-top: 8px; }
.cofre-item .icone { width: 36px; height: 36px; border-radius: 10px; background: var(--petroleo); color: var(--alabaster); display: grid; place-items: center; flex: none; }
.cofre-item strong { display: block; font-size: 14px; word-break: break-word; }
.cofre-item span { font-size: 12.5px; color: var(--texto-suave); }
.aviso-lgpd { display: flex; gap: 12px; padding: 14px 16px; background: var(--alabaster); border-radius: 12px; font-size: 13px; color: var(--texto-suave); line-height: 1.55; }
.aviso-lgpd .ic { color: var(--petroleo); margin-top: 2px; }

/* ==========================================================================
   CRIATIVOS
   ========================================================================== */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.filtro { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px; border-radius: var(--raio-pilula); border: 1px solid var(--linha-forte); background: var(--branco); font-size: 13.5px; font-weight: 600; color: var(--texto-suave); }
.filtro[aria-pressed="true"] { background: var(--petroleo); border-color: var(--petroleo); color: var(--alabaster); }
.filtro .n { font-size: 12px; opacity: .8; font-variant-numeric: tabular-nums; }
.posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.post { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio-card); overflow: hidden; display: flex; flex-direction: column; text-align: left; padding: 0; width: 100%; transition: border-color .2s, transform .25s var(--ease); }
.post:hover { border-color: var(--petroleo); transform: translateY(-2px); }
.post-midia { aspect-ratio: 4 / 5; background: var(--petroleo-claro); position: relative; overflow: hidden; }
.post-midia img, .post-midia video { width: 100%; height: 100%; object-fit: cover; }
.post-midia .marcador-midia { position: absolute; top: 10px; right: 10px; background: rgba(32,33,38,.72); color: var(--alabaster); font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: var(--raio-pilula); display: inline-flex; gap: 5px; align-items: center; }
.post-midia .sem-midia { width: 100%; height: 100%; display: grid; place-items: center; color: var(--petroleo); }
.post-midia .sem-midia img { width: 60%; height: auto; object-fit: contain; opacity: .35; }
.post-corpo { padding: 16px 18px 18px; display: grid; gap: 8px; flex: 1; }
.post-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; color: var(--texto-suave); }
.post-corpo h4 { font-size: 15.5px; font-weight: 600; line-height: 1.35; }
.post-corpo .selo { justify-self: start; margin-top: auto; }

/* Visualizador */
.visualizador { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; }
.vis-midia { background: var(--grafite); border-radius: 12px; overflow: hidden; position: relative; aspect-ratio: 4 / 5; display: grid; place-items: center; touch-action: pan-y; }
.vis-midia img, .vis-midia video { width: 100%; height: 100%; object-fit: contain; }
.vis-seta { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(244,244,242,.92); color: var(--petroleo); display: grid; place-items: center; }
.vis-seta.esq { left: 10px; }
.vis-seta.dir { right: 10px; }
.vis-pontos { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; }
.vis-pontos span { width: 7px; height: 7px; border-radius: 50%; background: rgba(244,244,242,.45); }
.vis-pontos span.ativo { background: var(--alabaster); }
.vis-info { display: grid; gap: 16px; align-content: start; }
.legenda-post { background: var(--alabaster); border-radius: 12px; padding: 14px 16px; font-size: 14px; line-height: 1.6; white-space: pre-wrap; max-height: 260px; overflow-y: auto; }
.historico { display: grid; gap: 10px; }
.comentario { padding: 10px 14px; border-radius: 10px; background: var(--ouro-fundo); font-size: 13.5px; }
.comentario.equipe { background: var(--petroleo-claro); }
.comentario small { display: block; font-size: 11.5px; color: var(--texto-suave); margin-bottom: 2px; }
.vis-acoes { display: grid; gap: 10px; }
@media (max-width: 860px) { .visualizador { grid-template-columns: 1fr; } .vis-midia { aspect-ratio: 1; } }

/* ==========================================================================
   RESULTADOS
   ========================================================================== */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpi { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio-card); padding: 18px 20px; }
.kpi .rotulo { font-size: 10.5px; letter-spacing: .16em; }
.kpi-valor { display: block; font-family: var(--fonte-titulo); font-weight: 600; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; color: var(--petroleo); margin-top: 8px; font-variant-numeric: lining-nums tabular-nums; }
.kpi-var { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--texto-suave); }
.kpi-var.bom { color: var(--petroleo); }
.kpi-var.ruim { color: var(--erro); }
.kpi.destaque { background: var(--petroleo); border-color: var(--petroleo); }
.kpi.destaque .rotulo { color: var(--champagne); }
.kpi.destaque .kpi-valor { color: var(--alabaster); }
.kpi.destaque .kpi-var { color: var(--no-petroleo-suave); }
@media (max-width: 1100px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.periodo { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 13.5px; color: var(--texto-suave); margin-bottom: 20px; }
.periodo strong { color: var(--grafite); }
.insight { display: flex; gap: 14px; align-items: flex-start; }
.insight .ic { color: var(--champagne); margin-top: 3px; }

.grafico { position: relative; }
.grafico svg { width: 100%; height: auto; overflow: visible; }
.grafico .eixo { font-size: 11px; fill: var(--texto-suave); font-family: var(--fonte-texto); }
.grafico .grade-linha { stroke: var(--linha); stroke-width: 1; }
.grafico .barra { fill: var(--petroleo); }
.grafico .barra-alvo { fill: transparent; cursor: pointer; }
.grafico .barra, .grafico .ponto, .grafico .linha-serie, .grafico text, .grafico .grade-linha { pointer-events: none; }
.grafico .barra-alvo:hover { fill: rgba(42, 72, 80, .05); }
.grafico .barra-alvo:hover + .barra, .grafico .barra.ativa { fill: var(--petroleo-profundo); }
.grafico .linha-serie { fill: none; stroke: var(--ouro-tinta); stroke-width: 2; }
.grafico .ponto { fill: var(--ouro-tinta); stroke: var(--branco); stroke-width: 2; }
.grafico .rotulo-valor { font-size: 11.5px; font-weight: 600; fill: var(--grafite); font-family: var(--fonte-texto); }
.dica { position: absolute; pointer-events: none; background: var(--grafite); color: var(--alabaster); font-size: 12.5px; padding: 8px 10px; border-radius: 8px; white-space: nowrap; transform: translate(-50%, calc(-100% - 10px)); z-index: 5; }
.dica strong { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--champagne); }

.tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ouro-tinta); padding: 10px 12px; border-bottom: 1px solid var(--linha-forte); white-space: nowrap; }
.tabela td { padding: 12px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela .num { text-align: right; white-space: nowrap; }
.tabela th.num { text-align: right; }

.anuncios { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.anuncio { border: 1px solid var(--linha); border-radius: 12px; padding: 16px; display: grid; gap: 8px; }
.anuncio h4 { font-size: 14.5px; font-weight: 600; }
.anuncio p { font-size: 13px; color: var(--texto-suave); }
.anuncio .desempenho { font-size: 13px; background: var(--alabaster); padding: 8px 10px; border-radius: 8px; }

/* ==========================================================================
   MF BOT
   ========================================================================== */
.qr-caixa { display: grid; place-items: center; text-align: center; gap: 12px; padding: 24px; border: 1px solid var(--linha); border-radius: 12px; min-height: 260px; }
.qr-caixa img { width: 200px; height: 200px; image-rendering: pixelated; }
.listas { display: grid; gap: 8px; }
.lista-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--linha); border-radius: 10px; }
.lista-item strong { display: block; font-size: 14px; }
.lista-item span { font-size: 12.5px; color: var(--texto-suave); }
.lista-item .acoes { margin-left: auto; display: flex; gap: 6px; }
.bloqueio { text-align: center; padding: clamp(32px, 6vw, 64px) 20px; display: grid; justify-items: center; gap: 12px; }
.bloqueio .ic { width: 36px; height: 36px; color: var(--ouro-tinta); }
.bloqueio p { max-width: 460px; color: var(--texto-suave); }

/* ==========================================================================
   GESTÃO (ADMIN)
   ========================================================================== */
.seletor-cliente { display: flex; align-items: center; gap: 12px; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio-card); padding: 12px 14px 12px 18px; margin-bottom: 24px; flex-wrap: wrap; }
.seletor-cliente .campo { flex: 1; min-width: 220px; }
.seletor-cliente .campo select { border-color: transparent; background-color: var(--alabaster); font-weight: 600; }
.busca { position: relative; flex: 1; min-width: 200px; }
.busca .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--texto-suave); }
.busca input { padding-left: 42px !important; }
.tabela .cliente-celula { display: flex; align-items: center; gap: 12px; min-width: 200px; }
.tabela .cliente-celula strong { display: block; font-size: 14.5px; }
.tabela .cliente-celula span { font-size: 12.5px; color: var(--texto-suave); }
.tabela .acoes { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: nowrap; }
.tabela input.entrada { min-height: 38px; padding: 7px 10px; font-size: 14px; max-width: 150px; }
.notificacoes { display: grid; }
.notif { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px 4px; border-bottom: 1px solid var(--linha); }
.notif:last-child { border-bottom: 0; }
.notif .ponto-novo { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; background: var(--ouro-tinta); }
.notif.lida .ponto-novo { background: transparent; border: 1px solid var(--linha-forte); }
.notif strong { font-size: 14px; display: block; }
.notif p { font-size: 13.5px; color: var(--texto-suave); }
.notif time { font-size: 12px; color: var(--texto-suave); white-space: nowrap; }
.miniaturas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.miniatura { width: 76px; height: 95px; border-radius: 8px; overflow: hidden; position: relative; background: var(--petroleo-claro); }
.miniatura img, .miniatura video { width: 100%; height: 100%; object-fit: cover; }
.miniatura button { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(32,33,38,.75); color: var(--alabaster); display: grid; place-items: center; }
.miniatura .ordem { position: absolute; bottom: 4px; left: 4px; background: rgba(32,33,38,.75); color: var(--alabaster); font-size: 10.5px; padding: 1px 6px; border-radius: 6px; }
.editor-linhas { display: grid; gap: 10px; }
.editor-linha { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr auto; gap: 8px; align-items: end; }
.editor-linha .campo > label { font-size: 12px; }
@media (max-width: 760px) { .editor-linha { grid-template-columns: 1fr 1fr; } .editor-linha .campo:first-child { grid-column: 1 / -1; } }
.etapa-editor { border: 1px solid var(--linha); border-radius: 12px; padding: 16px; display: grid; gap: 12px; }
.etapa-editor-cabeca { display: flex; align-items: center; gap: 10px; }
.etapa-editor-cabeca strong { font-size: 14px; flex: 1; }
.resumo-numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
@media (max-width: 1100px) { .resumo-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==========================================================================
   MODAL E AVISOS
   ========================================================================== */
.modal-fundo { position: fixed; inset: 0; z-index: 100; background: rgba(32, 33, 38, .55); display: grid; place-items: center; padding: 20px; opacity: 0; transition: opacity .2s; }
.modal-fundo.aberto { opacity: 1; }
.modal { background: var(--branco); border-radius: 16px; width: 100%; max-width: 560px; max-height: calc(100vh - 40px); overflow-y: auto; padding: clamp(22px, 3vw, 32px); transform: translateY(10px); transition: transform .25s var(--ease); }
.modal.largo { max-width: 980px; }
.modal-fundo.aberto .modal { transform: none; }
.modal-cabeca { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.modal-cabeca > div { flex: 1; min-width: 0; }
.modal-cabeca .titulo { margin-top: 6px; }
.lista-entregas { display: grid; gap: 8px; margin-top: 12px; }
.lista-entregas li { position: relative; padding-left: 20px; font-size: 14.5px; }
.lista-entregas li::before { content: ""; position: absolute; left: 3px; top: .65em; width: 6px; height: 6px; border-radius: 50%; background: var(--ouro-tinta); }
@media (max-width: 640px) {
  .modal-fundo { padding: 0; place-items: end center; }
  .modal { border-radius: 18px 18px 0 0; max-height: 92vh; }
}

.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); z-index: 200; background: var(--grafite); color: var(--alabaster); padding: 12px 18px; border-radius: 12px; font-size: 14px; display: flex; align-items: center; gap: 10px; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s var(--ease); max-width: calc(100vw - 32px); }
.toast.visivel { opacity: 1; transform: translate(-50%, 0); }
.toast.erro { background: var(--erro); }
.salvando { position: fixed; top: 16px; right: 16px; z-index: 150; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio-pilula); padding: 6px 14px; font-size: 12.5px; color: var(--texto-suave); display: flex; align-items: center; gap: 8px; }
.salvando::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ouro-tinta); animation: respirar 1s ease-in-out infinite; }

.tour { text-align: center; }
.tour .ic-tour { width: 56px; height: 56px; border-radius: 50%; background: var(--petroleo); color: var(--champagne); display: grid; place-items: center; margin: 4px auto 18px; }
.tour .titulo { margin-bottom: 10px; }
.tour p { color: var(--texto-suave); max-width: 400px; margin: 0 auto; }
.tour-pontos { display: flex; justify-content: center; gap: 6px; margin: 22px 0; }
.tour-pontos span { width: 7px; height: 7px; border-radius: 50%; background: var(--linha-forte); }
.tour-pontos span.ativo { background: var(--petroleo); width: 20px; border-radius: 4px; }

/* ==========================================================================
   CELULAR
   ========================================================================== */
@media (max-width: 1024px) {
  .app { grid-template-columns: 1fr; }
  .lateral { position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); z-index: 90; transform: translateX(-100%); transition: transform .3s var(--ease); }
  .app.menu-aberto .lateral { transform: none; }
  .app.menu-aberto::after { content: ""; position: fixed; inset: 0; background: rgba(32,33,38,.5); z-index: 80; }
  .topo-movel { display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 40; background: var(--petroleo); color: var(--alabaster); padding: 10px 16px; height: 60px; }
  .topo-movel img { height: 30px; width: auto; }
  .topo-movel .btn-menu { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: var(--alabaster); margin-left: -10px; }
  .topo-movel .avatar { margin-left: auto; width: 34px; height: 34px; font-size: 12px; }
  .abas-movel { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; background: var(--branco); border-top: 1px solid var(--linha); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); }
  .aba-movel { display: grid; justify-items: center; gap: 3px; padding: 6px 2px; border: 0; background: none; color: var(--texto-suave); font-size: 11px; font-weight: 600; border-radius: 10px; position: relative; }
  .aba-movel[aria-current="page"] { color: var(--petroleo); background: var(--petroleo-claro); }
  .aba-movel .contador { position: absolute; top: 2px; right: calc(50% - 22px); min-width: 18px; height: 18px; border-radius: 9px; background: var(--ouro-tinta); color: var(--branco); font-size: 10.5px; display: grid; place-items: center; padding: 0 5px; }
  .conteudo { padding: 24px 16px 104px; }
  .toast { bottom: 88px; }
}
@media (max-width: 640px) {
  .cabeca-pagina { margin-bottom: 24px; }
  .cabeca-acoes { width: 100%; }
  .cabeca-acoes .btn { flex: 1; }
  .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .post-corpo { padding: 12px; }
  .post-corpo h4 { font-size: 14px; }
  .post-meta { flex-direction: column; align-items: flex-start; gap: 2px; }
  .kpi { padding: 14px; }
  .doc { flex-wrap: wrap; }
  .doc-acoes { width: 100%; }
  .doc-acoes .btn { flex: 1; }
  .tabela-cartoes thead { display: none; }
  .tabela-cartoes tr { display: grid; gap: 6px; padding: 14px 0; border-bottom: 1px solid var(--linha); }
  .tabela-cartoes td { border: 0; padding: 0; }
  .tabela-cartoes .acoes { justify-content: flex-start; flex-wrap: wrap; }
  .tabela-cartoes td[data-rotulo]::before { content: attr(data-rotulo); display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ouro-tinta); font-weight: 600; }
}

/* ==========================================================================
   IMPRESSÃO (relatório em PDF)
   ========================================================================== */
@media print {
  @page { margin: 14mm; }
  body { background: #fff; font-size: 12px; }
  .lateral, .topo-movel, .abas-movel, .faixa-aviso, .cabeca-acoes, .nao-imprimir, .toast, .salvando { display: none !important; }
  .app { display: block; }
  .conteudo { padding: 0; max-width: none; }
  .card, .kpi { break-inside: avoid; border-color: #ddd; }
  .so-impressao { display: block !important; }
  .cabecalho-pdf { display: flex !important; }
  .kpis { grid-template-columns: repeat(4, 1fr); }
  .grade-2 { grid-template-columns: 1fr 1fr; }
}
.so-impressao { display: none; }
.cabecalho-pdf { display: none; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--petroleo); padding-bottom: 12px; margin-bottom: 20px; }
.cabecalho-pdf img { height: 40px; width: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Ajustes finos no celular */
.card-cabeca { flex-wrap: wrap; }
@media (max-width: 640px) {
  .card-cabeca > .btn, .card-cabeca > button { white-space: normal; text-align: left; }
  .tabela th, .tabela td { padding: 10px 4px; }
  .tabela th:first-child, .tabela td:first-child { padding-left: 0; }
  .tabela th:last-child, .tabela td:last-child { padding-right: 0; }
  .tabela th { letter-spacing: .08em; }
  .pendencia { flex-wrap: wrap; }
  .pendencia > span:nth-child(2) { flex: 1 1 calc(100% - 60px) !important; }
  .pendencia > span:last-child:not(.icone):not(:nth-child(2)) { margin-left: 54px; }
  .tabela { font-size: 13px; }
  .tabela th { white-space: normal; font-size: 10px; }
  .post-corpo .selo { white-space: normal; }
}

/* Etapas do projeto (gestão) */
.etapa-editor-cabeca [data-acao="mover-etapa"] .ic { transform: rotate(90deg); }
.trilha { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.trilha-item { display: flex; gap: 14px; align-items: flex-start; position: relative; padding-bottom: 18px; }
.trilha-item:last-child { padding-bottom: 0; }
.trilha-item:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 32px; bottom: 2px; width: 1px; background: var(--linha-forte); }
.trilha-marca { width: 31px; height: 31px; border-radius: 50%; border: 1px solid var(--linha-forte); display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--texto-suave); background: var(--branco); flex: none; }
.trilha-item.feita .trilha-marca { background: var(--petroleo); border-color: var(--petroleo); color: var(--alabaster); }
.trilha-item.atual .trilha-marca { border: 2px solid var(--ouro-tinta); color: var(--ouro-tinta); }
.trilha-texto { display: grid; gap: 2px; padding-top: 5px; min-width: 0; }
.trilha-texto strong { font-size: 14.5px; }
.trilha-item:not(.feita):not(.atual) .trilha-texto strong { color: var(--texto-suave); font-weight: 500; }
.trilha-texto span { font-size: 12.5px; color: var(--texto-suave); }
.trilha-item.atual .trilha-texto span { color: var(--ouro-tinta); font-weight: 600; }

/* Importar criativos de um .zip */
.importar-zip { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px dashed var(--linha-forte); border-radius: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.importar-zip .icone { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--ouro-fundo); color: var(--ouro-tinta); flex: none; }
.importar-zip-texto { flex: 1 1 220px; min-width: 0; display: grid; gap: 2px; }
.importar-zip-texto strong { font-size: 14.5px; }
.importar-zip-texto span { font-size: 13px; color: var(--texto-suave); }
.import-item { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border: 1px solid var(--linha); border-radius: 12px; }
.import-check { padding-top: 4px; }
.import-check input { width: 18px; height: 18px; accent-color: var(--petroleo); }
.import-capa { position: relative; width: 96px; aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; background: var(--alabaster); flex: none; }
.import-capa img, .import-capa video { width: 100%; height: 100%; object-fit: cover; display: block; }
.import-capa .ordem { position: absolute; right: 6px; bottom: 6px; background: rgba(32,33,38,.75); color: #fff; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 999px; }
.import-item:has(input[data-c="incluir"]:not(:checked)) .grade-campos, .import-item:has(input[data-c="incluir"]:not(:checked)) .import-capa { opacity: .4; }
@media (max-width: 640px) { .import-item { flex-wrap: wrap; } .import-capa { width: 72px; } }

/* Prévia do feed */
.feed-previa { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 24px; align-items: center; margin-bottom: 22px; }
.feed-previa-img { border: 0; padding: 0; background: var(--alabaster); border-radius: 12px; overflow: hidden; cursor: zoom-in; aspect-ratio: 4 / 5; }
.feed-previa-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.feed-previa-texto { display: grid; gap: 8px; justify-items: start; min-width: 0; }
.feed-previa-texto p { color: var(--texto-suave); font-size: 14px; }
.feed-ampliado { background: var(--alabaster); border-radius: 12px; overflow: auto; max-height: 72vh; text-align: center; }
.feed-ampliado img { max-width: 100%; height: auto; display: inline-block; }
.feed-navega { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.feed-lista { display: grid; gap: 10px; margin-top: 18px; }
.feed-mini { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border: 1px solid var(--linha); border-radius: 12px; }
.feed-mini-img { width: 56px; aspect-ratio: 4 / 5; border: 0; padding: 0; border-radius: 6px; overflow: hidden; background: var(--alabaster); flex: none; cursor: zoom-in; }
.feed-mini-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.feed-mini-texto { flex: 1; min-width: 0; display: grid; gap: 2px; }
.feed-mini-texto strong { font-size: 14px; }
.feed-mini-texto span { font-size: 12.5px; color: var(--texto-suave); }
@media (max-width: 640px) { .feed-previa { grid-template-columns: 110px minmax(0, 1fr); gap: 14px; } .feed-previa-texto p { display: none; } }

/* Formatos: feed 4:5, reels e stories 9:16 */
.marcador-tipo { position: absolute; top: 10px; left: 10px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--raio-pilula); background: rgba(244,244,242,.92); color: var(--petroleo); }
.post-midia.exibe-reels, .post-midia.exibe-stories { background: var(--grafite); }
.post-midia.exibe-reels img, .post-midia.exibe-reels video, .post-midia.exibe-stories img, .post-midia.exibe-stories video { object-fit: contain; }
.vis-coluna { display: grid; gap: 8px; justify-items: center; align-content: start; min-width: 0; }
.vis-coluna .vis-midia { width: 100%; }
.vis-formato { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ouro-tinta); font-weight: 600; }
.visualizador.vertical { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
.vis-midia.exibe-reels, .vis-midia.exibe-stories { aspect-ratio: 9 / 16; max-height: 72vh; width: auto; max-width: 100%; border-radius: 22px; border: 6px solid var(--grafite); }
.vis-midia.exibe-reels img, .vis-midia.exibe-reels video, .vis-midia.exibe-stories img { object-fit: cover; }
.story-barras { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 4px; z-index: 2; }
.story-barras span { flex: 1; height: 3px; border-radius: 3px; background: rgba(244,244,242,.35); }
.story-barras span.cheia, .story-barras span.atual { background: var(--alabaster); }
.story-toque { position: absolute; top: 0; bottom: 0; width: 40%; border: 0; background: transparent; cursor: pointer; z-index: 1; }
.story-toque.esq { left: 0; } .story-toque.dir { right: 0; }
.story-toque:focus-visible { outline: 2px solid var(--champagne); outline-offset: -4px; }
@media (max-width: 860px) {
  .visualizador.vertical { grid-template-columns: 1fr; }
  .vis-midia.exibe-reels, .vis-midia.exibe-stories { aspect-ratio: 9 / 16; max-height: 64vh; width: auto; }
}

/* Baixar artes */
.baixar-artes { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--linha); border-radius: 12px; }
.baixar-botoes { display: flex; flex-wrap: wrap; gap: 8px; }

/* Reels em duas etapas */
.bloco-reels { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--linha); border-radius: 12px; background: var(--alabaster); }
.bloco-reels .ajuda { margin-top: -6px; }
.slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.slot-imagem { display: grid; gap: 6px; justify-items: start; }
.slot-zona { width: 100%; aspect-ratio: 9 / 16; max-height: 260px; border: 1px dashed var(--linha-forte); border-radius: 10px; display: grid; place-items: center; align-content: center; gap: 6px; background: var(--branco); cursor: pointer; overflow: hidden; color: var(--texto-suave); font-size: 13px; text-align: center; }
.slot-zona img { width: 100%; height: 100%; object-fit: cover; }
.etapas-reels { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.etapas-reels li { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto-suave); padding: 6px 12px 6px 6px; border: 1px solid var(--linha); border-radius: var(--raio-pilula); }
.etapas-reels li span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 600; border: 1px solid var(--linha-forte); }
.etapas-reels li.atual { color: var(--grafite); border-color: var(--ouro-tinta); font-weight: 600; }
.etapas-reels li.atual span { border: 2px solid var(--ouro-tinta); color: var(--ouro-tinta); }
.etapas-reels li.feita { color: var(--petroleo); }
.etapas-reels li.feita span { background: var(--petroleo); border-color: var(--petroleo); color: var(--alabaster); }
.roteiro-texto { white-space: pre-wrap; background: var(--alabaster); border-radius: 10px; padding: 14px 16px; font-size: 14px; line-height: 1.6; max-height: 320px; overflow-y: auto; }
.roteiro-aprovado summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--petroleo); padding: 6px 0; }
.roteiro-aprovado .roteiro-texto { margin-top: 8px; }
.abas-etapa { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* MF Bot · CRM de leads */
.abas-bot { display: flex; gap: 6px; border-bottom: 1px solid var(--linha); margin-bottom: 22px; overflow-x: auto; }
.aba-bot { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border: 0; background: none; color: var(--texto-suave); font-size: 14.5px; font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.aba-bot[aria-selected="true"] { color: var(--petroleo); border-bottom-color: var(--petroleo); }
.aba-bot .contador { background: var(--ouro-tinta); color: #fff; font-size: 11px; border-radius: 999px; padding: 1px 7px; }
.aviso-bot { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; background: var(--petroleo-claro); border-radius: 12px; margin-bottom: 18px; font-size: 14px; color: var(--grafite); flex-wrap: wrap; }
.aviso-bot > .ic { color: var(--petroleo); flex: none; margin-top: 2px; }
.aviso-bot > div { flex: 1 1 280px; min-width: 0; line-height: 1.55; }
.kpis-leads { margin-bottom: 20px; }
.filtros-leads { display: grid; gap: 12px; margin-bottom: 16px; }
.filtros-linha { display: flex; gap: 10px; flex-wrap: wrap; }
.filtros-linha select, .filtros-linha input { min-height: 42px; border: 1px solid var(--linha-forte); border-radius: 10px; padding: 8px 12px; font: inherit; font-size: 14px; background: var(--branco); color: var(--grafite); }
.filtros-linha input { flex: 1 1 220px; min-width: 0; }
.lead-contato, .lead-data, .lead-origem { display: grid; gap: 3px; justify-items: start; }
.lead-contato strong { font-size: 14.5px; }
.lead-contato a { display: inline-flex; align-items: center; gap: 6px; color: var(--petroleo); font-size: 13.5px; text-decoration: none; font-variant-numeric: tabular-nums; }
.lead-contato a:hover { text-decoration: underline; }
.lead-nota { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-anuncio { max-width: 200px; }
.lead-etapa { min-height: 36px; border-radius: 999px; border: 1px solid var(--linha-forte); padding: 4px 12px; font: inherit; font-size: 13px; font-weight: 600; background: var(--branco); color: var(--grafite); }
.lead-etapa.etapa-novo { background: var(--ouro-fundo); border-color: transparent; color: var(--ouro-tinta); }
.lead-etapa.etapa-conversa, .lead-etapa.etapa-agendado { background: var(--petroleo-claro); border-color: transparent; color: var(--petroleo); }
.lead-etapa.etapa-fechou { background: var(--petroleo); border-color: var(--petroleo); color: var(--alabaster); }
.lead-etapa.etapa-perdido, .lead-etapa.etapa-arquivado { color: var(--texto-suave); }
.lead-valor { display: flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--petroleo); font-weight: 600; }
.tabela-leads td { vertical-align: top; }
@media (max-width: 640px) {
  .tabela-leads.tabela-cartoes tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; row-gap: 10px; }
  .tabela-leads.tabela-cartoes td[data-rotulo="Contato"] { grid-column: 1 / -1; }
  .tabela-leads.tabela-cartoes td[data-rotulo="Contato"]::before { display: none; }
  .tabela-leads.tabela-cartoes td[data-rotulo=""] { align-self: end; }
  .lead-nota { white-space: normal; }
}
.lead-auto { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; max-width: 220px; }
.historico-lead { margin-top: 18px; display: grid; gap: 10px; }
.historico-lead ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-left: 1px solid var(--linha-forte); margin-left: 6px; }
.historico-lead li { display: grid; gap: 2px; padding: 0 0 12px 16px; position: relative; font-size: 13.5px; }
.historico-lead li::before { content: ""; position: absolute; left: -5px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--petroleo); }
.historico-lead li span { color: var(--grafite); }
.historico-lead li small { color: var(--texto-suave); font-size: 12px; }
.resumo-crm { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--petroleo-claro); border-radius: 12px; margin-bottom: 16px; }
.resumo-crm > .ic { color: var(--petroleo); flex: none; margin-top: 2px; }
.resumo-crm div { display: grid; gap: 2px; }
.resumo-crm strong { color: var(--petroleo); }
.resumo-crm span { font-size: 13px; color: var(--texto-suave); }

/* Financeiro: permuta e observações */
.permuta-celula { display: grid; gap: 6px; min-width: 160px; }
.tabela-fin select.entrada { min-height: 38px; border: 1px solid var(--linha-forte); border-radius: 10px; padding: 6px 10px; font: inherit; font-size: 14px; background: var(--branco); }
.tabela-fin .acoes { flex-wrap: wrap; }
.fin-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.fin-resumo > div { display: grid; gap: 4px; padding: 12px 14px; background: var(--alabaster); border-radius: 10px; }
.fin-resumo strong { font-size: 16px; color: var(--petroleo); }
.fin-resumo span:not(.rotulo) { font-size: 12.5px; color: var(--texto-suave); }

/* Documentos: liga/desliga e extras */
.doc-oculto { opacity: .55; }
.interruptor { position: relative; display: inline-block; width: 38px; height: 22px; flex: none; cursor: pointer; }
.interruptor input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.interruptor span { position: absolute; inset: 0; background: var(--linha-forte); border-radius: 999px; transition: background .2s; pointer-events: none; }
.interruptor span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; }
.interruptor input:checked + span { background: var(--petroleo); }
.interruptor input:checked + span::after { transform: translateX(16px); }
.interruptor input:focus-visible + span { outline: 2px solid var(--ouro-tinta); outline-offset: 2px; }
.novo-doc { display: grid; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--linha); }
.novo-doc-campos { display: flex; gap: 8px; flex-wrap: wrap; }
.novo-doc-campos input { flex: 1 1 180px; min-width: 0; min-height: 40px; border: 1px solid var(--linha-forte); border-radius: 10px; padding: 8px 12px; font: inherit; font-size: 14px; }

.preenchido { border-color: var(--ouro-tinta) !important; background: var(--ouro-fundo) !important; }
.tabela-fin [data-fin-modelo] { min-width: 168px; }
.tabela-fin .acoes { flex-direction: column; align-items: flex-end; gap: 6px; }
@media (max-width: 640px) { .tabela-fin .acoes { flex-direction: row; align-items: center; } .tabela-fin [data-fin-modelo] { min-width: 0; width: 100%; } }

/* Agendado */
.selo-agendado { background: var(--petroleo); color: var(--alabaster); }
.selo .ic-sm { width: 12px; height: 12px; }

/* Plano diretor */
.plano-diretor { border: 1px solid var(--ouro-tinta); }
.plano-diretor .card-cabeca p { max-width: 62ch; }
.acoes-plano { display: grid; gap: 14px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--linha); }
.plano-aprovado { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.plano-aprovado .icone { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--petroleo); color: var(--alabaster); flex: none; }
.plano-aprovado > div { flex: 1 1 200px; display: grid; gap: 2px; min-width: 0; }
.plano-aprovado span:not(.rotulo):not(.icone) { font-size: 13px; color: var(--texto-suave); }

/* Materiais enviados */
.materiais-lista { display: grid; gap: 8px; margin-top: 16px; }
.material { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--linha); border-radius: 12px; flex-wrap: wrap; }
.material .icone { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--ouro-fundo); color: var(--ouro-tinta); flex: none; }
.material-texto { flex: 1 1 180px; min-width: 0; display: grid; gap: 2px; }
.material-texto strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.material-texto span { font-size: 12.5px; color: var(--texto-suave); }
.prog { display: grid; grid-template-columns: minmax(0, 1fr) 120px 90px; gap: 10px; align-items: center; font-size: 13px; margin-top: 10px; }
.prog span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prog-barra { height: 6px; background: var(--linha); border-radius: 6px; overflow: hidden; }
.prog-barra i { display: block; height: 100%; background: var(--petroleo); transition: width .2s; }
.prog small { color: var(--texto-suave); text-align: right; }

/* Calendário editorial */
.seletor-cal { display: grid; gap: 10px; margin-bottom: 18px; }
.seletor-cal .seletor-cliente { margin-bottom: 0; }
.calendario { padding: clamp(16px, 2.4vw, 28px); }
.cal-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.cal-topo h2 { min-width: 200px; text-align: center; }
.cal-total { margin-left: auto; font-size: 13px; color: var(--texto-suave); }
.cal-semana, .cal-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-semana span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ouro-tinta); font-weight: 600; padding: 0 8px 8px; }
.cal-dias { border-top: 1px solid var(--linha); border-left: 1px solid var(--linha); }
.dia { min-height: 112px; border-right: 1px solid var(--linha); border-bottom: 1px solid var(--linha); padding: 6px; display: flex; flex-direction: column; gap: 4px; position: relative; min-width: 0; }
.dia.vazio-dia { background: var(--alabaster); }
.dia-num { font-size: 12.5px; font-weight: 600; color: var(--texto-suave); }
.dia.hoje .dia-num { background: var(--petroleo); color: var(--alabaster); border-radius: 999px; width: 24px; height: 24px; display: grid; place-items: center; }
.dia-mais { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: var(--texto-suave); display: grid; place-items: center; opacity: 0; transition: opacity .15s; cursor: pointer; }
.dia:hover .dia-mais, .dia-mais:focus-visible { opacity: 1; }
.dia-mais:hover { background: var(--alabaster); color: var(--petroleo); }
.evento { display: flex; gap: 4px; align-items: baseline; width: 100%; text-align: left; border: 0; border-left: 3px solid; border-radius: 6px; padding: 4px 6px; font-size: 11.5px; line-height: 1.3; cursor: pointer; min-width: 0; }
.ev-hora { font-weight: 600; flex: none; font-variant-numeric: tabular-nums; }
.ev-titulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ev-pauta { background: var(--branco); border-color: var(--linha-forte); color: var(--texto-suave); outline: 1px dashed var(--linha-forte); outline-offset: -1px; }
.ev-aguardando { background: var(--ouro-fundo); border-color: var(--ouro-tinta); color: var(--ouro-tinta); }
.ev-ajuste { background: var(--erro-fundo); border-color: var(--erro); color: var(--erro); }
.ev-aprovado { background: var(--petroleo-claro); border-color: var(--petroleo); color: var(--petroleo); }
.ev-agendado { background: var(--petroleo); border-color: var(--grafite); color: var(--alabaster); }
.ev-publicado { background: var(--alabaster); border-color: var(--petroleo); color: var(--grafite); }
.cal-legenda { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; font-size: 12.5px; color: var(--texto-suave); }
.leg { display: inline-flex; align-items: center; gap: 6px; }
.ev-quadro { width: 12px; height: 12px; border-radius: 3px; border-left: 3px solid; display: inline-block; }
.cal-lista { display: none; }
.cal-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--linha); background: none; padding: 12px 0; }
.cal-data { width: 44px; display: grid; justify-items: center; flex: none; }
.cal-data strong { font-family: var(--fonte-titulo); font-size: 22px; color: var(--petroleo); line-height: 1; }
.cal-data span { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--texto-suave); }
.cal-texto { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cal-texto strong { font-size: 14.5px; }
.cal-texto span { font-size: 12.5px; color: var(--texto-suave); }
.ev-ponto { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; border-left: 0; flex: none; }
@media (max-width: 760px) {
  .cal-grade { display: none; }
  .cal-lista { display: block; }
  .cal-topo h2 { min-width: 0; flex: 1; }
}

/* ---------- Painel Hoje (v13) ---------- */
.painel-hoje { margin-bottom: 24px; }
.painel-hoje .card-cabeca p { font-size: 13px; color: var(--texto-suave); margin-top: 4px; }
.nova-tarefa { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.nova-tarefa input:not([type]) { flex: 1 1 200px; min-height: 40px; padding: 8px 12px; border: 1px solid var(--linha-forte); border-radius: var(--raio-campo); font: inherit; font-size: 14px; background: var(--branco); }
.nova-tarefa input:not([type]):focus-visible { outline: 2px solid var(--ouro-tinta); outline-offset: 1px; }
.nova-tarefa .check { padding: 6px 12px; }
.tarefas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 420px; overflow: auto; }
.tarefa { display: flex; align-items: center; gap: 10px; padding: 9px 8px 9px 12px; border: 1px solid var(--linha); border-radius: 12px; background: var(--branco); }
.tarefa label { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; line-height: 1.4; }
.tarefa input { accent-color: var(--petroleo); width: 17px; height: 17px; margin: 2px 0 0; flex: none; }
.tarefa small { color: var(--texto-suave); font-size: 12px; white-space: nowrap; }
.tarefa .btn-icone { width: 30px; height: 30px; flex: none; opacity: .55; }
.tarefa:hover .btn-icone, .tarefa .btn-icone:focus-visible { opacity: 1; }
.tarefa.urgente { border-color: var(--ouro-tinta); border-left-width: 3px; background: var(--ouro-fundo); }
.tarefa.feita label span { text-decoration: line-through; color: var(--texto-suave); }
.tarefa.feita { background: var(--alabaster); }
.hoje-lista { display: grid; gap: 4px; }
.hoje-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--linha); padding: 11px 2px; cursor: pointer; font: inherit; color: inherit; }
.hoje-item:last-child { border-bottom: 0; }
.hoje-item:hover .hoje-texto strong { color: var(--petroleo); }
.hoje-texto { flex: 1; min-width: 0; display: grid; gap: 2px; }
.hoje-texto strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hoje-texto span { font-size: 12.5px; color: var(--texto-suave); }
.robos { display: grid; gap: 6px; }
.robo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border: 1px solid var(--linha); border-radius: 12px; font-size: 14px; flex-wrap: wrap; }
.robo > span:first-child { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.automacao { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--linha); cursor: pointer; }
.automacao > span:first-child { display: grid; gap: 3px; }
.automacao strong { font-size: 14px; }
.automacao small { font-size: 12.5px; color: var(--texto-suave); line-height: 1.45; }
.copia { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: var(--petroleo-claro); color: var(--grafite); flex-wrap: wrap; }
.copia > .ic { color: var(--petroleo); flex: none; }
.copia > span { flex: 1 1 200px; display: grid; gap: 2px; }
.copia strong { font-size: 14px; }
.copia small { font-size: 12.5px; color: var(--texto-suave); }
.copia.alerta { background: var(--ouro-fundo); }
.copia.alerta > .ic { color: var(--ouro-tinta); }
.tempo-resp { font-size: 12px; color: var(--texto-suave); }
@media (max-width: 900px) { .painel-hoje { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .tarefa .selo { display: none; } .tarefas { max-height: none; } .tarefa .btn-icone { opacity: 1; } }
@media print { .importar-zip, .btn-icone { display: none !important; } }
.venc-botao { white-space: nowrap; }
.venc-modo { display: block; margin-top: 4px; }
.ciclos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.automacao input[type=radio] { accent-color: var(--petroleo); width: 18px; height: 18px; flex: none; }
.ig-cartao { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ig-cartao > .icone { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--petroleo-claro); color: var(--petroleo); flex: none; }
.ig-cartao > div { flex: 1 1 260px; display: grid; gap: 4px; }
.ig-cartao > div span { font-size: 13.5px; color: var(--texto-suave); line-height: 1.5; }
.ig-cartao.conectado > .icone { background: var(--petroleo); color: var(--alabaster); }
.ig-faixa { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; margin: -8px 0 20px; border-radius: 12px; background: var(--ouro-fundo); font-size: 13.5px; }
.ig-faixa > span { flex: 1 1 240px; }
.ig-faixa.conectado { background: var(--petroleo-claro); }
.erro-pub { display: block; margin-top: 6px; font-size: 12.5px; color: var(--erro); }
.pendencia .btn-texto.pequeno { display: block; margin-top: 6px; text-align: left; }
/* selos dentro de listas: mantêm a cor própria e quebram linha em colunas estreitas */
.pendencia .selo { font-size: 11.5px; white-space: normal; max-width: 100%; line-height: 1.35; text-align: left; }
.pendencia .selo-ok { color: var(--petroleo); }
.pendencia .selo-espera { color: var(--ouro-tinta); }
.pendencia .selo-alerta { color: var(--erro); }
.pendencia .selo-neutro { color: var(--texto-suave); }
.pendencia .selo-agendado { color: var(--alabaster); }
.lista-criativos .pendencia { flex-wrap: wrap; row-gap: 10px; }
.lista-criativos .pendencia > span:nth-child(2) { flex: 1 1 180px !important; }
.lista-criativos .pendencia > span:last-child { margin-left: auto; }
.pendencia .selo-agendado, .pendencia .selo-agendado * { color: var(--alabaster); }
/* Direct automático */
.regras { display: grid; gap: 12px; }
.regra { border: 1px solid var(--linha); border-radius: 12px; padding: 14px 16px; display: grid; gap: 8px; }
.regra.pausada { opacity: .6; }
.regra-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.regra-palavras { display: flex; flex-wrap: wrap; gap: 6px; }
.palavra { font-size: 12px; font-weight: 700; letter-spacing: .08em; padding: 4px 10px; border-radius: 999px; background: var(--petroleo); color: var(--alabaster); }
.regra-onde { font-size: 13px; color: var(--texto-suave); display: flex; align-items: center; gap: 6px; margin: 0; }
.regra-dm { font-size: 14px; background: var(--alabaster); border-radius: 10px; padding: 10px 12px; margin: 0; white-space: pre-wrap; }
.regra-publica { font-size: 13px; color: var(--texto-suave); margin: 0; }
.regra-rodape { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; color: var(--texto-suave); flex-wrap: wrap; }
.regra-rodape > span:last-child { display: flex; gap: 6px; }
.lista-regras { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 14px; color: var(--texto-suave); }
.hist-direct { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hist-direct li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; flex-wrap: wrap; border-bottom: 1px solid var(--linha); padding-bottom: 8px; }
.hist-direct li > span:nth-child(2) { flex: 1 1 160px; }
.hist-direct small { color: var(--texto-suave); }
.posts-ig { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 10px; max-height: 320px; overflow: auto; }
.post-ig { border: 2px solid transparent; border-radius: 10px; padding: 0; background: var(--alabaster); text-align: left; display: grid; overflow: hidden; cursor: pointer; }
.post-ig img, .post-ig .sem-capa { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: grid; place-items: center; color: var(--texto-suave); }
.post-ig > span:last-child { font-size: 11px; padding: 4px 6px; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post-ig.escolhido { border-color: var(--petroleo); }
.direct-resumo { display: flex !important; align-items: center; gap: 6px; margin-top: 6px; color: var(--petroleo) !important; font-size: 13px; }
/* Calendário do mês */
.planos-mes { display: grid; gap: 8px; }
.plano-mes { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; border: 1px solid var(--linha); border-radius: 12px; background: var(--branco); flex-wrap: wrap; cursor: pointer; font: inherit; color: inherit; }
.plano-mes.estatico { cursor: default; }
.plano-mes:not(.estatico):hover { border-color: var(--petroleo); }
.plano-mes .icone { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--petroleo-claro); color: var(--petroleo); flex: none; }
.plano-mes-texto { flex: 1 1 200px; display: grid; gap: 2px; min-width: 0; }
.plano-mes-texto strong { font-size: 14.5px; }
.plano-mes-texto span { font-size: 12.5px; color: var(--texto-suave); }
.plano-mes .acoes { display: flex; gap: 6px; margin-left: auto; }
.pm-tabela input.entrada { min-width: 0; width: 100%; padding: 6px 8px; font-size: 13px; }
.pm-tabela td { padding: 4px; vertical-align: middle; }
.pm-tabela .pm-n { width: 48px; }
.pm-tabela td:nth-child(4) { min-width: 200px; }
.pm-semana { font-family: var(--fonte-titulo); font-size: 18px; color: var(--petroleo); margin: 6px 0 0; }
.pm-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pm-item { display: grid; grid-template-columns: 130px 1fr auto; gap: 12px; align-items: start; padding: 12px; border: 1px solid var(--linha); border-radius: 12px; }
.pm-item.ajuste { border-color: var(--erro); }
.pm-quando { display: grid; gap: 4px; justify-items: start; font-size: 13px; }
.pm-tema { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.pm-tema > div { display: grid; gap: 2px; }
.pm-tema strong { font-size: 14.5px; }
.pm-tema span { font-size: 12.5px; color: var(--texto-suave); }
.pm-num { font-family: var(--fonte-titulo); font-size: 20px; color: var(--ouro-tinta); line-height: 1; min-width: 26px; }
.pm-escolha { display: grid; gap: 6px; min-width: 190px; font-size: 13px; }
.pm-escolha label { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.pm-escolha input[type=radio] { accent-color: var(--petroleo); }
.pm-comentario { display: none; font: inherit; font-size: 13px; padding: 8px; border: 1px solid var(--linha-forte); border-radius: 8px; }
.pm-escolha:has(input[value=changes]:checked) .pm-comentario { display: block; }
.pm-res { display: grid; gap: 4px; justify-items: end; font-size: 13px; max-width: 220px; }
.pm-res p { margin: 0; color: var(--texto-suave); }
.pm-extra, .pm-perguntas { display: grid; gap: 8px; padding: 14px; border-radius: 12px; background: var(--alabaster); }
.pm-extra ul { margin: 0; padding-left: 18px; font-size: 13.5px; display: grid; gap: 4px; }
.pm-extra p, .pm-resposta { margin: 0; font-size: 14px; }
@media (max-width: 700px) { .pm-item { grid-template-columns: 1fr; } .pm-res { justify-items: start; } }
.pm-tabela { table-layout: fixed; width: 100%; min-width: 640px; }
.pm-tabela th:nth-child(1) { width: 56px; } .pm-tabela th:nth-child(2) { width: 200px; } .pm-tabela th:nth-child(3) { width: 160px; } .pm-tabela th:nth-child(5) { width: 48px; } .pm-tabela th:nth-child(6) { width: 48px; }
.pm-tabela td:nth-child(4) { min-width: 0; }
.lead-etapa.etapa-proposta { background: var(--ouro-fundo); border-color: transparent; color: var(--grafite); }
.crm-colunas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-top: 8px; }
.crm-coluna { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--linha); border-radius: 10px; cursor: pointer; }
.crm-coluna:has(input:checked) { border-color: var(--petroleo); background: var(--petroleo-claro); }
.crm-coluna input { accent-color: var(--petroleo); margin-top: 3px; flex: none; }
.crm-coluna span { display: grid; gap: 2px; }
.crm-coluna strong { font-size: 13.5px; }
.crm-coluna small { font-size: 12px; color: var(--texto-suave); line-height: 1.35; }
.tabela-leads td { vertical-align: top; font-size: 13.5px; }
/* Números extras do cliente */
.fones-extra #fonesExtra { display: grid; gap: 10px; margin: 6px 0 10px; }
.fone-extra { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-areas: "nome fone lixo" "avisos cobranca ."; gap: 6px 8px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--linha); }
.fone-extra [data-f="nome"] { grid-area: nome; } .fone-extra [data-f="fone"] { grid-area: fone; }
.fone-extra > .check:nth-of-type(1) { grid-area: avisos; } .fone-extra > .check:nth-of-type(2) { grid-area: cobranca; }
.fone-extra .btn-texto { grid-area: lixo; padding: 6px; }
.fone-extra .check { padding: 6px 10px; font-size: 12.5px; justify-self: start; }
/* Conectar o robô pelo número de telefone */
.bot-codigo { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linha); display: grid; gap: 8px; }
.bot-codigo[hidden] { display: none; }
.bot-codigo-form { display: flex; gap: 8px; }
.bot-codigo-form input { flex: 1; min-width: 0; }
.codigo-pareamento { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 30px; font-weight: 700; letter-spacing: .12em; color: var(--petroleo); background: var(--petroleo-claro); border-radius: 12px; padding: 12px 16px; text-align: center; }
.passos-codigo { margin: 4px 0 0; padding-left: 20px; display: grid; gap: 4px; font-size: 13.5px; }
@media (max-width: 640px) { .bot-codigo-form { flex-direction: column; } }