/* Lastro: barra de setores e tela de cada setor (Vini, 08/11/2026: "Cada um vai ser um lastro... o lastro gestor é o principal").
   Só aparência. Usa as cores do visual.css quando ele está na página; os valores depois da vírgula valem na página do Financeiro,
   que tem o estilo dela. Assinatura da tela do setor: a esteira, com a etapa onde os casos estão empilhando marcada. */

/* ---------- barra de setores ---------- */
.setores{
  --s-tinta:var(--tinta,#f3f1ff);--s-cinza:var(--cinza,#aaa6cc);--s-acento:var(--acento,#7c5cff);--s-alerta:var(--alerta,#ff6b86);
  --s-borda:rgba(190,172,255,.22);
  position:sticky;top:0;z-index:7;display:flex;align-items:center;gap:4px;
  margin:0;padding:8px 12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;
  background:linear-gradient(180deg,rgba(139,109,255,.20),rgba(92,62,220,.10)),rgba(14,12,32,.72);
  border-bottom:1px solid var(--s-borda);
  -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);
  font:500 15px/1.2 var(--corpo,"Instrument Sans",system-ui,sans-serif);
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
}
.setores::-webkit-scrollbar{display:none}
.setores .setor{
  position:relative;flex:none;display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 15px;
  border:1px solid transparent;border-radius:999px;color:var(--s-cinza);text-decoration:none;white-space:nowrap;scroll-snap-align:start;
  transition:color .2s cubic-bezier(.22,1,.36,1),background-color .2s cubic-bezier(.22,1,.36,1),border-color .2s cubic-bezier(.22,1,.36,1);
}
.setores .setor:hover{color:#fff;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12)}
.setores .setor:active{transform:translateY(1px)}
.setores .setor.ativo{
  color:#fff;font-weight:600;
  background:linear-gradient(135deg,rgba(255,255,255,.24),rgba(255,255,255,.06)),var(--s-acento);
  border-color:rgba(255,255,255,.34);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 8px 22px -10px rgba(124,92,255,.95);
}
/* setor sem motor rodando: contorno tracejado, como os botões desligados da Leitura */
.setores .setor.em-ensaio{border-style:dashed;border-color:rgba(190,172,255,.28)}
.setores .setor.em-ensaio.ativo{border-style:solid}
.setor-conta{
  min-width:20px;height:20px;padding:0 6px;box-sizing:border-box;display:inline-grid;place-items:center;border-radius:999px;
  background:var(--s-alerta);color:#1a0710;font:700 11.5px/1 var(--corpo,system-ui);font-variant-numeric:tabular-nums;
}
/* o Gestor abre em outro endereço: seta para fora */
.setores .s-gestor::after{
  content:"";width:7px;height:7px;box-sizing:border-box;border:solid currentColor;border-width:1.6px 1.6px 0 0;
  transform:translateY(1px) rotate(0deg);opacity:.8;
}
/* o Gestor é a casa e vem primeiro; um fio separa ele dos setores, e outro separa os setores das ferramentas (TI e 3D) */
.setores .s-gestor{font-weight:600;color:var(--s-tinta)}
.setores .s-ti,.setores .s-controladoria{margin-left:10px}
.setores .s-ti::before,.setores .s-controladoria::before{content:"";position:absolute;left:-8px;top:10px;bottom:10px;width:1px;background:var(--s-borda)}
.setores .setor:focus-visible{outline:2px solid var(--acento-texto,#ab97ff);outline-offset:2px}

@media (min-width:1024px){
  body:not(.tela-entrar) .setores{
    top:16px;width:max-content;max-width:calc(100% - 64px);margin:16px 32px 0;padding:6px;border:1px solid var(--s-borda);border-radius:18px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 18px 50px -28px rgba(40,20,120,.9);
    -webkit-mask-image:none;mask-image:none;transition:margin-left .45s cubic-bezier(.22,1,.36,1);
  }
  :root[data-menu="fechado"] body:not(.tela-entrar) .setores{margin-left:64px}
  body:not(.tela-entrar) main{padding-top:28px}
}
:root[data-tema="claro"] .setores{
  background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.55)),rgba(139,109,255,.12);border-color:rgba(106,69,255,.18)}
:root[data-tema="claro"] .setores .setor{color:#3a3170}
:root[data-tema="claro"] .setores .setor:hover{color:#1d1640;background:rgba(40,28,110,.06);border-color:rgba(40,28,110,.1)}
:root[data-tema="claro"] .setores .setor.ativo{color:#fff;background:linear-gradient(135deg,#8b6dff,#6a45ff)}
:root[data-tema="claro"] .setores .setor.em-ensaio{border-color:rgba(106,69,255,.3)}
@media (prefers-reduced-transparency:reduce){.setores{background:#16142c;-webkit-backdrop-filter:none;backdrop-filter:none}}

/* ---------- todas as páginas do Lastro (rodada 2, Vini 08/11/2026): letra maior e a largura toda ----------
   "Aumenta um pouco as letras, usa mais os espaços que tem para usar... Não precisa aparecer todo o fundo."
   Vale só nas páginas que o painel desenha (body com data-setor e classe tela-*); a página própria de um setor (Financeiro,
   Comercial) traz o estilo dela com os mesmos valores, e estas regras não mexem nela. */
body[data-setor][class^="tela-"]{font-size:16.5px;line-height:1.6}
body[data-setor][class^="tela-"] main{max-width:none;margin:0}
body[data-setor][class^="tela-"] h1{font-size:clamp(30px,3.4vw,46px)}
body[data-setor][class^="tela-"] h2{font-size:19px;line-height:1.3}
body[data-setor][class^="tela-"] .caixa{padding:24px 28px}
body[data-setor][class^="tela-"] .caixa .nota,body[data-setor][class^="tela-"] .caixa .aviso,body[data-setor][class^="tela-"] .caixa .conta{font-size:14.5px}
body[data-setor][class^="tela-"] .tabela td,body[data-setor][class^="tela-"] .tabela th{font-size:15px}
body[data-setor][class^="tela-"] .resumo{font-size:17px}
body[data-setor][class^="tela-"] .fileira span{font-size:15px}
/* a linha que explica o bloco, debaixo do título: serve também para as telas da Controladoria */
p.explica{margin:0;max-width:72ch;color:var(--cinza);font-size:15px;line-height:1.5}
.caixa>h2+p.explica{margin:-6px 0 18px}
/* nas telas da Controladoria a linha vem logo depois do h1; o <details class="explica"> do quadro ("Como essa conta foi feita")
   não é tocado: as regras acima valem só para <p> (08/11/2026) */
h1+p.explica,.mv-cab+p.explica{margin:0 0 22px}
h1+p.explica:has(+.nota),.mv-cab+p.explica:has(+.nota){margin-bottom:8px}
@media (min-width:1024px){
  body[data-setor][class^="tela-"]:not(.tela-entrar) main{padding:30px 40px 96px}
  :root[data-menu="fechado"] body[data-setor][class^="tela-"]:not(.tela-entrar) main{padding-left:64px}
}
@media (min-width:2000px){body[data-setor][class^="tela-"] main{max-width:1840px}}
@media (max-width:760px){
  body[data-setor][class^="tela-"]{font-size:16px}
  body[data-setor][class^="tela-"] main{padding:20px 14px 64px}
  body[data-setor][class^="tela-"] .caixa{padding:20px 18px}
  body[data-setor][class^="tela-"] h2{font-size:18px}
}

/* ---------- o Lastro de cada setor ---------- */
.pagina-setor{display:flex;flex-direction:column}
.cabeca-setor{margin:6px 0 20px}
.cabeca-setor h1{margin:0 0 12px}
.cabeca-setor .faz{margin:0 0 10px;max-width:64ch;color:var(--tinta);font-size:18.5px;line-height:1.5}
.cabeca-setor .resumo{max-width:96ch;margin:0 0 16px;color:var(--cinza);font-size:15.5px;line-height:1.6}
.selos{display:flex;flex-wrap:wrap;gap:8px}
.selo{
  display:inline-flex;align-items:center;min-height:30px;padding:0 13px;border:1px solid var(--borda-2);border-radius:999px;
  background:rgba(14,12,32,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--cinza);font:500 13.5px/1 var(--corpo);
}
.selo.ensaio{border-style:dashed;color:var(--acento-texto);border-color:rgba(171,151,255,.45)}
.selo.alerta{color:var(--alerta);border-color:var(--alerta)}
:root[data-tema="claro"] .selo{background:rgba(255,255,255,.75)}

.bloco-setor{scroll-margin-top:96px}
.bloco-cabeca{margin:0 0 18px}
.bloco-cabeca h2{display:flex;align-items:center;gap:10px;margin:0 0 4px}
.conta-titulo{
  display:inline-grid;place-items:center;min-width:26px;height:24px;padding:0 8px;box-sizing:border-box;border-radius:999px;
  background:var(--acento-fundo);color:var(--acento-texto);font:600 13px/1 var(--corpo);font-variant-numeric:tabular-nums;
}
.pagina-setor .vazio{margin:0;color:var(--cinza);font-size:15.5px}
.de-onde{display:block;margin-top:6px;color:var(--apagado);font-size:14px}
.pagina-setor code{font-size:13px;padding:2px 6px;border-radius:6px;background:var(--veu);color:var(--acento-texto);word-break:break-all}

/* Agora: os números do topo, lado a lado, separados por um fio (sem cartão dentro de cartão) */
.numeros{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 0}
.numeros li{display:flex;flex-direction:column;gap:5px;padding:2px 18px;border-left:1px solid var(--borda-2)}
.numeros b{font:700 clamp(32px,3.2vw,46px)/1 var(--exibe);letter-spacing:-.03em;color:var(--forte);font-variant-numeric:tabular-nums}
.numeros span{color:var(--tinta);font:600 15.5px/1.3 var(--corpo)}
.numeros small{color:var(--cinza);font-size:14px;line-height:1.4}
@media (min-width:900px){.numeros{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}}

/* a esteira: celular em pé, uma etapa por linha, ligadas por um trilho */
.esteira{list-style:none;margin:0;padding:0;display:grid;gap:0}
.esteira .etapa{position:relative;display:grid;grid-template-columns:60px minmax(0,1fr);align-items:center;column-gap:14px;padding:9px 0}
.esteira .etapa::before{content:"";position:absolute;left:29px;top:0;bottom:0;width:2px;background:var(--borda-2)}
.esteira .etapa:first-child::before{top:50%}
.esteira .etapa:last-child::before{bottom:50%}
.esteira .etapa b{
  position:relative;z-index:1;display:grid;place-items:center;width:60px;height:44px;border-radius:12px;
  background:var(--vidro-solido,#16142c);border:1px solid var(--borda-2);color:var(--forte);
  font:700 21px/1 var(--exibe);font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.esteira .etapa span{color:var(--tinta);font-size:16px}
.esteira .etapa small{grid-column:2;color:var(--acento-texto);font-size:13px}
.esteira .etapa.vazia b{color:var(--apagado);background:transparent}
.esteira .etapa.vazia span{color:var(--cinza)}
.esteira .etapa.pico b{
  background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.04)),var(--acento);border-color:rgba(255,255,255,.4);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 10px 26px -10px rgba(124,92,255,1);
}
.esteira .etapa.pico span{font-weight:600;color:var(--forte)}
.fora-da-esteira{margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--borda)}
.fora-da-esteira p{margin:0 0 10px;color:var(--cinza);font-size:14px}
.fora-da-esteira ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.fora-da-esteira li{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 14px;border-radius:999px;background:var(--veu);color:var(--cinza);font-size:14.5px}
.fora-da-esteira b{color:var(--tinta);font-variant-numeric:tabular-nums}

/* computador: a esteira deitada, em gomos encaixados */
@media (min-width:900px){
  .esteira{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px}
  .esteira .etapa{
    display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:8px;min-height:136px;padding:18px 18px 16px 28px;
    background:var(--vidro-2);clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%,14px 50%);
    transition:background-color .25s cubic-bezier(.22,1,.36,1);
  }
  .esteira .etapa:first-child{padding-left:20px;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%);border-radius:14px 0 0 14px}
  .esteira .etapa:last-child{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,14px 50%);border-radius:0 14px 14px 0}
  .esteira .etapa::before{display:none}
  .esteira .etapa b{width:auto;height:auto;display:block;background:none;border:0;box-shadow:none;font-size:clamp(30px,2.8vw,42px)}
  .esteira .etapa span{font-size:15px;line-height:1.3;color:var(--cinza)}
  .esteira .etapa small{grid-column:auto;margin-top:auto}
  .esteira .etapa.vazia{background:var(--vidro)}
  .esteira .etapa.pico{background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.03)),var(--acento)}
  .esteira .etapa.pico b{background:none;box-shadow:none;border:0}
  .esteira .etapa.pico span,.esteira .etapa.pico small{color:#fff}
}

/* os blocos do meio: um embaixo do outro no celular, dois no notebook, três na tela grande */
.grade-setor{display:grid;grid-template-columns:minmax(0,1fr);gap:0 20px;align-items:start}
.grade-setor>.caixa{margin:16px 0}
@media (min-width:1180px){
  .grade-setor{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grade-setor:not(.duas) .bloco-agentes{grid-row:span 2}
  .grade-setor.duas{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
}
@media (min-width:1640px){
  .grade-setor:not(.duas){grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr)}
  .grade-setor:not(.duas) .bloco-agentes{grid-row:auto}
}

.lista-agentes,.lista-atencao,.lista-afazer,.lista-existe{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.lista-agentes .ag{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 12px;padding:14px 0;border-top:1px solid var(--borda)}
.lista-agentes .ag:first-child{border-top:0;padding-top:2px}
.lista-agentes .ag b{color:var(--forte);font:600 16.5px/1.3 var(--exibe)}
.lista-agentes .ag p{grid-column:1 / -1;margin:0;color:var(--cinza);font-size:15px;line-height:1.5}
.pagina-setor .chip{
  align-self:start;flex:none;display:inline-flex;align-items:center;min-height:26px;padding:0 11px;border-radius:999px;
  border:1px solid var(--borda-2);color:var(--cinza);font:500 13px/1 var(--corpo);white-space:nowrap;
}
.pagina-setor .chip.e-trabalhando{color:var(--acento-texto);border-color:var(--acento-texto)}
.pagina-setor .chip.e-livre{color:var(--ok);border-color:rgba(79,214,156,.55)}
.pagina-setor .chip.e-esperando{color:var(--atencao);border-color:rgba(251,191,90,.55)}
.pagina-setor .chip.e-erro{color:var(--alerta);border-color:var(--alerta)}
.pagina-setor .chip.e-parado{border-style:dashed}

.lista-atencao li,.lista-afazer li,.lista-existe li{padding:12px 0;border-top:1px solid var(--borda);color:var(--tinta);font-size:15.5px;line-height:1.5}
.lista-atencao li:first-child,.lista-afazer li:first-child,.lista-existe li:first-child{border-top:0;padding-top:2px}
.lista-atencao li.grave{color:var(--alerta)}
.lista-afazer li{display:flex;flex-direction:column;gap:7px;align-items:flex-start}
.lista-existe b{font-variant-numeric:tabular-nums;color:var(--acento-texto);margin-right:4px}
.mais{margin-top:6px}
.mais summary{cursor:pointer;padding:10px 0;color:var(--acento-texto);font-weight:500;font-size:15px}
.mais>ul{margin-top:2px}

.tabela-casos td[data-r="Tarefa"]{font-variant-numeric:tabular-nums;color:var(--cinza)}

/* setor em montagem: o desenho da tela que vem, em tracejado */
.previa{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.previa li{display:flex;flex-direction:column;gap:6px;min-height:120px;padding:16px 18px;border:1.5px dashed rgba(171,151,255,.32);border-radius:var(--r-m,14px)}
.previa b{color:var(--forte);font:600 16.5px/1.3 var(--exibe)}
.previa span{color:var(--cinza);font-size:15px;line-height:1.45}
.previa small{margin-top:auto;color:var(--acento-texto);font-size:13px}
.falta{margin:0 0 8px;font-size:15.5px}
.falta b{color:var(--forte)}
:root[data-tema="claro"] .previa li{border-color:rgba(106,69,255,.3)}

@media (max-width:760px){
  .tabela-casos thead{display:none}
  .tabela-casos,.tabela-casos tbody,.tabela-casos tr,.tabela-casos td{display:block;width:100%}
  .tabela-casos tr{padding:12px 0;border-top:1px solid var(--borda)}
  .tabela-casos tr:first-child{border-top:0}
  .tabela-casos td{padding:3px 0;border:0}
  .tabela-casos td:empty{display:none}
  .tabela-casos td[data-r="Ação"]{font-weight:600;color:var(--forte)}
  .tabela-casos tr:hover td{background:none}
  .bloco-setor{scroll-margin-top:72px}
  .cabeca-setor .faz{font-size:17px}
  .numeros li{padding:2px 14px}
  .previa{grid-template-columns:minmax(0,1fr)}
  .previa li{min-height:0}
}
:root[data-tema="claro"] .esteira .etapa.pico span,:root[data-tema="claro"] .esteira .etapa.pico small{color:#fff}
@media (prefers-reduced-motion:reduce){.setores .setor,.esteira .etapa,.setores{transition:none}}

/* rodada 2b: setor no ar, funil, e os blocos escolhidos que ainda não têm dado (tracejados, como tudo que está em montagem) */
.selo.no-ar{color:var(--ok);border-color:rgba(79,214,156,.55)}
body:not(.tela-entrar) .caixa.bloco-planejado{border-style:dashed;border-color:rgba(171,151,255,.32);background:transparent}
:root[data-tema="claro"] body:not(.tela-entrar) .caixa.bloco-planejado{border-color:rgba(106,69,255,.3)}

/* rodada 2c (pedidos do Lastro Seguro Defeso): seis números no topo e a lista de pescadores no celular */
/* com 5 ou 6 números: três por linha no notebook e todos numa linha só na tela larga, em vez de sobrar um sozinho embaixo */
@media (min-width:900px){.numeros:has(>li:nth-child(5)){grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1360px){.numeros:has(>li:nth-child(5)){grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}
@media (max-width:760px){
  /* a tabela vira cartão: o texto não encosta na borda da caixa que rola */
  .rola .tabela-casos td{padding-left:14px;padding-right:14px}
  .rola .tabela-casos tr:first-child{padding-top:6px}
  /* sem o cabeçalho, cada valor da lista de pescadores leva o nome do campo na frente */
  .etapa-pescadores .tabela-casos td[data-r="Presidente"]::before,
  .etapa-pescadores .tabela-casos td[data-r="Protocolo"]::before,
  .etapa-pescadores .tabela-casos td[data-r="Motivo"]::before{content:attr(data-r) ": ";color:var(--cinza);font-weight:500}
  .etapa-pescadores .tabela-casos td[data-r="Motivo"]::before{content:"Situação: "}
}
/* com 10 botões e os números de problema, a barra precisa caber inteira no notebook */
@media (min-width:1024px){body:not(.tela-entrar) .setores .setor{padding:0 12px;gap:6px}.setores .s-ti,.setores .s-controladoria{margin-left:8px}}
@media (min-width:1024px) and (max-width:1500px){body:not(.tela-entrar) .setores{font-size:14px}}