/* ==========================================================================
   Construx — Gestão Inteligente de Obras
   Estilos (mobile-first, responsivo: celular / tablet / computador)
   ========================================================================== */

/* ==========================================================================
   CONSTRUX — DESIGN SYSTEM · Tokens (fonte única da identidade visual)
   --------------------------------------------------------------------------
   Identidade:  TEMA CLARO  → branco/papel + DOURADO + grafite
                TEMA ESCURO → grafite/preto + DOURADO
   O DOURADO é a cor INSTITUCIONAL (destaque): CTA, item ativo, foco, seleção,
   marca. NÃO é o preenchimento de tudo. Texto e estrutura vivem em grafite.
   Cores semânticas (sucesso/alerta/erro/informação) só comunicam ESTADO.
   Todo componente — atual e futuro — DEVE consumir estes tokens; nunca cores
   fixas. Documentação: docs/DESIGN-SYSTEM.md.
   ========================================================================== */
:root {
  /* ---- Primitivas · DOURADO (brass institucional) ---- */
  --gold-050: #FBF4E2; --gold-100: #F3E4BF; --gold-200: #E7CD8C;
  --gold-300: #DCB65E; --gold-400: #CBA038; --gold-500: #BE8A25;  /* dourado da marca */
  --gold-600: #9A6E18; --gold-700: #785410;                        /* dourado-tinta (texto/links legíveis no claro) */

  /* ---- Primitivas · GRAFITE (neutro levemente quente) ---- */
  --graphite-950: #14161A; --graphite-900: #191C21; --graphite-850: #1E222A;
  --graphite-800: #262B33; --graphite-700: #333941; --graphite-600: #4A515B;
  --graphite-500: #5F6771; --graphite-400: #838B95; --graphite-300: #AAB1BA;
  --graphite-200: #CDD2D8; --graphite-100: #E5E8EC; --graphite-050: #F1F3F5;

  /* ---- Primitivas · PAPEL (off-whites quentes) ---- */
  --paper-0: #FFFFFF; --paper-1: #FAFAF7; --paper-2: #F3F2EC; --paper-3: #EAE8DF;

  /* ---- Semânticas · superfícies e texto (TEMA CLARO) ---- */
  --background: var(--paper-1);
  --surface: var(--paper-0);
  --surface-2: var(--paper-2);
  --surface-3: var(--paper-3);
  --surface-elevated: var(--paper-0);
  --surface-hover: #F0EFE8;
  --surface-selected: var(--gold-050);

  /* Contraste reforçado (out/2026, 3ª rodada): um degrau acima da penúltima versão — principal 17,3:1,
     apoio 8,0:1 e discreto 5,2:1 sobre o cartão (o discreto ficava em 3,15:1, abaixo do AA). */
  --text-primary: #181B20;      /* grafite forte — texto principal */
  --text-secondary: #4A5159;
  --text-muted: #656D77;
  --text-inverse: #F5F6F7;
  --text-on-accent: #241C05;    /* tinta escura SOBRE preenchimento dourado */

  --border: #E5E2D8;
  --border-strong: #CFCCC0;

  /* ---- Acento institucional (DOURADO) ---- */
  --accent: var(--gold-500);
  --accent-hover: var(--gold-600);
  --accent-active: var(--gold-700);
  --accent-strong: var(--gold-600);     /* dourado legível como TEXTO sobre claro (AA) */
  --accent-soft: var(--gold-050);       /* tinte de seleção/ativo */
  --accent-soft-border: var(--gold-200);
  --accent-contrast: #241C05;           /* texto sobre preenchimento dourado */
  --accent-rgb: 190,138,37;             /* gold-500 em RGB — p/ rgba() do divisor dourado e seu halo */

  /* ---- Cabeçalho global (grafite escuro nos 2 temas) ---- */
  --header-bg: #1C2026;
  --header-fg: #F4F5F6;
  --header-border: rgba(255,255,255,.09);
  --header-accent: var(--gold-400);

  /* ---- Semânticas · estado ---- */
  --success: #1E8E54; --success-bg: #E3F3EA; --success-fg: #17683E;
  --warning: #B77816; --warning-bg: #F9EFD8; --warning-fg: #8A5A10;  /* âmbar de alerta (com ícone) */
  --danger:  #C6413F; --danger-bg:  #FAE7E6; --danger-fg:  #9E2B2A;
  --info:    #2C7A96; --info-bg:    #E1F0F4; --info-fg:    #1E5D74;  /* teal informativo — NÃO é o azul da marca */
  --uc:      #6D28D9; --uc-bg:      #EDE9FE; --uc-fg:      #5B21B6;  /* violeta categórico: Unidade Complementar / apontamento simultâneo */

  /* ---- Gráfico · séries categóricas (ordem FIXA; validadas p/ daltonismo com o script do dataviz, todos os pares) ---- */
  --chart-1: #1E8E54; --chart-2: #7C3AED; --chart-3: #D4541A; --chart-4: #0B84B8;
  /* 8 séries categóricas (macrogrupos do Cronograma Tático; 1 por painel). Validadas no script do dataviz, pares adjacentes, superfície #FFF: 3 abaixo de 3:1 → o gráfico rotula as famílias */
  --serie-1: #2a78d6; --serie-2: #eb6834; --serie-3: #1baf7a; --serie-4: #eda100; --serie-5: #e87ba4; --serie-6: #008300; --serie-7: #4a3aa7; --serie-8: #e34948;

  /* ---- Sombras (discretas, quentes) ---- */
  --shadow-sm: 0 1px 2px rgba(28,26,20,.06), 0 1px 3px rgba(28,26,20,.05);
  --shadow-md: 0 4px 12px rgba(28,26,20,.10), 0 2px 5px rgba(28,26,20,.06);
  --shadow-lg: 0 18px 42px rgba(24,22,16,.20);

  /* ---- Raio ---- */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-pill: 999px;

  /* ---- GEOMETRIA DA IDENTIDADE ("peça técnica") ----------------------------
     Assinatura do Construx: cantos com RAIO (filete) na diagonal sup.esq ↔ inf.dir e
     cantos com CHANFRO a 45° na diagonal sup.dir ↔ inf.esq — o vocabulário de peça
     usinada / desenho técnico. Três tamanhos (lg = peça de módulo, login, modal;
     md = card/KPI; sm = botão, item de menu). Uso: border-radius: var(--shape-md) +
     corner-shape: var(--shape-corners). Navegador sem corner-shape ignora a 2ª
     propriedade e o --cut-* cai para um canto quase reto (a assimetria continua). */
  --fillet-lg: 18px; --fillet-md: 12px; --fillet-sm: 8px;
  --cut-lg: 4px;     --cut-md: 3px;     --cut-sm: 2px;
  --shape-corners: round bevel round bevel;
  --shape-lg: var(--fillet-lg) var(--cut-lg) var(--fillet-lg) var(--cut-lg);
  --shape-md: var(--fillet-md) var(--cut-md) var(--fillet-md) var(--cut-md);
  --shape-sm: var(--fillet-sm) var(--cut-sm) var(--fillet-sm) var(--cut-sm);

  /* ---- LINHAS ESTRUTURAIS ("cota") ----------------------------------------
     Linha neutra que inicia/termina cabeçalhos, com um SEGMENTO dourado no começo
     (como o início de uma linha de cota). Ajuste de identidade = estes tokens. */
  --line: var(--border);
  --cota: var(--accent);
  --cota-w: 2px;          /* espessura do segmento dourado */
  --cota-len: 36px;       /* comprimento do segmento em repouso */

  /* ---- Movimento (curto e preciso; prefers-reduced-motion desliga tudo) ---- */
  --ease-out: cubic-bezier(.22, .8, .24, 1);
  --dur-fast: 120ms; --dur: 180ms; --dur-slow: 220ms;

  /* ---- Campos, linhas de tabela, menu e véu do modal ---- */
  --field-bg: var(--paper-0);
  --field-border: #D9D6CC;
  --field-border-hover: #C2BEB1;
  --text-disabled: #A3A9B0;
  --row-hover: rgba(32,36,42,.035);
  --nav-bg: var(--surface);
  --nav-active-bg: var(--paper-2);       /* item ativo do menu: superfície neutra (o dourado fica na linha) */
  --card-hover: #FDFCF8;                 /* peça/cartão clicável em destaque (hover) */
  --grid-line: rgba(32,36,42,.055);      /* malha milimetrada (legado) */
  /* COLMEIA (login e tela inicial): favo hexagonal de traço fino — o SVG é só a forma (máscara); a cor vem
     deste token, então acompanha o tema. Diagonais pedem um pouco mais de opacidade que a malha reta. */
  --colmeia: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27.7128' height='48' viewBox='0 0 27.7128 48'%3E%3Cpath d='M13.8564 0V8L27.7128 16V32L13.8564 40L0 32V16L13.8564 8M13.8564 40V48' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E");
  --colmeia-tam: 27.7128px 48px;
  --colmeia-linha: rgba(32,36,42,.085);
  --overlay: rgba(22,24,28,.46);
  --toast-bg: #1F2328; --toast-fg: #F4F5F6;

  /* ---- MATERIALIDADE ("prancha técnica", out/2026) ----------------------------
     UM modelo físico para o app inteiro: luz única vinda de CIMA. Placa elevada (cartão,
     botão, item selecionado) = aresta clara no topo + sombra de contato embaixo; poço
     (campo) = sombra interna no topo. Sombra em lista usa "0 0 #0000" (nunca none). */
  --plate-sheen: none;                                                   /* claro: o papel já é a luz */
  --edge-light: inset 0 1px 0 rgba(255,255,255,.85);                     /* aresta do topo (aparece no papel-2) */
  --elev-1: 0 1px 1px rgba(28,26,20,.035), 0 2px 5px -2px rgba(28,26,20,.07);   /* placa em repouso */
  --elev-2: 0 1px 2px rgba(28,26,20,.06), 0 8px 18px -6px rgba(28,26,20,.16);   /* placa sob o cursor / flutuante */
  --well: inset 0 1px 2px rgba(32,36,42,.07);                            /* poço do campo */
  --seg-track: var(--paper-2);                                           /* trilho do grupo de alternância */
  --seg-on: var(--paper-0);                                              /* placa da opção escolhida */
  --seg-on-shadow: 0 1px 2px rgba(28,26,20,.10), 0 0 0 1px rgba(28,26,20,.07);
  --header-sheen: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,0) 70%);
  --header-shadow: 0 1px 0 rgba(0,0,0,.18), 0 6px 14px -8px rgba(20,22,26,.45);
  --ambient-light: rgba(190,138,37,.05);                                 /* luz ambiente do topo (papel aquecido) */
  --accent-glow: 0 0 #0000;                                              /* brilho da linha dourada (só no escuro) */
  --accent-sheen: linear-gradient(180deg, rgba(255,255,255,.17), rgba(255,255,255,0) 62%);   /* latão do CTA */
  --accent-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 2px rgba(120,84,16,.24);
  --fill-edge: inset 0 1px 0 rgba(255,255,255,.2);                       /* aresta de luz sobre preenchimento colorido (verde, perigo) */

  /* ---- Foco (anel dourado, visível nos 2 temas) ---- */
  --focus-color: var(--gold-500);
  --focus-ring: 0 0 0 3px rgba(190,138,37,.42);

  /* ---- Tipografia ------------------------------------------------------------
     DISPLAY = letreiro técnico DIN (Bahnschrift no Windows; DIN Alternate no Apple;
     Roboto Condensed no Android) — nomes de módulo, títulos, marca e números grandes.
     INTERFACE = fonte do sistema (tabelas, campos, botões, texto). Nenhuma fonte é
     baixada: zero bytes a mais no app offline. Escala: --fs-*. */
  --font-sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Bahnschrift", "DIN Alternate", "D-DIN", "Roboto Condensed", "sans-serif-condensed", "Segoe UI Variable Display", var(--font-sans);
  --font-mono: "Cascadia Code", "SFMono-Regular", "JetBrains Mono", "Roboto Mono", ui-monospace, Consolas, monospace;
  /* HIERARQUIA EM 5 VOZES (3ª rodada): TÍTULO (DIN negrito, grande, entrelinha curta) · SUBTÍTULO (fonte de
     leitura, peso normal, tom de apoio — a troca de família e de peso É a variação) · SEÇÃO (DIN 650) ·
     TEXTO (sistema 400) · RÓTULO (sistema 600–700, miúdo, caixa alta). Número de instrumento = DIN 700. */
  --fs-hero: clamp(1.8rem, 1.25rem + 1.6vw, 2.5rem);     /* tela inicial, login */
  --fs-page: clamp(1.55rem, 1.25rem + .85vw, 1.95rem);   /* título de página */
  --fs-subtitle: 1.02rem;                                /* subtítulo / apoio do título */
  --fs-section: 1.2rem;                                  /* título de seção / card */
  --fs-module: 1.02rem;                                  /* nome do módulo (caixa alta) */
  --fw-title: 700; --fw-section: 650;                    /* DIN variável (Bahnschrift 300–700); estática arredonda p/ 700 */
  --lh-title: 1.1; --tracking-title: -.006em;
  --tracking-caps: .055em;                               /* caixa alta de módulo/rótulo */
  --tracking-brand: .14em;                               /* marca CONSTRUX */

  /* ==========================================================================
     Aliases LEGADO → tokens novos (retrocompatibilidade dos seletores).
     Centenas de regras usam --azul/--cobre/--card/etc.; aqui elas passam a
     apontar para o sistema novo, POR PAPEL:
       --azul (era primária: texto+interativo) → grafite (texto/ênfase)
       --azul-bg (tinte de seleção)            → dourado suave
       --azul-claro (foco/hover)               → dourado
       --cobre (destaque)                      → dourado
     Preenchimentos que DEVEM ser dourados (CTA, item ativo) são tratados nos
     próprios seletores (.btn.primary, .nav .active). Como os aliases usam
     var(), o TEMA ESCURO só precisa sobrescrever a camada semântica abaixo.
     ========================================================================== */
  --azul: var(--text-primary);
  --azul-claro: var(--accent);
  --azul-bg: var(--accent-soft);
  --cobre: var(--accent-strong);
  --cobre-bg: var(--accent-soft);
  --grafite: var(--text-primary);
  --info-claro: var(--info-fg);
  --verde: var(--success); --verde-bg: var(--success-bg);
  --amarelo: var(--warning); --amarelo-bg: var(--warning-bg);
  --laranja: #C2410C; --laranja-bg: #FCE6D6; --laranja-fg: #A3380B;   /* retrabalho (natureza); -fg = texto AA sobre o -bg */
  --limpeza: var(--info); --limpeza-bg: var(--info-bg);
  --terc: #0D7A6E; --terc-bg: #DFF1EE; --terc-fg: #0A6A60;             /* terceirizada (empreiteiro); -fg = texto AA sobre o -bg */
  --propria: var(--chart-2);   /* mão de obra PRÓPRIA nos gráficos (× --terc: par validado p/ daltonismo nos 2 temas — painel da Produção) */
  --dispensa: #5B6B7F; --dispensa-bg: #E6EBF1; --dispensa-fg: #3D4B5C; /* dispensa de serviço (ardósia: justificado, sem produção); -fg = texto AA sobre o -bg */
  /* Calendário operacional (Cadastros → Calendário + data do Apontamento): tipo de evento. APELIDOS dos
     tokens semânticos — o tema escuro troca a base e estes acompanham (mesmo elemento). */
  --cal-nacional: var(--danger); --cal-nacional-bg: var(--danger-bg);
  --cal-estadual: var(--warning); --cal-estadual-bg: var(--warning-bg);
  --cal-municipal: var(--info); --cal-municipal-bg: var(--info-bg);
  --cal-obra: var(--accent-strong); --cal-obra-bg: var(--accent-soft);
  --cal-pf: var(--dispensa); --cal-pf-bg: var(--dispensa-bg);
  --vermelho: var(--danger); --vermelho-bg: var(--danger-bg);
  --cinza-texto: var(--text-secondary);
  --cinza-claro: var(--surface-2);
  --borda: var(--border);
  --card: var(--surface);
  --fundo: var(--background);
  --sombra: var(--edge-light), var(--elev-1);   /* cartões de módulo (.mb-card, .mb-kpi…) = a mesma PLACA do .card */
  --sombra-forte: var(--shadow-lg);
  --raio: var(--radius-md);
  /* Altura da barra do topo (sticky) = onde o menu lateral e as barras sticky encostam. TEM de ser a
     altura REAL do cabeçalho logado: 10 + 44 (chip do usuário, alvo de toque) + 10 + 1 (borda) = 65.
     Com 56 o menu deslizava 9 px por baixo do cabeçalho e a página rolava 9 px à toa. */
  --topbar-h: 65px;
}

/* ==========================================================================
   TEMA ESCURO — grafite/preto + dourado. Sobrescreve SÓ a camada semântica;
   os aliases legados (que usam var()) reaproveitam estes valores sozinhos.
   ========================================================================== */
html[data-theme="dark"] {
  /* GRAFITE EM CAMADAS (out/2026). Antes: azul-marinho escuro (#181B21/#23272F, croma
     ~0,013 em OKLCH) com só 2 degraus visíveis — pesado no monitor. Agora: grafite
     NEUTRO-FRIO (croma ~0,006–0,012, matiz 250) com a escada perceptível
       fundo #1B1E20 < moldura (cabeçalho+menu) #1F2225 < cartão #24272B
       < inset #2A2E32 ≈ elevado #2B2F34 < hover #2E3237
     — profundidade por LUMINÂNCIA, não por borda branca. Texto em 4 níveis (nunca
     branco puro). Bordas = branco com baixa opacidade: acompanham qualquer degrau. */
  --background: #1B1E20;                 /* fundo geral — a maior área */
  --surface: #24272B;                    /* cartão / seção — um degrau acima */
  --surface-2: #2A2E32;                  /* inset: cabeçalho de tabela, chip, zebra */
  --surface-3: #34393F;                  /* inset mais alto */
  --surface-elevated: #2B2F34;           /* modal / popover — acima do cartão */
  --surface-hover: #2E3237;
  --surface-selected: rgba(220,182,94,.13);

  --text-primary: #EDEFF1;               /* quase-branco (não #FFF) — 13:1 sobre o cartão */
  --text-secondary: #C6CACF;             /* 9,1:1 */
  --text-muted: #A5AAB0;                 /* 6,4:1 sobre o cartão (era 5,1:1) */
  --text-disabled: #686C70;
  --text-inverse: #1A1D22;
  /* --text-on-accent permanece escuro: texto sobre dourado é sempre grafite */

  --border: rgba(255,255,255,.075);      /* hairline: some no fundo, aparece no cartão */
  --border-strong: rgba(255,255,255,.13);

  --field-bg: #1E2124;                   /* poço do campo: abaixo do cartão (lê como "entrada") */
  --field-border: rgba(255,255,255,.12);
  --field-border-hover: rgba(255,255,255,.2);
  --row-hover: rgba(255,255,255,.035);
  --nav-bg: #1F2225;                     /* menu = mesma moldura do cabeçalho */
  --nav-active-bg: #2B2F34;              /* item ativo: sobe ao degrau "elevado" */
  --card-hover: #292C30;                 /* entre o cartão e o inset */
  --grid-line: rgba(255,255,255,.035);
  --colmeia-linha: rgba(255,255,255,.05);
  --overlay: rgba(10,11,13,.58);
  --toast-bg: #3A3F45; --toast-fg: var(--text-primary);   /* toast acima de tudo: o degrau mais claro */

  /* Materialidade no escuro: a luz de cima vira um véu claro de 2–3% no topo da placa e uma
     aresta de 1 px; a sombra de contato é curta e escura (a escada de luminância continua
     sendo a profundidade principal). */
  --plate-sheen: linear-gradient(180deg, rgba(255,255,255,.042), rgba(255,255,255,0) 96px);   /* altura FIXA: em cartão alto (tabela) o véu fica só na aresta e não lava o conteúdo */
  --edge-light: inset 0 1px 0 rgba(255,255,255,.068);
  --elev-1: 0 1px 0 rgba(0,0,0,.26), 0 2px 6px -2px rgba(0,0,0,.38);
  --elev-2: 0 1px 0 rgba(0,0,0,.3), 0 12px 24px -10px rgba(0,0,0,.6);
  --well: inset 0 1px 2px rgba(0,0,0,.36);
  --seg-track: #1E2124;                  /* trilho = poço (mesmo degrau do campo) */
  --seg-on: #33373D;                     /* opção escolhida = placa clara sobre o trilho */
  --seg-on-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 1px 2px rgba(0,0,0,.5);
  --header-sheen: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 70%);
  --header-shadow: 0 1px 0 rgba(0,0,0,.35), 0 8px 16px -10px rgba(0,0,0,.7);
  --ambient-light: rgba(255,255,255,.032);
  --accent-glow: 0 0 9px rgba(220,182,94,.38);
  --accent-sheen: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 62%);
  --accent-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 1px 2px rgba(0,0,0,.5);

  --accent: var(--gold-300);            /* dourado mais claro brilha no escuro */
  --accent-hover: var(--gold-200);
  --accent-active: var(--gold-400);
  --accent-strong: var(--gold-300);     /* dourado legível como texto no escuro */
  --accent-soft: rgba(220,182,94,.12);
  --accent-soft-border: rgba(220,182,94,.30);
  --accent-rgb: 220,182,94;              /* gold-300 em RGB — dourado do divisor/halo brilha mais no escuro */

  --header-bg: #1F2225;                  /* moldura: cabeçalho e menu no MESMO degrau, entre o fundo e o cartão */
  --header-fg: #E9EBED;
  --header-border: rgba(255,255,255,.06);
  --header-accent: var(--gold-300);

  --success: #35B673; --success-bg: rgba(45,158,91,.17); --success-fg: #74D6A3;
  --warning: #D9A441; --warning-bg: rgba(197,120,20,.20); --warning-fg: #E7BE72;
  --danger:  #E56B67; --danger-bg:  rgba(214,69,69,.18);  --danger-fg:  #F19E9B;
  --info:    #57ABC4; --info-bg:    rgba(44,122,150,.20); --info-fg:    #8FCADD;
  --uc:      #7C3AED; --uc-bg:      rgba(124,58,237,.22); --uc-fg:      #C4B5FD;
  --chart-1: #27A060; --chart-2: #8F6CF0; --chart-3: #E0662A; --chart-4: #1F95D0;  /* violeta×azul ΔE 6,4: o gráfico usa tracejado + marcador próprios */
  --serie-1: #3987e5; --serie-2: #d95926; --serie-3: #199e70; --serie-4: #c98500; --serie-5: #d55181; --serie-6: #008300; --serie-7: #9085e9; --serie-8: #e66767;  /* séries do Tático validadas na superfície #23272F: todas ≥ 3:1 */

  --laranja: #E2794A; --laranja-bg: rgba(226,121,74,.18); --laranja-fg: #EE9670;
  --terc:    #2FA99B; --terc-bg:    rgba(15,122,110,.20); --terc-fg:    #3FBFAF;
  --dispensa: #93A3B8; --dispensa-bg: rgba(147,163,184,.18); --dispensa-fg: #BCC8D6;

  /* Sombra quase não aparece no escuro: a profundidade vem da escada de luminância.
     Fica só um contato curto (sm) e a projeção de modal/popover (lg). */
  --shadow-sm: 0 1px 1px rgba(0,0,0,.18);
  --shadow-md: 0 6px 16px rgba(0,0,0,.26), 0 1px 3px rgba(0,0,0,.2);
  --shadow-lg: 0 22px 50px rgba(0,0,0,.42), 0 2px 8px rgba(0,0,0,.24);

  --focus-color: var(--gold-300);
  --focus-ring: 0 0 0 3px rgba(219,182,94,.40);

  color-scheme: dark;
}

/* Chanfro REAL onde o navegador desenha corner-shape (Chrome/Edge 139+): o canto
   "vivo" vira um corte a 45° do tamanho do token. Sem suporte, fica o canto quase reto. */
@supports (corner-shape: bevel) {
  :root { --cut-lg: 14px; --cut-md: 7px; --cut-sm: 4px; }
}

/* Impressão/PDF: SEMPRE papel branco com tinta preta, independente do tema —
   protege RDO/relatórios exportados de sair escuros. A geometria da identidade
   (raio + chanfro) também sai: documento impresso usa canto simples. */
@media print {
  :root, html[data-theme="dark"] {
    --background: var(--surface); --surface: #fff; --surface-2: #fff; --surface-3: #fff;
    --surface-elevated: #fff; --surface-hover: #fff; --surface-selected: #f4efe0;
    --text-primary: #000; --text-secondary: #333; --text-muted: #555;
    --border: #ccc; --border-strong: #999;
    --card: #fff; --fundo: #fff; --azul: #000; --grafite: #000; --cinza-texto: #333;
    --header-bg: #fff; --header-fg: #000;
    --field-bg: #fff; --field-border: #999; --nav-bg: #fff;
    --shape-corners: round; --cut-lg: 6px; --cut-md: 6px; --cut-sm: 4px;
    --fillet-lg: 6px; --fillet-md: 6px; --fillet-sm: 4px;
    --font-display: var(--font-sans);   /* documento impresso/PDF do RDO: tipografia de antes */
    /* materialidade de tela (véu, arestas, sombras, malha) nunca vai para o papel */
    --plate-sheen: none; --edge-light: 0 0 #0000; --elev-1: 0 0 #0000; --elev-2: 0 0 #0000; --well: 0 0 #0000;
    --seg-on-shadow: 0 0 #0000; --header-sheen: none; --header-shadow: 0 0 #0000; --accent-glow: 0 0 #0000; --ambient-light: transparent;
    --accent-sheen: none; --accent-shadow: 0 0 #0000; --fill-edge: 0 0 #0000;
  }
  h1, h2, h3 { font-weight: 700; letter-spacing: normal; }
  .page-head::after, .modulos-head::after, .topbar::after, .kpi::before { display: none; }
  .modal > h3 { background: none; }
  body { background: var(--surface); }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: var(--font-sans);
  background: var(--background);
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}
/* Luz ambiente: a mesma luz de cima da materialidade, como um véu largo e muito fraco que
   desce do cabeçalho (some em ~420 px). Uma camada de gradiente no body, rola junto com a
   página (sem background-attachment: fixed → nenhuma repintura na rolagem). */
body {
  background:
    radial-gradient(1500px 440px at 50% -140px, var(--ambient-light, transparent), transparent 72%) no-repeat,
    var(--background);
}
/* Transição suave ao alternar tema (respeitando quem prefere menos movimento). SÓ nas superfícies
   grandes: células de tabela trocam na hora — animar cada <td> (1.700 no Painel) criava centenas de
   transições a cada troca de tema sem ganho visível (as placas em volta continuam suaves). */
body, .topbar, .nav, .card, .kpi, .modal, .btn, input, select, textarea {
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
/* Foco acessível e consistente (anel dourado) para tudo que recebe teclado. */
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* Hierarquia tipográfica: títulos usam o letreiro técnico (DIN) com peso de seção;
   o corpo segue na fonte de interface. Números grandes = DIN tabular. */
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: .005em; }
h1 { font-weight: var(--fw-title); }
h2 { font-weight: var(--fw-section); }
h4, h5, h6 { font-family: var(--font-sans); }

/* LINHA DE COTA (componente da identidade): hairline neutra com um segmento dourado
   no começo — inicia/termina cabeçalhos. Use a classe .cx-cota num elemento vazio ou
   os ::after já ligados em .page-head/.modulos-head/.modal h3. */
.cx-cota {
  display: block; height: var(--cota-w); width: 100%;
  background:
    linear-gradient(var(--cota), var(--cota)) left bottom / var(--cota-len) var(--cota-w) no-repeat,
    linear-gradient(var(--line), var(--line)) left bottom / 100% 1px no-repeat;
}

/* ---------- Layout base ---------- */
/* 100dvh acompanha as barras dinâmicas do navegador no celular (a barra de endereço
   que aparece/some); 100vh fica de fallback para navegadores sem dvh. */
.app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

.topbar {
  /* barra usinada: véu claro no topo (a luz de cima) sobre o grafite da moldura */
  background: var(--header-sheen), var(--header-bg);
  color: var(--header-fg);
  /* Safe-area: em aparelhos com notch/tela curva (viewport-fit=cover), a barra do
     sistema no topo e as laterais não podem cobrir os controles. env()=0 no desktop
     e em telas sem recorte → max() cai no valor base e nada muda lá. */
  padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  min-height: var(--topbar-h);
  display: flex; align-items: center; gap: 12px;
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid var(--header-border);
  box-shadow: var(--header-shadow);
}
/* Cota da moldura: o segmento dourado sob a marca/título inicia a linha do cabeçalho
   (a hairline é a própria borda inferior). Alinha com o padding/safe-area esquerdo. */
.topbar::after {
  content: ""; position: absolute; bottom: -1px; left: max(16px, env(safe-area-inset-left));
  width: var(--cota-len); height: var(--cota-w); background: var(--header-accent);
  pointer-events: none;
}
/* O título ocupa SÓ o espaço que sobra entre a seta ← e as ações da direita.
   flex:1 + min-width:0 = pode encolher abaixo da largura do texto (sem isso ele
   empurraria as ações para fora da tela e/ou geraria rolagem horizontal). */
.topbar .logo { font-family: var(--font-display); font-weight: 600; font-size: 1.06rem; letter-spacing: .01em; display: flex; align-items: center; gap: 9px; flex: 1 1 auto; min-width: 0; }
.topbar .logo .mark-img { height: 30px; width: auto; display: block; flex-shrink: 0; }
/* Nome da obra: no máximo 2 linhas com reticências. Nome longo vindo do banco nunca
   estoura a altura do header nem cria rolagem lateral (overflow-wrap quebra 1 palavra
   gigante; -webkit-line-clamp trunca no fim da 2ª linha). */
#ctxTitulo {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  line-height: 1.2;
}
/* Marca central clicável → tela inicial (Home). Centralizada de forma absoluta
   para não empurrar o título da obra (à esquerda) nem o usuário (à direita). */
.brand-home {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 7px;
  background: transparent; border: 0; cursor: pointer; color: var(--header-fg);
  font-family: var(--font-display); font-weight: 600; font-size: .98rem;
  letter-spacing: var(--tracking-brand); text-transform: uppercase;
  padding: 6px 12px; border-radius: 8px; transition: background .12s;
}
.brand-home img { height: 24px; width: auto; display: block; }
.brand-home b { color: var(--header-accent); font-weight: 600; }
.brand-home:hover { background: rgba(255,255,255,.14); }
.brand-home:focus-visible { outline: 2px solid rgba(255,255,255,.6); outline-offset: 2px; }
/* Com a marca central visível (dentro de um módulo, ≥ 781 px), o título termina ANTES dela: nome longo da obra
   quebra em 2 linhas e acaba em "…" em vez de passar por baixo do logo (LAY-01: a 1024 px invadia 27–55 px; a
   813 px o Cadastros ficava ilegível). 50% = o centro do cabeçalho; 140px = seta ← (34 + 12) + meia marca (~80)
   + folga. A marca some ≤ 780 px (regra mais abaixo) — lá o título volta a usar toda a largura. */
@media (min-width: 781px) {
  .topbar.topbar-com-marca .logo { max-width: calc(50% - 140px); }
}
/* No celular, a marca central vira só o símbolo e o símbolo da esquerda some,
   liberando espaço para o título da obra. */
@media (max-width: 640px) {
  .brand-home span { display: none; }
  .topbar .logo .mark-img { display: none; }
}
.topbar .obra-sel { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.topbar select {
  background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.3);
  border-radius: 8px; padding: 7px 10px; font-size: .9rem; max-width: 55vw;
}
.topbar select option { color: var(--text-primary); }

/* ---- Seletor de obra no cabeçalho (Apontamento) ------------------------------
   O nome da obra (.logo) vira clicável (App._sincSeletorObra adiciona .is-selector).
   O chevron ▾ só aparece quando há para onde trocar (≥2 obras ativas). O popover é
   ancorado no desktop e vira folha inferior no celular. Cores = tokens do Design System. */
/* Wrapper que abraça só o nome + chevron (min-width:0 preserva a truncação de #ctxTitulo
   herdada do v126). Vira o alvo clicável do seletor no Apontamento (.is-selector). */
.obra-switcher { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.obra-switcher.is-selector { cursor: pointer; border-radius: 8px; padding: 4px 8px; margin: -4px -8px; transition: background .12s; }
.obra-switcher.is-selector:hover { background: rgba(255,255,255,.14); }
.obra-switcher.is-selector:focus-visible { outline: 2px solid rgba(255,255,255,.6); outline-offset: 2px; }
.ctx-chevron { flex-shrink: 0; font-size: .82rem; opacity: .85; line-height: 1; }

/* Versão GLOBAL do app, colada à marca "Construx" no cabeçalho (só na Home/login —
   App.atualizarHeader alterna o display). Pílula translúcida no mesmo idioma visual dos
   demais chips do header (.papel-badge/.papel-wrap): o cabeçalho é escuro nos dois temas,
   então os brancos com alfa acompanham a identidade sem hex de tema. flex-shrink:0 = nunca
   encolhe (quem cede espaço/trunca é o título #ctxTitulo). */
.app-versao {
  flex-shrink: 0; align-items: center;
  font-size: .72rem; font-weight: 700; letter-spacing: .3px; line-height: 1.4;
  color: rgba(255,255,255,.82); background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.2); padding: 2px 8px; border-radius: 999px;
  white-space: nowrap;
}

.obra-pop {
  position: absolute; z-index: 60;
  min-width: 260px; max-width: min(92vw, 400px);
  background: var(--surface-elevated); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--radius-md, 12px);
  box-shadow: var(--shadow-lg); overflow: hidden;
  display: flex; flex-direction: column; max-height: min(70vh, 480px);
}
.obra-pop__head { padding: 11px 14px 9px; font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.obra-pop__busca { padding: 8px; border-bottom: 1px solid var(--border); }
.obra-pop__busca input { width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text-primary); font-size: .9rem; }
.obra-pop__lista { overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.obra-pop__item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 10px; border: 0; background: transparent; color: var(--text-primary); border-radius: 8px; cursor: pointer; font-size: .95rem; font-weight: 500; min-height: 40px; }
.obra-pop__item:hover, .obra-pop__item:focus-visible { background: var(--accent-soft); outline: none; }
.obra-pop__item.is-atual { font-weight: 700; }
.obra-pop__check { width: 16px; flex-shrink: 0; color: var(--accent); font-weight: 800; text-align: center; }
.obra-pop__nome { min-width: 0; overflow-wrap: anywhere; }
.obra-pop__vazio { padding: 16px; text-align: center; color: var(--text-muted); font-size: .9rem; }
/* Rodapé de ações do popover (só Cadastros): criar obra + acesso às arquivadas.
   flex-shrink:0 mantém-no visível enquanto a lista de obras rola acima. */
.obra-pop__foot { flex-shrink: 0; border-top: 1px solid var(--border); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.obra-pop__acao { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 10px; border: 0; background: transparent; color: var(--text-primary); border-radius: 8px; cursor: pointer; font-size: .92rem; font-weight: 600; min-height: 40px; }
.obra-pop__acao:hover, .obra-pop__acao:focus-visible { background: var(--accent-soft); outline: none; }
.obra-pop__aic { width: 16px; flex-shrink: 0; text-align: center; }
.obra-pop__arq { display: flex; flex-direction: column; gap: 2px; max-height: 40vh; overflow-y: auto; }
.obra-pop__arq .obra-pop__item { opacity: .82; }
.obra-pop__arqtag { flex-shrink: 0; margin-left: auto; font-size: .82rem; opacity: .7; }

/* ---- Menu de OCORRÊNCIA do colaborador (Apontamento › Situação da equipe) ----
   "Marcar falta ▾" abre este menu: Marcar falta · Serviço externo. Mesma linguagem do .obra-pop
   (superfície elevada, borda, sombra, item com hover dourado-suave); no celular vira folha inferior. */
.acao-pop {
  position: fixed; z-index: 60;
  min-width: 250px; max-width: min(92vw, 340px);
  background: var(--surface-elevated); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--radius-md, 12px);
  box-shadow: var(--shadow-lg); overflow: hidden;
  display: flex; flex-direction: column; padding: 6px; gap: 2px;
}
.acao-pop__head { padding: 6px 8px 7px; font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border); margin-bottom: 4px; overflow-wrap: anywhere; }
.acao-pop__item { display: flex; align-items: flex-start; gap: 9px; width: 100%; text-align: left; padding: 9px 10px; border: 0; background: transparent; color: var(--text-primary); border-radius: 8px; cursor: pointer; font-size: .93rem; font-weight: 600; min-height: 40px; }
.acao-pop__item:hover, .acao-pop__item:focus-visible { background: var(--accent-soft); outline: none; }
.acao-pop__ic { width: 18px; flex-shrink: 0; text-align: center; line-height: 1.35; }
.acao-pop__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.acao-pop__sub { font-size: .78rem; font-weight: 400; color: var(--text-muted); }
.acao-pop__item.is-falta .acao-pop__ic { color: var(--danger); }
.acao-pop__item.is-externo .acao-pop__ic { color: var(--warning); font-weight: 800; }
.acao-pop__item.is-dispensa .acao-pop__ic { color: var(--dispensa); font-weight: 800; }
@media (max-width: 640px) {
  .acao-pop {
    left: 0 !important; right: 0; bottom: 0; top: auto !important; width: 100%;
    max-width: none; border-radius: 16px 16px 0 0;
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
  }
  .acao-pop__item { min-height: 48px; font-size: 1rem; }
}

@media (max-width: 640px) {
  /* Folha inferior: ampla, fácil de tocar, respeita o safe-area do aparelho. */
  .obra-pop {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: 100%;
    max-width: none; max-height: 76vh;
    border-radius: 16px 16px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .obra-pop__item { min-height: 48px; font-size: 1rem; }
}

/* Shell do app: sidebar encostada à esquerda + conteúdo fluido.
   Antes o max-width de 1200px centralizava tudo, criando faixas brancas nas
   laterais em telas grandes. Agora o casco cresce (até um teto confortável)
   e só centraliza em monitores muito largos. */
.wrap { flex: 1; display: flex; width: 100%; max-width: 1760px; margin: 0 auto; }

/* Navegação: sidebar sticky no desktop, barra inferior no celular.
   sticky + align-self:flex-start = acompanha a rolagem e fica sempre acessível,
   sem cobrir a tela (padrão Notion/Linear/GitHub). */
.nav {
  background: var(--nav-bg);
  border-right: 1px solid var(--line);
  padding: 14px 10px;
  width: 212px; flex-shrink: 0;
  position: sticky; top: var(--topbar-h); align-self: flex-start;
  max-height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
}
/* Trilho contínuo: no desktop o menu ocupa a altura toda da janela (sticky), em vez de uma
   caixa que acabava no meio da tela com a borda direita interrompida. */
@media (min-width: 781px) { .nav { min-height: calc(100vh - var(--topbar-h)); } }
/* Item da navegação: <a> quando a tela tem rota real (Apontamento) e <button>
   quando é sub-navegação interna do módulo (Estoque) — mesmo visual e foco.
   Forma = versão PEQUENA da assinatura (raio + chanfro), visível no hover/ativo. */
.nav a, .nav button {
  position: relative; text-decoration: none;
  width: 100%; text-align: left; border: 0; background: transparent;
  padding: 10px 12px; border-radius: var(--shape-sm); corner-shape: var(--shape-corners); cursor: pointer;
  display: flex; align-items: center; gap: 11px; color: var(--text-secondary);
  font-size: .92rem; font-weight: 500; margin-bottom: 2px;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
/* Ícones (emoji) em tom único no repouso — o menu lê como um conjunto, não como
   figurinhas coloridas; a cor volta no item ativo/hover. */
.nav a .ic, .nav button .ic {
  font-size: 1.05rem; width: 22px; text-align: center; flex-shrink: 0;
  filter: grayscale(1); opacity: .72; transition: filter var(--dur) ease, opacity var(--dur) ease;
}
.nav a:hover, .nav button:hover { background: var(--surface-hover); color: var(--text-primary); }
.nav a:hover .ic, .nav button:hover .ic { opacity: .95; }
/* Item ativo: mudança de superfície + LINHA dourada à esquerda (cota) + chanfro do
   canto sup. direito (da forma pequena). O dourado fica na linha, não no fundo. */
.nav a.active, .nav button.active { background: var(--nav-active-bg); color: var(--text-primary); font-weight: 600; box-shadow: var(--edge-light); }
.nav a.active .ic, .nav button.active .ic { filter: none; opacity: 1; }
/* A linha dourada do ativo ganha um brilho curto no escuro (destaque luminoso discreto). */
.nav a.active::before, .nav button.active::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: var(--cota-w); background: var(--accent); box-shadow: var(--accent-glow);
}
.nav a:focus-visible, .nav button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus-color); }
/* Submenu do item "Produção" do Apontamento (14/10/2026): as abas da tela viram filhos recuados, abertos só
   quando a tela é a Produção (App._navProdSync) — mesmo desenho do grupo do Cadastros/Qualidade (guia
   vertical, filho recuado, seta ▸ que gira). No celular (barra inferior) não há submenu: as abas voltam
   ao topo da página (.prod-tabs-mob). */
.ap-grp-seta { margin-left: auto; color: var(--text-muted); font-size: .78rem; transition: transform .15s ease; }
#nav a[aria-expanded="true"] .ap-grp-seta { transform: rotate(90deg); }
.ap-nav-filhos { position: relative; margin-bottom: 4px; }
.ap-nav-filhos::before { content: ""; position: absolute; left: 21px; top: 3px; bottom: 3px; width: 1px; background: var(--border); }
.nav .ap-nav-filhos button { padding-left: 34px; }
.nav .ap-nav-filhos button.active::before { left: 20px; }
/* Submenu aberto: o destaque (placa + linha dourada) fica só no FILHO — a aba da tela; o pai mantém o texto forte. */
@media (min-width: 781px) { #nav a.active[aria-expanded="true"] { background: transparent; box-shadow: none; } #nav a.active[aria-expanded="true"]::before { display: none; } }
@media (max-width: 780px) { .nav .ap-nav-filhos, .nav .ap-grp-seta { display: none; } }

/* Conteúdo. O padding vive em VARIÁVEIS porque um módulo pode precisar colar a
   própria navegação lateral na borda do casco (margem negativa) e acompanhar os
   breakpoints sem repetir números — ver .est no estoque.css. O casco anula também o
   padding de BAIXO (--content-pb): o menu sticky não passa do fundo do pai, então um
   casco que terminasse antes do fim da página deixava o menu subir por cima do
   cabeçalho ao rolar até o fim (e o item do topo sumia). */
.content {
  flex: 1; min-width: 0;
  --content-px: 24px; --content-py: 20px; --content-pb: 90px;
  padding: var(--content-py) var(--content-px) var(--content-pb);
}

/* ---------- Componentes ---------- */
/* Cabeçalho de página: título DIN + apoio + LINHA DE COTA que termina o cabeçalho
   (hairline neutra com o segmento dourado no começo). Vale para todos os módulos. */
.page-head { position: relative; margin-bottom: 18px; padding-bottom: 12px; }
.page-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--cota-w); pointer-events: none;
  background:
    linear-gradient(var(--cota), var(--cota)) left bottom / var(--cota-len) var(--cota-w) no-repeat,
    linear-gradient(var(--line), var(--line)) left bottom / 100% 1px no-repeat;
}
.page-head h1 { font-size: var(--fs-page); font-weight: var(--fw-title); color: var(--text-primary); line-height: var(--lh-title); letter-spacing: var(--tracking-title); }
/* Subtítulo = OUTRA voz: fonte de leitura, peso normal, tom de apoio, um pouco maior que o texto miúdo. */
.page-head p { color: var(--text-secondary); font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-subtitle); line-height: 1.5; margin-top: 6px; }

/* Card = container de seção. Forma MÉDIA da assinatura (raio 12 / chanfro 7). É uma PLACA:
   véu de luz no topo (só no escuro) + aresta clara + sombra de contato curta (--elev-1). A
   profundidade principal continua vindo da luminância. */
.card {
  background: var(--plate-sheen), var(--card); border: 1px solid var(--borda);
  border-radius: var(--shape-md); corner-shape: var(--shape-corners); box-shadow: var(--edge-light), var(--elev-1);
  padding: 16px; margin-bottom: 14px;
}
.card h2 { font-size: var(--fs-section); font-weight: var(--fw-section); color: var(--text-primary); line-height: 1.2; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.card .sub { color: var(--cinza-texto); font-size: .9rem; line-height: 1.45; margin-bottom: 12px; }

.grid { display: grid; gap: 14px; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* KPIs — a mesma placa do card, com a COTA da peça (segmento dourado curto no topo, depois do
   raio): o número lê como uma medida tomada no instrumento. */
.kpi { position: relative; background: var(--plate-sheen), var(--card); border: 1px solid var(--borda); border-radius: var(--shape-md); corner-shape: var(--shape-corners); padding: 14px; box-shadow: var(--edge-light), var(--elev-1); }
.kpi::before { content: ""; position: absolute; top: -1px; left: var(--fillet-md); width: 18px; height: var(--cota-w); background: var(--cota); pointer-events: none; }
.kpi .label { font-size: .76rem; color: var(--cinza-texto); text-transform: uppercase; letter-spacing: var(--tracking-caps); font-weight: 600; }
/* Número grande = letreiro DIN tabular (lê como instrumento de medição). */
.kpi .value { font-family: var(--font-display); font-size: 1.85rem; font-weight: 700; color: var(--azul); margin-top: 3px; font-variant-numeric: tabular-nums; letter-spacing: .005em; line-height: 1.15; }
.kpi .value small { font-family: var(--font-sans); font-size: .9rem; font-weight: 600; color: var(--cinza-texto); }
.kpi.verde .value { color: var(--verde); }
.kpi.amarelo .value { color: var(--amarelo); }
.kpi.vermelho .value { color: var(--vermelho); }

/* Botões — forma PEQUENA da assinatura (raio 8 / chanfro 4), discreta. Borda 1px
   transparente em todos: o contorno (ghost) não muda a altura → linhas de botões
   alinham. Estados: hover = superfície/tom acima; disabled = sem hover e tom apagado. */
.btn {
  border: 1px solid var(--border); border-radius: var(--shape-sm); corner-shape: var(--shape-corners);
  padding: 10px 16px; font-family: inherit; font-size: .95rem; font-weight: 600; line-height: 1.3;
  cursor: pointer; display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  background: var(--surface-2); color: var(--text-primary); box-shadow: var(--edge-light);
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease, filter var(--dur-fast) ease, transform 90ms var(--ease-out);
}
.btn:hover { filter: brightness(.97); border-color: var(--border-strong); }
html[data-theme="dark"] .btn:hover { filter: brightness(1.08); }
/* Pressionar = a placa desce 1 px (só transform — nenhum relayout). */
.btn:active:not(:disabled) { transform: translateY(1px); }
/* CTA = latão usinado: véu claro no topo + aresta de luz + sombra curta. É o ÚNICO
   preenchimento dourado da tela (alternâncias escolhidas usam a placa neutra, abaixo). */
.btn.primary { background: var(--accent-sheen), var(--accent); border-color: transparent; color: var(--accent-contrast); font-weight: 700; box-shadow: var(--accent-shadow); }
.btn.primary:hover { background-color: var(--accent-hover); filter: none; }
.btn.primary:active { background-color: var(--accent-active); }
.btn.verde { background: var(--verde); color: #fff; border-color: transparent; box-shadow: var(--fill-edge); }
.btn.ghost { background: transparent; border-color: var(--border-strong); box-shadow: none; }
.btn.ghost:hover { background: var(--surface-hover); border-color: var(--field-border-hover); filter: none; }
.btn.sm { padding: 6px 11px; font-size: .85rem; }
.btn.danger { background: var(--vermelho-bg); color: var(--danger-fg); border-color: transparent; box-shadow: none; }
.btn.danger:hover { border-color: var(--danger); filter: none; }
/* Em LINHA de lista/tabela (botão pequeno) o Excluir/Desativar fica quieto: texto vermelho +
   contorno fino; o tinte vermelho aparece no hover. Uma coluna inteira de botões avermelhados
   disputava a atenção com os dados (Painel, Gestão de Usuários). Ação e texto iguais. */
.btn.danger.sm { background: transparent; border-color: var(--border); }
.btn.danger.sm:hover { background: var(--vermelho-bg); border-color: var(--danger); }
/* Desabilitado vence qualquer hover (inclusive o do tema escuro). */
.btn:disabled, .btn:disabled:hover { opacity: .5; cursor: not-allowed; filter: none !important; }
.btn.primary:disabled:hover { background-color: var(--accent); }
.btn.ghost:disabled:hover { background: transparent; border-color: var(--border-strong); }
/* ALTERNÂNCIA (modo, escala, vista, filtro): botão com aria-pressed / role="radio" / role="tab".
   Escolhido = PLACA neutra elevada + linha dourada embaixo (o dourado marca, não preenche);
   os módulos já trocam .primary/.ghost pelo estado — este bloco vence os dois sem mudar JS. */
.btn[aria-pressed="true"], .btn[role="radio"][aria-checked="true"], .btn[role="tab"][aria-selected="true"] {
  background: var(--seg-on); color: var(--text-primary); border-color: var(--border-strong); font-weight: 700;
  box-shadow: var(--seg-on-shadow), inset 0 -2px 0 var(--accent);
}
.btn[aria-pressed="true"]:hover, .btn[role="radio"][aria-checked="true"]:hover, .btn[role="tab"][aria-selected="true"]:hover { background: var(--seg-on); filter: brightness(1.03); }
.btn[aria-pressed="false"], .btn[role="radio"][aria-checked="false"], .btn[role="tab"][aria-selected="false"] { color: var(--text-secondary); }
.btn[aria-pressed="false"]:hover, .btn[role="radio"][aria-checked="false"]:hover, .btn[role="tab"][aria-selected="false"]:hover { color: var(--text-primary); }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }

/* Formulários — campo "quase convencional": raio simples, poço próprio (--field-bg),
   borda mais firme que a do card (lê como entrada) e foco = borda + anel dourados. */
label.field { display: block; margin-bottom: 12px; }
label.field > span { display: block; font-size: .84rem; color: var(--text-secondary); font-weight: 600; margin-bottom: 5px; letter-spacing: .005em; }
input, select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--field-border); border-radius: var(--radius-sm);
  font-size: 1rem; font-family: inherit; background: var(--field-bg); color: var(--text-primary);
  box-shadow: var(--well);   /* poço: a sombra interna do topo diz "aqui se escreve" (placa = botão; poço = campo) */
}
/* Caixa de marcação / opção: tamanho próprio (o width:100% acima esticava a caixa e quebrava o
   rótulo ao lado em 2 linhas — "Só / executivas") e a cor da marca no lugar do azul do sistema.
   :where() mantém a especificidade do input → classes de módulo (.lob-leg-ck…) continuam valendo. */
input:where([type="checkbox"], [type="radio"]) { width: auto; box-shadow: none; }
input:where([type="checkbox"], [type="radio"], [type="range"]), progress { accent-color: var(--accent); }
input:hover:not(:focus):not(:disabled), select:hover:not(:focus):not(:disabled), textarea:hover:not(:focus):not(:disabled) { border-color: var(--field-border-hover); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--well), var(--focus-ring); }
input:where([type="checkbox"], [type="radio"]):focus { box-shadow: none; }
input:where([type="checkbox"], [type="radio"]):focus-visible { box-shadow: var(--focus-ring); }
/* Seleção de texto e barras de rolagem no tom do tema (sem o azul/cinza claro do sistema). */
::selection { background: rgba(var(--accent-rgb), .3); }
html { scrollbar-color: var(--border-strong) transparent; }
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 1; }
input:disabled, select:disabled, textarea:disabled { color: var(--text-disabled); background: var(--surface-2); cursor: not-allowed; }
textarea { resize: vertical; min-height: 60px; }
.form-row { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.form-row-3 { display: grid; gap: 12px; grid-template-columns: 1fr 1fr 1fr; }

/* Tabelas */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 480px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--borda); }
th { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--cinza-texto); background: var(--surface-2); border-bottom-color: var(--border-strong); }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Hover de linha nas tabelas de DADOS (.table-wrap): véu translúcido por cima do fundo
   (background-image) — preserva a cor de status que a célula já tiver. */
.table-wrap tbody tr:hover > td { background-image: linear-gradient(var(--row-hover), var(--row-hover)); }
/* ...e um cursor de leitura: traço dourado de 2 px na 1ª célula da linha sob o mouse (o olho
   segue a linha em tabela densa). box-shadow interno: não mexe em largura nem em layout. */
.table-wrap tbody tr:hover > td:first-child { box-shadow: inset 2px 0 0 var(--accent); }

/* Barra de progresso = medidor: trilho rebaixado (poço) e preenchimento com o véu de luz no topo
   (a cor do preenchimento continua vindo do módulo — inclusive por style inline). */
.bar { background: var(--cinza-claro); border-radius: 20px; height: 9px; overflow: hidden; box-shadow: var(--well); }
.bar > i { display: block; height: 100%; background: var(--verde); border-radius: 20px; position: relative; }
.bar > i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--accent-sheen); pointer-events: none; }
.bar.small { height: 6px; }

/* Badges / chips */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 700; padding: 3px 9px; border-radius: 20px; }
.badge.rascunho { background: var(--cinza-claro); color: var(--cinza-texto); }
.badge.enviado { background: var(--amarelo-bg); color: var(--warning-fg); }
.badge.consolidado { background: var(--verde-bg); color: var(--verde); }
.badge.chuva { background: var(--azul-bg); color: var(--azul-claro); }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--azul-bg); color: var(--azul); border-radius: 20px; padding: 5px 11px; font-size: .85rem; font-weight: 600; }
.chip button { border: 0; background: transparent; color: var(--azul); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0; }
/* "×" para desmarcar o lote, integrado ao chip do local (Histórico).
   Área de toque confortável no celular sem inchar o chip (margens negativas
   compensam), e realce claro no hover/foco deixando evidente que é clicável. */
.hist-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin: -4px -5px -4px 1px; border-radius: 50%; font-weight: 700; transition: background .15s ease, color .15s ease; }
.hist-chip-x:hover, .hist-chip-x:focus-visible { background: var(--accent); color: var(--accent-contrast); outline: none; }
@media (max-width: 780px) { .hist-chip-x { width: 26px; height: 26px; margin: -6px -6px -6px 1px; } }

/* Lista de itens lançados */
.lanc-item {
  display: flex; align-items: center; gap: 12px; padding: 12px;
  border: 1px solid var(--borda); border-radius: 10px; margin-bottom: 8px; background: var(--surface);
}
.lanc-item .info { flex: 1; min-width: 0; }
.lanc-item .info .t1 { font-weight: 700; font-size: .95rem; }
.lanc-item .info .t2 { color: var(--cinza-texto); font-size: .82rem; }
/* "Lançado por": linha secundária discreta — não compete com serviço/%/status/equipe */
.lanc-item .info .lanc-autor { color: var(--cinza-texto); font-size: .74rem; opacity: .8; margin-top: 4px; }
.lanc-item .val { text-align: right; font-weight: 800; color: var(--azul); white-space: nowrap; }
/* "Apontado por / Apontadores" no cabeçalho dos cards agrupados (sequência/simultâneo/jornada)
   e o autor por linha (👤) no card expandido — mesma discrição da linha "Lançado por". */
.grupo-head .info .lanc-autor { color: var(--cinza-texto); font-size: .74rem; opacity: .85; margin-top: 4px; }
.grupo-linha .info .gl-autor { color: var(--cinza-texto); font-size: .72rem; opacity: .8; margin-top: 2px; }

/* Barra de filtros da seção "Serviços apontados neste dia" (compacta, responsiva) */
.ap-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 12px; }
.ap-filtros .ap-filtro { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--cinza-texto); }
.ap-filtros .ap-filtro select {
  padding: 6px 8px; border: 1px solid var(--borda); border-radius: 8px;
  background: var(--surface); font-size: .85rem; color: inherit; max-width: 220px;
}
@media (max-width: 480px) {
  .ap-filtros { gap: 6px; }
  .ap-filtros .ap-filtro { flex: 1 1 100%; }
  .ap-filtros .ap-filtro select { flex: 1; max-width: none; }
}

/* Modal */
.modal-bg {
  position: fixed; inset: 0; background: var(--overlay); z-index: 100;
  display: flex; align-items: flex-end; justify-content: center; padding: 0;
}
.modal {
  /* superfície ELEVADA (o degrau acima do cartão, como o popover): no escuro a janela
     destaca do conteúdo atrás do véu; no claro --surface-elevated = branco (igual). */
  background: var(--plate-sheen), var(--surface-elevated); border-radius: 16px 16px 0 0; width: 100%; max-width: 560px;
  border: 1px solid var(--line);
  /* dvh acompanha as barras dinâmicas do navegador (vh de fallback). O padding inferior
     reserva a safe-area: como é folha de baixo (align-items:flex-end), o botão de
     confirmar precisa ficar acima do indicador de home. */
  max-height: 92vh; max-height: 92dvh; overflow-y: auto; box-shadow: var(--edge-light), var(--sombra-forte);
  padding: 20px 20px max(20px, env(safe-area-inset-bottom)); position: relative;
  animation: up var(--dur) var(--ease-out);
}
@keyframes up { from { transform: translateY(22px); opacity: .6; } to { transform: none; opacity: 1; } }
.modal h3 { color: var(--azul); margin-bottom: 14px; font-size: 1.15rem; }
/* Título do modal: DIN + linha de cota curta logo abaixo (o modal "abre" como uma prancha). */
.modal > h3 {
  font-size: 1.25rem; font-weight: var(--fw-title); padding-bottom: 10px; margin-bottom: 16px;
  background:
    linear-gradient(var(--cota), var(--cota)) left bottom / 28px var(--cota-w) no-repeat,
    linear-gradient(var(--line), var(--line)) left bottom / 100% 1px no-repeat;
}
.modal .close { position: absolute; }

/* Modal "Finalizar apontamento" — 3 modalidades de encerramento (Apontamento).
   Cada opção é um cartão clicável com título + descrição SEMPRE visível, para
   nunca confundir "encerrar o apontamento do dia" com "concluir o serviço". */
.fin-ops { display: flex; flex-direction: column; gap: 10px; }
.fin-op {
  display: block; width: 100%; text-align: left;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 12px 14px; cursor: pointer;
  transition: border-color .1s, box-shadow .1s;
}
.fin-op:hover:not(.is-off):not(.fin-op-custom) { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.fin-op .fin-t { font-weight: 800; font-size: .95rem; color: var(--text-primary); }
.fin-op .fin-d { font-size: .82rem; color: var(--text-secondary); margin-top: 3px; line-height: 1.35; }
.fin-op.is-off { opacity: .55; cursor: default; }
.fin-op-custom { cursor: default; }
.fin-custom-row { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
/* Campo estreito (só HH:MM) para o botão "Concluir" caber na janela sem rolagem
   horizontal — sobrepõe a largura 100% global dos inputs. */
.fin-custom-row input[type="time"] { flex: 0 0 auto; width: 130px; min-width: 0; max-width: 55%; }
.fin-custom-row .btn { flex: 0 0 auto; white-space: nowrap; }

/* Modal EMPILHADO (consulta rápida de histórico aberta de dentro do apontamento).
   Fica acima do modal base; é uma coluna flex (cabeçalho fixo + corpo com rolagem
   própria), limitado a ~85vh para a linha do tempo nunca estourar a tela — nem
   com dezenas de lançamentos. */
.modal-bg.stacked { z-index: 120; }
.modal.modal-wide { max-width: 720px; }
#modalRoot2 .modal { display: flex; flex-direction: column; max-height: 85vh; max-height: 85dvh; }
#modalRoot2 .modal > h3 { flex: 0 0 auto; }
.modal2-x {
  position: absolute; top: 14px; right: 14px; width: 30px; height: 30px;
  border: 0; background: var(--cinza-claro); color: var(--cinza-texto);
  border-radius: 8px; font-size: 1.35rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center; padding: 0;
}
.modal2-x:hover { background: var(--borda); color: var(--azul); }
.modal2-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
/* dentro do modal a linha do tempo já vem no seu card; tira o respiro duplicado */
.modal2-body .card:last-child { margin-bottom: 0; }
/* Ciclo de vida dos modais (core/ui-base.js › ModalCiclo — MOD-02/03): com modal aberto o fundo NÃO rola (a roda
   e o toque ficam no modal; a calha da barra fica reservada para a página não pular de lado); o diálogo recebe o
   foco ao abrir sem anel próprio (os campos de dentro mantêm o seu); e a última fileira de botões de um modal
   empilhado gruda no fim do corpo — o rodapé (Cancelar/Salvar) nunca fica abaixo da dobra (ex.: Serviço × PLS). */
html.modal-aberto, html.modal-aberto body { overflow: hidden; }
html.modal-aberto.modal-com-barra { scrollbar-gutter: stable; }
.modal, .modal2-body { overscroll-behavior: contain; }
.modal[tabindex="-1"]:focus { outline: none; }
.modal2-body > .btn-row:last-child { position: sticky; bottom: 0; z-index: 1; background: var(--surface-elevated); padding-top: 10px; }

/* Empty state */
.empty { text-align: center; color: var(--cinza-texto); padding: 26px 12px; }
.empty .big { font-size: 2.4rem; margin-bottom: 6px; }
/* ÁREA VAZIA dos módulos = folha em branco da prancha: marcas de registro nos 4 cantos (as de corte
   de uma prancha técnica) e o ícone num poço pequeno. Uma regra para as classes de todos os módulos
   (cada módulo continua dono do texto/padding no seu CSS). 8 camadas de gradiente, sem imagem. */
.plan-vazia, .qua-vazia, .rh-vazia, .pin-vazia, .bt-empty, .dob-vazio {
  --rm: var(--border-strong);
  background-image:
    linear-gradient(var(--rm), var(--rm)), linear-gradient(var(--rm), var(--rm)),
    linear-gradient(var(--rm), var(--rm)), linear-gradient(var(--rm), var(--rm)),
    linear-gradient(var(--rm), var(--rm)), linear-gradient(var(--rm), var(--rm)),
    linear-gradient(var(--rm), var(--rm)), linear-gradient(var(--rm), var(--rm));
  background-repeat: no-repeat;
  background-size: 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px;
  background-position: left 12px top 12px, left 12px top 12px, right 12px top 12px, right 12px top 12px,
    left 12px bottom 12px, left 12px bottom 12px, right 12px bottom 12px, right 12px bottom 12px;
}
.plan-vazia-ic, .qua-vazia-ic, .rh-vazia-ic, .pin-vazia-ic, .bt-empty-ic, .dob-vazio-ic {
  width: 64px; height: 64px; margin-left: auto; margin-right: auto; display: grid; place-items: center; line-height: 1;
  background: var(--seg-track); border: 1px solid var(--border);
  border-radius: var(--shape-sm); corner-shape: var(--shape-corners); box-shadow: var(--well);
}
@media print { .plan-vazia, .qua-vazia, .rh-vazia, .pin-vazia, .bt-empty, .dob-vazio { background-image: none; } }

/* Curva S / gráfico */
.chart-wrap { overflow-x: auto; }
svg.chart { display: block; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; font-size: .85rem; color: var(--cinza-texto); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }

/* Toast */
.toast {
  position: fixed; bottom: calc(84px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  background: var(--toast-bg); color: var(--toast-fg); padding: 12px 18px;
  border: 1px solid var(--line); border-radius: var(--shape-sm); corner-shape: var(--shape-corners);
  font-size: .9rem; z-index: 200; box-shadow: var(--edge-light), var(--sombra-forte); opacity: 0; pointer-events: none;
  transform: translateX(-50%) translateY(8px);   /* entra subindo 8 px: mostra de onde veio, sem atraso */
  transition: opacity .2s var(--ease-out), transform .2s var(--ease-out);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast { display: flex; align-items: center; gap: 12px; max-width: 92vw; }
.toast-msg { flex: 1; }
/* Ação do toast ("Desfazer"…) em dourado da marca — o azul antigo saiu da identidade. */
.toast-acao { background: transparent; border: 0; color: var(--gold-300); font-weight: 700; font-size: .9rem; cursor: pointer; padding: 2px 6px; white-space: nowrap; }
.toast-acao:disabled { opacity: .6; cursor: default; }

/* Barra de ações em lote (colaboradores) */
.lote-bar { position: sticky; top: 6px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  background: var(--azul-bg); border: 1px solid var(--azul); border-radius: 10px; padding: 8px 10px; margin: 4px 0 10px; }
.lote-bar .lote-n { font-weight: 700; color: var(--azul); }
.lote-bar .lote-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.col-chk { width: 34px; text-align: center; }
.chk-colab, #chkColabTodos, .chk-serv, #chkServTodos { width: 18px; height: 18px; cursor: pointer; }
tr.linha-sel td { background: var(--azul-bg); }

/* Catálogo de serviços hierárquico (Grupo → Serviço) — accordion */
.serv-grupos { display: flex; flex-direction: column; gap: 8px; }
.serv-grupo { border: 1px solid var(--borda); border-radius: 10px; background: var(--surface); overflow: hidden; }
.serv-grupo[open] { border-color: var(--azul); }
.serv-grupo-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; cursor: pointer;
  list-style: none; background: var(--cinza-claro); user-select: none; }
.serv-grupo[open] > .serv-grupo-head { background: var(--azul-bg); }
.serv-grupo-head::-webkit-details-marker { display: none; }
.sg-caret { display: inline-block; transition: transform .15s ease; color: var(--azul); font-size: .8rem; flex-shrink: 0; }
.serv-grupo[open] .sg-caret { transform: rotate(90deg); }
.sg-nome { font-weight: 700; color: var(--grafite); }
.sg-count { font-size: .78rem; }
.sg-acoes { display: flex; flex-wrap: wrap; gap: 5px; margin-left: auto; }
.serv-grupo-body { padding: 6px 10px 10px; }
.serv-grupo-body .table-wrap { margin: 0; }

/* Conjunto Orçamentário — nível 0 (ACIMA do grupo/etapa) na árvore de Serviços.
   Reusa a mecânica do accordion do grupo, com o acento DOURADO da identidade p/
   distinguir o topo da hierarquia. Só tokens do Design System. */
.serv-conjuntos { display: flex; flex-direction: column; gap: 10px; }
.serv-conjunto { border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 12px; background: var(--surface-2); overflow: hidden; }
.serv-conjunto[open] { border-left-color: var(--accent-strong); }
.serv-conjunto-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 11px 13px; cursor: pointer; list-style: none; }
.serv-conjunto[open] > .serv-conjunto-head { background: var(--accent-soft); }
.serv-conjunto-head::-webkit-details-marker { display: none; }
.sc-caret { display: inline-block; transition: transform .15s ease; color: var(--accent-strong); font-size: .85rem; flex-shrink: 0; }
.serv-conjunto[open] > .serv-conjunto-head .sc-caret { transform: rotate(90deg); }
.sc-nome { font-weight: 800; color: var(--text-primary); }
.sc-count { font-size: .78rem; }
.sc-acoes { display: flex; flex-wrap: wrap; gap: 5px; margin-left: auto; }
.serv-conjunto-body { padding: 4px 10px 10px; }
/* Totais do grupo (físico agrupado por unidade · financeiro previsto). Fica logo
   após a contagem; as ações (margin-left:auto) continuam à direita. */
.sg-totais { font-size: .76rem; display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
/* Prévia "Valor total previsto" no modal de serviço (derivado ao vivo). */
.sv-total-prev { margin: 2px 0 4px; padding: 8px 10px; background: var(--cinza-claro); border-radius: 8px; font-size: .9rem; }
.sv-total-prev b { font-size: 1.02rem; }
.sv-total-prev .muted { font-size: .78rem; }
/* Título de seção do modal de serviço (Medição principal / Unidade auxiliar). */
.sv-sec-tit { margin: 12px 0 2px; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--azul); }
.sv-sec-tit .muted { font-weight: 600; text-transform: none; letter-spacing: 0; }
/* Prévia da equivalência (unidade auxiliar) — visualmente secundária. */
.sv-equiv { margin: 2px 0 4px; padding: 6px 10px; background: var(--cinza-claro); border-radius: 8px; font-size: .82rem; }
.sv-equiv .muted { font-size: .76rem; }
/* Unidade auxiliar na 2ª linha da célula de quantidade (lista de serviços). */
.serv-aux { display: block; font-size: .72rem; }
/* Medição: TODAS as tabelas financeiras usam a MESMA grade de colunas.
   table-layout:fixed faz as larguras do <colgroup> (definido no JS — medColgroup)
   valerem para cabeçalho, corpo e Total, iguais em toda terceirizada/grupo/serviço.
   Assim dá pra traçar uma linha vertical e achar Qtd prev.→…→Saldo sempre na mesma posição.
   Serviço é a coluna flexível; Grupo e Serviço quebram sem deslocar as numéricas.
   min-width segura a leitura no celular (o .table-wrap rola na horizontal, sem esmagar). */
table.med-fin { table-layout: fixed; min-width: 980px; }
table.med-fin th, table.med-fin td { overflow-wrap: anywhere; }
/* Medição: linha de total do bloco e saldo financeiro negativo. */
.med-total td { font-weight: 800; background: var(--cinza-claro); }
td.neg { color: var(--vermelho); }
/* Equivalente auxiliar (informativo) na célula de casas executadas. */
.med-aux { display: block; font-size: .72rem; font-weight: 400; }
/* Total físico auxiliar no cabeçalho do grupo de serviços. */
.sg-aux { white-space: nowrap; }

/* Seletor de serviço (Apontamento) — Grupo → Serviço, mobile-first */
/* Cabeçalho compacto recolhível: mostra o serviço escolhido (ou "Selecionar serviço")
   e a seta ▸/▾. Um toque expande/recolhe a lista — libera espaço no modal.
   À direita, quando há serviço, um ✕ para desmarcar. */
.sp-head { display: flex; align-items: stretch; width: 100%; box-sizing: border-box;
  background: var(--surface); border: 1px solid var(--borda); border-radius: 9px; min-height: 46px;
  overflow: hidden; transition: border-color .12s, background .12s; }
.sp-head:hover { border-color: var(--azul); }
.sp-head.sp-has { border-color: var(--azul); background: var(--azul-bg); }   /* já tem serviço escolhido */
.sp-head-toggle { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; text-align: left;
  background: none; border: 0; cursor: pointer; font: inherit; color: var(--grafite); padding: 11px 12px; }
.sp-head-toggle:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }
.sp-head-arrow { flex-shrink: 0; color: var(--azul); font-size: .8rem; width: 14px; text-align: center; }
.sp-head-info { min-width: 0; flex: 1; }
.sp-head-t { font-weight: 700; overflow-wrap: anywhere; }
.sp-head-ph { font-weight: 600; color: var(--cinza-texto); }   /* placeholder "Selecionar serviço" */
.sp-head-s { display: block; font-size: .8rem; margin-top: 2px; }
/* ✕ desmarcar — encostado à direita, altura cheia, separado por uma linha */
.sp-head-x { flex-shrink: 0; width: 44px; align-self: stretch; background: none; border: 0;
  border-left: 1px solid var(--borda); color: var(--cinza-texto); font-size: 1rem; line-height: 1;
  cursor: pointer; transition: color .12s, background .12s; }
.sp-head-x:hover, .sp-head-x:focus-visible { color: #b91c1c; background: #fef2f2; outline: none; }
/* Recolhido: o cabeçalho já é a moldura (sem a caixa cinza em volta). */
.serv-pick.sp-collapsed { border: 0; padding: 0; background: transparent; border-radius: 0; }
.serv-pick { border: 1px solid var(--borda); border-radius: 10px; padding: 8px; background: var(--cinza-claro); }
.serv-pick .sp-head { margin-bottom: 8px; }   /* respiro entre o cabeçalho e a busca quando aberto */
.sp-busca { width: 100%; padding: 9px 11px; border: 1px solid var(--borda); border-radius: 9px; margin-bottom: 8px; background: var(--surface); }
/* lista compacta Grupo → Serviços (mesma leitura do seletor do Histórico) */
.sp-lista { display: flex; flex-direction: column; gap: 10px; max-height: 48vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sp-bloco-tit { font-weight: 800; color: var(--grafite); font-size: .8rem; text-transform: uppercase; letter-spacing: .02em;
  padding: 4px 2px; margin-bottom: 2px; position: sticky; top: 0; background: var(--cinza-claro); z-index: 1; }
.sp-item { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%; box-sizing: border-box;
  text-align: left; background: var(--surface); border: 1px solid var(--borda); border-left: 3px solid transparent; border-radius: 8px;
  padding: 11px 12px; margin-top: 5px; cursor: pointer; font: inherit; color: var(--grafite); min-height: 44px;
  transition: border-color .12s, background .12s; }
.sp-item:hover, .sp-item:focus-visible { border-color: var(--azul); background: var(--azul-bg); outline: none; }
.sp-item.sel { border-color: var(--azul); border-left-color: var(--azul); background: var(--azul-bg); font-weight: 700; }
.sp-item-nome { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sp-item-meta { font-size: .76rem; white-space: nowrap; flex-shrink: 0; }
.sp-item-check { flex-shrink: 0; color: var(--azul); font-size: 1rem; line-height: 1; margin-right: 2px; }
/* Serviços simultâneos escolhidos (modo multi): chips acima do seletor */
.sp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.sp-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--azul-bg); color: var(--grafite);
  border: 1px solid var(--azul); border-radius: 999px; padding: 5px 6px 5px 12px; font-size: .84rem; font-weight: 600; max-width: 100%; }
.sp-chip .muted { font-weight: 400; }
.sp-chip-x { flex-shrink: 0; width: 24px; height: 24px; border: 0; border-radius: 999px; background: none; color: var(--azul);
  cursor: pointer; font-size: .9rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.sp-chip-x:hover, .sp-chip-x:focus-visible { color: #b91c1c; background: #fef2f2; outline: none; }

/* Prévia / resumo das operações em lote */
.previa-nums { display: flex; flex-wrap: wrap; gap: 16px; margin: 6px 0 12px; }
.previa-nums > div { display: flex; flex-direction: column; }
.previa-nums b { font-size: 1.5rem; line-height: 1; }
.previa-nums span { font-size: .72rem; text-transform: uppercase; letter-spacing: .4px; color: var(--cinza-texto); }
.previa-nums .verde-t b { color: #1a8f4c; }
.previa-nums .danger-t b { color: #c62828; }
.danger-t { color: #c62828; }
.verde-t { color: #1a8f4c; }
.previa-lista { margin: 6px 0 10px; padding-left: 18px; font-size: .88rem; max-height: 210px; overflow-y: auto; }
.previa-lista li { margin: 2px 0; }
.aviso-forte { background: #fff3cd; border: 1px solid #e0c65a; color: #7a5b00; border-radius: 8px; padding: 9px 12px; margin: 8px 0; font-size: .85rem; }
.lote-prog { padding: 22px 4px; font-size: 1.02rem; text-align: center; }

.section-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .5px; color: var(--cinza-texto); font-weight: 700; margin: 18px 0 8px; }
.hint { font-size: .82rem; color: var(--cinza-texto); background: var(--azul-bg); border-radius: 8px; padding: 9px 12px; margin-bottom: 12px; }
.right { text-align: right; }
.muted { color: var(--cinza-texto); }
.nowrap { white-space: nowrap; }
/* Texto só para leitor de tela (ex.: o <h1> de telas sem título visível — Planejamento, Produção). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mt { margin-top: 14px; }

/* ---------- Responsivo ---------- */
/* Tablet / notebook menor: sidebar um pouco mais enxuta, sobra p/ o conteúdo. */
@media (min-width: 781px) and (max-width: 1080px) {
  .nav { width: 178px; }
  .content { --content-px: 18px; --content-py: 18px; }
}
@media (max-width: 780px) {
  .wrap { display: block; }
  .nav {
    position: fixed; bottom: 0; left: 0; right: 0; top: auto;
    width: 100%; display: flex; border-right: 0; border-top: 1px solid var(--line);
    /* Safe-area inferior: em aparelhos com barra/indicador de home o conteúdo da barra
       sobe acima dela; laterais idem em telas curvas. env()=0 no resto → sem efeito. */
    padding: 6px max(4px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
    z-index: 50; box-shadow: 0 -1px 6px rgba(0,0,0,.06);
  }
  .nav a, .nav button { flex-direction: column; gap: 3px; padding: 7px 4px; font-size: .68rem; text-align: center; border-radius: 8px; }
  .nav a .ic, .nav button .ic { font-size: 1.25rem; width: auto; }
  /* Barra inferior: a linha dourada do item ativo vai para o TOPO do item. */
  .nav a.active::before, .nav button.active::before { top: 0; bottom: auto; left: 28%; right: 28%; width: auto; height: var(--cota-w); }
  .nav a span.txt, .nav button span.txt { line-height: 1.1; }
  /* Reserva embaixo o espaço da barra inferior de 1 linha (o caso do Apontamento).
     Um módulo com barra mais alta (ex.: Estoque, 2 linhas) reserva a DIFERENÇA no
     próprio conteúdo — ver .est-main no estoque.css. */
  .content { --content-px: 14px; --content-py: 14px; padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  /* Módulo com MUITOS itens (ex.: Estoque, 11 telas): a mesma barra inferior, só
     autorizada a quebrar em 2 linhas — nenhum item some e não há rolagem lateral.
     O Apontamento (7 itens) não usa o modificador e continua em 1 linha. */
  .nav.nav-multi { flex-wrap: wrap; justify-content: center; row-gap: 2px; }
  .nav.nav-multi a, .nav.nav-multi button { flex: 1 1 58px; min-width: 58px; max-width: 25%; margin-bottom: 0; }
  .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr 1fr; }
  .form-row, .form-row-3 { grid-template-columns: 1fr; }
  .topbar select { max-width: 42vw; }
}
@media (max-width: 460px) {
  .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
  .kpi .value { font-size: 1.55rem; }
}
@media (min-width: 781px) {
  .modal-bg { align-items: center; padding: 20px; }
  /* Modal centralizado = forma GRANDE da assinatura (raio 18 / chanfro 14). No celular
     ele é folha de baixo e mantém os cantos superiores arredondados. */
  .modal { border-radius: var(--shape-lg); corner-shape: var(--shape-corners); }
}

/* ==========================================================================
   Mapa do empreendimento (quadras + lotes)
   ========================================================================== */
/* Canvas central: coluna legível e centralizada. Em monitores largos o mapa deixa
   de ficar espremido no canto esquerdo — sem esticar as células até ocupar tudo. */
.mapa-canvas { max-width: 1140px; margin-inline: auto; }

/* Barra do mapa: Voltar · legenda integrada · seleção múltipla — um só cabeçalho. */
.mapa-toolbar {
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 16px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md);
}
.mapa-toolbar .mt-sep { flex: 1 1 0; min-width: 0; }
.mapa-multi-btn[aria-pressed="true"] { box-shadow: var(--focus-ring); }

.mapa { display: flex; flex-direction: column; gap: 18px; max-width: 1140px; margin-inline: auto; }

/* Painel de um BLOCO / QUADRA — unidade visual bem definida (faixa dourada no topo). */
.quadra {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 0 16px 16px; position: relative;
}
.quadra::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-soft-border));
}
.quadra-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 15px 0 12px; margin-bottom: 14px; border-bottom: 1px solid var(--border);
}
.quadra-head .q-badge {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 13px;
  display: grid; place-items: center; font-size: 1.05rem; font-weight: 800; line-height: 1;
  background: var(--accent-soft); color: var(--accent-strong); border: 1px solid var(--accent-soft-border);
}
.quadra-head .q-badge.q-badge--uc { background: var(--uc-bg); color: var(--uc-fg); border-color: var(--uc); }
.q-titulo { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.quadra-head .q-nome { font-weight: 800; color: var(--text-primary); font-size: 1.1rem; line-height: 1.15; display: flex; align-items: center; gap: 8px; overflow-wrap: anywhere; }
.quadra-head .q-stats { font-size: .78rem; color: var(--text-secondary); display: flex; gap: 6px 12px; flex-wrap: wrap; align-items: center; }
/* Cabeçalho SEM .q-titulo (mapa do Histórico) mantém stats à direita, como antes. */
.quadra-head > .q-nome { flex: 1 1 auto; }
.quadra-head > .q-stats { margin-left: auto; }
.q-stats .qs-exec { color: var(--info-fg); font-weight: 700; }
.q-stats .qs-pend { color: var(--warning-fg); font-weight: 700; }
.q-stats .qs-uc { color: var(--uc-fg); font-weight: 700; }
.q-acoes { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.q-acoes .btn { white-space: nowrap; }

/* Pavimento / seção interna do bloco: banda rotulada, instantaneamente escaneável. */
.mapa-piso + .mapa-piso, .mapa-piso--solto + .mapa-piso { margin-top: 16px; }
.mapa-piso-lbl {
  display: flex; align-items: center; gap: 10px; margin: 0 2px 9px;
  font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .6px;
  color: var(--text-secondary);
}
.mapa-piso-lbl .mp-nome { flex: 0 0 auto; }
.mapa-piso-lbl .mp-linha { flex: 1 1 auto; height: 1px; background: var(--border); }
.mapa-piso-lbl .mp-cont { flex: 0 0 auto; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-muted); font-size: .72rem; }
/* Botão discreto "📍 Apontar" no cabeçalho do pavimento (container apontável). */
.mapa-piso-lbl .mp-apontar { flex: 0 0 auto; border: 1px solid var(--border); background: var(--surface-2); color: var(--accent-strong); border-radius: 6px; padding: 1px 7px; font-size: .72rem; font-weight: 700; letter-spacing: 0; text-transform: none; cursor: pointer; }
.mapa-piso-lbl .mp-apontar:hover { border-color: var(--accent); background: var(--accent-soft); }

/* Faixa de "Locais complementares" (fachadas soltas, UCs, ruas…). */
.mapa-uc { gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.mapa-uc.mapa { display: grid; }
.mapa-uc-sep {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 26px auto 14px; max-width: 1140px; padding-top: 18px; border-top: 1px solid var(--border);
}
.mapa-uc-sep .muc-tit { font-weight: 800; color: var(--uc-fg); font-size: .95rem; }
.mapa-uc-sub { font-weight: 500; font-size: .82rem; }
.uc-card { border-left: 3px solid var(--uc); padding: 0 14px 14px; }
.uc-card::before { background: var(--uc); }
.uc-card .quadra-head { margin-bottom: 0; border-bottom: 0; }
.uc-apontar { display: flex; width: 100%; justify-content: center; margin-top: 4px; }
@media (min-width: 620px) { .uc-apontar { display: inline-flex; width: auto; } }

/* ---- Grade de unidades — células de tamanho CONSISTENTE, alinhadas à esquerda.
   auto-FIT (não auto-fill) + máximo fixo (não 1fr): as colunas vazias colapsam,
   então poucas células não ficam espremidas no canto NEM esticam pela tela toda. */
.lote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 88px)); gap: 8px; justify-content: start; }
.lote-grid--wide { grid-template-columns: repeat(auto-fit, minmax(160px, 260px)); }

.lote {
  border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 9px 6px;
  min-height: 60px; cursor: pointer; text-align: center; background: var(--surface-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  transition: transform .08s, box-shadow .1s, border-color .1s; position: relative; user-select: none;
}
.lote:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.lote:focus-visible { outline: 3px solid var(--focus-color); outline-offset: 1px; box-shadow: var(--focus-ring); }
.lote .l-corpo { display: flex; flex-direction: column; align-items: inherit; min-width: 0; max-width: 100%; gap: 1px; }
.lote .l-ico { font-size: 1rem; line-height: 1; opacity: .82; }
.lote .l-num { font-weight: 800; font-size: .95rem; color: var(--text-primary); line-height: 1.14; overflow-wrap: anywhere; }
.lote .l-tipo { font-size: .6rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; font-weight: 700; }
.lote .l-dot { position: absolute; top: 4px; right: 5px; font-size: .6rem; }

/* Célula LARGA (fachada / cobertura / área): ícone à esquerda, nome em até 2 linhas. */
.lote-grid--wide .lote { flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; padding: 10px 12px; gap: 9px; min-height: 56px; }
.lote-grid--wide .lote .l-num { font-size: .88rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lote-grid--wide .lote .l-ico { font-size: 1.2rem; }

/* Diferenciação de CATEGORIA (sutil: tipografia + fundo, sem carnaval). */
.lote--circ, .lote--comum, .lote--ext, .lote--outro { background: var(--surface); border-style: dashed; }
.lote--fachada, .lote--cobertura { background: var(--surface); }
.lote--cobertura .l-ico, .lote--fachada .l-ico { opacity: 1; }

/* ---- Status (fundo + realce). A cor NÃO é o único sinal — ver .l-pip (forma). ---- */
.lote.st-nao_iniciado { background: var(--surface-2); }
.lote.st-em_execucao { background: var(--info-bg); border-color: var(--info); }
.lote.st-em_execucao .l-num { color: var(--info-fg); }
.lote.st-atrasado { background: var(--danger-bg); border-color: var(--danger); }
.lote.st-atrasado .l-num { color: var(--danger-fg); }
.lote.st-concluido { background: var(--success-bg); border-color: var(--success); }
.lote.st-concluido .l-num { color: var(--success-fg); }
/* Seleção múltipla = DOURADO (identidade); distinto do âmbar da pendência. */
.lote.selecionado { outline: 3px solid var(--accent); outline-offset: 1px; background: var(--accent-soft); border-color: var(--accent); }
.lote.selecionado .l-num { color: var(--accent-strong); }
/* Card INDISPONÍVEL na seleção múltipla do mapa (tipo/origem incompatível com o 1º
   selecionado): esmaecido e sem cursor de seleção; clique ignorado no JS + tooltip. */
.lote.lote--bloq { opacity: .38; cursor: not-allowed; }

/* Pip de status — sinal por FORMA + posição além da cor (daltonismo / contraste). */
.l-pip { position: absolute; top: 5px; right: 5px; width: 11px; height: 11px; border-radius: 50%; font-size: 8px; font-weight: 900; line-height: 11px; text-align: center; box-shadow: 0 0 0 1.5px var(--surface); }
.l-pip.pip-exec { background: var(--info); }
.l-pip.pip-pend { background: transparent; border: 2px solid var(--warning); box-shadow: 0 0 0 1.5px var(--surface); }   /* anel = forma distinta */
.l-pip.pip-conc { background: var(--success); color: var(--text-inverse); }
.l-pip.pip-atr  { background: var(--danger); color: var(--text-inverse); }

/* Modo seleção múltipla: caixa de marcação no canto (deixa evidente o que é selecionável). */
.lote--selecionavel::after {
  content: ""; position: absolute; top: 5px; left: 5px; width: 15px; height: 15px;
  border: 1.5px solid var(--border-strong); border-radius: 5px; background: var(--surface);
}
.lote--selecionavel.selecionado::after {
  content: "✓"; background: var(--accent); border-color: var(--accent); color: var(--accent-contrast);
  font-size: 11px; font-weight: 900; line-height: 13px; text-align: center;
}

/* ---- Mapa · responsivo ----
   Celular: as células preenchem a largura (fill via 1fr) em vez de deixar vão à
   direita; fachadas/cobertura passam a UMA coluna; o bloco respira menos padding. */
@media (max-width: 560px) {
  .quadra { padding: 0 12px 14px; border-radius: var(--radius-md); }
  .quadra-head { gap: 10px; padding: 13px 0 11px; }
  .quadra-head .q-badge { width: 38px; height: 38px; border-radius: 11px; }
  .quadra-head .q-nome { font-size: 1.02rem; }
  .q-acoes { margin-left: 0; flex: 1 1 100%; }
  .q-acoes .btn { flex: 1 1 auto; }
  .lote-grid { grid-template-columns: repeat(auto-fit, minmax(62px, 1fr)); gap: 7px; }
  .lote-grid--wide { grid-template-columns: 1fr; }
  .mapa-toolbar { gap: 8px 12px; }
  .mapa-toolbar .mt-sep { display: none; }
  .mapa-multi-btn { flex: 1 1 100%; }
}
@media (min-width: 561px) and (max-width: 900px) {
  .lote-grid--wide { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* Histórico — seleção única de lote (azul: NÃO reusa a cor de pendência) */
.lote.hist-sel { outline: 3px solid var(--azul); outline-offset: 1px; background: var(--info-bg); }
.lote.hist-sel .l-num { color: var(--azul); }
.lote.hist-inativo { border-style: dashed; opacity: .62; }
.lote.hist-inativo .l-dot { top: 3px; right: 4px; font-size: .72rem; color: var(--cinza-texto); }
.lote:focus-visible { outline: 3px solid var(--azul); outline-offset: 1px; }
.hist-sel-topo { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hist-local-bar { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-start; }
/* Coluna fixa: Atualizar histórico → Selecionar/Fechar mapa → local escolhido (não reorganiza) */
.hist-local-col { display: flex; flex-direction: column; gap: 8px; align-items: stretch; width: 210px; max-width: 100%; flex: 0 0 auto; }
.hist-local-col > .btn { width: 100%; white-space: nowrap; }
.hist-local-col > .chip { align-self: flex-start; max-width: 100%; }
.hist-mapa-painel { margin-top: 12px; border-top: 1px solid var(--borda); padding-top: 12px; }

/* Histórico — MAPA POR SERVIÇO (cor interna = status do serviço no lote; % substitui "CASA") */
.hist-serv-sel { flex: 1; min-width: 240px; }        /* filtro de serviço na barra do Histórico (ao lado da coluna) */
.hist-serv-sel > span { font-size: .72rem; font-weight: 700; color: var(--cinza-texto); }
.hist-serv-busca { width: 100%; box-sizing: border-box; padding: 7px 9px; border: 1px solid var(--borda); border-radius: 8px; margin-bottom: 5px; background: var(--surface); font: inherit; }
.lote .l-pct { font-size: .68rem; font-weight: 800; color: var(--cinza-texto); letter-spacing: .2px; margin-top: 1px; }
.lote.hist-serv-conc { background: var(--verde-bg); border-color: var(--verde); }
.lote.hist-serv-conc .l-num, .lote.hist-serv-conc .l-pct { color: var(--verde); }
.lote.hist-serv-and  { background: var(--amarelo-bg); border-color: var(--amarelo); }
.lote.hist-serv-and  .l-num, .lote.hist-serv-and .l-pct { color: #a9750a; }
.lote.hist-serv-nao  { background: var(--surface); border-color: var(--borda); }
.lote.hist-serv-nao  .l-num { color: var(--text-primary); }
/* seleção no mapa por serviço: só anel azul (NÃO troca o fundo → a cor de status continua visível) */
.lote.hist-sel-map { outline: 3px solid var(--azul); outline-offset: 2px; box-shadow: 0 0 0 3px rgba(11, 79, 140, .22), var(--sombra); z-index: 1; }
/* resumo gerencial do serviço (acima do mapa) */
.hist-serv-resumo { margin: 12px 0 4px; }
.hist-serv-resumo .hsr-titulo { font-size: 1rem; color: var(--azul); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hist-serv-resumo .hsr-cards { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.hist-serv-resumo .hsr-card { background: var(--cinza-claro); border: 1px solid var(--borda); border-radius: 10px; padding: 8px 12px; min-width: 92px; text-align: center; }
.hist-serv-resumo .hsr-card .n { font-size: 1.25rem; font-weight: 800; line-height: 1.1; }
.hist-serv-resumo .hsr-card .l { font-size: .68rem; color: var(--cinza-texto); }
.hist-serv-resumo .hsr-card.conc { background: var(--verde-bg); border-color: var(--verde); }
.hist-serv-resumo .hsr-card.conc .n { color: var(--verde); }
.hist-serv-resumo .hsr-card.and { background: var(--amarelo-bg); border-color: var(--amarelo); }
.hist-serv-resumo .hsr-card.and .n { color: #a9750a; }
.hist-serv-resumo .hsr-card.nao { background: var(--surface); }
.hist-serv-resumo .hsr-card.media .n { color: var(--azul); }
.hist-legenda { margin-top: 2px; }
.leg-and { background: var(--amarelo-bg); border-color: var(--amarelo); }
.q-serv-stat { font-size: .74rem; color: var(--cinza-texto); }

/* === Mapa de Qualidade por local (Mobuss › aba Mapa) — mobuss-mapa-ui.js ===
   Cobertura FVS×lote = destaque dourado (acento). NUNCA vermelho de reprovação:
   NC é sempre "no nível da FVS" (barra âmbar discreta), não erro do lote. */
.lote.qua-map-cov { background: var(--accent-soft); border-color: var(--accent); }
.lote.qua-map-cov .l-num { color: var(--accent-strong); }
.lote .l-fvs { font-size: .64rem; font-weight: 800; color: var(--accent-strong); letter-spacing: .2px; margin-top: 1px; }
.lote .l-nc { font-size: .6rem; font-weight: 700; color: var(--warning-fg); margin-top: 1px; }
.lote.qua-map-nc { box-shadow: inset 4px 0 0 var(--warning); }               /* NC nível-FVS: barra âmbar, sem tingir o lote */
.lote .qua-badge { position: absolute; top: 4px; right: 5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: var(--accent); color: var(--accent-contrast); font-size: .62rem; font-weight: 800; line-height: 16px; text-align: center; }
.lote.qua-map-sel { outline: 3px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-md); z-index: 1; }

.mb-mapa-legenda { margin: 6px 0 4px; }
.mb-mapa-legenda i { display: inline-block; width: 13px; height: 13px; border-radius: 4px; border: 1px solid var(--border); vertical-align: -2px; margin-right: 4px; }
.mb-mapa-legenda i.leg-neutro { background: var(--surface-2); }
.mb-mapa-legenda i.leg-cov { background: var(--accent-soft); border-color: var(--accent); }
.mb-mapa-legenda i.leg-nc { background: var(--accent-soft); border-color: var(--accent); box-shadow: inset 3px 0 0 var(--warning); }

.mb-mapa-head { margin-bottom: 8px; }
.mb-mapa-tit { margin: 0; font-size: 1.15rem; }
.mb-mapa-fvs-lbl { display: block; font-size: .74rem; font-weight: 700; color: var(--text-secondary); margin-bottom: 4px; }
.mb-mapa-fvs-row { display: flex; gap: 8px; align-items: center; }
.mb-mapa-fvs-input { flex: 1; min-width: 0; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-primary); font: inherit; }
.mb-mapa-disc { background: var(--warning-bg); border: 1px solid var(--warning); color: var(--warning-fg); }
.mb-mapa-hint, .mb-mapa-vazio { margin: 6px 0; }
.mb-mapa-inativos { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--text-secondary); margin: 8px 0; }
.mb-mapa-bucket { margin-top: 14px; }
.mb-mapa-buc-c { font-size: .72rem; background: var(--surface-3); border-radius: 20px; padding: 1px 8px; margin-left: 6px; color: var(--text-secondary); }
.mb-mapa-buc-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.mb-mapa-buc-item { display: flex; justify-content: space-between; gap: 10px; align-items: center; text-align: left; width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-primary); cursor: pointer; font: inherit; }
.mb-mapa-buc-item:hover { border-color: var(--accent); background: var(--accent-soft); }
.mb-mapa-buc-path { overflow-wrap: anywhere; }
.mb-mapa-buc-meta { flex: 0 0 auto; font-size: .76rem; color: var(--text-secondary); white-space: nowrap; }
.mb-mapa-buc-nc { color: var(--warning-fg); font-weight: 700; }
.mb-mapa-aviso { text-align: center; padding: 22px 14px; }
.mb-mapa-aviso-ic { font-size: 1.8rem; }
.mb-mapa-aviso-tit { font-weight: 800; margin: 6px 0 2px; }

/* ===== Mapa de Qualidade — CARTÃO DIVIDIDO FVS | Serviço (inspeção × execução) ===== */
/* Grade mais larga quando o cruzamento está ativo (cabem as duas metades). */
.lote-grid.qua-split-grid { grid-template-columns: repeat(auto-fit, minmax(108px, 132px)); }
/* Box neutro: as duas metades coloridas moram no secundarioHTML (não altera o renderizador). */
.lote.qua-map2 { background: var(--surface); }
.lote.qua-map2 .l-num { color: var(--text-primary); }
.lote.qua-dim { opacity: .3; }                                  /* filtro de situação: não-casadas esmaecem */
.lote.qua-pronto { border-color: var(--warning); box-shadow: 0 0 0 3px var(--warning-bg), var(--shadow-md); }
.lote.qua-pronto .l-num { color: var(--warning-fg); }
.qua-split { display: flex; gap: 3px; margin-top: 3px; width: 100%; }
.qua-half { flex: 1 1 0; min-width: 0; border-radius: 5px; padding: 3px 2px; text-align: center; border: 1px solid var(--border); }
.qua-half-t { display: block; font-size: .5rem; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; opacity: .82; }
.qua-half-v { display: block; font-size: .62rem; font-weight: 800; overflow-wrap: anywhere; line-height: 1.1; }
/* FVS (Qualidade = dourado / accent) */
.qua-fvs--sem { background: var(--surface-2); color: var(--text-muted); }
.qua-fvs--ind { background: var(--surface-2); color: var(--text-muted); border-style: dashed; }   /* FVS indeterminada (avulso/árvore não casado) */
.qua-fvs--ok  { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); }
.qua-fvs--nc  { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); box-shadow: inset 3px 0 0 var(--warning); }
/* Serviço (Produção = verde/azul — identidade distinta do dourado) */
.qua-serv--nao { background: var(--surface-2); color: var(--text-muted); }
.qua-serv--exec { background: var(--info-bg); border-color: var(--info); color: var(--info-fg); }
.qua-serv--ok { background: var(--success-bg); border-color: var(--success); color: var(--success-fg); }
.qua-serv--loading, .qua-serv--na { background: var(--surface-2); color: var(--text-muted); }
.qua-pronto-tag { margin-top: 3px; font-size: .54rem; font-weight: 800; color: var(--warning-fg); background: var(--warning-bg); border-radius: 4px; padding: 1px 3px; line-height: 1.18; }
.lote .qua-badge-pronto { position: absolute; top: 4px; right: 5px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 9px; background: var(--warning); color: var(--warning-fg); font-size: .62rem; font-weight: 800; line-height: 16px; text-align: center; }
.lote .qua-badge-nc { position: absolute; top: 4px; right: 5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: var(--accent); color: var(--accent-contrast); font-size: .62rem; font-weight: 800; line-height: 16px; text-align: center; box-shadow: inset 3px 0 0 var(--warning); }
/* Legenda das 2 dimensões */
.mb-mapa-legenda .leg-tit { font-weight: 800; font-size: .72rem; margin-right: 4px; color: var(--text-secondary); }
.mb-mapa-legenda i.leg-serv-nao { background: var(--surface-2); }
.mb-mapa-legenda i.leg-serv-exec { background: var(--info-bg); border-color: var(--info); }
.mb-mapa-legenda i.leg-serv-ok { background: var(--success-bg); border-color: var(--success); }
.mb-mapa-legenda i.leg-pronto { background: var(--warning-bg); border-color: var(--warning); }
.mb-mapa-legenda .leg-pronto-txt { font-weight: 700; color: var(--warning-fg); }
/* Resumo (KPIs) */
.mb-mapa-resumo { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.mb-mapa-resumo--load { color: var(--text-secondary); font-size: .82rem; }
.mb-mapa-kpi { font-size: .78rem; color: var(--text-secondary); background: var(--surface-2); border: 1px solid var(--border); border-radius: 20px; padding: 3px 10px; }
.mb-mapa-kpi b { color: var(--text-primary); font-size: .9rem; }
.mb-mapa-kpi-pronto { background: var(--warning-bg); border-color: var(--warning); color: var(--warning-fg); }
.mb-mapa-kpi-pronto b { color: var(--warning-fg); }
.mb-mapa-resumo-nota { font-size: .76rem; color: var(--warning-fg); margin: 2px 0 6px; }
/* Filtro de situação + aviso de vínculo */
.mb-mapa-sit { margin: 8px 0; font-size: .82rem; color: var(--text-secondary); }
.mb-mapa-sit select { font: inherit; padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-primary); margin-left: 4px; }
.mb-mapa-vinc { background: var(--info-bg); border: 1px solid var(--info); color: var(--info-fg); }
/* Drawer: seção Produção */
.qua-drawer-prod { margin: 4px 0 12px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; }
.qua-drawer-prod h4 { margin: 0 0 6px; font-size: .95rem; }
.qua-drawer-prod--load { color: var(--text-secondary); }
.qua-drawer-status { font-size: .84rem; font-weight: 700; margin-bottom: 6px; }
.qua-drawer-status--pronto, .qua-drawer-status--div { color: var(--warning-fg); }
.qua-drawer-status--ok { color: var(--success-fg); }
.qua-drawer-servs { list-style: none; margin: 6px 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.qua-drawer-serv { font-size: .84rem; }
.qua-drawer-serv-ic { display: inline-block; width: 1.2em; font-weight: 800; }
.qua-drawer-serv--ok { color: var(--success-fg); }
.qua-drawer-serv--exec { color: var(--info-fg); }
.qua-drawer-serv--nao { color: var(--text-muted); }

/* ---- Mapa de Qualidade: seletor de MODO (FVS apenas | FVS × Serviço | FVS × PLS) ---- */
.mb-mapa-modo { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; padding: 3px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.mb-mapa-modo-btn { font: inherit; font-size: .82rem; font-weight: 700; padding: 6px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--text-secondary); cursor: pointer; }
.mb-mapa-modo-btn.active { background: var(--accent); color: var(--accent-contrast); }
/* ---- Modo FVS × PLS: controles (import + medição de referência + 3 estados) ---- */
.mb-mapa-pls-ctrls { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }
.mb-mapa-pls-f { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; color: var(--text-secondary); }
.mb-mapa-pls-f > span { font-weight: 700; }
.mb-mapa-pls-f select { font: inherit; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-primary); }
.mb-mapa-pls-modo { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.mb-mapa-pls-modo-btn { font: inherit; font-size: .8rem; font-weight: 600; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-secondary); cursor: pointer; }
.mb-mapa-pls-modo-btn.active { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
/* ---- Modo FVS × PLS: metade PLS do cartão (medição — identidade teal/âmbar, distinta do dourado FVS e do verde Serviço) ---- */
.qua-pls--none { background: var(--surface-2); color: var(--text-muted); }
/* indeterminado (árvore/avulso — PLS não mede) e "fora desta PLS" (nenhum código nesta PLS): neutro tracejado, nunca "não medido" */
.qua-pls--sem_vinculo, .qua-pls--ind, .qua-pls--ausente { background: var(--surface-2); color: var(--text-muted); border-style: dashed; }
.qua-pls--partial { background: var(--warning-bg); border-color: var(--warning); color: var(--warning-fg); }
.qua-pls--complete { background: var(--info-bg); border-color: var(--info); color: var(--info-fg); }
.mb-mapa-legenda i.leg-pls-none { background: var(--surface-2); }
/* "Parcial" = borda âmbar sobre fundo NEUTRO — distinto do swatch de alerta (leg-pronto, fundo âmbar cheio). */
.mb-mapa-legenda i.leg-pls-partial { background: var(--surface-2); border-color: var(--warning); }
.mb-mapa-legenda i.leg-pls-complete { background: var(--info-bg); border-color: var(--info); }

/* Cadastros › "FVS × Serviço" (vínculo por engenheiro da obra) — card compacto */
.cad-fvs-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.cad-fvs-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.cad-fvs-tok { flex: 1 1 260px; min-width: 0; font-weight: 700; }
.cad-fvs-tok .muted { font-weight: 400; font-size: .8rem; color: var(--text-secondary); }
.cad-fvs-btn { flex: 0 0 auto; white-space: nowrap; }
.cad-fvs-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.cad-fvs-chip { font-weight: 500; font-size: .72rem; padding: 2px 8px; border-radius: 999px; background: var(--surface-3); color: var(--text-secondary); border: 1px solid var(--border); }
.cad-fvs-chip--mais { background: transparent; color: var(--text-muted); }
/* Modal de vínculo (empilhado): busca + barra + lista rolável de linhas-checkbox */
.fvs-modal-sub { font-weight: 700; color: var(--text-secondary); margin: -4px 0 8px; }
.fvs-modal-busca { width: 100%; margin-bottom: 8px; }
.fvs-modal-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.fvs-selall { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; cursor: pointer; user-select: none; }
.fvs-count { font-size: .82rem; color: var(--text-secondary); font-weight: 600; }
.lote-check.fvs-pick { flex-direction: column; flex-wrap: nowrap; gap: 4px; max-height: 46vh; }
.fvs-pick .lc { width: 100%; min-width: 0; text-align: left; padding: 9px 10px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.fvs-pick .lc::before { content: "\2610"; font-size: 1.05rem; line-height: 1; flex-shrink: 0; }
.fvs-pick .lc.on::before { content: "\2611"; }
.fvs-pick .lc .lc-txt { min-width: 0; overflow-wrap: anywhere; }
.fvs-modal-acoes { justify-content: flex-end; }

/* Cadastros › "Cronograma × PLS" (vínculo atividade→PLS + rateio) */
.cron-vinc-aud { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.cron-aud-pill { font-size: .74rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--text-secondary); border: 1px solid var(--border); }
.cron-aud-pill.cron-aud-ok { background: var(--success-bg); color: var(--success-fg); border-color: var(--success); }
.cron-aud-pill.cron-aud-warn { background: var(--warning-bg); color: var(--warning-fg); border-color: var(--warning); }
.cron-vinc-filtros { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 8px 0; }
.cron-vinc-busca { flex: 1 1 240px; min-width: 200px; }
.cron-chk { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--text-secondary); cursor: pointer; user-select: none; }
.cron-vinc-wbs { color: var(--text-muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.cron-resumo-badge { display: inline-block; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; padding: 1px 6px; border-radius: 5px; background: var(--surface-3); color: var(--text-muted); border: 1px solid var(--border); vertical-align: 1px; }
/* modal: cada linha selecionada revela o campo de rateio (%) */
.cron-pick .lc { justify-content: space-between; }
.cron-lc .lc-txt { flex: 1 1 auto; }
.cron-alloc-wrap { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; font-size: .82rem; }
.cron-lc:not(.on) .cron-alloc-wrap { display: none; }
.cron-alloc { width: 52px; padding: 3px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text-primary); font-size: .84rem; text-align: right; }
.cron-alloc-hint { font-size: .76rem; }
.cron-sug { margin: 0 0 8px; font-size: .82rem; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cron-sug-lbl { color: var(--text-secondary); font-weight: 600; }
.cron-sug-chip { font-size: .76rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); border: 1px solid var(--accent); cursor: pointer; }
.cron-sug-chip:hover { background: var(--accent); color: var(--accent-contrast); }

/* --- Cronograma × PLS: ABAS por ORIGEM (segmento da PLS) no modal --- */
.cron-seg-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.cron-seg-tab { font-family: inherit; font-size: .84rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-secondary); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.cron-seg-tab:hover { border-color: var(--accent); color: var(--text-primary); }
.cron-seg-tab.active { background: var(--seg-on); color: var(--text-primary); border-color: var(--accent); box-shadow: var(--seg-on-shadow), inset 0 0 0 1px var(--accent); }
.cron-seg-badge { font-size: .72rem; font-weight: 700; min-width: 18px; text-align: center; padding: 0 6px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); }
.cron-seg-tab.active .cron-seg-badge { background: var(--accent); color: var(--accent-contrast); }
.cron-seg-cab { font-weight: 700; color: var(--text-primary); margin: 10px 2px 4px; padding-top: 6px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 6px; }

/* --- Cronograma × PLS: ÁRVORE hierárquica (redesenho §6-§16) --- */
.cron-aud-btn { cursor: pointer; font-family: inherit; }
.cron-aud-btn:hover { filter: brightness(.97); text-decoration: underline; }
.cron-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0; }
.cron-tools-lvl { display: inline-flex; align-items: center; gap: 4px; font-size: .82rem; color: var(--text-secondary); }
.cron-legenda { font-size: .76rem; margin: 2px 0 8px; }
.cron-tree { padding: 4px 0; }
.cron-tnode { border-top: 1px solid var(--border); }
.cron-tnode .cron-tnode { border-top: 1px dashed var(--border); }
.cron-trow { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 7px 8px 7px 0; }
.cron-trow-grp { background: var(--surface-2); }
.cron-trow-main { display: flex; align-items: baseline; gap: 4px; min-width: 0; flex: 1 1 auto; }
.cron-trow-txt { min-width: 0; overflow-wrap: anywhere; }
.cron-trow-grp .cron-trow-txt { font-weight: 700; }
.cron-trow-side { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.cron-caret { flex: 0 0 auto; width: 20px; height: 20px; line-height: 18px; text-align: center; padding: 0; border: 0; background: none; color: var(--text-secondary); cursor: pointer; font-size: .8rem; border-radius: 5px; }
.cron-caret:hover { background: var(--surface-3); color: var(--text-primary); }
.cron-caret-none { cursor: default; opacity: 0; }
.cron-ic { flex: 0 0 auto; font-size: .82rem; }
.cron-row-meta { font-size: .74rem; padding-bottom: 4px; }
.cron-trow-chips { padding-bottom: 6px; }
.cron-grp-cont { font-size: .78rem; font-weight: 700; color: var(--text-secondary); white-space: nowrap; }
.cron-grp-falta { color: var(--warning-fg); font-weight: 600; }
.cron-st { font-size: .78rem; font-weight: 700; white-space: nowrap; }
.cron-st-ok { color: var(--success-fg); }
.cron-st-sem { color: var(--text-muted); }
.cron-st-warn { color: var(--warning-fg); }
.cron-vinc-btn { white-space: nowrap; }
/* Seletor hierárquico da PLS (modal) — grupos em <details> */
/* A árvore é um BLOCO com rolagem própria. NÃO herdar o layout flex-column de
   .lote-check.fvs-pick: como flex-item, cada <details> ganhava min-height:auto→0
   (overflow:hidden) e encolhia, cortando os serviços (caixas cinza vazias). */
.cron-p-tree.lote-check.fvs-pick { display: block; }
.cron-p-tree { max-height: 52vh; overflow-y: auto; padding: 2px; }
/* Folha de serviço: alinhada à ESQUERDA e peso normal (vence .lote-check .lc, que centraliza e engorda). */
.cron-p-tree.lote-check .lc { text-align: left; font-weight: 500; padding: 8px 10px; }
.cron-p-tree .cron-pgrp { border: 1px solid var(--border); border-radius: 8px; margin: 6px 0; background: var(--surface); overflow: hidden; }
.cron-p-tree .cron-pgrp-2 { margin: 6px; border-color: var(--border); }
.cron-p-tree .cron-pgrp-fora { border-color: var(--warning); }
.cron-psum { cursor: pointer; padding: 8px 10px; font-weight: 600; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; user-select: none; list-style: none; }
.cron-psum::-webkit-details-marker { display: none; }
.cron-psum::before { content: '▸'; font-size: .8rem; color: var(--text-muted); transition: transform .12s; }
details[open] > .cron-psum::before { transform: rotate(90deg); }
.cron-psum-cap { font-weight: 800; text-transform: uppercase; letter-spacing: .3px; font-size: .82rem; color: var(--text-primary); background: var(--surface-2); }
.cron-pcount { font-size: .72rem; font-weight: 700; color: var(--text-muted); background: var(--surface-3); border-radius: 999px; padding: 1px 8px; }
.cron-pgrp-body { padding: 2px 6px 6px; }
.cron-lc-cod { font-size: .74rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cron-sc-serv { padding: 5px 8px; border-top: 1px dashed var(--border); font-size: .88rem; }
/* Seletor hierárquico dos vínculos de Qualidade (FVS × Serviço / FVS × PLS) — reusa .cron-p-tree.
   Checkbox de GRUPO na summary (marca todos os descendentes) + rótulo que ocupa a linha. */
.arv-tools { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.arv-psum .arv-grp-rot { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.arv-grp-chk { width: auto; flex: 0 0 auto; margin: 0; accent-color: var(--accent); cursor: pointer; }
/* Telas estreitas: a linha empilha (nome em cima, status+botão embaixo) — sem rolagem horizontal. */
@media (max-width: 560px) {
  .cron-trow { flex-direction: column; align-items: stretch; gap: 4px; }
  .cron-trow-side { justify-content: flex-start; padding-left: 40px; }
  .cron-vinc-btn { align-self: flex-start; }
}

/* --- Histórico: rastreabilidade temporal (semana + conclusão) --- */
.hist-btn-atualizar { white-space: nowrap; }
.hist-dia-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hist-semana-tag { font-size: .68rem; font-weight: 700; color: var(--azul); background: var(--azul-bg); border-radius: 20px; padding: 2px 8px; }
.hist-conc-selo { margin-top: 6px; font-size: .82rem; color: #146c3a; background: var(--verde-bg); border: 1px solid var(--verde); border-radius: 8px; padding: 6px 10px; }
.hist-conc-fonte { font-size: .68rem; font-weight: 600; color: var(--cinza-texto); background: var(--surface); border: 1px solid var(--borda); border-radius: 20px; padding: 1px 7px; margin-left: 4px; }
.hist-conc-fonte.muted { color: var(--cinza-texto); }
.hist-conc-aviso { margin-top: 6px; font-size: .74rem; color: #8a4b00; background: var(--amarelo-bg); border: 1px solid var(--amarelo); border-radius: 8px; padding: 6px 9px; }

.hist-lote-serv-painel { margin: 10px 0; background: var(--cinza-claro); border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; }
.hist-lote-serv-painel .hlsp-tit { font-size: .92rem; color: var(--azul); margin-bottom: 8px; }
.hlsp-linha { display: flex; gap: 10px; flex-wrap: wrap; }
.hlsp-b { background: var(--surface); border: 1px solid var(--borda); border-radius: 8px; padding: 6px 12px; text-align: center; min-width: 90px; display: flex; flex-direction: column; }
.hlsp-b b { font-size: 1.02rem; line-height: 1.2; }
.hlsp-b small { font-size: .64rem; color: var(--cinza-texto); }
.hlsp-fonte { font-size: .72rem; color: var(--cinza-texto); margin-top: 6px; }

/* --- Modal "Atualizar histórico" --- */
.ah-modal .ah-incl { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--cinza-texto); font-weight: 400; margin-bottom: 6px; }
.ah-modal .ah-incl input { width: auto; }
.ah-quadras { max-height: 40vh; overflow-y: auto; border: 1px solid var(--borda); border-radius: 10px; padding: 8px; background: var(--surface); }
.ah-quadra { margin-bottom: 8px; }
.ah-quadra-head { font-size: .78rem; font-weight: 700; color: var(--grafite); margin-bottom: 5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ah-lote-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.ah-lote { display: flex; align-items: center; gap: 5px; border: 1px solid var(--borda); border-radius: 8px; padding: 6px 8px; font-size: .8rem; cursor: pointer; background: var(--surface); min-height: 40px; }
.ah-lote input { width: auto; margin: 0; }
.ah-lote.on { border-color: var(--azul); background: var(--azul-bg); }
.ah-lote.ah-inativo { border-style: dashed; opacity: .8; }
.ah-lote-conc { font-size: .62rem; color: var(--verde); font-weight: 700; margin-left: auto; white-space: nowrap; }
.link-btn { background: none; border: 0; color: var(--azul); cursor: pointer; padding: 0; font-size: .74rem; font-weight: 600; }
.link-btn:hover { text-decoration: underline; }
.ah-radio { display: flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 400; margin-top: 4px; }
.ah-radio input { width: auto; }
.ah-preview { margin-top: 10px; background: var(--azul-bg); border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; font-size: .84rem; }
.ah-preview.aviso { background: var(--amarelo-bg); border-color: var(--amarelo); color: #8a4b00; }
.ah-preview-linha { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }
.ah-preview-linha b { color: var(--azul); }

/* Atualizar histórico — abas (manual × importar) + importação em lote */
.ah-tabs { display: flex; gap: 6px; margin: -4px 0 12px; border-bottom: 1px solid var(--borda); }
.ah-tabs button { background: none; border: none; border-bottom: 2px solid transparent; padding: 8px 12px; font-size: .86rem; font-weight: 600; color: var(--cinza-texto); cursor: pointer; }
.ah-tabs button.active { color: var(--azul); border-bottom-color: var(--azul); }
.ahi-modal .ahi-opts { display: flex; gap: 12px; flex-wrap: wrap; }
.ahi-modal .ahi-opts .field { flex: 1; min-width: 180px; }
.ahi-checks { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.ahi-checks .ah-incl { margin-bottom: 0; }
.ahi-textarea { width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .82rem; resize: vertical; white-space: pre; overflow-wrap: normal; overflow-x: auto; }
.ahi-resumo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.ahi-resumo-linha { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ahi-resumo .chip.ok { background: var(--verde-bg); color: #1c6b2e; }
.ahi-resumo .chip.alerta { background: var(--amarelo-bg); color: #8a4b00; }
.ahi-resumo .chip.erro { background: var(--vermelho-bg); color: var(--vermelho); }
.ahi-tabela-wrap { max-height: 46vh; overflow: auto; border: 1px solid var(--borda); border-radius: 10px; background: var(--surface); }
.ahi-tabela { border-collapse: collapse; width: 100%; font-size: .8rem; }
.ahi-tabela thead th { position: sticky; top: 0; background: var(--cinza-claro); z-index: 1; text-align: left; padding: 6px 8px; font-size: .72rem; color: var(--grafite); white-space: nowrap; }
.ahi-tabela td { padding: 3px 6px; border-top: 1px solid var(--borda); vertical-align: middle; }
.ahi-tabela .ahi-n { color: var(--cinza-texto); text-align: right; width: 34px; }
.ahi-cell { width: 100%; min-width: 60px; border: 1px solid transparent; background: transparent; padding: 3px 4px; font-size: .8rem; border-radius: 5px; }
.ahi-cell:hover { border-color: var(--borda); }
.ahi-cell:focus { border-color: var(--azul); background: var(--surface); outline: none; }
.ahi-serv-fixo { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ahi-r-erro { background: var(--vermelho-bg); }
.ahi-r-aviso { background: var(--amarelo-bg); }
.ahi-r-ignorar { opacity: .6; }
.ahi-sit { white-space: nowrap; }
.ahi-badge { display: inline-block; font-size: .66rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
.ahi-b-criar { background: var(--verde-bg); color: #1c6b2e; }
.ahi-b-atualizar { background: var(--azul-bg); color: var(--azul); }
.ahi-b-remover { background: var(--amarelo-bg); color: #8a4b00; }
.ahi-b-ignorar { background: var(--cinza-claro); color: var(--cinza-texto); }
.ahi-b-erro { background: var(--vermelho-bg); color: var(--vermelho); }
.ahi-msgs { font-size: .68rem; color: var(--cinza-texto); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ahi-resultado { text-align: center; background: var(--verde-bg); border: 1px solid var(--verde); border-radius: 12px; padding: 16px; }
.ahi-res-tit { font-size: 1.05rem; font-weight: 800; color: #1c6b2e; margin-bottom: 10px; }
.ahi-res-nums { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin-bottom: 10px; }
.ahi-res-nums > div { display: flex; flex-direction: column; }
.ahi-res-nums b { font-size: 1.4rem; }
.ahi-res-nums span { font-size: .7rem; color: var(--cinza-texto); }
.ahi-res-batch { font-size: .82rem; color: var(--grafite); }
.ahi-res-batch code { background: var(--surface); padding: 2px 6px; border-radius: 5px; border: 1px solid var(--borda); }

.mapa-legenda { display: flex; gap: 10px 16px; flex-wrap: wrap; font-size: .8rem; color: var(--text-secondary); align-items: center; }
.mapa-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.mapa-legenda i { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid; display: inline-block; }
.leg-nao { background: var(--surface-2); border-color: var(--border); }
.leg-exec { background: var(--info-bg); border-color: var(--info); }
.leg-atr { background: var(--vermelho-bg); border-color: var(--vermelho); }
.leg-conc { background: var(--verde-bg); border-color: var(--verde); }
/* Pip da legenda: MESMA forma do card (reposiciona o .l-pip absoluto para inline). */
.mapa-legenda i.leg-pip { position: static; box-shadow: none; margin-left: -2px; }
.mapa-legenda i.leg-pip.pip-exec { width: 11px; height: 11px; border-radius: 50%; border: 0; }
.mapa-legenda i.leg-pip.pip-pend { width: 11px; height: 11px; border-radius: 50%; background: transparent; border: 2px solid var(--warning); }

/* Barra flutuante de multi-seleção */
.multibar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 60;
  background: var(--graphite-800); color: #fff; border-radius: 30px; padding: 10px 12px 10px 18px;
  display: flex; align-items: center; gap: 12px; box-shadow: var(--sombra-forte); font-size: .9rem; font-weight: 600;
  max-width: 94vw;
}
.multibar .btn { padding: 8px 14px; }
@media (min-width: 781px) { .multibar { bottom: 20px; } }

/* Clima */
.clima-bar { display: flex; gap: 10px; flex-wrap: wrap; }
.clima-turno { flex: 1; min-width: 90px; border: 1px solid var(--borda); border-radius: 10px; padding: 10px; text-align: center; background: var(--surface); }
.clima-turno .ct-nome { font-size: .72rem; text-transform: uppercase; letter-spacing: .3px; color: var(--cinza-texto); font-weight: 700; margin-bottom: 6px; }
.clima-turno .ct-icons { display: flex; justify-content: center; gap: 4px; }
.clima-turno .ct-opt { font-size: 1.25rem; cursor: pointer; opacity: .32; padding: 3px; border-radius: 7px; line-height: 1; }
.clima-turno .ct-opt.on { opacity: 1; background: var(--azul-bg); }

/* Chips de responsável / lotes */
.tag-eq { background: var(--verde-bg); color: var(--verde); }
.tag-ter { background: var(--amarelo-bg); color: #a9750a; }
.tag-lote { background: var(--azul-bg); color: var(--azul); }

.lote-check { display: flex; flex-wrap: wrap; gap: 6px; max-height: 220px; overflow-y: auto; padding: 4px; border: 1px solid var(--borda); border-radius: 10px; }
.lote-check .lc {
  border: 1.5px solid var(--borda); border-radius: 7px; padding: 6px 4px; min-width: 46px; text-align: center;
  cursor: pointer; font-weight: 700; font-size: .82rem; background: var(--surface-2);
}
.lote-check .lc.on { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
/* Lote inativo que segue visível só porque já estava vinculado ao lançamento */
.lote-check .lc.lc-inativo { border-style: dashed; opacity: .7; }
.lote-check .lc.lc-inativo.on { background: var(--cinza-texto); border-color: var(--cinza-texto); }
/* Chip INDISPONÍVEL na seleção múltipla (tipo incompatível): visível, esmaecido e
   sem clique (o clique é ignorado no JS — mantém o tooltip "mesmo tipo" no hover). */
.lote-check .lc.lc-bloq { opacity: .38; cursor: not-allowed; }

.pill-turno { display: inline-flex; gap: 6px; }
.pill-turno label { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--borda); border-radius: 20px; padding: 6px 12px; cursor: pointer; font-size: .88rem; margin: 0; }
.pill-turno input { width: auto; }

.colab-nao { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--borda); border-radius: 9px; margin-bottom: 6px; flex-wrap: wrap; }
.colab-nao .info { flex: 1; min-width: 140px; }
.colab-nao.falta { background: var(--vermelho-bg); border-color: #f0caca; }
.colab-nao.externo { background: var(--warning-bg); border-color: var(--warning); }
.colab-nao.dispensa { background: var(--dispensa-bg); border-color: var(--dispensa); }
.colab-nao.ok { background: var(--verde-bg); border-color: #cfe9d8; }

/* ==========================================================================
   Header: voltar + seletor de papel
   ========================================================================== */
.top-back {
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.3);
  border-radius: 8px; width: 34px; height: 34px; font-size: 1.2rem; line-height: 1; cursor: pointer; flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);   /* aresta de luz (o cabeçalho é escuro nos 2 temas) */
  transition: background-color .15s ease, transform 90ms var(--ease-out);
}
.top-back:active { transform: translateY(1px); }
.top-back:hover { background: rgba(255,255,255,.28); }
/* Botão de ícone no header (Configurações). Discreto; realce dourado no hover. */
.top-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0; cursor: pointer;
  background: rgba(255,255,255,.10); color: var(--header-fg); border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform 90ms var(--ease-out);
}
.top-icon:active { transform: translateY(1px); }
.top-icon:hover { background: rgba(255,255,255,.20); color: var(--header-accent); border-color: rgba(255,255,255,.28); }
.top-icon:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(219,182,94,.5); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.papel-wrap { display: flex; align-items: center; gap: 7px; background: rgba(255,255,255,.13); padding: 5px 9px; border-radius: 20px; }
.papel-lbl { font-size: .78rem; opacity: .85; }
.papel-wrap select { background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 7px; padding: 5px 8px; font-size: .85rem; font-weight: 600; }
.papel-wrap select option { color: var(--text-primary); }
/* ---- Header no MOBILE: tira o que compete por espaço e engrossa a área de toque.
   Só apresentação — nenhuma permissão, sessão ou verificação de acesso muda. ---- */
@media (max-width: 780px) {
  /* A marca central "Construx" é redundante no celular (a seta ← já leva à Home) e,
     por ser posicionada absoluta no centro (left:50%), colava por cima da engrenagem
     e do título — era a sobreposição relatada. !important porque App.atualizarHeader
     define display:flex inline; o media query precisa vencer a regra inline. */
  #brandHome { display: none !important; }
  /* O papel do usuário ("Administrador") sai do header no mobile: informação de perfil
     não precisa disputar o espaço crítico de navegação. Sem a pílula, o wrap vira só o
     botão Sair. O RBAC e o perfil continuam intactos — isto é puramente visual. */
  .papel-badge { display: none; }
  .papel-wrap { background: none; padding: 0; gap: 0; }
  /* Área de toque confortável (~40px) para Voltar, Configurações e Sair. */
  .top-back, .top-icon { width: 40px; height: 40px; }
}
@media (max-width: 560px) { .papel-lbl { display: none; } #ctxTitulo { font-size: .95rem; } .logo .mark { display: none; } .topbar { gap: 8px; } }

/* ==========================================================================
   Tela de Obras (landing)
   ========================================================================== */
.obras-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.obra-card {
  background: var(--card); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra);
  overflow: hidden; cursor: pointer; transition: transform .1s, box-shadow .1s; display: flex; flex-direction: column;
  text-decoration: none; color: inherit;   /* é um <a href> (abrir em nova aba/janela) sem virar link sublinhado */
}
.obra-card:hover { transform: translateY(-2px); box-shadow: var(--sombra-forte); }
.obra-card .capa { height: 130px; background: linear-gradient(135deg, var(--graphite-700), var(--graphite-900)); display: grid; place-items: center; position: relative; }
.obra-card .capa .ic { font-size: 3rem; opacity: .85; }
.obra-card .capa .st { position: absolute; top: 10px; left: 10px; }
.obra-card .corpo { padding: 14px; }
.obra-card .corpo h3 { color: var(--azul); font-size: 1.05rem; margin-bottom: 8px; }
.obra-card .metricas { display: flex; gap: 14px; font-size: .8rem; color: var(--cinza-texto); flex-wrap: wrap; }
.obra-card .metricas b { color: var(--text-primary); }
.obras-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.obras-toolbar input[type=search] { flex: 1; min-width: 180px; }
/* Busca cresce, o filtro de situação fica do tamanho do texto (o width:100% global punha o select numa
   linha inteira de 1.700 px — Gestão de Usuários). */
.obras-toolbar input[type=search] { width: auto; }
.obras-toolbar select { width: auto; flex: 0 0 auto; min-width: 200px; }

/* ==========================================================================
   Workflow do dia (status + ações)
   ========================================================================== */
.workflow {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: var(--raio); border: 1px solid var(--borda); margin-bottom: 14px;
}
.workflow.st-em_andamento { background: var(--cinza-claro); }
.workflow.st-conferencia { background: var(--amarelo-bg); border-color: #e8d59a; }
.workflow.st-aprovado { background: var(--verde-bg); border-color: #bfe3cc; }
.workflow .wf-info { flex: 1; min-width: 160px; }
.workflow .wf-info .wf-tit { font-weight: 700; }
.workflow .wf-info .wf-sub { font-size: .82rem; color: var(--cinza-texto); }
.badge.conferencia { background: var(--amarelo-bg); color: var(--warning-fg); }
.badge.aprovado { background: var(--verde-bg); color: var(--verde); }
.badge.em_andamento { background: var(--cinza-claro); color: var(--cinza-texto); }

/* Pendências */
.pend-item {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 10px;
  border: 1px solid #e8d59a; background: var(--amarelo-bg); margin-bottom: 8px; flex-wrap: wrap;
}
.pend-item .info { flex: 1; min-width: 150px; }
.pend-item .info .t1 { font-weight: 700; }
.pend-item .info .t2 { font-size: .82rem; color: #8a6d1e; }
.pend-item .pend-sel { display: flex; align-items: center; }
.pend-item .pend-sel input { width: 18px; height: 18px; }
/* Ação "Encerrar pendência": neutra/secundária, não compete com o verde "Continuar" */
.pend-item .btn.pend-encerrar { color: var(--cinza-texto); }
/* Barra de ações em lote das pendências */
.pend-barra {
  display: flex; align-items: center; justify-content: space-between; gap: 10px 14px;
  flex-wrap: wrap; padding: 8px 4px 12px; margin-bottom: 4px; border-bottom: 1px dashed #e8d59a;
}
.pend-barra .pend-sel-todas { display: flex; align-items: center; gap: 7px; font-size: .86rem; font-weight: 600; color: #8a6d1e; cursor: pointer; }
.pend-barra .pend-sel-todas input { width: 18px; height: 18px; }
.pend-barra .pend-barra-acoes { display: flex; gap: 8px; flex-wrap: wrap; }

/* Chips de turno na situação da equipe */
.turno-chips { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.tchip { font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 20px; display: inline-flex; align-items: center; gap: 4px; }
.tchip.aloc { background: var(--verde-bg); color: var(--verde); }
.tchip.livre { background: var(--amarelo-bg); color: #a9750a; }
.tchip.falta { background: var(--vermelho-bg); color: var(--vermelho); }
.tchip.folga { background: var(--cinza-claro); color: var(--cinza-txt, #64748b); }
/* Serviço EXTERNO (colaborador deslocado para fora da obra no turno): âmbar — não é falta (vermelho)
   nem o remanejamento interno (laranja). */
.tchip.externo { background: var(--warning-bg); color: var(--warning-fg); }
.tchip.dispensa { background: var(--dispensa-bg); color: var(--dispensa-fg); }

/* status do lote: pendente (novo) */
.lote.st-pendente { background: var(--warning-bg); border-color: var(--warning); }
.lote.st-pendente .l-num { color: var(--warning-fg); }
.lote .l-dot.pend { color: var(--warning); position: absolute; top: 3px; right: 4px; font-size: .8rem; line-height: 1; }
.leg-pend { background: var(--warning-bg); border-color: var(--warning); }

/* clima: condição praticável */
.clima-turno .ct-cond { margin-top: 6px; font-size: .72rem; }
.clima-turno .ct-cond label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; margin: 0; }
.clima-turno .ct-cond input { width: auto; }
.readonly-nota { font-size: .82rem; color: var(--cinza-texto); background: var(--cinza-claro); border-radius: 8px; padding: 9px 12px; margin-bottom: 12px; }

/* ==========================================================================
   Topo do mapa: data + ação
   ========================================================================== */
.mapa-topo { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 12px; }
.campo-data, .campo-acao { display: flex; flex-direction: column; gap: 5px; }
.campo-lbl { font-size: .85rem; color: var(--cinza-texto); font-weight: 600; }

/* Porta de entrada do apontamento por localização (botão "Apontar") */
.apontar-porta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.apontar-porta .ap-porta-ico { font-size: 1.8rem; line-height: 1; }
.apontar-porta .ap-porta-txt { flex: 1; min-width: 180px; }
.apontar-porta .ap-porta-txt h2 { margin-bottom: 2px; }
.apontar-porta > .btn { white-space: nowrap; }
.folga-porta { background: var(--amarelo-bg); border-color: color-mix(in srgb, var(--warning) 40%, transparent); }
.folga-aviso { background: var(--amarelo-bg); border-color: color-mix(in srgb, var(--warning) 40%, transparent); color: var(--warning-fg); font-size: .9rem; }

/* Blocos recolhíveis (accordion) do Mapa — cabeçalho clicável, corpo abre/fecha */
.card.acc { padding: 0 16px; }
.acc-head { width: 100%; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: none; border: 0; cursor: pointer; font: inherit; color: inherit; text-align: left;
  padding: 16px 0; }
.acc-head .acc-ico { font-size: 1.35rem; line-height: 1; }
.acc-head .acc-txt { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 2px; }
/* Título do bloco = nível de SEÇÃO (DIN), como o h2 dos cards. */
.acc-head .acc-tit { font-family: var(--font-display); font-weight: var(--fw-section); color: var(--azul); font-size: var(--fs-section); }
.acc-head .acc-resumo { font-size: .82rem; color: var(--cinza-texto); }
.acc-head .acc-resumo.alerta { color: var(--warning-fg); font-weight: 600; }
/* "Abrir ▸ / Fechar ▾": botão neutro (o teal/azul claro antigo ficava claro demais no
   escuro); hover = borda dourada, como os demais controles. */
.acc-head .acc-toggle { white-space: nowrap; font-size: .82rem; font-weight: 700; color: var(--text-primary);
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 999px; padding: 5px 12px;
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease; }
.acc-head:hover .acc-toggle { border-color: var(--accent); color: var(--accent-strong); }
.acc-head:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; border-radius: 8px; }
.acc-corpo { padding-bottom: 16px; animation: acc-abre .16s ease; }
@keyframes acc-abre { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.data-picker { position: relative; display: inline-block; }
.data-picker > .btn { white-space: nowrap; }

/* Calendário */
.calendario {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 70;
  background: var(--surface); border: 1px solid var(--borda); border-radius: 12px; box-shadow: var(--sombra-forte);
  padding: 12px; width: 280px;
}
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-head b { font-size: .92rem; color: var(--azul); }
.cal-head button { border: 1px solid var(--borda); background: var(--surface); border-radius: 8px; width: 30px; height: 30px; cursor: pointer; font-size: 1rem; }
.cal-head button:hover { background: var(--cinza-claro); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-dow { margin-bottom: 3px; }
.cal-dow div { text-align: center; font-size: .68rem; font-weight: 700; color: var(--cinza-texto); padding: 2px 0; }
.cal-cell {
  text-align: center; padding: 7px 0; border-radius: 7px; font-size: .82rem; cursor: pointer;
  border: 1.5px solid transparent; user-select: none;
}
.cal-cell:not(.vazio):hover { background: var(--cinza-claro); }
.cal-cell.vazio { cursor: default; }
.cal-cell.cal-em_andamento { background: var(--cinza-claro); font-weight: 700; }
.cal-cell.cal-conferencia { background: var(--amarelo-bg); color: #a9750a; font-weight: 700; }
.cal-cell.cal-aprovado { background: var(--verde-bg); color: var(--verde); font-weight: 700; }
.cal-cell.hoje { border-color: var(--azul-claro); }
.cal-cell.sel { outline: 2px solid var(--azul); outline-offset: -1px; }
.cal-leg { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; font-size: .7rem; color: var(--cinza-texto); }
.cal-leg span { display: inline-flex; align-items: center; gap: 4px; }
.cal-leg i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.cal-leg i.cal-em_andamento { background: var(--cinza-claro); }
.cal-leg i.cal-conferencia { background: var(--amarelo-bg); border: 1px solid var(--amarelo); }
.cal-leg i.cal-aprovado { background: var(--verde-bg); border: 1px solid var(--verde); }
/* Feriado/paralisação que dispensa o apontamento (calendário operacional): faixa embaixo, sem brigar com a cor do status */
.cal-cell.cal-feriado { box-shadow: inset 0 -3px 0 0 var(--cal-nacional); color: var(--danger-fg); }
.cal-leg i.cal-feriado { background: var(--surface); box-shadow: inset 0 -3px 0 0 var(--cal-nacional); border: 1px solid var(--border); }
/* Aviso DISCRETO no Mapa num feriado/paralisação em dia de trabalho (sem portão nem pop-up) */
.feriado-aviso { margin: 0 0 12px; padding: 8px 12px; font-size: .88rem; color: var(--text-secondary); background: var(--surface-2);
  border: 1px solid var(--border); border-left: 3px solid var(--cal-nacional); border-radius: var(--radius-sm); }
.feriado-aviso.ev-estadual { border-left-color: var(--cal-estadual); }
.feriado-aviso.ev-municipal { border-left-color: var(--cal-municipal); }
.feriado-aviso.ev-obra { border-left-color: var(--cal-obra); }

/* Picker de lotes no modal */
.lote-det { border: 1px solid var(--borda); border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; }
.lote-det summary { cursor: pointer; font-size: .9rem; font-weight: 600; color: var(--text-primary); }
.lote-det summary::marker { color: var(--azul); }
.lote-pick { margin-top: 10px; }
.lote-pick .lp-quadra { width: 100%; font-size: .7rem; color: var(--cinza-texto); font-weight: 800; margin: 6px 0 2px; text-transform: uppercase; letter-spacing: .3px; }
.colab-pick .lc { min-width: 110px; text-align: left; padding-left: 10px; }
@media (max-width: 560px) { .calendario { width: 260px; } }

/* Coloração por função (bolinha + borda no chip) */
.func-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; flex-shrink: 0; }
.colab-pick .lc { display: flex; align-items: center; gap: 2px; border-left-width: 4px; }
.colab-pick .lc.on { color: #fff; }

/* Sub-abas de relatório */
/* Vistas do relatório (Por serviço · Por dia · …) = trilho de alternância, o mesmo componente da
   Linha de Balanço: poço com as opções; a escolhida é a placa neutra com a linha dourada embaixo. */
.prod-tabs { display: flex; width: fit-content; max-width: 100%; gap: 2px; flex-wrap: wrap; margin-bottom: 14px; padding: 2px;
  background: var(--seg-track); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--well); }
.prod-tabs button { border: 1px solid transparent; background: transparent; border-radius: calc(var(--radius-sm) - 2px); padding: 7px 14px; font-family: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; color: var(--text-secondary);
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease; }
.prod-tabs button:hover { color: var(--text-primary); background: var(--surface-hover); }
.prod-tabs button.active { background: var(--seg-on); color: var(--text-primary); font-weight: 700; box-shadow: var(--seg-on-shadow), inset 0 -2px 0 var(--accent); }
.filtro-data { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; }
.filtro-data label { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; color: var(--cinza-texto); font-weight: 600; }
.filtro-data input, .filtro-data select { padding: 8px 10px; }
/* Seletor de competência da Medição (‹ dropdown ›) */
.comp-nav { display: inline-flex; align-items: stretch; gap: 6px; }
.comp-nav .comp-arrow { padding: 6px 12px; font-size: 1.1rem; line-height: 1.1; font-weight: 800; }
.comp-nav .comp-sel { min-width: 150px; font-weight: 600; }
.custo { font-weight: 800; color: var(--verde); font-variant-numeric: tabular-nums; }
.func-tag { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; margin-right: 8px; }

/* ---- Natureza EXECUÇÃO × MANUTENÇÃO (Produtividade) ---- */
/* Manutenção = LARANJA. A cor nunca vai sozinha: sempre acompanha rótulo/ícone 🛠. */
.custo.manut { color: var(--laranja); }
.badge.manut { background: var(--laranja-bg); color: var(--laranja); }
.nat-chip { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 20px; background: var(--laranja-bg); color: var(--laranja); }
.nat-val { display: block; line-height: 1.25; }                 /* HH em cima, R$ embaixo, na célula por natureza */
.nat-val small { display: block; font-size: .72rem; color: var(--cinza-texto); font-weight: 600; }
.nat-val.manut small { color: var(--laranja); opacity: .85; }
.nat-none { color: var(--cinza-texto); opacity: .6; }
.casa-nat-tit { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--cinza-texto); margin: 2px 0; }
.casa-nat-tit.manut { color: var(--laranja); }

/* Resumo de natureza no topo (KPIs Execução / Manutenção / Total / %) */
.prod-resumo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.prod-resumo .kpi.ativo { outline: 2px solid var(--azul-claro); outline-offset: 1px; }
.prod-resumo .kpi.manut.ativo { outline-color: var(--laranja); }
.prod-resumo .kpi .value.laranja { color: var(--laranja); }
.prod-resumo .kpi .sub-hh { font-size: .74rem; color: var(--cinza-texto); margin-top: 3px; }
@media (max-width: 640px) { .prod-resumo { grid-template-columns: repeat(2, 1fr); } }

/* Filtro de natureza (Todos / Execução / Manutenção) */
.nat-filtro { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.nat-filtro > span.lbl { font-size: .8rem; color: var(--cinza-texto); font-weight: 600; }
/* Chips de filtro: ligado = chip elevado com CONTORNO na cor do recorte (dourado no geral; laranja,
   azul-limpeza e teal nos recortes semânticos) e texto forte — o preenchimento cheio ficava igual ao
   CTA e três linhas de chips dourados competiam com "Imprimir / PDF". A cor nunca vai sozinha
   (rótulo + ícone continuam). */
.nat-filtro button { border: 1px solid var(--borda); background: var(--surface); border-radius: 20px; padding: 6px 14px; font-family: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; color: var(--cinza-texto);
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease; }
.nat-filtro button:hover { border-color: var(--border-strong); color: var(--text-primary); }
.nat-filtro button.active { background: var(--seg-on); color: var(--text-primary); border-color: var(--accent); box-shadow: var(--seg-on-shadow), inset 0 0 0 1px var(--accent); }
.nat-filtro button.manut.active { background: var(--laranja-bg); border-color: var(--laranja); color: var(--laranja-fg); box-shadow: inset 0 0 0 1px var(--laranja); }
.nat-filtro .nat-sep { color: var(--cinza-texto); opacity: .5; font-weight: 700; margin: 0 -2px; }
.nat-filtro button.retrab.active { background: var(--laranja-bg); border-color: var(--laranja); color: var(--laranja-fg); box-shadow: inset 0 0 0 1px var(--laranja); }
.nat-filtro button.limpeza.active { background: var(--limpeza-bg); border-color: var(--limpeza); color: var(--info-fg); box-shadow: inset 0 0 0 1px var(--limpeza); }

/* Tipos de manutenção: retrabalho (laranja, = manut) · limpeza (azul) · não-classificada (cinza) */
.badge.limpeza { background: var(--limpeza-bg); color: var(--limpeza); }
.badge.naoclass { background: var(--cinza-claro); color: var(--cinza-texto); }
.custo.limpeza { color: var(--limpeza); }


/* ORIGEM da mão de obra (Fase B): própria × terceirizada (teal) */
.nat-filtro button.terc.active { background: var(--terc-bg); border-color: var(--terc); color: var(--terc-fg); box-shadow: inset 0 0 0 1px var(--terc); }
.orig-filtro .orig-emp-lbl { font-size: .82rem; color: var(--cinza-texto); display: inline-flex; align-items: center; gap: 6px; }
.orig-filtro .orig-emp { border: 1px solid var(--borda); background: var(--surface); border-radius: 8px; padding: 5px 8px; font-size: .84rem; }
.orig-tag { font-size: .7rem; font-weight: 700; background: var(--cinza-claro); color: var(--cinza-texto); padding: 2px 8px; border-radius: 20px; vertical-align: middle; }
/* ESCOPO dos apontamentos (Produtividade): Finalizados × Todos. ⏳ âmbar = horas/serviços ainda em
   andamento — sempre com ícone + texto, nunca só a cor. Mesmo componente dos filtros acima. */
.nat-filtro button.escopo-ajuda { border: 0; background: transparent; padding: 2px 4px; margin-left: -6px; font-size: 1rem; line-height: 1; color: var(--text-muted); cursor: help; }
.escopo-tag { font-size: .7rem; font-weight: 700; background: var(--warning-bg); color: var(--warning-fg); padding: 2px 8px; border-radius: 20px; vertical-align: middle; }
.em-exec { color: var(--warning-fg); font-weight: 700; white-space: nowrap; }
.em-exec-sub, .nat-val small.em-exec-sub { display: block; font-size: .7rem; font-weight: 700; color: var(--warning-fg); margin-top: 2px; white-space: nowrap; }
.badge.exec-terc { background: var(--terc-bg); color: var(--terc); }
.custo.terc { color: var(--terc); }
/* JORNADA (Produtividade › Por funcionário): apontado / previsto + situação. Completo = discreto;
   ⚠ horas sem registro = único chip preenchido (pede ação, âmbar); acima do previsto = texto teal
   (conferir). Sempre com sinal/ícone + texto — nunca só a cor. A célula é botão → detalhe por dia. */
.jor-th small { display: block; margin-top: 1px; font-size: .64rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text-muted); }
.jor-cel { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; margin: -3px -6px; padding: 3px 6px; border: 0; border-radius: var(--radius-sm); background: transparent; font: inherit; color: inherit; text-align: right; line-height: 1.25; cursor: pointer; }
.jor-cel:hover { background: var(--surface-2); }
.jor-cel:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.jor-hh { font-size: .8rem; color: var(--text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.jor-hh b { font-size: .92rem; font-weight: 800; color: var(--text-primary); }
.jor-st { font-size: .7rem; font-weight: 700; white-space: nowrap; }
.jor-cel.is-ok .jor-st { color: var(--success-fg); }
.jor-cel.is-pend .jor-st { padding: 1px 7px; border-radius: var(--radius-pill); background: var(--warning-bg); color: var(--warning-fg); }
.jor-cel.is-acima .jor-st { color: var(--info-fg); }
.jor-oc { font-size: .68rem; color: var(--text-muted); white-space: nowrap; }
.jor-na { color: var(--text-muted); opacity: .7; }
.jor-bloco { margin: 8px 0 12px; }
.jor-resumo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-bottom: 2px; font-size: .84rem; color: var(--text-secondary); }
.jor-resumo .jor-tit { font-weight: 700; color: var(--text-primary); }
.jor-r { font-weight: 700; white-space: nowrap; }
.jor-r.is-ok { color: var(--success-fg); }
.jor-r.is-pend { padding: 1px 8px; border-radius: var(--radius-pill); background: var(--warning-bg); color: var(--warning-fg); }
.jor-r.is-acima { color: var(--info-fg); }
.jor-ajuda { border: 0; background: transparent; padding: 0 2px; margin-left: -8px; font-size: .95rem; line-height: 1; color: var(--text-muted); cursor: help; }
.jor-aviso { font-size: .78rem; color: var(--text-muted); margin-top: 2px; }
tr.jor-sep > td { padding: 7px 12px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); background: var(--surface-2); }
tr.jor-extra > td { color: var(--text-secondary); }
/* Detalhe por dia (modal) */
.jor-kpis { margin-top: 10px; }
.jor-kpis .kpi .value { font-size: 1.45rem; }
table.jor-dias { min-width: 0; font-size: .84rem; }
table.jor-dias th, table.jor-dias td { padding: 7px 9px; }
tr.jor-dia-pend > td { background: var(--warning-bg); }
.jor-dsit { font-weight: 700; font-size: .78rem; }
.jor-dsit.is-ok { color: var(--success-fg); }
.jor-dsit.is-pend { color: var(--warning-fg); }
.jor-dsit.is-acima { color: var(--info-fg); }
.jor-notas { margin-top: 10px; font-size: .76rem; color: var(--text-muted); display: grid; gap: 4px; }
.chip-semfunc { font-size: .66rem; font-weight: 700; background: var(--amarelo-bg); color: var(--amarelo); padding: 1px 6px; border-radius: 10px; }
/* Cards das seções de terceirizada nas tabelas */
.card-terc { border-left: 4px solid var(--terc); }
.card-terc h2 { color: var(--terc); }

/* ==========================================================================
   PRODUÇÃO › VISÃO GERAL — painel gerencial (15/10/2026; relatorios/produtividade-visao-geral-ui.js)
   UMA página em 1920×1080 com o menu aberto: KPIs → evolução · própria × terceirizadas · onde olhar →
   serviços · locais · funcionários. Cores das naturezas = as das outras abas (execução --verde · retrabalho
   --laranja · limpeza --limpeza · não classificada --cinza-texto), sempre com rótulo/ícone e 2 px de vão entre
   as fatias; própria --propria × terceirizada --terc (par validado para daltonismo). Texto nunca na cor do dado
   (só o saldo, que é ESTADO, com ▲/▼). Impressão: página prodpaisagem (A4 paisagem), a mesma das outras abas.
   ========================================================================== */
.pvg { display: grid; gap: 12px; }
.pvg-card, .pvg-kpi { background: var(--plate-sheen), var(--card); border: 1px solid var(--borda);
  border-radius: var(--shape-md); corner-shape: var(--shape-corners); box-shadow: var(--edge-light), var(--elev-1); }
.pvg-card { position: relative; min-width: 0; padding: 10px 14px; display: flex; flex-direction: column; }
.pvg-card-cab { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 6px; }
.pvg-tit { margin: 0; font-family: var(--font-display); font-weight: var(--fw-section); font-size: 1.02rem; line-height: 1.2; color: var(--text-primary); }
.pvg-card-cab > .pvg-seg, .pvg-card-cab > .pvg-segs, .pvg-card-cab > .pvg-cob { margin-left: auto; }
.pvg-info { cursor: help; color: var(--text-muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
.pvg-print-only { display: none; }
.pvg-vazio { margin: 6px 0; font-size: .82rem; color: var(--text-muted); }
.pvg-vazio.ok { color: var(--success-fg); font-weight: 600; }
.pvg-vazio-geral { padding: 28px 16px; align-items: center; gap: 6px; text-align: center; }

/* Cor de cada natureza / origem nas marcas (pontos, fatias, barras, chaves da dica) */
.pvg .exec { --pvg-cor: var(--verde); }
.pvg .retrab { --pvg-cor: var(--laranja); }
.pvg .limpeza { --pvg-cor: var(--limpeza); }
.pvg .naoclass { --pvg-cor: var(--cinza-texto); }
.pvg .p { --pvg-cor: var(--propria); }
.pvg .t { --pvg-cor: var(--terc); }
.pvg .pos { --pvg-cor: var(--success); }
.pvg .neg { --pvg-cor: var(--danger); }
.pvg-dot { display: inline-block; flex-shrink: 0; width: 9px; height: 9px; border-radius: 2px; background: var(--pvg-cor); }

/* Trilho de alternância de um bloco (Custo · HH · 🔧 · 🧹 · Saldo) — escolhido = placa + linha dourada */
.pvg-seg { display: inline-flex; gap: 2px; padding: 2px; background: var(--seg-track); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--well); }
.pvg-segs { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.pvg-seg-b { border: 1px solid transparent; background: transparent; border-radius: calc(var(--radius-sm) - 2px); padding: 3px 9px;
  font: inherit; font-size: .76rem; font-weight: 600; line-height: 1.3; color: var(--text-secondary); cursor: pointer;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease; }
.pvg-seg-b:hover:not(:disabled) { color: var(--text-primary); background: var(--surface-hover); }
.pvg-seg-b[aria-pressed="true"] { background: var(--seg-on); color: var(--text-primary); font-weight: 700; box-shadow: var(--seg-on-shadow), inset 0 -2px 0 var(--accent); }
.pvg-seg-b:disabled { opacity: .4; cursor: not-allowed; }

/* ---- 1. KPIs ---- */
.pvg-kpis { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1.25fr); gap: 12px; }
.pvg-kpi { min-width: 0; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; text-align: left; font: inherit; color: inherit; }
button.pvg-kpi, .pvg-manut-cab { cursor: pointer; transition: box-shadow var(--dur-fast) ease, border-color var(--dur-fast) ease, opacity var(--dur) ease; }
button.pvg-kpi:hover { border-color: var(--border-strong); box-shadow: var(--edge-light), var(--elev-2); }
.pvg-lbl { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-secondary); }
.pvg-lbl-sub { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text-muted); }
.pvg-hero-val { font-family: var(--font-sans); font-weight: 800; font-size: clamp(1.7rem, 1.05rem + 1.25vw, 2.35rem); line-height: 1.05; color: var(--text-primary); white-space: nowrap; }
.pvg-val { font-family: var(--font-sans); font-weight: 800; font-size: 1.42rem; line-height: 1.1; color: var(--text-primary); white-space: nowrap; }
.pvg-kpi-sub { font-size: .76rem; line-height: 1.35; color: var(--text-muted); }
.pvg-kpi-sub b { color: var(--text-secondary); }
.pvg-hero { box-shadow: inset 0 3px 0 var(--accent), var(--edge-light), var(--elev-1); }
/* natureza: régua de 3 px na cor dela; filtrada = placa escolhida (linha dourada embaixo); fora do filtro = esmaecida */
.pvg-nat { box-shadow: inset 0 3px 0 var(--pvg-cor), var(--edge-light), var(--elev-1); }
.pvg-nat[aria-pressed="true"], .pvg-manut-cab[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 3px 0 var(--pvg-cor), inset 0 -2px 0 var(--accent), var(--seg-on-shadow); }
.pvg-kpi.fora, .pvg-manut.fora { opacity: .5; }
.pvg-kpi.fora:hover { opacity: .85; }
/* composição própria × terceirizadas sob o custo total */
.pvg-split { display: flex; gap: 2px; height: 6px; margin-top: 6px; border-radius: 3px; overflow: hidden; background: var(--surface-2); }
.pvg-split > i, .pvg-pt-bar > i { display: block; height: 100%; background: var(--pvg-cor); }
.pvg-split-leg { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: .72rem; color: var(--text-muted); }
.pvg-split-leg b { color: var(--text-secondary); }
.pvg-split-leg i { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 2px; background: var(--pvg-cor); }
/* Manutenção = um grupo: cabeçalho (total + % do custo) | Retrabalho | Limpeza (+ não classificada embaixo) */
.pvg-manut { padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); overflow: hidden; }
.pvg-manut-cab { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 14px; text-align: left; font: inherit; color: inherit;
  background: transparent; border: 1px solid transparent; border-right-color: var(--border); border-radius: 0; box-shadow: inset 0 3px 0 var(--laranja); }
.pvg-manut-cab:hover { background: var(--surface-hover); }
.pvg-manut-eq { font-size: .68rem; }
.pvg-manut-partes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; }
.pvg-kpi.pvg-parte { border: 0; border-radius: 0; background: transparent; box-shadow: inset 0 3px 0 var(--pvg-cor); }
.pvg-kpi.pvg-parte + .pvg-parte { border-left: 1px solid var(--border); }
.pvg-kpi.pvg-parte:hover { background: var(--surface-hover); box-shadow: inset 0 3px 0 var(--pvg-cor); }
.pvg-kpi.pvg-parte[aria-pressed="true"] { box-shadow: inset 0 3px 0 var(--pvg-cor), inset 0 -2px 0 var(--accent); background: var(--seg-on); }
.pvg-parte .pvg-val { font-size: 1.22rem; }
.pvg-nc { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; padding: 5px 14px; border-top: 1px solid var(--border); font-size: .74rem; color: var(--text-muted); }
.pvg-nc b { color: var(--text-secondary); }
.pvg-pill { display: inline-block; padding: 1px 7px; border-radius: var(--radius-pill); font-size: .7rem; font-weight: 700; white-space: nowrap; }
.pvg-pill.ok { background: var(--success-bg); color: var(--success-fg); }
.pvg-pill.atencao { background: var(--warning-bg); color: var(--warning-fg); }
.pvg-pill.alerta { background: var(--danger-bg); color: var(--danger-fg); }
/* Resultado vs empreita (saldo = ESTADO: cor + ▲/▼ + rótulo) */
.pvg-saldo.pos { box-shadow: inset 0 3px 0 var(--success), var(--edge-light), var(--elev-1); }
.pvg-saldo.neg { box-shadow: inset 0 3px 0 var(--danger), var(--edge-light), var(--elev-1); }
.pvg-saldo.pos .pvg-val { color: var(--success-fg); }
.pvg-saldo.neg .pvg-val { color: var(--danger-fg); }
.pvg-saldo.na .pvg-val { color: var(--text-muted); }
.pvg-sd-ico { font-size: .8em; margin-right: 4px; }

/* ---- 2. evolução · própria × terceirizadas · onde olhar ---- */
.pvg-meio { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; }
.pvg-meio.com-pt { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1.1fr) minmax(0, 1fr); }
/* gráfico de colunas empilhadas (HTML: escala do texto independe da largura; imprime igual) */
.pvg-leg { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; font-size: .72rem; color: var(--text-secondary); }
.pvg-leg i { display: inline-block; width: 10px; height: 10px; margin-right: 4px; vertical-align: -1px; border-radius: 2px; background: var(--pvg-cor); }
.pvg-graf { display: flex; flex-direction: column; flex: 1 1 auto; }
.pvg-plot { position: relative; height: 166px; margin: 12px 0 0 54px; border-bottom: 1px solid var(--border-strong); }
.pvg-grade { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--border); pointer-events: none; }
.pvg-grade.base { border-top: 0; }
.pvg-grade > span { position: absolute; right: 100%; top: 0; transform: translateY(-50%); padding-right: 6px; font-size: .66rem; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pvg-media { position: absolute; left: 0; right: 0; z-index: 3; height: 0; border-top: 1px solid var(--text-muted); pointer-events: none; }
.pvg-media > span { position: absolute; right: 0; bottom: 2px; padding: 0 4px; font-size: .64rem; font-weight: 600; color: var(--text-secondary); background: var(--card); border-radius: 3px; }
.pvg-cols { position: absolute; inset: 0; z-index: 2; display: flex; align-items: stretch; gap: 2px; }
.pvg-col { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: flex-end; justify-content: center; padding: 0; border: 0; border-radius: 3px; background: transparent; font: inherit; cursor: pointer; }
.pvg-col:hover, .pvg-col:focus-visible { background: var(--row-hover); }
.pvg-col.vazio { cursor: default; }
.pvg-pilha { display: flex; flex-direction: column-reverse; width: min(24px, 78%); border-radius: 4px 4px 0 0; overflow: hidden; }
.pvg-pilha > i { display: block; flex: 0 0 auto; width: 100%; box-sizing: border-box; background: var(--pvg-cor); }
.pvg-pilha > i + i { border-bottom: 2px solid var(--card); }   /* vão de 2 px entre as fatias (a de cima "apoia" na de baixo) */
.pvg-col:hover .pvg-pilha, .pvg-col:focus-visible .pvg-pilha { filter: brightness(1.08); }
.pvg-col-val { position: absolute; left: 50%; transform: translate(-50%, -3px); font-size: .66rem; font-weight: 700; color: var(--text-secondary); white-space: nowrap; pointer-events: none; }
.pvg-xs { display: flex; gap: 2px; margin: 3px 0 0 54px; }
.pvg-xs > span { flex: 1 1 0; min-width: 0; overflow: visible; text-align: center; white-space: nowrap; font-size: .62rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pvg-tip { position: absolute; z-index: 20; min-width: 172px; max-width: 250px; padding: 8px 10px; pointer-events: none;
  background: var(--surface-elevated); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
  font-size: .74rem; color: var(--text-secondary); }
.pvg-tip-cab { margin-bottom: 2px; font-weight: 700; color: var(--text-primary); }
.pvg-tip-tot { font-size: 1.05rem; font-weight: 800; color: var(--text-primary); }
.pvg-tip-sec { margin-bottom: 4px; color: var(--text-muted); }
.pvg-tip-l { display: grid; grid-template-columns: 12px auto minmax(0, 1fr); align-items: center; gap: 6px; }
.pvg-tip-l > i { width: 12px; height: 3px; border-radius: 2px; background: var(--pvg-cor); }
.pvg-tip-l > b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.pvg-tip-rod { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border); color: var(--text-muted); }
/* própria × terceirizadas */
.pvg-cob { padding: 2px 8px; border-radius: var(--radius-pill); font-size: .7rem; font-weight: 700; background: var(--terc-bg); color: var(--terc-fg); cursor: help; }
.pvg-cob.parcial { background: var(--warning-bg); color: var(--warning-fg); }
.pvg-pt-grade { display: grid; font-size: .8rem; }
.pvg-pt-h, .pvg-pt-l { display: grid; grid-template-columns: minmax(92px, 1fr) minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(52px, .85fr); align-items: center; gap: 8px; padding: 4px 0; }
.pvg-pt-h { padding-top: 0; border-bottom: 1px solid var(--border); font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.pvg-pt-h > span { display: flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pvg-pt-l + .pvg-pt-l { border-top: 1px solid var(--border); }
.pvg-pt-l.tot { border-top-color: var(--border-strong); }
.pvg-pt-l.tot .pvg-pt-nat { color: var(--text-primary); font-weight: 700; }
.pvg-pt-l.fora { opacity: .45; }
.pvg-pt-nat { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.pvg-pt-v { display: flex; flex-direction: column; line-height: 1.2; }
.pvg-pt-v b { color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pvg-pt-v small { font-size: .7rem; color: var(--text-muted); }
.pvg-pt-bar { display: flex; gap: 2px; height: 8px; border-radius: 2px; overflow: hidden; background: var(--surface-2); }
.pvg-nota { margin: 6px 0 0; font-size: .68rem; color: var(--text-muted); }
/* onde olhar */
.pvg-cont { min-width: 20px; padding: 1px 7px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-2); font-size: .7rem; font-weight: 700; text-align: center; color: var(--text-secondary); }
.pvg-al-lista { display: grid; gap: 6px; max-height: 232px; margin: 0; padding: 0; overflow: auto; list-style: none; }
.pvg-al { display: grid; grid-template-columns: 20px minmax(0, 1fr) 10px; align-items: start; gap: 6px; width: 100%; padding: 7px 8px; text-align: left;
  font: inherit; font-size: .79rem; line-height: 1.35; color: var(--text-secondary); background: var(--surface-2); cursor: pointer;
  border: 1px solid var(--border); border-left: 3px solid var(--info); border-radius: var(--radius-sm); }
.pvg-al:hover, .pvg-al:focus-visible { border-color: var(--border-strong); background: var(--surface-hover); }
.pvg-al.alto { border-left-color: var(--danger); }
.pvg-al.medio { border-left-color: var(--warning); }
.pvg-al-ic { text-align: center; line-height: 1.35; }
.pvg-al.alto .pvg-al-ic { color: var(--danger-fg); }
.pvg-al.medio .pvg-al-ic { color: var(--warning-fg); }
.pvg-al.info .pvg-al-ic { color: var(--info-fg); }
.pvg-al-txt b { color: var(--text-primary); }
.pvg-al-ir { font-weight: 700; color: var(--text-muted); }

/* ---- 3. rankings (serviços · locais · funcionários) ---- */
.pvg-rank { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(0, .85fr); gap: 12px; }
.pvg-rk-card { container: pvgrk / inline-size; }
.pvg-rk-sub { margin: -4px 0 6px; font-size: .7rem; color: var(--text-muted); }
@container pvgrk (max-width: 320px) {
  .pvg-row-nome { flex-wrap: wrap; row-gap: 0; }
  .pvg-row-nome .pvg-ctx { order: -1; flex: 1 0 100%; max-width: 100%; }
  .pvg-rk-card .pvg-row { grid-template-areas: "rk nome val" "rk bar bar" "rk meta meta"; }   /* o detalhe não alarga a coluna do valor */
  .pvg-rk-card .pvg-row-meta { text-align: left; }
}
.pvg-lista { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pvg-row { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; grid-template-areas: "rk nome val" "rk bar meta"; align-items: center; gap: 3px 10px;
  width: 100%; padding: 4px 6px; text-align: left; font: inherit; color: inherit; background: transparent; border: 0; border-radius: var(--radius-sm); cursor: pointer; }
.pvg-row:hover, .pvg-row:focus-visible { background: var(--row-hover); }
.pvg-rk { grid-area: rk; align-self: start; padding-top: 2px; text-align: right; font-size: .7rem; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pvg-row-nome { grid-area: nome; display: flex; align-items: baseline; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; }
.pvg-row-nome b { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: .86rem; font-weight: 650; color: var(--text-primary); }
.pvg-ctx { flex: 0 1000 auto; min-width: 0; max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.pvg-ctx .func-dot { width: 7px; height: 7px; margin-right: 4px; }
.pvg-row-val { grid-area: val; text-align: right; white-space: nowrap; font-size: .9rem; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.pvg-bar { grid-area: bar; display: flex; gap: 2px; height: 6px; border-radius: 3px; overflow: hidden; background: var(--surface-2); }
.pvg-bar > i { display: block; height: 100%; background: var(--pvg-cor); }
.pvg-row-meta { grid-area: meta; max-width: 100%; overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; font-size: .7rem; color: var(--text-muted); }
.pvg-princ { display: inline-block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.pvg-sd { font-weight: 700; white-space: nowrap; }
.pvg-sd.pos { color: var(--success-fg); }
.pvg-sd.neg { color: var(--danger-fg); }
.pvg-terc-lin { display: inline-flex; align-items: center; gap: 4px; }
.pvg-ver { margin-top: auto; padding: 4px 4px 0; border: 0; background: none; text-align: right; font: inherit; font-size: .74rem; font-weight: 600; color: var(--accent-strong); cursor: pointer; }
.pvg-ver:hover { text-decoration: underline; }
/* linha da aba aberta a partir do painel (pvgIr): marca por um instante */
tr.pvg-alvo > td { animation: pvg-alvo 2.4s var(--ease-out); }
@keyframes pvg-alvo { 0%, 45% { background: var(--surface-selected); } 100% { background: transparent; } }

/* ---- responsivo pela LARGURA DO PAINEL (container: muda com o menu lateral aberto/recolhido) — notebook → tablet →
   celular: blocos empilham, nada corta, sem rolagem lateral. Painel ≥ 1400 px = a composição de 3 faixas do 1920×1080. ---- */
.pvg { container: pvg / inline-size; }
@container pvg (max-width: 1399px) {
  .pvg-manut { grid-template-columns: minmax(0, 1fr); }
  .pvg-manut-cab { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 10px; border-right-color: transparent; border-bottom-color: var(--border); }
  .pvg-meio.com-pt { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .pvg-meio.com-pt > .pvg-evol { grid-column: 1 / -1; }
}
@container pvg (max-width: 1099px) {
  .pvg-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pvg-meio, .pvg-rank { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pvg-evol, .pvg-pes, .pvg-meio:not(.com-pt) > .pvg-alertas { grid-column: 1 / -1; }
}
@container pvg (max-width: 759px) {
  .pvg-kpis, .pvg-meio, .pvg-meio.com-pt, .pvg-rank { grid-template-columns: minmax(0, 1fr); }
  .pvg-plot { height: 150px; margin-left: 46px; }
  .pvg-xs { margin-left: 46px; }
  .pvg-card-cab > .pvg-seg, .pvg-card-cab > .pvg-segs { margin-left: 0; }
  .pvg-pt-h, .pvg-pt-l { grid-template-columns: minmax(80px, 1fr) minmax(0, 1.2fr) minmax(0, 1.2fr); }
  .pvg-pt-h > :last-child, .pvg-pt-l > :last-child { display: none; }
}

/* ---- impressão: relatório executivo numa folha A4 paisagem (página prodpaisagem); grade fixa, sem controles ---- */
@media print {
  .pvg { gap: 6px; zoom: .74; }
  .pvg-kpis { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1.25fr); gap: 6px; }
  .pvg-meio { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 6px; }
  .pvg-meio.com-pt { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1.1fr) minmax(0, 1fr); }
  .pvg-rank { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(0, .85fr); gap: 6px; }
  .pvg-evol, .pvg-pes, .pvg-meio:not(.com-pt) > .pvg-alertas, .pvg-meio.com-pt > .pvg-evol { grid-column: auto; }
  .pvg-card, .pvg-kpi { break-inside: avoid; padding: 7px 9px; }
  .pvg-manut { padding: 0; }
  .pvg-hero-val { font-size: 1.6rem; }
  .pvg-val { font-size: 1.1rem; }
  .pvg-plot { height: 110px; }
  .pvg-seg, .pvg-segs, .pvg-ver, .pvg-tip, .pvg-al-ir { display: none !important; }
  .pvg-print-only { display: inline; }
  .pvg-al-lista { max-height: none; overflow: visible; }
  .pvg-kpi.fora, .pvg-manut.fora, .pvg-pt-l.fora { opacity: .6; }
  .pvg, .pvg * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* PRODUTIVIDADE › POR LOCAL: árvore com subtotais (abre/fecha por nível) + janela 🔍 de detalhe.
   O recuo do nome vem do nível (inline, calc); o pai é mais forte que os filhos; "↳ apontado direto"
   (quadra inteira, pavimento apontável) em itálico; o último nível = os serviços do local (.ploc-serv).
   Na impressão todos os níveis de local saem abertos (os serviços, só os abertos na tela). */
.ploc-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }
td.ploc-nome { min-width: 220px; }
.ploc-nome-in { display: flex; align-items: flex-start; gap: 6px; }
.ploc-tg { flex: 0 0 auto; width: 24px; height: 24px; margin-top: -2px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); font-size: .85rem; line-height: 1; cursor: pointer; }
.ploc-tg:hover { background: var(--surface-2); color: var(--text-primary); }
.ploc-tg:focus-visible, .ploc-lupa:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ploc-tg-vazio { flex: 0 0 auto; width: 24px; }
.ploc-sub { display: block; margin-top: 1px; font-size: .72rem; font-weight: 500; color: var(--text-muted); }
tr.ploc-oculta { display: none; }
tr.ploc-n0 > td { background: var(--surface-2); }
tr.ploc-dir td.ploc-nome { font-style: italic; color: var(--text-secondary); }
.ploc-pct { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.ploc-lupa { padding: 2px 7px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); font-size: .82rem; line-height: 1.3; cursor: pointer; }
.ploc-lupa:hover { border-color: var(--border-strong); background: var(--surface-2); }
.ploc-det-kpis { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 10px; font-size: .86rem; color: var(--text-secondary); }
table.ploc-det { min-width: 0; font-size: .84rem; }
table.ploc-det th, table.ploc-det td { padding: 6px 9px; }
table.ploc-det td.num, table.ploc-tab td.num { white-space: nowrap; }
tr.ploc-det-serv > td { background: var(--surface-2); }
tr.ploc-det-item > td { font-size: .78rem; color: var(--text-secondary); }
tr.ploc-det-item > td:first-child { padding-left: 20px; }
.ploc-det-nota { margin-top: 8px; font-size: .76rem; }
/* último nível (15/10/2026): os SERVIÇOS de cada local — linha mais leve que a do local; o nome abre a janela do serviço */
tr.ploc-serv > td { font-size: .84rem; }
tr.ploc-serv td.ploc-nome { color: var(--text-secondary); }
.ploc-serv-nome { padding: 0; border: 0; border-radius: var(--radius-sm); background: none; font: inherit; font-weight: 600; color: var(--text-primary); text-align: left; cursor: pointer; }
.ploc-serv-nome:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; }
.ploc-serv-nome:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.badge.digitado { padding: 1px 7px; font-size: .66rem; background: var(--surface-2); color: var(--text-secondary); border: 1px dashed var(--border-strong); }
/* impressão: todos os níveis de LOCAL saem abertos; os serviços, só os que estão abertos na tela */
@media print { tr.ploc-oculta { display: table-row; } tr.ploc-serv-fech { display: none; } .ploc-tg { display: none; } }

/* PRODUTIVIDADE › POR SERVIÇO (10/2026): cabeçalho agrupado no topo (Execução · 🔧 Retrabalho · 🧹 Limpeza ·
   Fechamento do serviço) + linhas em árvore Grupo ▸ Serviço, tudo aberto (reusa .ploc-row/.ploc-tg/
   .ploc-oculta/.ploc-acoes do Por local). 1ª coluna fixa na rolagem lateral (box-shadow no lugar da borda:
   em border-collapse a borda não acompanha a célula fixa). Cor de natureza sempre com rótulo/ícone. */
/* grade FIXA (colgroup): mesma largura de coluna em todo grupo/serviço/total — colunas justificadas;
   a largura mínima vem inline (nome + 4 colunas por natureza + fechamento) e o que sobra se reparte. */
table.ps-tab { font-size: .84rem; table-layout: fixed; width: 100%; border-collapse: separate; border-spacing: 0; }
/* CONGELAR PAINÉIS (14/10/2026): a tabela rola dentro da própria caixa (altura da tela) e o cabeçalho de 2 linhas
   fica fixo no topo; a 1ª coluna continua fixa na lateral. `separate` (e não `collapse`) para as bordas do
   cabeçalho acompanharem a parte fixa; o canto (Grupo › Serviço) fica acima de tudo. */
.table-wrap.ps-wrap, .table-wrap.ploc-wrap, .table-wrap.fn-wrap, .table-wrap.dia-wrap { overflow: auto; max-height: calc(100vh - var(--topbar-h) - 24px); max-height: calc(100dvh - var(--topbar-h) - 24px); }
.ps-tab thead { position: sticky; top: 0; z-index: 3; }
.ps-tab thead tr:last-child > th { box-shadow: inset 0 -1px 0 var(--border-strong); }
col.ps-cw-nome { width: 300px; }
col.ps-cw-nat { width: 132px; }
col.ps-cw-lotes, col.ps-cw-n { width: 76px; }
col.ps-cw-hh { width: 96px; }
col.ps-cw-cl { width: 104px; }
col.ps-cw-r { width: 116px; }
.ps-todos col.ps-cw-lotes { width: 136px; }   /* Escopo Todos: a nota ⏳ cabe na linha da natureza */
.ps-todos col.ps-cw-hh { width: 210px; }
table.ps-tab th, table.ps-tab td { padding: 9px 8px; border-left: 1px solid var(--border); }
table.ps-tab td.num { white-space: nowrap; }
table.ps-tab thead th { white-space: normal; line-height: 1.25; vertical-align: bottom; }
.ps-tab .ps-ini { border-left: 1px solid var(--border-strong); }
.ps-tab .ps-col-serv { position: sticky; left: 0; z-index: 1; background: var(--card); border-left: 0; box-shadow: inset -1px 0 0 var(--border-strong); overflow-wrap: anywhere; }
.ps-tab thead .ps-col-serv { z-index: 2; background: var(--surface-2); }
.ps-tab tr.ploc-n0 > td.ps-col-serv, .ps-tab tr.ps-total > td.ps-col-serv { background: var(--surface-2); }
.ps-tab th.ps-nat-h { text-align: center; border-top: 3px solid var(--border-strong); color: var(--text-primary); }
.ps-tab th.ps-exec { border-top-color: var(--verde); }
.ps-tab th.ps-retrab { border-top-color: var(--laranja); color: var(--laranja-fg); }
.ps-tab th.ps-limpeza { border-top-color: var(--limpeza); color: var(--info-fg); }
.ps-tab th.ps-naoclass { border-top-color: var(--cinza-texto); }
.ps-tab th.ps-fech { border-top-color: var(--accent); }
/* Naturezas EMPILHADAS (14/10/2026): uma linha por natureza em cada célula, na cor dela; a coluna "Natureza"
   dá o rótulo (a cor nunca vai sozinha). Altura FIXA em rem (não em em): a coluna de rótulo tem fonte menor
   e emoji — com a mesma altura, as linhas de todas as células ficam na mesma altura. */
.ps-tab th.ps-nat-todas { border-top-color: transparent;
  background: linear-gradient(90deg, var(--verde) 0 33.3%, var(--laranja) 33.3% 66.6%, var(--limpeza) 66.6% 100%) top left / 100% 3px no-repeat border-box, var(--surface-2); }
.ps-tab td.ps-pilha { padding-top: 6px; padding-bottom: 6px; }
.ps-l { display: block; height: 1.45rem; line-height: 1.45rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-l .em-exec-sub { display: inline; margin: 0 0 0 4px; }
.ps-l-exec { color: var(--verde); }
.ps-l-retrab { color: var(--laranja); }
.ps-l-limpeza { color: var(--limpeza); }
.ps-l-naoclass { color: var(--cinza-texto); }
.ps-tab td.ps-rot .ps-l { font-size: .78rem; font-weight: 700; }
.ps-tab td.ps-pilha-custo .ps-l { font-weight: 800; }
.ps-vazio { color: var(--text-muted); opacity: .55; }
/* grupo (nível 0): faixa com a soma dos serviços */
tr.ps-grupo > td { border-top: 2px solid var(--border-strong); font-weight: 700; color: var(--text-primary); }
.ps-grupo-nome { font-family: var(--font-display); font-weight: 650; font-size: .96rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-primary); }
/* serviço (nível 1) */
tr.ps-serv .ploc-nome-in b { font-size: .9rem; font-weight: 700; color: var(--text-primary); }
span.ps-emp { display: block; margin-top: 2px; font-size: .74rem; font-weight: 600; color: var(--terc); }
.ps-semcusto { display: block; margin-top: 2px; font-size: .64rem; font-weight: 700; line-height: 1.2; color: var(--warning-fg); white-space: normal; }   /* HH sem custo/hora (custo incompleto) */
.ps-saldo { font-weight: 800; font-variant-numeric: tabular-nums; }
.ps-saldo.pos { color: var(--success-fg); }
.ps-saldo.neg { color: var(--danger-fg); }
.ps-saldo.zero { color: var(--text-secondary); }
td.ps-fech-val { font-weight: 700; color: var(--text-primary); }
tr.ps-total > td { font-weight: 800; background: var(--surface-2); border-top: 2px solid var(--border-strong); }
/* Serviço (Σ de quem executou, cada lote 1×) ▸ uma linha por EXECUTOR — 👷 própria e 🏭 cada empreiteiro */
tr.ps-emp > td { font-size: .95em; }
tr.ps-emp .ps-emp { display: inline; margin: 0; font-size: .86rem; }
tr.ps-emp .ps-emp-propria { color: var(--text-secondary); }
.ps-fech-aviso { display: block; margin-top: 3px; font-family: var(--font-sans); font-size: .68rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--warning-fg); }
@media print { .ps-h2.sr-only, .ploc-h2.sr-only { position: static; width: auto; height: auto; margin: 0 0 4px; overflow: visible; clip: auto; white-space: normal; } }
.ps-total small { font-weight: 600; color: var(--text-muted); }
.ps-total-hh { display: block; margin-top: 2px; }
.ps-total-base { display: block; margin-top: 1px; font-size: .64rem; font-weight: 600; color: var(--text-muted); }   /* base do total de empreita/saldo */
.ps-nota { margin: 0 0 8px; font-size: .78rem; color: var(--text-muted); }
/* janela 🔍 do Por serviço: composição de custos (5 quadros + tabelas por natureza e por função) */
.psc-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 4px 0 10px; }
.psc-kpis .kpi { padding: 10px; }
.psc-kpis .kpi .label { font-size: .64rem; }
.psc-kpis .kpi .value { font-size: 1.15rem; }
.psc-kpis .kpi .sub-hh { font-size: .68rem; color: var(--text-muted); margin-top: 3px; line-height: 1.25; }
.psc-linha { margin: 0 0 8px; font-size: .82rem; color: var(--text-secondary); }
.psc-tit { margin: 14px 0 6px; font-size: .9rem; }
table.psc-tab tr.psc-total > td { font-weight: 800; background: var(--surface-2); }
@media (max-width: 640px) { .psc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { col.ps-cw-nome { width: 180px; } }
/* Produção (ex-Produtividade): sem título visível; o TOPO é UMA faixa (14/10/2026) — [recolher menu] período
   (competência, datas, ↻) | recorte (natureza, mão de obra, empreiteiro, escopo — listas suspensas) · frentes ·
   Excel/Imprimir na ponta. Reusa o .filtro-data (mesmo rótulo e campo da Medição); aqui só o que é da Produção.
   (.prod-filtros, no plural, é do Histórico › Produção.) As abas moram no menu lateral; no celular, no topo. */
.filtro-data .prod-filtro { margin: 0; }
.prod-filtro .lbl { display: inline-flex; align-items: center; gap: 4px; }
.filtro-data .prod-filtro select { width: auto; min-width: 150px; }
.pf-sep { align-self: stretch; width: 1px; margin: 2px 4px; background: var(--border); }
.pf-fim { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: flex-end; gap: 8px 12px; }   /* frentes + Excel/Imprimir: na ponta; se a faixa quebrar, descem JUNTOS à direita */
.pf-frentes { padding-bottom: 9px; font-size: .82rem; }
.filtro-data > .ap-nav-toggle { margin-bottom: 4px; }   /* centraliza o quadrado de 32 px na altura dos campos */
/* Por serviço / Por local: a faixa mora DENTRO do card, com o botão único abrir/recolher no início; largura fixa
   para o rótulo que alterna ("Abrir todos" ⇄ "Recolher grupos") não empurrar os filtros a cada clique. */
.ps-tg-todos, .ploc-tg-todos { white-space: nowrap; justify-content: center; }
.ps-tg-todos { min-width: 142px; }
.ploc-tg-todos { min-width: 186px; }
.card .filtro-data { margin: 2px 0 12px; }
/* Linha do topo: [◧ recolher menu] [abas-pasta] … frentes · Excel · Imprimir na ponta direita. Com abas-pasta ela
   encosta no card (a aba ativa se funde a ele). */
.pf-topo { display: flex; align-items: flex-start; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 12px; }   /* tela estreita: o título fica em cima e o grupo da direita desce */
/* Título da aba (15/10/2026): sempre visível no computador, com filtros ou menu recolhidos; no celular as abas do topo já dizem a tela */
.pf-topo > .pf-titulo { align-self: center; flex: 0 1 auto; min-width: 0; margin: 0; font-size: var(--fs-section); line-height: var(--lh-title); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 780px) { .pf-topo > .pf-titulo { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; } }
.pf-topo > .ap-nav-toggle { align-self: center; }
.pf-topo > .pf-fim { align-self: center; }
.pf-topo .pf-frentes { padding-bottom: 0; align-self: center; }
.pf-topo .pf-fim { align-items: center; }
/* Faixa COMPACTA (14/10/2026): rótulo ao lado do campo (uma linha de altura) e o grupo "Período" no estilo do
   trilho das abas — ‹ competência › · data inicial a data final · ↻. O texto "Competência" do seletor compartilhado
   com a Medição some na tela (font-size 0) e continua como nome acessível do campo. */
.pf-barra { align-items: center; gap: 8px; }
.pf-barra .pf-sep { margin: 2px; }
.pf-barra label, .pf-barra .prod-filtro { flex-direction: row; align-items: center; gap: 6px; }
.pf-barra select, .pf-barra input[type="date"] { font-size: .88rem; }   /* campo de barra de ferramentas: cabe numa linha */
.pf-barra .prod-filtro select { min-width: 0; padding: 6px 8px; }
.pf-periodo { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; background: var(--seg-track); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--well); }
.pf-lbl { font-size: .82rem; font-weight: 600; color: var(--cinza-texto); }
.pf-periodo > label { font-size: 0; gap: 0; }
.pf-periodo input[type="date"] { width: auto; padding: 5px 6px; }
.pf-periodo .comp-nav { gap: 3px; }
.pf-periodo .comp-sel { min-width: 128px; padding: 6px 8px; }
.pf-periodo .comp-arrow { padding: 3px 8px; }
.pf-ate { font-size: .8rem; color: var(--text-muted); }
.pf-hoje { padding: 6px 10px; font-size: 1rem; }
/* "Filtros ▴/▾": recolhido, somem a faixa e as descrições dos cards; o recorte vira um resumo de uma linha no topo */
.pf-painel-tg { white-space: nowrap; }
.pf-resumo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; color: var(--text-muted); text-align: right; }
/* recolhido: o resumo ocupa SÓ o espaço livre ao lado das abas (width 0 + flex-grow, corta com …) — o grupo da direita
   não quebra para uma linha própria por causa dele (vão vazio, 14/10/2026) */
@media (min-width: 781px) { .pf-topo > .pf-fim { flex: 1 1 auto; flex-wrap: nowrap; min-width: 0; } .pf-topo .pf-resumo { flex: 1 1 0; width: 0; min-width: 0; } }
.pf-recolhido .filtro-data, .pf-recolhido .card > .sub, .pf-recolhido .card > .ps-nota { display: none; }
@media (max-width: 780px) { .pf-periodo { flex-wrap: wrap; } .pf-barra .prod-filtro { flex-direction: column; align-items: stretch; } .pf-resumo { width: 100%; text-align: left; } }
/* SEM ROLAGEM (Produção › Por serviço, computador — html.ap-fixa pelo App.render): a página tem a altura da tela; a
   planilha ocupa o que sobra e rola POR DENTRO (cabeçalho congelado). Só na tela: a impressão segue o fluxo normal. */
@media screen and (min-width: 781px) {
  html.ap-fixa, html.ap-fixa body { overflow: hidden; }
  html.ap-fixa .app { height: 100vh; height: 100dvh; }
  html.ap-fixa .wrap { min-height: 0; }
  html.ap-fixa .content { display: flex; flex-direction: column; min-height: 0; padding-bottom: var(--content-py); }
  html.ap-fixa .prod-tela { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  html.ap-fixa .prod-tela > .card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin-bottom: 0; }
  html.ap-fixa .prod-tela .ps-wrap, html.ap-fixa .prod-tela .ploc-wrap, html.ap-fixa .prod-tela .fn-wrap, html.ap-fixa .prod-tela .dia-wrap { flex: 1 1 auto; min-height: 0; max-height: none; }
}
@media (min-width: 781px) { .prod-tabs-mob { display: none; } }
@media (max-width: 780px) { .pf-sep { display: none; } .pf-fim { margin-left: 0; justify-content: flex-start; } }
@media (max-width: 480px) { .filtro-data .prod-filtro { flex: 1 1 140px; min-width: 0; } .filtro-data .prod-filtro select { min-width: 0; width: 100%; } }
/* Botão de recolher o menu lateral do Apontamento (só Produção) — mesmo desenho do .plan-nav-toggle */
.btn.ap-nav-toggle { width: 32px; height: 32px; padding: 0; gap: 0; flex: 0 0 auto; background: var(--surface); border-color: var(--border); color: var(--text-secondary); }
.btn.ap-nav-toggle svg { display: block; width: 20px; height: 20px; }
.btn.ap-nav-toggle:hover { border-color: var(--accent); color: var(--accent-strong); filter: none; }
@media (min-width: 781px) { .nav.nav-recolhido { display: none !important; } }
@media (max-width: 780px) { .btn.ap-nav-toggle { display: none; } }
@media print { .ps-tab .ps-col-serv, .ps-tab thead, .ploc-wrap thead, .fn-wrap thead, .dia-wrap thead { position: static; box-shadow: none; } table.ps-tab { font-size: .62rem; } .table-wrap.ps-wrap, .table-wrap.ploc-wrap, .table-wrap.fn-wrap, .table-wrap.dia-wrap { max-height: none; overflow: visible; } }

/* Situação: supervisão */
.sup-box { margin-top: 12px; border-top: 1px dashed var(--borda); padding-top: 12px; }
.sup-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--borda); border-radius: 9px; margin-bottom: 6px; flex-wrap: wrap; }
.sup-item .info { flex: 1; min-width: 140px; }

/* Dados da obra em modo leitura */
.leitura-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 18px; }
.leitura-grid .li b { color: var(--cinza-texto); font-weight: 600; font-size: .8rem; display: block; }
@media (max-width: 560px) { .leitura-grid { grid-template-columns: 1fr; } }

/* Blocos por dia (relatórios agrupados) */
.dia-bloco { border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }
.dia-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; font-size: .95rem; }
/* Produção › Por dia = planilha ÚNICA (15/10/2026): uma linha por dia (própria + terceirizada; HH e custo consolidados,
   manutenção por tipo e custo de empreita) que rola na própria caixa (.dia-wrap) com o cabeçalho congelado; ▸ abre as
   FRENTES do dia numa tabela de registro logo abaixo da linha (App._diaFrentesHTML). Grade por recorte de natureza:
   todos 9 colunas (10 com 🛠 não classificada) · execução 6 · manutenção 5. */
table.dia-res-tab { table-layout: fixed; width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; }
table.dia-res-tab.dia-res-todos { min-width: 1000px; }
.dia-wrap > table.dia-res-tab > thead { position: sticky; top: 0; z-index: 2; }
.dia-wrap > table.dia-res-tab > thead tr:last-child > th { box-shadow: inset 0 -1px 0 var(--border-strong); }
table.dia-res-tab > tbody > tr > td.num { white-space: nowrap; }
col.dr-cw-dia { width: 20%; }
col.dr-cw-n { width: 7%; }
col.dr-cw-hh { width: 8%; }
col.dr-cw-nat { width: 12%; }
col.dr-cw-custo { width: 10%; }
col.dr-cw-emp { width: 12%; }
.dia-res-nc col.dr-cw-dia { width: 17%; }
.dia-res-nc col.dr-cw-nat { width: 10%; }
.dia-res-nc col.dr-cw-custo { width: 9%; }
.dia-res-exec col.dr-cw-dia { width: 34%; }
.dia-res-exec col.dr-cw-n { width: 10%; }
.dia-res-exec col.dr-cw-hh { width: 12%; }
.dia-res-exec col.dr-cw-custo, .dia-res-exec col.dr-cw-emp { width: 17%; }
.dia-res-manut col.dr-cw-dia { width: 40%; }
.dia-res-manut col.dr-cw-n { width: 12%; }
.dia-res-manut col.dr-cw-hh { width: 16%; }
.dia-res-manut col.dr-cw-custo { width: 20%; }
.dia-det-cap { margin: 2px 0 6px; font-size: .78rem; color: var(--text-secondary); }
.dia-det-cap .badge { font-size: .66rem; padding: 1px 7px; vertical-align: middle; }
tr.dia-det.dia-oculta { display: none; }
table.dia-res-tab tr.dia-det > td.dia-det-td { padding: 4px 8px 12px 38px; background: var(--surface-2); }
table.dia-res-tab tr.dia-sub > td { background: var(--surface-2); font-weight: 700; border-top: 1px solid var(--border-strong); }
table.dia-res-tab tr.dia-sub-propria > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
table.dia-res-tab tr.dia-sub-terc > td:first-child { color: var(--terc); box-shadow: inset 3px 0 0 var(--terc); }
table.dia-res-tab tr.dia-tot > td { border-top: 2px solid var(--border-strong); }
th.dia-th-retrab { color: var(--laranja-fg); }
th.dia-th-limpeza { color: var(--info-fg); }
.dia-tg-todos { white-space: nowrap; justify-content: center; min-width: 170px; }
/* frentes do dia (tabela de registro, aninhada): a MESMA grade em todos os dias; + a coluna da empreita fora da manutenção */
table.dia-tab { table-layout: fixed; width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; border: 1px solid var(--borda); background: var(--card); }
col.dia-cw-serv { width: 34%; }
col.dia-cw-eq { width: 36%; }
col.dia-cw-pct { width: 8%; }
col.dia-cw-hh { width: 9%; }
col.dia-cw-custo { width: 13%; }
.dia-tab-emp col.dia-cw-serv { width: 30%; }
.dia-tab-emp col.dia-cw-eq { width: 31%; }
.dia-tab-emp col.dia-cw-pct { width: 7%; }
.dia-tab-emp col.dia-cw-hh { width: 8%; }
.dia-tab-emp col.dia-cw-custo, .dia-tab-emp col.dia-cw-emp { width: 12%; }
table.dia-tab td { overflow-wrap: anywhere; }
table.dia-tab td.num { white-space: nowrap; }
.dia-emp { display: block; font-size: .78rem; font-weight: 700; color: var(--terc); }
/* Produção › Por funcionário (14/10/2026): a MESMA grade no quadro da própria (por funcionário) e no da terceirizada
   (por empreiteiro), por recorte de natureza (func-tab-todos / -exec / -manut) — App._funcTabAbreHTML */
table.func-tab { table-layout: fixed; width: 100%; min-width: 820px; border-collapse: separate; border-spacing: 0; }
table.func-tab td { overflow-wrap: anywhere; }
table.func-tab td.num { white-space: nowrap; }
col.fn-cw-nome { width: 16%; }
col.fn-cw-func { width: 14%; }
col.fn-cw-n { width: 7%; }
col.fn-cw-jor { width: 10%; }
col.fn-cw-hh { width: 9%; }
col.fn-cw-nat { width: 10%; }
col.fn-cw-custo { width: 10%; }
.func-tab-manut col.fn-cw-serv { width: 41%; }
/* 15/10/2026: Natureza Todos = execução · 🔧 retrabalho · 🧹 limpeza (· 🛠 não classificada) + custo de empreita;
   Execução = HH · custo + custo de empreita. Mais colunas → largura mínima maior (rola de lado no celular). */
table.func-tab.func-tab-todos { min-width: 1080px; }
table.func-tab.func-tab-exec { min-width: 900px; }
.func-tab-todos col.fn-cw-nome { width: 13%; }
.func-tab-todos col.fn-cw-func { width: 10%; }
.func-tab-todos col.fn-cw-serv { width: 17%; }
.func-tab-todos col.fn-cw-n { width: 5%; }
.func-tab-todos col.fn-cw-nat { width: 8.5%; }
.func-tab-todos col.fn-cw-custo { width: 9%; }
.func-tab-todos col.fn-cw-emp { width: 9.5%; }
.func-tab-todos.func-tab-nc col.fn-cw-nome { width: 12%; }
.func-tab-todos.func-tab-nc col.fn-cw-func { width: 9%; }
.func-tab-todos.func-tab-nc col.fn-cw-serv { width: 13%; }
.func-tab-todos.func-tab-nc col.fn-cw-custo { width: 8%; }
.func-tab-exec col.fn-cw-nome { width: 15%; }
.func-tab-exec col.fn-cw-func { width: 12%; }
.func-tab-exec col.fn-cw-serv { width: 28%; }
.func-tab-exec col.fn-cw-n { width: 6%; }
.func-tab-exec col.fn-cw-emp { width: 10%; }
/* manutenção por TIPO (a cor nunca vai sozinha: 🔧 / 🧹 / 🛠 no rótulo e no valor) */
.nat-val.limpeza small { color: var(--limpeza); opacity: .9; }
.nat-val.naoclass small, .custo.naoclass { color: var(--text-muted); }
th.fn-th-retrab, th.pl-th-retrab { color: var(--laranja-fg); }
th.fn-th-limpeza, th.pl-th-limpeza { color: var(--info-fg); }
/* custo de empreita = coluna de COMPARAÇÃO (não é custo pago): separada por um fio, valor em texto forte */
th.fn-emp-th small, th.pl-emp-th small, th.dia-empr-th small { display: block; margin-top: 1px; font-size: .64rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text-muted); }
td.fn-emp-td, th.fn-emp-th, td.pl-emp-td, th.pl-emp-th, td.dia-empr-td, th.dia-empr-th { border-left: 1px dashed var(--border-strong); }
.fn-emp-val, .pl-emp-val, .dia-empr-val { font-weight: 700; color: var(--text-primary); }
table.func-tab tr.fn-sem-rateio > td { font-size: .86em; color: var(--text-secondary); background: var(--warning-bg); }
/* Produção › Por local (14/10/2026): a MESMA grade nos quadros da própria e da terceirizada (App._plocGradeHTML) */
table.ploc-tab { table-layout: fixed; width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; }
/* planilha única (15/10/2026): rola na própria caixa (.ploc-wrap, como o .ps-wrap do Por serviço) com o cabeçalho congelado */
.ploc-wrap > table.ploc-tab thead { position: sticky; top: 0; z-index: 2; }
.ploc-wrap > table.ploc-tab thead tr:last-child > th { box-shadow: inset 0 -1px 0 var(--border-strong); }
table.ploc-tab td.ploc-nome { min-width: 0; overflow-wrap: anywhere; }
/* 15/10/2026: Natureza Todos = 10 colunas (execução · 🔧 retrabalho · 🧹 limpeza + custo de empreita; 11 com 🛠 não
   classificada) · Execução = 7 (+ custo de empreita) · manutenção = 6 */
.ploc-tab-6 col.pl-cw-local { width: 46%; }
col.pl-cw-pes { width: 9%; }
col.pl-cw-hh { width: 11%; }
col.pl-cw-nat { width: 12%; }
.ploc-tab-6 col.pl-cw-custo { width: 14%; }
col.pl-cw-pct { width: 6%; }
col.pl-cw-det { width: 6%; }
.ploc-tab-6 col.pl-cw-pct, .ploc-tab-6 col.pl-cw-det { width: 10%; }
table.ploc-tab.ploc-tab-10, table.ploc-tab.ploc-tab-11 { min-width: 1000px; }
.ploc-tab-10 col.pl-cw-local { width: 25%; }
.ploc-tab-10 col.pl-cw-pes, .ploc-tab-11 col.pl-cw-pes { width: 6.5%; }
.ploc-tab-10 col.pl-cw-hh, .ploc-tab-11 col.pl-cw-hh { width: 8%; }
.ploc-tab-10 col.pl-cw-nat { width: 9.5%; }
.ploc-tab-10 col.pl-cw-custo, .ploc-tab-11 col.pl-cw-custo { width: 9%; }
.ploc-tab-10 col.pl-cw-emp, .ploc-tab-11 col.pl-cw-emp { width: 10%; }
.ploc-tab-11 col.pl-cw-local { width: 20.5%; }
.ploc-tab-11 col.pl-cw-nat { width: 8.5%; }
.ploc-tab-7 col.pl-cw-local { width: 40%; }
.ploc-tab-7 col.pl-cw-custo, .ploc-tab-7 col.pl-cw-emp { width: 12%; }
.ploc-tab-7 col.pl-cw-pct, .ploc-tab-7 col.pl-cw-det { width: 7%; }
@media print { col.pl-cw-det { width: 0; } }
/* Impressão da Produção (15/10/2026): as planilhas largas (Por serviço · Por funcionário · Por local — até 11 colunas
   com retrabalho, limpeza e custo de empreita) saem em A4 PAISAGEM, sem a largura mínima da tela (que cortaria
   colunas no papel) e com fonte compacta. Página nomeada: não mexe na impressão das outras telas (o RDO tem a sua). */
@page prodpaisagem { size: A4 landscape; margin: 10mm; }
@media print {
  .prod-tela:has(table.func-tab, table.ploc-tab, table.ps-tab, table.dia-res-tab, .pvg) { page: prodpaisagem; }
  table.func-tab, table.ploc-tab, table.ps-tab, table.dia-res-tab, table.dia-tab { min-width: 0 !important; }
  table.func-tab, table.ploc-tab, table.dia-res-tab { font-size: .64rem; }
  table.func-tab th, table.ploc-tab th, table.dia-res-tab th { font-size: .58rem; letter-spacing: 0; }
  table.func-tab td, table.ploc-tab td, table.dia-res-tab td { padding: 4px 5px; }
  /* Jornada no papel: a situação ("⚠ −53 HH sem registro") quebra linha dentro da coluna (não invade a Execução) */
  table.func-tab .jor-cel { margin: 0; padding: 0; max-width: 100%; }
  table.func-tab .jor-st, table.func-tab .jor-oc, table.func-tab .jor-hh { white-space: normal; }
  table.func-tab .jor-hh b { font-size: .8rem; }
}
/* Por funcionário = planilha única (15/10/2026): rola na própria caixa (.fn-wrap) com o cabeçalho congelado; com
   Mão de obra "Todos", linhas de grupo 👷 Própria / 🏭 Terceirizadas (subtotal; ▾/▸ recolhe) — App._funcQuadroHTML */
.fn-wrap > table.func-tab thead { position: sticky; top: 0; z-index: 2; }
.fn-wrap > table.func-tab thead tr:last-child > th { box-shadow: inset 0 -1px 0 var(--border-strong); }
table.func-tab tr.fn-grupo > td { background: var(--surface-2); font-weight: 700; border-top: 1px solid var(--border-strong); }
table.func-tab tr.fn-grupo > td:first-child { font-family: var(--font-display); font-size: 1rem; box-shadow: inset 3px 0 0 var(--accent); }
table.func-tab tr.fn-grupo-terc > td:first-child { color: var(--terc); box-shadow: inset 3px 0 0 var(--terc); }
table.func-tab tr.fn-grupo .fn-grupo-n { font-family: var(--font-sans); font-size: .8rem; font-weight: 400; color: var(--text-muted); }
/* nível da empresa (🏭 ▸ funcionários dela): a empresa leva o ▸; os funcionários entram recuados, em fonte menor */
table.func-tab tr.fn-emp > td:first-child { font-weight: 600; }
table.func-tab .fn-emp-n { font-size: .8rem; font-weight: 400; color: var(--text-muted); }
table.func-tab tr.fn-emp-func > td { font-size: .9em; background: var(--surface-2); }
table.func-tab tr.fn-emp-func > td:first-child { padding-left: 44px; box-shadow: inset 3px 0 0 var(--terc); }
@media print { table.func-tab tr.fn-grupo .ploc-tg, table.func-tab tr.fn-emp .ploc-tg { display: none; } }

/* Tabela de jornada */
.jornada-tbl input[type=time] { padding: 5px 7px; min-width: 96px; }
.jornada-tbl td, .jornada-tbl th { padding: 6px 8px; }

/* Cabeçalho de impressão (só aparece no @media print) */
.print-cab { display: none; }

/* ==========================================================================
   Tela de login
   ========================================================================== */
/* Entrada = uma PEÇA (forma grande da assinatura) sobre papel milimetrado bem discreto
   (a malha some nas bordas). Bloco da marca alinhado à esquerda, como o carimbo de uma
   prancha: símbolo · CONSTRUX · apoio · linha de cota. */
.login-box {
  position: relative; isolation: isolate;
  display: flex; align-items: center; justify-content: center; min-height: 78vh; padding: 16px;
}
/* Malha num pseudo-elemento ATRÁS do cartão (a máscara não pode atingir o cartão). */
.login-box::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--colmeia-linha);
  -webkit-mask-image: var(--colmeia), radial-gradient(ellipse 60% 58% at 50% 50%, #000 25%, transparent 80%);
  -webkit-mask-size: var(--colmeia-tam), 100% 100%; -webkit-mask-repeat: repeat, no-repeat;
  -webkit-mask-position: center center, center; -webkit-mask-composite: source-in;
          mask-image: var(--colmeia), radial-gradient(ellipse 60% 58% at 50% 50%, #000 25%, transparent 80%);
          mask-size: var(--colmeia-tam), 100% 100%; mask-repeat: repeat, no-repeat;
          mask-position: center center, center; mask-composite: intersect;
}
.login-card {
  position: relative;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--shape-lg); corner-shape: var(--shape-corners);
  box-shadow: var(--shadow-lg); padding: 30px 28px 24px; width: 100%; max-width: 400px;
  display: flex; flex-direction: column;
}
/* Cota da peça (mesma das peças da tela inicial), aqui sempre acesa. */
.login-card::before {
  content: ""; position: absolute; top: -1px; left: var(--fillet-lg);
  width: 40px; height: var(--cota-w); background: var(--cota); pointer-events: none;
}
/* Marca inline adaptável ao tema ("Barra dourada", out/2026): Peça-C, traço do X e barras = currentColor;
   peça do canto, barra mais alta e lâmina do X = dourado. */
.cx-mark { display: block; color: var(--text-primary); }
.cx-mark .c, .cx-mark .xt, .cx-mark .b { fill: currentColor; }
.cx-mark .b1 { opacity: .5; } .cx-mark .b2 { opacity: .8; }
.cx-mark .b3, .cx-mark .xf { fill: var(--accent); }
.cx-mark.login-mark { width: 66px; height: 56px; margin: 0 0 16px -2px; }
/* Marca por extenso: letreiro DIN espaçado, o X em dourado (o mesmo do símbolo). */
.login-card h1 {
  font-size: 1.9rem; color: var(--text-primary); text-align: left; margin-bottom: 4px; line-height: 1.05;
  font-weight: 600; letter-spacing: var(--tracking-brand); text-transform: uppercase;
}
.login-card h1 .x { color: var(--accent); }
/* Apoio em caixa normal + LINHA DE COTA logo abaixo (fecha o "carimbo" da marca). */
.login-sub {
  position: relative; text-align: left; color: var(--text-secondary); font-size: .9rem;
  margin-bottom: 24px; padding-bottom: 16px;
}
.login-sub::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--cota-w);
  background:
    linear-gradient(var(--cota), var(--cota)) left bottom / var(--cota-len) var(--cota-w) no-repeat,
    linear-gradient(var(--line), var(--line)) left bottom / 100% 1px no-repeat;
}
.login-erro {
  background: var(--vermelho-bg); color: var(--danger-fg); border-radius: var(--radius-sm);
  border-left: var(--cota-w) solid var(--danger);
  padding: 10px 12px; font-size: .86rem; margin-bottom: 12px; font-weight: 600;
}
.login-card .btn.primary { margin-top: 4px; padding-top: 12px; padding-bottom: 12px; }
.login-ajuda {
  font-size: .78rem; color: var(--cinza-texto); text-align: left; line-height: 1.45;
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line);
}
.link-esqueci {
  display: block; align-self: flex-start; margin-top: 10px; background: none; border: 0; cursor: pointer;
  color: var(--text-secondary); font-size: .84rem; font-weight: 600; text-align: left; padding: 6px 0;
  transition: color var(--dur-fast) ease;
}
.link-esqueci:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }
.link-esqueci:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 2px; border-radius: 6px; }

/* ==========================================================================
   Abertura (identidade da vinheta): animação de entrada da marca — usada pela vinheta de carregamento real (core/abertura.js)
   LOGIN → CONSTRUX → ambiente de trabalho: o contorno do símbolo é traçado, as barras
   sobem, o X acende, o nome entra fechando o espaçamento e duas cotas correm para os
   lados; a camada (cor do fundo do tema: nunca tela branca) se dissolve. Só CSS.
   ========================================================================== */
.cx-intro {
  position: fixed; inset: 0; z-index: 300; pointer-events: none;
  display: grid; place-items: center; background: var(--background);
  animation: cx-intro-sai 220ms var(--ease-out) 700ms forwards;
}
.cx-intro-in { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.cx-intro-mark .c, .cx-intro-mark .xt { opacity: 0; animation: cx-surge 300ms var(--ease-out) forwards; }
.cx-intro-mark .xt { animation-delay: 300ms; }
.cx-intro-mark .b { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); animation: cx-sobe 240ms var(--ease-out) forwards; }
.cx-intro-mark .b1 { animation-delay: 160ms; }
.cx-intro-mark .b2 { animation-delay: 220ms; }
.cx-intro-mark .b3 { animation-delay: 280ms; }
.cx-intro-mark .xf { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; transform: scale(.4); animation: cx-acende 180ms var(--ease-out) 340ms forwards; }
.cx-intro-linha { position: relative; display: flex; align-items: center; }
.cx-intro-nome {
  font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; line-height: 1;
  text-transform: uppercase; letter-spacing: .34em; padding-left: .34em; color: var(--text-primary);
  opacity: 0; animation: cx-nome 300ms var(--ease-out) 260ms forwards;
}
.cx-intro-nome .x { color: var(--accent); }
/* Cotas: segmento dourado junto ao nome + hairline que se apaga em direção à borda. */
.cx-intro-cota {
  position: absolute; top: 50%; margin-top: -1px; width: min(30vw, 260px); height: var(--cota-w);
  transform: scaleX(0); animation: cx-cota 320ms var(--ease-out) 380ms forwards;
}
.cx-intro-cota.l {
  right: calc(100% + 18px); transform-origin: 100% 50%;
  background:
    linear-gradient(var(--accent), var(--accent)) right center / 22px var(--cota-w) no-repeat,
    linear-gradient(to left, var(--border-strong), transparent) center / 100% 1px no-repeat;
}
.cx-intro-cota.r {
  left: calc(100% + 18px); transform-origin: 0 50%;
  background:
    linear-gradient(var(--accent), var(--accent)) left center / 22px var(--cota-w) no-repeat,
    linear-gradient(to right, var(--border-strong), transparent) center / 100% 1px no-repeat;
}
@keyframes cx-surge { to { opacity: 1; } }
@keyframes cx-sobe { to { transform: scaleY(1); } }
@keyframes cx-acende { to { opacity: 1; transform: none; } }
@keyframes cx-nome {
  from { opacity: 0; letter-spacing: .34em; padding-left: .34em; }
  to { opacity: 1; letter-spacing: var(--tracking-brand); padding-left: var(--tracking-brand); }
}
@keyframes cx-cota { to { transform: scaleX(1); } }
@keyframes cx-intro-sai { to { opacity: 0; visibility: hidden; } }
/* Menos movimento: a abertura nem é criada (JS); se for, não aparece. */
@media (prefers-reduced-motion: reduce) { .cx-intro { display: none; } }

/* Vinheta de CARREGAMENTO (core/abertura.js) — a MESMA identidade da abertura acima, mas fica até o PRONTO
   (sem saída automática) e bloqueia toques na tela ainda não pronta. A barra é uma LINHA DE COTA: hairline +
   segmento dourado que cresce com o progresso REAL. Mensagem = a etapa real (ou o erro, com "Tentar de novo"). */
#cxAbertura { display: none; }
html[data-abertura] #cxAbertura { display: grid; pointer-events: auto; animation: none; }
html[data-abertura] #cxAbertura.saindo { animation: cx-intro-sai 220ms var(--ease-out) forwards; pointer-events: none; }
.cx-abertura-barra { position: relative; width: min(60vw, 280px); height: var(--cota-w); margin-top: 6px; }
.cx-abertura-barra::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--border-strong); }
.cx-abertura-barra i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent); transition: width 200ms var(--ease-out); }
.cx-abertura-msg { min-height: 1.3em; max-width: min(86vw, 420px); text-align: center; font-size: .82rem; line-height: 1.35; color: var(--text-muted); }
.cx-abertura-msg .p { margin-left: 4px; color: var(--text-secondary); font-weight: 600; font-variant-numeric: tabular-nums; }
#cxAbertura [hidden] { display: none !important; }   /* o .btn fixa display: os botões só aparecem quando valem */
.cx-abertura-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.cx-abertura.com-erro .cx-abertura-barra { display: none; }
.cx-abertura.com-erro .cx-abertura-msg { color: var(--text-primary); }
/* Menos movimento: a vinheta de carregamento é FUNCIONAL — aparece, sem animar (marca já desenhada). */
@media (prefers-reduced-motion: reduce) {
  html[data-abertura] #cxAbertura { display: grid; }
  #cxAbertura, #cxAbertura * { animation: none !important; transition: none !important; }
  #cxAbertura .cx-intro-mark .c, #cxAbertura .cx-intro-mark .xt { opacity: 1; }
  #cxAbertura .cx-intro-mark .b, #cxAbertura .cx-intro-cota { transform: none; }
  #cxAbertura .cx-intro-mark .xf, #cxAbertura .cx-intro-nome { opacity: 1; transform: none; }
  #cxAbertura .cx-intro-nome { letter-spacing: var(--tracking-brand); padding-left: var(--tracking-brand); }
}

/* ==========================================================================
   Tela de seleção de módulos — a "porta de entrada"
   --------------------------------------------------------------------------
   Composição: cabeçalho (título DIN + apoio + LINHA DE COTA) · grade de PEÇAS
   (forma GRANDE da assinatura: raio sup.esq/inf.dir + chanfro sup.dir/inf.esq),
   todas na mesma orientação — em cada cruzamento da grade dois chanfros paralelos
   formam uma junta diagonal e as peças leem como um sistema encaixado · coluna
   Administração separada por uma cota vertical. Sem sombra nem degradê: a peça é
   definida por superfície + hairline; o dourado só marca (cota, ícone, hover).
   ========================================================================== */
.modulos-wrap { max-width: 1500px; margin: 0 auto; padding: 14px 24px 18px; position: relative; isolation: isolate; }
/* PRANCHA: a tela de entrada fica sobre papel milimetrado (o mesmo do login), que se apaga para
   baixo e para os lados — as peças parecem pousadas numa folha de desenho. Pseudo-elemento atrás
   das peças, DENTRO da caixa da Home (nunca cria rolagem lateral): uma camada, pintada uma vez. */
.modulos-wrap::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: 0; left: 0; right: 0; height: min(760px, 100%);
  background-color: var(--colmeia-linha);
  -webkit-mask-image: var(--colmeia), radial-gradient(ellipse 62% 78% at 50% 0%, #000 30%, transparent 78%);
  -webkit-mask-size: var(--colmeia-tam), 100% 100%; -webkit-mask-repeat: repeat, no-repeat;
  -webkit-mask-position: center top, center; -webkit-mask-composite: source-in;
          mask-image: var(--colmeia), radial-gradient(ellipse 62% 78% at 50% 0%, #000 30%, transparent 78%);
          mask-size: var(--colmeia-tam), 100% 100%; mask-repeat: repeat, no-repeat;
          mask-position: center top, center; mask-composite: intersect;
}
@media print { .modulos-wrap::before { display: none; } }
/* Painel discreto de Manutenção da Home: sincronização + botões de recarregar dados /
   buscar versão nova. (A VERSÃO saiu daqui: a global foi para o header #appVersao e a de
   cada módulo virou a pill .m-ver no próprio cartão.) Admin: ancorado no fundo da coluna
   Administração (ver .home-admin .home-manutencao). Não-admin: barra de largura cheia.
   Visual de NOTA TÉCNICA: sem caixa, só a hairline de cima. */
.home-manutencao {
  max-width: 1500px; margin: 18px auto 6px; padding: 12px 0 0;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
}
.home-manutencao .hm-info { font-size: .8rem; color: var(--cinza-texto); flex: 1 1 320px; }
.home-manutencao .hm-info b { color: var(--text-primary); }
.home-manutencao .hm-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
/* Linha "Módulos: X v1 · Y v1 …" — hoje só nos painéis de Manutenção do Cadastros
   (na Home saiu: cada versão passou para a pill .m-ver no próprio cartão). */
.hm-modver { font-size: .78rem; opacity: .85; line-height: 1.7; }
.hm-modver b { color: var(--azul); font-weight: 600; }
/* Rótulo do painel de Manutenção — dá identidade ao bloco agora que ele vive tucado no
   fundo da coluna Administração. Discreto, maiúsculas, tom secundário do tema. */
.hm-titulo { font-family: var(--font-display); font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary, var(--cinza-texto)); }
/* Manutenção ANCORADA na coluna Administração (admin): bloco estreito EMPILHADO (rótulo ·
   texto · ações), na largura da coluna. Fora da <aside> (usuário não-admin) segue a barra
   de largura cheia EM LINHA definida acima — nada muda para ele. */
.home-admin .home-manutencao {
  max-width: none; margin: 18px 0 0; flex-direction: column; align-items: stretch; gap: 8px;
}
.home-admin .home-manutencao .hm-info { flex: 0 1 auto; }
/* Desktop (Home em 2 colunas, a coluna estica junto à grade de módulos): empurra a
   Manutenção para o FUNDO da coluna, alinhada à base da grade e ao pé da cota vertical.
   Abaixo de 960px a coluna passa para baixo dos módulos (altura natural) e a regra base
   (margin-top:18px) já basta — por isso o "pino" fica atrás de min-width. */
@media (min-width: 961px) {
  .home-layout.tem-admin .home-admin { display: flex; flex-direction: column; }
  .home-layout.tem-admin .home-admin .home-manutencao { margin-top: auto; }
}
/* Cabeçalho da Home à ESQUERDA, integrado ao topo da área de módulos: título DIN com
   presença, apoio menor e a LINHA DE COTA que separa a entrada da grade de peças. */
.modulos-head { text-align: left; position: relative; margin-bottom: 22px; padding-bottom: 16px; }
.modulos-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--cota-w); pointer-events: none;
  background:
    linear-gradient(var(--cota), var(--cota)) left bottom / calc(var(--cota-len) * 1.5) var(--cota-w) no-repeat,
    linear-gradient(var(--border-strong), var(--border-strong)) left bottom / 100% 1px no-repeat;   /* mais firme: corre sobre a malha da prancha */
}
.modulos-head h1 { font-size: var(--fs-hero); font-weight: var(--fw-title); line-height: 1.05; letter-spacing: -.012em; color: var(--text-primary); }
.modulos-head p { color: var(--text-secondary); font-size: 1.06rem; margin-top: 8px; }
/* Grade dos módulos: 3 colunas no desktop. A grade da coluna administrativa
   (.modulos-grid-admin) empilha em 1 coluna. Responsivo abaixo. */
.modulos-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.modulos-grid-admin { grid-template-columns: 1fr; gap: 10px; }

/* ==========================================================================
   Layout da Home — painel de 2 colunas: MÓDULOS (principal) | ADMINISTRAÇÃO
   (lateral, só admin). Grid puro (sem posicionamento absoluto), reflui sozinho
   nos breakpoints abaixo. Sem `.tem-admin` (usuário não-admin) fica 1 coluna e
   os módulos ocupam toda a largura útil — nunca sobra coluna/divisor vazio.
   ========================================================================== */
/* align-items: stretch → a coluna administrativa (mais baixa) acompanha a altura
   da grade de módulos, de modo que a cota vertical corra a grade inteira. */
.home-layout { display: grid; gap: 18px; align-items: stretch; }
.home-layout.tem-admin { grid-template-columns: minmax(0, 1fr) 268px; column-gap: 48px; }
.home-modulos { min-width: 0; }

/* COTA VERTICAL entre as colunas: hairline neutra na calha com o segmento dourado no
   topo (mesma linguagem das cotas horizontais). Só existe com a coluna administrativa. */
.home-admin { position: relative; min-width: 0; }
.home-layout.tem-admin .home-admin::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -24px; width: var(--cota-w);
  background:
    linear-gradient(var(--cota), var(--cota)) left top / var(--cota-w) var(--cota-len) no-repeat,
    linear-gradient(var(--line), var(--line)) left top / 1px 100% no-repeat;
  pointer-events: none;
}

/* (A responsividade progressiva da Home fica no fim do bloco, DEPOIS das regras
   base de .modulo-card, para que os overrides de celular vençam por ordem.) */

/* Cabeçalho de subseção da Home (Administração): rótulo DIN em maiúsculas, menor que o
   título principal — deixa claro que é uma ÁREA ADMINISTRATIVA distinta. */
.modulos-subhead { margin-bottom: 14px; padding-bottom: 10px; }
.modulos-subhead::after { background: linear-gradient(var(--line), var(--line)) left bottom / 100% 1px no-repeat; }
.modulos-subhead h2 {
  font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-secondary); margin-bottom: 4px;
}
.modulos-subhead p { color: var(--text-muted); font-size: .82rem; line-height: 1.35; }

/* ---- PEÇA DE MÓDULO ---------------------------------------------------------
   Cartão inteiro clicável (é um <a href>). --pf/--pc = raio/chanfro da peça (a coluna
   Administração usa a forma média). A COTA (::before) é o segmento no topo, depois do
   raio: em repouso é curta; no hover/foco ela corre até o chanfro e DOBRA o canto
   (::after, a 45°) — "o contorno se completa". Ícone de traço em dourado-tinta. */
.modulo-card {
  --pf: var(--fillet-lg); --pc: var(--cut-lg);
  position: relative;
  background: var(--plate-sheen), var(--card); border: 1px solid var(--line);
  border-radius: var(--pf) var(--pc) var(--pf) var(--pc); corner-shape: var(--shape-corners);
  box-shadow: var(--edge-light), var(--elev-1);
  padding: 18px 20px 16px; min-height: 172px; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 6px;
  text-decoration: none; color: inherit;   /* é um <a href> (abrir em nova aba/janela) sem virar link sublinhado */
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.modulo-card::before {
  content: ""; position: absolute; top: -1px; left: var(--pf);
  width: 22px; height: var(--cota-w); background: var(--cota);
  transition: width var(--dur) var(--ease-out) 50ms;
  pointer-events: none;
}
/* Sob o cursor a peça sobe 1 px e a sombra de contato se abre (a mesma luz de cima). */
.modulo-card:hover, .modulo-card:focus-visible { background-color: var(--card-hover); border-color: var(--border-strong); box-shadow: var(--edge-light), var(--elev-2); transform: translateY(-1px); }
.modulo-card:hover::before, .modulo-card:focus-visible::before {
  width: calc(100% - var(--pf) - var(--pc) + 1px); transition-delay: 0ms;
}
/* O segmento que dobra o chanfro só existe onde o chanfro é desenhado de verdade. */
@supports (corner-shape: bevel) {
  .modulo-card::after {
    content: ""; position: absolute; top: -1px; left: calc(100% + 1px - var(--pc));
    width: calc(var(--pc) * 1.4142); height: var(--cota-w); background: var(--cota);
    transform-origin: 0 0; transform: rotate(45deg) scaleX(0);
    transition: transform 60ms linear; pointer-events: none;
  }
  .modulo-card:hover::after, .modulo-card:focus-visible::after {
    transform: rotate(45deg) scaleX(1); transition: transform 70ms linear 150ms;
  }
}
.modulo-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.modulo-card:active { background-color: var(--surface-2); transform: none; }
.modulo-card .m-ico {
  width: 30px; height: 30px; margin-bottom: 8px; color: var(--accent-strong);
  display: grid; place-items: center start;
  transition: transform var(--dur) var(--ease-out);
}
.modulo-card .m-ico svg { width: 28px; height: 28px; display: block; }
.modulo-card .m-ico img { width: 28px; height: 28px; display: block; }
.modulo-card:hover .m-ico { transform: translateX(2px); }
/* Nome do módulo (letreiro DIN em caixa alta) + versão na MESMA linha (flex): a versão
   fica logo à direita do nome e, em nome longo/tela estreita, quebra sem estourar. */
.modulo-card h3 {
  font-family: var(--font-display); font-size: var(--fs-module); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tracking-caps); font-stretch: 87.5%;
  color: var(--text-primary); line-height: 1.25; margin-bottom: 2px;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px;
}
/* Versão do módulo = metadado: texto pequeno tabular, sem caixa (não compete com o nome).
   --text-secondary garante AA sobre o cartão nos dois temas. Ver .m-dev (selo) abaixo. */
.modulo-card h3 .m-ver {
  font-family: var(--font-sans); text-transform: none; letter-spacing: 0; font-stretch: 100%;
  font-size: .7rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums;
  color: var(--text-secondary, var(--cinza-texto)); opacity: .8;
}
.modulo-card p { color: var(--cinza-texto); font-size: .85rem; line-height: 1.4; max-width: 48ch; }
/* "Acessar" + linha que se prolonga no hover (a seta virou traço de cota). */
.modulo-card .m-go {
  margin-top: auto; padding-top: 8px; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text-secondary); font-weight: 600; font-size: .8rem; letter-spacing: .02em;
  transition: color var(--dur) var(--ease-out);
}
.modulo-card .m-go::after {
  content: ""; width: 14px; height: 1px; background: currentColor;
  transition: width var(--dur) var(--ease-out);
}
.modulo-card:hover .m-go, .modulo-card:focus-visible .m-go { color: var(--accent-strong); }
.modulo-card:hover .m-go::after, .modulo-card:focus-visible .m-go::after { width: 28px; }
/* Selo "em validação": recuado do chanfro do canto sup. direito. */
.modulo-card .m-dev {
  position: absolute; top: 16px; right: calc(var(--pc) + 12px);
  background: var(--warning-bg); color: var(--warning-fg);
  font-size: .66rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; letter-spacing: .02em;
}
.modulo-card.breve { cursor: default; opacity: .6; }
.modulo-card.breve:hover { background-color: var(--card); border-color: var(--line); box-shadow: var(--edge-light), var(--elev-1); transform: none; }
.modulo-card.breve:hover::before { width: 22px; }
.modulo-card.breve .m-go { color: var(--cinza-texto); }
/* Coluna Administração: peças na forma MÉDIA, mais baixas. */
.modulos-grid-admin .modulo-card { --pf: var(--fillet-md); --pc: var(--cut-md); min-height: 0; padding: 14px 16px 12px; }
.modulos-grid-admin .modulo-card .m-ico { margin-bottom: 4px; }

/* ==========================================================================
   Responsividade progressiva da Home (DEPOIS das bases, p/ vencerem por ordem).
   Nunca esconde conteúdo; sem overflow-x horizontal em nenhum breakpoint.
   ========================================================================== */
/* Desktop intermediário: mantém a coluna administrativa; módulos caem p/ 2 col. */
@media (max-width: 1200px) {
  .home-layout.tem-admin { grid-template-columns: minmax(0, 1fr) 236px; column-gap: 36px; }
  /* Só a grade de MÓDULOS cai p/ 2 colunas — a grade administrativa (2 cartões)
     continua empilhada em 1 coluna (escopo .home-modulos evita vazar p/ ela). */
  .home-modulos .modulos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-layout.tem-admin .home-admin::before { left: -18px; }
}
/* Tablet: Administração desce para baixo dos módulos; sem cota vertical. */
@media (max-width: 960px) {
  .home-layout, .home-layout.tem-admin { grid-template-columns: 1fr; gap: 18px; }
  .home-layout.tem-admin .home-admin::before { display: none; }
  .home-admin { border-top: 1px solid var(--line); padding-top: 16px; }
  .modulos-grid-admin { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Celular: 1 coluna; peças horizontais compactas (ícone à esquerda), forma média. */
@media (max-width: 620px) {
  .modulos-wrap { padding: 10px 14px 16px; }
  .modulos-head { margin-bottom: 16px; padding-bottom: 12px; }
  .home-modulos .modulos-grid, .modulos-grid-admin { grid-template-columns: 1fr; gap: 10px; }
  .modulo-card { --pf: var(--fillet-md); --pc: var(--cut-md); flex-direction: row; align-items: center; gap: 12px; padding: 14px 14px; min-height: 0; }
  .modulo-card .m-ico { flex: 0 0 auto; margin-bottom: 0; }
  .modulo-card > div { min-width: 0; }
  .modulo-card .m-go { margin: 0 0 0 auto; padding-top: 0; align-self: center; white-space: nowrap; }
  .modulo-card .m-go::after { display: none; }
  .modulo-card .m-dev { top: 6px; right: calc(var(--pc) + 8px); }
}

/* Papel do usuário no topo */
.papel-badge {
  background: rgba(255,255,255,.2); color: #fff; border-radius: 20px;
  padding: 3px 10px; font-size: .72rem; font-weight: 700; white-space: nowrap;
}
.sync-nota { font-size: .8rem; color: var(--cinza-texto); margin-bottom: 12px; }

/* Serviço sem hora de fim (destaque) */
.lanc-item.sem-fim { border-color: var(--amarelo); background: var(--amarelo-bg); }
.chip.alerta { background: var(--vermelho); color: #fff; font-size: .7rem; }

/* Lista de validação */
.val-list { margin: 0 0 4px 0; padding-left: 20px; }
.val-list li { margin-bottom: 6px; font-size: .9rem; }

/* Linha do tempo (situação da equipe por hora) */
.tl-track { position: relative; height: 22px; background: repeating-linear-gradient(90deg, #f4f6f9 0 1px, transparent 1px 100%) , #f9fafb; border: 1px solid var(--borda); border-radius: 6px; margin-top: 6px; overflow: hidden; }
.tl-lunch { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(45deg, #e4e8ec 0 5px, #eef1f4 5px 10px); }
.tl-seg { position: absolute; top: 2px; bottom: 2px; background: var(--info); border-radius: 4px; opacity: .9; }
.tl-seg.semfim { background: repeating-linear-gradient(45deg, var(--vermelho) 0 6px, #e87878 6px 12px); }
.tl-pause { position: absolute; top: 2px; bottom: 2px; background: repeating-linear-gradient(45deg, var(--laranja, #e8892b) 0 5px, #f3b878 5px 10px); border-radius: 4px; z-index: 1; opacity: .95; }
/* Turno em serviço EXTERNO: listras âmbar (variação do padrão listrado da pausa/remanejamento). */
.tl-ext { position: absolute; top: 2px; bottom: 2px; background: repeating-linear-gradient(45deg, var(--warning) 0 6px, var(--warning-bg) 6px 12px); border-radius: 4px; }   /* sem z-index: um apontamento no mesmo trecho (inconsistência) fica por cima */
/* DISPENSA de serviço: listras ardósia no sentido OPOSTO (−45°) + contorno — justificado, sem produção; só no horário livre. */
.tl-disp { position: absolute; top: 2px; bottom: 2px; background: repeating-linear-gradient(-45deg, var(--dispensa) 0 3px, var(--dispensa-bg) 3px 8px); border-radius: 4px; box-shadow: inset 0 0 0 1px var(--dispensa); }
/* Sobreposição: trecho conflitante (2+ apontamentos simultâneos) — pintado POR CIMA do azul. */
.tl-over { position: absolute; top: 2px; bottom: 2px; background: var(--vermelho); border-radius: 4px; z-index: 2; box-shadow: inset 0 0 0 1px rgba(120, 0, 0, .4); }
.tl-lbls { display: flex; justify-content: space-between; font-size: .68rem; color: var(--cinza-texto); margin-top: 2px; }

/* Situação da equipe — grupos por empresa (Construtora Piacentini + terceirizadas). */
.emp-grupo { border: 1px solid var(--borda); border-radius: 10px; margin-bottom: 10px; overflow: hidden; background: var(--card); }
.emp-head { width: 100%; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 12px; background: var(--azul-bg); border: none; cursor: pointer; font: inherit; text-align: left; }
.emp-head .emp-caret { color: var(--azul); font-size: .78rem; width: 14px; flex-shrink: 0; }
.emp-head .emp-nome { font-weight: 800; letter-spacing: .02em; text-transform: uppercase; font-size: .82rem; color: var(--grafite); }
.emp-head .emp-cont { color: var(--cinza-texto); font-size: .78rem; font-weight: 600; }
.emp-head .emp-confl { margin-left: auto; color: var(--vermelho); font-weight: 700; font-size: .78rem; }
.emp-corpo { padding: 8px 10px 2px; }
.emp-vazio { color: var(--cinza-texto); font-size: .85rem; padding: 6px 4px 10px; }
/* Linha com conflito: acento vermelho à esquerda (além do chip ⚠ e do trecho vermelho). */
.colab-nao.confl { box-shadow: inset 3px 0 0 0 var(--vermelho); }
.tchip.confl { background: var(--vermelho-bg); color: var(--vermelho); }
/* Chip ⚠ clicável → abre o modal de correção da sobreposição. */
.tchip-btn { border: none; cursor: pointer; font: inherit; font-size: .72rem; font-weight: 700; }
.tchip-btn:hover { text-decoration: underline; box-shadow: inset 0 0 0 1px var(--vermelho); }

/* Modal de sobreposição — blocos de conflito + cards dos apontamentos envolvidos. */
.sobrep-bloco { margin-top: 12px; }
.sobrep-hd { font-weight: 800; color: var(--vermelho); font-size: .86rem; margin-bottom: 6px; }
.sobrep-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.sobrep-card { border: 1px solid var(--borda); border-left: 4px solid var(--vermelho); border-radius: 8px; padding: 9px 11px; background: var(--card); }
.sobrep-serv { font-weight: 700; margin-bottom: 3px; }
.sobrep-lin { font-size: .82rem; color: var(--grafite); margin-top: 2px; }
.sobrep-lin.muted { color: var(--cinza-texto); }

/* Fotos */
.fotos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.foto-item { position: relative; border: 1px solid var(--borda); border-radius: 8px; overflow: hidden; background: var(--surface); }
.foto-item img { width: 100%; height: 110px; object-fit: cover; display: block; }
.foto-leg { border: 0; border-top: 1px solid var(--borda); border-radius: 0; font-size: .78rem; padding: 6px 8px; width: 100%; }
.foto-cap { font-size: .78rem; padding: 5px 8px; color: var(--cinza-texto); line-height: 1.3; overflow-wrap: anywhere; }
.foto-x { position: absolute; top: 5px; right: 5px; background: rgba(0,0,0,.55); color: #fff; border: 0; border-radius: 50%; width: 24px; height: 24px; cursor: pointer; font-size: .8rem; }
/* Foto vinculada a um apontamento de serviço (legenda automática, não editável) */
.foto-item.foto-serv { border-color: var(--azul); }
.foto-item.foto-serv .foto-cap { border-top: 1px solid var(--borda); background: var(--azul-bg); }
.foto-serv-tag { display: inline-block; font-size: .64rem; font-weight: 800; color: var(--azul); background: var(--surface); border: 1px solid var(--azul); border-radius: 20px; padding: 1px 6px; margin-right: 3px; white-space: nowrap; }
/* Foto ainda não sincronizada (guardada no aparelho, sobe quando a rede voltar) */
.foto-item.pendente { border-color: #e6b800; box-shadow: 0 0 0 1px #e6b800 inset; }
.foto-item.pendente img { opacity: .82; }
.foto-selo { position: absolute; top: 5px; left: 5px; background: var(--warning-bg); color: var(--warning-fg); font-size: .68rem; font-weight: 800; padding: 2px 7px; border-radius: 20px; white-space: nowrap; pointer-events: none; box-shadow: 0 1px 2px rgba(0,0,0,.15); }

/* ---- Geolocalização/direção da foto (Fase 2): mini-mapa bússola + coordenadas ----
   Overlay SÓ de exibição (a foto original nunca muda). Fundo escuro translúcido
   para ficar legível sobre qualquer foto; some quando a foto não tem geo. */
.foto-img { position: relative; display: block; line-height: 0; }
.foto-geo-badge { position: absolute; left: 5px; bottom: 5px; display: flex; align-items: center; gap: 2px; background: rgba(15,23,42,.62); border-radius: 8px; padding: 2px 4px 2px 2px; pointer-events: none; }
.foto-geo-badge .gm-svg { width: 34px; height: 34px; display: block; }
.foto-geo-badge .fg-card { color: #fff; font-size: .72rem; font-weight: 800; line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.foto-zoom-wrap { position: relative; width: max-content; max-width: 100%; margin: 0 auto; }
/* Localização como RODAPÉ da foto: faixa estreita colada embaixo, de lado a lado
   (antes era um quadro flutuante no canto superior esquerdo). Bússola menor +
   texto em linha (com quebra) para a faixa ficar baixa. */
.foto-geo-box { position: absolute; left: 0; right: 0; bottom: 0; top: auto; display: flex; gap: 10px; align-items: center; max-width: none; background: rgba(15,23,42,.72); color: #fff; border-radius: 0 0 8px 8px; padding: 6px 12px; box-shadow: 0 -2px 8px rgba(0,0,0,.4); }
.foto-geo-box--vazio { display: block; font-size: .78rem; text-align: center; }
.foto-geo-box .fg-map { flex-shrink: 0; }
.foto-geo-box .fg-map .gm-svg { width: 46px; height: 46px; display: block; }
.foto-geo-box .fg-txt { font-size: .75rem; line-height: 1.3; display: flex; flex-wrap: wrap; align-items: baseline; gap: 1px 14px; }
.foto-geo-box .fg-lin { white-space: nowrap; }
.foto-geo-box .fg-k { color: #cbd5e1; font-weight: 700; margin-right: 3px; }
.foto-geo-box .fg-mut { color: #cbd5e1; }
.foto-geo-box .fg-aprox { color: #cbd5e1; font-size: .68rem; }
.foto-geo-box .fg-aviso { color: #fbbf24; font-weight: 700; white-space: normal; flex-basis: 100%; }
/* bússola SVG (comum ao selo e ao quadro) */
.gm-svg .gm-ring { fill: rgba(255,255,255,.08); stroke: rgba(255,255,255,.55); stroke-width: 2.5; }
.gm-svg .gm-cross { stroke: rgba(255,255,255,.20); stroke-width: 1; }
.gm-svg .gm-cone { fill: rgba(56,189,248,.30); }
.gm-svg .gm-arrow { stroke: #38bdf8; stroke-width: 4.5; stroke-linecap: round; }
.gm-svg .gm-head { fill: #38bdf8; }
.gm-svg .gm-dot { fill: #fff; stroke: rgba(15,23,42,.5); stroke-width: 1; }
.gm-svg .gm-n { fill: #fca5a5; font-size: 16px; font-weight: 800; }
.gm-svg .gm-c { fill: rgba(255,255,255,.82); font-size: 13px; font-weight: 700; }
@media (max-width: 560px) {
  .foto-geo-box { gap: 8px; padding: 6px 10px; }
  .foto-geo-box .fg-map .gm-svg { width: 42px; height: 42px; }
  .foto-geo-box .fg-txt { font-size: .72rem; gap: 1px 10px; }
}

/* Painel da fila offline (pendentes + falhas) — Passo 4C-3b.3 */
.fila-painel { max-height: 62vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.fila-item { border: 1px solid var(--borda); border-radius: 10px; padding: 9px 11px; margin-top: 8px; background: var(--surface); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fila-item.falha { display: block; border-color: var(--danger); background: var(--danger-bg); }
.fila-item-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fila-desc { font-weight: 700; font-size: .9rem; }
.fila-tag { font-size: .68rem; font-weight: 800; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
.fila-tag.ok { background: var(--surface-2); color: var(--text-secondary); }
.fila-tag.err { background: var(--danger-bg); color: var(--danger-fg); }
.fila-tag.dep { background: var(--warning-bg); color: var(--warning-fg); }
.fila-msg { font-size: .82rem; color: var(--cinza-texto); margin-top: 5px; }
.fila-metinfo { font-size: .72rem; color: var(--text-muted); margin-top: 4px; }

/* ==========================================================================
   RDO — Relatório Diário de Obra (documento) · App.rdoDoc
   TELA: aproveita a largura útil (só margem de conforto), responsivo.
   IMPRESSÃO/PDF: A4 retrato, vira documento (regras no @media print abaixo).
   Só apresentação — não toca em dados nem regras de negócio.
   ========================================================================== */
/* Na tela o RDO deixa de ser um card estreito e ocupa quase toda a área útil
   entre o menu e a margem direita; centraliza só em monitores muito largos e
   encolhe sozinho em telas menores (width:100% + teto generoso, sem px fixo). */
.rdo-doc { width: 100%; max-width: 1280px; margin: 0 auto; page: rdo; }

/* Cabeçalho do RDO: TODA a identificação à ESQUERDA (título · obra · contratante · endereço ·
   Local · responsável · fiscalização · OS · prazo · data/semana/status); à DIREITA, só a LOGO
   da obra. Vira uma coluna em telas estreitas (logo por último); no PDF fica lado a lado (bloco
   @media print). A linha divisória dourada + margem inferior separam o cabeçalho dos indicadores. */
.rdo-cab { border-bottom: 2px solid var(--accent); padding-bottom: 12px; margin-bottom: 16px; }
/* align-items:flex-start: a logo fica no TOPO à direita (canto), a identificação flui à esquerda. */
.rdo-cab-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.rdo-cab-txt { min-width: 0; flex: 1 1 340px; display: flex; flex-direction: column; gap: 3px; }
.rdo-cab-tit { font-size: 1.4rem; font-weight: 800; color: var(--accent); line-height: 1.15; }
/* Código documental (RDO-<SIGLA>-<ANO>-<NNN>): identificação estável do documento, sob o título. */
.rdo-cab-cod { font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace; font-weight: 700; font-size: .92rem; letter-spacing: .04em; color: var(--accent-strong, var(--text-primary)); }
.rdo-cab-obra { font-weight: 700; font-size: 1.02rem; }
.rdo-cab-cli { color: var(--text-secondary); font-size: .92rem; }
.rdo-cab-end { color: var(--text-secondary); font-size: .9rem; margin-top: 1px; overflow-wrap: anywhere; }
.rdo-cab-meta { margin-top: 6px; font-size: .95rem; }        /* data em destaque, sem competir com o título */
.rdo-lbl { font-weight: 700; color: var(--text-primary); }   /* rótulo (Endereço:/Responsável:/…) */
.rdo-cab-prazo { margin-top: 1px; color: var(--text-secondary); font-size: .9rem; }
.rdo-cab-prazo-sub { font-size: .82rem; color: var(--text-muted); }
/* Lado direito: só a logo, no canto superior direito. */
.rdo-cab-side { flex: 0 0 auto; }
.rdo-cab-logo { flex: 0 0 auto; }
.rdo-logo { max-height: 160px; max-width: 460px; width: auto; height: auto; object-fit: contain; display: block; border-radius: var(--radius-sm, 4px); }
/* Placeholder "+ logo" (só na tela, só para quem edita cadastros): leva ao cadastro da obra. */
.rdo-logo-add { border: 1px dashed var(--border); background: var(--surface-2); color: var(--text-muted); border-radius: var(--radius-md, 8px); padding: 16px 20px; cursor: pointer; font-size: .82rem; font-weight: 600; line-height: 1; }
.rdo-logo-add:hover { border-color: var(--accent); color: var(--accent); }
/* Mobile: cabeçalho em coluna — identificação primeiro, a logo (menor) por último; o aviso de
   prévia ocupa a largura disponível. */
@media (max-width: 600px) {
  .rdo-cab-row { gap: 12px; }
  .rdo-cab-txt { flex-basis: 100%; }
  .rdo-cab-side { width: 100%; }
  .rdo-logo { max-height: 90px; max-width: 100%; }
  .rdo-cab-tit { font-size: 1.2rem; }
  .rdo-cab .rdo-selo { display: block; }
}

/* Cadastros → Dados da obra: preview da logo no formulário. */
.ob-logo-edit { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 4px 0 8px; }
.ob-logo-prev { max-height: 60px; max-width: 170px; object-fit: contain; border: 1px solid var(--border); border-radius: var(--radius-md, 8px); padding: 6px; background: #fff; }
.ob-logo-prev.vazio { display: inline-flex; align-items: center; justify-content: center; width: 120px; height: 56px; color: var(--text-muted); font-size: .8rem; background: var(--surface-2); }

/* Serviços em execução: prioridade de largura para Serviço e Executantes; as
   colunas pequenas (Lotes, Turnos, %) ocupam só o necessário e não quebram —
   assim nomes e descrições param de quebrar em várias linhas sem necessidade. */
.rdo-serv td, .rdo-serv th { vertical-align: top; }
/* Colunas: 1 Local · 2 Serviço · 3 Executantes · 4 Situação. Serviço (2) e
   Executantes (3) herdam toda a folga (piso de 9em, com mais espaço agora que saíram
   Horário e %); Situação (4) fica no mínimo e não quebra; Local (1) tem largura
   automática e pode quebrar em várias linhas (multi-lote). */
.rdo-serv th:nth-child(2), .rdo-serv td:nth-child(2),
.rdo-serv th:nth-child(3), .rdo-serv td:nth-child(3) { min-width: 9em; }
.rdo-serv th:nth-child(4), .rdo-serv td:nth-child(4) {  /* Situação */
  white-space: nowrap; width: 1%;
}

/* Resumo do dia (KPIs derivados: efetivo, HH, frentes, máquinas). */
.rdo-resumo { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 4px; }
.rdo-resumo .rdo-kpi { flex: 1 1 120px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md, 8px); padding: 10px 12px; }
.rdo-resumo .rk-n { font-size: 1.3rem; font-weight: 800; line-height: 1; }
.rdo-resumo .rk-l { font-size: .78rem; color: var(--text-muted); margin-top: 4px; }

/* Atividades: subtítulo de período (Manhã/Tarde/Noite) e linhas de grupo (quadra),
   subtotais e total do efetivo. Só apresentação. */
.rdo-periodo { font-weight: 800; margin: 14px 0 6px; color: var(--accent); letter-spacing: .01em; }
.rdo-serv tr.rdo-grp td, table tr.rdo-grp td { background: var(--surface-2); font-weight: 700; }
tr.rdo-sub td { font-weight: 700; border-top: 1px solid var(--border); }
tr.rdo-tot td { font-weight: 800; border-top: 2px solid var(--border); }
.rdo-nominal { margin-top: 8px; }
/* Relação nominal por EMPRESA: tabelas compactas para chamada. Na tela LADRILHAM
   (grid auto-fill) para aproveitar a largura; na impressão fluem em coluna única
   (bloco @media print abaixo), com quebra de página limpa e cabeçalho repetido. */
.rdo-nominais { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px 16px; margin-top: 6px; align-items: start; }
.rdo-emp { break-inside: avoid; min-width: 0; }   /* min-width:0 deixa a tabela ENCOLHER e quebrar (senão nomes longos vazam p/ a coluna vizinha) */
.rdo-nom-tab { width: 100%; min-width: 0; border-collapse: collapse; font-size: .9em; table-layout: fixed; }   /* min-width:0 anula o teto global `table{min-width:480px}` (só p/ tabelas de rolagem), senão vaza da coluna do grid */
.rdo-nom-tab th, .rdo-nom-tab td { text-align: left; padding: 3px 8px; border-bottom: 1px solid var(--border); vertical-align: top; overflow-wrap: anywhere; }
.rdo-nom-tab col.rdo-col-nome { width: 60%; }     /* Nome ganha a folga; Função ocupa o resto */
.rdo-nom-tab thead tr.rdo-emp-h th { background: var(--surface-2); font-weight: 700; overflow-wrap: anywhere; }  /* nome de empresa longo QUEBRA dentro da célula (não empurra a tabela p/ fora da coluna do grid) */
.rdo-nom-tab .rdo-emp-n { font-weight: 500; color: var(--text-muted); font-size: .85em; }

/* Situação da atividade (Concluído / Em execução): destaque DISCRETO por token,
   legível em cor e — via o bloco @media print — em preto e branco (texto + contorno,
   a cor deixa de ser o único indicador). Sem hex solto (Design System). */
.rdo-sit { display: inline-block; font-size: .82rem; font-weight: 600; padding: 1px 9px; border-radius: 999px; border: 1px solid var(--border); white-space: nowrap; }
.rdo-sit.ok { color: var(--success-fg, var(--success)); background: var(--success-bg, transparent); border-color: color-mix(in srgb, var(--success, #999) 40%, transparent); }
.rdo-sit.run { color: var(--warning-fg, var(--warning)); background: var(--warning-bg, transparent); border-color: color-mix(in srgb, var(--warning, #999) 40%, transparent); }

/* Selo de identidade do documento: Nº + versão + geração (congelado) ou aviso de prévia. */
.rdo-selo { margin-top: 8px; display: inline-block; font-size: .82rem; font-weight: 600; padding: 5px 11px; border-radius: var(--radius-md, 8px); background: var(--accent-soft, var(--surface-2)); color: var(--accent-strong, var(--text-primary)); border: 1px solid color-mix(in srgb, var(--accent, #999) 34%, transparent); }
.rdo-selo.previa { background: var(--warning-bg, var(--surface-2)); color: var(--warning-fg, var(--text-secondary)); font-weight: 500; border-color: color-mix(in srgb, var(--warning, #999) 30%, transparent); }

/* Código do RDO na lista (info secundária, discreta). */
.rdo-cod-mini { font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace; font-size: .8rem; color: var(--text-muted); letter-spacing: .02em; }

/* ---- Assinaturas do RDO: um bloco por responsável (Apontador · Engenheiro · Fiscalização).
   Cada bloco = CAMPO compacto (pequeno retângulo com a linha e o rótulo "Assinatura") + nome +
   função + "Assinado em: … às …" (só quando o ato existe). Sem selo de "assinado digitalmente".
   Lado a lado no desktop e no A4; empilhados no celular (auto-fit/minmax). O .rdo-assin-slot
   é o espaço reservado p/ a futura imagem/traço de assinatura, QR Code ou hash. ---- */
.rdo-assinaturas { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border); display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 22px 32px; align-items: start; }
.rdo-assin-bloco { min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; }
.rdo-assin-campo { width: 100%; max-width: 240px; height: 92px; box-sizing: border-box; display: flex; flex-direction: column; padding: 8px 16px 6px; margin-bottom: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm, 4px); background: var(--surface); }
.rdo-assin-slot { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.rdo-assin-slot img { max-width: 100%; max-height: 100%; object-fit: contain; }
.rdo-assin-linha { border-top: 1px solid var(--text-muted); }
.rdo-assin-rot { padding-top: 3px; font-size: .66rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.rdo-assin-nome { font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.rdo-assin-fn { color: var(--text-secondary); font-size: .82rem; }
.rdo-assin-dt { color: var(--text-secondary); font-size: .8rem; margin-top: 2px; }

/* Selo de status do PDF oficial no Google Drive (tela do RDO; nunca impresso — .no-print).
   Cores por estado via tokens do Design System (verde/processando/atenção/erro). */
.rdo-pdf-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; padding: 8px 12px; border-radius: var(--radius-md, 8px); border: 1px solid var(--border); background: var(--surface-2); font-size: .88rem; }
.rdo-pdf-status .rps-ic { font-size: 1rem; line-height: 1; }
.rdo-pdf-status .rps-tx { flex: 1; min-width: 200px; }
.rdo-pdf-status .rps-ac { display: flex; gap: 6px; flex-wrap: wrap; }
.rdo-pdf-status.ok { border-color: color-mix(in srgb, var(--success, #1a7f37) 35%, transparent); }
.rdo-pdf-status.ok .rps-ic { color: var(--success, #1a7f37); }
.rdo-pdf-status.proc { border-color: color-mix(in srgb, var(--info, #0b6bcb) 35%, transparent); }
.rdo-pdf-status.proc .rps-ic { color: var(--info, #0b6bcb); }
.rdo-pdf-status.out { border-color: color-mix(in srgb, var(--warning, #a15c00) 40%, transparent); background: var(--warning-bg, var(--surface-2)); }
.rdo-pdf-status.out .rps-ic { color: var(--warning-fg, #a15c00); }
.rdo-pdf-status.err { border-color: color-mix(in srgb, var(--danger, #b3261e) 40%, transparent); background: var(--danger-bg, var(--surface-2)); }
.rdo-pdf-status.err .rps-ic, .rdo-pdf-status.err .rps-tx { color: var(--danger-fg, #b3261e); }

/* Página do PDF do RDO: A4 retrato com margens uniformes. Página NOMEADA
   (page: rdo em .rdo-doc) para NÃO alterar a impressão dos outros relatórios
   (Produtividade/Medição seguem no padrão do navegador). */
@page rdo { size: A4 portrait; margin: 12mm 12mm; }

/* ==========================================================================
   Impressão — só o conteúdo, com cabeçalho da obra
   ========================================================================== */
@media print {
  .topbar, .nav, .multibar, .toast, #modalRoot, .no-print, .btn { display: none !important; }
  body, html { background: var(--surface); }
  .wrap, .content { display: block; padding: 0; margin: 0; max-width: 100%; }
  .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  .dia-bloco { break-inside: avoid; }
  .print-cab { display: block; border-bottom: 2px solid #333; padding-bottom: 8px; margin-bottom: 14px; }
  .print-cab .pc-tit { font-size: 1.3rem; font-weight: 800; }
  .print-cab .pc-sub { font-size: .85rem; color: #555; }
  .print-cab .pc-rel { font-size: .95rem; font-weight: 700; margin-top: 4px; }
  table { font-size: 11px; }
  a[href]::after { content: ""; }
}

/* --------------------------------------------------------------------------
   RDO — impressão/PDF como DOCUMENTO (não um "print" da tela) · App.rdoDoc
   Some o card do sistema (borda/sombra/limite de largura), controla as quebras
   de página, repete o cabeçalho das tabelas e mantém tudo legível em P&B.
   Escala de poucos a dezenas de linhas (efetivo, serviços, equipamentos).
   -------------------------------------------------------------------------- */
@media print {
  /* O RDO ocupa a folha inteira (dentro das margens do @page) e PODE quebrar
     entre páginas — anula o break-inside:avoid genérico do .card, errado para
     um documento longo. */
  .rdo-doc {
    max-width: none; width: auto; margin: 0; padding: 0;
    border: 0; box-shadow: none;
    break-inside: auto; page-break-inside: auto;
  }
  /* Cabeçalho do documento (título, obra, data, situação, endereço, responsável)
     não se parte no meio. */
  .rdo-cab { break-inside: avoid; page-break-inside: avoid; }
  /* Identificação à esquerda, LOGO à direita no topo (nunca empilham no PDF). */
  .rdo-cab-row { display: flex; flex-wrap: nowrap; align-items: flex-start; }
  .rdo-cab-txt { flex: 1 1 auto; }
  .rdo-cab-side { flex: 0 0 auto; }
  .rdo-cab-cli, .rdo-cab-end, .rdo-cab-prazo { color: #333; }
  .rdo-cab-end .rdo-lbl, .rdo-cab-prazo .rdo-lbl { color: #000; }
  .rdo-cab-prazo-sub { color: #444; }
  /* Logo da obra: fica lado a lado com a identificação no PDF, com cor fiel e
     tamanho controlado (não estoura a margem do @page). */
  .rdo-logo { max-height: 130px; max-width: 340px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Título de seção nunca fica órfão no rodapé: acompanha o conteúdo seguinte
     (evita "3. SERVIÇOS…" sozinho no fim da página e a tabela na página seguinte). */
  .rdo-doc .section-title {
    break-after: avoid; page-break-after: avoid;
    break-inside: avoid; page-break-inside: avoid;
    color: #222; margin-top: 14px;
  }

  /* Tabelas preparadas para a folha: sem container de rolagem (senão corta e não
     repete o cabeçalho), largura total, cabeçalho repetido em cada página e
     nenhuma linha partida entre páginas. */
  .rdo-doc .table-wrap { overflow: visible; }
  .rdo-doc table { min-width: 0; width: 100%; font-size: 11px; break-inside: auto; page-break-inside: auto; }
  .rdo-doc thead { display: table-header-group; }                    /* repete o cabeçalho */
  .rdo-doc tr, .rdo-doc td, .rdo-doc th { break-inside: avoid; page-break-inside: avoid; }
  .rdo-doc th { background: transparent; color: #222; border-bottom: 1px solid #333; }
  .rdo-doc td, .rdo-doc th { padding: 6px 8px; }

  /* Situação (badge) legível mesmo sem cor de fundo (impressão em preto e branco):
     a cor deixa de ser o único indicador — fica o texto + um contorno. */
  .rdo-doc .badge { background: transparent !important; color: #000 !important; border: 1px solid #666; }

  /* Registro fotográfico: a imagem não é cortada entre páginas. */
  .rdo-doc .fotos-grid, .rdo-doc .foto-item { break-inside: avoid; page-break-inside: avoid; }

  /* Resumo do dia: neutro em P&B e sem quebrar no meio. */
  .rdo-doc .rdo-resumo { break-inside: avoid; page-break-inside: avoid; }
  .rdo-doc .rdo-kpi { background: transparent; border-color: #999; }
  /* Subtítulo de período acompanha a tabela seguinte (não fica órfão no rodapé). */
  .rdo-doc .rdo-periodo { break-after: avoid; page-break-after: avoid; color: #222; }
  /* Linhas de grupo/subtotal legíveis sem cor de fundo. */
  .rdo-doc tr.rdo-grp td { background: transparent; font-weight: 700; border-bottom: 1px solid #333; }
  /* Selo do documento (Nº / prévia) legível em P&B. */
  .rdo-doc .rdo-selo { background: transparent; color: #000; border: 1px solid #666; }

  /* Relação nominal na folha: coluna única (quebra de página limpa; evita colunas
     desiguais entre páginas). Cada empresa PODE continuar na página seguinte — o
     cabeçalho da empresa + "Nome/Função" (ambos no <thead>) repetem (table-header-group
     herdado de .rdo-doc thead); as LINHAS de pessoa não se partem. */
  .rdo-doc .rdo-nominais { display: block; }
  .rdo-doc .rdo-emp { break-inside: auto; page-break-inside: auto; margin-bottom: 8px; }
  .rdo-doc .rdo-nom-tab thead tr.rdo-emp-h th { background: transparent; border-bottom: 1px solid #333; }
  .rdo-doc .rdo-nom-tab .rdo-emp-n { color: #444; }

  /* Situação legível em P&B: só texto + contorno (a cor deixa de ser o único sinal). */
  .rdo-doc .rdo-sit { background: transparent !important; color: #000 !important; border: 1px solid #666; }

  /* Assinaturas: a faixa inteira fica junta na MESMA página (nunca um bloco numa folha e o
     outro na seguinte) e cada BLOCO (campo + nome + função + data) permanece inteiro. Na folha
     A4 os blocos ficam sempre LADO A LADO (colunas fixas por quantidade), legíveis em P&B. */
  .rdo-assinaturas { break-inside: avoid; page-break-inside: avoid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); border-top-color: #999; }
  .rdo-doc .rdo-assin-bloco { break-inside: avoid; page-break-inside: avoid; }
  .rdo-doc .rdo-assin-campo { border: 1px solid #999; background: transparent; }
  .rdo-doc .rdo-assin-linha { border-top-color: #555; }
  .rdo-doc .rdo-assin-rot, .rdo-doc .rdo-assin-dt { color: #444; }
  .rdo-doc .rdo-assin-fn { color: #333; }
  .rdo-doc .rdo-cab-cod { color: #000; }
}

/* ==========================================================================
   Gestão de Usuários (módulo Cadastros) — responsivo
   ========================================================================== */
/* situações do usuário */
.badge.ativo    { background: var(--verde-bg);   color: var(--verde); }
.badge.inativo  { background: var(--vermelho-bg); color: var(--vermelho); }
.badge.pendente { background: var(--amarelo-bg);  color: var(--warning-fg); }

/* lista de usuários */
.gu-list { display: flex; flex-direction: column; gap: 10px; }
.gu-item {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  border: 1px solid var(--borda); border-radius: 10px; padding: 12px 14px; background: var(--surface);
}
.gu-main { min-width: 0; flex: 1; }
.gu-nome { font-weight: 700; color: var(--grafite); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gu-sub { color: var(--cinza-texto); font-size: .85rem; margin-top: 2px; word-break: break-word; }
.gu-meta { color: var(--cinza-texto); font-size: .78rem; margin-top: 4px; }
.gu-acoes { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 560px) {
  .gu-item { flex-direction: column; align-items: stretch; }
  .gu-acoes { justify-content: stretch; }
  .gu-acoes .btn { flex: 1; }
}

/* situação no formulário */
.gu-sit-info { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* acordeão de permissões */
.gu-acc { border: 1px solid var(--borda); border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.gu-acc > summary {
  cursor: pointer; padding: 11px 14px; font-weight: 700; color: var(--azul);
  background: var(--azul-bg); list-style: none;
}
.gu-acc > summary::-webkit-details-marker { display: none; }
.gu-acc > summary::before { content: "▸ "; }
.gu-acc[open] > summary::before { content: "▾ "; }
.gu-acc-body { padding: 6px 12px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; }
@media (max-width: 640px) { .gu-acc-body { grid-template-columns: 1fr; } }
.gu-perm { display: flex; gap: 9px; align-items: flex-start; padding: 8px 4px; font-size: .88rem; cursor: pointer; }
.gu-perm input { margin-top: 3px; width: auto; }

/* permissões: contador por grupo, marcar/desmarcar, busca e destaque de sensíveis */
.gu-acc > summary { display: flex; align-items: center; gap: 8px; }
.gu-acc-cont { font-weight: 600; font-size: .85rem; }
.gu-acc-massa { grid-column: 1 / -1; display: flex; gap: 8px; margin: 2px 0 4px; flex-wrap: wrap; }
.gu-perm-sens { border-left: 3px solid var(--warning); padding-left: 8px; }
.gu-tag-sens {
  display: inline-block; font-size: .66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .3px; color: var(--warning-fg); background: var(--warning-bg);
  border-radius: 6px; padding: 1px 6px; margin-left: 6px; vertical-align: middle;
}
.gu-tag-dono {
  display: inline-block; font-size: .66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .3px; color: var(--accent-contrast); background: var(--accent);
  border-radius: 6px; padding: 1px 6px; margin-left: 6px; vertical-align: middle;
}
.gu-perm-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.gu-perm-toolbar input[type="search"] { flex: 1; min-width: 180px; }
.gu-perfil-badge { font-size: .8rem; font-weight: 600; margin-left: 6px; color: var(--accent-strong); }

/* obras vinculadas */
.gu-obra {
  display: flex; gap: 10px; align-items: center; justify-content: space-between;
  padding: 8px 4px; border-bottom: 1px solid var(--cinza-claro); flex-wrap: wrap;
}
.gu-obra-chk { display: flex; gap: 9px; align-items: center; cursor: pointer; flex: 1; min-width: 160px; }
.gu-obra-chk input { width: auto; }

/* senha temporária (mostrada só na criação) */
.gu-senha {
  font-family: ui-monospace, "Courier New", monospace; font-size: 1.2rem; font-weight: 800;
  letter-spacing: 1px; text-align: center; background: var(--cinza-claro);
  border: 1px dashed var(--borda); border-radius: 10px; padding: 12px; margin: 8px 0 12px; user-select: all;
}

/* histórico/auditoria */
.gu-audit { padding: 8px 4px; border-bottom: 1px solid var(--cinza-claro); font-size: .86rem; }
.gu-audit:last-child { border-bottom: 0; }

/* Gestão de Usuários › seção Athenas (situação, permissões agrupadas, credenciais sem token) */
.badge.gu-ath-sem_acesso       { background: var(--surface-2);  color: var(--text-secondary); }
.badge.gu-ath-acesso_liberado  { background: var(--info-bg);    color: var(--info-fg); }
.badge.gu-ath-cred_pendente    { background: var(--warning-bg); color: var(--warning-fg); }
.badge.gu-ath-cred_ativa       { background: var(--success-bg); color: var(--success-fg); }
.badge.gu-ath-cred_revogada    { background: var(--danger-bg);  color: var(--danger-fg); }
.gu-ath-mod { font-size: .85rem; font-weight: 600; }
.gu-ath-dl { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 4px 12px; margin: 8px 0 12px; font-size: .9rem; }
.gu-ath-dl dt { color: var(--text-secondary); }
.gu-ath-dl dd { margin: 0; overflow-wrap: anywhere; }
.gu-ath-grupos { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; }
.gu-ath-grupo h3, .gu-ath-h3 { font-size: .9rem; margin: 12px 0 2px; color: var(--text-secondary); }
.gu-ath-cred { padding: 8px 4px; border-top: 1px solid var(--border); }
.gu-ath-cred code { font-family: var(--font-mono); font-size: .85em; }
.gu-ath-acoes { margin-top: 6px; gap: 6px; }
.gu-ath-nota { font-size: .84rem; margin: 6px 0; }
.gu-ath-hist { margin-top: 10px; }
.gu-ath-hist summary { cursor: pointer; font-weight: 600; }
.gu-ath-token { font-family: var(--font-mono); font-size: .95rem; letter-spacing: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) { .gu-ath-dl, .gu-ath-grupos { grid-template-columns: 1fr; } .gu-ath-dl dd { margin-bottom: 6px; } }

/* ===== Grupo / sequência de apontamentos ("Próximo Lote") ===== */
.grupo-card { border: 1px solid var(--borda); border-left: 4px solid var(--azul); border-radius: 10px; margin-bottom: 8px; background: var(--surface); overflow: hidden; }
.grupo-card.aberto { box-shadow: var(--sombra); }
.grupo-head { display: flex; align-items: center; gap: 12px; padding: 12px; flex-wrap: wrap; }
.grupo-head .info { flex: 1; min-width: 200px; }
.grupo-head .info .t1 { font-weight: 700; font-size: .95rem; }
.grupo-head .info .t2 { color: var(--cinza-texto); font-size: .82rem; margin-top: 2px; }
.grupo-acoes { flex-wrap: wrap; }
.grupo-linhas { border-top: 1px dashed var(--borda); background: var(--surface-2); padding: 6px 10px 10px; }
.grupo-linha { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--cinza-claro); }
.grupo-linha:last-child { border-bottom: 0; }
.grupo-linha .info { flex: 1; min-width: 0; }
.grupo-linha .gl-1 { font-size: .88rem; }
.grupo-linha .gl-2 { font-size: .78rem; margin-top: 1px; }
.grupo-linha.sem-fim { background: var(--amarelo-bg); border-radius: 6px; }
/* Card de serviços SIMULTÂNEOS: mesmo layout do grupo/sequência, com acento da cor "simultâneo". */
.grupo-card.sim { border-left-color: var(--uc-fg); }
/* Card de JORNADA (vários apartamentos da mesma turma+serviços): acento dourado; os
   apartamentos aninhados ganham respiro e recuo sutil dentro do card expandido. */
.grupo-card.jornada { border-left-color: var(--accent, var(--dourado, #c8a24a)); }
.jornada-apts { border-top: 1px dashed var(--border); background: var(--surface-2); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.jornada-apts .grupo-card.sim { margin-bottom: 0; }

/* ===== Editor em massa ("Editar todos") — grade estilo planilha ===== */
.me-wrap { font-size: .9rem; }
.me-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--borda); border-radius: 8px; margin: 8px 0; }
.me-grade { width: 100%; border-collapse: collapse; min-width: 560px; }
.me-grade th { position: sticky; top: 0; background: var(--azul-bg); color: var(--azul); font-size: .76rem; padding: 8px 8px; text-align: left; white-space: nowrap; }
.me-grade td { padding: 6px 8px; border-bottom: 1px solid var(--cinza-claro); vertical-align: middle; }
.me-grade tr.me-sel td { background: var(--azul-bg); }
.me-grade input[type=time], .me-grade select { padding: 6px 8px; min-height: 40px; }
.me-grade .me-lote { font-weight: 700; white-space: nowrap; }
.me-grade .me-dur { font-weight: 800; color: var(--azul); white-space: nowrap; }
.me-grade .me-exec { color: var(--cinza-texto); font-size: .8rem; }
.me-grade .me-chk input { width: 20px; height: 20px; }
.me-bulk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--cinza-claro); border-radius: 8px; padding: 8px 10px; margin: 8px 0; font-size: .84rem; }

/* ==========================================================================
   Configurações → Aparência (seletor de tema com prévias)
   ========================================================================== */
.cfg-root { display: flex; flex-direction: column; gap: 20px; }
.cfg-sec-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.cfg-sec-ic { width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-strong); font-size: 1.05rem; }
.cfg-sec-head h3 { font-size: 1rem; color: var(--text-primary); }
.cfg-sec-head p { font-size: .82rem; color: var(--text-secondary); margin-top: 2px; line-height: 1.4; }

.cfg-tema-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cfg-tema-opt {
  position: relative; display: flex; flex-direction: column; gap: 9px; align-items: stretch;
  text-align: left; cursor: pointer; padding: 10px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--surface); font: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.cfg-tema-opt:hover { border-color: var(--accent-soft-border); background: var(--surface-hover); }
.cfg-tema-opt.sel { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cfg-tema-opt:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.cfg-tema-txt { display: flex; flex-direction: column; gap: 1px; }
.cfg-tema-txt b { font-size: .9rem; color: var(--text-primary); font-weight: 700; }
.cfg-tema-txt small { font-size: .74rem; color: var(--text-secondary); }
.cfg-tema-check {
  position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); color: var(--accent-contrast); font-size: .7rem; font-weight: 800;
  display: none; align-items: center; justify-content: center;
}
.cfg-tema-opt.sel .cfg-tema-check { display: flex; }

/* Mini-prévia (cores fixas: o cartão mostra o tema real, não o vigente) */
.cfg-prev { position: relative; width: 100%; height: 48px; border-radius: 9px; overflow: hidden; border: 1px solid var(--border); display: flex; }
.cfg-prev > i { position: absolute; }
.cfg-prev > .h { top: 0; left: 0; right: 0; height: 13px; }
.cfg-prev > .c { left: 8px; right: 8px; top: 20px; height: 16px; border-radius: 4px; }
.cfg-prev > .dot { right: 8px; bottom: 7px; width: 8px; height: 8px; border-radius: 50%; }
.cfg-prev-half { position: relative; flex: 1; }
.cfg-prev-half > i { position: absolute; }
.cfg-prev-half > .h { top: 0; left: 0; right: 0; height: 11px; }
.cfg-prev-half > .c { left: 5px; right: 5px; top: 15px; bottom: 6px; border-radius: 3px; }
.cfg-prev-half > .dot { right: 5px; bottom: 5px; width: 6px; height: 6px; border-radius: 50%; }
.cfg-prev-claro, .cfg-prev-half.claro { background: #FAFAF7; }
.cfg-prev-claro .h, .cfg-prev-half.claro .h { background: #1C2026; }
.cfg-prev-claro .c, .cfg-prev-half.claro .c { background: #fff; box-shadow: inset 0 0 0 1px #E5E2D8; }
.cfg-prev-claro .dot, .cfg-prev-half.claro .dot { background: #BE8A25; }
.cfg-prev-escuro, .cfg-prev-half.escuro { background: #1B1E20; }
.cfg-prev-escuro .h, .cfg-prev-half.escuro .h { background: #1F2225; box-shadow: inset 0 -1px 0 #2C2F32; }
.cfg-prev-escuro .c, .cfg-prev-half.escuro .c { background: #24272B; box-shadow: inset 0 0 0 1px #33363A; }
.cfg-prev-escuro .dot, .cfg-prev-half.escuro .dot { background: #DCB65E; }

@media (max-width: 520px) {
  .cfg-tema-grid { grid-template-columns: 1fr; }
  .cfg-tema-opt { flex-direction: row; align-items: center; }
  .cfg-prev { width: 74px; flex-shrink: 0; }
}
.me-bulk select { width: auto; min-width: 130px; display: inline-block; }
.me-erro { background: var(--vermelho-bg); color: var(--vermelho); border: 1px solid var(--vermelho); border-radius: 8px; padding: 8px 10px; font-size: .86rem; margin-top: 6px; }

/* ==========================================================================
   RASTREABILIDADE (audit trail) — subaba do Histórico
   ========================================================================== */
/* subnav do Histórico (abas internas de uma tela, não a navegação do módulo) */
.hist-subnav { display: flex; gap: 6px; overflow-x: auto; border-bottom: 1px solid var(--borda); margin: 0 0 16px; padding-bottom: 2px; }
.hist-subnav button { border: 0; background: transparent; color: var(--cinza-texto); padding: 10px 14px; border-radius: 10px 10px 0 0; font-weight: 700; font-size: .9rem; white-space: nowrap; cursor: pointer; border-bottom: 3px solid transparent; }
.hist-subnav button.active { color: var(--azul); border-bottom-color: var(--azul); background: var(--azul-bg); }

/* ---- Dashboard "Andamento da obra" (subaba do Histórico) — só tokens do Design System ---- */
.dash-filtro { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dash-filtro .field.hist-serv-sel, .dash-filtro > .svc-combo { flex: 1; min-width: min(100%, 320px); }
.svc-combo { width: 100%; }
.sp-grupo-item { background: var(--surface-2); }
.svc-combo-todos { font-weight: 700; }
.dash-hero { text-align: center; }
.dash-hero-label { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); }
.dash-hero-pct { font-size: 3rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--accent); line-height: 1.05; margin: 4px 0 12px; }   /* herói em extranegrito na fonte do sistema: contrasta com os títulos em DIN */
.dash-hero .bar { max-width: 520px; margin: 0 auto; }
.dash-hero-metodo { font-size: .82rem; margin: 12px auto 0; max-width: 640px; }
.dash-kpis { margin: 0 0 14px; }
.dash-serv-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.dash-ord { max-width: 190px; }
/* Lista de serviços = LINHAS separadas por hairline (não caixas dentro do cartão): 81 serviços
   deixavam de ser 81 molduras. Sob o cursor/foco, o mesmo cursor de leitura das tabelas
   (véu + traço dourado à esquerda). */
.dash-serv-lista { display: flex; flex-direction: column; gap: 0; }
.dash-serv { display: block; width: 100%; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 12px 14px; box-sizing: border-box; font: inherit; color: inherit; }
.dash-serv:last-child { border-bottom: 0; }
button.dash-serv { cursor: pointer; }
button.dash-serv:hover, button.dash-serv:focus-visible { background: var(--row-hover); box-shadow: inset 2px 0 0 var(--accent); outline: none; }
.dash-serv-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.dash-serv-nome { font-weight: 700; overflow-wrap: anywhere; min-width: 0; }
.dash-serv-grupo { font-size: .72rem; font-weight: 600; color: var(--text-muted); background: var(--surface-3); border-radius: var(--radius-pill); padding: 1px 8px; white-space: nowrap;
  display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }   /* grupo longo ("Esgoto completo - com caixas…") termina em … no celular — antes empurrava a linha 93 px para fora da tela */
.dash-serv-pct { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--accent-strong); flex-shrink: 0; }
.dash-serv-meta { font-size: .8rem; margin-top: 8px; }

/* ---- Subaba "Produção" (produção física por serviço × semana) — só tokens do Design System ---- */
.prod-nota { display: flex; gap: 10px; align-items: flex-start; font-size: .85rem; color: var(--text-secondary); }
.prod-nota-ic { font-size: 1.15rem; line-height: 1.25; flex-shrink: 0; }
.prod-filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.prod-filtros .field { flex: 1; min-width: 160px; }
.prod-filtros .prod-f-busca { flex: 2; min-width: 200px; }
.prod-tab-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.prod-tabela { width: 100%; border-collapse: collapse; }
.prod-tabela thead th { text-align: right; padding: 8px 10px; border-bottom: 2px solid var(--border); vertical-align: bottom; }
.prod-tabela .prod-th-serv { text-align: left; }
.prod-th-t { display: block; font-size: .82rem; font-weight: 700; color: var(--text-primary); }
.prod-th-s { display: block; font-size: .7rem; font-weight: 500; color: var(--text-muted); margin-top: 2px; }
.prod-tabela tbody td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.prod-tabela tbody tr:last-child td { border-bottom: 0; }
.prod-serv-nome { font-weight: 700; overflow-wrap: anywhere; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.prod-serv-meta { font-size: .74rem; margin-top: 3px; }
.prod-serv-un { background: var(--surface-3); border-radius: var(--radius-pill); padding: 1px 7px; }
.prod-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 1rem; }
.prod-num-forte { font-weight: 800; color: var(--accent); font-size: 1.15rem; }
.prod-cel-sub { display: block; font-size: .68rem; font-weight: 400; margin-top: 2px; }
.prod-vazio { text-align: center; padding: 20px 10px; }

/* mobile: a tabela vira cartões empilhados — sem rolagem horizontal a 375px */
@media (max-width: 640px) {
  .prod-tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .prod-tabela, .prod-tabela tbody, .prod-tabela tr, .prod-tabela td { display: block; width: 100%; box-sizing: border-box; }
  .prod-tabela tbody tr { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); padding: 4px 6px; margin-bottom: 12px; }
  .prod-tabela tbody td { border-bottom: 1px dashed var(--border); text-align: right; padding: 8px 8px; overflow: hidden; }
  .prod-tabela tbody td::before { content: attr(data-label); float: left; font-size: .76rem; font-weight: 600; color: var(--text-muted); }
  .prod-tabela tbody td.prod-serv { text-align: left; }
  .prod-tabela tbody td.prod-serv::before { content: ''; display: none; }
  .prod-cel-sub { text-align: right; }
}

/* filtros compactos (grade responsiva) */
.aud-filtros-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 12px; }
.aud-filtros .aud-busca { grid-column: 1 / -1; }
@media (min-width: 700px) { .aud-filtros .aud-busca { grid-column: auto; min-width: 220px; } }

/* tabela de eventos — densa, rolável na horizontal em telas pequenas */
.aud-table { border-collapse: collapse; width: 100%; min-width: 620px; font-size: .86rem; }
.aud-table thead th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; color: var(--cinza-texto); border-bottom: 2px solid var(--borda); padding: 6px 8px; position: sticky; top: 0; background: var(--card); }
.aud-table td { padding: 7px 8px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.aud-table .aud-ts { white-space: nowrap; color: var(--cinza-texto); font-variant-numeric: tabular-nums; }
.aud-table .aud-reg { color: var(--grafite); }
.aud-row { cursor: pointer; }
.aud-row:hover, .aud-grupo-head:hover { background: var(--azul-bg); }
.aud-row:focus-visible, .aud-grupo-head:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }
.aud-filho td:first-child { padding-left: 22px; border-left: 3px solid var(--azul-bg); }
.aud-grupo-head { cursor: pointer; background: var(--cinza-claro); }
.aud-grupo-head .aud-caret { color: var(--azul); font-weight: 700; }

/* selo de ação (cor discreta por tipo) */
.aud-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap; border: 1px solid transparent; }
.aud-criado    { background: var(--verde-bg);    color: var(--verde);    border-color: var(--verde); }
.aud-concluido { background: var(--verde-bg);    color: var(--verde);    border-color: var(--verde); }
.aud-alterado  { background: var(--azul-bg);     color: var(--azul);     border-color: var(--azul); }
.aud-excluido  { background: var(--vermelho-bg); color: var(--vermelho); border-color: var(--vermelho); }
.aud-reaberto  { background: var(--laranja-bg);  color: var(--laranja);  border-color: var(--laranja); }
.aud-encerrado { background: var(--cinza-claro); color: var(--cinza-texto); border-color: var(--borda); }
.aud-importado { background: var(--amarelo-bg);  color: var(--amarelo);  border-color: var(--amarelo); }

/* detalhe (modal) */
.aud-det-grid { display: grid; gap: 2px 12px; }
.aud-det-linha { display: flex; gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--borda); flex-wrap: wrap; }
.aud-det-rot { min-width: 150px; color: var(--cinza-texto); font-size: .82rem; font-weight: 600; }
.aud-det-val { color: var(--grafite); }
.aud-det-sec { margin-top: 14px; }
.aud-det-sec h4 { font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; color: var(--cinza-texto); margin-bottom: 6px; }
.aud-excluido-sec h4 { color: var(--vermelho); }
.aud-diff { display: flex; gap: 10px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--borda); flex-wrap: wrap; }
.aud-diff-campo { min-width: 140px; font-weight: 600; color: var(--grafite); font-size: .88rem; }
.aud-diff-vals { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.aud-antes { color: var(--cinza-texto); text-decoration: line-through; text-decoration-color: var(--vermelho); }
.aud-seta { color: var(--azul); font-weight: 700; }
.aud-depois { color: var(--verde); font-weight: 600; }
.aud-tec { margin-top: 14px; font-size: .82rem; }
.aud-tec summary { cursor: pointer; color: var(--cinza-texto); }
.aud-tec-body { margin-top: 8px; }
.aud-tec-body pre { background: var(--cinza-claro); border-radius: 8px; padding: 8px; overflow-x: auto; font-size: .74rem; white-space: pre-wrap; word-break: break-word; margin-top: 6px; }

/* ===================== LOCAIS — gerenciador em árvore ===================== */
/* Tudo via tokens do Design System (tema-aware). Componente do modal "Estrutura
   completa de locais" (locais-arvore-ui.js). */
.loc-aviso { background: var(--warning-bg); color: var(--warning-fg); border: 1px solid var(--warning); border-radius: var(--radius-sm); padding: 8px 10px; font-size: .85rem; margin-bottom: 10px; }
.loc-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0 10px; }
.loc-busca { flex: 1 1 220px; min-width: 160px; padding: .45rem .55rem; }
.loc-fsel { flex: 0 1 auto; padding: .45rem .5rem; }
.loc-chk { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; color: var(--text-secondary); white-space: nowrap; }
.loc-chk input { width: auto; }
/* Sem altura fixa/rolagem PRÓPRIA: a árvore cresce e QUEM rola é a página (uma barra
   vertical só). Antes tinha max-height+overflow:auto → 2ª barra redundante dentro do painel. */
.loc-tree { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); padding: 4px 0; }
.loc-row { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-bottom: 1px solid var(--border); }
.loc-row:last-child { border-bottom: 0; }
.loc-row:hover { background: var(--surface-hover); }
.loc-row.loc-inativo { opacity: .55; }
.loc-caret { flex: 0 0 auto; width: 22px; height: 22px; border: 0; background: transparent; color: var(--text-secondary); cursor: pointer; font-size: .7rem; border-radius: var(--radius-sm); }
.loc-caret:hover { background: var(--surface-2); color: var(--text-primary); }
.loc-caret-vazio { visibility: hidden; cursor: default; }
.loc-ic { flex: 0 0 auto; font-size: .95rem; }
.loc-nome { flex: 1 1 auto; min-width: 0; text-align: left; border: 0; background: transparent; color: var(--text-primary); cursor: pointer; font-size: .9rem; font-weight: 600; padding: 2px 4px; border-radius: var(--radius-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loc-nome:hover { background: var(--accent-soft); color: var(--accent-strong); }
.loc-badge { flex: 0 0 auto; font-size: .68rem; color: var(--text-secondary); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 1px 8px; }
/* contador de sub-locais (leitura de "estrutura" num relance) */
.loc-count { flex: 0 0 auto; font-size: .66rem; color: var(--text-muted); background: var(--surface-2); border-radius: var(--radius-pill); padding: 1px 7px; min-width: 20px; text-align: center; font-variant-numeric: tabular-nums; }
/* menu de ações do nó (⋯) — discreto, ganha destaque no hover; sempre visível no toque */
.loc-menu-btn { flex: 0 0 auto; width: 28px; height: 28px; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; border-radius: var(--radius-sm); font-size: 1.1rem; line-height: 1; opacity: .55; transition: opacity .12s, background .12s, color .12s; }
.loc-row:hover .loc-menu-btn { opacity: 1; }
.loc-menu-btn:hover { background: var(--accent-soft); color: var(--accent-strong); opacity: 1; }
@media (hover: none) { .loc-menu-btn { opacity: .8; } }
.loc-tag { flex: 0 0 auto; font-size: .64rem; border-radius: var(--radius-pill); padding: 1px 7px; white-space: nowrap; }
.loc-tag-org { color: var(--text-muted); background: var(--surface-2); }
.loc-tag-leg { color: var(--info-fg); background: var(--info-bg); }
.loc-tag-arq { color: var(--warning-fg); background: var(--warning-bg); }
.loc-acoes-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.loc-chk-field { display: flex; align-items: center; gap: 8px; font-size: .88rem; margin: 8px 0; }
.loc-chk-field input { width: auto; }
.loc-chk-row { display: flex; gap: 16px; flex-wrap: wrap; margin: 4px 0; }
/* barra de ações principais no topo da árvore (Novo · Gerar · Importar · Modelo) */
.loc-acoes-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 10px; }

/* ---- Seletor de ÍCONES (emoji) — locais-icone-picker.js ---- */
/* Só tokens do Design System (tema-aware). Gatilho no formulário + popover
   (camada modal2) com busca, categorias, recentes e grade tocável. */
.iconpk-field { display: block; margin-bottom: 12px; }
.iconpk-field > span { display: block; font-size: .85rem; color: var(--text-secondary); font-weight: 600; margin-bottom: 5px; }
.iconpk-trigger { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface);
  color: var(--text-primary); cursor: pointer; font-size: 1rem; }
.iconpk-trigger:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.iconpk-trigger:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--accent); }
.iconpk-trigger-emoji { flex: 0 0 auto; font-size: 1.5rem; line-height: 1; width: 1.9rem; text-align: center; }
.iconpk-trigger-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text-secondary); font-size: .92rem; }
.iconpk-trigger-caret { flex: 0 0 auto; color: var(--text-muted); font-size: .8rem; }

.iconpk { display: flex; flex-direction: column; gap: 10px; }
.iconpk-topo { position: sticky; top: 0; z-index: 2; background: var(--surface); display: flex; flex-direction: column;
  gap: 10px; padding-bottom: 8px; }
.iconpk-busca-wrap { position: relative; }
.iconpk-busca-ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: .95rem; opacity: .7; pointer-events: none; }
.iconpk-busca { padding-left: 34px; }
.iconpk-tabs { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; scrollbar-width: thin; }
.iconpk-tab { flex: 0 0 auto; padding: 5px 12px; border-radius: var(--radius-pill); border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-secondary); font-size: .82rem; cursor: pointer; white-space: nowrap; }
.iconpk-tab:hover { background: var(--surface-hover); color: var(--text-primary); }
.iconpk-tab.ativo { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); font-weight: 600; }
.iconpk-tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.iconpk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; min-height: 120px; align-content: start; }
.iconpk-cel { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; min-height: 46px; padding: 0;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); cursor: pointer;
  transition: background .1s, border-color .1s; }
.iconpk-cel:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.iconpk-cel:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--accent); }
.iconpk-cel.sel { background: var(--accent-soft); border-color: var(--accent); }
.iconpk-cel-emoji { font-size: 1.55rem; line-height: 1; }
.iconpk-vazio { grid-column: 1 / -1; color: var(--text-muted); font-size: .88rem; padding: 18px 6px; text-align: center; }
.iconpk-rodape { display: flex; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 10px; }
.iconpk-outro { display: flex; gap: 8px; align-items: center; }
.iconpk-outro[hidden] { display: none; }
.iconpk-outro-inp { flex: 1 1 auto; }
.iconpk-outro-prev { flex: 0 0 auto; font-size: 1.5rem; width: 2rem; text-align: center; }
@media (max-width: 520px) {
  .iconpk-grid { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); }
  .iconpk-cel { min-height: 48px; }
}

/* ---- Importador em lote (wizard) ---- */
.locimp-passos { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .78rem; color: var(--text-muted); margin: 2px 0 12px; }
.locimp-passo { padding: 2px 10px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--border); white-space: nowrap; }
.locimp-passo.on { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent); font-weight: 600; }
.locimp-passo.feito { color: var(--success); }
.locimp-seta { color: var(--text-muted); }
.locimp-opts { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 6px 0 10px; }
.locimp-mapa table { min-width: 100%; }
.locimp-colsel { width: 100%; padding: .3rem; font-size: .82rem; }
.locimp-coltit { font-size: .68rem; color: var(--text-muted); margin-top: 3px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.locimp-resumo { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin: 8px 0 4px; }
.locimp-legenda { font-size: .74rem; margin-bottom: 6px; }
.locimp-arv { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); padding: 4px 0; }
.locimp-row { display: flex; align-items: center; gap: 6px; padding: 3px 8px; font-size: .86rem; }
.locimp-mark { flex: 0 0 auto; width: 18px; text-align: center; font-weight: 700; }
.locimp-ic { flex: 0 0 auto; }
.locimp-nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.locimp-cod { font-size: .72rem; }
.locimp-motivo { font-size: .72rem; color: var(--warning-fg); }
.locimp-novo .locimp-mark { color: var(--success); }
.locimp-existente .locimp-mark, .locimp-duplicata .locimp-mark { color: var(--text-muted); }
.locimp-existente, .locimp-duplicata { opacity: .72; }
.locimp-conflito .locimp-mark { color: var(--warning-fg); }
.locimp-conflito { background: var(--warning-bg); }
.locimp-erro .locimp-mark { color: var(--danger-fg); }
.locimp-erro { background: var(--danger-bg); }
.locimp-erro .locimp-nome { text-decoration: line-through; }
.locimp-avisos { margin-top: 8px; font-size: .82rem; }
.locimp-avisos summary { cursor: pointer; color: var(--text-secondary); }
/* prévia da importação hierárquica de serviços (Conjunto → Grupo → Serviço) */
.servimp-row { display: flex; align-items: center; gap: 6px; padding: 2px 8px; font-size: .84rem; border-bottom: 1px solid var(--surface-2); }
.servimp-row:last-child { border-bottom: 0; }
.servimp-ic { flex: 0 0 auto; }
.servimp-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* checkbox de seleção hierárquica no cabeçalho de conjunto/grupo da árvore de Serviços */
.sc-chk, .sg-chk { width: auto; margin: 0 2px 0 0; flex: 0 0 auto; cursor: pointer; }
@media (max-width: 520px) {
  .loc-badge, .loc-tag-org { display: none; }   /* no celular, prioriza nome + estado; tipo fica no menu de ações */
}

/* =====================================================================
   ALERTA DE APONTAMENTOS PENDENTES DE DIAS ANTERIORES (Apontamento › Mapa)
   Modal em coluna: cabeçalho + resumo fixos, lista rolável, ações fixas
   embaixo (§17). Grupos por dia (accordion). Só tokens do Design System.
   ===================================================================== */
.modal.pend-modal { display: flex; flex-direction: column; max-width: 640px; max-height: 92vh; max-height: 92dvh; overflow: hidden; }
.pend-modal .pend-head { flex: 0 0 auto; }
.pend-modal .pend-head h3 { margin-bottom: 6px; }
.pend-modal .pend-head .sub { margin: 0 0 4px; }
.pend-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; margin: 8px -4px 0; padding: 2px 4px; display: flex; flex-direction: column; gap: 10px; }
.pend-foot { flex: 0 0 auto; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; padding-top: 12px; margin-top: 10px; border-top: 1px solid var(--border, var(--borda)); }
.pend-grupo { flex: 0 0 auto; border: 1px solid var(--border, var(--borda)); border-radius: var(--radius-md, 10px); overflow: hidden; background: var(--surface, var(--card)); }
.pend-grupo-head { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: transparent; border: 0; cursor: pointer; text-align: left; font: inherit; color: var(--text-primary, inherit); }
.pend-grupo-head:hover { background: var(--surface-2, var(--cinza-claro)); }
.pend-grupo-tit { font-weight: 700; flex: 1 1 auto; min-width: 0; }
.pend-grupo-chev { opacity: .55; font-size: .9rem; flex: 0 0 auto; }
.pend-grupo-corpo { padding: 4px 10px 10px; display: flex; flex-direction: column; gap: 8px; }
.pend-grupo-corpo .lanc-item { margin: 0; }
/* Modal de compromisso (abre pelo "Resolver"): coluna com corpo rolável + ações fixas. */
.modal.comp-modal { display: flex; flex-direction: column; max-width: 520px; max-height: 92vh; max-height: 92dvh; overflow: hidden; }
.comp-modal .pend-head { flex: 0 0 auto; }
.comp-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-top: 4px; }
.comp-body input[type="date"] { font: inherit; padding: 8px 10px; border: 1px solid var(--border, var(--borda)); border-radius: var(--radius-md, 8px); background: var(--surface, var(--card)); color: var(--text-primary, inherit); }