/* VIS1 (redesenho visual, fase 1): kit de componentes k-* sobre os tokens --v-* (tokens-v2.css). Carregado DEPOIS do app.css, que fica intocado
   até a fase 8: a classe nova SOMA à antiga (class="caixa k-login-form") e vence por ordem, com a mesma especificidade. Só o que esta fase usa
   (botão, campo, aviso e o login); os demais componentes entram com a fase que os usar. Mobile-first: base = celular, divide a partir de 761 px.
   Contraste, foco e alvos medidos em frontend/tests/kit.test.mjs. */

/* --- Botão: primário (amarelo, texto escuro), secundário (borda), fantasma (só texto) --- */
.k-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--v-space-2);
    min-height: var(--v-alvo); margin: 0; padding: 0 var(--v-space-4);
    border: 1px solid transparent; border-radius: var(--v-radius-ctl);
    background: none; color: var(--v-ink);
    font: 700 var(--v-t-sm)/1.2 var(--v-font-body); text-decoration: none; white-space: nowrap; cursor: pointer;
}
.k-btn:focus-visible { outline: 3px solid var(--v-info); outline-offset: 2px; }
.k-btn--pri { background: var(--v-action); color: var(--v-action-ink); }
/* .login-criar: o link "Criar conta" é casado como HTML exato (s6h.test), então recebe o visual do secundário por aqui, sem classe nova */
.k-btn--sec, .k-login-form .login-criar { background: var(--v-surface); border-color: var(--v-ink-3); color: var(--v-ink); border-radius: var(--v-radius-ctl); }
.k-btn--sec:hover, .k-login-form .login-criar:hover { background: var(--v-surface-2); border-color: var(--v-ink-3); }
.k-btn--fantasma { padding: 0 var(--v-space-3); color: var(--v-ink-2); }
.k-btn--fantasma:hover { background: var(--v-surface-2); color: var(--v-ink); }

/* --- Campo: rótulo em cima, campo de 44 px, ajuda e erro embaixo; senha com o botão Mostrar dentro do campo --- */
.k-campo { display: grid; gap: var(--v-space-2); }
.k-campo label { display: flex; align-items: center; gap: var(--v-space-1); margin: 0; font-size: var(--v-t-sm); font-weight: 700; color: var(--v-ink); }
.k-campo input {
    width: 100%; height: var(--v-alvo); padding: 0 var(--v-space-3);
    border: 1px solid var(--v-ink-3); border-radius: var(--v-radius-ctl);
    background: var(--v-surface); color: var(--v-ink); font: 400 var(--v-t-md)/1.2 var(--v-font-body);
}
.k-campo input:focus { outline: 3px solid var(--v-info); outline-offset: 2px; border-color: var(--v-info); }
.k-campo--erro input { border-color: var(--v-err); border-width: 2px; }
.k-campo-ajuda { margin: 0; font-size: var(--v-t-sm); line-height: 1.45; color: var(--v-ink-3); }
.k-campo-erro { display: flex; gap: var(--v-space-2); margin: 0; font-size: var(--v-t-sm); font-weight: 700; color: var(--v-err); }
.k-campo + .k-btn--fantasma { margin-top: var(--v-space-3); }
.k-campo-senha { position: relative; }
.k-campo-senha input { padding-right: 120px; }
.k-campo-olho {
    position: absolute; top: 0; right: 0; height: var(--v-alvo); min-height: var(--v-alvo); min-width: var(--v-alvo);
    margin: 0; padding: 0 var(--v-space-3); display: inline-flex; align-items: center; gap: 6px;
    border: 0; border-radius: 0 var(--v-radius-ctl) var(--v-radius-ctl) 0; background: none; color: var(--v-ink-2);
    font: 700 var(--v-t-sm)/1 var(--v-font-body);
}
.k-campo-olho:hover { background: none; color: var(--v-ink); }
.k-campo-olho:focus-visible { outline: 3px solid var(--v-info); outline-offset: -3px; }

/* --- VIS4: ajuda no termo. k-dica = ícone de ajuda logo depois do rótulo (alvo 44x44; a margem negativa evita que a linha do rótulo cresça e anula o
   margin/padding/fundo do button global do app.css); k-popover = a dica global (#kPopover, js/ajuda.js), fixa na tela, acima do .modal-fundo (2000). --- */
.k-dica {
    display: inline-grid; place-items: center; flex: none; width: var(--v-alvo); height: var(--v-alvo); margin: -12px -10px -12px -4px; padding: 0;
    border: 0; border-radius: 50%; background: none; color: var(--v-info); vertical-align: middle; cursor: pointer;
}
.k-dica .ic { width: 20px; height: 20px; }
.k-dica:hover { background: none; color: var(--v-ink); }
.k-dica[aria-expanded="true"] { color: var(--v-ink); }
.k-dica:focus-visible { outline: 3px solid var(--v-info); outline-offset: -3px; }
/* rótulo + ícone na mesma linha; o campo e a ajuda descem para a linha de baixo (só nos campos que têm o ícone) */
.form-group:has(> .k-dica) { display: flex; flex-wrap: wrap; align-items: center; }
.form-group:has(> .k-dica) > * { flex: 1 0 100%; }
.form-group:has(> .k-dica) > .form-label, .form-group:has(> .k-dica) > .k-dica { flex: none; }
.k-popover {
    position: fixed; z-index: 2100; width: max-content; max-width: min(340px, calc(100vw - 16px)); display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--v-space-2); padding: var(--v-space-3) var(--v-space-2) var(--v-space-3) var(--v-space-4);
    border: 1px solid var(--v-line); border-radius: 12px; background: var(--v-surface); box-shadow: var(--v-shadow-2);
    color: var(--v-ink-2); font: 400 var(--v-t-sm)/1.5 var(--v-font-body);
}
.k-popover[hidden] { display: none; }
.k-popover::before {
    content: ""; position: absolute; top: -7px; left: calc(var(--seta, 24px) - 6px); width: 12px; height: 12px; transform: rotate(45deg);
    border-left: 1px solid var(--v-line); border-top: 1px solid var(--v-line); background: var(--v-surface);
}
.k-popover--acima::before { top: auto; bottom: -7px; transform: rotate(225deg); }
.k-popover-txt { padding-top: var(--v-space-1); }
.k-popover-txt p { margin: 0; }
.k-popover-txt p + p { margin-top: var(--v-space-2); }
.k-popover strong { color: var(--v-ink); }
.k-popover-x { min-width: var(--v-alvo); padding: 0; }

/* --- VIS4: estado vazio que ensina (o que é a tela, por que está vazia, botão de ação). Soma ao .vazio do app.css (class="vazio k-vazio"). --- */
.k-vazio { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v-space-4); justify-items: start; align-items: start; padding: var(--v-space-5) var(--v-space-4); text-align: left; color: var(--v-ink-2); font-size: var(--v-t-sm); }
.k-vazio > .ic { width: 72px; height: 72px; padding: 20px; border-radius: 20px; background: var(--v-surface-2); color: var(--v-ink-2); }
.k-vazio-tit { margin: 0; font: 700 var(--v-t-lg)/1.3 var(--v-font-display); color: var(--v-ink); }
.k-vazio p { margin: 0; max-width: 56ch; line-height: 1.5; }
.k-vazio p + p { margin-top: var(--v-space-2); }
.k-vazio .k-btn { margin-top: var(--v-space-4); }

/* --- Aviso (faixa acima do formulário) --- */
.k-aviso { gap: var(--v-space-3); padding: var(--v-space-3) var(--v-space-4); border-radius: var(--v-radius-ctl); background: var(--v-warn-bg); color: var(--v-warn); font-size: var(--v-t-sm); }

/* --- Login, troca de senha e termos: celular = logo pequeno no topo, promessa em uma linha e o formulário logo abaixo, sem rolar a 390x700 --- */
.k-login-marca { width: auto; flex: none; display: flex; flex-direction: column; gap: var(--v-space-1); padding: var(--v-space-4) var(--v-space-4) 0; background: var(--v-surface); color: var(--v-ink); }
.k-login-logo { display: flex; align-items: center; gap: var(--v-space-2); font: 800 var(--v-t-md)/1 var(--v-font-display); letter-spacing: -.02em; color: var(--v-brand); }
.k-login-logo .marca-icone { width: 28px; height: 28px; }
.k-login-marca h1 { margin: 0; max-width: none; font: 400 var(--v-t-sm)/1.5 var(--v-font-body); letter-spacing: 0; color: var(--v-ink-2); }
.k-login-resto, .k-login-passos, .k-login-rodape, .k-login-marca > p { display: none; }
.k-login-passos li { display: grid; grid-template-columns: var(--v-alvo) 1fr; gap: var(--v-space-4); align-items: start; }
.k-login-ico { width: var(--v-alvo); height: var(--v-alvo); display: grid; place-items: center; border-radius: 12px; background: var(--v-surface); color: var(--v-brand); }
.k-login-passos p { margin: 0; font-size: var(--v-t-sm); line-height: 1.5; color: var(--v-ink-2); }
.k-login-passos strong { display: block; font: 700 var(--v-t-md)/1.35 var(--v-font-display); color: var(--v-ink); }
.k-login-lado { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: var(--v-space-5) var(--v-space-4) var(--v-space-6); background: var(--v-surface); }
.k-login-form { max-width: 400px; gap: var(--v-space-4); font-family: var(--v-font-body); color: var(--v-ink); }
.k-login-form h2 { font: 800 var(--v-t-xl)/1.2 var(--v-font-display); letter-spacing: -.015em; color: var(--v-ink); }
.k-login-sub { margin: var(--v-space-1) 0 0; font-size: var(--v-t-md); color: var(--v-ink-2); }
.k-login-nota { margin: 0; font-size: var(--v-t-sm); line-height: 1.5; color: var(--v-ink-2); }
.k-login-campos { display: grid; gap: var(--v-space-4); }
.k-login-form .k-btn--pri, .k-login-form .k-btn--sec { width: 100%; }

/* --- VIS3: Início por cargo. #solar_inicio_corpo leva .k-inicio: os blocos antigos (.card, .painel-kpis, .kpi) ganham o visual do mock pelo contexto e as
   peças novas (Para resolver hoje, Atenção em grupos, Primeiros passos) têm classe própria. Celular = uma coluna; os pares de colunas entram a partir de 761 px. --- */
.k-inicio { display: grid; gap: var(--v-space-4); font-family: var(--v-font-body); }
.k-inicio > * { margin: 0; }
.k-inicio .card { margin: 0; padding: var(--v-space-4); border: 1px solid var(--v-line); border-radius: var(--v-radius-card); background: var(--v-surface); box-shadow: var(--v-shadow-1); color: var(--v-ink); }
.k-inicio .card-titulo { font: 700 var(--v-t-lg)/1.3 var(--v-font-display); color: var(--v-ink); }
.k-inicio-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--v-space-1) var(--v-space-3); margin-bottom: var(--v-space-3); }
.k-inicio-cab .card-titulo { margin: 0; }
.k-inicio-sub { margin: 0; font-size: var(--v-t-sm); color: var(--v-ink-3); }
.k-inicio-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v-space-1) var(--v-space-2); margin: var(--v-space-1) 0 0; font-size: var(--v-t-sm); line-height: 1.4; color: var(--v-ink-3); overflow-wrap: anywhere; }
/* Para resolver hoje: lista numerada (o número é do <ol>; o círculo é só visual) */
.k-inicio-hoje, .k-inicio-passos { list-style: none; margin: 0; padding: 0; }
.k-inicio-hoje { counter-reset: hoje; }
.k-inicio-hoje-item, .k-inicio-passo { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--v-space-2) var(--v-space-3); align-items: start; padding: var(--v-space-3) 0; border-top: 1px solid var(--v-line); }
.k-inicio-hoje-item:first-child, .k-inicio-passo:first-child { border-top: 0; }
.k-inicio-hoje-item:first-child { padding-top: 0; }
.k-inicio-hoje-item::before { counter-increment: hoje; content: counter(hoje); width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--v-surface-2); color: var(--v-ink); font: 800 var(--v-t-sm)/1 var(--v-font-display); }
.k-inicio-hoje-item > .k-btn, .k-inicio-passo > .k-btn { grid-column: 2; justify-self: start; }
.k-inicio-hoje-tit { margin: 0; font: 700 var(--v-t-md)/1.3 var(--v-font-body); color: var(--v-ink); }
/* números: um cartão só, 4 células com linha entre elas; no celular o primeiro ocupa a linha toda */
.k-inicio-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; overflow: hidden; border: 1px solid var(--v-line); border-radius: var(--v-radius-card); background: var(--v-surface); box-shadow: var(--v-shadow-1); }
.k-inicio-numeros .kpi { min-width: 0; padding: var(--v-space-4) var(--v-space-3); border: 0; border-left: 1px solid var(--v-line); border-radius: 0; background: var(--v-surface); color: var(--v-ink); }
.k-inicio-numeros .kpi:first-child { grid-column: 1 / -1; border-left: 0; border-bottom: 1px solid var(--v-line); }
.k-inicio-numeros .kpi:nth-child(2) { border-left: 0; }
.k-inicio-numeros .kpi-rotulo { font-size: var(--v-t-sm); color: var(--v-ink-2); }
.k-inicio-numeros .kpi-valor { color: var(--v-ink); }
.k-inicio-numeros .kpi-sub { font-size: var(--v-t-sm); color: var(--v-ink-3); }
/* Atenção em grupos */
.k-inicio-grupos { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v-space-3); }
.k-inicio-grp { display: grid; gap: var(--v-space-2); align-content: start; padding: var(--v-space-3) var(--v-space-4); border: 1px solid var(--v-line); border-radius: var(--v-radius-ctl); }
.k-inicio-grp-cab { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v-space-2); }
.k-inicio-grp-tit { margin: 0 auto 0 0; font: 700 var(--v-t-md)/1.3 var(--v-font-display); color: var(--v-ink); }
.k-inicio-grp-lista { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; font-size: var(--v-t-sm); line-height: 1.45; color: var(--v-ink-2); }
.k-inicio-grp-acoes { display: flex; flex-wrap: wrap; gap: 0 var(--v-space-2); margin-left: calc(-1 * var(--v-space-3)); }
/* Primeiros passos */
.k-inicio-passos-barra { display: block; width: 100%; height: 8px; border: 0; border-radius: 999px; overflow: hidden; appearance: none; -webkit-appearance: none; background: var(--v-surface-2); }
.k-inicio-passos-barra::-webkit-progress-bar { background: var(--v-surface-2); }
.k-inicio-passos-barra::-webkit-progress-value { background: var(--v-ok); }
.k-inicio-passos-barra::-moz-progress-bar { background: var(--v-ok); }
.k-inicio-passos { margin-top: var(--v-space-2); }
.k-inicio-passo { grid-template-columns: 40px minmax(0, 1fr); }
.k-inicio-passo-n { width: 40px; height: 40px; display: grid; place-items: center; border: 2px solid var(--v-line); border-radius: 50%; font: 800 var(--v-t-sm)/1 var(--v-font-display); color: var(--v-ink-2); }
.k-inicio-passo-n .ic { width: 20px; height: 20px; }
.k-inicio-passo-n--feito { border-color: var(--v-ok-bg); background: var(--v-ok-bg); color: var(--v-ok); }
.k-inicio-passo-n--agora { border-color: var(--v-brand); color: var(--v-brand); }
.k-inicio-pe { margin-top: var(--v-space-2); padding-top: var(--v-space-2); border-top: 1px solid var(--v-line); }
.k-inicio-pe .k-btn { margin-left: calc(-1 * var(--v-space-3)); }
@media (min-width: 761px) {
    .k-inicio { gap: var(--v-space-5); }
    .k-inicio .card { padding: var(--v-space-5); }
    .k-inicio-hoje-item { grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; }
    .k-inicio-hoje-item::before { width: 36px; height: 36px; }
    .k-inicio-passo { grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; }
    .k-inicio-hoje-item > .k-btn, .k-inicio-passo > .k-btn { grid-column: auto; }
    .k-inicio-numeros { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); }
    .k-inicio-numeros .kpi { padding: var(--v-space-5); }
    .k-inicio-numeros .kpi:first-child { grid-column: auto; border-bottom: 0; }
    .k-inicio-numeros .kpi:nth-child(2) { border-left: 1px solid var(--v-line); }
    .k-inicio-grupos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--v-space-4); }
}

@media (min-width: 761px) {
    /* o app.css empilha estas telas até 960 px com regra de ID (#telaLogin:not(.oculto)); para dividir desde 761 px o kit precisa do mesmo peso. Sai na fase 8. */
    :is(#telaLogin, #telaTroca, #telaTermos):not(.oculto) { flex-direction: row; }
    .k-login-marca, .k-login-lado { flex: 1 1 0; min-width: 0; }
    .k-login-marca { gap: var(--v-space-5); padding: var(--v-space-7) clamp(var(--v-space-5), 5vw, var(--v-space-8)); background: var(--v-surface-2); }
    .k-login-logo { font-size: var(--v-t-lg); }
    .k-login-logo .marca-icone { width: 32px; height: 32px; }
    .k-login-marca h1 { max-width: 15ch; margin-top: var(--v-space-5); font: 800 clamp(30px, 3.4vw, 44px)/1.12 var(--v-font-display); letter-spacing: -.03em; color: var(--v-ink); }
    .k-login-resto { display: inline; }
    .k-login-marca > p { display: block; max-width: 440px; margin: 0; font-size: var(--v-t-md); line-height: 1.5; color: var(--v-ink-2); }
    .k-login-passos { display: grid; gap: var(--v-space-5); max-width: 420px; margin: var(--v-space-5) 0 0; padding: 0; list-style: none; }
    .k-login-rodape { display: block; margin-top: auto; font-size: var(--v-t-sm); color: var(--v-ink-3); }
    .k-login-lado { align-items: center; padding: var(--v-space-7) clamp(var(--v-space-5), 5vw, var(--v-space-8)); }
    .k-login-form h2 { font-size: var(--v-t-2xl); }
    .k-vazio { grid-template-columns: 72px minmax(0, 1fr); gap: var(--v-space-5); }
}

/* --- VIS5a: Clientes e Propostas (lista). .k-tela = o cartão antigo da tela vira página (título grande, busca, atalhos); a lista ganha o visual.
   Clientes: o MESMO <table> é cartão no celular (uma coluna; duas a partir de 761 px) e tabela a partir de 1100 px (decisão do usuário: tabela no
   computador). A ficha abre num painel por cima da lista (.k-painel, acima do topo e da barra inferior, abaixo dos avisos e dos modais). --- */
.k-tela { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; font-family: var(--v-font-body); }
.k-tela-cab { flex-wrap: wrap; align-items: flex-end; gap: var(--v-space-3); margin-bottom: var(--v-space-4); }
.k-tela-tit { font: 800 var(--v-t-xl)/1.15 var(--v-font-display); letter-spacing: -.02em; color: var(--v-ink); }
.k-tela-cab .k-btn { margin: 0; }
/* "Baixar CSV": o ux3b casa o HTML exato do botão (class="btn"), então o visual de botão fantasma vem pelo contexto, sem classe nova */
.k-tela-cab .btn:not(.k-btn) { min-height: var(--v-alvo); margin: 0; padding: 0 var(--v-space-3); border-color: transparent; background: none; color: var(--v-ink-2); font: 700 var(--v-t-sm)/1.2 var(--v-font-body); }
.k-tela-cab .btn:not(.k-btn):hover { background: var(--v-surface-2); color: var(--v-ink); }
.k-tela-cab .btn:not(.k-btn):focus-visible { outline: 3px solid var(--v-info); outline-offset: 2px; }
.k-tela-busca { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--v-space-3); align-items: end; }
.k-tela select.form-control { height: var(--v-alvo); border: 1px solid var(--v-ink-3); border-radius: var(--v-radius-ctl); background-color: var(--v-surface); color: var(--v-ink); }
.k-atalhos { display: flex; flex-wrap: wrap; gap: var(--v-space-2); margin: 0 0 var(--v-space-4); }
.k-chip {
    display: inline-flex; align-items: center; gap: var(--v-space-1); min-height: var(--v-alvo); margin: 0; padding: 0 var(--v-space-4);
    border: 1px solid var(--v-line); border-radius: 999px; background: var(--v-surface); color: var(--v-ink);
    font: 700 var(--v-t-sm)/1.2 var(--v-font-body); white-space: nowrap; cursor: pointer;
}
.k-chip:hover { filter: none; background: var(--v-surface-2); }
.k-chip:focus-visible { outline: 3px solid var(--v-info); outline-offset: 2px; }
.k-chip[aria-pressed="true"] { border-color: var(--v-ink); background: var(--v-ink); color: var(--v-surface); }
.k-chip-info { background: var(--v-info-bg); color: var(--v-info); }

/* Clientes: cartões (celular) */
.k-cli-tabela { display: block; width: 100%; background: none; font-size: var(--v-t-sm); }
.k-cli-tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.k-cli-tabela tbody { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v-space-3); }
.k-cli-tabela tr.linha {
    display: grid; gap: var(--v-space-1); padding: var(--v-space-4); border: 1px solid var(--v-line); border-radius: var(--v-radius-card);
    background: var(--v-surface); box-shadow: var(--v-shadow-1); color: var(--v-ink);
}
.k-cli-tabela td { display: block; min-width: 0; padding: 0; border: 0; overflow-wrap: anywhere; }
.k-cli-tabela .linha-titulo { display: block; overflow: visible; white-space: normal; font: 700 var(--v-t-md)/1.3 var(--v-font-display); color: var(--v-ink); }
.k-cli-sub { color: var(--v-ink-3); }
.k-cli-nome .k-cli-sub { display: block; }
.k-cli-local .k-cli-sub::before { content: " · "; }
.k-cli-vend { color: var(--v-ink-3); }
.k-cli-vend::before { content: "Vendedor: "; }
.k-cli-sit { padding-top: var(--v-space-1); }
.k-cli-tabela .k-cli-acoes { display: flex; flex-wrap: wrap; gap: var(--v-space-2); margin-top: var(--v-space-2); padding-top: var(--v-space-3); border-top: 1px solid var(--v-line); }
.k-cli-acoes .k-btn { flex: 1 1 auto; margin: 0; }

/* Propostas: cartão no celular, três colunas a partir de 761 px */
.k-prop-linha {
    display: grid; gap: var(--v-space-3); margin-bottom: var(--v-space-3); padding: var(--v-space-4); border: 1px solid var(--v-line); border-radius: var(--v-radius-card);
    background: var(--v-surface); box-shadow: var(--v-shadow-1); color: var(--v-ink);
}
.k-prop-linha .linha-titulo { overflow: visible; white-space: normal; font: 700 var(--v-t-md)/1.3 var(--v-font-display); color: var(--v-ink); }
.k-prop-linha .linha-fraca { font-size: var(--v-t-sm); color: var(--v-ink-3); }
.k-prop-preco { display: block; margin-top: var(--v-space-1); font: 800 var(--v-t-lg)/1.2 var(--v-font-display); color: var(--v-ink); }
.k-prop-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--v-space-1); }
.k-prop-acoes { display: flex; flex-wrap: wrap; gap: var(--v-space-2); }
.k-prop-acoes .k-btn { flex: 1 1 auto; margin: 0; }
.k-explica { margin: 0 0 var(--v-space-4); border: 1px solid var(--v-line); border-radius: var(--v-radius-ctl); background: var(--v-surface); color: var(--v-ink-2); font-size: var(--v-t-sm); }
.k-explica summary { display: flex; align-items: center; min-height: var(--v-alvo); padding: 0 var(--v-space-4); font-weight: 700; color: var(--v-ink); cursor: pointer; }
.k-explica summary:focus-visible { outline: 3px solid var(--v-info); outline-offset: 2px; }
.k-explica dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--v-space-2) var(--v-space-4); margin: 0; padding: 0 var(--v-space-4) var(--v-space-3); }
.k-explica dt { font-weight: 700; color: var(--v-ink); }
.k-explica dd { margin: 0; }
.k-explica-nota { margin: 0; padding: 0 var(--v-space-4) var(--v-space-3); }

/* Painel da ficha: a área toda do conteúdo no celular, coluna à direita no computador. O fundo escuro é o ::before (o kit não tem cor solta nem rgba). */
/* O .tab-pane do app.css anima com transform e fill-mode forwards: o translateY(0) que fica no fim vira bloco de contenção do position: fixed e o
   painel ficaria preso dentro da aba, abaixo do topo. O estado final da animação é igual ao sem transform, então a aba Clientes só não o retém. */
#solar_clientes { animation-fill-mode: none; }
/* Só a área do conteúdo: abaixo do topo (--ml-topo), à direita do menu lateral (--ml-w) e acima da barra inferior (--ml-base), variáveis do menu.css
   (sem o data-nav, 0). z-index 1: abaixo da folha do menu (2), da barra inferior (25), do topo (30), dos avisos (1000) e dos modais (2000). */
.k-painel-fundo { position: fixed; top: var(--ml-topo, 0px); right: 0; bottom: var(--ml-base, 0px); left: var(--ml-w, 0px); z-index: 1; display: flex; justify-content: flex-end; }
.k-painel-fundo[hidden] { display: none; }
.k-painel-fundo::before { content: ""; position: absolute; inset: 0; background: var(--v-ink); opacity: .45; }
.k-painel {
    position: relative; width: 100%; height: 100%; overflow-y: auto; overscroll-behavior: contain;
    padding: 0 var(--v-space-4) calc(var(--v-space-6) + env(safe-area-inset-bottom, 0px)); background: var(--v-bg); color: var(--v-ink); box-shadow: var(--v-shadow-2);
}
.k-painel-cab {
    position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--v-space-3);
    margin: 0 calc(-1 * var(--v-space-4)) var(--v-space-4); padding: var(--v-space-3) var(--v-space-4); border-bottom: 1px solid var(--v-line); background: var(--v-surface);
}
.k-painel-tit { margin: 0; font: 800 var(--v-t-lg)/1.2 var(--v-font-display); color: var(--v-ink); }
.k-painel-cab .k-btn { margin: 0; }
.k-painel .card { margin-bottom: var(--v-space-4); }
.k-retorno {
    display: grid; gap: var(--v-space-2); justify-items: start; margin: 0 0 var(--v-space-4); padding: var(--v-space-4);
    border: 1px solid var(--v-line); border-left: 4px solid var(--v-ink-3); border-radius: var(--v-radius-ctl); background: var(--v-surface); color: var(--v-ink);
}
.k-retorno--atrasado { border-left-color: var(--v-err); }
.k-retorno--hoje { border-left-color: var(--v-action); }
.k-retorno-tit { margin: 0; font: 700 var(--v-t-md)/1.3 var(--v-font-display); color: var(--v-ink); }
.k-retorno-sub { margin: 0; font-size: var(--v-t-sm); color: var(--v-ink-3); }
.k-retorno-nota { margin: 0; color: var(--v-ink-2); overflow-wrap: anywhere; }
.k-retorno .k-btn { margin: var(--v-space-1) 0 0; }

@media (min-width: 761px) {
    .k-tela-tit { font-size: var(--v-t-2xl); }
    .k-tela-busca { grid-template-columns: minmax(0, 1fr) minmax(180px, 240px); }
    .k-cli-tabela tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .k-prop-linha { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center; gap: var(--v-space-4); }
    .k-prop-preco { font-size: var(--v-t-md); }
    .k-prop-acoes { flex-direction: column; align-items: stretch; }
    .k-painel { width: min(760px, calc(100% - 48px)); padding-left: var(--v-space-5); padding-right: var(--v-space-5); }
    .k-painel-cab { margin-left: calc(-1 * var(--v-space-5)); margin-right: calc(-1 * var(--v-space-5)); padding-left: var(--v-space-5); padding-right: var(--v-space-5); }
}

@media (min-width: 1100px) {
    .k-cli-tabela { display: table; border: 1px solid var(--v-line); border-collapse: separate; border-spacing: 0; border-radius: var(--v-radius-card); overflow: hidden; background: var(--v-surface); box-shadow: var(--v-shadow-1); }
    .k-cli-tabela thead { position: static; display: table-header-group; width: auto; height: auto; overflow: visible; clip: auto; }
    .k-cli-tabela tbody { display: table-row-group; }
    .k-cli-tabela tr.linha { display: table-row; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
    .k-cli-tabela th, .k-cli-tabela td { display: table-cell; padding: var(--v-space-3) var(--v-space-4); border-bottom: 1px solid var(--v-line); vertical-align: middle; }
    .k-cli-tabela th { position: static; background: var(--v-surface); color: var(--v-ink-3); font: 700 var(--v-t-xs)/1.2 var(--v-font-body); letter-spacing: .06em; text-transform: uppercase; }
    .k-cli-tabela tr.linha:last-child td { border-bottom: 0; }
    .k-cli-tabela .linha-titulo { font-size: var(--v-t-sm); }
    .k-cli-local > span { display: block; }
    .k-cli-local .k-cli-sub::before, .k-cli-vend::before { content: none; }
    .k-cli-sit { padding-top: var(--v-space-3); }
    .k-cli-tabela .k-cli-acoes { display: table-cell; margin: 0; border-top: 0; text-align: right; white-space: nowrap; }
    .k-cli-acoes .k-btn + .k-btn { margin-left: var(--v-space-2); }
    .k-cli-ligar { display: none; }
    .k-cli-wa { min-width: var(--v-alvo); padding: 0; }
    .k-cli-rot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* --- VIS6: módulo Instalar (Homologação, Visitas e agenda, Obra, Manutenção; Usina, O.S. e chamados no painel). Mocks fase6/ (artefato do redesenho).
   As abas levam .k-ins (index.html) e os blocos antigos (.card, .linha, .chip, .kpi) ganham o visual pelo contexto, sem trocar classe nem ID dos e2e.
   Os diálogos de Instalar viram PAINEL LATERAL (decisão do usuário, padrão da ficha do VIS5a): .modal-fundo.k-ins-fundo cobre só a área do conteúdo
   (abaixo do topo, à direita do menu lateral, acima da barra inferior: variáveis do menu.css; sem o data-nav, 0), z-index 1 (abaixo da folha do menu,
   da barra inferior, do topo, dos avisos e dos modais de confirmação, que abrem por cima). Celular = página; computador = coluna à direita. --- */
.k-ins { font-family: var(--v-font-body); color: var(--v-ink); }
.k-ins-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--v-space-3); margin: 0 0 var(--v-space-4); }
.k-ins-cab > div { min-width: 0; }
.k-ins-tit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v-space-1); margin: 0; font: 800 var(--v-t-xl)/1.15 var(--v-font-display); letter-spacing: -.02em; color: var(--v-ink); overflow-wrap: anywhere; }
.k-ins-sub { margin: var(--v-space-1) 0 0; font-size: var(--v-t-sm); line-height: 1.45; color: var(--v-ink-2); overflow-wrap: anywhere; }
.k-ins-sub .k-dica { vertical-align: middle; }
.k-ins-chips { display: flex; flex-wrap: wrap; gap: var(--v-space-2); margin: var(--v-space-2) 0 0; }
.k-ins-cab .k-btn { margin: 0; }
.k-ins-cab--pagina { flex-direction: column; align-items: flex-start; }
.k-ins-voltar { margin-left: calc(-1 * var(--v-space-3)); text-decoration: underline; text-underline-offset: 3px; }
.k-ins-nota { display: flex; align-items: flex-start; gap: var(--v-space-2); margin: var(--v-space-3) 0 0; font-size: var(--v-t-sm); line-height: 1.45; color: var(--v-ink-2); }
.k-ins-nota .ic, .k-ins-trava-nota .ic { flex: none; width: 18px; height: 18px; margin-top: 2px; }
/* cartões, linhas e chips antigos dentro de Instalar (aba ou painel) */
:is(.k-ins, .k-ins-painel) .card { margin: 0 0 var(--v-space-4); padding: var(--v-space-4); border: 1px solid var(--v-line); border-radius: var(--v-radius-card); background: var(--v-surface); box-shadow: var(--v-shadow-1); color: var(--v-ink); }
:is(.k-ins, .k-ins-painel) .card-titulo { font: 700 var(--v-t-lg)/1.3 var(--v-font-display); color: var(--v-ink); }
:is(.k-ins, .k-ins-painel) .card-nota { font-size: var(--v-t-sm); line-height: 1.45; color: var(--v-ink-2); }
:is(.k-ins, .k-ins-painel) .linha { padding: var(--v-space-3) 0; border-bottom: 1px solid var(--v-line); }
:is(.k-ins, .k-ins-painel) .linha:last-child { border-bottom: 0; }
:is(.k-ins, .k-ins-painel) .linha:hover { background: none; }
:is(.k-ins, .k-ins-painel) .linha-titulo { font: 700 var(--v-t-md)/1.3 var(--v-font-display); white-space: normal; overflow-wrap: anywhere; color: var(--v-ink); }
:is(.k-ins, .k-ins-painel) :is(.linha-fraca, .fraco) { font-size: var(--v-t-sm); line-height: 1.45; color: var(--v-ink-2); overflow-wrap: anywhere; }
:is(.k-ins, .k-ins-painel) .chip { gap: var(--v-space-1); padding: 2px var(--v-space-2); border-radius: 999px; background: var(--v-surface-2); color: var(--v-ink-2); font: 700 var(--v-t-xs)/1.4 var(--v-font-body); }
:is(.k-ins, .k-ins-painel) .chip .ic { width: 14px; height: 14px; }
:is(.k-ins, .k-ins-painel) .chip-ok { background: var(--v-ok-bg); color: var(--v-ok); }
:is(.k-ins, .k-ins-painel) .chip-aviso { background: var(--v-warn-bg); color: var(--v-warn); }
:is(.k-ins, .k-ins-painel) .chip-erro { background: var(--v-err-bg); color: var(--v-err); }
:is(.k-ins, .k-ins-painel) :is(.btn, .btn-sm) { border-radius: var(--v-radius-ctl); font-family: var(--v-font-body); }
:is(.k-ins, .k-ins-painel) .btn-sm:not(.k-btn):not(.excluir) { border: 1px solid var(--v-line); background: var(--v-surface); color: var(--v-ink); font-size: var(--v-t-xs); font-weight: 700; }
:is(.k-ins, .k-ins-painel) .vazio { color: var(--v-ink-2); }
/* números do topo (um cartão, células com linha entre elas; celular = 2 por linha) */
.k-ins-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 var(--v-space-4); overflow: hidden; border: 1px solid var(--v-line); border-radius: var(--v-radius-card); background: var(--v-surface); box-shadow: var(--v-shadow-1); }
.k-ins-kpis .kpi { min-width: 0; padding: var(--v-space-4); border: 0; border-top: 1px solid var(--v-line); border-radius: 0; background: var(--v-surface); color: var(--v-ink); }
.k-ins-kpis .kpi:nth-child(-n+2) { border-top: 0; }
.k-ins-kpis .kpi:nth-child(2n) { border-left: 1px solid var(--v-line); }
.k-ins-kpis .kpi-rotulo { font-size: var(--v-t-sm); font-weight: 700; color: var(--v-ink-2); }
.k-ins-kpis .kpi-valor { margin: var(--v-space-1) 0 0; font: 800 var(--v-t-lg)/1.2 var(--v-font-display); color: var(--v-ink); overflow-wrap: anywhere; }
.k-ins-kpis .kpi-sub { margin: var(--v-space-1) 0 0; font-size: var(--v-t-xs); line-height: 1.4; color: var(--v-ink-3); }
/* atalhos em chip (aria-pressed); contagem do servidor ao lado do rótulo */
.k-ins-atalhos { display: flex; flex-wrap: wrap; gap: var(--v-space-2); margin: 0 0 var(--v-space-4); }
.k-ins-chip {
    display: inline-flex; align-items: center; gap: var(--v-space-2); min-height: var(--v-alvo); margin: 0; padding: 0 var(--v-space-4);
    border: 1px solid var(--v-line); border-radius: 999px; background: var(--v-surface); color: var(--v-ink); font: 700 var(--v-t-sm)/1.2 var(--v-font-body); cursor: pointer;
}
.k-ins-chip:hover { background: var(--v-surface-2); }
.k-ins-chip:focus-visible { outline: 3px solid var(--v-info); outline-offset: 2px; }
.k-ins-chip[aria-pressed="true"] { border-color: var(--v-ink); background: var(--v-ink); color: var(--v-surface); }
.k-ins-chip-n { font-variant-numeric: tabular-nums; }
.k-ins-cartao { padding: var(--v-space-2) var(--v-space-4); }
.k-ins .rel-filtros { margin: 0 0 var(--v-space-4); }
/* cadeado: a tela diz o motivo em vez de esconder sem explicar */
.k-ins-trava { display: grid; grid-template-columns: var(--v-alvo) minmax(0, 1fr); gap: var(--v-space-3); align-items: start; padding: var(--v-space-5) var(--v-space-4); border: 1px solid var(--v-line); border-radius: var(--v-radius-card); background: var(--v-surface); color: var(--v-ink-2); }
.k-ins-trava > .ic { width: var(--v-alvo); height: var(--v-alvo); padding: 10px; border-radius: 12px; background: var(--v-surface-2); color: var(--v-ink); }
.k-ins-trava p { margin: 0; font-size: var(--v-t-sm); line-height: 1.5; }
.k-ins-trava .k-ins-trava-tit { margin-bottom: var(--v-space-1); font: 700 var(--v-t-md)/1.3 var(--v-font-display); color: var(--v-ink); }
.k-ins-trava-nota { display: flex; align-items: flex-start; gap: var(--v-space-2); }

/* painel lateral */
.modal-fundo.k-ins-fundo { position: fixed; inset: auto; top: var(--ml-topo, 0px); right: 0; bottom: var(--ml-base, 0px); left: var(--ml-w, 0px); z-index: 1; display: flex; align-items: stretch; justify-content: flex-end; padding: 0; background: none; }
.k-ins-fundo::before { content: ""; position: absolute; inset: 0; background: var(--v-ink); opacity: .45; }
.modal.k-ins-painel {
    position: relative; width: 100%; max-width: none; height: 100%; max-height: none; overflow-y: auto; overscroll-behavior: contain; gap: var(--v-space-3);
    margin: 0; padding: 0 var(--v-space-4); border-radius: 0; background: var(--v-bg); color: var(--v-ink); box-shadow: var(--v-shadow-2); font-family: var(--v-font-body);
}
.modal.k-ins-painel:focus-visible { outline: 3px solid var(--v-info); outline-offset: -3px; }
.k-ins-fechar { position: sticky; top: var(--v-space-3); z-index: 3; align-self: flex-end; min-width: var(--v-alvo); margin: var(--v-space-3) 0 calc(-1 * var(--v-alvo) - var(--v-space-3)); padding: 0; flex: none; }
.k-ins-painel > h3 { margin: var(--v-space-4) 0 0; padding-right: calc(var(--v-alvo) + var(--v-space-3)); font: 800 var(--v-t-lg)/1.25 var(--v-font-display); letter-spacing: -.01em; color: var(--v-ink); overflow-wrap: anywhere; }
.k-ins-painel > h3 + p.linha-fraca { padding-right: calc(var(--v-alvo) + var(--v-space-3)); }
.k-ins-painel h4, .k-ins-painel .sub-titulo { font: 700 var(--v-t-md)/1.3 var(--v-font-display); color: var(--v-ink); }
.k-ins-painel p { font-size: var(--v-t-sm); }
.k-ins-painel > .modal-acoes:last-child, .k-ins-painel > div > .modal-acoes:last-child {
    position: sticky; bottom: 0; z-index: 2; margin: auto calc(-1 * var(--v-space-4)) 0; padding: var(--v-space-3) var(--v-space-4) calc(var(--v-space-3) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--v-line); background: var(--v-surface);
}
.k-ins-painel .timeline-item::before { background: var(--v-ink-3); }
/* usina: as partes viram uma faixa de abas no topo do painel */
.k-ins-painel .k-usina-abas { justify-content: flex-start; flex-wrap: nowrap; gap: var(--v-space-1); overflow-x: auto; margin: 0 calc(-1 * var(--v-space-4)); padding: 0 var(--v-space-4); border-bottom: 1px solid var(--v-line); }
.k-ins-painel .k-usina-abas .btn { flex: none; margin: 0; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none; color: var(--v-ink-2); font-weight: 700; }
.k-ins-painel .k-usina-abas .btn:hover { color: var(--v-ink); border-bottom-color: var(--v-line); }

/* Homologação: passos (5 tracinhos), item em cartão no celular e linha de 3 colunas a partir de 1100 px */
.k-hom-lista { gap: 0; overflow: hidden; border: 1px solid var(--v-line); border-radius: var(--v-radius-card); background: var(--v-surface); box-shadow: var(--v-shadow-1); }
.k-hom-item { grid-template-columns: minmax(0, 1fr); gap: var(--v-space-2); padding: var(--v-space-4); border: 0; border-top: 1px solid var(--v-line); border-radius: 0; background: var(--v-surface); color: var(--v-ink); }
.k-hom-item:first-child { border-top: 0; }
.k-hom-item .hom-quem strong { font: 700 var(--v-t-md)/1.3 var(--v-font-display); color: var(--v-ink); }
.k-hom-item .hom-marco { gap: var(--v-space-1); font-size: var(--v-t-sm); color: var(--v-ink); }
.k-hom-marco b { font-weight: 700; }
.k-hom-chips { display: flex; flex-wrap: wrap; gap: var(--v-space-1); }
.k-hom-item .hom-situacao { gap: var(--v-space-2); align-items: stretch; }
.k-hom-item .hom-situacao .k-btn { width: 100%; }
.k-hom-passos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--v-space-1); margin: var(--v-space-1) 0; padding: 0; list-style: none; }
.k-hom-passo { height: 5px; border-radius: 999px; background: var(--v-line); }
.k-hom-passo--feito { background: var(--v-ok); }
.k-hom-passo--atual { background: var(--v-action); }
.k-hom-passo--erro { background: var(--v-err); }

/* Agenda (lista por dia): um cartão por dia; bolha com o ícone e a cor do tipo à esquerda */
.k-age-dias { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v-space-3); }
.k-age-dia { min-width: 0; padding: var(--v-space-3) var(--v-space-4); border: 1px solid var(--v-line); border-radius: var(--v-radius-card); background: var(--v-surface); }
.k-age-dia .agenda-dia { margin: 0 0 var(--v-space-1); font: 700 var(--v-t-md)/1.3 var(--v-font-display); text-transform: none; color: var(--v-ink); }
.k-age-dia .agenda-dia::first-letter { text-transform: uppercase; }
.k-age-dia .agenda-item { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: start; gap: var(--v-space-1) var(--v-space-3); }
.k-age-dia .agenda-item > :not(.k-age-ic) { grid-column: 2; }
.k-age-ic { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--v-surface-2); color: var(--v-ink-2); }
.k-age-ic .ic { width: 18px; height: 18px; }
.k-age-ic--visita, .k-age-ic--homologacao { background: var(--v-info-bg); color: var(--v-info); }
.k-age-ic--manutencao { background: var(--v-ok-bg); color: var(--v-ok); }
.k-age-ic--obra { background: var(--v-warn-bg); color: var(--v-warn); }
.k-age-dia .agenda-item .k-btn { justify-self: start; margin: var(--v-space-1) 0 0; }

/* Visita técnica: página com o formulário e as fotos; a homologação ao lado no computador */
.k-vis-pagina { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--v-space-4); align-items: start; }

/* Obras: lista com a etapa da vez e a barra de avanço */
.k-obra-linha { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v-space-2); align-items: center; }
.k-obra-avanco { min-width: 0; font-size: var(--v-t-sm); color: var(--v-ink-2); }
.k-obra-avanco-txt { display: flex; justify-content: space-between; gap: var(--v-space-2); margin-bottom: var(--v-space-1); }
.k-obra-avanco-txt b { flex: none; color: var(--v-ink); }
.k-obra-avanco-txt span { min-width: 0; overflow-wrap: anywhere; }   /* nome de etapa longo sem espaço quebra dentro da linha (obra2) */
.k-obra-barra { display: block; width: 100%; height: 8px; border: 0; border-radius: 999px; overflow: hidden; appearance: none; -webkit-appearance: none; background: var(--v-surface-2); }
.k-obra-barra::-webkit-progress-bar { background: var(--v-surface-2); }
.k-obra-barra::-webkit-progress-value { background: var(--v-action); }
.k-obra-barra::-moz-progress-bar { background: var(--v-action); }
.k-obra-chips { display: flex; flex-wrap: wrap; gap: var(--v-space-1); }
.k-obra-chips:empty { display: none; }
.k-obra-linha .linha-acoes .k-btn { width: 100%; }
.k-obra-cons summary { display: list-item; min-height: var(--v-alvo); padding-top: var(--v-space-3); font-weight: 700; color: var(--v-ink); cursor: pointer; }
.k-obra-cons summary:focus-visible { outline: 3px solid var(--v-info); outline-offset: 2px; }
.k-obra-pagina { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--v-space-4); align-items: start; }
/* etapa da obra: os botões quebram linha (na coluna do cronograma eles não cabem numa linha só) */
.k-ins .obra-etapa { flex-wrap: wrap; }
.k-ins .obra-etapa .linha-acoes { flex-shrink: 1; flex-wrap: wrap; }
.k-obra-inline { margin: 0 0 var(--v-space-3); padding: var(--v-space-3) var(--v-space-4); border: 1px solid var(--v-line); border-radius: var(--v-radius-ctl); background: var(--v-surface-2); color: var(--v-ink); }
.k-obra-inline .sub-titulo { margin-top: 0; }
.k-obra-inline .modal-acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--v-space-2); }

/* Manutenção: a próxima revisão em destaque */
.k-man-linha { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v-space-2); align-items: start; }
.k-man-proxima { display: block; font-size: var(--v-t-md); color: var(--v-ink); }
.k-man-datas, .k-man-chips { min-width: 0; }
.k-man-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v-space-1) var(--v-space-2); }
.k-man-linha .linha-acoes { flex-wrap: wrap; }
.k-man-os { display: flex; align-items: center; gap: var(--v-space-1); }

@media (min-width: 761px) {
    .k-ins-tit { font-size: var(--v-t-2xl); }
    .k-ins-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .k-ins-kpis .kpi { padding: var(--v-space-5); border-top: 0; border-left: 1px solid var(--v-line); }
    .k-ins-kpis .kpi:first-child { border-left: 0; }
    .k-ins-kpis .kpi-valor { font-size: var(--v-t-xl); }
    .modal.k-ins-painel { width: min(720px, calc(100% - 48px)); padding: 0 var(--v-space-5); }
    .k-ins-painel > .modal-acoes:last-child, .k-ins-painel > div > .modal-acoes:last-child { margin-left: calc(-1 * var(--v-space-5)); margin-right: calc(-1 * var(--v-space-5)); padding-left: var(--v-space-5); padding-right: var(--v-space-5); }
    .k-ins-painel .k-usina-abas { margin: 0 calc(-1 * var(--v-space-5)); padding: 0 var(--v-space-5); }
    .k-age-dias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .k-obra-linha { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .k-obra-linha .linha-acoes .k-btn { width: auto; }
    .k-man-linha { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 1100px) {
    .k-hom-item { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--v-space-4); }
    .k-hom-item .hom-situacao { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
    .k-hom-item .hom-situacao .k-btn { width: auto; }
    .k-vis-pagina { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); grid-template-rows: auto 1fr; }   /* a sobra da coluna alta vai para a última linha */
    .k-vis-pagina > .k-vis-hom { grid-column: 2; grid-row: 1 / span 2; }
    .k-obra-linha { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .9fr) auto; gap: var(--v-space-4); }
    .k-man-linha { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, .8fr) auto; gap: var(--v-space-4); align-items: center; }
    .k-man-linha .linha-acoes { justify-content: flex-end; max-width: 320px; }
    .k-obra-pagina { grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); grid-template-rows: auto auto auto auto 1fr; grid-auto-flow: row dense; }
    .k-obra-pagina > .k-obra-topo { grid-column: 1 / -1; }
    .k-obra-pagina > #obraCronograma { grid-column: 1; grid-row: 2 / span 4; }
    .k-obra-pagina > :not(.k-obra-topo, #obraCronograma) { grid-column: 2; }
}