/*
 * Portal Preserve. CSS próprio, sem etapa de build.
 * Feito primeiro para o celular; a partir de 1024px vira menu lateral fixo.
 * Regras do PLANO.md (seção 2.9): toque de no mínimo 48px, campos com fonte de 16px,
 * contraste alto para leitura no sol, a página nunca rola para o lado.
 */

:root {
    /* Identidade visual em cores.css: o verde floresta é a cor principal, o verde-água os detalhes */
    --verde-900: var(--floresta);
    --verde-800: var(--floresta);
    --verde-700: var(--agua);         /* detalhes: abas, medidores, gráficos, bordas de destaque */
    --verde-100: var(--agua-suave);
    --verde-50:  #e7f4ef;

    --texto:       #111827;
    --texto-suave: #4b5563;
    /* --fundo, --superficie, --fundo-suave, --linha, --borda e --borda-campo vêm de cores.css */

    --perigo:       #b91c1c;
    --perigo-fundo: #fef2f2;
    --sucesso-fundo: #e7f4ef;

    --raio: 10px;
    --sombra: var(--sombra-leve);
    --toque: 48px;
    --topo: 56px;
    --atalhos: 64px;
    --lateral: 264px;
    --lateral-recolhida: 76px;

    --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

/* O atributo hidden vale mesmo em elementos com display próprio (ex.: .botao) */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--fonte);
    font-size: 16px;
    line-height: 1.5;
    color: var(--texto);
    background: var(--fundo);
    overflow-x: hidden;
}

a { color: var(--verde-800); }
h1, h2 { line-height: 1.25; margin: 0; }
button, input, select, textarea { font: inherit; }

/* Campos: fonte de 16px evita o zoom automático do iPhone */
input, select, textarea {
    font-size: 16px;
    width: 100%;
    min-height: var(--toque);
    padding: 10px 12px;
    border: 1px solid var(--borda-campo);
    border-radius: 8px;
    background: var(--superficie);
    color: var(--texto);
}

:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
}

.pular {
    position: absolute;
    left: -9999px;
    top: 8px;
    z-index: 100;
    padding: 12px 16px;
    background: var(--superficie);
    border-radius: 8px;
}
.pular:focus { left: 8px; }

/* ------------------------------------------------------------------ botões e avisos */

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--toque);
    padding: 10px 20px;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: var(--superficie);
    color: var(--texto);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.botao-principal {
    background: var(--verde-800);
    border-color: var(--verde-800);
    color: #fff;
}
.botao-principal:hover { background: var(--floresta-escuro); border-color: var(--floresta-escuro); }
.botao-largo { width: 100%; }

.botao-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--toque);
    height: var(--toque);
    flex: none;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font-size: 1.25rem;
    cursor: pointer;
}

.aviso {
    padding: 12px 16px;
    margin-bottom: 16px;
    border-radius: 8px;
    border: 1px solid;
}
.aviso-erro    { background: var(--perigo-fundo);  border-color: #fecaca; color: var(--perigo); }
.aviso-sucesso { background: var(--sucesso-fundo); border-color: var(--agua-suave); color: var(--verde-900); }

/* ------------------------------------------------------------------ login e páginas simples */

.pagina-simples {
    background: var(--fundo);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
/* Cabeçalho branco com linha fina (login e páginas sem menu) */
.topo-simples {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 64px;
    padding: 0 16px;
    background: var(--superficie);
    border-bottom: 1px solid var(--linha);
}
.topo-simples-voltar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--toque);
    font-weight: 600;
    text-decoration: none;
}
.simples {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}
.login {
    width: 100%;
    max-width: 400px;
}
.login-marca {
    text-align: center;
    color: var(--texto);
    margin-bottom: 24px;
}
.login-marca h1 { font-size: 1.75rem; color: var(--verde-900); }
.login-marca p { margin: 4px 0 0; color: var(--texto-suave); }
/* Logotipo no topo do login ("Preserve | Portal") e das telas de senha */
.logo.logo-titulo { flex-direction: column; gap: 10px; font-size: clamp(1.55rem, 7vw, 1.9rem); }
.logo.logo-titulo img { width: 64px; height: 64px; }
.logo.logo-pagina { margin-bottom: 12px; font-size: 1.3rem; }
.logo.logo-pagina img { width: 44px; height: 44px; }
.login-form {
    display: grid;
    gap: 16px;
    padding: 24px;
    background: var(--superficie);
    border-radius: 14px;
    border: 1px solid var(--borda);
    box-shadow: var(--sombra-leve);
}
.login-form p { margin: 0; text-align: center; }
.login-form .aviso { margin: 0; }
.login-links {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: grid;
    justify-items: center;
}
.login-links a, .login-em-breve {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--toque);
    color: var(--verde-800);
    font-weight: 600;
}
.login-em-breve { color: var(--texto-suave); font-weight: 500; }
.login-em-breve small {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--superficie);
    border: 1px solid var(--borda);
}
.plataforma-aviso { display: grid; gap: 12px; }

/* Esqueci minha senha, criar senha nova e troca obrigatória */
.login-esqueci {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: -12px;
    font-size: .9rem;
    font-weight: 600;
}
.esqueci-form { display: grid; gap: 16px; }
.esqueci-form p, .esqueci-texto { margin: 0; }
.esqueci-opcoes { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.esqueci-opcoes li {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    background: var(--fundo-suave);
    border: 1px solid var(--linha);
}
.esqueci-opcoes li > i { color: var(--verde-800); font-size: 1.2rem; margin-top: 2px; }
.esqueci-nota { margin: 0; font-size: .9rem; color: var(--texto-suave); }
.login-sair { margin: 16px 0 0; text-align: center; }
.botao-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--toque);
    padding: 0 12px;
    border: 0;
    background: none;
    color: var(--verde-800);
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}
.campo { display: grid; gap: 6px; }
.campo > span { font-weight: 600; }

/* ------------------------------------------------------------------ estrutura do portal (celular) */

.portal {
    padding-top: var(--topo);
}
.portal.com-atalhos {
    padding-bottom: calc(var(--atalhos) + env(safe-area-inset-bottom));
}

.barra-topo {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--topo);
    padding: 0 8px;
    background: var(--superficie);
    color: var(--verde-900);
    border-bottom: 1px solid var(--linha);
}
/* As telas de trabalho em tela cheia (PLANO 8.88; layout_tela_cheia): sem o menu e sem os atalhos; a barra fina no topo,
   com o título, o sininho e o "✕ Sair". Em todas as larguras */
.tela-cheia { --topo: 48px; }
.barra-fina {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--topo);
    padding: 0 8px 0 16px;
    background: var(--superficie);
    color: var(--texto);
    border-bottom: 1px solid var(--linha);
}
.barra-fina-titulo { flex: 1; min-width: 0; margin: 0; font-size: 1rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-fina-titulo span { font-size: .82rem; font-weight: 500; color: var(--texto-suave); }
.barra-fina-sair { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 36px; padding: 4px 14px; border: 1px solid var(--linha); border-radius: 999px;
    color: var(--texto); font-size: .9rem; font-weight: 700; text-decoration: none; }
.barra-fina-sair:hover, .barra-fina-sair:focus-visible { border-color: currentColor; }
.barra-titulo {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--texto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fundo-menu {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgb(0 0 0 / .5);
}

.lateral {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    width: min(86vw, 300px);
    background: var(--superficie);
    color: var(--verde-900);
    border-right: 1px solid var(--linha);
    transform: translateX(-100%);
    transition: transform .2s ease;
    overflow-y: auto;
    overscroll-behavior: contain;
}
/* Seletor de empresa do administrador geral */
.seletor-empresa { display: flex; align-items: center; gap: 6px; min-width: 0; }
.seletor-empresa label {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.seletor-empresa select { min-height: 40px; padding: 6px 8px; font-size: 16px; }
.seletor-lateral { margin: -4px 12px 8px; }
.seletor-lateral select { background: var(--superficie); color: var(--texto); border-color: var(--borda); font-size: .95rem; }
.seletor-lateral select option { color: var(--texto); }
@media (min-width: 1024px) {
    .menu-recolhido .seletor-lateral { display: none; }
}

/* Os blocos da barra nunca encolhem: quando o menu passa da altura da janela, a barra rola.
   (Sem isto, o topo encolhia e o botão de recolher/expandir ficava escondido sob o avatar.) */
.lateral > * { flex-shrink: 0; }
.menu-aberto .lateral { transform: translateX(0); }
.menu-aberto { overflow: hidden; }

.lateral-topo {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: var(--topo);
    padding: 4px 8px 4px 16px;
}
/* Logotipo "Preserve | Portal" no topo do menu (estilo em cores.css) */
.marca { flex: 1; min-width: 0; font-size: 1.12rem; gap: 8px; }
.marca img { width: 30px; height: 30px; }
.marca .logo-nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lateral .recolher { display: none; }

.lateral-usuario {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 12px 8px;
    padding: 12px;
    border-radius: var(--raio);
    background: var(--fundo-suave);
    border: 1px solid var(--linha);
    color: var(--texto);
}
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 50%;
    background: var(--verde-100);
    color: var(--verde-900);
    font-weight: 700;
}
.usuario-dados {
    display: grid;
    min-width: 0;
    font-size: .85rem;
}
.usuario-dados strong { font-size: .95rem; }
.usuario-dados span, .usuario-dados strong {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.usuario-dados span { color: var(--texto-suave); }

.menu {
    display: grid;
    gap: 2px;
    padding: 4px 8px 16px;
}
.menu-linha, .submenu-linha {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: var(--toque);
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--verde-900);
    text-align: left;
    text-decoration: none;
    font-size: 1rem;
    cursor: pointer;
}
.menu-linha:hover, .submenu-linha:hover { background: var(--fundo-suave); }
/* Item ativo: fundo verde claro e barra verde de 3 px à esquerda */
.menu-linha.ativo, .submenu-linha.ativo {
    background: var(--destaque-linha);
    box-shadow: inset 3px 0 0 var(--agua);
    color: var(--verde-900);
    font-weight: 700;
}
.menu-icone {
    display: inline-flex;
    justify-content: center;
    width: 24px;
    flex: none;
}
.menu-rotulo { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-seta { transition: transform .2s ease; }
.menu-grupo.aberto .menu-seta { transform: rotate(180deg); }

/* Plataforma: módulos ainda não construídos (sem link) e a troca de sistema */
.menu-em-breve { cursor: default; color: var(--texto-suave); }
.menu-em-breve:hover { background: transparent; }
.selo-em-breve {
    margin-left: auto;
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid var(--borda);
    background: var(--fundo-suave);
    color: var(--texto-suave);
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
}
.menu-outro-sistema { margin-top: 8px; border-top: 1px solid var(--linha); border-radius: 0; padding-top: 4px; }
@media (min-width: 1024px) {
    .menu-recolhido .selo-em-breve { display: none; }
}

/* Submenus em sanfona */
.submenu { display: none; padding-left: 16px; }
.menu-grupo.aberto .submenu { display: grid; gap: 2px; }

.menu-sair {
    margin: 8px 0 0;
    padding-top: 8px;
    border-top: 1px solid var(--linha);
}

.conteudo {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px;
    outline: none;
}

/* Atalhos no rodapé do celular */
.atalhos {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 30;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    height: calc(var(--atalhos) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--superficie);
    border-top: 1px solid var(--borda);
}
.atalhos a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: var(--toque);
    color: var(--texto-suave);
    text-decoration: none;
    font-size: .75rem;
    font-weight: 600;
}
.atalhos a i { font-size: 1.25rem; }
.atalhos a[aria-current="page"] { color: var(--verde-800); }

/* ------------------------------------------------------------------ conteúdo */

.pagina-cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 20px;
}
.pagina-cabecalho h1 { font-size: 1.5rem; }
.pagina-cabecalho p { margin: 4px 0 0; color: var(--texto-suave); }

.indicadores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.indicador {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 14px;
    align-items: center;
    padding: 16px;
    border-radius: var(--raio);
    background: var(--superficie);
    box-shadow: var(--sombra);
    color: var(--texto);
    text-decoration: none;
}
.indicador:hover { box-shadow: 0 4px 12px rgb(0 0 0 / .1); }
.indicador-icone {
    grid-row: span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--agua);
    color: #fff;   /* ícone branco sobre verde-água: 3,2:1 (mínimo de ícone 3:1) */
    font-size: 1.3rem;
}
.indicador-valor { font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
.indicador-rotulo { color: var(--texto-suave); font-size: .9rem; }
.indicador-critico .indicador-icone { background: var(--perigo-fundo); color: var(--perigo); }

.paineis {
    display: grid;
    gap: 16px;
}
.painel {
    padding: 16px;
    border-radius: var(--raio);
    background: var(--superficie);
    box-shadow: var(--sombra);
    min-width: 0;
}
.painel-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.painel-cabecalho h2 { font-size: 1.05rem; display: flex; gap: 8px; align-items: center; }
.painel-cabecalho a {
    display: inline-flex;
    align-items: center;
    min-height: var(--toque);
    font-weight: 600;
    white-space: nowrap;
}
.painel-vazio { margin: 8px 0; color: var(--texto-suave); }

.lista { list-style: none; margin: 0; padding: 0; }
.lista li {
    display: grid;
    gap: 2px;
    padding: 12px 0;
    border-top: 1px solid var(--linha);
}
.lista li:first-child { border-top: 0; }
.lista li > .selo { justify-self: start; }
.lista-principal { font-weight: 600; overflow-wrap: anywhere; }
.lista-detalhe { color: var(--texto-suave); font-size: .9rem; }

/* Cadastros aguardando aprovação (Administração › Empresas e aviso no Início) */
.painel-destaque { border-left: 4px solid #d97706; margin-bottom: 16px; }
.pendente-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; align-items: center; }
.pendente-aprovar { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 320px; }
.pendente-aprovar select { flex: 1 1 180px; width: auto; }
.aviso-pendentes { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.aviso-pendentes p { margin: 0; font-weight: 600; }
.oculto {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.estado-vazio {
    display: grid;
    justify-items: center;
    gap: 12px;
    max-width: 480px;
    margin: 48px auto;
    padding: 32px 24px;
    border-radius: var(--raio);
    background: var(--superficie);
    box-shadow: var(--sombra);
    text-align: center;
}
.estado-vazio h1 { font-size: 1.4rem; }
.estado-vazio p { margin: 0; color: var(--texto-suave); }
.estado-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--agua);
    color: #fff;   /* ícone branco sobre verde-água: 3,2:1 (mínimo de ícone 3:1) */
    font-size: 1.75rem;
}

/* ------------------------------------------------------------------ componentes dos módulos */

.aviso-info   { background: #eff6ff; border-color: #bfdbfe; color: #1e3a8a; }
.aviso-alerta { background: #fffbeb; border-color: #fde68a; color: #78350f; }

.pagina-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.atalhos-pagina { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

.botao-pequeno { min-height: 40px; padding: 6px 12px; font-size: .9rem; }
.botao-perigo { background: var(--perigo); border-color: var(--perigo); color: #fff; }
.form-em-linha { display: inline; margin: 0; }

/* Abas: rolam na horizontal dentro de si mesmas no celular (a página não) */
.abas {
    margin: -4px 0 20px;
    border-bottom: 1px solid var(--borda);
    overflow-x: auto;
    scrollbar-width: thin;
}
.abas ul { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.abas a {
    display: inline-flex;
    align-items: center;
    min-height: var(--toque);
    padding: 0 14px;
    border-bottom: 3px solid transparent;
    color: var(--texto-suave);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.abas a.ativo { color: var(--verde-900); border-bottom-color: var(--verde-700); }

.selo {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
}
.selo-neutro  { background: #e5e7eb; color: #374151; }
.selo-sucesso { background: var(--verde-100); color: var(--verde-900); }
.selo-info    { background: #dbeafe; color: #1e3a8a; }
.selo-alerta  { background: #fef3c7; color: #78350f; }
.selo-perigo  { background: #fee2e2; color: #991b1b; }

.texto-corrido { overflow-wrap: anywhere; }

/* Tabelas: no celular cada linha vira um cartão (rótulo do td em data-rotulo) */
.tabela-envoltorio { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; }
.tabela th, .tabela td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linha); }
.tabela th { font-size: .85rem; color: var(--texto-suave); font-weight: 700; border-bottom-color: var(--borda); }
/* Linhas alternadas e destaque sob o mouse, visíveis sobre o cartão branco */
.tabela tbody tr:nth-child(even) { background: var(--fundo-suave); }
.tabela tbody tr:hover { background: var(--destaque-linha); }
.tabela td.numero, .tabela th.numero { text-align: right; white-space: nowrap; }
.tabela a { font-weight: 600; }

@media (max-width: 719px) {
    .tabela-cartoes thead { display: none; }
    .tabela-cartoes, .tabela-cartoes tbody, .tabela-cartoes tr, .tabela-cartoes td { display: block; width: 100%; }
    .tabela-cartoes tr { padding: 12px 0; border-bottom: 1px solid var(--borda); }
    .tabela-cartoes td { padding: 2px 0; border: 0; }
    .tabela-cartoes td.numero { text-align: left; }
    .tabela-cartoes td[data-rotulo]::before {
        content: attr(data-rotulo) ": ";
        color: var(--texto-suave);
        font-size: .85rem;
    }
    .tabela-cartoes td:first-child { font-size: 1.05rem; }
}

/* Formulários */
.formulario { display: grid; gap: 16px; max-width: 760px; }
.form-grade { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.campo label, .campo-rotulo { font-weight: 600; }
.campo textarea { min-height: 96px; resize: vertical; }
.campo-ajuda { color: var(--texto-suave); font-size: .85rem; }
.campo-erro { color: var(--perigo); font-size: .9rem; font-weight: 600; }
.campo-com-erro input, .campo-com-erro select, .campo-com-erro textarea { border-color: var(--perigo); border-width: 2px; }
.obrigatorio { color: var(--perigo); }
.marcar {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--toque);
    cursor: pointer;
}
.marcar input { width: 24px; height: 24px; min-height: 0; flex: none; }
.form-botoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 8px;
    background: var(--superficie);
}
.zona-perigo { margin-top: 16px; }
.filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 16px; }
.filtros .campo { min-width: 180px; flex: 1; }

.grupo-campos { margin: 0; padding: 12px 16px 16px; border: 1px solid var(--borda); border-radius: 8px; display: grid; gap: 12px; }
.grupo-campos legend { padding: 0 6px; font-weight: 700; }
.marcar-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 4px 16px; }
.lista-perfis { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.lista-bucket { margin: 0; padding: 12px; background: var(--fundo); border-radius: 8px; overflow-x: auto; font-size: .85rem; }

/* Cartões (cursos, simuladores) */
.cartoes {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.cartao {
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 20px;
    border-radius: var(--raio);
    background: var(--superficie);
    box-shadow: var(--sombra);
    color: var(--texto);
    text-decoration: none;
    min-width: 0;
}
a.cartao:hover { box-shadow: 0 4px 12px rgb(0 0 0 / .1); }
.cartao-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--agua);
    color: #fff;   /* ícone branco sobre verde-água: 3,2:1 (mínimo de ícone 3:1) */
    font-size: 1.3rem;
}
.cartao-icone-grande { width: 64px; height: 64px; font-size: 1.8rem; }
.cartao-titulo { margin: 0; font-size: 1.15rem; font-weight: 700; }
.cartao-texto { margin: 0; color: var(--texto-suave); overflow-wrap: anywhere; }
.cartao-rodape { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--texto-suave); font-size: .9rem; }
.cartao-bloqueado { opacity: .75; }
.cartao-bloqueado .cartao-icone { background: #e5e7eb; color: #4b5563; }

/* Conteúdos de um curso */
.conteudos { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.conteudo { display: grid; gap: 8px; padding: 12px; }
/* A borda é só dos itens do curso (a área principal do portal também se chama .conteudo) */
.conteudos > .conteudo { border: 1px solid var(--linha); border-radius: 8px; }
.conteudo-inativo { opacity: .6; }
.conteudo-cabecalho { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.conteudo-tipo { color: var(--verde-800); }

/* Medidor (frequência): trilho num tom mais claro da mesma rampa do valor */
.medidor { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.medidor-barra { width: 96px; height: 8px; flex: none; }
.medidor-trilho { fill: var(--verde-100); }
.medidor-valor { fill: var(--verde-700); }

/* Gráfico de tentativas: uma série, uma cor (verde-água #1FA38A, 3,2:1 contra a superfície branca: mínimo de elementos gráficos 3:1) */
.grafico-titulo { margin: 0 0 4px; color: var(--texto-suave); font-size: .85rem; }
.grafico { overflow-x: auto; padding-bottom: 4px; }
.grafico-svg { display: block; max-width: none; }
.grafico-grade { stroke: #e5e7eb; stroke-width: 1; shape-rendering: crispEdges; }
.grafico-eixo { fill: var(--texto-suave); font-size: 11px; font-variant-numeric: tabular-nums; }
.grafico-valor { fill: var(--texto); font-size: 12px; font-weight: 700; }
.grafico-marca { fill: var(--verde-700); }
.grafico-alvo { fill: transparent; }
.grafico-coluna { outline: none; cursor: default; }
.grafico-coluna:hover .grafico-alvo, .grafico-coluna:focus-visible .grafico-alvo { fill: rgb(21 128 61 / .08); }
.grafico-coluna:focus-visible .grafico-alvo { stroke: #2563eb; stroke-width: 2; }
.tabela-detalhes { margin-top: 12px; }
.tabela-detalhes summary { min-height: var(--toque); display: flex; align-items: center; cursor: pointer; font-weight: 600; color: var(--verde-800); }

/* Simulador carregado no portal */
.simulador {
    display: grid;
    gap: 12px;
    background: var(--superficie);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 12px;
}
.simulador:fullscreen { border-radius: 0; overflow: auto; }
.simulador-barra { display: flex; align-items: center; gap: 8px; }
.simulador-barra h1 { flex: 1; font-size: 1.1rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.simulador-aviso { margin: 0; }
.simulador-palco { min-height: 60vh; outline: none; }
.simulador-carregando { text-align: center; color: var(--texto-suave); padding: 48px 0; }
.simulador-status { margin: 0; min-height: 1.5em; font-weight: 600; }

/* Agenda: calendário (computador) e lista por dia (celular) */
.agenda-navegacao { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.agenda-navegacao h2 { font-size: 1.2rem; min-width: 180px; text-align: center; }
.agenda-filtro { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.agenda-mes { display: none; }
.agenda-lista { display: grid; gap: 12px; }
.agenda-lista-dia { margin: 0 0 4px; font-size: 1rem; }
.painel.agenda-hoje { border-left: 4px solid var(--verde-700); }
.evento { border-left: 4px solid #9ca3af; padding-left: 10px !important; }
.evento-treinamento { border-left-color: var(--verde-700); }
.evento-visita { border-left-color: #2563eb; }
.evento-reuniao { border-left-color: #7c3aed; }
.evento-cancelado .lista-principal, a.evento-cancelado { text-decoration: line-through; opacity: .65; }

@media (min-width: 720px) {
    .agenda-lista { display: none; }
    .agenda-mes {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 1px;
        background: var(--borda);
        border: 1px solid var(--borda);
        border-radius: var(--raio);
        overflow: hidden;
    }
    .agenda-cabecalho { background: var(--fundo); padding: 6px 8px; font-size: .8rem; font-weight: 700; color: var(--texto-suave); text-transform: uppercase; }
    .agenda-dia { background: var(--superficie); min-height: 112px; padding: 4px 6px 6px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
    .agenda-fora { background: var(--fundo-suave); }
    .agenda-fora .agenda-numero { color: #9ca3af; }
    .agenda-hoje .agenda-numero { background: var(--verde-800); color: #fff; }
    .agenda-numero {
        align-self: flex-start;
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 28px; height: 28px; border-radius: 14px;
        color: var(--texto); font-weight: 700; text-decoration: none;
    }
    .agenda-evento {
        display: block; padding: 2px 6px; border-radius: 4px; border-left: 3px solid #9ca3af;
        background: var(--fundo); color: var(--texto); font-size: .8rem; text-decoration: none;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .agenda-evento span { font-weight: 700; }
    .agenda-evento.evento-treinamento { border-left-color: var(--verde-700); background: var(--verde-50); }
    .agenda-evento.evento-visita { border-left-color: #2563eb; background: #eff6ff; }
    .agenda-evento.evento-reuniao { border-left-color: #7c3aed; background: #f5f3ff; }
    .agenda-mais { font-size: .8rem; font-weight: 600; }
}

/* Lista de dados (rótulo e valor) */
.dados {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: 12px 24px;
    margin: 0;
}
.dados dt { color: var(--texto-suave); font-size: .85rem; }
.dados dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }

.acoes-linha { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
@media (max-width: 719px) {
    .acoes-linha { justify-content: flex-start; padding-top: 6px !important; }
}
.form-botoes-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* Chamada de presença */
.chamada { list-style: none; margin: 0; padding: 0; }
.chamada li { display: grid; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--linha); }
.chamada .marcar { font-size: 1.05rem; font-weight: 600; }

/* Balanceamento (BA2): os passos e o rotor visto do lado da marca */
.passos-balanceamento { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; counter-reset: passo; }
.passos-balanceamento li { counter-increment: passo; font-size: .82rem; padding: 4px 10px; border-radius: 999px; background: var(--fundo); color: var(--texto-suave); border: 1px solid var(--borda); }
.passos-balanceamento li::before { content: counter(passo) ". "; }
.passos-balanceamento li.feito { background: var(--verde-50); color: var(--floresta); border-color: var(--floresta); }
.passos-balanceamento li.atual { background: var(--floresta); color: #fff; border-color: var(--floresta); font-weight: 600; }
.rotor-desenho { display: block; width: min(380px, 100%); margin: 8px auto; }
/* Os rótulos dos pesos (parte 7): a massa por fora do aro; os novos em verde, os que já estão em cinza */
.rotor-rotulo { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rotor-peso-rotulo { fill: var(--texto-suave); font-weight: 600; }
.rotor-peso-novo-rotulo { fill: var(--floresta); }
.bal-instrumento .rotor-peso-novo-rotulo { fill: #4fd1b2; }
.correcao-alternativa { display: block; margin-top: 4px; }
/* O Arquivo (parte 10): a tabela das corridas (no celular, um cartão por corrida: .tabela-cartoes) */
.arquivo-corridas { margin: 0 0 12px; }
.bal-instrumento .tabela tbody tr:nth-child(even) { background: transparent; }
.bal-instrumento .tabela tbody tr:hover { background: #172a23; }
/* As posições dos sensores em Ferramentas (parte 9) */
.posicoes-sensores { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--borda); }
.posicoes-sensores h3 { margin: 0 0 6px; font-size: 1rem; }
.sensor-posicao { fill: var(--floresta); stroke: #fff; stroke-width: 1.5; }
.sensor-num { fill: #fff; font-size: 11px; font-weight: 700; text-anchor: middle; }
.bal-instrumento .sensor-posicao { fill: #2f7d62; stroke: #0d1714; }
/* O furo (parte 8): vazado, onde o material sai */
.rotor-furo-vazado { fill: var(--fundo); stroke-width: 3; }
.rotor-peso.rotor-furo-vazado { stroke: #9ca3af; }
.rotor-peso-novo.rotor-furo-vazado { stroke: var(--floresta); }
.bal-instrumento .rotor-peso-novo.rotor-furo-vazado { stroke: #4fd1b2; }
/* A média parcial enquanto mede (088) */
.parcial-medicao { margin: 8px 0 0; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px; background: var(--fundo); }
.parcial-medicao p { margin: 0 0 4px; }
.parcial-medicao p:last-child { margin: 0; }
.rotor-aro { fill: var(--fundo); stroke: var(--texto-suave); stroke-width: 2; }
.rotor-eixo { fill: var(--texto-suave); }
.rotor-marca { fill: var(--floresta); }
.rotor-texto { font-size: 11px; text-anchor: middle; fill: var(--texto-suave); }
.rotor-furo { fill: var(--borda); }
.rotor-peso { fill: #9ca3af; stroke: #fff; stroke-width: 1.5; }
.rotor-peso-novo { fill: var(--floresta); stroke: #fff; stroke-width: 1.5; }
.rotor-giro { fill: none; stroke: var(--floresta); stroke-width: 2.5; }
.rotor-ponta { fill: var(--floresta); }

/* Checagem com o espectro (Modo instrumento, parte 6; nos dois modos): a lista numerada e, ao lado (no tablet deitado e no
   computador) ou embaixo (no celular), o espectro com as marcas 1X, 2X e 3X e "O que justificou cada item" */
.chk-grade { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); margin: 0 0 12px; }
.chk-grade > * { min-width: 0; }
.chk-num { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--floresta); color: #fff; font-size: .78rem; font-weight: 700; }
.chk-lista .lista-principal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chk-espectro { border: 1px solid var(--borda); border-radius: 12px; padding: 12px; background: var(--superficie); }
.chk-espectro h3 { margin: 0 0 6px; font-size: .95rem; color: var(--texto-suave); font-weight: 600; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
.chk-espectro h3 + svg, .chk-espectro svg + h3 { margin-top: 10px; }
svg.espectro { display: block; width: 100%; height: auto; --esp-curva: var(--floresta); --esp-marca: #b45309; }
.bal-instrumento svg.espectro { --esp-curva: #4fd1b2; --esp-marca: #e3b341; }
svg.espectro text { fill: var(--texto-suave); font-size: 15px; }
svg.espectro .espectro-grade { stroke: var(--borda); }
svg.espectro .espectro-curva { fill: none; stroke: var(--esp-curva); stroke-width: 1.6; }
svg.espectro .espectro-marca { stroke: var(--esp-marca); stroke-dasharray: 4 3; }
svg.espectro .espectro-rotulo { fill: var(--esp-marca); font-weight: 700; }
svg.espectro .espectro-num { fill: var(--floresta); }
svg.espectro .espectro-num-texto { fill: #fff; font-weight: 700; }
.chk-justifica { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .88rem; color: var(--texto-suave); line-height: 1.4; }
.chk-justifica li { display: flex; gap: 8px; align-items: flex-start; }
@media (max-width: 699px) {
    svg.espectro text { font-size: 24px; }
}
@media (min-width: 1024px) {
    .chk-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; }
}

/* Modo instrumento (parte 5): a tela escura do protótipo aprovado, sem as explicações, com o polar ao vivo e a barra fixa.
   As cores da página são trocadas dentro do .bal-instrumento: painéis, selos e campos seguem sozinhos. */
body:has(.bal-instrumento) { background: #0d1714; --atalhos: 84px; }
body:has(.bal-instrumento) .atalhos { display: none; }
/* O "Ajuda" flutuante cobriria a tela: no instrumento, ele fica em Ferramentas */
body:has(.bal-instrumento) .assistente-botao { display: none; }
/* A barra fina da tela cheia, escura como a tela (parte 11) */
body:has(.bal-instrumento) .barra-fina { background: #0a1310; border-color: #24382f; color: #e8f1ec; }
body:has(.bal-instrumento) .barra-fina-titulo, body:has(.bal-instrumento) .barra-fina .sino { color: #e8f1ec; }
body:has(.bal-instrumento) .barra-fina-titulo span { color: #8fa89c; }
body:has(.bal-instrumento) .barra-fina-sair { color: #e8f1ec; border-color: #3a5247; background: #13221d; }
/* Os alertas "Parar e verificar" de outras máquinas, por cima de tudo, logo abaixo da barra fina (parte 11) */
.mi-alertas { position: fixed; top: calc(var(--topo) + 8px); left: 8px; right: 8px; z-index: 40; display: grid; gap: 8px; max-width: 720px; margin: 0 auto; pointer-events: none; }
.mi-alertas:empty { display: none; }
.mi-alerta { pointer-events: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px 14px; border-radius: 12px;
    background: #4a1512; color: #fde2df; border: 2px solid #e5534b; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.mi-alerta p { flex: 1 1 260px; margin: 0; font-size: .9rem; line-height: 1.35; }
.mi-alerta strong { display: block; color: #fff; font-size: 1rem; }
.mi-alerta-botoes { display: flex; gap: 6px; }
.bal-instrumento .mi-alerta .botao { min-height: 40px; background: transparent; color: #fff; border-color: #f1a39e; }
/* O aproveitamento de tela do protótipo (30/10): o conteúdo de ponta a ponta, com 16 px dos lados */
body.tela-cheia .conteudo { padding: 12px 16px; }
/* O instrumento de ponta a ponta (o protótipo); o guiado, com as explicações, mantém a largura de leitura (Sergio, 30/10) */
body.tela-cheia:has(.bal-instrumento) .conteudo { max-width: none; }
/* Na barra fina: a etiqueta "SIMULADO" e o botão do modo, pequenos, à direita */
.barra-fina-etiqueta { flex: none; padding: 2px 8px; border-radius: 6px; font-size: .72rem; font-weight: 800; letter-spacing: .04em; color: #e3b341; border: 1px solid rgba(227, 179, 65, .55); }
.barra-fina .form-linha { margin: 0; flex: none; }
.barra-fina .barra-fina-botao { min-height: 36px; padding: 4px 12px; border-radius: 999px; font-size: .85rem; white-space: nowrap; }
body:has(.bal-instrumento) .barra-fina .barra-fina-botao { background: transparent; color: #e8f1ec; border-color: #3a5247; }
/* As etapas como no protótipo: a barra de cada passo com o nome embaixo; a atual destacada */
.mi-etapas { display: flex; gap: 4px; margin: 0 0 10px; padding: 0; list-style: none; }
.mi-etapas li { flex: 1; min-width: 0; padding-top: 5px; border-top: 4px solid var(--linha); font-size: .72rem; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mi-etapas li.feito { border-color: var(--floresta); }
.mi-etapas li.atual { border-color: var(--agua); color: var(--texto); font-weight: 700; }
.mi-instrucao { margin: 0 0 8px; }
body:has(.bal-instrumento) .rodape-fuso { color: #8fa89c; }
.bal-instrumento {
    --fundo: #0a1310; --superficie: #13221d; --fundo-suave: #13221d; --linha: #24382f; --borda: #24382f; --borda-campo: #3a5247;
    --texto: #e8f1ec; --texto-suave: #8fa89c; --agua: #4fd1b2; --floresta: #2f7d62; --verde-50: #183229;
    color: var(--texto);
}
/* A barra fixa não cobre o fim da página (o "Interromper", o "Balancear mesmo assim"): um espaço do tamanho dela, mais folga.
   Os botões dos formulários ficam no lugar deles (no guiado, presos no rodapé do celular; aqui, a barra tem o Próximo) */
body:has(.mi-barra) .conteudo { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); }
body:has(.bal-instrumento) .bal-instrumento .formulario .form-botoes { position: static; margin: 0; padding: 12px 0 0; border-top: 0; }
.mi-medindo-texto { display: block; margin-top: 4px; color: #4fd1b2; }
.bal-instrumento .so-guiado { display: none !important; }
.bal-instrumento .painel { background: var(--superficie); border-color: var(--linha); box-shadow: none; }
.bal-instrumento input, .bal-instrumento select, .bal-instrumento textarea { background: var(--fundo); color: var(--texto); }
.bal-instrumento .botao:not(.botao-principal) { background: transparent; color: var(--texto); border-color: var(--borda-campo); }
.bal-instrumento .passos-balanceamento li.atual { background: var(--agua); border-color: var(--agua); color: #06231b; }
.bal-instrumento .passos-balanceamento li.feito { color: var(--agua); border-color: var(--floresta); }
.bal-instrumento .aviso { background: #172a23; color: var(--texto); border-color: var(--linha); }
.bal-instrumento .aviso-alerta { background: #2b2412; color: #e3b341; border-color: rgba(227, 179, 65, .5); }
.bal-instrumento .aviso-erro { background: #2d1513; color: #f1a39e; border-color: #7a2f2a; }
.bal-instrumento .rotor-aro { fill: var(--fundo); }
.mi-passo h2 { margin: 0 0 2px; }
.mi-passo > .lista-detalhe { margin: 0 0 10px; }
.mi-grade { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); margin: 0 0 12px; }
.mi-grade > *, .mi-lado > * { min-width: 0; }
.mi-largo { grid-column: 1 / -1; }
.mi-lado { display: grid; gap: 12px; align-content: start; }
.mi-cartao { margin: 0; padding: 12px; border-radius: 14px; }
.mi-cartao h3 { margin: 0 0 8px; font-size: .95rem; color: var(--texto-suave); font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mi-polar svg.polar { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto; }
/* (o polar do vetor 1X da BA1 também usa .polar-anel e .polar-raio: aqui só dentro do svg.polar do instrumento) */
svg.polar .polar-anel { fill: none; stroke: #2c4439; stroke-width: 1; }
svg.polar .polar-raio { stroke: #2c4439; stroke-width: 1; }
svg.polar .polar-eixo { fill: #8fa89c; font-size: 17px; }
svg.polar .polar-marca { fill: #8fa89c; }
svg.polar .polar-giro { fill: none; stroke: #4fd1b2; stroke-width: 3; }
svg.polar .polar-giro-ponta { fill: #4fd1b2; }
svg.polar .polar-alvo { fill: none; stroke: rgba(79, 209, 178, .55); stroke-dasharray: 4 3; }
svg.polar .polar-vetor { stroke: #4fd1b2; stroke-width: 3; }
svg.polar .polar-vivo { fill: #4fd1b2; stroke: #0d1714; stroke-width: 2; }
svg.polar .polar-corrida circle { stroke: #0d1714; stroke-width: 2; }
svg.polar .polar-num { font-weight: 800; font-size: 20px; fill: #0d1714; }
.polar-referencia circle, i.polar-referencia { fill: #f08a3c; background: #f08a3c; }
.polar-teste circle, i.polar-teste { fill: #e3b341; background: #e3b341; }
.polar-conferencia circle, i.polar-conferencia { fill: #9fe3d1; background: #9fe3d1; }
.polar-fina circle, i.polar-fina { fill: #c4b5fd; background: #c4b5fd; }
.polar-leitura circle, i.polar-leitura { fill: #9fb8ad; background: #9fb8ad; }
/* A checagem no instrumento (parte 11): o polar das leituras recentes e o espectro lado a lado no tablet e no computador */
@media (min-width: 768px) {
    .mi-grade.mi-checagem { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
}
.mi-leitura { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; margin: 6px 0 0; font-variant-numeric: tabular-nums; }
.mi-leitura > span { font-size: .85rem; }
.mi-leitura strong { font-size: 1.15rem; }
.mi-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 0; padding: 0; list-style: none; font-size: .8rem; color: var(--texto-suave); }
.mi-legenda i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.mi-nota { margin: 8px 0 0; font-size: .82rem; line-height: 1.4; color: var(--texto-suave); }
.mi-selo { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: .82rem; font-weight: 700; white-space: nowrap; border: 1px solid var(--linha); }
.mi-selo-firme { background: rgba(79, 209, 178, .15); color: #4fd1b2; border-color: rgba(79, 209, 178, .5); }
.mi-selo-firme::before { content: "●"; margin-right: 5px; }
.mi-selo-nao { background: rgba(227, 179, 65, .14); color: #e3b341; border-color: rgba(227, 179, 65, .5); }
.mi-selo-espera { color: var(--texto-suave); }
.mi-rotacao { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; }
.mi-numero { font-size: 2.75rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mi-media { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-variant-numeric: tabular-nums; }
/* <progress> (sem style embutido, que a CSP bloqueia): o trilho e o preenchimento em cada navegador */
progress.mi-barra-media { flex: 1; min-width: 0; height: 10px; border-radius: 999px; overflow: hidden; background: var(--fundo); border: 1px solid var(--linha); -webkit-appearance: none; appearance: none; color: #4fd1b2; }
progress.mi-barra-media::-webkit-progress-bar { background: var(--fundo); }
progress.mi-barra-media::-webkit-progress-value { background: #4fd1b2; }
progress.mi-barra-media::-moz-progress-bar { background: #4fd1b2; }
table.mi-canais { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.mi-canais th { color: var(--texto-suave); font-weight: 600; font-size: .78rem; text-align: right; padding: 6px 4px; border-bottom: 1px solid var(--linha); }
.mi-canais td { padding: 9px 4px; text-align: right; border-bottom: 1px solid var(--linha); }
.mi-canais th:first-child, .mi-canais td:first-child { text-align: left; }
.mi-canais td:first-child { font-weight: 700; }
/* A barra fixa embaixo: o Medir em destaque; o que não vale no passo fica apagado */
.mi-barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px;
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px)); background: #08100d; border-top: 1px solid #24382f; }
.mi-barra > a, .mi-barra > button { min-width: 0; min-height: 64px; display: grid; place-items: center; align-content: center; gap: 4px; padding: 4px 1px; border-radius: 12px; letter-spacing: -.01em;
    border: 1px solid #24382f; background: #13221d; color: #e8f1ec; font: inherit; font-size: .6875rem; font-weight: 700; text-decoration: none; cursor: pointer; text-align: center; }
.mi-barra i { font-size: 1.25rem; }
.mi-barra span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.15; }
.mi-numero.mi-vazio { color: var(--texto-suave); font-weight: 600; }
.mi-barra .mi-principal { background: #4fd1b2; border-color: #4fd1b2; color: #06231b; }
.mi-barra button:disabled { opacity: .4; cursor: default; }
.mi-barra .mi-medindo:disabled { opacity: 1; background: #0f3a30; color: #4fd1b2; }
@media (min-width: 1024px) {
    .mi-barra > a, .mi-barra > button { min-height: 72px; font-size: .95rem; }
    /* Como no protótipo: o polar com ~58 % da largura, os quadros da direita com ~42 % */
    .mi-grade { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
    /* O polar o maior que couber na altura da tela: o quadro dele inteiro (título, polar, valor, legenda e nota) acima da
       barra de botões, sem rolar, em 1366×768 e 1920×1080. Fora o polar, a tela usa ~400 px de altura (a barra fina, as
       etapas, a instrução, o resto do quadro e a barra de botões); o viewBox do polar é 400 × 352 */
    .mi-polar svg.polar { max-width: calc((100vh - 400px) * 400 / 352); }
    .mi-numero { font-size: 3.5rem; }
    svg.polar .polar-eixo { font-size: 15px; }
}

/* Registrar a compra (solicitação de compra): a caixinha com a linha inteira para tocar */
.lista-compra li { display: grid; gap: 4px; }
.marcar-item { min-height: 44px; padding: 6px 0; cursor: pointer; }
.marcar-item span { line-height: 1.35; }

@media (max-width: 1023px) {
    /* Botão principal sempre visível no rodapé do celular, acima dos atalhos */
    .formulario .form-botoes {
        position: sticky;
        bottom: 0;
        margin: 0 -16px -16px;
        padding: 12px 16px;
        border-top: 1px solid var(--borda);
        z-index: 5;
    }
    .formulario .form-botoes .botao { flex: 1; }
    /* O botão flutuante "Ajuda" fica no canto direito, na mesma altura: a barra deixa o lugar dele livre */
    body:has(.assistente-botao) .formulario .form-botoes { padding-right: 124px; }
    .com-atalhos .formulario .form-botoes { bottom: calc(var(--atalhos) + env(safe-area-inset-bottom)); }
}

/* ------------------------------------------------------------------ tablet */

@media (min-width: 720px) {
    .conteudo { padding: 24px; }
    .paineis { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
}

/* ------------------------------------------------------------------ computador: menu lateral fixo */

@media (min-width: 1024px) {
    .portal, .portal.com-atalhos {
        padding-top: 0;
        padding-bottom: 0;
        padding-left: var(--lateral);
    }
    .barra-topo, .atalhos, .fundo-menu, .lateral .fechar { display: none; }

    .lateral {
        width: var(--lateral);
        transform: none;
        transition: width .2s ease;
    }
    .lateral .recolher { display: inline-flex; font-size: 1rem; }
    .conteudo { padding: 32px; }

    /* Menu recolhido: só os ícones */
    .menu-recolhido.portal { padding-left: var(--lateral-recolhida); }
    /* A tela de trabalho não tem menu: a barra fina continua no topo */
    body.portal.tela-cheia { padding-top: var(--topo); padding-left: 0; }
    body.tela-cheia .conteudo { padding: 12px 16px; }
    .menu-recolhido .lateral { width: var(--lateral-recolhida); }
    .menu-recolhido .lateral-topo { flex-direction: column; padding: 8px 0; }
    .menu-recolhido .marca { flex: none; }
    .menu-recolhido .menu-seta,
    .menu-recolhido .menu-pai { display: none; }
    /* Rótulos escondidos só visualmente: leitores de tela continuam lendo o nome de cada item */
    .menu-recolhido .marca .logo-nome,
    .menu-recolhido .menu-rotulo,
    .menu-recolhido .usuario-dados {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .menu-recolhido .recolher i { transform: rotate(180deg); }
    .menu-recolhido .lateral-usuario { justify-content: center; margin: 4px 8px 8px; padding: 8px 0; }
    .menu-recolhido .menu-linha,
    .menu-recolhido .submenu-linha { justify-content: center; padding: 0; }
    .menu-recolhido .submenu { display: grid; gap: 2px; padding-left: 0; }
}

/* Dica com o nome do item ao passar o mouse (menu recolhido). Fica fora da barra lateral,
   em posição fixa, para não ser cortada pela rolagem da barra. */
.dica {
    position: fixed;
    z-index: 60;
    max-width: 260px;
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--texto);
    color: #fff;
    font-size: .875rem;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    transform: translateY(-50%);
    box-shadow: 0 4px 12px rgb(0 0 0 / .2);
}
.dica.dica-acima { transform: translate(-50%, -100%); white-space: normal; max-width: min(320px, 90vw); }

/* Relatórios largos: rolagem horizontal própria e primeira coluna fixa (a página nunca rola para o lado) */
.relatorio-largo { overflow-x: auto; border: 1px solid var(--linha); border-radius: 8px; }
.tabela-relatorio th, .tabela-relatorio td { white-space: nowrap; }
.tabela-relatorio tbody th, .tabela-relatorio tfoot th { text-align: left; font-weight: 600; }
.tabela-relatorio thead th:first-child, .tabela-relatorio tbody th, .tabela-relatorio tfoot th {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--superficie);
    box-shadow: 1px 0 0 var(--borda);
}
.tabela-relatorio tfoot td, .tabela-relatorio tfoot th { font-weight: 700; border-top: 2px solid var(--borda); }
.tabela-relatorio td.numero, .tabela-relatorio th.numero { font-variant-numeric: tabular-nums; }

/* Relatório de visita */
.relatorio-bloco { margin-top: 16px; }
.relatorio-bloco h2 { font-size: 1rem; margin-bottom: 4px; }
.so-impressao { display: none; }

/* Impressão (relatórios e visitas): só o conteúdo, sem menu, barras nem botões */
@media print {
    .lateral, .barra-topo, .atalhos, .fundo-menu, .pular, .abas, .filtros, .pagina-acoes,
    .zona-perigo, .form-botoes, .botao, .dica, .tabela-detalhes summary { display: none !important; }
    .portal, .portal.com-atalhos { padding: 0 !important; }
    body { background: #fff; font-size: 11pt; }
    .conteudo { max-width: none; padding: 0; }
    .painel, .indicador, .cartao { box-shadow: none; border: 1px solid #d1d5db; break-inside: avoid; }
    .so-impressao { display: block; }
    .tabela-detalhes { display: block; }
    .tabela-detalhes > *:not(summary) { display: block; }
    a { color: inherit; text-decoration: none; }
    .tabela-cartoes thead { display: table-header-group !important; }
    .tabela-cartoes { display: table !important; width: 100%; }
    .tabela-cartoes tbody { display: table-row-group !important; }
    .tabela-cartoes tr { display: table-row !important; }
    .tabela-cartoes td { display: table-cell !important; }
    .tabela-cartoes td[data-rotulo]::before { content: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; }
}

/* ------------------------------------------------------------------ Plataforma (PLANO.md, Parte 6) */

/* "Preserve | Plataforma" é mais longo que "Preserve | Portal": cabe ao lado do botão de recolher */
.sistema-plataforma .marca { font-size: .92rem; gap: 6px; }
.sistema-plataforma .marca img { width: 28px; height: 28px; }

/* Faixa de data, cidade e clima (como no Operations Center) */
.faixa-clima {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 28px;
    margin: -4px 0 20px;
    padding: 14px 18px;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
}
.faixa-clima-data { display: grid; }
.faixa-clima-data strong { font-size: 1.25rem; color: var(--verde-900); }
.faixa-clima-data span { color: var(--texto-suave); font-size: .95rem; }
.faixa-clima-itens { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; }
.faixa-clima-itens div { display: grid; }
.faixa-clima-itens dt { font-size: .78rem; color: var(--texto-suave); }
.faixa-clima-itens dd { margin: 0; font-weight: 700; white-space: nowrap; }
.faixa-clima-itens dd i { color: var(--agua); }
.seta-vento { vertical-align: -2px; fill: var(--agua); }
.faixa-clima-editar { margin-left: auto; }

/* Blocos de indicadores (como no SAP) */
.indicadores-plat {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}
/* No computador, o bloco de máquinas (rosca + legenda) ganha mais largura */
@media (min-width: 1100px) {
    .indicadores-plat { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
}
.indicador-plat {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
}
.indicador-plat h2 { font-size: .95rem; color: var(--texto-suave); font-weight: 700; }
.indicador-plat-corpo { display: flex; align-items: center; gap: 12px; }
.indicador-plat-numero { margin: 0; font-size: 2rem; font-weight: 800; line-height: 1.1; color: var(--verde-900); }
.indicador-plat-numero small { font-size: 1rem; color: var(--texto-suave); }
.indicador-plat-nota { margin: 0; font-size: .8rem; color: var(--texto-suave); }

.rosca { width: 76px; height: 76px; flex: none; }
.rosca-trilho { stroke: var(--linha); }
.rosca-centro { font-size: 9px; font-weight: 800; fill: var(--verde-900); }
.fatia-operando   { stroke: var(--agua); }
.fatia-parada     { stroke: #d97706; }
.fatia-manutencao { stroke: var(--floresta); }
.fatia-inativa    { stroke: #9ca3af; }
.fatia-vendida    { stroke: #cbd5e1; }
.legenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: .8rem; flex: 1; min-width: 0; }
.legenda li { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.legenda strong { margin-left: auto; padding-left: 8px; }
.legenda-cor { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.fatia-cor-operando   { background: var(--agua); }
.fatia-cor-parada     { background: #d97706; }
.fatia-cor-manutencao { background: var(--floresta); }
.fatia-cor-inativa    { background: #9ca3af; }
.fatia-cor-vendida    { background: #cbd5e1; }

.barras { width: 100%; height: 48px; }
.barra { fill: var(--agua); }
.barra-vazia { fill: var(--linha); }

.selos-linha { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }

/* Cartões que recolhem (details/summary, sem JavaScript) */
.painel-recolhe > summary { list-style: none; cursor: pointer; }
.painel-recolhe > summary::-webkit-details-marker { display: none; }
.painel-recolhe > summary > i { color: var(--texto-suave); transition: transform .2s ease; }
.painel-recolhe:not([open]) > summary > i { transform: rotate(-90deg); }
.painel-recolhe:not([open]) > summary { margin-bottom: 0; }

/* ---------------------------------------------------------------- Máquinas */

/* Resumo do objeto abaixo do título (como a página de objeto do SAP) */
.objeto-resumo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
}
.objeto-resumo > div > span { display: block; font-size: .8rem; color: var(--texto-suave); }
.objeto-resumo strong { font-size: 1.05rem; color: var(--verde-900); }

/* Indicador de etapas dos fluxos */
.etapas { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 16px; padding: 0; list-style: none; counter-reset: etapa; }
.etapas li { display: flex; align-items: center; gap: 8px; color: var(--texto-suave); font-weight: 600; }
.etapa-numero {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    border: 2px solid var(--borda-campo); background: var(--superficie); font-size: .85rem;
}
.etapas .etapa-atual { color: var(--verde-900); }
.etapas .etapa-atual .etapa-numero { border-color: var(--floresta); background: var(--floresta); color: #fff; }
.etapas .etapa-feita .etapa-numero { border-color: var(--floresta); color: var(--floresta); }

/* Formulário curto numa linha (situação, transmissão) */
.form-linha { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 8px; }
.form-linha .campo { min-width: 200px; flex: 1; margin: 0; }

/* Árvore técnica */
.arvore-componente > summary h2 { margin: 0; }
.arvore-mancal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 6px; font-size: 1rem; }
.codigo-ponto { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-weight: 700; color: var(--verde-900); }
.codigos-pontos { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.tabela-pontos .lista-detalhe { display: block; font-size: .8rem; }
.tabela-pontos .linha-aviso td { padding-top: 0; font-size: .82rem; color: #78350f; }
.tabela-pontos .linha-aviso i { color: #b45309; }

/* Histórico da máquina: filtro por categoria e linha do tempo */
.filtro-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.filtro-chips a {
    padding: 6px 12px; border: 1px solid var(--borda); border-radius: 999px; background: var(--superficie);
    color: var(--texto); text-decoration: none; font-size: .9rem;
}
.filtro-chips a.ativo { border-color: var(--floresta); background: var(--floresta); color: #fff; }
.linha-do-tempo { list-style: none; margin: 0; padding: 0; }
.linha-do-tempo .evento { display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--linha); }
.linha-do-tempo .evento:first-child { border-top: 0; }
.evento-icone {
    display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
    border-radius: 50%; background: var(--fundo-suave); color: var(--verde-900);
}
.evento-alertas .evento-icone { background: var(--perigo-fundo); color: var(--perigo); }
.evento-horimetro .evento-icone { background: var(--floresta); color: #fff; }
.evento-titulo { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.evento-titulo time { color: var(--texto-suave); font-size: .85rem; }
.evento-detalhe { margin: 2px 0 0; overflow-wrap: anywhere; }

/* Horímetro: um cartão por medidor; o escolhido (histórico abaixo) fica destacado */
.horimetro-medidores { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; margin-bottom: 12px; }
.horimetro-medidor { display: flex; flex-direction: column; gap: 6px; margin: 0; text-align: left; }
.horimetro-medidor .painel-cabecalho { justify-content: flex-start; gap: 8px; }
.horimetro-medidor h2 a { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.horimetro-medidor .form-botoes { justify-content: flex-start; margin-top: auto; }
.horimetro-medidor-atual { border-color: var(--floresta); box-shadow: inset 3px 0 0 var(--floresta), var(--sombra); }
.tabela-horimetro .lista-detalhe { display: block; font-size: .8rem; }
.tabela-horimetro .linha-troca td { background: var(--fundo-suave); }

/* No celular, cada ponto em duas linhas: código e medição; depois condição, Fmax, captura e limites corridos */
@media (max-width: 719px) {
    .tabela-pontos tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 8px 0; }
    .tabela-pontos td { width: auto; }
    .tabela-pontos td:first-child { flex: 0 0 3.2em; font-size: 1rem; }
    .tabela-pontos td[data-rotulo="Medição"] { flex: 1 1 calc(100% - 4.5em); }
    .tabela-pontos td[data-rotulo="Medição"]::before { content: none; }
    .tabela-pontos td[data-rotulo]:not([data-rotulo="Medição"]) { flex: 0 0 auto; font-size: .85rem; }
    .tabela-pontos td .lista-detalhe { display: inline; margin-left: 4px; }
    .tabela-pontos .linha-aviso td { flex: 1 1 100%; }
}
/* ---------------------------------------------------------------- Biblioteca técnica (Parte 8, etapa 2) */
.visualmente-oculto { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.codigo-ponto.codigo-novo { background: var(--sucesso-fundo); outline: 1px solid var(--floresta); border-radius: 4px; padding: 0 4px; }
.marcar-perigo span { color: var(--perigo); font-weight: 600; }
.editor-componente { margin-bottom: 12px; }
.editor-componente > .form-grade, .editor-componente > .grupo-campos, .editor-componente > .marcar-grade, .editor-componente > .campo { margin-top: 12px; }
.editor-componente h3 { margin: 0; font-size: 1.05rem; }
.anexos { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.anexo-foto { display: block; width: 140px; height: 105px; object-fit: cover; border: 1px solid var(--borda); border-radius: 8px; }
.tabela-cartoes td .lista-detalhe { display: block; }
.tabela tr.linha-destaque td { background: #fffbeb; }
/* ---------------------------------------------------------------- Guard fase 1 (Parte 8): classes, rota e tendência */
.selo-classe { display: inline-flex; align-items: center; gap: 4px; }
.selo-zona-verde    { background: #dcfce7; color: #14532d; }
.selo-zona-amarelo  { background: #fef9c3; color: #713f12; }
.selo-zona-laranja  { background: #ffedd5; color: #7c2d12; }
.selo-zona-vermelho { background: #fee2e2; color: #7f1d1d; }
.abas-condicao { margin: 8px 0; }
.rota-mancal { margin-bottom: 12px; }
.rota-titulo { margin: 0 0 8px; font-size: 1.05rem; }
.rota-posicoes, .rota-pontos { list-style: none; margin: 0; padding: 0; }
.rota-posicao { padding: 10px 0; border-top: 1px solid var(--linha); }
.rota-posicao:first-child { border-top: 0; }
.rota-posicao.rota-feita { background: var(--verde-50); border-radius: 8px; padding-left: 8px; padding-right: 8px; }
.rota-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.rota-cabeca .botao { margin-left: auto; }
.rota-pontos { display: grid; gap: 4px; margin-top: 6px; }
.rota-pontos li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.grafico-tendencia { margin: 0 0 16px; }
.tendencia { display: block; width: 100%; height: auto; }
.faixa-verde    { fill: #f0fdf4; background: #dcfce7; }
.faixa-amarelo  { fill: #fefce8; background: #fef9c3; }
.faixa-laranja  { fill: #fff7ed; background: #ffedd5; }
.faixa-vermelho { fill: #fef2f2; background: #fee2e2; }
.tendencia .fronteira { stroke: #9ca3af; stroke-width: 1; stroke-dasharray: 3 3; shape-rendering: crispEdges; }
.tendencia .eixo { fill: var(--texto-suave); font-size: 11px; font-variant-numeric: tabular-nums; }
.tendencia-linha { fill: none; stroke: #374151; stroke-width: 2; stroke-linejoin: round; }
.tendencia-ponto { stroke: #fff; stroke-width: 2; }
.tendencia-verde    { fill: #15803d; }
.tendencia-amarelo  { fill: #ca8a04; }
.tendencia-laranja  { fill: #ea580c; }
.tendencia-vermelho { fill: #b91c1c; }
.tendencia-sem      { fill: #9ca3af; }
.tendencia-ponto.nao-comparavel { fill: #fff; stroke: #374151; }
.grafico-tendencia .legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; }
.legenda-amostra { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid #d1d5db; flex: none; }
.legenda-vazada { border-radius: 50%; border: 2px solid #374151; background: #fff; }
/* ---------------------------------------------------------------- Rolamentos (Parte 8, etapa 6) */
.mancal-rolamento { margin: 4px 0 8px; }
.mancal-rolamento p { margin: 4px 0; }
.mancal-rolamento a { margin-left: 6px; white-space: nowrap; }
.mancal-frequencias { gap: 6px 16px; margin: 4px 0; }
.mancal-frequencias li { display: inline-flex; align-items: baseline; gap: 4px; }
.rol-resultados li { gap: 6px; }
.rol-escolher { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 4px; }
.rol-escolher .marcar { margin: 0; }
.mancal-aviso { margin: 2px 0; color: #78350f; font-size: .9rem; }
/* ---------------------------------------------------------------- Tempo real, M1: centrais e ao vivo */
.chave-central { display: block; margin: 6px 0; padding: 8px; background: #fff; border: 1px solid var(--borda); border-radius: 6px; font-size: .85rem; overflow-wrap: anywhere; }
.form-bloqueio { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin-top: 12px; }
.form-bloqueio .campo { flex: 1 1 260px; margin: 0; }
.aovivo-pontos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.aovivo-pontos a { display: grid; gap: 4px; padding: 10px; border: 1px solid var(--linha); border-radius: 8px; text-decoration: none; color: inherit; }
.aovivo-pontos li.atual a { border-color: var(--verde-700); box-shadow: 0 0 0 1px var(--verde-700); }
.tendencia-ponto.denso { stroke-width: 0; }
/* Ao vivo por mancal (parte B): cartões na cor do pior ponto, mini tendências, mapa rpm × carga */
.aovivo { min-width: 0; }
.mancais-ao-vivo { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.mancal-cartao { border: 1px solid var(--linha); border-left: 5px solid #cbd5e1; border-radius: 8px; padding: 10px 12px; }
.mancal-cartao.atual { box-shadow: 0 0 0 2px var(--verde-700); }
.mancal-verde { border-left-color: #16a34a; }
.mancal-amarelo { border-left-color: #ca8a04; background: #fffdf2; }
.mancal-laranja { border-left-color: #ea580c; background: #fff9f3; }
.mancal-vermelho { border-left-color: #b91c1c; background: #fff7f7; }
.mancal-cartao header { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.mancal-cartao h3 { margin: 0; font-size: 1.05rem; }
.mancal-cartao header p { flex-basis: 100%; margin: 0; }
.mancal-pontos { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.mancal-pontos li { display: grid; grid-template-columns: 3.4em 1fr 120px; align-items: center; gap: 8px; min-height: 34px; border-top: 1px solid var(--linha); padding-top: 4px; }
.mancal-pontos li:first-child { border-top: 0; }
.mancal-valor { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ponto-classe { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.ponto-classe.tendencia-verde { background: #15803d; }
.ponto-classe.tendencia-amarelo { background: #ca8a04; }
.ponto-classe.tendencia-laranja { background: #ea580c; }
.ponto-classe.tendencia-vermelho { background: #b91c1c; }
.ponto-classe.tendencia-sem { background: #9ca3af; }
.mini-tendencia { display: block; width: 120px; height: 32px; }
.mini-linha { fill: none; stroke: #334155; stroke-width: 1.25; stroke-linejoin: round; }
.mini-alerta { stroke: #ea580c; stroke-width: 1; stroke-dasharray: 3 2; }
.mapa-detalhes { margin: 8px 0; }
.mapa-detalhes summary { cursor: pointer; min-height: var(--toque); display: flex; align-items: center; gap: 6px; font-weight: 600; }
.mapa-operacao { display: block; width: 100%; max-width: 720px; height: auto; }
.mapa-faixa { fill-opacity: .14; stroke-width: 1.5; }
.mapa-faixa.faixa-tempo-0 { stroke: #64748b; }
.mapa-faixa.faixa-tempo-1 { stroke: #0284c7; }
.mapa-faixa.faixa-tempo-2 { stroke: #0d9488; }
.mapa-faixa.faixa-tempo-3 { stroke: #166534; }
.mapa-faixa-nome { font-size: 11px; fill: #1f2937; font-weight: 600; }
.mapa-ponto { fill-opacity: .75; stroke: #fff; stroke-width: 1; }
.mapa-grade { stroke: #e5e7eb; stroke-width: 1; }
.mapa-eixo { font-size: 11px; fill: var(--texto-suave); }
.mapa-fora { margin: 6px 0; }
.graficos-mancal { display: grid; gap: 6px; min-width: 0; overflow: hidden; }
.grafico-ponto { min-width: 0; overflow: hidden; }
.graficos-mancal .u-legend { white-space: normal; text-align: left; font-size: .8rem; }
.graficos-mancal .u-legend tr { display: inline-block; margin-right: 10px; }
.grafico-ponto-titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: .95rem; }
.legenda-tendencia { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; }
.legenda-rotacao { background: rgba(148, 163, 184, .35); }
.legenda-normal { background: rgba(37, 99, 235, .25); border-color: rgba(37, 99, 235, .7); }
.grafico-linha-base { margin: 0; font-size: .82rem; }
.central-estado { margin: 4px 0; }
.form-linha-grade { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; }
.form-linha-grade .campo { margin: 0; min-width: 160px; }
.marca-evento { border-color: #b91c1c; }
/* Página de erro inesperado: os detalhes técnicos só aparecem no ambiente de desenvolvimento */
.erro-detalhes { text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .72rem; max-height: 40vh; overflow: auto; background: #f8fafc; padding: 8px; border-radius: 6px; }
.pagina-erro-simples { max-width: 560px; margin: 0 auto; padding: 16px; }
.pagina-erro-logo { margin: 8px 0 16px; }
/* Campo de número com a unidade fora da caixa, ao lado */
.campo-com-unidade { display: flex; align-items: center; gap: 8px; }
.campo-com-unidade input { flex: 1 1 auto; min-width: 0; }
.campo-unidade { flex: none; color: var(--texto-suave); font-weight: 600; white-space: nowrap; }
/* Vetor 1X (BA1): polar e tendências de amplitude e ângulo */
.vetor-graficos { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 12px 20px; align-items: start; }
.vetor-polar-figura { margin: 0; }
.vetor-polar { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto; touch-action: pan-y; }
.vetor-polar .eixo { fill: var(--texto-suave); font-size: 11px; font-variant-numeric: tabular-nums; }
.polar-anel { fill: none; stroke: #e5e7eb; stroke-width: 1; }
.polar-raio { stroke: #e5e7eb; stroke-width: 1; }
.vetor-tendencias h3 { margin: 4px 0 0; font-size: .95rem; }
.vetor-tendencia .grade { stroke: #eef0f2; stroke-width: 1; shape-rendering: crispEdges; }
.vetor-normal { fill: rgba(37, 99, 235, .18); stroke: rgba(37, 99, 235, .7); stroke-width: 1.5; }
.vetor-normal-linha { stroke: rgba(37, 99, 235, .8); stroke-width: 2; stroke-dasharray: 4 3; }
.vetor-normal-faixa { fill: rgba(37, 99, 235, .14); }
.vetor-hora { fill: #1f2937; }
.vetor-fora { fill: #ea580c; }
.vetor-acompanhar { fill: #ca8a04; }
.legenda-vetor-acompanhar { background: #ca8a04; border-radius: 50%; }
.vetor-antes { fill: #9ca3af; }
.vetor-ultimo { stroke: #fff; stroke-width: 2; }
.marca-balanceamento { stroke: #166534; stroke-width: 2; stroke-dasharray: 5 3; }
.legenda-vetor-hora { background: #1f2937; border-radius: 50%; }
.legenda-vetor-fora { background: #ea580c; border-radius: 50%; }
.legenda-vetor-antes { background: #9ca3af; border-radius: 50%; }
.marca-balanceamento-amostra { border-color: #166534; }
/* Conferência de balanceamento (090): nenhum peso colocado, não é intervenção */
.marca-conferencia { stroke: #6b7280; stroke-width: 1.5; stroke-dasharray: 2 3; }
.marca-conferencia-amostra { border-color: #6b7280; border-left-style: dotted; }
.vetor-normal-texto { margin: 8px 0; }
@media (max-width: 760px) {
    .vetor-graficos { grid-template-columns: minmax(0, 1fr); }
}
.campo-numero-curto { width: 6.5em; min-height: 36px; padding: 4px 6px; }
.tabela-faixas input[type=text] { min-height: 36px; padding: 4px 8px; width: 100%; max-width: 14em; }
.tabela-faixas td { vertical-align: middle; white-space: nowrap; }
.tabela-faixas input.campo-numero-curto { width: 5.5em; }
.tabela-faixas input[name$='[nome]'] { min-width: 11em; }
.form-faixas .form-botoes { margin-top: 16px; }
/* Tempo em cada faixa de operação (C3): cores de categoria (não de situação), na ordem das faixas */
.barra-faixas { display: block; width: 100%; height: 18px; border-radius: 4px; overflow: hidden; margin: 6px 0; }
.faixa-tempo-0 { fill: #94a3b8; }
.faixa-tempo-1 { fill: #38bdf8; }
.faixa-tempo-2 { fill: #2dd4bf; }
.faixa-tempo-3 { fill: #166534; }
.faixa-tempo-4 { fill: #7c3aed; }
.faixa-tempo-5 { fill: #a16207; }
.faixa-tempo-fora { fill: #334155; }
.legenda-faixas { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 4px 0 8px; }
.legenda-faixas .legenda-amostra { border: 0; border-radius: 2px; }
.titulo-faixas { margin: 12px 0 0; font-size: 1rem; }
/* Guard, espectro e forma de onda (M4) */
.grafico-uplot { margin: 8px 0; overflow: hidden; }
.grafico-controles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.grafico-controles .botao.ativo { background: var(--verde-900); color: #fff; border-color: var(--verde-900); }
.legenda-marcas { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.legenda-marcas li, .grafico-tendencia .legenda li { white-space: normal; }
.marca-amostra { display: inline-block; width: 16px; height: 0; border-top: 2px dashed; vertical-align: middle; }
.marca-eixo { border-color: #1d4ed8; }
.marca-engrenamento { border-color: #7c3aed; }
.marca-rolamento { border-color: #c2410c; }
.marca-eletrico { border-color: #be185d; }
.marca-cursor { border-color: #64748b; border-top-style: dotted; }
.uplot { font-family: inherit; }
.harmonico-linha { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dotted #64748b; pointer-events: none; }
.harmonico-linha.fundamental { border-left: 1px solid #334155; }
.harmonico-linha span { position: absolute; bottom: 2px; left: 3px; font-size: 10px; color: #334155; background: rgba(255, 255, 255, .8); padding: 0 2px; }
.harmonico-legenda { position: absolute; top: 2px; right: 4px; font-size: 12px; color: #0f172a; background: rgba(255, 255, 255, .9); padding: 1px 6px; border-radius: 4px; pointer-events: none; }
/* Toque nos gráficos (toque-graficos.js e app.js): valor sob o cursor, "Restaurar zoom", nada mais largo que a tela */
.uplot, .uplot .u-wrap { max-width: 100%; }
.uplot .u-legend { white-space: normal; text-align: left; font-size: .8rem; }
.uplot .u-legend tr { display: inline-block; margin-right: 10px; }
.grafico-dica { position: absolute; top: 28px; left: 0; z-index: 3; max-width: 100%; padding: 3px 8px; border-radius: 6px; background: rgba(15, 23, 42, .88);
    color: #fff; font-size: 12px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.grafico-restaurar { margin: 6px 0 2px; }
/* Texto de ajuda conforme o aparelho: dedo (celular) ou mouse */
.so-toque { display: none; }
@media (pointer: coarse) { .so-toque { display: inline; } .so-mouse { display: none; } }
.grafico-svg, .mapa-operacao, svg.tendencia { touch-action: pan-y; }
.grafico-cursor { stroke: #0f172a; stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; vector-effect: non-scaling-stroke; }
.grafico-marca-ativa { stroke: #0f172a; stroke-width: 2.5px; }
.grafico-toque { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 4px; }
.grafico-toque-valor { margin: 0; padding: 4px 8px; border-radius: 6px; background: #f1f5f9; font-size: .85rem; overflow-wrap: anywhere; }
/* Parte C: CPB com máscara, cascata e Bode (SVG feito no servidor) */
.grafico-figura { margin: 8px 0; }
.grafico-svg { display: block; width: 100%; max-width: 820px; height: auto; background: #fcfcfb; }
.grafico-svg .svg-grade { stroke: #e5e7eb; stroke-width: 1; }
.grafico-svg .svg-eixo { font-size: 11px; fill: var(--texto-suave); }
.cpb-barra { fill: #86b6ef; }
.cpb-barra:hover, .cpb-barra.cpb-acima:hover { fill-opacity: .8; }
.cpb-barra.cpb-acima { fill: #ec835a; }
.cpb-mascara { fill: none; stroke: #0b0b0b; stroke-width: 2; }
.cpb-normal { fill: none; stroke: #52514e; stroke-width: 1.5; stroke-dasharray: 4 3; }
.cpb-resumo { margin: 8px 0; }
.cascata-fundo { fill: #fcfcfb; stroke: none; }
.cascata-traco { fill: none; stroke: #334155; stroke-width: 1.2; stroke-linejoin: round; }
.cascata-linha:hover .cascata-traco { stroke: #eb6834; stroke-width: 2; }
.cascata-1x { fill: none; stroke: #2a78d6; stroke-width: 2; stroke-dasharray: 5 4; }
.bode-1x { fill: #2a78d6; stroke: #fcfcfb; stroke-width: 1.5; }
.bode-2x { fill: #eb6834; stroke: #fcfcfb; stroke-width: 1.5; }
.bode-fora { fill: #fcfcfb; stroke: currentColor; stroke-width: 2; }
.bode-1x.bode-fora { stroke: #2a78d6; }
.bode-2x.bode-fora { stroke: #eb6834; }
.bode-linha { fill: none; stroke: #2a78d6; stroke-width: 2; stroke-opacity: .55; }
.bode-ressonancia { fill: #fab219; fill-opacity: .16; }
.legenda-linha { display: inline-block; width: 18px; height: 0; border-top: 2px solid; vertical-align: middle; flex: none; }
.linha-cpb-mascara { border-color: #0b0b0b; }
.linha-cpb-normal { border-color: #52514e; border-top-style: dashed; }
.linha-cascata { border-color: #334155; }
.linha-cascata-1x { border-color: #2a78d6; border-top-style: dashed; }
.linha-bode { border-color: rgba(42, 120, 214, .55); }
.amostra-cpb { background: #86b6ef; border: 0; }
.amostra-cpb-acima { background: #ec835a; border: 0; }
.amostra-ressonancia { background: rgba(250, 178, 25, .3); border: 0; }
.legenda-ponto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.ponto-1x { background: #2a78d6; }
.ponto-2x { background: #eb6834; }
/* Field (M6): estados da telemetria (trabalho, estacionário, parado, transporte) */
.estado-trabalho { fill: #2a78d6; }
.estado-estacionario { fill: #1baf7a; }
.estado-parado { fill: #a8a8a2; }
.estado-transporte { fill: #eda100; }
.amostra-estado-trabalho { background: #2a78d6; border: 0; }
.amostra-estado-estacionario { background: #1baf7a; border: 0; }
.amostra-estado-parado { background: #a8a8a2; border: 0; }
.amostra-estado-transporte { background: #eda100; border: 0; }
.field-horas rect:hover { fill-opacity: .8; }
.field-indicadores { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.field-indicadores .indicador-plat-nota { line-height: 1.4; }
.field-formulas dd .lista-detalhe { display: block; font-weight: 400; }
/* Manutenção (migração 058) */
/* Código interno: só na tela técnica de integração */
.codigo-interno { display: inline-block; font-family: ui-monospace, Consolas, monospace; font-size: .75rem; font-weight: 600; color: #3f3f46;
    background: #f1f5f2; border: 1px solid #d6dfda; border-radius: 4px; padding: 0 4px; vertical-align: middle; }
.escolha-cartoes { display: grid; gap: 8px; }
.cartao-opcao { display: flex; gap: 10px; align-items: flex-start; border: 1px solid #d6dfda; border-radius: 10px; padding: 12px; min-height: var(--toque); cursor: pointer; }
.cartao-opcao input { margin-top: 4px; width: 20px; height: 20px; flex: none; }
.cartao-opcao span { display: grid; gap: 2px; }
.cartao-opcao small { color: var(--texto-suave); font-size: .85rem; }
.cartao-opcao:has(input:checked) { border-color: var(--verde-800); background: #eef6f1; box-shadow: inset 0 0 0 1px var(--verde-800); }
.relatar .campo input[type="file"] { width: 100%; padding: 12px; border: 1px dashed #9fb5a8; border-radius: 10px; background: #f8faf9; }
.botao-grande { width: 100%; min-height: 52px; font-size: 1.05rem; justify-content: center; }
.nota-foto { margin: 10px 0 0; }
.nota-foto img { display: block; max-width: 100%; max-height: 420px; border-radius: 8px; border: 1px solid #e5e7eb; }
.nota-enviada { text-align: center; padding: 24px 16px; }
.nota-enviada h2 { margin: 4px 0 8px; font-size: 1.3rem; }
.nota-enviada p { margin: 4px 0; }
.nota-enviada-icone { font-size: 3rem; color: var(--verde-700); margin: 0; }
.nota-enviada-botoes { display: grid; gap: 10px; margin-top: 20px; }
@media (min-width: 760px) { .nota-enviada-botoes { grid-template-columns: 1fr 1fr; max-width: 560px; margin: 20px auto 0; } }
.os-linha { align-items: end; }
.os-origem { background: #f1f6ff; border-left: 3px solid #1d4ed8; padding: 8px 12px; border-radius: 6px; margin-bottom: 8px; }
.os-origem p { margin: 2px 0; }
.os-acoes { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.os-acoes form { margin: 0; }
tr.linha-aviso-os td:first-child { box-shadow: inset 3px 0 0 #c2410c; }
/* Preventiva (migração 059): indicadores, calendário do mês e plano */
.prev-indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .prev-indicadores { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
a.prev-indicador { color: inherit; text-decoration: none; }
a.prev-indicador:hover, a.prev-indicador:focus-visible { box-shadow: inset 0 0 0 2px var(--verde-800); }
.prev-indicador-perigo .indicador-plat-numero { color: var(--perigo); }
.prev-cal-cabecalho { flex-wrap: wrap; gap: 8px; }
.prev-cal-nav { display: flex; gap: 6px; }
.prev-cal-nav .botao { min-width: var(--toque); justify-content: center; }
.prev-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; margin-top: 8px; }
.prev-cal-sem { font-size: .75rem; font-weight: 700; color: var(--texto-suave); text-align: center; padding: 4px 0; text-transform: uppercase; }
.prev-cal-dia { position: relative; min-height: 48px; background: #f8faf9; border-radius: 6px; padding: 4px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prev-cal-fora { background: transparent; }
.prev-cal-num { font-size: .8rem; font-weight: 600; color: var(--texto-suave); }
.prev-cal-hoje { box-shadow: inset 0 0 0 2px var(--verde-800); }
.prev-cal-hoje .prev-cal-num { color: var(--verde-900); font-weight: 800; }
.prev-cal-tem { background: #fff7ed; }
.prev-cal-vencido { background: var(--perigo-fundo); }
.prev-cal-item { display: none; font-size: .72rem; line-height: 1.25; color: var(--texto); background: #fff; border-left: 3px solid #c2410c; border-radius: 3px;
    padding: 1px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.prev-cal-vencido .prev-cal-item { border-left-color: var(--perigo); }
.prev-cal-item:hover { text-decoration: underline; }
.prev-cal-mais { display: none; font-size: .7rem; color: var(--texto-suave); }
.prev-cal-ponto { position: absolute; right: 4px; bottom: 4px; min-width: 20px; height: 20px; border-radius: 10px; background: #c2410c; color: #fff;
    font-size: .72rem; font-weight: 700; display: grid; place-items: center; padding: 0 5px; }
.prev-cal-vencido .prev-cal-ponto { background: var(--perigo); }
@media (min-width: 900px) {
    .prev-cal-dia { min-height: 92px; }
    .prev-cal-item, .prev-cal-mais { display: block; }
    .prev-cal-ponto { display: none; }
}
.prev-cal-titulo-lista { font-size: 1rem; margin: 16px 0 4px; }
.prev-data { display: inline-block; min-width: 3em; font-variant-numeric: tabular-nums; color: var(--texto-suave); font-weight: 700; }
.prev-aplicar { margin: 0; }
.prev-aplicar-ficha { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linha); }
.prev-aplicar-ficha p { margin: 0 0 8px; }
.prev-texto-grande { font-size: 1.35rem; font-weight: 800; margin: 4px 0 12px; color: var(--verde-900); }
.prev-tarefas { margin: 0; padding-left: 1.4em; display: grid; gap: 6px; }
/* Diagnóstico pela assinatura e biblioteca de falhas (migração 050) */
.diag-estado { margin: 4px 0 8px; }
.diag-normal .fa-solid { color: var(--verde-700); }
.diag-cartao { display: grid; grid-template-columns: 1fr; gap: 8px 20px; padding: 12px 0; border-top: 1px solid var(--linha); }
.diag-cartao:first-of-type { border-top: 0; }
.diag-cartao h3 { margin: 0 0 4px; font-size: 1.05rem; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.diag-cartao p { margin: 4px 0; }
.diag-confianca { width: 100%; max-width: 280px; height: 10px; }
.diag-desenho { margin: 0; }
.diag-desenho figcaption { font-size: .8rem; color: var(--texto-suave); }
@media (min-width: 760px) { .diag-cartao { grid-template-columns: 1fr 260px; } }
.falha-desenho { display: block; width: 100%; max-width: 260px; height: auto; background: var(--fundo-suave); border-radius: 6px; }
.falha-base { stroke: #94a3b8; stroke-width: 1; }
.falha-barra { fill: #94a3b8; }
.falha-barra.destaque { fill: #c2410c; }
.falha-rotulo { font-size: 8.5px; fill: var(--texto-suave); text-anchor: middle; font-family: var(--fonte); }
.falha-rotulo.destaque { fill: #9a3412; font-weight: 600; }
.falha-eixo { font-size: 8.5px; fill: var(--texto-suave); font-family: var(--fonte); }
.falhas-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.falha-cartao { display: grid; align-content: start; gap: 4px; padding: 12px; border: 1px solid var(--linha); border-radius: 8px; }
.falha-cartao h3 { margin: 0 0 4px; font-size: 1rem; }
.falha-cartao p { margin: 2px 0; font-size: .92rem; }
.falha-edicao { margin-bottom: 12px; }
/* Relatórios (migração 064) */
.rel-cartao .lista-detalhe { margin: 0 0 12px; }
.rel-em-breve { opacity: .85; }
.rel-atalhos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.rel-situacao { color: #fff; border: 0; }
.rel-situacao p { margin: 0; }
.rel-situacao-rotulo { font-size: .9rem; opacity: .9; }
.rel-situacao-nome { font-size: 1.8rem; font-weight: 800; line-height: 1.2; }
.rel-situacao-verde { background: #2e7d32; }
.rel-situacao-amarelo { background: #f2c200; color: #1c1c1c; }
.rel-situacao-laranja { background: #ef6c00; }
.rel-situacao-vermelho { background: #c62828; }
.rel-situacao-sem_dados { background: #6b7280; }
.rel-acoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.rel-acoes form { margin: 0; }
.lista li.rel-recomendacao { box-shadow: inset 3px 0 0 #1e4636; padding-left: 12px; }
.lista li.rel-prioridade-imediata { box-shadow: inset 3px 0 0 #c62828; }
.lista li.rel-prioridade-urgente { box-shadow: inset 3px 0 0 #ef6c00; }
.rel-diag { display: block; font-size: .92rem; margin-top: 4px; }
.rel-diag-aguardando { color: var(--texto-suave); font-style: italic; }
.rel-corrigir summary { cursor: pointer; color: var(--verde-800); font-weight: 600; margin-top: 6px; }
/* Relatório de manutenção (parte 3): indicadores em grade (2 por linha no celular) */
.rel-filtros-painel > summary { cursor: pointer; font-weight: 600; }
.rel-indicadores { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 8px; }
.rel-indicador { margin: 0; padding: 12px; }
.rel-indicador h2 { margin: 0; font-size: .85rem; font-weight: 600; color: var(--texto-suave); }
.rel-indicador-valor { margin: 4px 0 2px; font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.rel-indicador-var { margin: 0 0 4px; font-size: .82rem; }
.rel-indicador .lista-detalhe { font-size: .78rem; margin: 0; }
.rel-sem-dado { display: inline-block; max-width: 9em; font-size: .78rem; font-weight: 600; line-height: 1.25; color: var(--texto-suave); white-space: normal; text-align: inherit; }
.rel-indicador-valor .rel-sem-dado { max-width: none; font-size: 1rem; }
.rel-melhor { color: #166534; }
.rel-pior { color: #b91c1c; }
.rel-duas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
/* Checklists (C1): botões grandes para o dedo, as três respostas lado a lado, o crítico marcado à esquerda */
.checklist-escolhas { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 8px; }
.checklist-escolha { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 52px; padding: 10px 14px; text-align: left;
    border: 1px solid var(--borda, #d6dfda); border-radius: 10px; background: #fff; font: inherit; color: inherit; cursor: pointer; }
.checklist-escolha:disabled { opacity: .55; cursor: default; }
.checklist-escolha strong { font-size: 1.05rem; }
.checklist-itens, .checklist-respostas { list-style: none; margin: 0; padding: 0; counter-reset: item; }
.checklist-item, .checklist-resposta { padding: 12px 0 12px 12px; border-bottom: 1px solid #e5e7eb; border-left: 4px solid transparent; }
.checklist-item.critico, .checklist-resposta.resultado-nao_conforme { border-left-color: #c62828; }
.checklist-resposta.resultado-conforme { border-left-color: #2e7d32; }
.checklist-item-texto { margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.checklist-opcoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.checklist-opcao { min-height: 48px; padding: 6px; font-size: .92rem; white-space: normal; line-height: 1.15; }
.checklist-opcao[aria-checked="true"].checklist-conforme { background: #2e7d32; border-color: #2e7d32; color: #fff; }
.checklist-opcao[aria-checked="true"].checklist-nao_conforme { background: #c62828; border-color: #c62828; color: #fff; }
.checklist-opcao[aria-checked="true"].checklist-na { background: #52514e; border-color: #52514e; color: #fff; }
.checklist-nao-conforme { margin-top: 8px; display: grid; gap: 6px; }
.checklist-nao-conforme input[type="text"], .checklist-texto, .checklist-numero { width: 100%; min-height: 44px; font-size: 16px; padding: 8px 10px; border: 1px solid #c4cfc8; border-radius: 8px; }
.checklist-numero-linha { display: flex; align-items: center; gap: 6px; }
.checklist-numero-linha .checklist-numero { max-width: 12em; }
.checklist-foto-entrada { position: absolute; width: 1px; height: 1px; opacity: 0; }
.checklist-foto .botao { min-height: 44px; }
.checklist-foto-previa { display: block; max-width: 180px; max-height: 180px; margin-top: 6px; border-radius: 8px; object-fit: cover; }
.checklist-resultado { font-size: 1.15rem; font-weight: 700; margin: 0 0 8px; }
.checklist-resultado.salvo { color: #7a4b00; }
.checklist-resultado.enviado.conforme { color: #166534; }
.checklist-resultado.enviado.critico { color: #b91c1c; }
.checklist-fila-aviso { font-weight: 600; }
.checklist-item-edicao { padding: 10px 0; border-bottom: 1px solid #e5e7eb; }
/* Gráficos do relatório de manutenção: tons escuro, médio e claro (distintos também em preto e branco) */
.relman-graficos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 4px 18px; min-width: 0; }
.relman-figura { min-width: 0; margin: 4px 0 12px; }
.relman-figura .rel-sem-dado { max-width: none; font-size: .88rem; padding: 18px 0; }
.relman-figura .legenda { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0; padding: 0; list-style: none; font-size: .82rem; }
.relman-figura .legenda li { display: flex; align-items: center; gap: 6px; }
.relman-grafico .svg-eixo { font-size: 14px; }
.relman-escuro { fill: #1e4636; }
.relman-medio { fill: #1fa38a; }
.relman-claro { fill: #c9e7dc; stroke: #1e4636; stroke-width: 1; }
.relman-grafico rect:hover { fill-opacity: .85; }
.relman-linha { fill: none; stroke: #1e4636; stroke-width: 2; stroke-linejoin: round; }
.relman-ponto { fill: #1e4636; stroke: #fcfcfb; stroke-width: 2; }
.relman-rotulo { font-size: 14px; font-weight: 700; fill: var(--texto); }
.relman-acumulado { fill: none; stroke: #0f172a; stroke-width: 1.5; stroke-dasharray: 5 3; }
.relman-acumulado-ponto { fill: #0f172a; }
.relman-amostra-escuro { background: #1e4636; border: 0; }
.relman-amostra-medio { background: #1fa38a; border: 0; }
.relman-amostra-claro { background: #c9e7dc; border: 1px solid #1e4636; }
.relman-amostra-linha { height: 0; border: 0; border-top: 3px solid #1e4636; border-radius: 0; }
.relman-amostra-acumulado { height: 0; border: 0; border-top: 2px dashed #0f172a; border-radius: 0; }
.rel-duas > .painel { margin: 0; }
.diag-recomendacao { margin: 10px 0; padding: 10px 12px; border-radius: 8px; background: #f3f9f5; box-shadow: inset 3px 0 0 #1e4636; }
.diag-recomendacao p { margin: 4px 0; }
.diag-prioridade-imediata { box-shadow: inset 3px 0 0 #c62828; }
.diag-prioridade-urgente { box-shadow: inset 3px 0 0 #ef6c00; }
.diag-recomendar summary { cursor: pointer; font-weight: 600; color: var(--verde-800); margin: 8px 0; }
.assinatura-atual { margin: 0 0 12px; }
.assinatura-atual img { display: block; max-width: 280px; max-height: 120px; background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; padding: 6px; }
.assinatura-atual figcaption { font-size: .85rem; color: var(--texto-suave); }
.cliente-logo { display: block; max-width: 220px; max-height: 90px; margin: 4px 0 8px; border: 1px solid #e5e7eb; border-radius: 6px; padding: 4px; background: #fff; }/* Sininho (migração 060): no topo do celular e no menu lateral do computador */
.sino { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--verde-900); text-decoration: none; }
.sino-topo { flex: none; width: 44px; height: 44px; border-radius: 50%; font-size: 1.25rem; }
.sino-topo:hover, .sino-topo:focus-visible { background: var(--fundo); }
.sino-numero { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--perigo); color: #fff; font-size: .72rem; font-weight: 800;
    line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.sino-topo .sino-numero { position: absolute; top: 2px; right: 0; border: 2px solid var(--superficie); line-height: 16px; }
.sino-lateral { margin-top: 6px; font-size: .9rem; font-weight: 600; }
.sino-lateral { justify-self: start; }
.sino-lateral span { color: var(--verde-900); overflow: visible; }
.usuario-dados .sino-lateral .sino-numero { margin-left: 2px; color: #fff; overflow: visible; }
.notif-ler-todas { margin: 0 0 8px; display: flex; justify-content: flex-end; }
.notif-lista li { padding: 0; }
.notif-item a { display: flex; gap: 12px; align-items: flex-start; padding: 12px 8px; color: inherit; text-decoration: none; border-radius: 8px; }
.notif-item a:hover, .notif-item a:focus-visible { background: var(--fundo); }
.notif-icone { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #eef2f0; color: var(--verde-900); }
.notif-perigo .notif-icone { background: var(--perigo-fundo); color: var(--perigo); }
.notif-aviso .notif-icone { background: #fff7ed; color: #c2410c; }
.notif-manutencao .notif-icone { background: #eff6ff; color: #1d4ed8; }
.notif-texto { display: grid; gap: 2px; min-width: 0; }
.notif-texto strong { font-weight: 600; overflow-wrap: anywhere; }
.notif-item:not(.notif-nao-lida) .notif-texto > strong { font-weight: 500; color: var(--texto-suave); }
.notif-nao-lida a { background: #f3f9f5; box-shadow: inset 3px 0 0 var(--verde-800); }
.notif-nao-lida .notif-texto > strong { font-weight: 800; }
.rodape-fuso { margin: 24px 0 8px; font-size: .8rem; color: var(--texto-suave); text-align: right; }
.notif-regras { margin: 4px 0 0; padding-left: 18px; }
.notif-estado { margin: 4px 0; font-weight: 600; }
.notif-situacao { display: block; font-size: .85rem; color: var(--texto-suave); overflow-wrap: anywhere; }
.form-linha { display: inline; margin-left: 8px; }
.diag-aviso { margin: 4px 0 8px; padding: 8px 12px; background: #f1f5f9; border-left: 3px solid #64748b; border-radius: 4px; font-size: .92rem; }
.diag-resposta { margin-top: 8px; padding: 6px 10px; background: var(--verde-50); border-radius: 6px; }
.diag-responder { margin-top: 10px; display: grid; gap: 8px; }
.diag-responder-botoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.diag-corrigir select { min-height: 36px; max-width: 100%; padding: 4px 8px; font-size: 16px; }
.diag-observacao { display: grid; gap: 2px; font-size: .85rem; color: var(--texto-suave); }
.diag-observacao input { min-height: 36px; padding: 4px 8px; font-size: 16px; }

/* ---------------------------------------------------------------- Assistente (A1) */
.assistente-botao { position: fixed; right: 14px; bottom: calc(var(--atalhos) + 16px + env(safe-area-inset-bottom, 0px)); z-index: 40;
    border-radius: 999px; padding: 10px 18px; box-shadow: 0 4px 14px rgba(0, 0, 0, .22); }
body:not(.com-atalhos) .assistente-botao { bottom: 18px; }
@media (min-width: 1024px) { .assistente-botao { bottom: 22px; right: 22px; } }
body.assistente-aberto { overflow: hidden; }
.assistente-painel { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: var(--fundo); }
@media (min-width: 1024px) {
    .assistente-painel { left: auto; width: 420px; border-left: 1px solid var(--borda); box-shadow: -6px 0 24px rgba(0, 0, 0, .15); }
    body.assistente-aberto { overflow: auto; }
}
.assistente-topo { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; background: var(--superficie); border-bottom: 1px solid var(--linha); }
.assistente-topo > .fa-solid { font-size: 1.4rem; color: var(--floresta); }
.assistente-topo > div { flex: 1; display: grid; }
.assistente-topo strong { font-size: 1.05rem; }
.assistente-fechar { min-width: var(--toque); }
.assistente-lista { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; -webkit-overflow-scrolling: touch; }
.assistente-onde { margin: 0; text-align: center; }
.assistente-msg { max-width: 92%; padding: 10px 14px; border-radius: 16px; overflow-wrap: anywhere; }
.assistente-pessoa { align-self: flex-end; max-width: 82%; background: var(--floresta); color: #fff; border-bottom-right-radius: 4px; white-space: pre-wrap; }
.assistente-resposta { align-self: flex-start; background: var(--superficie); border-bottom-left-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.assistente-texto > :first-child { margin-top: 0; }
.assistente-texto > :last-child { margin-bottom: 8px; }
.assistente-texto h3 { margin: 12px 0 4px; font-size: 1rem; }
.assistente-texto ol, .assistente-texto ul { margin: 6px 0; padding-left: 22px; line-height: 1.45; }
.assistente-texto p { margin: 6px 0; line-height: 1.45; }
.assistente-abrir { margin: 4px 0; }
.assistente-fonte { margin: 8px 0 6px; font-size: .85rem; }
.assistente-avaliar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.assistente-avaliar [aria-pressed="true"] { background: var(--verde-50); border-color: var(--floresta); }
.assistente-sugestoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.assistente-sugestoes > .lista-detalhe { width: 100%; }
.assistente-aviso { margin: 0; align-self: center; font-size: .9rem; color: var(--texto-suave); text-align: center; }
.assistente-erro { color: var(--perigo); }
.assistente-pessoa-form { display: grid; gap: 8px; width: 92%; }
.assistente-pessoa-form p { margin: 0; }
.assistente-pessoa-form textarea { width: 100%; font: inherit; font-size: 16px; padding: 10px; border: 1px solid var(--borda-campo); border-radius: var(--raio); }
.assistente-pedido { background: var(--fundo-suave); }
.assistente-pedido p { margin: 4px 0; }
.assistente-rodape { background: var(--superficie); border-top: 1px solid var(--linha); padding: 10px 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
.assistente-form { display: flex; gap: 8px; }
.assistente-form input { flex: 1; min-width: 0; min-height: var(--toque); font-size: 16px; padding: 10px 12px; border: 1px solid var(--borda-campo); border-radius: var(--raio); }
.assistente-form .botao { min-width: var(--toque); }
.assistente-nota { margin: 8px 0 0; display: flex; justify-content: space-between; gap: 10px; font-size: .8rem; }
.assistente-link { background: none; border: 0; padding: 0; color: var(--floresta); text-decoration: underline; font: inherit; cursor: pointer; text-align: right; min-height: 24px; }
.assistente-msg > p { margin: 4px 0; line-height: 1.45; }

/* "A Preserve mudou de endereço" (public/mudou/, PLANO 13.7): a página simples, centralizada */
.mudou { max-width: 560px; margin: 0 auto; display: grid; gap: 12px; }
.mudou h1 { margin: 0; font-size: 1.5rem; color: var(--floresta); }
.mudou p, .mudou ol { margin: 0; line-height: 1.5; }
.mudou ol { padding-left: 1.3em; display: grid; gap: 6px; }
.mudou-app { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie); }
.mudou-iphone { display: grid; gap: 10px; }
.mudou-iphone[hidden] { display: none; }
.mudou-safari { font-size: 1.1rem; }
/* No celular, a barra fina dá o espaço ao título: o botão do modo só com o ícone e o ⇄ (o nome fica no aria-label), sem o detalhe */
@media (max-width: 600px) {
    .barra-fina .barra-fina-rotulo, .barra-fina-titulo span { display: none; }
}

/* A área do conteúdo é uma grade: sem isto, o instrumento não encolhia abaixo da largura dos 7 nomes das etapas, e no celular
   a página passava da tela (426 px numa de 390; desde 8.92). As etapas encolhem com reticências */
.bal-instrumento { min-width: 0; }