/* ==========================================================================
   ERTEL — Cronograma Anual (52 semanas)
   ========================================================================== */

.ertel-cronograma-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--ertel-space-3);
  flex-wrap: wrap;
}

.ertel-cronograma-nav-ano {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.ertel-cronograma-ano-atual {
  font-size: var(--ertel-text-lg);
  font-weight: var(--ertel-weight-semibold);
  min-width: 48px;
  text-align: center;
}

.ertel-cronograma-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ertel-space-4);
  font-size: var(--ertel-text-xs);
  color: var(--ertel-muted);
  margin: var(--ertel-space-3) 0 var(--ertel-space-5);
}
.ertel-cronograma-legenda span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ertel-cronograma-legenda .ertel-cronograma-cel {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid var(--ertel-border);
}

.ertel-cronograma-secao {
  margin-bottom: var(--ertel-space-6);
}
.ertel-cronograma-secao-titulo {
  font-size: var(--ertel-text-md);
  font-weight: var(--ertel-weight-semibold);
  margin-bottom: var(--ertel-space-3);
}

/* Rolagem própria da tabela -- nunca deixar a página inteira rolar na
   horizontal por causa das 52 colunas (mesmo anti-padrão já corrigido
   várias vezes noutros módulos: grid/tabela larga precisa da PRÓPRIA
   barra de rolagem, isolada do layout ao redor).

   Duas barras horizontais sincronizadas via JS (`construirSecao`): uma
   fininha em cima (`-scroll-top`) e a de baixo, nativa do próprio
   container -- pedido explícito pra não precisar descer até o fim da
   lista só pra rolar os lados. A de baixo também rola VERTICAL
   (`max-height` + `overflow-y`), com o cabeçalho (nome/periodicidade/
   semanas) congelado via `position: sticky; top: 0` -- ver mais abaixo. */
.ertel-cronograma-scroll-top {
  overflow-x: auto;
  overflow-y: hidden;
  height: 14px;
  border: 1px solid var(--ertel-border);
  border-bottom: none;
  border-radius: var(--ertel-radius-lg) var(--ertel-radius-lg) 0 0;
  background: var(--ertel-surface);
}
.ertel-cronograma-scroll-top > div {
  height: 1px;
}
.ertel-cronograma-scroll {
  overflow: auto;
  max-height: 62vh;
  border: 1px solid var(--ertel-border);
  border-radius: 0 0 var(--ertel-radius-lg) var(--ertel-radius-lg);
  background: var(--ertel-surface);
}

/* table-layout: fixed -- essencial pra sticky column funcionar direito.
   Sob "auto" (padrão do navegador), o navegador pode calcular a largura
   real da 1ª coluna diferente do `width` do CSS quando o conteúdo é
   longo, desalinhando tudo que vem depois dela (era a causa raiz do
   "fora de posição" visto na tela). Com "fixed", a largura declarada é
   sempre respeitada. */
.ertel-cronograma-tabela {
  border-collapse: collapse;
  table-layout: fixed;
  font-size: var(--ertel-text-xs);
}

/* Nome e Periodicidade: colunas fixas (sticky), largura EXATA porque a
   tabela é `table-layout: fixed` (sem isso, a 2ª coluna sticky desalinha
   -- mesmo bug já corrigido uma vez nesta tela). Uma linha só, sem
   quebrar -- texto que não cabe corta com reticências (`title` no <a>
   mostra o nome inteiro ao passar o mouse) em vez de esticar a altura
   da linha, que era o que acontecia com o rótulo dobrando de tamanho. */
.ertel-cronograma-th-nome,
.ertel-cronograma-td-nome {
  position: sticky;
  left: 0;
  width: 200px;
  max-width: 200px;
  background: var(--ertel-surface);
  text-align: left;
  padding: 6px 10px;
  border-right: 1px solid var(--ertel-border);
  border-bottom: 1px solid var(--ertel-border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ertel-cronograma-td-nome a {
  color: var(--ertel-ink);
  font-weight: var(--ertel-weight-semibold);
  text-decoration: none;
}
.ertel-cronograma-td-nome a:hover {
  color: var(--ertel-primary);
}

.ertel-cronograma-th-periodicidade,
.ertel-cronograma-td-periodicidade {
  position: sticky;
  left: 200px;
  width: 150px;
  max-width: 150px;
  background: var(--ertel-surface);
  color: var(--ertel-muted);
  text-align: left;
  padding: 6px 10px;
  border-right: 1px solid var(--ertel-border);
  border-bottom: 1px solid var(--ertel-border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ertel-cronograma-th-semana {
  min-width: 20px;
  max-width: 20px;
  text-align: center;
  font-weight: var(--ertel-weight-semibold);
  color: var(--ertel-muted);
  padding: 4px 2px;
  border-bottom: 1px solid var(--ertel-border);
  background: var(--ertel-surface-alt);
}

/* Cabeçalho congelado (linha do calendário) -- fica visível rolando a
   lista de itens pra baixo dentro do `max-height` do container.
   z-index em camadas: célula comum (sem sticky) < coluna sticky (1) <
   linha sticky (2) < canto duplamente-sticky, nome/periodicidade no
   cabeçalho (3), que precisa vencer tanto quem rola por baixo quanto
   quem rola pro lado. */
.ertel-cronograma-th-nome,
.ertel-cronograma-th-periodicidade,
.ertel-cronograma-th-semana {
  position: sticky;
  top: 0;
  background: var(--ertel-surface-alt);
  z-index: 2;
}
.ertel-cronograma-th-nome,
.ertel-cronograma-th-periodicidade {
  z-index: 3;
}
.ertel-cronograma-td-nome,
.ertel-cronograma-td-periodicidade {
  z-index: 1;
}

/* Borda sempre na cor do fundo da página (`--ertel-canvas`), NUNCA na cor
   do próprio status -- com periodicidade semanal, várias células da mesma
   cor ficam lado a lado, e uma borda igual ao preenchimento (jeito antigo)
   sumia visualmente, virando uma barra sólida sem separação de semana
   nenhuma. Com a borda sempre contrastando, cada célula continua
   distinguível da vizinha mesmo em uma sequência inteira da mesma cor. */
.ertel-cronograma-cel {
  min-width: 20px;
  max-width: 20px;
  height: 20px;
  border: 2px solid var(--ertel-canvas);
  background: var(--ertel-canvas);
}
/* 3 cores + 1 neutra, sem sobreposição de significado: amarelo = ainda vai
   acontecer, verde = já aconteceu de verdade, vermelho = venceu sem
   confirmação, cinza = não dá pra confirmar ainda (ver comentário no JS
   sobre `semRastreio`). */
.ertel-cronograma-cel[data-status="programado"] {
  background: var(--ertel-warning);
}
.ertel-cronograma-cel[data-status="executado"] {
  background: var(--ertel-success);
}
.ertel-cronograma-cel[data-status="nao-realizado"] {
  background: var(--ertel-danger);
}
.ertel-cronograma-cel[data-status="sem-rastreio"] {
  background: var(--ertel-muted);
  opacity: 0.5;
}
/* Célula com previsão (qualquer status) abre o detalhe da ocorrência ao
   clicar (ver cronograma-view.js) -- leve destaque ao passar o mouse pra
   indicar que é clicável, só dentro da TABELA (nunca na legenda, que usa
   a mesma classe só pra mostrar a cor). */
.ertel-cronograma-tabela .ertel-cronograma-cel[data-status]:not([data-status=""]):hover {
  outline: 2px solid var(--ertel-primary);
  outline-offset: -2px;
}

/* Popup de resumo rápido (mouseenter/mouseleave de cada quadradinho, ver
   mostrarTooltipCelula em cronograma-view.js) -- pequeno, com fundo
   semitransparente pra não atrapalhar a visão do calendário atrás dele,
   nunca captura o mouse (deixa o mouseleave da célula disparar mesmo se o
   popup nascer por cima de outra coisa). */
.ertel-cronograma-tooltip {
  position: absolute;
  z-index: 500;
  width: 240px;
  padding: var(--ertel-space-3);
  border-radius: var(--ertel-radius-md);
  border: 1px solid var(--ertel-border);
  background: color-mix(in srgb, var(--ertel-surface-alt) 92%, transparent);
  backdrop-filter: blur(2px);
  box-shadow: var(--ertel-shadow-md, 0 4px 16px rgba(0,0,0,0.35));
  color: var(--ertel-ink);
  font-size: var(--ertel-text-xs);
  line-height: 1.4;
  pointer-events: none;
}
.ertel-cronograma-tooltip strong {
  display: block;
  font-size: var(--ertel-text-sm);
  margin-bottom: 2px;
}
.ertel-cronograma-tooltip__dica {
  margin-top: 4px;
  color: var(--ertel-muted);
  font-style: italic;
}

/* Sticky à esquerda também -- sem isso, ao rolar a tabela pros lados o
   nome do equipamento (que só existe no início da linha) some atrás
   das colunas de semana, cortado no meio do texto. */
.ertel-cronograma-grupo {
  position: sticky;
  left: 0;
  background: var(--ertel-surface-alt);
  color: var(--ertel-ink);
  font-weight: var(--ertel-weight-semibold);
  font-size: var(--ertel-text-sm);
  padding: 8px 10px;
  border-bottom: 1px solid var(--ertel-border);
  white-space: nowrap;
}

.ertel-cronograma-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--ertel-space-3);
  margin: var(--ertel-space-4) 0 var(--ertel-space-3);
}

/* -- Calendário de OS por Equipamento (mês/dia) --------------------------
   Grade própria deste módulo, NUNCA reaproveitando classes de
   `agenda/agenda.css` (mesmo padrão visual, dado/import isolados —
   ver comentário de topo de calendario-mensal-os.js). */
.ertel-cal-os__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ertel-space-4);
}
.ertel-cal-os__titulo {
  font-size: var(--ertel-text-base);
  font-weight: var(--ertel-weight-semibold);
}
.ertel-cal-os__contagem {
  color: var(--ertel-muted);
  font-weight: var(--ertel-weight-regular);
  font-size: var(--ertel-text-sm);
}
.ertel-cal-os__semana {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
}
.ertel-cal-os__semana span {
  text-align: center;
  font-size: 10.5px;
  color: var(--ertel-muted);
  text-transform: uppercase;
  font-weight: 600;
}
.ertel-cal-os__grade {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.ertel-cal-os__dia {
  min-height: 84px;
  padding: 4px;
  border-radius: var(--ertel-radius-sm);
  background: var(--ertel-surface-alt);
  overflow: hidden;
}
.ertel-cal-os__dia--vazio { background: none; }
.ertel-cal-os__dia--com-os { cursor: pointer; transition: background var(--ertel-transition-fast); }
.ertel-cal-os__dia--com-os:hover { background: var(--ertel-primary-soft); }
.ertel-cal-os__dia--hoje { box-shadow: inset 0 0 0 2px var(--ertel-primary); }
.ertel-cal-os__dia--sabado { background: rgba(76, 124, 255, 0.10); }
.ertel-cal-os__dia--domingo { background: rgba(239, 68, 68, 0.10); }
.ertel-cal-os__numero {
  font-size: 11px;
  font-weight: 600;
  color: var(--ertel-ink-soft);
}
.ertel-cal-os__chips {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 3px;
}
.ertel-cal-os__chip {
  display: block;
  font-size: 9.5px;
  color: #fff;
  padding: 1px 4px;
  border-radius: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
}
.ertel-cal-os__mais {
  font-size: 9px;
  color: var(--ertel-primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-align: left;
}

.ertel-cal-os-dia-modal__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}
.ertel-cal-os-dia-modal {
  background: var(--ertel-surface);
  border-radius: var(--ertel-radius-md);
  padding: var(--ertel-space-5);
  min-width: 320px;
  max-width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
}
.ertel-cal-os-dia-modal__topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--ertel-space-3);
}
.ertel-cal-os-dia-modal__lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ertel-cal-os-dia-modal__linha {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--ertel-radius-sm);
  background: var(--ertel-surface-alt);
  text-decoration: none;
  color: var(--ertel-ink);
  font-size: var(--ertel-text-sm);
}
.ertel-cal-os-dia-modal__linha:hover { background: var(--ertel-primary-soft); }
.ertel-cal-os-dia-modal__ponto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ertel-cal-os-dia-modal__equip { flex: 1; }
.ertel-cal-os-dia-modal__numero { color: var(--ertel-muted); }
.ertel-cal-os-dia-modal__status { color: var(--ertel-muted); font-size: var(--ertel-text-xs); }