/*
 * Visual comum do início (index.html) e dos menus de módulo (22/10/2026).
 * As telas são organizadas por área, como uma planta: a área numa coluna à esquerda e os
 * blocos dela à direita; no celular e no app Android, cada área vira uma lista agrupada.
 * Cor: o vermelho da Shiva é a marca e a SELEÇÃO (aba, filtro, item escolhido: classes cv-sel-*),
 * cada tela tem a sua cor de ícone e âmbar marca o que espera alguém.
 * A barra de cima é o vermelho da Shiva (#E31320, o da logo atual).
 * Quem monta tudo é o curvy-menu.js.
 */
:root {
    /* fundo branco, como o material da Shiva (até 22/10 era cinza-azulado #edf0f3) */
    --paper: #ffffff; --tile: #ffffff; --ink: #18212c; --ink2: #4a5868; --ink3: #7a8796;
    --line: #d3dae2; --line2: #e4e9ee; --brand: #e31320; --brand-soft: #fdeaea; --brand-ink: #a10d17;
    --wait: #b45309; --wait-soft: #fdf1df; --test: #5b6b7c; --test-soft: #e9eef3;
    --shiva: #e31320;
}
html.dark {
    --paper: #0f141b; --tile: #171e28; --ink: #e7ecf1; --ink2: #a9b5c2; --ink3: #7d8a98;
    --line: #2a3441; --line2: #212a35; --brand: #f0545a; --brand-soft: #3a1518; --brand-ink: #ffb3b5;
    --wait: #f0a243; --wait-soft: #3a2a12; --test: #9fb0c1; --test-soft: #232c37;
    --shiva: #b8161a;
}
html:has(> body.cv) { background: var(--paper); }
body.cv { margin: 0; min-height: 100vh; background: var(--paper); color: var(--ink); font: 15px/1.5 "IBM Plex Sans", system-ui, sans-serif; }
.cv * { box-sizing: border-box; }

/* ---- barra de cima ---- */
/* --safe-area-inset-top: o Capacitor 8 injeta no app (a WebView do Android nem sempre preenche o env()); ver theme-toggle.js */
.cv-topo { background: var(--shiva); color: #fff; padding-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px)); }
/* A barra fica presa no alto ao rolar a página (web e app). z 40: abaixo dos modais (z-50) e acima
   das faixas grudadas das telas. A altura dela vai em --cv-topo-h (curvy-menu.js e curvy-moldura.js),
   para a faixa que a tela já prendia no topo parar logo abaixo da barra: classe cv-abaixo-topo. */
.cv-topo { position: sticky; top: 0; z-index: 40; }
/* A barra é um <header>: regras soltas de "header" das telas (coletor, enderecamento: flex, h1 laranja) não pegam nela */
.cv-topo { display: block; min-height: 0; }
.cv-abaixo-topo { top: var(--cv-topo-h, 0px) !important; }
.cv-topo-in { max-width: 1180px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 16px; }
.cv-marca { flex: none; display: block; line-height: 0; color: #fff; text-decoration: none; border-radius: 6px; }
.cv-marca img { display: block; height: 44px; width: auto; }
.cv-titulo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cv-titulo h1 { color: #fff; margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Trilha (curvy-trilha.js): Início › Menu PCP › Guia de Produção, cada parte um link; a última é o h1 da tela */
.cv-trilha { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.cv-trilha > a, .cv-trilha-sub a { flex: none; color: rgba(255,255,255,.82); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; border-radius: 4px; }
.cv-trilha-sub { display: contents; }
.cv-trilha-sub[hidden] { display: none; }
.cv-trilha-sep { flex: none; color: rgba(255,255,255,.55); font-size: 15px; }
.cv-trilha h1 { min-width: 0; }
.cv-trilha h1 a { color: inherit; text-decoration: none; }
.cv-trilha a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.cv-trilha a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cv-topo .flex.items-center.gap-4 { display: flex; align-items: center; min-width: 0; }   /* onde o branch-selector.js se monta */
.cv-quem { margin-left: auto; flex: none; display: flex; align-items: center; gap: 6px; }
.cv-quem-nome { font-size: 14px; color: rgba(255,255,255,.82); margin-left: 8px; text-align: right; line-height: 1.25; }
.cv-quem-nome b { display: block; color: #fff; font-weight: 600; }
.cv-logo { display: block; height: 36px; width: auto; padding-left: 14px; margin-left: 4px; border-left: 1px solid rgba(255,255,255,.35); box-sizing: content-box; }
.cv-btn-ic { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 8px; border: 1px solid rgba(255,255,255,.4); background: transparent; color: #fff; cursor: pointer; text-decoration: none; }
.cv-btn-ic:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.7); }
.cv-btn-ic svg { width: 18px; height: 18px; }
.cv-marca:focus-visible, .cv-btn-ic:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ---- corpo ---- */
.cv-planta { max-width: 1180px; margin: 0 auto; padding: 8px 20px 48px; }
.cv-intro { max-width: 1180px; margin: 0 auto; padding: 18px 20px 0; color: var(--ink2); font-size: 14.5px; }
.cv-acoes { max-width: 1180px; margin: 0 auto; padding: 14px 20px 0; display: flex; gap: 8px; flex-wrap: wrap; }
.cv-acao { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--tile); color: var(--ink); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; }
.cv-acao:hover { border-color: var(--brand); }
.cv-acao:disabled { opacity: .6; cursor: default; }
.cv-acao svg { width: 17px; height: 17px; color: var(--ink2); }

.cv-area { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 26px 0; border-top: 1px solid var(--line); }
.cv-area:first-child { border-top: 0; }
.cv-area.so { grid-template-columns: 1fr; }          /* menu com um grupo só: sem a coluna da área */
.cv-area.so .cv-area-nome { display: none; }
.cv-area-nome { position: sticky; top: 16px; align-self: start; }
.cv-area-nome h2 { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.cv-area-nome p { margin: 4px 0 0; font-size: 13.5px; color: var(--ink3); max-width: 22ch; }
.cv-blocos { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; }

.cv-bloco { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 118px; padding: 14px 16px; background: var(--tile); border: 1px solid var(--line); border-radius: 10px; color: inherit; text-decoration: none; cursor: pointer; }
.cv-bloco:hover { border-color: var(--brand); }
.cv-bloco:focus-visible, .cv-bloco a:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.cv-bloco-topo { display: flex; align-items: center; gap: 10px; }
.cv-bloco h3 { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; }
.cv-bloco h3 a { color: inherit; text-decoration: none; }
.cv-bloco p { margin: 0; font-size: 14px; color: var(--ink2); line-height: 1.4; }
.cv-bloco .cv-fora { margin-left: auto; color: var(--ink3); }
.cv-bloco .cv-fora svg { width: 15px; height: 15px; }
.cv-bloco.modulo { min-height: 132px; }
.cv-bloco.modulo h3 { font-size: 17px; }
.cv-extra { font-size: 13px; color: var(--ink3); }
.cv-extra b { color: var(--ink2); font-weight: 600; }

/* Cada tela tem a sua cor: --h é a matiz OKLCH (fora da faixa do âmbar das pendências). */
.cv-ic { --h: 260; flex: none; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center;
         color: oklch(0.52 0.15 var(--h)); background: oklch(0.95 0.035 var(--h)); }
html.dark .cv-ic { color: oklch(0.80 0.12 var(--h)); background: oklch(0.30 0.06 var(--h)); }
.cv-ic svg { width: 18px; height: 18px; }

.cv-marcas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.cv-espera { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--wait-soft); color: var(--wait); font-size: 13px; font-weight: 600; text-decoration: none; }
.cv-espera b { font-size: 15px; font-variant-numeric: tabular-nums; }
a.cv-espera:hover { text-decoration: underline; }
.cv-selo { padding: 2px 8px; border-radius: 999px; background: var(--test-soft); color: var(--test); font-size: 12.5px; font-weight: 500; }

.cv-vazio { max-width: 640px; margin: 48px auto; text-align: center; color: var(--ink2); }
.cv-carregando { padding: 60px 0; text-align: center; color: var(--ink3); }

/* ---- diálogo (alterar senha e afins) ---- */
dialog.cv-dlg { border: 0; border-radius: 14px; padding: 0; width: min(440px, calc(100vw - 32px)); background: var(--tile); color: var(--ink); }
dialog.cv-dlg::backdrop { background: rgba(0, 0, 0, .55); }
dialog.cv-dlg form { padding: 20px; display: grid; gap: 12px; }
dialog.cv-dlg h3 { margin: 0; font-size: 18px; }
dialog.cv-dlg label { display: grid; gap: 4px; font-size: 13.5px; font-weight: 500; color: var(--ink2); }
dialog.cv-dlg input { font: inherit; font-size: 16px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; }
dialog.cv-dlg .cv-dlg-erro { color: #b91c1c; font-size: 14px; }
html.dark dialog.cv-dlg .cv-dlg-erro { color: #fca5a5; }
dialog.cv-dlg .cv-dlg-ok { color: #15803d; font-size: 14px; }
dialog.cv-dlg .cv-dlg-botoes { display: flex; justify-content: flex-end; gap: 8px; }
.cv-dlg .cv-acao.pri { background: var(--brand); border-color: var(--brand); color: #fff; }

/*
 * Celular e app Android (Capacitor), tela vertical: cada área vira uma lista agrupada, uma linha
 * por tela, como as configurações do Android. Toque de 56 px, descrição numa linha só.
 */
@media (max-width: 760px) {
    body.cv { padding-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)); }
    .cv-topo-in { padding: 10px 16px; gap: 10px; }
    .cv-marca img { height: 36px; }
    .cv-titulo h1 { font-size: 18px; }
    /* no celular a trilha mostra só o degrau de cima (o Voltar ao lado já leva a ele) */
    .cv-trilha > a:not(:nth-last-of-type(1)), .cv-trilha > a:not(:nth-last-of-type(1)) + .cv-trilha-sep { display: none; }
    .cv-trilha > a, .cv-trilha-sub a { font-size: 13px; max-width: 30vw; overflow: hidden; text-overflow: ellipsis; }
    .cv-quem { gap: 6px; }
    .cv-quem-nome { display: none; }
    body[data-cv-filial] .cv-quem-nome { display: block; font-size: 12px; margin-left: 4px; }   /* coletor: quem e qual filial */
    .cv-logo { height: 30px; padding-left: 4px; border-left: 0; flex: none; }
    .cv-topo.modulo .cv-logo { display: none; }      /* nos menus, no celular, o espaço é do título */
    .cv-btn-ic { width: 44px; height: 44px; }
    #theme-toggle-btn { display: none; }            /* não cabe tudo em ~400 px: o tema fica como está */
    /* seletor de filial (branch-selector.js): só o nome, numa linha */
    #branch-dropdown-trigger { padding: 6px 8px; }
    #branch-dropdown-trigger .flex-col > span:first-child { display: none; }
    #branch-dropdown-trigger .flex-col > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34vw; display: block; }
    #branch-dropdown-trigger .flex-col, #branch-selector-wrapper, #branch-dropdown-trigger { min-width: 0; }
    .cv-topo.modulo #branch-selector-wrapper { display: none; }   /* nos menus a filial aparece só no início */

    .cv-intro, .cv-acoes { padding-left: 16px; padding-right: 16px; }
    .cv-planta { padding: 4px 16px 32px; }
    .cv-area, .cv-area.so { grid-template-columns: 1fr; gap: 8px; padding: 18px 0 6px; border-top: 0; }
    .cv-area-nome { position: static; padding: 0 4px; }
    .cv-area-nome h2 { font-size: 17px; }
    .cv-area-nome p { display: none; }
    .cv-blocos { grid-template-columns: minmax(0, 1fr); gap: 0; background: var(--tile); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
    .cv-bloco, .cv-bloco.modulo { min-width: 0; min-height: 56px; border: 0; border-radius: 0; border-top: 1px solid var(--line2); padding: 11px 14px; gap: 2px; }
    .cv-blocos > .cv-bloco:first-child { border-top: 0; }
    .cv-bloco:hover { border-color: var(--line2); }
    .cv-bloco:active { background: var(--brand-soft); }
    .cv-bloco h3, .cv-bloco.modulo h3 { font-size: 16px; }
    .cv-bloco p { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 42px; }
    .cv-marcas, .cv-extra { padding-left: 42px; }
    .cv-marcas { padding-top: 4px; }
}
@media (prefers-reduced-motion: no-preference) {
    .cv-bloco { transition: border-color .12s; }
}

/* ---- moldura das telas internas (curvy-moldura.js) ---- */
[data-cv-escondido] { display: none !important; }
body.cv-moldura { font-family: "IBM Plex Sans", system-ui, sans-serif; background: var(--paper); }
html.dark body.cv-moldura { background: var(--paper); }
html:has(> body.cv-moldura) { background: var(--paper); }
/* o que sobrou do cabeçalho antigo (busca, exportar, filtros) vira uma faixa de ações */
.cv-faixa-antiga { justify-content: flex-end !important; }
.cv-topo.modulo + * { margin-top: 0; }
.cv-topo, .cv-topo * { box-sizing: border-box; }
/* a barra não sai em papel: várias telas imprimem a própria página (fichas, protocolos) */
@media print { .cv-topo { display: none !important; } }
/* selos ao vivo que estavam dentro do título antigo (TEMPO REAL, MÁQUINA DESCONECTADA…) */
.cv-selos-titulo { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.cv-selos-titulo > * { margin: 0 !important; font-size: 11px !important; }

/*
 * Seleção (aba ativa, filtro ligado, linha escolhida, ordenação ativa): vermelho da Shiva, o
 * mesmo --brand. As telas usam estas classes no lugar das classes índigo/azul do Tailwind (o
 * style.css não é recompilado desde 08/2026, então classe nova do Tailwind pode nem existir).
 *   cv-sel-cheio  fundo vermelho e texto branco (aba em pílula, botão de alternância ligado)
 *   cv-sel-texto  texto e borda vermelhos (aba sublinhada, ícone de ordenação, item ativo)
 *   cv-sel-suave  fundo vermelho claro com borda vermelha (linha ou card selecionado)
 */
.cv-sel-cheio { background-color: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important; }
.cv-sel-texto { color: var(--brand) !important; border-color: var(--brand) !important; }
.cv-sel-suave { background-color: var(--brand-soft) !important; border-color: var(--brand) !important; color: var(--brand-ink) !important; }