/* pele.css — a pele do sistema (as telas com login: equipe, área do cliente e login), no estilo do Manual da Marca da APJ
   V3 (tipografia, proporção de cores, filete, grid de 4 px), com o azul-marinho da empresa e o ciano do site como acento
   (pedido do Rodrigo em 31/10/2026). Carregar por último, depois de app.css e do CSS do módulo.
   - Navy: a cor escura da marca de cada empresa (--sgi-azul-fundo, do /api/marca/tema.css); os tons claros saem dela
     por mistura com branco (o "tints de navy" do manual), então valem para qualquer empresa.
   - Neutros: os cinzas puxados para o navy do manual (texto, bordas, chão).
   - Acento: ciano em área pequena (filete de 3 px, sobretítulo, aba ativa), nunca fundo grande (o "vermelho cirúrgico").
     Sobre branco, o filete e o texto do acento usam o ciano escurecido (3:1 e 4,5:1 medidos).
   - Tipos: Inter (texto, tabelas, títulos em 700 com -2%) e Manrope 600 em caixa alta espacejada (rótulos, abas, botões).
   Cores de etapa, prazo e selo continuam as semânticas do app.css (C5). */

:root {
  --p-navy: var(--sgi-azul-fundo, #0b1f4d);
  --p-navy-escuro: color-mix(in srgb, var(--p-navy) 78%, #000);
  --p-navy-600: color-mix(in srgb, var(--p-navy) 84%, #fff);
  --p-navy-400: color-mix(in srgb, var(--p-navy) 58%, #fff);
  --p-navy-200: color-mix(in srgb, var(--p-navy) 18%, #fff);
  --p-navy-100: color-mix(in srgb, var(--p-navy) 9%, #fff);
  --p-navy-50: color-mix(in srgb, var(--p-navy) 4%, #fff);

  --p-cinza-900: #1c2233;
  --p-cinza-700: #3a4258;
  --p-cinza-500: #646a7e;
  --p-cinza-400: #9aa1b5;
  --p-cinza-200: #dde0e8;
  --p-cinza-50: #f7f8fa;

  --p-acento: #5fd3f3;          /* sobre navy */
  --p-acento-linha: #0f8fb4;    /* filete e borda sobre branco (3,7:1) */
  --p-acento-texto: #0a7392;    /* texto sobre branco (5,4:1) */

  --p-fonte-texto: Inter, "Segoe UI", system-ui, sans-serif;
  --p-fonte-apoio: Manrope, Inter, "Segoe UI", system-ui, sans-serif;

  /* o que o resto do app lê: a marca e os neutros passam a ser os do manual */
  --sgi-fonte: var(--p-fonte-texto);
  --sgi-azul: var(--p-navy);
  --sgi-azul-claro: var(--p-navy-100);
  --sgi-azul-texto: var(--p-navy);
  --brand: var(--p-navy);
  --sgi-tinta: var(--p-cinza-900);
  --sgi-texto: var(--p-cinza-700);
  --sgi-fraco: var(--p-cinza-500);
  --sgi-linha: var(--p-cinza-200);
  --sgi-chao: var(--p-cinza-50);
  --cor-neutro: var(--p-navy-50);
  --cor-borda-campo: #7d8aa0;
  --sgi-r-card: 10px;
  --sgi-r-campo: 6px;
  --sgi-sombra: 0 1px 2px rgba(28, 34, 51, .06);
  --topo-h: 60px;
}

/* ---------- tipografia ---------- */
/* tamanhos compactos (escolha do Rodrigo, 31/10/2026: versão C) */
html:not(.pele-compacta) body { font-family: var(--p-fonte-texto); font-size: 13.5px; line-height: 1.55; color: var(--p-cinza-700); }
html:not(.pele-compacta) h1, html:not(.pele-compacta) h2, html:not(.pele-compacta) h3 {
  font-family: var(--p-fonte-texto); font-weight: 700; letter-spacing: -0.02em; color: var(--p-navy); text-wrap: balance;
}
html:not(.pele-compacta) h4, html:not(.pele-compacta) h5 { font-weight: 600; color: var(--p-cinza-900); }
html:not(.pele-compacta) p { line-height: 1.6; }

/* a voz técnica (Manrope 600, caixa alta, espacejada): rótulos, cabeçalhos de tabela, legendas, abas e botões */
html:not(.pele-compacta) th,
html:not(.pele-compacta) .card .rotulo,
html:not(.pele-compacta) .card .rot,
html:not(.pele-compacta) .kpi .l,
html:not(.pele-compacta) .kpi > span:first-child:not(.n):not(.badge),
html:not(.pele-compacta) .campo > label,
html:not(.pele-compacta) .field label,
html:not(.pele-compacta) .grupo legend, html:not(.pele-compacta) .c-grupo legend,
html:not(.pele-compacta) .sobretitulo {
  font-family: var(--p-fonte-apoio); font-weight: 600; font-size: 11px; line-height: 1.4;
  text-transform: uppercase; letter-spacing: .1em; color: var(--p-cinza-500);
}
/* o rótulo que vem depois do número é o rodapé do cartão (Financeiro): texto normal, não a voz técnica */
html:not(.pele-compacta) .card .valor ~ .rotulo, html:not(.pele-compacta) .card .val ~ .rot {
  font-family: var(--p-fonte-texto); font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: 0; margin-top: 4px;
}
html:not(.pele-compacta) th.num, html:not(.pele-compacta) th .num { font-size: 11px; }
.sobretitulo { display: block; margin: 0 0 4px; color: var(--p-acento-texto) !important; letter-spacing: .14em !important; }

/* ---------- topo: faixa navy com o logo num ladrilho branco ---------- */
header.topo {
  background: var(--p-navy); border-bottom: 0; color: #fff;
  box-shadow: inset 0 -3px 0 var(--p-acento);
}
header.topo .topo-logo { background: #fff; border-radius: 8px; padding: 4px 8px; min-height: 40px; }
header.topo .logo { height: 30px; }
html:not(.pele-compacta) header.topo h1 { color: #fff; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
header.topo .sub { color: color-mix(in srgb, #fff 72%, var(--p-navy)); }
header.topo .topo-acoes .suave, header.topo .topo-acoes a.suave, header.topo .topo-acoes button {
  font-family: var(--p-fonte-texto) !important; font-weight: 600 !important; font-size: 13.5px !important; letter-spacing: 0 !important; text-transform: none !important;
  background: color-mix(in srgb, #fff 10%, transparent) !important; color: #fff !important;
  border: 1px solid color-mix(in srgb, #fff 22%, transparent) !important;
}
header.topo .topo-acoes .suave:hover, header.topo .topo-acoes button:hover {
  background: color-mix(in srgb, #fff 18%, transparent) !important; border-color: color-mix(in srgb, #fff 40%, transparent) !important;
}
header.topo :focus-visible { outline-color: var(--p-acento); }
@media (min-width: 641px) { html:not(.pele-compacta) header.topo h1 { font-size: 19px; } }
@media (max-width: 640px) {
  header.topo { gap: 8px; padding: 0 10px; }
  header.topo .topo-logo { padding: 3px 5px; }
  header.topo .logo { height: 26px; }
  header.topo .topo-acoes { gap: 4px; }
  header.topo .topo-acoes .suave, header.topo .topo-acoes button, header.topo .topo-acoes a { padding: 0 8px !important; min-width: 40px !important; }
  /* no celular o Sair fica só com o ícone (o nome vai para o leitor de tela), como os outros */
  header.topo #btSair span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html:not(.pele-compacta) header.topo h1 { font-size: 15px; }
}
/* o título do topo numa linha só (o text-wrap: balance dos títulos não vale aqui) */
html:not(.pele-compacta) header.topo h1 { text-wrap: nowrap; white-space: nowrap; }

/* ---------- barra dos módulos e abas internas: Inter 600 em letra normal (escolha do Rodrigo, 31/10/2026: versão C) ---------- */
nav.barra-app { background: #fff; border-color: var(--p-cinza-200); }
nav.barra-app a, nav.barra-app .barra-mais-bt {
  font-family: var(--p-fonte-texto); font-weight: 600; font-size: 11.5px; letter-spacing: 0; text-transform: none; color: var(--p-cinza-700);
}
nav.barra-app a:hover, nav.barra-app .barra-mais-bt:hover { color: var(--p-navy); }
nav.barra-app a[aria-current="page"], nav.barra-app .barra-mais-bt.atual { color: var(--p-navy); font-weight: 700; box-shadow: inset 0 3px 0 var(--p-acento-linha); }
nav.barra-app .barra-mais a { font-size: 14px; }
nav.barra-app .barra-mais a[aria-current="page"] { background: var(--p-navy-100); }
@media (min-width: 641px) { nav.barra-app .barra-mais a { font-size: 11.5px; } }
@media (min-width: 981px) {
  nav.barra-app a, nav.barra-app .barra-mais a { font-size: 14px; min-height: 48px; }
  nav.barra-app a[aria-current="page"], nav.barra-app .barra-mais a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--p-acento-linha); background: none; }
}

/* sub-abas (as partes dentro da tela): menores e com a ativa em marinho cheio, de cantos quadrados, para não se confundir com
   o menu principal, que marca a ativa com o traço ciano (escolha do Rodrigo, 31/10/2026: "marinho, mais quadrado, não pílula") */
nav#nav { padding: 8px 16px; gap: 4px; align-items: center; border-bottom-color: var(--p-cinza-200); }
#nav a[data-view], #abas .tabm {
  min-height: 32px; padding: 5px 12px; border-bottom: 0; border-radius: 4px;
  font-family: var(--p-fonte-texto); font-weight: 600; font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--p-cinza-700);
}
#nav a[data-view]:hover, #abas .tabm:hover { color: var(--p-navy); background: var(--p-navy-50); }
#nav a[data-view].ativo, #nav a[data-view].on, #nav a[data-view].active, #nav a[data-view][aria-current="page"],
#abas .tabm.on, #abas .tabm.ativo, #abas .tabm.active { color: #fff; background: var(--p-navy); }

/* ---------- superfícies: cartões brancos com borda fina; o filete no topo dos indicadores ---------- */
html:not(.pele-compacta) :is(.c, .kpi, .dcard, .cal, .tl, .card, .painel) {
  border: 1px solid var(--p-cinza-200); border-radius: var(--sgi-r-card); background: #fff; box-shadow: var(--sgi-sombra);
}
html:not(.pele-compacta) .kpi { border-top: 3px solid var(--p-acento-linha); padding: 14px 16px 16px; gap: 6px; }
.kpi .nota { font-size: 12px; line-height: 1.4; color: var(--p-cinza-500); }
html:not(.pele-compacta) :is(button.kpi, a.kpi):hover { border-color: var(--p-navy-400); border-top-color: var(--p-navy); box-shadow: 0 4px 14px -6px rgba(28, 34, 51, .25); }
button.kpi[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--p-navy); }
html:not(.pele-compacta) .kpi .n, html:not(.pele-compacta) .kpi b, html:not(.pele-compacta) .card .valor, html:not(.pele-compacta) .card .val {
  font-family: var(--p-fonte-texto); font-size: 21px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--p-navy);
}
/* o tom do número (atrasado, alerta, ok) vale sobre o marinho dos números */
html:not(.pele-compacta) :is(.kpi .n.critico, .kpi.critico .n, .card .valor.critico) { color: var(--sgi-vermelho); }
html:not(.pele-compacta) :is(.kpi .n.alerta, .kpi.alerta .n, .card .valor.alerta) { color: var(--cor-ambar); }
html:not(.pele-compacta) :is(.kpi .n.ok, .kpi.ok .n, .card .valor.ok) { color: var(--sgi-verde); }
.card .pe, .kpi .p, .kpi small { color: var(--p-cinza-500); }

.painel { padding: 20px; margin-bottom: 20px; }
html:not(.pele-compacta) .painel > h2, html:not(.pele-compacta) .painel > header h2, html:not(.pele-compacta) section > h2.titulo {
  font-size: 17px; line-height: 1.3;
}
/* o filete do manual sob o título da seção: 3 px e 40 px de largura, no acento */
.painel > h2::after, .painel > header > h2::after {
  content: ""; display: block; width: 40px; height: 3px; margin-top: 8px; border-radius: 2px; background: var(--p-acento-linha);
}
.painel .sub { color: var(--p-cinza-500); }
.grupo, .c-grupo { border-color: var(--p-cinza-200); border-radius: var(--sgi-r-card); }

/* ---------- tabelas ---------- */
.tabela-scroll { border: 1px solid var(--p-cinza-200); border-radius: var(--sgi-r-campo); background: #fff; }
table.tab { background: #fff; }
/* cabeçalho marinho com o filete do acento (escolha do Rodrigo, 31/10/2026: versão C) */
html:not(.pele-compacta) table.tab th { background: var(--p-navy); color: #fff; border-bottom: 3px solid var(--p-acento); padding: 9px 12px; }
html:not(.pele-compacta) table.tab th a, html:not(.pele-compacta) table.tab th button { color: #fff; }
html:not(.pele-compacta) table.tab td :is(button.suave, a.suave, button.principal, a.principal) { min-height: 32px; padding: 4px 12px; }
table.tab td { padding: 7px 12px; border-bottom: 1px solid var(--p-cinza-200); }
table.tab tbody tr:last-child td { border-bottom: 0; }
table.tab tbody tr:hover td { background: var(--p-navy-50); }
html:not(.pele-compacta) table.tab td { font-size: 13px; line-height: 1.45; }

/* ---------- quadro da Fila: coluna com cabeçalho marinho e filete do acento, como as tabelas (escolha do Rodrigo, 31/10/2026:
   versão B); os cartões mantêm a cor da etapa na borda ---------- */
.f-coluna { padding: 0 0 8px; background: var(--p-navy-50); border: 1px solid var(--p-cinza-200); overflow: hidden; }
html:not(.pele-compacta) .f-coluna-cab {
  margin: 0 0 10px; padding: 10px 12px; background: var(--p-navy); color: #fff; border-bottom: 3px solid var(--p-acento); font-weight: 700;
}
.f-coluna-cab .qtd { background: color-mix(in srgb, #fff 18%, transparent); color: #fff; font-weight: 700; }
.f-coluna-corpo { padding: 0 8px; }
.f-coluna.avulsos { box-shadow: none; border-color: var(--p-navy-400); }

/* ---------- área do cliente: no computador, as 17 partes num menu lateral estreito (escolha do Rodrigo, 31/10/2026: versão C,
   "porém a barra um pouco menor"); no celular e no tablet ficam as abas de cima ---------- */
@media (min-width: 1100px) {
  nav#nav[aria-label="Partes da área do cliente"] {
    position: fixed; top: calc(var(--topo-h) + 49px); left: 0; bottom: 0; z-index: 20; width: 200px;
    flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 2px; overflow-y: auto; overflow-x: hidden;
    padding: 14px 10px; background: #fff; border-right: 1px solid var(--p-cinza-200); border-bottom: 0;
  }
  nav#nav[aria-label="Partes da área do cliente"] a[data-view] {
    border-bottom: 0; border-left: 3px solid transparent; border-radius: 6px; min-height: 34px; padding: 6px 10px; font-size: 13px;
  }
  nav#nav[aria-label="Partes da área do cliente"] a[data-view]:hover { background: var(--p-navy-50); }
  nav#nav[aria-label="Partes da área do cliente"] :is(a[data-view][aria-current="page"], a[data-view].ativo, a[data-view].on, a[data-view].active) {
    border-left-color: var(--p-acento-linha); background: var(--p-navy-50); color: var(--p-navy);
  }
  body:has(nav#nav[aria-label="Partes da área do cliente"]:not([hidden])) main#principal { margin-left: 200px; }
}

/* ---------- letra dentro dos cartões (pedido do Rodrigo, 31/10/2026: "padronizarmos"): o nome do cliente em marinho negrito,
   sem o sublinhado de link de site (só ao passar o mouse); o protocolo em cinza e menor; o título do painel da Fila como os
   outros, em letra normal ---------- */
html:not(.pele-compacta) .card.pedido .protocolo { font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--p-cinza-500); }
html:not(.pele-compacta) .card.pedido .cliente, html:not(.pele-compacta) .card.pedido .cliente a {
  font-family: var(--p-fonte-texto); font-weight: 700; font-size: 14.5px; letter-spacing: -0.01em; color: var(--p-navy); text-decoration: none;
}
html:not(.pele-compacta) .card.pedido .cliente a:hover { text-decoration: underline; text-underline-offset: 3px; }
html:not(.pele-compacta) .painel .f-cabeca h2 { text-transform: none; letter-spacing: -0.02em; font-size: 17px; }

/* ---------- botões de escolha (dias do anúncio, filtros, Quadro/Lista, chips do Leads): cantos arredondados como os outros botões,
   nem pílula nem quadrado (pedido do Rodrigo, 31/10/2026); o escolhido em marinho cheio, como a sub-aba ativa ---------- */
html .filtro-botoes button, .filtro-botoes a, .tn-chip, .l-chip { border-radius: var(--sgi-r-campo); }
.f-modo { border-radius: var(--sgi-r-campo); }
html .filtro-botoes button:hover { border-color: var(--p-navy); }
html .filtro-botoes button[aria-pressed="true"], .filtro-botoes a[aria-current] { background: var(--p-navy); border-color: var(--p-navy); color: #fff; }

/* ---------- acertos de padrão (Rodrigo, 31/10/2026: "acerta os 3") ---------- */
/* Locutor: o título "Ver o painel de" como os outros títulos de seção */
html:not(.pele-compacta) .l-escolha-titulo { margin: 0 0 12px; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; text-transform: none; color: var(--p-navy); }
/* Avisos e Financeiro: as partes da tela (botões em tablist) iguais às sub-abas, com a escolhida em marinho */
:is(#av-abas, .fn-subabas)[role="tablist"] { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
html :is(#av-abas, .fn-subabas)[role="tablist"] button[role="tab"] {
  min-height: 32px; padding: 5px 12px; border: 0; border-radius: 4px; background: transparent; box-shadow: none;
  font-family: var(--p-fonte-texto); font-weight: 600; font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--p-cinza-700);
}
html :is(#av-abas, .fn-subabas)[role="tablist"] button[role="tab"]:hover { color: var(--p-navy); background: var(--p-navy-50); }
html :is(#av-abas, .fn-subabas)[role="tablist"] button[role="tab"][aria-selected="true"] { color: #fff; background: var(--p-navy); border-color: var(--p-navy); }
/* Jato (e qualquer rótulo solto com a classe sub): a voz dos rótulos, em caixa alta pequena */
html:not(.pele-compacta) label.sub[for] {
  display: block; margin: 0 0 4px; font-family: var(--p-fonte-apoio); font-weight: 600; font-size: 11px; line-height: 1.4;
  text-transform: uppercase; letter-spacing: .1em; color: var(--p-cinza-500);
}

/* ---------- campos ---------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea {
  border-color: var(--cor-borda-campo); border-radius: var(--sgi-r-campo); background: #fff; color: var(--p-cinza-900);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):hover, select:hover, textarea:hover { border-color: var(--p-navy-400); }
input:focus, select:focus, textarea:focus { border-color: var(--p-navy); box-shadow: 0 0 0 3px var(--p-navy-200); outline: none; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--p-navy); }

/* ---------- botões: primário navy, secundário de contorno, perigo e confirmar semânticos; Inter 600 em letra normal (escolha do Rodrigo, 31/10/2026: versão B) ---------- */
html:not(.pele-compacta) button.principal, html:not(.pele-compacta) a.principal,
html:not(.pele-compacta) .btn:not([class*="btn-"]):not(.ghost) {
  border-radius: var(--sgi-r-campo); background: var(--p-navy); color: #fff; border: 1px solid var(--p-navy);
  padding: 9px 20px; min-height: 40px;
  font-family: var(--p-fonte-texto); font-weight: 600; font-size: 14px; letter-spacing: 0; text-transform: none;
}
html:not(.pele-compacta) button.principal:hover:not(:disabled), html:not(.pele-compacta) a.principal:hover,
html:not(.pele-compacta) .btn:not([class*="btn-"]):not(.ghost):hover { background: var(--p-navy-escuro); border-color: var(--p-navy-escuro); }
html:not(.pele-compacta) button.suave:not(.perigo):not(.verde), html:not(.pele-compacta) a.suave:not(.perigo):not(.verde),
html:not(.pele-compacta) a.botao, html:not(.pele-compacta) .btn.ghost {
  border-radius: var(--sgi-r-campo); background: #fff; color: var(--p-navy); border: 1px solid var(--p-navy-200);
  padding: 8px 16px; min-height: 40px;
  font-family: var(--p-fonte-texto); font-weight: 600; font-size: 14px; letter-spacing: 0; text-transform: none;
}
html:not(.pele-compacta) button.suave:not(.perigo):not(.verde):hover:not(:disabled), html:not(.pele-compacta) a.suave:not(.perigo):not(.verde):hover,
html:not(.pele-compacta) a.botao:hover { background: var(--p-navy-50); border-color: var(--p-navy-400); }
html:not(.pele-compacta) button.suave.perigo, html:not(.pele-compacta) button.suave.verde,
html:not(.pele-compacta) a.suave.perigo, html:not(.pele-compacta) a.suave.verde,
html:not(.pele-compacta) button.principal.perigo, html:not(.pele-compacta) button.principal.verde {
  border-radius: var(--sgi-r-campo); font-family: var(--p-fonte-texto); font-weight: 600; font-size: 14px; letter-spacing: 0; text-transform: none;
}
html:not(.pele-compacta) button.principal.perigo, html a.principal.perigo { background: var(--sgi-vermelho); border-color: var(--sgi-vermelho); }
html:not(.pele-compacta) button.principal.verde, html a.principal.verde { background: var(--sgi-verde); border-color: var(--sgi-verde); }
html button.icone, a.icone { border-radius: var(--sgi-r-campo); }
nav button { border-radius: var(--sgi-r-campo); }

/* selos e etiquetas: a etapa e o selo viram uma bolinha na cor dele com o texto colorido, sem fundo (escolha do Rodrigo,
   31/10/2026: versão C); o prazo continua etiqueta (o atrasado em vermelho cheio é o destaque forte) */
.chip, .tag, .prazo, .externo:not(.card) { border-radius: 4px; }
.etapa, .badge { background: transparent; border: 0; padding: 0; border-radius: 0; }
.etapa::before, .badge::before { content: ""; flex: none; width: 8px; height: 8px; margin-right: 2px; border-radius: 50%; background: currentColor; display: inline-block; }
.etapa .ico, .badge .ico { display: none; }
.badge { display: inline-flex; align-items: center; gap: 4px; }
.badge.marca { color: var(--p-navy); }

/* ---------- diálogos ---------- */
dialog { border-radius: var(--sgi-r-card); border-top: 3px solid var(--p-acento-linha); }
dialog::backdrop { background: color-mix(in srgb, var(--p-navy-escuro) 55%, transparent); }

/* ---------- foco ---------- */
:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--p-navy); outline-offset: 2px; }
header.topo a:focus-visible, header.topo button:focus-visible { outline-color: var(--p-acento); }

/* ---------- chão ---------- */
html, body { background: var(--p-cinza-50); }
@media (min-width: 641px) { main { padding: 24px 28px; } }

/* ---------- entrada (login, troca de senha): o corte diagonal do manual, um só, com o filete do acento no vértice ---------- */
html:not(.pele-compacta) body.entrada {
  background:
    linear-gradient(104deg, var(--p-navy) 0 46%, var(--p-acento) 46% calc(46% + 6px), var(--p-cinza-50) calc(46% + 6px) 100%);
  background-attachment: fixed;
}
body.entrada .entrada-caixa {
  position: relative; z-index: 1;
  border: 1px solid var(--p-cinza-200); border-top: 3px solid var(--p-acento-linha); border-radius: var(--sgi-r-card);
  box-shadow: 0 24px 60px -24px rgba(11, 20, 45, .45);
}
html:not(.pele-compacta) body.entrada .entrada-caixa h1 { font-size: 24px; letter-spacing: -0.02em; }
html:not(.pele-compacta) body.entrada .entrada-caixa h1::after {
  content: ""; display: block; width: 40px; height: 3px; margin: 10px auto 0; border-radius: 2px; background: var(--p-acento-linha);
}
@media (max-width: 640px) {
  html:not(.pele-compacta) body.entrada { background: linear-gradient(180deg, var(--p-navy) 0 180px, var(--p-acento) 180px 184px, var(--p-cinza-50) 184px); }
}

/* o login com o lado da marca (pedido do Rodrigo, 31/10/2026: "a diagonal, mas coloca uma imagem ou referência da Indústria
   do Som"): a foto de estúdio do site sob o marinho (o manual: foto escurecida com overlay navy) e o nome da empresa;
   o cartão vai para o lado claro. A troca de senha, sem o aside, fica com o fundo de cima. */
.entrada-marca { display: none; }
/* o nome já está grande no lado da marca: no cartão fica só o logo */
body.entrada:has(.entrada-marca) .l-empresa { display: none; }
html:not(.pele-compacta) body.entrada:has(.entrada-marca) { background: var(--p-cinza-50); }
body.entrada:has(.entrada-marca) .entrada-marca {
  display: block; position: fixed; z-index: 0; top: 0; left: 0; bottom: 0; width: 56vw;
  background: var(--p-acento); clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%);
}
body.entrada:has(.entrada-marca) .entrada-marca::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--p-navy) 70%, transparent) 0%, color-mix(in srgb, var(--p-navy) 92%, transparent) 70%),
    url('/img/site/estudio-microfone.jpg') center / cover no-repeat, var(--p-navy);
  clip-path: polygon(0 0, calc(100% - 6px) 0, calc(78% - 6px) 100%, 0 100%);
}
.entrada-marca-texto { position: absolute; left: clamp(24px, 6vw, 88px); bottom: clamp(32px, 10vh, 96px); max-width: 34vw; color: #fff; }
.entrada-marca-texto .sobretitulo { color: var(--p-acento) !important; }
html:not(.pele-compacta) .entrada-marca-nome { margin: 4px 0 12px; font-size: clamp(30px, 3.4vw, 46px); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; color: #fff; text-wrap: balance; }
.entrada-marca-nome::after { content: ""; display: block; width: 64px; height: 3px; margin-top: 16px; border-radius: 2px; background: var(--p-acento); }
.entrada-marca-linha { margin: 0; font-size: 15px; line-height: 1.6; color: color-mix(in srgb, #fff 78%, var(--p-navy)); }
@media (min-width: 981px) {
  body.entrada:has(.entrada-marca) { justify-content: flex-end; padding-right: clamp(24px, 8vw, 140px); }
  body.entrada:has(.entrada-marca) .entrada-caixa { margin: 0 0 0 auto; }
}
@media (max-width: 980px) {
  body.entrada:has(.entrada-marca) { flex-direction: column; justify-content: flex-start; padding-top: 0; }
  body.entrada:has(.entrada-marca) .entrada-marca {
    position: relative; width: calc(100% + 32px); margin: 0 -16px 0; height: 230px; flex: none;
    clip-path: polygon(0 0, 100% 0, 100% 78%, 0 100%);
  }
  body.entrada:has(.entrada-marca) .entrada-marca::before { clip-path: polygon(0 0, 100% 0, 100% calc(78% - 6px), 0 calc(100% - 6px)); }
  .entrada-marca-texto { left: 20px; right: 20px; bottom: 64px; max-width: none; }
  html:not(.pele-compacta) .entrada-marca-nome { font-size: 28px; margin-bottom: 0; }
  .entrada-marca-nome::after, .entrada-marca-linha { display: none; }
  body.entrada:has(.entrada-marca) .entrada-caixa { margin-top: -36px; }
}