/* =======================================================================
   CADASTROS.CSS — casco do módulo Cadastros (menu lateral + seção ativa).
   Reusa o Design System (styles.css): .card .page-head .muted + o componente
   .nav (menu lateral no desktop, barra inferior no celular). Idêntico ao
   casco de Qualidade/RH/Planejamento. As telas das seções usam os estilos
   globais que já usavam dentro do Apontamento — aqui o CASCO + a Visão Geral
   dos Vínculos (tela nascida no módulo, .cad-vv-*).
   Só TOKENS do Design System — nada de hex solto.
   ======================================================================= */

/* --- casco: menu lateral + área principal (idêntico à Qualidade/RH) --- */
.cad { display: flex; align-items: flex-start; margin: calc(-1 * var(--content-py)) calc(-1 * var(--content-px)) calc(-1 * var(--content-pb)); }
.cad-nav { z-index: 39; }
.cad-main { flex: 1; min-width: 0; padding: var(--content-py) var(--content-px) calc(var(--content-py) + var(--content-pb)); }
.wrap:has(.cad) { max-width: none; }

/* --- item do menu com título + subtítulo (2 linhas no desktop) --- */
.cad-nav .txt { display: flex; flex-direction: column; line-height: 1.15; }
.cad-nav .txt small { font-size: .74rem; font-weight: 500; color: var(--text-muted); }
.cad-nav .active .txt small { color: inherit; opacity: .85; }

/* --- grupo no menu (ex.: "Vínculos de Qualidade"): cabeçalho CLICÁVEL que expande/recolhe
   os filhos indentados (nasce recolhido). O cabeçalho é um disclosure (não é rota, nunca
   recebe .active); a seta ▸ gira 90° ao abrir. Mesmo padrão do .qua-grp da Qualidade. --- */
.cad-grp-cab { font-weight: 600; }
.cad-grp-seta { margin-left: auto; color: var(--text-muted); font-size: .78rem; transition: transform .15s ease; }
.cad-grp-cab[aria-expanded="true"] .cad-grp-seta { transform: rotate(90deg); }
.cad-grp-filhos { position: relative; }
.cad-grp-filhos.fechado { display: none; }                /* recolhido (desktop) */
.cad-grp-filhos::before {                                  /* guia vertical do submenu */
  content: ""; position: absolute; left: 21px; top: 3px; bottom: 3px;
  width: 1px; background: var(--border);
}
.cad-nav a.cad-nav-sub { padding-left: 34px; }            /* indentação do filho (junto à guia) */
.cad-nav a.cad-nav-sub.active::before { left: 20px; }     /* barra dourada junto à guia */
/* rótulo DENTRO do grupo ("Qualidade", "Planejamento"…): só texto, não é rota nem recolhe */
.cad-grp-rot {
  padding: 10px 12px 2px 34px; font-size: .68rem; font-weight: 700; letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--text-muted);
}

/* --- resumo da seção no título da página (ex.: "24 ativo(s) · 7 desligado(s)") --- */
.cad-resumo { font-size: .82rem; font-weight: 500; color: var(--text-muted); white-space: nowrap; }

/* =======================================================================
   VÍNCULOS › VISÃO GERAL (vinculos-visao-ui.js) — tabela Serviço × PLS ×
   Cronograma × FVS. Estado por bolinha discreta: verde = vinculado · âmbar =
   a conferir · contorno cinza = sem vínculo. Cabeçalho fixo na rolagem.
   ======================================================================= */
.cad-vv-fonte { font-size: .82rem; color: var(--warning-fg); background: var(--warning-bg); border-radius: var(--radius-sm); padding: 7px 12px; margin: 6px 0; }
.cad-vv-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 12px 0; }
.cad-vv-kpi { padding: 10px 12px; }
.cad-vv-kpi .value { font-size: 1.5rem; }
button.cad-vv-kpi-btn { font: inherit; color: inherit; text-align: left; width: 100%; cursor: pointer; }
button.cad-vv-kpi-btn:hover { border-color: var(--accent); }
button.cad-vv-kpi-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cad-vv-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 6px; }
.cad-vv-filtros input[type="search"] { flex: 1 1 220px; min-width: 0; }
.cad-vv-filtros select { flex: 0 1 200px; min-width: 0; }
.cad-vv-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: .78rem; color: var(--text-secondary); margin: 4px 0 8px; }
.cad-vv-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.cad-vv-cont { font-size: .8rem; margin-top: 6px; }

.cad-vv-dot { flex: none; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--surface-3); }
.cad-vv-dot.st-ok, .st-ok > .cad-vv-dot { background: var(--success); }
.cad-vv-dot.st-parcial, .st-parcial > .cad-vv-dot { background: var(--warning); }
.cad-vv-dot.st-sem, .st-sem > .cad-vv-dot { background: transparent; box-shadow: inset 0 0 0 2px var(--border-strong); }
.cad-vv-dot.st-indisp, .st-indisp > .cad-vv-dot { background: var(--surface-3); }

.cad-vv-wrap { overflow: auto; max-height: calc(100vh - var(--topbar-h) - 24px); max-height: calc(100dvh - var(--topbar-h) - 24px); border: 1px solid var(--border); border-radius: var(--radius-sm); }
table.cad-vv-tab { table-layout: fixed; width: 100%; min-width: 0; font-size: .86rem; border-collapse: separate; border-spacing: 0; }
.cad-vv-tab col.cad-vv-c-serv { width: 22%; }
.cad-vv-tab thead th { position: sticky; top: 0; z-index: 2; padding: 0; }
.cad-vv-tab td { padding: 4px 6px; vertical-align: top; }   /* lista inteira na célula: a linha cresce, as colunas alinham pelo topo */
.cad-vv-ord { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 6px; width: 100%; padding: 10px 12px; cursor: pointer; }
.cad-vv-ord:hover { color: var(--text-primary); }
.cad-vv-ord:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cad-vv-seta { color: var(--accent); font-size: .7rem; }
.cad-vv-th-s { display: none; }
.cad-vv-btn { all: unset; box-sizing: border-box; display: flex; align-items: flex-start; gap: 7px; width: 100%; min-height: 34px; padding: 4px 6px; border-radius: var(--radius-sm); cursor: pointer; color: var(--text-primary); }
.cad-vv-btn:hover { background: var(--surface-2); }
.cad-vv-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cad-vv-btn > .cad-vv-dot { margin-top: .3em; }
.cad-vv-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; white-space: normal; overflow-wrap: anywhere; }
.cad-vv-item { display: block; line-height: 1.35; }
.cad-vv-aviso { color: var(--warning); font-weight: 700; }
.cad-vv-btn.st-sem .cad-vv-txt, .cad-vv-btn.st-indisp .cad-vv-txt { color: var(--text-muted); }
.cad-vv-btn-serv .cad-vv-txt { white-space: normal; overflow-wrap: anywhere; }
.cad-vv-cam { display: block; font-size: .72rem; color: var(--text-muted); }
.cad-vv-n { display: none; }
.cad-vv-tab tr.cad-vv-grp > td { background: var(--surface-2); font-weight: 700; font-size: .78rem; color: var(--text-secondary); padding: 6px 12px; box-shadow: inset 3px 0 0 var(--accent); }
.cad-vv-vazio { text-align: center; color: var(--text-muted); padding: 18px 12px; }

/* detalhe (modal de consulta) */
.cad-vv-bloco { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; margin: 10px 0; }
.cad-vv-bloco--foco { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.cad-vv-bloco-tit { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: .95rem; }
.cad-vv-lista { list-style: none; margin: 0 0 8px; padding: 0; max-height: 240px; overflow: auto; }
.cad-vv-lista li { font-size: .86rem; padding: 5px 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.cad-vv-lista li:last-child { border-bottom: 0; }
.cad-vv-alerta { display: inline-block; font-size: .72rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--warning-bg); color: var(--warning-fg); }

/* celular: a tabela cabe sem rolagem lateral — célula = bolinha + quantidade; o detalhe mostra tudo.
   Sem caixa de rolagem própria (a barra de menus de baixo come metade da tela): rola a PÁGINA e o
   cabeçalho da tabela gruda logo abaixo do cabeçalho do app. */
@media (max-width: 600px) {
  .cad-vv-kpis { grid-template-columns: repeat(2, 1fr); }
  .cad-vv-filtros select { flex: 1 1 140px; }
  .cad-vv-wrap { max-height: none; overflow: visible; }
  .cad-vv-tab thead th { top: var(--topbar-h); }
  .cad-vv-tab col.cad-vv-c-serv { width: 43%; }
  .cad-vv-ord { padding: 9px 6px; gap: 3px; }
  .cad-vv-th-l { display: none; }
  .cad-vv-th-s { display: inline; }
  .cad-vv-tab td { padding: 3px; }
  .cad-vv-cel .cad-vv-txt { display: none; }
  .cad-vv-cel .cad-vv-n { display: inline; font-weight: 700; font-variant-numeric: tabular-nums; }
  .cad-vv-cel .cad-vv-btn { justify-content: center; align-items: center; }
  .cad-vv-cel .cad-vv-btn > .cad-vv-dot { margin-top: 0; }
}

/* No celular a .cad-nav vira barra inferior fixa (regra do styles.css): o casco
   vira bloco simples e some o subtítulo (só o título curto cabe na barra). */
@media (max-width: 780px) {
  .cad { display: block; margin: 0; }
  .cad-nav { padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
  .cad-main { padding: 0; padding-bottom: max(0px, calc(var(--cad-nav-h, 0px) - 84px)); }
  .cad-nav .txt { line-height: 1.1; }
  .cad-nav .txt small { display: none; }
  /* 8 itens de rótulo longo: força 3-4 por linha, dando largura para o título
     não se sobrepor ao vizinho. Escopado ao .cad-nav — NÃO toca o componente
     compartilhado .nav.nav-multi (usado por Estoque/RH/Apontamento). */
  .cad .cad-nav.nav-multi a { flex: 1 1 30%; min-width: 30%; max-width: 40%; }
  /* Na barra inferior não há acordeão: o grupo "some" (display:contents) e os filhos viram
     itens planos da barra, ao lado dos demais. O cabeçalho e a guia vertical não aparecem;
     os filhos ficam SEMPRE visíveis (o .fechado do desktop é vencido por especificidade). */
  .cad .cad-nav .cad-grp,
  .cad .cad-nav .cad-grp-filhos { display: contents; }
  .cad .cad-nav .cad-grp-cab,
  .cad .cad-nav .cad-grp-rot,
  .cad .cad-nav .cad-grp-filhos::before { display: none; }
  .cad .cad-nav.nav-multi a.cad-nav-sub { padding-left: 12px; }
  .cad .cad-nav a.cad-nav-sub.active::before { left: 0; }
}

/* =======================================================================
   CALENDÁRIO OPERACIONAL (calendario-ui.js) — .cal-op-*
   Mês interativo, lista de feriados e calendário efetivo por obra. Cor por
   tipo de evento = tokens --cal-* (styles.css, apelidos dos semânticos).
   Celular (375 px): a grade de 7 colunas cabe sem rolagem lateral — o nome
   do feriado some da célula (fica a cor; o painel do dia mostra tudo).
   ======================================================================= */
.cal-op [hidden], .cal-op-form [hidden] { display: none !important; }
.cal-op-status { font-size: .82rem; color: var(--text-muted); margin: 0 0 10px; }
.cal-op-status.aviso { color: var(--warning-fg); }
.cal-op-barra { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; margin-bottom: 12px; }
.cal-op-barra > .btn { margin-bottom: 12px; }
.cal-op-campo { flex: 0 1 auto; min-width: 160px; }
.cal-op-busca { flex: 1 1 200px; }
.cal-op-mesnav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.cal-op-mesnav select { width: auto; }
.cal-op-resumo { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 10px; font-size: .86rem; color: var(--text-secondary); }
.cal-op-resumo b { font-size: 1.3rem; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.cal-op-leg { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .74rem; color: var(--text-muted); margin-bottom: 8px; }
.cal-op-leg span { display: inline-flex; align-items: center; gap: 5px; }
.cal-op-lg { width: 13px; height: 13px; border-radius: 3px; display: inline-block; border: 1px solid var(--border); background: var(--surface); }

/* grade do mês */
.cal-op-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-op-dow { text-align: center; font-size: .72rem; font-weight: 700; color: var(--text-muted); padding: 2px 0; }
.cal-op-dia {
  min-width: 0; min-height: 66px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 5px 6px; text-align: left; font: inherit; color: var(--text-primary); cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.cal-op-dia:hover { background: var(--surface-hover); }
.cal-op-dia:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 1px; }
.cal-op-dia.sab, .cal-op-lg.sab { background: var(--surface-2); }
.cal-op-dia.dom, .cal-op-dia.folga, .cal-op-lg.dom { background: var(--surface-3); color: var(--text-secondary); }
.cal-op-dia.ev-nacional, .cal-op-lg.ev-nacional, .cal-op-tag.ev-nacional { background: var(--cal-nacional-bg); border-color: var(--cal-nacional); }
.cal-op-dia.ev-estadual, .cal-op-lg.ev-estadual, .cal-op-tag.ev-estadual { background: var(--cal-estadual-bg); border-color: var(--cal-estadual); }
.cal-op-dia.ev-municipal, .cal-op-lg.ev-municipal, .cal-op-tag.ev-municipal { background: var(--cal-municipal-bg); border-color: var(--cal-municipal); }
.cal-op-dia.ev-obra, .cal-op-lg.ev-obra, .cal-op-tag.ev-obra { background: var(--cal-obra-bg); border-color: var(--cal-obra); }
.cal-op-dia.ev-pf, .cal-op-lg.ev-pf { background: var(--cal-pf-bg); border-color: var(--cal-pf); border-style: dashed; }
.cal-op-dia.hoje { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-op-dia[aria-pressed="true"] { outline: 2px solid var(--text-primary); outline-offset: 1px; }
.cal-op-dia.operacao .cal-op-n::after { content: " ✍"; font-weight: 400; }
.cal-op-n { font-weight: 700; font-variant-numeric: tabular-nums; }
.cal-op-ev {
  font-size: .68rem; line-height: 1.15; color: var(--text-secondary); overflow: hidden; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* painel do dia */
.cal-op-det { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--plate-sheen), var(--card); box-shadow: var(--edge-light), var(--elev-1); }
.cal-op-det-cab { font-size: 1rem; margin-bottom: 8px; }
.cal-op-cond { padding: 8px 10px; border-radius: var(--radius-sm); margin-bottom: 8px; font-size: .88rem; }
.cal-op-cond.exige { background: var(--info-bg); color: var(--info-fg); }
.cal-op-cond.dispensa { background: var(--success-bg); color: var(--success-fg); }
.cal-op-cond.folga { background: var(--surface-2); color: var(--text-secondary); }
.cal-op-reg { font-size: .85rem; margin-bottom: 8px; color: var(--text-secondary); }
.cal-op-evdet { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 8px; }
.cal-op-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 12px; margin: 6px 0; font-size: .85rem; }
.cal-op-dl dt { color: var(--text-muted); font-weight: 600; }
.cal-op-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.cal-op-tag { display: inline-block; font-size: .7rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-primary); }

/* lista de feriados */
.cal-op-lista { display: flex; flex-direction: column; gap: 8px; }
.cal-op-item { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 12px; background: var(--surface); }
.cal-op-item.inativo { opacity: .7; }
.cal-op-item-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cal-op-item-info { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .82rem; color: var(--text-secondary); margin: 6px 0 4px; }
.cal-op-item-info span { min-width: 0; overflow-wrap: anywhere; }
.cal-op-vazio-lista, .cal-op-nada { padding: 14px 4px; }

/* formulário */
.cal-op-check { display: flex; gap: 8px; align-items: flex-start; font-size: .86rem; margin: 8px 0 12px; cursor: pointer; }
.cal-op-check input { margin-top: 3px; flex: 0 0 auto; }
.cal-op-dica { font-size: .8rem; margin: 0 0 10px; }
.cal-op-info { font-size: .84rem; display: flex; flex-direction: column; gap: 4px; margin: 8px 0; color: var(--text-secondary); }
.cal-op-alerta { color: var(--warning-fg); }
.cal-op-erros ul { margin: 6px 0; padding-left: 18px; color: var(--danger-fg); font-size: .85rem; }

/* configurações: calendário efetivo por obra */
.cal-op-obras { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.cal-op-obra { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--plate-sheen), var(--card); box-shadow: var(--edge-light), var(--elev-1); min-width: 0; }
.cal-op-obra-cab { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.cal-op-camadas { list-style: none; padding: 0; margin: 0 0 8px; font-size: .85rem; }
.cal-op-camadas li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px dashed var(--border); }
.cal-op-camadas li b { text-align: right; }
.cal-op-camadas li.falta b { color: var(--danger-fg); }
.cal-op-camadas li.atencao b { color: var(--warning-fg); }
.cal-op-prox ul { margin: 4px 0 0; padding-left: 18px; font-size: .82rem; }

@media (max-width: 600px) {
  .cal-op-grade { gap: 3px; }
  .cal-op-dia { min-height: 44px; padding: 4px 2px; align-items: center; }
  .cal-op-ev { display: none; }
  .cal-op-dow { font-size: .66rem; }
  .cal-op-campo { flex: 1 1 100%; }
  .cal-op-obras { grid-template-columns: minmax(0, 1fr); }
  .cal-op-dl { grid-template-columns: minmax(0, 1fr); }
  .cal-op-dl dt { margin-top: 4px; }
}