/* A marca de cada empresa na Central. O endereço escolhe a classe no <body> (ver empresas.py).
   Enquanto não houver logo de cada marca, o topo mostra o nome curto na cor dela. */
.marca { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.marca img { display: block; }
.marca-nome { font-weight: 700; font-size: 18px; letter-spacing: .2px; color: var(--marca, #0b5c3f); }
.troca-empresa { display: inline-block; margin-right: 12px; }
.troca-empresa select { font: inherit; padding: 4px 8px; border-radius: 6px; }
.area { margin-top: 26px; }
.area-tit { font-size: 15px; text-transform: uppercase; letter-spacing: .6px; opacity: .75; margin: 0 0 10px; }

/* --marca é a cor da empresa. As variáveis --verde* são o resto do sistema (títulos, selos, botões): elas
   nasceram no verde da Pró e, em cada marca, passam a ser os tons dela — assim nada fica verde na CEDUSP. */
body.tema-pro        { --marca: #0b5c3f; }
body.tema-cedusp     { --marca: #1F497D; --fundo-marca: #1d63bb; --verde: #2a6bb0; --verde-esc: #16355c;
                       --verde-claro: #e7eff8; --verde-fundo: #f4f7fb; }
body.tema-prezecor   { --marca: #2B3F95; --fundo-marca: #3450d6; --verde: #3b55c4; --verde-esc: #1d2b68;
                       --verde-claro: #eaedfa; --verde-fundo: #f5f6fc; }
body.tema-laborpro   { --marca: #12435c; --verde: #1d6e94; --verde-esc: #0d3346;
                       --verde-claro: #e7f1f6; --verde-fundo: #f4f9fb; }

/* A esteira (tela inicial): o processo em postos, na ordem do cliente. */
.esteira { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; }
.posto { position: relative; background: var(--e-cartao, #fff); border: 1px solid var(--e-linha-forte, #e3e8e5); border-left: 4px solid var(--marca, #0b5c3f);
         border-radius: 10px; padding: 14px 16px; }
.posto.vazio { opacity: .62; border-left-color: var(--e-linha-forte, #cfd8d3); }
.posto.aqui { box-shadow: 0 0 0 2px var(--marca, #0b5c3f) inset; }
.posto-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.posto-topo h2 { margin: 0; font-size: 17px; }
.passo { background: var(--marca, #0b5c3f); color: #fff; width: 26px; height: 26px; border-radius: 50%;
         display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.posto-resumo { margin: 6px 0 8px; }
.fluxo { display: grid; grid-template-columns: max-content 1fr; gap: 2px 10px; margin: 0 0 10px; font-size: 14px; }
.fluxo dt { color: var(--e-suave, #5b6b62); }
.fluxo dd { margin: 0; }
.posto-outros { font-size: 13px; color: var(--e-suave, #5b6b62); margin: 8px 0 0; }
.esteira .posto + .posto::before { content: "↓"; position: absolute; top: -13px; left: 18px; color: var(--e-apagado, #9fb0a8); }
@media (min-width: 900px) { .esteira { grid-template-columns: repeat(3, 1fr); }
  .esteira .posto + .posto::before { content: ""; } }

/* No ar / fora do ar (Cicero, 20/09/2026): o módulo publicado acende verde; o que ainda não foi publicado fica
   apagado e, para quem não é gestor, nem abre — é um cartão sem link. */
.modulo .luz { font-style: normal; font-size: 11px; font-weight: 600; text-transform: uppercase;
               letter-spacing: .04em; border-radius: 20px; padding: 1px 8px; margin-left: 8px;
               vertical-align: middle; }
.modulo .luz.on { background: var(--e-verde-f, #e6f6ed); color: var(--e-verde-t, #0b5c3f); }
.modulo .luz.off { background: var(--e-sutil, #eef1f0); color: var(--e-suave, #6b7a73); }
.modulo.off { opacity: .72; }
span.modulo.off { cursor: default; }
span.modulo.off:hover { border-color: var(--e-linha-forte, #e3e8e5); box-shadow: none; }

/* ---------------------------------------------------------------- a entrada (a esteira), na cor da marca
   Escolha do Cicero (20/09/2026): fundo escuro na cor da empresa — azul na CEDUSP e na Prezecor, verde na Pró —
   com os cartões brancos por cima e o logo como marca d'água. Vale só na tela de entrada: dentro do módulo o
   fundo continua claro, porque ali se trabalha o dia inteiro. */
body.entrada { background: #0b3b24; }
body.entrada { --fundo: var(--fundo-marca, var(--marca, #0b5c3f)); }
body.entrada .pagina {
  background: radial-gradient(900px 380px at 82% -14%, color-mix(in srgb, var(--fundo) 55%, #fff) 0%,
              transparent 60%),
              radial-gradient(700px 320px at 8% 105%, color-mix(in srgb, var(--fundo) 70%, #fff) 0%,
              transparent 58%),
              linear-gradient(158deg, color-mix(in srgb, var(--fundo) 88%, #000),
              color-mix(in srgb, var(--fundo) 96%, #000) 48%,
              color-mix(in srgb, var(--fundo) 62%, #000));
  max-width: none; margin: 0; padding: 30px max(20px, calc((100vw - 1180px) / 2)) 70px;
  position: relative; min-height: calc(100vh - 70px); overflow: hidden;
}
/* marca d'água: o logo DA MARCA desta tela, que o base.html passa em --logo. Marca sem logo não ganha selo de
   outra empresa — fica só o fundo. */
body.entrada .pagina::before {
  content: ""; position: absolute; right: 34px; top: 26px; width: 330px; height: 140px;
  background: var(--logo, none) right top / contain no-repeat;
  filter: brightness(0) invert(1); opacity: .30; pointer-events: none;
}
/* marca sem logo: o nome dela vira a marca d'água, grande e apagado, até o arquivo chegar */
body.entrada .pagina::after {
  content: var(--marca-texto, ""); position: absolute; right: 26px; top: 8px; font-size: 92px; font-weight: 800;
  letter-spacing: -.03em; color: #fff; opacity: .24; pointer-events: none; line-height: 1; white-space: nowrap;
}
body.entrada .pagina > * { position: relative; z-index: 1; }
body.entrada h1 { color: #fff; margin-bottom: 6px; }
body.entrada .ajuda { color: rgba(255,255,255,.78); font-size: .95rem; max-width: 70ch; }
body.entrada .area-tit { color: rgba(255,255,255,.8); }
body.entrada .msg { background: var(--e-veu, rgba(255,255,255,.92)); }

/* os cartões: brancos, sem borda dura, com um pouco de sombra para descolarem do fundo */
body.entrada .posto, body.entrada .modulo {
  background: var(--e-cartao, #fff); border-color: transparent; box-shadow: 0 8px 22px rgba(0,0,0,.16); }
body.entrada .posto.vazio { background: rgba(255,255,255,.14); box-shadow: none; opacity: 1; color: #fff; }
body.entrada .posto.vazio h2, body.entrada .posto.vazio .fluxo dd { color: #fff; }
body.entrada .posto.vazio .posto-resumo, body.entrada .posto.vazio .fluxo dt,
body.entrada .posto.vazio .posto-outros { color: rgba(255,255,255,.75); }
body.entrada .posto.aqui { box-shadow: 0 0 0 2px #fff inset, 0 8px 22px rgba(0,0,0,.2); }
body.entrada .modulo:hover { box-shadow: 0 10px 26px rgba(0,0,0,.24); }

/* os trabalhos dentro de uma etapa (ex.: emissão e busca ativa, na rede credenciada) */
.partes { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; font-size: 13.5px; }
.partes li { padding-left: 14px; position: relative; }
.partes li::before { content: "·"; position: absolute; left: 4px; font-weight: 700; }
.partes b { color: var(--verde-esc); }
body.entrada .posto:not(.vazio) .partes b { color: var(--verde-esc); }
body.entrada .posto.vazio .partes { color: rgba(255,255,255,.85); }
body.entrada .posto.vazio .partes b { color: #fff; }