/*
  RDOOne — Diário de Obra (ETAPA RDO 35.12, consolidação de UI)

  Padrão visual compartilhado pelas 7 seções operacionais do RDO (Mão de obra, Equipamentos,
  Veículos, Materiais, Atividades, Ocorrências, Fotos). Antes desta etapa, cada seção repetia a
  mesma estrutura (MudStack de cabeçalho + título + botão) sem nenhuma classe em comum — este
  arquivo só nomeia/consolida o que já existia, não introduz layout novo (item 26 do pedido:
  "não criar um design system inteiro, apenas extrair padrões realmente repetidos").
*/

.rdo-section {
    scroll-margin-top: 12px; /* âncora do índice não esconde o título atrás do topo da página */
}

.rdo-section-header {
    gap: 12px;
}

/* Botão de ação do cabeçalho de seção (RdoBotaoSecao.razor e o menu de Atividades). Variante, cor e
   tamanho vêm do componente; aqui só a largura mínima, para os botões das seções ficarem alinhados
   pela borda esquerda ao longo da rolagem, mesmo quando o rótulo varia ("Adicionar", "Aplicar"). */
.rdo-section-action {
    min-width: 124px;
}

/* Título de cada card do RDO — "Detalhes do relatório", "Condição climática", "Mão de obra"… Em negrito
   e na cor de ação do tema, não numa cor nova: o relatório é uma pilha longa de cards de peso visual
   igual, e sem destaque no título quem rola perde a conta de onde está.

   Dois seletores porque a classe aparece em dois formatos: no próprio texto, quando o card não tem
   botão de ação ("Detalhes do relatório"), e no contêiner da linha, quando tem — aí só o primeiro
   filho é o título, e pintar o contêiner inteiro levaria junto os botões. */
.mud-typography.rdo-section-header,
.rdo-section-header > .mud-typography:first-child {
    font-weight: 700;
    color: var(--mud-palette-primary, #2563EB);
}

.rdo-section-empty {
    opacity: 0.7;
}

/* A faixa de navegação interna (.rdo-quick-nav) saiu junto com o bloco solto de responsável/
   observações: cada módulo virou um cartão próprio, então a tela já se lê por rolagem, sem índice. */

/* Cabeçalho "Detalhes do relatório" do RDO aberto (RdoCabecalhoDetalhes.razor) — tabela de
   identificação do documento, no formato pedido pelo usuário (bloco impresso do relatório: logo +
   dados do relatório + dados da obra). Tabela HTML pura de propósito: MudTable é para listas de
   dados, não para layout com rowspan/colspan. */
.rdo-cabecalho {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 13px;
}

    .rdo-cabecalho th,
    .rdo-cabecalho td {
        border: 1px solid var(--mud-palette-lines-default, #e0e0e0);
        padding: 8px 10px;
        text-align: left;
        vertical-align: middle;
        word-break: break-word;
    }

    /* Rótulos: mesmo peso visual dos "caption" usados no resto do RDO, sem virar cabeçalho de tabela
       de dados (não há ordenação nem semântica de coluna aqui). */
    .rdo-cabecalho th {
        width: 14%;
        font-weight: 600;
        background: var(--mud-palette-background-gray, #F8FAFC);
        white-space: nowrap;
    }

.rdo-cabecalho-logo {
    text-align: center;
    padding: 12px;
}

    .rdo-cabecalho-logo img {
        max-width: 100%;
        max-height: 84px;
        object-fit: contain;
    }

.rdo-cabecalho-logo-vazio {
    font-weight: 700;
    opacity: 0.55;
}

.rdo-cabecalho-titulo {
    text-align: center;
    font-weight: 700;
    font-size: 14px;
}

/* Em telas estreitas a tabela de 6 colunas não cabe: rola horizontalmente em vez de espremer os
   valores (mesmo princípio já usado nas tabelas largas do sistema). */
@media (max-width: 720px) {
    .rdo-cabecalho-wrapper {
        overflow-x: auto;
    }

    .rdo-cabecalho {
        min-width: 640px;
    }
}

/* Bloco de condição climática (RdoClimaSecao.razor): duas tabelinhas (Tempo por período e Condição por
   período) no formato do modelo de referência. Tabela HTML pura pelo mesmo motivo do cabeçalho —
   MudTable é para listas de dados. */
.rdo-clima {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .rdo-clima th,
    .rdo-clima td {
        border: 1px solid var(--mud-palette-lines-default, #e0e0e0);
        padding: 2px 8px;
        text-align: center;
        white-space: nowrap;
    }

    .rdo-clima th {
        font-weight: 600;
        background: var(--mud-palette-background-gray, #F8FAFC);
    }

        /* Primeira coluna (o período) alinhada à esquerda; as demais são só o radio, centralizado. */
        .rdo-clima th:first-child,
        .rdo-clima .rdo-clima-periodo {
            text-align: left;
        }

.rdo-clima-periodo {
    font-weight: 600;
}

/* O MudCheckBox traz margem própria pensada para formulário em coluna; dentro da célula isso vira
   desalinhamento vertical. */
.rdo-clima .mud-input-control,
.rdo-clima .mud-checkbox {
    margin: 0;
}

/* Rádio nativo (ver o porquê no cabeçalho de RdoClimaSecao.razor): accent-color o alinha à paleta do
   tema sem reimplementar o desenho do controle. */
.rdo-clima-radio {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--mud-palette-primary, #594ae2);
    cursor: pointer;
}

    .rdo-clima-radio:disabled {
        cursor: default;
        opacity: 0.4;
    }

/* Mão de obra (RdoMaoDeObraSecao.razor): planilha de apontamento de ponto, editável na própria linha.
   Tabela HTML pura como o cabeçalho e o clima — MudTable resolveria a listagem, mas aqui cada linha é
   um formulário (select + três campos mascarados), e o wrapper de MudTable só atrapalharia o
   alinhamento das colunas estreitas de horário. */
.rdo-mao-de-obra {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .rdo-mao-de-obra th,
    .rdo-mao-de-obra td {
        border: 1px solid var(--mud-palette-lines-default, #e0e0e0);
        padding: 1px 6px;
        text-align: left;
        vertical-align: middle;
    }

    .rdo-mao-de-obra th {
        font-weight: 600;
        background: var(--mud-palette-background-gray, #F8FAFC);
        white-space: nowrap;
    }

    /* Colunas de horário: só o necessário para caber "00:00", deixando a largura sobrando para nome e
       função, que são os campos de texto livre. */
    .rdo-mao-de-obra th:nth-child(n+4),
    .rdo-mao-de-obra td:nth-child(n+4) {
        width: 110px;
        white-space: nowrap;
    }

/* Grupo de mão de obra ("Própria", "Terceiros"...) como sub-linha do nome, igual ao modelo impresso.
   Entrelinha colada: são duas linhas de texto numa célula que precisa competir em altura com um campo
   de formulário na célula ao lado. */
.rdo-mao-de-obra-grupo {
    font-size: 11px;
    line-height: 1.1;
    opacity: 0.6;
}

.rdo-mao-de-obra td > div:first-child {
    line-height: 1.2;
}

.rdo-mao-de-obra-horas {
    font-weight: 600;
    text-align: center !important;
}

/* Campos dentro da célula não devem carregar a margem de formulário em coluna do MudBlazor. */
.rdo-mao-de-obra .mud-input-control {
    margin: 0;
}

/* Altura da linha: o que fazia o bloco crescer não era o padding da célula (já em 4px), era a altura
   dos controles do MudBlazor dentro dela — mesmo em Margin.Dense eles nascem com os 36px de
   --control-height, pensados para formulário, não para uma tabela de dezenas de linhas. Aqui cada
   pessoa é uma linha, e um RDO com 57 pessoas empurrava as seções seguintes para fora da tela.

   24px é o menor valor em que o texto "00:00" continua centrado e o campo ainda é clicável com o
   mouse. Não basta baixar o campo: o contêiner do MudBlazor traz padding e margem próprios, e sem
   zerá-los a linha continuava alta com um campo pequeno dentro. Escopo restrito a esta tabela de
   propósito: é ajuste de densidade deste bloco, não uma mudança na escala de controles do app. */
.rdo-mao-de-obra .mud-input-control .mud-input-slot,
.rdo-mao-de-obra .mud-input-control input,
.rdo-mao-de-obra .mud-input-control .mud-select-input {
    height: 24px;
    min-height: 24px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 24px;
    font-size: 13px;
}

.rdo-mao-de-obra .mud-input-control .mud-input {
    min-height: 24px;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* A seta do seletor de presença é o que sobrava mais alto depois de tudo: ela vem no tamanho de ícone
   de formulário e reimpunha a altura antiga à linha inteira. */
.rdo-mao-de-obra .mud-input-adornment .mud-icon-root,
.rdo-mao-de-obra .mud-select .mud-input-adornment .mud-icon-button {
    height: 20px;
    width: 20px;
    padding: 0;
    font-size: 18px;
}

/* Blocos do diálogo de lançamento de atividade (Mão de obra, Campos personalizados, Fotos). Existem
   como seção, não como caixa: o padding lateral de um MudPaper empurrava título e campos para dentro e
   quebrava o eixo esquerdo que a etapa, a tarefa e o comentário compartilham. O que separa as seções é
   o divisor acima de cada uma. */
.rdo-atividade-bloco {
    padding: 0;
}

    /* MudGrid usa margem negativa nas laterais para compensar o próprio gutter; dentro do bloco isso
       deslocaria os campos alguns pixels à esquerda dos vizinhos de fora. */
    .rdo-atividade-bloco .mud-grid {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

    .rdo-atividade-bloco .mud-grid > .mud-grid-item:first-child {
        padding-left: 0;
    }

/* Os campos de 34px do diálogo de atividade vêm de .form-compacto (density.css): o bloco que vivia
   aqui como .rdo-atividade-compacto virou essa classe genérica em 27/09/2026, quando o cadastro de
   obra passou a usar a mesma densidade. */

/* Uma pessoa por linha, apertada: nome, cargo, total e dois ícones. A janela própria (início/fim/
   intervalo) só abre a pedido, abaixo da linha. A borda fina separa as pessoas sem gastar margem. */
.rdo-atividade-pessoa {
    padding: 2px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.rdo-atividade-pessoa:last-child {
    border-bottom: none;
}

.rdo-atividade-pessoa .mud-icon-button {
    padding: 4px;
}

/* Atividades (RdoAtividadeSecao.razor): lista em blocos, não tabela. Cada lançamento carrega etapa,
   tarefa, comentário, campos personalizados e as pessoas que trabalharam nele — informação demais para
   caber em colunas de largura fixa, e foi assim que o modelo de referência resolveu. */
.rdo-atividade {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--mud-palette-lines-default, #e0e0e0);
}

    .rdo-atividade:last-child {
        border-bottom: none;
    }

.rdo-atividade-corpo {
    flex: 1 1 auto;
    min-width: 0; /* deixa o texto quebrar em vez de esticar a linha inteira */
}

.rdo-atividade-etapa {
    font-size: 12px;
    opacity: 0.6;
}

.rdo-atividade-titulo {
    font-size: 14px;
    font-weight: 600;
}

.rdo-atividade-codigo {
    font-weight: 400;
    opacity: 0.75;
}

/* Comentário em itálico, como no modelo: é a fala do dia, não um rótulo do sistema. */
.rdo-atividade-comentario {
    font-style: italic;
    font-size: 13px;
    opacity: 0.75;
    margin-top: 2px;
}

.rdo-atividade-campos {
    font-size: 12px;
    opacity: 0.8;
    margin-top: 2px;
}

/* Medidas à direita, alinhadas entre si — quem varre a lista lê horas e avanço em coluna. */
.rdo-atividade-medidas {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    white-space: nowrap;
}

.rdo-atividade-horas {
    opacity: 0.75;
}

.rdo-atividade-avanco {
    font-weight: 600;
}

.rdo-atividade-fotos,
.rdo-atividade-classificacao {
    opacity: 0.7;
}

/* Miniaturas das fotos anexadas na atividade. Tamanho fixo e quadrado com object-fit: cover — uma
   grade regular é lida de relance, e foto de obra vem em retrato e paisagem na mesma lista. Quebram
   de linha em vez de rolar: a linha da atividade não deve ganhar barra de rolagem horizontal. */
.rdo-atividade-miniaturas {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.rdo-atividade-miniatura {
    display: block;
    width: 56px;
    height: 56px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default, #e0e0e0);
    line-height: 0;
}

    .rdo-atividade-miniatura:hover {
        border-color: var(--mud-palette-primary, #594ae2);
    }

    .rdo-atividade-miniatura img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.rdo-atividade-acoes {
    flex: 0 0 auto;
}

/* Em tela estreita as medidas descem para baixo do texto em vez de espremer o nome da tarefa. */
@media (max-width: 720px) {
    .rdo-atividade {
        flex-wrap: wrap;
    }

    .rdo-atividade-corpo {
        flex: 1 1 100%;
    }
}

/* Assinatura manual (RdoAssinaturaSecao / RdoAssinaturaDialog). O espaço de assinatura tem altura fixa
   com ou sem traço: sem isso a linha de assinatura pularia de lugar ao assinar, e os dois espaços
   ficariam em alturas diferentes. */
/* Um cartão por espaço de assinatura, no formato do app de referência (29/09/2026): título em caixa
   alta, e-mail de quem deve assinar, a situação, o traço, a linha e, embaixo, nome, e-mail e cargo.
   Flex com quebra: o modelo pode ter de 1 a 4 espaços, e cada cartão tem largura própria. */
.rdo-assinatura-cartoes {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.rdo-assinatura-cartao {
    flex: 1 1 260px;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 16px 14px;
    border: 1px solid var(--mud-palette-lines-default, #e0e0e0);
    border-radius: 6px;
    background: var(--mud-palette-surface);
    text-align: center;
}

.rdo-assinatura-titulo {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.rdo-assinatura-esperado {
    font-size: 0.75rem;
    opacity: 0.75;
    margin-top: 2px;
}

.rdo-assinatura-situacao {
    margin-top: 6px;
}

.rdo-assinatura-nome {
    font-size: 0.8125rem;
    margin-top: 4px;
}

.rdo-assinatura-dado {
    font-size: 0.75rem;
    opacity: 0.75;
    line-height: 1.3;
}

.rdo-assinatura-data {
    margin-top: 2px;
}

.rdo-assinatura-quadro-cadastrada {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 8px;
}

.rdo-assinatura-espaco {
    height: 80px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    max-width: 280px;
}

.rdo-assinatura-imagem {
    max-height: 80px;
    max-width: 100%;
    object-fit: contain;
    /* mix-blend-mode: o PNG vai com fundo branco (para imprimir e para o tema escuro), e sem isso o
       retângulo branco apareceria recortado sobre o fundo da página. */
    mix-blend-mode: multiply;
}

.rdo-assinatura-linha {
    width: 100%;
    max-width: 280px;
    border-bottom: 1px solid var(--mud-palette-text-primary, #424242);
}

/* Quadro de desenho do diálogo: proporção fixa e toque desabilitado para o dedo assinar em vez de
   rolar a página. */
.rdo-assinatura-quadro {
    border: 1px dashed var(--mud-palette-lines-default, #bdbdbd);
    border-radius: 4px;
    background: #fff;
}

.rdo-assinatura-canvas {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 800 / 250;
    touch-action: none;
    cursor: crosshair;
}

/* Resumo de horas por colaborador, no rodapé das atividades: confere o que foi apontado nas frentes
   contra o ponto lançado na mão de obra do dia. */
.rdo-atividade-resumo {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--mud-palette-lines-default, #e0e0e0);
    font-size: 12px;
}

.rdo-atividade-resumo-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 2px 0;
}

.rdo-atividade-resumo-nome {
    min-width: 240px;
    font-weight: 600;
}

/* Vermelho só na linha inconsistente: quem está certo não precisa competir por atenção. */
.rdo-atividade-resumo-alerta {
    color: var(--mud-palette-error, #f44336);
}

.rdo-atividade-resumo-aviso {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
}

/* Sete colunas com campos de entrada não cabem em telas estreitas: rola na horizontal em vez de
   espremer os horários, mesmo princípio do cabeçalho do relatório. */
/* Teto de altura: o bloco para de crescer a partir de ~10 pessoas e o resto rola por dentro. Sem isso,
   uma equipe de 57 empurrava clima, equipamentos, veículos, materiais e atividades para centenas de
   pixels abaixo, e chegar na assinatura virava uma expedição. O cabeçalho fica fixo no topo da rolagem
   — uma tabela de ponto sem cabeçalho visível não se lê.

   O limite é em vh, não em pixels: numa tela baixa ele encolhe junto, em vez de ocupar a janela toda. */
.rdo-mao-de-obra-wrapper {
    overflow-x: auto;
    overflow-y: auto;
    max-height: min(420px, 50vh);
}

.rdo-mao-de-obra-wrapper .rdo-mao-de-obra {
    min-width: 840px;
}

    .rdo-mao-de-obra-wrapper .rdo-mao-de-obra th {
        position: sticky;
        top: 0;
        z-index: 1;
    }

/* ============================================================================
   Controle da obra (ControleObraSecao.razor) — visão gerencial que lê o
   planejamento e o realizado juntos. Cards sóbrios e um gráfico só: é tela de
   controle de obra, não dashboard de BI.
   ============================================================================ */
.controle-card {
    border: 1px solid var(--mud-palette-lines-default, #e0e0e0);
    border-radius: 6px;
    padding: 12px 14px;
    height: 100%;
}

.controle-card-rotulo {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.65;
}

.controle-card-valor {
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    margin-top: 2px;
}

/* Indicador sem base é cinza e discreto: não compete por atenção com os que têm
   número de verdade, e fica claro que é ausência de dado, não zero. */
.controle-card-indisponivel {
    opacity: 0.35;
}

.controle-card-nota {
    font-size: 11px;
    opacity: 0.7;
    margin-top: 2px;
}

.controle-card-alerta {
    border-color: var(--mud-palette-error, #f44336);
}

    .controle-card-alerta .controle-card-valor {
        color: var(--mud-palette-error, #f44336);
    }

/* O SVG acompanha a largura do container — nenhuma dimensão fixa, para a curva
   funcionar de 1920 a 768 sem rolagem horizontal. */
.controle-curva-svg {
    width: 100%;
    height: auto;
    display: block;
}

.controle-curva-grade {
    stroke: var(--mud-palette-lines-default, #e0e0e0);
    stroke-width: 1;
}

.controle-curva-linha {
    fill: none;
    stroke: var(--mud-palette-primary, #594ae2);
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.controle-curva-ponto {
    fill: var(--mud-palette-primary, #594ae2);
}

/* Rótulos dos eixos (valores em horas e as duas datas das pontas).

   O SVG tem viewBox de 1000 unidades e ocupa 100% da largura do container, então TUDO dentro dele é
   escalado — inclusive o texto. Como a escala é (largura do container ÷ 1000), o tamanho em unidades
   precisa ser INVERSAMENTE proporcional à largura, relação que o CSS não expressa numa declaração só
   (nem com clamp, nem com unidades de container query, que são todas diretamente proporcionais). Daí
   os degraus abaixo.

   Os gráficos ficam EMPILHADOS, cada um com a largura inteira do conteúdo, e o viewBox tem 1600
   unidades (CurvaSSecao.LarguraDoGrafico). O conteúdo é a tela menos ~360px de sidebar e margens, então
   o tamanho que dá ~12px na tela é aproximadamente 19200 ÷ (largura da tela − 360). A escada abaixo
   segue essa conta — cresce conforme a tela estreita, nunca o contrário. O alvo é ~12px, um pouco
   acima do --font-size-caption do app, porque rótulo de eixo é lido de relance.

   Ao mexer, conferir nas duas pontas (1920 e 1024): um valor único só acerta uma delas. E lembrar que
   o teto não é a legibilidade, é a margem do eixo — o rótulo mais longo ("10120 h") ocupa ~3,6 vezes
   o font-size e precisa caber nas 102 unidades entre a borda e a grade; por isso o último degrau para
   em 28. */
.controle-curva-eixo {
    font-size: 13px;
    fill: var(--mud-palette-text-secondary, #757575);
}

@media (max-width: 1759px) {
    .controle-curva-eixo {
        font-size: 15px;
    }
}

@media (max-width: 1599px) {
    .controle-curva-eixo {
        font-size: 17px;
    }
}

@media (max-width: 1439px) {
    .controle-curva-eixo {
        font-size: 20px;
    }
}

@media (max-width: 1279px) {
    .controle-curva-eixo {
        font-size: 24px;
    }
}

@media (max-width: 1099px) {
    .controle-curva-eixo {
        font-size: 28px;
    }
}

/* ---------- Tabela semanal (abaixo do gráfico de barras) ----------

   Uma coluna por semana, na mesma ordem das barras, para a tabela se ler como o gráfico. Numa obra longa
   ela rola na horizontal dentro da própria moldura, sem empurrar a página, e a coluna dos rótulos fica
   presa à esquerda — sem isso, rolando até a semana 30, ninguém sabe mais qual linha é o planejado. */
.controle-semanal-rolagem {
    overflow-x: auto;
    border: 1px solid var(--mud-palette-lines-default, #e0e0e0);
    border-radius: 4px;
}

.controle-semanal {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    white-space: nowrap;
}

    .controle-semanal th,
    .controle-semanal td {
        padding: 4px 8px;
        border-bottom: 1px solid var(--mud-palette-lines-default, #e0e0e0);
        text-align: right;
    }

    .controle-semanal thead th {
        background-color: var(--mud-palette-background-gray, #F8FAFC);
        font-weight: 600;
    }

    .controle-semanal tbody tr:last-child th,
    .controle-semanal tbody tr:last-child td {
        border-bottom: none;
    }

/* Fundo opaco obrigatório: presa à esquerda, a coluna passa POR CIMA das semanas ao rolar, e com fundo
   transparente os números das duas se sobreporiam. */
.controle-semanal-rotulo {
    position: sticky;
    left: 0;
    z-index: 1;
    text-align: left !important;
    font-weight: 600;
    background-color: var(--mud-palette-surface, #fff);
    border-right: 1px solid var(--mud-palette-lines-default, #e0e0e0);
}

.controle-semanal thead .controle-semanal-rotulo {
    background-color: var(--mud-palette-background-gray, #F8FAFC);
}

/* O total é a mesma leitura dos cards do topo — destacado para ser achado sem contar colunas. */
.controle-semanal-total {
    font-weight: 700;
    background-color: var(--mud-palette-background-gray, #F8FAFC);
    border-left: 1px solid var(--mud-palette-lines-default, #e0e0e0);
}

.controle-semanal-desvio td,
.controle-semanal-desvio th {
    border-top: 1px solid var(--mud-palette-lines-default, #e0e0e0);
}

/* A tabela de atenção rola sozinha em tela estreita, sem empurrar a página. */
.controle-tabela-wrapper {
    overflow-x: auto;
}

/* Duas séries na mesma curva: planejado tracejado (é previsão), trabalhado sólido (é medição). A
   distinção não é só a cor, para sobreviver a quem imprime em preto e branco. */
.controle-curva-planejado {
    stroke: var(--mud-palette-text-secondary, #757575);
    stroke-dasharray: 6 4;
}

.controle-curva-trabalhado {
    stroke: var(--mud-palette-primary, #594ae2);
}

.controle-curva-ponto-trabalhado {
    fill: var(--mud-palette-primary, #594ae2);
}

.controle-legenda {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    opacity: 0.8;
}

.controle-legenda-cor {
    width: 18px;
    height: 0;
    border-top-width: 2.5px;
}

.controle-legenda-planejado {
    border-top-style: dashed;
    border-top-color: var(--mud-palette-text-secondary, #757575);
}

.controle-legenda-trabalhado {
    border-top-style: solid;
    border-top-color: var(--mud-palette-primary, #594ae2);
}

/* Largura do seletor de data de referência. Fica num container em volta, e não no Style do próprio
   MudDatePicker: aplicada ao componente, a restrição descia para o popover e o calendário abria
   espremido, com o cabeçalho da data quebrando em três linhas. */
.controle-data-referencia {
    max-width: 200px;
    width: 100%;
}

/* Rede de proteção: o calendário precisa da largura de uma semana inteira, qualquer que seja o campo
   que o abriu. 312px é a largura natural do painel do MudBlazor (7 colunas). */
.mud-picker-inline-paper {
    min-width: 312px;
}

/* ---- Refinamento 37.1: leitura da tela de controle ---- */

/* Área sob a série trabalhada. Quando as horas gastas são uma fração pequena das planejadas, a linha
   encosta no eixo e desaparece; o preenchimento dá corpo à série sem deslocar nenhum valor. */
.controle-curva-area-trabalhado {
    fill: var(--mud-palette-primary, #594ae2);
    opacity: 0.12;
    stroke: none;
}

.controle-curva-ponto-planejado {
    fill: var(--mud-palette-text-secondary, #757575);
}

/* Barras do ritmo semanal — mesma linguagem visual da Curva S, sem paleta nova: planejado no cinza
   secundário (é previsão), trabalhado no primário (é medição). Como barra não tem tracejado, o
   planejado fica translúcido e o trabalhado sólido, mantendo a distinção para quem imprime em preto
   e branco ou não distingue as duas cores. */
.controle-barra {
    stroke: none;
}

.controle-barra-planejado {
    fill: var(--mud-palette-text-secondary, #757575);
    opacity: 0.45;
}

.controle-barra-trabalhado {
    fill: var(--mud-palette-primary, #594ae2);
}

/* Faixa invisível de hover cobrindo a coluna inteira: sem ela, o tooltip exigiria acertar um círculo de
   3 px colado no eixo inferior. */
.controle-curva-faixa {
    fill: transparent;
    cursor: help;
}

    .controle-curva-faixa:hover {
        fill: var(--mud-palette-action-default, #424242);
        fill-opacity: 0.06;
    }

/* Observações de metodologia: bloco próprio com ícone, não texto solto no rodapé — elas explicam o que
   os cards NÃO cobrem e precisam ser lidas junto com eles. */
.controle-ressalvas {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 8px 10px;
    border-left: 3px solid var(--mud-palette-info, #2196f3);
    background: var(--mud-palette-background-gray, #F8FAFC);
    border-radius: 0 4px 4px 0;
    font-size: 12px;
    line-height: 1.5;
    opacity: 0.9;
}

.controle-ressalvas-icone {
    color: var(--mud-palette-info, #2196f3);
    flex: 0 0 auto;
    margin-top: 1px;
}

/* Cobertura dentro do card: precisa ser visível sem competir com o número principal. */
.controle-card-ressalva {
    margin-top: 2px;
    font-weight: 600;
    opacity: 0.85;
}

/* ---------- Espelho de previsto × realizado (Controle) ----------

   A tabela é leitura, não edição: nada aqui tem hover de ação nem botão. As três colunas numéricas ficam
   alinhadas à direita porque é assim que percentuais se comparam de relance entre linhas vizinhas — à
   esquerda, "9%" e "90%" começam no mesmo pixel e enganam. */
.espelho-col-num {
    text-align: right;
    white-space: nowrap;
    width: 110px;
}

.espelho-col-eap {
    white-space: nowrap;
    width: 80px;
    opacity: 0.7;
}

/* O resumo em negrito é o que preserva a leitura de árvore depois que o recuo já gastou a indentação:
   numa EAP de quatro níveis, só o recuo não distingue um resumo profundo de uma folha rasa. */
.espelho-resumo {
    font-weight: 600;
}

/* A coluna Status: bola vermelha, bola verde e visto, na linha do "Status Término" do MS Project.
   Estreita e centralizada — é sinal, não número, e alinhá-la à direita junto com os percentuais faria
   o olho procurar um valor onde não há. */
.espelho-col-status {
    width: 64px;
    text-align: center;
}

/* Os totais do cabeçalho repetem o que o card "Avanço das tarefas" já diz. Repetição de propósito: a
   tabela pode estar rolada para longe dos cards, e um percentual de linha sem o total da obra ao lado
   não responde "e a obra, como está?". */
.espelho-total {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}

.espelho-total-rotulo {
    font-size: 0.75rem;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.espelho-total-valor {
    font-size: 1.05rem;
    font-weight: 600;
}

/* ---------- Boletim de medição ----------

   Tabela HTML pura, no formato do boletim em papel: uma coluna dupla (% e R$) por medição, o acumulado
   destacado no fim, blocos avulsos abaixo das tarefas e o rodapé de totais alinhado às colunas. Rola na
   horizontal quando as medições não cabem — as quatro primeiras colunas ficam fixas para a linha nunca
   perder o nome. */
.boletim-wrapper {
    overflow: auto;
    max-height: 70vh;
}

/* Letra de 12px (um degrau abaixo das tabelas do app, um acima do piso de 11px do density.css): o
   boletim ganha uma coluna dupla por medição, e cada medição a menos na rolagem horizontal é uma
   conferência a menos de "que coluna é esta". A altura de linha é fixa em pixels de propósito: a
   segunda linha do cabeçalho é sticky e precisa saber exatamente onde a primeira termina. */
.boletim-tabela {
    --boletim-linha: 16px;
    --boletim-cabecalho: calc(var(--boletim-linha) + 8px + 1px); /* linha + padding vertical + borda */
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.75rem;
    line-height: var(--boletim-linha);
    white-space: nowrap;
    min-width: 100%;
}

.boletim-tabela th,
.boletim-tabela td {
    padding: 4px 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.boletim-tabela thead th {
    position: sticky;
    top: 0;
    background: var(--mud-palette-surface);
    font-weight: 600;
    text-align: center;
    z-index: 2;
}

.boletim-tabela thead tr:nth-child(2) th {
    top: var(--boletim-cabecalho);
    font-weight: 400;
    opacity: 0.7;
    font-size: 0.6875rem;
}

.boletim-col-eap {
    width: 64px;
    opacity: 0.7;
}

.boletim-col-nome {
    min-width: 220px;
    white-space: normal;
}

.boletim-col-num {
    text-align: right;
    min-width: 84px;
}

.boletim-col-medicao {
    border-left: 1px solid rgba(0, 0, 0, 0.12);
}

/* O botão de excluir cabe na própria linha de texto do cabeçalho; se fosse do tamanho padrão (30px),
   alongaria a primeira linha e a segunda, sticky, ficaria deslocada. */
.boletim-col-medicao .boletim-excluir {
    margin-left: 4px;
    opacity: 0.6;
    height: var(--boletim-linha);
    min-height: var(--boletim-linha); /* density.css dá 34px de min-height a todo .mud-button-root */
    width: var(--boletim-linha);
    min-width: var(--boletim-linha);
    padding: 0;
    vertical-align: top;
}

.boletim-col-medicao .boletim-excluir .mud-icon-root {
    font-size: 14px;
}

/* O acumulado é o número que o cliente confere: fica com fundo próprio para o olho achar de longe. */
.boletim-col-acumulado {
    background: rgba(0, 0, 0, 0.035);
    font-weight: 600;
}

.boletim-resumo td {
    font-weight: 600;
}

/* Blocos avulsos não são tarefas: fundo leve para a quebra ficar visível sem uma linha de título. */
.boletim-bloco td {
    background: rgba(255, 193, 7, 0.08);
}

.boletim-tabela tfoot td {
    font-weight: 600;
    border-top: 2px solid rgba(0, 0, 0, 0.2);
    background: var(--mud-palette-surface);
    position: sticky;
    bottom: 0;
}

.boletim-tabela tfoot tr.boletim-retencao td,
.boletim-tabela tfoot tr.boletim-liquido td {
    border-top: none;
    font-weight: 400;
    opacity: 0.85;
}

.boletim-tabela tfoot tr.boletim-liquido td {
    font-weight: 600;
    opacity: 1;
}

/* ---------- Cronograma físico-financeiro mensal (em cima do boletim) ----------

   Reusa a tabela do boletim (letra, cabeçalho fixo, rolagem horizontal) com cinco linhas fixas e uma
   coluna por mês. Cada célula tem duas linhas — % em cima, R$ embaixo —, o formato do cronograma de
   papel. A coluna de rótulos fica fixa à esquerda para "Medido acumulado" nunca sair de vista quando
   os meses rolam. */
.cronograma-wrapper {
    max-height: none;
    margin-bottom: 20px;
}

.cronograma-tabela .cronograma-col-rotulo {
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--mud-palette-surface);
    text-align: left;
    min-width: 160px;
    font-weight: 600;
}

.cronograma-tabela thead .cronograma-col-rotulo {
    z-index: 4;
}

.cronograma-col-mes {
    text-align: right;
    min-width: 96px;
}

.cronograma-tabela td.cronograma-col-mes span {
    display: block;
}

.cronograma-valor {
    font-size: 0.6875rem;
    opacity: 0.7;
}

.cronograma-tabela tr.cronograma-acumulado td {
    background: rgba(0, 0, 0, 0.02);
}

/* As bordas separam os três blocos: o previsto pelo cronograma, o informado e o medido. */
.cronograma-tabela tr.cronograma-informado td,
.cronograma-tabela tr.cronograma-medido td {
    border-top: 2px solid rgba(0, 0, 0, 0.12);
}

.cronograma-tabela tr.cronograma-desvio td {
    font-weight: 600;
}

.cronograma-desvio-neg {
    color: var(--mud-palette-error);
}

.cronograma-desvio-pos {
    color: var(--mud-palette-success);
}

/* ---------- Rateio informado (diálogo "Configurar valores") ----------

   Uma linha por item do nível 1: EAP, nome, o campo de % e o R$ que ele dá. O campo é estreito de
   propósito — três casas cabem em 110px — para o nome do item ficar com o espaço. */
.rateio-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.rateio-tabela th,
.rateio-tabela td {
    padding: 4px 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    vertical-align: middle;
}

.rateio-tabela thead th {
    font-weight: 600;
    text-align: left;
    font-size: 0.75rem;
    opacity: 0.7;
}

.rateio-tabela tfoot td {
    font-weight: 600;
    border-top: 2px solid rgba(0, 0, 0, 0.2);
    border-bottom: none;
}

.rateio-eap {
    width: 48px;
    opacity: 0.7;
}

.rateio-num {
    text-align: right;
    white-space: nowrap;
}

.rateio-campo {
    width: 110px;
    margin-left: auto;
}

.rateio-campo .mud-input-control {
    margin: 0;
}

/* O valor de referência (o que o cronograma daria) ao lado do que se digita: apagado, para o olho
   ficar no campo. */
.rateio-referencia {
    opacity: 0.55;
}

.rateio-fecha {
    color: var(--mud-palette-success);
}

.rateio-nao-fecha {
    color: var(--mud-palette-error);
}

/* ---------- Faixa de cards do controle ----------

   Flex em vez de MudGrid porque o grid de 12 colunas não fecha a conta: seis cards não se dividem em
   inteiros de 12, e o último caía para uma segunda linha sozinho, deixando meia tela vazia ao lado dele.
   No flex cada card pede o espaço que precisa e o resto se distribui, então a faixa fecha exatamente na
   largura disponível em qualquer tela.

   O flex-basis é o que preserva a quebra em telas estreitas: abaixo dele os cards passam a empilhar
   sozinhos, sem media query. */
.controle-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

    /* Todos com a MESMA base e o mesmo crescimento, portanto a mesma largura. A primeira tentativa deu ao
       card de avanço o dobro dos outros, por causa das notas dele; o resultado foi a sobra mudar de lugar
       em vez de sumir — o texto terminava e ficavam 150px vazios dentro do próprio card. As notas são
       legenda: quebrar em duas linhas custa menos do que um buraco no meio da faixa.

       Coluna flex para o conteúdo poder se ancorar nas duas pontas do card. */
    .controle-cards > .controle-card {
        flex: 1 1 145px;
        display: flex;
        flex-direction: column;

        /* height:auto é obrigatório aqui, não arrumação. ".controle-card" traz height:100% do tempo em
           que cada card vivia dentro de um MudItem e precisava preencher a célula do grid. Numa faixa
           flex isso DESLIGA o stretch — align-self:stretch só age quando a altura é auto —, e os cards
           ficam cada um com a altura do próprio conteúdo. Era por isso que o card de avanço aparecia
           mais alto que os vizinhos e a âncora do rodapé não tinha efeito nenhum: nos cards curtos não
           sobrava espaço para distribuir. */
        height: auto;
    }

    /* A nota desce para o RODAPÉ do card. Sem isto ela fica colada no número, e como os números têm
       alturas diferentes — um card com nota de duas linhas estica todos os outros — cada legenda parava
       numa altura diferente, com o vazio sobrando embaixo. Ancorada no rodapé, a faixa ganha duas linhas
       de leitura: os números no topo, as legendas na base.

       O seletor é a nota que vem logo DEPOIS do valor, não :first-of-type — todos os filhos do card são
       div, e :first-of-type pegaria o rótulo. As notas seguintes mantêm o próprio espaçamento. */
    .controle-cards > .controle-card > .controle-card-valor + .controle-card-nota {
        margin-top: auto;
        padding-top: 6px;
    }

/* ---------- Curva S de custo ----------

   O teto é a única linha em vermelho do gráfico: é o limite, e precisa ser achado sem legenda. Tracejado
   longo para não se confundir com o planejado, que é tracejado curto e cinza. */
.controle-curva-teto {
    stroke: var(--mud-palette-error, #f44336);
    stroke-width: 2;
    stroke-dasharray: 14 6;
}

.controle-legenda-teto {
    border-top-style: dashed;
    border-top-color: var(--mud-palette-error, #f44336);
}

/* A data de referência: o planejado continua depois dela e o agregado para nela. Discreta — é marcação de
   tempo, não série. */
.controle-curva-referencia {
    stroke: var(--mud-palette-text-secondary, #757575);
    stroke-width: 1;
    stroke-dasharray: 2 4;
    opacity: 0.7;
}

/* Botão de editar dentro do rótulo do card: pequeno e colado ao texto, para não empurrar o valor para
   baixo e desalinhar a faixa de cards. */
.controle-card-acao {
    padding: 0 !important;
    margin-left: 4px;
    vertical-align: middle;
}

    .controle-card-acao .mud-icon-root {
        font-size: 14px;
    }

/* ---------------------------------------------------------------------------
   Galeria de fotos da obra (Filtro de busca)
   --------------------------------------------------------------------------- */

/* Uma faixa por relatório. A separação horizontal é o que sustenta a leitura por dia — sem ela a galeria
   vira uma grade contínua de miniaturas e a data some. */
.galeria-grupo {
    border-top: 1px solid var(--mud-palette-divider, #e0e0e0);
    padding-top: 12px;
    margin-bottom: 20px;
}

.galeria-grupo:first-of-type {
    border-top: none;
    padding-top: 0;
}

.galeria-grupo-titulo {
    color: var(--mud-palette-primary, #1976d2);
    font-weight: 500;
    margin-bottom: 8px;
}

/* Miniaturas pequenas e muitas por linha: o valor da galeria está em varrer o mês de relance. auto-fill
   com minmax deixa a densidade acompanhar a largura da janela sem media query. */
.galeria-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
}

.galeria-miniatura {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 4px;
    background: var(--mud-palette-background-gray, #F8FAFC);
    cursor: pointer;
}

    .galeria-miniatura img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 120ms ease-out;
    }

    .galeria-miniatura:hover img {
        transform: scale(1.04);
    }

/* Marca de que a foto tem legenda — o texto em si não cabe na miniatura, mas saber que ele existe muda
   se vale a pena abrir. */
.galeria-legenda-marca {
    position: absolute;
    right: 2px;
    bottom: 2px;
    font-size: 14px !important;
    color: #fff;
    opacity: 0.85;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
}

/* A foto ampliada no diálogo: limitada pela ALTURA da janela, não pela largura. Foto de obra costuma ser
   deitada, e caber na largura de um diálogo grande ainda deixaria a imagem alta demais para a tela. */
.galeria-ampliada {
    display: flex;
    justify-content: center;
    background: #000;
    border-radius: 4px;
}

    .galeria-ampliada img {
        max-width: 100%;
        max-height: 70vh;
        object-fit: contain;
    }

/* ---------------------------------------------------------------------------
   Tabelas das telas de busca (atividades, ocorrências, clima)
   --------------------------------------------------------------------------- */

/* Rolagem horizontal própria: numa janela estreita a tabela encolhe as colunas de texto até
   ilegibilidade antes de rolar, e é pior ler tudo espremido do que arrastar. */
.busca-tabela-rolagem {
    overflow-x: auto;
}

.busca-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

    .busca-tabela th,
    .busca-tabela td {
        padding: 8px 10px;
        text-align: left;
        vertical-align: top;
        border-bottom: 1px solid var(--mud-palette-divider, #e0e0e0);
    }

    .busca-tabela th {
        font-weight: 500;
        white-space: nowrap;
        color: var(--mud-palette-text-secondary, #616161);
    }

    .busca-tabela tbody tr:hover {
        background: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.04));
    }

/* A data não pode quebrar em duas linhas: é a âncora de leitura de todas estas tabelas. */
.busca-col-data {
    white-space: nowrap;
    width: 1%;
}

.busca-col-curta {
    white-space: nowrap;
    width: 1%;
}

.busca-col-media {
    max-width: 260px;
}

/* Texto longo (comentário, descrição de ocorrência) quebra em vez de esticar a tabela. */
.busca-col-quebra {
    white-space: pre-wrap;
    word-break: break-word;
}

/* Dia com período impraticável: é o que se procura nesta tela, e precisa saltar na varredura. */
.busca-linha-alerta {
    background: var(--mud-palette-error-hover, rgba(244, 67, 54, 0.06));
}

/* ---------------------------------------------------------------------------
   Comentários do relatório
   --------------------------------------------------------------------------- */

/* Fio de conversa: separação leve entre falas, sem cartão em volta de cada uma — caixa por comentário
   transformaria uma troca de três linhas num paredão. */
.comentario-item {
    padding: 10px 0;
    border-bottom: 1px solid var(--mud-palette-divider, #e0e0e0);
}

/* Preserva as quebras de linha de quem escreveu: parágrafo em comentário é intenção, não acidente. */
.comentario-texto {
    white-space: pre-wrap;
    word-break: break-word;
    margin-top: 4px;
}

/* A caixa de escrever fica destacada do fio, ao pé dele, como em qualquer conversa. */
.comentario-novo {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 2px solid var(--mud-palette-divider, #e0e0e0);
}

/* ---------------------------------------------------------------------------
   Anexos do relatório
   --------------------------------------------------------------------------- */

/* Linha por arquivo: ícone, texto que cresce, ações na ponta. Lista e não grade — o que identifica um
   documento é o nome, e nome precisa de largura. */
.anexo-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--mud-palette-divider, #e0e0e0);
}

    .anexo-item:last-child {
        border-bottom: none;
    }

/* min-width:0 é o que permite o text-overflow funcionar dentro do flex: sem ele o item cresce em vez
   de truncar, e as ações somem para fora da tela. */
.anexo-texto {
    flex: 1;
    min-width: 0;
}

    .anexo-texto > * {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
    }

/* ---------------------------------------------------------------------------
   Vídeos do relatório
   --------------------------------------------------------------------------- */

/* Cartões largos, poucos por linha: vídeo pequeno demais não se reconhece, e o controle de play fica
   impossível de acertar no dedo. */
.video-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
}

/* Proporção fixa para a grade não pular quando o navegador descobre o tamanho real de cada vídeo —
   com preload="metadata" isso chega depois do primeiro desenho. */
.video-player {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 4px;
    display: block;
}

/* Formato que o navegador não toca: mesmo espaço do player, para a grade não ficar irregular. */
.video-sem-player {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--mud-palette-background-gray, #F8FAFC);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px;
}

/* ---------------------------------------------------------------------------
   Checklists do relatório
   --------------------------------------------------------------------------- */

/* Um bloco por checklist aplicado: a separação é o que impede ler o item do checklist de segurança
   como se fosse do de liberação de concretagem. */
.checklist-bloco {
    border: 1px solid var(--mud-palette-divider, #e0e0e0);
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 12px;
}

/* Item em coluna: o texto em cima, os botões embaixo. Lado a lado, o texto longo espremeria os botões
   de resposta até ficarem impossíveis de acertar no dedo — e isto se preenche em campo, no telefone. */
.checklist-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 0;
    border-top: 1px solid var(--mud-palette-divider, #e0e0e0);
}

.checklist-item-texto {
    word-break: break-word;
}

.checklist-observacao {
    opacity: 0.75;
    white-space: pre-wrap;
    word-break: break-word;
    border-left: 2px solid var(--mud-palette-divider, #e0e0e0);
    padding-left: 8px;
}

/* Na tela de busca, cada não conformidade é um bloco próprio: coladas, duas viram uma frase só. */
.checklist-nao-conforme {
    margin-bottom: 6px;
}

    .checklist-nao-conforme:last-child {
        margin-bottom: 0;
    }